/* === 00-tokens.css === */
/* ============================================================
   MediCab™ — Design Tokens (SHARED CONTRACT — do not redefine)
   Brand: navy + red NEMT transportation. Calm, clinical-trust,
   premium-but-warm. All teams consume these variables.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --navy:        #0B2D6B;   /* primary — "Medi", headings, header */
  --navy-deep:   #07224F;   /* footer / dark bands */
  --navy-700:    #103a86;   /* hover/lighter navy */
  --red:         #E01B22;   /* accent — "Cab", CTAs, cross */
  --red-dark:    #B5141A;   /* CTA hover */
  --steel:       #9FB0CA;   /* figure gray / muted brand */
  --steel-200:   #C9D5E6;

  /* ---- Neutrals ---- */
  --ink:         #0F1B2D;   /* body text */
  --ink-600:     #44516A;   /* secondary text */
  --ink-400:     #5C6A85;   /* muted — darkened to clear 4.5:1 on white/tints */
  --line:        #E2E8F2;   /* hairlines/borders */
  --bg:          #FFFFFF;
  --bg-tint:     #EAF1FA;   /* soft blue section bg (matches logo bg) */
  --bg-tint-2:   #F4F8FD;
  --white:       #FFFFFF;

  /* ---- Gradients ---- */
  --grad-hero:   linear-gradient(180deg,#FFFFFF 0%,#E8EFF9 100%);
  --grad-navy:   linear-gradient(160deg,#103a86 0%,#0B2D6B 55%,#07224F 100%);
  --grad-cta:    linear-gradient(180deg,#E94A50 0%,#E01B22 100%);

  /* ---- Type ---- */
  --font-sans:   "Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-display:"Poppins","Inter",system-ui,sans-serif; /* heavy, close to wordmark */
  --fw-normal:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-black:800;

  /* fluid type scale */
  --fs-hero:   clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem);
  --fs-h2:     clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
  --fs-h3:     clamp(1.2rem, 1.0rem + 0.8vw, 1.5rem);
  --fs-lead:   clamp(1.05rem, 1.0rem + 0.4vw, 1.3rem);
  --fs-body:   1.0625rem;
  --fs-sm:     0.9rem;

  /* ---- Space / layout ---- */
  --maxw:      1200px;
  --gutter:    clamp(1.1rem, 0.6rem + 2.2vw, 2.5rem);
  --sec-y:     clamp(3.5rem, 2rem + 6vw, 7rem);
  --radius:    16px;
  --radius-sm: 10px;
  --radius-pill:999px;

  /* ---- Elevation ---- */
  --sh-sm: 0 1px 2px rgba(11,45,107,.06), 0 2px 6px rgba(11,45,107,.06);
  --sh-md: 0 6px 18px rgba(11,45,107,.10), 0 2px 6px rgba(11,45,107,.06);
  --sh-lg: 0 18px 48px rgba(11,45,107,.16), 0 6px 16px rgba(11,45,107,.08);
  --sh-cta:0 10px 24px rgba(224,27,34,.30);

  --ease: cubic-bezier(.22,.61,.36,1);
}


/* === 10-base.css === */
/* ============================================================
   MediCab™ — 10-base.css  (Team A)
   Modern reset · base typography · layout primitives · buttons
   Consumes tokens from 00-tokens.css. No new hexes invented.
   ============================================================ */

/* ---- Modern reset ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top: 92px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg { fill: currentColor; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  line-height: 1.1;
  color: var(--navy);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--red); }

/* ---- Base type scale ------------------------------------- */
h1 { font-size: var(--fs-hero); font-weight: var(--fw-black); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2);   font-weight: var(--fw-black); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3);   font-weight: var(--fw-bold); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-600);
}

small, .text-sm { font-size: var(--fs-sm); }

strong, b { font-weight: var(--fw-semi); }

/* ---- Layout: container + section rhythm ------------------ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 880px; }

.section {
  padding-block: var(--sec-y);
}

.section--tint   { background: var(--bg-tint); }
.section--tint-2 { background: var(--bg-tint-2); }
.section--navy   { background: var(--grad-navy); color: var(--white); }
.section--navy :where(h1,h2,h3,h4) { color: var(--white); }

/* Section header block (eyebrow + title + lead) */
.section__head {
  max-width: 64ch;
  margin-inline: auto;
}
.section__head--center { text-align: center; }
.section__head > * + * { margin-top: 0.85rem; }

/* ---- Eyebrow --------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}
.section--navy .eyebrow { color: var(--steel); }
.section--navy .eyebrow::before { background: var(--steel); }

/* On soft-blue tinted sections the bright red eyebrow dips below 4.5:1 — use the
   darker red so it clears AA. (Booking, Services and FAQ all sit on --bg-tint.) */
.section--services .eyebrow,
.section--faq .eyebrow,
.booking .eyebrow {
  color: var(--red-dark);
}
.section--services .eyebrow::before,
.section--faq .eyebrow::before,
.booking .eyebrow::before {
  background: var(--red-dark);
}

/* ---- Red medical-cross accent helper --------------------- */
.icon-cross {
  --cross-size: 1.1em;
  --cross-bar: 0.34em;
  position: relative;
  display: inline-block;
  width: var(--cross-size);
  height: var(--cross-size);
  flex: none;
}
.icon-cross::before,
.icon-cross::after {
  content: "";
  position: absolute;
  background: var(--red);
  border-radius: 2px;
}
.icon-cross::before { /* vertical bar */
  left: 50%;
  top: 0;
  width: var(--cross-bar);
  height: 100%;
  transform: translateX(-50%);
}
.icon-cross::after { /* horizontal bar */
  top: 50%;
  left: 0;
  height: var(--cross-bar);
  width: 100%;
  transform: translateY(-50%);
}

