/* ═══════════════════════════════════════════════════════════
   KYMAT · TIDE — design tokens & components
   Curves ×4 · durations frame-quantised · sand = punctuation
   ═══════════════════════════════════════════════════════════ */

:root{
  /* colour */
  --ink:#0A0A0A; --ink-2:#131313; --ink-3:#1B1B1B; --ink-4:#242424;
  --paper:#F4F1EA; --sand:#C8B8A0; --gold:#D9B36A;
  --dim:#938C81;        /* small text on ink: 5.9:1 on --ink, 5.2:1 on --ink-3, 4.7:1 on --ink-4 */
  --paper-dim:#6B6459;  /* small text on paper: 5.2:1 on --paper */
  --focus:var(--gold);  /* focus ring on dark grounds, 10:1 */
  --focus-paper:#8A5A22;/* focus ring on paper grounds, 5.2:1 */
  --line:rgba(200,184,160,.14);
  --ground:var(--ink); --fg:var(--paper);

  /* durations — 60fps frame grid. Nothing between 400–600ms. */
  --d-5f:83ms; --d-8f:133ms; --d-10f:167ms; --d-15f:250ms; --d-20f:333ms;
  --d-30f:500ms; --d-40f:667ms; --d-45f:750ms; --d-60f:1000ms;

  /* curves */
  --ease-out:cubic-bezier(.28,0,.49,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-hard:cubic-bezier(.85,0,.85,1);
  --ease-snap:cubic-bezier(.15,0,.15,1);

  /* asymmetric hover */
  --hov-in:450ms; --hov-out:200ms;

  /* type */
  --f-display:'Clash Display',sans-serif;
  --f-body:'Satoshi',sans-serif;
  --f-mono:'Space Mono',monospace;

  /* rhythm */
  --gutter:clamp(20px,3.4vw,56px);
  --sect:clamp(90px,11vw,190px);
  --sect-case:clamp(150px,19vw,330px);

  --tide:0; /* scroll progress 0..1, written by motion.js */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html{overflow-x:clip}
body{
  overflow-x:clip;
  background:var(--ground);color:var(--fg);
  font-family:var(--f-body);font-weight:400;font-size:clamp(17px,1.25vw,19px);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  transition:background-color var(--d-18f,300ms) linear,color 300ms linear;
  min-height:100svh;
}
::selection{background:var(--sand);color:var(--ink)}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:2px}
.paper :focus-visible,.mnav :focus-visible,.pmnav :focus-visible{outline-color:var(--focus-paper)}
.rt button:focus-visible{outline-offset:-4px}

/* skip link: hidden until it takes focus, then a gold pill top left */
.skip{position:fixed;top:14px;left:var(--gutter);z-index:400;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);padding:12px 20px;border-radius:999px;
  transform:translateY(-200%);opacity:0;pointer-events:none}
.skip:focus,.skip:focus-visible{transform:none;opacity:1;pointer-events:auto;
  outline:2px solid var(--ink);outline-offset:3px}

/* ── type roles ─────────────────────────────────────────── */
.display{font-family:var(--f-display);font-weight:600;line-height:.86;
  letter-spacing:-.04em;text-transform:uppercase}
.d-hero{font-size:clamp(38px,6.6vw,132px)}
.d-lg{font-size:clamp(34px,5.8vw,116px)}
.d-md{font-size:clamp(34px,4.6vw,88px)}
.d-sm{font-size:clamp(24px,2.6vw,44px);letter-spacing:-.03em}
.mono{font-family:var(--f-mono);font-weight:400;font-size:clamp(11px,.85vw,13px);
  letter-spacing:.18em;text-transform:uppercase}
.mono a:hover,a.mono:hover{color:var(--sand)}
.body-lg{font-size:clamp(21px,2.1vw,32px);line-height:1.45;max-width:34em}
.measure{max-width:34em}
.dim{color:var(--dim)} .sand{color:var(--sand)}
body .paper .mono{color:var(--paper-dim)}

/* links — underline wipe, micro timing */
.lnk{position:relative;display:inline-block}
.lnk::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:var(--sand);transform:scaleX(0);transform-origin:right;
  transition:transform var(--hov-out) var(--ease-out)}
@media(hover:hover){
  .lnk:hover::after,.lnk:focus-visible::after{transform:scaleX(1);
    transform-origin:left;transition-duration:var(--hov-in)}
}

