/* ══════════════════════════════════════════════════════════════════════
   Multi-page layouts.

   site.css carries the design system — tokens, type, buttons, header,
   footer, hero, the film strip. This file is only the page furniture that
   the single-page version never needed: page heads, indexes, tables,
   the contact page and the admin.
   ══════════════════════════════════════════════════════════════════════ */

/* ── page furniture ──────────────────────────────────────────────────── */
.sec{padding-block:clamp(54px,7vw,116px)}
.sec.tight{padding-block:clamp(34px,4.4vw,70px)}
.sec.alt{background:rgba(var(--fg-rgb),.035)}
.sec + .sec{border-top:1px solid rgba(var(--fg-rgb),.09)}

.phead{padding-top:calc(82px + clamp(40px,6vw,86px));padding-bottom:clamp(34px,4.4vw,66px);
  border-bottom:1px solid rgba(var(--fg-rgb),.14)}
.crumb{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:18px}
.crumb a{color:var(--dim)} .crumb a:hover{color:var(--acc)}
.crumb i{font-style:normal;margin-inline:8px;color:rgba(var(--fg-rgb),.24)}
.kicker{display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  font-family:PMono,monospace;font-size:clamp(13.5px,1.25vw,17px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--t1);font-weight:500;margin-bottom:20px}
.kicker::before{content:"";flex:none;width:clamp(24px,3.4vw,52px);height:2px;background:var(--acc)}
.ptitle{font-family:Clash,serif;font-weight:600;letter-spacing:-.035em;line-height:.94;
  font-size:clamp(32px,min(6.2vw,8.4vh),96px);max-width:17ch}
.plede{max-width:60ch;margin-top:20px;font-size:clamp(16.5px,1.6vw,22px);line-height:1.5;
  color:var(--t2)}
.pnote{max-width:62ch;margin-top:14px;font-size:15.6px;color:var(--t4)}

.shead{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:baseline;
  padding-bottom:18px;margin-bottom:clamp(24px,3vw,44px);
  border-bottom:1px solid rgba(var(--fg-rgb),.16)}
.shead h2{font-family:Clash,serif;font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(25px,3.6vw,50px)}
.shead .count{margin-left:auto;font-family:PMono,monospace;font-size:var(--fs-lab);
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

[data-rv]{opacity:0;transform:translateY(22px)}
[data-rv].in{animation:rvUp 720ms var(--ez) forwards;animation-delay:calc(var(--i,0)*70ms)}
@keyframes rvUp{to{opacity:1;transform:none}}

/* ── hero (home) ─────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding-top:clamp(104px,14vh,150px);
  padding-bottom:clamp(26px,5vh,64px);overflow:hidden}
.hero .h-bg{position:absolute;inset:0;z-index:0}
.hero .h-in{position:relative;z-index:3}

/* ── case study ──────────────────────────────────────────────────────── */
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1px;background:rgba(var(--fg-rgb),.1);border:1px solid rgba(var(--fg-rgb),.1)}
.cstats div{background:var(--bg);padding:24px 20px}
.cstats b{display:block;font-family:Anton,sans-serif;font-size:clamp(30px,4vw,56px);line-height:1;
  letter-spacing:-.02em;color:var(--acc)}
.cstats span{display:block;margin-top:9px;font-family:PMono,monospace;font-size:var(--fs-lab);
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.quad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(24px,3vw,48px)}
.quad h3{font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);padding-bottom:10px;margin-bottom:15px;
  border-bottom:1px solid rgba(var(--fg-rgb),.14)}
.quad ul{list-style:none;display:grid;gap:11px}
.quad li{display:flex;gap:11px;font-size:16px;color:var(--t3)}
.quad li::before{content:"—";color:var(--acc);flex:none}
.meta-row{display:grid;gap:14px;margin-top:clamp(26px,3.4vw,44px);padding-top:22px;
  border-top:1px solid rgba(var(--fg-rgb),.14)}
.meta-row p{font-size:15.6px;color:var(--t4);max-width:74ch}
.meta-row b{color:var(--fg);font-weight:500}
.svc-chips{display:flex;flex-wrap:wrap;gap:7px}
.svc-chips a{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.08em;
  background:var(--acc);color:var(--on-acc);padding:6px 11px;transition:opacity var(--t1)}
.svc-chips a:hover{opacity:.75}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(var(--fg-rgb),.1);
  border:1px solid rgba(var(--fg-rgb),.1);margin-top:clamp(34px,4vw,62px)}
