/* Humanate Creative landing page. Dark only. V2 black canvas: pitch black ground, Ammar's shell, black notch and strip. */

@font-face{font-family:"Helvetica Neue HC";src:url(fonts/helvetica-neue-100.woff2) format("woff2");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue HC";src:url(fonts/helvetica-neue-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue HC";src:url(fonts/helvetica-neue-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue HC";src:url(fonts/helvetica-neue-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue HC";src:url(fonts/helvetica-neue-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Poppins trial 2026-09-19, his lean after the side-by-side (Google Fonts static cuts 300, 300 italic, 400, 500, 700; latin + latin-ext). The hero's "People Trust." now sets in the true 300 italic */
@font-face{font-family:"Poppins";src:url(fonts/poppins-300-italic-latin-ext.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap;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:"Poppins";src:url(fonts/poppins-300-italic-latin.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap;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:"Poppins";src:url(fonts/poppins-300-latin-ext.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap;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:"Poppins";src:url(fonts/poppins-300-latin.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap;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:"Poppins";src:url(fonts/poppins-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;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:"Poppins";src:url(fonts/poppins-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;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:"Poppins";src:url(fonts/poppins-500-latin-ext.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;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:"Poppins";src:url(fonts/poppins-500-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;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:"Poppins";src:url(fonts/poppins-700-latin-ext.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;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:"Poppins";src:url(fonts/poppins-700-latin.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;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}
/* Bricolage Grotesque trial 2026-09-19 (Google Fonts v9 variable: opsz 12 to 96, wdth 75 to 100, wght 200 to 800), latin + latin-ext subsets */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap;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:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap;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}
/* Bodoni Moda, self-hosted variable files carrying both the wght and opsz axes */
@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2-variations"),url(fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda-latin-opsz-italic.woff2) format("woff2-variations"),url(fonts/bodoni-moda-latin-opsz-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}

:root{
  color-scheme:dark;
  --ink:#131417; --line:rgba(19,20,23,.14);
  --pur:#C4C8D2; --purhi:#D9DDE6; --purlo:#3A3F4B; --night:#07080A; --cool:#7FA6FF;
  --ground:#000; --tab:#000; --text:#F2F3F5;
  --font:"Kulim Park","Poppins","Helvetica Neue HC","Helvetica Neue",Helvetica,Arial,sans-serif;   /* HIS CALL 2026-09-19 later: Kulim Park is the text face, Aime MX the title face (see the trial block); Poppins and Bricolage stay declared for a one-word revert */
  --serif:"Bodoni Moda","Bodoni 72",Didot,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.9,.24,1);
  --gutter:22px; --radius:36px;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;position:relative;min-height:100vh;
  background:var(--ground);color:var(--text);
  font-family:var(--font);font-weight:300;font-size:16px;line-height:1.45;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2{text-wrap:balance}
::selection{background:rgba(196,200,210,.45);color:#fff}
:focus-visible{outline:2px solid var(--purhi);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-48px;z-index:100;padding:10px 16px;border-radius:12px;background:#fff;color:#000;font-weight:400}
.skip:focus{top:16px}

/* ---------- shared type ---------- */
.serif{font-family:var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.01em}
.wrap{max-width:1360px;margin:0 auto;padding-inline:40px}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.eyebrow.light{color:rgba(255,255,255,.7)}
.lab{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:26px;font-weight:500}

/* ---------- the island: notch on the hero, floating pill after, panel when open ---------- */
.tab{
  --halo:.22;
  position:absolute;top:calc(var(--gutter) - 1px);left:0;right:0;margin:0 auto;width:fit-content;z-index:60;
  display:flex;flex-direction:column;align-items:center;
  padding:16px 40px 18px;border-radius:0 0 26px 26px;background:var(--tab);color:#fff;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.26)) drop-shadow(1px 0 0 rgba(255,255,255,.12)) drop-shadow(-1px 0 0 rgba(255,255,255,.12)) drop-shadow(0 18px 34px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(196,200,210,var(--halo)));
}
/* concave fillets that cut the notch into the card edge */
.tab::before,.tab::after{content:"";position:absolute;top:0;width:24px;height:24px;transition:opacity .25s ease}
.tab::before{left:-24px;background:radial-gradient(circle at 0 100%,transparent 23.5px,var(--tab) 24px)}
.tab::after{right:-24px;background:radial-gradient(circle at 100% 100%,transparent 23.5px,var(--tab) 24px)}
.tab-brand{display:block;position:relative;z-index:1;pointer-events:none}
.tab-lockup{height:50px;width:auto;display:block}
.tab-hit{position:absolute;inset:0;z-index:2;border:0;padding:0;background:transparent;border-radius:inherit;cursor:pointer}
.tab-nav{display:none;position:relative;z-index:3;align-items:center;justify-content:center;gap:6px;margin-top:14px}
.tab.open .tab-nav{display:flex}
.tab-nav a{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;font-size:15px;font-weight:400;color:#fff;white-space:nowrap;transition:background .2s ease}
.tab-nav a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pur);opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}
.tab-nav a:hover{background:rgba(255,255,255,.06)}
.tab-nav a:hover::before{opacity:1;transform:none}
.tab.open{width:520px;padding:16px 24px 20px}
.tab.pill{position:fixed;top:14px;height:56px;padding:0 22px;border-radius:999px;justify-content:center;transition:translate .2s ease}
.tab.pill:hover{translate:0 -1px}
.tab.pill .tab-lockup{height:34px}
.tab.pill::before,.tab.pill::after{opacity:0}
.tab.pill.open{height:auto;padding:16px 24px 20px;border-radius:26px}
.tab.moving{will-change:transform}

/* ---------- hero card ---------- */
.hero-wrap{position:relative;padding:var(--gutter)}
.card{
  position:relative;height:calc(100vh - 2 * var(--gutter));min-height:720px;
  border-radius:var(--radius);overflow:hidden;isolation:isolate;container-type:size;
  background:#060708;color:#fff;border:0;box-shadow:0 40px 90px rgba(0,0,0,.45);
}
.room{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;background:url(media/hero-lumina.jpg) center/cover}
.dim{position:absolute;inset:0;z-index:0;background:radial-gradient(115% 95% at 50% 45%,transparent 40%,rgba(0,0,0,.38) 76%,rgba(0,0,0,.8) 100%),linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.6) 100%),rgba(7,8,10,.16)}

/* the stage sits centred on the film (the Lumina clip keeps its subject in the middle of every frame).
   --fx is the object-fit cover scale of a 1920x1080 frame, CSS px per film px, kept for the title and stage widths */
.stage{
  --fx:max(calc(100cqw / 1920),calc(100cqh / 1080));
  position:absolute;z-index:2;left:50%;width:calc(988 * var(--fx));
  top:50%;transform:translate(-50%,-52%);text-align:center;
}
.hero-copy{max-height:400px;transition:opacity .55s var(--ease),transform .55s var(--ease),max-height .6s var(--ease)}
.hero.talking .hero-copy{overflow:hidden;opacity:0;transform:translateY(-16px) scale(.98);max-height:0;pointer-events:none}
.dispB{font-size:clamp(40px,calc(988 * var(--fx) / 10.4),82px);font-weight:300;line-height:1.02;margin-top:16px;letter-spacing:-.02em;color:#fff}
.dispB .grad{display:block;width:fit-content;margin-inline:auto;background:linear-gradient(90deg,#FFFFFF 0%,#D6DAE3 48%,#8E94A2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dispB em{display:block;font-style:italic;font-weight:300;color:rgba(255,255,255,.74)}

/* ---------- chat (Ammar's glass bar, engine untouched) ---------- */
.chat{width:min(640px,calc(988 * var(--fx) * .75),100%);margin:44px auto 0;position:relative;z-index:4}
.gthread{display:flex;flex-direction:column;gap:9px;text-align:left;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .6s var(--ease),opacity .45s var(--ease),margin .5s var(--ease)}
.hero.talking .gthread{max-height:min(48vh,440px);overflow-y:auto;opacity:1;margin-bottom:16px;padding-right:2px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.gmsg{max-width:86%;width:fit-content;font-size:15.5px;line-height:1.6;font-weight:300;letter-spacing:0;animation:gin .4s var(--ease);white-space:pre-line}
@keyframes gin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gmsg.bot{position:relative;padding:4px 4px 4px 38px;color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.gmsg.bot::before,.gtyping::before{content:"";position:absolute;left:2px;top:4px;width:24px;height:24px;
  background:conic-gradient(from 200deg,#FFFFFF,var(--cool) 16%,var(--pur) 38%,var(--purlo) 56%,var(--warm) 78%,#FFFFFF);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.6 5.9 5.1 10.4 11 11-5.9.6-10.4 5.1-11 11-.6-5.9-5.1-10.4-11-11C6.9 11.4 11.4 6.9 12 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.6 5.9 5.1 10.4 11 11-5.9.6-10.4 5.1-11 11-.6-5.9-5.1-10.4-11-11C6.9 11.4 11.4 6.9 12 1z'/%3E%3C/svg%3E") center/contain no-repeat}
.gtyping::before{animation:spark 1.4s linear infinite}
@keyframes spark{to{transform:rotate(360deg)}}
/* HIS NOTE 2026-09-21 later ("should have our lil minor gradient too, paired with the liquid glass", then "it should still be liquid glass with our
   gradient though, kinda like this colour vibe" = the brief card's glass): the bubble is glass the film reads through (a thin white wash warmed lilac
   to blue, a specular top edge, a lilac bloom), rimmed by the same silver to lilac to blue band as the link dividers and the lockup rule, the rim a
   masked 1 px pseudo so the fill under it stays clear. */
.gmsg.me{position:relative;padding:12px 19px;border-radius:22px 22px 6px 22px;color:#fff;align-self:flex-end;border:0;
  background:linear-gradient(135deg,rgba(255,255,255,.40),rgba(232,226,255,.22) 44%,rgba(196,180,255,.32) 72%,rgba(206,218,248,.36));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 10px 18px -12px rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.22),0 0 22px rgba(185,168,255,.34);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.gmsg.me::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(240,240,244,.95),rgba(190,172,255,1) 48%,rgba(200,214,248,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* HIS NOTE 2026-09-21 later ("these 2 buttons aren't centred properly, they look off"): both glyphs sit at the geometric centre (real Safari reads
   0.01 px), but the eye weighs the paperclip's heavy round end (bottom left) and the arrow's head (top), so each sits at its optical centre; the
   press still sinks them 1 px. */
.gbar .ui-btn.icon:not(.up)>svg{transform:translate(.5px,-.5px)}
.gbar .ui-btn.icon.up>svg{transform:translateY(.6px)}
.gbar .ui-btn.icon:not(.up).pressed>svg,.gbar .ui-btn.icon:not(.up):not(:disabled):active>svg{transform:translate(.5px,.5px)}
.gbar .ui-btn.icon.up.pressed>svg,.gbar .ui-btn.icon.up:not(:disabled):active>svg{transform:translateY(1.6px)}
.gtyping{position:relative;display:flex;gap:4px;align-items:center;padding:12px 4px 12px 38px;width:fit-content}
.gtyping i{width:5px;height:5px;border-radius:50%;background:var(--pur);display:block;animation:blink 1.3s infinite}
.gtyping i:nth-child(2){animation-delay:.18s}
.gtyping i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.gbar{
  position:relative;display:flex;align-items:center;gap:8px;min-height:58px;padding:6px 6px 6px 22px;border-radius:29px;text-align:left;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 50px rgba(0,0,0,.35);
  transition:border-color .25s ease,background .25s ease;
}
.gbar:focus-within{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.15)}
.gbar textarea{flex:1;background:transparent;border:0;outline:none;resize:none;color:#fff;font-family:var(--font);font-size:15px;line-height:1.45;font-weight:300;padding:11px 0;min-height:44px;max-height:132px}
.gplace{position:absolute;left:23px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:15px;font-weight:300;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;max-width:calc(100% - 130px);text-overflow:ellipsis;transition:opacity .35s ease}
.gplace.out{opacity:0}
.cbtns{display:flex;gap:6px;align-self:flex-end}

/* buttons: the dark base stays for the summary card, the bar and chips get Ammar's glass */
.ui-btn{
  --h:48px;appearance:none;position:relative;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--h);padding:0 24px;border:0;border-radius:16px;
  font-family:var(--font);font-size:15px;font-weight:400;letter-spacing:-.005em;white-space:nowrap;color:#fff;
  background:linear-gradient(180deg,#2B2D35,#121218);
  box-shadow:0 12px 30px rgba(19,20,23,.28),inset 0 1px 0 rgba(255,255,255,.12);
  transition:filter .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.ui-btn:hover{filter:brightness(1.12)}
.ui-btn:active{filter:brightness(.94)}
.ui-btn:disabled{opacity:.45;cursor:default}
.ui-btn.block{width:100%}
.ui-btn .dot{width:6px;height:6px;border-radius:50%;background:var(--purhi);box-shadow:0 0 10px var(--pur)}
.gbar .ui-btn.icon{width:44px;height:44px;padding:0;border-radius:50%;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);box-shadow:none}
.gbar .ui-btn.icon svg{width:18px;height:18px}
.gbar .ui-btn.up{background:linear-gradient(180deg,#F5F6F8,#D7DAE1);color:var(--ink);border-color:rgba(255,255,255,.9)}
.gchips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px;min-height:38px}
.gchips:empty{margin-top:0;min-height:0}
.gchips .ui-btn{--h:38px;padding:0 14px;border-radius:12px;font-size:13px;font-weight:300;color:#fff;
  background:rgba(6,6,10,.5);border:1px solid rgba(255,255,255,.22);box-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gchips .ui-btn:hover{filter:none;background:rgba(6,6,10,.68);border-color:rgba(255,255,255,.42)}
.gchips .ui-btn.on{border-color:var(--pur);box-shadow:0 0 0 1px var(--pur),0 0 18px rgba(196,200,210,.35)}
.gchips .ui-btn.go{background:linear-gradient(180deg,#F5F6F8,#D7DAE1);color:var(--ink);border-color:rgba(255,255,255,.9);font-weight:400}
.gchips .ui-btn.go:hover{background:linear-gradient(180deg,#FFFFFF,#E2E5EB)}
.gchips .ui-btn.alt{color:rgba(255,255,255,.7)}
.helper{margin:16px 0 0;font-size:12px;color:rgba(255,255,255,.55);text-align:center}
.gfiles{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.gfiles:empty{display:none}
.gfile{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 8px 0 12px;border-radius:999px;font-size:12.5px;color:rgba(255,255,255,.8);background:rgba(196,200,210,.14);border:1px solid rgba(196,200,210,.3)}
.gfile button{border:0;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.gsum{text-align:left;border-radius:22px;padding:20px;margin-top:4px;background:rgba(255,255,255,.06);border:1px solid rgba(196,200,210,.35);animation:gin .45s var(--ease);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.gsum h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--purhi);font-weight:400;margin:0 0 14px}
.gsum .r{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:14px}
.gsum .r + .r{border-top:1px solid rgba(255,255,255,.07)}
.gsum .r span:first-child{color:rgba(255,255,255,.42);flex:0 0 auto}
.gsum .r span:last-child{text-align:right;word-break:break-word}
.gsum .ui-btn{margin-top:16px;width:100%}
.gsum .alt-link{display:block;margin-top:10px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.45)}
.gsum .alt-link:hover{color:#fff}

/* ---------- bottom strip, cut into the card edge; it unfolds into the disciplines row on scroll ---------- */
.strip{
  --fillet:1;
  position:absolute;z-index:5;bottom:calc(var(--gutter) - 1px);left:0;right:0;margin:0 auto;width:fit-content;
  background:var(--tab);color:rgba(255,255,255,.72);padding:16px 44px 18px;border-radius:26px 26px 0 0;
  display:flex;gap:34px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.26)) drop-shadow(1px 0 0 rgba(255,255,255,.12)) drop-shadow(-1px 0 0 rgba(255,255,255,.12)) drop-shadow(0 -18px 34px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(196,200,210,.22));
}
.strip span{display:inline-flex;align-items:center}
.strip i{display:block;width:6px;height:6px;margin-right:12px;flex:none}
.strip i b{display:block;width:100%;height:100%;border-radius:50%;background:var(--pur)}
.strip::before,.strip::after{content:"";position:absolute;bottom:0;width:24px;height:24px;opacity:var(--fillet)}
.strip::before{left:-24px;background:radial-gradient(circle at 0 0,transparent 23.5px,var(--tab) 24px)}
.strip::after{right:-24px;background:radial-gradient(circle at 100% 0,transparent 23.5px,var(--tab) 24px)}
/* THE TICKER (his round four pick A, phones only): the six are doubled in the markup so the line can loop seamlessly. Above 640 the
   track and both sets are transparent (display:contents), so the six spans stay the strip's own flex items exactly as they were, and the
   duplicate set is out of the flow. */
.strip .strip-track,.strip .strip-set{display:contents}
.strip .strip-set.dup{display:none}

/* ---------- the creatives band: eyebrow, the line, one bar of eleven marks sliding left ---------- */
/* THE CREATIVES ROW (his 2026-09-20 later ask, "the scroll logos next to it"): the line small on the left, a hairline, the marquee filling the rest, one band */
.secC{padding:44px 0 0}
.cr-row{display:grid;grid-template-columns:minmax(300px,34%) minmax(0,1fr);align-items:center}
.cr-text{padding:6px clamp(24px,3vw,44px) 6px 0;border-right:1px solid rgba(255,255,255,.14)}
.cr-line{font-size:19px;line-height:1.45;letter-spacing:-.008em;max-width:32ch;margin-top:12px;color:var(--text)} /* his 2026-09-20 later note: 15.5 read small against the page, now 19 like the intro aside */
.cr-line b{font-weight:400;color:var(--purhi)}
.rows{min-width:0}
.marquee{position:relative;overflow:hidden;padding:14px 0 14px clamp(24px,3vw,44px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 92%,transparent)}
.track{display:flex;width:max-content;will-change:transform}
.track.on{animation:slideL var(--dur,70s) linear infinite}
.half{display:flex;align-items:center}
.set{display:flex;align-items:center;gap:96px;padding-right:96px}
.set img{flex:none;width:auto;max-width:none;height:var(--h,28px);opacity:.84;transition:opacity .3s}
.set img:hover{opacity:1}
.set .corp{filter:brightness(0) invert(1)}
.set .game{filter:grayscale(1) brightness(1.12)}
@keyframes slideL{to{transform:translateX(-50%)}}

/* ---------- the work teaser: five studio-concept films on loop, the cover shelf, enter the work (Q6 mockup) ---------- */
.secW{padding:110px 0 30px}
.work-head{display:grid;gap:18px}
.secW h2{font-family:var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.01em;font-size:clamp(36px,3.75vw,54px);line-height:1.04;font-weight:400;color:var(--text)}
.secW h2 em{font-style:italic;color:rgba(242,243,245,.7)}
.work-lede{font-size:17px;color:rgba(242,243,245,.52);max-width:62ch}
.films{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:54px}
.film{display:block;color:inherit}
.film figure{margin:0}
.film .frame{aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#0a0a0b;box-shadow:0 0 0 1px rgba(255,255,255,.08);position:relative}
.film .frame video,.film .frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.film:hover .frame video,.film:hover .frame img{transform:scale(1.04)}
.film .frame i{position:absolute;left:12px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--purhi);box-shadow:0 0 10px var(--pur);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.film figcaption{margin-top:12px;display:grid;gap:2px;font-size:12.5px;color:rgba(242,243,245,.52)}
.film figcaption b{font-weight:400;color:var(--text);letter-spacing:.02em}
.work-sub{margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.38)}
.shelf-head{display:flex;align-items:baseline;gap:22px;margin-top:72px}
.shelf-head .credit{font-size:15px;color:rgba(242,243,245,.52)}
.shelf{display:flex;gap:16px;margin-top:26px;padding-block:6px 26px;position:relative}
.shelf a{position:relative;flex:1 1 0;min-width:0;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0a0a0b;box-shadow:-14px 0 28px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.shelf a img{width:100%;height:100%;object-fit:cover;object-position:top}
.shelf a:hover{transform:translateY(-10px) scale(1.04);z-index:20;box-shadow:-14px 0 28px rgba(0,0,0,.75),0 26px 50px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.18)}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.work-cta{display:flex;justify-content:center;margin-top:60px}

/* ---------- services on the black canvas, two purple glows fading in below the hero ---------- */
.secD{position:relative;padding:70px 0 90px;
  background:linear-gradient(180deg,#000 0,rgba(0,0,0,0) 560px),radial-gradient(60% 60% at 82% 10%,rgba(127,166,255,.15),transparent 60%),radial-gradient(50% 50% at 6% 90%,rgba(190,170,255,.12),transparent 60%)}
.statement{font-variation-settings:"opsz" 36;padding:120px 0 100px;text-align:center;font-size:clamp(26px,3.4vw,46px);line-height:1.22;font-weight:400;max-width:24ch;margin-inline:auto;color:#F3F4F6}
.statement b{font-weight:700;color:#fff}
.svc-head{text-align:center;margin-bottom:64px}
.svc-lede{margin:18px auto 0;max-width:58ch;font-size:17px;line-height:1.5;color:rgba(255,255,255,.72)}

/* services, epic.net style: thin serif numeral with a hairline, kicker, serif title, paragraph, outline pill */
.svc{display:grid;grid-template-columns:auto 1fr 1fr;gap:40px;align-items:start;border-top:1px solid rgba(255,255,255,.16);padding-top:70px}
.svc + .svc{margin-top:70px}
.svc.alt{grid-template-columns:1fr 1fr auto}
.svc.alt .num{grid-column:3;grid-row:1;border-right:0;border-left:1px solid rgba(255,255,255,.35);padding-right:0;padding-left:34px}
.svc.alt .svc-body{grid-column:2;grid-row:1}
.num{font-size:150px;line-height:.8;font-weight:400;color:var(--purhi);padding-right:34px;border-right:1px solid rgba(255,255,255,.35)}
.svc h3{font-family:var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.01em;font-size:clamp(48px,6vw,86px);line-height:.95;font-weight:400;color:#fff}
.svc h3 em{font-style:italic;color:var(--purhi)}
.svc .kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--purhi);font-weight:500;margin-bottom:14px}
.svc p{margin-top:22px;max-width:44ch;font-size:15.5px;color:rgba(255,255,255,.72)}
.svc p b{font-weight:500;color:#fff}
.pillx{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(217,221,230,.7);color:var(--purhi);border-radius:999px;padding:11px 20px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:background .25s,color .25s}
.pillx i{font-style:normal}
.pillx:hover{background:var(--purhi);color:var(--purlo)}
.svc .pillx{margin-top:26px}
.stack{position:relative;height:330px}
.pc{position:absolute;left:8%;top:10%;width:360px;aspect-ratio:4/3;background:#FAFBFC;border:1px solid rgba(217,221,230,.6);box-shadow:0 30px 70px rgba(0,0,0,.5);padding:12px 12px 40px;transform:rotate(-6deg)}
.pc::before{content:"";display:block;width:100%;height:100%;background:#E4E5E9}
.pc.two{transform:rotate(3deg) translate(28px,22px)}
.pc.three{transform:rotate(-1deg) translate(56px,44px)}
.pc small{position:absolute;left:14px;bottom:10px;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--purlo)}

/* ---------- the former light bands, now flat on the black canvas ---------- */
.bandD{position:relative;padding:110px 0;color:var(--text)}
.bandD h2{font-family:var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.01em;font-size:clamp(48px,6vw,84px);font-weight:400;line-height:.96;color:#fff;margin-top:12px}
.bandD h2 em{color:var(--purhi)}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.way{border-radius:24px;padding:36px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--text)}
.way h3{font-family:var(--serif);font-variation-settings:"opsz" 96;font-size:40px;font-weight:400;line-height:1;color:#fff;margin-top:14px}
.way p{font-size:15px;color:rgba(255,255,255,.72);margin-top:10px;max-width:48ch}
.way ol{margin:10px 0 0;counter-reset:s}
.way ol li{counter-increment:s;display:flex;gap:18px;font-size:15px;color:rgba(255,255,255,.72);padding-block:7px}
.way ol li::before{content:counter(s);color:var(--pur);font-size:12px;width:14px;padding-top:3px;flex:none}
.way .ctab{display:flex;align-items:center;gap:16px;margin-top:30px;font-size:13px;color:rgba(255,255,255,.5)}
.uib{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:16px;background:linear-gradient(180deg,#2B2D35,#121218);color:#fff;font-size:15px;font-weight:400;position:relative;box-shadow:0 12px 30px rgba(19,20,23,.28);transition:translate .2s ease}
.uib::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1.5px;background:linear-gradient(165deg,rgba(255,255,255,.95),rgba(196,200,210,.55) 45%,rgba(217,204,255,.7) 74%,rgba(127,166,255,.75));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.uib:hover{translate:0 -1px}
.uib .dot{width:7px;height:7px;border-radius:50%;background:var(--purhi)}

/* ---------- studio ---------- */
.secS{position:relative;padding:130px 0 120px;background:radial-gradient(45% 60% at 88% 30%,rgba(127,166,255,.10),transparent 60%)}
.secS h2{font-family:var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.01em;font-size:clamp(48px,6vw,84px);font-weight:400;line-height:.96;color:#fff;margin-top:12px;max-width:14ch}
.secS h2 em{font-style:italic;color:var(--purhi)}
.studio-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;margin-top:48px;align-items:start}
.studio-lede{font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:rgba(255,255,255,.78);max-width:40ch}
.studio-side .lab{margin-top:0}
.studio-side .lab + .lab,.studio-side .cities + .lab{margin-top:30px}
.cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cities li{height:40px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;font-size:14px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.studio-line{margin-top:12px;color:rgba(255,255,255,.65);font-size:15.5px;max-width:44ch;line-height:1.55}

/* ---------- final call ---------- */
.final{text-align:center}
.final .wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.final h2{margin-top:0}
.final-lede{font-size:17px;color:rgba(255,255,255,.72);max-width:48ch}
.final .uib{margin-top:8px}

/* ---------- footer ---------- */
.footer{padding:70px 0 34px}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.foot-lockup img{height:44px;width:auto}
.foot-line{color:rgba(255,255,255,.55);font-size:15px;max-width:48ch}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.55);padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.foot-mail{color:#fff}
.foot-mail:hover{color:var(--purhi)}
.socials{display:flex;gap:18px}
.socials a{color:rgba(255,255,255,.55)}
.socials a:hover{color:#fff}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .track.on{animation-play-state:paused}
  .film .frame i{animation:none}
  .gmsg,.gsum{animation:none}
  .gtyping::before{animation:none}
  .tab.pill,.uib{transition:none}
}

/* ---------- the Work page (Q6 mockup part B): the theatre with its filmstrip, the Identity hall, the spread reader ---------- */
.workpage .tab.pill{transition:none}
.secT{padding:170px 0 0}
.th-head{display:grid;gap:18px}
.secT h2{font-size:clamp(32px,3.2vw,46px);line-height:1.08;font-weight:300;letter-spacing:-.02em;max-width:19ch;color:var(--text)}
.th-lede{font-size:17px;color:rgba(242,243,245,.52);max-width:62ch}
.theatre{margin-top:56px;position:relative}
.screen{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#050508;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 120px rgba(0,0,0,.8);isolation:isolate}
.shot{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.shot.on{opacity:1}
.shot video,.shot img{width:100%;height:100%;object-fit:cover}
.screen::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.55));pointer-events:none}
.cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px}
.cap p{font-size:14px;color:rgba(255,255,255,.86)}
.cap .r{display:flex;align-items:center;gap:14px}
.addr{font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cap .uib{border:0;cursor:pointer}
.spill{position:absolute;left:10%;right:10%;bottom:-70px;height:160px;background:radial-gradient(60% 100% at 50% 0,rgba(200,185,255,.16),transparent 70%);filter:blur(30px);pointer-events:none}
.reel{margin:34px auto 0;padding:18px 0;display:flex;justify-content:center;gap:16px;position:relative;width:max-content;max-width:100%}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:9px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 1.8px,transparent 2.4px) 0 0/22px 9px repeat-x}
.reel::before{top:2px}.reel::after{bottom:2px}
.thumb{appearance:none;background:none;border:0;padding:0;cursor:pointer;width:200px;flex:none;display:grid;gap:9px;text-align:left;color:inherit}
.thumb .f{display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0a0a0b;opacity:.5;transition:opacity .35s,box-shadow .35s}
.thumb .f img{width:100%;height:100%;object-fit:cover}
.thumb .t{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .35s}
.thumb:hover .f{opacity:.85}
.thumb.on .f{opacity:1;box-shadow:0 0 0 1.5px var(--pur),0 0 26px rgba(196,200,210,.4)}
.thumb.on .t{color:var(--purhi)}
.secH{padding:120px 0 30px;scroll-margin-top:90px}
.secH h2{font-family:var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.01em;font-size:clamp(36px,3.75vw,54px);line-height:1.04;font-weight:400;color:var(--text)}
.secH h2 em{font-style:italic;color:rgba(242,243,245,.7)}
.tier{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;position:relative;padding-bottom:26px}
.tier::after{content:"";position:absolute;left:-20px;right:-20px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3) 20%,rgba(255,255,255,.3) 80%,transparent);box-shadow:0 8px 30px rgba(196,200,210,.12)}
.tier + .tier{margin-top:34px}
.book{display:grid;gap:10px;position:relative;margin:0}
.book .c{appearance:none;border:0;padding:0;display:block;width:100%;cursor:pointer;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0a0a0b;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.7);transition:transform .5s var(--ease),box-shadow .5s}
.book .c img{width:100%;height:100%;object-fit:cover;object-position:top}
.book:hover .c,.book .c:focus-visible{transform:translateY(-8px);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 30px 60px rgba(0,0,0,.8),0 0 30px rgba(196,200,210,.18)}
.book figcaption{font-size:13.5px;color:rgba(242,243,245,.52);display:grid;gap:1px}
.book figcaption b{font-weight:400;color:var(--text)}

/* the spread reader: a full-screen overlay, close pill top right, one spread at a time */
.reader{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto 1fr auto;background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;opacity:0;transition:opacity .35s ease}
.reader[hidden]{display:none}
.reader.on{opacity:1}
.rd-top{display:flex;justify-content:flex-end;padding:22px 28px}
.rd-close{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 9px 0 18px;border-radius:999px;background:#050508;border:1px solid rgba(255,255,255,.16);color:#fff;font-size:14px;font-weight:400;box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 22px rgba(196,200,210,.16);transition:border-color .2s}
.rd-close:hover{border-color:rgba(255,255,255,.4)}
.rd-close i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);font-style:normal;font-size:17px;line-height:1}
.rd-stage{position:relative;display:grid;place-items:center;padding:0 96px;min-height:0}
.rd-page{margin:0;display:grid;place-items:center;max-width:100%;max-height:100%}
.rd-page img{display:block;max-width:min(1600px,100%);max-height:calc(100vh - 180px);width:auto;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 120px rgba(0,0,0,.8);opacity:0;transition:opacity .3s ease}
.rd-page img.ready{opacity:1}
.rd-nav{appearance:none;cursor:pointer;position:absolute;top:50%;translate:0 -50%;width:52px;height:52px;padding:0;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;transition:background .2s,border-color .2s,opacity .2s}
.rd-nav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.rd-nav.prev{left:22px}.rd-nav.next{right:22px}
.rd-nav:disabled{opacity:.22;cursor:default}
.rd-foot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 28px 24px;font-size:13px;color:rgba(255,255,255,.55)}
.rd-foot b{font-weight:400;color:#fff}
.rd-count{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
html.rd-open,html.rd-open body{overflow:hidden}

/* the full-screen viewer: the concept page in an iframe over the theatre, the reader's close pill floating top right.
   --tint is the concept's splash colour (from the thumb's data-tint, set on open): the theatre settles into it, the
   concept's own curtain flies out of the same colour, and on close ten boxes of it fly back in before the fade */
.viewer{position:fixed;inset:0;z-index:200;background:var(--tint,#000);opacity:0;transition:opacity .35s ease}
.viewer[hidden]{display:none}
.viewer.on{opacity:1}
.viewer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent}
.viewer .rd-top{position:absolute;top:0;right:0;z-index:2}
.vw-wipe{position:absolute;inset:0;z-index:1;display:none;overflow:hidden;pointer-events:none}
.vw-wipe .row{display:flex;width:100%;height:50%}
.vw-wipe i{display:block;width:20%;height:100%;background:var(--tint,#000);transform:translateY(-100%)}
.vw-wipe .row+.row i{transform:translateY(100%)}
.viewer.closing .vw-wipe{display:block}
.viewer.closing .vw-wipe i{animation:vwIn .8s cubic-bezier(.96,-.02,.38,1.01) forwards}
.viewer.closing .vw-wipe i:nth-child(4){animation-delay:.05s}.viewer.closing .vw-wipe i:nth-child(3){animation-delay:.1s}.viewer.closing .vw-wipe i:nth-child(2){animation-delay:.15s}.viewer.closing .vw-wipe i:nth-child(1){animation-delay:.2s}
@keyframes vwIn{to{transform:translateY(0)}}
html.vw-open,html.vw-open body{overflow:hidden}

@media (max-width:1100px){
  .reel{width:auto;justify-content:flex-start;overflow-x:auto;padding-inline:16px;scrollbar-width:none}
  .reel::-webkit-scrollbar{display:none}
  .rd-stage{padding:0 72px}
}
@media (max-width:640px){
  .tab.open{width:min(520px,calc(100vw - 24px))}
  .tab-nav{flex-wrap:wrap}
  .secT{padding-top:120px}
  /* the caption leaves the film: it flows under the 16:9 area instead of covering it */
  .screen{aspect-ratio:auto}
  .screen::before{content:"";display:block;aspect-ratio:16/9}
  .screen::after{display:none}
  .shot{bottom:auto;aspect-ratio:16/9}
  .cap{position:static;flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px 16px}
  .cap .r{flex-wrap:wrap}
  .cap .uib{white-space:nowrap}
  .tier{grid-template-columns:repeat(2,1fr)}
  .rd-stage{padding:0 12px}
  .rd-nav{width:44px;height:44px;top:auto;bottom:-56px;translate:none}
  .rd-nav.prev{left:12px}.rd-nav.next{right:12px}
  .rd-page img{max-height:calc(100vh - 220px)}
  .rd-foot{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 64px 20px}
}
@media (prefers-reduced-motion:reduce){
  .shot,.thumb .f,.thumb .t,.book .c,.reader,.rd-page img,.viewer{transition:none}
}

/* ---------- the landing page on phones (V2 step 7c): the laptop layout above 640 is locked, these only re-flow it ---------- */
@media (max-width:640px){
  body:not(.workpage) .wrap{padding-inline:24px}
  /* hero: the stage spans the card, the title drops to three lines, the rail and the chips take the full width */
  .stage{left:14px;width:calc(100% - 28px);transform:translateY(-52%)}
  .dispB{font-size:clamp(38px,12.4vw,48px);margin-top:14px}
  .chat{margin-top:32px}
  .hero.talking .gthread{max-height:min(40vh,440px)}
  .gchips{margin-top:14px}
  /* HIS PHONE NOTE 1 (2026-09-21 later): the three starters on ONE row, smaller and aligned (they wrapped 2 + 1 at 44 px / 13 px / 14 px padding:
     373 px against the 330 px stage). 34 px tall in the web's Aime MX at 12 px with 7 px padding and a 6 px gap: 309 px on the sim, inside
     the 17e's 318 px stage with room (Aime at 12.5 was 325, one row on the 17 Pro only). */
  .gchips{gap:6px;min-height:34px;margin-bottom:12px}   /* his note 2026-09-21 later, "the 3 pills need to sit SLIGHTLY higher": the laptop's 16 x hs bottom margin was invalid under 640, so they sat on the bar */
  .gchips .ui-btn{--h:34px;padding:0 7px;font-size:12px;font-family:"Aime MX",sans-serif;letter-spacing:.005em}
  /* the strip folds into two columns of three so the notch stays narrower than the card */
  .strip{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:18px;row-gap:9px;padding:13px 18px 15px;letter-spacing:.16em}
  /* the creatives band and the work teaser: the first film leads at full width, the other four sit two by two, the shelf is 3 x 2 */
  .secC{padding-top:80px}
  .rows{margin-top:44px}
  .secW{padding:80px 0 20px}
  .films{grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
  .film:first-child{grid-column:1 / -1}
  .film figcaption{margin-top:10px;font-size:12px}
  .work-sub{margin-top:18px}
  .shelf-head{flex-direction:column;align-items:flex-start;gap:8px;margin-top:56px}
  .shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;margin-top:20px}
  .work-cta{margin-top:44px}
  /* services: one column, the numeral smaller with its hairline, every numeral on the left, the paper stacks rest on phones */
  .secD{padding:56px 0 70px}
  .statement{padding:80px 0 70px}
  .svc-head{margin-bottom:44px}
  .svc-lede{font-size:16px}
  .svc,.svc.alt{grid-template-columns:1fr;gap:22px;padding-top:44px}
  .svc + .svc{margin-top:44px}
  .svc.alt .num,.svc.alt .svc-body{grid-column:1;grid-row:auto}
  .svc.alt .num{border-left:0;border-right:1px solid rgba(255,255,255,.35);padding-left:0}
  .num{font-size:76px;line-height:.85;width:fit-content;padding-right:18px}
  .svc p{margin-top:18px;font-size:15px}
  .svc .pillx{margin-top:22px;min-height:44px}
  .stack{display:none}
  /* two ways, the studio, the final call and the footer: one column each, 44px rows for the footer links */
  .bandD{padding:80px 0}
  .ways{grid-template-columns:1fr;gap:16px;margin-top:36px}
  .way{padding:28px 22px 26px}
  .way h3{font-size:34px}
  .way .ctab{flex-wrap:wrap;gap:12px 16px;margin-top:24px}
  .secS{padding:90px 0 80px}
  .studio-grid{grid-template-columns:1fr;gap:36px;margin-top:36px}
  .studio-lede{font-size:18px}
  body:not(.workpage) .footer{padding:56px 0 28px}
  body:not(.workpage) .foot-top{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:32px}
  body:not(.workpage) .foot-bottom{flex-direction:column;align-items:flex-start;gap:4px}
  body:not(.workpage) .foot-mail,body:not(.workpage) .socials a{display:inline-flex;align-items:center;min-height:44px}
  body:not(.workpage) .socials{gap:24px}
}

/* ===== HORIZON 9 (chrome-trial branch): the one recipe. Per-line vertical chrome, violet + blue beneath the horizon, same rim on every control. ===== */
:root{--text:#F7F8FA; --pur:#B9A8FF; --purhi:#C9CDD8; --purlo:#3A3752; --vio:#B9A8FF; --blu:#C5D3F5;
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#F3F4F8 18%,#CED3DD 42%,#A9AFBC 56%,#D8D0F8 72%,#C7BCF4 88%,#C0B1FF 100%);   /* his order 2026-09-19 later: white at the top, grey chromium through the middle, purple at the bottom of every line; the blue tail is gone. 2026-09-20 later, "10% less": every stop pulled a tenth of the way to white (the purple sits at ~65% tint now) */
  --sweep:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  --rim:conic-gradient(from 210deg,#E6E6E6,#A797E6 18%,rgba(191,196,208,.45) 38%,#E6E6E6 52%,#B1BEDD 70%,rgba(191,196,208,.45) 86%,#E6E6E6)} /* SHINE 90 (his call 2026-09-20, "too shiny and out there and bright, maybe 10% less"): every rim stop, glass fill, inner highlight, sheen and glow on the controls sits at 90% of the round-10 values */
@keyframes sweep{to{background-position:250% 0,0 0}}
.secW h2,.bandD h2,.secS h2,.svc h3,.statement,.cr-line{background-image:var(--chrome);background-size:100% 1lh;background-repeat:repeat-y;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.dispB .grad,.dispB em{background-image:var(--catch-band),var(--chrome);background-size:260% 100%,100% 1lh;background-position:130% 0,0 0;background-repeat:no-repeat,repeat-y;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}   /* ROUND FIVE, STEP 7: the 14 s looping sweep is gone; the first layer is THE CATCH BAND, parked off the left until the film starts (rules at the foot of the file) */
.num{background-image:var(--sweep),var(--chrome);background-size:250% 100%,100% 100%;background-position:-150% 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:sweep 14s linear -6s infinite}
.secW h2 em,.bandD h2 em,.secS h2 em,.svc h3 em,.cr-line b{background:none;-webkit-text-fill-color:inherit;color:inherit}
.dispB,.secW h2,.bandD h2,.secS h2,.svc h3,.num{filter:drop-shadow(0 0 .6px rgba(255,255,255,.5)) drop-shadow(0 12px 24px rgba(0,0,0,.55))}
.work-lede,.th-lede,.shelf-head .credit,.film figcaption,.book figcaption{color:rgba(244,245,248,.8)}
.final-lede{color:rgba(255,255,255,.86)}
.ui-btn .dot,.uib .dot,.film .frame i,.strip i b,.gtyping i,.tab-nav a::before{background:#FFFFFF;box-shadow:0 0 0 1.5px rgba(255,255,255,.7),0 0 10px #fff,0 0 18px var(--vio),0 0 32px rgba(185,168,255,.7)}
.tab{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(185,168,255,.35);filter:drop-shadow(0 1px 0 rgba(255,255,255,.5)) drop-shadow(1px 0 0 rgba(197,211,245,.3)) drop-shadow(-1px 0 0 rgba(185,168,255,.3)) drop-shadow(0 18px 34px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(185,168,255,.3))}
.tab.pill{border:1.5px solid transparent;background:radial-gradient(120% 140% at 30% 0%,rgba(185,168,255,.14),transparent 60%) padding-box,linear-gradient(180deg,#24252C,#0A0A0D) padding-box,var(--rim) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 10px 24px -12px rgba(255,255,255,.22),inset 0 -1px 0 rgba(185,168,255,.35)}
.tab.pill .tab-nav a{color:#F7F8FA;font-weight:400}
.uib,.ui-btn,.gbar{isolation:isolate;will-change:transform}
.uib:hover{translate:none}
.uib::before,.ui-btn::before,.gbar::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.uib,.ui-btn{background:radial-gradient(120% 140% at 30% 0%,rgba(185,168,255,.14),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.045) 40%,rgba(0,0,0,.2)),linear-gradient(180deg,#30323B,#0F1014);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.63),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 10px 24px -12px rgba(255,255,255,.25),0 0 0 .5px rgba(255,255,255,.09),0 18px 40px -16px rgba(0,0,0,.9),0 0 24px -4px rgba(197,211,245,.36),0 12px 32px -6px rgba(185,168,255,.36)}
.uib::after,.ui-btn::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 48%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.2) 46%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.2) 54%,transparent 65%);background-size:100% 100%,260% 100%;background-position:0 0,130% 0;transition:background-position 1.2s var(--ease)}
.uib:hover::after,.ui-btn:hover::after{background-position:0 0,-60% 0}
.gbar .ui-btn.up,.gchips .ui-btn.go{background:linear-gradient(180deg,#E6E6E6,#C1C5CD 55%,#DEDFE1);box-shadow:0 0 24px -4px rgba(197,211,245,.5),0 10px 28px -8px rgba(185,168,255,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.gchips .ui-btn.go:hover{background:linear-gradient(180deg,#E6E6E6,#D2D4DA)}
.gchips .ui-btn.on{box-shadow:0 0 0 1px var(--blu),0 0 24px rgba(185,168,255,.5),inset 0 1px 0 rgba(255,255,255,.63)}
.gbar{background:radial-gradient(120% 140% at 30% 0%,rgba(185,168,255,.13),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.045));border-color:transparent;-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 10px 24px -12px rgba(255,255,255,.18),0 0 0 .5px rgba(255,255,255,.09),0 24px 60px rgba(0,0,0,.5),0 0 32px -6px rgba(197,211,245,.36),0 14px 44px -10px rgba(185,168,255,.36)}
.way{border:1.5px solid transparent;background:radial-gradient(120% 100% at 20% 0%,rgba(185,168,255,.12),transparent 55%) padding-box,linear-gradient(180deg,rgba(26,27,33,.98),rgba(10,10,13,.98)) padding-box,var(--rim) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 10px 24px -12px rgba(255,255,255,.16),0 30px 60px -30px rgba(0,0,0,.8),0 0 40px -10px rgba(185,168,255,.22)}
#ways{background:radial-gradient(50% 60% at 50% 30%,rgba(185,168,255,.10),transparent 60%),radial-gradient(40% 50% at 90% 90%,rgba(197,211,245,.08),transparent 60%)}
.pillx{color:#F2F3F7;border-color:rgba(185,168,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 18px rgba(185,168,255,.22)}
.thumb.on .f{box-shadow:0 0 0 1.5px var(--blu),0 0 26px rgba(185,168,255,.55)}
.book:hover .c,.book .c:focus-visible{box-shadow:0 0 0 1px rgba(255,255,255,.35),0 30px 60px rgba(0,0,0,.8),0 0 30px rgba(197,211,245,.22),0 0 60px -10px rgba(185,168,255,.38)}
.secD{background:linear-gradient(180deg,#000 0,rgba(0,0,0,0) 560px),radial-gradient(60% 60% at 82% 10%,rgba(197,211,245,.16),transparent 60%),radial-gradient(50% 50% at 6% 90%,rgba(185,168,255,.18),transparent 60%)}
.secS{background:radial-gradient(45% 60% at 88% 30%,rgba(197,211,245,.14),transparent 60%),radial-gradient(40% 50% at 10% 80%,rgba(185,168,255,.14),transparent 60%)}
.spill{background:radial-gradient(60% 100% at 50% 0,rgba(185,168,255,.2),transparent 70%)}
.final{background:radial-gradient(60% 70% at 50% 100%,rgba(185,168,255,.18),transparent 65%),radial-gradient(40% 50% at 85% 20%,rgba(197,211,245,.14),transparent 60%)}
@media (prefers-reduced-motion:reduce){.dispB .grad,.dispB em,.num,.dispB.catch .grad,.dispB.catch em,.dispB.catch{animation:none}}

/* ===== NEXIUM TRIAL + BLACK FRAME (chrome-trial, 2026-09-19 late). His Lumina clip is the hero film, in colour. The hero keeps the Conceptus
   outline in deep black: a wider gutter, a bigger radius, the two notches the same black as the frame with no hairlines, no rim on the card.
   The strip sits still on the card (the scroll morph is gone).
   FONT: KULIM PARK (OFL, free to ship) is the page sans via --font, on the hero (300 with the true 300 italic on "People Trust."), the labels and the body.
   It replaced the Nexium trial of the same night; Nexium (PERSONAL USE ONLY, masyafistudio.com) was removed from the repo before dev shipped, the OTF stays in his Downloads. ===== */
@font-face{font-family:"Kulim Park";src:url(fonts/kulim-park-275.woff2) format("woff2");font-weight:275;font-style:normal;font-display:swap}
@font-face{font-family:"Kulim Park";src:url(fonts/kulim-park-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Kulim Park";src:url(fonts/kulim-park-300-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Kulim Park";src:url(fonts/kulim-park-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Kulim Park";src:url(fonts/kulim-park-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Kulim Park";src:url(fonts/kulim-park-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Aime MX = THE TITLE FACE, his call 2026-09-19 later ("Aimee as titles and Kulim as normal text"): one Regular and one Oblique, declared 300 to 500 so the hero's light setting lands on the Regular; the Oblique stands in for the italic on "People Trust.". Bodoni keeps the section headings. */
@font-face{font-family:"Aime MX";src:url(fonts/aime-mx-400.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Aime MX";src:url(fonts/aime-mx-400-oblique.woff2) format("woff2");font-weight:300 500;font-style:italic;font-display:swap}
.tab:not(.pill){box-shadow:none;filter:drop-shadow(0 16px 30px rgba(0,0,0,.6))}
.strip{filter:drop-shadow(0 -16px 30px rgba(0,0,0,.6))}
/* the fill over the film (his ask 2026-09-19 late): a plain darker fill. A fluted-glass ribbing and a low horizon glow were tried the same night and he binned them ("I dont think it works"): never re-offer */
.dim{background:radial-gradient(115% 95% at 50% 45%,transparent 34%,rgba(0,0,0,.45) 72%,rgba(0,0,0,.86) 100%),linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.7) 100%),rgba(4,5,8,.3)}
.dispB,.secT h2{font-family:"Aime MX","Kulim Park",var(--font)}
/* the creatives bar, his ask 2026-09-19 later: hovering a mark shows the chrome gradient over it. The gradient sits in a pseudo masked by the mark's own image, over the silver mark */
.set .mark{position:relative;display:inline-flex;flex:none;isolation:isolate}
.set .mark::after{content:"";position:absolute;inset:0;background:var(--chrome);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;opacity:0;transition:opacity .3s;pointer-events:none}
/* dark badge art (the two Jurassic World marks, Hogwarts) masks by luminance, so the gradient lands on the bright lettering and the badge body stays. No blend mode anywhere: Safari blacked out hovered marks with one */
.set .mark.lum::after{-webkit-mask-source-type:luminance;mask-mode:luminance}
.set .mark:hover::after{opacity:1;transform:translate(-1px,-1.5px);filter:drop-shadow(0 0 9px rgba(199,188,244,.45))} /* the same 3D lift on a hovered mark */
.set .mark::after{transition:opacity .3s,transform .3s}
.set .mark:hover img{opacity:1}
/* his 2026-09-20 later notes: every raster mark masks by luminance (the alpha mask made Bloxburg a solid silhouette), and a small lilac glow sits behind a hovered mark */
.set .mark::before{content:"";position:absolute;inset:-34% -16%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(185,168,255,.32),rgba(185,168,255,.1) 55%,transparent 100%);opacity:0;transition:opacity .35s;pointer-events:none}
.set .mark:hover::before{opacity:1}
/* the theatre viewer's close curtain is OUR CHROME, not the concept colour, his ask 2026-09-19 later. EVERY BOX CARRIES THE WHOLE white-to-purple run on its own and flies over a BLACK viewer ground: the first cut sliced one full-screen gradient across the boxes over the same gradient, and the panels vanished into a sheet ("doesnt look properly like a curtain anymore"). The concept pages' own curtains carry the same per-box rule inline. --tint from the thumbs is no longer painted */
.viewer{background:#000}
.vw-wipe i{background:var(--chrome)}

/* ===== HERO SCALE (2026-09-20, his call: the hero at 100% on his laptop must read like his 90% view). --hs = the film cover scale over the scale
   of his 90% view (fx .865 at a 1680x978 viewport), capped at 1: every fixed size in the hero card and the island multiplies by it, so a shorter or
   narrower window shrinks the whole hero as one piece, the way page zoom did (his 1512x880 Safari window = .895). The title (988fx/10.4) and the
   rail width (988fx*.75) already follow fx. The island's open panel keeps its own size. Laptop only, the parked phone layout is untouched. ===== */
@media (min-width:641px){
.stage{--fx:max(calc(100cqw / 1920),calc(100cqh / 1080))}
.tab,.strip{--fx:max(calc((100svw - 2 * var(--gutter)) / 1920),calc(max(100svh - 2 * var(--gutter),720px) / 1080))} /* both sit outside the card in the markup, so the card size is rebuilt from the viewport: width and height less the gutters, the card min-height 720 kept */
.stage,.strip,.tab{--hs:min(1px,calc(var(--fx) / .865))} /* --fx is a length (cq px over a number), so --hs stays a length too: 1px at his 90% view or above; multiply it by plain numbers */
.hero-eyebrow{font-size:calc(11 * var(--hs))}
.dispB{margin-top:calc(16 * var(--hs))}
.chat{margin-top:calc(44 * var(--hs))}
.gbar{min-height:calc(58 * var(--hs));padding:calc(6 * var(--hs)) calc(6 * var(--hs)) calc(6 * var(--hs)) calc(22 * var(--hs));border-radius:calc(29 * var(--hs));gap:calc(8 * var(--hs))}
.gbar textarea{font-size:calc(15 * var(--hs));min-height:calc(44 * var(--hs));padding:calc(11 * var(--hs)) 0}
.gplace{font-size:calc(15 * var(--hs));left:calc(23 * var(--hs))}
.gbar .ui-btn.icon{width:calc(44 * var(--hs));height:calc(44 * var(--hs))}
.gbar .ui-btn.icon svg{width:calc(18 * var(--hs));height:calc(18 * var(--hs))}
.gchips{margin-top:calc(16 * var(--hs));gap:calc(8 * var(--hs));min-height:calc(38 * var(--hs))}
.gchips .ui-btn{--h:calc(38 * var(--hs));padding:0 calc(14 * var(--hs));border-radius:calc(12 * var(--hs));font-size:calc(13 * var(--hs))}
.chat .helper{margin-top:calc(16 * var(--hs));font-size:calc(12 * var(--hs))}
.strip{padding:calc(16 * var(--hs)) calc(44 * var(--hs)) calc(18 * var(--hs));border-radius:calc(26 * var(--hs)) calc(26 * var(--hs)) 0 0;gap:calc(34 * var(--hs));font-size:calc(10.5 * var(--hs))}
.strip i{width:calc(9 * var(--hs));height:calc(9 * var(--hs));margin-right:calc(11 * var(--hs))}   /* ROUND FIVE, HIS NOTE 2026-09-21 later: "real small shiny gradiented orbs, not big orbs" (was 16) */
.strip i b{border-radius:50%;filter:none;background:radial-gradient(circle at 34% 30%,#fff 0,rgba(255,255,255,.92) 16%,rgba(255,255,255,0) 46%),radial-gradient(circle at 72% 86%,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 38%),radial-gradient(circle at 46% 42%,#FFFFFF 0%,#E8E4FF 24%,#BFB0FF 52%,#7663DA 80%,#2E2758 100%);box-shadow:inset -.5px -1px 1.5px rgba(0,0,0,.4),inset 0 0 0 .5px rgba(255,255,255,.35),0 0 6px rgba(185,168,255,.65)} /* ROUND FIVE, HIS NOTE 2026-09-21: "cool normal orbs" in place of the mark (the mark cut from the 8000 px master, media/mark-lockup.png, sat here from 2026-09-20 and he did not think it looked the best). HIS SECOND NOTE 2026-09-21 later: "real small shiny gradiented orbs, not big orbs", so 9 hs (11 wide), and the sphere is brighter: a white specular, the body white to lilac to violet, a light rim at the foot, a dark inset shade and a tight lilac glow in the box-shadow (no filter). CSS only, crisp at any size */
.gchips .ui-btn{font-family:"Aime MX",sans-serif;font-size:calc(14.5 * var(--hs));letter-spacing:.005em} /* his note: the hero rail looked basic; the title face on the chips and the placeholder, the chrome on the placeholder, a glow on a hovered chip */
.gchips .ui-btn:hover{color:#fff;text-shadow:0 0 12px rgba(199,188,244,.7)}
.gplace{font-family:"Aime MX",sans-serif;font-size:calc(17 * var(--hs));font-weight:400;background-image:var(--chrome);background-size:100% 1lh;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;opacity:.85}
.gplace.out{opacity:0}
.tab{padding:calc(16 * var(--hs)) calc(40 * var(--hs)) calc(18 * var(--hs));border-radius:0 0 calc(26 * var(--hs)) calc(26 * var(--hs))}
.tab-lockup{height:calc(50 * var(--hs))}
.tab.pill{top:calc(14 * var(--hs));height:calc(56 * var(--hs));padding:0 calc(22 * var(--hs))}
.tab.pill .tab-lockup{height:calc(34 * var(--hs))}
.tab::before,.tab::after,.strip::before,.strip::after{width:calc(24 * var(--hs));height:calc(24 * var(--hs))}
.tab::before{left:calc(-24 * var(--hs));background:radial-gradient(circle at 0 100%,transparent calc(23.5 * var(--hs)),var(--tab) calc(24 * var(--hs)))}
.tab::after{right:calc(-24 * var(--hs));background:radial-gradient(circle at 100% 100%,transparent calc(23.5 * var(--hs)),var(--tab) calc(24 * var(--hs)))}
.strip::before{left:calc(-24 * var(--hs));background:radial-gradient(circle at 0 0,transparent calc(23.5 * var(--hs)),var(--tab) calc(24 * var(--hs)))}
.strip::after{right:calc(-24 * var(--hs));background:radial-gradient(circle at 100% 0,transparent calc(23.5 * var(--hs)),var(--tab) calc(24 * var(--hs)))}
}


/* ======================================================================================================
   THE EDITION, 2026-09-20 later (his direction, built on dev after the Codex lab at 127.0.0.1:8790):
   statement, the five films, WHAT WE MAKE (the FLORA-style stack), studio, the conversation rail, the panel,
   the launcher pill, and THE BAR (the island as a full-width liquid glass sheet once the hero has gone).
   ====================================================================================================== */
:root{--edition-text:#f4f2f7;--edition-muted:#b2adb9;--edition-line:#302d35;--edition-accent:#c5b5ec;--edition-surface:#101014;--edition-gutter:40px;--edition-space:clamp(80px,10vw,160px);--edition-ease:cubic-bezier(.22,.9,.24,1)}
html{scroll-padding-top:110px}
.edition{color:var(--edition-text)}
.edition ::selection{background:var(--edition-accent);color:#141018}
.edition .layout{max-width:1360px;margin-inline:auto;padding-inline:40px}
.edition p{text-wrap:pretty}
.edition h2{font-family:"Aime MX",sans-serif;font-size:clamp(40px,4.8vw,76px);font-weight:400;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.edition h2 em,.intro-statement em,#chatDialogTitle em{font-family:"Bodoni Moda",serif;font-weight:400;font-variation-settings:"opsz" 72;font-style:italic;letter-spacing:-.025em}
.edition .muted{color:var(--edition-muted)}
.edition :focus-visible,.chat-launcher:focus-visible{outline:2px solid var(--edition-accent);outline-offset:6px}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:44px;border:0;padding:0;background:none;color:inherit;font-family:inherit;font-size:16px;text-align:left;cursor:pointer;text-decoration:none;text-underline-offset:6px}
.text-link svg{width:24px;height:24px;flex:none;transition:transform .2s var(--edition-ease)}
.text-link.quiet{color:var(--edition-muted)}

/* the statement */
.introduction{display:grid;grid-template-columns:1.45fr 1fr;gap:9%;align-items:start;padding-block:88px 24px}
.intro-statement{font-family:"Aime MX",sans-serif;font-size:clamp(30px,3.2vw,50px);line-height:1.17;letter-spacing:-.025em}
.intro-aside{max-width:37ch;font-size:20px;line-height:1.5}
.intro-aside p+p{margin-top:24px;font-size:16px}

/* WHAT WE MAKE: the lead column holds while three crafts pass on the right; the word of the craft in view is lit */
.services{padding-block:var(--edition-space) clamp(40px,6vw,96px);border-top:1px solid var(--edition-line)}
.services-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(48px,7vw,120px);align-items:start}
.services-lead{position:sticky;top:clamp(110px,14vh,140px)}
.edition h2.services-lede{font-family:var(--font);font-size:clamp(26px,2.3vw,34px);font-weight:300;line-height:1.28;letter-spacing:-.015em;margin-top:22px;text-wrap:balance}
.services-sub{font-size:17px;line-height:1.6;color:var(--edition-muted);max-width:40ch;margin-top:18px}
.services-actions{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:22px}
.services-actions .text-link{font-size:15px}
.crafts{list-style:none;margin:clamp(40px,5vh,64px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(4px,1vh,14px)}
.craft-word{appearance:none;border:0;background:none;padding:0;cursor:pointer;text-align:left;font-family:"Aime MX",sans-serif;font-size:clamp(56px,6.6vw,104px);font-weight:400;line-height:1.04;letter-spacing:-.03em;color:rgba(244,242,247,.26);transition:color .55s var(--edition-ease)}
.craft-word:hover{color:rgba(244,242,247,.6)}
.craft-word.on,.craft-word.on:hover{color:var(--edition-text)}
.craft-cards{display:flex;flex-direction:column;gap:clamp(56px,9vh,110px)}
.craft-card{position:relative;border-radius:22px;border:1px solid var(--edition-line);background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 1.5px) 0 0/22px 22px,var(--edition-surface);padding:18px 18px 22px;opacity:.5;transition:opacity .55s var(--edition-ease)}
.craft-card.on{opacity:1}
.craft-art{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#050506}
.craft-art img,.craft-art video{width:100%;height:100%;object-fit:cover;display:block}
.craft-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:22px 8px 0}
.craft-cap h3{font-family:var(--font);font-size:21px;font-weight:400;letter-spacing:-.01em}
.craft-cap p{font-size:16px;line-height:1.55;color:var(--edition-muted);margin-top:8px;max-width:44ch}
.craft-cap .text-link{font-size:15px;white-space:nowrap}
.craft-tag{position:absolute;left:30px;top:30px;font-size:12px;letter-spacing:.03em;background:#101218d9;border-radius:4px;padding:7px 10px;color:#fff}

/* the studio */
.studio-section{display:grid;grid-template-columns:1.2fr 1fr;gap:9%;padding-block:var(--edition-space);align-items:center;border-top:1px solid var(--edition-line)}
.studio-heading>img{height:60px;width:60px;object-fit:contain;margin-bottom:30px}
.studio-copy{font-size:21px;line-height:1.5}
.studio-copy>p+p{font-size:17px;margin-top:24px}
.disciplines{display:flex;gap:24px;margin-top:35px;padding-top:22px;border-top:1px solid var(--edition-line);font-size:14px}

/* SOMETHING ON YOUR MIND: the hero's own rail, one size up, opens the same conversation */
.conversation-section{--hs:1px;--fx:1px;padding-top:70px;padding-bottom:84px;position:relative} /* 2026-09-20 later, "way too big and bulky": the heading, the rail, the button and the glow all one size down */
.conversation-section::before{content:"";position:absolute;top:0;left:var(--edition-gutter);right:var(--edition-gutter);height:1px;background:var(--edition-line)}
.conversation-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}
.conversation-heading h2{font-size:clamp(46px,5.6vw,84px);line-height:1.04;max-width:12ch}
#conversationTitle em .w:last-child>.ch:last-child{padding-right:.14em}   /* ROUND FIVE, HIS NOTE 2026-09-21 ("the ? is cut off"): the block is fit-content and ended exactly at the "?" advance, and the letter's own waiting fill stopped there too; Bodoni's italic hook reaches past it and had nothing to show through. Room on the last letter so its fill, the block's chrome and the box all cover the overhang; last in its word, so nothing else moves */
.conversation-heading>p{font-size:17px;line-height:1.6;color:var(--edition-muted)}
.footer-scene .conversation-heading>p{--sw-rgb:240 237 246;--sw-lo:.34;color:#f0edf6;text-shadow:0 1px 14px rgba(0,0,0,.85),0 0 30px rgba(0,0,0,.6)}
.footer-scene .conversation-note{color:#cfc9d8;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.conversation-entry.gbar{width:100%;min-height:66px;padding:8px 8px 8px 28px;border-radius:33px;gap:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 10px 24px -12px rgba(255,255,255,.18),0 0 0 .5px rgba(255,255,255,.09),0 18px 44px rgba(0,0,0,.45),0 0 24px -8px rgba(197,211,245,.18),0 10px 32px -12px rgba(185,168,255,.18);justify-content:space-between;cursor:pointer;color:var(--edition-text);font-family:inherit;transition:background .25s ease}
.conversation-prompt{font-family:"Aime MX",sans-serif;font-size:clamp(18px,1.7vw,24px);line-height:1.2;text-align:left;color:var(--edition-text)}
.conversation-entry .ui-btn.icon{width:48px;height:48px;flex:none;transition:transform .25s var(--edition-ease),filter .25s ease}
.conversation-entry .ui-btn.icon svg{width:20px;height:20px}
.conversation-entry:active{transform:scale(.995)}
.conversation-note{display:flex;justify-content:space-between;gap:20px;margin-top:14px;font-size:13px;color:var(--edition-muted)}

/* LET'S TALK: the island pill's glass, parked bottom right once the hero has gone */
.chat-launcher{position:fixed;right:26px;bottom:24px;z-index:50;display:flex;align-items:center;gap:10px;height:54px;padding:0 24px 0 20px;border-radius:999px;color:#F7F8FA;font-family:var(--font);font-size:15px;font-weight:400;cursor:pointer;border:1.5px solid transparent;
  background:radial-gradient(120% 140% at 30% 0%,rgba(185,168,255,.14),transparent 60%) padding-box,linear-gradient(180deg,#24252C,#0A0A0D) padding-box,var(--rim) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 10px 24px -12px rgba(255,255,255,.22),inset 0 -1px 0 rgba(185,168,255,.35),0 18px 34px rgba(0,0,0,.6),0 0 24px -6px rgba(185,168,255,.3);
  animation:launcher-in .5s var(--edition-ease)}
.chat-launcher[hidden]{display:none}
.chat-launcher svg{width:22px;height:22px}
.chat-launcher:hover{filter:brightness(1.12)}
@keyframes launcher-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* THE BAR: once the hero has gone the island is one full-width sheet of liquid glass, the lockup in a notch cut into its lower edge
   (the hero card's own notch: rounded bottom corners, concave fillets), Work and Services to its left, Studio and Let's talk to its right.
   Two layers share one silhouette: the element paints the RIM (the same conic --rim as the pill and the rail) and is masked to the full
   shape; its ::before paints the glass (blur, sheen, highlights) and is masked to the same shape eroded by --t, so the rim shows as a
   1.5 px ring along every visible edge. A concave fillet is ONE radial-gradient layer (a square minus the disc at its corner).
   2026-09-20 later: once the glass went translucent the rim fill showed THROUGH it (a lilac sheet), so the rim moved to ::after masked to
   the RING only (eroded layers destination-out, then the full silhouette source-over) and the element paints nothing; the drop-shadows
   ride the ring (a filter on the element itself would make it the backdrop root and the glass would blur nothing behind the bar). */
.tab-side{display:contents}
.tab.bar,.tab.bar::before,.tab.bar::after{
  /* THE MORPH (his 2026-09-20 later ask: the hero pill TRANSFORMS into the bar as you scroll): motion.js pins the island the moment its top
     reaches the viewport top and drives --p from 0 to 1 over the next 220 px of scroll. At 0 every value below IS the hero pill (its width is
     the lockup at 50 hs plus 80 hs of padding, its height 84 hs, corners 26 hs, ears 24 hs, solid black); at 1 it is the bar. The band grows
     out of the top edge, the notch widens, the fill turns to glass, the ring and the links fade in. --p lives on the element only. */
  --bh:calc(46px * var(--p));--nh:calc(var(--h0) + (74px - var(--h0)) * var(--p));--nw:calc(var(--w0) + (250px - var(--w0)) * var(--p));
  --rc:calc(26 * var(--hs) + (22px - 26 * var(--hs)) * var(--p));--rf:calc(24 * var(--hs) + (18px - 24 * var(--hs)) * var(--p));
  --sil:
    linear-gradient(#000,#000) 0 0/100% calc(var(--bh) - var(--t)) no-repeat,
    linear-gradient(#000,#000) 50% 0/calc(var(--nw) - 2 * var(--rc)) calc(var(--nh) - var(--t)) no-repeat,
    linear-gradient(#000,#000) 50% 0/calc(var(--nw) - 2 * var(--t)) calc(var(--nh) - var(--rc)) no-repeat,
    radial-gradient(circle,#000 calc(var(--rc) - var(--t) - .6px),transparent calc(var(--rc) - var(--t))) calc(50% - var(--nw) / 2 + var(--rc)) calc(var(--nh) - 2 * var(--rc) + var(--t))/calc(2 * (var(--rc) - var(--t))) calc(2 * (var(--rc) - var(--t))) no-repeat,
    radial-gradient(circle,#000 calc(var(--rc) - var(--t) - .6px),transparent calc(var(--rc) - var(--t))) calc(50% + var(--nw) / 2 - var(--rc)) calc(var(--nh) - 2 * var(--rc) + var(--t))/calc(2 * (var(--rc) - var(--t))) calc(2 * (var(--rc) - var(--t))) no-repeat,
    radial-gradient(circle at 0 100%,transparent calc(var(--rf) + var(--t)),#000 calc(var(--rf) + var(--t) + .6px)) calc(50% - var(--nw) / 2 + (var(--t) - var(--rf)) / 2) calc(var(--bh) - var(--t))/calc(var(--rf) + var(--t)) calc(var(--rf) + var(--t)) no-repeat,
    radial-gradient(circle at 100% 100%,transparent calc(var(--rf) + var(--t)),#000 calc(var(--rf) + var(--t) + .6px)) calc(50% + var(--nw) / 2 + (var(--rf) - var(--t)) / 2) calc(var(--bh) - var(--t))/calc(var(--rf) + var(--t)) calc(var(--rf) + var(--t)) no-repeat}
.tab.bar{--t:0px;--p:0;--w0:calc(266.72 * var(--hs));--h0:calc(84 * var(--hs));   /* on the element only (the pseudos inherit them), so the open menu's handoff can set its own p 0 size inline (motion.js) */
  position:fixed;top:0;left:0;right:0;width:auto;margin:0;height:var(--nh);padding:0;border:0;border-radius:0;
  display:grid;grid-template-columns:1fr var(--nw) 1fr;align-items:start;isolation:isolate;
  background:none;box-shadow:none;filter:none;-webkit-mask:none;mask:none}
.tab.bar::before{--t:1px;content:"";position:absolute;inset:0;width:auto;height:auto;z-index:0;opacity:1;
  /* THE MATERIAL (his 2026-09-20 note: "literally grey"): the old fill was an 84% opaque grey sheet, so nothing behind it could show. Glass is
     mostly the page behind it, blurred and saturated, with light caught on the top edge, a lens brightening along every rim, and a soft body
     tint of a few percent so the links stay readable over film. Over black it reads black with the rim; over content it refracts. */
  /* 2026-09-20 later, "more transparent": the body sits at 18% black over the blur at --p 1, the whites a few percent; at --p 0 it is the pill's solid black */
  background:radial-gradient(120% 140% at 50% 0%,rgba(185,168,255,calc(.08 * var(--p))),transparent 60%),linear-gradient(180deg,rgba(255,255,255,calc(.10 * var(--p))),rgba(255,255,255,calc(.03 * var(--p))) 42%,rgba(255,255,255,calc(.01 * var(--p))) 70%,rgba(255,255,255,calc(.035 * var(--p)))),rgba(0,0,0,calc(1 - .82 * var(--p)));
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.46 * var(--p))),inset 0 8px 18px -10px rgba(255,255,255,calc(.24 * var(--p))),inset 0 0 20px -6px rgba(255,255,255,calc(.14 * var(--p))),inset 0 -1px 0 rgba(185,168,255,calc(.35 - .1 * var(--p))),inset 0 -14px 22px -18px rgba(0,0,0,calc(.5 * var(--p)));
  -webkit-mask:var(--sil);mask:var(--sil)}
.tab.bar::after{--t:1px;content:"";display:block;position:absolute;inset:0;left:0;right:0;top:0;width:auto;height:auto;z-index:0;opacity:1;transition:none;pointer-events:none;
  /* the ring: 1 px, the conic rim held under black so the colour sits at 32% at --p 1 ("extremely subtle"), and pure black at --p 0 (the pill has no rim) */
  background:linear-gradient(rgba(0,0,0,calc(1 - .32 * var(--p))),rgba(0,0,0,calc(1 - .32 * var(--p)))),var(--rim);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.28)) drop-shadow(0 12px 28px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(185,168,255,var(--halo)));
  -webkit-mask:var(--sil),
    linear-gradient(#000,#000) 0 0/100% var(--bh) no-repeat,
    linear-gradient(#000,#000) 50% 0/calc(var(--nw) - 2 * var(--rc)) var(--nh) no-repeat,
    linear-gradient(#000,#000) 50% 0/var(--nw) calc(var(--nh) - var(--rc)) no-repeat,
    radial-gradient(circle,#000 calc(var(--rc) - .6px),transparent var(--rc)) calc(50% - var(--nw) / 2 + var(--rc)) calc(var(--nh) - 2 * var(--rc))/calc(2 * var(--rc)) calc(2 * var(--rc)) no-repeat,
    radial-gradient(circle,#000 calc(var(--rc) - .6px),transparent var(--rc)) calc(50% + var(--nw) / 2 - var(--rc)) calc(var(--nh) - 2 * var(--rc))/calc(2 * var(--rc)) calc(2 * var(--rc)) no-repeat,
    radial-gradient(circle at 0 100%,transparent var(--rf),#000 calc(var(--rf) + .6px)) calc(50% - var(--nw) / 2 - var(--rf) / 2) var(--bh)/var(--rf) var(--rf) no-repeat,
    radial-gradient(circle at 100% 100%,transparent var(--rf),#000 calc(var(--rf) + .6px)) calc(50% + var(--nw) / 2 + var(--rf) / 2) var(--bh)/var(--rf) var(--rf) no-repeat;
  -webkit-mask-composite:destination-out,destination-out,destination-out,destination-out,destination-out,destination-out,destination-out,source-over,source-over,source-over,source-over,source-over,source-over,source-over}
.tab.bar .tab-hit{display:none}
.tab.bar .tab-brand,.tab.bar .tab-side{position:relative;z-index:1}
.tab.bar .tab-brand{grid-column:2;grid-row:1;height:var(--nh);display:grid;place-items:center;pointer-events:auto;border-radius:0 0 var(--rc) var(--rc);box-shadow:0 18px 34px rgba(0,0,0,calc(.75 * (1 - var(--p))))} /* the pill's own shadow on the film, gone once the band is up */
.tab.bar .tab-lockup{height:calc(50 * var(--hs) + (40px - 50 * var(--hs)) * var(--p))}
.tab.bar .tab-nav{display:contents}
.tab.bar .tab-side{display:flex;align-items:center;gap:4px;height:var(--bh);grid-row:1;opacity:var(--p);transform:translateY(calc(-8px * (1 - var(--p))))}
.tab.bar:not(.barset) .tab-side{pointer-events:none}
.tab.bar .tab-l{grid-column:1;justify-content:flex-end;padding-right:20px}
.tab.bar .tab-r{grid-column:3;justify-content:flex-start;padding-left:20px}
.tab.bar .tab-nav a{color:#F7F8FA;font-size:14px;padding:7px 12px}

/* the panel: one conversation, in the hero or in here, wearing the hero's rim and glass */
/* ---------- HUMO, STEP 4 (2026-09-21 later): THE STAGE (F1, his "for sure"). #chatDialog IS the full-screen layer. It is shown NON-MODAL
   (dialog.show() in app.js, never showModal) so it stays in the normal stacking order at z 55: the island (z 60, fixed in its bar state)
   keeps sitting on top of it, as he asked ("keeping the pill on top"). app.js locks the scroll, sets `inert` on main, the footer scene
   and the launcher while it is open, and closes it on Esc, the round button, or a click on an island link. The film of the section you
   came from plays SUPER BLURRED behind (a second <video> on the same blob under a CSS blur, oversized so the blur's soft edge is clipped),
   under a dark veil. The grid: the chat column 720 left of centre, the glass brief card 320 on the right, 40 between, centred; the top
   clears the bar. The card: Humo's big orb (150, step 4b) at its head with "Humo" under it, the rows that tick as the brief fills,
   the meter, "Send to the studio" (asleep until name, email and the project are in), "We reply within two working days". */
#chatDialog{--hs:1px;--fx:1px;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;z-index:55;
  color:#f4f2f7;font-family:var(--font);background:transparent;overflow:hidden;overscroll-behavior:contain}
#chatDialog:not([open]){display:none}
#chatDialog[open]{display:block}
/* HUMO, STEP 5 (2026-09-21 later): THE OPENING, per door. The layer itself is transparent so the page shows under the film as it fades up
   (from the hero bar the copy is folding under it). The blurred film + veil fade in (.6 s), the card slides in from the right (.7 s), the
   round close fades after. From the LAUNCHER and the FOOTER BAR the chat column rises and fades; from the HERO BAR it does not: app.js
   FLIPs the whole rail (thread, chips, bar, foot) from its hero seat to its stage seat with GSAP Flip, so the bar you were typing in is
   the bar you land on. Close: a .26 s fade of the layer (.closing), then the chat goes home. Reduced motion: none of it. */
#chatDialog[open] .stage-back{animation:stage-in .6s var(--edition-ease) both}
#chatDialog[open] .stage-brief{animation:card-in .7s var(--edition-ease) both}
#chatDialog[open]:not([data-door="hero"]) .stage-chat{animation:rise-in .6s var(--edition-ease) both}
#chatDialog[open] #chatClose{animation:stage-in .4s .25s ease both}
#chatDialog.closing .stage-back,#chatDialog.closing .stage-grid,#chatDialog.closing #chatClose{animation:stage-out .26s ease both}
@keyframes stage-in{from{opacity:0}to{opacity:1}}
@keyframes stage-out{from{opacity:1}to{opacity:0}}
@keyframes card-in{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes rise-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.stage-back{position:absolute;inset:0;overflow:hidden;background:#000}
.stage-film{position:absolute;left:-96px;top:-96px;width:calc(100% + 192px);height:calc(100% + 192px);object-fit:cover;filter:blur(48px) brightness(.65);transform:translateZ(0);background:#000}
.stage-veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 30%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.85) 100%),linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 30%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.45))}
.stage-grid{position:absolute;inset:0;display:grid;grid-template-columns:720px 320px;gap:40px;justify-content:center;align-items:stretch;padding:100px 32px 28px;min-height:0}
.stage-chat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;min-width:0}
#chatDialog .chat{width:100%;margin:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;max-height:100%}
#chatDialog .gthread{flex:0 1 auto;min-height:0;max-height:none;overflow-y:auto;opacity:1;margin-bottom:22px;padding:4px 10px 4px 0;transition:none;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
#chatDialog .gthread:empty{display:none}
.stage-brief{position:relative;align-self:start;max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:20px 22px 16px;border:1.5px solid transparent;border-radius:28px;
  /* HIS NOTE 2026-09-21 later: the card wears the chat bar's liquid glass (the .gbar recipe: the white wash, the 30 px saturated blur, the top-lit rim) */
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 46%,rgba(255,255,255,.035)) padding-box,linear-gradient(180deg,rgba(255,255,255,.7),rgba(197,211,245,.28) 40%,rgba(185,168,255,.3)) border-box;
  -webkit-backdrop-filter:blur(30px) saturate(2) brightness(1.04);backdrop-filter:blur(30px) saturate(2) brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 18px 44px rgba(0,0,0,.42);scrollbar-width:thin;scrollbar-color:#57515f transparent}
.hero.inflow #gchips{display:none}   /* his note: no conversation in the hero after a close; the step chips wait on the stage */
.brief-head{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:10px}
#chatDialogTitle{font-family:"Aime MX",sans-serif;font-size:30px;font-weight:400;letter-spacing:-.02em;line-height:1;margin:4px 0 0}
.brief-sub{margin:-4px 0 0;font-size:12.5px;line-height:1.4;letter-spacing:.01em;color:#b2adb9;text-align:center}   /* HUMO step 6: the line under the name */
.brief-rows{width:100%;display:flex;flex-direction:column}
.brief-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:6px 0;font-size:13.5px;line-height:1.4;border-top:1px solid rgba(255,255,255,.07)}
.brief-row:first-child{border-top:0}
.brief-row .k{color:rgba(255,255,255,.42);flex:0 0 auto;display:flex;align-items:center;gap:9px;transition:color .3s ease}
.brief-row .k::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid rgba(255,255,255,.35);flex:none;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.brief-row.on .k{color:rgba(255,255,255,.7)}
.brief-row.on .k::before{background:#fff;border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)}
.brief-row .v{text-align:right;min-width:0;overflow-wrap:anywhere;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.brief-meter{width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.1);margin:10px 0 10px;overflow:hidden}
.brief-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#C0B1FF,#fff);border-radius:2px;transition:width .5s var(--edition-ease)}
.stage-brief .ui-btn.block{height:auto;min-height:44px;padding:10px 12px;white-space:normal}
.stage-brief .alt-link{margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.45)}
.stage-brief .alt-link:hover{color:#fff}
.brief-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:#b2adb9;text-align:center}
#chatClose{position:absolute;top:88px;right:32px;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;color:#f4f2f7;cursor:pointer;border:1.5px solid transparent;
  background:radial-gradient(120% 140% at 30% 0%,rgba(185,168,255,.14),transparent 60%) padding-box,linear-gradient(180deg,#24252C,#0A0A0D) padding-box,var(--rim) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(185,168,255,.35),0 18px 34px rgba(0,0,0,.6);transition:transform .25s var(--edition-ease),filter .2s ease}
#chatClose:hover{filter:brightness(1.18);transform:scale(1.06)}
#chatClose svg{width:20px;height:20px}
@media(max-width:1140px){.stage-grid{grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding-inline:28px}}
@media(max-width:1023px){
  .stage-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:18px;padding:96px 20px 24px}
  .stage-brief{order:-1;align-self:stretch;flex-direction:row;justify-content:flex-start;gap:14px;padding:10px 16px;border-radius:999px;overflow:visible;max-height:none}
  .brief-head{flex-direction:row;gap:12px;margin:0}
  .stage-brief .humo{width:44px!important;height:44px!important}
  #chatDialogTitle{font-size:22px;margin:0}
  .brief-sub{display:none}
  .brief-rows,.brief-meter,#briefSend,#briefMail,.brief-note{display:none}
  #chatClose{top:26px;right:20px;width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){#chatDialog[open] .stage-back,#chatDialog[open] .stage-brief,#chatDialog[open]:not([data-door="hero"]) .stage-chat,#chatDialog[open] #chatClose,#chatDialog.closing .stage-back,#chatDialog.closing .stage-grid,#chatDialog.closing #chatClose{animation:none}.brief-meter i,.brief-row .k,.brief-row .k::before,#chatClose{transition:none}}
#chatDialog .gmsg{font-size:15px;line-height:1.65;font-weight:300}
#chatDialog .gmsg.bot{text-shadow:none}
#chatDialog .gbar textarea{min-width:0;font-size:16px}
#chatDialog .gchips{justify-content:flex-start;gap:8px}
#chatDialog .helper{color:#b2adb9;font-size:12px;line-height:1.6}
#chatDialog .gsum{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
#chatDialog .gsum .r{gap:20px;font-size:14px}
#chatDialog .gsum .r span:first-child{color:#b2adb9}
#chatDialog .gsum .r span:last-child{min-width:0}
#chatDialog .gsum .ui-btn{height:auto;min-height:48px;padding:12px;white-space:normal}
#chatDialog button:focus-visible{outline:2px solid #d8caf5;outline-offset:4px}
#chatDialog .gfiles{max-width:100%}
#chatDialog .gfile{max-width:100%;overflow-wrap:anywhere}

@media(hover:hover) and (pointer:fine){.text-link:hover{text-decoration:underline}.text-link:hover svg{transform:translateX(4px)}.conversation-entry:hover .ui-btn.icon{transform:translateX(3px)}.conversation-entry:hover .ui-btn::after{background-position:0 0,-60% 0}}
@media(max-width:1000px){.introduction{gap:45px;grid-template-columns:1.2fr 1fr}.intro-aside{font-size:18px}.services-grid{grid-template-columns:1fr;gap:40px}.services-lead{position:static}.crafts{flex-direction:row;flex-wrap:wrap;gap:6px 28px}.craft-word{font-size:clamp(40px,7vw,64px)}.craft-cards{gap:36px}.craft-card{opacity:1}.studio-section{gap:45px}.studio-copy{font-size:18px}}
@media(max-width:640px){:root{--edition-gutter:24px;--edition-space:84px}.edition h2{font-size:41px}.introduction{grid-template-columns:1fr;gap:26px;padding-block:20px 62px}.intro-statement{font-size:34px}.intro-aside{max-width:100%;font-size:18px}.intro-aside p+p{margin-top:15px}.intro-aside p+p br{display:none}.services{padding-block:64px 24px}.edition h2.services-lede{font-size:24px}.craft-card{padding:12px 12px 16px;border-radius:16px}.craft-cap{grid-template-columns:1fr;gap:12px;padding:16px 4px 0}.craft-tag{left:20px;top:20px;font-size:11px}.film-control{font-size:11px;padding-inline:12px}.studio-section{grid-template-columns:1fr;gap:30px;padding-block:72px}.studio-heading>img{height:46px;width:46px;margin-bottom:22px}.studio-copy{font-size:18px}.studio-copy>p+p{font-size:16px}.disciplines{margin-top:25px}.conversation-section{padding-top:45px;padding-bottom:50px}.conversation-heading{display:block;margin-bottom:30px}.conversation-heading h2{font-size:56px}.conversation-heading>p{font-size:16px;margin-top:24px}.conversation-entry.gbar{min-height:72px;padding:10px 10px 10px 22px;gap:14px;border-radius:36px}.conversation-prompt{font-size:20px}.conversation-entry .ui-btn.icon{width:50px;height:50px}.conversation-entry .ui-btn.icon svg{width:20px;height:20px}.conversation-note{font-size:12px}.conversation-note>span:last-child{display:none}.chat-launcher{right:16px;bottom:16px;padding-inline:18px;height:48px}.tab.bar{--nw:220px;--bh:48px;--nh:80px}.tab.bar .tab-lockup{height:36px}.tab.bar .tab-nav a{font-size:13px;padding:6px 8px}.tab.bar .tab-l{padding-right:8px}.tab.bar .tab-r{padding-left:8px}#chatDialog{padding:24px 16px;max-height:calc(100dvh - 24px);width:calc(100vw - 24px);border-radius:18px}#chatClose{top:-4px;right:-2px}#chatDialog .gthread{max-height:40dvh}#chatDialog .gmsg{max-width:95%}}
@media(prefers-reduced-motion:reduce){.edition *,.edition *::before,.edition *::after{animation:none!important;transition:none!important}.chat-launcher,.tab.bar,#chatDialog[open]{animation:none}#chat .gtyping::before,#chat .gtyping i,#chat .gmsg,#chat .gsum{animation:none}}

/* ======================================================================================================
   2026-09-20 later, HIS FOUR YESES ("to see how it is"): THE STAGE (the five-film teaser and What we make merged into one), THE LIGHT PANEL
   (the studio section on a silver-to-lilac interval with the proof numbers), THE FOOTER SCENE (the conversation section and the footer as one
   closing scene on a still, revealed from beneath the page). The old .secW / .services / .craft-* rules above stay unused on purpose.
   ====================================================================================================== */
/* THE STAGE: the head scrolls by, then the panel holds for a viewport while a spacer scrolls five steps under it */
.stage-section{--step:52vh;position:relative;padding-top:var(--edition-space);border-top:1px solid var(--edition-line)}
.stage-anchor{display:block;width:0;height:0}
.stage-head{max-width:820px}
.stage-lede{font-size:18px;line-height:1.55;color:var(--edition-muted);margin-top:22px;max-width:56ch}
.stage-pin{position:sticky;top:0;height:100svh;box-sizing:border-box;padding-top:74px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
.stage-space{height:calc(5 * var(--step))}
.worlds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(2px,.6vh,10px)}
.world-word{appearance:none;border:0;background:none;padding:0;cursor:pointer;text-align:left;font-family:"Aime MX",sans-serif;font-size:clamp(38px,4.4vw,66px);font-weight:400;line-height:1.08;letter-spacing:-.03em;color:rgba(244,242,247,.24);transition:color .55s var(--edition-ease);display:flex;align-items:baseline;gap:18px}
.world-word:hover{color:rgba(244,242,247,.6)}
.world-word.on,.world-word.on:hover{color:var(--edition-text)}
.world-tag{font-family:var(--font);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--edition-muted);opacity:0;transform:translateX(-6px);transition:opacity .45s var(--edition-ease),transform .45s var(--edition-ease)}
.world-word.on .world-tag{opacity:1;transform:none}
.stage-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#050506;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -30px rgba(0,0,0,.8)}
.scene{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s var(--edition-ease);pointer-events:none}
.scene.on{opacity:1;pointer-events:auto}
.scene img,.scene video{width:100%;height:100%;object-fit:cover;display:block}
.stage-cap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 6px 0}
.stage-note{font-size:14px;color:var(--edition-muted)}
.stage-cap .text-link{font-size:15px;white-space:nowrap}
/* THE BACKDROP (his 2026-09-20 later ask, "to see how it will look"): the lit world's still, pre-blurred to 480 px (media/work/blur, ffmpeg gblur 28), full-bleed behind the pin under a veil, so the stage never sits on plain black; it fades in once the pin has locked at the top (.locked, motion.js) and out again as the section lets go */
.stage-pin{isolation:isolate}
.stage-bg{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;overflow:hidden;pointer-events:none}
.stage-bg img{position:absolute;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;opacity:0;filter:blur(34px) saturate(1.2);transition:opacity .9s var(--edition-ease)}
.stage-section.locked .stage-bg img.on{opacity:.72}
.stage-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.3) 35%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.78) 100%)}
/* THE SWEEP (his 2026-09-20 later ask, hugeinc.com's reading effect on the world words): motion.js splits each word into letters and drives --k (read, 0 to 1) and --f (the front, 0 to 1) per letter from the stage progress. Read letters are lit, the front wears the chrome with a small glow, the rest wait dim. */
/* ... and EVERYWHERE (his call, same day: "that effect should be the core element of the whole website"): any [data-sweep] block reads in the same way as it climbs the viewport. One rule set for every letter, the colours as tokens: --sw-rgb the read colour, --sw-lo the waiting alpha, --sw-front the front's gradient, --sw-glow its glow. The front pseudo exists only while lit (.lit) so a page of letters stays light. */
.ch{position:relative;--sw-base:rgb(var(--sw-rgb,244 242 247) / var(--sw-lo,.24));
  color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  /* THE READ STATE IS THE CHROME (his 2026-09-20 later note, "after the scroll the gradient is now white"): the letter's own fill is the page
     gradient at --k over the waiting colour, so a read line settles into the chrome the site had before the sweep, never flat white. The FRONT
     below is still a separate glyph copy and must stay one. */
  background-image:linear-gradient(180deg,rgb(255 255 255/var(--k,0)) 0%,rgb(243 244 248/var(--k,0)) 18%,rgb(206 211 221/var(--k,0)) 42%,rgb(169 175 188/var(--k,0)) 56%,rgb(216 208 248/var(--k,0)) 72%,rgb(199 188 244/var(--k,0)) 88%,rgb(192 177 255/var(--k,0)) 100%),linear-gradient(var(--sw-base),var(--sw-base))}
.studio-panel .ch{background-image:linear-gradient(180deg,rgb(59 51 85/var(--k,0)) 0%,rgb(34 30 43/var(--k,0)) 55%,rgb(34 30 43/var(--k,0)) 100%),linear-gradient(var(--sw-base),var(--sw-base))}
/* THE FRONT IS A COPY OF THE GLYPH (his 2026-09-20 later ruling, "it was perfect how it was before"): the pseudo re-draws the letter in the chrome a hair off the base glyph, and that offset IS the 3D look he loves. Never flatten it into a single clipped layer. The pseudo keeps the words' 1.08 line-height everywhere so paragraphs carry the same offset as the words, not half a paragraph leading. */
.ch.lit::before{content:attr(data-c);position:absolute;inset:0;line-height:1.08;transform:translate(var(--sw-ox,0),var(--sw-oy,0));background-image:var(--sw-front,var(--chrome));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;opacity:var(--f,0);filter:drop-shadow(0 0 var(--sw-blur,7px) var(--sw-glow,rgba(199,188,244,.55)));pointer-events:none}
.world-word{--sw-lo:.24;--sw-ox:-1.5px;--sw-oy:-2.5px;--sw-blur:11px;--sw-glow:rgba(199,188,244,.72)} /* his 2026-09-20 later note: the same effect, slightly more pronounced on the stage words only */
.world-word:hover{--sw-lo:.6}
.world-word .ww{display:inline;min-width:0}
/* THE HOVER COPY: the same recipe as a swept letter, on a whole word. A hovered link wears the chrome over a glyph copy sat a hair high, so it reads 3D like the rest of the site. */
.grad-def{position:absolute;width:0;height:0;overflow:hidden}
.g3{position:relative;display:inline-block}
.g3::after{content:attr(data-c);position:absolute;inset:0;line-height:inherit;transform:translate(-1px,-1.5px);background-image:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;opacity:0;filter:drop-shadow(0 0 9px rgba(199,188,244,.6));transition:opacity .28s ease;pointer-events:none}
a:hover>.g3::after,button:hover>.g3::after,a:focus-visible>.g3::after,button:focus-visible>.g3::after{opacity:1}
[data-sweep]{--sw-lo:.3}
.cr-line[data-sweep]{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}   /* the letters carry the chrome now, not the line */
.cr-line[data-sweep] b{--sw-rgb:217 221 230}
.muted[data-sweep],.stage-lede[data-sweep]{--sw-rgb:178 173 185}   /* round five: the lounge copy no longer takes this re-dim (his "hard to read") */
.studio-panel [data-sweep]{--sw-rgb:34 30 43;--sw-lo:.22;--sw-front:linear-gradient(180deg,#9A8CE6 0%,#6A58C4 55%,#33294F 100%);--sw-glow:rgba(143,127,224,.4)}
.studio-panel .muted[data-sweep]{--sw-rgb:90 85 102}

/* THE LIGHT PANEL: the studio section on a silver-to-lilac interval, the arcs of the Ventures panel on its left edge, three cubes top right, dark type, the proof numbers along its foot. No gold. */
.studio-section{display:block;border-top:0;padding-block:clamp(48px,6vw,88px) var(--edition-space)}
.studio-section.layout{max-width:none;padding-inline:0} /* his 2026-09-20 later note: the panel covers side to side and keeps its corners */
/* COMPACT (his 2026-09-20 later note, "not some big bulky piece"): one row of heading, copy and the disciplines, the proof row under it, the mark in the arc gutter */
.studio-panel{--sg:clamp(80px,11vw,180px);--st:clamp(26px,2.8vw,40px);position:relative;overflow:hidden;isolation:isolate;border-radius:0;padding:var(--st) clamp(40px,5vw,72px) clamp(24px,2.6vw,36px) var(--sg);color:#15131c;background:linear-gradient(115deg,#FFFFFF 0%,#F1F0F9 42%,#D6D0F3 100%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto;column-gap:clamp(28px,4vw,64px);align-items:start;box-shadow:0 60px 120px -60px rgba(185,168,255,.35)}
.studio-arcs{position:absolute;left:0;top:0;height:100%;width:calc(var(--sg) - 28px);color:#1c1826;opacity:.5;z-index:-1;pointer-events:none}
.studio-panel .studio-heading{position:relative;align-self:stretch;padding-bottom:56px}
.studio-sign{position:absolute;left:0;bottom:-8px;display:flex;align-items:center;gap:13px} /* anchored to the heading cell's foot, so the mark and the sign-off sit just above the proof line whatever the copy wraps to */
.studio-panel .studio-mark{position:static;width:32px;height:32px;margin:0;object-fit:contain;filter:brightness(0);opacity:.92} /* cut from the master at 680 px, so it is sharp at 2x (the old .studio-heading>img rule at 656 still bids 60 px and a 30 px margin, hence the specificity) */
.sign-off{display:block;width:246.9px;height:44.85px;stroke:#221e2b;opacity:.8;transform:translate(-2.8px,-1.85px)} /* his "signature type font, like a sign off", now THE PEN (round five, step 6): an inline svg of the real Mrs Saint Delafield outlines (source/signature/), sized as the 46 px text was (975 units = 44.85 px) and shifted so its ink lands where the text's ink sat in his Safari (measured: ink 54 px right of the mark's left edge, centre 2.5 px above the mark's centre); motion.js writes it */ /* his 2026-09-20 later note: the mark under the heading, just above the line */
.studio-panel .studio-heading h2{font-size:clamp(30px,2.75vw,42px);line-height:1.08}
.studio-panel .studio-copy{font-size:16.5px;font-weight:400;line-height:1.55;letter-spacing:-.004em;color:#221e2b;max-width:44ch;padding-top:4px} /* his note: 15 px light read like a word processor on the light ground; 400 at 16.5 carries the same elegance as the dark sections */
.studio-panel .studio-copy>p+p{font-size:15px;font-weight:300;margin-top:12px}
.studio-panel .disciplines{display:flex;flex-direction:column;gap:12px;margin:0;padding:4px 0 0 clamp(20px,2vw,32px);border-top:0;border-left:1px solid rgba(21,19,28,.16);font-size:15px;align-self:stretch} /* the arcs live in the left gutter only (his 2026-09-20 note: the 50+ against the lines); the svg clips them at the gutter's edge, the type starts past it */
.studio-cubes{position:absolute;right:26px;top:26px;display:grid;grid-template-columns:repeat(2,14px);gap:3px}
.studio-cubes i{display:block;width:14px;height:14px;border-radius:2px;background:#15131c}
.studio-cubes i:nth-child(2){background:#B9A8FF}
.studio-cubes i:nth-child(3){grid-column:2}
.studio-panel .muted,.studio-panel .disciplines{color:#5a5566}
.studio-panel .disciplines{border-top-color:rgba(21,19,28,.16)}
.studio-panel ::selection{background:#15131c;color:#fff}
.proof{grid-column:1/-1;list-style:none;margin:16px 0 0;padding:clamp(18px,2vw,26px) 0 0;border-top:1px solid rgba(21,19,28,.16);display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.proof b{display:block;font-family:"Aime MX",sans-serif;font-weight:400;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.03em;line-height:1}
.proof span{display:block;margin-top:7px;font-size:14.5px;line-height:1.45;color:#5a5566;max-width:30ch}

/* THE FOOTER SCENE: the page (main) rides above it; the scene sits sticky at the viewport bottom and is uncovered as the page scrolls off */
main{position:relative;z-index:1;background:#000}
.footer-scene{position:sticky;bottom:0;z-index:0;min-height:86svh;display:grid;grid-template-rows:1fr auto;isolation:isolate;overflow:hidden;background:#000;color:var(--edition-text)}
.scene-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* the veil and a vignette like the hero's (his note: the aside sat unreadable over the neon sign, and the scene wanted to be darker at the edges) */
.scene-veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(118% 92% at 50% 42%,transparent 26%,rgba(0,0,0,.44) 68%,rgba(0,0,0,.9) 100%),linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.5) 100%),rgba(5,5,8,.18)}
.footer-scene .conversation-section{align-self:center;width:100%;padding-block:clamp(38px,6vh,76px)}
.footer-scene .conversation-section::before{display:none}
/* THE LOUNGE (his 2026-09-20 later footer, from his concept frame): his film behind the conversation, the band under it pitch black with our own stuff on one row */
.footer-scene .footer,.workpage .footer{padding:0;color:#fff;background:#000;border-top:0;box-shadow:none}
.footer-scene .footer .wrap,.workpage .footer .wrap{padding-block:26px 18px}
.footer-scene .foot-top,.workpage .foot-top{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:40px;margin-bottom:18px}
.footer-scene .foot-nav,.workpage .foot-nav{justify-self:center;gap:36px;font-size:16px}
.footer-scene .socials,.workpage .socials{gap:12px}
.footer-scene .socials a,.workpage .socials a{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:background .2s ease,border-color .2s ease}
.footer-scene .socials a:hover,.workpage .socials a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.footer-scene .socials svg,.workpage .socials svg{width:16px;height:16px;display:block}
.footer-scene .foot-line,.workpage .foot-line{margin:0;max-width:none;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.footer-scene .foot-bottom,.workpage .foot-bottom{padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.foot-nav{display:flex;gap:26px;align-items:center;font-size:15px}
.foot-nav a,.foot-talk{color:#fff;text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.foot-nav a:hover,.foot-talk:hover{color:#fff}
.footer-scene .foot-bottom,.workpage .foot-bottom{border-top-color:rgba(255,255,255,.14)}

/* ==========================================================================================================================================
   HIS EYE, ROUND TWO (2026-09-20 later, on `edition`). In his order: the bar that broke on scroll, the marks that never matched the lockup,
   the 3D that stopped doubling, the signature, capitals, the glass, the gradients, the tags, the lounge, the button, and an alignment pass.
   ========================================================================================================================================== */

/* 1. THE BAR CANNOT BE RESIZED BY ANYTHING (his "when you scroll down it breaks"): GSAP Flip pins a recorded geometry with min/max-width and
   min/max-height. When the open menu's Flip was killed mid-flight the bar kept max-width:520px and the whole header packed into the left 520 px
   of the screen for the rest of the session. motion.js clears those props now; this is the belt to that brace, because an author !important
   outranks the inline style a live Flip writes. */
.tab.bar{min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important}

/* 2. THE GLASS (his "still not liquid glass enough, remove the white line on the top of the outline and the white glow"): both whites are gone.
   The material now reads as glass the way Apple's does, from the blur and the saturation rather than from a drawn edge: a deeper blur (a bigger
   surface reads as thicker), more saturation so whatever is behind it colours the sheet, a body tint of 14% black for legibility, and the only
   light on the edges is the site's own lilac at a few percent. The pill at --p 0 keeps its catch; it fades out the moment the band grows. */
.tab.bar::before{
  background:radial-gradient(120% 150% at 50% 0%,rgba(185,168,255,calc(.07 * var(--p))),transparent 64%),
    linear-gradient(180deg,rgba(197,211,245,calc(.055 * var(--p))) 0%,rgba(255,255,255,calc(.014 * var(--p))) 40%,rgba(0,0,0,calc(.05 * var(--p))) 74%,rgba(185,168,255,calc(.045 * var(--p))) 100%),
    rgba(0,0,0,calc(1 - .86 * var(--p)));
  -webkit-backdrop-filter:blur(30px) saturate(2) brightness(1.03);backdrop-filter:blur(30px) saturate(2) brightness(1.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0),
    inset 0 -1px 0 rgba(185,168,255,calc(.35 - .19 * var(--p))),
    inset 0 -20px 28px -22px rgba(0,0,0,calc(.55 * var(--p)))}
.tab.bar::after{filter:drop-shadow(0 14px 30px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(185,168,255,var(--halo)))}

/* 3. THE NAV IN CAPITALS (his ask). Caps on glass want a tracking bump and a touch more weight to stay legible over film: Apple calls it
   vibrancy, and it is the reason the words read at 12.5 px in caps as clearly as they did at 14 in sentence case. */
.tab.bar .tab-nav a{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:7px 14px}

/* 4. THE HEADER HOVER, QUIETER (his "a bit too much on the header, it looks fine on the footer"): the glowing dot and the lit pill behind the
   word are gone; the word keeps the offset copy, with the bloom pulled right back. The lift is the effect, not the glow. */
.tab.bar .tab-nav a::before{display:none}
.tab.bar .tab-nav a:hover,.tab.bar .tab-nav a:focus-visible{background:none}
.tab.bar .g3::after{transform:translate(-.8px,-1.3px);filter:drop-shadow(0 0 3px rgba(199,188,244,.22))}

/* 5. THE DOUBLE, EVERYWHERE HE ASKED FOR IT (his "I wanted them to have that original effect"): the stage words' offset is the house value now,
   so a hovered nav word, a footer link and a marquee mark all lift the same way the swept letters do. */
/* a nav word is a fifth the size of a stage word, so the stage's own -1.5 / -2.5 px reads as a smear on it rather than as depth. These are the
   values that give a 13 to 16 px word the same CHARACTER at its own scale: a clear second glyph, not a blur. */
.g3::after{transform:translate(-1px,-1.6px);filter:drop-shadow(0 0 6px rgba(199,188,244,.4))}
.set .mark:hover::after{transform:translate(-1.5px,-2.5px);filter:drop-shadow(0 0 7px rgba(199,188,244,.42))}

/* 6. NOTHING IS CLIPPED (his "text is cut off, not just here, in a lot of places"): a letter painted with background-clip:text only shows where
   its background box reaches, and an inline box stops at the font's content area. Aime MX ascenders and the Bodoni italic descenders hang past
   it, so their tips were painted with nothing and vanished. Vertical padding on an inline box grows the paint area without touching the line
   box, so the layout is identical and the glyph is whole. */
/* AND NOTHING IS CLIPPED SIDEWAYS EITHER (his "the ? is cut off"): a Bodoni italic question mark leans past its own advance width, and
   background-clip:text stops at the box, so its tip was painted with nothing. The padding grows the paint area, the negative margin gives the
   space straight back, so the line sets exactly as before. */
.ch{padding-block:.32em;padding-inline:.07em;margin-inline:-.07em}
/* AND THE FRONT COPY LANDS ON THE BASE GLYPH, WHATEVER THE FACE. The copy used to be a block box pinned to the top of the letter with a fixed
   1.08 line-height, so its baseline came out at (lineheight - the font's own content area) / 2 off the base one: a hair on Aime MX, which is
   the 3D he loves, but a third of a line on Bodoni Moda, whose metrics are far taller. Invisible while the front was a passing band; a second
   ghost line the moment a read letter keeps it. Centring the copy's line box on the letter's box cancels that term exactly, for any face and
   any line-height, and --sw-ox / --sw-oy stay the offset that makes the 3D. */
.ch.lit::before{top:50%;bottom:auto;height:1.08em;padding-block:.32em;padding-inline:.07em;box-sizing:content-box;
  transform:translate(var(--sw-ox,0),calc(-50% + var(--sw-oy,0)))}

/* 7. THE GRADIENT 8% STRONGER BELOW THE HERO (his ask, "can barely notice it, but still super subtle"): only the read state of a swept letter
   moves; the hero's own chrome (--chrome) is untouched, exactly as he asked. */
.ch{background-image:linear-gradient(180deg,rgb(255 255 255/var(--k,0)) 0%,rgb(246 247 251/var(--k,0)) 18%,rgb(190 196 208/var(--k,0)) 42%,rgb(155 161 174/var(--k,0)) 56%,rgb(208 199 246/var(--k,0)) 72%,rgb(188 175 242/var(--k,0)) 88%,rgb(180 163 255/var(--k,0)) 100%),linear-gradient(var(--sw-base),var(--sw-base))}
.studio-panel .ch{background-image:linear-gradient(180deg,rgb(63 54 92/var(--k,0)) 0%,rgb(28 25 36/var(--k,0)) 55%,rgb(28 25 36/var(--k,0)) 100%),linear-gradient(var(--sw-base),var(--sw-base))}

/* 8. THE STAGE TAGS IN ONE COLUMN (his "why is website all the way there compared to others"): the tag used to sit wherever the word ended, so
   it wandered 277 px between Visuals and LUMEN // INDEX. The word and the tag are two grid cells now, the tag flush to the column's right edge,
   so it lands on the same line whichever world is lit. The words sit one size down so the longest of them stays on one line. */
.world-word{display:grid;grid-template-columns:minmax(0,7.7em) max-content;align-items:baseline;gap:20px;width:100%;font-size:clamp(34px,3.7vw,56px);justify-content:start}
.world-word .world-tag{justify-self:start}
.world-word .ww{display:block;white-space:nowrap}

/* 9. THE SIGN-OFF (his "signature needs to be aligned properly next to the circle, looks too off"): a script face carries its weight on the
   x-height, well under the em box, so setting it on the same baseline as a 32 px mark left it floating high with a hole under it. The two are
   optically centred on each other now and the gap is closed to the mark's own stroke rhythm. */
.studio-sign{gap:11px;align-items:center}

/* 10. THE SEND BUTTON (his "the middle, not the outer ring, should have more of our signature gradient"): the face takes the chrome on hover and
   the rim steps back, instead of the ring flaring and the middle staying flat white. */
.conversation-entry .conversation-send{transition:transform .25s var(--edition-ease),background .3s ease}
.conversation-entry:hover .conversation-send,.conversation-entry:focus-visible .conversation-send{
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F2F7 30%,#DAD6F4 66%,#C2B2F5 100%);
  box-shadow:0 0 22px -6px rgba(185,168,255,.5),inset 0 1px 0 rgba(255,255,255,.95)}
.conversation-entry:hover .conversation-send::before,.conversation-entry:focus-visible .conversation-send::before{opacity:.45}

/* 11. THE LOUNGE (his "this is covering the Humanate Creative logo section there"): the aside sat straight on top of the neon sign on the back
   wall. The copy moves under the heading on the left, over the dark of the room where it reads, and the sign is left as the right-hand half of
   the composition, which is what his concept frame does. */
/* HIS CONCEPT FRAME (2026-09-20 later, "structure this better like the concept"): the heading sits LOW on the left, the copy stays on the
   RIGHT beside it, and the whole block drops into the lower half of the room so the copy passes UNDER the neon sign instead of across it.
   Stacking them both on the left was my read of "it's covering the logo" and it was the wrong fix. */
.footer-scene .conversation-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(40px,6vw,96px);margin-bottom:30px}
.footer-scene .conversation-heading>p{max-width:34ch;text-align:left;padding-bottom:6px}
.footer-scene .conversation-section{align-self:end;padding-block:0 clamp(26px,4vh,54px)}

/* 12. THE ALIGNMENT PASS. The studio panel is full-bleed, but its type used to start 50 px inside the page's own column, so the eye caught a
   stagger scrolling out of the stage into the panel. Its inner column is the page column now (the arcs keep the bleed to its left), and its
   right edge lands on the page's right edge too. The footer row is centred on the page rather than inside its own track. */
.studio-panel{--sg:max(40px,calc((100vw - 1360px) / 2 + 40px));padding-right:max(40px,calc((100vw - 1360px) / 2 + 40px))}
@media (max-width:1240px){.studio-arcs{display:none}}
.footer-scene .foot-top,.workpage .foot-top{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:26px;margin-bottom:18px}
.footer-scene .foot-nav,.workpage .foot-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);justify-self:auto}
.footer-scene .socials,.workpage .socials{margin-left:auto}
.footer-scene .foot-line,.workpage .foot-line{margin:0}

/* 13. THE RESTING FRONT IS AN OFFSET, NOT A BLOOM (his "it looked double"). The stage words carry their own offset; a heading's default was
   0 / 0, so its front sat exactly on the base glyph and the letter just glowed instead of doubling. Display type takes the stage's offset. */
h2[data-sweep],.intro-statement[data-sweep]{--sw-ox:-1.5px;--sw-oy:-2.5px;--sw-blur:8px}
.studio-panel h2[data-sweep]{--sw-ox:0;--sw-oy:0}   /* dark ink on the light panel: no front at rest, an offset copy there reads as a print fault */

/* 14. THE ENTRY IS GLASS TOO (his "this is frosted glass, what if it's apple liquid glass"): the same material as the bar. A deeper blur and
   more saturation so the room behind it colours the sheet, the hard white rim traded for the site's lilac at the edges, and the light caught
   along the top instead of drawn as a line. */
.conversation-entry.gbar{
  background:radial-gradient(120% 200% at 50% 0%,rgba(185,168,255,.10),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 46%,rgba(0,0,0,.06));
  -webkit-backdrop-filter:blur(26px) saturate(2) brightness(1.04);backdrop-filter:blur(26px) saturate(2) brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(185,168,255,.26),0 20px 46px rgba(0,0,0,.5),0 0 28px -12px rgba(197,211,245,.3)}
.conversation-entry.gbar:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(185,168,255,.34),0 22px 50px rgba(0,0,0,.52),0 0 34px -10px rgba(197,211,245,.38)}

/* 15. THE WORK PAGE WEARS THE SAME FOOTER (his OCD pass): the Theatre had the old text-link footer while the landing had the black band, so
   the two pages did not line up at all. Same markup, same band, same column. The page's own design is the next job; this is only its foot. */
.workpage .footer{padding-bottom:0}
.workpage .footer .wrap{padding-block:26px 18px}
@media(max-width:860px){
  .footer-scene .foot-top,.workpage .foot-top{flex-wrap:wrap;row-gap:18px}
  .footer-scene .foot-nav,.workpage .foot-nav{position:static;transform:none;order:3;width:100%;justify-content:flex-start;flex-wrap:wrap}
}

/* ==========================================================================================================================================
   HIS EYE, ROUND THREE (2026-09-20 later). Several of these reverse round two on his word; where they do, the note says so.
   ========================================================================================================================================== */

/* 1. THE BAR'S LINKS GO BACK TO SENTENCE CASE (his "go back to normal, not high caps anymore, looks odd"). Round two's caps are out. */
.tab.bar .tab-nav a{font-size:14px;letter-spacing:normal;text-transform:none;font-weight:400;padding:7px 12px}

/* 2. THE NAV HOVER IS CLEAN (his "the hover over these texts in footer and header are ugly as hell"): the offset glyph copy is gone from every
   nav word. A hovered link simply takes the chrome, nothing doubled, nothing blooming. The copy stays where he likes it: the stage. */
.g3::after{display:none}
.g3{transition:none}
a:hover>.g3,button:hover>.g3,a:focus-visible>.g3,button:focus-visible>.g3{
  background-image:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* 3. THE BAR, AS TRANSPARENT AS IT GOES (his "the bottom line is still too visible, I'm really not digging it, make it as transparent as
   possible"): the lilac line along the bottom edge and the shadow under it are gone, the body tint is down to 7% black, the blur is deeper to
   carry the legibility the tint used to, and the rim's colour is down from 32% to 18%. */
.tab.bar::before{
  background:linear-gradient(180deg,rgba(255,255,255,calc(.055 * var(--p))),rgba(255,255,255,calc(.012 * var(--p))) 45%,rgba(255,255,255,calc(.022 * var(--p)))),
    rgba(0,0,0,calc(1 - .93 * var(--p) * (1 - var(--gk,0)) - .07 * var(--p) * var(--gk,0)));
  -webkit-backdrop-filter:blur(34px) saturate(1.9) brightness(1.02);backdrop-filter:blur(34px) saturate(1.9) brightness(1.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0)}
.tab.bar::after{background:linear-gradient(rgba(0,0,0,calc(1 - .18 * var(--p))),rgba(0,0,0,calc(1 - .18 * var(--p)))),var(--rim);
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.42)) drop-shadow(0 0 16px rgba(185,168,255,calc(var(--halo) * .7)))}

/* 4. AND IT IS PROPER BLACK AT THE FOOT OF THE PAGE (his "the header has a gradient on top ... I want it completely black"): the light studio
   panel passing under the glass was the colour he was seeing. --gk rides from glass to solid black as the footer band comes up. */
@property --gk{syntax:"<number>";inherits:true;initial-value:0}
.tab.bar{--gk:0;transition:--gk .45s var(--edition-ease)}
.tab.bar.plain{--gk:1}
.tab.bar.plain::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:#000}

/* 5. THE NOTCH IS WIDER (his Conceptus reference: "I like the width of the pill, makes ours look a bit meh"). Ours keeps its black and its
   fillets; it just gets the air around the lockup that theirs has. Both ends of the morph move together, so the shape never jumps. */
.tab{padding:calc(16 * var(--hs)) calc(60 * var(--hs)) calc(18 * var(--hs))}
.tab.bar{--w0:calc(306.72 * var(--hs))}   /* the start width on the element only: the pseudos inherit it, so the open menu's handoff can write its own (his 2026-09-21 later note: declared on the pseudos too, the mask kept the small pill's width while the height followed the open notch, a snap) */
.tab.bar,.tab.bar::before,.tab.bar::after{--nw:calc(var(--w0) + (330px - var(--w0)) * var(--p))}

/* 6. THE LINKS COME OUT OF THE PILL (his "it just jumps into the correct placement, it should glide ... and as you scroll back up get tighter
   and disappear into the pill"). Two things were wrong. The jump was a class collision, fixed in motion.js. The glide is this: each side rides
   out from behind the notch and settles into place across the same --p the band grows on, and runs backwards on the way up. */
.tab.bar .tab-side{opacity:clamp(0,calc((var(--p) - .12) / .5),1)}
.tab.bar .tab-l{transform:translate(calc(118px * (1 - var(--p))),calc(-9px * (1 - var(--p)))) scale(calc(.93 + .07 * var(--p)));transform-origin:100% 50%}
.tab.bar .tab-r{transform:translate(calc(-118px * (1 - var(--p))),calc(-9px * (1 - var(--p)))) scale(calc(.93 + .07 * var(--p)));transform-origin:0 50%}

/* 7. THE HERO RAIL IS GLASS (his "make it really liquid glassy here", the entry and the three chips): the same material as the bar, so the room
   behind them is what colours them. The chips lose their drawn lilac ring for a rim that only catches light at the top. */
.gbar{background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 46%,rgba(255,255,255,.035));
  -webkit-backdrop-filter:blur(30px) saturate(2) brightness(1.04);backdrop-filter:blur(30px) saturate(2) brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 18px 44px rgba(0,0,0,.42)}
.gbar::before{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(197,211,245,.28) 40%,rgba(185,168,255,.3))}
.gchips .ui-btn{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 50%,rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(22px) saturate(1.9);backdrop-filter:blur(22px) saturate(1.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 26px rgba(0,0,0,.35)}
.gchips .ui-btn::before{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(197,211,245,.2) 45%,rgba(185,168,255,.22))}
.gchips .ui-btn::after{display:none}
.gchips .ui-btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 50%,rgba(255,255,255,.06))}
.gbar .ui-btn.icon:not(.up){background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8)}   /* the send button stays the solid silver one: it is the action */

/* 8. THE SOCIAL TILES AND THE LAUNCHER, SAME MATERIAL (his "liquid glass too", and the launcher to match) */
.footer-scene .socials a,.workpage .socials a{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
  border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.footer-scene .socials a:hover,.workpage .socials a:hover{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border-color:rgba(255,255,255,.3)}
.chat-launcher{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 50%,rgba(255,255,255,.045));
  -webkit-backdrop-filter:blur(26px) saturate(2);backdrop-filter:blur(26px) saturate(2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 38px rgba(0,0,0,.45);
  transition:transform .35s var(--edition-ease),filter .2s ease}
.chat-launcher.lifted{transform:translateY(-96px)}   /* his "the chat in bottom right is gone?": it stays, it just steps up off the copyright line */

/* 9. THE DISCIPLINES STRIP, BIGGER (his ask) */
@media (min-width:641px){
  .strip{padding:calc(20 * var(--hs)) calc(52 * var(--hs)) calc(22 * var(--hs));gap:calc(40 * var(--hs));font-size:calc(12.5 * var(--hs));letter-spacing:.2em}
  .strip i{width:calc(11 * var(--hs));height:calc(11 * var(--hs));margin-right:calc(13 * var(--hs))}
}

/* 10. THE SIGN-OFF (his "a tiny bit lower and bigger, like I said", and the block sized right against the heading) */
.studio-sign{gap:14px}
.studio-panel .studio-mark{width:40px;height:40px}
.studio-panel .studio-heading{padding-bottom:64px}

/* 11. THE SEND BUTTON HOLDS STILL (his "the circle moves in the animation, it should not move at all, stay in place while showing the gradient") */
.conversation-entry:hover .ui-btn.icon,.conversation-entry:focus-visible .ui-btn.icon{transform:none}

/* ==========================================================================================================================================
   HIS SPEC FOR THE EFFECT (2026-09-20 later, reference_ghosted_reading_wipe): it is a GHOSTED READING WIPE, not a 3D effect. Two painted
   layers per letter, the base glyph and a DUPLICATE of it in the chrome sitting slightly out of register, faded in by the travelling front.
   THE DOUBLING IS THE LOOK. No depth, no shadow, no perspective, no emboss, and the copy is never centred exactly on the base glyph.
   ========================================================================================================================================== */

/* 1. THE GLOW IS GONE. A drop-shadow behind a chrome glyph on black is exactly the emboss he called out ("am I tripping or there's a 3D effect
   on the text"). The duplicate carries the effect on its own. */
.ch.lit::before{filter:none}
.world-word,h2[data-sweep],.intro-statement[data-sweep],.studio-panel h2[data-sweep]{--sw-blur:0;--sw-glow:transparent}
.world-word{--sw-lo:.24}   /* the stage keeps its dimmer waiting state; its offset comes from the per-letter jitter like everywhere else */

/* 2. THE SAME WIPE ON A HOVERED NAV WORD (his "it's that same effect I wanted also over the header hover over buttons and footer"): the word's
   duplicate in the chrome, out of register, no glow. Round three's plain colour swap is out. */
.g3::after{display:block;transform:translate(-.4px,-1.6px);filter:none;opacity:0;transition:opacity .22s ease}
a:hover>.g3,button:hover>.g3,a:focus-visible>.g3,button:focus-visible>.g3{background-image:none;-webkit-text-fill-color:currentColor;color:inherit}
a:hover>.g3::after,button:hover>.g3::after,a:focus-visible>.g3::after,button:focus-visible>.g3::after{opacity:1}
.tab.bar .g3::after{transform:translate(-.3px,-1.3px)}

/* ==========================================================================================================================================
   HIS EYE, ROUND FOUR (2026-09-20 later). A double you can actually see, the gradient 5% up everywhere below the hero and 5% down inside it,
   a flare at the front of every swept line, real answers to the pointer on the marks, the nav words and the launcher, and the expanded pill
   handing its four links to the bar. Silver, lilac and blue only: no gold anywhere in here.
   ========================================================================================================================================== */

:root{
  /* the same recipe as --chrome, 18% further from white. This is the HOVER gradient: his "maybe we just increase the gradient colour instead
     of that 3d effect, i do not want that 3d effect" on the header and footer words. */
  --chrome-hot:linear-gradient(180deg,#FFFFFF 0%,#EFF1F6 18%,#C4CAD6 42%,#9AA1B0 56%,#D2C8F7 72%,#BCAFF3 88%,#B2A0FF 100%);
  /* and the same gradient for a 14 px nav word, which is a different problem: at that size the grey band in the middle is most of the letter,
     so the hot chrome made a hovered word DIMMER than its neighbours, which reads as a fault rather than a highlight. This one keeps the
     luminance and spends the range on the lilac instead, so the word gains colour without losing light. */
  --chrome-nav:linear-gradient(180deg,#FFFFFF 0%,#F7F8FB 20%,#DDE1EB 44%,#D0D5E3 56%,#E0D9FA 70%,#D0C3FA 86%,#C4AFFF 100%);
  --chrome-line:linear-gradient(90deg,#F3F4F8 0%,#C7BCF4 36%,#B9A8FF 54%,#C5D3F5 76%,#F3F4F8 100%);   /* his note 2026-09-21 later: the hover underline read white (the nav chrome runs top to bottom, a 1.5 px line only shows its first stop); this lays the brand's lilac and blue along the line */
  /* and 5% TOWARDS white, for the hero title alone: his "the gradient here reduce it just 5%, separate to the rest I mentioned above" */
  --chrome-hero:linear-gradient(180deg,#FFFFFF 0%,#F4F5F8 18%,#D0D5DF 42%,#ADB3BF 56%,#DAD2F8 72%,#CABFF5 88%,#C3B5FF 100%);
}

/* 1. THE HERO TITLE, 5% QUIETER. The hero alone; everything under it goes the other way in rule 3. */
.dispB .grad,.dispB em{background-image:var(--catch-band),var(--chrome-hero)}

/* 2. THE DOUBLE YOU CAN SEE (his "you have still not done the ghosted reading wipe properly ... should really see it to add beautiful
   effect"). motion.js writes the per-letter hash as plain numbers now and --sw-om turns them into ems at the scale each block needs, so the
   offset keeps its character (small, mostly vertical, uneven letter to letter) and simply gets big enough to read as two passes of the word. */
.ch{--sw-om:1.5;--sw-ox:calc(var(--sw-nx,-.005) * var(--sw-om) * var(--sw-eg,1) * 1em);--sw-oy:calc(var(--sw-ny,-.034) * var(--sw-om) * var(--sw-eg,1) * 1em)}
h2[data-sweep] .ch,.intro-statement[data-sweep] .ch,.cr-line[data-sweep] .ch{--sw-om:1.8}
.world-word .ch{--sw-om:2}   /* the six worlds, the block he pointed at */
.studio-panel .ch,.studio-panel h2[data-sweep] .ch{--sw-om:1.2}   /* dark ink on a light panel doubles far louder than chrome on black, and the panel is the one he called beautiful: it moves least */
/* AND A BIGGER ECHO IS A FAINTER ONE (his "needs to look more elegant and beautiful"). Two glyphs painted at the same strength read as a
   misprint; an echo rings OUT. The copy's opacity falls as its offset grows, so the closing words of a block throw a wide, soft ghost while
   the body of the text keeps a tight, near-solid one. */
.ch.lit::before{opacity:calc(var(--f,0) * .92 / (1 + (var(--sw-eg,1) - 1) * .55))}   /* the falloff is gentler than a straight inverse, so a 4x echo still carries at about a third strength instead of disappearing */
.world-word{--sw-lo:.26}   /* the waiting words a hair brighter than his .24; with the resting double gone, the read state is a clean chrome glyph and the contrast does the work */

/* 3. THE FLARE, AND THE READ CHROME 5% MORE PROMINENT (his "make our beautiful gradient 5% more prominent" below the hero, and "maybe it
   highlights the gradient a LOT stronger before it lands on the actual colour it is"). Two changes in one rule:
   - a third layer rides --fw, the TRAVELLING front on its own, in near-white lilac. The letter flashes as the wave passes and falls back into
     the read chrome behind it: the purple-into-black he loves on the light panel, done the other way up on the dark ground.
   - every stop of the read gradient is pulled 5% further from white.
   The light studio panel keeps its own recipe untouched (its rule is more specific), because that one is already exactly what he asked to keep. */
.ch{--fa:calc(var(--fw,0) * var(--fm,.86));
  background-image:
    linear-gradient(180deg,rgb(255 255 255/var(--fa)) 0%,rgb(230 227 255/var(--fa)) 20%,rgb(188 169 255/var(--fa)) 46%,rgb(155 123 255/var(--fa)) 70%,rgb(126 87 255/var(--fa)) 100%),
    linear-gradient(180deg,rgb(255 255 255/var(--k,0)) 0%,rgb(245 246 251/var(--k,0)) 18%,rgb(187 193 206/var(--k,0)) 42%,rgb(150 156 170/var(--k,0)) 56%,rgb(206 196 246/var(--k,0)) 72%,rgb(185 171 241/var(--k,0)) 88%,rgb(176 158 255/var(--k,0)) 100%),
    linear-gradient(var(--sw-base),var(--sw-base))}
h2[data-sweep] .ch,.intro-statement[data-sweep] .ch,.world-word .ch{--fm:1}   /* HIS LAST NOTE: "can you make the gradients still a lot stronger before it goes to its actual text colour, just the scroll colour gradient pop, would like it to pop a lot more", and the same on EVERY big title: the stage words, Six worlds. Three crafts., Good businesses deserve. The flare is a full chrome ramp now, white at the top through steel to a deep violet at the foot, so a letter being read is unmistakably a different, stronger thing than the letter it settles into. The light panel keeps its own recipe: there he asked for the echo only. */

/* 4. AND THE GHOST COPY WEARS THE HOT GRADIENT. The duplicate glyph is the whole look, so it is the layer that gains the most from a stronger
   chrome. The panel sets its own --sw-front and is not touched. */
.ch.lit::before{background-image:var(--sw-front,var(--chrome-hot))}

/* 5. THE NAV WORDS (his "the hover over the texts are still ugly as hell on the header and footer. Maybe we just increase the gradient colour
   instead of that 3d effect, i do not want that 3d effect ... I meant just the after effect on the ghosted part"). The doubling stays where he
   wants it, on the scroll. A hovered word keeps perfect register and simply changes colour into the hot gradient, which is why it can fade. */
.g3::after{display:block;transform:none;filter:none;opacity:0;transition:opacity .25s ease;background-image:var(--chrome-nav)}
.tab.bar .g3::after{transform:none}

/* 6. THE MARKS IN THEIR OWN COLOURS (his round four, later: "all of them actually, instead of the effects we had been adding just make them be
   their original logo colour, actually think will be better too"). The silver house treatment goes: .corp is no longer flattened to white and
   .game is no longer greyscaled, and the chrome overlay and its glow go with them. His earlier ask on this row, that a hovered mark should
   clearly DO something, is answered by a lift and the art coming up to full strength instead.
   THE ONE EXCEPTION IS ARTWORK THAT IS BLACK. The BBC, Roblox and Jam City files are drawn in black or near-black, which is their light
   ground lockup; painted as-is they would be invisible on this row. Those three keep the white rendering, which is the version each of those
   brands publishes for a dark ground. */
.set img{transition:filter .38s ease,opacity .3s ease}
.set .mark::after,.set .mark::before{display:none}   /* the chrome overlay and its lilac glow go: the colour IS the hover now */
.set .mark{transition:transform .38s var(--edition-ease)}
.set .mark:hover{transform:perspective(700px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) scale(1.08)}   /* ROUND FIVE, STEP 7, lift 4: the mark tilts toward the pointer (motion.js writes --rx / --ry) */
.set .mark:hover img{opacity:1}
.set .mark:hover .corp,.set .mark:hover .game{filter:none}
/* THE ONE EXCEPTION IS ARTWORK DRAWN IN BLACK. The BBC, Roblox and Jam City files are black or near-black, which is each brand's LIGHT ground
   lockup; released on hover they would simply disappear off this row. Those three keep the white rendering, which is the version each of them
   publishes for a dark ground, and answer the pointer with the lift and full strength instead. */
.set .mark:hover .ink{filter:brightness(0) invert(1)}

/* 7. THE LAUNCHER ANSWERS TOO (his "when you hover over it, it does not do any effect which it should, and the text should have the gradient
   also increase"). The lift is a variable so the footer band's 96 px step and the hover lift compose instead of cancelling each other, and the
   word itself is a .g3 now, so it takes the same hot gradient as every other nav word. */
.chat-launcher,.chat-launcher.lifted{--lift:0px;--sc:1;transform:translateY(var(--lift)) scale(var(--sc));
  transition:transform .35s var(--edition-ease),background .3s ease,box-shadow .3s ease}
.chat-launcher.lifted{--lift:-96px}
.chat-launcher svg{transition:transform .35s var(--edition-ease)}
.chat-launcher:hover,.chat-launcher:focus-visible{--sc:1.045;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07) 50%,rgba(255,255,255,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 20px 46px rgba(0,0,0,.5),0 0 34px -8px rgba(185,168,255,.55)}
.chat-launcher:hover svg,.chat-launcher:focus-visible svg{transform:scale(1.06)}

/* 8. THE EXPANDED PILL HANDS ITS LINKS TO THE BAR (his "even on the expanded it should still transition beautifully to the long pill, it's even
   easier because the 4 buttons, the 2 on each side, can actually transition and slide perfectly"). motion.js flies the same four anchors from
   the open row into the bar's two sides; while they fly the sides hold still and stay lit, so nothing blinks out and nothing fades in behind. */
/* HIS NOTE 2026-09-21 later ("terrible, it should be similar to the normal pill animation"): the open menu's handoff is the SAME --p morph as
   the small pill's, started from the open notch (motion.js writes its measured size to --w0 / --h0 and drops the Flip). The lockup stays at
   the top of the notch and shrinks in place (16 px under the edge in the open menu, 17 in the bar), the four links fade out where they sit
   (the .tab-ghost copies, gone by p .3) and the real four fade in at their bar seats from p .45, as the small pill's do. */
.tab.bar.handoff .tab-side{opacity:clamp(0,calc((var(--p) - .45) / .55),1)}
.tab.bar.handoff .tab-brand{place-items:start center;padding-top:calc(16px * (1 - var(--p)) + 17px * var(--p))}
.tab-ghost{position:absolute;left:50%;top:0;height:var(--h0);z-index:2;pointer-events:none;transform:translateX(-50%);opacity:clamp(0,calc(1 - var(--p) / .3),1)}
.tab-ghost a{position:absolute;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;font-size:15px;font-weight:400;color:#fff;white-space:nowrap;text-decoration:none}
.tab-ghost a::before{content:"";width:6px;height:6px;border-radius:50%;opacity:0}

/* 9. THE GRADIENT UNDERLINE (his round four, later: "the 4 buttons on header and footer show a gradient underline when you hover over", and
   "Enter the theatre, make the underline gradient too"). One rule for both: a 1.5 px rule in the nav gradient that draws itself in from the
   left. The plain browser underline on a text link goes with it, because two underlines is one too many. */
.g3::before,.gu::after{content:"";position:absolute;left:0;right:0;bottom:-.24em;height:1.5px;border-radius:1px;
  background-image:var(--chrome-line);opacity:0;transform:scaleX(.35);transform-origin:0 50%;pointer-events:none;
  transition:opacity .26s ease,transform .34s var(--edition-ease)}
.gu{position:relative;display:inline-block}
.gu::after{bottom:-6px}
a:hover>.g3::before,button:hover>.g3::before,a:focus-visible>.g3::before,button:focus-visible>.g3::before,
a:hover .gu::after,button:hover .gu::after,a:focus-visible .gu::after,button:focus-visible .gu::after{opacity:1;transform:none}
.text-link:hover,.text-link:focus-visible{text-decoration:none}

/* ==========================================================================================================================================
   ROUND FIVE, 1. THE TEXT SYSTEM (2026-09-20 later, his brainstorm; memory project_humanate_scroll_perf + reference_ghosted_reading_wipe).
   THE LAG WAS THE LETTERS. Measured in his real Safari: 869 letters, each its own background-clip:text box with three gradient layers, and
   every change to one letter re-rasterised every clipped letter in the same tile (worst frame 186 ms). Fix, proven there: the chrome is
   clipped ONCE per block, a letter only covers it with an opaque waiting fill that fades out at --k, and the wave's dozen lit letters carry
   the flare and the ghost as two absolutely positioned copies of the glyph. The look is unchanged: same stops, same offsets, same echo.
   THE TRAP (both engines): a block's text clip SKIPS any positioned child, so the letters are static inline-blocks (each word in a nowrap
   .w so nothing breaks mid-word) and the copies sit at the letter's static position with line-height inherited, which puts the copy's
   baseline exactly on the base glyph's. The registration offset that IS the look is then applied on top, per letter, as before.
   ========================================================================================================================================== */
/* the settled chrome, painted once per block. The old per-letter gradient ran over the letter's padded box (the font's content area plus
   .32em above and below); motion.js measures where that box sits inside a line (--sw-y0) and how tall it is (--sw-hb) and the same stops
   are laid over it, so a settled letter is the exact colour it was. --sw-read is declared on the block so the vars resolve there. */
[data-sweep],.world-word .ww{--sw-y0:0px;--sw-hb:1lh;
  --sw-read:linear-gradient(180deg,rgb(255 255 255) var(--sw-y0),rgb(245 246 251) calc(var(--sw-y0) + .18 * var(--sw-hb)),rgb(187 193 206) calc(var(--sw-y0) + .42 * var(--sw-hb)),rgb(150 156 170) calc(var(--sw-y0) + .56 * var(--sw-hb)),rgb(206 196 246) calc(var(--sw-y0) + .72 * var(--sw-hb)),rgb(185 171 241) calc(var(--sw-y0) + .88 * var(--sw-hb)),rgb(176 158 255) calc(var(--sw-y0) + var(--sw-hb)));
  background-image:var(--sw-read);background-size:100% 1lh;background-repeat:repeat-y;background-origin:padding-box;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cr-line[data-sweep]{background-image:var(--sw-read);background-size:100% 1lh;background-repeat:repeat-y;background-origin:padding-box;background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}   /* its older rule uses the background shorthand, which reset the clip */
.studio-panel [data-sweep]{--sw-read:linear-gradient(180deg,rgb(63 54 92) var(--sw-y0),rgb(28 25 36) calc(var(--sw-y0) + .55 * var(--sw-hb)),rgb(28 25 36) calc(var(--sw-y0) + var(--sw-hb)))}
/* the letters: static, no clip of their own, no padding (the block's clip already covers ascenders and the italic ?). The waiting colour
   was a translucent tint over the ground; over the block's chrome it has to be OPAQUE or the chrome would show through, so each block
   carries its tint pre-blended over its ground (--sw-wait), and the alpha is 1 - --k: the same arithmetic as before, in the other order. */
.w{white-space:nowrap}
.ch,.studio-panel .ch{position:static;display:inline-block;padding:0;margin:0;background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:rgb(var(--sw-wait,73 73 74) / calc(1 - var(--k,0)));color:transparent}   /* the panel's letters had their own dark gradient rule at higher specificity; without a clip it painted as boxes */
[data-sweep]{--sw-wait:73 73 74}                                                                    /* 244 242 247 at .3 over black */
.muted[data-sweep],.stage-lede[data-sweep]{--sw-wait:53 52 56}                                        /* 178 173 185 at .3 */
.cr-line[data-sweep] b{--sw-wait:65 66 69}                                                          /* 217 221 230 at .3 */
.footer-scene .conversation-heading>p{--sw-wait:82 81 84}                                           /* 240 237 246 at .34 */
.world-word .ww{--sw-wait:63 63 64}                                                                 /* 244 242 247 at .26 */
.world-word:hover .ww{--sw-wait:146 145 148}                                                        /* at .6 */
.studio-panel [data-sweep]{--sw-wait:194 192 203}                                                   /* 34 30 43 at .22 over the panel's silver */
.studio-panel .studio-heading [data-sweep]{--sw-wait:203 202 207}                                   /* over the whiter left of the panel */
.studio-panel .muted[data-sweep]{--sw-wait:206 204 216}                                             /* 90 85 102 at .22 */
/* the two copies of a lit glyph. Both sit at the letter's static position (inset auto), inherit its line-height so the baseline lands on the
   base glyph's, and take the old .32em / .07em of clip room as padding with a negative margin that hands the position straight back.
   The gradient is laid over the letter box the old copies used (--sw-hb tall, starting where the content area minus .32em starts), so the
   ghost wears the same slice of chrome it did. */
.ch.lit::before,.ch.lit::after{content:attr(data-c);position:absolute;inset:auto;top:auto;right:auto;bottom:auto;left:auto;width:auto;height:auto;
  line-height:inherit;white-space:pre;box-sizing:content-box;padding:.32em .12em;margin:-.32em -.12em;display:block;   /* ROUND FIVE, HIS NOTE 2026-09-21 ("the ? is cut off"): the sideways clip room was .07em, and the italic hook of a glyph like Bodoni's "?" reaches further than that past its advance; .12em now, the negative margin still hands the position back, so nothing moves */
  background-size:100% var(--sw-hb,1.72em);background-position:0 calc((1lh - var(--sw-hb,1.72em) + .64em) / 2);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;pointer-events:none;filter:none}
/* THE FLARE (round four's violet wave) rides the front alone, on the copy that sits in perfect register. It used to be the letter's own top
   gradient layer; the copy carries the same stops at the same alpha (--fa) and the same fm per block. */
/* an absolutely positioned ::after takes the static position of a block box AFTER the letter's text, which is one line below (::before
   sits before it, at the top, hence in register; measured in both engines); one line-height back up puts the flare on the glyph */
.ch.lit::after{z-index:1;opacity:1;transform:translateY(-1lh);
  background-image:linear-gradient(180deg,rgb(255 255 255/var(--fa)) 0%,rgb(230 227 255/var(--fa)) 20%,rgb(188 169 255/var(--fa)) 46%,rgb(155 123 255/var(--fa)) 70%,rgb(126 87 255/var(--fa)) 100%)}
.studio-panel .ch.lit::after{content:none}   /* the light panel never had the flare: there he asked for the echo only */
/* THE GHOST, unchanged in character: the hot chrome on a copy a hair out of register, uneven letter to letter, larger on the closing word,
   fainter as it grows. On top of the flare (z-index), exactly as the old copy sat over the old letter. */
.ch.lit::before{z-index:2;background-image:var(--sw-front,var(--chrome-hot));
  transform:translate(var(--sw-ox,0),var(--sw-oy,0));
  opacity:calc(var(--f,0) * .92 / (1 + (var(--sw-eg,1) - 1) * .55))}

/* ==========================================================================================================================================
   ROUND FIVE, 2. THE GHOST + COLOUR (his picks from the Ghost board, 2026-09-20 later: "I would use B with the D glow").
   ========================================================================================================================================== */
/* B: the closing echo a fifth bigger (--sw-egm, the slider default he saw), and the ghost LIFTS OFF as it fades, a print peeling away: it
   drifts up .028em x echo and grows 1.2% x echo between full strength and gone. The per-letter jitter, its unevenness and its mostly
   vertical direction are untouched; the larger echo stays the fainter one (egm folded into the falloff). */
.ch{--sw-egm:1.2;--sw-lift:.028;
  --sw-ox:calc(var(--sw-nx,-.005) * var(--sw-om) * var(--sw-eg,1) * var(--sw-egm,1) * 1em);
  --sw-oy:calc(var(--sw-ny,-.034) * var(--sw-om) * var(--sw-eg,1) * var(--sw-egm,1) * 1em)}
.ch.lit::before{
  transform:translate(var(--sw-ox,0),calc(var(--sw-oy,0) - (1 - var(--f,0)) * var(--sw-lift,0) * var(--sw-eg,1) * 1em));
  opacity:calc(var(--f,0) * .92 / (1 + (var(--sw-eg,1) * var(--sw-egm,1) - 1) * .55))}
/* D: a soft violet bloom that rides the FRONT ONLY and dies with it. On the flare copy (in register, painted at --fa = fw x fm) the shadow's
   own alpha is .55 / fm, so what reaches the page is .55 x fw exactly as on the board; the ghost copy blooms at half its front. Nothing
   rests: at fw 0 and f 0 both are transparent, so a settled letter is one clean chrome glyph (his round-four law, unchanged). */
.ch.lit::after{filter:drop-shadow(0 0 .14em rgb(178 160 255 / calc(.55 / var(--fm,.9))))}
.ch.lit::before{filter:drop-shadow(0 0 .1em rgb(199 188 244 / calc(var(--f,0) * .5)))}
.studio-panel .ch.lit::before{filter:none}   /* the light panel: dark ink, his favourite colours, echo changes only; a lilac halo behind ink on white would read as a smudge, my call */
/* THE COLOUR: the violet wave 5% more vivid at every purple stop, and the body flare .86 to .9 (titles and the world words stay at 1). */
.ch{--fa:calc(var(--fw,0) * var(--fm,.9))}
.ch.lit::after{background-image:linear-gradient(180deg,rgb(255 255 255/var(--fa)) 0%,rgb(230 227 255/var(--fa)) 20%,rgb(184 162 255/var(--fa)) 46%,rgb(149 113 255/var(--fa)) 70%,rgb(118 74 255/var(--fa)) 100%)}
/* ==========================================================================================================================================
   THE SMOOTHNESS PASS (2026-09-21 later, his "the whole experience must feel smoother"): THE SAME TWO COPIES, PAINTED WITHOUT LAYERS.
   Profiled in real Safari (qa/safari-perf.py, now with the scroll position and the JS time of every frame): the long frames in the
   introduction, the stage head and the lounge were paint, not script (2 to 6 ms of JS inside a 60 ms frame), and hiding [data-sweep] alone
   took p99 from 56 to 26 ms while the worlds' words, the films, the glass, the masks and the shadows moved nothing. Per lit letter the two
   copies each cost a positioned layer with a z-index stacking context, a transform, an opacity transparency layer and a drop-shadow filter
   pass, some forty letters a frame across the rows on the reading line; promoting blocks or letters to their own layers made it worse.
   Now: the FLARE takes the ::before slot (an absolutely positioned ::before lands in register at the letter's static position, so it needs
   no transform) and the GHOST takes ::after, its offset carried by margins (a box with auto insets keeps its static position and its margins
   move it), the one-line-low quirk folded into margin-top. No z-index: DOM order paints the ghost over the flare exactly as before. Both
   copies sit at opacity 1, the ghost's fade in its gradient stops (--ga), so no transparency layers. The two blooms are text-shadows on the
   base glyph, the ghost's at the ghost's offset and lift with the same f-squared alpha, the flare's in register on --fw, painted under the
   copies where the drop-shadows sat; the copies inherit none. A text-shadow radius blurs at half a drop-shadow's deviation, so the radii are
   1.5x, calibrated on crops of the intro statement and aside against the old build (halo spread and strength within a tenth, glyph pixels
   within 2%). The grow term (a 1.2% x echo scale as a ghost fades) is retired: a scale needs a transform layer and it was under a pixel on a
   fading copy. Real Safari 1285 x 823, Low Power Mode off: p99 56 to 35 ms, worst frame 76 to 47, frames over 50 from 4 to none.
   ========================================================================================================================================== */
.ch{--ga:calc(var(--f,0) * .92 / (1 + (var(--sw-eg,1) * var(--sw-egm,1) - 1) * .55));--gl:calc((1 - var(--f,0)) * var(--sw-lift,0) * var(--sw-eg,1) * 1em)}
.ch.lit::before,.ch.lit::after{z-index:auto;transform:none;opacity:1;filter:none;text-shadow:none}
.ch.lit::before{background-image:linear-gradient(180deg,rgb(255 255 255/var(--fa)) 0%,rgb(230 227 255/var(--fa)) 20%,rgb(184 162 255/var(--fa)) 46%,rgb(149 113 255/var(--fa)) 70%,rgb(118 74 255/var(--fa)) 100%)}
.ch.lit::after{background-image:linear-gradient(180deg,rgb(255 255 255/var(--ga)) 0%,rgb(239 241 246/var(--ga)) 18%,rgb(196 202 214/var(--ga)) 42%,rgb(154 161 176/var(--ga)) 56%,rgb(210 200 247/var(--ga)) 72%,rgb(188 175 243/var(--ga)) 88%,rgb(178 160 255/var(--ga)) 100%);
  margin-top:calc(-.32em + var(--sw-oy,0px) - var(--gl) - 1lh);margin-left:calc(-.12em + var(--sw-ox,0px))}
.studio-panel .ch.lit::before{content:none}   /* the light panel keeps the echo only, as before: no flare, no bloom */
.studio-panel .ch.lit::after{content:attr(data-c);background-image:linear-gradient(180deg,rgb(154 140 230/var(--ga)) 0%,rgb(106 88 196/var(--ga)) 55%,rgb(51 41 79/var(--ga)) 100%)}
.ch.lit{text-shadow:var(--sw-ox,0) calc(var(--sw-oy,0) - var(--gl)) .15em rgb(199 188 244 / calc(var(--f,0) * var(--f,0) * .46 / (1 + (var(--sw-eg,1) * var(--sw-egm,1) - 1) * .55))),0 0 .21em rgb(178 160 255 / calc(var(--fw,0) * .55))}
.studio-panel .ch.lit{text-shadow:none}

/* ==========================================================================================================================================
   ROUND FIVE, 3. THE HERO SECOND LINE = OPTION B (his pick from the People Trust board): "People Trust." in Aime MX UPRIGHT, no oblique,
   with a hair of weight from a .55 px stroke under the fill. "Designing Experiences" untouched.
   ========================================================================================================================================== */
.dispB em{font-style:normal;-webkit-text-stroke:.55px #cfd3dc;paint-order:stroke fill}

/* ==========================================================================================================================================
   ROUND FIVE, 4. HOVERS + LOUNGE (his clear tunes, no question needed).
   ========================================================================================================================================== */
/* nav words "a lot more gradient" on hover: the hover copy wears the hot chrome (--chrome-hot, the read gradient 18% further from white)
   instead of the nav gradient; the gradient underline stays as it was. Perfect register, no wipe, his round-four law. */
.g3::after{background-image:var(--chrome-hot)}
/* the footer's `in` tile: its svg fills from #chromeG; on hover (and keyboard focus) it swaps to #chromeHot, the same stops as --chrome-hot,
   declared beside chromeG in the page's hidden defs (index.html and work.html). */
.footer-scene .socials a:hover svg,.footer-scene .socials a:focus-visible svg,.workpage .socials a:hover svg,.workpage .socials a:focus-visible svg{fill:url(#chromeHot)}
/* the lounge copy was hard to read: the `.conversation-heading>p[data-sweep]` re-dim (--sw-rgb 178 173 185, and its --sw-wait twin) is
   gone from the rules above, so the copy keeps its own brighter tokens, and the veil is deeper at its centre so the chrome sits on a darker
   ground where the copy passes under the neon sign. Edges unchanged. */
.scene-veil{background:radial-gradient(118% 92% at 50% 42%,rgba(0,0,0,.26) 0%,rgba(0,0,0,.34) 26%,rgba(0,0,0,.56) 68%,rgba(0,0,0,.9) 100%),linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 42%,rgba(0,0,0,.55) 100%),rgba(5,5,8,.18)}

/* ==========================================================================================================================================
   ROUND FIVE, 5. THE PILL (his picks: Pill Handoff board = ONE MORPH, Lockup Moment board = A, the light catch, at the strength he set on the
   Six Lifts board, "the same strength on the menu lockup"). The morph itself is in motion.js (the Flip driven by the scroll's --p).
   ========================================================================================================================================== */
/* THE LINKS SIT SYMMETRIC ABOUT CREATIVE (his "pushed outward so CREATIVE sits centred"). The mark sits on the left of the lockup, so the
   wordmark's centre is 8.667% of the image's width right of the image's centre (measured from media/lockup.png: mark 0.8% to 15%, wordmark
   18.1% to 99.3%; the board's cut agrees). The row is shifted by that much (the lockup is 50 hs tall and 1800/482 wide, so 16.18 hs) and the
   two pairs hang off its centre line: a three-track grid whose outer tracks are forced equal (minmax 0) so the 60 px middle track stays
   centred whatever the pairs weigh, the left pair ending at the middle track, the right pair starting after it, each overflowing outward.
   The bar's own layout is untouched. */
.tab.open .tab-nav{display:grid;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);translate:calc(16.18 * var(--hs)) 0}
.tab.open .tab-side{display:flex;align-items:center;gap:6px}
.tab.open .tab-l{grid-column:1;justify-self:end}
.tab.open .tab-r{grid-column:3;justify-self:start}
.tab.open .tab-nav a{padding:9px 12px}
/* HIS PHONE NOTE 2 (2026-09-21 later, "the expanded header pill is so off"): the four links wrapped 3 + 1 with a divider hanging at the row's end.
   On phones the open pill is the lockup with the four in a 2 x 2 under it, each cell a 44 px tap centred in its half, no dividers. */
@media(max-width:640px){
  .tab.open .tab-nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;width:100%;translate:none;margin-top:12px}
  .tab.open .tab-side{display:contents}
  .tab.open .tab-nav a{justify-content:center;min-height:44px;padding:0 10px}
  .tab.open .tab-side a:first-child::after{display:none}
}
/* THE LIGHT CATCH ON OPEN: one band of light crosses the lockup left to right as the menu opens. An overlay masked by the lockup image itself
   (no cut needed) carries the band: transparent 26% to 74%, a white core 46% to 54%, lilac shoulders (210 200 255 / .85), drawn at 260% of
   the lockup's width and slid from fully off the left to fully off the right in 1.15 s ease-out, fading through its last fifth. motion.js
   restarts it by re-adding .catch on open and drops the class on close and on the handoff. Nothing at rest, nothing loops, no turning mark.
   The overlay's box is the image's box in the open pill (.tab-brand is a block around the image there), the only place it ever plays. */
.tab-catch{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  -webkit-mask:url(media/lockup.png) center/contain no-repeat;mask:url(media/lockup.png) center/contain no-repeat;
  background:linear-gradient(104deg,transparent 26%,rgba(210,200,255,.85) 39%,#fff 46%,#fff 54%,rgba(210,200,255,.85) 61%,transparent 74%) 130% 0/260% 100% no-repeat}
.tab-brand.catch .tab-catch{animation:tab-catch 1.15s cubic-bezier(.3,.7,.2,1) both,tab-catch-fade 1.25s ease-out both}
@keyframes tab-catch{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes tab-catch-fade{0%,78%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.tab-brand.catch .tab-catch{animation:none}}

/* ==========================================================================================================================================
   ROUND FIVE, STEP 7: THE FIVE LIFTS (his picks from the Six Lifts board, 2026-09-20 later: 1, 2, 4, 5, 6; NOT 3, no magnetic buttons).
   THE CATCH is one recipe everywhere, strength 1 (his "1"): a band drawn at 260% of the box, transparent 26% to 74%, a white core 46% to 54%,
   lilac shoulders (210 200 255 / .85), slid from fully off the left (130%) to fully off the right (-30%), the same band the menu lockup wears.
   It has to READ (his note: barely visible on the board), so it rides ON TOP of the settled chrome as the first background layer of the
   clipped block, and the block blooms 14 px lilac at .55 while the band passes. No brightness boost. Nothing loops, nothing plays at rest.
   ========================================================================================================================================== */
:root{--catch-band:linear-gradient(104deg,transparent 26%,rgba(210,200,255,.85) 39%,#fff 46%,#fff 54%,rgba(210,200,255,.85) 61%,transparent 74%)}
@keyframes catch-band{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
/* 1. THE HERO TITLE catches the light ONCE, when the film starts (motion.js adds .catch on the film's first `playing`, never before the load
   tween has settled it, or 5 s in if the film never plays, Safari Low Power Mode). 1.7 s ease-out, the second line .14 s behind, the title's
   own drop-shadow blooms lilac at 45%. The band is drawn relative to each line's own width, as on the board. */
.dispB em{width:fit-content;margin-inline:auto}
.dispB.catch .grad{animation:catch-band 1.7s cubic-bezier(.3,.7,.2,1) both}
.dispB.catch em{animation:catch-band 1.7s cubic-bezier(.3,.7,.2,1) .14s both}
.dispB.catch{animation:hero-bloom 1.9s ease-out}
@keyframes hero-bloom{0%,100%{filter:drop-shadow(0 0 .6px rgba(255,255,255,.5)) drop-shadow(0 12px 24px rgba(0,0,0,.55))}45%{filter:drop-shadow(0 0 14px rgba(199,188,244,.55)) drop-shadow(0 12px 24px rgba(0,0,0,.55))}}
/* 2. TITLES DRIFT: the three big titles (data-drift: the statement, "Six worlds.", "Independent minds.") ride a touch slower than their copy,
   a translateY of a tenth of their distance from the window's centre, written by motion.js, transform only. Promoted to a layer so the drift
   moves a rasterised title instead of repainting a clipped one every frame (three layers, nothing like the 869-letter case). */
[data-drift]{will-change:transform}
/* 4. MARKS TILT toward the pointer: the :hover transform in rule 6 above (perspective 700, rotateY to 14deg, rotateX to 12deg, the scale it
   had); motion.js writes --rx / --ry from the pointer and clears them on leave; the .38 s transition it already had eases both ways. */
/* 5. WORLDS CATCH LIGHT: a world word takes the band the moment its last letter is read (the wave has released the whole word into chrome,
   so the band crosses a lit word, not a waiting one), 1.3 s, with the same lilac bloom. motion.js adds .catch once per lighting. */
.world-word .ww{width:fit-content;background-image:var(--catch-band),var(--sw-read);background-size:260% 100%,100% 1lh;background-repeat:no-repeat,repeat-y;background-position:130% 0,0 0}
.world-word .ww.catch{animation:catch-band 1.3s cubic-bezier(.3,.7,.2,1) both,world-bloom 1.3s ease-out}
@keyframes world-bloom{0%,100%{filter:none}40%{filter:drop-shadow(0 0 14px rgba(178,160,255,.55))}}
/* 6. THE LAUNCHER WAKES ONCE: eight seconds with nothing touched (pointer, wheel, key, scroll) while it is on screen, and the glass brightens,
   lifts 3 px on top of whatever lift it has, and settles, 1.6 s. Never again on this page. launcher-in stays first in the list so re-adding
   and dropping .woke never restarts the fade the launcher plays when it appears. */
.chat-launcher.woke{animation:launcher-in .5s var(--edition-ease),launcher-wake 1.6s ease-in-out}
@keyframes launcher-wake{0%,100%{transform:translateY(var(--lift)) scale(var(--sc));filter:brightness(1)}
  35%{transform:translateY(calc(var(--lift) - 3px)) scale(var(--sc));filter:brightness(1.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 10px 24px -12px rgba(255,255,255,.34),inset 0 -1px 0 rgba(185,168,255,.5),0 20px 40px rgba(0,0,0,.6),0 0 36px -4px rgba(185,168,255,.6)}}
@media(prefers-reduced-motion:reduce){.dispB.catch .grad,.dispB.catch em,.dispB.catch,.world-word .ww.catch,.chat-launcher.woke{animation:none}[data-drift]{will-change:auto}}

/* ---------- HUMO, THE H (2026-09-21 later, his pick = board row D): the ONYX SIGNET disc every orb sits on, polished black stone with a
   sharp specular line and the rim (the board's .orb.c recipe); humo.js sizes it from data-size and paints the engraved H, the liquid chrome
   and the aurora ring on the canvas. Step 1's glass disc is gone. */
.humo{position:relative;display:block;flex:none;border-radius:50%;border:1.5px solid transparent;
  background:linear-gradient(35deg,transparent 46%,rgba(255,255,255,.07) 49%,rgba(255,255,255,.07) 51%,transparent 54%),radial-gradient(120% 120% at 30% 8%,#2A2A33,#0B0B0F 58%,#000 100%) padding-box,var(--rim) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(185,168,255,.3),inset 0 0 0 1px rgba(0,0,0,.7),0 22px 44px -20px rgba(0,0,0,.9),0 0 30px -12px rgba(185,168,255,.25)}
.humo canvas{display:block;width:100%;height:100%;border-radius:50%}

/* ---------- HUMO, STEP 2 (2026-09-21 later): THE LAUNCHER IS THE ORB ALONE (his Q6 pick). #chatLauncher keeps its id, data-chat, the
   hidden-until-the-bar, .lifted and .woke ownership in motion.js and the --lift / --sc transform; the pill's glass, text and icon are gone.
   The button is a bare 54 px round seat for the .humo disc (the rim, the chrome H, the ring painted by humo.js) and a hover tip. The wake
   keyframe's 35% box-shadow still lands on the button, round now, so the wake reads as the lilac glow brightening. */
.chat-launcher,.chat-launcher.lifted{width:54px;height:54px;padding:0;gap:0;border:0;border-radius:50%;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;
  transition:transform .35s var(--edition-ease),filter .2s ease}
.chat-launcher:hover,.chat-launcher:focus-visible{background:none;box-shadow:0 0 34px -8px rgba(185,168,255,.55)}
.chat-launcher .humo{position:absolute;inset:0}
.humo-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;font-family:var(--font);font-size:13px;font-weight:400;letter-spacing:.01em;color:#F7F8FA;
  background:rgba(10,10,13,.72);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 12px;opacity:0;pointer-events:none;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .25s ease,transform .3s var(--edition-ease)}
.chat-launcher:hover .humo-tip,.chat-launcher:focus-visible .humo-tip,.chat-launcher.woke .humo-tip{opacity:1;transform:translateY(-50%)}
@media(max-width:640px){.chat-launcher,.chat-launcher.lifted{width:54px;height:54px;padding:0}}
@media(prefers-reduced-motion:reduce){.humo-tip{transition:none}}

/* ---------- HUMO, STEP 3 (2026-09-21 later): THE STARTERS ABOVE THE BAR, tightened (his Q3 pick B: Start a project / Partner with us /
   What do you do?). #gchips now sits between the thread and the bar in the markup, so its gap moves from its top to its bottom. */
.gchips{margin:0 0 calc(16 * var(--hs))}
.gchips:empty{margin:0}

/* ---------- HUMO, STEP 2, HIS NOTE (2026-09-21 later): "definitely want something next to it so people know it's a chat function". The
   label STAYS beside the orb: "Let's chat" at rest, "Chat with Humo" on hover, focus and the wake. Two texts in one pill; humo.js measures
   each once the face is in (--w on each), and the visible one's width glides to the other's while they crossfade. */
.humo-tip{opacity:1;transform:translateY(-50%);display:flex;align-items:center}
.humo-tip>span{display:block;width:var(--w,auto);overflow:hidden;white-space:nowrap;transition:width .38s var(--edition-ease),opacity .22s ease}
.humo-tip>span>i{font-style:normal;display:block}
.humo-tip .t2{width:0;opacity:0}
.chat-launcher:hover .humo-tip,.chat-launcher:focus-visible .humo-tip,.chat-launcher.woke .humo-tip{opacity:1;transform:translateY(-50%)}
.chat-launcher:hover .humo-tip .t1,.chat-launcher:focus-visible .humo-tip .t1,.chat-launcher.woke .humo-tip .t1{width:0;opacity:0}
.chat-launcher:hover .humo-tip .t2,.chat-launcher:focus-visible .humo-tip .t2,.chat-launcher.woke .humo-tip .t2{width:var(--w,auto);opacity:1}
@media(prefers-reduced-motion:reduce){.humo-tip>span{transition:none}}

/* ---------- HIS NOTE 2026-09-21 later, "the outer gradient on this button is beautiful, it should be on every button": the round buttons' rim
   (the bar's arrow and clip, the close, the launcher) on every button. On a WIDE pill the conic rim collapsed into one flat lavender line (its
   sectors spread along the long edges: the Send to the studio pill, the chips), so wide buttons take the same palette laid along their length
   (--rim-wide, silver at the ends, lilac then blue between, the faint stops lifted so the rim holds on the light brief card). The socials squares
   in the footer only had a faint grey line; they take the rim recipe of the close button. */
:root{--rim-wide:linear-gradient(100deg,#E6E6E6,#A797E6 16%,rgba(191,196,208,.7) 34%,#E6E6E6 50%,#B1BEDD 68%,rgba(191,196,208,.7) 84%,#E6E6E6)}
.ui-btn.block::before,.gchips .ui-btn::before{background:var(--rim-wide)}
.stage-brief .ui-btn.block{box-shadow:inset 0 1px 0 rgba(255,255,255,.63),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 10px 24px -12px rgba(255,255,255,.25),0 18px 40px -16px rgba(0,0,0,.9),0 0 24px -4px rgba(197,211,245,.5),0 10px 28px -8px rgba(185,168,255,.45)}
.footer-scene .socials a,.workpage .socials a,.footer-scene .socials a:hover,.workpage .socials a:hover{border:1.5px solid transparent;
  background:radial-gradient(120% 140% at 30% 0%,rgba(185,168,255,.14),transparent 60%) padding-box,linear-gradient(180deg,#24252C,#0A0A0D) padding-box,var(--rim) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(185,168,255,.35),0 12px 24px -10px rgba(0,0,0,.6);transition:filter .2s ease,transform .25s var(--edition-ease)}
.footer-scene .socials a:hover,.workpage .socials a:hover{filter:brightness(1.18);transform:translateY(-1px)}

/* ---------- HUMO, HIS NOTE 4 (2026-09-21 later): THE LAUNCHER DOOR, "the button expands into the chat" (his idea as said). app.js flies ONE
   face between the corner and the stage: the launcher's orb hands its state (the clock, the ring's spin, the chrome level, the beat) to
   #stageFly, a 150 orb parked in the layer, which travels from the launcher's rect to the brief card's orb seat (GSAP x / y / scale) while the
   film layer is revealed as a CIRCLE from the orb's centre (a clip-path on .stage-back, its edge lit by the .stage-iris ring) and the card,
   the rail and the close rise behind it; on landing the seat orb adopts the flyer. Close = the reverse, the stage collapsing into the orb
   flying back to the corner. Under .fly the CSS entrances are off (GSAP drives them, so the close can play them backwards); the launcher
   hides while Humo is out of his corner (.away). Reduced motion never flies (the plain open and the instant close, as before). */
#chatDialog.fly .stage-back,#chatDialog.fly .stage-brief,#chatDialog.fly[open]:not([data-door="hero"]) .stage-chat,#chatDialog.fly #chatClose{animation:none}   /* the column's selector must outweigh step 5's rise-in, or the CSS animation beats the flight's inline opacity */
.stage-fly{position:absolute;left:0;top:0;z-index:4;visibility:hidden;pointer-events:none;transform-origin:50% 50%}
.stage-iris{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;display:none;opacity:0}
#chatDialog.fly .stage-iris{display:block}
.stage-iris circle,.stage-iris rect{fill:none}   /* the circles light the orb's door, the rects the bar doors (step 2) */
.stage-iris .iris-glow{stroke:rgba(185,168,255,.32);stroke-width:14px}
.stage-iris .iris-line{stroke:rgba(228,224,250,.85);stroke-width:1.5px}
#chatLauncher.away{visibility:hidden}

/* ---------- HIS NOTES 2026-09-21 later, ON THE STAGE (the same round as note 4). 1. "the text here should be larger": the thread's lines 17 px.
   2. "this background is still not liquid glass" (the brief card): the fog is gone (the white wash halved, a dark body under it so the film's
   colour reads through the blur like the bar's), a lens rim (the border gradient brighter, a 1 px inner line), a specular top edge, an inner
   top light and an inner bottom shade, the lilac bloom outside. 3. The send arrow on the stage lit like the hero bar's (the sleeping .up
   arrow sat at the 45% disabled wash, so it read grey; the hero's is the same button, he wants that bright one everywhere). 4. "Send to the
   studio" asleep is no longer greyed: the full pill at rest, white text, the glow only once the brief is ready. 5. The chips' hover more
   prominent: the glass fills, the rim brightens, a lilac bloom, a 1 px lift. */
#chatDialog .gmsg{font-size:17px;line-height:1.6}
.stage-brief{
  background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.045) 26%,rgba(255,255,255,.015) 50%,rgba(255,255,255,.04) 76%,rgba(255,255,255,.09) 100%) padding-box,
    linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,.22)) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.88),rgba(197,211,245,.38) 40%,rgba(185,168,255,.42)) border-box;
  -webkit-backdrop-filter:blur(24px) saturate(2.2) brightness(1.12);backdrop-filter:blur(24px) saturate(2.2) brightness(1.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(185,168,255,.28),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 18px 36px -22px rgba(255,255,255,.3),inset 0 -24px 40px -30px rgba(0,0,0,.7),0 24px 60px rgba(0,0,0,.5),0 0 36px -12px rgba(185,168,255,.32)}
.gbar .ui-btn.up:disabled{opacity:1;cursor:default}   /* the hero bar's too, so the two arrows are one button */
/* HIS NOTE 2026-09-21 later ("inside of the button should be SLIGHTLY liquid glass"): the face is a dark glass the card reads through, the rim and shine as they were */
.stage-brief .ui-btn.block{background:linear-gradient(180deg,rgba(34,31,46,.58),rgba(10,9,16,.66));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.stage-brief .ui-btn.block:disabled{opacity:1;cursor:default;color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 10px 24px -12px rgba(255,255,255,.18),0 18px 40px -16px rgba(0,0,0,.9)}
.stage-brief .ui-btn.block:disabled:hover{filter:none}
.stage-brief .ui-btn.block:disabled .dot{opacity:.6;box-shadow:none}
.gchips .ui-btn{transition:filter .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s var(--edition-ease)}
.gchips .ui-btn:not(.go):hover{background:linear-gradient(180deg,rgba(255,255,255,.27),rgba(255,255,255,.1) 50%,rgba(255,255,255,.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.35),0 0 28px -6px rgba(185,168,255,.7);transform:translateY(-1px);text-shadow:0 0 14px rgba(199,188,244,.95)}
.gchips .ui-btn:not(.go):hover::before{filter:brightness(1.25)}
@media(prefers-reduced-motion:reduce){.gchips .ui-btn{transition:none}}

/* ---------- HIS NOTE 2026-09-21 later, THE WORLDS ON HOVER ("once you hover over these after the scroll is done there is no animation, there
   should be a glow on them or you can't see which you're hovering over"): the hover only ever changed the waiting grey, so a read word did
   nothing. Now a word under the pointer glows lilac (the same bloom the catch band plays) and eases 6 px to the right, in every state. */
.world-word .ww{transition:transform .38s var(--edition-ease),filter .38s ease}
.world-word:hover .ww,.world-word:focus-visible .ww{transform:translateX(6px);filter:drop-shadow(0 0 14px rgba(178,160,255,.62)) drop-shadow(0 0 2px rgba(228,224,250,.35))}
@media(prefers-reduced-motion:reduce){.world-word .ww{transition:none}.world-word:hover .ww,.world-word:focus-visible .ww{transform:none}}

/* ---------- HIS NOTES 2026-09-21 later, THE STAGE RAIL AND THE BUTTONS. 1. "can't tell the greatest" (a picked service chip barely differed
   from an unpicked one: a ring and a bloom, lost on a warm film): a picked chip is LIT, the light lilac glass filled with dark ink and the
   bloom outside, so the pick reads at a glance. 2. "properly aligned": the thread's lines carried the hero's 38 px avatar indent onto the
   stage, so the text sat inside the chips' and the bar's left edge; on the stage the lines start where the chips and the bar start. 3. "a
   button down press look, on top of the current effects": every pressable glass button (the chips, the round icon buttons, the Send pill,
   the close, the footer bar's arrow) SINKS while pressed: 1 px down and 3.5% smaller, its top light gone, an inner shadow from the top,
   darker, in 70 ms; the release comes back with the hover's own ease. 4. The rail's held place in the hero (app.js holdRail). */
.gchips .ui-btn.on,.gchips .ui-btn.on:hover{color:#17142a;text-shadow:none;background:linear-gradient(180deg,rgba(238,235,253,.97),rgba(205,195,247,.92) 58%,rgba(185,168,255,.94));border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(110,92,190,.4),0 0 0 1px rgba(228,224,250,.55),0 0 26px -2px rgba(185,168,255,.8),0 8px 22px rgba(0,0,0,.35)}
.gchips .ui-btn{transition:filter .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease,transform .25s var(--edition-ease)}
/* HIS NOTE 2026-09-21 later ("add a quick bubble to the Humo box, but just plain liquid glass, transparent, no colour at all"): Humo's lines sit
   in a clear glass bubble, the mirror of the visitor's (the small corner bottom left), white light only, no band, no tint. */
#chatDialog .gmsg.bot{padding:11px 18px;border-radius:22px 22px 22px 6px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 10px 18px -12px rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
#chatDialog .gmsg.bot::before{display:none}
/* the typing reveal: the ghost sizes the bubble, the live copy writes over it in the same box, a thin caret at the front while it types */
.gmsg.bot.typing-out{position:relative}
.gmsg.bot.typing-out .tw-ghost{visibility:hidden}
.gmsg.bot.typing-out .tw-live{position:absolute;white-space:inherit;color:inherit}
.gmsg.bot.typing-out .tw-live::after{content:"";display:inline-block;width:1px;height:.95em;margin-left:2px;vertical-align:-.12em;background:currentColor;opacity:.7;animation:blink 1s steps(1) infinite}
.chat-hold{visibility:hidden;pointer-events:none}
/* THE PRESS, his second note ("the literal inner circle of the buttons, on the outer ring", his neumorphic examples): the button does not shrink;
   its FACE sinks inside the ring. Pressed = :active, or .pressed (app.js holds it 200 ms after the pointer lifts, so a quick click shows it): the
   face darkens with an inner shadow from the top and a thin light at its foot (concave), the shine layer (::after) turns into that shade and
   draws in 4%, so a lit lip shows just inside the ring, the icon or the label sits 1 px lower; the ring itself and the outer glow stay. In at
   once, released with the hover's own ease. */
.ui-btn.pressed:not(:disabled),.ui-btn:not(:disabled):active,#chatClose.pressed,#chatClose:active{transform:none;filter:brightness(.9);box-shadow:inset 0 3px 9px rgba(0,0,0,.72),inset 0 1px 2px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.16),0 0 0 .5px rgba(255,255,255,.09),0 6px 14px -6px rgba(0,0,0,.6);transition-duration:.04s}
.ui-btn.pressed:not(:disabled)::after,.ui-btn:not(:disabled):active::after{mix-blend-mode:normal;background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.16) 55%,rgba(255,255,255,.07));background-size:100% 100%;background-position:0 0;box-shadow:inset 0 2px 6px rgba(0,0,0,.5);transform:scale(.955);transition:transform .04s ease,background .04s ease}
.ui-btn.pressed>svg,.ui-btn:not(:disabled):active>svg,.ui-btn.pressed>span,.ui-btn:not(:disabled):active>span,#chatClose.pressed svg,#chatClose:active svg{transform:translateY(1px);opacity:.88}
.ui-btn>svg,.ui-btn>span,#chatClose svg{transition:transform .22s var(--edition-ease),opacity .22s ease}
.gchips .ui-btn.pressed:not(:disabled),.gchips .ui-btn:not(:disabled):active{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 55%,rgba(255,255,255,.12));color:rgba(255,255,255,.66);text-shadow:none;box-shadow:inset 0 3px 8px rgba(0,0,0,.85),inset 0 1px 2px rgba(0,0,0,.7),inset 0 -2px 3px rgba(255,255,255,.26),0 0 0 .5px rgba(255,255,255,.06);transition-duration:.05s}   /* on the dark stage a darker fill alone vanished: the light lip at the foot and the dimmed label and rim carry the press */
.gchips .ui-btn.pressed:not(:disabled)::before,.gchips .ui-btn:not(:disabled):active::before{opacity:.55}
.gchips .ui-btn.on.pressed:not(:disabled),.gchips .ui-btn.on:not(:disabled):active{background:linear-gradient(180deg,rgba(150,135,225,.94),rgba(185,168,255,.9) 60%,rgba(214,206,250,.95));color:#17142a;box-shadow:inset 0 3px 9px rgba(50,32,110,.62),inset 0 1px 2px rgba(50,32,110,.5),inset 0 -1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(228,224,250,.5)}
.conversation-entry.pressed .ui-btn.icon.round,.conversation-entry:active .ui-btn.icon.round{filter:brightness(.9);box-shadow:inset 0 3px 9px rgba(0,0,0,.72),inset 0 1px 2px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.16)}
.conversation-entry.pressed .ui-btn.icon.round::after,.conversation-entry:active .ui-btn.icon.round::after{mix-blend-mode:normal;background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.16) 55%,rgba(255,255,255,.07));background-size:100% 100%;background-position:0 0;transform:scale(.955)}
@media(prefers-reduced-motion:reduce){.ui-btn>svg,.ui-btn>span,#chatClose svg{transition:none}}

/* ---------- HIS NOTE 2026-09-21 later, THE LINES ("a nice gradient line between HUMANATE and CREATIVE, and one between The Theatre and Services,
   one between Studio and Let's Talk"): the rule in the lockup is baked into media/lockup.png (the island in every state and the footer use it),
   so its pixels were repainted silver to lilac to blue and back, fading at the ends (source/logo/lockup-before-gradient-rule.png is the
   original). The link pairs get a 1 px vertical divider in the same gradient, centred in the gap, in the menu and in the bar. NO GOLD. */
.tab-side a:first-child{position:relative}
.tab-side a:first-child::after{content:"";position:absolute;right:-3.5px;top:24%;height:52%;width:1px;pointer-events:none;opacity:.85;background:linear-gradient(180deg,transparent,rgba(230,230,230,.9) 30%,#B9A8FF 52%,#C5D3F5 74%,transparent)}
.tab.bar .tab-side a:first-child::after{right:-2.5px}

/* ---------- HIS NOTES 2026-09-21 later, THE NOTCH SEAM. 1. "as you scroll down there's this white line at the top": the bar's top-edge light sat at .22
   on a band a few px tall; it now fades in with p (the same .46 once the bar has landed). 2. The chat door's ride from the pill: the bar centred
   the lockup in the notch while the pill pads it from the top (a 3 px hop), so .pillride pads it exactly as the pill did and eases to the bar's
   17 px; and the pill's static copy now sits beside the real pill (same parent, same --hs), so the crossfade is between two identical renders. */
.tab.bar.pillride .tab-brand{place-items:start center;padding-top:calc(var(--pt) * (1 - var(--p)) + 17px * var(--p))}
.tab-ghost-pill{z-index:61}

/* HIS NOTE 2026-09-21 later, the page sliding right as the chat opened: a classic scrollbar's gutter is kept while the stage locks the scroll (app.js measures and falls back where this is not honoured) */
html{scrollbar-gutter:stable}

/* HIS NOTE 2026-09-21 later ("the hover over these should only work when you hover over the text, it currently does it along the space"): the
   world button spans its row, so the text alone is the hit target now; the button still takes the click through it. */
.world-word{pointer-events:none}
.world-word .ww{pointer-events:auto}

/* ---------- THE PRELOADER (loader.js, 2026-09-21): #loader is painted black HERE, before any script runs, so a first load never flashes the
   hero; the head script adds .hc-seen (a seen tab, or a hash) so a repeat load never flashes black. Everything inside is laid out by loader.js
   in viewport px; the word, the ring, the rule and CREATIVE scale with the viewport, the captions do not. ---------- */
#loader{position:fixed;inset:0;z-index:1000;background:#000;overflow:hidden;touch-action:none}
.hc-seen #loader{display:none}
#loader .hcl-black{position:absolute;inset:0;background:#000}
#loader svg.hcl-word{position:absolute;overflow:visible}
#loader svg.hcl-bp{position:absolute;left:0;top:0;overflow:visible}
#loader canvas.hcl-ring{position:absolute}
#loader .hcl-cap{position:absolute;left:0;right:0;bottom:78px;text-align:center;font:400 13px var(--font);letter-spacing:.26em;color:rgba(237,235,242,.6)}
#loader .hcl-corner{position:absolute;top:36px;font:400 11px var(--font);letter-spacing:.22em;color:rgba(237,235,242,.4);min-height:1em;white-space:pre}
#loader .hcl-corner.l{left:44px}#loader .hcl-corner.r{right:44px}
#loader .hcl-rule{position:absolute;height:1px;background:linear-gradient(90deg,transparent,#C0B1FF 22%,#EDEDF2 50%,#C0B1FF 78%,transparent)}
#loader .hcl-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#D8D0F8;box-shadow:0 0 12px 3px rgba(192,177,255,.6)}
#loader .hcl-lockimg{position:absolute}

/* ==========================================================================================================================================
   THE MOBILE PASS (2026-09-21 later). The laptop layout above 640 is locked; these re-flow the blocks rounds two to five added after the
   old phone rules (the pinned stage, the studio panel, the lounge footer, the chat dialog) and give the bar's links a real tap height.
   ========================================================================================================================================== */
.footer-scene{grid-template-columns:minmax(0,1fr)}   /* a definite track: the footer row's max-content used to size the whole scene 26 px wider than a phone */
/* HIS PHONE NOTE 3 (2026-09-21 later, "the scroll animations on the header pill going down ... all broken", "you cant see the logo section"):
   under 640 nothing set --hs, so every calc() in the island was invalid: the hero pill was the bare lockup (187 x 50, no padding), the pinned
   bar a flat 402 x 80 sheet with no notch and no mask, the lockup a 36 px sliver, and the laptop's 118 px glide put both sides on top of it.
   Phones now scale the island at .8 (the pill 245 x 67 with a 40 px lockup; the notch 220 x 74 on the band with the lockup at 44), the links
   leave the band (the sides are display:contents, nothing glides), and a MENU word sits at the right of the band. His second note ("the
   expanded pill looks really ugly and there are the lines"): the notch no longer blooms; the BAND grows down into a full-width sheet under
   the lockup (--mh, registered so it transitions and the mask follows), the four links stacked one per row at 19 px, the notch fillets fold
   away (--rk) so no rim line is left inside the sheet. The Work page's static bar carries the same. Nothing here fires above 640. */
@property --mh{syntax:"<length>";inherits:true;initial-value:0px}
@property --rk{syntax:"<number>";inherits:true;initial-value:1}
.tab-menu{display:none}
@media(max-width:640px){
  .tab{--hs:.8px}
  .tab-lockup{height:calc(50 * var(--hs))}
  .tab.open .tab-lockup{height:50px}
  .tab.bar,.tab.bar::before,.tab.bar::after{--nw:calc(var(--w0) + (220px - var(--w0)) * var(--p));--nh:calc(var(--h0) + (80px - var(--h0)) * var(--p));--bh:calc(46px * var(--p) + var(--mh));   /* the edition's phone rule pinned --nh at a flat 80 from the pin (the pill jumped 67 to 80); it grows there now */--rf:calc((24 * var(--hs) + (18px - 24 * var(--hs)) * var(--p)) * var(--rk))}
  /* the box follows the PAINT: the bar draws a full-width band of --bh (46 + --mh) with the notch (--nw x --nh) hanging under it, so a box of
     nh + mh outlived the glass by 34 px with the sheet open and caught touches over the page below its edge. max() keeps the notch's 80 while
     the sheet is shut and follows the band once it is taller, so the sheet's box and its glass end on the same line (210). */
  .tab.bar{height:max(var(--nh),calc(46px * var(--p) + var(--mh)));align-content:start;grid-template-columns:minmax(0,1fr) var(--nw) minmax(0,1fr);transition:--gk .45s var(--edition-ease),--mh .42s var(--edition-ease),--rk .22s ease}   /* 1fr alone floors the side tracks at the Menu word's width and shoves the notch left */
  /* HIS ROUND FOUR PICK, THE MENU SHEET = B THE INDEX, "slightly smaller and tighter" (his note 8: the 340 px sheet was "WAYYYY too big",
     "what if we added more things to it later, needs to be more compact and smoother, beautiful"). The sheet is the notch's 80 plus --mh, so
     130 makes it 210 in all (the board's index was 236, the old sheet 340); the rows are 32 at 14.5 with a shiny orb before the word and a
     quiet chevron at the right, no lines between, 32 px more per link. */
  .tab.bar.menu{--mh:164px;--rk:0}   /* the glass band is 46 + --mh, so 164 lands its edge at 210; the box is nh + mh as always */
  .tab.bar .tab-lockup{height:calc(50 * var(--hs) + (44px - 50 * var(--hs)) * var(--p))}
  .tab.bar.handoff .tab-lockup{height:calc(50px + (44px - 50px) * var(--p))}   /* from the open pill's 50 px lockup, no jump */
  .tab.bar.handoff .tab-brand{padding-top:calc(16px * (1 - var(--p)) + 18px * var(--p))}   /* a 44 px lockup centres at 18 in the 80 notch (the laptop's 40 at 17 in 74) */
  .tab.bar.pillride .tab-brand{padding-top:calc(var(--pt) * (1 - var(--p)) + 18px * var(--p))}
  .tab.bar .tab-side{display:contents}
  .tab.bar .tab-menu{display:flex;position:relative;z-index:1;grid-column:3;grid-row:1;justify-self:end;align-items:center;height:calc(46px * var(--p));min-height:0;padding:0 18px;
    border:0;background:none;color:#F7F8FA;font-family:var(--font);font-size:14px;font-weight:400;line-height:1;cursor:pointer;   /* the bar's link face (round three: 14 px sentence case) */
    opacity:clamp(0,calc((var(--p) - .12) / .5),1);pointer-events:none;transform:translateY(calc(-8px * (1 - var(--p))))}
  .tab.bar.barset .tab-menu{pointer-events:auto}
  .tab.bar .tab-nav{display:grid;position:relative;z-index:1;grid-column:1 / -1;grid-row:2;grid-template-columns:1fr;gap:0;padding:0 24px 2px;margin:0;
    visibility:hidden;opacity:0;transition:opacity .2s ease,visibility 0s .2s}
  .tab.bar.menu .tab-nav{visibility:visible;opacity:1;transition:opacity .3s ease .16s}
  .tab.bar .tab-nav a{justify-content:flex-start;gap:12px;min-height:32px;padding:0;font-size:14.5px;font-weight:400;letter-spacing:-.005em}
  .tab.bar.menu .tab-nav a::before{display:block;width:7px;height:7px;opacity:1;transform:none;border-radius:50%;flex:none;filter:none;
    background:radial-gradient(circle at 34% 30%,#fff 0,rgba(255,255,255,.92) 16%,rgba(255,255,255,0) 46%),radial-gradient(circle at 72% 86%,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 38%),radial-gradient(circle at 46% 42%,#FFFFFF 0%,#E8E4FF 24%,#BFB0FF 52%,#7663DA 80%,#2E2758 100%);
    box-shadow:inset -.5px -1px 1.5px rgba(0,0,0,.4),inset 0 0 0 .5px rgba(255,255,255,.35),0 0 6px rgba(185,168,255,.65)}   /* the strip's own sphere, so the sheet reads as the same family */
  .tab.bar.menu .tab-nav .tab-side a::after{content:"\203A";position:static;display:block;width:auto;height:auto;margin-left:auto;background:none;opacity:.35;font-family:var(--font);font-size:16px;line-height:1}   /* the quiet chevron; the .tab-side in the selector is what outbids the side links' own divider on a first child (an even specificity tie lost it) */
  .tab.bar .tab-side a:first-child::after{display:none}
  /* HIS NOTES 2026-09-21 later, THE HERO ("make the video stretch to both sides", "you cant see the spatial and gamification"): the card runs
     edge to edge and stands 100svh less the gutters (100vh was the tall viewport, so the strip's third row sat under Safari's toolbar). */
  body:not(.workpage) .hero-wrap{padding:var(--gutter) 0}
  .card.hero{height:calc(100svh - 2 * var(--gutter));min-height:0}
  .gchips{margin:12px 0 4px}   /* HIS ROUND FOUR PHONE NOTE 1 (2026-09-21 later, "it should be like this [the first paint] but it pops up slightly higher afterwards"): his first paint was the entrance tween's start (the chips 12 px low, motion.js heroLoad's y:12) and the rest state the 16 px lift; he wants the first paint kept, so the rest state IS that geometry: the same 16 px of room, split 12 above and 4 below, the title and the bar exactly where they were, and the phone entrance has no travel (motion.js). ROUND THREE's note: the top-level .gchips{margin:0 0 calc(16 * var(--hs))} ("3 pills need to sit a bit higher, shouldn't touch the chat bar"): the top-level .gchips{margin:0 0 calc(16 * var(--hs))} came after the 12 px lift and --hs is unset on the stage under 640, so the margin computed to 0 and the chips sat ON the bar */
  /* THE LOGO RAIL ("you STILL CANT SEE all the logo sections ... a line of the logos underneath the creatives"): one column, the marquee under
     the copy at 72 % of its laptop size, no rule beside the copy */
  .cr-row{grid-template-columns:minmax(0,1fr);gap:22px}
  .cr-text{padding:0;border-right:0}
  .secC .rows{margin-top:0}
  .marquee{padding:10px 0}
  .set{gap:44px;padding-right:44px}
  .set img{height:calc(var(--h,28px) * .72)}
  /* the pinned stage: the film on top, the six worlds under it, one column; the caption wraps and the theatre link keeps the right */
  .stage-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:22px;padding-top:88px}
  .stage-view{order:-1}
  .stage-head .eyebrow{margin-bottom:16px}   /* room for the title's drift: it sits up to 20 px high as it leaves the top, and used to ride into the eyebrow */
  .world-word{font-size:32px;line-height:1.1}
  .stage-cap{flex-wrap:wrap;gap:8px 18px;padding-top:14px}
  .stage-note{min-width:0}
  .stage-cap .text-link{flex:0 0 auto;margin-left:auto}
  /* HIS ROUND FOUR PICK, THE STUDIO = C TWO COLUMNS (his note 3: "just toooo large, make the section smaller if possible, make better use of
     space"; the numbers only arrived on a second screen). The heading runs across the top, then the copy in a narrow measure at 14.5 on the
     left and the three numbers stacked down the right with hairlines between them, and the signature closes the panel: .studio-heading goes
     position:static on phones so the sign (absolute, its own child) hangs from the PANEL's foot instead of the heading's, which needs no change
     to the markup and leaves the heading's reveal alone. The disciplines line goes: the ticker at the top of the page says it. */
  .studio-panel{--sg:24px;grid-template-columns:minmax(0,1fr) 132px;grid-template-areas:"head head" "copy nums";column-gap:18px;row-gap:14px;padding:30px 24px 92px}   /* the foot holds the signature (26 up from the panel's edge) clear of the copy's last line */
  .studio-panel .studio-heading{grid-area:head;position:static;align-self:start;padding-bottom:0;transform:none!important}   /* the reveal leaves an inline transform:translate(0,0) at rest, and a transform makes an element the containing block for an absolute child whatever its position, so the sign stayed pinned to the heading; flat on phones it hangs from the panel and the reveal still fades */
  .studio-panel .studio-heading h2{font-size:30px}
  .studio-sign{left:24px;bottom:26px}
  .studio-panel .studio-copy{grid-area:copy;max-width:none;padding-top:2px;font-size:14.5px}
  .studio-panel .studio-copy>p+p{font-size:13px;margin-top:8px}
  .studio-panel .disciplines{display:none}
  .proof{grid-area:nums;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:4px 0 0;border-top:0;text-align:right}
  .proof li{display:block}
  .proof li+li{padding-top:10px;border-top:1px solid rgba(21,19,28,.16)}
  .proof b{font-size:24px}
  .proof span{margin-top:4px;font-size:10.5px;line-height:1.3;max-width:none}
  /* the lounge: the heading over its copy, the launcher down beside the copyright line instead of on the nav row */
  .footer-scene .conversation-heading{display:block;margin-bottom:24px}
  .footer-scene .conversation-heading h2{font-size:46px;max-width:none}
  .footer-scene .conversation-heading>p{max-width:none;margin-top:16px;padding-bottom:0}
  /* HIS NOTES 2026-09-21 later, THE FOOTER ("completely off and broken", "a lot bigger than it needs to be", "the footer video you cant see"):
     folded to two rows. Row one: the lockup with the LinkedIn tile at its right, the tagline under them, the nav on one line; the rule; row
     two: the mail and the copyright on one line. The orb hides while the band shows (the band carries its own entry; the orb sat on the
     copyright). The selectors carry .footer so they outbid the V2 body:not(.workpage) column rules. The Work page's footer takes the same fold
     (round three, the /work walk: Let's Talk wrapped onto its own row, the mail and copyright stacked, 23 px and 18 px taps). */
  .footer-scene .footer{background:transparent}   /* his note on the board ("still bad", "too long for no reason"): the black footer sat on the film as a dead block; the film now runs under it to the page's end, the veil keeps the copy legible */
  /* HIS NOTES ON THE BOARD, ROUND THREE (2026-09-21 later): "something on your mind and the chat box should be much lower, just above the actual
     footer". The V2 phone rule body:not(.workpage) .footer{padding:56px 0 28px} outbid the scene's padding:0, so 56 px of dead film sat between
     the note and the lockup and 28 px under the copyright; the scene's 1fr row is the conversation's own height then, and the block reads as
     pinned to the top. Padding 0 here (the scene's two classes outbid V2), the block's own bottom padding 24: the note lands 42 px over the lockup. */
  .footer-scene.edition .footer{padding:0}
  .footer-scene .conversation-section{padding-bottom:24px}
  .footer-scene .footer .wrap{padding-block:18px 14px}
  .footer-scene .footer .socials svg,.workpage .footer .socials svg{fill:#F2F1F6}   /* the chrome gradient on a 16 px glyph rendered dark on iOS ("the linkedin logo broke") */
  .footer-scene .footer .foot-top,.workpage .footer .foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lockup social" "line line" "nav nav";align-items:center;gap:12px 16px;margin-bottom:12px}
  .footer-scene .footer .foot-lockup,.workpage .footer .foot-lockup{grid-area:lockup}
  .footer-scene .footer .foot-lockup img,.workpage .footer .foot-lockup img{height:38px}
  .footer-scene .footer .socials,.workpage .footer .socials{grid-area:social;margin:0}
  .footer-scene .footer .socials a,.workpage .footer .socials a{display:grid;place-items:center;width:40px;height:40px;min-height:0;border-radius:12px}   /* "the IN not centred": the V2 inline-flex (no justify) put the glyph 10 px left of the tile's centre */
  .footer-scene .footer .foot-line,.workpage .footer .foot-line{grid-area:line;font-size:10px;letter-spacing:.2em}
  .footer-scene .footer .foot-nav,.workpage .footer .foot-nav{grid-area:nav;position:static;transform:none;gap:0 22px;flex-wrap:wrap;font-size:15px}
  .footer-scene .footer .foot-nav a,.footer-scene .footer .foot-talk,.workpage .footer .foot-nav a,.workpage .footer .foot-talk{display:inline-flex;align-items:center;min-height:40px}   /* the Let's Chat / Let's Talk is a button, it was 21 px */
  .footer-scene .footer .foot-bottom,.workpage .footer .foot-bottom{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2px 8px;padding-top:12px;font-size:12px}   /* the 17e's 342: mail 167 + copyright 163 + a 14 gap was 344 and wrapped; 8 leaves 4 */
  .footer-scene .footer .foot-mail,.workpage .footer .foot-mail{display:inline-flex;align-items:center;min-height:40px}
  .chat-launcher.lifted{transform:none;opacity:0;pointer-events:none;transition:opacity .3s ease}
  /* the chat dialog: a 12 px margin all round (it used to sit flush left with the gap on the right) */
  #chatDialog{inset:12px;width:auto;height:auto;max-height:none}
  /* HIS ROUND FOUR PHONE NOTE 5 ("you should be able to see what you type as you type"): iOS keeps the layout viewport under the keyboard, so
     app.js fits the dialog to the visual viewport (an inline top and height) while a keyboard is up; the thread gives way, the bar stays in view. */
  /* HIS ROUND FOUR PICK, THE CHAT = B THE SHEET'S STRUCTURE, IN THE CURRENT CHAT'S LOOK ("I like how the sheet chat is structured, obviously
     keeping the same design currently, the chat colours etc."). The grid IS the sheet now: a glass panel with a grabber that hangs 8 px under
     the band and runs to the dialog's foot, the Humo row at its head in place of the big pill, the thread under it and the bar at its foot.
     UNCHANGED: the gmsg bubbles, the lilac-rimmed line of his own, the gbar and its round buttons, the chrome. The round close goes (the band's
     word reads Close, motion.js). A swipe down on the head closes it too (app.js). */
  #chatDialog .stage-grid{top:76px;bottom:0;left:0;right:0;gap:10px;padding:22px 14px 14px;border-radius:22px 22px 18px 18px;
    border:1px solid rgba(255,255,255,.14);border-bottom:0;
    background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 46%,rgba(255,255,255,.035));
    -webkit-backdrop-filter:blur(30px) saturate(2) brightness(1.04);backdrop-filter:blur(30px) saturate(2) brightness(1.04);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 -18px 44px rgba(0,0,0,.42)}
  #chatDialog .stage-grid::before{content:"";position:absolute;left:50%;top:8px;width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);transform:translateX(-50%)}
  /* the Humo row: the sheet carries the glass, so the pill loses its own and becomes the small orb, his name and his line */
  .stage-brief{gap:9px;margin:0;padding:0 4px;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .stage-brief .humo{width:26px!important;height:26px!important}
  #chatDialogTitle{font-size:15px}
  .brief-sub{display:block;margin:0;font-size:11px;line-height:1.2;text-align:left}
  #chatClose{display:none}
  /* his orb beside his lines, the strip's own sphere at 22 px, sitting at the foot of the bubble */
  #chatDialog .gmsg.bot{margin-left:30px;max-width:calc(100% - 30px)}
  #chatDialog .gmsg.bot::before{display:block;left:-30px;top:auto;bottom:0;width:22px;height:22px;border-radius:50%;-webkit-mask:none;mask:none;
    background:radial-gradient(circle at 34% 30%,#fff 0,rgba(255,255,255,.92) 16%,rgba(255,255,255,0) 46%),radial-gradient(circle at 72% 86%,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 38%),radial-gradient(circle at 46% 42%,#FFFFFF 0%,#E8E4FF 24%,#BFB0FF 52%,#7663DA 80%,#2E2758 100%);
    box-shadow:inset -.5px -1px 1.5px rgba(0,0,0,.4),inset 0 0 0 .5px rgba(255,255,255,.35),0 0 6px rgba(185,168,255,.65)}
  /* the options as underlined words inside his sentence (app.js writes them into the line): a tap picks or toggles, the picked ones lit, the
     words of a step already answered stay in the sentence but go quiet. They are hidden until his line has finished typing. */
  #chatDialog .gopts{display:inline}
  #chatDialog .gmsg.bot.typing-out .gopts{visibility:hidden}
  #chatDialog .gopts.spent{opacity:.5;pointer-events:none}
  #chatDialog .gopt{display:inline;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;
    font:inherit;font-family:"Aime MX",sans-serif;color:rgba(255,255,255,.88);text-decoration:underline;text-decoration-color:rgba(192,177,255,.6);text-underline-offset:3px}
  #chatDialog .gopt.on,#chatDialog .gopt.go{color:#fff;text-decoration-color:#fff}
  #chatDialog .gchips:empty{display:none}
  #chatDialog .gthread{margin-bottom:12px}
  #chatDialog.kb .gthread{margin-bottom:10px}
  #chatDialog.kb .stage-grid{top:0;padding-top:22px;gap:8px}
  /* HIS ROUND FOUR PHONE NOTE 4 ("when you scroll all the way to the bottom you can see the strip above, should not be able to"): the scene is
     86svh, so the last screen showed the studio panel's edge (a lilac line under the bar) over black. The large viewport height fills the last
     screen whether Safari's toolbar is shown or collapsed; the conversation block is align-self:end, so the extra room is film above it. */
  .footer-scene{min-height:100lvh}
  /* HIS ROUND FOUR PICK, THE STRIP = A THE TICKER ("definitely the ticker, the way it scrolls, but keep the rest of the hero the same"): the
     six sat as a 2 x 3 grid at the card's foot ("UGLY AS HELL", "some ugly block"). The same black tab with its fillets, 40 tall and 360 wide,
     one line of the six in the strip's own small caps drifting left on a seamless 26 s loop (each half of the doubled set rides -100% of its
     own width, so the two move as one and the reset is invisible), faded at both ends by a mask on the track, the shiny orbs between. The
     pill, the copy, the chips, the bar and the helper are untouched (his frame). The mask lives on the track, never on .strip: the fillets sit
     outside the strip's box and a mask or an overflow there would cut them off. */
  .strip{display:block;width:360px;max-width:calc(100% - 42px);height:40px;padding:0;border-radius:20px 20px 0 0;font-size:10.5px;letter-spacing:.18em}
  .strip::before,.strip::after{width:20px;height:20px}
  .strip::before{left:-20px;background:radial-gradient(circle at 0 0,transparent 19.5px,var(--tab) 20px)}
  .strip::after{right:-20px;background:radial-gradient(circle at 100% 0,transparent 19.5px,var(--tab) 20px)}
  .strip .strip-track{display:flex;position:absolute;inset:0;align-items:center;overflow:hidden;border-radius:inherit;
    -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .strip .strip-set,.strip .strip-set.dup{display:flex;flex:none;align-items:center;gap:22px;padding-right:22px;animation:hc-tick 26s linear infinite;will-change:transform}
  .strip span{flex:none}
  .strip i{width:9px;height:9px;margin-right:11px}
}
@keyframes hc-tick{to{transform:translateX(-100%)}}
@media(max-width:640px) and (prefers-reduced-motion:reduce){.strip .strip-set,.strip .strip-set.dup{animation:none}}
/* TABLETS IN PORTRAIT (641 to 1023, the mobile pass): the hero's scale is height-driven and a tall card grew the stage past the card's sides (1026 px
   on an 834 iPad, Safari zoomed the whole page out); the width caps it here, the strip folds three and three at its laptop size, and the lounge
   footer's row wraps under 1000 (landscape phones and small tablets had the socials on top of the nav). Nothing here fires at 1024 or above. */
@media(min-width:641px) and (max-width:1023px){
  .stage{--fx:min(max(calc(100cqw / 1920),calc(100cqh / 1080)),calc(100cqw / 1240))}
  .tab{--fx:min(max(calc((100svw - 2 * var(--gutter)) / 1920),calc(max(100svh - 2 * var(--gutter),720px) / 1080)),calc((100svw - 2 * var(--gutter)) / 1240))}
  .strip{--hs:1px;display:grid;grid-template-columns:auto auto auto;justify-content:center;column-gap:26px;row-gap:8px;padding:14px 28px 16px}
}
@media(max-width:1000px){.footer-scene .foot-top{flex-wrap:wrap;row-gap:18px}}