@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   DESIGN.CSS — Conciergerie (FR)
   Rebuilt from scratch. Loads AFTER bootstrap.min.css and
   main.css and overrides both.

   Direction: navy surfaces, one warm orange accent, off-white
   page, soft radii, geometric sans.

   1  TOKENS          the whole palette lives here
   2  BASE & TYPE
   3  BUTTONS
   4  FORM CONTROLS
   5  SURFACES
   6  NAVBAR
   7  FOOTER
   8  LANDING — hero
   9  LANDING — card rail
   10 LANDING — floating panel
   11 LANDING — reasons + collage
   12 LANDING — service cards
   13 LANDING — dark band + quote cards
   14 SHARED COMPONENTS
   15 SERVICE PAGE HERO
   16 MOTION
   ============================================================ */

/* ============================================================
   1. TOKENS
   a) raw palette — referenced only inside this file
   b) main.css variables re-pointed at it
   c) Bootstrap 5 variables, so utilities follow along
   ============================================================ */

:root {
    /* ---- a) raw palette ------------------------------------ */

    /* navy */
    --navy-900: #151C29;
    --navy-800: #1D2635;
    --navy-700: #2E3A4D;
    --navy-600: #3A4557;

    /* orange — 500 is the fill, 600/700 are the stops that pass
       AA as text on a light surface, 400 is for dark bands */
    --orange-50: #FEF2EC;
    --orange-100: #FCDCCB;
    --orange-200: #F8BB9C;
    --orange-300: #F4986E;
    --orange-400: #EE6C3A;
    --orange-500: #E4602F;
    --orange-600: #C44D1B;
    --orange-700: #AE4315;

    /* neutrals */
    --paper: #FAFAFA;
    --paper-2: #F4F5F6;
    --line: #E8E9EC;
    --line-strong: #D6D8DD;
    --ink: #1B2330;
    --ink-2: #5B6474;
    --ink-3: #868E9E;
    --on-dark: #F5F6F8;
    --on-dark-2: #A3ABB9;

    /* states */
    --green: #2F7D57;
    --green-50: #E6F2EC;
    --red: #C0392B;
    --red-50: #FBEAE8;
    --red-100: #F5D5D1;
    --amber: #B57A16;
    --amber-50: #FBF0DC;
    --blue: #2E6A96;
    --blue-50: #E4EEF5;

    /* ---- b) main.css variables ----------------------------- */
    --white: #FFFFFF;
    --xtra-light: var(--paper);
    --light: var(--paper-2);
    --neutral: #ECEDEF;
    --inputs: var(--paper);
    --border: var(--line);
    --xtra-lightgrey: var(--line-strong);
    --grey: var(--on-dark-2);
    --hairline: rgba(255, 255, 255, 0.10);

    --dark: var(--navy-800);
    --charcoal: var(--navy-700);
    --body-text: var(--ink-2);
    --muted-text: var(--ink-3);

    /* strong stops stay navy so every text usage is legible;
       soft stops are the orange tints */
    --primary: var(--navy-800);
    --primary-hover: var(--navy-900);
    --primary-active: var(--navy-900);
    --primary-700: var(--orange-700);
    --primary-600: var(--orange-600);
    --primary-300: var(--orange-300);
    --primary-200: var(--orange-200);
    --primary-100: var(--orange-100);
    --primary-50: var(--orange-50);

    /* the accent's own fill / hover / pressed */
    --accent: var(--orange-500);
    --accent-hover: var(--orange-600);
    --accent-active: var(--orange-700);

    --success: var(--green);
    --success-soft: var(--green-50);
    --danger: var(--red);
    --danger-soft: var(--red-50);
    --warning: var(--amber);
    --warning-soft: var(--amber-50);
    --info: var(--blue);
    --info-soft: var(--blue-50);

    --ff-title: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ff-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* radii: controls 10px, cards 16px, media 20px,
       pills for badges and chips only */
    --br-sm: 0.5rem;
    --br-md: 0.625rem;
    --br-btn: 0.625rem;
    --br-input: 0.625rem;
    --br-base: 1rem;
    --br-lg: 1.25rem;
    --br-rd: 999px;

    --input-border: var(--line);

    /* shadows are navy-tinted and wide, so cards float */
    --shadow: 0 1px 2px rgba(21, 28, 41, 0.04), 0 8px 24px rgba(21, 28, 41, 0.06);
    --shadow-lift: 0 24px 60px rgba(21, 28, 41, 0.12), 0 2px 8px rgba(21, 28, 41, 0.05);
    --shadow-btn: 0 1px 2px rgba(21, 28, 41, 0.08);
    --shadow-btn-hover: 0 10px 24px rgba(228, 96, 47, 0.30);
    --focus-ring: 0 0 0 3px rgba(228, 96, 47, 0.32);

    --nav-h: 5rem;

    /* ---- c) Bootstrap 5 ----------------------------------- */
    --bs-body-font-family: var(--ff-family);
    --bs-body-color: var(--ink-2);
    --bs-body-color-rgb: 91, 100, 116;
    --bs-body-bg: var(--paper);
    --bs-body-bg-rgb: 250, 250, 250;
    --bs-emphasis-color: var(--ink);
    --bs-emphasis-color-rgb: 27, 35, 48;
    --bs-secondary-color: var(--ink-3);
    --bs-heading-color: var(--ink);

    --bs-primary: #E4602F;
    --bs-primary-rgb: 228, 96, 47;
    --bs-secondary: #5B6474;
    --bs-secondary-rgb: 91, 100, 116;
    --bs-success: #2F7D57;
    --bs-success-rgb: 47, 125, 87;
    --bs-danger: #C0392B;
    --bs-danger-rgb: 192, 57, 43;
    --bs-warning: #B57A16;
    --bs-warning-rgb: 181, 122, 22;
    --bs-info: #2E6A96;
    --bs-info-rgb: 46, 106, 150;
    --bs-light: #F4F5F6;
    --bs-light-rgb: 244, 245, 246;
    --bs-dark: #1D2635;
    --bs-dark-rgb: 29, 38, 53;

    --bs-primary-text-emphasis: #AE4315;
    --bs-primary-bg-subtle: #FEF2EC;
    --bs-primary-border-subtle: #F8BB9C;

    --bs-link-color: #1D2635;
    --bs-link-color-rgb: 29, 38, 53;
    --bs-link-hover-color: #C44D1B;
    --bs-link-hover-color-rgb: 196, 77, 27;

    --bs-border-color: #E8E9EC;
    --bs-border-color-translucent: rgba(27, 35, 48, 0.10);
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius: 0.625rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-border-radius-xxl: 1.5rem;
    --bs-border-radius-pill: 999px;

    --bs-box-shadow: var(--shadow);
    --bs-box-shadow-sm: var(--shadow-btn);
    --bs-box-shadow-lg: var(--shadow-lift);
    --bs-focus-ring-color: rgba(228, 96, 47, 0.32);
}

/* ============================================================
   2. BASE & TYPE
   One family. Display sizes are heavy and tightly tracked,
   body text sits at 400/500.
   ============================================================ */

body {
    font-family: var(--ff-family);
    background-color: var(--paper);
    color: var(--ink-2);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-family: var(--ff-title);
    color: var(--ink);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
    font-weight: var(--fw-700);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-weight: var(--fw-800);
    letter-spacing: -0.035em;
    line-height: 1.05;
}

