/* ScreenWave Studio — design per Figma "ScreenWave Studio" (Sofia Weinstein), Aug 2026 */

:root{
  --bg: #000000;
  --text: #ffffff;
  --muted: #9A9A9A;
  --accent: #DFEB00;      /* hover/active + solid display numbers */
  --green: #00F176;       /* outline display numbers, mobile stat cards */
  --green-deep: #01AF47;  /* contact form card */
  --error: #FF001F;
  --line: #2c2c2c;
  --radius: 24px;
  --font: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(20px, 4vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ padding-left:var(--pad); padding-right:var(--pad); }
#channels, #about, #contact{ scroll-margin-top:90px; }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--pad);
  transition:background-color .3s ease;
}
.site-header.scrolled{ background:rgba(0,0,0,.82); }
@supports (backdrop-filter: blur(1px)){
  .site-header.scrolled{ background:rgba(0,0,0,.55); backdrop-filter:blur(14px); }
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand__mark{ width:60px; height:auto; }
.brand__name{
  font-weight:500; letter-spacing:.06em; text-transform:uppercase; font-size:15px; white-space:nowrap;
}
.nav{ display:flex; gap:clamp(24px, 5vw, 90px); }
.nav__link{
  color:#fff; text-decoration:none; font-size:16px;
  transition:color .25s ease;
}
.nav__link:hover, .nav__link:focus-visible, .nav__link.is-active{ color:var(--accent); }

.menu-btn{
  display:none; position:relative; z-index:70;
  width:44px; height:40px; padding:10px;
  background:none; border:0; cursor:pointer;
}
.menu-btn span{
  display:block; height:2px; background:#fff; margin:6px 0;
  transition:transform .3s ease, opacity .3s ease, background-color .3s ease;
}
.menu-btn[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }
.menu-btn:hover span{ background:var(--accent); }

.mobile-menu{
  position:fixed; inset:0; z-index:45; /* below .site-header so brand + close button stay clickable */
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  display:flex; align-items:center;
  opacity:0; transition:opacity .3s ease;
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu.open{ opacity:1; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:8px; padding:var(--pad); width:100%; }
.mobile-menu a{
  color:#fff; text-decoration:none;
  font-size:clamp(34px, 9vw, 48px); font-weight:800; text-transform:uppercase;
  padding:6px 0;
  transition:color .25s ease, transform .25s ease;
}
.mobile-menu a:hover, .mobile-menu a:focus-visible{ color:var(--accent); transform:translateX(6px); }
.mobile-menu a.is-active{ color:var(--accent); }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__media, .hero__media img{ position:absolute; inset:0; width:100%; height:100%; }
.hero__media img{ object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.9) 100%),
    linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
}
.hero__content{ position:relative; width:100%; padding:0 var(--pad) clamp(40px, 7vh, 90px); }
.hero__title{
  margin:0 0 clamp(20px, 4vh, 44px);
  font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem, 7.2vw, 7.2rem);
  line-height:1.02; letter-spacing:.01em;
  max-width:18ch;
}
.hero__lede{
  margin:0 0 0 clamp(0px, 30vw, 620px);
  max-width:46ch; font-size:clamp(15px, 1.25vw, 19px); color:#ececec;
  text-align:left;
}

/* ---------- numbers ---------- */
.numbers{
  display:grid; grid-template-columns:minmax(260px, 1fr) 2.2fr;
  gap:clamp(24px, 4vw, 80px);
  padding-top:clamp(60px, 10vh, 130px); padding-bottom:clamp(40px, 6vh, 80px);
}
.numbers__intro{ display:flex; flex-direction:column; gap:clamp(40px, 10vh, 130px); }
.statement{
  margin:0; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.6rem, 2.6vw, 2.6rem); line-height:1.12; max-width:12ch;
}
.numbers__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.ncard{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 26px 150px;
  min-height:300px;
  transition:transform .25s ease, border-color .25s ease;
}
.ncard--tall{ grid-row:span 2; padding-bottom:0; }
.ncard p{ margin:0; font-size:clamp(17px, 1.7vw, 24px); max-width:22ch; position:relative; z-index:1; }
.ncard__num{
  position:absolute; bottom:-0.08em; left:-0.07em;
  font-weight:800; line-height:1;
  font-size:clamp(150px, 21vw, 330px);
  letter-spacing:-.02em;
  pointer-events:none;
  user-select:none;
}
.ncard__num--right{ left:auto; right:-0.07em; }
/* digit line-height tightened for desktop/tablet only — mobile block (>=701px guard)
   sets its own font-size/position for .ncard__num and doesn't touch line-height,
   so scope this here rather than in the base rule to avoid leaking into the
   mobile layout. */
