/* =========================================================================
   Reliable Medical Transport LLC
   Tokens first. Never hard-code a colour or a size in a rule below :root.
   ========================================================================= */
:root{
  /* brand -- sampled from assets/logo.png */
  --navy:#053C8E;            /* primary brand, 10.3:1 on white           */
  --navy-deep:#042A66;       /* hero gradient, footer                    */
  --navy-ink:#0A2149;        /* headings                                 */
  --azure:#0975BD;           /* links + secondary accent, 4.9:1 on white */
  --green:#66A725;           /* logo green -- graphics only, never text  */
  --green-btn:#4E8018;       /* CTA fill, 4.8:1 with white text          */
  --green-btn-hover:#437013;
  --green-bright:#8CC63F;    /* accent on the navy hero, 5.0:1           */

  /* neutrals */
  --ink:#16233A;
  --muted:#5A6779;
  --bg:#ffffff;
  --bg-alt:#F4F7FB;
  --line:#DCE3ED;
  --line-soft:#EDF1F7;
  --white:#ffffff;
  --err:#B3261E;
  --ok:#1C7C3F;

  /* type -- 18px base: the audience is elderly people and their carers */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-sm:1rem;
  --fs-xs:.875rem;

  /* space + shape */
  --wrap:1240px;
  --gut:1.25rem;
  --radius:10px;
  --radius-lg:18px;
  --field-h:56px;            /* generous tap targets -- never go smaller */
  --shadow-card:0 24px 60px rgba(2,20,54,.30);
  --shadow-soft:0 2px 10px rgba(10,33,73,.07);
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;font-family:var(--font);font-size:1.125rem;line-height:1.6;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azure)}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;color:var(--navy-ink);letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--azure);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- buttons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font:inherit;font-weight:700;text-decoration:none;cursor:pointer;text-align:center;
  min-height:var(--field-h);padding:.85rem 1.6rem;border:2px solid transparent;
  border-radius:var(--radius);transition:background-color .18s,border-color .18s,transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--green-btn);color:var(--white)}
.btn--primary:hover{background:var(--green-btn-hover)}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:var(--navy-deep)}
.btn--ghost{background:rgba(255,255,255,.08);color:var(--white);border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.18);border-color:var(--white)}
.btn--quiet{background:var(--bg-alt);color:var(--navy);border-color:var(--line)}
.btn--quiet:hover{background:var(--line-soft)}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn svg{width:20px;height:20px;flex:none;fill:currentColor}

/* ---------- header ----------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-soft);
}
.site-header .wrap{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;flex:none}
.brand picture{display:flex}
/* Header carries the wordmark only. The full stacked lockup renders its four
   lines of type at ~4px here -- unreadable. Same height budget, 3x the type. */
.brand img{height:44px;width:auto}
.nav{display:none}
.nav a{
  text-decoration:none;color:var(--navy-ink);font-weight:600;font-size:var(--fs-sm);
  padding:.5rem .1rem;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav a:hover{color:var(--navy);border-bottom-color:var(--green)}
.header-cta{margin-left:auto;display:flex;align-items:center;gap:1rem}
.header-phone{display:none;text-decoration:none}
.header-phone small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);line-height:1}
.header-phone strong{display:block;font-size:1.2rem;color:var(--navy);line-height:1.3;
  white-space:nowrap}   /* a phone number must never break across lines */
.header-phone:hover strong{color:var(--azure)}

.nav-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:0 11px;background:none;border:0;cursor:pointer;
}
.nav-toggle span{display:block;height:2.5px;background:var(--navy);border-radius:2px;
  transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.nav.open{
  display:flex;flex-direction:column;position:fixed;
  top:var(--header-h);left:0;right:0;background:var(--white);
  padding:.5rem var(--gut) 1.5rem;border-bottom:1px solid var(--line);
  box-shadow:0 20px 40px rgba(10,33,73,.14);
}
.nav.open a{padding:1rem .25rem;border-bottom:1px solid var(--line-soft)}

/* ---------- hero ------------------------------------------------------- */
.hero{position:relative;isolation:isolate;color:var(--white);
  padding:2rem 0 2.75rem;background:var(--navy-deep);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% center}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,26,70,.86) 0%,rgba(4,26,70,.74) 55%,rgba(4,26,70,.88) 100%)}
