/*
Theme Name: rideXserve
Theme URI: https://www.ridexserve.org
Author: rideXserve
Description: Custom rideXserve theme. Forge Orange brand, cinematic explode-on-scroll hero, built from the approved coded homepage.
Version: 1.1.0
License: Proprietary
Text Domain: ridexserve
*/

:root{ --orange:#FF3B00; --ink:#0a0a0a; --paper:#f4f2ee; }
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ background:var(--orange); color:#fff; font-family:'Inter',system-ui,sans-serif; }
a{ color:inherit; text-decoration:none; }

.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center;
      justify-content:space-between; padding:18px 32px; color:#fff; transition:background .3s ease; }
.nav.solid{ background:#000; }
.brand{ font-family:'Anton',sans-serif; font-size:24px; letter-spacing:.5px; }
.brand b{ color:#fff; font-size:1.22em; line-height:1; transition:color .3s ease; font-weight:400; }
.nav.solid .brand b{ color:var(--orange); }
.nav .links{ display:flex; gap:26px; align-items:center; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.5px; }
.nav .links a.course{ background:#fff; color:#000; padding:9px 16px; border-radius:2px; }
@media(max-width:720px){ .nav .links a:not(.course){ display:none; } }

.hero-track{ position:relative; height:520vh; }
.hero-stage{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--orange); }
#frame{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 42%); pointer-events:none; }
.hero-overlay{ position:absolute; left:11vw; top:0; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; max-width:48vw; text-align:left; padding-right:24px; will-change:opacity,transform; }
h1{ font-family:'Anton',sans-serif; font-size:clamp(40px,6.4vw,104px); line-height:1.04; letter-spacing:3px; text-transform:uppercase; text-shadow:0 4px 30px rgba(0,0,0,.35); }
.sub{ max-width:460px; margin:16px 0 22px; font-size:clamp(15px,1.4vw,18px); line-height:1.5; opacity:.95; }
.cta{ display:flex; gap:14px; justify-content:flex-start; flex-wrap:wrap; }
@media(max-width:760px){ .hero-overlay{ left:0; max-width:100%; padding:0 20px 12vh; align-items:center; justify-content:flex-end; text-align:center; } .cta{ justify-content:center; } }
.btn{ font-weight:700; font-size:15px; padding:15px 26px; border-radius:3px; text-transform:uppercase; letter-spacing:.4px; transition:transform .15s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:#000; color:#fff; }
.btn-ghost{ background:#fff; color:#000; }
.scroll-cue{ position:absolute; bottom:18px; left:0; right:0; text-align:center; font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:.85; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
.sound-btn{ position:absolute; top:84px; right:24px; z-index:20; background:rgba(0,0,0,.5); color:#fff; border:1px solid rgba(255,255,255,.4); padding:8px 14px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; }
#loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; background:var(--orange); z-index:15; transition:opacity .4s; }
#snd{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.statband{ background:#000; padding:70px 24px; display:flex; gap:40px; justify-content:center; flex-wrap:wrap; text-align:center; }
.stat .n{ font-family:'Anton',sans-serif; font-size:clamp(40px,5vw,72px); color:var(--orange); line-height:1; }
.stat .l{ font-size:12px; letter-spacing:3px; text-transform:uppercase; opacity:.8; margin-top:8px; color:#fff; }

.blk{ padding:100px 24px; }
.wrap{ max-width:1100px; margin:0 auto; }
.paper{ background:var(--paper); color:#111; }
.dark{ background:#000; color:#fff; }
.kicker{ display:inline-block; background:var(--orange); color:#fff; font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:5px 12px; border-radius:2px; margin-bottom:18px; }
h2{ font-family:'Anton',sans-serif; font-size:clamp(30px,4.4vw,60px); text-transform:uppercase; line-height:.98; letter-spacing:1px; }
.lead{ max-width:620px; margin:16px 0 0; opacity:.78; font-size:17px; line-height:1.55; }
.cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.cols.two{ grid-template-columns:repeat(2,1fr); }
.card{ border:1px solid rgba(0,0,0,.12); border-radius:6px; padding:26px; background:#fff; color:#111; }
.dark .card{ border-color:rgba(255,255,255,.15); background:#0e0e0e; color:#fff; }
.card h3{ font-family:'Anton',sans-serif; font-size:22px; text-transform:uppercase; letter-spacing:.5px; }
.card p{ margin:10px 0 16px; opacity:.75; font-size:15px; line-height:1.5; }
.card a, .lnk{ color:var(--orange); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.5px; }
.card img{ width:100%; border-radius:4px; }
.cbtn{ display:inline-flex; align-items:center; gap:8px; background:var(--orange); color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:16px 28px; border-radius:4px; margin-top:26px; font-size:15px; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.split img{ width:100%; border-radius:8px; }
.price{ font-family:'Anton',sans-serif; font-size:22px; margin-top:18px; color:var(--orange); }
footer.site{ background:#000; color:#fff; padding:70px 24px 40px; text-align:center; }
footer.site .fbrand{ font-family:'Anton',sans-serif; font-size:28px; }
footer.site .fbrand b{ color:var(--orange); font-weight:400; }
footer.site nav{ margin:20px 0; display:flex; gap:22px; justify-content:center; flex-wrap:wrap; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.5px; }
footer.site .fine{ opacity:.5; font-size:13px; margin-top:14px; }
@media(max-width:820px){ .cols, .cols.two{ grid-template-columns:1fr; } .split{ grid-template-columns:1fr; } }

/* Blog templates */
.postwrap{ background:var(--paper); color:#111; min-height:60vh; padding:140px 24px 90px; }
.postwrap .wrap{ max-width:760px; }
.postwrap h1.ptitle{ font-family:'Anton',sans-serif; color:#111; font-size:clamp(32px,4.6vw,58px); text-shadow:none; letter-spacing:1px; line-height:1.02; }
.pmeta{ margin:14px 0 30px; font-size:13px; letter-spacing:1px; text-transform:uppercase; opacity:.6; }
.pcontent p{ margin:0 0 20px; line-height:1.7; font-size:17px; }
.pcontent h2{ font-size:clamp(22px,3vw,34px); margin:34px 0 14px; }
.pcontent img{ max-width:100%; border-radius:6px; }
.pcontent a{ color:var(--orange); font-weight:600; }
.bloglist article{ border-bottom:1px solid rgba(0,0,0,.12); padding:28px 0; }
.bloglist h2 a:hover{ color:var(--orange); }