/* ============================================================
   MILIANYEN — site.css
   One design system for every page. Edit tokens in :root.
   Prefixes: hd header · mn menu · hr hero · tk ticker · pt point
   wk work-line · sv services · cl clients · st statement · ft footer
   fab action button · cur cursor · lb lightbox · ar archive
   ab about · ct contact · pr process · faq · lg legal
   ============================================================ */

/* ---------- fonts (self-hosted, no Google requests) ---------- */
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),
      url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url(../fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations"),
      url(../fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-display:swap; font-weight:300 700;
  src:url(../fonts/space-grotesk-latin-wght-normal.woff2) format("woff2-variations"),
      url(../fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-display:swap; font-weight:300 700;
  src:url(../fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations"),
      url(../fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-display:swap; font-weight:100 800;
  src:url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations"),
      url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
}

/* ---------- tokens ---------- */
:root{
  --ink:#0a0a0a;
  --paper:#f3f2ee;
  --signal:#ffa62b;            /* the one accent (tungsten amber) — change both lines together */
  --signal-rgb:255 166 43;
  --ink-rgb:10 10 10;
  --paper-rgb:243 242 238;

  /* surface roles — flipped by .on-dark */
  --fg:var(--ink);
  --bg:var(--paper);
  --fg-rgb:var(--ink-rgb);
  --line:rgb(var(--ink-rgb) / .12);
  --muted:rgb(var(--ink-rgb) / .56);
  --muted-strong:rgb(var(--ink-rgb) / .74);
  --card:#ffffff;
  --glow-rgb:var(--ink-rgb);
  --glow-a:.055;

  --f-display:"Archivo", "Arial Black", system-ui, sans-serif;
  --f-body:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-label:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --gutter:clamp(16px, 2.4vw, 40px);   /* one edge for logo, nav and content */
  --sec-y:clamp(88px, 13vh, 160px);
  --hd-h:72px;

  --mx:-999px; --my:-999px;            /* pointer, set by site.js */
  --vv-lift:0px;                       /* Safari toolbar lift, set by site.js */
}
.on-dark{
  --fg:var(--paper);
  --bg:var(--ink);
  --fg-rgb:var(--paper-rgb);
  --line:rgb(var(--paper-rgb) / .14);
  --muted:rgb(var(--paper-rgb) / .58);
  --muted-strong:rgb(var(--paper-rgb) / .76);
  --card:#131313;
  --glow-rgb:var(--paper-rgb);
  --glow-a:.075;
  background:var(--bg);
  color:var(--fg);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none!important; }
html{ background:var(--ink); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--signal); color:var(--ink); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:4px; border-radius:2px; }
.on-light-focus :focus-visible{ outline-color:var(--ink); }

.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:fixed; left:var(--gutter); top:12px; z-index:200; padding:12px 18px; background:var(--signal); color:var(--ink); font-family:var(--f-label); font-size:12px; letter-spacing:.2em; text-transform:uppercase; transform:translateY(-200%); transition:transform .3s var(--ease); }
.skip:focus{ transform:none; }

/* custom cursor hides the system one on fine pointers */
@media (hover:hover) and (pointer:fine){
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label,
  html.has-cursor input, html.has-cursor textarea, html.has-cursor select, html.has-cursor summary{ cursor:none; }
}

/* ---------- layout ---------- */
.frame{ padding-inline:var(--gutter); }
.sec{ position:relative; padding-block:var(--sec-y); }
.grid12{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(12px, 1.6vw, 28px); }

/* pointer glow — 9 smoothstep stops in oklab, so the falloff never bands */
.glow{ position:relative; isolation:isolate; }
.glow::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-attachment:fixed;
  background-image:radial-gradient(600px circle at var(--mx) var(--my),
    rgb(var(--glow-rgb) / var(--glow-a)) 0%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .957)) 8.75%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .844)) 17.5%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .684)) 26.25%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .5)) 35%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .316)) 43.75%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .156)) 52.5%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .043)) 61.25%,
    rgb(var(--glow-rgb) / 0) 70%);
  background-image:radial-gradient(in oklab 600px circle at var(--mx) var(--my),
    rgb(var(--glow-rgb) / var(--glow-a)) 0%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .957)) 8.75%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .844)) 17.5%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .684)) 26.25%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .5)) 35%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .316)) 43.75%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .156)) 52.5%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .043)) 61.25%,
    rgb(var(--glow-rgb) / 0) 70%);
}
@media (hover:none){ .glow::before{ display:none; } }

/* film grain — normal blend, low opacity (overlay vanishes on near-black) */
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 17%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-4%)}
  50%{transform:translate(-4%,-1%)} 67%{transform:translate(3%,3%)} 83%{transform:translate(-1%,4%)} 100%{transform:translate(0,0)}
}

/* ---------- type ---------- */
.dsp{
  font-family:var(--f-display); font-weight:900; font-stretch:125%;
  text-transform:uppercase; line-height:.9; letter-spacing:-.02em;
  font-synthesis:none;
}
.dsp-xxl{ font-size:clamp(min(46px, 12vw), 8.6vw, 188px); }
.dsp-xl{ font-size:clamp(min(44px, 11vw), 7.4vw, 160px); }
.dsp-l{ font-size:clamp(min(38px, 9.4vw), 5.6vw, 120px); }
.dsp-m{ font-size:clamp(30px, 3.9vw, 84px); }
.dsp-s{ font-size:clamp(22px, 2.1vw, 40px); }
.dsp-xs{ font-size:clamp(17px, 1.3vw, 24px); line-height:1.05; }
.outline{ color:transparent; -webkit-text-stroke:clamp(1px, .1vw, 1.6px) var(--fg); }
.dot::after{
  content:""; display:inline-block; width:.19em; height:.19em; margin-left:.04em;
  border-radius:50%; background:var(--signal); vertical-align:baseline;
}
.lbl{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-label); font-size:11px; font-weight:400; line-height:1.4;
  letter-spacing:.32em; text-transform:uppercase; color:var(--muted);
}
.lbl::before{ content:""; width:32px; height:1px; background:var(--signal); flex:none; }
.lbl.no-line::before{ display:none; }
/* "Director · Editor · Voiceover" stays on one line on small phones (360 px and below) */
@media (max-width:400px){ .hr-body .lbl, .ab-text .lbl{ letter-spacing:.22em; gap:10px; } .hr-body .lbl::before, .ab-text .lbl::before{ width:20px; } }
@media (max-width:340px){ .hr-body .lbl, .ab-text .lbl{ letter-spacing:.14em; } }
.mono{ font-family:var(--f-label); font-size:11px; letter-spacing:.28em; text-transform:uppercase; }
.lead{ max-width:46ch; color:var(--muted); font-size:clamp(16px, 1.15vw, 19px); line-height:1.6; }
.lead strong{ color:var(--fg); font-weight:600; }
.hl{ background:var(--signal); color:var(--ink); padding:.1em .5em; }

/* ---------- buttons ---------- */
.btn{
  --b-bg:transparent; --b-fg:var(--fg); --b-bd:var(--fg);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:58px; padding:0 32px; border-radius:999px;
  background:var(--b-bg); color:var(--b-fg); border:1px solid var(--b-bd);
  font-family:var(--f-body); font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
  will-change:transform;
}
.btn::before{ /* fill wipe on hover */
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--b-hover, var(--fg)); transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:none; }
.btn:hover{ --b-fg:var(--b-hover-fg, var(--bg)); }
.btn .arr{ width:14px; height:14px; transition:transform .5s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn:hover .arr.ne{ transform:translate(3px,-3px); }
.btn-signal{ --b-bg:var(--signal); --b-fg:var(--ink); --b-bd:var(--signal); --b-hover:var(--paper); --b-hover-fg:var(--ink); }
.on-dark .btn-signal{ --b-hover:var(--paper); }
.btn-ink{ --b-bg:var(--ink); --b-fg:var(--paper); --b-bd:var(--ink); --b-hover:var(--signal); --b-hover-fg:var(--ink); }
.btn-ghost{ --b-hover:var(--fg); --b-hover-fg:var(--bg); }
.txt-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-label); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-strong);
  background:linear-gradient(currentColor,currentColor) left bottom / 0 1px no-repeat;
  padding-bottom:6px; transition:background-size .5s var(--ease), color .3s;
}
.txt-link:hover{ background-size:100% 1px; color:var(--fg); }
.txt-link .arr{ width:12px; height:12px; }

/* ---------- reveal (site.js adds .is-in) ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay:var(--d, 0s); }
.rv.is-in{ opacity:1; transform:none; }
.split .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em; }
.split .wi{ display:inline-block; transform:translateY(105%); transition:transform 1.1s var(--ease); transition-delay:calc(var(--i, 0) * 55ms + var(--d, 0s)); }
.split.is-in .wi{ transform:none; }
.split .dot::after{ opacity:0; transform:scale(0); transition:opacity .5s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--d, 0s) + .55s); }
.split.is-in .dot::after{ opacity:1; transform:none; }
html.no-js .split .dot::after, html.reduced .split .dot::after{ opacity:1; transform:none; }
html.no-js .rv, html.reduced .rv{ opacity:1; transform:none; }
html.no-js .split .wi, html.reduced .split .wi{ transform:none; }

/* ============================================================
   HEADER
   ============================================================ */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:80; height:var(--hd-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-inline:var(--gutter);
  color:var(--paper);
  transition:color .45s var(--ease), transform .6s var(--ease), background-color .45s var(--ease), backdrop-filter .45s var(--ease), opacity .8s var(--ease), filter .8s var(--ease);
  pointer-events:none;
}
.hd.is-light{ color:var(--ink); }
.hd.is-scrolled{ background:rgb(var(--ink-rgb) / .55); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); pointer-events:auto; }
.hd.is-scrolled.is-light{ background:rgb(var(--paper-rgb) / .72); }
.hd.is-hidden{ transform:translateY(-100%); }
html.menu-open .hd{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none; }
html.menu-open .hd{ color:var(--paper); }
.hd > *{ pointer-events:auto; }
.hd-logo{ display:flex; align-items:center; padding:8px 8px 8px 0; margin-left:-6px; }
.hd-logo .mark{ height:28px; transition:transform .5s var(--ease); }
@media (max-width:700px){ .hd-logo .mark{ height:24px; } }
.hd-logo:hover .mark{ transform:translateY(-1px) scale(1.04); }

