/* ===== 00-base.css ===== */
/* Easy Ride: the bright design. White header, photo heroes with a blue wash, picture cards on a
   soft blue page, a navy footer. One sans face, brand red for every action.
   Built into assets/site.css by bin/build-css.sh: edit the partials, never site.css. */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/hanken-grotesk-normal.woff2") format("woff2"); }

:root {
  --red: #E3170A;
  --red-deep: #B8120A;
  --red-ink: #A3120A;
  --red-tint: #FDE9E7;
  --blue: #0B63CE;
  --sky: #CFE6FB;
  --navy: #0B1B3F;
  --ink: #0B1B3F;
  --ink-2: #2B3A57;
  --muted: #56627A;
  --soft: #EEF4FB;
  --line: #D9E2EE;
  --line-2: #C3CFDF;
  --field: #7A8AA3;
  --wa: #0E7A3F;
  --wa-deep: #0B6534;
  --ok-tint: #E6F4EC;
  --focus: var(--blue);
  --ff-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --wrap: 1180px;
  --measure: 68ch;
  --gutter: clamp(16px, 4vw, 40px);
  --r: 8px;
  --r-card: 6px;
  --shadow: 0 1px 2px rgba(11, 27, 63, .06), 0 10px 30px -14px rgba(11, 27, 63, .25);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.55 var(--ff-sans); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; line-height: 1.15; }
h3 { font-size: 21px; font-weight: 700; line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 20px; height: 20px; flex: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--navy); color: #fff; border-radius: var(--r); }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: 0; }

@media (max-width: 560px) {
  h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===== 10-chrome.css ===== */
/* header: logo, the five links, the blue phone pill (red is kept for the one main action). Static, so it never covers a focused field */
.site-header { position: relative; z-index: 20; background: #fff; box-shadow: 0 1px 0 var(--line); }
.site-header__in { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; min-height: 76px; }
.brand { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.brand img, .logo--text { display: block; width: auto; height: 50px; }
.logo--text { height: auto; font-weight: 800; font-size: 22px; color: var(--red); }
.nav__list { display: flex; gap: 26px; }
.nav__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-size: 16.5px; font-weight: 500; text-decoration: none; }
.nav__list a:hover { color: var(--blue); }
/* the current page, and the hub while on one of its children */
.nav__list a[aria-current], .nav__list .current-menu-item > a, .nav__list .current-menu-ancestor > a, .nav__list .current-page-ancestor > a {
  color: var(--navy); text-decoration: underline 2px var(--blue); text-underline-offset: 8px;
}
.nav__more { display: none; }
.call {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}
.call:hover { background: var(--red-deep); }
.menu-btn { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--navy); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-btn .i { width: 26px; height: 26px; margin: auto; }
.menu-btn__close, .is-open .menu-btn__open { display: none; }
.is-open .menu-btn__close { display: block; }

@media (max-width: 980px) {
  .site-header__in { gap: 10px; }
  /* without JavaScript the links simply sit under the logo */
  .nav { order: 3; flex-basis: 100%; padding-bottom: 12px; }
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 4px var(--gutter) 20px; background: #fff; box-shadow: 0 18px 30px -18px rgba(11, 27, 63, .35); }
  .js .is-open .nav { display: block; }
  .js .menu-btn { display: block; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); font-size: 18px; }
  .nav__more { display: grid; gap: 14px; padding-top: 6px; }
  .nav__change { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); color: var(--blue); font-size: 18px; font-weight: 600; text-decoration: none; }
  .nav__btns { display: grid; gap: 10px; padding-top: 4px; }
  .nav__hours { color: var(--muted); font-size: 15px; text-align: center; }
  .nav__hours a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-weight: 700; text-decoration: none; }
}
@media (max-width: 560px) {
  .site-header__in { min-height: 64px; }
  .brand img { height: 40px; }
  .call { justify-content: center; width: 44px; padding: 0; }
  .call span { display: none; }
}