@media(max-width:640px){.pager{grid-template-columns:1fr}}
.pager a,.pager span{background:var(--bg);padding:clamp(20px,2.4vw,32px);display:block}
.pager .dir{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:9px}
.pager b{font-family:Clash,serif;font-weight:600;font-size:clamp(19px,2.2vw,28px);
  letter-spacing:-.02em}
.pager a:hover{background:rgba(var(--fg-rgb),.05)}
.pager a:hover b{color:var(--acc)}
.pager .end{color:var(--dimmer)}
.pager .right{text-align:right}

/* ── contact ─────────────────────────────────────────────────────────── */
.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,4vw,72px)}
@media(max-width:900px){.ct{grid-template-columns:1fr}}
.ct-pts{list-style:none;margin-top:26px;display:grid;gap:13px}
.ct-pts li{display:flex;gap:12px;font-size:16.5px;color:var(--t3)}
.ct-pts li::before{content:"→";color:var(--acc);flex:none}
.ct-info{margin-top:34px;padding-top:24px;border-top:1px solid rgba(var(--fg-rgb),.14);display:grid;gap:11px}
.ct-info a{font-family:Clash,serif;font-weight:600;font-size:clamp(20px,2.2vw,30px);
  letter-spacing:-.02em;width:fit-content;transition:color var(--t1)}
.ct-info a:hover{color:var(--acc)}
.ct-hours{font-family:PMono,monospace;font-size:var(--fs-micro);color:var(--dimmer);letter-spacing:.1em}
.form{border:1px solid rgba(var(--fg-rgb),.22);padding:clamp(22px,3vw,38px)}
.form h2{font-family:Clash,serif;font-weight:600;font-size:27px;letter-spacing:-.02em;margin-bottom:7px}
.form > p{font-size:14.8px;color:var(--dim);margin-bottom:22px}
.fld{margin-bottom:17px}
.fld label{display:block;font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid rgba(var(--fg-rgb),.22);padding:11px 2px;color:var(--fg);
  font-family:Satoshi,sans-serif;font-size:16px;transition:border-color var(--t2)}
.fld textarea{resize:vertical;min-height:96px}
.fld select option{background:var(--surface);color:var(--fg)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--acc)}
.fld .hint{font-size:var(--fs-micro);color:var(--dimmer);margin-top:7px}
/* errors are red, not the accent: on this palette the accent is already an
   orange-red, and a mistake has to read differently from a highlight */
.fld{--err:#ff4d4f}
:root[data-theme="light"] .fld{--err:#c62828}
.fld .req{color:var(--err);font-weight:700}
/* a dark field on a dark panel gives no sign of where to type — the caret does */
.fld input,.fld textarea{caret-color:var(--acc)}
.fld.bad input,.fld.bad textarea,.fld.bad input:focus,.fld.bad textarea:focus{border-bottom-color:var(--err)}
.fld .err{font-size:var(--fs-micro);color:var(--err);margin-top:7px}
/* country code and number share one row. The code is a compact label with
   the real select laid invisibly over it, so a tap still opens the native
   list; the number takes everything else. */
.tel{display:flex;gap:10px}
.cc{position:relative;flex:none;display:flex;align-items:center;gap:5px;padding:0 4px 0 2px;
  border-bottom:1px solid rgba(var(--fg-rgb),.22);font-family:Satoshi,sans-serif;font-size:14px;
  color:var(--fg);transition:border-color var(--t2)}
.cc::after{content:"";width:6px;height:6px;margin:-3px 0 0 2px;
  border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg)}
.fld .cc select{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:0;cursor:pointer}
.cc:focus-within{border-bottom-color:var(--acc)}
/* with script, a short searchable list replaces the full-height native one */
.cc-js select{display:none}
.cc-btn{position:absolute;inset:0;width:100%;background:transparent;border:0;cursor:pointer}
.cc-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:min(270px,calc(100vw - 48px));
  background:var(--surface);border:1px solid rgba(var(--fg-rgb),.2);box-shadow:0 14px 34px rgba(0,0,0,.35)}
/* 16px, or iOS zooms the page when the search takes focus */
.fld .cc-q{width:100%;padding:10px 12px;border-bottom:1px solid rgba(var(--fg-rgb),.16);font-size:16px}
.cc-list{position:relative;list-style:none;max-height:216px;overflow-y:auto;margin:0;padding:4px 0;
  overscroll-behavior:contain}
