/* ============================================================
   VISION DRIVING SCHOOL — Shared Design System
   Palette: asphalt / chalk / amber / brake-red / steel
   Type:    Oswald (display) · Inter (body) · IBM Plex Mono (data)
   ============================================================ */

:root{
  --asphalt:#1a1d21;
  --asphalt-2:#24282e;
  --asphalt-3:#2e333a;
  --chalk:#f4f2ea;
  --amber:#f5a623;
  --amber-hi:#ffb544;
  --brake:#c1272d;
  --brake-hi:#e5484f;
  --green:#3fae5a;
  --steel:#7d8794;
  --steel-dim:#4a5158;
  --line-amber:rgba(245,166,35,0.14);
  --line-ink:rgba(26,29,33,0.1);
  --shadow-card:0 18px 40px rgba(26,29,33,0.12);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:88px;}
body{
  font-family:'Inter', sans-serif;
  background:var(--chalk);
  color:var(--asphalt);
  overflow-x:hidden;
  line-height:1.6;
}
h1,h2,h3,.disp{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.5px;
  line-height:1.1;
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%; height:auto;}
button{font:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

/* Accessibility */
:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:var(--asphalt); padding:12px 20px;
  font-weight:700; font-size:0.9rem;
}
.skip-link:focus{left:0;}

/* Signature: hazard stripe (kerb marking) */
.hazard{
  height:6px;
  background:repeating-linear-gradient(135deg, var(--amber) 0 14px, var(--asphalt) 14px 28px);
}

/* Signature: dashed centre-line divider */
.centre-line{
  height:3px; border:none; margin:0 auto; max-width:180px;
  background:repeating-linear-gradient(to right, var(--amber) 0 22px, transparent 22px 38px);
}

/* ---------- HEADER / NAV ---------- */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(26,29,33,0.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-amber);
  transition:box-shadow .3s;
}
header.site.scrolled{box-shadow:0 8px 30px rgba(0,0,0,0.35);}
nav.main{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; max-width:1180px; margin:0 auto; gap:20px;}
@media(max-width:640px){nav.main{padding:12px 20px;}}
.logo{color:var(--chalk); font-family:'Oswald'; font-weight:600; font-size:1.2rem; letter-spacing:1px; display:flex; align-items:center; gap:11px; flex-shrink:0;}
.logo .lplate{
  width:32px; height:32px; background:#fff; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald'; font-weight:700; font-size:1.25rem; color:var(--brake);
  box-shadow:0 0 0 2px rgba(255,255,255,0.15);
}
.logo .sub{color:var(--steel); font-weight:400;}
.navlinks{display:flex; gap:28px; align-items:center;}
.navlinks a{color:var(--steel); font-size:0.84rem; font-weight:500; text-transform:uppercase; letter-spacing:0.8px; transition:color .2s; padding:4px 0; position:relative;}
.navlinks a:hover{color:var(--chalk);}
.navlinks a[aria-current="page"]{color:var(--amber);}
.navlinks a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:repeating-linear-gradient(to right, var(--amber) 0 8px, transparent 8px 14px);
}
.navcta{background:var(--amber); color:var(--asphalt) !important; padding:10px 20px; font-weight:700; font-size:0.8rem;}
.navcta:hover{background:var(--amber-hi);}
.navcta::after{display:none !important;}
.navtoggle{display:none; color:var(--chalk); font-size:1.5rem; background:none; border:none; cursor:pointer; line-height:1; padding:4px 8px;}
@media(max-width:960px){
  .navlinks{
    position:fixed; top:61px; left:0; right:0; background:var(--asphalt);
    flex-direction:column; padding:26px 32px 30px; gap:20px;
    transform:translateY(-140%); transition:transform .3s ease;
    border-bottom:1px solid var(--line-amber); align-items:flex-start;
  }
  .navlinks.open{transform:translateY(0);}
  .navtoggle{display:block;}
}
@media(max-width:640px){
  .navlinks{top:57px;}
}

