/* R5 phone design (27 Sep 2026, DECISIONS 65, rolled out from the /areas/manchester/ pilot).
   Phones only (640px and below). Desktop and tablet are unchanged: outside the phone media queries this
   file only hides the phone pickup entry.
   - The header stays near-black at the top and when scrolled, so Safari tints the status bar to match.
   - R5's own photo runs down from the header and fades into a near-black panel that carries the tag,
     the headline and one "Pickup location" entry (the booking form's own label and placeholder), which
     opens the existing booking flow. Call, WhatsApp and Get a quote stay in the docked bar.
   - Type is EB Garamond for headings and Jost for text, in place of Playfair Display and Sora.
   - Headings and intros are left-aligned, buttons and fields have 4px corners, and the area boards
     become ivory cards.
   Words are unchanged. This file is linked after each page's own <style>, so equal-specificity rules
   here win; the H1/H3 rules repeat the html body #main prefix because css/r5-a11y.css sets them with
   !important. */

.r5-hero-pickup, .r5-hero-title .r5-sp { display: none; }

@media (max-width: 640px) {
  :root {
    --r5-serif: 'EB Garamond', Georgia, serif;
    --r5-sans: 'Jost', -apple-system, sans-serif;
    --r5-control-font: 'Jost', -apple-system, sans-serif;
  }
  .m-menu nav a small, .r5-trust-strip { font-family: var(--r5-sans); }

  /* Header and page chrome */
  html { background-color: #0e0d0c; }
  body.r5-page-no-hero { padding-top: 0 !important; }
  html body #r5-header { background: #0e0d0c !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html body #r5-header .r5-logo-img { height: 30px !important; filter: brightness(0) invert(1) !important; }
  html body #r5-header .m-burger { color: #fff; }
  .m-actionbar a.primary { border-radius: 4px; }

  /* Hero: photo under the header, fading into a near-black title panel */
  .r5-hero { display: block; min-height: 0 !important; margin-top: 0; background: #0e0d0c; }
  .r5-hero-bg { position: relative; inset: auto; height: clamp(260px, min(52svh, 100svh - 400px), 460px); }
  .r5-hero-bg img { object-position: 50% 62%; }
  .r5-hero-bg::after { background: linear-gradient(to bottom, #0e0d0c 0, rgba(14, 13, 12, 0) 72px, rgba(14, 13, 12, 0) 62%, rgba(14, 13, 12, .85) 88%, #0e0d0c 100%); }
  .r5-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; max-width: none; margin-top: -96px; padding: 0 24px 44px; text-align: left; }
  .r5-hero-content > .r5-hero-tag { order: 0; }
  .r5-hero-title { order: 1; }
  .r5-hero-pickup { order: 2; }
  .r5-hero-sub { order: 3; }
  .r5-hero-title br { display: none; }
  .r5-hero-title .r5-sp { display: inline; }
  .r5-hero-tag { margin: 0 0 10px; font-size: 13px; letter-spacing: .04em; text-transform: none; color: rgba(255, 255, 255, .62); }
  html body #main .r5-hero-title, html body #main-content .r5-hero-title { margin: 0 0 20px; font-size: 30px !important; line-height: 1.15 !important; color: #fff; text-wrap: balance; }
  html body #main .r5-hero-content > .r5-hero-title:last-child, html body #main-content .r5-hero-content > .r5-hero-title:last-child { margin-bottom: 0; }
  .r5-hero-sub { max-width: 36ch; margin: 18px 0 0; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .7); }
  .r5-hero-actions { display: none; }
  .r5-hero-pickup { display: block; width: 100%; min-height: 64px; margin: 0; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .55); border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .r5-hero-pickup:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  .r5-hero-pickup-label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--r5-gold-bright); }
  .r5-hero-pickup-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; color: rgba(255, 255, 255, .62); }
  .r5-hero-pickup-field::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg); }

  /* Custom heroes (areas, about, fleet, services): the same layout, applied through r5-ph-* classes on the page's own markup.
     r5-ph = section, -bg = photo wrapper, -content = text block, -wrap = inner wrappers that step aside on phones,
     -tag / -title / -sub / -actions = the hero's own tag, H1, intro and buttons.
     Every rule starts `html body .r5-ph` so it outranks the pages' own mobile rules (r5-mobile.css sets
     `.home-hero .home-hero-actions` and similar with !important). */
  html body .r5-ph.r5-ph { display: block !important; min-height: 0 !important; height: auto !important; margin-top: 0 !important; padding: 0 !important; background: #0e0d0c !important; overflow: hidden; }
  html body .r5-ph .r5-ph-bg { position: relative !important; inset: auto !important; height: clamp(260px, min(52svh, 100svh - 400px), 460px) !important; }
  html body .r5-ph .r5-ph-bg img, html body .r5-ph .r5-ph-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; animation: none !important; transform: none !important; }
  html body .r5-ph .r5-ph-bg video { display: none !important; }
  html body .r5-ph .r5-ph-bg::before { content: none !important; }
  html body .r5-ph .r5-ph-bg::after { content: "" !important; position: absolute; inset: 0; z-index: 1; opacity: 1 !important; background: linear-gradient(to bottom, #0e0d0c 0, rgba(14, 13, 12, 0) 72px, rgba(14, 13, 12, 0) 62%, rgba(14, 13, 12, .85) 88%, #0e0d0c 100%) !important; }
  html body .r5-ph .r5-ph-content { position: relative !important; inset: auto !important; z-index: 2; display: flex !important; flex-direction: column; width: auto !important; max-width: none !important; margin: -96px 0 0 !important; padding: 0 24px 44px !important; transform: none !important; text-align: left !important; color: #fff; }
  html body .r5-ph .r5-ph-wrap { display: contents !important; }
  html body .r5-ph .r5-ph-tag { order: 0; margin: 0 0 10px !important; font-family: var(--r5-sans) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .04em !important; text-transform: none !important; color: rgba(255, 255, 255, .62) !important; }
  html body .r5-ph .r5-ph-title, html body #main .r5-ph .r5-ph-title, html body #main-content .r5-ph .r5-ph-title { order: 1; max-width: none !important; margin: 0 0 20px !important; font-family: var(--r5-serif) !important; font-size: 30px !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: 0 !important; line-height: 1.15 !important; text-align: left !important; text-wrap: balance; color: #fff !important; }
  html body .r5-ph .r5-ph-title em, html body .r5-ph .r5-ph-title i { font-style: normal !important; font-weight: inherit !important; color: inherit !important; }
  html body .r5-ph .r5-ph-title br { display: none; }
  html body .r5-ph .r5-hero-pickup { order: 2; }
  html body .r5-ph .r5-ph-sub { order: 3; max-width: 36ch !important; margin: 18px 0 0 !important; font-family: var(--r5-sans) !important; font-size: 15px !important; line-height: 1.7 !important; text-align: left !important; color: rgba(255, 255, 255, .7) !important; }
  .r5-ph-actions, .r5-ph-hide, html body .r5-ph .r5-ph-actions, html body .r5-ph .r5-ph-hide { display: none !important; }
  html body .r5-ph .r5-ph-cta-wrap { order: 2; display: block !important; margin: 4px 0 0 !important; }
  html body .r5-ph .r5-ph-cta { display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 52px; box-sizing: border-box; border-radius: 4px !important; }
  html body .r5-ph-title [class*="hero-eyebrow"] { display: block; margin: 0 0 10px; font-size: 13px !important; letter-spacing: .04em !important; color: rgba(255, 255, 255, .62); }
  html body .r5-ph-title .hero-sep { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html body .r5-ph .r5-ph-stats { order: 4; display: flex !important; flex-wrap: wrap; gap: 12px 26px !important; margin: 22px 0 0 !important; }
  html body .r5-ph .r5-ph-stats > * { font-family: var(--r5-sans) !important; font-size: 11px !important; letter-spacing: .14em !important; color: rgba(255, 255, 255, .55) !important; }
  html body .r5-ph .r5-ph-stats b, html body .r5-ph .r5-ph-stats strong { display: block; margin-bottom: 2px; font-family: var(--r5-serif) !important; font-size: 20px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #fff !important; }
  .r5-hero-content > .r5-ph-proof, html body .r5-ph .r5-ph-proof, .r5-hero-content > .r5-proof-strip, .r5-hero-content > .r5-proof { order: 5; margin: 18px 0 0 !important; }

  /* Heroes without a pickup entry (journal articles, the privacy policy) carry long titles, so their photo is shorter on
     short phones; with the cookie choice open, the whole headline stays above it. The 404 page drops its half-screen
     minimum height on phones for the same reason. */
  html body .r5-hero:not(:has(.r5-hero-pickup)) .r5-hero-bg { height: clamp(200px, min(40svh, 100svh - 460px), 360px); }
  html body.r5-page-no-hero main > section.r5-section:first-of-type { min-height: 0 !important; padding-top: 40px; padding-bottom: 56px; }
  html body.r5-page-no-hero #main .r5-headline { font-size: 30px !important; }

  /* Below the hero: left-aligned headings and intros, square-cornered controls */
  .r5-intro .r5-editorial-block, .r5-section-header { text-align: left; }
  .r5-intro .r5-editorial-block > *, .r5-section-header > * { margin-left: 0; margin-right: 0; }
  .r5-section-cream + .r5-booking { padding-top: 8px; }
  .r5-btn-primary, .r5-btn-ghost, .r5-btn-secondary, .r5-final-actions a { border-radius: 4px; }
  .r5-booking-quick .r5-btn-primary { width: 100%; max-width: none; }
  .r5-booking .r5-booking-quick .r5-form-group input, .r5-booking .r5-booking-quick .r5-form-group select { border-radius: 4px; }

  /* Area boards: every board kind becomes one ivory card on phones (the pilot's Manchester treatment) */
  html body .ab { padding: 4px 22px 8px; border: 1px solid var(--r5-border); border-radius: 2px; background: #fff; box-shadow: none; color: var(--r5-dark); overflow: visible; transform: none; }
  html body .ab::before, html body .ab::after { content: none; }
  html body .ab .ab-in, html body .ab .ab-sheet { padding: 0; border: 0; border-radius: 0; outline: 0; background: none; box-shadow: none; transform: none; color: inherit; }
  html body .ab .ab-sheet::before, html body .ab .ab-sheet::after { content: none; }
  html body .ab .ab-head { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 2px; margin: 0; padding: 20px 0 14px; border: 0; border-bottom: 1px solid var(--r5-dark); background: none; font-family: var(--r5-sans); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-align: left; text-transform: uppercase; text-shadow: none; color: var(--r5-gold); }
  html body .ab .ab-head span { padding: 0; border-radius: 0; background: none; color: inherit; letter-spacing: inherit; }
  html body .ab .ab-rows { display: block; columns: auto; margin: 0; padding: 0; }
  html body .ab .ab-rows::before { content: none; }
  html body .ab .ab-rows li { padding: 16px 0; border: 0; border-bottom: 1px solid var(--r5-border); background: none; text-align: left; }
  html body .ab .ab-rows li:last-child { border-bottom: 0; }
  html body #main .ab .ab-rows li h3 { display: block; margin: 0; padding: 0; background: none; box-shadow: none; clip-path: none; font-family: var(--r5-serif); font-size: 18px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.35 !important; text-align: left; text-transform: none; text-shadow: none; color: var(--r5-dark); }
  html body #main .ab .ab-rows li h3::after { content: none; }
  html body #main .ab .ab-rows li h3.fold-linked { display: flex; align-items: center; justify-content: space-between; }
  html body .ab .ab-rows h3 a { color: inherit; }
  html body .ab .ab-meta { width: auto; min-width: 22px; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--r5-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: inherit; text-align: left; text-shadow: none; color: var(--r5-gold); }
  html body .ab p { font-size: 15px; line-height: 1.7; color: #5f5b55; }
  html body .ab p a { color: var(--r5-dark); }
  html body .ab .fold-chev { width: 8px; height: 8px; border-width: 0 1px 1px 0; opacity: 1; color: var(--r5-gold); }
  html body .ab .ab-rows.fold-on li { grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: center; padding-top: 6px; padding-bottom: 6px; }
  html body .ab .ab-rows.fold-on .fold-body { padding-bottom: 12px; }
  html body .ab .ab-rows.fold-on li:has(h3.fold-linked) { padding-top: 10px; padding-bottom: 10px; }
  html body .ab .ab-rows.fold-on h3.fold-linked a { padding-block: 10px; margin-block: -10px; }
  html body .ab .ab-rows.fold-on .ab-meta { min-width: 22px; text-align: left; }
  html body .ab-flap .ab-rows.fold-on .ab-meta { min-width: 56px; }

  /* Cookie choice (DECISIONS 67): the panel Louis approved on the Manchester pilot (item 65), on every page. One full-width
     panel in the dock's colour that runs behind the dock, square-cornered buttons, the phone fonts. Text and buttons unchanged. */
  html body .r5-consent-banner { font-family: var(--r5-sans); left: 0; right: 0; bottom: 0 !important; z-index: 8999; max-width: none; margin: 0; padding: 16px 24px calc(100px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0 !important; background: #0e0d0c; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html body.r5-consent-open { padding-bottom: calc(290px + env(safe-area-inset-bottom)); }
  html body .r5-consent-inner { gap: 12px; }
  html body .r5-consent-text { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
  html body .r5-consent-text strong { margin-bottom: 4px; font-family: var(--r5-serif); font-size: 16px; font-weight: 400; letter-spacing: 0; color: #fff; }
  html body .r5-consent-text a { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
  html body .r5-consent-actions { gap: 8px; }
  html body .r5-consent-btn { font-family: var(--r5-sans); min-height: 44px; padding: 0 12px; border-radius: 4px; font-size: 13px; letter-spacing: .02em; box-shadow: none; }
  html body .r5-consent-btn-primary { background: #fff; color: var(--r5-dark); }
  html body .r5-consent-btn-secondary { border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
}
/* No capitals on phones (Louis, 2026-09-28: "no capilisation"). Labels, eyebrows, board heads and the tickets, invoices and
   team sheets on the service pages show their words as written, in sentence case, with the wide tracking that suited spaced
   capitals brought back to normal. The shared labels step up to 12-13px so they still read as labels. */
@media (max-width: 640px) {
  html body * { text-transform: none !important; }
  html body :is(.r5-hero-pickup-label, .ab-head, .ab-head span, .ab-meta, .r5-footer-col h2, .m-menu .m-eyebrow, .m-meta span,
    .r5-vehicle-class, main dt, main small, .ch-meta, .inv-wm, .inv-ref, .inv-th span, .inv-amt, .inv-remit b, .inv-remit span,
    .gn-admit span, .gn-fix-k, .hc-pad-top span, .hc-page-top, .lg-top span, .lh-top span, .md-mast-c, .md-sheet-t, .md-ground h3,
    .pk-poster-top, .pk-pass-head p, .pk-when, .pt-tag span, .pt-stub p, .pt-r, .pt-lab, .prod-sheet-top span, .prod-tag, .ps-take,
    .wc-lab, .wc-cue, .ty-social-label, .gl-running span, .lc-form-head span, .lc-ledger-head span, .lc-cols span,
    .mvc-plate-head span, .rrad-spec-top span, .rrad-swatch-top span) { letter-spacing: .02em !important; }
  html body :is(.r5-hero-pickup-label, .ab .ab-head) { font-size: 13px; font-weight: 500; }
  html body :is(.r5-footer-col h2, .m-menu .m-eyebrow, .r5-vehicle-class) { font-size: 12px; font-weight: 500; }
}
@media (max-width: 640px) and (max-height: 720px) {
  .r5-hero-bg, html body .r5-ph .r5-ph-bg { height: 212px !important; }
  .r5-hero-content, html body .r5-ph .r5-ph-content { margin-top: -94px !important; }
  html body #main .r5-hero-title, html body #main-content .r5-hero-title, html body #main .r5-ph .r5-ph-title, html body #main-content .r5-ph .r5-ph-title { margin-bottom: 14px !important; font-size: 28px !important; }
  html body .r5-hero:not(:has(.r5-hero-pickup)) .r5-hero-bg { height: 160px !important; }
}
@media (max-width: 640px) and (max-height: 600px) { .r5-hero-bg, html body .r5-ph .r5-ph-bg { height: 196px !important; } html body .r5-hero:not(:has(.r5-hero-pickup)) .r5-hero-bg { height: 128px !important; } }
@media (max-width: 400px) {
  html body .ab { padding-left: 16px; padding-right: 16px; }
  html body .ab .ab-rows.fold-on li { column-gap: 10px; }
}