.cc-list li{display:flex;gap:10px;padding:8px 12px;font-size:14px;color:var(--t2);cursor:pointer}
.cc-list li b{min-width:3.2em;font-weight:500;color:var(--fg)}
.cc-list li.on{background:rgba(var(--fg-rgb),.08)}
.cc-list li[aria-selected="true"],.cc-list li[aria-selected="true"] b{color:var(--acc)}
.cc-list .cc-none{color:var(--dim);cursor:default}
.fld .tel input{flex:1;min-width:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%;justify-content:center;margin-top:8px}
.form .btn.is-busy{opacity:.6;pointer-events:none}
.form-note{font-size:var(--fs-micro);color:var(--dimmer);margin-top:16px;line-height:1.5}
.flash{padding:15px 17px;margin-bottom:22px;font-size:15.5px;border:1px solid var(--acc);
  color:var(--acc)}
.flash.ok{border-color:#4ec98a;color:#4ec98a}

/* ── legal pages ─────────────────────────────────────────────────────── */
.prose{max-width:74ch}
.prose h2{font-family:Clash,serif;font-weight:600;font-size:clamp(21px,2.4vw,30px);
  letter-spacing:-.02em;margin:clamp(28px,3.4vw,46px) 0 12px}
.prose p{font-size:16.5px;color:var(--t3);margin-bottom:13px}
.prose ul{margin:0 0 13px 20px;color:var(--t3);font-size:16.5px}
.prose li{margin-bottom:8px}
.prose a{color:var(--acc);border-bottom:1px solid currentColor}

/* ── the closing call, shared by most pages ──────────────────────────── */
.cta-band{border-top:1px solid rgba(var(--fg-rgb),.14);padding-block:clamp(48px,6vw,96px);
  text-align:center}
.cta-band h2{font-family:Clash,serif;font-weight:600;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(28px,4.6vw,64px);max-width:20ch;margin-inline:auto}
.cta-band p{max-width:56ch;margin:18px auto 0;font-size:clamp(16px,1.5vw,20px);color:var(--t3)}
.cta-band .btn{margin-top:28px}

/* ── movements inside a multi-page site ──────────────────────────────── */
/* The scenes were written for one long page. On an inner page the first
   one has to clear the fixed header, and the wayfinder only earns its
   place when there is more than one movement to find. */
.phead + .scene .pin,
.phead + [data-scene] .pin{padding-top:0}
[data-scene="reel"] .pan{padding-top:96px}
.scene:first-of-type[data-scene]:not([data-scene="hero"]) .mvt{top:100px}

/* the nine, as plain links — the crawler and the keyboard both need them */
.nlist{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nlist a{display:block}

/* the case study opens on its own figure, in the same voice as movement V */
.case-figure .cl{font-family:PMono,monospace;font-size:clamp(13.5px,1.3vw,17px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:500;margin-bottom:12px}
.case-figure .big{font-family:Anton,sans-serif;line-height:.86;letter-spacing:-.02em;
  font-size:clamp(44px,9.4vw,148px);display:block;margin-bottom:clamp(24px,3vw,40px)}

/* the film archive index */
.index{border-top:1px solid rgba(var(--fg-rgb),.2)}
.ix{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,2vw,32px);
  align-items:baseline;padding:clamp(12px,1.4vw,18px) 4px;width:100%;text-align:left;
  border:0;border-bottom:1px solid rgba(var(--fg-rgb),.09);background:none;color:inherit;
  font:inherit;transition:background var(--t1),padding-left var(--t2) var(--ez)}
button.ix{cursor:pointer}
button.ix:hover{background:rgba(var(--fg-rgb),.05);padding-left:14px}
.ix .no{font-family:PMono,monospace;font-size:var(--fs-micro);color:var(--dimmer);min-width:2.4em}
.ix .ttl{font-family:Clash,serif;font-weight:600;font-size:clamp(17px,1.8vw,23px);
  letter-spacing:-.02em}
.ix .kind{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--t4);text-align:right;white-space:nowrap}
button.ix:hover .kind{color:var(--acc)}
@media(max-width:640px){
  .ix{grid-template-columns:auto minmax(0,1fr)}
  .ix .kind{grid-column:2;text-align:left;white-space:normal}
}

/* ══ BACKGROUNDS ══════════════════════════════════════════════════════
   Three treatments, so no two movements in a row read the same:
     .bg-flat      the section's own colour
     .bg-video     footage behind a weighted scrim
     .bg-parallax  layered fields that drift slower than the scroll
   ══════════════════════════════════════════════════════════════════════ */
.bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg + *{position:relative;z-index:2}

/* footage */
.bg-video video,.bg-video .fb{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.66) contrast(1.04)}
.bg-video .fb{background:radial-gradient(120% 90% at 70% 20%,var(--fb-warm),transparent 60%),var(--bg)}
/* The scrim is weighted to the side the copy is on and lets go of the rest,
   which is the point of it — flattening it to one heavy value made the type
   safe and the footage invisible. Copy lives in the left ~45%. */
