/* R5 desktop design (28 Sep 2026, DECISIONS 68). The phone design from css/r5-phone.css (DECISIONS 65 to 67), laid out for
   tablets and desktops: 641px and up. Linked after css/r5-phone.css with media="(min-width: 641px)", so phones never apply it
   and stay pixel-identical.
   Louis, 2026-09-28: hero A ("i prefer A but the black is to harsh on the crop"), a new file, tablets follow desktop, the
   same slow motion as the phone homepage but more refined ("there is more space").
   - The header is near-black at the top and when scrolled, with the R5 mark in white and sentence-case links.
   - Type is EB Garamond for headings and Jost for text, in place of Playfair Display and Sora. Nothing is set in capitals.
   - Hero, 1025px and up: R5's photo fills the right 56% with a clean edge; the tag, headline, one "Pickup location" entry
     (the booking form's own label and placeholder) and the sub-line sit left-aligned on the near-black panel.
     641 to 1024px: the phone layout at a larger size, the photo fading into the panel above the words.
   - Headings, intros and calls to action are centred; lists, cards, FAQs and forms keep a left edge. Buttons and fields
     have 4px corners, boards are ivory cards with hairline borders, and gold is kept for small labels.
   Words are unchanged. The H1 to H3 rules repeat the html body #main prefix because css/r5-a11y.css sets them with
   !important at (1,0,2). */

/* Fallback faces sized to the web fonts' widths (measured: Georgia at 86.5% sets EB Garamond's line lengths, Arial at 96.3%
   sets Jost's), so text breaks the same way before and after the fonts arrive and nothing below a hero moves. */
@font-face { font-family: 'R5 Garamond Fallback'; src: local('Georgia'); size-adjust: 86.5%; ascent-override: 100%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: 'R5 Jost Fallback'; src: local('Arial'); size-adjust: 96.3%; ascent-override: 107%; descent-override: 37%; line-gap-override: 0%; }