/* the M¥ mark — the client's own SVG; ¥ hangs under the M's bottom-right corner */
.mark{ display:block; width:auto; height:1em; overflow:visible; }
.mark .m{ fill:currentColor; }
.mark .y{ fill:var(--signal); animation:yenGlow 3.2s ease-in-out infinite; }
@keyframes yenGlow{ 0%,100%{ filter:drop-shadow(0 0 0 rgb(var(--signal-rgb) / 0)); } 50%{ filter:drop-shadow(0 0 4px rgb(var(--signal-rgb) / .7)); } }
.hd.is-light .mark .y{ fill:var(--ink); animation:none; }
html.menu-open .hd .mark .y{ fill:var(--signal); }
@media (prefers-reduced-motion:reduce){ .mark .y{ animation:none; } }
.hd-nav{ display:flex; align-items:center; gap:clamp(20px, 2.6vw, 44px); }
.hd-nav a{
  position:relative; font-family:var(--f-body); font-weight:500; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; padding:8px 0;
}
.hd-nav a::after{ /* underline */
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease);
}
.hd-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hd-nav a[aria-current="page"]::before{
  content:""; position:absolute; right:-9px; top:4px; width:5px; height:5px; border-radius:50%; background:var(--signal);
}
.hd.is-light .hd-nav a[aria-current="page"]::before{ background:var(--ink); }
.hd-menu{ display:none; align-items:center; gap:12px; font-family:var(--f-label); font-size:11px; letter-spacing:.3em; text-transform:uppercase; padding:12px 0 12px 12px; }
.hd-menu i{ position:relative; display:block; width:22px; height:8px; }
.hd-menu i::before,.hd-menu i::after{ content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform .5s var(--ease), top .5s var(--ease); }
.hd-menu i::before{ top:0; } .hd-menu i::after{ top:6.5px; }
html.menu-open .hd-menu i::before{ top:3.25px; transform:rotate(45deg); }
html.menu-open .hd-menu i::after{ top:3.25px; transform:rotate(-45deg); }

@media (max-width:860px){
  .hd-nav{ display:none; }
  .hd-menu{ display:flex; }
}

/* mobile menu sheet */
.mn{
  position:fixed; inset:0; z-index:70; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:flex-start; gap:40px;
  padding:calc(var(--hd-h) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  padding-top:max(calc(var(--hd-h) + 24px), 21vh); padding-top:max(calc(var(--hd-h) + 24px), 21svh);
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path .8s var(--ease-io), visibility 0s .8s;
}
html.menu-open .mn{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .8s var(--ease-io), visibility 0s; }
/* the five links start high and share the band down to about 70 % of the screen, each row with its rule */
.mn-links{ display:flex; flex-direction:column; min-height:50vh; min-height:50svh; }
.mn-links li{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-end; }
.mn-links a{ display:flex; align-items:baseline; gap:16px; padding:6px 0; border-bottom:1px solid rgb(var(--paper-rgb) / .12); }
.mn-foot{ margin-top:auto; }
.mn-links .n{ font-family:var(--f-label); font-size:11px; letter-spacing:.2em; color:rgb(var(--paper-rgb) / .5); width:28px; }
.mn-links .t{ font-family:var(--f-display); font-weight:900; font-stretch:125%; text-transform:uppercase; font-size:clamp(34px, 11vw, 64px); line-height:1.05; letter-spacing:-.02em; }
.mn-links a[aria-current="page"] .t::after{ content:""; display:inline-block; width:.18em; height:.18em; margin-left:.06em; border-radius:50%; background:var(--signal); }
.mn-foot{ display:flex; flex-wrap:wrap; gap:12px 22px; font-family:var(--f-label); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgb(var(--paper-rgb) / .7); }
.mn-links li{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .8s var(--ease); }
html.menu-open .mn-links li{ opacity:1; transform:none; transition-delay:calc(.25s + var(--i) * 60ms); }

/* ============================================================
   CURSOR
   ============================================================ */
.cur-ring,.cur-dot{ position:fixed; left:0; top:0; z-index:120; pointer-events:none; border-radius:50%; opacity:0; transition:opacity .3s; }
.cur-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid #fff; mix-blend-mode:difference;
  transition:opacity .3s, width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s, border-color .3s;
  display:flex; align-items:center; justify-content:center;
}
.cur-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--signal); }
html.cur-on .cur-ring, html.cur-on .cur-dot{ opacity:1; }
html.cur-hot .cur-ring{ width:58px; height:58px; margin:-29px 0 0 -29px; }
html.cur-hot .cur-dot{ opacity:0; }
.cur-label{ font-family:var(--f-label); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); opacity:0; transition:opacity .25s; }
html.cur-play .cur-ring{ width:66px; height:66px; margin:-33px 0 0 -33px; background:var(--signal); border-color:var(--signal); mix-blend-mode:normal; }
html.cur-play .cur-label{ opacity:1; }
html.cur-play .cur-dot{ opacity:0; }
html.cur-down .cur-ring{ width:26px; height:26px; margin:-13px 0 0 -13px; }

/* ============================================================
   HERO
   ============================================================ */
.hr{
  position:relative; isolation:isolate; min-height:100vh; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--hd-h) + 40px) var(--gutter) 0;
}
.hr-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:#000; }
.hr-media video, .hr-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) contrast(1.08) brightness(.72);
  transform:scale(var(--hr-scale, 1.04)); transform-origin:50% 40%;
}
/* scrim: smoothstep stops, bottom heavy so type always reads */
.hr-scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to top,
    rgb(var(--ink-rgb) / .92) 0%, rgb(var(--ink-rgb) / .89) 12.5%, rgb(var(--ink-rgb) / .81) 25%,
    rgb(var(--ink-rgb) / .70) 37.5%, rgb(var(--ink-rgb) / .58) 50%, rgb(var(--ink-rgb) / .46) 62.5%,
    rgb(var(--ink-rgb) / .36) 75%, rgb(var(--ink-rgb) / .30) 87.5%, rgb(var(--ink-rgb) / .28) 100%);
  background:linear-gradient(in oklab to top,
    rgb(var(--ink-rgb) / .92) 0%, rgb(var(--ink-rgb) / .89) 12.5%, rgb(var(--ink-rgb) / .81) 25%,
    rgb(var(--ink-rgb) / .70) 37.5%, rgb(var(--ink-rgb) / .58) 50%, rgb(var(--ink-rgb) / .46) 62.5%,
    rgb(var(--ink-rgb) / .36) 75%, rgb(var(--ink-rgb) / .30) 87.5%, rgb(var(--ink-rgb) / .28) 100%);
}
/* --hr-gap: room between the buttons and the bar line — the easter-egg note sits centred in it */
.hr{ --hr-gap:clamp(44px, 5.5vh, 60px); }
.hr-body{ position:relative; display:grid; gap:clamp(22px, 3.2vh, 36px); padding-bottom:var(--hr-gap); opacity:var(--hr-fade, 1); }
.hr-title .ln{ display:block; will-change:transform; }
.hr-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px 40px; flex-wrap:wrap; }
.hr-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hr-foot{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; column-gap:24px;
  padding:22px 0 26px; border-top:1px solid rgb(var(--paper-rgb) / .14);
  font-family:var(--f-label); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:rgb(var(--paper-rgb) / .62);
  opacity:var(--hr-fade, 1);
}
.hr-foot > :last-child{ justify-self:end; }
.hr-mark{ justify-self:start; display:inline-flex; align-items:center; padding:8px 0; color:rgb(var(--paper-rgb) / .62); }
.hr-mark > span:first-child{ display:inline-flex; align-items:center; gap:12px; }
.hr-mark .mark{ height:22px; color:var(--paper); transition:transform .5s var(--ease); }
.hr-np{ min-width:0; justify-self:center; text-align:center; }
.hr-handle{ margin-right:76px; transition:opacity .5s var(--ease); }
html.sound-hint .hr-handle{ opacity:0; }   /* the sound hint takes its place for a moment */
/* easter egg: the mark leads to About — a small note pops up on hover (first tap on touch) */
.hr-egg{
  position:absolute; left:0; bottom:calc(100% + (var(--hr-gap) - 30px) / 2); height:30px; display:inline-flex; align-items:center;
  white-space:nowrap; padding:0 13px; border-radius:999px;
  font-size:10px; letter-spacing:.2em; color:var(--paper);
  background:rgb(0 0 0 / .42); border:1px solid rgb(var(--paper-rgb) / .2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:translateY(6px) scale(.94); transform-origin:left bottom; pointer-events:none;
  transition:opacity .3s var(--ease), transform .45s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .hr-mark:hover .hr-egg{ opacity:1; transform:none; }
  .hr-mark:hover .mark{ transform:translateY(-2px) scale(1.06); }
}
.hr-mark:focus-visible .hr-egg, .hr-mark.is-armed .hr-egg{ opacity:1; transform:none; }
.hr-mark.is-armed .hr-egg{ pointer-events:auto; }   /* the second tap may land on the note itself */
.hr-mark.is-armed .mark{ transform:translateY(-2px) scale(1.06); }

@media (max-width:700px){
  .hr-foot{ grid-template-columns:auto minmax(0,1fr); column-gap:20px; }
  .hr-handle{ display:none; }
  .hr{ --hr-gap:58px; }
  /* phones: the text block starts high (22 % of the screen) and the bar stays at the bottom —
     the room in between is left empty on purpose */
  .hr{ justify-content:space-between; padding-top:max(calc(var(--hd-h) + 16px), 22vh); padding-top:max(calc(var(--hd-h) + 16px), 22svh); }
  .hr-np{ justify-self:start; text-align:left; }
  /* phones: "Now playing — Work-sthetics" on ONE line in the room between the mark and the round button —
     the size follows the screen width (room = 100vw − 196px incl. 12px air, 27 characters at 0.76em) */
  .hr-foot{ column-gap:14px; }
  .hr-mark > span:first-child{ gap:8px; }
  .hr-foot .hr-np{ font-size:clamp(8.5px, calc((100vw - 196px) / 20.5), 10px); letter-spacing:.16em; line-height:1.75; }
  .hr-foot .hr-np .np{ gap:9px; }
  .hr-foot{ padding-right:96px; }
  .hr .btn{ height:52px; padding:0 24px; font-size:13px; }
  .hr-title{ font-size:9vw; }   /* three calm lines like the reference: "that creates" (9.8em) just fits */
  .hr-body{ gap:20px; }
  /* phones: label + headline + text sit together around the middle, the buttons follow ~1 cm
     (≈60 px on an iPhone) lower — the free space is spread over the whole screen, not piled at the bottom */
  .hr-body{ flex:1 1 auto; display:flex; flex-direction:column; }
  .hr-body > .lbl{ margin-top:auto; }
  .hr-row{ margin-bottom:auto; row-gap:88px; }
}
@media (min-width:375px) and (max-width:700px){ .hr-foot .hr-np{ white-space:nowrap; } }
/* short phones (SE & co.): the block starts a little higher, so the bar stays on screen */
@media (max-width:700px) and (max-height:700px){ .hr{ padding-top:max(calc(var(--hd-h) + 16px), 15vh); padding-top:max(calc(var(--hd-h) + 16px), 15svh); } .hr-row{ row-gap:44px; } }
/* smallest phones (≤350 px): the mark drops its [ ] and "Now playing" takes two clean lines */
@media (max-width:350px){ .hr-mark > span:first-child{ font-size:0; gap:0; } }

/* ============================================================
   TICKER
   ============================================================ */
.tk{ position:relative; overflow:hidden; border-block:1px solid var(--line); background:var(--bg); }
.tk-track{ display:flex; width:max-content; will-change:transform; }
.tk-item{
  display:flex; align-items:center; gap:clamp(28px, 4vw, 64px); padding:20px clamp(14px, 2vw, 32px);
  font-family:var(--f-display); font-weight:800; font-stretch:125%; text-transform:uppercase;
  font-size:clamp(17px, 1.5vw, 26px); letter-spacing:.01em; white-space:nowrap;
}
.tk-item::after{ content:""; width:12px; height:12px; background:var(--signal); transform:rotate(45deg); flex:none; }
html.reduced .tk-track{ flex-wrap:wrap; width:auto; }

/* ============================================================
   POINT (statement with scroll-fill)
   ============================================================ */
.pt-title{ margin:26px 0 34px; }
.pt-fill{
  color:transparent; -webkit-text-stroke:clamp(1px, .1vw, 1.6px) var(--fg);
  background:linear-gradient(90deg, var(--fg) 0 var(--fill, 0%), transparent var(--fill, 0%) 100%);
  -webkit-background-clip:text; background-clip:text;
}
.pt-grid{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:32px; align-items:end; }
.pt-meta{ display:grid; gap:22px; text-align:right; }
.pt-meta > div{ display:grid; gap:8px; }
.pt-meta .mono{ color:var(--muted); font-size:10px; }
.pt-meta b{ font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:clamp(28px, 2.6vw, 48px); line-height:1; color:var(--fg); }
@media (max-width:860px){ .pt-grid{ grid-template-columns:1fr; } .pt-meta{ text-align:left; grid-auto-flow:column; justify-content:start; gap:28px; } }

/* ============================================================
   MAP (home) — four films in a pinwheel; scrolling brings each forward
   geometry: horizontal 16u×9u, vertical 9u×16u, centre (7u−g)², board 25u+g
   ============================================================ */
.mp{ position:relative; }
.mp-track{ position:relative; height:400vh; }
.mp-stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
  gap:clamp(24px, 3vw, 64px);
  padding:calc(var(--hd-h) + 8px) var(--gutter) clamp(24px, 4vh, 44px);
}
.mp-board{ margin-top:clamp(0px, 2vh, 24px); }
.mp-left{ align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; gap:32px; padding-block:clamp(8px, 3vh, 36px); }
.mp-left h2{ margin-top:22px; font-size:clamp(30px, 3.1vw, 66px); }
.mp-left .lead{ margin-top:22px; max-width:30ch; font-size:15px; }
.mp-steps{ display:grid; gap:2px; }
.mp-step{
  display:grid; grid-template-columns:30px auto minmax(24px, 1fr); align-items:center; gap:14px;
  padding:9px 0; text-align:left; color:var(--muted);
  font-family:var(--f-label); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  transition:color .4s var(--ease);
}
.mp-step .bar{ position:relative; height:1px; background:var(--line); overflow:hidden; }
.mp-step .bar::after{ content:""; position:absolute; inset:0; background:var(--signal); transform-origin:left; transform:scaleX(var(--f, 0)); }
.mp-step:hover, .mp-step.is-on{ color:var(--fg); }
.mp-step.is-on .n{ color:var(--signal); }