@media (min-width: 701px){
  .ncard__num{ line-height:.8; }
}
.ncard__num--solid{ color:var(--accent); }
.ncard__num--outline{ color:transparent; -webkit-text-stroke:2px var(--green); }
@supports not (-webkit-text-stroke: 2px black){
  .ncard__num--outline{ color:var(--green); opacity:.55; }
}
/* desktop: three portrait columns per the Landing frame (01 tall, 02/03, 04/05) */
@media (min-width: 1101px){
  .numbers__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .ncard--tall{ grid-column:1; grid-row:1 / span 2; }
  .ncard:nth-child(2){ grid-column:2; grid-row:1; }
  .ncard:nth-child(3){ grid-column:2; grid-row:2; }
  .ncard:nth-child(4){ grid-column:3; grid-row:1; }
  .ncard:nth-child(5){ grid-column:3; grid-row:2; }
}

/* ---------- stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;
  padding-top:20px; padding-bottom:clamp(60px, 9vh, 120px);
}
.stat{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 26px;
  display:flex; flex-direction:column; justify-content:space-between; gap:44px;
  transition:transform .25s ease, border-color .25s ease;
}
.stat__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; font-size:15px; color:#dedede; }
.stat__arrow{ color:var(--accent); font-size:22px; line-height:1; transition:transform .25s ease; }
.stat__value{ font-size:clamp(56px, 6vw, 96px); font-weight:800; line-height:.95; text-transform:uppercase; }
.stat__value--wrap{ font-size:clamp(34px, 3.4vw, 56px); line-height:1.05; }

/* hover lift (cards) */
@media (hover:hover){
  .liftable:hover{ transform:translateY(-8px); border-color:#4a4a4a; }
  .stat:hover .stat__arrow{ transform:translate(3px, -3px); }
}
/* mobile tap: top row lifts, bottom row dips */
.liftable.tap-top:active{ transform:translateY(-8px); }
.liftable.tap-bottom:active{ transform:translateY(8px); }

/* ---------- channels ---------- */
.channels-title{
  margin:0; padding:clamp(30px, 6vh, 80px) 0 10px;
  overflow:hidden; white-space:nowrap;
  display:flex; justify-content:center;
  color:var(--green); font-weight:800; text-transform:uppercase;
  font-size:clamp(3.2rem, 15vw, 15.5rem); line-height:.95; letter-spacing:.01em;
}
.channels-title span{ flex:none; }
.channel{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.channel__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.channel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.88) 100%);
}
.channel__tags{
  position:absolute; top:clamp(18px, 4vh, 44px); right:var(--pad); z-index:2;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end;
}
.channel__tags span{
  border:1px solid rgba(255,255,255,.7); border-radius:999px;
  padding:16px 30px; font-size:17px; color:#fff;
  background:rgba(0,0,0,.15);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.channel__body{ position:relative; z-index:2; padding:0 var(--pad) clamp(36px, 6vh, 70px); max-width:760px; }
.channel__name{
  margin:0 0 18px; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem, 7vw, 6.5rem); line-height:1.04; max-width:12ch;
}
.channel__desc{ margin:0; color:#e6e6e6; font-size:clamp(15px, 1.2vw, 18px); max-width:58ch; }

/* ---------- roku badges (per-channel + CTA strip) ---------- */
:root{ --roku-purple: #662D91; }
.roku-badge{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:10px 18px 10px 20px;
  background:#fff; color:#000;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:background-color .2s ease, transform .2s ease;
}
.roku-badge:hover, .roku-badge:focus-visible{ background:#e8e8e8; transform:translateY(-2px); }
.roku-badge:active{ transform:translateY(0); }
.roku-badge__logo{ flex:none; display:block; height:14px; width:auto; }
.channel__roku{ margin-top:20px; }
.channel__roku:empty{ display:none; }

.roku-cta{
  padding-top:clamp(40px, 6vh, 72px); padding-bottom:clamp(40px, 6vh, 72px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.roku-cta__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px;
}
.roku-cta__eyebrow{
  margin:0 0 6px; color:var(--accent); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:13px;
}
.roku-cta__body{ margin:0; font-size:clamp(17px, 2.4vw, 22px); max-width:46ch; }
.roku-cta__list{
  list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:12px;
}
.roku-cta__list:empty{ display:none; }
.roku-cta__list .roku-badge{ background:#fff; }
.roku-cta__list .roku-badge:hover, .roku-cta__list .roku-badge:focus-visible{ background:#e8e8e8; }

/* ---------- about ---------- */
.about{ background:var(--accent); color:#000; }
.about__inner{
  display:grid; grid-template-columns:minmax(220px, 1fr) 1.4fr;
  gap:clamp(32px, 6vw, 110px); align-items:center;
  padding-top:clamp(80px, 11vh, 144px); padding-bottom:clamp(80px, 11vh, 144px);
}
.about__mark{ width:min(100%, 420px); height:auto; }
.about__title{
  margin:0 0 26px; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.6rem, 6vw, 5.8rem); line-height:1;
}
.about__text p{ margin:0 0 16px; max-width:56ch; font-size:clamp(15px, 1.25vw, 18px); }
.about__facts{ display:flex; gap:clamp(24px, 5vw, 80px); flex-wrap:wrap; margin-top:34px; }
.about__fact{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:500; }

/* ---------- contact ---------- */
.contact{ position:relative; padding:clamp(40px, 8vh, 100px) var(--pad) clamp(60px, 9vh, 110px); overflow:hidden; }
.contact__ghost{
  position:absolute; top:clamp(10px, 3vh, 40px); left:50%; transform:translateX(-50%);
  white-space:nowrap; text-align:center;
  font-weight:800; text-transform:uppercase; line-height:1;
  font-size:clamp(6rem, 21.5vw, 24rem);
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.85);
  pointer-events:none; user-select:none;
}
@supports not (-webkit-text-stroke: 1px black){
  .contact__ghost{ color:rgba(255,255,255,.12); }
}
.cform{
  position:relative; z-index:1;
  margin:clamp(60px, 11vw, 170px) auto 0; max-width:960px;
  background:var(--green-deep); color:#000;
  border-radius:28px;
  padding:clamp(28px, 5vw, 64px);
}
.cform__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 72px); }
.cform__fields{ display:flex; flex-direction:column; gap:clamp(22px, 3.4vh, 40px); }
.field{ display:flex; flex-direction:column; }
.field__label{ font-size:17px; margin-bottom:8px; }
.field__input{
  background:transparent; border:0; border-bottom:1.5px solid #000;
  border-radius:0; padding:6px 2px 10px; font:inherit; color:#000;
  transition:border-color .25s ease;
}
.field__input:focus{ outline:none; border-bottom-color:#fff; }
.field.invalid .field__input{ border-bottom-color:var(--error); }
.field.invalid .field__label{ color:var(--error); }
.field--message{ height:100%; }
.field--message .field__input{ flex:1; resize:vertical; min-height:220px; }
.cform__foot{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 72px);
  margin-top:clamp(24px, 4vh, 44px);
}
.cform__foot .consent, .cform__foot .send-btn{ grid-column:2; justify-self:start; }
.cform__foot .send-btn{ margin-top:18px; }
.cform__foot .cf-turnstile{ grid-column:2; justify-self:start; }
.cform__foot .cf-turnstile:empty{ display:none; }
.send-btn:disabled{ opacity:.6; cursor:default; }
.consent{ display:flex; align-items:center; gap:12px; font-size:14px; }
.consent input{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; background:#fff; border:0; border-radius:4px;
  display:grid; place-content:center; cursor:pointer; flex:none;
}
.consent input::before{
  content:""; width:12px; height:12px; border-radius:2px;
  transform:scale(0); transition:transform .15s ease;
  background:#000;
}
.consent input:checked::before{ transform:scale(1); }
.consent.invalid{ color:var(--error); }
.consent a{ color:inherit; }
.send-btn{
  position:relative; overflow:hidden;
  font:inherit; font-size:17px;
  background:transparent; color:#000;
  border:1.5px solid #000; border-radius:999px;
  padding:14px 62px; cursor:pointer;
  transition:color .3s ease, transform .15s ease;
}
.send-btn::before{
  content:""; position:absolute; inset:0;
  background:#000; transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.send-btn:hover::before, .send-btn:focus-visible::before{ transform:scaleX(1); }
.send-btn:hover, .send-btn:focus-visible{ color:var(--green); }
.send-btn:active{ transform:scale(.97); }
.send-btn__label{ position:relative; z-index:1; }
.send-btn.sent{ background:#000; color:var(--green); border-color:#000; }
.cform__status{ margin:14px 0 0; font-size:14px; min-height:1.2em; }
.cform__status.error{ color:var(--error); }

.contact__mail{ position:relative; z-index:1; text-align:center; margin-top:clamp(40px, 7vh, 80px); }
.contact__mail p{ margin:0 0 10px; color:#dcdcdc; font-size:16px; }
.contact__mail a{
  color:#fff; text-decoration:none; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.1rem, 3.2vw, 2.6rem); letter-spacing:.01em;
  transition:color .25s ease;
  white-space:nowrap;
}
.contact__mail a:hover{ color:var(--accent); }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding-top:clamp(28px, 4vh, 44px); padding-bottom:34px; }
.site-footer__nav{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-bottom:clamp(30px, 5vh, 56px);
}
.site-footer__nav a{ color:#fff; text-decoration:none; font-size:16px; transition:color .25s ease; }
.site-footer__nav a:hover{ color:var(--accent); }
.site-footer__base{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.site-footer__legal{ margin:0; color:var(--muted); font-size:13.5px; }
.site-footer__legal a{ color:var(--muted); text-decoration:none; }
.site-footer__legal a:hover{ color:#fff; text-decoration:underline; }
.site-footer__powered{
  color:var(--accent); text-decoration:none; font-size:14px;
  display:inline-flex; align-items:center; gap:12px;
  transition:opacity .25s ease;
}
.site-footer__powered img{ height:15px; width:auto; }
.site-footer__powered:hover{ opacity:.75; }

/* ---------- legal pages ---------- */
.legal{ max-width:760px; margin:0 auto; padding:140px var(--pad) 80px; }
.legal h1{ font-size:clamp(2.2rem, 5vw, 3.4rem); font-weight:800; text-transform:uppercase; margin:0 0 8px; }
.legal .updated{ color:var(--muted); margin:0 0 48px; }
.legal h2{ font-size:1.25rem; margin:36px 0 10px; }
.legal p{ color:#cfcfcf; margin:0 0 14px; }
.legal a{ color:var(--accent); }
.legal .back{ display:inline-block; color:var(--muted); text-decoration:none; margin-bottom:34px; }
.legal .back:hover{ color:#fff; }

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.about a:focus-visible, .cform a:focus-visible, .consent input:focus-visible{
  outline-color:#000;
}

/* ---------- footer brand (mobile only) ---------- */
.site-footer__brand{ display:none; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.2,.6,.2,1) var(--d, 0s); }
.reveal.in{ opacity:1; transform:none; }

/* Above-the-fold hero copy must not wait for main.js + IntersectionObserver:
   Lighthouse measured the h1 as the LCP element with 79% of its time spent
   as render delay (opacity 0 until the JS-gated transition ran). The hero
   animates in by itself from first paint instead. */
.hero .reveal{ opacity:1; transform:none; transition:none; animation:hero-in .7s cubic-bezier(.2,.6,.2,1) var(--d, 0s) both; }
@keyframes hero-in{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
html.no-anim .hero .reveal{ animation:none; }

/* signature scroll moment: number cards slide in from the right, over the
   statement column, instead of the generic fade-up. Desktop/tablet only
   (>=701px) — the mobile block already lays these cards out as rows and
   was tuned separately, so this is intentionally not applied there.
   Specificity notes:
   - ".numbers__grid .ncard.reveal" (3 classes) beats plain ".reveal" (1 class)
     so it overrides the resting translateY/none default while entering.
   - ".numbers__grid .ncard.reveal.in" (4 classes) beats both the entrance
     rule above and the generic ".reveal.in" (2 classes), so it wins once
     revealed, while still honoring the shared --d stagger delay from .reveal.
   - the hover-lift rule below is deliberately made even more specific so
     .liftable:hover keeps working after a card has finished revealing. */
@media (min-width: 701px){
  .numbers__grid .ncard.reveal{ transform:translateX(70px); }
  .numbers__grid .ncard.reveal.in{ transform:none; }
}
@media (min-width: 701px) and (hover:hover){
  .numbers__grid .ncard.reveal.in.liftable:hover{ transform:translateY(-8px); }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .numbers{ grid-template-columns:1fr; }
  .numbers__intro{ flex-direction:row; flex-wrap:wrap; gap:18px 40px; }
  .numbers__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .stats{ grid-template-columns:repeat(2, 1fr); }
  .cform__cols{ grid-template-columns:1fr; }
  .about__inner{ grid-template-columns:1fr; }
  .about__mark{ order:2; margin-top:10px; }
}
@media (max-width: 700px){
  /* First screen on phones: the surfer hero at ~3/4 height so the three
     "5 channels / 5 distinct audiences / one studio" statements read as part of
     the opening section instead of landing a full swipe below it. */
  .hero{ min-height:64svh; }
  .numbers{ padding-top:28px; }
  .nav{ display:none; }
  .menu-btn{ display:block; }
  .brand__name{ font-size:13px; }
  .brand__mark{ width:36px; }

  .hero{ align-items:flex-start; }
  .hero__content{ padding-top:96px; }
  .hero__lede{ margin-left:0; }
  .hero__scrim{
    background:linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.8) 100%);
  }
  .hero__media img{ object-position:center 65%; }

  /* three statements as bordered chips (per mobile frame) */
  .numbers{ padding-top:34px; }
  .numbers__intro{ gap:10px; flex-wrap:nowrap; }
  .statement{
    border:1px solid var(--line); border-radius:14px;
    padding:12px 10px; flex:1 1 0; min-width:0;
    font-size:12.5px; line-height:1.25; max-width:none;
  }

  /* numbers as rows: odd = outline number left / copy right, even = copy left / solid number right */
  .numbers__grid{ grid-template-columns:1fr; }
  .ncard, .ncard--tall{
    grid-row:auto; min-height:160px; padding:20px;
    display:flex; align-items:center; justify-content:flex-end;
  }
  .ncard p{ width:48%; }
  .ncard__num{ font-size:clamp(100px, 36vw, 150px); bottom:auto; top:50%; transform:translateY(-45%); }
  .numbers__grid li:nth-child(odd) .ncard__num{ left:-12px; right:auto; }
  .numbers__grid li:nth-child(odd) .ncard__num{ color:transparent; -webkit-text-stroke:2px var(--green); }
  .numbers__grid li:nth-child(even){ justify-content:flex-start; }
  .numbers__grid li:nth-child(even) p{ width:48%; }
  .numbers__grid li:nth-child(even) .ncard__num{ right:-12px; left:auto; color:var(--accent); -webkit-text-stroke:0; }

  /* mobile stats: solid green cards */
  .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .stat{ background:var(--green); border-color:var(--green); color:#000; gap:80px; }
  .stat__head{ color:#000; }
  .stat__arrow{ display:none; }
  .stat__value--wrap{ font-size:clamp(26px, 8vw, 34px); word-break:break-word; }

  .cform__foot{ grid-template-columns:1fr; }
  .cform__foot .consent, .cform__foot .send-btn, .cform__foot .cf-turnstile{ grid-column:1; }
  .consent{ font-size:13px; }

  .hero__title{ font-size:clamp(26px, 8.5vw, 40px); }

  .channels-title{ color:var(--accent); font-size:13vw; } /* mobile frame uses accent for the marquee */

  .channel__tags span{ padding:6px 14px; font-size:12px; }
  .roku-cta__inner{ flex-direction:column; align-items:flex-start; }
  .roku-cta__btn{ align-self:stretch; justify-content:center; }

  .menu-btn span{ margin:5px 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .menu-btn[aria-expanded="true"] span:first-child{ transform:translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child{ transform:translateY(-7px) rotate(-45deg); }

  .mobile-menu{ align-items:flex-start; }
  .mobile-menu nav{ padding-top:110px; }

  .ncard, .stat{ border-radius:16px; }
  .numbers__grid{ gap:12px; }

  .about__mark{ width:calc(100% + 2*var(--pad)); max-width:none; margin-left:calc(-1 * var(--pad)); }
  .channel{ min-height:62svh; }
  .channel__tags{ right:var(--pad); left:var(--pad); justify-content:flex-end; }

  .site-footer__brand{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    margin-bottom:30px;
  }
  .site-footer__brand img{ width:64px; }
  .site-footer__brand span{ font-weight:500; letter-spacing:.06em; text-transform:uppercase; font-size:13px; }
  .site-footer__nav{ flex-direction:column; gap:14px; align-items:center; }
  .site-footer__base{ flex-direction:column; align-items:center; text-align:center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero .reveal{ animation:none; }
  .numbers__grid .ncard.reveal{ transform:none; }
  .liftable, .send-btn, .nav__link, .mobile-menu, .mobile-menu a, .stat__arrow, .roku-badge{ transition:none; }
  .liftable:hover, .liftable.tap-top:active, .liftable.tap-bottom:active{ transform:none; }
}