/* ── layout ─────────────────────────────────────────────── */
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.sect{padding-top:var(--sect);padding-bottom:var(--sect)}
main{position:relative}

/* ── nav ────────────────────────────────────────────────── */

.nav .wordmark,.nav ul{mix-blend-mode:difference}
.nav{position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);color:#F4F1EA}
.nav .wordmark{font-family:var(--f-display);font-weight:600;font-size:20px;
  letter-spacing:-.02em;text-transform:uppercase}
.nav ul{display:flex;gap:clamp(18px,2.6vw,44px);list-style:none;align-items:center}
.nav .to-brief{color:#0A0A0A;background:#D9B36A;border-radius:999px;padding:11px 22px;
  mix-blend-mode:normal;text-decoration:none;
  transition:box-shadow .25s linear,background .2s linear}
.nav .to-brief:hover{background:#EFCB84;box-shadow:0 0 26px rgba(217,179,106,.55);text-decoration:none}
.nav .to-brief::after{display:none}
.nav-burger{display:none}

/* tideline №1 — scroll progress under the nav */
.tide-nav{position:fixed;top:0;left:0;z-index:91;height:1px;width:100%;
  transform-origin:left;background:var(--sand);
  transform:scaleX(var(--tide));opacity:calc(.25 + var(--tide)*.75);
  pointer-events:none}

/* tideline №2 — section divider */
.tide-div{height:1px;background:var(--line);border:0;position:relative;
  margin:0 var(--gutter)}
.tide-div::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:var(--sand);opacity:0;transform:translateY(4px);
  transition:opacity var(--d-40f) var(--ease-out),transform var(--d-40f) var(--ease-out)}
.tide-div.in::after{opacity:.55;transform:translateY(0)}

/* ── media placeholders (labelled, replace later) ───────── */
.ph{position:relative;background:var(--ink-3);overflow:hidden;border-radius:4px}
.ph::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,transparent 46%,rgba(200,184,160,.05) 50%,transparent 54%),
    radial-gradient(120% 90% at 30% 10%,rgba(200,184,160,.07),transparent 55%)}
.ph .ph-tag{position:absolute;left:14px;bottom:12px;color:var(--dim);opacity:.85}
.r-169{aspect-ratio:16/9} .r-45{aspect-ratio:4/5} .r-11{aspect-ratio:1/1}

/* ── hero ───────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;z-index:0;border-radius:0;overflow:hidden}
.hero-media .ph{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;height:100%}
.hero-copy{position:relative;z-index:2;padding:110px var(--gutter) clamp(56px,8vh,110px);width:100%}
.hero-copy .kicker{margin-bottom:22px;color:var(--sand)}
.hero-copy .sub{margin-top:26px;max-width:30em;color:var(--paper)}
.hero-scrim{position:absolute;inset:auto 0 0 0;height:55%;z-index:1;
  background:linear-gradient(to top,rgba(10,10,10,.82),transparent)}

/* ── work tiles ─────────────────────────────────────────── */
.tile{position:relative;display:block;margin:0 var(--gutter) clamp(26px,3.4vw,54px)}
.tile .ph{aspect-ratio:16/9}
.tile-copy{position:absolute;left:clamp(18px,2.6vw,44px);bottom:clamp(18px,2.6vw,40px);z-index:2}
.tile-copy .t-name{font-size:clamp(30px,4.2vw,84px)}
.tile-copy .t-line{margin-top:8px;color:var(--paper)}
.tile-meta{margin-top:12px;color:var(--dim);display:flex;gap:1.6em;flex-wrap:wrap}
.tile-scrim{position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(to top,rgba(10,10,10,.78),transparent);border-radius:0 0 4px 4px}
@media(hover:hover){
  .tile .ph{transition:opacity var(--hov-out) var(--ease-out)}
  .tile:hover .ph{opacity:.86;transition-duration:var(--hov-in)}
}

/* ── field rows ─────────────────────────────────────────── */
.frow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(16px,4vw,80px);padding:clamp(30px,4.4vw,66px) var(--gutter);
  border-top:1px solid var(--line);align-items:start}
.frow:last-of-type{border-bottom:1px solid var(--line)}
.frow p{max-width:26em}
.frow .f-caps{margin-top:14px;color:var(--dim);letter-spacing:.14em;
  text-transform:lowercase;line-height:2}

