/* ===========================================================
   FRESNO ATHLETIC LAB — premium athletic design system
   Vibe: midnight + ice-blue, kinetic, engineered performance.
   Bright off-white / bone content bands between dark cinematic
   sections (not a dark cave). Fonts: Archivo (display) + Manrope.
   =========================================================== */
:root{
  /* midnight base */
  --night:#0B1120; --night2:#0E1729; --panel-dark:#131C31; --steel:#1B2740;
  /* ice-blue accent family */
  --ice:#38BDF8; --ice-deep:#0EA5E9; --ice-soft:#7DD3FC; --electric:#22D3EE; --cyan-glow:#67E8F9;
  /* off-whites (never pure white — cool ice + warm bone) */
  --paper:#F4F6F9; --mist:#EAEEF3; --cloud:#FBFCFD; --bone:#ECE8DF; --bone-soft:#F3F0E8;
  /* ink for light sections */
  --ink:#0C1526; --ink-soft:#51607A; --ink-mute:#8A97AD;
  --white:#fff;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.9);
  --glass-dark:rgba(19,28,49,.55);
  --shadow:0 26px 64px -24px rgba(9,18,38,.34);
  --shadow-sm:0 12px 30px -16px rgba(9,18,38,.24);
  --glow-ice:0 0 0 1px rgba(56,189,248,.3), 0 18px 44px -18px rgba(14,165,233,.6);
  --glow-electric:0 12px 34px -12px rgba(34,211,238,.55);
  --radius:20px; --maxw:1200px;
  --display:"Archivo",system-ui,sans-serif; --sans:"Manrope",system-ui,sans-serif;
  /* legacy aliases so any inherited markup keeps the ice/midnight palette */
  --reef:#38BDF8; --reef-deep:#0EA5E9; --lagoon:#7DD3FC; --deep-sea:#0B2036;
  --coral:#22D3EE; --coral-deep:#0EA5E9; --sun:#67E8F9; --anemone:#67E8F9;
  --foam:#F4F6F9; --shallow:#EAEEF3; --ink-soft2:#51607A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.65; overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; line-height:1.03; letter-spacing:-.02em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{font-family:var(--sans); font-weight:800; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ice-deep)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:700; font-size:.96rem; padding:.92rem 1.7rem; border-radius:12px; transition:.26s cubic-bezier(.2,.7,.3,1); cursor:pointer; border:none; letter-spacing:.01em; text-transform:uppercase}
.btn-primary{background:linear-gradient(120deg,var(--ice),var(--ice-deep)); color:#06121F; box-shadow:var(--glow-ice)}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 22px 46px -14px rgba(14,165,233,.8)}
/* secondary "bone" button — bright, high-contrast on dark */
.btn-coral{background:var(--bone); color:#12203A; box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.btn-coral:hover{transform:translateY(-3px); background:#fff}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.4); backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.16); transform:translateY(-3px)}
.btn-sm{padding:.6rem 1.1rem; font-size:.82rem}

/* ---------- NAV ---------- */
header.nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:.35s ease}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:var(--maxw); margin:0 auto}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:900; font-size:1.28rem; letter-spacing:-.02em; text-transform:uppercase; color:#fff; transition:.35s}
.nav-links{display:flex; align-items:center; gap:1.9rem; font-family:var(--display); font-weight:600; font-size:.9rem; text-transform:uppercase; letter-spacing:.02em; color:rgba(255,255,255,.92); transition:.35s}
.nav-links a{position:relative; opacity:.92}
.nav-links a:hover{opacity:1}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--ice);transition:.3s}
.nav-links a:hover::after{width:100%}
.nav-cta{padding:.58rem 1.3rem; font-size:.82rem}
header.nav.scrolled{background:rgba(11,17,32,.86); backdrop-filter:saturate(160%) blur(16px); box-shadow:0 6px 26px -16px rgba(0,0,0,.7)}
header.nav.solid{position:sticky; background:rgba(11,17,32,.95); backdrop-filter:saturate(160%) blur(16px); box-shadow:0 6px 26px -16px rgba(0,0,0,.7)}
.menu-btn{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer}