/* footer: four columns on navy, then the legal base row */
.site-footer { background: var(--navy); color: #C9D3E6; font-size: 15.5px; }
.site-footer :focus-visible { outline-color: #fff; }
.foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 52px; padding-bottom: 28px; }
.foot__h { margin-bottom: 14px; color: #fff; font-size: 16px; font-weight: 700; }
.foot__col li + li { margin-top: 4px; }
.foot__col a { display: inline-flex; align-items: center; min-height: 32px; }
.site-footer a { color: #C9D3E6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.foot__contact a { color: #fff; font-weight: 600; }
.foot__base { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; }
.foot__line { color: #fff; font-size: 15px; font-weight: 600; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot__legal a { display: inline-flex; align-items: center; min-height: 32px; color: #fff; }
.foot__base a { text-decoration: underline; }
.company-lines { display: grid; gap: 2px; }

@media (max-width: 860px) {
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot { gap: 24px 16px; }
  .foot__contact { grid-column: 1 / -1; }
}

/* mobile action bar: Call, WhatsApp, Book online. app.js shows it once the hero has gone and hides
   it while a card, a form, the CTA band or the footer contacts are on screen */
.mbar { display: none; }
@media (max-width: 860px) {
  html:has(.mbar) { scroll-padding-bottom: 80px; }
  body:has(.mbar) .site-footer { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 24px -12px rgba(11, 27, 63, .4);
    transition: transform var(--dur) var(--ease), visibility 0s;
  }
  .js .mbar:not(.is-on) { transform: translateY(110%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility 0s var(--dur); }
  .mbar .btn { min-height: 48px; padding: 0 8px; gap: 6px; font-size: 15.5px; }
  .mbar .btn--white { border-color: var(--line-2); }
}

@media print {
  .site-header, .site-footer, .mbar, .skip, .cta-band { display: none !important; }
  body { color: #000; font-size: 12pt; }
}

/* on touch screens every footer link is a full 44px target */
@media (pointer: coarse) {
  .foot__col li + li { margin-top: 0; }
  .foot__col a, .foot__legal a, .foot__base address a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ===== 20-components.css ===== */
/* buttons: red for the one main action on a screen, line for the rest, green for WhatsApp */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 2px solid transparent; border-radius: var(--r);
  font: 700 16px/1.15 var(--ff-sans); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-deep); }
.btn--wa { background: var(--red); color: #fff; }
.btn--wa:hover { background: var(--red-deep); }
.btn--line { border-color: var(--blue); color: var(--blue); background: #fff; }
.btn--line:hover { background: var(--blue); color: #fff; }
.btn--white { border-color: #fff; color: var(--navy); background: #fff; }
.btn--white:hover { border-color: var(--sky); background: var(--sky); }
.btn[aria-disabled="true"] { opacity: .65; cursor: progress; }
.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* sections and cards */
.sec { padding: clamp(48px, 6vw, 76px) 0; }
.sec--soft { background: var(--soft); }
.sec__title { margin-bottom: 26px; text-align: center; font-size: clamp(26px, 3vw, 34px); font-weight: 800; }
.sec__lead { max-width: 680px; margin: -12px auto 28px; color: var(--muted); text-align: center; }
.card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); }
.card > img { width: 100%; height: 190px; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover > img { transform: scale(1.03); }
.card__body { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 22px 26px 26px; text-align: center; flex: 1; }
.card h2 { font-size: 26px; font-weight: 800; }
.card p { color: var(--muted); }
.card .btn { margin-top: 6px; }

/* feature: a photo beside its copy, stacked on phones */
.feature { display: grid; grid-template-columns: 45% 1fr; overflow: hidden; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); }
.feature > img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.feature__body { display: grid; align-content: center; gap: 12px; padding: 32px 36px; }
.feature__body p { color: var(--muted); }

.ticks { display: grid; gap: 8px; margin: 4px 0; text-align: left; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.ticks .i { margin-top: 2px; color: var(--wa); }

/* booking hero: the card on a photo. Home: the approved even blue wash, H1 under the card from 560px.
   Inner: a local navy scrim behind the heading only, so the photo stays bright */
.bh { position: relative; isolation: isolate; overflow: hidden; padding: 48px 0 64px; background: #1E6FD0; color: #fff; }
.bh__bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.bh::after { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(11, 27, 63, .22); }
.bh--home { display: grid; align-content: center; min-height: calc(100svh - 76px); padding: 64px 0 72px; }
.bh--home::after { background: linear-gradient(180deg, rgba(11, 88, 190, .26), rgba(11, 60, 150, .4)); }
.bh__in { display: grid; justify-items: center; gap: 22px; text-align: center; }
.bh__head { position: relative; display: grid; justify-items: center; gap: 12px; max-width: 760px; }
.bh--inner .bh__head::before { content: ""; position: absolute; inset: -64px calc(-18% - 80px); z-index: -1; background: radial-gradient(farthest-side, rgba(11, 27, 63, .7), rgba(11, 27, 63, .5) 60%, rgba(11, 27, 63, 0)); }
.bh__title { color: #fff; text-shadow: 0 2px 16px rgba(11, 27, 63, .35); }
.bh--home .bh__title { font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -.01em; }
.bh__sub { max-width: 680px; color: #fff; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.5; text-shadow: 0 1px 12px rgba(11, 27, 63, .55); }
.bh__card { width: 100%; max-width: 1040px; }
/* TfL licence badge (parts/tfl-badge.php): our own stamp, never TfL's roundel. A pill under the
   booking card on its photo, a card on About, a block at the foot of every page. */
.tfl--pill {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  padding: 7px 14px 7px 10px; border-radius: 18px; text-align: left; background: rgba(11, 27, 63, .66); color: #fff;
  font-size: 14.5px; line-height: 1.3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tfl--pill .i { flex: none; width: 20px; height: 20px; color: #86DFA9; }
.tfl--pill b { font-weight: 700; }
.tfl:not(.tfl--pill) { display: flex; align-items: center; gap: 18px; text-align: left; }
/* the seal sits a little askew, like a stamp pressed on the page */
.tfl__seal { flex: none; width: 104px; height: 104px; transform: rotate(-9deg); filter: drop-shadow(0 6px 10px rgba(11, 27, 63, .22)); }
.tfl__body { display: grid; gap: 2px; min-width: 0; }
.tfl__title { color: var(--ink); font-size: 18px; font-weight: 800; line-height: 1.3; }
.tfl__no { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.tfl__body > p:not([class]) { margin-top: 4px; color: var(--muted); }
.tfl__check { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tfl--card { max-width: 640px; margin-top: 26px; padding: 18px 22px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: inset 4px 0 0 var(--wa); }
.tfl--foot { grid-column: 1 / -1; padding: 14px 18px 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r); background: rgba(255, 255, 255, .06); }
.tfl--foot .tfl__seal { width: 84px; height: 84px; filter: none; }
.tfl--foot .tfl__title { color: #fff; font-size: 16px; }
.tfl--foot .tfl__no { color: rgba(255, 255, 255, .85); font-weight: 500; }
.site-footer .tfl--foot .tfl__check { color: #fff; text-decoration: underline; }
.bh :focus-visible { outline-color: #fff; }
.bh__card :focus-visible { outline-color: var(--focus); }
@media (min-width: 561px) {
  .bh--home .bh__card { order: -1; }
  .bh--home .bh__head { margin-top: 30px; }
}
@media (max-width: 560px) {
  /* first-screen budget: on a 360 x 740 phone the H1 and the card's first button both show */
  .bh { padding: 8px 0 40px; }
  .bh--home { min-height: 0; padding: 20px 0 44px; }
  .bh__title, .bh--home .bh__title { font-size: 24px; }
  .bh__head { gap: 4px; }
  .bh--inner .bh__sub { font-size: 16px; line-height: 1.4; }
  .bh__in { gap: 14px; }
}

/* breadcrumbs: Home › Airport transfers › Heathrow */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; color: var(--muted); font-size: 15px; font-weight: 500; }
.crumbs li { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.crumbs li + li::before { content: "\203A"; opacity: .8; }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; }
@media (pointer: coarse) { .crumbs a { min-height: 44px; } }
.crumbs [aria-current] { color: var(--ink); }
.bh .crumbs ol, .ph--photo .crumbs ol, .ph--form .crumbs ol { justify-content: inherit; color: rgba(255, 255, 255, .85); }
.bh .crumbs [aria-current], .ph--photo .crumbs [aria-current], .ph--form .crumbs [aria-current] { color: #fff; }
.bh .crumbs ol { justify-content: center; }

/* page heads: photo (fleet, about), plain (legal, complaints, blog, 404), form (accounts, contact) */
.ph { position: relative; isolation: isolate; }
.ph__in { display: grid; gap: 12px; }
.ph__sub { max-width: 680px; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.5; }
.ph__meta { color: var(--muted); font-size: 15px; font-weight: 500; }
.ph__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ph--plain { padding: 36px 0 40px; background: var(--soft); }
.ph--plain .ph__sub { color: var(--ink-2); }
.ph--photo { display: grid; align-items: end; min-height: 360px; padding: 40px 0 44px; overflow: hidden; background: var(--navy); color: #fff; }
.ph--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 27, 63, .78), rgba(11, 27, 63, .35) 55%, rgba(11, 27, 63, .05)); }
.ph__text { display: grid; gap: 12px; }
.ph--photo .ph__text { max-width: 760px; }
.ph--photo .btn { justify-self: start; margin-top: 6px; }
.ph--photo h1, .ph--photo .ph__sub, .ph--form h1, .ph--form .ph__sub { text-shadow: 0 1px 12px rgba(11, 27, 63, .5); }
.ph--photo :focus-visible, .ph__copy :focus-visible { outline-color: #fff; }
.ph--form { padding: 0 0 48px; background: var(--soft); }
.ph--form .ph__in { gap: 24px; }
.ph__copy { position: relative; display: grid; align-content: start; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 32px var(--gutter) 40px; color: #fff; }
.ph__copy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 27, 63, .5), rgba(11, 27, 63, .72)); }
.ph__copy .ph__bg { z-index: -2; }
.ph__copy a:not(.btn) { color: #fff; }
.ph__copy .ticks .i { color: #fff; }
@media (min-width: 981px) {
  /* the photo spans the whole head, the scrim sits on the copy side */
  .ph--form { overflow: hidden; padding: 56px 0; background: var(--navy); }
  .ph--form .ph__in { grid-template-columns: 1fr minmax(0, 520px); align-items: start; gap: 48px; }
  .ph__copy { position: static; margin: 0; padding: 8px 0 0; }
  .ph__copy::before { background: linear-gradient(90deg, rgba(11, 27, 63, .8), rgba(11, 27, 63, .45) 50%, rgba(11, 27, 63, .15)); }
}
@media (max-width: 560px) {
  .ph--photo { min-height: 240px; padding: 28px 0 30px; }
  .ph--photo::after { background: linear-gradient(0deg, rgba(11, 27, 63, .78), rgba(11, 27, 63, .5)); }
  .ph--plain { padding: 24px 0 28px; }
}

/* steps: how booking works, numbered, across from 860px */
.steps { display: grid; gap: 16px; counter-reset: step; }
.steps li { position: relative; display: grid; align-content: start; gap: 6px; padding: 24px 24px 26px 82px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 24px; top: 22px; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 18px;
}
.steps p { color: var(--muted); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .steps li { padding: 28px 26px 30px; text-align: center; justify-items: center; }
  .steps li::before { position: static; margin-bottom: 8px; }
}

/* facts: two to four tiles of label, value and a small note */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; margin: 0; }
.facts > div { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 2px 12px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.facts .i { grid-row: span 3; width: 26px; height: 26px; color: var(--blue); }
.facts dt { color: var(--muted); font-size: 15px; font-weight: 500; }
.facts dd { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.facts small { color: var(--muted); font-size: 15px; font-weight: 500; }

/* chips: places that fill the booking card (or open /book/ with the place set) */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--field); border-radius: 999px;
  background: var(--soft); color: var(--navy); font-weight: 600; text-decoration: none; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sec--soft .chip { background: #fff; }
.chip:hover { border-color: var(--blue); background: var(--sky); }
.chip .i { width: 18px; height: 18px; color: var(--blue); }

/* questions: native details, the first one open */
.faq { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; font-size: 19px; font-weight: 700; line-height: 1.3; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px; border: solid var(--blue); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.faq details p { padding: 0 20px 18px; color: var(--ink-2); }
.faq__more { margin-top: 18px; color: var(--muted); text-align: center; }

/* CTA band: the navy close to most pages */
.cta-band { padding: clamp(44px, 5vw, 64px) 0; background: var(--navy); color: #fff; text-align: center; }
.cta-band .wrap { display: grid; justify-items: center; gap: 12px; }
.cta-band h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; }
.cta-band p:not(.btns) { max-width: 620px; color: #C9D3E6; }
.cta-band .btns { margin-top: 10px; }
.cta-band :focus-visible { outline-color: #fff; }

/* prose: long-form copy at a readable measure */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; font-size: 26px; font-weight: 800; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose img { border-radius: var(--r); }
.prose blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 4px solid var(--sky); color: var(--ink-2); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.page-body { padding: clamp(36px, 5vw, 60px) var(--gutter) clamp(48px, 6vw, 76px); }
.page-body__end { margin-top: 2em; padding-top: 1.2em; border-top: 1px solid var(--line); color: var(--muted); }

/* tables */
.tbl, .prose table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl caption, .prose caption { margin-bottom: 8px; font-weight: 700; text-align: left; }
.tbl th, .tbl td, .prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th, .prose thead th { background: var(--soft); }
@media (max-width: 560px) {
  .tbl, .prose table { font-size: 15px; }
  .tbl th, .tbl td, .prose th, .prose td { padding: 10px 8px; }
}

/* next step box inside long copy */
.nudge { display: grid; justify-items: start; gap: 12px; margin: 2em 0; padding: 24px 26px; background: var(--soft); border-radius: var(--r); }
.nudge h2 { margin: 0; font-size: 22px; font-weight: 800; }

/* form card, with the phone and WhatsApp way round when the form is missing */
.form-card { display: grid; gap: 14px; padding: 28px 30px 30px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); color: var(--ink); }
.form-card h2 { font-size: 24px; font-weight: 800; }
.form-card__lead { color: var(--muted); }
.form-card .btns { justify-content: flex-start; }
.form-page { display: grid; gap: 24px; }
@media (min-width: 981px) {
  .form-page--aside { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 40px; }
}
@media (max-width: 560px) {
  .form-card { padding: 22px 18px 24px; }
}

/* tiles: a few big links (404) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tiles a {
  display: grid; justify-items: center; gap: 8px; padding: 24px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); color: var(--navy); font-weight: 700; text-align: center; text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tiles a:hover { border-color: var(--blue); transform: translateY(-2px); }
.tiles .i { width: 28px; height: 28px; color: var(--blue); }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature > img { height: 220px; min-height: 0; }
  .feature__body { padding: 24px 22px 26px; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .btns > .btn, .cta-band .btn { width: 100%; }
}

/* ===== 50-home.css ===== */
/* Home only: the promise card, the airport cards, the minicabs feature, fleet and accounts.
   The hero is the shared booking hero (.bh--home in 20-components.css). */

/* a real person confirms every ride: one tall card beside three picture cards */
.conf { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.conf__main > img { height: 300px; }
.conf__main .card__body { gap: 14px; padding: 30px 34px 34px; }
.conf__main p { font-size: 18px; }
.conf__list { display: grid; grid-auto-rows: 1fr; gap: 24px; }
.conf__list .card { position: relative; padding-left: 42%; }
/* the photo fills the left of the card whatever its shape, so the text sets the height */
.conf__list .card > img { position: absolute; inset: 0 auto 0 0; width: 42%; height: 100%; }
.conf__list .card__body { min-height: 150px; justify-items: start; align-content: center; text-align: left; }
.conf__cta { margin-top: 4px; }

/* minicabs: photo, copy and four places that fill the card's width */
.feature h2 { font-size: 26px; font-weight: 800; }
.feature .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.feature .chips li { display: flex; }
.feature .chip { width: 100%; padding: 8px 14px; line-height: 1.25; }
.mc__hint { font-size: 15px; }
.mc__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.mc__go a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* fleet and business accounts */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo .card > img { height: 260px; object-position: 50% 65%; }

@media (max-width: 860px) {
  .conf, .duo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* the three points stay rows on phones: a thumbnail left, the text right */
  .conf__list { gap: 14px; }
  .conf__list .card { padding-left: 96px; }
  .conf__list .card > img { width: 96px; }
  .conf__list .card__body { min-height: 96px; gap: 4px; padding: 14px 16px; }
  .conf__main > img, .duo .card > img { height: 200px; }
  .conf__main .card__body { padding: 24px 20px 26px; }
  .feature h2 { font-size: 24px; }
  .mc__go .btn { width: 100%; }
  .mc__go { justify-content: center; }
}

/* ===== 51-airports.css ===== */
/* Airports: the cards and tiles (parts/airports.php, also on home), the hub and the airport pages. */

/* cards: place photo, name, terminals and a Book button that fills the card's width */
.ap-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ap .card__body { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* a 44px target without moving the title */
.ap h3 a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--navy); text-decoration: none; }
.ap h3 a:hover { color: var(--blue); }
.ap__terms { font-weight: 600; }
.ap .btn { align-self: stretch; margin-top: auto; }
.ap .card__body > p:last-of-type { margin-bottom: 12px; }

/* home: Heathrow and Stansted as big cards, then the other four as tiles */
.ap-list--feat { grid-template-columns: 1fr 1fr; }
.ap-list--feat .card > img { height: 280px; }
.ap-list--feat + .ap-list { margin-top: 24px; }

/* tiles: no photo; without a Book button the whole tile is the link */
.ap-list--tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ap-list--more { grid-template-columns: repeat(5, 1fr); }
.ap-list--tiles .card__body { gap: 2px; padding: 16px 12px; }
.ap-list--tiles h3 { font-size: 19px; }
.ap-list--tiles h3 a { color: var(--blue); }
.ap-list--tiles .ap__terms { color: var(--muted); font-size: 15px; font-weight: 500; }
.ap-list--tiles .btn { min-height: 44px; }
.ap--link { position: relative; border: 1px solid transparent; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ap--link h3 a::after { content: ""; position: absolute; inset: 0; }
.ap--link:hover { border-color: var(--blue); transform: translateY(-2px); }
.ap-all { margin-top: 24px; text-align: center; }
.ap-all a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }

/* hub: the intro line and what every transfer comes with, above the cards */
.ap-incl { display: grid; justify-items: center; gap: 14px; max-width: 860px; margin: -8px auto 32px; text-align: center; color: var(--ink-2); }
.ap-incl .ticks { grid-template-columns: 1fr 1fr; gap: 8px 28px; }

/* airport pages */
.ap-glance { padding-bottom: 0; }
.ap-glance .facts { grid-template-columns: 1fr 1fr; }
.ap-copy { display: grid; gap: 14px; max-width: var(--measure); margin-inline: auto; }
.ap-copy h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; }
.ap-copy h3 { margin-top: 10px; }
.ap-copy p { color: var(--ink-2); }
.ap-swap { margin-top: 28px; text-align: center; }

/* helpful guides: a short list of links */
.ap-guides { padding-top: 0; }
.ap-guides ul { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.ap-guides a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--r); font-weight: 700; text-decoration: none; }
.ap-guides a:hover { border-color: var(--blue); }

@media (min-width: 861px) {
  .ap-glance .facts { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .ap-list, .ap-list--tiles { grid-template-columns: 1fr 1fr; }
  .ap-list--more { grid-template-columns: repeat(3, 1fr); }
  .ap-list .card > img { height: 170px; }
  .ap-list--feat .card > img { height: 220px; }
}
@media (max-width: 560px) {
  .ap-list { gap: 16px; }
  .ap-list--more { grid-template-columns: 1fr 1fr; }
  .ap-list--more > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ap-list--feat { grid-template-columns: 1fr; }
  .ap-list--feat .card > img { height: 200px; }
  /* the hub on phones: a 2 x 3 grid of tiles (name, terminals, Book) */
  .ap-list--hub .card > img { display: none; }
  .ap-list--hub .card__body { gap: 2px; padding: 16px 12px; }
  .ap-list--hub h3 { font-size: 18px; }
  .ap-list--hub .ap__terms { color: var(--muted); font-size: 15px; font-weight: 500; }
  .ap-list--hub .btn { min-height: 44px; padding: 0 12px; }
  .ap-incl { margin-bottom: 24px; text-align: left; justify-items: start; }
  .ap-incl .ticks { grid-template-columns: 1fr; }
  .ap-swap .btn { width: 100%; }
  /* the facts as a 2 x 2 grid, so the strip stays short */
  .ap-glance .facts { gap: 12px; }
  .ap-glance .facts > div { grid-template-columns: 1fr; gap: 2px; padding: 14px; }
  .ap-glance .facts .i { grid-row: auto; margin-bottom: 4px; }
  .ap-glance .facts dd { font-size: 18px; }
}

/* ===== 52-services.css ===== */
/* Minicabs, Book and Fleet: the lines under the card, the trip cards with chips, the cars on their
   soft blue stage and the quick guide table. */

/* one line under the card: short notice is quicker by phone */
.mc-soon, .bk-line { text-align: center; color: var(--ink-2); }
.mc-soon { padding: 12px var(--gutter); background: #fff; font-weight: 500; }
.bk-line { margin-top: 28px; }
.mc-soon a, .bk-line a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; white-space: nowrap; }

/* where we take you: four picture cards, each with two place chips */
.trips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.trip > img { height: 230px; }
.trip .card__body { gap: 12px; }
.trip .chips { margin-top: auto; padding-top: 6px; }

.areas p { max-width: var(--measure); margin-inline: auto; color: var(--ink-2); text-align: center; }

/* book: the steps under the card go once the request is sent (the done screen says the same) */
body:has(.er[data-at="done"]) .bk-after { display: none; }

/* fleet: each car on a soft blue stage, the column count follows the number of cars */
.fleet { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 24px; }
/* positioned, so the hidden label in its button stays inside the phone swipe row */
.car { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.car__stage { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 18px 20px 12px; background: linear-gradient(180deg, var(--soft) 0 70%, var(--sky) 100%); }
/* a soft shadow under the wheels */
.car__stage::after { content: ""; position: absolute; inset: auto 14% 10px; z-index: -1; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 27, 63, .22), rgba(11, 27, 63, 0)); }
.car__stage img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.car:hover .car__stage img { transform: scale(1.03); }
.car__stage--photo { padding: 0; }
.car__stage--photo img { object-fit: cover; }
.car__stage--photo::after { display: none; }
.car__stage > .i { width: 72px; height: 72px; color: var(--blue); }
.car__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.car h3 { font-size: 22px; font-weight: 800; }
.car p { color: var(--muted); font-size: 16px; }
.car__specs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: auto; padding: 12px 0; border-block: 1px solid var(--line); color: var(--ink-2); font-size: 15px; font-weight: 600; }
.car__specs li { display: inline-flex; align-items: center; gap: 8px; }
.car__specs .i { width: 18px; height: 18px; color: var(--blue); }
.car .btn { width: 100%; margin-top: 4px; }
.fleet__nav { display: none; }
.fleet-none { color: var(--ink-2); font-size: 19px; text-align: center; }

/* which car do I need: the table, built from the same records as the cards */
.guide { max-width: 820px; }
.guide__scroll { overflow-x: auto; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); }
.guide .tbl caption { padding: 16px 18px 6px; }
.guide .tbl tbody th { font-weight: 700; }
.guide .tbl th small { display: block; margin-top: 2px; color: var(--muted); font-size: 15px; font-weight: 400; }
.guide .tbl tr:last-child > * { border-bottom: 0; }
.guide .tbl :is(th, td):first-child { padding-left: 18px; }
.guide__more { margin-top: 18px; color: var(--muted); text-align: center; }

@media (max-width: 980px) {
  .fleet { grid-template-columns: repeat(min(var(--cols, 4), 2), minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .trips { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .trip > img { height: 190px; }
  /* fleet on phones: a swipeable row with a peek of the next car, dots and a counter */
  .fleet { display: flex; gap: 16px; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .fleet::-webkit-scrollbar { display: none; }
  .car { flex: 0 0 84%; scroll-snap-align: start; box-shadow: none; }
  .car:only-child { flex-basis: 100%; }
  .fleet__nav { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--ink-2); font-size: 15px; }
  .fleet__dots { display: flex; gap: 7px; }
  .fleet__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease); }
  .fleet__dots i.is-on { width: 22px; border-radius: 4px; background: var(--navy); }
  .fleet__nav b { color: var(--ink); }
  /* the cards above carry the same numbers, so phones get the one line instead of the table */
  .guide__scroll { display: none; }
  .guide__more { margin-top: 0; }
}

/* ===== 53-forms.css ===== */
/* forms and company pages: business accounts, contact, complaints, about.
   Fluent Forms' own stylesheets are dropped (ER_Forms), so its markup is styled here to match the booking card:
   labels above, 52px fields, a blue focus ring, red-ink errors under the field, one red button. */
.fluentform { color: var(--ink); }
.fluentform form { display: grid; gap: 18px; }
.fluentform fieldset { display: grid; gap: 18px; min-width: 0; }
.fluentform .ff-t-container { display: flex; gap: 18px; }
.fluentform .ff-t-cell { flex: 1 1 0 !important; min-width: 0; display: grid; }
.fluentform .ff-el-group { display: grid; gap: 6px; margin: 0; }
.fluentform .ff-el-input--label label { font-size: 16px; font-weight: 700; }
.ff-el-form-control {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 14px;
  background: #fff; border: 1.5px solid var(--field); border-radius: var(--r);
  color: var(--ink); font: 400 17px/1.4 var(--ff-sans);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ff-el-form-control::placeholder { color: var(--muted); opacity: 1; }
textarea.ff-el-form-control { min-height: 120px; resize: vertical; }
select.ff-el-form-control {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%232B3A57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat;
}
.ff-el-form-control:hover { border-color: var(--ink-2); }
.ff-el-form-control:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11, 99, 206, .3); }
.ff-el-is-error .ff-el-form-control { border: 2px solid var(--red-ink); }
.ff-el-is-error .ff-el-form-control:focus { box-shadow: 0 0 0 3px rgba(163, 18, 10, .22); }
.fluentform .error { margin-top: 6px; color: var(--red-ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.fluentform .error-clear { display: none; }
.ff-errors-in-stack:empty { display: none; }
.ff-errors-in-stack .error { padding: 10px 14px; background: var(--red-tint); border-radius: var(--r); }
.ff-lead { color: var(--muted); }
.ff-lead a, .ff-notice a { font-weight: 600; }
.ff-tel { white-space: nowrap; }
.ff-notice { color: var(--muted); font-size: 15px; }
.ff_submit_btn_wrapper { margin: 0; }
.fluentform .ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  border: 0; border-radius: var(--r); background: var(--red); color: #fff; font: 700 17px/1.15 var(--ff-sans); cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.fluentform .ff-btn-submit:hover { background: var(--red-deep); }
.fluentform .ff-btn-submit:disabled { opacity: .65; cursor: progress; }
.ff_force_hide { display: none !important; }
/* the "Sent" note that takes the form's place */
.ff-message-success { display: grid; gap: 6px; padding: 18px 20px; background: var(--ok-tint); border-left: 4px solid var(--wa); border-radius: var(--r); }
.ff-message-success h3 { font-size: 21px; }
.ff-message-success:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* the hero photos are people: keep their faces in the frame on wide screens */
.ph--form .ph__bg { object-position: 50% 25%; }
/* on wide screens the form card covers the right half, where both people sit: mirror them to the copy side */
@media (min-width: 981px) {
  .ph--form .ph__bg { transform: scaleX(-1); }
}

/* contact routes on the hero photo */
.ways { display: grid; gap: 14px; margin-top: 10px; }
.ways a { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; text-decoration: none; }
.ways .i { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.ways small { display: block; font-size: 15px; font-weight: 500; opacity: .9; }
.ways b { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ways p { margin: 2px 0 0 58px; color: rgba(255, 255, 255, .9); font-size: 15px; }

/* page sections: a centred column of copy, a pair of boxes, four points */
.fm-lede { display: grid; justify-items: center; gap: 14px; max-width: calc(760px + 2 * var(--gutter)); text-align: center; }
.fm-lede .sec__title { margin-bottom: 4px; }
.fm-lede > p, .fm-lede .prose { color: var(--ink-2); font-size: 18px; }
.fm-lede .prose { max-width: none; }
.fm-lede .btns { margin-top: 6px; }
.fm-lede .company-lines { color: var(--muted); font-size: 15px; }
.fm-duo { display: grid; gap: 20px; }
.fm-box { display: grid; align-content: start; gap: 10px; padding: 26px 26px 28px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); }
.fm-box h2 { font-size: 24px; font-weight: 800; }
.fm-box .i { width: 28px; height: 28px; color: var(--blue); }
.fm-box p, .fm-box address { color: var(--ink-2); }
.fm-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.fm-points li { display: grid; align-content: start; gap: 6px; padding: 22px 22px 24px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); }
.fm-points .i { width: 28px; height: 28px; margin-bottom: 4px; color: var(--blue); }
.fm-points p { color: var(--muted); }

/* complaints: the form beside what happens next, stacked on phones */
.fm-split { display: grid; gap: 32px; padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 76px); }
.fm-split__side { display: grid; align-content: start; gap: 18px; }
.fm-split__side h2 { font-size: 26px; font-weight: 800; }
.fm-split__side .steps li { padding: 20px 20px 22px 76px; text-align: left; justify-items: start; box-shadow: none; border: 1px solid var(--line); }
.fm-split__side .steps li::before { position: absolute; left: 20px; top: 18px; margin: 0; }
.fm-split__side .steps { grid-template-columns: 1fr; gap: 12px; }
.fm-split__side .prose { color: var(--ink-2); }
.fm-split .form-card { border: 1px solid var(--line); }

@media (min-width: 860px) {
  .fm-duo { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (min-width: 981px) {
  .fm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: start; gap: 56px; }
  .fm-split > .form-card { grid-column: 2; grid-row: 1; }
  .fm-split__side { grid-column: 1; grid-row: 1; }
}
@media (max-width: 560px) {
  .fluentform .ff-t-container { flex-direction: column; }
  .fluentform .ff-btn-submit { width: 100%; }
  .ways b { font-size: 20px; }
  .fm-box { padding: 22px 18px 24px; }
}

/* ===== 54-legal.css ===== */
/* legal pages: an "On this page" list, folded on phones and open and sticky on the left from
   980px. The copy itself is page content, styled by .prose; page.php prints the date and closing line. */
.legal-body > * + * { margin-top: 1em; }
.legal-body > h2:first-child { margin-top: 1.4em; }
.prose > .legal-body:first-child > h2:first-child { margin-top: 0; }

.legal-toc { background: var(--soft); border-radius: var(--r); }
.legal-toc summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 18px;
  font-weight: 700; color: var(--ink); cursor: pointer; list-style: none;
}
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary::after { content: ""; width: 9px; height: 9px; margin: -4px 4px 0 0; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dur) var(--ease); }
.legal-toc details[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.prose .legal-toc ol { margin: 0; padding: 0 18px 12px 2.6em; font-size: 16px; }
.prose .legal-toc li + li { margin-top: 0; }
.legal-toc a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; line-height: 1.3; text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

@media (min-width: 980px) {
  .prose:has(> .legal) { max-width: none; }
  .legal { display: grid; grid-template-columns: 260px minmax(0, var(--measure)); gap: 56px; align-items: start; }
  .legal-toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
  .legal-body > h2:first-child { margin-top: 10px; }
  .legal-toc summary { pointer-events: none; }
  .legal-toc summary::after { display: none; }
  .legal-toc details::details-content { content-visibility: visible; block-size: auto; }
  .prose .legal-toc ol { font-size: 15px; }
}

@media print {
  .legal-toc { display: none; }
  .prose:has(> .legal) { max-width: none; }
}

/* ===== 55-blog.css ===== */
/* Travel guides: the index and topics (archive.php), the guide cards and one guide (single.php). */

/* topic chips: the current one filled blue */
.topics { margin-bottom: clamp(28px, 4vw, 40px); }
.topics .chip[aria-current] { border-color: var(--blue); background: var(--blue); color: #fff; }

/* guide cards: 3 across, then 2, then 1. The title link covers the whole card */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pcard { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pcard:hover { border-color: var(--blue); transform: translateY(-2px); }
.pcard__img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; background: var(--soft); }
.pcard__body { display: grid; align-content: start; gap: 8px; padding: 18px 22px 24px; }
.pcard__meta { color: var(--muted); font-size: 15px; font-weight: 500; }
.pcard__title { font-size: 21px; font-weight: 800; line-height: 1.25; }
.pcard__title a { color: var(--navy); text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; }
.pcard:hover .pcard__title a { color: var(--blue); }
.pcard:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pcard__title a:focus-visible { outline: 0; }
.pcard__sum { color: var(--ink-2); }

/* numbered pages: Newer guides 1 2 3 Older guides */
.pager { margin-top: clamp(32px, 4vw, 48px); }
.pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); color: var(--navy); font-weight: 600; text-decoration: none; }
.pager a:hover { border-color: var(--blue); background: var(--sky); }
.pager .current { border-color: var(--blue); background: var(--blue); color: #fff; }
.pager .dots { border-color: transparent; }
.guides__none { max-width: var(--measure); margin-inline: auto; color: var(--ink-2); font-size: 18px; text-align: center; }

/* one guide: the head, the photo and the article share a 720px column */
.single-post .ph__text { width: 100%; max-width: 720px; margin-inline: auto; }
.guide { max-width: calc(720px + 2 * var(--gutter)); }
.guide__img { margin: 0 0 clamp(24px, 4vw, 36px); }
.guide__img img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--r); }
.guide__body { max-width: none; font-size: 18px; line-height: 1.6; }
.guide__body > p:first-child { font-size: 19px; }
.guide__body figure { margin: 1.6em 0; }
.guide__body .wp-block-table { overflow-x: auto; }
.prose .nudge--guide { gap: 10px; }
.nudge--guide p:not(.btns) { color: var(--ink-2); }
.nudge--guide .btns { justify-content: flex-start; margin-top: 6px; }
.sources { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: 16px; }
.prose .sources h2 { margin: 0 0 .6em; font-size: 21px; }
.prose .sources li + li { margin-top: 0; }
.prose .sources a { display: inline-block; padding-block: 10px; line-height: 1.5; }

@media (max-width: 980px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 640px) {
  .pgrid { grid-template-columns: 1fr; gap: 16px; }
  .pcard__body { padding: 16px 18px 20px; }
  .pcard__title { font-size: 20px; }
  .topics .chips { justify-content: flex-start; gap: 8px; }
  .guide__body { font-size: 17px; }
  /* the guide's own title in the trail stays on one line */
  .single-post .crumbs li:last-child { min-width: 0; max-width: 100%; }
  .single-post .crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .guide__body > p:first-child { font-size: 18px; }
  .pager .prev, .pager .next { flex-basis: 100%; }
}
@media print {
  .topics, .pager, .nudge--guide { display: none; }
}