/* ---------- HERO (home) ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(20,22,25,0.35) 0%, rgba(15,16,18,0.9) 88%), url('https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?q=80&w=1740&auto=format&fit=crop') center 30%/cover no-repeat;
  padding:170px 0 100px;
}
.hero-inner{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 32px; width:100%;}
@media(max-width:640px){.hero-inner{padding:0 20px;}}
.eyebrow{
  color:var(--amber); font-family:'IBM Plex Mono'; font-size:0.8rem; letter-spacing:2px; text-transform:uppercase;
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.eyebrow::before{content:''; width:34px; height:2px; background:var(--amber); flex-shrink:0;}
.eyebrow.red{color:var(--brake);}
.eyebrow.red::before{background:var(--brake);}
.bg-dark .eyebrow.red, .bg-dark2 .eyebrow.red, .skid .eyebrow.red{color:var(--brake-hi);}
.bg-dark .eyebrow.red::before, .bg-dark2 .eyebrow.red::before, .skid .eyebrow.red::before{background:var(--brake-hi);}
.hero h1{color:var(--chalk); font-size:clamp(2.6rem, 6vw, 5rem); font-weight:600; max-width:820px; line-height:1.02;}
.hero h1 em{font-style:normal; color:var(--amber);}
.hero p{color:#c8ccd1; font-size:1.15rem; max-width:540px; margin:26px 0 36px; line-height:1.65;}
.btnrow{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:16px 30px; font-family:'Oswald'; font-weight:600;
  text-transform:uppercase; font-size:0.88rem; letter-spacing:1px;
  transition:transform .2s, background .2s, border-color .2s;
  border:none; cursor:pointer;
}
.btn-primary{background:var(--amber); color:var(--asphalt);}
.btn-primary:hover{transform:translateY(-2px); background:var(--amber-hi);}
.btn-ghost{border:1.5px solid rgba(244,242,234,0.4); color:var(--chalk); background:transparent;}
.btn-ghost:hover{border-color:var(--chalk); transform:translateY(-2px);}
.btn-dark{background:var(--asphalt); color:var(--chalk);}
.btn-dark:hover{transform:translateY(-2px); background:var(--asphalt-3);}

/* Hero animated road line */
.hero-road{
  position:absolute; left:0; right:0; bottom:0; height:4px; z-index:3;
  background:repeating-linear-gradient(to right, var(--amber) 0 40px, transparent 40px 70px);
  animation:roadmove 2.2s linear infinite;
  opacity:0.85;
}
@keyframes roadmove{from{background-position:0 0;} to{background-position:70px 0;}}

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{
  background:linear-gradient(180deg, rgba(20,22,25,0.72), rgba(15,16,18,0.92)), var(--asphalt);
  background-size:cover; background-position:center;
  padding:170px 0 80px; position:relative;
}
.page-hero .crumbs{
  font-family:'IBM Plex Mono'; font-size:0.78rem; letter-spacing:1px;
  color:var(--steel); text-transform:uppercase; margin-bottom:18px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.page-hero .crumbs a:hover{color:var(--amber);}
.page-hero .crumbs .sep{color:var(--steel-dim);}
.page-hero .crumbs [aria-current]{color:var(--amber);}
.page-hero h1{color:var(--chalk); font-size:clamp(2.2rem, 5vw, 3.6rem); font-weight:600; max-width:760px;}
.page-hero p.lead{color:#c8ccd1; font-size:1.1rem; max-width:580px; margin-top:20px; line-height:1.65;}

/* ---------- BADGES ---------- */
.badges{background:var(--asphalt); padding:26px 0; border-top:1px solid rgba(245,166,35,0.1);}
.badges-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:22px;}
.badge{display:flex; align-items:center; gap:10px; color:var(--steel); font-size:0.82rem; letter-spacing:0.5px; text-transform:uppercase; font-family:'IBM Plex Mono';}
.badge svg{width:20px; height:20px; color:var(--amber); flex-shrink:0;}

/* ---------- STATS ---------- */
.stats{background:var(--asphalt);}
.stats-inner{
  max-width:1180px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-amber);
}
.stat{padding:34px 20px; border-right:1px solid rgba(245,166,35,0.12); text-align:center;}
.stat:last-child{border-right:none;}
.stat .num{font-family:'IBM Plex Mono'; color:var(--amber); font-size:2.1rem; font-weight:500;}
.stat .lbl{color:var(--steel); font-size:0.78rem; text-transform:uppercase; letter-spacing:1px; margin-top:6px;}
@media(max-width:700px){
  .stats-inner{grid-template-columns:repeat(2,1fr);}
  .stat{padding:26px 12px;}
  .stat:nth-child(2){border-right:none;}
}