.hero .wrap{display:grid;gap:2rem}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-bright);
}
.hero__eyebrow::before{content:"";width:26px;height:2px;background:var(--green-bright);flex:none}
.hero h1{
  color:var(--white);margin:0 0 1rem;text-shadow:0 2px 24px rgba(2,16,44,.5);
  font-size:clamp(2.15rem,7vw,4.05rem);font-weight:800;letter-spacing:-.03em;line-height:1.03;
}
.hero__lede{margin:0 0 1.5rem;max-width:36ch;font-size:clamp(1.05rem,2.3vw,1.3rem);
  color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(2,16,44,.5)}
.hero__chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.6rem;padding:0;list-style:none}
.hero__chips li{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .9rem;border-radius:999px;font-size:var(--fs-xs);font-weight:600;
  background:rgba(3,20,54,.45);border:1px solid rgba(255,255,255,.26);
}
.hero__chips svg{width:17px;height:17px;fill:var(--green-bright);flex:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.hero__note{margin:1.35rem 0 0;font-size:var(--fs-xs);color:rgba(255,255,255,.76);max-width:40ch}

/* ---------- booking card ---------------------------------------------- */
.book{background:var(--white);color:var(--ink);border-radius:var(--radius-lg);
  padding:1.4rem 1.15rem 1.25rem;box-shadow:var(--shadow-card)}
.book__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:1.1rem}
.book__title{margin:0;font-size:1.35rem;font-weight:800;color:var(--navy-ink)}
.book__sub{margin:.15rem 0 0;font-size:var(--fs-xs);color:var(--muted)}
.book__steps{display:flex;gap:.4rem;flex:none;padding-top:.55rem}
.book__steps i{width:9px;height:9px;border-radius:50%;background:var(--line);
  transition:background-color .2s}
.book__steps i.on{background:var(--green-btn)}

