/* ===========================================================
   Bram Lettenmeijer — Portfolio  ·  v8
   Expanded grotesque · bone + off-black · orange accent · lilac glow
   Floating cursor-reactive glow (all pages) · soft section seams
   rounded corners · "More" cursor · fade page transitions · lightbox
   =========================================================== */

:root {
  --ink:        #0c0c0c;
  --ink-2:      #16150f;
  --paper:      #f2efe9;
  --paper-2:    #ece8df;
  --paper-3:    #fbfaf6;
  --muted:      #6b665c;
  --muted-dk:   rgba(242,239,233,.64);
  --muted-soft: rgba(12,12,12,.26);
  --line:       #ddd7ca;
  --line-dk:    rgba(242,239,233,.14);
  --heat:       #ff4d1c;   /* orange — text, buttons, cursor, chips */
  --heat-deep:  #d6360c;
  --heat-ink:   #0c0c0c;
  --glow-1:     #b06bff;   /* bright lilac — the moving glow */
  --glow-2:     #cf9bff;   /* lighter lilac */

  --maxw: 1480px;
  --gutter: clamp(22px, 5vw, 88px);
  --r: 14px;               /* rounded corners */
  --r-sm: 10px;

  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;   /* labels share the sans (cohesive with the grotesque) */

  /* frosted-glass tile (reused across logos, results, metrics) */
  --glass-bg: rgba(255,255,255,.42);
  --glass-border: rgba(255,255,255,.65);
  --glass-shadow: 0 16px 40px rgba(70,40,120,.08), inset 0 1px 0 rgba(255,255,255,.6);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);   /* slight overshoot — liquid/bouncy */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; }
::selection { background: var(--heat); color: var(--heat-ink); }

/* ---------- Floating lilac glow — sits behind all content, every page ---------- */
.glow-field { position: fixed; inset: -14vmax; z-index: -1; pointer-events: none; overflow: hidden; will-change: transform; }
.g-orb { position: absolute; border-radius: 50%; filter: blur(110px); will-change: transform; }
.g-orb.a { width: 60vmax; height: 60vmax; top: -12%; left: -6%; background: radial-gradient(circle, rgba(168,92,255,.78), transparent 62%); animation: float-a 16s ease-in-out infinite alternate; }
.g-orb.b { width: 50vmax; height: 50vmax; bottom: -14%; right: -8%; background: radial-gradient(circle, rgba(207,140,255,.66), transparent 60%); animation: float-b 20s ease-in-out infinite alternate; }
.g-orb.c { width: 40vmax; height: 40vmax; top: 38%; left: 48%; background: radial-gradient(circle, rgba(150,80,255,.58), transparent 58%); animation: float-c 24s ease-in-out infinite alternate; }
@keyframes float-a { from { transform: translate(0,0) scale(1); } to { transform: translate(52vw, 22vh) scale(1.28); } }
@keyframes float-b { from { transform: translate(0,0) scale(1); } to { transform: translate(-46vw, -16vh) scale(1.32); } }
@keyframes float-c { from { transform: translate(0,0) scale(.9); } to { transform: translate(-34vw, 26vh) scale(1.2); } }
/* on the dark hero the same glow reads vivid; on bone it reads as a soft drifting wash */

/* ---------- Film grain ---------- */
.grain-layer {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.62; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.35s steps(1) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,     0   ); }
  25%  { transform: translate(-6px,  5px ); }
  50%  { transform: translate( 5px, -6px ); }
  75%  { transform: translate(-4px, -5px ); }
}
@media (prefers-reduced-motion: reduce) { .grain-layer { animation: none; } }

/* ---------- Custom "More" cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9600; pointer-events: none;
  width: 72px; height: 72px; border-radius: 50%; background: var(--heat);
  display: grid; place-items: center; transform: translate(-50%, -50%);
  will-change: transform, width, height; opacity: 0;
  transition: width .35s var(--ease), height .35s var(--ease), background .3s ease, opacity .3s ease;
}
.cursor.ready { opacity: 1; }
.cursor .cursor-label {
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: 11px; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--heat-ink); opacity: 1; transform: scale(1);
  transition: opacity .25s ease, transform .35s var(--ease); white-space: nowrap;
}
.cursor.is-active { width: 88px; height: 88px; }
.cursor.is-active .cursor-label { opacity: 1; transform: scale(1); }
.cursor.is-hide { opacity: 0; }
html.no-customcursor .cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [data-cursor] { cursor: none; }
}

/* ---------- Page-transition (fade) ---------- */
.page-fx {
  position: fixed; inset: 0; z-index: 9400; pointer-events: none;
  background: radial-gradient(120% 120% at 70% 30%, var(--heat) 0%, var(--heat-deep) 55%, #a51d08 100%);
  opacity: 0; visibility: hidden; will-change: opacity;
  /* centre the message inside the overlay */
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 6vw, 80px);
}
.page-fx-msg {
  /* plain block so words wrap as normal text */
  display: block;
  max-width: min(90vw, 1300px);
  text-align: center;
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(44px, 10vw, 150px);
  line-height: 0.92; letter-spacing: -0.04em;
  color: var(--ink);
}
.page-fx-msg .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  animation: word-in 0.3s ease-out forwards;
}
@keyframes word-in { to { opacity: 1; transform: none; } }
/* Page-wipe runs as a CSS animation on opacity → composited (smooth even while the
   incoming page is initialising). Inbound cover is triggered by an inline <head>
   script so the page paints already covered (no flash of the new page first). */
