/* =========================================================================
   Buzzard Pro - main.css  (v2)
   ========================================================================= */

/* ───────── Tokens ───────── */
:root {
  --bg-0:        #0A0B0D;
  --bg-1:        #14161B;
  --bg-2:        #1B1E25;
  --fg-0:        #F4F4F1;
  --fg-1:        #8A8F98;
  --fg-2:        #4F555E;

  /* Brand colours, pulled from the hand-drawn logo */
  --accent:      #FF5A3D;
  --accent-2:    #E6B946;
  --accent-3:    #3A8FD4;
  --accent-soft: color-mix(in oklab, var(--accent) 18%, transparent);

  --line:        rgba(244, 244, 241, 0.08);
  --line-strong: rgba(244, 244, 241, 0.20);
  --grid-line:   rgba(244, 244, 241, 0.05);
  --grid-cell:   clamp(60px, 5vw, 100px);

  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Instrument Serif", "Times New Roman", serif;

  --fs-mono:      clamp(.72rem, .68rem + .15vw, .82rem);
  --fs-kicker:    clamp(.74rem, .7rem + .2vw,  .86rem);
  --fs-body:      clamp(1rem,  .94rem + .3vw,  1.18rem);
  --fs-lede:      clamp(1.05rem, 1rem + .5vw, 1.45rem);
  --fs-h3:        clamp(1.4rem, 1.1rem + 1.2vw, 2.4rem);
  --fs-h2:        clamp(1.9rem,  1.4rem + 2.8vw, 4.6rem);
  --fs-display:   clamp(3.4rem, 2.4rem + 6vw, 9.5rem);

  /* Page side-gutter. Scales up on laptops/desktops so wide screens keep a
     clear left/right margin instead of running near edge-to-edge. Overridden
     to a tighter value on phones (≤760px) further down. */
  --gutter:       clamp(1.25rem, .5rem + 5vw, 6rem);
  --section-y:    clamp(2.8rem, 2rem + 3.4vw, 5.8rem);
  --section-gap:  clamp(.8rem, .6rem + .8vw, 1.4rem);

  --ease-out:     cubic-bezier(.2, .8, .2, 1);
  --ease-in-out:  cubic-bezier(.7, 0, .3, 1);
  --dur-1:        .25s;
  --dur-2:        .6s;
  --dur-3:        1s;
}

/* ───────── Reset ───────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* The `hidden` attribute must always win over component `display` rules
   (e.g. .brief__success / .brief__form set display:flex). */
[hidden] { display: none !important; }
/* ───────── Continuous grid - painted directly on the html element so the
   browser propagates it to the canvas across the entire scrollable area
   and it scrolls with content by default. This sidesteps every layout
   edge case of trying to stretch a positioned pseudo to full doc height. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--bg-0);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  background-position: 0 0;
  background-attachment: scroll;
}
body {
  color: var(--fg-0);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `overflow-x: clip` prevents horizontal scrollbars without making body a
     scroll container (which would scope future `position: sticky` children). */
  overflow-x: clip;
  position: relative;
  background: transparent;
}
/* (body::after spotlight removed - replaced by the .cursor-spotlight DOM
   element appended by initCursorSpotlight, which is more reliable to
   position via transform than via CSS-vars on a pseudo.) */
img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: #fff; }

html.is-locked, html.is-locked body { overflow: hidden; }

/* ───────── Utilities ───────── */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-1);
}
.kicker .num,
.kicker > span:first-child:not(.dot) { color: var(--accent); }
.kicker.mono { color: var(--fg-2); }

.italic        { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.italic.accent { color: var(--accent); }
.dim           { color: var(--fg-1); }
.mono          { font-family: var(--font-mono); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-1); display: inline-block; }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .85em 1.4em;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  transition: transform var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.btn svg { width: 1em; height: 1em; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: color-mix(in oklab, var(--accent) 75%, white); }
.btn--ghost  { border: 1px solid var(--line-strong); color: var(--fg-0); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--link {
  padding: .5em 0;
  border-radius: 0;
  background: none;
  color: var(--fg-0);
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-1), border-color var(--dur-1), gap var(--dur-1);
}
.btn--link .btn__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: btn-pulse 2.4s ease-out infinite;
}
.btn--link:hover { color: var(--accent); border-bottom-color: var(--accent); gap: 1em; }
.btn--lg { padding: 1.1em 1.8em; font-size: calc(var(--fs-mono) + .04rem); }
.btn:active { transform: scale(.98); }
@keyframes btn-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 80%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
}

/* One continuous grid runs the whole page: the html canvas grid (anchored at
   page 0,0, scrolling with content) shows through every transparent section,
   and the hero paints a matching copy over its WebGL canvas. Inner grid cells
   (services matrix, clients, etc.) use hairline borders in the same language. */
.manifesto, .work, .team {
  position: relative;
  isolation: isolate;
}

/* JS-gated reveal pre-states */
html.js [data-reveal] { opacity: 0; transform: translateY(20px); }
html.js [data-split]  .char { display: inline-block; opacity: 0; transform: translateY(.8em) rotate(2deg); }
html.js [data-split-words] .word { display: inline-block; opacity: 0; transform: translateY(.5em); }

/* Hero pre-state - hide title words + sub + CTAs to avoid a flash before
   initHero runs. initHero then fades the sub + CTAs in on load and reveals
   the title words one at a time on scroll. The hint stays visible from the
   start: it is the cue that prompts the user to scroll. */
html.js .hero__word-inner,
html.js .hero__sub,
html.js .hero__ctas {
  opacity: 0;
}
html:not(.js) .hero__word-inner,
html:not(.js) .hero__sub,
html:not(.js) .hero__ctas,
html.js-failed .hero__word-inner,
html.js-failed .hero__sub,
html.js-failed .hero__ctas {
  opacity: 1 !important;
}
/* The scroll hint is ALWAYS visible - it prompts the user to scroll
   so the title words can reveal. */
.hero__hint { opacity: 1; }

html:not(.js) .loader,
html.js-failed .loader,
html:not(.js) .menu,
html.js-failed .menu,
html:not(.js) .cursor,
html.js-failed .cursor,
html:not(.js) .brief,
html.js-failed .brief { display: none !important; }

html:not(.js) [data-reveal],
html.js-failed [data-reveal],
html:not(.js) [data-split] .char,
html:not(.js) [data-split-words] .word {
  opacity: 1 !important; transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-split] .char, [data-split-words] .word { opacity: 1 !important; transform: none !important; }
  /* kill flashy/loop animations but let the marquee keep listing services */
  .buzz, .buzz::before, .buzz::after, .zap,
  .loader__word-text, .loader__word-text::before, .loader__word-text::after {
    animation: none !important;
  }
  .cell-trail__cell, .nav__progress {
    animation: none !important;
    transition: none !important;
  }
  .marquee__track { animation-duration: 80s !important; }
}

/* =========================================================================
   LOADER (grid bg + kinetic BUZZ + monospace meter)
   ========================================================================= */
.loader {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--bg-0);
  display: grid; place-items: center;
  padding: var(--gutter);
  isolation: isolate;
  overflow: hidden;
}
.loader.is-done { pointer-events: none; }
.loader__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}
.loader__center {
  display: flex; flex-direction: column;
  align-items: center;
  gap: clamp(1rem, .6rem + 1vw, 1.6rem);
  width: min(min(560px, 88vw), 100%);
  text-align: center;
}
.loader__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.loader__word {
  position: relative;
  line-height: .85;
}
/* Loader buzz. - picks up the .buzz class which provides the hero's
   continuous buzz-cycle + buzz-glitch-a/b animations. We use the *same*
   font-size clamp as the hero title so the loader buzz. is an EXACT
   match: same lettercase (lowercase), same italic serif, same accent
   color, same effect, same scale. The hero title is
   clamp(2.4rem, 1.6rem + 5vw, 7.5rem) - we use that here. */
.loader__word-text {
  font-size: clamp(2.4rem, 1.6rem + 5vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .92;
}
.loader__meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  width: min(420px, 80vw);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .18em;
  color: var(--fg-2);
}
.loader__pct  { color: var(--fg-0); }
.loader__bar  { height: 1px; background: var(--line); position: relative; overflow: hidden; }
.loader__fill { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .08s linear; }
.loader__status {
  color: var(--accent);
  text-transform: uppercase;
  min-width: 6.5em;
  text-align: right;
  transition: opacity var(--dur-1);
}

/* =========================================================================
   CUSTOM CURSOR - 3D hollow wireframe cube in accent orange (matches the
   grid-cell trail). On hover over clickable items the cube disassembles
   and reassembles 5% bigger / brighter. After 2s idle the cube unfolds
   and vanishes into a single grid-cell-sized outline.
   ========================================================================= */
.cursor {
  position: fixed; pointer-events: none;
  left: 0; top: 0; z-index: 10000;  /* above the loader (9999) so the cube rides on top of the loading screen, and above the brief modal (9500) */
  /* Cube + trail share the SAME accent. */
  color: rgba(255, 90, 61, 0.9);
  perspective: 200px;               /* closer perspective → the cube clearly reads as 3D */
  will-change: transform, opacity;
  /* Glow lives on the PARENT, never on the preserve-3d shape - a filter on the
     shape forces it to render flat, which is why the cube looked 2D before. */
  filter: drop-shadow(0 0 6px rgba(255, 90, 61, 0.4));
  transition: opacity .45s var(--ease-out), filter var(--dur-1) var(--ease-out);
}
/* Click burst - a SQUARE outline that bursts outward and rotates 90°, echoing
   the cube's edges (no border-radius, so it reads as a cube face expanding
   rather than a ring). */
.cursor::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid currentColor;
  opacity: 0; transform: scale(.35) rotate(0deg);
}
.cursor.is-pressed::before { animation: cursor-shock .5s var(--ease-out) 1; }
@keyframes cursor-shock {
  0%   { opacity: .9;  transform: scale(.35) rotate(0deg);  border-width: 3px; }
  70%  { opacity: .4; }
  100% { opacity: 0;   transform: scale(3.4) rotate(90deg); border-width: 1px; }
}
.cursor__shape {
  --cube-size: 22px;
  position: absolute;
  left: 0; top: 0;
  width: var(--cube-size); height: var(--cube-size);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(-22deg) rotateY(35deg);
  animation: cube-spin 7s linear infinite;
  transition:
    width var(--dur-1) var(--ease-out),
    height var(--dur-1) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
  /* No filter here - it would flatten the 3D cube. Glow lives on `.cursor`. */
}
.cursor__face,
.cursor__ring {
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  background: transparent;
  transition:
    border-color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    opacity var(--dur-2) var(--ease-out);
}
.cursor__face--front  { transform: translateZ(calc(var(--cube-size) / 2)); }
.cursor__face--back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.cursor__face--right  { transform: rotateY( 90deg) translateZ(calc(var(--cube-size) / 2)); }
.cursor__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.cursor__face--top    { transform: rotateX( 90deg) translateZ(calc(var(--cube-size) / 2)); }
.cursor__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