.bg-video::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--scrim-rgb),.95) 0%,rgba(var(--scrim-rgb),.85) 44%,
    rgba(var(--scrim-rgb),.36) 76%,rgba(var(--scrim-rgb),.16) 100%)}
/* on a phone the copy is full width, so the weight has to be even */
@media(max-width:760px){.bg-video::after{background:rgba(var(--scrim-rgb),.88)}}

/* drifting fields — no photography, so nothing here can misrepresent work */
.bg-parallax i{position:absolute;inset:-20% -10%;will-change:transform}
.bg-parallax .p1{background:
  radial-gradient(46% 34% at 18% 22%,var(--glow-a),transparent 70%),
  radial-gradient(40% 30% at 82% 74%,var(--glow-b),transparent 70%)}
.bg-parallax .p2{background-image:
  radial-gradient(rgba(var(--fg-rgb),.16) 1px,transparent 1px);
  background-size:34px 34px;opacity:.5}
/* the rules behind everything drift, very slowly. Long enough that you never
   catch them moving, short enough that the ground is never quite still. */
.bg-parallax .p3{background:
  repeating-linear-gradient(115deg,transparent 0 78px,rgba(var(--fg-rgb),.05) 78px 79px);
  animation:drift 46s linear infinite}
@keyframes drift{to{transform:translate3d(-78px,-167px,0)}}
/* the mark, as a watermark. Faint enough to be texture rather than a logo
   sitting on the page, and it turns with the accent. */
.bg-parallax .p4{position:absolute;right:-4%;top:8%;width:min(46vw,560px);aspect-ratio:1;
  opacity:.05;animation:markTurn 120s linear infinite;will-change:transform}
.bg-parallax .p4 svg{width:100%;height:100%;fill:var(--acc)}
@keyframes markTurn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .bg-parallax .p3,.bg-parallax .p4{animation:none}
}
.bg-parallax::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,transparent 22%,transparent 78%,var(--bg) 100%)}

/* a section that simply owns a colour */
.bg-flat{background:var(--sec-bg,transparent)}

/* the panel footage sits behind the discipline copy */
.pan-v{position:absolute;inset:0;z-index:0;opacity:.62}
.pan-v video,.pan-v .fb{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.74)}
.pan-v .fb{background:#111}
/* This one cannot open up the way the others do: the discipline copy is on
   the left and the deliverables list is on the right, so there is type over
   both edges. It stays covered, and the panel opacity above is what lets the
   footage read through instead. */
.pan-v::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--scrim-rgb),.94) 0%,rgba(var(--scrim-rgb),.86) 44%,
    rgba(var(--scrim-rgb),.80) 100%)}
@media(max-width:880px){.pan-v::after{background:rgba(var(--scrim-rgb),.88)}}

/* page heads get the same drift, at a whisper */
.phead{position:relative;overflow:hidden}
.phead .bg-parallax .p1{opacity:.7}

@media(prefers-reduced-motion:reduce),(max-width:760px){
  .bg-parallax i{transform:none!important}
}