/* ── two ways ───────────────────────────────────────────── */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,110px)}
.ways p{max-width:22em;color:var(--dim);margin-top:12px}
.big-claim{margin-top:clamp(48px,7vw,110px)}

/* tideline №4 — ownership segments */
.own{margin-top:clamp(40px,5vw,80px)}
.own-bar{display:flex;gap:6px;align-items:flex-end;height:64px}
.own-bar i{flex:1;background:var(--sand);opacity:.9;display:block;border-radius:1px;
  height:calc(14% + var(--h,0)*86%);transform:scaleY(0);transform-origin:bottom}
.own-bar.in i{transform:scaleY(1);
  transition:transform var(--d-40f) var(--ease-out) calc(var(--i)*33ms)}
.own-l{display:flex;justify-content:space-between;margin-top:12px;color:var(--dim)}
.own-note{margin-top:18px;color:var(--sand)}

/* ── comparison table ───────────────────────────────────── */
.cmp{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:clamp(14px,1.8vw,26px) clamp(10px,1.6vw,26px);
  border-top:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{border-top:0;color:var(--dim)}
.cmp td:first-child{color:var(--dim);width:24%}
.cmp .k{color:var(--sand)}
.cmp thead .k{border-bottom:1px solid var(--sand)}

/* ── process steps ──────────────────────────────────────── */
.step{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(16px,4vw,80px);padding:clamp(30px,4.4vw,60px) var(--gutter);
  border-top:1px solid var(--line)}
.step:last-of-type{border-bottom:1px solid var(--line)}
.step .s-n{color:var(--sand);margin-bottom:10px}
.step p{max-width:30em;color:var(--paper)}

/* ── toggle (how-we-work) ───────────────────────────────── */
.rt{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.rt button{padding:14px 26px;color:var(--dim);
  transition:color var(--d-10f) linear,background-color var(--d-10f) linear}
.rt button[aria-pressed="true"]{background:var(--ink-3);color:var(--sand)}
.rt-panel{display:none}
.rt-panel.on{display:block}
.numlist{list-style:none;counter-reset:n;max-width:38em}
.numlist li{counter-increment:n;display:grid;grid-template-columns:3.2em 1fr;
  gap:0 8px;padding:16px 0;border-top:1px solid var(--line)}
.numlist li::before{content:counter(n,decimal-leading-zero);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--sand);
  padding-top:5px}

/* ── footer ─────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,90px) var(--gutter) 40px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:end}
.foot-human{font-size:clamp(21px,2.1vw,32px);line-height:1.35}
.foot-links{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:flex-end}
.foot-line{margin-top:44px;color:var(--dim)}

/* ── reveal defaults ────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(8vh)}
html.no-motion [data-reveal],html.motion-done [data-reveal]{opacity:1;transform:none}
.ln{display:block;overflow:clip}
.ln>span{display:block}

/* ── curtain (page transition) ──────────────────────────── */
#curtain{position:fixed;left:0;bottom:0;z-index:200;width:100%;height:0;
  overflow:hidden;background:transparent;pointer-events:none;padding:8px}
#curtain .c-in{height:100%;background:var(--ink);border-radius:0;position:relative}
#curtain .c-pct{position:absolute;right:26px;bottom:22px;color:var(--sand);
  font-family:var(--f-mono);font-size:13px;letter-spacing:.18em}

/* ── case study ─────────────────────────────────────────── */
.case-kicker{padding:calc(70px + 4vh) var(--gutter) 26px;color:var(--dim)}
.stack{display:grid;gap:clamp(14px,1.8vw,28px);padding:0 var(--gutter)}
.stack .one{grid-column:1/-1}
.stack .two{display:grid;grid-template-columns:1fr 1fr;gap:inherit}
.stack .three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:inherit}
.case-name{padding:var(--sect-case) var(--gutter) clamp(40px,6vw,90px)}
.case-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(30px,6vw,120px);padding:0 var(--gutter) var(--sect-case)}
.case-note h2{margin-bottom:20px;color:var(--sand)}
.case-note p{max-width:34em;margin-bottom:1.2em}
.case-meta dl{display:grid;gap:26px}
.case-meta dt{color:var(--sand);margin-bottom:8px}
.case-meta dd{color:var(--paper);line-height:1.8}
.case-outro{padding:var(--sect) 0}