h5, .h5,
h6, .h6 {
    font-weight: var(--fw-700);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

p {
    line-height: 1.7;
}

/* measure — long lines are the commonest readability problem */
.lead-measure {
    max-width: 58ch;
}

/* the small tracked label above a heading */
.eyebrow {
    display: inline-block;
    font-family: var(--ff-family);
    font-size: var(--fs-sm);
    font-weight: var(--fw-700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange-700);
}

.bg-dark .eyebrow,
.section-dark .eyebrow {
    color: var(--orange-300);
}

/* utility colours main.css already ships, re-pointed */
.text-light {
    color: var(--ink-2) !important;
}

.text-grey {
    color: var(--on-dark-2) !important;
}

.text-neutral {
    color: var(--on-dark) !important;
}

.text-dark {
    color: var(--ink) !important;
}

a {
    text-underline-offset: 0.2em;
}

::selection {
    background: var(--orange-100);
    color: var(--ink);
}

/* ============================================================
   3. BUTTONS
   Orange is the only filled accent on the site. Everything
   else is quiet: white, outline, or a plain link.
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--ff-family);
    font-size: var(--fs-md);
    font-weight: var(--fw-700);
    line-height: 1.4;
    letter-spacing: 0;
    border-radius: var(--br-btn);
    border-width: 1px;
    transition: background-color 0.2s ease, border-color 0.2s ease,
        color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-sm {
    padding: 0.45rem 0.9rem;
    font-size: var(--fs-sm);
}

.btn-lg {
    padding: 0.95rem 2rem;
    font-size: var(--fs-base);
    max-height: none;
    height: auto;
}

.btn:focus-visible {
    opacity: 1;
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---- ACCENT ---------------------------------------------- */
.btn-primary,
.btn-cta {
    color: var(--white);
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: var(--shadow-btn);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-cta:hover,
.btn-cta:focus,
.btn-cta:focus-visible {
    color: var(--white);
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-cta:active {
    color: var(--white);
    background-color: var(--accent-active) !important;
    border-color: var(--accent-active) !important;
    transform: translateY(0);
    box-shadow: var(--shadow-btn);
}

.btn-cta {
    font-size: var(--fs-base) !important;
}

/* ---- QUIET ----------------------------------------------- */
.btn-secondary {
    color: var(--ink) !important;
    background-color: var(--white) !important;
    border-color: var(--line-strong) !important;
}

.btn-secondary:hover {
    background-color: var(--paper-2) !important;
    border-color: var(--ink-3) !important;
}

.btn-secondary:disabled,
.btn-secondary:focus-visible {
    background-color: var(--white) !important;
    border-color: var(--line-strong) !important;
}

.btn-outline-primary {
    color: var(--orange-700);
    background-color: transparent;
    border-color: var(--orange-300);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    color: var(--white);
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.btn-outline-light {
    color: var(--white);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
    color: var(--ink);
    background: var(--white);
    border-color: var(--white);
}

.btn-dark {
    color: var(--white);
    background-color: var(--navy-800);
    border-color: var(--navy-800);
}

.btn-dark:hover {
    color: var(--white);
    background-color: var(--navy-700);
    border-color: var(--navy-700);
}

.btn-primary-soft {
    color: var(--orange-700);
    background-color: var(--orange-50);
    border-color: transparent;
}

.btn-primary-soft:hover {
    color: var(--orange-700);
    background-color: var(--orange-100);
}

.btn-danger-soft {
    color: var(--danger);
    background-color: var(--red-50);
    border-color: transparent;
}

.btn-danger-soft:hover {
    color: var(--danger);
    background-color: var(--red-100);
}

.btn-link {
    padding-inline: 0;
    color: var(--orange-700);
    font-weight: var(--fw-700);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--orange-600);
}

.btn-ticket,
.btn-back {
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--br-btn);
}

.btn-ticket:hover,
.btn-back:hover {
    background: var(--paper-2);
    border-color: var(--line-strong);
}

.btn-dropdown-more {
    background-color: var(--paper-2) !important;
}

.btn-dropdown-more:hover {
    background-color: var(--neutral) !important;
}

/* ---- CIRCULAR ICON BUTTON --------------------------------
   The round control beside a text link, and the carousel
   arrows on the dark band.
   ---------------------------------------------------------- */
.circle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--white);
    background: var(--accent);
    border: 0;
    border-radius: 50%;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.circle-btn:hover {
    color: var(--white);
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.circle-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.circle-btn--soft {
    color: var(--orange-700);
    background: var(--orange-100);
}

.circle-btn--soft:hover {
    color: var(--orange-700);
    background: var(--orange-200);
}

.circle-btn--ghost {
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
}

.circle-btn--ghost:hover {
    color: var(--ink);
    background: var(--paper-2);
}

/* ============================================================
   4. FORM CONTROLS
   Filled blocks with one heavy edge along the bottom. Focus
   lifts the field to white and turns that edge orange.
   ============================================================ */

   .form-control,
   .form-select {
       padding: 0.9rem 1rem;
       font-size: var(--fs-md);
       color: var(--ink);
       background-color: var(--paper-2);
       border: 1px solid transparent;
       border-bottom: 2px solid var(--line-strong);
       border-radius: var(--br-input);
       line-height: 1.4;
       transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
   }
   
   .form-control:hover:not(:focus),
   .form-select:hover:not(:focus) {
       background-color: var(--neutral);
       border-bottom-color: var(--ink-3);
   }
   
   .form-control:focus,
   .form-select:focus {
       background-color: var(--white);
       border-color: transparent;
       border-bottom-color: var(--accent);
       box-shadow: var(--focus-ring);
   }
   
   .form-control:disabled,
   .form-control[readonly] {
       /* background-color: var(--paper); */
       border-bottom-color: var(--line);
   }
   
   .form-control::placeholder,
   .form-select::placeholder {
       color: var(--ink-3) !important;
       font-size: var(--fs-md);
       opacity: 1;
   }
   
   textarea.form-control {
       min-height: 7rem;
       line-height: var(--lh-body);
       resize: vertical;
   }
   
   .form-label {
       font-size: var(--fs-sm);
       font-weight: var(--fw-700);
       color: var(--ink);
       margin-bottom: 0.4rem;
       transition: color 0.15s ease;
   }
   
   /* the label picks up the accent while its own field has focus */
   /* :has(> .form-control:focus) > .form-label,
   :has(> .form-select:focus) > .form-label {
       color: var(--accent);
   }
    */

    /* ============================================================
   RADIO PILLS — trip type on the transport forms
   .custom-radio-field lost its rules in the rewrite, so it was
   falling back to main.css. Matches the filled fields: a block
   with one heavy edge, filled with the accent when chosen.
   ============================================================ */

.custom-radio-field label {
    font-size: var(--fs-md);
    font-weight: var(--fw-600);
    color: var(--ink);
    background-color: var(--paper-2);
    border: 1px solid transparent;
    border-bottom: 2px solid var(--line-strong);
    border-radius: var(--br-btn);
    transition: var(--transition);
}

.custom-radio-field label:hover {
    background-color: var(--neutral);
    border-bottom-color: var(--ink-3);
}

.custom-radio-field input[type="radio"]:checked + label {
    color: var(--white);
    background-color: var(--accent);
    border-bottom-color: var(--accent-active);
}

.custom-radio-field input[type="radio"]:focus-visible + label {
    box-shadow: var(--focus-ring);
}

   /* an invalid field keeps its shape and changes colour */
   .just-validate-error-field,
   .form-control.just-validate-error-field {
       border-color: transparent !important;
       border-bottom-color: var(--danger) !important;
       background-color: var(--red-50);
   }
   
   .just-validate-error-label {
       display: inline-block;
       margin-top: 0.4rem;
       font-size: var(--fs-sm);
       font-weight: var(--fw-600);
       color: var(--danger) !important;
   }
   
   /* the hero search shell wraps its own fields, so it takes the
      treatment rather than the fields inside it */
   .form-group {
       padding: 0;
       background-color: var(--paper-2);
       border: 1px solid transparent;
       border-bottom: 2px solid var(--line-strong);
       border-radius: var(--br-input);
       box-shadow: none;
       transition: var(--transition);
   }
   
   .form-group:focus-within {
       background-color: var(--white);
       border-color: transparent;
       border-bottom-color: var(--accent);
       box-shadow: var(--focus-ring);
   }
   
   .hero .form-group:focus-within {
       outline: none;
   }
   
   .form-check-input {
       border-color: var(--line-strong);
       border-radius: var(--br-sm);
       transition: var(--transition);
   }
   
   .form-check-input:checked {
       border-color: var(--accent);
       background-color: var(--accent);
   }
   
   .form-check-input:focus-visible {
       box-shadow: var(--focus-ring) !important;
   }
   
   .form-switch .form-check-input:not(:checked) {
       background-color: var(--white);
   }
   
   .form-switch .form-check-input:focus:not(:checked) {
       --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23E4602F'/%3e%3c/svg%3e");
   }

/* inline icons inside a field */
.input-icons {
    color: var(--ink-3);
    transition: color 0.2s ease;
}

.input-icons svg {
    display: block;
    width: 20px;
    height: 20px;
}

.form-control:focus ~ .input-icons,
.form-select:focus ~ .input-icons {
    color: var(--accent);
}

.icons,
.icons-md,
.icons-sm,
.icons-xs,
.icons-lg {
    flex-shrink: 0;
}

svg.icons,
svg.icons-md,
svg.icons-sm,
svg.icons-xs {
    display: inline-block;
    vertical-align: middle;
}

.icons-lg {
    width: 44px;
    height: 44px;
}

/* ============================================================
   5. SURFACES
   ============================================================ */

.bg,
.bg-sm,
.bg-xxs {
    background-color: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--br-base);
}

.bg-dark .bg,
.bg-dark .bg-sm,
.bg-dark .bg-xxs,
.bg-charcoal .bg,
.bg-charcoal .bg-sm,
.bg-charcoal .bg-xxs {
    background-color: var(--navy-700);
    border-color: var(--hairline);
}

/* ============================================================
   MODAL — squared, on-brand
   Bootstrap keeps modal radius on its own variables, so the
   global radius pass in the SQUARE section doesn't reach it.
   ============================================================ */
   .modal-content {
    --bs-modal-border-radius: 0;
    --bs-modal-inner-border-radius: 0;
    --bs-modal-border-width: 1px;
    --bs-modal-border-color: var(--line);
    box-shadow: var(--shadow-lift);
}

.modal-backdrop {
    --bs-backdrop-bg: var(--navy-900);
    --bs-backdrop-opacity: 0.6;
}

.text-taxi {
    color: var(--accent) !important;
}

.bg-bordered,
.bg-bordered-dark,
.dashboard-card,
.modal-content,
.accordion-item {
    border-radius: var(--br-base);
}

.dashboard-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.modal-content {
    overflow: hidden;
    border: 0;
    box-shadow: var(--shadow-lift);
}

.accordion-item {
    background: var(--white);
    border: 1px solid var(--line);
    transition: var(--transition);
}

.accordion-item:hover {
    border-color: var(--line-strong);
}

.blurred-block {
    border-radius: var(--br-base);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.16);
}

.skeleton {
    background-color: var(--paper-2);
    background-image: linear-gradient(90deg,
            var(--paper-2) 0%,
            var(--white) 40%,
            var(--paper-2) 80%);
}

hr {
    border-color: var(--line);
    opacity: 1;
}

/* a plain white card, used for forms and side panels */
.panel-card {
    padding: var(--section-p-sm);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--br-base);
}

.panel-card--tint {
    background: var(--paper-2);
}

.panel-card > p + p {
    margin-top: 0.5rem;
}

/* ============================================================
   6. NAVBAR
   Light by default. On a page that opens with .hero-dark the
   bar goes navy so it merges into the hero, the way the
   reference does.
   ============================================================ */

.navbar {
    background-color: var(--white);
    border-bottom: 1px solid var(--line);
}

.navbar-brand {
    padding-bottom: 0;
    background-image: none;
}

.navbar-brand img {
    height: 30px;
    width: auto;
}

.navbar-brand span {
    font-family: var(--ff-title);
    font-weight: var(--fw-800);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

.nav-link {
    font-weight: var(--fw-600);
    color: var(--ink-2);
    border-radius: var(--br-md);
}

.navbar .btn-outline {
    color: var(--accent);
    border: 1px solid var(--accent)!important;
}

.navbar .btn-outline:hover {
    color: #fff!important;
    border: 1px solid #fff!important;
}

.nav-link:hover,
.navbar .btn:hover,
.navbar-toggler:hover,
.dropdown-item:hover,
.nav-link.dropdown-toggle.show {
    color: var(--accent);
    background-color: rgba(27, 35, 48, 0.05);
}

.navbar-toggler:hover {
    background: rgba(27, 35, 48, 0.05) !important;
}

.nav-link.active {
    color: var(--ink);
    background-color: var(--orange-50);
}

.navbar .dropdown-menu.show,
.navbar .dropdown-menu .dropdown-item {
    border-radius: var(--br-md);
}

.navbar .dropdown-menu.show {
    border: 1px solid var(--line);
    border-radius: var(--br-base);
    box-shadow: var(--shadow-lift);
}

/* ---- DROPDOWN PANEL --------------------------------------
   A plain Bootstrap dropdown: a small floating panel of links,
   whatever background the bar itself has.
   ---------------------------------------------------------- */
.navbar .dropdown-menu {
    min-width: 15rem;
    padding: 0.5rem;
}

.navbar .dropdown-menu .dropdown-item {
    padding: 0.625rem 0.75rem;
    font-size: var(--fs-md);
    font-weight: var(--fw-600);
    color: var(--ink);
    white-space: normal;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    color: var(--orange-700);
    background-color: var(--orange-50);
}

.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
    color: var(--white);
    background-color: var(--accent);
}

/* ---- NAVBAR OVER A DARK HERO ----------------------------- */
body:has(.hero-dark) .navbar {
    background-color: var(--navy-800);
    border-bottom-color: transparent;
}

body:has(.hero-dark) .navbar .navbar-brand span,
body:has(.hero-dark) .navbar > .container-md > .d-flex > .nav-item > .nav-link,
body:has(.hero-dark) .navbar > .container-md > .d-flex > .nav-link {
    color: var(--on-dark) !important;
}

body:has(.hero-dark) .navbar .navbar-toggler {
    color: var(--on-dark);
}

body:has(.hero-dark) .navbar .nav-link:hover,
body:has(.hero-dark) .navbar .nav-link.dropdown-toggle.show {
    background-color: rgba(255, 255, 255, 0.10);
}

body:has(.hero-dark) .navbar .nav-link.active {
    color: var(--accent)!important;
    background-color: transparent;
}

body:has(.hero-dark) .navbar-toggler:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* the offcanvas is a light sheet on every page */
.offcanvas {
    background-color: var(--white);
}

.offcanvas .nav-link {
    color: var(--ink-2) !important;
}

/* the benefits block stands alone on the subscription page,
   so it needs no rule above it */
   .recap-benefits--flush {
    padding-top: 0;
    border-top: 0;
}

/* ============================================================
   7. FOOTER
   A light band. main.css colours its links for a dark one, so
   those values are restated, and the animated underline is
   re-pointed at currentColor.
   ============================================================ */

footer {
    background-color: var(--paper);
    color: var(--ink-2);
}

footer a:not(.footer-brand):not(.btn) {
    /* background-image: linear-gradient(currentColor, currentColor); */
}

.footer-link,
.footer-contact-link {
    color: var(--ink-2);
}

.footer-link:hover,
.footer-link:focus,
.footer-contact-link:hover,
.footer-contact-link:focus {
    color: var(--orange-700);
}

.footer-brand-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0;
    background-image: none;
}

.footer-brand:hover,
.footer-brand:focus {
    background-size: 0 0;
}

.footer-brand img {
    height: 30px;
    width: auto;
}

