/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --background:#08080a;
  --foreground:#f3f1ea;
  --surface:#111114;
  --surface-2:#17171b;
  --muted:#807f78;
  --line:rgba(243,241,234,0.1);
  --line-strong:rgba(243,241,234,0.22);
  --accent:#ff3b1d;
  --accent-2:#ff6a3d;

  --font-display:"Anton", sans-serif;
  --font-sans:"Onest", sans-serif;

  --gutter:2.5rem;
  --section:9rem;

  --fs-hero:28rem;      --lh-hero:0.78;
  --fs-mega:13rem;      --lh-mega:0.86;
  --fs-display:7.5rem;  --lh-display:0.9;
  --fs-h1:5rem;         --lh-h1:0.95;
  --fs-h2:3.25rem;      --lh-h2:1;
  --fs-h3:1.75rem;      --lh-h3:1.15;
  --fs-lead:1.375rem;   --lh-lead:1.45;
  --fs-body:1.0625rem;  --lh-body:1.6;
  --fs-eyebrow:0.8125rem; --lh-eyebrow:1.2;
}

/* ============================================================
   ADAPTIVE REM GRID — authored against a 1920px / 16px base
   ============================================================ */
html{ font-size:16px; background:#08080a; }
@media (max-width:1920px){ html{ font-size:0.833333vw; } }
@media (max-width:1440px){ html{ font-size:1.111111vw; } }
@media (max-width:1024px){ html{ font-size:1.5625vw; } }
@media (max-width:640px){
  html{ font-size:4.444444vw; }
  :root{
    --gutter:20px;            /* 16px left the copy sitting on the edge */
    --section:5.5rem;
    /* the display scale is authored for 1920 and is far too large on a phone:
       the hero name ran 506px wide on a 375px screen, stat figures hit 125px */
    --fs-hero:8rem;     --fs-mega:8rem;
    --fs-display:3.6rem;
    --fs-h1:2.9rem;
    --fs-h2:2.15rem;
    --fs-h3:1.375rem;
    --fs-lead:1.125rem;
    --fs-body:1rem;
    --fs-eyebrow:0.75rem;
  }
}

/* No hover on a touch screen, so the frames show their active state by default:
   colour, ring and sheen. The ring only spins on the frames that are playing. */

/* ============================================================
   RESET
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }
img,video{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; -webkit-appearance:none; appearance:none; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }

body{
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--background); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   TYPE HELPERS
   ============================================================ */
.eyebrow{
  display:flex; align-items:center; gap:0.75rem;
  font-size:var(--fs-eyebrow); line-height:var(--lh-eyebrow);
  font-weight:500; text-transform:uppercase; letter-spacing:0.22em;
  color:var(--muted);
}
.eyebrow::before{
  content:""; width:0.5rem; height:0.5rem; flex:none;
  border-radius:9999px; background:var(--accent);
}

.h-display{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.01em; font-weight:400; }

/* ============================================================
   TEXT REVEAL PRIMITIVES
   ============================================================ */
.tr-line{ display:block; overflow:hidden; }
.tr-inner{ display:block; transform:translateY(110%); opacity:0; will-change:transform,opacity; }
.tr-line.play .tr-inner{
  transform:translateY(0); opacity:1;
  transition:transform 800ms cubic-bezier(0.16,1,0.3,1), opacity 800ms cubic-bezier(0.16,1,0.3,1);
}

/* letter-by-letter (hero name) */
.tr-letters{ display:block; white-space:nowrap; overflow:hidden; }
.tr-letter{ display:inline-block; transform:translateY(100%); opacity:0; will-change:transform,opacity; }
.tr-letters.play .tr-letter{
  transform:translateY(0); opacity:1;
  transition:transform 900ms cubic-bezier(0.16,1,0.3,1), opacity 900ms cubic-bezier(0.16,1,0.3,1);
}

/* word-by-word (quote) */
.tr-word{ display:inline-block; transform:translateY(18px); opacity:0; will-change:transform,opacity; }
.tr-words.play .tr-word{
  transform:translateY(0); opacity:1;
  transition:transform 520ms cubic-bezier(0.165,0.84,0.44,1), opacity 520ms cubic-bezier(0.165,0.84,0.44,1);
}

/* generic block fade+rise */
.rise{ opacity:0; transform:translateY(16px); will-change:transform,opacity; }
.rise.in-view{
  opacity:1; transform:translateY(0);
  transition:opacity 520ms cubic-bezier(0.16,1,0.3,1), transform 520ms cubic-bezier(0.16,1,0.3,1);
}
.rise-lg{ opacity:0; transform:translateY(60px); will-change:transform,opacity; }
.rise-lg.in-view{
  opacity:1; transform:translateY(0);
  transition:opacity 620ms cubic-bezier(0.16,1,0.3,1), transform 620ms cubic-bezier(0.16,1,0.3,1);
}
.rise-md{ opacity:0; transform:translateY(32px); will-change:transform,opacity; }
.rise-md.in-view{
  opacity:1; transform:translateY(0);
  transition:opacity 560ms cubic-bezier(0.16,1,0.3,1), transform 560ms cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  gap:0.75rem; padding:var(--gutter);
  transform:translateY(0);
}
#preloader::before{ content:""; position:absolute; inset:0; z-index:-10; background:var(--background); }
#preloader.wipe{ transform:translateY(-100%); transition:transform 650ms cubic-bezier(0.22,1,0.36,1); }
#preloader.done{ pointer-events:none; }
@media (min-width:640px){
  #preloader{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:1rem; }
}
.pl-brand{
  font-family:var(--font-display); font-size:var(--fs-h3); line-height:1;
  text-transform:uppercase; letter-spacing:-0.01em; color:var(--foreground);
  transition:opacity 300ms linear;
}
.pl-count{
  font-family:var(--font-display); font-size:var(--fs-display); line-height:1;
  font-variant-numeric:tabular-nums; color:var(--foreground);
  transition:opacity 300ms linear;
}
.pl-count span{ color:var(--accent); }
#preloader.fading .pl-brand,#preloader.fading .pl-count{ opacity:0; }

/* ============================================================
   NAV
   ============================================================ */
.site-nav{ position:fixed; inset-inline:0; top:0; z-index:50; pointer-events:none; }
.site-nav nav{
  pointer-events:auto; display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--gutter);
}
.logo{ display:flex; align-items:center; gap:0.75rem; }
.monogram{
  display:grid; place-items:center; width:2.5rem; height:2.5rem; flex:none;
  border-radius:9999px; border:1px solid var(--line-strong);
  font-weight:600; letter-spacing:-0.01em; font-size:var(--fs-body);
}
.logo-name{
  display:none; font-size:var(--fs-eyebrow); font-weight:500;
  text-transform:uppercase; letter-spacing:0.22em; color:var(--muted);
}
@media (min-width:640px){ .logo-name{ display:block; } }

