/* ==========================================================================
   L2 Group — modern siding & cladding
   Day / night theme lives on <html data-time="day|night">: the page opens at night and follows the hero's
   time-of-day slider and the nav switch (js/main.js).
   ========================================================================== */

:root {
  --lime: #8dc63f;
  --lime-deep: #4f7a14;
  --char-950: #0a0b0d;
  --char-900: #111215;
  --char-800: #1a1b1f;
  --char-600: #3b3d42;
  --warm: #ffb45e;

  /* Day */
  --bg: #efeee9;
  --bg-2: #e4e3dd;
  --surface: #f9f8f4;
  --ink: #131417;
  --ink-2: #3a3c41;
  --muted: #6c6f75;
  --line: rgba(19, 20, 23, .13);
  --accent: var(--lime);
  --accent-ink: var(--lime-deep);
  --chip-bg: rgba(19, 20, 23, .06);
  --shadow: 0 30px 60px -30px rgba(20, 22, 26, .35);

  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --radius: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --theme-dur: 1.1s;
  --nav-h: 76px;
}

:root[data-time="night"] {
  --bg: #0a0b0d;
  --bg-2: #121317;
  --surface: #17181c;
  --ink: #f1f0eb;
  --ink-2: #cfcfca;
  --muted: #8f9297;
  --line: rgba(255, 255, 255, .11);
  --accent: #a3d65c;
  --accent-ink: #a8dc62;
  --chip-bg: rgba(255, 255, 255, .07);
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Root clip keeps body's own overflow-x: clip in effect. Without it, body's value is handed to the viewport, which
   phones ignore — any element poking past the right edge then zooms the page out and shows a blank strip. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color var(--theme-dur) ease, color var(--theme-dur) ease;
}
img, video, svg { display: block; max-width: 100%; }
video { background: #000; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ol, fieldset { margin: 0; padding: 0; }
ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
svg use { pointer-events: none; }
::selection { background: var(--lime); color: #111; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* film-driven day/night flips: sections below the hero switch instantly instead of animating
   hundreds of colour transitions at once (the hero overlay itself still animates) */
.theme-snap body, /* body's colour is inherited by the whole page: animating it restyled every element for 1.1s */
.theme-snap main section:not(.hero), .theme-snap main section:not(.hero) *, .theme-snap main section:not(.hero) *::before,
.theme-snap main section:not(.hero) *::after, .theme-snap .footer, .theme-snap .footer * { transition: none !important; }

.wrap { max-width: 1480px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { padding-inline: clamp(10px, 1.4vw, 22px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-ink);
  transition: color var(--theme-dur) ease;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.eyebrow--light { color: var(--lime); }

.display, .sec-title, .cat-title, .hero-line, .braid-title, .contact-title, .stat-num {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .9;
}
.sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 4vw, 56px); }
.sec-title { font-size: clamp(2.2rem, 6.4vw, 6.2rem); }

/* ---------- buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 48px; padding: 0 22px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transition: color .45s var(--ease), background-color var(--theme-dur) ease, border-color .45s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn--big { height: 60px; padding: 0 32px; font-size: .9rem; }
.btn--accent { background: var(--lime); color: #101113; }
.btn--line { border: 1.5px solid var(--line); color: var(--ink); }
.btn--ghost-light { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; background: rgba(10, 11, 13, .38); }
/* siding-slat hover fill (slats injected by JS) */
.btn-slats { position: absolute; inset: 0; z-index: -1; display: flex; pointer-events: none; }
.btn-slats i { flex: 1; background: var(--ink); transform: translateY(101%); transition: transform .5s var(--ease); }
.btn--accent .btn-slats i { background: #101113; }
.btn--ghost-light .btn-slats i { background: #fff; }
.btn-slats i:nth-child(2) { transition-delay: .04s; } .btn-slats i:nth-child(3) { transition-delay: .08s; }
.btn-slats i:nth-child(4) { transition-delay: .12s; } .btn-slats i:nth-child(5) { transition-delay: .16s; }
@media (hover: hover) {
  .btn:hover .btn-slats i { transform: none; }
  .btn--accent:hover { color: var(--lime); }
  .btn--line:hover { color: var(--bg); border-color: var(--ink); }
  .btn--ghost-light:hover { color: #111; border-color: #fff; }
}

/* ---------- "click me" hints (client icons) ---------- */
/* the hints bounce a few times once they come into view (JS adds .is-live), not forever: any endless animation
   keeps the browser compositing at the monitor's full refresh rate, which also re-processes the videos on screen */
.clickme { position: absolute; width: 72px; height: 72px; pointer-events: none; z-index: 5; transition: opacity .4s ease; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.clickme.is-live { animation: clickme 2.2s var(--ease) 4; }
.flexacc-item .clickme { right: 18px; top: 18px; }
.clickme--inline { position: relative; width: 52px; height: 52px; }
.clickme.is-gone { opacity: 0; animation: none; }
@keyframes clickme { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-4px, -6px) scale(1.06); } 55% { transform: translate(0, 0) scale(.94); } }

/* ---------- custom cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor [role="button"] { cursor: none; }
  .has-cursor input, .has-cursor textarea { cursor: text; }
  .cursor { display: block; position: fixed; inset: 0 auto auto 0; z-index: 9999; pointer-events: none; }
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; will-change: transform; }
  .cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--lime); box-shadow: 0 0 0 1.5px rgba(16, 17, 19, .55); }
  .cursor-ring {
    width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border: 1.5px solid var(--lime); box-shadow: 0 0 0 1px rgba(16, 17, 19, .25);
    display: grid; place-items: center;
    transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s, border-color .3s;
  }
  .cursor-ring em { font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #101113; opacity: 0; transition: opacity .25s; }
  .cursor.is-label .cursor-ring { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--lime); border-color: var(--lime); }
  .cursor.is-label .cursor-ring em { opacity: 1; }
  .cursor.is-label .cursor-dot { opacity: 0; }
  .cursor.is-hover .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .cursor.is-hidden, .cursor.is-map { opacity: 0; }
  /* the map keeps real cursors (grab to pan, pointer on pins and popup buttons) */
  .has-cursor .map-slot .leaflet-interactive, .has-cursor .map-slot a, .has-cursor .map-slot button, .has-cursor .map-slot [role="button"] { cursor: pointer; }
}

.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 950; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- intro curtain ---------- */
.curtain { position: fixed; inset: 0; z-index: 9600; pointer-events: none; animation: curtain-failsafe .01s 4s forwards; }
.curtain-slats { position: absolute; inset: 0; display: flex; }
.curtain-slats i { flex: 1; background: var(--char-950); box-shadow: inset -1px 0 0 rgba(141, 198, 63, .08); }
.curtain-logo { position: absolute; left: 50%; top: 50%; width: 96px; height: auto; transform: translate(-50%, -50%); border-radius: 6px; }
@keyframes curtain-failsafe { to { visibility: hidden; } }
.js-ready .curtain { animation: none; }
/* intro: CSS animations on the compositor (html.intro is set in <head> unless reduced motion), so the page's start-up
   work can't make them stutter. Times count from page start; JS removes .intro once everything has landed. */
.intro .curtain-logo { animation: intro-logo .5s cubic-bezier(.55, 0, 1, .45) .4s forwards; }
.intro .curtain-slats i { animation: intro-slat 1s cubic-bezier(.87, 0, .13, 1) calc(.55s + var(--d, 0s)) forwards; }
.curtain-slats i:nth-child(1), .curtain-slats i:nth-child(10) { --d: .18s; }
.curtain-slats i:nth-child(2), .curtain-slats i:nth-child(9) { --d: .135s; }
.curtain-slats i:nth-child(3), .curtain-slats i:nth-child(8) { --d: .09s; }
.curtain-slats i:nth-child(4), .curtain-slats i:nth-child(7) { --d: .045s; }
/* no night glow while the letters fly in: each moving letter is its own layer, and the 90px blur made every one of
   them several times larger (the line clipped most of the glow anyway); it fades in once they have landed */
.intro .hero-line, .intro .hero.is-night .hero-line { overflow: hidden; text-shadow: none; }
.intro .hero-line:not(.is-split) { animation: intro-hold 3s; } /* unsplit text stays hidden (failsafe: 3 s) */
.intro .hero-line .ch { animation: intro-ch 1.1s cubic-bezier(.16, 1, .3, 1) calc(1.05s - var(--intro-t, 0s) + var(--i, 0) * 24ms) both; }
.intro .hero-kicker { animation: intro-rise .9s cubic-bezier(.33, 1, .68, 1) 1.25s both; }
.intro .hero-hud { animation: intro-rise .9s cubic-bezier(.33, 1, .68, 1) 1.33s both; }
.intro .scroll-cue { animation: intro-rise-cue .9s cubic-bezier(.33, 1, .68, 1) 1.41s both; }
.intro .nav { animation: intro-fade .9s cubic-bezier(.33, 1, .68, 1) 1.15s both; }
@keyframes intro-logo { to { transform: translate(-50%, -50%) scale(.82); opacity: 0; } }
@keyframes intro-slat { to { transform: translateY(-101%); } }
@keyframes intro-ch { from { transform: translateY(115%); } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes intro-rise-cue { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-hold { from, to { opacity: 0; } }

/* ---------- clad transition (panels clad a building) ---------- */
.clad { position: fixed; inset: 0; z-index: 9500; visibility: hidden; pointer-events: none; display: grid; place-items: center; }
.clad.is-on { visibility: visible; pointer-events: auto; cursor: pointer; }
/* the backdrop moves with CSS transitions on transform, so the compositor keeps it smooth even while the
   page does heavy work underneath (the jump to the target section happens while it is covered) */
.clad-bg { position: absolute; inset: 0; background: var(--char-950); transform: translateY(101%); will-change: transform; }
.clad.is-on .clad-bg { transition: transform .55s var(--ease-io); }
.clad.is-in .clad-bg { transform: none; }
.clad.is-in.is-out .clad-bg { transform: translateY(-101%); transition-duration: .65s; }
.clad-inner { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .4s ease, transform .6s var(--ease-io); }
.clad.is-out .clad-inner { opacity: 0; transform: translateY(-8vh); }

/* siding-slat wipe for long jumps */
.wipe { position: fixed; inset: 0; z-index: 9400; display: flex; pointer-events: none; }
.wipe i { flex: 1; background: var(--char-950); transform: scaleY(0); transform-origin: 50% 100%; will-change: transform; box-shadow: inset -1px 0 0 rgba(141, 198, 63, .12); }
.wipe.is-in i { transform: scaleY(1); transition: transform .42s var(--ease-io) calc(var(--i) * 26ms); }
.wipe.is-in.is-out i { transform: scaleY(0); transform-origin: 50% 0; transition-delay: calc(var(--i) * 22ms); }
.wipe.is-in { pointer-events: auto; }
.clad-svg { position: relative; width: min(46vh, 70vw); height: auto; overflow: visible; }
.clad-svg .c-outline { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 2; }
.clad-svg .c-grid { stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.clad-svg .c-ground { stroke: var(--lime); stroke-width: 3; }
.clad-svg .c-scan { fill: var(--lime); opacity: .9; }
.clad-label {
  position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.6rem, 4.5vw, 3.6rem); letter-spacing: -.01em; color: #fff; white-space: nowrap;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 var(--gutter); color: #fff;
  transition: transform .6s var(--ease), color var(--theme-dur) ease, background-color var(--theme-dur) ease, box-shadow .4s ease;
}
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: color-mix(in srgb, var(--bg) 95%, transparent); border-bottom: 1px solid var(--line); transition: opacity .5s ease, background-color var(--theme-dur) ease; }
.nav.is-solid { color: var(--ink); }
.nav.is-solid::before { opacity: 1; }
.nav.is-hidden { transform: translateY(-105%); }
.nav-logo { flex-shrink: 0; }
.nav-logo img { width: 40px; height: auto; border-radius: 4px; }
.nav-links { display: flex; gap: clamp(14px, 2vw, 30px); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nav-links a { position: relative; padding: 6px 0; white-space: nowrap; opacity: .85; transition: opacity .3s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav-links a:hover, .nav-links a.is-current { opacity: 1; }
.nav-links a:hover::after, .nav-links a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav-right { display: flex; align-items: center; gap: 12px; }
/* eight links only just fit above the burger breakpoint */
@media (max-width: 1240px) { .nav-links { gap: 12px; } }
.nav-cta { height: 42px; padding: 0 18px; font-size: .72rem; }

.daynight { padding: 4px; }
.daynight-track {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 70px; height: 34px; padding: 0 9px; border-radius: 999px;
  background: rgba(10, 11, 13, .32); border: 1px solid rgba(255, 255, 255, .28);
  transition: background-color var(--theme-dur) ease, border-color var(--theme-dur) ease;
}
.nav.is-solid .daynight-track { background: var(--chip-bg); border-color: var(--line); }
.daynight-track svg { width: 15px; height: 15px; position: relative; z-index: 1; transition: color .6s, opacity .6s; }
.dn-sun { color: #1a1b1f; } .dn-moon { color: currentColor; opacity: .6; }
.daynight-knob { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #ffd66b; box-shadow: 0 0 18px rgba(255, 214, 107, .7); transition: transform .8s var(--ease), background-color .8s, box-shadow .8s; }
[data-time="night"] .daynight-knob { transform: translateX(36px); background: #e9ecf5; box-shadow: 0 0 18px rgba(200, 215, 255, .6); }
[data-time="night"] .dn-sun { color: currentColor; opacity: .6; }
[data-time="night"] .dn-moon { color: #1a1b1f; opacity: 1; }

.nav-burger { display: none; width: 44px; height: 44px; position: relative; }
.nav-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.nav-burger span:first-child { top: 17px; } .nav-burger span:last-child { top: 25px; }
.menu-open .nav-burger span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .nav-burger span:last-child { top: 21px; transform: rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 850; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  background: var(--char-950); color: #fff;
  transform: translateY(-100%); transition: transform .7s var(--ease-io), visibility 0s .7s; visibility: hidden;
}
.menu-open .menu { transform: none; visibility: visible; transition: transform .7s var(--ease-io); }
.menu-open .nav { color: #fff; }
.menu-open .nav::before { opacity: 0; }
.menu nav { display: flex; flex-direction: column; gap: 4px; }
.menu nav a { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 8.5vw, 3rem); line-height: 1.12; transform: translateY(30px); opacity: 0; transition: transform .7s var(--ease), opacity .7s; }
.menu-open .menu nav a { transform: none; opacity: 1; }
.menu nav a:nth-child(2) { transition-delay: .04s; } .menu nav a:nth-child(3) { transition-delay: .08s; } .menu nav a:nth-child(4) { transition-delay: .12s; }
.menu nav a:nth-child(5) { transition-delay: .16s; } .menu nav a:nth-child(6) { transition-delay: .2s; } .menu nav a:nth-child(7) { transition-delay: .24s; } .menu nav a:nth-child(8) { transition-delay: .28s; }
.menu-foot { display: flex; flex-direction: column; gap: 6px; color: var(--lime); font-weight: 600; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; color: #fff; background: #000; }
.hero-media { position: absolute; inset: 0; will-change: transform; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-dusk { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(255, 120, 60, .32), rgba(160, 50, 120, .2) 45%, rgba(20, 20, 60, .1)); }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 48%, rgba(0,0,0,.62) 100%); }
.hero-glow { position: absolute; inset: 0; opacity: 0; transition: opacity 2.2s ease; background: radial-gradient(60% 50% at 70% 40%, rgba(255, 170, 80, .12), transparent 70%), linear-gradient(180deg, rgba(8, 14, 40, .35), transparent 40%); }
.hero.is-night .hero-glow { opacity: 1; }
.hero-content { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(96px, 15vh, 150px); }
.hero-title { display: flex; flex-direction: column; font-weight: 800; }
.hero-kicker { font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; display: inline-flex; align-items: center; gap: .7em; }
.hero-kicker::before { content: ""; width: 28px; height: 2px; background: var(--lime); }
.hero-line { display: block; font-size: clamp(2.3rem, 7.6vw, 8.8rem); padding-bottom: .04em; transition: text-shadow 1s ease; }
.hero-line em { font-style: normal; color: var(--lime); }
.hero.is-night .hero-line { text-shadow: 0 0 40px rgba(255, 180, 94, .45), 0 0 90px rgba(255, 150, 60, .25); }
.hero-line .ch { display: inline-block; }
.hero-hud { position: absolute; right: var(--gutter); bottom: 30px; display: flex; align-items: center; gap: 16px; font-size: .74rem; }
.hud-now { display: flex; flex-direction: column; text-align: right; line-height: 1.35; }
.hud-label { opacity: .6; letter-spacing: .18em; text-transform: uppercase; font-size: .64rem; }
.hud-name { font-weight: 600; }
.hud-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .35); }
.hud-btn svg { width: 14px; height: 14px; }
.hud-btn .i-play, .hero.is-paused .hud-btn .i-pause { display: none; }
.hero.is-paused .hud-btn .i-play { display: block; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; }
.scroll-cue i { position: relative; width: 1.5px; height: 46px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: #fff; transform: translateY(-100%); animation: cue 1.8s var(--ease-io) 1.4s 4; } /* finite: see .clickme */
@keyframes cue { to { transform: translateY(250%); } }

/* sections after the hero slide over it like a panel */
main section:not(.hero) { position: relative; z-index: 1; background: var(--bg); transition: background-color var(--theme-dur) ease; }
.explore { border-radius: 28px 28px 0 0; margin-top: -28px; padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 120px); box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .35); }
.explore-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.explore-count { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- flex accordion (section tiles + commercial) ---------- */
.flexacc { display: flex; gap: 10px; height: min(78vh, 780px); min-height: 460px; contain: layout style; }
.flexacc-item {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--radius);
  color: #fff; background: var(--char-900); isolation: isolate;
  transition: flex-grow .95s var(--ease);
}
.flexacc-item.is-active { flex-grow: 4.2; }
.flexacc-media { position: absolute; top: 0; bottom: 0; left: 50%; z-index: -1; width: max(100%, 44vw); transform: translateX(-50%); }
.flexacc-media img, .flexacc-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* only the photo zooms as a tile opens. The video never animates its size: Firefox drew a playing video whose
   transform changed during the tile resize as a blank white box on some frames. JS starts it once the tile has nearly opened. */
.flexacc-media img { transform: scale(1.12); transition: transform 1.4s var(--ease); }
.flexacc-media video { opacity: 0; transition: opacity .6s ease; }
.flexacc-media video.is-playing { opacity: 1; }
.flexacc-item.is-active .flexacc-media img { transform: scale(1); }
.flexacc-item::before { content: ""; position: absolute; inset: 0; background: rgba(10, 11, 13, .38); transition: opacity .8s ease; pointer-events: none; }
.flexacc-item.is-active::before { opacity: 0; }
.flexacc-item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 55%, rgba(0,0,0,.72)); }
.flexacc-num { position: absolute; top: 18px; left: 18px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
.flexacc-v {
  position: absolute; left: 50%; bottom: 22px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
  font-family: var(--font-display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; font-size: clamp(1rem, 1.5vw, 1.4rem); letter-spacing: .02em; white-space: nowrap;
  transition: opacity .5s ease;
}
.flexacc-h { position: absolute; left: 24px; right: 24px; bottom: 24px; opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .8s var(--ease); pointer-events: none; }
.flexacc-h h2, .flexacc-h h3 { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 3.6rem); line-height: .92; letter-spacing: -.02em; }
.flexacc-h p { margin-top: 8px; font-size: .85rem; opacity: .85; }
.flexacc-count { display: inline-block; margin-top: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.flexacc-item.is-active .flexacc-v { opacity: 0; }
.flexacc-item.is-active .flexacc-h { opacity: 1; transform: none; transition-delay: .25s; }

/* ---------- One Fifty Braid ---------- */
.braid { height: 100vh; height: 100svh; overflow: hidden; color: #fff; background: #000 !important; }
.braid-stage { position: absolute; inset: 0; }
.braid-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.braid-night { opacity: 0; }
.braid-dusk { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(255, 120, 60, .32), rgba(160, 50, 120, .2) 45%, rgba(20, 20, 60, .1)); }
.braid-stars { position: absolute; inset: 0 0 45% 0; opacity: 0; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent), radial-gradient(1.4px 1.4px at 44% 22%, #fff, transparent), radial-gradient(1px 1px at 63% 12%, #fff, transparent), radial-gradient(1.3px 1.3px at 78% 26%, #fff, transparent), radial-gradient(1px 1px at 88% 6%, #fff, transparent), radial-gradient(1px 1px at 6% 34%, #fff, transparent), radial-gradient(1.2px 1.2px at 54% 36%, #fff, transparent), radial-gradient(1px 1px at 94% 40%, #fff, transparent); }
.braid-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(0,0,0,.55)), linear-gradient(0deg, rgba(0,0,0,.6), transparent 45%); }
.braid-ui { position: absolute; left: var(--gutter); bottom: clamp(110px, 19vh, 200px); right: var(--gutter); }
.braid-ui .eyebrow { text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.braid-title { font-size: clamp(3rem, 11vw, 11.5rem); margin: 18px 0 14px; }
.braid.is-night .braid-title { text-shadow: 0 0 30px rgba(255, 196, 120, .55), 0 0 80px rgba(255, 170, 80, .35); }
.braid-meta { font-size: .85rem; opacity: .8; letter-spacing: .06em; }
.braid-controls { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.braid-toggle { position: relative; display: flex; align-items: center; height: 48px; padding: 0 6px; border-radius: 999px; background: rgba(10, 11, 13, .42); border: 1px solid rgba(255, 255, 255, .3); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.braid-toggle span:not(.bt-knob) { position: relative; z-index: 1; width: 78px; text-align: center; transition: color .6s; }
.bt-day { color: #101113; }
.bt-knob { position: absolute; top: 5px; left: 5px; width: 78px; height: 36px; border-radius: 999px; background: #ffd66b; transition: transform .8s var(--ease), background-color .8s; }
.braid.is-night .bt-knob { transform: translateX(78px); background: #e7ebf7; }
.braid.is-night .bt-day { color: #fff; } .braid.is-night .bt-night { color: #101113; }
/* time-of-day slider, noon → midnight (hero + One Fifty Braid): the visitor sets the scene; neither section is tied
   to the page scroll */
.tod { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; border-radius: 999px; background: rgba(10, 11, 13, .42); border: 1px solid rgba(255, 255, 255, .3); }
.tod svg { flex: none; width: 18px; height: 18px; color: #ffd66b; }
.tod .tod-moon { width: 15px; height: 15px; color: #e7ebf7; }
.tod-range { -webkit-appearance: none; appearance: none; display: block; width: clamp(150px, 15vw, 240px); height: 28px; margin: 0; background: none; cursor: pointer; }
.has-cursor .tod-range { cursor: none; }
.tod-range:focus { outline: none; }
.tod-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #fff1bf, #ffd66b 32%, #ff8a4c 58%, #7f8cff 80%, #e7ebf7); }
.tod-range::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #fff1bf, #ffd66b 32%, #ff8a4c 58%, #7f8cff 80%, #e7ebf7); }
.tod-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 214, 107, .3), 0 0 18px rgba(255, 214, 107, .85); transition: box-shadow .6s; }
.tod-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 214, 107, .3), 0 0 18px rgba(255, 214, 107, .85); transition: box-shadow .6s; }
.is-night .tod-range::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(170, 185, 255, .28), 0 0 18px rgba(200, 212, 255, .8); }
.is-night .tod-range::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(170, 185, 255, .28), 0 0 18px rgba(200, 212, 255, .8); }
.tod-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--lime); outline-offset: 4px; }
.tod-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--lime); outline-offset: 4px; }
/* compact version in the hero's corner controls */
.tod--sm { height: 36px; padding: 0 14px; gap: 10px; background: rgba(10, 11, 13, .38); border-color: rgba(255, 255, 255, .25); }
.tod--sm svg { width: 15px; height: 15px; } .tod--sm .tod-moon { width: 13px; height: 13px; }
.tod--sm .tod-range { width: clamp(120px, 11vw, 190px); height: 24px; }
.tod--sm .tod-range::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; }
.tod--sm .tod-range::-moz-range-thumb { width: 16px; height: 16px; }
.braid-dial { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 30px); width: clamp(160px, 16vw, 230px); padding: 18px 18px 12px; text-align: center; border-radius: 20px; background: rgba(10, 11, 13, .5); border: 1px solid rgba(255, 255, 255, .16); }
.braid-dial svg { width: 100%; overflow: visible; }
.dial-arc { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; stroke-dasharray: 3 5; }
.dial-horizon { stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.dial-sun circle { fill: #ffd66b; filter: drop-shadow(0 0 8px rgba(255, 214, 107, .9)); }
.dial-moon circle { fill: #eef1fb; } .dial-moon .dial-moon-cut { fill: #0b0c10; }
.dial-moon { opacity: 0; }
.dial-clock { display: block; margin-top: 8px; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 1.4rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* ---------- Materials (the material library) ---------- */
.shop-sec .film-expand { margin-bottom: 0; }
.materials { padding-top: clamp(80px, 11vw, 160px); padding-bottom: clamp(70px, 9vw, 130px); }
.chip { height: 42px; padding: 0 18px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--line); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: background-color .4s, color .4s, border-color .4s, transform .4s var(--ease); }
.chip sup { font-size: .62rem; opacity: .6; margin-left: 2px; }
.chip:hover { transform: translateY(-2px); }
.chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* one tile per material: 4 columns (2 on phones), so the 8 tiles always fill even rows */
.mat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mat { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--bg-2); }
.mat-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mat figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mat figcaption span { background: rgba(10, 11, 13, .72); padding: 5px 9px; border-radius: 999px; }
.mat figcaption em { padding-left: 9px; font-size: .62rem; font-style: normal; opacity: 0; transform: translateY(6px); transition: .4s var(--ease); text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.7); }
.mat figcaption i { font-style: normal; white-space: nowrap; }
@media (hover: hover) { .mat:hover .mat-img { transform: scale(1.08); } .mat:hover figcaption em { opacity: 1; transform: none; } }
@media (hover: none) { .mat figcaption em { opacity: 1; transform: none; } }
.mat .clickme { right: 12px; top: 12px; width: 56px; height: 56px; }

/* ---------- category sections ---------- */
.cat { padding: clamp(80px, 11vw, 160px) 0 clamp(60px, 8vw, 120px); }
.cat-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px 24px; margin-bottom: clamp(30px, 4vw, 60px); }
.cat-num { grid-row: 1; font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--accent-ink); align-self: start; padding-top: .6em; }
.cat-title { position: relative; grid-column: 2; font-size: clamp(2.7rem, 10.5vw, 11rem); color: transparent; -webkit-text-stroke: 1.5px var(--ink); transition: -webkit-text-stroke-color var(--theme-dur) ease; }
/* solid fill (built by JS): the window and the copy inside it move in opposite directions, so the copy holds still
   while the window uncovers it from the left — transforms only */
.cat-fill { position: absolute; inset: 0; overflow: hidden; transform: translateX(-101%); transition: transform 1.3s cubic-bezier(.45, 0, .55, 1); }
.cat-fill > span { display: block; color: var(--ink); -webkit-text-stroke: 0; transform: translateX(101%); transition: transform 1.3s cubic-bezier(.45, 0, .55, 1), color var(--theme-dur) ease; }
.cat-fill > span::before { content: attr(data-text); }
.cat-title.is-filled .cat-fill, .cat-title.is-filled .cat-fill > span { transform: none; }
.cat-sub { grid-column: 2; color: var(--muted); font-size: 1rem; }
.cat-count { grid-column: 3; grid-row: 1 / span 2; align-self: end; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cat-count b { display: block; font-family: var(--font-display); font-stretch: 125%; font-size: clamp(2rem, 4vw, 3.4rem); color: var(--ink); line-height: 1; letter-spacing: -.02em; }

.film-expand { padding-inline: var(--gutter); margin-bottom: clamp(40px, 6vw, 90px); }
.film-expand-inner { position: relative; height: 88vh; height: 88svh; max-height: 960px; overflow: hidden; border-radius: var(--radius); background: #000; color: #fff; transform-origin: 50% 50%; }
.film-expand-inner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-expand-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 35%); pointer-events: none; }
.film-expand-ui { position: absolute; z-index: 1; left: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.film-expand-name { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; text-transform: uppercase; font-size: clamp(.95rem, 1.6vw, 1.3rem); }

/* cards */
.card { position: relative; cursor: pointer; outline-offset: 6px; }
.card-media { position: relative; overflow: hidden; border-radius: 12px; background: var(--bg-2); transition: background-color var(--theme-dur) ease; }
.card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s ease; }
.card-media video { position: absolute; inset: 0; opacity: 0; }
.card-media video.is-playing { opacity: 1; }
.card-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(10, 11, 13, .72); color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.card-badge svg { width: 11px; height: 11px; color: var(--lime); }
.card-meta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 14px 2px 0; }
.card-title { overflow-wrap: anywhere; }
.card-num { font-size: .66rem; font-weight: 700; color: var(--accent-ink); letter-spacing: .1em; }
.card-title { font-family: var(--font-display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; font-size: clamp(1rem, 1.35vw, 1.25rem); letter-spacing: -.01em; line-height: 1.1; }
.card-city { grid-column: 3; font-size: .74rem; color: var(--muted); white-space: nowrap; }
.card-mat, .card-count { grid-column: 2 / span 2; font-size: .74rem; color: var(--muted); }
.card-mat { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s; }
.card-count { font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
@media (hover: hover) {
  .card:hover .card-media img { transform: scale(1.06); }
  .card:hover .card-mat { max-height: 40px; opacity: 1; }
}

/* high-rise + mid-rise: parallax columns */
.mcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: start; }
.mcol { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 44px); }
.mcol:nth-child(2) { margin-top: 90px; } .mcol:nth-child(4) { margin-top: 160px; }
.card--grid .card-media { max-height: 560px; }

