/* ==========================================================================
   WhiBlu Cab — homepage stylesheet
   Brand: Blue #1366AD · Teal #068992 · warm accent #F0A63C · Jost throughout
   Architecture shared with the Rentgo staging theme (pill CTAs, glass bar,
   dark bands) re-expressed in the WhiBlu coastal palette.
   ========================================================================== */

/* ---------- Brand fonts ----------
   Headings use Jost (600/700) for a clean, modern voice that matches the
   app UI; the Cinzel Decorative brand serif lives on in the logo artwork.
   (Cinzel OTFs remain in assets/fonts/ if the client wants it back.) */

/* ---------- Design tokens ---------- */
:root {
  /* brand color system (Brand-details, 25 Jul 2026) */
  --blue:      #1366AD;
  --teal:      #068992;
  --teal-deep: #04656C;
  --navy:      #0B2032;   /* dark band base, harmonised with brand blue */
  --navy-2:    #10293F;
  --ink:       #122433;
  --ink-soft:  #4E6274;
  --bg:        #F4F8FA;
  --white:     #FFFFFF;
  --line:      #DCE6EC;
  --line-dark: #23405A;
  --grad:      linear-gradient(100deg, var(--blue) 0%, var(--teal) 100%);

  /* Button system — matched to /driver-partner-pgm/ so both sites read as one
     brand. Teal → blue, not the old green → blue. These tokens drive every
     button on the site (pills, disc fills, call pill, sticky app bar, form
     submits), so the palette changes in one place. */
  --btn-teal:  #008794;
  --btn-blue:  #1266AC;
  --grad-btn:  linear-gradient(115deg, var(--btn-teal) 0%, var(--btn-blue) 100%);
  --btn-shadow:       0 10px 28px rgba(0, 135, 148, .35);
  --btn-shadow-hover: 0 16px 38px rgba(0, 135, 148, .48);
  /* Secondary/outline hairline — the driver page's .btn-quiet edge. */
  --btn-hairline: rgba(0, 135, 148, .32);

  /* type */
  --font-display: "Jost", sans-serif;
  --sun: #F0A63C;   /* warm coastal accent — used sparingly */
  --font-body:    "Jost", sans-serif;

  /* shape & depth */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 100px;
  --shadow-sm: 0 2px 10px rgba(11, 32, 50, .07);
  --shadow-md: 0 14px 40px rgba(11, 32, 50, .12);
  --shadow-lg: 0 24px 60px rgba(11, 32, 50, .18);

  /* rhythm */
  --section-pad: clamp(72px, 9vw, 124px);
  --container: 1240px;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* app feel: no grey flash on tap */
  -webkit-tap-highlight-color: transparent;
}

/* The window stays the scroll viewport: heights auto, no overflow-y on body */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  height: auto;
  overflow-x: hidden;
  overflow-y: visible;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  height: auto;
  overflow-x: clip;
}

html.nav-locked { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

h1, h2, h3 { line-height: 1.16; }

/* Display headings: Jost 600 — clean, modern, matches the app UI */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}
h3, h4 {
  font-family: var(--font-body);
  font-weight: 600;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -48px; left: 16px;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 0 0 12px 12px;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

/* ---------- Section scaffolding ---------- */
.section { padding-block: var(--section-pad); }

.section--dark {
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(6, 137, 146, .18), transparent 60%),
    var(--navy);
  color: #E9F0F4;
}

.section__head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 52px); }

.section__title {
  font-size: clamp(26px, 3.6vw, 40px);
  color: inherit;
}

.section__lead {
  margin-top: 16px;
  color: var(--ink-soft);
  max-width: 48em;
}
.section__lead a { color: var(--teal); font-weight: 500; }
.section__lead--light { color: #ABC0CE; }

.section__foot { margin-top: clamp(34px, 5vw, 48px); display: flex; justify-content: center; }

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.eyebrow__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sun);
}
.eyebrow--light {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #EAF2F6;
  box-shadow: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15.5px;
  border-radius: var(--r-pill);
  padding: 8px 8px 8px 24px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  white-space: nowrap;
}
.btn__disc {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  transition: transform .35s var(--ease);
  flex: 0 0 auto;
}
.btn:hover .btn__disc { transform: rotate(-45deg); }