.mp-board{
  --S:min(calc(100svh - var(--hd-h) - 150px), 50vw, 1000px);
  --g:12px; --u:calc((var(--S) - var(--g)) / 25);
  position:relative; width:var(--S); height:var(--S); perspective:1700px;
}
.mp-plane{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--ps, 1));
  will-change:transform;
}
.mp-cell{
  position:absolute; z-index:1;
  transform:translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, 0px)) scale(var(--ts, 1));
  opacity:var(--to, 1); will-change:transform, opacity;
}
.mp-cell.is-focus{ z-index:3; }
.mp-cell .film{ height:100%; box-shadow:0 0 0 1px rgb(var(--paper-rgb) / .06); transition:box-shadow .7s var(--ease); }
.mp-cell.is-focus .film{ box-shadow:0 40px 90px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(var(--signal-rgb) / .55); }
.mp-cell.is-focus .film .media{ filter:none; }
.mp-cell.a{ left:0; top:0; width:calc(var(--u) * 16); height:calc(var(--u) * 9); }
.mp-cell.b{ left:calc(var(--u) * 16 + var(--g)); top:0; width:calc(var(--u) * 9); height:calc(var(--u) * 16); }
.mp-cell.c{ left:calc(var(--u) * 9 + var(--g)); top:calc(var(--u) * 16 + var(--g)); width:calc(var(--u) * 16); height:calc(var(--u) * 9); }
.mp-cell.d{ left:0; top:calc(var(--u) * 9 + var(--g)); width:calc(var(--u) * 9); height:calc(var(--u) * 16); }
.mp-tag{
  position:absolute; left:14px; bottom:14px; z-index:2; display:flex; gap:10px; align-items:center;
  font-family:var(--f-label); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#fff;
  padding:7px 11px; border-radius:999px; background:rgb(0 0 0 / .42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.mp-tag b{ color:var(--signal); font-weight:400; }
.mp-core{
  position:absolute; left:calc(var(--u) * 9 + var(--g)); top:calc(var(--u) * 9 + var(--g));
  width:calc(var(--u) * 7 - var(--g)); height:calc(var(--u) * 7 - var(--g));
  display:grid; place-items:center; border:1px solid var(--line); text-align:center;
  transform:translateZ(-1px);
}
.mp-core-in{ display:grid; justify-items:center; gap:calc(var(--u) * .35); }
.mp-core .num{ font-family:var(--f-display); font-weight:900; font-stretch:125%; font-size:calc(var(--u) * 2.5); line-height:.9; color:transparent; -webkit-text-stroke:1.2px var(--fg); }
.mp-core .of{ font-family:var(--f-label); font-size:10px; letter-spacing:.3em; color:var(--muted); }
.mp-core::before,.mp-core::after{ /* crosshair ticks — the "map" marks */
  content:""; position:absolute; background:var(--signal);
}
.mp-core::before{ left:50%; top:-5px; width:1px; height:10px; box-shadow:0 calc(var(--u) * 7 - var(--g)) 0 var(--signal); }
.mp-core::after{ top:50%; left:-5px; height:1px; width:10px; box-shadow:calc(var(--u) * 7 - var(--g)) 0 0 var(--signal); }

.mp-right{ align-self:center; }
.mp-infos{ display:grid; }
.mp-info{
  grid-area:1 / 1; display:grid; gap:18px; align-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .7s var(--ease), visibility 0s .5s;
}
.mp-info.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .6s var(--ease) .08s, transform .8s var(--ease) .08s, visibility 0s; }
.mp-info h3{ font-size:clamp(22px, 2.1vw, 42px); line-height:.95; }
.mp-info .n{ font-family:var(--f-label); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.mp-info .n b{ color:var(--signal); font-weight:400; }
.mp-info p{ color:var(--muted-strong); font-size:15.5px; max-width:34ch; }
.mp-stat{ display:flex; flex-wrap:wrap; gap:8px; }
.mp-stat span{ font-family:var(--f-label); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:7px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted-strong); }
.mp-acts{ display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; margin-top:4px; }
.mp-acts .btn{ height:50px; padding:0 24px; font-size:13px; }
.mp-cap{ display:none; }

.mp-end{ text-align:center; display:grid; justify-items:center; gap:26px; padding-block:clamp(70px, 12vh, 140px) var(--sec-y); }
.mp-end .mono{ color:var(--signal); }
.mp-end .row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* below desktop size the map becomes a stack; each film still pops forward as it reaches the centre */
@media (max-width:1099px), (max-height:599px){
  .mp-track{ height:auto; }
  .mp-stage{ position:relative; height:auto; display:block; overflow:visible; padding:var(--sec-y) var(--gutter) 0; }
  .mp-left{ padding:0; margin-bottom:clamp(44px, 8vh, 72px); }
  .mp-left h2{ font-size:clamp(38px, 9vw, 96px); }
  .mp-steps, .mp-core, .mp-right{ display:none; }
  .mp-board{ width:auto; height:auto; perspective:none; }
  .mp-plane{ transform:none!important; display:grid; gap:clamp(56px, 9vh, 90px); }
  .mp-cell, .mp-cell.a, .mp-cell.b, .mp-cell.c, .mp-cell.d{ position:relative; left:auto; top:auto; width:100%; height:auto; transform:scale(var(--ts, 1)); opacity:1; }
  .mp-cell .film{ height:auto; aspect-ratio:16 / 9; }
  .mp-cell.b .film, .mp-cell.d .film{ aspect-ratio:9 / 16; }
  .mp-cell.b, .mp-cell.d{ width:min(68%, 420px); }
  .mp-cell.d{ justify-self:end; }
  .mp-cap{ display:grid; gap:10px; margin-top:18px; }
  .mp-cap .n{ font-family:var(--f-label); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
  .mp-cap .n b{ color:var(--signal); font-weight:400; }
  .mp-cap p{ color:var(--muted-strong); font-size:15px; }
  .mp-tag{ display:none; }
}

/* film card (shared by map + archive) */
.film{ position:relative; display:block; width:100%; overflow:hidden; background:#111; isolation:isolate; }
.film video, .film img{ width:100%; height:100%; object-fit:cover; }
.film .media{ position:absolute; inset:0; filter:grayscale(1) contrast(1.08); transition:filter .9s var(--ease), transform 1.2s var(--ease); transform:scale(1.001); }
.film .media > *{ position:absolute; inset:0; }
.film.is-lit .media, .film:hover .media, .film:focus-visible .media{ filter:none; }
.film:hover .media{ transform:scale(1.03); }
.film .pv{ opacity:0; transition:opacity .5s; }
.film.is-playing .pv{ opacity:1; }
.film::after{ content:""; position:absolute; inset:0 0 auto 0; height:96px; z-index:1; pointer-events:none;
  background:linear-gradient(rgb(0 0 0 / .42), rgb(0 0 0 / .4) 12.5%, rgb(0 0 0 / .35) 25%, rgb(0 0 0 / .29) 37.5%, rgb(0 0 0 / .21) 50%, rgb(0 0 0 / .13) 62.5%, rgb(0 0 0 / .07) 75%, rgb(0 0 0 / .02) 87.5%, rgb(0 0 0 / 0)); }
.film-time{ position:absolute; left:16px; top:14px; z-index:2; font-family:var(--f-label); font-size:11px; letter-spacing:.2em; color:#fff; text-shadow:0 1px 8px rgb(0 0 0 / .5); }

/* ============================================================
   SPLIT TILES (YouTube / About)
   ============================================================ */
/* two films, each a full-width 16:9 frame of its own; the text sits bottom-left in the picture */
.sl{ display:grid; grid-template-columns:1fr; }
.sl-tile{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:16 / 9; max-height:100vh; max-height:100svh; padding:clamp(28px, 4vw, 64px); overflow:hidden; color:var(--paper); background:var(--ink); isolation:isolate; }
.sl-txt{ position:relative; z-index:1; display:flex; flex-direction:column; gap:16px; pointer-events:none; }   /* clicks on the text fall through to the film */
/* the film is a button: it opens the player with sound; only the link below the text leaves the page */
.sl-play{ position:absolute; inset:0; display:block; width:100%; padding:0; border:0; background:none; color:inherit; cursor:pointer; }
.sl-play:focus-visible{ outline:2px solid var(--signal); outline-offset:-6px; }
.sl-tile .bg{ display:block; }
/* TILE WATCH — a tap on the film: its text dissolves (like the hero's watch mode), the film plays on in
   colour with sound; only the link, "Now showing" and a Close stay. .sl-anim keeps the transitions for the way back */
.sl-anim .sl-txt > :not(.go){ transition:opacity .9s var(--ease) var(--wd, 0s), filter 1.1s var(--ease) var(--wd, 0s), transform 1.2s var(--ease) var(--wd, 0s); }
.sl-anim .bg > *{ transition:filter 1.4s var(--ease), transform 1.6s var(--ease)!important; }
.sl-anim::after{ transition:opacity 1.4s var(--ease); }
.sl-anim .sl-txt .go{ transition:transform 1.1s var(--ease) .15s; }
@media (max-width:860px){ .sl-tile.is-watching .sl-txt .go{ transform:translateY(var(--go-shift, 0px)); } }
.sl-tile.is-watching .sl-txt > :not(.go){ opacity:0; filter:blur(14px); transform:translateY(-8px) scale(.985); }
.sl-tile.is-watching .bg > *{ filter:none!important; transform:scale(1)!important; }
.sl-tile.is-watching::after{ opacity:.35; }
.sl-x{ position:absolute; top:clamp(16px, 3vw, 36px); right:clamp(16px, 3vw, 40px); z-index:3;
  display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:999px;
  font-family:var(--f-label); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--paper);
  background:rgb(0 0 0 / .35); border:1px solid rgb(var(--paper-rgb) / .25); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility 0s .5s, background-color .3s, color .3s; }
.sl-tile.is-watching .sl-x{ opacity:1; visibility:visible; transition:opacity .8s var(--ease) .6s, visibility 0s, background-color .3s, color .3s; }
.sl-x:hover{ background:var(--signal); color:var(--ink); border-color:var(--signal); }
.sl-x i{ position:relative; width:14px; height:14px; }
.sl-x i::before,.sl-x i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor; transform:rotate(45deg); }
.sl-x i::after{ transform:rotate(-45deg); }
.sl-state{ position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; display:grid; place-items:center;
  background:rgb(0 0 0 / .35); border:1px solid rgb(var(--paper-rgb) / .3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:scale(.9); transition:opacity .4s var(--ease), transform .5s var(--ease); pointer-events:none; }
.sl-state svg{ width:22px; height:22px; margin-left:3px; }
.sl-tile.is-paused .sl-state{ opacity:1; transform:none; }
.sl-bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgb(var(--paper-rgb) / .18); opacity:0; transition:opacity .6s var(--ease); pointer-events:none; }
.sl-bar i{ display:block; height:100%; background:var(--signal); transform-origin:left; transform:scaleX(0); }
.sl-tile.is-watching .sl-bar{ opacity:1; transition-delay:.6s; }
.sl-tile .bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.sl-tile .bg > *{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.7); transform:scale(1.06); transition:filter 1s var(--ease), transform 1.6s var(--ease); }
.sl-tile:hover .bg > *{ filter:grayscale(0) brightness(.62); transform:scale(1.1); }
/* a film in the tile: colour on hover — on touch screens once it is properly in view (.is-lit) */
.sl-tile.is-lit .bg > *{ filter:grayscale(0) brightness(.62); transform:scale(1.1); }
.sl-now{ position:absolute; top:clamp(22px, 3vw, 40px); left:clamp(28px, 4vw, 64px); pointer-events:none; display:inline-flex; align-items:center; gap:10px; font-size:10px; color:rgb(var(--paper-rgb) / .72); }
/* "The person behind [M¥]": the mark instead of the letters — its M gets the cap height of the type and stands
   on the baseline, the ¥ hangs below like a descender. From the SVG: M spans y 25.43–47.40 of the viewBox
   24.6–59.8, Archivo 900 cap height = .688em → mark height 1.102em, bottom .388em under the baseline */
.sl-h{ margin-bottom:.3em; }
.sl-h .nw{ white-space:nowrap; }
.sl-mark{ margin-left:.34em; }
.sl-mark .mark{ display:inline-block; height:1.102em; width:auto; vertical-align:-.388em; }
.sl-now::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); }
.sl-tile::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to top, rgb(var(--ink-rgb) / .85) 0%, rgb(var(--ink-rgb) / .8) 12.5%, rgb(var(--ink-rgb) / .68) 25%, rgb(var(--ink-rgb) / .52) 37.5%, rgb(var(--ink-rgb) / .36) 50%, rgb(var(--ink-rgb) / .22) 62.5%, rgb(var(--ink-rgb) / .12) 75%, rgb(var(--ink-rgb) / .06) 87.5%, rgb(var(--ink-rgb) / .04) 100%);
  background:linear-gradient(in oklab to top, rgb(var(--ink-rgb) / .85) 0%, rgb(var(--ink-rgb) / .8) 12.5%, rgb(var(--ink-rgb) / .68) 25%, rgb(var(--ink-rgb) / .52) 37.5%, rgb(var(--ink-rgb) / .36) 50%, rgb(var(--ink-rgb) / .22) 62.5%, rgb(var(--ink-rgb) / .12) 75%, rgb(var(--ink-rgb) / .06) 87.5%, rgb(var(--ink-rgb) / .04) 100%); }
