/* ═══ Self-hosted fonts (GLU-801) — see shared/fonts/, was Google Fonts css2 ═══ */
/* Archivo — variable (wdth 62–125, wght 100–900) */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Instrument Serif — upright */
@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/instrument-serif-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/instrument-serif-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Instrument Serif — italic */
@font-face{
  font-family:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(fonts/instrument-serif-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ═══ GlueIQ v3 — Director's Cut design system ═══ */
:root{
  --magenta:#FC2E8F; --magenta-fill:#C81A6E; /* deeper pill for white-text fills — WCAG 5.48:1 (GLU-988, option C) */
  --cranberry:#B90064;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"]{
  /* --tx-faint is reserved for LARGE display text (≥24px, or ≥19px bold) — 3.42:1 on
     --bg / 3.19:1 on --bg-2 clears WCAG AA large-text 3:1 (GLU-798). Small text uses
     --tx-dim (6.0:1 / 5.6:1, clears 4.5:1). Was #4A5057 (2.37:1). */
  --bg:#0C0E10; --bg-2:#14171A; --tx:#EDEAE4; --tx-dim:#8A9097; --tx-faint:#61686F;
  --line:rgba(237,234,228,.09); --card:#14171A;
  --seam-glow:rgba(252,46,143,.32); --seam-mid:rgba(185,0,100,.14);
  --dust:237,234,228; --grain-op:.05; --shadow:rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --bg:#F5F2EC; --bg-2:#EDE9E1; --tx:#16181B; --tx-dim:#6E6A63; --tx-faint:#A8A296;
  --line:rgba(22,24,27,.12); --card:#FBF9F5;
  --seam-glow:rgba(252,46,143,.2); --seam-mid:rgba(252,46,143,.07);
  --dust:22,24,27; --grain-op:.06; --shadow:rgba(22,24,27,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .6s ease,color .6s ease}
::selection{background:var(--magenta);color:#fff}
a{color:inherit}
svg.logo{height:30px;width:auto;display:block}
footer.giq svg.logo{height:40px}
/* wordmark swap — exact artwork only, chosen by surface (no blending/inverting) */
.logo-a .logo-w{display:none}
.logo-a .logo-b{display:block}
:root[data-theme="dark"] .logo-a .logo-w,body.over-dark nav.giq .logo-a .logo-w{display:block}
:root[data-theme="dark"] .logo-a .logo-b,body.over-dark nav.giq .logo-a .logo-b{display:none}

/* grain */
.grain{position:fixed;inset:-100%;width:300%;height:300%;pointer-events:none;z-index:200;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(9) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}12%{transform:translate(-3%,2%)}25%{transform:translate(2%,-4%)}37%{transform:translate(-4%,-2%)}50%{transform:translate(3%,4%)}62%{transform:translate(-2%,3%)}75%{transform:translate(4%,-3%)}87%{transform:translate(-3%,-4%)}}

/* cinematic bars */
.bar{position:fixed;left:0;width:100%;height:9vh;background:#000;z-index:150;transition:transform 1.6s cubic-bezier(.77,0,.18,1)}
.bar.top{top:0}.bar.bottom{bottom:0}
body.loaded .bar.top{transform:translateY(-100%)}
body.loaded .bar.bottom{transform:translateY(100%)}

/* ═══ nav ═══ */
nav.giq{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:20px 44px;opacity:0;transform:translateY(-16px);transition:opacity 1s ease .7s,transform 1s ease .7s;
  background:linear-gradient(color-mix(in srgb,var(--bg) 85%,transparent),transparent)}
body.loaded nav.giq{opacity:1;transform:none}
nav.giq ul{display:flex;gap:30px;list-style:none;align-items:center}
nav.giq a{color:var(--tx);text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;position:relative}
nav.giq ul>li>a:not(.chat-btn)::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--magenta);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.77,0,.18,1)}
nav.giq ul>li>a:not(.chat-btn):hover::after,nav.giq ul>li>a.on::after{transform:scaleX(1);transform-origin:left}
.chat-btn{border:1px solid var(--tx);border-radius:100px;padding:12px 26px!important;transition:all .4s ease;
  display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
.chat-btn:hover{background:var(--magenta-fill);border-color:var(--magenta-fill);color:#fff!important}
/* dropdown */
.dd{position:relative}
.dd>a .caret{display:inline-block;margin-left:7px;font-size:9px;transition:transform .3s;vertical-align:1px}
.dd-panel{position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,12px);min-width:340px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;
  opacity:0;visibility:hidden;transition:all .35s cubic-bezier(.19,1,.22,1);box-shadow:0 30px 70px -20px var(--shadow)}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd:hover>a .caret{transform:rotate(180deg)}
.dd-panel a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:15px 18px;border-radius:9px;
  text-transform:none;letter-spacing:0;transition:background .25s}
.dd-panel a::after{display:none}
.dd-panel a:hover{background:var(--bg-2)}
.dd-panel a b{display:block;font-size:14.5px;font-weight:600;letter-spacing:.02em}
.dd-panel a small{display:block;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--tx-dim);margin-top:3px}
.dd-panel a .ar{color:var(--magenta);font-size:16px;opacity:0;transform:translateX(-6px);transition:all .3s}
.dd-panel a:hover .ar{opacity:1;transform:none}
.dd-panel .dd-all{border-top:1px solid var(--line);margin-top:6px}
.dd-panel .dd-all b{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);font-weight:600}