/* ---- Button system --------------------------------------- */
.btn {
  --btn-py: 0.85rem;
  --btn-px: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;          /* > 44px tap target */
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--fw-semi);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-align: center;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* Primary — red CTA */
.btn--primary {
  background: var(--grad-cta);
  color: var(--white);
  box-shadow: var(--sh-cta);
}
.btn--primary:hover {
  background: var(--red-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(224, 27, 34, 0.38);
}
.btn--primary:active { transform: translateY(0); box-shadow: var(--sh-cta); }
.btn--primary:focus-visible { outline-color: var(--navy); }

/* Ghost — navy outline */
.btn--ghost {
  background: var(--white);
  color: var(--navy);
  border-color: var(--steel-200);
  box-shadow: var(--sh-sm);
}
.btn--ghost:hover {
  color: var(--navy);
  border-color: var(--navy);
  background: var(--bg-tint-2);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.btn--ghost:active { transform: translateY(0); }

/* Ghost variant on dark / navy surfaces */
.section--navy .btn--ghost,
.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}
.section--navy .btn--ghost:hover,
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
}
.section--navy .btn:focus-visible,
.btn--ghost-light:focus-visible { outline-color: var(--white); }

/* Large */
.btn--lg {
  --btn-py: 1.05rem;
  --btn-px: 2rem;
  min-height: 56px;
  font-size: 1.075rem;
}

.btn--block { width: 100%; }

/* ---- Pill (trust / tag) ---------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 40px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--sh-sm);
}
.pill svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--red); }
.pill--ghost {
  background: transparent;
  border-color: var(--steel-200);
  box-shadow: none;
}

/* ---- Card ------------------------------------------------ */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
  box-shadow: var(--sh-sm);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

/* ---- Generic utilities (shared) -------------------------- */
.u-center  { text-align: center; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-2 { margin-top: 1.5rem; }
.u-mt-3 { margin-top: 2rem; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.cta-row--center { justify-content: center; }


/* === 20-header-hero.css === */
/* ============================================================
   MediCab™ — 20-header-hero.css  (Team A)
   Sticky translucent header + mobile drawer · premium hero
   ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* NOTE: no backdrop-filter here — it would make the header the containing
     block for the fixed mobile nav drawer, trapping the drawer to header height.
     Use a near-opaque background instead. */
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s var(--ease),
              background-color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-md);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 76px;
  padding-block: 0.6rem;
}

/* ---- Logo lockup ----------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--navy);
  line-height: 1;
}
.brand:hover { color: var(--navy); }
.brand:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 4px;
  border-radius: 6px;
}
.brand__svg {
  height: 38px;
  width: auto;
}
/* Brand-mark colors driven via CSS (reliable token consumption in SVG) */
.brand__svg .bl-fill-navy   { fill: var(--navy); }
.brand__svg .bl-fill-red    { fill: var(--red); }
.brand__svg .bl-fill-muted  { fill: var(--ink-400); }
.brand__svg .bl-stroke-navy  { stroke: var(--navy); }
.brand__svg .bl-stroke-red   { stroke: var(--red); }
.brand__svg .bl-stroke-steel { stroke: var(--steel); }

/* ---- Primary navigation ---------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  font-size: 0.97rem;
  font-weight: var(--fw-med);
  color: var(--ink-600);
  border-radius: var(--radius-sm);
  position: relative;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav__link:hover { color: var(--navy); background: var(--bg-tint); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Phone link in header */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  font-weight: var(--fw-semi);
  color: var(--navy);
  white-space: nowrap;
}
.header-phone:hover { color: var(--red); }
.header-phone svg { width: 1.1rem; height: 1.1rem; color: var(--red); flex: none; }
.header-phone__label {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.header-phone__tag {
  font-size: 0.68rem;
  font-weight: var(--fw-med);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ---- Mobile nav toggle ----------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  color: var(--navy);
  border: 1px solid var(--line);
  background: var(--white);
}
.nav-toggle:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.nav-toggle__bars {
  position: relative;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color 0.2s var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top:  7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* ============================================================
   RESPONSIVE — mobile drawer
   ============================================================ */
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 360px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem 1.5rem 2rem;
    background: var(--white);
    box-shadow: var(--sh-lg);
    overflow-y: auto;
    z-index: 90;
    display: none;            /* closed: removed from layout → cannot extend the page width */
  }
  .nav.is-open {
    display: flex;            /* re-shows as the column drawer (flex-direction set above) */
    animation: navIn 0.28s var(--ease) both;
  }
  @keyframes navIn {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    width: 100%;
  }
  .nav__link {
    min-height: 52px;
    padding: 0.75rem 0.9rem;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav__link::after { display: none; }

  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1.75rem;
  }
  .header-phone {
    justify-content: center;
    min-height: 52px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
  }
  .nav__actions .btn { width: 100%; }

  /* dim backdrop behind the drawer */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 34, 79, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s var(--ease), visibility 0.32s var(--ease);
    z-index: 80;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  body.nav-locked { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-backdrop,
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { transition: none; }
  .nav.is-open { animation: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--grad-hero);
  padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
  overflow: hidden;
}

/* soft decorative cross / motion-line accents */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  width: 460px; height: 460px;
  top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(159,176,202,0.30) 0%, rgba(159,176,202,0) 70%);
}
.hero::after {
  width: 360px; height: 360px;
  bottom: -140px; left: -120px;
  background: radial-gradient(circle, rgba(224,27,34,0.10) 0%, rgba(224,27,34,0) 70%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.hero__content { max-width: 38rem; }

.hero__title {
  margin-top: 1.1rem;
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--navy);
}
.hero__title .accent { color: var(--red); }
.hero__title .sm-mark {
  font-size: 0.42em;
  font-weight: var(--fw-bold);
  vertical-align: super;
  letter-spacing: 0;
  color: var(--ink-400);
}

.hero__subhead {
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-600);
}

.hero__cta {
  margin-top: 2rem;
}

/* trust pills row */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  list-style: none;
}
.hero__trust .pill { background: rgba(255, 255, 255, 0.7); }

/* ---- Hero visual ----------------------------------------- */
.hero__media {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 560px;
}
.hero__figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--white);
  border: 1px solid var(--line);
  will-change: transform;
  animation: hero-float 7s var(--ease) infinite;
}
.hero__figure img {
  width: 100%;
  height: 100%;
  display: block;
  /* Tight crop on the van + deployed ramp only. The source raster bakes in a
     second logo, a feature strip and a promise band that are all repeated
     elsewhere on the page — object-fit/position frames just the vehicle so the
     headline and trust pills carry the message without duplication. */
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 80% 34%;
}
@media (max-width: 900px) {
  .hero__figure img { aspect-ratio: 16 / 10; object-position: 78% 36%; }
}