/* commercial accordion */
.acc-commercial { height: min(72vh, 700px); }
.acc-commercial .flexacc-h h3 { font-size: clamp(1.6rem, 3vw, 3rem); }

/* townhouse */
.th { display: grid; grid-template-columns: 1.65fr 1fr; gap: clamp(16px, 2vw, 32px); align-items: stretch; }
.th-stage { position: relative; min-height: min(78vh, 760px); overflow: hidden; border-radius: var(--radius); background: var(--bg-2); cursor: pointer; }
.th-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.th-slide.is-on { opacity: 1; animation: kenburns 9s linear forwards; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.th-counter { position: absolute; right: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(10, 11, 13, .7); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.th-tabs { display: flex; flex-direction: column; justify-content: center; }
.th-tab { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; text-align: left; padding: clamp(18px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); transition: border-color var(--theme-dur) ease; }
.th-tab:first-child { border-top: 1px solid var(--line); }
.th-tab-num { grid-row: span 2; font-size: .72rem; font-weight: 700; color: var(--accent-ink); padding-top: .5em; }
.th-tab-name { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 3.3vw, 3.1rem); line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.2px var(--ink); transition: color .6s ease, -webkit-text-stroke-color var(--theme-dur) ease; }
.th-tab.is-active .th-tab-name, .th-tab:hover .th-tab-name { color: var(--ink); }
.th-tab-meta { font-size: .76rem; color: var(--muted); margin-top: 8px; }
.th-tab-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.th-tab-bar i { display: block; height: 100%; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); }
.th-tab.is-active .th-tab-bar i { animation: thbar var(--th-dur, 4.5s) linear forwards; }
.th.is-paused .th-tab.is-active .th-tab-bar i { animation-play-state: paused; }
@keyframes thbar { to { transform: scaleX(1); } }

