:root{--ink:#070b22;--paper:#f4efff;--acid:#3fe0dc;--pink:#f52fc8;--violet:#2a1048;--line:#ffffff2b;--pad:clamp(1rem,5vw,5rem)}
*{box-sizing:border-box}html{width:100%;height:100%;scroll-snap-type:y mandatory;scroll-behavior:smooth;background:var(--ink)}body{width:100%;height:100%;margin:0;overflow-x:hidden;color:var(--paper);font-family:Arial,Helvetica,sans-serif;background:var(--ink)}.skip{position:fixed;top:-4rem;left:1rem;z-index:99;background:#fff;color:#000;padding:.7rem}.skip:focus{top:1rem}.nav{position:fixed;z-index:20;inset:0 0 auto 0;height:4rem;display:flex;align-items:center;gap:2rem;padding:0 var(--pad);border-bottom:1px solid var(--line);background:#111214c9;backdrop-filter:blur(14px)}.mark{color:#fff;text-decoration:none;font-size:.72rem;font-weight:900;letter-spacing:.18em}
.nav-email{margin-right:auto;display:inline-flex;align-items:center;justify-content:center;color:var(--acid);opacity:.85;transition:opacity .15s ease}
.nav-email:hover{opacity:1}
/* A real tap target, not a decorative shrink — 44px is the accepted
   minimum touch-target size, the icon itself stays visually small
   inside it via padding. */
@media(max-width:760px){.nav-email{min-width:44px;min-height:44px;margin-left:-.5rem}.nav-email svg{width:20px;height:20px}}.nav nav{display:flex;gap:1.5rem}.nav nav a{color:#fff;text-decoration:none;text-transform:uppercase;font-size:.62rem;font-weight:800;letter-spacing:.12em}.nav nav a:hover{color:var(--acid)}.motion-toggle{border:1px solid #ffffff55;background:transparent;color:var(--acid);padding:.5rem .65rem;font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.keyart{--portrait-shift:0px;--gyro-x:0px;--gyro-y:0px;position:fixed;z-index:0;inset:0;width:100vw;height:100svh;overflow:hidden;background:#514d49}.backdrop{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;object-position:center center;transform:translate3d(var(--gyro-x),calc(var(--portrait-shift) + var(--gyro-y)),0) scale(1.025);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease;will-change:transform,opacity}.backdrop-smile{opacity:1}.backdrop-stare{inset:-2% -2% -2% auto;width:66vw;opacity:0;object-fit:cover;object-position:center 22%;background:transparent;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%)}.keyart:not(.is-smiling) .backdrop-smile{opacity:0}.keyart:not(.is-smiling) .backdrop-stare{opacity:1}.photo-shade{position:absolute;inset:0;background:linear-gradient(90deg,#111214f5 0%,#111214c9 34%,#11121440 61%,#11121410 100%),linear-gradient(0deg,#11121475,transparent 42%)}.frames{position:relative;z-index:2}.panel{position:relative;width:100vw;height:100svh;min-height:100svh;max-height:100svh;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;padding:5rem 52vw 2rem var(--pad)}.copy{width:min(100%,700px);max-height:calc(100svh - 7rem);overflow:hidden}.copy.wide{width:min(100%,760px)}.kicker{margin:0 0 .8rem;color:var(--acid);font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.19em}h1,h2,blockquote{margin:0;color:#fff;font-family:Arial Black,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.055em;line-height:.88}h1{font-size:clamp(3.6rem,7vw,8rem)}h2{font-size:clamp(2.7rem,5vw,5.6rem)}.lead{max-width:38rem;margin:1.25rem 0;font-size:clamp(.95rem,1.4vw,1.25rem);line-height:1.5}.actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.2rem}.button{display:inline-block;border:1px solid #ffffff70;background:transparent;color:#fff;padding:.8rem 1rem;text-decoration:none;text-transform:uppercase;font-size:.62rem;font-weight:900;letter-spacing:.11em;cursor:pointer}.button.solid{border-color:var(--acid);background:var(--acid);color:#111}.count{position:absolute;right:1.5rem;bottom:1rem;color:#fff8;font-size:.58rem;letter-spacing:.14em}.credits{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}.credit{position:relative;min-height:7.4rem;padding:1rem 2.4rem;border:1px solid #ffffff75;background:linear-gradient(145deg,#111214e8,#242529d6);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:0 14px 38px #0005}.credit::before,.credit::after{position:absolute;top:50%;translate:0 -50%;color:#fff;font-family:Georgia,serif;font-size:3rem;font-weight:300;opacity:.92}.credit::before{content:'❮';left:.65rem}.credit::after{content:'❯';right:.65rem}.network-logo{width:auto;height:2.1rem;max-width:11rem;object-fit:contain;object-position:center;margin-bottom:.55rem;filter:brightness(0) invert(1) drop-shadow(0 4px 7px #000)}.credit strong{color:#fff;font-size:.86rem;text-transform:uppercase;letter-spacing:.08em}.credit small{margin-top:.3rem;color:#ffffffb8;font-size:.58rem;text-transform:uppercase;letter-spacing:.08em}.training{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}.training-card{min-height:8rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:1rem;border:1px solid var(--line);background:#111214c2;color:#fff;text-decoration:none}.training-card img{width:auto;height:2rem;max-width:8rem;object-fit:contain;margin-bottom:.7rem;filter:drop-shadow(0 3px 5px #000b)}.training-card span{font-size:.82rem;font-weight:800}.training-card small{margin-top:.3rem;color:var(--acid);font-size:.52rem;text-transform:uppercase;letter-spacing:.09em}.pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}.pill{border:1px solid #ffffff50;border-radius:99px;padding:.5rem .68rem;color:#fff;font-size:.58rem;text-transform:uppercase;letter-spacing:.07em}blockquote{font-size:clamp(2.6rem,4.8vw,5.3rem)}form{display:grid;gap:.48rem;margin-top:.7rem}.fields{display:grid;grid-template-columns:1fr 1fr;gap:.48rem}label{display:grid;gap:.2rem;color:var(--acid);font-size:.52rem;text-transform:uppercase;letter-spacing:.09em}input,select,textarea{width:100%;border:1px solid #ffffff35;background:#111214df;color:#fff;padding:.52rem;font:inherit}textarea{height:3.5rem;resize:none}.form-status{min-height:.8rem;margin:0;font-size:.65rem}.social{margin-top:1.25rem}.social a{color:var(--acid);margin-right:.7rem;text-transform:capitalize;font-size:.65rem}.contact-panel small{color:#ffffff75;display:block;margin-top:1rem}
.contact-panel small.build-credit{display:block;margin-top:.5rem;padding-top:.65rem;border-top:1px solid var(--line);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:#ffffff70}
.contact-panel small.build-credit a{color:var(--acid);text-decoration:none;font-weight:700}
.contact-panel small.build-credit a:hover{text-decoration:underline}.rates-page{scroll-snap-type:none}
@media(max-width:760px){.nav{height:3.5rem;padding:0 1rem;gap:.5rem}.nav nav a{display:none}.mark{font-size:.62rem}.motion-toggle{display:block}.backdrop{inset:0;width:100%;height:52svh;object-fit:contain;object-position:center top;background:#514d49}.photo-shade{background:linear-gradient(0deg,#111214 0%,#111214 7%,#11121499 28%,transparent 60%)}.panel{align-items:flex-end;padding:48svh 1rem 1rem}.copy{width:100%;max-height:calc(52svh - 1rem)}h1{font-size:clamp(2.8rem,14vw,4.4rem)}h2{font-size:clamp(2.1rem,9.5vw,3.3rem)}.lead{margin:.65rem 0;font-size:.84rem;line-height:1.35}.kicker{margin-bottom:.45rem}.actions{margin-top:.6rem}.button{padding:.62rem .72rem;font-size:.54rem}.credits{gap:.3rem;margin-top:.5rem}.credit{min-height:5.5rem;padding:.5rem 1.65rem}.credit::before,.credit::after{font-size:2rem}.credit::before{left:.35rem}.credit::after{right:.35rem}.backdrop-stare{inset:0;width:100%;height:54svh;object-fit:cover;object-position:center 18%;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%)}.network-logo{height:1.35rem;max-width:8rem;margin-bottom:.3rem}.credit strong{font-size:.7rem}.credit small{font-size:.5rem}.training{gap:.35rem;margin-top:.5rem}.training-card{min-height:5.2rem;padding:.55rem}.training-card img{height:1.25rem;margin-bottom:.35rem}.training-card span{font-size:.65rem}.pills{gap:.25rem;margin-top:.55rem}.pill{padding:.36rem .48rem;font-size:.48rem}.fields{grid-template-columns:1fr 1fr}form{gap:.3rem;margin-top:.4rem}input,select,textarea{padding:.36rem;font-size:.68rem}textarea{height:2.5rem}.count{right:.8rem;bottom:.55rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.backdrop{transition:none;transform:none}.motion-toggle{display:none}}/* Locked Miami swipe deck */
html,body{overscroll-behavior:none;background:#070b22}body{position:fixed;inset:0;overflow:hidden}.nav{background:#070b22d9;border-bottom-color:#3fe0dc55}.mark,.nav nav a:hover,.kicker,label,.social a,.training-card small{color:var(--acid)}.motion-toggle{color:var(--pink);border-color:#f52fc877}.keyart{background:radial-gradient(circle at 82% 22%,#2a1048 0%,#070b22 70%)}.photo-shade{background:linear-gradient(90deg,#070b22fa 0%,#100d32da 32%,#2a104855 58%,transparent 78%),linear-gradient(0deg,#070b2295,transparent 45%)}.frames{height:100svh;display:flex;flex-direction:column;transform:translate3d(0,var(--panel-offset,0svh),0);transition:transform .62s cubic-bezier(.76,0,.24,1);will-change:transform}.panel{flex:0 0 100svh;scroll-snap-align:none}.panel::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(125deg,#3fe0dc0b,transparent 38%,#f52fc80d)}.panel:nth-child(even)::before{background:linear-gradient(125deg,#f52fc814,transparent 42%,#3fe0dc0d)}.button.solid{border-color:var(--pink);background:var(--pink);color:#070b22;box-shadow:0 0 28px #f52fc844}.button.line{border-color:#3fe0dc99}.pill{border-color:#3fe0dc88}.credit{border-color:#f4efff8c;background:linear-gradient(145deg,#070b22ed,#2a1048d9);box-shadow:0 14px 38px #02031499,0 0 24px #f52fc818}.training-card{background:linear-gradient(145deg,#070b22e8,#2a1048c9)}input,select,textarea{background:#070b22e8}.deck-controls{position:fixed;z-index:30;right:1.2rem;top:50%;translate:0 -50%;display:grid;justify-items:center;gap:.55rem;padding:.55rem;border:1px solid #3fe0dc66;background:#070b22c9;backdrop-filter:blur(12px);box-shadow:0 0 28px #3fe0dc20}.deck-controls button{width:2.2rem;height:2.2rem;border:1px solid #f52fc888;background:#2a1048;color:#fff;font-size:1.15rem;cursor:pointer}.deck-controls button:hover{background:var(--pink);color:#070b22}.deck-controls button:disabled{opacity:.22;cursor:default}.deck-controls span{color:var(--acid);font-size:.5rem;font-weight:900;letter-spacing:.1em;writing-mode:vertical-rl}.count{display:none}
@media(max-width:760px){.deck-controls{right:.55rem;top:auto;bottom:.55rem;translate:0;display:flex;align-items:center}.deck-controls span{writing-mode:horizontal-tb}.photo-shade{background:linear-gradient(0deg,#070b22 0%,#070b22 8%,#100d32b8 30%,transparent 64%)}.panel{padding-right:3.6rem}}
@media(prefers-reduced-motion:reduce){.frames{transition:none}}.sag-badge{flex:0 0 auto;border:1px solid #fff;padding:.42rem .58rem;color:#fff;font-size:.56rem;font-weight:900;letter-spacing:.1em;line-height:1;background:#070b22b8;box-shadow:0 0 18px #3fe0dc35}.sag-badge::before{content:'◆';margin-right:.35rem;color:var(--pink);font-size:.5rem}.contact-rule{margin:.55rem 0;color:#fff;font-size:.72rem;line-height:1.45}.contact-rule strong{color:var(--pink)}.contact-rule a{color:var(--acid);font-weight:900}@media(max-width:760px){.sag-badge{font-size:.42rem;padding:.34rem .4rem}.sag-badge::before{display:none}}.welcome-audio{display:grid;gap:.55rem;max-width:560px;margin:1.2rem 0;padding:1rem;border:1px solid #3fe0dc88;background:linear-gradient(135deg,#070b22e8,#2a1048d6);box-shadow:0 15px 36px #02031488,0 0 25px #3fe0dc18}.welcome-audio span{color:var(--pink);font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.13em}.welcome-audio audio{width:100%;height:3rem;accent-color:var(--pink)}/* AOOS client avatar kiosk: one locked 45-second synchronized panel. */
.avatar-panel,.reel-panel{padding:4.5rem var(--pad) 1.5rem;background:radial-gradient(circle at 25% 45%,#f52fc824,transparent 36%),linear-gradient(135deg,#070b22a8,#2a104885)}.kiosk-shell{width:min(1180px,100%);height:min(78svh,720px);margin:auto;display:grid;grid-template-columns:minmax(280px,.82fr) minmax(360px,1.18fr);align-items:center;gap:clamp(1.2rem,5vw,5rem)}.kiosk-portrait{position:relative;align-self:stretch;min-height:0;display:grid;place-items:end center;overflow:hidden;border:1px solid #3fe0dc77;border-radius:clamp(1rem,3vw,2.5rem);background:radial-gradient(circle at 50% 36%,#3fe0dc38,#2a1048 48%,#070b22 78%);box-shadow:0 24px 70px #020314aa,0 0 55px #3fe0dc1e}.kiosk-face{position:absolute;z-index:2;inset:2% 0 0;width:100%;height:98%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 25px 22px #0009);transition:opacity .38s ease,transform .8s ease}.kiosk-face{opacity:0}.kiosk-portrait[data-portrait="front-master"] .kiosk-face[data-state="front-master"],.kiosk-portrait[data-portrait="profile-left"] .kiosk-face[data-state="profile-left"],.kiosk-portrait[data-portrait="three-quarter"] .kiosk-face[data-state="three-quarter"],.kiosk-portrait[data-portrait="expression-smile"] .kiosk-face[data-state="expression-smile"]{opacity:1}.kiosk-portrait.is-speaking .kiosk-face{animation:kioskBreath 1.7s ease-in-out infinite}.kiosk-orbit{position:absolute;z-index:1;width:72%;aspect-ratio:1;border:1px solid #f52fc8aa;border-radius:50%;box-shadow:0 0 55px #f52fc866;animation:kioskOrbit 4s ease-in-out infinite alternate}.kiosk-live{position:absolute;z-index:4;left:1rem;bottom:1rem;padding:.42rem .58rem;background:#070b22e8;border:1px solid #f52fc899;color:#fff;font-size:.52rem;font-weight:900;letter-spacing:.12em}.kiosk-copy{min-width:0}.kiosk-cue{min-height:12rem;display:flex;flex-direction:column;justify-content:center}.kiosk-cue h2{font-size:clamp(3rem,6vw,6.4rem)}.kiosk-cue.roll{animation:kioskRoll .48s cubic-bezier(.2,.8,.2,1)}.kiosk-transcript{min-height:4.6rem;max-width:700px;color:#ffffffa8;font-size:clamp(.8rem,1.25vw,1rem);line-height:1.65}.kiosk-transcript .spoken{color:#fff}.kiosk-transcript .current{color:var(--acid);font-weight:900;text-shadow:0 0 14px #3fe0dc88}.kiosk-progress{height:3px;margin:1rem 0;background:#ffffff22;overflow:hidden}.kiosk-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--pink),var(--acid));box-shadow:0 0 16px var(--acid)}.prototype-note{color:#ffffff78;font-size:.55rem;text-transform:uppercase;letter-spacing:.09em}
#kioskLabel.ticker-in{animation:tickerFade .4s ease}
@keyframes tickerFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
#kioskBody a{color:var(--acid);text-decoration:underline}@keyframes kioskRoll{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes kioskBreath{50%{transform:scale(1.018) translateY(-.35%)}}@keyframes kioskOrbit{to{transform:scale(1.12);border-color:#3fe0dc;box-shadow:0 0 75px #3fe0dc77}}
@media(max-width:760px){.avatar-panel{padding:3.8rem 3.3rem .7rem .7rem}.kiosk-shell{height:calc(100svh - 4.5rem);grid-template-columns:42% 58%;gap:.65rem}.kiosk-portrait{border-radius:.8rem}.kiosk-live{left:.35rem;bottom:.35rem;padding:.3rem;font-size:.38rem}.kiosk-cue{min-height:7.5rem}.kiosk-cue h2{font-size:clamp(1.75rem,8vw,2.8rem)}.kiosk-copy .lead{font-size:.72rem}.kiosk-transcript{min-height:5.8rem;max-height:5.8rem;overflow:hidden;font-size:.59rem;line-height:1.45}.kiosk-copy .actions{display:grid;grid-template-columns:1fr 1fr}.kiosk-copy .button{padding:.55rem .35rem}.prototype-note{display:none}}.avatar-standalone{position:fixed;inset:0;overflow:hidden}.standalone-kiosk{height:100svh}.standalone-kiosk .panel{padding-top:4.5rem}/* Portrait composition authority: Chaka must visually meet the typography. */
.backdrop-smile{inset:-4% -4% -4% -12%;width:116%;height:108%;object-fit:cover;object-position:78% center}
.backdrop-stare{inset:-3% 7vw -3% auto;width:72vw;height:106%;object-fit:cover;object-position:60% 22%}
.photo-shade{background:linear-gradient(90deg,#070b22fa 0%,#100d32d5 25%,#2a10483d 49%,transparent 70%),linear-gradient(0deg,#070b2288,transparent 42%)}
@media(max-width:760px){.backdrop-smile{inset:0 -8% auto -18%;width:126%;height:55svh;object-fit:contain;object-position:62% top}.backdrop-stare{inset:0 -4% auto -12%;width:116%;height:56svh;object-fit:contain;object-position:58% top}.photo-shade{background:linear-gradient(0deg,#070b22 0%,#070b22 7%,#100d3288 26%,transparent 58%)}}
/* Director order: navigation is gesture-only; no visible arrow controls. */
.deck-controls{display:none!important}

/* Credit cards: clean network ribbons, no giant bracket arrows. */
.credit::before,.credit::after{display:none!important;content:none!important}
.credit{padding-left:1rem;padding-right:1rem}
/* Compact homepage rate authority. */
.rates-panel{padding-right:var(--pad)}.home-rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;width:min(820px,100%);margin-top:.85rem}.home-rates article{min-height:6rem;padding:.72rem;border:1px solid #ffffff2e;background:#070b22c7;display:grid;align-content:center}.home-rates span{color:#ffffffb8;font-size:.53rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.home-rates strong{color:#fff;font-size:clamp(1.2rem,2.1vw,2rem);line-height:1.05}.home-rates small{color:var(--acid);font-size:.48rem;text-transform:uppercase;letter-spacing:.08em}.home-rates .rate-scope{border-color:#f52fc899}.home-rates .rate-scope strong{color:var(--pink)}
/* Rates + Voice merged into one panel. Voice rides underneath as its
   own labeled block instead of a full second screen. */
.voice-inline{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.voice-inline h3{margin:0;color:#fff;font-family:Arial Black,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.05}
.voice-inline .lead{margin:.5rem 0 0;font-size:clamp(.85rem,1.1vw,1rem)}
.voice-inline .actions{margin-top:.75rem}
@media(max-width:760px){.voice-inline{margin-top:.85rem;padding-top:.75rem}}
@media(max-width:760px){.rates-panel{padding:4rem 1rem .7rem}.rates-panel .copy{max-height:calc(100svh - 4.7rem)}.rates-panel h2{font-size:clamp(1.8rem,8vw,2.7rem)}.home-rates{grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;margin-top:.45rem}.home-rates article{min-height:4.1rem;padding:.42rem}.home-rates strong{font-size:1rem}.home-rates span,.home-rates small{font-size:.4rem}.rates-panel .actions{margin-top:.4rem}} .kiosk-video{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#070b22}.kiosk-portrait.kiosk-pip{position:fixed;z-index:60;right:1rem;bottom:1rem;width:min(24vw,280px);height:auto;aspect-ratio:9/16;min-height:0;align-self:auto;border-radius:1rem;box-shadow:0 24px 70px #020314dd,0 0 0 2px #3fe0dc88}.kiosk-pip .kiosk-orbit{display:none}@media(max-width:760px){.kiosk-portrait.kiosk-pip{right:.5rem;bottom:.5rem;width:min(36vw,190px)}}/* Stable performance framing: native 9:16 fills without crop or letterbox. */
.kiosk-shell>.kiosk-portrait:not(.kiosk-pip){height:100%;width:auto;aspect-ratio:9/16;justify-self:center;align-self:center}.kiosk-video{object-fit:cover!important}
@media(max-width:760px){.kiosk-shell>.kiosk-portrait:not(.kiosk-pip){width:100%;height:auto;aspect-ratio:9/16}}
/* Full-bleed Chaka performance: no visible card edge between portrait and world. */
.kiosk-shell>.kiosk-portrait:not(.kiosk-pip){border:0;border-radius:0;background:#070b22;box-shadow:none}
.kiosk-shell>.kiosk-portrait:not(.kiosk-pip)::after{content:'';position:absolute;z-index:3;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #070b2208,inset -32px 0 44px -42px #070b22}

/* Edge-to-edge avatar authority: no centered kiosk or exposed right seam. */
.avatar-panel,.reel-panel{padding:4rem 0 0}

/* Reel panel: a real 16:9 demo reel, click-to-play with sound -- a
   different shape entirely from the retired avatar kiosk's 9:16
   full-bleed video, so it gets its own frame/copy layout rather than
   reusing .kiosk-portrait's full-bleed positioning rules. */
/* The shared .avatar-panel,.reel-panel background above is a single
   small localized glow that doesn't visually reach the bottom of a
   tall panel -- same full-panel two-tone ambient wash already used on
   rates-panel/contact-panel/instagram-panel (inset:-20% + closest-side
   + blur), positioned so one glow sits high and one sits low, so it
   actually spans top to bottom regardless of viewport height. */
.reel-panel{position:relative;overflow:hidden}
.reel-panel::before{content:'';position:absolute;z-index:0;inset:-20%;background:radial-gradient(farthest-corner,rgba(245,47,200,.18),transparent 75%) 22% 8%,radial-gradient(farthest-corner,rgba(63,224,220,.16),transparent 75%) 78% 94%;filter:blur(90px);pointer-events:none}
.reel-panel .kiosk-shell{position:relative;z-index:1;width:min(1180px,100%);height:min(78svh,720px);margin:auto;display:grid;grid-template-columns:minmax(320px,1.3fr) minmax(280px,.85fr);align-items:center;gap:clamp(1.2rem,4vw,3.5rem)}
.reel-panel .kiosk-copy{padding:0;min-width:0}
.reel-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:.6rem;overflow:hidden;background:#000;box-shadow:0 24px 70px #020314aa,0 0 40px #3fe0dc1a}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.reel-play{position:absolute;z-index:3;right:.8rem;bottom:.8rem;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid #ffffffb0;background:#070b22cc;color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s ease,opacity .2s ease,transform .2s ease}
.reel-play:hover{background:var(--pink);border-color:var(--pink);transform:scale(1.08)}
.reel-frame:not(.is-muted) .reel-play{opacity:0;pointer-events:none}
@media(max-width:760px){
  .panel.reel-panel{align-items:center!important;justify-content:center!important}
  .reel-panel{padding:4.2rem 1rem 1rem}
  .reel-panel .kiosk-shell{display:flex;flex-direction:column;justify-content:center;height:auto;min-height:0;width:100%;gap:1.1rem}
  /* The generic bare .kiosk-copy background (further down, a hard-edged
     scrim meant for the old full-bleed avatar video where text overlaid
     the video) doesn't belong here -- reel-panel stacks video then text
     as separate blocks, so that gradient just showed up as a disconnected
     box. Killed it; the fade now lives on the video frame itself instead,
     right where it visually belongs (Chaka's call). */
  .reel-panel .kiosk-copy{width:100%;height:auto;text-align:left;background:none}
  .reel-frame{aspect-ratio:16/9}
  .reel-frame::after{content:'';position:absolute;z-index:2;inset:auto 0 0 0;height:42%;background:linear-gradient(0deg,#070b22 0%,#070b22b0 45%,transparent 100%);pointer-events:none}
  .reel-play{width:2.2rem;height:2.2rem}
  .reel-panel .kiosk-cue{min-height:0}
  .reel-panel .kiosk-cue h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  .reel-panel .actions{width:100%}
}

/* Voice-over panel: the transcript IS the visual -- no photo, no video,
   just large kinetic-typography captions synced word-for-word to the
   audio (see voiceover.js), centered as the panel's main graphic. */
.voiceover-panel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:5rem var(--pad)}
.voiceover-panel::before{content:'';position:absolute;z-index:0;inset:-20%;background:radial-gradient(farthest-corner,rgba(63,224,220,.18),transparent 75%) 20% 12%,radial-gradient(farthest-corner,rgba(245,47,200,.16),transparent 75%) 82% 92%;filter:blur(90px);pointer-events:none}
.vo-shell{position:relative;z-index:1;width:min(920px,100%);display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.vo-caption{min-height:9rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:.4em;row-gap:.15em;font-family:Arial Black,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.3}
.vo-caption .upcoming{color:#ffffff2e;transition:color .15s ease}
.vo-caption .spoken{color:#fff;transition:color .15s ease}
.vo-caption .current{color:var(--acid);text-shadow:0 0 24px #3fe0dcaa;transition:color .15s ease}
.vo-play{width:4.2rem;height:4.2rem;flex:0 0 auto;border-radius:50%;border:1px solid #ffffffb0;background:#070b22cc;color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s ease,transform .2s ease}
.vo-play svg{translate:2px 0}
.vo-play:hover{background:var(--pink);border-color:var(--pink);transform:scale(1.06)}
.vo-shell.is-playing .vo-play{opacity:0;pointer-events:none;position:absolute}
.vo-controls{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.vo-tabs{display:flex;gap:.5rem}
.vo-tab{border:1px solid #ffffff40;background:transparent;color:#fff;padding:.6rem 1.1rem;font-size:.6rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
.vo-tab.is-active{border-color:var(--pink);background:var(--pink);color:#070b22}
.vo-progress{width:min(420px,100%);height:3px;background:#ffffff22;overflow:hidden}
.vo-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--pink),var(--acid));transition:width .1s linear}
@media(max-width:760px){
  .panel.voiceover-panel{align-items:center!important;justify-content:center!important}
  .panel.voiceover-panel{padding:4rem 1.25rem 4rem}
  .vo-caption{min-height:7rem;font-size:clamp(1.15rem,6.5vw,1.7rem)}
  .vo-play{width:3.4rem;height:3.4rem}
  .vo-tab{padding:.5rem .85rem;font-size:.52rem}
}


/* "Behind the work" panel: reel footage in a proper 16:9 framed clip,
   title/body stacked underneath like a Netflix title card — not
   overlapping text on a background loop. Scoped to this panel only —
   the rest of the site keeps the fixed stare/smile .keyart. */
.about-panel{overflow:visible;flex-direction:column;align-items:flex-start;justify-content:center;padding:5rem var(--pad) 2rem;gap:1.25rem}
.training-bg-photo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:.45}
.about-panel .copy{position:relative;z-index:1;width:min(640px,100%)}

/* Mobile: full-bleed photo background (see the [src*=...] object-fit
   rules further down) with the copy text pushed down into the lower
   half of the screen -- the universal ".panel:not(...){justify-content:
   flex-start}" rule further down (higher specificity, no !important)
   was otherwise pinning it to the top, overlapping his hair (Rey,
   2026-07-22). The pinned key-art portrait stays suppressed behind
   this panel either way — see #about handling in app.js. */
@media(max-width:760px){
  .about-panel{padding:4.5rem 0 1.5rem;gap:1.5rem;justify-content:flex-end!important}
  .about-panel .copy{padding:0 1rem}
}
.keyart.about-hidden{opacity:0;pointer-events:none}
/* Rates panel: pinned headshot suppressed here too (distracting behind
   a price table) -- cool radial glow instead, same vaporwave palette
   as the rest of the site. */
.rates-panel{position:relative;overflow:hidden;background:linear-gradient(135deg,#070b22 0%,#130b31 45%,#1c1140 72%,#070b22 100%)}
.rates-panel::before{content:'';position:absolute;z-index:0;inset:-20%;background:radial-gradient(closest-side,rgba(245,47,200,.22),transparent 70%) 78% 20%,radial-gradient(closest-side,rgba(63,224,220,.20),transparent 70%) 15% 85%;filter:blur(80px);pointer-events:none}
.rates-panel .copy{position:relative;z-index:1}
/* Generic non-show-specific "day in the life" b-roll, sitting behind
   the radial glow scrim on the rates/contact panels -- muted/looping,
   same pattern as the about-panel background video. */
.panel-bg-video{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.38}
/* Contact panel: same treatment -- headshot suppressed (distracting
   behind a form), cool vaporwave glow instead. */
.contact-panel{position:relative;overflow:hidden}
.contact-panel::before{content:'';position:absolute;z-index:0;inset:-20%;background:radial-gradient(closest-side,rgba(63,224,220,.20),transparent 70%) 20% 25%,radial-gradient(closest-side,rgba(245,47,200,.20),transparent 70%) 82% 80%;filter:blur(80px);pointer-events:none}
/* Panel 1's own smile portrait, reused here -- focus shifted down
   (more face, less forehead) per request. */
.contact-bg-photo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:.45}
.contact-panel .copy{position:relative;z-index:1}
/* Instagram panel: link-out only (no live Graph API feed set up),
   headshot suppressed, same cool-glow treatment as rates/contact. */
.instagram-panel{position:relative;overflow:hidden}
.instagram-panel::before{content:'';position:absolute;z-index:0;inset:-20%;background:radial-gradient(closest-side,rgba(245,47,200,.24),transparent 70%) 50% 15%,radial-gradient(closest-side,rgba(63,224,220,.18),transparent 70%) 50% 95%;filter:blur(80px);pointer-events:none}
.instagram-panel .copy{position:relative;z-index:1}
.ig-glyph{color:var(--acid);margin-bottom:.9rem}
.keyart{transition:opacity .4s ease}
/* In-panel bg photos must frame him EXACTLY the way the pinned #top
   keyart does -- same inset/width/height/object-fit/object-position
   as .backdrop-smile/.backdrop-stare, not just a matching crop point.
   A plain 100%/100%/cover (the old approach) reads fine at normal
   desktop widths but zooms in hard and crops the head at anything
   tall-and-narrow (a resized browser window, some laptop panels) --
   this is what panel 1 already solves with overscanned sizing at
   desktop and a bounded contain-fit at mobile. Same treatment for the
   two new headshots (chaka-headshot-stare-02 / -smile-02), scaled by
   analogy since they don't have a panel-1 original to copy from. */
.training-bg-photo[src*="hero-smile-wide"],.contact-bg-photo[src*="hero-smile-wide"]{inset:-4% -4% -4% -12%;width:116%;height:108%;object-fit:cover;object-position:78% center}
.training-bg-photo[src*="stare_full"]{inset:-4% -4% -4% -12%;width:116%;height:108%;object-fit:cover;object-position:66% 34%}
.training-bg-photo[src*="chaka-headshot-stare-02"]{inset:-4% -4% -4% -12%;width:116%;height:108%;object-fit:cover;object-position:58% 30%}
.training-bg-photo[src*="chaka-headshot-smile-02"]{inset:-4% -4% -4% -12%;width:116%;height:108%;object-fit:cover;object-position:50% center}
/* Mobile got this badly wrong (2026-07-22, Rey caught it live): copying
   panel 1's mobile treatment verbatim -- a bounded contain-fit box --
   only works there because .keyart is a separate full-height wrapper
   with its OWN background color filling whatever the photo doesn't
   reach. These four <img> tags have no such wrapper, so the same
   bounded-box treatment left a massive dead flat-navy void below the
   photo on every one of them -- looked broken, not like a background.
   Fix: true full-bleed cover, no gaps, edge to edge, same as it always
   should have been -- just with a calmer object-position (percentage,
   not the "top" keyword) than the pre-fix version so the crop is less
   severe on genuinely tall phones. */
@media(max-width:760px){
  .training-bg-photo[src*="hero-smile-wide"],.contact-bg-photo[src*="hero-smile-wide"]{inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 18%}
  .training-bg-photo[src*="stare_full"]{inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 15%}
  .training-bg-photo[src*="chaka-headshot-stare-02"]{inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%}
  .training-bg-photo[src*="chaka-headshot-smile-02"]{inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%}
}

/* Buffer loader: holds the curtain until the avatar + about videos can
   actually play (see app.js), instead of a fixed guess-timer. */
.site-loader{position:fixed;z-index:100;inset:0;display:grid;place-items:center;gap:1.25rem;background:#070b22;transition:opacity .5s ease;opacity:1}
.site-loader.is-hidden{opacity:0;pointer-events:none}
.site-loader-mark{color:#fff;font-weight:900;letter-spacing:.18em;font-size:.85rem}
.site-loader-pct{color:#fff;font-weight:900;font-size:clamp(3rem,12vw,5.5rem);line-height:1;letter-spacing:-.02em;text-shadow:0 0 30px rgba(63,224,220,.35)}
.site-loader-bar{width:min(360px,72vw);height:6px;background:#ffffff22;overflow:hidden;border-radius:99px}
/* Width is set inline from real video.buffered data in app.js — not a
   decorative sweep. min-width keeps a sliver visible at 0% so it never
   looks empty/dead before the first progress event arrives. */
.site-loader-bar i{display:block;width:0%;min-width:3%;height:100%;background:linear-gradient(90deg,var(--pink),var(--acid));box-shadow:0 0 12px var(--acid);transition:width .25s ease}
.site-loader-label{color:#ffffff88;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em}
@media(prefers-reduced-motion:reduce){.site-loader-bar i{transition:none}}

/* YouTube-style buffering bar on the avatar itself: shows whenever the
   video isn't ready to play (readyState<3), independent of the one-time
   site loader above — covers mid-playback stalls too, not just first
   load. app.js toggles [data-buffering] and sets the width. */
.kiosk-buffer{position:absolute;z-index:5;left:0;right:0;bottom:0;height:3px;background:#ffffff20;opacity:0;transition:opacity .2s ease;pointer-events:none}
.kiosk-portrait[data-buffering="1"] .kiosk-buffer{opacity:1}
.kiosk-buffer i{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--pink),var(--acid));transition:width .2s ease}

/* Unmistakable mid-playback stall indicator — the thin bar above is
   easy to miss when the video hangs on a frame mid-performance. Only
   appears after a short delay so a quick, normal rebuffer blip doesn't
   flash it uselessly. */
.kiosk-spinner{position:absolute;z-index:6;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid #ffffff2e;border-top-color:var(--acid);opacity:0;pointer-events:none;transition:opacity .2s ease .35s;animation:kioskSpin .8s linear infinite}
.kiosk-portrait[data-buffering="1"] .kiosk-spinner{opacity:1}
@keyframes kioskSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.kiosk-spinner{animation:none;border-top-color:#ffffff2e;border-right-color:var(--acid)}}
.kiosk-shell{width:100vw;max-width:none;height:calc(100svh - 4rem);grid-template-columns:minmax(320px,42vw) minmax(0,1fr);gap:0}
.kiosk-shell>.kiosk-portrait:not(.kiosk-pip){width:100%;height:100%;aspect-ratio:auto;justify-self:stretch;align-self:stretch}
.kiosk-copy{padding:clamp(1.5rem,5vw,6rem)}
@media(max-width:760px){.avatar-panel,.reel-panel{padding:3.5rem 0 0}.kiosk-shell{width:100vw;height:calc(100svh - 3.5rem);grid-template-columns:44% 56%;gap:0}.kiosk-shell>.kiosk-portrait:not(.kiosk-pip){width:100%;height:100%;aspect-ratio:auto}.kiosk-copy{padding:.7rem}}/* Mobile avatar composition: full-frame performance with readable safe-area overlay. */
@media(max-width:760px){.avatar-panel,.reel-panel{padding:3.5rem 0 0}.kiosk-shell{position:relative;display:block;width:100vw;height:calc(100svh - 3.5rem)}.kiosk-shell>.kiosk-portrait:not(.kiosk-pip){position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}.kiosk-video{object-position:center top}.kiosk-copy{position:relative;z-index:5;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1rem 3.25rem max(1rem,env(safe-area-inset-bottom)) 1rem;background:linear-gradient(0deg,#070b22f8 0%,#100d32e8 30%,#100d3270 55%,transparent 76%)}.kiosk-cue{min-height:0}.kiosk-cue h2{font-size:clamp(2.15rem,12vw,3.8rem)}.kiosk-transcript{min-height:3.8rem;max-height:3.8rem}.kiosk-progress{margin:.45rem 0}.kiosk-copy .actions{display:flex;flex-wrap:nowrap}.kiosk-copy .button{white-space:nowrap}.kiosk-live{top:.75rem;bottom:auto}}/* Mobile world authority: photographs stay full-viewport; copy overlays without dead bands. */
@media(max-width:760px){.keyart{height:100svh;background:#070b22}.backdrop,.backdrop-stare{inset:0;width:100%;height:100svh;object-fit:cover;object-position:center 18%;background:#070b22;-webkit-mask-image:none;mask-image:none}.photo-shade{background:linear-gradient(0deg,#070b22 0%,#070b22ef 22%,#100d3278 48%,transparent 72%)}.panel{align-items:flex-end;padding:3.5rem 3.25rem max(1rem,env(safe-area-inset-bottom)) 1rem}.panel .copy{max-height:48svh}.hero .copy{max-height:45svh}}
/* Mobile hero focal point follows Chaka, not the studio wall. */
@media(max-width:760px){.backdrop-smile{object-position:74% center}}

/* Raise mobile hero content above the browser edge. */
@media(max-width:760px){.panel.hero{padding-bottom:max(3rem,7svh)}}
/* Selected Work art direction: second headshot, elevated transparent credit ribbons. */
html[data-panel="2"] .backdrop-smile{opacity:0}
html[data-panel="2"] .backdrop-stare{opacity:1}
#work .copy{transform:translateY(-5svh)}
#work .credit{min-height:6.5rem;border:0;background:transparent;box-shadow:none}
#work .network-logo{height:3rem;max-width:13rem;filter:drop-shadow(0 7px 9px #000c) drop-shadow(0 0 12px #ffffff66)}
.home-rates .special-offer{border-color:var(--acid);background:linear-gradient(145deg,#3fe0dc24,#f52fc824)}
.home-rates .special-offer strong{color:var(--acid)}
@media(max-width:760px){#work .copy{transform:translateY(-3svh)}#work .credit{min-height:4.6rem}#work .network-logo{height:1.8rem;max-width:9rem}.home-rates .special-offer{grid-column:span 1}}/* Selected Work background authority: uninterrupted field, no portrait edge. */
html[data-panel="2"] .keyart{background:radial-gradient(circle at 72% 32%,#18345a 0%,#101b42 38%,#070b22 78%)}
html[data-panel="2"] .backdrop-smile,html[data-panel="2"] .backdrop-stare{opacity:0!important}
html[data-panel="2"] .photo-shade{background:linear-gradient(90deg,#070b22f5 0%,#0d173cce 46%,#152b4a88 100%)}
/* Give the credit ribbons breathing room below ON SCREEN. */
#work .credits{margin-top:2rem}
@media(max-width:760px){#work .credits{margin-top:1.15rem}}
/* Alignment authority: six rates plus one full-width acting scope bar. */
.home-rates article{min-height:6rem;grid-template-rows:auto auto auto;align-content:center}
.home-rates .rate-scope{grid-column:1/-1;min-height:4.6rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.home-rates .rate-scope strong{text-align:center}.home-rates .rate-scope small{text-align:right}
/* Craft and casting range share one production panel. */
.craft-panel{padding-right:var(--pad)}.craft-panel .copy{width:min(100%,900px)}.craft-panel h2{font-size:clamp(2.4rem,4.4vw,5rem)}.craft-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:1.2rem;align-items:start;margin-top:1rem}.craft-grid .training,.craft-grid .pills{margin-top:0}.craft-grid .pills{align-content:start}
@media(max-width:760px){.home-rates .rate-scope{grid-column:1/-1;min-height:3.5rem;grid-template-columns:1fr auto;gap:.35rem}.home-rates .rate-scope small{grid-column:1/-1;text-align:left}.craft-panel{padding:3.8rem 1rem .8rem}.craft-panel .copy{max-height:calc(100svh - 4.6rem)}.craft-panel h2{font-size:clamp(1.9rem,8vw,2.8rem)}.craft-grid{grid-template-columns:1fr;gap:.45rem;margin-top:.45rem}.craft-grid .training{grid-template-columns:1fr 1fr;gap:.4rem}.craft-grid .training-card{min-height:6.4rem;padding:.5rem}.craft-grid .training-card img{height:2rem;max-width:6.5rem}.craft-grid .pills{gap:.22rem}}/* Official SAG-AFTRA membership badge. */
.sag-badge{display:flex;align-items:center;gap:.48rem;padding:.36rem .55rem;background:#fff;border:0;box-shadow:0 5px 18px #0008}.sag-badge img{display:block;width:auto;height:1.05rem}.sag-badge small{color:#070b22;font-size:.43rem;font-weight:900;letter-spacing:.12em}
/* Cinematic surface: restrained grain, optical vignette, panel-change gate flare. */
body::before{content:'';position:fixed;z-index:80;inset:-35%;pointer-events:none;opacity:.055;background-image:repeating-radial-gradient(circle at 37% 61%,#fff 0 1px,transparent 1px 4px);background-size:7px 7px;mix-blend-mode:soft-light;animation:filmGrain .32s steps(2,end) infinite}
body::after{content:'';position:fixed;z-index:79;inset:0;pointer-events:none;box-shadow:inset 0 0 11vw #020314aa,inset 0 0 2px #ffffff22}
.panel[aria-hidden="false"]::after{content:'';position:absolute;z-index:7;inset:0;pointer-events:none;background:linear-gradient(104deg,transparent 30%,#3fe0dc12 48%,#f52fc812 52%,transparent 70%);translate:-120% 0;animation:gateFlare .85s cubic-bezier(.2,.7,.2,1) both}
.panel{transition:opacity .5s ease}
.panel[aria-hidden="true"]{opacity:0}
.panel[aria-hidden="false"]{opacity:1}
@keyframes filmGrain{0%{transform:translate3d(-3%,-2%,0)}25%{transform:translate3d(2%,3%,0)}50%{transform:translate3d(4%,-1%,0)}75%{transform:translate3d(-2%,4%,0)}100%{transform:translate3d(1%,-4%,0)}}@keyframes gateFlare{to{translate:120% 0}}
@media(max-width:760px){.sag-badge{padding:.3rem .42rem}.sag-badge img{height:.8rem}.sag-badge small{display:none}body::after{box-shadow:inset 0 0 16vw #02031499}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}.panel[aria-hidden="false"]::after{display:none}}/* Solid-stage panels: no global photographic headshot behind avatar or contact. */
html[data-panel="1"] .keyart,html[data-panel="9"] .keyart{background:#070b22}
html[data-panel="1"] .backdrop-smile,html[data-panel="1"] .backdrop-stare,html[data-panel="9"] .backdrop-smile,html[data-panel="9"] .backdrop-stare{opacity:0!important}
html[data-panel="1"] .photo-shade,html[data-panel="9"] .photo-shade{background:#070b22}/* Mobile avatar frame authority: video owns every viewport pixel beneath the header. */
@media(max-width:760px){.panel.avatar-panel{padding:3.5rem 0 0!important}.avatar-panel .kiosk-shell{width:100vw;max-width:none;height:calc(100svh - 3.5rem);margin:0}.avatar-panel .kiosk-portrait:not(.kiosk-pip){inset:0;width:100vw;height:100%;border-radius:0}.avatar-panel .kiosk-video{inset:0;width:100%;height:100%;object-fit:cover!important}.avatar-panel .kiosk-copy{inset:0;width:100%;height:100%;padding-left:1rem;padding-right:1rem}}/* Selected Work owns the viewport: full-screen network credit wall. */
#work{padding:4.75rem var(--pad) 1.5rem;align-items:stretch}#work .copy{width:100%;max-width:none;height:100%;display:flex;flex-direction:column;transform:none}#work h2{font-size:clamp(2.5rem,4.5vw,5rem)}#work .credits{flex:1;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(.7rem,1.4vw,1.4rem);margin-top:1.5rem}#work .credit{min-height:0;height:100%;justify-content:center}#work .network-logo{height:clamp(2.7rem,4vw,4.8rem);max-width:16rem;margin-bottom:.8rem}
@media(max-width:760px){#work{padding:3.9rem .75rem .75rem!important;align-items:stretch}#work .copy{height:100%;max-height:none}#work h2{font-size:clamp(2rem,10vw,3.2rem)}#work .credits{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:.45rem;margin-top:.75rem}#work .credit{min-height:0;padding:.45rem}#work .network-logo{height:clamp(2rem,8vw,3.2rem);max-width:10rem;margin-bottom:.35rem}#work .credit strong{font-size:.68rem}#work .credit small{font-size:.48rem}}/* Mobile hero authority: title and primary information own the centered full width. */
@media(max-width:760px){.panel.hero{align-items:center!important;justify-content:center;padding:3.5rem 1rem 1rem!important}.hero .copy{width:100%;max-width:none!important;max-height:none;text-align:center}.hero .kicker,.hero .lead{margin-left:auto;margin-right:auto}.hero h1{font-size:clamp(3.2rem,15vw,5.4rem);width:100%}.hero .actions{justify-content:center}.hero .button{flex:0 1 auto}.hero~.kiosk-pip{display:none}}/* Mobile editorial axis: left justified, consistently lifted throughout the site. */
@media(max-width:760px){.panel:not(.avatar-panel):not(#work):not(.reel-panel):not(.voiceover-panel){align-items:center!important}.panel:not(.avatar-panel):not(#work):not(.reel-panel):not(.voiceover-panel) .copy{width:100%;max-width:none;text-align:left!important;transform:translateY(-4svh)}.panel.hero{align-items:center!important;justify-content:flex-start;padding:3.5rem 1rem 1rem!important}.hero .copy{text-align:left!important}.hero .kicker,.hero .lead{margin-left:0;margin-right:0}.hero .actions{justify-content:flex-start}.avatar-panel .kiosk-copy{justify-content:center;align-items:flex-start;text-align:left;padding-top:3.5rem;padding-bottom:1rem}.avatar-panel .kiosk-cue,.avatar-panel .kiosk-transcript,.avatar-panel .kiosk-progress,.avatar-panel .actions{width:100%}.rates-panel .copy,.contact-panel .copy,.craft-panel .copy{transform:translateY(-2svh)!important}}/* Edge authority: portrait layers extend past the viewport; no exposed purple bar. */
@media(min-width:761px){.backdrop-stare{inset:-2% -2% -2% auto;width:min(104vw,1400px);object-position:right 22%}}
/* Prestigious centered credit cluster: larger marks, tighter rhythm, solid labels. */
#work .copy{justify-content:center}#work .credits{flex:none;width:min(1120px,100%);height:min(58svh,560px);align-self:center;gap:.7rem}#work .network-logo{height:clamp(3.8rem,5vw,5.8rem);max-width:18rem;filter:drop-shadow(0 10px 14px #000d) drop-shadow(0 0 18px #ffffff66)}#work .credit strong,#work .credit small{display:inline-block;width:max-content;max-width:100%;padding:.32rem .58rem;border-radius:999px}#work .credit strong{background:#f52fc8;color:#070b22}#work .credit small{background:#3fe0dc;color:#070b22;font-weight:900}
/* Craft panel hierarchy: training authority first, casting pills underneath. */
.craft-grid{grid-template-columns:1fr}.craft-grid .training-card{min-height:10rem;align-items:center;justify-content:center;text-align:center}.craft-grid .training-card img{height:3.8rem;max-width:13rem;filter:drop-shadow(0 8px 12px #000b)}.craft-grid .pills{justify-content:center;flex-wrap:wrap;gap:.3rem}.craft-grid .pill{border:0;background:#fff;color:#070b22;font-weight:900;box-shadow:0 7px 16px #0007;white-space:nowrap;padding:.42rem .55rem;font-size:.52rem}
@media(max-width:760px){#work .copy{justify-content:center;align-items:center;text-align:center}#work .credits{height:68svh;gap:.32rem;margin-top:.55rem}#work .network-logo{height:clamp(2.7rem,10vw,4rem);max-width:11rem}#work .credit strong,#work .credit small{padding:.24rem .4rem}.craft-grid .training-card{min-height:5.8rem}.craft-grid .training-card img{height:2.4rem;max-width:8.5rem}.craft-grid .pills{justify-content:flex-start}.craft-grid .pill{font-size:.46rem}}/* Clean navigation panel and photographic transition authority. */
.menu-toggle{display:none;border:1px solid #3fe0dc88;background:#070b22;color:#fff;padding:.55rem .7rem;font-size:.58rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.nav nav{align-items:center}.nav nav a{white-space:nowrap}.rate-sag-logo{display:block;width:min(12rem,100%);height:1.35rem;object-fit:contain;filter:brightness(0) invert(1)}.home-rates .rate-scope strong{display:flex;justify-content:center}.backdrop{transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s ease!important}.frames{transition-duration:.72s}.panel[aria-hidden="false"]>.copy,.panel[aria-hidden="false"] .kiosk-copy{animation:contentGlide .72s cubic-bezier(.2,.8,.2,1) both}@keyframes contentGlide{from{opacity:.2;translate:0 2.5rem}to{opacity:1;translate:0 0}}
@media(max-width:980px){.nav{gap:.7rem;padding-left:1rem;padding-right:1rem}.nav .mark{font-size:.58rem}.nav .sag-badge{margin-left:auto}.menu-toggle{display:block;order:4}.nav nav{position:fixed;z-index:35;top:3.5rem;left:.65rem;right:.65rem;display:grid!important;grid-template-columns:repeat(5,1fr);gap:1px;padding:1px;background:#3fe0dc66;box-shadow:0 18px 48px #000c;opacity:0;visibility:hidden;translate:0 -1rem;transition:.25s ease}.nav nav a{display:block!important;padding:.85rem .35rem;background:#070b22;text-align:center;font-size:.55rem}.menu-open .nav nav{opacity:1;visibility:visible;translate:0 0}}
@media(max-width:560px){.nav nav{grid-template-columns:1fr}.nav nav a{padding:.9rem}.nav .sag-badge{display:none}}
@media(prefers-reduced-motion:reduce){.panel[aria-hidden="false"]>.copy,.panel[aria-hidden="false"] .kiosk-copy{animation:none}}/* Mobile final vertical balance: retain left axis, lower graphics into visual center. */
@media(max-width:760px){.panel:not(.avatar-panel):not(#work):not(.reel-panel):not(.voiceover-panel) .copy{transform:translateY(2svh)}.rates-panel .copy,.contact-panel .copy,.craft-panel .copy{transform:translateY(1svh)!important}.avatar-panel .kiosk-copy{transform:translateY(2svh)}}/* Mobile lower-third authority: primary titles and headers return to the bottom-left. */
@media(max-width:760px){.panel:not(.avatar-panel):not(#work):not(.reel-panel):not(.voiceover-panel){align-items:flex-end!important;justify-content:flex-start}.panel:not(.avatar-panel):not(#work):not(.reel-panel):not(.voiceover-panel) .copy,.rates-panel .copy,.contact-panel .copy,.craft-panel .copy{transform:none!important;text-align:left!important}.panel.hero{align-items:flex-end!important;padding-bottom:max(1.25rem,env(safe-area-inset-bottom))!important}.hero .copy{transform:none!important}}/* Universal mobile lower third, including avatar and credit panels. */
@media(max-width:760px){.panel{align-items:flex-end!important}.avatar-panel .kiosk-copy{justify-content:flex-end!important;transform:none!important;padding-bottom:max(1rem,env(safe-area-inset-bottom))}.avatar-panel .kiosk-cue{margin-top:auto}#work .copy{justify-content:flex-end!important}#work .credits{flex:none}}/* Show credits: prestigious white typography, no colored pills. */
#work .credit strong,#work .credit small{width:auto;max-width:100%;padding:0;border-radius:0;background:transparent!important;color:#fff!important;box-shadow:none}#work .credit strong{font-size:.82rem;letter-spacing:.09em}#work .credit small{font-size:.56rem;font-weight:700;opacity:.72}
/* Mobile rates fit authority: complete 2x3 rates plus full-width acting row. */
@media(max-width:760px){.panel.rates-panel{align-items:stretch!important;padding:3.75rem .7rem .65rem!important}.rates-panel .copy{height:100%;max-height:none!important;display:flex;flex-direction:column;transform:none!important}.rates-panel .kicker{margin-bottom:.2rem}.rates-panel h2{font-size:clamp(1.55rem,7vw,2.35rem);line-height:.9}.rates-panel .home-rates{flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:.25rem;margin-top:.35rem}.rates-panel .home-rates article{min-height:0;height:100%;padding:.38rem}.rates-panel .home-rates strong{font-size:clamp(.9rem,5vw,1.2rem)}.rates-panel .home-rates span,.rates-panel .home-rates small{font-size:.38rem}.rates-panel .rate-scope{grid-column:1/-1;grid-template-columns:1fr auto 1fr}.rates-panel .rate-scope small{grid-column:auto;text-align:right}.rates-panel .actions{flex:0 0 auto;margin-top:.35rem;gap:.3rem}.rates-panel .button{padding:.52rem .58rem;font-size:.45rem}}
.refresh-site{border:0;background:transparent;color:#fff;width:2rem;height:2rem;display:grid;place-items:center;cursor:pointer;font-size:1.25rem}.refresh-site.is-reloading span{display:block;animation:siteReload .55s cubic-bezier(.4,0,.2,1) infinite}@keyframes siteReload{to{transform:rotate(360deg)}}
@media(max-width:760px){.avatar-panel .kiosk-copy{background:linear-gradient(0deg,#070b22f2 0%,#070b22c4 18%,#100d325e 34%,transparent 49%)!important}}

@media(max-width:760px){.rates-panel .home-rates{grid-template-rows:repeat(3,minmax(0,1fr)) minmax(3.35rem,auto)!important}.rates-panel .rate-scope{min-height:3.35rem!important;height:auto!important;grid-template-columns:minmax(0,1fr) minmax(7.5rem,10.5rem) minmax(0,1fr)!important;padding:.45rem .5rem!important;overflow:visible}.rates-panel .rate-scope strong{min-width:0;align-items:center}.rates-panel .rate-scope .rate-sag-logo{display:block!important;width:100%!important;height:2rem!important;max-width:10.5rem!important;object-fit:contain!important}.rates-panel .rate-scope small{grid-column:auto!important;text-align:right!important}}

.home-rates .rate-scope{display:flex!important;align-items:center!important;justify-content:center!important}.home-rates .rate-scope strong{width:100%;display:flex;justify-content:center}.home-rates .rate-scope .rate-sag-logo{height:clamp(2rem,3vw,2.8rem)!important;max-width:min(16rem,88%)!important}#work .network-logo[src*="hbo.svg"]{filter:brightness(0) invert(1) drop-shadow(0 10px 14px #000d) drop-shadow(0 0 18px #ffffff66)!important}

.avatar-panel .kiosk-portrait{transition:opacity .28s ease}.avatar-panel .kiosk-portrait.is-away{opacity:0!important;pointer-events:none}