/* ============================================================
   2H — CHRISTOPHER SLOAN · multi-page premium athlete brand
   Dark, cinematic, editorial. Big type. Rows, not cards.
   ============================================================ */
:root{
  --bg:#0b0d10;
  --surface:#12151a;
  --surface-2:#171b21;
  --accent:#d9482f;
  --accent-hot:#ff5a3c;
  --text:#eceef1;
  --dim:#a7aeb8;
  --mute:#767d88;
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.16);
  --maxw:1240px;
  --pad:clamp(1.25rem,3vw,2.75rem);
  --nav-h:76px;
  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --fs-giant:clamp(3.4rem,1.4rem + 10vw,9.5rem);
  --fs-title:clamp(2.6rem,1.2rem + 6.4vw,6.2rem);
  --fs-h2:clamp(1.9rem,1.2rem + 3vw,3.4rem);
  --fs-h3:clamp(1.15rem,1rem + .6vw,1.5rem);
  --fs-lead:clamp(1.08rem,1rem + .5vw,1.3rem);
  --fs-body:1.0625rem;
  --fs-sm:.9rem;
  --fs-xs:.72rem;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);background:var(--bg);color:var(--text);
  font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}
img,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{color:var(--dim)}
p+p{margin-top:1rem}
:focus-visible{outline:2px solid var(--accent-hot);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);width:100%}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em;color:#fff}
.lead{font-size:var(--fs-lead);color:var(--text);line-height:1.55}
.dim{color:var(--mute)}
.kicker{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-hot);
}
.kicker::before{content:"";width:30px;height:1px;background:var(--accent)}

/* ---------------- NAV ---------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .25s var(--ease),border-color .25s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{background:rgba(11,13,16,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--hair)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{display:flex;align-items:center;gap:.7rem;font-weight:700;letter-spacing:.02em;font-size:1rem;white-space:nowrap}
.logo .mark{
  font-family:var(--display);font-size:1.05rem;letter-spacing:.02em;
  background:var(--accent);color:#fff;padding:.28rem .5rem .2rem;line-height:1;
}
.nav-links{display:flex;align-items:center;gap:2rem}
.navlink{
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  padding:.4rem 0;position:relative;transition:color .2s;
}
.navlink:hover{color:#fff}
.navlink.is-active{color:#fff}
.navlink.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent-hot)}
.nav .btn{margin-left:.5rem}
.nav-toggle{display:none;background:none;border:0;color:#fff;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:26px;height:26px}
@media(max-width:900px){
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(11,13,16,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    padding:.4rem var(--pad) 1.4rem;border-bottom:1px solid var(--hair);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.22s var(--ease);
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .navlink{padding:1rem 0;border-bottom:1px solid var(--hair)}
  .navlink.is-active::after{display:none}
  .nav .btn{margin:1rem 0 0;width:100%}
  .nav-toggle{display:flex}
}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:700;font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;
  padding:1rem 1.7rem;border:1px solid transparent;cursor:pointer;transition:.2s var(--ease);
  line-height:1;white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hot);transform:translateY(-1px)}
.btn-ghost{border-color:var(--hair-2);color:#fff}
.btn-ghost:hover{border-color:#fff}
.arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hot);
}
.arrow::after{content:"→";transition:transform .2s var(--ease)}
.arrow:hover::after{transform:translateX(4px)}

/* ---------------- HERO (home) ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,16,.4) 0%,rgba(11,13,16,.25) 40%,rgba(11,13,16,.92) 100%)}
.hero-content{position:relative;z-index:2;padding-block:clamp(3rem,7vw,5.5rem)}
.hero-cred{font-size:var(--fs-sm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:1.2rem}
.hero-cred b{color:#fff}
.hero h1{font-size:var(--fs-giant);max-width:12ch}
.hero .sub{max-width:34rem;margin-top:1.4rem;font-size:var(--fs-lead);color:var(--text)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero-note{margin-top:1rem;font-size:var(--fs-sm);color:var(--mute)}

/* page hero (subpages) */
.page-head{padding:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem)) 0 clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--hair)}
.page-head h1{font-size:var(--fs-title);margin-top:.9rem}
.page-head .lead{max-width:44rem;margin-top:1.4rem}

