/* ============================================================
   BLOB WITH AN EYE — STUDIO SITE V2
   Structure modelled on the Kajo reference; skinned entirely
   in BWAE brand: Electric Red · Black · Off-white.
   Type: Anton SC (display) · Instrument Serif italic (labels)
         · Geist (body)
   ============================================================ */

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

:root{
  --red:#E60000;
  --red-deep:#C00000;
  /* Electric Red measures 4.11:1 on the black band — under the 4.5:1 floor
     for small text. This is the same red lifted for a dark ground (5.9:1),
     the way you'd trap a spot colour for dark stock. Large display text can
     still use --red; this is for anything under ~19px on --band. */
  --red-on-band:#FF4436;
  --ink:#0A0A0A;
  --ink-soft:#161616;
  --paper:#FAFAF7;
  --paper-2:#F0EEE8;
  --line:rgba(10,10,10,.14);
  --line-soft:rgba(10,10,10,.08);
  --line-inv:rgba(250,250,247,.16);
  --muted:rgba(10,10,10,.62);
  --muted-inv:rgba(250,250,247,.66);

  /* dark bands (menu, cards band, footer, curtain) — themed separately so
     they keep contrast against the page in both modes */
  --band:#0A0A0A;
  --band-2:#161616;
  --band-fg:#FAFAF7;
  --nav-bg:rgba(250,250,247,.82);
  --placeholder:rgba(10,10,10,.6);   /* .35 measured 2.33:1 — under 1.4.3 */
  --hero-video:.5;
  --decor:.06;
  --mount-shadow:rgba(10,10,10,.14);
  --mount-shadow-strong:rgba(10,10,10,.24);

  --font-display:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Instrument Serif",Georgia,serif;
  --font-body:"Geist","Inter","Helvetica Neue",Arial,sans-serif;

  --maxw:1440px;
  --gut:clamp(20px,4vw,56px);
  --rad:16px;
  --rad-lg:24px;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
  color-scheme:light;
}

/* ---------- dark mode — ground/ink flip; red stays red ---------- */
:root[data-theme="dark"]{
  --ink:#F4F3EE;
  --ink-soft:#1E1D1B;
  --paper:#0E0E0E;
  --paper-2:#1B1A18;
  --line:rgba(244,243,238,.16);
  --line-soft:rgba(244,243,238,.08);
  --muted:rgba(244,243,238,.6);
  --band:#161513;
  --band-2:#211F1D;
  --band-fg:#F4F3EE;
  --nav-bg:rgba(14,14,14,.82);
  --placeholder:rgba(244,243,238,.5);  /* .32 measured 2.70:1 — under 1.4.3 */
  --mount-shadow:rgba(0,0,0,.5);
  --mount-shadow-strong:rgba(0,0,0,.68);
  --hero-video:.34;
  --decor:.08;
  color-scheme:dark;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}

/* ---------- fixed background layers ---------- */
.bg-decor{position:fixed;inset:0;z-index:-1;pointer-events:none;}
.bg-decor img{position:absolute;width:clamp(120px,16vw,260px);opacity:var(--decor);}
:root[data-theme="dark"] .bg-decor img{filter:invert(1) hue-rotate(180deg);}
.bg-decor .b1{top:12%;right:-3%;transform:rotate(18deg);}
.bg-decor .b2{top:54%;left:-4%;transform:rotate(-14deg);width:clamp(100px,13vw,220px);}
.bg-decor .b3{bottom:6%;right:11%;transform:rotate(-8deg);width:clamp(90px,11vw,190px);}
.bg-decor .b4{top:80%;left:40%;transform:rotate(24deg);width:clamp(70px,8vw,140px);opacity:calc(var(--decor)*.8);}

.hero-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:calc(var(--hero-video) * var(--hf,1));
  will-change:opacity;
}
.hero-bg[data-off]{visibility:hidden;}
.hero-bg video{width:100%;height:100%;object-fit:cover;}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,var(--paper) 97%);
}
/* height:auto lets the width/height attributes on every <img> reserve the
   right box while CSS still drives the rendered size. Without it those
   attributes would lock the element to its intrinsic height and squash. */
img,video,svg{display:block;max-width:100%;}
img{height:auto;}

/* Visible to screen readers, invisible on screen. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a,button{touch-action:manipulation;}
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}
section[id]{scroll-margin-top:5.5rem;}
::-webkit-scrollbar{width:12px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:3px solid var(--paper);}
::-webkit-scrollbar-thumb:hover{background:var(--red);}
ul,ol{list-style:none;}
::selection{background:var(--red);color:var(--paper);}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px;}

/* ---------- type ----------
   Display = Work Sans Black (900), uppercase, tight negative tracking
   per the BWAE identity spec. Work Sans is wider than the old condensed
   face, so display sizes are trimmed and leading kept near 0.9. */
.d-hero{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(3.6rem,14vw,13.5rem);line-height:.9;letter-spacing:-.035em;
}
.d-xl{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.7rem,7.6vw,6.6rem);line-height:.92;letter-spacing:-.03em;
}
.d-lg{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2rem,5.2vw,4.3rem);line-height:.95;letter-spacing:-.028em;
}
.d-md{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2.4rem);line-height:1;letter-spacing:-.02em;
}
.serif,.label em,.d-hero em,.d-xl em,.d-lg em{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;
}
.label{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.2;color:var(--red);
}
.tag{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--muted);
}
.lead{font-size:clamp(1.06rem,1.5vw,1.35rem);line-height:1.45;max-width:44ch;}
.body-m{max-width:60ch;}
.body-m strong{font-weight:600;}

/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.sec{padding:clamp(4.5rem,10vw,9.5rem) 0;}
.sec-tight{padding:clamp(3rem,6vw,5.5rem) 0;}
main{min-height:60vh;}

/* section header pattern: (01) + big heading + sub */
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,4vw,4rem);align-items:end;margin-bottom:clamp(2.4rem,6vw,5rem);}
.sec-head .label{padding-bottom:.9em;}
.sec-head-main h2{margin-bottom:.35em;}
.sec-head-main .sub{max-width:46ch;color:var(--muted);}
.sec-head.split{grid-template-columns:auto 1fr auto;}