.footer-brand span {
    font-family: var(--ff-title);
    font-size: var(--fs-h5);
    font-weight: var(--fw-800);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

footer .footer-title {
    font-family: var(--ff-title);
    font-size: var(--fs-md);
    font-weight: var(--fw-700);
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
}

.footer-columns ul li {
    line-height: 1.3;
}

.footer-contact-link {
    word-break: break-word;
}

.footer-bottom {
    border-top: 1px solid var(--line);
}

.footer-legal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .footer-legal {
        flex-direction: row;
        align-items: center;
    }
}

.footer-legal__text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.footer-legal__text img {
    max-width: 100%;
    height: auto;
}

.footer-payments img {
    flex-shrink: 0;
}

/* ============================================================
   8. LANDING — HERO
   Navy band that runs straight up under the navbar.
   ============================================================ */

.hero-dark {
    position: relative;
    background-color: var(--navy-800);
    color: var(--on-dark);
    overflow: hidden;
}

.hero-dark h1,
.hero-dark h2,
.hero-dark .h1,
.hero-dark .h2 {
    color: var(--white);
}

.hero-dark p {
    color: var(--on-dark-2);
}

.hero-dark__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.hero-dark__aside {
    max-width: 44ch;
}

/* the service pages set their title beside a photo rather than
   across seven columns, so it takes a step down */
.hero-dark__title--sm {
    font-size: clamp(1.875rem, 3vw, 2.75rem);
}

/* a text link with a round icon beside it */
.link-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--ff-family);
    font-size: var(--fs-md);
    font-weight: var(--fw-600);
    color: var(--on-dark);
    text-decoration: none;
    background-image: none;
}

.link-icon:hover,
.link-icon:focus-visible {
    color: var(--white);
}

.link-icon .circle-btn {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--navy-800);
    background: var(--white);
}

.link-icon:hover .circle-btn {
    background: var(--orange-300);
}

/* ============================================================
   9. LANDING — CARD RAIL
   The row of service photos under the hero. It breaks out of
   the container and scrolls sideways, so the last card is cut
   off by the viewport edge.
   ============================================================ */

.card-rail {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(1rem, calc((100vw - 71.25rem) / 2));
    scroll-padding-inline: max(1rem, calc((100vw - 71.25rem) / 2));
    padding-bottom: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.card-rail::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1400px) {
    .card-rail {
        padding-inline: max(1rem, calc((100vw - 82.5rem) / 2));
        scroll-padding-inline: max(1rem, calc((100vw - 82.5rem) / 2));
    }
}

.card-rail__item {
    flex: 0 0 auto;
    width: clamp(13rem, 38vw, 16.5rem);
    scroll-snap-align: start;
    text-decoration: none;
    background-image: none;
    color: inherit;
}

.card-rail__label {
    display: block;
    font-family: var(--ff-title);
    font-size: var(--fs-h6, 1.0625rem);
    font-weight: var(--fw-700);
    letter-spacing: -0.01em;
    color: var(--white);
    margin-bottom: 0.75rem;
}

.card-rail__meta {
    display: block;
    font-size: var(--fs-sm);
    color: var(--on-dark-2);
    margin: -0.5rem 0 0.75rem;
}

.card-rail__media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--navy-700);
    border-radius: var(--br-lg);
}

.card-rail__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card-rail__item:hover .card-rail__media img,
.card-rail__item:focus-visible .card-rail__media img {
    transform: scale(1.05);
}

.card-rail__item:focus-visible .card-rail__media {
    box-shadow: var(--focus-ring);
}

/* the one card that steps down out of line */
.card-rail__item--featured {
    padding-top: 3.25rem;
}

@media (max-width: 767.98px) {
    .card-rail__item--featured {
        padding-top: 0;
    }
}

/* ============================================================
   10. LANDING — FLOATING PANEL
   White card pulled up over the foot of the navy band.
   ============================================================ */

.float-panel {
    position: relative;
    z-index: 3;
    margin-top: clamp(-5rem, -6vw, -3rem);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--white);
    border-radius: var(--br-lg);
    box-shadow: var(--shadow-lift);
}

.float-panel__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
    .float-panel__head {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
}

.float-panel__title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--ff-title);
    font-size: var(--fs-base);
    font-weight: var(--fw-700);
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.float-panel__title svg {
    flex-shrink: 0;
    color: var(--accent);
}

.float-panel__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
}

@media (min-width: 576px) {
    .float-panel__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .float-panel__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        gap: 1rem;
    }
}

/* one labelled cell inside the panel */
.float-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.float-field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-500);
    color: var(--ink-3);
}

.float-field__value {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    font-size: var(--fs-md);
    font-weight: var(--fw-600);
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid transparent;
    border-radius: var(--br-md);
    min-height: 3.25rem;
    line-height: 1.3;
}

a.float-field__value {
    text-decoration: none;
    background-image: none;
    transition: var(--transition);
}

a.float-field__value:hover,
a.float-field__value:focus-visible {
    background: var(--orange-50);
    border-color: var(--orange-200);
    color: var(--orange-700);
}

.float-field__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--orange-600);
    background: var(--orange-50);
    border-radius: var(--br-sm);
}

a.float-field__value:hover .float-field__icon {
    color: var(--white);
    background: var(--accent);
}

.float-panel__action .btn {
    width: 100%;
    min-height: 3.25rem;
}

@media (min-width: 992px) {
    .float-panel__action .btn {
        min-width: 10rem;
    }
}

/* ============================================================
   11. LANDING — REASONS + COLLAGE
   ============================================================ */

.reason-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: reason;
}

.reason-item {
    counter-increment: reason;
}

/* two-up variant, for the service pages' list of points */
@media (min-width: 768px) {
    .reason-list--grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
        row-gap: 2.5rem;
    }
}

.reason-item__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.4rem 0.95rem;
    margin-bottom: 0.9rem;
    font-family: var(--ff-title);
    font-size: var(--fs-md);
    font-weight: var(--fw-700);
    font-variant-numeric: lining-nums;
    line-height: 1.2;
    color: var(--white);
    background: var(--accent);
    border-radius: var(--br-rd);
}

.reason-item__num::before {
    content: "0" counter(reason);
}

.reason-item__title {
    font-family: var(--ff-title);
    font-size: var(--fs-h6, 1.25rem);
    font-weight: var(--fw-400);
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 0.5rem;
    max-width: 34ch;
}

.reason-item__text {
    font-size: var(--fs-md);
    color: var(--ink-2);
    margin: 0;
    max-width: 44ch;
}

/* ---- PHOTO COLLAGE --------------------------------------- */
.collage {
    position: relative;
    padding: 1.5rem 0;
}

.collage__main {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--paper-2);
    border-radius: var(--br-lg);
}

.collage__main img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collage__inset {
    position: absolute;
    left: -1rem;
    bottom: 3.5rem;
    width: 58%;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--paper-2);
    border: 6px solid var(--white);
    border-radius: var(--br-lg);
    box-shadow: var(--shadow-lift);
}

.collage__inset img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .collage__inset {
        display: none;
    }
}

/* the small white cards that sit over the photo */
.float-chip {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 17rem;
    padding: 0.75rem 1rem;
    background: var(--white);
    border-radius: var(--br-base);
    box-shadow: var(--shadow-lift);
}

.float-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--white);
    background: var(--accent);
    border-radius: 50%;
}

.float-chip__body {
    min-width: 0;
}

.float-chip__label {
    display: block;
    font-size: var(--fs-xs, 0.75rem);
    font-weight: var(--fw-600);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.float-chip__value {
    display: block;
    font-family: var(--ff-title);
    font-size: var(--fs-sm);
    font-weight: var(--fw-700);
    line-height: 1.35;
    color: var(--ink);
}

.float-chip--top {
    top: 0;
    right: -0.5rem;
}

.float-chip--inset {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
}

.float-chip--bottom {
    bottom: 0;
    right: 1.5rem;
}

@media (max-width: 767.98px) {
    .float-chip {
        max-width: 13rem;
        padding: 0.625rem 0.75rem;
    }

    .float-chip--top {
        right: 0;
    }

    .float-chip--bottom {
        right: 0;
    }
}

/* ============================================================
   12. LANDING — SERVICE CARDS
   The 3 x 2 grid. Photo, title, one line of detail, action.
   ============================================================ */

.svc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.75rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--br-lg);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.svc-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lift);
    transform: translateY(-4px);
}

.svc-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--paper-2);
    border-radius: var(--br-base);
}

.svc-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.svc-card:hover .svc-card__media img {
    transform: scale(1.05);
}

/* the round marker in the corner of the photo */
.svc-card__badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--orange-600);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
}

.svc-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.35rem;
    padding: 1rem 0.5rem 0.5rem;
}

.svc-card__title {
    font-family: var(--ff-title);
    font-size: var(--fs-h6, 1.0625rem);
    font-weight: var(--fw-700);
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
}

.svc-card__meta {
    font-size: var(--fs-sm);
    color: var(--ink-3);
    margin: 0;
}

.svc-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
}

.svc-card__actions .btn {
    flex: 1 1 auto;
}

/* ============================================================
   13. LANDING — DARK BAND + QUOTE CARDS
   ============================================================ */

.section-dark {
    background-color: var(--navy-800);
    color: var(--on-dark-2);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark .h1,
.section-dark .h2,
.section-dark .h3 {
    color: var(--white);
}

.section-dark p {
    color: var(--on-dark-2);
}

.quote-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 1.5rem;
    background: var(--navy-700);
    border: 1px solid var(--hairline);
    border-radius: var(--br-base);
}

.quote-card__mark {
    color: var(--orange-400);
}

.quote-card__text {
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--on-dark);
    margin: 0;
}

.quote-card__foot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}

.quote-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--orange-300);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.quote-card__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-700);
    color: var(--on-dark);
}

/* ============================================================
   14. SHARED COMPONENTS
   Used by the landing page and by views still to be reworked.
   ============================================================ */

/* ---- CHIPS ----------------------------------------------- */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    font-size: var(--fs-md);
    font-weight: var(--fw-600);
    line-height: 1.35;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--br-rd);
}

a.chip {
    text-decoration: none;
    background-image: none;
    transition: var(--transition);
}

a.chip:hover,
a.chip:focus-visible {
    color: var(--orange-700);
    background: var(--orange-50);
    border-color: var(--orange-200);
}

.chip--tint {
    color: var(--orange-700);
    background: var(--orange-50);
    border-color: var(--orange-100);
}

/* ---- TICK LIST ------------------------------------------- */
.tick-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .tick-list--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }
}

.tick-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: var(--fs-md);
}

.tick-list li .checkmarks {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

/* ---- BULLET / NUMBERED LISTS ----------------------------- */
.bullet-list,
.numbered-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.numbered-list {
    counter-reset: numbered;
}

.bullet-list li,
.numbered-list li {
    position: relative;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--ink-2);
}

.bullet-list li {
    padding-left: 1rem;
}

.bullet-list li::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.numbered-list li {
    counter-increment: numbered;
    padding-left: 1.75rem;
}

.numbered-list li::before {
    content: counter(numbered) ".";
    position: absolute;
    left: 0;
    font-family: var(--ff-title);
    font-weight: var(--fw-700);
    color: var(--orange-700);
}

/* ---- STEP TILE / STEP LIST ------------------------------- */
.step-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    padding: var(--section-p-xs);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--br-lg);
    transition: var(--transition);
}

.step-tile:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lift);
    transform: translateY(-3px);
}

.step-tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.step-tile__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.35rem 0.9rem;
    font-family: var(--ff-title);
    font-size: var(--fs-md);
    font-weight: var(--fw-700);
    font-variant-numeric: lining-nums;
    color: var(--white);
    background: var(--accent);
    border-radius: var(--br-rd);
}

.step-tile__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--orange-600);
    background: var(--orange-50);
    border-radius: 50%;
}

.step-tile__body {
    margin-top: auto;
}