/* ---------- SECTIONS ---------- */
section{position:relative; padding:110px 0;}
@media(max-width:640px){section{padding:80px 0;}}
.section-head{max-width:640px; margin:0 auto 64px; text-align:center;}
.section-head .eyebrow{justify-content:center;}
.section-head h2{font-size:clamp(1.9rem,4vw,2.8rem); font-weight:600;}
.section-head p{color:var(--steel-dim); margin-top:16px; font-size:1.05rem;}
.on-dark .section-head h2{color:var(--chalk);}
.on-dark .section-head p{color:var(--steel);}
.bg-chalk{background:var(--chalk);}
.bg-dark{background:var(--asphalt);}
.bg-dark2{background:var(--asphalt-2);}

/* ---------- COURSE CARDS ---------- */
.course-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:900px){.course-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.course-grid{grid-template-columns:1fr;}}
.course-card{
  background:#fff; border:1px solid rgba(26,29,33,0.08);
  transition:transform .25s, box-shadow .25s; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.course-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}
.course-card .thumb{width:100%; height:190px; object-fit:cover; filter:saturate(1.05);}
.course-card .body{padding:26px 28px 28px; display:flex; flex-direction:column; flex-grow:1;}
.course-card .code{font-family:'IBM Plex Mono'; color:var(--brake); font-size:0.8rem; letter-spacing:1px;}
.course-card h3{font-size:1.3rem; margin:14px 0 12px; font-weight:600;}
.course-card p{color:var(--steel-dim); font-size:0.94rem; margin-bottom:18px; flex-grow:1;}
.course-card .meta{display:flex; justify-content:space-between; border-top:1px dashed rgba(26,29,33,0.15); padding-top:16px; font-size:0.82rem; color:var(--steel-dim);}
.course-card .meta b{color:var(--asphalt); font-family:'IBM Plex Mono'; font-weight:500;}
.course-card .cardlink{margin-top:16px; font-family:'Oswald'; font-weight:600; text-transform:uppercase; font-size:0.82rem; letter-spacing:1px; color:var(--brake); display:inline-flex; align-items:center; gap:8px;}
.course-card .cardlink:hover{color:var(--amber);}

/* Detailed course rows (courses page) */
.course-row{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; align-items:center;
  padding:64px 0; border-bottom:1px dashed rgba(26,29,33,0.18);
}
.course-row:last-child{border-bottom:none;}
.course-row:nth-child(even){grid-template-columns:1.1fr 0.9fr;}
.course-row:nth-child(even) .course-row-media{order:2;}
@media(max-width:820px){
  .course-row, .course-row:nth-child(even){grid-template-columns:1fr;}
  .course-row:nth-child(even) .course-row-media{order:0;}
}
.course-row-media{position:relative;}
.course-row-media img{width:100%; height:320px; object-fit:cover;}
.course-row-media .tag{
  position:absolute; top:0; left:0; background:var(--asphalt); color:var(--amber);
  font-family:'IBM Plex Mono'; font-size:0.78rem; letter-spacing:1px; padding:10px 16px;
}
.course-row h3{font-size:1.6rem; font-weight:600; margin-bottom:14px;}
.course-row p{color:var(--steel-dim); font-size:0.98rem; margin-bottom:18px;}
.course-facts{display:flex; gap:26px; flex-wrap:wrap; margin-bottom:22px;}
.course-facts div{font-size:0.82rem; color:var(--steel-dim);}
.course-facts b{display:block; font-family:'IBM Plex Mono'; color:var(--asphalt); font-size:0.95rem; font-weight:500; margin-top:2px;}