/* ---------- record-spin badge (in-rotation page signature) ---------- */
.spin-badge{
  position:relative;width:clamp(150px,16vw,210px);aspect-ratio:1;
  display:grid;place-items:center;margin-top:1.2rem;
}
.spin-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin-rec 22s linear infinite;}
.spin-badge svg text{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:10.5px;letter-spacing:.28em;fill:var(--red);
}
.spin-badge img{width:34%;height:auto;}
@keyframes spin-rec{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.spin-badge svg{animation:none;}}

/* ---------- founders' cohort bar (dormant until launch) ---------- */
/* Set by the head script before first paint — a bar dismissed earlier in the
   session must never render and then vanish, shoving the nav down with it. */
html.cohort-hidden .cohort-bar{display:none;}
/* Full-bleed red band; the CONTENT inside is constrained to the same
   max-width + gutter as .nav-inner so the two rows line up vertically. */
.cohort-bar{
  position:relative;z-index:60;background:var(--red);color:#fff;
  font-size:.82rem;letter-spacing:.06em;
}
.cohort-inner{
  position:relative;
  max-width:var(--maxw);margin:0 auto;
  /* Symmetric inline padding — the old 2.4em/1em split meant the "centred"
     text was actually ~1.4em left of centre. The extra 2em past the gutter
     keeps the copy clear of the dismiss button. */
  padding:.55em calc(var(--gut) + 2em);
  text-align:center;
}
.cohort-msg{margin:0;}
/* Long copy by default; swap to the short line once the bar would start
   wrapping past two lines. Breakpoint tuned to where the full sentence
   stops fitting, not to a device size. */
.cohort-short{display:none;}
.cohort-bar strong{font-weight:700;text-transform:uppercase;letter-spacing:.12em;}
.cohort-bar .serif{font-family:var(--font-serif);font-style:italic;text-transform:none;letter-spacing:0;}
.cohort-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600;}
.cohort-bar .cohort-x{
  /* Anchored to .cohort-inner, so right:var(--gut) puts it on exactly the same
     vertical line as the theme toggle / burger in the nav directly below. */
  position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:none;border:0;color:#fff;font-size:1rem;cursor:pointer;line-height:1;padding:0;
  transition:background .2s;
}
.cohort-bar .cohort-x:hover{background:rgba(255,255,255,.22);}

/* Narrow screens: swap to the short copy and lay the bar out as a flex row.
   Centring around an absolutely-placed × costs symmetric padding — ~92px of a
   375px screen — which pushed the copy onto an extra line. As a flex row the
   message gets that space back, and the × still lands on the same gutter line
   as the burger in the nav below.

   This block MUST come after the .cohort-bar .cohort-x rule above: a media
   query adds no specificity, so an equal-specificity rule placed earlier
   would lose on source order and the button would stay absolute. */
@media (max-width:820px){
  .cohort-long{display:none;}
  .cohort-short{display:inline;}
  .cohort-inner{
    display:flex;align-items:center;gap:.6em;
    padding:.55em var(--gut);
    text-align:left;
  }
  .cohort-bar .cohort-x{position:static;transform:none;flex:none;margin-left:auto;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--ink);color:var(--paper);
  font-weight:500;font-size:.95rem;line-height:1;
  padding:1.05em 1.7em;border-radius:500px;
  transition:background .25s var(--ease),transform .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:var(--red);transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.97);}
.btn .arr{transition:transform .25s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.btn-paper{background:var(--paper);color:var(--ink);}
.btn-paper:hover{background:var(--red);color:var(--paper);}
.btn-sm{padding:.8em 1.35em;font-size:.88rem;}

/* underline link */
.u-link{position:relative;font-weight:500;}
.u-link::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:currentColor;transform-origin:right;transition:transform .35s var(--ease);}
.u-link:hover::after{transform:scaleX(0);transform-origin:left;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  /* The announcement bar sits in normal flow above this fixed nav, so without
     an offset the nav paints straight over it and the wordmark collides with
     the banner. --nav-offset holds the bar's remaining on-screen height and is
     maintained in main.js: full height at rest, shrinking to 0 as the bar
     scrolls away, so the nav rides down with it and then locks to the top.
     translate3d rather than `top` keeps it on the compositor. */
  transform:translate3d(0,var(--nav-offset,0px),0);
  transition:background .3s,box-shadow .3s,backdrop-filter .3s;
}
/* Pre-JS default so the nav never paints over the bar on first frame.
   main.js replaces this with the measured pixel height. */
body:has(.cohort-bar) .nav{--nav-offset:2.6rem;}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:1.1rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line-soft);}
.nav-logo{display:flex;align-items:center;}
.nav-logo .nav-wordmark{height:clamp(34px,3.6vw,46px);width:auto;max-width:min(56vw,360px);object-fit:contain;object-position:left center;}
.nav-wordmark.only-dark{display:none;}
:root[data-theme="dark"] .nav-wordmark.only-light{display:none;}
:root[data-theme="dark"] .nav-wordmark.only-dark{display:block;}
.theme-toggle{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--line);font-size:1rem;line-height:1;flex:none;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.theme-toggle:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);}
.theme-toggle .ico-light{display:none;}
:root[data-theme="dark"] .theme-toggle .ico-dark{display:none;}
:root[data-theme="dark"] .theme-toggle .ico-light{display:inline;}
.nav-links{display:flex;gap:clamp(1.2rem,2.4vw,2.4rem);font-size:.95rem;font-weight:500;}
.nav-links a{position:relative;padding:.2em 0;transition:color .2s;}
.nav-links a:hover{color:var(--red);}
.nav-links a[aria-current="page"]{color:var(--red);}
.nav-links a[aria-current="page"]::before{
  content:"";position:absolute;left:-.9em;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--red);
}
.nav-cta{display:flex;align-items:center;gap:1rem;}