/* floating "24/7" badge card */
.hero__badge {
  position: absolute;
  left: -14px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--sh-lg);
  animation: hero-float 7s var(--ease) infinite reverse;
}
.hero__badge-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--red);
}
.hero__badge-mark svg { width: 22px; height: 22px; }
.hero__badge-text { line-height: 1.2; }
.hero__badge-text b {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
  color: var(--navy);
}
.hero__badge-text span { font-size: 0.78rem; color: var(--ink-400); }

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__figure,
  .hero__badge { animation: none; }
}

/* ---- Hero responsive ------------------------------------- */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  .hero__content { max-width: 100%; margin-inline: auto; }
  .hero .eyebrow { justify-content: center; }
  .hero__cta { justify-content: center; }
  .hero__trust { justify-content: center; }
  .hero__media { justify-self: center; margin-inline: auto; }
}

@media (max-width: 520px) {
  .hero__badge { left: 8px; bottom: 12px; padding: 0.7rem 0.85rem; }
  .hero__badge-mark { width: 36px; height: 36px; }
}


/* === 30-sections.css === */
/* ============================================================
   MediCab™ — 30-sections.css  (Team B)
   Pillars · Services · How It Works · Promises + Who We Serve · FAQ + Testimonials
   Consumes tokens from 00-tokens.css. No new hexes.
   ============================================================ */

/* ---- Shared section headers (Team B sections) ------------- */
.section-head {
  max-width: 56ch;
  margin: 0 auto clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem);
  text-align: center;
}
.section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0.55rem 0 0;
  text-wrap: balance;
}
.section-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-600);
  margin: 1rem 0 0;
}
.section-head--invert { /* header used on navy band */ }
.section-title--invert { color: var(--white); }
.eyebrow--invert { color: var(--steel-200); }

/* The .eyebrow + leading cross accent. (.eyebrow base lives in Team A 10-base;
   these are additive, safe defaults if loaded first.) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}
.eyebrow .icon-cross { flex: 0 0 auto; }

/* Red medical-cross accent chip (shared .icon-cross) */
.icon-cross {
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  background: var(--red);
  /* plus-sign mask = medical cross */
  -webkit-mask: linear-gradient(var(--red) 0 0) center/100% 34% no-repeat,
                linear-gradient(var(--red) 0 0) center/34% 100% no-repeat;
          mask: linear-gradient(#000 0 0) center/100% 34% no-repeat,
                linear-gradient(#000 0 0) center/34% 100% no-repeat;
  border-radius: 1px;
}
.eyebrow--invert .icon-cross { background: var(--red); }

/* ============================================================
   PILLARS  (#why)
   ============================================================ */
.section--why { background: var(--bg); }

.pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.6vw, 1.6rem);
  grid-template-columns: repeat(4, 1fr);
}
.pillar {
  text-align: center;
  padding: clamp(1.4rem, 1rem + 1vw, 2rem) 1.2rem;
  background: var(--bg-tint-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-md);
  border-color: var(--steel-200);
}
.pillar__icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  color: var(--navy);
  background: var(--bg);
  border: 1px solid var(--steel-200);
  border-radius: 50%;
  box-shadow: var(--sh-sm);
}
.pillar__icon svg { width: 32px; height: 32px; }
.pillar__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.pillar__copy {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0;
}

/* ============================================================
   SERVICES  (#services)
   ============================================================ */
.section--services { background: var(--bg-tint); }

.services-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.6vw, 1.6rem);
  grid-template-columns: repeat(3, 1fr);
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* top red accent rule revealed on hover */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: var(--steel-200);
}
.service-card:hover::before { transform: scaleX(1); }

.service-card__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.1rem;
  color: var(--red);
  background: var(--bg-tint);
  border-radius: var(--radius-sm);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.service-card:hover .service-card__icon {
  background: var(--navy);
  color: var(--white);
}
.service-card__icon svg { width: 30px; height: 30px; }
.service-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--navy);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.service-card__copy {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
}

/* ============================================================
   HOW IT WORKS  (#how)  — connected numbered timeline
   ============================================================ */
.section--how { background: var(--bg); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.2rem, 0.6rem + 1.6vw, 2rem);
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.step {
  position: relative;
  text-align: center;
  padding: 0 0.6rem;
}
/* connecting line between steps (desktop) */
.step::after {
  content: "";
  position: absolute;
  top: 30px;            /* center of the 60px badge */
  left: calc(50% + 38px);
  right: calc(-50% + 38px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--steel-200) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.step:last-child::after { display: none; }

.step__num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.5rem;
  color: var(--white);
  background: var(--grad-navy);
  border-radius: 50%;
  box-shadow: var(--sh-md);
}
.step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.step__copy {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
  max-width: 28ch;
  margin-inline: auto;
}

/* ============================================================
   TRUST  (#about)  — navy promise band + who we serve
   ============================================================ */
.section--trust { padding: 0; background: var(--bg); }

/* Navy promise band */
.promises {
  background: var(--grad-navy);
  color: var(--white);
  padding-block: var(--sec-y);
  position: relative;
  overflow: hidden;
}
/* faint cross watermark, decorative, never over readable text edge */
.promises::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 220px;
  height: 220px;
  background: var(--red);
  opacity: 0.08;
  -webkit-mask: linear-gradient(#000 0 0) center/100% 30% no-repeat,
                linear-gradient(#000 0 0) center/30% 100% no-repeat;
          mask: linear-gradient(#000 0 0) center/100% 30% no-repeat,
                linear-gradient(#000 0 0) center/30% 100% no-repeat;
  pointer-events: none;
}
.promise-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.4rem, 0.8rem + 2vw, 2.4rem);
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 1;
}
.promise { text-align: center; }
.promise__icon {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 1.1rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}
.promise__icon svg { width: 34px; height: 34px; }
.promise__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--white);
  margin: 0 0 0.35rem;
}
.promise__copy {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--steel-200);
  margin: 0;
}

/* Who we serve */
.serve {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-block: var(--sec-y);
}
.serve__intro .section-title { text-align: left; }
.serve__intro .eyebrow { margin-bottom: 0.5rem; }
.serve__intro .section-lead { margin-top: 1rem; }