/* ═══ scaffolding ═══ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kicker{font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--magenta)}
.cta .kicker{margin-bottom:4.5vh}
.sec{padding:15vh 6vw;max-width:1540px;margin:0 auto}
.sec-h{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,88px);line-height:1.04;margin-top:2.6vh}
.sec-h em{font-style:italic;color:var(--magenta)}
.sec-p{color:var(--tx-dim);font-size:16px;line-height:1.75;max-width:640px;margin-top:3vh}
.sec-p b{color:var(--tx);font-weight:600}
.hr{border:none;border-top:1px solid var(--line)}

/* page hero (subpages) */
.phero{min-height:72vh;display:flex;flex-direction:column;justify-content:flex-end;padding:20vh 6vw 8vh;position:relative;overflow:hidden;max-width:none}
.phero .crumb{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--tx-dim)}
.phero .crumb b{color:var(--magenta);font-weight:600}
.phero h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,7.6vw,124px);line-height:1;letter-spacing:-.01em;margin-top:3vh;max-width:1250px}
.phero h1 em{font-style:italic;color:var(--magenta)}
.phero h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.phero h1 .line span{display:inline-block;transform:translateY(115%)}
body.loaded .phero h1 .line span{animation:heroRise 1.4s cubic-bezier(.19,1,.22,1) forwards}
body.loaded .phero h1 .line:nth-child(2) span{animation-delay:.15s}
body.loaded .phero h1 .line:nth-child(3) span{animation-delay:.3s}
@keyframes heroRise{to{transform:translateY(0)}}
.phero .lead{color:var(--tx-dim);font-size:clamp(15px,1.25vw,19px);line-height:1.7;max-width:560px;margin-top:4vh}

/* buttons */
.cta-btn{display:inline-flex;align-items:center;gap:14px;padding:20px 42px;border-radius:100px;background:var(--magenta-fill);
  color:#fff;text-decoration:none;font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  transition:all .4s ease;box-shadow:0 0 50px rgba(252,46,143,.28)}
.cta-btn:hover{background:var(--tx);color:var(--bg);box-shadow:0 0 90px rgba(252,46,143,.5)}
.ghost-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 38px;border-radius:100px;border:1px solid var(--line);
  color:var(--tx);text-decoration:none;font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;transition:all .35s}
.ghost-btn:hover{border-color:var(--magenta);color:var(--magenta)}
.und-link{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  color:var(--tx);text-decoration:none;border-bottom:1px solid var(--magenta);padding-bottom:8px;transition:color .3s}
.und-link:hover{color:var(--magenta)}

/* marquee */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.mq-track{display:flex;white-space:nowrap;width:max-content;animation:mq 34s linear infinite}
.mq-track span{font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:clamp(20px,2.4vw,36px);padding:22px 0;color:var(--tx-faint);transition:color .3s}
.mq-track span:hover{color:var(--magenta)}
.mq-track i{font-family:var(--serif);font-style:italic;color:var(--magenta);padding:22px 26px;font-size:clamp(16px,1.8vw,26px)}
@keyframes mq{to{transform:translateX(-50%)}}

/* work cards */
.wcard{position:relative;overflow:hidden;border-radius:6px;background:var(--bg-2);cursor:pointer;text-decoration:none;display:block}
.wcard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.66));pointer-events:none}
.wcard img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transform:scale(1.04);transition:filter .7s ease,transform 1.1s cubic-bezier(.19,1,.22,1)}
.wcard:hover img{filter:grayscale(0);transform:scale(1.11)}
.wcard .meta{position:absolute;left:24px;right:24px;bottom:20px;z-index:2;color:#fff}
.wcard .meta h3{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(17px,1.5vw,24px)}
.wcard .meta p{color:rgba(255,255,255,.78);font-size:12.5px;margin-top:5px;font-family:var(--serif);font-style:italic;letter-spacing:.02em;font-size:15px}
.wcard .idx{position:absolute;top:18px;left:20px;font-family:var(--serif);font-style:italic;font-size:19px;color:#fff;z-index:2;text-shadow:0 0 14px rgba(0,0,0,.55)}

/* footer */
footer.giq{border-top:1px solid var(--line);padding:10vh 6vw 5vh}
footer.giq .f-tag{font-family:var(--serif);font-size:clamp(30px,3.4vw,54px);line-height:1.1}
footer.giq .f-tag em{font-style:italic;color:var(--magenta)}
footer.giq .f-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:6vh;margin-top:7vh}
footer.giq .f-cols{display:flex;gap:6vw;flex-wrap:wrap}
footer.giq .f-col h2{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--magenta);margin-bottom:2.2vh}
footer.giq .f-col a,footer.giq .f-col span{display:block;color:var(--tx-dim);text-decoration:none;font-size:14px;line-height:2.15}
footer.giq .f-col a:hover{color:var(--tx)}
footer.giq .f-bottom{margin-top:8vh;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--tx-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
/* legal links: ≥44px effective tap target without moving a pixel of layout —
   the padding grows the hit box, the negative margin gives it back (GLU-768) */
footer.giq .f-bottom .legal{color:inherit;text-decoration:none;display:inline-block;
  padding:16px 6px;margin:-16px -6px;position:relative;z-index:1}
footer.giq .f-bottom .legal:hover{color:var(--tx)}

/* reveal */
.rv{opacity:0;transform:translateY(50px)}

/* theme toggle */
.tgl{width:46px;height:26px;border-radius:100px;border:1px solid var(--line);background:var(--card);cursor:pointer;position:relative;transition:background .4s}
.tgl i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--magenta);transition:transform .45s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;color:#fff}
:root[data-theme="light"] .tgl i{transform:translateX(20px)}

@media (max-width:900px){
  nav.giq{padding:16px 22px}
  nav.giq ul>li:not(.tgl-li):not(.menu-li):not(:last-child){display:none}
  nav.giq ul>li.menu-li{display:block} /* the MENU trigger appears where the links went (GLU-996) */
  .sec{padding:12vh 6vw}
  .phero{padding-top:16vh}
}

/* ═══ v4 — Triptych edition additions ═══ */

/* shutter preloader — fast cut (LCP prototype A): the full blink stays under
   900ms so first meaningful paint isn't hostage to brand furniture. Same
   curve, tighter stagger — it reads as a blink, not a wait. */