/* Rings exist in the DOM but are unused in this new design. Hide them so
   they don't interfere with the cube wireframe. */
.cursor__ring { display: none; }

/* Dual-axis tumble so the cube's depth is unmistakable. */
@keyframes cube-spin {
  from { transform: translate(-50%, -50%) rotateX(-22deg) rotateY(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(338deg) rotateY(360deg); }
}

.cursor__label {
  position: absolute;
  left: 22px; top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bg-0);
  background: rgba(255, 90, 61, 1);
  padding: 4px 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-1), transform var(--dur-1);
}

/* Hover over clickable items: 5% bigger, BRIGHTER (full opacity accent),
   and a quick "disassemble/reassemble" - each face pushes out along its
   own normal then snaps back as the cube spins once. */
.cursor.is-hover {
  color: rgba(255, 90, 61, 1);
  filter: drop-shadow(0 0 11px rgba(255, 90, 61, 0.7));   /* glow boost on the parent */
}
.cursor.is-hover .cursor__shape {
  --cube-size: 24px;
  width: 24px; height: 24px;
}
.cursor.is-hover .cursor__face {
  background: color-mix(in oklab, rgba(255, 90, 61, 1) 10%, transparent);
}
.cursor.is-hover .cursor__face--front  { animation: face-disasm-z 0.55s var(--ease-out) 1; }
.cursor.is-hover .cursor__face--back   { animation: face-disasm-z-neg 0.55s var(--ease-out) 1; }
.cursor.is-hover .cursor__face--right  { animation: face-disasm-x 0.55s var(--ease-out) 1; }
.cursor.is-hover .cursor__face--left   { animation: face-disasm-x-neg 0.55s var(--ease-out) 1; }
.cursor.is-hover .cursor__face--top    { animation: face-disasm-y 0.55s var(--ease-out) 1; }
.cursor.is-hover .cursor__face--bottom { animation: face-disasm-y-neg 0.55s var(--ease-out) 1; }
.cursor.is-hover .cursor__label {
  opacity: 1;
  transform: translateY(0);
}
@keyframes face-disasm-z {
  0%   { transform: translateZ(calc(var(--cube-size) / 2)); }
  40%  { transform: translateZ(calc(var(--cube-size) * 1.3)); }
  100% { transform: translateZ(calc(var(--cube-size) / 2)); }
}
@keyframes face-disasm-z-neg {
  0%   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
  40%  { transform: rotateY(180deg) translateZ(calc(var(--cube-size) * 1.3)); }
  100% { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
}
@keyframes face-disasm-x {
  0%   { transform: rotateY( 90deg) translateZ(calc(var(--cube-size) / 2)); }
  40%  { transform: rotateY( 90deg) translateZ(calc(var(--cube-size) * 1.3)); }
  100% { transform: rotateY( 90deg) translateZ(calc(var(--cube-size) / 2)); }
}
@keyframes face-disasm-x-neg {
  0%   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
  40%  { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) * 1.3)); }
  100% { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
}
@keyframes face-disasm-y {
  0%   { transform: rotateX( 90deg) translateZ(calc(var(--cube-size) / 2)); }
  40%  { transform: rotateX( 90deg) translateZ(calc(var(--cube-size) * 1.3)); }
  100% { transform: rotateX( 90deg) translateZ(calc(var(--cube-size) / 2)); }
}
@keyframes face-disasm-y-neg {
  0%   { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }
  40%  { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) * 1.3)); }
  100% { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }
}
@keyframes cube-reassemble {
  0%   { filter: drop-shadow(0 0 0 transparent); }
  50%  { filter: drop-shadow(0 0 14px rgba(255, 90, 61, 0.85)); }
  100% { filter: drop-shadow(0 0 10px rgba(255, 90, 61, 0.6)); }
}

/* Click = "energy absorbed": a shockwave ring bursts out (see .cursor::before),
   the parent flares a bright halo, and the cube fills with colour + grows ~10%.
   JS holds `.is-pressed` ~420ms so the whole pulse always reads, even on a fast
   click. */
.cursor.is-pressed {
  color: rgba(255, 90, 61, 1);
  animation: cursor-charge .5s var(--ease-out) 1;
}
.cursor.is-pressed .cursor__shape { --cube-size: 24px; width: 24px; height: 24px; }
.cursor.is-pressed .cursor__face {
  background: color-mix(in oklab, rgba(255, 90, 61, 1) 60%, transparent);
  border-color: rgba(255, 90, 61, 1);
}
@keyframes cursor-charge {
  0%   { filter: drop-shadow(0 0 6px rgba(255, 90, 61, .4)); }
  30%  { filter: drop-shadow(0 0 26px rgba(255, 90, 61, 1))
                 drop-shadow(0 0 52px rgba(255, 90, 61, .7)); }
  100% { filter: drop-shadow(0 0 10px rgba(255, 90, 61, .55)); }
}

/* Idle (a few seconds without movement): the cube stops tumbling, flattens to a
   screen-aligned square sized to the grid cell beneath it (JS centres the cursor
   on that cell), then fades - as if it settled into the cell and vanished. */
.cursor.is-idle { opacity: 0; }
.cursor.is-idle .cursor__shape {
  animation: none;
  transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
  width: var(--grid-cell); height: var(--grid-cell);
  --cube-size: var(--grid-cell);
  transition:
    width .5s var(--ease-out),
    height .5s var(--ease-out),
    transform .5s var(--ease-out);
}
.cursor.is-idle .cursor__face { transform: translateZ(0); opacity: 1; }
.cursor.is-idle .cursor__face--right,
.cursor.is-idle .cursor__face--left,
.cursor.is-idle .cursor__face--top,
.cursor.is-idle .cursor__face--bottom { opacity: 0; }

/* The custom cursor stays hidden until main.js confirms a real mouse and adds
   `html.cursor-on` (it removes it again on touch). Gating on actual mouse
   movement is more reliable than an `(any-pointer: fine)` media query - that
   misreports on some hybrid/touchscreen laptops - and it guarantees the native
   cursor is only hidden once ours is actually live. */
.cursor { display: none; }
html.cursor-on .cursor { display: block; }

html.cursor-on,
html.cursor-on body,
html.cursor-on a,
html.cursor-on button,
html.cursor-on [data-cursor],
html.cursor-on .work__tile,
html.cursor-on .insight,
html.cursor-on .team__card,
html.cursor-on .clients__cell,
html.cursor-on .process__cell,
html.cursor-on .sectors__cell,
html.cursor-on .s-tile,
html.cursor-on .case__col,
html.cursor-on .menu__list a,
html.cursor-on .nav__menu-toggle,
html.cursor-on .nav__logo,
html.cursor-on .footer__top-link {
  cursor: none;
}
html.cursor-on input,
html.cursor-on textarea,
html.cursor-on select,
html.cursor-on [contenteditable="true"] { cursor: text !important; }
@media (prefers-reduced-motion: reduce) {
  .cursor__shape { animation: none !important; }
}

/* =========================================================================
   NAV - eases between a full and a compact state. A `.is-shrunk` class is
   toggled on scroll (see initNavScroll); the padding, logo height, background
   and hairline all transition over .55s so the change reads as a smooth,
   gradual shrink rather than a snap.
   ========================================================================= */
.nav {
  /* Full state (top of page) ~115px; shrunk state stays generous too. */
  --nav-pad-max: clamp(1.75rem, 1.3rem + .85vw, 2.35rem);
  --nav-pad-min: clamp(1.1rem, .9rem + .42vw, 1.5rem);
  --nav-logo-max: clamp(38px, 2.9vw, 49px);
  --nav-logo-min: clamp(30px, 2.25vw, 38px);

  position: fixed; top: 0; left: 0; right: 0;
  z-index: 800;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: var(--nav-pad-max) var(--gutter);
  /* Translucent so the html background grid + cell trail flow through the
     nav as part of the same plane. backdrop-filter blur keeps the label
     legible against varying section backgrounds underneath. */
  background: rgba(10, 11, 13, .18);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(244, 244, 241, 0);
  transition:
    padding .55s var(--ease-out),
    background .55s var(--ease-out),
    border-color .55s var(--ease-out);
}
.nav.is-shrunk {
  padding: var(--nav-pad-min) var(--gutter);
  background: rgba(10, 11, 13, .53);
  border-bottom-color: rgba(244, 244, 241, .10);
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
.nav__logo {
  display: inline-flex;
  align-items: center;
  /* Dedicated vertical padding so the logo never crowds the nav row,
     even in the shrunk state. */
  padding: clamp(.3rem, .2rem + .25vw, .55rem) .25rem;
  transition: padding var(--dur-1) var(--ease-out);
}
.nav__logo-img {
  height: var(--nav-logo-max);
  width: auto;
  transition: height .55s var(--ease-out);
}
.nav.is-shrunk .nav__logo-img { height: var(--nav-logo-min); }
.nav__links { display: flex; justify-content: center; gap: clamp(1rem, .5rem + 1.2vw, 2.2rem); }
.nav__links a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-1);
  padding: .5rem 0;
  transition: color var(--dur-1);
}
.nav__links a:hover { color: var(--fg-0); }
.nav__cta { display: flex; align-items: center; gap: 1rem; justify-self: end; }
/* Hamburger - hairline square that matches the site's grid grammar.
   Three bars on closed → middle bar fades, outer bars rotate to X on open. */
/* Hamburger - 2×2 matrix of hollow wireframe cubes. The cubes stay
   square + hollow in every state. A subtle grey at rest, accent on
   hover/open, and a periodic "zap" animation every ~10s - same buzz
   grammar as the accent words elsewhere on the page. */
/* Mobile menu trigger = the custom cursor, exactly: same 3D cube, same glow,
   and the same click effect (charge halo + square shock + faces fill + grow). */
.nav__menu-toggle {
  display: none;
  position: relative;
  width: 30px; height: 30px;
  /* Strong negative right margin pulls the icon close to the viewport edge. */
  margin-right: clamp(-1.4rem, -.8rem - 1.5vw, -.6rem);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  /* Mirror .cursor: glow lives on the PARENT (a filter on the cube flattens it). */
  perspective: 200px;
  color: rgba(255, 90, 61, .9);
  filter: drop-shadow(0 0 6px rgba(255, 90, 61, .4));
  transition: filter var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
/* Mirror .cursor__shape exactly. */
.nav__menu-cube {
  --cube-size: 22px;
  position: absolute; left: 50%; top: 50%;
  width: var(--cube-size); height: var(--cube-size);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(-22deg) rotateY(35deg);
  animation: cube-spin 7s linear infinite;
  transition: width var(--dur-1) var(--ease-out), height var(--dur-1) var(--ease-out);
}
/* The .cursor__face children render the 6 cube edges via --cube-size + currentColor. */

/* Click burst - same square shock ring as the cursor (.cursor::before). */
.nav__menu-toggle::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid currentColor;
  opacity: 0; transform: scale(.35) rotate(0deg);
  pointer-events: none;
}
/* Pressed = the cursor's exact click: charge halo + shock + faces fill + grow. */
.nav__menu-toggle.is-pressed {
  color: rgba(255, 90, 61, 1);
  animation: cursor-charge .5s var(--ease-out) 1;
}
.nav__menu-toggle.is-pressed::before { animation: cursor-shock .5s var(--ease-out) 1; }
.nav__menu-toggle.is-pressed .nav__menu-cube { --cube-size: 24px; width: 24px; height: 24px; }
.nav__menu-toggle.is-pressed .cursor__face {
  background: color-mix(in oklab, rgba(255, 90, 61, 1) 60%, transparent);
  border-color: rgba(255, 90, 61, 1);
}
@media (prefers-reduced-motion: reduce) {
  .nav__menu-cube { animation: none !important; }
}

