/* ============================================================
   NK · VARIANT B — GLASS
   Warm ember glassmorphism. Frosted tiles refracting a live
   gradient field. Helvetica-family type, mono labels.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Martian+Mono:wght@300;400;500&display=swap');

/* ---------- tokens ------------------------------------------------ */
:root {
  /* never pure black — warm, tinted (refactoring-ui) */
  --ink:        #150b07;
  --ink-2:      #1e0f08;
  --ink-3:      #2b160c;

  --ember:      #ff5c14;
  --ember-lit:  #ff8038;
  --amber:      #ffab5e;
  --amber-pale: #ffd9b3;

  --plum:       #33263f;
  --lavender:   #b3a9c4;

  --paper:      #f3ece6;
  --paper-dim:  #cbbdb2;
  /* these were tuned against flat near-black. now that a lit field sits
     behind everything, the old values dropped under 3:1 — raised so the
     quiet labels stay quiet but remain readable */
  --paper-mute: rgba(243,236,230,.72);
  --paper-faint:rgba(243,236,230,.52);

  /* Glass surfaces, tinted toward ink for the same reason as --g-pane:
     these fills are nearly transparent, so over the lit field they
     simply became the field. Each step up is warmer and denser, which
     is what "lighter on hover" has to mean on a dark system. */
  --g-1:  rgba(32,17,10,.44);
  --g-2:  rgba(52,28,16,.54);
  --g-3:  rgba(72,39,22,.62);
  --g-br: rgba(255,238,226,.16);
  --g-br-lit: rgba(255,175,110,.52);

  /* blur tiers — depth is legible when the frost is not uniform */
  --blur-1: 10px;   /* chips, inputs, small controls  */
  --blur-2: 20px;   /* panels, cards                  */
  --blur-3: 34px;   /* nav, sticky bars, overlays     */
  --sat:    var(--sat-on, 160%);

  /* A lit pane, tinted toward ink rather than toward white.
     Light-tinted glass only works over a dark backdrop; with the
     aurora lit behind every panel, a white tint pushed body copy
     under 3:1. Tinting dark keeps text contrast constant while the
     rim, blur and specular still carry the glass read. Denser at
     the top-left where the light enters, thinner opposite. */
  --g-pane: linear-gradient(142deg,
      rgba(48,26,15,.50) 0%,
      rgba(32,17,10,.44) 38%,
      rgba(24,13,8,.40) 72%,
      rgba(38,20,12,.46) 100%);
  --g-pane-lit: linear-gradient(142deg,
      rgba(66,36,20,.56) 0%,
      rgba(44,24,14,.48) 40%,
      rgba(32,17,10,.44) 74%,
      rgba(70,34,16,.52) 100%);

  /* 1px gradient rim, drawn with mask-composite */
  --g-rim: linear-gradient(142deg,
      rgba(255,248,240,.44) 0%,
      rgba(255,238,226,.13) 34%,
      rgba(255,238,226,.06) 62%,
      rgba(255,178,116,.28) 100%);
  --g-rim-lit: linear-gradient(142deg,
      rgba(255,250,244,.62) 0%,
      rgba(255,196,146,.28) 40%,
      rgba(255,178,116,.22) 68%,
      rgba(255,140,70,.52) 100%);

  /* cast shadow + the dark line glass leaves under its bottom edge */
  --g-shadow:
      0 24px 60px -34px rgba(0,0,0,.86),
      0 2px 10px -6px rgba(0,0,0,.5);

  /* spacing scale: 4 8 12 16 24 32 48 64 96 128 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --pad: clamp(20px, 4vw, 64px);

  /* ---- one measure for the whole site --------------------------------
     --wrap is the content measure; --gut is the left/right inset that
     produces it. Everything that defines a column edge — nav, hero,
     panes, footer, case sections, the work rail — pads by --gut, so
     they all land on the same two vertical lines at any width.
     Previously the nav and hero padded by --pad while .wrap re-centred
     a 1440 cap inside it, which split the page onto two different
     grids above ~1570px.                                              */
  --wrap: 1440px;
  --gut: max(var(--pad), calc((100vw - var(--wrap)) / 2));
  --rad: 26px;
  --rad-sm: 14px;

  --sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Martian Mono', ui-monospace, SFMono-Regular, monospace;

  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.76,0,.24,1);

  --vh: 1vh;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}
body.is-locked { overflow: hidden; height: 100vh; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ember); color: #fff; }

/* visible focus for keyboard users only */
:focus-visible {
  outline: 2px solid var(--ember-lit);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- type -------------------------------------------------- */
.h1 {
  font-weight: 800;
  /* Capped against viewport HEIGHT so the three hero lines always fit
     on short laptop screens — and capped lower than the card can hold,
     because type that reaches the card's edges leaves it no air. */
  font-size: clamp(1.9rem, min(4.6vw, 7vh), 4.4rem);
  line-height: 1.0;
  letter-spacing: -.045em;
}
.h2 {
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.h3 {
  font-weight: 600;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  line-height: 1.16;
  letter-spacing: -.022em;
}
.lead {
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.55;
  max-width: 62ch;               /* 45–75ch */
  color: var(--paper-mute);
}
.mono {
  font-family: var(--mono);
  font-size: clamp(.55rem, .7vw, .69rem);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.em { color: var(--ember-lit); }
.tick { display: inline-flex; align-items: center; gap: .7em; }
.tick::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: .45; }

/* ============================================================
   AMBIENT LAYERS
   ============================================================ */
.grain {
  position: fixed; inset: -50%; z-index: 100; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: overlay;
  animation: grain 7s steps(7) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)}   14%{transform:translate(-3%,2%)}
  28%{transform:translate(2%,-3%)} 42%{transform:translate(-2%,-2%)}
  57%{transform:translate(3%,3%)}  71%{transform:translate(-3%,1%)}
  85%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}
.vignette {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background: radial-gradient(126% 96% at 50% 46%, transparent 48%, rgba(12,6,3,.42) 100%);
}
/* GPU particle field — fixed inside .aurora, so it sits on the gradient
   field and under the page content. The old CPU #dust canvas is gone:
   this supersedes it and costs the main thread nothing. */
#nebula {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* corner registration marks — trionn-style tl/tr/bl/br */
.marks { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.marks i {
  position: absolute; width: 13px; height: 13px; opacity: .5;
  background:
    linear-gradient(var(--paper),var(--paper)) center/100% 1px no-repeat,
    linear-gradient(var(--paper),var(--paper)) center/1px 100% no-repeat;
}
.marks .tl { top: var(--pad); left: var(--pad); }
.marks .tr { top: var(--pad); right: var(--pad); }
.marks .bl { bottom: var(--pad); left: var(--pad); }
.marks .br { bottom: var(--pad); right: var(--pad); }

/* ============================================================
   CURSOR
   ============================================================ */
#cur { position: fixed; top:0; left:0; z-index: 9998; width: 7px; height: 7px; border-radius: 50%;
       background: var(--paper); mix-blend-mode: difference; pointer-events: none; }
#ring { position: fixed; top:0; left:0; z-index: 9997; width: 40px; height: 40px; border-radius: 50%;
        border: 1px solid var(--g-br-lit); pointer-events: none; }
#ring b { position: absolute; inset: 0; display: grid; place-items: center;
          font-family: var(--mono); font-size: .48rem; letter-spacing: .14em; text-transform: uppercase;
          color: var(--amber); opacity: 0; white-space: nowrap; font-weight: 400; }
