/* ═══════════════════════════════════════════════════════════════
   Project360 — website
   Implements brandguide/PROJECT360-STYLE.md v1.0. One stylesheet for every page (fonts, tokens, kit and site), so a page
   waits for one file; case pages add case.css, the content pages page.css.
   Flat, dark-first, four colours. Archivo Expanded for Display, Hanken Grotesk for reading.
   ═══════════════════════════════════════════════════════════════ */
/* Project360 fonts, served from the site itself (no call to Google Fonts).
   Archivo (expanded cut, 700–900) and Hanken Grotesk (400–700), both SIL Open Font License. Latin and Latin Extended only. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700 900;font-stretch:125%;font-display:swap;src:url(../assets/fonts/archivo-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700 900;font-stretch:125%;font-display:swap;src:url(../assets/fonts/archivo-latin.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:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/hanken-grotesk-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/hanken-grotesk-latin.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}

/* ═══════════════════════════════════════════════════════════════
   Project360 — Design tokens · Brand Guidelines 2027 · v1.0
   Single source of truth. The guide and the website read from here.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Colour — core */
  --p360-red:      #E2382E;   /* rgb 226 56 46  · the single accent            */
  --p360-canvas:   #0A0A0A;   /* rgb 10 10 10   · default ground               */
  --p360-ivory:    #F5F5F2;   /* rgb 245 245 242 · light ground, text on dark  */
  --p360-white:    #FFFFFF;   /* rgb 255 255 255 · cards, logo on red          */
  --p360-graphite: #2A2A2A;   /* rgb 42 42 42   · surfaces and quiet shapes    */

  /* Colour — Ember (gradient stops, derived from Canvas + Red only) */
  --p360-ember-0: #0A0A0A;
  --p360-ember-1: #601C18;    /* 40% red into canvas */
  --p360-ember-2: #A12A23;    /* 70% red into canvas */
  --p360-ember-3: #E2382E;
  --p360-ember-linear: linear-gradient(135deg, var(--p360-ember-0) 0%, var(--p360-ember-1) 38%, var(--p360-ember-2) 68%, var(--p360-ember-3) 100%);
  --p360-ember-radial: radial-gradient(120% 90% at 100% 100%, var(--p360-ember-3) 0%, var(--p360-ember-2) 22%, var(--p360-ember-1) 48%, var(--p360-ember-0) 78%);

  /* Typography */
  --p360-font-display: 'Archivo', 'Arial Black', 'Helvetica Neue', sans-serif;   /* Expanded 125 · 800–900 */
  --p360-font-text:    'Hanken Grotesk', -apple-system, 'Helvetica Neue', sans-serif;

  /* Radius */
  --p360-r-md:   1.125rem;
  --p360-r-lg:   1.5rem;
  --p360-r-xl:   2rem;
  --p360-r-pill: 999px;

  /* Spacing (4-pt base) */
  --p360-s-1: .25rem;  --p360-s-2: .5rem;   --p360-s-3: .75rem;  --p360-s-4: 1rem;
  --p360-s-6: 1.5rem;  --p360-s-8: 2rem;    --p360-s-12: 3rem;   --p360-s-16: 4rem;
  --p360-s-24: 6rem;   --p360-s-32: 8rem;

  /* Motion */
  --p360-ease-out:    cubic-bezier(.23, 1, .32, 1);
  --p360-ease-expo:   cubic-bezier(.16, 1, .3, 1);
  --p360-ease-inout:  cubic-bezier(.77, 0, .175, 1);
  --p360-ease-settle: cubic-bezier(.19, 1, .22, 1);
  --p360-ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --p360-t-fast: 150ms;  --p360-t-base: 250ms;  --p360-t-slow: 450ms;  --p360-t-scene: 800ms;
}

/* glyphs and the rotating badge (the only parts of the brand guide's graphic kit the site uses) */
.gl{width:1em;height:1em;display:inline-block;flex:none}
.kbadge{display:block;overflow:visible}
.kbadge .spin{transform-origin:50px 50px;animation:spin 32s linear infinite}  /* reserved for the 360° idea: 32 s per turn */
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.kbadge .spin{animation:none}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:var(--p360-red);--canvas:var(--p360-canvas);--ivory:var(--p360-ivory);--white:var(--p360-white);--graphite:var(--p360-graphite);
  --core:#0f0f0f;                          /* bezel core (§7) */
  --hair:rgba(245,245,242,.12);            /* dividers: 1px at 12% ivory (§7) */
  --mute:rgba(245,245,242,.72);            /* secondary text on canvas, 9:1 */
  --ease-out:var(--p360-ease-out);--ease-expo:var(--p360-ease-expo);--ease-drawer:var(--p360-ease-drawer);
  --gutter:clamp(1.25rem,4vw,4rem);--frame:clamp(.5rem,1.2vw,1rem);
  --section-y:clamp(5rem,13vh,9rem);
  --nav-h:4.25rem;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--graphite) var(--canvas)}