@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__menu-toggle { display: inline-flex; }
}
@media (max-width: 540px) { .nav__cta .btn { display: none; } }

/* =========================================================================
   MENU - full-bleed mobile drawer, hairline rows, matches site grammar
   ========================================================================= */
.menu {
  position: fixed; inset: 0;
  z-index: 700;
  background: var(--bg-0);
  padding: clamp(5.5rem, 4.5rem + 1.6vw, 7rem) var(--gutter) var(--gutter);
  display: flex; flex-direction: column;
  gap: clamp(1.2rem, .9rem + 1.6vw, 2.4rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-100%);
  transition:
    transform .6s var(--ease-in-out),
    opacity .35s var(--ease-in-out),
    visibility 0s linear .6s;
  overflow-y: auto;
}
.menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition:
    transform .6s var(--ease-in-out),
    opacity .3s var(--ease-in-out),
    visibility 0s linear 0s;
}

.menu__list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.menu__list li {
  border-bottom: 1px solid var(--line);
}
.menu__list li:last-child { border-bottom: 0; }
.menu__list a {
  display: flex; align-items: baseline;
  gap: clamp(.8rem, .5rem + 1.5vw, 1.6rem);
  padding: clamp(.55rem, .4rem + .5vw, .9rem) 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, .9rem + 2.4vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.028em;
  line-height: 1;
  color: var(--fg-0);
  transition: color var(--dur-1), padding-left var(--dur-1);
}
.menu__list a::before {
  content: attr(data-num);
  font-family: var(--font-mono);
  font-size: clamp(.8rem, .72rem + .25vw, .96rem);
  color: var(--accent);
  letter-spacing: .16em;
  flex-shrink: 0;
}
.menu__list a:hover,
.menu__list a:focus-visible {
  color: var(--accent);
  padding-left: .6rem;
  outline: none;
}

.menu__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
@media (max-width: 460px) {
  .menu__footer { grid-template-columns: 1fr; gap: 1rem; }
}
.menu__footer > div {
  display: flex; flex-direction: column;
  gap: .35rem;
}
.menu__footer .kicker { color: var(--fg-2); margin-bottom: .25rem; }
.menu__footer a,
.menu__footer span:not(.kicker) {
  font-size: .98rem;
  color: var(--fg-1);
  line-height: 1.45;
}
.menu__footer a:hover { color: var(--accent); }

/* =========================================================================
   SECTION HEADER  (single rhythm across all sections)
   ========================================================================= */
.section-header {
  padding: var(--section-y) var(--gutter) var(--section-gap);
  display: grid;
  gap: clamp(.6rem, .4rem + .4vw, 1rem);
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}
.section-header > .kicker { margin-bottom: .2rem; }
.section-header--tight {
  padding-top: calc(var(--section-y) * .85);
  padding-bottom: .4rem;
  gap: .4rem;
}
/* Unified display title used by every section. One rhythm, one scale.
   Inner <em.italic> auto-renders as accented serif emphasis;
   <.dim> drops a clause to secondary fg for subtle hierarchy. */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 4.6rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.036em;
  color: var(--fg-0);
  max-width: 20ch;
  text-wrap: balance;
}
/* Title em.italic - calm accent serif italic at rest. JS adds .zap-firing
   at random intervals (8-22s) which plays exactly ONE buzz cycle then
   removes the class. The hero `buzz.` is excluded (it keeps continuous
   .buzz). */
.section-title em.italic,
.tenet__head em.italic,
.team__card h3 em.italic,
.case__col-title em.italic,
.footer em.italic,
.zap {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -.018em;
  padding-right: .04em;
  text-shadow: 0 0 12px color-mix(in oklab, var(--accent) 22%, transparent);
}
.section-title em.italic.zap-firing,
.tenet__head em.italic.zap-firing,
.team__card h3 em.italic.zap-firing,
.case__col-title em.italic.zap-firing,
.footer em.italic.zap-firing,
.zap.zap-firing {
  --buzz-dur: .85s;
  --buzz-shake: 5px;
  animation: buzz-cycle .85s linear 1;
}
.section-title em.italic.zap-firing::before,
.tenet__head em.italic.zap-firing::before,
.team__card h3 em.italic.zap-firing::before,
.case__col-title em.italic.zap-firing::before,
.footer em.italic.zap-firing::before,
.zap.zap-firing::before {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  color: var(--accent-2);
  animation: buzz-glitch-a .85s steps(1, end) 1;
}
.section-title em.italic.zap-firing::after,
.tenet__head em.italic.zap-firing::after,
.team__card h3 em.italic.zap-firing::after,
.case__col-title em.italic.zap-firing::after,
.footer em.italic.zap-firing::after,
.zap.zap-firing::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  color: var(--accent-3);
  animation: buzz-glitch-b .85s steps(1, end) 1;
}
.section-title .dim { color: var(--fg-2); }
.section-header--tight .section-title {
  font-size: clamp(1.6rem, 1.2rem + 2.2vw, 3.4rem);
  max-width: 22ch;
}
.section-lede {
  font-size: var(--fs-lede);
  color: var(--fg-1);
  max-width: 56ch;
  line-height: 1.4;
  margin-top: .2rem;
}
/* Unified vertical rhythm: every section's top spacing comes from its
   .section-header padding-top (= --section-y), and its bottom from a single
   padding-bottom on the section root. No horizontal padding on the section
   root - inner grids/headers manage their own gutter. */
.manifesto,
.work,
.case,
.services,
.process,
.clients,
.sectors,
.team,
.insights,
.contact { padding-bottom: var(--section-y); position: relative; }

/* Section divider - a full-bleed horizontal rule with an accent (orange/red)
   hint at the top of each major section. `--divider-shift` is set per-section
   by initSectionDividers (main.js) so the line snaps onto the nearest grid
   horizontal line, making it read as part of the grid system. Edges carry a
   lighter accent tint, brighter through the middle. */
.manifesto::before,
.work::before,
.case::before,
.services::before,
.process::before,
.clients::before,
.sectors::before,
.team::before,
.insights::before,
.contact::before,
.footer::before,
.footer__base::before {
  content: "";
  position: absolute;
  top: var(--divider-shift, 0px); left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    color-mix(in oklab, var(--accent) 14%, transparent) 0%,
    color-mix(in oklab, var(--accent) 38%, transparent) 50%,
    color-mix(in oklab, var(--accent) 14%, transparent) 100%);
  pointer-events: none;
  z-index: 0;
}
/* footer__base is width-constrained, so break its divider out to full-bleed
   (100vw) to match the full-width section dividers above. */
.footer__base::before {
  left: 50%; right: auto;
  width: 100vw;
  transform: translateX(-50%);
}

/* =========================================================================
   HERO
   ========================================================================= */
/* Hero is intentionally 220vh tall - the inner content uses position:sticky
   to stay locked at viewport top during scroll, and the extra height
   gives the user 120vh of scrolling distance during which the words
   reveal. This is essentially a CSS-native pin - bulletproof across
   browsers and immune to GSAP / Lenis interactions. */
.hero {
  position: relative;
  min-height: 220vh;
  min-height: 220svh;
  display: block;
  overflow: visible;   /* allow sticky child to stick instead of clip */
  isolation: isolate;
}
/* Hero WebGL shader disabled (see js/main.js) - left in the DOM but not rendered. */
.hero__canvas { display: none; }
.hero__grain {
  position: absolute; inset: 0; z-index: -1;
  height: 100vh;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .35; mix-blend-mode: overlay; pointer-events: none;
}
/* The hero sits over the WebGL canvas, which hides the page-wide grid here, so
   the hero paints its own. It uses the SAME token, faintness, cell size and 0,0
   origin as the global grid (html) so the two are indistinguishable - the grid
   reads as one continuous, consistent system from the hero through every
   section below (no vignette, no brighter "feature" grid). */
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  height: 100vh;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  background-position: 0 0;
  pointer-events: none;
}
/* Ambient grid FX (node constellation + electric current) - drawn over the
   hero grid, behind the content. See js/hero-fx.js. */
