/* ════════════════════════════════════════════════════════════════
   DAD'S AUTO INSPECTION — Master Stylesheet (v10 system, all pages)
   ════════════════════════════════════════════════════════════════ */

:root{
  --navy:#0D1B2E; --navy-2:#11233a; --navy-card:#13243b; --navy-line:rgba(255,255,255,.08);
  --gold:#E8A020; --gold-soft:#f3bd55; --gold-deep:#cf8a14;
  --steel:#8e9cb0; --cream:#f1f5f9;
  --display:'Oswald',sans-serif; --body:'Hanken Grotesk',sans-serif;
  --scene:url("assets/scene.jpg");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body); background:var(--navy); color:#fff; -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5}
body::after{content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img{max-width:100%}

/* ════════ FLOATING HEADER (home / over-photo) ════════ */
.topbar{position:absolute; top:0; left:0; right:0; z-index:50; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; align-items:center; gap:0 24px;
  padding:20px clamp(16px,4vw,52px); pointer-events:none}
.topbar-tagline{grid-column:1 / -1; grid-row:2; justify-self:center; white-space:nowrap}
.topbar a, .topbar .menu-btn{pointer-events:auto}
.brand-logo{display:block; position:relative; width:168px; line-height:0}
.brand-logo::before{content:""; position:absolute; inset:-14% -10% -10% -10%; z-index:-1;
  background:radial-gradient(circle at 50% 45%, rgba(7,14,26,.5), transparent 66%)}
.brand-logo img{width:100%; height:auto; filter:drop-shadow(0 4px 12px rgba(0,0,0,.55))}
.topbar-tagline{text-align:center; font-family:var(--display); font-weight:500; font-size:clamp(11px,1vw,13px);
  letter-spacing:.22em; text-transform:uppercase; color:#ffe6b3; text-shadow:0 2px 10px rgba(0,0,0,.7); pointer-events:none}
@media (max-width:1200px){.topbar-tagline{display:none}}
.topnav{display:flex; align-items:center; gap:26px; padding-top:6px; justify-self:end; grid-row:1; grid-column:3}
.topnav>a:not(.nav-cta){font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; text-decoration:none; opacity:.92; text-shadow:0 1px 6px rgba(0,0,0,.6); transition:color .2s; position:relative}
.topnav>a:not(.nav-cta)::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--gold); transition:width .25s}
.topnav>a:not(.nav-cta):hover{color:var(--gold-soft)}
.topnav>a:not(.nav-cta):hover::after{width:100%}
.topnav>a.active::after{width:100%}