.book__panel[hidden]{display:none}
.field{display:grid;gap:.3rem;margin-bottom:.65rem}
.field > span{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--fs-sm);color:var(--ink);width:100%;
  min-height:var(--field-h);padding:.7rem .9rem;
  background:var(--bg-alt);border:1.5px solid transparent;border-radius:var(--radius);
  transition:border-color .15s,background-color .15s;
}
.field textarea{min-height:66px;resize:vertical}
.field input::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  background:var(--white);border-color:var(--azure);outline:none}
.field.err input,.field.err select{border-color:var(--err);background:#FDF3F2}
/* scoped as a child so it beats `.field > span`, which sets the muted label colour */
.field > .field__msg{font-size:var(--fs-xs);font-weight:600;color:var(--err);display:none}
.field.err > .field__msg{display:block}

/* Uber-style connected pickup / dropoff pair */
.route{position:relative;margin-bottom:.8rem}
.route .field{margin-bottom:.5rem}
.route .field:last-child{margin-bottom:0}
.route__row{position:relative}
.route__row input{padding-left:2.9rem}
/* pickup carries the "use my location" button on its right edge -- without
   this the address runs underneath it */
#pickup{padding-right:3.4rem}
.route__marker{position:absolute;left:1.05rem;top:calc(var(--field-h)/2);
  transform:translateY(-50%);width:11px;height:11px;pointer-events:none;z-index:2;
  background:var(--navy-ink);box-shadow:0 0 0 3.5px var(--bg-alt),0 0 0 5px var(--navy-ink)}
.route__marker--dot{border-radius:50%}
.route__marker--sq{border-radius:2px}
.route__row input:focus ~ .route__marker{box-shadow:0 0 0 3.5px var(--white),0 0 0 5px var(--navy-ink)}
.route__line{position:absolute;left:calc(1.05rem + 4.5px);top:34px;height:calc(100% - 68px);
  width:2px;background:var(--line);z-index:1}
.geo-btn{
  position:absolute;right:.45rem;top:calc(var(--field-h)/2);transform:translateY(-50%);
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:8px;cursor:pointer;color:var(--azure);z-index:2;
}
.geo-btn:hover{background:var(--line-soft)}
.geo-btn svg{width:22px;height:22px;fill:currentColor}
.geo-btn.busy{pointer-events:none;opacity:.6}
.geo-btn.busy svg{animation:spin .9s linear infinite;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- address autocomplete dropdown ------------------------------ */
.ac{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  margin:0;padding:0;list-style:none;max-height:19rem;overflow-y:auto;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(10,33,73,.22);
}
.ac[hidden]{display:none}
.ac li{
  display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  padding:.7rem .85rem;min-height:52px;      /* tap target floor */
  border-bottom:1px solid var(--line-soft);
}
.ac li:last-child{border-bottom:0}
.ac li:hover,.ac li[aria-selected="true"]{background:#EAF1FC}
.ac__pin{width:18px;height:18px;flex:none;fill:var(--muted);margin-top:.15rem}
.ac__name{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--navy-ink);
  line-height:1.3}
.ac__addr{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.35}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
/* say it before they hit the error, not after */
.hint{margin:-.15rem 0 .85rem;font-size:var(--fs-xs);color:var(--muted);line-height:1.4}

/* mobility radio cards */
.choices{border:0;padding:0;margin:0 0 .65rem}
.choices legend{font-size:var(--fs-xs);font-weight:600;color:var(--muted);
  padding:0;margin-bottom:.4rem}
.choices__grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.choice{position:relative}
.choice input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:48px;padding:.45rem .55rem;font-size:.92rem;font-weight:600;line-height:1.25;
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s,background-color .15s,color .15s;
}
.choice input:checked + span{border-color:var(--navy);background:#EAF1FC;color:var(--navy)}
.choice input:focus-visible + span{outline:3px solid var(--azure);outline-offset:2px}

.check{display:flex;align-items:center;gap:.65rem;margin:0 0 .8rem;
  font-size:var(--fs-sm);cursor:pointer}
.check input{width:24px;height:24px;flex:none;accent-color:var(--navy);margin:0}

.book__actions{display:flex;gap:.55rem;margin-top:.2rem}
.book__actions .btn--quiet{flex:none;padding-inline:1rem}
.book__actions .btn--primary{flex:1}
.book__foot{margin:.85rem 0 0;text-align:center;font-size:var(--fs-xs);color:var(--muted)}
.book__foot a{font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap}
.book__foot a:hover{text-decoration:underline}
.book__status{margin:.7rem 0 0;font-size:var(--fs-xs);min-height:1.3em}
.book__status.err{color:var(--err);font-weight:600}

/* success state */
.book__done{text-align:center;padding:1.25rem .5rem 1.5rem}
.book__done svg{width:60px;height:60px;fill:var(--green-btn);margin:0 auto 1rem}
.book__done h3{font-size:1.3rem;margin-bottom:.5rem}
.book__done p{margin:0 0 .9rem;color:var(--muted);font-size:var(--fs-sm)}
.book__ref{display:inline-block;padding:.4rem 1rem;border-radius:999px;
  background:var(--bg-alt);font-weight:700;color:var(--navy);letter-spacing:.06em}

.hp{position:absolute;left:-9999px}    /* honeypot -- never remove */

/* ---------- generic sections ------------------------------------------ */
.section{padding:3.25rem 0}
.section--alt{background:var(--bg-alt)}
.section__head{max-width:62ch;margin-bottom:2rem}
.section__eyebrow{display:block;margin-bottom:.55rem;font-size:.76rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azure)}
.section h2{font-size:clamp(1.6rem,4.2vw,2.35rem);font-weight:800}
.section__lede{color:var(--muted);margin:0}
.todo{border:2px dashed var(--line);border-radius:var(--radius);padding:1.15rem;
  color:var(--muted);font-size:var(--fs-sm)}
.todo strong{color:var(--navy)}

/* ---------- service cards ---------------------------------------------- */
.cards{display:grid;gap:1.25rem;list-style:none;margin:0;padding:0}
.card{
  display:flex;flex-direction:column;overflow:hidden;height:100%;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);transition:transform .18s,box-shadow .18s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(10,33,73,.13)}