html.lenis,html.lenis body{height:auto}
html.lenis-smooth{scroll-behavior:auto!important}
html.lenis-stopped{overflow:hidden}
body{font-family:var(--p360-font-text);font-size:clamp(1.125rem,1rem + .35vw,1.3125rem);font-weight:400;line-height:1.6;background:var(--canvas);color:var(--ivory);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{border:none;background:none;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--red);color:var(--canvas)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.on-red :focus-visible,.about :focus-visible,.cta :focus-visible{outline-color:var(--canvas)}
h1,h2,h3{font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
.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(--frame);top:var(--frame);z-index:200;padding:.75rem 1.25rem;border-radius:999px;background:var(--ivory);color:var(--canvas);font-weight:600;transform:translateY(-200%);transition:transform var(--p360-t-base) var(--ease-out)}
.skip:focus{transform:none}
.wrap{max-width:80rem;margin:0 auto}
.sec{padding:var(--section-y) var(--gutter)}

/* ── type (§3) ───────────────────────────────────────────────── */
.display,.display-xl{font-family:var(--p360-font-display);font-stretch:125%;text-transform:uppercase;letter-spacing:-.02em}
.display-xl{font-weight:900;font-size:clamp(2.6rem,6vw,5rem);line-height:.88}
.display{font-weight:800;font-size:clamp(2rem,3.6vw,3rem);line-height:.92}
.headline{font-family:var(--p360-font-display);font-stretch:125%;font-weight:700;text-transform:uppercase;font-size:clamp(1.2rem,1.9vw,1.625rem);letter-spacing:-.01em;line-height:1.05}
.subhead{font-weight:600;font-size:1.375rem;letter-spacing:-.01em;line-height:1.25}
.lead{max-width:34rem}
p{max-width:65ch}
.label{display:flex;align-items:center;font:600 .6875rem/1.4 var(--p360-font-text);letter-spacing:.16em;text-transform:uppercase}
.label>span:first-child:not(:only-child)::after{content:'\2014';margin:0 .6em}
.label--red{color:var(--red)}
.gl{width:1em;height:1em;display:inline-block;flex:none;fill:currentColor}

/* ── bezel (§7) ─────────────────────────────────────────────── */
.bezel{padding:.4rem;border-radius:var(--p360-r-xl);background:rgba(245,245,242,.035);border:1px solid rgba(245,245,242,.09)}
.bezel__core{position:relative;border-radius:calc(var(--p360-r-xl) - .4rem);background:var(--core);overflow:hidden;box-shadow:inset 0 1px 0 rgba(245,245,242,.07)}

/* ── capsule buttons: one word, one glyph disc (§6.4) ─────────── */
.btn{--bg:var(--red);--fg:var(--canvas);--dbg:var(--canvas);--dfg:var(--ivory);
  display:inline-flex;align-items:center;gap:1rem;min-height:3.25rem;padding:.375rem .375rem .375rem 1.5rem;border-radius:var(--p360-r-pill);
  background:var(--bg);color:var(--fg);font-family:var(--p360-font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:.8125rem;line-height:1;letter-spacing:-.01em;white-space:nowrap;
  transition:transform var(--p360-t-fast) var(--ease-out),background-color var(--p360-t-base) var(--ease-out),color var(--p360-t-base) var(--ease-out)}
.btn>i{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--dbg);color:var(--dfg);transition:transform var(--p360-t-slow) var(--ease-drawer)}
.btn>i .gl{width:46%;height:46%}
.btn:active{transform:scale(.97)}
.btn--ivory{--bg:var(--ivory);--fg:var(--canvas);--dbg:var(--red);--dfg:var(--canvas)}
.btn--canvas{--bg:var(--canvas);--fg:var(--ivory);--dbg:var(--red);--dfg:var(--canvas)}
.btn--sm{min-height:2.75rem;padding-left:1.15rem;gap:.75rem;font-size:.6875rem}
.btn--sm>i{width:2rem;height:2rem}
@media(hover:hover) and (pointer:fine){.btn:hover>i{transform:translateX(3px) rotate(-12deg)}}

/* ── nav: solid canvas pill, no glass (§6.5) ─────────────────── */
.nav{position:fixed;top:var(--frame);left:50%;translate:-50% 0;z-index:100;display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);width:max-content;max-width:calc(100% - 2 * var(--frame));min-height:var(--nav-h);padding:.375rem .375rem .375rem 1.4rem;border-radius:var(--p360-r-pill);background:var(--canvas);color:var(--ivory);border:1px solid var(--hair)}
.nav__logo{display:flex;align-items:center;padding:.4rem 0;color:var(--white)}
.nav__logo svg{width:8.75rem;height:auto}  /* horizontal logo, always white on the site (guide §4) */
.nav__links{display:flex;gap:clamp(1.25rem,2.2vw,2rem);font-size:.875rem;font-weight:500}
.nav__links a{color:var(--mute);transition:color var(--p360-t-fast) var(--ease-out)}
.nav__links a[aria-current="true"]{color:var(--ivory)}
@media(hover:hover) and (pointer:fine){.nav__links a:hover{color:var(--ivory)}}
.lang{display:flex;align-items:center;font-size:.75rem;font-weight:700;letter-spacing:.12em}
.lang span{color:var(--hair)}
.lang button{min-width:2rem;min-height:2.75rem;padding:0 .3rem;color:var(--mute);transition:color var(--p360-t-fast) var(--ease-out)}
.lang button[aria-pressed="true"]{color:var(--red)}
.burger{display:none;position:relative;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--graphite)}
.burger i{position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:currentColor;transition:transform var(--p360-t-slow) var(--ease-drawer)}
.burger i:nth-child(1){transform:translateY(-3.5px)}
.burger i:nth-child(2){transform:translateY(3.5px)}
.nav.open .burger i:nth-child(1){transform:rotate(45deg)}
.nav.open .burger i:nth-child(2){transform:rotate(-45deg)}
@media(max-width:960px){.nav__links{display:none}.burger{display:block}}
@media(max-width:520px){.nav .btn{display:none}.nav{width:calc(100% - 2 * var(--frame));justify-content:space-between;padding-left:1.15rem}.nav__logo svg{width:7.5rem}}

/* menu overlay: solid canvas, Display list */
.menu{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;justify-content:center;gap:2.5rem;padding:7rem var(--gutter) 2.5rem;background:var(--canvas);color:var(--ivory);opacity:0;visibility:hidden;transition:opacity var(--p360-t-base) var(--ease-out),visibility 0s var(--p360-t-base)}
.menu.open{opacity:1;visibility:visible;transition:opacity var(--p360-t-slow) var(--ease-out),visibility 0s}
.menu li{overflow:hidden}
.menu li a{display:flex;align-items:baseline;gap:1.1rem;padding:.12em 0}
.menu li a span{display:block;font-family:var(--p360-font-display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.02em;line-height:1;transform:translateY(110%);transition:transform var(--p360-t-base) var(--ease-out)}
.menu li a small{font-size:.6875rem;font-weight:600;letter-spacing:.16em;color:var(--red)}
.menu.open li a span{transform:none;transition:transform var(--p360-t-scene) var(--ease-expo) calc(var(--i) * 60ms + 80ms)}
.menu__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;color:var(--mute);padding-top:1.5rem;border-top:1px solid var(--hair)}
.menu__foot a{color:var(--ivory)}

/* ── hero: one screen; a film under an LED grid, the words take turns on their own ── */
.hero{position:relative;background:var(--canvas)}
.hero__pin{position:relative;min-height:100svh;display:flex;padding:calc(var(--frame) + var(--nav-h) + 2rem) var(--gutter) clamp(1.5rem,4vh,2.75rem);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:-3% 0;z-index:-3;background:var(--canvas)}
.hero__ph{position:absolute;inset:0}
.hero__ph video{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
/* LED wall: a fine pixel matrix over the film, 2px diodes on a 3px pitch. Two hairline grids on one static layer and no filter on the
   video, so the compositor only blends; the lines land on whole pixels at every screen density */
.hero__ph::after{content:'';position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(rgba(10,10,10,.72) 1px,rgba(10,10,10,0) 1px) 0 0/3px 3px,
  linear-gradient(90deg,rgba(10,10,10,.72) 1px,rgba(10,10,10,0) 1px) 0 0/3px 3px}
.hero__scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(52% 46% at 100% 100%,rgba(10,10,10,.72) 0%,rgba(10,10,10,0) 100%),
  linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.8) 30%,rgba(10,10,10,.3) 58%,rgba(10,10,10,.45) 100%),
  linear-gradient(0deg,#0A0A0A 0%,rgba(10,10,10,.78) 18%,rgba(10,10,10,0) 46%),
  linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,0) 24%)}