.step-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.step-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.step-list li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.5rem;
    bottom: -1.5rem;
    left: 1.125rem;
    width: 1px;
    background: var(--line);
}

.step-list .step-badge {
    position: relative;
    z-index: 1;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-family: var(--ff-title);
    font-size: 1rem;
    font-weight: var(--fw-700);
    line-height: 1;
    color: var(--white);
    background: var(--accent);
    border: 0;
    border-radius: 50%;
}

/* ---- CONTACT METHOD ROW ---------------------------------- */
.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: var(--fs-md);
    font-weight: var(--fw-600);
    color: var(--ink);
    text-decoration: none;
    word-break: break-word;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--br-md);
    transition: var(--transition);
}

.contact-method svg {
    flex-shrink: 0;
    color: var(--orange-600);
}

.contact-method:hover,
.contact-method:focus-visible {
    color: var(--orange-700);
    background: var(--orange-50);
    border-color: var(--orange-200);
}

.contact-method__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-500);
    color: var(--ink-2);
}

.contact-method__value {
    font-family: var(--ff-title);
    font-size: var(--fs-base);
    font-weight: var(--fw-700);
    color: var(--ink);
}

/* ---- CONTACT BLOCK --------------------------------------- */
.contact-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 992px) {
    .contact-block {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 3.5rem;
        align-items: center;
    }
}

.contact-block:not(.contact-block--dark) {
    padding: var(--section-p-sm);
    background: var(--orange-50);
    border: 1px solid var(--orange-100);
    border-radius: var(--br-lg);
}

.contact-block--dark {
    padding: 0;
    background: none;
    border: 0;
}

.contact-block__body {
    min-width: 0;
}

.contact-block__body p {
    max-width: 46ch;
}

.contact-block__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .contact-block__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

.contact-block__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.contact-block .contact-method {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 1rem 1.25rem;
}

.contact-block--dark .contact-method {
    background: var(--navy-700);
    border-color: var(--hairline);
}

.contact-block--dark .contact-method__label {
    color: var(--on-dark-2);
}

.contact-block--dark .contact-method__value {
    color: var(--white);
}

.contact-block__hours {
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.contact-block--dark .contact-block__hours {
    color: var(--on-dark-2);
}

/* ---- FEATURE MEDIA --------------------------------------- */
.feature-media--wide {
    aspect-ratio: 16 / 10;
}

.feature-media--tall {
    aspect-ratio: 3 / 4;
}

@media (max-width: 767.98px) {
    .feature-media--tall {
        aspect-ratio: 4 / 3;
    }
}

.feature-overlap__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--br-lg);
}

.feature-overlap__panel {
    padding: var(--section-p-sm);
    background: var(--white);
    border-radius: var(--br-lg);
    box-shadow: var(--shadow-lift);
}

@media (max-width: 991.98px) {
    .feature-overlap__panel {
        position: relative;
        z-index: 2;
        margin-top: -2.5rem;
        margin-inline: 1rem;
    }
}

@media (min-width: 992px) {
    .feature-overlap__panel {
        position: relative;
        z-index: 2;
        margin-left: -4rem;
    }
}

.bleed-right {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--br-lg);
}

@media (min-width: 992px) {
    .bleed-right {
        margin-right: calc(50% - 50vw);
        border-radius: var(--br-lg) 0 0 var(--br-lg);
        aspect-ratio: 4 / 3;
    }
}

/* generic cover-image box */
.service-pane__media {
    position: relative;
    height: 100%;
    min-height: 240px;
    overflow: hidden;
}

.service-pane__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .service-pane__media {
        min-height: 380px;
    }
}

/* ---- TABS / PAGINATION ----------------------------------- */
#dashboardTabs .nav-underline .nav-link,
#tabs .nav-underline .nav-link {
    border-radius: var(--br-md);
}

#dashboardTabs .nav-underline .nav-link.active,
#tabs .nav-underline .nav-link.active {
    color: var(--ink);
    background-color: var(--orange-50);
    border-color: var(--accent) !important;
    box-shadow: none;
}

.scroll-btn {
    background-color: var(--white);
    border: 1px solid var(--line) !important;
}

.scroll-btn:hover,
.scrollable-buttons button:hover {
    background-color: var(--paper-2);
    border-color: var(--ink) !important;
}

.paginator li a {
    border-radius: var(--br-md);
    font-weight: var(--fw-600);
}

.paginator li a:hover {
    color: var(--orange-700);
    background: var(--orange-50);
}

.paginator li.active a {
    color: var(--white);
    background: var(--accent);
}

/* ---- ACCORDION ------------------------------------------- */
.faq-accordion .accordion-item {
    background: var(--white);
    transition: var(--transition);
}

.faq-accordion .accordion-item:hover {
    border-color: var(--line-strong);
}

.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--orange-200);
    box-shadow: var(--shadow);
}

.faq-accordion .accordion-button {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
}

.accordion-button:not(.collapsed) {
    color: var(--ink) !important;
}

/* main.css wipes Bootstrap's background-image chevron, so it is
   drawn from borders here instead */
.faq-accordion .accordion-button::after {
    content: "";
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.3rem;
    margin-left: auto;
    background-image: none;
    border-top: 0;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    border-left: 0;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(-135deg);
}

.faq-accordion .accordion-body {
    padding-top: 0.5rem;
}

/* ---- FEEDBACK -------------------------------------------- */
.message,
.error-msg,
.alert {
    border-radius: var(--br-md);
    padding: 0.875rem 1rem;
}

.message.error,
.error-msg {
    background: var(--red-50);
    border-color: var(--danger);
}

.message.success,
.alert-success {
    background: var(--green-50);
    border-color: var(--success);
}

/* .just-validate-error-label {
    color: var(--danger) !important;
}

.just-validate-error-field {
    border-color: var(--danger) !important;
} */

.ticket-success span::before,
.ticket-open span::before,
.ticket-ouvert span::before {
    background-color: var(--success);
}

/* ---- OFFER ----------------------------------------------- */
.offer {
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--br-lg);
}

.offer__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: var(--section-p-sm);
    background: var(--orange-50);
    border-bottom: 1px solid var(--orange-100);
}

@media (min-width: 768px) {
    .offer__header {
        flex-direction: row;
        align-items: center;
    }
}

.offer__lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.offer__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.85rem;
    font-size: var(--fs-xs, 0.75rem);
    font-weight: var(--fw-700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--accent);
    border-radius: var(--br-rd);
}

.offer__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.offer__amount {
    font-family: var(--ff-title);
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: var(--fw-800);
    font-variant-numeric: lining-nums;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
}

.offer__cadence {
    font-size: var(--fs-h5);
    font-weight: var(--fw-600);
    color: var(--ink-2);
}

.offer__terms {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink-2);
}

.offer__action {
    flex-shrink: 0;
    width: 100%;
}

.offer__action .btn {
    width: 100%;
}

@media (min-width: 768px) {
    .offer__action {
        width: auto;
    }

    .offer__action .btn {
        width: auto;
        min-width: 13rem;
    }
}

.offer__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: var(--section-p-sm);
}

.offer__benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    padding: 0;
}

@media (min-width: 576px) {
    .offer__benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }
}

@media (min-width: 992px) {
    .offer__benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.offer__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.offer__benefits li .checkmarks {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.offer__notes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

/* ============================================================
   15. SERVICE PAGE HERO
   Kept so the booking pages keep working until they are
   reworked in turn.
   ============================================================ */

.hero-band {
    padding-top: 0;
    padding-bottom: var(--section-p-lg);
}

.hero-band__media {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(340px, 44vw, 620px);
    overflow: hidden;
    background-color: var(--navy-800);
}

.hero-band__media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-band__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            rgba(21, 28, 41, 0.86) 0%,
            rgba(21, 28, 41, 0.58) 42%,
            rgba(21, 28, 41, 0.16) 100%);
}

.hero-band__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.hero-band__inner h1,
.hero-band__inner h2 {
    color: var(--white);
}

.hero-band .hero-sub,
.hero-band__text p {
    color: rgba(255, 255, 255, 0.82);
}

.hero-search {
    position: relative;
    z-index: 3;
    margin-top: clamp(-5rem, -7vw, -2.5rem);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background: var(--white);
    border-radius: var(--br-lg);
    box-shadow: var(--shadow-lift);
}

.search-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .search-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.search-extras {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 992px) {
    .search-extras {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: 1.5rem;
    }
}

.search-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
    .search-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .search-actions .btn {
        min-width: 13rem;
        width: auto;
    }
}

.pay-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pay-section__title {
    font-family: var(--ff-title);
    font-size: var(--fs-base);
    font-weight: var(--fw-700);
    color: var(--ink);
    margin: 0;
}

/* service-page forms reserve room for their inline icons */
#form-event .form-control,
#form-event .form-select,
#form-train .form-control,
#form-train .form-select,
#form-hotel .form-control,
#form-hotel .form-select,
#form-flight .form-control,
#form-flight .form-select,
#form-taxi .form-control,
#form-taxi .form-select {
    padding-left: 2.75rem;
}

#form-event textarea.form-control,
#form-train textarea.form-control,
#form-hotel textarea.form-control,
#form-flight textarea.form-control,
#form-taxi textarea.form-control {
    padding-left: 1rem;
}

#form-event .form-select,
#form-train .form-select,
#form-hotel .form-select,
#form-flight .form-select,
#form-taxi .form-select {
    padding-right: 2.5rem;
}

#form-train .select-sm,
#form-flight .select-sm {
    padding-left: 1rem;
}

#form-hotel .form-guest-selector {
    display: flex;
    align-items: center;
    padding-left: 2.75rem;
}

#form-hotel .guest-selector > .input-icons,
#form-taxi .input-icons,
.ac > .input-icons {
    z-index: 2;
}

#form-taxi .has-location-icon {
    padding-left: 2.75rem;
    padding-right: 3rem !important;
}

#geolocation-btn {
    top: 50%;
}

#input-city {
    padding-left: 2.75rem;
}

@media (max-width: 767.98px) {
    #input-restaurant {
        padding-left: 2.75rem;
    }
}

/* ============================================================
   16. MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .btn,
    .btn:hover,
    .btn:active,
    .svc-card,
    .svc-card:hover,
    .step-tile:hover,
    .contact-method,
    .circle-btn,
    .circle-btn:hover {
        transform: none;
        transition: none;
    }

    .card-rail__item:hover .card-rail__media img,
    .svc-card:hover .svc-card__media img {
        transform: none;
    }
}
/* ============================================================
   OFFER — navy price panel beside the benefit list
   Overrides the .offer block earlier in this file. Benefits now
   use .tick-list, so .offer__benefits is no longer referenced.
   ============================================================ */

   .offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--br-lg);
}