#pre{position:fixed;inset:0;z-index:400;display:flex;pointer-events:none}
#pre i{flex:1;background:#0C0E10;border-right:1px solid rgba(237,234,228,.06);transition:transform .55s cubic-bezier(.77,0,.18,1)}
#pre i:nth-child(2){transition-delay:.07s}
#pre i:nth-child(3){transition-delay:.14s}
body.ready #pre i{transform:translateY(-101%)}
/* paint-first reveal wipe (LCP prototype B — see buildPre): #pre.wipe never
   blocks first paint. Bars start below the viewport and sweep up OVER the
   already-painted page, exiting top — same curve, read as a projector blink. */
#pre.wipe i{transform:translateY(101%);transition:transform .9s cubic-bezier(.77,0,.18,1)}
#pre.wipe i:nth-child(2){transition-delay:.08s}
#pre.wipe i:nth-child(3){transition-delay:.16s}
#pre .plabel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
#pre .plabel svg{height:46px;width:auto;filter:drop-shadow(0 0 26px rgba(252,46,143,.45))}
body.ready #pre .plabel{opacity:0}

/* film timeline scrubber */
#tl{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:14px 44px 14px;opacity:0;transition:opacity 1s ease 1.2s;pointer-events:none;
  background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 78%,transparent) 45%)}
body.over-dark #tl{background:linear-gradient(transparent,rgba(12,14,16,.72) 45%)}
body.ready #tl{opacity:1}
#tl .bar{position:relative;height:2px;background:color-mix(in srgb,var(--tx-dim) 35%,transparent)}
#tl .ph{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:var(--magenta);transform:translate(-50%,-50%);box-shadow:0 0 16px rgba(252,46,143,.7)}
#tl .marks{display:flex;justify-content:space-between;margin-top:8px;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--tx-dim)}
body.over-dark #tl .marks{color:rgba(237,234,228,.6)}
#tl .marks button{cursor:pointer;pointer-events:auto;font-weight:500;transition:color .3s;
  background:none;border:none;padding:2px 0;color:inherit;font-family:inherit;font-size:inherit;
  letter-spacing:inherit;text-transform:inherit}
#tl .marks button:hover,#tl .marks button.on{color:var(--magenta)}
@media(max-width:860px){#tl{display:none}}

/* custom cursor */
#cur{position:fixed;z-index:500;width:9px;height:9px;border-radius:50%;background:var(--magenta);pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference}
#curRing{position:fixed;z-index:500;width:42px;height:42px;border-radius:50%;border:1px solid var(--magenta);pointer-events:none;transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;opacity:.55}
body.cur-hover #curRing{width:78px;height:78px;opacity:1}

/* nav over dark hero media: white text/links, no scrim */
body.over-dark nav.giq{background:linear-gradient(rgba(12,14,16,.5),transparent)}
body.over-dark nav.giq a{color:#fff}
body.over-dark nav.giq .chat-btn{border-color:#fff}
body.over-dark nav.giq .chat-btn:hover{border-color:var(--magenta)}
body.over-dark nav.giq .tgl{border-color:rgba(255,255,255,.4);background:transparent}
nav.giq{transition:background .5s ease,opacity 1s ease .7s,transform 1s ease .7s}

/* cine hero: full-bleed film cover */
.cine-hero{position:relative;height:100vh;overflow:hidden;display:flex;align-items:flex-end;background:#0C0E10}
.cine-hero .media{position:absolute;inset:0;overflow:hidden}
.cine-hero .media iframe{position:absolute;top:50%;left:50%;width:178vh;height:110%;min-width:110%;transform:translate(-50%,-50%);pointer-events:none}
.cine-hero .media video,.cine-hero .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,16,.42),transparent 40%,rgba(12,14,16,.85));pointer-events:none}
.cine-hero .ct{position:relative;z-index:3;width:100%;padding:0 6vw 12vh;color:#fff}
.cine-hero .crumb{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.cine-hero .crumb b{color:var(--magenta);font-weight:600}
.cine-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.4vw,120px);line-height:1;margin-top:3vh;max-width:1250px}
.cine-hero h1 em{font-style:italic;color:var(--magenta)}
.cine-hero h1 .line{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.cine-hero h1 .line span{display:inline-block;transform:translateY(115%)}
body.ready .cine-hero h1 .line span{animation:heroRise 1.4s cubic-bezier(.19,1,.22,1) forwards}
body.ready .cine-hero h1 .line:nth-child(2) span{animation-delay:.14s}
body.ready .cine-hero h1 .line:nth-child(3) span{animation-delay:.28s}
.cine-hero .lead{color:rgba(255,255,255,.85);font-size:clamp(15px,1.25vw,18px);line-height:1.7;max-width:540px;margin-top:3.5vh}

/* triptych panels (shared with home + reusable) */
/* still triptych: the doors never resize — hover is color + a magenta hairline,
   and the labels hold one locked baseline (homepage hero redesign, option A) */
.tript-hero{position:relative;height:100vh;display:flex;overflow:hidden;background:#0C0E10}
.tript-hero .panel{position:relative;flex:1;overflow:hidden;text-decoration:none;border-right:1px solid rgba(237,234,228,.1)}
.panel .media{position:absolute;inset:0}
.panel video,.panel .imgbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.95) brightness(.4) contrast(1.03);transform:scale(1.05);transition:filter 1s ease,transform 1.4s cubic-bezier(.19,1,.22,1)}
.panel iframe{position:absolute;top:50%;left:50%;width:178vh;height:101%;min-width:100%;transform:translate(-50%,-50%);filter:grayscale(.95) brightness(.4);transition:filter 1s ease;pointer-events:none}
.panel:hover video,.panel:hover .imgbg,.panel:hover iframe{filter:grayscale(0) brightness(.78)}
.panel:hover video,.panel:hover .imgbg{transform:scale(1)}
/* one continuous veil across all three doors — calms the seams, seats the headline.
   Stacked (≤860px) swaps this for per-door gradients so each label keeps its own bed. */
.tript-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,14,16,.62) 0%,rgba(12,14,16,.18) 26%,rgba(12,14,16,.1) 52%,rgba(12,14,16,.55) 78%,rgba(12,14,16,.94) 100%)}
/* per-door layer: focus-ring canvas on desktop, label gradient when stacked */
.panel::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none}
/* hover signature: a magenta hairline draws along the door's floor */
.panel::before{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.77,0,.18,1)}
.panel:hover::before,.panel:focus-visible::before{transform:scaleX(1)}
.panel .tag{position:absolute;top:13vh;left:2.4vw;z-index:3;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:rgba(237,234,228,.75)}
.panel .tag b{color:var(--magenta);font-weight:600;display:block;margin-bottom:8px;font-size:13px}
.panel .foot{position:absolute;left:2.4vw;right:2.4vw;bottom:11vh;z-index:3;color:#EDEAE4}
.panel .foot h2{font-weight:800;font-stretch:105%;text-transform:uppercase;font-size:clamp(20px,2.2vw,38px);line-height:1;white-space:nowrap;transition:color .4s}
.panel:hover .foot h2{color:#fff}
.panel .foot .it{font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.3vw,20px);color:rgba(237,234,228,.75);margin-top:1vh;display:block}
/* fade only — the label block never moves */
.panel .foot .go{display:inline-flex;align-items:center;gap:10px;margin-top:2.4vh;font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--magenta);opacity:0;transition:opacity .5s ease .08s}
.panel:hover .foot .go{opacity:1}