html.pagefx-out .page-fx { visibility: visible; animation: pagefx-cover .3s ease-in forwards; }
html.pagefx-in  .page-fx { visibility: visible; animation: pagefx-reveal .65s .18s ease-out both; }
@keyframes pagefx-cover  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pagefx-reveal { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.pagefx-out .page-fx, html.pagefx-in .page-fx { animation: none; }
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(62px, 8vw, 118px); }
/* inner pages: first section needs extra top room to clear the floating nav pills */
main > .section:first-of-type { padding-top: clamp(124px, 15vh, 172px); }
.panel-dark { background: var(--ink); color: var(--paper); }

.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--heat);
  margin-bottom: 26px;
}
.on-dark .kicker { color: var(--heat); }

.lead { font-size: clamp(19px, 2vw, 24px); color: var(--muted); max-width: 52ch; line-height: 1.5; }
.on-dark .lead { color: var(--muted-dk); }

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 125%;
  line-height: .92; letter-spacing: -0.02em; text-wrap: balance;
}
/* Heading hierarchy — clear steps. The hero H1 (below) is the biggest on the site. */
h1 { font-size: clamp(52px, 8vw, 120px); font-weight: 900; letter-spacing: -0.04em; }
h2 { font-size: clamp(28px, 4vw, 56px); }
h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 800; font-stretch: 110%; letter-spacing: -0.01em; }
/* phones: keep long heading words (e.g. "campaigns") inside the gutter */
@media (max-width: 480px) { h1 { font-size: clamp(39px, 12vw, 52px); } }

/* frosted-glass tile utility */
.glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: var(--glass-shadow); }
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--paper-3); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.heat { color: var(--heat); }
.outline { color: transparent; -webkit-text-stroke: 1.6px var(--ink); }
.on-dark .outline { -webkit-text-stroke-color: var(--paper); }

/* ---------- Buttons (pill) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: 13px;
  letter-spacing: 0.01em; text-transform: none; padding: 18px 30px;
  border-radius: 100px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer; white-space: nowrap; will-change: transform;
}
.btn:active { transform: scale(.97); }
.btn--accent { background: var(--glow-1); border-color: var(--glow-1); color: var(--ink); }   /* primary = LILAC at rest */
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(242,239,233,.4); }
/* Dark + ghost buttons glow lilac on hover (matching the background glow) */
.btn:hover, .btn--ghost:hover, .btn--ghost-light:hover {
  background: var(--glow-1); border-color: var(--glow-1); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .1s ease;
}
/* Accent (the "Selected work" primary) is reversed: lilac at rest, ORANGE on hover */
.btn--accent:hover { background: var(--heat); border-color: var(--heat); color: var(--heat-ink); }
.btn .arrow {
  display: inline-block;
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%;
  color: var(--heat);
  animation: arrow-nudge 2s ease-in-out infinite;
}
/* On hover: freeze nudge, shift right — rotation baked in so it stays pointing right */
.btn:hover .arrow { animation: none; transform: translateX(8px) rotate(-90deg); }
/* Accent ("Selected work") arrow: black at rest for contrast on the lilac button, lilac on hover */
.btn--accent .arrow { color: var(--ink); }
.btn--accent:hover .arrow { color: var(--glow-1); }
/* translateX first (screen space), then rotate so the V always faces right */
@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0)   rotate(-90deg); }
  50%       { transform: translateX(5px) rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .btn .arrow { animation: none; transform: rotate(-90deg); } }

/* ===========================================================
   Header / Nav — orange-text active (no underline stripe)
   =========================================================== */