/* ---------- ROUTE STEPPER (process) ---------- */
.route-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; counter-reset:step;}
.route-steps.cols-3{grid-template-columns:repeat(3,1fr); max-width:900px; margin:0 auto;}
@media(max-width:820px){.route-steps, .route-steps.cols-3{grid-template-columns:1fr; max-width:420px; margin:0 auto;}}
.route-step{padding:0 26px 0 0; position:relative;}
@media(max-width:820px){.route-step{padding:0 0 40px 0;}}
.route-step .dot{
  width:44px; height:44px; border-radius:50%; background:var(--amber); color:var(--asphalt);
  font-family:'IBM Plex Mono'; font-weight:600; font-size:1rem;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  box-shadow:0 0 0 6px rgba(245,166,35,0.15); position:relative; z-index:2;
}
.route-step::before{
  content:''; position:absolute; top:21px; left:44px; right:0; height:2px;
  background:repeating-linear-gradient(to right, var(--steel) 0 14px, transparent 14px 24px);
  opacity:0.5;
}
.route-step:last-child::before{display:none;}
@media(max-width:820px){.route-step::before{display:none;}}
.route-step h3{font-size:1.05rem; font-weight:600; margin-bottom:8px;}
.route-step p{color:var(--steel-dim); font-size:0.9rem;}
.on-dark .route-step h3{color:var(--chalk);}
.on-dark .route-step p{color:var(--steel);}

/* ---------- GALLERY ---------- */
.gallery{background:var(--asphalt); padding:70px 0;}
.gallery-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; flex-wrap:wrap; gap:16px;}
.gallery-head h3, .gallery-head h2{color:var(--chalk); font-size:1.6rem; font-weight:600;}
.gallery-head p{color:var(--steel); font-size:0.92rem; max-width:340px;}
.gallery-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
@media(max-width:900px){.gallery-strip{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.gallery-strip{grid-template-columns:repeat(2,1fr);}}
.g-item{width:100%; height:190px; overflow:hidden; display:block;}
.g-item img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease; filter:grayscale(0.15);}
.g-item:hover img{transform:scale(1.08); filter:grayscale(0);}