.hero__inner{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:1.5rem;width:100%}
.hero__kicker{color:var(--mute)}
.hero__stage{display:grid;align-content:center;max-width:min(52rem,60vw)}
.scene+.scene{display:none}
.js .scene+.scene{display:block}
.js .scene{grid-area:1/1}
.hero__word .red{color:var(--red)}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}
.js .hero .ln>span{transform:translateY(105%);transition:transform var(--p360-t-base) var(--ease-out)}
.js.loaded .hero .scene.on .ln>span{transform:none;transition:transform var(--p360-t-scene) var(--ease-expo) calc(var(--d,0) * 70ms + 60ms)}
.js .hero .scene.past .ln>span{transform:translateY(-105%)}
.js .hero .scene.snap .ln>span{transition:none}
.js .hero .scene:not(.on){visibility:hidden;transition:visibility 0s var(--p360-t-base)}
.hero__foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem 2rem;align-items:end}
.hero__descs{grid-column:1/span 5;display:grid}
.desc{max-width:30rem;color:var(--mute)}
.desc+.desc{display:none}
.js .desc{display:block;grid-area:1/1;align-self:end;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--p360-t-fast) var(--ease-out),transform var(--p360-t-fast) var(--ease-out),visibility 0s var(--p360-t-fast)}
.js .desc.on{opacity:1;visibility:visible;transform:none;transition:opacity var(--p360-t-slow) var(--ease-out) 200ms,transform var(--p360-t-slow) var(--ease-out) 200ms,visibility 0s}
.hero__cue{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem;color:var(--mute)}
.hero__cue i{position:relative;width:1px;height:2rem;background:var(--hair);overflow:hidden}
.hero__cue i::after{content:'';position:absolute;inset:0 0 50%;background:var(--red);animation:cue 2.4s var(--ease-inout,cubic-bezier(.77,0,.175,1)) infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(200%)}}
/* the four focus points sit bottom right, on the same base line as the intro copy bottom left */
.hero__idx{grid-column:9/-1;grid-row:1}
.hero__idx button{position:relative;display:flex;align-items:center;gap:1rem;width:100%;min-height:2.75rem;padding:.6rem 0;border-top:1px solid var(--hair);font-size:inherit;font-weight:400;text-align:left;color:var(--mute);transition:color var(--p360-t-base) var(--ease-out)}
.hero__idx small{font-size:.6875rem;font-weight:600;letter-spacing:.16em;transition:color var(--p360-t-base) var(--ease-out)}
.hero__idx button.on{color:var(--ivory)}
.hero__idx button.on small{color:var(--red)}
/* the point on screen draws its own time along the hairline; site.js adds the line, runs it as one linear animation and moves on when it ends */
.hero__bar{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;pointer-events:none}
@media(hover:hover) and (pointer:fine){.hero__idx button:hover{color:var(--ivory)}}
@media(min-width:901px){
  /* desktop: the word sits right above its copy; the index hangs off the same bottom edge without stretching the row */
  .hero__stage{align-content:end;align-items:end}
  /* the kicker rides on top of the word; --drop (set in site.js) lowers it when the word on screen is shorter than the tallest one */
  .hero__inner{grid-template-rows:1fr auto auto}
  .hero__kicker{align-self:end;transform:translateY(var(--drop,0px));transition:transform var(--p360-t-scene) var(--ease-expo)}
  .hero__foot{position:relative}
  .hero__idx{position:absolute;inset:auto 0 0} /* its containing block is its own grid area, columns 9 to 12 */
}
@media(max-width:900px){
  .hero__scrim{background:linear-gradient(0deg,#0A0A0A 0%,rgba(10,10,10,.9) 42%,rgba(10,10,10,.5) 70%,rgba(10,10,10,.75) 100%)}
  .hero__inner{grid-template-rows:1fr auto auto;grid-template-columns:minmax(0,1fr)}
  .hero__word{font-size:min(2.6rem,9.6vw)} /* the longest single word ("activations.") has to fit a narrow phone */
  .hero__kicker{display:none}
  .hero__stage{max-width:none;align-content:end;grid-row:2}
  .hero__ph video{object-position:50% 50%}
  .hero__foot{grid-row:3;grid-template-columns:minmax(0,1fr)} /* one column: twelve gutters are wider than a phone */
  .hero__descs,.hero__idx{grid-column:1/-1}
  .hero__idx{grid-row:auto}
  .hero__idx button{padding:.35rem 0}
  .hero__cue{display:none}
}
@media(max-width:900px) and (max-height:700px){.hero__idx{display:none}}
/* low desktop windows: tighter rows so all four entries stay inside the first screen */
@media(min-width:901px) and (max-height:680px){.hero__idx button{padding:.3rem 0}}

/* ── work reel: one case on screen, it stays put; the arrows (or a swipe) bring the next ── */
.reel{position:relative;background:var(--canvas)}
.reel__pin{padding:var(--frame)}
.js .reel__pin{height:100svh;min-height:38rem}
.reel__shell{height:100%}
.reel__core{display:flex;flex-direction:column;height:100%;background:var(--canvas)}
.reel__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(var(--nav-h) + 1rem) clamp(1.25rem,3vw,2.5rem) 1rem}
.reel__bar--foot{padding:1rem clamp(1.25rem,3vw,2.5rem)}
.reel__count{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--mute);font-variant-numeric:tabular-nums}
.reel__count b{color:var(--ivory)}
.reel__view{flex:1;min-height:0;overflow:hidden;border-radius:var(--p360-r-lg);margin:0 .4rem;touch-action:pan-y}
.reel__track{display:flex;height:100%}
.js .reel__track{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr)}
.reel__slide{position:relative;flex:none;width:100%;height:100%;overflow:hidden;background:var(--canvas)}
html:not(.js) .reel__track{flex-direction:column;gap:1rem}
html:not(.js) .reel__slide{min-height:80svh}
/* the cases share one cell. Only the case on screen is shown; during a change the one leaving stays underneath (.leaving) while
   site.js lifts its copy out and brings the new photo and copy in. Slides and text panels have no fill of their own, so the two can overlap */
.js .reel__slide{grid-area:1/1;z-index:0;background:none;opacity:0;visibility:hidden} /* z-index:0 makes every case its own layer, so the one arriving always lies on top, whichever way you go */
.js .reel__slide.on{z-index:1;opacity:1;visibility:visible}
.js .reel__slide.leaving{opacity:1;visibility:visible}
.js .wc__card{background:none}
/* selected work arrives once, the first time it scrolls into view (the whileInView + stagger pattern, in CSS).
   The frame settles first, then the bar, the photo eases out of a slight zoom and the copy rises line by line.
   Transform and opacity only; site.js adds .in on entry and .done afterwards, which drops these rules again. */
.js .reel:not(.in):not(.done) .reel__shell{opacity:0;transform:translateY(40px) scale(.985)}
.js .reel:not(.in):not(.done) .reel__bar>*,.js .reel:not(.in):not(.done) .wc__card>*,.js .reel:not(.in):not(.done) .wc__where,.js .reel:not(.in):not(.done) .wc__tags{opacity:0;transform:translateY(14px)}
.js .reel:not(.in):not(.done) .wc__photo{opacity:0}
.js .reel:not(.in):not(.done) .wc__photo picture{transform:scale(1.07)}
.js .reel.in:not(.done) .reel__shell{transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-expo)}
.js .reel.in:not(.done) .reel__bar>*,.js .reel.in:not(.done) .wc__card>*,.js .reel.in:not(.done) .wc__where,.js .reel.in:not(.done) .wc__tags{transition:opacity .6s var(--ease-out),transform .8s var(--ease-expo);transition-delay:calc(var(--k,0) * 70ms + .45s)}
.js .reel.in:not(.done) .reel__bar:first-child>*{--k:-2}
.js .reel.in:not(.done) .wc__photo{transition:opacity .7s var(--ease-out) .25s}
.js .reel.in:not(.done) .wc__photo picture{transition:transform 1.6s var(--ease-expo) .25s}
.js .reel .wc__card>:nth-child(2){--k:1}.js .reel .wc__card>:nth-child(3){--k:2}.js .reel .wc__card>:nth-child(4){--k:3}.js .reel .wc__card>:nth-child(5){--k:4}
.js .reel .wc__where,.js .reel .wc__tags{--k:5}
.js .reel .reel__bar--foot>*{--k:6}
.js .reel .reel__bar--foot>:last-child{--k:7}