.nav-links{ display:none; align-items:center; gap:2.5rem; }
@media (min-width:768px){ .nav-links{ display:flex; } }
.nav-links a{
  position:relative; display:inline-block;
  font-size:var(--fs-eyebrow); font-weight:500; text-transform:uppercase;
  letter-spacing:0.18em; color:var(--muted);
  transition:color 340ms ease-out;
}
.nav-links a::after{
  content:""; position:absolute; bottom:-0.25rem; left:0; height:1px; width:0;
  background:var(--accent); transition:width 340ms ease-out;
}
.nav-links a:hover,.nav-links a:focus-visible{ color:var(--foreground); }
.nav-links a:hover::after,.nav-links a:focus-visible::after{ width:100%; }

.burger{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:0.375rem; width:2.5rem; height:2.5rem;
}
@media (min-width:768px){ .burger{ display:none; } }
.burger i{
  display:block; height:0.125rem; width:1.5rem; background:var(--foreground);
  transition:transform 340ms ease-out, opacity 200ms linear;
}
.burger.open i:nth-child(1){ transform:translateY(0.5rem) rotate(45deg); }
.burger.open i:nth-child(2){ opacity:0; }
.burger.open i:nth-child(3){ transform:translateY(-0.5rem) rotate(-45deg); }

#mobile-menu{
  position:fixed; inset:0; z-index:50; background:var(--background);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-inline:var(--gutter); gap:1.5rem;
  opacity:0; visibility:hidden;
  transition:opacity 450ms ease-out, visibility 0s linear 450ms;
}
#mobile-menu.open{ opacity:1; visibility:visible; transition:opacity 450ms ease-out, visibility 0s; }
@media (min-width:768px){ #mobile-menu{ display:none; } }
#mobile-menu a{
  display:block; font-family:var(--font-display); font-size:var(--fs-h2);
  text-transform:uppercase; line-height:1; letter-spacing:-0.01em;
  transform:translateY(48px); opacity:0;
}
#mobile-menu.open a{
  transform:translateY(0); opacity:1;
  transition:transform 420ms ease-out, opacity 420ms ease-out;
}