.serve-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.serve-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--bg-tint-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-600);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.serve-item:hover { border-color: var(--steel-200); background: var(--bg-tint); }
.serve-item strong { color: var(--navy); font-weight: var(--fw-semi); }
.serve-item__mark {
  flex: 0 0 auto;
  margin-top: 0.18em;
  width: 1.05em;
  height: 1.05em;
  background: var(--red);
  -webkit-mask: linear-gradient(#000 0 0) center/100% 34% no-repeat,
                linear-gradient(#000 0 0) center/34% 100% no-repeat;
          mask: linear-gradient(#000 0 0) center/100% 34% no-repeat,
                linear-gradient(#000 0 0) center/34% 100% no-repeat;
}

/* ============================================================
   FAQ  (#faq)  + testimonials
   ============================================================ */
.section--faq { background: var(--bg-tint); }

.faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 0.85rem;
}
.faq-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item:hover { border-color: var(--steel-200); }
.faq-h { margin: 0; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 56px;
  padding: 1.05rem 1.25rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--navy);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.faq-q:hover { color: var(--navy-700); }
.faq-item:has(.faq-q[aria-expanded="true"]) { border-color: var(--steel-200); box-shadow: var(--sh-md); }

/* chevron */
.faq-chev {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
  color: var(--red);
  transition: transform .35s var(--ease);
}
.faq-chev::before,
.faq-chev::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
}
.faq-chev::before { left: 1px;  transform: translateY(-50%) rotate(45deg); }
.faq-chev::after  { right: 1px; transform: translateY(-50%) rotate(-45deg); }
.faq-q[aria-expanded="true"] .faq-chev { transform: rotate(180deg); }

/* Answer region.
   No-JS / JS-off: the [hidden] attribute keeps it collapsed and out of the a11y
   tree until expanded — correct, accessible default.
   With JS (html.js): Team C removes [hidden] to open. We animate the open state
   smoothly using a grid-rows technique driven by the button's aria-expanded,
   so height transitions are graceful without measuring pixels. */
.faq-a {
  color: var(--ink-600);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.faq-a > * {
  padding-inline: 1.25rem;
}
.faq-a p { margin: 0; padding-bottom: 1.2rem; }
.faq-a p + p { margin-top: 0.75rem; }

/* [hidden] is always authoritative — collapsed answers are truly removed from
   the accessibility tree (display:none). This is the accessible default and is
   never overridden, so screen-reader users only encounter open answers. */
.faq-a[hidden] { display: none; }

/* Progressive smooth OPEN when JS is active: once Team C removes [hidden],
   the answer is present, and we ease it down from collapsed to full height via
   the grid-rows technique (no pixel measuring needed). */
@media (prefers-reduced-motion: no-preference) {
  html.js .faq-a:not([hidden]) {
    display: grid;
    grid-template-rows: 1fr;
    overflow: clip;
    animation: faq-open .4s var(--ease);
  }
  html.js .faq-a:not([hidden]) > * { min-height: 0; }
}
@keyframes faq-open {
  from { grid-template-rows: 0fr; opacity: 0; }
  to   { grid-template-rows: 1fr; opacity: 1; }
}

/* Testimonials */
.testimonials {
  margin-top: clamp(2.6rem, 1.6rem + 3vw, 4.5rem);
}
.testimonials__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--navy);
  text-align: center;
  margin: 0 0 1.6rem;
}
.testimonial-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.6vw, 1.6rem);
  grid-template-columns: repeat(3, 1fr);
}
.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 1.6rem 1.6rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
}
.testimonial__quote {
  position: absolute;
  top: 0.2rem;
  left: 1.2rem;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--steel-200);
}
.testimonial__copy {
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.testimonial__cite {
  margin: auto 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  color: var(--red);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }

  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .step::after { display: none; }
}

@media (max-width: 760px) {
  .promise-grid { grid-template-columns: 1fr; gap: 2rem; }
  .serve { grid-template-columns: 1fr; }
  .serve__intro .section-title { text-align: left; }
}

@media (max-width: 600px) {
  .pillars { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .faq-q { font-size: var(--fs-body); }
}

/* ============================================================
   MOTION — reveal entrance (progressive-enhancement, fail-safe).
   Content is ALWAYS visible by default. Animation only engages when a
   root <html class="js"> hook is present AND motion is allowed. Team C's
   IntersectionObserver then adds .is-visible (or .reveal-in on a wrapper)
   to play the entrance. With JS off (no .js), nothing is ever hidden.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js .pillar,
  html.js .service-card,
  html.js .step,
  html.js .promise,
  html.js .serve-item,
  html.js .faq-item,
  html.js .testimonial {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease),
                box-shadow .35s var(--ease), border-color .35s var(--ease);
    will-change: opacity, transform;
  }
  html.js .is-visible,
  html.js .reveal-in .pillar,
  html.js .reveal-in .service-card,
  html.js .reveal-in .step,
  html.js .reveal-in .promise,
  html.js .reveal-in .serve-item,
  html.js .reveal-in .faq-item,
  html.js .reveal-in .testimonial {
    opacity: 1;
    transform: none;
  }
}


/* === 40-forms-footer.css === */
/* ============================================================
   MediCab™ — Team C: Booking form, closing CTA, footer,
   mobile action bar. Consumes shared tokens only.
   ============================================================ */

/* ---------------------------------------------------------
   BOOKING — #book "Request a Ride"
   --------------------------------------------------------- */
.booking {
  background: var(--bg-tint);
  position: relative;
  overflow: hidden;
}
.booking::before {
  /* faint medical-cross watermark, decorative only */
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 320px;
  height: 320px;
  background:
    linear-gradient(var(--steel-200), var(--steel-200)) center/100% 30% no-repeat,
    linear-gradient(var(--steel-200), var(--steel-200)) center/30% 100% no-repeat;
  opacity: .18;
  border-radius: 36px;
  transform: rotate(8deg);
  pointer-events: none;
}
.booking__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) {
  .booking__inner { grid-template-columns: 1fr; }
}

/* Left rail — reassurance + phone */
.booking__aside {
  position: sticky;
  top: 96px;
}
@media (max-width: 860px) {
  .booking__aside { position: static; }
}
.booking__aside .eyebrow { color: var(--red); }
.booking__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: 1.08;
  color: var(--navy);
  margin: .35rem 0 .75rem;
}
.booking__lead {
  font-size: var(--fs-lead);
  color: var(--ink-600);
  margin: 0 0 1.5rem;
  max-width: 38ch;
}
.booking__assure {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.booking__assure li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--ink);
  font-weight: var(--fw-med);
}
.booking__assure svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--red);
  margin-top: 1px;
}