/* ---------- SKID SECTION ---------- */
.skid{background:var(--asphalt); color:var(--chalk); overflow:hidden;}
.skid-inner{
  max-width:1180px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;
}
@media(max-width:900px){.skid-inner{grid-template-columns:1fr;}}
@media(max-width:640px){.skid-inner{padding:0 20px;}}
.skid h2{font-size:clamp(2rem,4vw,2.9rem); font-weight:600; color:var(--chalk);}
.skid h2 em{font-style:normal; color:var(--brake-hi);}
.skid p.lead{color:#c8ccd1; font-size:1.05rem; line-height:1.7; margin:22px 0 30px;}
.skid-list{display:flex; flex-direction:column; gap:16px; margin-bottom:34px; list-style:none;}
.skid-list li{display:flex; gap:14px; align-items:flex-start; color:#d8dbdf; font-size:0.95rem; line-height:1.5;}
.skid-list .tick{color:var(--brake-hi); font-family:'IBM Plex Mono'; font-weight:600; flex-shrink:0;}
.skid-media{position:relative;}
.skid-media img{width:100%; height:520px; object-fit:cover; filter:saturate(1.05) contrast(1.05);}
@media(max-width:640px){.skid-media img{height:380px;}}
.skid-tag{
  position:absolute; bottom:-1px; left:-1px; background:var(--brake); color:var(--chalk);
  padding:16px 22px; font-family:'Oswald'; font-weight:600; text-transform:uppercase; font-size:0.85rem; letter-spacing:1px;
}
.skid-frame{position:absolute; inset:0; border:1px solid rgba(245,166,35,0.3); transform:translate(14px,14px); z-index:0;}
.skid-media img{position:relative; z-index:1;}

/* Drill cards (skid page) */
.drill-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
@media(max-width:760px){.drill-grid{grid-template-columns:1fr;}}
.drill{background:var(--asphalt-2); border:1px solid var(--line-amber); padding:32px 30px; position:relative; overflow:hidden;}
.drill::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:repeating-linear-gradient(135deg, var(--brake) 0 12px, transparent 12px 24px);}
.drill .code{font-family:'IBM Plex Mono'; color:var(--brake-hi); font-size:0.8rem; letter-spacing:1px;}
.drill h3{color:var(--chalk); font-size:1.15rem; font-weight:600; margin:12px 0 10px;}
.drill p{color:var(--steel); font-size:0.92rem;}

/* ---------- WHY ---------- */
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media(max-width:860px){.why-grid{grid-template-columns:1fr; gap:40px;}}
.why-media{position:relative;}
.why-media img{width:100%; height:460px; object-fit:cover;}
@media(max-width:640px){.why-media img{height:340px;}}
.why-media::after{content:''; position:absolute; inset:0; border:1px solid rgba(26,29,33,0.15); transform:translate(-14px,14px); z-index:-1;}
.why-copy h2{font-size:clamp(1.8rem,3.6vw,2.5rem); font-weight:600; margin-bottom:20px;}
.why-copy > p{color:var(--steel-dim); font-size:1rem; line-height:1.7; margin-bottom:24px;}
.why-points{display:grid; gap:20px;}
.why-point{display:flex; gap:16px;}
.why-point .n{font-family:'IBM Plex Mono'; color:var(--amber); font-weight:500; font-size:1.1rem; flex-shrink:0;}
.why-point h4{font-size:1rem; font-weight:600; margin-bottom:4px; text-transform:none; font-family:'Inter';}
.why-point p{color:var(--steel-dim); font-size:0.9rem; margin:0; line-height:1.5;}

/* ---------- VALUES (about) ---------- */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media(max-width:820px){.value-grid{grid-template-columns:1fr;}}
.value{background:#fff; border:1px solid var(--line-ink); padding:34px 30px;}
.value .n{font-family:'IBM Plex Mono'; color:var(--brake); font-size:0.85rem; letter-spacing:1px;}
.value h3{font-size:1.15rem; font-weight:600; margin:12px 0 10px;}
.value p{color:var(--steel-dim); font-size:0.92rem;}

/* ---------- INSTRUCTORS ---------- */
.inst-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:860px){.inst-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;}}
.inst-card{background:var(--asphalt); border:1px solid rgba(245,166,35,0.1); transition:transform .25s, border-color .25s;}
.inst-card:hover{transform:translateY(-5px); border-color:rgba(245,166,35,0.35);}
.inst-card img{width:100%; height:300px; object-fit:cover; filter:grayscale(0.3); transition:filter .3s;}
.inst-card:hover img{filter:grayscale(0);}
.inst-body{padding:22px 24px;}
.inst-body h3{color:var(--chalk); font-size:1.1rem; font-weight:600; text-transform:none; font-family:'Inter';}
.inst-body .role{color:var(--amber); font-family:'IBM Plex Mono'; font-size:0.78rem; margin:6px 0 12px;}
.inst-body p{color:var(--steel); font-size:0.88rem; line-height:1.5;}