/* work case: a dark text panel and the photo form one block. The corners where they meet are square, one half-pixel dark grey line runs around the whole */
.wc{--top:12%;--bot:9%;--side:clamp(1rem,2.5vw,2.5rem)}
.wc::after{content:'';position:absolute;z-index:3;left:var(--side);right:var(--side);top:var(--top);bottom:var(--bot);border:.5px solid var(--graphite);border-radius:var(--p360-r-xl);pointer-events:none}
.wc__card{position:absolute;z-index:2;left:var(--side);top:var(--top);bottom:var(--bot);width:34%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.5rem,3vw,3rem);border-radius:var(--p360-r-xl) 0 0 var(--p360-r-xl);background:var(--canvas);color:var(--ivory)}
.wc__badge{flex:none;margin-bottom:auto;width:clamp(4rem,min(8vw,13svh),7.5rem);aspect-ratio:1;color:var(--ivory);font-family:var(--p360-font-display);font-stretch:125%}
.wc__badge .kbadge{width:100%;height:100%}
.wc .reel__meta{margin:clamp(2rem,3vh,2.5rem) 0 1rem;color:var(--ivory)}
.wc .reel__meta span:last-child{opacity:.7}
.wc .reel__title{margin-bottom:.9rem}
.wc__desc{margin-bottom:1.75rem;color:var(--ivory)}
.wc__card .btn{align-self:flex-start}
/* short screens: keep the gap under the badge by dropping the description first */
@media(min-width:901px) and (max-height:820px){.wc__desc{display:none}}
.wc__photo{position:absolute;z-index:1;left:calc(34% + var(--side) - 1px);right:var(--side);top:var(--top);bottom:var(--bot);margin:0;border-radius:0 var(--p360-r-xl) var(--p360-r-xl) 0;overflow:hidden;background:var(--canvas)}
.wc__photo picture,.wc__photo picture img{display:block;width:100%;height:100%}
.wc__photo picture{position:relative}
.wc__photo picture img{object-fit:cover}
.wc__photo[data-fit="contain"] picture img{object-fit:contain}
.wc__photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 60%,rgba(10,10,10,.55) 100%)}
.wc__where,.wc__tags{position:absolute;z-index:2;color:var(--ivory)}
.wc__where{left:clamp(1.25rem,2.5vw,2.25rem);top:clamp(1.25rem,2.5vw,2.25rem);display:grid;gap:.2rem;padding-left:1.25rem}
.wc__where::before{content:'';position:absolute;left:0;top:.25em;width:.6rem;height:.6rem;border-radius:50%;background:var(--red)}
.wc__where span:last-child{opacity:.72}
.wc__where>span:first-child::after{content:none}

/* motion: when a case arrives the photo settles, discs and the tag land, the badge keeps turning (32 s, §6.1) */
.js .wc__photo picture img{scale:1.06;transition:scale 1.4s var(--ease-expo)}
.js .wc.on .wc__photo picture img{scale:1}
.reel__dots{display:flex;gap:.4rem}
.reel__dots i{width:1.75rem;height:3px;border-radius:2px;background:var(--hair);transition:background-color var(--p360-t-base) var(--ease-out)}
.reel__dots i.on{background:var(--red)}
.reel__arrows{display:flex;gap:.5rem}
.discbtn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--ivory);color:var(--canvas);transition:transform var(--p360-t-fast) var(--ease-out),background-color var(--p360-t-base) var(--ease-out)}
.discbtn .gl{width:42%;height:42%}
.discbtn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.discbtn:hover{background:var(--red)}}
@media(max-width:900px){
  /* phone: the photo sits on top of the text panel; same block, same single outline */
  .wc{--top:3%;--bot:3%;--side:1rem}
  .wc__photo{left:var(--side);top:var(--top);bottom:auto;height:50%;border-radius:var(--p360-r-xl) var(--p360-r-xl) 0 0}
  .wc__card{width:auto;right:var(--side);top:calc(var(--top) + 50%);padding:1.5rem;border-radius:0 0 var(--p360-r-xl) var(--p360-r-xl)}
  .wc__badge,.wc__tags,.wc__desc,.wc__where{display:none}
  .wc .reel__title{margin-bottom:1rem}
}

/* ── about: red stage. Copy left; a full-height photo panel on the right edge; the numbers in one glass bar.
   Glass is a deliberate exception for this section. ── */
.about{position:relative;isolation:isolate;overflow:hidden;display:flex;min-height:100svh;color:var(--canvas);padding:calc(var(--nav-h) + var(--frame) + 2.5rem) var(--gutter) clamp(2rem,6vh,4rem);
  background:radial-gradient(120% 90% at 18% 10%,#ef4a3f 0%,#E2382E 38%,#b52d25 68%,#5c1712 100%)}
.about__floor{position:absolute;left:-20%;right:-20%;bottom:-6%;height:46%;z-index:-1;pointer-events:none;transform:perspective(900px) rotateX(62deg);transform-origin:50% 100%;
  background-image:radial-gradient(circle,rgba(255,120,105,.55) 0 1.1px,transparent 1.6px);background-size:16px 16px;
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 55%);mask:linear-gradient(180deg,transparent 0%,#000 55%);opacity:.55}
.about__grid{flex:1;width:100%;max-width:90rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:1fr auto;column-gap:clamp(2rem,4vw,4rem);align-items:center}
.about__lead{--pb:clamp(2.5rem,6vh,4rem);grid-row:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:var(--pb)}
.about__t{margin:1.75rem 0 1.75rem}
.about__t .iv{color:var(--ivory)}
.about__lead>p:not(.label){max-width:30rem;margin-bottom:2.25rem}
.about__rail{display:none}

/* the photo runs from the top to the bottom of the section and bleeds off the right edge; no rounding */
.ab{position:absolute;top:0;bottom:0;right:0;width:50%;z-index:0}
.ab__photo{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--canvas)}
.ab__photo picture,.ab__photo img{display:block;width:100%;height:100%}
.ab__photo img{object-fit:cover;object-position:50% 50%}
/* the turning badge straddles the seam: half on the red, half on the photo, hanging from the line of the section label (the ring starts a tenth inside its box, so the lettering lines up with the label and stays clear of the menu bar). It stays put: no pointer drift */
.ab__badge{--bw:clamp(6rem,9vw,8.5rem);position:absolute;left:calc(50vw - max(var(--gutter),(100vw - 90rem) / 2) - var(--bw) / 2);top:calc(var(--bw) * -.1);z-index:4;width:var(--bw);aspect-ratio:1;color:var(--ivory);font-family:var(--p360-font-display);font-stretch:125%}
.ab__badge .kbadge{width:100%;height:100%}

/* the glass stats bar: one surface, four equal columns, hairline dividers, a quiet accent line under each number */
.abs{grid-row:2;grid-column:1/-1;position:relative;z-index:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:center;
  padding:clamp(1.5rem,2.6vw,2.25rem) clamp(1.5rem,3vw,3rem);border-radius:var(--p360-r-xl);color:var(--ivory);
  background:linear-gradient(180deg,rgba(40,8,6,.42) 0%,rgba(20,4,3,.58) 100%);border:1px solid rgba(255,225,215,.22);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,235,228,.22)}
.abs::before{content:'';position:absolute;left:8%;right:8%;top:-1px;height:1px;background:linear-gradient(90deg,rgba(255,235,228,0),rgba(255,235,228,.85),rgba(255,235,228,0))}
.abs__item{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:0 clamp(1rem,2.4vw,2.5rem)}
.abs__item+.abs__item{border-left:1px solid rgba(255,225,215,.2)}
.abs__item:first-child{padding-left:0}
.abs__item b{font-family:var(--p360-font-display);font-stretch:125%;font-weight:900;font-size:clamp(2rem,3.4vw,3.25rem);line-height:.88;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.abs__item .label{color:rgba(255,235,228,.9);min-height:2.8em}
.abs__line{display:block;width:min(100%,9.5rem);height:2px;border-radius:2px;background:rgba(255,235,228,.3);overflow:hidden;position:relative}
.abs__line::after{content:'';position:absolute;inset:0;width:28%;background:var(--red);border-radius:inherit;transform-origin:left}
.abs__go{display:grid;place-items:center;width:clamp(3.25rem,4.6vw,4.25rem);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,235,228,.75);color:var(--ivory);transition:background-color var(--p360-t-base) var(--ease-out),color var(--p360-t-base) var(--ease-out),transform var(--p360-t-fast) var(--ease-out)}
.abs__go .gl{width:38%;height:38%}
.abs__go:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.abs__go:hover{background:var(--ivory);color:var(--canvas)}}

