/* ============================================================
   MEDIATRIX — MULTI-PAGE PARTS
   Page hero, closing CTA band, the home Explore index and the route
   transition cover. Everything else reuses the existing system.
   ============================================================ */

/* ---------- Type polish (site-wide) ----------
   The display face's word space is very narrow; at card-title sizes words
   ran together. Open it up (more at small sizes), balance heading wraps and
   keep paragraphs from ending on a single orphaned word. */
.d1,.d2,.d3,h1,h2,h3,.d-xl,
.footer-mantra,.portcards__label,.gate__claim,.preloader__mark,.pull,
.marquee--giant .marquee__track > * > span{word-spacing:.1em}
.hcard__name,.vcard__label,.swcard__label,.hcard__big{word-spacing:.2em}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* ---------- Active route in the nav ---------- */
.nav a[aria-current="page"]{opacity:1;color:var(--yellow)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav__cta[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--yellow-soft)}

/* ---------- Page hero ---------- */
.phero{
  display:flex;align-items:flex-end;
  min-height:clamp(540px,82svh,800px);
  padding-top:clamp(150px,17vw,210px);
  padding-bottom:clamp(76px,9vw,124px);
}
.phero__bg{--shade-top:.5;--shade-bottom:.88}
.phero__bg .live-layer{will-change:transform;transform:scale(1.14)}
/* extra left-hand shade so the copy always sits on dark */
.phero__bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,10,11,.86) 0%,rgba(10,10,11,.55) 38%,transparent 72%);
}
.phero__inner > *{max-width:720px}
.phero .eyebrow{margin-top:26px}
.phero h1{margin:18px 0 20px;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:.96}
.phero__lede{
  max-width:52ch;margin-bottom:32px;
  font-size:.875rem;line-height:1.6;letter-spacing:0;text-transform:uppercase;color:var(--text);
}
.phero__crumbs{
  display:flex;align-items:center;gap:10px;
  font-size:.6875rem;letter-spacing:0;text-transform:uppercase;color:var(--text-low);
}
.phero__crumbs a{color:var(--text-mid);transition:color .3s}
.phero__crumbs a:hover,.phero__crumbs a:focus-visible{color:var(--yellow)}
.phero__crumbs [aria-current]{color:var(--yellow-soft)}
.phero__coord{
  position:absolute;right:var(--gutter);top:clamp(96px,11vw,130px);
  font-size:.6875rem;letter-spacing:0;color:var(--text-low);
}
.phero__bracket{left:calc(var(--gutter) + 6px);bottom:22px}
.phero__bracket.banner__bracket--r{left:auto;right:calc(var(--gutter) + 6px)}

/* ---------- Closing CTA band ---------- */
/* heavier shade than the other bands: the photo sits behind a d-xl headline */
.ctaband .band__bg--photo{--shade-top:.72;--shade-bottom:.86}
.ctaband .d-xl{margin-top:18px}
.ctaband__row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:18px 30px;margin-top:clamp(28px,3.4vw,44px);
}

/* ---------- Home: Where Do You Want To Go? (mission briefs) ----------
   Static stack by default; .is-deck (added by lib/motion/briefs.js) turns it
   into one pinned card frame the briefs swap through. */
.mbrief{padding-bottom:0}
.mbrief__head{position:relative;text-align:center}
.mbrief__head .eyebrow{justify-content:center}
.mbrief__title{margin:18px 0 20px;font-size:clamp(2.2rem,4.4vw,4.1rem);line-height:.96}
.mbrief__title em{font-style:normal;color:var(--yellow)}
.mbrief__lede{
  max-width:58ch;margin-inline:auto;
  font-size:.875rem;line-height:1.6;letter-spacing:0;text-transform:uppercase;color:var(--text);
}
/* HUD wires running out from the headline to the viewport edges */
.mbrief__wire{
  position:absolute;display:flex;align-items:flex-end;height:12px;
  width:calc(50vw - min(24vw,330px));
  --wire:rgba(255,195,0,.5);
}
.mbrief__wire svg{width:60px;height:12px;flex:none;overflow:visible;fill:none;stroke:var(--wire);stroke-width:1}
.mbrief__wire i{flex:1;height:1px;background:var(--wire)}
.mbrief__wire b{width:6px;height:6px;flex:none;margin-bottom:-2.5px;background:var(--yellow)}
.mbrief__wire--l{right:calc(50% + min(24vw,330px));top:calc(34px + clamp(2.2rem,4.4vw,4.1rem) * 1.5)}
.mbrief__wire--r{left:calc(50% + min(24vw,330px));top:calc(34px + clamp(2.2rem,4.4vw,4.1rem) * .45)}
.mbrief__wire--r b{margin-bottom:-2.5px}

