@import url("../fonts/fonts.css");

/* =========================================================================
   S. H. Jucha — core stylesheet
   Roboto: navigation and headings. Inter: body.
   Light page, dark hero and dark bands. Hairlines instead of card shadows.
   ========================================================================= */

:root{
  --ink:#0b0d10;
  --ink-2:#1a1f26;
  --body:#3d444d;
  --muted:#6d757f;
  --line:#e3e6ea;
  --line-dark:rgba(255,255,255,.13);
  --paper:#ffffff;
  --paper-2:#f6f7f9;

  --beam:#5f7fff;
  --beam-soft:#96afff;
  --violet:#8a77e5;

  --sans:'Roboto',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --text:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,48px);
  --nav-h:68px;

  /* lifted from Cloud Nine Labs, --hero-shadow */
  --hero-shadow:2px 3.5px 4px rgba(0,0,0,.85);

  --btn-face:#e7e9ee;
  --btn-text:#101a3a;
  --btn-hot:#7fb2ff;
  --btn-deep:#1035b0;
  --btn-mid:#7fb2ff;
  --btn-soft:170,200,255;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--text);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

h1,h2,h3,h4,h5{
  font-family:var(--sans);color:var(--ink);
  margin:0;line-height:1.06;letter-spacing:-.022em;font-weight:700;
}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.012em;line-height:1.2}
p{margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:400;background:#fff;color:#000;padding:10px 16px}
.skip:focus{left:8px;top:8px}

/* eyebrow label used above every section heading */
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.dark .eyebrow{color:rgba(255,255,255,.44)}
.dark .eyebrow::after{background:var(--line-dark)}

/* =========================================================================
   HEADER + MEGA MENU
   ========================================================================= */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .28s ease,border-color .28s ease,backdrop-filter .28s ease;
  border-bottom:1px solid transparent;
}
.hdr .wrap{display:flex;align-items:center;gap:28px;width:100%}
/* Frosted glass rather than a solid fill. 70% white is opaque enough that the
   dark nav text still clears AA when the header passes over the black saga
   band and the footer, and light enough to read as glass over white. */
.hdr.solid,.hdr.open{
  background:rgba(255,255,255,.70);
  border-bottom-color:rgba(190,196,204,.5);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 30px -22px rgba(11,13,16,.5);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr.solid,.hdr.open{background:rgba(255,255,255,.96)}
}

.logo{
  font-family:var(--sans);font-weight:900;font-size:16px;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;
  white-space:nowrap;transition:color .28s ease;
}
.logo .dot{color:var(--beam-soft)}
.hdr.solid .logo,.hdr.open .logo{color:var(--ink)}
.hdr.solid .logo .dot,.hdr.open .logo .dot{color:var(--beam)}

.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav > li{list-style:none;position:relative}
.nav a,.nav button.top{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.76);padding:10px 15px;border-radius:2px;
  transition:color .2s ease,background .2s ease;
}
.hdr.solid .nav a,.hdr.solid .nav button.top,
.hdr.open .nav a,.hdr.open .nav button.top{color:var(--body)}
.nav a:hover,.nav button.top:hover,.nav [aria-expanded="true"]{color:#fff}
.hdr.solid .nav a:hover,.hdr.open .nav a:hover,
.hdr.solid .nav button.top:hover,.hdr.open .nav button.top:hover,
.hdr.solid .nav [aria-expanded="true"],.hdr.open .nav [aria-expanded="true"]{color:var(--ink)}
.caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .22s ease}
[aria-expanded="true"] .caret{transform:rotate(225deg) translateY(-2px)}