@media (hover: none), (max-width: 900px) { #cur, #ring { display: none; } }

/* ============================================================
   PRELOADER — slot-reel odometer
   ============================================================ */
#pre {
  position: fixed; inset: 0; z-index: 9999; background: var(--ink);
  display: grid; grid-template-rows: 1fr auto; padding: var(--pad);
}
.pre-card {
  place-self: center;
  width: min(360px, 74vw); aspect-ratio: 4/5;
  border-radius: var(--rad);
  background: var(--g-2);
  border: 1px solid var(--g-br);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  display: grid; place-items: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 30px 80px -30px rgba(0,0,0,.8);
}
.pre-card span { font-weight: 800; font-size: clamp(3.4rem, 11vw, 6.4rem); letter-spacing: -.06em; }
.pre-bg { position: absolute; inset: 0; z-index: -1; }

.pre-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.reel { display: flex; gap: 2px; line-height: 1; }
.reel .slot { overflow: hidden; height: 1em; }
.reel .strip { display: block; will-change: transform; }
.reel .strip i { display: block; height: 1em; font-style: normal; }
.reel { font-weight: 700; font-size: clamp(2.4rem, 7vw, 4.6rem); letter-spacing: -.05em;
        font-variant-numeric: tabular-nums; }
.pre-line { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 5.6rem);
            height: 1px; background: rgba(243,236,230,.14); }
.pre-line i { display: block; height: 100%; width: 0; background: var(--ember); }

.curtain { position: fixed; inset: 0; z-index: 9990; pointer-events: none; display: flex; }
.curtain i { flex: 1; background: var(--ink); transform-origin: bottom; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px,2.2vw,26px) var(--gut);
}
.nav-in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  width: 100%;
  padding: 10px 10px 10px 18px;
  border-radius: 999px;
  background: var(--g-1);
  border: 1px solid var(--g-br);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; font-size: .95rem; }
.brand em { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.brand span { color: var(--paper-mute); font-weight: 400; }
.nav-links { display: flex; align-items: center; gap: clamp(10px,1.8vw,26px); }
/* clone-swap hover (trionn nav pattern) */
.swap { position: relative; display: block; overflow: hidden; height: 1.05em; }
.swap span { display: block; transition: transform .5s var(--ease); }
.swap span + span { position: absolute; top: 100%; left: 0; color: var(--amber); }
.swap:hover span, a:hover > .swap span { transform: translateY(-100%); }
.nav-cta {
  min-height: 40px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; border-radius: 999px;
  background: var(--ember); color: #fff; font-weight: 500;
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.nav-cta:hover { background: var(--ember-lit); }
@media (max-width: 860px) { .nav-hide { display: none; } }

/* ============================================================
   HERO — live gradient field + frosted refracting tile grid
   ============================================================ */
.hero { position: relative; height: calc(var(--vh)*100); min-height: 640px; overflow: hidden; }

/* the tile grid that refracts the field behind it */
.tiles {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--tc, 12), 1fr);
  grid-auto-rows: 1fr;
  pointer-events: none;
}
.tile {
  position: relative;
  background: rgba(255,246,240,.045);
  border: .5px solid rgba(255,240,230,.10);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  will-change: transform, opacity;
}
.tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 55%);
  opacity: .8;
}
/* right half only, like the reference: grid meets the raw field */
.tiles { clip-path: inset(0 0 0 34%); }
@media (max-width: 860px) { .tiles { clip-path: inset(0 0 0 0); --tc: 6; } }

.hero-scrim {
  position: absolute; inset: 0;
  /* was ending at solid --ink, which sealed the bottom of the hero shut.
     It only needs to hold contrast for the card and the foot row, so it
     now fades to transparent and lets the field carry through. */
  background: linear-gradient(180deg,
      rgba(21,11,7,.42) 0%, rgba(21,11,7,.06) 32%,
      rgba(21,11,7,.22) 70%, rgba(21,11,7,.55) 100%);
  pointer-events: none;
}

.hero-in {
  position: relative; z-index: 5; height: 100%;
  padding: calc(var(--pad) * 2.4) var(--gut) var(--pad);
  display: grid; grid-template-rows: 1fr auto; gap: var(--s5);
}

/* the glass hero card, straight off the reference */
.card-hero {
  align-self: center;
  width: min(760px, 100%);
  max-height: 100%;
  padding: clamp(20px, 2.6vw, 40px);
  border-radius: var(--rad);
  /* The one panel that keeps a warm, luminous tint rather than the
     ink-tinted --g-pane. Its type is display-size and bold, so it has
     contrast to spare — and this card is the site's first impression. */
  background: linear-gradient(142deg,
      rgba(255,152,74,.30) 0%,
      rgba(255,104,32,.20) 44%,
      rgba(150,62,26,.24) 100%);
  border: 1px solid rgba(255,196,150,.30);
  /* A 30px blur over a lit field averages it to flat colour, which read
     as a solid orange block next to the translucent slab. Blurring less
     keeps the tile grid and particles faintly legible through the card,
     so both sheets behave like the same material. */
  backdrop-filter: blur(13px) saturate(122%);
  -webkit-backdrop-filter: blur(13px) saturate(122%);
  box-shadow:
    inset 0  1px 0 rgba(255,252,248,.32),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 40px 90px -40px rgba(0,0,0,.85);
}
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s5); margin-bottom: clamp(16px,3.4vh,48px); }
.card-top b { display: block; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.card-top .sub { color: var(--paper-mute); font-size: .88rem; }
.card-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s5); margin-top: clamp(16px,3.4vh,44px); flex-wrap: wrap; }

.hero-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--s5); }
.hero-foot .r { justify-self: end; text-align: right; }

/* scroll cue — a travelling dot down a hairline */
.cue { justify-self: center; display: grid; justify-items: center; gap: 12px;
       color: var(--paper-faint); user-select: none; }
.cue i { position: relative; display: block; width: 1px; height: 56px;
         background: linear-gradient(var(--g-br), transparent); overflow: hidden; }
.cue i::after {
  content: ''; position: absolute; left: -2px; top: 0; width: 5px; height: 5px;
  border-radius: 50%; background: var(--ember);
  animation: cue 2.4s cubic-bezier(.76,0,.24,1) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-6px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}
@media (max-width: 720px) { .cue { display: none; } }

/* ============================================================
   SECTION FRAME
   ============================================================ */
section { position: relative; }
.pane { padding: clamp(90px, 13vh, 180px) var(--gut); }
.pane--lift { background: var(--ink-2); }
.wrap { max-width: var(--wrap); margin-inline: auto; }        /* don't fill the whole width */
.grid { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(16px,2.4vw,40px); }
.c5 { grid-column: 1 / span 5; } .c7 { grid-column: 6 / span 7; } .c12 { grid-column: 1 / -1; }
@media (max-width: 900px) { .c5, .c7 { grid-column: 1 / -1; } }

.slab { display: flex; align-items: center; gap: var(--s4); color: var(--paper-faint); margin-bottom: clamp(26px,4.4vh,54px); }

.reveal-line { display: block; overflow: hidden; }
.reveal-line > * { display: block; will-change: transform; }
.ch { display: inline-block; will-change: transform, opacity; }
.ww { display: inline-block; overflow: hidden; vertical-align: top; }

/* ============================================================
   AMBIENT AURORA — the thing glass refracts
   Fixed behind all content so every panel on every page has
   colour moving underneath it. Without this, backdrop-filter
   blurs flat brown and the frost is invisible.
   ============================================================ */