.mbrief__stage{position:relative;margin-top:clamp(40px,6vw,84px);padding-bottom:clamp(72px,9vw,128px)}
.mbrief__side{
  display:none;
  font-size:.8125rem;font-weight:500;letter-spacing:0;text-transform:uppercase;color:var(--text);
}
.mbrief__count{display:block;margin-top:10px;font-size:.6875rem;color:var(--text-low);text-align:right}
.mbrief__count b{color:var(--yellow);font-weight:600}

/* static stack */
.mbrief__deck{display:grid;gap:22px;width:min(580px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.mbrief__frame{display:none}
.mbcard,.mbrief__frame{
  --cut:clamp(20px,2vw,30px);
  background:#1b1b1d;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%,0 var(--cut));
}
.mbcard{position:relative;height:clamp(520px,64vw,620px)}
.mbcard__body{position:relative;padding:clamp(22px,2vw,30px)}
.mbcard__kicker{font-size:.75rem;letter-spacing:0;text-transform:uppercase;color:var(--text-low)}
.mbcard__title{margin-top:16px;font-size:clamp(1.25rem,1.9vw,1.9rem);line-height:1}
.mbcard__title em{font-style:normal;color:var(--yellow)}
.mbcard__rule{
  position:relative;display:block;height:1px;
  margin:clamp(22px,2.4vw,32px) calc(-1 * clamp(22px,2vw,30px)) 0 calc(-1 * clamp(22px,2vw,30px) + 24px);
  background:var(--hairline);
}
.mbcard__rule::before{   /* the chamfer where the rule meets the card edge */
  content:"";position:absolute;right:100%;top:0;width:34px;height:1px;background:var(--hairline);
  transform-origin:right center;transform:rotate(-45deg);
}
.mbcard__inside{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;margin:22px 0 0}
.mbcard__inside dt{font-size:.75rem;letter-spacing:0;text-transform:uppercase;color:var(--text-low);white-space:nowrap}
.mbcard__inside dd{margin:0;text-align:right;font-size:.8125rem;line-height:1.3;letter-spacing:0;text-transform:uppercase;color:var(--text-hi);text-wrap:pretty}
.mbcard__ticker{
  margin-top:22px;height:34px;display:flex;align-items:center;
  border:1.5px solid rgba(255,195,0,.7);border-radius:4px;background:rgba(255,195,0,.1);
}
.mbcard__ticker .marquee__track > * > span{
  display:inline-flex;align-items:center;
  font-size:.75rem;letter-spacing:0;text-transform:uppercase;color:rgba(255,213,77,.6);
}
.mbcard__ticker .marquee__track > * > span::after{content:"//";padding-inline:1.1em;color:rgba(255,195,0,.45)}

/* outcome slip: the part that peels away */
.mbcard__result{
  --rc:clamp(18px,1.8vw,26px);
  position:absolute;left:0;right:0;bottom:0;height:31%;min-height:176px;
  display:block;overflow:hidden;isolation:isolate;color:var(--text-hi);
  clip-path:polygon(var(--rc) 0,calc(100% - var(--rc)) 0,100% var(--rc),100% calc(100% - var(--rc)),calc(100% - var(--rc)) 100%,var(--rc) 100%,0 calc(100% - var(--rc)),0 var(--rc));
  will-change:transform;
}
.mbcard__result img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  filter:grayscale(1) contrast(1.3) brightness(.9);
  transition:transform .8s var(--ease-out);
}
.mbcard__tint{position:absolute;inset:0;background:var(--yellow);mix-blend-mode:multiply}
.mbcard__tint::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,10,11,.78) 0%,rgba(10,10,11,.5) 55%,rgba(10,10,11,.15) 100%);
}
.mbcard__result::after{   /* lit strip along the foot */
  content:"";position:absolute;left:var(--rc);right:var(--rc);bottom:12px;height:2px;
  background:var(--yellow-soft);opacity:.85;
}
.mbcard__label{
  position:absolute;left:24px;top:20px;
  font-size:.75rem;letter-spacing:0;text-transform:uppercase;color:rgba(255,255,255,.7);
}
.mbcard__outcome{
  position:absolute;left:24px;right:24px;top:46px;
  font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  font-variation-settings:var(--display-axes);letter-spacing:var(--display-ls);word-spacing:.14em;
  font-size:clamp(.95rem,1.3vw,1.3rem);line-height:1.08;text-transform:uppercase;
  text-shadow:0 2px 16px rgba(0,0,0,.6);text-wrap:balance;
}
.mbcard__open{
  position:absolute;left:24px;bottom:26px;padding:6px 10px;
  font-size:.6875rem;letter-spacing:0;text-transform:uppercase;
  background:var(--ink);color:var(--yellow);
  transition:background .3s,color .3s;
}
.mbcard__result:hover .mbcard__open,.mbcard__result:focus-visible .mbcard__open{background:var(--yellow);color:var(--ink)}
.mbcard__result:hover img{transform:scale(1.05)}