.btn--primary {
  background: var(--grad-btn);
  color: var(--white);
  box-shadow: var(--btn-shadow);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); }

.btn--outline {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--btn-hairline);
}
.btn--outline .btn__disc { background: var(--grad-btn); }
.btn--outline:hover { transform: translateY(-2px); border-color: var(--btn-teal); }

.btn--ghost {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .28);
  color: var(--white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost .btn__disc { background: var(--grad-btn); color: var(--white); }
.btn--ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .16); }

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--navy);
  color: #BFD3DF;
  font-size: 14px;
  text-align: center;
  padding: 9px 16px;
  position: relative;
  z-index: 60;
}
.announce p { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.announce .icon { color: var(--teal); }
.announce a strong { color: var(--white); letter-spacing: .04em; }
.announce a:hover strong { color: #7CD4DA; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 14px;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  margin-bottom: calc(-1 * (72px + 14px)); /* overlays the dark hero */
}
.header.is-stuck {
  background: rgba(11, 32, 50, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  padding-block: 10px;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: inline-flex; align-items: center; }
.logo__img {
  width: clamp(150px, 16vw, 196px);
  height: auto;
  /* official logo is colour-on-transparent for light surfaces; on the navy
     header we lift it to the white treatment from the brand card */
  filter: brightness(0) invert(1);
}

.nav { display: flex; align-items: center; gap: 18px; }
.nav__list { display: flex; align-items: center; gap: 1px; }
.nav__item { position: relative; display: flex; align-items: center; }

.nav__link {
  display: block;
  font-weight: 500;
  font-size: 15.5px;
  color: #D7E2EA;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  transition: color .25s, background .25s;
}
.nav__link:hover { color: var(--white); background: rgba(255, 255, 255, .1); }
.nav__link.is-active { color: #7CD4DA; }

/* Dropdown chevron toggle */
.nav__toggle {
  display: grid;
  place-items: center;
  width: 24px; height: 30px;
  margin-left: -8px;
  color: #A9BCCB;
  border-radius: 50%;
}
.nav__toggle .icon { transition: transform .3s var(--ease); }
.nav__item--has-children:hover .nav__toggle .icon,
.nav__item.is-open .nav__toggle .icon { transform: rotate(180deg); }

/* Dropdown panel (desktop: hover/focus flyout) */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 268px;
  margin-top: 12px;
  background: rgba(11, 32, 50, .97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 60;
}
/* invisible bridge so hover survives the gap between link and panel */
.dropdown::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}
.dropdown--cols { min-width: 420px; }

.nav__item--has-children:hover > .dropdown,
.nav__item--has-children:focus-within > .dropdown,
.nav__item.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown__list { display: grid; gap: 2px; }
.dropdown--cols .dropdown__list { grid-template-columns: 1fr 1fr; gap: 2px 6px; }

.dropdown__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #EAF2F6;
  transition: background .2s;
}
.dropdown__link:hover { background: rgba(255, 255, 255, .08); }
.dropdown__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgba(6, 137, 146, .18);
  color: #7CD4DA;
  flex: 0 0 auto;
}
.dropdown__text { display: grid; line-height: 1.25; min-width: 0; }
.dropdown__text strong { font-size: 15px; font-weight: 600; }
.dropdown__text small { font-size: 12.5px; color: #9FB4C4; }
/* town list: compact single-line links */
.dropdown--cols .dropdown__link { padding: 9px 14px; }
.dropdown--cols .dropdown__text strong { font-weight: 500; font-size: 14.5px; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  z-index: 70;
}
.burger span {
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: var(--white);
  padding-top: clamp(120px, 15vw, 168px);
  padding-bottom: 0;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    /* teal accent glow, bottom-centre */
    radial-gradient(1100px 480px at 50% 114%, rgba(6, 137, 146, .42), transparent 62%),
    /* left-weighted darkening so the copy column always has contrast */
    linear-gradient(105deg, rgba(6, 16, 26, .92) 0%, rgba(6, 16, 26, .66) 42%, rgba(6, 16, 26, .34) 72%),
    /* top-to-bottom scrim */
    linear-gradient(180deg, rgba(8, 22, 36, .78) 0%, rgba(8, 22, 36, .5) 45%, rgba(6, 16, 26, .92) 100%),
    url("../img/web/hero-road.jpg");
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center 40%;
  background-repeat: no-repeat;
  z-index: -1;
}

/* App-first composition: copy + badges left, phone mockup right */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  position: relative;
  z-index: 2;
  padding-bottom: clamp(56px, 8vw, 96px);
}

