/* ===========================================================================
   EMC site options — shared base.
   Geometric type only. Stand-in footage frames. Reveal motion is scoped to
   html.anim, which only the script adds: with the script off, every word
   is on the page and nothing is faded out.
   ======================================================================== */
:root{
  --font:"Futura","Jost","Century Gothic",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.9,.3,1);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
img,svg{display:block;max-width:100%}
b,strong{font-weight:700}
small{font-weight:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ---- the little i. Help lives here or nowhere. ------------------------- */
.i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;
  font-size:.72rem;font-weight:700;font-style:normal;line-height:1;vertical-align:middle;margin-left:8px;opacity:.6;cursor:help}
.i:hover{opacity:1}

/* ---- stand-in footage. Every frame is invented. -------------------------- */
.frame{position:relative;overflow:hidden;background:#101416;isolation:isolate;flex:0 0 auto}
.frame::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 95% at 50% 38%, transparent 48%, rgba(0,0,0,.6) 100%)}
.frame::after{content:"";position:absolute;inset:0;z-index:1;background:var(--noise) 0 0/180px 180px;opacity:.2;mix-blend-mode:overlay}
.frame>*{position:relative;z-index:2}
.scene-pour{background:radial-gradient(45% 40% at 50% 45%, rgba(246,232,214,.96), rgba(190,140,95,.8) 50%, transparent 76%),linear-gradient(180deg,#6b4a30,#2a1a10)}
.scene-rush{background:radial-gradient(30% 30% at 25% 40%, rgba(255,230,190,.8), transparent 70%),radial-gradient(30% 30% at 75% 55%, rgba(255,200,140,.6), transparent 70%),linear-gradient(180deg,#3d2a1c,#1a110b)}
.scene-plate{background:radial-gradient(50% 45% at 50% 50%, rgba(255,250,240,.96), rgba(220,180,130,.72) 55%, transparent 80%),linear-gradient(180deg,#c9a27a,#7a5236)}
.scene-roast{background:radial-gradient(40% 30% at 60% 65%, rgba(255,140,50,.9), rgba(180,70,20,.45) 50%, transparent 76%),linear-gradient(180deg,#1a100a,#0b0705)}
.scene-bar{background:radial-gradient(50% 40% at 30% 30%, rgba(255,214,160,.9), transparent 70%),radial-gradient(40% 30% at 80% 70%, rgba(120,70,40,.7), transparent 70%),linear-gradient(180deg,#5a3a24 0%,#2b1a10 60%,#140c08 100%)}
.scene-front{background:radial-gradient(55% 45% at 40% 40%, rgba(255,250,242,.96), rgba(226,222,210,.8) 55%, #9a9a90 100%)}
.scene-gym{background:radial-gradient(28% 34% at 50% 20%, rgba(255,255,255,.6), transparent 70%),linear-gradient(180deg,#151517 0%,#08080a 100%)}
.scene-rack{background:radial-gradient(40% 30% at 30% 60%, rgba(255,255,255,.35), transparent 70%),radial-gradient(30% 40% at 80% 30%, rgba(90,120,140,.5), transparent 70%),linear-gradient(180deg,#1b1d22,#0a0b0e)}
.scene-site{background:radial-gradient(40% 40% at 60% 30%, rgba(255,200,90,.85), transparent 70%),radial-gradient(60% 30% at 40% 80%, rgba(140,140,130,.7), transparent 70%),linear-gradient(180deg,#6e6a60,#2b2a26)}
.scene-slab{background:radial-gradient(60% 40% at 50% 70%, rgba(200,200,195,.9), rgba(120,120,115,.6) 60%, transparent 90%),linear-gradient(180deg,#9fb6c9,#4b5a66)}
.scene-clinic{background:radial-gradient(60% 50% at 50% 35%, rgba(255,255,255,.98), rgba(214,236,228,.85) 55%, #8fb3a6 100%)}
.scene-hands{background:radial-gradient(50% 40% at 55% 45%, rgba(230,245,250,.96), rgba(160,200,215,.8) 55%, #4f7a8a 100%)}
.scene-salon{background:radial-gradient(50% 40% at 50% 40%, rgba(255,240,228,.96), rgba(214,180,160,.7) 55%, transparent 85%),linear-gradient(180deg,#8d6b5c,#4a332b)}
.scene-desk{background:radial-gradient(42% 32% at 72% 26%, rgba(255,196,120,.95), rgba(255,160,80,.35) 50%, transparent 72%),radial-gradient(58% 26% at 28% 56%, rgba(70,150,190,.55), transparent 70%),linear-gradient(180deg,#1d1510 0%,#2d1f13 48%,#0a0807 100%)}
.scene-talk{background:radial-gradient(40% 50% at 50% 40%, rgba(255,230,210,.9), rgba(120,90,80,.5) 55%, transparent 80%),linear-gradient(180deg,#3a2f33,#15111a)}
.scene-note{background:radial-gradient(60% 50% at 38% 36%, rgba(255,255,255,.95), rgba(226,230,234,.8) 55%, #8f9aa3 100%)}
.scene-sky{background:radial-gradient(70% 40% at 50% 34%, rgba(255,236,190,.85), transparent 60%),linear-gradient(180deg,#f6c98f 0%,#f0a76c 30%,#2a94a3 50%,#0c4b58 100%)}
.scene-street{background:radial-gradient(40% 40% at 70% 30%, rgba(255,220,170,.8), transparent 70%),linear-gradient(180deg,#5b6a7a,#1d242c)}
.scene-dead{background:linear-gradient(180deg,#3b3e42,#202224)}
.scene-dark{background:linear-gradient(180deg,#17191c,#0a0b0d)}

/* ---- captions, lit one word at a time: five words per line --------------- */
.cap{display:flex;flex-wrap:wrap;gap:.1em .35em;justify-content:center;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.cap i{font-style:normal;opacity:.42;text-shadow:0 3px 16px rgba(0,0,0,.7)}
.cap i:nth-child(1){--i:0}.cap i:nth-child(2){--i:1}.cap i:nth-child(3){--i:2}.cap i:nth-child(4){--i:3}.cap i:nth-child(5){--i:4}
@media (prefers-reduced-motion:no-preference){
  html.anim .cap i{animation:lit 2.75s steps(1,end) infinite;animation-delay:calc(var(--i) * .55s)}
  @keyframes lit{0%{opacity:1;color:var(--hot,#fff);transform:scale(1.08)}20%{opacity:.42;color:inherit;transform:none}100%{opacity:.42}}
}
.cap i{transition:none;display:inline-block}

/* ---- reveal: only when the script is on ----------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.anim .rv{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
  html.anim .rv.in{opacity:1;transform:none}
  html.anim .rvs>*{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  html.anim .rvs.in>*{opacity:1;transform:none}
  html.anim .rvs.in>*:nth-child(2){transition-delay:.07s}
  html.anim .rvs.in>*:nth-child(3){transition-delay:.14s}
  html.anim .rvs.in>*:nth-child(4){transition-delay:.21s}
  html.anim .rvs.in>*:nth-child(5){transition-delay:.28s}
  html.anim .rvs.in>*:nth-child(6){transition-delay:.35s}
  html.anim .rvs.in>*:nth-child(7){transition-delay:.42s}
  html.anim .rvs.in>*:nth-child(8){transition-delay:.49s}
  html.anim .rvs.in>*:nth-child(9){transition-delay:.56s}
}

/* ---- her logo reel, inside the phone. Clipped by the screen, never over the bezel.
   With reduced motion the poster still stands in. --------------------------------- */
.frame.live{aspect-ratio:9/16;background:#061a1f}
.frame.live::before,.frame.live::after{display:none}
.frame.live .vid,.frame.live .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.frame.live .still{display:none}
.frame.live .prog{display:none}
@media (prefers-reduced-motion:reduce){
  .frame.live .vid{display:none}
  .frame.live .still{display:block}
}
/* ---- one hairline, drawn from the brand colours, round at every width ----------- */
.hairline{position:relative;isolation:isolate}
.hairline::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(90deg,#3ad8e8,#0b7d90 55%,#3ad8e8);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}