/* 24/7 phone card */
.booking__call {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--sh-sm);
}
.booking__call-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
}
.booking__call-icon svg { width: 24px; height: 24px; }
.booking__call-text { line-height: 1.3; }
.booking__call-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-400);
  font-weight: var(--fw-med);
}
.booking__call a {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  color: var(--navy);
  text-decoration: none;
}
.booking__call a:hover { color: var(--red); }

/* The form card */
.booking__form-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sh-lg);
  padding: clamp(1.4rem, 1rem + 2vw, 2.5rem);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field > label,
.fieldset > legend {
  font-weight: var(--fw-semi);
  color: var(--navy);
  font-size: var(--fs-sm);
  letter-spacing: .01em;
}
.req { color: var(--red); margin-left: .15rem; }
.field__hint {
  font-size: .8rem;
  color: var(--ink-400);
}

/* Inputs */
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--bg-tint-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .72rem .85rem;
  min-height: 48px;
  width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  appearance: none;
}
.field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}
.field select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230B2D6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.6rem;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-400); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--steel); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(11, 45, 107, .14);
}

/* Fieldsets (trip type, mobility) */
.fieldset {
  grid-column: 1 / -1;
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.fieldset > legend {
  padding: 0;
  margin-bottom: .15rem;
}
.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
/* Pill-style radio choices */
.choice {
  position: relative;
  display: flex;
}
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-tint-2);
  color: var(--ink-600);
  font-weight: var(--fw-med);
  font-size: var(--fs-sm);
  transition: all .16s var(--ease);
  cursor: pointer;
}
.choice:hover span { border-color: var(--steel); }
.choice input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.choice input:focus-visible + span {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.choice input:checked:focus-visible + span {
  outline-color: var(--red);
}

/* Error states */
.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--red);
  background: #FFF5F5;
}
.field--error input:focus,
.field--error select:focus,
.field--error textarea:focus {
  box-shadow: 0 0 0 4px rgba(224, 27, 34, .16);
}
.field-error {
  display: none;
  align-items: center;
  gap: .35rem;
  color: var(--red-dark);
  font-size: .82rem;
  font-weight: var(--fw-med);
}
.field-error::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: var(--red-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;
}
.field--error .field-error { display: flex; }
.fieldset.field--error > legend { color: var(--red-dark); }

/* Submit row */
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: .35rem;
}
.form-actions .btn { width: auto; }
.form-note {
  font-size: .82rem;
  color: var(--ink-400);
  line-height: 1.4;
  flex: 1 1 220px;
  min-width: 0;
}

/* aria-live status region */
.form-status {
  grid-column: 1 / -1;
  margin: 0;
}
.form-status:empty { display: none; }
.form-status__msg {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-med);
  line-height: 1.45;
}
.form-status__msg svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.form-status__msg--ok {
  background: #ECF8F0;
  border: 1.5px solid #9BD7AD;
  color: #14633A;
}
.form-status__msg--ok svg { color: #1A8A4E; }
.form-status__msg--err {
  background: #FFF5F5;
  border: 1.5px solid #F2B5B7;
  color: var(--red-dark);
}
.form-status__msg--err svg { color: var(--red-dark); }
.form-status__head { margin: 0 0 .4rem; font-weight: var(--fw-semi); }
.form-status__list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.form-status__list a {
  color: var(--red-dark);
  font-weight: var(--fw-semi);
  text-underline-offset: 2px;
}
.form-status__list a:hover { color: var(--navy); }

/* Emergency notice at the point of conversion (NEMT trust + safety). */
.booking__emergency {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0;
  padding: .85rem 1rem;
  background: #FFF5F5;
  border: 1px solid #F2B5B7;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-600);
}
.booking__emergency svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--red-dark); margin-top: 1px; }
.booking__emergency strong { color: var(--red-dark); }
.booking__emergency a { color: var(--red-dark); font-weight: var(--fw-bold); }

/* ---------------------------------------------------------
   CLOSING CTA BAND
   --------------------------------------------------------- */
.cta-band {
  background: var(--grad-navy);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  /* subtle red cross accent, decorative */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -120px;
  transform: translateX(-50%);
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(224, 27, 34, .28) 0%, rgba(224, 27, 34, 0) 62%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
}
.cta-band .eyebrow { color: var(--steel-200); }
.cta-band__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: 1.08;
  margin: .4rem 0 .6rem;
  color: var(--white);
}
.cta-band__tagline {
  font-size: var(--fs-lead);
  color: var(--steel-200);
  margin: 0 0 1.9rem;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
/* Ghost button needs white treatment on the dark band.
   FIX: base .btn--ghost has background:var(--white); without overriding it here
   the white label sat on a white pill (invisible). Force a transparent fill. */
.cta-band .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
  box-shadow: none;
}
.cta-band .btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--white);
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep);
  color: var(--steel-200);
  font-size: var(--fs-body);
}
.site-footer a { color: var(--steel-200); text-decoration: none; }
.site-footer a:hover { color: var(--white); }

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-bottom: 2.5rem;
}
@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .footer__top { grid-template-columns: 1fr; }
}

.footer__mark {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 1rem;
  background: var(--white);
  padding: 4px;
  box-shadow: var(--sh-sm);
}
.footer__brand .footer__wordmark { display: block; margin-bottom: 1rem; }
.footer__wordmark svg { height: 38px; width: auto; }
.footer__tagline {
  color: var(--steel-200);
  font-style: italic;
  margin: 0 0 1.25rem;
  max-width: 34ch;
}
.footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.5rem;
}
.footer__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-pill);
  padding: .35rem .7rem;
}
.footer__badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
}
.footer__social {
  display: flex;
  gap: .6rem;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--steel-200);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.footer__social a:hover { background: var(--red); color: var(--white); border-color: var(--red); }
.footer__social svg { width: 20px; height: 20px; }