/* ══ MOBILE ═══════════════════════════════════════════════════════════
   The movements were built for a wide, tall viewport. On a phone the hero
   has far more copy than 100svh can hold, so pinning it clipped the top
   off behind the header. Below, the scenes stop being scenes and simply
   stack — everything stays, nothing is cut.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .top-in{height:66px}
  .mark img{height:30px}

  [data-scene="hero"]{height:auto!important;min-height:0}
  [data-scene="hero"] .pin{position:static;height:auto;overflow:visible;
    padding:calc(66px + 34px) 0 44px}
  [data-scene="hero"] h1{font-size:clamp(30px,8.6vw,44px);line-height:1.02}
  [data-scene="hero"] .h-deck{font-size:17px;min-height:0;margin-top:16px}
  [data-scene="hero"] .h-sub{font-size:15px;margin-top:14px}
  [data-scene="hero"] .h-acts{gap:10px;margin-top:22px}
  [data-scene="hero"] .h-acts .btn{width:100%;justify-content:center}
  [data-scene="hero"] .h-foot{gap:16px 22px;margin-top:26px}
  [data-scene="hero"] .h-foot .fig b{font-size:30px}
  [data-scene="hero"] .h-foot .fig span{max-width:22ch}
  [data-scene="hero"] .h-bg video{opacity:.6}
  /* footage stays out of sight until it is really playing — site.js adds
     .v-ok on the first moving frame, or swaps in the still if it never comes */
  video[data-v]:not(.v-ok){visibility:hidden}

  /* the sideways reel cannot work on a phone — the six simply stack */
  [data-scene="reel"]{height:auto!important}
  [data-scene="reel"] .pin{position:static;height:auto;overflow:visible;padding-block:0}
  .reel{width:auto!important;flex-direction:column;transform:none!important}
  .pan{width:auto;height:auto;grid-template-columns:1fr;padding:56px var(--gut) 48px;
    border-bottom:1px solid rgba(var(--fg-rgb),.12)}
  .pan h2{font-size:clamp(30px,9vw,46px)}
  .pan .solves{display:block}
  .stage{height:34vh;max-height:none;margin-top:22px}

  /* the numbers read one after another rather than swapping under a pin */
  [data-scene="numbers"]{height:auto!important}
  [data-scene="numbers"] .pin{position:static;height:auto;overflow:visible}
  [data-scene="numbers"] .nbg,[data-scene="numbers"] .ndots{display:none}
  .nfg{height:auto;padding-block:48px}
  .nlist{position:static;width:auto;height:auto;overflow:visible;
    display:grid;gap:1px;background:rgba(var(--fg-rgb),.12);
    border-block:1px solid rgba(var(--fg-rgb),.12);margin-top:32px}
  .nlist a{background:var(--bg);padding:16px var(--gut);font-size:15.5px;color:var(--t2)}
  .nlist a:hover{color:var(--acc)}

  /* the four beats stack instead of cross-fading */
  [data-scene="beats"]{height:auto!important}
  [data-scene="beats"] .pin{position:static;height:auto;overflow:visible}
  .beat{position:static;opacity:1!important;pointer-events:auto;padding:44px var(--gut);
    text-align:left;border-bottom:1px solid rgba(var(--fg-rgb),.12)}
  .beat h2{font-size:clamp(38px,13vw,64px)}
  .beat .ring{display:none}

  /* the weeks walk down instead of across */
  [data-scene="weeks"]{height:auto!important}
  [data-scene="weeks"] .pin{position:static;height:auto;overflow:visible}
  .wk-mark,.wk-prog{display:none}
  .wk-rail{width:auto!important;flex-direction:column;transform:none!important}
  .wk-st{width:auto;opacity:1;padding:36px var(--gut);
    border-bottom:1px solid rgba(var(--fg-rgb),.12)}
  .wk-st h3{font-size:clamp(36px,11vw,56px)}

  /* the sea keeps its point but stops eating three screens */
  [data-scene="sea"]{height:auto!important}
  [data-scene="sea"] .pin{position:static;height:auto;overflow:visible;padding-block:48px}
  .sea{position:static;min-height:0;padding:0 var(--gut)}
  .sea .cell:not([data-k]){display:none}
  .sea .cell .same{display:none}
  .sea .cell .nm{opacity:1;transform:none;position:static}
  .sea .cell{aspect-ratio:auto;padding:14px 0;justify-items:start}
  .sea-scrim{display:none}
  .sea-say{position:static;opacity:1!important;padding:26px var(--gut) 0}

  /* .where is hidden on a phone, so the label comes back inline here — the
     stages are unpinned at this width, so nothing sits behind it */
  .mvt{position:static;padding:0 var(--gut) 12px;margin-bottom:18px;
    background:none;backdrop-filter:none;border-left:0;width:auto}
  .mvt:not(.flat){display:flex}
  .where{display:none}
  .phead{padding-top:calc(66px + 30px)}
  .ptitle{font-size:clamp(30px,8.4vw,44px)}
  .frm{width:74vw}
  .ct-info a{font-size:20px}
}