/* ---------- HERO (animated midnight + ice energy) ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:-3; overflow:hidden;
  background:
    radial-gradient(ellipse at 72% 18%, rgba(34,211,238,.22), transparent 46%),
    radial-gradient(ellipse at 20% 88%, rgba(14,165,233,.24), transparent 50%),
    linear-gradient(120deg,#0B1120 0%,#0E1B32 46%,#0B2036 100%)}
/* moving diagonal energy grid */
.hero-bg::before{content:"";position:absolute;inset:-40%;z-index:-2;
  background-image:linear-gradient(115deg,rgba(56,189,248,.10) 1px,transparent 1px),linear-gradient(25deg,rgba(56,189,248,.07) 1px,transparent 1px);
  background-size:52px 52px, 52px 52px;
  mask-image:radial-gradient(ellipse at 60% 40%,#000 30%,transparent 72%);
  animation:gridDrift 24s linear infinite}
@keyframes gridDrift{from{transform:translate(0,0)}to{transform:translate(52px,52px)}}
/* aurora sweep */
.hero::before{content:"";position:absolute;inset:-20%;z-index:-2;pointer-events:none;
  background:conic-gradient(from 120deg at 68% 30%, rgba(34,211,238,.0), rgba(56,189,248,.28), rgba(103,232,249,.0) 40%, rgba(14,165,233,.22) 70%, rgba(34,211,238,0));
  filter:blur(28px); mix-blend-mode:screen; animation:auroraSpin 22s ease-in-out infinite alternate}
@keyframes auroraSpin{from{transform:rotate(0deg) scale(1)}to{transform:rotate(24deg) scale(1.14)}}
/* drifting particles */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(2px 2px at 12% 30%,rgba(255,255,255,.5),transparent),radial-gradient(2px 2px at 82% 22%,rgba(103,232,249,.6),transparent),radial-gradient(1.5px 1.5px at 46% 74%,rgba(255,255,255,.4),transparent),radial-gradient(2px 2px at 68% 62%,rgba(56,189,248,.55),transparent),radial-gradient(1.5px 1.5px at 30% 84%,rgba(255,255,255,.35),transparent);
  animation:particles 20s ease-in-out infinite alternate}
