/**
 * Corrections to theme.css, kept out of that file because it is regenerated
 * from the repo on every build. Each block says what was wrong and why.
 */

/* ---------------------------------------------------------------------------
 * 1. Header "Book appointment" button
 *
 * The button sits inside a nav <li>, so two nav-link rules were treating it as
 * a text link:
 *     .site-nav li a        { color: var(--color-text) !important; }
 *     .site-nav li a::before{ height: 2px; background: var(--color-brand); }
 * That overrode its own .text-white and drew a 2px teal underline across a
 * coral button — dark text at rest, teal on hover, with a line under it.
 * ------------------------------------------------------------------------ */

.site-nav li a.site-booking-button,
.site-nav li a.site-booking-button:hover,
.site-nav li a.site-booking-button:focus-visible {
  color: #ffffff !important;
}

.site-nav li a.site-booking-button::before {
  content: none !important;
}

/* ---------------------------------------------------------------------------
 * 2. "Book travel health advice" and similar text links
 *
 * .home-text-link::after draws a 1px rule that scales from 0 to 1 on hover.
 * Removed on request — the arrow already signals the link.
 * ------------------------------------------------------------------------ */

.home-text-link::after,
.home-text-link:hover::after,
.home-text-link:focus-visible::after {
  content: none !important;
}

/* ---------------------------------------------------------------------------
 * 3. Mega menu "Care from one trusted local pharmacy" bar
 *
 * Its background was a 105deg gradient from --color-sage to --color-sage-soft,
 * which faded out across the bar and read as a shadow behind it. Flat fill.
 * ------------------------------------------------------------------------ */

.site-mega-menu__support,
.site-nav--unified .site-mega-menu__support {
  background: var(--color-sage-soft, #edf2ed) !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * 6. Sticky booking bar on service pages
 *
 * The bar sticks at top: 82px, which assumes a sticky 82px site header to sit
 * under. The header is position: relative and scrolls away, so that 82px was
 * just an empty strip above the bar once you scrolled.
 *
 * site-shell.js used to correct this at runtime after injecting the shell.
 * The replacement shim still carries that code, but on the service pages the
 * bar is built later by service-page.js, so the shim finds nothing to adjust.
 * Doing it in CSS removes the ordering dependency entirely.
 * ------------------------------------------------------------------------ */

/* Only where the bar is sticky. A narrower breakpoint switches it to
 * position: fixed with top: auto (a bottom bar on small screens) — that must
 * keep its own offset. */

@media (min-width: 768px) {
  .service-location-booking-bar {
    top: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
 * 7. Announcement bar
 *
 * Sits above the site header with today's hours, the phone number and the
 * customer portal. Evergreen ground so the ivory header reads as a distinct
 * layer beneath it.
 *
 * Type sits on the site's floors (14px, 15px for the number) in full white:
 * hierarchy comes from size and weight, never from fading text. The portal
 * link is a real button so it is found rather than discovered.
 * ------------------------------------------------------------------------ */

.miles-announce {
  position: relative;
  z-index: 1035;              /* above the header's 1030 so it is never overlapped */
  background: var(--color-brand-dark, #204944);
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.miles-announce__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1240px;          /* matches .site-nav > div so the bar sits on the
                                 header's grid */
  min-height: 50px;
  margin: 0 auto;
  padding: 7px 24px;
}

.miles-announce__hours {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.002em;
  color: #ffffff;
  white-space: nowrap;
}

/* Hairline groups hours + phone as "reaching us", leaving the account button
   alone on the right. On the <p>, not the <a>, so the link opt-out below
   does not blank it. */
.miles-announce__hours::after {
  content: "";
  width: 1px;
  height: 18px;
  margin-left: 20px;
  background: rgba(255, 255, 255, 0.22);
}

.miles-announce__phone,
.miles-announce__account {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 36px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.miles-announce__phone {
  gap: 9px;
  padding: 0 2px;
}

.miles-announce__phone-number {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.18s ease;
}

.miles-announce__phone:hover .miles-announce__phone-number {
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

/* "Call" is read by screen readers on every size and shown to nobody: the
   number itself is the visible label. */
.miles-announce__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.miles-announce__account {
  margin-left: auto;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.miles-announce__account:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.62);
  color: #ffffff;
}

.miles-announce__phone:hover { color: #ffffff; }

/* The site styles bare links with an underline reveal; this bar opts out. */
.miles-announce a::before,
.miles-announce a::after { content: none !important; }

/* White ring on the evergreen ground: the site's terracotta ring (theme.css
   :focus-visible, !important) is near-invisible here. */
.miles-announce__phone:focus-visible,
.miles-announce__season-link:focus-visible,
.miles-announce__account:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 3px;
  border-radius: 999px;
}

.miles-announce__icon {
  display: inline-flex;
  flex: none;
  color: inherit;
}

.miles-announce__icon svg { display: block; }

/* The season's line: the flu page's own button label, while bookings are
   open (miles_flu_bar). Third item in the "reaching us" group on a wide
   bar, behind the same hairline that groups hours and phone; its own row
   under the three utilities once the row cannot hold it. A <p> around the
   link, as the hours are, because `.miles-announce a::before` is content:
   none and the hairline has to live on something. */
.miles-announce__season {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 0;
}

.miles-announce__season::before {
  content: "";
  flex: none;
  width: 1px;
  height: 18px;
  margin-right: 20px;
  background: rgba(255, 255, 255, 0.22);
}

.miles-announce__season-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 36px;
  padding: 0 2px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
}

.miles-announce__season-link:hover { color: #ffffff; }

/* The line as two actions ("Book a flu jab", "Book a COVID jab"), each with its own arrow: a hairline between them. */
.miles-announce__season-sep { flex: none; width: 1px; height: 16px; margin: 0 12px; background: rgba(255, 255, 255, 0.28); }

.miles-announce__season-text {
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.18s ease;
}

.miles-announce__season-link:hover .miles-announce__season-text {
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

/* The syringe, drawn in the same line as the clock and the handset beside
   it, in the same white: one of the set, not a light on the panel. */
.miles-announce__season-icon {
  flex: none;
  display: block;
  color: inherit;
}

.miles-announce__season-go {
  flex: none;
  display: block;
  transition: transform 0.18s ease;
}

.miles-announce__season-link:hover .miles-announce__season-go { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .miles-announce__season-go,
  .miles-announce__season-text { transition: none; }
  .miles-announce__season-link:hover .miles-announce__season-go { transform: none; }
}

/* Where the row stops holding four things (measured: the label starts to
   ellipsise at 861px with the longest hours string), the line takes a row
   of its own under the three utilities, full width, behind a hairline.
   Wrapping is turned on only here, so the wide bar keeps its single line
   whatever is in it, and the row gap is zeroed because the 14-20px column
   gap would otherwise open between the rows too: the row costs 39px, not
   55. */
@media (max-width: 920px) {
  .miles-announce__inner { flex-wrap: wrap; row-gap: 0; }
  .miles-announce__season {
    flex: 1 0 100%;
    order: 10;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .miles-announce__season::before { display: none; }
  .miles-announce__season-link { min-height: 32px; }
}

@media (max-width: 720px) {
  /* column-gap, not gap: the bar wraps below 920 and the shorthand would
     reopen the row gap the rule above closes. */
  .miles-announce__inner { column-gap: 14px; min-height: 48px; padding: 6px 16px; }
  .miles-announce__hours::after { display: none; }
  .miles-announce__account { padding: 0 14px; }
}

@media (max-width: 460px) {
  /* The phone becomes a round icon button; the number stays in its name. */
  .miles-announce__phone {
    width: 36px;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
  }
  .miles-announce__phone-number {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .miles-announce__account { gap: 7px; padding: 0 13px; }
}

@media (max-width: 400px) {
  /* Narrowest phones: the button's word is its icon. */
  .miles-announce__inner { column-gap: 10px; }
  .miles-announce__account .miles-announce__icon { display: none; }
}

@media (forced-colors: active) {
  .miles-announce { border-bottom: 1px solid CanvasText; }
  .miles-announce__account,
  .miles-announce__phone { border-color: CanvasText; }
  .miles-announce__season { border-color: CanvasText; }
}

/* ---------------------------------------------------------------------------
 * 8. Dedicated booking page (/book/)
 *
 * Carries the same appointment engine as the homepage, with a compact hero
 * above it. Matches the portal hero so the two "task" pages feel related.
 * ------------------------------------------------------------------------ */

.miles-book-page { background: var(--color-background, #faf7f2); }

.miles-book-hero {
  padding-block: 34px 44px !important;
  background:
    linear-gradient(90deg, rgba(20, 55, 49, 0.99) 0%, rgba(29, 72, 65, 0.9) 100%),
    var(--color-brand-dark, #204944);
  color: #fff;
}

.miles-book-hero .health-hub-eyebrow { color: rgba(255, 255, 255, 0.72); }

.miles-book-hero h1 {
  margin: 6px 0 10px;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

.miles-book-hero__lede {
  margin: 0;
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.miles-book-hero .service-location-breadcrumb a,
.miles-book-hero .service-location-breadcrumb li { color: rgba(255, 255, 255, 0.72); }

.miles-book-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}

.miles-book-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.miles-book-hero__trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.miles-book-hero__trust a { color: #fff; text-decoration: none; font-weight: 600; }
.miles-book-hero__trust a::after { content: none !important; }

/* On its own page the engine needs its own breathing room — on the homepage
   the surrounding sections provide it. */
.miles-book-page .miles-appointment-section {
  padding-block: 44px 76px !important;
}

/* ---------------------------------------------------------------------------
 * 9. Patient reviews slider
 *
 * The hero's voice returns mid-page: a full-bleed evergreen band with one
 * review at a time set large in the display cut, left-aligned in a wide
 * measure, a ghosted quotation mark behind it, and the proof (who, where it
 * came from, the outcome in their words) on one hairline row beneath. The
 * header row carries the eyebrow left and a counter with the arrows right.
 * A native scroll-snap track so it swipes on a phone. Copy never drops below
 * 12px, and anything 13px or under is in full white.
 * ------------------------------------------------------------------------ */

.miles-reviews {
  position: relative;
  padding-block: 104px !important;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.05), transparent 42%),
    var(--color-brand-dark, #204944);
  overflow: hidden;
}

.miles-reviews__inner {
  max-width: 1240px;            /* the header's grid: the copy starts where the wordmark does */
  margin: 0 auto;
  padding: 0 24px;
}

.miles-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 52px;
}

.miles-reviews__eyebrow {
  margin: 0;
  color: #dce7df;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-reviews__nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.miles-reviews__counter {
  margin: 0 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.miles-reviews__counter-of { color: #dce7df; }

.miles-reviews__arrow {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.miles-reviews__arrow:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.62);
}

/* White ring on the evergreen ground: the site's terracotta ring (theme.css
   :focus-visible, !important) is near-invisible here. */
.miles-reviews__arrow:focus-visible,
.miles-reviews__dot:focus-visible,
.miles-reviews__who a:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 3px;
}

.miles-reviews__arrow svg { width: 16px; height: 16px; }

.miles-reviews__body { position: relative; }

/* The ghosted mark: its ink sits behind the stars and the first line of the
   quote and overhangs the left margin a little. The section clips it. */
.miles-reviews__mark {
  position: absolute;
  top: -0.16em;
  left: -0.11em;
  z-index: 0;
  color: rgba(255, 255, 255, 0.07);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 480px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.miles-reviews__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: height 0.35s ease;   /* the script sets it to the review on screen */
}

.miles-reviews__track::-webkit-scrollbar { display: none; }

.miles-reviews__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 4px 0 6px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.miles-reviews__stars {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 26px;
  color: #dce7df;
}

.miles-reviews__stars svg { width: 14px; height: 14px; }

.miles-reviews__quote {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
}

.miles-reviews__quote p {
  max-width: 900px;
  margin: 0;
  color: #ffffff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(28px, 2.9vw, 40px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.22;
  text-wrap: pretty;
}

/* Long reviews step down so they stay a pull-quote, not a page. */
.miles-reviews__slide--medium .miles-reviews__quote p { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.26; }
.miles-reviews__slide--long   .miles-reviews__quote p { font-size: clamp(23px, 2.1vw, 28px); line-height: 1.32; }

/* The proof row: who and where it came from, and the outcome in their words
   as a figure rather than a card. */
.miles-reviews__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
  max-width: 900px;
  position: relative;
  margin-top: 40px;
  padding: 24px 0 0 !important;   /* theme.css pads every footer element on phones */
}

/* The rule above the attribution is drawn, not bordered: it arrives with
   the section, and again with each review as the slider turns to it - the
   footer's closing gesture, on the line every review signs off with. The
   script marks the review on screen .is-current and the slider .is-ready;
   without the script the rule is simply there. */
.miles-reviews__meta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  /* Reviews that are not on screen wait with their rule undrawn. */
  .miles-reviews__slider.is-ready .miles-reviews__slide:not(.is-current) .miles-reviews__meta::before { transform: scaleX(0); }

  /* The one on screen draws its rule as it becomes current; re-adding the
     class restarts the animation, so the rule draws again on the way back. */
  .miles-reviews__slider.is-ready .miles-reviews__slide.is-current .miles-reviews__meta::before {
    animation: miles-draw-x 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
  }

  /* Before the section has come into view, the first review's rule waits
     too, and draws once the body has risen (rise 0.8s from 160ms). */
  .miles-reviews__body.is-armed .miles-reviews__slide.is-current .miles-reviews__meta::before {
    transform: scaleX(0);
    animation: none;
  }
  .miles-reviews__body.is-revealed .miles-reviews__slide.is-current .miles-reviews__meta::before {
    animation: miles-draw-x 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
  }
}

.miles-reviews__who {
  margin: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.miles-reviews__who a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.miles-reviews__who a:hover { text-decoration-color: #ffffff; }

.miles-reviews__outcome {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  text-align: right;
}

.miles-reviews__outcome strong {
  color: #ffffff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Required beside any outcome: it must not read as a typical result. */
.miles-reviews__outcome small {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.miles-reviews__dots {
  display: flex;
  gap: 8px;
  margin-top: 40px;
}

.miles-reviews__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.38);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.2s ease;
}

/* A finger-sized target without changing how the dot looks. */
.miles-reviews__dot::before {
  content: "";
  position: absolute;
  inset: -14px -8px;
}

.miles-reviews__dot[aria-current="true"] {
  width: 26px;
  background: #ffffff;
}

/* While the slider turns itself, the active dot is a track that fills over
   one interval (the script sets --miles-reviews-interval), so the reader can
   see it is alive and knows when it will move. The fill goes the moment the
   slider pauses or the visitor takes over, leaving the solid dot. */
.miles-reviews__dot[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
}

.miles-reviews__slider--playing .miles-reviews__dot[aria-current="true"] {
  background: rgba(255, 255, 255, 0.38);
}

.miles-reviews__slider--playing .miles-reviews__dot[aria-current="true"]::after {
  animation: miles-reviews-fill var(--miles-reviews-interval, 6s) linear forwards;
}

@keyframes miles-reviews-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 767px) {
  .miles-reviews { padding-block: 64px !important; }
  .miles-reviews__inner { padding: 0 18px; }
  .miles-reviews__head { margin-bottom: 36px; }
  .miles-reviews__counter { margin-right: 6px; }
  .miles-reviews__arrow { width: 40px; height: 40px; }
  .miles-reviews__mark { font-size: 300px; top: -0.15em; left: -0.08em; }
  .miles-reviews__stars { margin-bottom: 20px; }
  .miles-reviews__quote p { font-size: 26px; }
  .miles-reviews__slide--medium .miles-reviews__quote p { font-size: 24px; }
  .miles-reviews__slide--long   .miles-reviews__quote p { font-size: 22px; }
  .miles-reviews__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: 30px;
    padding-top: 20px !important;
  }
  .miles-reviews__outcome { align-items: flex-start; text-align: left; }
  .miles-reviews__outcome strong { font-size: 24px; }
  .miles-reviews__dots { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-reviews__track { scroll-behavior: auto; transition: none; }
  .miles-reviews__dot { transition: none; }
  .miles-reviews__dot[aria-current="true"]::after { animation: none; }
}

@media (forced-colors: active) {
  .miles-reviews { border-block: 1px solid CanvasText; }
  .miles-reviews__arrow { border-color: CanvasText; }
  .miles-reviews__mark { display: none; }
  .miles-reviews__meta { border-top-color: CanvasText; }
  .miles-reviews__dot,
  .miles-reviews__slider--playing .miles-reviews__dot[aria-current="true"] { background: CanvasText; }
  .miles-reviews__dot[aria-current="true"]::after { animation: none; }
}

/* ---------------------------------------------------------------------------
 * 10. Routing questions, as step 01 of the booking form
 *
 * The questions are a panel at the top of the form's own shell, so the card
 * reads 01 questions, 02 service, 03 date. The shell is white and the panel
 * below it is dark, so this one stays white and leans on the option cards the
 * booking form already styles for a light background.
 * ------------------------------------------------------------------------- */

.miles-appointment-engine__questions {
  padding: 38px 42px;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
}

.miles-triage-step__help {
  margin: -14px 0 22px;
  max-width: 62ch;
  color: var(--color-text-soft);
  font-size: 13px;
  line-height: 1.6;
}

/* Two or three short answers read better side by side than in a single column. */
.miles-triage-step__choices {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 780px;
}

.miles-triage-step__choices label > span {
  min-height: 68px;
}

.miles-triage-step__actions {
  display: flex;
  margin-top: 22px;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.miles-triage-step__back {
  min-height: 42px;
  padding: 9px 18px;
  color: var(--color-brand-dark);
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  border: 1px solid rgba(44, 95, 90, 0.28);
  border-radius: 999px;
  cursor: pointer;
}

.miles-triage-step__back:hover,
.miles-triage-step__back:focus-visible {
  background: var(--color-sage-soft);
  border-color: var(--color-brand);
}

/* Answered: 01 shrinks to a line naming the answers, so 02 leads the card. */
.miles-appointment-engine__questions--done {
  padding: 22px 42px;
  background: var(--color-sage-soft);
}

.miles-appointment-engine__questions--done .miles-appointment-engine__section-heading {
  margin-bottom: 0;
}

.miles-appointment-engine__questions--done .miles-triage-step__actions {
  margin-top: 14px;
}

.miles-triage-step__summary {
  margin: 12px 0 0;
  color: var(--color-text-soft);
  font-size: 12px;
  line-height: 1.6;
}

/*
 * Steps 02 and 03 wait for the questions. They stay legible — this is the card
 * you are working towards, not a disabled form — but are inert until the
 * routing has issued the token the booking is submitted with.
 */
.miles-triage-step--waiting {
  /* No saturate() here: desaturating the dark green panel turns it grey, which
     reads as broken rather than as a step that has not opened yet. */
  opacity: 0.58;
  transition: opacity 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .miles-triage-step--waiting {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * 9. Registrations bar
 *
 * Sits under the home page hero in its own band, on the header's grid. Two
 * verifiable credentials with the same anatomy - proof, one line, a link to
 * the official source: the NaTHNaC Yellow Fever Vaccination Centre record
 * (real marks) and the GPhC premises registration (set in type; the GPhC
 * does not licence a logo for pharmacies to display). Nothing else goes in
 * here: every figure on this site has to be verifiable.
 * ------------------------------------------------------------------------ */

.miles-yfvc {
  padding: 64px 24px !important;      /* theme.css gives every section 108px !important top and bottom */
  background: var(--color-background, #faf7f2);
}

/* Even air above and below the panel on its own ivory ground, so the booking
   section's tinted ground starts below the panel's air rather than at its
   edge. That section carries its own top padding (126px by class, 96px by the
   #book-appointment id rule); trimmed to match the air. */
.miles-yfvc + .miles-appointment-section,
.miles-yfvc + #book-appointment {
  padding-top: 64px !important;
}

.miles-yfvc__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: stretch;
  width: min(100%, 1192px);           /* the header's 1240px grid, minus its 24px gutters */
  margin: 0 auto;
  padding: 36px 40px;
  color: #ffffff;
  background: var(--color-brand-dark, #204944);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 30px 70px -34px rgba(9, 35, 31, 0.6);
}

.miles-yfvc__panel--single {
  grid-template-columns: minmax(0, 1fr);
}

.miles-yfvc__cell {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.miles-yfvc__cell--yfvc { padding-right: 40px; }

.miles-yfvc__cell--gphc {
  padding-left: 40px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.miles-yfvc__panel--single .miles-yfvc__cell--yfvc { padding-right: 0; }
.miles-yfvc__panel--single .miles-yfvc__cell--gphc { padding-left: 0; border-left: 0; }

.miles-yfvc__marks {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
}

.miles-yfvc__mark {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

.miles-yfvc__mark--nathnac { height: 88px; border-radius: 12px; }
.miles-yfvc__mark--yfz     { height: 100px; }

.miles-yfvc__copy {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  flex: 1 1 auto;
}

.miles-yfvc__title {
  max-width: 26ch;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.2 !important;       /* the global h2 rule sets 1.16 !important */
}

.miles-yfvc__label {
  margin: 0 0 6px;
  color: #d9e8dd;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.miles-yfvc__number {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.miles-yfvc__blurb {
  max-width: 44ch;
  margin: 0;
  color: #d9e8dd;
  font-size: 15px;
  line-height: 1.55;
}

/* Pins both links to the same baseline across the two cells. */
.miles-yfvc__action {
  margin: auto 0 0;
  padding-top: 20px;
}

.miles-yfvc__verify {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* The site decorates bare links with an underline reveal; the buttons opt out. */
.miles-yfvc a::before,
.miles-yfvc a::after { content: none !important; }

.miles-yfvc__verify:hover,
.miles-yfvc__verify:focus-visible {
  color: var(--color-brand-dark, #204944);
  background: #ffffff;
  border-color: #ffffff;
}

.miles-yfvc__verify:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.miles-yfvc__verify svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 1199px) {
  .miles-yfvc__panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 34px;
  }

  .miles-yfvc__cell--yfvc { padding-right: 0; padding-bottom: 28px; }

  .miles-yfvc__cell--gphc {
    padding-left: 0;
    padding-top: 28px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .miles-yfvc__panel--single .miles-yfvc__cell--yfvc { padding-bottom: 0; }
  .miles-yfvc__panel--single .miles-yfvc__cell--gphc { padding-top: 0; border-top: 0; }

  .miles-yfvc__title { max-width: 40ch; }
  .miles-yfvc__blurb { max-width: 60ch; }
}

@media (max-width: 767px) {
  .miles-yfvc { padding: 40px 16px !important; }

  .miles-yfvc + .miles-appointment-section,
  .miles-yfvc + #book-appointment {
    padding-top: 40px !important;
  }

  .miles-yfvc__panel {
    padding: 24px 22px;
    border-radius: 20px;
  }

  .miles-yfvc__cell {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .miles-yfvc__marks { gap: 18px; }
  .miles-yfvc__mark--nathnac { height: 68px; border-radius: 10px; }
  .miles-yfvc__mark--yfz     { height: 78px; }

  .miles-yfvc__title  { font-size: 21px; }
  .miles-yfvc__number { font-size: 30px; }
  .miles-yfvc__blurb  { font-size: 14px; }

  .miles-yfvc__cell--yfvc { padding-bottom: 22px; }
  .miles-yfvc__cell--gphc { padding-top: 22px; }

  .miles-yfvc__action { padding-top: 16px; }

  .miles-yfvc__verify {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    white-space: normal;
    text-align: center;
  }
}

@media (forced-colors: active) {
  .miles-yfvc__panel      { border-color: CanvasText; }
  .miles-yfvc__cell--gphc { border-color: CanvasText; }
  .miles-yfvc__verify     { border-color: LinkText; color: LinkText; }
}

/* ---------------------------------------------------------------------------
 * 10. Hero photograph on phones
 *
 * The desktop hero paints the shopfront as a section background under a
 * scrim. On a phone that scrim has to be almost opaque for the copy to read,
 * which left no photograph at all. Below 768px the photograph leads instead:
 * a full-bleed square straight under the header, the whole lit shopfront in
 * frame, melting into the evergreen band the heading sits on. No box, no
 * border, no thumbnail crop. The focal point is tunable per photograph.
 * ------------------------------------------------------------------------ */

.home-hero {
  --hero-photo-mobile-x: 78%;   /* the shopfront sits in the right half of the wide photograph */
  --hero-photo-mobile-y: 45%;
}

.home-hero__photo { display: none; }

@media (max-width: 767px) {
  .home-hero__content {
    display: flex;
    flex-direction: column;
  }

  .home-hero__photo {
    order: -1;
    position: relative;
    display: block;
    margin: -72px -18px 36px;    /* out to the section's edges and up to its top */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #143430;
  }

  .home-hero__photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-photo-mobile-x) var(--hero-photo-mobile-y);
  }

  /* The photograph dissolves into the band so the heading reads as part of
     the same composition rather than a caption under a picture. */
  .home-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(20, 52, 48, 0) 50%, rgba(20, 52, 48, 0.55) 78%, #143430 100%);
    pointer-events: none;
  }

  /* A photograph chosen for phones (the b005 field) is shown as supplied. */
  .home-hero__photo--own .home-hero__photo-img { object-position: center; }
}

/* ---------------------------------------------------------------------------
 * 11. Hero heading: display cut, italic accent, staged entrance
 *
 * Newsreader is self-hosted with its optical-size axis, but the heading was
 * set at opsz 48 (a text cut) and weight 600, which at 76px reads as heavy
 * and slightly clumsy. The display cut (opsz 72) at 500 has finer hairlines
 * and tighter fit; the accent phrase is set in the real italic. The words
 * then rise in one after another, the copy and buttons follow, the booking
 * card slides in, and the photograph settles over fourteen seconds. One
 * pass on load, nothing loops, and none of it runs for people who have
 * asked their system for reduced motion.
 * ------------------------------------------------------------------------ */

.home-hero__title {
  position: relative;
  max-width: 700px;                 /* the column itself is 685px from 1440 up */
  margin-bottom: 26px;
  padding-bottom: 26px;             /* room for the rule */
  /* 80, not 84: "NHS and private" (the headline since 16 September 2026 -
     the pharmacy is NHS as well) is a wider first line than "Private
     healthcare" was, and at 84px it broke to five lines, which on a
     1366x768 laptop put the booking buttons 40px below the fold. At 80 the
     headline is four lines everywhere and the buttons sit at 731px. */
  font-size: clamp(52px, 5.9vw, 80px) !important;
  line-height: 1.02 !important;
}

/* The rule under the headline: the same hairline the footer draws under its
   closing statement, so the page opens and closes with one gesture. It
   separates the statement from the offer (the lead and the buttons), which
   is the job a masthead rule does; without motion it is simply there. */
.home-hero__title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(220, 231, 223, 0.55), rgba(220, 231, 223, 0.18));
  transform-origin: left center;
}

/* theme.css sets weight, tracking and the text-size optical cut on every
   descendant of an h1 with !important, so the words carry these themselves.

   600, not 500: at 80px on a photograph the lighter cut read wispy, and it
   disagreed with the booking card's own heading a few hundred pixels to its
   right, which is the same face at the heavier weight.

   The tracking comes with it. A heavier cut is a wider cut, and at -0.022em
   the 600 pushed "with appointments" onto a line of its own between about
   1366 and 1500, which took the headline to five lines and the buttons to
   833px -- below the fold on a 1366x768 laptop, which is the exact failure
   the 84-to-80 size drop was made to prevent. -0.03em is the loosest value
   that holds four lines at 1366 and 1440; heavier weights want tighter
   tracking anyway, so this is the setting the 600 always needed rather than
   a correction to it. Four lines and the buttons above the fold at 1920,
   1600, 1440, 1366 and 1280. */
.home-hero__title,
.home-hero__title .home-hero__word,
.home-hero__title em {
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}

/* theme.css colours every descendant of an h1 in --color-text; the words
   and the italic inside them must stay white on the photograph. */
.home-hero__title .home-hero__word,
.home-hero__title em {
  color: #ffffff !important;
}

.home-hero__title .home-hero__word { display: inline-block; }

 /*
  * Upright, not italic. The headline is a statement of what the pharmacy is
  * rather than a flourish, and an italicised closing phrase on a serif hero
  * is the most copied gesture in generated design -- which is what made the
  * section read as templated. The <em> stays, because the emphasis is real
  * in the markup and a reader on a screen reader still hears it; only its
  * slant goes. Tracking returns to the line's own, since there is no longer
  * an italic cut to compensate for.
  */
.home-hero__title em {
  font-style: normal;
}

@media (max-width: 767px) {
  .home-hero__title {
    max-width: none;
    font-size: clamp(44px, 12.5vw, 60px) !important;
  }
}

/* Desktop heading weight (Drew, 10 October 2026, HW-1 to HW-3). At 80px the
   display optical cut already tightens its own spacing, so 600 at -0.03em
   made letters touch ("tm", "nt", "pp" in "appointments"), and white on the
   dark photograph reads heavier still. Tested on staging: 470 at -0.01em,
   1.05 leading. Newsreader is the variable font (400 to 700), so 470 is a
   real weight, not a faux bold. The booking card's heading beside it drops
   to 500 so it is not the heavier of the two, and a section heading (the
   global 600 at -0.025em, as at 58px) to 540 at -0.015em; h3 to h6 are
   left as they are. Desktop only: under 768px nothing changes. */
@media (min-width: 768px) {
  .home-hero__title,
  .home-hero__title .home-hero__word,
  .home-hero__title em {
    font-weight: 470 !important;
    letter-spacing: -0.01em !important;
    font-optical-sizing: auto;
  }
  .home-hero__title { line-height: 1.05 !important; }

  .home-hero__care-card h2,
  .home-hero__care-card h2 * {
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
  }

  h2,
  h2 * {
    font-weight: 540 !important;
    letter-spacing: -0.015em !important;
  }
}

/* The lede is one idea in two lines: a touch larger and tighter than body
   copy so it reads as a statement under the headline rather than a
   paragraph. theme.css sets 18px/1.6 in 520px (four lines) and 17px on
   small screens; the phone tier is restated here because this rule wins. */
.home-hero__lead {
  max-width: 600px;
  font-size: 20px;
  line-height: 1.5;
  text-wrap: balance;
}

/* From a tablet up the lead is set as a hero's lead, not as body copy
   (Drew, 27 October 2026: it read as the small print under an 80px
   headline): larger, more open, a step behind the headline in tone, and on
   a measure of about 48 characters so it sits inside the headline's
   shoulder rather than running out to the card. Two sentences now, the
   list and then the promise, which is the field's own text (t003). The
   phone keeps 17px below, which Drew finds right as it is. */
@media (min-width: 768px) {
  .home-hero__lead {
    max-width: 24.5em;
    margin-bottom: 36px;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 23px;
    line-height: 1.52;
    letter-spacing: -0.004em;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .home-hero__lead { font-size: 21px; }
}

@media (max-width: 767px) {
  .home-hero__lead { font-size: 17px; line-height: 1.55; }
}

/* One orange action in the hero from a tablet up: the booking card beside
   the copy is the action, so the orange button under the headline said the
   same thing twice (there were four orange "Book" controls on one desktop
   screen, Drew, 27 October 2026). The secondary stays. On a phone the card
   is below the copy and the button is the way to it. */
@media (min-width: 768px) {
  .home-hero__primary { display: none; }
}

/* ---- the hero on a wide screen ------------------------------------------
 * Drew, on a 1900px screen: too much space down the left, to the point that
 * it looks templated beside the drawn sections further down the site.
 *
 * Measured before changing anything. The container is capped at 1240px and
 * centred, and the columns are fixed twelfths of it, so from 1280 to 2560
 * the headline never moved off 685px and the card never off 390px: every
 * extra pixel of screen went into the margins, 364px a side at 1920 and
 * 684px at 2560. The height, meanwhile, is tied to viewport width, so the
 * hero grew to 1075px tall at 2560 while its contents stayed the same size.
 *
 * And the left was not a dark photograph, it was paint. The scrim is 97%
 * opaque at that edge, and the photograph, sized to the hero's height and
 * pinned right, physically stopped 173px short of the left edge at 1920 and
 * 229px short at 2560. Sampled across the hero's middle band, the colour
 * varied by 8 values out of 255. It carried no information at all.
 *
 * Four changes, every one behind a 1500px floor so a laptop and a phone see
 * exactly what they saw before: measured identical at 1440 (headline at
 * 124px, 685px wide, card at 926px).
 */
@media (min-width: 1500px) {
  /* 1. The photograph covers the window. Anchored so the fascia sign still
        clears the booking card, which the original zoom was tuned for: the
        first attempt at this covered the window and hid everything after
        "PHARMACY" behind the card. */
  .home-hero {
    background-size: cover !important;
    background-position: 50% 52% !important;
  }

  /* 2. The scrim eases off the left, so that edge is the shop's own light
        rather than flat colour. Contrast went up, not down: white on the
        brightest patch behind the headline measures 3.93:1 here against
        3.56:1 at the 1440 baseline, and large text needs 3:1. */
  .home-hero::before {
    background:
      linear-gradient(
        90deg,
        rgba(18, 48, 43, 0.9) 0%,
        rgba(21, 54, 49, 0.87) 30%,
        rgba(24, 61, 55, 0.6) 56%,
        rgba(24, 61, 55, 0.24) 100%
      ),
      linear-gradient(0deg, rgba(20, 51, 46, 0.42), transparent 55%);
  }

  /* 3. The hero uses the window: the margin grows gently instead of the
        container standing still while the screen grows. 150px a side at
        1920, against 364px. Capped at 1900 so the headline never runs to a
        silly measure on a very large monitor. */
  .home-hero__inner { max-width: min(100% - 252px, 1900px) !important; }
  .home-hero__content { max-width: 940px; }

  /* The headline was capped at 700px a few rules above, which is why it
     stayed frozen however wide the screen got. 920 lets it use the room the
     wider container gives it: 916px at 1920, against 685px. */
  .home-hero__title { max-width: 920px; }

  /* 4. And it stops getting taller for ever, so a large monitor is not a
        letterbox with a small box floating in the middle of it. */
  .home-hero__layout { min-height: clamp(710px, 42vw, 860px); }
}

/* ---- the hero's booking card, as a surface ------------------------------
 * Drew, after the hero opened up: the card looks lost, floating on the
 * right. It was not its size or its position, both already changed. The
 * site has two vocabularies. Surfaces are sharp: the destination tiles, the
 * ledger rows, the bands and every rule on the pages we have rebuilt carry
 * no radius at all. Controls are pills: sixteen of them in this hero alone.
 * The card was a surface wearing a control's clothes - 22px corners, an
 * 80px shadow, a translucent ground and a backdrop blur, the only object on
 * the site built that way - which is why it read as dropped on rather than
 * designed in.
 *
 * It is a surface now, in the brand's own colour, with the form on the dark
 * and the inputs left light so they still read as inputs. At every width,
 * because sharp surfaces are the rule everywhere else.
 *
 * Contrast measured against the card's lightest ground, not assumed:
 * heading 11.97:1, field labels 10.37:1, the eyebrow 9.42:1, the small
 * print under the button 7.97:1. Small text needs 4.5.
 */
.home-hero__care-card {
  background: rgba(20, 52, 48, 0.94);
  border: 1px solid rgba(220, 231, 223, 0.28);
  border-radius: 10px;   /* Drew: square was harsh. Not the 22px bubble it was, either. */
  box-shadow: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.home-hero__card-label { color: var(--color-sage, #dce7df) !important; }
.home-hero__care-card h2 { color: #fff !important; }

/* Scoped to this card throughout: .home-booking-start is also the service
   pages' booking start, which stays on white. */
.home-hero__care-card .home-booking-start label { color: rgba(255, 255, 255, 0.92); }

.home-hero__care-card .home-booking-start select,
.home-hero__care-card .home-booking-start input {
  color: var(--color-text, #1a2e2a);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(220, 231, 223, 0.4);
  border-radius: 8px;
}

.home-hero__care-card .home-booking-start select:hover,
.home-hero__care-card .home-booking-start input:hover {
  border-color: rgba(220, 231, 223, 0.7);
}

/* The focus ring was the brand's evergreen, which on an evergreen card
   would have been invisible. Sage, and wider, so it reads on the dark. */
.home-hero__care-card .home-booking-start select:focus,
.home-hero__care-card .home-booking-start input:focus {
  border-color: var(--color-sage, #dce7df);
  box-shadow: 0 0 0 3px rgba(220, 231, 223, 0.35);
}

.home-hero__care-card .home-booking-start p { color: rgba(255, 255, 255, 0.86) !important; }

/* ---- the form's type, everywhere it is used ----------------------------
 * Drew: I can't read this, and older patients won't be able to either. He
 * is right and this one is on me: I measured that small print's contrast
 * (7.97:1) and reported it, and never measured its size. 10px fails whatever
 * its contrast is.
 *
 * Raised at the source, on `.home-booking-start` itself. The other two
 * places that form appears - the Epsom page's card and the closing
 * section's - already set their own larger sizes at a specificity that
 * wins, so they are unmoved: checked by computing all three rather than
 * reasoning about the cascade (hero 13/16/14, ready 12/15/12.5, service
 * 15/16/15). The hero's card was the only one still inheriting the 10px.
 * The inputs go to 16px, which also stops iOS zooming the page when a
 * field takes focus.
 */
.home-booking-start label {
  font-size: 13px;
  line-height: 1.45;
}

.home-booking-start select,
.home-booking-start input {
  font-size: 16px;
}

.home-booking-start p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* The eyebrow over the card, at the size every other eyebrow on the site
   uses (13px, 700, 0.105em) rather than 12px at 0.12em. */
.home-hero__card-label {
  font-size: 13px;
  letter-spacing: 0.105em;
}

/* ---- the card's size, its footing, and a line to sit on -----------------
 * It was the one element that never grew: 390px from a 1280 laptop to a
 * 2560 monitor, while the headline went to 916, and it hovered 168px above
 * the hero's floor. Now 480 wide and dropped to the foot of the layout,
 * 76px above the hero's edge, which is the layout's own bottom padding.
 *
 * A sage hairline ran the hero's height at the card's left edge here, to
 * give the card a line to sit on. Drew, seeing it live: a weird green line
 * extending above the module. It was doing more harm than good, so it has
 * gone; the card holds its own edge.
 *
 * Justifying the row stays: capping the copy column below its twelfths left
 * slack at the end of the row that nothing took up, so the card drifted
 * 154px inside the container's right edge at 2560 and the whole composition
 * sat off centre. Justified, the gutters are equal at every width.
 */
@media (min-width: 1500px) {
  .home-hero__care-card { width: min(100%, 480px); }
  .home-hero__aside { align-self: flex-end; }
  .home-hero__layout { justify-content: space-between; }
}

@keyframes miles-rise {
  to { opacity: 1; transform: none; }
}

@keyframes miles-settle {
  from { transform: scale(1.045); }
  to   { transform: none; }
}

/* The entrance, on three knobs. Drew, 16 September 2026: it loads very
   quickly - slow it down a touch, and take the three steps ("Simple from
   the start") as the reference. Those rise for 0.7s at 260ms intervals;
   the words here were rising for 0.75s at 40ms intervals, which reads as
   the whole headline arriving at once. Now 70ms apart over 0.9s, and
   everything after the headline waits for it. Desktop: last word in by
   1.55s, lead 1.7s, buttons 1.9s. The knobs are the only numbers to change
   if it wants to be faster or slower again. */
.home-hero {
  --hero-base: 160ms;      /* before the first word */
  --hero-stagger: 70ms;    /* between words */
  --hero-word: 0.9s;       /* one word's rise */
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero { overflow: hidden; }

  /* The photograph on its own layer, so it can settle without moving the scrim. */
  .home-hero::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background: inherit;
    transform-origin: 82% 28%;
    animation: miles-settle 14s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
  }

  .home-hero__word {
    opacity: 0;
    transform: translateY(0.35em);
    animation: miles-rise var(--hero-word) cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--hero-base) + var(--i, 0) * var(--hero-stagger));
  }

  .home-hero__eyebrow,
  .home-hero__lead,
  .home-hero__actions {
    opacity: 0;
    transform: translateY(16px);
    animation: miles-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }

  /* Once the eighth word has started (base + 7 stagger = 650ms): the rule
     draws under the headline over 0.9s - the footer's own timing - and the
     lead and the buttons follow the rule rather than the words. */
  .home-hero__title::after {
    transform: scaleX(0);
    animation: miles-draw-x 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--hero-base) + 8 * var(--hero-stagger));
  }

  .home-hero__eyebrow { animation-delay: 80ms; }
  .home-hero__lead    { animation-delay: calc(var(--hero-base) + 8 * var(--hero-stagger) + 420ms); }
  .home-hero__actions { animation-delay: calc(var(--hero-base) + 8 * var(--hero-stagger) + 600ms); }

  .home-hero__care-card {
    opacity: 0;
    transform: translateX(26px);
    animation: miles-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 520ms forwards;
  }

  .home-hero__photo {
    opacity: 0;
    transform: translateY(14px);
    animation: miles-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 560ms forwards;
  }

  @media (max-width: 767px) {
    /* On phones the photograph leads, so it fades first and the words follow it. */
    .home-hero { --hero-base: 480ms; }
    .home-hero__photo { transform: none; animation-delay: 0ms; animation-duration: 1.2s; }
  }
}

/* ---------------------------------------------------------------------------
 * 12. Services mega menu: type back on the site's scale
 *
 * The panel's secondary type sat at 10-13px in soft grey: descriptions,
 * "Explore service" cues, the condition pills, the support strip. On a
 * desktop that reads as faint at best. Same floors as everywhere else on
 * the site: nothing under 12px, secondary copy 14px and up, and anything
 * 13px or under in the full text colour. Selectors carry .site-nav and
 * !important because theme.css sets these the same way, for desktop and
 * for the phone drawer alike.
 * ------------------------------------------------------------------------ */

/* Larger type makes the panel taller; on a 768px-high laptop it now scrolls
   inside itself instead of running off the bottom of the screen. */
.site-nav .site-mega-menu__panel {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 30px 26px !important;
}

.site-nav .site-mega-menu__eyebrow {
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
}

.site-nav .site-mega-menu__intro h2 {
  font-size: 34px !important;
}

.site-nav .site-mega-menu__intro > p:last-child {
  max-width: 34ch;
  color: var(--color-text) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.site-nav .site-mega-menu__group-number {
  width: 32px !important;
  height: 32px !important;
  font-size: 12px !important;
}

.site-nav .site-mega-menu__group-label {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}

.site-nav .site-mega-menu__group h3 {
  font-size: 22px !important;
}

.site-nav .site-mega-menu__service {
  min-height: 58px !important;
  padding: 11px 14px !important;
  gap: 14px !important;
}

.site-nav .site-mega-menu__service strong {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.site-nav .site-mega-menu__service small {
  margin-top: 2px;
  color: var(--color-text-soft) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.site-nav .site-mega-menu__booking-cue {
  margin-top: 7px !important;
  color: var(--color-brand-dark) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.site-nav .site-mega-menu__service > span:last-child {
  font-size: 18px !important;
}

/* Four groups, one list (inc/site-menu.php, Drew, 10 October 2026): four
   columns where a laptop has the room, two by two below it. */
@media (min-width: 1180px) {
  .site-nav .site-mega-menu__groups--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-nav .site-mega-menu__groups--4 .site-mega-menu__group { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .site-nav .site-mega-menu__groups--4 .site-mega-menu__group-number { display: none; }
}
@media (min-width: 768px) and (max-width: 1179px) {
  .site-nav .site-mega-menu__groups--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.site-nav .site-mega-menu__condition-links {
  gap: 8px !important;
  margin-top: 12px !important;
}

.site-nav .site-mega-menu__condition-links a {
  min-height: 42px;
  padding: 9px 10px !important;
  color: var(--color-brand-dark) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  border-radius: 10px !important;
}

/* A service page's hero with the booking card beside the heading (the B12
   page, Drew, 12 October 2026): the travel hero's two columns, on the
   shopfront as that hero stands. On a phone the card follows the words. */
@media (min-width: 901px) {
  .miles-service-hero--card .service-location-breadcrumb { margin-bottom: 36px; }
  .miles-service-hero--card .service-location-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 32px 64px; align-items: start; }
  .miles-service-hero--card .service-location-hero__content { max-width: 600px; }
}

/* Under Pharmacy First's seven conditions, the line to its symptom checker. */
.site-nav .site-mega-menu__ask {
  display: inline-block;
  margin-top: 14px;
  color: var(--color-brand-dark) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-nav .site-mega-menu__support {
  min-height: 78px !important;
  padding: 15px 18px 15px 22px !important;
}

.site-nav .site-mega-menu__support strong {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.site-nav .site-mega-menu__support span {
  margin-top: 4px;
  color: var(--color-text) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.site-nav .site-mega-menu__support-actions a {
  min-height: 46px !important;
  padding: 10px 18px !important;
  color: var(--color-brand-dark) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

@media (max-width: 767px) {
  .site-nav .site-mega-menu__intro h2 { font-size: 28px !important; }
  .site-nav .site-mega-menu__group h3 { font-size: 20px !important; }
  .site-nav .site-mega-menu__service strong { font-size: 15px !important; }
  .site-nav .site-mega-menu__support { padding: 16px 18px !important; }
  .site-nav .site-mega-menu__support strong { font-size: 16px !important; }
}

/* ---------------------------------------------------------------------------
 * 13. The journey's gutter
 *
 * The care index that stood here (three rows and a photograph, "The right
 * care, without the runaround") gave way on 24 September 2026 to the four
 * ways in, which now sit under the registrations bar (miles_ways_home_section()).
 * What the rest of the journey still needs from it is the gutter a bleed
 * reaches into.
 * ------------------------------------------------------------------------ */

/* Half of what the viewport has over the container: the space a bleed can
   use. The container is min(100% - 48px, 1192px), so this is its margin. */
.home-journey__container { --miles-gutter: max(24px, calc((100vw - 1192px) / 2)); }

@media (max-width: 767px) {
  .home-journey__container { --miles-gutter: 18px; }   /* theme.css narrows the container to 100% - 36px here */
}
/* ---------------------------------------------------------------------------
 * 15. Services directory
 *
 * Twelve white cards in a four-by-three grid (pale numbers, a category tag,
 * a 10px note) become an index laid out like a table of contents on a
 * full-bleed evergreen band: the mega menu's three journeys, numbered as
 * the menu numbers them, each with its services in the display cut, one per
 * row with a hairline, its category and an arrow. The whole row is the
 * link. The band breaks out of the journey container on both sides with
 * the same gutter the bleeds use; the journey section clips past that.
 * ------------------------------------------------------------------------ */

.miles-directory {
  margin: 0 calc(-1 * var(--miles-gutter, 24px)) 120px;
  padding: 96px var(--miles-gutter, 24px) 88px !important;   /* theme.css pads every section */
  color: #ffffff;
  background:
    radial-gradient(circle at 90% 6%, rgba(255, 255, 255, 0.05), transparent 40%),
    var(--color-brand-dark, #204944);
}

.miles-directory__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.7fr);   /* the intro's grid */
  gap: 40px 80px;
  align-items: end;
  margin-bottom: 56px;
}

.miles-directory__eyebrow {
  margin: 0 0 14px;
  color: #dce7df;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-directory__head h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(36px, 3.8vw, 54px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}

/* Inter at 400 is too thin in white on the evergreen ground: theme.css sets
   -webkit-font-smoothing: antialiased site-wide, which drops the subpixel
   rendering that gives light strokes their weight. Body copy on the dark
   bands is therefore 15px minimum at 500, never 400. Contrast was never the
   problem (white on #204944 is 10:1); the strokes were. */
.miles-directory__lead {
  max-width: 40ch;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
}

.miles-directory__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.miles-directory__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.miles-directory__link:hover span { transform: translateX(4px); }

/* One journey: its number, label and title on the left; its services on
   the right, on the care index's mirrored grid. */
.miles-directory__group {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.15fr);
  gap: 24px 80px;
  padding: 40px 0;
}

/* The rules are drawn, not bordered, so each can arrive with its journey:
   one above each group, and the closing one under the last. Absolutely
   positioned, so they are not grid items. */
.miles-directory__group::before,
.miles-directory__group:last-of-type::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  transform-origin: left center;
}

.miles-directory__group::before { top: 0; }
.miles-directory__group:last-of-type::after { bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .miles-directory__inner.is-armed > .miles-directory__group::before,
  .miles-directory__inner.is-armed > .miles-directory__group:last-of-type::after { transform: scaleX(0); }

  .miles-directory__inner.is-revealed > .miles-directory__group::before {
    animation: miles-draw-x 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * var(--reveal-step, 90ms) + 120ms);
  }

  .miles-directory__inner.is-revealed > .miles-directory__group:last-of-type::after {
    animation: miles-draw-x 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * var(--reveal-step, 90ms) + 420ms);
  }
}

.miles-directory__group-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 32px;
  align-content: start;
}

.miles-directory__number {
  grid-row: 1 / span 2;
  padding-top: 6px;
  color: #dce7df;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1;
}

.miles-directory__group-label {
  grid-column: 2;
  margin: 0 0 8px;
  color: #dce7df;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-directory__group-title {
  grid-column: 2;
  margin: 0;
  color: #ffffff;
  font-size: 26px;
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

.miles-directory__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-directory__row { margin: 0; padding: 0; }

.miles-directory__row + .miles-directory__row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.miles-directory__service {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: baseline;
  gap: 24px;
  padding: 17px 0;
  color: #ffffff;
  text-decoration: none;
}

/* The hover tint bleeds 24px past the list on each side, behind the row. */
.miles-directory__service::before {
  content: "";
  position: absolute;
  inset: 0 -24px;
  z-index: -1;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.miles-directory__service:hover::before,
.miles-directory__service:focus-visible::before { opacity: 1; }

.miles-directory__service:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 4px;
  border-radius: 6px;
}

.miles-directory__name {
  color: #ffffff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.miles-directory__type {
  color: #dce7df;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.miles-directory__arrow {
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.miles-directory__service:hover .miles-directory__arrow { transform: translateX(4px); }

.miles-directory__note {
  max-width: 62ch;
  margin: 36px 0 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .miles-directory__head { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 44px; }
  .miles-directory__group { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 0; }
  .miles-directory__group-head { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
}

@media (max-width: 767px) {
  .miles-directory { padding: 64px var(--miles-gutter, 18px) 60px !important; }
  /* Name over its category, the arrow beside the name. Explicit cells: an
     item with only a row set is placed before auto items and would take
     the name's cell. */
  .miles-directory__service { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 16px; padding: 15px 0; }
  .miles-directory__name { grid-column: 1; grid-row: 1; }
  .miles-directory__type { grid-column: 1; grid-row: 2; white-space: normal; }
  .miles-directory__arrow { grid-column: 2; grid-row: 1; }
  .miles-directory__service::before { inset: 0 -12px; }
  .miles-directory__name { font-size: 23px; }
  .miles-directory__group-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-directory__service::before, .miles-directory__arrow, .miles-directory__link span { transition: none; }
  .miles-directory__service:hover .miles-directory__arrow, .miles-directory__link:hover span { transform: none; }
}

@media (forced-colors: active) {
  .miles-directory { border-block: 1px solid CanvasText; }
  .miles-directory__group, .miles-directory__row + .miles-directory__row { border-color: CanvasText; }
  .miles-directory__service::before { display: none; }
}

/* ---------------------------------------------------------------------------
 * 16. The team
 *
 * The dark rounded "trust panel" (a generated consultation photograph and
 * three stat tiles) sat directly under the directory band, dark on dark.
 * Now an ivory section on the grid: the intro on the intro's grid, then a
 * row of portraits, one person each, with name, role and, where it
 * applies, the GPhC registration and one true line beneath. Nothing is
 * overlaid on the photographs. With four or more people the row runs off
 * the right edge like the destinations. Without any, the copy and one
 * photograph.
 * ------------------------------------------------------------------------ */

.miles-team {
  margin-bottom: 128px;
  padding: 0 !important;          /* theme.css pads every section */
}

.miles-team__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.7fr);   /* the intro's grid */
  gap: 40px 80px;
  align-items: end;
  margin-bottom: 48px;
}

.miles-team__eyebrow {
  margin: 0 0 14px;
  color: var(--color-brand, #2c5f5a);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-team__head h2 {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}

.miles-team__lead {
  max-width: 42ch;
  margin: 0 0 18px;
  color: var(--color-text, #1a2e2a);
  font-size: 18px;
  line-height: 1.55;
}

.miles-team__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand-dark, #204944);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.miles-team__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.miles-team__link:hover span { transform: translateX(4px); }

/* Three people fill the grid; more than three run off the right edge. */
.miles-team__strip { margin-right: calc(-1 * var(--miles-gutter, 24px)); }

.miles-team__track {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 4px 24px 4px 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.miles-team__track::-webkit-scrollbar { display: none; }

.miles-team__member {
  flex: 0 0 min(380px, calc((100% - 48px - var(--miles-gutter, 24px)) / 3));
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

.miles-team__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--color-brand-dark, #204944);
  border-radius: 18px;
}

.miles-team__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.miles-team__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
}

.miles-team__name {
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.miles-team__role {
  color: var(--color-brand, #2c5f5a);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.miles-team__meta {
  color: var(--color-text, #1a2e2a);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* Without a team: the copy and one photograph, on the grid. */
.miles-team__figure {
  position: relative;
  aspect-ratio: 21 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(26, 46, 42, 0.06);
}

.miles-team__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

@media (max-width: 1023px) {
  .miles-team__head { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 36px; }
  .miles-team__lead { margin-bottom: 14px; }
  .miles-team__member { flex-basis: min(340px, 72vw); }
  .miles-team__figure { aspect-ratio: 3 / 2; }
}

@media (max-width: 767px) {
  .miles-team { margin-bottom: 96px; }
  .miles-team__track { gap: 16px; padding-right: 18px; }
  .miles-team__member { flex-basis: min(300px, 72vw); }
  .miles-team__name { font-size: 24px; }
  .miles-team__figure { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-team__link span { transition: none; }
  .miles-team__link:hover span { transform: none; }
}

@media (forced-colors: active) {
  .miles-team__portrait, .miles-team__figure { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
 * 17. Care in three steps
 *
 * Three rows separated by full-width rules, a heavy heading in the text cut
 * and body copy in the soft grey: the section read as a list with nothing
 * happening in it. The rules become a spine running down through the step
 * markers, and it draws itself as the section comes into view, each step
 * rising in behind the line as it reaches them. Type comes onto the same
 * footing as the rest of the page: display cut at 500, body in full colour.
 * ------------------------------------------------------------------------ */

.home-process__intro h2 {
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}

.home-process__steps li {
  position: relative;
  grid-template-columns: 52px minmax(0, 1fr);
  padding-bottom: 26px;
  border-bottom: 0;               /* the spine replaces the rules */
}

.home-process__steps li + li { padding-top: 26px; }
.home-process__steps li:last-child { padding-bottom: 0; }

/* One segment per gap, from under a marker to the next one, so the line
   arrives at each step just before the step does. */
.home-process__steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 54px;
  bottom: -26px;
  left: 22px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(44, 95, 90, 0.38), rgba(44, 95, 90, 0.14));
}

.home-process__steps > li > span {
  position: relative;
  z-index: 1;                     /* over the spine */
  color: var(--color-brand, #2c5f5a);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--color-sage-soft, #edf2ed);
  box-shadow: inset 0 0 0 1px rgba(44, 95, 90, 0.22);
}

.home-process__steps h3 {
  margin-bottom: 8px;
  color: var(--color-text, #1a2e2a);
  font-size: 26px;
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

.home-process__steps p {
  max-width: 46ch;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* The entrance. Armed by miles-reveal.js, so nothing is ever hidden without
   the script, and nothing is armed under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .home-process__steps.is-armed > li {
    opacity: 0;
    transform: translateY(16px);
  }

  .home-process__steps.is-armed > li::before {
    transform: scaleY(0);
    transform-origin: top center;
  }

  .home-process__steps.is-revealed > li {
    animation: miles-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }

  .home-process__steps.is-revealed > li::before {
    animation: miles-draw 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .home-process__steps.is-revealed > li:nth-child(2) { animation-delay: 260ms; }
  .home-process__steps.is-revealed > li:nth-child(3) { animation-delay: 520ms; }
  .home-process__steps.is-revealed > li:nth-child(1)::before { animation-delay: 180ms; }
  .home-process__steps.is-revealed > li:nth-child(2)::before { animation-delay: 440ms; }
}

@keyframes miles-draw {
  to { transform: scaleY(1); }
}

@media (max-width: 767px) {
  .home-process__steps h3 { font-size: 24px; }
  .home-process__steps li { padding-bottom: 22px; }
  .home-process__steps li + li { padding-top: 22px; }
  .home-process__steps li:not(:last-child)::before { bottom: -22px; }
}

@media (forced-colors: active) {
  .home-process__steps li:not(:last-child)::before { background: CanvasText; }
  .home-process__steps > li > span { box-shadow: none; border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
 * 18. Questions, answered by the team
 *
 * Replaces the centred "Frequently Asked Questions" accordion of white cards
 * that sat below the legacy sections. Now index rows on the site's grid: a
 * question in the display cut, a fine plus that turns into a cross, and
 * under each answer the person who gave it, with their role and, where one
 * exists, their registration. The home page shows six between the three
 * steps and the booking call to action; the Health Hub shows every question
 * grouped by topic; each service page shows its own topic. Rows stage in as
 * the list comes into view. Without JavaScript every answer reads open.
 * ------------------------------------------------------------------------ */

.miles-questions {
  margin: 0 0 128px;
  padding: 0 !important;          /* theme.css pads every section */
}

.miles-questions--band {
  margin: 0;
  padding: 96px 0 !important;
  background: var(--color-background, #faf7f2);
}

.miles-questions__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.7fr);
  gap: 40px 80px;
  align-items: end;
  margin-bottom: 28px;
}

.miles-questions__eyebrow {
  margin: 0 0 14px;
  color: var(--color-brand, #2c5f5a);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-questions__head h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}

.miles-questions__lead {
  max-width: 42ch;
  margin: 0 0 18px;
  color: var(--color-text, #1a2e2a);
  font-size: 18px;
  line-height: 1.55;
}

.miles-questions__lead:last-child { margin-bottom: 8px; }

.miles-questions__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand-dark, #204944);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.miles-questions__link span,
.miles-questions__more span {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.miles-questions__link:hover span,
.miles-questions__more:hover span { transform: translateX(4px); }

/* The rows. Each carries its own hairline so it can draw in. */

.miles-questions__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(26, 46, 42, 0.14);
}

.miles-questions__item {
  position: relative;
  margin: 0;
  padding: 0;
}

.miles-questions__item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(26, 46, 42, 0.14);
  transform-origin: left center;
}

.miles-questions__q { margin: 0; }

.miles-questions__trigger {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 40px;
  gap: 4px 20px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 30px 0 28px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  text-align: left;
  cursor: pointer;
}

.miles-questions--grouped .miles-questions__trigger {
  grid-template-columns: 48px minmax(0, 1fr) 40px;
}

.miles-questions__index {
  padding-top: 9px;
  color: var(--color-brand, #2c5f5a) !important;   /* theme.css styles every child of a heading */
  font-family: "Inter", sans-serif !important;
  font-size: 13px;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.miles-questions__text {
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.22;
  text-wrap: pretty;
  transition: color 0.2s ease;
}

.miles-questions__topic {
  padding-top: 9px;
  color: var(--color-brand, #2c5f5a) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13px;
  font-weight: 600 !important;
  line-height: 1.3;
  white-space: nowrap;
}

/* A plus in a fine ring. The ring turns 45deg to make the cross, and fills. */

.miles-questions__mark {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(26, 46, 42, 0.22);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.miles-questions__mark::before,
.miles-questions__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--color-brand-dark, #204944);
  transform: translate(-50%, -50%);
  transition: background-color 0.25s ease;
}

.miles-questions__mark::after { transform: translate(-50%, -50%) rotate(90deg); }

.miles-questions__trigger:hover .miles-questions__text { color: var(--color-brand-dark, #204944); }
.miles-questions__trigger:hover .miles-questions__mark { background: var(--color-sage-soft, #edf2ed); }

.miles-questions__item[data-open="true"] .miles-questions__mark {
  border-color: var(--color-brand-dark, #204944);
  background: var(--color-brand-dark, #204944);
  transform: rotate(45deg);
}

.miles-questions__item[data-open="true"] .miles-questions__mark::before,
.miles-questions__item[data-open="true"] .miles-questions__mark::after { background: #fff; }

.miles-questions__trigger:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 4px;
  border-radius: 6px;
}

/* The answer. Open by default; collapsed and animated once the page has JS. */

.miles-questions__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.miles-questions__clip {
  min-height: 0;
  overflow: hidden;
}

.miles-questions__inner {
  max-width: 760px;
  padding: 0 0 38px 68px;
}

.miles-js .miles-questions__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.5s;
}

.miles-js .miles-questions__item[data-open="true"] .miles-questions__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}

.miles-js .miles-questions__inner {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.miles-js .miles-questions__item[data-open="true"] .miles-questions__inner {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}

.miles-questions__answer p {
  max-width: 62ch;
  margin: 0 0 14px;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.miles-questions__answer p:last-child { margin-bottom: 0; }

.miles-questions__more {
  display: inline-block;
  margin-top: 18px;
  color: var(--color-brand-dark, #204944);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* Who answered. */

.miles-questions__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  max-width: 62ch;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 46, 42, 0.1);
  font-family: "Inter", sans-serif;
}

.miles-questions__portrait,
.miles-questions__initials {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.miles-questions__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-sage, #dce7df);
  color: var(--color-brand-dark, #204944);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.miles-questions__initials--pharmacy {
  background: var(--color-brand-dark, #204944);
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
}

.miles-questions__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.miles-questions__name {
  color: var(--color-text, #1a2e2a);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.miles-questions__role {
  color: var(--color-brand-dark, #204944);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.miles-questions__reviewed {
  margin-left: auto;
  color: var(--color-brand, #2c5f5a);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

/* Grouped by topic (the Health Hub): the topic as a sticky label beside its rows. */

.miles-questions--grouped .miles-questions__head { margin-bottom: 8px; }

/* One rule between groups, not two: only the last group closes the list. */
.miles-questions--grouped .miles-questions__list { border-bottom: 0; }
.miles-questions--grouped .miles-questions__group:last-child .miles-questions__list { border-bottom: 1px solid rgba(26, 46, 42, 0.14); }

.miles-questions__group {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1.55fr);
  gap: 0 80px;
  align-items: start;
}

.miles-questions__group + .miles-questions__group { margin-top: 48px; }

.miles-questions__topic-heading {
  position: sticky;
  top: 32px;                      /* the header is not sticky */
  margin: 0;
  padding-top: 32px;
  color: var(--color-brand, #2c5f5a) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

/* Entrance: rows rise in turn and each hairline draws across. */

@media (prefers-reduced-motion: no-preference) {
  .miles-questions__list.is-armed > .miles-questions__item {
    opacity: 0;
    transform: translateY(16px);
  }

  .miles-questions__list.is-armed > .miles-questions__item::before { transform: scaleX(0); }

  .miles-questions__list.is-revealed > .miles-questions__item {
    animation: miles-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 90ms);
  }

  .miles-questions__list.is-revealed > .miles-questions__item::before {
    animation: miles-draw-x 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
}

@keyframes miles-draw-x {
  to { transform: scaleX(1); }
}

@media (max-width: 1023px) {
  .miles-questions__group {
    grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1fr);
    gap: 0 40px;
  }
}

@media (max-width: 767px) {
  .miles-questions { margin-bottom: 96px; }
  .miles-questions--band { padding: 72px 0 !important; }
  .miles-questions__head { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 16px; }
  .miles-questions__head h2 { max-width: none; }
  .miles-questions__lead { margin-bottom: 14px; }
  .miles-questions__trigger,
  .miles-questions--grouped .miles-questions__trigger {
    grid-template-columns: 32px minmax(0, 1fr) 36px;
    gap: 6px 14px;
    padding: 24px 0 22px;
  }
  .miles-questions__index { padding-top: 6px; }
  .miles-questions__text { font-size: 22px; }
  .miles-questions__topic { grid-column: 2; grid-row: 2; padding-top: 0; }
  .miles-questions__mark { width: 36px; height: 36px; }
  .miles-questions__inner { padding: 0 0 30px 46px; }
  .miles-questions__answer p { font-size: 16px; }
  .miles-questions__by { gap: 4px 12px; }
  .miles-questions__reviewed { flex-basis: 100%; margin-left: 0; padding-left: 56px; }
  .miles-questions__group { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .miles-questions__group + .miles-questions__group { margin-top: 40px; }
  .miles-questions__topic-heading { position: static; padding: 0 0 6px; }
}

@media (forced-colors: active) {
  .miles-questions__item::before { background: CanvasText; }
  .miles-questions__list { border-color: CanvasText; }
  .miles-questions__mark { border-color: CanvasText; }
  .miles-questions__mark::before,
  .miles-questions__mark::after { background: CanvasText; }
}

/* ---------------------------------------------------------------------------
 * 19. Profiles and the team page
 *
 * Every person named on the site now has somewhere to go. The team tiles
 * (home page, About page, /team/) are links to /team/their-name/: portrait,
 * role and registration with a link to the register, an introduction in
 * their own words, the services they help with as index rows, and the
 * questions they have answered. The answerer under each question links
 * there too. The team page is the same tiles in a grid instead of a strip.
 * "Before you book" is a small labelled link from a booking control to the
 * question that answers the worry, which opens on arrival.
 * ------------------------------------------------------------------------ */

.miles-team__card {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.miles-team__card .miles-team__portrait img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
a.miles-team__card:hover .miles-team__portrait img { transform: scale(1.04); }
a.miles-team__card:hover .miles-team__name { color: var(--color-brand-dark, #204944); }

.miles-team__arrow {
  display: inline-block;
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

a.miles-team__card:hover .miles-team__arrow { transform: translateX(4px); }

a.miles-team__card:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 4px;
  border-radius: 18px;
}

.miles-team__caption { display: flex; }

/* On the About page and /team/: a padded band with its own gutter. */
.miles-team--band {
  --miles-gutter: max(24px, calc((100vw - 1192px) / 2));
  margin: 0;
  padding: 96px 0 !important;
  background: var(--color-background, #faf7f2);
}

.miles-team--band .miles-team__strip { margin-right: 0; }
.miles-team--band .miles-team__track { padding-right: 0; }
.miles-team--band .miles-team__member { flex-basis: min(380px, calc((100% - 48px) / 3)); }

/* /team/: everyone, wrapped into a grid. */
.miles-team--grid .miles-team__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 40px 24px;
  padding: 4px 0;
  overflow: visible;
}

.miles-team--page .miles-team__head h1 {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}
/* People without a photograph yet: a line each, name and role, never an
   initials tile (Drew, 10 October 2026: the portraits are weeks away and the
   site launches in one). Beside one or two portraits the list takes the
   heading's column and the portraits the aside's; with three or more the
   strip runs as before and the list sits under it. A name links only to a
   profile with something more to say. */
.miles-team__body--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.7fr);
  gap: 40px 80px;
  align-items: start;
}

.miles-team__body--split.miles-team__body--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.miles-team__body--split .miles-team__strip { margin-right: 0; }
.miles-team__body--split .miles-team__track { padding-right: 0; overflow: visible; }
.miles-team__body--split .miles-team__member { flex: 1 1 0; min-width: 0; }
.miles-team__strip + .miles-team__roster,
.miles-team__roster + .miles-team__strip { margin-top: 48px; }
.miles-team__body--split .miles-team__strip + .miles-team__roster,
.miles-team__body--split .miles-team__roster + .miles-team__strip { margin-top: 0; }

.miles-team__roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  column-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-team__body--split .miles-team__roster { grid-template-columns: minmax(0, 1fr); }

.miles-team__person {
  margin: 0;
  border-top: 1px solid rgba(26, 46, 42, 0.14);
}

.miles-team__body--split .miles-team__person:last-child { border-bottom: 1px solid rgba(26, 46, 42, 0.14); }

.miles-team__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 24px;
  align-items: baseline;
  padding: 22px 0;
  color: inherit;
  text-decoration: none;
}

.miles-team__body--split .miles-team__line { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
.miles-team__line .miles-team__name { font-size: 26px; }
.miles-team__line .miles-team__details { display: flex; flex-direction: column; gap: 2px; }
.miles-team__line .miles-team__role { font-size: 15px; }
a.miles-team__line:hover .miles-team__name { color: var(--color-brand-dark, #204944); }
a.miles-team__line:hover .miles-team__arrow { transform: translateX(4px); }

a.miles-team__line:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (max-width: 1023px) {
  .miles-team__body--split,
  .miles-team__body--split.miles-team__body--pair { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .miles-team__body--split .miles-team__track { overflow-x: auto; }
  .miles-team__body--split .miles-team__member { flex: 0 0 min(340px, 72vw); }
}

@media (max-width: 767px) {
  .miles-team__body--split .miles-team__member { flex-basis: min(300px, 72vw); }
  .miles-team__line { padding: 18px 0; }
  .miles-team__line .miles-team__name { font-size: 24px; }
}

@media (max-width: 479px) {
  .miles-team__body--split .miles-team__line { grid-template-columns: minmax(0, 1fr); }
}

/* The profile. */

.miles-profile__hero {
  padding: 56px 0 96px !important;
  background: var(--color-background, #faf7f2);
}

.miles-profile__layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.15fr);
  gap: 48px 80px;
  align-items: start;
}

.miles-profile__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-brand-dark, #204944);
}

.miles-profile__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.miles-profile__portrait--plain {
  display: flex;
  align-items: flex-end;
  padding: 28px;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.09), transparent 46%),
    var(--color-brand-dark, #204944);
}

.miles-profile__portrait--plain span {
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.miles-profile__back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 30px;
  color: var(--color-brand-dark, #204944);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.miles-profile__eyebrow {
  margin: 0 0 14px;
  color: var(--color-brand, #2c5f5a);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-profile__body h1 {
  max-width: 14ch;
  margin: 0 0 18px;
  color: var(--color-text, #1a2e2a);
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}

.miles-profile__line {
  max-width: 30ch;
  margin: 0 0 24px;
  color: var(--color-brand-dark, #204944);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: pretty;
}

.miles-profile__intro p {
  max-width: 56ch;
  margin: 0 0 14px;
  color: var(--color-text, #1a2e2a);
  font-size: 18px;
  line-height: 1.6;
}

.miles-profile__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 44px;
  max-width: 56ch;
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(26, 46, 42, 0.14);
}

.miles-profile__facts div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.miles-profile__facts dt {
  color: var(--color-brand, #2c5f5a);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.miles-profile__facts dd {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  font-weight: 500;
}

.miles-profile__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 34px;
}

.miles-profile__verify,
.miles-questions__name[href] {
  display: inline-flex;
  align-items: center;
  color: var(--color-brand-dark, #204944);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.miles-questions__name[href] {
  color: var(--color-text, #1a2e2a);
}

.miles-questions__name[href] span,
.miles-profile__verify span,
.miles-profile__arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.miles-questions__name[href]:hover { color: var(--color-brand-dark, #204944); }
.miles-questions__name[href]:hover span,
.miles-profile__verify:hover span { transform: translateX(4px); }

/* What I can help with: index rows to the service pages. */

.miles-profile__helps {
  padding: 0 0 96px !important;
  background: var(--color-background, #faf7f2);
}

.miles-profile__head { margin-bottom: 20px; }

.miles-profile__head h2 {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.06 !important;
}

.miles-profile__services {
  max-width: 820px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(26, 46, 42, 0.14);
}

.miles-profile__services li { margin: 0; padding: 0; }

.miles-profile__services a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 40px;
  gap: 0 20px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid rgba(26, 46, 42, 0.14);
  color: var(--color-text, #1a2e2a);
  text-decoration: none;
}

.miles-profile__index {
  color: var(--color-brand, #2c5f5a);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.miles-profile__service {
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  transition: color 0.2s ease;
}

.miles-profile__arrow {
  justify-self: end;
  color: var(--color-brand-dark, #204944);
  font-size: 22px;
}

.miles-profile__services a:hover .miles-profile__service { color: var(--color-brand-dark, #204944); }
.miles-profile__services a:hover .miles-profile__arrow { transform: translateX(4px); }

.miles-profile__services a:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 4px;
  border-radius: 6px;
}

/* The closing call to action, on the profile and the team page. */

.miles-profile__cta {
  padding: 0 0 96px !important;
  background: var(--color-background, #faf7f2);
}

.miles-profile__cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px 48px;
  align-items: center;
  padding: 56px 64px;
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(26, 46, 42, 0.08);
}

.miles-profile__cta h2 {
  margin: 0 0 12px;
  color: var(--color-text, #1a2e2a);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.06 !important;
  text-wrap: balance;
}

.miles-profile__cta p:last-child {
  max-width: 50ch;
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: 17px;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .miles-profile__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .miles-profile__media { max-width: 420px; }
}

@media (max-width: 767px) {
  .miles-team--band { padding: 72px 0 !important; }
  .miles-team--grid .miles-team__track { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 16px; }
  .miles-profile__hero { padding: 32px 0 72px !important; }
  .miles-profile__body h1 { max-width: none; }
  .miles-profile__helps,
  .miles-profile__cta { padding-bottom: 72px !important; }
  .miles-profile__services a { grid-template-columns: 32px minmax(0, 1fr) 28px; gap: 0 14px; padding: 18px 0; }
  .miles-profile__service { font-size: 21px; }
  .miles-profile__cta-inner { grid-template-columns: minmax(0, 1fr); padding: 36px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  a.miles-team__card .miles-team__portrait img,
  .miles-team__arrow,
  .miles-profile__arrow,
  .miles-profile__verify span,
  .miles-questions__name[href] span { transition: none; }
  a.miles-team__card:hover .miles-team__portrait img { transform: none; }
}

@media (forced-colors: active) {
  .miles-profile__portrait,
  .miles-profile__cta-inner { border: 1px solid CanvasText; }
}


/*
 * NOTE: the reset that came with form.html is deliberately not here.
 *
 * That file is a standalone page and needed its own base styles - a
 * box-sizing rule, margin resets on h1-h6/p/ul, `p, li { color: soft grey }`,
 * a bare `button` reset. Pasted into the theme those apply to every page on
 * the site, not just the booking form, and the two that would have done real
 * damage are the heading font-family and the paragraph colour: every heading
 * and every paragraph on every page, restyled by a rule meant to make one
 * demo file legible.
 *
 * The booking form does not need them - the theme already sets all of it.
 */

/* ---------------------------------------------------------------------------
 * Booking form: the design from form.html.
 *
 * Ported wholesale rather than merged rule by rule, so what ships is what was
 * drawn. My earlier booking blocks were removed first - several carried
 * !important and would have outranked this.
 *
 * Some of it needs markup that is not emitted yet - the step rail, the slot
 * counts on the date cards, the time groups, the sticky bar. Those rules are
 * inert until the scripts catch up rather than wrong.
 * ------------------------------------------------------------------------- */

:root {
  --color-border-strong: rgba(44, 95, 90, 0.3);
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Newsreader, "Source Serif 4", Georgia, serif;
  --radius-control: 12px;
  --radius-panel: 20px;
  --control-height: 52px;
  --shadow-selected: 0 8px 20px rgba(26, 46, 42, 0.14);
  --shadow-cta: 0 10px 24px rgba(206, 94, 56, 0.22);
  --step-pad-x: 36px;
  --step-pad-y: 32px;
  --content-indent: 56px; /* content sits under the step title, right of the rail */
}

/* ---------------------------------------------------------------------------
   Tokens.
   --------------------------------------------------------------------------- */
:root {
  --color-background: #faf7f2;
  --color-background-deep: #f2ede4;
  --color-border: rgba(44, 95, 90, 0.14);
  --color-border-strong: rgba(44, 95, 90, 0.3);
  --color-brand: #2c5f5a;
  --color-brand-dark: #204944;
  --color-card: #ffffff;
  --color-cta: #e8734a;
  --color-cta-hover: #ce5e38;
  --color-sage: #dce7df;
  --color-sage-soft: #edf2ed;
  --color-text: #1a2e2a;
  --color-text-soft: #536762;

  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Newsreader, "Source Serif 4", Georgia, serif;

  --radius-control: 12px;
  --radius-panel: 20px;
  --control-height: 52px;
  --shadow-selected: 0 8px 20px rgba(26, 46, 42, 0.14);
  --shadow-cta: 0 10px 24px rgba(206, 94, 56, 0.22);
  --step-pad-x: 36px;
  --step-pad-y: 32px;
  --content-indent: 56px; /* content sits under the step title, right of the rail */
}

/* The form.html page chrome (a body rule: 40px/24px/96px of padding, a grey
   ground, 15px/1.5 base type) is deliberately not here either. On the site it
   framed every page in cream and reset the body type; the theme owns body. */

/* ---------------------------------------------------------------------------
   Reset + base type.
   --------------------------------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box; }

[hidden] { display: none !important; }





input::placeholder, textarea::placeholder { color: var(--color-text-soft); opacity: 0.7; }




button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(232, 115, 74, 0.5); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Shell, step panels, rail.
   --------------------------------------------------------------------------- */
.miles-appointment-engine__shell { overflow: hidden; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: 0 30px 76px rgba(26, 46, 42, 0.12); }

.miles-appointment-engine__questions,
.miles-appointment-engine__services,
.miles-appointment-engine__calendar { position: relative; padding: var(--step-pad-y) var(--step-pad-x) var(--step-pad-y) calc(var(--step-pad-x) + var(--content-indent)); background: #fff; border-bottom: 1px solid var(--color-border); }

/* The rail: a line joining the step numbers. Only inside the real shell. */
.miles-appointment-engine__shell > .miles-appointment-engine__questions::before,
.miles-appointment-engine__shell > .miles-appointment-engine__services::before,
.miles-appointment-engine__shell > .miles-appointment-engine__calendar::before { content: ""; position: absolute; left: calc(var(--step-pad-x) + 19px); top: 0; bottom: 0; width: 2px; background: var(--color-sage); pointer-events: none; }

.miles-appointment-engine__shell > .miles-appointment-engine__questions::before { top: calc(var(--step-pad-y) + 20px); }

.miles-appointment-engine__shell > .miles-appointment-engine__questions--done::before { top: 50%; }

/* Step heading: badge, eyebrow, title. Identical on every step. */
.miles-appointment-engine__section-heading { display: flex; gap: 16px; align-items: center; margin: 0 0 24px calc(-1 * var(--content-indent)); }

.miles-appointment-engine__section-heading > span { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--color-sage); color: var(--color-brand-dark); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }

.miles-appointment-engine__section-heading > div { display: grid; gap: 2px; min-width: 0; }

.miles-appointment-engine__section-heading p { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--color-brand); }

.miles-appointment-engine__section-heading strong { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-text); font-optical-sizing: auto; }

/* ---------------------------------------------------------------------------
   Buttons.
   --------------------------------------------------------------------------- */
.miles-step02__change,
.miles-triage-step__back,
.miles-booked__chip-add,
.miles-booked__done-cal,
.miles-booked__done-mine,
.miles-booked-confirm__again { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px; background: #fff; border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-brand-dark); font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; }

.miles-step02__change:hover, .miles-step02__change:focus-visible,
.miles-triage-step__back:hover, .miles-triage-step__back:focus-visible,
.miles-booked__chip-add:hover, .miles-booked__chip-add:focus-visible,
.miles-booked__done-cal:hover, .miles-booked__done-mine:hover,
.miles-booked-confirm__again:hover { background: var(--color-sage-soft); border-color: var(--color-brand); }

.health-hub-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: 12px 26px; border: 2px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 700; }

.health-hub-button--primary { color: #fff; background: var(--color-cta); border-color: var(--color-cta); box-shadow: var(--shadow-cta); }

.health-hub-button--primary:hover, .health-hub-button--primary:focus-visible { color: #fff; background: var(--color-cta-hover); border-color: var(--color-cta-hover); transform: translateY(-2px); }

.health-hub-button--primary:disabled { color: var(--color-text-soft); background: var(--color-background-deep); border-color: var(--color-border); box-shadow: none; cursor: not-allowed; opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   Option cards - routing questions and the service picker.
   --------------------------------------------------------------------------- */
.weight-loss-booking__choices { display: grid; gap: 12px; }

.miles-triage-step__choices { max-width: 900px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: 1fr; }

.weight-loss-booking__choices label { position: relative; display: block; height: 100%; cursor: pointer; }

.weight-loss-booking__choices input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.weight-loss-booking__choices label > span { position: relative; display: grid; gap: 4px; align-content: center; height: 100%; min-height: 76px; padding: 18px 58px 18px 20px; background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); transition: background-color 180ms, border-color 180ms, box-shadow 180ms, transform 180ms; }

.weight-loss-booking__choices label > span::after { content: ""; position: absolute; top: 50%; right: 18px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--color-border-strong); border-radius: 50%; font-size: 13px; font-weight: 800; line-height: 1; transform: translateY(-50%); transition: background-color 180ms, border-color 180ms; }

.weight-loss-booking__choices strong { color: var(--color-text); font-size: 16px; font-weight: 600; line-height: 1.3; }

.weight-loss-booking__choices small { color: var(--color-text-soft); font-size: 13px; line-height: 1.45; }

.weight-loss-booking__choices label:hover > span { background: var(--color-sage-soft); border-color: var(--color-brand); transform: translateY(-1px); }

.weight-loss-booking__choices label:hover > span::after { border-color: var(--color-brand); }

.weight-loss-booking__choices input:focus-visible + span { outline: 3px solid rgba(232, 115, 74, 0.5); outline-offset: 2px; }

.weight-loss-booking__choices input:checked + span { background: var(--color-brand); border-color: var(--color-brand); box-shadow: var(--shadow-selected); transform: none; }

.weight-loss-booking__choices input:checked + span strong,
.weight-loss-booking__choices input:checked + span small { color: #fff; }

.weight-loss-booking__choices input:checked + span::after { content: "\2713"; color: var(--color-brand); background: #fff; border-color: #fff; }

/* Step 01 extras. */
.miles-triage-step__track { display: flex; gap: 6px; margin: -8px 0 22px; list-style: none; }

.miles-triage-step__track li { flex: 1 1 0; max-width: 96px; height: 6px; border-radius: 999px; background: var(--color-sage); }

.miles-triage-step__track li[aria-current="step"],
.miles-triage-step__track li.is-complete { background: var(--color-brand); }

.miles-triage-step__help { margin: 16px 0 0; font-size: 14px; color: var(--color-text-soft); }

.miles-triage-step--waiting { opacity: 0.58; transition: opacity 220ms; }

.miles-appointment-engine__questions--done { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; padding: 20px var(--step-pad-x); background: var(--color-sage-soft); }

.miles-appointment-engine__questions--done .miles-appointment-engine__section-heading { margin: 0; }

.miles-appointment-engine__questions--done .miles-appointment-engine__section-heading > span { background: var(--color-brand); color: #fff; font-size: 15px; }

.miles-triage-step__summary { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px; margin: 0; }

.miles-triage-step__summary span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); font-size: 14px; font-weight: 600; }

.miles-triage-step__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-left: auto; }

/* ---------------------------------------------------------------------------
   Step 02 - your appointment.
   --------------------------------------------------------------------------- */
.miles-step02__box { display: grid; gap: 16px; max-width: none; }

.miles-step02__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; padding: 22px 24px; background: var(--color-sage-soft); border: 1px solid var(--color-border); border-radius: var(--radius-control); }

.miles-step02__card > * { grid-column: 1; }

.miles-step02__name { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-text); }

.miles-step02__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-text-soft); }

.miles-step02__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }

.miles-step02__facts span { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 13px; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); font-size: 14px; font-weight: 600; }

.miles-step02__change { grid-area: 1 / 2 / 4 / 3; margin: 0; }

.miles-step02__grid { max-width: none; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); padding: 0; background: transparent; }

.miles-step02__grid label > span { min-height: 88px; }

/* ---------------------------------------------------------------------------
   Step 03 - dates.
   --------------------------------------------------------------------------- */
.miles-appointment-engine__dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }

.miles-appointment-engine__date { display: grid; gap: 2px; justify-items: center; align-content: center; min-width: 0; min-height: 108px; padding: 12px 8px; background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); color: var(--color-text); }

.miles-appointment-engine__date span,
.miles-appointment-engine__date small { color: var(--color-text-soft); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; }

.miles-appointment-engine__date strong { margin: 4px 0 2px; font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1; color: var(--color-text); }

/* NEW (optional): how many times are free that day. */
.miles-appointment-engine__date .miles-appointment-engine__date-slots { margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--color-sage-soft); color: var(--color-brand); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.miles-appointment-engine__date:hover:not(:disabled),
.miles-appointment-engine__date:focus-visible { background: var(--color-sage-soft); border-color: var(--color-brand); transform: translateY(-2px); }

.miles-appointment-engine__date:hover:not(:disabled) .miles-appointment-engine__date-slots { background: #fff; }

.miles-appointment-engine__date[aria-pressed="true"] { background: var(--color-brand); border-color: var(--color-brand); box-shadow: var(--shadow-selected); transform: none; }

.miles-appointment-engine__date[aria-pressed="true"] span,
.miles-appointment-engine__date[aria-pressed="true"] strong,
.miles-appointment-engine__date[aria-pressed="true"] small { color: #fff; }

.miles-appointment-engine__date[aria-pressed="true"] .miles-appointment-engine__date-slots { background: rgba(255, 255, 255, 0.16); color: #fff; }

.miles-appointment-engine__date:disabled,
.miles-appointment-engine__date.is-unavailable { cursor: not-allowed; background: var(--color-background); border-color: var(--color-border); opacity: 0.55; }

.miles-appointment-engine__date:disabled strong,
.miles-appointment-engine__date.is-unavailable strong { text-decoration: line-through 1.5px; }

.miles-appointment-engine__other-date { display: flex; gap: 14px; align-items: center; justify-content: flex-end; margin-top: 16px; }

.miles-appointment-engine__other-date label { color: var(--color-text); font-size: 14px; font-weight: 600; }

.miles-appointment-engine__other-date input { min-height: 48px; padding: 8px 14px; color: var(--color-text); background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); }

.miles-appointment-engine__other-date input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(44, 95, 90, 0.14); outline: 0; }

/* ---------------------------------------------------------------------------
   Step 03 - people and times.
   --------------------------------------------------------------------------- */
.miles-booked-engine { margin-top: 24px; min-width: 0; }

.miles-booked { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.miles-booked__panel { display: flex; flex-direction: column; gap: 26px; min-width: 0; padding-top: 24px; border-top: 1px solid var(--color-border); }

.miles-booked__progress { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand); }

.miles-booked__next { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; width: 100%; padding: 14px 14px 14px 20px; background: var(--color-sage-soft); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text); font-size: 15px; }

.miles-booked__next-label { color: var(--color-text-soft); font-weight: 600; }

.miles-booked__next strong { font-weight: 700; }

.miles-booked__next-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin-left: auto; padding: 6px 16px; background: #fff; border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-brand-dark); font-size: 14px; font-weight: 700; white-space: nowrap; }

.miles-booked__next:hover, .miles-booked__next:focus-visible { background: #fff; border-color: var(--color-brand); }

.miles-booked__next:hover .miles-booked__next-cta, .miles-booked__next:focus-visible .miles-booked__next-cta { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

.miles-booked__label { color: var(--color-text); font-size: 16px; font-weight: 600; }

.miles-booked__label span { margin-left: 8px; color: var(--color-text-soft); font-size: 14px; font-weight: 500; }

.miles-booked__hint { font-size: 14px; line-height: 1.5; color: var(--color-text-soft); }

.miles-booked__party { display: grid; gap: 12px; }

.miles-booked__chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.miles-booked__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 8px 8px 18px; background: #fff; border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-text); font-size: 15px; font-weight: 600; }

.miles-booked__chip--you { padding-right: 18px; background: var(--color-sage); border-color: var(--color-sage); }

.miles-booked__chip-input { width: 12ch; min-width: 6ch; padding: 2px 0; color: var(--color-text); background: transparent; border: 0; border-bottom: 1px dashed var(--color-border-strong); border-radius: 0; outline: none; }

.miles-booked__chip-input:focus { border-bottom: 1px solid var(--color-brand); }

.miles-booked__chip-input:focus-visible { outline: none; }

.miles-booked__chip-input::placeholder { font-weight: 500; }

.miles-booked__chip-remove { display: grid; place-items: center; width: 30px; height: 30px; color: var(--color-brand-dark); font-size: 18px; line-height: 1; background: var(--color-sage-soft); border-radius: 50%; }

.miles-booked__chip-remove:hover, .miles-booked__chip-remove:focus-visible { color: #fff; background: var(--color-brand); }

.miles-booked__chip-add { border-style: dashed; }

.miles-booked__chip-add:hover, .miles-booked__chip-add:focus-visible { border-style: solid; }

.miles-booked__party-note { font-size: 14px; line-height: 1.5; color: var(--color-text-soft); }

.miles-booked__times { display: grid; gap: 18px; }

/* Morning / Afternoon toggle. Hidden on desktop (both groups show), shown on mobile. */
.miles-booked__daypart { display: none; }

.miles-booked__group { display: grid; gap: 10px; }

.miles-booked__group-label { color: var(--color-text-soft); font-size: 14px; font-weight: 600; }

.miles-booked__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; min-width: 0; }

.miles-booked__slot { display: grid; place-items: center; min-height: 48px; padding: 8px 6px; background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); color: var(--color-brand-dark); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.miles-booked__slot:hover, .miles-booked__slot:focus-visible { background: var(--color-sage-soft); border-color: var(--color-brand); }

.miles-booked__slot[aria-pressed="true"] { color: #fff; background: var(--color-brand); border-color: var(--color-brand); box-shadow: var(--shadow-selected); }

.miles-booked__more { align-self: flex-start; padding: 6px 0; color: var(--color-brand); font-size: 14px; font-weight: 600; border-bottom: 1px solid currentcolor; border-radius: 0; }

.miles-booked__status { padding: 12px 14px; font-size: 14px; line-height: 1.5; background: var(--color-sage-soft); border-radius: var(--radius-control); color: var(--color-text); }

.miles-booked__status--error { background: rgba(232, 115, 74, 0.12); color: #8c3c1c; }

.miles-booked__status--empty { background: var(--color-background-deep); color: var(--color-text-soft); }

.miles-booked__review { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 8px 28px; align-items: start; padding: 20px 24px; background: var(--color-background); border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand); border-radius: 4px var(--radius-control) var(--radius-control) 4px; }

.miles-booked__review-label { display: flex; flex-direction: column; gap: 6px; grid-column: 1; color: var(--color-text-soft); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.miles-booked__review-stars { color: var(--color-cta); font-size: 14px; letter-spacing: 0.1em; }

.miles-booked__review blockquote { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-display); font-size: 18px; line-height: 1.45; color: var(--color-text); font-optical-sizing: auto; }

.miles-booked__review blockquote::before { content: "\201C"; }

.miles-booked__review blockquote::after { content: "\201D"; }

.miles-booked__review figcaption { grid-column: 1; color: var(--color-text-soft); font-size: 13px; font-weight: 600; line-height: 1.4; }

/* ---------------------------------------------------------------------------
   Step 04 - the appointment card.
   --------------------------------------------------------------------------- */
.miles-appointment-card { margin: 24px var(--step-pad-x) 32px calc(var(--step-pad-x) + var(--content-indent)); overflow: hidden; background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: 0 18px 46px rgba(26, 46, 42, 0.08); }

.miles-appointment-card__status { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 10px 24px; color: var(--color-brand-dark); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--color-sage-soft); border-bottom: 1px solid var(--color-border); }

.miles-appointment-card__status span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-cta); box-shadow: 0 0 0 4px rgba(232, 115, 74, 0.16); }

.miles-appointment-card--ready .miles-appointment-card__status span { background: var(--color-brand); box-shadow: 0 0 0 4px rgba(44, 95, 90, 0.16); }

.miles-appointment-card__body { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1fr); gap: 12px 36px; align-items: center; padding: 28px 30px; }

.miles-appointment-card__body > div:first-child { grid-column: 1; grid-row: 1 / span 2; }

.miles-appointment-card h3 { margin-bottom: 8px; font-size: 32px; font-weight: 500; }

.miles-appointment-card__body > div:first-child > p { font-size: 14px; line-height: 1.6; }

.miles-appointment-card dl { display: none; }

.miles-booked__sentence { grid-column: 2; grid-row: 1; max-width: 54ch; color: var(--color-text); font-size: 17px; line-height: 1.55; }

.miles-booked__caveat { grid-column: 2; grid-row: 2; max-width: 54ch; padding: 12px 16px; color: var(--color-text); font-size: 14px; font-weight: 600; line-height: 1.5; background: var(--color-sage-soft); border-radius: var(--radius-control); }

.miles-appointment-card__footer { display: flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 84px; padding: 16px 24px 16px 30px; background: var(--color-background); border-top: 1px solid var(--color-border); }

.miles-appointment-card__footer p { max-width: 60ch; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--color-text-soft); }

.miles-appointment-card--ready .miles-appointment-card__footer p { color: var(--color-text); }

.miles-appointment-card__footer button { flex: 0 0 auto; min-width: 200px; }

.miles-appointment-engine__disclosure { padding: 14px 30px; font-size: 12px; line-height: 1.6; color: var(--color-text-soft); background: var(--color-background-deep); border-top: 1px solid var(--color-border); }

/* ---------------------------------------------------------------------------
   Mobile sticky bar. Appears once a time is chosen. Mobile only.
   --------------------------------------------------------------------------- */
.miles-booked__sticky { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1090; display: flex; gap: 12px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--color-border); box-shadow: 0 -12px 34px rgba(26, 46, 42, 0.14); backdrop-filter: blur(14px); }

.miles-booked__sticky-copy { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }

.miles-booked__sticky-copy strong { overflow: hidden; color: var(--color-text); font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }

.miles-booked__sticky-copy span { overflow: hidden; color: var(--color-text-soft); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

.miles-booked__sticky .health-hub-button { flex: 0 0 auto; min-height: 48px; padding: 10px 20px; font-size: 14px; }

@media (min-width: 768px) {
  .miles-booked__sticky { display: none; }
}

/* ---------------------------------------------------------------------------
   The details form (opens when Book is tapped).
   --------------------------------------------------------------------------- */
.miles-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }

.miles-modal__backdrop { position: absolute; inset: 0; padding: 0; background: rgba(20, 45, 41, 0.55); border: 0; border-radius: 0; cursor: pointer; backdrop-filter: blur(2px); }

.miles-modal__panel { position: relative; display: flex; flex-direction: column; width: min(600px, 100%); max-height: min(90vh, 840px); overflow: hidden; background: #fff; border-radius: var(--radius-panel); box-shadow: 0 24px 60px rgba(20, 45, 41, 0.28); }

.miles-modal__head { display: flex; gap: 12px; align-items: center; padding: 20px 24px; background: var(--color-background); border-bottom: 1px solid var(--color-border); }

.miles-modal__head > div { display: grid; gap: 2px; }

.miles-modal__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand); }

.miles-modal__title { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-text); }

.miles-modal__close { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; color: var(--color-text-soft); font-size: 22px; line-height: 1; background: var(--color-sage-soft); border-radius: 50%; }

.miles-modal__close:hover, .miles-modal__close:focus-visible { color: #fff; background: var(--color-brand); }

.miles-modal__body { display: grid; gap: 20px; padding: 24px; overflow-y: auto; }

.miles-modal__body .miles-booked__panel { gap: 16px; padding-top: 0; border-top: 0; }

.miles-booked__card { display: grid; gap: 2px; padding: 14px 16px; background: var(--color-sage-soft); border-left: 3px solid var(--color-brand); border-radius: 4px var(--radius-control) var(--radius-control) 4px; }

.miles-booked__card strong { color: var(--color-text); font-size: 15px; }

.miles-booked__card span { color: var(--color-text-soft); font-size: 14px; }

.miles-booked__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.miles-booked__field { display: grid; gap: 6px; min-width: 0; }

.miles-booked__field--wide { grid-column: 1 / -1; }

.miles-booked__field label { color: var(--color-text); font-size: 13px; font-weight: 600; }

.miles-booked__field label span { color: var(--color-text-soft); font-weight: 500; }

.miles-booked__field input, .miles-booked__field select, .miles-booked__field textarea { width: 100%; min-height: 48px; padding: 10px 14px; color: var(--color-text); font-size: 15px; background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); }

/*
 * 16px on every field, on every width. Under 16px iOS zooms the page the
 * moment a field is focused, and the review sheet's email, phone and message
 * fields were 14px (booking.css, at a specificity this file's 15px rule did
 * not reach) - Ollie: "it auto zooms in on phone". 16px is also the site's
 * type floor. Same specificity as booking.css's rule; this file loads after
 * it, so this wins.
 */
.miles-booked .miles-booked__field input, .miles-booked .miles-booked__field select, .miles-booked .miles-booked__field textarea,
.miles-booked .miles-booked__add-input { font-size: 16px; }

.miles-booked__field input:focus, .miles-booked__field select:focus, .miles-booked__field textarea:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(44, 95, 90, 0.14); outline: none; }

.miles-booked__field textarea { min-height: 80px; resize: vertical; }

.miles-booked__field--check { grid-column: 1 / -1; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--color-text-soft); font-size: 13px; line-height: 1.5; cursor: pointer; }

.miles-booked__field--check input { width: 20px; height: 20px; min-height: 0; margin-top: 1px; padding: 0; accent-color: var(--color-brand); }

.miles-booked__go { width: 100%; }

.miles-modal__body .miles-booked__hint { text-align: center; }

/* ---------------------------------------------------------------------------
   Booked - the screen after the form.
   --------------------------------------------------------------------------- */
.miles-booked-confirm { margin: 24px var(--step-pad-x) 32px calc(var(--step-pad-x) + var(--content-indent)); overflow: hidden; background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: 0 18px 46px rgba(26, 46, 42, 0.08); }

.miles-booked-confirm__status { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 10px 24px; color: var(--color-brand-dark); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--color-sage-soft); border-bottom: 1px solid var(--color-border); }

.miles-booked-confirm__status > span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 4px rgba(44, 95, 90, 0.16); }

.miles-booked-confirm__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: 24px 36px; align-items: center; padding: 28px 30px; }

.miles-booked-confirm__eyebrow { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand); }

.miles-booked-confirm__body h3 { margin-bottom: 8px; font-size: 32px; font-weight: 500; }

.miles-booked-confirm__address { font-size: 15px; line-height: 1.55; color: var(--color-text-soft); }

.miles-booked-confirm__body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-control); }

.miles-booked-confirm__body dl > div { padding: 12px 16px; background: #fff; }

.miles-booked-confirm__body dt { margin-bottom: 2px; color: var(--color-text-soft); font-size: 12px; font-weight: 600; }

.miles-booked-confirm__body dd { color: var(--color-text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.miles-booked-confirm__footer { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 80px; padding: 16px 24px 16px 30px; background: var(--color-background); border-top: 1px solid var(--color-border); }

.miles-booked-confirm__footer p { max-width: 52ch; font-size: 14px; line-height: 1.5; color: var(--color-text-soft); }

.miles-booked__done-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------------------
   Responsive.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .miles-appointment-card__body, .miles-booked-confirm__body { grid-template-columns: 1fr; gap: 16px; }
  .miles-appointment-card__body > div:first-child { grid-row: auto; }
  .miles-booked__sentence, .miles-booked__caveat { grid-column: 1; grid-row: auto; }
  .miles-step02__card { grid-template-columns: 1fr; }
  .miles-step02__change { grid-area: auto; grid-column: 1; justify-self: start; margin-top: 10px; }
}

@media (max-width: 767px) {
  .miles-appointment-engine__shell > .miles-appointment-engine__questions::before,
  .miles-appointment-engine__shell > .miles-appointment-engine__services::before,
  .miles-appointment-engine__shell > .miles-appointment-engine__calendar::before { display: none; }
  .miles-appointment-engine__section-heading { gap: 10px; margin-bottom: 14px; }
  .miles-appointment-engine__section-heading > span { flex-basis: 32px; width: 32px; height: 32px; font-size: 12px; }
  .miles-appointment-engine__section-heading p { font-size: 11px; }
  .miles-appointment-engine__section-heading strong { font-size: 20px; }
  /* Step 01: two columns, compact cards. */
  .miles-triage-step__track { margin: -4px 0 14px; }
  .miles-triage-step__choices, .miles-step02__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; grid-auto-rows: 1fr; }
  /* No empty circle on phones - it eats width in two columns. Teal fill + corner tick marks the pick. */
  .weight-loss-booking__choices label > span { min-height: 54px; gap: 0; padding: 10px 12px; }
  .weight-loss-booking__choices label > span::after { display: none; }
  .weight-loss-booking__choices input:checked + span { padding-right: 30px; }
  .weight-loss-booking__choices input:checked + span::after { display: grid; top: 8px; right: 8px; width: 18px; height: 18px; font-size: 10px; transform: none; }
  .weight-loss-booking__choices strong { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
  .weight-loss-booking__choices small { display: none; }
  /* titles carry it on phones; the step 02 card shows the description once chosen */
  .miles-triage-step__help { margin-top: 12px; font-size: 13px; }
  .miles-appointment-engine__questions--done { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding-block: 14px; }
  .miles-appointment-engine__questions--done .miles-appointment-engine__section-heading { grid-column: 1; grid-row: 1; }
  .miles-appointment-engine__questions--done .miles-appointment-engine__section-heading strong { font-size: 18px; }
  .miles-triage-step__actions { grid-column: 2; grid-row: 1; margin-left: 0; }
  .miles-triage-step__back { min-height: 36px; padding: 6px 12px; font-size: 13px; }
  .miles-triage-step__summary { grid-column: 1 / -1; grid-row: 2; gap: 6px; }
  .miles-triage-step__summary span { min-height: 30px; padding: 3px 10px; font-size: 13px; }
  /* Step 02 */
  .miles-step02__card { gap: 4px; padding: 16px; }
  .miles-step02__name { font-size: 20px; }
  .miles-step02__desc { font-size: 14px; }
  .miles-step02__facts span { min-height: 30px; font-size: 13px; }
  .miles-step02__change { width: 100%; min-height: 44px; margin-top: 8px; }
  .miles-step02__grid label > span { min-height: 0; }
  /* Step 03: dates as a swipe strip. */
  .miles-appointment-engine__dates { display: flex; gap: 8px; margin-inline: calc(-1 * var(--step-pad-x)); padding-inline: var(--step-pad-x); padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--step-pad-x); scrollbar-width: none; }
  .miles-appointment-engine__dates::-webkit-scrollbar { display: none; }
  .miles-appointment-engine__date { flex: 0 0 80px; min-height: 88px; padding: 10px 6px; scroll-snap-align: start; }
  .miles-appointment-engine__date span, .miles-appointment-engine__date small { font-size: 11px; }
  .miles-appointment-engine__date strong { margin: 2px 0; font-size: 26px; }
  .miles-appointment-engine__date .miles-appointment-engine__date-slots { margin-top: 4px; font-size: 10px; }
  .miles-appointment-engine__other-date { display: grid; gap: 6px; justify-content: stretch; margin-top: 10px; }
  .miles-appointment-engine__other-date input { width: 100%; min-height: 44px; }
  /* People and times */
  .miles-booked-engine { margin-top: 18px; }
  .miles-booked__panel { gap: 18px; padding-top: 18px; }
  .miles-booked__next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 10px 10px 10px 14px; font-size: 14px; }
  .miles-booked__next-label { grid-column: 1; grid-row: 1; font-size: 12px; }
  .miles-booked__next strong { grid-column: 1; grid-row: 2; }
  .miles-booked__next-cta { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .miles-booked__label { font-size: 15px; }
  .miles-booked__label span { display: block; margin: 2px 0 0; font-size: 13px; }
  .miles-booked__party { gap: 10px; }
  .miles-booked__chips { gap: 8px; }
  .miles-booked__chip, .miles-booked__chip-add { min-height: 44px; font-size: 14px; }
  .miles-booked__party-note { font-size: 13px; }
  .miles-booked__times { gap: 12px; }
  .miles-booked__daypart { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--color-sage-soft); border-radius: 999px; }
  .miles-booked__daypart button { display: flex; gap: 6px; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; color: var(--color-brand-dark); font-size: 14px; font-weight: 700; }
  .miles-booked__daypart button span { color: var(--color-text-soft); font-size: 12px; font-weight: 600; }
  .miles-booked__daypart button[aria-selected="true"] { color: #fff; background: var(--color-brand); box-shadow: var(--shadow-selected); }
  .miles-booked__daypart button[aria-selected="true"] span { color: rgba(255, 255, 255, 0.8); }
  .miles-booked__group-label { display: none; }
  .miles-booked__group:not(.is-active) { display: none; }
  .miles-booked__slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .miles-booked__slot { min-height: 44px; padding: 6px 4px; font-size: 14px; }
  .miles-booked__review { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .miles-booked__review-label { flex-direction: row; gap: 10px; align-items: center; }
  .miles-booked__review blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; grid-column: 1; grid-row: auto; font-size: 15px; line-height: 1.4; }
  .miles-booked__review figcaption { font-size: 12px; }
  /* Card */
  .miles-appointment-card { margin: 16px var(--step-pad-x) 20px; }
  .miles-appointment-card__status { min-height: 42px; padding: 8px 16px; font-size: 11px; }
  .miles-appointment-card__body { gap: 12px; padding: 18px 16px; }
  .miles-appointment-card h3 { margin-bottom: 0; font-size: 24px; }
  .miles-appointment-card__body > div:first-child > p { display: none; }
  /* address is in the sentence */
  .miles-booked__sentence { font-size: 15px; }
  .miles-booked__caveat { padding: 10px 12px; font-size: 13px; }
  .miles-appointment-card__footer { display: grid; gap: 12px; min-height: 0; padding: 14px 16px; }
  .miles-appointment-card__footer p { font-size: 13px; }
  .miles-appointment-card__footer button { min-width: 0; width: 100%; }
  .miles-appointment-engine__disclosure { padding: 12px 16px; font-size: 11px; }
  /* Booked */
  .miles-booked-confirm { margin: 16px var(--step-pad-x) 20px; }
  .miles-booked-confirm__body { padding: 18px 16px; }
  .miles-booked-confirm__body h3 { font-size: 26px; }
  .miles-booked-confirm__footer { display: grid; gap: 12px; padding: 14px 16px; }
  .miles-booked__done-actions > * { flex: 1 1 auto; }
}

@media (max-width: 520px) {
  .miles-modal { align-items: flex-end; padding: 0; }
  /*
   * dvh, with vh kept for browsers without it. 94vh is 94% of the layout
   * viewport, which iOS does not shrink when the keyboard opens: the sheet
   * stayed 793px tall on a screen with 500px left, and everything under the
   * focused field - including "Request this appointment" - sat behind the
   * keyboard with nothing to scroll (Ollie: "hard to fill out"). The dynamic
   * unit follows the keyboard, so the body scrolls and the field it is on
   * is kept clear of it.
   */
  .miles-modal__panel { max-height: 94vh; max-height: 94dvh; border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
  .miles-modal__body { scroll-padding-bottom: 96px; }
  .miles-modal__head { padding: 16px 20px; }
  .miles-modal__title { font-size: 21px; }
  .miles-modal__body { gap: 16px; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
  .miles-booked__fields { gap: 12px; }
  .miles-booked__field--wide { grid-column: 1 / -1; }
}

@media (max-width: 340px) {
  .miles-booked-confirm__body dl { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Accessibility guards.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .weight-loss-booking__choices label:hover > span,
  .miles-appointment-engine__date:hover:not(:disabled),
  .health-hub-button--primary:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .weight-loss-booking__choices label > span, .miles-appointment-engine__date, .miles-booked__slot, .miles-booked__chip, .miles-appointment-card, .miles-step02__card, .miles-modal__panel, .miles-booked__field input, .miles-booked__field textarea { border-color: var(--color-brand-dark); }
  .miles-appointment-card__footer p, .miles-appointment-engine__disclosure { color: var(--color-text); }
}

@media (forced-colors: active) {
  .weight-loss-booking__choices label > span, .miles-appointment-engine__date, .miles-booked__slot, .miles-booked__chip, .miles-booked__chip-add, .miles-step02__change, .miles-triage-step__back, .health-hub-button, .miles-booked__daypart button { color: buttontext; background: buttonface; border: 1px solid buttontext; box-shadow: none; }
  .weight-loss-booking__choices input:checked + span, .miles-appointment-engine__date[aria-pressed="true"], .miles-booked__slot[aria-pressed="true"], .miles-booked__daypart button[aria-selected="true"] { color: highlighttext; background: highlight; border-color: highlight; }
  .miles-appointment-card, .miles-booked__review, .miles-step02__card, .miles-modal__panel, .miles-booked-confirm, .miles-booked__sticky { color: canvastext; background: canvas; border: 1px solid canvastext; box-shadow: none; }
  .miles-appointment-engine__shell > .miles-appointment-engine__questions::before, .miles-appointment-engine__shell > .miles-appointment-engine__services::before, .miles-appointment-engine__shell > .miles-appointment-engine__calendar::before { background: canvastext; }
}

/* Step 02 before the questions are answered. */
.miles-step02__waiting {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 15px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * 20. The footer
 *
 * The last part of the page still built from the template: Bootstrap columns
 * on a 1140px grid that lined up with nothing, three link lists in thin 400
 * Inter on dark green, "Quick links" to three services and six policy pages
 * carrying the most weight. Now, on the site's own grid: the closing
 * statement in the display face with the last ask beside it (the hero's
 * bookend), a fine rule that draws in beneath, four index columns with the
 * eyebrow labels and 15px/500 links the rest of the site uses, today's
 * opening hours from the same source as the announcement bar, and a trust
 * line with the registration set in tabular figures. The evergreen ends
 * deeper than it began. Body copy on the dark ground is never lighter than
 * 500, never smaller than 14px, never at reduced alpha.
 * ------------------------------------------------------------------------ */

.miles-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 128px 0 44px !important;    /* theme.css pads every footer */
  color: #fff;
  /* The colour under the gradients is the gradient's lightest end, so the
     ground reads as evergreen to anything that measures it (the gate's
     audit, forced colours) rather than as the ivory page behind. */
  background:
    radial-gradient(circle at 12% 8%, rgba(220, 231, 223, 0.10), transparent 30%),
    radial-gradient(circle at 92% 90%, rgba(232, 115, 74, 0.07), transparent 26%),
    linear-gradient(160deg, #1b3b36 0%, #143430 55%, #102a26 100%)
    #1b3b36;
}

/* The ring, now large enough to frame the statement. */
.miles-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -420px;
  right: -260px;
  width: 980px;
  height: 980px;
  border: 1px solid rgba(220, 231, 223, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 120px rgba(220, 231, 223, 0.025),
    0 0 0 240px rgba(220, 231, 223, 0.014);
  pointer-events: none;
}

/* The width. The footer sat on the 1192px text column, which on a wide
   screen left a third of the band empty either side - a contained block on
   a full-bleed ground, which is what reads as a template. It runs the width
   now, inside a gutter that grows with the screen: 1720px at 1870, 1325 at
   1440, the text column again by 1240. Drew, 16 September 2026. */
.miles-footer__inner {
  width: min(100% - 2 * clamp(24px, 4vw, 72px), 1760px);
  margin-inline: auto;
}

/* The closing statement and the last ask. */

.miles-footer__close {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  gap: 32px 80px;
  align-items: end;
  padding-bottom: 60px;
}

.miles-footer__close::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(220, 231, 223, 0.55), rgba(220, 231, 223, 0.18));
  transform-origin: left center;
}

/*
 * inline-block was written when the wordmark was only the name. It now carries
 * the mark as well, and an inline-block box stacks them: the cross sat on its
 * own line above "Miles Pharmacy". Same row as the header's lockup.
 */
.miles-footer .miles-wordmark--footer {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 28px;
  font-size: clamp(26px, 1.8vw, 32px);
}

.miles-footer__statement {
  max-width: 19ch;
  margin: 0;
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(32px, 3.2vw, 56px);   /* grows with the width it now has */
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-wrap: balance;
}

.miles-footer__ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px 28px;
  padding-bottom: 6px;
}

.miles-footer__phone {
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(28px, 2vw, 34px);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.miles-footer__phone:hover { color: var(--color-sage, #dce7df); }

/* The index, as a ledger: four equal columns divided by hairlines that
   draw down as the columns arrive, after the rule above has drawn across.
   Rules between things are what the footer already does; the width it now
   has is what lets the columns sit apart. */

.miles-footer__index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0 0 72px;
  --reveal-step: 120ms;
}

.miles-footer__col {
  position: relative;
  padding: 60px 40px 0 0;
}

.miles-footer__col + .miles-footer__col { padding-left: 40px; }

.miles-footer__col + .miles-footer__col::before {
  content: "";
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(220, 231, 223, 0.18);
  transform-origin: top center;
}

@media (prefers-reduced-motion: no-preference) {
  .miles-footer__index.is-armed > .miles-footer__col + .miles-footer__col::before { transform: scaleY(0); }
  .miles-footer__index.is-revealed > .miles-footer__col + .miles-footer__col::before {
    animation: miles-draw 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * var(--reveal-step, 90ms) + 240ms);
  }
}

.miles-footer__label {
  margin: 0 0 18px;
  color: var(--color-sage, #dce7df) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.miles-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-footer__col li { margin: 0; padding: 0; }

/*
 * The last item in the Policies column is a <button> (Cookie choices), not a
 * link: it reopens the consent banner rather than navigating. It is listed
 * alongside the anchors here so it inherits the same type, colour and hover
 * as its neighbours - a control that looks different from the five links
 * above it reads as an advert, and gets ignored.
 */
.miles-footer__col a,
.miles-footer__col .miles-cookie__reopen,
.miles-footer__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.miles-footer__col a span,
.miles-footer__more span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.miles-footer__col a:hover,
.miles-footer__col .miles-cookie__reopen:hover,
.miles-footer__more:hover { color: var(--color-sage, #dce7df); }

.miles-footer__col a:hover span,
.miles-footer__more:hover span,
.miles-footer__col a:focus-visible span,
.miles-footer__more:focus-visible span {
  opacity: 1;
  transform: none;
}

.miles-footer__all { margin-top: 6px; }
.miles-footer__all span { opacity: 1; transform: none; }

.miles-footer__col--policies a { font-size: 14px; }

.miles-footer__address {
  margin: 0 !important;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
}

.miles-footer__hours {
  margin: 14px 0 0 !important;         /* the Health Hub pages space every p */
  color: var(--color-sage, #dce7df);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.miles-footer__col--visit .miles-footer__more { margin-top: 14px; }

/* The trust line. */

.miles-footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(220, 231, 223, 0.22);
  font-family: "Inter", sans-serif;
}

.miles-footer__trust p {
  margin: 0 !important;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.miles-footer__reg strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.miles-footer__reg a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  color: var(--color-sage, #dce7df);
  text-decoration: none;
}

.miles-footer__reg a span { display: inline-block; transition: transform 0.2s ease; }
.miles-footer__reg a:hover span { transform: translate(2px, -2px); }

.miles-footer__copy {
  margin-left: auto !important;
  color: var(--color-sage, #dce7df) !important;
  font-weight: 500 !important;
}

.miles-footer__credit::before { content: "\00b7\00a0"; }

.miles-footer a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 6px;
}

/* The rule under the statement draws in as the footer comes into view. */
@media (prefers-reduced-motion: no-preference) {
  .miles-footer__close.is-armed::after { transform: scaleX(0); }
  .miles-footer__close.is-revealed::after {
    animation: miles-draw-x 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
  }
}

@media (max-width: 1023px) {
  .miles-footer__index { grid-template-columns: 1fr 1fr; }
  /* Two across: the rule sits between the pair, not at the row's left edge. */
  .miles-footer__col { padding: 48px 32px 0 0; }
  .miles-footer__col:nth-child(odd) { padding-left: 0; }
  .miles-footer__col:nth-child(odd)::before { display: none; }
  .miles-footer__col:nth-child(even) { padding-left: 32px; }
  .miles-footer__col:nth-child(even)::before { top: 48px; }
}

@media (max-width: 767px) {
  .miles-footer { padding: 88px 0 36px !important; }
  .miles-footer__close { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: 40px; }
  .miles-footer__statement { max-width: none; font-size: 32px; }
  .miles-footer__ask { justify-content: flex-start; padding-bottom: 0; }
  .miles-footer__book { width: 100%; justify-content: center; }
  .miles-footer__phone { font-size: 26px; }
  /* The phone keeps the layout it had: the rules and the column padding go. */
  .miles-footer__index { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding: 44px 0 48px; }
  .miles-footer__col,
  .miles-footer__col:nth-child(even) { padding: 0; }
  .miles-footer__col::before { display: none; }
  .miles-footer__col--visit,
  .miles-footer__col--policies { grid-column: 1 / -1; }
  .miles-footer__col--policies ul { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }
  .miles-footer__trust { flex-direction: column; align-items: flex-start; gap: 12px; }
  .miles-footer__copy { margin-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-footer__col a span,
  .miles-footer__more span,
  .miles-footer__reg a span,
  .miles-footer__phone { transition: none; }
}

@media (forced-colors: active) {
  .miles-footer { border-top: 1px solid CanvasText; }
  .miles-footer__close::after,
  .miles-footer__trust { background: CanvasText; border-color: CanvasText; }
}

/* ---------------------------------------------------------------------------
 * Booking component styling, restored.
 *
 * These rules were lost when theme-fixes.css was rewritten: the scripts still
 * emit the classes, so step 02, the people chips, the choose-a-time sentence
 * and the confirmation were all rendering with no styling at all, and the
 * service pills - hidden by attribute but not by rule - came back.
 *
 * Re-added here with the two faults that were reported alongside them fixed:
 * the grid was inheriting the questions' 780px measure instead of filling the
 * band, and the option cards were sized for four choices rather than thirteen.
 * ------------------------------------------------------------------------- */

/* The pills carry `display: flex`, which beats the hidden attribute alone. */
.miles-appointment-engine__tabs[hidden] { display: none !important; }

/* ---- step 02 ---- */

.miles-step02__box { max-width: none; }

.miles-step02__card {
  max-width: 640px;
  padding: 24px 26px;
  background: var(--color-background);
  border-radius: 16px;
}

.miles-step02__name {
  margin: 0 0 6px;
  color: var(--color-text) !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.miles-step02__desc {
  margin: 0 0 14px;
  color: var(--color-text-soft);
  font-size: 15px;
  line-height: 1.55;
}

.miles-step02__facts {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
}

.miles-step02__change {
  margin-top: 18px;
  min-height: 44px;
  padding: 10px 20px;
  color: var(--color-brand-dark);
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  border: 1px solid rgba(44, 95, 90, 0.28);
  border-radius: 999px;
  cursor: pointer;
}

.miles-step02__change:hover,
.miles-step02__change:focus-visible {
  background: var(--color-sage-soft);
  border-color: var(--color-brand);
}

/*
 * The grid fills the band. It was inheriting .miles-triage-step__choices, which
 * is capped at 780px for a question with four answers - correct there, and the
 * reason thirteen services sat in two columns with the band empty beside them.
 */
.miles-step02__grid {
  margin-top: 16px;
  padding: 20px;
  max-width: none !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
}

/*
 * Thirteen cards do not need the 80px height that suited four - but they do
 * need to match each other. Content-sized rows, equalised: a one-line
 * description no longer sits short beside a two-line one.
 */
.miles-step02__grid { grid-auto-rows: 1fr; }

.miles-step02__grid label {
  height: 100% !important;
}

.miles-step02__grid label > span {
  min-height: 0 !important;
  height: 100% !important;
  padding: 14px 46px 14px 18px;
  background: var(--color-background);
}

.miles-step02__grid label > span::after { right: 16px; }

@media (max-width: 640px) {
  .miles-step02__card { padding: 20px; }
  .miles-step02__name { font-size: 20px !important; }
  .miles-step02__grid { padding: 14px; gap: 10px; }
  .miles-step02__grid label > span { padding: 12px 40px 12px 14px; }
  .miles-step02__grid strong { font-size: 14px; }
  .miles-step02__grid small { font-size: 12px; }
}

/* ---- people on the booking ---- */

.miles-booked__chips {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.miles-booked__chip {
  display: inline-flex;
  gap: 6px;
  min-height: 44px;
  padding: 8px 8px 8px 16px;
  align-items: center;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  background: var(--color-sage-soft);
  border: 1px solid rgba(44, 95, 90, 0.2);
  border-radius: 999px;
}

.miles-booked__chip--you {
  padding-right: 16px;
  background: var(--color-sage);
}

.miles-booked__chip-input {
  min-width: 4ch;
  padding: 0;
  color: var(--color-text);
  font: inherit;
  background: transparent;
  border: 0;
  outline: none;
}

.miles-booked__chip-input:focus { border-bottom: 1px solid var(--color-brand); }

.miles-booked__chip-remove {
  display: grid;
  width: 26px;
  height: 26px;
  color: var(--color-brand-dark);
  font-size: 16px;
  line-height: 1;
  background: rgba(44, 95, 90, 0.1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  place-items: center;
}

.miles-booked__chip-remove:hover,
.miles-booked__chip-remove:focus-visible {
  color: #ffffff;
  background: var(--color-brand);
}

.miles-booked__chip-add {
  min-height: 44px;
  padding: 8px 18px;
  color: var(--color-brand-dark);
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  border: 1px dashed rgba(44, 95, 90, 0.4);
  border-radius: 999px;
  cursor: pointer;
}

.miles-booked__chip-add:hover,
.miles-booked__chip-add:focus-visible {
  background: var(--color-sage-soft);
  border-style: solid;
  border-color: var(--color-brand);
}

.miles-booked__family,
.miles-booked__who {
  margin: 12px 0 0;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
}

.miles-booked__party { margin-bottom: 18px; }

.miles-booked__party-note {
  margin: 10px 0 0;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.5;
}

/* ---- choose a time ---- */

.miles-appointment-card dl[hidden] { display: none !important; }

.miles-booked__sentence {
  margin: 0;
  max-width: 54ch;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
}

.miles-booked__caveat {
  margin: 14px 0 0;
  padding: 12px 16px;
  max-width: 54ch;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  background: var(--color-sage-soft);
  border-radius: 12px;
}

.miles-booked__progress {
  margin: 0 0 4px;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.miles-booked__next {
  margin: 0 0 18px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
}

.miles-booked__review {
  position: relative;
  margin: 0 0 22px;
  padding: 20px 22px 18px;
  max-width: 46ch;
  background: var(--color-sage-soft);
  border-left: 3px solid var(--color-brand);
  border-radius: 4px 14px 14px 4px;
}

.miles-booked__review-label {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  align-items: center;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.miles-booked__review-stars {
  color: var(--color-cta);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.miles-booked__review blockquote {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
}

.miles-booked__review blockquote::before { content: "\201C"; }
.miles-booked__review blockquote::after  { content: "\201D"; }

.miles-booked__review figcaption {
  margin-top: 10px;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- confirmation ---- */

.miles-booked__done-lead {
  margin: 0 0 22px;
  max-width: 30ch;
  color: var(--color-text) !important;
  font-size: 27px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.miles-booked__done-note {
  margin: 0 0 12px;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
}

.miles-booked__done-actions {
  display: flex;
  margin-top: 20px;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.miles-booked__done-cal,
.miles-booked__done-mine {
  display: inline-flex;
  min-height: 46px;
  padding: 12px 20px;
  align-items: center;
  color: var(--color-brand-dark);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(44, 95, 90, 0.28);
  border-radius: 999px;
}

.miles-booked__done-cal:hover,
.miles-booked__done-mine:hover { background: var(--color-sage-soft); }

.miles-booked__done-call {
  margin: 18px 0 0;
  color: var(--color-text);
  font-size: 13px;
}

/* ---- accreditation marks ---- */

.miles-marks {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 40rem;
}

.miles-marks__mark {
  width: auto;
  height: 46px;
  object-fit: contain;
  border-radius: 8px;
}

.miles-marks__mark--yfz { height: 54px; border-radius: 50%; }
.miles-marks__mark--gphc { height: 38px; }

.miles-marks--footer {
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
  max-width: none;
  gap: 12px;
}

.miles-marks--footer .miles-marks__mark { height: 38px; }
.miles-marks--footer .miles-marks__mark--yfz { height: 44px; }

@media (max-width: 640px) {
  .miles-marks { margin-top: 26px; padding-top: 20px; gap: 12px; }
  .miles-marks__mark { height: 40px; }
  .miles-marks__mark--yfz { height: 46px; }
}

/* ---------------------------------------------------------------------------
 * Routing question options: one size.
 *
 * An answer carrying a line of explanation is taller than a bare one, so
 * "Myself" sat short beside "Someone else". Widths come free from the grid;
 * heights do not - grid-auto-rows: 1fr makes every row as tall as its tallest
 * cell, and the label and its span then have to be told to fill that cell or
 * they keep sizing to their own content and the equalised row does nothing.
 *
 * (Restored: this was reverted when theme-fixes.css was rewritten.)
 * ------------------------------------------------------------------------- */

.miles-triage-step__choices {
  grid-auto-rows: 1fr;
}

.miles-triage-step__choices label {
  height: 100%;
}

.miles-triage-step__choices label > span {
  min-height: 76px;
  height: 100%;
}

/* ---------------------------------------------------------------------------
 * 21. Getting here
 *
 * The map and the index beside it, on the home page in short and on the
 * Visit page in full. The map is the site's own: OpenStreetMap data drawn in
 * the palette, the pins evergreen with a white halo so they hold against the
 * ivory streets and sage parks, the numbers matching the rows. Before the
 * engine loads, and wherever it cannot, the same map is a still with the
 * same pins on it, so the section never shows an empty box. Rows are the
 * questions' rows: a fine hairline, the place in the display cut, a plus
 * that becomes a cross, the facts beneath in the full text colour. Gestures
 * on the map are cooperative, so scrolling the page never scrolls the map.
 * ------------------------------------------------------------------------ */

.miles-here {
  margin: 0;
  padding: 112px 0 !important;          /* theme.css pads every section */
  background: var(--color-background, #faf7f2);
}

.miles-here--compact { padding: 104px 0 120px !important; }

/* The head: statement left, the address card right. */

.miles-here__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.7fr);
  gap: 36px 80px;
  align-items: end;
  margin-bottom: 44px;
}

.miles-here__eyebrow {
  margin: 0 0 14px;
  color: var(--color-brand, #2c5f5a) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.miles-here__head h2,
.miles-hours-section__intro h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}

.miles-here__lead {
  max-width: 44ch;
  margin: 18px 0 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 1.55;
}

/* The card is the pharmacy's address written out properly: the name in the
   display cut, the street beneath it, the postcode set apart in tabular
   figures, then a hairline, today's state, and one clear action with the
   other two as quiet links. Three pills of equal weight competed. */

.miles-here__card {
  padding: 30px 32px 28px;
  background: #fff;
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 1px rgba(26, 46, 42, 0.10),
    0 30px 70px -46px rgba(26, 46, 42, 0.55);
}

.miles-here__address {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: 1.55;
}

.miles-here__address strong {
  display: block;
  margin-bottom: 12px;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 27px;
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.miles-here__street { display: block; }

.miles-here__postcode {
  display: block;
  margin-top: 8px;
  color: var(--color-brand-dark, #204944);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.07em;
}

/* Today, and what to do about it. */

.miles-here__act {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 46, 42, 0.10);
}

.miles-here__act .miles-here__status { margin-bottom: 16px; }

.miles-here__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 16px 0 0;
  font-family: "Inter", sans-serif;
}

.miles-here__alt a {
  color: var(--color-brand-dark, #204944) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
}

.miles-here__alt a:hover { text-decoration: underline !important; text-underline-offset: 3px; }

.miles-here__alt .miles-here__tel {
  margin-left: auto;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Today, from the same source as the announcement bar, corrected in the browser. */

/* The hours clock (miles_hours_clock): its hands show the time the words
   beside it name, the opening time while closed and the closing time while
   open. It replaced a green, amber or red dot. Drawn in the words' own
   colour, centred on their capitals when it sits in a line of text; the
   words carry the state. Inline, against tailwind.css's reset, which makes
   every svg a block: that stood the clock on a line of its own above the
   words wherever they are not a flex row. */
.miles-clock {
  display: inline-block;
  flex: none;
  width: 1.125em;
  height: 1.125em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  vertical-align: -0.2em;
}

.miles-clock__face { stroke-width: 1.3; }
.miles-clock__hour { stroke-width: 1.7; }
.miles-clock__minute { stroke-width: 1.3; }
.miles-clock[data-at=""] { display: none; }

.miles-here__status,
.miles-hours__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--color-brand-dark, #204944);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.miles-here__status:has(.miles-hours-text:empty) { display: none; }

.miles-here__go {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.miles-here__act .miles-here__button {
  width: 100%;
  min-height: 50px;
  justify-content: center;
  font-size: 15px;
}

.miles-here__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--color-brand, #2c5f5a);
  border-radius: 999px;
  background: var(--color-brand, #2c5f5a);
  color: #fff !important;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.miles-here__button:hover,
.miles-here__button:focus-visible {
  background: var(--color-brand-dark, #204944);
  border-color: var(--color-brand-dark, #204944);
}

.miles-here__button--quiet {
  background: var(--color-sage-soft, #edf2ed);
  border-color: rgba(44, 95, 90, 0.16);
  color: var(--color-brand-dark, #204944) !important;
}

.miles-here__button--quiet:hover,
.miles-here__button--quiet:focus-visible {
  background: var(--color-sage, #dce7df);
  border-color: rgba(44, 95, 90, 0.3);
  color: var(--color-brand-dark, #204944) !important;
}

.miles-here__button span,
.miles-here__more span,
.miles-here__actions a span,
.miles-here__external span,
.miles-here__mini-label span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.miles-here__button:hover span,
.miles-here__more:hover span,
.miles-here__actions a:hover span,
.miles-here__mini:hover .miles-here__mini-label span { transform: translateX(4px); }

.miles-here__external:hover span { transform: translate(2px, -2px); }

/* The map and the index. */

.miles-here__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.85fr);
  gap: 40px 56px;
  align-items: start;
}

.miles-here__map {
  position: sticky;
  top: 24px;
  margin: 0;
}

.miles-here--compact .miles-here__map { position: static; }

.miles-here__frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(26, 46, 42, 0.14);
  border-radius: 24px;
  background: var(--color-background, #faf7f2);
  box-shadow: 0 36px 80px -44px rgba(26, 46, 42, 0.45);
}

/* The still: on top until the live map has drawn, then it fades over the same picture. */

.miles-here__still {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  transition: opacity 0.7s ease;
}

.miles-here__still picture,
.miles-here__still img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miles-here__live {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.miles-here__map.is-live .miles-here__still {
  opacity: 0;
  pointer-events: none;
}

.miles-here__map.is-failed .miles-here__live { display: none; }

/* The pins: evergreen head, white halo, the number inside. The still positions
   them with --x/--y (4:3) and --xt/--yt (1:1); on the live map MapLibre does. */

.miles-pin {
  position: absolute;
  isolation: isolate;
  display: flex;
  justify-content: center;
  width: 30px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 30px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
  transform-origin: 50% 100%;
}

.miles-here__still .miles-pin {
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%);
  cursor: default;
}

.miles-pin::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-brand-dark, #204944);
  box-shadow: 0 0 0 2.5px #fff, 0 8px 18px -6px rgba(26, 46, 42, 0.55);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.miles-pin::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 24px;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--color-brand-dark, #204944);
  box-shadow: 2.5px 2.5px 0 0 #fff;
  transform: translateX(-50%) rotate(45deg);
  transition: background-color 0.2s ease;
}

.miles-pin--entrance {
  width: 38px;
  height: 48px;
  line-height: 38px;
}

.miles-pin--entrance::before {
  width: 38px;
  height: 38px;
  background: var(--color-brand, #2c5f5a);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(44, 95, 90, 0.35), 0 10px 22px -6px rgba(26, 46, 42, 0.55);
}

.miles-pin--entrance::after {
  top: 31px;
  width: 13px;
  height: 13px;
  background: var(--color-brand, #2c5f5a);
}

/* The green cross of a pharmacy, in white. */
.miles-pin--entrance i,
.miles-here__item--door .miles-here__num i {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  margin: 11px auto 0;
}

.miles-here__item--door .miles-here__num i {
  width: 12px;
  height: 12px;
  margin: 0;
}

.miles-pin--entrance i::before,
.miles-pin--entrance i::after,
.miles-here__item--door .miles-here__num i::before,
.miles-here__item--door .miles-here__num i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 4px;
  border-radius: 1px;
  background: #fff;
  transform: translate(-50%, -50%);
}

.miles-pin--entrance i::after,
.miles-here__item--door .miles-here__num i::after { transform: translate(-50%, -50%) rotate(90deg); }

.miles-here__item--door .miles-here__num i::before,
.miles-here__item--door .miles-here__num i::after { height: 3px; }

.maplibregl-marker.miles-pin:hover,
.miles-pin.is-hint,
.miles-pin.is-active { transform: scale(1.12); z-index: 5; }

.miles-pin.is-active::before {
  background: #fff;
  box-shadow: 0 0 0 2.5px var(--color-brand-dark, #204944), 0 8px 18px -6px rgba(26, 46, 42, 0.55);
}

.miles-pin.is-active::after {
  background: #fff;
  box-shadow: 2.5px 2.5px 0 0 var(--color-brand-dark, #204944);
}

.miles-pin.is-active { color: var(--color-brand-dark, #204944); }

.miles-pin--entrance.is-active i::before,
.miles-pin--entrance.is-active i::after { background: var(--color-brand, #2c5f5a); }

.miles-pin.is-muted { opacity: 0.32; }

/* A street or area name, set small in the palette with an ivory halo. */

.miles-label {
  position: absolute;
  color: var(--color-brand-dark, #204944);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 3px #faf7f2, 0 0 6px #faf7f2, 0 0 10px #faf7f2;
  pointer-events: none;
}

.miles-here__still .miles-label {
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
}

/* On phones the still is the square picture, with its own positions. */

@media (max-width: 767px) {
  .miles-here__frame { aspect-ratio: 1 / 1; border-radius: 18px; }
  .miles-here__still .miles-pin,
  .miles-here__still .miles-label { left: var(--xt); top: var(--yt); }
  .miles-here__still .miles-pin--wide-only,
  .miles-here__still .miles-label.miles-pin--wide-only { display: none; }
}

@media (min-width: 768px) {
  .miles-here__still .miles-pin--tall-only { display: none; }
}

.miles-here__more span { margin-left: 6px; }

/* Controls: zoom and "show everything", over the map once it is live. */

.miles-here__controls {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.miles-here__controls[hidden] { display: none; }

.miles-here__ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(26, 46, 42, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-brand-dark, #204944);
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 6px 16px -8px rgba(26, 46, 42, 0.5);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.miles-here__ctrl--home { margin-top: 6px; }

.miles-here__ctrl:hover,
.miles-here__ctrl:focus-visible {
  background: var(--color-brand-dark, #204944);
  border-color: var(--color-brand-dark, #204944);
  color: #fff;
}

.miles-here__ctrl:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 2px;
}

/* Attribution and the way out to Google, in every state. */

.miles-here__attribution {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 10px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(250, 247, 242, 0.88);
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.miles-here__attribution a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.miles-here__external {
  position: absolute;
  z-index: 4;
  bottom: 12px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(26, 46, 42, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-brand-dark, #204944) !important;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: 0 6px 16px -8px rgba(26, 46, 42, 0.5);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.miles-here__external:hover,
.miles-here__external:focus-visible {
  background: var(--color-brand-dark, #204944);
  color: #fff !important;
}

/* The engine's own pieces: only what is used. Its stylesheet is not loaded. */

.maplibregl-map {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font: inherit;
}

.maplibregl-canvas-container,
.maplibregl-canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
.maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }

.maplibregl-canvas { outline: none; }

.maplibregl-marker {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.maplibregl-cooperative-gesture-screen {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 42, 38, 0.55);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease 1s;
}

.maplibregl-cooperative-gesture-screen.maplibregl-show {
  opacity: 1;
  transition: opacity 0.05s;
}

.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message { display: none; }

@media (hover: none), (pointer: coarse) {
  .maplibregl-cooperative-gesture-screen .maplibregl-desktop-message { display: none; }
  .maplibregl-cooperative-gesture-screen .maplibregl-mobile-message { display: block; }
}

/* The index. */

.miles-here__index { min-width: 0; }

.miles-here__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.miles-here__mode {
  min-height: 36px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid rgba(26, 46, 42, 0.2);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.miles-here__mode:hover { background: var(--color-sage-soft, #edf2ed); }

.miles-here__mode.is-on {
  background: var(--color-brand-dark, #204944);
  border-color: var(--color-brand-dark, #204944);
  color: #fff;
}

.miles-here__mode:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 2px;
}

.miles-here__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(26, 46, 42, 0.14);
}

.miles-here__item {
  position: relative;
  margin: 0;
  padding: 0;
}

.miles-here__item[hidden] { display: none; }

.miles-here__item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(26, 46, 42, 0.14);
  transform-origin: left center;
}

.miles-here__q { margin: 0; }

.miles-here__trigger {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 36px;
  gap: 4px 16px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 18px 0 17px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  text-align: left;
  cursor: pointer;
}

.miles-here__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-brand-dark, #204944);
  color: #fff !important;                       /* theme.css styles every child of a heading */
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1 !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.miles-here__item--door .miles-here__num { background: var(--color-brand, #2c5f5a); }

.miles-here__trigger:hover .miles-here__num { transform: scale(1.1); }

.miles-here__name {
  color: var(--color-text, #1a2e2a) !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-size: clamp(20px, 1.7vw, 24px) !important;
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-wrap: pretty;
  transition: color 0.2s ease;
}

.miles-here__trigger:hover .miles-here__name { color: var(--color-brand-dark, #204944) !important; }

.miles-here__meta {
  color: var(--color-brand, #2c5f5a) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap;
}

.miles-here__meta span { font: inherit !important; color: inherit !important; }

.miles-here__mark {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(26, 46, 42, 0.22);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.miles-here__mark::before,
.miles-here__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--color-brand-dark, #204944);
  transform: translate(-50%, -50%);
  transition: background-color 0.25s ease;
}

.miles-here__mark::after { transform: translate(-50%, -50%) rotate(90deg); }

.miles-here__trigger:hover .miles-here__mark { background: var(--color-sage-soft, #edf2ed); }

.miles-here__item[data-open="1"] .miles-here__mark {
  border-color: var(--color-brand-dark, #204944);
  background: var(--color-brand-dark, #204944);
  transform: rotate(45deg);
}

.miles-here__item[data-open="1"] .miles-here__mark::before,
.miles-here__item[data-open="1"] .miles-here__mark::after { background: #fff; }

.miles-here__trigger:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 4px;
  border-radius: 6px;
}

/* The place itself. Open by default; collapsed and animated once the page has JS. */

.miles-here__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.miles-here__panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 0 26px 46px;
}

.miles-js .miles-here__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.45s;
}

.miles-js .miles-here__item[data-open="1"] .miles-here__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}

.miles-js .miles-here__panel-inner > * {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.miles-js .miles-here__item[data-open="1"] .miles-here__panel-inner > * {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

.miles-here__panel-inner > * {
  font-family: "Inter", sans-serif;
  color: var(--color-text, #1a2e2a);
}

.miles-here__summary {
  max-width: 52ch;
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.5;
}

.miles-here__facts {
  display: grid;
  gap: 7px;
  max-width: 52ch;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
}

.miles-here__facts li { margin: 0; padding: 0; }

.miles-here__facts li span,
.miles-here__line span {
  margin-right: 6px;
  color: var(--color-brand-dark, #204944);
  font-weight: 600;
}

.miles-here__facts li span::after,
.miles-here__line span::after { content: ":"; }

.miles-here__line {
  max-width: 52ch;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
}

.miles-here__pitfall {
  max-width: 52ch;
  margin: 4px 0 14px;
  padding: 13px 16px 14px;
  border-radius: 12px;
  background: var(--color-sage-soft, #edf2ed);
  font-size: 15px;
  line-height: 1.5;
}

.miles-here__pitfall span {
  display: block;
  margin-bottom: 3px;
  color: var(--color-brand, #2c5f5a);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.miles-here__photo {
  max-width: 52ch;
  margin: 6px 0 16px;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 3 / 2;
}

.miles-here__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miles-here__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.miles-here__actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-brand-dark, #204944);
  text-decoration: none;
}

.miles-here__actions a:hover { text-decoration: underline; text-underline-offset: 3px; }

.miles-here__checked {
  margin: 12px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 13px;
  line-height: 1.5;
}

.miles-here__checked a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Nothing entered yet: say so, plainly. */

.miles-here__empty p {
  max-width: 52ch;
  margin: 0;
  padding: 22px 24px;
  border: 1px dashed rgba(26, 46, 42, 0.28);
  border-radius: 16px;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.miles-here__more {
  display: inline-block;
  max-width: 100%;
  margin-top: 22px;
  color: var(--color-brand-dark, #204944);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.miles-here__more:hover { text-decoration: underline; text-underline-offset: 3px; }

.miles-here__arrival {
  margin: 24px 0 0;
  padding: 15px 18px;
  border: 1px solid rgba(26, 46, 42, 0.12);
  border-left: 3px solid var(--color-brand, #2c5f5a);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.miles-here__arrival[hidden] { display: none; }

/* The code that sends the page to your phone. Not on a phone. */

.miles-here__send {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid rgba(26, 46, 42, 0.12);
  border-radius: 16px;
  background: #fff;
}

.miles-here__send[hidden] { display: none; }

.miles-here__qr svg {
  display: block;
  width: 96px;
  height: 96px;
}

.miles-here__send-title {
  margin: 0 0 4px;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.miles-here__send p {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.miles-here__note {
  max-width: 62ch;
  margin: 40px 0 0;
  color: var(--color-text-soft, #536762);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

/* The service pages' box: the still, linking to the Visit page. */

.miles-here__mini {
  display: block;
  color: inherit;
  text-decoration: none !important;
}

.miles-here__mini-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  background: var(--color-background, #faf7f2);
}

.miles-here__mini-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 4px 4px;
  color: var(--color-brand-dark, #204944);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.service-location-map:has(.miles-here__mini) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

/* Opening hours: the table, and the band it sits on. */

.miles-hours-section {
  margin: 0;
  padding: 96px 0 !important;
  background: var(--color-sage-soft, #edf2ed);
}

.miles-hours-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: 40px 80px;
  align-items: start;
}

.miles-hours-section__intro .miles-here__lead { margin-top: 18px; }

.miles-hours-section__note {
  max-width: 44ch;
  margin: 22px 0 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.miles-hours-section__note strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-brand-dark, #204944);
  font-weight: 600;
}

.miles-hours--card {
  padding: 24px 28px 26px;
  border: 1px solid rgba(26, 46, 42, 0.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px -30px rgba(26, 46, 42, 0.35);
}

.miles-hours__status { margin-bottom: 12px; }

.miles-hours__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
}

.miles-hours__table caption {
  padding: 0 0 12px;
  color: var(--color-text-soft, #536762);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.miles-hours__table th,
.miles-hours__table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(26, 46, 42, 0.1);
  color: var(--color-text, #1a2e2a);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  vertical-align: baseline;
}

.miles-hours__table th { font-weight: 600; }
.miles-hours__table td { text-align: right; }

.miles-hours__table tr:last-child th,
.miles-hours__table tr:last-child td { border-bottom: 0; }

.miles-hours__table tr.is-today th,
.miles-hours__table tr.is-today td {
  color: var(--color-brand-dark, #204944);
  font-weight: 700;
}

.miles-hours__table tr.is-today th::after {
  content: "Today";
  margin-left: 10px;
  padding: 2px 8px 3px;
  border-radius: 999px;
  background: var(--color-sage, #dce7df);
  color: var(--color-brand-dark, #204944);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* The Visit page's hero summary carries the week, and the two contact cards. */

.miles-visit__hours li { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; padding-left: 18px; font-size: 14px !important; }
.miles-visit__hours li::before { top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-sage, #dce7df); content: ""; }
.miles-visit__hours li span { color: #fff; font-variant-numeric: tabular-nums; }
.miles-visit__hours .miles-visit__today { display: flex; align-items: center; gap: 9px; color: #fff !important; font-size: 13px; font-weight: 600; }

.miles-visit__contact { background: var(--color-background, #faf7f2) !important; }

.miles-visit__cards {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: start;
}

.miles-visit__cards .epsom-guide-clinic__card { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: clamp(32px, 4vw, 44px); }
.miles-visit__cards .epsom-guide-clinic__card h3 { margin: 0 0 12px; font-size: clamp(28px, 2.6vw, 36px); font-weight: 500 !important; font-optical-sizing: auto; letter-spacing: -0.03em !important; line-height: 1.08 !important; }

/* Entrances. */

@media (prefers-reduced-motion: no-preference) {
  .miles-here__head.is-armed,
  .miles-here__map.is-armed { opacity: 0; transform: translateY(16px); }
  .miles-here__head.is-revealed,
  .miles-here__map.is-revealed { animation: miles-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .miles-here__map.is-revealed { animation-delay: 120ms; }

  .miles-here__list.is-armed > .miles-here__item { opacity: 0; transform: translateY(16px); }
  .miles-here__list.is-armed > .miles-here__item::before { transform: scaleX(0); }
  .miles-here__list.is-revealed > .miles-here__item {
    animation: miles-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 200ms);
  }
  .miles-here__list.is-revealed > .miles-here__item::before {
    animation: miles-draw-x 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 320ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .miles-here__still,
  .miles-pin,
  .miles-here__mark,
  .miles-here__num { transition: none; }
}

/* Widths. */

@media (max-width: 1100px) {
  .miles-here__layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .miles-here__map { position: static; }
  .miles-here__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .miles-hours-section__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .miles-visit__cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .miles-here { padding: 72px 0 !important; }
  .miles-here--compact { padding: 72px 0 80px !important; }
  .miles-here__head { gap: 24px; margin-bottom: 28px; }
  .miles-here__lead { font-size: 17px; }
  .miles-here__card { padding: 20px 20px 22px; border-radius: 16px; }
  .miles-here__address strong { font-size: 22px; }
  .miles-here__trigger { grid-template-columns: 28px minmax(0, 1fr) 32px; gap: 2px 12px; padding: 16px 0 15px; }
  .miles-here__num { width: 28px; height: 28px; font-size: 12px !important; }
  .miles-here__meta { grid-column: 2; grid-row: 2; }
  .miles-here__mark { grid-column: 3; grid-row: 1; width: 32px; height: 32px; }
  .miles-here__panel-inner { padding-left: 0; }
  .miles-here__send { display: none !important; }
  .miles-here__controls { top: 10px; right: 10px; }
  .miles-here__ctrl { width: 36px; height: 36px; }
  .miles-here__external { bottom: 10px; left: 10px; padding: 7px 12px; font-size: 12px; }
  .miles-here__attribution { right: 8px; bottom: 44px; font-size: 10px; }
  .miles-hours-section { padding: 64px 0 !important; }
  .miles-hours--card { padding: 18px 20px 20px; }
  .miles-hours__table th, .miles-hours__table td { font-size: 14px; }
  .miles-hours__table tr.is-today th::after { display: none; }
}

@media (forced-colors: active) {
  .miles-pin::before, .miles-pin::after, .miles-here__num { background: CanvasText; }
  .miles-here__mode.is-on { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ---------------------------------------------------------------------------
 * 22. Ready when you are
 *
 * The last block of the home page before Getting here was a white card from
 * the old kit: a heading, a line of copy and a pill that scrolled the reader
 * back to the top of the page to find the booking form. Now it is the hero's
 * bookend: a full-bleed evergreen band with the statement in the display
 * face, the facts that matter set small, the phone in the serif, and the
 * hero's own booking start in a white card beside it, so the appointment
 * begins where the reader is standing. The rule draws in and the card rises
 * as the band comes into view. Body copy on the dark ground is 14px or more
 * at weight 500 or more, never at reduced alpha.
 * ------------------------------------------------------------------------ */

.miles-ready {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 calc(-1 * var(--miles-gutter, 24px));
  padding: 112px var(--miles-gutter, 24px) 120px !important;   /* theme.css pads every section */
  color: #fff;
  background:
    radial-gradient(circle at 10% 12%, rgba(220, 231, 223, 0.10), transparent 32%),
    radial-gradient(circle at 92% 90%, rgba(232, 115, 74, 0.08), transparent 26%),
    linear-gradient(160deg, #1f4a44 0%, #1b3b36 52%, #163430 100%);
}

/* The ring, as the footer and the reviews carry it. */
.miles-ready::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -420px;
  left: -300px;
  width: 940px;
  height: 940px;
  border: 1px solid rgba(220, 231, 223, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 120px rgba(220, 231, 223, 0.025),
    0 0 0 240px rgba(220, 231, 223, 0.014);
  pointer-events: none;
}

/* The journey's own bottom padding would stack on Getting here's top. */
.home-journey:has(.miles-ready) { padding-bottom: 0 !important; }

.miles-ready__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 440px);
  gap: 48px 96px;
  align-items: center;
}

.miles-ready__eyebrow {
  margin: 0 0 18px;
  color: var(--color-sage, #dce7df) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.miles-ready__statement {
  max-width: 11ch;
  margin: 0 0 24px;
  color: #fff !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-size: clamp(46px, 5.6vw, 80px) !important;
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

/* A sage rule that draws in beneath the statement. */
.miles-ready__statement::after {
  content: "";
  display: block;
  width: 112px;
  height: 2px;
  margin-top: 28px;
  background: linear-gradient(90deg, rgba(220, 231, 223, 0.9), rgba(220, 231, 223, 0.15));
  transform-origin: left center;
}

.miles-ready__lead {
  max-width: 36ch;
  margin: 0 0 30px;
  color: #fff !important;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
}

.miles-ready__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.miles-ready__facts li {
  position: relative;
  margin: 0;
  padding-left: 16px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.miles-ready__facts li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sage, #dce7df);
}

.miles-ready__facts li span { font-variant-numeric: tabular-nums; }

.miles-ready__facts .miles-ready__hours { padding-left: 0; }
.miles-ready__facts .miles-ready__hours::before { content: none; }
.miles-ready__facts .miles-ready__hours .miles-clock { margin-right: 8px; }
.miles-ready__facts .miles-ready__hours:has(.miles-hours-text:empty) { display: none; }

.miles-ready__call {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0;
  color: var(--color-sage, #dce7df) !important;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.miles-ready__call a {
  color: #fff !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.miles-ready__call a:hover { color: var(--color-sage, #dce7df) !important; }

/* The card: the hero's booking start, on white. Field rules come from
   theme.css's .home-booking-start; only the sizes step up here. */

.miles-ready__card {
  position: relative;
  padding: 32px 34px 30px;
  border-radius: 24px;
  background: #fff;
  color: var(--color-text, #1a2e2a);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 50px 110px -46px rgba(0, 0, 0, 0.6);
}

.miles-ready__label {
  margin: 0 0 14px !important;
  color: var(--color-brand, #2c5f5a) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.miles-ready__card label {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.miles-ready__card select,
.miles-ready__card input {
  min-height: 54px;
  font-size: 15px;
  font-weight: 500;
}

.miles-ready__card button {
  min-height: 56px;
  margin-top: 12px;
  font-size: 15px;
  background: var(--color-cta, #e8734a);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.miles-ready__card button:hover {
  background: #d9673f;
  border-color: #d9673f;
}

.miles-ready__card button:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 3px;
}

.miles-ready__card p:last-child {
  margin: 10px 2px 0;
  color: var(--color-text, #1a2e2a) !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* Entrances. */

@media (prefers-reduced-motion: no-preference) {
  .miles-ready__copy.is-armed,
  .miles-ready__card.is-armed { opacity: 0; transform: translateY(18px); }
  .miles-ready__copy.is-armed .miles-ready__statement::after { transform: scaleX(0); }
  .miles-ready__copy.is-revealed { animation: miles-rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .miles-ready__copy.is-revealed .miles-ready__statement::after { animation: miles-draw-x 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.35s forwards; }
  .miles-ready__card.is-revealed { animation: miles-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s forwards; }
}

/* Widths. */

@media (max-width: 1023px) {
  .miles-ready__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .miles-ready__card { max-width: 560px; }
  .miles-ready__statement { max-width: 14ch; }
}

@media (max-width: 767px) {
  .miles-ready { padding: 80px var(--miles-gutter, 18px) 88px !important; }
  .miles-ready__inner { gap: 36px; }
  .miles-ready__statement { font-size: clamp(42px, 12vw, 56px) !important; margin-bottom: 20px; }
  .miles-ready__statement::after { width: 88px; margin-top: 22px; }
  .miles-ready__lead { font-size: 17px; margin-bottom: 24px; }
  .miles-ready__facts { gap: 8px 20px; margin-bottom: 26px; }
  .miles-ready__facts li { white-space: normal; }
  .miles-ready__call a { font-size: 26px; }
  .miles-ready__card { max-width: none; padding: 24px 22px 22px; border-radius: 20px; }
  .miles-ready__card button { width: 100%; }
}

@media (forced-colors: active) {
  .miles-ready__statement::after,
  .miles-ready__facts li::before { background: CanvasText; }
}

 * Routing questions: the same column width on every question.
 *
 * auto-fit collapses tracks it has no items for and shares the space between
 * the rest, so a three-answer question laid out at 292px a column and a
 * two-answer one at 444px. The boxes changed size as you moved through the
 * questions, which read as the layout shifting under you.
 *
 * auto-fill keeps the empty tracks, so the column width is set by the
 * container rather than by how many answers a question happens to have.
 * ------------------------------------------------------------------------- */

.miles-triage-step__choices {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* A two-answer question then leaves a gap on the right rather than stretching
   into it; that is the point, but the row should not look half-empty either. */
@media (max-width: 900px) {
  .miles-triage-step__choices {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * Mobile menu
 *
 * A menu built for a phone, not the desktop mega menu slid sideways. It is
 * rendered as a direct child of <body> (inc/mobile-nav.php), so the header's
 * backdrop-filter cannot make itself the containing block for it, and its own
 * script owns the hamburger outright.
 *
 * The old drawer and its scrim are hidden below 768px rather than deleted:
 * the desktop navigation still needs that element, and it is the same markup.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .site-nav--unified > div > div:nth-child(2),
  .site-navigation-backdrop {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .mnav { display: none !important; }
}

/* ---------------------------------------------------------------------------
 * The header on a phone (inc/mobile-header.php)
 *
 * One evergreen object below 768px, as the phone headers Drew pointed to
 * have it: the season's line as a sage strip; the bar, with the menu on the
 * left, the name in the middle and today's hours under it as the shop's own
 * sign carries them, and the call on the right; then the search box across
 * the width. It replaced three layers (the announcement bar's two rows and
 * the ivory header), whose phone button sat wherever the hours text ended
 * and whose round buttons rested on a hairline: "a bit AI-generated and a
 * bit out of whack". The announcement bar and the desktop row stand down
 * here and are untouched above it.
 * ------------------------------------------------------------------------- */

.miles-mhead { display: none; }

@media (max-width: 767px) {
  .miles-announce { display: none !important; }

  /* The site's own header, and only it: section headings are <header>s too.
     Child selectors rather than :has(), which a phone still on iOS 15.3 or
     an old Firefox ignores and would show the desktop row under this one. */
  body > header:not([class*="__"]),
  body > div > header:not([class*="__"]) {
    padding-top: 0 !important;
    background: var(--color-brand-dark, #204944) !important;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  header > .site-nav--unified { display: none !important; }

  .miles-mhead {
    display: block;
    color: #ffffff;
    background: var(--color-brand-dark, #204944);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* The site styles bare links with an underline reveal; the header opts out. */
  .miles-mhead a::before,
  .miles-mhead a::after { content: none !important; }

  .miles-mhead__season {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 16px;
    color: var(--color-brand-dark, #204944) !important;
    background: var(--color-sage, #dce7df);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.3;
    text-decoration: none;
  }

  .miles-mhead__season-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .miles-mhead__season-icon,
  .miles-mhead__season-go { flex: none; display: block; }
  /* The strip holds the line's actions side by side ("Book a flu jab", "Book a COVID jab"), each with its own arrow, a hairline between. */
  .miles-mhead__seasons { display: flex; align-items: center; justify-content: center; min-width: 0; background: var(--color-sage, #dce7df); }
  .miles-mhead__seasons .miles-mhead__season { min-width: 0; padding: 6px 10px; }
  .miles-mhead__seasons .miles-mhead__season:first-child { padding-left: 16px; }
  .miles-mhead__seasons .miles-mhead__season:last-child { padding-right: 16px; }
  .miles-mhead__season-sep { flex: none; width: 1px; height: 16px; background: rgba(32, 73, 68, 0.28); }

  /* The name sits in the middle of the screen, not the middle of what is
     left: two equal side columns, whatever each holds. */
  .miles-mhead__bar {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    column-gap: 8px;
    min-height: 64px;
    padding: 7px 8px 5px;
  }

  .miles-mhead__menu,
  .miles-mhead__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    color: #ffffff !important;
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .miles-mhead__menu:active,
  .miles-mhead__call:active { background: rgba(255, 255, 255, 0.12); }

  .miles-mhead__menu:focus-visible,
  .miles-mhead__call:focus-visible,
  .miles-mhead__home:focus-visible,
  .miles-mhead__season:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px;
  }

  .miles-mhead__season:focus-visible { outline-color: var(--color-brand-dark, #204944) !important; outline-offset: -4px; }

  .miles-mhead__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  .miles-mhead__home { display: inline-flex; border-radius: 8px; text-decoration: none; }

  .miles-mhead__hours {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.2;
    white-space: nowrap;
  }

  .miles-mhead__hours .miles-hours-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .miles-mhead__hours .miles-clock { margin-right: 6px; }

  .miles-mhead .miles-search--bar { margin: 0 16px; padding: 0 0 12px; }
  .miles-mhead .miles-search--bar .miles-search__panel { top: calc(100% - 6px); }
}

@media (forced-colors: active) {
  .miles-mhead { border-bottom: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
 * The search on a desktop: a button before Book appointment that opens the
 * search box in an evergreen band under the header (miles-search.js), the
 * box and suggestions the phone header carries. Without a script the button
 * is a link to the results page. Phones have the box in their own header,
 * so neither shows below 768px.
 * ------------------------------------------------------------------------- */

.site-search-item { display: none; }

@media (max-width: 767px) {
  .site-search-panel { display: none !important; }
}

@media (min-width: 768px) {
  .site-search-item { display: block; margin: 0 10px 0 0; list-style: none; }

  .site-nav li a.site-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--color-brand-dark, #204944) !important;
    border-radius: 12px;
    transition: background-color 0.18s ease;
  }

  .site-nav li a.site-search-toggle::before,
  .site-nav li a.site-search-toggle::after { content: none !important; }

  .site-nav li a.site-search-toggle:hover,
  .site-nav li a.site-search-toggle[aria-expanded="true"] { background: var(--color-sage-soft, #edf2ed); }

  .site-search-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-search-panel {
    position: absolute;
    z-index: 1025;
    top: 100%;
    right: 0;
    left: 0;
    color: #ffffff;
    background: var(--color-brand-dark, #204944);
    box-shadow: 0 18px 40px rgba(16, 38, 35, 0.22);
  }

  .site-search-panel[hidden] { display: none; }

  .site-search-panel__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 24px;
  }

  .miles-search--desk { flex: 1 1 auto; min-width: 0; }

  .site-search-panel__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 -8px 0 0;
    padding: 0;
    color: #ffffff;
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
  }

  .site-search-panel__close:hover { background: rgba(255, 255, 255, 0.12); }
  .site-search-panel__close:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px; }
}

/* The row, made to fit with the search button in it. It is a three-column
   grid whose middle is centred, so when the middle held more than its
   column it spilled both ways: at 820 and 1024 (an iPad either way up) the
   Services button lay over "Pharmacy" and Book appointment over the last
   link, on the live site before the button was added. What gives way, in
   order: Contact, which dials the number the bar above already shows;
   Health Hub below 1180, which the footer carries; and below 1024 the
   links altogether, Services opening the menu that holds them. The name
   steps down too (with the wordmark, below): theme.css set it at 25px
   below 1024, which the wordmark's own 30px rule overrode. Checked at ten
   widths (checks/site-chrome.js). */
@media (min-width: 768px) {
  .site-header-utilities .site-header-utilities__contact { display: none; }
}

@media (min-width: 768px) and (max-width: 1179px) {
  .site-header-utilities .site-header-utilities__hub { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-nav--unified .site-header-utilities { display: none; }
}

/* ---------------------------------------------------------------------------
 * The search box (inc/search.php): a white field and the coral button, the
 * pairing Chemist4U's phone header uses, in the site's own colours; white
 * on the coral is 3.01:1, over the 3:1 an icon needs. 16px type, so a phone
 * does not zoom the page when the field is tapped. The suggestions open
 * under it (miles-search.js).
 * ------------------------------------------------------------------------- */

.miles-search { position: relative; margin: 0; }

.miles-search__label,
.miles-search__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.miles-search__row { display: flex; border-radius: 10px; }

.miles-search__row:focus-within { box-shadow: 0 0 0 3px var(--color-sage, #dce7df); }
.miles-search .miles-search__input:focus,
.miles-search .miles-search__input:focus-visible { outline: none !important; background: #ffffff none !important; box-shadow: none !important; }

/* The browser's own clear button, drawn in the field's colours. */
.miles-search__input::-webkit-search-cancel-button {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 5l8 8M13 5l-8 8' stroke='%23536762' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  -webkit-appearance: none;
  appearance: none;
}

.miles-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 12px;
  color: var(--color-text, #1a2e2a);
  background: #ffffff none;
  border: 0;
  border-radius: 10px 0 0 10px;
  box-shadow: none;
  font: 500 16px/1.2 "Inter", sans-serif;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}

.miles-search__input::placeholder { color: #5b6d68; font-weight: 400; opacity: 1; }

.miles-search__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 48px;
  margin: 0;
  padding: 0;
  color: #ffffff;
  background: var(--color-cta, #e8734a);
  border: 0;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}

.miles-search__go:hover { background: var(--color-cta-hover, #ce5e38); }

.miles-search__panel {
  position: absolute;
  z-index: 1060;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  max-height: min(60vh, 400px);
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--color-text, #1a2e2a);
  text-align: left;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16, 38, 35, 0.28), 0 0 0 1px rgba(26, 46, 42, 0.06);
}

.miles-search__list { margin: 0; padding: 6px 0; list-style: none; }

.miles-search__option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 10px 16px;
  cursor: pointer;
}

.miles-search__option[aria-selected="true"],
.miles-search__option:hover { background: var(--color-sage-soft, #edf2ed); }

.miles-search__kind {
  color: var(--color-brand, #2c5f5a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.miles-search__title { color: var(--color-text, #1a2e2a); font-size: 16px; font-weight: 600; line-height: 1.35; }
.miles-search__hint { color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.35; }

.miles-search__option--all { margin-top: 4px; border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); }
.miles-search__option--all .miles-search__title {
  color: var(--color-brand-dark, #204944);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.miles-search__none { margin: 0; padding: 12px 16px 2px; color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.4; }

/* The results page (search.php): the box again on the evergreen, then the
   matches as rows with hairlines, the directory's form, not cards. */

.miles-search-page__head { padding: 48px 0 40px !important; color: #ffffff; background: var(--color-brand-dark, #204944); }
.miles-search-page__head .health-hub-eyebrow { color: var(--color-sage, #dce7df) !important; }
.miles-search-page .miles-search-page__title { margin: 10px 0 22px; color: #ffffff !important; font-size: clamp(32px, 6vw, 52px); line-height: 1.08; }
.miles-search--page { max-width: 640px; }
.miles-search-page__count { margin: 14px 0 0 !important; color: var(--color-sage, #dce7df); font-size: 16px; }

.miles-search-page__body { padding: 24px 0 88px !important; background: var(--color-background, #faf7f2); }

/* On a phone the header's own box, filled with the words searched, is the
   one to change them in; a second box under it only repeats it. */
@media (max-width: 767px) {
  .miles-search-page__head { padding: 28px 0 26px !important; }
  .miles-search-page .miles-search-page__title { margin-bottom: 0; }
  .miles-search--page { display: none; }
  .miles-search-page__count { margin-top: 10px !important; }
  .miles-search-page__body { padding: 8px 0 64px !important; }
}
.miles-search-page__list { max-width: 760px; margin: 0; padding: 0; list-style: none; }
.miles-search-page__list > li { margin: 0; }
.miles-search-page__list > li + li { border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); }

.miles-search-page__hit { display: grid; gap: 4px; padding: 18px 0; color: inherit; text-decoration: none; }
.miles-search-page__hit::before,
.miles-search-page__hit::after { content: none !important; }
.miles-search-page__kind { color: var(--color-brand, #2c5f5a); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.miles-search-page__name { color: var(--color-text, #1a2e2a); font-size: 20px; font-weight: 600; line-height: 1.3; }
.miles-search-page__hit:hover .miles-search-page__name,
.miles-search-page__hit:focus-visible .miles-search-page__name { color: var(--color-brand, #2c5f5a); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.miles-search-page__note { color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.5; }

.miles-search-page__none { max-width: 640px; padding-top: 12px; }
.miles-search-page__none h2 { margin: 0 0 12px; font-size: clamp(24px, 4vw, 32px); }
.miles-search-page__none p { font-size: 17px; line-height: 1.6; }
.miles-search-page__ways { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.miles-search-page__ways a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  color: var(--color-brand-dark, #204944);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(44, 95, 90, 0.3);
  border-radius: 999px;
}
.miles-search-page__ways a::before,
.miles-search-page__ways a::after { content: none !important; }
.miles-search-page__ways a:hover { background: var(--color-sage-soft, #edf2ed); }

/* The page behind must not scroll while the menu is over it. */
html.mnav-locked,
html.mnav-locked body {
  overflow: hidden !important;
}

.mnav {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.mnav[hidden] { display: none !important; }

.mnav__scrim {
  position: absolute;
  inset: 0;
  padding: 0;
  background: rgba(18, 48, 43, 0.55);
  border: 0;
  opacity: 0;
  cursor: pointer;
  transition: opacity 240ms ease;
}

.mnav.is-open .mnav__scrim { opacity: 1; }

.mnav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(390px, 92vw);
  background: var(--color-background);
  box-shadow: -24px 0 70px rgba(18, 48, 43, 0.3);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mnav.is-open .mnav__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .mnav__scrim,
  .mnav__panel { transition: none; }
}

.mnav__head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 16px 18px;
  background: var(--color-brand-dark);
}

.mnav__wordmark {
  color: #ffffff;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mnav__wordmark span { color: var(--color-sage); font-weight: 500; }

.mnav__close {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin-right: -8px;
  color: #ffffff;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  place-items: center;
}

/* A plain cross, as the header's menu and call buttons are: the disc behind
   it was the last of the round buttons the header dropped. */
.mnav__close:hover,
.mnav__close:active { background: rgba(255, 255, 255, 0.12); }
.mnav__close:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px; }

.mnav__body {
  flex: 1 1 auto;
  padding: 18px 18px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mnav__primary {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.mnav__cta {
  display: flex;
  min-height: 52px;
  padding: 14px 20px;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-dark);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(44, 95, 90, 0.28);
  border-radius: 999px;
}

.mnav__cta--solid {
  color: #ffffff;
  background: var(--color-cta);
  border-color: var(--color-cta);
}

/* The groups are <section> elements, and the theme gives every section
   108px of vertical padding for page rhythm. Inside a menu that is three
   screens of empty space. */
.mnav__group {
  padding-block: 0 !important;
}

.mnav__group + .mnav__group { margin-top: 0; }

.mnav__group-heading {
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.mnav__group-toggle {
  display: flex;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 14px 4px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.mnav__group-toggle:hover,
.mnav__group-toggle:focus-visible { color: var(--color-brand); }

.mnav__chevron {
  flex: 0 0 auto;
  color: var(--color-brand);
  transition: transform 200ms ease;
}

.mnav__group-toggle[aria-expanded="true"] .mnav__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .mnav__chevron { transition: none; }
}

.mnav__list[hidden] { display: none !important; }

/* The open list is a level down from its heading. */
.mnav__list:not([hidden]) {
  padding: 4px 0 10px 14px;
  border-bottom: 1px solid var(--color-border);
}

.mnav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mnav__list a {
  display: flex;
  gap: 14px;
  min-height: 48px;
  padding: 11px 4px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text) !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.mnav__list a svg { flex: 0 0 auto; color: var(--color-brand); }

/* Pharmacy First's conditions, under it (inc/site-menu.php). */
.mnav__list .mnav__sub a { padding-left: 18px; font-weight: 500; }

.mnav__list a:hover,
.mnav__list a:focus-visible { color: var(--color-brand) !important; }

.mnav__call {
  display: flex;
  gap: 10px;
  min-height: 60px;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  background: var(--color-brand-dark);
}

/* ---------------------------------------------------------------------------
 * 23. Rhythm below the directory
 *
 * From the team down, every block sat on the same left line with the same
 * head (eyebrow and heading left, paragraph right) and the same 128px of
 * air between, so the page stopped varying where it should have been
 * building. The variation now comes from one move rather than two: the map
 * on the home page runs off the grid to the right with the index beside it,
 * the bookend to the care index's photograph at the top of the journey. The
 * team stays on the grid, three portraits of one size with their names in
 * line, which is what the row is for. The gaps settle on one scale: 120
 * between blocks, the head's own 48 beneath it. And the small type that was
 * set in the soft colour goes to the full colour: at 15px and under the
 * softer grey does not hold on ivory.
 *
 * (The team did bleed left for one deploy. A portrait that runs to the edge
 * of the screen has to carry its name back to the grid, and the padding that
 * did it widened the card - a flex item's min-width is auto, so the padding
 * became part of its minimum - which made the first portrait taller than the
 * other two and squeezed its name into a column three words wide. Bleeding
 * the row and aligning the names under it are not compatible; the names win.)
 * ------------------------------------------------------------------------ */

/* One scale of air between the blocks of the journey. The journey opens on
   an evergreen band (the destinations', and since they moved up above the
   booking section, the services directory's), so it has no air of its own
   above it: the 120px that stood here was cream, and between two evergreens
   it read as an empty strip. The Health Hub's section now stands there, on
   cream, with its own. */

.home-journey { padding-top: 0 !important; }
.home-journey .miles-directory { margin-bottom: 120px; }
.home-journey .miles-team { margin-bottom: 120px; }
.home-journey .home-process { margin-bottom: 120px; }
.home-journey .miles-questions { margin-bottom: 120px; }

/* The home page's map, off the grid to the right, the index beside it. */

.miles-here--compact {
  --miles-gutter: max(24px, calc((100vw - 1192px) / 2));
  overflow-x: clip;
}

@media (min-width: 1200px) {
  /* Even columns: the map reads better at a smaller scale than it did filling
     the larger share, and the index gets the width its rows want. */
  .miles-here--compact .miles-here__layout { grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr); gap: 40px 56px; }
  /* The card sits over the map's own column, so the two share a left edge and
     the card closes on the grid line the map then runs past. */
  .miles-here--compact .miles-here__head { grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr); gap: 36px 56px; }
  .miles-here--compact .miles-here__index { order: 1; }
  /* The overhang is capped: past about 1560px the gutter grows without limit,
     and a map that grows with it ends up the size of a poster. */
  .miles-here--compact .miles-here__map { order: 2; margin-right: calc(-1 * min(var(--miles-gutter, 24px), 140px)); }
  .miles-here--compact .miles-here__frame { border-right: 0; border-radius: 24px 0 0 24px; }
  .miles-here--compact .miles-here__controls { right: 24px; }
  .miles-here--compact .miles-here__attribution { right: 24px; }
}

/* Small type in the full colour. */

.miles-here__note { color: var(--color-text, #1a2e2a); font-size: 15px; }
.miles-here__checked { color: var(--color-text, #1a2e2a); }
.miles-hours__table caption { color: var(--color-brand-dark, #204944); }

/* ---------------------------------------------------------------------------
 * 24. The Health Hub, as three photographs
 *
 * The questions immediately above answer in the team's own voice and carry
 * the FAQPage markup, so this block is the route out to the rest of the Hub,
 * not a second set of answers. It reuses the destinations tile (4:3, a foot
 * gradient, the name in the display cut over it) because that treatment is
 * already proven on this page, but it lays the tiles on a three-column grid
 * rather than a scroller: destinations already runs off the right edge higher
 * up, and a second track with gaps in it would read as unfinished. Under
 * 900px, where three columns would be postage stamps, it becomes the same
 * swipe strip the destinations use.
 * ------------------------------------------------------------------------ */

/* theme.css pads every <section> 108px top and bottom (84px on phones) with
   !important, so a section on the journey grid has to opt out the way
   .miles-questions does, or that padding stacks on top of the rhythm margin.
   Missing it here put 228px between the last question and this heading where
   120 was intended, and the same again below the note. */
.miles-hub {
  margin-top: 120px;                       /* the one scale of air, section 23 */
  padding: 0 !important;
}

.miles-hub__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: 30px;
}

.miles-hub__eyebrow {
  margin: 0 0 12px;
  color: var(--color-brand, #2c5f5a) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-hub__head h2 {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}

.miles-hub__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand-dark, #204944);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.miles-hub__link span { display: inline-block; transition: transform 0.2s ease; }
.miles-hub__link:hover span { transform: translateX(4px); }

.miles-hub__link:focus-visible {
  outline: 2px solid var(--color-brand, #2c5f5a);
  outline-offset: 4px;
  border-radius: 4px;
}

.miles-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-hub__tile { margin: 0; padding: 0; min-width: 0; }

.miles-hub__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background: var(--color-brand-dark, #204944);
  border-radius: 18px;
  text-decoration: none;
}

.miles-hub__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Deeper than the destinations gradient: one of these photographs is bright
   at the foot, where the destination shots are all dusk or open grassland. */
.miles-hub__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 43, 39, 0.9) 0%, rgba(16, 43, 39, 0.5) 34%, rgba(16, 43, 39, 0) 68%);
}

.miles-hub__card:hover img,
.miles-hub__card:focus-visible img { transform: scale(1.05); }

.miles-hub__card:focus-visible {
  outline: 2px solid var(--color-brand, #2c5f5a);
  outline-offset: 4px;
}

.miles-hub__caption {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.miles-hub__caption small {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-hub__caption strong {
  color: #ffffff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.miles-hub__note {
  max-width: 62ch;
  margin: 26px 0 0;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.6;
}

/* Three columns become postage stamps before the grid gives out, so the row
   turns into the swipe strip the destinations already use. */
@media (max-width: 900px) {
  .miles-hub__grid {
    display: flex;
    gap: 14px;
    margin-right: calc(-1 * var(--miles-gutter, 18px));
    padding-right: var(--miles-gutter, 18px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .miles-hub__grid::-webkit-scrollbar { display: none; }
  .miles-hub__tile { flex: 0 0 min(78vw, 330px); scroll-snap-align: start; }
}

@media (max-width: 767px) {
  .miles-hub { margin-top: 96px; }
  .miles-hub__head { margin-bottom: 26px; }
  .miles-hub__caption { right: 18px; bottom: 16px; left: 18px; }
  .miles-hub__caption strong { font-size: 26px; }
  .miles-hub__note { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-hub__card img, .miles-hub__link span { transition: none; }
  .miles-hub__card:hover img, .miles-hub__card:focus-visible img { transform: none; }
}

@media (forced-colors: active) {
  .miles-hub__card { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
 * 25. Eyebrows and small print, made readable
 *
 * The eyebrows measured fine and read badly, which is the whole point of this
 * section. Every one of them already clears WCAG AA for small text by a wide
 * margin, and the hardest to read (sage on the evergreen band, 7.88:1) has
 * MORE contrast than the easiest (brand on ivory, 6.80:1). So neither the
 * colour nor the weight was the problem.
 *
 * What was: 0.14em of tracking on 12px is about 1.7px between letters.
 * Uppercase has already discarded the word-shape a reader recognises, and
 * tracking that wide stops the letters grouping into a word at all. The cap
 * height at 12px is only ~8.6px, so there is very little ink to work with.
 * And light-on-dark blooms: strokes visually thicken and counters close, which
 * is why the evergreen eyebrow reads worse than the ivory one despite
 * measuring higher. Going bolder on the dark bands would make it worse, not
 * better, so the weight stays at 700 everywhere.
 *
 * The fix is one spec for the role: 13px, tracking pulled back to 0.105em.
 * Set here as one block rather than edited into twenty-odd scattered rules,
 * several of which carry !important, so the spec lives in one place.
 * ------------------------------------------------------------------------ */

/* The section eyebrow, wherever it appears. */
.home-hero__eyebrow,
.home-section-label,
.health-hub-eyebrow,
.miles-reviews__eyebrow,
.miles-yfvc__label,
.miles-directory__eyebrow,
.miles-directory__group-label,
.miles-team__eyebrow,
.miles-questions__eyebrow,
.miles-questions__topic-heading,
.miles-profile__eyebrow,
.miles-profile__facts dt,
.miles-footer__label,
.miles-here__eyebrow,
.miles-ready__eyebrow,
.miles-ready__label,
.miles-hub__eyebrow,
.miles-prices__eyebrow,
.miles-video__eyebrow,
.miles-guides__eyebrow,
.miles-topics__eyebrow {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.105em !important;
}

/* Boxes too tight to grow into: the mega menu, a footer column head, the
   video dialog, the locations rail and the two photo-less card fallbacks.
   Tracking is a free legibility win here; size would move the layout. */
.site-mega-menu__eyebrow,
.site-nav .site-mega-menu__eyebrow,
.locations-page-content .locations-services__eyebrow,
.health-hub-footer h2,
.health-hub-video-dialog__placeholder,
.home-destination-card__media--fallback small,
.health-hub-destination-card__media--fallback small {
  letter-spacing: 0.105em !important;
}

/* Small print under a section carried three different sizes on one page
   (13, 14 and 15px) for the same job. One size now, at the browser default,
   with a little more leading because these run to two and three lines. */
.miles-here__note,
.miles-hub__note {
  font-size: 16px;
  line-height: 1.65;
}

/* The provenance line under the address card stays a step down: it is a
   caption on the card above it, not a note on the section, and 13 to 16 in
   one jump would have promoted it past the thing it annotates. */
.miles-here__checked { font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------------------
 * 26. The announcement bar, when the pharmacy is closed
 *
 * The bar renders a short string server-side ("Closed today") and the hours
 * script in inc/hours.php then rewrites it to the live one, which when closed
 * runs to "Closed, opens 10:30am Wednesday" at its longest. Nothing in the row
 * could absorb that: the hours paragraph is nowrap with the default
 * min-width:auto so it refuses to shrink, and the phone and account links are
 * both flex:none. The row grew past the viewport and the overflow-x guard on
 * <html> clipped the My bookings button off the right edge. Measured before
 * the fix, worst case: 73px over at 430, 114px over at 360.
 *
 * Three moves, in the order they buy room:
 *  1. The account link becomes a round icon button, as the phone link already
 *     does at 460. Two matched utility buttons, and ~95px back. Its label is
 *     hidden the way "Call" already is, so the accessible name survives.
 *  2. The reopening clause is dropped below 390px, which is where the full
 *     sentence stops fitting even with move 1. Everything from 390 up keeps it.
 *  3. min-width:0 on the hours, so any future string ellipsises inside its own
 *     box rather than shoving the button off the screen again.
 * ------------------------------------------------------------------------ */

@media (max-width: 560px) {
  .miles-announce__hours { min-width: 0; }
  .miles-announce__hours-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .miles-announce__account {
    width: 36px;
    gap: 0;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }

  /* Beats the 400px rule above, which hid the icon and kept the words: the
     words are what cost the room. Same visually-hidden treatment as "Call". */
  .miles-announce__account .miles-announce__icon { display: inline-flex; }

  .miles-announce__account-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 389px) {
  .miles-announce__hours-next { display: none; }
}

/* ---------------------------------------------------------------------------
 * Health Hub: room under the guides disclaimer.
 *
 * The note is the last element in its section and carries no bottom margin,
 * and the section's own bottom padding is 0 - so the line about guides not
 * being a diagnosis sat flush against the appointments band below it, at both
 * desktop and phone widths. A disclaimer reading as the first line of the next
 * section is the wrong thing to be ambiguous about.
 * ------------------------------------------------------------------------- */

.miles-hub__note {
  margin-bottom: 56px;
}

@media (max-width: 640px) {
  .miles-hub__note { margin-bottom: 40px; }
}

/* ---------------------------------------------------------------------------
 * "Choose another date": our calendar, not the browser's.
 *
 * The row used to be a label plus <input type="date">. The browser's own month
 * grid has no idea when the pharmacy is closed or already full, so every day
 * looked selectable. The input is now off screen as the value holder and this
 * button opens a dialog holding the same .miles-cal grid the hero card uses.
 * ------------------------------------------------------------------------- */

.miles-appointment-engine__other-date-btn {
  min-height: 48px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: var(--color-brand-dark, #204944);
  background: #fff;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: var(--radius-control, 999px);
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s;
}

.miles-appointment-engine__other-date-btn:hover {
  background: var(--color-sage-soft, #edf2ed);
  border-color: var(--color-brand, #2c5f5a);
}

.miles-appointment-engine__other-date-btn:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: 2px;
}

/* The input keeps the row's own styling (min-height, padding, border) at a
   higher specificity than .miles-cal__native, so it is silenced here too. */
.miles-appointment-engine__other-date input.miles-cal__native {
  min-height: 0;
  padding: 0;
  border: 0;
}

/* The dialog is narrower than the booking one - it holds a single month. */
.miles-datepicker .miles-modal__panel { width: min(400px, 100%); }

.miles-datepicker .miles-modal__body {
  display: grid;
  gap: 12px;
}

/* Room to read: the hero's calendar is squeezed into a card column, this one
   has the whole dialog. */
.miles-datepicker .miles-cal { padding: 6px; border: 0; }
.miles-datepicker .miles-cal .miles-cal__day { max-height: none; font-size: 14px; }
.miles-datepicker .miles-cal .miles-cal__month { font-size: 15px; }
.miles-datepicker .miles-cal .miles-cal__nav:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.miles-datepicker__key {
  margin: 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--color-text-soft, #536762);
}

@media (max-width: 640px) {
  .miles-appointment-engine__other-date-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * The price table, as a component.
 *
 * There was no table in the design system and every service page was inventing
 * one; the travel page's ran a 10px uppercase header straight through to
 * phones, because its only breakpoint changed padding. This is the one spec:
 * 16px body, 15px header at the eyebrow's weight, index rows with hairlines,
 * no card, no shadow, and the price column set in tabular figures so a column
 * of money lines up.
 *
 * The section prints nothing at all when no row has a real price - see
 * inc/price-table.php - so this never styles an empty table.
 * ------------------------------------------------------------------------- */

/* An !important restatement, because theme.css:131 pads every <section>
   108px with !important and that would stack on the page rhythm. */
.miles-prices {
  padding-block: 60px !important;
  padding-inline: 0 !important;
}

.miles-prices__inner {
  width: min(100% - 48px, 1192px);
  margin-inline: auto;
}

.miles-prices__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 80px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 48px;
}

.miles-prices__head h2 {
  margin: 6px 0 0;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}

.miles-prices__lead {
  max-width: 46ch;
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: 18px;
  line-height: 1.55;
}

/* Only the table scrolls sideways, never the page. */
.miles-prices__scroll { overflow-x: auto; }
.miles-prices__scroll:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: 4px;
}

.miles-prices__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.miles-prices__caption {
  margin-bottom: 14px;
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  text-align: left;
}

.miles-prices__table thead th {
  padding: 0 24px 12px 0;
  color: var(--color-text-soft, #536762);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
}

.miles-prices__table tbody th,
.miles-prices__table tbody td {
  padding: 20px 24px 20px 0;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  vertical-align: baseline;
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-prices__table tbody th { font-weight: 600; }
.miles-prices__table tr > *:last-child { padding-right: 0; }

.miles-prices__name { display: block; }

.miles-prices__duration {
  display: block;
  margin-top: 3px;
  color: var(--color-text-soft, #536762);
  font-size: 15px;
  font-weight: 400;
}

.miles-prices__price-col,
.miles-prices__price {
  text-align: right;
  white-space: nowrap;
}

.miles-prices__price {
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

.miles-prices__note {
  margin: 24px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .miles-prices { padding-block: 44px !important; }
  .miles-prices__head { margin-bottom: 32px; }
  .miles-prices__table tbody th,
  .miles-prices__table tbody td { padding-block: 16px; }
}

/* ---------------------------------------------------------------------------
 * The video, as a component.
 *
 * The travel page's poster was a button wired to nothing. This one only
 * renders when there is an address to play, and swaps the poster for a real
 * player in place, so the layout does not move when it starts.
 * ------------------------------------------------------------------------- */

.miles-video {
  padding-block: 60px !important;
  padding-inline: 0 !important;
}

.miles-video__inner {
  width: min(100% - 48px, 1192px);
  margin-inline: auto;
}

.miles-video__head { margin-bottom: 40px; }

.miles-video__head h2 {
  margin: 6px 0 0;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}

.miles-video__figure { margin: 0; }

.miles-video__poster,
.miles-video__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border: 0;
  border-radius: 16px;
}

.miles-video__poster {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-brand-dark, #204944);
  box-shadow: none;
}

.miles-video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miles-video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 76px;
  height: 76px;
  translate: -50% -50%;
  color: var(--color-brand-dark, #204944);
  background: #fff;
  border-radius: 50%;
  place-items: center;
  transition: scale 0.18s;
}

.miles-video__play svg { width: 30px; height: 30px; margin-left: 3px; }
.miles-video__poster:hover .miles-video__play { scale: 1.06; }

.miles-video__duration {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 6px 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  background: rgba(20, 45, 41, 0.8);
  border-radius: 999px;
}

.miles-video__poster:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.6);
  outline-offset: 3px;
}

.miles-video__caption {
  margin: 16px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  line-height: 1.65;
}

.miles-video__transcript { margin-top: 24px; }

.miles-video__transcript summary {
  cursor: pointer;
  color: var(--color-brand, #2c5f5a);
  font-size: 16px;
  font-weight: 600;
}

.miles-video__transcript div p {
  max-width: 68ch;
  margin: 12px 0 0;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .miles-video { padding-block: 44px !important; }
  .miles-video__play { width: 58px; height: 58px; }
  .miles-video__play svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-video__poster:hover .miles-video__play { scale: 1; }
}

/* ---------------------------------------------------------------------------
 * Travel Vaccinations Epsom KT19, brought to the home page's standard.
 *
 * The page is now composed of components; what is left here is the copy that
 * is particular to travel health, and it was running on the old spec: the
 * hero on the text cut, three separate pieces of white text on the evergreen
 * ground under 15px with reduced alpha, and every section carrying the global
 * 108px so adjacent sections sat 216px apart instead of 120.
 * ------------------------------------------------------------------------- */

/* One rhythm. 60px a side means any two adjacent sections measure 120px
   between them, which is the scale the home page uses. An !important
   restatement, because theme.css:131 sets 108px with !important. */
.epsom-location-page main > section,
.epsom-location-page main > aside {
  padding-block: 60px !important;
}

.epsom-location-page .service-location-hero {
  padding-block: 96px 84px !important;
}

/* The booking bar is a strip, not a section. */
.epsom-location-page .service-location-booking-bar {
  padding-block: 16px !important;
}

/* The display cut at 500. theme.css sets every heading to 600 at the text
   cut (opsz 48), which reads subtly heavier and tighter than the home page. */
.epsom-location-page h1,
.epsom-location-page .health-hub-section-heading h2,
.epsom-location-page .service-location-guides h2,
.epsom-location-page .service-location-faq h2 {
  font-weight: 500 !important;
  font-optical-sizing: auto;
  line-height: 1.04 !important;
}

.epsom-location-page h1 { letter-spacing: -0.035em !important; }

.epsom-location-page .health-hub-section-heading h2,
.epsom-location-page .service-location-guides h2,
.epsom-location-page .service-location-faq h2 {
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}

/*
 * Text on the evergreen hero. All three of these were under 15px, two of them
 * at reduced alpha with !important. The site sets -webkit-font-smoothing:
 * antialiased globally, which drops the subpixel rendering light strokes rely
 * on: white 400 at 12px on evergreen measures fine against a contrast checker
 * and still reads badly. Minimum 15px at 500, no alpha.
 */
.epsom-location-page .service-location-hero__pharmacy-label {
  color: #d7e6da !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.105em !important;
}

.epsom-location-page .service-location-trust li {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.epsom-location-page .service-location-member-note {
  color: #dbe8dd !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6;
}

/* The focus ring is near-invisible on green; white on the dark band. */
.epsom-location-page .service-location-hero a:focus-visible,
.epsom-location-page .service-location-booking-bar a:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px;
}

/* Section small print at one size, as the home page sets it. */
.epsom-location-page .health-hub-section-heading > p,
.epsom-location-page .service-location-intro p {
  color: var(--color-text, #1a2e2a);
  font-size: 18px;
  line-height: 1.6;
}

/* The intro photograph, when the pharmacy has uploaded one. Before, this was
   a lettered grey box shaped like a picture. */
.epsom-location-page .service-location-intro__figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

.epsom-location-page .service-location-intro__figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Guides and FAQ: 16px body, hairlines rather than cards. */
.epsom-location-page .service-location-guide-grid article {
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 0;
  box-shadow: none;
}

.epsom-location-page .service-location-guide-grid h3 {
  margin: 24px 0 12px;
  font-size: 21px;
  font-weight: 600 !important;
}

.epsom-location-page .service-location-guide-grid li,
.epsom-location-page .service-location-faq p,
.epsom-location-page .service-location-faq summary {
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .epsom-location-page main > section,
  .epsom-location-page main > aside { padding-block: 44px !important; }
  .epsom-location-page .service-location-hero { padding-block: 64px 56px !important; }
  .epsom-location-page .service-location-booking-bar { padding-block: 12px !important; }

  /* The booking section, matched to the phone scale so every pair is 88. */
  .epsom-location-page .miles-appointment-section,
  .epsom-location-page #book-appointment { padding-block: 44px !important; }

  /* A mobile rule was still setting this to 14px. */
  .epsom-location-page .service-location-booking-bar strong { font-size: 16px !important; }
}

/* --- Travel page, second pass: measured, not assumed --------------------- */

/*
 * One rhythm, continued. Setting the padding was not enough: several of the
 * components carry their own bottom margin as well, so the services index sat
 * 240px from its neighbour where 120 was intended. Margins off, padding owns
 * the spacing, every adjacent pair measures 120px.
 */
.epsom-location-page main > section,
.epsom-location-page main > aside {
  margin-block: 0 !important;
}

/* The sticky booking bar is a strip and sits over the section below it, so
   it is deliberately outside the rhythm. */
.epsom-location-page .service-location-booking-bar { margin-block: 0 !important; }

/* The booking section put 156px either side of it where the rest of the page
   measures 120. Its padding comes from an id rule (#book-appointment), which
   outranks any class selector, so the override has to carry the id too. */
.epsom-location-page .miles-appointment-section,
.epsom-location-page #book-appointment {
  padding-block: 60px !important;
}

/*
 * The breadcrumb ran 12px at 62% white, dropping to 10px on a phone: the
 * smallest type on the page, on the darkest ground, at the lowest contrast.
 */
.epsom-location-page .service-location-breadcrumb li {
  color: #cfe0d4 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.epsom-location-page .service-location-breadcrumb a { color: #fff !important; }
.epsom-location-page .service-location-breadcrumb li + li::before {
  color: rgba(255, 255, 255, 0.5);
}

/* The address under "Appointment location" was 13px, 11px on a phone. */
.epsom-location-page .service-location-hero__pharmacy p,
.epsom-location-page .service-location-hero__pharmacy p span {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.55;
}

.epsom-location-page .service-location-hero__pharmacy p strong { font-weight: 600; }

/* The sticky bar: 14px and 11px, and a 12px button. */
.epsom-location-page .service-location-booking-bar strong { font-size: 16px; }
.epsom-location-page .service-location-booking-bar p span {
  color: var(--color-text-soft, #536762);
  font-size: 15px;
}
.epsom-location-page .service-location-booking-bar .health-hub-button {
  font-size: 15px;
}

/* Headings the first pass missed: the intro's h2 carries no section-heading
   wrapper, and the two guide headings are h3s. */
.epsom-location-page .service-location-intro h2,
.epsom-location-page .service-location-guide-grid h3 {
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}

.epsom-location-page .service-location-guide-grid h3 {
  font-size: 23px;
  letter-spacing: -0.02em !important;
}

/*
 * The extracted components, standing on their own.
 *
 * The services index and the booking bookend were written inside the home
 * page's journey grid, which supplies the gutter. Called from a page that has
 * no such grid they ran to the edge of the screen - and 6px past it on a
 * phone. Scoped to a direct child of <main>, so the home page, where both sit
 * inside .home-journey__container, is untouched.
 */
main > .miles-directory > .miles-directory__inner,
main > .miles-ready > .miles-ready__inner {
  width: min(100% - 48px, 1192px);
  margin-inline: auto;
}

/* Matching .health-hub-container exactly, so these two line up with every
   other section on the page rather than sitting 6px proud of them. */
@media (max-width: 767px) {
  main > .miles-directory > .miles-directory__inner,
  main > .miles-ready > .miles-ready__inner {
    width: min(100% - 36px, 1192px);
  }
}

/*
 * And the reason they ran off the edge: both carry a negative inline margin,
 * which is how they bleed into the journey grid's gutter on the home page.
 * With no gutter to bleed into, that margin hangs them 24px off each side of
 * the screen - so the page scrolled sideways by six pixels on a phone.
 */
main > .miles-directory,
main > .miles-ready {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* The guides band is evergreen, so its list runs white. It was at 90% alpha:
   the dark-ground rule is a solid colour at 15px and 500, because the site
   antialiases globally and light strokes lose their weight. */
.epsom-location-page .service-location-guide-grid li {
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
}

/* Set explicitly rather than left to whichever rule wins: a --color-border
   hairline is invisible on this ground. */
.epsom-location-page .service-location-guide-grid article {
  border-top-color: rgba(255, 255, 255, 0.18);
}

/*
 * Two overrides that have to come last.
 *
 * The phone scale for the booking section was written in a media query that
 * an unconditional rule further down the file then outranked by source order,
 * so 390px measured 104 where the rest of the page measured 88. And the
 * pharmacy name in the hero was still 14px: the size was set on its paragraph
 * but a phone rule sets it on the <strong> itself.
 */
@media (max-width: 640px) {
  .epsom-location-page .miles-appointment-section,
  .epsom-location-page #book-appointment {
    padding-block: 44px !important;
  }
}

.epsom-location-page .service-location-hero__pharmacy p strong {
  font-size: 16px !important;
}

/* ---------------------------------------------------------------------------
 * 27. A page's own guides strip
 *
 * The Health Hub strip (section 24) read a different way, for a service page.
 * Same tile: 4:3, the same foot gradient, the same display cut over an
 * uppercase facet. The difference is that the caption carries the question
 * rather than a two-word label, and a line of the answer sits beneath the
 * tile, because a service page needs the words on the page and not only a
 * route to them.
 *
 * No card: no fill, no border, no shadow. The photograph is the object and
 * the text sits on the ivory ground under it, the way the destinations note
 * sits under its strip.
 * ------------------------------------------------------------------------ */

.miles-guides {
  /* The side margin the container leaves, whatever container that is: the
     home page grid, .health-hub-container, or a future one. The phone strip
     runs out to the screen edge on this. */
  --guides-bleed: calc((100vw - 100%) / 2);
  margin-top: 120px;
  margin-bottom: 120px;
  padding: 0 !important;                  /* theme.css pads every section */
}

.miles-guides__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: 40px;
}

.miles-guides__eyebrow {
  margin: 0 0 12px;
  color: var(--color-brand, #2c5f5a) !important;
  text-transform: uppercase;          /* size, weight and tracking: section 25 */
}

.miles-guides__head h2 {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}

.miles-guides__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand-dark, #204944);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.miles-guides__link span { display: inline-block; transition: transform 0.2s ease; }
.miles-guides__link:hover span { transform: translateX(4px); }

.miles-guides__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-guides__item { display: flex; margin: 0; padding: 0; min-width: 0; }

/* The card is the positioning context for the action's overlay, so the whole
   thing is one target without the tile being a second link. */
/* Fills the grid cell so the action's margin-top:auto has somewhere to push
   to, and every "Read the full answer" in a row sits on one line. */
.miles-guides__card { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; }

.miles-guides__tile {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 20px;
  color: #ffffff;
  background: var(--color-brand-dark, #204944);
  border-radius: 18px;
}

.miles-guides__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Deeper than the destinations gradient: the question runs to two and three
   lines, so it needs ground under all of it, not just the foot. */
.miles-guides__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 43, 39, 0.92) 0%, rgba(16, 43, 39, 0.62) 42%, rgba(16, 43, 39, 0.08) 82%);
}

.miles-guides__tile--plain {
  background:
    radial-gradient(circle at 80% 14%, rgba(220, 231, 223, 0.12), transparent 48%),
    var(--color-brand-dark, #204944);
  box-shadow: inset 0 0 0 1px rgba(220, 231, 223, 0.22);
}

.miles-guides__tile--plain::after { content: none; }

.miles-guides__card:hover .miles-guides__tile img { transform: scale(1.05); }

.miles-guides__cap {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.miles-guides__cap small {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-guides__cap h3 {
  margin: 0;
  color: #ffffff !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-optical-sizing: auto;
  font-size: clamp(22px, 1.9vw, 26px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  text-wrap: pretty;
}

.miles-guides__answer {
  margin: 0 0 16px;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.miles-guides__more { margin: auto 0 0; }

.miles-guides__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand-dark, #204944);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* The whole card is the target. */
.miles-guides__action::after { content: ""; position: absolute; inset: 0; }
.miles-guides__action span { display: inline-block; transition: transform 0.2s ease; }
.miles-guides__card:hover .miles-guides__action span { transform: translateX(4px); }

.miles-guides__action:focus-visible {
  outline: 2px solid var(--color-brand, #2c5f5a);
  outline-offset: 4px;
  border-radius: 4px;
}

.miles-guides__note {
  max-width: 62ch;
  margin: 40px 0 0;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 1024px) {
  .miles-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
}

@media (max-width: 767px) {
  .miles-guides { margin-top: 96px; margin-bottom: 96px; }
  .miles-guides__head { margin-bottom: 30px; }

  /* Six stacked cards is a page of scrolling for one section. On phones this
     becomes the swipe strip the Health Hub strip already uses on the home
     page: one card at a time, the next one showing at the edge, running off
     the right of the screen. Same idiom, same 78vw tile. */
  .miles-guides__grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    margin-right: calc(-1 * var(--guides-bleed, 18px));
    padding-right: var(--guides-bleed, 18px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .miles-guides__grid::-webkit-scrollbar { display: none; }
  .miles-guides__item { flex: 0 0 min(78vw, 330px); scroll-snap-align: start; }

  .miles-guides__cap { right: 18px; bottom: 18px; left: 18px; }
  .miles-guides__answer { font-size: 15px; }
  .miles-guides__note { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-guides__tile img, .miles-guides__action span, .miles-guides__link span { transition: none; }
  .miles-guides__card:hover .miles-guides__tile img { transform: none; }
}

@media (forced-colors: active) {
  .miles-guides__tile { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
 * 28. The wordmark
 *
 * theme.css sets .treatovia-wordmark, .miles-wordmark in Outfit 700 — a
 * typeface this site uses nowhere else, through a rule shared with the
 * Treatovia project. It was another brand's component with the name swapped,
 * which is why the one permanent piece of brand furniture never looked like
 * Miles while everything under it did.
 *
 * The name now takes the site's own display cut, Newsreader at weight 500 and
 * opsz 72, the same treatment as every heading. Beside it sits one heavy
 * equal-armed cross from inc/brand.php. No image file, no request, and it
 * recolours from here for ivory and for evergreen.
 *
 * Three marks came before this one, and each failed differently. The
 * shopfront's offset pair simplified to rounded rectangles, then the same
 * pair with a masked gap and lighter arms: both rounded-geometric shapes
 * beside a high-contrast serif, a different hand from the letters. Then a
 * cross with bracketed serifs at its four ends, which fixed the hand and
 * introduced a worse problem — serifs on a cross read as ecclesiastical
 * before they read as typographic, and at the weight of the type's stem it
 * was a crucifix.
 *
 * So: the weight of a pharmacy cross first, since that is what it has to be,
 * and the typographic detail moved to the bracket at the four inner corners,
 * where it is the join between serif and stem rather than a serif itself.
 *
 * The cross then went into a disc, which is the change that makes it a logo.
 * A bare mark beside a wordmark reads as decoration; a contained one reads
 * as an identity, and it is the same object as the tab icon, so the tab, the
 * header and any avatar are one thing. Evergreen disc with a white cross on
 * ivory; inverted to a sage disc with an evergreen cross on the footer,
 * where a dark disc would sink into the ground.
 *
 * The disc is 0.96em, taller than the capitals. The cross is 0.72 of the
 * disc: a circle needs more inset than a square at the same nominal size,
 * because the corners that would have carried the air are gone.
 *
 * The name is Montserrat, bold "Miles" and a lighter "Pharmacy", which is
 * the pharmacy's own signage: the shopfront reads a bold MILES beside a
 * lighter, letter-spaced PHARMACY. Newsreader was right for the page and
 * wrong for the name — the name is the one thing on the site that has
 * to match something already standing on Chessington Road. An earlier
 * version of this comment called a two-tone wordmark a template tell, and
 * as a general rule it is; here it is what the client's sign does, which
 * beats the general rule. Drew, 17 September 2026.
 *
 * Montserrat is already loaded sitewide (fonts-local.css) and its file is
 * variable across 100-900, so the bold is a real instance of the weight
 * axis rather than a browser's synthetic smear — checked by measuring
 * the rendered widths at each declared weight, which come out distinct
 * (310 / 313.4 / 317.7 / 327.5px for the same string).
 *
 * Every rule below exists to beat something in theme.css, which carries
 * !important on the family and paints the lockup's direct children green.
 * ------------------------------------------------------------------------ */

.miles-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;                                   /* a disc's edge curves away, so it needs less */
  color: var(--color-text, #1a2e2a);
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

/* The wrapper takes the lockup's own colour; the two words are painted
   below. theme.css paints .miles-wordmark > span brand green, which this
   span would otherwise pass down to both of them. */
.miles-wordmark > span,
.miles-wordmark__type,
.site-nav--unified .miles-wordmark--menu > span,
.miles-wordmark--menu > span,
.miles-wordmark--footer > span {
  color: inherit !important;
  font: inherit;
  letter-spacing: inherit;
}

/* The name bold, the descriptor lighter and tinted: the sign's two tiers.
   Grandchildren of the lockup, so theme.css's "> span" does not reach
   them and they can be coloured deliberately. */
.miles-wordmark__name { font-weight: 700; color: inherit; }
.miles-wordmark__kind { font-weight: 500; color: var(--color-brand, #2c5f5a); }

/* Sized from the type, not pinned per variant, so the lockup keeps its
   proportion at every size and the phone override is one rule fewer. The
   width/height attributes in the markup are only the no-CSS fallback.

   The nudge is measured, not carried over. Newsreader needed -0.1225em
   because its long ascenders and descenders drop the line box's centre well
   below the centre of the capitals. Montserrat's metrics are near-balanced
   (cap 0.70em) and the same measurement gives +0.01em, so the flex row's own
   centring is already almost right. Inheriting the serif's number would have
   sat the disc about 4px high at header size. */
.miles-mark {
  flex: none;
  display: block;
  position: relative;
  top: 0.01em;
  width: 0.96em;
  height: 0.96em;
}
.miles-mark__disc  { fill: var(--color-brand-dark, #204944); }
.miles-mark__cross { fill: #ffffff; }

/* Header and the mobile drawer both sit on ivory: the drawer is light under
   .site-nav--unified, so they share one treatment.

   The desktop header's lockup, 27 October 2026 (Drew: "the logo is cheap").
   It is the same mark and the same two words the phone header carries on
   evergreen, which he likes, drawn with more conviction on ivory: a size
   up, the two words in the one deep green (a bold name beside a lighter,
   paler descriptor is the template lockup every pharmacy site ships with),
   "Pharmacy" at a medium weight rather than the body's, tighter, and the
   disc the same deep green so the three parts read as one object. The
   phone bar (--bar), the drawer (--menu) and the footer keep their own. */
.miles-wordmark--header,
.site-nav--unified .miles-wordmark--header {
  gap: 0.36em;
  color: var(--color-brand-dark, #204944);
  font-size: 34px;
  letter-spacing: -0.028em !important;
}
.miles-wordmark--header .miles-wordmark__name { font-weight: 700; }
.miles-wordmark--header .miles-wordmark__kind { font-weight: 600; color: inherit; }
.miles-wordmark--header .miles-mark__disc { fill: var(--color-brand-dark, #204944); }
.miles-wordmark--menu,
.site-nav--unified .miles-wordmark--menu { color: var(--color-text, #1a2e2a); font-size: 24px; }

/* The footer's evergreen ground: white type, sage cross, the pairing the dark
   bands already use. */
.miles-wordmark--footer,
.miles-footer .miles-wordmark--footer { color: #ffffff; font-size: 34px; }
.miles-wordmark--footer .miles-wordmark__kind { color: var(--color-sage, #dce7df); }
.miles-wordmark--footer .miles-mark__disc  { fill: var(--color-sage, #dce7df); }
.miles-wordmark--footer .miles-mark__cross { fill: var(--color-brand-dark, #204944); }

/* The phone header's evergreen bar (inc/mobile-header.php): the footer's
   pairing, at the size the bar holds between its two buttons. */
.miles-wordmark--bar { color: #ffffff; font-size: 21px; }
.miles-wordmark--bar .miles-wordmark__kind { color: var(--color-sage, #dce7df); }
.miles-wordmark--bar .miles-mark__disc  { fill: var(--color-sage, #dce7df); }
.miles-wordmark--bar .miles-mark__cross { fill: var(--color-brand-dark, #204944); }

@media (min-width: 768px) and (max-width: 1179px) {
  .miles-wordmark--header,
  .site-nav--unified .miles-wordmark--header { font-size: 28px; }
}

@media (max-width: 1023px) {
  .miles-wordmark--header,
  .site-nav--unified .miles-wordmark--header { font-size: 25px; }
}

@media (max-width: 767px) {
  .miles-wordmark--header,
  .site-nav--unified .miles-wordmark--header { font-size: 24px; }
  .miles-wordmark--footer,
  .miles-footer .miles-wordmark--footer { font-size: 28px; }
}

@media (forced-colors: active) {
  .miles-mark__disc  { fill: CanvasText; }
  .miles-mark__cross { fill: Canvas; }
}

/* The video dialog carries a third copy of the name, already two-tone in
   its own markup, so it follows the lockup rather than being the one
   surface that disagrees with it. */
.health-hub-video-dialog__mark {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.health-hub-video-dialog__mark > span { font-weight: 500; }

/* ---------------------------------------------------------------------------
 * Travel page: the photograph behind the hero, and the map in the intro.
 * ------------------------------------------------------------------------- */

/*
 * The hero.
 *
 * .service-location-hero paints its green as a background shorthand, so an
 * inline background-image would replace the gradient rather than sit under it
 * and the copy would end up on bare photograph. The photograph goes on the
 * section, the green moves to the ::before layer that already carries this
 * hero's decorative gradients, and the copy - which sits at z-index 1 - stays
 * above both.
 */
.epsom-location-page .service-location-hero {
  background-color: var(--color-brand-dark, #204944);
  background-image: none;          /* the inline style supplies it */
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: 78% 100% !important;
}

/* Dense enough over the copy to hold 15px white, thinning to the right so the
   shopfront is actually visible rather than a texture. */
.epsom-location-page .service-location-hero::before {
  background:
    radial-gradient(circle at 88% 16%, rgba(220, 231, 223, 0.1) 0, transparent 45%),
    /* Dark under the words, opening up towards the sign, as on the home
       page: the right half shows the shopfront rather than a green wash. */
    linear-gradient(
      90deg,
      rgba(16, 44, 39, 0.97) 0%,
      rgba(18, 50, 45, 0.95) 42%,
      rgba(21, 56, 50, 0.5) 66%,
      rgba(24, 62, 55, 0.16) 100%
    ),
    linear-gradient(0deg, rgba(20, 51, 46, 0.42), transparent 55%);
}

/* The photograph's own frame, for phones (below). */
.miles-service-page__photo { display: none; }

/* On a phone the copy runs the full width, so the photograph is behind all of
   it: the overlay turns vertical and holds throughout. */
@media (max-width: 900px) {
  .epsom-location-page .service-location-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(16, 44, 39, 0.93) 0%,
        rgba(18, 50, 45, 0.95) 55%,
        rgba(16, 44, 39, 0.97) 100%
      );
  }
}

/* The ring flourish reads as a scratch over a photograph. */
.epsom-location-page .service-location-hero::after { display: none; }

/*
 * The map in the intro column. The still is 4:3 and this column is tall, so
 * it is given the column's height and the image covers it, rather than
 * floating in the middle of a lot of ivory.
 */
.epsom-location-page .service-location-intro__map {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.epsom-location-page .service-location-intro__map .miles-here__mini-frame {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.epsom-location-page .service-location-intro__map .miles-here__still,
.epsom-location-page .service-location-intro__map .miles-here__still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.epsom-location-page .service-location-intro__map .miles-here__mini-label {
  font-size: 16px;
}

@media (max-width: 900px) {
  .epsom-location-page .service-location-intro__map .miles-here__mini-frame {
    aspect-ratio: 4 / 3;
  }
}

/* ---------------------------------------------------------------------------
 * The guides strip as cards.
 *
 * Section 27 deliberately built these without a card: photograph, then words
 * on the ivory ground. Ollie asked for actual cards, so the three parts -
 * photograph, answer, action - are now one surface: white on the ivory, a
 * hairline, the component radius, and the single --shadow-card token rather
 * than a new shadow recipe. The photograph runs flush to the card's top edge
 * and the card clips it, so there is one radius in play, not two.
 * ------------------------------------------------------------------------- */

.miles-guides__card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 18px;
  box-shadow: var(--shadow-card, 0 16px 44px rgba(26, 46, 42, 0.08));
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.miles-guides__card:hover {
  box-shadow: var(--shadow-card-hover, 0 24px 58px rgba(26, 46, 42, 0.12));
  transform: translateY(-3px);
}

/* Flush to the card's top edge; the card owns the corners now. */
.miles-guides__tile {
  margin-bottom: 0;
  border-radius: 0;
}

/* The words sit inside the card rather than on the page. */
.miles-guides__answer {
  margin: 0;
  padding: 20px 22px 16px;
}

.miles-guides__more {
  margin: auto 0 0;
  padding: 0 22px 22px;
}

/* The cards carry their own separation, so the row gap comes down. */
.miles-guides__grid { gap: 28px; }

/*
 * Room above the note.
 *
 * It had none at all: .service-location-page p sets margin-top: 0 at a higher
 * specificity than .miles-guides__note, so the 40px the section asked for was
 * never applied on a service page and the line sat flush against the last
 * card. Matched on specificity here so the space actually exists.
 */
.miles-guides .miles-guides__note,
.service-location-page .miles-guides__note {
  margin-top: 72px;
}

@media (max-width: 767px) {
  .miles-guides__answer { padding: 18px 18px 14px; }
  .miles-guides__more { padding: 0 18px 18px; }

  .miles-guides .miles-guides__note,
  .service-location-page .miles-guides__note { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-guides__card,
  .miles-guides__card:hover { transition: none; transform: none; }
}

@media (forced-colors: active) {
  .miles-guides__card { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
 * Travel page, third pass: the spacing reset, the guides band, the map column.
 *
 * The root cause of three separate "there is no space above this" reports:
 * theme.css sets `.service-location-page p { margin-top: 0 }`, a leftover from
 * the conversion, at a higher specificity than any component's own rule. Every
 * component whose note or action row is a <p> lost its top margin on this page
 * and sat flush against whatever was above it. Restated here at matching
 * specificity rather than patched one at a time as each one is spotted.
 * ------------------------------------------------------------------------- */

.service-location-page .miles-guides__note,
.miles-guides .miles-guides__note {
  margin-top: 40px;            /* was 72: too much once the gap below shrank */
}

.service-location-page .miles-directory__note {
  margin-top: 32px;
}

/* The alternate directions row sat hard against the Get directions button. */
.service-location-page .miles-here__alt {
  margin-top: 18px;
}

/* 22px of serif on a 22px line box has no room for its own descenders, which
   is what made the number look like it was falling out of the card. */
.miles-here__alt .miles-here__tel {
  font-size: 20px;
  line-height: 1.3;
}

/*
 * The guides strip's own rhythm.
 *
 * It is wrapped in a plain .health-hub-container, not a <section>, so the
 * page's 60px rule never reached it, and its own 120px bottom margin then
 * stacked on the next section's padding: 180px from the note to the next
 * heading where the rest of the page measures 120.
 */
.epsom-location-page main > .health-hub-container {
  padding-block: 60px !important;
}

.epsom-location-page .miles-guides {
  margin-block: 0 !important;
}

/* ---- "Before your travel health appointment" ---------------------------- */

/*
 * These were panels; the second pass stripped them to hairlines to satisfy the
 * no-card rule, which on an evergreen ground left two thin lists floating in a
 * lot of dark. They are panels again, at the radius the rest of the page uses,
 * and the type steps up so the two column headings hold their own under a
 * 60px section heading.
 */
.epsom-location-page .service-location-guide-grid { gap: 28px; }

.epsom-location-page .service-location-guide-grid article {
  padding: 34px 36px 26px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: none;
}

.epsom-location-page .service-location-guide-grid h3 {
  margin: 0 0 22px;
  font-size: 27px;
  letter-spacing: -0.02em !important;
}

.epsom-location-page .service-location-guide-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rows, not bullets: a hairline between each, and none under the last. */
.epsom-location-page .service-location-guide-grid li {
  padding-block: 14px;
  font-size: 17px;
  line-height: 1.45;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.epsom-location-page .service-location-guide-grid li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* ---- Location & opening hours ------------------------------------------ */

/*
 * The heading was bottom-aligned against the address card, which is taller
 * than it, so it sat 215px below the top of its own row with nothing above it.
 */
.epsom-location-page .miles-here__head {
  align-items: start;
}

/* The map is sticky at 24px, which is underneath the 82px header. */
.epsom-location-page .miles-here__map {
  top: 100px;
}

@media (max-width: 767px) {
  .service-location-page .miles-guides__note,
  .miles-guides .miles-guides__note { margin-top: 32px; }

  .epsom-location-page main > .health-hub-container { padding-block: 44px !important; }

  .epsom-location-page .service-location-guide-grid article { padding: 26px 24px 20px; }
  .epsom-location-page .service-location-guide-grid h3 { font-size: 24px; }
  .epsom-location-page .service-location-guide-grid li { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
 * Real check marks, and one disclosure for getting here.
 * ------------------------------------------------------------------------- */

/*
 * The ticks were the character "✓" set at 9px inside an 18px disc. At that
 * size, in a face that may not carry the glyph at all, it renders as a smudge
 * rather than a check mark. Drawn instead: an SVG path on the disc, so it is
 * an actual tick, crisp at any size, in the exact brand colour.
 *
 * The row becomes a flex line at the same time, so the disc aligns itself to
 * the first line of text rather than being positioned by hand against padding
 * values that have since changed twice.
 */
.epsom-location-page .service-location-guide-grid li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding-left: 0;
}

.epsom-location-page .service-location-guide-grid li::before {
  position: static;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  margin-top: 2px;
  content: "";
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23204944' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l4.8 4.8L19.5 7.2'/%3E%3C/svg%3E")
      center / 12px 12px no-repeat,
    #cddfd2;
  border-radius: 50%;
}

/* ---- the index, folded into one disclosure ----------------------------- */

.miles-here__index--fold { min-width: 0; }

.miles-here__fold {
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 18px;
  background: #fff;
}

.miles-here__fold-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 20px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}

.miles-here__fold-summary::-webkit-details-marker { display: none; }

.miles-here__fold-title {
  grid-column: 1;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text, #1a2e2a);
}

.miles-here__fold-sub {
  grid-column: 1;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text-soft, #536762);
}

/* The mark: a plus that becomes a minus, drawn rather than a glyph. */
.miles-here__fold-mark {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 50%;
}

.miles-here__fold-mark::before,
.miles-here__fold-mark::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 13px;
  height: 1.5px;
  content: "";
  translate: -50% -50%;
  background: var(--color-brand-dark, #204944);
  border-radius: 2px;
  transition: rotate 0.2s ease, opacity 0.2s ease;
}

.miles-here__fold-mark::after { rotate: 90deg; }
.miles-here__fold[open] .miles-here__fold-mark::after { rotate: 0deg; opacity: 0; }

.miles-here__fold-summary:hover { background: var(--color-sage-soft, #edf2ed); border-radius: 18px; }

.miles-here__fold-summary:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: -3px;
  border-radius: 18px;
}

.miles-here__fold-body {
  padding: 4px 24px 24px;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-here__fold-body .miles-here__modes { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .miles-here__fold-mark::before,
  .miles-here__fold-mark::after { transition: none; }
}

@media (max-width: 767px) {
  .miles-here__fold-summary { padding: 18px 18px; }
  .miles-here__fold-title { font-size: 21px; }
  .miles-here__fold-body { padding: 4px 18px 18px; }
}

/*
 * Superseded: the one-column folded layout was replaced by the two-column one
 * further down (.miles-here__layout--fold), which puts the address card and
 * the disclosure together on the right. Left as a note rather than silently
 * deleted, because its selector outranked the replacement and kept the page
 * on one column until it was removed.
 */

/* ---------------------------------------------------------------------------
 * Travel page, fourth pass: grounds, folds and one directions control.
 * ------------------------------------------------------------------------- */

/*
 * Three evergreen bands ran together - the reviews, "Before your travel health
 * appointment" and the services index - so there was nothing to tell you where
 * one ended and the next began. The middle one takes the sage ground, which
 * gives the run dark / light / dark and its panels become white cards like the
 * guides strip above them. Scoped to this page: the band is evergreen for a
 * reason on the pages that only carry one of them.
 */
.epsom-location-page .service-location-guides {
  color: var(--color-text, #1a2e2a);
  background: var(--color-sage-soft, #edf2ed);
}

.epsom-location-page .service-location-guides::before { border-color: rgba(44, 95, 90, 0.09); }

.epsom-location-page .service-location-guides h2,
.epsom-location-page .service-location-guides h3 {
  color: var(--color-text, #1a2e2a) !important;
}

.epsom-location-page .service-location-guides .health-hub-eyebrow {
  color: var(--color-brand, #2c5f5a) !important;
}

.epsom-location-page .service-location-guide-grid article {
  background: #fff;
  border-color: var(--color-border, rgba(44, 95, 90, 0.14));
  border-top-color: var(--color-border, rgba(44, 95, 90, 0.14));
  box-shadow: var(--shadow-card, 0 16px 44px rgba(26, 46, 42, 0.08));
}

.epsom-location-page .service-location-guide-grid li {
  color: var(--color-text, #1a2e2a) !important;
  border-bottom-color: var(--color-border, rgba(44, 95, 90, 0.14));
}

/* The number beside each column heading was sage-on-evergreen. */
.epsom-location-page .service-location-guide-grid h3::before {
  color: #fff;
  background: var(--color-brand, #2c5f5a);
}

/* ---- the services index, folded ---------------------------------------- */

.miles-directory--folded .miles-directory__group--fold {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.miles-directory--folded .miles-directory__summary {
  cursor: pointer;
  list-style: none;
  padding-block: 26px;
}

.miles-directory--folded .miles-directory__summary::-webkit-details-marker { display: none; }

.miles-directory--folded .miles-directory__group-head {
  align-items: center;
  margin: 0;
}

.miles-directory__count {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.miles-directory__mark {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-left: 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.miles-directory__mark::before,
.miles-directory__mark::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 13px;
  height: 1.5px;
  content: "";
  translate: -50% -50%;
  background: #fff;
  border-radius: 2px;
  transition: rotate 0.2s ease, opacity 0.2s ease;
}

.miles-directory__mark::after { rotate: 90deg; }
.miles-directory__group--fold[open] .miles-directory__mark::after { rotate: 0deg; opacity: 0; }

.miles-directory--folded .miles-directory__summary:hover { background: rgba(255, 255, 255, 0.05); }

.miles-directory--folded .miles-directory__summary:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: -3px;
}

.miles-directory--folded .miles-directory__group--fold .miles-directory__list {
  padding-bottom: 18px;
}

/* ---- getting here, folded: map left, card and disclosure right ---------- */

.miles-here__layout--fold {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.8fr);
  gap: 40px 56px;
  align-items: start;
}

.miles-here__layout--fold .miles-here__head {
  display: block;
  margin-bottom: 36px;
}

.miles-here__layout--fold .miles-here__map { position: static; }
.miles-here__layout--fold .miles-here__frame { aspect-ratio: 4 / 3; }

.miles-here__layout--fold .miles-here__note { margin: 28px 0 0; }

.miles-here__side {
  display: grid;
  gap: 24px;
  align-content: start;
  min-width: 0;
}

@media (max-width: 900px) {
  .miles-here__layout--fold { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .miles-here__layout--fold .miles-here__head { margin-bottom: 24px; }
}

/* ---- one directions control -------------------------------------------- */

.miles-here__dirs { position: relative; }

.miles-here__dirs > summary.miles-here__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
}

.miles-here__dirs > summary::-webkit-details-marker { display: none; }

.miles-here__dirs-menu {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 6px;
  background: var(--color-sage-soft, #edf2ed);
  border-radius: 14px;
}

.miles-here__dirs-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  color: var(--color-brand-dark, #204944) !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
  background: #fff;
  border-radius: 10px;
}

.miles-here__dirs-menu a:hover { background: var(--color-sage, #dce7df); }

.miles-here__dirs-menu a:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .miles-directory__mark::before,
  .miles-directory__mark::after { transition: none; }
}

/* --- Fourth pass, corrections measured on the page ----------------------- */

/*
 * The folded group head kept the open list's two-column grid, so the count and
 * the mark fell onto a second row at the far left with the whole right half of
 * the band empty. Explicit areas instead: the number, the category over the
 * title, then the count and the mark held to the right, all on one line.
 */
.miles-directory--folded .miles-directory__group-head {
  grid-template-columns: 56px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "num label names mark"
    "num title names mark";
  align-items: center;
  column-gap: 24px;
}

.miles-directory--folded .miles-directory__number  { grid-area: num; grid-row: auto; align-self: center; padding-top: 0; }
.miles-directory--folded .miles-directory__group-label { grid-area: label; align-self: end; }
.miles-directory--folded .miles-directory__group-title { grid-area: title; align-self: start; }
.miles-directory--folded .miles-directory__names   { grid-area: names; }
.miles-directory--folded .miles-directory__count   { display: none; }
.miles-directory--folded .miles-directory__mark    { grid-area: mark; margin-left: 0; }

/*
 * The names took the slack the title column used to hold, which is where
 * the empty thousand pixels came from. They are the row's quiet tier, below
 * the title and at the count's weight, and they stay on one line: where a
 * group has more names than the row can hold, the line fades out rather
 * than wrapping and pushing the band taller. Opening the group is still how
 * you get all of them, as links, with their categories.
 */
.miles-directory__names {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  padding-left: 40px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: right;
  text-wrap: pretty;
}

/* The group itself is a two-column grid built for head-beside-list; folded,
   the summary is the whole width and the list drops underneath it. */
.miles-directory--folded .miles-directory__group--fold {
  display: block;
  padding: 0;
}

.miles-directory--folded .miles-directory__group--fold .miles-directory__list {
  padding-top: 6px;
}

/*
 * The side column matches the map.
 *
 * The card and the disclosure came to about 60px short of the map's height, so
 * the two columns ended on different lines. Stretched to the row and spaced
 * apart, they start and finish level with it.
 */
.miles-here__layout--fold { align-items: stretch; }

.miles-here__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

/* With the Apple Maps link gone this row holds only the phone, and the
   margin-left:auto that used to push it away from that link now strands it
   against the right edge on its own. */
.miles-here__alt .miles-here__tel { margin-left: 0; }

@media (max-width: 900px) {
  .miles-here__side { justify-content: flex-start; }
}

/* Narrow enough that the names would crowd the title rather than sit
   beside it: the count comes back and the row is the compact one again. */
@media (max-width: 1100px) {
  .miles-directory--folded .miles-directory__group-head {
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "num label count mark"
      "num title count mark";
  }
  .miles-directory--folded .miles-directory__names { display: none; }
  .miles-directory--folded .miles-directory__count { display: block; grid-area: count; margin-left: 0; }
}

@media (max-width: 767px) {
  .miles-directory--folded .miles-directory__group-head {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "num label mark"
      "num title mark"
      "num count mark";
    column-gap: 16px;
  }
  .miles-directory--folded .miles-directory__count { margin-top: 6px; }
}

/* ---------------------------------------------------------------------------
 * "Care in three considered steps" in a container of its own.
 *
 * It sat on the page's ivory with the sections either side of it, so three
 * numbered steps about how booking works read as more of the page rather than
 * as one thing you could take in and move on from. An evergreen panel sections
 * it off: the same ground the reviews and the services index use, so it is a
 * change of container rather than a new colour.
 * ------------------------------------------------------------------------- */

.home-process {
  padding: clamp(44px, 5vw, 72px) clamp(24px, 4vw, 64px);
  color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.05), transparent 40%),
    var(--color-brand-dark, #204944);
  border-radius: 24px;
}

.home-process__intro h2 { color: #fff !important; }
.home-process__intro .home-section-label { color: #cddfd2 !important; }

.home-process__steps h3 { color: #fff !important; }
.home-process__steps p  { color: rgba(255, 255, 255, 0.94) !important; }

/* The marker sat on the ivory: sage disc, brand ink. On evergreen it inverts,
   and the spine between the markers has to be light to be seen at all. */
.home-process__steps > li > span {
  color: var(--color-brand-dark, #204944);
  background: #cddfd2;
  box-shadow: none;
}

.home-process__steps li:not(:last-child)::before {
  background: linear-gradient(to bottom, rgba(205, 223, 210, 0.55), rgba(205, 223, 210, 0.16));
}

/* The dark ground swallows a near-invisible focus ring. */
.home-process a:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .home-process { border-radius: 18px; }
}

/*
 * Now that the three steps sit in a panel of their own, 120px of page rhythm
 * either side of it was doubling up on the panel's own padding: the block read
 * as marooned rather than sectioned. 72px, and 56 on a phone.
 *
 * The space above belongs to the element before it, so that is where it has to
 * be taken from - :has() rather than a negative margin, because adjacent
 * margins collapse to the larger of the two and the smaller one never wins.
 */
.miles-team:has(+ .home-process) { margin-bottom: 72px !important; }

.home-process { margin-bottom: 72px !important; }

@media (max-width: 640px) {
  .miles-team:has(+ .home-process) { margin-bottom: 56px !important; }
  .home-process { margin-bottom: 56px !important; }
}

/*
 * Undoing the previous pass's "match the map".
 *
 * Stretching the side column and spacing its two cards apart assumed the row
 * was the height of the map. It is not: the left column is the heading, the
 * map and the note together - 771px against the map's 527 at 1440 - so the
 * address card and the disclosure were pushed 315px apart with nothing in
 * between. They stack from the top, one gap, and the columns simply end where
 * their content ends.
 */
.miles-here__layout--fold { align-items: start; }

.miles-here__side { justify-content: flex-start; }

/* ---------------------------------------------------------------------------
 * Travel page, fifth pass: the booking bar's testimonial, and the folded
 * getting-here layout corrected twice over.
 * ------------------------------------------------------------------------- */

/*
 * The heading is its own grid row now, so the address card starts level with
 * the top of the map rather than level with the top of the heading.
 *
 * And the previous pass's "match the map" is undone: stretching the side
 * column and spacing its two cards apart assumed the row was the height of the
 * map. It was not - the left column was the heading, the map and the note
 * together, 771px against the map's 527 at 1440 - so the card and the
 * disclosure were pushed 315px apart with nothing in between.
 */
.miles-here__layout--fold {
  grid-template-rows: auto auto;
  align-items: start;
}

.miles-here__layout--fold > .miles-here__head {
  grid-column: 1;
  grid-row: 1;
  display: block;
  margin-bottom: 0;
}

.miles-here__layout--fold > .miles-here__main {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.miles-here__layout--fold > .miles-here__side {
  grid-column: 2;
  grid-row: 2;
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .miles-here__layout--fold > .miles-here__head,
  .miles-here__layout--fold > .miles-here__main,
  .miles-here__layout--fold > .miles-here__side {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---- a patient's words in the booking bar ------------------------------ */

/*
 * The bar carries a review, and it used to cut it twice: the excerpt was
 * trimmed to 92 characters mid-sentence, then this stylesheet clipped 78px
 * more off the end with an ellipsis. What reached the reader was "...3 of us
 * had to be squeezed in last minute. The", which reads as a complaint and was
 * a five-star review.
 *
 * The words are whole sentences now (inc/testimonials.php picks them), and
 * they are given the room to be read: the stars and the credit stack into a
 * narrow column so the quote has the whole of the rest, over two lines on a
 * laptop and one on a tablet. The grid keeps figcaption a direct child of
 * figure, which is what makes it a caption.
 */

/*
 * The service label keeps its natural width. Letting it shrink handed the
 * quote 131px more and cost three lines of wrapping in the label, which made
 * the whole sticky bar 118px tall to save one line in the quote.
 */
.service-location-booking-bar__inner > p { flex: 0 0 auto; }

.service-location-booking-bar__quote {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  align-content: center;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding-left: 28px;
  border-left: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.service-location-booking-bar__stars {
  display: inline-flex;
  grid-row: 1;
  grid-column: 1;
  gap: 2px;
  margin: 0;
  color: var(--color-cta, #e8734a);
}

.service-location-booking-bar__stars svg { width: 15px; height: 15px; }

.service-location-booking-bar__quote blockquote {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/*
 * Two lines on a laptop. The clamp is a safety net, not the plan: the
 * excerpt is cut to sentences that fit, so it should never reach it.
 */
.service-location-booking-bar__line {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: 15px;
  font-style: italic;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.service-location-booking-bar__line--tight { -webkit-line-clamp: 1; }

/* A review with no sentence short enough prints no line at that width, and
   an empty blockquote would still hold a column and two gaps open. */
.service-location-booking-bar__quote blockquote:empty { display: none; }

/* One at a time. The selector carries the figure's class so it outranks the
   display the line itself sets, whichever order they land in. */
.service-location-booking-bar__quote .service-location-booking-bar__line--tight { display: none; }

.service-location-booking-bar__quote figcaption {
  grid-row: 2;
  grid-column: 1;
  color: var(--color-text-soft, #536762);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.service-location-booking-bar__quote figcaption a {
  color: inherit;
  text-decoration: none;
}

.service-location-booking-bar__quote figcaption a:hover { text-decoration: underline; }

/*
 * Narrower, and the two lines become one shorter one: the same review, cut to
 * the sentences that fit on a single line. The stars and the credit go back
 * onto that line beside it, because two rows of credit beside one row of
 * quote is a lopsided block.
 */
@media (max-width: 1159px) {
  .service-location-booking-bar__quote {
    /* max-content on the stars and on the words: an `auto` column takes a
       share of the spare width, which opened a 200px hole between the stars
       and the sentence they belong to. The spare goes to the last column
       instead, after the credit, where it is just air. */
    grid-template-columns: max-content minmax(0, max-content) auto;
    grid-template-rows: auto;
    column-gap: 12px;
    padding-left: 20px;
  }
  .service-location-booking-bar__quote blockquote { grid-row: 1; grid-column: 2; }
  .service-location-booking-bar__quote figcaption { grid-row: 1; grid-column: 3; font-size: 12px; }
  .service-location-booking-bar__quote .service-location-booking-bar__line--wide { display: none; }
  .service-location-booking-bar__quote .service-location-booking-bar__line--tight { display: -webkit-box; }
  .service-location-booking-bar__line { font-size: 14px; }
}

/*
 * Below this the service, a sentence and a button cannot all be read at a
 * size worth reading. Measured, not guessed: at 1000px the one-line excerpt
 * has 336px and sits whole; a little under that it starts to clip. The words
 * go, the rating stays - five stars and where they came from are true on
 * their own and cost 170px - and the whole review is in the reviews section
 * on the same page, which on a phone is a full-height pull-quote.
 */
@media (max-width: 999px) {
  .service-location-booking-bar__quote {
    grid-template-columns: max-content auto;
    column-gap: 10px;
  }
  .service-location-booking-bar__quote blockquote { display: none; }
  .service-location-booking-bar__quote figcaption { grid-column: 2; }
}

/* And below this the bar is a fixed strip at the foot of a phone with one
   job, which is the button. */
@media (max-width: 599px) {
  .service-location-booking-bar__quote { display: none; }
}

/* The line under the hero's button carries the one caveat on the page that
   matters before booking, so it takes the weight of a statement. */
.epsom-location-page .service-location-member-note {
  font-weight: 600 !important;
}

/*
 * The stars in the booking bar were stacking, one per line.
 *
 * theme.css sets every <p> in that bar to display: grid, for the two-line
 * service label it was written for. The stars are a <p> too, so each SVG
 * became a grid row. They are a row of five marks, so they say so at a
 * specificity that rule cannot outrank.
 */
.service-location-booking-bar .service-location-booking-bar__stars {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

/* ---------------------------------------------------------------------------
 * The booking launcher.
 *
 * Bottom left, on every page. The lower right already holds the account
 * portal, universal-booking.js's bar and the engine's own cards, and a control
 * that covers the thing it is trying to sell is worse than no control.
 * ------------------------------------------------------------------------- */

.miles-launch {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1080;              /* under the booking dialog at 1200 */
  display: flex;
  flex-direction: column-reverse;
  align-items: start;
  gap: 12px;
  max-width: calc(100vw - 40px);
}

.miles-launch__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 22px;
  cursor: pointer;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  background: var(--color-cta, #e8734a);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(26, 46, 42, 0.26);
  transition: background 0.18s ease, transform 0.18s ease;
}

/* Parked while a page's own booking card is on screen (miles-book-launcher.js
   watches [data-miles-hero-card]): the fourth orange "Book" on a desktop
   screen, over the hero's own buttons (Drew, 27 October 2026). It rises in
   as the card scrolls away. Without the script it is simply shown. */
.miles-launch--parked { opacity: 0; transform: translateY(12px); pointer-events: none; }
.miles-launch { transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }

.miles-launch__button:hover {
  background: var(--color-cta-hover, #ce5e38);
  transform: translateY(-1px);
}

.miles-launch__button:focus-visible {
  outline: 3px solid var(--color-brand-dark, #204944);
  outline-offset: 3px;
}

.miles-launch__icon { display: inline-flex; }
.miles-launch__icon svg { width: 19px; height: 19px; }

.miles-launch__panel {
  width: min(360px, calc(100vw - 40px));
  max-height: min(70vh, 620px);
  padding: 18px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 20px;
  box-shadow: 0 28px 64px rgba(26, 46, 42, 0.24);
}

.miles-launch__panel[hidden] { display: none; }

.miles-launch__head { margin-bottom: 14px; }

.miles-launch__eyebrow {
  margin: 0 0 4px;
  color: var(--color-brand, #2c5f5a) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.105em !important;
  text-transform: uppercase;
}

.miles-launch__title {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.miles-launch__group + .miles-launch__group { margin-top: 14px; }

.miles-launch__group-title {
  margin: 0 0 4px;
  color: var(--color-text-soft, #536762);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.miles-launch__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-launch__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 10px;
  color: var(--color-text, #1a2e2a) !important;
  text-decoration: none !important;
  border-radius: 10px;
}

.miles-launch__list a:hover { background: var(--color-sage-soft, #edf2ed); }

.miles-launch__list a:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: -3px;
}

.miles-launch__name { font-size: 16px; font-weight: 600; }

.miles-launch__type {
  flex: 0 0 auto;
  color: var(--color-text-soft, #536762);
  font-size: 14px;
  white-space: nowrap;
}

.miles-launch__foot {
  margin: 16px 0 0;
  padding-top: 14px;
  color: var(--color-text-soft, #536762);
  font-size: 15px;
  line-height: 1.5;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-launch__foot a {
  color: var(--color-brand-dark, #204944) !important;
  font-weight: 600;
}

.miles-launch__sep { margin-inline: 6px; }

/* On a phone the label is the room the panel needs, so the closed state is
   the icon and the word, and the open panel takes the width of the screen. */
@media (max-width: 600px) {
  .miles-launch { bottom: 14px; left: 14px; max-width: calc(100vw - 28px); }
  .miles-launch__button { min-height: 48px; padding: 10px 18px; font-size: 14px; }
  .miles-launch__panel { width: calc(100vw - 28px); max-height: 66vh; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-launch { transition: none; }
  .miles-launch--parked { transform: none; }
  .miles-launch__button { transition: none; }
  .miles-launch__button:hover { transform: none; }
}

@media print {
  .miles-launch { display: none; }
}

/*
 * The folded layout is a plain two-column grid, whatever the variant.
 *
 * The compact variant reverses the order and hangs the map off the right edge
 * of the screen, which is the right thing when a long index sits beside it and
 * the wrong thing when that index is one small card: the map ran straight over
 * the address card. Nothing uses compact today, but the guard costs a line.
 */
.miles-here--compact .miles-here__layout--fold > .miles-here__main { order: 0; }
.miles-here--compact .miles-here__layout--fold > .miles-here__side { order: 0; }
.miles-here--compact .miles-here__layout--fold .miles-here__map { margin-right: 0; }
.miles-here--compact .miles-here__layout--fold .miles-here__frame {
  border-right: 1px solid rgba(26, 46, 42, 0.14);
  border-radius: 24px;
}

/* ---------------------------------------------------------------------------
 * The service pages: a photograph behind the hero, and a date to pick.
 *
 * These pages are built by service-page.js in the browser, so the hero
 * photograph arrives as an inline background-image from functions.php. The
 * green moves to the ::before layer the same way it did on the travel page,
 * because the class paints its gradient as a shorthand and an inline image
 * would replace it rather than sit under it.
 * ------------------------------------------------------------------------- */

.miles-service-page__hero {
  /* As the home hero (theme.css, .home-hero): the photograph is sized by the
     hero's height, never the window's width, and anchored bottom right, so
     the fascia sign sits in clear space at the top right instead of off the
     top edge. With "cover" a wide window scaled it by width and cut the sign
     in half at 1920 (Drew, 10 October 2026). Zoom is the photo's height as a
     share of the hero; x is the horizontal focal point. */
  --hero-photo-zoom: 121%;
  --hero-photo-x: 100%;
  background-color: #143430;   /* anything the photograph does not reach */
  background-repeat: no-repeat;
  background-size: auto var(--hero-photo-zoom) !important;
  background-position: var(--hero-photo-x) 100% !important;
}

.miles-service-page__hero::before {
  background:
    radial-gradient(circle at 88% 16%, rgba(220, 231, 223, 0.1) 0, transparent 45%),
    /* Dark under the words, opening up towards the sign, as on the home
       page: the right half shows the shopfront rather than a green wash. */
    linear-gradient(
      90deg,
      rgba(16, 44, 39, 0.97) 0%,
      rgba(18, 50, 45, 0.95) 42%,
      rgba(21, 56, 50, 0.5) 66%,
      rgba(24, 62, 55, 0.16) 100%
    ),
    linear-gradient(0deg, rgba(20, 51, 46, 0.42), transparent 55%);
}

/* The photograph's own frame, for phones (below). */
.miles-service-page__photo { display: none; }

.miles-service-page__hero::after { display: none; }

/* Text on the photograph: 15px minimum, weight 500, no reduced alpha. */
.miles-service-page__hero .service-location-breadcrumb li { color: #cfe0d4 !important; font-size: 15px !important; font-weight: 500 !important; }
.miles-service-page__hero .service-location-breadcrumb a { color: #fff !important; }
.miles-service-page__hero .service-location-hero__pharmacy p,
.miles-service-page__hero .service-location-hero__pharmacy p span,
.miles-service-page__hero .service-location-hero__pharmacy p strong { color: #fff !important; font-size: 16px !important; }
.miles-service-page__hero .service-location-hero__pharmacy-label { color: #d7e6da !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.105em !important; }
.miles-service-page__hero .service-location-trust li { color: #fff !important; font-size: 15px !important; font-weight: 500 !important; }
.miles-service-page__hero .service-location-member-note { color: #dbe8dd !important; font-size: 16px !important; font-weight: 600 !important; }

/* The line under the heading, where the page's own sections file has one
   (the emergency contraception page: "The morning after pill, from a
   pharmacist, in private. No appointment needed."). */
.miles-service-page__hero .service-location-hero__lead {
  max-width: 34ch;
  margin: 14px 0 22px !important;
  color: #fff !important;
  font-size: clamp(19px, 1.6vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-wrap: balance;
}

.miles-service-page__hero h1 {
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
}

/* On a phone, as the home hero does: the band is solid, and the photograph
   leads in its own frame, a full-bleed square under the header with the
   whole lit shopfront in it, dissolving into the band the heading sits on.
   Up to 900, not the home page's 767: from there to 900 this hero is one
   column, so the words run the width and there is no clear space beside them
   for the sign (at 768 the breadcrumb sat on "PHARMACY"); a tablet gets the
   frame as a wide band instead of a square. */
@media (max-width: 900px) {
  .miles-service-page__hero {
    --hero-photo-mobile-x: 78%;   /* the shopfront sits in the right half of the wide photograph */
    --hero-photo-mobile-y: 45%;
    background-image: none !important;
    background-color: #143430;
  }

  .service-location-page main > section.miles-service-page__hero.service-location-hero,
  .miles-service-page__hero.service-location-hero {
    padding-top: 0 !important;
  }

  .miles-service-page__hero.service-location-hero > .health-hub-container {
    min-height: 0;
  }

  .miles-service-page__hero::before {
    background: linear-gradient(90deg, rgba(18, 48, 43, 0.97) 0%, rgba(22, 56, 50, 0.92) 100%);
  }

  .miles-service-page__photo {
    position: relative;
    display: block;
    margin: 0 0 28px;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: #143430;
  }

  .miles-service-page__photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-photo-mobile-x) var(--hero-photo-mobile-y);
  }

  .miles-service-page__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(20, 52, 48, 0) 50%, rgba(20, 52, 48, 0.55) 78%, #143430 100%);
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .miles-service-page__photo { aspect-ratio: 1 / 1; }
}

/* ---- "Start your appointment" in place of the empty facts list ---------- */

.miles-service-page__card {
  display: grid;
  gap: 8px;
  padding: 26px 26px 24px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 20px;
  box-shadow: var(--shadow-card, 0 16px 44px rgba(26, 46, 42, 0.08));
}

.miles-service-page__card-service {
  display: grid;
  gap: 2px;
  margin: 0 0 6px;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.miles-service-page__card-service span {
  color: var(--color-text-soft, #536762);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}

.miles-service-page__card label {
  color: var(--color-text, #1a2e2a);
  font-size: 15px;
  font-weight: 600;
}

.miles-service-page__card .site-booking-button {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
}

.miles-service-page__card #miles-ready-note {
  margin: 4px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 15px;
  line-height: 1.5;
}

/* Nothing to choose, so nothing that looks choosable. */
.miles-step02--locked .miles-step02__card { cursor: default; }

/*
 * The off-screen date input has to stay off screen.
 *
 * .miles-cal__native is the visually-hidden holder behind every calendar. On
 * the service pages the card also carries .home-booking-start, whose
 * `input { width: 100% }` outranks it on specificity - so the input stretched
 * to the full width of the viewport while absolutely positioned against it,
 * and the page scrolled sideways by 930px. A utility whose whole job is to
 * hide something should not lose an argument about it.
 */
.miles-cal__native {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * The service hero is not a full screen on a phone.
 *
 * It was min-height: calc(100svh - 118px), so it filled the viewport whatever
 * it had to say - 858px of hero for 452px of content on the Weight Management
 * page, with the rest as empty photograph. The height comes from the copy now,
 * with room above and below it, so the page starts where the page starts.
 */
@media (max-width: 900px) {
  .service-location-hero,
  .epsom-location-page .service-location-hero,
  .miles-service-page__hero {
    min-height: 0 !important;
    padding-block: 56px 64px !important;
  }
}

@media (max-width: 420px) {
  .service-location-hero,
  .epsom-location-page .service-location-hero,
  .miles-service-page__hero {
    padding-block: 44px 52px !important;
  }
}

/* ---------------------------------------------------------------------------
 * The governance panel, as a panel.
 *
 * It was a heading and a definition list on the page's own ground, so the one
 * block on a service page whose whole job is to say "these facts are checkable"
 * looked less considered than the cards around it. Same surface as the rest:
 * white, a hairline, the component radius and the one shadow token.
 * ------------------------------------------------------------------------- */

.service-location-governance__panel {
  display: grid;
  gap: 28px 64px;
  padding: clamp(28px, 3.4vw, 48px);
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 22px;
  box-shadow: var(--shadow-card, 0 16px 44px rgba(26, 46, 42, 0.08));
}

@media (min-width: 900px) {
  .service-location-governance__panel {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
  }
  .service-location-governance__panel > .service-location-governance__reassurance {
    grid-column: 1 / -1;
  }
}

.service-location-governance__panel h2 {
  margin: 6px 0 12px;
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}

.service-location-governance__panel > div:first-child > p {
  max-width: 44ch;
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: 17px;
  line-height: 1.6;
}

/* Rows with hairlines: a register entry read down a column, not a paragraph. */
.service-location-governance__panel dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.service-location-governance__panel dl > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 4px 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.service-location-governance__panel dl > div:first-child { padding-top: 0; }
.service-location-governance__panel dl > div:last-child { padding-bottom: 0; border-bottom: 0; }

.service-location-governance__panel dt {
  margin: 0;
  color: var(--color-text-soft, #536762);
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.105em !important;
  text-transform: uppercase;
}

.service-location-governance__panel dd {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.5;
}

.service-location-governance__panel dd strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.service-location-governance__panel dd a {
  display: inline-block;
  color: var(--color-brand-dark, #204944) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.service-location-governance__panel dd a:hover { text-decoration: underline !important; }

.service-location-governance__reassurance {
  max-width: 72ch;
  margin: 0;
  padding-top: 20px;
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  line-height: 1.6;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

@media (max-width: 560px) {
  .service-location-governance__panel dl > div { grid-template-columns: minmax(0, 1fr); }
}

/*
 * The mobile hero, actually shortened.
 *
 * The previous pass removed the 100svh min-height and the hero stayed exactly
 * as tall, because `.service-location-page main > section` sets 82px of
 * padding a side at a specificity a bare `.service-location-hero` cannot
 * reach. Measured rather than assumed this time: 82+82 of padding and 216px of
 * internal margin around 478px of content.
 */
@media (max-width: 900px) {
  .service-location-page main > section.service-location-hero,
  .service-location-page main > .service-location-hero,
  .miles-service-page__hero {
    padding-block: 48px 56px !important;
  }

  /* 52px under a one-line breadcrumb is most of the space it was costing. */
  .service-location-hero .service-location-breadcrumb { margin-bottom: 24px; }

  .service-location-hero__pharmacy { margin-block: 18px; }
  .service-location-hero__cta { margin-top: 22px; }
}

@media (max-width: 420px) {
  .service-location-page main > section.service-location-hero,
  .service-location-page main > .service-location-hero,
  .miles-service-page__hero {
    padding-block: 40px 48px !important;
  }
}

/* ---------------------------------------------------------------------------
 * The service pages: one rhythm, and the sections that were left cramped.
 *
 * Measured rather than guessed. Every section carried 112px of padding a side,
 * so adjacent pairs sat 224px apart where the page scale is 120 - and the team
 * and the guides added 120px of their own margin on top of that, making 344.
 * ------------------------------------------------------------------------- */

.service-location-page main > section,
.service-location-page main > aside,
.service-location-page main > div {
  padding-block: 60px !important;
  margin-block: 0 !important;
}

/* The hero and the sticky strip are deliberately outside the scale. */
.service-location-page main > .service-location-hero { padding-block: 96px 84px !important; }
.service-location-page main > .service-location-booking-bar { padding-block: 0 !important; }
.service-location-page main > .miles-service-page__booking-anchor { padding-block: 0 !important; }

/* Components that carry their own bottom margin for the home page's grid. */
.service-location-page .miles-team,
.service-location-page .miles-guides,
.service-location-page .miles-questions,
.service-location-page .miles-here { margin-block: 0 !important; }

@media (max-width: 767px) {
  .service-location-page main > section,
  .service-location-page main > aside,
  .service-location-page main > div { padding-block: 44px !important; }
  .service-location-page main > .miles-service-page__booking-anchor { padding-block: 0 !important; }
}

/* ---- the sticky bar, with a review in it ------------------------------- */

/*
 * 76px was the height of a service name and a button. It now also carries a
 * patient's words, and three things in 76px is a squeeze.
 */
.service-location-booking-bar__inner {
  min-height: 92px;
  gap: 32px;
  padding-block: 14px;
}

.service-location-booking-bar p { line-height: 1.45; }
.service-location-booking-bar__quote { padding-left: 32px; }  /* the grid above owns the rest */

@media (max-width: 1100px) {
  .service-location-booking-bar__inner { min-height: 76px; }
}

/* ---- the hero's closing line ------------------------------------------- */

.miles-service-page__hero .service-location-member-note,
.service-location-hero .service-location-member-note {
  margin-top: 20px;
}

/* ---- the guides strip, with however many guides there are -------------- */

/*
 * Three fixed columns left a single card stranded on the left with the link to
 * the Health Hub away on the right, which is what it looks like: a grid with
 * two holes in it. The cards size themselves instead and sit together, so one
 * card reads as one card rather than as two missing ones.
 */
.service-location-page .miles-guides__grid {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  gap: 28px;
}

.service-location-page .miles-guides__item {
  flex: 1 1 320px;
  max-width: 420px;
  min-width: 0;
}

/* With one card the head reads better stacked than split across the measure. */
.service-location-page .miles-guides__grid:not(:has(> :nth-child(2))) ~ * { min-width: 0; }

.service-location-page .miles-guides__head {
  align-items: end;
  gap: 16px 40px;
  margin-bottom: 32px;
}

/* ---- the governance panel, tightened ----------------------------------- */

.service-location-governance__panel {
  gap: 24px 56px;
  padding: clamp(26px, 2.8vw, 40px);
}

.service-location-governance__panel h2 {
  font-size: clamp(25px, 2.4vw, 31px);
  margin-bottom: 10px;
}

.service-location-governance__panel dl > div { padding: 13px 0; }

.service-location-governance__reassurance {
  padding-top: 18px;
  font-size: 15px;
}

/* ---- the questions, on the same surface as everything else ------------- */

.service-location-page .miles-questions {
  background: var(--color-sage-soft, #edf2ed);
}

.service-location-page .miles-questions__head { margin-bottom: 32px; }

/*
 * One guide should read as one guide.
 *
 * The strip is built for three across. With a single question published under
 * a topic it left a card on the left and two card-shaped holes beside it. When
 * there is only one, it lays out sideways instead - the photograph beside the
 * words, across the measure - which is a card, not a row with pieces missing.
 */
@media (min-width: 900px) {
  .service-location-page .miles-guides__grid:not(:has(> :nth-child(2))) .miles-guides__item {
    flex: 1 1 100%;
    max-width: none;
  }

  .service-location-page .miles-guides__grid:not(:has(> :nth-child(2))) .miles-guides__card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr auto;
    /* Named cells, or the action falls under the photograph instead of under
       the words it belongs to. */
    grid-template-areas:
      "tile answer"
      "tile more";
    align-items: stretch;
  }

  .service-location-page .miles-guides__grid:not(:has(> :nth-child(2))) .miles-guides__tile { grid-area: tile; }
  .service-location-page .miles-guides__grid:not(:has(> :nth-child(2))) .miles-guides__answer { grid-area: answer; }
  .service-location-page .miles-guides__grid:not(:has(> :nth-child(2))) .miles-guides__more { grid-area: more; }

  .service-location-page .miles-guides__grid:not(:has(> :nth-child(2))) .miles-guides__tile {
    height: 100%;
    aspect-ratio: auto;
    min-height: 280px;
  }

  .service-location-page .miles-guides__grid:not(:has(> :nth-child(2))) .miles-guides__answer {
    align-self: center;
    padding: 32px 34px 12px;
    font-size: 17px;
  }

  .service-location-page .miles-guides__grid:not(:has(> :nth-child(2))) .miles-guides__more {
    margin: 0;
    padding: 0 34px 32px;
  }
}

/*
 * The governance list was sitting on its own frame.
 *
 * theme.css gives the <dl> a border on all four sides and a near-white fill,
 * with no padding at all - so the first row's label touched the top border and
 * every label touched the left one. Inside a panel that is already white, a
 * second white box outlined against it is one frame too many: the rows keep
 * their hairlines and the frame goes.
 */
.service-location-governance__panel dl {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.service-location-governance__panel dl > div:first-child { padding-top: 0; }

/* The registration numbers read better as their own line above the link. */
.service-location-governance__panel dd { display: grid; gap: 3px; }
.service-location-governance__panel dd a { justify-self: start; }

/* Less air above the section than below it: it follows the registrations bar,
   which already carries its own. */
.service-location-page main > .service-location-governance {
  padding-top: 40px !important;
}

@media (max-width: 767px) {
  .service-location-page main > .service-location-governance { padding-top: 32px !important; }
}

/*
 * The registrations bar brings its own 64px a side on top of the panel's 36.
 * With the nesting fixed it only needs the page's own rhythm, which
 * `main > section` already gives it, so its extra padding goes and the band
 * sits 120px from its neighbour like everything else.
 */
.service-location-page .miles-yfvc {
  padding-block: 60px !important;
}

@media (max-width: 767px) {
  .service-location-page .miles-yfvc { padding-block: 44px !important; }
}

/* ---------------------------------------------------------------------------
 * Content headers are not the site header.
 *
 * theme.css:287 styles `header:where(:not([class*="__"]))` as the site header:
 * sticky-ish, ivory at 94%, a bottom rule, a shadow and an 18px backdrop blur.
 * The exclusion catches every BEM header - miles-team__head and friends - but
 * .health-hub-section-heading is a <header> with no "__" in its name, so every
 * section heading on the Health Hub and the service pages was being drawn as a
 * faint floating panel with a shadow under it.
 *
 * The real header is the one with the navigation in it. Everything else gets
 * the treatment taken back off.
 * ------------------------------------------------------------------------- */

header:where(:not([class*="__"])):not(:has(.site-nav)) {
  position: static;
  z-index: auto;
  background: none !important;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------------------------------------------------------------------------
 * The Health Hub: the questions fold by topic, and Explore by Topic is built
 * from what is actually here.
 * ------------------------------------------------------------------------- */

/* Room under the head: 8px was leaving the first topic on the heading's heels. */
.miles-questions--grouped .miles-questions__head,
.miles-questions--fold .miles-questions__head {
  margin-bottom: 48px;
}

/* ---- each topic behind its heading ------------------------------------- */

.miles-questions__group--fold {
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-questions__group--fold:last-of-type {
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-questions__fold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}

.miles-questions__fold::-webkit-details-marker { display: none; }

/* The topic heading was the section's own sub-head; as a summary it is the
   row's title and needs no space under it. */
.miles-questions__fold .miles-questions__topic-heading {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.miles-questions__fold-count {
  color: var(--color-text-soft, #536762);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.miles-questions__fold-mark {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 50%;
}

.miles-questions__fold-mark::before,
.miles-questions__fold-mark::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 13px;
  height: 1.5px;
  content: "";
  translate: -50% -50%;
  background: var(--color-brand-dark, #204944);
  border-radius: 2px;
  transition: rotate 0.2s ease, opacity 0.2s ease;
}

.miles-questions__fold-mark::after { rotate: 90deg; }
.miles-questions__group--fold[open] .miles-questions__fold-mark::after { rotate: 0deg; opacity: 0; }

.miles-questions__fold:hover .miles-questions__topic-heading { color: var(--color-brand, #2c5f5a); }

.miles-questions__fold:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: -3px;
}

.miles-questions__group--fold .miles-questions__list { padding-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  .miles-questions__fold-mark::before,
  .miles-questions__fold-mark::after { transition: none; }
}

/* ---- Explore by Topic -------------------------------------------------- */

.miles-topics {
  padding-block: 60px !important;
}

.miles-topics__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 80px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 44px;
}

.miles-topics__head h2 {
  margin: 6px 0 0;
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
}

.miles-topics__lead {
  max-width: 42ch;
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: 18px;
  line-height: 1.55;
}

.miles-topics__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-topics__item { display: flex; min-width: 0; }

.miles-topics__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 28px 28px 26px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 20px;
  box-shadow: var(--shadow-card, 0 16px 44px rgba(26, 46, 42, 0.08));
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.miles-topics__card:hover {
  box-shadow: var(--shadow-card-hover, 0 24px 58px rgba(26, 46, 42, 0.12));
  transform: translateY(-3px);
}

.miles-topics__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 14px;
}

.miles-topics__number {
  color: var(--color-brand, #2c5f5a);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.105em;
}

.miles-topics__count {
  color: var(--color-text-soft, #536762);
  font-size: 14px;
  font-weight: 600;
}

.miles-topics__title {
  margin: 0 0 4px;
  color: var(--color-text, #1a2e2a);
  font-size: 27px;
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}

.miles-topics__line {
  margin: 0 0 18px;
  color: var(--color-text-soft, #536762);
  font-size: 16px;   /* read as a line, so at the read floor; it sat at 15px unseen until the whole Hub page was checked */
  line-height: 1.5;
}

/* The answered questions, as an index into the answers below. */
.miles-topics__preview {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-topics__preview li {
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

/* A guide's or an answer's title, read: on the site's 16px floor. It was
   15px, unmeasured while the harness drew no answers under these cards;
   Guides by topic drew the same link and the type floor caught it. */
.miles-topics__preview a {
  display: block;
  padding: 11px 0;
  color: var(--color-text, #1a2e2a) !important;
  font-size: 16px;
  line-height: 1.45;
  text-decoration: none !important;
}

.miles-topics__preview a:hover { color: var(--color-brand, #2c5f5a) !important; }

.miles-topics__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--color-brand-dark, #204944) !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
}

.miles-topics__action span { transition: transform 0.2s ease; }
.miles-topics__action:hover span { transform: translateX(4px); }

/* The whole card is one target, and the title is read once. */
.miles-topics__card { position: relative; }
.miles-topics__action::after { position: absolute; inset: 0; content: ""; }
.miles-topics__preview a { position: relative; z-index: 1; }

@media (max-width: 1024px) {
  .miles-topics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .miles-topics { padding-block: 44px !important; }
  .miles-topics__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .miles-topics__card { padding: 22px 22px 20px; }
  .miles-questions__fold { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; padding: 18px 0; }
  .miles-questions__fold-count { grid-column: 1; grid-row: 2; }
  .miles-questions__fold-mark { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-topics__card, .miles-topics__action span { transition: none; }
  .miles-topics__card:hover { transform: none; }
}

.miles-topics__eyebrow {
  margin: 0 0 4px;
  color: var(--color-brand, #2c5f5a) !important;
  text-transform: uppercase;          /* size, weight and tracking: section 25 */
}

/*
 * The fold rows, corrected against what the group already was.
 *
 * .miles-questions__group is a two-column grid - a sticky 13px uppercase
 * topic label in a 180px column, the list beside it - and a <details> that
 * inherits it puts the summary in that narrow column and the list in the
 * other. The label's spec carries !important throughout, so the fold's own
 * heading has to as well. As a fold the group is one full-width row: the
 * topic as a title, the count, the mark, and the list underneath.
 */
.miles-questions__group--fold {
  display: block;
  margin-top: 0 !important;
}

.miles-questions__fold .miles-questions__topic-heading {
  position: static !important;
  padding-top: 0 !important;
  color: var(--color-text, #1a2e2a) !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

.miles-questions__fold:hover .miles-questions__topic-heading { color: var(--color-brand, #2c5f5a) !important; }

.miles-questions__group--fold .miles-questions__list {
  padding-bottom: 24px;
  border-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
 * The About page, on the home page's components.
 *
 * Every section carried 112px of padding a side - 224 between pairs where the
 * scale is 120 - and the hero had two strips stacked directly under it: the
 * sticky bar and a row of jump links. One rhythm; the jump links sit with the
 * section they introduce; the hero carries the booking start on its right.
 * ------------------------------------------------------------------------- */

.epsom-guide-page main > section,
.epsom-guide-page main > aside,
.epsom-guide-page main > div {
  padding-block: 60px !important;
  margin-block: 0 !important;
}

.epsom-guide-page main > .epsom-guide-hero { padding-block: 84px 72px !important; }
.epsom-guide-page main > .service-location-booking-bar { padding-block: 0 !important; }

/* Components that carry margins for the home page's grid. */
.epsom-guide-page .miles-team,
.epsom-guide-page .miles-questions,
.epsom-guide-page .miles-here,
.epsom-guide-page .miles-ready { margin-block: 0 !important; }

/* The registrations band brings its own 64px; the rhythm is enough. */
.epsom-guide-page .miles-yfvc { padding-block: 0 !important; }
.epsom-guide-page .epsom-guide-governance .health-hub-section-heading { margin-bottom: 36px; }

/* ---- the hero: copy left, the booking start right ----------------------- */

.epsom-guide-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 48px 72px;
  align-items: start;
}

.epsom-guide-hero__form { align-self: start; }

@media (max-width: 900px) {
  .epsom-guide-hero__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---- the jump links, as chips under the intro --------------------------- */

.epsom-guide-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -12px 0 40px;
}

.epsom-guide-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  color: var(--color-brand-dark, #204944) !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  background: var(--color-sage-soft, #edf2ed);
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 999px;
  transition: background 0.15s ease;
}

.epsom-guide-jump a:hover { background: var(--color-sage, #dce7df); }

.epsom-guide-jump a:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: 2px;
}

/* Anchored sections stop short of the sticky bar. */
.epsom-guide-page [id] { scroll-margin-top: 110px; }

@media (max-width: 767px) {
  .epsom-guide-page main > section,
  .epsom-guide-page main > aside,
  .epsom-guide-page main > div { padding-block: 44px !important; }
  .epsom-guide-page main > .epsom-guide-hero { padding-block: 56px 48px !important; }
  .epsom-guide-page main > .service-location-booking-bar { padding-block: 0 !important; }
  .epsom-guide-jump { margin: -4px 0 28px; }
}

/* The booking section's padding comes from an id rule (#book-appointment),
   which outranks any class selector, so the override carries the id too. */
.epsom-guide-page .miles-appointment-section,
.epsom-guide-page #book-appointment { padding-block: 60px !important; }

@media (max-width: 767px) {
  .epsom-guide-page .miles-appointment-section,
  .epsom-guide-page #book-appointment { padding-block: 44px !important; }
}

/*
 * About page, type measured under the floor.
 *
 * The breadcrumb on the evergreen hero was 12px at 62% white - 10px on a
 * phone - the same fault the travel page had, whose fix was scoped to that
 * page. The note under the card's button was 10px, and the address rows in
 * that card had no padding and no hairlines, so Address, Telephone and
 * Website ran together as one block.
 */
.epsom-guide-page .service-location-breadcrumb li {
  color: #cfe0d4 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.epsom-guide-page .service-location-breadcrumb a { color: #fff !important; }
.epsom-guide-page .service-location-breadcrumb li + li::before { color: rgba(255, 255, 255, 0.5); }

.epsom-guide-page .epsom-guide-clinic__action p {
  max-width: 44ch;
  color: var(--color-text-soft, #536762);
  font-size: 16px !important;
  line-height: 1.6;
  text-align: left;
}

.epsom-guide-page .epsom-guide-clinic__card dl > div {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 4px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.epsom-guide-page .epsom-guide-clinic__card dl > div:first-child { padding-top: 0; }
.epsom-guide-page .epsom-guide-clinic__card dl > div:last-child { padding-bottom: 0; border-bottom: 0; }

.epsom-guide-page .epsom-guide-clinic__card dt {
  margin: 0;
  color: var(--color-text-soft, #536762);
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.105em !important;
  text-transform: uppercase;
}

.epsom-guide-page .epsom-guide-clinic__card dd {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .epsom-guide-page .epsom-guide-clinic__card dl > div { grid-template-columns: minmax(0, 1fr); }
}

/*
 * The phone number under Get directions, on every page.
 *
 * .miles-here__alt is a <p>, and two page classes reset paragraph top margins
 * to zero - .service-location-page (fixed earlier, scoped) and .health-hub-page,
 * which the About and Visit pages carry - so the number sat flush against the
 * button there. Set on the component with the weight to hold against any
 * page's reset: measured 0px on About and Visit, 16 on the home page, 18 on
 * the service pages; 18 everywhere now.
 */
.miles-here__alt { margin-top: 18px !important; }

/* ---------------------------------------------------------------------------
 * The Book and My Bookings heroes: text you can read on evergreen.
 *
 * Measured on /book/: the eyebrow computed to brand green rgb(44,95,90) and the
 * three assurances to text-soft grey rgb(83,103,98) - on an evergreen ground,
 * both invisible - because the eyebrow spec and the page's list colour outrank
 * the hero's own rules. Same floor as every other dark band: 15px minimum,
 * weight 500, solid colour, no alpha.
 * ------------------------------------------------------------------------- */

.miles-book-hero .health-hub-eyebrow,
.miles-portal-hero .health-hub-eyebrow { color: #cfe0d4 !important; }

.miles-book-hero h1,
.miles-portal-hero h1 {
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.035em !important;
}

.miles-book-hero__lede,
.miles-portal-hero__lede {
  color: #fff !important;
  font-size: 17px !important;
}

.miles-book-hero .service-location-breadcrumb li,
.miles-portal-hero .service-location-breadcrumb li {
  color: #cfe0d4 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.miles-book-hero .service-location-breadcrumb a,
.miles-portal-hero .service-location-breadcrumb a { color: #fff !important; }

.miles-book-hero__trust,
.miles-book-hero__trust li {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.miles-book-hero__trust li a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.miles-book-hero__trust li::before { background: #cfe0d4; }

/* ---------------------------------------------------------------------------
 * The signed-in account: cards, not a column of labels.
 *
 * Prefixed with the portal root: portal.css is enqueued after this file, so
 * at equal specificity its rules win by order - the figures came out at
 * 1.5rem and the summary as an auto-fit grid however these were written.
 * ------------------------------------------------------------------------- */

.miles-portal .miles-portal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 28px;
}

.miles-portal .miles-portal__title {
  margin: 0;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-text, #1a2e2a);
}

.miles-portal .miles-portal__signout {
  min-height: 44px;
  padding: 10px 18px;
  cursor: pointer;
  color: var(--color-brand-dark, #204944);
  font-size: 15px;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 999px;
}

.miles-portal .miles-portal__signout:hover { background: var(--color-sage-soft, #edf2ed); }

.miles-portal .miles-portal__section {
  margin: 0 0 16px;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text, #1a2e2a);
}

.miles-portal .miles-portal__section + .miles-portal__section,
.miles-portal .miles-portal__list + .miles-portal__section,
.miles-portal .miles-portal__empty + .miles-portal__section { margin-top: 40px; }

.miles-portal .miles-portal__empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 26px 28px;
  background: var(--color-sage-soft, #edf2ed);
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 18px;
}

.miles-portal .miles-portal__empty p {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: 17px;
}

.miles-portal .miles-portal__empty .site-booking-button { width: auto; min-height: 48px; padding-inline: 22px; }

.miles-portal .miles-portal__list { display: grid; gap: 16px; }

.miles-portal .miles-portal__booking {
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 18px;
  box-shadow: var(--shadow-card, 0 16px 44px rgba(26, 46, 42, 0.08));
}

.miles-portal .miles-portal__booking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.miles-portal .miles-portal__booking-service {
  margin: 0;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.miles-portal .miles-portal__status {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-sage-soft, #edf2ed);
  border-radius: 999px;
}

.miles-portal .miles-portal__booking-facts { margin: 0; }
.miles-portal .miles-portal__booking-facts > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}
.miles-portal .miles-portal__booking-facts dt { margin: 0; color: var(--color-text-soft, #536762); font-size: 14px; font-weight: 600; }
.miles-portal .miles-portal__booking-facts dd { margin: 0; font-size: 16px; }

.miles-portal .miles-portal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.miles-portal .miles-portal__details { margin-top: 40px; }

@media (max-width: 767px) {
  .miles-portal .miles-portal__booking-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* What portal.css still imposed on the rendered account: the uppercase
   tracking on section headings that are set in the display cut. */
.miles-portal .miles-portal__section {
  text-transform: none;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
 * The account, as a sidebar and panels.
 *
 * Prefixed with the portal root throughout: portal.css loads after this file.
 * ------------------------------------------------------------------------- */

.miles-portal .miles-portal__account {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px 48px;
  align-items: start;
}

/* ---- the sidebar ---- */

.miles-portal .miles-portal__side {
  position: sticky;
  top: 108px;
  display: grid;
  gap: 20px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 20px;
  box-shadow: var(--shadow-card, 0 16px 44px rgba(26, 46, 42, 0.08));
}

.miles-portal .miles-portal__me {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-portal .miles-portal__avatar {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--color-brand-dark, #204944);
  border-radius: 50%;
}

.miles-portal .miles-portal__me-text { min-width: 0; }

.miles-portal .miles-portal__me-name {
  margin: 0 0 2px;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text, #1a2e2a);
}

.miles-portal .miles-portal__me-email {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-soft, #536762);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.miles-portal .miles-portal__tabs [role="tablist"] { display: grid; gap: 4px; }

.miles-portal .miles-portal__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--color-text, #1a2e2a);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.miles-portal .miles-portal__tab:hover { background: var(--color-sage-soft, #edf2ed); }

.miles-portal .miles-portal__tab[aria-selected="true"] {
  color: var(--color-brand-dark, #204944);
  background: var(--color-sage-soft, #edf2ed);
  border-color: var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-portal .miles-portal__tab:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.55);
  outline-offset: 2px;
}

.miles-portal .miles-portal__tab-count {
  min-width: 26px;
  padding: 2px 8px;
  color: var(--color-text-soft, #536762);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 999px;
}

.miles-portal .miles-portal__tab[aria-selected="true"] .miles-portal__tab-count {
  color: #fff;
  background: var(--color-brand-dark, #204944);
  border-color: var(--color-brand-dark, #204944);
}

.miles-portal .miles-portal__side .miles-portal__signout { width: 100%; }

/* ---- the panels ---- */

.miles-portal .miles-portal__panel { min-width: 0; }
.miles-portal .miles-portal__panel[hidden] { display: none; }
.miles-portal .miles-portal__panel > .miles-portal__section:first-child { margin-top: 0; }

/* ---- your details, as a panel ---- */

.miles-portal .miles-portal__details {
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 18px;
  box-shadow: var(--shadow-card, 0 16px 44px rgba(26, 46, 42, 0.08));
}

.miles-portal .miles-portal__details-lead {
  max-width: 60ch;
  margin: 0 0 22px;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.6;
}

.miles-portal .miles-portal__details-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.miles-portal .miles-portal__details-body .miles-portal__field label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  color: var(--color-text-soft, #536762);
}

.miles-portal .miles-portal__details-body .miles-portal__field input {
  min-height: 48px;
  font-size: 16px;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 12px;
}

/* The email row spans the width: it reads as a fact, not a field. */
.miles-portal .miles-portal__details-body .miles-portal__field:has(.miles-portal__readonly) {
  grid-column: 1 / -1;
  padding-top: 6px;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-portal .miles-portal__readonly {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text, #1a2e2a);
}

.miles-portal .miles-portal__details-body .miles-portal__note {
  margin: 2px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 15px;
}

.miles-portal .miles-portal__details-body .miles-portal__submit {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  min-height: 48px;
  padding-inline: 24px;
  margin-top: 4px;
}

.miles-portal .miles-portal__details-body .miles-portal__message { grid-column: 1 / -1; margin: 0; }

@media (max-width: 900px) {
  .miles-portal .miles-portal__account { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .miles-portal .miles-portal__side { position: static; }
  .miles-portal .miles-portal__tabs [role="tablist"] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .miles-portal .miles-portal__tabs [role="tablist"]::-webkit-scrollbar { display: none; }
  .miles-portal .miles-portal__tab { flex: 0 0 auto; width: auto; }
  .miles-portal .miles-portal__side .miles-portal__signout { width: auto; justify-self: start; }
}

@media (max-width: 560px) {
  .miles-portal .miles-portal__details-body { grid-template-columns: minmax(0, 1fr); }
  .miles-portal .miles-portal__details { padding: 20px; }
}

/* The details fields were held to ~420px inside an 860px panel by a width
   portal.css puts on the form; the panel's own grid decides the measure now. */
.miles-portal .miles-portal__details,
.miles-portal .miles-portal__details-body,
.miles-portal .miles-portal__details-body .miles-portal__field {
  width: 100%;
  max-width: none;
}

/*
 * The panels are <section>s, and theme.css:131 pads every <section> 108px top
 * and bottom with !important. The sidebar is an <aside>, so it started 108px
 * above whichever panel was showing. The opt-out the home page's own sections
 * use; measured: the panel's first element now sits level with the sidebar.
 */
.miles-portal .miles-portal__panel { padding: 0 !important; }

/* The note under the chosen service: what to do when the page offers two
   prices and you do not yet know which one applies to you. */
.miles-step02__note {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  line-height: 1.6;
}

/* The reviews strip with a heading above the quotes, as the service pages use
   it: the eyebrow, the heading in the display cut, then the standfirst. */
.miles-reviews__intro { max-width: 46ch; }

.miles-reviews__heading {
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.03em !important;
  line-height: 1.06 !important;
}

.miles-reviews__lead {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  line-height: 1.55;
}


/*
 * The plugin's stylesheet underlines .miles-cookie__reopen, which is right in
 * a body paragraph and wrong in the footer's link column. Load order between
 * a plugin stylesheet and the theme's is not guaranteed, so this is scoped to
 * the footer and wins on specificity rather than on order.
 */
.miles-footer__col .miles-cookie__reopen {
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.miles-footer__col .miles-cookie__reopen:focus-visible {
  outline: 2px solid var(--color-sage, #dce7df);
  outline-offset: 3px;
}

/* ==========================================================================
   Who is coming - the people on a group booking
   ==========================================================================

   Replaces the chip row (.miles-booked__chip*, above). The chips are left in
   the stylesheet because .miles-step02 and the summary card still use those
   class names for the read-only recap; only the editable picker moved here.

   The shape of the problem, twice over. The chips gave no sense that anyone
   had been added. The rows that replaced them gave no sense that anyone had
   FINISHED being added: a label, a text field and a Remove button per person,
   standing open for ever, three controls to read for each name.

   What is being done is adding names to a list. So the people already added
   are settled rows with nothing to fill in, and there is exactly one place to
   type and one button to press, at the bottom, where the next name goes.
   ========================================================================== */

.miles-booked__party {
  display: grid;
  gap: 14px;
}

.miles-booked__party-head { display: grid; gap: 4px; }

.miles-booked__party-title {
  margin: 0;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.miles-booked__party-lead {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 15px;
  line-height: 1.5;
}

/* ---- the people already on the booking ---- */

.miles-booked__people {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  /* The numbers are their own element so they can sit in a disc and align
     with the name beside them, which a list marker cannot do. */
  list-style: none;
}

.miles-booked__person {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(44, 95, 90, 0.18);
  border-radius: 12px;
}

.miles-booked__person--you {
  background: var(--color-sage-soft);
  border-color: rgba(44, 95, 90, 0.16);
}

.miles-booked__person-num {
  display: grid;
  width: 34px;
  height: 34px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--color-brand);
  border-radius: 50%;
  place-items: center;
}

.miles-booked__person--you .miles-booked__person-num {
  color: var(--color-brand-dark);
  background: var(--color-sage);
}

.miles-booked__person-body { display: grid; gap: 3px; min-width: 0; }

.miles-booked__person-name {
  color: var(--color-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  /* A pasted name should not push the Remove button off the row. */
  overflow-wrap: anywhere;
}

.miles-booked__person-note {
  color: var(--color-text-soft);
  font-size: 14px;
  line-height: 1.45;
}

/*
 * The word, not a symbol. The x this replaces is the close symbol everywhere
 * else on the site, so on a row about a person it read as "close this" rather
 * than "take this person off the booking".
 *
 * Quiet until hovered. It is the only control on a finished row, and a row
 * of settled names should not look like a row of decisions still to make.
 */
.miles-booked__person-remove {
  min-height: 40px;
  padding: 8px 14px;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(44, 95, 90, 0.22);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.miles-booked__person-remove:hover,
.miles-booked__person-remove:focus-visible {
  color: #ffffff;
  background: #8a2f1d;
  border-color: #8a2f1d;
}

.miles-booked__person-remove:focus-visible {
  outline: 3px solid var(--color-cta);
  outline-offset: 2px;
}

/* ---- adding the next one ---- */

/*
 * One field, one button, side by side, with the label above them. This is the
 * only thing on the block still open, so it is the only thing that looks it.
 */
.miles-booked__add {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: var(--color-sage-soft);
  border: 1px solid rgba(44, 95, 90, 0.2);
  border-radius: 12px;
}

.miles-booked__add-label {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.miles-booked__add-row {
  display: grid;
  /* The field is capped: a name is not 800 characters long, and a box far
     wider than its contents invites a sentence. */
  grid-template-columns: minmax(0, 320px) auto;
  /*
   * Without this the track sized "auto" takes every spare pixel in the row,
   * because a grid stretches its columns by default - which turned Add into
   * a 1200px slab beside a 320px field. Packed to the start, each column is
   * the size of what is in it.
   */
  justify-content: start;
  gap: 10px;
  align-items: start;
}

.miles-booked__add-input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 11px 14px;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  /* 17px: below that iOS zooms the page on focus and leaves the visitor
     scrolled sideways into a form they cannot see. */
  font-size: 17px;
  background: #ffffff;
  border: 1px solid rgba(44, 95, 90, 0.3);
  border-radius: 8px;
}

.miles-booked__add-input:focus-visible {
  border-color: var(--color-brand);
  outline: 3px solid var(--color-cta);
  outline-offset: 1px;
}

.miles-booked__add-input[aria-invalid="true"] { border-color: #8a2f1d; }

.miles-booked__add-input::placeholder {
  color: var(--color-text-soft);
  opacity: 0.75;
}

/* Solid, and the same height as the field it belongs to. */
.miles-booked__add-btn {
  min-width: 96px;
  min-height: 48px;
  padding: 11px 22px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  background: var(--color-brand);
  border: 2px solid var(--color-brand);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.miles-booked__add-btn:hover {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

.miles-booked__add-btn:focus-visible {
  outline: 3px solid var(--color-cta);
  outline-offset: 2px;
}

/* Beside the field it is about, not at the foot of the block. */
.miles-booked__add-msg {
  margin: 0;
  color: #8a2f1d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.miles-booked__add-msg[hidden] { display: none; }

/* ---- the count ---- */

/*
 * The sentence that says what just happened. White on the engine's sage
 * panel, because a sage box inside a sage panel cannot be seen - and being
 * seen after the button is pressed is the whole job.
 */
.miles-booked__party-count {
  margin: 0;
  padding: 12px 16px;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
  background: #ffffff;
  border: 1px solid rgba(44, 95, 90, 0.18);
  border-radius: 10px;
}

.miles-booked__party-count strong { font-weight: 700; }

/* Spoken, never seen. */
.miles-booked__party-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  /*
   * Remove drops below the name rather than squeezing it. At 360px a
   * three-column row leaves about twelve characters for the name, which is
   * narrower than most of the names going into it.
   */
  .miles-booked__person { grid-template-columns: 34px 1fr; }
  .miles-booked__person-remove { grid-column: 2; justify-self: start; }

  /* Field and button stack, both full width, so neither is a small target.
     justify-content returns to stretch here, which is what makes them fill. */
  .miles-booked__add-row { grid-template-columns: 1fr; justify-content: stretch; }
  .miles-booked__add-btn { width: 100%; }

  .miles-booked__party-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-booked__add-btn { transition: none; }
}

/* Windows high contrast: the fills go, so the borders have to carry it. */
@media (forced-colors: active) {
  .miles-booked__person,
  .miles-booked__person-remove,
  .miles-booked__add,
  .miles-booked__add-btn,
  .miles-booked__add-input,
  .miles-booked__person-num { border: 1px solid buttontext; }
}

/* ==========================================================================
   NHS Pharmacy First
   ==========================================================================

   The page answers one question - is my problem covered, and can Miles treat
   it - so the coverage lookup is the first thing in the hero and everything
   below it is the same answer at more length.

   Two structural notes. theme.css pads every <section> 108px top and bottom
   with !important, so each section here restates its own padding with
   !important rather than fighting it. And the whole page is left-aligned: the
   old one centred its body copy, which is not what the rest of this site
   does and read like a different website.
   ========================================================================== */

.miles-pf-page {
  --miles-pf-gutter: max(24px, calc((100vw - 1192px) / 2));
}

/* The old page centred everything. Nothing here is centred. */
.miles-pf-page p,
.miles-pf-page h1,
.miles-pf-page h2,
.miles-pf-page h3,
.miles-pf-page li {
  text-align: left;
}

.miles-pf-page .miles-pf-section-head {
  display: grid;
  gap: 8px;
  max-width: 62ch;
  margin-bottom: 30px;
}

.miles-pf-eyebrow {
  margin: 0;
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.miles-pf-heading {
  margin: 0;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.miles-pf-lead {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 17px;
  line-height: 1.6;
}

/* ---- hero ---------------------------------------------------------------
 * The shopfront, scrimmed, with the finder as a white card on it: the same
 * anatomy as the home page hero, which is a dark photographic band carrying
 * a white booking card. This page is the same shape - a hero containing a
 * tool - and had a different, weaker treatment: a pale vertical gradient
 * under a translucent white panel, the one gradient wash on the site, with
 * the finder and the facts drawn as two unrelated objects.
 *
 * The previous note here said no photograph, because the one it replaced was
 * a stock child tinted purple and because an image would push the finder
 * below the fold on a phone. The first half stands - that photograph was
 * wrong. The second is solved rather than avoided: the picture is the ground
 * behind the type, not a block above it, so on a phone it costs no vertical
 * space at all and the finder sits where it did.
 *
 * Decorative, so the <img> carries an empty alt; the address is two lines
 * below it in words.
 */

.miles-pf-hero {
  position: relative;
  isolation: isolate;
  padding: 76px 0 64px !important;
  background: #143430;
  border-bottom: 0;
  overflow: hidden;
}

.miles-pf-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}

.miles-pf-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 42%;   /* the shopfront sits right of centre in the frame */
}

/* Evergreen over the whole frame so white type is legible anywhere on it,
   deeper on the left where the heading runs, lighter on the right so the
   building is still visible behind the facts. */
.miles-pf-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, #143430 0%, rgba(20, 52, 48, 0.96) 40%, rgba(20, 52, 48, 0.9) 68%, rgba(20, 52, 48, 0.87) 100%),
    linear-gradient(180deg, rgba(12, 34, 31, 0.5) 0%, rgba(12, 34, 31, 0) 32%);
}

.miles-pf-hero__inner { display: grid; gap: 14px; }

/*
 * On a wide screen the finder and the facts sit side by side; on a phone the
 * facts drop below, because the finder is what the visitor came for and
 * nothing goes above it. The title and the lead stay full width above both.
 */
@media (min-width: 900px) {
  .miles-pf-hero__inner {
    grid-template-columns: minmax(0, 720px) minmax(260px, 1fr);
    column-gap: 56px;
    align-items: start;
  }
  .miles-pf-hero__eyebrow,
  .miles-pf-hero__title,
  .miles-pf-hero__lead { grid-column: 1 / -1; }
}

/* The facts are no longer a panel competing with the finder: they are a
   ruled list on the band itself, which is what the footer already does with
   its trust line. Dark ground, so nothing here drops below 15px or below
   weight 500 - light strokes bloom and counters close at anything less. */
.miles-pf-facts {
  align-self: start;
  margin-top: 26px;
  padding: 26px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(220, 231, 223, 0.2);   /* level with the finder's */
  border-radius: 0;
}

.miles-pf-facts__list { display: grid; gap: 0; margin: 0; }

.miles-pf-facts__list > div {
  padding: 15px 0;
  border-top: 1px solid rgba(220, 231, 223, 0.2);
}
.miles-pf-facts__list > div:first-child { border-top: 0; padding-top: 0; }

.miles-pf-facts__list dt {
  margin: 0 0 5px;
  color: var(--color-sage, #dce7df);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;     /* the section 25 spec, which this missed */
  text-transform: uppercase;
}

/* Statements, not form labels: the display cut, the same voice as the
   heading above them. */
.miles-pf-facts__list dd {
  margin: 0;
  color: #ffffff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.012em;
}

/* Today's hours under the address: the site's status line, its clock and
   words, in the caveat's voice (10 October 2026). */
.miles-pf-facts__list dd.miles-pf-facts__open {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.86);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}
.miles-pf-facts__open .miles-pf-facts__status { display: inline-flex; align-items: center; }
.miles-pf-facts__open .miles-clock { margin-right: 8px; flex: 0 0 auto; }

/* The cost caveat: attached to the claim it qualifies, and readable. */
.miles-pf-facts__caveat {
  margin-top: 7px !important;
  font-family: "Inter", sans-serif !important;
  font-variation-settings: normal !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.miles-pf-facts__caveat a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.miles-pf-facts__caveat a:hover { text-decoration-thickness: 2px; }

.miles-pf-facts__reg {
  margin: 16px 0 0;
  padding-top: 14px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  line-height: 1.4;
  border-top: 1px solid var(--color-border);
}

.miles-pf-facts__reg strong { color: #ffffff; font-variant-numeric: tabular-nums; }

.miles-pf-hero__eyebrow {
  margin: 0;
  color: var(--color-sage, #dce7df);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;     /* the section 25 spec */
  text-transform: uppercase;
}

/* No exception here: the optical size tracks the rendered size like every
   other heading. Pinned at 72 - a cut drawn for 72pt - the crossbars of the
   E and the F were too fine for the stems beside them at this size, and the
   contrast read as exaggerated; white on evergreen made it worse, because
   light on dark blooms (stems thicken, hairlines thin), the same effect
   section 25 documents for the eyebrows.

   The first correction over-shot: 36 is a text cut, and on a 56px heading it
   took the character out along with the problem, as well as setting the line
   6.5% narrower (529px against 566px for this string). Auto lands on 56 at
   56px, which keeps the contrast that makes the face worth using. Presence
   comes from size instead, which is the honest lever for it: the ceiling
   moves 56 -> 64, still under the home page hero's 84 so the two do not
   compete.

   theme.css sets weight, tracking and its own optical cut on every
   descendant of an h1 with !important, so these carry it themselves - the
   same reason the home page hero's words do (section 11). */
.miles-pf-hero__title,
.miles-pf-hero__title em,
.miles-pf-hero__title span {
  color: #ffffff !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-optical-sizing: auto;
  font-weight: 500 !important;
  letter-spacing: -0.024em !important;
}

.miles-pf-hero__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.04;
  text-wrap: balance;
}

.miles-pf-hero__lead {
  margin: 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.94);
  font-size: 18px;
  font-weight: 500;              /* dark ground: never 400 */
  line-height: 1.6;
}

/* ---- the finder ---------------------------------------------------------
   On the band, not in a card. The white card was the one object in this
   hero from another system: the only pure white on a site whose lightest
   surface is ivory; a rounded-rectangle field, a rounded-rectangle button
   and grey-filled pills, none of them the shapes the rest of the site uses
   (its buttons are pills, its fields 12px); and not a word of the display
   face inside it. A search widget, dropped onto the page. It now shares the
   ground of the facts beside it, and their rule: the question in the
   display cut, the field and the symptom buttons drawn as outlines on the
   evergreen, the site's coral booking pill as the one saturated control in
   the frame, and the safety line at the size and weight the dark-ground
   rule requires (it was 14px regular in the soft grey - the smallest text
   on the page, carrying the sentence that says call 111).

   Built for a thumb on a 360px screen first: the field is full width, the
   button sits under it until there is room beside it, and every symptom
   button is at least 44px tall. */

.miles-pf-finder {
  margin-top: 26px;
  padding: 26px 0 0;
  max-width: 720px;
  background: none;
  border: 0;
  border-top: 1px solid rgba(220, 231, 223, 0.2);   /* the facts' rule, at the same height */
  border-radius: 0;
  box-shadow: none;
}

/* The question the pharmacist asks, set as one. */
.miles-pf-finder__label {
  display: block;
  margin: 0 0 6px;
  color: #ffffff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.miles-pf-finder__hint {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 500;              /* dark ground: never 400 */
  line-height: 1.5;
}

.miles-pf-finder__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.miles-pf-finder__input {
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
  padding: 12px 22px;
  color: #ffffff;
  /* theme.css puts Inter on every input with !important (its line 65), so
     the display cut has to carry the same flag or the field silently falls
     back to a sans - which is how the first render of this shipped a
     synthesised oblique in the placeholder. The serif is deliberate: the
     question above is set in it, and the field is the answer to the
     question, so the two are one voice. */
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-optical-sizing: auto;
  /* Never below 17px: under that iOS zooms the page on focus, and the
     visitor lands scrolled sideways into a form they cannot see. */
  font-size: 19px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;      /* iOS draws an inner shadow otherwise */
  transition: border-color 120ms ease, background-color 120ms ease;
}

.miles-pf-finder__input:hover { border-color: rgba(255, 255, 255, 0.72); }

.miles-pf-finder__input:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  outline: 3px solid var(--color-cta);
  outline-offset: 2px;
}

/* The italic (a real cut, loaded with the family), in a solid sage rather
   than white at reduced alpha: 6.9:1 on the band, and the dark-ground rule
   holds for placeholders too. */
.miles-pf-finder__input::placeholder {
  color: #a9bfb3;
  font-style: italic;
  opacity: 1;
}

/* The site's booking button - pill, coral, the same lift on hover - so the
   one saturated control in the hero is the object the visitor already knows
   from the home page rather than a third kind of button. */
.miles-pf-finder__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 30px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--color-cta);
  border: 2px solid var(--color-cta);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(206, 94, 56, 0.2);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.miles-pf-finder__go:hover,
.miles-pf-finder__go:focus-visible {
  color: #ffffff;
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
  box-shadow: 0 12px 28px rgba(206, 94, 56, 0.26);
  transform: translateY(-1px);
}

.miles-pf-finder__go:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* The arrow moves; the word does not. Inter's arrow sits on the x-height,
   so it is lifted a touch to centre on the capitals beside it. */
.miles-pf-finder__go-arrow { position: relative; top: -0.06em; display: inline-block; transition: transform 120ms ease; }
.miles-pf-finder__go:hover .miles-pf-finder__go-arrow { transform: translateX(3px); }

/* The same key as the facts' labels across the gap: one system. */
.miles-pf-finder__chips-label {
  margin: 22px 0 10px;
  color: var(--color-sage, #dce7df);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;     /* the section 25 spec */
  text-transform: uppercase;
}

.miles-pf-finder__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Outlines on the band, not grey fills. Buttons, not divs: they do
   something, and they have to be reachable by keyboard and announced as
   controls. */
.miles-pf-finder__chip {
  min-height: 44px;
  padding: 10px 18px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.miles-pf-finder__chip:hover,
.miles-pf-finder__chip:focus-visible {
  color: var(--color-brand-dark);
  background: #ffffff;
  border-color: #ffffff;
}

.miles-pf-finder__chip:focus-visible { outline: 3px solid var(--color-cta); outline-offset: 2px; }

/* The safety line, at the size and weight the dark-ground rule sets for
   body copy, ruled off like the rows of the facts beside it. */
.miles-pf-finder__caveat {
  margin: 22px 0 0;
  padding-top: 14px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  border-top: 1px solid rgba(220, 231, 223, 0.2);
}

.miles-pf-finder__caveat a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.miles-pf-finder__caveat a:hover { text-decoration-thickness: 2px; }

/* ---- the answer ---------------------------------------------------------
   Four states, four colours. Green for yes, amber for "we treat this but not
   in your case", blue for "coming this autumn", grey for no. The colour is
   never the only signal: each card opens with a sentence saying which it is. */

.miles-pf-finder__results:empty { display: none; }

.miles-pf-result {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-brand);
  border-radius: 12px;
  background: var(--color-sage-soft);
  box-shadow: var(--shadow-card);   /* the one light object on the band: the answer, arriving */
}

.miles-pf-result--covered { border-left-color: #1f7a4d; background: #eef7f1; }
.miles-pf-result--outside { border-left-color: #a1651b; background: #fdf4e7; }
.miles-pf-result--soon    { border-left-color: #2c5f8a; background: #eef3f8; }
.miles-pf-result--none    { border-left-color: #6b7671; background: #f3f4f3; }

.miles-pf-result__verdict {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.miles-pf-result--covered .miles-pf-result__verdict { color: #196040; }
.miles-pf-result--outside .miles-pf-result__verdict { color: #8a5615; }
.miles-pf-result--soon .miles-pf-result__verdict    { color: #24506f; }
.miles-pf-result--none .miles-pf-result__verdict    { color: #4c5652; }

.miles-pf-result__name {
  margin: 0;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.miles-pf-result__lay,
.miles-pf-result__does,
.miles-pf-result__why,
.miles-pf-result__next {
  margin: 0;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.55;
}

.miles-pf-result__why,
.miles-pf-result__next { color: var(--color-text); }

.miles-pf-result__next { font-weight: 600; }

.miles-pf-result__who { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }

.miles-pf-result__who-key {
  color: var(--color-text-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.miles-pf-result__who-val { color: var(--color-text); font-size: 16px; font-weight: 700; }

.miles-pf-result__free {
  margin: 0;
  color: #196040;
  font-size: 14px;
  font-weight: 700;
}

.miles-pf-result__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 48px;
  margin-top: 4px;
  padding: 12px 24px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  background: var(--color-cta);
  border: 2px solid var(--color-cta);
  border-radius: 999px;            /* the site's button, not a third shape */
  box-shadow: 0 8px 22px rgba(206, 94, 56, 0.2);
}

.miles-pf-result__book:hover,
.miles-pf-result__book:focus-visible { color: #ffffff; background: var(--color-cta-hover); border-color: var(--color-cta-hover); }

/* ---- the seven, as tiles ------------------------------------------------
   Photograph-led, and wider than the text column. The cards were a text list
   in boxes - name, phrase, rule, process, price, button, seven times, inside
   the 1192px measure - correct and forgettable. A picture per condition is
   what makes the row scannable (you find "earache" by the child before you
   read the word), so the picture is the tile and the words sit on it and
   under it. The grid steps out past the column, up to 1400px; the heading
   stays in the column with the rest of the page's text.

   The photograph comes from the page's image field, then from a file shipped
   at assets/img/pf/<id>.jpg, and when neither exists the tile is evergreen
   with the name on it - designed, not a placeholder, so the row holds
   together while photography is still to come.

   Real content, rendered on the server. The finder above is a faster route
   to the same answer, not the only one: if the script never loads this is
   still a readable list of what is covered and who for. */

.miles-pf-cards { padding: 96px 0 !important; background: var(--color-background); }

/* The lead ran the full 1192px column - a 150-character line. */
.miles-pf-cards .miles-pf-lead { max-width: 64ch; }

.miles-pf-tiles {
  --tiles-bleed: calc((100vw - 100%) / 2);      /* the container's side margin */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
  /* Out past the column by up to 104px a side (1192 -> 1400), never nearer
     than 24px to the screen edge. */
  margin: 40px calc(-1 * clamp(0px, var(--tiles-bleed) - 24px, 104px)) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1000px) {
  .miles-pf-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
}

.miles-pf-tile {
  display: grid;
  gap: 10px;
  align-content: start;
  margin: 0;
}

/* The picture is the box. The image and the scrim sit behind the flow
   (z-index -1 inside an isolated context), so the name is ordinary text at
   the foot of the tile and the link's overlay can cover the whole picture. */
.miles-pf-tile__media {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  padding: 18px 20px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-brand-dark);
}

.miles-pf-tile__media img {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.miles-pf-tile:hover .miles-pf-tile__media img,
.miles-pf-tile:focus-within .miles-pf-tile__media img { transform: scale(1.045); }

/* Evergreen from the foot, so white type reads on any photograph; the upper
   part is left alone so the picture is a picture. */
.miles-pf-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 52, 48, 0.94) 0%, rgba(20, 52, 48, 0.62) 32%, rgba(20, 52, 48, 0) 64%);
  pointer-events: none;
}

/* Over a photograph the foot is darker and the dark climbs higher, so the
   name reads on any picture at any width, a two-line name on a phone
   included; a light wash at the top keeps the badge's edge off a bright sky
   (Drew, 10 October 2026, when the seven tiles got their photographs). */
.miles-pf-tile__media--photo::after {
  background:
    linear-gradient(to top, rgba(16, 44, 39, 0.97) 0%, rgba(18, 48, 43, 0.86) 24%, rgba(20, 52, 48, 0.5) 48%, rgba(20, 52, 48, 0) 72%),
    linear-gradient(to bottom, rgba(20, 52, 48, 0.28) 0%, rgba(20, 52, 48, 0) 26%);
}

/* No photograph yet: a quieter field with a little light in the corner. */
.miles-pf-tile__media--blank {
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(220, 231, 223, 0.26), rgba(220, 231, 223, 0) 62%),
    var(--color-brand-dark);
}

.miles-pf-tile__badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  padding: 7px 11px 6px;
  color: var(--color-brand-dark);
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  background: var(--color-background);
  border-radius: 999px;
  pointer-events: none;
}

.miles-pf-tile__name {
  margin: 0;
  color: #ffffff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.miles-pf-tile__link { color: inherit; text-decoration: none; }

/* The whole picture is the target. */
.miles-pf-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.miles-pf-tile__link:focus-visible { outline: none; }
.miles-pf-tile__link:focus-visible::after { outline: 3px solid var(--color-cta); outline-offset: -3px; }

.miles-pf-tile__lay {
  margin: 2px 0 0;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
}

/*
 * A text link that is still a 48px target.
 *
 * As "Book this" set as a plain link this was 92 x 26 on a phone - a thumb
 * aiming at a 26px-tall word, seven times down a page whose whole job is
 * getting somebody to book - which is why it became a button. The target
 * holds at 48px; the fill goes, because seven filled buttons in a grid shout
 * and the coral belongs to the one booking control in the hero.
 */
.miles-pf-tile__book {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  min-height: 48px;
  margin-top: -8px;
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

/* Inter's arrow sits on the x-height; lifted to centre on the capitals. */
.miles-pf-tile__book span[aria-hidden] { position: relative; top: -0.06em; }

.miles-pf-tile__book:hover,
.miles-pf-tile__book:focus-visible {
  color: var(--color-brand-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* The eighth tile: back to the checker. Same box as the pictures. */
.miles-pf-tile__ask {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  aspect-ratio: 4 / 5;
  padding: 22px 22px 24px;
  color: #ffffff;
  text-decoration: none;
  background: var(--color-brand-dark);
  border-radius: 16px;
  transition: background-color 160ms ease;
}

.miles-pf-tile__ask:hover,
.miles-pf-tile__ask:focus-visible { color: #ffffff; background: #143430; }
.miles-pf-tile__ask:focus-visible { outline: 3px solid var(--color-cta); outline-offset: 3px; }

.miles-pf-tile__ask .miles-mark { top: 0; width: 40px; height: 40px; margin-bottom: auto; }
.miles-pf-tile__ask .miles-mark__disc { fill: var(--color-sage); }
.miles-pf-tile__ask .miles-mark__cross { fill: var(--color-brand-dark); }

.miles-pf-tile__ask-title {
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.miles-pf-tile__ask-body {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 500;              /* dark ground: never 400 */
  line-height: 1.5;
}

.miles-pf-tile__ask-cta {
  margin-top: 4px;
  color: var(--color-sage);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.miles-pf-tile__ask:hover .miles-pf-tile__ask-cta { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 999px) {
  /* Two across, so the eighth tile runs the width as a band rather than a
     tall box a phone would have to scroll inside. */
  .miles-pf-tile--ask { grid-column: 1 / -1; }
  .miles-pf-tile__ask { aspect-ratio: auto; gap: 8px; padding: 20px; }
  .miles-pf-tile__ask .miles-mark { margin-bottom: 4px; }
}

@media (max-width: 620px) {
  .miles-pf-tiles { gap: 22px 12px; margin-top: 32px; }
  .miles-pf-tile__media { padding: 14px; border-radius: 14px; }
  .miles-pf-tile__link::after { border-radius: 14px; }
  .miles-pf-tile__name { font-size: 20px; }
  .miles-pf-tile__badge { top: 10px; right: 10px; padding: 6px 9px 5px; font-size: 12px; }
  .miles-pf-tile__lay { font-size: 14px; }
  .miles-pf-tile__book { font-size: 15px; }
  .miles-pf-tile__ask-title { font-size: 22px; }
}

.miles-pf-checked,
.miles-pf-updated {
  margin: 26px 0 0;
  color: var(--color-text-soft);
  font-size: 14px;
  line-height: 1.5;
}

.miles-pf-updated {
  width: min(100% - 48px, 1192px);
  margin-inline: auto;
  padding-bottom: 8px;
}

/* ---- five more from this autumn -------------------------------------------
   A band, not a section of boxes. It was a sage section holding a paragraph,
   five white rows and an amber-edged callout - three treatments for one
   idea. Now the copy sits beside the five as a ruled list, the anatomy of
   the facts in the hero, on evergreen: the change of ground is what says
   "these are not the seven above". Dark ground, so nothing here drops below
   15px or weight 500. */

.miles-pf-autumn {
  padding: 88px 0 !important;
  color: #ffffff;
  background: var(--color-brand-dark);
}

.miles-pf-autumn__inner { display: grid; gap: 40px; }

@media (min-width: 900px) {
  .miles-pf-autumn__inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
    column-gap: 80px;
    align-items: start;
  }
}

.miles-pf-autumn__eyebrow {
  margin: 0 0 12px;
  color: var(--color-sage, #dce7df);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;     /* the section 25 spec */
  text-transform: uppercase;
}

/* theme.css sets weight and tracking on every h2 with !important. */
.miles-pf-autumn__title {
  margin: 0 0 22px;
  max-width: 16ch;
  color: #ffffff !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-optical-sizing: auto;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 500 !important;
  line-height: 1.08;
  letter-spacing: -0.015em !important;
  text-wrap: balance;
}

.miles-pf-autumn__lead {
  margin: 0;
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.94);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
}

/* The rollout caveat: a paragraph with the rule above it, not a box. */
.miles-pf-autumn__note {
  margin: 22px 0 0;
  max-width: 58ch;
  padding-top: 18px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  border-top: 1px solid rgba(220, 231, 223, 0.2);
}

.miles-pf-autumn__note strong { color: #ffffff; font-weight: 700; }

.miles-pf-autumn__us {
  margin: 12px 0 0;
  color: var(--color-sage, #dce7df);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.miles-pf-autumn__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(220, 231, 223, 0.2);
}

.miles-pf-autumn__list li {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(220, 231, 223, 0.2);
}

.miles-pf-autumn__name {
  color: #ffffff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.miles-pf-autumn__who {
  color: var(--color-sage, #dce7df);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

/* ---- what to expect ------------------------------------------------------
   The appointment, what it costs, and when to go elsewhere: one section
   where there were three, on the sage ground between the evergreen band
   above and the questions below. Ruled, not boxed - three white cards with
   green numbered discs, a green-edged cost box and a pink-edged urgent box
   were three more component treatments on a page that had just been given
   one.

   The step and the urgent row are shared with the condition pages, which
   keep them inside their own .miles-pf-steps and .miles-pf-elsewhere
   sections; the rules below style the component wherever it appears. */

.miles-pf-expect { padding: 96px 0 !important; background: var(--color-sage-soft); }

/* The condition pages' own sections, carrying the same components. */
.miles-pf-steps { padding: 88px 0 !important; background: var(--color-background); }
.miles-pf-elsewhere { padding: 88px 0 !important; background: var(--color-sage-soft); }

.miles-pf-steps__list {
  display: grid;
  gap: 0;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 900px) {
  .miles-pf-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
}

/* A number, a rule, a title, a sentence. On a phone the number sits beside
   the text so the three read as a list; from 900px each is a column. */
.miles-pf-step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
  align-content: start;          /* three columns of unequal copy: the titles stay level */
  margin: 0;
  padding: 20px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 0;
}

@media (min-width: 900px) {
  .miles-pf-step { grid-template-columns: minmax(0, 1fr); padding: 22px 0 0; }
}

.miles-pf-step__num {
  display: block;
  width: auto;
  height: auto;
  margin-top: 2px;
  color: var(--color-brand);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 44px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  background: none;
  border-radius: 0;
  place-items: unset;
}

@media (min-width: 900px) {
  .miles-pf-step__num { margin: 0 0 14px; font-size: 52px; }
}

.miles-pf-step__body { display: grid; gap: 8px; }

/* theme.css sets weight and its own optical cut on every h3 with !important. */
.miles-pf-step__title {
  margin: 0;
  color: var(--color-text) !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-optical-sizing: auto;
  font-size: 23px;
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: -0.012em !important;
}

.miles-pf-step__body p { margin: 0; color: var(--color-text-soft); font-size: 16px; line-height: 1.6; }

/* The footnote the old hero's "Free*" never had, as a ruled row. */
.miles-pf-expect__cost {
  margin: 40px 0 0;
  padding: 20px 0;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
  border-top: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-bottom: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
}

.miles-pf-expect__cost strong { color: var(--color-text); font-weight: 700; }
.miles-pf-expect__cost a { color: var(--color-brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* When to go elsewhere: the copy on the left, the two numbers on the right. */
.miles-pf-expect__elsewhere { display: grid; gap: 28px; margin-top: 72px; }

@media (min-width: 900px) {
  .miles-pf-expect__elsewhere {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 72px;
    align-items: start;
  }
}

.miles-pf-expect__elsewhere-copy > p:last-child {
  margin: 0;
  max-width: 44ch;
  color: var(--color-text-soft);
  font-size: 17px;
  line-height: 1.6;
}

.miles-pf-expect__elsewhere-title {
  margin: 10px 0 14px;
  color: var(--color-text) !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-optical-sizing: auto;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 500 !important;
  line-height: 1.1;
  letter-spacing: -0.015em !important;
}

/* The urgent rows: the number large beside the sentence, rust for 999 and
   evergreen for 111, on a rule - the seriousness is in the type, not in a
   pink box. The number is drawn by the modifier so the row's own text is
   what a screen reader gets; the alternative-text form of content keeps
   the generated number out of the accessibility tree. */
.miles-pf-urgent {
  display: grid;
  gap: 0;
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 0;
}

.miles-pf-urgent__row {
  position: relative;
  display: block;
  margin: 0;
  padding: 18px 0 18px 86px;     /* room for the number */
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
  border-bottom: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
}

@media (min-width: 620px) {
  .miles-pf-urgent__row { padding: 22px 0 22px 124px; }
}

/* The number is drawn absolutely, not as a grid cell: in a grid the bare
   text after <strong> becomes its own item and wraps under the number. */
.miles-pf-urgent__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;                     /* cap height level with the first line's */
  color: var(--color-brand-dark);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 40px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 620px) {
  .miles-pf-urgent__row::before { top: 23px; font-size: 52px; }
}

/* On the condition pages the rows follow the heading directly. */
.miles-pf-elsewhere .miles-pf-urgent { margin-top: 36px; }

.miles-pf-urgent__row--999::before { content: "999" / ""; color: #8a2f1d; }
.miles-pf-urgent__row--111::before { content: "111" / ""; }

.miles-pf-urgent__row strong { color: var(--color-brand-dark); font-weight: 700; }
.miles-pf-urgent__row--999 strong { color: #7a2a1a; }
.miles-pf-urgent__row a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---- phones -------------------------------------------------------------
   Tested at 360px with one thumb before anything else. */

@media (min-width: 620px) {
  /* The button joins the field only when there is room for both. */
  .miles-pf-finder__row { grid-template-columns: 1fr auto; }
}

@media (max-width: 620px) {
  .miles-pf-hero { padding: 40px 0 36px !important; }
  .miles-pf-cards,
  .miles-pf-autumn,
  .miles-pf-expect,
  .miles-pf-steps,
  .miles-pf-elsewhere { padding: 56px 0 !important; }

  .miles-pf-finder { margin-top: 20px; padding-top: 20px; }
  .miles-pf-finder__label { font-size: 26px; }
  /* The facts drop under the finder here, and their rule is the one that
     separates the two. The old 18px inset was the panel's, and the panel
     is gone. */
  .miles-pf-facts { margin-top: 26px; padding: 22px 0 0; }
  .miles-pf-hero__lead { font-size: 17px; }

  /* Two rows of three at 360px, every one a 44px target. */
  .miles-pf-finder__chip { font-size: 14px; padding: 10px 14px; }

  .miles-pf-steps__list { margin-top: 28px; }
  .miles-pf-expect__elsewhere { margin-top: 52px; }

  .miles-pf-result__book { width: 100%; text-align: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-pf-finder__go,
  .miles-pf-finder__go-arrow,
  .miles-pf-finder__input,
  .miles-pf-finder__chip { transition: none; }
  .miles-pf-finder__go:hover { transform: none; }
  .miles-pf-finder__go:hover .miles-pf-finder__go-arrow { transform: none; }
  .miles-pf-tile__media img { transition: none; }
  .miles-pf-tile:hover .miles-pf-tile__media img,
  .miles-pf-tile:focus-within .miles-pf-tile__media img { transform: none; }
}

/* Windows high contrast: the fills go, so the borders carry the states. */
@media (forced-colors: active) {
  .miles-pf-result,
  .miles-pf-tile__media,
  .miles-pf-tile__ask,
  .miles-pf-finder__chip,
  .miles-pf-finder__input,
  .miles-pf-finder__go { border: 1px solid buttontext; }
}

/* ==========================================================================
   Pharmacy First condition pages
   ==========================================================================

   Built on the parent page's type and section rules (.miles-pf-*, above),
   which this page also carries, so the two read as one place. Only what is
   particular to a condition page is here: the photographic hero, the
   eligibility rule, the clinical decision block, the symptom columns and the
   cross-link row.

   Everything is left-aligned. The pages these replace centred their body copy
   throughout, which is not what the rest of this site does and made them read
   like a different website.
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------
   The shopfront, the same photograph the travel and ear pages stand their
   heroes on. What it replaces was a stock man in a red t-shirt clutching his
   throat. */

.miles-pfc-hero {
  position: relative;
  padding: 96px 0 84px !important;
  background-color: var(--color-brand-dark);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;
}

/* The scrim. White type over a photograph needs one, and it is heavier at the
   left where the words are than at the right where the shopfront is. */
.miles-pfc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20, 52, 48, 0.94) 0%, rgba(20, 52, 48, 0.86) 46%, rgba(20, 52, 48, 0.62) 100%);
}

.miles-pfc-hero__inner { display: grid; gap: 14px; justify-items: start; }

.miles-pfc-hero__eyebrow {
  margin: 0;
  color: var(--color-sage);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.miles-pfc-hero__title {
  margin: 0;
  max-width: 20ch;
  color: #ffffff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(32px, 5.4vw, 52px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.015em;
}

.miles-pfc-hero__lead {
  margin: 0;
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1.6;
}

.miles-pfc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.miles-pfc-chips li {
  padding: 8px 15px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.miles-pfc-hero__cta {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-top: 8px;
  padding: 14px 26px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  background: var(--color-cta);
  border-radius: 10px;
}

.miles-pfc-hero__cta:hover { background: var(--color-cta-hover); color: #ffffff; }

/* ---- who this covers ---------------------------------------------------- */

.miles-pfc-elig { padding: 80px 0 !important; background: var(--color-background); }

.miles-pfc-elig__body { display: grid; gap: 16px; max-width: 70ch; }

.miles-pfc-elig__body p { margin: 0; color: var(--color-text); font-size: 17px; line-height: 1.65; }

/* The age range, stated once and hard to miss. It is the detail every other
   pharmacy page leaves the visitor to discover at the counter. */
.miles-pfc-elig__rule {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 14px 18px;
  background: var(--color-sage-soft);
  border-left: 5px solid var(--color-brand);
  border-radius: 10px;
}

.miles-pfc-elig__key {
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.miles-pfc-elig__val { color: var(--color-text); font-size: 19px; font-weight: 700; }

/* ---- how the pharmacist decides ----------------------------------------
   The reason the page exists. Given the evergreen band so it reads as the
   centrepiece rather than as one more block of body copy. */

.miles-pfc-decision {
  padding: 88px 0 !important;
  color: #ffffff;
  background: var(--color-brand-dark);
}

.miles-pfc-decision .miles-pf-eyebrow { color: var(--color-sage); }
.miles-pfc-decision .miles-pf-heading { color: #ffffff; }

.miles-pfc-decision__body { display: grid; gap: 18px; max-width: 70ch; }

.miles-pfc-decision__body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  line-height: 1.68;
}

/* The score. Numbered, because it is a count - you get a point for each. */
.miles-pfc-score {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pfc-score;
}

.miles-pfc-score li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  counter-increment: pfc-score;
}

.miles-pfc-score li::before {
  content: "+1";
  display: grid;
  width: 30px;
  height: 30px;
  color: var(--color-brand-dark);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  background: var(--color-sage);
  border-radius: 50%;
  place-items: center;
}

.miles-pfc-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.miles-pfc-outcome {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
}

.miles-pfc-outcome__label {
  margin: 0;
  color: var(--color-sage) !important;
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.miles-pfc-outcome__body { margin: 0; font-size: 16px !important; line-height: 1.55 !important; }

/* The line that stops this reading as a pharmacy being difficult. */
.miles-pfc-decision__closing {
  padding: 16px 18px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border-left: 5px solid var(--color-cta);
  border-radius: 10px;
}

/* ---- causes and symptoms ------------------------------------------------ */

.miles-pfc-about { padding: 80px 0 !important; background: var(--color-background); }

.miles-pfc-about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.miles-pfc-about__col { display: grid; gap: 12px; align-content: start; }

.miles-pfc-about__col p { margin: 0; color: var(--color-text-soft); font-size: 17px; line-height: 1.65; }

.miles-pf-heading--sm { font-size: clamp(22px, 2.6vw, 28px); }

.miles-pfc-symptoms {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-pfc-symptoms li {
  position: relative;
  padding-left: 28px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
}

.miles-pfc-symptoms li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 6px;
  width: 8px;
  height: 8px;
  background: var(--color-brand);
  border-radius: 50%;
}

.miles-pfc-symptoms__note { font-style: italic; }

/* ---- the other conditions ----------------------------------------------- */

.miles-pfc-cross { padding: 80px 0 !important; background: var(--color-sage-soft); }

.miles-pfc-cross__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-pfc-cross__list a {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 16px 18px;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.miles-pfc-cross__list a:hover { border-color: var(--color-brand); }

.miles-pfc-cross__list strong { color: var(--color-text); font-size: 17px; font-weight: 700; line-height: 1.25; }
.miles-pfc-cross__list span { color: var(--color-text-soft); font-size: 15px; line-height: 1.45; }

.miles-pfc-cross__up { margin: 22px 0 0; }

.miles-pfc-cross__up a {
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.miles-pfc-cross__up a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- phones ------------------------------------------------------------- */

@media (max-width: 620px) {
  .miles-pfc-hero { padding: 56px 0 48px !important; }
  .miles-pfc-hero__lead { font-size: 17px; }
  .miles-pfc-hero__cta { width: 100%; justify-content: center; }

  .miles-pfc-elig,
  .miles-pfc-about,
  .miles-pfc-cross { padding: 56px 0 !important; }
  .miles-pfc-decision { padding: 56px 0 !important; }

  .miles-pfc-about__grid { gap: 32px; }
  .miles-pfc-elig__val { font-size: 17px; }
}

@media (forced-colors: active) {
  .miles-pfc-score li,
  .miles-pfc-outcome,
  .miles-pfc-cross__list a,
  .miles-pfc-chips li { border: 1px solid buttontext; }
}

/* ==========================================================================
   Pharmacy First: three sections that were half empty
   ==========================================================================

   The autumn section, the three steps and "when to go elsewhere" each capped
   their prose at 70ch - correct for reading - and then sat that column inside
   a 1192px container on its own. Measured at 1440px, all three left 485px of
   nothing down the right, one after another, which is the emptiest stretch of
   the page.

   Nothing is invented to fill it. Each of the three already had a second
   element underneath the prose - the five new pathways, the cost note, the
   red-flag box - and each is now beside it instead. The prose keeps its
   measure, the section stops being half a page wide, and the thing a reader
   most often wants next to the text is next to the text.
   ========================================================================== */

.miles-pf-autumn__grid,
.miles-pf-steps__grid,
.miles-pf-elsewhere__grid {
  display: grid;
  gap: 28px 44px;
}

/*
 * 980px, not the usual 900: the left column is 70ch of 17px prose, so below
 * about this width the right column has to give up more than it gains and the
 * two read better stacked.
 */
@media (min-width: 980px) {
  .miles-pf-autumn__grid,
  .miles-pf-steps__grid,
  .miles-pf-elsewhere__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    align-items: start;
  }
}

/* The prose column keeps its own measure inside the grid. */
.miles-pf-autumn__grid > .miles-pf-autumn__body,
.miles-pf-elsewhere__grid > .miles-pf-elsewhere__body { max-width: 66ch; }

.miles-pf-steps__grid > .miles-pf-steps__list { max-width: none; }

/* ---- the autumn aside ---- */

.miles-pf-autumn__side {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
}

.miles-pf-side-title {
  margin: 0;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Stacked inside the narrower column: name over age, not name beside age. */
.miles-pf-autumn__side .miles-pf-autumn__list li {
  display: grid;
  gap: 2px;
  padding: 11px 13px;
  background: var(--color-sage-soft);
  border-color: transparent;
}

.miles-pf-autumn__side .miles-pf-note { font-size: 15px; padding: 12px 14px; }

/* ---- the practical facts beside the steps ---- */

.miles-pf-steps__side {
  align-self: start;
  padding: 22px;
  background: var(--color-sage-soft);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}

.miles-pf-steps__side .miles-pf-facts__list { display: grid; gap: 15px; margin: 0; }

.miles-pf-steps__side dt {
  margin: 0 0 3px;
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.miles-pf-steps__side dd {
  margin: 0;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
}

.miles-pf-steps__side dd a { color: var(--color-brand); font-weight: 600; }

/* Day and time on one row, the time hard right, so the week reads as a table
   without being one. */
.miles-pf-facts__hours {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.miles-pf-facts__hours + .miles-pf-facts__hours { margin-top: 3px; }

.miles-pf-facts__tel {
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.miles-pf-facts__tel:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- the red flags beside the paragraph ---- */

.miles-pf-elsewhere__grid > .miles-pf-urgent { align-self: start; margin: 0; }

@media (max-width: 979px) {
  /* Stacked: the aside goes under the prose it belongs to, full width. */
  .miles-pf-autumn__side,
  .miles-pf-steps__side { padding: 18px; }
}

@media (forced-colors: active) {
  .miles-pf-autumn__side,
  .miles-pf-steps__side { border: 1px solid buttontext; }
}

/* ==========================================================================
   "When to go elsewhere" as its own notice
   ==========================================================================

   It had been folded into the bottom of "what happens at your appointment",
   under a rule, so one section carried two unrelated jobs: how a routine
   appointment goes, and how to tell you are too ill for one. Sharing a
   heading level and a background made the second read as a footnote to the
   first, which for 999 advice is the wrong register entirely.

   It is a section of its own now, and the whole of it sits in one panel. The
   red flags are a notice, and a notice needs an edge: loose in a column they
   read as more body copy.
   ========================================================================== */

/*
 * A different ground from the condition pages use. On the parent this follows
 * the sage "what to expect" band, so keeping the sage would put it straight
 * back where it came from - looking like the bottom of the section above.
 */
.miles-pf-elsewhere--panel { background: var(--color-background); }

.miles-pf-elsewhere__panel {
  display: grid;
  gap: 28px;
  padding: 36px;
  background: var(--color-card, #ffffff);
  border: 1px solid var(--color-border);
  /* The one edge that carries the warning. Left, not all four, so the panel
     reads as a page element with a flag on it rather than as an alert box. */
  border-left: 6px solid #8a2f1d;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

@media (min-width: 900px) {
  .miles-pf-elsewhere__panel {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
    column-gap: 56px;
    align-items: start;
    padding: 44px 48px;
  }
}

.miles-pf-elsewhere__copy { display: grid; gap: 10px; align-content: start; }

.miles-pf-elsewhere__copy .miles-pf-heading { font-size: clamp(26px, 3.2vw, 34px); }

.miles-pf-elsewhere__lead {
  margin: 0;
  max-width: 46ch;
  color: var(--color-text-soft);
  font-size: 17px;
  line-height: 1.6;
}

/* The two rows, ruled apart rather than boxed - the panel is already the box. */
.miles-pf-elsewhere__panel .miles-pf-urgent {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/*
 * The row keeps its own padding, untouched.
 *
 * The big 999 and 111 are drawn as an absolutely positioned ::before at
 * left: 0, and the row's 124px of left padding is the room they sit in. This
 * block originally reset the padding to "18px 0" to tidy the rhythm, which
 * took that room away - so both numerals rendered on top of the sentence they
 * belong to, at 52px, in dark red. Only the rule between rows is set here;
 * the spacing is the component's.
 */
.miles-pf-elsewhere__panel .miles-pf-urgent__row {
  margin: 0;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
  border-bottom: 0;
}

.miles-pf-elsewhere__panel .miles-pf-urgent__row + .miles-pf-urgent__row {
  border-top: 1px solid var(--color-border);
}

/* 999 is the one to find at a glance; 111 is the same weight in evergreen. */
.miles-pf-elsewhere__panel .miles-pf-urgent__row--999 strong { color: #8a2f1d; }
.miles-pf-elsewhere__panel .miles-pf-urgent__row--111 strong { color: var(--color-brand-dark); }
.miles-pf-elsewhere__panel .miles-pf-urgent__row strong { font-weight: 700; }
.miles-pf-elsewhere__panel .miles-pf-urgent__row a { color: inherit; font-weight: 700; }

@media (max-width: 899px) {
  .miles-pf-elsewhere__panel { padding: 24px; border-radius: 14px; }
}

@media (forced-colors: active) {
  .miles-pf-elsewhere__panel { border: 1px solid buttontext; }
}

/* ==========================================================================
   A date chosen from the calendar has to look chosen
   ==========================================================================

   Picking one of the seven quick dates fills that chip in evergreen. Picking
   anything else - through "Choose another date" - filled nothing: the seven
   chips all read unselected, and the only sign was the button's own label
   quietly changing from "Choose another date" to "Wed 30 Sept", in the same
   grey it had a moment before.

   So the page showed a booking for the 30th with no selection visible
   anywhere, seven unselected dates above it, and (until the JavaScript change
   alongside this) a line underneath offering the 16th. This gives the button
   the same filled state the chips use, so there is always exactly one filled
   control in that row.
   ========================================================================== */

.miles-appointment-engine__other-date-btn.is-chosen {
  color: #ffffff;
  background: var(--color-brand);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-selected);
}

.miles-appointment-engine__other-date-btn.is-chosen:hover,
.miles-appointment-engine__other-date-btn.is-chosen:focus-visible {
  color: #ffffff;
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

/*
 * The date it holds is the point, so it is set at the weight the chips use for
 * theirs rather than at the size of a secondary control's label.
 */
.miles-appointment-engine__other-date-btn.is-chosen { font-size: 15px; font-weight: 700; }

@media (forced-colors: active) {
  .miles-appointment-engine__other-date-btn.is-chosen { border: 2px solid buttontext; }
}

/* ==========================================================================
   Reveal on scroll: the generic vocabulary
   ==========================================================================

   miles-reveal.js arms anything carrying data-miles-reveal and marks it
   .is-revealed the first time enough of it is on screen. Components with an
   entrance of their own (the three steps, the questions, the map, the
   closing band, the footer's rule) keep their own rules. Everything else
   uses one of two values, so a section gets the same entrance as its
   neighbours without a block of CSS each - Drew, 16 September 2026: some
   sections have motion and some do not, and the three steps are the model.

     data-miles-reveal="rise"     the element itself rises and fades in
     data-miles-reveal="stagger"  its direct children rise in turn, one
                                  --reveal-step apart (90ms unless a
                                  component sets its own); the script
                                  numbers them in --i

   The steps' own curve and duration. Nothing is hidden without the script,
   nothing is armed under reduced motion, and the script reveals a tall
   container once a third of the screen's height of it is visible, so a
   long list does not wait for a quarter of itself.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  [data-miles-reveal="rise"].is-armed {
    opacity: 0;
    transform: translateY(18px);
  }

  [data-miles-reveal="rise"].is-revealed {
    animation: miles-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms) forwards;
  }

  [data-miles-reveal="stagger"].is-armed > * {
    opacity: 0;
    transform: translateY(18px);
  }

  [data-miles-reveal="stagger"].is-revealed > * {
    animation: miles-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--reveal-delay, 0ms) + var(--i, 0) * var(--reveal-step, 90ms));
  }

  /* Per component: the pace that suits the count. */
  .miles-directory__inner { --reveal-step: 140ms; }   /* head, then each journey */
  .miles-hub__grid,
  .miles-team__track { --reveal-step: 110ms; }
  .miles-reviews__body { --reveal-delay: 160ms; }   /* after its own head */
}

/* ==========================================================================
   The service hero's entrance, and the rules that draw on the service pages
   ==========================================================================

   The Travel Clinic (and every page on the same hero, .service-location-hero)
   arrives the way the home page does: eyebrow, then the headline word by
   word, then a rule drawn under it, then the location block, the assurances
   and the button, each waiting for the last. Same knobs as the home hero,
   same curve, same drawn hairline - one gesture across the site's heroes.
   Load animation, so it needs no script; nothing runs under reduced motion,
   and without motion the rule is simply there. */

.service-location-hero {
  --hero-base: 160ms;
  --hero-stagger: 70ms;
  --hero-word: 0.9s;
}

/* theme.css sets colour, weight, tracking and its optical cut on every
   descendant of an h1 with !important (its "h1 *" rule); the words take the
   heading's own. Colour first: without it the words render in the text
   colour, dark on the evergreen - the first render of this had an
   invisible headline. */
.service-location-hero h1 .home-hero__word {
  color: #ffffff !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  font-optical-sizing: auto;
}

.service-location-hero h1 {
  position: relative;
  padding-bottom: 22px;
}

.service-location-hero h1::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(220, 231, 223, 0.55), rgba(220, 231, 223, 0.18));
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .service-location-hero h1 .home-hero__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    animation: miles-rise var(--hero-word) cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--hero-base) + var(--i, 0) * var(--hero-stagger));
  }

  /* Five words: the last starts at base + 4 stagger, the rule at base + 5. */
  .service-location-hero h1::after {
    transform: scaleX(0);
    animation: miles-draw-x 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--hero-base) + 5 * var(--hero-stagger));
  }

  .service-location-hero .service-location-breadcrumb,
  .service-location-hero .health-hub-eyebrow,
  .service-location-hero__pharmacy,
  .service-location-trust,
  .service-location-hero__cta {
    opacity: 0;
    transform: translateY(16px);
    animation: miles-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }

  .service-location-hero .service-location-breadcrumb { animation-delay: 0ms; animation-duration: 0.6s; }
  .service-location-hero .health-hub-eyebrow { animation-delay: 80ms; }
  .service-location-hero__pharmacy { animation-delay: calc(var(--hero-base) + 5 * var(--hero-stagger) + 260ms); }
  .service-location-trust           { animation-delay: calc(var(--hero-base) + 5 * var(--hero-stagger) + 420ms); }
  .service-location-hero__cta       { animation-delay: calc(var(--hero-base) + 5 * var(--hero-stagger) + 580ms); }
}

/* The booking bar under the hero keeps its rule; it is drawn as the bar
   arrives. The reveal class lands on the bar's inner container (the bar
   itself is sticky and stays untransformed), so the rule keys on :has();
   a browser without it shows the rule from the start. */
.service-location-booking-bar {
  position: sticky;
  border-bottom: 0;
}

.service-location-booking-bar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .service-location-booking-bar:has(.is-armed)::after { transform: scaleX(0); }
  .service-location-booking-bar:has(.is-revealed)::after {
    animation: miles-draw-x 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
  }

  /* Per component, the pace that suits the count. */
  .service-location-copy       { --reveal-step: 90ms; }    /* eyebrow, heading, three paragraphs, button */
  .service-location-intro__map { --reveal-delay: 240ms; }  /* after the copy has begun */
  .service-location-guide-grid { --reveal-step: 140ms; }   /* two panels */
  .miles-guides__grid          { --reveal-step: 110ms; }
  .miles-hours-section__table  { --reveal-delay: 200ms; }
}

/* ==========================================================================
   Destination travel-health pages
   ==========================================================================

   One country per page, all on the service-page furniture: the shared hero,
   the booking mount, the map, the hours and the closing band are the site's
   own components. Only what a destination page needs that nothing else does
   is here: the vaccine tiers, the malaria band, the trip profiles and the
   dated notices.

   The money rules are in the markup, not here, but they show up in these
   styles: a vaccine the pharmacy doesn't supply gets the same row as one it
   does, with "Not given here" where the price would be, so it reads as an
   answer rather than a gap. Same for a profile the build couldn't total.
   ------------------------------------------------------------------------ */

/* Editors only, and only before sign-off. */
.miles-dest__draft {
  margin: 0;
  padding: 14px clamp(24px, 4vw, 72px);
  color: #7a2a1a;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  background: #fdeeee;
  border-bottom: 1px solid rgba(138, 47, 29, 0.28);
}
.miles-dest__draft strong { font-weight: 700; }

/* The hero's opening paragraph.
   Its bottom margin was zero, so the assurance marks sat one pixel under the
   last line of prose and the two read as one block: 14px, 26px and 33px of air
   everywhere else in this hero, and 1px at the join that most needed it. The
   space goes on the paragraph rather than on the marks, because the paragraph
   is hidden below 900px and its margin has to go with it -- there the marks
   follow the rule under the title and are already clear. 32px matches the
   list's own bottom margin, so the marks sit in a band of their own. */
.miles-dest__lede {
  max-width: 62ch;
  margin-bottom: 32px;
}

/* ---- the vaccine ledger -------------------------------------------------
   Every vaccine the guidance mentions, one line each: the name, who it is
   for (the first sentence of the note), the course, the price. A row opens
   to the rest the way a question opens on the home page, and the two share
   an anatomy on purpose - the same hairlines, the same ring-and-cross mark,
   the same animated panel - so this section and the questions below it
   read as one page rather than two designs.

   The trip selector above the rows is the build's profiles, which used to
   be a section of their own: five names, five prices, and none of the
   substance. Choosing a trip marks each row (likely / worth discussing /
   not usually) and folds the last group away; the readout carries the
   from-price the renderer has already checked against the priced rows.
   Every state the selector produces is a data-attribute on the ledger or on
   a row, so the states live here and the script only sets names.

   The money rules are in the markup: a vaccine the pharmacy doesn't supply
   has the same row as one it does, with "Not given here" where the price
   goes, so it reads as an answer rather than a gap. */

.miles-dest-vax { padding: 96px 0 !important; background: var(--color-background); }

.miles-ledger {
  /* name | who it is for | course | price | mark */
  --ledger-cols: minmax(0, 1.1fr) minmax(0, 1.9fr) minmax(0, 1fr) 112px 40px;
  --ledger-gap: 28px;
}

/* The head of a destination section: two columns, like the questions' head
   further down. Shared by the ledger and by Worth knowing. */
.miles-dest-head { display: grid; gap: 10px 80px; margin-bottom: 44px; }

@media (min-width: 900px) {
  /* The lead is usually the tallest thing here. It spans both rows; the
     first row takes the slack, so the eyebrow sits just above the heading
     and the heading's baseline meets the lead's last line. */
  .miles-dest-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.7fr);
    grid-template-rows: 1fr auto;
    align-items: end;
  }
  .miles-dest-head .miles-pf-eyebrow { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 2px; }
  .miles-dest-head .miles-pf-heading { grid-column: 1; grid-row: 2; }
  .miles-dest-head .miles-pf-lead    { grid-column: 2; grid-row: 1 / 3; align-self: end; }

  /* A head with no lead: one column, so the heading takes the width the
     lead used to share rather than wrapping inside a 1.15fr column with a
     hole beside it. The rows go back to auto, because the slack the first
     row absorbed was the difference between the heading and the lead. */
  .miles-dest-head--solo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .miles-dest-head--solo .miles-pf-heading { max-width: 20ch; }
}

/* ---- the trip selector ---- */

.miles-ledger__trips { min-width: 0; margin: 0 0 30px; padding: 0; border: 0; }

.miles-ledger__trips-label {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.miles-ledger__chips { display: flex; flex-wrap: wrap; gap: 10px; --reveal-step: 55ms; }

.miles-ledger__chip { position: relative; margin: 0; }

/* The radio is real and focusable; the pill is its label. */
.miles-ledger__chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
}

.miles-ledger__chip span {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 999px;
  color: var(--color-text);
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.miles-ledger__chip:hover span { background: var(--color-sage-soft, #edf2ed); }

.miles-ledger__chip input:checked + span {
  color: #fff;
  background: var(--color-brand-dark, #204944);
  border-color: var(--color-brand-dark, #204944);
}

.miles-ledger__chip input:focus-visible + span {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 3px;
}

/* ---- the readout: a sentence, and the from-price as a figure ---- */

.miles-ledger__readout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 24px;
}

.miles-ledger__readout-text {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

.miles-ledger__figure {
  margin: 0;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.miles-ledger__figure small {
  margin-right: 8px;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

/* ---- the column header ---- */

.miles-ledger__cols {
  position: relative;
  display: grid;
  grid-template-columns: var(--ledger-cols);
  gap: 0 var(--ledger-gap);
  padding: 0 0 12px;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.miles-ledger__cols-price { text-align: right; }

.miles-ledger__cols::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-border-strong, rgba(44, 95, 90, 0.3));
  transform-origin: left center;
  transition: opacity 0.25s ease;
}

/* With a trip chosen the captions go, and the first row's own rule would
   sit on this one: so this one steps aside. */
.miles-ledger:not([data-trip=""]) .miles-ledger__cols::after { opacity: 0; }

/* ---- the rows ---- */

.miles-ledger__rows { position: relative; --reveal-step: 70ms; }

.miles-ledger__rows::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-ledger__caption {
  margin: 0;
  padding: 26px 0 10px;
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.miles-ledger__caption:first-child { padding-top: 18px; }
.miles-ledger__caption[hidden] { display: none; }

.miles-ledger__item {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.miles-ledger__item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
  transform-origin: left center;
}

.miles-ledger__cell {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease 0.1s, visibility 0s;
}

/* Folded away until asked for. Two reasons a row folds, and they are not the
   same claim. "off" is a trip chosen and this one not usually part of it.
   "tier" is no trip chosen and this one in the guidance's own second group,
   the ones that depend on where you are going -- which the caption above it
   already says, so it carries no tag and keeps its full colour. Only "off"
   is dimmed, because only "off" is a statement about the reader's trip.

   The fold is on the row and the fade on the cell, because the reveal
   animation holds the row's own opacity at 1 once it has played. */
.miles-ledger__item[data-fit="off"],
.miles-ledger__item[data-fit="tier"] { grid-template-rows: 0fr; }
.miles-ledger__item[data-fit="off"] .miles-ledger__cell,
.miles-ledger__item[data-fit="tier"] .miles-ledger__cell {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.45s;
}
.miles-ledger[data-show-all] .miles-ledger__item[data-fit="off"],
.miles-ledger[data-show-all] .miles-ledger__item[data-fit="tier"] { grid-template-rows: 1fr; }
.miles-ledger[data-show-all] .miles-ledger__item[data-fit="off"] .miles-ledger__cell,
.miles-ledger[data-show-all] .miles-ledger__item[data-fit="tier"] .miles-ledger__cell {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease 0.1s, visibility 0s;
}
.miles-ledger__item[data-fit="off"] .miles-ledger__title { color: var(--color-text-soft) !important; }

.miles-ledger__h { margin: 0; }

.miles-ledger__line {
  display: grid;
  grid-template-columns: var(--ledger-cols);
  gap: 6px var(--ledger-gap);
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 22px 0 20px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  text-align: left;
  cursor: pointer;
}

.miles-ledger__line:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: -4px;
  border-radius: 6px;
}

.miles-ledger__name { display: block; min-width: 0; }

/* theme.css styles every descendant of a heading, with !important, so each
   Inter cell says so back. */
.miles-ledger__tag {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 8px 3px;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 4px;
  color: var(--color-text-soft) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.1;
  text-transform: uppercase;
}
.miles-ledger__tag[hidden] { display: none; }

.miles-ledger__item[data-fit="likely"] .miles-ledger__tag {
  color: #fff !important;
  background: var(--color-brand-dark, #204944);
  border-color: var(--color-brand-dark, #204944);
}
.miles-ledger__item[data-fit="discuss"] .miles-ledger__tag {
  color: var(--color-brand-dark, #204944) !important;
  background: var(--color-sage, #dce7df);
  border-color: var(--color-sage, #dce7df);
}

.miles-ledger__title {
  display: block;
  font-size: 22px;
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.015em !important;
  line-height: 1.2;
  text-wrap: balance;
  transition: color 0.2s ease;
}

.miles-ledger__for {
  padding-top: 3px;
  color: var(--color-text) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 15px;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.55;
  text-wrap: pretty;
}

.miles-ledger__course {
  padding-top: 4px;
  color: var(--color-text-soft) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.4;
}

.miles-ledger__price {
  padding-top: 1px;
  color: var(--color-text) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 20px;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em !important;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

/* Not a number: not supplied here, or supplied inside another course.
   Either way the same row, answered rather than blank. */
.miles-ledger__price--none,
.miles-ledger__price--incl {
  padding-top: 5px;
  color: var(--color-text-soft) !important;
  font-size: 13px;
  font-weight: 600 !important;
  line-height: 1.3;
}

/* The ring-and-cross, as on the questions. */
.miles-ledger__mark {
  position: relative;
  width: 40px;
  height: 40px;
  margin-top: -7px;
  border: 1px solid rgba(26, 46, 42, 0.22);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.miles-ledger__mark::before,
.miles-ledger__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--color-brand-dark, #204944);
  transform: translate(-50%, -50%);
  transition: background-color 0.25s ease;
}
.miles-ledger__mark::after { transform: translate(-50%, -50%) rotate(90deg); }

.miles-ledger__line:hover .miles-ledger__title { color: var(--color-brand-dark, #204944) !important; }
.miles-ledger__line:hover .miles-ledger__mark { background: var(--color-sage-soft, #edf2ed); }

.miles-ledger__item[data-open="true"] .miles-ledger__mark {
  border-color: var(--color-brand-dark, #204944);
  background: var(--color-brand-dark, #204944);
  transform: rotate(45deg);
}
.miles-ledger__item[data-open="true"] .miles-ledger__mark::before,
.miles-ledger__item[data-open="true"] .miles-ledger__mark::after { background: #fff; }

/* The rest of the note. Open by default; collapsed and animated once the
   page has JavaScript, exactly as a question's answer is. */
.miles-ledger__panel { display: grid; grid-template-rows: 1fr; }
.miles-ledger__clip { min-height: 0; overflow: hidden; }
.miles-ledger__inner { max-width: 76ch; padding: 0 0 30px; }

.miles-js .miles-ledger__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.5s;
}
.miles-js .miles-ledger__item[data-open="true"] .miles-ledger__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}
.miles-js .miles-ledger__inner {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.miles-js .miles-ledger__item[data-open="true"] .miles-ledger__inner {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}

.miles-ledger__more {
  margin: 0 0 16px;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.miles-ledger__more--ask { color: var(--color-brand); font-weight: 600; }

.miles-ledger__facts { display: grid; gap: 14px 40px; margin: 0; }

/* The vaccine's own page, at the foot of an open row. A quiet link: it is
   the way out of the ledger for someone who wants the whole story on one
   vaccine, not a second call to action competing with the booking. */
.miles-ledger__link-row { margin: 16px 0 0; }

.miles-ledger__link {
  display: inline-flex;
  gap: 7px;
  align-items: baseline;
  color: var(--color-brand, #2c5f5a);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: rgba(44, 95, 90, 0.35);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.miles-ledger__link:hover,
.miles-ledger__link:focus-visible { text-decoration-color: currentColor; }
.miles-ledger__link-mark { transition: transform 0.18s ease; }
.miles-ledger__link:hover .miles-ledger__link-mark { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .miles-ledger__link-mark { transition: none; }
}
@media (min-width: 700px) { .miles-ledger__facts { grid-template-columns: 1fr 1fr; } }
.miles-ledger__facts div { margin: 0; padding-top: 12px; border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); }
.miles-ledger__facts dt {
  margin: 0 0 4px;
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.miles-ledger__facts dd { margin: 0; color: var(--color-text); font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.55; }

/* ---- after the rows ---- */

.miles-ledger__rest {
  margin: 18px 0 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.miles-ledger__rest[hidden] { display: none; }

.miles-ledger__rest-button {
  margin: 0 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-brand-dark, #204944);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.miles-ledger__rest-button:hover { color: var(--color-cta-hover, #ce5e38); }
.miles-ledger__rest-button:focus-visible { outline: 3px solid rgba(232, 115, 74, 0.5); outline-offset: 3px; border-radius: 4px; }

.miles-ledger__rest + .miles-ledger__note { margin-top: 16px; }

.miles-ledger__note {
  margin: 28px 0 0;
  max-width: 70ch;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* ---- motion: rows rise in turn and each draws its rule, as the questions do ---- */

@media (prefers-reduced-motion: no-preference) {
  .miles-ledger__cols.is-armed::after { transform: scaleX(0); }
  .miles-ledger__cols.is-revealed::after {
    animation: miles-draw-x 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
  }

  .miles-ledger__rows.is-armed > .miles-ledger__item::before { transform: scaleX(0); }
  .miles-ledger__rows.is-revealed > .miles-ledger__item::before {
    animation: miles-draw-x 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * var(--reveal-step, 70ms) + 120ms);
  }
}

/* ---- narrower: the line stacks, the column header goes ---- */

@media (max-width: 899px) {
  .miles-ledger__cols { display: none; }
  .miles-ledger__rows { border-top: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3)); }
  .miles-ledger__caption:first-child { padding-top: 22px; }

  .miles-ledger__line {
    grid-template-columns: minmax(0, 1fr) auto 36px;
    grid-template-areas:
      "name   price  mark"
      "for    for    for"
      "course course course";
    gap: 4px 16px;
    padding: 20px 0 18px;
  }
  .miles-ledger__name   { grid-area: name; }
  .miles-ledger__for    { grid-area: for; padding-top: 6px; }
  .miles-ledger__course { grid-area: course; padding-top: 0; }
  .miles-ledger__price  { grid-area: price; }
  .miles-ledger__price--none,
  .miles-ledger__price--incl { text-align: right; max-width: 96px; white-space: normal; }
  .miles-ledger__mark   { grid-area: mark; width: 36px; height: 36px; margin-top: -5px; }
  .miles-ledger__title  { font-size: 20px; }
}

@media (forced-colors: active) {
  .miles-ledger__item::before,
  .miles-ledger__cols::after,
  .miles-ledger__rows::after { background: CanvasText; }
  .miles-ledger__chip input:checked + span { forced-color-adjust: none; color: HighlightText; background: Highlight; border-color: Highlight; }
  .miles-ledger__item[data-fit="likely"] .miles-ledger__tag { forced-color-adjust: none; color: HighlightText !important; background: Highlight; }
}

/* ---- malaria and certificates: a band ----------------------------------
   Evergreen, because it is a change of subject: not what the pharmacy can
   give you, but what the country's risk map and entry rules say. Dark
   ground, so nothing drops below 15px or weight 500. */

.miles-dest-band { padding: 88px 0 !important; color: #fff; background: var(--color-brand-dark); }

.miles-dest-band__inner { display: grid; gap: 40px; }

@media (min-width: 900px) {
  .miles-dest-band__inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
    column-gap: 80px;
    align-items: start;
  }
}

.miles-dest-band__eyebrow {
  margin: 0 0 12px;
  color: var(--color-sage, #dce7df);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.miles-dest-band__title {
  margin: 0 0 22px;
  max-width: 16ch;
  color: #fff !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-optical-sizing: auto;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 500 !important;
  line-height: 1.08;
  letter-spacing: -0.015em !important;
  text-wrap: balance;
}

.miles-dest-band__lead,
.miles-dest-band__note {
  margin: 0;
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.94);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
}

.miles-dest-band__note {
  margin-top: 22px;
  padding-top: 18px;
  font-size: 16px;
  border-top: 1px solid rgba(220, 231, 223, 0.2);
}
.miles-dest-band__note strong { color: #fff; font-weight: 700; }

.miles-dest-band__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(220, 231, 223, 0.2);
}
.miles-dest-band__copy .miles-dest-band__list { margin-top: 30px; }

.miles-dest-band__list li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(220, 231, 223, 0.2);
}

.miles-dest-band__key {
  color: var(--color-sage, #dce7df);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.miles-dest-band__val { color: #fff; font-size: 16px; font-weight: 500; line-height: 1.5; }

/* ---- the split hero: the place, beside the type -------------------------
   With a photograph of the place the hero gives up the shopfront ground and
   splits: type on evergreen, the picture on the right, bleeding to the
   window's edge. The picture is shown near its own size, not stretched
   over the whole ground where an 800px file would go soft, and it carries
   its alt text because it is the subject, not decoration. On a phone it
   follows the button, so nothing pushes the booking below the fold. */

.epsom-location-page .service-location-hero--split {
  background-image: none !important;
  background-color: var(--color-brand-dark, #204944);
}
.epsom-location-page .service-location-hero--split::before { background: none; }

.miles-dest-hero__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Below the split the photograph is the hero's floor rather than a picture
   set into it: clear of the note above, bleeding past both edges of the
   container to the window, flush with the hero's bottom edge, and dissolving
   into the ground at its top the way the desktop one dissolves at its left.
   Four hard edges became none, and the note no longer sits on the picture:
   its last line and the photograph's top edge measured exactly 0px apart.
   Two specificity notes, both learned the hard way. The top margin carries
   the page class because `.service-location-page figure` zeroes every
   figure's top margin at 0-2-0, which a bare `.miles-dest-hero__photo`
   cannot reach: that is why the 28px written here first never applied. And
   the padding restates `main > section` because the ≤420 rule that sets the
   hero's padding is 0-2-2 and important; equal specificity, later in the
   file, so the bottom half of the shorthand loses to this longhand. */
@media (max-width: 899px) {
  .service-location-page main > section.service-location-hero--split {
    padding-bottom: 0 !important;
  }

  .service-location-page .service-location-hero--split .miles-dest-hero__photo {
    margin-top: 40px;
    margin-bottom: 0;   /* the browser's own figure margin, or it stops 16px short */
    margin-inline: calc(50% - 50vw);
  }

  .service-location-hero--split .miles-dest-hero__photo::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
      180deg,
      var(--color-brand-dark, #204944) 0%,
      rgba(32, 73, 68, 0.55) 8%,
      rgba(32, 73, 68, 0) 24%
    );
    pointer-events: none;
  }
}
.miles-dest-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .service-location-hero--split { overflow: hidden; }
  .service-location-hero--split .service-location-hero__content { max-width: 600px; }
  /* The 96px top the shopfront hero wears (line ~9313, at the specificity
     of the `main >` selector, which this restates) sits under its
     photograph and is never seen. Here the photograph starts level with the
     eyebrow, so everything above it is plain ground, and the breadcrumbs
     were adrift a hundred pixels down. The links carry a 44px tap target
     with 10px of it above the text, so 44 puts the crumb text 54px below
     the edge; 36 beneath the strip puts the eyebrow at 126, against 194
     before. The bottom stays at 84: the photograph is flush with it. */
  .service-location-page main > .service-location-hero--split { padding-block: 44px 84px !important; }
  .service-location-hero--split .service-location-breadcrumb { margin-bottom: 36px; }
  /* Top-aligned with the eyebrow (the layout's top), flush with the hero's
     bottom edge (its 84px bottom padding, set at line ~9313) and with the
     window's right edge; the section clips the scrollbar's width of 100vw.
     Not the hero's full height on purpose: with the breadcrumb strip left
     out, the 800px file shows at about its own size rather than 1.4x. */
  .service-location-hero--split .miles-dest-hero__photo {
    position: absolute;
    top: 0;
    bottom: -84px;
    left: calc(50% + 40px);
    right: calc((100% - 100vw) / 2);
    width: auto;
    margin: 0;
    aspect-ratio: auto;
  }
  /* The picture's left edge dissolves into the ground the type sits on. */
  .service-location-hero--split .miles-dest-hero__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--color-brand-dark, #204944) 0%, rgba(32, 73, 68, 0.6) 9%, rgba(32, 73, 68, 0) 26%);
  }
}

/* ---- the band's map ------------------------------------------------------
   Sage lines on evergreen. The coastline draws itself on reveal, the fill
   comes up behind it, the borders the guidance names fade in, then the
   places arrive north to south. Nothing moves under reduced motion or
   without the script, where the map is simply there. */

@media (min-width: 900px) {
  .miles-dest-band--map .miles-dest-band__inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
    align-items: center;   /* the map is a figure; it sits in the middle of the copy's height */
  }
}

.miles-dest-band__figure { margin: 0; }

/* Without a map the second column takes the entry and exit rules, which is
   the seam the band's heading already names. They stack there as they stacked
   under the copy, so the first one leads rather than hanging off a rule. */
.miles-dest-band__figure--certs { display: grid; gap: 22px; align-content: start; }
.miles-dest-band__figure--certs .miles-dest-band__note { margin-top: 0; }
.miles-dest-band__figure--certs .miles-dest-band__note:first-child { padding-top: 0; border-top: 0; }

/* A wide country's map runs out of height halfway down the column, so its
   key comes with it rather than being stranded under the copy. */
.miles-dest-band__figure--keyed { display: grid; gap: 28px; align-content: start; }
.miles-dest-band__figure--keyed .miles-dest-band__list { margin: 0; }

.miles-dest-map { display: block; width: 100%; height: auto; }

.miles-dest-map__land {
  fill: var(--color-sage, #dce7df);
  fill-opacity: 0.09;
  stroke: var(--color-sage, #dce7df);
  stroke-opacity: 0.6;
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* The borders the guidance names, over the outline's own stroke: heavier,
   fully sage, and dashed in units of the path's length (pathLength="1"). */
.miles-dest-map__borders path {
  fill: none;
  stroke: var(--color-sage, #dce7df);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.016 0.011;
}

/* Areas, where the guidance names states rather than towns. Three fills,
   in the key's own order of consequence: terracotta is the one tier that
   changes what a traveller does, and the only warm colour on the map, so it
   is the first thing the eye lands on and the unshaded rest of the country
   makes the proportion plain. White matches the no-risk marks, sage the
   low-risk borders, so the areas and the points read as one drawing.
   3.33:1 against the band, over the 3:1 a graphic needs, and the key says
   the same thing in words either way. */
.miles-dest-map__area {
  stroke-linejoin: round;
  stroke-width: 1.4;
}
.miles-dest-map__area--antimalarials_recommended {
  fill: var(--color-cta, #e8734a);
  fill-opacity: 0.44;
  stroke: var(--color-cta, #e8734a);
}
.miles-dest-map__area--no_risk {
  fill: #fff;
  fill-opacity: 0.34;
  stroke: #fff;
}
.miles-dest-map__area--low {
  fill: var(--color-sage, #dce7df);
  fill-opacity: 0.18;
  stroke: var(--color-sage, #dce7df);
  stroke-opacity: 0.75;
}

.miles-dest-map__place circle {
  fill: #fff;
  stroke: #fff;
  stroke-width: 2;
}
.miles-dest-map__place--very_low circle { fill: var(--color-brand-dark, #204944); }
.miles-dest-map__place--antimalarials_recommended circle {
  fill: var(--color-cta, #e8734a);
  stroke: var(--color-cta, #e8734a);
}

.miles-dest-map__place text {
  fill: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  paint-order: stroke;
  stroke: var(--color-brand-dark, #204944);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* The map is one picture at every width but its labels are not: the SVG
   scales with its column, so a 14-unit label reads at 14px beside the copy
   and 9px on a phone, where the labels used to be hidden and the dots went
   unnamed. Both sets are in the markup, each placed against the dots and
   against each other at its own size; one is shown at a time. The font size
   carries the place selector too, or `.miles-dest-map__place text` outranks
   it and the narrow set renders at 14. */
.miles-dest-map__place .miles-dest-map__label--narrow { display: none; }

@media (max-width: 600px) {
  .miles-dest-map__place .miles-dest-map__label--wide { display: none; }
  .miles-dest-map__place .miles-dest-map__label--narrow {
    display: block;
    font-size: 20px;
    stroke-width: 4px;   /* the halo keeps its weight relative to the letters */
  }
}

/* The key's glyphs are the map's marks, so the two read as one thing. */
.miles-dest-band__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
}
.miles-dest-band__row .miles-dest-band__val { grid-column: 2; }

/* A destination whose tiers no gazetteer can draw has no map, so there are no
   marks for the glyphs to stand for and the key is simply its two lines. */
.miles-dest-band__list--plain .miles-dest-band__row { grid-template-columns: minmax(0, 1fr); }
.miles-dest-band__list--plain .miles-dest-band__row .miles-dest-band__val { grid-column: 1; }

.miles-dest-band__glyph {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  align-self: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-sizing: border-box;
}
.miles-dest-band__glyph--antimalarials_recommended {
  background: var(--color-cta, #e8734a);
  border-color: var(--color-cta, #e8734a);
}
.miles-dest-band__glyph--very_low { background: var(--color-brand-dark, #204944); }
.miles-dest-band__glyph--low {
  width: 18px;
  height: 0;
  border: 0;
  border-top: 2px dashed var(--color-sage, #dce7df);
  border-radius: 0;
  background: none;
}
/* Where a tier is drawn as a shape rather than a stroked border, its glyph
   is that shape: a square for an area, against the circles that stand for
   points. After --low, so it wins for a low-risk area.

   The fill is the one the map shows, which is the tier's colour over the
   land's pale sage, not over the band -- so the glyph is painted in two
   layers, the land underneath and the tier on top, and the key matches what
   the eye actually sees on the map. */
.miles-dest-band__glyph--area {
  width: 13px;
  height: 13px;
  border: 1px solid;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--color-sage, #dce7df) 9%, var(--color-brand-dark, #204944));
  background-image: linear-gradient(currentColor, currentColor);
}
.miles-dest-band__glyph--antimalarials_recommended.miles-dest-band__glyph--area {
  color: color-mix(in srgb, var(--color-cta, #e8734a) 44%, transparent);
  border-color: var(--color-cta, #e8734a);
}
.miles-dest-band__glyph--no_risk.miles-dest-band__glyph--area {
  color: rgba(255, 255, 255, 0.34);
  border-color: #fff;
}
.miles-dest-band__glyph--low.miles-dest-band__glyph--area {
  color: color-mix(in srgb, var(--color-sage, #dce7df) 18%, transparent);
  border-color: color-mix(in srgb, var(--color-sage, #dce7df) 75%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .miles-dest-map.is-armed .miles-dest-map__land { stroke-dashoffset: 1; fill-opacity: 0; }
  .miles-dest-map.is-revealed .miles-dest-map__land {
    animation: miles-map-draw 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards, miles-map-fill 0.8s ease 1.3s forwards;
  }
  .miles-dest-map.is-armed .miles-dest-map__borders path { opacity: 0; }
  .miles-dest-map.is-revealed .miles-dest-map__borders path { animation: miles-map-in 0.6s ease 1.6s forwards; }
  .miles-dest-map.is-armed .miles-dest-map__area {
    opacity: 0;
    transform: scale(0.94);
    transform-box: fill-box;
    transform-origin: center;
  }
  .miles-dest-map.is-revealed .miles-dest-map__area {
    transform-box: fill-box;
    transform-origin: center;
    animation: miles-map-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(1.5s + var(--i, 0) * 90ms);
  }
  .miles-dest-map.is-armed .miles-dest-map__place {
    opacity: 0;
    transform: scale(0.6);
    transform-box: fill-box;
    transform-origin: center;
  }
  .miles-dest-map.is-revealed .miles-dest-map__place {
    transform-box: fill-box;
    transform-origin: center;
    animation: miles-map-pop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(1.5s + var(--i, 0) * 90ms);
  }
}

@keyframes miles-map-draw { to { stroke-dashoffset: 0; } }
@keyframes miles-map-fill { to { fill-opacity: 0.09; } }
@keyframes miles-map-in   { to { opacity: 1; } }
@keyframes miles-map-pop  { to { opacity: 1; transform: none; } }

@media (forced-colors: active) {
  .miles-dest-map__land { stroke: CanvasText; fill: none; }
  .miles-dest-map__borders path { stroke: CanvasText; }
  .miles-dest-map__area { fill: Canvas; stroke: CanvasText; }
  .miles-dest-map__area--antimalarials_recommended { fill: Highlight; }
  .miles-dest-map__place circle { fill: Canvas; stroke: CanvasText; }
  .miles-dest-map__place text { fill: CanvasText; stroke: Canvas; }
}

/* ---- the consultation, laid out: the travel page's intro -----------------
   Was three paragraphs and a button beside a small map: the one column of
   prose left on the page. Now the family's two-column head, then one ruled
   row of three - what we go through, what to bring, when to come - with the
   hero's ring-and-tick on the list items and the booking link as the last
   word. Hairlines between the columns, the top rule drawn on reveal, as the
   ledger and the risks draw theirs. */

.miles-consult .miles-dest-head { margin-bottom: 8px; }

/* The page sets every paragraph in this section to 18px dark; the lead
   keeps the family's 17px soft, at a specificity that wins. */
.epsom-location-page .miles-consult .miles-pf-lead {
  color: var(--color-text-soft, #536762);
  font-size: 17px;
}

.miles-consult__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  --reveal-step: 120ms;
}

.miles-consult__row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--color-border-strong, rgba(44, 95, 90, 0.3));
  transform-origin: left center;
}

.miles-consult__col {
  min-width: 0;
  padding: 32px 40px 12px 0;
}

.miles-consult__col + .miles-consult__col {
  padding-left: 40px;
  border-left: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-consult__col:last-child { padding-right: 0; }

.miles-consult__label {
  margin: 0;
  color: var(--color-brand, #2c5f5a);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Carries the page class: `.service-location-page dd` zeroes every dd's top
   margin at 0-2-0, which a bare class cannot reach. */
.service-location-page .miles-consult__body { margin: 18px 0 0; }

.epsom-location-page .miles-consult__body p {
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.6;
}
/* Each vaccine page's line here (Hajj and Umrah, rabies, hepatitis A and B,
   typhoid) ends on a link to that page, and all five went live in the
   paragraph's own colour with no underline, looking like the words around
   them. The copy-link treatment the vaccine pages use, here too. */
.epsom-location-page .miles-consult__body p a {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-color: rgba(44, 95, 90, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.epsom-location-page .miles-consult__body p a:hover,
.epsom-location-page .miles-consult__body p a:focus-visible {
  color: var(--color-brand-dark);
  text-decoration-color: currentColor;
}

.miles-consult__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-consult__list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

/* The hero's mark, on the page's ground: sage ring, evergreen tick. */
.miles-consult__list li::before {
  content: "\2713";
  display: grid;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-brand-dark, #204944);
  font-size: 10px;
  font-weight: 700;
  background: var(--color-sage, #dce7df);
  border-radius: 50%;
  place-items: center;
}

.miles-consult__link {
  display: inline-block;
  margin-top: 18px;
  color: var(--color-brand, #2c5f5a);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.3s ease;
}

.miles-consult__link svg {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  vertical-align: -2px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.miles-consult__link:hover,
.miles-consult__link:focus-visible { color: var(--color-brand-dark, #204944); text-decoration: underline; text-underline-offset: 3px; }
.miles-consult__link:hover svg,
.miles-consult__link:focus-visible svg { transform: translateX(4px); }

.miles-consult__link:focus-visible {
  outline: 3px solid var(--color-cta, #e8734a);
  outline-offset: 3px;
}

/* The top rule draws itself as the row arrives; the columns rise on the
   stagger the list already has. Static under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .miles-consult__row.is-armed::before { transform: scaleX(0); }
  .miles-consult__row.is-revealed::before {
    animation: miles-draw-x 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
  }
}

@media (max-width: 899px) {
  .miles-consult__row { grid-template-columns: minmax(0, 1fr); }
  .miles-consult__col { padding: 26px 0 26px; }
  .miles-consult__col + .miles-consult__col {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  }
  .miles-consult__col:last-child { padding-bottom: 4px; }
}

@media (forced-colors: active) {
  .miles-consult__row::before, .miles-consult__col + .miles-consult__col { background: CanvasText; border-color: CanvasText; }
  .miles-consult__list li::before { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
}

/* ---- the destination grid: six countries, drawn -------------------------
   The one section on the travel page that runs edge to edge: an evergreen
   band, the head in the container, then six cells ruled by sage hairlines
   across the whole window, each the country's outline in the malaria map's
   line, drawing itself on reveal; the region above, the name in Newsreader,
   a line saying where the cell goes. Where an approved photograph exists it
   fills the cell on hover, low, under a scrim, and is never the design:
   three of the six have none. Cells abut, so nothing lifts on hover; the
   picture, the line turning white and the arrow are the response. */

.epsom-location-page main > section.miles-dests {
  padding-block: 88px 0 !important;   /* the cells' bottom rule is the section's edge, as the photograph is the hero's floor */
  color: #fff;
  background: var(--color-brand-dark, #204944);
}

/* The same band on the home page, directly above the booking section: the
   page's showpiece as early as it can come (Drew). It sat inside the
   journey, pulled out to the window and closing on a hairline against the
   services directory's evergreen; on its own it is a band as the travel
   page's is, its lower edge where the evergreen stops and the booking
   section's cream begins, so the cells need no rule under them. */
.miles-dests--home {
  padding-block: 96px 0 !important;
  color: #fff;
  background: var(--color-brand-dark, #204944);
}

@media (max-width: 640px) {
  .miles-dests--home { padding-top: 64px !important; }
}

/* The head, on evergreen: the band's rules. The heading restates its colour
   and weight with !important because theme.css sets every heading's. */
.miles-dests .miles-pf-eyebrow { color: var(--color-sage, #dce7df); letter-spacing: 0.105em; }
.miles-dests .miles-pf-heading { color: #fff !important; font-weight: 500 !important; }
.miles-dests .miles-pf-lead { color: rgba(255, 255, 255, 0.94); font-weight: 500; }
.miles-dests .miles-dest-head { margin-bottom: 56px; }

/* Hairlines by the gap trick: the list paints the rule colour, the cells
   paint the ground over it, and a 1px gap is the line between them. */
.miles-dests__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(220, 231, 223, 0.22);
  border-top: 1px solid rgba(220, 231, 223, 0.22);
  --reveal-step: 110ms;
}

.miles-dests__item { min-width: 0; background: var(--color-brand-dark, #204944); }

.miles-dests__tile {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 6 / 5;
  padding: 36px 40px 34px;
  overflow: hidden;
  color: #fff;
  background: var(--color-brand-dark, #204944);
  text-decoration: none;
}

.miles-dests__tile:focus-visible {
  outline: 3px solid var(--color-cta, #e8734a);
  outline-offset: -3px;   /* inside: the cells touch */
}

/* The photograph, behind everything, under a scrim that keeps the name
   legible; both arrive on hover and only where a picture is allowed. */
.miles-dests__photo {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.miles-dests__tile::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(32, 73, 68, 0.3) 0%, rgba(32, 73, 68, 0.72) 45%, rgba(32, 73, 68, 0.96) 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* The picture is the response to a pointer, so only a device with a pointer
   is offered it; a phone applying half a hover state on the way to following
   the link is what made this feel fiddly. Focus is separate and stays for
   everyone, because a tablet with a keyboard has no hover and still tabs. */
@media (hover: hover) {
  .miles-dests__tile:hover .miles-dests__photo { opacity: 1; transform: none; }
  .miles-dests__tile:hover::after { opacity: 1; }
}
.miles-dests__tile:focus-visible .miles-dests__photo { opacity: 1; transform: none; }
.miles-dests__tile:focus-visible::after { opacity: 1; }

.miles-dests__figure {
  display: block;
  min-height: 0;
  padding: 4px 12px 18px;
}

.miles-dests__map {
  display: block;
  width: 100%;
  height: 100%;
}

.miles-dests__outline {
  fill: var(--color-sage, #dce7df);
  fill-opacity: 0.09;
  stroke: var(--color-sage, #dce7df);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* one hairline at every cell size */
  transition: fill-opacity 0.5s ease, stroke 0.5s ease;
}

/* The outline lifts with the picture. `fill-opacity` goes through the same
   variable the reveal settles on, because a plain hover rule ties with
   `.miles-dests__grid.is-revealed .miles-dests__outline` and loses on order:
   the fill has never actually lifted on hover since this shipped. */
@media (hover: hover) {
  .miles-dests__tile:hover { --tile-fill: 0.2; }
  .miles-dests__tile:hover .miles-dests__outline { fill-opacity: 0.2; stroke: #fff; }
}
.miles-dests__tile:focus-visible { --tile-fill: 0.2; }
.miles-dests__tile:focus-visible .miles-dests__outline { fill-opacity: 0.2; stroke: #fff; }

.miles-dests__text { display: block; }

.miles-dests__region {
  display: block;
  color: #cddfd2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.3;
  text-transform: uppercase;
}

.miles-dests__name {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-family: "Newsreader", Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Inline, not flex: on a phone the line wraps, and a flex arrow would sit
   at the far edge on its own while the words sat at the left. Inline, it
   follows the last word wherever that lands. */
.miles-dests__cta {
  display: block;
  margin-top: 14px;
  color: #cddfd2;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.miles-dests__cta-end { white-space: nowrap; }

.miles-dests__cta svg {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  vertical-align: -2px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Over the picture the whole text block goes white. The region label is
   sage on the flat ground, which reads well there and measured as low as
   3.84:1 over a photograph under the scrim; white is 5.35:1 against the
   lightest ground any of the six produces. */
@media (hover: hover) {
  .miles-dests__tile:hover .miles-dests__cta { color: #fff; }
  .miles-dests__tile:hover .miles-dests__cta svg { transform: translateX(4px); }
  .miles-dests__tile:hover .miles-dests__region { color: #fff; }
}
.miles-dests__tile:focus-visible .miles-dests__cta { color: #fff; }
.miles-dests__tile:focus-visible .miles-dests__cta svg { transform: translateX(4px); }
.miles-dests__tile:focus-visible .miles-dests__region { color: #fff; }

/* The outlines draw themselves as the cells arrive, one after another, in
   step with the rise the stagger reveal already gives them. The fill's
   animation fills backwards, not forwards: a forwards fill would pin the
   fill-opacity at its end value and the hover would never register. And
   the revealed rule states the rest value itself, because the armed class
   stays on the list after reveal and its zero would be what the animation
   returned to. */
@media (prefers-reduced-motion: no-preference) {
  .miles-dests__grid.is-armed .miles-dests__outline {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
  }
  .miles-dests__grid.is-revealed .miles-dests__outline {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: var(--tile-fill, 0.09);
    animation:
      miles-map-draw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards,
      miles-tile-fill 0.9s ease backwards;
    animation-delay:
      calc(var(--i, 0) * var(--reveal-step, 110ms) + 250ms),
      calc(var(--i, 0) * var(--reveal-step, 110ms) + 1100ms);
  }
}

@keyframes miles-tile-fill { from { fill-opacity: 0; } to { fill-opacity: var(--tile-fill, 0.09); } }

/* Without hover there is nothing to hover, so on a phone the picture is the
   resting state rather than a reward for finding the right gesture. It waits
   until every tile has one: three of the six had no approved photograph, and
   a grid where half the cells are lit and half are not reads as a failure to
   load rather than as a design. The build counts the pictures and adds
   --lit when the last one lands, the same way the lead counts guides.

   With the picture at rest the outline sits on it in the state a pointer
   would have produced, so the tile a phone shows and the tile a laptop
   shows on hover are the same tile. */
@media (hover: none) {
  .miles-dests--lit .miles-dests__photo { opacity: 1; transform: none; }
  .miles-dests--lit .miles-dests__tile::after { opacity: 1; }
  .miles-dests--lit .miles-dests__cta,
  .miles-dests--lit .miles-dests__region { color: #fff; }
  /* The outline's resting fill is a variable rather than a number so the
     reveal ends where the tile stays, instead of animating to 0.09 and then
     stepping to 0.2. The stroke is stated twice because the reveal's own
     rule carries `.is-revealed` and outranks a plain class. */
  .miles-dests--lit .miles-dests__grid { --tile-fill: 0.2; }
  .miles-dests--lit .miles-dests__outline { stroke: #fff; }
  .miles-dests--lit .miles-dests__grid.is-revealed .miles-dests__outline { stroke: #fff; }
}

@media (max-width: 1199px) {
  .miles-dests__tile { aspect-ratio: 1; padding: 28px 30px 26px; }
  .miles-dests__name { font-size: 30px; }
}

@media (max-width: 999px) {
  .miles-dests__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .epsom-location-page main > section.miles-dests { padding-top: 64px !important; }
  .miles-dests .miles-dest-head { margin-bottom: 36px; }
  .miles-dests__tile { padding: 18px 18px 18px; aspect-ratio: 4 / 5; }
  .miles-dests__figure { padding: 2px 6px 10px; }
  /* 12px is this site's floor for a phone, not 11: the same rule that took
     the hero card's small print off 10px. Uppercase at 0.1em still fits the
     longest region on a 390px tile. */
  .miles-dests__region { font-size: 12px; letter-spacing: 0.1em; }
  .miles-dests__name { font-size: 24px; }
  .miles-dests__cta { margin-top: 10px; font-size: 13px; }
  .miles-dests__cta svg { width: 13px; height: 13px; }
}

@media (forced-colors: active) {
  .miles-dests__grid { background: CanvasText; }
  .miles-dests__item, .miles-dests__tile { background: Canvas; color: CanvasText; }
  .miles-dests__outline { fill: none; stroke: CanvasText; }
  .miles-dests__region, .miles-dests__name, .miles-dests__cta { color: CanvasText; }
  .miles-dests__photo, .miles-dests__tile::after { display: none; }
}

/* ---- worth knowing: the risks, and the notices beside them --------------
   The risks as rows with a handle and a paragraph, the notices to their
   right with a date, a topic, a summary and where it came from: a page,
   not a column. The notices used to be tinted boxes with an orange edge,
   the one boxed thing on the page. They are ruled rows now, the same
   hairlines as everything above, set apart by their caption and their
   dates rather than by a border. Both lists rise in turn and draw their
   rules, as the ledger and the questions do. */

.miles-dest-risks { padding: 96px 0 !important; background: var(--color-background); }

.miles-dest-risks__body { display: grid; gap: 48px 80px; }

@media (min-width: 1000px) {
  .miles-dest-risks__body {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: start;
  }
  .miles-dest-risks__list    { grid-column: 1; grid-row: 1; }
  .miles-dest-risks__notices { grid-column: 2; grid-row: 1; }
  .miles-dest-risks__body--one { grid-template-columns: minmax(0, 1fr); }
  .miles-dest-risks__body--one > * { grid-column: 1; }
}

/* The risks. */

.miles-dest-risks__list { margin: 0; padding: 0; list-style: none; --reveal-step: 90ms; }

.miles-dest-risks__list::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-dest-risks__row {
  position: relative;
  display: grid;
  gap: 6px 32px;
  margin: 0;
  padding: 22px 0 24px;
}

.miles-dest-risks__row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
  transform-origin: left center;
}

@media (min-width: 700px) {
  .miles-dest-risks__row { grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr); }
  .miles-dest-risks__list--plain .miles-dest-risks__row { grid-template-columns: minmax(0, 1fr); }
}

.miles-dest-risks__label {
  margin: 0;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
}

.miles-dest-risks__copy {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* The notices. */

.miles-dest-risks__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.miles-dest-risks__checked {
  color: var(--color-text-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.miles-dest-risks__alerts {
  margin: 0;
  padding: 0;
  list-style: none;
  --reveal-step: 110ms;
  --reveal-delay: 120ms;
}

.miles-dest-risks__alerts::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-dest-risks__alert { position: relative; margin: 0; padding: 20px 0 22px; }

.miles-dest-risks__alert::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
  transform-origin: left center;
}

.miles-dest-risks__date {
  display: block;
  margin: 0 0 6px;
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* theme.css styles every heading; this one says so back. */
.miles-dest-risks__topic {
  margin: 0 0 6px;
  color: var(--color-text) !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2;
}

.miles-dest-risks__summary {
  margin: 0;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.miles-dest-risks__source {
  margin: 8px 0 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
  .miles-dest-risks__list.is-armed > .miles-dest-risks__row::before,
  .miles-dest-risks__alerts.is-armed > .miles-dest-risks__alert::before { transform: scaleX(0); }

  .miles-dest-risks__list.is-revealed > .miles-dest-risks__row::before,
  .miles-dest-risks__alerts.is-revealed > .miles-dest-risks__alert::before {
    animation: miles-draw-x 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--reveal-delay, 0ms) + var(--i, 0) * var(--reveal-step, 90ms) + 120ms);
  }
}

@media (forced-colors: active) {
  .miles-dest-risks__row::before,
  .miles-dest-risks__alert::before,
  .miles-dest-risks__list::after,
  .miles-dest-risks__alerts::after { background: CanvasText; }
}

@media (max-width: 767px) {
  .miles-dest-vax,
  .miles-dest-risks { padding: 60px 0 !important; }
  .miles-dest-band { padding: 56px 0 !important; }
  .miles-dest-head { margin-bottom: 32px; }
}

/* ==========================================================================
   MOBILE UI  —  booking engine  (<= 767px)
   Desktop is untouched: every rule below lives inside a mobile media query.
   Load this AFTER the existing engine CSS.

   It is at the end of theme-fixes.css because that is the last stylesheet the
   theme enqueues (after tailwind, theme and booking), so "after the existing
   engine CSS" holds without any of these rules needing !important to win.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- 1. One alignment system -------------------------------------------
     The desktop layout indents step content by --content-indent (56px) to make
     room for the numbered timeline rail. That rail is hidden on mobile, but the
     indent was never reset, so the step content sat ~90px from the left edge
     while everything else sat at 22px. Resetting the three tokens re-aligns the
     whole engine at once, because padding, card margins and the date-strip
     bleed are all derived from them. */
  .miles-appointment-engine {
    --step-pad-x: 16px;
    --step-pad-y: 22px;
    --content-indent: 0px;
  }

  .miles-appointment-section {
    padding: 48px 12px !important;
    overflow-x: clip;
  }
  #book-appointment { padding-block: 48px !important; }

  .miles-appointment-engine__heading { margin-bottom: 22px; }
  .miles-appointment-engine__heading h2 { font-size: 30px; line-height: 1.12 !important; }
  .miles-appointment-engine__heading > p { font-size: 15px; line-height: 1.6; }

  .miles-appointment-engine__shell { border-radius: 16px; }

  /* The questions step was left out of the original mobile padding reset. */
  #book-appointment .miles-appointment-engine__questions,
  #book-appointment .miles-appointment-engine__services,
  #book-appointment .miles-appointment-engine__calendar,
  .miles-appointment-engine__questions,
  .miles-appointment-engine__services,
  .miles-appointment-engine__calendar {
    padding: var(--step-pad-y) var(--step-pad-x);
  }

  .miles-appointment-engine__section-heading {
    gap: 12px;
    margin: 0 0 16px;
    align-items: center;
  }
  .miles-appointment-engine__section-heading > span {
    flex-basis: 30px; width: 30px; height: 30px; font-size: 11px;
  }
  .miles-appointment-engine__section-heading p { font-size: 11px; letter-spacing: .08em; }
  .miles-appointment-engine__section-heading strong { font-size: 19px; line-height: 1.2; }


  /* --- 2. Triage choices --------------------------------------------------
     Were forced into 2 cramped columns with the helper text hidden, which is
     the text that actually disambiguates the options. One column, text back,
     tick indicator always visible so they read as choosable. */
  .miles-triage-step__choices,
  .weight-loss-booking__choices,
  .miles-step02__grid {
    grid-template-columns: 1fr;
    gap: 10px;
    grid-auto-rows: auto;
  }
  .weight-loss-booking__choices label > span {
    min-height: 0;
    gap: 3px;
    padding: 14px 52px 14px 16px;
    border-radius: 14px;
  }
  .weight-loss-booking__choices strong { font-size: 16px; line-height: 1.3; }
  .weight-loss-booking__choices small {
    display: block;
    font-size: 13px;
    line-height: 1.4;
  }
  .weight-loss-booking__choices label > span::after {
    display: grid;
    top: 50%; right: 16px;
    width: 22px; height: 22px;
    font-size: 12px;
    transform: translateY(-50%);
  }
  .weight-loss-booking__choices input:checked + span { padding-right: 52px; }
  /* The checked rule outruns the base rule on specificity (input:checked), so
     every geometry property has to be restated here or the tick keeps the old
     corner-pinned position and hangs outside the card. */
  .weight-loss-booking__choices input:checked + span::after {
    top: 50%; right: 16px;
    width: 22px; height: 22px;
    font-size: 12px;
    transform: translateY(-50%);
  }


  /* --- 3. Service card ---------------------------------------------------- */
  .miles-step02__card { padding: 16px; border-radius: 14px; gap: 2px; }
  .miles-step02__name { font-size: 20px !important; margin-bottom: 4px; }
  .miles-step02__desc { font-size: 14px; margin-bottom: 12px; }
  .miles-step02__facts { gap: 6px; }
  .miles-step02__facts span { min-height: 30px; padding: 4px 11px; font-size: 13px; }
  .miles-step02__note { margin-top: 14px; font-size: 13px; line-height: 1.55; }


  /* --- 4. Date strip ------------------------------------------------------
     The bleed used --step-pad-x (36px desktop) against a 22px container, so the
     strip sat 14px out of alignment on both sides. Now both come from the same
     token. Card width leaves a sliver of the next day visible, which is what
     tells a thumb the row scrolls. */
  .miles-appointment-engine__dates {
    display: flex;
    gap: 8px;
    margin-inline: calc(-1 * var(--step-pad-x));
    padding-inline: var(--step-pad-x);
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--step-pad-x);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .miles-appointment-engine__dates::-webkit-scrollbar { display: none; }

  /* The half card that says "this scrolls" was also half a word, which read as
     a strip cut off rather than one continuing. The edge it can still travel
     towards is faded out, so the sliced card dissolves instead of being cut.
     miles-booked.js sets the classes: a fade on an edge with nothing left
     behind it would dim a date that is whole. */
  .miles-appointment-engine__dates.has-more-after {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }
  .miles-appointment-engine__dates.has-more-before {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
  }
  .miles-appointment-engine__dates.has-more-before.has-more-after {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  }

  /* A mask hides a focus ring that sits under it, so the fade comes off while
     a date is being reached by keyboard. */
  .miles-appointment-engine__dates:focus-within {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .miles-appointment-engine__date {
    /* 4.5 cards across, so half of the next day is always visible - that half
       card is what tells a thumb the row scrolls. */
    flex: 0 0 clamp(62px, calc((100% - 36px) / 4.5), 78px);
    min-height: 82px;
    padding: 10px 4px;
    gap: 0;
    border-radius: 12px;
    scroll-snap-align: start;
  }
  .miles-appointment-engine__date span,
  .miles-appointment-engine__date small { font-size: 10px; letter-spacing: .05em; }
  .miles-appointment-engine__date strong { margin: 3px 0 1px; font-size: 25px; }

  .miles-appointment-engine__other-date {
    display: grid;
    justify-content: stretch;
    margin-top: 12px;
  }
  .miles-appointment-engine__other-date-btn { width: 100%; min-height: 46px; font-size: 15px; }


  /* --- 5. Next-available shortcut ----------------------------------------- */
  .miles-booked-engine { margin-top: 16px; }
  .miles-booked__panel { gap: 18px; padding-top: 18px; }
  .miles-booked__next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: center;
    padding: 12px 12px 12px 14px;
    font-size: 15px;
    text-align: left;
  }
  .miles-booked__next-label { grid-area: 1 / 1; font-size: 12px; }
  .miles-booked__next strong { grid-area: 2 / 1; font-size: 15px; line-height: 1.3; }
  .miles-booked__next-cta { grid-area: 1 / 2 / span 2; margin: 0; min-height: 42px; padding: 6px 14px; font-size: 14px; }


  /* --- 6. Party picker ----------------------------------------------------
     "Add" was a solid brand-filled button, the loudest control on the screen,
     competing with the real CTA. Demoted to an outline button and put back on
     one row with the input, which also saves a row of height. */
  .miles-booked__party { gap: 12px; margin-bottom: 0; }
  .miles-booked__party-title { font-size: 18px; }
  .miles-booked__party-lead { font-size: 14px; }
  .miles-booked__person { padding: 11px 12px; gap: 12px; grid-template-columns: 30px 1fr; }
  .miles-booked__person-num { width: 30px; height: 30px; font-size: 14px; }
  .miles-booked__person-name { font-size: 16px; }
  .miles-booked__person-note { font-size: 13px; }

  .miles-booked__add { padding: 12px; gap: 8px; }
  .miles-booked__add-label { font-size: 14px; }
  .miles-booked__add-row {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    gap: 8px;
  }
  .miles-booked__add-input { min-height: 46px; font-size: 16px; padding: 10px 12px; }
  .miles-booked__add-btn {
    width: auto;
    min-width: 76px;
    min-height: 46px;
    padding: 10px 18px;
    font-size: 15px;
    color: var(--color-brand-dark);
    background: rgb(255, 255, 255);
    border: 1px solid var(--color-border-strong);
  }
  .miles-booked__add-btn:hover,
  .miles-booked__add-btn:focus-visible {
    color: rgb(255, 255, 255);
    background: var(--color-brand);
    border-color: var(--color-brand);
  }
  .miles-booked__party-count { padding: 11px 13px; font-size: 14px; }


  /* --- 7. Time slots ------------------------------------------------------
     The existing mobile rule (.miles-booked__slots, 0-1-0) was being beaten by
     .miles-booked-engine .miles-booked__slots (0-2-0) outside the query, so the
     mobile grid never applied and slots rendered 3-up. Matching the specificity
     fixes it: 4 across cuts the visible list from 8 rows to 6. */
  .miles-booked__label { font-size: 15px; }
  .miles-booked .miles-booked__slots,
  .miles-booked-engine .miles-booked__slots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .miles-booked .miles-booked__slot,
  .miles-booked-engine .miles-booked__slot {
    min-height: 44px;
    padding: 6px 2px;
    font-size: 14px;
    border-radius: 10px;
  }
  /* 27px tall link -> 44px tap target, with the underline kept on the text
     itself rather than the box, so it still hugs the words.

     Two class names, for the same reason the slots above need them: the
     component sets min-height: 0 on ".miles-booked .miles-booked__more"
     (0-2-0), which beat a single-class rule here and left the computed
     min-height at 0 and the link 39px tall. Verified with
     CSS.getMatchedStylesForNode rather than by reading the stylesheet. */
  .miles-booked .miles-booked__more,
  .miles-booked-engine .miles-booked__more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 2px;
    font-size: 14px;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
  }


  /* --- 8. Summary card + CTA ---------------------------------------------- */
  .miles-appointment-card,
  .miles-booked-confirm {
    margin: 16px var(--step-pad-x) 18px;
    border-radius: 14px;
  }
  .miles-appointment-card__status,
  #book-appointment .miles-appointment-card__status {
    min-height: 40px; padding: 8px 14px; font-size: 11px; letter-spacing: .08em;
  }
  .miles-appointment-card__body,
  #book-appointment .miles-appointment-card__body {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 14px;
  }
  .miles-appointment-card h3 { margin-bottom: 0; font-size: 22px; }
  .miles-booked__sentence { font-size: 14px; line-height: 1.5; }

  .miles-appointment-card__footer,
  #book-appointment .miles-appointment-card__footer {
    display: grid;
    gap: 10px;
    min-height: 0;
    padding: 14px;
  }
  .miles-appointment-card__footer p { max-width: none; font-size: 13px; line-height: 1.45; }
  .miles-appointment-card__footer button,
  #book-appointment .miles-appointment-card__footer button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    font-size: 16px;
  }
  .miles-appointment-engine__disclosure { padding: 12px 14px; font-size: 11px; line-height: 1.55; }


  /* --- 9. Touch behaviour -------------------------------------------------
     Hover lifts stick on touch: the element stays raised after a tap until you
     tap elsewhere. Killed on pointers that cannot hover. */
  .miles-appointment-engine * { -webkit-tap-highlight-color: transparent; }
  .miles-appointment-engine__shell,
  .miles-appointment-engine__shell * { max-width: 100%; }
}

@media (max-width: 767px) and (hover: none) {
  .weight-loss-booking__choices label:hover > span,
  .miles-appointment-engine__date:hover:not(:disabled),
  .health-hub-button--primary:hover,
  .miles-appointment-engine__tab:hover { transform: none; }
}

/* --- 10. Very narrow phones (<= 360px) ----------------------------------- */
@media (max-width: 360px) {
  .miles-appointment-engine { --step-pad-x: 14px; }
  .miles-appointment-section,
  #book-appointment { padding-inline: 10px !important; }
  .miles-appointment-engine__heading h2,
  #book-appointment .miles-appointment-engine__heading h2 { font-size: 27px; }
  .miles-appointment-engine__date { flex-basis: 70px; }
  .miles-booked .miles-booked__slots,
  .miles-booked-engine .miles-booked__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .miles-appointment-card,
  #book-appointment .miles-appointment-card { margin-inline: var(--step-pad-x); }
  #book-appointment .miles-appointment-card__body,
  #book-appointment .miles-appointment-card__footer { padding-inline: 14px; }
}

/* ---- a route that takes in more than one country ------------------------
   Under the ledger, because it is about the list the ledger just gave you:
   a trip that carries on into a neighbour is a different list. Quiet enough
   not to compete with the table above it, and wide enough to read as a
   paragraph rather than a second footnote. */

.miles-dest-routes {
  display: grid;
  gap: 14px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(26, 46, 42, 0.14);
}

.miles-dest-routes__copy {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.miles-dest-routes__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
}

.miles-dest-routes__link {
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(44, 95, 90, 0.35);
  text-underline-offset: 4px;
}
.miles-dest-routes__link:hover,
.miles-dest-routes__link:focus-visible {
  color: var(--color-brand-dark);
  text-decoration-color: currentColor;
}

/* ---- the vaccine service pages -------------------------------------------
   One template, one page per vaccine. Almost every section borrows a shell
   the destination pages already have: the label-and-copy list, the notices
   column, the evergreen band, the price table, the questions. Five things had
   no component, and they are the only new rules here.

   Section 1 of 5: the stock line. Live status rather than a credential, so it
   sits with the booking button instead of joining the assurance chips, and
   each state gets a mark as well as a colour. */

.miles-vaccine__stock {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 16px 0 0;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.miles-vaccine__stock span {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: currentColor;
}
.miles-vaccine__stock--in-stock      { color: #cddfd2; }
.miles-vaccine__stock--call-to-check { color: #f0c9a8; }
.miles-vaccine__stock--unavailable   { color: #f3b7a2; }

/* 2 of 5: the answer-first block. Under 60 words, directly under the hero,
   and written to be lifted whole by a search result or an assistant. Quiet:
   it is the page answering its own question, not a banner. */

.miles-vaccine-answer { padding: 48px 0 8px; background: var(--color-background, #faf7f2); }

/* One panel: the statement on the left, the facts it contains on the right.
   It was a paragraph with a rule down its side and the width of the page
   beside it. The paragraph is still one <p>, so what a search result or an
   assistant lifts is unchanged; the rail beside it is the same facts in a
   form that scans, from the data, and it is left out when there are none. */
.miles-vaccine-answer__panel {
  display: grid;
  gap: 36px 64px;
  padding: 36px 28px 32px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-vaccine-answer__statement { display: grid; gap: 14px; align-content: start; }

.miles-vaccine-answer__eyebrow {
  margin: 0;
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-vaccine-answer__copy {
  margin: 0;
  max-width: 34ch;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.38;
  text-wrap: pretty;
}

.miles-vaccine-answer__facts { margin: 0; padding: 0; align-self: start; }

.miles-vaccine-answer__fact {
  display: grid;
  gap: 4px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}
.miles-vaccine-answer__fact:last-child { padding-bottom: 4px; }

.miles-vaccine-answer__fact dt {
  margin: 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-vaccine-answer__fact dd { display: grid; gap: 2px; margin: 0; }

.miles-vaccine-answer__value {
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.miles-vaccine-answer__detail {
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .miles-vaccine-answer { padding-top: 64px; }
  .miles-vaccine-answer__panel {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
    padding: 44px 48px 40px;
  }
  .miles-vaccine-answer__panel--solo { grid-template-columns: minmax(0, 1fr); }
  .miles-vaccine-answer__copy { font-size: 26px; }
  .miles-vaccine-answer__facts { padding-top: 6px; }
}

@media (max-width: 899px) {
  .miles-vaccine-answer__fact { padding: 14px 0 15px; }
  .miles-vaccine-answer__fact:last-child { padding-bottom: 2px; }
  .miles-vaccine-answer__value { font-size: 24px; }
  .miles-vaccine-answer__detail { font-size: 14px; }
}

/* Between a phone and a tablet the label sits beside its value, so three
   facts are three short rows under the paragraph rather than a second
   screen of them. Under 600px the value column got too narrow for the
   longest detail (four lines of it at 390), so there the label sits above. */
@media (min-width: 600px) and (max-width: 899px) {
  .miles-vaccine-answer__fact {
    grid-template-columns: minmax(96px, 0.36fr) minmax(0, 1fr);
    gap: 2px 18px;
    align-items: baseline;
  }
  .miles-vaccine-answer__fact dt { padding-top: 6px; }
}

/* 3 of 5: a tool's shell. The frame, the question and the disclaimer are
   server-rendered, so the page says what the tool is for whether or not the
   script ever runs. */

.miles-vaccine-tool { padding: 56px 0; background: var(--color-sage-soft, #edf2ed); }
.miles-vaccine-tool__inner { display: grid; gap: 26px; }

/* The instrument: the questions in one half, the readout in the other. It
   was a rounded box with a 420px form down its left and 770px of nothing
   beside it. The readout is there from the first paint, saying what the
   tool knows, so an answer replaces something rather than appearing under
   the button; on a phone the halves stack and the answer follows the
   button, scrolled on if it landed off the screen. */
.miles-vaccine-tool__frame {
  display: grid;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 18px;
  /* clip, not hidden: `overflow: hidden` makes this a scroll container and
     the readout inside it can then never stick. */
  overflow: clip;
}

.miles-vaccine-tool__body { padding: 26px 22px 30px; }

.miles-vaccine-tool__result {
  padding: 26px 22px 30px;
  background: var(--color-background, #faf7f2);
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  /* the accent: sage while idle, the brand with an answer, the CTA colour
     when the answer is a requirement or a recommendation */
  box-shadow: inset 0 4px 0 var(--color-sage, #dce7df);
}
.miles-vaccine-tool__result[data-outcome] { box-shadow: inset 0 4px 0 var(--color-brand, #2c5f5a); }
.miles-vaccine-tool__result[data-outcome="required"],
.miles-vaccine-tool__result[data-outcome="risk_destination"] { box-shadow: inset 0 4px 0 var(--color-cta, #e8734a); }

/* A tall instrument: one column, answer under the button. The two-column
   frame is right when the questions and the answer are of a similar height
   and wrong when they are not, and no amount of shaving the questions makes
   eight of them the same height as four facts. */
@media (min-width: 1000px) {
  .miles-vaccine-tool--stacked .miles-vaccine-tool__frame {
    grid-template-columns: minmax(0, 1fr);
    background: #fff;
  }
  .miles-vaccine-tool--stacked .miles-vaccine-tool__result {
    border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
    border-left: 0;
    background: var(--color-background, #faf7f2);
  }
  /* Pairing the short fields was for a frame where the form's height was the
     problem. Here it is not: the answer sits under the button, so a tall
     column costs nothing, and pairing only left half-empty rows wherever a
     tick list fell between two of them. One column of questions at a width
     somebody can read, and the lists take the room instead. */

}

@media (min-width: 1000px) {
  .miles-vaccine-tool__frame {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    border-radius: 22px;
  }
  .miles-vaccine-tool__body { padding: 40px 44px 44px; }
  /* The readout would be better still if it travelled with the reader down a
     long set of questions, but `position: sticky` cannot work anywhere on
     this site while `body` carries `overflow-x: hidden`: that makes the body
     a scroll container which never itself scrolls, so a sticky descendant
     never engages. `overflow-x: clip` would fix it sitewide without letting
     the bleed figures scroll sideways, and wants checking on every template
     rather than assumed from this one. */
  .miles-vaccine-tool__result {
    padding: 40px 44px 44px;
    border-top: 0;
    border-left: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  }
}

/* Idle: the eyebrow, the authored line, and the facts from the data. */
.miles-tool-idle { display: grid; gap: 12px; align-content: start; }

.miles-tool-idle__eyebrow {
  margin: 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-tool-idle__copy {
  margin: 0;
  max-width: 44ch;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-wrap: pretty;
}

.miles-tool-idle__facts { margin: 10px 0 0; padding: 0; }
.miles-tool-idle__facts div {
  display: grid;
  gap: 3px;
  padding: 12px 0 13px;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}
.miles-tool-idle__facts dt {
  margin: 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.miles-tool-idle__facts dd {
  margin: 0;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.miles-vaccine-tool__pending,
.miles-vaccine-tool__disclaimer {
  margin: 0;
  max-width: 70ch;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* 4 of 5: the authority block. The registration numbers are the point, and
   each claim sits next to the register it can be checked against. */

.miles-vaccine-authority { padding: 64px 0; background: var(--color-background, #faf7f2); }
.miles-vaccine-authority__inner { display: grid; gap: 30px; }

@media (min-width: 900px) {
  .miles-vaccine-authority__inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    column-gap: 80px;
    align-items: start;
  }
  .miles-vaccine-authority__verify { grid-column: 2; }
}

.miles-vaccine-authority__facts {
  margin: 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  padding-top: 18px;
}
.miles-vaccine-authority__facts div { display: grid; gap: 2px; }
.miles-vaccine-authority__facts dt {
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.miles-vaccine-authority__facts dd {
  margin: 0;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.miles-vaccine-authority__verify { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.miles-vaccine-authority__verify a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(44, 95, 90, 0.35);
  text-underline-offset: 4px;
}
.miles-vaccine-authority__verify a:hover,
.miles-vaccine-authority__verify a:focus-visible { color: var(--color-brand-dark); text-decoration-color: currentColor; }
.miles-vaccine-authority__verify svg { width: 15px; height: 15px; flex: none; }

/* 5 of 5: the sources. Dated and visible, which most pages of this kind are
   not, and the first thing a clinician checks. */

.miles-vaccine-sources { padding: 0 0 56px; background: var(--color-background, #faf7f2); }

.miles-vaccine-sources__title {
  margin: 0 0 14px;
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.miles-vaccine-sources__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 80ch;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  padding-top: 16px;
}
.miles-vaccine-sources__list li {
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.miles-vaccine-sources__list a { color: var(--color-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* The certificate figure, when the asset exists. Below the fold, lazy, and
   never the largest contentful paint. */
/* A plate, not a thumbnail, and two kinds of plate.
 *
 * A photograph is a picture: it fills the plate, with the soft corner the
 * figure always had (a border with sharp corners replaced it for one commit,
 * which read as a screenshot dropped on the page). A document is a specimen:
 * it is smaller, because a square 1024px scan rendered 880px tall was the
 * largest thing on the page, and it sits on a sage mat, because a scan brings
 * its own white or grey ground and butting that against the page's cream is
 * what "not blended" looks like. The mat is the frame a specimen is shown in.
 */
.miles-vaccine-figure { margin: 0; padding: 8px 0 56px; background: var(--color-background, #faf7f2); }
.miles-vaccine-figure > .health-hub-container { display: grid; justify-items: center; }
.miles-vaccine-figure__plate { width: 100%; display: grid; justify-items: center; }
.miles-vaccine-figure img { display: block; width: 100%; height: auto; }

.miles-vaccine-figure--photo .miles-vaccine-figure__plate { max-width: 880px; }
.miles-vaccine-figure--photo img { border-radius: 12px; }

.miles-vaccine-figure--document .miles-vaccine-figure__plate {
  max-width: 640px;
  padding: 28px;
  background: var(--color-sage-soft, #edf2ed);
  border: 1px solid var(--color-sage, #dce7df);
  border-radius: 14px;
}
.miles-vaccine-figure--document img {
  max-width: 520px;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(26, 46, 42, 0.12);
}

/* 14px at 400 in soft grey measured 5.64:1, which passes and still read as a
   stray line under a large picture. Weight and colour carry it, not size. */
.miles-vaccine-figure figcaption {
  width: 100%;
  max-width: 880px;
  margin-top: 14px;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.miles-vaccine-figure--document figcaption { max-width: 640px; }

@media (max-width: 767px) {
  .miles-vaccine-figure--document .miles-vaccine-figure__plate { padding: 16px; }
}

/* The editor-only note sits where its picture would have been. */
.miles-vaccine-figure__warning { margin-block: 0 40px; }

/* The hero's ground: a photograph of the pharmacy itself, laid under the
   green at low opacity so the hero has depth rather than a flat wash. It
   composites with the section's own gradient, which is painted behind it,
   and everything that has to be read sits above both. Desaturated and
   darkened first: the pharmacy interior is a bright, busy picture, and white
   text over the bright parts is what would have cost the contrast. */
.miles-vaccine-hero__ground {
  position: absolute;
  z-index: -3;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
  filter: saturate(0.6) brightness(0.78);
  pointer-events: none;
  /* A flat 16% wash over the whole hero was invisible where it mattered and
     still put something behind every word. The picture is masked instead:
     nothing at all behind the headline, the lede, the chips and the button,
     rising to its full strength in the corner under the tools panel, which
     is the one part of this hero that holds nothing. That is where a
     photograph can be seen, so that is the only place it is drawn. */
  -webkit-mask-image: radial-gradient(118% 105% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.62) 26%, rgba(0, 0, 0, 0.18) 46%, transparent 64%);
  mask-image: radial-gradient(118% 105% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.62) 26%, rgba(0, 0, 0, 0.18) 46%, transparent 64%);
}

/* Stacked, the dead space is the strip below the panel rather than a corner. */
@media (max-width: 900px) {
  .miles-vaccine-hero__ground {
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.14) 58%, rgba(0, 0, 0, 0.6) 84%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.14) 58%, rgba(0, 0, 0, 0.6) 84%, #000 100%);
  }
}

/* A browser with no mask support gets the old flat wash rather than a
   photograph across the whole hero at 55%. */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .miles-vaccine-hero__ground { opacity: 0.16; filter: saturate(0.55) brightness(0.62); }
}

/* The country list's links. Only a published guide is a link, so the styling
   has to distinguish one from a country that is still plain text beside it. */
.miles-vaccine-related .miles-dest-risks__label a {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-color: rgba(44, 95, 90, 0.35);
  text-underline-offset: 4px;
}
.miles-vaccine-related .miles-dest-risks__label a:hover,
.miles-vaccine-related .miles-dest-risks__label a:focus-visible {
  color: var(--color-brand-dark);
  text-decoration-color: currentColor;
}

/* ---- inside a tool -------------------------------------------------------
   The questions and the outcome share one box, because a reader who mistyped
   a stopover needs the questions still there to fix it. The box reserves its
   height, so an outcome appearing shifts nothing below it. */

.miles-vaccine-tool__body { display: grid; gap: 24px; align-content: start; }

/* Inside the frame the questions take their column, not a 420px strip. */
.miles-vaccine-tool__frame .miles-tool-form { max-width: 520px; }
.miles-vaccine-tool__frame .miles-tool-field__control { max-width: none; }

.miles-tool-form { display: grid; gap: 20px; }

.miles-tool-field { display: grid; gap: 7px; }

.miles-tool-field__label {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* The three questions are a sequence, so they are numbered; the number is
   hidden from the label's name, which stays the question. */
.miles-tool-field__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--color-brand-dark);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--color-sage-soft, #edf2ed);
  border: 1px solid var(--color-sage, #dce7df);
  border-radius: 50%;
}
.miles-tool-field__help {
  margin: 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.miles-tool-field__control {
  width: 100%;
  max-width: 420px;
  padding: 11px 13px;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;                     /* 16px or iOS zooms the page on focus */
  background: #fff;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 8px;
}
select[multiple].miles-tool-field__control { padding: 6px; }
.miles-tool-field__control:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 2px;
  border-color: var(--color-brand);
}

.miles-tool-pick { display: grid; gap: 8px; }
.miles-tool-pick__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.miles-tool-pick__chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px 3px 3px 13px;
  color: var(--color-brand-dark);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  background: var(--color-sage-soft, #edf2ed);
  border: 1px solid var(--color-sage, #dce7df);
  border-radius: 999px;
}
.miles-tool-pick__remove {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--color-brand-dark);
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.miles-tool-pick__remove:hover { background: rgba(44, 95, 90, 0.12); }
.miles-tool-pick__remove:focus-visible { outline: 3px solid rgba(232, 115, 74, 0.5); outline-offset: 1px; }

.miles-tool-pick__field { position: relative; }
.miles-tool-pick__list {
  position: absolute;
  z-index: 6;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  margin: 0;
  padding: 6px;
  max-height: 248px;
  overflow: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  box-shadow: 0 12px 32px rgba(26, 46, 42, 0.14);
}
.miles-tool-pick__option {
  padding: 9px 12px;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.miles-tool-pick__option:hover,
.miles-tool-pick__option.is-active { background: var(--color-sage-soft, #edf2ed); }
.miles-tool-pick__option[aria-selected="true"] { color: var(--color-brand-dark); font-weight: 600; }
.miles-tool-pick__option[aria-selected="true"]::after { content: " \2713"; }

/* A selected date, the one figure on the page a reader came for. */
.miles-vaccine-tool__result .miles-tool-out__stamp {
  padding: 14px 18px;
  color: var(--color-brand-dark);
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  font-size: 28px;
}
.miles-tool-out__stamp-label {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.miles-tool-pick__none {
  padding: 9px 12px;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.miles-tool-modes { margin: 0; padding: 0; border: 0; display: grid; gap: 9px; }
.miles-tool-modes__row { display: flex; flex-wrap: wrap; gap: 10px; }

.miles-tool-form__go { justify-self: start; }

/* The outcome. A mark and a word as well as a colour, so the three answers
   are told apart without relying on hue. */

.miles-tool-out {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 22px;
  background: var(--color-sage-soft, #edf2ed);
  border-left: 4px solid var(--color-brand);
}
/* In the readout the panel is the box, and its accent carries the colour. */
.miles-vaccine-tool__result .miles-tool-out { padding: 0; background: none; border: 0; }

.miles-tool-out__flag { display: flex; gap: 9px; align-items: center; margin: 0; }
.miles-tool-out__glyph {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  background: var(--color-brand);
  border-radius: 50%;
}
.miles-tool-out__word {
  color: var(--color-brand-dark);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.miles-tool-out__headline {
  margin: 0;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.miles-tool-out__body,
.miles-tool-out__note {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.miles-tool-out__note { color: var(--color-text-soft); font-size: 14px; }

.miles-tool-out__stamp {
  margin: 0;
  color: var(--color-brand-dark);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}

.miles-tool-out .miles-tool-out__jump {
  color: var(--color-brand);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Required and too-late lead with the CTA colour; a recommendation is the
   brand; the quieter two stay sage. The word and the mark carry the meaning
   either way. */
.miles-tool-out--required,
.miles-tool-out--risk-destination,
.miles-tool-out--urgent-route { border-left-color: var(--color-cta, #e8734a); }
.miles-tool-out--required .miles-tool-out__glyph,
.miles-tool-out--risk-destination .miles-tool-out__glyph,
.miles-tool-out--urgent-route .miles-tool-out__glyph { background: var(--color-cta-hover, #ce5e38); }
.miles-tool-out--required .miles-tool-out__word,
.miles-tool-out--risk-destination .miles-tool-out__word,
.miles-tool-out--urgent-route .miles-tool-out__word { color: #8a3d1d; }

/* Two answers in one panel. The readout strips each box's own edges, so a
   stack of them needs a rule of its own or the second reads as a
   continuation of the first rather than a separate verdict. */
.miles-vaccine-tool__result .miles-tool-out + .miles-tool-out {
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid rgba(26, 46, 42, 0.14);
}

/* The certificate note's link to the vaccine's own page. Inside a paragraph on
   the evergreen band, so it takes the band's own link treatment rather than
   the cream one used elsewhere. */
/* Two classes, not one. `.service-location-page a { text-decoration: none }`
   is (0,1,1) and the destination and vaccine pages both carry that body
   class, so a single-class rule here loses and the link renders as bold text
   with no underline at all. */
.miles-dest-band__note .miles-dest-band__link {
  color: #fff;
  /* 600, not 700: the note already opens with a bold label, and a second
     bold phrase at the end read as a heading rather than a link. Wrapping
     inline for the same reason -- nowrap pushed it onto a line of its own. */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.72);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.miles-dest-band__note .miles-dest-band__link:hover,
.miles-dest-band__note .miles-dest-band__link:focus-visible { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------------------
 * The vaccine hero: the destination hero's top, and the tools in the right half.
 *
 * Measured on the yellow fever page rather than assumed. The hero took the
 * generic service-page top (96px, then 52 under the breadcrumb: eyebrow at
 * 194) where the six destination heroes sit at 44 and 36 (eyebrow at 126).
 * On a phone the container was still `min-height: calc(100svh - 150px)` and
 * flex-centred, which put the breadcrumb 156px down and left as much again
 * under the button; the height comes from the copy now, as it does on the
 * destination pages.
 *
 * The right half was plain ground. A destination hero puts a photograph
 * there; this page has no honest one to put there, and what it does have is
 * the two tools it is built around, so they take the column: each tool's own
 * title, intro and link, from the data the tool itself renders from.
 * ------------------------------------------------------------------------- */

/* `main >` at (0,2,1), later in the file than the 96px rule it restates. */
.miles-vaccine-page main > .service-location-hero,
.miles-vaccines-page main > .service-location-hero { padding-block: 44px 84px !important; }

/* Three classes, so the un-centring holds at every width against the base
   theme's (0,2,0) rule inside its own media query. */
.miles-vaccine-page .service-location-hero > .health-hub-container,
.miles-vaccines-page .service-location-hero > .health-hub-container {
  min-height: 0;
  justify-content: flex-start;
}

/* The hero and the tools jump to sections by id; a little air above the
   target, so a heading doesn't arrive glued to the top edge. Nothing on
   this page is fixed over the top of the content, so 24 and not the guide
   pages' 110. */
.miles-vaccine-page [id],
.miles-vaccines-page [id] { scroll-margin-top: 24px; }

@media (min-width: 901px) {
  .miles-vaccine-page .service-location-hero .service-location-breadcrumb,
  .miles-vaccines-page .service-location-hero .service-location-breadcrumb { margin-bottom: 36px; }

  .miles-vaccine-page .service-location-hero__layout,
  .miles-vaccines-page .service-location-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 32px 64px;
    align-items: start;
  }
  .miles-vaccine-page .service-location-hero__content,
  .miles-vaccines-page .service-location-hero__content { max-width: 600px; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .miles-vaccine-page .service-location-hero__layout,
  .miles-vaccines-page .service-location-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 32px 40px; }
}

.miles-vaccine-hero__tools {
  padding: 24px 28px 6px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.miles-vaccine-hero__tools-eyebrow {
  margin: 0 0 4px;
  color: #cddfd2;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-vaccine-hero__tools-list { margin: 0; padding: 0; list-style: none; }
.miles-vaccine-hero__tools-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.13); }

/* Two classes: `.service-location-page a` is (0,1,1). The whole row is the
   link, so the target is the row and not a phrase in it. */
.miles-vaccine-hero .miles-vaccine-hero__tool {
  display: grid;
  gap: 8px;
  padding: 20px 0 22px;
  color: #fff;
  text-decoration: none;
}

.miles-vaccine-hero__tool-title {
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  text-wrap: balance;
}

.miles-vaccine-hero__tool-copy {
  color: rgba(255, 255, 255, 0.74);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.miles-vaccine-hero__tool-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.miles-vaccine-hero__tool-go svg { width: 14px; height: 14px; flex: none; transition: transform 0.2s ease; }
.miles-vaccine-hero .miles-vaccine-hero__tool:hover .miles-vaccine-hero__tool-go,
.miles-vaccine-hero .miles-vaccine-hero__tool:focus-visible .miles-vaccine-hero__tool-go { text-decoration-color: currentColor; }
.miles-vaccine-hero .miles-vaccine-hero__tool:hover .miles-vaccine-hero__tool-go svg { transform: translateX(3px); }

/* On a phone the panel follows the button, so nothing pushes the booking
   down, and each tool is its question and its link: the intro repeats on
   the tool itself a screen or two below. */
@media (max-width: 900px) {
  .miles-vaccine-hero__tools { margin-top: 30px; padding: 18px 20px 2px; }
  .miles-vaccine-hero .miles-vaccine-hero__tool { padding: 16px 0 18px; gap: 6px; }
  .miles-vaccine-hero__tool-title { font-size: 21px; }
  .miles-vaccine-hero__tool-copy { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .miles-vaccine-hero__tool-go svg { transition: none; }
  .miles-vaccine-hero .miles-vaccine-hero__tool:hover .miles-vaccine-hero__tool-go svg { transform: none; }
}

/* The hero's booking card, on a page whose data asks for one (hero_card):
   the bookend's card (.miles-ready__card) in the column the tools take on
   other pages. The service and its price lead, the page's line on walking
   in under them, then today's hours on the site's one clock, the days
   Booked has free and the next free appointment. */
.miles-vaccine-hero__card .miles-ready__card { padding: 28px 30px 26px; }
.miles-vaccine-hero__card .miles-ready__label { margin-bottom: 10px !important; }
/* The page's reading floor is 16px, and the card is read: its field label
   and its button too (checks/type-scale.js). */
.miles-vaccine-hero__card .miles-ready__card label { font-size: 16px; letter-spacing: 0; }
.miles-vaccine-hero__card .miles-ready__card button { font-size: 16px; }

/* Each line is a <p> of .home-booking-start, whose rule (0,1,1) sets a 14px
   size and a soft colour with !important, so these name the card too. */
.miles-vaccine-hero__card p.miles-vaccine-hero__card-title {
  margin: 0 0 8px;
  color: var(--color-text, #1a2e2a) !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.15;
  text-wrap: balance;
}
.miles-vaccine-hero__card-title span { color: var(--color-brand, #2c5f5a); white-space: nowrap; }

.miles-vaccine-hero__card p.miles-vaccine-hero__card-lead {
  margin: 0 0 10px;
  color: var(--color-text, #1a2e2a) !important;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* The card's second line, to another page: the flu card's COVID option. */
.miles-vaccine-hero__card p.miles-vaccine-hero__card-also { margin: -6px 0 14px; color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.45; }
.miles-vaccine-hero__card p.miles-vaccine-hero__card-also a { color: var(--color-brand-dark, #204944); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(44, 95, 90, 0.35); text-underline-offset: 3px; }
.miles-vaccine-hero__card p.miles-vaccine-hero__card-also a:hover,
.miles-vaccine-hero__card p.miles-vaccine-hero__card-also a:focus-visible { text-decoration-color: currentColor; }
/* The arrow follows the last word, on a phone too, where the line wraps: inline, not a flex item pushed to the edge, and never alone on a line. */
.miles-vaccine-hero__card p.miles-vaccine-hero__card-also svg { display: inline-block; vertical-align: -1px; margin-left: 2px; }
.miles-vaccine-hero__card .miles-vaccine-hero__card-also-end { white-space: nowrap; }
.miles-vaccine-hero__card p.miles-vaccine-hero__card-hours,
.miles-vaccine-hero__card p.miles-ready__next {
  margin: 0;
  color: var(--color-brand-dark, #204944) !important;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}
.miles-vaccine-hero__card p.miles-vaccine-hero__card-hours { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.miles-vaccine-hero__card p.miles-vaccine-hero__card-hours:has(.miles-hours-text:empty) { display: none; }
.miles-vaccine-hero__card p.miles-ready__next { margin-top: 12px; }

/* A phone: the card follows the button, and the calendar gives way to the
   next free appointment, which the card's button books. */
@media (max-width: 900px) {
  .miles-vaccine-hero__card { margin-top: 30px; }
  .miles-vaccine-hero__card .miles-ready__card { padding: 22px 20px 20px; border-radius: 20px; }
  .miles-vaccine-hero__card p.miles-vaccine-hero__card-title { font-size: 24px; }
  .miles-vaccine-hero__card .miles-cal,
  .miles-vaccine-hero__card label[for="vaccine-hero-card-date"] { display: none; }
  .miles-vaccine-hero__card .miles-ready__card button { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * Who it is for, as a grid.
 *
 * Measured first: five ledger rows put a 294px label column beside copy
 * capped at 62ch, with 240px of nothing to the right and 46px of padding a
 * row, 888px of section for five short cases. Parallel cases are cells:
 * three across on a wide screen, two on a narrower one, each under its own
 * rule, and the sixth cell the count leaves empty is the way to the route
 * checker. The ledger rows the other sections keep are drawn a little
 * closer on this page, at the same specificity as their own rule.
 * ------------------------------------------------------------------------- */

.miles-vaccine-grid {
  display: grid;
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  --reveal-step: 70ms;
}

.miles-vaccine-grid__cell {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  margin: 0;
  padding: 22px 0 28px;
}

.miles-vaccine-grid__cell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
  transform-origin: left center;
}

.miles-vaccine-grid__label {
  margin: 0;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.22;
  text-wrap: balance;
}

.miles-vaccine-grid__copy {
  margin: 0;
  max-width: 58ch;
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.miles-vaccine-grid__cell--link { gap: 10px; }

.miles-vaccine-grid__ask {
  margin: 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Two classes: `.service-location-page a` is (0,1,1). */
.miles-vaccine-section .miles-vaccine-grid__link {
  display: inline-flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--color-brand-dark);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.22;
  text-decoration: underline;
  text-decoration-color: rgba(44, 95, 90, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.miles-vaccine-section .miles-vaccine-grid__link:hover,
.miles-vaccine-section .miles-vaccine-grid__link:focus-visible { text-decoration-color: currentColor; }
.miles-vaccine-grid__link svg { width: 16px; height: 16px; flex: none; margin-top: 5px; transition: transform 0.2s ease; }
.miles-vaccine-section .miles-vaccine-grid__link:hover svg { transform: translateX(3px); }

/* The columns are the count's, not a constant: a section with four cases in a
   three-column grid left a hole in its second row, and the hole is what the
   client saw. The renderer picks the number that divides the count and tells
   the link cell how much of its row is left to stretch across. */
@media (min-width: 900px) {
  .miles-vaccine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .miles-vaccine-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .miles-vaccine-grid__cell--link { grid-column: span var(--span, 1); }
}
@media (max-width: 899px) {
  .miles-vaccine-grid__cell { padding: 18px 0 22px; }
}

/* The ledger rows the other sections keep, a little closer on this page. */
.miles-vaccine-section .miles-dest-risks__row { padding: 18px 0 20px; }

@media (prefers-reduced-motion: reduce) {
  .miles-vaccine-grid__link svg { transition: none; }
  .miles-vaccine-section .miles-vaccine-grid__link:hover svg { transform: none; }
}

/* The cells' rules draw in as the ledger rows' do. */
@media (prefers-reduced-motion: no-preference) {
  .miles-vaccine-grid.is-armed > .miles-vaccine-grid__cell::before { transform: scaleX(0); }
  .miles-vaccine-grid.is-revealed > .miles-vaccine-grid__cell::before {
    animation: miles-draw-x 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--reveal-delay, 0ms) + var(--i, 0) * var(--reveal-step, 70ms) + 120ms);
  }
}
@media (forced-colors: active) {
  .miles-vaccine-grid__cell::before { background: CanvasText; }
}

/* ---------------------------------------------------------------------------
 * The vaccine page's rhythm.
 *
 * Measured before any of this: all twenty-one sections sat in the same
 * 1192px container -- 124px of dead margin a side at 1440, 364 a side at
 * 1920, twenty-one times over -- with no section reaching a screen edge and
 * none asymmetric at section level. That is what reads as a template. The
 * home page never repeats a treatment twice running: heading left,
 * paragraph right, photograph off the left edge, rows offset right, the
 * destinations grid edge to edge. This gives the vaccine page the same
 * vocabulary: four measures rather than one, and two bleeds that carry a
 * picture to the edge of the window on the home page's own grid.
 * ------------------------------------------------------------------------- */

.miles-vaccine {
  /* the container's side margin, so a child can subtract it and reach the
     screen's edge: the home page's own variable, restated here */
  --miles-gutter: max(24px, calc((100vw - 1192px) / 2));
  --measure-reading: 760px;
  --measure-offset: 1040px;
  --measure-standard: 1192px;
  --measure-instrument: 1320px;
}
@media (max-width: 767px) {
  .miles-vaccine { --miles-gutter: 18px; }   /* theme.css narrows the container to 100% - 36px here */
}

/* ---- the measures ------------------------------------------------------ */

/* Offset: the column stops short of the container's right edge. The ledger's
   natural width is about this anyway; its rows already stopped 240px short
   of the edge, so this admits it and leaves the air on purpose. */
/* Offset: a narrower column set against the container's right edge, so it
   starts about 150px inboard of the standard measure. It was a width and
   nothing else -- the same left edge as standard, ending 152px earlier
   behind the ragged right edge of prose -- which is to say it was invisible,
   and a page built out of standard and offset read as one column repeated
   however many "distinct measures" anything counted. */
.miles-vaccine-section--offset .miles-vaccine-measure { max-width: var(--measure-offset, 1040px); }

@media (min-width: 1000px) {
  .miles-vaccine-section--offset .miles-vaccine-measure { margin-inline: auto 0; }
}

/* Reading: a single narrow column set right of centre, the head stacked in
   one column rather than split, because a two-column head has no room at
   this width and reads as a squeeze. */
@media (min-width: 1000px) {
  .miles-vaccine-section--reading .miles-vaccine-measure {
    max-width: var(--measure-reading, 760px);
    margin-inline: auto min(120px, 10%);
  }
  .miles-vaccine-section--reading .miles-dest-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  .miles-vaccine-section--reading .miles-dest-head .miles-pf-heading { grid-row: 2; }
  .miles-vaccine-section--reading .miles-dest-head .miles-pf-lead    { grid-column: 1; grid-row: 3; align-self: start; margin-top: 6px; }
}

/* The answer panel sits offset too: left-aligned in the container, air on
   the right, so the hero above and the instrument below are not three
   full-width boxes in a row. */
.miles-vaccine-answer__panel { max-width: var(--measure-offset, 1040px); margin-right: auto; }

/* Instrument: the checker's frame reaches 64px past the standard measure
   on each side, clamped so it never gets within 24px of the window's edge
   and collapses to standard where there is no room. */
@media (min-width: 1000px) {
  .miles-vaccine-tool--instrument .miles-vaccine-tool__frame {
    margin-inline: calc(-1 * max(0px, min(64px, var(--miles-gutter, 24px) - 24px)));
  }
}

/* ---- the bleeds -------------------------------------------------------- */

/* The home page's care index: a figure in one column reaching the screen's
   edge on its side, the rows in the other. Left for a photograph, right for
   the certificate, so the two mirror each other down the page. A photograph
   fills its plate (cover) and takes the rows' height; a document is shown
   whole on a mat that does the bleeding for it, because cover-cropping a
   scan of a certificate would crop the certificate. */
.miles-vaccine-split { display: grid; gap: 40px 64px; align-items: stretch; }

.miles-vaccine-split__figure {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
  min-width: 0;
}
.miles-vaccine-split__rows { min-width: 0; }

.miles-vaccine-split__plate { position: relative; min-height: 440px; overflow: hidden; }
.miles-vaccine-split__figure--photo .miles-vaccine-split__plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.miles-vaccine-split__figure--document .miles-vaccine-split__plate {
  display: grid;
  place-items: center;
  padding: 40px;
  background: var(--color-sage-soft, #edf2ed);
  border: 1px solid var(--color-sage, #dce7df);
}
.miles-vaccine-split__figure--document .miles-vaccine-split__plate img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(26, 46, 42, 0.12);
}
.miles-vaccine-split__figure figcaption {
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .miles-vaccine-split--left  { grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.15fr); }
  .miles-vaccine-split--right { grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.7fr); }
  .miles-vaccine-split--left  .miles-vaccine-split__figure { grid-column: 1; grid-row: 1; }
  .miles-vaccine-split--left  .miles-vaccine-split__rows   { grid-column: 2; grid-row: 1; }
  .miles-vaccine-split--right .miles-vaccine-split__figure { grid-column: 2; grid-row: 1; }
  .miles-vaccine-split--right .miles-vaccine-split__rows   { grid-column: 1; grid-row: 1; }
  /* to the window's edge on its own side; the caption keeps the container's edge */
  .miles-vaccine-split--left  .miles-vaccine-split__plate { margin-left:  calc(-1 * var(--miles-gutter, 24px)); border-radius: 0 20px 20px 0; }
  .miles-vaccine-split--right .miles-vaccine-split__plate { margin-right: calc(-1 * var(--miles-gutter, 24px)); border-radius: 20px 0 0 20px; }
  /* The mat ends exactly at the window's edge (the gutter is the whole of
     the margin), so nothing of it is hidden and its padding stays even. */
}

/* Stacked, the plate runs edge to edge, as the care figure does on a phone. */
@media (max-width: 899px) {
  .miles-vaccine-split__plate { margin-inline: calc(-1 * var(--miles-gutter, 18px)); min-height: 0; border-radius: 0; }
  .miles-vaccine-split__figure--photo .miles-vaccine-split__plate { aspect-ratio: 3 / 2; }
  .miles-vaccine-split__figure--document .miles-vaccine-split__plate { padding: 24px var(--miles-gutter, 18px); }
}

/* A right-hand bleed reaches past the container by the scrollbar's share of
   100vw on a desktop; the section clips that rather than letting it become
   a horizontal scroll. clip, not hidden: nothing here scrolls or sticks. */
.miles-vaccine-section--bleed-left,
.miles-vaccine-section--bleed-right { overflow-x: clip; }

/* ---- the band's call, in the column that ran empty ----------------------- */

.miles-dest-band__cta {
  margin-top: 28px;
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
}
.miles-dest-band__cta:hover,
.miles-dest-band__cta:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: #fff; }

/* ---------------------------------------------------------------------------
 * The vaccine page's country grid: where certificates apply.
 *
 * The home page's outline tiles, for the five countries that carry this
 * certificate, edge to edge on evergreen; the second of the page's full
 * bleeds. Each tile carries the destination page's own sentence about who
 * the rule applies to, so the tiles grow to their sentence rather than
 * keeping the home page's fixed aspect and clipping it. The sixth cell is
 * the route checker, for the reader whose country is none of these.
 * ------------------------------------------------------------------------- */

.miles-vaccine .miles-dests--vaccine {
  margin: 0;
  padding-block: 88px 0 !important;
  color: #fff;
  background: var(--color-brand-dark, #204944);
}
.miles-vaccine .miles-dests--vaccine .miles-dests__grid { border-bottom: 1px solid rgba(220, 231, 223, 0.22); }

/* Without the home page's fixed aspect the SVG would set the tile's height
   from its own square frame -- 634px of tile at 1440, 400 of it outline --
   so the figure is given the height the home page's proportion gives it
   (about 230px at three across) and the tile is that plus its words. */
.miles-dests--vaccine .miles-dests__tile { aspect-ratio: auto; }
.miles-dests--vaccine .miles-dests__figure { height: 230px; }
/* Tiles of different heights in one row: each stretches to its cell, so the
   six text blocks share a bottom line and a hover photograph covers the
   whole cell rather than the top of it. */
.miles-dests--vaccine .miles-dests__item { display: grid; }

.miles-dests__rule {
  display: block;
  margin-top: 12px;
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .miles-dests__tile:hover .miles-dests__rule { color: #fff; }
}
.miles-dests__tile:focus-visible .miles-dests__rule { color: #fff; }
.miles-dests--lit .miles-dests__rule { color: #fff; }

/* The spare: no figure, its words on the same bottom line as its neighbours'
   so the six text blocks share one row, and the name a size down because it
   is a question rather than a country. */
.miles-dests__tile--spare { grid-template-rows: auto; align-content: end; }
.miles-dests__name--spare { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }

@media (max-width: 1199px) {
  .miles-dests--vaccine .miles-dests__figure { height: 210px; }
}
@media (max-width: 640px) {
  .miles-dests--vaccine .miles-dests__figure { height: 140px; }
  .miles-dests__rule { font-size: 13px; }
  .miles-dests__name--spare { font-size: 22px; }
}

/* -------------------------------------------------------------------------
   Vaccine page, where the disease is: the same grid, a tile a region.
   Each tile is the region's silhouette with the risk countries drawn on it
   as one shape, then the count, the name, every country's name and the
   booking link. The link is the link rather than the tile, so the tile is
   a div and the lifts a pointer or a keyboard earns are stated for it here.
   ------------------------------------------------------------------------- */

/* The silhouette: the ground the belt sits on, filled and never stroked,
   so the belt's line is the only line in the drawing. */
.miles-dests__land {
  fill: var(--color-sage, #dce7df);
  fill-opacity: 0.09;
  stroke: none;
}

/* The belt rests a step above the silhouette and lifts further under a
   pointer, both through the variable the reveal settles on. */
.miles-dests--regions .miles-dests__tile { --tile-fill: 0.2; }
.miles-dests--regions .miles-dests__outline { fill-opacity: 0.2; }
@media (hover: hover) {
  .miles-dests--regions .miles-dests__tile:hover { --tile-fill: 0.34; }
  .miles-dests--regions .miles-dests__tile:hover .miles-dests__outline { fill-opacity: 0.34; stroke: #fff; }
}
/* Keyboard: the link inside is what takes focus, and the tile responds as
   it would to a pointer. */
.miles-dests__tile--region:focus-within { --tile-fill: 0.34; }
.miles-dests__tile--region:focus-within .miles-dests__outline { fill-opacity: 0.34; stroke: #fff; }
.miles-dests__tile--region:focus-within .miles-dests__cta,
.miles-dests__tile--region:focus-within .miles-dests__region,
.miles-dests__tile--region:focus-within .miles-dests__rule { color: #fff; }
.miles-dests__tile--region:focus-within .miles-dests__cta svg { transform: translateX(4px); }

/* Paragraphs where the country tiles have spans: the browser's own
   paragraph margins would open the tile up, so only the tops the tile
   design sets survive. */
.miles-dests__tile--region { cursor: default; }
.miles-dests__tile--region .miles-dests__region { margin-top: 0; }
.miles-dests__tile--region .miles-dests__region,
.miles-dests__tile--region .miles-dests__name,
.miles-dests__tile--region .miles-dests__rule { margin-bottom: 0; }
/* Thirty names wrap to the tile's width rather than a sentence's. */
.miles-dests__rule--list { max-width: none; }

/* Under the lead: whose list this is and when it was last checked. */
.miles-dests__source {
  margin: 14px 0 0;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.5;
}
/* Two classes: `.service-location-page a` is (0,1,1). */
.miles-dests--regions .miles-dests__source a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

@media (max-width: 999px) {
  /* Two region tiles and the checker in a two-column grid: the checker
     takes the whole second row rather than leaving a cell of hairline
     colour beside it. */
  .miles-dests--regions .miles-dests__item--spare { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* One column: two lists of thirty names side by side at 160px each
     would be the tallest tiles on the site. */
  .miles-dests--regions .miles-dests__grid { grid-template-columns: minmax(0, 1fr); }
  .miles-dests--regions .miles-dests__figure { height: 160px; }
}

@media (forced-colors: active) {
  .miles-dests__land { fill: CanvasText; fill-opacity: 0.25; }
}

/* -------------------------------------------------------------------------
   Vaccine page: the answer panel on a phone, and the editor's own notes.
   ------------------------------------------------------------------------- */

/* On a desktop the statement and the facts are two columns, and the column
   is what separates them. On a phone they are one above the other, so the
   ground does that job instead: the statement on the card's white, the
   facts on the sage the rest of the site uses for an instrument. The rail
   runs to the card's edges, which is why the panel gives up its bottom
   padding and the first fact its rule -- the change of surface is the rule.

   Measured at 390 before this: the panel was 804px tall, of which 349 was
   eleven lines of 23px serif in a 298px column. A serif that size in a
   column that narrow sets about 27 characters to the line, which is what
   made a summary read as an essay. */
@media (max-width: 899px) {
  .miles-vaccine-answer__panel { padding: 30px 24px 0; gap: 24px; }
  .miles-vaccine-answer__panel--solo { padding-bottom: 30px; }
  .miles-vaccine-answer__statement { gap: 10px; }
  .miles-vaccine-answer__facts {
    margin: 0 -24px;
    padding: 2px 24px 4px;
    background: var(--color-sage-soft, #edf2ed);
  }
  .miles-vaccine-answer__fact { padding: 14px 0 15px; border-top-color: rgba(44, 95, 90, 0.2); }
  .miles-vaccine-answer__fact:first-child { border-top: 0; }
  .miles-vaccine-answer__fact:last-child { padding-bottom: 18px; }
  .miles-vaccine-answer__value { font-size: 24px; }
  .miles-vaccine-answer__detail { font-size: 14px; }
}

@media (max-width: 599px) {
  /* 20px sets about 32 characters to this column, which is a reading
     measure rather than a ransom note, and takes two lines off the block. */
  .miles-vaccine-answer__copy { max-width: none; font-size: 20px; line-height: 1.45; }
  .miles-vaccine-answer__panel { padding: 26px 20px 0; gap: 22px; }
  .miles-vaccine-answer__facts { margin: 0 -20px; padding: 2px 20px 4px; }
  .miles-vaccine-answer__value { font-size: 23px; }
}

/* A note that something the editor uploaded is not being drawn. It is not
   the blocker banner's business and does not get its ground: the picture is
   the thing that is missing, so the note sits where the picture would have
   been, at the weight of a caption with a rule at its side. */
.miles-vaccine-figure__warning--missing {
  margin: 0 0 40px;
  padding: 2px 0 2px 16px;
  max-width: 62ch;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  border-left: 2px solid var(--color-cta, #e8734a);
}
.miles-vaccine-figure__warning--missing strong { color: var(--color-text); font-weight: 600; }

/* -------------------------------------------------------------------------
   Vaccine page: an empty picture slot, drawn where the picture goes.
   Editor-only, and built only for someone who can edit, so none of this is
   ever served to a visitor. It sits inside the plate the real figure would
   fill, so the section keeps the shape it will have once the picture lands.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * A figure drawn from a section's own numbers, in the place a photograph
 * would take. Six quantities that were a paragraph: ranked, each bar its
 * share of the largest. Bars are a background width rather than a canvas, so
 * the figures are selectable text and survive styles being off.
 * ------------------------------------------------------------------------- */

/* A drawn figure is as tall as what it draws. The photograph plates stretch
   to the rows beside them because a photograph crops; a chart stretched the
   same way sat in the middle of 500px of empty ground, which is the dead
   space this page was being rebuilt to get rid of. */
.miles-vaccine-split__figure--drawn { align-self: start; }

.miles-vaccine-split__plate--drawn {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 38px;
  background: var(--color-sage-soft, #edf2ed);
  border: 1px solid var(--color-sage, #dce7df);
}

.miles-props { display: grid; gap: 16px; }

.miles-props__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand, #2c5f5a);
}

.miles-props__list { display: grid; gap: 14px; margin: 0; }

.miles-props__row { display: grid; gap: 5px; }

.miles-props__name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text, #1a2e2a);
}

.miles-props__value {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-height: 20px;
}

.miles-props__bar {
  display: block;
  height: 10px;
  width: var(--share, 4%);
  border-radius: 999px;
  background: var(--color-brand, #2c5f5a);
}

.miles-props__figure {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-soft, #536762);
  white-space: nowrap;
}

.miles-props__source {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-soft, #536762);
}

@media (max-width: 899px) {
  .miles-vaccine-split__plate--drawn { padding: 26px var(--miles-gutter, 18px); }
  .miles-props__figure { font-size: 13px; }
}

.miles-vaccine-split__figure--slot .miles-vaccine-split__plate {
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: start;
  min-height: 260px;
  padding: 28px 30px;
  background: var(--color-sage-soft, #edf2ed);
  border: 1px dashed rgba(44, 95, 90, 0.4);
}

.miles-vaccine-slot { display: grid; gap: 7px; max-width: 34ch; }

.miles-vaccine-slot__eyebrow {
  margin: 0;
  color: var(--color-brand, #2c5f5a);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.3;
  text-transform: uppercase;
}

.miles-vaccine-slot__title {
  margin: 0;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.miles-vaccine-slot__copy {
  margin: 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

/* Two classes: `.service-location-page a` is (0,1,1). */
.miles-vaccine-slot .miles-vaccine-slot__link {
  margin-top: 2px;
  color: var(--color-brand-dark, #204944);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

@media (max-width: 767px) {
  .miles-vaccine-split__figure--slot .miles-vaccine-split__plate { min-height: 200px; padding: 22px 22px; }
  .miles-vaccine-slot__title { font-size: 20px; }
}

/* A picture that is on the page but could be better described. Editor-only,
   under the figure, at caption weight so it reads as a margin note rather
   than as a fault in the design. */
.miles-vaccine-figure__ask {
  margin: 8px 0 0;
  max-width: 52ch;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.miles-vaccine-figure__ask strong { color: var(--color-brand, #2c5f5a); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* -------------------------------------------------------------------------
   A section's sequence, as a rail.
   Words, not a picture: the labels are real text, so a search engine and a
   screen reader both get "10 days" and "11 July 2016" rather than pixels,
   it stays sharp at any size and there is nothing to download. The rail,
   the dots and the gap are drawn by this stylesheet around the list.
   ------------------------------------------------------------------------- */

.miles-vaccine-timeline {
  display: grid;
  gap: 28px 32px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
  counter-reset: none;
  --rail: rgba(44, 95, 90, 0.22);
  --dot: var(--color-brand, #2c5f5a);
  --fill: var(--color-brand, #2c5f5a);
  --today-text: var(--color-brand, #2c5f5a);
  --rail-gap: 32px;
}

.miles-vaccine-timeline__stop {
  position: relative;
  min-width: 0;
  padding-top: 30px;
}

/* The rail runs through every stop, so the line is continuous across the
   row rather than four separate dashes that have to be kept in step. */
.miles-vaccine-timeline__stop::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: -32px;          /* across the gap, into the next stop */
  height: 2px;
  background: var(--rail);
}

/* The gap between the injection and the day it counts is the one stretch
   of this page that costs people a holiday, so it is drawn as a gap: the
   rail goes dashed and the words go quiet. */
.miles-vaccine-timeline__stop--span::before {
  background: none;
  border-top: 2px dashed var(--rail);
  height: 0;
}

.miles-vaccine-timeline__stop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dot);
}

/* A span is a stretch, not a moment, so it carries no dot. */
.miles-vaccine-timeline__stop--span::after { content: none; }

/* The last stop runs off rather than stopping: the certificate does not
   expire, and a rail that ends in mid-air says that better than a word.
   The last of type, not the last child: a live rail's line and today's
   marker are added after the stops, and the last stop's line then ran to
   the edge of the screen. */
.miles-vaccine-timeline__stop:last-of-type::before {
  background: linear-gradient(90deg, var(--rail) 0%, var(--rail) 55%, rgba(44, 95, 90, 0) 100%);
  right: -8px;
}

.miles-vaccine-timeline__marker {
  margin: 0 0 6px;
  color: var(--color-brand, #2c5f5a);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.3;
  text-transform: uppercase;
}

.miles-vaccine-timeline__label {
  margin: 0 0 8px;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  text-wrap: balance;
}

.miles-vaccine-timeline__copy {
  margin: 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.miles-vaccine-timeline__stop--span .miles-vaccine-timeline__marker,
.miles-vaccine-timeline__stop--span .miles-vaccine-timeline__label {
  color: var(--color-text-soft);
}

/* The stop the season is in today, on the pages whose stops are dates the
   programme sets: the dot takes the call-to-action colour and the stop says
   so in words, at the label floor. */
.miles-vaccine-timeline__stop--now::after {
  background: var(--color-cta, #e8734a);
  box-shadow: 0 0 0 5px rgba(232, 115, 74, 0.18);
}

.miles-vaccine-timeline__now {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(232, 115, 74, 0.16);
  color: #8a3416;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Four across, with the row of markers reading as one line of dates. */
@media (min-width: 900px) {
  .miles-vaccine-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   The live rail: the season so far as a solid line, a marker on today, and
   a countdown to the next stop. miles-timeline.js places them from the
   reader's own date; without it the rail is as it was.
   ------------------------------------------------------------------------- */
.miles-vaccine-timeline[data-miles-rail] {
  position: relative;
  padding-top: 30px;            /* room for the Today label over the line */
}
/* The dots sit over the season-so-far line, and today's marker over both. */
.miles-vaccine-timeline[data-miles-rail] .miles-vaccine-timeline__stop::after { z-index: 3; }
/* The marker says it once the script has placed it. */
.miles-vaccine-timeline.is-live .miles-vaccine-timeline__now { display: none; }
.miles-vaccine-timeline.is-live .miles-vaccine-timeline__stop--now::after { background: var(--dot); box-shadow: none; }

/* A child of the rail like the stops, so the stagger entrance ("Reveal on
   scroll") would rise it in with them; two classes deep, and later in the
   file, so it is drawn instead. */
.miles-vaccine-timeline > .miles-vaccine-timeline__fill {
  position: absolute;
  z-index: 1;
  top: calc(var(--rail-y) - 1px);
  left: var(--rail-x0);
  width: calc(var(--today-x) - var(--rail-x0));
  height: 2px;
  background: var(--fill);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  animation: none;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.miles-vaccine-timeline.is-drawn > .miles-vaccine-timeline__fill { transform: scaleX(1); }

.miles-vaccine-timeline > .miles-vaccine-timeline__today {
  position: absolute;
  z-index: 4;
  top: var(--rail-y);
  left: var(--today-x);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--color-cta, #e8734a);
  box-shadow: 0 0 0 5px rgba(232, 115, 74, 0.24);
  opacity: 0;
  transform: none;
  animation: none;
  transition: opacity 0.3s ease 0.7s;
}
.miles-vaccine-timeline.is-drawn > .miles-vaccine-timeline__today { opacity: 1; }
.miles-vaccine-timeline__today-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--today-text);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Near either end the label keeps to the rail rather than centring off it. */
.miles-vaccine-timeline__today.is-start .miles-vaccine-timeline__today-label { left: 0; transform: none; }
.miles-vaccine-timeline__today.is-end .miles-vaccine-timeline__today-label { left: auto; right: 0; transform: none; }

.miles-vaccine-timeline__soon {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(232, 115, 74, 0.16);
  color: #8a3416;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .miles-vaccine-timeline > .miles-vaccine-timeline__fill,
  .miles-vaccine-timeline > .miles-vaccine-timeline__today { transition: none; }
}

/* The short date is for a narrow compact rail only. */
.miles-vaccine-timeline__marker-short { display: none; }

/* Compact: dates and names in one row at every width, no copy lines. Two
   classes deep throughout, because the stacked layout for narrow screens
   comes later in this file and would otherwise turn the row into a column. */
.miles-vaccine-timeline.miles-vaccine-timeline--compact {
  --rail-gap: 24px;
  grid-template-columns: repeat(var(--stops, 4), minmax(0, 1fr));
  gap: 0 var(--rail-gap);
  margin: 0;
}
.miles-vaccine-timeline--compact .miles-vaccine-timeline__stop,
.miles-vaccine-timeline--compact .miles-vaccine-timeline__stop:last-of-type { padding: 28px 0 0; }
.miles-vaccine-timeline--compact .miles-vaccine-timeline__stop::before {
  top: 6px;
  bottom: auto;
  left: 0;
  right: calc(-1 * var(--rail-gap));
  width: auto;
  height: 2px;
}
.miles-vaccine-timeline--compact .miles-vaccine-timeline__stop--span::before {
  background: none;
  border-left: 0;
  border-top: 2px dashed var(--rail);
  width: auto;
  height: 0;
}
.miles-vaccine-timeline--compact .miles-vaccine-timeline__stop:last-of-type::before {
  bottom: auto;
  right: -8px;
  height: 2px;
  background: linear-gradient(90deg, var(--rail) 0%, var(--rail) 55%, rgba(255, 255, 255, 0) 100%);
}
.miles-vaccine-timeline--compact .miles-vaccine-timeline__label { margin: 0; font-size: 19px; }
/* The countdown in two lengths: the short one for a phone. */
.miles-vaccine-timeline__soon-short { display: none; }

/* Dark: the rail on the evergreen of a hero. */
.miles-vaccine-timeline--dark {
  --rail: rgba(255, 255, 255, 0.24);
  --dot: #dce7df;
  --fill: #ffffff;
  --today-text: #ffffff;
}
.miles-vaccine-timeline--dark .miles-vaccine-timeline__marker { color: #cfe3d6; }
.miles-vaccine-timeline--dark .miles-vaccine-timeline__label { color: #ffffff; }
.miles-vaccine-timeline--dark .miles-vaccine-timeline__stop--span .miles-vaccine-timeline__marker,
.miles-vaccine-timeline--dark .miles-vaccine-timeline__stop--span .miles-vaccine-timeline__label { color: rgba(255, 255, 255, 0.76); }
.miles-vaccine-timeline--dark .miles-vaccine-timeline__now,
.miles-vaccine-timeline--dark .miles-vaccine-timeline__soon { background: rgba(232, 115, 74, 0.26); color: #ffe3d8; }

/* The flu hero's season row: full width under both columns. */
.miles-flu-hero__season {
  grid-column: 1 / -1;
  margin-top: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* The hero tightened so the rail is in the first screen: the copy column
   takes the grid's width, the button and the call line share a row, and
   the gaps between intro, badge and button come in. */
@media (min-width: 901px) {
  .miles-flu-hero .service-location-hero__content { max-width: none; }
  /* The service hero stacks these in a fit-content column; here they share a row. */
  .miles-flu-hero .service-location-hero__cta { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; }
  .miles-flu-hero .service-location-hero__cta .service-location-member-note { max-width: none; margin: 0; }
  /* Margins collapse to the larger, so it is the bottoms that set these gaps. */
  .miles-flu-hero .miles-dest__lede { margin-bottom: 16px; }
  .miles-flu-hero .service-location-trust { margin-top: 16px; margin-bottom: 16px; }
  .miles-flu-hero h1 { margin-bottom: 20px; }
  .miles-flu-hero .service-location-breadcrumb { margin-bottom: 28px; }
}
/* The call line's number: one tap, one line. Two classes, over the page's
   own "a { text-decoration: none }". */
.miles-flu-hero .miles-flu-hero__call {
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.miles-flu-hero .miles-flu-hero__call:hover,
.miles-flu-hero .miles-flu-hero__call:focus-visible { text-decoration-thickness: 2px; }
/* The strip under the flu page's intro that hands anyone not eligible for a
   free jab to the private pages (FJ-1, 7 October 2026): one line of prices and
   a button to each page, on a tint of the hero's own green rather than a card
   of its own. The second button is the hero's: white on the green, never the
   page's dark-on-cream outline, which vanished here. */
.miles-flu-hero .miles-flu-private {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  max-width: 640px;
  margin: 20px 0 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}
.miles-flu-hero .miles-flu-private__text {
  flex: 1 1 260px;
  margin: 0;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.miles-flu-hero .miles-flu-private__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.miles-flu-hero .miles-flu-private__go { white-space: nowrap; }
.miles-flu-hero .miles-flu-private .health-hub-button--secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}
.miles-flu-hero .miles-flu-private .health-hub-button--secondary:hover,
.miles-flu-hero .miles-flu-private .health-hub-button--secondary:focus-visible {
  color: var(--color-brand-dark);
  background: #ffffff;
  border-color: #ffffff;
}
.miles-flu-hero__season-caption {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: none;
  margin: 0 0 2px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.miles-flu-hero__season-icon { flex: none; display: block; margin-top: 4px; color: var(--color-cta, #e8734a); }

/* One column: the season straight under the button, the tools after it. */
@media (max-width: 900px) {
  .miles-flu-hero .service-location-hero__layout { display: flex; flex-direction: column; }
  .miles-flu-hero .service-location-hero__content { order: 1; }
  .miles-flu-hero .miles-flu-hero__season { order: 2; margin-top: 28px; }
  .miles-flu-hero .miles-vaccine-hero__tools { order: 3; }
}

/* A phone: short dates on the rail; the names are the caption's to say and
   stay for a screen reader. */
@media (max-width: 599px) {
  .miles-vaccine-timeline.miles-vaccine-timeline--compact { --rail-gap: 10px; }
  .miles-vaccine-timeline--compact .miles-vaccine-timeline__soon-long,
  .miles-vaccine-timeline--compact .miles-vaccine-timeline__marker-long,
  .miles-vaccine-timeline--compact .miles-vaccine-timeline__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .miles-vaccine-timeline--compact .miles-vaccine-timeline__marker-short,
  .miles-vaccine-timeline--compact .miles-vaccine-timeline__soon-short { display: inline; }
  .miles-vaccine-timeline--compact .miles-vaccine-timeline__soon { padding: 2px 8px; letter-spacing: 0.04em; white-space: nowrap; }
}

/* Below that the rail turns and runs down the side, which is the same
   sequence read the way a phone is held. */
@media (max-width: 899px) {
  .miles-vaccine-timeline { gap: 0; margin-bottom: 40px; }
  .miles-vaccine-timeline__stop { padding: 0 0 26px 30px; }
  .miles-vaccine-timeline__stop:last-of-type { padding-bottom: 0; }
  .miles-vaccine-timeline__stop::before {
    top: 6px;
    bottom: -6px;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .miles-vaccine-timeline__stop--span::before {
    background: none;
    border-top: 0;
    border-left: 2px dashed var(--rail);
    width: 0;
  }
  .miles-vaccine-timeline__stop:last-of-type::before {
    bottom: auto;
    height: 26px;
    background: linear-gradient(180deg, var(--rail) 0%, rgba(44, 95, 90, 0) 100%);
  }
  .miles-vaccine-timeline__label { font-size: 19px; }
}

@media (forced-colors: active) {
  .miles-vaccine-timeline__stop::before { background: CanvasText; }
  .miles-vaccine-timeline__stop::after { background: CanvasText; }
}

/* -------------------------------------------------------------------------
   The flu page. A seasonal strip in the hero saying what is happening today,
   and the free groups arranged by the day their appointments open.
   ------------------------------------------------------------------------- */

.miles-flu-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 12px 16px;
  max-width: 54ch;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.09);
  border-left: 2px solid var(--color-cta, #e8734a);
}
.miles-flu-banner__icon {
  flex: none;
  display: block;
  margin-top: 3px;
  color: #fff;
}
/* Out of season there is nothing running, so the marker stops asking for
   attention it cannot reward. */
.miles-flu-banner--closed { border-left-color: var(--color-sage, #dce7df); }
.miles-flu-banner--closed .miles-flu-banner__icon { color: var(--color-sage, #dce7df); }

@media (max-width: 599px) {
  .miles-flu-cohorts { gap: 32px; }
  .miles-flu-cohorts__label { font-size: 18px; }
  .miles-flu-banner { font-size: 14px; padding: 11px 14px; }
}

/* The flu hero reuses the service hero's classes, which are coloured for a
   light ground: on the evergreen they computed to the soft dark text colour
   at 1.66:1, which is not dim, it is invisible. Measured, not eyeballed. */
.miles-flu-hero .service-location-hero__eyebrow { color: var(--color-sage, #dce7df); }
.miles-flu-hero .service-location-hero__lead { color: rgba(255, 255, 255, 0.94); }
.miles-flu-hero .service-location-hero__note { color: rgba(255, 255, 255, 0.86); }
.miles-flu-hero .service-location-hero__actions { margin: 26px 0 0; }

/* -------------------------------------------------------------------------
   Flu: the season band, the numbered appointment, and the hub on a page
   that is one of its own cards.
   ------------------------------------------------------------------------- */

/* The banner sits in the hero's action block now, above the button, where
   the travel clinic's stock line goes. Given room rather than crowded into
   the paragraph under it, which is what made the two nearly touch. */
.miles-flu-hero .miles-flu-banner {
  margin: 0 0 22px;
  padding: 14px 18px;
  max-width: 46ch;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

/* Who qualifies: the page's one edge-to-edge moment, on the grid the
   country tiles use. Two cells for the two dates, a third to ring us. */
.miles-flu .miles-flu-dates {
  margin: 0;
  padding-block: 88px 0 !important;
  color: #fff;
  background: var(--color-brand-dark, #204944);
}
.miles-flu .miles-flu-dates .miles-dests__grid { border-bottom: 1px solid rgba(220, 231, 223, 0.22); }
.miles-flu-dates__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.miles-flu-dates .miles-dests__item { display: grid; }
.miles-flu-dates__tile { aspect-ratio: auto; align-content: start; cursor: default; }
.miles-flu-dates .miles-dests__name { margin-bottom: 22px; font-size: 30px; }

.miles-flu-dates__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(220, 231, 223, 0.22);
  padding-top: 18px;
}
.miles-flu-dates__who {
  display: block;
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  text-wrap: pretty;
}
.miles-flu-dates__note {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.miles-flu-dates .miles-dests__tile--spare { grid-template-rows: auto; align-content: end; }

@media (max-width: 1199px) {
  .miles-flu-dates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miles-flu-dates .miles-dests__item--spare { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .miles-flu-dates__grid { grid-template-columns: minmax(0, 1fr); }
  .miles-flu-dates .miles-dests__name { font-size: 25px; }
  .miles-flu-dates__who { font-size: 18px; }
}

/* The appointment as a short sequence, the way Pharmacy First draws one:
   a numeral in the display cut, then the words. */
.miles-flu-steps__list {
  display: grid;
  gap: 34px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.miles-flu-steps__step { min-width: 0; padding-top: 18px; border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); }
.miles-flu-steps__n {
  margin: 0 0 10px;
  color: var(--color-brand, #2c5f5a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.miles-flu-steps__label {
  margin: 0 0 8px;
  color: var(--color-text);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
}
.miles-flu-steps__copy {
  margin: 0;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
@media (min-width: 900px) { .miles-flu-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .miles-flu-steps__n { font-size: 36px; } }

/* The hub, contained and at the page's size rather than the home page's.
   Its footnote lines up with the cards instead of stranding itself against
   the window, and it is set at the weight of the rest of the small print. */
.miles-flu-hub .miles-hub--compact { padding-block: 0 !important; }
.miles-flu-hub .miles-hub--compact .miles-hub__grid { gap: 20px; }
.miles-flu-hub .miles-hub--compact .miles-hub__card img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }

/* A guide card whose photograph has not been supplied: the card's own
   evergreen with a soft light in the corner, the way the hero is lit, so it
   reads as a designed card beside the photographed ones rather than a hole. */
.miles-hub__card--plain {
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(160deg, var(--color-brand, #2c5f5a) 0%, var(--color-brand-dark, #204944) 70%);
}
.miles-hub__card--plain::after { background: none; }

/* The checker's fallback: the line, then the phone, never an empty panel. */
.miles-vaccine-tool__pending-call { margin-top: 16px; }
.miles-flu-hub .miles-hub--compact .miles-hub__note {
  max-width: 62ch;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* The season rail carries the section's heading, so its own bottom margin
   would double the gap before the band that follows. */
.miles-flu-season .miles-vaccine-timeline { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
 * Home hero: the season's button.
 *
 * In flu season the hero's second button is the flu page's own call to
 * action (miles_flu_hero_button). Same outline button as "Explore services",
 * with the syringe the announcement bar's line and the flu page's banner
 * carry, so the three read as one signal. The icon is a stroke in
 * currentColor, so it turns dark with the text when the button fills white
 * on hover, and needs nothing for forced colours.
 * ------------------------------------------------------------------------ */

.home-hero__secondary--season { gap: 10px; }

.home-hero__season-icon {
  flex: none;
  display: block;
}

/* ---------------------------------------------------------------------------
 * Vaccine cross-links: the tier, where a guide declares one.
 *
 * On a plain vaccine page each country carries the guide's own word for how
 * strongly it recommends the vaccine. It sits under the country's name as a
 * quiet label rather than beside it as a badge: the name is the link and the
 * tier qualifies it, so it must not compete for the click.
 * ------------------------------------------------------------------------ */

.miles-vaccine-related__tier {
  display: block;
  margin-top: 4px;
  color: var(--color-text-soft, #536762);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Vaccine pages: the world map.
 *
 * Drawn by content-system/worldmap.py and printed as two paths in one frame.
 * The instrument measure, because it is the one object on the page wider than
 * the column it sits in; the map takes the width it needs and the key sits
 * beside it, dropping under it once the two together stop fitting.
 *
 * One fill for the shaded regions. The key names them, so nothing here asks
 * anybody to tell two greens apart.
 * ------------------------------------------------------------------------ */

.miles-vaccine-riskmap { padding-block: 92px; background: var(--color-sage-soft, #edf2ed); }

.miles-vaccine-riskmap__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 40px;
  align-items: start;
  margin-top: 44px;
}

/* The instrument measure, the same way the checker takes it: the body reaches
   64px past the standard measure on each side, clamped so it never comes
   within 24px of the window and collapses to the column where there is no
   room. The heading stays in the column, so the map is the one thing on the
   page wider than the words. */
@media (min-width: 1000px) {
  .miles-vaccine-riskmap__body {
    margin-inline: calc(-1 * max(0px, min(64px, var(--miles-gutter, 24px) - 24px)));
  }
}

.miles-vaccine-riskmap__figure { margin: 0; min-width: 0; }

.miles-vaccine-riskmap__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.miles-vaccine-riskmap__land { fill: #cfded4; }
.miles-vaccine-riskmap__risk { fill: var(--color-brand, #2c5f5a); }

.miles-vaccine-riskmap__key { min-width: 0; }

.miles-vaccine-riskmap__key-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-vaccine-riskmap__swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--color-brand, #2c5f5a);
}

.miles-vaccine-riskmap__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(26, 46, 42, 0.14);
}

.miles-vaccine-riskmap__list li {
  padding: 11px 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: pretty;
  border-bottom: 1px solid rgba(26, 46, 42, 0.14);
}

.miles-vaccine-riskmap__source {
  margin: 18px 0 0;
  max-width: 46ch;
  color: var(--color-text-soft, #536762);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 899px) {
  .miles-vaccine-riskmap { padding-block: 64px; }
  .miles-vaccine-riskmap__body { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; }
  .miles-vaccine-riskmap__list li { padding: 10px 0; font-size: 18px; }
}

@media (forced-colors: active) {
  .miles-vaccine-riskmap__land { fill: Canvas; stroke: CanvasText; stroke-width: 1; }
  .miles-vaccine-riskmap__risk { fill: Highlight; }
  .miles-vaccine-riskmap__swatch { background: Highlight; border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
 * Vaccine tools: the hepatitis A checker and planner.
 *
 * Two shapes the yellow fever tools did not need. Tick lists, because this
 * checker asks "which of these are you" rather than "where are you going";
 * and a stack of answers, because one person can be several true things at
 * once and the order they are told in is the point.
 * ------------------------------------------------------------------------ */

.miles-tool-checks { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

/* A list of nine runs to 700px in one column, which is most of why the
   readout beside it sat on a column of nothing. Five or more tick into two
   columns on a desktop, filling the room the form was leaving to its right;
   `columns` keeps the reading and tab order running down one column and then
   the next, which a two-column grid would not. */
/* Eight questions stacked one under another make a column twice the height
   of the answer beside them, which is the whole of why that answer sat on a
   field of nothing. The short ones pair up; a tick list, which is already two
   columns of its own, spans both and keeps its reading order. */
@media (min-width: 1000px) {
  .miles-vaccine-tool__frame .miles-tool-form {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }
  .miles-vaccine-tool__frame .miles-tool-form > .miles-tool-field:has(.miles-tool-checks),
  .miles-vaccine-tool__frame .miles-tool-form > .miles-tool-field:has(datalist),
  .miles-vaccine-tool__frame .miles-tool-form > .miles-tool-form__go {
    grid-column: 1 / -1;
  }
  .miles-vaccine-tool__frame .miles-tool-form__go { justify-self: start; }
}

@media (min-width: 1000px) {
  .miles-vaccine-tool__frame .miles-tool-checks:has(li:nth-child(5)) {
    display: block;
    columns: 2;
    column-gap: 30px;
  }
  .miles-vaccine-tool__frame .miles-tool-checks:has(li:nth-child(5)) li {
    break-inside: avoid;
    margin-bottom: 2px;
  }
  .miles-vaccine-tool__frame .miles-tool-form { max-width: 620px; }

  /* The stacked frame, after the two-column one so it wins where they
     disagree. A form with the whole width to itself keeps its questions at a
     readable measure and gives the long tick lists three columns rather than
     two and a margin of nothing. */
  .miles-vaccine-tool--stacked .miles-vaccine-tool__frame .miles-tool-form {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
  .miles-vaccine-tool--stacked .miles-vaccine-tool__frame .miles-tool-form > .miles-tool-field { max-width: 640px; }
  .miles-vaccine-tool--stacked .miles-vaccine-tool__frame .miles-tool-form > .miles-tool-field:has(.miles-tool-checks) { max-width: none; }
  .miles-vaccine-tool--stacked .miles-vaccine-tool__frame .miles-tool-checks:has(li:nth-child(5)) {
    columns: 3;
    column-gap: 34px;
  }
  .miles-vaccine-tool--stacked .miles-vaccine-tool__frame .miles-tool-field__control { max-width: 460px; }
  .miles-vaccine-tool--stacked .miles-tool-idle__facts,
  .miles-vaccine-tool--stacked .miles-tool-outs { max-width: none; }
}

.miles-tool-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 12px;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.miles-tool-check:hover { background: rgba(44, 95, 90, 0.07); }
.miles-tool-check:focus-within { background: rgba(44, 95, 90, 0.07); }

.miles-tool-check input {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  accent-color: var(--color-brand, #2c5f5a);
}

/* The modes on the planner: three radios that read as a choice, not a form. */
.miles-tool-modes { margin: 0 0 20px; padding: 0; border: 0; }
.miles-tool-modes__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.miles-tool-mode {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 10px 15px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  background: #fff;
  border: 1px solid rgba(26, 46, 42, 0.18);
  border-radius: 999px;
  cursor: pointer;
}

.miles-tool-mode:has(input:checked) {
  color: #fff;
  background: var(--color-brand, #2c5f5a);
  border-color: var(--color-brand, #2c5f5a);
}
.miles-tool-mode input { accent-color: #fff; }

/* A stack of answers. The gap is what separates one verdict from the next;
   without it two panels read as one long answer. */
.miles-tool-outs { display: grid; gap: 18px; }

/* Where to get it free: a note under the answers, never one of them. A
   sale is not a reason to leave this out, which is the whole argument of
   the section of the page this checker sits beside. */
.miles-tool-free {
  padding: 18px 20px;
  background: var(--color-sage-soft, #edf2ed);
  border-left: 3px solid var(--color-brand, #2c5f5a);
  border-radius: 4px 12px 12px 4px;
}

.miles-tool-free__lead {
  margin: 0 0 12px;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.085em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-tool-free__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.miles-tool-free__who {
  display: block;
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.miles-tool-free__copy {
  display: block;
  margin-top: 3px;
  color: var(--color-text-soft, #536762);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 599px) {
  .miles-tool-check { font-size: 15px; padding: 10px; }
  .miles-tool-modes__row { gap: 6px; }
  .miles-tool-mode { font-size: 13px; padding: 9px 13px; }
}

/* ==========================================================================
   The vaccine checkers: one form, one kind of control
   ==========================================================================

   The route checker asked three questions with two different kinds of
   control. Destination and longest stop were native selects; the transit
   question was a bespoke combobox with chips. They sat one above the other,
   different heights, different focus rings, one with a browser's arrow and
   one without - three questions that looked like they came from three forms.

   Both country questions are the same picker now, so what is left to align
   is the row they sit on and the button under them.
   ========================================================================== */

/*
 * The form is already two columns from 1000px, for the eight-question
 * eligibility checker. The route checker only needed its tall field to say
 * so: the transit question carries chips and a help line, so it spans rather
 * than dragging the height of whatever sits beside it.
 *
 * On the multi picker, not on "has chips". Both pickers own a chips element -
 * hidden until there is something in it - so :has(.miles-tool-pick__chips)
 * matched the destination field too and spanned both, which put the form back
 * into one column while its computed grid-template-columns still read
 * "1fr 1fr". Measured, not read: the columns were there, the fields were not
 * in them.
 */
@media (min-width: 1000px) {
  /*
   * A form with a multi picker in it is the route checker, and it reads down
   * one column.
   *
   * Two columns are right for the eligibility checker, which asks eight short
   * questions that pair up. The route checker asks three, one of them tall
   * enough to span - which left a half-width field with an empty cell beside
   * it, then a full-width one, then another half with another hole. Three
   * questions that have to be answered in order do not want to be read in a
   * zigzag past two gaps.
   */
  .miles-vaccine-tool__frame .miles-tool-form:has(.miles-tool-pick--multi),
  .miles-vaccine-tool__frame .miles-tool-form:has(.miles-tool-modes) {
    grid-template-columns: minmax(0, 1fr);
  }
  .miles-vaccine-tool__frame .miles-tool-form { align-items: start; }
}

/*
 * Every control the same height, whatever it is made of. A native select and
 * a text input do not agree on this by default, and a 46px box beside a 43px
 * one is the kind of thing that reads as "unfinished" without being nameable.
 */
.miles-vaccine-tool__frame .miles-tool-field__control,
.miles-vaccine-tool__frame .miles-tool-pick__input {
  min-height: 48px;
  box-sizing: border-box;
}

/* A question's label and its control line up across the row, so two fields
   side by side start at the same height even when one label wraps. */
.miles-vaccine-tool__frame .miles-tool-field {
  align-content: start;
  min-width: 0;
}

/* ---- flags ----
   Drawn from the country's ISO code in the browser, so nothing is
   downloaded. Decorative and aria-hidden: the name is right beside it. */

.miles-tool-pick__flag {
  flex: 0 0 auto;
  font-size: 1.05em;
  /* The emoji faces have their own idea of line height; this keeps a flag
     from pushing its row taller than the rows without one. */
  line-height: 1;
}

.miles-tool-pick__option {
  display: flex;
  gap: 10px;
  align-items: center;
}

.miles-tool-pick__name { min-width: 0; }

/* The tick that marks a chosen option sat after the name; with a flag in
   front the row is a line of three things, so it goes to the end. */
.miles-tool-pick__option[aria-selected="true"] { justify-content: flex-start; }
.miles-tool-pick__option[aria-selected="true"]::after { margin-left: auto; }

@media (forced-colors: active) {
  .miles-tool-pick__flag { forced-color-adjust: none; }
}

/* ==========================================================================
   The date question: the site's calendar, not the machine's
   ==========================================================================

   <input type="date"> is a different control in every browser - three spin
   fields on a Mac, a box with an icon on Windows - and the calendar it opens
   belongs to the operating system. On a form whose other two questions are
   the site's own pickers it was the one control that did not look like the
   site.

   The trigger is styled as the picker inputs are, so the three questions read
   as one form. The month grid behind it is the booking engine's, reused
   whole: same classes, same file, so the two calendars on this site cannot
   drift apart.
   ========================================================================== */

.miles-tool-date { display: grid; }

.miles-tool-date__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 11px 13px;
  color: var(--color-text-soft);
  font-family: "Inter", sans-serif;
  font-size: 16px;                     /* 16px or iOS zooms the page on focus */
  text-align: left;
  background: #fff;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 8px;
  cursor: pointer;
}

/* Once answered it is the answer, so it is set like one rather than like a
   placeholder still waiting. */
.miles-tool-date__trigger.is-chosen { color: var(--color-text); font-weight: 600; }

.miles-tool-date__trigger:hover { border-color: var(--color-brand); }

.miles-tool-date__trigger:focus-visible {
  outline: 3px solid rgba(232, 115, 74, 0.5);
  outline-offset: 2px;
  border-color: var(--color-brand);
}

/* A calendar icon, drawn rather than fetched, so the control says what it
   opens without a word of label doing it. */
.miles-tool-date__trigger::after {
  content: "";
  width: 18px;
  height: 18px;
  margin-left: auto;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: var(--miles-cal-icon) center / contain no-repeat;
  mask: var(--miles-cal-icon) center / contain no-repeat;
}

:root {
  --miles-cal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

@media (forced-colors: active) {
  .miles-tool-date__trigger { border: 1px solid buttontext; }
  .miles-tool-date__trigger::after { background: buttontext; }
}

/*
 * The mode chips are a choice, not a field, but they sit in the same column
 * as the fields and should agree with them about height. At 39px beside a
 * 48px date control they read as two different form kits.
 *
 * Given the row to themselves they also stop wrapping: in a half-width column
 * "I've already been vaccinated" took a line of its own under the other,
 * which made the first choice look like the only one.
 */
.miles-vaccine-tool__frame .miles-tool-modes__row .miles-ledger__chip {
  min-height: 48px;
  align-items: center;
}

/* The bite first-aid card. Read on a phone, abroad, in the worst hour of a
   trip, so the steps are the largest thing in it and the record lines are
   ruled like a form somebody will actually write on. */
.miles-tool-card { display: grid; gap: 1.25rem; }
.miles-tool-card__lead {
	margin: 0; font-family: var(--font-display, "Newsreader", Georgia, serif);
	font-size: clamp(1.125rem, 2.2vw, 1.375rem); color: var(--color-text, #1a2e2a);
}
.miles-tool-card__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.875rem; counter-reset: bitestep; }
.miles-tool-card__step {
	counter-increment: bitestep; position: relative; padding-left: 2.5rem;
}
.miles-tool-card__step::before {
	content: counter(bitestep); position: absolute; left: 0; top: 0.05em;
	width: 1.75rem; height: 1.75rem; border-radius: 50%;
	display: grid; place-items: center; font-size: 0.8125rem; font-weight: 600;
	background: var(--color-cta, #e8734a); color: #fff;
}
.miles-tool-card__stepLabel { display: block; color: var(--color-text, #1a2e2a); }
.miles-tool-card__stepCopy { margin: 0.25rem 0 0; color: var(--color-text-soft, #536762); }
.miles-tool-card__record {
	border-top: 1px solid var(--color-sage, #dce7df); padding-top: 1rem;
}
.miles-tool-card__recordLead {
	margin: 0 0 0.625rem; font-size: 0.75rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--color-text-soft, #536762);
}
.miles-tool-card__lines { margin: 0; display: grid; gap: 0.625rem; }
.miles-tool-card__lineLabel {
	font-size: 0.8125rem; color: var(--color-text-soft, #536762); margin: 0;
}
.miles-tool-card__line {
	margin: 0 0 0.25rem; min-height: 1.5rem;
	border-bottom: 1px dashed var(--color-sage, #dce7df);
}
@media (min-width: 700px) {
	.miles-tool-card__lines { grid-template-columns: max-content 1fr; align-items: baseline; column-gap: 1rem; }
	.miles-tool-card__line { margin-bottom: 0; }
}

/* A band with more notes than a column can carry runs full width: the
   statement across the top, the notes in columns beneath, each note whole.
   Grid rather than CSS columns, so a note is never split down the middle. */
@media (min-width: 900px) {
	.miles-dest-band--wide .miles-dest-band__inner { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.miles-dest-band--wide .miles-dest-band__copy { max-width: 60ch; }
	/* Two columns, filled down then across, which is the order a newspaper
	   uses and the order these notes are read in. A grid fills across
	   instead, so its left column would read first, third, fifth, and a
	   reader following it down would skip every other step: fine for a set
	   of parallel facts, not for first aid. Each note is kept whole at the
	   column break. */
	/* display:block matters: the base rule makes this a grid, and multi-column
	   layout is ignored on a grid container, so columns compute and do
	   nothing. */
	.miles-dest-band--wide .miles-dest-band__figure--certs {
		display: block; columns: 2; column-gap: 80px;
	}
	.miles-dest-band--wide .miles-dest-band__note { break-inside: avoid; }
	.miles-dest-band--wide .miles-dest-band__note:first-child { margin-top: 0; }
}

/* A card says nothing back, so it has no answer panel and takes the whole
   instrument. */
.miles-vaccine-tool--card .miles-vaccine-tool__frame {
	grid-template-columns: minmax(0, 1fr);
	/* A card is a card: sized to itself and centred, rather than a narrow
	   column of steps stranded in a 1190px box, which is the empty panel
	   again by another name. */
	max-width: 720px; margin-inline: auto;
}

/* ------------------------------------------------------------ the type floor
 *
 * Drew, looking at a page of his own: "the font typography weight is very
 * small... for accessibility purposes we need it big enough for people to
 * read." Measured across eight pages at three widths, 880 of 1,960 text
 * blocks sat under 16px and the smallest was 12px. Contrast was never the
 * problem: soft text on cream is 5.64:1 and body text 13.39:1, both clear of
 * AA. It was size alone.
 *
 * Floor: 16px for anything read as language, 13px for a genuine label. Set
 * here, at the end, rather than edited into sixteen thousand lines of
 * existing rules: the sizes below are exactly the ones checks/type-scale.js
 * names, so the two can be read against each other, and the block can be
 * lifted out in one piece if a size turns out wrong.
 *
 * What is on this list is not small print. It is the buttons people press,
 * the options they pick in a checker, the dates on the sources, and the
 * disclaimers that carry the safety message.
 */
.miles-vaccine-tool__disclaimer,
.miles-tool-field__label,
.miles-tool-field__help,
.miles-tool-check span,
.miles-tool-mode span,
.miles-ledger__chip span,
.miles-vaccine-answer__detail,
.miles-vaccine-hero__tool-copy,
.miles-vaccine-hero__tool-go,
.miles-vaccine-timeline__copy,
.miles-vaccine-sources__list a,
.miles-vaccine-sources__list time,
.miles-dest-risks__summary,
.miles-dest-risks__date,
.miles-dest-risks__caption span,
.miles-dest-risks__checked time,
.miles-dests__rule,
.miles-dests__cta,
.miles-dests__source a,
.miles-props__label,
.miles-props__figure,
.miles-props__source,
.miles-yfvc__blurb,
.service-location-member-note,
.service-location-breadcrumb li,
.service-location-breadcrumb a,
.service-location-trust li,
.health-hub-button { font-size: 16px; }

/* A label may sit at 13px. These two were under even that. */
.miles-tool-card__recordLead,
.miles-dests__region { font-size: 13px; }

/* ==========================================================================
   The Health Hub's posts and topics (inc/health-hub.php)
   ==========================================================================
   A post wears the service pages' hero, so it reads as part of the same
   site, then narrows to a reading measure for its own words. Everything
   below the words -- the next in the series, the "Your next step" card, the
   row of other posts -- is drawn from the post's fields, never written into
   the post.
   ------------------------------------------------------------------------ */

.health-hub-container.miles-hub-post__measure { width: min(100% - 48px, 760px); }
.health-hub-container.miles-hub-post__wide { width: min(100% - 48px, 1000px); }
@media (max-width: 767px) {
  .health-hub-container.miles-hub-post__measure,
  .health-hub-container.miles-hub-post__wide { width: min(100% - 36px, 760px); }
}

/* Who checked it, and when, under the title: two lines. */
.miles-hub-byline {
  display: grid;
  gap: 4px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.miles-hub-byline__when { color: rgba(255, 255, 255, 0.7); }
.miles-hub-post .miles-hub-byline a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; }
.miles-hub-post .miles-hub-byline a:hover { text-decoration-color: #fff; }

/* The series, in the hero's right column. */
.miles-hub-series__list { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: hub-series; }
.miles-hub-series__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  counter-increment: hub-series;
}
.miles-hub-series__item:first-child { border-top: 0; }
.miles-hub-series__item::before {
  content: counter(hub-series);
  grid-row: span 2;
  padding-top: 3px;
  color: #cddfd2;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.miles-hub-series__title {
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 20px;
  line-height: 1.3;
}
.miles-hub-post a.miles-hub-series__title { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 4px; }
.miles-hub-post a.miles-hub-series__title:hover { text-decoration-color: #fff; }
.miles-hub-series__here,
.miles-hub-series__kind {
  grid-column: 2;
  justify-self: start;
  color: #ffe3d8;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.miles-hub-series__kind { color: #cddfd2; }
.miles-hub-post a.miles-hub-series__all {
  display: inline-flex;
  gap: 8px;
  margin: 6px 0 22px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 4px;
}

/* A video post: the player, full measure, straight under the hero. */
.miles-hub-post__video { padding: 48px 0 0; }

/* The post's own words. */
.miles-hub-post__article { padding: 56px 0 56px; }
.miles-hub-post__figure { margin: 0 0 40px; }
.miles-hub-post__figure img { display: block; width: 100%; height: auto; border-radius: 18px; }

.miles-hub-prose {
  color: var(--color-text, #1a2e2a);
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 1.75;
}
/* The post's own paragraphs and lists, and nothing a component inside the
   post draws: the season rail is an ordered list, and a list's gaps and
   indent pushed three of its four stops 8px down, out of one row. */
.miles-hub-prose :is(p, ul, ol):not(.miles-hub-season *) { margin: 0 0 1.15em; }
.miles-hub-prose > p:first-child { font-size: 20px; line-height: 1.65; }
.miles-hub-post .miles-hub-prose h2 {
  margin: 1.9em 0 0.55em;
  color: var(--color-text, #1a2e2a);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15;
}
.miles-hub-post .miles-hub-prose h3 {
  margin: 1.5em 0 0.35em;
  color: var(--color-text, #1a2e2a);
  font-size: 23px;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25;
}
.miles-hub-post .miles-hub-prose h2 + h3 { margin-top: 0.6em; }
.miles-hub-prose > :first-child { margin-top: 0; }
.miles-hub-post .miles-hub-prose a {
  color: var(--color-brand, #2c5f5a);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.miles-hub-post .miles-hub-prose a:hover { text-decoration-thickness: 2px; }
.miles-hub-prose :is(ul, ol):not(.miles-hub-season *) { padding-left: 1.3em; }
.miles-hub-prose li:not(.miles-hub-season *) + li { margin-top: 0.45em; }
.miles-hub-prose li:not(.miles-hub-season *)::marker { color: var(--color-brand, #2c5f5a); }
.miles-hub-prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--color-cta, #e8734a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 22px;
  line-height: 1.5;
}
.miles-hub-prose img { max-width: 100%; height: auto; border-radius: 14px; }
.miles-hub-prose figure { margin: 1.8em 0; }
.miles-hub-prose figcaption { margin-top: 10px; color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.6; }
.miles-hub-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; }
.miles-hub-prose th,
.miles-hub-prose td { padding: 10px 12px; border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); text-align: left; vertical-align: top; }
.miles-hub-prose iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }
.miles-hub-prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); }

/* The flu season's rail inside a post, from [miles_flu_season]. */
.miles-hub-season {
  margin: 1.2em 0 1.8em;
  padding: 22px 24px 18px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 18px;
}
.miles-hub-prose .miles-hub-season__caption { margin: 0 0 6px; font-size: 16px; line-height: 1.6; }
.miles-hub-season .miles-vaccine-timeline { margin: 0; }

/* The next post in the series. */
.miles-hub-next { padding: 0 0 56px; }
.miles-hub-post .miles-hub-next__link {
  display: grid;
  gap: 8px;
  padding: 26px 30px;
  color: var(--color-text, #1a2e2a);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 18px;
  box-shadow: var(--shadow-card, 0 16px 44px rgba(26, 46, 42, 0.08));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.miles-hub-post .miles-hub-next__link:hover { border-color: rgba(44, 95, 90, 0.3); box-shadow: var(--shadow-card-hover, 0 24px 58px rgba(26, 46, 42, 0.12)); }
.miles-hub-next__kicker { color: var(--color-brand, #2c5f5a); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.miles-hub-next__title { font-family: "Newsreader", "Source Serif 4", Georgia, serif; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; text-wrap: balance; }
.miles-hub-next__excerpt { color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.6; }
.miles-hub-next__go { color: var(--color-brand, #2c5f5a); font-size: 16px; font-weight: 600; }

/* "Your next step": who checked it, and the way to book. */
.miles-next-step { padding: 8px 0 72px; }
.miles-next-step__card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(26, 46, 42, 0.1);
}
.miles-next-step__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 15px 28px;
  color: #fff;
  background: linear-gradient(90deg, #1b3d39, #24524c);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.miles-next-step__body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 32px 48px;
  padding: 36px 40px;
}
.miles-next-step__body--solo { grid-template-columns: minmax(0, 1fr); }
.miles-next-step__who { display: flex; align-items: flex-start; gap: 18px; }
.miles-next-step__who p { margin: 0; }
.miles-next-step__photo,
.miles-next-step__initials { flex: none; width: 84px; height: 84px; border-radius: 18px; object-fit: cover; }
.miles-next-step__initials {
  display: grid;
  place-items: center;
  color: var(--color-brand-dark, #204944);
  background: var(--color-sage, #dce7df);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 30px;
}
.miles-next-step__kicker { margin-bottom: 6px !important; color: #a4461f; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.miles-next-step__name { color: var(--color-text, #1a2e2a); font-family: "Newsreader", "Source Serif 4", Georgia, serif; font-size: 26px; line-height: 1.2; }
.miles-next-step__role { margin-top: 4px !important; color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.5; }
.miles-next-step__reg { display: flex; align-items: center; gap: 6px; margin-top: 8px !important; color: var(--color-brand, #2c5f5a); font-size: 16px; font-weight: 600; }
.miles-next-step .miles-next-step__name a,
.miles-next-step .miles-next-step__reg a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.miles-next-step .miles-next-step__go h2 { margin: 0 0 10px; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; }
.miles-next-step__go p { margin: 0 0 20px; color: var(--color-text-soft, #536762); font-size: 17px; line-height: 1.6; }
.miles-next-step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.miles-next-step .miles-next-step__call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  color: var(--color-brand-dark, #204944);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(232, 115, 74, 0.4);
  border-radius: 999px;
}
.miles-next-step .miles-next-step__call:hover { border-color: var(--color-cta, #e8734a); }
.miles-next-step__call svg { color: var(--color-cta, #e8734a); }
.miles-next-step__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0;
  padding: 16px 28px;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.4;
  list-style: none;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}
.miles-next-step__facts li { display: inline-flex; align-items: center; gap: 8px; }
.miles-next-step__facts li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--color-brand, #2c5f5a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.4 2.4L12 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-radius: 50%;
}
@media (max-width: 760px) {
  .miles-next-step__body { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 22px; }
  .miles-next-step__facts { justify-content: flex-start; padding: 16px 22px; }
  .miles-next-step__bar { padding: 14px 22px; }
}

/* A topic: its series, in order. */
.miles-hub-topic__series { padding: 64px 0 48px; }
.miles-hub-topic__list { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.miles-hub-topic .miles-hub-topic__link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 24px;
  color: var(--color-text, #1a2e2a);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: 18px;
  box-shadow: var(--shadow-card, 0 16px 44px rgba(26, 46, 42, 0.08));
}
.miles-hub-topic .miles-hub-topic__link:hover { border-color: rgba(44, 95, 90, 0.3); }
.miles-hub-topic__n {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-brand-dark, #204944);
  background: var(--color-sage, #dce7df);
  border-radius: 50%;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 22px;
}
.miles-hub-topic__text { display: grid; gap: 6px; }
.miles-hub-topic__title { font-family: "Newsreader", "Source Serif 4", Georgia, serif; font-size: 24px; line-height: 1.25; }
.miles-hub-topic__excerpt { color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.6; }
.miles-hub-topic__meta { color: var(--color-brand, #2c5f5a); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.miles-hub-topic__meta:empty { display: none; }

/* The Health Hub page's live cards: the page's own card design, with a
   whole-card link and text at the site's floor. */
.miles-hub-live .miles-hub-live__card { position: relative; }
.miles-hub-live .miles-hub-live__card:focus-within { outline: 3px solid rgba(232, 115, 74, 0.6); outline-offset: 3px; }
/* The page's "Read article" link style (.health-hub-article-card a) would
   make the title a 14px inline link. */
.miles-hub-live .miles-hub-live__title { display: inline; width: auto; color: inherit; font-size: inherit; font-weight: inherit; text-decoration: none; outline: none; }
.miles-hub-live .miles-hub-live__title::after { content: ""; position: absolute; inset: 0; z-index: 2; }
/* A photograph and the plain block the same height, so titles line up across a row. */
.miles-hub-live__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.miles-hub-live .miles-hub-live__plain { min-height: 0; aspect-ratio: 16 / 10; }
.health-hub-article-grid.miles-hub-live p.miles-hub-live__excerpt,
.health-hub-video-grid.miles-hub-live p.miles-hub-live__excerpt { font-size: 16px; line-height: 1.6; }
.miles-hub-live .health-hub-category { font-size: 13px; }
/* "Reviewed by" at a colour that clears 4.5:1: theme.css sets it at 84% of
   the soft tone, which measured 3.7:1 on the white cards, and 52% white on
   the video cards' evergreen, 4.2:1. Both with !important, hence these. */
.miles-hub-live .health-hub-byline { color: var(--color-text-soft, #536762) !important; font-size: 14px; }
.health-hub-video-grid.miles-hub-live .health-hub-byline { color: rgba(255, 255, 255, 0.82) !important; }
.miles-hub-live .health-hub-duration { font-size: 13px; }
.miles-hub-live .miles-hub-live__poster {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #173a36;
}
.miles-hub-live__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.miles-hub-live__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--color-brand-dark, #204944);
  background: #fff;
  border-radius: 50%;
  translate: -50% -50%;
}
.miles-hub-live__play svg { width: 22px; height: 22px; margin-left: 3px; }
.miles-hub-live__featured-img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
/* A featured guide with no photograph yet is the words alone, not half a card of placeholder. */
.health-hub-featured-article__card.miles-hub-live__featured--plain { grid-template-columns: minmax(0, 1fr); }
.miles-hub-live__featured--plain .health-hub-featured-article__media { display: none; }
.miles-hub-live__featured--plain .health-hub-featured-article__content { max-width: 820px; }
.miles-hub-topic .miles-hub-topic__list { margin-top: 28px; }

/* ==========================================================================
   The Health Hub page: the opening
   ==========================================================================
   The first version drew the flu season as a timeline on a flat green: a
   hairline axis, leaders, ticks, a Now badge, a countdown pill, a Today pill
   and a row of cells under it, every part thin and small. It read as a
   dashboard, and Drew called it cheap. It opens now as the destination grid
   does, on a photograph toned into the evergreen (the pharmacy's own floor),
   with one object on it: the flu page's own photograph, while the season
   has words to say. It was the season as a ring, one turn a year, until
   Drew called it "this weird circle illustration" and asked for lifestyle
   imagery instead. The words sit beside it, and under them the season's own
   sentence, its booking and whether the door is open. */

.health-hub-page main > section.miles-hub-hero { padding-block: 96px 104px !important; }

.miles-hub-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #183a36;
}

/* The photograph, toned: grey, multiplied into the brand green, then a scrim
   that holds the words' side near solid and lets the floor show behind the
   season's photograph. It is ground, so it is hidden from assistive technology. */
.miles-hub-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-brand, #2c5f5a);
}

.miles-hub-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
  filter: grayscale(1) contrast(1.15) brightness(1.05);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

.miles-hub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(24, 58, 54, 0.98) 0%, rgba(24, 58, 54, 0.94) 38%, rgba(24, 58, 54, 0.62) 62%, rgba(24, 58, 54, 0.5) 100%),
    linear-gradient(0deg, rgba(24, 58, 54, 0.7) 0%, rgba(24, 58, 54, 0) 40%);
}

.miles-hub-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.miles-hub-hero:not(.has-photo) .miles-hub-hero__grid > * { max-width: 760px; }

.miles-hub-hero.has-photo .miles-hub-hero__grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  grid-template-areas: "text figure" "live figure";
  column-gap: 56px;
  align-content: center;
}

/* The words and the season's sentence close up in the middle of the
   photograph's height, whatever it adds to the rows. */
.miles-hub-hero.has-photo .miles-hub-hero__text { grid-area: text; align-self: end; }
.miles-hub-hero.has-photo .miles-hub-hero__figure { grid-area: figure; align-self: center; }
.miles-hub-hero.has-photo .miles-hub-hero__live { grid-area: live; align-self: start; }

.miles-hub-hero .miles-hub-hero__eyebrow,
.miles-hub-hero .miles-hub-hero__kicker {
  margin: 0;
  color: #cddfd2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* theme.css sets every heading's face, size and colour, so the band restates them. */
.miles-hub-hero .miles-hub-hero__title {
  max-width: 17ch;
  margin: 18px 0 0;
  color: #fff !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-size: clamp(42px, 4.9vw, 66px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
  line-height: 1.03 !important;
  text-wrap: balance;
}

.miles-hub-hero .miles-hub-hero__lead {
  max-width: 52ch;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1.6;
}

.miles-hub-hero .miles-hub-hero__live {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(220, 231, 223, 0.22);
}

.miles-hub-hero .miles-hub-hero__line {
  max-width: 46ch;
  margin: 10px 0 0;
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 23px;
  line-height: 1.35;
  text-wrap: pretty;
}

.miles-hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 26px;
}

.miles-hub-hero__kicker + .miles-hub-hero__actions,
.miles-hub-hero__live > .miles-hub-hero__actions:first-child { margin-top: 0; }
.miles-hub-hero__line + .miles-hub-hero__actions { margin-top: 26px; }

.miles-hub-hero .miles-hub-hero__book {
  min-height: 52px;
  padding: 0 28px;
  font-size: 16px;
  box-shadow: 0 10px 28px rgba(232, 115, 74, 0.28);
}

.miles-hub-hero .miles-hub-hero__call {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.miles-hub-hero .miles-hub-hero__call:hover { text-decoration-color: #fff; }
.miles-hub-hero .miles-hub-hero__call:focus-visible { outline: 3px solid var(--color-cta, #e8734a); outline-offset: 4px; border-radius: 2px; }

.miles-hub-hero .miles-hub-hero__open {
  margin: 18px 0 0;
  color: #cddfd2;
  font-size: 16px;
  line-height: 1.5;
}

.miles-hub-hero__status .miles-clock { margin-right: 10px; }

/* ---- the season's photograph ------------------------------------------------
   The flu page's own (miles_hub_season_photo()): one bold object on the
   toned floor, as the destination grid sets its pictures. */

.miles-hub-hero__figure { margin: 0; }

.miles-hub-hero__figure-photo {
  display: block;
  width: min(100%, 540px);
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 24px;
  box-shadow: 0 28px 64px rgba(8, 26, 24, 0.42);
}

/* One column: the words, the photograph, then the season's sentence and
   the button it leads to. */
@media (max-width: 899px) {
  .health-hub-page main > section.miles-hub-hero { padding-block: 56px 64px !important; }
  .miles-hub-hero.has-photo .miles-hub-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "figure" "live"; }
  .miles-hub-hero.has-photo .miles-hub-hero__text,
  .miles-hub-hero.has-photo .miles-hub-hero__live { align-self: auto; }
  .miles-hub-hero__figure { margin-top: 36px; }
  .miles-hub-hero::before {
    background: linear-gradient(180deg, rgba(24, 58, 54, 0.97) 0%, rgba(24, 58, 54, 0.9) 45%, rgba(24, 58, 54, 0.86) 100%);
  }
  .miles-hub-hero__photo { object-position: 50% 50%; }
}

@media (max-width: 599px) {
  .miles-hub-hero .miles-hub-hero__lead { font-size: 17px; }
  .miles-hub-hero .miles-hub-hero__line { font-size: 21px; }
  .miles-hub-hero .miles-hub-hero__live { margin-top: 36px; padding-top: 24px; }
  .miles-hub-hero__figure-photo { border-radius: 18px; }
  /* The street on a line of its own, in line with the words past the clock,
     as the help tile has it; run on, it broke between "94" and its road. */
  .miles-hub-hero .miles-hub-hero__where { display: block; margin-left: calc(1.125em + 10px); }
  .miles-hub-hero__sep { display: none; }
}

/* ==========================================================================
   The Health Hub page: four ways in
   ==========================================================================
   Four white cards with a faint number each, next to the hero, looked like a
   template. Each way in is now a tile drawn from what the site holds about
   it: the countries the pharmacy writes guides for on a map of the world,
   with the pharmacy on it; the NHS Pharmacy First conditions and who each is
   for, to one scale of age; the services for looking after yourself, as an
   index; and the pharmacy itself, open or closed, on its own shopfront. The
   grid is a bento: the map runs wide, as a map of the world wants to, the
   Pharmacy First list runs tall, and the two smaller tiles share a row. */

.miles-ways { background: var(--color-background, #faf7f2); }

.miles-ways__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 16px 64px;
  align-items: end;
  margin-bottom: 48px;
}

.miles-ways .miles-ways__head h2 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 58px);
  letter-spacing: -0.04em !important;
}

.miles-ways .miles-ways__lead {
  max-width: 42ch;
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.6;
}

.miles-ways__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "trip trip unwell" "well care unwell";
  gap: 20px;
}

.miles-ways__way {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 36px 36px 32px;
  border-radius: 24px;
}

.miles-ways__way--trip { grid-area: trip; }
.miles-ways__way--unwell { grid-area: unwell; }
.miles-ways__way--well { grid-area: well; }
.miles-ways__way--care { grid-area: care; }

/* The dark tiles: the hero's evergreen, lit from one corner like the covers. */
.miles-ways__way--trip,
.miles-ways__way--care {
  color: #fff;
  background:
    radial-gradient(120% 80% at 90% 0%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 60%),
    var(--color-brand-dark, #204944);
}

.miles-ways__way--unwell {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-ways__way--well { background: var(--color-sage, #dce7df); }

.miles-ways .miles-ways__kicker {
  margin: 0;
  color: var(--color-brand, #2c5f5a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-ways__way--trip .miles-ways__kicker,
.miles-ways__way--care .miles-ways__kicker { color: #cddfd2; }

/* theme.css sets every heading's face, weight and spacing with !important. */
.miles-ways .miles-ways__title {
  margin: 12px 0 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}

.miles-ways__way--trip .miles-ways__title,
.miles-ways__way--care .miles-ways__title { color: #fff; }

.miles-ways .miles-ways__line {
  max-width: 44ch;
  margin: 12px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 17px;
  line-height: 1.55;
}

.miles-ways__way--trip .miles-ways__line,
.miles-ways__way--care .miles-ways__line { color: rgba(255, 255, 255, 0.86); }

.miles-ways .miles-ways__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--color-brand-dark, #204944);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.miles-ways__way--trip .miles-ways__go,
.miles-ways__way--care .miles-ways__go { color: #fff; }
.miles-ways .miles-ways__go:hover { text-decoration: underline; text-underline-offset: 5px; }

.miles-ways a:focus-visible { outline: 3px solid var(--color-cta, #e8734a); outline-offset: 3px; border-radius: 2px; }

.miles-ways__foot { margin-top: auto; padding-top: 24px; }

/* ---- travel: the world, the six, and Ewell ----------------------------- */

.miles-ways__way--trip {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas: "kicker map" "title map" "line map" "places map" "foot map";
  column-gap: 24px;
}

.miles-ways__way--trip > .miles-ways__kicker { grid-area: kicker; }
.miles-ways__way--trip > .miles-ways__title { grid-area: title; }
.miles-ways__way--trip > .miles-ways__line { grid-area: line; }
.miles-ways__way--trip > .miles-ways__places { grid-area: places; align-self: end; }
.miles-ways__way--trip > .miles-ways__foot { grid-area: foot; }

.miles-ways__figure {
  grid-area: map;
  align-self: center;
  margin: 0 -18px 0 0;
}

.miles-ways__map { display: block; width: 100%; height: auto; overflow: visible; }

/* At rest, and for anyone without the script or asking for less motion,
   the whole map: the land faint, each destination a tint with a clean point,
   a fine arc to each from the pharmacy. No white fills, no rings. */
.miles-ways__land { fill: rgba(220, 231, 223, 0.14); }
.miles-ways__country { fill: rgba(255, 255, 255, 0.22); }
.miles-ways__route { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 2.2; stroke-linecap: round; }
.miles-ways__mark { fill: #fff; }
.miles-ways__home { fill: var(--color-cta, #e8734a); stroke: #fff; stroke-width: 3.5; }
.miles-ways__mark,
.miles-ways__home,
.miles-ways__ping,
.miles-ways__home-ping { transform-box: fill-box; transform-origin: center; }

/* What only moves: a light travelling a route, and a point's ping as it
   lands. Nothing to see until the motion below runs them. */
.miles-ways__comet { fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 0.09 1.2; stroke-dashoffset: 0.09; opacity: 0; }
.miles-ways__ping { fill: none; stroke: #fff; stroke-width: 2; opacity: 0; }
.miles-ways__home-ping { fill: none; stroke: var(--color-cta, #e8734a); stroke-width: 2.5; opacity: 0; }

.miles-ways .miles-ways__places {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.miles-ways .miles-ways__places a {
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 19px;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.miles-ways .miles-ways__places a:hover { text-decoration-color: #fff; }

.miles-ways .miles-ways__cred {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  line-height: 1.5;
}

.miles-ways .miles-ways__cred a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.4); }

/* ---- Pharmacy First: who each condition is for, to one scale of age ---- */

.miles-ways__ages { margin: 28px 0 0; }

.miles-ways .miles-ways__ages-cap {
  margin: 0 0 6px;
  color: var(--color-brand, #2c5f5a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-ways .miles-ways__rows { margin: 0; padding: 0; list-style: none; }

.miles-ways .miles-ways__note {
  margin: 0 0 4px;
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  line-height: 1.55;
}

.miles-ways .miles-ways__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.miles-ways .miles-ways__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cond who" "bar bar";
  align-items: baseline;
  gap: 5px 12px;
  padding: 9px 0 10px;
  color: var(--color-text, #1a2e2a);
}

.miles-ways__row + .miles-ways__row { border-top: 1px solid rgba(44, 95, 90, 0.1); }

.miles-ways__cond {
  grid-area: cond;
  min-width: 0;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 18px;
  line-height: 1.25;
}

.miles-ways .miles-ways__cond a { color: var(--color-text, #1a2e2a); text-decoration: underline; text-decoration-color: rgba(44, 95, 90, 0.3); text-underline-offset: 4px; }
.miles-ways .miles-ways__cond a:hover { text-decoration-color: currentColor; }

.miles-ways .miles-ways__who {
  grid-area: who;
  color: var(--color-text-soft, #536762);
  font-size: 14px;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

/* The track is the whole of age, 0 to 90, with faint rules at 18 and 65; the
   fill is who the condition covers. "And over" fades off the end. */
.miles-ways__bar {
  grid-area: bar;
  position: relative;
  height: 6px;
  border-radius: 3px;
  background:
    linear-gradient(rgba(44, 95, 90, 0.22), rgba(44, 95, 90, 0.22)) 20% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(44, 95, 90, 0.22), rgba(44, 95, 90, 0.22)) 72.22% 0 / 1px 100% no-repeat,
    rgba(44, 95, 90, 0.09);
}

.miles-ways__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--from);
  width: calc(var(--to) - var(--from));
  border-radius: 3px;
  background: var(--color-brand, #2c5f5a);
}

.miles-ways__row.is-open .miles-ways__bar span {
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, var(--color-brand, #2c5f5a) 0%, var(--color-brand, #2c5f5a) 78%, rgba(44, 95, 90, 0.15) 100%);
}

.miles-ways .miles-ways__scale {
  position: relative;
  height: 18px;
  margin: 4px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.miles-ways__scale span { position: absolute; top: 0; left: var(--at); transform: translateX(-50%); }
.miles-ways__scale span:first-child { transform: none; }

/* ---- wellbeing: the services, as an index -------------------------------- */

.miles-ways .miles-ways__index {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.miles-ways .miles-ways__index li { border-top: 1px solid rgba(32, 73, 68, 0.16); }

.miles-ways .miles-ways__index a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0 10px;
  color: var(--color-text, #1a2e2a);
  text-decoration: none;
}

.miles-ways__name {
  min-width: 0;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
}

.miles-ways .miles-ways__index a:hover .miles-ways__name { text-decoration: underline; text-underline-offset: 4px; }

.miles-ways .miles-ways__type {
  flex: 0 0 auto;
  color: var(--color-brand, #2c5f5a);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---- not sure: the shop itself, open or closed --------------------------- */

.miles-ways__way--care { justify-content: flex-end; min-height: 420px; }
.miles-ways__way--care .miles-ways__foot { margin-top: 0; padding-top: 20px; }

.miles-ways__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-brand, #2c5f5a);
}

.miles-ways__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 22%;
  filter: saturate(0.7) brightness(0.92);
}

.miles-ways__way--care::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(24, 58, 54, 0.15) 0%, rgba(24, 58, 54, 0.35) 28%, rgba(24, 58, 54, 0.9) 52%, rgba(24, 58, 54, 0.97) 100%),
    rgba(32, 73, 68, 0.25);
}

.miles-ways .miles-ways__open {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}

/* The street lines up with the words, past the clock and its gap. */
.miles-ways .miles-ways__where { display: block; margin: 2px 0 14px calc(1.125em + 9px); color: #cddfd2; }
.miles-ways__status .miles-clock { margin-right: 9px; }

.miles-ways__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
}

.miles-ways .miles-ways__call {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 5px;
}

/* Two columns: travel and Pharmacy First run the width, the two small
   tiles share a row. */
@media (max-width: 1099px) {
  .miles-ways__head { grid-template-columns: minmax(0, 1fr); }
  .miles-ways__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "trip trip" "unwell unwell" "well care"; }
}

/* One column, in reading order: the words, the map, the guides. */
@media (max-width: 767px) {
  .miles-ways__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "trip" "unwell" "well" "care"; gap: 16px; }
  .miles-ways__way { padding: 28px 24px 26px; border-radius: 20px; }
  .miles-ways__way--trip { display: flex; }
  .miles-ways__way--trip > .miles-ways__places { align-self: auto; }
  .miles-ways__figure { margin: 22px -10px 0; }
  /* Tall enough that the shop's sign clears the words beneath it. */
  .miles-ways__way--care { min-height: 470px; }
}

/* ---- the home page's four ways in --------------------------------------
   Directly under the registrations bar, in the home page's own words
   (miles_ways_home_section()). The Health Hub's section spacing comes from
   its page's rule for every section; this one sets its own. */

.miles-ways--home { padding-block: 72px 104px; }

/* On a desktop the travel tile runs to the window's left edge and gives that
   edge to its map, the way a picture takes the bleed on the vaccine pages:
   the map over the gutter and the first column, the words over the second,
   in line with the photograph's words below them. The wellbeing tile has no
   picture, so it keeps the grid. (Drew: boxed and centred, the grid read as
   a template; edge to edge with words alone, too much plain colour on the
   left.) Tablets and phones stack as before; the Health Hub keeps its grid. */
@media (min-width: 1100px) {
  .miles-ways--home {
    --miles-gutter: max(24px, calc((100vw - 1192px) / 2));   /* the container's side margin, as the journey's */
    overflow-x: clip;   /* 100vw counts a desktop scrollbar; clip that share rather than scroll it */
  }
  .miles-ways--home .miles-ways__way--trip {
    display: flex;
    margin-left: calc(-1 * var(--miles-gutter));
    /* Percentages here are of the tile's grid area, the two columns and their
       gap: half of it, the gutter, the gap and the tiles' own inset put the
       words where the photograph's words start. */
    padding-left: calc(50% + var(--miles-gutter) + 46px);
    border-radius: 0 24px 24px 0;
  }
  .miles-ways--home .miles-ways__way--trip > .miles-ways__places { align-self: auto; }
  .miles-ways--home .miles-ways__way--trip > .miles-ways__figure {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* Here they are of the whole tile, gutter included: the gutter and the
       first column, the map's to fill. */
    width: calc(50% + var(--miles-gutter) / 2 - 10px);
    margin: 0;
    padding: 0 4px 0 0;
    display: flex;
    align-items: center;
    align-self: stretch;   /* an absolute box takes align-self too; the tile's whole height */
  }
  /* The map takes the column's width. Where that makes it taller than the
     tile, on a wide screen, the tile trims the Arctic and the far south,
     which carry nothing of the pharmacy's; every route stays whole. */
  .miles-ways--home .miles-ways__way--trip .miles-ways__map { width: 100%; height: auto; flex: none; }
}

/* On a phone the home page carries the short version. The two long lists
   become names that wrap, as the destination guides do, and each
   condition's ages are left to its own page, which sets them out in full.
   The Health Hub keeps the lists and the age chart at every width. */
@media (max-width: 767px) {
  .miles-ways--home { padding-block: 48px 64px; }
  .miles-ways--home .miles-ways__head { margin-bottom: 28px; }
  .miles-ways--home .miles-ways__ages { margin-top: 18px; }
  .miles-ways--home .miles-ways__ages-cap,
  .miles-ways--home .miles-ways__who,
  .miles-ways--home .miles-ways__bar,
  .miles-ways--home .miles-ways__scale,
  .miles-ways--home .miles-ways__type { display: none; }
  .miles-ways--home .miles-ways__rows,
  .miles-ways--home .miles-ways__index { display: flex; flex-wrap: wrap; gap: 10px 18px; }
  .miles-ways--home .miles-ways__row { display: block; padding: 0; }
  .miles-ways--home .miles-ways__row + .miles-ways__row,
  .miles-ways--home .miles-ways__index li { border-top: 0; }
  .miles-ways--home .miles-ways__index a { display: inline; padding: 0; }
  .miles-ways--home .miles-ways__name { text-decoration: underline; text-decoration-color: rgba(32, 73, 68, 0.3); text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .miles-ways--home .miles-ways__way--care { min-height: 420px; }
}

/* A person in the help tile (the home page's "Help tile photograph"): the
   photograph takes the top of the tile in its own colour and fades into the
   evergreen, and the words sit below it, clear of the face. The shopfront
   keeps the toned, full-tile treatment above. */
.miles-ways__way--face .miles-ways__photo { inset: 0 0 auto; height: 60%; }
.miles-ways__way--face .miles-ways__photo img { object-position: 50% 18%; filter: none; }
.miles-ways__way--face::before {
  background: linear-gradient(180deg, rgba(24, 58, 54, 0) 0%, rgba(24, 58, 54, 0) 28%, rgba(24, 58, 54, 0.6) 34%, rgba(24, 58, 54, 0.97) 41%, rgba(24, 58, 54, 1) 47%, rgba(24, 58, 54, 1) 100%);
}
@media (max-width: 767px) {
  .miles-ways .miles-ways__way--face { min-height: 520px; }
}

/* ---- the four ways in, in motion -----------------------------------------
   The site's reveal (miles-reveal.js): the head rises, then the four tiles
   in turn. The map and the age chart carry the bare attribute and have
   entrances of their own. From Ewell the arcs draw out one by one, each
   point arriving as its arc lands; then a light leaves Ewell on each route
   in turn, a second apart, and its point pings as the light lands, while
   the pharmacy's own point pulses. Pharmacy First's bars grow from the
   left, a row at a time. Armed only by the script, and never for anyone
   who has asked for reduced motion: then the map and the bars stand
   complete and still. (Drew: every other section moves; this one loaded
   all at once.) */
@media (prefers-reduced-motion: no-preference) {
  .miles-ways__grid { --reveal-step: 120ms; }

  .miles-ways__figure.is-armed .miles-ways__route { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .miles-ways__figure.is-armed .miles-ways__mark,
  .miles-ways__figure.is-armed .miles-ways__home { opacity: 0; transform: scale(0.2); }

  .miles-ways__figure.is-revealed .miles-ways__home { animation: miles-ways-pop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
  .miles-ways__figure.is-revealed .miles-ways__route { stroke-dasharray: 1; animation: miles-ways-draw 1.1s cubic-bezier(0.45, 0.05, 0.25, 1) calc(0.5s + var(--i, 0) * 0.16s) both; }
  .miles-ways__figure.is-revealed .miles-ways__mark { animation: miles-ways-pop 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) calc(1.45s + var(--i, 0) * 0.16s) both; }
  .miles-ways__figure.is-revealed .miles-ways__comet { opacity: 1; animation: miles-ways-comet 6s linear calc(2.8s + var(--i, 0) * 1s) infinite; }
  .miles-ways__figure.is-revealed .miles-ways__ping { animation: miles-ways-ping 6s ease-out calc(2.8s + var(--i, 0) * 1s) infinite; }
  .miles-ways__figure.is-revealed .miles-ways__home-ping { animation: miles-ways-home 3s ease-out 1.2s infinite; }

  .miles-ways__ages.is-armed .miles-ways__bar span { transform: scaleX(0); }
  .miles-ways__ages.is-revealed .miles-ways__bar span { animation: miles-ways-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.25s + var(--row, 0) * 0.08s) both; }
}

.miles-ways__bar span { transform-origin: left center; }

/* The route and the travelling light are measured as 1 (pathLength), so
   these hold for every arc whatever its length on screen. */
@keyframes miles-ways-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes miles-ways-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes miles-ways-comet { 0% { stroke-dashoffset: 0.09; } 40%, 100% { stroke-dashoffset: -1; } }
@keyframes miles-ways-ping { 0%, 39% { opacity: 0; transform: scale(1); } 40% { opacity: 0.85; transform: scale(1); } 62%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes miles-ways-home { 0% { opacity: 0.75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3); } }
@keyframes miles-ways-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   The Health Hub page: the videos
   ==========================================================================
   One section with room for six, where there were two: a featured video and
   a library under it. The one stuck to the top, or the newest, plays in
   place, large; up to five more are listed beside it, each opening its own
   post. On the hero's evergreen, as a screen is watched in the dark. */

.health-hub-page main > section.miles-watch { padding-block: 104px 112px !important; }

.miles-watch { color: #fff; background: #183a36; }

/* The home page's videos: the same library, on the same dark green, between
   two cream sections. It takes the playing video's colours: its poster,
   blurred far past recognition, behind the player and inside the band. */
.miles-watch--home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 104px 112px !important;
}
.miles-watch--home .miles-watch__player { position: relative; }
.miles-watch__glow {
  position: absolute;
  top: -14%;
  left: -10%;
  z-index: -1;
  width: 120%;
  height: 128%;
  max-width: none;
  object-fit: cover;
  filter: blur(84px) saturate(1.45);
  opacity: 0.5;
  pointer-events: none;
}
.miles-watch .miles-watch__book { display: inline-flex; margin-top: 20px; margin-right: 20px; }

.miles-watch__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 16px 64px;
  align-items: end;
  margin-bottom: 44px;
}

.miles-watch .health-hub-eyebrow { color: #cddfd2 !important; }

.miles-watch .miles-watch__head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 4.4vw, 58px);
  letter-spacing: -0.04em !important;
}

.miles-watch .miles-watch__lead {
  max-width: 44ch;
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.6;
}

.miles-watch__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px 44px;
  align-items: start;
}

/* One video: the player and its words side by side, as the featured video was. */
.miles-watch__stage--one { grid-template-columns: minmax(0, 1fr); }
.miles-watch__stage--one .miles-watch__main {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 32px 48px;
  align-items: center;
}

/* The player that replaces the poster keeps its corners and its shadow, so
   pressing play changes the picture and nothing around it. */
.miles-watch__player .miles-video__poster,
.miles-watch__player .miles-video__player { border-radius: 20px; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28); }

.miles-watch__about { margin-top: 24px; }
.miles-watch__stage--one .miles-watch__about { margin-top: 0; }

.miles-watch .miles-watch__meta,
.miles-watch .miles-watch__more-title,
.miles-watch__item-meta {
  margin: 0;
  color: #cddfd2;
  font-family: "Inter", sans-serif !important;
  font-size: 13px;
  font-weight: 700 !important;
  letter-spacing: 0.105em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.miles-watch .miles-watch__title {
  margin: 10px 0 0;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.miles-watch .miles-watch__title a { color: #fff; text-decoration: none; }
.miles-watch .miles-watch__title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.miles-watch .miles-watch__excerpt {
  max-width: 60ch;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.6;
}

.miles-watch .health-hub-byline { margin: 12px 0 0; color: rgba(255, 255, 255, 0.72) !important; font-size: 14px; }

.miles-watch .miles-watch__go {
  display: inline-flex;
  gap: 8px;
  margin-top: 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.miles-watch .miles-watch__go:hover { text-decoration: underline; text-underline-offset: 5px; }
.miles-watch a:focus-visible { outline: 3px solid var(--color-cta, #e8734a); outline-offset: 3px; border-radius: 4px; }

.miles-watch__more { min-width: 0; }
.miles-watch .miles-watch__more-title { margin-bottom: 12px; }

.miles-watch .miles-watch__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-watch .miles-watch__item {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0 -12px;
  padding: 10px 12px;
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  transition: background-color 0.18s;
}

.miles-watch .miles-watch__item:hover { background: rgba(255, 255, 255, 0.06); }

.miles-watch__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-brand, #2c5f5a);
  border-radius: 10px;
}

.miles-watch__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.miles-watch__glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 34px;
  height: 34px;
  color: #fff;
  background: rgba(24, 58, 54, 0.72);
  border-radius: 50%;
  place-items: center;
  transform: translate(-50%, -50%);
}

.miles-watch__glyph svg { width: 14px; height: 14px; margin-left: 2px; }

.miles-watch__item-text { min-width: 0; }
.miles-watch__item-meta { display: block; letter-spacing: 0.08em !important; }

.miles-watch__item-title {
  display: block;
  margin-top: 4px;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 19px;
  line-height: 1.25;
}

.miles-watch .miles-watch__item:hover .miles-watch__item-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* For an editor, while no video is published: the room, and why it is empty. */
.health-hub-page main > section.miles-watch--room { padding-block: 64px !important; }

.miles-watch .miles-watch__room-note {
  max-width: 78ch;
  margin: 0 0 24px;
  padding: 14px 18px;
  color: #fff;
  font-size: 16px;
  line-height: 1.55;
  border: 1px dashed rgba(232, 115, 74, 0.85);
  border-radius: 12px;
}

/* The room drawn as the section will stand: the first plays large, the
   next five are listed beside it. */
.miles-watch .miles-watch__slots {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-auto-rows: minmax(64px, auto);
  gap: 12px 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-watch__slots li {
  display: grid;
  align-items: center;
  padding: 0 20px;
  color: rgba(220, 231, 223, 0.6);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 24px;
  border: 1px dashed rgba(220, 231, 223, 0.35);
  border-radius: 12px;
}

.miles-watch__slots li:first-child {
  grid-row: 1 / span 5;
  aspect-ratio: 16 / 9;
  font-size: 44px;
  border-radius: 20px;
  place-items: center;
}

@media (max-width: 999px) {
  .miles-watch__head { grid-template-columns: minmax(0, 1fr); }
  .miles-watch__stage,
  .miles-watch__stage--one .miles-watch__main,
  .miles-watch .miles-watch__slots { grid-template-columns: minmax(0, 1fr); }
  .miles-watch__slots li:first-child { grid-row: auto; }
}

@media (max-width: 599px) {
  .health-hub-page main > section.miles-watch { padding-block: 72px 80px !important; }
  .miles-watch--home { padding-block: 64px 72px !important; }
  .miles-watch .miles-watch__item { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; }
  .miles-watch__item-title { font-size: 17px; }

}

/* ---- covers: a card's picture when it has no photograph ------------------
   Drawn from the page the post supports, in the destination grid's line:
   the flu page's own photograph for a flu post, the country for a
   destination guide, the topic's name for anything else. The number is the
   post's place in its series, which is real order. */

.miles-cover {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 58%),
    var(--color-brand-dark, #204944);
}

/* The drawing's box, as variables, so a card can place a country's outline. */
.miles-cover { --art-top: 14%; --art-left: 8%; --art-w: 84%; --art-h: 76%; }

.miles-cover__art {
  position: absolute;
  top: var(--art-top);
  left: var(--art-left);
  width: var(--art-w);
  height: var(--art-h);
  overflow: visible;
}

.miles-cover__art * { vector-effect: non-scaling-stroke; }
.miles-cover__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.miles-cover__outline {
  fill: #dce7df;
  fill-opacity: 0.09;
  stroke: #dce7df;
  stroke-width: 1.5px;
  stroke-linejoin: round;
}

.miles-cover__num {
  position: absolute;
  top: 14px;
  left: 20px;
  color: #cddfd2;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
}

.miles-cover__word {
  position: absolute;
  right: 24px;
  bottom: 20px;
  left: 24px;
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* On a photograph the number keeps its place, lifted off the picture. */
.miles-cover--photo .miles-cover__num { color: #fff; text-shadow: 0 2px 14px rgba(8, 26, 24, 0.6); }

/* In the strip's cards the caption is the words, so the cover is the upper
   part of the card and the topic's name is not repeated over it. */
.miles-hub__card .miles-cover {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  background: none;
}

.miles-hub__card .miles-cover { --art-top: 10%; --art-h: 38%; }
.miles-hub__card .miles-cover__word { display: none; }

/* A title long enough to reach the drawing reads over its fade, not its lines. */
.miles-hub__card .miles-cover::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60%;
  background: linear-gradient(to bottom, rgba(32, 73, 68, 0) 0%, rgba(32, 73, 68, 0.9) 42%, var(--color-brand-dark, #204944) 100%);
}

/* The featured guide: the cover takes the photograph's half of the card. */
.health-hub-featured-article__card .miles-cover--featured {
  aspect-ratio: auto;
  height: 100%;
  min-height: 420px;
}

.miles-cover--featured { --art-top: 18%; --art-left: 6%; --art-w: 88%; --art-h: 70%; }
.miles-cover--featured .miles-cover__num { top: 28px; left: 36px; font-size: 64px; }

@media (max-width: 1023px) {
  .health-hub-featured-article__card .miles-cover--featured { min-height: 300px; }
}

/* ---- trust, as things to check -------------------------------------------- */

.miles-hub-trust {
  padding-block: 96px;
  background: var(--color-sage-soft, #edf2ed);
}

.miles-hub-trust__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px 72px;
  align-items: start;
}

.miles-hub-trust .miles-hub-trust__head h2 {
  margin: 12px 0 0;
  color: var(--color-text, #1a2e2a) !important;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-size: clamp(34px, 3.8vw, 48px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  line-height: 1.08 !important;
  text-wrap: balance;
}

.miles-hub-trust__head > p:last-child {
  max-width: 52ch;
  margin: 18px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 17px;
  line-height: 1.65;
}

.miles-hub-trust__facts {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-border, rgba(44, 95, 90, 0.14));
  border-block: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

.miles-hub-trust__fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "what check" "who check" "reg check";
  gap: 4px 24px;
  align-items: center;
  padding: 22px 0;
  background: var(--color-sage-soft, #edf2ed);
}

.miles-hub-trust__what {
  grid-area: what;
  margin: 0;
  color: var(--color-brand, #2c5f5a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-hub-trust__who {
  grid-area: who;
  margin: 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 24px;
  line-height: 1.25;
}

.miles-hub-trust__who a { color: inherit; text-underline-offset: 4px; }

.miles-hub-trust__reg {
  grid-area: reg;
  margin: 0;
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.miles-hub-trust__check {
  grid-area: check;
  justify-self: end;
  color: var(--color-brand, #2c5f5a);
  font-size: 16px;
  font-weight: 600;
  text-underline-offset: 4px;
}

.miles-hub-trust__check:focus-visible { outline: 3px solid var(--color-cta, #e8734a); outline-offset: 3px; }

@media (max-width: 899px) {
  .miles-hub-trust { padding-block: 72px; }
  .miles-hub-trust__layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
  .miles-hub-trust__fact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "what" "who" "reg" "check"; }
  .miles-hub-trust__check { justify-self: start; margin-top: 6px; }
}

/* ---- the destinations, as the home page draws them ----------------------- */

.miles-dests--hub {
  padding-block: 96px 0 !important;
  color: #fff;
  background: var(--color-brand-dark, #204944);
}

@media (max-width: 640px) {
  .miles-dests--hub { padding-top: 64px !important; }
}

/* The Latest grid fits its count, as every grid on the site does: a single
   card was one third of a row with two thirds of nothing beside it. One
   runs the width, its picture beside the words; two share the row. */
.health-hub-article-grid.miles-hub-live--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.health-hub-article-grid.miles-hub-live--n1 { grid-template-columns: minmax(0, 1fr); }
.miles-hub-live--n1 .miles-hub-live__card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
}
.miles-hub-live--n1 .miles-hub-live__img,
.miles-hub-live--n1 .miles-hub-live__plain {
  height: 100%;
  min-height: 300px;
  aspect-ratio: auto;
}
.miles-hub-live--n1 .health-hub-article-card__content { align-self: center; padding: clamp(28px, 4vw, 56px); }

@media (max-width: 767px) {
  .health-hub-article-grid.miles-hub-live--n2 { grid-template-columns: minmax(0, 1fr); }
  .miles-hub-live--n1 .miles-hub-live__card { grid-template-columns: minmax(0, 1fr); }
  .miles-hub-live--n1 .miles-hub-live__img,
  .miles-hub-live--n1 .miles-hub-live__plain { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   The home page's way into the Health Hub
   ==========================================================================
   On cream between the reviews and the destinations, both evergreen, where
   an empty band of cream used to sit. One bold object: the flu season on an
   evergreen card, the flu page's own photograph over the season's own
   sentence and its booking. Beside it the newest guides, white cards on the
   cream, each with its photograph or the cover drawn from the page it
   supports, its topic, title and summary, and who reviewed it and when.
   The guides fit their count: beside the season, one is a feature and two
   or three are rows; without it, one runs the width and two or three share
   it. It replaced three stock photographs of service
   pages under "Browse the Health Hub".
   (miles_hub_home_section(), inc/health-hub-page.php) */

.miles-hub-home {
  padding-block: 104px 112px !important;
  color: var(--color-text, #1a2e2a);
  background: var(--color-background, #faf7f2);
}

.miles-hub-home__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 20px 64px;
  align-items: end;
  margin-bottom: 56px;
}

.miles-hub-home .miles-hub-home__eyebrow,
.miles-hub-home .miles-hub-home__kicker,
.miles-hub-home .miles-hub-home__topic {
  margin: 0;
  color: var(--color-brand, #2c5f5a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* theme.css sets every heading's face, weight and spacing with !important,
   so the section restates what it changes. */
.miles-hub-home .miles-hub-home__title {
  max-width: 21ch;
  margin: 14px 0 0;
  color: #183a36;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
}

.miles-hub-home .miles-hub-home__lead {
  max-width: 44ch;
  margin: 0;
  color: var(--color-text-soft, #536762);
  font-size: 18px;
  line-height: 1.6;
}

.miles-hub-home .miles-hub-home__link {
  display: inline-block;
  margin-top: 16px;
  color: #183a36;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.miles-hub-home .miles-hub-home__link span { display: inline-block; margin-left: 4px; transition: transform 0.25s ease; }
.miles-hub-home .miles-hub-home__link:hover span { transform: translateX(4px); }

.miles-hub-home__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}

.miles-hub-home--guides .miles-hub-home__body,
.miles-hub-home--season .miles-hub-home__body { grid-template-columns: minmax(0, 1fr); }

/* ---- the season, on its card ----------------------------------------------
   The flu page's own photograph at the card's head (miles_hub_season_photo())
   and the season's words at its foot. The card runs as tall as the guides
   beside it; without a photograph the words stand alone in its middle. */

.miles-hub-home__season {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding: 40px 44px 44px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 255, 255, 0.07), transparent 44%),
    var(--color-brand-dark, #204944);
}

/* The photograph takes the card's spare height, so a tall column of guides
   beside it leaves no hole between the picture and its words. */
.miles-hub-home__figure { position: relative; flex: 1; min-height: 240px; }
.miles-hub-home__figure-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 16px; }
.miles-hub-home__season--words { justify-content: center; }

.miles-hub-home .miles-hub-home__season .miles-hub-home__kicker { color: #cddfd2; }

.miles-hub-home .miles-hub-home__line {
  margin: 10px 0 0;
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 22px;
  line-height: 1.38;
  text-wrap: pretty;
}

.miles-hub-home__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 24px;
}

.miles-hub-home .miles-hub-home__book {
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(232, 115, 74, 0.28);
}

.miles-hub-home .miles-hub-home__call {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.miles-hub-home .miles-hub-home__call:hover { text-decoration-color: #fff; }
.miles-hub-home .miles-hub-home__call:focus-visible { outline: 3px solid var(--color-cta, #e8734a) !important; outline-offset: 4px; border-radius: 2px; }

/* With no guide published the season stands alone: the photograph and its
   words side by side on the card, as the Hub's own hero has them. */
.miles-hub-home--season .miles-hub-home__season {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 64px;
  align-items: center;
  padding: 48px 56px;
}

/* ---- the guides -----------------------------------------------------------
   Each a white card: its photograph, or the cover drawn from the page it
   supports (miles_hub_cover()), then its topic, its title, its summary and
   who reviewed it on what day. The title is the card's one link, and its
   target covers the card. */

.miles-hub-home__guides { display: flex; flex-direction: column; }
.miles-hub-home__guides > .miles-hub-home__kicker { margin-bottom: 18px; }

.miles-hub-home__list {
  --reveal-step: 120ms;
  --reveal-delay: 120ms;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-hub-home__item { display: flex; margin: 0; }

.miles-hub-home__card {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  flex: 1;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(32, 73, 68, 0.1);
  border-radius: 20px;
  background: #fff;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease;
}

.miles-hub-home__card:hover { border-color: rgba(32, 73, 68, 0.18); box-shadow: 0 18px 40px rgba(24, 58, 54, 0.12); }
.miles-hub-home__card:focus-within { outline: 3px solid rgba(201, 109, 80, 0.42); outline-offset: 3px; }

.miles-hub-home__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-brand-dark, #204944);
  container-type: inline-size;
}

.miles-hub-home__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.miles-hub-home__media .miles-cover { position: absolute; inset: 0; aspect-ratio: auto; --art-top: 12%; --art-left: 12%; --art-w: 76%; --art-h: 76%; }
.miles-hub-home__media .miles-cover__word { right: 12%; bottom: 10%; left: 12%; font-size: clamp(17px, 13cqi, 32px); }
.miles-hub-home__media .miles-cover__num { top: 10%; left: 12%; font-size: clamp(22px, 17cqi, 48px); }
.miles-hub-home__media .miles-cover__photo { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }

.miles-hub-home__play {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #183a36;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.miles-hub-home__play svg { width: 16px; height: 16px; margin-left: 2px; }

.miles-hub-home__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 2px 6px 2px 22px;
}

.miles-hub-home .miles-hub-home__name,
.miles-hub-home .miles-hub-home__name a {
  margin: 0;
  color: #183a36;
  font-size: 23px;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
}

.miles-hub-home .miles-hub-home__go {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.miles-hub-home__go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.miles-hub-home__go:focus-visible { outline: none !important; }
.miles-hub-home__card:hover .miles-hub-home__go { text-decoration-color: rgba(24, 58, 54, 0.45); }

.miles-hub-home .miles-hub-home__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* The mark in a column of its own, so the reviewer's name wraps beside it
   and the day sits under the name. */
.miles-hub-home .miles-hub-home__by {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 2px 8px;
  margin: 0;
  padding-top: 6px;
  color: #183a36;
  font-size: 16px;
  line-height: 1.45;
}

.miles-hub-home__seal { grid-row: 1 / span 2; margin-top: 3px; color: var(--color-brand, #2c5f5a); }
.miles-hub-home .miles-hub-home__when { grid-column: 2; color: var(--color-text-soft, #536762); }

.miles-hub-home .miles-hub-home__note {
  max-width: 62ch;
  margin: 22px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  line-height: 1.55;
}

/* One guide beside the season is a feature: its picture over its words,
   the card as tall as the season beside it. */
.miles-hub-home--both [data-count="1"] .miles-hub-home__list { flex: 1; }
.miles-hub-home--both [data-count="1"] .miles-hub-home__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 1fr) auto; align-items: stretch; padding: 0; overflow: hidden; }
.miles-hub-home--both [data-count="1"] .miles-hub-home__media { aspect-ratio: auto; border-radius: 0; }
.miles-hub-home--both [data-count="1"] .miles-hub-home__text { padding: 28px 34px 32px; }
.miles-hub-home--both [data-count="1"] .miles-hub-home__name,
.miles-hub-home--both [data-count="1"] .miles-hub-home__name a { font-size: 31px; }
.miles-hub-home--both [data-count="1"] .miles-hub-home__excerpt { -webkit-line-clamp: 5; font-size: 17px; }

/* Without the season the guides take the width: one runs across it, its
   picture beside its words; two or three share it, each picture over its
   words. */
.miles-hub-home--guides [data-count="2"] .miles-hub-home__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.miles-hub-home--guides [data-count="3"] .miles-hub-home__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.miles-hub-home--guides .miles-hub-home__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; padding: 0; overflow: hidden; }
.miles-hub-home--guides .miles-hub-home__media { aspect-ratio: 16 / 10; border-radius: 0; }
.miles-hub-home--guides .miles-hub-home__text { padding: 24px 28px 28px; }
.miles-hub-home--guides [data-count="1"] .miles-hub-home__card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-rows: none; }
.miles-hub-home--guides [data-count="1"] .miles-hub-home__media { aspect-ratio: auto; min-height: 340px; }
.miles-hub-home--guides [data-count="1"] .miles-hub-home__text { justify-content: center; padding: clamp(28px, 4vw, 52px); }
.miles-hub-home--guides [data-count="1"] .miles-hub-home__name,
.miles-hub-home--guides [data-count="1"] .miles-hub-home__name a { font-size: 31px; }

@media (prefers-reduced-motion: no-preference) {
  .miles-hub-home__card:hover { transform: translateY(-4px); }
  .miles-hub-home__card:hover .miles-hub-home__photo { transform: scale(1.05); }
  .miles-hub-home__card:hover .miles-cover__photo { transform: scale(1.05); }
}

/* ---- the entrance ---------------------------------------------------------
   The site's reveal (miles-reveal.js): the head rises, the season's words
   rise under the photograph, and the guides rise in turn. */

@media (prefers-reduced-motion: no-preference) {
  .miles-hub-home__live { --reveal-delay: 0.35s; }
}

/* Under 1180 the two columns would leave the photograph small in a tall
   card, so the season's card runs the width above the guides, the
   photograph beside its words, and the guides are rows under it. */
@media (max-width: 1179px) {
  .miles-hub-home__body { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .miles-hub-home__season {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 56px;
    align-items: center;
    padding: 44px 48px;
  }
  .miles-hub-home__figure { align-self: stretch; min-height: 280px; }
  .miles-hub-home__season--words { grid-template-columns: minmax(0, 1fr); }
  .miles-hub-home--both [data-count="1"] .miles-hub-home__card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-rows: none; }
  .miles-hub-home--both [data-count="1"] .miles-hub-home__media { min-height: 320px; }
  .miles-hub-home--both [data-count="1"] .miles-hub-home__text { justify-content: center; }
}

/* One column: the head, the season's card, then the guides. */
@media (max-width: 899px) {
  .miles-hub-home__head { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
  .miles-hub-home__season,
  .miles-hub-home--season .miles-hub-home__season { grid-template-columns: minmax(0, 1fr); }
  .miles-hub-home--guides [data-count="3"] .miles-hub-home__list { grid-template-columns: minmax(0, 1fr); }
  .miles-hub-home--guides [data-count="3"] .miles-hub-home__card { grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: none; padding: 18px; }
  .miles-hub-home--guides [data-count="3"] .miles-hub-home__media { aspect-ratio: 1; border-radius: 14px; }
  .miles-hub-home--guides [data-count="3"] .miles-hub-home__text { padding: 2px 6px 2px 22px; }
}

/* A phone: every guide is a row, a small picture beside its words, and
   rows leave the summary to the guide itself; one guide alone keeps its
   summary. As a feature, one guide put a second picture the height of the
   season's straight under it, and the section ran to 2.2 screens. */
@media (max-width: 599px) {
  .miles-hub-home { padding-block: 72px 80px !important; }
  .miles-hub-home__head { margin-bottom: 32px; }
  .miles-hub-home .miles-hub-home__lead { font-size: 17px; }
  .miles-hub-home__season { gap: 28px; padding: 26px 18px 30px; border-radius: 20px; }
  .miles-hub-home--season .miles-hub-home__season { padding: 26px 18px 30px; }
  .miles-hub-home__season .miles-hub-home__live { padding-inline: 4px; }
  .miles-hub-home__figure { min-height: 0; aspect-ratio: 4 / 3; }
  .miles-hub-home .miles-hub-home__line { font-size: 20px; }
  .miles-hub-home__list { gap: 12px; }
  .miles-hub-home__card,
  .miles-hub-home--guides .miles-hub-home__card,
  .miles-hub-home--guides [data-count="3"] .miles-hub-home__card { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: none; padding: 14px; border-radius: 16px; overflow: visible; }
  .miles-hub-home__media,
  .miles-hub-home--guides .miles-hub-home__media,
  .miles-hub-home--guides [data-count="3"] .miles-hub-home__media { aspect-ratio: 1; min-height: 0; border-radius: 12px; }
  .miles-hub-home__text,
  .miles-hub-home--guides .miles-hub-home__text,
  .miles-hub-home--guides [data-count="3"] .miles-hub-home__text { gap: 6px; padding: 0 2px 0 16px; }
  .miles-hub-home .miles-hub-home__name,
  .miles-hub-home .miles-hub-home__name a { font-size: 19px; }
  .miles-hub-home__guides:not([data-count="1"]) .miles-hub-home__excerpt { display: none; }
  .miles-hub-home__play { bottom: 6px; left: 6px; width: 28px; height: 28px; }
  .miles-hub-home__play svg { width: 13px; height: 13px; }
  .miles-hub-home [data-count="1"] .miles-hub-home__card,
  .miles-hub-home--both [data-count="1"] .miles-hub-home__card,
  .miles-hub-home--guides [data-count="1"] .miles-hub-home__card { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: none; align-items: start; padding: 14px; overflow: visible; }
  .miles-hub-home [data-count="1"] .miles-hub-home__media,
  .miles-hub-home--both [data-count="1"] .miles-hub-home__media,
  .miles-hub-home--guides [data-count="1"] .miles-hub-home__media { aspect-ratio: 1; min-height: 0; border-radius: 12px; }
  .miles-hub-home [data-count="1"] .miles-hub-home__text,
  .miles-hub-home--guides [data-count="1"] .miles-hub-home__text { justify-content: flex-start; padding: 0 2px 0 16px; }
  .miles-hub-home [data-count="1"] .miles-hub-home__name,
  .miles-hub-home [data-count="1"] .miles-hub-home__name a { font-size: 19px; }
  .miles-hub-home [data-count="1"] .miles-hub-home__list { flex: none; }
}

@media (forced-colors: active) {
  .miles-hub-home__card,
  .miles-hub-home__season { border: 1px solid CanvasText; }
}

/* ==========================================================================
   The Vaccines page, /vaccines/
   ==========================================================================
   Every vaccination the pharmacy gives, in sections by who it is for
   (inc/vaccines-index.php). The Travel Clinic's hero on the pharmacy's own
   floor, with a chooser in the vaccine pages' right-hand column that goes
   straight down to each section and says what is in it. Then the sections:
   one of four or more cards runs the width in a grid, and the smaller ones
   share a band side by side as rows, so two cards are never a thin section
   of their own. Each card or row is its name, its line, and its price as its
   own page states it, and the whole of it is the link. While the flu season
   runs its section comes first, the flu page's own photograph off the
   window's left edge and the season's words beside it; the Travel Clinic's
   card runs off the right edge. Every section once sat in one 1192px column,
   a heading and then a box, which read as a template (Drew). */

/* ---- the hero ---------------------------------------------------------- */

/* The floor is bright (white shelving, ceiling lights), so the scrim holds
   further across than the shopfront's does, and the chooser sits on glass
   dark enough for 16px white wherever the photograph shows through. */
.miles-vaccines-page .service-location-hero { background-position: 50% 42% !important; }

.miles-vaccines-page .service-location-hero::before {
  background:
    radial-gradient(circle at 88% 16%, rgba(220, 231, 223, 0.08) 0, transparent 45%),
    linear-gradient(
      90deg,
      rgba(16, 44, 39, 0.97) 0%,
      rgba(18, 50, 45, 0.93) 38%,
      rgba(21, 56, 50, 0.8) 66%,
      rgba(24, 62, 55, 0.62) 100%
    );
}

@media (max-width: 900px) {
  .miles-vaccines-page .service-location-hero::before {
    background: linear-gradient(180deg, rgba(16, 44, 39, 0.93) 0%, rgba(18, 50, 45, 0.95) 55%, rgba(16, 44, 39, 0.97) 100%);
  }
}

.miles-vaccines-chooser {
  padding: 22px 26px 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(14, 40, 35, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(8, 26, 23, 0.28);
}

.miles-vaccines-hero .miles-vaccines-chooser__eyebrow {
  margin: 0 0 4px;
  color: #cddfd2;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.miles-vaccines-chooser__list { margin: 0; padding: 0; list-style: none; }
.miles-vaccines-chooser__list li { margin: 0; }
.miles-vaccines-chooser__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.13); }

/* Two classes: `.service-location-page a` is (0,1,1). The row is the link,
   so the target is the row and not a word in it. */
.miles-vaccines-hero .miles-vaccines-chooser__go {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  padding: 16px 0 17px;
  color: #fff;
  text-decoration: none;
}

.miles-vaccines-chooser__top { display: flex; align-items: center; gap: 10px; min-width: 0; }

.miles-vaccines-hero .miles-vaccines-chooser__name {
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif !important;
  font-optical-sizing: auto;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.miles-vaccines-hero .miles-vaccines-chooser__count {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(220, 231, 223, 0.16);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.miles-vaccines-hero .miles-vaccines-chooser__which {
  grid-column: 1;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.45;
}

.miles-vaccines-chooser__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  color: #cddfd2;
  transition: transform 0.2s ease;
}

.miles-vaccines-hero .miles-vaccines-chooser__go:hover .miles-vaccines-chooser__name,
.miles-vaccines-hero .miles-vaccines-chooser__go:focus-visible .miles-vaccines-chooser__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.miles-vaccines-hero .miles-vaccines-chooser__go:hover .miles-vaccines-chooser__arrow { transform: translateY(3px); }

/* It arrives after the button, as the rest of the hero does. */
@media (prefers-reduced-motion: no-preference) {
  .miles-vaccines-chooser {
    opacity: 0;
    transform: translateY(16px);
    animation: miles-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--hero-base, 160ms) + 5 * var(--hero-stagger, 70ms) + 700ms);
  }
}

@media (max-width: 900px) {
  .miles-vaccines-chooser { margin-top: 30px; padding: 18px 20px 4px; }
  .miles-vaccines-hero .miles-vaccines-chooser__go { padding: 14px 0 15px; }
  .miles-vaccines-hero .miles-vaccines-chooser__name { font-size: 21px; }
}

/* ---- the registrations ------------------------------------------------- */

/* Under the hero, a band of its own on white, since the first row of
   sections is cream; lifted, so the panel's shadow is not cut off by the
   ground of the row after it. */
.miles-vaccines .miles-yfvc { position: relative; z-index: 1; background: #fff; }

/* ---- the sections ------------------------------------------------------ */

/* Each row of sections is a band of its own ground, cream and white in
   turn, and the sections inside it are not bands: theme.css pads every
   section 108px, which would stack inside the row's own padding. */
.miles-vaccines-row {
  padding-block: 96px 104px;
  background: var(--color-background, #faf7f2);
}

.miles-vaccines-row:nth-of-type(even) { background: #fff; }

/* The container's side margin, so a picture can subtract it and reach the
   window's edge, as the vaccine pages restate the home page's. theme.css
   narrows the container to 100% - 36px on a phone. */
.miles-vaccines { --miles-gutter: max(24px, calc((100vw - 1192px) / 2)); }
@media (max-width: 767px) { .miles-vaccines { --miles-gutter: 18px; } }

/* A row whose picture runs past the column clips the share of 100vw a
   desktop's scrollbar adds, rather than scrolling sideways by it. clip,
   not hidden: nothing here scrolls or sticks. */
.miles-vaccines-row--season,
.miles-vaccines-row--full { overflow-x: clip; }

.miles-vaccines section.miles-vaccines-group {
  margin: 0;
  padding: 0 !important;
}

.miles-vaccines-group__head {
  display: grid;
  gap: 10px;
  margin-bottom: 36px;
}

.miles-vaccines .miles-vaccines-group__eyebrow {
  margin: 0;
  color: var(--color-brand, #2c5f5a);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* theme.css sets every heading's face, weight and tracking with !important. */
.miles-vaccines .miles-vaccines-group__title {
  max-width: 24ch;
  margin: 0;
  color: #183a36;
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.06 !important;
}

/* The cards: as many columns as the count fills, three at most. */
.miles-vaccines-cards {
  --reveal-step: 80ms;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miles-vaccines-cards[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.miles-vaccines-cards[data-count="2"],
.miles-vaccines-cards[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* No card left over at the end of the grid. A lone last card used to take
   the whole row, which on the travel section's ten stretched Meningitis ACWY
   across the page (Drew, 27 October 2026). The grid is six tracks, a card two
   of them; when a row would be left with one card, the last four cards go two
   to a row, and with two over, the last two share the row. */
@media (min-width: 901px) {
  .miles-vaccines-group:not(.miles-vaccines-group--column) .miles-vaccines-cards:not([data-count="1"]):not([data-count="2"]):not([data-count="4"]) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .miles-vaccines-group:not(.miles-vaccines-group--column) .miles-vaccines-cards:not([data-count="1"]):not([data-count="2"]):not([data-count="4"]) > * { grid-column: span 2; }
  .miles-vaccines-group:not(.miles-vaccines-group--column) .miles-vaccines-cards:not([data-count="1"]):not([data-count="2"]):not([data-count="4"]) > :first-child:nth-last-child(3n+1) ~ :nth-last-child(-n+4),
  .miles-vaccines-group:not(.miles-vaccines-group--column) .miles-vaccines-cards:not([data-count="1"]):not([data-count="2"]):not([data-count="4"]) > :first-child:nth-last-child(3n+2) ~ :nth-last-child(-n+2) { grid-column: span 3; }
}

.miles-vaccines-cards__item { display: flex; margin: 0; }

.miles-vaccines-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 156px;
  padding: 26px 26px 20px;
  border: 1px solid rgba(32, 73, 68, 0.1);
  border-radius: 20px;
  background: #fff;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease;
}

/* On a white row the cards take the cream, so they still read as objects. */
.miles-vaccines-row:nth-of-type(even) .miles-vaccines-card { background: var(--color-background, #faf7f2); border-color: rgba(32, 73, 68, 0.08); }

.miles-vaccines-card:hover { border-color: rgba(32, 73, 68, 0.2); box-shadow: 0 18px 40px rgba(24, 58, 54, 0.12); transform: translateY(-3px); }
.miles-vaccines-card:focus-within { outline: 3px solid rgba(201, 109, 80, 0.42); outline-offset: 3px; }

.miles-vaccines .miles-vaccines-card__name {
  margin: 0;
  padding-right: 8px;
  color: #183a36;
  font-size: 25px;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.16 !important;
}

/* The name is the card's one link, and its target is the whole card. */
.miles-vaccines .miles-vaccines-card__go { color: #183a36; text-decoration: none; }
.miles-vaccines .miles-vaccines-card__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.miles-vaccines .miles-vaccines-card__go:focus-visible { outline: none !important; }
.miles-vaccines .miles-vaccines-card:hover .miles-vaccines-card__go { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.miles-vaccines .miles-vaccines-card__line {
  margin: 10px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 17px;
  line-height: 1.55;
}

.miles-vaccines-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 22px;
}

.miles-vaccines .miles-vaccines-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
}

.miles-vaccines .miles-vaccines-card__amount {
  color: #183a36;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.miles-vaccines .miles-vaccines-card__detail {
  color: var(--color-text-soft, #536762);
  font-size: 16px;
  line-height: 1.4;
}

.miles-vaccines-card__arrow {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid rgba(32, 73, 68, 0.18);
  border-radius: 50%;
  color: #183a36;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.miles-vaccines-card__arrow svg { width: 16px; height: 16px; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.miles-vaccines-card:hover .miles-vaccines-card__arrow { border-color: var(--color-brand-dark, #204944); color: #fff; background: var(--color-brand-dark, #204944); }
.miles-vaccines-card:hover .miles-vaccines-card__arrow svg { transform: translateX(2px); }

/* The season's page, out of season, carries the flu page's own photograph
   down the card's left edge, as the home page's guide cards carry theirs. */
.miles-vaccines-card--cover {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 24px;
  padding-left: 0;
  overflow: hidden;
}

.miles-vaccines .miles-vaccines-card__cover {
  grid-column: 1;
  grid-row: 1 / -1;
  min-height: 132px;
  margin: -26px 0 -20px;
  aspect-ratio: auto;
  --art-top: 9%; --art-left: 9%; --art-w: 82%; --art-h: 82%;
}

.miles-vaccines .miles-vaccines-card--cover .miles-vaccines-card__name { grid-column: 2; grid-row: 1; }
.miles-vaccines .miles-vaccines-card--cover .miles-vaccines-card__line { grid-column: 2; grid-row: 2; }
.miles-vaccines .miles-vaccines-card--cover .miles-vaccines-card__foot { grid-column: 2; grid-row: 3; }
.miles-vaccines-card__cover .miles-cover__photo { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: no-preference) {
  .miles-vaccines-card--cover:hover .miles-cover__photo { transform: scale(1.05); }
}

/* Sections side by side: one column each, their cards stacked. */
.miles-vaccines-row__band {
  display: grid;
  grid-template-columns: repeat(var(--band, 3), minmax(0, 1fr));
  gap: 48px;
}

.miles-vaccines-row--band[data-columns="2"] .miles-vaccines-row__band { --band: 2; gap: 64px; }

.miles-vaccines-group--column .miles-vaccines-group__head { margin-bottom: 22px; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-group__title { font-size: clamp(28px, 2.6vw, 36px); }

/* A section sharing a band lists its pages as rows on hairlines, not cards:
   the travel section is the page's one grid of cards, and cards and then
   more cards was the template (Drew). The name and its line on the left,
   the price and the arrow on the right, and the whole row is the link. */
.miles-vaccines-group--column .miles-vaccines-cards {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid rgba(32, 73, 68, 0.18);
}

.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 20px;
  min-height: 0;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid rgba(32, 73, 68, 0.18);
  border-radius: 0;
  background: transparent;
}

.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card:hover { box-shadow: none; transform: none; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__name { grid-column: 1; padding-right: 0; font-size: 23px; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__line { grid-column: 1; margin-top: 2px; font-size: 16px; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__foot { grid-column: 2; grid-row: 1 / span 2; gap: 16px; margin: 0; padding: 0; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card:not(:has(.miles-vaccines-card__line)) .miles-vaccines-card__foot { grid-row: 1; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__price { display: grid; justify-items: end; gap: 0; text-align: right; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__amount { font-size: 22px; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__arrow { width: 36px; height: 36px; }

/* Out of season the flu page's row carries its photograph at its start. */
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card--cover { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 18px; overflow: visible; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__cover { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; min-height: 0; margin: 0; border-radius: 12px; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card--cover .miles-vaccines-card__name { grid-column: 2; grid-row: 1; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card--cover .miles-vaccines-card__line { grid-column: 2; grid-row: 2; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card--cover .miles-vaccines-card__foot { grid-column: 3; grid-row: 1 / span 2; }
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card--cover:not(:has(.miles-vaccines-card__line)) .miles-vaccines-card__cover,
.miles-vaccines .miles-vaccines-group--column .miles-vaccines-card--cover:not(:has(.miles-vaccines-card__line)) .miles-vaccines-card__foot { grid-row: 1; }

/* Side by side on a desktop a row is narrow for a price beside the name
   (about 290px at 1024, where "Whooping cough (pertussis) booster" ran to
   four lines): the price goes under the name and the arrow stays at the
   right. Stacked, a row has the width, and the price stands beside it. */
@media (min-width: 901px) {
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__foot { display: contents; }
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__price { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px; text-align: left; }
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__arrow { grid-column: 2; grid-row: 1 / span 2; }
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card:has(.miles-vaccines-card__line):has(.miles-vaccines-card__price) .miles-vaccines-card__arrow { grid-row: 1 / span 3; }
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card:not(:has(.miles-vaccines-card__line)):not(:has(.miles-vaccines-card__price)) .miles-vaccines-card__arrow { grid-row: 1; }
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card--cover .miles-vaccines-card__price { grid-column: 2; }
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card--cover .miles-vaccines-card__arrow { grid-column: 3; }
}

/* Where the travel section hands on: one card, to the Travel Clinic, on the
   shop's photograph. Its sign, on the right of the picture, names the
   clinic, so the evergreen comes in from the left under the words and
   leaves the sign clear; on a narrower screen it rises from the foot. The
   name is the card's one link, and its target is the whole card. */
.miles-vaccines-handoff {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  min-height: 340px;
  margin-top: 48px;
  padding: 44px 48px;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background: var(--color-brand-dark, #204944);
}

.miles-vaccines-handoff__photo { position: absolute; inset: 0; z-index: -2; }

.miles-vaccines-handoff__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.miles-vaccines-handoff::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(24, 58, 54, 0.95) 0%, rgba(24, 58, 54, 0.86) 30%, rgba(24, 58, 54, 0.32) 56%, rgba(24, 58, 54, 0) 76%);
}

.miles-vaccines .miles-vaccines-handoff__line {
  max-width: 460px;
  margin: 0;
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 24px;
  line-height: 1.35;
  text-wrap: pretty;
}

.miles-vaccines .miles-vaccines-handoff__go {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  color: #fff;
  text-decoration: none;
}

.miles-vaccines .miles-vaccines-handoff__go::after { content: ""; position: absolute; inset: 0; }
.miles-vaccines .miles-vaccines-handoff__go:focus-visible { outline: none !important; }
.miles-vaccines-handoff:focus-within { outline: 3px solid rgba(201, 109, 80, 0.42); outline-offset: 3px; }

.miles-vaccines-handoff__words { display: grid; gap: 8px; max-width: 460px; }

.miles-vaccines .miles-vaccines-handoff__name {
  color: #fff;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.miles-vaccines .miles-vaccines-handoff__note { color: rgba(255, 255, 255, 0.86); font-size: 17px; line-height: 1.45; }

.miles-vaccines-handoff__arrow {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-left: auto;
  border-radius: 50%;
  color: var(--color-brand-dark, #204944);
  background: #fff;
}

.miles-vaccines-handoff__arrow svg { width: 18px; height: 18px; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.miles-vaccines-handoff:hover .miles-vaccines-handoff__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.miles-vaccines-handoff:hover .miles-vaccines-handoff__arrow svg { transform: translateX(2px); }

@media (prefers-reduced-motion: no-preference) {
  .miles-vaccines-handoff:hover .miles-vaccines-handoff__photo img { transform: scale(1.04); }
}

/* On a desktop the card runs off the window's right edge from the column's
   left, the mirror of the season's photograph off the left; stacked, it runs
   edge to edge, as a vaccine page's pictures do on a phone. */
@media (min-width: 901px) {
  .miles-vaccines-handoff {
    min-height: clamp(340px, 26vw, 440px);
    margin-right: calc(-1 * var(--miles-gutter, 24px));
    border-radius: 24px 0 0 24px;
  }
}

/* ---- the season, while it runs ---------------------------------------- */

/* The flu page's photograph off the window's left edge, and beside it the
   section's heading, the flu page's own card, the season's sentence for
   today and its booking, on the row's own cream: the vaccine pages' bleed.
   It was an evergreen card in the column, the second of three boxes in a row
   after the registrations. The heading comes first, so stacked it stands
   above the photograph; without a photograph, the words stand alone. */
.miles-vaccines-season { display: grid; gap: 28px; }
.miles-vaccines-season__live { min-width: 0; }
.miles-vaccines-season--words .miles-vaccines-season__live { max-width: 760px; }
.miles-vaccines-season .miles-vaccines-group__head { margin-bottom: 0; }

.miles-vaccines-season__figure { position: relative; margin: 0; overflow: hidden; }
.miles-vaccines-season__figure-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

@media (min-width: 901px) {
  .miles-vaccines-season--photo {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(48px, 5.4vw, 88px);
    row-gap: 0;
  }
  .miles-vaccines-season--photo .miles-vaccines-season__figure {
    grid-column: 1;
    grid-row: 1 / -1;
    min-height: 520px;
    margin-left: calc(-1 * var(--miles-gutter, 24px));
    border-radius: 0 24px 24px 0;
  }
  .miles-vaccines-season--photo .miles-vaccines-group__head { grid-column: 2; grid-row: 2; margin-bottom: 26px; }
  .miles-vaccines-season--photo .miles-vaccines-season__live { grid-column: 2; grid-row: 3; padding-bottom: 8px; }
}

@media (max-width: 900px) {
  .miles-vaccines-season--photo .miles-vaccines-season__figure {
    aspect-ratio: 4 / 3;
    margin-inline: calc(-1 * var(--miles-gutter, 18px));
  }
}

.miles-vaccines-season + .miles-vaccines-cards { margin-top: 40px; }

.miles-vaccines .miles-vaccines-season__name {
  margin: 0;
  color: #183a36;
  font-size: clamp(28px, 2.5vw, 34px);
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
}

.miles-vaccines .miles-vaccines-season__name a { color: #183a36; text-decoration: underline; text-decoration-color: rgba(24, 58, 54, 0.3); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.miles-vaccines .miles-vaccines-season__name a:hover { text-decoration-color: currentColor; }

.miles-vaccines .miles-vaccines-season__line {
  margin: 12px 0 0;
  color: var(--color-text-soft, #536762);
  font-size: 18px;
  line-height: 1.55;
}

.miles-vaccines .miles-vaccines-season__today {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(32, 73, 68, 0.16);
  color: #183a36;
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-size: 21px;
  line-height: 1.4;
  text-wrap: pretty;
}

.miles-vaccines-season__icon { flex: none; margin-top: 6px; color: var(--color-brand, #2c5f5a); }

.miles-vaccines-season__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 26px;
}

.miles-vaccines .miles-vaccines-season__book {
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(232, 115, 74, 0.28);
}

.miles-vaccines .miles-vaccines-season__call {
  color: #183a36;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(24, 58, 54, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.miles-vaccines .miles-vaccines-season__call:hover { text-decoration-color: currentColor; }

/* ---- narrower ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .miles-vaccines-row__band { gap: 36px; }
}

@media (max-width: 900px) {
  .miles-vaccines-row { padding-block: 72px 80px; }
  .miles-vaccines-cards:not([data-count="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miles-vaccines-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .miles-vaccines-row__band,
  .miles-vaccines-row--band[data-columns="2"] .miles-vaccines-row__band { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .miles-vaccines-handoff { min-height: 380px; margin: 40px calc(-1 * var(--miles-gutter, 24px)) 0; padding: 36px var(--miles-gutter, 24px) 34px; border-radius: 0; }
  .miles-vaccines-handoff__photo img { object-position: 88% 30%; }
  .miles-vaccines-handoff::before { background: linear-gradient(180deg, rgba(24, 58, 54, 0.04) 0%, rgba(24, 58, 54, 0.18) 32%, rgba(24, 58, 54, 0.86) 62%, rgba(24, 58, 54, 0.96) 100%); }
  /* A written line would sit over the lit window, so with one the card is
     taller and its shade rises higher, under every word. */
  .miles-vaccines-handoff:has(.miles-vaccines-handoff__line) { min-height: 480px; }
  .miles-vaccines-handoff:has(.miles-vaccines-handoff__line)::before { background: linear-gradient(180deg, rgba(24, 58, 54, 0.04) 0%, rgba(24, 58, 54, 0.2) 26%, rgba(24, 58, 54, 0.9) 46%, rgba(24, 58, 54, 0.97) 100%); }
}

/* On a phone a card is a row: the name and its line, then the price and
   the arrow at the right, so nine of them are a list to scan and not three
   screens of boxes. */
@media (max-width: 640px) {
  .miles-vaccines-row { padding-block: 56px 64px; }
  .miles-vaccines-group__head { margin-bottom: 24px; }
  .miles-vaccines-cards,
  .miles-vaccines-cards:not([data-count="1"]) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* The name keeps at least half the row: beside "Single dose, certificate
     included" it was squeezed to 18px and "Yellow fever" ran over the
     price's line (Drew, 8 October 2026). The price's words wrap instead. */
  .miles-vaccines-card {
    display: grid;
    grid-template-columns: minmax(52%, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    min-height: 0;
    padding: 16px 16px 16px 18px;
    border-radius: 16px;
  }
  .miles-vaccines .miles-vaccines-card__name { grid-column: 1; padding-right: 0; font-size: 21px; }
  .miles-vaccines .miles-vaccines-card__line { grid-column: 1; margin-top: 2px; font-size: 16px; }
  .miles-vaccines-card__foot { grid-column: 2; grid-row: 1 / span 2; gap: 12px; margin: 0; padding: 0; }
  .miles-vaccines-card:not(:has(.miles-vaccines-card__line)) .miles-vaccines-card__foot { grid-row: 1; }
  .miles-vaccines .miles-vaccines-card__price { display: grid; justify-items: end; gap: 0; text-align: right; }
  .miles-vaccines .miles-vaccines-card__amount { font-size: 21px; }
  .miles-vaccines .miles-vaccines-card__detail { font-size: 16px; }
  .miles-vaccines-card__arrow { width: 34px; height: 34px; }
  .miles-vaccines-card:hover { transform: none; }
  .miles-vaccines-season { gap: 24px; }
  .miles-vaccines .miles-vaccines-season__today { font-size: 19px; }
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card { padding: 16px 0; }
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__name,
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__amount { font-size: 21px; }
  .miles-vaccines .miles-vaccines-group--column .miles-vaccines-card__arrow { width: 34px; height: 34px; }
  .miles-vaccines-handoff { min-height: 400px; gap: 14px; margin-top: 32px; padding: 24px var(--miles-gutter, 18px) 26px; border-radius: 0; }
  .miles-vaccines .miles-vaccines-handoff__line { font-size: 21px; }
  .miles-vaccines .miles-vaccines-handoff__go { gap: 16px; }
  .miles-vaccines .miles-vaccines-handoff__name { font-size: 32px; }
  .miles-vaccines .miles-vaccines-handoff__note { font-size: 16px; }
  .miles-vaccines-handoff__arrow { width: 44px; height: 44px; }
  .miles-vaccines-card--cover { grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: 16px; padding-left: 0; }
  .miles-vaccines .miles-vaccines-card__cover { min-height: 88px; margin: -16px 0; }
  .miles-vaccines .miles-vaccines-card--cover .miles-vaccines-card__foot { grid-column: 3; grid-row: 1 / span 2; }
  .miles-vaccines .miles-vaccines-card--cover:not(:has(.miles-vaccines-card__line)) .miles-vaccines-card__foot { grid-row: 1; }
}

/* The opening hours card, held to the type floor on this page: its status
   line is read, and its caption is a label (the Travel Clinic's page, where
   the card comes from, is not measured). */
.miles-vaccines .miles-hours-section .miles-hours-text { font-size: 16px; }
.miles-vaccines .miles-hours-section .miles-hours__table caption { font-size: 13px; }

@media (forced-colors: active) {
  .miles-vaccines-card,
  .miles-vaccines-handoff,
  .miles-vaccines-chooser { border: 1px solid CanvasText; }
  /* The card's words on the system's colours, not over a photograph. */
  .miles-vaccines-handoff__photo { display: none; }
  .miles-vaccines-handoff::before { content: none; }
}

/* ==========================================================================
   The home page's service field
   ==========================================================================

   It was a native <select>. That was plain with fifteen services and unusable
   with twenty-nine: an unsearchable scroll drawn in whatever chrome the device
   feels like, as the first question anybody is asked on the home page.

   The select is still there, off screen, still the field the form submits.
   This is a control drawn over it: a category first, then the services in it,
   each a row deep enough to put a thumb on - Ollie's note on the first cut was
   that the rows were "awkward to click", and at 14.5px with 10px of padding
   they were.

   Scoped to .home-booking-start, the form class, because the home page has two
   of these cards: the lower one and the hero's, which front-page.php renders
   and miles-booked.js drives. The panel itself lives on <body> (see the
   script), so its rules are scoped to the panel, not to the form.

   The trigger has to out-specify ".miles-ready__card button", the orange
   booking CTA: a bare button inside that card comes out orange.
   ========================================================================== */

.miles-svc { position: relative; }

/* Off screen rather than display:none, so the form still submits it and a
   browser can still report a validation message against it. */
.home-booking-start select.miles-svc__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  min-height: 0;
}

.home-booking-start .miles-svc__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  margin-top: 0;
  padding: 11px 15px;
  font-size: 16px;                      /* the site's type floor: this is read, not a label */
  font-weight: 500;
  text-align: left;
  color: var(--color-text-soft, #536762);
  background: #fff;
  border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3));
  border-radius: 10px;
  transition: border-color 140ms ease;
}

.home-booking-start .miles-svc__trigger:hover { background: #fff; border-color: var(--color-brand, #2c5f5a); }

/* Once answered it is the answer, not a prompt still waiting. */
.home-booking-start .miles-svc__trigger.is-chosen { color: var(--color-text, #1a2e2a); font-weight: 600; }

.home-booking-start .miles-svc__trigger::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.5;
  -webkit-mask: var(--miles-chev-icon) center / contain no-repeat;
  mask: var(--miles-chev-icon) center / contain no-repeat;
}

.home-booking-start .miles-svc__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }

:root {
  --miles-chev-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --miles-back-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
}

/* Absolute, on <body>, in page coordinates: it travels with the page like a
   native dropdown. Fixed meant re-pinning it on every scroll, which read as a
   panel chasing its field. On <body> the card's backdrop-filter and the two
   overflow:hidden ancestors cannot capture or clip it. The script places it. */
.miles-svc__panel {
  position: absolute;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.18));
  border-radius: 14px;
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.45);
}

.miles-svc__panel .miles-svc__search {
  width: 100%;
  min-height: 44px;
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 16px;            /* under 16px and iOS zooms the page on focus */
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.2));
  border-radius: 9px;
}

/* ---- level one: the categories ---- */

.miles-svc__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.miles-svc__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 68px;
  padding: 12px 14px;
  font: inherit;
  text-align: left;
  color: var(--color-brand-dark, #204944);
  background: var(--color-sage-soft, #edf2ed);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.miles-svc__group:hover,
.miles-svc__group:focus-visible {
  background: var(--color-sage, #dce7df);
  border-color: var(--color-border, rgba(44, 95, 90, 0.22));
}

.miles-svc__group-name { font-size: 16px; font-weight: 600; line-height: 1.25; }
/* A label - short, a count - so 13px, the label floor, and on type-scale's list. */
.miles-svc__group-count { font-size: 13px; color: var(--color-text-soft, #536762); }

/* ---- level two: the services in one ---- */

.miles-svc__listview { display: flex; flex-direction: column; min-height: 0; }

.miles-svc__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin: 0 0 2px;
  padding: 6px 8px 6px 4px;
  font: inherit;
  font-size: 16px;                      /* "All services" is read, not a label */
  font-weight: 600;
  color: var(--color-brand, #2c5f5a);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.miles-svc__back::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--miles-back-icon) center / contain no-repeat;
  mask: var(--miles-back-icon) center / contain no-repeat;
}

.miles-svc__back:hover { background: var(--color-sage-soft, #edf2ed); }

.miles-svc__heading {
  margin: 0 0 8px;
  padding: 0 4px;
  font-size: 13px;                      /* an eyebrow: the label floor, and on type-scale's list */
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-soft, #536762);
}

.miles-svc__list {
  display: grid;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A row, not a line of text: tall enough for a thumb, with an edge so it reads
   as a thing to press before it is pressed. */
.miles-svc__panel .miles-svc__option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;                      /* a service name is read */
  font-weight: 500;
  text-align: left;
  color: var(--color-text, #1a2e2a);
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.16));
  border-radius: 10px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.miles-svc__panel .miles-svc__option:hover,
.miles-svc__panel .miles-svc__option:focus-visible {
  background: var(--color-sage-soft, #edf2ed);
  border-color: var(--color-brand, #2c5f5a);
}

.miles-svc__panel .miles-svc__option[aria-selected="true"] {
  background: var(--color-brand-dark, #204944);
  border-color: var(--color-brand-dark, #204944);
  color: #fff;
}

.miles-svc__none { margin: 8px 4px 4px; font-size: 16px; color: var(--color-text-soft, #536762); }  /* a sentence */

@media (max-width: 420px) {
  .miles-svc__groups { grid-template-columns: minmax(0, 1fr); }
  .miles-svc__group { min-height: 56px; flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .home-booking-start .miles-svc__trigger,
  .miles-svc__group,
  .miles-svc__panel .miles-svc__option { transition: none; }
}

@media (forced-colors: active) {
  .home-booking-start .miles-svc__trigger,
  .miles-svc__panel,
  .miles-svc__group,
  .miles-svc__panel .miles-svc__option { border: 1px solid buttontext; }
  .home-booking-start .miles-svc__trigger::after,
  .miles-svc__back::before { background: buttontext; }
}

/* ==========================================================================
   The policy pages
   ==========================================================================

   /privacy-policy/, /cookie-policy/, /terms-of-use/, /refund-policy/,
   /consent/ and /sitemap/, drawn by inc/policies.php from their words files.

   A reading page, not a selling one: one measure of text at the site's floor
   of 16px, serif headings, a contents list that stays in view on a wide
   screen, and the glossary rows the privacy notice is mostly made of. The
   only colour is the site's own. Printing it gives the words and nothing
   else, because a privacy notice is a thing people print.
   ========================================================================== */

.miles-policy { --policy-measure: 68ch; }

.miles-policy__head {
  padding: 28px 0 34px;
  background: var(--color-sage-soft, #edf2ed);
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}

/* The breadcrumb component is written for a dark hero and comes out white;
   on this sage head it was invisible. */
.miles-policy__head .service-location-breadcrumb { margin-bottom: 18px; }
.miles-policy__head .service-location-breadcrumb a { color: var(--color-brand-dark, #204944); }
.miles-policy__head .service-location-breadcrumb li,
.miles-policy__head .service-location-breadcrumb li::before,
.miles-policy__head .service-location-breadcrumb [aria-current] { color: var(--color-text-soft, #536762); }
.miles-policy__head .health-hub-eyebrow { margin: 0 0 8px; }

.miles-policy__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display, Newsreader, Georgia, serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-brand-dark, #204944);
}

.miles-policy__summary {
  margin: 16px 0 0;
  max-width: var(--policy-measure);
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-text, #1a2e2a);
}

.miles-policy__updated {
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--color-text-soft, #536762);
}

/* ---- the two columns ---- */

.miles-policy__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: 36px 0 72px;
}

/* Two columns only when there is a contents list to put in the first one.
   Without the modifier the sitemap, which has no contents, landed its whole
   body in the 240px column meant for the list. */
@media (min-width: 960px) {
  .miles-policy__layout:not(.miles-policy__layout--solo) {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
  }
  .miles-policy__layout { padding-top: 48px; }
  .miles-policy__contents { position: sticky; top: 24px; align-self: start; }
}

.miles-policy__contents {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: var(--radius-panel, 20px);
}

.miles-policy__contents-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-soft, #536762);
}

.miles-policy__contents ol {
  margin: 0;
  padding: 0 0 0 1.4em;
  display: grid;
  gap: 6px;
  font-size: 16px;
  line-height: 1.4;
}

.miles-policy__contents a { color: var(--color-brand-dark, #204944); text-decoration: none; }
.miles-policy__contents a:hover, .miles-policy__contents a:focus-visible { text-decoration: underline; }

/* ---- the words ---- */

.miles-policy__body { max-width: var(--policy-measure); min-width: 0; }

.miles-policy__section { padding: 0 0 36px; }
.miles-policy__section + .miles-policy__section { padding-top: 36px; border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); }

/* An anchor from the contents lands with the heading clear of the top edge. */
.miles-policy__section { scroll-margin-top: 24px; }

.miles-policy__section h2 {
  margin: 0 0 14px;
  font-family: var(--font-display, Newsreader, Georgia, serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-brand-dark, #204944);
}

.miles-policy__body p,
.miles-policy__body li,
.miles-policy__body dd {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text, #1a2e2a);
}

.miles-policy__body p { margin: 0 0 14px; }
.miles-policy__body p:last-child { margin-bottom: 0; }

.miles-policy__list { margin: 0 0 14px; padding-left: 1.3em; display: grid; gap: 6px; }

.miles-policy__note {
  padding: 14px 16px;
  background: var(--color-sage-soft, #edf2ed);
  border-left: 3px solid var(--color-brand, #2c5f5a);
  border-radius: 4px var(--radius-control, 12px) var(--radius-control, 12px) 4px;
}

/* The glossary: a term, and what it means here. On a wide screen the term
   sits in a column of its own so the eye can run down it. */
.miles-policy__glossary { margin: 6px 0 14px; display: grid; gap: 0; }

.miles-policy__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}
.miles-policy__row:last-child { border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); }

.miles-policy__row dt { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-brand-dark, #204944); }
.miles-policy__row dd { margin: 0; }

@media (min-width: 680px) {
  .miles-policy__row { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
}

/* ---- the sitemap's lists ---- */

.miles-policy__map {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 20px;
}

.miles-policy__map a {
  display: block;
  padding: 8px 0;
  font-size: 16px;
  color: var(--color-brand-dark, #204944);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}
.miles-policy__map a:hover, .miles-policy__map a:focus-visible { text-decoration: underline; }

/* ---- the end of the page ---- */

.miles-policy__contact {
  margin: 8px 0 0;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  border-radius: var(--radius-panel, 20px);
}

.miles-policy__contact h2 {
  margin: 0 0 8px;
  font-family: var(--font-display, Newsreader, Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-brand-dark, #204944);
}

.miles-policy__contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px !important; }

.miles-policy__reviewed { margin: 18px 0 0; font-size: 16px; color: var(--color-text-soft, #536762); }

.miles-policy__others {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
  font-size: 16px;
}
.miles-policy__others a { color: var(--color-text-soft, #536762); }

@media print {
  .miles-policy__head { background: none; border: 0; padding: 0 0 12px; }
  .miles-policy__contents, .miles-policy__contact-actions, .miles-policy__others,
  .service-location-breadcrumb { display: none !important; }
  .miles-policy__layout { display: block; padding: 0; }
  .miles-policy__body { max-width: none; }
  .miles-policy__section { break-inside: avoid; }
}

@media (forced-colors: active) {
  .miles-policy__contents, .miles-policy__contact, .miles-policy__note { border: 1px solid buttontext; }
}

/* The line on the details sheet saying who holds the booking (Booked, from
   trybooked.co) and where the privacy notice is. It takes the hint's class
   for its place and spacing, but a hint is 12.5px and this is a sentence a
   person must read before handing over their details: 16px, the floor. */
.miles-modal__body .miles-booked .miles-booked__provider,
.miles-booked .miles-booked__provider { font-size: 16px; line-height: 1.5; }
.miles-booked .miles-booked__provider a { color: var(--color-brand, #2c5f5a); text-decoration: underline; }

/* A link inside a policy's words - to the booking system's own site, or to
   another policy - looks like one: the trybooked.co link read as plain text. */
.miles-policy__body p a, .miles-policy__body dd a, .miles-policy__body dt a, .miles-policy__body li a {
  color: var(--color-brand, #2c5f5a);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.miles-policy__body p a:hover, .miles-policy__body dd a:hover, .miles-policy__body dt a:hover, .miles-policy__body li a:hover { color: var(--color-brand-dark, #204944); }

/* A band's own picture (the signs card on the meningitis page): shown whole
   under the statement and the notes, at the container's width, on a cream
   plate, so a card of words keeps its own ground on the evergreen. It was
   counted as drawn and never printed. */
.miles-dest-band__picture { margin: 48px 0 0; }
.miles-dest-band__plate { overflow: hidden; border-radius: 20px; background: #faf7f2; }
.miles-dest-band__plate img { display: block; width: 100%; height: auto; }
.miles-dest-band__picture--slot .miles-dest-band__plate { padding: 32px; color: var(--color-brand-dark, #143430); }
.miles-dest-band__picture figcaption { margin-top: 12px; color: rgba(255, 255, 255, 0.82); font-size: 16px; }
.miles-dest-band .miles-vaccine-figure__ask { color: #fff; }
@media (max-width: 599px) {
  .miles-dest-band__picture { margin-top: 32px; }
  .miles-dest-band__plate { border-radius: 14px; }
}

/* A link written in the copy (miles_copy_html()) reads as a link. The theme's
   base styles take the underline and the colour off, so from the meningitis
   page on, every link in a row, a grid, a heading or an answer looked like the
   words around it. The country list's treatment, everywhere the copy links. */
.miles-dest-risks__copy a,
.miles-dest-risks__label a,
.miles-vaccine-grid__copy a,
.miles-vaccine-grid__label a,
.miles-dest-head .miles-pf-lead a,
.miles-questions__answer p a {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-color: rgba(44, 95, 90, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.miles-dest-risks__copy a:hover,
.miles-dest-risks__copy a:focus-visible,
.miles-dest-risks__label a:hover,
.miles-dest-risks__label a:focus-visible,
.miles-vaccine-grid__copy a:hover,
.miles-vaccine-grid__copy a:focus-visible,
.miles-vaccine-grid__label a:hover,
.miles-vaccine-grid__label a:focus-visible,
.miles-dest-head .miles-pf-lead a:hover,
.miles-dest-head .miles-pf-lead a:focus-visible,
.miles-questions__answer p a:hover,
.miles-questions__answer p a:focus-visible {
  color: var(--color-brand-dark);
  text-decoration-color: currentColor;
}
/* On the evergreen band the words are white, so a link keeps their colour
   and takes the underline. A section's lead reads links too (HSE and the BMA
   on the work page), and went live looking like the words around it. */
.miles-dest-band__lead a,
.miles-dest-band__note a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.miles-dest-band__lead a:hover,
.miles-dest-band__lead a:focus-visible,
.miles-dest-band__note a:hover,
.miles-dest-band__note a:focus-visible { text-decoration-color: currentColor; }

/* ---- pictures on phones (MOB-1 to MOB-4, Drew, 4 October 2026) ----------
   Measured on a 390px phone: a 1584 by 672 infographic in a split slot came
   out 352 wide and about 150 tall, its labels 4 to 7px high. Cowork now
   makes them 4:3 (896 by 672), which a split slot shows whole at its own
   shape, and this gives them the phone's full width. */

/* A slot's picture element stands aside, so every rule written for its img
   applies as before; the browser still picks the phone's source. */
.miles-vaccine-split__plate picture,
.miles-dest-band__plate picture,
.miles-vaccine-figure__plate picture { display: contents; }

/* Beside the rows on a desktop, a document sits level with the first of
   them: centred in a plate as tall as the rows, a 4:3 infographic (469 by
   352) floated 316px below the pilgrims section's first row. */
@media (min-width: 900px) {
  .miles-vaccine-split__figure--document .miles-vaccine-split__plate { align-items: start; }
}

@media (max-width: 767px) {
  /* Edge to edge: the split plate already reaches the screen's sides, so it
     drops its side padding and side borders; the band's plate leaves the
     page's gutters. The ground and the space above and below stay. */
  .miles-vaccine-split__figure--document .miles-vaccine-split__plate { padding-inline: 0; border-inline: 0; }
  .miles-vaccine-split__figure--document .miles-vaccine-split__plate img { max-width: none; border-radius: 0; box-shadow: none; }
  .miles-dest-band__picture--document .miles-dest-band__plate { margin-inline: calc(-1 * var(--miles-gutter, 18px)); border-radius: 0; }
}

/* Tap to enlarge: a document image in a split or band slot is wrapped, by
   the tools script, in a button that opens it over the page. */
.miles-vaccine-zoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}
.miles-vaccine-split__figure--document .miles-vaccine-zoom { max-width: 560px; }
.miles-vaccine-zoom:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 4px; }
.miles-dest-band .miles-vaccine-zoom:focus-visible { outline-color: #fff; }
.miles-vaccine-zoom__hint { display: none; }
@media (max-width: 767px) {
  .miles-vaccine-split__figure--document .miles-vaccine-zoom { max-width: none; }
  /* as the figure's own caption, so it reads as part of it */
  .miles-vaccine-zoom__hint {
    display: block;
    margin: 0;
    color: var(--color-text);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }
  .miles-dest-band .miles-vaccine-zoom__hint { margin-top: 12px; color: rgba(255, 255, 255, 0.82); }
}

/* The enlarged picture: the main image on a dark ground, fitted to the
   screen and whole; zoomed, twice that and never past its own size, from a
   tap on it (the tools script decides, 12 October 2026). Its auto margins
   centre it while it fits and let it scroll from its top-left corner when it
   does not: centred by the container instead, a picture wider than the
   screen loses its left edge where no scroll can reach. Pinch zoom works
   inside it and the page behind does not scroll. */
.miles-zoom {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  padding: 72px 12px 48px;
  background: rgba(9, 22, 20, 0.97);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pinch-zoom pan-x pan-y;
}
.miles-zoom__img {
  display: block;
  flex: none;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #faf7f2;
  border-radius: 4px;
  cursor: zoom-in;
}
.miles-zoom__img:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.miles-zoom--zoomed .miles-zoom__img { max-width: none; max-height: none; cursor: zoom-out; }
.miles-zoom--nozoom .miles-zoom__img { cursor: default; }
/* What a tap does, under the picture: nothing where there is nothing to gain. */
.miles-zoom__hint {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.miles-zoom--nozoom .miles-zoom__hint { display: none; }
.miles-zoom__close {
  position: fixed;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--color-brand-dark, #204944);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.miles-zoom__close span { font-size: 22px; line-height: 1; }
.miles-zoom__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }


/* ==== The Trip Planner (inc/trip-planner.php, miles-trip-planner.js) ====
   The travel page's second section, under its booking hero (Drew, 9 October
   2026): the world map with the pharmacy on it, one box, the destination
   tiles it rests on until a country is chosen, and the trip card then. Mobile first: the card is one column, the
   vaccines a deck you swipe, the way out pinned to the bottom of the phone.
   Full width at every size, and flush under the header (Drew, 8 October
   2026, from the live page): on a desktop the words are the left of the
   stage and the map the right, so a route from Ewell never crosses them;
   the card is a band, its photograph to the window's left edge.
   Every selector below is written as .miles-plan .miles-plan__x: the service
   pages zero the top margin of every heading, paragraph and list
   (.service-location-page h2, p, ul ...), which outranks a single class, and
   on the live page it flattened every gap the planner set, on a desktop and
   a phone alike (Drew, 8 October 2026: "no spacing or padding at all"). */
.miles-plan { background: #faf7f2; }
/* The service pages' section rhythm gave this one 60px of cream between
   the header and the green ("it jars"): the hero is outside the scale. */
.service-location-page main > .miles-plan { padding-block: 0 !important; }
/* The stage clips nothing: with overflow hidden on it the country list,
   which opens under the box, was cut at the stage's edge and then painted
   under the tiles beneath, so on a phone only its first option showed
   (Drew, 9 October 2026). The map clips itself. */
.miles-plan .miles-plan__stage { position: relative; padding: 36px 0 40px; color: #fff; background: var(--color-brand-dark, #204944); }
.miles-plan .miles-plan__world { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.miles-plan .miles-plan__land { fill: rgba(220, 231, 223, 0.13); }
.miles-plan .miles-plan__home { fill: var(--color-cta, #e8734a); stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.miles-plan .miles-plan__pin { fill: #fff; stroke: var(--color-cta, #e8734a); stroke-width: 3; vector-effect: non-scaling-stroke; }
.miles-plan .miles-plan__route { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.miles-plan .miles-plan__comet { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.08 1.2; stroke-dashoffset: 0.08; opacity: 0; vector-effect: non-scaling-stroke; }
.miles-plan .miles-plan__world[data-plan-lit="still"] .miles-plan__route { stroke-dashoffset: 0; }
.miles-plan .miles-plan__world[data-plan-lit="moving"] .miles-plan__route { animation: miles-plan-draw 1.1s cubic-bezier(0.45, 0.05, 0.25, 1) 0.2s both; }
.miles-plan .miles-plan__world[data-plan-lit="moving"] .miles-plan__comet { opacity: 1; animation: miles-plan-comet 4.5s linear 1.4s infinite; }
.miles-plan .miles-plan__world[data-plan-lit="moving"] .miles-plan__pin { animation: miles-plan-land 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.4) 1.1s both; transform-box: fill-box; transform-origin: center; }
@keyframes miles-plan-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes miles-plan-comet { from { stroke-dashoffset: 0.08; } to { stroke-dashoffset: -1.2; } }
@keyframes miles-plan-land { from { transform: scale(0); } to { transform: scale(1); } }
.miles-plan .miles-plan__stage-inner { position: relative; }
/* .health-hub-eyebrow paints every eyebrow brand green, which on the green
   stage could not be read (Drew): this one is white. */
.miles-plan .miles-plan__eyebrow { color: rgba(255, 255, 255, 0.82) !important; }
.miles-plan .miles-plan__heading { margin: 10px 0 0; color: #fff; font-family: "Newsreader", "Source Serif 4", Georgia, serif; font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; }
.miles-plan .miles-plan__lead { max-width: 620px; margin: 14px 0 0; color: rgba(255, 255, 255, 0.86); font-size: 17px; line-height: 1.6; }
.miles-plan .miles-plan__box { max-width: 620px; margin: 26px 0 0; }
.miles-plan .miles-plan__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.miles-plan .miles-plan__field { position: relative; }
.miles-plan .miles-plan__field-icon { position: absolute; top: 50%; left: 18px; width: 22px; height: 22px; color: var(--color-text-soft); transform: translateY(-50%); pointer-events: none; }
.miles-plan .miles-plan__input { width: 100%; min-height: 62px; margin: 0; padding: 16px 18px 16px 52px; border: 2px solid transparent; border-radius: 16px; background: #fff; color: var(--color-text); font-family: "Inter", sans-serif; font-size: 19px; line-height: 1.3; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); }
.miles-plan .miles-plan__input::placeholder { color: var(--color-text-soft); opacity: 1; }
.miles-plan .miles-plan__input:focus-visible { outline: 3px solid rgba(232, 115, 74, 0.6); outline-offset: 2px; }
.miles-plan .miles-plan__list { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; left: 0; max-height: 320px; margin: 0; padding: 6px; overflow: auto; list-style: none; background: #fff; border-radius: 16px; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28); }
.miles-plan .miles-plan__option { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; color: var(--color-text); font-family: "Inter", sans-serif; font-size: 17px; line-height: 1.3; cursor: pointer; }
.miles-plan .miles-plan__option:hover,
.miles-plan .miles-plan__option[aria-selected="true"] { background: var(--color-sage-soft); }
.miles-plan .miles-plan__option-tag { flex: none; color: var(--color-brand-dark); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.miles-plan .miles-plan__none { padding: 12px 14px; color: var(--color-text-soft); font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.45; }
.miles-plan .miles-plan__quick { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 18px 0 0; }
.miles-plan .miles-plan__quick-label { margin-right: 4px; color: rgba(255, 255, 255, 0.72); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.105em; text-transform: uppercase; }
.miles-plan .miles-plan__quick-link { display: inline-block; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; color: #fff; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease; }
.miles-plan .miles-plan__quick-link:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); }
/* What the section rests on until a country is chosen: on the travel page
   the six destination tiles, their band continuing the stage's green under a
   hairline. The page's own "Browse by destination" section is this now. */
.miles-plan .miles-plan__rest { border-top: 1px solid rgba(255, 255, 255, 0.12); }
/* !important against the stylesheet's own `section { padding: 108px }`: the band's foot is the tiles' rule, as the page's own band had it. */
.miles-plan .miles-dests--in-plan { padding-block: 56px 0 !important; color: #fff; background: var(--color-brand-dark, #204944); }
.miles-plan .miles-dests--in-plan .miles-dest-head { margin-bottom: 44px; }

/* ---- the trip card: a band the width of the window, flush under the stage ---- */
.miles-plan .miles-plan__answer { padding: 0 0 56px; }
.miles-plan .miles-plan__loading { width: min(100% - 48px, 1192px); margin: 28px auto 0; color: var(--color-text-soft); font-size: 17px; }
.miles-plan .miles-plan__card { width: 100%; margin: 0; background: #fff; border-bottom: 1px solid var(--color-border); opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.miles-plan .miles-plan__card[data-plan-in] { opacity: 1; transform: none; }
.miles-plan .miles-plan__media { position: relative; margin: 0; aspect-ratio: 16 / 10; max-height: 480px; overflow: hidden; background: var(--color-brand-dark, #204944); }
.miles-plan .miles-plan__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.miles-plan .miles-plan__media--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32, 73, 68, 0) 55%, rgba(32, 73, 68, 0.55) 100%); pointer-events: none; }
.miles-plan .miles-plan__outline { position: absolute; width: 34%; right: 5%; bottom: 6%; height: auto; overflow: visible; z-index: 1; }
.miles-plan .miles-plan__outline path { fill: rgba(255, 255, 255, 0.08); stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: miles-plan-draw 1.6s cubic-bezier(0.45, 0.05, 0.25, 1) 0.3s both; }
.miles-plan .miles-plan__media--drawn { background: radial-gradient(120% 90% at 20% 0%, #2c5f5a 0%, #204944 55%, #183733 100%); }
.miles-plan .miles-plan__media--drawn .miles-plan__outline { width: 56%; right: auto; bottom: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.miles-plan .miles-plan__media--drawn .miles-plan__outline path { stroke-width: 2; fill: rgba(255, 255, 255, 0.1); }
.miles-plan .miles-plan__media[data-plan-media="type"] { aspect-ratio: auto; min-height: 120px; }
.miles-plan .miles-plan__body { padding: 28px 24px 24px; }
.miles-plan .miles-plan__kicker { margin: 0; color: var(--color-text-soft); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.105em; text-transform: uppercase; }
.miles-plan .miles-plan__name { margin: 6px 0 0; color: var(--color-text); font-family: "Newsreader", "Source Serif 4", Georgia, serif; font-size: clamp(34px, 6vw, 56px); font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.miles-plan .miles-plan__checked,
.miles-plan .miles-plan__lead-in { max-width: 720px; margin: 12px 0 0; color: var(--color-text-soft); font-size: 16px; line-height: 1.55; }
.miles-plan .miles-plan__when { max-width: 720px; margin: 22px 0 0; padding: 18px; background: #faf7f2; border-radius: 16px; }
.miles-plan .miles-plan__when-label { display: block; margin: 0 0 10px; color: var(--color-text); font-family: "Inter", sans-serif; font-size: 16px; font-weight: 700; }
.miles-plan .miles-plan__when-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.miles-plan .miles-plan__date { min-height: 50px; padding: 10px 14px; border: 1px solid var(--color-border-strong); border-radius: 12px; background: #fff; color: var(--color-text); font-family: "Inter", sans-serif; font-size: 16px; }
.miles-plan .miles-plan__date:focus-visible { outline: 3px solid rgba(232, 115, 74, 0.5); outline-offset: 2px; }
.miles-plan .miles-plan__when-hint { color: var(--color-text-soft); font-size: 16px; line-height: 1.4; }
.miles-plan .miles-plan__countdown { margin: 12px 0 0; color: var(--color-brand-dark); font-family: "Inter", sans-serif; font-size: 17px; font-weight: 700; }
.miles-plan .miles-plan__countdown:empty { display: none; }
.miles-plan .miles-plan__trips { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.miles-plan .miles-plan__trips-label { display: block; margin: 0 0 10px; padding: 0; color: var(--color-text-soft); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.105em; text-transform: uppercase; }
/* On a phone the chips are a row you swipe, like the deck beneath, and the
   row fades out at the card's edge so a chip is never simply cut off
   ("San Jose, Arenal and Monteverd", Drew); six of them stacked would push
   the vaccines a screen down. From 768 they wrap. */
.miles-plan .miles-plan__chips { display: flex; gap: 8px; margin: 0 -24px; padding: 2px 48px 6px 24px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.miles-plan .miles-plan__chips::-webkit-scrollbar { display: none; }
.miles-plan .miles-plan__chip { position: relative; flex: none; margin: 0; scroll-snap-align: start; }
.miles-plan .miles-plan__chip input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; }
.miles-plan .miles-plan__chip span { display: inline-block; padding: 11px 18px; border: 1px solid var(--color-border-strong, rgba(44, 95, 90, 0.3)); border-radius: 999px; color: var(--color-text); background: #fff; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.25; white-space: nowrap; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.miles-plan .miles-plan__chip input:checked + span { color: #fff; background: var(--color-brand-dark, #204944); border-color: var(--color-brand-dark, #204944); }
.miles-plan .miles-plan__chip input:focus-visible + span { outline: 3px solid rgba(232, 115, 74, 0.5); outline-offset: 3px; }
.miles-plan .miles-plan__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 640px; margin: 20px 0 0; }
.miles-plan .miles-plan__figure { padding: 14px 12px; background: var(--color-sage-soft, #edf2ed); border-radius: 14px; text-align: center; }
.miles-plan .miles-plan__figure strong { display: block; color: var(--color-brand-dark); font-family: "Newsreader", "Source Serif 4", Georgia, serif; font-size: clamp(28px, 7vw, 40px); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.miles-plan .miles-plan__figure span { display: block; margin: 6px 0 0; color: var(--color-text-soft); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; }
.miles-plan .miles-plan__deck-wrap { position: relative; margin: 22px -24px 0; }
/* The next card shows at the edge, under a fade, so the deck reads as one you swipe. */
.miles-plan .miles-plan__deck-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 10px; width: 40px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.miles-plan .miles-plan__deck { display: flex; gap: 12px; margin: 0; padding: 4px 24px 10px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.miles-plan .miles-plan__deck::-webkit-scrollbar { display: none; }
.miles-plan .miles-plan__vax { flex: 0 0 min(78vw, 300px); display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; scroll-snap-align: start; box-shadow: 0 10px 28px rgba(26, 46, 42, 0.07); }
.miles-plan .miles-plan__vax[data-fit="likely"],
.miles-plan .miles-plan__vax[data-fit="most"] { border-color: var(--color-brand-dark); box-shadow: 0 10px 28px rgba(32, 73, 68, 0.16); }
.miles-plan .miles-plan__vax[data-fit="off"] { opacity: 0.78; }
.miles-plan .miles-plan__vax-badge { margin: 0; color: var(--color-brand-dark); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.miles-plan .miles-plan__vax[data-fit="discuss"] .miles-plan__vax-badge,
.miles-plan .miles-plan__vax[data-fit="some"] .miles-plan__vax-badge,
.miles-plan .miles-plan__vax[data-fit="off"] .miles-plan__vax-badge { color: var(--color-text-soft); }
.miles-plan .miles-plan__vax-name { margin: 0; color: var(--color-text); font-family: "Newsreader", "Source Serif 4", Georgia, serif; font-size: 23px; font-weight: 500; line-height: 1.15; }
.miles-plan .miles-plan__vax-note { flex: 1; margin: 2px 0 0; color: var(--color-text-soft); font-size: 16px; line-height: 1.5; }
.miles-plan .miles-plan__vax-course { margin: 6px 0 0; color: var(--color-text-soft); font-size: 16px; }
.miles-plan .miles-plan__vax-price { margin: 0; color: var(--color-text); font-family: "Inter", sans-serif; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.miles-plan .miles-plan__vax-start { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--color-sage-soft); color: var(--color-brand-dark); font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.35; }
.miles-plan .miles-plan__vax[data-plan-late] .miles-plan__vax-start { background: rgba(232, 115, 74, 0.12); color: #9a3f1d; }
.miles-plan .miles-plan__swipe { margin: 4px 0 0 24px; color: var(--color-text-soft); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.miles-plan .miles-plan__also { max-width: 720px; margin: 14px 0 0; color: var(--color-text-soft); font-size: 16px; line-height: 1.5; }
/* The country's own facts (certificate, malaria, notices) are the card's
   aside: white on green, under the photograph on a desktop, where the
   column had been 900px of flat green (Drew), and the card's foot on a
   phone. */
.miles-plan .miles-plan__aside { padding: 28px 24px 32px; color: #fff; background: var(--color-brand-dark, #204944); }
.miles-plan .miles-plan__aside-kicker { margin: 0; color: rgba(255, 255, 255, 0.72); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.105em; text-transform: uppercase; }
.miles-plan .miles-plan__facts { max-width: 720px; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.miles-plan .miles-plan__facts li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 16px; line-height: 1.5; }
.miles-plan .miles-plan__glyph { flex: none; width: 24px; height: 24px; margin-top: 1px; color: rgba(255, 255, 255, 0.8); }
.miles-plan .miles-plan__actions { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 22px -8px 0; padding: 12px 8px; background: rgba(255, 255, 255, 0.92); border-radius: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 -8px 30px rgba(26, 46, 42, 0.08); }
/* Two buttons, the orange one leading: "Book now" as bold text beside it got
   lost (Drew). The secondary's own border is reset to transparent by a later
   .health-hub-button rule in this file, so it is given here. */
.miles-plan .miles-plan__go,
.miles-plan .miles-plan__book { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.miles-plan .miles-plan__book { color: var(--color-brand-dark, #204944); background: #fff; border-color: rgba(44, 95, 90, 0.4); }
.miles-plan .miles-plan__book:hover,
.miles-plan .miles-plan__book:focus-visible { color: #fff; background: var(--color-brand-dark, #204944); border-color: var(--color-brand-dark, #204944); }
.miles-plan .miles-plan__note { max-width: 720px; margin: 16px 0 0; color: var(--color-text-soft); font-size: 16px; line-height: 1.5; }
.miles-plan .miles-plan__more { margin: 14px 0 0; }
.miles-plan .miles-plan__more-button { padding: 0; border: 0; background: none; color: var(--color-brand-dark); font: inherit; font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (min-width: 768px) {
  .miles-plan .miles-plan__stage { padding: 48px 0 56px; }
  .miles-plan .miles-plan__body { padding: 36px clamp(24px, 4.2vw, 80px) 40px; }
  .miles-plan .miles-plan__aside { padding: 32px clamp(24px, 4.2vw, 80px) 40px; }
  .miles-plan .miles-plan__chips { flex-wrap: wrap; margin: 0; padding: 2px 0 6px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .miles-plan .miles-plan__chip { flex: 0 1 auto; max-width: 100%; }
  .miles-plan .miles-plan__chip span { white-space: normal; }
  .miles-plan .miles-plan__deck-wrap { margin: 24px 0 0; }
  .miles-plan .miles-plan__deck-wrap::after { display: none; }
  .miles-plan .miles-plan__deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 0; overflow: visible; }
  .miles-plan .miles-plan__vax { flex: none; }
  .miles-plan .miles-plan__swipe { display: none; }
  .miles-plan .miles-plan__actions { position: static; margin: 26px 0 0; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .miles-plan .miles-plan__go,
  .miles-plan .miles-plan__book { flex: none; }
}
@media (min-width: 1024px) {
  /* The stage is the window's width: the words in the left column, the map
     the right 58%, so a route from Ewell to the Americas (west of it) runs
     beside the words rather than through them (Drew, 8 October 2026). */
  .miles-plan .miles-plan__stage { padding: 48px 0 64px; }
  .miles-plan .miles-plan__stage-inner { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); width: auto; max-width: none; margin-inline: 0; padding-inline: clamp(24px, 4.2vw, 80px); }
  .miles-plan .miles-plan__stage-inner > * { grid-column: 1; min-width: 0; }
  .miles-plan .miles-plan__world { top: 50%; right: 0; bottom: auto; left: auto; width: 58%; height: auto; max-height: 100%; aspect-ratio: 1000 / 502; transform: translateY(-50%); }
  .miles-plan .miles-plan__home { r: 7; }
  .miles-plan .miles-plan__pin { r: 8; }
  /* The picture and the facts are the left column, the trip the right:
     the picture tall (4:5), the facts beneath it, and the column's green
     ends where they do rather than running on beside the trip. */
  .miles-plan .miles-plan__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; align-items: start; background: linear-gradient(90deg, var(--color-brand-dark, #204944) 0 41.6667%, #fff 41.6667%); }
  .miles-plan .miles-plan__media { grid-column: 1; grid-row: 1; aspect-ratio: auto; max-height: none; height: clamp(560px, 52vw, 820px); }
  .miles-plan .miles-plan__media--drawn .miles-plan__outline { width: 62%; }
  .miles-plan .miles-plan__aside { grid-column: 1; grid-row: 2; padding: 32px clamp(24px, 4.2vw, 80px) 48px; }
  .miles-plan .miles-plan__body { grid-column: 2; grid-row: 1 / 3; padding: 44px clamp(24px, 4.2vw, 80px) 48px 56px; }
  .miles-plan .miles-plan__figures { gap: 14px; }
}
@media (max-width: 1023px) {
  /* Below a desktop the map sits behind the words, so the top of the stage
     is near-solid and the map shows through around the box and below it. */
  .miles-plan .miles-plan__stage::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(32, 73, 68, 0.94) 0%, rgba(32, 73, 68, 0.72) 42%, rgba(32, 73, 68, 0.12) 100%); pointer-events: none; }
  .miles-plan .miles-plan__stage-inner { z-index: 2; width: calc(100% - 48px); margin-inline: auto; }
  .miles-plan .miles-plan__route { stroke: rgba(255, 255, 255, 0.5); }
}
@media (max-width: 767px) {
  /* A phone: the question, the box, then the chips where a caller has them;
     the words about the box give way, since the question and the box's
     placeholder say it. */
  .miles-plan .miles-plan__stage-inner { display: flex; flex-direction: column; }
  .miles-plan .miles-plan__box { order: 1; margin-top: 18px; }
  .miles-plan .miles-plan__lead { display: none; }
  .miles-plan .miles-plan__quick { order: 3; margin-top: 24px; }
  .miles-plan .miles-dests--in-plan { padding-top: 40px !important; }
  .miles-plan .miles-dests--in-plan .miles-dest-head { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .miles-plan .miles-plan__card { opacity: 1; transform: none; transition: none; }
  .miles-plan .miles-plan__outline path { stroke-dashoffset: 0; animation: none; }
  .miles-plan .miles-plan__world[data-plan-lit] .miles-plan__route { stroke-dashoffset: 0; animation: none; }
  .miles-plan .miles-plan__world[data-plan-lit] .miles-plan__comet { animation: none; opacity: 0; }
  .miles-plan .miles-plan__world[data-plan-lit] .miles-plan__pin { animation: none; }
}

/* ==== The Travel Clinic page's hero and its timings row (page-travel-vaccinations-epsom-kt19.php) ====
   The hero is for the reader who came to book (Drew, 9 October 2026): the
   page's name and one line, the booking card the private flu jab page's hero
   carries (inc/ready.php), locked to the Travel Clinic appointment, and a
   second button down to the planner for the reader who came to plan. The
   vaccine pages scope the two-column hero to their body class, so the travel
   page's hero carries the same grid under its own. */
@media (min-width: 901px) {
  .miles-travel-hero .service-location-breadcrumb { margin-bottom: 36px; }
  .miles-travel-hero .service-location-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 32px 64px; align-items: start; }
  .miles-travel-hero .service-location-hero__content { max-width: 600px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .miles-travel-hero .service-location-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 32px 40px; }
}
/* Two buttons in a row, the note under both: the page's own rule stacks the
   call to action in a column at fit-content width. */
.epsom-location-page .miles-travel-hero .service-location-hero__cta { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; max-width: 600px; gap: 12px 14px; align-items: center; }
.epsom-location-page .miles-travel-hero .service-location-hero__cta .service-location-member-note { flex: 1 1 100%; margin: 6px 0 0; }
/* The row's label is a label: the page sets every h3 in the serif. */
.service-location-page h3.miles-consult__timings-label { margin: 0 0 22px; color: var(--color-brand, #2c5f5a) !important; font-family: "Inter", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.105em !important; line-height: 1.3 !important; text-transform: uppercase; }
.miles-travel-hero .miles-travel-hero__plan { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.55); }
.miles-travel-hero .miles-travel-hero__plan:hover,
.miles-travel-hero .miles-travel-hero__plan:focus-visible { color: var(--color-brand-dark, #204944); background: #fff; border-color: #fff; }
@media (max-width: 767px) {
  .miles-travel-hero .service-location-breadcrumb li[aria-current="page"] { display: none; }
  .miles-travel-hero .service-location-hero__cta .health-hub-button { flex: 1 1 auto; justify-content: center; }
  /* The page sets this note to 11px on a phone; 16px is the floor for words to read. */
  .epsom-location-page .miles-travel-hero .service-location-hero__cta .service-location-member-note { font-size: 16px; }
}

/* How far ahead to book: each vaccine page's timing line, under the three
   columns of "Prepare for your trip". They were the third column, ten
   paragraphs deep against two short lists ("far too long and completely
   ruined the UI", Drew, 9 October 2026). The words and their links are the
   same fields; the name over each is a label, not a link. */
.miles-consult__timings { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); }
.miles-consult__timing-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 40px; margin: 0; padding: 0; list-style: none; }
.miles-consult__timing { min-width: 0; }
.miles-consult__timing-name { display: block; margin: 0 0 6px; color: var(--color-text, #1a2e2a); font-family: "Inter", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; }
.epsom-location-page .miles-consult__timing p { margin: 0; color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.55; }
.epsom-location-page .miles-consult__timing p a { color: var(--color-brand); text-decoration: underline; text-decoration-color: rgba(44, 95, 90, 0.35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.epsom-location-page .miles-consult__timing p a:hover,
.epsom-location-page .miles-consult__timing p a:focus-visible { text-decoration-color: currentColor; }
@media (max-width: 999px) {
  .miles-consult__timing-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .miles-consult__timings { margin-top: 32px; padding-top: 28px; }
  .miles-consult__timing-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ==== The Travel Clinic in Surrey (page 29, SY-3, 10 October 2026) ========
   A short page for people coming from elsewhere in Surrey: the photograph
   hero, what the trip is for as one row of cards on cream, the way here
   (the getting-here component, open), and where to read on, on evergreen.
   Every selector carries .miles-surrey: the service pages zero the top
   margin of every heading and paragraph at a specificity one class loses
   to, as the Trip Planner found. */
.miles-surrey .miles-surrey__head { display: grid; gap: 10px; max-width: 760px; margin-bottom: 36px; }
.miles-surrey .miles-surrey__head h2 { margin: 0; font-size: clamp(38px, 4.2vw, 58px); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
/* The areas line is the page's reason for being, so unlike the hero notes it
   stands on a phone too. */
.miles-surrey .miles-surrey-hero .miles-surrey-hero__areas { max-width: 60ch; margin: 18px 0 26px; color: #dbe8dd; font-size: 17px; font-weight: 500; line-height: 1.6; }
.miles-surrey .miles-surrey__lead { margin: 4px 0 0; color: var(--color-text-soft, #536762); font-size: 18px; line-height: 1.55; }

/* White between the hero and the cream of getting here, so the page keeps
   alternating; the cards take the cream. */
.miles-surrey .miles-surrey-why { background: #fff; }
.miles-surrey .miles-surrey-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.miles-surrey .miles-surrey-why__card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; background: var(--color-background, #faf7f2); border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); border-radius: 14px; }
.miles-surrey .miles-surrey-why__title { margin: 0; font-size: 23px; line-height: 1.2; }
.miles-surrey .miles-surrey-why__title a { color: var(--color-brand-dark, #204944); text-decoration: none; }
.miles-surrey .miles-surrey-why__title a:hover,
.miles-surrey .miles-surrey-why__title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.miles-surrey .miles-surrey-why__line { margin: 0; color: var(--color-text, #1a2e2a); font-size: 16px; line-height: 1.55; }
.miles-surrey .miles-surrey-why__price { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--color-border, rgba(44, 95, 90, 0.14)); color: var(--color-text-soft, #536762); font-size: 16px; line-height: 1.4; }
.miles-surrey .miles-surrey-why__price strong { color: var(--color-brand-dark, #204944); font-size: 20px; font-weight: 700; margin-right: 4px; }
.miles-surrey .miles-surrey-why__cred { margin: 0; font-size: 16px; }
.miles-surrey .miles-surrey-why__cred a { color: var(--color-brand, #2c5f5a); font-weight: 600; }

.miles-surrey .miles-surrey-next { background: var(--color-brand-dark, #204944); color: #fff; }
.miles-surrey .miles-surrey-next .health-hub-eyebrow { color: #cddfd2 !important; }
.miles-surrey .miles-surrey-next h2 { color: #fff; }
.miles-surrey .miles-surrey-next__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; }
.miles-surrey .miles-surrey-next__item { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.05); }
.miles-surrey a.miles-surrey-next__item:hover,
.miles-surrey a.miles-surrey-next__item:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); }
.miles-surrey .miles-surrey-next__name { font-family: "Newsreader", "Source Serif 4", Georgia, serif; font-size: 23px; line-height: 1.2; font-weight: 500; }
.miles-surrey a.miles-surrey-next__item .miles-surrey-next__name::after { content: " \2192"; }
.miles-surrey .miles-surrey-next__line { color: rgba(255, 255, 255, 0.86); font-size: 16px; line-height: 1.5; }
.miles-surrey .miles-surrey-next__line strong { color: #fff; }
.miles-surrey .miles-surrey-next__guides { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.miles-surrey .miles-surrey-next__guides a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; }
.miles-surrey .miles-surrey-next__guides a:hover,
.miles-surrey .miles-surrey-next__guides a:focus-visible { background: #fff; color: var(--color-brand-dark, #204944); }
.miles-surrey .miles-surrey-next__book { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 32px 0 0; }
.miles-surrey .miles-surrey-next__call { color: #fff; font-size: 17px; font-weight: 600; text-underline-offset: 4px; }

@media (max-width: 1180px) {
  .miles-surrey .miles-surrey-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miles-surrey .miles-surrey-next__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .miles-surrey .miles-surrey-next__item--guides { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .miles-surrey .miles-surrey-why__grid,
  .miles-surrey .miles-surrey-next__grid { grid-template-columns: minmax(0, 1fr); }
  .miles-surrey .miles-surrey__lead { font-size: 17px; }
}

/* The home page's travel tile: the Surrey line under its words (SY-4). */
.miles-ways .miles-ways__surrey a { font-weight: 600; }

/* ------------------------------------------------------------------------
 * A service page's own sections (inc/service-sections.php): the vaccine
 * pages' section, split and slot vocabulary, with the words set to read.
 * The emergency contraception page is the first (Drew's EC brief, 10
 * October 2026).
 * ------------------------------------------------------------------------ */
.miles-service-section .miles-service-section__para {
  max-width: 62ch;
  margin: 0 0 16px;
  color: var(--color-text, #1a2e2a);
  font-size: 18px;
  line-height: 1.6;
}
.miles-service-section .miles-service-section__para:last-child { margin-bottom: 0; }
.miles-service-section .miles-service-section__note,
.miles-service-section .miles-service-section__more {
  max-width: 62ch;
  margin: 24px 0 0;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.6;
}
.miles-service-section .miles-service-section__more { color: #3d5550; }
.miles-service-section .miles-service-section__more a,
.miles-service-section .miles-service-section__para a {
  color: var(--color-brand-dark, #204944);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.miles-service-reviewer { padding: 0 0 56px !important; }
.miles-service-reviewer .miles-service-reviewer__line {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(26, 46, 42, 0.12);
  color: #3d5550;
  font-size: 15px;
  line-height: 1.5;
}
.miles-service-reviewer .miles-service-reviewer__line a { color: var(--color-brand-dark, #204944); font-weight: 600; }
/* Questions signed in words, without the answerer's photograph. */
.miles-questions__by--named { padding-left: 0; }
@media (max-width: 767px) {
  .miles-service-section .miles-service-section__para { font-size: 17px; }
}

/* A service page's split reaches the window's edge as a vaccine page's does:
   the container's side margin, as .miles-vaccine states it (EC-6). */
.miles-service-section { --miles-gutter: max(24px, calc((100vw - 1192px) / 2)); }
@media (max-width: 767px) {
  .miles-service-section { --miles-gutter: 18px; }
}


/* ------------------------------------------------------------------------
 * The vitamin B12 injection page's two additions to a service page's own
 * sections (Drew's B12 brief, 11 October 2026), each for any page whose
 * file asks: "In short", the vaccine pages' panel with the facts alone, a
 * label beside each line from 600; and the price cards, the ear page's
 * prices as cards, each with its button down to the booking. One card (the
 * single injection, until the courses have prices) keeps a card's width.
 * ------------------------------------------------------------------------ */
.miles-service-short { padding-bottom: 0; }
/* The statement beside the facts, as the vaccine pages set them; only the
   panel's bottom edge changes, so the first section's own padding follows. */

/* The paragraphs of a section as one block, 16px apart, and the body's
   grid gap (48px, a vaccine page's between a list and its notices) closed
   to 32px: three sentences had read as three sections (Drew, 12 October 2026). */
.miles-service-section .miles-service-section__body { gap: 32px 80px; }
.miles-service-section .miles-service-section__copy { max-width: 62ch; }
.miles-service-section .miles-service-section__copy .miles-service-section__para { margin: 0 0 16px; }
.miles-service-section .miles-service-section__copy .miles-service-section__para:last-child { margin-bottom: 0; }
.miles-service-section .miles-service-section__note,
.miles-service-section .miles-service-section__more { margin-top: 0; }

/* A service section on the evergreen band: the vaccine pages' band, with
   its margins restated here because the service pages zero the top margin
   of every paragraph at a specificity one class loses to. */
.service-location-page .miles-service-band .miles-dest-band__title { margin: 0 0 22px; }
.service-location-page .miles-service-band .miles-dest-band__lead { margin: 0; }
.service-location-page .miles-service-band .miles-dest-band__note { margin-top: 22px; }
.service-location-page .miles-service-band .miles-dest-band__figure--certs .miles-dest-band__note { margin-top: 0; }
.service-location-page .miles-service-band .miles-dest-band__cta { margin-top: 28px; }
.service-location-page .miles-service-band .miles-dest-band__picture { margin: 48px 0 0; }

.miles-service-section .miles-service-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.miles-service-section .miles-service-prices--1 { grid-template-columns: minmax(0, 400px); }
.miles-service-section .miles-service-prices__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 26px 26px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(44, 95, 90, 0.14));
}
.miles-service-section .miles-service-prices__name {
  margin: 0;
  color: var(--color-brand-dark, #204944);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.miles-service-section .miles-service-prices__price {
  margin: 10px 0 0;
  color: var(--color-text, #1a2e2a);
  font-family: "Newsreader", "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.miles-service-section .miles-service-prices__each {
  margin: 6px 0 0;
  color: #3d5550;
  font-size: 15px;
  line-height: 1.4;
}
.miles-service-section .miles-service-prices__copy {
  flex: 1 0 auto;
  margin: 16px 0 22px;
  color: var(--color-text, #1a2e2a);
  font-size: 16px;
  line-height: 1.55;
}
.miles-service-section .miles-service-prices__book { align-self: flex-start; }
.miles-service-section .miles-service-section__rows-heading {
  margin: 0 0 -24px;
  color: var(--color-text, #1a2e2a);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
/* A service section's rows keep their place in its words: the vaccine pages
   lift a risks list to the first row, which put B12's "Why B12 runs low"
   above the paragraph and the heading that introduce it. */
.miles-service-section .miles-service-section__body > .miles-dest-risks__list { grid-row: auto; }
/* One card (the single injection) sits beside its lines rather than alone
   in a row built for three. */
@media (min-width: 900px) {
  .miles-service-section--prices .miles-service-section__body:has(> .miles-service-prices--1) {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    align-items: center;
    gap: 0 56px;
  }
  .miles-service-section--prices .miles-service-section__body:has(> .miles-service-prices--1) > .miles-service-prices { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .miles-service-section--prices .miles-service-section__body:has(> .miles-service-prices--1) > :not(.miles-service-prices) { grid-column: 2; }
}
@media (max-width: 599px) {
  .miles-service-section .miles-service-prices,
  .miles-service-section .miles-service-prices--1 { grid-template-columns: minmax(0, 1fr); }
  .miles-service-section .miles-service-prices__card { padding: 24px 20px 22px; }
  .miles-service-section .miles-service-prices__price { font-size: 38px; }
  .miles-service-section .miles-service-prices__book { align-self: stretch; text-align: center; }
}