/*
Theme Name: Shropshire Chauffeurs
Description: The Shropshire Chauffeurs site: night navy and gold, Libre Caslon for headings, Instrument Sans for reading, IBM Plex Mono for the departures board. Built by Whitfield IT.
Version: 0.1.0
Author: Whitfield IT
Text Domain: shropshire-chauffeurs
*/

@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-display-normal-400.woff2) format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-italic-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/instrument-sans-normal-400-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-normal-500.woff2) format('woff2')}

/* One palette. The site is two grounds by design (night navy for arrival, warm white for reading), so every colour
   is set explicitly on its own ground rather than following the visitor's light or dark setting. */
:root{
  --night:#0d1020; --char:#161922; --char-2:#1e2130; --gold:#a88d2e; --gold-deep:#8c7424; --gold-ink:#6e5a1a;
  --cream:#f7f4ec; --paper:#fffdf8; --ink:#17181d; --ink-2:#4f4c45; --rule:#ddd6c6; --rule-dark:#2b2f42;
  --mist:#c8c5bb; --mist-2:#9a978f; --ok:#2f6b3f; --err:#9b2c1f; --err-bg:#fbeee9;
  --serif:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  --serif-i:'Libre Caslon Text',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --w:1180px; --gut:clamp(16px,4vw,40px); --r:4px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:clamp(4rem,9vw,7.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);font-feature-settings:"kern","liga"}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--night);padding:.75rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:760px}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.2vw,4.75rem)}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.7rem)}
h4{font:600 1rem/1.4 var(--sans);margin:0 0 .4em}
p{margin:0 0 1em;max-width:66ch}
em.i,.i{font-family:var(--serif-i);font-style:italic;font-weight:400}
.lede{font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.55;color:var(--ink-2)}
.num,.price,time{font-variant-numeric:tabular-nums lining-nums}
.small{font-size:.9rem}
.muted{color:var(--ink-2)}

/* Buttons: gold on navy, navy on cream. 48px tall, so they pass the 44px touch target. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.35rem;border-radius:var(--r);border:1px solid transparent;font:600 1rem/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-gold{background:var(--gold);color:var(--night)}
.btn-gold:hover{background:#bea03a}
.btn-night{background:var(--night);color:var(--cream)}
.btn-night:hover{background:var(--char-2)}
.btn-line{border-color:#8f8a7c;color:inherit;background:transparent}
.on-night .btn-line{border-color:#6e6a60;color:var(--cream)}
.btn-line:hover{border-color:var(--gold)}
.link{font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px}

/* Header */
.site-head{background:var(--night);color:var(--cream);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--rule-dark)}
.site-head .wrap{display:flex;align-items:center;gap:1.25rem;min-height:72px}
.brand{display:block;flex:0 0 auto}
.brand img{width:190px;height:auto}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.35rem}
.nav a{text-decoration:none;font-size:.95rem;color:var(--mist);padding:.4rem 0;border-bottom:1px solid transparent}
.nav a:hover,.nav .current-menu-item>a,.nav .current-page-ancestor>a{color:var(--cream);border-bottom-color:var(--gold)}
.head-call{color:var(--cream);text-decoration:none;font-variant-numeric:tabular-nums;font-size:.95rem;white-space:nowrap}
.head-cta{min-height:44px;padding:.55rem 1rem}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid #474b5e;color:var(--cream);min-height:44px;min-width:44px;border-radius:var(--r);font:600 .9rem var(--sans);padding:0 .8rem}
@media (max-width:1100px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--night);border-bottom:1px solid var(--rule-dark);padding:.5rem var(--gut) 1.25rem}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{display:block;padding:.8rem 0;font-size:1.05rem;border-bottom:1px solid var(--rule-dark)}
  .menu-btn{display:inline-flex;align-items:center}
  .head-call{display:none}
}
@media (max-width:560px){.brand img{width:150px}.head-cta{display:none}}