/* pinned deck */
.mbrief.is-deck .mbrief__stage{
  height:100vh;height:100svh;margin-top:clamp(20px,3vw,40px);padding-bottom:0;
  display:grid;place-items:center;
}
.mbrief.is-deck .mbrief__side{display:block;position:absolute;top:50%;translate:0 -50%}
.mbrief.is-deck .mbrief__side--l{left:var(--gutter)}
.mbrief.is-deck .mbrief__side--r{right:var(--gutter);text-align:right}
.mbrief.is-deck .mbrief__deck{
  display:block;position:relative;
  width:clamp(320px,31vw,580px);height:min(80svh,760px);
}
.mbrief.is-deck .mbrief__frame{display:block;position:absolute;inset:0}
.mbrief.is-deck .mbcard{position:absolute;inset:0;height:auto;background:none;clip-path:none}
/* the whole card is the link (lib/motion/briefs.js); only the showing slip is clickable */
.mbcard{cursor:pointer}
.mbrief.is-deck .mbcard__result{pointer-events:none}
.mbrief.is-deck .mbcard__result.is-current{pointer-events:auto}
.mbrief.is-deck .mbrief__deck:hover .mbcard__result.is-current .mbcard__open{background:var(--yellow);color:var(--ink)}

@media (max-width:760px){
  .mbrief__wire{display:none}
  .mbrief.is-deck .mbrief__side{display:none}
  .mbrief.is-deck .mbrief__deck{width:calc(100vw - 2 * var(--gutter));height:min(76svh,640px)}
  .mbcard__result{height:34%}
}

/* ---------- Home: Our Trusted Clients (wordmark carousel) ---------- */
.clients{overflow:hidden}
.clients__head{display:flex;flex-direction:column;align-items:center;text-align:center}
.clients__title{font-size:clamp(1.9rem,3.4vw,3rem);line-height:.98}
.clients__title em{font-style:normal;color:var(--yellow)}
.clients__rule{display:block;width:min(460px,80vw);height:16px;margin-top:clamp(18px,2vw,26px);overflow:visible}
.clients__rule-line{fill:none;stroke:rgba(255,195,0,.65);stroke-width:1;vector-effect:non-scaling-stroke}
.clients__rule-cap{fill:none;stroke:rgba(255,195,0,.9);stroke-width:1.4;vector-effect:non-scaling-stroke}
.clients__rule-bar{fill:var(--yellow)}

/* one row in a narrow centred window (about half the page, as in the
   reference), fading out hard at both ends */
.clients__row{
  width:min(820px,calc(100% - 2 * var(--gutter)));margin:clamp(40px,4.6vw,64px) auto 0;
  overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
}
.clients__row::-webkit-scrollbar{display:none}
.clients__cta{display:flex;justify-content:center;margin-top:clamp(36px,4vw,56px)}
.clients.is-moving .clients__row{overflow:hidden}
.clients__track{
  display:flex;align-items:center;width:max-content;
  gap:clamp(48px,5vw,76px);padding-right:clamp(48px,5vw,76px);
  will-change:transform;
}

