/* ==========================================================================
   FH Strategy — the website
   Vibrant house system. Anton + Caveat + Poppins, colour-blocked sections.
   ========================================================================== */

@font-face{font-family:Anton;src:url("../assets/fonts/Anton.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Caveat;src:url("../assets/fonts/CaveatBold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/Poppins-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/Poppins-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* FH palette */
  --midnight:#0E1030;
  --plum:#231046;
  --forest:#04413C;
  --cream:#FFF4E4;
  --bone:#F7E9D3;
  --ink:#12100F;

  --flare:#FF4B26;   /* orange-red */
  --volt:#FFD23F;    /* yellow */
  --teal:#00C2A8;
  --pink:#FF5D8F;

  --pad:clamp(20px,5vw,72px);
  --t:.6s cubic-bezier(.4,0,.2,1);

  /* per-section, overridden on each block */
  --ground:var(--midnight);
  --on:var(--cream);
  --accent:var(--flare);
  --shadow:var(--pink);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--midnight);color:var(--cream);
  font-family:Poppins,system-ui,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--flare);color:#fff}

/* --- Blocks -------------------------------------------------------------- */

.block{
  background:var(--ground);color:var(--on);
  padding:clamp(80px,11vw,168px) var(--pad);
  position:relative;
}
.block--midnight{--ground:var(--midnight);--on:var(--cream);--accent:var(--flare);--shadow:var(--pink)}
.block--cream   {--ground:var(--cream);  --on:var(--ink);  --accent:var(--flare);--shadow:var(--volt)}
.block--forest  {--ground:var(--forest); --on:var(--cream);--accent:var(--volt); --shadow:var(--teal)}
.block--plum    {--ground:var(--plum);   --on:var(--cream);--accent:var(--teal); --shadow:var(--pink)}
.block--flare   {--ground:var(--flare);  --on:#fff;        --accent:var(--volt); --shadow:var(--midnight)}

.wrap{max-width:1320px;margin:0 auto}
.narrow{max-width:760px}

/* --- Type ---------------------------------------------------------------- */

.eyebrow{
  font-family:Poppins;font-weight:700;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0 0 18px;
}

.mega,.big,.mid{
  font-family:Anton,Impact,sans-serif;font-weight:400;
  text-transform:uppercase;line-height:.93;letter-spacing:.002em;margin:0;
  overflow-wrap:normal;word-break:keep-all;hyphens:none;
}
.mega{font-size:clamp(52px,10.5vw,160px)}
.big {font-size:clamp(38px,6.4vw,96px)}
.mid {font-size:clamp(26px,3.4vw,48px);line-height:.94}

/* the offset colour shadow that makes the type sing */
.shadowed{color:var(--accent);text-shadow:.055em .055em 0 var(--shadow)}
.plainhead{color:var(--on)}

.script{
  font-family:Caveat,cursive;font-weight:700;
  font-size:clamp(30px,5.2vw,74px);line-height:1.1;
  color:var(--shadow);margin:.18em 0 0;transform:rotate(-1.4deg);
}

.lede{font-size:clamp(18px,2vw,24px);line-height:1.5;max-width:24em;font-weight:400}
.body{max-width:34em}
.body p{margin:0 0 1em}
.body p:last-child{margin-bottom:0}

.dim{opacity:.72}

/* --- Chrome -------------------------------------------------------------- */

.chrome{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px var(--pad);
  background:rgba(14,16,48,.72);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.chrome__id{display:flex;align-items:center;gap:10px;color:var(--cream);flex:none;text-decoration:none}
.chrome__id svg{width:26px;height:26px}
.chrome__id b{font-family:Anton;font-weight:400;letter-spacing:.04em;font-size:15px;text-transform:uppercase}
.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.pill{
  font-family:Poppins;font-weight:600;font-size:13px;line-height:1;
  padding:11px 17px;border-radius:999px;
  border:1.5px solid rgba(255,244,228,.34);
  background:transparent;color:var(--cream);cursor:pointer;text-decoration:none;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
  white-space:nowrap;
}
.pill:hover{background:var(--cream);color:var(--midnight);border-color:var(--cream);transform:translateY(-1px)}
.pill--on,.pill[aria-pressed="true"]{background:var(--flare);border-color:var(--flare);color:#fff}
.pill--solid{background:var(--flare);border-color:var(--flare);color:#fff}
.pill--solid:hover{background:var(--volt);border-color:var(--volt);color:var(--midnight)}
.pill:focus-visible{outline:3px solid var(--volt);outline-offset:2px}

@media(max-width:900px){ .nav .hide-sm{display:none} }

/* --- Hero ---------------------------------------------------------------- */

.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(110px,14vw,170px);
  overflow:hidden;
}
/* the hero carries three lines, so it runs a shade smaller */
.hero .mega{font-size:clamp(42px,8.2vw,122px)}
.hero .script{font-size:clamp(26px,4.2vw,58px)}
.hero__sub{margin:clamp(26px,3.4vw,44px) 0 0;display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap;align-items:flex-end}
.hero__cue{display:flex;align-items:center;gap:12px;margin-top:clamp(34px,5vw,64px);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:.6}
.hero__cue i{display:block;width:56px;height:2px;background:currentColor;font-style:normal;position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;inset:0;background:var(--flare);
  transform:translateX(-100%);animation:sweep 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%{transform:translateX(100%)}100%{transform:translateX(100%)}}

/* --- Section heads -------------------------------------------------------- */

.head{margin-bottom:clamp(40px,5.5vw,80px)}
.head .lede{margin-top:22px}

/* --- Column layouts -------------------------------------------------------- */

.cols{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.6vw,56px)}
@media(min-width:880px){
  .cols--2{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .cols--argue{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* --- Work grid ------------------------------------------------------------ */

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(14px,1.6vw,22px)}

.card{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(300px,32vw,430px);
  padding:clamp(22px,2.6vw,34px);
  background:var(--c-bg,var(--plum));color:var(--c-on,var(--cream));
  overflow:hidden;text-decoration:none;
  transition:transform var(--t);
}
.card:hover{transform:translateY(-5px)}

.card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;transition:transform 1.1s var(--t)}
.card:hover .card__img{transform:scale(1.05)}
/* scrim so the type always holds, without washing the picture out */
.card:has(.card__img)::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,
    var(--c-bg,#0E1030) 2%,
    color-mix(in srgb,var(--c-bg,#0E1030) 78%,transparent) 34%,
    color-mix(in srgb,var(--c-bg,#0E1030) 22%,transparent) 72%,
    transparent 100%);
}
.card__client,.card__line,.card__meta{position:relative;z-index:2}
.card__client{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-accent,var(--volt));margin:0 0 12px}
.card__line{font-family:Anton;font-weight:400;text-transform:uppercase;line-height:.94;
  font-size:clamp(26px,2.8vw,40px);margin:0;word-break:keep-all;hyphens:none}
.card__meta{margin:14px 0 0;font-size:13px;font-weight:500;opacity:.82;max-width:44em}
.card__tag{position:absolute;z-index:3;
  top:clamp(22px,2.6vw,34px);right:clamp(22px,2.6vw,34px);left:auto;bottom:auto;
  width:max-content;
  font-family:Poppins;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--c-tag,var(--volt));color:var(--c-tag-fg,#12100F);padding:7px 13px;border-radius:999px}

/* wide feature card */
.card--wide{grid-column:1/-1;min-height:clamp(340px,40vw,560px)}
.card--wide .card__line{font-size:clamp(34px,5.4vw,80px)}

/* --- Film ---------------------------------------------------------------- */

.film{position:relative;background:#000;margin-top:clamp(34px,4vw,56px)}
.film video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.film__btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;transition:opacity var(--t)}
.film.is-playing .film__btn{opacity:0;pointer-events:none}
.film__cap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.66}

/* --- Numbers -------------------------------------------------------------- */

.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(28px,4vw,60px)}
.num__v{font-family:Anton;font-weight:400;line-height:.84;text-transform:uppercase;
  font-size:clamp(50px,7.6vw,112px);color:var(--accent);text-shadow:.05em .05em 0 var(--shadow);margin:0}
.num__k{margin:14px 0 0;font-size:14px;font-weight:600;line-height:1.4;max-width:16em}
.num__s{margin:6px 0 0;font-size:12.5px;opacity:.62;max-width:18em}

/* --- Gallery -------------------------------------------------------------- */

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:6px;margin-top:clamp(34px,4vw,56px)}
.gal figure{margin:0;position:relative;overflow:hidden;background:#000}
.gal img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1s var(--t)}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Method chips --------------------------------------------------------- */

.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:12px}
.chip{padding:clamp(22px,2.4vw,30px);background:rgba(255,244,228,.07);
  border:1.5px solid rgba(255,244,228,.16)}
.block--cream .chip{background:rgba(18,16,15,.05);border-color:rgba(18,16,15,.14)}
.chip h4{font-family:Anton;font-weight:400;text-transform:uppercase;font-size:26px;line-height:.9;
  margin:0 0 10px;color:var(--accent)}
.chip p{margin:0;font-size:14px;line-height:1.5;opacity:.82}

/* --- Closer / CTA --------------------------------------------------------- */

.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(30px,4vw,50px)}

.foot{padding:34px var(--pad);background:var(--midnight);color:rgba(255,244,228,.6);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}

/* --- Note ----------------------------------------------------------------- */
.note ul{margin:16px 0 0;padding-left:1.15em;font-size:15.5px}
.note li{margin-bottom:.6em}

/* --- Motion --------------------------------------------------------------- */

/* only hide when JS is present to un-hide it again */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .75s var(--t),transform .75s var(--t)}
.js .rise.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rise{opacity:1;transform:none}
}