.hero__fx {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100vh;
  pointer-events: none;
}
.hero__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, .6rem + 1vw, 2rem);
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(9rem, 7rem + 3vw, 12rem) var(--gutter) clamp(2.5rem, 2rem + 1.5vw, 4rem);
  box-sizing: border-box;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 5vw, 7.5rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.04em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(.4rem, .2rem + .8vw, 1.2rem);
  max-width: 100%;
}
.hero__word {
  display: inline-block;
  line-height: .92;
  white-space: nowrap;
}
.hero__word-inner { display: inline-block; }
.hero__sub {
  max-width: 50ch;
  font-size: var(--fs-lede);
  color: var(--fg-1);
  line-height: 1.45;
  margin-inline: auto;
}
.hero__sub em.italic {
  color: var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.hero__ctas {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.2rem;
}

/* Scroll hint at bottom-right of the hero - animated vertical line cue. */
.hero__hint {
  position: absolute;
  right: clamp(1.2rem, 1rem + 1vw, 2rem);
  bottom: clamp(1.2rem, 1rem + 1vw, 2.4rem);
  display: flex; flex-direction: column; align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-2);
  pointer-events: none;
  z-index: 1;
  animation: hero-hint-flash 1.6s ease-in-out infinite;
}
@keyframes hero-hint-flash {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__hint { animation: none; opacity: 1; }
}
.hero__hint-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, var(--fg-2) 0%, transparent 100%);
  position: relative;
  overflow: hidden;
}
.hero__hint-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -50%;
  height: 50%;
  background: linear-gradient(180deg, transparent 0%, var(--accent) 100%);
  animation: hero-hint 2.2s var(--ease-in-out) infinite;
}
@keyframes hero-hint {
  0%   { transform: translateY(0); }
  100% { transform: translateY(220%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__hint-line::after { animation: none; }
}

/* electric BUZZ - fast 5-color cycle with RGB-split glitches
   (vars override per .buzz instance: --buzz-dur, --buzz-shake) */
.buzz {
  position: relative;
  display: inline-block;
  color: var(--accent);
  --buzz-dur: 1.8s;
  --buzz-shake: 7px;
  animation: buzz-cycle var(--buzz-dur) linear infinite;
  will-change: color, transform;
  text-shadow: 0 0 32px color-mix(in oklab, var(--accent) 55%, transparent);
}
.buzz::before,
.buzz::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}
.buzz::before {
  color: var(--accent-2);
  animation: buzz-glitch-a var(--buzz-dur) steps(1, end) infinite;
}
.buzz::after {
  color: var(--accent-3);
  animation: buzz-glitch-b var(--buzz-dur) steps(1, end) infinite;
}
@keyframes buzz-cycle {
  0%, 22%, 100% { color: var(--accent);   text-shadow: 0 0 24px color-mix(in oklab, var(--accent)   45%, transparent); }
  28%, 38%      { color: var(--accent-2); text-shadow: 0 0 26px color-mix(in oklab, var(--accent-2) 55%, transparent); }
  44%           { color: #fff;            text-shadow: 0 0 38px color-mix(in oklab, var(--accent)   65%, transparent); }
  50%, 60%      { color: var(--accent-3); text-shadow: 0 0 28px color-mix(in oklab, var(--accent-3) 55%, transparent); }
  66%, 76%      { color: color-mix(in oklab, var(--accent) 60%, var(--accent-2) 40%); text-shadow: 0 0 24px color-mix(in oklab, var(--accent-2) 55%, transparent); }
  82%           { color: #fff;            text-shadow: 0 0 32px color-mix(in oklab, var(--accent-3) 60%, transparent); }
  88%, 95%      { color: var(--accent);   text-shadow: 0 0 24px color-mix(in oklab, var(--accent)   45%, transparent); }
}
@keyframes buzz-glitch-a {
  0%, 100% { opacity: 0; transform: translate(0, 0) skewX(0); }
  5%       { opacity: 1; transform: translate(var(--buzz-shake), -1px) skewX(-2deg); }
  7%       { opacity: 0; transform: translate(0); }
  24%      { opacity: .9; transform: translate(calc(var(--buzz-shake) * -1), 1px) skewX(1deg); }
  26%      { opacity: 0; transform: translate(0); }
  42%      { opacity: 1; transform: translate(var(--buzz-shake), 0); }
  44%      { opacity: 0; transform: translate(0); }
  61%      { opacity: .9; transform: translate(calc(var(--buzz-shake) * -1), -1px) skewX(-1deg); }
  63%      { opacity: 0; transform: translate(0); }
  79%      { opacity: 1;  transform: translate(var(--buzz-shake), 1px) skewX(2deg); }
  82%      { opacity: 0; transform: translate(0); }
}
@keyframes buzz-glitch-b {
  0%, 100% { opacity: 0; transform: translate(0, 0) skewX(0); }
  5%       { opacity: 1; transform: translate(calc(var(--buzz-shake) * -1), 1px) skewX(2deg); }
  7%       { opacity: 0; transform: translate(0); }
  24%      { opacity: .9; transform: translate(var(--buzz-shake), -1px) skewX(-1deg); }
  26%      { opacity: 0; transform: translate(0); }
  42%      { opacity: 1; transform: translate(calc(var(--buzz-shake) * -1), 0); }
  44%      { opacity: 0; transform: translate(0); }
  61%      { opacity: .9; transform: translate(var(--buzz-shake), 1px) skewX(1deg); }
  63%      { opacity: 0; transform: translate(0); }
  79%      { opacity: 1;  transform: translate(calc(var(--buzz-shake) * -1), -1px) skewX(-2deg); }
  82%      { opacity: 0; transform: translate(0); }
}
/* Hero `buzz.` - extra dramatic: faster cycle, bigger shake, hotter glow */
.hero__buzz {
  --buzz-dur: 1.4s;
  --buzz-shake: 9px;
  text-shadow: 0 0 40px color-mix(in oklab, var(--accent) 70%, transparent);
}
/* Contact `buzz.` - matched to the hero `buzz.` so the zap reads identically. */
.contact__buzz {
  --buzz-dur: 1.4s;
  --buzz-shake: 9px;
  text-shadow: 0 0 40px color-mix(in oklab, var(--accent) 70%, transparent);
}

/* =========================================================================
   MARQUEE (continuous scroll, scroll-velocity boosted via JS)
   ========================================================================= */
.marquee {
  overflow: hidden;
  padding: 1.4rem 0;
  background: transparent;
  position: relative;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 12vw;
  z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, var(--bg-0), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--bg-0), transparent); }
.marquee__track {
  display: flex;
  gap: 1.6rem;
  white-space: nowrap;
  width: max-content;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--fg-0);
  animation: marquee 120s linear infinite;
  will-change: transform;
}
.marquee__sep {
  color: var(--accent);
  font-family: var(--font-mono);
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* =========================================================================
   MANIFESTO - compact hairline rows, fits one viewport
   ========================================================================= */
.tenets {
  max-width: min(1600px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  margin-top: clamp(.8rem, .6rem + .6vw, 1.3rem);
  display: flex;
  flex-direction: column;
}
.tenet {
  display: grid;
  grid-template-columns: clamp(56px, 6vw, 84px) 1fr auto;
  gap: clamp(1rem, .6rem + 1.2vw, 2.4rem);
  align-items: center;
  padding: clamp(.85rem, .6rem + .6vw, 1.25rem) 0;
  position: relative;
  transition: padding-left var(--dur-2) var(--ease-out);
}
.tenet::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height var(--dur-2) var(--ease-out);
}
.tenet:hover::before { height: 60%; }
.tenet:hover { padding-left: .8rem; }
.tenet:hover .tenet__num { color: var(--accent); }

.tenet__num {
  font-family: var(--font-mono);
  font-size: clamp(.92rem, .82rem + .25vw, 1.08rem);
  font-weight: 500;
  letter-spacing: .14em;
  color: color-mix(in oklab, var(--accent) 70%, var(--fg-0) 30%);
  align-self: center;
}
.tenet__head {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .9rem + .9vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -.028em;
  line-height: 1.2;
  color: var(--fg-0);
  margin: 0;
  max-width: 60ch;
}
/* .tenet__head em.italic styled by the consolidated zap block above */
.tenet__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}
@media (max-width: 760px) {
  /* Manifesto on mobile: keep the desktop "row with hairlines" feel but
     restack tag under the head, so each tenet reads as a single confident
     statement plus its category. */
  .tenets { margin-top: clamp(.8rem, .6rem + .8vw, 1.4rem); }
  .tenet {
    grid-template-columns: clamp(34px, 7vw, 48px) 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(.7rem, .5rem + .6vw, 1.2rem);
    row-gap: .25rem;
    padding: clamp(1rem, .8rem + .6vw, 1.4rem) 0;
    align-items: start;
  }
  .tenet__num {
    grid-row: 1 / -1;
    align-self: start;
    padding-top: .15rem;
    font-size: clamp(.8rem, .7rem + .3vw, .95rem);
  }
  .tenet__head {
    grid-column: 2; grid-row: 1;
    font-size: clamp(1.05rem, .9rem + 1vw, 1.45rem);
    line-height: 1.25;
    max-width: 36ch;
  }
  .tenet__tag {
    display: inline-block;
    grid-column: 2; grid-row: 2;
    color: color-mix(in oklab, var(--accent) 80%, var(--fg-0));
    font-size: .68rem;
    letter-spacing: .16em;
    margin-top: .15rem;
  }
}

/* =========================================================================
   WORK
   ========================================================================= */
.work__grid {
  padding: 0 var(--gutter);
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, .8rem + 1.5vw, 3rem);
}
@media (max-width: 768px) { .work__grid { grid-template-columns: 1fr; } }
.work__tile {
  position: relative;
  display: flex; flex-direction: column;
  gap: clamp(1.1rem, .8rem + .8vw, 1.6rem);
  padding-bottom: clamp(1.8rem, 1.4rem + 1vw, 2.6rem);
  transition: transform var(--dur-2) var(--ease-out);
}
.work__tile:hover { transform: translateY(-4px); }
.work__tile:hover .work__meta h3 { color: var(--accent); }
.work__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-1);
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
}
.work__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.4s var(--ease-out), filter var(--dur-2);
  filter: saturate(.5) brightness(.55) contrast(1.1);
  display: block;
}
/* color-sync overlay: warm accent tint + duotone darker bottom */
.work__media::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%,
      color-mix(in oklab, var(--accent) 38%, transparent), transparent 65%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 8%,  transparent) 0%,
      color-mix(in oklab, var(--accent) 18%, transparent) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity var(--dur-2);
}
.work__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,11,13,.25) 0%, rgba(10,11,13,.78) 100%);
  pointer-events: none;
}
.work__tile:hover .work__img {
  transform: scale(1.06);
  filter: saturate(.85) brightness(.78) contrast(1.05);
}
.work__tile:hover .work__media::before { opacity: .55; }
.work__meta {
  padding: 0 .2rem;
  display: flex; flex-direction: column;
  gap: .55rem;
}
.work__meta .kicker {
  color: var(--fg-2);
  letter-spacing: .16em;
}
.work__meta .kicker > span:first-child { color: var(--accent); }
.work__meta h3 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
  color: var(--fg-0);
  margin: .15rem 0 .35rem;
  transition: color var(--dur-1);
}
.work__meta p {
  color: var(--fg-1);
  max-width: 48ch;
  font-size: clamp(.98rem, .92rem + .25vw, 1.12rem);
  line-height: 1.5;
}
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.tags li {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-1);
  padding: .35rem .7rem;
  border: 1px solid var(--line);
}
/* Foot links ("Ask for the deck.", "Get more insights.") sit close to
   the cards above - tight top padding. */
.work__foot,
.insights__foot { padding: clamp(.6rem, .5rem + .4vw, 1rem) var(--gutter) 0; max-width: 1600px; margin: 0 auto; }
.link {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: .3rem;
  transition: gap var(--dur-1);
}
.link:hover { gap: 1.2em; }
.link svg { width: 1em; height: 1em; }

/* =========================================================================
   FEATURED CASE  (3-column hairline grid - matches services/clients language)
   ========================================================================= */
.case {
  position: relative;
  background: transparent;
}
.case__intro .section-title { max-width: 22ch; }