.sl-tile .lbl{ color:rgb(var(--paper-rgb) / .7); }
.sl-tile p{ max-width:36ch; color:rgb(var(--paper-rgb) / .78); font-size:15.5px; }
.sl-tile .go{ align-self:flex-start; pointer-events:auto; display:inline-flex; align-items:center; gap:12px; margin-top:8px; font-family:var(--f-label); font-size:11px; letter-spacing:.3em; text-transform:uppercase; }
.sl-tile .go i{ width:44px; height:44px; border-radius:50%; border:1px solid rgb(var(--paper-rgb) / .5); display:grid; place-items:center; transition:background-color .4s, color .4s, border-color .4s; }
.sl-tile .go svg{ width:14px; height:14px; }
.sl-tile .go:hover i, .sl-tile .go:focus-visible i{ background:var(--signal); color:var(--ink); border-color:var(--signal); }
/* phones & tablets: a 16:9 frame is too flat to carry the text — the film sits on top, the text below it */
@media (max-width:860px){
  .sl-tile{ aspect-ratio:auto; max-height:none; padding:0; justify-content:flex-start; }
  .sl-play{ position:relative; inset:auto; aspect-ratio:16 / 9; }
  .sl-tile .bg{ position:absolute; inset:0; z-index:0; }
  .sl-x{ top:12px; right:var(--gutter); padding:10px 14px; }
  .sl-state{ width:60px; height:60px; margin:-30px 0 0 -30px; z-index:2; }
  .sl-bar{ z-index:2; }
  .sl-tile::after{ inset:0 0 auto 0; aspect-ratio:16 / 9; z-index:1; background:linear-gradient(to top, rgb(var(--ink-rgb) / .5), rgb(var(--ink-rgb) / 0) 45%); }
  .sl-now{ z-index:2; top:14px; left:var(--gutter); }
  .sl-txt{ padding:26px var(--gutter) clamp(44px, 10vw, 60px); }
}

/* ============================================================
   SERVICES PREVIEW (home)
   ============================================================ */
.sv-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(36px, 6vh, 64px); }
.sv-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border:1px solid var(--line); }
.sv-cell{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:60px;
  min-height:clamp(260px, 32vh, 360px); padding:clamp(22px, 2.2vw, 38px);
  border-right:1px solid var(--line); transition:background-color .6s var(--ease), color .6s var(--ease);
}
.sv-cell:last-child{ border-right:0; }
.sv-cell .mono{ color:var(--muted); }
.sv-cell h3{ margin-bottom:14px; }
.sv-cell p{ color:var(--muted); font-size:15px; line-height:1.6; max-width:34ch; }
.sv-cell:hover{ background:var(--ink); color:var(--paper); }
.sv-cell:hover .mono{ color:var(--signal); }
.sv-cell:hover p{ color:rgb(var(--paper-rgb) / .66); }
@media (max-width:1100px){ .sv-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .sv-cell:nth-child(2){ border-right:0; } .sv-cell:nth-child(-n+2){ border-bottom:1px solid var(--line); } }
@media (max-width:620px){ .sv-grid{ grid-template-columns:1fr; } .sv-cell{ border-right:0; border-bottom:1px solid var(--line); min-height:0; gap:36px; } .sv-cell:last-child{ border-bottom:0; } }

/* ============================================================
   CLIENTS — brand wheel: original logos on a drum, scroll turns it
   ============================================================ */