/* ============================================================
   MAIN
   ============================================================ */
main{ position:relative; width:100%; overflow-x:hidden; }

/* ---------- HERO ---------- */
.hero{
  position:relative; display:flex; flex-direction:column;
  min-height:100svh; overflow:hidden;
}
.hero-top{
  position:relative; z-index:30;
  display:flex; flex-direction:column; gap:2rem;
  padding:7rem var(--gutter) 0;
}
@media (min-width:640px){
  .hero-top{ flex-direction:row; align-items:flex-start; justify-content:space-between; padding-top:8rem; }
}
.hero-roles{
  font-family:var(--font-display); text-transform:uppercase;
  line-height:1.05; letter-spacing:-0.01em; color:var(--foreground);
  font-size:var(--fs-h3);
}
@media (min-width:640px){ .hero-roles{ font-size:var(--fs-h2); } }
.hero-desc{ max-width:26rem; font-size:var(--fs-body); color:var(--muted); }
@media (min-width:640px){ .hero-desc{ text-align:right; } }

.hero-portrait{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  z-index:20; height:86vh; width:80vw; pointer-events:none;
}
@media (min-width:640px){ .hero-portrait{ width:48vw; } }
@media (min-width:1024px){ .hero-portrait{ width:36vw; } }

.hero-fade{
  position:absolute; inset-inline:0; bottom:0; z-index:20; height:26vh;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent, #08080a);
}
.hero-name{
  position:absolute; inset-inline:0; bottom:0; z-index:10;
  transform:translateY(6%);
  display:flex; flex-direction:column; align-items:center;
  font-family:var(--font-display); text-transform:uppercase;
  line-height:var(--lh-hero); letter-spacing:-0.01em;
  color:var(--accent); font-size:var(--fs-mega);
  pointer-events:none;
}
@media (min-width:640px){ .hero-name{ font-size:var(--fs-hero); } }
/* short landscape viewports: a bottom-anchored 28rem name collides with the top row */
@media (max-height:760px) and (min-width:640px){ .hero-name{ font-size:var(--fs-mega); } }
@media (max-height:560px){ .hero-name{ font-size:var(--fs-display); } }

.scroll-cue{
  position:absolute; bottom:2rem; left:var(--gutter); z-index:30;
  display:flex; align-items:center; gap:0.75rem;
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.22em;
  color:var(--muted);
}
.scroll-cue::before{ content:""; width:2.5rem; height:1px; background:var(--accent); flex:none; }

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:2rem;
}
.marquee-track{
  display:flex; width:max-content; flex-wrap:nowrap; align-items:center;
  animation:marquee 22s linear infinite;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-item{
  display:flex; align-items:center;
  font-family:var(--font-display); font-size:var(--fs-h2);
  text-transform:uppercase; letter-spacing:-0.01em; line-height:1;
  white-space:nowrap;
}
.marquee-item::after{
  content:""; margin-inline:2rem; width:0.625rem; height:0.625rem; flex:none;
  border-radius:9999px; background:var(--accent);
}

/* ---------- SECTION SHELL ---------- */
.section{ padding:var(--section) var(--gutter); }

.sec-header{ display:flex; flex-direction:column; gap:2rem; }
@media (min-width:640px){
  .sec-header{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
}
.sec-heading{
  margin-top:1.5rem; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:-0.01em; line-height:0.95; font-size:var(--fs-h2);
}
@media (min-width:640px){ .sec-heading{ font-size:var(--fs-h1); } }
.sec-heading.tight{ line-height:1; }
.sec-count{
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.22em;
  color:var(--muted); flex:none;
}

/* ---------- STORY ---------- */
.story-grid{ display:grid; grid-template-columns:1fr; gap:3rem; }
@media (min-width:1024px){
  .story-grid{ grid-template-columns:repeat(12,1fr); gap:var(--gutter); }
  .story-left{ grid-column:span 6; }
  .story-right{ grid-column:span 6; padding-top:0.5rem; }
}
.story-heading{ max-width:16ch; }
.story-body{ margin-top:2rem; max-width:46ch; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--muted); }

.principle{
  display:grid; grid-template-columns:auto 1fr; column-gap:1.5rem;
  border-top:1px solid var(--line); padding-block:2rem;
}
.principle:last-child{ border-bottom:1px solid var(--line); }
.principle-n{
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--accent); line-height:var(--lh-h3);
}
.principle h3{
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  letter-spacing:-0.01em; line-height:var(--lh-h3);
}
.principle p{ margin-top:0.75rem; max-width:44ch; font-size:var(--fs-body); color:var(--muted); }