.case__grid {
  max-width: min(1600px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  margin-top: clamp(1rem, .8rem + .8vw, 1.6rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .case__grid { grid-template-columns: 1fr; } }

.case__col {
  display: flex; flex-direction: column;
  gap: clamp(.7rem, .5rem + .5vw, 1.1rem);
  padding: clamp(1.4rem, 1rem + 1vw, 2.2rem);
  position: relative;
  transition: background var(--dur-1);
}
.case__col::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.case__col:hover { background: var(--bg-1); }
.case__col:hover::after { transform: scaleX(1); }

.case__col-head {
  display: flex; align-items: center; gap: .9rem;
  padding-bottom: .4rem;
}
.case__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  color: var(--accent);
}
.case__col-head .kicker { color: var(--fg-1); }
.case__col-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, .9rem + 1vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--fg-0);
  max-width: 22ch;
  margin: 0;
}
/* .case__col-title em.italic styled by the consolidated zap block above */
.case__col-body {
  font-size: clamp(.95rem, .88rem + .25vw, 1.05rem);
  color: var(--fg-1);
  line-height: 1.5;
  max-width: 44ch;
}
.case__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.case__points > div {
  display: grid;
  grid-template-columns: minmax(90px, 35%) 1fr;
  gap: .8rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.case__points > div:last-child { border-bottom: 0; }
.case__points dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.case__points dd {
  font-family: var(--font-display);
  font-size: .94rem;
  color: var(--fg-0);
  letter-spacing: -.01em;
}

.case__col--outcome { background: color-mix(in oklab, var(--accent) 3%, transparent); }
.case__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: auto;
  gap: 1rem .9rem;
}
.case__stat {
  display: flex; flex-direction: column;
  gap: .25rem;
  padding: .4rem 0;
}
.case__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .95;
  color: var(--accent);
}
.case__stat-label {
  font-family: var(--font-mono);
  font-size: calc(var(--fs-mono) - .02rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
  line-height: 1.3;
}

/* =========================================================================
   SERVICES - 4×3 hairline matrix of numbered service tiles
   ========================================================================= */
.services__matrix {
  max-width: min(1600px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.6rem, .4rem + .5vw, 1.1rem);
}
@media (max-width: 1024px) { .services__matrix { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  {
  .services__matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.5rem, .4rem + .3vw, .8rem); }
}
/* Phones: 2 columns, tight padding, hide the body copy to save vertical
   space - the headline alone is enough to identify each discipline; the
   detail belongs on a future per-service page anyway. */
@media (max-width: 540px) {
  .services__matrix {
    grid-template-columns: 1fr 1fr;
    gap: clamp(.4rem, .3rem + .25vw, .6rem);
  }
  .s-tile {
    padding: clamp(.85rem, .7rem + .5vw, 1.2rem);
    min-height: 7rem;
    gap: .5rem;
    background: rgba(244, 244, 241, 0.018);
  }
  .s-tile h3 {
    font-size: clamp(.95rem, .85rem + .35vw, 1.1rem);
    margin-top: 0;
  }
  .s-tile p { display: none; }
  .s-tile__num { font-size: .7rem; }
}

.s-tile {
  padding: clamp(1.1rem, .9rem + .9vw, 1.8rem);
  display: flex; flex-direction: column;
  gap: .55rem;
  min-height: 10.5rem;
  position: relative;
  background: transparent;
  transition: background var(--dur-1);
  overflow: hidden;
}
.s-tile::after {
  content: "";
  position: absolute; left: 0; bottom: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.s-tile:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.s-tile:hover::after { transform: scaleX(1); }
.s-tile__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  color: var(--accent);
}
.s-tile h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .55vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--fg-0);
  margin-top: auto;
}
.s-tile p {
  font-size: .86rem;
  color: var(--fg-1);
  line-height: 1.4;
}

/* =========================================================================
   PROCESS - 4 hairline cells, single accent, matches clients grid language
   ========================================================================= */
.process { /* bottom padding set in the consolidated rule above */ }
.process__grid {
  max-width: min(1600px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.5rem, .35rem + .3vw, .9rem); } }
/* Phones: handled via initHorizontalPanels - process becomes a pinned
   4-panel horizontal scroll, matching case + sectors. See @media block
   below for the .horiz-track > .process__cell styling. */

.process__cell {
  display: flex; flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  background: transparent;
  position: relative;
  transition: background var(--dur-1);
  min-height: 16rem;
}
.process__cell::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.process__cell:hover::after { transform: scaleX(1); }
.process__cell:hover { background: var(--bg-1); }
.process__cell-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.process__num  { color: var(--accent); }
.process__time { color: var(--fg-2); }
.process__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--fg-0);
  background: transparent;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.process__cell:hover .process__icon { color: var(--accent); border-color: var(--accent); }
.process__icon svg { width: 60%; height: 60%; }
.process__cell h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  font-weight: 400;
  letter-spacing: -.025em;
  margin-top: auto;
}
.process__cell p {
  color: var(--fg-1);
  font-size: .96rem;
  line-height: 1.5;
}

/* =========================================================================
   CLIENTS (image-based grid)
   ========================================================================= */
.clients__grid {
  padding: 0 var(--gutter);
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
/* Desktop: the two .clients__row wrappers vanish from layout via
   `display: contents`, so all 18 cells appear as direct grid children.
   The JS-cloned `.clients__cell--dup` elements are hidden on desktop
   (they exist only to make the mobile marquee loop seamless). */
.clients__row { display: contents; }
.clients__cell--dup { display: none !important; }
@media (max-width: 1100px) { .clients__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.clients__cell {
  aspect-ratio: 5 / 3;
  display: grid; place-items: center;
  padding: 1.2rem;
  background: transparent;
  transition: background var(--dur-2);
  position: relative;
  overflow: hidden;
}
.clients__cell::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    color-mix(in oklab, var(--accent) 14%, transparent),
    transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-2);
}
.clients__cell:hover::before { opacity: 1; }
.clients__cell:hover { background: var(--bg-1); }
.clients__cell img {
  max-height: 70%;
  max-width: 90%;
  width: auto;
  /* Real-colour brand logos are forced to a uniform white silhouette so every
     logo reads on the dark wall regardless of its source colour (brightness(0)
     blacks out the artwork preserving alpha; invert(1) flips it to white). */
  filter: brightness(0) invert(1) opacity(.6);
  transition: filter var(--dur-2), transform var(--dur-2);
  position: relative; z-index: 1;
}
.clients__cell:hover img {
  filter: brightness(0) invert(1) opacity(1);
  transform: scale(1.04);
}
/* ===== Logo-wall display styles - chosen in the admin, applied to .clients via
   data-logo-style by content.js. Base rule above (= "mono") is the default. ===== */
/* MONO: knockout logos (white wordmarks on solid fills) keep their colour -
   whitening would flood the fill and blank them. */
.clients[data-logo-style="mono"] .clients__cell img[src*="mother-dairy"],
.clients[data-logo-style="mono"] .clients__cell img[src*="radio-city"] { filter: opacity(.85); }
.clients[data-logo-style="mono"] .clients__cell:hover img[src*="mother-dairy"],
.clients[data-logo-style="mono"] .clients__cell:hover img[src*="radio-city"] { filter: opacity(1); }

/* ORIGINAL - true brand colours */
.clients[data-logo-style="original"] .clients__cell img { filter: opacity(.92); }
.clients[data-logo-style="original"] .clients__cell:hover img { filter: opacity(1); }

/* GREYSCALE - desaturated, blooms to colour on hover */
.clients[data-logo-style="greyscale"] .clients__cell img { filter: grayscale(1) opacity(.65); }
.clients[data-logo-style="greyscale"] .clients__cell:hover img { filter: grayscale(0) opacity(1); }

/* TINT - single-colour silhouette in --tint (masked, so any logo works) */
.clients[data-logo-style="tint"] .clients__cell { position: relative; }
.clients[data-logo-style="tint"] .clients__cell img { opacity: 0; }
.clients[data-logo-style="tint"] .clients__cell::after {
  content: ""; position: absolute; inset: 24% 16%; z-index: 1;
  background: var(--tint, var(--accent));
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
  opacity: .8; transition: opacity var(--dur-2);
}
.clients[data-logo-style="tint"] .clients__cell:hover::after { opacity: 1; }

/* ===== Image display styles - work / team / insights media, via data-img-style ===== */
.work[data-img-style="greyscale"] .work__img,
.team[data-img-style="greyscale"] .team__avatar img,
.insights[data-img-style="greyscale"] .insight__media img { filter: grayscale(1); transition: filter var(--dur-2); }
.work[data-img-style="greyscale"] .work__tile:hover .work__img,
.team[data-img-style="greyscale"] .team__card:hover .team__avatar img,
.insights[data-img-style="greyscale"] .insight:hover .insight__media img { filter: grayscale(0); }

/* image TINT (duotone): greyscale the photo + wash it in --tint via blend mode */
.work[data-img-style="tint"] .work__img,
.team[data-img-style="tint"] .team__avatar img,
.insights[data-img-style="tint"] .insight__media img { filter: grayscale(1) contrast(1.04); }
.work[data-img-style="tint"] .work__media,
.team[data-img-style="tint"] .team__avatar,
.insights[data-img-style="tint"] .insight__media { position: relative; }
.work[data-img-style="tint"] .work__media::after,
.team[data-img-style="tint"] .team__avatar::after,
.insights[data-img-style="tint"] .insight__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--tint, var(--accent)); mix-blend-mode: color;
}

/* =========================================================================
   TEAM - vertical hairline cards (avatar top → kicker → headline → desc)
   ========================================================================= */
.team__grid {
  padding: 0;
  max-width: min(1600px, 100% - 2 * var(--gutter));
  margin: clamp(.8rem, .6rem + .6vw, 1.4rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) { .team__grid { grid-template-columns: 1fr; } }

.team__card {
  display: flex;
  flex-direction: column;
  gap: clamp(.7rem, .5rem + .4vw, 1rem);
  padding: clamp(1rem, .8rem + .7vw, 1.5rem);
  position: relative;
  transition: background var(--dur-1);
}
.team__card:hover { background: var(--bg-1); }
.team__card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.team__card:hover::after { transform: scaleX(1); }

.team__avatar {
  width: 100%;
  max-width: clamp(180px, 22vw, 240px);
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 8%, var(--bg-1)) 0%,
      var(--bg-1) 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
}
.team__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: grayscale(.7) brightness(.6) contrast(1.08);
  transition: filter var(--dur-2), transform 1.4s var(--ease-out);
  display: block;
}
.team__avatar::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 8%, transparent) 0%,
    color-mix(in oklab, var(--accent) 16%, transparent) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.team__card:hover .team__avatar img {
  filter: grayscale(.2) brightness(1) contrast(1);
  transform: scale(1.04);
}
.team__meta {
  display: flex; flex-direction: column;
  gap: .4rem;
}
.team__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.team__card h3 {
  font-family: var(--font-display);
  font-size: clamp(1rem, .85rem + .6vw, 1.3rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--fg-0);
  max-width: 26ch;
  margin: 0;
}
/* .team__card h3 em.italic styled by the consolidated zap block above */
.team__role {
  color: var(--fg-1);
  font-size: .88rem;
  line-height: 1.45;
  max-width: 40ch;
}

/* =========================================================================
   INSIGHTS
   ========================================================================= */