/* cinema chapter (full-bleed film rows) */
.chap{position:relative;height:92vh;overflow:hidden;display:flex;align-items:flex-end;margin:6vh 0}
.chap .clip{position:absolute;inset:0;z-index:1}
.chap .bgwrap{position:absolute;inset:0;overflow:hidden}
.chap .bgwrap iframe{position:absolute;top:50%;left:50%;width:178vh;height:110%;min-width:110%;transform:translate(-50%,-50%);pointer-events:none}
.chap .bgwrap img,.chap .bgwrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chap::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,16,.15),transparent 45%,rgba(12,14,16,.85));pointer-events:none}
.chap .inner{position:relative;z-index:3;width:100%;display:flex;justify-content:space-between;align-items:flex-end;padding:0 6vw 8vh;color:#fff}
.chap .inner .no{font-family:var(--serif);font-style:italic;font-size:clamp(50px,7vw,110px);line-height:1;color:var(--magenta);text-shadow:0 0 40px rgba(0,0,0,.5)}
.chap .inner h3{font-weight:800;font-stretch:108%;text-transform:uppercase;font-size:clamp(30px,4.6vw,76px);line-height:.98}
.chap .inner .it{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.7vw,26px);color:rgba(255,255,255,.85);margin-top:1.4vh;display:block}
.chap .inner .ccta{display:inline-flex;margin-top:3vh;border:1px solid rgba(255,255,255,.55);border-radius:100px;color:#fff;padding:14px 30px;text-decoration:none;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;transition:all .35s;backdrop-filter:blur(6px)}
.chap .inner .ccta:hover{background:var(--magenta-fill);border-color:var(--magenta-fill)}

/* ═══ stills mode (GLU-796) — the projection-booth pause ═══ */
#stills{position:fixed;right:44px;bottom:54px;z-index:130;display:flex;align-items:center;gap:12px;
  background:none;border:none;cursor:pointer;padding:0;opacity:0;transition:opacity 1s ease 1.4s}
body.ready #stills{opacity:1}
#stills .lb{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--tx-dim);
  opacity:0;transform:translateX(6px);transition:opacity .35s ease,transform .35s ease}
body.over-dark #stills .lb{color:rgba(237,234,228,.6)}
#stills:hover .lb,#stills:focus-visible .lb{opacity:1;transform:none}
html.stills #stills .lb{opacity:1;transform:none;color:var(--magenta)}
#stills .ic{width:40px;height:40px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tx) 30%,transparent);
  background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;transition:border-color .3s,box-shadow .3s}
#stills:hover .ic,#stills:focus-visible .ic{border-color:var(--magenta)}
#stills:focus-visible{outline:none}
#stills:focus-visible .ic{box-shadow:0 0 0 3px rgba(252,46,143,.35)}
#stills .pp{display:flex;gap:5px}
#stills .pp i{width:3px;height:13px;background:var(--tx)}
#stills .pt{display:none;width:0;height:0;border-left:12px solid var(--tx);border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;margin-left:3px}
html.stills #stills .pp{display:none}
html.stills #stills .pt{display:block}
html.stills #stills .ic{border-color:var(--magenta);box-shadow:0 0 18px rgba(252,46,143,.25)}
@media(max-width:860px){#stills{right:20px;bottom:20px}}
/* stills mode freezes every looping animation (films are paused in JS) */
html.stills .grain,html.stills .mq-track,html.stills .cine-hero .media img{animation-play-state:paused!important}

/* ═══ prefers-reduced-motion — poster frames, no shutter, no reveals ═══ */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none}
  .grain,.mq-track{animation:none!important}
  .cine-hero .media img{animation:none!important}
  /* html prefix outguns the per-page inline <style> blocks that come after this sheet */
  html .hero-title h1 .line span,html .phero h1 .line span,html .cine-hero h1 .line span{transform:none;transition:none;animation:none}
  html body.loaded .phero h1 .line span,html body.ready .cine-hero h1 .line span{animation:none}
  html .hero-title p{opacity:1;transition:none}
  #pre{display:none}
  .bar{transition:none}
  nav.giq,#tl,#stills{transition-property:background,border-color,box-shadow}
  nav.giq,#tl,#stills{opacity:1;transform:none}
}

