/* =========================================================
   Alessandro Valdez — Paid Media Portfolio
   Strict B&W editorial. GSAP-driven scroll experience.
   ========================================================= */

:root{
  --bg: #ffffff;
  --bg-inv: #0a0a0a;
  --fg: #0a0a0a;
  --fg-inv: #ffffff;
  --muted: #6b6b6b;
  --line: #e7e7e7;
  --line-inv: rgba(255,255,255,.18);
  --accent: #0a0a0a;
  --max: 1440px;
  --pad: clamp(20px, 4vw, 64px);
  --radius: 0px;
  --ease: cubic-bezier(.6,.05,.05,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:0; background:transparent; color:inherit }
ol,ul{ list-style:none; margin:0; padding:0 }
em{ font-family:var(--serif); font-style:italic; font-weight:400 }

/* Selection */
::selection{ background:#0a0a0a; color:#fff }

/* =========================================================
   Reveal — defensive: never let text stay invisible
   ========================================================= */
.reveal{ will-change:transform,opacity }
.reveal[data-split]{ opacity:1; transform:none } /* safety net for split-text */
.is-ready .reveal[data-split]{ opacity:1 } /* JS may override */

/* =========================================================
   SPLASH
   ========================================================= */
#splash{
  position:fixed; inset:0; z-index:9999;
  background:#0a0a0a; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:30px;
  animation: splashOut 1.6s 1.8s var(--ease) forwards;
}
.splash__logo{
  font-family:var(--sans);
  font-weight:900;
  font-size:clamp(80px, 14vw, 180px);
  letter-spacing:-0.06em;
  line-height:1;
  display:flex; gap:.04em;
}
.splash__a, .splash__v{ display:inline-block; opacity:0; transform:translateY(40px); animation: splashIn .9s var(--ease) forwards }
.splash__v{ animation-delay:.18s }
.splash__bar{
  width:160px; height:1px; background:rgba(255,255,255,.15); overflow:hidden;
}
.splash__bar > span{
  display:block; height:100%; background:#fff; width:0;
  animation: splashBar 1.6s .3s var(--ease) forwards;
}
@keyframes splashIn{ to{ opacity:1; transform:translateY(0) } }
@keyframes splashBar{ to{ width:100% } }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; pointer-events:none } }

/* =========================================================
   CUSTOM CURSOR (desktop only)
   ========================================================= */