/* Floating liquid-glass nav — TWO separate frosted pills (logo + links),
   spanning the site content width so they line up with the rest of the page */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding-block: clamp(12px, 1.7vw, 22px);
  pointer-events: none;            /* only the pills are interactive */
}
.top-blur { display: none; }       /* retired: replaced by the floating glass pills */
/* .nav keeps its .wrap sizing (max 1480 + gutter) so the pills align to the content edges */
.nav {
  pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: auto; transform-origin: top center;
}
/* shared frosted-glass pill */
.brand, .nav-links {
  pointer-events: auto;
  background: rgba(255,255,255,.36);
  -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 100px;
  box-shadow:
    0 16px 44px rgba(70,40,120,.15),
    inset 0 1.5px 0 rgba(255,255,255,.9),
    inset 0 -10px 22px rgba(255,255,255,.14),
    inset 0 1px 12px rgba(255,255,255,.45);
  transition: background .45s ease, box-shadow .45s ease;
}
/* firm the pills up a touch as the page scrolls */
.site-header.scrolled .brand, .site-header.scrolled .nav-links {
  background: rgba(255,255,255,.52);
  box-shadow: 0 12px 34px rgba(70,40,120,.2), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -10px 22px rgba(255,255,255,.2), inset 0 1px 12px rgba(255,255,255,.5);
}
@media (prefers-reduced-transparency: reduce) {
  .brand, .nav-links { background: var(--paper-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* when the dark full-screen menu is open, the brand + toggle must read light */
body.menu-open .brand, body.menu-open .nav-toggle { color: var(--ink); }
.brand {
  display: inline-flex; align-items: center; padding: 19px 28px; z-index: 210;
  font-family: var(--font-display); font-size: 20px; font-weight: 900; font-stretch: 125%;
  letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; color: var(--ink);
  transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.brand:hover { transition: transform .1s ease; }
.brand small { display: none; }   /* tagline hidden in the pill for a clean single-line lockup */
.nav-links { display: flex; gap: 30px; align-items: center; list-style: none; padding: 15px 30px; }
.nav-links a {
  font-family: var(--font-display); font-size: 13px; font-weight: 900; font-stretch: 125%; letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 0; color: currentColor;
  transition: color .25s ease, transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--heat); transition: color .25s ease, transform .1s ease; }
body.dark-hero .site-header:not(.scrolled) { color: var(--paper); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; flex-direction: column; justify-content: center; gap: 6px; z-index: 210; padding: 0; }
.nav-toggle span { width: 28px; height: 2px; background: currentColor; transition: .4s var(--ease); margin-left: auto; }
.nav-toggle span:nth-child(2) { width: 18px; }

@media (max-width: 880px) {
  /* the toggle becomes its own little glass pill on the right */
  .nav-toggle {
    display: flex; pointer-events: auto; width: auto; height: auto; padding: 20px 18px; gap: 6px; color: var(--ink);
    background: rgba(255,255,255,.36); border-radius: 100px; border: 1px solid rgba(255,255,255,.58);
    -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
    box-shadow: 0 16px 44px rgba(70,40,120,.15), inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 1px 12px rgba(255,255,255,.45);
  }
  .nav-toggle span { width: 24px; }
  .nav-links {
    position: fixed; inset: 0; z-index: 195; flex-direction: column; gap: 0;
    justify-content: center; align-items: flex-start; padding: 12vh var(--gutter);
    background: rgba(242,239,233,.55); color: var(--ink);
    -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
    border: 0; border-radius: 0; box-shadow: none;
    transform: translateY(-101%); opacity: 0; pointer-events: none;
    transition: transform .6s var(--ease), opacity .35s ease;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links li { width: 100%; border-top: 1px solid rgba(12,12,12,.16); }
  .nav-links li:last-child { border-bottom: 1px solid rgba(12,12,12,.16); }
  .nav-links a {
    display: flex; align-items: center; gap: 16px; width: 100%; color: var(--ink);
    font-family: var(--font-display); font-weight: 900; font-stretch: 108%; font-size: clamp(30px, 8vw, 46px);
    letter-spacing: -0.02em; line-height: 1.05; text-transform: uppercase; padding: 18px 0;
    opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s var(--ease), color .2s ease;
  }
  .nav-links.open a { opacity: 1; transform: none; }
  .nav-links.open li:nth-child(1) a { transition-delay: .10s; }
  .nav-links.open li:nth-child(2) a { transition-delay: .17s; }
  .nav-links.open li:nth-child(3) a { transition-delay: .24s; }
  .nav-links.open li:nth-child(4) a { transition-delay: .31s; }
  .nav-links a::before { content: attr(data-num); font-family: var(--font-sans); font-size: 13px; font-stretch:100%; letter-spacing: .1em; color: var(--heat); align-self: center; }
  .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--heat); }
  body.menu-open { overflow: hidden; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); width: 28px; }
}

/* ===========================================================
   Full-screen hero (dark) with its own vivid lilac glow
   =========================================================== */
.hero {
  position: relative; min-height: 82svh; display: flex; align-items: center;
  overflow: hidden; background: transparent; color: var(--ink);
  padding-block: clamp(120px, 15vh, 156px) clamp(36px, 5vw, 64px);
}
.hero-bg { position: absolute; inset: -15%; z-index: 0; pointer-events: none; will-change: transform; }

@media (prefers-reduced-motion: no-preference) { .hm-1 { animation: float-c 26s ease-in-out infinite alternate; } .hm-2 { animation: float-a 30s ease-in-out infinite alternate; } }
.orb { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; }
.orb-1 { width: 72vw; height: 72vw; top: -18%; right: -10%; background: radial-gradient(circle, rgba(176,107,255,.92), transparent 60%); animation: drift1 12s ease-in-out infinite alternate; }
.orb-2 { width: 60vw; height: 60vw; bottom: -24%; left: -12%; background: radial-gradient(circle, rgba(255,77,180,.6), transparent 58%); animation: drift2 15s ease-in-out infinite alternate; }
.orb-3 { width: 46vw; height: 46vw; top: 24%; left: 30%; background: radial-gradient(circle, rgba(120,70,255,.7), transparent 58%); animation: drift3 10s ease-in-out infinite alternate; }
.orb-4 { width: 40vw; height: 40vw; bottom: 6%; right: 18%; background: radial-gradient(circle, rgba(207,155,255,.6), transparent 60%); animation: drift1 18s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { from { transform: translate(-14%, -4%) scale(1); } to { transform: translate(20%, 16%) scale(1.34); } }
@keyframes drift2 { from { transform: translate(12%, 4%) scale(1.05); } to { transform: translate(-22%, -14%) scale(1.4); } }
@keyframes drift3 { from { transform: translate(0, 0) scale(.9); } to { transform: translate(-24%, 18%) scale(1.3); } }

.hero > .wrap { position: relative; z-index: 2; width: 100%; }
.hero h1 { color: var(--ink); margin: 0; max-width: 16ch; font-size: clamp(56px, 10vw, 148px); line-height: .88; }
.hero .hero-foot { display: flex; justify-content: flex-start; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 64px); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-tag { font-family: var(--font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.hero-tag::before { content: ""; width: 8px; height: 8px; background: var(--heat); border-radius: 50%; box-shadow: 0 0 0 0 rgba(255,77,28,.6); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,28,.55);} 70%{ box-shadow:0 0 0 11px rgba(255,77,28,0);} 100%{ box-shadow:0 0 0 0 rgba(255,77,28,0);} }

/* Clip-reveal headline lines */
.js .reveal-line { overflow: hidden; padding-bottom: .08em; }
.js .reveal-line > span { display: block; transform: translateY(110%); transition: transform 1.05s var(--ease); }
.js .reveal-line.in > span { transform: translateY(0); }

/* Scroll cue — desktop-only V that bobs and fades orange→lilac */
.scroll-cue {
  display: none;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(94px, 12.5vw, 203px);
  line-height: 0.75;
  text-decoration: none;
  color: var(--heat);
  will-change: transform, color;
  user-select: none;
  overflow: visible;
  animation: scroll-cue-move 2.5s ease-in-out infinite, scroll-cue-color 5s ease-in-out infinite;
}
@media (min-width: 1200px) {
  .tagline-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 60px); }
  .scroll-cue { display: block; }
}
@keyframes scroll-cue-move {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(14px); }
}
@keyframes scroll-cue-color {
  0%, 100% { color: var(--heat); }
  50%       { color: var(--glow-1); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; transform: none; }
}