/* --- Small screens -------------------------------------------------------- */
@media(max-width:900px){
  .chrome{flex-wrap:nowrap;gap:8px;padding:10px 16px}
  .nav{flex-wrap:nowrap;gap:6px}
  .pill{font-size:12px;padding:9px 13px}
  .chrome__id b{font-size:13px}
  .chrome__id svg{width:22px;height:22px}
}
@media(max-width:420px){
  .chrome__id b{display:none}
  .pill{font-size:11.5px;padding:9px 11px}
}

/* --- The monologue -------------------------------------------------------- */

.mono-block{padding-block:clamp(96px,14vw,200px)}
.monologue{max-width:min(100%,880px);margin:0 auto}
.monologue p{
  font-size:clamp(22px,3.1vw,42px);
  line-height:1.32;font-weight:500;letter-spacing:-.012em;
  margin:0 0 .85em;
}
.monologue p:last-child{margin-bottom:0}
.monologue em{font-style:normal;color:var(--accent)}
.monologue .turn{
  font-family:Caveat,cursive;font-weight:700;
  font-size:clamp(30px,4.6vw,64px);line-height:1.06;
  color:var(--accent);display:block;margin:.45em 0 .5em;transform:rotate(-1deg);
}
.monologue p.monologue__sig{margin-top:clamp(34px,4vw,56px);font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;opacity:.5}

