/* =========================================================
   Airports Transfer — modern layout on the classic palette
   ========================================================= */
:root {
  --bg: #ffffff;
  --bg-soft: #f4f8fc;
  --surface: #ffffff;
  --surface-2: #f8fbfe;
  --border: #e1e9f2;
  --text: #0e1c2b;
  --muted: #57697b;

  --navy: #0b4485;
  --navy-deep: #082f5c;
  --blue: #1a6ac4;
  --blue-soft: #e9f2fd;
  --red: #c1272d;
  --red-dark: #9c1d22;
  --gold: #e0a11c;
  --green: #16814a;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(11, 68, 133, 0.06), 0 2px 6px rgba(11, 68, 133, 0.06);
  --shadow: 0 12px 32px rgba(11, 68, 133, 0.10);
  --shadow-lg: 0 28px 64px rgba(11, 68, 133, 0.16);

  --container: 1140px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --t: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1622;
    --bg-soft: #0e1e2e;
    --surface: #122436;
    --surface-2: #16293c;
    --border: #22354a;
    --text: #e9f1f9;
    --muted: #9db0c3;
    --navy: #163e6b;
    --navy-deep: #0b2540;
    --blue: #5b9bef;
    --blue-soft: #16304d;
    --red: #e0484e;
    --red-dark: #c1272d;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow: 0 12px 32px rgba(0,0,0,0.45);
    --shadow-lg: 0 28px 64px rgba(0,0,0,0.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem); color: var(--muted); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.narrow { max-width: 780px; }

.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--navy); color: #fff;
  padding: .75rem 1.25rem; border-radius: var(--radius-sm);
  z-index: 1000; transition: top var(--t); text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
/* Class-based display rules (.btn) out-specify the browser's [hidden]
   rule, so hidden must win explicitly or it is silently ignored. */
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; min-height: 50px;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 650; font-size: 1rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--red-dark); color: #fff; box-shadow: var(--shadow); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-on-dark { background: #fff; color: var(--navy); }
.btn-on-dark:hover { background: var(--gold); color: #23180a; }
.btn-lg { padding: 1rem 2rem; min-height: 58px; font-size: 1.06rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--border);
}
/* The translucent blur lives on a pseudo-element, not on .site-header itself.
   backdrop-filter makes an element the containing block for its position:fixed
   descendants, and the nav drawer and its scrim are both children of the
   header: with the filter on the header, `inset: 0` on the scrim resolved
   against the header box, so it covered only the ~75px header strip instead of
   the viewport and tapping outside the menu did not close it. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: .85rem; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.brand img { width: auto; height: clamp(42px, 2rem + 1.2vw, 56px); }
@media (prefers-color-scheme: dark) {
  .brand img { background: #fff; padding: 5px 9px; border-radius: var(--radius-sm); }
}

.primary-nav ul { list-style: none; display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; }
.primary-nav a {
  display: block; padding: .55rem .95rem; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: .97rem;
  transition: background var(--t), color var(--t);
}
.primary-nav a:hover { background: var(--bg-soft); color: var(--blue); }
/* The menu only just fits on one row. Between the drawer breakpoint and 1280px
   it wrapped to two rows, so the links tighten in that band rather than pushing
   the drawer up to 1280 and taking the horizontal nav away from every 1024 and
   1152 laptop. Verified still necessary at six items: "Check Reservation" is
   wider than the "Reviews" entry it replaced, so removing an item did not
   remove the need. */
@media (min-width: 1001px) and (max-width: 1280px) {
  .primary-nav ul { gap: .1rem; }
  .primary-nav a { padding-inline: .58rem; font-size: .94rem; }
}
.primary-nav a[aria-current="page"] { background: var(--blue-soft); color: var(--navy); }
@media (prefers-color-scheme: dark) { .primary-nav a[aria-current="page"] { color: var(--text); } }

.header-actions { display: flex; align-items: center; gap: .75rem; }
.header-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap;
}
.header-phone:hover { color: var(--red); }
.header-phone svg { color: var(--red); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.nav-scrim { display: none; }

/* Nav drawer breakpoint. Six nav items no longer fit on one row below
   ~1000px, so the drawer takes over there rather than letting the nav
   wrap to a second row. Keep this in step with NAV_BREAKPOINT in
   js/main.js. */
@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .header-phone .phone-text { display: none; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(320px, 86vw); height: 100dvh; z-index: 95;
    background: var(--surface); box-shadow: var(--shadow-lg);
    padding: 5.5rem 1.25rem 2rem;
    transform: translateX(100%); transition: transform var(--t), visibility var(--t);
    overflow-y: auto;
    /* transform alone parks the drawer off-screen but leaves it part of the
       page: it widened the scrollable area, so every page scrolled sideways,
       and its links stayed focusable and exposed to screen readers while the
       menu was closed. visibility removes it from all three. */
    visibility: hidden;
  }
  .primary-nav[data-open="true"] { transform: translateX(0); visibility: visible; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: .2rem; }
  .primary-nav a { padding: .9rem 1rem; font-size: 1.06rem; }
  .nav-scrim { position: fixed; inset: 0; background: rgba(6,20,34,.55); z-index: 90; }
  .nav-scrim[data-open="true"] { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #10528f 100%);
  color: #fff;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 320px at 88% -10%, rgba(255,255,255,.16), transparent 65%),
    radial-gradient(520px 300px at 8% 110%, rgba(193,39,45,.28), transparent 70%);
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(1.75rem, 3.5vw, 3.25rem); align-items: center;
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-copy { max-width: 640px; }
.hero-copy h1 { color: #fff; margin-bottom: .6rem; }
.hero-copy p { color: rgba(255,255,255,.86); font-size: clamp(1.02rem, .98rem + .35vw, 1.22rem); max-width: 60ch; }

/* Quick quote widget card */
.quote-card {
  background: #fff; color: #0e1c2b;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  width: 100%; max-width: 500px; margin-inline: auto;
}
@media (min-width: 981px) { .quote-card { margin-right: 0; } }
.quote-card h2 { color: #0e1c2b; font-size: 1.35rem; margin-bottom: .2rem; }
.quote-card .quote-sub { color: #57697b; font-size: .95rem; margin-bottom: 1.1rem; }
.quote-card a { color: #0b4485; }
.exat-quick-quote { min-height: 96px; }
.exat-quick-quote iframe { margin-inline: auto; }
.exat-quick-quote:empty::after {
  content: "Loading quick quote\2026";
  display: block; padding: 1.5rem 0; text-align: center;
  color: #57697b; font-size: .93rem;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem; margin-bottom: 1.1rem;
  border-radius: 999px; background: rgba(255,255,255,.14);
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

.hero-stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
@media (max-width: 600px) { .hero-stats { grid-template-columns: 1fr; gap: .6rem; } }
.hero-stat {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.hero-stat strong { display: block; font-size: 1.6rem; line-height: 1.1; color: #fff; }
.hero-stat > span { font-size: .88rem; color: rgba(255,255,255,.78); }
.hero-stat strong span { font: inherit; color: inherit; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.25rem, 5.5vw, 5.5rem); }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 640px; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.section-head p { margin-bottom: 0; }
.section-head.center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--blue) 35%, var(--border)); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); margin-bottom: 0; }
.card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 1.1rem;
  border-radius: 13px; background: var(--blue-soft); color: var(--blue);
}
.card-foot { margin-top: auto; padding-top: 1rem; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .7rem; border-radius: 999px;
  background: var(--blue-soft); color: var(--navy);
  font-size: .82rem; font-weight: 650;
}
@media (prefers-color-scheme: dark) { .chip { color: var(--text); } }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }

/* Feature list */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ticks li { display: flex; gap: .65rem; align-items: flex-start; font-weight: 600; }
.ticks svg { flex-shrink: 0; margin-top: 4px; color: var(--green); }

/* Split feature block */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.quote {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm);
  margin: 0; display: flex; flex-direction: column;
}
.stars { color: var(--gold); letter-spacing: 2px; font-size: 1.05rem; margin-bottom: .7rem; }
.quote p { color: var(--text); margin-bottom: 1rem; }
.quote footer { margin-top: auto; font-size: .88rem; color: var(--muted); }
.quote footer strong { display: block; color: var(--text); }
.reviews-actions { margin-top: 2rem; text-align: center; }
/* inline-block, not flex: the count sits in normal text flow so the
   spaces around it survive */
.reviews-actions .btn { display: inline-block; text-align: center; }
.reviews-status { margin: .85rem 0 0; font-size: .9rem; color: var(--muted); min-height: 1.2em; }
[data-reviews-list] { align-items: start; }

.rating-band {
  display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: .85rem 1.25rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: var(--shadow-sm); font-weight: 650;
}

/* ---------- CTA band ---------- */
.cta {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.25rem);
}
.cta h2 { color: #fff; margin-bottom: .35rem; }
.cta p { color: rgba(255,255,255,.85); margin: 0; }

/* ---------- Page hero (inner) ---------- */
.page-hero { background: var(--bg-soft); border-bottom: 1px solid var(--border); padding-block: clamp(2rem, 4vw, 3.25rem); }
.page-hero h1 { margin-bottom: .4rem; }
.page-hero p { margin-bottom: 0; max-width: 65ch; }
.breadcrumb { font-size: .86rem; color: var(--muted); margin-bottom: .9rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }

/* ---------- Contact ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.contact-list li {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm);
}
.contact-list .icon {
  flex-shrink: 0; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--blue-soft); color: var(--blue);
}
.contact-list h3 { margin-bottom: .2rem; font-size: 1.02rem; }
.contact-list p { margin: 0; color: var(--muted); }
.map-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-height: 340px; padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--surface-2);   /* shows while the map iframe loads */
}
/* The map fills the card; the address sheet floats over it. */
.map-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
.map-sheet {
  position: relative; z-index: 1;   /* above .map-frame */
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm);
}
.map-sheet h3 { margin-bottom: .15rem; font-size: 1rem; }
.map-sheet p { margin-bottom: .9rem; color: var(--muted); font-size: .92rem; }

/* ---------- Payments ---------- */
.pay-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.pay {
  width: auto; height: 38px;
  padding: .3rem .6rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.8); padding-block: clamp(2.5rem, 4vw, 3.5rem) 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: 2rem; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.site-footer h2 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .9rem; }
.site-footer p { color: rgba(255,255,255,.7); font-size: .93rem; }
.footer-brand img { height: 44px; width: auto; background: #fff; padding: 6px 10px; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-list li, .footer-list a { font-size: .93rem; color: rgba(255,255,255,.75); }
.footer-list a { text-decoration: none; }
.footer-list a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  margin-top: 2.25rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .84rem; color: rgba(255,255,255,.6);
}
.footer-bottom p { margin: 0; color: inherit; font-size: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Cookie consent ---------- */
.consent {
  position: fixed; z-index: 200;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 40rem; margin-inline: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
  max-height: calc(100dvh - 2rem); overflow-y: auto;
}
.consent-title { font-size: 1.05rem; margin-bottom: .4rem; }
.consent-text { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
/* Accept and reject must read as equals — same size, same weight. Styling
   "Reject all" as the quieter option is treated as invalid consent. */
.consent-actions .btn { flex: 1 1 auto; min-width: 8.5rem; }
.consent-panel { margin-top: 1.1rem; border-top: 1px solid var(--border); padding-top: 1.1rem; }
.consent-fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.consent-fieldset legend { font-weight: 650; margin-bottom: .6rem; }
.consent-option { margin-bottom: .85rem; }
.consent-option label { display: flex; align-items: center; gap: .5rem; font-weight: 650; }
.consent-option input { width: 1.15rem; height: 1.15rem; accent-color: var(--blue); }
.consent-detail { margin: .3rem 0 0 1.65rem; font-size: .86rem; color: var(--muted); }

.footer-link {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-decoration: underline;
  cursor: pointer;
}

/* Placeholder shown in place of a third-party embed until it is allowed. */
.map-embed { position: absolute; inset: 0; }
.map-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 1.5rem; text-align: center;
  background: var(--surface-2);
}
.map-placeholder p { max-width: 26rem; font-size: .9rem; color: var(--muted); margin: 0; }

/* ---------- Legal pages ---------- */
.legal { max-width: 52rem; }
.legal h2 { margin-top: 2.25rem; margin-bottom: .75rem; font-size: 1.25rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1rem 1.25rem; }
.legal li { margin-bottom: .4rem; }
.legal-meta { color: var(--muted); font-size: .9rem; }
/* Clause numbers are part of the legal text, so they are written into the
   markup rather than generated, and must survive copy and paste. */
.clauses { list-style: none; margin: 0 0 1rem; padding: 0; }
.clause { display: grid; grid-template-columns: 3.5rem 1fr; gap: .5rem; margin-bottom: .7rem; }
.clause-no { font-weight: 650; color: var(--navy); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .clause-no { color: var(--text); } }
@media (max-width: 480px) { .clause { grid-template-columns: 3rem 1fr; } }
/* Wide content scrolls inside its own container, never the page. */
.legal-table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .93rem; }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: .6rem .7rem; text-align: left; vertical-align: top; }
.legal-table th { background: var(--bg-soft); font-weight: 650; }

/* ---------- London Visitor Guide ---------- */
.guide-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.guide-card {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.1rem; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.guide-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .guide-card { transition: none; } .guide-card:hover { transform: none; } }
.guide-card img { width: 93px; height: 70px; flex-shrink: 0; border-radius: var(--radius-sm); object-fit: cover; }
.guide-card h2 { font-size: 1.05rem; margin-bottom: .3rem; color: var(--navy); }
@media (prefers-color-scheme: dark) { .guide-card h2 { color: var(--text); } }
.guide-card p { font-size: .92rem; color: var(--muted); margin: 0; }

.prose { max-width: 52rem; }
.prose h2 { margin-top: 2.5rem; margin-bottom: .6rem; font-size: 1.3rem; }
.prose h3 { margin-top: 1.9rem; margin-bottom: .5rem; font-size: 1.08rem; }
.prose h2:first-child, .prose .lead + h2 { margin-top: 1.25rem; }
.prose p { margin-bottom: 1rem; }
.prose ul { margin: 0 0 1.25rem 1.25rem; }
.prose li { margin-bottom: .5rem; }
/* Practical details (nearest station, website) sit apart from the prose. */
.facts {
  display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem;
  margin: 0 0 1.25rem; padding: .9rem 1.1rem;
  background: var(--bg-soft); border-radius: var(--radius-sm);
  font-size: .92rem;
}
.facts dt { font-weight: 650; color: var(--navy); }
@media (prefers-color-scheme: dark) { .facts dt { color: var(--text); } }
.facts dd { margin: 0; color: var(--muted); }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; gap: .1rem .9rem; } .facts dd { margin-bottom: .5rem; } }
.guide-back { margin-top: 2.5rem; }

/* ---------- Travel news ---------- */
.news-list { max-width: 52rem; display: grid; gap: 1.25rem; }
.news-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.4rem;
}
.news-meta { font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }
/* The publication is part of the attribution, so it is not decoration. */
.news-source { font-weight: 650; color: var(--navy); }
@media (prefers-color-scheme: dark) { .news-source { color: var(--text); } }
.news-item h2, .news-item h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.news-item p { margin-bottom: .6rem; }
.news-link { margin-bottom: 0; font-size: .93rem; }

.news-strip h2 { font-size: 1.3rem; margin-bottom: 1.1rem; }
.news-strip-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.news-strip-all { margin-top: 1.25rem; margin-bottom: 0; }

/* ---------- Check reservation ---------- */
/* Full width. This panel holds a third-party widget that renders its own
   layout — a form, then a booking confirmation with labelled rows — not prose,
   so constraining it to a reading measure squeezed the confirmation into a
   narrow column and left most of the page empty. */
.reservation-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
}
/* Reserve height so the widget arriving does not shift the page. */
.exat-check-reservation { min-height: 150px; }
.exat-check-reservation:empty::after {
  content: "Loading reservation lookup\2026";
  display: block; padding: 2rem 0; text-align: center;
  color: var(--muted); font-size: .93rem;
}
.exat-check-reservation iframe { width: 100%; margin-inline: auto; }
.reservation-fallback { margin: 0; }
.reservation-help { max-width: 40rem; margin-top: 2.5rem; }
.reservation-help h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.reservation-help ul { margin: 0 0 1rem 1.25rem; }
.reservation-help li { margin-bottom: .4rem; }