/* ==========================================================================
   WNH — design system
   One typeface, a paper ground, one accent, soft corners.
   Tokens are semantic (bg / surface / text) so any page — including the
   editor — inherits the theme instead of hard-coding light or dark.
   ========================================================================== */

@font-face{
  font-family:'Geist';
  src:url('../fonts/geist-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* ground */
  --bg:#F1F0EC;            /* warm paper */
  --surface:#FFFFFF;       /* cards, panels */
  --surface-2:#E7E5DF;     /* recessed */
  --ink:#0B0D14;           /* near-black, blue cast */
  --ink-2:#14161E;

  /* text */
  --text:#0B0D14;
  --text-2:#6B6D74;        /* 4.6:1 on paper */
  --on-ink:#F1F0EC;
  --on-ink-2:#9EA0A8;      /* 6.9:1 on ink */

  /* lines */
  --line:rgba(11,13,20,.13);
  --line-2:rgba(11,13,20,.26);
  --line-on-ink:rgba(241,240,236,.16);

  --accent:#FF4326;        /* marks, fills, large type */
  --accent-2:#C4321B;      /* the same red, darkened for small text on paper — 4.9:1 */

  /* type */
  --font:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* space */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px; --s8:196px;
  --pad:clamp(18px,3.6vw,56px);
  --maxw:1560px;

  /* form */
  --r:8px; --r-lg:14px; --pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.8s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:17px;line-height:1.6;font-weight:400;
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{
  position:fixed;top:-100px;left:var(--pad);z-index:200;
  background:var(--ink);color:var(--on-ink);padding:12px 20px;border-radius:var(--pill);
  font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:top .2s;
}
.skip:focus{top:12px}

/* ---------- primitives ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(var(--s6),10vw,var(--s8))}
.sec-tight{padding-block:clamp(var(--s5),7vw,var(--s7))}

.lab{
  font-size:.6875rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;line-height:1.4;color:var(--text-2);
}
.lab-ink{color:var(--on-ink-2)}
.muted{color:var(--text-2)}
.accent{color:var(--accent)}
/* small accent text on paper needs the darker red to clear 4.5:1 */
.lab.accent{color:var(--accent-2)}
.panel-ink .lab.accent,.step .n{color:var(--accent)}

.h-display{
  font-size:clamp(2.7rem,7.4vw,6.4rem);font-weight:500;
  letter-spacing:-.035em;line-height:1.0;margin:0;
}
.h-sec{
  font-size:clamp(1.9rem,4vw,3.2rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.05;margin:0;
}
.h-card{font-size:1.35rem;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:0}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;color:var(--text-2);margin:0;max-width:54ch}

.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin-bottom:var(--s5);
}

/* ---------- controls ---------- */
.pill{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:11px 20px;
  border:1px solid var(--line-2);border-radius:var(--pill);
  font-size:.8125rem;font-weight:500;letter-spacing:.01em;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.pill:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.pill-solid{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.pill-solid:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.pill svg{transition:transform .4s var(--ease)}
.pill:hover svg{transform:translateX(4px)}

.link-u{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:.8125rem;font-weight:500;position:relative;
}
.link-u::after{
  content:'';position:absolute;left:0;right:0;bottom:12px;height:1px;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .45s var(--ease);
}
.link-u:hover::after{transform:scaleX(0)}

.rv{opacity:0;transform:translateY(20px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;color:var(--text);transition:color .45s var(--ease)}
/* the homepage hero is dark media, so the nav inverts until the page moves */
body.hero-dark:not(.scrolled) .nav{color:var(--on-ink)}
body.hero-dark:not(.scrolled) .nav .pill{border-color:rgba(241,240,236,.4)}
body.hero-dark:not(.scrolled) .nav .pill:hover{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
body.hero-dark:not(.scrolled) .brand .sub{color:inherit;opacity:.72;border-left-color:rgba(241,240,236,.3)}
body.hero-dark:not(.scrolled) .burger i{background:currentColor}
.nav::before{
  content:'';position:absolute;inset:0;background:rgba(241,240,236,.82);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  opacity:0;transition:opacity .4s var(--ease);
}
body.scrolled .nav::before{opacity:1}
.nav-in{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:var(--s2) var(--pad);
  display:flex;align-items:center;gap:var(--s3);
}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;color:inherit}
.brand svg{width:62px;height:auto;color:currentColor}
.brand .sub{display:none}
@media(min-width:1000px){.brand .sub{display:block;padding-left:14px;border-left:1px solid var(--line)}}

.nav-links{display:none}
@media(min-width:840px){
  .nav-links{display:flex;gap:var(--s3);margin-left:auto;align-items:center}
  .nav-links a{
    min-height:44px;display:inline-flex;align-items:center;position:relative;
    font-size:.8125rem;font-weight:500;
  }
  .nav-links a::after{
    content:'';position:absolute;left:0;right:100%;bottom:13px;height:1px;background:currentColor;
    transition:right .4s var(--ease);
  }
  .nav-links a:hover::after{right:0}
}
.nav-cta{display:none}
@media(min-width:840px){.nav-cta{display:inline-flex;margin-left:var(--s2)}}

.burger{margin-left:auto;display:inline-flex;flex-direction:column;gap:5px;padding:14px 2px;min-height:44px;justify-content:center}
@media(min-width:840px){.burger{display:none}}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
body.menu .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0}
body.menu .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.sheet{
  position:fixed;inset:0;z-index:99;background:var(--bg);padding:calc(var(--s6)) var(--pad) var(--s4);
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateY(-101%);transition:transform .6s var(--ease);visibility:hidden;
}
body.menu .sheet{transform:none;visibility:visible}
body.menu{overflow:hidden}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{
  font-size:clamp(2rem,10vw,3.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.1;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.sheet-foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);padding-top:var(--s4)}

/* ==========================================================================
   HERO — a paper panel riding over full-bleed media
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--ink);overflow:hidden}
.hero-media video,.hero-media iframe,.hero-media img{width:100%;height:100%;object-fit:cover;border:0}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,13,20,.42) 0%,rgba(11,13,20,.12) 38%,rgba(11,13,20,.55) 100%);
}
.field{
  position:absolute;inset:-8%;
  background:
    radial-gradient(58% 48% at 22% 26%,rgba(255,67,38,.30),transparent 62%),
    radial-gradient(52% 44% at 80% 22%,rgba(96,124,190,.42),transparent 62%),
    radial-gradient(70% 62% at 62% 90%,rgba(241,240,236,.16),transparent 66%),
    var(--ink);
  animation:drift 30s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.13) translate3d(-2%,-1.6%,0)}}
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-top{
  position:absolute;top:0;left:0;right:0;z-index:2;
  padding:calc(var(--s6) + 6px) var(--pad) 0;max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:flex-end;
}
.hero-cap{text-align:right;color:var(--on-ink);max-width:22ch}

.hero-body{position:relative;z-index:2;width:100%;padding-bottom:clamp(var(--s4),5vw,var(--s6))}
.hero-panel{
  background:var(--bg);border-radius:0 var(--r-lg) var(--r-lg) 0;
  margin-left:calc(var(--pad) * -1);
  padding:clamp(var(--s4),5vw,var(--s6)) clamp(var(--s4),5vw,var(--s6)) clamp(var(--s3),3vw,var(--s4));
  max-width:min(940px,86%);
}
.hero-panel .line{
  margin:0;font-size:clamp(1.7rem,3.6vw,3.1rem);
  font-weight:500;letter-spacing:-.032em;line-height:1.1;max-width:18ch;
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);
}
.hero-cue{
  position:relative;z-index:2;display:flex;align-items:center;gap:10px;
  padding:0 var(--pad) var(--s3);max-width:var(--maxw);margin:0 auto;width:100%;color:var(--on-ink);
}
.hero-cue .bar{width:1px;height:34px;background:rgba(241,240,236,.3);position:relative;overflow:hidden}
.hero-cue .bar::after{content:'';position:absolute;inset:0;background:var(--accent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ==========================================================================
   STATEMENT
   ========================================================================== */
.two{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:900px){.two{grid-template-columns:200px minmax(0,1fr);gap:var(--s5)}}
.statement{
  font-size:clamp(1.6rem,3.6vw,3rem);font-weight:400;letter-spacing:-.028em;
  line-height:1.18;margin:0;max-width:26ch;
}
.statement em{font-style:normal;color:var(--text-2)}

/* ==========================================================================
   WORK — bento cards
   ========================================================================== */
.bento{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:760px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.bento{grid-template-columns:repeat(6,1fr)}}
.card{
  display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(11,13,20,.10)}
@media(min-width:1180px){
  .card{grid-column:span 2}
  .card.wide{grid-column:span 4}
  .card.half{grid-column:span 3}
  .card.full{grid-column:span 6}
}
.card-media{display:block;position:relative;overflow:hidden;background:var(--surface-2);aspect-ratio:4/5}
.card.wide .card-media{aspect-ratio:16/10}
.card.half .card-media{aspect-ratio:3/2}
.card.full .card-media{aspect-ratio:21/9}
.card-media>*{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card-media>*{transform:scale(1.04)}
.card-body{padding:var(--s3);display:flex;flex-direction:column;gap:10px;flex:1}
.card-top{display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline}
.card-body .tags{margin-top:auto;padding-top:4px}
.card-sum{color:var(--text-2);font-size:.95rem;line-height:1.5;margin:0}

.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font-size:.6875rem;font-weight:500;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:var(--pill);padding:5px 11px;color:var(--text-2);
}
.tag-ink{border-color:var(--line-on-ink);color:var(--on-ink-2)}

/* placeholder tiles until Cloudinary assets land */
.ph{position:relative;width:100%;height:100%;overflow:hidden;background:var(--surface-2)}
.ph::after{
  content:'';position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1.4px);background-size:7px 7px;
}
.ph .num{
  position:absolute;left:14px;bottom:2px;font-weight:600;font-size:4.6rem;line-height:.82;
  color:rgba(255,255,255,.34);letter-spacing:-.05em;
}
.ph[data-tone="wine"]{background:linear-gradient(150deg,#5B1620,#9A2A2A 55%,#2E0A10)}
.ph[data-tone="compass"]{background:linear-gradient(150deg,#12253C,#2C5385 55%,#0A1524)}
.ph[data-tone="imace"]{background:linear-gradient(150deg,#16302A,#357A66 55%,#0B1A16)}
.ph[data-tone="scroll"]{background:linear-gradient(150deg,#2A1C08,#7C5417 55%,#120C04)}
.ph[data-tone="tokyo"]{background:linear-gradient(150deg,#2A1434,#5E2B78 55%,#130818)}
.ph[data-tone="opera"]{background:linear-gradient(150deg,#3A0E0E,#A62A1E 55%,#180505)}
.ph[data-tone="milwaukee"]{background:linear-gradient(150deg,#6E0E12,#C8102E 55%,#2A0407)}
.ph[data-tone="hksh"]{background:linear-gradient(150deg,#0E2E22,#1F6B4C 55%,#071711)}
.ph[data-tone="hkma"]{background:linear-gradient(150deg,#0D2246,#1F4E8C 55%,#06122A)}
.ph[data-tone="cellmax"]{background:linear-gradient(150deg,#4A2436,#A85B79 55%,#231017)}
.ph[data-tone="logistics"]{background:linear-gradient(150deg,#161E3E,#37479A 55%,#0A0E20)}
.ph[data-tone="vitagreen"]{background:linear-gradient(150deg,#0A2A33,#1B7F86 55%,#05161B)}
.ph[data-tone="ink"]{background:linear-gradient(150deg,#1A1A1C,#3D3D42 55%,#0B0B0C)}
.ph[data-tone="sand"]{background:linear-gradient(150deg,#3A2E1E,#9A7B4F 55%,#1A140C)}
.ph[data-tone="sky"]{background:linear-gradient(150deg,#123043,#3E7FA6 55%,#08171F)}
.ph[data-tone="shamrock"]{background:linear-gradient(150deg,#1E4A22,#50A447 55%,#0E2611)}

/* list view (work index) */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:64px minmax(0,1fr);
  grid-template-areas:"thumb title" "thumb meta";
  column-gap:var(--s3);row-gap:10px;align-items:center;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);position:relative;
  transition:padding-inline .45s var(--ease),background .45s var(--ease);
}
.row-thumb{grid-area:thumb;grid-row:1/3;width:64px;height:80px;border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.row-thumb img,.row-thumb video,.row-thumb .ph{width:100%;height:100%;object-fit:cover;display:block}
.row-title{grid-area:title;margin:0;font-size:clamp(1.25rem,4.4vw,1.8rem);font-weight:500;letter-spacing:-.025em;line-height:1.1;transition:transform .5s var(--ease)}
.row-client{display:block;margin-bottom:6px;font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.row-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:8px var(--s3);align-items:center}
.row-year,.row-arrow{display:none}
@media(min-width:900px){
  .row{
    grid-template-columns:60px minmax(0,1fr) 260px 80px 40px;
    grid-template-areas:"thumb title meta year arrow";
    padding:var(--s3) 0;
  }
  .row:hover{background:var(--surface);padding-inline:var(--s3);border-radius:var(--r)}
  .row:hover .row-title{transform:translateX(6px)}
  .row-thumb{grid-row:auto;width:60px;height:60px}
  .row-title{font-size:clamp(1.4rem,2.4vw,2.1rem)}
  .row-year{display:block;grid-area:year;text-align:right;font-size:.8125rem;color:var(--text-2)}
  .row-arrow{display:block;grid-area:arrow;justify-self:end;color:var(--accent);opacity:0;transform:translateX(-6px);transition:all .45s var(--ease)}
  .row:hover .row-arrow{opacity:1;transform:none}
}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter-set{display:flex;flex-direction:column;gap:14px;padding-block:var(--s3);
  border-top:1px solid var(--line)}
.filter-row{display:grid;grid-template-columns:1fr;gap:8px;align-items:start}
@media(min-width:800px){.filter-row{grid-template-columns:96px minmax(0,1fr);gap:var(--s3);align-items:center}}
.filter-lab{padding-top:2px}
.chip{
  border:1px solid var(--line-2);border-radius:var(--pill);background:none;color:var(--text-2);
  padding:10px 16px;min-height:44px;font-size:.8125rem;font-weight:500;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.chip:hover{color:var(--text);border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.chip-n{margin-left:7px;font-size:.6875rem;opacity:.55;font-variant-numeric:tabular-nums}
.fopt[disabled]{opacity:.35;cursor:default}

/* ==========================================================================
   CAPABILITIES — hairline grid
   ========================================================================== */
.caps{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:700px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.caps{grid-template-columns:repeat(3,1fr)}}
.cap{padding:var(--s4) var(--s3) var(--s4) 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
@media(min-width:700px){.cap{padding-right:var(--s4)}}
.cap h3{margin:0;font-size:1.25rem;font-weight:500;letter-spacing:-.02em}
.cap p{margin:0;color:var(--text-2);font-size:.95rem;line-height:1.6;max-width:38ch}
.cap ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cap li{font-size:.6875rem;font-weight:500;letter-spacing:.06em;color:var(--text-2);border:1px solid var(--line);border-radius:var(--pill);padding:5px 11px}

/* ==========================================================================
   DARK PANEL — process, contrast break
   ========================================================================== */
.panel-ink{background:var(--ink);color:var(--on-ink);border-radius:var(--r-lg)}
.panel-ink .lead,.panel-ink p{color:var(--on-ink-2)}
.steps{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.step .n{
  display:block;font-size:.6875rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s2);
}
.step h3{margin:0 0 8px;font-size:1.15rem;font-weight:500;letter-spacing:-.015em}
.step p{margin:0;font-size:.95rem;line-height:1.6;max-width:32ch}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marq{overflow:hidden;border-block:1px solid var(--line);padding-block:var(--s3)}
.marq-track{display:flex;width:max-content;gap:var(--s5);animation:slide 48s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq-item{
  display:inline-flex;align-items:center;gap:var(--s5);white-space:nowrap;
  font-size:clamp(1.1rem,2.2vw,1.7rem);font-weight:400;letter-spacing:-.02em;color:var(--text-2);
}
.marq-item::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

/* ==========================================================================
   STUDIO / CTA / FOOTER
   ========================================================================== */
.studio{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:900px){.studio{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--s6);align-items:center}}
.portrait{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
/* -------------------------------------------------- filters, on a phone
   Nineteen chips down a phone screen means two full screens of controls
   before the first project. On narrow screens the same two questions become
   one sticky row, and the options open in a sheet from the bottom — the
   pattern every app uses, because it keeps the work on screen. */
.fbar{display:none}
.fpill-wide{display:none}
/* Thirteen discipline chips is a wall on any screen, and it only grows as work
   is added. Sector is the cut people make first and stays as chips; discipline
   collapses to one control that opens the full list with counts. */
@media(min-width:900px){
  .filter-row #filters{display:none}
  .fpill-wide{display:inline-flex;justify-self:start;align-self:center;
    min-width:230px;justify-content:space-between}
}
@media(max-width:899px){
  .filter-set{display:none}
  .fbar{display:flex;gap:8px;align-items:center;position:sticky;top:0;z-index:40;
    margin-inline:calc(var(--pad) * -1);padding:10px var(--pad);
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .fbar::-webkit-scrollbar{display:none}
}
.fpill{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 15px;border-radius:var(--pill);
  border:1px solid var(--line-2);background:none;color:var(--text-2);
  font-size:.8125rem;font-weight:500;cursor:pointer}
.fpill-k{color:var(--text-2)}
.fpill-v{color:var(--ink);font-weight:500}
.fpill::after{content:'';width:7px;height:7px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);opacity:.55}
.fpill.on{background:var(--ink);border-color:var(--ink)}
.fpill.on .fpill-k,.fpill.on .fpill-v{color:var(--on-ink)}
.fpill-i{margin-left:auto;padding:8px 12px}
.fpill-i::after{content:none}

.fsheet{border:0;padding:0;background:none;width:100%;max-width:none;max-height:100%;
  margin:0;position:fixed;inset:auto 0 0 0}
.fsheet::backdrop{background:rgba(11,13,20,.5);backdrop-filter:blur(4px)}
.fsheet-in{background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--s3) var(--pad) calc(var(--s3) + env(safe-area-inset-bottom));
  max-height:82vh;display:flex;flex-direction:column;
  animation:fsheet-up .3s var(--ease)}
@keyframes fsheet-up{from{transform:translateY(16px)}to{transform:none}}
.fsheet-grab{width:38px;height:4px;border-radius:2px;background:var(--line-2);
  margin:2px auto var(--s3)}
.fsheet-in header{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding-bottom:var(--s2)}
.fsheet-in h2{margin:0;font-size:1.15rem;font-weight:500;letter-spacing:-.02em}
.fsheet-x{border:0;background:none;color:var(--text-2);font-size:1.3rem;line-height:1;
  min-width:44px;min-height:44px;cursor:pointer}
.fsheet-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.fopt{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:54px;
  padding:12px 0;border:0;border-bottom:1px solid var(--line);background:none;
  color:var(--text);font-size:1rem;text-align:left;cursor:pointer}
.fopt:last-child{border-bottom:0}
.fopt-n{margin-left:auto;color:var(--text-2);font-size:.8125rem;font-variant-numeric:tabular-nums}
.fopt-tick{width:18px;height:18px;flex:0 0 auto;color:var(--accent);opacity:0}
.fopt[aria-pressed="true"]{font-weight:500}
.fopt[aria-pressed="true"] .fopt-tick{opacity:1}
.fsheet-foot{display:flex;gap:10px;padding-top:var(--s3);border-top:1px solid var(--line)}
.fsheet-foot .btn{flex:1;min-height:50px;border-radius:var(--pill);font-size:.875rem;cursor:pointer}
.btn-ghost{border:1px solid var(--line-2);background:none;color:var(--text)}
.btn-solid{border:1px solid var(--ink);background:var(--ink);color:var(--on-ink)}
@media(prefers-reduced-motion:reduce){.fsheet-in{animation:none}}

/* ------------------------------------------------------------- the player
   One skin over three engines. The big button is the whole affordance until
   the film runs, then it leaves at once and the thin bar takes over. */
.vp{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--ink);
  aspect-ratio:16/9}
.vp-media{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.vp-ui{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(11,13,20,.5),transparent 40%)}
.vp-big{width:78px;height:78px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);background:var(--bg);
  box-shadow:0 6px 30px rgba(0,0,0,.28);
  transition:transform .12s var(--ease),opacity .12s var(--ease),background .3s}
.vp-big:hover{background:var(--accent);color:var(--on-ink);transform:scale(1.06)}
/* while it plays the big button is gone, and stays gone under the pointer —
   the bottom bar is the control surface from then on */
.vp.is-playing .vp-big{opacity:0;transform:scale(.9);pointer-events:none;visibility:hidden}
.vp-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  gap:12px;padding:10px 14px 12px;opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.vp.is-playing .vp-bottom,.vp:hover .vp-bottom,.vp:focus-within .vp-bottom,
.vp.is-scrubbing .vp-bottom{opacity:1;transform:none}
.vp-toggle,.vp-sound{border:0;background:none;color:#fff;cursor:pointer;padding:6px;
  min-width:34px;min-height:34px;display:grid;place-items:center;opacity:.85}
.vp-toggle:hover,.vp-sound:hover{opacity:1;color:var(--accent)}
/* a 3px rail, but a 22px target — a hairline is impossible to hit on a phone */
.vp-track{position:relative;flex:1;height:22px;cursor:pointer;touch-action:none}
.vp-seek,.vp-fill{position:absolute;top:50%;transform:translateY(-50%);height:3px;border-radius:2px}
.vp-seek{left:0;right:0;background:rgba(255,255,255,.28)}
.vp-fill{left:0;width:0;background:var(--accent)}
.vp-knob{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,-50%) scale(0);
  transition:transform .15s var(--ease)}
.vp:hover .vp-knob,.vp:focus-within .vp-knob,.vp.is-scrubbing .vp-knob{transform:translate(-50%,-50%) scale(1)}
.vp.is-scrubbing .vp-fill,.vp.is-scrubbing .vp-knob{transition:none}
.vp-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.vp-time{color:#fff;font-size:.6875rem;letter-spacing:.06em;font-variant-numeric:tabular-nums;opacity:.8;
  min-width:74px;text-align:right}
.vp.is-loud .vp-sound{color:var(--accent);opacity:1}
@media(pointer:coarse){
  .vp-bottom{opacity:1;transform:none}
  .vp-toggle,.vp-sound{min-width:44px;min-height:44px}
  .vp-track{height:30px}
  .vp-knob{transform:translate(-50%,-50%) scale(1)}
  .vp-big{width:64px;height:64px}
}
@media(prefers-reduced-motion:reduce){
  .vp-big,.vp-bottom,.vp-knob{transition:none}
}

/* -------------------------------------------------- filters, on a phone
   Nineteen chips down a phone screen means two full screens of controls
   before the first project. On narrow screens the same two questions become
   one sticky row, and the options open in a sheet from the bottom — the
   pattern every app uses, because it keeps the work on screen. */
.fbar{display:none}
@media(max-width:899px){
  .filter-set{display:none}
  .fbar{display:flex;gap:8px;align-items:center;position:sticky;top:0;z-index:40;
    margin-inline:calc(var(--pad) * -1);padding:10px var(--pad);
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .fbar::-webkit-scrollbar{display:none}
}
.fpill{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 15px;border-radius:var(--pill);
  border:1px solid var(--line-2);background:none;color:var(--text-2);
  font-size:.8125rem;font-weight:500;cursor:pointer}
.fpill-k{color:var(--text-2)}
.fpill-v{color:var(--ink);font-weight:500}
.fpill::after{content:'';width:7px;height:7px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);opacity:.55}
.fpill.on{background:var(--ink);border-color:var(--ink)}
.fpill.on .fpill-k,.fpill.on .fpill-v{color:var(--on-ink)}
.fpill-i{margin-left:auto;padding:8px 12px}
.fpill-i::after{content:none}

.fsheet{border:0;padding:0;background:none;width:100%;max-width:none;max-height:100%;
  margin:0;position:fixed;inset:auto 0 0 0}
.fsheet::backdrop{background:rgba(11,13,20,.5);backdrop-filter:blur(4px)}
.fsheet-in{background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--s3) var(--pad) calc(var(--s3) + env(safe-area-inset-bottom));
  max-height:82vh;display:flex;flex-direction:column;
  animation:fsheet-up .3s var(--ease)}
@keyframes fsheet-up{from{transform:translateY(16px)}to{transform:none}}
.fsheet-grab{width:38px;height:4px;border-radius:2px;background:var(--line-2);
  margin:2px auto var(--s3)}
.fsheet-in header{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding-bottom:var(--s2)}
.fsheet-in h2{margin:0;font-size:1.15rem;font-weight:500;letter-spacing:-.02em}
.fsheet-x{border:0;background:none;color:var(--text-2);font-size:1.3rem;line-height:1;
  min-width:44px;min-height:44px;cursor:pointer}
.fsheet-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.fopt{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:54px;
  padding:12px 0;border:0;border-bottom:1px solid var(--line);background:none;
  color:var(--text);font-size:1rem;text-align:left;cursor:pointer}
.fopt:last-child{border-bottom:0}
.fopt-n{margin-left:auto;color:var(--text-2);font-size:.8125rem;font-variant-numeric:tabular-nums}
.fopt-tick{width:18px;height:18px;flex:0 0 auto;color:var(--accent);opacity:0}
.fopt[aria-pressed="true"]{font-weight:500}
.fopt[aria-pressed="true"] .fopt-tick{opacity:1}
.fsheet-foot{display:flex;gap:10px;padding-top:var(--s3);border-top:1px solid var(--line)}
.fsheet-foot .btn{flex:1;min-height:50px;border-radius:var(--pill);font-size:.875rem;cursor:pointer}
.btn-ghost{border:1px solid var(--line-2);background:none;color:var(--text)}
.btn-solid{border:1px solid var(--ink);background:var(--ink);color:var(--on-ink)}
@media(prefers-reduced-motion:reduce){.fsheet-in{animation:none}}

/* ------------------------------------------------------------- the player
   One skin over two engines. The big button is the whole affordance until the
   film is running, then it steps out of the way and the thin bar takes over. */
.vp{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--ink);
  aspect-ratio:16/9}
.vp-media{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.vp-ui{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(11,13,20,.45),transparent 38%);
  transition:opacity .4s var(--ease)}
.vp-big{width:78px;height:78px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);background:var(--bg);
  box-shadow:0 6px 30px rgba(0,0,0,.28);
  transition:transform .45s var(--ease),opacity .45s var(--ease),background .3s}
.vp-big:hover{background:var(--accent);color:var(--on-ink);transform:scale(1.06)}
.vp.is-playing .vp-big{opacity:0;transform:scale(.82);pointer-events:none}
.vp.is-playing:hover .vp-big,.vp.is-playing:focus-within .vp-big{opacity:1;transform:none;pointer-events:auto}
.vp-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  gap:12px;padding:12px 14px;opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.vp.is-playing .vp-bottom,.vp:hover .vp-bottom,.vp:focus-within .vp-bottom{opacity:1;transform:none}
.vp-toggle,.vp-sound{border:0;background:none;color:#fff;cursor:pointer;padding:6px;
  min-width:34px;min-height:34px;display:grid;place-items:center;opacity:.85}
.vp-toggle:hover,.vp-sound:hover{opacity:1;color:var(--accent)}
.vp-track{flex:1;height:22px;display:flex;align-items:center;cursor:pointer}
.vp-seek{position:absolute;left:0;right:0;height:3px;background:rgba(255,255,255,.28);border-radius:2px}
.vp-track{position:relative}
.vp-fill{position:absolute;left:0;height:3px;width:0;background:var(--accent);border-radius:2px;
  transition:width .2s linear}
.vp-time{color:#fff;font-size:.6875rem;letter-spacing:.06em;font-variant-numeric:tabular-nums;opacity:.8;
  min-width:74px;text-align:right}
.vp.is-loud .vp-sound{color:var(--accent);opacity:1}
@media(pointer:coarse){
  .vp-bottom{opacity:1;transform:none}
  .vp-toggle,.vp-sound{min-width:44px;min-height:44px}
  .vp-big{width:64px;height:64px}
}
@media(prefers-reduced-motion:reduce){
  .vp-big,.vp-bottom,.vp-ui,.vp-fill{transition:none}
  .vp.is-playing .vp-big{opacity:1;transform:none;pointer-events:auto}
}

/* ------------------------------------------------------------- preloaders

   Both use the WNH mark itself, as a CSS mask over a moving gradient, so the
   loading state is the logo rather than a generic spinner. One SVG, no extra
   request — the browser already has it for the nav. */
.preload{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--bg);transition:opacity .45s ease,visibility .45s;
  animation:pl-failsafe 1s 8s forwards}
.preload.done{opacity:0;visibility:hidden;pointer-events:none}
.pl-mark{width:76px;height:76px;
  -webkit-mask:url('../logo.svg') center/contain no-repeat;
          mask:url('../logo.svg') center/contain no-repeat;
  background:linear-gradient(100deg,var(--ink) 0 42%,var(--accent) 50%,var(--ink) 58% 100%);
  background-size:280% 100%;animation:pl-sweep 1.35s linear infinite}
@keyframes pl-sweep{from{background-position:180% 0}to{background-position:-80% 0}}
/* if the script never runs, the overlay must not sit there forever */
@keyframes pl-failsafe{to{opacity:0;visibility:hidden}}

/* the same mark, quiet, holding an image box until the picture arrives */
.media,.card-media{position:relative}
.media::before,.card-media::before{content:'';position:absolute;left:50%;top:50%;
  width:clamp(22px,13%,60px);aspect-ratio:1;transform:translate(-50%,-50%);
  -webkit-mask:url('../logo.svg') center/contain no-repeat;
          mask:url('../logo.svg') center/contain no-repeat;
  background:var(--ink);opacity:.10;transition:opacity .35s ease;
  animation:pl-breathe 1.9s ease-in-out infinite}
.media.is-loaded::before,.card-media.is-loaded::before{opacity:0;animation:none}
@keyframes pl-breathe{0%,100%{opacity:.10}50%{opacity:.22}}
html.js .media img,html.js .card-media img{opacity:0;transition:opacity .5s ease}
html.js .media.is-loaded img,html.js .card-media.is-loaded img{opacity:1}
/* video and the studio loop bring their own holding frame */
.media:has(video)::before,.portrait::before{content:none}
@media(prefers-reduced-motion:reduce){
  .pl-mark,.media::before,.card-media::before{animation:none}
  .preload,html.js .media img,html.js .card-media img{transition:none}
}

/* the mark holds the frame until the motion is ready to take over */
.portrait.is-loop{background:var(--loop-bg,var(--surface-2))}
.loop-still{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  background:var(--loop-bg,var(--surface-2));transition:opacity .55s ease}
.loop-still svg{width:34%;max-width:150px;height:auto;color:var(--ink);opacity:.16}
.is-dark .loop-still svg{color:var(--on-ink);opacity:.22}
.is-dark .loop-play .play{background:var(--on-ink);color:var(--ink)}
.loop-still img{width:100%;height:100%;object-fit:cover}
.is-loop.is-ready .loop-still{opacity:0;pointer-events:none}
.loop-media{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:auto;aspect-ratio:240/322;min-height:100%;min-width:100%;
  border:0;object-fit:cover;opacity:0;transition:opacity .55s ease}
video.loop-media[controls]{pointer-events:auto}
video.loop-media{pointer-events:none}
iframe.loop-media{pointer-events:none}
.is-loop.is-ready .loop-media{opacity:1}
.loop-play{position:absolute;inset:0;width:100%;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer}
.loop-play .play{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--on-ink);font-size:14px;padding-left:3px}
.loop-play:hover .play{background:var(--accent);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.loop-still,.loop-media{transition:none}}
.portrait .ph{background:linear-gradient(160deg,#D9D7D0,#B9B7AF 52%,#8E8C85)}
.avail{
  display:inline-flex;align-items:center;gap:10px;margin-top:var(--s4);
  border:1px solid var(--line-2);border-radius:var(--pill);padding:10px 18px;min-height:44px;
  font-size:.8125rem;color:var(--text-2);
}
.avail i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

.cta-link{
  display:block;width:100%;text-align:left;padding-block:clamp(var(--s5),8vw,var(--s7));
  font-size:clamp(2.4rem,9vw,7rem);font-weight:500;letter-spacing:-.04em;line-height:.98;
  transition:color .4s var(--ease);
}
.cta-link:hover{color:var(--accent)}
.cta-foot{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;padding-bottom:var(--s5)}

footer{border-top:1px solid var(--line);padding-block:var(--s4)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:700px){.foot-grid{grid-template-columns:repeat(4,1fr)}
  .foot-grid.foot-3{grid-template-columns:repeat(3,1fr)}}
.foot-col h4{margin:0 0 var(--s2);font-size:.6875rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2)}
.foot-col a,.foot-col p{display:flex;align-items:center;margin:0;min-height:40px;font-size:.875rem}
.foot-col a{transition:color .3s}
.foot-col a:hover{color:var(--accent)}
.foot-btn{display:flex;align-items:center;min-height:40px;padding:0;font-size:.875rem;
  color:var(--text);text-align:left;transition:color .3s}
.foot-btn:hover{color:var(--accent)}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line)}

/* ==========================================================================
   CASE STUDY
   ========================================================================== */
.case-hero{padding-top:calc(var(--s6) + var(--s4))}
.case-title{font-size:clamp(2.2rem,6.4vw,5.4rem);font-weight:500;letter-spacing:-.035em;line-height:1.02;margin:var(--s3) 0 0;max-width:18ch}
.case-summary{margin:var(--s4) 0 0;max-width:44ch;font-size:clamp(1.05rem,1.8vw,1.45rem);line-height:1.5;color:var(--text-2)}
.case-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:var(--s5);border-top:1px solid var(--line)}
@media(min-width:800px){.case-meta{grid-template-columns:repeat(4,1fr)}}
.case-meta div{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--line)}
.case-meta dt{margin:0 0 7px;font-size:.6875rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2)}
.case-meta dd{margin:0;font-size:1rem;font-weight:500;line-height:1.35}

.blocks{display:flex;flex-direction:column;gap:clamp(var(--s5),8vw,var(--s7))}
.media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--surface-2)}
.media img,.media video{width:100%;height:auto}
.ratio-16x9{aspect-ratio:16/9}
.ratio-4x5{aspect-ratio:4/5}
figcaption,.cap-line{margin-top:12px;font-size:.8125rem;color:var(--text-2)}
.blk-wide{max-width:1080px;margin-inline:auto}

.embed{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--ink)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-facade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.embed-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.play{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:11px;min-height:52px;
  padding:14px 24px;border-radius:var(--pill);background:var(--bg);color:var(--ink);
  font-size:.8125rem;font-weight:500;transition:background .3s var(--ease),color .3s var(--ease);
}
.embed-facade:hover .play{background:var(--accent);color:var(--ink)}

.blk-text{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:900px){.blk-text{grid-template-columns:260px minmax(0,1fr);gap:var(--s5)}}
.blk-text h2{margin:0;font-size:1.35rem;font-weight:500;letter-spacing:-.02em}
.blk-text p{margin:0 0 1em;max-width:62ch;font-size:1.08rem;line-height:1.7}
.blk-text p:last-child{margin-bottom:0}

/* justified row: width in proportion to each image's own ratio, so the heights
   match and nothing is cropped or left floating in a too-tall box */
.blk-images{display:flex;flex-wrap:wrap;gap:var(--s3)}
.blk-images .media{flex:var(--ar,1.5) 1 calc(var(--ar,1.5) * 260px);min-width:0;aspect-ratio:var(--ar,1.5)}
.blk-images .media img,.blk-images .media video{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.blk-images{display:grid;grid-template-columns:1fr}
  .blk-images .media{aspect-ratio:auto}
  .blk-images .media img{height:auto}}

.blk-quote blockquote{margin:0;max-width:22ch;font-size:clamp(1.7rem,4.2vw,3.2rem);font-weight:400;letter-spacing:-.03em;line-height:1.14}
.blk-quote cite{display:block;margin-top:var(--s3);font-style:normal;font-size:.8125rem;color:var(--text-2)}

.blk-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);padding:var(--s5) var(--s4);border-radius:var(--r-lg);background:var(--surface)}
@media(min-width:1000px){.blk-stats{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-size:clamp(2rem,4vw,3rem);font-weight:500;letter-spacing:-.04em;line-height:.95}
.stat span{display:block;margin-top:10px;font-size:.8125rem;color:var(--text-2)}

.credits{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:700px){.credits{grid-template-columns:repeat(3,1fr)}}
.credit{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--line)}
.credit dt{margin-bottom:6px;font-size:.6875rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2)}
.credit dd{margin:0;font-size:1rem;font-weight:500}

.next{display:block;border-top:1px solid var(--line);padding-block:clamp(var(--s5),7vw,var(--s7));transition:color .4s var(--ease)}
.next:hover{color:var(--accent)}
.next .t{display:block;margin-top:var(--s2);font-size:clamp(1.8rem,6vw,4.4rem);font-weight:500;letter-spacing:-.035em;line-height:1.02}

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.pf-roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.pf-roles>span{font-size:.8125rem;font-weight:500;border:1px solid var(--line-2);border-radius:var(--pill);padding:9px 16px}
.deep{display:flex;flex-direction:column;gap:clamp(var(--s5),7vw,var(--s7))}
.deep-item{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:900px){.deep-item{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:center}
  .deep-item:nth-child(even) .deep-media{order:2}}
.deep-media{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.deep-media>*{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.deep-media:hover>*{transform:scale(1.03)}
.deep-body h3{margin:10px 0 0;font-size:clamp(1.5rem,3vw,2.3rem);font-weight:500;letter-spacing:-.03em;line-height:1.06}
.deep-body p{margin:var(--s2) 0 0;color:var(--text-2);font-size:1.02rem;line-height:1.65;max-width:46ch}

.tools{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:600px){.tools{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tools{grid-template-columns:repeat(4,1fr)}}
.tool{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--line)}
.tool h4{margin:0 0 8px;font-size:.6875rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-2)}
.tool p{margin:0;font-size:.95rem;line-height:1.55;color:var(--text-2)}

.empty{padding:var(--s6) 0;text-align:center;color:var(--text-2)}
[hidden]{display:none !important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
}


/* ==========================================================================
   ENQUIRY DIALOG
   A mailto: loses most people at the point their mail client opens, so the
   button opens a form instead. Native <dialog> for focus handling and Esc.
   ========================================================================== */
.sheet-dlg{
  border:0;padding:0;background:transparent;max-width:min(560px,92vw);width:100%;
  color:var(--text);
}
.sheet-dlg::backdrop{background:rgba(11,13,20,.55);backdrop-filter:blur(6px)}
.sheet-dlg .enq,.sheet-dlg .enq-done{
  position:relative;background:var(--surface);border-radius:var(--r-lg);
  padding:clamp(26px,4vw,44px);box-shadow:0 30px 80px rgba(11,13,20,.24);
}
.sheet-dlg h2{
  margin:10px 0 0;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.1;max-width:18ch;
}
.enq-note{margin:12px 0 var(--s4);color:var(--text-2);font-size:.95rem;line-height:1.55;max-width:44ch}
.enq-x{
  position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--text-2);
  transition:background .25s,color .25s;
}
.enq-x:hover{background:var(--bg);color:var(--text)}
.enq-f{margin-bottom:16px}
.enq-f label{
  display:block;margin-bottom:7px;font-size:.6875rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-2);
}
.enq-f input,.enq-f textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  color:var(--text);padding:12px 14px;font:inherit;font-size:1rem;resize:vertical;
}
.enq-f input:focus,.enq-f textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}
.enq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enq-err{min-height:22px;color:var(--accent-2);font-size:.875rem;line-height:1.4}
.enq-act{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:6px}
.enq-alt{font-size:.8125rem;color:var(--text-2);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.enq-alt:hover{color:var(--text)}
.enq-send:disabled{opacity:.5;cursor:not-allowed}