.footer__col h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  color: var(--white);
  margin: 0 0 1rem;
  letter-spacing: .01em;
}
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  line-height: 1.4;
}
.footer__contact svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--red);
  margin-top: 2px;
}
.footer__contact strong { color: var(--white); font-weight: var(--fw-semi); display: block; }
.footer__hours-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .15rem;
  font-size: .78rem;
  font-weight: var(--fw-bold);
  color: var(--white);
  background: rgba(224, 27, 34, .18);
  border: 1px solid rgba(224, 27, 34, .35);
  border-radius: var(--radius-pill);
  padding: .3rem .7rem;
}
.footer__hours-pill .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #45D483;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 1.5rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.footer__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .82rem;
  color: var(--steel);
  line-height: 1.5;
  max-width: 62ch;
}
.footer__disclaimer svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--red); margin-top: 1px; }
.footer__disclaimer strong { color: var(--white); }
.footer__meta {
  font-size: .82rem;
  color: var(--steel);
  line-height: 1.5;
  text-align: right;
}
.footer__meta .footer__domain { color: var(--steel-200); }
@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__meta { text-align: left; }
}

/* ---------------------------------------------------------
   MOBILE STICKY ACTION BAR
   --------------------------------------------------------- */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: .6rem;
  padding: .6rem var(--gutter)
           calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(11, 45, 107, .10);
}
.mobile-cta-bar .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: .5rem;
}
.mobile-cta-bar .btn svg { width: 19px; height: 19px; }

/* Aligned to the header's 920px hamburger breakpoint so the call-now and
   book paths are always reachable — no dead-zone where both collapse into the
   drawer with no visible conversion path. */
@media (max-width: 920px) {
  .mobile-cta-bar { display: flex; }
  /* keep the floating bar from covering page-end content */
  .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}


/* === 50-a11y.css === */
/* ============================================================
   MediCab™ — Team C: Accessibility layer
   Skip link · focus-visible · sr-only · reduced-motion.
   Loaded LAST so focus + reduced-motion rules win.
   WCAG 2.2 AA — this is a disability-transport brand.
   ============================================================ */

/* ---- Skip link: hidden until focused, jumps to #main ---- */
.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 200;
  transform: translateY(-150%);
  display: inline-block;
  padding: .75rem 1.25rem;
  min-height: 44px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--sh-lg);
  transition: transform .18s var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* ---- Visible focus for keyboard users (brand navy, 3px, offset) ---- */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On dark/navy surfaces the navy ring would vanish — use red there */
.cta-band :focus-visible,
.site-footer :focus-visible,
.site-header.is-scrolled :focus-visible,
.mobile-cta-bar :focus-visible {
  outline-color: var(--red);
}
/* Mouse users who don't trigger :focus-visible shouldn't see a ring */
:focus:not(:focus-visible) { outline: none; }

/* ---- Screen-reader-only utility ---- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Becomes visible if it ever receives focus (e.g. an sr-only link) */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Honor reduced-motion: kill transforms, animations, smooth scroll ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal items must be fully visible even with no animation */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}



/* ============================================================
   HERO v2 — full-bleed accessible-van photo + navy scrim
   (overrides the original flat white-gradient hero)
   ============================================================ */
.hero--photo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 86vh, 840px);
  padding-block: clamp(2.5rem, 7vh, 5rem);
  background: var(--navy-deep);
  overflow: hidden;
}
.hero--photo .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 42%;
  z-index: -2;
  transform-origin: 72% 50%;
  animation: heroZoom 24s var(--ease) both;
}
@keyframes heroZoom { from { transform: scale(1.09); } to { transform: scale(1); } }

.hero--photo .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(98deg,
      rgba(5,24,58,.96) 0%,
      rgba(8,34,82,.90) 24%,
      rgba(11,45,107,.66) 50%,
      rgba(11,45,107,.30) 76%,
      rgba(11,45,107,.10) 100%),
    linear-gradient(180deg, rgba(5,22,54,.34) 0%, rgba(5,22,54,0) 26%, rgba(4,18,46,.50) 100%);
}

.hero--photo .hero__inner { display: block; position: static; }
.hero--photo .hero__content { max-width: 42rem; }