@media (min-width: 992px) {
    .offer {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

/* ---- PRICE PANEL ----------------------------------------- */
.offer__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    height: 100%;
    padding: var(--section-p-sm);
    background: var(--navy-800);
    border-bottom: 0;
}

@media (min-width: 768px) {
    .offer__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.offer__lockup {
    gap: 1rem;
    width: 100%;
}

.offer__amount {
    color: var(--white);
}

.offer__cadence {
    color: var(--on-dark-2);
}

.offer__terms {
    color: var(--on-dark-2);
}

/* the terms string carries .text-dark spans, which would sit
   navy-on-navy here */
.offer__terms .text-dark {
    color: var(--white) !important;
}

.offer__action {
    width: 100%;
}

@media (min-width: 768px) {
    .offer__action,
    .offer__action .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ============================================================
   CARD RAIL — MARQUEE
   The hero strip as a continuously drifting band of photos
   rather than a scroller of links. The markup repeats the set
   twice; the track is translated by exactly half its width plus
   half a gap, so the loop has no seam.
   ============================================================ */

   .card-rail--marquee {
    display: block;
    padding-inline: 0;
    padding-bottom: 0;
    overflow: hidden;
    scroll-snap-type: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

@media (min-width: 1400px) {
    .card-rail--marquee {
        padding-inline: 0;
    }
}

.card-rail__track {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    width: max-content;
    animation: card-rail-drift 45s linear infinite;
}

.card-rail--marquee:hover .card-rail__track,
.card-rail--marquee:focus-within .card-rail__track {
    animation-play-state: paused;
}

@keyframes card-rail-drift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-50% - 0.625rem), 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-rail__track {
        animation: none;
    }

    .card-rail--marquee {
        overflow-x: auto;
        scrollbar-width: none;
    }
}

/* ============================================================
   PROCESS PANEL — three steps across
   The steps were built on .float-field, which reads as a form
   control. They now use the numbered .reason-item, in a
   three-across variant with hairlines between them.
   .float-panel__grid and .float-field* are no longer used.
   ============================================================ */

   @media (min-width: 992px) {
    .reason-list--3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .reason-list--3 > li {
        padding-right: 2rem;
    }

    .reason-list--3 > li + li {
        padding-left: 2rem;
        border-left: 1px solid var(--line);
    }

    .reason-list--3 > li:last-child {
        padding-right: 0;
    }
}

.float-panel .reason-item__num {
    margin-bottom: 0.75rem;
}

.float-panel .reason-item__title {
    font-size: var(--fs-base);
    max-width: 26ch;
}

.float-panel__action {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.float-panel__action .btn {
    width: 100%;
}

@media (min-width: 576px) {
    .float-panel__action .btn {
        width: auto;
        min-width: 12rem;
    }
}

/* ============================================================
   WHY US — reasons as cards on a navy band
   ============================================================ */

   .reason-list--cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .reason-list--cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.reason-list--cards .reason-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 1.5rem;
    background: var(--navy-700);
    border: 1px solid var(--hairline);
    border-radius: var(--br-base);
}

.reason-list--cards .reason-item__num {
    margin-bottom: 1rem;
}

.section-dark .reason-item__title {
    color: var(--white);
}

.section-dark .reason-item__text {
    color: var(--on-dark-2);
}

/* chip anchored to the left of a photo that bleeds off the
   right edge, where --bottom would sit past the viewport */
.float-chip--start {
    top: auto;
    right: auto;
    bottom: 1.5rem;
    left: 1.5rem;
}

@media (max-width: 575.98px) {
    .float-chip--start {
        bottom: 1rem;
        left: 1rem;
    }
}

/* ============================================================
   SQUARE — the radius pass
   Every rectangle on the site loses its corners: buttons,
   inputs, cards, photos, panels, chips, badges and Bootstrap's
   .rounded-* utilities all read their radius from these tokens.
   True circles (icon badges, the round icon button, radios)
   keep their shape, since those are shapes rather than
   softened corners.
   ============================================================ */

   :root {
    --br-sm: 0;
    --br-md: 0;
    --br-btn: 0;
    --br-input: 0;
    --br-base: 0;
    --br-lg: 0;
    --br-rd: 0;

    --bs-border-radius-sm: 0;
    --bs-border-radius: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-pill: 0;
}

/* the pill-shaped labels were padded for a round end cap; as
   square tags they want a touch more height */
.reason-item__num,
.step-tile__num,
.offer__badge,
.chip {
    padding-block: 0.45rem;
}

.circle-btn,
.step-tile__icon,
.step-list .step-badge,
.float-chip__icon,
.svc-card__badge,
.quote-card__icon {
    border-radius: 0;
}

/* ============================================================
   FAQ — questions as a ruled list
   Replaces the earlier .qa-list / .qa-item rules.
   ============================================================ */

   .qa-list {
    counter-reset: qa;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--line-strong);
}

.qa-item {
    counter-increment: qa;
    padding-block: 2.75rem;
    border-top: 1px solid var(--line-strong);
}

@media (min-width: 992px) {
    .qa-item {
        padding-block: 4rem;
    }
}

/* on mobile the question and its answer stack, so they need
   more room between them than the default gutter */
.qa-item .row {
    --bs-gutter-y: 1.5rem;
}

.qa-item__num {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-family: var(--ff-title);
    font-size: var(--fs-sm);
    font-weight: var(--fw-700);
    font-variant-numeric: lining-nums;
    letter-spacing: 0.08em;
    color: var(--accent);
}

.qa-item__num::before {
    content: counter(qa, decimal-leading-zero);
}

.qa-item__q {
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--ink);
    margin: 0;
    max-width: 26ch;
}

.qa-item__a > :last-child {
    margin-bottom: 0 !important;
}

/* ============================================================
   AUTH SPLIT — navy pitch one half, form the other
   Used by the sign-up page; the aside carries .section-dark for
   its colours, so only layout lives here.
   ============================================================ */

   .auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .auth-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: calc(100vh - 5.5rem);
        min-height: calc(100svh - 5.5rem);
    }
}

.auth-split__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: clamp(2rem, 5vw, 4rem);
}

.auth-split__brand {
    font-family: var(--ff-title);
    font-size: var(--fs-md);
    font-weight: var(--fw-700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-2);
}

.auth-split__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--white);
}

.auth-split__form {
    width: 100%;
    max-width: 30rem;
}

/* CakePHP wraps each control in .input, which brings its own
   margin; the form's own gap supplies the spacing */
.auth-split__form .input {
    margin-bottom: 0;
}

/* the price lockup on a dark panel */
.section-dark .offer__amount {
    color: var(--white);
}

.section-dark .offer__cadence,
.section-dark .offer__terms {
    color: var(--on-dark-2);
}

.section-dark .offer__terms .text-dark {
    color: var(--white) !important;
}

/* chip variant for a dark panel */
.chip--outline {
    color: var(--on-dark);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
}

/* ============================================================
   AUTH SPLIT — wider form
   For forms with paired fields, such as contact.
   ============================================================ */

   .auth-split__form--wide {
    max-width: 34rem;
}

/* ============================================================
   DARK BAND — lists and the destructive button
   .bullet-list and .numbered-list set a dark ink colour, which
   disappears on a navy panel. .btn-danger was still Bootstrap's
   own red rather than the palette's.
   ============================================================ */

   :root {
    --red-600: #A83226;
}

.section-dark .bullet-list li,
.section-dark .numbered-list li {
    color: var(--on-dark-2);
}

.btn-danger {
    color: var(--white);
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:focus-visible {
    color: var(--white);
    background-color: var(--red-600);
    border-color: var(--red-600);
}

/* ============================================================
   AUTH SPLIT — richer panel
   Overrides the earlier .auth-split rules. The aside stops
   being a flat slab: a warm glow in one corner, a cool one in
   the other, and a fine grain over the top. The brand pins to
   the corner so the copy sits centred instead of being
   stretched apart by space-between.
   ============================================================ */

   .auth-split__aside {
    position: relative;
    isolation: isolate;
    justify-content: center;
    gap: 2.5rem;
    padding: clamp(5rem, 11vw, 8rem) clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
    background-color: var(--navy-900);
    background-image:
        radial-gradient(85% 65% at 88% 108%, rgba(228, 96, 47, 0.38) 0%, transparent 62%),
        radial-gradient(75% 60% at -10% -10%, rgba(58, 69, 87, 0.85) 0%, transparent 68%);
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .auth-split__aside {
        min-height: 26rem;
    }
}

/* fine grain, so the gradient never bands */
.auth-split__aside::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.20;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.auth-split__brand {
    position: absolute;
    top: clamp(2rem, 5vw, 4rem);
    left: clamp(2rem, 5vw, 4rem);
    z-index: 1;
}

/* the chips read as a quiet footer rather than as buttons */
.auth-split__aside .chip--outline {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
}

/* ---- FORM SIDE -------------------------------------------
   Pure white left the white fields invisible; the page tone
   gives them an edge. The accent rule anchors the heading.
   ---------------------------------------------------------- */
.auth-split__main {
    background: var(--paper);
}

.auth-split__form h1::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-bottom: 1.5rem;
    background: var(--accent);
}

/* ============================================================
   AUTH SPLIT — photo panel and wide form
   The service pages put their photo behind the panel instead of
   beside it: the image is the base layer, the scrim and the
   warm glow sit over it, and the grain from .auth-split__aside
   covers the lot. The photo comes in as --hero-photo.
   ============================================================ */

   .auth-split__aside--media {
    background-image:
        radial-gradient(70% 55% at 88% 108%, rgba(228, 96, 47, 0.42) 0%, transparent 62%),
        linear-gradient(180deg,
            rgba(21, 28, 41, 0.88) 0%,
            rgba(21, 28, 41, 0.70) 45%,
            rgba(21, 28, 41, 0.94) 100%),
        var(--hero-photo, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* a booking form needs more room than a sign-in form */
.auth-split__form--xl {
    max-width: 40rem;
}

/* the field grids are viewport-driven, so inside half a screen
   they have to be capped */
.auth-split .search-grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 576px) {
    .auth-split .search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.auth-split .search-extras {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .auth-split .search-extras {
        grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 1.2fr);
    }
}

/* ============================================================
   THIRD-PARTY CONTROLS — slider, date picker, steppers
   nouislider and flatpickr load from the "css" block, which the
   layout fetches after this file, so these selectors are heavier
   than the defaults they replace.
   ============================================================ */

/* ---- PRICE SLIDER ---------------------------------------- */
#price-range.noUi-target {
    height: 4px;
    margin: 1.25rem 0 0.75rem;
    background: var(--line);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#price-range .noUi-connect {
    background: var(--accent);
}

#price-range .noUi-handle {
    width: 18px;
    height: 18px;
    top: -7px;
    right: -9px;
    background: var(--white);
    border: 2px solid var(--accent);
    border-radius: 50%;
    box-shadow: var(--shadow-btn);
    cursor: grab;
}

#price-range .noUi-handle::before,
#price-range .noUi-handle::after {
    display: none;
}

#price-range .noUi-handle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---- STEPPER BUTTONS ------------------------------------- */
.btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: var(--fs-base);
    line-height: 1;
    border-radius: 50%;
}

.btn-outline-dark.btn-circle {
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-outline-dark.btn-circle:hover,
.btn-outline-dark.btn-circle:focus-visible {
    color: var(--white);
    background-color: var(--accent);
    border-color: var(--accent);
}

.guest-selector-dropdown {
    min-width: 17rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
}

.guest-selector-dropdown li {
    padding-block: 0.4rem;
}

.guest-selector-count {
    min-width: 1.5rem;
    text-align: center;
}

/* ---- DATE PICKER -----------------------------------------
   Used by every service form, so this is worth having even
   though only hotel and flight are converted so far.
   ---------------------------------------------------------- */
.flatpickr-calendar {
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: var(--shadow-lift);
    font-family: var(--ff-family);
}

.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-weekdays {
    background: var(--white);
    color: var(--ink);
    fill: var(--ink);
}

.flatpickr-calendar span.flatpickr-weekday {
    color: var(--ink-3);
    font-weight: var(--fw-700);
}

.flatpickr-calendar .flatpickr-day {
    border-radius: 0;
    color: var(--ink);
}

.flatpickr-calendar .flatpickr-day:hover {
    background: var(--paper-2);
    border-color: var(--paper-2);
}

.flatpickr-calendar .flatpickr-day.today {
    border-color: var(--accent);
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
    color: var(--white);
    background: var(--accent);
    border-color: var(--accent);
}

.flatpickr-calendar .flatpickr-day.inRange {
    color: var(--orange-700);
    background: var(--orange-50);
    border-color: var(--orange-50);
    box-shadow: -5px 0 0 var(--orange-50), 5px 0 0 var(--orange-50);
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: var(--ink-3);
}

/* ============================================================
   SEARCHBAR IN THE SPLIT PANEL
   .form-group still carries the old hero-bar styling from
   main.css — grey slab, row direction, centred items — which is
   what was boxing the fields in and shrinking the submit.
   Inside the split panel the fields lay themselves out.
   ============================================================ */
   .auth-split__form .form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.auth-split__form .form-group > .btn {
    width: 100%;
}

/* the accent rule sits above the panel heading — h1 already has
   it; h2 heads the panel when the h1 lives on the photo side */
.auth-split__form h2::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-bottom: 1.5rem;
    background: var(--accent);
}