.aurora {
  /* inset:0 so top/left percentages map straight onto the viewport;
     blobs bleed past the edges, and position:fixed already keeps
     them out of document flow, so nothing needs clipping */
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  /* Base wash, ordinary alpha compositing. This is the no-JS
     fallback: #fieldbg paints over it as soon as the canvas runs. */
  background:
    radial-gradient(72vmax 72vmax at 12% 6%,  rgba(255,92,20,.30),  transparent 62%),
    radial-gradient(58vmax 58vmax at 76% 20%, rgba(255,171,94,.17), transparent 60%),
    radial-gradient(80vmax 80vmax at  8% 58%, rgba(128,72,176,.30), transparent 62%),
    radial-gradient(56vmax 56vmax at 84% 76%, rgba(255,124,52,.20), transparent 60%),
    radial-gradient(66vmax 66vmax at 46% 98%, rgba(92,52,158,.26),  transparent 62%);
}
/* The live gradient field, page-wide.
   Same renderer that drives the hero — 'lighter' compositing over an
   opaque ink fill, which is why it reads as light instead of as a
   dark film. Oversized so the scroll parallax never exposes an edge. */
#fieldbg {
  position: absolute; left: 0; top: -16%;
  width: 100%; height: 132%;
  display: block;
  /* the canvas paints an opaque ink base, so reducing opacity blends
     it back toward body's --ink — muted enough for text to sit on,
     lively enough for the glass to have something to refract */
  opacity: .34;
}

.aurora i {
  position: absolute; z-index: 1; display: block; border-radius: 50%;
  width: var(--s); height: var(--s);
  /* top/left address the blob's CENTRE, not its corner — otherwise
     a 60vmax circle placed at 60% puts its bright core off-screen */
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  will-change: transform;
  /* screen blend so the blobs ADD light to the dark ink instead of
     laying a flat film over it — on a near-black ground a normal
     composite just reads as slightly-less-black */
  mix-blend-mode: screen;
  /* soft-edged colour fields; radial-gradient is far cheaper
     than filter:blur() over an area this size */
  background: radial-gradient(circle at 50% 50%, var(--c) 0%, transparent 70%);
}
.aurora .a1 { --c: rgba(255,92,20,.26);  --s: 78vmax; top:  6%; left: 10%; }
.aurora .a2 { --c: rgba(255,171,94,.18); --s: 60vmax; top: 20%; left: 72%; }
.aurora .a3 { --c: rgba(122,68,168,.24); --s: 84vmax; top: 60%; left: 10%; }
.aurora .a4 { --c: rgba(255,140,70,.18); --s: 56vmax; top: 74%; left: 80%; }
.aurora .a5 { --c: rgba(86,48,150,.22);  --s: 68vmax; top: 96%; left: 44%; }

/* every page section floats above the aurora */
.pane, .phead, .foot, .hero, .case-hero, .csec, .pager, .nf { position: relative; z-index: 1; }

/* the lift band is now a tinted sheet of glass, not an opaque block */
.pane--lift {
  background: linear-gradient(180deg, rgba(30,15,8,.30), rgba(21,11,7,.62));
  backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  border-top: 1px solid rgba(255,238,226,.07);
  border-bottom: 1px solid rgba(255,238,226,.07);
}

/* ============================================================
   GLASS PANEL — lit rim, specular sweep, cursor highlight
   ============================================================ */
.glass {
  position: relative;
  border-radius: var(--rad);
  border: 0;                             /* rim is drawn by ::before */
  background: var(--g-pane);
  backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  box-shadow:
    inset 0  1px 0 rgba(255,252,248,.20),   /* lit top edge      */
    inset 0 -1px 0 rgba(0,0,0,.30),         /* shaded bottom     */
    var(--g-shadow);
  transition: background .55s var(--ease), box-shadow .55s var(--ease),
              transform .55s var(--ease);
  isolation: isolate;
}

/* 1px gradient rim — brightest where the light lands */
.glass::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 1px;
  background: var(--g-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  transition: background .55s var(--ease), opacity .55s var(--ease);
}

/* cursor-tracked specular bloom — the strongest "this is glass" cue */
.glass::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(
    440px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255,236,214,.16), rgba(255,180,120,.06) 42%, transparent 68%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.glass:hover::after, .glass:focus-within::after { opacity: 1; }

a.glass:hover, .glass.hoverable:hover, .glass:focus-within {
  background: var(--g-pane-lit);
  box-shadow:
    inset 0  1px 0 rgba(255,253,250,.30),
    inset 0 -1px 0 rgba(0,0,0,.34),
    0 30px 70px -34px rgba(0,0,0,.9),
    0 0 40px -18px rgba(255,120,50,.5);
}
a.glass:hover::before, .glass.hoverable:hover::before,
.glass:focus-within::before { background: var(--g-rim-lit); }

/* stacked depth: a second pane peeking out behind the first */
.glass.layered { --off: 10px; }
.glass.layered > .under {
  content: ''; position: absolute; z-index: -1;
  inset: var(--off) calc(var(--off) * -1) calc(var(--off) * -1) var(--off);
  border-radius: inherit;
  background: rgba(255,244,236,.035);
  border: 1px solid rgba(255,238,226,.08);
  transition: inset .6s var(--ease);
}
.glass.layered:hover > .under { --off: 15px; }

/* line-draw borders (trionn js-card-line) */
.lined { position: relative; }
.lined .ln { position: absolute; background: var(--g-br); }
.lined .ln.h { height: 1px; left: 0; right: 0; transform: scaleX(0); transform-origin: left; }
.lined .ln.v { width: 1px; top: 0; bottom: 0; transform: scaleY(0); transform-origin: top; }
.lined .ln.t { top: 0 } .lined .ln.b { bottom: 0 } .lined .ln.l { left: 0 } .lined .ln.r { right: 0 }

/* ============================================================
   MARQUEE
   ============================================================ */
.mq { overflow: hidden; white-space: nowrap; padding: clamp(18px,3vh,34px) 0;
      border-block: 1px solid var(--g-br); background: var(--ink-2); }
.mq-track { display: inline-flex; align-items: center; gap: clamp(26px,4vw,72px); will-change: transform; }
.mq-track > span { display: inline-flex; align-items: center; gap: clamp(26px,4vw,72px);
  font-weight: 700; font-size: clamp(1.7rem,4.6vw,4rem); letter-spacing: -.04em; }
.mq-track em { font-style: normal; color: var(--ember); }
.mq-track .d { width: .16em; height: .16em; border-radius: 50%; background: currentColor; opacity: .4; }

/* ============================================================
   VERTICAL WORD COLUMNS  (trionn "Inspire / innovate / Impact")
   ============================================================ */