@media(max-width:860px){
  .tript-hero{flex-direction:column}
  /* stacked doors: drop the hero-wide veil, give each door back its own label gradient */
  .tript-hero::after{display:none}
  .panel::after{z-index:auto;background:linear-gradient(180deg,rgba(12,14,16,.4),transparent 35%,transparent 60%,rgba(12,14,16,.85))}
  .tript-hero .panel{border-right:none;border-bottom:1px solid rgba(237,234,228,.12)}
  .panel .foot{bottom:3vh}
  /* stacked doors: the roman-numeral tags collide with the fixed nav logo and
     crowd the short panels — the foot h2 titles carry the identity (GLU-767) */
  .panel .tag{display:none}
  .chap{height:70vh}
}
/* touch devices never hover: keep the doors' "Enter →" cue lit (GLU-767) */
@media(hover:none){
  .panel .foot .go{opacity:1;transform:none}
}

/* ═══ FAQ / answer-ready blocks (AEO — GLU-811) ═══ */
.faq{padding:12vh 6vw;border-top:1px solid var(--line)}
.faq .answer{max-width:900px;margin:3vh 0 8vh}
.faq .answer p{color:var(--tx-dim);font-size:16px;line-height:1.8}
.faq .answer p+p{margin-top:2.2vh}
.faq .answer p b,.faq .answer p strong{color:var(--tx);font-weight:600}
.faq dl{border-top:1px solid var(--line);max-width:1000px}
.faq dt{font-weight:700;font-stretch:108%;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(17px,1.9vw,26px);line-height:1.15;padding:4.5vh 0 1.8vh;border-top:1px solid var(--line);color:var(--tx)}
.faq dt:first-of-type{border-top:none}
.faq dd{color:var(--tx-dim);font-size:15.5px;line-height:1.8;max-width:820px;padding-bottom:1vh;margin:0}
.faq dd a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--magenta);transition:color .3s}
.faq dd a:hover{color:var(--magenta)}

/* ═══ insight article pages (GLU-789) ═══ */
/* hero: essays carry longer titles than cases — tighter clamp + byline strip */
.ins-hero h1{font-size:clamp(34px,5.2vw,84px);max-width:1150px}
.ins-byline{display:flex;gap:5vw;flex-wrap:wrap;margin-top:4.5vh}
.ins-byline span{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.88);line-height:1.9;font-weight:500}
.ins-byline span b{display:block;color:var(--magenta);font-weight:600;font-size:10px;letter-spacing:.34em}

/* the essay — comfortable reading measure */
.prose{max-width:820px;margin:0 auto;padding:10vh 6vw 8vh}
.prose p{color:var(--tx-dim);font-size:clamp(15.5px,1.3vw,18px);line-height:1.85;margin:2.8vh 0}
.prose strong{color:var(--tx);font-weight:600}
.prose em{font-family:var(--serif);font-style:italic}
.prose a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--magenta);transition:color .3s}
.prose a:hover{color:var(--magenta)}
.prose h2,.prose h3,.prose h4,.prose h5{font-family:var(--serif);font-weight:400;line-height:1.18;color:var(--tx);margin:7vh 0 .8vh}
.prose h2{font-size:clamp(27px,2.7vw,42px)}
.prose h2 strong{font-style:italic;color:var(--magenta);font-weight:400}
.prose h3{font-size:clamp(24px,2.3vw,36px)}
.prose h4,.prose h5{font-size:clamp(21px,2vw,30px)}
.prose h6,.prose .kick{font-family:var(--sans);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--magenta);font-weight:600;margin:6vh 0 .6vh}
.prose ul,.prose ol{margin:2.8vh 0;padding-left:1.5em;color:var(--tx-dim)}
.prose li{font-size:clamp(15.5px,1.3vw,18px);line-height:1.8;margin:1.2vh 0}
.prose li::marker{color:var(--magenta)}
.prose blockquote{font-family:var(--serif);font-size:clamp(23px,2.5vw,38px);line-height:1.34;color:var(--tx);text-align:center;margin:9vh auto;max-width:660px}
.prose blockquote::before{content:'“';color:var(--magenta)}
.prose blockquote::after{content:'”';color:var(--magenta)}
.prose figure{margin:7vh 0;border-radius:6px;overflow:hidden;background:var(--bg-2)}
.prose figure img{width:100%;display:block}
.prose figure.vid{position:relative;background:#000}
.prose figure.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose hr{border:none;border-top:1px solid var(--line);margin:8vh 0}

/* the byline — about the author */
.ins-author{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12vh 6vw;transition:background .6s}
.ins-author .inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:180px 1fr;gap:4vw;align-items:center}
.ins-author .ph{width:180px;height:180px;border-radius:50%;object-fit:cover;background:var(--card);filter:grayscale(1) contrast(1.05);transition:filter .7s ease}
.ins-author:hover .ph{filter:grayscale(0)}
.ins-author h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.2vw,52px);line-height:1.1;margin-top:1.6vh}
.ins-author .bio{color:var(--tx-dim);font-size:15px;line-height:1.8;margin-top:2vh;max-width:640px}

/* next essay — the chain, in the spirit of the cases' Next Picture */
.ins-next{position:relative;height:74vh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-decoration:none}
.ins-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.4);transform:scale(1.05);transition:filter .9s ease,transform 1.4s cubic-bezier(.19,1,.22,1)}
.ins-next:hover img{filter:grayscale(.2) brightness(.55);transform:scale(1)}
.ins-next .nx{position:relative;z-index:3;text-align:center;color:#fff;padding:0 6vw}
.ins-next .nx .lab{font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ins-next .nx h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.2vw,84px);line-height:1.06;margin-top:2.4vh;max-width:1100px}
.ins-next .nx h2 em{font-style:italic;color:var(--magenta)}
.ins-next .nx .go{display:inline-flex;margin-top:3.4vh;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--magenta)}
.ins-back{display:flex;justify-content:space-between;align-items:center;padding:4vh 6vw;border-top:1px solid var(--line);flex-wrap:wrap;gap:2vh}