.card__media{position:relative;aspect-ratio:4/3;background:var(--bg-alt)}
/* <picture> is an inline box: without this, height:100% on the img has no
   containing height to resolve against and the image collapses. */
.card__media picture{display:block;width:100%;height:100%}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__tag{
  position:absolute;left:.85rem;bottom:.85rem;display:inline-flex;align-items:center;
  gap:.4rem;padding:.35rem .75rem;border-radius:999px;
  background:rgba(4,26,70,.86);color:var(--white);
  font-size:.75rem;font-weight:700;letter-spacing:.04em;
}
.card__tag svg{width:15px;height:15px;fill:var(--green-bright);flex:none}
.card__body{padding:1.25rem 1.25rem 1.4rem;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.25rem;font-weight:800;margin-bottom:.5rem}
.card p{margin:0;color:var(--muted);font-size:var(--fs-sm)}

/* the two services that do not need a photograph of their own */
.also{display:grid;gap:1rem;margin-top:1.25rem;list-style:none;padding:0}
.also li{
  display:flex;gap:1rem;align-items:flex-start;padding:1.15rem 1.25rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
}
.also .ico{
  flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  background:#EAF1FC;
}
.also .ico svg{width:24px;height:24px;fill:var(--navy)}
.also h3{font-size:1.08rem;font-weight:800;margin:0 0 .25rem}
.also p{margin:0;color:var(--muted);font-size:var(--fs-sm)}

.section__foot{margin:2rem 0 0;font-size:var(--fs-sm);color:var(--muted)}
.section__foot a{font-weight:700;color:var(--navy)}

/* ---------- how it works ------------------------------------------------ */
.steps{display:grid;gap:2rem;list-style:none;margin:0;padding:0;counter-reset:step}
.step{text-align:center;position:relative}
.step__art{
  width:168px;aspect-ratio:1;margin:0 auto 1.15rem;position:relative;
  background:var(--white);border:1px solid var(--line);border-radius:24px;
  box-shadow:var(--shadow-soft);padding:.5rem;
}
.step__art picture{display:block;width:100%;height:100%}
.step__art img{width:100%;height:100%;object-fit:contain}
.step__n{
  position:absolute;top:-12px;left:-12px;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--navy);color:var(--white);font-size:1.15rem;font-weight:800;
  border:4px solid var(--bg-alt);
}
.step h3{font-size:1.2rem;font-weight:800;margin-bottom:.45rem}
.step p{margin:0 auto;max-width:34ch;color:var(--muted);font-size:var(--fs-sm)}

/* ---------- two-column split (fleet, facilities, contact) -------------- */
.split{display:grid;gap:2rem;align-items:start}
.split + .split{margin-top:3rem}
.split__media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
.split h3{font-size:1.35rem;font-weight:800;margin-bottom:.6rem}

/* ---------- fleet mosaic ------------------------------------------------ */
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.mosaic picture{display:block}
.mosaic img{width:100%;height:100%;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.mosaic__lead{grid-column:1 / -1}
.mosaic__lead img{aspect-ratio:16/10}
.mosaic picture:not(.mosaic__lead) img{aspect-ratio:4/3}

/* pill list used for vehicle capabilities and driver credentials */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.25rem 0 0;padding:0}
.chips li{display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .85rem;border-radius:999px;font-size:.9rem;font-weight:600;
  background:var(--bg-alt);border:1px solid var(--line);color:var(--navy-ink)}
.section--alt .chips li{background:var(--white)}
.chips svg{width:16px;height:16px;flex:none;fill:var(--green-btn)}