/* Tagline band — sits between hero CTAs and stats */
.tagline-band { padding-block: 0; }
.tagline-statement {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(34px, 5.4vw, 86px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Hero wordmark variant — "BRAM." as a massive centered display mark */
.hero--wordmark { text-align: center; min-height: 0; padding-block: clamp(80px, 10vh, 120px); }
.hero--wordmark .hero-cta .btn { padding: 22px 38px; }
.hero--wordmark > .wrap { display: flex; flex-direction: column; align-items: center; }
.hero--wordmark h1 {
  font-size: clamp(72px, 22vw, 320px);
  max-width: none;
  line-height: .88;
  letter-spacing: -0.04em;
  width: 100vw; /* full-bleed: flex centering offsets the wrap's padding */
}
.hero--wordmark .hero-foot { justify-content: center; }
.hero--wordmark .hero-cta { justify-content: center; flex-direction: column; align-items: stretch; }
.hero--wordmark .hero-cta .btn { justify-content: space-between; }
@media (min-width: 600px) {
  .hero--wordmark .hero-cta { flex-direction: row; align-items: center; }
  .hero--wordmark .hero-cta .btn { justify-content: center; }
}
@media (max-width: 560px) {
  /* trim the oversized hero CTAs on phones */
  .hero--wordmark .hero-cta { gap: 11px; }
  .hero--wordmark .hero-cta .btn { padding: 16px 26px; font-size: 12.5px; }
  /* push wordmark down, tighten gap to tagline below */
  .hero--wordmark { padding-block-start: clamp(100px, 13vh, 130px); padding-block-end: clamp(36px, 6vh, 56px); }
}
.svc-cta .btn { padding: 22px 38px; }

/* (hero now self-fades via mask-image; no separate seam element) */

/* ===========================================================
   Stats — now light/bone (no black bar), big numbers
   =========================================================== */
.stats { background: transparent; color: var(--ink); position: relative; }
.stats .wrap { padding-block: clamp(20px, 3vw, 50px) clamp(56px, 7vw, 100px); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.stat { position: relative; padding: clamp(24px, 2.8vw, 40px); border-radius: 22px; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); text-decoration: none; color: inherit; }
/* lift-shadow lives on a pseudo so we fade opacity (cheap/composited) instead of
   animating box-shadow itself (repaints the backdrop-blur every frame → jank) */
.stat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 24px 56px rgba(70,40,120,.2); opacity: 0; transition: opacity .4s ease; pointer-events: none; z-index: -1; }
a.stat:hover::after { opacity: 1; }
.stat .num { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; line-height: .86; font-size: clamp(48px, 6.6vw, 100px); letter-spacing: -0.04em; color: var(--ink); }
.stat .num .heat { color: var(--heat); }
.stat .label { margin-top: 20px; font-family: var(--font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.count, .stat .num, .metric .big, .rn { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
@media (max-width: 680px) { .stats-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ===========================================================
   Brand logo strip — even, contrasty, "& many more" below
   =========================================================== */
.brands { background: transparent; }
.brands .wrap { padding-block: clamp(12px, 2vw, 30px) clamp(52px, 7vw, 96px); }
.brands-title { text-align: center; font-family: var(--font-sans); font-size: 12px; letter-spacing: .2em; font-weight: 600; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(36px,4vw,56px); }
.brand-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 1.4vw, 20px); }
.brand-cell {
  flex: 0 1 calc(20% - 17px);
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(108px, 11vw, 152px); padding: clamp(16px, 2vw, 30px);
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.65); border-radius: 22px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(70,40,120,.08), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .4s var(--ease), box-shadow .4s ease;
  text-decoration: none; color: inherit;
}
.brand-cell:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(70,40,120,.14), inset 0 1px 0 rgba(255,255,255,.6); }
/* Normalized single-ink logos (pre-processed, transparent) — no filters/blend hacks.
   Each is given its own optical height/width so they read at a balanced weight. */
.brand-cell .lg { width: auto; height: auto; object-fit: contain; opacity: .72; transition: opacity .3s ease, transform .3s var(--ease); }
.brand-cell:hover .lg { opacity: 1; transform: scale(1.04); }
.lg-porsche { max-height: clamp(15px, 1.8vw, 23px); max-width: 96%; }
.lg-vw      { max-height: clamp(50px, 5.4vw, 70px); max-width: 72%; }
.lg-rabo    { max-height: clamp(58px, 6.6vw, 86px); max-width: 80%; }
.lg-dldk    { max-height: clamp(46px, 5.2vw, 64px); max-width: 84%; }
.lg-nv      { max-height: clamp(36px, 4.2vw, 50px); max-width: 94%; }
.lg-bnn     { max-height: clamp(26px, 3.1vw, 40px); max-width: 84%; }
.lg-dentsu  { max-height: clamp(54px, 6.2vw, 82px); max-width: 68%; }
.lg-fd      { max-height: clamp(50px, 5.6vw, 74px); max-width: 64%; }
.lg-prime   { max-height: clamp(38px, 4.4vw, 56px); max-width: 86%; }
.lg-ea      { max-height: clamp(46px, 5.2vw, 68px); max-width: 72%; }
.brand-more { text-align: center; margin-top: clamp(30px,4vw,48px); font-family: var(--font-sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .brand-cell { flex-basis: calc(33.333% - 14px); } }
@media (max-width: 560px) { .brand-cell { flex-basis: calc(50% - 8px); min-height: 96px; } }

/* ===========================================================
   Manifesto — word-by-word scroll reveal
   =========================================================== */
.manifesto .wrap { padding-block: clamp(24px, 3.5vw, 52px); }
.manifesto .kicker { margin-bottom: 24px; }
.manifesto-text { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: clamp(34px, 5.4vw, 86px); line-height: 1.08; letter-spacing: -0.02em; max-width: 20ch; }
.manifesto-text .word { color: var(--muted-soft); transition: color .5s var(--ease); }
.manifesto-text .word.lit { color: var(--ink); }
.manifesto-text .word.hot.lit { color: var(--heat); }
.no-gsap .manifesto-text .word { color: var(--ink); }
.no-gsap .manifesto-text .word.hot { color: var(--heat); }

/* ===========================================================
   Work Index
   =========================================================== */
.windex { border-top: 1px solid var(--line); }
.windex-row {
  position: relative; display: grid; grid-template-columns: 1fr auto auto; gap: clamp(16px, 3vw, 48px);
  align-items: center; padding-block: clamp(26px, 3.4vw, 50px); border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease), color .35s ease;
}
.windex-row .wx-name { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(30px, 5.6vw, 92px); line-height: .96; letter-spacing: -0.03em; text-transform: uppercase; transition: color .3s ease; }
.windex-row .wx-disc { font-family: var(--font-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.windex-row .wx-chip { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--heat-ink); background: var(--heat); padding: 8px 12px; border-radius: 100px; white-space: nowrap; }
@media (hover: hover) and (min-width: 861px) {
  .windex:hover .windex-row { color: var(--muted-soft); }
  .windex:hover .windex-row:hover { color: var(--ink); }
  .windex:hover .windex-row .wx-name { color: inherit; }
  .windex .windex-row:hover { padding-left: 24px; }
}
.windex-preview {
  position: fixed; top: 0; left: 0; width: 340px; height: 430px; z-index: 120; pointer-events: none; opacity: 0;
  border-radius: var(--r); overflow: hidden; transform: translate(-50%, -50%) scale(.92);
  transition: opacity .35s var(--ease), transform .35s var(--ease); box-shadow: 0 40px 90px rgba(0,0,0,.4); will-change: transform, opacity;
}
.windex-preview.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.windex-preview img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; filter: grayscale(1) contrast(1.05); }
.windex-preview img.active { opacity: 1; }
.wx-thumb { display: none; }
@media (max-width: 860px) {
  .windex-row { grid-template-columns: 1fr; gap: 14px; padding-block: 28px; }
  .windex-row .wx-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--r); }
  .windex-row .wx-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
  .windex-row .wx-meta-m { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
}