/* burger */
.burger{display:none;width:44px;height:44px;position:relative;z-index:1001;}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .25s,background .3s;}
.burger span:nth-child(1){top:16px;}
.burger span:nth-child(2){top:22px;}
.burger span:nth-child(3){top:28px;}
body.menu-open .burger span{background:var(--band-fg);}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* mobile overlay menu */
.menu{
  position:fixed;inset:0;z-index:950;background:var(--band);color:var(--band-fg);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--gut) + 2rem) var(--gut) var(--gut);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .6s var(--ease-io),visibility 0s .6s;
}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s var(--ease-io);}
body.menu-open{overflow:hidden;}
.menu-links{display:flex;flex-direction:column;gap:.2em;margin-bottom:2.5rem;}
.menu-links a{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(2.6rem,11vw,4.6rem);line-height:1.04;
  display:flex;align-items:baseline;gap:.4em;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s;
}
.menu-links a:hover{color:var(--red);}
.menu-links a .label{font-size:1rem;color:var(--muted-inv);}
body.menu-open .menu-links a{opacity:1;transform:none;}
.menu-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted-inv);font-size:.86rem;}
.menu-meta a:hover{color:var(--red-on-band);}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(6rem,12vh,9rem) 0 clamp(1.6rem,4vh,3rem);position:relative;}
.hero-title{margin-left:-.04em;}
.hero .hero-title{font-size:clamp(3rem,12.5vw,12rem);line-height:.9;letter-spacing:-.04em;}
.hero-row{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
.hero-loc{margin:0.6rem 0 3.2rem;}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;border-top:1px solid var(--line);padding-top:1.4rem;}
.hero-tag{max-width:38ch;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.45;}
.hero-scroll{white-space:nowrap;color:var(--muted);font-family:var(--font-serif);font-style:italic;font-size:1.05rem;}
.hero-scroll .dot{display:inline-block;animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* mask line reveal */
.mask{display:block;overflow:hidden;}
.mask>span{display:block;transform:translateY(115%);transition:transform 1s var(--ease);}
html.no-js .mask>span{transform:none;}
body.is-loaded .mask>span{transform:translateY(0);}

/* ============================================================
   STATEMENT (About Us block, home)
   ============================================================ */
.statement{border-top:1px solid var(--line);}
.statement .label{margin-bottom:clamp(1.6rem,4vw,3rem);display:block;}
.statement-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:end;}
.statement-lines{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.5rem,7vw,6.4rem);line-height:.98;letter-spacing:-.03em;}
.statement-lines .ln{display:block;}
.statement-lines .ln.indent{padding-left:clamp(2rem,8vw,8rem);}
.statement-lines .serif{font-size:.92em;color:var(--red);}
.statement-side p{color:var(--muted);margin-bottom:1.8rem;max-width:38ch;}
.statement-side p strong{color:var(--ink);font-weight:600;}

/* ============================================================
   CLIENTS MARQUEE
   ============================================================ */
.clients{padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--line);}
.clients .label{display:block;text-align:center;margin-bottom:1.6rem;}
.marquee{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marq-track{display:inline-flex;align-items:baseline;animation:marq 36s linear infinite;will-change:transform;}
.marq-track>span{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.7rem,4vw,3.2rem);line-height:1.1;
  padding-right:.8em;color:var(--ink);
}
.marq-track>span i{font-style:normal;color:var(--red);padding-left:.8em;}
/* The track holds THREE identical copies of the client list, so one seamless
   cycle is exactly one copy — a third of the track. -50% lands mid-copy and
   snaps backwards every 36s. If you ever change the copy count, change this. */
@keyframes marq{to{transform:translateX(-33.3333%);}}
.marquee:hover .marq-track{animation-play-state:paused;}

/* ============================================================
   PROJECT LIST
   ============================================================ */
.proj-list{border-top:1px solid var(--line);}
.proj-row{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.4rem,3.4vw,2.6rem) 0;border-bottom:1px solid var(--line);
  position:relative;
}
.proj-row .idx{font-family:var(--font-serif);font-style:italic;color:var(--muted);font-size:1.05rem;min-width:2.6em;}
.proj-row h3{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.9rem,5.6vw,4.6rem);line-height:.95;
  transition:transform .45s var(--ease),color .3s;
}
.proj-row .cats{color:var(--muted);font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.proj-row .yr{font-family:var(--font-serif);font-style:italic;font-size:1.1rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}
.proj-row:hover h3{transform:translateX(.18em);color:var(--red);}
.proj-thumb{display:none;}

/* floating hover preview */
.proj-preview{
  position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  width:min(24vw,360px);aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--rad);
  opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-2deg);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  box-shadow:0 30px 60px rgba(0,0,0,.22);
}
.proj-preview.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}
.sec-foot{display:flex;justify-content:center;padding-top:clamp(2rem,5vw,3.5rem);}

/* ---------- project cards (landing page) ---------- */
/* Each card is a brand-themed tile with the client's logo centred. Tile
   colour and logo variant both flip with the site theme, using the same
   .only-light / .only-dark pattern as the nav wordmark. */
/* ---------- carousel shell ----------
   Before main.js adds [data-ready] this is a plain two-up grid, so a visitor
   with JS off (or a crawler) still gets all four projects as real links. */
.pj-carousel{position:relative;}
.pj-stage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,1vw,.85rem);}
.pj-slot{position:relative;aspect-ratio:4/5;}
.pj-hud{display:none;}

.pj-carousel[data-ready] .pj-stage{
  display:block;position:relative;
  height:clamp(370px,40vw,540px);
  perspective:1500px;perspective-origin:50% 46%;
  transform-style:preserve-3d;
  /* The arc is wider than the column, so the outer cards must be clipped here
     — without this they push the page into horizontal scroll on phones.
     Clipping at the stage edge is also the look: cards run off both sides. */
  overflow:hidden;
}
.pj-carousel[data-ready] .pj-slot{
  position:absolute;left:50%;top:50%;
  width:clamp(200px,23vw,320px);
  transform-style:preserve-3d;
  /* main.js writes the transform (position on the arc) and z-index */
  transition:transform .85s var(--ease),opacity .85s var(--ease);
  will-change:transform,opacity;
}

/* ---------- the card itself ----------
   .pj-slot holds the carousel position, .pj-card does the floating — two
   elements because a CSS animation and a JS-written transform cannot share
   one element without clobbering each other. */
.pj-card{
  position:absolute;inset:0;display:grid;place-items:center;
  border-radius:var(--rad-lg);overflow:hidden;
  background:var(--pjl);padding:clamp(1.1rem,3vw,2rem);
}
:root[data-theme="dark"] .pj-card{background:var(--pjd);}
.pj-carousel[data-ready] .pj-card{
  box-shadow:0 26px 60px rgba(0,0,0,.32);
  animation:pjFloat 7s ease-in-out infinite;
}
@keyframes pjFloat{
  0%,100%{transform:translate3d(0,0,0);}
  50%    {transform:translate3d(0,-12px,0);}
}
/* stagger so they don't bob in unison */
.pj-carousel[data-ready] .pj-slot:nth-child(2) .pj-card{animation-duration:7.8s;animation-delay:-1.6s;}
.pj-carousel[data-ready] .pj-slot:nth-child(3) .pj-card{animation-duration:6.6s;animation-delay:-3.2s;}
.pj-carousel[data-ready] .pj-slot:nth-child(4) .pj-card{animation-duration:7.4s;animation-delay:-4.8s;}