@keyframes particles{from{transform:translateY(0)}to{transform:translateY(-26px)}}
.hero .wrap{position:relative; z-index:2; padding-top:80px}
.hero-content{max-width:900px; color:#fff}
.hero h1{font-size:clamp(3rem,7.4vw,6rem); color:#fff; margin:1.1rem 0 1.3rem; letter-spacing:-.035em; font-weight:900; text-transform:uppercase; line-height:.96}
.hero h1 em{font-style:normal; background:linear-gradient(120deg,var(--cyan-glow),var(--ice)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero p.lead{font-size:clamp(1.06rem,1.6vw,1.3rem); color:rgba(233,241,251,.92); max-width:660px; margin-bottom:2.1rem; font-weight:500; text-transform:none; letter-spacing:0}
.hero-cta{display:flex; gap:1rem; flex-wrap:wrap}
.hero-eyebrow{color:var(--ice-soft)}
.rmark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.brand .rmark{width:30px;height:30px}
.foot-brand .rmark{width:26px;height:26px}
.brand-lockup{display:flex;align-items:center;gap:.65rem;margin-bottom:1.1rem}
.brand-lockup .rmark{width:46px;height:46px}
.brand-lockup .wm{font-family:var(--display);font-weight:900;font-size:1.7rem;letter-spacing:-.02em;text-transform:uppercase;color:#fff;line-height:1}
.brand-lockup .wm b{font-weight:900;color:var(--ice)}
@media(max-width:560px){.brand-lockup .wm{font-size:1.35rem}}
.hero-badges{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:2.2rem;color:rgba(233,241,251,.9);font-size:.84rem;font-weight:700}
.hero-badges span{display:flex;align-items:center;gap:.5rem}
.hero-badges b{color:var(--ice)}
.scroll-cue{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; color:rgba(233,241,251,.7); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--display); font-weight:600}
.scroll-cue span{width:1px;height:42px;background:linear-gradient(var(--ice),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- SUBHERO (interior pages) ---------- */
.subhero{position:relative; padding:158px 0 70px; color:#fff; overflow:hidden;
  background:radial-gradient(ellipse at 80% 0,rgba(34,211,238,.34),transparent 55%),linear-gradient(116deg,#0B1120,#0E1B32 54%,#0B2036)}
.subhero::before{content:"";position:absolute;inset:-40%;z-index:0;
  background-image:linear-gradient(115deg,rgba(56,189,248,.08) 1px,transparent 1px),linear-gradient(25deg,rgba(56,189,248,.05) 1px,transparent 1px);
  background-size:48px 48px,48px 48px; mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 70%)}
.subhero .wrap{position:relative; z-index:2}
.subhero h1{font-size:clamp(2.2rem,5vw,3.7rem); color:#fff; margin:.6rem 0 .8rem; max-width:840px; font-weight:900; letter-spacing:-.025em; text-transform:uppercase; line-height:1}
.subhero p{color:rgba(233,241,251,.9); font-size:1.12rem; max-width:680px}
.crumbs{font-size:.8rem; color:rgba(233,241,251,.72); margin-bottom:.4rem; letter-spacing:.03em}
.crumbs a{color:var(--ice-soft); opacity:.92} .crumbs a:hover{opacity:1}

/* ---------- TRUST BAR ---------- */
.trust{background:var(--night2); border-top:1px solid rgba(56,189,248,.18); border-bottom:1px solid rgba(56,189,248,.18)}
.trust .wrap{display:flex; flex-wrap:wrap; gap:1.2rem 2.6rem; justify-content:center; padding:18px 28px; font-size:.83rem; font-weight:700; color:rgba(233,241,251,.9); font-family:var(--display); text-transform:uppercase; letter-spacing:.03em}
.trust b{color:var(--ice)}
.trust .t-item{display:flex;align-items:center;gap:.55rem}

/* ---------- SECTIONS ---------- */
section.block{padding:clamp(66px,8.5vw,124px) 0; position:relative}
section.block.tight{padding:clamp(46px,6vw,80px) 0}
/* alternating bright/dark bands */
.band-bone{background:var(--bone-soft)}
.band-mist{background:var(--mist)}
.band-dark{background:var(--night); color:#fff}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .section-head p,.band-dark p{color:rgba(233,241,251,.82)}
.band-dark .eyebrow{color:var(--ice-soft)}
.section-head{max-width:720px; margin-bottom:3.2rem}
.section-head.center{margin:0 auto 3.4rem; text-align:center}
.section-head h2{font-size:clamp(2.05rem,3.8vw,3.2rem); margin:.7rem 0 1rem; font-weight:900; text-transform:uppercase; letter-spacing:-.02em}
.section-head p{color:var(--ink-soft); font-size:1.08rem}
.reveal{opacity:0; transform:translateY(32px); transition:.85s cubic-bezier(.16,.8,.3,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- PILLARS / CATEGORY CARDS ---------- */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.pillar{position:relative; border-radius:var(--radius); overflow:hidden; min-height:340px; display:flex; align-items:flex-end; color:#fff; box-shadow:var(--shadow-sm); transition:.42s cubic-bezier(.2,.7,.3,1); background:var(--panel-dark); border:1px solid rgba(56,189,248,.16)}
.pillar:hover{transform:translateY(-9px); box-shadow:var(--glow-ice)}
.pillar .pbg{position:absolute; inset:0; z-index:0; transition:.6s; background-size:cover; background-position:center;
  background-image:linear-gradient(150deg,rgba(14,165,233,.32),rgba(11,17,32,.2))}
.pillar:hover .pbg{transform:scale(1.06)}
.pillar .pbg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,15,30,.94),rgba(11,32,54,.3) 58%,transparent)}
.pillar .pc{padding:26px 24px; position:relative; z-index:1}
.pillar h3{font-size:1.4rem; color:#fff; margin-bottom:.4rem; text-transform:uppercase}
.pillar p{font-size:.9rem; color:rgba(233,241,251,.82)}
.pillar .tag{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ice); font-weight:800; font-family:var(--display)}

/* ---------- PRODUCT / SHOP GRID ---------- */
.shop{background:var(--mist)}
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.pcard{background:var(--cloud); border:1px solid rgba(12,21,38,.08); border-radius:var(--radius); padding:16px 16px 20px; box-shadow:var(--shadow-sm); transition:.38s cubic-bezier(.2,.7,.3,1); display:flex; flex-direction:column; position:relative; overflow:hidden}
.pcard:hover{transform:translateY(-8px); box-shadow:var(--glow-ice); border-color:rgba(56,189,248,.4)}
.pcard .imgwrap{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; margin-bottom:1rem; background:linear-gradient(155deg,#0E1B32,#0B2036)}
.pcard .imgwrap img{width:100%;height:100%;object-fit:cover;transition:.6s}
.pcard:hover .imgwrap img{transform:scale(1.06)}
.pcard .imgwrap .tile{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:2.1rem;color:#fff;text-transform:uppercase;letter-spacing:.02em;background:linear-gradient(150deg,#0E1B32,#123152);position:relative}
.pcard .imgwrap .tile::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,rgba(56,189,248,.4),transparent 60%)}
.pcard .ruo-tag{position:absolute; top:12px; left:12px; z-index:2; font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#06121F; background:var(--ice-soft); padding:.3rem .6rem; border-radius:8px; font-family:var(--display)}
.pcard .hot{position:absolute; top:12px; right:12px; z-index:2; font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#06121F; background:linear-gradient(120deg,var(--electric),var(--ice)); padding:.3rem .6rem; border-radius:8px; font-family:var(--display); box-shadow:var(--glow-electric)}
.pcard .cat{font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ice-deep); font-family:var(--display)}
.pcard h4{font-size:1.16rem; margin:.25rem 0 .1rem; font-family:var(--display); font-weight:800}
.pcard .mg{font-size:.84rem; color:var(--ink-soft); margin-bottom:.8rem}
.pcard .row{display:flex; align-items:baseline; justify-content:space-between; margin-top:auto; gap:.5rem}
.pcard .price{font-family:var(--display); font-size:1.3rem; color:var(--ink); font-weight:900}
.pcard .price small{font-size:.72rem; color:var(--ink-soft); font-weight:500}
.pcard .purity{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ice-deep);background:rgba(56,189,248,.14);padding:.24rem .52rem;border-radius:8px;font-family:var(--display)}
.pcard .btn{margin-top:1rem;justify-content:center;width:100%}
@media(max-width:980px){ .shop-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .shop-grid{grid-template-columns:1fr} }

/* ---------- STAT / FACT STRIP ---------- */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:2.4rem 0}
.fact{background:var(--cloud); border:1px solid rgba(12,21,38,.08); border-radius:16px; padding:22px; text-align:center; box-shadow:var(--shadow-sm)}
.fact .n{font-family:var(--display); font-size:1.9rem; color:var(--ice-deep); font-weight:900}
.fact .l{font-size:.76rem; color:var(--ink-soft); letter-spacing:.03em; text-transform:uppercase; font-weight:600}
.band-dark .fact{background:var(--panel-dark); border-color:rgba(56,189,248,.2)}
.band-dark .fact .l{color:rgba(233,241,251,.7)}

/* ---------- ORDER / QUOTE PANEL ---------- */
.orderwrap{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start}
.ordercard{background:var(--cloud); border:1px solid rgba(12,21,38,.1); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow)}
.ordercard h3{font-size:1.5rem;margin-bottom:.4rem}
.field{margin-bottom:1rem}
.field label{display:block; font-size:.78rem; font-weight:800; color:var(--ink); margin-bottom:.35rem; letter-spacing:.02em; text-transform:uppercase; font-family:var(--display)}
.field input,.field select,.field textarea{width:100%; padding:.85rem 1rem; border-radius:12px; border:1.5px solid rgba(12,21,38,.16); background:#fff; font-family:var(--sans); font-size:.98rem; color:var(--ink); transition:.25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--ice); box-shadow:0 0 0 4px rgba(56,189,248,.18)}
.field textarea{min-height:104px; resize:vertical}
.field.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:var(--ink-soft); margin:.6rem 0 1rem}
.consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}
.contact-rail{display:flex; flex-direction:column; gap:1rem}
.contact-tile{display:flex; align-items:center; gap:1rem; background:var(--cloud); border:1px solid rgba(12,21,38,.08); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-sm); transition:.3s}
.contact-tile:hover{transform:translateY(-4px); box-shadow:var(--glow-ice)}
.contact-tile .ic{width:48px;height:48px;border-radius:12px;background:linear-gradient(140deg,var(--ice),var(--ice-deep));display:flex;align-items:center;justify-content:center;color:#06121F;font-size:1.3rem;flex:0 0 auto}
.contact-tile .ic.coral{background:linear-gradient(140deg,var(--electric),var(--cyan-glow))}
.contact-tile h4{font-size:1.02rem;margin-bottom:.1rem}
.contact-tile p{font-size:.86rem;color:var(--ink-soft)}

/* ---------- PROSE ---------- */
.prose{max-width:770px}
.prose p{color:var(--ink-soft); font-size:1.07rem; margin-bottom:1.2rem}
.prose h2{font-size:1.95rem; margin:2.2rem 0 1rem; font-weight:900; text-transform:uppercase; letter-spacing:-.01em}
.prose h3{font-size:1.36rem; margin:1.6rem 0 .7rem}
.prose ul{margin:0 0 1.2rem 1.1rem; color:var(--ink-soft)}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--ice-deep); font-weight:700}
.note-box{background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.28); border-left:4px solid var(--ice); border-radius:12px; padding:18px 22px; margin:1.6rem 0; font-size:.95rem; color:var(--ink-soft)}
.note-box b{color:var(--ink)}
.note-box.coral{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.32);border-left-color:var(--electric)}

/* ---------- COMPARISON TABLE ---------- */
.compare{width:100%; border-collapse:separate; border-spacing:0 12px}
.compare th{text-align:left; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:0 18px .4rem; font-family:var(--display)}
.compare td{background:var(--cloud); padding:18px; border-top:1px solid rgba(12,21,38,.06); border-bottom:1px solid rgba(12,21,38,.06); vertical-align:middle; font-size:.95rem}
.compare tr td:first-child{border-left:1px solid rgba(12,21,38,.06); border-radius:12px 0 0 12px}
.compare tr td:last-child{border-right:1px solid rgba(12,21,38,.06); border-radius:0 12px 12px 0}
.compare tr{box-shadow:var(--shadow-sm)}
.compare .vname{font-family:var(--display); font-weight:800; font-size:1.05rem}
.compare .yes{color:var(--ice-deep); font-weight:800}
.compare .no{color:#94A3B8}

/* ---------- FAQ ---------- */
.faq details{background:var(--cloud); border:1px solid rgba(12,21,38,.08); border-radius:12px; padding:4px 22px; margin-bottom:12px; box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer; font-weight:800; padding:16px 0; list-style:none; font-size:1.04rem; position:relative; padding-right:30px; font-family:var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:0; top:13px; font-size:1.4rem; color:var(--ice-deep); transition:.3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px; color:var(--ink-soft); font-size:.97rem}

/* ---------- FEATURE / ABOUT SPLIT ---------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.split-photo{position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); min-height:480px; background-size:cover; background-position:center; background:linear-gradient(150deg,#0E1B32,#0B2036)}
.split-photo::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 28%,rgba(56,189,248,.4),transparent 58%),linear-gradient(115deg,rgba(56,189,248,.1),rgba(34,211,238,.06));z-index:0}
.split-photo .frame{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,15,30,.5),transparent 55%);z-index:1}
.split h2{font-size:clamp(2rem,3.5vw,2.95rem); margin:.7rem 0 1.2rem; font-weight:900; text-transform:uppercase; letter-spacing:-.02em}
.split p{color:var(--ink-soft); margin-bottom:1.1rem; font-size:1.04rem}
.creds{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0}
.cred{font-size:.8rem; font-weight:700; font-family:var(--display); background:var(--cloud); border:1px solid rgba(12,21,38,.1); padding:.5rem 1rem; border-radius:10px; box-shadow:var(--shadow-sm)}

/* ---------- CTA BANNER ---------- */
.cta-band{background:linear-gradient(120deg,#0E1B32,#0B2036 52%,#0B2A47); border:1px solid rgba(56,189,248,.28); border-radius:var(--radius); padding:clamp(40px,6vw,72px); text-align:center; color:#fff; box-shadow:var(--shadow); position:relative; overflow:hidden}
.cta-band::before{content:"";position:absolute;top:-42%;right:-8%;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.34),transparent 70%)}
.cta-band::after{content:"";position:absolute;bottom:-50%;left:-10%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.26),transparent 70%)}
.cta-band h2{color:#fff; font-size:clamp(1.85rem,3vw,2.7rem); margin-bottom:.8rem; position:relative; font-weight:900; text-transform:uppercase; letter-spacing:-.02em}
.cta-band p{color:rgba(233,241,251,.92); max-width:560px; margin:0 auto 1.8rem; position:relative}
.cta-band form{display:flex; gap:.7rem; max-width:500px; margin:0 auto; position:relative; flex-wrap:wrap; justify-content:center}
.cta-band input{flex:1; min-width:220px; padding:.95rem 1.3rem; border-radius:12px; border:none; font-family:var(--sans); font-size:1rem}
.cta-band .btn-coral{position:relative}

/* ---------- FOOTER ---------- */
footer{background:#070C17; color:rgba(233,241,251,.66); padding:70px 0 34px; font-size:.9rem; border-top:1px solid rgba(56,189,248,.14)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:42px}
footer h4{color:#fff; font-family:var(--display); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem}
footer ul{list-style:none}
footer ul li{margin-bottom:.6rem}
footer ul li a:hover{color:var(--ice)}
.foot-brand{font-family:var(--display); font-size:1.4rem; font-weight:900; text-transform:uppercase; color:#fff; display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem}
.disclaimer{border-top:1px solid rgba(255,255,255,.12); padding-top:24px; font-size:.78rem; color:rgba(233,241,251,.5); line-height:1.7}
.disclaimer b{color:rgba(233,241,251,.72)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .shop-grid{grid-template-columns:1fr}
  .split,.orderwrap{grid-template-columns:1fr}
  .split-photo{min-height:340px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  #nav .nav-inner{position:relative}
  .nav-links.open{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;position:absolute;top:calc(100% + 10px);left:0;right:0;background:#0B1120;border:1px solid rgba(56,189,248,.2);border-radius:12px;padding:1.2rem 1.4rem;box-shadow:0 18px 44px rgba(0,0,0,.5);z-index:80}
  .nav-links.open a{color:#fff!important;opacity:.96;font-size:1rem}
  .nav-links.open a::after{display:none}
  .menu-btn{display:block}
  .compare thead{display:none}
  .compare,.compare tbody,.compare tr,.compare td{display:block; width:100%}
  .compare tr{margin-bottom:14px; padding:6px}
  .compare td{border:none!important}
}
@media(max-width:560px){ .pillars{grid-template-columns:1fr} .facts{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .field.two{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ .hero-bg::before,.hero::before,.hero::after{animation:none} }

/* ===== rotating photographic hero (homepage) — athletic montage crossfade =====
   Frames sit above the animated midnight bg (which is the fallback if images
   are missing). A dark ice-blue tint is painted on top so the headline stays readable. */
/* container holds a constant slow ken-burns drift so the hero is NEVER a static frame */
.hero-rotate .hero-bg{animation:heroKen 32s ease-in-out infinite alternate}
@keyframes heroKen{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.16) translate(-2%,-2.5%)}}
.hero-rotate .rlayer{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; opacity:0; will-change:opacity; animation:heroRotate 42.75s ease-in-out infinite}
.hero-rotate .rl1{background-image:url("../images/hero-a.jpg"); animation-delay:0s}
.hero-rotate .rl2{background-image:url("../images/hero-b.jpg"); animation-delay:8.55s}
.hero-rotate .rl3{background-image:url("../images/hero-c.jpg"); animation-delay:17.1s}
.hero-rotate .rl4{background-image:url("../images/hero-d.jpg"); animation-delay:25.65s}
.hero-rotate .rl5{background-image:url("../images/hero-e.jpg"); animation-delay:34.2s}
/* continuous coverage — each frame holds full opacity right up to the moment
   the next fades in (20% stagger), so a photo is ALWAYS on screen (no dark gaps) */
@keyframes heroRotate{0%{opacity:0} 3%{opacity:1} 20%{opacity:1} 24%{opacity:0} 100%{opacity:0}}
/* readability tint — dark on the LEFT (behind headline), nearly clear on the RIGHT (athlete shows through) */
.hero-rotate .hero-bg::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(9,15,30,.94) 0%, rgba(9,15,30,.72) 32%, rgba(11,32,54,.3) 62%, rgba(11,17,32,.06) 100%)}
@media (prefers-reduced-motion: reduce){ .hero-rotate .rlayer{animation-duration:0s} .hero-rotate .rl1{opacity:1} .hero-rotate .hero-bg{animation-duration:0s} }

/* ================= MOBILE / PHONE OPTIMIZATION ================= */
@media(max-width:640px){
  .nav-inner{padding:14px 18px}
  .brand{font-size:1.02rem; gap:.45rem}
  .brand .rmark{width:26px;height:26px}
  .nav-cta{padding:.5rem .85rem; font-size:.72rem}
  .wrap{padding:0 20px}
  /* hero */
  .hero{min-height:92svh}
  .hero .wrap{padding-top:92px}
  .brand-lockup{margin-bottom:.8rem}
  .brand-lockup .rmark{width:38px;height:38px}
  .brand-lockup .wm{font-size:1.2rem}
  .hero-eyebrow{font-size:.66rem; letter-spacing:.16em}
  .hero h1{font-size:clamp(2.15rem,10.5vw,3.2rem); margin:.7rem 0 1rem; line-height:1}
  .hero p.lead{font-size:1rem; margin-bottom:1.5rem}
  .hero-cta{gap:.6rem}
  .hero-cta .btn{flex:1 1 46%; justify-content:center; padding:.85rem 1rem; font-size:.86rem}
  .hero-badges{gap:.6rem 1.1rem; font-size:.74rem; margin-top:1.6rem}
  /* PHONE loads portrait-framed hero images (built for tall screens); desktop keeps the wide cinematic set */
  .hero-rotate .rlayer{background-position:center}
  .hero-rotate .rl1{background-image:url("../images/hero-a-m.jpg")}
  .hero-rotate .rl2{background-image:url("../images/hero-b-m.jpg")}
  .hero-rotate .rl3{background-image:url("../images/hero-c-m.jpg")}
  .hero-rotate .rl4{background-image:url("../images/hero-d-m.jpg")}
  .hero-rotate .rl5{background-image:url("../images/hero-e-m.jpg")}
  .hero-rotate .hero-bg::after{background:linear-gradient(180deg, rgba(9,15,30,.62) 0%, rgba(9,15,30,.32) 34%, rgba(9,15,30,.5) 68%, rgba(9,15,30,.82) 100%)}
  .scroll-cue{display:none}
  /* sections + type */
  section.block{padding:52px 0}
  section.block.tight{padding:40px 0}
  .section-head{margin-bottom:2.2rem}
  .section-head h2{font-size:clamp(1.7rem,7.5vw,2.25rem)}
  .section-head p{font-size:1rem}
  .band-bone .reveal[style*="grid-template-columns:1.4fr"]{grid-template-columns:1fr!important; text-align:left}
  .facts{grid-template-columns:repeat(2,1fr); gap:12px}
  .fact .n{font-size:1.6rem}
  .trust .wrap{gap:.7rem 1.4rem; font-size:.74rem}
  .cta-band{padding:34px 22px}
  .cta-band form{flex-direction:column}
  .cta-band input,.cta-band .btn{width:100%}
  .pcard h4{font-size:1.1rem}
  .btn{font-size:.9rem}
  footer{padding:52px 0 28px}
}
@media(max-width:400px){
  .hero h1{font-size:2.05rem}
  .hero-cta .btn{flex:1 1 100%}
  .brand{font-size:.94rem}
}