.hero__title {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  margin-bottom: 18px;
  text-wrap: balance;
}
.hero__title .accent {
  position: relative;
  color: #7CD4DA;
  white-space: nowrap;
}
.hero__title .accent::after {
  content: "";
  position: absolute;
  left: -8%; right: -8%; bottom: .06em;
  height: .5em;
  background: radial-gradient(closest-side, rgba(6, 137, 146, .55), transparent 75%);
  filter: blur(6px);
  z-index: -1;
}

.hero__sub {
  font-size: 18px;
  color: #C9D8E2;
  max-width: 34em;
  margin-bottom: 28px;
}

/* Store badges — pre-launch, so they read as announcements, not dead links.
   Solid, high-contrast fill so the primary "get the app" goal has real weight. */
.hero__badges { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--white);
  color: var(--navy);
  border-radius: 14px;
  padding: 11px 22px 11px 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.store-badge:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, .36); }
.store-badge__icon { display: grid; place-items: center; flex: 0 0 auto; }
.store-badge__text { display: grid; line-height: 1.2; text-align: left; }
.store-badge__text small { font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); }
.store-badge__text strong { font-size: 17px; font-weight: 600; color: inherit; }
/* Unmistakable not-yet-live state — warm chip reads on light or dark badges */
.store-badge__soon {
  flex: 0 0 auto;
  margin-left: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--sun);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}

/* Tappable "prefer to call" contact chip — the phone path, given real weight */
.hero__call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  padding: 8px 10px 8px 8px;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.hero__call:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 212, 218, .6);
  background: rgba(255, 255, 255, .11);
}
.hero__callIcon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  flex: 0 0 auto;
  box-shadow: 0 6px 18px rgba(6, 137, 146, .4);
}
.hero__callText { display: grid; line-height: 1.25; text-align: left; }
.hero__callText small { font-size: 13px; color: #ABC0CE; }
.hero__callText strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--white);
}
.hero__callGo {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #7CD4DA;
  flex: 0 0 auto;
  transition: transform .35s var(--ease);
}
.hero__call:hover .hero__callGo { transform: translateX(3px); }

/* ---------- Phone mockup ---------- */
.hero__phoneWrap {
  position: relative;
  display: grid;
  place-items: center;
}
.hero__phoneGlow {
  position: absolute;
  inset: 10% 12%;
  background: radial-gradient(closest-side, rgba(6, 137, 146, .45), transparent 70%);
  filter: blur(30px);
  z-index: 0;
}

.phone {
  position: relative;
  z-index: 1;
  background: #0A1420;
  border: 3px solid #223648;
  border-radius: 38px;
  padding: 12px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55);
}
.phone--hero { width: min(300px, 78vw); transform: rotate(3deg); }
.phone--hero:hover { transform: rotate(0deg); }
.phone { transition: transform .5s var(--ease); }

.phone__notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 38%; height: 20px;
  background: #0A1420;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.phone__screen {
  background: #F4F8FA;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.phone--mini .phone__screen { min-height: 300px; }