.note{margin:1.25rem 0 0;padding:.85rem 1rem;border-radius:var(--radius);
  background:var(--bg-alt);border-left:4px solid var(--green);
  font-size:var(--fs-xs);color:var(--muted)}
.section--alt .note{background:var(--white)}

/* ---------- why choose us: photo occupies the first grid cell ---------- */
.pillars{display:grid;gap:1.25rem;list-style:none;margin:0;padding:0}
.pillar{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.4rem 1.35rem;box-shadow:var(--shadow-soft)}
.pillar__ico{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  background:#EAF1FC;margin-bottom:.9rem}
.pillar__ico svg{width:25px;height:25px;fill:var(--navy)}
.pillar h3{font-size:1.12rem;font-weight:800;margin-bottom:.4rem}
.pillar p{margin:0;color:var(--muted);font-size:var(--fs-sm)}

.pillars__media{border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-soft);min-height:220px}
.pillars__media picture{display:block;width:100%;height:100%}
.pillars__media img{width:100%;height:100%;object-fit:cover}

/* ---------- service area ----------------------------------------------- */
/* Full-bleed map. The figure sits OUTSIDE .wrap in the markup rather than
   escaping it with calc(50% - 50vw): 100vw counts the scrollbar, so the vw
   trick pushed 8px of horizontal scroll onto every page with one. */
.areamap{margin:0}
.areamap picture{display:block}
.areamap img{width:100%;height:auto;display:block;
  border-block:1px solid var(--line)}
.areamap figcaption{margin-top:.75rem;font-size:var(--fs-xs);
  color:var(--muted);line-height:1.45}
.areamap figcaption .wrap{display:block}
.areamap figcaption a{color:var(--muted);text-decoration:underline}

/* ---------- feature list (facilities) ---------------------------------- */
.features{list-style:none;margin:1.25rem 0 1.75rem;padding:0;display:grid;gap:.85rem}
.features li{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--fs-sm)}
.features svg{width:22px;height:22px;flex:none;fill:var(--green-btn);margin-top:.1rem}
.features strong{display:block;color:var(--navy-ink)}
.features span{color:var(--muted)}

/* ---------- contact ----------------------------------------------------- */
.contact-details{display:grid;gap:1.5rem}
.detail{display:flex;gap:1rem;align-items:flex-start}
.detail .ico{flex:none;width:46px;height:46px;display:grid;place-items:center;
  border-radius:12px;background:#EAF1FC}
.detail .ico svg{width:24px;height:24px;fill:var(--navy)}
.detail h3{font-size:1rem;font-weight:800;margin:0 0 .2rem}
.detail p{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.detail a{font-weight:700;color:var(--navy);text-decoration:none;font-size:1.05rem}
.detail a:hover{text-decoration:underline}

.hours{margin:.35rem 0 0;display:grid;gap:.2rem;font-size:var(--fs-sm);color:var(--muted)}
.hours div{display:flex;justify-content:space-between;gap:1rem;max-width:22rem}
.hours dt{font-weight:600}
.hours dd{margin:0}

.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem 1.25rem;box-shadow:var(--shadow-soft)}
.panel h3{font-size:1.25rem;font-weight:800;margin-bottom:.3rem}
.panel > p{margin:0 0 1.25rem;color:var(--muted);font-size:var(--fs-sm)}
.form-status{margin:.75rem 0 0;font-size:var(--fs-sm);min-height:1.4em;font-weight:600}
.form-status.ok{color:var(--ok)}
.form-status.err{color:var(--err)}

/* ---------- footer ----------------------------------------------------- */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.78);
  padding:3rem 0 6.5rem;font-size:var(--fs-sm)}