@media(max-width:900px){
  .ins-author .inner{grid-template-columns:1fr}
  .ins-author .ph{width:120px;height:120px}
  .ins-byline{gap:8vw;row-gap:2vh}
}

/* ═══ a11y — keyboard & focus (GLU-797) ═══ */

/* focus ring: a light ring over the film-dark surface with a faint magenta halo —
   the site's glow language. :where() keeps specificity low so components can tune it.
   Outlines follow each element's own border-radius; no geometry is changed. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid #EDEAE4;outline-offset:3px;
  box-shadow:0 0 0 5px rgba(252,46,143,.28)}
/* keep the CTA's ambient glow while focused */
.cta-btn:focus-visible{box-shadow:0 0 0 5px rgba(252,46,143,.28),0 0 50px rgba(252,46,143,.28)}
/* contact fields keep their magenta underline treatment — no halo */
.fld input:focus-visible,.fld textarea:focus-visible{box-shadow:none}
/* tiled grids (client wall): draw the ring inward so neighbours can't cover it */
.cwall .cell:focus-visible{outline-offset:-4px;box-shadow:none;z-index:3}
/* skip target: programmatic focus, no ring needed — the jump is the feedback */
[tabindex="-1"]:focus{outline:none;box-shadow:none}

/* skip-to-content — hidden off-canvas until focused, styled to the dark theme */
.skip-link{position:fixed;top:18px;left:18px;z-index:600;transform:translateY(-260%);
  background:var(--bg-2);color:var(--tx);border:1px solid var(--magenta);border-radius:100px;
  padding:14px 28px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;text-decoration:none;box-shadow:0 14px 44px rgba(0,0,0,.55),0 0 30px rgba(252,46,143,.25);
  transition:transform .3s cubic-bezier(.19,1,.22,1)}
.skip-link:focus{transform:none}

/* triptych doors: keyboard focus lights the door like hover does (color film,
   hairline, Enter cue). The ring is drawn on the panel's ::after overlay (its
   own outline would paint beneath the positioned film media) and sits inside
   the panel — the inset ring marks which door holds focus */
.tript-hero .panel:focus-visible{outline:none;box-shadow:none}
.tript-hero .panel:focus-visible::after{outline:2px solid #EDEAE4;outline-offset:-8px}
.panel:focus-visible video,.panel:focus-visible .imgbg,.panel:focus-visible iframe{filter:grayscale(0) brightness(.78)}
.panel:focus-visible video,.panel:focus-visible .imgbg{transform:scale(1)}
.panel:focus-visible .foot h2{color:#fff}
.panel:focus-visible .foot .go{opacity:1}

/* services dropdown: Escape parks the panel closed while the trigger keeps focus */
.dd.dd-off .dd-panel{opacity:0;visibility:hidden;transform:translate(-50%,12px)}
.dd.dd-off>a .caret{transform:none}
/* focused panel links read like hovered ones */
.dd-panel a:focus-visible{background:var(--bg-2);outline-offset:-2px;box-shadow:none}
.dd-panel a:focus-visible .ar{opacity:1;transform:none}

/* film lightbox: the frame's overflow:hidden (inline on case pages, .frame on
   work.html) was clipping the title and close button that hang above it —
   keyboard focus landed on an invisible control. Let the frame overflow and
   round/clip the media on the mount instead; !important beats the inline style. */
.flb>div,.flb .frame{overflow:visible!important}
#flbMount{border-radius:6px;overflow:hidden}

/* film timeline scrubber: ring tight to the small marks */
#tl .marks button:focus-visible{outline-offset:2px;box-shadow:none;color:var(--magenta)}

/* custom cursor yields to the keyboard: never sits over the real focus ring */
#cur{transition:opacity .25s}
body.kb-nav #cur,body.kb-nav #curRing{opacity:0}

/* ═══ newsletter capture (GLU-809) — footer subscribe + article-end block ═══
   Markup is injected by site.js (buildNewsletter) — one shared .nl-form
   pattern; the footer column and the article-end .nl-cta both use it. */
footer.giq .f-col.f-sub{max-width:320px;min-width:240px}
.nl-lead{color:var(--tx-dim);font-size:14px;line-height:1.9}
/* the field row borrows the contact form's underline language: quiet hairline,
   magenta sweep on focus */
.nl-row{position:relative;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);margin-top:1.8vh}
.nl-row::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--magenta);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.77,0,.18,1)}
.nl-row:focus-within::after{transform:scaleX(1)}
.nl-row input{flex:1;min-width:0;background:none;border:none;border-radius:0;color:var(--tx);
  font-family:var(--serif);font-size:17px;padding:12px 0;outline:none}
.nl-row input::placeholder{color:var(--tx-dim);font-style:italic}
/* arrow submit: ≥44px effective tap target — padding grows the hit box, the
   negative margin gives the layout back (the GLU-768 trick) */
.nl-row button{background:none;border:none;cursor:pointer;color:var(--tx-dim);font-family:var(--serif);
  font-size:22px;line-height:1;padding:14px 14px;margin:-14px -14px -14px 0;transition:color .3s,transform .3s}