/* ---------------- TICKER ---------------- */
.ticker{border-block:1px solid var(--hair);overflow:hidden;padding-block:1.05rem;background:var(--surface)}
.ticker-track{display:flex;gap:3.5rem;width:max-content;animation:tick 38s linear infinite}
.ticker span{font-size:var(--fs-sm);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:3.5rem}
.ticker span::after{content:"·";color:var(--accent-hot)}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;width:auto}}

/* ---------------- SECTIONS ---------------- */
.section{padding-block:clamp(4rem,8vw,7.5rem);position:relative}
.section+.section{border-top:1px solid var(--hair)}
.sec-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2.2rem,4vw,3.5rem)}
.sec-head h2{font-size:var(--fs-h2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* ---------------- ROWS (doors / pricing / guides) ---------------- */
.rows{border-top:1px solid var(--hair)}
.row{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,3rem);align-items:center;
  padding:clamp(1.6rem,3.5vw,2.6rem) 0;border-bottom:1px solid var(--hair);
  transition:background .2s;position:relative;
}
a.row:hover{background:rgba(255,255,255,.02)}
a.row:hover .row-title{color:var(--accent-hot)}
.row-num{font-family:var(--display);font-size:clamp(1rem,1.4vw,1.3rem);color:var(--mute);letter-spacing:.05em;min-width:3ch}
.row-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,1rem + 2.6vw,3rem);line-height:1;color:#fff;transition:color .2s}
.row-sub{margin-top:.55rem;max-width:46rem;font-size:var(--fs-sm);color:var(--mute)}
.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;text-align:right}
.price{font-family:var(--display);font-size:clamp(1.5rem,1rem + 2vw,2.4rem);color:#fff;line-height:1}
.price small{font-family:var(--body);font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:block;margin-top:.35rem}
.badge{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:.3rem .6rem;display:inline-block;margin-bottom:.6rem;
}
@media(max-width:700px){
  .row{grid-template-columns:1fr;gap:.9rem}
  .row-num{display:none}
  .row-side{align-items:flex-start;text-align:left}
}

/* expandable detail under a pricing row */
.row-details{border-bottom:1px solid var(--hair)}
.row-details summary{list-style:none;cursor:pointer}
.row-details summary::-webkit-details-marker{display:none}
.row-details .row{border-bottom:0}
.row-details summary .row-side .arrow::after{content:"+"}
.row-details[open] summary .row-side .arrow::after{content:"–"}
.row-body{padding:0 0 clamp(1.8rem,3vw,2.6rem);max-width:52rem}
.row-body ul{margin:1rem 0 0 1.1rem;color:var(--dim)}
.row-body li{margin-top:.5rem;padding-left:.3rem}
.row-body li::marker{color:var(--accent-hot)}
.row-body ol{margin:1rem 0 0 1.1rem;color:var(--dim)}
.row-body .label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-top:1.6rem}
.row-body .btn{margin-top:1.6rem}

/* ---------------- STEPS ---------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.step{background:var(--bg);padding:clamp(1.6rem,3vw,2.4rem)}
.step .num{font-family:var(--display);font-size:2.2rem;color:var(--accent-hot);display:block;line-height:1}
.step h3{font-size:var(--fs-h3);color:#fff;margin-top:1rem}
.step p{margin-top:.7rem;font-size:var(--fs-sm)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* ---------------- MEDIA / EMBED ---------------- */
.frame{border:1px solid var(--hair);background:#000}
.embed-video{aspect-ratio:16/9;background:#000;border:1px solid var(--hair)}
.embed-video iframe{width:100%;height:100%;border:0}

/* ---------------- GALLERY ---------------- */
.gallery{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--hair);border-block:1px solid var(--hair);scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.clip{
  position:relative;flex:0 0 clamp(240px,30vw,380px);aspect-ratio:9/14;background:#000;border:0;padding:0;cursor:pointer;
  scroll-snap-align:start;overflow:hidden;
}
.clip .poster{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip .tag{
  position:absolute;left:.9rem;bottom:.9rem;z-index:3;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(11,13,16,.7);padding:.35rem .6rem;
}
.clip .scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,13,16,.65));z-index:2;pointer-events:none}
.gallery-hint{margin-top:1rem;font-size:var(--fs-sm);color:var(--mute)}