/* ══ THE MENU ═════════════════════════════════════════════════════════ */
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;position:relative;
  border:1px solid rgba(var(--fg-rgb),.24);background:transparent;flex:none}
.menu-btn i{position:absolute;left:12px;right:12px;height:2px;background:var(--fg);
  transition:transform 320ms var(--ez),opacity 200ms}
.menu-btn i:nth-child(1){top:15px}
.menu-btn i:nth-child(2){top:22px}
.menu-btn i:nth-child(3){top:29px}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:99;background:rgba(var(--scrim-rgb),.98);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;justify-content:center;padding:96px var(--gut) 40px;
  opacity:0;pointer-events:none;transition:opacity 300ms var(--ez)}
.menu.on{opacity:1;pointer-events:auto}
.menu a{display:block;font-family:Clash,serif;font-weight:600;letter-spacing:-.03em;
  font-size:clamp(30px,9vw,46px);line-height:1.06;padding:11px 0;
  border-bottom:1px solid rgba(var(--fg-rgb),.12);
  opacity:0;transform:translateY(16px)}
.menu.on a{animation:menuIn 480ms var(--ez) forwards;animation-delay:calc(var(--i)*55ms)}
@keyframes menuIn{to{opacity:1;transform:none}}
.menu a:active,.menu a:hover{color:var(--acc)}
.menu a[aria-current="page"]{color:var(--acc)}
.menu .m-cta{margin-top:26px;border:0;background:var(--acc);color:var(--on-acc);
  font-size:18px;text-align:center;padding:16px}
.menu .m-foot{margin-top:auto;padding-top:26px;font-family:PMono,monospace;
  font-size:var(--fs-micro);letter-spacing:.1em;color:var(--dimmer);line-height:2}
.menu .m-foot a{display:inline;font-family:PMono,monospace;font-size:var(--fs-micro);
  border:0;padding:0;opacity:1;transform:none;letter-spacing:.1em;color:var(--dim);
  animation:none}
.menu .m-foot a:hover{color:var(--acc)}
body.menu-open{overflow:hidden}

@media (max-width: 900px){ .menu-btn{display:block} }
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .menu,.menu a{transition:none;animation:none;opacity:1}
  .menu{display:none}
  .menu.on{display:flex}
}

/* ── legal contents list ─────────────────────────────────────────────── */
.legal-toc{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:clamp(26px,3.2vw,44px);
  padding-bottom:clamp(22px,2.6vw,34px);border-bottom:1px solid rgba(var(--fg-rgb),.14)}
.legal-toc a{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.09em;
  text-transform:uppercase;border:1px solid rgba(var(--fg-rgb),.22);padding:8px 13px;
  color:var(--t2);transition:all var(--t2) var(--ez)}
.legal-toc a:hover{border-color:var(--acc);color:var(--acc)}
.prose h2{scroll-margin-top:100px}

/* ── the case study's opening figure sits on its own footage ─────────── */
.case-figure .bg-video::after{
  background:linear-gradient(180deg,rgba(var(--scrim-rgb),.84) 0%,rgba(var(--scrim-rgb),.93) 100%)}
.case-figure .cstats div{background:var(--panel-glass);backdrop-filter:blur(14px) saturate(.6);
  -webkit-backdrop-filter:blur(14px) saturate(.6)}

/* ══ THANK YOU ════════════════════════════════════════════════════════ */
.ty{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(82px + clamp(30px,5vh,60px));padding-bottom:clamp(40px,6vh,80px)}
.ty-in{max-width:760px}
.ty-mark{width:clamp(66px,8vw,96px);aspect-ratio:1;margin-bottom:clamp(22px,3vw,36px)}
.ty-mark svg{width:100%;height:100%;overflow:visible}
.ty-mark .ring{fill:none;stroke:rgba(var(--fg-rgb),.24);stroke-width:2;
  stroke-dasharray:1;stroke-dashoffset:1;animation:tyRing 900ms var(--ez) forwards}
.ty-mark .tick{fill:none;stroke:var(--acc);stroke-width:6;stroke-linecap:square;
  stroke-dasharray:1;stroke-dashoffset:1;animation:tyTick 620ms var(--ez) 620ms forwards}
@keyframes tyRing{to{stroke-dashoffset:0}}
@keyframes tyTick{to{stroke-dashoffset:0}}