/* ---------- WORK ---------- */
.work-list{
  margin-top:4rem; display:grid; grid-template-columns:1fr;
  column-gap:var(--gutter); row-gap:4rem;
}
@media (min-width:768px){
  .work-list{ grid-template-columns:repeat(2,1fr); }
  .work-list > li:nth-child(even){ margin-top:6rem; }
}
.work-meta{
  margin-top:1.5rem; border-top:1px solid var(--line); padding-top:1.25rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
}
.work-name{
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  letter-spacing:-0.01em; line-height:var(--lh-h3);
  transition:color 340ms ease-out;
}
.work-card:hover .work-name,.work-card:focus-within .work-name{ color:var(--accent); }
.work-blurb{ margin-top:0.5rem; max-width:42ch; font-size:var(--fs-body); color:var(--muted); }
.work-right{ flex:none; text-align:right; }
.work-year{
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em; color:var(--muted);
}
.work-outcome{
  margin-top:0.5rem; font-size:var(--fs-eyebrow); font-weight:500;
  text-transform:uppercase; letter-spacing:0.18em; color:var(--accent);
}
.work-cat{
  margin-top:0.75rem; font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:0.22em; color:var(--muted);
}

/* ---------- IMPACT ---------- */
.stats{
  margin-top:4rem; display:grid; grid-template-columns:1fr;
  border-top:1px solid var(--line);
  container-type:inline-size;
}
@media (min-width:640px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat{
  display:flex; flex-direction:column; gap:1rem;
  border-bottom:1px solid var(--line); padding-block:2.5rem;
}
@media (min-width:640px){
  .stat:nth-child(even){ border-left:1px solid var(--line); padding-left:2rem; }
}
@media (min-width:1024px){
  .stat{ padding-block:3rem; }
  .stat:nth-child(even){ border-left:1px solid var(--line); padding-left:2rem; }
  .stat:nth-child(4n+1){ border-left:none; padding-left:0; }
  .stat:nth-child(4n+2),.stat:nth-child(4n+3),.stat:nth-child(4n+4){
    border-left:1px solid var(--line); padding-left:2rem;
  }
}
.stat dd{
  /* capped by the column as well as the scale, so a long figure such as S$23.2K stays clear
     of the divider; 3.2em is the widest figure's advance plus some air */
  font-family:var(--font-display); font-size:min(var(--fs-display), calc(100cqi / 3.2)); line-height:1;
  letter-spacing:-0.01em; transition:color 340ms ease-out;
}
@media (min-width:640px){ .stat dd{ font-size:min(var(--fs-display), calc((50cqi - 2rem) / 3.2)); } }
@media (min-width:1024px){ .stat dd{ font-size:min(var(--fs-display), calc((25cqi - 2rem) / 3.2)); } }
.stat:hover dd{ color:var(--accent); }
.stat dt{
  max-width:20ch; font-size:var(--fs-body); text-transform:uppercase;
  letter-spacing:0.14em; color:var(--muted); line-height:1.4;
}
.stat-note{
  margin-top:0.35rem; font-size:var(--fs-eyebrow); letter-spacing:0.06em;
  color:var(--muted); opacity:0.72; text-transform:none; max-width:24ch;
}

/* ---------- BROKE (selector + featured) ---------- */
.broke-grid{ margin-top:4rem; display:grid; grid-template-columns:1fr; gap:var(--gutter); }
@media (min-width:1024px){
  .broke-grid{ grid-template-columns:repeat(12,1fr); }
  .broke-list{ grid-column:span 5; }
  .broke-feature{ grid-column:span 7; }
}
.broke-btn{
  width:100%; display:flex; align-items:baseline; gap:1.25rem;
  border-top:1px solid var(--line); padding-block:1.75rem; text-align:left;
}
.broke-list li:last-child .broke-btn{ border-bottom:1px solid var(--line); }
.broke-idx{
  font-size:var(--fs-eyebrow); font-variant-numeric:tabular-nums;
  letter-spacing:0.18em; color:var(--muted); flex:none;
  transition:color 340ms ease-out;
}
.broke-btn[aria-selected="true"] .broke-idx{ color:var(--accent); }
.broke-name{
  display:block;
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  letter-spacing:-0.01em; line-height:var(--lh-h3); color:var(--muted);
  transition:color 340ms ease-out;
}
.broke-btn[aria-selected="true"] .broke-name,.broke-btn:hover .broke-name{ color:var(--foreground); }
.broke-role{
  display:block; margin-top:0.25rem; font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:0.18em; color:var(--muted);
}
.broke-rule{
  display:block; margin-top:0.75rem; height:1px; width:0; background:var(--accent);
  transition:width 340ms ease-out;
}
.broke-btn[aria-selected="true"] .broke-rule{ width:2.5rem; }

.broke-feature-inner{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:flex-start; }
/* base first, desktop override second: the old order let these base rules
   cancel the media query, which is why the image ended up squeezed to ~188px */
.broke-quote{ order:2; }
.broke-figure{ order:1; width:100%; }
@media (min-width:640px){
  /* image first, then the quote — matches the stacked order on a phone, so the
     reading order is the same at every width */
  .broke-feature-inner{ grid-template-columns:auto 1fr; }
  .broke-figure{ order:1; width:20rem; }   /* sized for a diagram, not a portrait */
  .broke-quote{ order:2; }
}
.broke-quote p{
  max-width:30ch; font-family:var(--font-sans); font-size:var(--fs-h3);
  font-weight:500; line-height:1.3; letter-spacing:-0.01em; color:var(--foreground);
}
.broke-quote footer{
  margin-top:2rem; font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:0.18em; color:var(--muted);
}

/* ---------- CONTACT / FOOTER ---------- */
.contact{ padding-top:var(--section); padding-inline:var(--gutter); }
.contact-heading{
  margin-top:1.5rem; max-width:18ch; font-family:var(--font-display);
  text-transform:uppercase; line-height:0.95; letter-spacing:-0.01em;
  font-size:var(--fs-h1);
}
@media (min-width:640px){ .contact-heading{ font-size:var(--fs-display); } }
.contact-body{ margin-top:2rem; max-width:44ch; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--muted); }
.email-link{
  margin-top:3rem; display:inline-flex; align-items:baseline; gap:0.75rem;
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600;
  letter-spacing:-0.01em; word-break:break-all;
  transition:color 340ms ease-out, transform 340ms ease-out;
}
@media (min-width:640px){ .email-link{ font-size:var(--fs-h1); gap:1rem; } }
.email-link:hover,.email-link:focus-visible{ color:var(--accent); transform:translateX(14px); }
.email-link i{ color:var(--accent); font-style:normal; }