/* brushed-grey wordmarks */
.wmark{display:inline-flex;align-items:center;gap:.32em;flex:none;font-size:clamp(1.6rem,2.5vw,2.4rem);line-height:1}
.wmark__glyph{width:.52em;height:.78em;flex:none;fill:#8d8d90}
.wmark__name{
  font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  font-variation-settings:var(--display-axes);letter-spacing:0;word-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#e2e2e4 0%,#a4a4a8 48%,#76767a 52%,#b9b9bd 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:filter .4s var(--ease-out);
}

.vdeck__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

@media (max-width:760px){
  .clients__row{
    width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  }
  .wmark{font-size:1.7rem}
}

/* ---------- /clients: grid of client cards ---------- */
.client-grid{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}
.client{
  --cc:14px;
  position:relative;display:flex;align-items:center;gap:20px;height:100%;
  min-height:136px;padding:20px 22px;color:inherit;
  background:linear-gradient(160deg,rgba(255,195,0,.05),transparent 50%),#151517;
  box-shadow:inset 0 0 0 1px var(--hairline);
  clip-path:polygon(var(--cc) 0,100% 0,100% calc(100% - var(--cc)),calc(100% - var(--cc)) 100%,0 100%,0 var(--cc));
  transition:box-shadow .4s var(--ease-out),background .4s var(--ease-out),transform .4s var(--ease-out);
}
.client::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--yellow);opacity:.35;transition:opacity .4s var(--ease-out)}
.client__mark{flex:none;display:grid;place-items:center;width:60px;height:82px;background:rgba(255,195,0,.08);box-shadow:inset 0 0 0 1px rgba(255,195,0,.25)}
.client__mark svg{width:32px;height:48px;fill:var(--yellow);transition:transform .5s var(--ease-out)}
.client__text{display:flex;flex-direction:column;gap:7px;min-width:0}
.client__top{display:flex;justify-content:space-between;gap:10px;font-size:.625rem;letter-spacing:0;text-transform:uppercase}
.client__top b{font-weight:600;color:var(--yellow-soft)}
.client__top i{font-style:normal;color:var(--text-low)}
.client__name{
  font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  font-variation-settings:var(--display-axes);letter-spacing:var(--display-ls);word-spacing:.2em;
  font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1;text-transform:uppercase;color:var(--text-hi);text-wrap:balance;
}
.client__work{font-size:.625rem;letter-spacing:0;text-transform:uppercase;color:var(--text-mid)}
.client:hover,.client:focus-visible{
  transform:translateY(-4px);
  background:linear-gradient(160deg,rgba(255,195,0,.14),transparent 60%),#18181a;
  box-shadow:inset 0 0 0 1px var(--yellow);
}
.client:hover::after,.client:focus-visible::after{opacity:1}
.client:hover .client__mark svg,.client:focus-visible .client__mark svg{transform:translateY(-3px) scale(1.06)}