.ty-next{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,44px)}
.ty-back{margin-top:clamp(26px,3.2vw,40px);font-family:PMono,monospace;
  font-size:var(--fs-lab);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ty-back b{color:var(--acc);font-weight:500;font-variant-numeric:tabular-nums}
.ty-back a{color:var(--fg);border-bottom:1px solid rgba(var(--fg-rgb),.3)}
.ty-back a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.ty-back button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--dim);
  border:0;border-bottom:1px dashed rgba(var(--fg-rgb),.3);cursor:pointer;padding:0}
.ty-back button:hover{color:var(--fg)}
.ty-bar{display:block;height:2px;width:min(100%,320px);background:rgba(var(--fg-rgb),.16);
  margin-top:12px}
.ty-bar i{display:block;height:100%;width:100%;background:var(--acc);transform-origin:0 50%}
.ty-urgent{margin-top:clamp(28px,3.4vw,46px);padding-top:20px;
  border-top:1px solid rgba(var(--fg-rgb),.14);font-size:15.5px;color:var(--t4)}
.ty-urgent a{color:var(--acc);border-bottom:1px solid currentColor}
.ty.is-stayed .ty-back,.ty.is-stayed .ty-bar{opacity:.4}

@media(max-width:760px){
  .ty{min-height:0;padding-top:calc(66px + 34px)}
  .ty-next .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .ty-mark .ring,.ty-mark .tick{animation:none;stroke-dashoffset:0}
  .ty-bar{display:none}
}

/* ══ § CONTACT · one screen, two columns that agree ═══════════════════
   Three things were wrong here. The points on the left sit at opacity:0
   until .ct picks up .in, and .ct on this page carried no data-rv — so
   the left column rendered blank down to the first rule and looked like
   it started halfway down. The form then ran six full-width rows deep
   and pushed the submit button well past the fold. And the map, added
   under the addresses, made the left column taller than the form so the
   two never finished together.

   The reveal hook is on the markup now; the rest is below. */

/* both columns begin on the grid row's top edge, and the left one is a
   flex column so its second half can sit on the bottom edge — start
   level, finish level */
.page-contact .ct{align-items:stretch}
.page-contact .ct > div:first-child{display:flex;flex-direction:column}
.page-contact .ct-lede{margin-top:0;max-width:54ch}
.page-contact .ct-pts{margin-top:clamp(20px,2.4vw,30px)}
/* auto margin, not space-between: the lede and the points belong together
   at the top, and only the contact rows get pushed to the bottom edge */
.page-contact .ct-info{margin-top:auto;padding-top:28px}

/* the head gives back the vertical space the form needs */
.page-contact .phead{padding-top:calc(82px + clamp(18px,2.6vw,38px));
  padding-bottom:clamp(20px,2.4vw,34px)}
.page-contact .crumb{margin-bottom:12px}
.page-contact .kicker{margin-bottom:14px}
.page-contact .ptitle{font-size:clamp(29px,min(4.4vw,5.6vh),54px);max-width:24ch}
.ct-sec{padding-block:clamp(20px,2.4vw,32px) clamp(40px,5vw,80px)}

/* two short answers to a row. Four stacked rows of one field each were
   most of the height the button was hiding behind. */
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(16px,2vw,26px)}
@media(max-width:640px){.fld-2{grid-template-columns:1fr}}
.page-contact .fld{margin-bottom:14px}
.page-contact .fld textarea{min-height:82px}
.page-contact .form > p{margin-bottom:18px}
.page-contact .form-note{margin-top:13px}

/* the map is its own band now, full width, under both columns */
.ct-mapsec{padding-block:clamp(30px,3.6vw,58px) clamp(46px,6vw,92px)}
.ct-mapsec .ct-map{margin-top:0;padding-top:0;border-top:0;
  display:grid;grid-template-columns:1fr auto;gap:0 clamp(18px,2.4vw,34px);
  align-items:center}
.ct-mapsec .ct-map-lab,
.ct-mapsec .ct-map-fr{grid-column:1/-1}
.ct-mapsec .ct-map-fr{aspect-ratio:auto;height:clamp(250px,36vh,420px)}
.ct-mapsec .ct-map-addr{grid-column:1;margin-top:15px}
.ct-mapsec .ct-map-go{grid-column:2;margin-top:15px;justify-self:end}
@media(max-width:700px){
  .ct-mapsec .ct-map{grid-template-columns:1fr}
  .ct-mapsec .ct-map-addr,.ct-mapsec .ct-map-go{grid-column:1;justify-self:start}
  .ct-mapsec .ct-map-go{margin-top:12px}
}