/* Mini app UI, shared by hero + screenshots strip */
.app-ui__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 16px 12px;
  background: var(--white);
}
.app-ui__head--mini { padding-top: 18px; }
.app-ui__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.app-ui__avatar {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-soft);
}

.app-ui__map {
  position: relative;
  flex: 1;
  min-height: 120px;
  background:
    linear-gradient(rgba(19, 102, 173, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 102, 173, .06) 1px, transparent 1px),
    linear-gradient(160deg, #E7F1F5, #D9EAEF);
  background-size: 26px 26px, 26px 26px, auto;
}
.app-ui__map--tall { min-height: 190px; }
.app-ui__route {
  position: absolute;
  left: 18%; right: 22%; top: 52%;
  border-top: 3px dashed var(--teal);
  transform: rotate(-16deg);
}
.app-ui__dotA, .app-ui__dotB {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(11, 32, 50, .3);
}
.app-ui__dotA { left: 14%; top: 60%; background: var(--blue); }
.app-ui__dotB { right: 16%; top: 34%; background: var(--teal); }
.app-ui__car {
  position: absolute;
  left: 44%; top: 40%;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #7CD4DA;
  box-shadow: 0 4px 12px rgba(11, 32, 50, .4);
  animation: appCar 4s ease-in-out infinite;
}
@keyframes appCar {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(10px, -8px); }
}

.app-ui__sheet {
  background: var(--white);
  border-radius: 20px 20px 0 0;
  margin-top: -14px;
  position: relative;
  padding: 16px;
  display: grid;
  gap: 10px;
  box-shadow: 0 -8px 24px rgba(11, 32, 50, .08);
}
.app-ui__sheet--flat { border-radius: 0; margin-top: 0; box-shadow: none; flex: 1; }

.app-ui__field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
}
.app-ui__field .icon { color: var(--teal); }

.app-ui__fare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
}
.app-ui__fare small { display: block; font-size: 11px; color: var(--ink-soft); }
.app-ui__fare strong { font-size: 19px; }
.app-ui__fareTag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(6, 137, 146, .12);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

.app-ui__cta {
  background: var(--grad-btn);
  color: var(--white);
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  border-radius: 12px;
  padding: 11px;
}

.app-ui__eta { text-align: center; padding: 6px 2px; }
.app-ui__eta strong { display: block; font-size: 15px; }
.app-ui__eta small { font-size: 12px; color: var(--ink-soft); }

.app-ui__row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 8px;
}
.app-ui__row span:first-child { color: var(--ink-soft); }
.app-ui__row span:last-child { font-weight: 600; }
.app-ui__tick {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(6, 137, 146, .14);
  color: var(--teal);
  margin: 6px auto 0;
}

/* ---------- Intro strip ---------- */
.intro { padding-top: clamp(48px, 7vw, 80px); padding-bottom: 0; }
.intro__text {
  max-width: 46em;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.65;
  color: var(--ink-soft);
}
.intro__text strong { color: var(--ink); font-weight: 600; }

/* ---------- Why locals choose ---------- */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;        /* every row the same height */
  gap: 22px;
}

.why-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s var(--ease);
  display: flex;
  flex-direction: column;
}
.why-card:hover { transform: translateY(-6px); border-color: var(--teal); box-shadow: var(--shadow-md); }

/* Subtle corner flourish fills the sparse (short-text) cards on-brand */
.why-card:not(.why-card--photo)::after {
  content: "";
  position: absolute;
  right: -40px; bottom: -40px;
  width: 130px; height: 130px;
  border-radius: 50%;
  border: 14px solid rgba(6, 137, 146, .06);
  pointer-events: none;
}

.why-card__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(19, 102, 173, .12), rgba(6, 137, 146, .14));
  color: var(--teal);
  margin-bottom: 18px;
}
.why-card__title { font-size: 18.5px; margin-bottom: 6px; }
.why-card__text { font-size: 15.5px; color: var(--ink-soft); margin-bottom: auto; }