/* ---------- Home: Proof, Not Promises — full-screen band ---------- */
.band-giant.gband{
  min-height:100vh;min-height:100svh;padding-block:0;
  display:flex;align-items:center;overflow:hidden;
}
.gband__bg{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
  /* the same soft fade at the top and bottom edges as every other photo band */
  -webkit-mask-image:linear-gradient(to top,transparent,#000 140px,#000 calc(100% - 140px),transparent);
  mask-image:linear-gradient(to top,transparent,#000 140px,#000 calc(100% - 140px),transparent);
}
.gband__bg .live-layer{top:-8%;bottom:-8%;will-change:transform}
.gband__bg .live-layer > img{object-position:50% 42%}
.gband__shade{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* the band's original black filter (.52 → .8), plus a darker lip top and bottom */
  background:
    linear-gradient(180deg,rgba(10,10,11,.52),rgba(10,10,11,.8)),
    linear-gradient(180deg,rgba(10,10,11,.6) 0%,transparent 14%,transparent 86%,rgba(10,10,11,.5) 100%);
}
.gband .marquee--giant{width:100%}

/* status terminal, bottom-left */
.gband__term{
  position:absolute;z-index:2;left:clamp(24px,2.6vw,48px);bottom:clamp(90px,14vh,140px);
  width:min(290px,72vw);padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:4px;
  font-size:.6875rem;line-height:1.45;letter-spacing:0;text-transform:uppercase;color:rgba(255,213,77,.72);
  background:rgba(255,195,0,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1.5px rgba(255,195,0,.7);
  clip-path:polygon(0 12px,12px 0,52% 0,calc(52% + 10px) 8px,100% 8px,100% calc(100% - 12px),calc(100% - 12px) 100%,40% 100%,calc(40% - 8px) calc(100% - 6px),0 calc(100% - 6px));
}
.gband__term [data-line]{display:block;min-height:1.45em;white-space:pre-wrap;font-size:inherit;line-height:inherit;letter-spacing:inherit}
.gband__term[data-terminal] [data-line]{visibility:hidden}
.gband__term[data-terminal] [data-line].is-typing,
.gband__term[data-terminal] [data-line].is-done{visibility:visible}
.gband__term [data-line].is-typing::after{
  content:"";display:inline-block;vertical-align:-2px;width:6px;height:1em;margin-left:2px;
  background:var(--yellow);animation:gbandCaret .9s steps(1) infinite;
}
.gband__term [data-line].is-done:last-child{color:var(--yellow-soft)}
@keyframes gbandCaret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.gband__term [data-line].is-typing::after{animation:none}}

/* ---------- Industries We Serve — Dark Star Labs portfolio list ---------- */
.indl{overflow:hidden}
.indl__wrap{position:relative;padding-left:clamp(28px,3vw,52px);padding-right:var(--gutter)}
.indl__rail{position:absolute;left:12px;top:0;bottom:0;width:1px;background:rgba(255,195,0,.5)}
.indl__head{margin-bottom:clamp(40px,5vw,70px)}
.indl__title{margin-top:14px;font-size:clamp(2rem,3.6vw,3.3rem);line-height:.96;word-spacing:.1em}
.indl__title em{font-style:normal;color:var(--yellow)}

.indl__list{list-style:none;margin:0;padding:0}
.indl__item{position:relative;padding-left:clamp(90px,6.6vw,125px)}
.indl__row{
  position:relative;display:flex;align-items:center;gap:28px;
  min-height:clamp(70px,9.5vh,88px);padding:14px clamp(30px,5vw,100px);padding-right:70px;
  color:var(--text-hi);border-bottom:1px solid rgba(228,228,228,.2);
  transition:background .35s var(--ease-out),color .35s var(--ease-out);
}
.indl__name{
  flex:none;font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  font-variation-settings:var(--display-axes);letter-spacing:var(--display-ls);word-spacing:.1em;
  font-size:clamp(1.3rem,2.3vw,2.25rem);line-height:1;text-transform:uppercase;
}
/* the need line only shows on the lit row */
.indl__need{
  font-size:.6875rem;line-height:1.4;letter-spacing:0;text-transform:uppercase;
  opacity:0;transform:translateX(-10px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}
.indl__mark{position:absolute;right:34px;top:50%;width:11px;height:11px;margin-top:-5.5px;background:var(--text-hi);transition:background .35s,transform .35s var(--ease-out)}
.indl__row:hover,.indl__row:focus-visible{background:var(--yellow);color:var(--ink)}
.indl__row:hover .indl__need,.indl__row:focus-visible .indl__need{opacity:.85;transform:none}
.indl__row:hover .indl__mark,.indl__row:focus-visible .indl__mark{background:var(--ink);transform:rotate(45deg)}

/* connector: rail → angled line → this row's divider */
.indl__link{
  position:absolute;left:calc(-1 * clamp(28px,3vw,52px) + 12px);bottom:-1px;
  width:calc(clamp(90px,6.6vw,125px) + clamp(28px,3vw,52px) - 12px + 1px);height:50px;
  transform:translateY(49px);overflow:visible;fill:none;stroke:rgba(255,195,0,.55);stroke-width:1;
}
.indl__link path{vector-effect:non-scaling-stroke}
.indl__node{
  position:absolute;left:calc(-1 * clamp(28px,3vw,52px) + 12px - 3px);bottom:-51px;
  width:7px;height:7px;background:var(--yellow);
}
.indl__item:last-child{margin-bottom:60px}

/* the photo that follows the pointer */
.indl__follow{
  position:fixed;left:0;top:0;z-index:40;width:clamp(220px,20vw,340px);aspect-ratio:1.45;
  pointer-events:none;opacity:0;transform:scale(.6);
  clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
}
.indl__follow img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2)}
.indl__follow::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,#f0b400,#7a5a00);mix-blend-mode:multiply}

@media (max-width:760px){
  .indl__item{padding-left:44px}
  .indl__row{padding-inline:14px 44px}
  .indl__need{display:none}
  .indl__link{width:calc(44px + clamp(28px,3vw,52px) - 12px + 1px)}
  .indl__link path{d:path("M0 49H20L69 1")}
}

/* ---------- Live photos (lib/motion/live-photos.js, components/chrome/LivePhoto) ---------- */
.live-fill{position:absolute;inset:0;will-change:transform;transform-origin:50% 50%}
.live-layer{position:absolute;inset:0}
.live-layer > img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.live-occ{pointer-events:none}
.live-glitch{pointer-events:none;will-change:transform}   /* torn slice, live-photos.js */
.live-screen{position:absolute;left:0;top:0;display:block;transform-origin:0 0;pointer-events:none}
/* light that follows the pointer */
.live-glow{
  position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(clamp(160px,18vw,300px) circle at var(--mx,50%) var(--my,50%),rgba(255,222,110,.5),rgba(255,195,0,.12) 45%,transparent 72%);
  transition:opacity .45s var(--ease-out);
}
.is-hot > .live-glow{opacity:1}
/* scanline that sweeps down on hover */
.live-scan{
  position:absolute;left:0;right:0;top:0;z-index:2;height:26%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent,rgba(255,213,77,.28) 48%,rgba(255,240,180,.5) 50%,rgba(255,213,77,.28) 52%,transparent);
  transform:translateY(-110%);
}
/* pulse from a tap or click */
.live-ripple{
  position:absolute;z-index:2;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;pointer-events:none;
  border:2px solid var(--yellow);box-shadow:0 0 24px rgba(255,195,0,.6),inset 0 0 18px rgba(255,195,0,.4);
}