/* ── briefing form ──────────────────────────────────────── */
.bf-step{display:none}
.bf-step.on{display:block}
.bf label{display:block;margin:26px 0 8px}
.bf label .req{color:var(--sand)}
.bf input[type=text],.bf input[type=email],.bf textarea,.bf select{
  width:100%;max-width:44em;background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--fg);
  font:inherit;padding:10px 2px;border-radius:0;
  transition:border-color var(--d-10f) linear}
.bf input:focus,.bf textarea:focus{border-bottom-color:var(--sand)}
.bf input:focus-visible,.bf textarea:focus-visible,.bf select:focus-visible{outline-offset:2px}
.bf .chips{display:flex;gap:10px;flex-wrap:wrap}
.bf .chips label{display:inline-flex;gap:10px;align-items:center;margin:0;
  border:1px solid var(--line);padding:12px 18px;border-radius:2px;cursor:pointer}
.bf .chips input{accent-color:var(--sand)}
.bf .sliders{display:grid;gap:18px;max-width:44em}
.bf .sliders .sl{display:grid;grid-template-columns:8em 1fr 8em;gap:14px;align-items:center}
.bf input[type=range]{accent-color:var(--sand);width:100%}
.bf-nav{display:flex;gap:26px;margin-top:44px;align-items:center}
.bf-err{color:var(--sand);display:none;margin-top:18px}

/* ── video control (injected by motion.js on every autoplay video) ── */
.vid-ctl{position:absolute;right:var(--gutter);bottom:22px;z-index:6;
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:rgba(10,10,10,.72);color:var(--paper);border:1px solid rgba(244,241,234,.28);
  font-size:11px;letter-spacing:.16em;line-height:1;cursor:pointer;
  opacity:.78;transition:opacity var(--hov-out) linear,background var(--hov-out) linear}
.vid-ctl svg{width:10px;height:10px;fill:currentColor;flex:none}
.vid-ctl .vc-play{display:none}
.vid-ctl.is-paused .vc-play{display:block}
.vid-ctl.is-paused .vc-pause{display:none}
.vid-ctl:hover,.vid-ctl:focus-visible{opacity:1;background:rgba(10,10,10,.9);transition-duration:var(--hov-in)}
@media(max-width:700px){.vid-ctl{bottom:16px;padding:8px 12px}}

/* ── icons ──────────────────────────────────────────────── */
.ic{width:24px;height:24px;stroke:var(--sand);fill:none;stroke-width:2}

/* ── responsive ─────────────────────────────────────────── */
@media(max-width:900px){
  .frow,.step{grid-template-columns:1fr;gap:14px}
  .ways{grid-template-columns:1fr;gap:44px}
  .case-cols{grid-template-columns:1fr;gap:56px}
  .foot-grid{grid-template-columns:1fr;align-items:start}
  .foot-links{justify-content:flex-start}
}
@media(max-width:700px){
  .nav ul{display:none}
  .nav-burger{display:block}
  .stack .two,.stack .three{grid-template-columns:1fr}
  .mnav{position:fixed;inset:0;z-index:95;background:var(--paper);color:#141210;display:none;
    flex-direction:column;justify-content:center;padding:0 var(--gutter);gap:4px}
  .mnav.on{display:flex}
  .mnav::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(20,18,16,.25)}
  .mnav a{font-family:var(--f-display);font-weight:600;text-transform:uppercase;color:#141210;
    font-size:clamp(34px,9.5vw,56px);letter-spacing:-.03em;line-height:1.14}
  .mnav a:active{color:#8A5A22}
  .mnav .m-cta{align-self:flex-start;margin-top:22px;background:#141210;color:var(--paper);
    border-radius:999px;padding:12px 26px;font-size:clamp(15px,4.4vw,20px);letter-spacing:.01em}
  .mnav .m-foot{position:absolute;left:var(--gutter);bottom:34px;color:var(--paper-dim);line-height:2}
  .mnav .m-foot a{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--paper-dim);font-weight:400}
  .mnav .m-close{position:absolute;top:20px;right:var(--gutter);color:#141210;background:none;border:0}
  .mnav .m-wm{position:absolute;top:14px;left:var(--gutter);font-size:20px;color:#141210;
    text-transform:uppercase;letter-spacing:.01em;line-height:1}
}
@media(min-width:701px){.mnav{display:none!important}}