/* mega panel */
.mega{
  position:fixed;left:0;right:0;top:var(--nav-h);z-index:118;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 24px 48px -32px rgba(11,13,16,.35);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.mega.show{opacity:1;visibility:visible;transform:none}
.mega .wrap{display:grid;grid-template-columns:290px 1fr;gap:clamp(28px,4vw,56px);
  padding-block:38px 42px;align-items:start}
.mega-lead h3{font-size:22px;margin-bottom:10px}
.mega-lead p{font-size:14.5px;line-height:1.62;color:var(--muted);margin-bottom:20px}
.mega-lead .stack{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
/* Silver Ships (20) and Gate Ghosts (14) run two sub-columns, so they get more room */
.mega-grid{display:grid;grid-template-columns:1.55fr .85fr 1.4fr .95fr;gap:clamp(18px,2.2vw,30px)}
.mega-col > a.ser{
  display:block;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--ink);
  letter-spacing:-.005em;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--line);
}
.mega-col > a.ser span{display:block;font-weight:400;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:4px}
.mega-col ul{list-style:none;margin:0;padding:0;columns:1}
.mega-col.wide ul{columns:2;column-gap:22px}
.mega-col li{break-inside:avoid}
.mega-col li a{
  display:flex;gap:8px;font-size:13.5px;line-height:1.32;color:var(--body);
  padding:5px 0;transition:color .16s ease,transform .16s ease;
}
.mega-col li a:hover{color:var(--beam);transform:translateX(2px)}
.mega-col li a i{font-style:normal;color:var(--muted);font-size:11.5px;line-height:1.5;
  font-variant-numeric:tabular-nums;flex:0 0 16px}
.mega-col li a b{font-weight:400;hyphens:none;text-wrap:balance}