.cl-brace{ display:flex; align-items:center; gap:22px; font-family:var(--f-label); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--fg); }
.cl-brace::before,.cl-brace::after{ font-family:var(--f-body); font-weight:300; font-size:64px; line-height:1; letter-spacing:0; }
.cl-brace::before{ content:"{"; } .cl-brace::after{ content:"}"; }
.cw{ --cw-ih:clamp(96px, 18vh, 184px); }
.cw-track{ position:relative; height:calc(100vh + var(--cw-n, 7) * 30vh); }
.cw-stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:center; column-gap:clamp(24px, 4vw, 80px);
  padding:calc(var(--hd-h) + 16px) var(--gutter) clamp(24px, 5vh, 56px);
}
.cw-info{ display:grid; gap:clamp(20px, 3.4vh, 36px); align-content:center; justify-items:start; }
.cw-count{ color:var(--muted); font-size:12px; }
.cw-title{ font-size:clamp(40px, 5.2vw, 104px); }
.cw-fill{
  color:transparent; -webkit-text-stroke:clamp(1px, .1vw, 1.6px) var(--fg);
  background:linear-gradient(90deg, var(--fg) 0 var(--fill, 0%), transparent var(--fill, 0%) 100%);
  -webkit-background-clip:text; background-clip:text;
}
/* camera HUD in the corners: crop marks, REC, running timecode, camera data */
.cw-hud{ position:absolute; inset:calc(var(--hd-h) + 6px) var(--gutter) clamp(18px, 3.5vh, 36px); pointer-events:none; font-family:var(--f-label); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.cw-hud::before{
  content:""; position:absolute; inset:0; --c:rgb(var(--paper-rgb) / .35); --l:22px; --w:1px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
}
.cw-rec, .cw-tc, .cw-cam{ position:absolute; display:flex; align-items:center; gap:10px; }
.cw-rec{ left:34px; top:12px; color:var(--fg); }
.cw-rec::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--signal); animation:recGlow 1.6s ease-in-out infinite; }
@keyframes recGlow{
  0%,100%{ opacity:.25; box-shadow:0 0 0 0 rgb(var(--signal-rgb) / 0); }
  50%{ opacity:1; box-shadow:0 0 10px 2px rgb(var(--signal-rgb) / .55); }
}
.cw-tc{ right:34px; top:12px; font-variant-numeric:tabular-nums; color:var(--fg); }
.cw-cam{ left:34px; bottom:10px; }
html.reduced .cw-hud{ display:none; }
@media (max-width:860px){ .cw-cam{ display:none; } .cw-info .lbl{ display:none; } .cw-info{ padding-top:22px; } .cw-title{ font-size:min(13vw, 72px); } .cw-hud{ inset:calc(var(--hd-h) - 6px) 10px 12px; } .cw-rec{ left:28px; } .cw-tc{ right:28px; } }
.cw-count b{ color:var(--signal); font-weight:400; }
.cw-cards{ display:grid; min-height:170px; }
.cw-card{
  grid-area:1 / 1; display:grid; gap:16px; align-content:start; justify-items:start;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .45s;
}
.cw-card.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .55s var(--ease) .05s, transform .7s var(--ease) .05s, visibility 0s; }
.cw-card h3{ font-size:clamp(24px, 2.6vw, 46px); }
.cw-card .btn{ height:52px; padding:0 26px; font-size:13px; }
.cw-yours{ font-family:var(--f-label); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-strong); }
/* the wheel */
.cw-wheel{
  position:relative; height:100%; display:grid; align-items:center; perspective:1200px; perspective-origin:50% 50%;
  -webkit-mask-image:linear-gradient(transparent, #000 24%, #000 76%, transparent);
          mask-image:linear-gradient(transparent, #000 24%, #000 76%, transparent);
}
/* viewfinder: four amber corners around the slot that is "in frame" */
.cw-wheel::before{
  content:""; position:absolute; left:calc(3.2ch + clamp(18px, 2.4vw, 40px) - 18px); right:clamp(8px, 4vw, 60px); top:50%; z-index:2;
  height:calc(var(--cw-ih) + 24px); translate:0 -50%; pointer-events:none;
  --c:var(--signal); --l:18px; --w:1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
}
html.reduced .cw-wheel::before{ display:none; }
.cw-drum{ position:relative; height:var(--cw-ih); margin:0; padding:0; list-style:none; transform-style:preserve-3d; will-change:transform; }
.cw-item{
  position:absolute; inset:0; display:flex; align-items:center; gap:clamp(18px, 2.4vw, 40px);
  backface-visibility:hidden; -webkit-backface-visibility:hidden; transform-origin:50% 50%;
}
.cw-n{ flex:none; width:3.2ch; font-family:var(--f-label); font-size:12px; letter-spacing:.2em; color:var(--muted); transition:color .4s; }
.cw-logo{ display:flex; align-items:center; height:100%; filter:grayscale(1) brightness(1.15); opacity:.55; transition:filter .6s var(--ease), opacity .6s var(--ease), transform .7s var(--ease); transform-origin:left center; transform:scale(.92); }
.cw-logo img{ display:block; width:auto; max-width:100%; object-fit:contain; -webkit-user-drag:none; user-select:none; }
.cw-word{ font-family:var(--f-display); font-weight:900; font-stretch:125%; text-transform:uppercase; font-size:calc(var(--cw-ih) * .36); line-height:1; letter-spacing:-.01em; white-space:nowrap; color:var(--fg); }
.cw-item.is-on .cw-logo{ filter:none; opacity:1; transform:none; }
.cw-item.is-on .cw-n{ color:var(--signal); }
.cw-item.is-yours .cw-word{ color:transparent; -webkit-text-stroke:1.2px var(--signal); }
.cw-item.is-yours.is-on .cw-word{ color:var(--signal); -webkit-text-stroke-color:transparent; }
html.reduced .cw-track{ height:auto; }
html.reduced .cw-stage{ position:relative; height:auto; padding-block:var(--sec-y); }
html.reduced .cw-wheel{ -webkit-mask-image:none; mask-image:none; }
html.reduced .cw-drum{ height:auto; display:grid; gap:18px; transform:none!important; }
html.reduced .cw-item{ position:relative; height:var(--cw-ih); transform:none!important; opacity:1!important; }
@media (max-width:860px){
  .cw{ --cw-ih:clamp(84px, 14vh, 128px); }
  .cw-stage{ grid-template-columns:1fr; grid-template-rows:auto 1fr; align-items:stretch; row-gap:8px; }
  .cw-info{ align-content:start; gap:14px; }
  .cw-cards{ min-height:120px; }
  .cl-brace::before,.cl-brace::after{ font-size:44px; }
}

/* ============================================================
   STATEMENT
   ============================================================ */
.st-lines{ display:grid; gap:.08em; margin:26px 0 40px; }
.st-lines .dsp:nth-child(2){ padding-left:clamp(0px, 8vw, 160px); }
.st-lines .dsp:nth-child(3){ padding-left:clamp(0px, 16vw, 320px); }
.st-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 3vw, 48px); border-top:1px solid var(--line); padding-top:34px; }
.st-grid h3{ display:flex; align-items:center; gap:10px; font-family:var(--f-label); font-size:11px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--fg); margin-bottom:12px; }
.st-grid h3::before{ content:""; width:7px; height:7px; background:var(--signal); transform:rotate(45deg); flex:none; }
.st-grid p{ color:var(--muted); font-size:15px; max-width:40ch; }
@media (max-width:860px){ .st-grid{ grid-template-columns:1fr; } .st-lines .dsp{ padding-left:0!important; } }

/* ============================================================
   FOOTER — big CTA, then an ordered index: manifesto card + columns
   ============================================================ */
.ft{ position:relative; overflow:hidden; padding-top:var(--sec-y); }
.ft-title{ margin:26px 0 clamp(36px, 5vh, 56px); }
.ft-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.ft-grid{
  display:grid; grid-template-columns:minmax(0, 1.5fr) repeat(3, minmax(0, .55fr)); gap:clamp(24px, 3vw, 56px);
  margin-top:clamp(80px, 14vh, 150px); padding-top:clamp(30px, 4vh, 44px); border-top:1px solid var(--line);
}
.ft-card{ display:grid; gap:26px; align-content:space-between; padding:clamp(22px, 2.4vw, 36px); background:var(--card); border:1px solid var(--line); }
.ft-man{ font-family:var(--f-label); font-size:12px; line-height:2; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-strong); max-width:58ch; }
.ft-man + .ft-man{ margin-top:12px; }
.ft-brand{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line); }
.ft-mark{ display:block; color:var(--fg); }
.ft-mark .mark{ height:30px; }
.ft-soc{ display:flex; gap:10px; }
.ft-soc a{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--fg); transition:background-color .35s, color .35s, border-color .35s; }
.ft-soc a:hover{ background:var(--signal); border-color:var(--signal); color:var(--ink); }
.ft-soc svg{ width:17px; height:17px; }
.ft-col h3{ font-family:var(--f-label); font-size:10px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.ft-col a{ display:block; width:max-content; padding:5px 0; font-size:16px; color:var(--fg); transition:color .3s; }
.ft-col a:hover{ color:var(--signal); }
.ft-col a[aria-current="page"]::after{ content:""; display:inline-block; width:5px; height:5px; margin-left:8px; border-radius:50%; background:var(--signal); vertical-align:middle; }
.ft-bar{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px 28px;
  margin-top:clamp(44px, 7vh, 72px); padding:24px 76px calc(28px + env(safe-area-inset-bottom)) 0;
  border-top:1px solid var(--line);
  font-family:var(--f-label); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.ft-top{ display:inline-flex; align-items:center; gap:10px; color:var(--fg); }
.ft-top:hover{ color:var(--signal); }
.ft-top svg{ width:12px; height:12px; }
@media (max-width:1080px){ .ft-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } .ft-card{ grid-column:1 / -1; } }
@media (max-width:560px){ .ft-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:36px; } }

/* ============================================================
   FAB — music on the hero, contact everywhere else
   ============================================================ */
.fab{
  position:fixed; z-index:85;
  right:calc(var(--gutter) - 4px);
  bottom:calc(20px + env(safe-area-inset-bottom) + var(--vv-lift));
  width:56px; height:56px;
}
.fab-main{
  position:relative; z-index:2; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  border:1px solid rgb(var(--paper-rgb) / .3);
  background:rgb(var(--ink-rgb) / .42); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background-color .6s var(--ease), border-color .6s var(--ease), color .6s var(--ease), transform .6s var(--ease);
}
.fab-main:hover{ transform:scale(1.06); }
.fab-main > span{ position:absolute; inset:0; display:grid; place-items:center; transition:opacity .45s var(--ease), transform .7s var(--ease); }
/* music bars */
.fab-bars{ display:flex!important; align-items:center; justify-content:center; gap:3px; }
.fab-bars i{ display:block; width:2px; height:14px; background:currentColor; border-radius:1px; transform-origin:50% 50%; transform:scaleY(.42); transition:transform .3s; }
/* without the beat analysis (old browsers) the bars fall back to a plain loop while the sound plays */
.fab.is-playing:not(.has-beat) .fab-bars i{ animation:eq 1s var(--ease-io) infinite; }
.fab.has-beat .fab-bars i{ transition:none; }
.fab.is-playing:not(.has-beat) .fab-bars i:nth-child(2){ animation-delay:-.3s; animation-duration:.8s; }
.fab.is-playing:not(.has-beat) .fab-bars i:nth-child(3){ animation-delay:-.6s; animation-duration:1.15s; }
.fab.is-playing:not(.has-beat) .fab-bars i:nth-child(4){ animation-delay:-.15s; animation-duration:.9s; }
.fab.is-playing:not(.has-beat) .fab-bars i:nth-child(5){ animation-delay:-.45s; animation-duration:1.05s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }
/* the one-time nudge: the bars rise one after another, like an equaliser waking up, then settle */
.fab.is-hint .fab-bars i{ animation:barWake 1.5s var(--ease) backwards; animation-delay:calc(var(--n, 0) * 90ms); }
@keyframes barWake{ 0%{ transform:scaleY(.3); } 38%{ transform:scaleY(1); } 70%{ transform:scaleY(.55); } 100%{ transform:scaleY(.42); } }
/* contact glyph (four dots → becomes × when open) */
.fab-talk{ opacity:0; transform:scale(.4) rotate(-90deg); }
.fab-talk svg{ width:20px; height:20px; transition:transform .6s var(--ease); }
.fab[data-mode="talk"] .fab-bars{ opacity:0; transform:scale(.4) rotate(90deg); }
.fab[data-mode="talk"] .fab-talk{ opacity:1; transform:none; }
.fab[data-mode="talk"] .fab-main{ background:var(--signal); border-color:var(--signal); color:var(--ink); }
.fab.is-open .fab-talk svg{ transform:rotate(45deg); }
.fab-tip{
  position:absolute; right:68px; top:50%; translate:0 -50%; white-space:nowrap;
  font-family:var(--f-label); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  padding:8px 12px; border-radius:999px; color:#fff; background:rgb(var(--ink-rgb) / .9); border:1px solid rgb(var(--paper-rgb) / .14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:translateX(8px); transition:opacity .4s var(--ease), transform .5s var(--ease); pointer-events:none;
}
@media (hover:hover) and (pointer:fine){ .fab-main:hover + .fab-tip{ opacity:1; transform:none; } }
.fab-main:focus-visible + .fab-tip, .fab.is-hint .fab-tip, .fab.tip-on .fab-tip{ opacity:1; transform:none; }
.fab.is-hint .fab-tip{ transition:opacity .7s var(--ease) .35s, transform .9s var(--ease) .35s; }
/* phones: the tip sits above the button, in the hero's free space — not over "Now playing" */
@media (max-width:700px){ .fab-tip{ right:0; top:auto; bottom:calc(100% + 12px); translate:none; transform:translateY(8px); } }
.fab.is-open .fab-tip{ opacity:0!important; }
.fab-menu{ position:absolute; right:5px; bottom:66px; display:grid; gap:10px; justify-items:end; pointer-events:none; }   /* the closed list must not catch taps meant for the page (it sat over "Watch the work") */
.fab-menu li{ opacity:0; transform:translateY(18px) scale(.6); transition:opacity .35s var(--ease), transform .6s var(--ease); transition-delay:calc((4 - var(--i)) * 30ms); pointer-events:none; }
.fab.is-open .fab-menu li{ opacity:1; transform:none; transition-delay:calc(var(--i) * 55ms); pointer-events:auto; }
.fab-item{ display:flex; align-items:center; gap:12px; }
.fab-item .t{
  font-family:var(--f-label); font-size:10px; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
  padding:8px 12px; border-radius:999px; background:var(--ink); color:var(--paper);
}
.fab-item .c{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); color:var(--ink); border:1px solid rgb(var(--ink-rgb) / .12);
  box-shadow:0 8px 24px rgb(0 0 0 / .22); transition:background-color .3s, transform .4s var(--ease);
}
.fab-item .c svg{ width:19px; height:19px; }
.fab-item:hover .c, .fab-item:focus-visible .c{ background:var(--signal); transform:scale(1.08); }
.fab-toast{
  position:absolute; right:0; bottom:68px; width:max-content; max-width:min(320px, 80vw);
  padding:12px 14px; border-radius:12px; background:var(--paper); color:var(--ink);
  font-size:13px; line-height:1.45; box-shadow:0 10px 30px rgb(0 0 0 / .25);
}
.fab-toast button{ display:block; margin-top:8px; font-family:var(--f-label); font-size:10px; letter-spacing:.2em; text-transform:uppercase; text-decoration:underline; }
html.menu-open .fab, html.lb-open .fab{ opacity:0; pointer-events:none; }
.fab-scrim{ position:fixed; inset:0; z-index:84; background:rgb(var(--ink-rgb) / .55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s .45s; }
html.fab-open .fab-scrim{ opacity:1; visibility:visible; transition:opacity .45s var(--ease), visibility 0s; }
.fab-item .t{ box-shadow:0 0 0 1px rgb(var(--paper-rgb) / .14); }
.fab{ transition:opacity .4s; }

/* ============================================================
   LIGHTBOX (video player)
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:110; display:grid; grid-template-rows:auto minmax(0, 1fr) auto;
  background:var(--ink); color:var(--paper);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility 0s .5s;
}
html.lb-open .lb{ opacity:1; visibility:visible; transition:opacity .5s var(--ease), visibility 0s; }
.lb-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px var(--gutter); }
.lb-top .mono{ color:rgb(var(--paper-rgb) / .6); }
.lb-close{ display:flex; align-items:center; gap:12px; font-family:var(--f-label); font-size:11px; letter-spacing:.3em; text-transform:uppercase; padding:10px 0; }
.lb-close i{ position:relative; width:18px; height:18px; }
.lb-close i::before,.lb-close i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor; transform:rotate(45deg); }
.lb-close i::after{ transform:rotate(-45deg); }
.lb-stage{ position:relative; min-height:0; overflow:hidden; }
.lb-stage video{ position:absolute; top:0; bottom:0; left:var(--gutter); right:var(--gutter); width:calc(100% - var(--gutter) * 2); height:100%; object-fit:contain; background:transparent; }
.lb-bottom{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px; padding:18px var(--gutter) calc(22px + env(safe-area-inset-bottom)); }
.lb-info{ display:grid; gap:8px; }
.lb-info .dsp{ font-size:clamp(20px, 2.2vw, 36px); }
.lb-info .meta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-family:var(--f-label); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--paper-rgb) / .62); }
.lb-info .meta a{ color:var(--signal); }
.lb-nav{ display:flex; gap:10px; }
.lb-nav button{ width:52px; height:52px; border-radius:50%; border:1px solid rgb(var(--paper-rgb) / .3); display:grid; place-items:center; transition:background-color .3s, color .3s; }
.lb-nav button:hover{ background:var(--signal); color:var(--ink); border-color:var(--signal); }
.lb-nav svg{ width:16px; height:16px; }
.lb-err{ position:absolute; left:50%; top:50%; translate:-50% -50%; max-width:420px; text-align:center; padding:18px 20px; border:1px solid rgb(var(--paper-rgb) / .2); border-radius:12px; background:var(--ink); font-size:14px; }

/* ============================================================
   PAGE HEADS (archive / services / about / contact)
   ============================================================ */
.ph{ padding-top:calc(var(--hd-h) + clamp(60px, 12vh, 140px)); padding-bottom:clamp(50px, 8vh, 90px); }
.ph-title{ margin:24px 0 0; }
.ph-title{ overflow-wrap:normal; }
@media (max-width:700px){ .ph-title{ font-size:min(10.4vw, 64px); } }
.ph-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; flex-wrap:wrap; margin-top:clamp(28px, 4vh, 44px); }