/* ── reduced motion — the axis the references all fail ──── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important}
  [data-reveal],[data-lines],.ln>span{opacity:1!important;transform:none!important}
  [data-xp],.hero-media{clip-path:none!important;transform:none!important}
  .own-bar i{transform:scaleY(1)!important}
  #curtain{display:none!important}
}

/* QA screenshots: no human viewport is this tall */
@media(min-height:2000px){.hero,.hero5{min-height:900px!important;height:900px!important}
  .abtop{min-height:820px!important;height:820px!important}
  .filmwrap{height:670px!important}
  .intro{min-height:670px!important}
  .filmwrap .reel{top:120px!important}
  .howttl{top:320px!important}
  .csplit,.wgrid{height:900px!important}
.hero5 .small{top:180px}
.hero5 .mega{top:504px}
.hero5 .foot5{bottom:28px}}

/* ── locked identity: G3 wordmark + comma nav ── */
.wm-g3{font-family:var(--f-display);font-weight:600;font-size:21px;letter-spacing:.01em;
  text-transform:uppercase;line-height:1;display:inline-block}
.wm-g3 .t{display:block;clip-path:inset(-10% 0 47% 0)}
.wm-g3 .bb{display:block;clip-path:inset(51% 0 -10% 0);margin-top:-1em;
  transform:translateX(.09em);opacity:.45}