/* client background artwork, pre-cropped 4:5 and centred */
.pj-bg{
  position:absolute;inset:0;border-radius:inherit;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
/* Veil + bottom scrim: the artwork stays visible but the logo and caption
   keep their contrast over the busier patterns. */
.pj-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(250,250,247,.9) 0%,rgba(250,250,247,.28) 36%,rgba(250,250,247,0) 62%),
             rgba(250,250,247,.1);
}
:root[data-theme="dark"] .pj-bg::after{
  background:linear-gradient(to top,rgba(6,6,6,.9) 0%,rgba(6,6,6,.32) 36%,rgba(6,6,6,0) 62%),
             rgba(6,6,6,.14);
}

.pj-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--line-soft);pointer-events:none;
}
.pj-logo{
  position:relative;z-index:1;
  width:min(58%,300px);height:auto;object-fit:contain;
  transition:transform .5s var(--ease);
}
.pj-logo.only-dark{display:none;}
:root[data-theme="dark"] .pj-logo.only-light{display:none;}
:root[data-theme="dark"] .pj-logo.only-dark{display:block;}
.pj-card .pj-meta{
  position:absolute;z-index:1;left:clamp(1rem,2vw,1.4rem);bottom:clamp(.9rem,2vw,1.2rem);
  display:flex;flex-direction:column;gap:.1rem;text-align:left;
}
.pj-card .pj-name{font-weight:600;font-size:.95rem;color:var(--pjink);}
.pj-card .pj-cats{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pjink);opacity:.7;}
.pj-card .pj-arrow{
  position:absolute;z-index:1;top:clamp(.8rem,2vw,1.2rem);right:clamp(.8rem,2vw,1.2rem);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--pjink);box-shadow:inset 0 0 0 1.5px currentColor;font-size:.9rem;
  opacity:.55;transition:transform .45s var(--ease),opacity .3s,background .3s,color .3s;
}
/* No lift on hover — .pj-card owns the float animation, so a hover transform
   here would fight it. Move the logo and arrow instead. */
.pj-card:hover .pj-logo{transform:scale(1.04);}
.pj-card:hover .pj-arrow{opacity:1;background:var(--red);color:#fff;box-shadow:none;transform:translate(2px,-2px);}
.pj-card:focus-visible{outline:2px solid var(--red);outline-offset:4px;}

/* per-client theming: --pjl light tile, --pjd dark tile, --pjink caption ink.
   Still used as the ground under each background, and as the whole surface
   for Carte in light mode (its artwork is dark-mode only, per brief). */
.pj-cookout{--pjl:#EFE1D2;--pjd:#3C1418;--pjink:#5A2328;}
:root[data-theme="dark"] .pj-cookout{--pjink:#EAD9CB;}
.pj-icora{--pjl:#EAECF3;--pjd:#141B30;--pjink:#2C3357;}
:root[data-theme="dark"] .pj-icora{--pjink:#C4C9DE;}
.pj-carte{--pjl:#E7F1DE;--pjd:#123019;--pjink:#2C5233;}
:root[data-theme="dark"] .pj-carte{--pjink:#BFD8BF;}
.pj-lab{--pjl:#F2DBD6;--pjd:#171310;--pjink:#7A2A22;}
:root[data-theme="dark"] .pj-lab{--pjink:#D8CFC8;}

/* ---------- background artwork per client ----------
   ICORA  — blue in dark, white in light
   Cookout— same pattern, re-grounded for each theme
   Carte  — dark mode only; light mode keeps the solid tile
   Lab    — black BWAE pattern in dark, white in light          */
.pj-icora   .pj-bg{background-image:url("assets-opt/cards/icora-light.webp");}
.pj-cookout .pj-bg{background-image:url("assets-opt/cards/cookout-light.webp");}
.pj-lab     .pj-bg{background-image:url("assets-opt/cards/lab-light.webp");}
.pj-carte   .pj-bg{background-image:none;}
.pj-carte   .pj-bg::after{background:none;}

:root[data-theme="dark"] .pj-icora   .pj-bg{background-image:url("assets-opt/cards/icora-dark.webp");}
:root[data-theme="dark"] .pj-cookout .pj-bg{background-image:url("assets-opt/cards/cookout-dark.webp");}
:root[data-theme="dark"] .pj-lab     .pj-bg{background-image:url("assets-opt/cards/lab-dark.webp");}
:root[data-theme="dark"] .pj-carte   .pj-bg{background-image:url("assets-opt/cards/carte-dark.webp");}
:root[data-theme="dark"] .pj-carte   .pj-bg::after{
  background:linear-gradient(to top,rgba(6,6,6,.9) 0%,rgba(6,6,6,.32) 36%,rgba(6,6,6,0) 62%),
             rgba(6,6,6,.14);
}

/* ---------- carousel controls ---------- */
.pj-carousel[data-ready] .pj-hud{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin-top:clamp(1.3rem,3vw,2.1rem);
}
.pj-nav{
  width:clamp(46px,5vw,56px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;flex:none;
  box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font-size:1.05rem;
  transition:background .25s var(--ease),color .25s var(--ease),
             box-shadow .25s var(--ease),transform .25s var(--ease);
}
.pj-nav:hover{background:var(--ink);color:var(--paper);box-shadow:none;transform:translateY(-2px);}
.pj-nav:active{transform:translateY(0) scale(.95);}
.pj-count{
  display:flex;align-items:baseline;gap:.45em;margin-left:.5rem;
  font-size:.9rem;letter-spacing:.14em;font-variant-numeric:tabular-nums;
}
.pj-count i{font-style:normal;color:var(--muted);}
.pj-cur{font-weight:600;}
.pj-total{color:var(--muted);}

@media (max-width:720px){
  .pj-stage{grid-template-columns:1fr;}
  .pj-carousel[data-ready] .pj-slot{width:clamp(190px,58vw,250px);}
  .pj-carousel[data-ready] .pj-stage{height:clamp(330px,86vw,420px);perspective:1000px;}
}
@media (prefers-reduced-motion:reduce){
  .pj-carousel[data-ready] .pj-card{animation:none;}
  .pj-carousel[data-ready] .pj-slot{transition:none;}
}

/* ============================================================
   SERVICES (home blocks + services page)
   ============================================================ */
.svc-block{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,6vw,7rem);
  padding:clamp(2.6rem,6vw,4.6rem) 0;border-top:1px solid var(--line);
}
.svc-left .label{display:block;margin-bottom:1.2rem;}
.svc-left h3{margin-bottom:0;}
.svc-left h3 .serif{color:var(--red);}
.svc-right>p{color:var(--muted);max-width:44ch;margin-bottom:1.8rem;}
.svc-items li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line-soft);
  font-weight:500;
}
.svc-items li .tag{white-space:nowrap;}
.svc-cta{margin-top:1.8rem;}

/* accordions (services page) */
.acc{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-head{
  width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:1.2rem;
  padding:1.35rem 0;text-align:left;
}
.acc-head h4{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:600;transition:color .2s;}
.acc-head:hover h4{color:var(--red);}
.acc-head .price{font-family:var(--font-serif);font-style:italic;color:var(--muted);font-size:1.02rem;white-space:nowrap;}
.acc-ico{
  width:30px;height:30px;border-radius:50%;position:relative;flex:none;align-self:center;
  box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .4s var(--ease),background .3s,box-shadow .3s;
}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);transition:background .3s;}
.acc-ico::after{transform:translate(-50%,-50%) rotate(90deg);}
.acc-item.open .acc-ico{transform:rotate(135deg);background:var(--red);box-shadow:none;}
.acc-item.open .acc-ico::before,.acc-item.open .acc-ico::after{background:var(--paper);}
.acc-body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-io);}
.acc-body p{color:var(--muted);max-width:56ch;padding:0 0 1.4rem;}

/* process steps (services page) */
.steps{counter-reset:step;border-top:1px solid var(--line);}
.step{
  display:grid;grid-template-columns:auto 1fr 1.4fr;gap:clamp(1.2rem,4vw,4rem);
  padding:clamp(1.8rem,4vw,3rem) 0;border-bottom:1px solid var(--line);align-items:start;
}
.step .no{font-family:var(--font-serif);font-style:italic;color:var(--red);font-size:clamp(1.1rem,1.6vw,1.4rem);}
.step h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.7rem,3.6vw,3rem);line-height:.95;}
.step .step-tag{display:block;margin-top:.5em;}
.step p{color:var(--muted);max-width:52ch;}

/* solution packages (services page) */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.4rem);}
.pack{
  border:1px solid var(--line);border-radius:var(--rad);background:var(--paper);
  padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:1rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.pack:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(10,10,10,.1);border-color:rgba(230,0,0,.5);}