/* ============================================================
   COLLAGE — two frames, the second dropped below the first
   ============================================================ */
   .collage--duo {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1rem;
    align-items: start;
}

.collage--duo .collage__main,
.collage--duo .collage__side {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 3 / 4;
}

.collage--duo .collage__side {
    margin-top: clamp(1.5rem, 5vw, 3.5rem);
}

.collage--duo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   CONTACT BLOCK — the routes as ruled rows, actions on a rule
   .contact-method is shared with the contact page aside, where
   the anchors carry no label/value spans; a bare link still
   renders as a plain ruled row there.
   ============================================================ */
   .contact-methods {
    display: flex;
    flex-direction: column;
}

.contact-method {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--line-strong);
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-method:last-child {
    border-bottom: 1px solid var(--line-strong);
}

.contact-method__label {
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.contact-method__value {
    font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    word-break: break-word;
}

.contact-method:hover .contact-method__value,
.contact-method:focus-visible .contact-method__value {
    color: var(--accent);
}

.section-dark .contact-method {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.14);
}

.section-dark .contact-method__label {
    color: var(--on-dark-2);
}

.section-dark .contact-method__value {
    color: var(--on-dark);
}

.section-dark .contact-method:hover .contact-method__value,
.section-dark .contact-method:focus-visible .contact-method__value {
    color: var(--orange-300);
}

/* the footer rule carrying the actions and the hours line */
.contact-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
    border-top: 1px solid var(--line-strong);
}

.section-dark .contact-foot {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.contact-foot__hours {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.section-dark .contact-foot__hours {
    color: var(--on-dark-2);
}

.contact-foot__pulse {
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    background: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(228, 96, 47, 0.18);
}

/* the eyebrow reads orange on any navy band, as it does in the hero */
.section-dark .eyebrow {
    color: var(--orange-300);
}

/* ============================================================
   SEARCH SHELL — the restaurant bar outside the split panel
   Same .form-group reset as .auth-split__form, for the results
   page where the bar sits on a plain band.
   ============================================================ */
   .search-shell .form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.search-shell .form-group > .btn {
    width: 100%;
}

.search-shell .search-grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 576px) {
    .search-shell .search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   CHECKOUT — revisions
   ============================================================ */

/* the fee line is a note, the amount is the thing worth reading */
.pay-price__label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-2);
}

.pay-price .price-title {
    font-size: 1.5rem;
    line-height: 1;
    margin-left: 0.25rem;
}

/* expiry and CVV stay side by side at any panel width */
.pay-grid > * {
    min-width: 0;
}

.pay-grid--tight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* the service the request is for */
.recap-service {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy-900);
    background: var(--orange-300);
}

/* the back button now sits on the navy panel */
.section-dark .btn-back {
    background-color: transparent;
    color: var(--on-white);
    border-color: rgba(255, 255, 255, 0.24);
}

.section-dark .btn-back svg path { 
    fill: white;
}

.section-dark .btn-back:hover {
    color: var(--navy-900);
    background: var(--orange-300);
    border-color: var(--orange-300);
}

/* ============================================================
   REASONS AS RULED ROWS — number left, claim right, hairline
   between. No boxes.
   ============================================================ */
   .reason-list--rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: reason;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reason-list--rows .reason-item {
    display: flex;
    align-items: baseline;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1.25rem, 3vw, 1.75rem) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: none;
}

.reason-list--rows .reason-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.reason-list--rows .reason-item__num {
    flex: none;
    counter-increment: reason;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--orange-300);
}

.reason-list--rows .reason-item__num::before {
    content: counter(reason, decimal-leading-zero);
}

.reason-list--rows .reason-item__title {
    margin: 0;
    font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--on-dark);
}

/* ============================================================
   SERVICES AS AN INDEX — one ruled row per service, the whole
   row is the link
   ============================================================ */
.svc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line-strong);
}

.svc-row {
    border-bottom: 1px solid var(--line-strong);
}

.svc-row__link {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.75rem);
    padding: clamp(1rem, 2.5vw, 1.5rem) 0;
    color: inherit;
    text-decoration: none;
    transition: padding-inline 0.25s ease, background 0.25s ease;
}

@media (min-width: 768px) {
    .svc-row__link {
        grid-template-columns: auto 1fr auto;
    }
}

.svc-row__link:hover,
.svc-row__link:focus-visible {
    background: var(--paper);
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}

.svc-row__media {
    flex: none;
    display: block;
    width: clamp(4rem, 9vw, 6rem);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-2);
}

.svc-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);
}

.svc-row__link:hover .svc-row__media img {
    transform: scale(1.06);
}

.svc-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.svc-row__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.svc-row__icon {
    flex: none;
    display: inline-flex;
    color: var(--accent);
}

.svc-row__title {
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    transition: color 0.2s ease;
}

.svc-row__link:hover .svc-row__title {
    color: var(--accent);
}

.svc-row__meta {
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.svc-row__action {
    display: none;
    align-items: center;
    gap: 0.625rem;
    flex: none;
    font-weight: 600;
    color: var(--accent);
}

@media (min-width: 768px) {
    .svc-row__action {
        display: inline-flex;
    }
}

.svc-row__arrow {
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1);
}

.svc-row__link:hover .svc-row__arrow {
    transform: translateX(4px);
}

/* ============================================================
   CLOSING CTA — the line and the button on one rule
   ============================================================ */
.closing-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
    padding-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.closing-cta__text {
    flex: 1 1 24rem;
    max-width: 48rem;
    color: var(--on-dark-2);
}

/* ============================================================
   COOKIE BANNER — a navy panel in the bottom corner
   ============================================================ */
   .cookie-banner {
    position: fixed;
    z-index: 1045;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: 28rem;

    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);

    background: var(--navy-900);
    border: 1px solid var(--navy-700);
    box-shadow: 0 1.5rem 3rem rgba(21, 28, 41, 0.28);

    animation: cookie-rise 0.45s cubic-bezier(.2, .8, .2, 1) both;
}

@media (min-width: 576px) {
    .cookie-banner {
        left: 1.5rem;
        right: auto;
        bottom: 1.5rem;
    }
}

.cookie-banner::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent);
}

.cookie-banner__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cookie-banner__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-300);
}

.cookie-banner__text {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--on-dark-2);
}

.cookie-banner__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.cookie-banner__actions .btn {
    width: 100%;
    justify-content: center;
}

@keyframes cookie-rise {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        animation: none;
    }
}

/* ============================================================
   DASHBOARD TABS — the account sub-navigation
   ============================================================ */
   .dash-tabs {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--line-strong);
}

.dash-tabs__list {
    display: flex;
    gap: clamp(0.25rem, 2vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;

    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dash-tabs__list::-webkit-scrollbar {
    display: none;
}

.dash-tabs__item {
    flex: none;
}

.dash-tabs__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.75rem;
    white-space: nowrap;

    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-2);
    text-decoration: none;

    transition: color 0.2s ease;
}

.dash-tabs__link::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1);
}

.dash-tabs__link:hover,
.dash-tabs__link:focus-visible {
    color: var(--ink);
}

.dash-tabs__link:hover::after {
    transform: scaleX(1);
}

.dash-tabs__link.is-current {
    color: var(--ink);
}

.dash-tabs__link.is-current::after {
    transform: scaleX(1);
    height: 3px;
}

.dash-tabs__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
}

.dash-tabs__icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    color: var(--ink-3);
    transition: color 0.2s ease;
}

.dash-tabs__link:hover .dash-tabs__icon,
.dash-tabs__link.is-current .dash-tabs__icon {
    color: var(--accent);
}

/* the labels alone on very narrow screens */
@media (max-width: 480px) {
    .dash-tabs__icon {
        display: none;
    }

    .dash-tabs__link {
        padding-inline: 0.5rem;
    }
}

/* ============================================================
   ACCOUNT — the identity strip above the profile form
   ============================================================ */
   .acct-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--line);
}

.acct-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: var(--accent);
    background: var(--orange-50);
    border: 1px solid var(--orange-100);
}

.acct-avatar .icons {
    width: 1.375rem;
    height: 1.375rem;
}

.acct-identity__mail {
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
}

.acct-identity__since {
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.acct-actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.acct-actions .btn {
    min-width: 12rem;
    justify-content: center;
}

/* ============================================================
   MODAL — header, body, footer
   (the squared .modal-content rules are in the MODAL block
   added with the taxi page)
   ============================================================ */
   .modal-header,
   .modal-footer {
       --bs-modal-header-border-color: var(--line);
       --bs-modal-footer-border-color: var(--line);
   }
   
   .modal-header,
   .modal-body,
   .modal-footer {
       --bs-modal-padding: clamp(1.25rem, 4vw, 2rem);
       --bs-modal-header-padding: clamp(1.25rem, 4vw, 2rem);
   }
   
   .modal-actions {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 0.75rem;
       width: 100%;
       margin: 0;
   }
   
   .modal-actions .btn {
       width: 100%;
       justify-content: center;
   }
   
   /* ============================================================
      LOSS LIST — what cancelling gives up
      ============================================================ */
   .loss-list {
       display: flex;
       flex-direction: column;
       gap: 0.625rem;
       margin: 0;
       padding: 0;
       list-style: none;
   }
   
   .loss-list li {
       display: flex;
       align-items: center;
       gap: 0.625rem;
       font-size: 0.9375rem;
       color: var(--ink-2);
   }
   
   .loss-list__mark {
       flex: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 1.25rem;
       height: 1.25rem;
       color: var(--red-600);
       border: 1px solid currentColor;
   }
   
   .loss-list__mark svg {
       width: 0.75rem;
       height: 0.75rem;
   }
   .form-hint {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

/* ============================================================
   RECAP ROWS — colour scoped to the band they sit on
   (supersedes the fixed on-dark colours in the CHECKOUT block)
   ============================================================ */
   .recap-row,
   .recap-card__title,
   .recap-route__city {
       color: var(--ink);
   }
   
   .recap-row__icon,
   .recap-row__label {
       color: var(--ink-3);
   }
   
   .recap-tag {
       color: var(--ink-2);
       border-color: var(--line-strong);
   }
   
   .section-dark .recap-row,
   .section-dark .recap-card__title,
   .section-dark .recap-route__city {
       color: var(--on-dark);
   }
   
   .section-dark .recap-row__icon,
   .section-dark .recap-row__label,
   .section-dark .recap-tag {
       color: var(--on-dark-2);
   }
   
   .section-dark .recap-tag {
       border-color: rgba(255, 255, 255, 0.2);
   }
   
   .recap-sep {
       margin: 0 0.5rem;
       color: var(--ink-3);
   }
   
   /* ============================================================
      CONFIRMATION PAGE
      ============================================================ */
   .conf-head {
       text-align: center;
       margin-bottom: clamp(2rem, 5vw, 3rem);
   }
   
   .conf-head__mark {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 3.5rem;
       height: 3.5rem;
       margin-bottom: 1.25rem;
       color: var(--white);
       background: var(--accent);
   }
   
   .conf-head__mark svg {
       width: 1.75rem;
       height: 1.75rem;
   }
   
   .conf-item {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   
   @media (min-width: 576px) {
       .conf-item {
           flex-direction: row;
           align-items: flex-start;
           gap: 1.25rem;
       }
   }
   
   .conf-item__media {
       flex: none;
       width: 5rem;
       height: 5rem;
       overflow: hidden;
       background: var(--paper-2);
   }
   
   .conf-item__media img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .conf-item__body {
       display: flex;
       flex-direction: column;
       gap: 0.625rem;
       min-width: 0;
   }
   
   .conf-item__title {
       font-size: 1.125rem;
       font-weight: 700;
       line-height: 1.3;
       color: var(--ink);
   }
   
   .conf-section {
       padding-top: 1.5rem;
       border-top: 1px solid var(--line);
   }
   
   .status-pill {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       flex: none;
       padding: 0.375rem 0.75rem;
       font-size: 0.8125rem;
       font-weight: 600;
       color: var(--orange-700);
       background: var(--orange-50);
       border: 1px solid var(--orange-100);
   }
   
   .status-pill svg {
       width: 1rem;
       height: 1rem;
   }

   /* ============================================================
   DASHBOARD TABS — Bootstrap's tab plugin still drives these,
   so .nav-link stays and only the paint changes
   ============================================================ */
#dashboardTabs .nav {
    gap: clamp(0.25rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--line-strong);
    scrollbar-width: none;
}

#dashboardTabs .nav::-webkit-scrollbar {
    display: none;
}

#dashboardTabs .nav-link {
    --bs-nav-link-color: var(--ink-2);
    --bs-nav-link-hover-color: var(--ink);
    --bs-nav-underline-link-active-color: var(--ink);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.75rem;
    border: 0;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
}