/* ===========================================================
   Section head + featured work cards
   =========================================================== */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: clamp(44px, 5vw, 72px); flex-wrap: wrap; }
.sec-head h2 { line-height: .94; }

.feature-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.feature-sub { display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (max-width: 820px) { .feature-grid { grid-template-columns: 1fr; } }
.work-card { position: relative; overflow: hidden; background: var(--ink); border-radius: var(--r); display: block; transition: transform .5s var(--ease); min-height: 300px; }
.work-card.tall { min-height: 100%; }
.work-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; filter: grayscale(1) contrast(1.06); opacity: .82; transition: transform .7s var(--ease), opacity .4s ease, filter .5s ease; }
.work-card:hover { transform: translateY(-5px); }
.work-card:hover img { transform: scale(1.06); opacity: .6; filter: grayscale(.3) contrast(1.05); }
.work-card .result-chip { position: absolute; top: 16px; left: 16px; z-index: 3; background: var(--heat); color: var(--heat-ink); font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 12px; border-radius: 100px; }
.work-card .work-meta { position: absolute; inset: auto 0 0 0; padding: 28px; color: var(--paper); z-index: 2; background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.2) 60%, transparent); }
.work-card .work-meta h3 { color: var(--paper); margin-bottom: 6px; }
.work-card .work-meta span { font-family: var(--font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--heat); }

/* ===========================================================
   Services — editorial numbered list
   =========================================================== */