/* Phone bar: the two things a visitor on a phone wants, always in reach. */
.phone-bar{display:none}
@media (max-width:760px){
  .phone-bar{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--rule-dark);border-top:1px solid var(--rule-dark);padding-bottom:env(safe-area-inset-bottom)}
  .phone-bar a{display:flex;align-items:center;justify-content:center;min-height:54px;background:var(--night);color:var(--cream);text-decoration:none;font-weight:600}
  .phone-bar a.pb-price{background:var(--gold);color:var(--night)}
  body{padding-bottom:56px}
  .page-quote .phone-bar{display:none}
  .page-quote{padding-bottom:0}
}

/* Grounds */
.on-night{background:var(--night);color:var(--cream)}
.on-night .lede,.on-night .muted{color:var(--mist)}
.on-char{background:var(--char);color:var(--cream)}
.on-char .lede,.on-char .muted{color:var(--mist)}
.on-paper{background:var(--paper)}
.sec{padding:var(--s6) 0}
.sec-tight{padding:var(--s5) 0}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.on-night .rule{border-top-color:var(--rule-dark)}

/* Hero: their own photograph, darkened from the left so the words sit on navy, never on a busy patch. */
.hero{position:relative;background:var(--night);color:var(--cream);overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img,.hero-img picture{width:100%;height:100%;object-fit:cover;object-position:50% 88%}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,16,32,.92) 0%,rgba(13,16,32,.78) 38%,rgba(13,16,32,.2) 66%,rgba(13,16,32,.05) 82%,rgba(13,16,32,.45) 100%),linear-gradient(90deg,rgba(13,16,32,.55) 0%,rgba(13,16,32,0) 55%)}
.hero{min-height:clamp(560px,52vw,760px)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:var(--s4);align-items:start;padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(14rem,22vw,20rem)}
.hero h1{max-width:13ch;margin-bottom:.35em}
.hero h1 .i{color:var(--gold)}
.hero .lede{color:#d9d6cc;max-width:40ch}
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;margin-top:1.5rem;font-size:.95rem;color:var(--mist)}
.stars{color:var(--gold);letter-spacing:.12em;font-size:1rem}
.proof a{color:var(--cream)}
@media (max-width:900px){
  .hero{min-height:0}
  .hero .wrap{grid-template-columns:1fr;padding-top:2rem;padding-bottom:2.5rem}
  .hero-img{position:relative;height:auto;aspect-ratio:16/10;order:2}
  .hero{display:flex;flex-direction:column}
  .hero-img img,.hero-img picture{object-position:50% 85%}
  .hero-img::after{background:linear-gradient(180deg,rgba(13,16,32,1) 0%,rgba(13,16,32,0) 30%)}
}