.cols { height: clamp(420px, 62vh, 680px); overflow: hidden; display: grid;
        grid-template-columns: repeat(4,1fr); gap: clamp(8px,1.4vw,24px);
        -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
                mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.col { overflow: hidden; }
.col-strip { display: grid; gap: clamp(8px,1.4vw,22px); will-change: transform; }
.col-strip span { font-weight: 700; font-size: clamp(1.3rem,2.9vw,2.6rem); letter-spacing: -.035em;
  line-height: 1.05; color: var(--paper-faint); }
.col-strip span.on { color: var(--ember); }
@media (max-width: 720px) { .cols { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   STATS
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: var(--s4);
         margin-top: clamp(40px,6vh,72px); }
.stat { padding: clamp(20px,2.4vw,34px); border-radius: var(--rad-sm); }
.stat .n { font-weight: 700; font-size: clamp(2.4rem,5vw,4rem); letter-spacing: -.045em; line-height: 1;
           font-variant-numeric: tabular-nums; }
.stat .n em { font-style: normal; color: var(--ember-lit); }
.stat .k { margin-top: var(--s3); color: var(--paper-faint); }

/* ============================================================
   WORK — pinned horizontal rail
   ============================================================ */
.rail { height: calc(var(--vh)*100); display: flex; align-items: center; overflow: hidden; }
.rail-track { display: flex; gap: clamp(14px,2vw,32px); padding-inline: var(--gut); will-change: transform; }
.wcard { flex: 0 0 auto; width: clamp(250px,29vw,440px); padding: 12px; border-radius: var(--rad); cursor: pointer; }
.wshot { position: relative; overflow: hidden; border-radius: var(--rad-sm); aspect-ratio: 4/3; background: var(--ink-3); }
.wshot img { width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.8) contrast(1.05); transform: scale(1.07);
  transition: filter .8s var(--ease), transform 1.1s var(--ease); }
.wcard:hover .wshot img { filter: none; transform: scale(1); }
.wshot::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg,transparent 50%, rgba(21,11,7,.72)); }
.widx { position: absolute; top: 12px; left: 14px; z-index: 2; color: var(--amber); }
.wmeta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin: var(--s4) 4px 0; }
.wnote { margin: 6px 4px 8px; color: var(--paper-faint); font-size: .85rem; }
.rail-bar { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(26px,5vh,52px); height: 2px;
            background: var(--g-br); border-radius: 2px; }
.rail-bar i { display: block; height: 100%; width: 0; background: var(--ember); border-radius: 2px; }
@media (max-width: 900px) {
  .rail { height: auto; display: block; padding-bottom: clamp(36px,7vh,72px); }
  .rail-track { flex-direction: column; transform: none !important; }
  .wcard { width: 100%; }
  .rail-bar { display: none; }
}

/* ============================================================
   TAG BAR — the stripes, but they actually filter the work
   ============================================================ */
.tagbar {
  display: flex; align-items: stretch; gap: 4px;
  height: clamp(200px, 30vh, 300px);
  margin-top: clamp(28px, 4vh, 48px);
}
.tag {
  position: relative; flex: 1 1 0; min-width: 44px;
  border: 1px solid var(--g-br);
  border-radius: 16px;
  /* idle tags must stay dark: the old warm tint read as solid ember
     over the lit field, which erased the selected/unselected split */
  background: linear-gradient(180deg, rgba(34,18,11,.42), rgba(22,12,7,.52));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden; cursor: pointer;
  transition: flex-grow .55s var(--ease), background .45s var(--ease),
              border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.tag:hover, .tag:focus-visible {
  flex-grow: 2.1; border-color: var(--g-br-lit);
  background: linear-gradient(180deg, rgba(56,30,17,.50), rgba(38,20,12,.58));
}
.tag[aria-pressed="true"] {
  flex-grow: 2.4;
  background: linear-gradient(180deg, rgba(255,140,60,.62), rgba(255,92,20,.86));
  border-color: rgba(255,150,90,.72);
  box-shadow: 0 14px 44px -18px rgba(255,92,20,.8);
}
/* vertical label, reading bottom-to-top */
.tag .lbl {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: clamp(.55rem,.72vw,.7rem);
  letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap; color: var(--paper);
  transition: color .4s var(--ease);
}
.tag .cnt {
  position: absolute; top: 14px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: .62rem; font-variant-numeric: tabular-nums;
  color: var(--paper-faint); transition: color .4s var(--ease);
}
.tag[aria-pressed="true"] .cnt { color: #fff; }
.tag .fill {
  position: absolute; inset: auto 0 0 0; height: 0%;
  background: linear-gradient(180deg, transparent, rgba(255,92,20,.35));
  transition: height .6s var(--ease); pointer-events: none;
}
.tag:hover .fill { height: 42%; }
.tagbar-note { margin-top: var(--s4); color: var(--paper-faint); }

.wcard.is-out { display: none; }
.rail-empty { padding: var(--s7) var(--gut); color: var(--paper-faint); }

@media (max-width: 760px) {
  .tagbar { flex-wrap: wrap; height: auto; gap: 8px; }
  .tag { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 999px; }
  .tag:hover, .tag[aria-pressed="true"] { flex-grow: 0; }
  .tag .lbl { position: static; transform: none; writing-mode: horizontal-tb;
              display: grid; place-items: center; height: 44px; }
  .tag .cnt { position: static; display: none; }
}

/* ============================================================
   SERVICES — sticky stacked cards
   ============================================================ */
.stack { position: relative; }
.scard {
  position: sticky; top: clamp(90px, 14vh, 150px);
  padding: clamp(24px,3.4vw,52px);
  border-radius: var(--rad);
  margin-bottom: var(--s5);
  transform-origin: top center;
  will-change: transform;
}
.scard .row { display: flex; align-items: baseline; gap: var(--s5); flex-wrap: wrap; }
.scard .n { color: var(--ember-lit); }
.scard p { margin-top: var(--s4); max-width: 58ch; color: var(--paper-mute); }

/* ============================================================
   EXPERIENCE
   ============================================================ */
.xp { border-top: 1px solid var(--g-br); }
.xrow { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--s3) var(--s6);
        align-items: baseline; padding: clamp(18px,2.6vw,30px) clamp(10px,1.6vw,22px);
        border-bottom: 1px solid var(--g-br); border-radius: var(--rad-sm); }
.xrow::before { content:''; position:absolute; inset:0; border-radius: var(--rad-sm);
  background: var(--g-2); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.xrow:hover::before { transform: scaleY(1); transform-origin: top; }
.xrow > * { position: relative; }
.xrole { font-weight: 600; font-size: clamp(1.1rem,2vw,1.7rem); letter-spacing: -.025em; }
.xco { color: var(--paper-faint); margin-top: 4px; }
.xdate { color: var(--paper-faint); text-align: right; white-space: nowrap; }
.chip { display: inline-block; border: 1px solid var(--g-br); border-radius: 999px;
        padding: 3px 10px; margin-left: 10px; vertical-align: middle; color: var(--paper-faint); }

/* ============================================================
   LOGO ROW
   ============================================================ */
.logos { overflow: hidden; }
.logos-track { display: inline-flex; gap: clamp(24px,4vw,64px); align-items: center; will-change: transform; }
.logos-track span { font-weight: 600; font-size: clamp(1rem,1.6vw,1.35rem); letter-spacing: -.02em;
  color: var(--paper-faint); white-space: nowrap; }

/* ============================================================
   CTA + FOOTER (footer revealed from beneath)
   ============================================================ */
.cta { text-align: center; }
.cta .big { display: inline-block; font-weight: 800; letter-spacing: -.05em; line-height: .96;
  font-size: clamp(2.3rem, 8.4vw, 8rem); }
.cta .big em { font-style: normal; color: var(--ember); }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--ember); color: #fff; font-weight: 500;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
  box-shadow: 0 10px 30px -12px rgba(255,92,20,.7);
}
.btn:hover { background: var(--ember-lit); box-shadow: 0 14px 40px -12px rgba(255,92,20,.85); }
.btn.ghost { background: transparent; border: 1px solid var(--g-br); color: var(--paper); box-shadow: none; }
.btn.ghost:hover { border-color: var(--g-br-lit); background: var(--g-1); }

