/* Prime Time Driving School mockup. Tokens first; everything below reads from them. */
@font-face{font-family:'Overpass';font-style:normal;font-weight:700 900;font-display:swap;src:url(fonts/Overpass-var.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/AtkinsonHyperlegible-400.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/AtkinsonHyperlegible-700.woff2) format('woff2')}
:root{
  --red:#F21C1C;        /* brand red, from logo; fills only */
  --red-ink:#D0161B;    /* text-safe red: 5.5:1 on white */
  --blue:#3A6AAA;       /* brand blue, from logo: 5.5:1 with white */
  --navy:#17305A;       /* dark of brand blue: body text, dark bands */
  --verge:#DCE5D3;      /* grass verge beside the road: hero + find-us */
  --paper:#F7F8F5;
  --white:#fff;
  --asphalt:#34383D;
  --lane:#F5C518;       /* lane-line yellow */
  --muted:#4A5D7A;      /* secondary text: 6.6:1 on paper */

  --display:'Overpass',system-ui,sans-serif;
  --body:'Atkinson Hyperlegible',system-ui,sans-serif;

  --t-xs:.875rem; --t-s:1rem; --t-m:1.1875rem; --t-l:1.5rem; --t-xl:2.25rem;
  --t-hero:clamp(2.25rem,4.6vw,3.75rem);
  --gutter:clamp(18px,4vw,48px);
  --wrap:1180px;
  --radius:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:var(--t-m);line-height:1.55;color:var(--navy);background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--lane);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-l);line-height:1.15}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.0625rem;line-height:1;padding:16px 24px 14px;border-radius:var(--radius);text-decoration:none;border:2px solid transparent;transition:background .15s,color .15s,border-color .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red-ink);color:#fff}
.btn-red:hover{background:#B01216}
.btn-line{border-color:var(--navy);color:var(--navy)}
.btn-line:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--lane)}
.btn svg{width:18px;height:18px;flex:none}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--gutter);background:var(--verge)}
.word{font-family:var(--display);font-weight:900;font-size:1.4rem;line-height:.95;letter-spacing:-.01em;text-decoration:none;color:var(--red-ink)}
.word span{display:block;color:var(--blue);font-size:.8125rem;font-weight:800;letter-spacing:.01em;margin-top:3px}
.nav ul{display:flex;gap:26px;list-style:none;font-weight:700;font-size:var(--t-s)}
.nav ul a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav ul a:hover{border-color:var(--red-ink)}
.nav .btn{padding:13px 18px 11px}
.nav .call-sm{display:none}
@media (max-width:900px){
  .nav ul{display:none}
  .nav .btn-red{display:none}
  .nav .call-sm{display:inline-flex}
}

/* Hero: the road from permit to road test */
.hero{background:var(--verge);position:relative;overflow:hidden}
.hero-copy{position:relative;z-index:2;padding-top:clamp(12px,3vw,36px)}
.hero h1{font-size:var(--t-hero);max-width:15ch}
.hero .sub{margin:16px 0 26px;max-width:44ch}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.road{width:100%;height:auto;margin-top:-30px}
.road-m{display:none}
.road .stop{cursor:pointer}
.road .stop circle{transition:r .15s,fill .15s}
.road .stop:hover circle,.road .stop:focus-visible circle{fill:var(--lane)}
.road .stop text{font-family:var(--display);font-weight:800;font-size:23px;fill:var(--navy)}
.road .stop .n{fill:var(--blue)}
.road .stop.last text{fill:var(--red-ink)}
.road .stop:hover text{text-decoration:underline}
.road .stop .lbl-sub{fill:var(--muted);font-family:var(--body);font-weight:400;font-size:17px}
.car{animation:drive 3.6s cubic-bezier(.45,0,.2,1) .5s both}
.road-d .car{offset-path:path("M -40 300 C 200 300, 260 120, 470 140 S 760 330, 960 260 S 1200 80, 1400 110");offset-rotate:auto}
.road-m .car{offset-path:path("M 46 -20 C 100 90, -4 170, 46 280 S 96 470, 46 600");offset-rotate:auto}
@keyframes drive{from{offset-distance:0%}to{offset-distance:var(--park,78%)}}
.road-d{--park:76.5%}
.road-m{--park:83%}
@media (max-width:760px){
  .road-d{display:none}
  .road-m{display:block;margin-top:8px;max-width:460px}
}
@media (prefers-reduced-motion:reduce){.car{animation:none;offset-distance:var(--park)}}