.cursor{ position:fixed; top:0; left:0; pointer-events:none; z-index:9000; mix-blend-mode:difference; display:none }
.cursor__dot{ position:absolute; width:6px; height:6px; background:#fff; border-radius:50%; transform:translate(-50%,-50%) }
.cursor__ring{ position:absolute; width:36px; height:36px; border:1px solid #fff; border-radius:50%; transform:translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease) }
.cursor.is-hover .cursor__ring{ width:60px; height:60px; background:rgba(255,255,255,.1) }
@media (hover:hover) and (pointer:fine){
  .cursor{ display:block }
  body{ cursor:none }
  a,button,.cta,.svc,.card{ cursor:none }
}

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--pad);
  color:#fff;
  transition: background .35s var(--ease), color .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color:#0a0a0a;
  padding:12px var(--pad);
  border-bottom-color:var(--line);
}
.hdr__logo{ display:flex; align-items:center; gap:12px; font-family:var(--sans); font-weight:700; letter-spacing:.08em }
.hdr__monogram{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid currentColor; font-weight:900; font-size:14px; letter-spacing:-.04em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.hdr__monogram span:first-child{ margin-right:1px }
.hdr.is-stuck .hdr__monogram{ background:#0a0a0a; color:#fff; border-color:#0a0a0a }
.hdr__name{ font-size:11px; letter-spacing:.22em }

.hdr__nav{ display:flex; align-items:center; gap:10px }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px;
  font-family:var(--sans);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid currentColor;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:currentColor }
.btn:hover > *{ color:var(--bg) }
.btn--ghost{ color:inherit }
.btn--solid{ background:#fff; color:#0a0a0a; border-color:#fff }
.hdr.is-stuck .btn--solid{ background:#0a0a0a; color:#fff; border-color:#0a0a0a }
.hdr.is-stuck .btn--solid:hover{ background:transparent; color:#0a0a0a }

.menu-toggle{ position:relative; padding-right:46px }
.menu-toggle__bars{ position:absolute; right:18px; top:50%; transform:translateY(-50%); display:inline-block; width:18px; height:10px }
.menu-toggle__bars i{
  position:absolute; left:0; right:0; height:1.5px; background:currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.menu-toggle__bars i:nth-child(1){ top:2px }
.menu-toggle__bars i:nth-child(2){ top:8px }
.is-menu-open .menu-toggle__bars i:nth-child(1){ top:5px; transform:rotate(45deg) }
.is-menu-open .menu-toggle__bars i:nth-child(2){ top:5px; transform:rotate(-45deg) }

@media (max-width: 920px){
  .hdr__name{ display:none }
  .hdr__cta:nth-child(1), .hdr__cta:nth-child(2){ display:none }
}
@media (max-width: 640px){
  .hdr__cta{ display:none }
  .menu-toggle{ padding:11px 16px 11px 16px }
  .menu-toggle__label{ font-size:11px }
}

/* =========================================================
   MENU PANEL (fullscreen drawer)
   ========================================================= */
.menu{
  position:fixed; inset:0; z-index:190;
  background:#0a0a0a; color:#fff;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path .8s var(--ease);
  pointer-events:none;
  display:flex; align-items:center;
  padding: 120px var(--pad) 60px;
}
.is-menu-open .menu{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  pointer-events:auto;
}
.menu__inner{ width:100%; max-width:var(--max); margin:0 auto; display:flex; flex-direction:column; justify-content:space-between; height:100%; gap:40px }
.menu__list{ display:flex; flex-direction:column; gap:6px; flex:1 }
.menu__list li{
  border-top:1px solid var(--line-inv);
  overflow:hidden;
}
.menu__list li:last-child{ border-bottom:1px solid var(--line-inv) }
.menu__list a{
  display:flex; align-items:baseline; gap:24px;
  padding: clamp(18px, 3vw, 38px) 0;
  font-family:var(--sans); font-weight:800; letter-spacing:-.04em;
  font-size: clamp(48px, 9vw, 130px); line-height:1;
  transition: transform .5s var(--ease), opacity .3s;
  transform: translateY(80%); opacity:0;
}
.is-menu-open .menu__list a{ transform:translateY(0); opacity:1 }
.is-menu-open .menu__list li:nth-child(1) a{ transition-delay:.25s }
.is-menu-open .menu__list li:nth-child(2) a{ transition-delay:.32s }
.is-menu-open .menu__list li:nth-child(3) a{ transition-delay:.39s }
.menu__list a:hover{ font-style:italic; font-family:var(--serif); font-weight:400 }
.menu__num{ font-size:13px; letter-spacing:.2em; color:var(--muted); font-family:var(--sans); font-weight:500 }
.menu__txt{ display:inline-block }

.menu__foot{
  display:grid; grid-template-columns: 1fr 1fr; gap:30px;
  padding-top:30px; border-top:1px solid var(--line-inv);
}
.menu__label{ display:block; font-size:11px; letter-spacing:.2em; color:#999; text-transform:uppercase; margin-bottom:8px }
.menu__big{ font-family:var(--sans); font-weight:600; font-size:clamp(18px, 2vw, 24px) }
@media (max-width:640px){
  .menu{ padding-top:90px }
  .menu__foot{ grid-template-columns:1fr; gap:20px }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height: 100vh;
  min-height: 100svh;
  display:flex; align-items:flex-end;
  padding: 140px var(--pad) clamp(40px, 6vw, 80px);
  color:#fff;
  overflow:hidden;
  background:#0a0a0a;
}
.hero__media{
  position:absolute; inset: -10% 0 -10% 0; z-index:0;
  will-change:transform;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  filter: grayscale(100%) contrast(1.05);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.25) 40%, rgba(10,10,10,.85) 100%),
    radial-gradient(60% 80% at 20% 20%, rgba(0,0,0,.0) 0%, rgba(0,0,0,.6) 100%);
}
.hero__grid{
  position:relative; z-index:2;
  width:100%; max-width:var(--max); margin:0 auto;
  display:grid; gap: clamp(18px, 3vw, 36px);
}
.hero__kicker{
  font-family:var(--sans);
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.hero__title{
  font-family:var(--sans);
  font-weight:800;
  font-size: clamp(42px, 8.6vw, 140px);
  line-height: .94;
  letter-spacing: -0.045em;
  margin:0;
  max-width: 18ch;
}
.hero__title span{ display:block; overflow:hidden }
.hero__lede{
  font-family:var(--body);
  font-size: clamp(15px, 1.25vw, 19px);
  max-width: 52ch;
  color: rgba(255,255,255,.78);
  line-height:1.55;
}

.hero__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:8px }
.cta{
  display:inline-flex; align-items:center; gap:14px;
  background:#fff; color:#0a0a0a;
  padding: 18px 28px;
  font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid #fff;
  position:relative; overflow:hidden;
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.cta::before{
  content:""; position:absolute; inset:0;
  background:#0a0a0a; transform: translateY(100%);
  transition: transform .5s var(--ease); z-index:0;
}
.cta:hover{ color:#fff; border-color:#0a0a0a }
.cta:hover::before{ transform: translateY(0) }
.cta > *{ position:relative; z-index:1 }
.cta svg{ transition: transform .4s var(--ease) }
.cta:hover svg{ transform: translateX(6px) }
.cta--inv{ background:#0a0a0a; color:#fff; border-color:#fff }
.cta--inv::before{ background:#fff }
.cta--inv:hover{ color:#0a0a0a }

.cta__sub{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.6) }

.hero__stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:clamp(16px, 3vw, 48px);
  margin-top: clamp(24px, 4vw, 56px);
  padding-top: clamp(20px, 3vw, 36px);
  border-top: 1px solid rgba(255,255,255,.18);
}
.stat{ display:flex; flex-direction:column; gap:8px }
.stat__num{
  font-family:var(--sans); font-weight:800;
  font-size: clamp(34px, 5.5vw, 78px); line-height:1; letter-spacing:-.04em;
  display:flex; align-items:baseline;
}
.stat__lbl{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.65); max-width:22ch; line-height:1.4 }
@media (max-width: 700px){
  .hero__stats{ grid-template-columns: 1fr; gap:18px }
  .stat__lbl{ max-width:none }
}

.hero__scroll{
  position:absolute; right:var(--pad); bottom:24px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--sans); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.7);
}
.hero__scroll i{ display:block; width:1px; height:50px; background:rgba(255,255,255,.5); position:relative; overflow:hidden }
.hero__scroll i::after{ content:""; position:absolute; top:-50%; left:0; right:0; height:50%; background:#fff; animation: scrollGo 1.8s var(--ease) infinite }
@keyframes scrollGo{ 0%{ top:-50% } 100%{ top:100% } }
@media (max-width:640px){ .hero__scroll{ display:none } }

/* =========================================================
   SECTION SHARED
   ========================================================= */
.eyebrow{
  font-family:var(--sans);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
  display:inline-block;
}
.eyebrow--inv{ color:rgba(255,255,255,.6) }
.h-display{
  font-family:var(--sans);
  font-weight:800;
  font-size: clamp(38px, 7vw, 120px);
  line-height:.96;
  letter-spacing:-0.045em;
  margin: 16px 0 0;
  max-width: 16ch;
}
.h-display--inv{ color:#fff }
.h-display em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em }

/* =========================================================
   SERVICES
   ========================================================= */
.services{ padding: clamp(80px, 12vw, 180px) var(--pad) clamp(60px, 8vw, 120px); background:#fff }
.services__head{ max-width:var(--max); margin:0 auto clamp(40px, 6vw, 80px) }
.svc-list{ max-width:var(--max); margin:0 auto; border-top:1px solid var(--line) }
.svc{
  position:relative;
  display:grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: clamp(16px, 3vw, 40px);
  align-items:center;
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom:1px solid var(--line);
  transition: padding .4s var(--ease), color .4s var(--ease);
}
.svc::before{
  content:""; position:absolute; inset:0; background:#0a0a0a;
  transform-origin:left center; transform: scaleX(0);
  transition: transform .55s var(--ease);
  z-index:0;
}
.svc > *{ position:relative; z-index:1 }
.svc:hover::before{ transform: scaleX(1) }
.svc:hover{ color:#fff; padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px) }
.svc__num{
  font-family:var(--sans); font-size:12px; letter-spacing:.2em; color:var(--muted); font-weight:500;
}
.svc:hover .svc__num{ color:rgba(255,255,255,.6) }
.svc__name{
  font-family:var(--sans); font-weight:700;
  font-size: clamp(26px, 4.5vw, 64px); line-height:1; letter-spacing:-.035em; margin:0;
}
.svc__desc{ font-size: clamp(14px, 1.1vw, 17px); color:var(--muted); max-width: 50ch; margin:0; line-height:1.5 }
.svc:hover .svc__desc{ color:rgba(255,255,255,.75) }

@media (max-width:780px){
  .svc{ grid-template-columns: 50px 1fr; }
  .svc__desc{ grid-column: 2 }
  .svc:hover{ padding-left:16px; padding-right:16px }
}

/* Platforms marquee */
.platforms{ max-width:var(--max); margin: clamp(60px,8vw,120px) auto 0; }
.platforms__lbl{ font-family:var(--sans); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom: 30px }
.marquee{ overflow:hidden; padding: 16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.marquee__track{
  display:flex; gap: clamp(24px, 4vw, 56px);
  font-family:var(--sans); font-weight:800;
  font-size: clamp(40px, 8vw, 110px); line-height:1; letter-spacing:-.04em;
  white-space:nowrap;
  animation: marquee 38s linear infinite;
}
.marquee__track span:nth-child(even){ -webkit-text-stroke:1px #0a0a0a; color:transparent }
@keyframes marquee{ to{ transform: translateX(-33.333%) } }

/* =========================================================
   METHOD (dark section)
   ========================================================= */
.method{ background:#0a0a0a; color:#fff; padding: clamp(80px, 12vw, 180px) var(--pad); position:relative; overflow:hidden }
.method__head{ max-width:var(--max); margin:0 auto clamp(40px, 6vw, 90px) }
.method__lede{ max-width:60ch; color: rgba(255,255,255,.7); margin-top: 22px; font-size: clamp(15px, 1.2vw, 18px) }

.steps{ max-width:var(--max); margin:0 auto; display:flex; flex-direction:column }
.step{
  display:grid; grid-template-columns: 140px 1fr; gap: clamp(20px, 4vw, 60px);
  padding: clamp(28px, 4vw, 56px) 0;
  border-top:1px solid var(--line-inv);
  align-items:start;
  transition: padding .35s var(--ease);
}
.step:last-child{ border-bottom:1px solid var(--line-inv) }
.step__num{
  font-family:var(--sans); font-weight:800;
  font-size: clamp(42px, 6vw, 96px); line-height:1; letter-spacing:-.04em;
  -webkit-text-stroke:1px #fff; color:transparent;
  transition: color .35s var(--ease), -webkit-text-stroke .35s var(--ease);
}
.step:hover .step__num{ color:#fff; -webkit-text-stroke:1px transparent }
.step__body{ padding-top: 6px }
.step__name{
  font-family:var(--sans); font-weight:700;
  font-size: clamp(24px, 3vw, 44px); line-height:1.05; letter-spacing:-.03em; margin:0 0 10px;
}
.step__body p{ color: rgba(255,255,255,.7); font-size: clamp(14px, 1.05vw, 17px); max-width:55ch; margin:0; line-height:1.55 }

@media (max-width:780px){
  .step{ grid-template-columns: 70px 1fr }
  .step__num{ font-size: 48px }
}

/* =========================================================
   RESULTS
   ========================================================= */
.results{ padding: clamp(80px, 12vw, 180px) var(--pad); background:#fff }
.results__head{ max-width:var(--max); margin:0 auto clamp(40px,6vw,80px) }
.results__lede{ max-width:60ch; color:var(--muted); margin-top:22px; font-size: clamp(15px,1.2vw,18px) }

.grid-results{
  max-width:var(--max); margin:0 auto;
  display:grid; gap: 0;
  grid-template-columns: repeat(3, 1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.card{
  position:relative;
  padding: clamp(28px, 3.6vw, 50px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px; min-height: 260px;
  transition: background .4s var(--ease), color .4s var(--ease);
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:0; background:#0a0a0a; z-index:0;
  transform-origin: bottom; transform: scaleY(0); transition: transform .5s var(--ease);
}
.card > *{ position:relative; z-index:1 }
.card:hover::after{ transform: scaleY(1) }
.card:hover{ color:#fff }
.card__tag{ font-family:var(--sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted) }
.card:hover .card__tag{ color:rgba(255,255,255,.65) }
.card__metric{
  font-family:var(--sans); font-weight:800;
  font-size: clamp(42px, 5vw, 82px); line-height:1; letter-spacing:-.04em;
  margin-top:auto;
  display:inline-flex; align-items:baseline; gap:6px;
}
.card__metric small{ font-size: clamp(11px, .9vw, 14px); letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--muted) }
.card:hover .card__metric small{ color:rgba(255,255,255,.6) }
.card__name{ font-size:14px; margin:0; color:var(--muted); line-height:1.45 }
.card:hover .card__name{ color:rgba(255,255,255,.75) }
.card--cta .card__metric{ font-family:var(--serif); font-style:italic; font-weight:400 }
.card__link{ margin-top:8px; font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; border-bottom:1px solid currentColor; display:inline-block; padding-bottom:3px; width:fit-content }

@media (max-width:980px){ .grid-results{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width:600px){ .grid-results{ grid-template-columns: 1fr } }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ background:#0a0a0a; color:#fff; padding: clamp(80px,12vw,180px) var(--pad) }
.about__inner{ max-width:var(--max); margin:0 auto; display:flex; flex-direction:column; gap:30px; align-items:flex-start }
.about__h{
  font-family:var(--sans); font-weight:800;
  font-size: clamp(34px, 6.5vw, 110px); line-height:.98; letter-spacing:-.04em; margin:10px 0 0;
  max-width: 16ch;
}
.about__h em{ font-family:var(--serif); font-style:italic; font-weight:400 }
.about__p{ font-size: clamp(15px, 1.25vw, 19px); max-width:60ch; color:rgba(255,255,255,.75); line-height:1.6 }
.about__cta{ margin-top:18px }

/* =========================================================
   FOOTER
   ========================================================= */
.ft{ background:#0a0a0a; color:#fff; padding: clamp(60px,9vw,140px) var(--pad) 40px; border-top:1px solid var(--line-inv) }
.ft__big{
  font-family:var(--sans); font-weight:800;
  font-size: clamp(80px, 18vw, 260px);
  line-height:.9; letter-spacing:-.06em;
  margin-bottom: clamp(40px,6vw,90px);
  max-width:var(--max); margin-left:auto; margin-right:auto;
}
.ft__big em{ font-family:var(--serif); font-style:italic; font-weight:400 }
.ft__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  padding-bottom: 40px; border-bottom:1px solid var(--line-inv);
}
.ft__label{ display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#999; margin-bottom:10px }
.ft__val{ font-family:var(--sans); font-weight:600; font-size: clamp(16px, 1.5vw, 22px); line-height:1.3 }
a.ft__val{ transition: color .3s }
a.ft__val:hover{ color:#999 }
.ft__bottom{
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:space-between; padding-top:30px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#888;
  gap:20px; flex-wrap:wrap;
}
@media (max-width:780px){
  .ft__grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width:480px){
  .ft__grid{ grid-template-columns: 1fr }
}

/* =========================================================
   SOCIAL PAGE (used in social.html)
   ========================================================= */
.sp{
  min-height:100vh; min-height:100svh;
  background:#0a0a0a; color:#fff;
  display:flex; flex-direction:column;
  padding: 140px var(--pad) 60px;
}
.sp__head{ max-width:var(--max); margin:0 auto; width:100% }
.sp__back{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#999; display:inline-flex; align-items:center; gap:6px; margin-bottom: 60px }
.sp__back:hover{ color:#fff }
.sp__h{
  font-family:var(--sans); font-weight:800;
  font-size: clamp(44px, 9vw, 150px); line-height:.95; letter-spacing:-.045em; margin:0 0 14px;
  max-width: 14ch;
}
.sp__h em{ font-family:var(--serif); font-style:italic; font-weight:400 }
.sp__lede{ font-size: clamp(15px,1.2vw,18px); color:rgba(255,255,255,.7); max-width: 55ch; margin: 0 0 60px }

.sp__list{ max-width:var(--max); margin:auto auto 0; width:100%; border-top:1px solid var(--line-inv) }
.sp__item{
  display:grid; grid-template-columns: 60px 1fr auto; gap:30px; align-items:center;
  padding: clamp(22px,3vw,38px) 0;
  border-bottom:1px solid var(--line-inv);
  transition: padding .35s var(--ease);
  font-family:var(--sans); font-weight:800;
  font-size: clamp(34px, 6.5vw, 90px); line-height:1; letter-spacing:-.04em;
  position:relative; overflow:hidden;
}
.sp__item::before{ content:""; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; transition: transform .55s var(--ease); z-index:0 }
.sp__item:hover::before{ transform: scaleX(1) }
.sp__item:hover{ color:#0a0a0a; padding-left: 30px; padding-right:30px }
.sp__item > *{ position:relative; z-index:1 }
.sp__num{ font-size:13px; letter-spacing:.2em; color:#888; font-weight:500 }
.sp__item:hover .sp__num{ color:#0a0a0a }
.sp__name{}
.sp__handle{ font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#888 }
.sp__item:hover .sp__handle{ color:#0a0a0a }

.sp__foot{
  max-width:var(--max); margin:60px auto 0; width:100%;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#888;
}
@media (max-width:680px){
  .sp__item{ grid-template-columns: 40px 1fr; gap:18px }
  .sp__handle{ grid-column: 2; font-size:11px }
}

/* =========================================================
   REDUCED MOTION (intentionally narrow — only kill big effects)
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation-duration: 120s }
  #splash{ animation-duration: .5s; animation-delay:.3s }
  .splash__a, .splash__v, .splash__bar > span{ animation-duration: .4s }
}