.reveal-foot { position: relative; z-index: 1; }
.foot { position: relative; background: var(--ink-2); padding: clamp(48px,7vh,84px) var(--gut) calc(var(--pad)*.9); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: clamp(24px,3.4vw,52px); }
.fgrid h4 { color: var(--paper-faint); font-weight: 400; margin-bottom: var(--s4); }
.fgrid ul { list-style: none; display: grid; gap: 10px; }
.fgrid a { position: relative; display: inline-block; min-height: 24px; }
.fgrid a::after { content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background: var(--ember);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.fgrid a:hover::after { transform: scaleX(1); transform-origin: left; }
.fmark { margin-top: clamp(44px,8vh,96px); font-weight: 800; font-size: clamp(3.6rem,19vw,17rem);
  line-height: .82; letter-spacing: -.06em; color: transparent;
  -webkit-text-stroke: 1px rgba(243,236,230,.18); }
.fbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--g-br); color: var(--paper-faint); }

/* ============================================================
   CHAPTER MARKERS
   ============================================================ */
.chapters { position: fixed; right: calc(var(--pad) * .55); top: 50%; transform: translateY(-50%);
  z-index: 70; display: grid; gap: 14px; }
.chapters a { display: block; width: 30px; height: 30px; display: grid; place-items: center; } /* 30px hit area */
.chapters i { display: block; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(243,236,230,.28); transition: background .4s var(--ease), transform .4s var(--ease); }
.chapters a.on i { background: var(--ember); transform: scale(1.6); box-shadow: 0 0 12px rgba(255,92,20,.8); }
@media (max-width: 1100px) { .chapters { display: none; } }

/* ============================================================
   FULLSCREEN MENU
   ============================================================ */
#menu { position: fixed; inset: 0; z-index: 950; background: var(--ink); display: grid;
  grid-template-rows: 1fr auto; padding: calc(var(--pad)*2.6) var(--gut) var(--pad);
  clip-path: inset(0 0 100% 0); pointer-events: none; }
#menu.open { pointer-events: auto; }
.mlinks { align-self: center; display: grid; gap: clamp(6px,1.4vh,16px); }
.mlinks a { font-weight: 700; font-size: clamp(2.2rem,8vw,6rem); letter-spacing: -.045em; line-height: 1; }
.mlinks .reveal-line > * { display: inline-block; }
.mfoot { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; color: var(--paper-faint); }
.burger { min-width: 44px; min-height: 40px; display: grid; place-items: center; gap: 5px; }
.burger i { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
.burger.x i:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger.x i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
@media (min-width: 861px) { .burger { display: none; } }

/* ============================================================
   MOTION SENSITIVITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .grain { display: none; }
  .tile { backdrop-filter: blur(16px); }
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* page transition curtain -------------------------------------------- */
#trans {
  position: fixed; inset: 0; z-index: 9500; pointer-events: none;
  background: var(--ink);
  clip-path: inset(0 0 100% 0);
  display: grid; place-items: center;
}
#trans span {
  font-weight: 800; font-size: clamp(2rem,6vw,4.5rem); letter-spacing: -.05em;
  opacity: 0;
}

/* page header (every page except home) ------------------------------- */
.phead {
  position: relative; overflow: hidden;
  padding: calc(var(--pad) * 3.4) var(--gut) clamp(48px,7vh,96px);
  background: transparent;
}
.phead .field-sm { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.phead .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,11,7,.55), rgba(21,11,7,.12) 55%, transparent);
}
.phead .wrap { position: relative; z-index: 2; }
.phead h1 { font-weight: 800; letter-spacing: -.045em; line-height: .98;
            font-size: clamp(2.4rem, 7vw, 6rem); }
.phead h1 em { font-style: normal; color: var(--ember); }
.phead .lead { margin-top: clamp(18px,2.6vh,30px); }

/* breadcrumb / index counter */
.crumb { display: flex; align-items: center; gap: 12px; color: var(--paper-faint);
         margin-bottom: clamp(20px,3vh,34px); }
.crumb a:hover { color: var(--paper); }

/* nav active state ---------------------------------------------------- */
.nav-links a[aria-current="page"] { color: var(--amber); }
.nav-links a[aria-current="page"] .swap span + span { color: var(--amber); }
.mlinks a[aria-current="page"] { color: var(--ember); }

/* WORK GRID (dedicated /work page) ------------------------------------ */
.wgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(32px,5vh,60px);
}
.wgrid .wcard { width: auto; flex: none; }
.wgrid .wcard.is-out { display: none; }
.wcount { margin-top: var(--s5); color: var(--paper-faint); }

/* PROCESS steps -------------------------------------------------------- */
.steps { display: grid; gap: var(--s4); margin-top: clamp(32px,5vh,60px); }
.step { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px,3vw,44px);
        padding: clamp(20px,2.6vw,36px); border-radius: var(--rad); align-items: start; }
.step .n { color: var(--ember-lit); padding-top: .45em; }
.step h3 { font-weight: 600; font-size: clamp(1.15rem,1.9vw,1.6rem); letter-spacing: -.022em; }
.step p { margin-top: 10px; color: var(--paper-mute); max-width: 62ch; }

/* CAPABILITY CHIPS ----------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px,4vh,44px); }
.chips span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--g-br); background: var(--g-1);
  color: var(--paper-mute);
  transition: border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.chips span:hover { border-color: var(--g-br-lit); color: var(--paper); background: var(--g-2); }

/* CONTACT -------------------------------------------------------------- */
.ccards { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
          gap: var(--s4); margin-top: clamp(32px,5vh,56px); }
.ccard { padding: clamp(20px,2.4vw,32px); border-radius: var(--rad); display: block; }
.ccard h4 { color: var(--paper-faint); font-weight: 400; margin-bottom: 12px; }
.ccard .v { font-weight: 600; font-size: clamp(1rem,1.5vw,1.25rem); letter-spacing: -.02em;
            word-break: break-word; }
.ccard .m { margin-top: 8px; color: var(--paper-faint); }

.form { display: grid; gap: var(--s4); margin-top: clamp(32px,5vh,56px); max-width: 680px; }
.field { display: grid; gap: 8px; }
.field label { color: var(--paper-faint); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 14px 16px;
  border-radius: var(--rad-sm); border: 1px solid var(--g-br);
  background: var(--g-1); color: var(--paper);
  font: inherit; font-size: 1rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: rgba(243,236,230,.3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--g-br-lit); background: var(--g-2);
}
.field :focus-visible { outline: 2px solid var(--ember-lit); outline-offset: 2px; }
.field .err { color: #ff9a72; min-height: 1.2em; }
.form-note { color: var(--paper-faint); }

/* 404 ------------------------------------------------------------------ */
.nf { min-height: calc(var(--vh)*100); display: grid; place-items: center;
      padding: var(--gut); position: relative; overflow: hidden; }
.nf .inner { position: relative; z-index: 2; text-align: center;
             padding: clamp(32px,5vw,64px); border-radius: var(--rad); }
.nf .big { font-weight: 800; font-size: clamp(4rem,18vw,12rem); line-height: .9;
           letter-spacing: -.06em; color: var(--ember); }

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */

/* hero cover ---------------------------------------------------------- */
.case-hero { position: relative; overflow: hidden;
             padding: calc(var(--pad) * 3.2) var(--gut) 0; background: transparent; }
.case-hero .fieldcv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.case-hero .scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,11,7,.58), rgba(21,11,7,.14) 55%, transparent); }
.case-hero .wrap { position: relative; z-index: 2; }
.case-hero h1 { font-weight: 800; letter-spacing: -.048em; line-height: .96;
                font-size: clamp(2.4rem, 7.6vw, 6.4rem); }