/* Photo cell: image is absolutely positioned so it never dictates row
   height — the text cards set the height, the photo fills to match. */
.why-card--photo { padding: 0; }
.why-card--photo picture { position: absolute; inset: 0; }
.why-card--photo img { width: 100%; height: 100%; object-fit: cover; }
.why-card__badge {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 32, 50, .85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
}
.why-card__badge .icon { color: #7CD4DA; }

/* ---------- App section: screenshots strip + QR block ---------- */
.app__screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.app-shot { text-align: center; }
.app-shot .phone--mini {
  width: min(210px, 62vw);
  margin: 0 auto 22px;
  border-radius: 30px;
  padding: 9px;
}
.app-shot .phone__screen { border-radius: 22px; }
.app-shot__title { font-size: 18.5px; margin-bottom: 4px; }
.app-shot__text { font-size: 15px; color: var(--ink-soft); max-width: 26em; margin-inline: auto; }

.app__qr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 4vw, 48px);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(26px, 4vw, 44px);
}
.app__qrCode {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.app__qrCode img { width: clamp(150px, 18vw, 200px); height: auto; }

.app__qrTitle { font-size: 22px; margin-bottom: 8px; }
.app__qrText { color: var(--ink-soft); max-width: 40em; margin-bottom: 18px; }
.app__qrBadges { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
/* On the light QR card the badges flip to navy — text must go light too */
.app__qrBadges .store-badge {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.app__qrBadges .store-badge .store-badge__text small { color: #9FB4C4; }
.app__qrBadges .store-badge:hover { border-color: var(--teal); }
.app__qrPhone {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.app__qrPhone .icon { color: var(--teal); }
.app__qrPhone a { color: var(--teal-deep); font-weight: 700; }
.app__qrPhone a:hover { color: var(--blue); }

/* ---------- Services ---------- */
.services__grid {
  display: grid;
  /* auto-fit so the row stays balanced whether 3 or 4 services are published */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}

.service-card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }

.service-card__media { overflow: hidden; aspect-ratio: 4 / 3; }
.service-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.service-card:hover .service-card__media img { transform: scale(1.05); }

.service-card__icon {
  position: absolute;
  top: 14px; left: 14px;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.service-card__body { padding: 22px; }
.service-card__title { font-size: 18.5px; margin-bottom: 6px; }
.service-card__text { font-size: 15px; color: var(--ink-soft); }

/* Service areas */
.areas {
  margin-top: clamp(36px, 5vw, 52px);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(26px, 3.5vw, 40px);
}
.areas__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.areas__title {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 20px;
}
.areas__title .icon { color: var(--teal); }
.areas__lead { color: var(--ink-soft); font-size: 15.5px; }

.areas__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.areas__chips li {
  font-weight: 500;
  font-size: 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  transition: border-color .25s, background .25s, color .25s;
}
.areas__chips li:hover { border-color: var(--teal); color: var(--teal-deep); background: #EDF6F7; }
.areas__chip--more { color: var(--ink-soft); font-style: italic; }

.areas__note { margin-top: 18px; font-size: 15.5px; color: var(--ink-soft); }
.areas__note a { color: var(--teal); font-weight: 600; }
.areas__note a:hover { text-decoration: underline; }

/* ---------- Fares ---------- */
.fares__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.fares__media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.fares__media img { width: 100%; }

.fares__floatCard {
  position: absolute;
  left: 16px; bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 14px 20px;
  box-shadow: var(--shadow-lg);
}
.fares__floatCard strong { display: block; font-size: 15.5px; }
.fares__floatCard span:last-child { font-size: 13px; color: var(--ink-soft); }
.fares__floatIcon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
}

.fares__payments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
  max-width: 30em;
}
.fares__payments li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.fares__check {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(6, 137, 146, .14);
  color: var(--teal);
}

.fares__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.fares__note { font-size: 14px; color: var(--ink-soft); }

/* ---------- How WhiBlu works (dark trust band) ---------- */
.works__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.works__badges { display: grid; gap: 14px; }
.works__badge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: 16px 22px;
  font-weight: 500;
  font-size: 15.5px;
  transition: transform .3s var(--ease), border-color .3s;
}
.works__badge:hover { transform: translateX(6px); border-color: var(--teal); }
.works__badgeIcon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(6, 137, 146, .18);
  color: #7CD4DA;
}

/* ---------- How to book ---------- */
.book__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.book-card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.book-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.book-card__num {
  position: absolute;
  top: 22px; right: 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  color: var(--line);
}
.book-card__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(19, 102, 173, .12), rgba(6, 137, 146, .14));
  color: var(--blue);
  margin-bottom: 18px;
}
.book-card__title { font-size: 19px; margin-bottom: 6px; }
.book-card__text { font-size: 15.5px; color: var(--ink-soft); }
.book-card__note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #8A5A14;
  background: rgba(240, 166, 60, .16);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}