/* light text on photo */
.hero--photo .eyebrow { color: #fff; opacity: .94; }
.hero--photo .eyebrow::before { background: var(--red); opacity: 1; }
.hero--photo .hero__title { color: #fff; text-shadow: 0 2px 22px rgba(3,14,38,.40); }
.hero--photo .hero__title .accent { color: #fff; position: relative; }
.hero--photo .hero__title .accent::after {
  content: "";
  position: absolute; left: 2px; right: .18em; bottom: -.04em;
  height: .1em; min-height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--red) 0%, #ff5a60 100%);
}
.hero--photo .hero__subhead { color: rgba(255,255,255,.92); }

/* glassy trust pills */
.hero--photo .hero__trust .pill {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.30);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero--photo .hero__trust .pill svg { color: #fff; }

/* floating Available-24/7 chip */
.hero--photo .hero__badge {
  position: absolute;
  right: clamp(1rem, 3.5vw, 2.6rem);
  bottom: clamp(1rem, 3.5vw, 2.3rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem 1rem;
  border-radius: 14px;
  background: rgba(6,26,62,.52);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-lg);
  color: #fff;
}
.hero--photo .hero__badge-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--red); color: #fff; flex: none;
}
.hero--photo .hero__badge-mark svg { width: 20px; height: 20px; }
.hero--photo .hero__badge-text { display: flex; flex-direction: column; line-height: 1.18; }
.hero--photo .hero__badge-text b { font-weight: 700; font-size: .95rem; }
.hero--photo .hero__badge-text span { font-size: .76rem; color: rgba(255,255,255,.80); }

@media (max-width: 760px) {
  .hero--photo { min-height: clamp(540px, 88vh, 760px); }
  .hero--photo .hero__bg { object-position: 68% 42%; }
  .hero--photo .hero__scrim {
    background: linear-gradient(180deg,
      rgba(5,24,58,.60) 0%, rgba(8,32,78,.74) 52%, rgba(4,18,46,.93) 100%);
  }
  .hero--photo .hero__badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero__bg { animation: none; transform: none; }
}

/* ============================================================
   HEADER BRAND — real wheelchair-person mark + wordmark
   ============================================================ */
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.brand__mark {
  height: 48px; width: auto; flex: none; display: block;  /* transparent PNG — no blend needed */
}
.brand__svg { height: 33px; width: auto; display: block; }
.site-header.is-scrolled .brand__mark { height: 42px; }
@media (max-width: 480px) {
  .brand__mark { height: 40px; }
  .brand__svg { height: 28px; }
}

/* hero badge: anchor to the section's bottom-right (override legacy left) */
.hero--photo .hero__badge { left: auto; top: auto; }


/* === polish === */
/* ================================================================
   _polish.css — TEAM B: HERO & LOGO POLISH
   Appended AFTER styles.css, so every rule here wins the cascade.
   Refines (does not replace) the "HERO v2" + "HEADER BRAND" blocks.

   Design intent:
   - Above-the-fold stays legible & on-brand even if THIS file is the
     only thing that loads late: all critical contrast/scrim/sizing
     here is additive and degrades to the working styles.css base.
   - Tokens only (navy / navy-deep / red / steel / white). No new hues.
   - All motion gated behind prefers-reduced-motion.
   - AA contrast guaranteed for white hero text on the van at every width.
   ================================================================ */

/* ----------------------------------------------------------------
   1) HEADER LOGO — figure-mark <-> wordmark proportion & alignment
   ----------------------------------------------------------------
   The mark is a PORTRAIT PNG (146x200 ~ 0.73 ratio). Sized by height
   it grows wide and visually outweighs the wordmark. We balance the
   mark height against the wordmark CAP-HEIGHT (not its full glyph box),
   nudge it to share the wordmark baseline, and tighten the gap so the
   lockup reads as one unit. Sizes are deliberate, never oversized.
   ---------------------------------------------------------------- */
.site-header .brand {
  gap: 0.6rem;
  align-items: center;
  min-width: 0;                 /* lockup may shrink before nav wraps */
}
.site-header .brand__mark {
  /* portrait mark tuned to sit a touch taller than the wordmark cap,
     so the figure reads as a peer, not a billboard */
  height: 44px;
  /* optical baseline nudge: drop the mark ~1px so its wheel base lines
     up with the wordmark baseline rather than floating high */
  transform: translateY(1px);
}
.site-header .brand__svg {
  height: 34px;                 /* wordmark cap-height anchor */
  flex: none;
}
/* Scrolled: header compresses — keep the same mark:wordmark ratio */
.site-header.is-scrolled .brand__mark { height: 40px; }
.site-header.is-scrolled .brand__svg  { height: 31px; }

/* Mid / small tablets */
@media (max-width: 640px) {
  .site-header .brand { gap: 0.5rem; }
  .site-header .brand__mark { height: 40px; }
  .site-header .brand__svg  { height: 30px; }
}
/* Phones — keep readable & proportional down to 360px */
@media (max-width: 480px) {
  .site-header .brand__mark { height: 38px; }
  .site-header .brand__svg  { height: 28px; }
}
@media (max-width: 360px) {
  .site-header .brand { gap: 0.42rem; }
  .site-header .brand__mark { height: 34px; }
  .site-header .brand__svg  { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand__mark { transform: none; }
}


/* ----------------------------------------------------------------
   2) HERO COMPOSITION — headline scale, measure, rhythm
   ----------------------------------------------------------------
   Slightly tighter leading + a controlled measure so the headline
   reads as a strong 2-3 line block instead of sprawling. The accent
   word stays on its own visual line where space allows via balance.
   ---------------------------------------------------------------- */
.hero--photo .hero__content {
  max-width: 44rem;
}
.hero--photo .hero__title {
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;                 /* even ragged edge, no orphans */
  text-shadow: 0 2px 26px rgba(3, 14, 38, 0.46),
               0 1px 3px rgba(3, 14, 38, 0.30);
}
.hero--photo .hero__subhead {
  max-width: 38rem;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 12px rgba(4, 16, 40, 0.45);
}
.hero--photo .eyebrow {
  text-shadow: 0 1px 8px rgba(4, 16, 40, 0.45);
}

/* ----------------------------------------------------------------
   3) RED UNDERLINE on "care." — cleaner, brand-anchored sweep
   ----------------------------------------------------------------
   Replaces the ragged right:.18em inset with a full-width sweep that
   tracks the word, slightly thicker and softly rounded. Tasteful
   red -> warm-red gradient (both within brand red family).
   ---------------------------------------------------------------- */
.hero--photo .hero__title .accent {
  position: relative;
  white-space: nowrap;                /* keep "care." + rule together */
}
.hero--photo .hero__title .accent::after {
  left: 0.02em;
  right: 0.02em;
  bottom: -0.02em;
  height: 0.12em;
  min-height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red) 0%, #ff5a60 92%);
  box-shadow: 0 2px 10px rgba(224, 27, 34, 0.40);
}

/* ----------------------------------------------------------------
   4) SCRIM — guarantee AA white-text contrast on ALL widths
   ----------------------------------------------------------------
   Desktop side-gradient kept, but we deepen the left column where the
   text actually sits + add a soft top/bottom darkening and a clean
   vignette so the van never bleeds light behind the copy. The text
   column carries >= ~7:1 against white regardless of image luminance.
   ---------------------------------------------------------------- */
.hero--photo .hero__scrim {
  background:
    /* vignette — subtle, keeps focus center/left */
    radial-gradient(120% 120% at 78% 38%,
      rgba(4, 16, 40, 0) 38%,
      rgba(4, 16, 40, 0.28) 100%),
    /* horizontal: dark behind copy, clearing toward the van on the right */
    linear-gradient(98deg,
      rgba(5, 22, 56, 0.97) 0%,
      rgba(7, 30, 74, 0.92) 26%,
      rgba(9, 40, 96, 0.74) 50%,
      rgba(11, 45, 107, 0.40) 74%,
      rgba(11, 45, 107, 0.16) 100%),
    /* vertical: anchor top + base */
    linear-gradient(180deg,
      rgba(5, 22, 54, 0.40) 0%,
      rgba(5, 22, 54, 0.00) 24%,
      rgba(4, 18, 46, 0.00) 64%,
      rgba(4, 18, 46, 0.56) 100%);
}

/* Tablet 761-1024 — text wraps wider & sits more OVER the van.
   Here the right side of the copy can overlap brighter image areas,
   so we widen the dark band and pull the focal crop toward the van. */
@media (min-width: 761px) and (max-width: 1024px) {
  .hero--photo .hero__content { max-width: 40rem; }
  .hero--photo .hero__bg { object-position: 74% 40%; }
  .hero--photo .hero__scrim {
    background:
      radial-gradient(130% 120% at 80% 36%,
        rgba(4, 16, 40, 0) 34%,
        rgba(4, 16, 40, 0.34) 100%),
      linear-gradient(100deg,
        rgba(5, 22, 56, 0.97) 0%,
        rgba(7, 30, 74, 0.94) 38%,
        rgba(9, 40, 96, 0.82) 62%,
        rgba(11, 45, 107, 0.52) 84%,
        rgba(11, 45, 107, 0.30) 100%),
      linear-gradient(180deg,
        rgba(5, 22, 54, 0.34) 0%,
        rgba(5, 22, 54, 0.00) 26%,
        rgba(4, 18, 46, 0.60) 100%);
  }
}

/* ----------------------------------------------------------------
   5) hero__bg framing across breakpoints (the van stays the hero)
   ---------------------------------------------------------------- */
@media (min-width: 1441px) {
  .hero--photo .hero__bg { object-position: 82% 44%; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .hero--photo .hero__bg { object-position: 80% 42%; }
}

/* ----------------------------------------------------------------
   6) GLASSY TRUST PILLS — crisper, AA-safe, tactile
   ----------------------------------------------------------------
   Slightly stronger fill + inner highlight so they read on bright
   and dark image regions alike; readable even if blur is unsupported.
   ---------------------------------------------------------------- */
.hero--photo .hero__trust {
  gap: 0.6rem 0.7rem;
  border-top-color: rgba(255, 255, 255, 0.22);
}
.hero--photo .hero__trust .pill {
  background: rgba(8, 26, 60, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  font-weight: var(--fw-semi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 4px 14px rgba(4, 16, 40, 0.22);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.hero--photo .hero__trust .pill svg {
  color: #fff;
  opacity: 0.95;
}
/* @supports fallback: no backdrop-filter -> solid-enough navy chip */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero--photo .hero__trust .pill { background: rgba(7, 28, 66, 0.78); }
}

/* ----------------------------------------------------------------
   7) FLOATING 24/7 BADGE — premium glass chip
   ----------------------------------------------------------------
   Cleaner padding, a hairline top highlight, and a gentle entrance.
   Red mark tile gets a soft glow tying it to the brand cross accent.
   ---------------------------------------------------------------- */
.hero--photo .hero__badge {
  gap: 0.75rem;
  padding: 0.7rem 1.05rem;
  border-radius: 15px;
  background: rgba(6, 24, 58, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
              0 18px 44px rgba(3, 14, 38, 0.40);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  animation: polishBadgeIn 0.7s var(--ease) both;
  animation-delay: 0.35s;
}
.hero--photo .hero__badge-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--red);
  box-shadow: 0 4px 14px rgba(224, 27, 34, 0.45);
}
.hero--photo .hero__badge-text b {
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
.hero--photo .hero__badge-text span {
  color: rgba(255, 255, 255, 0.84);
}
@keyframes polishBadgeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero--photo .hero__badge { background: rgba(6, 24, 58, 0.88); }
}

/* ----------------------------------------------------------------
   8) RESPONSIVE GUARDS — no clip/overlap at 360/414/768/1024/1440
   ---------------------------------------------------------------- */

/* Tablet/phone: badge hidden by base at <=760; ensure copy breathes */
@media (max-width: 760px) {
  .hero--photo .hero__content { max-width: 100%; }
  .hero--photo .hero__title { letter-spacing: -0.025em; }
  /* Reinforce base mobile scrim slightly for bright-sky crops */
  .hero--photo .hero__scrim {
    background: linear-gradient(180deg,
      rgba(5, 24, 58, 0.66) 0%,
      rgba(8, 32, 78, 0.78) 50%,
      rgba(4, 18, 46, 0.94) 100%);
  }
  .hero--photo .hero__bg { object-position: 66% 42%; }
}

/* Small phones */
@media (max-width: 414px) {
  .hero--photo { min-height: clamp(500px, 86vh, 720px); }
  .hero--photo .hero__title { line-height: 1.06; }
}
@media (max-width: 360px) {
  .hero--photo .hero__trust { gap: 0.5rem; }
  .hero--photo .hero__trust .pill { padding-inline: 0.7rem; }
}

/* ----------------------------------------------------------------
   9) MOTION — honor reduced-motion for everything added here
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero__badge { animation: none; }
}

/* === Brand band — full MediCab lockup (light bg; navy/tagline need light) === */
.brand-band {
  background: var(--white);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.brand-band__logo { display: block; margin-inline: auto; }
@media (max-width: 480px) {
  .brand-band__logo { max-width: 270px; }
}

/* === Mobile drawer overflow fix is handled by the display:none toggle in the
   @media (max-width:920px) block (closed drawer is removed from layout, so it
   can't extend the page). No html/body overflow clip — that would also clip the
   open fixed drawer. === */

/* === Feature blocks — two-column real-photo + copy (van + boarding) === */
.feature { padding-block: clamp(3.25rem, 6vw, 6rem); background: var(--white); }
.feature--tint { background: var(--bg-tint-2); }
.feature__inner {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature--reverse .feature__media { order: -1; }       /* image first (left) */
.feature__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: .55rem 0 0;
}
.feature__copy {
  margin-top: 1.1rem;
  color: var(--ink-600);
  font-size: var(--fs-lead);
  line-height: 1.65;
}
.feature__points { margin: 1.35rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.feature__points li {
  position: relative; padding-left: 2rem;
  color: var(--ink); font-weight: var(--fw-med);
}
.feature__points li::before {
  content: ""; position: absolute; left: 0; top: .05em;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-9'/%3E%3C/svg%3E") center / .82rem no-repeat;
}
.feature__body .btn { margin-top: 1.8rem; }
.feature__media { margin: 0; }
.feature__media img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--sh-lg);
}
/* low-res portrait snapshot — keep it modest so it stays crisp */
.feature__media--portrait { max-width: 320px; margin-inline: auto; }
.feature__media--portrait img { border-radius: calc(var(--radius) + 2px); }

@media (max-width: 760px) {
  .feature__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .feature__media, .feature--reverse .feature__media { order: 0; }   /* image on top */
  .feature__media--portrait { max-width: 280px; }
}