.nav ul.comma{gap:0}
.nav>ul.comma{margin-left:clamp(28px,4vw,64px)}
.nav ul.comma li::after{content:",";margin-right:.6em;color:#8B867E}
.nav ul.comma li:last-child::after{content:""}

/* standard footer: identity + capsules */
.foot2{position:relative;z-index:1;background:#0A0A0A;border-top:1px solid rgba(200,184,160,.14);padding:clamp(44px,6vw,80px) var(--gutter) 22px}
.foot2 .grid2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.foot2 .wmk2{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,4vw,54px);text-transform:uppercase;line-height:1;color:var(--paper)}
.foot2 .desc{margin-top:14px;color:#B8B2A8;font-size:14px;line-height:1.65}
.foot2 .caps{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-content:flex-start}
.foot2 .caps a{border:1px solid rgba(200,184,160,.4);border-radius:999px;padding:10px 18px;
  font-family:'Satoshi',sans-serif;font-size:14px;color:var(--paper);transition:background .2s,color .2s}
.foot2 .caps a:hover{background:#D9B36A;border-color:#D9B36A;color:#0A0A0A}
.foot2 .base2{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:clamp(30px,4.5vw,56px);
  border-top:1px solid rgba(200,184,160,.16);padding-top:16px;color:#8B7A5E;font-size:13px;font-family:'Satoshi',sans-serif}
.foot2 .base2 a{color:inherit}
.foot2 .base2 a:hover{color:var(--sand)}
@media(max-width:760px){.foot2 .grid2{grid-template-columns:1fr}.foot2 .caps{justify-content:flex-start}}

/* ── intro: the house lights, once per visit ───────────── */
#intro{position:fixed;inset:0;z-index:300;background:var(--ink);display:none;
  align-items:center;justify-content:center;overflow:hidden}
#intro.on{display:flex}
#intro .i-mark{position:relative;font-size:clamp(34px,7vw,72px);color:var(--paper);line-height:1}
#intro .i-mark .t{clip-path:inset(-10% 0 47% 0)}
#intro .i-mark .bb{clip-path:inset(51% 0 -10% 0);margin-top:-1em;transform:translateX(.09em);opacity:.45}
#intro .i-sweep{position:absolute;top:-20%;bottom:-20%;width:38%;left:-45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(242,230,200,.85),transparent);
  filter:blur(6px);mix-blend-mode:screen}
#intro .i-pct{position:absolute;right:26px;bottom:22px;color:var(--sand)}
@media(prefers-reduced-motion:reduce){#intro{display:none!important}}

/* ── collapsed nav on inner pages ──────────────────────── */
.navleft{display:contents}
.nav-dots{display:none;background:none;border:0;cursor:pointer;padding:4px;
  grid-template-columns:repeat(2,6px);gap:4px}
.nav-dots i{display:block;width:6px;height:6px;background:var(--paper);border-radius:1px;
  transition:background .2s linear,transform .25s ease}
.nav-dots:hover i{background:var(--sand)}
.nav-dots[aria-expanded="true"] i:nth-child(1){transform:translate(-1px,-1px)}
.nav-dots[aria-expanded="true"] i:nth-child(4){transform:translate(1px,1px)}
.nav-here{display:none;color:var(--sand);white-space:nowrap;transition:opacity .3s linear}
body[data-nav="collapsed"] .navleft{display:flex;align-items:center;gap:14px;justify-self:start}
body[data-nav="collapsed"] .nav-here{display:inline}
body[data-nav="collapsed"] .nav-dots{display:grid}
body[data-nav="collapsed"] .nav ul.comma{opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .35s linear,visibility 0s linear .35s}
body[data-nav="collapsed"] .nav ul.comma li{opacity:0;transform:translateY(-6px);
  transition:opacity .3s linear,transform .4s cubic-bezier(.2,.7,.3,1)}
body[data-nav="collapsed"] .nav ul.comma.open{opacity:1;pointer-events:auto;visibility:visible;
  transition:opacity .35s linear,visibility 0s linear 0s}
body[data-nav="collapsed"] .nav ul.comma.open li{opacity:1;transform:none}
body[data-nav="collapsed"] .nav.menu-open .nav-here{opacity:0}
body[data-nav="collapsed"] .nav ul.comma.open li:nth-child(1){transition-delay:.05s}
body[data-nav="collapsed"] .nav ul.comma.open li:nth-child(2){transition-delay:.12s}
body[data-nav="collapsed"] .nav ul.comma.open li:nth-child(3){transition-delay:.19s}
body[data-nav="collapsed"] .nav ul.comma.open li:nth-child(4){transition-delay:.26s}
@media(max-width:760px){
  .nav-dots{display:none!important}
  .nav-here{display:none!important}
}

/* mobile: CTA centred on the viewport */
@media(max-width:760px){
  .nav{position:fixed}
  .nav .to-brief{position:absolute;left:50%;transform:translateX(-50%)}
}

/* curtain mark + sweep */
#curtain .c-in{display:flex;align-items:center;justify-content:center}
#curtain .c-mark{position:relative;font-size:clamp(26px,4.6vw,52px);color:var(--paper);line-height:1;
  opacity:0;transform:translateY(10px)}
#curtain .c-mark .t{display:block;clip-path:inset(-10% 0 47% 0)}
#curtain .c-mark .bb{display:block;clip-path:inset(51% 0 -10% 0);margin-top:-1em;transform:translateX(.09em);opacity:.45}
#curtain .c-sweep{position:absolute;top:-20%;bottom:-20%;width:40%;left:-50%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(242,230,200,.85),transparent);
  filter:blur(5px);mix-blend-mode:screen}

html.nav-in #curtain{height:100lvh}

/* ── language switcher: EN · DE · FR ───────────────────── */
.langsw{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.18em;line-height:1}
.langsw a{color:var(--dim);transition:color .18s linear}
.langsw a:hover{color:var(--paper)}
.langsw a[aria-current="true"]{color:var(--sand)}
.langsw>span{width:3px;height:3px;border-radius:50%;background:rgba(200,184,160,.34);flex:none}
nav .langsw{margin-left:auto;margin-right:18px}
body[data-nav="collapsed"] nav .langsw{margin-left:0}
/* hide it exactly when the desktop menu itself goes away, not before */
@media(max-width:700px){nav .langsw{display:none}}
@media(min-width:701px){.mnav .m-langsw,.pmnav .m-langsw{display:none}}
.mnav .m-langsw,.pmnav .m-langsw{margin-top:26px;gap:14px;font-size:13px;letter-spacing:.2em}
/* the mobile menu sits on paper, so the lit language has to go dark, not sand */
.mnav .m-langsw a,.pmnav .m-langsw a{border:0;padding:0;font-size:13px;color:var(--paper-dim)}
.mnav .m-langsw a[aria-current="true"],.pmnav .m-langsw a[aria-current="true"]{color:var(--ink)}
.mnav .m-langsw>span,.pmnav .m-langsw>span{background:rgba(10,10,10,.28)}