.footer-bar{
  margin-top:var(--section); border-top:1px solid var(--line);
  padding-block:3rem; display:grid; grid-template-columns:1fr; gap:2.5rem;
}
@media (min-width:1024px){
  .footer-bar{ grid-template-columns:repeat(12,1fr); }
  .fb-a{ grid-column:span 6; }
  .fb-b{ grid-column:span 3; }
  .fb-c{ grid-column:span 3; text-align:right; }
}
.signature{
  font-family:var(--font-display); font-size:var(--fs-h2);
  text-transform:uppercase; line-height:1; letter-spacing:-0.01em;
}
.sig-note{
  margin-top:1rem; font-size:var(--fs-eyebrow); text-transform:uppercase;
  letter-spacing:0.22em; color:var(--muted);
}
.social a{
  display:inline-flex; align-items:center; font-size:var(--fs-body); color:var(--muted);
  transition:color 340ms ease-out;
}
.social li + li{ margin-top:0.5rem; }
.social a::before{
  content:""; width:0; height:1px; background:var(--accent); margin-right:0;
  transition:width 340ms ease-out, margin-right 340ms ease-out;
}
.social a:hover,.social a:focus-visible{ color:var(--foreground); }
.social a:hover::before,.social a:focus-visible::before{ width:1.5rem; margin-right:0.75rem; }
.social .dl{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-style:normal;
  font-size:0.6875rem; letter-spacing:0.14em; color:var(--muted);
  margin-left:0.7rem; opacity:0.75; transition:color 340ms ease-out, opacity 340ms ease-out;
}
.social a:hover .dl,.social a:focus-visible .dl{ color:var(--accent); opacity:1; }
.copyright{
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em; color:var(--muted);
}