@media (min-width: 641px) {
  :root {
    --r5-serif: 'EB Garamond', 'R5 Garamond Fallback', Georgia, serif;
    --r5-sans: 'Jost', 'R5 Jost Fallback', -apple-system, sans-serif;
    --r5-control-font: 'Jost', 'R5 Jost Fallback', -apple-system, sans-serif;
    --r5-control-radius: 4px;
    --r5-ink0: #0e0d0c;
    --r5-fs-section: clamp(2.25rem, 1.6rem + 1.6vw, 3.125rem);
    --r5-fs-statement: clamp(1.625rem, 1.4rem + .8vw, 2.125rem);
    --r5-fs-heading: clamp(1.3125rem, 1.2rem + .3vw, 1.5rem);
    --r5-gut: max(40px, calc((100vw - 1280px) / 2));
    --r5-lux: cubic-bezier(.22, 1, .36, 1);
  }
  html body { font-family: var(--r5-sans); }
  /* The header is sticky, so pages without a hero lose the 100px top padding that once cleared a fixed header (the 404 page). */
  html body.r5-page-no-hero { padding-top: 0 !important; }
  html body * { text-transform: none !important; }
  .m-menu nav a small, .r5-trust-strip { font-family: var(--r5-sans); }

  /* Header: near-black at the top and when scrolled, the mark in white, sentence-case links, a 4px quote button */
  html body #r5-header, html body #r5-header.scrolled { padding-top: 16px !important; padding-bottom: 16px !important; background: var(--r5-ink0) !important; border-bottom: 1px solid rgba(255, 255, 255, .08); 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; }
  html body #r5-header .r5-menu-toggle span { background: #fff; }
  html body #r5-header :is(.r5-nav > a, .r5-nav .r5-nav-item > a) { position: relative; padding: 7px 12px; font-family: var(--r5-sans); font-size: 15px; font-weight: 400; letter-spacing: .01em; color: rgba(255, 255, 255, .74) !important; background: none !important; border-radius: 0; transition: color .4s ease; }
  html body #r5-header :is(.r5-nav > a, .r5-nav .r5-nav-item > a)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--r5-lux); }
  html body #r5-header :is(.r5-nav > a, .r5-nav .r5-nav-item > a):is(:hover, :focus-visible)::after, html body #r5-header .r5-nav .r5-nav-item:is(:hover, :focus-within) > a::after { transform: scaleX(1); }
  html body #r5-header :is(.r5-nav > a, .r5-nav .r5-nav-item > a):is(:hover, :focus-visible), html body #r5-header .r5-nav .r5-nav-item:is(:hover, :focus-within) > a { color: #fff !important; }
  html body #r5-header .r5-nav a[aria-current="page"] { text-decoration: none; color: #fff !important; }
  html body #r5-header .r5-nav a[aria-current="page"]::after { transform: scaleX(1); }
  html body #r5-header .r5-nav > a.r5-nav-tel { color: #fff !important; }
  html body #r5-header .r5-nav > a.r5-nav-cta.r5-nav-cta { margin-left: 14px; padding: 10px 20px !important; border-radius: 4px; background: #fff !important; border-color: #fff !important; color: var(--r5-ink0) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: .01em !important; transition: background .4s ease; }
  html body #r5-header .r5-nav > a.r5-nav-cta.r5-nav-cta::after { content: none; }
  html body #r5-header .r5-nav > a.r5-nav-cta.r5-nav-cta:hover { background: #ece6db !important; transform: none; }
  html body .r5-nav-dropdown { padding: 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 4px; background: #171513; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html body .r5-nav-dropdown a { font-family: var(--r5-sans); font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, .78) !important; border-radius: 2px; transition: color .3s ease, background .3s ease; }
  html body .r5-nav-dropdown a:is(:hover, :focus-visible) { color: #fff !important; background: rgba(255, 255, 255, .06); }
  html body .r5-nav-dropdown .r5-dropdown-label { letter-spacing: .02em; color: rgba(255, 255, 255, .5); }

  /* Labels in sentence case with normal tracking; gold only for small labels */
  html body :is(.r5-label, .r5-hero-tag, .r5-trust-label, .r5-booking-quick .r5-form-group label, .r5-footer-col h2, .r5-footer-col h4, .r5-dropdown-label) { letter-spacing: .02em !important; }
  html body :is(main, #main) .r5-label { margin-bottom: 18px; font-family: var(--r5-sans); font-size: 15px; font-weight: 400; color: var(--r5-gold); }
  html body .r5-label-light { font-size: 15px; font-weight: 400; letter-spacing: .02em; color: var(--r5-gold-bright); }

  /* Buttons and fields: 4px corners, calm fills */
  html body :is(.r5-btn-primary, .r5-btn-ghost, .r5-btn-secondary, .r5-btn-ghost-light, .r5-btn-dark, .r5-final-actions a) { border-radius: 4px; padding: 15px 30px; font-family: var(--r5-sans); font-size: 15px; letter-spacing: .01em; transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
  html body :is(.r5-btn-primary, .r5-btn-dark, .r5-btn-ghost, .r5-btn-secondary, .r5-btn-ghost-light):hover { transform: none; box-shadow: none; }
  /* The pages' own buttons and quiet links-as-buttons lose their pill shape too. */
  html body :is(.svc-btn, .cc-btn, .mvc-btn, .rrad-btn, .sp-btn, .svc-cta, .fl-cta, .concierge-cta, .read-link, .r5-post-cta .r5-btn-primary, .r5-post-cta .r5-btn-ghost, .nationwide-pills :is(span, a)) { border-radius: 4px !important; }
  html body :is(.svc-btn, .cc-btn, .mvc-btn, .rrad-btn, .sp-btn):hover { transform: none; }
  /* The tablet menu (641 to 1024px) keeps normal tracking and 4px buttons, as the rest of the page. */
  html body .m-menu :is(.m-eyebrow, .m-meta, .m-meta span) { letter-spacing: .02em !important; }
  html body .m-menu .m-foot :is(.m-cta, .m-row a) { border-radius: 4px !important; }
  /* The booking tunnel's own fields, toggles, vehicle cards and buttons take the same 4px corners. */
  html body .r5-tunnel :is(.r5-field input, .r5-field select, .r5-field textarea, .r5-toggle, .r5-vehicle-card, .r5-btn-next, .r5-btn-back, .r5-tunnel-continue) { border-radius: 4px !important; }

  /* ---------- Hero, shared parts (the standard .r5-hero and the custom r5-ph heroes) ---------- */
  html body .r5-hero-pickup { display: block; position: relative; width: 100%; max-width: 460px; min-height: 68px; margin: 0; padding: 12px 0 14px; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; box-sizing: border-box; cursor: pointer; }
  html body .r5-hero-pickup::before, html body .r5-hero-pickup::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .45); }
  html body .r5-hero-pickup::after { background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--r5-lux); }
  html body .r5-hero-pickup:is(:hover, :focus-visible)::after { transform: scaleX(1); }
  html body .r5-hero-pickup:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
  html body .r5-hero-pickup-label { display: block; margin-bottom: 8px; font-family: var(--r5-sans); font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--r5-gold-bright); }
  html body .r5-hero-pickup-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--r5-sans); font-size: 18px; color: rgba(255, 255, 255, .62); transition: color .4s ease; }
  html body .r5-hero-pickup:hover .r5-hero-pickup-field { color: rgba(255, 255, 255, .85); }
  html body .r5-hero-pickup-field::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg); transition: translate .6s var(--r5-lux); }
  html body .r5-hero-pickup:hover .r5-hero-pickup-field::after { translate: 5px 0; }

  html body :is(.r5-hero, .r5-ph.r5-ph) { position: relative; min-height: 0 !important; height: auto !important; margin-top: 0 !important; padding: 0 !important; background: var(--r5-ink0) !important; overflow: hidden; }
  /* main.js moves the standard heroes' photo with the scroll (a parallax, 1024px and up); the pane stays put and opens once,
     on a timer, instead. */
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg) { position: relative !important; inset: auto !important; overflow: hidden; transform: none !important; }
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg) :is(img, picture) { display: block; width: 100%; height: 100%; object-fit: cover; animation: none !important; transform: none !important; }
  /* The service heroes' own films (corporate, private travel, airport) play inside the photo pane; the photo shows beneath them
     until they start, and with reduced motion they stay off. */
  html body .r5-ph .r5-ph-bg video { display: block !important; position: absolute !important; inset: 0 !important; z-index: 0; width: 100% !important; height: 100% !important; object-fit: cover; opacity: 1 !important; transform: none !important; }
  html body .r5-ph .r5-ph-bg :is(img, picture) { position: relative; z-index: 0; }
  /* Breadcrumbs stay on desktop, a quiet line above the tag (phones hide them). */
  html body .r5-ph .crumb.r5-ph-hide { order: -1; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px !important; font-family: var(--r5-sans) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .02em !important; color: rgba(255, 255, 255, .5) !important; }
  html body .r5-ph .crumb.r5-ph-hide :is(a, span) { font-size: inherit !important; color: inherit !important; text-decoration: none; }
  html body .r5-ph .crumb.r5-ph-hide a:is(:hover, :focus-visible) { color: #fff !important; }
  /* The "On this page" strips sit under the 73px dark header. */
  html body :is(.svc-anchor-strip, .cc-anchor-strip) { top: 73px; }
  html body .r5-ph .r5-ph-bg::before { content: none !important; }
  html body .r5-ph .r5-ph-wrap { display: contents !important; }
  html body :is(.r5-hero-content, .r5-ph .r5-ph-content) { position: relative !important; inset: auto !important; z-index: 2; display: flex !important; flex-direction: column; align-items: flex-start; width: auto !important; max-width: none !important; transform: none !important; text-align: left !important; color: #fff; }
  html body :is(.r5-hero-content > .r5-hero-tag, .r5-hero-title .r5-hero-tag, .r5-ph .r5-ph-tag) { order: 0; display: block; margin: 0 0 18px !important; font-family: var(--r5-sans) !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.5 !important; letter-spacing: .02em !important; color: rgba(255, 255, 255, .64) !important; }
  html body :is(#main, #main-content) :is(.r5-hero-title, .r5-ph .r5-ph-title) { order: 1; max-width: 12em !important; margin: 0 0 34px !important; font-family: var(--r5-serif) !important; font-size: clamp(42px, 1.9rem + 1.6vw, 58px) !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.08 !important; letter-spacing: -.005em !important; text-align: left !important; color: #fff !important; text-wrap: balance; }
  html body :is(.r5-hero-title, .r5-ph-title):has(.r5-sp) br { display: none; }
  html body :is(#main, #main-content) .r5-hero:not(:has(.r5-hero-pickup, .r5-hero-actions)) .r5-hero-title, html body :is(#main, #main-content) .r5-hero:has(.r5-article-meta, .r5-post-meta) .r5-hero-title { max-width: 14em !important; font-size: clamp(36px, 1.6rem + 1.3vw, 48px) !important; }
  html body :is(.r5-hero-title, .r5-ph-title) .r5-sp { display: inline; }
  html body .r5-ph .r5-ph-title :is(em, i) { font-style: normal !important; font-weight: inherit !important; color: inherit !important; }
  html body .r5-ph-title [class*="hero-eyebrow"] { display: block; margin: 0 0 18px; font-family: var(--r5-sans); font-size: 16px !important; font-weight: 400; line-height: 1.5; letter-spacing: .02em !important; color: rgba(255, 255, 255, .64); }
  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 :is(.r5-hero-content, .r5-ph) .r5-hero-pickup { order: 2; }
  html body :is(.r5-hero-sub, .r5-ph .r5-ph-sub) { order: 3; max-width: 40ch !important; margin: 28px 0 0 !important; font-family: var(--r5-sans) !important; font-size: 17px !important; line-height: 1.7 !important; text-align: left !important; color: rgba(255, 255, 255, .7) !important; }
  html body :is(.r5-hero-actions, .r5-ph .r5-ph-actions, .r5-ph .r5-ph-hide:not(.crumb), .r5-hero-content > .r5-ph-hide, .r5-hero-scroll) { display: none !important; }
  /* Heroes without a pickup entry (London, the landers, articles) keep their own buttons, left-aligned under the headline. */
  html body .r5-hero-content:not(:has(.r5-hero-pickup)) > .r5-hero-actions, html body .r5-ph:not(:has(.r5-hero-pickup, .r5-ph-cta)) .r5-ph-actions { order: 2; display: flex !important; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin: 4px 0 0 !important; }
  html body .r5-hero-content:not(:has(.r5-hero-pickup)) > .r5-hero-actions .r5-btn-primary { background: #fff; color: var(--r5-ink0); }
  html body .r5-hero-content:not(:has(.r5-hero-pickup)) > .r5-hero-actions :is(.r5-btn-ghost, .r5-btn-ghost-light) { border-color: rgba(255, 255, 255, .45); color: #fff; }
  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: inline-flex !important; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 4px !important; }
  html body .r5-ph .r5-ph-stats { order: 4; display: flex !important; flex-wrap: wrap; gap: 14px 36px !important; margin: 30px 0 0 !important; }
  html body .r5-ph .r5-ph-stats > * { font-family: var(--r5-sans) !important; font-size: 13px !important; letter-spacing: .02em !important; color: rgba(255, 255, 255, .55) !important; }
  html body .r5-ph .r5-ph-stats :is(b, strong) { display: block; margin-bottom: 2px; font-family: var(--r5-serif) !important; font-size: 22px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #fff !important; }
  html body :is(.r5-hero-content > .r5-ph-proof, .r5-ph .r5-ph-proof, .r5-hero-content > .r5-proof-strip, .r5-hero-content > .r5-proof) { order: 5; margin: 24px 0 0 !important; font-family: var(--r5-sans); font-size: 14px !important; color: rgba(255, 255, 255, .62) !important; }

  /* ---------- Below the hero: centred headings, intros and calls to action; lists, cards and forms keep a left edge ---------- */
  html body main .r5-section { padding: 128px 0; }
  html body .r5-intro .r5-editorial-block { max-width: 720px; margin: 0 auto; text-align: center; }
  html body .r5-intro .r5-editorial-block > * { margin-left: auto; margin-right: auto; }
  html body :is(#main, #main-content) :is(.r5-headline, .r5-section h2) { font-family: var(--r5-serif); font-weight: 400 !important; letter-spacing: -.005em !important; }
  html body :is(#main, #main-content) :is(.r5-headline, .r5-section:not(.r5-final-cta, .r5-section-dark) h2) { color: var(--r5-dark); }
  html body :is(#main, #main-content) .r5-intro .r5-headline { margin-bottom: 30px; }
  html body :is(#main, #main-content) .r5-editorial-block p { color: #5f5b55; }
  html body .r5-section-header { max-width: 760px; margin: 0 auto 64px; text-align: center; }
  html body .r5-section-header > * { margin-left: auto; margin-right: auto; }

  /* Area boards: every board kind becomes one ivory card with a hairline border; from 1025px the rows run in two columns
     (three when a board has three rows), each with its number, a serif title and the text, left-aligned. */
  html body .ab { max-width: 1120px; padding: 6px 48px 10px; border: 1px solid var(--r5-border); border-radius: 2px; background: var(--r5-cream); box-shadow: none; color: var(--r5-dark); overflow: visible; transform: none; }
  html body .ab::before, html body .ab::after { content: none; }
  html body .ab :is(.ab-in, .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 { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 30px 0 18px; border: 0; border-bottom: 1px solid var(--r5-dark); background: none; font-family: var(--r5-sans); font-size: 15px; font-weight: 400; letter-spacing: .02em !important; text-align: left; 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-head span + span { color: #5f5b55; }
  html body .ab .ab-rows { display: grid; grid-template-columns: minmax(0, 1fr); columns: auto; margin: 0; padding: 0; }
  html body .ab .ab-rows::before { content: none; }
  html body .ab .ab-rows li { display: grid; grid-template-columns: var(--r5-ab-meta, 34px) minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 28px 0 30px; 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 .ab .ab-rows li > div { display: block; }
  html body #main .ab .ab-rows li h3 { display: block; margin: 0 0 10px; padding: 0; background: none; box-shadow: none; clip-path: none; font-family: var(--r5-serif); font-size: 23px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.3 !important; text-align: left; text-shadow: none; color: var(--r5-dark); }
  html body #main .ab .ab-rows li h3::after { content: none; }
  html body .ab .ab-rows h3 a { color: inherit; }
  html body .ab.ab-flap { --r5-ab-meta: 80px; }
  html body .ab .ab-meta { display: block; width: auto; min-width: 0; height: auto; margin: 0; padding: 7px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--r5-sans); font-size: 14px; font-weight: 500; letter-spacing: .02em; line-height: 1.4; text-align: left; text-shadow: none; color: var(--r5-gold); }
  html body .ab p { font-size: 16px; line-height: 1.7; color: #5f5b55; }
  html body .ab p a { color: var(--r5-dark); }
  html body .r5-area-more { margin-top: 112px; }

  /* Quote form: a white card with 4px fields; the call-us column beside it */
  html body .r5-booking { background: var(--r5-cream); }
  html body .r5-booking-form-wrap { padding: 52px 56px 56px; border: 1px solid var(--r5-border); border-radius: 2px; background: #fff; }
  html body :is(#main, #main-content) .r5-booking-form-wrap h2 { margin-bottom: 8px; }
  html body .r5-booking .r5-booking-quick .r5-form-group label { font-size: 14px; color: #5f5b55; }
  html body .r5-booking .r5-booking-quick .r5-form-group :is(input, select) { border-radius: 4px; background: #fff; font-family: var(--r5-sans); font-size: 16px; }
  html body .r5-booking .r5-booking-quick .r5-btn-primary { width: 100%; max-width: none; border-radius: 4px; background: var(--r5-ink0); color: #fff; }
  html body .r5-booking .r5-booking-quick .r5-btn-primary:hover { background: #2a2826; }
  html body .r5-booking-contact { margin: 0; padding: 0; }
  html body .r5-booking-contact-details .r5-booking-phone { font-family: var(--r5-serif); font-size: 26px; }

  html body .r5-trust-bar { background: #fff; }
  html body .r5-trust-label { font-size: 14px; color: #5f5b55; }

  /* The closing band: near-black, centred, 4px buttons */
  html body .r5-final-cta { padding: 152px 0; background: var(--r5-ink0); }
  html body :is(#main, #main-content) .r5-final-cta :is(.r5-headline-light, h2) { margin-bottom: 20px; font-family: var(--r5-serif); font-size: var(--r5-fs-section) !important; font-weight: 400 !important; color: #fff; }
  html body .r5-final-cta .r5-final-content > p { font-size: 17px; }
  html body .r5-final-cta .r5-btn-primary { background: #fff; color: var(--r5-ink0); }
  html body .r5-final-cta .r5-btn-primary:hover { background: #ece6db; }

  html body .r5-footer { background: var(--r5-ink0); }
  html body .r5-footer :is(h2, h4) { font-family: var(--r5-sans); font-size: 14px !important; font-weight: 400 !important; color: rgba(255, 255, 255, .55) !important; }
  html body .r5-footer a { transition: color .4s ease; }
}

/* Tablets, 641 to 1024px: the phone hero at a larger size. The photo runs down from the header and fades into the near-black
   panel, which carries the tag, headline, pickup entry and sub-line, left-aligned. */
@media (min-width: 641px) and (max-width: 1024px) {
  html body :is(.r5-hero, .r5-ph.r5-ph) { display: block !important; }
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg) { height: clamp(360px, 50vh, 560px) !important; }
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg) :is(img, picture) { object-position: 50% 55%; }
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg)::after { content: "" !important; position: absolute; inset: 0; z-index: 1; opacity: 1 !important; background: linear-gradient(to bottom, var(--r5-ink0) 0, rgba(14, 13, 12, 0) 90px, rgba(14, 13, 12, 0) 68%, rgba(14, 13, 12, .85) 90%, var(--r5-ink0) 100%) !important; }
  html body :is(.r5-hero-content, .r5-ph .r5-ph-content) { margin: -56px 0 0 !important; padding: 0 40px 72px !important; }
  html body .ab { padding-left: 32px; padding-right: 32px; }
  html body .r5-booking-form-wrap { padding: 40px; }
}

/* Desktops, 1025px and up: hero A. The photo fills the right 56% with a clean edge; the words sit on the near-black panel,
   left-aligned on the page's 1280px grid. */
@media (min-width: 1025px) {
  html body :is(.r5-hero, .r5-ph.r5-ph) { display: grid !important; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); min-height: clamp(600px, calc(100svh - 73px), 940px) !important; }
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg) { grid-column: 2; grid-row: 1; height: auto !important; min-height: 100%; }
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg) > :is(picture, img) { position: absolute; inset: 0; width: 100%; height: 100%; }
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg)::after { content: none !important; }
  html body :is(.r5-hero-content, .r5-ph .r5-ph-content) { grid-column: 1; grid-row: 1; align-self: center; margin: 0 !important; padding: 72px 64px 80px var(--r5-gut) !important; }

  html body .ab .ab-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; }
  html body .ab .ab-rows:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; }
  html body .ab .ab-rows li:nth-last-child(2):nth-child(odd), html body .ab .ab-rows:has(> li:nth-child(3):last-child) li { border-bottom: 0; }
  html body .ab { padding-left: 56px; padding-right: 56px; }
  html body .r5-booking-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 88px; align-items: center; }
}

/* Motion (Louis: the same slow motion as the phone homepage, "more refined here with animations as there is more space").
   Time-based, never tied to the scroll position. The hero opens once on arrival: the photo is drawn open from the panel's
   edge while it settles from a slightly close crop over about three seconds, and the tag, headline, pickup line and
   sub-line rise in turn, the pickup's rule drawing across. Only opacity, translate, scale, clip-path and transform move;
   reduced motion shows the page as it is. */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg) :is(img, picture) { animation: r5dZoom 3.4s var(--r5-lux) both !important; }
  html body :is(.r5-hero-content, .r5-ph .r5-ph-content) > *, html body .r5-ph .r5-ph-wrap > * { animation: r5dRise 1.6s var(--r5-lux) .45s both; }
  html body :is(.r5-hero-title, .r5-ph-title) { animation-delay: .6s !important; }
  html body :is(.r5-hero-content, .r5-ph) .r5-hero-pickup { animation-delay: .85s !important; }
  html body .r5-hero-pickup::before { animation: r5dRule 1.4s var(--r5-lux) 1.05s both; transform-origin: left; }
  html body :is(.r5-hero-sub, .r5-ph-sub, .r5-ph-cta-wrap) { animation-delay: 1s !important; }
  html body :is(.r5-ph-stats, .r5-ph-proof) { animation-delay: 1.15s !important; }
  html body .r5-hero-content:not(:has(.r5-hero-pickup)) > .r5-hero-actions { animation-delay: .85s !important; }

  /* Below the hero, the pages' own reveal (main.js adds .visible) eases in at the phone homepage's pace. The homepage runs its
     own reveals (r5-rv-ready), so it is left out here. */
  html.js:not(.r5-rv-ready) body :is(main, #main, #main-content) .animate-on-scroll { transition-duration: 1.5s, 1.7s; transition-timing-function: var(--r5-lux); }
}
@media (min-width: 641px) and (prefers-reduced-motion: reduce) { html body .r5-ph .r5-ph-bg video { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg) { animation: r5dFrame 1.9s var(--r5-lux) .1s both; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  html body :is(.r5-hero-bg, .r5-ph .r5-ph-bg) { animation: r5dOpen 1.8s var(--r5-lux) .1s both; }
}
@keyframes r5dOpen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes r5dFrame { from { clip-path: inset(0 24px round 3px); } to { clip-path: inset(0 0 round 0); } }
@keyframes r5dZoom { from { scale: 1.1; } to { scale: 1; } }
@keyframes r5dRise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@keyframes r5dRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Cookie choice, tablets and desktops (Louis, 2026-09-28: "change the cookie card"; DECISIONS 68). The approved phone panel
   (DECISIONS 65 and 67) at a larger size: one full-width bar in the header's near-black along the foot of the screen, a hairline
   above it, the words on the left in the page's type and the two buttons on the right, equal in size, with 4px corners. The
   text and both buttons are unchanged. The WhatsApp button lifts above the bar while it is open, and the page gains room at
   the bottom so nothing sits under it. From 641 to 680px the docked bar is still showing, so the panel runs behind it. */
@media (min-width: 641px) {
  html body .r5-consent-banner { left: 0; right: 0; bottom: 0 !important; z-index: 8999; max-width: none; margin: 0; padding: 22px var(--r5-gut) 24px; border: 0; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0 !important; background: var(--r5-ink0); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-family: var(--r5-sans); animation: r5dConsentIn .9s var(--r5-lux) both; }
  html body .r5-consent-inner { max-width: 1280px; margin: 0 auto; gap: 16px 48px; flex-wrap: nowrap; }
  html body .r5-consent-icon { display: none; }
  html body .r5-consent-text { flex: 1 1 auto; max-width: 64ch; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
  html body .r5-consent-text strong { margin-bottom: 4px; font-family: var(--r5-serif); font-size: 19px; 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: 10px; }
  html body .r5-consent-btn { min-width: 150px; min-height: 46px; padding: 0 22px; border-radius: 4px; font-family: var(--r5-sans); font-size: 14px; font-weight: 500; letter-spacing: .01em; box-shadow: none; transition: background .4s ease, border-color .4s ease, color .4s ease; }
  html body .r5-consent-btn-primary { background: #fff; color: var(--r5-ink0); }
  html body .r5-consent-btn-primary:hover { background: #ece6db; box-shadow: none; }
  html body .r5-consent-btn-secondary { border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
  html body .r5-consent-btn-secondary:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
  html body.r5-consent-open { padding-bottom: 132px; }
  html body.r5-consent-open .r5-whatsapp-float { bottom: 132px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  html body .r5-consent-inner { flex-direction: column; align-items: stretch; }
  html body .r5-consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
  html body.r5-consent-open { padding-bottom: 210px; }
  html body.r5-consent-open .r5-whatsapp-float { bottom: 210px; }
}
@media (min-width: 641px) and (max-width: 680px) {
  html body .r5-consent-banner { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  html body.r5-consent-open { padding-bottom: 300px; }
}
@media (min-width: 641px) and (prefers-reduced-motion: reduce) { html body .r5-consent-banner { animation: none; } }
@keyframes r5dConsentIn { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: none; } }

/* The landers' cookie bar comes from js/r5-consent.js (its own r5c-* parts, already full width): the same type, colour and
   4px buttons. Its text and buttons are unchanged. */
@media (min-width: 641px) {
  html body #r5-consent-banner:not(.r5-consent-banner) { border-top: 1px solid rgba(255, 255, 255, .1); background: var(--r5-ink0); box-shadow: none; font-family: var(--r5-sans); animation: r5dConsentIn .9s var(--r5-lux) both; }
  html body #r5-consent-banner .r5c-inner { max-width: 1280px; padding: 22px 40px 24px; gap: 16px 48px; flex-wrap: nowrap; }
  html body #r5-consent-banner .r5c-text { font-size: 14px; color: rgba(255, 255, 255, .72); }
  html body #r5-consent-banner .r5c-text strong { font-family: var(--r5-serif); font-size: 19px; font-weight: 400; }
  html body #r5-consent-banner .r5c-actions { flex-wrap: nowrap; }
  html body #r5-consent-banner button { min-width: 150px; min-height: 46px; border-radius: 4px; font-family: var(--r5-sans); font-size: 14px; font-weight: 500; letter-spacing: .01em; transition: background .4s ease, border-color .4s ease; }
  html body #r5-consent-banner button.r5c-accept:hover { background: #ece6db; }
}
@media (min-width: 641px) and (max-width: 900px) { html body #r5-consent-banner .r5c-inner { flex-direction: column; align-items: stretch; } html body #r5-consent-banner .r5c-text { flex: 0 0 auto; } html body #r5-consent-banner .r5c-actions button { flex: 1; } }
@media (min-width: 641px) and (prefers-reduced-motion: reduce) { html body #r5-consent-banner:not(.r5-consent-banner) { animation: none; } }