:root[data-theme="dark"] .pack:hover{box-shadow:0 24px 48px rgba(0,0,0,.5);}
.pack .label{font-size:1rem;}
.pack h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:.95;}
.pack>p{color:var(--muted);font-size:.95rem;}
.pack ul{border-top:1px solid var(--line);margin-top:auto;}
.pack li{padding:.6rem 0;border-bottom:1px solid var(--line-soft);font-size:.92rem;display:flex;gap:.6em;align-items:baseline;}
.pack li::before{content:"✺";color:var(--red);font-size:.72em;flex:none;}
.pack .btn{margin-top:1.2rem;align-self:flex-start;}
.pack-feature{background:var(--band);color:var(--band-fg);border-color:var(--band);}
.pack-feature>p{color:var(--muted-inv);}
.pack-feature ul{border-top-color:var(--line-inv);}
.pack-feature li{border-bottom-color:var(--line-inv);}
.pack-feature .btn{background:var(--band-fg);color:var(--band);}
.pack-feature .btn:hover{background:var(--red);color:var(--band-fg);}
@media (max-width:900px){.packs{grid-template-columns:1fr;}}

/* mindset pull-quote strip */
.mindset{background:var(--paper-2);border-radius:var(--rad-lg);padding:clamp(2.6rem,7vw,5.5rem) clamp(1.6rem,5vw,4.5rem);text-align:center;}
.mindset .label{display:block;margin-bottom:1.4rem;}
.mindset blockquote{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.2;max-width:26ch;margin:0 auto;
}
.mindset blockquote strong{color:var(--red);font-weight:400;}

/* ============================================================
   DARK BAND — principles cards (03) + reused generics
   ============================================================ */
.band-dark{background:var(--band);color:var(--band-fg);border-radius:var(--rad-lg) var(--rad-lg) 0 0;}
.band-dark .sec-head-main .sub{color:var(--muted-inv);}
.band-dark .label{color:var(--red);}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.4rem);}
.card{
  background:var(--band-2);border:1px solid var(--line-inv);border-radius:var(--rad);
  padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:1.1rem;min-height:15rem;
  transition:transform .35s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-6px);border-color:rgba(230,0,0,.55);}
.card h3{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:600;line-height:1.25;}
.card p{color:var(--muted-inv);font-size:.95rem;flex:1;}
.card-foot{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid var(--line-inv);padding-top:1rem;}
.card-foot .who{font-weight:600;font-size:.95rem;}
.card-foot .label{font-size:.95rem;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--band);color:var(--band-fg);padding:clamp(4rem,9vw,7.5rem) 0 1.6rem;position:relative;overflow:hidden;}
.band-dark+ .footer{border-top:1px solid var(--line-inv);}
.foot-top{display:flex;flex-direction:column;gap:.6rem;margin-bottom:clamp(3rem,7vw,5.5rem);}
.foot-cta{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.8rem,10.5vw,10rem);line-height:.92;letter-spacing:-.035em;
  display:inline-flex;align-items:baseline;gap:.18em;width:max-content;max-width:100%;
  transition:color .3s var(--ease);
}
.foot-cta .arr{font-family:var(--font-body);font-size:.45em;transform:translateY(-.35em);transition:transform .35s var(--ease);}
.foot-cta:hover{color:var(--red);}
.foot-cta:hover .arr{transform:translate(0.2em,-.55em);}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(1.6rem,4vw,3rem);
  padding-top:2.2rem;border-top:1px solid var(--line-inv);margin-bottom:clamp(2.6rem,6vw,4.5rem);
}
.foot-brand img{width:56px;height:56px;object-fit:contain;margin-bottom:1rem;}
.foot-brand p{color:var(--muted-inv);font-size:.92rem;max-width:26ch;}
.foot-col .tag{display:block;color:var(--muted-inv);margin-bottom:1.1rem;}
.foot-col ul{display:flex;flex-direction:column;gap:.55rem;font-size:.98rem;}
.foot-col a{color:var(--band-fg);transition:color .2s;}
.foot-col a:hover{color:var(--red);}
.foot-col li span{color:var(--muted-inv);}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-top:1.4rem;border-top:1px solid var(--line-inv);
  color:var(--muted-inv);font-size:.85rem;
}
.to-top{display:inline-flex;align-items:center;gap:.5em;color:var(--band-fg);font-size:.85rem;transition:color .2s;}
.to-top:hover{color:var(--red);}
.to-top .arr{transition:transform .3s var(--ease);}
.to-top:hover .arr{transform:translateY(-3px);}