/* The quote ticket: a panel shaped like a journey ticket, the one card-like object on the home page. */
.ticket{background:var(--paper);color:var(--ink);border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden}
.ticket-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 1.4rem .9rem;border-bottom:1px dashed var(--rule)}
.ticket-head h2{font-size:1.5rem;margin:0}
.ticket-head span{font-size:.85rem;color:var(--ink-2)}
.ticket form{padding:1.1rem 1.4rem 1.4rem;display:grid;gap:.9rem}
.field{display:grid;gap:.3rem;position:relative}
.field label,.label{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.input,.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.65rem .8rem;border:1px solid #8d887a;border-radius:var(--r);background:#fff;color:var(--ink);font:400 1rem/1.3 var(--sans)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold-deep)}
.field .hint{font-size:.85rem;color:var(--ink-2)}
.field .err{font-size:.9rem;color:var(--err);font-weight:600}
.field.has-err input{border-color:var(--err);background:var(--err-bg)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.row3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:.75rem}
@media (max-width:420px){.row3{grid-template-columns:1fr 1fr}.row3 .field:first-child{grid-column:1/-1}}
.swap{position:absolute;right:.5rem;top:-.2rem;background:none;border:0;color:var(--gold-ink);font:600 .82rem var(--sans);min-height:32px;cursor:pointer}

/* Address suggestions */
.sugg{position:absolute;left:0;right:0;top:100%;z-index:30;margin:.2rem 0 0;padding:.25rem 0;list-style:none;background:#fff;border:1px solid #8d887a;border-radius:var(--r);box-shadow:0 18px 40px -18px rgba(0,0,0,.35);max-height:320px;overflow:auto}
.sugg li{padding:.55rem .8rem;cursor:pointer;display:grid;gap:.05rem;line-height:1.3}
.sugg li[aria-selected=true],.sugg li:hover{background:#f3eedf}
.sugg b{font-weight:600}
.sugg small{color:var(--ink-2);font-size:.82rem}
.sugg .kind{font:500 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--gold-ink)}

/* Example-price notice: shown wherever a price appears, until the owner's own prices are in. */
.example{display:inline-flex;gap:.4rem;align-items:center;font:500 .72rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--gold-ink);border:1px solid #c9b77a;border-radius:2px;padding:.25rem .45rem;background:#fbf6e6}
.on-night .example,.on-char .example{color:#e7d48c;border-color:#6b5c22;background:transparent}

/* Editorial index of services: a ledger, one line per service, photo on the right. */
.index{border-top:1px solid var(--rule);margin-top:var(--s4)}
.index-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) 220px;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.index-row h3{margin:0;transition:color .2s}
.index-row p{margin:0;color:var(--ink-2)}
.index-row img{width:220px;height:140px;object-fit:cover;border-radius:2px;filter:saturate(.85)}
.index-row:hover h3{color:var(--gold-ink)}
.index-row .go{font-weight:600;font-size:.92rem;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;display:inline-block;margin-top:.4rem}
@media (max-width:820px){.index-row{grid-template-columns:1fr 120px}.index-row p{grid-column:1/-1;grid-row:2}.index-row img{width:120px;height:90px;grid-column:2;grid-row:1}}

/* Review quotes: the customers' exact words, set large. */
.quote-big{margin:0}
.quote-big blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.2;text-wrap:balance;max-width:28ch}
.quote-big blockquote::before{content:"\201C";color:var(--gold)}
.quote-big blockquote::after{content:"\201D";color:var(--gold)}
.quote-big figcaption{margin-top:1.1rem;font-size:.95rem;color:var(--mist)}
.on-paper .quote-big figcaption,.quote-big.on-light figcaption{color:var(--ink-2)}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4) var(--s4);margin-top:var(--s4)}
.q{margin:0;padding-top:1.2rem;border-top:1px solid var(--rule)}
.on-night .q,.on-char .q{border-top-color:var(--rule-dark)}
.q blockquote{margin:0 0 .8rem;font-family:var(--serif-i);font-style:italic;font-size:1.12rem;line-height:1.5}
.q figcaption{font-size:.88rem;color:var(--ink-2)}
.on-night .q figcaption,.on-char .q figcaption{color:var(--mist-2)}