.case-sum { margin-top: clamp(16px,2.4vh,26px); }

.disc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(22px,3.4vh,40px); }
.disc span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--g-br); background: var(--g-1);
  color: var(--paper-mute); }

/* cover image ---------------------------------------------------------- */
.cover {
  position: relative; z-index: 2; margin-top: clamp(36px,6vh,72px);
  border-radius: var(--rad); overflow: hidden; border: 1px solid var(--g-br);
  aspect-ratio: 16 / 9; background: var(--ink-3);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .cover { aspect-ratio: 4 / 3; } }

/* meta grid ------------------------------------------------------------ */
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
        gap: 1px; background: var(--g-br); border: 1px solid var(--g-br);
        border-radius: var(--rad); overflow: hidden; margin-top: clamp(32px,5vh,60px); }
.meta div { background: var(--ink); padding: clamp(18px,2.2vw,28px); }
.meta dt { color: var(--paper-faint); margin-bottom: 10px; }
.meta dd { font-weight: 600; font-size: clamp(.95rem,1.3vw,1.1rem); letter-spacing: -.015em; }


/* full-bleed showcase -------------------------------------------------- */
.showcase { position: relative; overflow: hidden; margin-block: clamp(60px,10vh,140px);
            height: clamp(320px, 62vh, 720px); }
.showcase img { width: 100%; height: 130%; object-fit: cover; will-change: transform; }
.showcase figcaption { position: absolute; inset: auto var(--gut) var(--pad) var(--gut);
  color: var(--paper-mute); }
.showcase::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(21,11,7,.85)); }

/* gallery -------------------------------------------------------------- */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,380px),1fr));
       gap: clamp(14px,2vw,24px); margin-top: clamp(32px,5vh,60px); }
.gal figure { border-radius: var(--rad-sm); overflow: hidden; border: 1px solid var(--g-br);
              background: var(--ink-3); }
.gal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
           transition: transform 1s var(--ease); }
.gal figure:hover img { transform: scale(1.04); }
.gal .wide { grid-column: span 2; }
@media (max-width: 820px) { .gal .wide { grid-column: span 1; } }

/* pull quote ----------------------------------------------------------- */
.pull { padding: clamp(28px,4vw,60px); border-radius: var(--rad);
        margin-top: clamp(40px,6vh,80px); }
.pull p { font-weight: 600; letter-spacing: -.03em; line-height: 1.18;
          font-size: clamp(1.4rem,3vw,2.4rem); max-width: 26ch; }
.pull .who { margin-top: var(--s5); color: var(--paper-faint); }

/* prev / next ---------------------------------------------------------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
         padding: clamp(50px,8vh,110px) var(--gut); border-top: 1px solid var(--g-br); }
.pager a { padding: clamp(20px,2.6vw,36px); border-radius: var(--rad); display: block; }
.pager .k { color: var(--paper-faint); margin-bottom: 12px; display: block; }
.pager .t { font-weight: 700; letter-spacing: -.03em;
            font-size: clamp(1.2rem,2.6vw,2.1rem); line-height: 1.08; }
.pager .next { text-align: right; }
@media (max-width: 700px) { .pager { grid-template-columns: 1fr; } .pager .next { text-align: left; } }

/* sticky in-page nav on long case studies ------------------------------ */
.casebar { position: sticky; top: clamp(74px, 9vh, 98px); z-index: 80;
  border-radius: 999px; margin-inline: var(--gut);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(21,11,7,.72); border: 1px solid var(--g-br);
  padding: 12px var(--gut); display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-top: clamp(40px,6vh,80px); }
.casebar .who { color: var(--paper-mute); }
.casebar a { color: var(--amber); }
@media (max-width: 700px) { .casebar { display: none; } }

/* ============================================================
   CASE STUDY — long-form narrative
   ============================================================ */