/* ---------- Drive with us ---------- */
.drive { padding-top: 0; }
.drive__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.drive__media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.drive__media img { width: 100%; }
.drive__badge {
  position: absolute;
  left: 16px; bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(11, 32, 50, .85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
}
.drive__badge .icon { color: #7CD4DA; }
.drive__copy .btn { margin-top: 26px; }

/* ---------- Community (photo band) ---------- */
.community {
  position: relative;
  color: var(--white);
  text-align: center;
}
.community__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(8, 22, 36, .78), rgba(8, 22, 36, .82)),
    url("../img/web/community-river.jpg");
  background-size: auto, cover;
  background-position: center;
  z-index: 0;
}
.community__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.community__text {
  max-width: 44em;
  font-size: clamp(17px, 2vw, 20px);
  color: #D3E0E9;
  margin-top: 18px;
}
.community__text em { color: #7CD4DA; font-style: normal; font-weight: 600; }
.community__tagline {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--white);
  max-width: 34em;
}

/* ---------- Founder's note (social proof) ---------- */
.founder__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  background:
    radial-gradient(600px 300px at 88% -10%, rgba(6, 137, 146, .08), transparent 60%),
    var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(28px, 4vw, 52px);
}
/* The WB monogram is itself a round mark — a ring enclosing the letters. It
   used to sit inside a second bordered, tinted disc, which read as a circle
   drawn inside a circle. The plate and its border are gone; a soft teal halo
   gives the mark presence on the white card without adding a second edge. */
.founder__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(96px, 12vw, 132px);
  height: clamp(96px, 12vw, 132px);
}
.founder__mark::before {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 137, 146, .13), rgba(6, 137, 146, 0) 70%);
}
.founder__mark img {
  position: relative;   /* above the halo */
  width: 100%;
  height: auto;
}
.founder__quote {
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 20px;
  text-wrap: pretty;
}
.founder__sign { display: grid; gap: 2px; }
.founder__signName {
  font-weight: 700;
  font-size: 16.5px;
  color: var(--teal-deep);
}
.founder__signRole { font-size: 14.5px; color: var(--ink-soft); }

.founder__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 40px);
}
.founder__trust li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink);
}
.founder__trust .icon { color: var(--teal); flex: 0 0 auto; }

/* ---------- Contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.contact__phoneLink {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--teal-deep);
  white-space: nowrap;
}
.contact__phoneLink:hover { color: var(--blue); }
.contact__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 26px; }

.contact__list { display: grid; gap: 16px; }
.contact__list li {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s;
}
.contact__list li:hover { transform: translateX(6px); border-color: var(--teal); }
.contact__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(120deg, rgba(19, 102, 173, .12), rgba(6, 137, 146, .14));
  color: var(--teal);
}
.contact__label {
  display: block;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact__list a { font-weight: 600; }
.contact__list a:hover { color: var(--teal); }

/* ---------- Footer ---------- */
.footer {
  background: var(--navy);
  color: #ABC0CE;
  padding-top: var(--section-pad);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr .9fr 1fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 6vw, 60px);
}

