
:root{
  --gold:#DBB70F;          /* the signature gold, carried over from the previous site */
  --gold-lt:#EAD161;
  --gold-dk:#7A6408;       /* accessible gold for text on light backgrounds */
  --ink:#0E0E0E;
  --ink-2:#1C1C1C;
  --ink-3:#2E2E2E;
  --body:#3A3A3A;
  --paper:#FFFFFF;
  --paper-2:#F6F5F1;
  --rule:#E2DFD6;
  --go:#1F7A43;
  --demo-h:0px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:"Lora",Georgia,serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:"Poppins",system-ui,sans-serif;color:var(--ink);margin:0;line-height:1.18;letter-spacing:-.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.script{font-family:"Great Vibes",cursive;font-weight:400;letter-spacing:.01em}

/* ---- utility bar + masthead -------------------------------------------- */
.util{background:var(--ink);color:#CFCABA;font-family:"Poppins",sans-serif;font-size:13px}
.util .wrap{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:center;justify-content:center;padding-top:6px;padding-bottom:6px}
.util a{color:var(--gold);text-decoration:none;font-weight:600}
.util a:hover{text-decoration:underline}
.mast{background:var(--ink);text-align:center;padding:8px 0 12px}
.mast img{margin:0 auto;width:min(330px,68vw)}

/* ---- navigation --------------------------------------------------------- */
nav{position:sticky;top:var(--demo-h);z-index:50;background:var(--ink-2);
  border-top:2px solid var(--gold);box-shadow:0 2px 14px rgba(0,0,0,.28)}
nav .wrap{display:flex;align-items:center;justify-content:center;gap:2px;padding-top:0;padding-bottom:0}
nav a{font-family:"Poppins",sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;color:#EDE9DC;text-decoration:none;padding:15px 13px;white-space:nowrap;
  border-bottom:3px solid transparent}
nav a:hover,nav a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.navtoggle{display:none;background:none;border:1px solid #4A4A4A;color:#EDE9DC;border-radius:5px;
  font-family:"Poppins",sans-serif;font-size:14px;font-weight:600;padding:10px 14px;cursor:pointer}

/* ---- hero --------------------------------------------------------------- */
.hero{position:relative;background:var(--ink);overflow:hidden;isolation:isolate}
/* The previous site ran a background gallery here: three photos cross-fading on a
   ~5s cycle, over a background-attachment:fixed parallax. Verified over CDP on the
   live site — two stacked layers whose opacity swaps. Same structure, same timing. */
.hero .slides{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero .slide{position:absolute;inset:0;
  background-position:50% 50%;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  opacity:0;transition:opacity 1.5s ease-in-out;will-change:opacity}
.hero .slide.on{opacity:1}
/* The previous site kept the skyline BRIGHT and gets contrast from a dark box behind the
   text only — not from a global scrim. Same approach here: the photo stays vivid,
   and only the bottom edge fades so the fleet lineup has something to sit on. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,14,14,.20) 0%,rgba(14,14,14,.06) 34%,rgba(14,14,14,.55) 88%,rgba(14,14,14,.86) 100%)}
/* iOS Safari renders fixed backgrounds at the wrong scale and does not parallax;
   touch devices get the same photos, simply scrolling. */
@media (max-width:900px),(hover:none){
  .hero .slide{background-attachment:scroll}
}
/* Reduced motion: no parallax, no cross-fade, first photo only. */
@media (prefers-reduced-motion:reduce){
  .hero .slide{background-attachment:scroll;transition:none}
}
/* Deliberately compact: the whole point of this page is the price panel, so the
   hero has to end above the fold on a 1500x800 laptop rather than fill it. */
.hero .wrap{padding-top:16px;padding-bottom:0;text-align:center}
/* The scrim card. Alpha .72 is measured, not chosen by eye — it is the LIGHTEST
   value at which the gold eyebrow, the white headline and the lede all clear
   4.5:1 over the brightest part of all three photos. Lighter and the gold fails. */
.herobox{background:rgba(0,0,0,.72);border-radius:6px;max-width:760px;margin:0 auto 12px;
  padding:14px clamp(18px,3.4vw,34px) 0;overflow:hidden;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.85)}
.eyebrow{font-family:"Poppins",sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px}
/* the green "call now" strip, spanning the card */
.greenbar{display:block;margin:14px -34px 0;padding:11px 16px;background:var(--go);color:#fff;
  font-family:"Poppins",sans-serif;font-size:clamp(12.5px,1.4vw,14.5px);font-weight:600;
  letter-spacing:.01em;text-decoration:none;transition:background .15s ease}
.greenbar:hover{background:#28914F}
@media (max-width:720px){ .greenbar{margin-left:-18px;margin-right:-18px} }
.fleetline{margin:0 auto;max-width:680px;padding:0 10px}
/* Sized so "Limo Service Kansas City" sits on ONE line inside the 760px card —
   the second line was costing about 60px of fold. */
.hero h1{font-family:"Great Vibes",cursive;font-weight:400;color:#fff;
  font-size:clamp(34px,4.4vw,50px);line-height:1.06;letter-spacing:.01em;margin:0 0 6px;
  text-shadow:0 3px 24px rgba(0,0,0,.6);white-space:nowrap}
@media (max-width:680px){ .hero h1{white-space:normal} }
.hero .lede{color:#E7E3D6;font-size:clamp(14.5px,1.4vw,16px);max-width:46em;margin:0 auto 12px}
.hero .lede b{color:#fff;font-weight:500}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:14px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:"Poppins",sans-serif;font-size:15.5px;
  font-weight:600;text-decoration:none;padding:15px 26px;border-radius:6px;border:2px solid transparent;
  transition:transform .12s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:#171200}
.btn-gold:hover{background:var(--gold-lt)}
.btn-ghost{border-color:#6A6656;color:#F2EFE4}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---- quote engine ------------------------------------------------------- */
.quote{background:var(--paper-2);border-top:3px solid var(--gold);padding:0 0 46px}
.quote .wrap{padding-top:22px}
.qhead{text-align:center;margin-bottom:16px}
.qhead h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:6px}
.qhead p{margin:0;color:#5C5647;max-width:44em;margin-inline:auto}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:13px;
  background:#fff;border:1px solid var(--rule);border-radius:10px;padding:18px;
  box-shadow:0 3px 18px rgba(30,26,10,.06)}
.fld label{display:block;font-family:"Poppins",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#6E6858;margin-bottom:7px}
.fld select,.fld input{width:100%;font-family:"Poppins",sans-serif;font-size:16px;color:var(--ink);
  background:#fff;border:1.5px solid #CFC9B8;border-radius:6px;padding:12px 12px;appearance:none}
.fld select:focus,.fld input:focus{outline:3px solid rgba(219,183,15,.45);outline-offset:1px;border-color:var(--gold-dk)}
.fld select{background-image:linear-gradient(45deg,transparent 50%,#7A7462 50%),linear-gradient(135deg,#7A7462 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.qout{margin-top:14px;display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:stretch}
/* Above 1000px the fields sit beside the result rather than above it, so the
   price itself clears the fold on a 1500x800 laptop instead of the form alone. */
@media (min-width:1000px){
  .qpanel{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:start}
  .qgrid{grid-template-columns:1fr 1fr}
  .qout{margin-top:0;grid-template-columns:1fr;gap:14px}
}
.qcard{background:var(--ink);color:#F2EFE4;border-radius:10px;padding:22px 24px;
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between}
.qprice-wrap{min-width:0}
.qbook{flex:none;padding:14px 26px;font-size:16px;white-space:nowrap}
@media (max-width:520px){ .qbook{width:100%;justify-content:center} }
.qcard .lbl{font-family:"Poppins",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.qprice{font-family:"Poppins",sans-serif;font-weight:700;font-size:clamp(34px,5vw,46px);
  color:#fff;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:0 0 6px}
.qsub{font-size:15px;color:#C9C4B4;margin:0}
.qveh{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:22px 24px}
.qveh .lbl{font-family:"Poppins",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#6E6858;margin:0 0 8px}
.qveh h3{font-size:20px;margin:0 0 6px}
.qveh p{margin:0;font-size:15px;color:#5C5647}
.qnote{margin:16px 0 0;font-size:14.5px;color:#6E6858;text-align:center}
.qnote b{color:var(--gold-dk)}

/* ---- dark tagline band -------------------------------------------------- */
.band{background:var(--ink-2);color:#EFECE1;text-align:center;padding:40px 0}
.band h2{color:#fff;font-size:clamp(21px,3vw,30px);margin:0 0 10px}
.band p{margin:0;color:var(--gold);font-family:"Poppins",sans-serif;font-weight:600;font-size:clamp(15px,2vw,18px)}

/* ---- category chips ----------------------------------------------------- */
.chips{background:var(--ink);padding:16px 0}
.chips .wrap{display:flex;flex-wrap:wrap;gap:8px 0;justify-content:center;align-items:center}
.chips a{font-family:"Poppins",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#E5E1D4;text-decoration:none;padding:5px 16px;border-right:1px solid #3E3E3E}
.chips a:last-child{border-right:none}
.chips a:hover{color:var(--gold)}

/* ---- services ----------------------------------------------------------- */
section{padding:64px 0}
.shead{text-align:center;max-width:46em;margin:0 auto 38px}
.shead h2{font-size:clamp(27px,3.8vw,38px);margin-bottom:12px}
.shead .rule{width:64px;height:3px;background:var(--gold);margin:0 auto 16px}
.shead p{margin:0;color:#5C5647}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .16s ease,transform .16s ease}
.card:hover{box-shadow:0 10px 30px rgba(30,26,10,.13);transform:translateY(-2px)}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card .cap{background:var(--gold);color:#171200;font-family:"Poppins",sans-serif;font-weight:600;
  font-size:15px;text-align:center;padding:11px 12px}
.card .bd{padding:16px 18px 20px;font-size:15.5px;color:#5C5647;flex:1}

/* ---- video ---------------------------------------------------------------
   Click-to-play facade. The poster is served from this domain and no YouTube
   script or cookie loads until someone actually presses play. Without JS the
   card is still a plain link that opens the video on YouTube. */
.vid{position:relative;display:block;max-width:780px;margin:0 auto;border-radius:10px;
  overflow:hidden;background:#000;text-decoration:none;
  box-shadow:0 24px 60px -26px rgba(0,0,0,.9)}
.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .3s ease,opacity .2s ease}
.vid:hover img,.vid:focus-visible img{transform:scale(1.03);opacity:.86}
.vid .play{position:absolute;top:51%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:52px;border-radius:12px;background:rgba(190,20,20,.92);
  transition:background .18s ease,transform .18s ease}
.vid .play::after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.vid:hover .play,.vid:focus-visible .play{background:#E01B1B;transform:translate(-50%,-50%) scale(1.07)}
.vid:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.vidmeta{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.86) 62%);
  font-family:"Poppins",sans-serif;text-align:left}
.vidmeta b{display:block;color:#fff;font-size:clamp(15px,1.8vw,18px);font-weight:600;line-height:1.25}
.vidmeta span{display:block;color:#CFCABA;font-size:12.5px;margin-top:3px}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* enlarge control, shown once the inline player is running */
.vidtools{display:none;justify-content:center;gap:10px;margin:14px auto 0}
.vidtools.on{display:flex}
.vidtool{display:inline-flex;align-items:center;gap:8px;background:transparent;cursor:pointer;
  border:1.5px solid #4A4A44;color:#E5E1D4;border-radius:6px;padding:9px 16px;
  font-family:"Poppins",sans-serif;font-size:13.5px;font-weight:600}
.vidtool:hover,.vidtool:focus-visible{border-color:var(--gold);color:var(--gold)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;padding:clamp(12px,4vw,48px)}
.lb.on{display:flex}
.lb-inner{width:min(1400px,100%);max-height:100%;position:relative}
.lb-inner iframe{width:100%;aspect-ratio:16/9;max-height:86vh;border:0;display:block;border-radius:6px}
.lb-close{position:absolute;top:-46px;right:0;background:transparent;border:1.5px solid #5A5A52;
  color:#EDE9DC;border-radius:6px;padding:8px 15px;cursor:pointer;
  font-family:"Poppins",sans-serif;font-size:13.5px;font-weight:600}
.lb-close:hover,.lb-close:focus-visible{border-color:var(--gold);color:var(--gold)}

/* ---- rates table -------------------------------------------------------- */
.rates{width:100%;border-collapse:collapse;font-family:"Poppins",sans-serif;font-size:14.5px;
  background:#fff;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rates th{text-align:left;background:var(--ink);color:var(--gold);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:13px 15px;white-space:nowrap}
.rates td{padding:13px 15px;border-bottom:1px solid #EFEDE5;color:var(--body);vertical-align:top}
.rates tr:last-child td{border-bottom:none}
.rates td:first-child{font-weight:600;color:var(--ink)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--ink)}

/* ---- reviews ------------------------------------------------------------ */
.rev{background:var(--paper-2)}
.badges{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:center;margin-top:8px}
.badges a{display:inline-flex;border-radius:6px;transition:transform .15s ease,opacity .15s ease}
.badges a:hover,.badges a:focus-visible{transform:translateY(-2px);opacity:.85}
.badges a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.badges img{height:64px;width:auto;filter:saturate(.95)}
/* ---- feedback block -------------------------------------------------------
   Deliberately NOT a review gate. The face is a label on the message, not a
   branch: the Google and Facebook links render for every visitor regardless of
   which one is chosen, and nothing is hidden from anyone. Google's content
   policy prohibits "selectively soliciting positive reviews", and the FTC's
   2024 reviews rule covers review suppression. Do not make the public links
   conditional on sentiment. */
.fb-block{background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:clamp(20px,3vw,32px);margin-top:30px;max-width:840px;margin-inline:auto;
  box-shadow:0 3px 20px rgba(30,26,10,.07)}
.fb-block h3{font-size:clamp(19px,2.2vw,23px);text-align:center;margin-bottom:6px}
.fb-lede{text-align:center;color:#5C5647;font-size:15.5px;margin:0 auto 20px;max-width:52ch}
.faces{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}
.face{display:inline-flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  background:#fff;border:2px solid var(--rule);border-radius:10px;padding:12px 22px;min-width:112px;
  font-family:"Poppins",sans-serif;font-size:13.5px;font-weight:600;color:#5C5647}
.face .fi{font-size:26px;line-height:1}
.face:hover{border-color:#BDB6A4}
.face[aria-pressed="true"]{color:#fff}
.f-good[aria-pressed="true"]{background:#12833F;border-color:#12833F}
.f-mid[aria-pressed="true"]{background:#8A6D0B;border-color:#8A6D0B}
.f-bad[aria-pressed="true"]{background:#9A2C22;border-color:#9A2C22}
.face:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){ .fb-row{grid-template-columns:1fr} }
.fb-fld{display:block;margin-bottom:12px}
.fb-fld span{display:block;font-family:"Poppins",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:#6E6858;margin-bottom:6px}
.fb-fld input,.fb-fld textarea{width:100%;font-family:"Poppins",sans-serif;font-size:16px;
  color:var(--ink);background:#fff;border:1.5px solid #CFC9B8;border-radius:6px;padding:11px 12px;resize:vertical}
.fb-fld input:focus,.fb-fld textarea:focus{outline:3px solid rgba(219,183,15,.45);outline-offset:1px;border-color:var(--gold-dk)}
.fb-note{font-size:13.5px;color:#6E6858;margin:10px 0 0}
.fb-note a{color:var(--gold-dk);font-weight:600}
.fb-public{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule);text-align:center}
.fb-plbl{font-family:"Poppins",sans-serif;font-size:14.5px;font-weight:600;color:var(--ink);margin:0 0 12px}
.fb-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fb-btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:"Poppins",sans-serif;font-size:14.5px;font-weight:600;text-decoration:none;
  color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:6px;padding:11px 20px}
.fb-btn:hover{background:var(--ink);color:#fff}
.fb-fine{font-size:12.5px;color:#8A8474;margin:12px 0 0}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:34px}
.qt{background:#fff;border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:8px;padding:20px 22px}
.qt p{margin:0 0 12px;font-style:italic;color:#4A4538}
.qt cite{font-family:"Poppins",sans-serif;font-style:normal;font-size:13.5px;font-weight:600;color:var(--gold-dk)}

/* ---- contact / footer --------------------------------------------------- */
.contact{background:var(--ink);color:#DEDACB}
.contact h2{color:#fff}
.contact .shead p{color:#BCB7A6}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;text-align:center}
.cgrid h3{color:var(--gold);font-size:12px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:9px}
.cgrid a{color:#fff;text-decoration:none;font-family:"Poppins",sans-serif;font-size:19px;font-weight:600}
.cgrid a:hover{color:var(--gold)}
.cgrid p{margin:0;font-size:15.5px}
footer{background:#080808;color:#8C877A;font-family:"Poppins",sans-serif;font-size:13px;padding:30px 0 90px;text-align:center}
footer p{margin:0 0 8px}
footer b{color:#B8B2A2}

/* ---- sticky mobile call bar --------------------------------------------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--gold);
  box-shadow:0 -3px 16px rgba(0,0,0,.28)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;
  font-family:"Poppins",sans-serif;font-weight:700;font-size:17px;color:#171200;text-decoration:none}

/* toast for the desktop copy-the-number behaviour */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);z-index:210;
  background:var(--ink);color:#fff;font-family:"Poppins",sans-serif;font-size:14.5px;font-weight:600;
  padding:12px 20px;border-radius:8px;box-shadow:0 10px 34px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--gold)}

/* ---- booking dialog ------------------------------------------------------
   Book now collects the phone number and event date right here, so nobody has
   to finish the request in their own mail app. */
.bk{position:fixed;inset:0;z-index:230;display:none;background:rgba(10,10,10,.62);padding:18px}
.bk.on{display:flex;align-items:flex-start;justify-content:center;overflow:auto}
.bk-card{background:#fff;border-radius:10px;max-width:440px;width:100%;margin:auto;
  padding:22px 24px 20px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.bk-card h3{font-size:20px;margin:0 0 4px}
.bk-sum{font-family:"Poppins",sans-serif;font-size:13px;color:#5B5648;margin:0 0 14px}
.bk-sum b{color:var(--ink)}
.bk-row{display:flex;gap:10px}
.bk-row .fb-fld{flex:1}
@media (max-width:420px){ .bk-row{flex-direction:column;gap:0} }
.bk-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.bk-close{background:none;border:1px solid var(--rule);border-radius:6px;color:#6B6558;
  font-family:"Poppins",sans-serif;font-size:14px;font-weight:600;padding:12px 16px;cursor:pointer}
.bk-close:hover{border-color:#6B6558}
.bk-note{font-size:13.5px;color:#6B6558;margin:10px 0 0}
.bk-note a{color:var(--gold-dk);font-weight:600}
.bk-note.ok{color:var(--go);font-weight:600}
.bk-hp{display:none}

@media (max-width:900px){
  .qout{grid-template-columns:1fr}
  nav .wrap{justify-content:space-between;padding:9px 22px}
  .navtoggle{display:block}
  nav .links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink-2);
    flex-direction:column;padding:6px 0 12px;border-top:1px solid #333}
  nav .links.open{display:flex}
  nav .links a{padding:13px 22px;border-bottom:none;text-align:left}
  .callbar{display:block}
  footer{padding-bottom:96px}
}
@media (min-width:901px){ nav .links{display:flex;align-items:center;gap:2px} }

/* ================= interior pages ================= */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#000;padding:10px 16px;z-index:100;
  font-family:"Poppins",sans-serif;font-weight:600}
.skip:focus{left:0}
nav a.here{color:var(--gold);border-bottom-color:var(--gold)}

.phero{background:var(--ink-2) center/cover no-repeat;padding:54px 0 46px;text-align:center}
.phero h1{font-family:"Poppins",sans-serif;font-weight:700;color:#fff;
  font-size:clamp(27px,3.6vw,42px);letter-spacing:-.015em;margin:0 0 12px;
  text-shadow:0 2px 18px rgba(0,0,0,.55)}
.phero .lede{color:#E7E3D6;font-size:clamp(15px,1.5vw,17.5px);max-width:44em;margin:0 auto 20px}

.crumb{background:var(--paper-2);border-bottom:1px solid var(--rule);
  font-family:"Poppins",sans-serif;font-size:12.5px}
.crumb .wrap{padding-top:11px;padding-bottom:11px;color:#6B6558}
.crumb a{color:var(--gold-dk);text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb i{font-style:normal;opacity:.5;margin:0 3px}
.crumb span[aria-current]{color:var(--ink)}

main{display:block}
.body{padding:44px 0 8px}
.body .wrap{max-width:820px}
.body h2{font-size:clamp(21px,2.4vw,29px);margin:34px 0 12px}
.body h3{font-size:clamp(18px,1.9vw,22px);margin:28px 0 10px}
.body h4{font-size:17px;margin:22px 0 8px}
.body h2:first-child,.body h3:first-child{margin-top:0}
.body p{margin:0 0 15px}
.body ul,.body ol{margin:0 0 18px;padding-left:22px}
.body li{margin:0 0 7px}
.body a{color:var(--gold-dk);font-weight:500}
.body figure{margin:26px 0;border-radius:8px;overflow:hidden;box-shadow:0 14px 34px -20px rgba(0,0,0,.5)}
.body figure img{width:100%;height:auto}

.band{background:var(--ink);color:#E7E3D6;text-align:center;padding:44px 0;margin-top:40px}
.band h2{color:#fff;font-size:clamp(21px,2.4vw,28px);margin:0 0 10px}
.band p{max-width:46em;margin:0 auto 20px}
.bandcta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn.ghost{background:transparent;color:#fff;border-color:#6A6656}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}

.related{background:var(--paper-2);padding:38px 0;border-top:1px solid var(--rule)}
.related h2{font-size:20px;margin:0 0 16px}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:9px 26px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.related a{font-family:"Poppins",sans-serif;font-size:14.5px;font-weight:600;
  color:var(--gold-dk);text-decoration:none}
.related a:hover{text-decoration:underline}

.hub{padding:44px 0}
.hubgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));margin-top:26px}
/* auto-FILL not auto-fit: a category with a single vehicle would otherwise
   stretch that one card across the full row and look broken */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:9px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .14s ease,box-shadow .14s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(0,0,0,.55)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card .cbody{padding:16px 18px 20px}
.card h3{font-size:18px;margin:0 0 7px}
.card p{font-size:15px;margin:0 0 12px;color:#5B5648}
.card a.more{font-family:"Poppins",sans-serif;font-size:13.5px;font-weight:600;
  color:var(--gold-dk);text-decoration:none}
.card a.stretch{position:absolute;inset:0}

footer .fgrid{display:grid;gap:26px 30px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  text-align:left;margin-bottom:30px}
footer .fgrid h3{font-family:"Poppins",sans-serif;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin:0 0 11px}
footer .fgrid ul{list-style:none;margin:0;padding:0}
footer .fgrid li{margin:0 0 7px}
footer .fgrid a{color:#CFCABA;text-decoration:none;font-size:14.5px}
footer .fgrid a:hover{color:#fff;text-decoration:underline}
footer .fbase{border-top:1px solid #3A382F;padding-top:20px;text-align:center;font-size:14px}
@media (max-width:700px){ .phero{padding:38px 0 32px} .body{padding:32px 0 6px} }

/* ---- pre-launch audit fixes (2026-08-27) ---- */
/* Interior templates emit class="btn gold"; only the homepage's .btn-gold existed,
   so the primary call CTA rendered as transparent text on 48 pages. */
.btn.gold{background:var(--gold);color:#171200}
.btn.gold:hover{background:var(--gold-lt)}
.revlinks{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 26px}
/* ghost buttons were styled for dark bands only; on the white .body they were
   white-on-white (verified computed on staging /reviews) */
.body .btn.ghost{color:var(--ink);border-color:var(--ink)}
.body .btn.ghost:hover{border-color:var(--gold-dk);color:var(--gold-dk)}
/* hub cards are <a> elements; without this every heading and blurb inside
   renders underlined */
.card{text-decoration:none;color:inherit}
/* raw gold outline is 1.95:1 on white - fails WCAG 1.4.11; --gold-dk is 5.75:1 */
.face:focus-visible,.badges a:focus-visible{outline-color:var(--gold-dk)}
.toast a{color:var(--gold);font-weight:600}

/* ---- Google reviews (live, fetched at build time) ----
   NOTE the .body figure.gr-card selectors: the review cards ARE <figure>
   elements, so the interior-image rule `.body figure` (0,1,1) outranks a bare
   .gr-card (0,1,0) and was stamping them with a 26px margin and a heavy drop
   shadow. Every card property that .body figure also sets must be re-declared
   at equal-or-higher specificity. */
.gr-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 20px;
  padding:14px 18px;background:var(--paper-2);border:1px solid var(--rule);border-radius:10px}
.rev .gr-head{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.gr-score{font-family:"Poppins",sans-serif;font-size:30px;font-weight:700;color:var(--ink);line-height:1}
.rev .gr-score{color:#fff}
.gr-stars{color:#E8A00A;font-size:18px;letter-spacing:2px;line-height:1}
.gr-count{font-family:"Poppins",sans-serif;font-size:14px;color:#5B5648}
.rev .gr-count{color:#BCB7A6}
.gr-count a{color:var(--gold-dk);font-weight:600}
.rev .gr-count a{color:var(--gold)}

.gr-grid{display:grid;gap:16px;margin:0 0 18px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.body figure.gr-card,.gr-card{display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:16px 18px 14px;margin:0;overflow:visible;
  box-shadow:0 1px 3px rgba(30,26,10,.07)}
.rev .gr-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none}
.gr-card .gr-stars{font-size:14px;letter-spacing:1px;margin-bottom:9px}
/* a blockquote carries a ~40px UA indent that pushed the text off-centre */
.gr-card blockquote{margin:0;padding:0;flex:1}
.body .gr-card p,.gr-card p{font-size:15px;line-height:1.55;margin:0 0 12px;color:var(--body)}
.rev .gr-card p{color:#E7E3D6}
.gr-who{font-family:"Poppins",sans-serif;font-size:13px;font-weight:600;color:var(--ink);
  margin:auto 0 0;padding-top:10px;border-top:1px solid var(--rule)}
.rev .gr-who{color:#fff;border-top-color:rgba(255,255,255,.14)}
.gr-when{font-weight:400;color:#6B6558}
.rev .gr-when{color:#BCB7A6}
.body .gr-src,.gr-src{font-family:"Poppins",sans-serif;font-size:12.5px;color:#6B6558;margin:0}
.rev .gr-src{color:#BCB7A6}
.gr-src a{color:var(--gold-dk);font-weight:600}
.rev .gr-src a{color:var(--gold)}
/* ---- vehicle pages ---- */
.vspec{font-family:"Poppins",sans-serif;font-size:17px;color:var(--ink);margin:0 0 18px}
.vgal{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:22px 0 26px}
.vgal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--rule)}
.hub h2{font-size:clamp(19px,2.1vw,25px);margin:34px 0 4px}
.hub h2:first-child{margin-top:0}

/* the reviews grid is the one place a wider column helps */
.body .wrap:has(.gr-grid){max-width:980px}
.body .wrap:has(.vgal){max-width:980px}
@media (max-width:640px){ .gr-grid{grid-template-columns:1fr} }