/* ============================================================
   LIQUID IMAGE
   ============================================================ */
.liquid{
  position:relative; overflow:hidden; background:var(--surface);
  border-radius:0.125rem;
}
.liquid.bare{ background:transparent; }
.liquid img,.liquid video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.liquid.bare img,.liquid.bare video{ object-fit:contain; object-position:center bottom; }

/* placeholder — shown until a real asset is dropped in */
.liquid-ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:0.5rem;
  padding:1.25rem;
  background:radial-gradient(130% 130% at 30% 15%, var(--surface-2), var(--background));
  border:1px solid var(--line);
  border-radius:0.125rem;
}
/* the hero asset is a transparent cutout, so its slot must not block the name behind it */
.liquid.bare .liquid-ph{
  border-style:dashed;
  background:linear-gradient(to bottom, rgba(23,23,27,0.35), rgba(8,8,10,0.72));
  backdrop-filter:blur(2px);
}
.ph-tag{
  font-size:var(--fs-eyebrow); font-weight:500; text-transform:uppercase;
  letter-spacing:0.22em; color:var(--accent);
}
.ph-label{
  font-size:var(--fs-body); line-height:1.35; color:var(--muted); max-width:34ch;
}
.ph-file{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:0.75rem;
  letter-spacing:0.02em; color:var(--muted); opacity:0.6;
}

.liquid-veil{
  position:absolute; inset:0; mix-blend-mode:color;
  background:var(--surface); opacity:0.88; pointer-events:none;
  transition:opacity 340ms ease-out;
}

.liquid-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 120%, color-mix(in srgb, #08080a 70%, transparent), transparent 60%);
}
.liquid.bare .liquid-veil,
.liquid.bare .liquid-vignette{ display:none; }

@media (hover:hover){
  .liquid:hover .liquid-veil,
  .work-card:hover .liquid-veil{ opacity:0; }
}
/* keyboard parity with the title rule — not gated on hover capability */
.work-card:focus-within .liquid-veil{ opacity:0; }
@media (hover:none){
  .liquid-veil{ opacity:0; }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  #preloader{ display:none !important; }
  .marquee-track{ animation:none; }
  .tr-inner,.tr-letter,.tr-word{ transform:none !important; opacity:1 !important; transition:none !important; }
  .rise,.rise-lg,.rise-md{ opacity:1 !important; transform:none !important; transition:none !important; }
  .email-link:hover{ transform:none; }
  *{ scroll-behavior:auto !important; }
}

/* current page in the nav */
.nav-links a[aria-current="page"]{ color:var(--foreground); }
.nav-links a[aria-current="page"]::after{ width:100%; background:var(--accent); }
#mobile-menu a[aria-current="page"]{ color:var(--accent); }

/* current role — sits at the foot of the hero, opposite the scroll cue, so the
   two read as one footer row across the first screen */
.hero-now{
  display:flex; align-items:flex-start; gap:0.6rem;
  margin-top:1.75rem; padding-inline:var(--gutter);
  font-size:var(--fs-eyebrow); line-height:1.65;
  text-transform:uppercase; letter-spacing:0.14em;
  color:var(--foreground); opacity:0.88;   /* it overlays the red name, so it needs the contrast */
}
.now-lines{ display:block; }
.now-lines .nw{ white-space:nowrap; }   /* on a phone, break between facts, never inside one */
@media (min-width:640px){
  .hero-now{
    position:absolute; z-index:30;
    bottom:2rem; right:var(--gutter);
    margin:0; padding:0;
    flex-direction:row-reverse;      /* dot to the outside, mirroring the scroll rule */
    text-align:right;
  }
}
.now-dot{
  width:0.45rem; height:0.45rem; flex:none; margin-top:0.42em; border-radius:9999px;
  background:var(--accent); box-shadow:0 0 0 0 var(--accent);
  animation:now-pulse 2.8s ease-out infinite;
}
@keyframes now-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%{ box-shadow:0 0 0 0.5rem transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion:reduce){ .now-dot{ animation:none; } }