/* Under-hero strip: who, where, how */
.strip{background:var(--navy);color:#fff}
.strip .wrap{display:flex;flex-wrap:wrap;gap:10px 40px;align-items:center;padding-top:18px;padding-bottom:18px;font-size:var(--t-s)}
.strip a{color:#fff;font-weight:700;text-decoration-color:var(--lane);text-underline-offset:4px}
.strip strong{font-family:var(--display);font-weight:800}

/* The four stops, in detail. A road line runs down the left. */
.steps{padding-block:clamp(56px,8vw,104px)}
.steps-head{max-width:30ch;margin-bottom:48px}
.steps-head p{margin-top:12px;color:var(--muted)}
.stoplist{list-style:none;position:relative;padding-left:72px}
.stoplist:before{content:"";position:absolute;left:18px;top:8px;bottom:8px;width:22px;background:var(--asphalt);border-radius:11px}
.stoplist:after{content:"";position:absolute;left:28px;top:20px;bottom:20px;width:2px;background:repeating-linear-gradient(var(--lane) 0 14px,transparent 14px 26px)}
.stopitem{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px 56px;padding:8px 0 56px;scroll-margin-top:20px}
.stopitem:last-child{padding-bottom:0}
.stopitem .pin{position:absolute;left:-63px;top:2px;width:26px;height:26px;border-radius:50%;background:#fff;border:5px solid var(--navy);z-index:1}
.stopitem.final .pin{border-color:var(--red-ink)}
.stopitem .num{font-family:var(--display);font-weight:800;color:var(--blue);font-size:var(--t-s)}
.stopitem h3{margin-top:2px}
.stopitem .lead{margin-top:10px}
.stopitem .detail{border-left:3px solid var(--verge);padding-left:24px}
.detail ul{list-style:none;display:grid;gap:10px}
.detail li{padding-left:22px;position:relative}
.detail li:before{content:"";position:absolute;left:0;top:.62em;width:10px;height:3px;background:var(--lane)}
.price{display:flex;gap:10px;align-items:baseline;margin-top:18px;font-family:var(--display);font-weight:800}
.price b{font-size:var(--t-xl);color:var(--navy);letter-spacing:-.02em}
.price span{font-weight:700;color:var(--muted);font-size:var(--t-s)}
.stopitem .btn{margin-top:20px}
.doc{font-family:var(--display);font-weight:800;background:#fff;border:2px solid var(--navy);border-radius:4px;padding:1px 6px;font-size:.9em;white-space:nowrap}
@media (max-width:820px){
  .stoplist{padding-left:54px}
  .stoplist:before{left:8px;width:18px}
  .stoplist:after{left:16px}
  .stopitem{grid-template-columns:minmax(0,1fr)}
  .stopitem .pin{left:-55px;width:24px;height:24px}
  .stopitem .detail{border-left:0;padding-left:0}
}

/* Packages */
.packs{background:#fff;padding:clamp(56px,8vw,96px) 0;border-top:6px solid var(--lane)}
.packs-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:36px}
.packs-head p{max-width:46ch;color:var(--muted)}
.pack-table{width:100%;border-collapse:collapse}
.pack-table th{font-family:var(--display);font-weight:700;font-size:var(--t-xs);color:var(--muted);text-align:left;padding:0 16px 12px 0;border-bottom:2px solid var(--navy)}
.pack-table td{padding:22px 16px 22px 0;border-bottom:1px solid #D5DBE3;vertical-align:middle}
.pack-table .count{font-family:var(--display);font-weight:900;font-size:3rem;line-height:1;letter-spacing:-.03em;color:var(--blue);width:1%;white-space:nowrap;padding-right:28px}
.pack-table .count small{display:block;font-size:.8125rem;font-weight:700;letter-spacing:0;color:var(--muted);margin-top:4px}
.pack-table .name{font-family:var(--display);font-weight:800;font-size:var(--t-l)}
.pack-table .incl{color:var(--muted);font-size:var(--t-s)}
.pack-table .cost{font-family:var(--display);font-weight:800;font-size:var(--t-l);text-align:right;white-space:nowrap}
.pack-table .cost s{display:block;font-size:var(--t-s);color:var(--muted);font-weight:700}
.pack-table tr.top .count{color:var(--red-ink)}
.alacarte{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:44px;border:2px solid var(--navy);border-radius:var(--radius);overflow:hidden}
.alacarte div{padding:18px 20px;border-right:1px solid #D5DBE3}
.alacarte div:last-child{border-right:0}
.alacarte dt{font-size:var(--t-s);color:var(--muted)}
.alacarte dd{font-family:var(--display);font-weight:800;font-size:var(--t-l)}
.note{margin-top:16px;font-size:var(--t-xs);color:var(--muted)}
@media (max-width:700px){
  .pack-table thead{display:none}
  .pack-table tr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 16px;padding:18px 0;border-bottom:1px solid #D5DBE3}
  .pack-table td{border:0;padding:0}
  .pack-table .count{grid-row:span 2;font-size:2.4rem;padding-right:0}
  .pack-table .incl{grid-column:2 / 4}
  .pack-table .cost{grid-row:1;grid-column:3}
  .alacarte div{border-right:0;border-bottom:1px solid #D5DBE3}
}

/* 6-hour defensive driving */
.defensive{background:var(--navy);color:#fff;padding:clamp(56px,8vw,96px) 0}
.defensive .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px 64px;align-items:start}
.defensive p{color:#D6E0EE;margin-top:14px;max-width:44ch}
.savings{display:grid;gap:16px}
.saving{display:flex;gap:20px;align-items:center;background:#fff;color:var(--navy);border-radius:var(--radius);padding:18px 22px}
.saving b{font-family:var(--display);font-weight:900;font-size:2.75rem;line-height:1;letter-spacing:-.03em;color:var(--red-ink);min-width:3.2ch}
.saving span{font-size:var(--t-s)}
.defensive .btn{margin-top:26px}
.defensive .price b{color:#fff}.defensive .price span{color:#B9CBE6}
@media (max-width:820px){.defensive .wrap{grid-template-columns:minmax(0,1fr)}.saving b{min-width:0;font-size:2.25rem}}

/* Find us */
.find{background:var(--verge);padding:clamp(56px,8vw,96px) 0}
.find .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:start}
.find address{font-style:normal;font-family:var(--display);font-weight:800;font-size:var(--t-l);line-height:1.25;margin-top:14px}
.find .near{color:var(--muted);margin-top:6px}
.contact{display:grid;gap:12px;margin-top:24px}
.contact a{overflow-wrap:anywhere;display:flex;gap:14px;align-items:center;font-weight:700;text-decoration:none;font-size:var(--t-m)}
.contact a:hover{text-decoration:underline}
.contact svg{width:22px;height:22px;color:var(--red-ink);flex:none}
.hours{background:#fff;border-radius:var(--radius);padding:24px 26px}
.hours h3{font-size:var(--t-m)}
.hours dl{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;margin-top:12px}
.hours dt{font-weight:700}
.ph{outline:2px dashed var(--blue);outline-offset:4px;border-radius:2px}
.ph-note{font-size:var(--t-xs);color:var(--muted);margin-top:16px}
.book{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:820px){.find .wrap{grid-template-columns:minmax(0,1fr)}}

/* Footer */
footer{background:var(--asphalt);color:#E3E6EA;font-size:var(--t-xs);padding:28px 0;position:relative}
footer:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:repeating-linear-gradient(90deg,var(--lane) 0 40px,transparent 40px 70px)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
footer a{color:#fff}
.af{opacity:.75}