/* ════════ SOLID HEADER (inner pages) ════════ */
.siteheader{position:sticky; top:0; z-index:100; background:rgba(10,20,34,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(232,160,32,.18); display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:24px; padding:12px clamp(16px,4vw,52px)}
.siteheader .brand-logo{width:118px}
.siteheader .brand-logo::before{display:none}

/* ════════ BUTTONS ════════ */
.btn{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; border-radius:8px;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s; border:1px solid #9a6e16; z-index:2}
.btn::after{content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); transition:left .55s ease}
.btn:hover::after{left:135%}
.btn-goldchrome{color:#3a2606; padding:15px 28px; font-size:14px; text-shadow:0 1px 0 rgba(255,255,255,.45);
  background:linear-gradient(180deg,#fff7e0 0%,#f4d27a 18%,#e3ad42 49%,#b9791a 50%,#e0a83c 78%,#fbe6a6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(120,72,0,.4), 0 8px 20px -9px rgba(180,120,10,.7)}
.btn-goldchrome:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 3px rgba(120,72,0,.4), 0 12px 26px -9px rgba(180,120,10,.85)}
.nav-cta{padding:11px 22px; font-size:13px}
.btn-ghost{background:rgba(13,27,46,.35); color:#fff; padding:15px 28px; font-size:14px; border:1.5px solid rgba(255,255,255,.4); backdrop-filter:blur(2px)}
.btn-ghost::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-soft); transform:translateY(-2px)}
.btn-lg{padding:18px 38px; font-size:16px}
.menu-btn{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; z-index:120; pointer-events:auto}

/* ════════ HERO (real photo) ════════ */
.hero{position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; overflow:hidden; padding-top:184px; padding-bottom:48px}
.hero-photo{position:absolute; inset:0; background:var(--scene) center/cover no-repeat; z-index:0; filter:brightness(1.14) saturate(1.06)}
.hero-overlay{position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(7,14,26,.74) 0%,rgba(7,14,26,.42) 40%,rgba(7,14,26,.08) 70%,transparent 100%)}
.hero-overlay::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,14,26,.2) 0%,transparent 28%,transparent 58%,rgba(7,14,26,.5) 100%)}
.hero-inner{position:relative; z-index:5; width:100%; max-width:1280px; margin:0 auto; padding:0 clamp(20px,5vw,64px)}
.copy{max-width:660px}
.kicker{font-family:var(--display); font-weight:600; font-size:clamp(12px,1.05vw,14px); letter-spacing:.3em; text-transform:uppercase;
  color:#ffe6b3; text-shadow:0 2px 12px rgba(0,0,0,.8); opacity:0; animation:fadeUp .7s .1s forwards}
.kicker-centered{text-align:center; width:100%; margin-bottom:18px}

h1{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(42px,6.4vw,88px); line-height:.95}
h1 span{display:block; opacity:0; animation:fadeUp .8s forwards}
h1 .l1{animation-delay:.2s}h1 .l2{animation-delay:.34s}
.chrome-silver{color:#fff; text-shadow:0 1px 0 #1c3050,0 2px 0 #15263e,0 3px 0 #102033,0 4px 0 #0b1726,0 7px 16px rgba(0,0,0,.6)}
.chrome-gold{background:linear-gradient(180deg,#fff9e8 0%,#f9dd8e 28%,#dca73a 50%,#f4cd68 64%,#fff5d4 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 1px 0 #b9791a,0 2px 0 #a86d14,0 3px 0 #93600f,0 4px 0 #7d5109,0 6px 12px rgba(0,0,0,.55)}
.sub{font-size:clamp(16px,1.35vw,19px); line-height:1.6; color:#f1f5f9; max-width:520px; margin:28px 0 32px;
  text-shadow:0 1px 8px rgba(0,0,0,.6); opacity:0; animation:fadeUp .8s .48s forwards}
.sub b{color:#fff; font-weight:700}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:fadeUp .8s .6s forwards}
.microtrust{margin-top:22px; font-size:14px; color:#cfd7e1; display:flex; align-items:center; gap:10px; text-shadow:0 1px 6px rgba(0,0,0,.6); opacity:0; animation:fadeUp .8s .72s forwards}
.stars{color:var(--gold-soft); letter-spacing:2px; font-size:15px}

/* hero mascot (home) */
.hero-mascot{position:absolute; right:clamp(-40px,2vw,80px); bottom:0; z-index:4; height:92%; max-height:760px; width:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45)); opacity:0; animation:mascotIn 1s .5s forwards; pointer-events:none}
@keyframes mascotIn{from{opacity:0; transform:translateY(30px)}to{opacity:1; transform:none}}

/* scrolling working parts */
.parts{position:absolute; left:0; right:0; top:22%; height:120px; z-index:2; opacity:.22; pointer-events:none; overflow:hidden}
.parts-track{display:flex; width:max-content; animation:drift 32s linear infinite}
.parts-row{display:flex; align-items:center; gap:100px; padding-right:100px}
.part{width:54px; height:54px; color:var(--gold); flex:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.part.steel{color:#d6dee7}
.gear{animation:spin 9s linear infinite}
.gear.rev{animation:spin 11s linear infinite reverse}
@keyframes drift{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════════ TRUST STRIP ════════ */
.trust{position:relative; z-index:5; background:var(--navy-2); border-top:1px solid rgba(232,160,32,.16);
  border-bottom:1px solid rgba(255,255,255,.05); display:grid; grid-template-columns:repeat(4,1fr)}
.trust-item{display:flex; gap:14px; align-items:flex-start; padding:26px clamp(16px,2.4vw,34px); border-right:1px solid rgba(255,255,255,.06)}
.trust-item:last-child{border-right:none}
.trust-item .ic{width:30px; height:30px; flex:none; color:var(--gold); margin-top:2px}
.trust-item b{font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:3px}
.trust-item span{font-size:13.5px; color:#9fabbb; line-height:1.4}

/* ════════ PAGE HERO (inner page banner) ════════ */
.pagehero{position:relative; padding:clamp(60px,9vw,120px) clamp(20px,5vw,64px) clamp(48px,7vw,90px); overflow:hidden;
  background:radial-gradient(120% 120% at 80% -10%, rgba(232,160,32,.16), transparent 55%), var(--navy)}
.pagehero::before{content:""; position:absolute; inset:0; background:var(--scene) center/cover no-repeat; opacity:.10; filter:grayscale(.3)}
.pagehero-inner{position:relative; z-index:2; max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:40px; justify-content:space-between}
.pagehero .kicker{color:var(--gold-soft); animation:none; opacity:1}
.pagehero h1{font-size:clamp(38px,5.6vw,72px); margin-top:10px}
.pagehero h1 span{animation:none; opacity:1; display:inline}
.pagehero p{color:#aab6c6; font-size:clamp(16px,1.4vw,19px); max-width:560px; margin-top:18px; line-height:1.6}
.pagehero-mascot{height:clamp(180px,24vw,300px); width:auto; flex:none; filter:drop-shadow(0 16px 26px rgba(0,0,0,.5))}

/* ════════ SECTION SCAFFOLD ════════ */
section{position:relative}
.wrap{max-width:1180px; margin:0 auto; padding:clamp(56px,8vw,104px) clamp(20px,5vw,64px)}
.wrap-tight{max-width:900px}
.eyebrow{font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:14px; margin-bottom:14px}
.eyebrow::after{content:""; flex:1; max-width:60px; height:1px; background:linear-gradient(90deg,var(--gold),transparent)}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{content:""; flex:1; max-width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--gold))}
h2{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(28px,4vw,46px); line-height:1.04; letter-spacing:.01em}
h2 em{font-style:normal; color:var(--gold)}
.lead{color:#aab6c6; font-size:clamp(16px,1.4vw,18px); line-height:1.65; margin-top:16px; max-width:620px}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lead{margin-left:auto; margin-right:auto}
.alt{background:var(--navy-2)}

/* ════════ STEP CARDS (how it works) ════════ */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px}
.step{position:relative; background:var(--navy-card); border:1px solid var(--navy-line); border-radius:14px; padding:34px 28px 30px; overflow:hidden}
.step::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--gold),transparent)}
.step-num{font-family:var(--display); font-weight:700; font-size:54px; line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(232,160,32,.55); margin-bottom:16px}
.step h3{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:21px; letter-spacing:.04em; margin-bottom:10px}
.step p{color:#9fabbb; font-size:15px; line-height:1.6}
.step .quip{margin-top:12px; font-style:italic; color:var(--gold-soft); font-size:14px}

/* ════════ FEATURE GRID (services tech) ════════ */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px}
.feat{background:var(--navy-card); border:1px solid var(--navy-line); border-radius:14px; padding:28px 24px; transition:transform .2s,border-color .2s}
.feat:hover{transform:translateY(-4px); border-color:rgba(232,160,32,.4)}
.feat-ic{font-size:30px; margin-bottom:14px; display:block}
.feat h3{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:17px; letter-spacing:.03em; margin-bottom:8px; color:#fff}
.feat p{color:#9fabbb; font-size:14.5px; line-height:1.58}
.feat p .pop{color:var(--gold-soft); font-style:italic}

/* ════════ PRICING TIERS ════════ */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; align-items:start}
.tier{position:relative; background:var(--navy-card); border:1px solid var(--navy-line); border-radius:16px; padding:34px 28px; display:flex; flex-direction:column}
.tier.feature{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 20px 50px -24px rgba(232,160,32,.5); transform:translateY(-8px)}
.tier-flag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(180deg,#f4d27a,#cf8a14); color:#3a2606;
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:6px 16px; border-radius:20px; white-space:nowrap}
.tier h3{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:20px; letter-spacing:.04em; margin-bottom:6px}
.tier .price{font-family:var(--display); font-weight:700; font-size:52px; line-height:1; margin:6px 0 4px; color:#fff}
.tier .price small{font-size:20px; color:var(--steel); font-weight:500}
.tier .price s{font-size:26px; color:#6b7a8d; margin-right:10px; font-weight:500}
.tier .price .now{color:var(--gold)}
.tier .tagline{color:#8b97a8; font-size:13.5px; margin-bottom:20px; min-height:20px}
.tier ul{list-style:none; margin:0 0 24px; display:flex; flex-direction:column; gap:11px; flex:1}
.tier li{font-size:14.5px; color:#c5cedb; line-height:1.45; padding-left:26px; position:relative}
.tier li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700}
.tier .btn{width:100%}
.tier-note{text-align:center; color:#7b8799; font-size:13px; margin-top:14px}

/* ════════ CHECKLIST (what we inspect) ════════ */
.checkgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px}
.checkcat{background:var(--navy-card); border:1px solid var(--navy-line); border-radius:14px; padding:26px 24px; border-left:3px solid var(--gold)}
.checkcat h4{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:16px; letter-spacing:.05em; color:#fff; margin-bottom:14px}
.checkcat ul{list-style:none; display:flex; flex-direction:column; gap:8px}
.checkcat li{font-size:14px; color:#a7b2c1; padding-left:18px; position:relative; line-height:1.4}
.checkcat li::before{content:"·"; position:absolute; left:2px; color:var(--gold); font-weight:700; font-size:18px; top:-2px}

/* ════════ ACCORDION (FAQ) ════════ */
.faqlist{margin-top:40px; display:flex; flex-direction:column; gap:12px}
details.faq{background:var(--navy-card); border:1px solid var(--navy-line); border-radius:12px; overflow:hidden; transition:border-color .2s}
details.faq[open]{border-color:rgba(232,160,32,.4)}
details.faq summary{cursor:pointer; list-style:none; padding:20px 24px; font-family:var(--display); font-weight:500; font-size:17px;
  color:#fff; display:flex; justify-content:space-between; align-items:center; gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--gold); font-size:24px; font-weight:300; flex:none; transition:transform .25s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .faq-body{padding:0 24px 22px; color:#a7b2c1; font-size:15px; line-height:1.65}
details.faq .faq-body p{margin-bottom:10px}

/* ════════ ABOUT / SPLIT ════════ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center}
.split-mascot{display:flex; justify-content:center}
.split-mascot img{height:clamp(320px,40vw,520px); width:auto; filter:drop-shadow(0 20px 34px rgba(0,0,0,.5))}
.quote{border-left:3px solid var(--gold); padding:6px 0 6px 24px; margin:26px 0; font-size:clamp(18px,1.7vw,22px);
  font-family:var(--display); font-weight:400; font-style:italic; color:#e8eef6; line-height:1.4}
.about-body p{color:#aeb9c8; font-size:16px; line-height:1.72; margin-bottom:16px}
.badges{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.badge{display:flex; align-items:center; gap:10px; background:var(--navy-card); border:1px solid var(--navy-line); border-radius:10px; padding:12px 18px}
.badge .n{font-family:var(--display); font-weight:700; font-size:24px; color:var(--gold)}
.badge .t{font-size:12px; color:#9fabbb; text-transform:uppercase; letter-spacing:.08em; line-height:1.2}

/* ════════ BOOK / CTA PANEL ════════ */
.bookpanel{background:var(--navy-card); border:1px solid var(--navy-line); border-radius:18px; padding:clamp(32px,5vw,56px); text-align:center; max-width:720px; margin:44px auto 0}
.bookpanel h3{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:24px; margin-bottom:12px}
.bookpanel p{color:#a7b2c1; font-size:16px; line-height:1.6; margin-bottom:26px}
.booksteps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; text-align:left}
.bookstep{display:flex; gap:14px; align-items:flex-start}
.bookstep .n{font-family:var(--display); font-weight:700; color:var(--gold); font-size:22px; flex:none; line-height:1.2}
.bookstep p{color:#a7b2c1; font-size:14.5px; line-height:1.55}
.contactline{text-align:center; margin-top:36px; color:#aab6c6; font-size:16px}
.contactline a{color:var(--gold-soft); text-decoration:none; font-weight:600}

/* ════════ PORTAL ════════ */
.portal{background:var(--navy-card); border:1px solid var(--navy-line); border-radius:16px; max-width:520px; margin:44px auto 0; overflow:hidden}
.portal-top{background:#16284a; padding:22px 28px; border-bottom:1px solid var(--navy-line); display:flex; align-items:center; gap:14px}
.portal-top img{width:42px; height:42px; object-fit:contain; background:#fff; border-radius:50%; padding:3px}
.portal-top h3{font-family:var(--display); font-weight:600; font-size:18px; color:#fff}
.portal-top p{font-size:12.5px; color:#9fabbb}
.portal-body{padding:28px}
.portal-body label{display:block; font-size:13px; color:#9fabbb; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px}
.portal-body input{width:100%; padding:14px 16px; background:#0c1828; border:1px solid var(--navy-line); border-radius:9px; color:#fff; font-size:16px; font-family:var(--body)}
.portal-body input:focus{outline:none; border-color:var(--gold)}
.portal-body .btn{width:100%; margin-top:16px}
.portal-note{font-size:13px; color:#7b8799; line-height:1.5; margin-top:16px; text-align:center}

/* ════════ FOOTER ════════ */
footer{background:#0a1320; border-top:1px solid rgba(232,160,32,.15); padding:clamp(46px,6vw,72px) clamp(20px,5vw,64px) 36px}
.foot-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.foot-brand img{width:150px; margin-bottom:16px}
.foot-brand p{color:#7e8b9c; font-size:14px; line-height:1.6; max-width:280px}
.foot-col h5{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:14px; letter-spacing:.08em; color:#fff; margin-bottom:16px}
.foot-col a{display:block; color:#8b97a8; text-decoration:none; font-size:14px; margin-bottom:10px; transition:color .2s}
.foot-col a:hover{color:var(--gold-soft)}
.foot-bottom{max-width:1180px; margin:40px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#67748a; font-size:13px}
.foot-bottom .tag{color:var(--gold-soft); font-style:italic}
.socials{display:flex; gap:14px; align-items:center; margin-top:18px}
.socials a{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); transition:background .2s,border-color .2s,transform .2s}
.socials a:hover{background:rgba(232,160,32,.15); border-color:rgba(232,160,32,.4); transform:translateY(-2px)}
.socials a svg{display:block}
/* home price callout */
.priceflag{display:inline-flex; align-items:baseline; gap:12px; margin-bottom:18px; font-family:var(--display)}
.priceflag s{font-size:26px; color:#6b7a8d; font-weight:500}
.priceflag b{font-size:46px; font-weight:700; color:var(--gold); line-height:1}
.priceflag .lbl{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,#f4d27a,#cf8a14); color:#3a2606; padding:5px 12px; border-radius:20px; align-self:center}
.trust-item .strike{text-decoration:line-through; color:#6b7a8d; font-weight:500; margin-right:6px}

/* ════════ MOBILE STICKY CTA ════════ */
.mobile-cta{display:none}

@keyframes fadeUp{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.parts-track,.gear,.hero-mascot{animation:none!important; opacity:1!important}h1 span,.kicker,.sub,.cta-row,.microtrust{opacity:1!important}}

/* ════════ RESPONSIVE ════════ */
@media (max-width:920px){
  .topbar{grid-template-columns:auto 1fr auto; justify-content:space-between; padding:16px clamp(14px,4vw,28px)}
  .topbar .topbar-tagline{display:none}
  .topbar .topnav{display:none}
  .topbar .menu-btn{grid-column:3; justify-self:end}
  .brand-logo{width:96px}
  .topnav{display:none}
  .siteheader{grid-template-columns:auto auto; gap:10px}
  .siteheader .topnav{display:none}
  .menu-btn{display:flex}
  .hero{align-items:flex-start; padding-top:108px; padding-bottom:40px}
  .hero-inner{padding-top:0}
  .hero-overlay{background:linear-gradient(180deg,rgba(7,14,26,.4),rgba(7,14,26,.55) 45%,rgba(7,14,26,.85))}
  .copy{max-width:none; text-align:center}
  .cta-row,.microtrust{justify-content:center}
  .sub{margin-left:auto;margin-right:auto}
  .parts{top:13%; opacity:.16}
  .hero-mascot{opacity:.30; height:74%; right:-70px}
  .pagehero-inner{flex-direction:column; text-align:center}
  .pagehero-mascot{order:-1}
  .pagehero .eyebrow{justify-content:center}
  .steps,.feat-grid,.tiers,.checkgrid,.booksteps{grid-template-columns:1fr}
  .tier.feature{transform:none}
  .split{grid-template-columns:1fr}
  .split-mascot{order:-1}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2){border-right:none}
  .trust-item:nth-child(1),.trust-item:nth-child(2){border-bottom:1px solid rgba(255,255,255,.06)}
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px}
  .mobile-cta{display:flex; position:fixed; z-index:200; left:14px; right:14px; bottom:14px; padding:16px; font-size:15px; border-radius:10px}
  body{padding-bottom:80px}
}
@media (max-width:560px){
  .feat-grid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .trust-item{border-right:none; border-bottom:1px solid rgba(255,255,255,.06)}
  .trust-item:last-child{border-bottom:none}
  .foot-grid{grid-template-columns:1fr}
  .tier .price{font-size:44px}
}

/* mobile slide menu */
.menu-btn span{display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s}
.mobilemenu{position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:#0c1828; z-index:300; transform:translateX(100%);
  transition:transform .3s ease; padding:90px 32px 32px; display:flex; flex-direction:column; gap:6px; border-left:1px solid rgba(232,160,32,.2)}
.mobilemenu.open{transform:none}
.mobilemenu a{font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:#dbe3ee;
  text-decoration:none; font-size:18px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06)}
.mobilemenu a:last-of-type{border:none}
.menu-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:250; opacity:0; pointer-events:none; transition:opacity .3s}
.menu-overlay.open{opacity:1; pointer-events:auto}
.menu-close{position:absolute; top:24px; right:28px; background:none; border:none; color:#fff; font-size:34px; cursor:pointer; line-height:1}