/* Departures board: the one bold move, on the private aviation page only. Split-flap letters in mono. */
.board{background:#07080f;color:#f3efe2;border:1px solid #2a2d3b;border-radius:6px;padding:clamp(.9rem,2.4vw,1.6rem);box-shadow:inset 0 0 0 1px #000,0 30px 60px -30px rgba(0,0,0,.7);overflow-x:auto}
.board-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.25rem;margin-bottom:1rem}
.board-title{font:500 .85rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.board-from{display:flex;align-items:center;gap:.5rem;font:500 .8rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#a5a196}
.board-from select{background:#11131d;color:#f3efe2;border:1px solid #3a3e50;border-radius:3px;min-height:40px;padding:0 .5rem;font:500 .85rem var(--mono)}
.board table{width:100%;border-collapse:separate;border-spacing:0 6px}
#board table{min-width:620px}
.board th{font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8a877d;text-align:left;padding:0 .6rem .3rem}
.board td{padding:0 .3rem;vertical-align:middle}
.board tr.row{cursor:pointer}
.board tr.row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.flap{display:inline-flex;gap:2px}
.flap span{display:inline-grid;place-items:center;width:1.15em;height:1.6em;background:linear-gradient(180deg,#1b1d27 0,#1b1d27 49%,#0b0c12 50%,#151720 51%,#151720 100%);border-radius:2px;font:500 clamp(.82rem,1.4vw,1.02rem)/1 var(--mono);color:#f3efe2;text-transform:uppercase}
.flap.gold span{color:#e9cf6e}
.flap span.flip{animation:flip .26s ease-in}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg);filter:brightness(.5)}100%{transform:rotateX(0)}}
.board .op{font:400 .82rem/1.3 var(--sans);color:#a5a196;padding-left:.6rem;max-width:22ch}
.board .go{font:500 .75rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.board-note{margin:.9rem 0 0;font-size:.85rem;color:#a5a196;max-width:none}
@media (prefers-reduced-motion:reduce){.flap span.flip{animation:none}}
@media (max-width:640px){
  .board table{min-width:0}
  .board thead{display:none}
  .board tr.row{display:grid;grid-template-columns:1fr auto;gap:.3rem .5rem;padding:.75rem 0;border-bottom:1px solid #22252f}
  .board tr.row td{padding:0}
  .board tr.row td.c-name{grid-column:1/-1}
  .board tr.row td.c-op{display:none}
  .flap span{width:1em;height:1.45em}
}

/* Facts table for routes, terminals and cars */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:var(--s3) 0}
.facts div{padding:1rem 1rem 1rem 0;border-right:1px solid var(--rule)}
.facts div:last-child{border-right:0}
.facts dt{font-size:.82rem;color:var(--ink-2);margin-bottom:.15rem}
.facts dd{margin:0;font:400 clamp(1.4rem,2.4vw,1.9rem)/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.on-night .facts,.on-night .facts div{border-color:var(--rule-dark)}
.on-night .facts dt{color:var(--mist-2)}
@media (max-width:560px){.facts div{border-right:0;border-bottom:1px solid var(--rule)}.facts div:last-child{border-bottom:0}}

/* Generic content pages: the prose the owner edits in WordPress. */
.page-head{background:var(--night);color:var(--cream);padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.page-head .lede{color:#d9d6cc}
.page-head.has-img{position:relative;overflow:hidden}
.page-head.has-img .ph-img{position:absolute;inset:0}
.page-head.has-img .ph-img img{width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.7)}
.page-head.has-img .wrap{position:relative}
.crumbs{font-size:.85rem;color:var(--mist-2);margin-bottom:1.2rem}
.crumbs a{color:var(--mist)}
.prose{font-size:1.0625rem}
.prose>*{max-width:68ch}
.prose h2{margin-top:2.2em;font-size:clamp(1.7rem,3vw,2.3rem)}
.prose h3{margin-top:1.8em}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--gold-deep)}
.prose figure{margin:2rem 0;max-width:100%}
.prose figure img{border-radius:3px}
.prose figcaption{font-size:.88rem;color:var(--ink-2);margin-top:.5rem}
.prose table{border-collapse:collapse;width:100%;max-width:100%;margin:1.5rem 0;font-size:.98rem}
.prose th,.prose td{text-align:left;padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font-weight:600;font-size:.88rem;color:var(--ink-2)}
.prose .table-scroll{overflow-x:auto}
.prose blockquote{margin:2rem 0;padding:0 0 0 1.2rem;border-left:2px solid var(--gold);font-family:var(--serif-i);font-style:italic;font-size:1.15rem}
.prose blockquote cite{display:block;margin-top:.5rem;font:400 .88rem var(--sans);color:var(--ink-2)}
.gap{display:inline;background:#fbf2d4;border-bottom:1px dashed var(--gold-deep);padding:0 .2em;font-size:.95em}
.on-night .gap,.site-foot .gap,.page-head .gap{background:transparent;color:#e7d48c;border-bottom-color:#8c7424}
.foot-legal a{text-decoration:underline;text-decoration-color:#6e6a60}
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s5);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--s4)}}
.aside-card{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:1.4rem}
.sticky{position:sticky;top:96px}

/* Fleet */
.cars{display:grid;gap:var(--s5)}
.car{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s4);align-items:center}
.car img{border-radius:3px}
.car .facts{margin:1rem 0}
@media (max-width:820px){.car{grid-template-columns:1fr}}

/* Steps: a real sequence, so numbered */
.steps{list-style:none;counter-reset:s;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--rule-dark)}
.steps li{counter-increment:s;padding:1.2rem 1.2rem 0 0}
.steps li::before{content:counter(s);display:block;font:400 2.2rem/1 var(--serif);color:var(--gold);margin-bottom:.6rem}
.steps h3{font-size:1.2rem;margin-bottom:.35rem}
.steps p{font-size:.95rem;color:var(--mist);margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:1.5rem}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Phone mock for tracking */
.phone{width:min(300px,82vw);aspect-ratio:9/18.5;border-radius:38px;background:#05060b;padding:12px;box-shadow:0 0 0 1px #2c2f3c,0 40px 80px -30px rgba(0,0,0,.7);margin:0 auto}
.phone-screen{height:100%;border-radius:28px;overflow:hidden;background:#11131c;position:relative;display:flex;flex-direction:column}
.phone-map{flex:1;position:relative;background:#141826}
.phone-map svg{width:100%;height:100%;display:block}
.phone-card{background:var(--paper);color:var(--ink);padding:.9rem 1rem 1rem;font-size:.85rem}
.phone-card b{font:400 1.35rem/1.1 var(--serif);display:block;margin-bottom:.2rem}
.stages{display:flex;gap:3px;margin-top:.7rem}
.stages i{flex:1;height:4px;border-radius:2px;background:#d9d2bf}
.stages i.on{background:var(--gold)}
.stage-names{display:flex;justify-content:space-between;font-size:.66rem;color:var(--ink-2);margin-top:.3rem}

/* Areas and routes list */
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 var(--s4);border-top:1px solid var(--rule)}
.routes a{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule);text-decoration:none}
.routes a:hover b{color:var(--gold-ink)}
.routes span{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.on-night .routes,.on-night .routes a{border-color:var(--rule-dark)}
.on-night .routes span{color:var(--mist-2)}
.on-night .routes a:hover b{color:var(--gold)}

/* Route map drawn from the real road line (no map tiles: light and fast). */
.routemap{background:var(--night);border-radius:4px;overflow:hidden}
.routemap svg{display:block;width:100%;height:auto}
.routemap .road{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.routemap .lbl{fill:#e9e5d8;font:500 12px var(--sans)}
.routemap .dot{fill:var(--gold)}
.routemap .dot.end{fill:var(--cream)}

/* Radius map on the home page: roads traced from the routing service, from the base outwards */
.reach svg{width:100%;height:auto;display:block}
.reach .road{fill:none;stroke:#6b5f38;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reach .road.hi{stroke:var(--gold);stroke-width:3}
.reach .ring{fill:none;stroke:#262a3c;stroke-dasharray:2 5}
.reach{margin-top:var(--s4)}
.reach text{fill:#e4e0d4;font:500 17px var(--sans)}
.reach text.lo{fill:#b9b5aa;font-size:15px}
.reach text .t,.reach text.t{fill:#9d988b;font:500 12.5px var(--mono);letter-spacing:.06em}
@media (max-width:700px){.reach text.lo{display:none}.reach text{font-size:24px}.reach text .t{font-size:17px}.reach svg{margin:0 calc(var(--gut) * -1);width:calc(100% + var(--gut) * 2)}}
.reach .base{fill:var(--gold);stroke:var(--night);stroke-width:2}
@media (prefers-reduced-motion:no-preference){.reach .road.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 2.2s ease-out forwards;animation-delay:var(--d,0s)}}
@keyframes draw{to{stroke-dashoffset:0}}

/* Quote page */
.qp{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s4);align-items:start}
@media (max-width:960px){.qp{grid-template-columns:1fr}}
.qp-main{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:clamp(1.1rem,3vw,2rem)}
.qp fieldset{border:0;padding:0;margin:0 0 1.6rem;display:grid;gap:.9rem}
.qp legend{font:400 1.45rem/1.2 var(--serif);margin-bottom:.8rem;padding:0}
.tabs{display:inline-flex;border:1px solid #8d887a;border-radius:var(--r);overflow:hidden;margin-bottom:1.2rem}
.tabs button{min-height:44px;padding:.5rem 1rem;border:0;background:#fff;font:600 .92rem var(--sans);color:var(--ink-2);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--night);color:var(--cream)}
.checks{display:grid;gap:.6rem}
.check{display:flex;gap:.7rem;align-items:flex-start;min-height:44px;padding:.55rem .7rem;border:1px solid var(--rule);border-radius:var(--r);background:#fff;cursor:pointer}
.check input{width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--gold-deep);flex:0 0 auto}
.check span small{display:block;color:var(--ink-2);font-size:.85rem}
.stepper{display:flex;align-items:center;gap:.4rem}
.stepper button{width:44px;height:44px;border:1px solid #8d887a;background:#fff;border-radius:var(--r);font:600 1.2rem var(--sans);cursor:pointer;color:var(--ink)}
.stepper output{min-width:2.4ch;text-align:center;font:600 1.1rem var(--sans);font-variant-numeric:tabular-nums}
.vehicles{display:grid;gap:.7rem}
.veh{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.85rem 1rem;border:1px solid var(--rule);border-radius:4px;background:#fff;cursor:pointer}
.veh input{width:20px;height:20px;accent-color:var(--gold-deep)}
.veh b{font-weight:600}
.veh small{display:block;color:var(--ink-2)}
.veh .price{font:400 1.7rem/1 var(--serif)}
.veh[data-fits=false]{opacity:.55;cursor:not-allowed}
.veh:has(input:checked){border-color:var(--gold-deep);box-shadow:inset 0 0 0 1px var(--gold-deep)}
.breakdown{font-size:.88rem;color:var(--ink-2);margin:.4rem 0 0;padding:0;list-style:none;grid-column:2/-1}
.breakdown li{display:flex;justify-content:space-between;gap:1rem;border-top:1px dotted var(--rule);padding:.25rem 0}
.qp-side .ticket-head{border-bottom:1px solid var(--rule)}
.summary{padding:1.1rem 1.4rem;display:grid;gap:.75rem;font-size:.95rem}
.summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem}
.summary dt{color:var(--ink-2)}
.summary dd{margin:0;text-align:right}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);padding-top:.8rem}
.total strong{font:400 2.2rem/1 var(--serif)}
.notice{padding:.8rem 1rem;border-radius:var(--r);background:#f3eedf;font-size:.95rem}
.notice.err{background:var(--err-bg);color:var(--err)}
.busy{opacity:.6;pointer-events:none}
[hidden]{display:none!important}

/* The name board: what the customer sees once a request is in, and what the chauffeur holds at arrivals. */
.nameboard{background:#fff;color:#111;border:1px solid #d8d2c2;border-radius:3px;box-shadow:0 20px 40px -24px rgba(0,0,0,.45);padding:1.6rem 1.4rem 1.2rem;text-align:center;max-width:420px;margin:0 auto;transform:rotate(-1.2deg)}
.nameboard .who{font:400 clamp(1.9rem,6vw,2.8rem)/1.05 var(--serif);text-transform:uppercase;letter-spacing:.04em;margin:0 0 .5rem;word-break:break-word}
.nameboard small{display:block;font:500 .72rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}

/* Footer */
.site-foot{background:var(--night);color:var(--mist);font-size:.95rem;padding:var(--s5) 0 var(--s4)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s4)}
.site-foot h2{font:600 .95rem var(--sans);color:var(--cream);margin:0 0 .8rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.site-foot a{color:var(--mist);text-decoration:none}
.site-foot a:hover{color:var(--cream);text-decoration:underline;text-decoration-color:var(--gold)}
.foot-legal{border-top:1px solid var(--rule-dark);margin-top:var(--s4);padding-top:1.4rem;font-size:.85rem;color:var(--mist-2);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
.foot-legal p{margin:0;max-width:none}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* Preview bar: says plainly this is a preview for the owner, not their live site */
.preview-bar{background:#2a2410;color:#efe3b5;font-size:.85rem;text-align:center;padding:.45rem var(--gut)}
.preview-bar a{color:#fff}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}