/* ---------- INSTRUCTOR FEATURE ---------- */
.inst-feature{display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:center; max-width:940px; margin:0 auto;}
@media(max-width:860px){.inst-feature{grid-template-columns:1fr; max-width:420px; text-align:center;}}
.inst-feature-badge img{width:100%; height:auto; display:block; border-radius:50%; border:4px solid rgba(245,166,35,0.5); box-shadow:0 16px 40px rgba(0,0,0,0.35);}
.inst-feature-body h3{color:var(--chalk); font-size:1.6rem; font-weight:600; text-transform:none; font-family:'Inter';}
.inst-feature-body .role{color:var(--amber); font-family:'IBM Plex Mono'; font-size:0.85rem; margin:8px 0 16px;}
.inst-feature-body p{color:var(--steel); font-size:0.95rem; line-height:1.7;}
@media(max-width:860px){.inst-feature .btnrow{justify-content:center;}}

/* ---------- RECENT PASSES GALLERY ---------- */
.pass-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
@media(max-width:1000px){.pass-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.pass-grid{grid-template-columns:repeat(2,1fr);}}
.pass-card{margin:0; overflow:hidden; background:#fff; border:1px solid rgba(26,29,33,0.1); box-shadow:0 8px 24px rgba(26,29,33,0.06);}
.pass-card img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .35s ease;}
.pass-card:hover img{transform:scale(1.05);}