.nl-row button:hover,.nl-row button:focus-visible{color:var(--magenta);transform:translateX(4px)}
.nl-row button[disabled]{opacity:.55;cursor:wait;transform:none}
.nl-msg{display:none;margin-top:1.6vh;font-size:12.5px;line-height:1.7;color:var(--tx-dim)}
.nl-msg.show{display:block}
.nl-msg b{color:var(--tx);font-weight:600}
.nl-msg i{font-family:var(--serif);font-style:italic;color:var(--tx)}
.nl-msg a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--magenta);transition:color .3s}
.nl-msg a:hover{color:var(--magenta)}
.nl-form.err .nl-row{border-bottom-color:var(--magenta)}
/* success: the field disappears, the confirmation stays in the aria-live node */
.nl-form.done .nl-row,.nl-form.done .nl-lead{display:none}
/* honeypot: parked far off-canvas; real visitors never see or tab into it */
.nl-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
/* article-end capture moment — injected on every insight-*.html by site.js */
.nl-cta{padding:13vh 6vw;border-top:1px solid var(--line);text-align:center}
.nl-cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.8vw,76px);line-height:1.06;margin-top:2.6vh}
.nl-cta h2 em{font-style:italic;color:var(--magenta)}
.nl-cta .nl-sub{color:var(--tx-dim);font-size:15.5px;line-height:1.8;max-width:540px;margin:3vh auto 0}
.nl-cta .nl-form{max-width:480px;margin:4.5vh auto 0;text-align:left}
.nl-cta .nl-row input{font-size:clamp(19px,1.6vw,24px)}
.nl-cta .nl-msg{font-size:13.5px;text-align:center}

/* ═══ results strip — social proof module (GLU-808) ═══
   One reusable strip: rotating client quotes + client-attributed stat blocks
   (the Atlantis Impact pattern — big serif number + label). Generic by design
   so other pages (e.g. industry pages, GLU-807) can drop it in.

   Composition:
     <section class="pstrip"><div class="pstrip-inner">
       <div class="pstrip-quotes"> kicker + .pstrip-stage > .pq×N + .pstrip-dots </div>
       <div class="pstrip-stats"> .ps×N </div>
     </div></section>
   — quote rotation is wired automatically in site.js boot (needs ≥2 .pq);
     dots follow the homepage rotator's 34×24 hit-area treatment (GLU-795)
   — either column may be omitted; a lone child spans the full width
     (.pstrip-stats works standalone inside any section as a plain stat grid)
   — a stat card may be an <a href="case-…"> (hover ring + arrow) or a <div>
   — the quotes column is sized to host a future video-testimonial slot */
.pstrip{padding:14vh 6vw;background:radial-gradient(720px 380px at 30% 50%,var(--seam-mid),transparent 70%)}
.pstrip-inner{max-width:1540px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:6vw;align-items:center}
.pstrip-inner>:only-child{grid-column:1/-1}
.pstrip-stage{position:relative;min-height:32vh;margin-top:4vh}
.pq{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;display:flex;flex-direction:column;justify-content:center}
.pq.active{opacity:1}
.pq blockquote{font-family:var(--serif);font-size:clamp(22px,2.2vw,38px);line-height:1.32;font-weight:400}
.pq blockquote::before{content:'“';color:var(--magenta)}
.pq blockquote::after{content:'”';color:var(--magenta)}
.pq cite{display:block;margin-top:3.5vh;font-style:normal;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--tx-dim);line-height:1.9}
.pq cite b{color:var(--tx);font-weight:600}
/* 34×24 hit area, 2px visual bar via ::after (WCAG 2.5.8 comfort — GLU-795) */
.pstrip-dots{display:flex;gap:12px;margin-top:1.5vh}
.pstrip-dots button{width:34px;height:24px;background:none;border:none;padding:0;position:relative;cursor:pointer}
.pstrip-dots button::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--line);transition:background .4s}
.pstrip-dots button.on::after{background:var(--magenta)}
.pstrip-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;border:1px solid var(--line)}
.pstrip-quotes+.pstrip-stats{grid-template-columns:1fr 1fr} /* paired with quotes: 2×2 */
.ps{position:relative;background:var(--card);padding:34px 28px;text-decoration:none;display:block}
.ps .v{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(28px,2.6vw,46px);color:var(--magenta);line-height:1.05}
.ps .l{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-dim);margin-top:12px;line-height:1.6}
.ps .src{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--tx-dim);margin-top:14px}
.ps .src b{color:var(--tx);font-weight:600}
a.ps::after{content:'';position:absolute;inset:0;border:1px solid transparent;transition:border-color .35s}
a.ps:hover::after{border-color:rgba(252,46,143,.5)}
a.ps .src i{font-style:normal;color:var(--magenta);opacity:0;transform:translateX(-4px);display:inline-block;transition:all .35s}
a.ps:hover .src i{opacity:1;transform:none}
@media(max-width:900px){
  .pstrip{padding:12vh 6vw}
  .pstrip-inner{grid-template-columns:1fr;gap:7vh}
  .pstrip-stage{min-height:40vh}
  .pstrip-quotes+.pstrip-stats{grid-template-columns:1fr}
}

/* ═══ insights engine (GLU-804) — partner journal: essays the partner authored ═══ */
.pf-writing{list-style:none;max-width:820px}
.pf-writing li{border-bottom:1px solid var(--line)}
.pf-writing li:first-child{border-top:1px solid var(--line)}
.pf-writing a{display:flex;justify-content:space-between;align-items:baseline;gap:3vw;padding:2.6vh 0;text-decoration:none;color:var(--tx)}
.pf-writing .t{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.7vw,26px);line-height:1.2;
  background-image:linear-gradient(var(--magenta),var(--magenta));background-repeat:no-repeat;
  background-size:0% 1px;background-position:0 96%;transition:background-size .5s cubic-bezier(.77,0,.18,1)}
.pf-writing a:hover .t{background-size:100% 1px}
.pf-writing .m{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tx-dim);white-space:nowrap;flex:0 0 auto}
.pf-writing .m b{color:var(--magenta);font-weight:600}
@media(max-width:640px){
  .pf-writing a{flex-direction:column;align-items:flex-start;gap:.8vh}
  .pf-writing .m{white-space:normal}
}