.logo--footer { margin-bottom: 20px; }
.logo--footer .logo__img { width: 200px; }

.footer__about { font-size: 15px; max-width: 30em; margin-bottom: 20px; }

.footer__nap { font-size: 15px; line-height: 2.1; }
.footer__nap .icon { color: #7CD4DA; vertical-align: -2px; margin-right: 6px; }
.footer__nap a:hover { color: #7CD4DA; }

.footer__heading {
  color: var(--white);
  font-size: 16px;
  letter-spacing: .04em;
  margin-bottom: 18px;
}

.footer__col ul { display: grid; gap: 11px; }
.footer__col a {
  font-size: 15px;
  transition: color .25s, padding-left .25s var(--ease);
}
.footer__col a:hover { color: #7CD4DA; padding-left: 6px; }

.footer__hours { font-size: 15px; margin-bottom: 20px; }
.footer__hours .icon { color: #7CD4DA; vertical-align: -3px; margin-right: 6px; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-dark);
  padding-block: 22px;
  font-size: 14px;
}

/* ---------- Floating call pill ---------- */
.call-pill {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-btn);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--r-pill);
  padding: 14px 22px;
  box-shadow: 0 14px 34px rgba(0, 135, 148, .5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.call-pill:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 135, 148, .6); }

/* ---------- Sticky app bar (mobile only) ---------- */
.app-bar {
  display: none;
  position: fixed;
  left: 12px; right: 12px;
  /* sit above the iOS home indicator */
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  gap: 10px;
  background: rgba(11, 32, 50, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.app-bar__download {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--grad-btn);
  color: var(--white);
  font-weight: 600;
  font-size: 15.5px;
  border-radius: var(--r-pill);
  padding: 13px 18px;
}
.app-bar__call {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #7CD4DA;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms);
}
.reveal--late  { transition-delay: 150ms; }
.reveal--later { transition-delay: 300ms; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { display: flex; flex-direction: column; align-items: center; }
  .hero__phoneWrap { margin-top: 8px; }
  .phone--hero { transform: rotate(0deg); }

  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app__screens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

  .fares__grid, .works__grid, .drive__grid, .contact__grid { grid-template-columns: 1fr; }
  .drive__media { order: -1; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Nav collapses to a drawer for tablet + phone — 7 items and two dropdowns
   won't fit a horizontal bar below ~1080px. */
@media (max-width: 1080px) {
  /* CRITICAL: backdrop-filter on the stuck header makes it a containing block
     for position:fixed, which would shrink the drawer to the header's height
     when the menu is opened after scrolling. Use a solid bg instead here so
     the full-screen fixed drawer always covers the viewport. */
  .header.is-stuck {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(11, 32, 50, .97);
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    /* safe-area padding keeps items clear of the notch and home indicator */
    padding: calc(84px + env(safe-area-inset-top, 0px)) 22px calc(40px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* fully opaque solid background — no backdrop-filter, which glitches on a
       scrollable full-screen overlay (Chromium + iOS Safari) and let content
       bleed through when a submenu was expanded */
    background:
      radial-gradient(700px 380px at 80% 8%, rgba(6, 137, 146, .16), transparent 60%),
      var(--navy);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
  }
  .nav.is-open { opacity: 1; pointer-events: auto; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }
  .nav__item {
    flex-wrap: wrap;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .nav__link { font-size: 19px; padding: 15px 6px; flex: 1; border-radius: 0; }
  .nav__link:hover { background: none; }

  /* Chevron becomes a real tap target on mobile */
  .nav__toggle {
    width: 46px; height: 46px;
    margin: 0;
    color: #EAF2F6;
    background: rgba(255, 255, 255, .06);
  }

  /* Submenus collapse into accordions */
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s var(--ease);
  }
  .dropdown::before { display: none; }
  .nav__item.is-open > .dropdown { max-height: 680px; padding: 2px 0 12px; }
  .dropdown--cols { min-width: 0; }
  .dropdown--cols .dropdown__list { grid-template-columns: 1fr 1fr; }
  .dropdown__link { padding: 11px 12px; }

  .nav__cta { margin-top: 22px; text-align: center; }
  .nav__cta .btn { justify-content: center; }

  .burger { display: flex; }
}

@media (max-width: 720px) {
  .section { --section-pad: 48px; }
  .section__head { margin-bottom: 26px; }
  .section__lead { margin-top: 12px; }

  .why__grid, .services__grid, .book__grid { grid-template-columns: 1fr; }
  /* the decorative photo card only exists to balance the multi-column grid;
     on a single-column phone layout it's an awkward tall box — drop it */
  .why-card--photo { display: none; }
  .app__screens { grid-template-columns: 1fr; }
  .app__qr { grid-template-columns: 1fr; text-align: center; }
  .app__qrCode { margin-inline: auto; }
  .app__qrBadges, .app__qrPhone { justify-content: center; }

  .fares__payments { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: center; text-align: center; }
  .footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* clearance for the sticky app bar */

  /* Mobile: sticky download bar replaces the floating call pill */
  .call-pill { display: none; }
  .app-bar { display: flex; }
}

/* ---------- Touch target sizing (added with the inner-page build) ----------
   Standalone controls reach the 44px comfortable-tap size on touch devices.
   Links inside running prose are deliberately left alone (WCAG 2.5.8 exempts
   them) so paragraph rhythm isn't broken. */
@media (pointer: coarse) {
  .logo { min-height: 44px; }
  .burger { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
  .nav__link { min-height: 44px; display: inline-flex; align-items: center; }
  .dropdown__link { min-height: 48px; }
  .announce a { display: inline-block; padding: 4px 2px; }

  /* Card, chip and list links shared by the homepage and the inner pages */
  .service-card__title a,
  .areas__title a,
  .footer__col ul a,
  .footer__legal a,
  .contactcard__big {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* The anchor stretches to fill its chip so the whole pill is the target */
  .areas__chips a {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: -9px -16px;
    padding: 9px 16px;
  }
}

/* ---------- Announcement bar: compact wording on small screens ----------
   A three-line bar pushes the header (and the burger) a long way down the
   viewport, which used to overlap the top of the open mobile menu. */
.announce__short { display: none; }
@media (max-width: 640px) {
  .announce { font-size: 13px; padding: 8px 14px; }
  .announce__long { display: none; }
  .announce__short { display: inline; }
}

/* ---------- Mobile drawer clears the real header height ----------
   --wb-header-bottom is measured in script.js, so the drawer starts below the
   header whatever the announcement bar wraps to. */
@media (max-width: 1080px) {
  .nav {
    padding-top: calc(var(--wb-header-bottom, 84px) + 18px + env(safe-area-inset-top, 0px));
  }
}

/* ---------- Safe areas on notched devices, landscape included ----------
   The document opts into viewport-fit=cover, so content extends beneath the
   notch and home indicator. Top and bottom insets were already handled; in
   landscape the notch moves to the left or right edge, so gutters and the
   fixed controls have to respect the horizontal insets too. */
.container {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.app-bar {
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
}

.call-pill {
  right: max(22px, env(safe-area-inset-right, 0px));
  bottom: max(22px, calc(12px + env(safe-area-inset-bottom, 0px)));
}

.announce,
.header__inner {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 1080px) {
  .nav {
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
  }
}

/* ---------- Landscape phones ----------
   A phone on its side is ~844x390: wider than the 720px mobile breakpoint, so
   it used to get the desktop floating call pill, which then sat on top of the
   hero headline. Short touch viewports get the sticky action bar instead, and
   the vertical rhythm tightens so the fold is usable. */
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .call-pill { display: none; }
  .app-bar { display: flex; }
  .footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* Reclaim vertical space: the phone number stays reachable in the action bar */
  .announce { display: none; }

  .section { --section-pad: 44px; }
}