/* motion (once, as the section arrives): the photo wipes in from the right edge and settles, the badge turns in;
   the glass bar rises, its columns cascade, numbers count, accent lines fill. Afterwards only the badge keeps turning. */
.js .ab__photo{clip-path:inset(0 0 0 100%)}
.js .ab__photo img{transform:scale(1.12)}
.js .ab__badge{opacity:0;transform:rotate(-40deg) scale(.85)}
.js .abs{opacity:0;transform:translateY(28px) scale(.98)}
.js .abs__item{opacity:0;transform:translateY(10px)}
.js .abs__line::after{transform:scaleX(0)}
.js .abs__go{opacity:0;transform:scale(.85)}
.abg.in .ab__photo{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease-expo)}
.abg.in .ab__photo img{transform:none;transition:transform 2s var(--ease-expo)}
.abg.in .ab__badge{opacity:1;transform:none;transition:opacity var(--p360-t-slow) var(--ease-out) .45s,transform 1.2s var(--ease-expo) .45s}
.abg.in .abs{opacity:1;transform:none;transition:opacity .7s var(--ease-out) .55s,transform .9s var(--ease-drawer) .55s}
.abg.in .abs__item{opacity:1;transform:none;transition:opacity var(--p360-t-slow) var(--ease-out),transform var(--p360-t-slow) var(--ease-out);transition-delay:calc(.75s + var(--i) * 80ms)}
.abg.in .abs__line::after{transform:none;transition:transform .9s var(--ease-expo);transition-delay:calc(1.05s + var(--i) * 80ms)}
.abg.in .abs__go{opacity:1;transform:none;transition:opacity var(--p360-t-slow) var(--ease-out) 1.15s,transform var(--p360-t-slow) var(--ease-drawer) 1.15s}

@media(max-width:900px){
  .about__grid{grid-template-columns:minmax(0,1fr)}
  .ab{position:relative;grid-row:2;grid-column:1;width:auto;height:auto;aspect-ratio:4/3;margin:0 calc(var(--gutter) * -1)}
  .about{min-height:0}
  .abs{grid-row:3;margin-top:-3rem;grid-template-columns:1fr 1fr;row-gap:1.5rem;padding:1.5rem}
  .abs__item{padding:0 1rem}
  .abs__item:nth-child(odd){padding-left:0;border-left:0}
  .abs__go{display:none}
  .ab__badge{--bw:clamp(4rem,20vw,5rem);left:auto;right:0;top:auto;bottom:calc(var(--bw) / -2)} /* the photo starts where the copy block ends */
}