/* ---------------- QUOTES ---------------- */
.quote{border-left:2px solid var(--accent);padding:.4rem 0 .4rem clamp(1.2rem,3vw,2rem);max-width:52rem}
.quote blockquote{font-size:clamp(1.2rem,1rem + 1.2vw,1.7rem);line-height:1.45;color:#fff;font-weight:500}
.quote cite{display:block;margin-top:1rem;font-style:normal;font-size:var(--fs-sm);color:var(--mute)}
.quote+.quote{margin-top:2.4rem}

/* ---------------- FAQ ---------------- */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.5rem 0;font-weight:600;font-size:var(--fs-h3);color:#fff;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--accent-hot);flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 1.6rem;max-width:48rem;color:var(--dim)}

/* ---------------- TABLE (video setup) ---------------- */
.vtable{border-top:1px solid var(--hair)}
.vrow{display:grid;grid-template-columns:220px 1fr;gap:clamp(1rem,3vw,3rem);padding:1.6rem 0;border-bottom:1px solid var(--hair)}
.vrow .vk{font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;padding-top:.25rem}
.vrow .vv p{font-size:var(--fs-sm)}
.vrow .vv p+p{margin-top:.6rem}
.vrow b{color:var(--text)}
@media(max-width:700px){.vrow{grid-template-columns:1fr;gap:.6rem}}

/* ---------------- CTA / CAPTURE ---------------- */
.cta{background:var(--surface);border-block:1px solid var(--hair)}
.cta .inner{padding-block:clamp(4rem,8vw,7rem);text-align:left}
.cta h2{font-size:var(--fs-h2)}
.cta .display{font-size:clamp(2.4rem,1.2rem + 5vw,5rem)}
.capture{display:flex;gap:.8rem;margin-top:1.8rem;max-width:520px;flex-wrap:wrap}
.capture input{
  flex:1;min-width:220px;background:var(--bg);border:1px solid var(--hair-2);color:var(--text);
  padding:1rem 1.1rem;font-size:var(--fs-sm);font-family:var(--body);
}
.capture input:focus{outline:2px solid var(--accent-hot);outline-offset:0;border-color:transparent}

/* ---------------- SPLIT IMAGE ---------------- */
.about-media{width:100%;height:auto;border:1px solid var(--hair)}
.band{margin:0}
.band img{width:100%;max-height:70vh;object-fit:cover;border-block:1px solid var(--hair)}
.band figcaption{font-size:var(--fs-sm);color:var(--mute);padding:1rem var(--pad);max-width:var(--maxw);margin-inline:auto}

/* reel */
.reel{position:relative;border:1px solid var(--hair);background:#000;aspect-ratio:16/9;overflow:hidden}
.reel video{width:100%;height:100%;object-fit:cover}
.reel-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.reel-cover .scrim{position:absolute;inset:0;background:rgba(11,13,16,.35);transition:background .2s}
.reel-cover:hover .scrim{background:rgba(11,13,16,.2)}
.reel-cover .ring{
  position:relative;z-index:2;width:84px;height:84px;border-radius:50%;
  border:2px solid #fff;display:flex;align-items:center;justify-content:center;transition:.2s var(--ease);
}
.reel-cover:hover .ring{background:var(--accent);border-color:var(--accent)}
.reel-cover svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.reel-cover.is-hidden{display:none}

/* ---------------- FOOTER ---------------- */
footer{border-top:1px solid var(--hair);padding:3rem 0 2.5rem;background:var(--bg)}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.social{display:flex;gap:1.6rem}
.social a{font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:color .2s}
.social a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem;font-size:var(--fs-sm);color:var(--mute)}
.foot-bottom a:hover{color:#fff}

/* ---------------- REVEAL ---------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}