/* ============================================================
   INNER PAGE HERO
   ============================================================ */
.page-hero{padding:clamp(9rem,20vh,13rem) 0 clamp(2rem,5vw,3.5rem);}
.page-hero .label{display:block;margin-bottom:1.2rem;}
.page-hero h1{margin-left:-.03em;}
.page-hero .sub{margin-top:1.6rem;color:var(--muted);max-width:44ch;font-size:clamp(1.02rem,1.5vw,1.3rem);}
.page-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;}

/* ============================================================
   CASE STUDY
   ============================================================ */
.case-meta{
  display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,4rem);
  border-top:1px solid var(--line);padding:1.3rem 0 0;margin-top:clamp(2rem,5vw,3.5rem);
}
.case-meta div{display:flex;flex-direction:column;gap:.2rem;}
.case-meta .label{font-size:1rem;}
.case-meta .val{font-weight:600;}
.case-cover{margin-top:clamp(2rem,5vw,3.5rem);}
.case-cover img,.case-cover video{width:100%;height:auto;max-height:82vh;object-fit:cover;border-radius:var(--rad-lg);}
.case-cover figcaption{margin-top:.7rem;color:var(--muted);font-size:.85rem;font-family:var(--font-serif);font-style:italic;}
.case-body{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,6vw,6rem);align-items:start;}
.case-body .case-word{position:sticky;top:7rem;}
.case-word .label{display:block;margin-top:.9rem;}
.case-copy p{margin-bottom:1.4rem;max-width:58ch;}
.case-copy p strong{font-weight:600;}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,2rem);}
.g-item.wide{grid-column:1/-1;}
.g-item img,.g-item video{width:100%;height:100%;object-fit:cover;border-radius:var(--rad);aspect-ratio:4/3;}
.g-item.tall img{aspect-ratio:3/4;}
.g-item.wide img,.g-item.wide video{aspect-ratio:16/9;}
.g-item{display:flex;flex-direction:column;}
/* ---------- scatter / photo mounts (ported from site v1) ----------
   Natural-height images in tilted paper mounts. Height is deliberately
   NOT constrained — varied proportions are what makes the wall read as
   a scatter rather than a grid. */
.scatter{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(1.1rem,2.6vw,2.1rem);align-items:start;
}
.mount{
  background:var(--paper-2);padding:10px;border:1px solid var(--line-soft);
  box-shadow:0 12px 30px var(--mount-shadow);
  transform:rotate(var(--r,-2deg));
  transition:transform .4s var(--ease),box-shadow .4s;
}
.mount:hover{transform:rotate(0) scale(1.03);box-shadow:0 20px 44px var(--mount-shadow-strong);}
/* mounts also carry [data-reveal], whose `.is-in{transform:none}` would wipe the
   tilt. Re-assert rotation inside the reveal states and keep hover on top. */
html.js .mount[data-reveal]{transform:translateY(30px) rotate(var(--r,-2deg));}
html.js .mount[data-reveal].is-in{transform:rotate(var(--r,-2deg));}
html.js .mount[data-reveal].is-in:hover{transform:rotate(0) scale(1.03);}
.mount img,.mount video{width:100%;height:auto;display:block;}
.mount.wide{grid-column:span 2;}
.mount .mount-cap{
  font-family:var(--font-body);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);padding:.6rem .2rem .1rem;
}
/* rotation cycles off nth-child so static markup needs no inline vars */
.mount:nth-child(8n+1){--r:-2deg;} .mount:nth-child(8n+2){--r:2deg;}
.mount:nth-child(8n+3){--r:-1deg;} .mount:nth-child(8n+4){--r:1deg;}
.mount:nth-child(8n+5){--r:2deg;}  .mount:nth-child(8n+6){--r:-1deg;}
.mount:nth-child(8n+7){--r:-2deg;} .mount:nth-child(8n+8){--r:1deg;}
.mount.wide{--r:1deg;}
.mount-video{position:relative;cursor:pointer;}
.mount-video .vbadge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:1.4rem;padding-left:5px;
  border:2px solid var(--paper);transition:transform .3s var(--ease);
}
.mount-video:hover .vbadge{transform:translate(-50%,-50%) scale(1.12);}
.mount-video.playing .vbadge{display:none;}
@media(max-width:720px){
  .scatter{grid-template-columns:1fr;}
  .mount.wide{grid-column:span 1;}
  .mount{transform:none!important;}
}
@media(prefers-reduced-motion:reduce){.mount{transform:none!important;transition:none;}}

/* ---------- case results — the proof block ---------- */
.results{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(2.4rem,5vw,3.6rem) 0;margin-top:clamp(2.5rem,6vw,4.5rem);}
.results-head{display:block;margin-bottom:clamp(1.6rem,3vw,2.4rem);}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);}
.stat{display:flex;flex-direction:column;gap:.35rem;}
.stat .num{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;font-size:clamp(2.6rem,6vw,4.4rem);}
.stat .num em{font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--red);}
.stat .cap{color:var(--muted);font-size:.92rem;max-width:26ch;}
.results-note{margin-top:clamp(1.6rem,3vw,2.2rem);color:var(--muted);font-family:var(--font-serif);font-style:italic;font-size:1rem;max-width:62ch;}
@media(max-width:860px){.stats{grid-template-columns:1fr;gap:2rem;}}