.burger{display:none;margin-left:auto;width:40px;height:40px;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;position:relative;color:#fff}
.hdr.solid .burger span,.hdr.open .burger span{color:var(--ink)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* =========================================================================
   BUTTONS  (hero glow button, adapted to the beam palette)
   ========================================================================= */
.btnwrap{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.glow{position:absolute;left:50%;top:50%;height:calc(100% + 9px);width:calc(100% + 9px);
  transform:translate(-50%,-50%);border-radius:999px;border:3px solid transparent;
  will-change:transform;transition:opacity .3s ease;pointer-events:none}
.glow.mirror{transform:translate(-50%,-50%) scaleX(-1);opacity:0}
.btnwrap:hover .glow{opacity:0}
.btnwrap:hover .glow.mirror{opacity:1}
.glow::before,.glow::after{content:"";position:absolute;box-sizing:content-box;height:100%;width:100%;
  border-radius:999px;border-color:transparent}
.glow::after{left:-3px;top:-3px;z-index:20;border-width:3px;filter:blur(15px);
  background:linear-gradient(transparent,transparent) padding-box,
    linear-gradient(91.88deg,rgba(var(--btn-soft),.2) 46.45%,var(--btn-deep) 98.59%) border-box}
.glow::before{left:-2px;top:-2px;z-index:10;border-width:2px;filter:blur(2px);
  background:linear-gradient(transparent,transparent) padding-box,
    linear-gradient(97.68deg,rgba(var(--btn-soft),0) 38.1%,rgba(var(--btn-soft),.2) 82.47%,var(--btn-hot) 93.3%) border-box}
.ring{position:relative;height:100%;width:100%;border-radius:999px;border:1px solid transparent;
  background:linear-gradient(transparent,transparent) padding-box,
    linear-gradient(103.7deg,rgba(143,155,188,.1) 38.66%,rgba(99,132,233,.1) 68.55%,var(--btn-mid) 85.01%,#fff 92.12%) border-box}
.ring::before{content:"";position:absolute;left:-2px;top:-2px;z-index:30;box-sizing:content-box;
  height:100%;width:100%;border-radius:999px;border:2px solid transparent;filter:blur(7px);
  background:linear-gradient(transparent,transparent) padding-box,
    linear-gradient(91.96deg,rgba(var(--btn-soft),0) 6.11%,rgba(var(--btn-soft),.2) 53.57%,var(--btn-hot) 93.6%) border-box}
/* Metrics restored to the Huly original: 40px tall, 56px side padding,
   12px 800 weight, negative tracking. Do not "round these up". */
.btn{
  position:relative;z-index:10;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 56px;border-radius:999px;border:1px solid rgba(255,255,255,.6);
  background:var(--btn-face);color:var(--btn-text);overflow:hidden;
  font-family:var(--sans);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;
  white-space:nowrap;
}
.btn span,.btn svg{position:relative;z-index:2;color:var(--btn-text)}
.btn svg{width:16px;height:9px;flex:0 0 auto}
.btn > span:not(.spark){flex:0 0 auto}
.spark{position:absolute;z-index:-1;display:flex;width:204px;align-items:center;justify-content:center;
  transform:translateX(0) translateZ(0);transition:transform .18s ease-out;animation:idlesweep 5.5s ease-in-out infinite}
.btnwrap:hover .spark{animation:none;transition:transform .09s linear}
.spark i{position:absolute;top:50%;display:block}
.spark .s1{height:121px;width:121px;transform:translateY(-50%);
  background:radial-gradient(50% 50% at 50% 50%,#F5FAFF 3.5%,#81B4FF 26.5%,#9FD4FF 37.5%,rgba(129,180,255,.5) 49%,rgba(58,110,210,0) 92.5%)}
.spark .s2{height:103px;width:204px;transform:translateY(-50%);filter:blur(5px);
  background:radial-gradient(43.3% 44.23% at 50% 49.51%,#F7FBFF 29%,#CDF0FF 48.5%,#BFD6F4 60.71%,rgba(210,211,214,0) 100%)}
@keyframes idlesweep{0%,100%{transform:translateX(-46px) translateZ(0)}50%{transform:translateX(46px) translateZ(0)}}

/* ghost button, used beside the glow button and on light sections */
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 26px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.9);
  font-family:var(--sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  transition:border-color .22s ease,color .22s ease,background .22s ease;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.05)}
.on-light .btn-ghost,.btn-ghost.light{border-color:var(--line);color:var(--ink)}
.on-light .btn-ghost:hover,.btn-ghost.light:hover{border-color:#b9bfc7;background:var(--paper-2)}

/* quiet inline link with a moving underline */
.lnk{
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;
  border-bottom:1px solid var(--line);transition:border-color .22s ease,gap .22s ease;
}
.lnk:hover{border-color:var(--beam);gap:13px}
.lnk svg{width:15px;height:9px;flex:0 0 auto}
.dark .lnk{color:#fff;border-bottom-color:rgba(255,255,255,.28)}
.dark .lnk:hover{border-bottom-color:var(--beam-soft)}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;min-height:clamp(620px,92vh,940px);display:flex;align-items:center;
  background:var(--ink);overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero .grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .floor{position:absolute;left:0;bottom:0;width:100%;height:30%;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,13,16,0),var(--ink) 74%)}
.hero .content{position:relative;z-index:6;width:100%;padding-top:var(--nav-h)}
/* The gradient fill is clipped to the glyphs, and text-shadow paints behind
   them, so the drop shadow still reads. It is what keeps the copy legible
   where the beam blows out behind it. */
.hero h1{
  font-size:clamp(38px,6.4vw,80px);line-height:.95;letter-spacing:-.035em;font-weight:900;
  max-width:15ch;
  /* keep the fill close to white. A mid-grey gradient under a hard drop shadow
     reads as a bevel, not as depth. */
  background:linear-gradient(to bottom right,#fff 46%,#eaeefc 88%,#fdfbff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:var(--hero-shadow);
}
.hero .kicker{
  display:inline-block;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 15px;margin-bottom:26px;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  background:rgba(11,13,16,.18);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.hero .sub{margin-top:24px;max-width:50ch;font-size:17.5px;line-height:1.6;
  color:rgba(255,255,255,.82);text-shadow:2px 3px 5px rgba(0,0,0,.75)}
.hero .cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .meta{margin-top:44px;display:flex;flex-wrap:wrap;gap:0 34px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.58);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.hero .meta b{color:rgba(255,255,255,.92);font-weight:500}
.hero .btn-ghost{text-shadow:0 1px 3px rgba(0,0,0,.45);
  box-shadow:2px 3.5px 6px rgba(0,0,0,.38);background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.glfail{position:absolute;inset:0;z-index:1;display:none;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%,#1b2545 0%,#0b0d10 62%)}

/* =========================================================================
   COVER MARQUEE
   ========================================================================= */
.strand{background:var(--paper);padding:46px 0 50px;border-bottom:1px solid var(--line)}
.strand-label{
  text-align:center;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:32px;
}
.strand-label b{color:var(--ink);font-weight:700}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;align-items:flex-end;gap:26px;width:max-content;
  animation:marquee 78s linear infinite;will-change:transform}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-track a{flex:0 0 auto;display:block;position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.marquee-track img{height:132px;width:auto;border:1px solid var(--line);
  box-shadow:0 2px 10px -4px rgba(11,13,16,.28);transition:box-shadow .3s ease}
.marquee-track a:hover{transform:translateY(-6px)}
.marquee-track a:hover img{box-shadow:0 14px 26px -14px rgba(11,13,16,.5)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================================
   TESTIMONIALS (horizontal slider)
   ========================================================================= */
.voices{background:var(--paper-2);padding:clamp(64px,8vw,104px) 0;border-bottom:1px solid var(--line)}
.voices-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;
  margin-bottom:38px}
.voices-head h2{max-width:22ch;font-size:clamp(26px,3vw,38px)}
/* Three-column vertical wall, ported from the Cloud Nine Labs testimonial
   marquee: columns scroll up at different speeds behind a top and bottom mask. */
.tst-marquee{
  width:min(var(--wrap),92vw);margin:14px auto 0;height:clamp(400px,52vh,520px);
  overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
.tst-col{overflow:hidden}
.tst-track{display:flex;flex-direction:column;gap:22px;will-change:transform;
  animation:tstUp var(--dur,46s) linear infinite}
.tst-col:nth-child(1) .tst-track{--dur:52s}
.tst-col:nth-child(2) .tst-track{--dur:42s}
.tst-col:nth-child(3) .tst-track{--dur:60s}
.tst-marquee:hover .tst-track,.tst-marquee:focus-within .tst-track{animation-play-state:paused}
.tst-wcard{background:var(--paper);border:1px solid var(--line);padding:26px 26px 24px;
  box-shadow:0 1px 2px rgba(11,13,16,.05)}
.tst-wcard .stars{display:flex;gap:3px;margin-bottom:14px}
.tst-wcard .stars svg{width:14px;height:14px;fill:var(--beam)}
.tst-wcard blockquote{margin:0 0 16px;font-size:15px;line-height:1.72;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.tst-wcard figcaption{font-family:var(--sans);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tst-wcard figcaption b{display:block;color:var(--ink);font-weight:700;letter-spacing:.1em;margin-bottom:3px}
@keyframes tstUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.vnote{margin-top:26px;font-size:13px;color:var(--muted)}

/* =========================================================================
   SAGA + SERIES  (dark band)
   ========================================================================= */
.saga{background:var(--ink);color:rgba(255,255,255,.7);padding:clamp(72px,9vw,120px) 0;position:relative;overflow:hidden}
.saga::before{content:"";position:absolute;left:50%;top:0;width:1px;height:190px;translate:-50% 0;
  background:linear-gradient(to bottom,rgba(95,127,255,.9),rgba(95,127,255,0));pointer-events:none}
.saga h2,.saga h3{color:#fff}
.saga-head{max-width:74ch;margin-inline:0;margin-bottom:clamp(44px,5vw,66px)}
.saga-head h2{margin-bottom:18px}
.saga-head p{font-size:17px;line-height:1.68;color:rgba(255,255,255,.62)}
.saga-head .stack{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.series{border-top:1px solid var(--line-dark);padding:clamp(34px,4vw,48px) 0}
.series:last-of-type{border-bottom:1px solid var(--line-dark)}
.series-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(26px,4vw,56px);align-items:start}
.series-meta .n{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--beam-soft);margin-bottom:12px;display:block}
.series-meta h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px;letter-spacing:-.02em}
.series-meta p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.55);margin-bottom:20px}
.rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.rail::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.bk{flex:0 0 auto;width:118px;scroll-snap-align:start;display:block}
.bk img{width:118px;height:auto;border:1px solid rgba(255,255,255,.14);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease}
.bk:hover img{transform:translateY(-5px);border-color:rgba(150,175,255,.55)}
.bk .t{display:block;margin-top:11px;font-family:var(--sans);font-size:12.5px;font-weight:500;
  line-height:1.3;color:rgba(255,255,255,.82);transition:color .2s ease;text-wrap:balance}
.bk .i{display:block;font-size:11px;color:rgba(255,255,255,.38);
  font-variant-numeric:tabular-nums;margin-top:3px}
.bk:hover .t{color:#fff}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{position:relative;background:#0c1014;border-top:1px solid var(--line-dark);color:#9aa3ad}
.foot-inner{max-width:var(--wrap);margin:0 auto;padding:66px var(--gut) 34px}
.f-top{display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:40px}
.f-brand{max-width:360px}
.f-name{font-family:var(--sans);font-weight:900;font-size:14px;color:#fff;letter-spacing:.2em;text-transform:uppercase}
.f-name .dot{color:var(--beam-soft)}
.f-brand p{font-size:14px;line-height:1.75;margin-top:16px;color:#9aa3ad}
.f-cols{display:flex;gap:clamp(34px,5vw,64px);flex-wrap:wrap}
.f-col h4{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#7a828d;margin-bottom:15px}
.f-col a{font-family:var(--sans);display:block;color:#c3cad2;font-size:13.5px;padding:6px 0;
  letter-spacing:.05em;transition:color .2s}
.f-col a:hover{color:var(--beam-soft)}
.f-bot{font-family:var(--sans);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:22px;color:#7a828d;font-size:12.5px;letter-spacing:.04em}
.f-bot a{transition:color .2s}
.f-bot a:hover{color:var(--beam-soft)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .mega .wrap{grid-template-columns:1fr}
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .series-grid{grid-template-columns:1fr}
  .tst-marquee{grid-template-columns:repeat(2,1fr)}
  .tst-col:nth-child(3){display:none}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .hdr .wrap{gap:12px}
  .mega{top:var(--nav-h);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .mega.show{transform:none}
  .nav.mob{
    display:flex;position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);padding:14px var(--gut) 24px;gap:0;
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;z-index:119;
  }
  .nav.mob > li{border-bottom:1px solid var(--line)}
  .nav.mob a,.nav.mob button.top{color:var(--ink);width:100%;padding:15px 0;font-size:14px;justify-content:space-between}
  .mega-grid{grid-template-columns:1fr}
  .mega-col.wide ul{columns:2}
  .tst-marquee{grid-template-columns:1fr;height:400px}
  .tst-col:nth-child(2){display:none}
}
@media (max-width:640px){
  .marquee-track img{height:104px}
  .hero .meta{gap:0 20px;font-size:10.5px}
  .voices-head{align-items:flex-start}
  .mega-col.wide ul{columns:1}
  /* keep the beam from washing out the copy on a narrow screen */
  .hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
    background:linear-gradient(100deg,rgba(11,13,16,.82) 0%,rgba(11,13,16,.55) 46%,rgba(11,13,16,0) 78%)}
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .btnwrap{width:100%}
  .hero .cta .btn{width:100%;padding:0 18px}
  .hero .cta .btn-ghost{justify-content:center}
}
@media (max-width:640px){
  .tst-marquee{height:360px}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track,.tst-track,.spark{animation:none !important}
  .marquee-track{transform:none}
  .tst-marquee{height:auto;max-height:560px;overflow-y:auto;
    -webkit-mask-image:none;mask-image:none}
  .bk:hover img,.marquee-track a:hover{transform:none}
}