.svc-panel { padding: clamp(28px, 4vw, 64px) clamp(24px, 4vw, 60px); border-radius: 28px;
  background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.svc-panel .sec-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.svc-list { border-top: 1px solid var(--line); }
.svc-panel .svc-row:last-child { border-bottom: none; }
.svc-row { display: grid; grid-template-columns: auto 1fr 1.4fr; gap: clamp(20px, 4vw, 70px); align-items: baseline; padding: clamp(34px, 4.4vw, 60px) clamp(8px, 1vw, 16px); border-bottom: 1px solid var(--line); border-radius: 20px; position: relative;
  transition: border-color .35s ease; }
/* glass panel + shadow on a pseudo so hover fades opacity (cheap/composited) instead
   of animating padding (layout reflow) + box-shadow/backdrop-filter (repaint) → jank */
.svc-row::before { content: ""; position: absolute; inset: 0 -14px; border-radius: 20px; background: var(--glass-bg); -webkit-backdrop-filter: blur(14px) saturate(145%); backdrop-filter: blur(14px) saturate(145%); box-shadow: var(--glass-shadow); opacity: 0; transition: opacity .45s ease; z-index: -1; pointer-events: none; }
.svc-row:hover { border-bottom-color: transparent; }
.svc-row:hover::before { opacity: 1; }
.svc-row > * { transition: transform .5s var(--ease), color .4s ease; }
.svc-row:hover > * { transform: translateX(12px); }
.svc-row .svc-num { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(28px, 3.6vw, 60px); color: var(--heat); line-height: 1; }
.svc-row:hover .svc-num { color: var(--glow-1); }
.svc-row h3 { font-weight: 800; }
.svc-row p { color: var(--muted); font-size: 16px; max-width: 52ch; }
@media (max-width: 760px) { .svc-row { grid-template-columns: auto 1fr; gap: 16px 22px; } .svc-row p { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  /* tighter, more even rhythm for the services panel on phones */
  .svc-panel { padding: clamp(22px, 6vw, 34px) clamp(18px, 5vw, 26px); }
  .svc-panel .sec-head { margin-bottom: 22px; }
  .svc-row { padding: 26px clamp(2px, 1.4vw, 8px); gap: 12px 18px; }
  .svc-row:hover { padding-left: clamp(2px, 1.4vw, 8px); padding-right: clamp(2px, 1.4vw, 8px); }
  .svc-row p { margin-top: 4px; }
}

/* ===========================================================
   Case studies (portfolio) — aligned, portrait video, light metric
   =========================================================== */
.case { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 84px); align-items: center; padding-block: clamp(48px, 6vw, 88px); }
.case-body, .case-media { min-width: 0; }
.case + .case { border-top: 1px solid var(--line); }
.case.flip .case-media { order: 2; }
.case.wide { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 48px); }
.case-media { border-radius: var(--r); overflow: hidden; background: transparent; position: relative; }
.case-media img, .case-media video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r); }
/* vertical 9:16 social videos shown in full (no crop) */
.case-media.vertical { aspect-ratio: 9 / 16; max-width: 360px; margin-inline: auto; background: var(--ink); }
/* standalone feature videos (Porsche, DLDK 2024) sit larger in their column */
.case > .case-media.vertical { max-width: 460px; }
.case-media.vertical video { object-fit: cover; }
.case-media.landscape { aspect-ratio: 4 / 3; }
.case.wide .case-media { aspect-ratio: 16/8; }
.case-body .case-label { font-family: var(--font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--heat); margin-top: 6px; font-weight: 600; }
.case-body h2 { margin: 14px 0 10px; font-size: clamp(32px, 4.4vw, 68px); }
.case-body .case-meta { font-family: var(--font-sans); font-size: 13px; color: var(--muted); margin-bottom: 20px; letter-spacing: .02em; }
.case-body p { color: var(--muted); }
.case-body .clients-line { font-size: 15px; color: var(--muted); margin-top: 16px; }
.case-body .clients-line strong { color: var(--ink); font-weight: 700; }

/* metric — frosted glass tile */
.metric { margin-top: 30px; padding: clamp(24px, 3vw, 38px); border-radius: 22px; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.metric .result-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--heat); }
.metric .big { font-family: var(--font-display); font-weight: 900; font-stretch: 110%; font-size: clamp(30px, 4vw, 60px); line-height: 1.0; color: var(--ink); letter-spacing: -0.03em; }
.metric .big .count { color: var(--heat); }
.metric .cap { font-family: var(--font-sans); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }

.growth { margin-top: 22px; max-width: 460px; }
.growth-track { position: relative; height: 6px; border-radius: 100px; background: rgba(12,12,12,.1); overflow: hidden; }
.growth-fill { position: absolute; inset: 0 auto 0 0; width: 14%; border-radius: 100px; background: var(--heat); transition: width 1.7s var(--ease); }
.growth.go .growth-fill { width: 100%; }
.growth-ends { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.growth-ends b { color: var(--heat); font-weight: 700; }

/* multi-video row (show more content per case) */
.media-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(28px,4vw,52px); }
.media-row .case-media.vertical { max-width: 100%; margin: 0; aspect-ratio: 9 / 16; }
@media (max-width: 760px) { .media-row { grid-template-columns: 1fr 1fr; } }

/* video + poster pair, 4:5 (Nightvision) */
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(28px,4vw,52px); }
.media-pair.trio { grid-template-columns: 1fr 1fr 1fr; }
.case.wide .media-pair .case-media { max-width: 100%; margin: 0; aspect-ratio: 4 / 5; background: var(--ink); }
.media-pair .case-media.contain img, .media-pair .case-media.contain video { object-fit: contain; }
@media (max-width: 760px) { .media-pair.trio { grid-template-columns: 1fr 1fr; } }
/* Tablet: the lone 3rd tile spans the row and centers (one-column width) instead of orphaning left */
@media (max-width: 760px) and (min-width: 561px) { .media-pair.trio .case-media:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(6px, 0.8vw, 11px)); } }
@media (max-width: 560px) { .media-pair, .media-pair.trio { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } }

/* tall 9:16 email gallery (ADE) */
.case-gallery.tall { grid-template-columns: 1fr 1fr; max-width: 760px; }
.case-gallery.tall img { aspect-ratio: 9 / 16; }
.case-gallery.tall .gallery-caption { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.5; text-align: center; }

/* thumbnails + galleries (clickable → lightbox) */
.case-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.case-thumbs img { width: 100%; min-width: 0; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); filter: grayscale(1) contrast(1.05); transition: filter .4s ease, transform .4s ease; }
.case-thumbs img:hover { filter: grayscale(0); transform: scale(1.04); }
.case-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: transparent; }
.case-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }

/* results-at-a-glance strip */
.results-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,1.6vw,22px); margin-top: clamp(44px,5vw,72px); }
.results-strip .r { padding: clamp(22px,2.6vw,34px); border-radius: 20px; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.results-strip .r .rn { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(40px,5vw,76px); letter-spacing: -0.03em; line-height: .9; }
.results-strip .r .rn .heat { color: var(--heat); }
.results-strip .r .rl { font-family: var(--font-sans); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 12px; line-height: 1.5; }
@media (max-width: 760px) { .results-strip { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }

/* Collection head — glass chapter-break card */
.collection-head { margin: clamp(50px,6vw,90px) 0 clamp(30px,4vw,52px); max-width: none; padding: clamp(28px,3.5vw,48px) clamp(28px,4vw,56px); border-radius: var(--r); background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 10px clamp(40px,6vw,100px); align-items: center; }
.collection-head .kicker { grid-column: 1 / -1; margin-bottom: 4px; }
.collection-head h2 { margin: 0; font-size: clamp(26px,3.2vw,48px); }
.collection-head p { color: var(--muted); max-width: 52ch; margin: 0; font-size: clamp(15px,1.5vw,18px); line-height: 1.65; align-self: end; }
@media (max-width: 760px) { .collection-head { grid-template-columns: 1fr; gap: 14px; } }

/* Auto-number each case: 01, 02 … across whole page */
main { counter-reset: case-num; position: relative; z-index: 2; }
article.case { counter-increment: case-num; }
article.case .case-label::before { content: counter(case-num, decimal-leading-zero) " \00B7 "; opacity: .45; font-weight: 500; letter-spacing: .06em; }

@media (max-width: 760px) { .case { grid-template-columns: 1fr; } .case .case-body { order: -1; } .case.flip .case-media { order: 0; } .case.flip .dldk-showcase { order: 0; } .case-media.vertical { max-width: 300px; } }

/* DLDK showcase — big TikTok portrait + small side thumbnails */
.dldk-showcase { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; align-items: start; }
.dldk-showcase > .case-media.vertical { max-width: 100%; margin: 0; }
.dldk-showcase > .case-thumbs { margin: 0; grid-template-columns: 1fr 1fr; }
.case.flip .dldk-showcase { order: 2; }
@media (max-width: 760px) { .dldk-showcase { grid-template-columns: 1fr 1fr; max-width: 460px; margin-inline: auto; } }

/* Secondary stat pills (Porsche — 600K visitors / 4× Reels) */
.stat-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.stat-pill { padding: clamp(16px,2vw,22px); border-radius: 16px; background: rgba(12,12,12,.04); border: 1px solid var(--line); }
.stat-pill .sp-n { font-family: var(--font-display); font-weight: 900; font-stretch: 110%; font-size: clamp(26px,3.2vw,48px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.stat-pill .sp-n .heat { color: var(--heat); }
.stat-pill .sp-l { font-family: var(--font-sans); font-size: 12px; letter-spacing: .01em; text-transform: none; font-weight: 500; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* Stacked growth bars (Rabobank — Instagram + TikTok) */
.growth-stack { display: flex; flex-direction: column; gap: 20px; margin-top: 22px; max-width: 460px; }
.growth-stack .growth { margin: 0; }
.growth-platform { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.growth-platform .plat { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(12,12,12,.07); margin-right: 5px; }

/* Metric footnote (DLDK) */
.metric-note { margin-top: 14px; font-family: var(--font-sans); font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ===========================================================
   Lightbox (expand gallery/email images)
   =========================================================== */
.lightbox { position: fixed; inset: 0; z-index: 9300; display: flex; align-items: center; justify-content: center; padding: clamp(20px,5vw,72px); background: rgba(10,10,10,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); box-shadow: 0 30px 90px rgba(0,0,0,.6); transform: scale(.96); transition: transform .35s var(--ease); }
.lightbox.open img { transform: scale(1); }
.lightbox-close { position: absolute; top: clamp(18px,3vw,36px); right: clamp(18px,3vw,36px); width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(242,239,233,.4); background: transparent; color: var(--paper); font-size: 22px; cursor: pointer; display: grid; place-items: center; transition: background .25s ease, color .25s ease; }
.lightbox-close:hover { background: var(--heat); border-color: var(--heat); color: var(--heat-ink); }

/* ===========================================================
   About
   =========================================================== */
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(34px, 6vw, 90px); align-items: start; }
.about-grid > * { min-width: 0; }
.about-portrait { border-radius: var(--r); overflow: hidden; position: relative; }
.about-portrait img { width: 100%; filter: grayscale(1) contrast(1.08); border-radius: var(--r); }
/* this heading lives in the narrower right column, so it needs a smaller fluid size
   than the full-width h1 — otherwise the longest word ("campaigns") overflows */
.about-body h1 { font-size: clamp(40px, 6vw, 80px); }
.about-body p { margin-bottom: 24px; color: var(--muted); font-size: 19px; }
.about-body p strong { color: var(--ink); font-weight: 700; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-portrait { max-width: 420px; } }
/* Mobile about: lift the portrait closer to the header, and give it more breathing room above the intro text */
@media (max-width: 560px) { .about-intro { padding-block-start: 88px; } .about-grid { gap: 52px; } }

/* ===========================================================
   Contact (details only)
   =========================================================== */
.contact-lite { max-width: 980px; }
.contact-lite .contact-detail { display: flex; align-items: baseline; gap: clamp(16px, 2vw, 28px); padding-block: clamp(22px,2.6vw,34px); border-top: 1px solid var(--line); margin-bottom: 0; }
.contact-lite .contact-detail:last-child { border-bottom: 1px solid var(--line); }
.contact-detail .label { font-family: var(--font-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; flex-shrink: 0; }
.contact-detail a, .contact-detail p { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: clamp(28px, 4.5vw, 54px); margin-top: 0; letter-spacing: -0.02em; display: block; white-space: nowrap; }
.contact-detail a { transition: color .25s ease; }
.contact-detail a:hover { color: var(--heat); }
@media (max-width: 600px) {
  .contact-lite .contact-detail { flex-direction: column; align-items: flex-start; gap: 4px; }
  .contact-detail a, .contact-detail p { display: block; font-size: clamp(16px, 5.4vw, 28px); white-space: normal; }
}

/* ===========================================================
   CTA band + warp + mega footer
   =========================================================== */
.cta-band { position: relative; overflow: hidden; background: transparent; color: var(--paper); text-align: center; }
/* dark image band that DISSOLVES into the bone footer below (no hard edge) */
.cta-band--image { background: linear-gradient(to bottom, transparent 0%, transparent 12%, var(--ink) 40%, var(--ink) 66%, var(--paper) 100%); }
.cta-band h2 { color: var(--paper); margin-bottom: 24px; }
.cta-band .lead { color: var(--muted-dk); margin: 0 auto 38px; text-align: center; }
.cta-band--image .cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.38) contrast(1.05); z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 16%, #000 32%, #000 56%, transparent 92%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 16%, #000 32%, #000 56%, transparent 92%); }
.cta-band--image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper) 84%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 68%); mask-image: linear-gradient(to bottom, transparent, #000 68%); }
.cta-band .orb { z-index: 1; }
.cta-glass { position: relative; z-index: 3; max-width: 900px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) clamp(18px, 4vw, 44px); }

.warp-divider { display: none; }   /* retired: footer is now light, no dark wave needed */

/* ===========================================================
   Footer — floating frosted-glass card on the bone (light)
   =========================================================== */
.mega-footer { background: transparent; color: var(--ink); padding-block: clamp(18px,3vw,40px) clamp(26px,4vw,54px); position: relative; z-index: 2; }
.mega-footer .orb { display: none; }
.mega-footer .wrap { position: relative; z-index: 2; }
.footer-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border); border-radius: 30px; box-shadow: var(--glass-shadow);
  padding: clamp(34px,4.6vw,64px) clamp(26px,4vw,58px);
}
.footer-mark { display: block; font-family: var(--font-display); font-weight: 900; font-stretch: 125%; color: var(--ink); font-size: clamp(44px, 9vw, 96px); line-height: .9; letter-spacing: -0.03em; margin-bottom: clamp(30px,4vw,50px); }
.footer-mark a { color: var(--ink); transition: color .3s ease; }
.footer-mark a .heat { transition: color .3s ease; }
.footer-mark a:hover { color: var(--heat); }
.footer-grid { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; align-items: end; padding-top: clamp(28px,3vw,40px); border-top: 1px solid rgba(12,12,12,.12); }
.footer-contact a { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: clamp(20px, 2.4vw, 32px); color: var(--ink); transition: color .25s ease; overflow-wrap: anywhere; }
.footer-contact a:hover { color: var(--heat); }
.footer-contact .footer-phone { display: block; font-size: clamp(16px,1.8vw,22px); color: var(--muted); margin-top: 10px; }
.footer-nav { display: flex; gap: 26px; list-style: none; flex-wrap: wrap; }
.footer-nav a { color: var(--muted); transition: color .2s ease; }
.footer-nav a:hover { color: var(--heat); }
.footer-meta { color: var(--muted); width: 100%; margin-top: 28px; }
@media (max-width: 560px) {
  .footer-card { padding: clamp(28px,6vw,44px) clamp(20px,5vw,30px); }
  .footer-grid { flex-direction: column; align-items: flex-start; gap: 26px; }
  .footer-contact a { font-size: clamp(13px, 4.3vw, 19px); }
}

.intro-center { text-align: center; max-width: 900px; margin: 0 auto clamp(44px, 5vw, 72px); }
.intro-center .kicker { justify-content: center; }
.intro-center .lead { margin: 18px auto 0; }

/* ===========================================================
   Labels — clean sans (cohesive with the grotesque), sentence case.
   No serif, no italics. Only the logo (.brand) stays caps.
   =========================================================== */
.kicker, .brand small, .hero-tag, .stat .label, .brands-title, .brand-more,
.windex-row .wx-disc, .work-card .work-meta span, .case-body .case-label,
.case-body .case-meta, .metric .result-tag, .metric .cap, .growth-ends,
.results-strip .r .rl, .contact-detail .label, .footer-cta, .footer-meta, .footer-nav a {
  font-family: var(--font-sans); font-style: normal; text-transform: none; letter-spacing: .01em; font-weight: 500;
}
.kicker { font-size: clamp(14px,1.4vw,17px); color: var(--muted); margin-bottom: 22px; font-weight: 600; letter-spacing: .02em; }
.brand small { font-size: 10px; opacity: .55; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.hero-tag { font-size: 15px; }
.stat .label { font-size: clamp(13px,1.3vw,15px); margin-top: 16px; color: var(--muted); }
.brands-title { font-size: clamp(14px,1.4vw,16px); font-weight: 600; letter-spacing: .03em; }
.brand-more { font-size: clamp(13px,1.3vw,15px); }
.case-body .case-label { font-size: clamp(14px,1.5vw,17px); color: var(--heat); font-weight: 600; letter-spacing: .02em; }
.case-body .case-meta { font-size: clamp(13px,1.3vw,15px); }
.metric .result-tag { font-size: 13px; font-weight: 700; color: var(--heat); letter-spacing: .03em; }
.metric .cap, .results-strip .r .rl, .windex-row .wx-disc, .work-card .work-meta span { font-size: clamp(13px,1.3vw,15px); }
.growth-ends { font-size: 12px; }
.contact-detail .label { font-size: clamp(13px,1.3vw,15px); letter-spacing: .03em; }
.footer-cta { font-size: 15px; }
.footer-meta { font-size: 12.5px; }
.footer-nav a { font-size: 14px; }
/* strip all-caps from the remaining (non-label) elements too */
.nav-links a, .windex-row .wx-name, .wx-chip, .result-chip { text-transform: none; }
.nav-links a { letter-spacing: .02em; text-transform: none; }

/* ===========================================================
   Reveal-on-scroll + warp targets
   =========================================================== */
.js .reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
[data-warp] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-line > span { opacity: 1; transform: none; transition: none; }
  .hero-tag::before { animation: none; }
  /* the soft blurred glow keeps drifting (gentle, background) even here */
  .growth-fill { transition: none; }
  .manifesto-text .word { color: var(--ink); }
  .manifesto-text .word.hot { color: var(--heat); }
  .cursor { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header.scrolled { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}