/* sticky section nav --------------------------------------------------- */
.casenav {
  position: sticky; top: clamp(74px, 9vh, 98px); z-index: 80;
  margin: clamp(30px,4vh,52px) auto 0; width: max-content; max-width: calc(100% - var(--gut) * 2);
  display: flex; gap: 2px; padding: 6px;
  border-radius: 999px; border: 1px solid var(--g-br);
  background: rgba(21,11,7,.72);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  overflow-x: auto; scrollbar-width: none;
}
.casenav::-webkit-scrollbar { display: none; }
.casenav a {
  white-space: nowrap; min-height: 38px; display: inline-flex; align-items: center;
  padding: 0 16px; border-radius: 999px; color: var(--paper-mute);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.casenav a:hover { color: var(--paper); }
.casenav a.on { background: var(--ember); color: #fff; }
@media (max-width: 700px) { .casenav { top: 68px; } }

/* section shell --------------------------------------------------------- */
.csec { padding: clamp(64px,11vh,150px) var(--gut); }
.csec-label { color: var(--ember-lit); margin-bottom: var(--s5); }
.csec h2 {
  font-weight: 700; letter-spacing: -.038em; line-height: 1.02;
  font-size: clamp(1.9rem, 4.6vw, 3.8rem);
}
.csec-lead {
  margin-top: clamp(16px,2.4vh,28px);
  font-weight: 500; letter-spacing: -.025em; line-height: 1.2;
  font-size: clamp(1.25rem, 2.6vw, 2.1rem); max-width: 24ch;
  color: var(--paper);
}
.csec-lead.wide { max-width: 34ch; }

/* two-column body + callout --------------------------------------------- */
.ctwo { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(20px,3vw,56px);
        margin-top: clamp(34px,5vh,64px); align-items: start; }
.ctwo .body { grid-column: 1 / span 6; display: grid; gap: var(--s4); }
.ctwo .side { grid-column: 8 / span 5; }
@media (max-width: 900px) { .ctwo .body, .ctwo .side { grid-column: 1 / -1; } }
.cbody p { color: var(--paper-mute); font-size: clamp(1rem,1.25vw,1.12rem); line-height: 1.6; max-width: 60ch; }

/* callout card ----------------------------------------------------------- */
.callout { padding: clamp(24px,2.8vw,40px); border-radius: var(--rad); }
.callout .pill {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px;
  border-radius: 999px; background: rgba(255,92,20,.18); border: 1px solid rgba(255,140,80,.4);
  color: var(--amber); margin-bottom: var(--s4);
}
.callout h3 { font-weight: 600; letter-spacing: -.028em; line-height: 1.12;
              font-size: clamp(1.2rem,2.1vw,1.7rem); }
.callout p { margin-top: var(--s3); color: var(--paper-mute); }

/* observation cards ------------------------------------------------------ */
.obs { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
       gap: var(--s4); margin-top: clamp(32px,5vh,60px); }
.obs > div { padding: clamp(20px,2.4vw,32px); border-radius: var(--rad); }
.obs h4 { font-weight: 600; font-size: clamp(1.02rem,1.5vw,1.22rem); letter-spacing: -.02em; }
.obs p { margin-top: var(--s3); color: var(--paper-mute); }

/* findings rows ---------------------------------------------------------- */
.finds { margin-top: clamp(36px,6vh,72px); border-top: 1px solid var(--g-br); }
.find { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(16px,3vw,48px);
        padding: clamp(24px,3.2vw,44px) 0; border-bottom: 1px solid var(--g-br); }
.find .k { grid-column: 1 / span 3; color: var(--ember-lit); }
.find .t { grid-column: 4 / span 5; font-weight: 600; letter-spacing: -.025em; line-height: 1.14;
           font-size: clamp(1.1rem,1.9vw,1.55rem); }
.find .d { grid-column: 9 / span 4; color: var(--paper-mute); }
@media (max-width: 900px) {
  .find { grid-template-columns: 1fr; gap: 10px; }
  .find .k, .find .t, .find .d { grid-column: 1 / -1; }
}

/* key insight ------------------------------------------------------------ */
.insight { padding: clamp(32px,5vw,80px); border-radius: var(--rad);
           margin-top: clamp(36px,6vh,72px); }
.insight blockquote { font-weight: 600; letter-spacing: -.032em; line-height: 1.14;
  font-size: clamp(1.45rem,3.4vw,2.8rem); max-width: 22ch; }
.insight blockquote::before { content: '“'; color: var(--ember); }
.insight blockquote::after { content: '”'; color: var(--ember); }
.insight .after { margin-top: clamp(24px,3.4vh,40px); display: grid; gap: var(--s4); max-width: 62ch; }
.insight .after p { color: var(--paper-mute); }

/* design decision -------------------------------------------------------- */
.decision { margin-top: clamp(48px,8vh,110px); }
.decision .pill {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px;
  border-radius: 999px; background: var(--g-2); border: 1px solid var(--g-br);
  color: var(--amber); margin-bottom: var(--s4);
}
.decision h3 { font-weight: 700; letter-spacing: -.032em; line-height: 1.06;
               font-size: clamp(1.5rem,3.2vw,2.6rem); }
.decision .sub { margin-top: var(--s3); color: var(--paper-mute);
                 font-size: clamp(1rem,1.4vw,1.2rem); max-width: 52ch; }
.decision .cbody { margin-top: clamp(22px,3vh,36px); display: grid; gap: var(--s4); }

/* image slot — real screen if supplied, quiet placeholder if not ---------- */
.shot { margin-top: clamp(26px,4vh,52px); border-radius: var(--rad); overflow: hidden;
        border: 1px solid var(--g-br); background: var(--ink-2); }
.shot img { width: 100%; height: auto; display: block; }
.shot.empty { aspect-ratio: 16/9; display: grid; place-items: center; color: var(--paper-faint);
  background:
    repeating-linear-gradient(135deg, rgba(255,238,226,.028) 0 12px, transparent 12px 24px),
    var(--ink-2);
}

/* ============================================================
   EXPERIENCE PAGE — roles, education, certificates, languages
   ============================================================ */

/* role rows with expandable detail ------------------------------------- */
.xrow.has-detail { cursor: pointer; }
.xrow .xhead { display: grid; grid-template-columns: 1fr auto; gap: var(--s3) var(--s6);
               align-items: baseline; width: 100%; }
.xmeta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; color: var(--paper-faint); }
.xdetail { grid-column: 1 / -1; overflow: hidden; height: 0; }
.xdetail ul { list-style: none; display: grid; gap: 8px; padding: var(--s4) 0 var(--s2); max-width: 66ch; }
.xdetail li { position: relative; padding-left: 20px; color: var(--paper-mute); }
.xdetail li::before { content: ''; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ember); }
.xtoggle { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--g-br);
  color: var(--paper-mute); margin-left: 12px; flex: none;
  transition: transform .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease); }
.xrow[data-open] .xtoggle { transform: rotate(45deg); border-color: var(--g-br-lit); color: var(--amber); }

/* education ------------------------------------------------------------- */
.edu { display: grid; gap: var(--s4); margin-top: clamp(28px,4vh,52px); }
.edu > div { padding: clamp(20px,2.4vw,32px); border-radius: var(--rad);
             display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: baseline; }
.edu h3 { font-weight: 600; font-size: clamp(1.05rem,1.7vw,1.35rem); letter-spacing: -.02em; }
.edu .d { color: var(--paper-mute); margin-top: 6px; }
.edu .y { color: var(--paper-faint); white-space: nowrap; }
@media (max-width: 640px) { .edu > div { grid-template-columns: 1fr; } }

/* certificate groups ---------------------------------------------------- */
.certbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(26px,4vh,44px); }
.certbar button {
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--g-br); background: var(--g-1); color: var(--paper-mute);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.certbar button:hover { color: var(--paper); border-color: var(--g-br-lit); }
.certbar button[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); color: #fff; }
.certbar button i { font-style: normal; opacity: .7; font-variant-numeric: tabular-nums; }

.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,300px),1fr));
         gap: var(--s3); margin-top: clamp(26px,4vh,44px); }
.cert { padding: clamp(16px,1.8vw,22px); border-radius: var(--rad-sm); display: grid; gap: 8px;
        align-content: start; }
.cert.is-out { display: none; }
.cert h4 { font-weight: 500; font-size: .98rem; line-height: 1.28; letter-spacing: -.012em; }
.cert .by { color: var(--amber); }
.cert .on { color: var(--paper-faint); }

/* languages ------------------------------------------------------------- */
.langs { display: grid; gap: var(--s4); margin-top: clamp(28px,4vh,52px);
         grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.lang { padding: clamp(20px,2.4vw,30px); border-radius: var(--rad); }
.lang h3 { font-weight: 600; font-size: clamp(1.1rem,1.8vw,1.4rem); letter-spacing: -.02em; }
.lang .lvl { color: var(--paper-mute); margin-top: 6px; }
.lang .bar { margin-top: var(--s4); height: 4px; border-radius: 4px; background: var(--g-br); overflow: hidden; }
.lang .bar i { display: block; height: 100%; width: 0; border-radius: 4px;
               background: linear-gradient(90deg, var(--ember), var(--amber)); }

/* ============================================================
   GLASS, EVERYWHERE ELSE
   Surfaces that were opaque or plain-bordered, refitted onto
   the same lit-rim recipe at the right blur tier.
   ============================================================ */

/* --- tier 3: things pinned above the scroll ------------------------- */
.nav-in, .casenav, .casebar {
  backdrop-filter: blur(var(--blur-3)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-3)) saturate(var(--sat));
}
.nav-in {
  /* Deliberately a DARK glass, not the light --g-pane. The bar floats
     over case-study screenshots that are mostly white, and a light
     tint put white nav text on a white ground. Tinting toward ink
     keeps the label contrast constant whatever scrolls underneath. */
  background: linear-gradient(142deg, rgba(52,28,16,.70), rgba(21,11,7,.62));
  box-shadow: inset 0 1px 0 rgba(255,252,248,.20), 0 18px 44px -30px rgba(0,0,0,.9);
}
.casenav, .casebar { background: linear-gradient(142deg, rgba(40,20,10,.72), rgba(21,11,7,.62)); }

/* --- tier 1: small controls ----------------------------------------- */
.chips span, .certbar button, .disc span, .tag,
.field input, .field textarea, .field select, .chip, .xtoggle {
  backdrop-filter: blur(var(--blur-1)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,252,248,.12);
}
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow: inset 0 1px 0 rgba(255,252,248,.2), 0 0 0 3px rgba(255,92,20,.14);
}

/* --- meta grid: was opaque ink, now frosted cells -------------------- */
.meta { background: rgba(255,238,226,.10); border-color: transparent; }
.meta div {
  background: var(--g-pane);
  backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  box-shadow: inset 0 1px 0 rgba(255,252,248,.14);
}