/* ==========================================================================
   Full-site components
   ========================================================================== */

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--flare);color:#fff;
  padding:12px 18px;font-weight:600}
.skip:focus{left:8px;top:8px}

.block--volt{--ground:var(--volt);--on:#12100F;--accent:#B03A2E;--shadow:#12100F}

/* --- Page heads ----------------------------------------------------------- */
.pagehead{padding-top:clamp(140px,16vw,220px)}
.pagehead .lede{max-width:30em}

/* --- Case sections -------------------------------------------------------- */
.case__head{margin-bottom:clamp(34px,4.4vw,60px)}

.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  gap:1px;background:currentColor;border:1px solid currentColor;margin:0 0 clamp(34px,4.4vw,60px)}
.meta > div{background:var(--ground);padding:15px 17px}
.meta dt{margin:0 0 5px;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;opacity:.6}
.meta dd{margin:0;font-size:14.5px;line-height:1.4;font-weight:500}
.meta--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

.arg .eyebrow{margin-bottom:12px}
.arg p{margin:0 0 1em;max-width:36em}
.arg p:last-child{margin-bottom:0}
.arg .quote{font-family:Anton;text-transform:uppercase;font-size:clamp(22px,2.6vw,34px);
  line-height:.98;color:var(--accent);margin:.5em 0}