.site-footer picture{display:block;margin-bottom:1rem}
.site-footer img{height:92px;width:auto}
.site-footer a{color:var(--white)}
.site-footer h3{color:var(--white);font-size:1rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.85rem}
.footer__grid{display:grid;gap:2rem}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer__list a{text-decoration:none}
.footer__list a:hover{text-decoration:underline}
.footer__bottom{margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16);font-size:var(--fs-xs);display:grid;gap:.5rem}
.emergency{margin:0 0 1.5rem;padding:.85rem 1rem;border-radius:var(--radius);
  background:rgba(255,255,255,.08);border-left:4px solid var(--green-bright);
  font-size:var(--fs-xs);color:rgba(255,255,255,.92)}

/* ---------- sticky mobile call bar ------------------------------------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;
  grid-template-columns:1fr 1fr;gap:.55rem;
  padding:.55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom));
  background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(10,33,73,.13);
}
.callbar .btn{min-height:52px;padding-inline:.75rem;font-size:var(--fs-sm)}

/* ---------- breakpoints ------------------------------------------------ */
/* On phones the sticky call bar already carries "Call" and "Book", and the
   booking card sits directly under the copy -- so the duplicated hero buttons
   are dead weight pushing the card off screen. Drop them and tighten up. */
@media (max-width:639px){
  .hero{padding:1.5rem 0 2rem}
  .hero__actions{display:none}
  .hero__eyebrow{font-size:.7rem;letter-spacing:.1em;margin-bottom:.75rem}
  .hero h1{font-size:clamp(1.95rem,8.5vw,2.6rem);margin-bottom:.75rem}
  .hero__lede{font-size:1.05rem;margin-bottom:1.1rem;max-width:none}
  .hero__chips{gap:.4rem;margin-bottom:1.1rem}
  .hero__chips li{padding:.4rem .75rem;font-size:.8rem}
  .hero__note{margin-top:1.1rem}
  .hero .wrap{gap:1.5rem}
}

@media (min-width:640px){
  .hero{padding:3rem 0 4rem}
  .book{padding:1.75rem 1.6rem 1.5rem}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .step__art{width:140px}
  .pillars{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:1000px){
  :root{--gut:2rem}
  .brand img{height:50px}
  .nav{display:flex;gap:1.05rem;margin-left:1.5rem}
  .nav-toggle{display:none}
  .header-phone{display:block}
  .callbar{display:none}
  .site-footer{padding-bottom:3rem}

  .hero{padding:3.75rem 0 4.25rem}
  .hero__media img{object-position:64% center}
  /* Strong enough on the left to hold the h1, then it gets out of the way so
     the driver and passenger read in the gap between the copy and the card. */
  .hero__scrim{background:
    linear-gradient(96deg,rgba(4,26,70,.95) 0%,rgba(4,26,70,.90) 26%,
                    rgba(4,26,70,.66) 40%,rgba(4,26,70,.26) 54%,
                    rgba(4,26,70,.14) 72%,rgba(4,26,70,.30) 100%)}
  .hero .wrap{grid-template-columns:minmax(0,1fr) 420px;gap:3rem;align-items:center}
  .hero__lede{font-size:1.3rem}

  .footer__grid{grid-template-columns:1.5fr 1fr 1fr}
  .footer__bottom{grid-auto-flow:column;justify-content:space-between;align-items:center}
  .section{padding:4.5rem 0}

  .cards{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .pillars{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .also{grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem}
  .steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}
  .step__art{width:168px}   /* keep in step with the ::after connector below */
  .split{grid-template-columns:1fr 1fr;gap:3.5rem}
  .split--form{grid-template-columns:1fr 1.1fr}
  .split--middle{align-items:center}
  /* image to the right, so the fleet block does not repeat the mosaic's rhythm */
  .split--reverse .split__media{order:2}
  .split + .split{margin-top:4.5rem}
  /* connector between the three step tiles, drawn behind the artwork */
  .step:not(:last-child)::after{
    content:"";position:absolute;top:84px;left:calc(50% + 100px);width:calc(100% - 200px);
    height:2px;background:var(--line);
  }
}

@media (min-width:1180px){
  .hero .wrap{grid-template-columns:minmax(0,1fr) 450px;gap:4rem}
  .nav{gap:1.6rem;margin-left:2rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}