/* studio banner (home) */
.banner__media{position:relative;cursor:crosshair;isolation:isolate}
.banner__media .live-layer > img{object-position:50% 38%}
.banner__live{
  position:absolute;z-index:3;left:clamp(28px,4vw,70px);bottom:clamp(18px,2.4vw,34px);
  display:inline-flex;align-items:center;gap:8px;padding:5px 10px;
  font-size:.625rem;letter-spacing:0;text-transform:uppercase;color:var(--yellow-soft);
  background:rgba(10,10,11,.6);box-shadow:inset 0 0 0 1px rgba(255,195,0,.5);pointer-events:none;
}
.banner__live i{width:7px;height:7px;border-radius:50%;background:#ff3b30;box-shadow:0 0 10px #ff3b30;animation:bannerLive 1.4s steps(1) infinite}
@keyframes bannerLive{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.banner__live i{animation:none}}

/* ---------- Logo (components/chrome/Logo) ---------- */
.logo{display:block;width:auto;overflow:visible}
.logo__mark{fill:var(--text-hi)}
.logo__type{fill:var(--text-hi)}   /* the whole logo in white */
/* navigation: primary at the top, secondary mark in the condensed capsule */
.brand{gap:0;font-size:inherit;letter-spacing:0}
.brand .logo{height:clamp(17px,1.5vw,22px)}
.brand .logo--secondary{height:24px}
.brand__short{display:none}
.is-scrolled .brand__full{display:none}
.is-scrolled .brand__short{display:block}
.brand:hover .logo path,.brand:focus-visible .logo path{fill:var(--yellow)}
/* preloader, entry gate, footer */
.preloader__mark .logo{height:26px;margin-inline:auto}
.gate__logo{height:18px;margin-bottom:6px}
.footer-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.footer-social a{
  display:inline-flex;align-items:center;gap:10px;padding:8px 12px;
  font-size:.75rem;text-transform:uppercase;color:var(--text-hi);
  box-shadow:inset 0 0 0 1px var(--hairline);transition:color .3s,box-shadow .3s;
}
.footer-social svg{width:16px;height:16px;fill:currentColor}
.footer-social a:hover,.footer-social a:focus-visible{color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}

/* ---------- Route transition cover ---------- */
.ptrans{
  position:fixed;inset:0;z-index:260;pointer-events:none;
  background:var(--ink);   /* GSAP owns the transform (starts at yPercent 100) */
}
.ptrans::before{   /* the yellow leading edge */
  content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--yellow);
  box-shadow:0 0 30px rgba(255,195,0,.5);
}

@media (max-width:760px){
  .phero{min-height:0}
  .phero__coord{display:none}
  .phero__bg::before{background:linear-gradient(180deg,rgba(10,10,11,.4),rgba(10,10,11,.8))}
  .phero__lede{font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){
  .phero__bg .live-layer{transform:none}
}