:root {
    --white: #ffffff; --black: #000000;
    --muted: rgba(0,0,0,0.45);
    --soft: rgba(0,0,0,0.7);
    --hair: rgba(0,0,0,0.1);
    --accent: #1A4FE0;
    --pad: clamp(1.5rem, 5vw, 3.5rem);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --fh: "Syne", sans-serif;
    --fb: "Inter", "Helvetica Neue", Arial, sans-serif;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  html, body { overflow-x: clip; max-width: 100%; }
  body {
    background: var(--white); color: var(--black);
    --edge-fade: #ffffff;
    --globe-ink: #0a0a0a;
    font-family: var(--fb); line-height: 1.45;
  }
  /* Only lock scroll during the intro when JS animation is actually running.
     Without JS (or before GSAP loads) the page is fully scrollable & visible. */
  html.js-anim body:not(.ready) { overflow-y: hidden; }
  a { color: inherit; text-decoration: none; }
  img { display: block; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* ---- inverted theme ---- */
  /* --white drives the page background; in dark mode use a sampled near-black (#060606)
     that blends seamlessly with the dark image sections (statement #020201, about #070707),
     so there's no visible seam where page meets image. */
  body.inverted { --white: #060606; --black: #ffffff; --muted: rgba(255,255,255,0.5); --soft: rgba(255,255,255,0.75); --hair: rgba(255,255,255,0.16); --accent: #5C8DFF; --edge-fade: #060606; --globe-ink: #f4f4f4; }

  /* per-section theming — a section can opt into the opposite theme */
  .theme-dark {
    --white: #060606; --black: #ffffff;
    --muted: rgba(255,255,255,0.5); --soft: rgba(255,255,255,0.75); --hair: rgba(255,255,255,0.16); --accent: #5C8DFF;
    background: var(--white); color: var(--black);
    transition: background-color .6s var(--ease), color .6s var(--ease);
  }
  /* In dark mode the whole page is already dark, so theme-dark sections stay dark
     (not flipped to white) — keeping one seamless dark field. */
  body.inverted .theme-dark {
    --white: #060606; --black: #ffffff;
    --muted: rgba(255,255,255,0.5); --soft: rgba(255,255,255,0.75); --hair: rgba(255,255,255,0.16); --accent: #5C8DFF;
  }

  /* ===== distinct section worlds ===== */
  .flashy {
    background: transparent;
    color: var(--black);
    position: relative; overflow: hidden; isolation: isolate;
  }
  .flashy-fx { display: none; }
  .flashy > *:not(.flashy-fx) { position: relative; z-index: 1; }

  .calm {
    background: transparent;
    color: var(--black);
  }

  .warm {
    background: transparent;
    color: var(--black);
  }

  .luxe {
    background: transparent;
    color: var(--black);
  }

  .soft {
    background: transparent;
    color: var(--black);
  }

  /* Monochrome section rhythm: a barely-there tonal panel built from theme tokens,
     so it auto-adapts to light/dark mode. ~4% of the foreground over the background. */
  .panel-tint {
    background: var(--hair); /* fallback for browsers without color-mix */
    background: color-mix(in srgb, var(--black) 4%, var(--white));
  }
  /* In dark mode, the Approach panel sits between the two dark image sections;
     drop its tint to near-page-black so About → Approach → My belief read as one
     continuous dark passage with no visible bands. Light mode keeps the rhythm. */
  body.inverted #approach.panel-tint { background: var(--white); }
  /* Approach section: pure white background (light mode) */
  body:not(.inverted) #approach.panel-tint { background: #ffffff; }

  @media (prefers-reduced-motion: reduce) { .flashy.play { animation: none; } }
  body, .left-col, .statement, .footer .at,
  .scroll-progress, .theme-toggle, .theme-toggle .tt-icon {
    transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
  }

  /* ---- invert toggle ---- */
  .theme-toggle {
    position: fixed; right: var(--pad); bottom: clamp(1.25rem, 4vh, 2.5rem);
    width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid var(--black); background: var(--white);
    z-index: 57; display: grid; place-items: center;
    transition: transform .6s var(--ease), background-color .6s var(--ease), border-color .6s var(--ease);
  }
  .theme-toggle:hover { transform: rotate(180deg); }
  .theme-toggle .tt-icon {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--black);
    background: linear-gradient(90deg, var(--black) 0 50%, transparent 50% 100%);
  }

  /* ---- Lenis smooth scroll ---- */
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }

  /* ---- film grain ---- */
  .noise {
    position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    transform: translateZ(0); backface-visibility: hidden;
  }



  /* ---- scroll progress ---- */
  .scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%;
    background: #fff; mix-blend-mode: difference;
    transform: scaleX(0); transform-origin: 0 50%; z-index: 56;
  }

  /* ============================ STICKY HEADER ============================ */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 45;
    display: flex; align-items: center; justify-content: space-between;
    padding: clamp(0.85rem, 1.5vw, 1.25rem) var(--pad);
    background: rgba(255,255,255,0.7);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(127,127,127,0.14);
    transform: translateY(-101%); opacity: 0;
    transition: transform .5s var(--ease), opacity .5s var(--ease), background-color .6s var(--ease), border-color .6s var(--ease);
  }
  body.inverted .site-header {
    background: rgba(10,10,10,0.55);
    border-bottom-color: rgba(255,255,255,0.12);
  }
  /* graceful fallback: if the browser can't blur, fall back to a more opaque bar
     so text stays legible over busy backgrounds */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header { background: rgba(255,255,255,0.92); }
    body.inverted .site-header { background: rgba(10,10,10,0.9); }
  }
  .site-header.visible { transform: translateY(0); opacity: 1; }
  .sh-logo { font-family: var(--fh); font-weight: 800; font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: -0.045em; line-height: 1; }
  .sh-logo sup { font-size: 0.4em; font-weight: 700; vertical-align: super; margin-left: 0.12em; }
  .sh-nav { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
  .sh-nav a { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; position: relative; padding-bottom: 2px; }
  .sh-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--black); transition: width .4s var(--ease); }
  .sh-nav a:hover::after { width: 100%; }

  /* ============================ SPLIT (hero) ============================ */
  .split { display: block; }

  .left-col {
    position: relative; min-height: 100svh; z-index: 10;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(1.75rem,3vw,2.6rem) var(--pad) clamp(2.5rem,5vh,3.5rem);
    background: transparent;
  }

  /* --- Continuous wave backdrop: one image spanning hero + about, fixed while
     content scrolls over it (true parallax) so About reads as a continuation --- */
  .wave-zone { position: relative; }
  .wave-backdrop {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  }
  .wave-layer {
    position: absolute; left: 0; right: 0; top: -6%; height: 112%;
    background-image: url("hero-wave.webp");
    background-size: cover; background-position: center top; background-repeat: no-repeat;
    transform: translate3d(0,0,0) scale(1.04);
    will-change: transform;
  }
  body.inverted .wave-layer { background-image: url("hero-wave-dark.webp"); }

  /* Serve right-sized hero images on phones — the full 1800px asset is huge
     and needlessly heavy on a ~400px-wide screen. Saves ~100KB on mobile LCP. */
  @media (max-width: 700px) {
    .wave-layer { background-image: url("hero-wave-mobile.webp"); }
    body.inverted .wave-layer { background-image: url("hero-wave-dark-mobile.webp"); }
  }

  /* ONE continuous veil spanning the whole hero+about zone — no per-section
     gradients, so there is no tonal step or seam between the two. Protects the
     hero's left text column and the about's centered text in a single pass. */
  .wave-veil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, var(--edge-fade) 0%, rgba(127,127,127,0) 58%),
      radial-gradient(46% 22% at 50% 64%, var(--edge-fade) 0%, rgba(127,127,127,0) 70%),
      /* fade the wave out across the lower About region so it's gone by the stats */
      linear-gradient(180deg, rgba(127,127,127,0) 58%, var(--edge-fade) 80%);
  }

  @media (prefers-reduced-motion: reduce) {
    .wave-layer { transform: scale(1.04); }
  }

  .lc-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; z-index: 2; }
  .logo {
    font-family: var(--fh); font-weight: 800; font-size: clamp(1.3rem, 1.7vw, 1.7rem);
    letter-spacing: -0.045em; line-height: 1; text-transform: none; white-space: nowrap;
    transform-origin: center center; z-index: 60; will-change: transform;
    text-shadow: 0 1px 12px rgba(255,255,255,0.55);
  }
  body.inverted .logo { text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
  .logo sup { font-size: 0.4em; font-weight: 700; vertical-align: super; margin-left: 0.12em; }

  /* --- Hero content: spacious, premium, calm --- */
  .hero-content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    margin: auto 0; /* vertically centers the headline in the available space */
    max-width: min(900px, 100%);
    padding: clamp(2rem, 6vh, 5rem) 0;
  }
  .hero-eyebrow {
    margin: 0 0 clamp(1.25rem, 3vh, 2.25rem);
    font-family: var(--fb); font-weight: 600;
    font-size: clamp(0.72rem, 0.9vw, 0.86rem);
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted);
  }
  .hero-eyebrow .line { display: block; overflow: hidden; }
  .hero-eyebrow .line-inner { display: block; will-change: transform; }

  .hero-title {
    font-family: var(--fh); font-weight: 800;
    font-size: clamp(2.9rem, 6vw, 7rem);
    line-height: 0.96; letter-spacing: -0.03em; text-transform: uppercase;
    position: relative; z-index: 2; margin: 0;
  }
  /* The reveal mask must clip ONLY vertically: Syne is ultra-wide and the
     longest lines intentionally bleed past the 900px content box on large
     screens. clip-path with negative horizontal insets gives an unlimited-
     width mask (no letter shearing) while still hiding the slide-up reveal.
     The small negative vertical insets give descenders headroom too.
     overflow:hidden stays as a fallback for engines without clip-path. */
  .hero-title .line { display: block; overflow: hidden; }
  @supports (clip-path: inset(0 -1px)) {
    .hero-title .line,
    .hero-eyebrow .line { overflow: visible; clip-path: inset(-0.12em -100vw); }
  }
  .hero-title .line-inner { display: block; will-change: transform, opacity; }
  .hero-title .dim { color: var(--accent); }

  /* Hero + eyebrow reveal runs as a pure CSS animation the moment the page
     paints — no dependency on GSAP/CDN, so the LCP headline appears fast.
     The slide happens inside the overflow:hidden .line mask = zero layout shift.
     Widgets/nav fade via opacity only (also no shift). */
  html.js-anim .hero-title .line-inner,
  html.js-anim .hero-eyebrow .line-inner {
    transform: translateY(120%);
    animation: heroLineIn 0.9s var(--ease, cubic-bezier(0.22,1,0.36,1)) forwards;
  }
  html.js-anim .hero-title .line:nth-child(1) .line-inner { animation-delay: 0.05s; }
  html.js-anim .hero-title .line:nth-child(2) .line-inner { animation-delay: 0.12s; }
  html.js-anim .hero-title .line:nth-child(3) .line-inner { animation-delay: 0.19s; }
  html.js-anim .hero-title .line:nth-child(4) .line-inner { animation-delay: 0.26s; }
  html.js-anim .lc-widgets {
    opacity: 0; animation: heroFadeIn 0.9s ease forwards; animation-delay: 0.2s;
  }
  @keyframes heroLineIn { to { transform: translateY(0); } }
  @keyframes heroFadeIn { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    html.js-anim .hero-title .line-inner,
    html.js-anim .hero-eyebrow .line-inner { transform: none; animation: none; }
    html.js-anim .lc-widgets { opacity: 1; animation: none; }
  }


  .lc-widgets { display: flex; flex-direction: column; gap: 1.4rem; position: relative; z-index: 2; }
  .hud {
    display: grid; grid-template-columns: 1.7fr 1fr; align-items: end;
    padding: clamp(0.9rem, 2vh, 1.2rem) clamp(1.1rem, 2.4vw, 1.6rem);
    border-radius: 16px; border: 1px solid var(--hair);
    background: color-mix(in srgb, var(--white) 55%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    max-width: max-content;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hud { background: color-mix(in srgb, var(--white) 90%, transparent); }
  }
  .hud-cell { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 clamp(1rem,2vw,1.6rem) 0 clamp(1rem,2vw,1.6rem); border-left: 1px solid var(--hair); min-width: 0; }
  .hud-cell:first-child { border-left: none; padding-left: 0; }
  .hud-cell:last-child { padding-right: 0; }
  .hud-k { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-v { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em; color: var(--black); display: inline-flex; align-items: center; gap: 0.5rem; font-variant-numeric: tabular-nums; }
  .hud-v .dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--black); flex: none; }
  .hud-v .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--black); animation: ping 2s var(--ease) infinite; }
  @keyframes ping { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(2.8);opacity:0} }
  .clock { font-variant-numeric: tabular-nums; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* kinetic capability roller */
  .roll { display: inline-block; height: 1.3em; line-height: 1.3em; overflow: hidden; vertical-align: bottom;
          font-family: var(--fh); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 3rem); letter-spacing: -0.03em; }
  .roll-list { display: flex; flex-direction: column; animation: roll 9s cubic-bezier(0.76,0,0.24,1) infinite; will-change: transform; }
  .roll-list b { height: 1.3em; line-height: 1.3em; font-weight: 800; white-space: nowrap; }
  @keyframes roll {
    0%,16% { transform: translateY(0); }
    20%,36% { transform: translateY(-1.3em); }
    40%,56% { transform: translateY(-2.6em); }
    60%,76% { transform: translateY(-3.9em); }
    80%,100% { transform: translateY(-5.2em); }
  }
  @media (prefers-reduced-motion: reduce) { .roll-list { animation: none; } }

  .connect {
    align-self: flex-start; position: relative; padding-bottom: 4px;
    font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .connect::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--black); transform-origin: right; transition: transform 0.45s var(--ease); }
  .connect:hover::after { transform: scaleX(0); transform-origin: left; }

  /* ---- hero nav ---- */
  /* Frosted glass pill: guarantees nav legibility over any part of the wave
     (white, blue or black areas) in both themes — no smudgy text halos. */
  .nav {
    display: flex; gap: clamp(1.1rem, 2vw, 1.9rem); align-items: center; list-style: none;
    padding: 0.6rem clamp(1.1rem, 1.8vw, 1.5rem);
    border-radius: 100px; border: 1px solid var(--hair);
    background: color-mix(in srgb, var(--white) 55%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav { background: color-mix(in srgb, var(--white) 90%, transparent); }
  }
  html.js-anim .nav { opacity: 0; }
  .nav a { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; position: relative; padding-bottom: 3px; }
  .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--black); transition: width 0.4s var(--ease); }
  .nav a:hover::after { width: 100%; }

  .works { padding: clamp(7rem,16vh,13rem) var(--pad) clamp(5rem,10vh,9rem); }
  .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(3rem,7vw,6rem) clamp(2rem,5vw,5rem); }
  .work-item { display: flex; flex-direction: column; gap: 1.2rem; }
  .work-figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
  .work-figure img {
    position: absolute; top: -9%; left: 0; width: 100%; height: 118%; object-fit: cover;
    filter: grayscale(1) contrast(1.04) brightness(0.96);
    transform-origin: center; will-change: transform, clip-path; transition: filter 0.6s var(--ease);
  }
  .work-item:hover .work-figure img { filter: grayscale(0) contrast(1.02) brightness(1); }
  .work-figure::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--white); opacity: 0; transition: opacity 0.5s var(--ease);
  }
  .work-item:hover .work-figure::after { opacity: 0.12; }
  .work-info { display: grid; grid-template-columns: 1fr auto; align-items: baseline; border-top: 2px solid var(--black); padding-top: 1.2rem; }
  .work-info h2 { font-family: var(--fh); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 3.6rem); line-height: 0.9; letter-spacing: -0.035em; text-transform: uppercase; }
  .work-info p { text-align: right; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
  .work-info p .n { color: var(--black); }

  /* ============================ WORK — pinned carousel of vertical tablets ============================ */
  .wc-section { background: #060606; position: relative; z-index: 20; }
  /* featured case teaser */
  .wc-feature { padding: clamp(5rem,12vh,9rem) var(--pad); display: flex; justify-content: center; }
  .case-teaser {
    display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem,5vw,4rem);
    align-items: stretch; max-width: 1100px; width: 100%;
    color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: 22px;
    padding: clamp(1.5rem,3vw,2.25rem); background: rgba(255,255,255,0.025);
    transition: border-color .4s var(--ease), transform .4s var(--ease), background-color .4s var(--ease);
  }
  .case-teaser:hover { border-color: rgba(255,255,255,0.28); transform: translateY(-4px); background: rgba(255,255,255,0.05); }
  .ct-media { border-radius: 14px; overflow: hidden; background: #0a1428; aspect-ratio: 4 / 5; align-self: center; }
  .ct-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .ct-body { display: flex; flex-direction: column; justify-content: center; }
  .ct-eyebrow { display: block; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: clamp(1rem,2.5vh,1.5rem); }
  .ct-title { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem,4.4vw,3.4rem); line-height: 0.95; letter-spacing: -0.035em; margin-bottom: clamp(1rem,2.5vh,1.5rem); }
  .ct-desc { font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.55; color: rgba(255,255,255,0.74); max-width: 42ch; margin-bottom: clamp(1.25rem,3vh,1.75rem); }
  .ct-desc strong { color: #fff; font-weight: 600; }
  .ct-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(1.5rem,3.5vh,2rem); }
  .ct-tags span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; padding: 0.4em 0.9em; }
  .ct-link { font-family: var(--fh); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(0.95rem,1.3vw,1.1rem); color: #fff; border-bottom: 2px solid rgba(255,255,255,0.4); padding-bottom: 2px; transition: border-color .3s var(--ease); }
  .case-teaser:hover .ct-link { border-bottom-color: #fff; }
  /* work section header + stacked teasers */
  .wc-head { max-width: 1100px; margin: 0 auto clamp(1.75rem,4.5vh,3rem); padding: clamp(4.5rem,11vh,8rem) var(--pad) 0; }
  .wc-head .wc-kicker { display: block; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
  .wc-head .wc-title { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem,5vw,3.8rem); line-height: 0.95; letter-spacing: -0.035em; color: #fff; margin: clamp(0.75rem,1.8vh,1.1rem) 0 clamp(0.9rem,2vh,1.3rem); }
  .wc-head .wc-intro { font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 60ch; }
  .wc-section .wc-feature { padding-top: clamp(1.5rem,4vh,2.75rem); padding-bottom: clamp(1.5rem,4vh,2.75rem); }
  .wc-section { padding-bottom: clamp(3rem,8vh,6rem); }
  @media (max-width: 820px) {
    .case-teaser { grid-template-columns: 1fr; gap: 1.75rem; }
    .ct-media { aspect-ratio: 16 / 11; }
  }

  /* Work "coming soon" state — light text on the dark section */
  .wc-soon { color: #fff; padding: clamp(7rem, 18vh, 14rem) var(--pad); display: flex; justify-content: center; }
  .wc-soon-inner { max-width: 760px; text-align: center; }
  .wc-soon-eyebrow { display: block; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
  .wc-soon-title { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
  .wc-soon-lead { font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 52ch; margin: 0 auto clamp(1.75rem, 4vh, 2.5rem); }
  .wc-soon-cta { font-family: var(--fh); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1rem, 1.4vw, 1.2rem); }
  .wc-soon-cta a { color: #fff; border-bottom: 2px solid rgba(255,255,255,0.4); padding-bottom: 2px; transition: border-color .3s var(--ease); }
  .wc-soon-cta a:hover { border-bottom-color: #fff; }
  .work-carousel { position: relative; height: 100svh; overflow: hidden; }
  .wc-card { position: absolute; inset: 0; overflow: hidden; background: #060606; display: grid; place-items: center; will-change: transform; backface-visibility: hidden; }

  .wc-stage { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 5vw, 5.5rem); width: 100%; padding: 0 var(--pad); }

  /* the vertical "tablet" */
  .wc-tablet {
    position: relative; flex: none; aspect-ratio: 3 / 4; height: 64vh;
    overflow: hidden; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 40px 90px rgba(0,0,0,0.55); background: #0c0b1a;
  }
  .wc-tablet img { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: cover; display: block; will-change: transform; }

  .wc-caption { display: flex; flex-direction: column; gap: 1.1rem; max-width: 32ch; }
  .wc-year { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  .wc-caption h3 { font-family: var(--fh); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.4rem); letter-spacing: -0.03em; line-height: 0.95; color: #fff; text-transform: uppercase; }
  .wc-caption p { color: rgba(255,255,255,0.7); font-size: clamp(0.9rem,1.1vw,1rem); line-height: 1.7; }
  .wc-link { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 3px; width: fit-content; transition: border-color 0.3s; }
  .wc-link:hover { border-color: #fff; }

  @media (max-width: 760px) {
    .wc-stage { flex-direction: column; gap: 1.8rem; text-align: center; }
    .wc-tablet { height: auto; width: min(62vw, 340px); }
    .wc-caption { max-width: 42ch; align-items: center; }
    .wc-link { align-self: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .work-carousel { height: auto; overflow: visible; }
    .wc-card { position: relative; inset: auto; padding: clamp(3rem,8vh,5rem) 0; }
  }

  /* ============================ STATEMENT ============================ */
  .statement { position: relative; overflow: hidden; background: #060606; color: #fff; padding: clamp(7rem, 20vh, 16rem) var(--pad); }
  .statement-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; opacity: 0.9; }
  /* scrim: darken the left/top where the text lives so it stays legible over the photo */
  .statement::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(105deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 38%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 100%); pointer-events: none; }
  .statement::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(180deg, var(--edge-fade) 0%, transparent clamp(60px,12vh,140px)),
      linear-gradient(0deg, var(--edge-fade) 0%, transparent clamp(60px,12vh,140px));
  }
  .dot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
  .statement-inner { position: relative; z-index: 2; }
  .statement p { font-family: var(--fh); font-weight: 800; font-size: clamp(2.4rem, 7.5vw, 8rem); line-height: 0.92; letter-spacing: -0.04em; max-width: 18ch; text-transform: uppercase; }
  .statement p em { font-style: normal; color: #fff; opacity: 0.4; }
  .statement .tag { display: block; margin-bottom: clamp(2rem,5vh,3.5rem); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; opacity: 0.55; }

  /* ============================ SERVICES ============================ */
  .services { padding: clamp(6rem,12vh,10rem) var(--pad); }
  .section-head { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--black); padding-top: 1.5rem; margin-bottom: clamp(3rem,7vh,5rem); }
  .section-head h2 { font-family: var(--fh); font-weight: 800; font-size: clamp(1.7rem,3.4vw,2.8rem); letter-spacing: -0.03em; text-transform: uppercase; }
  .section-head span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
  .services-lead { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 22ch; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
  .services-top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: clamp(3rem, 7vh, 5rem); }
  .services-copy { min-width: 0; }
  .globe-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
  .globe-mount { width: 100%; max-width: 480px; aspect-ratio: 1 / 1; touch-action: none; }
  .globe-mount canvas { display: block; width: 100% !important; height: 100% !important; }
  .globe-cap { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted); text-align: center; max-width: 32ch; line-height: 1.5; }
  .gc-hint { display: inline-block; margin-left: 0.4em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--black); opacity: 0.7; }
  .services-lead em { font-style: normal; color: var(--accent); }
  .services-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); max-width: 1000px; margin-bottom: clamp(3rem, 7vh, 5rem); }
  .services-intro .sec-body { margin: 0; }

  .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
  .service-card.sc-wide { grid-column: 1 / -1; border-color: var(--accent); }
  .sc-new { position: absolute; top: clamp(1.75rem, 2.8vw, 2.5rem); right: clamp(1.75rem, 2.8vw, 2.5rem); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); background: var(--accent); border-radius: 100px; padding: 5px 12px; }
  .service-card {
    display: flex; flex-direction: column; gap: 0.85rem;
    border: 2px solid var(--black); padding: clamp(1.75rem, 2.8vw, 2.5rem);
    color: var(--black); position: relative;
    transition: transform .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
  }
  .service-card:hover { transform: translateY(-4px); background: var(--black); color: var(--white); }
  .sc-num { font-family: var(--fh); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--accent); }
  .service-card:hover .sc-num { color: var(--white); opacity: 0.6; }
  .service-card h3 { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.03em; line-height: 1; }
  .service-card > p { font-size: 0.98rem; line-height: 1.6; color: var(--soft); }
  .service-card:hover > p { color: var(--white); color: color-mix(in srgb, var(--white) 80%, transparent); }
  .sc-list { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
  .sc-list li { position: relative; padding-left: 1.4rem; font-size: 0.88rem; color: var(--muted); }
  .sc-list li::before { content: "→"; position: absolute; left: 0; color: var(--black); font-weight: 700; }
  .service-card:hover .sc-list li { color: var(--white); color: color-mix(in srgb, var(--white) 70%, transparent); }
  .service-card:hover .sc-list li::before { color: var(--white); }
  .sc-go { margin-top: auto; padding-top: 0.5rem; font-family: var(--fb); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }

  .services-foot { margin-top: clamp(2.5rem, 6vh, 4rem); font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--soft); max-width: 52ch; }
  .services-foot a { color: var(--black); font-weight: 600; border-bottom: 1px solid var(--hair); transition: border-color .3s var(--ease); }
  .services-foot a:hover { border-bottom-color: var(--black); }

  /* ============================ FOOTER ============================ */
  .footer { padding: clamp(7rem,16vh,13rem) var(--pad) clamp(2.5rem,5vh,4rem); }
  .footer .cta { font-family: var(--fh); font-weight: 800; font-size: clamp(2.6rem,11vw,9rem); letter-spacing: -0.045em; line-height: 0.88; display: inline-block; text-transform: uppercase; will-change: transform; }
  .footer .cta .at { color: var(--muted); transition: color 0.4s var(--ease); }
  .footer .cta:hover .at { color: var(--black); }
  .footer-bottom { margin-top: clamp(4rem,10vh,8rem); border-top: 2px solid var(--black); padding-top: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.25rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
  .footer-bottom nav { display: flex; gap: 1.75rem; }
  .footer-bottom nav a { position: relative; }
  .footer-bottom nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--black); transition: width 0.4s var(--ease); }
  .footer-bottom nav a:hover::after { width: 100%; }

  /* ============================ STUDIO / ABOUT ============================ */
  .studio { padding: clamp(7rem, 16vh, 13rem) var(--pad); }

  /* ===== About: solid background, theme-aware (black in dark, white in light) ===== */
  .studio-bg {
    position: relative; overflow: hidden; isolation: isolate;
    /* white-on-dark inside this section, regardless of global theme */
    --black: #ffffff; --white: #0a0a0a;
    --muted: rgba(255,255,255,0.6); --soft: rgba(255,255,255,0.82); --hair: rgba(255,255,255,0.22); --accent: #5C8DFF;
    background: transparent; color: #fff;
  }
  /* In light mode the About band flips to dark text */
  body:not(.inverted) .studio-bg {
    --black: #0a0a0a; --white: #ffffff;
    --muted: rgba(10,10,10,0.55); --soft: rgba(10,10,10,0.78); --hair: rgba(10,10,10,0.16); --accent: #1A4FE0;
    background: transparent; color: #0a0a0a;
  }
  .studio-content { position: relative; z-index: 1; text-align: center; }
  .studio-content .section-head,
  .studio-content .lead,
  .studio-body { max-width: 640px; margin-left: auto; margin-right: auto; }
  .studio-content .studio-byline { max-width: 760px; margin-left: auto; margin-right: auto; }
  /* center the section head: stack the label + subtitle, centered */
  .studio-content .section-head {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem; border-top: none; padding-top: 0;
  }

  /* Centered byline: portrait stacked above the intro lead */
  .studio-byline {
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(1.5rem, 3vw, 2.25rem);
  }
  .studio-byline .lead { margin-bottom: 0; }
  .studio-portrait {
    flex: 0 0 auto;
    width: clamp(120px, 13vw, 168px); height: clamp(120px, 13vw, 168px);
    border-radius: 50%; object-fit: cover; object-position: center 30%; display: block;
    border: 3px solid var(--black);
    box-shadow: 0 10px 50px rgba(0,0,0,0.18);
  }
  .studio-body { margin: clamp(2.5rem, 6vh, 4.5rem) auto; }
  .studio-body .sec-body { color: var(--soft); max-width: 60ch; margin-left: auto; margin-right: auto; }
  .studio-bg .section-head { border-top-color: var(--hair); }
  .studio-bg .stats { border-top-color: var(--hair); }

  .studio .lead {
    font-family: var(--fh); font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -0.03em;
    max-width: 22ch; margin-bottom: clamp(3rem, 7vh, 5rem);
  }
  .studio .lead em { font-style: normal; color: var(--accent); }
  /* Columns size to their numerals (Syne is ultra-wide: "100%" ≈ 4em) and the
     leftover space is distributed — equal 1fr columns couldn't hold the type
     at its cap and the numbers overlapped on large screens. */
  .stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: clamp(1.25rem, 3vw, 2.5rem); border-top: 2px solid var(--black); padding-top: clamp(2rem, 4vh, 3rem); max-width: 900px; margin-left: auto; margin-right: auto; }
  .stat .num { font-family: var(--fh); font-weight: 800; font-size: clamp(2.4rem, 4.6vw, 4rem); letter-spacing: -0.04em; line-height: 0.9; white-space: nowrap; }
  .stat .lab { margin-top: 0.7rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); max-width: 22ch; }

  /* ============================ APPROACH ============================ */
  .approach { padding: clamp(6rem, 12vh, 10rem) var(--pad); }
  /* premium two-column: numbered steps beside a contained, sticky portrait image */
  .approach-layout { display: grid; grid-template-columns: 1fr clamp(280px, 32%, 420px); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
  .approach-list { min-width: 0; }
  .approach-item { display: grid; grid-template-columns: 4rem 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding: clamp(1.75rem, 4vh, 2.75rem) 0; border-top: 1px solid var(--hair); }
  .approach-item:first-child { border-top: none; padding-top: 0; }
  .approach-item:last-child { border-bottom: none; }
  .approach-item .ai-num { font-family: var(--fh); font-weight: 800; font-size: clamp(1rem, 1.4vw, 1.3rem); color: var(--accent); }

  .approach-figure { margin: 0; position: sticky; top: clamp(5rem, 12vh, 8rem); }
  .af-clip { display: block; position: relative; }
  .af-img { display: block; width: 100%; height: auto; }
  .af-dark { display: none; }
  body.inverted .af-light { display: none; }
  body.inverted .af-dark { display: block; }
  .calm .af-img { filter: grayscale(0.12) brightness(1.02) contrast(1.02); }
  .approach-figure figcaption { font-family: var(--fh); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.74rem; padding: 0.5rem 0 0; color: var(--muted); text-align: center; }
  .approach-item h3 { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; line-height: 0.98; }
  .approach-item p { margin-top: 0.9rem; max-width: 48ch; color: var(--soft); font-weight: 500; font-size: clamp(0.95rem, 1.1vw, 1.1rem); }

  /* ============================ RECOGNITION ============================ */
  .award-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem clamp(1.5rem, 4vw, 3rem); align-items: baseline; padding: clamp(1.1rem, 2.5vh, 1.6rem) 0; border-top: 1px solid var(--hair); }
  .award-row:first-child { border-top: 2px solid var(--black); }
  .award-row .aw-name { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.7rem); letter-spacing: -0.02em; }
  .award-row .aw-org, .award-row .aw-year { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .clients { margin-top: clamp(3rem, 7vh, 5rem); }
  .clients .cm-label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; }
  .clients .cm-rail { border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); padding: clamp(1.5rem, 3vh, 2rem) 0; overflow: hidden; }
  .client-track { display: inline-block; white-space: nowrap; animation: marquee 32s linear infinite; will-change: transform; }
  .client-track span { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 3vw, 2.3rem); letter-spacing: -0.02em; margin: 0 clamp(1.25rem, 3vw, 2.25rem); }
  .client-track span.sep { color: var(--muted); }

  /* ============================ TESTIMONIAL ============================ */
  .faq { padding: clamp(7rem, 16vh, 13rem) var(--pad); }
  .faq-list { margin-top: clamp(3rem, 7vh, 5rem); border-top: 1px solid var(--hair); }
  .faq-item { border-bottom: 1px solid var(--hair); }
  .faq-q {
    all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: baseline;
    gap: 2rem; padding: clamp(1.2rem, 3vh, 1.8rem) 0; cursor: pointer;
    font-family: var(--fh); font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.9rem);
    letter-spacing: -0.025em; line-height: 1.1; color: var(--black);
  }
  .faq-q:hover { color: var(--muted); }
  .faq-icon { font-size: 1.4rem; font-weight: 300; flex: none; transition: transform 0.4s var(--ease); color: var(--muted); }
  .faq-item.open .faq-icon { transform: rotate(45deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
  .faq-a-inner { padding-bottom: clamp(1.2rem, 3vh, 1.8rem); font-size: clamp(0.95rem, 1.4vw, 1.1rem); line-height: 1.7; color: var(--soft); max-width: 68ch; }
  .faq-a-inner a { color: var(--black); border-bottom: 1px solid currentColor; }

  /* ============================ MOBILE MENU ============================ */
  .menu-toggle { display: none; }
  .mobile-menu {
    position: fixed; inset: 0; z-index: 70; background: var(--white);
    display: flex; flex-direction: column; justify-content: center; gap: 0.1rem;
    padding: var(--pad);
    transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .6s var(--ease), opacity .4s var(--ease), visibility .6s;
  }
  .mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .mobile-menu a { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 11vw, 4rem); letter-spacing: -0.03em; line-height: 1.14; }
  .mobile-menu .mm-mail { font-family: var(--fb); font-weight: 600; font-size: 1rem; letter-spacing: 0.04em; margin-top: 2rem; color: var(--muted); text-transform: none; }

  /* overflow safety for long tokens */
  .connect, .mm-mail, .clock, .award-row .aw-name, .work-info p { overflow-wrap: anywhere; }
  .left-col, .right-col, .work-item, .work-info, .stat, .award-row, .approach-item, .approach-item > div, .section-head { min-width: 0; }

  /* ===== rich section content ===== */
  .sec-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin: clamp(2.5rem, 6vh, 4.5rem) 0; }
  .rec-split { align-items: start; }
  .sec-col { display: flex; flex-direction: column; min-width: 0; }
  .sec-body { font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.65; color: var(--soft); margin-bottom: 1.1rem; max-width: 48ch; }
  .sec-body:last-child { margin-bottom: 0; }
  .sec-figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
  .sec-figure.wide { aspect-ratio: 16 / 9; }
  .sec-figure.tall { aspect-ratio: 3 / 4; }
  .sec-figure img { position: absolute; top: -9%; left: 0; width: 100%; height: 118%; object-fit: cover; will-change: transform, clip-path; }
  .flashy .sec-figure img { filter: saturate(1.15) contrast(1.03); }
  .calm .sec-figure img { filter: grayscale(1) brightness(1.02) contrast(0.98); }
  .warm .sec-figure img { filter: grayscale(1) contrast(1.02); }
  .luxe .sec-figure img { filter: grayscale(1) brightness(0.78) contrast(1.12); }

  .lead-calm { font-family: var(--fh); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2.3rem); line-height: 1.25; letter-spacing: -0.02em; max-width: 30ch; margin-bottom: clamp(2.5rem, 6vh, 4rem); color: var(--black); }

  /* testimonial styles removed — section replaced by FAQ */

  /* ============================ RESPONSIVE ============================ */
  @media (max-width: 980px) {
    .split { grid-template-columns: 1fr; }
    .left-col {
      position: relative; height: auto; min-height: 100svh;
      justify-content: flex-start;
      gap: clamp(1.75rem, 4.5vh, 3rem);
      padding-top: clamp(1.25rem, 2.6vw, 2rem); padding-bottom: clamp(2rem, 5vh, 3rem);
      border-right: none; border-bottom: 1px solid var(--hair);
    }
    .lc-widgets { margin-top: auto; }
    .hero-content { margin: clamp(2rem, 6vh, 4rem) 0 0; max-width: none; padding: 0; }
    .hero-title { font-size: clamp(3rem, 12vw, 5.5rem); line-height: 0.98; }
    .hero-sub { font-size: clamp(1.1rem, 4.4vw, 1.5rem); max-width: 30ch; }
    /* On mobile the waves fill the whole screen. Push the wave to the right so
       the hero headline clears it, and keep a firm left-to-right bed through the
       hero plus a centered bed across the About region — text always reads while
       the waves stay visible on the right. */
    .wave-layer { background-position: 88% top; }
    .wave-veil {
      background:
        /* hero: protect the left text column top-to-mid */
        linear-gradient(90deg, var(--edge-fade) 0%, var(--edge-fade) 52%, rgba(127,127,127,0.0) 86%),
        /* about: firm centered bed that stays solid down to the bottom so the
           wave is fully gone behind the lower text and the stats */
        linear-gradient(180deg,
          rgba(127,127,127,0) 40%,
          var(--edge-fade) 52%,
          var(--edge-fade) 100%);
    }
    .right-col { padding-top: clamp(3rem,7vh,5rem); gap: clamp(4rem,9vw,7rem); }
    .nav { display: none; }
    .sh-nav { display: none; }
    .menu-toggle {
      display: grid; align-content: center; justify-items: center; gap: 6px;
      position: fixed; top: clamp(0.6rem, 2vw, 1.25rem); right: var(--pad);
      width: 46px; height: 46px; z-index: 75; background: transparent; border: none; padding: 0;
    }
    .menu-toggle span { display: block; width: 26px; height: 2px; background: var(--black); transition: transform .4s var(--ease), opacity .3s var(--ease); box-shadow: 0 0 8px rgba(255,255,255,0.7); }
    body.inverted .menu-toggle span { box-shadow: 0 0 8px rgba(0,0,0,0.7); }
    .menu-toggle.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
    .work-item:nth-child(odd), .work-item:nth-child(even) { padding-left: var(--pad); padding-right: var(--pad); }
    .service-grid { grid-template-columns: 1fr; }
    .services-intro { grid-template-columns: 1fr; gap: 1.25rem; }
    .services-top { grid-template-columns: 1fr; gap: 2.5rem; }
    .globe-wrap { order: -1; }
    .globe-mount { max-width: 380px; }
    .work-grid { grid-template-columns: 1fr; }
    .sec-split { grid-template-columns: 1fr; gap: 2rem; margin: 2.5rem 0; }
    .stats { grid-template-columns: repeat(2, auto); justify-content: space-between; }
    .approach-layout { grid-template-columns: 1fr; gap: clamp(2rem, 5vh, 3.5rem); }
    .approach-figure { position: static; max-width: 420px; }
    .af-clip { aspect-ratio: 16 / 9; }
    .approach-item { grid-template-columns: 1fr; gap: 0.6rem; }
    .award-row { grid-template-columns: 1fr auto; }
    .award-row .aw-org { display: none; }
    .studio, .approach, .faq, .services {
      padding-top: clamp(4.5rem, 11vh, 7rem); padding-bottom: clamp(4.5rem, 11vh, 7rem);
    }
    .studio-byline {
      flex-direction: column; align-items: center; text-align: center;
      gap: clamp(1.25rem, 3vh, 1.75rem);
    }
    .studio-byline .lead { max-width: 28ch; }
    .connect { font-size: 0.8rem; }
    .theme-toggle { width: 40px; height: 40px; bottom: 1rem; }
  }
  @media (max-width: 600px) {
    .hero-title { font-size: clamp(2.3rem, 9.2vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; }
    .hero-title .line-inner { max-width: 100%; overflow-wrap: break-word; }
    .hero-eyebrow { letter-spacing: 0.16em; }
    .footer .cta { font-size: clamp(1.85rem, 9vw, 3.4rem); }
    .statement p { font-size: clamp(1.9rem, 8vw, 3rem); }

    .section-head { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
    .section-head h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
    .section-head span { font-size: 0.72rem; }
    .work-info h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
    .approach-item h3 { font-size: clamp(1.4rem, 6vw, 2rem); }
    .studio .lead { font-size: clamp(1.4rem, 5.6vw, 2rem); }
    .award-row .aw-name { font-size: clamp(1rem, 4.6vw, 1.4rem); }
    .client-track span { font-size: clamp(1.2rem, 5vw, 1.8rem); margin: 0 0.9rem; }
    .mobile-menu a { font-size: clamp(2rem, 10vw, 3.2rem); }
    .connect { font-size: 0.78rem; }
    .hud { grid-template-columns: 1fr; }
    .hud-cell { border-left: none; padding-left: 0; padding-top: 0.85rem; border-top: 1px solid var(--hair); }
    .hud-cell:first-child { border-top: none; padding-top: 1rem; }
  }
  @media (max-width: 460px) {
    .stats { grid-template-columns: repeat(2, auto); justify-content: space-between; gap: 1.5rem 1rem; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  }


  /* ============================================================
     CONVERSION COMPONENTS — added for clearer CTAs, social proof,
     and a low-friction inline inquiry form. Theme-aware via tokens.
     ============================================================ */

  /* --- Hero clarity sub-headline --- */
  .hero-sub {
    margin-top: clamp(1.5rem, 3vh, 2.4rem);
    max-width: 34ch;
    font-size: clamp(1.15rem, 1.7vw, 1.6rem);
    line-height: 1.32; letter-spacing: -0.01em;
    color: var(--black); font-weight: 500;
  }
  .hero-sub strong { font-weight: 700; }

  /* --- Hero CTA row: primary button + secondary ghost link --- */
  .connect-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: clamp(1rem, 2vw, 1.75rem);
    margin-top: clamp(2rem, 4vh, 3rem);
  }
  .connect-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--fb); font-size: 0.86rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    padding: 1.05em 1.9em; border-radius: 100px;
    background: var(--black); color: var(--white);
    border: 2px solid var(--black);
    transition: transform 0.4s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
  }
  .connect-btn:hover { transform: translateY(-2px); background: transparent; color: var(--black); }
  .connect-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    font-family: var(--fb); font-size: 0.86rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    padding: 1.05em 1.9em; border-radius: 100px;
    color: var(--accent); background: transparent;
    border: 2px solid var(--accent);
    position: relative;
    transition: transform 0.4s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
  }
  .connect-ghost:hover { transform: translateY(-2px); background: var(--accent); color: #fff; }
  .connect-ghost span { transition: transform 0.35s var(--ease); }
  .connect-ghost:hover span { transform: translateX(4px); }


  /* --- Sticky header CTA button --- */
  .sh-cta {
    font-size: 0.74rem !important; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.6em 1.15em; border-radius: 100px;
    background: var(--black); color: var(--white) !important;
    border: 1.5px solid var(--black);
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
  }
  .sh-cta::after { display: none !important; }
  .sh-cta:hover { background: transparent; color: var(--black) !important; }

  /* --- Mobile menu CTA --- */
  .mm-cta {
    display: inline-block; align-self: flex-start;
    font-family: var(--fb) !important;
    font-size: 1rem !important; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.7em 1.4em; border-radius: 100px; margin-top: 0.5rem;
    background: var(--black); color: var(--white);
  }

  /* --- Work-card Result chip --- */
  .wc-result {
    margin-top: 0.85rem; font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.01em; color: var(--black); line-height: 1.4;
  }
  .wc-result span {
    display: inline-block; margin-right: 0.55em;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--hair); border-radius: 100px;
    padding: 0.2em 0.7em; vertical-align: middle;
  }

  /* --- Testimonials --- */
  .quotes { padding: clamp(6rem, 14vh, 11rem) var(--pad); }
  .quotes-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }
  .quote {
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 1.5rem; padding: clamp(1.75rem, 2.5vw, 2.5rem);
    border: 2px solid var(--black);
  }
  .quote blockquote {
    font-family: var(--fh); font-weight: 700;
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    line-height: 1.25; letter-spacing: -0.02em;
  }
  .quote figcaption { display: flex; flex-direction: column; gap: 0.15rem; }
  .q-name { font-weight: 600; font-size: 0.95rem; }
  .q-role { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.03em; }

  /* --- Inline contact form (in footer / theme-dark) --- */
  .contact-wrap { margin-top: clamp(2.5rem, 6vh, 4.5rem); max-width: 720px; }
  .contact-intro {
    font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.55;
    color: var(--soft); margin-bottom: clamp(1.75rem, 4vh, 2.75rem); max-width: 52ch;
  }
  .contact-intro a { font-weight: 600; border-bottom: 1px solid currentColor; }
  .hp-field { position: absolute; left: -5000px; }
  .contact-form { display: flex; flex-direction: column; gap: clamp(1rem, 2.2vh, 1.5rem); }
  .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
  .cf-field { display: flex; flex-direction: column; gap: 0.5rem; }
  .cf-field > span {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
  }
  .cf-field > span em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.7; }
  .cf-field input, .cf-field select, .cf-field textarea {
    font-family: var(--fb); font-size: 1rem; color: var(--black);
    background: transparent; border: none; border-bottom: 2px solid var(--hair);
    padding: 0.65rem 0; border-radius: 0;
    transition: border-color 0.3s var(--ease);
  }
  .cf-field select { -webkit-appearance: none; appearance: none; cursor: pointer; }
  .cf-field textarea { resize: vertical; min-height: 4.5rem; }
  .cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
    outline: none; border-bottom-color: var(--black);
  }
  .cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--muted); }
  .cf-field select option { color: #000; }
  .cf-submit {
    align-self: flex-start; margin-top: 0.5rem;
    font-family: var(--fb); font-size: 0.85rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
    padding: 1em 2em; border-radius: 100px;
    background: var(--black); color: var(--white); border: 2px solid var(--black);
    transition: transform 0.4s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
  }
  .cf-submit:hover { transform: translateY(-2px); background: transparent; color: var(--black); }
  .cf-status { margin-top: 1.25rem; font-size: 0.95rem; line-height: 1.5; padding: 0.85rem 1.1rem; border-radius: 8px; }
  .cf-status.ok { background: color-mix(in srgb, var(--black) 6%, transparent); color: var(--black); border: 1px solid var(--hair); }
  .cf-status.err { background: color-mix(in srgb, #c0392b 12%, transparent); color: var(--black); border: 1px solid color-mix(in srgb, #c0392b 40%, transparent); }

  /* --- Responsive for conversion components --- */
  @media (max-width: 900px) {
    .quotes-grid { grid-template-columns: 1fr; max-width: 560px; }
  }
  @media (max-width: 600px) {
    .cf-row { grid-template-columns: 1fr; }
    .sh-cta { padding: 0.55em 1em; }
    .cf-submit { align-self: stretch; text-align: center; }
  }



  /* ===== Services dropdown (homepage navs) ===== */
  .sh-nav .has-dropdown, .nav .has-dropdown { position: relative; display: inline-flex; }
  .dd-toggle {
    font-family: var(--fb); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--black); background: none; border: none; cursor: pointer; padding: 0 0 2px;
    display: inline-flex; align-items: center; gap: 0.4em; position: relative; line-height: 1;
  }
  .sh-nav .dd-toggle { font-size: 0.78rem; }
  .nav .dd-toggle { font-size: 0.82rem; }
  .dd-toggle::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--black); transition: width .4s var(--ease); }
  .has-dropdown:hover .dd-toggle::after, .has-dropdown.open .dd-toggle::after { width: 100%; }
  .dd-caret { font-size: 0.7em; transition: transform .3s var(--ease); }
  .has-dropdown.open .dd-caret { transform: rotate(180deg); }
  .dd-menu {
    position: absolute; top: calc(100% + 0.85rem); left: 0;
    min-width: 190px; display: flex; flex-direction: column;
    background: var(--white); border: 2px solid var(--black); padding: 0.4rem; z-index: 60;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .has-dropdown.open .dd-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .dd-menu::before { content: ""; position: absolute; top: -0.85rem; left: 0; right: 0; height: 0.85rem; }
  .dd-menu a {
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0.7rem 0.9rem; white-space: nowrap; color: var(--black); transition: background-color .2s var(--ease);
  }
  .dd-menu a::after { display: none !important; }
  .dd-menu a:hover, .dd-menu a:focus-visible { background: var(--black); color: var(--white); outline: none; }


  /* ===== MOTION SECTION — live animation showcase ===== */
  .motion { position: relative; overflow: hidden; background: #060606; color: #fff; padding: clamp(6rem, 14vh, 11rem) var(--pad); }
  .motion-lead { font-family: var(--fh); font-weight: 700; font-size: clamp(1.3rem, 2.8vw, 2.4rem); line-height: 1.22; letter-spacing: -0.02em; max-width: 24ch; margin: clamp(1.5rem,4vh,2.5rem) 0 clamp(3rem,8vh,5rem); }
  .motion-lead em { font-style: normal; color: rgba(255,255,255,0.45); }
  .motion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
  .motion-tile { margin: 0; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.32); }
  .mt-stage { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.32); background: rgba(255,255,255,0.04); }
  .motion-tile figcaption { padding: clamp(1.25rem, 2vw, 1.75rem); }
  .mt-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; }
  .motion-tile h3 { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing: -0.02em; margin: 0.6rem 0 0.7rem; }
  .motion-tile figcaption p { font-size: 0.92rem; line-height: 1.55; opacity: 0.7; max-width: 40ch; }
  .motion-note { margin-top: clamp(3rem,7vh,5rem); font-size: 0.9rem; opacity: 0.55; max-width: 52ch; line-height: 1.6; }
  .motion-note code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em; background: rgba(255,255,255,0.1); padding: 0.1em 0.45em; border-radius: 4px; }

  /* Demo 1 — scroll bars */
  .scroll-bars { display: flex; align-items: flex-end; gap: clamp(4px, 0.8vw, 8px); height: 60%; width: 72%; }
  .scroll-bars span { flex: 1; background: #fff; height: 12%; transform-origin: bottom; will-change: height; transition: height 0.1s linear; }

  /* Demo 2 — hover orb */
  .hover-orb { position: relative; width: clamp(90px, 12vw, 130px); height: clamp(90px, 12vw, 130px); background: none; border: none; cursor: pointer; display: grid; place-items: center; }
  .orb-core { position: absolute; inset: 28%; border-radius: 50%; background: #fff; transition: transform 0.5s cubic-bezier(0.2,0.9,0.2,1), inset 0.5s cubic-bezier(0.2,0.9,0.2,1); }
  .orb-ring { position: absolute; inset: 6%; border: 1px solid rgba(255,255,255,0.55); border-radius: 50%; transition: transform 0.6s cubic-bezier(0.2,0.9,0.2,1), opacity 0.4s ease; }
  .orb-label { position: absolute; bottom: -1.6rem; left: 50%; transform: translateX(-50%); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5; white-space: nowrap; transition: opacity 0.3s ease; }
  .hover-orb:hover .orb-core, .hover-orb:focus-visible .orb-core { inset: 14%; transform: scale(1.05); }
  .hover-orb:hover .orb-ring, .hover-orb:focus-visible .orb-ring { transform: scale(1.15) rotate(45deg); opacity: 1; }
  .hover-orb:hover .orb-label, .hover-orb:focus-visible .orb-label { opacity: 0; }
  .hover-orb:active .orb-core { inset: 20%; }

  /* Demo 3 — reveal word */
  .reveal-word { overflow: hidden; }
  .rw-line { display: flex; gap: 0.02em; }
  .rw-line span { font-family: var(--fh); font-weight: 800; font-size: clamp(1.6rem, 4.5vw, 3.2rem); letter-spacing: -0.02em; line-height: 1; display: inline-block; }
  /* JS owns the reveal animation via GSAP, driving the letter transforms inline.
     No CSS transform here, to avoid fighting GSAP. The parent .reveal-word has
     overflow:hidden so letters are masked while offset. Without JS, letters stay visible. */
  .reveal-replay { position: absolute; bottom: 0.9rem; right: 0.9rem; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.28); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4em 0.8em; border-radius: 100px; cursor: pointer; transition: background-color 0.3s ease; }
  .reveal-replay:hover { background: rgba(255,255,255,0.22); }

  @media (max-width: 820px) {
    .motion-grid { grid-template-columns: 1fr; max-width: 460px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .nav { opacity: 1 !important; }
    .work-item { opacity: 1 !important; }
    .lc-widgets { opacity: 1 !important; }
    .hero-title .line-inner, .hero-eyebrow .line-inner { transform: none !important; opacity: 1 !important; }
    body { overflow-y: auto; }
  }

  /* ============================ AUDIT MODAL ============================ */
  .audit-overlay[hidden] { display: none !important; }
  .audit-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1rem, 4vw, 2rem);
    background: rgba(6,6,6,0.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .3s var(--ease);
  }
  .audit-overlay.is-open { opacity: 1; }
  .audit-dialog {
    position: relative; width: 100%; max-width: 520px;
    max-height: calc(100dvh - 2rem); overflow-y: auto;
    background: var(--white); color: var(--black);
    border: 1px solid var(--hair); border-radius: 22px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    box-shadow: 0 40px 100px rgba(0,0,0,0.35);
    transform: translateY(16px) scale(0.98); transition: transform .35s var(--ease);
  }
  .audit-overlay.is-open .audit-dialog { transform: none; }
  .audit-close {
    position: absolute; top: clamp(0.9rem,2vw,1.25rem); right: clamp(0.9rem,2vw,1.25rem);
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--hair); background: transparent; color: var(--black);
    font-size: 1.5rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .3s var(--ease), transform .3s var(--ease);
  }
  .audit-close:hover { background: var(--hair); transform: rotate(90deg); }

  .audit-eyebrow { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
  .audit-title { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0.75rem 0 0.85rem; }
  .audit-lead { font-size: 0.98rem; line-height: 1.55; color: var(--soft); max-width: 42ch; }

  .audit-form { margin-top: clamp(1.5rem, 3vh, 2rem); }
  .audit-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
  .audit-field { display: block; margin-bottom: 1rem; }
  .audit-label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
  .audit-field input {
    width: 100%; font-family: var(--fb); font-size: 1rem; color: var(--black);
    padding: 0.85em 1em; border: 1.5px solid var(--hair); border-radius: 12px;
    background: transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  }
  .audit-field input::placeholder { color: var(--muted); }
  .audit-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

  .audit-submit {
    width: 100%; margin-top: 0.5rem;
    font-family: var(--fb); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 1.05em 1.5em; border-radius: 100px; border: 2px solid var(--black);
    background: var(--black); color: var(--white); cursor: pointer;
    transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
  }
  .audit-submit:hover:not(:disabled) { transform: translateY(-2px); background: transparent; color: var(--black); }
  .audit-submit:disabled { opacity: 0.6; cursor: default; }
  .audit-fineprint { text-align: center; font-size: 0.82rem; color: var(--muted); margin-top: 0.9rem; }

  .audit-success { text-align: center; padding: clamp(1rem,3vh,2rem) 0; }
  .audit-success-mark { width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; }
  .audit-success h3 { font-family: var(--fh); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem,3vw,1.9rem); letter-spacing: -0.02em; margin-bottom: 0.75rem; }
  .audit-success p { color: var(--soft); max-width: 34ch; margin: 0 auto 1.75rem; line-height: 1.55; }
  .audit-success .audit-submit { max-width: 200px; margin-inline: auto; }


  /* ---- Safari perf: the fixed header re-rasterises its blur every scroll frame; a smaller radius cuts that cost dramatically while staying frosted. Chrome is unaffected. ---- */
  html.is-safari .site-header { -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }