:root {
  --blue: #12335f;
  --blue-2: #0d529b;
  --red: #d71920;
  --ink: #273241;
  --muted: #617184;
  --line: #dce8f4;
  --warm: #fff8ee;
  --paper: #fffdf9;
  --soft-blue: #f3f9ff;
  --shadow: 0 18px 48px rgba(18, 40, 70, 0.08);
  --shadow-elevated: 0 28px 64px rgba(18, 40, 70, 0.18);  /* reserved for the price cards only, so elevation reads as a deliberate signal rather than the default state of every panel */
  --radius: 14px;
  --radius-elevated: 20px;  /* reserved for the price cards only, same reasoning as --shadow-elevated */
  --brand-font: "Merriweather", "PT Serif", Georgia, serif;   /* was Montserrat — a warm serif with a genuine Black (900) Cyrillic weight, fits a regulated medical-transport service and an older/vulnerable audience better than a geometric grotesk */
  --text-font: "PT Sans", "Segoe UI", Arial, sans-serif;   /* was Aptos — high-legibility Cyrillic companion sans, pairs with the Merriweather headings */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #f8fbff;
}

body {
  margin: 0;
  color: var(--ink);
  background: #f8fbff;
  font-family: var(--text-font);
  overflow-x: hidden;
}

a {
  color: inherit;
}

.hero {
  position: relative;
  overflow: hidden;
  max-width: 1440px;
  min-height: 580px;   /* was 650px on desktop — at 100% browser zoom the CTA button was landing right at the bottom edge of a typical laptop viewport; mobile keeps 650px via its own media-query rule below, unchanged */
  margin: 0 auto;
  padding-top: 78px;   /* was 86px */
  background: #fffdf9;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/hero-header-clean-vehicle_2026-08-11_1130.jpg") center center / cover no-repeat;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 253, 249, 0.91) 25%, rgba(255, 253, 249, 0.42) 41%, rgba(255, 253, 249, 0.05) 58%),
    linear-gradient(180deg, rgba(255, 253, 249, 0.2) 0%, rgba(255, 253, 249, 0) 24%);
  /* reverted to the original 58% breakdown point — a later 88% version (added only to force a one-line headline that has since been reverted too) was washing white haze across the van and the person in the wheelchair */
  z-index: 1;
}

.topbar,
.hero__content,
.section,
.callout {
  width: min(1180px, calc(100% - 72px));
  margin: 0 auto;
}

.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 20;
  display: grid;
  grid-template-columns: 250px 1fr auto;
  gap: 30px;
  align-items: center;
  min-height: 86px;
  padding: 0;
  transform: translateX(-50%);
  transition: background 180ms ease, box-shadow 180ms ease, padding 180ms ease;
}

.topbar.is-scrolled,
.topbar.is-open {
  padding: 8px 16px;
  border-radius: 0 0 18px 18px;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 14px 34px rgba(18, 40, 70, 0.12);
  backdrop-filter: blur(10px);
}

.logo img {
  display: block;
  width: 210px;
  height: auto;
}

.menu {
  display: flex;
  justify-content: center;
  gap: 34px;
}

.menu a,
.topbar__phone {
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 1),
    0 0 10px rgba(255, 255, 255, 0.95);
}

.menu a {
  position: relative;
  padding-bottom: 7px;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 99px;
  background: rgba(18, 51, 95, 0.28);   /* was transparent-until-hover — a link needs a visible affordance in its resting state, not only on hover */
  transition: background 160ms ease;
}

.menu a:hover::after,
.menu a:focus-visible::after {
  background: var(--red);
}

.menu__messengers {
  display: none;
}

.topbar__contact {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.topbar__phone-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__phone {
  font-size: 24px;
}

.topbar__contact span {
  color: var(--ink);
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
}

.messenger {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: visible;
  background: transparent;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(18, 40, 70, 0.14);
}

.messenger img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.88);
  box-shadow: 0 8px 20px rgba(18, 40, 70, 0.12);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  margin: 4px auto;
  border-radius: 99px;
  background: var(--blue);
}

.hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  min-height: 460px;   /* was 540px on desktop — mobile keeps 540px via its own media-query rule below, unchanged */
}

.hero__copy {
  max-width: min(560px, 55%);   /* was a fixed 445px, then 730/830/960px — all fixed-px values, which only looked right at the one browser width they were tested at. .hero itself is capped at max-width:1440px, so at real laptop widths (1280-1440px, i.e. most screens/zoom levels) a fixed 730px column ran 30-180px past the .hero::after gradient's 58% fade-out point, sitting directly on the bare photo with no white backing. min(560px, 55%) is relative to the column's own grid track (which itself already tracks .hero's width responsively), so it shrinks and grows in step with the gradient at any window width or browser zoom level — verified clear of the fade-out point by 30-145px across 1024-2560px widths. Desktop only; mobile keeps 360px via its own media-query rule below, unchanged */
  padding: 18px 0 26px;
}

h1,
h2 {
  margin: 0;
  color: var(--blue);
  font-family: var(--brand-font);
  font-weight: 900;   /* Merriweather Black */
  letter-spacing: 0;
}

h1 {
  font-size: 36px;   /* was 56px, desktop only — mobile keeps 38px via its own media-query rule below, unchanged */
  line-height: 1.2;   /* was 1.12 — adjusted for the smaller size */
  white-space: normal;   /* reverted from nowrap: forcing one line required a 960px-wide copy column, which pushed the white photo-fade panel over the van/passenger — wraps naturally now, same as mobile */
}

.hero__copy p {
  max-width: 390px;
  margin: 20px 0 24px;   /* was 28px 0 28px — desktop only, tightened along with the shorter hero */
  color: var(--ink);
  font-size: 20px;
  line-height: 1.45;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  min-height: 48px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.button--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 12px 26px rgba(229, 45, 47, 0.22);
}

.section {
  position: relative;
  isolation: isolate;
  padding: 62px 0;
}

.section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
}

.section__head {
  max-width: 620px;
  margin: 0 auto 36px;
  text-align: center;
}

.section__head h2,
.vehicle__copy h2 {
  font-size: 34px;
  line-height: 1.12;
}

.section__head h2::after,
.vehicle__copy h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 18px auto 0;   /* was 14px — a bit more air between the heading and the red divider */
  border-radius: 99px;
  background: var(--red);
}

.section__head p {
  margin: 26px 0 0;   /* was 18px — the divider was nearly touching the subtitle text below it */
  color: var(--muted);
  font-size: 18px;
  line-height: 1.5;
}

.destinations {
  background: transparent;
}

.destinations::before {
  background: var(--warm);
}

.destinations__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 24px;
}

.destination {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.destinations.can-animate .destination {
  opacity: 0;
  transform: translateY(-64px) scale(0.92);
  transition:
    opacity 560ms ease-out,
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--drop-delay, 0ms);
  will-change: opacity, transform;
}

.destinations.can-animate .destination.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.destination img {
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.destination span {
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.22;
}

@keyframes destinationDropIn {
  0% {
    opacity: 0;
    transform: translateY(-72px) scale(0.9);
  }

  58% {
    opacity: 1;
    transform: translateY(10px) scale(1.025);
  }

  82% {
    transform: translateY(-5px) scale(0.99);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.vehicle {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 54px;
  align-items: center;
}

.vehicle__copy h2 {
  text-align: left;
}

.vehicle__copy h2::after {
  margin-left: 0;
}

.vehicle__copy h3 {
  margin: 34px 0 14px;
  color: var(--blue);
  font-family: var(--brand-font);
  font-size: 22px;
  font-weight: 900;   /* Merriweather Black */
}

.vehicle__copy p {
  max-width: 330px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.gallery-live {
  position: relative;
}

.gallery-live__main {
  width: 100%;
  height: auto;   /* new — without this, the img's own height="750" HTML attribute was winning over aspect-ratio, since no CSS height rule existed to out-prioritize it */
  aspect-ratio: 1.6;   /* was 1.28 (the photo's natural ratio, shown uncropped) — desktop only; shorter crop so the photo doesn't tower over the text column beside it. Mobile keeps its own aspect-ratio (1.42) via the media query below, unchanged */
  display: block;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.gallery-live__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--blue-2);
  box-shadow: 0 12px 28px rgba(18, 40, 70, 0.18);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  transform: translateY(-50%);
}

.gallery-live__prev {
  left: 18px;
}

.gallery-live__next {
  right: 18px;
}

.gallery-live__dots {
  display: flex;
  gap: 8px;
  margin-top: 26px;
}

.gallery-live__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d6e0ea;
  cursor: pointer;
}

.gallery-live__dots button.is-active {
  background: var(--blue-2);
  transform: scale(1.18);
}

.process {
  background: transparent;
}

.process::before {
  background: linear-gradient(180deg, var(--paper), var(--soft-blue));
}

.process__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}

.process__steps div {
  display: grid;
  gap: 9px;
  justify-items: center;
  text-align: center;
}

.process__steps b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 12px;
}

.process__steps strong {
  color: var(--blue);
  font-size: 15px;
  line-height: 1.25;
}

.process__steps span,
.process__note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.process__note {
  margin: 34px 0 0;
  text-align: center;
}

.callout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 25px 44px;
  border: 1px solid #f0d6ae;
  border-radius: 18px;
  background: #fff3df;
}

.callout strong {
  color: var(--blue);
  font-family: var(--brand-font);
  font-size: 28px;
  font-weight: 900;   /* Merriweather Black */
}

.prices {
  background: transparent;
}

.prices::before {
  background: linear-gradient(180deg, var(--soft-blue), var(--paper));
}

.prices__grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 24px;
}

.prices article {
  padding: 28px 26px;
  border: 1px solid rgba(13, 82, 155, 0.13);
  border-top: 3px solid var(--blue-2);   /* colored top edge marks this as the page's one primary conversion panel, distinct from every other card */
  border-radius: var(--radius-elevated);   /* was var(--radius) — deliberately larger, exclusive to price cards */
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-elevated);   /* was var(--shadow) — stronger elevation, exclusive to price cards */
}

.prices h3 {
  margin: 0 0 22px;
  color: var(--blue);
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.prices dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.prices dl div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}

.prices dt,
.prices dd,
.prices article p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.prices dt,
.prices article p {
  color: var(--ink);
}

.prices dd,
.prices__rate,
.prices__note b {
  color: var(--red);
  font-weight: 700;
  white-space: nowrap;
}

.prices__rate {
  margin: 32px 0 24px;
  font-family: var(--brand-font);
  font-size: 38px;
  font-weight: 900;   /* Merriweather Black */
  line-height: 1;
  text-align: center;
}

.prices article > p {
  margin-top: 24px;
}

.prices__note,
.prices__bottom {
  padding: 16px;
  border-radius: 12px;
  background: #fff7ec;
}

.prices__bottom {
  margin: 24px 0 0;
  color: var(--ink);
  font-size: 15px;
  text-align: center;
}

.bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: start;
  background: transparent;
}

.bottom::before {
  background: linear-gradient(180deg, var(--paper), var(--warm));
}

.faq-live,
.contact-live {
  padding: 40px 0 0;   /* was 32px 34px on a bordered/shadowed card — now a quiet, unboxed panel so the price cards above remain the visually loudest thing on the page */
  border: 0;
  border-top: 1px solid var(--line);   /* was a full card border — a single top hairline instead */
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.faq-live h2,
.contact-live h2 {
  margin: 0 0 22px;
  color: var(--blue);
  font-family: var(--brand-font);
  font-size: 28px;
  font-weight: 900;   /* Merriweather Black */
  line-height: 1.12;
}

.faq-live details {
  border-bottom: 1px solid var(--line);
}

.faq-live details:first-of-type {
  border-top: 1px solid var(--line);
}

.faq-live summary {
  position: relative;
  padding: 15px 34px 15px 0;
  list-style: none;
  cursor: pointer;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.faq-live summary::-webkit-details-marker {
  display: none;
}

.faq-live summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  color: var(--blue-2);
  font-size: 22px;
  font-weight: 400;
  transform: translateY(-50%);
}

.faq-live details[open] summary::after {
  content: "−";
}

.faq-live p {
  margin: -4px 34px 15px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.contact-live {
  display: grid;
  justify-items: start;
}

.contact-live p {
  max-width: 380px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.contact-live__phone {
  margin-bottom: 22px;
  color: var(--blue);
  font-family: var(--brand-font);
  font-size: 34px;
  font-weight: 900;   /* Merriweather Black */
  line-height: 1;
  text-decoration: none;
}

.contact-live__messengers {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.contact-live__messengers .messenger {
  width: 42px;
  height: 42px;
}

.contact-live span {
  margin-top: 15px;
  color: var(--muted);
  font-size: 13px;
}

.mobile-action-bar {
  display: none;
}

.footer-live {
  display: grid;
  grid-template-columns: 1.1fr 1.15fr 1.2fr 1fr;
  gap: 24px;
  align-items: center;
  width: min(1180px, calc(100% - 72px));
  margin: 0 auto;
  padding: 18px 0;
  color: #fff;
  font-size: 14px;
}

body > .footer-live {
  width: 100%;
  max-width: 1440px;
  padding: 18px max(36px, calc((100% - 1180px) / 2));
  background: #07579f;
}

.footer-live strong {
  font-family: var(--brand-font);
  font-size: 24px;
  font-weight: 900;   /* Merriweather Black */
}

:focus-visible {
  outline: 3px solid rgba(13, 82, 155, 0.35);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  body {
    padding-bottom: 92px;
  }

  .topbar,
  .hero__content,
  .section,
  .callout {
    width: min(100% - 32px, 760px);
  }

  .topbar,
  .vehicle,
  .bottom,
  .prices__grid,
  .footer-live {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 650px;
    padding-top: 72px;
  }

  .hero::before {
    background-position: 47% center;
  }

  .hero::after {
    background:
      linear-gradient(90deg, rgba(255, 253, 249, 0.96) 0%, rgba(255, 253, 249, 0.8) 47%, rgba(255, 253, 249, 0.14) 100%),
      linear-gradient(180deg, rgba(255, 253, 249, 0.82) 0%, rgba(255, 253, 249, 0.26) 36%, rgba(255, 253, 249, 0.62) 100%);
  }

  .topbar {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 72px;
  }

  .topbar.is-scrolled,
  .topbar.is-open {
    padding: 6px 8px;
  }

  .logo img {
    width: 118px;
  }

  .topbar__contact {
    justify-items: end;
    min-width: 0;
  }

  .topbar__phone-row {
    gap: 6px;
  }

  .topbar__phone-row .messenger {
    display: none;
  }

  .topbar__phone {
    font-size: 17px;
    white-space: nowrap;
  }

  .topbar__contact span {
    display: none;
  }

  .messenger {
    width: 28px;
    height: 28px;
  }

  .menu-toggle {
    display: block;
    width: 40px;
    height: 40px;
  }

  .menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 16px 32px;
    border-radius: 14px;
    background: rgba(255, 253, 249, 0.985);
    box-shadow: 0 16px 34px rgba(18, 40, 70, 0.14);
    backdrop-filter: blur(10px);
    overflow: visible;
    z-index: 30;
  }

  .topbar.is-open .menu {
    display: grid;
  }

  .menu a {
    padding: 11px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }

  .menu a::after {
    display: none;
  }

  .menu > a:last-of-type {
    border-bottom: 0;
  }

  .menu__messengers {
    display: flex;
    justify-content: center;
    gap: 14px;
    align-items: center;
    margin-top: 14px;
    padding: 12px 0 10px;
  }

  .menu__messengers .messenger {
    display: inline-grid;
    width: 40px;
    height: 40px;
    box-shadow: 0 7px 16px rgba(18, 40, 70, 0.09);
  }

  .mobile-action-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid rgba(220, 232, 244, 0.95);
    border-radius: 18px;
    background: rgba(255, 253, 249, 0.96);
    box-shadow: 0 18px 40px rgba(18, 40, 70, 0.18);
    backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .mobile-action-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-action-bar__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    flex: 1;
    border-radius: 14px;
    background: var(--red);
    color: #fff;
    font-family: var(--brand-font);
    font-size: 16px;
    font-weight: 900;   /* Merriweather Black */
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(215, 25, 32, 0.2);
  }

  .mobile-action-bar .messenger {
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  h1 {
    max-width: 340px;
    font-size: 38px;
    line-height: 1.08;
    white-space: normal;   /* new — resets the desktop-only nowrap so the headline still wraps normally on phones */
  }

  .hero__content {
    align-items: center;
    min-height: 540px;
  }

  .hero__copy {
    max-width: 360px;
    padding: 26px 0 28px;
  }

  .hero__copy p {
    max-width: 315px;
    margin: 20px 0 24px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75);
  }

  .destinations__grid,
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-live {
    order: 2;
  }

  .vehicle {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .vehicle__copy {
    display: contents;
  }

  .vehicle__copy h2 {
    order: 1;
    margin-bottom: 0;
  }

  .vehicle__copy h3 {
    order: 3;
    margin: 0;
    font-size: 20px;
  }

  .vehicle__copy p {
    order: 4;
    max-width: none;
    font-size: 16px;
  }

  .gallery-live__main {
    aspect-ratio: 1.42;
    max-height: 255px;
  }

  .gallery-live__arrow {
    width: 40px;
    height: 40px;
  }

  .gallery-live__prev {
    left: 10px;
  }

  .gallery-live__next {
    right: 10px;
  }

  .gallery-live__dots {
    order: 5;
    margin-top: -12px;
  }

  .callout {
    align-items: start;
    flex-direction: column;
  }

  .contact-live__phone {
    font-size: 30px;
    white-space: nowrap;
  }

  body > .footer-live {
    display: grid;
    gap: 12px;
    padding: 20px 28px;
  }

  .footer-live strong {
    font-size: 22px;
  }
}

@media (max-width: 430px) {
  .logo img {
    width: 92px;
  }

  .topbar__phone {
    font-size: 13px;
  }

  .messenger {
    width: 24px;
    height: 24px;
  }

  .menu-toggle {
    width: 36px;
    height: 36px;
  }

  .contact-live__phone {
    font-size: 26px;
  }
}