.next-proj{border-top:1px solid var(--line);text-align:center;padding:clamp(4rem,9vw,7rem) 0;}
.next-proj .label{display:block;margin-bottom:1rem;}
.next-proj a{display:inline-block;transition:color .3s,transform .5s var(--ease);}
.next-proj a:hover{color:var(--red);transform:translateX(.15em);}

/* ============================================================
   ABOUT
   ============================================================ */
.about-intro{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2rem,6vw,6rem);align-items:start;}
.about-portrait{background:var(--paper-2);border-radius:var(--rad-lg);padding:clamp(2rem,4vw,3.4rem);position:sticky;top:7rem;}
/* Was width:70% to float a logomark in the middle of the mount. It now holds a
   photograph, so it fills the mount edge-to-edge and keeps the framed-print
   look the padding was there for. */
.about-portrait img{width:100%;margin:0;border-radius:var(--rad);display:block;}
.about-portrait figcaption{margin-top:1.6rem;text-align:center;color:var(--muted);font-family:var(--font-serif);font-style:italic;}
.about-copy p{margin-bottom:1.4rem;max-width:58ch;}
.about-copy p strong{font-weight:600;}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);}
.member{border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--paper);transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.member:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(10,10,10,.1);}
.member-img{background:var(--paper-2);aspect-ratio:1/1;display:grid;place-items:center;padding:2.2rem;}
.member-img img{max-height:100%;object-fit:contain;}
/* Photo members fill the tile instead of sitting inset like a logo does. */
.member-img.is-photo{padding:0;overflow:hidden;}
.member-img.is-photo img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 28%;}
.member-info{padding:1.3rem 1.4rem 1.5rem;border-top:1px solid var(--line);}
.member-info h3{font-size:1.15rem;font-weight:600;}
.member-info .label{display:block;margin:.15rem 0 .7rem;font-size:1rem;}
.member-info p{color:var(--muted);font-size:.92rem;}
/* The three columns hold different numbers of entries, so their lists end at
   different depths and the block reads ragged. Stretching each list to the
   tallest column closes all three on the same rule — even without padding the
   short ones with work that doesn't exist. */
.track{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:stretch;}
.track-col{display:flex;flex-direction:column;}
.track-col .d-md{margin-bottom:1.2rem;}
.track-col ul{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  flex:1;                      /* fill to the tallest column */
}
.track-col li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;}
/* the list's own bottom rule closes the block, so the final row doesn't
   double up on it */
.track-col li:last-child{border-bottom:0;}

/* The headings don't all wrap the same way — "Video & Motion" fits on one
   line where the other two take two — so the lists below them start at
   different heights. subgrid drops every heading into one shared row and
   every list into the next, aligning the top rules as well as the bottom.
   Only applies where the columns actually sit side by side; the flex rules
   above remain the fallback if subgrid is unsupported. */
@supports (grid-template-rows: subgrid){
  @media (min-width:1025px){
    .track{grid-template-rows:auto 1fr;}
    .track-col{display:grid;grid-template-rows:subgrid;grid-row:span 2;}
  }
}
.track-col li em{font-family:var(--font-serif);font-style:italic;color:var(--muted);}

/* ============================================================
   JOURNAL
   ============================================================ */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,2rem);}
.post-card{display:flex;flex-direction:column;gap:1rem;group:card;}
.post-card .thumb{overflow:hidden;border-radius:var(--rad);aspect-ratio:4/3;background:var(--paper-2);}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.post-card:hover .thumb img{transform:scale(1.05);}
.post-card .meta{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;}
.post-card h2{font-size:clamp(1.2rem,1.9vw,1.55rem);font-weight:600;line-height:1.25;transition:color .2s;}
.post-card:hover h2{color:var(--red);}
.article{max-width:760px;margin:0 auto;}
.article-hero img{width:100%;border-radius:var(--rad-lg);aspect-ratio:16/9;object-fit:cover;margin:clamp(2rem,5vw,3rem) 0;}
.article h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.02;}
.article .lede{font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--muted);margin-top:1.2rem;}
.article-body p{margin-bottom:1.5rem;}
.article-body p strong{font-weight:600;}
.article-body h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.1rem);margin:2.4rem 0 1rem;}
.article-body ul{margin:0 0 1.5rem;padding-left:1.1em;list-style:disc;}
.article-body li{margin-bottom:.5rem;}
.article-foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.6rem;margin-top:3rem;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2.5rem,7vw,7rem);align-items:start;}
.contact-direct .label{display:block;margin-bottom:1rem;}
.contact-email{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.25rem,2.6vw,2.1rem);line-height:1.1;word-break:break-all;
  transition:color .25s;
}
.contact-email:hover{color:var(--red);}
.contact-direct p{color:var(--muted);margin-top:1.1rem;max-width:34ch;}
.form{display:flex;flex-direction:column;gap:1.4rem;}
.field label{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:.5rem;}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);
  padding:.75rem 0;font:inherit;color:var(--ink);border-radius:0;
  transition:border-color .25s;
}
.field textarea{resize:vertical;min-height:7.5rem;}
/* `outline:none` on :focus (not :focus-visible) out-specificities the global
   focus ring and leaves keyboard users with no indicator at all — a straight
   WCAG 2.4.7 failure. Keep the red border as decoration, restore the ring. */
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--red);}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--red);outline-offset:3px;border-radius:2px;
}
.field ::placeholder{color:var(--placeholder);}
.form .btn{width:100%;justify-content:center;font-size:1rem;}
.form-status{min-height:1.4em;font-family:var(--font-serif);font-style:italic;color:var(--red);}

/* ============================================================
   "LET'S TALK" QUIZ POPUP
   ============================================================ */
/* launcher card on the contact page */
.brief-card{
  border:1px solid var(--line);border-radius:var(--rad-lg);background:var(--paper-2);
  padding:clamp(1.8rem,4vw,2.8rem);display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
}
.brief-card .label{display:block;}
.brief-card h2{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;line-height:1.1;}
.brief-card p{color:var(--muted);max-width:36ch;}
.brief-steps{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .4rem;}
.brief-steps span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:500px;padding:.4em .9em;}