/* ============================================================
   ARCHIVE
   ============================================================ */
.ar-filters{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 20px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted-strong);
  font-family:var(--f-label); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.chip:hover{ border-color:var(--fg); color:var(--fg); }
.chip[aria-pressed="true"], .chip-input:checked + .chip{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.chip .n{ opacity:.6; }
.chip-input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.chip-input:focus-visible + .chip{ outline:2px solid var(--signal); outline-offset:3px; }
.ar-count{ color:var(--muted); }
/* the films stand in rows that fill the width — sizes and places come from site.js (layout) */
.ar-grid{ position:relative; column-gap:clamp(10px, 1.1vw, 18px); margin-top:clamp(30px, 5vh, 56px); }
.ar-card{ position:absolute; left:0; top:0; container-type:inline-size; }
.ar-card[hidden]{ display:none; }
.ar-card .film{ width:100%; height:100%; }
.ar-card .film:has(:focus-visible) .media{ filter:none; }
.ar-hit{ position:absolute; inset:0; z-index:3; display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; }
.ar-hit:focus-visible{ outline:2px solid var(--signal); outline-offset:-4px; }
/* the caption lies on the film, over a soft shade from below */
.ar-ov{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:clamp(28px, 18cqi, 96px) clamp(12px, 5.5cqi, 22px) clamp(12px, 5cqi, 20px); color:#fff; pointer-events:none; }
.ar-ov::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgb(0 0 0 / .66), rgb(0 0 0 / .58) 18%, rgb(0 0 0 / .44) 36%, rgb(0 0 0 / .27) 55%, rgb(0 0 0 / .12) 75%, rgb(0 0 0 / .03) 92%, rgb(0 0 0 / 0));
  background:linear-gradient(in oklab to top, rgb(0 0 0 / .66), rgb(0 0 0 / .58) 18%, rgb(0 0 0 / .44) 36%, rgb(0 0 0 / .27) 55%, rgb(0 0 0 / .12) 75%, rgb(0 0 0 / .03) 92%, rgb(0 0 0 / 0)); }
.ar-ov h3{ font-family:var(--f-display); font-weight:800; font-stretch:125%; text-transform:uppercase; font-size:clamp(13px, 3.4cqi, 20px); line-height:1.15; letter-spacing:-.005em; max-width:100%; text-wrap:balance; }
.ar-ov .mono{ font-size:10px; letter-spacing:.2em; color:rgb(255 255 255 / .74); }
.ar-ov .ar-stat{ color:var(--signal); }
@container (max-width:230px){ .ar-ov .mono{ letter-spacing:.12em; } }
/* watching: the caption dissolves (like the hero and the home tiles), the film plays in colour */
.ar-anim .ar-ov > *{ transition:opacity .9s var(--ease) var(--wd, 0s), filter 1.1s var(--ease) var(--wd, 0s), transform 1.2s var(--ease) var(--wd, 0s); }
.ar-anim .ar-ov::before, .ar-anim .film-time{ transition:opacity 1.2s var(--ease); }
.ar-anim .film .media{ transition:filter 1.4s var(--ease), transform 1.6s var(--ease); }
.ar-card.is-watching .ar-ov > *{ opacity:0; filter:blur(14px); transform:translateY(-8px) scale(.985); }
.ar-card.is-watching .ar-ov::before, .ar-card.is-watching .film-time{ opacity:0; }
.ar-card.is-watching .film .media{ filter:none; transform:none; }
.ar-card .fv{ opacity:0; transition:opacity .7s var(--ease); }
.ar-card.has-full .fv{ opacity:1; }
.ar-x, .ar-full{ position:absolute; z-index:4; display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:999px;
  font-family:var(--f-label); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--paper); white-space:nowrap;
  background:rgb(0 0 0 / .38); border:1px solid rgb(var(--paper-rgb) / .25); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility 0s .5s, background-color .3s, color .3s, border-color .3s; }