/* films */
.films-sec { padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 10vw, 150px); }
.films { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.film { position: relative; display: block; width: 100%; text-align: left; border-radius: 14px; overflow: hidden; background: #000; color: #fff; aspect-ratio: 16 / 10; }
.film:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* the last film widens to fill the rest of its row, so the grid never ends on an empty cell */
@media (min-width: 1101px) { .film:last-child:nth-child(3n+2):not(:first-child) { grid-column: span 2; aspect-ratio: auto; } }
@media (min-width: 821px) and (max-width: 1100px) { .film:last-child:nth-child(2n):not(:first-child) { grid-column: span 2; aspect-ratio: 16 / 5; } }
.film-media, .film-media img, .film-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-media img, .film-media video { transition: transform 1.2s var(--ease), opacity .6s ease; }
.film-media video { opacity: 0; }
.film-media video.is-playing { opacity: 1; }
.film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.66), transparent 50%); }
.film-play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 11, 13, .4); border: 1px solid rgba(255, 255, 255, .5); transition: transform .6s var(--ease), background-color .4s; }
.film-play svg { width: 20px; height: 20px; margin-left: 3px; }
.film-meta { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
.film-num { font-size: .64rem; font-weight: 700; color: var(--lime); letter-spacing: .1em; }
.film-meta strong { font-family: var(--font-display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; font-size: clamp(.95rem, 1.4vw, 1.2rem); }
.film:first-child .film-meta strong { font-size: clamp(1.4rem, 2.8vw, 2.6rem); }
.film-meta em { margin-left: auto; font-style: normal; font-size: .72rem; opacity: .8; }
@media (hover: hover) { .film:hover .film-media img, .film:hover .film-media video { transform: scale(1.05); } .film:hover .film-play { transform: scale(1.15); background: var(--lime); color: #101113; border-color: var(--lime); } }

/* project map (Leaflet) */
.map-sec { padding: clamp(80px, 10vw, 150px) 0; }
.map-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.map-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.map-regions { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--line); }
.map-regions button { height: 34px; padding: 0 14px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: background-color .3s, color .3s; }
.map-regions button:hover, .map-regions button.is-active { background: var(--ink); color: var(--bg); }
.map-wrap { position: relative; }
.map-slot { position: relative; isolation: isolate; height: min(74vh, 720px); min-height: 420px; border-radius: 22px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); transition: background-color var(--theme-dur) ease, border-color var(--theme-dur) ease; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.map-slot .leaflet-container, .map-slot.leaflet-container { font-family: var(--font-body); background: var(--bg-2); }
/* monochrome street map that matches the site; inverted for night */
.map-slot .leaflet-tile-pane { filter: grayscale(1) contrast(1.06) brightness(1.04); }
[data-time="night"] .map-slot .leaflet-tile-pane { filter: invert(1) grayscale(1) brightness(.8) contrast(1.12); }
.map-slot .leaflet-control-zoom { border: 0; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); border-radius: 12px; overflow: hidden; margin: 14px 14px 0 0; }
.map-slot .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; font-size: 18px; background: var(--surface); color: var(--ink); border-color: var(--line); }
.map-slot .leaflet-control-zoom a:hover { background: var(--lime); color: #101113; }
.map-slot .leaflet-control-attribution { font-size: 10px; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--muted); }
.map-slot .leaflet-control-attribution a { color: var(--ink-2); }

.pin-wrap { background: none; border: 0; }
.pin { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); border: 3px solid #101113; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); transition: transform .3s var(--ease); }
.pin--wip { background: #fff; border: 3px solid var(--lime); box-shadow: 0 0 0 2px #101113, 0 3px 10px rgba(0, 0, 0, .35); }
.leaflet-marker-icon:hover .pin, .leaflet-marker-icon:focus .pin { transform: scale(1.35); }
.pin.is-selected { transform: scale(1.3); }
.pin.is-selected::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--lime); animation: pinpulse 1.6s ease-out infinite; }
@keyframes pinpulse { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.pin-cluster { background: none; border: 0; }
.pin-cluster span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #101113; color: var(--lime); border: 2px solid var(--lime); box-shadow: 0 0 0 6px rgba(141, 198, 63, .22), 0 6px 16px rgba(0, 0, 0, .35); font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: .85rem; transition: transform .3s var(--ease); }
.pin-cluster:hover span { transform: scale(1.1); }

.l2-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 16px; overflow: hidden; background: var(--surface); color: var(--ink); box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .55); animation: popin .35s var(--ease); }
@keyframes popin { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.l2-popup .leaflet-popup-content { margin: 0; line-height: 1.4; font-size: 14px; }
.l2-popup .leaflet-popup-tip { background: var(--surface); box-shadow: none; }
.l2-popup a.leaflet-popup-close-button { top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(10, 11, 13, .6); color: #fff; font: 20px/28px var(--font-body); text-align: center; z-index: 2; }
.l2-popup a.leaflet-popup-close-button:hover { background: var(--lime); color: #101113; }
.mp-img { aspect-ratio: 16 / 10; background: var(--bg-2); overflow: hidden; }
.mp-img img { width: 100%; height: 100%; object-fit: cover; }
.mp-body { padding: 14px 16px 16px; }
.mp-tag { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.mp-tag--wip { color: #101113; background: var(--lime); padding: 3px 8px; border-radius: 999px; }
.mp-body h3 { margin: 6px 0 4px; font-family: var(--font-display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; letter-spacing: -.01em; }
.mp-addr { font-size: .78rem; color: var(--muted); margin: 0 0 10px; }
.mp-body dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 14px; font-size: .78rem; }
.mp-body dt { font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.mp-body dd { margin: 0; color: var(--ink-2); }
.mp-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 999px; background: var(--lime); color: #101113; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: background-color .3s, color .3s; }
.mp-btn:hover { background: #101113; color: var(--lime); }

.map-legend { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; gap: 14px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); pointer-events: none; }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend i { width: 11px; height: 11px; border-radius: 50%; }
.lg-done { background: var(--lime); border: 2px solid #101113; }
.lg-wip { background: #fff; border: 2px solid var(--lime); box-shadow: 0 0 0 1.5px #101113; }
.map-activate { display: none; }
/* touch: one finger scrolls the page until the visitor chooses to move the map */
.map-wrap.is-touch .map-activate { display: flex; position: absolute; z-index: 3; top: 12px; left: 12px; height: 38px; align-items: center; padding: 0 14px; border-radius: 999px; background: #101113; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.map-wrap.is-touch .map-activate.is-on { background: var(--lime); color: #101113; }
.map-list { margin-top: 18px; border-top: 1px solid var(--line); }
.map-list summary { cursor: pointer; padding: 16px 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.map-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; padding-bottom: 10px; }
.map-list-city h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; font-size: 1rem; margin-bottom: 8px; }
.map-list-city sup { color: var(--accent-ink); }
.map-list-city ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.map-list-city li { font-size: .8rem; line-height: 1.4; color: var(--ink-2); }
.map-list-city li span, .map-list-city li em { display: block; color: var(--muted); font-style: normal; font-size: .74rem; }

/* about */
.about { padding: clamp(70px, 9vw, 130px) 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: clamp(50px, 7vw, 100px); }
.stat { border-top: 1px solid var(--line); padding-top: 20px; transition: border-color var(--theme-dur) ease; }
.stat-num { display: block; font-size: clamp(2.6rem, 6vw, 6rem); color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-label { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.partners { overflow: hidden; padding: 12px 0; margin-bottom: clamp(40px, 6vw, 80px); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.partners-track { display: flex; width: max-content; animation: slide 45s linear infinite; }
.is-off.partners .partners-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.partners span { padding: 0 34px; font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.7rem); text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color .3s; }
.partners span:hover { color: var(--ink); }
.certs { display: flex; justify-content: center; align-items: center; gap: clamp(30px, 6vw, 80px); }
.certs img { height: clamp(70px, 9vw, 110px); width: auto; filter: grayscale(1); opacity: .75; transition: filter .5s, opacity .5s, transform .5s var(--ease); }
[data-time="night"] .certs img { filter: grayscale(1) invert(1) brightness(1.2); }
.certs img:hover { filter: none; opacity: 1; transform: scale(1.05); }

/* contact */
.contact { padding: clamp(80px, 10vw, 150px) 0 clamp(80px, 10vw, 140px); }
.contact-title { font-size: clamp(3.4rem, 15vw, 15rem); margin-bottom: clamp(40px, 6vw, 80px); }
.contact-title em { font-style: normal; color: var(--lime); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.people { display: grid; gap: 30px; }
.person { display: flex; flex-direction: column; gap: 6px; }
.person-name { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1; margin-bottom: 6px; }
.person a { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 500; }
.person a svg, .address svg { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
.person a:hover { color: var(--accent-ink); }
.address { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: .9rem; }
.quote { display: grid; gap: 18px; padding: clamp(22px, 3vw, 40px); border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: background-color var(--theme-dur) ease, border-color var(--theme-dur) ease; }
.quote legend { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.quote-types { display: flex; flex-wrap: wrap; gap: 8px; }
.quote-types label { position: relative; }
.quote-types input { position: absolute; opacity: 0; inset: 0; }
.quote-types span { display: inline-flex; height: 40px; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: .35s; }
.quote-types input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.quote-types input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--line); padding: 10px 0; border-radius: 0; resize: vertical; transition: border-color .3s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lime); }
.field input.is-invalid { border-color: #e2554a; }
.quote .btn { justify-self: start; }

/* footer (always night) */
.footer { position: relative; z-index: 1; background: var(--char-950); color: #d9d9d4; padding: 70px 0 calc(28px + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-logo { width: 72px; height: auto; border-radius: 5px; }
.footer-area { font-size: .84rem; line-height: 1.8; color: #9a9da2; max-width: 80ch; }
.footer-area strong { color: #fff; font-weight: 600; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; font-size: .74rem; color: #7d8086; flex-wrap: wrap; }

/* mobile quick-contact bar */

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 8000; display: grid; grid-template-rows: auto 1fr auto; background: rgba(8, 9, 11, .97); color: #fff; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.lb-top { display: flex; align-items: center; gap: 20px; padding: 18px var(--gutter); }
.lb-meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.lb-title { font-family: var(--font-display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; }
.lb-sub { font-size: .76rem; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-count { font-size: .76rem; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; opacity: .8; }
.lb-close { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); transition: background-color .3s, transform .5s var(--ease); }
.lb-close:hover { background: var(--lime); color: #111; transform: rotate(90deg); }
.lb-close svg, .lb-nav svg { width: 20px; height: 20px; }
.lb-stage { position: relative; overflow: hidden; margin: 0 clamp(8px, 6vw, 96px); touch-action: pan-y; }
.lb-stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lb-stage video { background: transparent; }
.lb-nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); background: rgba(10,11,13,.4); transition: background-color .3s; }
.lb-nav:hover { background: var(--lime); color: #111; }
.lb-prev { left: clamp(8px, 1.5vw, 26px); } .lb-next { right: clamp(8px, 1.5vw, 26px); }
.lb.is-single .lb-nav, .lb.is-single .lb-thumbs { display: none; }
.lb-thumbs { display: flex; gap: 8px; padding: 16px var(--gutter) calc(18px + env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; }
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumbs button { position: relative; flex: none; width: 78px; height: 56px; border-radius: 8px; overflow: hidden; opacity: .45; transition: opacity .3s, outline-color .3s; outline: 2px solid transparent; outline-offset: 2px; }
.lb-thumbs button.is-active { opacity: 1; outline-color: var(--lime); }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumbs .is-video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .8rem; background: rgba(0,0,0,.35); }

/* ---------- scroll reveals ----------
   JS adds .rv (start state) and later .rv-in; the entrance is a CSS transition on transform/opacity, so it runs on
   the compositor instead of costing main-thread work every frame. JS removes both classes once the entrance is
   over, handing the element back its own transitions (theme colours, hovers). */
.rv { opacity: 0; transform: translateY(44px); }
.rv.rv-in { opacity: 1; transform: none; transition: opacity .9s ease var(--rv-d, 0s), transform 1.1s var(--ease) var(--rv-d, 0s); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .films { grid-template-columns: repeat(2, 1fr); }
  .mcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcol { display: contents; }
  .card--grid .card-meta { grid-template-columns: auto minmax(0, 1fr); }
  .card--grid .card-city, .card--grid .card-mat, .card--grid .card-count { grid-column: 2; }
  .mcols .card { margin-top: 0 !important; }
  .card--grid .card-media { aspect-ratio: 4 / 5 !important; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  :root { --nav-h: 64px; }
  .nav-cta { display: none; }
  .hero-content { bottom: 118px; }
  .hero-line { font-stretch: 112%; }
  .hero-hud { left: var(--gutter); right: var(--gutter); bottom: 24px; justify-content: space-between; }
  .hud-now { text-align: left; }
  .hero-hud .tod { flex: 1 1 auto; max-width: 320px; }
  .hero-hud .tod-range { flex: 1; width: auto; min-width: 0; }
  .scroll-cue { display: none; }

  .flexacc, .acc-commercial { flex-direction: column; height: auto; min-height: 0; gap: 8px; }
  .flexacc-item { flex: none; height: 30vh; min-height: 190px; }
  .flexacc-item.is-active { flex-grow: 0; }
  .flexacc-v { display: none; }
  .flexacc-h { opacity: 1; transform: none; left: 18px; bottom: 16px; }
  .flexacc-h h2, .flexacc-h h3 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .flexacc-item::before { display: none; }
  .flexacc-media { left: 0; width: 100%; transform: none; }
  .flexacc-media img, .flexacc-media video { transform: none !important; }
  .flexacc-item .clickme { width: 56px; height: 56px; }

  .braid-dial { top: calc(var(--nav-h) + 14px); width: 130px; padding: 12px 12px 8px; }
  .dial-clock { font-size: 1.1rem; }
  /* the slider adds a row: sit the block low so it clears the dial on short phones */
  .braid-ui { bottom: calc(40px + env(safe-area-inset-bottom)); }
  .braid-controls { gap: 10px; margin-top: 22px; }
  .braid-controls .tod { flex: 1 1 100%; max-width: 420px; }
  .braid-controls .tod-range { flex: 1; width: auto; min-width: 0; }

  .cat-head { grid-template-columns: minmax(0, 1fr); }
  .cat-num { display: none; }
  .cat-title, .cat-sub, .cat-count { grid-column: 1; grid-row: auto; }
  .cat-title { font-size: 11vw; font-stretch: 112%; }
  .cat-count b { display: inline; font-size: 1.4rem; margin-right: 6px; }
  .braid-title { font-size: 12.5vw; font-stretch: 112%; }
  .sec-title { font-size: 10vw; font-stretch: 112%; }
  .film-expand-inner { height: 62svh; }

  .th { grid-template-columns: 1fr; }
  .th-stage { min-height: 62svh; }
  .th-tabs { flex-direction: row; overflow-x: auto; gap: 18px; scrollbar-width: none; }
  .th-tab { flex: none; border-top: 0 !important; padding: 12px 0; }
  .th-tab-name { font-size: 1.5rem; }

  .films { grid-template-columns: 1fr; }
  .film:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 10; }
  .map-slot { height: 68svh; min-height: 380px; border-radius: 18px; }
  /* nowrap matters: a wrapping column flexbox sizes its line to the widest child's max-content, which let the
     chip row grow to ~650px and widened the whole page on phones */
  .map-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .map-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .map-filters::-webkit-scrollbar { display: none; }
  .map-filters .chip { flex: none; }
  .map-regions { align-self: stretch; }
  .map-regions button { flex: 1 1 auto; padding: 0 10px; }
  .map-legend { bottom: 10px; left: 10px; gap: 10px; padding: 6px 10px; font-size: .6rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .quote-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 560px) {
  .hud-now { display: none; } /* phones: the hero's time slider gets the room */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .partners-track { animation: none; }
}