.quiz{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:clamp(1rem,4vw,2rem);}
.quiz[hidden]{display:none;}
.quiz-backdrop{position:absolute;inset:0;background:rgba(8,8,8,.62);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s var(--ease);}
.quiz.open .quiz-backdrop{opacity:1;}
.quiz-card{
  position:relative;z-index:1;width:min(560px,100%);
  background:var(--paper);color:var(--ink);border-radius:var(--rad-lg);
  box-shadow:0 40px 90px rgba(0,0,0,.4);border:1px solid var(--line-soft);
  padding:clamp(1.8rem,4.5vw,3rem);
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  max-height:calc(100dvh - 2rem);overflow:auto;
}
.quiz.open .quiz-card{opacity:1;transform:none;}
.quiz-x{position:absolute;top:.9rem;right:1rem;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:1.4rem;line-height:1;color:var(--muted);
  transition:background .2s,color .2s,transform .2s;}
.quiz-x:hover{background:var(--ink);color:var(--paper);transform:rotate(90deg);}

.quiz-top{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-bottom:clamp(1.4rem,3vw,2rem);}
.quiz-count{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500;}
.quiz-count b{color:var(--ink);font-weight:600;}
.quiz-dots{display:flex;gap:.5rem;}
.quiz-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s;}
.quiz-dots i.is-done{background:var(--red);}
.quiz-dots i.is-now{background:var(--red);transform:scale(1.5);}

.quiz-step{display:none;text-align:center;}
.quiz-step.is-active{display:block;animation:quizIn .4s var(--ease) both;}
@keyframes quizIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.quiz-q{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1;margin-bottom:clamp(1.3rem,3vw,1.9rem);}
.quiz-opts{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;}
.chip{
  font-weight:500;font-size:.98rem;line-height:1;padding:.95em 1.4em;border-radius:500px;
  background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);
  transition:background .2s,color .2s,box-shadow .2s,transform .2s;
}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px);}
.chip.is-sel{background:var(--ink);color:var(--paper);box-shadow:none;}
.chip:active{transform:scale(.96);}

.quiz-fields{display:flex;flex-direction:column;gap:1rem;max-width:340px;margin:0 auto 1.4rem;text-align:left;}
.quiz-fields label{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--muted);margin-bottom:.4rem;}
.quiz-fields input,.quiz-fields textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);
  padding:.7rem 0;font:inherit;color:var(--ink);transition:border-color .25s;}
.quiz-fields textarea{resize:vertical;min-height:2.6rem;line-height:1.4;}
.quiz-fields input:focus,.quiz-fields textarea:focus{border-color:var(--red);}
.quiz-fields input:focus-visible,.quiz-fields textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:3px;border-radius:2px;
}
.quiz-fields ::placeholder{color:var(--placeholder);}
.quiz-fields .opt{text-transform:none;letter-spacing:0;color:var(--placeholder);font-weight:400;}
.quiz-step .btn{width:100%;justify-content:center;}
.quiz-hint{margin-top:.9rem;font-size:.8rem;color:var(--muted);}

.quiz-foot{display:flex;align-items:center;justify-content:center;margin-top:clamp(1.3rem,3vw,1.9rem);min-height:1.4em;}
.quiz-back{position:absolute;left:clamp(1.4rem,4.5vw,3rem);font-size:.82rem;color:var(--muted);
  letter-spacing:.04em;transition:color .2s;}
.quiz-back:hover{color:var(--red);}
.quiz-foot{position:relative;}
.quiz-status{font-family:var(--font-serif);font-style:italic;color:var(--red);font-size:.95rem;text-align:center;}

.quiz-done{text-align:center;}
.quiz-done .quiz-done-mark{font-size:2.4rem;color:var(--red);margin-bottom:.6rem;}
.quiz-done h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1;margin-bottom:.8rem;}
.quiz-done p{color:var(--muted);max-width:34ch;margin:0 auto 1.6rem;}

body.quiz-lock{overflow:hidden;}
@media (prefers-reduced-motion:reduce){
  .quiz-backdrop,.quiz-card{transition:none;}
  .quiz-step.is-active{animation:none;}
}

/* ============================================================
   404
   ============================================================ */
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1.4rem;padding:6rem var(--gut) 4rem;}
.nf .d-hero{color:var(--red);}

/* ============================================================
   PAGE TRANSITION CURTAIN
   ============================================================ */
.curtain{
  position:fixed;inset:-2% 0;z-index:2000;background:var(--band);
  transform:translateY(103%);pointer-events:none;will-change:transform;
}
.curtain::after{
  content:"✺";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--red);font-size:2.2rem;
}
html.wiping .curtain{transform:translateY(0);}
.curtain.play-in{transition:transform .5s var(--ease-io);transform:translateY(0);}
.curtain.play-out{transition:transform .65s var(--ease-io);transform:translateY(-103%);}

/* ============================================================
   REVEALS
   ============================================================ */
html.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--rd,0s);}
html.js [data-reveal].is-in{opacity:1;transform:none;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr);}
  .posts{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .case-body{grid-template-columns:1fr;}
  .case-body .case-word{position:static;}
  .track{grid-template-columns:1fr;}
  .about-portrait{position:static;max-width:420px;}
}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-cta .btn{display:none;}
  .burger{display:block;}
  .statement-grid{grid-template-columns:1fr;}
  .svc-block{grid-template-columns:1fr;gap:1.6rem;}
  .sec-head{grid-template-columns:1fr;align-items:start;gap:.6rem;}
  .sec-head .label{padding-bottom:0;}
  .team{grid-template-columns:1fr;max-width:440px;}
  .about-intro{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .step{grid-template-columns:1fr;gap:.8rem;}
  .proj-row{grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:.4rem;}
  .proj-row .cats{grid-column:2;grid-row:2;white-space:normal;}
  .proj-row .yr{grid-column:1;grid-row:2;}
  .proj-preview{display:none;}
  .proj-thumb{display:block;grid-column:1/-1;grid-row:3;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--rad);margin-top:1rem;}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr;}
  .posts{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .hero-foot{flex-direction:column;align-items:flex-start;}
  .case-meta{gap:1.2rem 2rem;}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;}
  .marq-track{animation:none;transform:none;white-space:normal;}
  .mask>span{transform:none;}
  html.js [data-reveal]{opacity:1;transform:none;}
  .curtain{display:none;}
  .proj-preview{display:none;}
  .hero-bg{display:none;}
}