/* --- image frames sit in glass mounts -------------------------------- */
.cover, .shot, .gal figure, .wshot {
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255,244,236,.16),
    0 26px 60px -36px rgba(0,0,0,.9);
}
.shot.empty, .wshot { background: rgba(255,244,236,.045); backdrop-filter: blur(var(--blur-1)); }

/* --- marquee bands become light-catching strips ---------------------- */
.mq {
  background: linear-gradient(180deg, rgba(255,244,236,.075), rgba(255,244,236,.02));
  backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  border-top: 1px solid rgba(255,248,240,.16);
  border-bottom: 1px solid rgba(0,0,0,.3);
}

/* --- experience rows fill with glass on hover ------------------------ */
.xrow::before {
  background: var(--g-pane);
  backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  box-shadow: inset 0 1px 0 rgba(255,252,248,.16);
}
.xrow[data-open]::before { transform: scaleY(1); transform-origin: top; }

/* --- footer floats rather than sits --------------------------------- */
.foot {
  background: linear-gradient(180deg, rgba(30,15,8,.52), rgba(21,11,7,.78));
  backdrop-filter: blur(var(--blur-3)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-3)) saturate(var(--sat));
  border-top: 1px solid rgba(255,248,240,.14);
}

/* --- fullscreen menu is frosted, not solid --------------------------- */
#menu {
  background: linear-gradient(160deg, rgba(38,19,10,.86), rgba(21,11,7,.92));
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
}

/* --- tagbar rail ------------------------------------------------------ */
.tagbar {
  backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  box-shadow: inset 0 1px 0 rgba(255,252,248,.14), var(--g-shadow);
}

/* --- ghost button picks up the frost --------------------------------- */
.btn.ghost {
  background: var(--g-pane);
  backdrop-filter: blur(var(--blur-1)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,252,248,.18);
}

/* ============================================================
   PERFORMANCE + MOTION GUARDS
   backdrop-filter is cheap once and expensive fifty times.
   Below 860px we keep the frost only where it carries meaning
   (pinned chrome) and fall back to flat translucency elsewhere.
   ============================================================ */
@media (max-width: 860px) {
  :root { --blur-2: 14px; --blur-3: 22px; }
  .glass, .meta div, .mq, .xrow::before, .pane--lift {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(36,19,11,.78);
  }
  .glass { box-shadow: inset 0 1px 0 rgba(255,252,248,.16), var(--g-shadow); }
  .aurora i { opacity: .48; }
  .aurora .a2, .aurora .a4 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none !important; transform: none !important; }
  #nebula { opacity: .55; }
  .glass::after { display: none; }
}

/* Firefox < 103 and anything else without backdrop-filter still needs
   readable panels, so give them opacity instead of frost. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .nav-in, .meta div, .foot, .mq, .pane--lift, #menu {
    background: rgba(44,24,14,.82);
  }
}

/* ============================================================
   PROJECT CARD — skewed gradient slab
   Ported from a React/Tailwind "gradient card showcase". Three
   things in the reference could not come across as-is:

   1. it animated `padding` from 20/40 to 60/40 on hover, which
      reflows the card and changes its height — in a grid of 24
      cards that shoves every neighbour on every mouse-over.
      The same read is achieved here with transform, which the
      compositor handles and which cannot affect layout.
   2. it hard-coded 320x400 per card; these are fluid.
   3. its two blob sprites ran an infinite keyframe animation on
      every card whether hovered or not — 48 always-on animations
      on the work page. Dropped; the slab carries the effect.

   The gradient itself now encodes the project's category (see
   TAG_GRADIENT in build.py) instead of being arbitrary.
   ============================================================ */

/* Named .gslab, not .slab: .slab is already the section
   eyebrow label ('Services', 'Process'). Reusing the name made every
   label on the site position:absolute with z-index:-1 and vanish.
   The gradient has to paint *behind* the card's own glass fill, which
   means .wcard must not open a stacking context of its own */
.wcard { isolation: auto; }

.gslab {
  position: absolute; inset: 8% 12%;
  z-index: -1; pointer-events: none;
  display: block;
}
.gslab::before, .gslab::after {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--rad);
  background: linear-gradient(315deg, var(--gf, #ff8a3d), var(--gt, #8b4ad0));
  transform: skewX(14deg) scale(.88);
  transition: transform .65s var(--ease), opacity .65s var(--ease);
  will-change: transform;
}
.gslab::before { opacity: .40; }
/* the blurred twin is the colour bleed around the card */
.gslab::after  { opacity: .45; filter: blur(28px); }

.wcard:hover .gslab::before,
.wcard:focus-visible .gslab::before { transform: skewX(0deg) scale(1.03); opacity: .72; }
.wcard:hover .gslab::after,
.wcard:focus-visible .gslab::after  { transform: skewX(0deg) scale(1.10); opacity: .85; }

/* lift the card itself rather than re-padding it */
.wcard { transition: transform .6s var(--ease), background .55s var(--ease), box-shadow .55s var(--ease); }
.wcard:hover { transform: translateY(-6px); }

@media (max-width: 860px) {
  /* a 28px blur behind every card is the single most expensive thing
     on the page at this size — keep the slab, drop the bleed */
  .gslab::after { display: none; }
  .gslab::before { opacity: .5; transform: skewX(10deg) scale(.92); }
  .wcard:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gslab::before, .gslab::after { transform: skewX(10deg) scale(.9); }
  .wcard:hover { transform: none; }
}

/* ============================================================
   HERO CARD — the same slab, tuned for a panel nobody hovers
   The project cards reveal their slab on hover. The hero is not
   a link you point at, so here the slab is a permanent part of
   the composition: it sits skewed behind the card, reads on both
   sides, and breathes on a long cycle instead of waiting for an
   interaction that may never come.
   ============================================================ */
.card-hero { position: relative; }

.hero-slab { inset: -5% -8%; }

/* ONE slab, not two. The blurred twin used on the project cards was
   reading as a third rounded rectangle here rather than as glow —
   at hero scale a 38px blur is still small enough to keep an edge,
   so the eye counted three boxes. The bloom is now an edgeless
   radial wash on the parent, which adds light without adding shape. */
.hero-slab {
  background: radial-gradient(60% 60% at 30% 40%,
              rgba(255,120,50,.20), transparent 70%);
}
.hero-slab::after { content: none; }

.hero-slab::before {
  border-radius: calc(var(--rad) * 1.2);
  /* Tinted glass, not a coloured card: low alpha in the stops
     themselves rather than one flat opacity, so the field and the
     particles behind it stay visible through the sheet. */
  background: linear-gradient(315deg,
      rgba(255,92,20,.30) 0%,
      rgba(190,80,90,.20) 48%,
      rgba(122,68,168,.28) 100%);
  border: 1px solid rgba(255,220,200,.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1;
  transform: skewX(-11deg) scale(.95);
  animation: heroSlab 18s var(--ease) infinite;
}

@keyframes heroSlab {
  0%, 100% { transform: skewX(-11deg) scale(.94); }
  50%      { transform: skewX(-6deg)  scale(.99); }
}

/* the card carries one link, so still reward pointing at it */
.card-hero:hover .hero-slab::before { border-color: rgba(255,230,210,.3); }

@media (max-width: 860px) {
  .hero-slab { inset: -3% -5%; }
  .hero-slab::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slab::before { animation: none; }
}