.wide-img{margin:clamp(34px,4vw,56px) 0 0;background:#000}
.wide-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.wide-img figcaption{margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;opacity:.6}

.credit{margin-top:clamp(26px,3vw,40px);font-size:13px;opacity:.6;max-width:44em}

/* --- Ledger --------------------------------------------------------------- */
.ledger{margin-top:clamp(40px,5vw,70px);border-top:1px solid currentColor}
.ledger__row{display:grid;grid-template-columns:1fr;gap:6px 28px;padding:22px 0;
  border-bottom:1px solid rgba(128,128,128,.35)}
@media(min-width:760px){.ledger__row{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:baseline}}
.ledger__v{font-family:Anton;text-transform:uppercase;line-height:.92;
  font-size:clamp(28px,4vw,52px);color:var(--accent);margin:0}
.ledger__k{margin:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ledger__s{margin:8px 0 0;font-size:14.5px;opacity:.72;max-width:40em}

/* --- Galleries ------------------------------------------------------------ */
.gal--wrap{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.gal--wrap figure:first-child{grid-column:span 2}
@media(max-width:700px){.gal--wrap figure:first-child{grid-column:auto}}
.gal figure.tall img{aspect-ratio:3/4}

/* --- Listen --------------------------------------------------------------- */
.listen{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(30px,3.6vw,48px)}
.listen__cap{font-size:12.5px;opacity:.66;max-width:26em}

/* --- Chips (tall variant) -------------------------------------------------- */
.chips--tall .chip{display:flex;flex-direction:column}
.chip__n{margin:0 0 10px;font-family:Anton;font-size:15px;letter-spacing:.06em;opacity:.45}
.chip__eg{margin-top:auto;padding-top:14px;font-style:italic;opacity:.72;font-size:13.5px}

/* --- Steps ---------------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.steps li{background:rgba(255,244,228,.07);padding:clamp(24px,2.8vw,34px);
  border:1.5px solid rgba(255,244,228,.14)}
.block--cream .steps li{background:rgba(18,16,15,.05);border-color:rgba(18,16,15,.13)}
.steps__n{margin:0 0 14px;font-family:Anton;font-size:15px;letter-spacing:.06em;color:var(--accent)}
.steps h3{font-family:Anton;font-weight:400;text-transform:uppercase;font-size:clamp(21px,2.2vw,27px);
  line-height:.94;margin:0 0 12px}
.steps p:last-child{margin:0;font-size:14.5px;line-height:1.55;opacity:.84}
.steps--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}

/* --- Journey -------------------------------------------------------------- */
.journey{display:grid;gap:clamp(20px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.journey > div{border-top:3px solid var(--accent);padding-top:16px}
.journey__k{margin:0 0 8px;font-family:Anton;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);line-height:.96}
.journey p:last-child{margin:0;font-size:14.5px;line-height:1.55;opacity:.82}

/* --- The nine ------------------------------------------------------------- */
.nine{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.nine > div{background:rgba(255,255,255,.13);padding:clamp(20px,2.4vw,28px)}
.nine__k{margin:0 0 9px;font-family:Anton;text-transform:uppercase;font-size:20px;line-height:1;color:var(--midnight)}
.nine p:last-child{margin:0;font-size:13.5px;line-height:1.5}

/* --- People --------------------------------------------------------------- */
.people{display:grid;gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.person{border-top:3px solid var(--p,var(--accent));padding-top:18px}
.person__i{width:54px;height:54px;display:grid;place-items:center;background:var(--p,var(--accent));
  color:var(--pt,#fff);font-family:Anton;font-size:20px;letter-spacing:.04em;margin:0 0 16px}
.person h3{font-family:Anton;font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,2.3vw,29px);line-height:.96;margin:0 0 6px}
.person__r{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--p,var(--accent))}
.person p:last-child{margin:0;font-size:14.5px;line-height:1.55;opacity:.82}

/* --- Docs list ------------------------------------------------------------ */
.docs{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,244,228,.24)}
.docs li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:15px 0;border-bottom:1px solid rgba(255,244,228,.16);font-size:15.5px}
.docs em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}

/* --- Sectors -------------------------------------------------------------- */
.sectors{display:grid;gap:clamp(22px,2.6vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.sectors > div{border-top:1px solid rgba(18,16,15,.22);padding-top:14px}
.sectors__k{margin:0 0 7px;font-family:Anton;text-transform:uppercase;font-size:19px;line-height:1.02}
.sectors p:last-child{margin:0;font-size:14px;line-height:1.5;opacity:.75}

/* --- TOR table ------------------------------------------------------------ */
.tor{width:100%;border-collapse:collapse;font-size:15px}
.tor th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;opacity:.6;padding:0 18px 12px 0;border-bottom:1px solid currentColor}
.tor td{padding:15px 18px 15px 0;border-bottom:1px solid rgba(128,128,128,.3);
  vertical-align:top;line-height:1.5}
.tor tr td:first-child{font-weight:600;width:38%}
@media(max-width:640px){
  .tor,.tor tbody,.tor tr,.tor td{display:block;width:100%}
  .tor thead{display:none}
  .tor tr{padding:14px 0;border-bottom:1px solid rgba(128,128,128,.3)}
  .tor td{border:0;padding:0 0 6px}
  .tor tr td:first-child{width:auto;color:var(--accent)}
}

/* --- Brief form ----------------------------------------------------------- */
.brief{max-width:44em}
.brief label{display:block;margin-bottom:18px}
.brief label > span{display:block;margin-bottom:7px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.brief input[type=text],.brief input[type=email],.brief textarea{
  width:100%;font:inherit;font-size:16px;padding:13px 15px;
  background:#fff;color:var(--ink);border:1.5px solid rgba(18,16,15,.22);border-radius:0;
  transition:border-color var(--t),box-shadow var(--t)}
.brief textarea{resize:vertical;line-height:1.5}
.brief input:focus,.brief textarea:focus{outline:0;border-color:var(--flare);
  box-shadow:0 0 0 3px rgba(255,75,38,.18)}
.brief__row{display:grid;gap:0 18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.brief fieldset{border:0;margin:8px 0 22px;padding:0}
.brief legend{padding:0;margin-bottom:11px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.check{margin:0 !important;position:relative}
.check input{position:absolute;opacity:0;width:0;height:0}
.check span{display:inline-block;padding:10px 15px;border-radius:999px;font-size:13.5px;
  font-weight:600;border:1.5px solid rgba(18,16,15,.24);cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t)}
.check input:checked + span{background:var(--flare);border-color:var(--flare);color:#fff}
.check input:focus-visible + span{outline:3px solid var(--midnight);outline-offset:2px}
.brief__go{font-size:15px;padding:16px 28px;margin-top:6px}
.brief__note{margin:16px 0 0;font-size:14.5px;font-weight:600;min-height:1.4em}
.brief__note.is-bad{color:#B03A2E}

.contact__line{margin:0 0 6px;font-family:Anton;text-transform:uppercase;
  font-size:clamp(20px,2.4vw,30px);line-height:1.05}
.contact__line a{text-decoration:none;color:var(--accent)}
.contact__line a:hover{text-decoration:underline}
.contact__sub{margin:0;font-size:13.5px;opacity:.65}
.hr{border:0;border-top:1px solid rgba(18,16,15,.18);margin:clamp(28px,3.2vw,42px) 0}
.next{margin:14px 0 0;padding-left:1.15em;font-size:14.5px;line-height:1.55;opacity:.85}
.next li{margin-bottom:.6em}

/* --- Footer --------------------------------------------------------------- */
.foot{padding:clamp(48px,6vw,84px) var(--pad) 26px;background:var(--midnight);
  color:rgba(255,244,228,.66);display:block;font-size:14.5px;letter-spacing:0;text-transform:none}
.foot__row{max-width:1320px;margin:0 auto;display:grid;gap:clamp(26px,3.4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.foot__mark{margin:0 0 10px;font-family:Anton;text-transform:uppercase;font-size:24px;
  letter-spacing:.03em;color:var(--cream)}
.foot__h{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--flare)}
.foot__row a{display:block;text-decoration:none;padding:3px 0;color:rgba(255,244,228,.72)}
.foot__row a:hover{color:var(--cream);text-decoration:underline}
.foot__row p{margin:0;line-height:1.6}
.foot__base{max-width:1320px;margin:clamp(34px,4vw,58px) auto 0;padding-top:20px;
  border-top:1px solid rgba(255,244,228,.16);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,244,228,.42)}

/* --- Links in body copy ---------------------------------------------------- */
.body a,.arg a,.ledger__s a,.tor a{color:var(--accent);text-underline-offset:3px}

/* --- Key-visual galleries: never crop the artwork ------------------------- */
.gal--kv{grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:10px}
.gal--kv img,.gal--ooh img{aspect-ratio:auto;height:auto;width:100%}
.gal--kv figcaption,.gal--ooh figcaption{position:static;background:none;color:inherit;
  padding:10px 0 0;opacity:.68;white-space:normal}
.gal--kv figure,.gal--ooh figure{background:none}
.gal--kv figure:hover img,.gal--ooh figure:hover img{transform:none}

.gal--ooh{grid-template-columns:1fr;gap:10px}
.ooh-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:10px;margin-top:10px}
.ooh-pair figure{margin:0}
.ooh-pair img{width:100%;height:auto}
.ooh-pair figcaption{padding:10px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;opacity:.68}

/* --- Case chapter (a second act inside one case) --------------------------- */
.chapter{margin-top:clamp(52px,6.5vw,96px);padding-top:clamp(30px,3.6vw,48px);
  border-top:3px solid var(--accent)}
.chapter h3{margin:8px 0 0}
.chapter .credit{margin-top:12px}

/* --- The device block (a platform line, given its own room) ---------------- */
.device{
  margin:clamp(34px,4.4vw,60px) 0;
  padding:clamp(26px,3.2vw,42px) 0;
  border-top:3px solid var(--accent);
  border-bottom:1px solid rgba(128,128,128,.4);
}

/* a film shot in scope keeps its own ratio rather than being cropped to 16:9 */
.film--scope video{aspect-ratio:2.39}

.wide-img--scope img{aspect-ratio:2.39}

/* ==========================================================================
   The sound dock
   ========================================================================== */

.dock{
  position:fixed;z-index:90;left:var(--pad);bottom:24px;width:min(92vw,330px);
  background:rgba(14,16,48,.92);backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1.5px solid rgba(255,244,228,.18);color:var(--cream);
  padding:16px 16px 13px;
  transform:translateY(14px) scale(.98);opacity:0;pointer-events:none;
  transition:transform .5s var(--t),opacity .4s var(--t);
}
.dock[hidden]{display:block}          /* we animate it, so never truly hidden */
.dock.is-open{transform:none;opacity:1;pointer-events:auto}
.dock__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.dock__t{margin:0;font-family:Anton;text-transform:uppercase;font-size:15px;letter-spacing:.05em}
.dock__x{background:none;border:0;color:rgba(255,244,228,.55);font-size:14px;cursor:pointer;padding:2px 4px;line-height:1}
.dock__x:hover{color:var(--cream)}
.dock__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.trk{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:rgba(255,244,228,.05);border:0;color:inherit;cursor:pointer;
  padding:11px 12px;font:inherit;transition:background .3s var(--t)
}
.trk:hover{background:rgba(255,244,228,.12)}
.trk__play{
  flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:var(--flare);color:#fff;font-size:9px;padding-left:1px
}
.trk b{display:block;font-size:14px;font-weight:600;line-height:1.25}
.trk i{display:block;font-style:normal;font-size:11.5px;opacity:.6;margin-top:2px}
.trk.is-playing{background:rgba(255,75,38,.18)}
.trk.is-playing .trk__play{background:var(--volt);color:var(--midnight)}
.dock__note{margin:12px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.42}
@media(max-width:520px){ .dock{left:12px;right:12px;width:auto;bottom:12px} }

/* ==========================================================================
   Motion — masked line reveals, image wipes, a little light
   ========================================================================== */

.ln{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.js .ln__i{
  display:block;
  transform:translateY(115%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 105ms);
}
.js .is-in .ln__i,
.js .ln--in .ln__i{transform:none}

/* the accent line blooms as it settles */
.js .shadowed{transition:text-shadow .9s ease .35s}
.js .rise .shadowed,.js .ln--in .shadowed{will-change:text-shadow}
@keyframes bloom{
  0%{text-shadow:.055em .055em 0 var(--shadow), 0 0 0 transparent}
  45%{text-shadow:.055em .055em 0 var(--shadow), 0 0 38px color-mix(in srgb,var(--accent) 55%,transparent)}
  100%{text-shadow:.055em .055em 0 var(--shadow), 0 0 0 transparent}
}
.js .is-in .shadowed,.js .ln--in .shadowed{animation:bloom 1.9s ease .5s 1}

/* the handwritten line draws itself in */
.js .script{opacity:0;transform:translateY(16px) rotate(-1.4deg)}
.js .is-in .script,.js .script.is-in{
  opacity:1;transform:rotate(-1.4deg);
  transition:opacity .9s var(--t) .35s,transform 1s cubic-bezier(.16,1,.3,1) .35s;
}

/* pictures wipe rather than fade */
.js .wipe{clip-path:inset(0 0 100% 0);transform:scale(1.04);
  transition:clip-path 1.15s cubic-bezier(.16,1,.3,1),transform 1.5s cubic-bezier(.16,1,.3,1)}
.js .wipe.is-in{clip-path:inset(0 0 0 0);transform:none}

/* a hairline that draws across before a section head */
.js .head::before{content:"";display:block;height:2px;background:var(--accent);
  width:0;margin-bottom:22px;transition:width 1.1s cubic-bezier(.16,1,.3,1) .1s}
.js .head.is-in::before{width:min(120px,22vw)}

/* colour blocks settle in */
.js .block{--_o:1}
.js .nums .num__v{transform:translateY(20px);opacity:0;
  transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.js .nums > div:nth-child(2) .num__v{transition-delay:.1s}
.js .nums > div:nth-child(3) .num__v{transition-delay:.2s}
.js .nums > div:nth-child(4) .num__v{transition-delay:.3s}
.js .nums.is-in .num__v{transform:none;opacity:1}

@media(prefers-reduced-motion:reduce){
  .js .ln__i,.js .script,.js .wipe,.js .num__v{transform:none !important;opacity:1 !important;clip-path:none !important}
  .js .is-in .shadowed,.js .ln--in .shadowed{animation:none}
  .js .head::before{width:min(120px,22vw);transition:none}
  .dock{transition:none}
}

/* ==========================================================================
   The opening. Three lines in the dark, then the site.
   ========================================================================== */

/* no JS, no curtain: never let it strand a visitor on a black screen */
.curtain{display:none}
.js .curtain{
  position:fixed;inset:0;z-index:120;background:var(--midnight);
  display:grid;place-items:center;padding:var(--pad);
  transition:clip-path 1.7s cubic-bezier(.76,0,.24,1),opacity .6s ease 1.1s;
  clip-path:inset(0 0 0 0);
}
.curtain__inner{max-width:min(100%,880px);width:100%;min-height:1px;text-align:center;position:relative}
.curtain__l{
  font-family:Anton,Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(28px,5.2vw,74px);line-height:1.02;letter-spacing:.004em;
  color:var(--cream);margin:0;
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  opacity:0;
}
.curtain__l--last{color:var(--flare);text-shadow:.05em .05em 0 var(--pink)}

/* Slow. A line should be read, sat with, and only then let go. */
.js .curtain__l{animation:beat 3.6s cubic-bezier(.22,1,.28,1) forwards}
.js .curtain__l[data-step="1"]{animation-delay:.9s}
.js .curtain__l[data-step="2"]{animation-delay:4.4s}
.js .curtain__l[data-step="3"]{animation-delay:7.9s;animation-duration:2.6s}
@keyframes beat{
  0%{opacity:0;transform:translateY(calc(-50% + 30px));filter:blur(9px)}
  22%{opacity:1;transform:translateY(-50%);filter:blur(0)}
  76%{opacity:1;transform:translateY(-50%);filter:blur(0)}
  100%{opacity:0;transform:translateY(calc(-50% - 20px));filter:blur(5px)}
}
/* the last line holds until the curtain lifts */
.js .curtain__l--last{animation-name:beatHold}
@keyframes beatHold{
  0%{opacity:0;transform:translateY(calc(-50% + 30px));filter:blur(9px)}
  34%{opacity:1;transform:translateY(-50%);filter:blur(0)}
  100%{opacity:1;transform:translateY(-50%);filter:blur(0)}
}

/* a hairline that fills for the length of the opening, so nobody feels trapped */
.curtain__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,244,228,.12)}
.curtain__bar i{display:block;height:100%;width:0;background:var(--flare);
  animation:curtainBar 11.4s linear forwards}
@keyframes curtainBar{ to{width:100%} }

.curtain__skip{
  position:absolute;right:var(--pad);bottom:34px;
  background:none;border:1.5px solid rgba(255,244,228,.3);color:rgba(255,244,228,.75);
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 16px;border-radius:999px;cursor:pointer;transition:all .3s var(--t)
}
.curtain__skip:hover{border-color:var(--cream);color:var(--cream)}
.curtain__mark{
  position:absolute;left:var(--pad);bottom:34px;font-family:Anton;font-size:13px;
  letter-spacing:.3em;color:rgba(255,244,228,.4)
}

/* the lift */
.js .curtain.is-up{clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none}
body.is-curtained{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .curtain{display:none}
}

/* ==========================================================================
   Pulse. Used sparingly: things that want to be pressed.
   ========================================================================== */

@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--flare) 55%,transparent)}
  70%{box-shadow:0 0 0 18px color-mix(in srgb,var(--flare) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--flare) 0%,transparent)}
}
.js .film__btn .pill{animation:pulseRing 2.8s ease-out infinite}
.js .film.is-playing .film__btn .pill{animation:none}

@keyframes pulseDot{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:1;transform:scale(1.35)}
}
.js .hero__cue i::before{
  content:"";position:absolute;left:0;top:-2px;width:6px;height:6px;border-radius:50%;
  background:var(--flare);animation:pulseDot 2.2s ease-in-out infinite
}

/* the nav button breathes while something is playing */
@keyframes pulseSoft{
  0%,100%{box-shadow:0 0 0 0 rgba(255,210,63,0)}
  50%{box-shadow:0 0 0 7px rgba(255,210,63,.22)}
}
.js #sound[aria-expanded="true"],
.js .trk.is-playing .trk__play{animation:pulseSoft 2s ease-in-out infinite}

/* a live dot next to whatever is playing */
.trk.is-playing b::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--volt);margin-left:8px;vertical-align:middle;
  animation:pulseDot 1.6s ease-in-out infinite
}

@media(prefers-reduced-motion:reduce){
  .js .film__btn .pill,.js .hero__cue i::before,.js #sound,
  .js .trk.is-playing .trk__play,.trk.is-playing b::after{animation:none !important}
}

/* ==========================================================================
   Anchors that land where they should
   ========================================================================== */

/* clear the fixed header when jumping to a case */
.case, .block[id], [id^="exhibit"]{scroll-margin-top:88px}
@media(max-width:900px){ .case, .block[id]{scroll-margin-top:70px} }

/* Images carry real width/height from the build, so the browser reserves the
   space before the file arrives. These rules must not override that. */
.gal--kv img,.gal--ooh img,.ooh-pair img{aspect-ratio:auto}