/* ---------- TESTIMONIALS ---------- */
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:860px){.test-grid{grid-template-columns:1fr;}}
.test-card{background:#fff; border-left:3px solid var(--amber); padding:30px 26px; box-shadow:0 10px 30px rgba(26,29,33,0.05);}
.test-card .stars{color:var(--amber); letter-spacing:2px; margin-bottom:14px; font-size:0.9rem;}
.test-card blockquote{font-size:0.96rem; line-height:1.65; color:var(--asphalt); margin-bottom:18px; border:none;}
.test-card .who{font-family:'IBM Plex Mono'; font-size:0.8rem; color:var(--steel-dim); display:flex; align-items:center; gap:10px;}
.test-card .who img{width:34px; height:34px; border-radius:50%; object-fit:cover;}

/* ---------- PRICING ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch;}
@media(max-width:900px){.price-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;}}
.price-card{background:var(--asphalt); border:1px solid rgba(245,166,35,0.12); padding:38px 30px; display:flex; flex-direction:column; position:relative;}
.price-card.featured{border-color:var(--amber);}
.price-card.featured::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:repeating-linear-gradient(135deg, var(--amber) 0 12px, var(--asphalt) 12px 24px);
}
.price-card .pop{
  position:absolute; top:-13px; right:20px; background:var(--amber); color:var(--asphalt);
  font-family:'Oswald'; font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:6px 14px;
}
.price-card h3{color:var(--chalk); font-size:1.2rem; font-weight:600; margin-bottom:6px;}
.price-card .tagline{color:var(--steel); font-size:0.85rem;}
.price-card .price{font-family:'IBM Plex Mono'; color:var(--amber); font-size:2.2rem; margin:14px 0;}
.price-card .price span{color:var(--steel); font-size:0.9rem;}
.price-card ul{list-style:none; margin:18px 0 30px; flex-grow:1;}
.price-card li{color:var(--steel); font-size:0.9rem; padding:9px 0; border-top:1px dashed rgba(245,166,35,0.12); display:flex; gap:10px;}
.price-card li:first-child{border-top:none;}
.price-card li::before{content:'✓'; color:var(--amber); font-weight:700;}
.price-card .btn{text-align:center;}
.price-card .btn-ghost{color:var(--chalk); border-color:rgba(244,242,234,0.3);}

/* Rate table */
.rate-table{width:100%; border-collapse:collapse; background:#fff; box-shadow:0 10px 30px rgba(26,29,33,0.06);}
.rate-table th{
  background:var(--asphalt); color:var(--chalk); font-family:'Oswald'; font-weight:600;
  text-transform:uppercase; letter-spacing:1px; font-size:0.82rem; padding:16px 20px; text-align:left;
}
.rate-table td{padding:15px 20px; border-bottom:1px solid var(--line-ink); font-size:0.94rem; color:var(--steel-dim);}
.rate-table td:last-child{font-family:'IBM Plex Mono'; color:var(--asphalt); font-weight:500; white-space:nowrap;}
.rate-table tr:last-child td{border-bottom:none;}
.table-scroll{overflow-x:auto;}

/* Guarantee band */
.guarantee{
  display:flex; gap:22px; align-items:flex-start; background:#fff;
  border:1px solid var(--line-ink); border-left:4px solid var(--green);
  padding:30px 32px; max-width:820px; margin:56px auto 0;
}
.guarantee svg{width:34px; height:34px; color:var(--green); flex-shrink:0;}
.guarantee h3{font-size:1.05rem; font-weight:600; margin-bottom:6px;}
.guarantee p{color:var(--steel-dim); font-size:0.92rem;}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px; margin:0 auto;}
.faq-cat{font-family:'IBM Plex Mono'; color:var(--brake); font-size:0.8rem; letter-spacing:2px; text-transform:uppercase; margin:48px 0 8px;}
.faq-cat:first-child{margin-top:0;}
.faq-item{border-bottom:1px solid rgba(26,29,33,0.12);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:'Inter'; font-weight:600; font-size:1rem; color:var(--asphalt);
}
.faq-q .plus{font-family:'IBM Plex Mono'; color:var(--amber); font-size:1.2rem; flex-shrink:0; transition:transform .25s;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{color:var(--steel-dim); font-size:0.94rem; line-height:1.65; padding-bottom:22px; max-width:640px;}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:linear-gradient(180deg, rgba(20,22,25,0.55), rgba(15,16,18,0.92)), url('https://images.unsplash.com/photo-1502877338535-766e1452684a?q=80&w=1740&auto=format&fit=crop') center/cover;
  padding:110px 0; text-align:center;
}
.cta-band h2{color:var(--chalk); font-size:clamp(2rem,4vw,2.9rem); font-weight:600; margin-bottom:18px;}
.cta-band p{color:#c8ccd1; max-width:520px; margin:0 auto 34px; font-size:1.05rem;}
.cta-band .btnrow{justify-content:center;}

/* ---------- CONTACT / FORM ---------- */
.contact-wrap{
  display:grid; grid-template-columns:1fr 1fr; background:var(--asphalt);
  max-width:1000px; margin:0 auto; box-shadow:0 30px 60px rgba(26,29,33,0.25);
}
@media(max-width:800px){.contact-wrap{grid-template-columns:1fr;}}
.contact-info{
  padding:48px 40px; color:var(--chalk); position:relative;
  background:linear-gradient(160deg, rgba(193,39,45,0.14), rgba(26,29,33,0));
  border-right:1px solid rgba(245,166,35,0.1);
}
@media(max-width:640px){.contact-info{padding:36px 26px;}}
.contact-info h2, .contact-info h3{font-size:1.4rem; font-weight:600; margin-bottom:16px; color:var(--chalk);}
.contact-info > p{color:var(--steel); font-size:0.92rem; line-height:1.6; margin-bottom:26px;}
.contact-line{display:flex; gap:12px; align-items:center; color:var(--chalk); font-size:0.92rem; margin-bottom:16px;}
.contact-line svg{width:18px; height:18px; color:var(--amber); flex-shrink:0;}
.contact-line a:hover{color:var(--amber);}
.contact-form{padding:48px 40px; background:#fff;}
@media(max-width:640px){.contact-form{padding:36px 26px;}}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:480px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.6px; color:var(--steel-dim); margin-bottom:6px; font-family:'IBM Plex Mono';}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid rgba(26,29,33,0.15);
  background:var(--chalk); font-family:'Inter'; font-size:0.92rem; color:var(--asphalt);
}
.field textarea{resize:vertical; min-height:110px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--amber); outline-offset:1px;}
.contact-form .btn{width:100%; margin-top:6px;}
.form-note{font-size:0.78rem; color:var(--steel-dim); margin-top:12px; text-align:center;}