/* ═══ cookie consent banner (GLU-979) — the pre-feature notice ═══
   Markup is injected by site.js (buildConsent) — bottom-anchored dark card
   in the film idiom: card surface, hairline border, magenta accent rail on
   the decline note (ported from the live banner's language). Positions are
   chosen around the fixed projection-booth chrome so nothing is obscured:
     desktop — #tl owns the bottom strip (~60px, z120) → card sits at 96px,
               left-anchored; #stills lives bottom-right (z130), clear of it
     ≤860px  — #tl is hidden; #stills sits right:20px bottom:20px (40px tall)
               → card spans the width at bottom:72px, above the toggle
   z160: above #tl/#stills and the cinematic bars, below the cursor (500)
   and skip-link (600). Reduced motion: no slide — it appears in place. */
#consent{position:fixed;left:44px;bottom:96px;z-index:160;max-width:600px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:24px 26px;box-shadow:0 30px 70px -20px var(--shadow),0 0 46px rgba(252,46,143,.08);
  opacity:0;transform:translateY(16px);visibility:hidden;
  transition:opacity .6s cubic-bezier(.19,1,.22,1),transform .6s cubic-bezier(.19,1,.22,1),visibility 0s linear .6s}
#consent.show{opacity:1;transform:none;visibility:visible;
  transition:opacity .6s cubic-bezier(.19,1,.22,1),transform .6s cubic-bezier(.19,1,.22,1)}
#consent .c-kick{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--magenta);font-weight:600;margin-bottom:12px}
#consent p{font-size:12.5px;line-height:1.7;color:var(--tx-dim);font-weight:300}
#consent p+p{margin-top:10px}
#consent p a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--magenta);transition:color .3s}
#consent p a:hover{color:var(--magenta)}
#consent .c-note{padding-left:14px;border-left:2px solid var(--magenta)}
#consent .c-gpc{color:var(--tx);padding-left:14px;border-left:2px solid var(--magenta)}
#consent .c-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
/* dark ink on the magenta pill — white at this size fails WCAG 4.5:1 (the
   GLU-798 discipline); #0C0E10 on #FC2E8F clears it */
#consent .c-actions button{cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;border-radius:100px;padding:12px 28px;min-height:44px;min-width:44px;
  background:var(--magenta-fill);border:1px solid var(--magenta-fill);color:#fff;transition:all .35s ease}
#consent .c-actions button:hover{background:var(--tx);border-color:var(--tx);color:#0C0E10}
#consent .c-actions button.c-ghost{background:none;border-color:var(--line);color:var(--tx)}
#consent .c-actions button.c-ghost:hover{border-color:var(--magenta);color:var(--magenta);background:none}
@media(max-width:860px){#consent{left:12px;right:12px;bottom:72px;max-width:none;padding:20px}}
@media (prefers-reduced-motion: reduce){
  /* both states: .show carries its own transition list and would outrank a
     bare #consent rule */
  #consent,#consent.show{transition:none;transform:none}
}

/* ═══ mobile MENU overlay (GLU-996) ═══
   ≤900px the nav hide-rule leaves only the logo + Let's Chat pill; the MENU
   trigger (old Webflow pattern: MENU → ● CLOSE) opens a full-screen dark
   dialog carrying the whole map. Markup injected by site.js (buildNav).
   z-map: the overlay (300) covers the page chrome — consent 160, bars 150,
   #stills 130, #tl 120 — and sits under the grain (200 is below 300, so the
   film grain yields), cursor (500) and skip-link (600); body.menu-open raises
   nav.giq to 310 so the logo, trigger and chat pill stay visible + operable.
   Desktop ≥901px: trigger stays display:none, overlay is hard-hidden. */
.menu-li{display:none}
/* trigger: nav typography (12px, .22em caps); GLU-768 hit-box trick for ≥44px */
.menu-trg{background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  color:var(--tx);font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  padding:12px 10px;margin:-12px -10px;min-height:44px;min-width:44px}
body.over-dark nav.giq .menu-trg{color:#fff}
.menu-trg .mt-dot{display:none;color:var(--magenta);font-size:8px;line-height:1}
.menu-trg[aria-expanded="true"] .mt-dot{display:inline-block}
body.menu-open{overflow:hidden}
body.menu-open nav.giq{z-index:310}
#mnav{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;
  gap:5vh;padding:14vh 8vw 4vh;overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .45s ease}
#mnav[hidden]{display:none}
#mnav.open{opacity:1}
#mnav ul{list-style:none}
/* staggered reveal: each line rises as the room lights come up */
.mnav-links>li{opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s cubic-bezier(.19,1,.22,1)}
#mnav.open .mnav-links>li{opacity:1;transform:none}
.mnav-links>li:nth-child(2){transition-delay:.05s}
.mnav-links>li:nth-child(3){transition-delay:.1s}
.mnav-links>li:nth-child(4){transition-delay:.15s}
.mnav-links>li:nth-child(5){transition-delay:.2s}
.mnav-links>li:nth-child(6){transition-delay:.25s}
.mnav-links a{text-decoration:none;display:inline-block;transition:color .3s}
/* big serif display lines — the v4 headline voice */
.mnav-links>li>a{font-family:var(--serif);font-weight:400;font-size:clamp(34px,9vw,58px);line-height:1.14;color:var(--tx);padding:4px 0}
.mnav-links>li>a:hover,.mnav-links>li>a.on{color:var(--magenta);font-style:italic}
/* the three service lines — serif italic, quieter, still ≥44px targets */
.mnav-sub{margin:4px 0 12px}
.mnav-sub a{font-family:var(--serif);font-style:italic;font-size:clamp(19px,5vw,25px);line-height:1.2;color:var(--tx-dim);padding:11px 0}
.mnav-sub a:hover,.mnav-sub a.on{color:var(--magenta)}
/* tagline moment at the overlay foot — locked line, small caps */
.mnav-foot{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--tx-dim);flex:0 0 auto;line-height:1.8}
@media(min-width:901px){#mnav{display:none!important}}
@media (prefers-reduced-motion: reduce){
  /* the reveal lands whole — no fade, no stagger, no rise (GLU-796 discipline) */
  #mnav{transition:none}
  #mnav .mnav-links>li{transition:none;transform:none}
}