.ar-x{ top:12px; right:12px; }
.ar-full{ left:12px; bottom:14px; }
.ar-card.is-watching .ar-x, .ar-card.is-watching .ar-full{ opacity:1; visibility:visible; transition:opacity .8s var(--ease) .6s, visibility 0s, background-color .3s, color .3s, border-color .3s; }
.ar-x:hover, .ar-full:hover, .ar-x:focus-visible, .ar-full:focus-visible{ background:var(--signal); color:var(--ink); border-color:var(--signal); }
.ar-x i{ position:relative; width:12px; height:12px; flex:none; }
.ar-x i::before,.ar-x i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor; transform:rotate(45deg); }
.ar-x i::after{ transform:rotate(-45deg); }
.ar-full svg{ width:13px; height:13px; flex:none; }
@container (max-width:300px){ .ar-full .wl{ display:none; } }
@container (max-width:210px){ .ar-x{ font-size:0; letter-spacing:0; gap:0; padding:10px; } .ar-x, .ar-full{ top:auto; } .ar-x{ top:10px; right:10px; } .ar-full{ left:10px; bottom:12px; padding:9px 11px; letter-spacing:.18em; } }
.ar-state{ position:absolute; left:50%; top:50%; z-index:2; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgb(0 0 0 / .35); border:1px solid rgb(var(--paper-rgb) / .3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:scale(.9); transition:opacity .4s var(--ease), transform .5s var(--ease); pointer-events:none; }
.ar-state svg{ width:17px; height:17px; margin-left:3px; }
.ar-card.is-paused .ar-state{ opacity:1; transform:none; }
.ar-bar{ position:absolute; left:0; right:0; bottom:0; z-index:2; height:2px; background:rgb(var(--paper-rgb) / .18); opacity:0; transition:opacity .6s var(--ease); pointer-events:none; }
.ar-bar i{ display:block; height:100%; background:var(--signal); transform-origin:left; transform:scaleX(0); }
.ar-card.is-watching .ar-bar{ opacity:1; transition-delay:.6s; }
.ar-empty{ padding:60px 0; color:var(--muted); }
@media (max-width:700px){
  .ar-filters{ gap:8px; }
  .ar-filters .chip{ height:38px; padding:0 14px; gap:8px; font-size:10px; letter-spacing:.16em; }
  .ph-row{ gap:16px; }
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.sp-list{ border-top:1px solid var(--line); }
.sp-row{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(12px, 1.6vw, 28px); padding:clamp(36px, 6vh, 64px) 0; border-bottom:1px solid var(--line); align-items:start; }
.sp-row .mono{ grid-column:1 / span 2; color:var(--muted); padding-top:12px; }
.sp-main{ grid-column:3 / span 5; display:grid; gap:18px; }
.sp-main p{ color:var(--muted); max-width:46ch; }
.sp-bullets{ grid-column:9 / span 4; }
.sp-bullets li{ display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
.sp-bullets li::before{ content:""; width:7px; height:7px; background:var(--signal); transform:rotate(45deg); flex:none; box-shadow:0 0 0 1px rgb(var(--fg-rgb) / .2); }
.on-light .sp-bullets li::before, .sp-bullets.on-paper li::before{ outline:1px solid rgb(var(--ink-rgb) / .15); }
@media (max-width:900px){ .sp-row{ grid-template-columns:1fr; row-gap:20px; } .sp-row > *{ grid-column:1!important; } }

.pr-steps{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-top:1px solid var(--line); margin-top:clamp(40px, 6vh, 64px); }
.pr-step{ padding:28px clamp(14px, 1.6vw, 26px) 10px 0; border-right:1px solid var(--line); display:grid; gap:12px; align-content:start; }
.pr-step + .pr-step{ padding-left:clamp(14px, 1.6vw, 26px); }
.pr-step:last-child{ border-right:0; }
.pr-step .n{ font-family:var(--f-label); font-size:11px; letter-spacing:.3em; color:var(--signal); }
.pr-step h3{ font-family:var(--f-display); font-weight:800; font-stretch:125%; text-transform:uppercase; font-size:clamp(17px, 1.4vw, 24px); line-height:1.1; }
.pr-step p{ color:var(--muted); font-size:14.5px; }
@media (max-width:1000px){ .pr-steps{ grid-template-columns:1fr; } .pr-step, .pr-step + .pr-step{ border-right:0; border-bottom:1px solid var(--line); padding:24px 0; } }

.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; font-family:var(--f-display); font-weight:800; font-stretch:125%; text-transform:uppercase; font-size:clamp(16px, 1.5vw, 24px); line-height:1.2; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary i{ position:relative; width:18px; height:18px; flex:none; }
.faq-item summary i::before,.faq-item summary i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor; transition:transform .5s var(--ease); }
.faq-item summary i::after{ transform:rotate(90deg); }
.faq-item[open] summary i::after{ transform:rotate(0); }
.faq-item p{ color:var(--muted); max-width:70ch; padding:0 0 28px; }

/* ============================================================
   ABOUT
   ============================================================ */
.ab-intro{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:32px 60px; align-items:end; margin-top:clamp(28px, 4vh, 44px); }
.ab-roles{ display:grid; gap:12px; font-family:var(--f-label); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-strong); }
.ab-roles span{ color:var(--muted); margin-right:14px; }
.ab-bio{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(12px, 1.6vw, 28px); align-items:center; }
.ab-photo{ grid-column:1 / span 6; position:relative; overflow:hidden; aspect-ratio:4 / 5; }
.ab-photo img{ width:100%; height:115%; object-fit:cover; filter:grayscale(1) contrast(1.06); transition:filter 1s var(--ease); will-change:transform; }
.ab-photo:hover img{ filter:none; }
.ab-text{ grid-column:8 / span 5; display:grid; gap:22px; min-width:0; }
.ab-text p{ color:var(--muted-strong); }
.ab-facts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line); }
.ab-fact{ padding:26px 18px 0 0; display:grid; gap:10px; }
.ab-fact .mono{ color:var(--muted); font-size:10px; }
.ab-fact b{ font-family:var(--f-display); font-weight:800; font-stretch:125%; text-transform:uppercase; font-size:clamp(17px, 1.5vw, 26px); line-height:1.1; }
.ab-strip{ display:flex; gap:clamp(12px, 1.4vw, 22px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; scrollbar-width:thin; cursor:grab; }
.ab-strip:active{ cursor:grabbing; }
.ab-strip figure{ flex:none; width:clamp(220px, 24vw, 420px); aspect-ratio:9 / 14; overflow:hidden; scroll-snap-align:start; background:#111; }
.ab-strip img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .8s var(--ease), transform 1.2s var(--ease); -webkit-user-drag:none; user-select:none; }
.ab-strip figure:hover img{ filter:none; transform:scale(1.03); }
.ab-strip figure.is-wide{ aspect-ratio:3 / 2; width:clamp(300px, 36vw, 620px); }
.sc-wrap{ border:1px solid var(--line); }
.sc-wrap summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 24px; font-family:var(--f-label); font-size:11px; letter-spacing:.3em; text-transform:uppercase; }
.sc-wrap summary::-webkit-details-marker{ display:none; }
.sc-wrap summary i{ position:relative; width:16px; height:16px; }
.sc-wrap summary i::before,.sc-wrap summary i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor; transition:transform .5s var(--ease); }
.sc-wrap summary i::after{ transform:rotate(90deg); }
.sc-wrap[open] summary i::after{ transform:none; }
.sc-body{ padding:0 24px 24px; display:grid; gap:20px; }
.sc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.sc-grid div{ padding:14px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; gap:4px; }
.sc-grid span{ font-family:var(--f-label); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.sc-grid b{ font-weight:500; }
.sc-units{ display:flex; gap:8px; }
@media (max-width:900px){
  .ab-intro{ grid-template-columns:1fr; }
  .ab-bio{ grid-template-columns:1fr; row-gap:32px; }
  .ab-photo, .ab-text{ grid-column:1; }
  .ab-facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ab-fact{ padding-bottom:22px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.ct-grid{ display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); }
.ct-main{ min-width:0; padding-right:clamp(24px, 4vw, 72px); border-right:1px solid var(--line); }
.ct-side{ padding-left:clamp(24px, 4vw, 72px); display:grid; gap:40px; align-content:start; align-self:start; position:sticky; top:0; padding-top:calc(var(--hd-h) + clamp(60px, 12vh, 140px)); padding-bottom:40px; }
.ct-side .mono{ color:var(--muted); font-size:10px; display:block; margin-bottom:10px; }
.ct-side a.big, .ct-side .big{ font-family:var(--f-display); font-weight:900; font-stretch:125%; text-transform:uppercase; font-size:clamp(18px, 1.9vw, 34px); line-height:1.05; letter-spacing:-.01em; word-break:break-word; }
.ct-side a.big:hover{ color:var(--muted-strong); }
/* contact sizes follow their own column, not the window (two columns from 981 px) */
.ct-main, .ct-side{ container-type:inline-size; }
.ct-main .ph-title{ font-size:clamp(28px, 10.6cqi, 172px); }
.ct-side .big{ font-size:clamp(16px, 7cqi, 34px); word-break:normal; overflow-wrap:normal; }
.ct-side .big.is-mail{ font-size:clamp(12px, 4cqi, 28px); white-space:nowrap; }
.ct-side small{ display:block; color:var(--muted); font-size:14px; margin-top:6px; }
.ct-form{ display:grid; gap:34px; margin-top:clamp(36px, 6vh, 64px); padding-bottom:var(--sec-y); }
.ct-two{ display:grid; grid-template-columns:1fr 1fr; gap:34px 36px; }
.fld{ position:relative; display:grid; }
.fld label.l{ font-family:var(--f-label); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.fld input, .fld textarea{
  width:100%; border:0; border-bottom:1px solid rgb(var(--fg-rgb) / .22); background:transparent; color:var(--fg);
  font:inherit; font-size:18px; padding:12px 0 14px; border-radius:0; outline:none; transition:border-color .3s;
}
.fld textarea{ min-height:150px; resize:vertical; }
.fld input:focus, .fld textarea:focus{ border-color:var(--fg); }
.fld input::placeholder, .fld textarea::placeholder{ color:rgb(var(--fg-rgb) / .38); }
.fld .err{ color:#b00020; font-size:13px; margin-top:6px; }
.fld.is-bad input, .fld.is-bad textarea{ border-color:#b00020; }
.ct-chips{ display:flex; flex-wrap:wrap; gap:10px; }
fieldset{ border:0; margin:0; padding:0; min-width:0; }
legend{ padding:0; margin-bottom:14px; font-family:var(--f-label); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.ct-send{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.ct-status{ display:none; padding:16px 18px; border:1px solid var(--line); border-left:3px solid var(--signal); background:var(--card); font-size:15px; line-height:1.55; }
.ct-status.is-on{ display:block; }
.ct-status.is-bad{ border-left-color:#b00020; }
.ct-status b{ display:block; margin-bottom:4px; }
.ct-status button{ margin-top:10px; font-family:var(--f-label); font-size:10px; letter-spacing:.2em; text-transform:uppercase; text-decoration:underline; }
@media (max-width:980px){
  .ct-grid{ grid-template-columns:minmax(0, 1fr); }
  .ct-main{ padding-right:0; border-right:0; }
  .ct-side{ position:static; padding:40px 0 var(--sec-y); border-top:1px solid var(--line); }
}
@media (max-width:620px){ .ct-two{ grid-template-columns:1fr; } }

/* ============================================================
   LEGAL
   ============================================================ */
.lg{ max-width:78ch; }
.lg h2{ font-family:var(--f-display); font-weight:800; font-stretch:125%; text-transform:uppercase; font-size:clamp(18px, 1.6vw, 26px); margin:44px 0 14px; }
/* long German words (Verbraucherstreitbeilegung, Datenschutz) must not push the page sideways on phones */
.lg h2{ hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }
@media (max-width:700px){ html[lang="de"] .ph-title{ font-size:9vw; } }
.lg p, .lg li{ color:var(--muted-strong); margin-bottom:12px; }
.lg a{ border-bottom:1px solid var(--line); }
.lg ul{ list-style:disc; padding-left:20px; }

/* ============================================================
   PAGE CUT (transition)
   ============================================================ */
.cut{ position:fixed; inset:0; z-index:150; background:var(--ink); pointer-events:none; opacity:1; transition:opacity .55s var(--ease); }
html.is-ready .cut{ opacity:0; }
html.is-leaving .cut{ opacity:1; transition-duration:.32s; pointer-events:auto; }
html.no-js .cut{ display:none; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s!important; animation-iteration-count:1!important; scroll-behavior:auto!important; }
  .grain{ animation:none; }
}

/* ============================================================
   EARLY ACCESS — locked films (lk), unlock sheet (ul), next drop (nd)
   ============================================================ */
.film.is-locked .media{ filter:grayscale(1) brightness(.55) contrast(1.05)!important; transform:scale(1.04)!important; }
.lock-veil{
  position:absolute; inset:0; z-index:2; display:grid; place-content:center; justify-items:center; gap:14px;
  text-align:center; color:#fff; padding:16px;
  background:radial-gradient(closest-side, rgb(0 0 0 / .42), rgb(0 0 0 / .38) 25%, rgb(0 0 0 / .27) 50%, rgb(0 0 0 / .12) 75%, rgb(0 0 0 / 0));
}
.lock-ic{
  width:66px; height:66px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgb(255 255 255 / .55); background:rgb(0 0 0 / .25);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .6s var(--ease), background-color .4s, border-color .4s, color .4s;
}
.lock-ic svg{ width:24px; height:24px; }
.lock-t{ font-family:var(--f-label); font-size:11px; letter-spacing:.32em; text-transform:uppercase; }
.lock-cta{
  font-family:var(--f-display); font-weight:800; font-stretch:125%; text-transform:uppercase; font-size:12px; letter-spacing:.04em;
  padding:10px 16px; border-radius:999px; background:var(--signal); color:var(--ink);
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.film.is-locked:hover .lock-ic, .film.is-locked:focus-visible .lock-ic, .film.is-locked:has(:focus-visible) .lock-ic{ background:var(--signal); color:var(--ink); border-color:var(--signal); transform:scale(1.06) rotate(-6deg); }
.film.is-locked:hover .lock-cta, .film.is-locked:focus-visible .lock-cta, .film.is-locked:has(:focus-visible) .lock-cta{ opacity:1; transform:none; }
@media (hover:none){ .lock-cta{ opacity:1; transform:none; } }
.film.is-unlocked .lock-veil{ display:none; }

.ul{
  position:fixed; inset:0; z-index:112; display:grid; place-items:center; padding:var(--gutter);
  background:rgb(var(--ink-rgb) / .72); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s .45s;
}
html.ul-open .ul{ opacity:1; visibility:visible; transition:opacity .45s var(--ease), visibility 0s; }
.ul-panel{
  --fg:var(--paper); --bg:var(--ink); --fg-rgb:var(--paper-rgb); --line:rgb(var(--paper-rgb) / .14); --muted:rgb(var(--paper-rgb) / .58); --muted-strong:rgb(var(--paper-rgb) / .76);
  position:relative; width:min(540px, 100%); display:grid; gap:16px; justify-items:start;
  padding:clamp(26px, 4vw, 44px); background:#111; color:var(--paper);
  border:1px solid rgb(var(--paper-rgb) / .14); border-radius:18px; box-shadow:0 40px 120px -20px rgb(0 0 0 / .8);
  transform:translateY(24px) scale(.98); transition:transform .7s var(--ease);
}
html.ul-open .ul-panel{ transform:none; }
.ul-x{ position:absolute; right:16px; top:16px; width:40px; height:40px; border-radius:50%; border:1px solid rgb(var(--paper-rgb) / .2); display:grid; place-items:center; }
.ul-x i{ position:relative; width:14px; height:14px; }
.ul-x i::before,.ul-x i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor; transform:rotate(45deg); }
.ul-x i::after{ transform:rotate(-45deg); }
.ul-lock{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:var(--signal); color:var(--ink); }
.ul-lock svg{ width:22px; height:22px; }
.ul-title{ font-size:clamp(28px, 3.4vw, 46px); line-height:.95; }
.ul-copy{ color:var(--muted-strong); font-size:15px; }
.ul-form{ width:100%; display:flex; gap:10px; margin-top:8px; }
.ul-form input{
  flex:1; min-width:0; height:58px; padding:0 18px; border-radius:999px; border:1px solid rgb(var(--paper-rgb) / .24);
  background:rgb(var(--paper-rgb) / .04); color:var(--paper); outline:none;
  font-family:var(--f-label); font-size:15px; letter-spacing:.3em; text-transform:uppercase;
  transition:border-color .3s, background-color .3s;
}
.ul-form input::placeholder{ color:rgb(var(--paper-rgb) / .38); letter-spacing:.24em; }
.ul-form input:focus{ border-color:var(--signal); background:rgb(var(--paper-rgb) / .07); }
.ul-form .btn{ flex:none; }
.ul-form .btn[disabled]{ opacity:.6; pointer-events:none; }
.ul-bar{ width:100%; height:2px; background:rgb(var(--paper-rgb) / .1); overflow:hidden; border-radius:2px; }
.ul-bar i{ display:block; height:100%; background:var(--signal); transform-origin:left; transform:scaleX(0); transition:transform .2s linear; }
.ul-msg{ min-height:1.4em; font-family:var(--f-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-strong); }
.ul-msg.is-bad{ color:#ff8a8a; }
.ul-panel.is-busy .ul-lock{ animation:ulPulse 1.2s var(--ease-io) infinite; }
@keyframes ulPulse{ 0%,100%{ box-shadow:0 0 0 0 rgb(var(--signal-rgb) / .5); } 50%{ box-shadow:0 0 0 12px rgb(var(--signal-rgb) / 0); } }
.ul-panel.is-wrong{ animation:ulShake .45s var(--ease); }
@keyframes ulShake{ 0%,100%{ translate:0 0; } 20%{ translate:-10px 0; } 40%{ translate:8px 0; } 60%{ translate:-5px 0; } 80%{ translate:3px 0; } }
.ul-req{ margin-top:2px; }
html.ul-open .fab{ opacity:0; pointer-events:none; }
@media (max-width:620px){
  .ul{ place-items:end stretch; padding:0; }
  .ul-panel{ width:100%; border-radius:22px 22px 0 0; padding-bottom:calc(28px + env(safe-area-inset-bottom)); transform:translateY(100%); }
  .ul-panel::before{ content:""; position:absolute; left:50%; top:10px; width:42px; height:4px; margin-left:-21px; border-radius:4px; background:rgb(var(--paper-rgb) / .25); }
  .ul-form{ flex-direction:column; }
  .ul-form input{ flex:none; width:100%; }
  .ul-form .btn{ width:100%; }
}

.nd-grid{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:clamp(32px, 6vw, 120px); align-items:center; }
.nd-copy{ display:grid; gap:24px; justify-items:start; }
.nd-copy h2{ margin-top:4px; }
.nd-acts{ display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; }
.nd-soon{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-label); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-strong); }
.nd-soon::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 0 rgb(var(--signal-rgb) / .6); animation:ndPing 2s var(--ease-io) infinite; }
@keyframes ndPing{ 0%{ box-shadow:0 0 0 0 rgb(var(--signal-rgb) / .55); } 70%,100%{ box-shadow:0 0 0 12px rgb(var(--signal-rgb) / 0); } }
.nd-media{ justify-self:center; width:min(100%, 420px, calc((100svh - 140px) * 9 / 16)); }
.nd-media .film{ border-radius:4px; box-shadow:0 40px 100px -30px rgb(0 0 0 / .8); }
@media (max-width:860px){ .nd-grid{ grid-template-columns:1fr; } .nd-media{ width:min(78%, 380px); } }

/* hero: the film plays in colour; the scrim keeps the type readable */
.hr-media video, .hr-media img{ filter:contrast(1.04) saturate(1.04) brightness(.9); }
button.hr-np{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:rgb(var(--paper-rgb) / .62); transition:color .3s; padding:8px 0; }
button.hr-np:hover{ color:var(--paper); }
button.hr-np .np{ display:inline-flex; align-items:center; gap:10px; }
.hr-np .nw{ white-space:nowrap; }   /* the title never splits at its hyphen */
button.hr-np .np::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 0 rgb(var(--signal-rgb) / .5); animation:ndPing 2.4s var(--ease-io) infinite; }

/* ============================================================
   WATCH MODE — the hero dissolves away, the film plays clean with sound
   ============================================================ */
html.wm-anim .hr-title .w,
html.wm-anim .hr-body > :not(.hr-title),
html.wm-anim .hr-foot{
  transition:opacity .9s var(--ease) var(--wd, 0s), filter 1.1s var(--ease) var(--wd, 0s), transform 1.2s var(--ease) var(--wd, 0s)!important;
}
html.wm-anim .hr-scrim{ transition:opacity 1.4s var(--ease); }
html.wm-anim .hr-media video{ transition:filter 1.4s var(--ease), transform 1.6s var(--ease); }
html.watching .hr-title .w,
html.watching .hr-body > :not(.hr-title),
html.watching .hr-foot{ opacity:0!important; filter:blur(14px); transform:translateY(-8px) scale(.985); pointer-events:none; }
html.watching .hr-scrim{ opacity:0; }
/* the amber full stop after FOMO hangs on the line, not on a word — it dissolves too */
html.wm-anim .hr-title .dot::after{ transition:opacity .7s var(--ease) .35s, transform .9s var(--ease) .35s, filter .9s var(--ease) .35s!important; }
html.watching .hr-title .dot::after{ opacity:0!important; transform:scale(.4)!important; filter:blur(6px); }
html.watching .hr-media video{ filter:none; transform:scale(1); }
html.watching .hd{ opacity:0; filter:blur(8px); pointer-events:none; }
/* .hd > * re-enables taps on its children — switch them off too, and for a moment after closing */
html.watching .hd > *, html.wm-cooldown .hd > *{ pointer-events:none; }
html.watching .fab, html.watching .fab-scrim{ opacity:0; pointer-events:none; }
html.watching.wm-idle .cur-ring, html.watching.wm-idle .cur-dot{ opacity:0; }
html.watching.wm-idle.has-cursor .hr{ cursor:none; }

.wm{ position:absolute; inset:0; z-index:3; opacity:0; visibility:hidden; color:var(--paper); transition:opacity .5s var(--ease), visibility 0s .5s; }
html.watching .wm{ opacity:1; visibility:visible; transition:opacity .8s var(--ease) .75s, visibility 0s; }
.wm::after{ /* just enough shade for the controls */
  content:""; position:absolute; inset:auto 0 0 0; height:180px; pointer-events:none; z-index:-1;
  background:linear-gradient(to top, rgb(0 0 0 / .55), rgb(0 0 0 / .5) 12.5%, rgb(0 0 0 / .41) 25%, rgb(0 0 0 / .31) 37.5%, rgb(0 0 0 / .22) 50%, rgb(0 0 0 / .13) 62.5%, rgb(0 0 0 / .06) 75%, rgb(0 0 0 / .02) 87.5%, rgb(0 0 0 / 0));
  transition:opacity .8s var(--ease);
}
.wm-x{
  position:absolute; top:max(18px, env(safe-area-inset-top)); right:var(--gutter);
  display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:999px;
  font-family:var(--f-label); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--paper);
  background:rgb(0 0 0 / .35); border:1px solid rgb(var(--paper-rgb) / .25); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:opacity .6s var(--ease), background-color .3s, color .3s;
}
.wm-x:hover{ background:var(--signal); color:var(--ink); border-color:var(--signal); }
.wm-x i{ position:relative; width:14px; height:14px; }
.wm-x i::before,.wm-x i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor; transform:rotate(45deg); }
.wm-x i::after{ transform:rotate(-45deg); }
.wm-meta{ position:absolute; left:var(--gutter); bottom:calc(46px + env(safe-area-inset-bottom)); display:grid; gap:6px; transition:opacity .6s var(--ease); }
.wm-meta .mono{ font-size:10px; color:rgb(var(--paper-rgb) / .7); }
.wm-meta b{ font-family:var(--f-display); font-weight:900; font-stretch:125%; text-transform:uppercase; font-size:clamp(20px, 2.2vw, 34px); line-height:1; }
.wm-time{ position:absolute; right:var(--gutter); bottom:calc(46px + env(safe-area-inset-bottom)); font-family:var(--f-label); font-size:11px; letter-spacing:.2em; font-variant-numeric:tabular-nums; color:rgb(var(--paper-rgb) / .8); transition:opacity .6s var(--ease); }
.wm-bar{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:calc(28px + env(safe-area-inset-bottom)); height:2px; background:rgb(var(--paper-rgb) / .22); overflow:hidden; border-radius:2px; }
.wm-bar i{ display:block; height:100%; background:var(--signal); transform-origin:left; transform:scaleX(0); }
.wm-state{ position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; display:grid; place-items:center; background:rgb(0 0 0 / .35); border:1px solid rgb(var(--paper-rgb) / .3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transform:scale(.9); transition:opacity .4s var(--ease), transform .5s var(--ease); pointer-events:none; }
.wm-state svg{ width:22px; height:22px; margin-left:3px; }
.wm.is-paused .wm-state{ opacity:1; transform:none; }
.wm.is-idle .wm-x, .wm.is-idle .wm-meta, .wm.is-idle .wm-time, .wm.is-idle::after{ opacity:0; }
@media (max-width:700px){ .wm-time{ bottom:calc(46px + env(safe-area-inset-bottom)); } .wm-meta b{ font-size:22px; } }