.sec-context{
  margin-top:0.6rem; max-width:30ch;
  text-transform:none; letter-spacing:0; font-size:var(--fs-body);
  color:var(--muted); opacity:0.85;
}
@media (min-width:640px){ .sec-count{ text-align:right; } .sec-context{ margin-left:auto; } }

.hero-left{ display:flex; flex-direction:column; }
.hero-right{ display:flex; flex-direction:column; align-items:flex-start; }
@media (min-width:640px){ .hero-right{ align-items:flex-end; } }

.page-count a{ color:var(--accent); border-bottom:1px solid transparent; }
.page-count a:hover{ border-color:var(--accent); }

/* ---------- motion frames: looping video and live animation ---------- */
.liquid video,
.liquid .liquid-anim{ position:absolute; inset:0; width:100%; height:100%; }
.liquid video{ object-fit:cover; object-position:center top; }
.liquid-anim svg{ display:block; width:100%; height:100%; }

/* while motion plays the card is live: same glow as hover. On desktop hover
   already sets this; on touch screens it is the only way the glow appears. */
.liquid.is-playing .liquid-veil{ opacity:0; }


/* What Broke: you interact with the list, not the image, so a grey-until-hovered
   image would never show its colour (including the ILLUSTRATIVE label). */
.broke-figure .liquid-veil{ display:none; }

/* ============================================================
   PHONE OVERRIDES — last in the file on purpose.
   Earlier in the cascade these lose to the base component rules,
   which is what kept the portrait at full height and the work
   meta row right-aligned off the edge of the screen.
   ============================================================ */
@media (max-width:640px){
  /* the year + outcome column cannot shrink, so it ran past the right edge */
  .work-meta{ flex-direction:column; gap:0.75rem; }
  .work-right{ text-align:left; }

  /* the hero copy stacks on a phone and needs more room than a phone screen
     leaves above the portrait, so the hero gets a little extra height, the copy
     starts higher, and the portrait begins below it instead of behind the face */
  .hero{ min-height:calc(100svh + 9rem); }
  .hero-top{ padding-top:5.5rem; }
  .hero-portrait{ height:52vh; width:94vw; }
}

/* ============================================================
   PROJECT DIALOGS — opened by links to "#project-{slug}".
   Kept after the phone overrides: nothing above styles these classes.
   ============================================================ */
html.pd-open{ overflow:hidden; }

.pd-cue{
  display:inline-flex; align-items:center; gap:0.45rem; margin-top:1rem;
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em;
  color:var(--accent);
}
.pd-cue i{ font-style:normal; transition:transform 340ms ease-out; }
.pd-trigger{ color:inherit; text-decoration:none; }
.pd-trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* the landing page cards: the whole card is the target */
.work-card{ position:relative; }
.work-card .pd-trigger::after{ content:""; position:absolute; inset:0; z-index:2; }
@media (hover:hover){
  .work-card:hover .pd-cue i{ transform:translate(0.2rem,-0.2rem); }
}

dialog.pd{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0 var(--gutter);
  border:0; background:transparent; color:var(--foreground);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity 260ms ease-out;
}
dialog.pd::backdrop{ background:rgba(8,8,10,0.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
dialog.pd.is-open{ opacity:1; }

.pd-sheet{
  position:relative; max-width:72rem; margin:clamp(0rem, 3vw, 3rem) auto;
  background:var(--surface); border:1px solid var(--line); border-radius:0.125rem; outline:none;
  padding:clamp(1.5rem, 4vw, 4.5rem);
  transform:translateY(1.5rem); transition:transform 380ms cubic-bezier(.22,1,.36,1);
}
dialog.pd.is-open .pd-sheet{ transform:none; }

.pd-bar{
  position:sticky; top:0; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin:calc(-1 * clamp(1.5rem, 4vw, 4.5rem)) calc(-1 * clamp(1.5rem, 4vw, 4.5rem)) 0;
  padding:1rem clamp(1.5rem, 4vw, 4.5rem);
  background:var(--surface);
}
.pd-bar::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:1.75rem; pointer-events:none;
  background:linear-gradient(var(--surface), transparent);
}
.pd-eyebrow{ font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em; color:var(--accent); }
.pd-close{
  flex:none; position:relative; width:2.75rem; height:2.75rem; border-radius:9999px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--foreground); cursor:pointer;
  transition:border-color 200ms ease, background 200ms ease;
}
.pd-close::before,.pd-close::after{
  content:""; position:absolute; left:50%; top:50%; width:1rem; height:1.5px; background:currentColor;
}
.pd-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.pd-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.pd-close:hover{ border-color:var(--foreground); }
.pd-close:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.pd-title{
  margin-top:1.5rem; font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.5rem, 6.2vw, 5.5rem); line-height:0.92; letter-spacing:-0.005em;
}
.pd-lead{ margin-top:1.5rem; max-width:58ch; font-size:var(--fs-lead); line-height:var(--lh-lead); }