#dashboardTabs .nav-link::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1);
}

#dashboardTabs .nav-link:hover::after {
    transform: scaleX(1);
}

#dashboardTabs .nav-link.active::after {
    transform: scaleX(1);
    height: 3px;
}

.dash-tab__icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    color: var(--ink-3);
    transition: color 0.2s ease;
}

#dashboardTabs .nav-link:hover .dash-tab__icon,
#dashboardTabs .nav-link.active .dash-tab__icon {
    color: var(--accent);
}

@media (max-width: 575.98px) {
    .dash-tab__icon {
        display: none;
    }
}

/* ============================================================
   NOTICE — the phone-verification prompt
   ============================================================ */
.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--orange-50);
    border: 1px solid var(--orange-100);
    border-left: 3px solid var(--accent);
}

.notice__icon {
    flex: none;
    display: inline-flex;
    color: var(--accent);
}

.notice__icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.notice__body {
    flex: 1 1 18rem;
    min-width: 0;
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.notice__title {
    font-weight: 700;
    color: var(--ink);
}

/* ============================================================
   PROMO CARD — the sidebar panel beside the bookings
   ============================================================ */
.promo-card {
    position: relative;
    isolation: isolate;
    display: flex;
    overflow: hidden;
    min-height: 22rem;
    height: 100%;
    background: var(--navy-900);
}

.promo-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
}

.promo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(21, 28, 41, 0.25) 0%, rgba(21, 28, 41, 0.85) 100%);
}

.promo-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.promo-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--on-dark);
}

/* a narrower dialog for the short confirm */
.modal-sm-custom {
    max-width: 26rem;
}

/* ============================================================
   SEARCH EXTRAS — stacked instead of side by side
   ============================================================ */
   .search-extras--stack {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
    gap: 1.5rem;
}

/* the noUiSlider handle sits above the track, so the row needs
   a little headroom when it is the first thing in the group */
.search-extras--stack .search-extras__price {
    padding-top: 0.5rem;
}

/* ============================================================
   LEGAL DOCUMENT
   The long-form pages: CGV, mentions légales, politique de
   confidentialité, politique de cookies, conditions du service.
   A sticky contents rail on one side, the document on the other.
   ============================================================ */

/* ---- CONTENTS RAIL ---------------------------------------
   Sticky from lg up, a plain block underneath. The offset
   clears the navbar plus a little air.
   ---------------------------------------------------------- */
   .legal-toc {
    padding: 1.25rem;
    background-color: var(--paper-2);
    border: 1px solid var(--line);
}

.legal-toc__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: legal-toc;
}

.legal-toc__list li {
    counter-increment: legal-toc;
    border-top: 1px solid var(--line);
}

.legal-toc__list li:first-child {
    border-top: 0;
}

.legal-toc__list a {
    display: flex;
    gap: 0.625rem;
    padding: 0.5rem 0;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-500);
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.15s ease;
}

/* the number comes from the list, so the link text stays
   translatable on its own */
.legal-toc__list a::before {
    content: counter(legal-toc);
    flex: 0 0 1.5rem;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-700);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.legal-toc__list a:hover,
.legal-toc__list a:focus-visible {
    color: var(--orange-700);
}

.legal-toc__list a:hover::before,
.legal-toc__list a:focus-visible::before {
    color: var(--orange-700);
}

.legal-toc__list a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* @media (min-width: 992px) {
    .legal-toc {
        position: sticky;
        top: 6rem;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
} */

/* on a phone 17 entries would push the document off the screen,
   so the list scrolls inside its own box */
@media (max-width: 991.98px) {
    .legal-toc__list {
        max-height: 13rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ---- DOCUMENT BODY --------------------------------------- */
.legal {
    max-width: 68ch;
    color: var(--ink-2);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

.legal > p:first-child {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: var(--fs-md);
}

.legal p {
    margin-bottom: 1rem;
}

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

.legal strong {
    color: var(--ink);
    font-weight: var(--fw-700);
}

.legal a {
    color: var(--orange-700);
    font-weight: var(--fw-600);
    text-decoration: underline;
}

.legal a:hover,
.legal a:focus-visible {
    color: var(--orange-600);
}

/* ---- ARTICLES -------------------------------------------- */
.legal-section {
    /* the anchor lands below the sticky navbar, not under it */
    scroll-margin-top: 6rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

/* the intro paragraph already closes with a rule */
.legal-section:first-of-type {
    margin-top: 0;
    border-top: 0;
}

.legal-section h2 {
    margin-bottom: 1rem;
    color: var(--ink);
    line-height: 1.3;
}

/* the lettered sub-headings (A. B. C.) carry .h5 in the markup,
   which matches the article title — step them down instead */
.legal-section h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--ink);
    font-size: var(--fs-h6);
    font-weight: var(--fw-700);
}

/* ---- LISTS INSIDE AN ARTICLE ----------------------------- */
.legal-section ul {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.legal-section ul li {
    position: relative;
    margin-bottom: 0.625rem;
    padding-left: 1.25rem;
}

.legal-section ul li:last-child {
    margin-bottom: 0;
}

.legal-section ul li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0.125rem;
    width: 0.375rem;
    height: 1px;
    background-color: var(--orange-500);
}

/* ---- QUIET ASIDE ----------------------------------------- */
.legal i,
.legal em {
    display: block;
    padding: 0.875rem 1rem;
    background-color: var(--paper-2);
    border-left: 2px solid var(--orange-500);
    font-style: normal;
    font-size: var(--fs-sm);
}

@media (min-width: 992px) {
    .legal-section {
        padding-top: 2.5rem;
    }
}

/* ============================================================
   LEGAL DOCUMENT
   The long-form pages: CGV, mentions légales, politique de
   confidentialité, politique de cookies, conditions du service.
   A sticky contents rail on one side, the document on the other.
   ============================================================ */

/* ---- CONTENTS RAIL ---------------------------------------
   Sticky from lg up, a plain block underneath. The offset
   clears the navbar plus a little air.
   ---------------------------------------------------------- */
   .legal-toc {
    padding: 1.25rem;
    background-color: var(--paper-2);
    border: 1px solid var(--line);
}

.legal-toc__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: legal-toc;
}

.legal-toc__list li {
    counter-increment: legal-toc;
    border-top: 1px solid var(--line);
}

.legal-toc__list li:first-child {
    border-top: 0;
}

.legal-toc__list a {
    display: flex;
    gap: 0.625rem;
    padding: 0.5rem 0;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-500);
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.15s ease;
}

/* the number comes from the list, so the link text stays
   translatable on its own */
.legal-toc__list a::before {
    content: counter(legal-toc);
    flex: 0 0 1.5rem;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-700);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.legal-toc__list a:hover,
.legal-toc__list a:focus-visible {
    color: var(--orange-700);
}

.legal-toc__list a:hover::before,
.legal-toc__list a:focus-visible::before {
    color: var(--orange-700);
}

.legal-toc__list a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (min-width: 992px) {
    .legal-toc {
        position: sticky;
        top: 6rem;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* on a phone 17 entries would push the document off the screen,
   so the list scrolls inside its own box */
@media (max-width: 991.98px) {
    .legal-toc__list {
        max-height: 13rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ---- DOCUMENT BODY --------------------------------------- */
.legal {
    max-width: 68ch;
    color: var(--ink-2);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

.legal > p:first-child {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: var(--fs-md);
}

.legal p {
    margin-bottom: 1rem;
}

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

.legal strong {
    color: var(--ink);
    font-weight: var(--fw-700);
}

.legal a {
    color: var(--orange-700);
    font-weight: var(--fw-600);
    text-decoration: underline;
}

.legal a:hover,
.legal a:focus-visible {
    color: var(--orange-600);
}

/* ---- ARTICLES -------------------------------------------- */
.legal-section {
    /* the anchor lands below the sticky navbar, not under it */
    scroll-margin-top: 6rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

/* the intro paragraph already closes with a rule */
.legal-section:first-of-type {
    margin-top: 0;
    border-top: 0;
}

.legal-section h2 {
    margin-bottom: 1rem;
    color: var(--ink);
    line-height: 1.3;
}

/* the lettered sub-headings (A. B. C.) carry .h5 in the markup,
   which matches the article title — step them down instead */
.legal-section h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--ink);
    font-size: var(--fs-h6);
    font-weight: var(--fw-700);
}

/* ---- LISTS INSIDE AN ARTICLE ----------------------------- */
.legal-section ul {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.legal-section ul li {
    position: relative;
    margin-bottom: 0.625rem;
    padding-left: 1.25rem;
}

.legal-section ul li:last-child {
    margin-bottom: 0;
}

.legal-section ul li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0.125rem;
    width: 0.375rem;
    height: 1px;
    background-color: var(--orange-500);
}

/* ---- QUIET ASIDE ----------------------------------------- */
.legal i,
.legal em {
    display: block;
    padding: 0.875rem 1rem;
    background-color: var(--paper-2);
    border-left: 2px solid var(--orange-500);
    font-style: normal;
    font-size: var(--fs-sm);
}

@media (min-width: 992px) {
    .legal-section {
        padding-top: 2.5rem;
    }
}

/* ---- TABLE ----------------------------------------------- */
.legal .table-responsive {
    margin-bottom: 1rem;
}

.legal table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--line);
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.legal thead th {
    padding: 0.75rem 1rem;
    background-color: var(--navy-800);
    color: var(--on-dark);
    font-weight: var(--fw-700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: middle;
}

.legal tbody td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--line);
    vertical-align: top;
}

/* the prestation reads as the row's label, the answer stays quiet */
.legal tbody td:first-child {
    color: var(--ink);
    font-weight: var(--fw-600);
}

.legal tbody td + td {
    color: var(--ink-2);
}

.legal tbody tr:nth-child(even) {
    background-color: var(--paper-2);
}

@media (max-width: 575.98px) {
    .legal thead th,
    .legal tbody td {
        padding: 0.625rem 0.75rem;
    }
}

/* ============================================================
   EDITORIAL SPLIT
   A section heading held on one side while the prose scrolls
   past on the other. Used on the pricing page and by the
   .sticky-heading blocks in the basic-content element.
   ============================================================ */

   .editorial-split {
    position: relative;
}

/* the hairline only reads once the two halves sit side by side */
@media (min-width: 992px) {
    .editorial-split {
        padding-top: 2.5rem;
        border-top: 1px solid var(--line);
    }

    .editorial-split--dark {
        border-top-color: var(--navy-700);
    }
}

/* ---- STICKY HEADING --------------------------------------
   Holds the heading level with the first line of the prose
   beside it. Falls back to a plain block below lg, where the
   two halves are stacked and sticking would be wrong.
   ---------------------------------------------------------- */
.sticky-heading {
    position: static;
}

@media (min-width: 992px) {
    .sticky-heading {
        position: sticky;
        top: 6rem;
    }
}

/* a heading inside the split keeps its own measure so it breaks
   on a sensible line rather than running the full column */
.editorial-split .sticky-heading h2 {
    max-width: 18ch;
}

@media (max-width: 991.98px) {
    .editorial-split .sticky-heading h2 {
        max-width: none;
    }
}

/* ============================================================
   DASHBOARD RESERVATION CARD
   The row that each booking gets in the logged space: a service
   label, the booking's own detail groups, and a status pill,
   all folded into an accordion.
   ============================================================ */

/* ---- SERVICE LABEL ---------------------------------------
   Sits above the booking name so the row says what it is
   before the reader parses the title.
   ---------------------------------------------------------- */
.card-eyebrow {
    display: block;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-700);
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ---- STATUS PILL -----------------------------------------
   Keeps the Bootstrap alert colour the controller picks, but
   drops the alert's block behaviour so it reads as a tag.
   ---------------------------------------------------------- */
.status-pill {
    flex-shrink: 0;
    align-self: flex-start;
    width: auto;
    border-radius: 0;
}

@media (min-width: 768px) {
    .status-pill {
        align-self: center;
        margin-left: auto;
    }
}

/* ---- THE ROW ITSELF --------------------------------------
   .dashboard-card already carries the surface; this is the
   accordion behaviour on top of it.
   ---------------------------------------------------------- */
.dashboard-card .accordion-button {
    background-color: transparent;
    box-shadow: none;
}

.dashboard-card .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: inherit;
}

/* the chevron would collide with the status pill on a row this
   busy, so the whole header is the target instead */
.dashboard-card .accordion-button::after {
    display: none;
}

.dashboard-card:hover {
    border-color: var(--line-strong);
}

/* each detail group keeps its parts together when the row wraps */
.dashboard-card .accordion-button > div > div {
    min-width: 0;
}

/* ---- MORE BUTTON ----------------------------------------- */
.btn-dropdown-more:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---- VERTICAL SEPARATOR ---------------------------------- */
.dashboard-card .vr {
    align-self: center;
    min-height: 1em;
    color: var(--line-strong);
    opacity: 1;
}

/* ============================================================
   DASHBOARD RESERVATION CARD
   The row that each booking gets in the logged space: a service
   label, the booking's own detail groups, and a status pill,
   all folded into an accordion.
   ============================================================ */

/* ---- SERVICE LABEL ---------------------------------------
   Sits above the booking name so the row says what it is
   before the reader parses the title.
   ---------------------------------------------------------- */
   .card-eyebrow {
    display: block;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-700);
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ---- STATUS PILL -----------------------------------------
   Keeps the Bootstrap alert colour the controller picks, but
   drops the alert's block behaviour so it reads as a tag.
   ---------------------------------------------------------- */
.status-pill {
    flex-shrink: 0;
    align-self: flex-start;
    width: auto;
    border-radius: 0;
}

@media (min-width: 768px) {
    .status-pill {
        align-self: center;
        margin-left: auto;
    }
}

/* ---- THE ROW ITSELF --------------------------------------
   .dashboard-card already carries the surface; this is the
   accordion behaviour on top of it.
   ---------------------------------------------------------- */
.dashboard-card .accordion-button {
    background-color: transparent;
    box-shadow: none;
}

.dashboard-card .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: inherit;
}

/* the chevron would collide with the status pill on a row this
   busy, so the whole header is the target instead */
.dashboard-card .accordion-button::after {
    display: none;
}

.dashboard-card:hover {
    border-color: var(--line-strong);
}

/* each detail group keeps its parts together when the row wraps */
.dashboard-card .accordion-button > div > div {
    min-width: 0;
}

/* ---- MORE BUTTON ----------------------------------------- */
.btn-dropdown-more:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---- VERTICAL SEPARATOR ---------------------------------- */
.dashboard-card .vr {
    align-self: center;
    min-height: 1em;
    color: var(--line-strong);
    opacity: 1;
}

/* ---- ROUTE LINE ------------------------------------------
   The rail between origin and destination on a transport card,
   with a dot per stop. Positions come from the view as a left
   percentage, so only the look lives here.
   ---------------------------------------------------------- */
.card-route {
    min-width: 0;
    flex: 1 1 auto;
}

.route-line {
    flex: 1 1 auto;
    min-width: 3rem;
    height: 1.25rem;
}

.route-line .line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--line-strong);
    transform: translateY(-50%);
}

.route-line .dot {
    position: absolute;
    top: 50%;
    width: 0.4375rem;
    height: 0.4375rem;
    background-color: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* the ends are hollow so the stops in between read as the
   filled ones */
.route-line .start-dot,
.route-line .end-dot {
    background-color: var(--white);
    border: 1px solid var(--accent);
}

.route-line .start-dot {
    left: 0;
    transform: translate(0, -50%);
}

.route-line .end-dot {
    left: auto;
    right: 0;
    transform: translate(0, -50%);
}

/* "direct" / "1 escale" sits above the rail; the row gives it
   room only from lg up, where the card is wide enough */
.route-line__label {
    top: -0.75rem;
    left: 0;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .route-line {
        height: 1.75rem;
        margin-top: 0.5rem;
    }
}

/* ============================================================
   DASHBOARD RESERVATION CARD
   The row that each booking gets in the logged space: a service
   label, the booking's own detail groups, and a status pill,
   all folded into an accordion.
   ============================================================ */

/* ---- SERVICE LABEL ---------------------------------------
   Sits above the booking name so the row says what it is
   before the reader parses the title.
   ---------------------------------------------------------- */
   .card-eyebrow {
    display: block;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-700);
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ---- STATUS PILL -----------------------------------------
   Keeps the Bootstrap alert colour the controller picks, but
   drops the alert's block behaviour so it reads as a tag.
   ---------------------------------------------------------- */
.status-pill {
    flex-shrink: 0;
    align-self: flex-start;
    width: auto;
    border-radius: 0;
}

@media (min-width: 768px) {
    .status-pill {
        align-self: center;
        margin-left: auto;
    }
}

/* ---- THE ROW ITSELF --------------------------------------
   .dashboard-card already carries the surface; this is the
   accordion behaviour on top of it.
   ---------------------------------------------------------- */
.dashboard-card .accordion-button {
    background-color: transparent;
    box-shadow: none;
}

.dashboard-card .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: inherit;
}

/* the chevron would collide with the status pill on a row this
   busy, so the whole header is the target instead */
.dashboard-card .accordion-button::after {
    display: none;
}

.dashboard-card:hover {
    border-color: var(--line-strong);
}

/* each detail group keeps its parts together when the row wraps */
.dashboard-card .accordion-button > div > div {
    min-width: 0;
}

/* ---- MORE BUTTON ----------------------------------------- */
.btn-dropdown-more:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---- VERTICAL SEPARATOR ---------------------------------- */
.dashboard-card .vr {
    align-self: center;
    min-height: 1em;
    color: var(--line-strong);
    opacity: 1;
}

/* ---- ROUTE LINE ------------------------------------------
   The rail between origin and destination on a transport card,
   with a dot per stop. Positions come from the view as a left
   percentage, so only the look lives here.
   ---------------------------------------------------------- */
.card-route {
    min-width: 0;
    flex: 1 1 auto;
}

.route-line {
    flex: 1 1 auto;
    min-width: 3rem;
    height: 1.25rem;
}

.route-line .line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--line-strong);
    transform: translateY(-50%);
}

.route-line .dot {
    position: absolute;
    top: 50%;
    width: 0.4375rem;
    height: 0.4375rem;
    background-color: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* the ends are hollow so the stops in between read as the
   filled ones */
.route-line .start-dot,
.route-line .end-dot {
    background-color: var(--white);
    border: 1px solid var(--accent);
}

.route-line .start-dot {
    left: 0;
    transform: translate(0, -50%);
}

.route-line .end-dot {
    left: auto;
    right: 0;
    transform: translate(0, -50%);
}

/* "direct" / "1 escale" sits above the rail; the row gives it
   room only from lg up, where the card is wide enough */
.route-line__label {
    top: -0.75rem;
    left: 0;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .route-line {
        height: 1.75rem;
        margin-top: 0.5rem;
    }
}

/* ---- DATE TILE -------------------------------------------
   A small tear-off calendar standing in for the service
   thumbnail on a card whose subject is a date: navy month
   strip over the day number. Purely decorative — the full
   dates are still in the row beside it and in the panel, so
   the view marks it aria-hidden.
   ---------------------------------------------------------- */
.date-tile {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    width: 2.875rem;
    background-color: var(--white);
    border: 1px solid var(--line);
    line-height: 1;
    text-align: center;
}

.date-tile__month {
    display: block;
    padding: 0.1875rem 0;
    background-color: var(--navy-800);
    color: var(--on-dark);
    font-size: 0.625rem;
    font-weight: var(--fw-700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.date-tile__day {
    display: block;
    padding: 0.3125rem 0 0.375rem;
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: var(--fw-800);
    font-variant-numeric: tabular-nums;
}

/* the accordion sets its own colours on everything inside the
   header link, so hold the tile's own */
.dashboard-card .accordion-button .date-tile__month {
    color: var(--on-dark);
}

.dashboard-card .accordion-button .date-tile__day {
    color: var(--ink);
}

/* ---- TAXI AWAITING A VEHICLE CHOICE ----------------------
   A taxi request with no type yet does not open; the row is
   handed to the vehicle picker instead. Moved here from the
   inline <style> in the taxi view.
   ---------------------------------------------------------- */
.taxi-type-empty-clickable {
    pointer-events: none;
}

/* ============================================================
   DASHBOARD SHELL
   The service rail beside the panels: a vertical list from xl
   up, a horizontal scroller below that.
   ============================================================ */

.dash-nav .nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0;
}

.dash-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.6875rem 0.875rem;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--ink-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-600);
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dash-nav .nav-link:hover {
    background-color: var(--paper-2);
    color: var(--ink);
}

.dash-nav .nav-link.active {
    background-color: var(--white);
    border-color: var(--line);
    color: var(--ink);
}

.dash-nav .nav-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dash-tab__icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

/* the active service gets an accent edge — on the left when the
   rail is vertical, underneath when it has collapsed to a row */
@media (min-width: 1200px) {
    .dash-nav .nav-link {
        border-left: 2px solid transparent;
    }

    .dash-nav .nav-link.active {
        border-left-color: var(--accent);
    }
}

@media (max-width: 1199.98px) {
    .dash-nav .nav {
        padding-bottom: 0.25rem;
        border-bottom: 1px solid var(--line);
    }

    .dash-nav .nav-item {
        flex: 0 0 auto;
    }

    .dash-nav .nav-link {
        width: auto;
        border-bottom: 2px solid transparent;
    }

    .dash-nav .nav-link.active {
        border-color: transparent;
        border-bottom-color: var(--accent);
        background-color: transparent;
    }
}

/* the promo sits under the rail; below xl it would push the
   results down, so it drops to the foot of the column */
@media (max-width: 1199.98px) {
    .dash-promo {
        display: none;
    }
}