/* ── services: one discipline per screen ─────────────────────── */
.disc{position:relative;background:var(--canvas)}
.disc__pin{position:relative;min-height:100svh;display:flex;padding:calc(var(--frame) + var(--nav-h) + 1.5rem) var(--gutter) clamp(1.25rem,4vh,2.25rem);overflow:hidden}
.js .disc{height:calc(100svh + (var(--steps) - 1) * 80svh)}
.js .disc__pin{position:sticky;top:0;height:100svh}
/* the photos: one per discipline, they fill the pinned frame behind the copy and cross-fade as the scenes change */
.disc__vis{position:absolute;inset:0;z-index:0;display:grid;pointer-events:none;overflow:hidden;background:var(--canvas)}
.disc__img{grid-area:1/1;display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;object-position:center}
/* scene change: the next photo fades in over the last while it settles from a slight zoom; the old one stays underneath until it is covered */
.js .disc__img{opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease-out) .5s,transform 0s linear 1.1s}
.js .disc__img.on{z-index:1;opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform 2.4s var(--ease-expo)}
html:not(.js) .disc__img:not(:first-child){display:none}
/* the copy sits on the photo: every text area gets the #0a0a0ac9 ground (header band, copy column, rail), the photo stays open on the right */
.disc__pin::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#0a0a0ac9 0,#0a0a0ac9 calc(var(--frame) + var(--nav-h) + 4.5rem),rgba(10,10,10,0) calc(var(--frame) + var(--nav-h) + 11rem),rgba(10,10,10,0) calc(100% - 10rem),#0a0a0ac9 calc(100% - 4.5rem)),
             linear-gradient(90deg,#0a0a0ac9 0,#0a0a0ac9 max(46%,calc((100% - 80rem) / 2 + 42rem)),rgba(10,10,10,.4) calc(max(46%,calc((100% - 80rem) / 2 + 42rem)) + 18%),rgba(10,10,10,.12) 100%)}
.disc__inner{position:relative;z-index:2}
.disc__inner{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:clamp(1rem,3vh,2rem);width:100%;max-width:80rem;margin:0 auto;min-height:0}
.disc__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem 2.5rem;flex-wrap:wrap}
.disc__head h2{font-size:1.375rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;max-width:24rem;color:var(--mute)}
.disc__stage{display:grid;align-content:center;min-height:0;gap:4rem}
.dscene{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;align-items:center}
.js .dscene{grid-area:1/1}
.dscene__title{grid-column:1/span 6}
.dscene__n{display:block;margin-bottom:1.25rem}
.ch{display:inline-block;white-space:pre}
.dcard{grid-column:1/span 5;position:relative;min-width:0}
.disc__stage,.dscene,.dscene>*{min-width:0}
/* no container: lead text and capsules sit straight on the canvas */
.dcard.bezel{padding:0;background:none;border:0}
.dcard .bezel__core{padding:0!important;background:none;box-shadow:none;overflow:visible}
.dcard__pin{display:none!important}
.dcard__lead{padding-right:0;margin-bottom:0}
.dcard .bezel__core{padding:clamp(1.5rem,2.6vw,2.25rem)}
.dcard__pin{position:absolute;right:-1rem;top:-1rem;z-index:2;width:clamp(3.5rem,5.5vw,4.75rem);height:clamp(3.5rem,5.5vw,4.75rem);border-radius:50%;display:grid;place-items:center;background:var(--red);color:var(--canvas)}
.dcard__pin .gl{width:46%;height:46%}
.dcard__lead{margin-bottom:1rem;padding-right:2.5rem}
.disc__rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.disc__bar{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;will-change:transform}
.disc__rail button{display:flex;align-items:baseline;gap:.6rem;min-height:2.75rem;padding:.9rem 0 0;font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;text-align:left;color:var(--mute);transition:color var(--p360-t-base) var(--ease-out)}
.disc__rail button small{font-size:.6875rem;font-weight:600;letter-spacing:.16em}
.disc__rail button.on{color:var(--ivory)}
.disc__rail button.on small{color:var(--red)}
@media(hover:hover) and (pointer:fine){.disc__rail button:hover{color:var(--ivory)}}
/* list items as capsules (§6.4): one word, one glyph disc, tilted stack, alternating red / ivory */
/* the points of a discipline: plain capsules, stacked and flush left. They do not float and carry no glyph disc */
.caps{display:grid;justify-items:start;gap:.5rem;margin-top:1.75rem}
.caps li{--bg:var(--red);display:flex;align-items:center;max-width:100%;min-height:2.5rem;padding:.35rem 1.15rem;border-radius:var(--p360-r-pill);background:var(--bg);color:var(--canvas);font-family:var(--p360-font-display);font-stretch:125%;font-weight:800;font-size:clamp(.75rem,1vw,.875rem);letter-spacing:-.01em;line-height:1.1;text-transform:uppercase}
.caps li:nth-child(even){--bg:var(--ivory)}
/* motion states (scene enters -> .on, leaves upward -> .past) */
.js .dscene{visibility:hidden;transition:visibility 0s var(--p360-t-slow)}
.js .dscene.on{visibility:visible;transition:none}
.js .dscene .ch{transform:translateY(110%);transition:transform var(--p360-t-base) var(--ease-out)}
.js .dscene.on .ch{transform:none;transition:transform var(--p360-t-scene) var(--ease-expo) calc(var(--c) * 18ms + var(--d,0) * 90ms + 60ms)}
.js .dscene.past .ch{transform:translateY(-110%)}
.js .dscene .dscene__n{opacity:0;transition:opacity var(--p360-t-fast) var(--ease-out)}
.js .dscene.on .dscene__n{opacity:1;transition:opacity var(--p360-t-slow) var(--ease-out) 120ms}
.js .dscene .dcard{opacity:0;transform:translateY(8px) scale(.97);transition:opacity var(--p360-t-fast) var(--ease-out),transform var(--p360-t-base) var(--ease-out)}
.js .dscene.on .dcard{opacity:1;transform:none;transition:opacity var(--p360-t-slow) var(--ease-out) 200ms,transform var(--p360-t-scene) var(--ease-expo) 200ms}
.js .dscene .dcard__pin{transform:scale(.6) rotate(-90deg);transition:transform var(--p360-t-base) var(--ease-out)}
.js .dscene.on .dcard__pin{transform:none;transition:transform var(--p360-t-scene) var(--ease-drawer) 380ms}
.js .caps li{opacity:0;transform:translateY(8px)}
.js .dscene.on .caps li{opacity:1;transform:none;transition:opacity var(--p360-t-slow) var(--ease-out) calc(var(--i) * 60ms + 360ms),transform var(--p360-t-slow) var(--ease-out) calc(var(--i) * 60ms + 360ms),color var(--p360-t-base) var(--ease-out)}
@media(max-width:900px){
  /* phones: the drawing sits in the top of the frame and fades out where the copy starts; the copy is anchored to the bottom */
  /* phones: the photo fills the frame; the header band stays dark, and the copy brings its own #0a0a0ac9 ground that fades in just above it */
  .disc__pin::before{background:linear-gradient(180deg,#0a0a0ac9 0,#0a0a0ac9 calc(var(--frame) + var(--nav-h) + 3rem),rgba(10,10,10,.1) calc(var(--frame) + var(--nav-h) + 7rem))}
  .dscene::before{content:'';position:absolute;z-index:-1;inset:-4.5rem calc(-1 * var(--gutter)) -100vh;background:linear-gradient(180deg,rgba(10,10,10,0) 0,#0a0a0ac9 4rem)}
  .disc__stage{align-content:end}
  .dscene{grid-template-columns:1fr;gap:1.75rem}
  .dscene__title,.dcard{grid-column:1/-1}
  .dscene__n{margin-bottom:.75rem}
  .dcard__pin{right:.75rem;top:-1.5rem}
  .caps{gap:.45rem;margin-top:1.25rem;padding:.25rem 0 .75rem}
  .caps li{min-height:2.4rem;font-size:.75rem}
  .caps li::after{width:1.85rem;height:1.85rem}
  .caps li::before{width:.9rem;height:.9rem;margin-top:-.45rem;right:calc(.3rem + .475rem)}
  .disc__rail button{flex-direction:column;gap:.15rem}
  .disc__head h2{display:none}
}
@media(max-width:900px) and (max-height:740px){.dcard__lead{display:none}}

/* ── why: four bezel tiles in a row, artwork on top, copy below. Deliberately unlike the open, pinned Wat we doen above:
   framed tiles, a staggered rhythm (2 and 4 sit lower), the photo only as a fading stage behind the drawing ── */
.why__head{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:clamp(3rem,7vh,4.5rem)}
.why__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;align-items:start}
.why__card{--pad:clamp(1.25rem,1.6vw,1.6rem);--tmax:1.0625rem;container-type:inline-size;position:relative;display:flex;flex-direction:column;border-radius:var(--p360-r-xl);background:var(--core);border:1px solid var(--hair);
  outline:1px solid rgba(245,245,242,.07);outline-offset:.4rem;box-shadow:0 0 0 .4rem rgba(245,245,242,.025),inset 0 1px 0 rgba(245,245,242,.06);isolation:isolate;
  transition:translate var(--p360-t-base) var(--ease-out),outline-color var(--p360-t-base) var(--ease-out)}
.why__card:nth-child(even){margin-top:3.5rem}
.js .why__card.rv.in{transition:opacity var(--p360-t-slow) var(--ease-out) calc(var(--d,0) * 60ms),transform var(--p360-t-slow) var(--ease-out) calc(var(--d,0) * 60ms),translate var(--p360-t-base) var(--ease-out),outline-color var(--p360-t-base) var(--ease-out)}
/* the photo is the stage behind the drawing and fades to solid canvas under the copy */
.why__bg{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden}
.why__bg img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.3;filter:grayscale(1) contrast(1.1)}
.why__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.55) 30%,#0a0a0ac9 46%,#0A0A0A 62%)}
/* a short red tab on the top edge, drawn in when the tile arrives */
.why__card::after{content:'';position:absolute;top:-1px;left:var(--pad);width:2.25rem;height:2px;border-radius:2px;background:var(--red);transform-origin:left}
.js .why__card::after{transform:scaleX(0)}
.js .why__card.in::after{transform:none;transition:transform .9s var(--ease-expo) calc(.35s + var(--d,0) * 90ms)}
.why__vis{order:-1;position:relative;z-index:1;margin:0;padding:calc(var(--pad) * .6) calc(var(--pad) * .5) 0;pointer-events:none}
.why__vis svg{display:block;width:100%;height:auto}
.why__txt{position:relative;z-index:2;display:flex;flex-direction:column;padding:.25rem var(--pad) calc(var(--pad) * 1.15)}
.why__t{margin:.6rem 0 .85rem;font-size:min(var(--tmax),calc((100cqi - 2 * var(--pad) - 4px) / 15.6))}  /* sized by the tile: the longest title (EN "Down to the number.") always fits */
.why__t span{display:block}
@media(min-width:421px){.why__t span{white-space:nowrap}}  /* every title on two lines: the statement, then the red answer */
.why__t .red{color:var(--red)}
.why p{color:var(--mute)}
.why__txt p{font-size:1.0625rem;line-height:1.55}
.why__txt .btn{align-self:flex-start;margin-top:1.5rem}
.js .why__vis{opacity:0;transform:translateY(12px) scale(.98)}
.js .why__card.in .why__vis{opacity:1;transform:none;transition:opacity var(--p360-t-slow) var(--ease-out) .15s,transform .9s var(--ease-expo) .15s}
.why__vis svg{transition:scale var(--p360-t-slow) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .why__card:hover{translate:0 -4px;outline-color:rgba(245,245,242,.16)}
  .why__card:hover .why__vis svg{scale:1.03}
}
/* why artwork: inline SVG built by _archive/why_art/build.py (line styles, NL/EN labels, motion) */
.wart .w,.wart .f,.wart .d,.wart .dd,.wart .r,.wart .rl,.wart .pl,.wart .ic,.wart .ff{fill:none;stroke-linecap:round;stroke-linejoin:round}
.wart .w{stroke:#ECECE8;stroke-width:2}
.wart .ic{stroke:#ECECE8;stroke-width:2.6}
.wart .f{stroke:#ECECE8;stroke-width:1.3;opacity:.38}
.wart .ff{stroke:#ECECE8;stroke-width:1;opacity:.16}
.wart .d{stroke:#ECECE8;stroke-width:2;stroke-dasharray:6 7;opacity:.75}
.wart .dd{stroke:#ECECE8;stroke-width:1.4;stroke-dasharray:2 5;opacity:.5}
.wart .r{stroke:var(--red)}
.wart .r,.wart .hand{stroke-width:2.4}
.wart .rl{stroke:var(--red);stroke-width:1.8;stroke-dasharray:4 5}
.wart .rd{fill:var(--red)}
.wart .pl{stroke:#ECECE8;stroke-width:2.4;fill:rgba(10,10,10,.82)}
.wart .tx{fill:#ECECE8;stroke:#ECECE8;stroke-width:1.25}
.wart .bg{fill:rgba(10,10,10,.82)}
/* labels follow the language switch */
.wart .l-en,html[lang="en"] .wart .l-nl{display:none}
html[lang="en"] .wart .l-en{display:inline}
/* entrance: the drawing builds up layer by layer (base, panels, labels), bars grow from the slab */
.js .wart .ly{opacity:0;transform:translateY(14px)}
.js .why__card.in .wart .ly{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform 1s var(--ease-expo);transition-delay:calc(.3s + var(--i) * 85ms)}
.wart .gr{transform-box:fill-box;transform-origin:50% 100%}
.js .wart .gr{transform:scaleY(.35)}
.js .why__card.in .wart .gr{transform:none;transition:transform 1.1s var(--ease-expo) calc(.4s + var(--i) * 85ms)}
/* ambient: slow and quiet, only while the card is on screen (.live) */
.why__card.in .wart .fl{animation:wart-float 6s ease-in-out calc(1.8s + var(--f) * .9s) infinite alternate}
.why__card.in .wart .rg{animation:wart-breathe 3.4s ease-in-out calc(1.6s + var(--k) * .5s) infinite alternate}
.why__card.in .wart .rl{animation:wart-flow 3s linear infinite}
.why__card.in .wart .fw{animation:wart-flow-w 7s linear infinite}
.why__card.in .wart .pu{animation:wart-pulse 3s ease-in-out 1.8s infinite}
.why__card.in .wart .hand{animation:wart-spin 30s linear 1.6s infinite}
.wart .hand{transform-origin:0 0}
.wart *{animation-play-state:paused!important}
.why__card.live .wart *{animation-play-state:running!important}
@keyframes wart-float{to{transform:translateY(-6px)}}
@keyframes wart-breathe{to{opacity:.4}}
@keyframes wart-flow{to{stroke-dashoffset:-18}}
@keyframes wart-flow-w{to{stroke-dashoffset:-26}}
@keyframes wart-pulse{50%{opacity:.35}}
@keyframes wart-spin{to{transform:rotate(360deg)}}
/* tablets: two by two (the stagger stays on the right column); phones: one column, no stagger */
@media(max-width:1179px){.why__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.75rem}.why__card{--tmax:1.375rem}}
@media(max-width:699px){.why__grid{grid-template-columns:1fr;gap:2.25rem;padding-bottom:0}.why__card:nth-child(even){margin-top:0}}

/* ── clients ─────────────────────────────────────────────────── */
.clients{padding:clamp(4rem,9vh,6rem) 0;overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.clients__head{display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:0 var(--gutter);text-align:center;margin-bottom:clamp(2.5rem,6vh,3.5rem)}
.marquee__track{display:flex;width:max-content;animation:marquee 60s linear infinite}
/* the space between logos sits on the row itself (gap plus one trailing gap, so every copy of the set is equally wide and the loop stays seamless).
   The old padding on the inner span did not widen the items; it only looked spaced because the PNG logos had empty margins of their own */
.marquee__set{display:flex;align-items:center;gap:clamp(2rem,5vw,4rem);padding-right:clamp(2rem,5vw,4rem)}
.marquee__set img{width:clamp(3.6rem,5.5vw,4.9rem);height:clamp(1.35rem,2.2vw,1.9rem);object-fit:contain;opacity:.6} /* small and quiet: the logos support the line above, they do not compete with it */
.marquee__set img[src$="leyo.svg"]{height:clamp(2.05rem,3.3vw,2.85rem)} /* a tall mark: at the shared height it reads smaller than the wide logos, so it gets half as much again */
.marquee__set img[src$="insomniac.svg"]{width:clamp(4.5rem,6.9vw,6.1rem)} /* a very wide wordmark: at the shared width it reads small, so it gets a quarter more room */
@keyframes marquee{to{transform:translateX(-50%)}}
@media(hover:hover) and (pointer:fine){.marquee:hover .marquee__track{animation-play-state:paused}}

/* ── newsletter ──────────────────────────────────────────────── */
.news__core{display:grid;grid-template-columns:1fr 1fr;gap:2rem 3rem;align-items:center;padding:clamp(2rem,4.5vw,4rem)}
.news__core>div:first-child{display:flex;flex-direction:column;gap:1.25rem}
.field{display:flex;align-items:center;gap:.5rem;padding:.375rem .375rem .375rem 1.4rem;border-radius:var(--p360-r-pill);background:var(--ivory);color:var(--canvas)}
.field:focus-within{outline:2px solid var(--red);outline-offset:3px}
.field input{flex:1;min-width:0;min-height:2.75rem;background:none;border:none;outline:none;font-size:1rem;color:var(--canvas)}
.field input::placeholder{color:rgba(10,10,10,.6)}
.field .discbtn{width:3rem;height:3rem;background:var(--red);color:var(--canvas)}
.news__form{position:relative}
/* the small print hangs centred under the input, outside the flow, so the copy on the left lines up with the field itself */
.news__form .form-note{position:absolute;top:100%;left:0;right:0;max-width:none;text-align:center}
.news__form .form-status{position:absolute;top:calc(100% + 2.5rem);left:0;right:0;min-height:0;margin:0;font-size:.875rem;line-height:1.4;text-align:center}
@media(hover:hover) and (pointer:fine){.field .discbtn:hover{background:var(--canvas);color:var(--ivory)}}
.form-note{margin-top:.85rem;font-size:.8125rem;line-height:1.5;color:var(--mute)}
.form-note a{color:var(--ivory);text-decoration:underline;text-underline-offset:3px}
.form-status{min-height:1.6em;margin-top:.5rem;font-weight:600}
.form-status[data-state="ok"]{color:var(--ivory)}
.form-status[data-state="err"]{color:var(--red)}
@media(max-width:767px){.news__core{grid-template-columns:1fr}.news__form .form-note,.news__form .form-status{position:static}}

/* ── contact: red ground, one question at a time ─────────────── */
.cta{background:var(--red);color:var(--canvas);min-height:100svh;display:flex;align-items:center;padding:calc(var(--frame) + var(--nav-h) + 3rem) var(--gutter) var(--section-y)}
.cta__grid{width:100%;max-width:80rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.cta__h{margin-top:1.5rem}
.cta__h em{font-style:normal;color:var(--ivory)}
.cta__note{max-width:30rem;margin-top:1.75rem}
.cta__mail{display:inline-block;margin-top:1.5rem;font-size:clamp(1.375rem,2vw,1.75rem);font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ivory);border-bottom:2px solid currentColor;padding-bottom:2px;transition:color var(--p360-t-fast) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.cta__mail:hover{color:var(--canvas)}}
@media(max-width:56rem){.cta__grid{grid-template-columns:1fr}}
.quiz__kick{display:block;text-align:center;margin-bottom:1rem;justify-content:center}
.quiz__card{position:relative;background:var(--white);color:var(--canvas);border-radius:var(--p360-r-xl);padding:clamp(2.75rem,4vw,3.25rem) clamp(1.25rem,2.5vw,2rem) clamp(1.75rem,3vw,2.5rem);min-height:22rem;display:grid}
.quiz__step{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.15rem;opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);transition:opacity var(--p360-t-fast) var(--ease-out),transform var(--p360-t-fast) var(--ease-out),visibility 0s var(--p360-t-fast)}
.quiz__step.act{opacity:1;visibility:visible;transform:none;transition:opacity var(--p360-t-base) var(--ease-out) 100ms,transform var(--p360-t-slow) var(--ease-out) 100ms,visibility 0s}
.quiz__meta{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(10,10,10,.7)}
.quiz__meta>span::after{content:none!important}
.quiz__dots{display:flex;gap:.35rem}
.quiz__dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--ivory)}
.quiz__dot.cur{background:var(--red)}
.quiz__dot.done{background:var(--canvas)}
.quiz__q{font-size:1.375rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;max-width:18ch}
.quiz__opts{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:24rem}
.quiz__opt{min-height:2.75rem;padding:.65rem 1.15rem;border-radius:var(--p360-r-pill);font-size:.9375rem;font-weight:600;background:var(--ivory);color:var(--canvas);transition:background-color var(--p360-t-fast) var(--ease-out),color var(--p360-t-fast) var(--ease-out),transform var(--p360-t-fast) var(--ease-out)}
.quiz__opt[aria-pressed="true"]{background:var(--canvas);color:var(--ivory)}
@media(hover:hover) and (pointer:fine){.quiz__opt:hover{background:var(--canvas);color:var(--ivory)}}
.quiz__opt:active{transform:scale(.97)}
.quiz__form{display:flex;flex-direction:column;align-items:center;gap:.65rem;width:100%;max-width:19rem}
.quiz__input{width:100%;min-height:3.25rem;padding:.85rem 1.15rem;border:2px solid transparent;border-radius:var(--p360-r-md);font-size:1rem;font-weight:600;text-align:center;background:var(--ivory);color:var(--canvas);transition:border-color var(--p360-t-fast) var(--ease-out)}
.quiz__input::placeholder{color:rgba(10,10,10,.55);font-weight:500}
.quiz__input:focus{border-color:var(--canvas);outline:none}
.quiz__input[aria-invalid="true"]{border-color:var(--red)}
.quiz__err{min-height:1.6em;font-weight:600;color:var(--canvas)}
/* human check: one tick box in the house style; the hidden trap field sits off screen */
.quiz__trap{position:absolute;left:-200vw;width:1px;height:1px;opacity:0;pointer-events:none}
.quiz__human{display:inline-flex;align-items:center;gap:.65rem;min-height:2.75rem;font-size:.9375rem;font-weight:600;cursor:pointer}
.quiz__human input{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;margin:0;border:2px solid var(--canvas);border-radius:.4rem;background:var(--white);cursor:pointer;transition:background-color var(--p360-t-fast) var(--ease-out),transform var(--p360-t-fast) var(--ease-out)}
.quiz__human input::after{content:'';width:.7rem;height:.38rem;border-left:2.5px solid var(--white);border-bottom:2.5px solid var(--white);transform:translateY(-1px) rotate(-45deg) scale(.6);opacity:0;transition:opacity var(--p360-t-fast) var(--ease-out),transform var(--p360-t-fast) var(--ease-out)}
.quiz__human input:checked{background:var(--canvas)}
.quiz__human input:checked::after{opacity:1;transform:translateY(-1px) rotate(-45deg)}
.quiz__human input:active{transform:scale(.94)}
.quiz__human input:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.quiz__human input[aria-invalid="true"]{border-color:var(--red)}
.quiz__fine{font-size:.8125rem;line-height:1.5;color:rgba(10,10,10,.7);max-width:19rem}
.quiz__fine a{text-decoration:underline;text-underline-offset:2px}
.quiz__back{position:absolute;top:1.1rem;left:1.25rem;display:inline-flex;align-items:center;gap:.35rem;min-height:2.75rem;padding:0 .25rem;font-size:.8125rem;font-weight:600;color:rgba(10,10,10,.7)}
.quiz__back .gl{width:.75rem;height:.75rem}
@media(hover:hover) and (pointer:fine){.quiz__back:hover{color:var(--canvas)}}
.quiz__check{width:4rem;height:4rem;border-radius:50%;display:grid;place-items:center;background:var(--red);color:var(--canvas)}
.quiz__check .gl{width:50%;height:50%}
.quiz__sub{color:rgba(10,10,10,.75);max-width:22rem}

/* ── footer ──────────────────────────────────────────────────── */
.footer{background:var(--canvas);color:var(--ivory);padding:clamp(4rem,9vh,6.5rem) var(--gutter) 2rem}
.footer__in{max-width:90rem;margin:0 auto}
.footer__logo{display:inline-block;color:var(--white)}
.footer__logo svg{display:block;width:clamp(10rem,14vw,13rem);height:auto}
.footer__tag{max-width:30rem;margin-top:1.25rem;color:var(--mute)}
.footer__grid{margin-top:clamp(3rem,7vh,4.5rem);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2.5rem 2rem}
.footer__col h3{color:var(--mute);padding-bottom:.85rem;border-bottom:1px solid var(--hair);margin-bottom:1rem}
.footer__col a,.footer__addr{display:block;font-size:clamp(.9375rem,.875rem + .2vw,1.0625rem);font-weight:400;padding:.3rem 0;color:var(--ivory);font-style:normal;line-height:1.6}  /* a step below the body text: the footer stays quiet */
.footer__col a{transition:color var(--p360-t-fast) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.footer__col a:hover{color:var(--red)}}
.footer__social{display:flex;gap:.5rem;margin-top:1rem}
.footer__social a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--graphite);color:var(--ivory);padding:0;transition:background-color var(--p360-t-base) var(--ease-out),color var(--p360-t-base) var(--ease-out),transform var(--p360-t-fast) var(--ease-out)}
.footer__social a:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.footer__social a:hover{background:var(--red);color:var(--canvas)}}
.footer__base{margin-top:clamp(3rem,6vh,4rem);padding-top:1.5rem;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;font-size:.875rem;color:var(--mute)}
.footer__legal{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.footer__legal a{display:inline-flex;align-items:center;min-height:2.75rem;transition:color var(--p360-t-fast) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.footer__legal a:hover{color:var(--ivory)}}
@media(max-width:1023px){.footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer__col--wide{grid-column:1/-1}}

/* ── reveals (§9): settle from 8px below and .97, staggered ─── */
.js .rv{opacity:0;transform:translateY(8px) scale(.97)}
.js .rv.in{opacity:1;transform:none;transition:opacity var(--p360-t-slow) var(--ease-out),transform var(--p360-t-slow) var(--ease-out);transition-delay:calc(var(--d,0) * 60ms)}
.js .ln[data-ln]>span{transform:translateY(105%)}
.js .ln[data-ln].in>span{transform:none;transition:transform var(--p360-t-scene) var(--ease-expo) calc(var(--d,0) * 70ms)}

/* ── reduced motion: replace movement with a quick fade (§9) ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
.rm .marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
.rm .marquee__set[aria-hidden]{display:none}
.rm .marquee__set{flex-wrap:wrap;justify-content:center;row-gap:1.5rem}