.pd-facts{
  margin:2.25rem 0 0; display:grid; gap:1.25rem 2rem;
  grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));
  padding:1.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.pd-facts dt{ font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em; color:var(--muted); }
.pd-facts dd{ margin:0.4rem 0 0; font-size:var(--fs-body); }

.pd-sec{ margin-top:3.25rem; }
.pd-h{ font-size:1.375rem; font-weight:600; letter-spacing:-0.01em; line-height:1.25; }
.pd-sec p{ margin-top:0.75rem; max-width:62ch; color:rgba(243,241,234,0.74); }
.pd-sec p + p{ margin-top:0.9rem; }
.pd-sec code{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:0.9em; color:var(--foreground); }

.pd-fig{ margin:1.5rem 0 0; }
.pd-fig img,.pd-fig video,.pd-fig .pd-svg{
  display:block; width:100%; height:auto; border-radius:0.125rem; background:var(--surface-2);
}
.pd-fig img.pd-clear{ background:transparent; }
.pd-fig figcaption,.pd-cap{
  margin-top:0.7rem; font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.14em; color:var(--muted);
}
.pd-grid{ display:grid; gap:0.75rem; }
.pd-grid-2{ grid-template-columns:repeat(2, 1fr); }
.pd-grid-3{ grid-template-columns:repeat(3, 1fr); }
.pd-grid > *{ min-width:0; }
.pd-tall{ max-height:34rem; width:auto !important; margin:0 auto; }

/* before / after with the reasoning beside it */
.pd-compare{ display:grid; gap:2rem; margin-top:1.5rem; align-items:start; }
.pd-phones{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.pd-phones figure{ margin:0; text-align:center; }
.pd-phones img{ width:100%; max-width:15rem; height:auto; margin:0 auto; display:block; }
.pd-notes{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.pd-notes li{ padding-left:1rem; border-left:2px solid var(--line-strong); }
.pd-notes b{ display:block; font-weight:600; }
.pd-notes span{ display:block; margin-top:0.25rem; color:rgba(243,241,234,0.74); }
@media (min-width:900px){ .pd-compare{ grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); } }

/* numbers */
.pd-stats{ display:grid; gap:1.5rem 2rem; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); margin-top:1.5rem; }
.pd-stat b{ display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem, 4vw, 3.4rem); line-height:1; color:var(--foreground); }
.pd-stat span{ display:block; margin-top:0.5rem; color:rgba(243,241,234,0.74); max-width:30ch; }

.pd-next{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  margin-top:4.5rem; padding-top:1.5rem; border-top:1px solid var(--line-strong);
}
.pd-next p{ font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.18em; color:var(--muted); }
.pd-next a{
  display:inline-flex; gap:0.6rem; align-items:baseline; margin-top:0.5rem;
  font-size:var(--fs-h3); font-weight:600; letter-spacing:-0.01em; color:var(--foreground); text-decoration:none;
}
.pd-next a i{ font-style:normal; color:var(--accent); transition:transform 300ms ease-out; }
.pd-next a:hover i{ transform:translateX(0.3rem); }
.pd-next a:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

@media (max-width:640px){
  dialog.pd{ padding:0; }
  .pd-sheet{ min-height:100%; margin:0; border:0; border-radius:0; padding:1.25rem var(--gutter) 3rem; }
  .pd-bar{ margin:-1.25rem calc(-1 * var(--gutter)) 0; padding:0.9rem var(--gutter); }
  .pd-title{ font-size:3rem; margin-top:1rem; }
  .pd-grid-3{ grid-template-columns:repeat(2, 1fr); }
  .pd-grid-2.pd-stack-sm{ grid-template-columns:1fr; }
  .pd-next a{ font-size:1.25rem; }
}
@media (prefers-reduced-motion:reduce){
  dialog.pd,.pd-sheet{ transition:none; }
  .pd-sheet{ transform:none; }
}