/* Insights - vertical hairline cards matching the crew pattern.
   16:9 banner up top, then mono kicker → display headline → body copy. */
.insights__grid {
  padding: 0;
  max-width: min(1600px, 100% - 2 * var(--gutter));
  margin: clamp(.8rem, .6rem + .6vw, 1.4rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .8rem + .8vw, 1.8rem);
}
@media (max-width: 900px) { .insights__grid { grid-template-columns: 1fr; } }

.insight {
  display: flex; flex-direction: column;
  gap: clamp(.9rem, .7rem + .5vw, 1.2rem);
  padding: clamp(1rem, .8rem + .7vw, 1.5rem) 0;
  position: relative;
  transition: background var(--dur-1);
}
.insight:hover { background: var(--bg-1); }
.insight::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.insight:hover::after { transform: scaleX(1); }

.insight__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line);
  position: relative;
  isolation: isolate;
}
.insight__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.5) brightness(.55) contrast(1.1);
  transition: transform 1.4s var(--ease-out), filter var(--dur-2);
}
/* color-sync overlay (matches .work__media) */
.insight__media::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%,
      color-mix(in oklab, var(--accent) 38%, transparent), transparent 65%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 8%,  transparent) 0%,
      color-mix(in oklab, var(--accent) 18%, transparent) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity var(--dur-2);
}
.insight__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,11,13,.2) 0%, rgba(10,11,13,.7) 100%);
  pointer-events: none;
}
.insight:hover .insight__media img {
  transform: scale(1.05);
  filter: saturate(.85) brightness(.78) contrast(1.05);
}
.insight:hover .insight__media::before { opacity: .55; }
.insight__body {
  padding: 0;
  display: flex; flex-direction: column;
  gap: .45rem;
}
.insight .kicker {
  color: var(--accent);
  margin-bottom: .1rem;
}
.insight h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .85rem + .7vw, 1.4rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--fg-0);
  max-width: 28ch;
  margin: 0;
}
.insight p {
  color: var(--fg-1);
  font-size: .92rem;
  line-height: 1.45;
  max-width: 42ch;
}

/* =========================================================================
   CONTACT - grid language, single CTA, hairline contact rows
   ========================================================================= */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* .contact__grid-bg removed - the body-level continuous grid covers this. */
.contact__head { padding-bottom: var(--section-gap); }
.contact__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 4.2vw, 6.8rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .94;
  max-width: 14ch;
}
.contact__lede {
  font-size: var(--fs-lede);
  color: var(--fg-1);
  max-width: 52ch;
}
/* Playful prompt on the left, the coffee CTA to its right. */
.contact__cta {
  margin-top: .8rem;
  display: flex;
  align-items: center;
  gap: clamp(1rem, .6rem + 1.6vw, 2.2rem);
  flex-wrap: wrap;
}
.contact__cta-text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--fg-0);
}

.contact__rows {
  max-width: min(1600px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(1rem, .8rem + .8vw, 1.8rem);
  gap: 0 clamp(1.2rem, .8rem + 1vw, 2.4rem);
}
@media (max-width: 1100px) { .contact__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .contact__rows { grid-template-columns: 1fr; } }
.contact__row {
  display: flex; flex-direction: column;
  gap: .6rem;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  position: relative;
  transition: background var(--dur-1);
}
.contact__row:hover { background: var(--bg-1); }
.contact__big {
  font-family: var(--font-display);
  /* Smaller upper bound so an email or phone number renders on one line
     inside its column (previous max of 1.9rem was big enough to wrap
     team@buzzard.pro / +91 8884 428 877 in narrow desktop columns). */
  font-size: clamp(1.05rem, .8rem + .65vw, 1.35rem);
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--fg-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-1), border-color var(--dur-1);
  display: inline-block;
  width: max-content;
  max-width: 100%;
}
.contact__big--addr { white-space: normal; }
.contact__big:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* address link behaves like the other contact__big links */
.contact__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.contact__toast {
  position: fixed;
  left: 50%;
  bottom: clamp(1.2rem, 1rem + 1vw, 2rem);
  transform: translate(-50%, 12px);
  z-index: 9995;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in oklab, var(--bg-0) 92%, transparent);
  border: 1px solid var(--accent);
  padding: .7rem 1.2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2), transform var(--dur-2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
  white-space: nowrap;
  max-width: calc(100% - 2 * var(--gutter));
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact__toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================================================================
   FOOTER - two tidy tiers: brand wordmark + back-to-top arrow on top, then a
   meta base row (copyright · tip · privacy). Kept balanced, not scattered.
   ========================================================================= */
.footer {
  /* Transparent so the continuous page grid (html canvas) shows through the
     footer too, aligned with the sections above - not an opaque block.
     position: relative anchors the ::before divider (same accent grid-aligned
     line as every section above). */
  position: relative;
  background: transparent;
  padding: 0;
}
.footer__main {
  max-width: min(1600px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.8rem, 1.2rem + 1.6vw, 3rem) 0;
}
.footer__brand { display: flex; flex-direction: column; gap: .5rem; }
.footer__brand .kicker {
  font-size: calc(var(--fs-kicker) + .04rem);
  color: var(--accent);
}
.footer__tag {
  font-size: var(--fs-lede);
  color: var(--fg-0);
  line-height: 1.3;
  max-width: 28ch;
}
/* .footer__tag em.italic gets the .buzz class + animation via initTitleBuzz */

.footer__privacy {
  color: var(--fg-1);
  transition: color var(--dur-1);
}
.footer__privacy:hover { color: var(--accent); }

.footer__base {
  position: relative;
  max-width: min(1600px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem 1.6rem; flex-wrap: wrap;
  padding: 1.1rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-2);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer__base-meta {
  display: flex; align-items: center;
  gap: .8rem 1.6rem; flex-wrap: wrap;
}
.footer__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  text-transform: none;
  color: var(--fg-2);
}
/* Desktop sees the "type buzz / double-tap" hint; mobile only sees the
   double-tap hint since there's no keyboard. */
.footer__hint--mobile { display: none; }
@media (max-width: 760px) {
  .footer__hint--desktop { display: none; }
  .footer__hint--mobile  { display: inline; }
}
.footer__hint code {
  font-family: var(--font-mono);
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  padding: 0 .35em;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
/* Back-to-top is now an icon-only accented arrow (no label). */
.footer__top-link {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: color var(--dur-1), transform var(--dur-1);
}
.footer__top-link svg { width: 1.4em; height: 1.4em; }
.footer__top-link:hover { transform: translateY(-3px); }

/* =========================================================================
   CONTACT FORM - centered popup modal
   ========================================================================= */
.brief {
  position: fixed; inset: 0;
  z-index: 9500;
  pointer-events: none;
  display: grid; place-items: center;
  /* Small fixed inset - independent of the page's large side-gutter, which
     would otherwise shrink the modal's available height and force scrolling. */
  padding: clamp(1rem, .6rem + 1.4vw, 1.75rem);
}
.brief.is-open { pointer-events: auto; }
.brief__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 11, 13, 0.74);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.brief.is-open .brief__backdrop { opacity: 1; }

.brief__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 97svh;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,90,61,.05);
  overflow-y: auto;
  overflow-x: hidden;
  /* Scroll silently if it ever has to - no visible scrollbar. */
  scrollbar-width: none;
  padding: clamp(1.15rem, .9rem + .8vw, 1.6rem);
  transform: scale(.94) translateY(12px);
  opacity: 0;
  transition:
    transform .35s var(--ease-out),
    opacity .25s var(--ease-out);
  display: flex; flex-direction: column;
  gap: .9rem;
  isolation: isolate;
}
.brief__panel::-webkit-scrollbar { display: none; }   /* hide scrollbar (WebKit/Blink) */
.brief__panel::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 100% 60% at 100% 0%,
      color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%);
  pointer-events: none;
}
.brief.is-open .brief__panel { transform: scale(1) translateY(0); opacity: 1; }

.brief__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.brief__close {
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-1), color var(--dur-1);
  color: var(--fg-0);
}
.brief__close:hover { border-color: var(--accent); color: var(--accent); }
.brief__close svg { width: 1.2em; height: 1.2em; }

.brief__form { display: flex; flex-direction: column; gap: .72rem; }
/* Honeypot - kept out of view and out of the tab order; only bots fill it. */
.brief__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brief__form h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + .9vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.brief__lede { color: var(--fg-1); font-size: .98rem; }
.brief__lede a { color: var(--fg-0); border-bottom: 1px solid var(--accent); }

.brief__row { display: flex; flex-direction: column; gap: .4rem; }
.brief__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .brief__row--2 { grid-template-columns: 1fr; } }

/* Wide landscape panel (echoes the viewport's proportion). Personal details
   and services sit side-by-side to use the horizontal space, so neither feels
   congested; message + submit run full-width below. Within personal details,
   name/company are paired 2-up (half/half); email and phone get their own
   roomy rows. Stacks to one column on phones. */
.brief__cols { display: flex; flex-direction: column; gap: .8rem; }
.brief__col  { display: flex; flex-direction: column; gap: .8rem; }
@media (min-width: 761px) {
  .brief__panel { width: min(1180px, 92vw); }
  .brief__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* personal details · services */
    gap: 1.6rem;
    align-items: start;
  }
}

.brief__row span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.brief__form input,
.brief__form select,
.brief__form textarea {
  font: inherit;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--fg-0);
  background: var(--bg-0);
  border: 1px solid var(--line-strong);
  padding: .72rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.brief__form input:focus,
.brief__form select:focus,
.brief__form textarea:focus { border-color: var(--accent); }
.brief__form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
  padding-right: 2.4rem;
}
.brief__form textarea { resize: vertical; min-height: 3.1rem; }

/* Phone field - searchable country/code box (fixed-ish width) + number input. */
.brief__phone { display: grid; grid-template-columns: minmax(7.5rem, 9.5rem) 1fr; gap: .5rem; }
.brief__cc { width: 100%; }

/* On-brand validation messages - replace the native browser bubbles. A terse
   mono line in accent, with the field's border flipping to accent. */
.brief__form .brief__err {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-mono);
  font-size: calc(var(--fs-mono) - .02rem);
  letter-spacing: .08em;
  text-transform: none;
  color: var(--accent);
}
.brief__form .brief__err:empty { display: none; }
.brief__form .is-invalid > input,
.brief__form .is-invalid > .brief__phone input,
.brief__form .is-invalid > select,
.brief__form .is-invalid > textarea,
.brief__form .is-invalid .brief__services-grid { border-color: var(--accent); }
.brief__form .is-invalid > span:first-child,
.brief__form .is-invalid > legend { color: var(--accent); }

/* Services selector - checkbox chips. Each chip is a small hairline pill
   that flips to accent when its checkbox is toggled. */