/* Coverage chips */
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:760px; margin:0 auto;}
.chip{
  font-family:'IBM Plex Mono'; font-size:0.82rem; letter-spacing:0.5px;
  border:1px solid rgba(26,29,33,0.2); padding:9px 18px; color:var(--steel-dim); background:#fff;
}

/* ---------- FLOATING BUTTONS ---------- */
.float-btns{position:fixed; right:22px; bottom:22px; z-index:90; display:flex; flex-direction:column; gap:12px; align-items:flex-end;}
.fab{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,0.25); transition:transform .2s; border:none; cursor:pointer;}
.fab:hover{transform:translateY(-3px);}
.fab-whatsapp{background:#25D366;}
.fab-whatsapp svg{width:26px; height:26px; fill:#fff;}
.fab-top{background:var(--asphalt); border:1px solid rgba(245,166,35,0.3); color:var(--amber); font-size:1.1rem; opacity:0; pointer-events:none; transition:opacity .25s, transform .2s;}
.fab-top.show{opacity:1; pointer-events:auto;}

/* ---------- FOOTER ---------- */
footer.site{background:var(--asphalt); color:var(--steel); padding:0 0 30px;}
footer.site .hazard{margin-bottom:60px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(245,166,35,0.1);}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid h4{color:var(--chalk); font-family:'Oswald'; font-size:0.9rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:16px;}
.foot-grid a, .foot-grid p{display:block; font-size:0.88rem; margin-bottom:10px; color:var(--steel);}
.foot-grid a:hover{color:var(--amber);}
.foot-bottom{display:flex; justify-content:space-between; padding-top:26px; font-size:0.8rem; flex-wrap:wrap; gap:10px;}

/* ---------- 404 ---------- */
.err-hero{min-height:100vh; display:flex; align-items:center; background:var(--asphalt); text-align:center;}
.err-hero .sign{
  width:130px; height:130px; border-radius:50%; border:10px solid var(--brake);
  background:#fff; color:var(--asphalt); font-family:'Oswald'; font-weight:700; font-size:2.4rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 34px;
}
.err-hero h1{color:var(--chalk); font-size:clamp(2rem,5vw,3.2rem); font-weight:600; margin-bottom:16px;}
.err-hero p{color:var(--steel); max-width:440px; margin:0 auto 32px;}

/* ---------- ANIMATED CAR (signature motion) ---------- */
.hero-car{
  position:absolute; bottom:10px; left:6%; width:min(230px, 34vw); z-index:4;
  animation:driveIn 1.9s cubic-bezier(.22,.9,.35,1) both;
  animation-delay:.2s;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,0.45));
  pointer-events:none;
}
.hero-car svg{width:100%; height:auto; display:block; overflow:visible;}
@media(max-width:640px){.hero-car{width:150px; left:4%; bottom:8px;}}
.car-bob{animation:bob 1.5s ease-in-out infinite;}
.wheel-spin{
  transform-box:fill-box; transform-origin:center;
  animation:spin .8s linear infinite;
}
.beam{animation:beamPulse 2.6s ease-in-out infinite;}
@keyframes driveIn{
  0%{transform:translateX(-70vw);}
  100%{transform:translateX(0);}
}
@keyframes bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-2.5px);}
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes beamPulse{
  0%,100%{opacity:0.45;}
  50%{opacity:0.7;}
}

/* Scroll progress road (injected by main.js on every page) */
.scroll-road{position:fixed; top:0; left:0; right:0; height:4px; z-index:130; pointer-events:none;}
.scroll-road-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--brake), var(--amber) 60%);
}
.scroll-road-car{
  position:absolute; top:2px; left:0; width:32px;
  will-change:transform;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,0.35));
}
.scroll-road-car svg{width:100%; height:auto; display:block;}
.scroll-road-car .wheel-spin{animation:none;}
.scroll-road-car.driving .wheel-spin{animation:spin .45s linear infinite;}

/* ---------- REVEAL / MOTION ---------- */
.js .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.js .reveal.show{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  .js .reveal{opacity:1; transform:none;}
}