.brief__services {
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.brief__services legend {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-1);
  padding: 0;
}
.brief__services-hint {
  font-family: var(--font-mono);
  font-size: calc(var(--fs-mono) - .04rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: -.1rem 0 .1rem;
}
.brief__services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.brief__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.brief__chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.brief__chip span {
  display: inline-block;
  padding: .42rem .78rem;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: calc(var(--fs-mono) - .02rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-1);
  background: transparent;
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.brief__chip:hover span {
  border-color: var(--accent);
  color: var(--fg-0);
}
.brief__chip input:checked + span {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--fg-0);
}
.brief__chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.brief__actions {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 1rem;
  padding-top: .4rem;
}
.brief__note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.brief__success {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: .85rem;
  padding: 2.5rem 0;
  max-width: 42ch; margin-inline: auto;
}
.brief__success-mark { width: 60px; height: 60px; color: var(--accent); margin-bottom: .2rem; }
.brief__success h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.02em;
}
.brief__success-lede { color: var(--fg-1); line-height: 1.55; }
.brief__success-kicker {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2);
  margin-top: .5rem;
}
.brief__success-links {
  display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; align-items: baseline;
}
.brief__success-links span { color: var(--fg-2); }
.brief__success a { color: var(--fg-0); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.brief__success .btn { margin-top: .7rem; }

/* ===================== BLOG - static-generated pages (/blog, /blog/<slug>) ===================== */
.blogbody { background: #0a0b0d; color: var(--fg-0, #f4f4f1); min-height: 100vh; }
.blognav { display:flex; justify-content:space-between; align-items:center; gap:1rem; max-width: 1000px; margin:0 auto; padding: 1.4rem 1.5rem; font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.blognav a { color: var(--fg-1, #9aa0a8); text-decoration:none; transition: color .2s; }
.blognav a:hover { color: var(--accent, #ff5a3d); }
.blogfoot { max-width:1000px; margin:4rem auto 0; padding:2rem 1.5rem; border-top:1px solid var(--line,#2a2c31); font-family:var(--font-mono); font-size:.76rem; color:var(--fg-2,#6b7178); }
.blogfoot a { color: inherit; }

.post { max-width: 760px; margin: 1rem auto 0; padding: 0 1.5rem; }
.post__meta { font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2,#6b7178); }
.post__title { font-family:var(--font-display); font-weight:400; letter-spacing:-.02em; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); line-height:1.06; margin:.6rem 0 1rem; }
.post__tags { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0 0 1.8rem; }
.post__tags li { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-1,#9aa0a8); border:1px solid var(--line,#2a2c31); border-radius:999px; padding:.25rem .7rem; }
.post__cover { margin:0 0 2rem; border:1px solid var(--line,#2a2c31); border-radius:14px; overflow:hidden; }
.post__cover img { width:100%; height:auto; display:block; }
.post__back { display:inline-block; margin-top:2.4rem; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent,#ff5a3d); text-decoration:none; }

.prose { font-size:1.075rem; line-height:1.75; color: var(--fg-1, #cfd2d6); }
.prose h2 { font-family:var(--font-display); font-weight:400; letter-spacing:-.01em; font-size:1.5rem; color:var(--fg-0,#f4f4f1); margin:2.2rem 0 .8rem; }
.prose h3 { font-size:1.2rem; color:var(--fg-0,#f4f4f1); margin:1.6rem 0 .6rem; }
.prose p { margin:0 0 1.1rem; }
.prose a { color:var(--fg-0,#f4f4f1); border-bottom:1px solid var(--accent,#ff5a3d); text-decoration:none; }
.prose ul, .prose ol { margin:0 0 1.1rem 1.25rem; }
.prose li { margin:.3rem 0; }
.prose img { max-width:100%; height:auto; border-radius:10px; }
.prose blockquote { border-left:2px solid var(--accent,#ff5a3d); padding-left:1rem; margin:1.2rem 0; color:var(--fg-0,#f4f4f1); font-style:italic; }
.prose code { font-family:var(--font-mono); background:rgba(255,255,255,.06); padding:.1em .35em; border-radius:5px; font-size:.9em; }

.blist { max-width: 1000px; margin: 1rem auto 0; padding: 0 1.5rem; }
.blist__head { padding: 2rem 0 2.4rem; }
.blist__head h1 { font-family:var(--font-display); font-weight:400; letter-spacing:-.02em; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.8rem); margin:0 0 .6rem; }
.blist__head p { color:var(--fg-1,#9aa0a8); max-width: 56ch; }
.blist__grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:1.4rem; padding-bottom:1rem; }
.bcard { display:flex; flex-direction:column; border:1px solid var(--line,#2a2c31); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; background:rgba(255,255,255,.015); transition: border-color .25s, transform .25s; }
.bcard:hover { border-color:var(--accent,#ff5a3d); transform: translateY(-3px); }
.bcard__media { aspect-ratio:16/10; overflow:hidden; }
.bcard__media img { width:100%; height:100%; object-fit:cover; display:block; }
.bcard__body { padding:1.1rem 1.2rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.bcard__meta { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2,#6b7178); }
.bcard__body h2 { font-family:var(--font-display); font-weight:400; font-size:1.25rem; letter-spacing:-.01em; margin:0; }
.bcard__body p { color:var(--fg-1,#9aa0a8); font-size:.95rem; margin:0; }
@media (max-width:600px){ .blist__grid { grid-template-columns:1fr; } }

/* =========================================================================
   MOBILE POLISH - targeted refinements for ≤ 760px viewports
   ========================================================================= */
@media (max-width: 760px) {
  :root {
    --section-y: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
    --gutter:    clamp(1rem,   .85rem + 1vw,  1.5rem);
  }

  /* Hero: leave room for the (now taller) fixed nav, scale title down */
  .hero {
    padding-top: clamp(6.5rem, 5rem + 4vw, 8.5rem);
    min-height: 100dvh;
  }
  .hero__title { line-height: .9; }
  .hero__sub { font-size: 1rem; line-height: 1.45; }

  /* Buttons: comfortable touch targets, bottom of hero CTA group */
  .btn--lg { padding: 1rem 1.5rem; }

  /* Section titles: slightly tighter wraps */
  .section-title { max-width: 18ch; letter-spacing: -.032em; }
  .section-lede  { font-size: 1rem; line-height: 1.5; }

  /* Manifesto: single column, larger numbers for tap presence */
  .tenet {
    grid-template-columns: clamp(38px, 8vw, 56px) 1fr;
    gap: .9rem;
    padding: 1rem 0;
  }
  .tenet__num { font-size: 1rem; }
  .tenet__head { font-size: 1.05rem; line-height: 1.3; }

  /* Work tiles stack cleanly */
  .work__tile { gap: .9rem; padding-bottom: 1.4rem; }
  .work__meta h3 { font-size: clamp(1.6rem, 1rem + 4vw, 2.4rem); }
  .work__meta p  { font-size: 1rem; }

  /* Featured case: single column, slightly tighter padding */
  .case__col { padding: 1.2rem 1rem; gap: .7rem; }
  .case__col-title { font-size: 1.4rem; }
  .case__stat-num  { font-size: 1.6rem; }

  /* Crew: square avatars stay square; cap width on phones */
  .team__avatar { max-width: 180px; aspect-ratio: 1 / 1; }

  /* Insights, contact: tighter rhythm */
  .contact__title { font-size: clamp(2.6rem, 2rem + 6vw, 4.4rem); }
  .contact__row { padding: 1.2rem 1rem; }
  /* Drop the office-hours tail from the phone hint on small screens. */
  .contact__hint-hours { display: none; }

  /* Footer: tighter on phones */
  .footer__main { padding: 1.6rem 0; }
  .footer__base { padding: .8rem 0; }

  /* Brief modal: full-bleed on small phones */
  .brief { padding: .5rem; }
  .brief__panel { padding: 1.4rem; gap: 1rem; }
  .brief__form h2 { font-size: 1.5rem; }
}

@media (max-width: 460px) {
  /* Hero CTAs full width for clear tap */
  .hero__ctas .btn { width: 100%; justify-content: center; }
}
/* Marquee: lock to a very slow, readable base on touch + small viewports.
   `!important` so it survives even if anything sneaks an inline
   animation-duration onto the track. Slower than desktop because the
   smaller text-size makes the same px/s feel much faster. */
@media (max-width: 1024px) {
  .marquee__track {
    animation-duration: 280s !important;
    font-size: clamp(1rem, .9rem + .6vw, 1.25rem) !important;
  }
}
@media (max-width: 460px) {
  .marquee__track {
    animation-duration: 360s !important;
  }
}
/* On any touch-only device, ensure no JS-injected duration leaks in. */
@media (any-pointer: coarse) and (not (any-pointer: fine)) {
  .marquee__track { animation-duration: 320s !important; }
}

/* ─────────── Mobile: clients 2-row marquee, insights/team snap-scroll ─────────── */
@media (max-width: 760px) {
  /* Clients on mobile: two rows scrolling in opposite directions. The two
     .clients__row wrappers in HTML are normally invisible to layout (display:
     contents on desktop); on mobile we promote them to flex tracks. JS only
     duplicates each row's cells in-place for a seamless loop - no DOM
     restructuring. */
  .clients__grid {
    grid-template-columns: none !important;
    display: flex !important;
    flex-direction: column;
    gap: clamp(.5rem, .35rem + .5vw, .9rem);
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: clamp(.6rem, .4rem + .6vw, 1rem) auto 0;
    position: relative;
    isolation: isolate;
  }
  .clients__grid::before,
  .clients__grid::after {
    content: "";
    position: absolute; top: 0; bottom: 0; width: 12vw;
    z-index: 2; pointer-events: none;
  }
  .clients__grid::before { left: 0;  background: linear-gradient(to right, var(--bg-0), transparent); }
  .clients__grid::after  { right: 0; background: linear-gradient(to left,  var(--bg-0), transparent); }

  .clients__row {
    display: flex !important;
    flex-wrap: nowrap;
    width: max-content;
    gap: 0;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
  /* Slower, smoother. Different durations on each row keep the parallax
     feeling alive without anyone pausing - `linear` and an infinite loop
     guarantee no visible stutter. */
  .clients__row--ltr { animation: clients-marquee-ltr 90s linear infinite; }
  .clients__row--rtl { animation: clients-marquee-rtl 110s linear infinite; }

  .clients__row > .clients__cell,
  .clients__row > .clients__cell--dup {
    flex: 0 0 auto;
    display: grid !important;
    place-items: center;
    width: 38vw;
    aspect-ratio: 4 / 3;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    padding: .8rem;
  }
  .clients__row > .clients__cell:first-child { border-left: 1px solid var(--line); }

  @keyframes clients-marquee-ltr {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  @keyframes clients-marquee-rtl {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .clients__row--ltr,
    .clients__row--rtl { animation: none !important; }
  }

  /* Unified mobile horizontal snap-scroll - applies to ALL multi-cell
     sections (work, case, sectors, process, team, insights). Each section
     drops out of grid mode into a flex track with snap-x; cards take ~78vw
     so the next card is hinted to the right. Lighter than pinning and
     more predictable across devices. */
  .work__grid,
  .case__grid,
  .sectors__grid,
  .process__grid,
  .team__grid,
  .insights__grid {
    grid-template-columns: none !important;
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: clamp(.8rem, .6rem + .8vw, 1.4rem);
    padding-inline: var(--gutter);
    padding-block: 0;
    margin: clamp(.8rem, .6rem + .8vw, 1.4rem) 0 0;
    max-width: 100%;
    border: 0;
    scrollbar-width: none;
    width: 100%;
  }
  .work__grid::-webkit-scrollbar,
  .case__grid::-webkit-scrollbar,
  .sectors__grid::-webkit-scrollbar,
  .process__grid::-webkit-scrollbar,
  .team__grid::-webkit-scrollbar,
  .insights__grid::-webkit-scrollbar { display: none; }

  .work__grid > .work__tile,
  .case__grid > .case__col,
  .sectors__grid > .sectors__cell,
  .process__grid > .process__cell,
  .team__grid > .team__card,
  .insights__grid > .insight {
    flex: 0 0 82vw;
    scroll-snap-align: start;
    box-sizing: border-box;
    padding: clamp(1rem, .8rem + .7vw, 1.5rem);
  }

  /* Per-card content polish on mobile */
  .case__col-title {
    font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem);
    line-height: 1.08;
    max-width: 100%;
  }
  .case__col-body {
    font-size: .94rem;
    line-height: 1.45;
  }
  .case__stats { gap: .55rem .8rem; }
  .case__stat-num {
    font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem);
  }
  .case__stat-label { font-size: .68rem; }

  .sectors__cell .sectors__icon {
    width: 44px; height: 44px;
    margin-top: .3rem;
  }
  .sectors__cell h3 {
    font-size: clamp(1.3rem, 1.05rem + 1.3vw, 1.75rem);
    margin-top: .2rem;
  }
  .sectors__cell p {
    font-size: .94rem;
    line-height: 1.45;
    max-width: 44ch;
  }
  .process__cell .process__icon {
    width: 44px; height: 44px;
    margin-top: .3rem;
    /* Center the SVG inside the box on mobile - was misaligned because
       parent process__cell flexes to column with align-items default
       (stretch). */
    display: grid;
    place-items: center;
  }
  .process__cell .process__icon svg {
    width: 60%; height: 60%;
    display: block;
  }
  .process__cell h3 {
    font-size: clamp(1.3rem, 1.05rem + 1.3vw, 1.75rem);
    margin-top: .2rem;
  }
  .process__cell p {
    font-size: .94rem;
    line-height: 1.45;
    max-width: 44ch;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
  }
  .team__avatar { max-width: 100%; }

  /* Insight cards on mobile - banner stays 16:9 (desktop ratio), accent
     kicker, tight typography. */
  .insights__grid > .insight .insight__media {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .insights__grid > .insight .insight__body {
    display: flex; flex-direction: column;
    gap: .4rem;
  }
  .insights__grid > .insight .kicker {
    color: var(--accent);
    font-size: var(--fs-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .insights__grid > .insight h3 {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, .9rem + .6vw, 1.3rem);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.2;
    color: var(--fg-0);
    max-width: 26ch;
    margin: 0;
  }
  .insights__grid > .insight p {
    color: var(--fg-1);
    font-size: .9rem;
    line-height: 1.45;
    max-width: 40ch;
  }

  /* The "Get more insights" footer-link wrapper - tighter spacing on
     mobile so the CTA sits close to the cards. */
  .insights__foot { padding: clamp(.5rem, .4rem + .3vw, .8rem) var(--gutter) 0; }
  .work__foot     { padding: clamp(.5rem, .4rem + .3vw, .8rem) var(--gutter) 0; }

  /* Contact section on mobile - fit within a single viewport. Title +
     CTA + 4 contact rows (email, phone, whatsapp, office) compressed
     into roughly 100vh by tightening row padding and font sizes. */
  .contact__title { font-size: clamp(1.8rem, 1.4rem + 2.8vw, 3.4rem); line-height: .98; }
  .contact__lede { display: none; }
  .contact__cta { margin-top: .3rem; }
  .contact__rows {
    grid-template-columns: 1fr 1fr !important;
    gap: .4rem .8rem;
    margin-top: .8rem;
  }
  .contact__row {
    padding: .55rem 0;
    gap: .15rem;
  }
  .contact__row .kicker {
    font-size: calc(var(--fs-mono) - .04rem);
  }
  .contact__big {
    font-size: clamp(.92rem, .85rem + .3vw, 1.1rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    word-break: break-word;
  }
  .contact__hint {
    font-size: calc(var(--fs-mono) - .06rem);
  }
}
@media (max-width: 420px) {
  .contact__rows { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   SCROLL PROGRESS BAR (in nav)
   ========================================================================= */
.nav__progress {
  position: absolute;
  left: 0; top: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  transition: transform .12s linear;
  z-index: 1;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 50%, transparent);
}

/* =========================================================================
   CURSOR CELL TRAIL - cells the pointer crossed light up briefly with accent
   ========================================================================= */
/* Cursor halo removed by user request - only the cell trail below remains. */

/* Cell trail - accent rectangles stamped at grid intersections as the cursor
   moves. position: absolute on a body-level container; cells use page coords
   (gy*cell + scrollY) so they "stick" to where the cursor was and scroll
   with the page. */
.cell-trail {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  pointer-events: none;
  z-index: 4;
}
.cell-trail__cell {
  position: absolute;
  left: 0; top: 0;
  width: var(--cell-size, 80px);
  height: var(--cell-size, 80px);
  background: rgba(255, 90, 61, 0.28);
  border: 1.5px solid rgba(255, 90, 61, 0.7);
  box-shadow: 0 0 32px rgba(255, 90, 61, 0.45);
  opacity: 0;
  will-change: opacity, transform;
}
.cell-trail__cell.is-on {
  animation: cell-trail-fade .8s var(--ease-out) forwards;
}
@keyframes cell-trail-fade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}

/* =========================================================================
   BUZZ EASTER EGG - full-bleed flash, no blend modes, impossible to miss
   ========================================================================= */
.buzz-egg-flash {
  position: fixed;
  inset: 0;
  z-index: 99990;                /* above everything including the brief modal */
  pointer-events: none;
  opacity: 0;
  background: rgba(10, 11, 13, 0);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 3vw, 4rem);
  cursor: pointer;
}
.buzz-egg-flash.is-open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(10, 11, 13, 0.86);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: opacity .25s var(--ease-out), background .25s var(--ease-out);
}
.buzz-egg-flash.is-firing {
  animation: buzz-egg-flash 1.5s ease-out 1;
}
.buzz-egg-flash__mark {
  position: relative;
  max-width: 22ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 3.5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: #fff;
  text-shadow:
    0 0 24px rgba(255, 90, 61, .8),
    0 0 48px rgba(255, 90, 61, .5);
  opacity: 0;
  transform: scale(.85);
}
.buzz-egg-flash.is-open .buzz-egg-flash__mark {
  opacity: 1;
  transform: scale(1);
  transition: opacity .35s var(--ease-out) .15s, transform .55s var(--ease-out) .1s;
}
.buzz-egg-flash__hint {
  position: absolute;
  bottom: clamp(1.5rem, 1rem + 1vw, 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-2);
  opacity: 0;
}
.buzz-egg-flash.is-open .buzz-egg-flash__hint {
  opacity: 1;
  transition: opacity .35s var(--ease-out) .5s;
}
@keyframes buzz-egg-flash {
  0%   { background: rgba(10, 11, 13, 0); }
  8%   { background: rgba(255, 255, 255, .92); }    /* white flash */
  18%  { background: rgba(255, 90, 61, .85); }      /* accent dump */
  55%  { background: rgba(10, 11, 13, .86); }
  100% { background: rgba(10, 11, 13, .86); }
}
html.is-buzzing { animation: buzz-egg-shake .5s ease-out 1; }
/* During the egg, fire every em.italic AND the hero buzz at hot speed. */
html.is-buzzing .buzz {
  --buzz-dur: .5s !important;
  --buzz-shake: 9px !important;
  text-shadow: 0 0 32px color-mix(in oklab, var(--accent) 85%, transparent) !important;
}
html.is-buzzing .section-title em.italic,
html.is-buzzing .tenet__head em.italic,
html.is-buzzing .case__col-title em.italic,
html.is-buzzing .team__card h3 em.italic,
html.is-buzzing .footer em.italic {
  animation: buzz-cycle .5s linear 3 !important;
}
/* NOTE: a second @keyframes named buzz-egg-flash used to live here and
   animated opacity 0→1→0. Because CSS keyframe-cascade lets the *last*
   declaration win, it overrode the background-only keyframe above and
   forced the overlay to opacity 0 at the end of the animation - then
   .is-open's `opacity: 1` snapped it back. Result: flash → vanish → pop
   back in. Deleted. The visible-and-stay behaviour now lives entirely
   on `.is-open`; `.is-firing` only animates the background flash. */
@keyframes buzz-egg-shake {
  0%, 100% { transform: translate(0, 0); }
  18%      { transform: translate(-4px, 2px); }
  36%      { transform: translate(4px, -2px); }
  54%      { transform: translate(-2px, 0); }
  72%      { transform: translate(2px, 1px); }
}
@media (prefers-reduced-motion: reduce) {
  html.is-buzzing { animation: none !important; }
  .buzz-egg-flash.is-firing { animation: none !important; }
}

/* =========================================================================
   SECTORS - 3 cells in the same grammar as PROCESS (no per-section borders;
   relies on the global html grid for structure, hover for affordance)
   ========================================================================= */
.sectors {
  position: relative;
  isolation: isolate;
}
.sectors__grid {
  max-width: min(1600px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .sectors__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .sectors__grid { grid-template-columns: 1fr; } }

.sectors__cell {
  display: flex; flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  background: transparent;
  position: relative;
  transition: background var(--dur-1);
  min-height: 18rem;
}
.sectors__cell::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.sectors__cell:hover::after,
.sectors__cell:active::after,
.sectors__cell:focus-visible::after { transform: scaleX(1); }
.sectors__cell:hover,
.sectors__cell:active { background: var(--bg-1); }
.sectors__cell:hover .sectors__icon,
.sectors__cell:active .sectors__icon { color: var(--accent); }

.sectors__cell-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sectors__num { color: var(--accent); }
.sectors__tag { color: var(--fg-2); }

.sectors__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-0);
  opacity: .9;
  margin-top: .4rem;
  transition: color var(--dur-1) var(--ease-out);
}
.sectors__icon svg { width: 100%; height: 100%; }

.sectors__cell h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem);
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--fg-0);
  margin-top: auto;
}
.sectors__cell p {
  font-size: .98rem;
  color: var(--fg-1);
  line-height: 1.5;
  max-width: 38ch;
}