/* Bee My Guest design system v80: "Honey & Linen, Apple-clear" (CONTRACT D11).
   Owner: website-foundation lane. Cookbook and rules: WS/DESIGN.md.

   Cascade
   - @layer bmg.tokens, bmg.base hold the custom properties and the element defaults. Layered rules
     lose to every unlayered rule, so a legacy or lane stylesheet always wins over them and loading
     this file on a legacy page changes nothing that page already styles.
   - Components (ui-*), typography helpers (t-*, .accent-serif), .theme-dark and the shared chrome
     are unlayered on purpose: the legacy stylesheets are unlayered and style bare elements
     (nav{}, footer{}, a{}, *{padding:0}), and an unlayered element selector beats any layered rule
     whatever its specificity. No legacy stylesheet uses the ui-, t- or accent-serif names, so the
     components never fight legacy class rules; the chrome also reverts legacy element styling.
   - Token names never reuse a legacy name (--ink, --accent, --radius-sm, --shadow-lg...).
     The v80 aliases stylesheet maps the legacy names onto these tokens.
   Breakpoints (min-width, as apple.com): 480 | 734 | 1068 | 1440. The global nav expands at 1180. */

@layer bmg.tokens, bmg.base;

/* ---------- Fonts (SIL OFL 1.1; the OFL-*.txt licences sit next to the font files) ---------- */
@font-face{font-family:"Inter Variable";src:url("/assets/fonts/inter-var.2c295d99e2.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Fraunces Variable";src:url("/assets/fonts/fraunces-normal.7234ed860a.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Fraunces Variable";src:url("/assets/fonts/fraunces-italic.066710ce7e.woff2") format("woff2");font-style:italic;font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jbmono-400.14425ba9c6.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jbmono-500.cb182feeed.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
/* Metric-matched fallback while Inter loads (limits layout shift). */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:107%;ascent-override:90%;descent-override:22.4%;line-gap-override:0%}

/* ---------- Tokens ---------- */
@layer bmg.tokens{
  :root{
    color-scheme:light;

    /* Brand primitives: reference only, components use the semantic tokens below. */
    --c-charcoal:#1A1715; --c-charcoal-2:#24201C; --c-charcoal-3:#2E2924; --c-charcoal-hover:#3A342D;
    --c-slate:#4D4940; --c-stone:#6B655B; --c-pebble:#8A8378; --c-sand:#D8CEBC;
    --c-bone:#F2EBDF; --c-linen:#FAF7F1; --c-paper:#FFFDF9;
    --c-honey:#C29F4F; --c-honey-light:#CFAE60; --c-honey-bright:#E5C878; --c-honey-soft:#F4E6BF;
    --c-honey-display:#9C7A30; --c-honey-deep:#73551A; --c-honey-ink:#5E4514;
    --c-moss:#326048; --c-moss-soft:#E7EFE9;

    /* Surfaces */
    --color-canvas:var(--c-linen);         /* page ground */
    --color-canvas-alt:var(--c-bone);      /* alternate sections, tiles, footer */
    --color-surface:var(--c-paper);        /* cards, inputs, sheets */
    --color-surface-raised:var(--c-paper);
    --color-ink:var(--c-charcoal);         /* primary button fill, dark tiles */
    --color-ink-hover:var(--c-charcoal-hover);
    --color-on-ink:var(--c-linen);
    --fill-primary:rgb(26 23 21 / .14);    /* tracks, progress */
    --fill-secondary:rgb(26 23 21 / .07);  /* secondary buttons, hover */
    --fill-tertiary:rgb(26 23 21 / .045);  /* segmented track, skeleton */

    /* Text (contrast on linen) */
    --text-primary:var(--c-charcoal);      /* 16.7:1 */
    --text-body:var(--c-slate);            /* 8.4:1, paragraphs and ledes */
    --text-secondary:var(--c-stone);       /* 5.4:1, meta, captions */
    --text-tertiary:var(--c-pebble);       /* 3.5:1, >= 24px or disabled only */
    --text-on-ink:var(--c-linen);
    --text-link:var(--c-honey-deep);       /* 6.45:1 */
    --text-link-hover:var(--c-honey-ink);

    /* Lines */
    --separator:rgb(26 23 21 / .10);
    --separator-strong:rgb(26 23 21 / .18);
    --control-border:var(--c-pebble);      /* 3.5:1, WCAG 1.4.11 */

    /* Accent (honey is never text on light grounds: 2.35:1) */
    --color-accent:var(--c-honey);
    --color-accent-hover:var(--c-honey-light);
    --color-on-accent:var(--c-charcoal);   /* 7.1:1 */
    --accent-text:var(--c-honey-deep);     /* eyebrows, small accent text */
    --accent-display:var(--c-honey-display); /* accent words >= 24px */
    --accent-tint:var(--c-honey-soft);     /* selected and range backgrounds */
    --selection-border:var(--c-honey-deep);

    /* Focus */
    --focus-ring:var(--c-honey-deep);
    --focus-halo:rgb(194 159 79 / .35);

    /* Status (text on tint >= 6:1; always paired with an icon or label) */
    --status-success:#326048; --status-success-text:#1F5135; --status-success-tint:#E7EFE9;
    --status-warning:#8A5A00; --status-warning-text:#7A4B00; --status-warning-tint:#F8EBCF;
    --status-danger:#8B2F2F;  --status-danger-text:#8B2F2F;  --status-danger-tint:#F7E3E0;
    --status-info:#2B5C8A;    --status-info-text:#24527E;    --status-info-tint:#E3ECF5;
    --status-neutral-text:var(--c-slate); --status-neutral-tint:#ECE7DE;
    /* Pending: carried over from an earlier day and waiting for the guest's tap (planners, garage fleet).
       Warm coral, never the error red; text 6.4:1 on the tint, the dashed line 4.3:1. */
    --pending:#C4553A; --pending-text:#8F3A20; --pending-tint:#FBEAE3; --pending-line:#B4532F;

    /* Glass (chrome only) */
    --glass-bg:rgb(250 247 241 / .78);
    --glass-bg-strong:rgb(250 247 241 / .94);
    --glass-bg-fallback:rgb(250 247 241 / .98);
    --glass-border:rgb(26 23 21 / .09);
    --glass-dark-bg:rgb(26 23 21 / .74);
    --glass-dark-bg-strong:rgb(26 23 21 / .9);
    --glass-dark-border:rgb(250 247 241 / .12);
    --glass-filter:saturate(180%) blur(20px);
    --scrim:rgb(18 15 12 / .48);
    --scrim-photo:linear-gradient(180deg,rgb(18 15 12 / .28) 0%,rgb(18 15 12 / 0) 30%,rgb(18 15 12 / .32) 55%,rgb(18 15 12 / .74) 100%);

    /* Inter for controls and numeric information; roman Fraunces for editorial hierarchy. */
    --font-display:"Inter Variable","Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-text:"Inter Variable","Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-serif:"Fraunces Variable","Fraunces",ui-serif,Georgia,serif;
    --font-editorial:var(--font-serif);
    --font-wordmark:var(--font-serif);
    --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

    --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

    /* Fluid scale, 375px -> 1440px */
    --fs-display:clamp(2.75rem,1.871rem + 3.756vw,5rem);       /* 44 -> 80 */
    --fs-headline:clamp(2.125rem,1.587rem + 2.293vw,3.5rem);   /* 34 -> 56 */
    --fs-title-1:clamp(1.75rem,1.457rem + 1.252vw,2.5rem);     /* 28 -> 40 */
    --fs-title-2:clamp(1.375rem,1.243rem + .563vw,1.75rem);    /* 22 -> 28 */
    --fs-title-3:clamp(1.1875rem,1.144rem + .188vw,1.3125rem); /* 19 -> 21 */
    --fs-lead:clamp(1.1875rem,1.077rem + .469vw,1.5rem);       /* 19 -> 24 */
    --fs-body:1.0625rem;      /* 17 */
    --fs-callout:.9375rem;    /* 15 */
    --fs-footnote:.8125rem;   /* 13 */
    --fs-caption:.75rem;      /* 12 */
    --fs-eyebrow:clamp(.9375rem,.893rem + .188vw,1.0625rem);   /* 15 -> 17 */
    --fs-input:1rem;          /* 16: no iOS zoom */

    --lh-display:1.04; --lh-headline:1.07; --lh-title-1:1.1; --lh-title-2:1.18; --lh-title-3:1.3;
    --lh-lead:1.42; --lh-body:1.53; --lh-prose:1.65; --lh-callout:1.47; --lh-footnote:1.38; --lh-caption:1.33;

    /* Tracking: tight on display sizes (SF Display-like), Inter's dynamic metrics below */
    --ls-display:-.03em; --ls-headline:-.026em; --ls-title-1:-.022em; --ls-title-2:-.019em;
    --ls-title-3:-.016em; --ls-lead:-.016em; --ls-body:-.012em; --ls-callout:-.009em;
    --ls-footnote:-.004em; --ls-caption:0em; --ls-caps:.06em;

    /* Spacing (4pt) */
    --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem;
    --space-7:2rem; --space-8:2.5rem; --space-9:3rem; --space-10:4rem; --space-11:5rem; --space-12:6rem; --space-13:8rem;
    --space-section:clamp(4rem,2.592rem + 6.009vw,8rem);      /* 64 -> 128 */
    --space-block:clamp(2rem,1.56rem + 1.878vw,3.25rem);       /* 32 -> 52 */
    --gutter:clamp(1.25rem,.81rem + 1.878vw,2.5rem);           /* 20 -> 40 */
    --grid-gap:clamp(.75rem,.574rem + .751vw,1.25rem);         /* 12 -> 20 */
    --tile-pad:clamp(1.75rem,1.222rem + 2.254vw,3.25rem);      /* 28 -> 52 */

    /* Widths (apple.com: 980 content, ~1200 grids, 1440 full bleed) */
    --w-text:40rem;      /* 640, prose measure */
    --w-content:61.25rem;/* 980 */
    --w-wide:75rem;      /* 1200 */
    --w-max:90rem;       /* 1440 */
    --nav-h:3.25rem;     /* 52 */
    --summary-h:4.5rem;
    --tap-min:2.75rem;   /* 44 */

    /* Radii. --r-pill is for tracks, dots and the sheet grabber only: no control is a pill (D21). */
    --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;
    --r-tile:clamp(1.25rem,1.074rem + .751vw,1.75rem);
    /* Controls (CONTRACT D21): rounded rectangles. Buttons 12px (small 10px), chips and segments 10px,
       badges 8px; only circular icon buttons stay round. Heights: primary 48, secondary 44, small 36. */
    --r-button:12px; --r-button-sm:10px; --r-control:10px; --r-badge:8px;
    --btn-h:3rem; --btn-h-secondary:2.75rem; --btn-h-sm:2.25rem; --btn-h-lg:3.25rem;

    /* Elevation: warm and very soft */
    --elevation-1:0 1px 2px rgb(38 31 24 / .04),0 1px 1px rgb(38 31 24 / .03);
    --elevation-2:0 1px 2px rgb(38 31 24 / .04),0 8px 24px rgb(38 31 24 / .06);
    --elevation-3:0 2px 8px rgb(38 31 24 / .05),0 20px 48px rgb(38 31 24 / .1);
    --elevation-sheet:0 -8px 40px rgb(18 15 12 / .16);

    /* Motion */
    --ease-standard:cubic-bezier(.28,.11,.32,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-in:cubic-bezier(.4,0,1,1);
    --ease-sheet:cubic-bezier(.32,.72,0,1);
    --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:480ms; --dur-reveal:800ms; --stagger:70ms;

    /* Layers */
    --z-raised:10; --z-sticky:100; --z-header:200; --z-menu:300; --z-summary:400; --z-sheet:1000; --z-toast:1100; --z-skip:1200;

    /* Icons (24px grid, 2px round strokes) for masks: background:currentColor; mask:var(--icon-x) */
    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
    --icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
    --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --icon-check-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    --icon-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --icon-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6.5 15h4'/%3E%3C/svg%3E");
    --icon-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E");
    --icon-sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 13.9 9 19.5 11l-5.6 2-1.9 5.5-1.9-5.5-5.6-2 5.6-2z'/%3E%3C/svg%3E");
    --icon-car:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17H3.5v-4.5L5.6 7.6A2 2 0 0 1 7.4 6.5h9.2a2 2 0 0 1 1.8 1.1l2.1 4.9V17H19M9 17h6M3.5 12.5h17'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
    --icon-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
    --icon-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5M12 16.5h.01'/%3E%3C/svg%3E");
    --icon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 16.5v-5M12 7.5h.01'/%3E%3C/svg%3E");
    --icon-refund:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.6-6.1L3.5 8.5'/%3E%3Cpath d='M3.5 3.5v5h5'/%3E%3C/svg%3E");
    --icon-swap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 3 4 4-4 4M20 7H8M8 21l-4-4 4-4M4 17h12'/%3E%3C/svg%3E");
    --icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    --icon-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --icon-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B655B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    /* Spec icons (model picker chips): seats, large suitcase, carry-on, engine capacity. */
    --icon-seat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='3.75'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
    --icon-suitcase:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='13.5' rx='2.5'/%3E%3Cpath d='M9.5 6V3.5h5V6M10 10v5.5M14 10v5.5M9 22h.01M15 22h.01'/%3E%3C/svg%3E");
    --icon-carry-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='12' rx='2.5'/%3E%3Cpath d='M9 8V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V8M3.5 13h17'/%3E%3C/svg%3E");
    --icon-engine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 17.5a8.5 8.5 0 1 1 15.6 0'/%3E%3Cpath d='m12 14 3.5-4.5'/%3E%3Ccircle cx='12' cy='14' r='1'/%3E%3C/svg%3E");

    /* Garage (vehicle selector, CONTRACT §13): one fixed night world, the same in both themes. The
       .ui-garage element also takes the dark scope below, so text, lines and focus are the dark values. */
    --c-night:#0E0C0B; --c-night-2:#171411;
    --garage-bg:var(--c-night);
    --garage-stage:var(--c-night-2);
    --garage-raised:rgb(250 247 241 / .05);
    --garage-raised-hover:rgb(250 247 241 / .09);
    --garage-line:rgb(250 247 241 / .13);
    --garage-line-strong:rgb(250 247 241 / .3);
    --garage-glass:rgb(14 12 11 / .42);
    --garage-glass-hover:rgb(14 12 11 / .66);
    --garage-glass-border:rgb(250 247 241 / .3);
    --garage-glass-filter:blur(12px) saturate(140%);
    --garage-scrim-top:rgb(10 8 7 / .66);
    --garage-scrim-mid:rgb(10 8 7 / .6);
    --garage-scrim-bottom:rgb(10 8 7 / .93);
    --garage-sweep:rgb(255 236 196 / .2);
    --garage-accent:var(--c-honey-bright);
    --garage-accent-hover:#EED692;
    --garage-accent-tint:rgb(229 200 120 / .12);
    --garage-glow:0 0 10px rgb(229 200 120 / .4);
    --garage-bar-off:rgb(250 247 241 / .14);
    --garage-text-shadow:0 1px 16px rgb(0 0 0 / .5);
    --garage-fade:650ms;   /* BMGGarage FADE_MS */
    --garage-sweep-time:1000ms;
  }

  /* Dark scope: immersive sections, dark tiles, photo tiles, toasts, the garage, or an element with .theme-dark.
     Light everywhere (CONTRACT D21): .theme-dark scopes a band or a card, never a page, so it does nothing
     on <html> or <body> (no page turns dark by itself, whatever a script toggles). */
  .theme-dark:not(html,body),.ui-section--dark,.ui-tile--dark,.ui-tile--media,.ui-hero--immersive,.ui-garage,.ui-sheet--garage{
    color-scheme:dark;
    --color-canvas:var(--c-charcoal); --color-canvas-alt:var(--c-charcoal-2);
    --color-surface:var(--c-charcoal-2); --color-surface-raised:var(--c-charcoal-3);
    --color-ink:var(--c-linen); --color-ink-hover:#FFFFFF; --color-on-ink:var(--c-charcoal);
    --fill-primary:rgb(250 247 241 / .18); --fill-secondary:rgb(250 247 241 / .11); --fill-tertiary:rgb(250 247 241 / .07);
    --text-primary:var(--c-linen); --text-body:#DDD5C8; --text-secondary:#B8B0A3; --text-tertiary:#9C9488;
    --text-on-ink:var(--c-charcoal); --text-link:var(--c-honey-bright); --text-link-hover:#F1DC9E;
    --separator:rgb(250 247 241 / .12); --separator-strong:rgb(250 247 241 / .22); --control-border:#9C9488;
    --accent-text:var(--c-honey-bright); --accent-display:var(--c-honey-bright);
    --accent-tint:rgb(229 200 120 / .16); --selection-border:var(--c-honey-bright);
    --focus-ring:var(--c-honey-bright); --focus-halo:rgb(229 200 120 / .35);
    --status-success:#8FCBA3; --status-success-text:#8FCBA3; --status-success-tint:rgb(143 203 163 / .14);
    --status-warning:#F2C46B; --status-warning-text:#F2C46B; --status-warning-tint:rgb(242 196 107 / .14);
    --status-danger:#F09A8E;  --status-danger-text:#F09A8E;  --status-danger-tint:rgb(240 154 142 / .14);
    --status-info:#9CC3E8;    --status-info-text:#9CC3E8;    --status-info-tint:rgb(156 195 232 / .14);
    --status-neutral-text:#DDD5C8; --status-neutral-tint:rgb(250 247 241 / .1);
    --pending:#F2A88E; --pending-text:#F5B39C; --pending-tint:rgb(242 168 142 / .14); --pending-line:#F2A88E;
    --glass-bg:var(--glass-dark-bg); --glass-bg-strong:var(--glass-dark-bg-strong); --glass-border:var(--glass-dark-border);
    --elevation-1:0 1px 2px rgb(0 0 0 / .3); --elevation-2:0 8px 28px rgb(0 0 0 / .35); --elevation-3:0 24px 64px rgb(0 0 0 / .45);
  }

  @media (prefers-reduced-transparency:reduce){
    :root{--glass-bg:var(--glass-bg-fallback);--glass-bg-strong:var(--glass-bg-fallback);--glass-dark-bg:rgb(26 23 21 / .98);--glass-dark-bg-strong:rgb(26 23 21 / .98);--glass-filter:none;--garage-glass:rgb(14 12 11 / .9);--garage-glass-hover:rgb(14 12 11 / .98);--garage-glass-filter:none}
  }
}

/* ---------- Base element defaults (layered: any page stylesheet overrides them) ---------- */
@layer bmg.base{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + var(--space-4))}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  body{margin:0;background:var(--color-canvas);color:var(--text-primary);font-family:var(--font-text);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-synthesis-weight:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  img,picture,video,canvas{max-width:100%;height:auto}
  button,input,select,textarea{font:inherit;letter-spacing:inherit}
  button{cursor:pointer}
  a{color:var(--text-link);text-decoration-thickness:.08em;text-underline-offset:.18em}
  :where(p,h1,h2,h3,h4,h5,h6,ul,ol,dl,figure,blockquote){margin-top:0}
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-semibold);color:inherit;text-wrap:balance}
  h1{font-size:var(--fs-headline);line-height:var(--lh-headline);letter-spacing:var(--ls-headline)}
  h2{font-size:var(--fs-title-1);line-height:var(--lh-title-1);letter-spacing:var(--ls-title-1)}
  h3{font-size:var(--fs-title-2);line-height:var(--lh-title-2);letter-spacing:var(--ls-title-2)}
  h4{font-size:var(--fs-title-3);line-height:var(--lh-title-3);letter-spacing:var(--ls-title-3)}
  p{text-wrap:pretty}
  strong,b{font-weight:var(--fw-semibold)}
  code,kbd,samp{font-family:var(--font-mono);font-size:.9em;letter-spacing:0}
  :focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
  ::selection{background:var(--accent-tint);color:var(--c-charcoal)}
}

/* ---------- Accessibility helpers ---------- */
.ui-sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* ---------- Shared chrome: skip link, header, menu sheet, footer ----------
   Legacy stylesheets style bare elements (nav{position:sticky}, footer{text-align:center},
   a{border:1px solid}, svg{width:52px}, *{padding:0}). The chrome first reverts every author style
   on its own elements (UA defaults come back), then sets its own with two-class selectors so legacy
   body-class rules such as `.bmg-editorial-v75 a` cannot win either. SVG internals keep their
   presentation attributes. */
.ui-skip,
.ui-header,.ui-header :where(:not(svg,svg *)),
.ui-footer,.ui-footer :where(:not(svg,svg *)){all:revert;box-sizing:border-box}

.ui-skip.ui-skip{position:fixed;z-index:var(--z-skip);top:calc(var(--space-2) + env(safe-area-inset-top,0px));left:var(--space-2);padding:.6875rem 1.125rem;border-radius:var(--r-button);background:var(--c-charcoal);color:var(--c-linen);font:var(--fw-semibold) var(--fs-callout)/1.2 var(--font-text);text-decoration:none;transform:translateY(-200%);transition:transform var(--dur-2) var(--ease-out)}
.ui-skip.ui-skip:focus{transform:none;outline:2px solid var(--c-honey-bright);outline-offset:2px}

/* Header: sticky glass bar. The blur lives on ::before: backdrop-filter on the header itself would
   become the containing block of the position:fixed menu sheet and collapse it. */
.ui-header{position:sticky;top:0;z-index:var(--z-header);isolation:isolate;display:block;margin:0;padding:0;color:var(--text-primary);font-family:var(--font-text);font-size:var(--fs-callout);font-weight:var(--fw-regular);line-height:1.2;letter-spacing:var(--ls-callout);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ui-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:inset 0 -1px 0 transparent;transition:background-color var(--dur-3) var(--ease-standard),box-shadow var(--dur-3) var(--ease-standard)}
.ui-header[data-scrolled]::before{box-shadow:inset 0 -1px 0 var(--glass-border)}
.ui-header:has(.ui-menu[open])::before{background:var(--glass-bg-strong);box-shadow:inset 0 -1px 0 var(--glass-border)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.ui-header::before{background:var(--glass-bg-fallback)}}
/* Over an immersive photo the bar turns dark; the open menu sheet stays light (D21: no page turns dark). */
.ui-header[data-tone="dark"]:not(:has(.ui-menu[open])){--glass-bg:var(--glass-dark-bg);--glass-bg-strong:var(--glass-dark-bg-strong);--glass-bg-fallback:rgb(26 23 21 / .98);--glass-border:var(--glass-dark-border);--text-primary:var(--c-linen);--text-body:#DDD5C8;--text-secondary:#B8B0A3;--separator-strong:rgb(250 247 241 / .24);--color-ink:var(--c-linen);--color-ink-hover:#FFFFFF;--color-on-ink:var(--c-charcoal);--accent-text:var(--c-honey-bright);--focus-ring:var(--c-honey-bright);color-scheme:dark}

.ui-header .ui-header__bar{display:flex;align-items:center;gap:var(--space-2);width:min(var(--w-wide),100% - 2 * var(--gutter));height:var(--nav-h);margin:0 auto;padding:0}
.ui-header .ui-header__brand,.ui-footer .ui-footer__brand{display:inline-flex;align-items:center;gap:.625rem;flex:none;min-height:var(--tap-min);margin:0;padding:0;color:var(--text-primary);text-decoration:none;border-radius:var(--r-xs)}
.ui-header .ui-brand-mark,.ui-footer .ui-brand-mark{display:block;flex:none;width:1.75rem;height:1.75rem;margin:0;border:0}
.ui-header .ui-header__wordmark,.ui-footer .ui-footer__wordmark{font-family:var(--font-wordmark);font-size:1.5rem;font-weight:400;font-style:normal;line-height:1;letter-spacing:-.025em;white-space:nowrap}
.ui-header .ui-header__nav{display:none}
.ui-header .ui-header__links{display:flex;align-items:center;gap:clamp(1.5rem,.4rem + 1.5vw,2.25rem);margin:0;padding:0;list-style:none}
.ui-header .ui-header__links>li{margin:0;padding:0}
.ui-header .ui-header__link{position:relative;display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0;color:var(--text-body);font-size:.875rem;font-weight:var(--fw-medium);letter-spacing:-.008em;white-space:nowrap;text-decoration:none;transition:color var(--dur-2) var(--ease-standard)}
.ui-header .ui-header__link[aria-current]{color:var(--text-primary)}
.ui-header .ui-header__link[aria-current]::after{content:"";position:absolute;left:50%;bottom:.5rem;width:.25rem;height:.25rem;margin-left:-.125rem;border-radius:50%;background:var(--color-accent)}
.ui-header .ui-header__actions{display:flex;align-items:center;gap:var(--space-2);flex:none;margin:0 0 0 auto;padding:0}
.ui-header .ui-header__owner{display:none;align-items:center;gap:.25rem;min-height:var(--tap-min);padding:0 var(--space-2);color:var(--text-secondary);font-size:var(--fs-footnote);font-weight:var(--fw-medium);text-decoration:none;transition:color var(--dur-2) var(--ease-standard)}
.ui-header .ui-header__owner::after,.ui-header .ui-menu__aside[target="_blank"]::after,.ui-footer .ui-footer__link[target="_blank"]::after{content:"";display:inline-block;flex:none;width:.7em;height:.7em;margin-left:.2em;background:currentColor;-webkit-mask:var(--icon-external) center/contain no-repeat;mask:var(--icon-external) center/contain no-repeat;opacity:.75}
.ui-header .ui-header__lang{display:none;place-items:center;min-width:2.25rem;height:2.25rem;padding:0 .5rem;border:1px solid var(--separator-strong);border-radius:var(--r-button-sm);color:var(--text-body);font-size:.75rem;font-weight:var(--fw-semibold);letter-spacing:.04em;text-decoration:none;transition:color var(--dur-2) var(--ease-standard),border-color var(--dur-2) var(--ease-standard),background-color var(--dur-2) var(--ease-standard)}
.ui-header .ui-header__cta{position:relative;display:none;align-items:center;justify-content:center;min-height:2.25rem;padding:.375rem .9375rem;border:0;border-radius:var(--r-button-sm);background:var(--color-ink);color:var(--color-on-ink);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1.2;letter-spacing:-.004em;white-space:nowrap;text-decoration:none;transition:background-color var(--dur-2) var(--ease-standard),transform var(--dur-1) var(--ease-standard)}
.ui-header .ui-header__cta::before{content:"";position:absolute;inset:-.3125rem -.125rem}
.ui-header .ui-header__cta:active{transform:scale(.97)}
.ui-header .ui-header__cta-short{display:none}
/* Home serves both audiences: booking must remain visible outside the mobile menu. */
.ui-header[data-section="home"] .ui-header__cta{display:inline-flex;min-height:var(--tap-min)}
@media (max-width:479.98px){
  .ui-header[data-section="home"] .ui-header__brand{gap:.375rem}
  .ui-header[data-section="home"] .ui-header__wordmark{font-size:1.125rem}
  .ui-header[data-section="home"] .ui-header__actions{gap:var(--space-1)}
  .ui-header[data-section="home"] .ui-header__cta{padding-inline:.625rem}
  .ui-header[data-section="home"] .ui-header__cta-full{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .ui-header[data-section="home"] .ui-header__cta-short{display:inline}
}
@media (hover:hover){
  .ui-header .ui-header__link:hover,.ui-header .ui-header__owner:hover{color:var(--text-primary)}
  .ui-header .ui-header__lang:hover{border-color:var(--text-primary);color:var(--text-primary)}
  .ui-header .ui-header__cta:hover{background:var(--color-ink-hover)}
  .ui-header .ui-menu__toggle:hover{background:var(--fill-secondary)}
}
.ui-header a:focus-visible,.ui-header summary:focus-visible,.ui-footer a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-xs)}
.ui-header .ui-header__cta:focus-visible,.ui-header .ui-header__lang:focus-visible{border-radius:var(--r-button-sm)}
.ui-header .ui-menu__cta:focus-visible{border-radius:var(--r-button)}
.ui-header .ui-menu__toggle:focus-visible{border-radius:50%}

/* Menu sheet (below 1180px): a full-screen glass sheet under the bar. Works as a plain <details>
   without JavaScript; the chrome script adds scroll lock, focus containment, Escape and outside click. */
.ui-header .ui-menu{display:block;position:static;margin:0;padding:0}
.ui-header .ui-menu__toggle{display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);margin:0 calc(var(--space-2) * -1) 0 0;padding:0;border-radius:50%;color:var(--text-primary);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-2) var(--ease-standard)}
.ui-header .ui-menu__toggle::-webkit-details-marker{display:none}
.ui-header .ui-menu__toggle::marker{content:""}
.ui-header .ui-menu__icon{position:relative;display:block;width:1.125rem;height:.75rem}
.ui-header .ui-menu__icon::before,.ui-header .ui-menu__icon::after{content:"";position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform var(--dur-3) var(--ease-out),top var(--dur-3) var(--ease-out)}
.ui-header .ui-menu__icon::before{top:.0625rem}
.ui-header .ui-menu__icon::after{top:calc(100% - .0625rem - 1.5px)}
.ui-header .ui-menu[open] .ui-menu__icon::before{top:calc(50% - .75px);transform:rotate(45deg)}
.ui-header .ui-menu[open] .ui-menu__icon::after{top:calc(50% - .75px);transform:rotate(-45deg)}
.ui-header .ui-menu__sheet{position:fixed;inset:var(--nav-h) 0 0;z-index:var(--z-menu);display:flex;flex-direction:column;gap:var(--space-6);margin:0;padding:var(--space-4) max(var(--gutter),(100% - var(--w-content)) / 2) calc(var(--space-8) + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;background:var(--glass-bg-fallback);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);color:var(--text-primary)}
.ui-header .ui-menu__nav{display:block;margin:0;padding:0}
.ui-header .ui-menu__list,.ui-header .ui-menu__secondary{display:grid;margin:0;padding:0;list-style:none}
.ui-header .ui-menu__list>li,.ui-header .ui-menu__secondary>li{margin:0;padding:0}
.ui-header .ui-menu__link{display:flex;align-items:center;min-height:3.25rem;padding:.25rem 0;color:var(--text-primary);font-family:var(--font-display);font-size:clamp(1.75rem,1.5rem + 1.1vw,2.25rem);font-weight:var(--fw-semibold);line-height:1.1;letter-spacing:-.024em;text-decoration:none}
.ui-header .ui-menu__link[aria-current]{color:var(--accent-text)}
.ui-header .ui-menu__secondary{gap:var(--space-1);padding-top:var(--space-5);border-top:1px solid var(--separator)}
.ui-header .ui-menu__aside{display:inline-flex;align-items:center;min-height:var(--tap-min);color:var(--text-body);font-size:var(--fs-body);font-weight:var(--fw-medium);text-decoration:none}
.ui-header .ui-menu__cta{display:flex;align-items:center;justify-content:center;min-height:var(--btn-h);margin-top:auto;padding:.75rem 1.5rem;border-radius:var(--r-button);background:var(--color-ink);color:var(--color-on-ink);font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.2;text-align:center;text-decoration:none}
@media (hover:hover){.ui-header .ui-menu__link:hover,.ui-header .ui-menu__aside:hover{color:var(--accent-text)}.ui-header .ui-menu__cta:hover{background:var(--color-ink-hover)}}
@media (prefers-reduced-motion:no-preference){
  .ui-header .ui-menu[open] .ui-menu__sheet{animation:ui-fade-in var(--dur-3) var(--ease-out) both}
  .ui-header .ui-menu[open] .ui-menu__list>li,.ui-header .ui-menu[open] .ui-menu__secondary,.ui-header .ui-menu[open] .ui-menu__cta{animation:ui-rise-in var(--dur-4) var(--ease-out) both}
  .ui-header .ui-menu[open] .ui-menu__list>li:nth-child(2){animation-delay:30ms}
  .ui-header .ui-menu[open] .ui-menu__list>li:nth-child(3){animation-delay:60ms}
  .ui-header .ui-menu[open] .ui-menu__list>li:nth-child(4){animation-delay:90ms}
  .ui-header .ui-menu[open] .ui-menu__list>li:nth-child(5){animation-delay:120ms}
  .ui-header .ui-menu[open] .ui-menu__secondary{animation-delay:160ms}
  .ui-header .ui-menu[open] .ui-menu__cta{animation-delay:190ms}
}
html.ui-menu-open{overflow:hidden}
html.ui-menu-open body{padding-inline-end:var(--ui-scrollbar,0px)}

@media (min-width:480px){.ui-header .ui-header__cta{display:inline-flex}}
@media (min-width:734px){.ui-header .ui-header__lang{display:inline-grid}}
@media (min-width:1180px){
  .ui-header .ui-header__bar{gap:var(--space-6)}
  .ui-header .ui-header__nav{display:flex;flex:1;justify-content:center;margin:0;padding:0}
  .ui-header .ui-header__owner{display:inline-flex}
  .ui-header .ui-menu{display:none}
}
/* Payment pages: brand, language and help only, at every width. */
.ui-header[data-variant="minimal"] .ui-header__lang{display:inline-grid}
.ui-header[data-variant="minimal"] .ui-header__cta{display:inline-flex}

/* Footer: light directory (apple.com). */
.ui-footer{display:block;margin:0;padding:var(--space-10) 0 calc(var(--space-7) + env(safe-area-inset-bottom,0px));border:0;box-shadow:inset 0 1px 0 var(--separator);background:var(--color-canvas-alt);color:var(--text-secondary);font-family:var(--font-text);font-size:var(--fs-footnote);font-weight:var(--fw-regular);line-height:1.5;letter-spacing:var(--ls-footnote);text-align:left;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ui-footer .ui-footer__inner{display:grid;gap:var(--space-8);width:min(var(--w-wide),100% - 2 * var(--gutter));margin:0 auto;padding:0}
.ui-footer .ui-footer__intro{display:grid;align-content:start;gap:var(--space-3);max-width:22rem;margin:0}
.ui-footer .ui-footer__brand{margin:0;justify-self:start}
.ui-footer .ui-footer__tagline{margin:0;color:var(--text-secondary);font-size:var(--fs-footnote);line-height:1.5}
.ui-footer .ui-footer__directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7) var(--space-6);margin:0;padding:0}
.ui-footer .ui-footer__column{margin:0;padding:0}
.ui-footer .ui-footer__heading{margin:0 0 var(--space-3);color:var(--text-primary);font-family:var(--font-text);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:0}
.ui-footer .ui-footer__list,.ui-footer .ui-footer__legal{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none}
.ui-footer .ui-footer__list>li,.ui-footer .ui-footer__legal>li{margin:0;padding:0}
.ui-footer .ui-footer__link{display:inline-block;padding:.25rem 0;color:var(--text-body);text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){.ui-footer .ui-footer__link:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:.2em}}
.ui-footer .ui-footer__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-6);margin:0;padding:var(--space-5) 0 0;border-top:1px solid var(--separator);font-size:var(--fs-caption);line-height:1.5}
.ui-footer .ui-footer__address{margin:0}
.ui-footer .ui-footer__legal{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5)}
.ui-footer[data-variant="minimal"]{padding-top:var(--space-6)}
.ui-footer[data-variant="minimal"] .ui-footer__meta{padding-top:0;border-top:0}
@media (min-width:734px){.ui-footer .ui-footer__directory{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1068px){.ui-footer .ui-footer__inner{grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:var(--space-10)}.ui-footer .ui-footer__meta{grid-column:1 / -1}}

/* ---------- Layout primitives ---------- */
.ui-container{width:min(var(--w-wide),100% - 2 * var(--gutter));margin-inline:auto}
.ui-container--content{width:min(var(--w-content),100% - 2 * var(--gutter))}
.ui-container--text{width:min(var(--w-text),100% - 2 * var(--gutter))}
.ui-container--max{width:min(var(--w-max),100% - 2 * var(--grid-gap))}
.ui-section{padding-block:var(--space-section)}
.ui-section--compact{padding-block:calc(var(--space-section) * .6)}
.ui-section--alt{background:var(--color-canvas-alt)}
.ui-section--dark{background:var(--color-canvas);color:var(--text-primary)}
.ui-section-head{max-width:46rem;margin:0 auto var(--space-block);text-align:center}
.ui-section-head>:last-child{margin-bottom:0}
.ui-section-head--start{margin-inline:0;text-align:left}
.ui-stack{display:flex;flex-direction:column;gap:var(--stack-gap,var(--space-4))}
.ui-stack>*{margin-block:0}
.ui-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster-gap,var(--space-3))}
.ui-cluster--center{justify-content:center}
.ui-grid{display:grid;gap:var(--grid-gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:734px){.ui-grid--2,.ui-grid--3,.ui-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1068px){.ui-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.ui-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ui-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(85%,22rem);gap:var(--grid-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:0 var(--gutter) var(--space-2);scrollbar-width:none;overscroll-behavior-x:contain}
.ui-rail>*{scroll-snap-align:start}
@media (min-width:1068px){.ui-rail{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;padding-inline:0}}

/* ---------- Typography helpers ---------- */
.t-display,.t-headline,.t-title-1,.t-title-2,.t-title-3{margin-top:0;color:var(--text-primary);font-family:var(--font-display);font-weight:var(--fw-semibold);font-style:normal;text-wrap:balance}
.t-display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.t-headline{font-size:var(--fs-headline);line-height:var(--lh-headline);letter-spacing:var(--ls-headline)}
.t-title-1{font-size:var(--fs-title-1);line-height:var(--lh-title-1);letter-spacing:var(--ls-title-1)}
.t-title-2{font-size:var(--fs-title-2);line-height:var(--lh-title-2);letter-spacing:var(--ls-title-2)}
.t-title-3{font-size:var(--fs-title-3);line-height:var(--lh-title-3);letter-spacing:var(--ls-title-3)}
.t-lead{max-width:38em;color:var(--text-body);font-size:var(--fs-lead);font-weight:var(--fw-regular);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);text-wrap:pretty}
.ui-section-head .t-lead,.t-lead--center{margin-inline:auto}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.t-callout{font-size:var(--fs-callout);line-height:var(--lh-callout);letter-spacing:var(--ls-callout)}
.t-footnote{color:var(--text-secondary);font-size:var(--fs-footnote);line-height:var(--lh-footnote);letter-spacing:var(--ls-footnote)}
.t-caption{color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.t-eyebrow{display:block;margin:0 0 var(--space-3);color:var(--accent-text);font-family:var(--font-text);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:-.01em;text-transform:none}
.t-prose{max-width:var(--w-text);color:var(--text-body);font-size:var(--fs-body);line-height:var(--lh-prose)}
.t-prose a,.t-link{color:var(--text-link);font-weight:var(--fw-medium);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:.18em}
@media (hover:hover){.t-prose a:hover,.t-link:hover{color:var(--text-link-hover);text-decoration-color:currentColor}}
.t-num,.ui-price{font-variant-numeric:tabular-nums lining-nums}
.t-mono{font-family:var(--font-mono);font-size:.9em;letter-spacing:0}
/* The brand accent: one Fraunces italic word in a headline, never body text (CONTRACT D11). */
.accent-serif{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.06em;line-height:1;letter-spacing:-.012em;color:var(--accent-display)}

/* ---------- Buttons and links ----------
   Rounded rectangles (CONTRACT D21): primary 48px / 12px radius, secondary and tertiary 44px, small 36px /
   10px (44px touch target on coarse pointers), large 52px. Full width in phone sheets (below). */
.ui-button{--btn-bg:var(--color-ink);--btn-fg:var(--color-on-ink);--btn-border:transparent;--btn-bg-hover:var(--color-ink-hover);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:var(--btn-h);margin:0;padding:.75rem 1.375rem;
  border:1px solid var(--btn-border);border-radius:var(--r-button);background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-text);font-size:1rem;font-weight:var(--fw-semibold);line-height:1.25;letter-spacing:-.011em;text-align:center;text-decoration:none;text-transform:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard),border-color var(--dur-2) var(--ease-standard),transform var(--dur-1) var(--ease-standard)}
@media (hover:hover){.ui-button:hover{background:var(--btn-bg-hover);color:var(--btn-fg)}}
.ui-button:active{transform:scale(.98)}
.ui-button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.ui-button--secondary{--btn-bg:var(--fill-secondary);--btn-fg:var(--text-primary);--btn-bg-hover:var(--fill-primary);min-height:var(--btn-h-secondary);padding-block:.625rem}
.ui-button--tertiary{--btn-bg:transparent;--btn-fg:var(--text-primary);--btn-border:var(--control-border);--btn-bg-hover:var(--fill-tertiary);min-height:var(--btn-h-secondary);padding-block:.625rem}
.ui-button--accent{--btn-bg:var(--color-accent);--btn-fg:var(--color-on-accent);--btn-bg-hover:var(--color-accent-hover)}
.ui-button--small{min-height:var(--btn-h-sm);padding:.4375rem .875rem;border-radius:var(--r-button-sm);font-size:var(--fs-footnote)}
.ui-button--large{min-height:var(--btn-h-lg);padding:.875rem 1.75rem;border-radius:var(--r-button);font-size:var(--fs-body)}
.ui-button--block{display:flex;width:100%}
.ui-button:disabled,.ui-button[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none}
.ui-button[aria-busy="true"]{color:transparent;pointer-events:none}
.ui-button[aria-busy="true"]::after{content:"";position:absolute;width:1.1em;height:1.1em;border:2px solid var(--btn-fg);border-right-color:transparent;border-radius:50%;animation:ui-spin .7s linear infinite}
/* Small buttons keep their 36px look and get a 44px target on touch screens. */
@media (pointer:coarse){.ui-button--small::before{content:"";position:absolute;inset:-.25rem 0}}
/* In a phone sheet every button takes the full width, one per row (the primary first in the DOM). */
@media (max-width:733.98px){
  .ui-sheet .ui-actions{flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .ui-sheet :is(.ui-actions,.ui-sheet__footer)>.ui-button:not(.ui-button--small){width:100%}
}
.ui-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-7)}
.ui-actions--center{justify-content:center}
/* Text link with a chevron (apple.com "Learn more >"); an external target gets an arrow. */
.ui-link{display:inline-flex;align-items:center;gap:.2em;min-height:var(--tap-min);padding:0;border:0;background:none;color:var(--text-link);font-family:var(--font-text);font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:1.25;letter-spacing:-.011em;text-decoration:none;cursor:pointer}
.ui-link::after{content:"";flex:none;width:.72em;height:.72em;background:currentColor;-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat;transition:transform var(--dur-2) var(--ease-standard)}
.ui-link[target="_blank"]::after{-webkit-mask-image:var(--icon-external);mask-image:var(--icon-external)}
@media (hover:hover){.ui-link:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:.2em}.ui-link:not([target="_blank"]):hover::after{transform:translateX(2px)}}
.ui-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-xs)}
.ui-icon-button{display:inline-grid;place-items:center;flex:none;width:var(--tap-min);height:var(--tap-min);margin:0;padding:0;border:0;border-radius:50%;background:var(--fill-tertiary);color:var(--text-primary);cursor:pointer;transition:background-color var(--dur-2) var(--ease-standard)}
.ui-icon-button::before{content:"";width:1.125rem;height:1.125rem;background:currentColor;-webkit-mask:var(--icon,var(--icon-x)) center/contain no-repeat;mask:var(--icon,var(--icon-x)) center/contain no-repeat}
@media (hover:hover){.ui-icon-button:hover{background:var(--fill-secondary)}}
.ui-icon-button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- Hero ---------- */
.ui-hero{position:relative;isolation:isolate;overflow:clip}
.ui-hero__content{width:min(var(--w-content),100% - 2 * var(--gutter));margin-inline:auto;text-align:center}
.ui-hero--stage{padding-top:clamp(2.5rem,1.6rem + 3.8vw,5rem)}
.ui-hero__stage{width:min(var(--w-max),100% - 2 * var(--gutter));margin:var(--space-10) auto 0;aspect-ratio:4 / 5;overflow:hidden;border-radius:var(--r-tile);background:var(--color-canvas-alt)}
.ui-hero__stage img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:734px){.ui-hero__stage{aspect-ratio:16 / 9}}
.ui-hero--immersive{display:grid;align-items:end;min-height:min(100svh - var(--nav-h),56rem);background:var(--color-canvas);color:var(--text-primary)}
.ui-hero--immersive .ui-hero__media{position:absolute;inset:0;z-index:-2;margin:0}
.ui-hero--immersive .ui-hero__media img{display:block;width:100%;height:100%;object-fit:cover}
.ui-hero--immersive::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--scrim-photo)}
.ui-hero--immersive .ui-hero__content{width:min(var(--w-wide),100% - 2 * var(--gutter));padding-block:var(--space-12) var(--space-10);text-align:left}
.ui-hero--immersive .ui-actions{justify-content:flex-start}

/* ---------- Tiles (apple.com product tiles) ---------- */
.ui-tile-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-gap);width:min(var(--w-max),100% - 2 * var(--grid-gap));margin-inline:auto}
@media (min-width:734px){.ui-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-tile--wide{grid-column:1 / -1}}
@media (min-width:1068px){.ui-tile-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ui-tile{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;min-height:clamp(26rem,21rem + 18vw,38rem);padding:var(--tile-pad) var(--tile-pad) 0;overflow:hidden;border-radius:var(--r-tile);background:var(--color-canvas-alt);color:var(--text-primary);text-align:center;text-decoration:none}
.ui-section--alt .ui-tile:not(.ui-tile--dark,.ui-tile--media){background:var(--color-surface)}
.ui-tile--dark{background:var(--c-charcoal)}
.ui-tile__eyebrow{margin:0 0 var(--space-2);color:var(--accent-text);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);line-height:1.3}
.ui-tile__title{max-width:18ch;margin:0;font-family:var(--font-display);font-size:var(--fs-title-1);font-weight:var(--fw-semibold);line-height:var(--lh-title-1);letter-spacing:var(--ls-title-1);text-wrap:balance}
.ui-tile__body{max-width:30em;margin:var(--space-3) 0 0;color:var(--text-body);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead)}
.ui-tile .ui-actions{justify-content:center;margin-top:var(--space-5)}
.ui-tile__media{display:flex;flex:1;align-items:flex-end;justify-content:center;width:100%;margin:var(--space-7) 0 0}
.ui-tile__media img{display:block;width:100%;height:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;object-fit:cover}
.ui-tile--media{align-items:flex-start;justify-content:flex-end;padding-bottom:var(--tile-pad);background:var(--c-charcoal);text-align:left}
.ui-tile--media .ui-tile__media{position:absolute;inset:0;z-index:-2;margin:0}
.ui-tile--media .ui-tile__media img{width:100%;height:100%;border-radius:0;transition:transform var(--dur-4) var(--ease-out)}
.ui-tile--media::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--scrim-photo)}
.ui-tile--media .ui-actions{justify-content:flex-start}
@media (hover:hover){a.ui-tile--media:hover .ui-tile__media img{transform:scale(1.03)}}
a.ui-tile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}

/* ---------- Villa cards (also used for stay results) ---------- */
.ui-villa-list{container-type:inline-size;display:grid;gap:var(--grid-gap)}
.ui-villa-card{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:var(--r-lg);background:var(--color-surface);color:var(--text-primary);box-shadow:var(--elevation-2);text-decoration:none;transition:box-shadow var(--dur-2) var(--ease-standard),transform var(--dur-2) var(--ease-standard)}
.ui-villa-card__media{position:relative;margin:0;aspect-ratio:4 / 3;overflow:hidden;background:var(--color-canvas-alt)}
.ui-villa-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease-out)}
.ui-villa-card__badge{position:absolute;top:var(--space-3);left:var(--space-3)}
.ui-villa-card__body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5) var(--space-5) var(--space-6)}
.ui-villa-card__kicker{margin:0;color:var(--accent-text);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1.3}
.ui-villa-card__name{margin:0;font-family:var(--font-display);font-size:var(--fs-title-2);font-weight:var(--fw-semibold);line-height:var(--lh-title-2);letter-spacing:var(--ls-title-2)}
.ui-villa-card__meta{margin:0;color:var(--text-secondary);font-size:var(--fs-callout)}
.ui-villa-card__desc{margin:var(--space-1) 0 0;color:var(--text-body);font-size:var(--fs-callout);line-height:var(--lh-callout)}
.ui-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-2) 0 0;padding:0;list-style:none}
.ui-tags>li,.ui-tag{padding:.3125rem .625rem;border:1px solid var(--separator-strong);border-radius:var(--r-badge);color:var(--text-body);font-size:var(--fs-caption);font-weight:var(--fw-medium);line-height:1.25}
.ui-villa-card__footer{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--separator)}
.ui-price{display:grid;gap:2px}
.ui-price__amount{color:var(--text-primary);font-size:var(--fs-title-3);font-weight:var(--fw-semibold);line-height:1.1;letter-spacing:-.012em}
.ui-price__note{color:var(--text-secondary);font-size:var(--fs-caption)}
@container (min-width:40rem){
  .ui-villa-card--row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto}
  .ui-villa-card--row .ui-villa-card__media{aspect-ratio:auto;height:100%;min-height:15rem}
}
.ui-villa-card.is-residence{box-shadow:inset 0 0 0 1.5px var(--color-accent),var(--elevation-2)}
.ui-villa-card.is-unavailable{background:var(--color-canvas-alt);box-shadow:none}
.ui-villa-card.is-unavailable img{filter:grayscale(.3);opacity:.7}
@media (hover:hover){
  a.ui-villa-card:hover,.ui-villa-card:not(.is-unavailable):has(a:hover){box-shadow:var(--elevation-3);transform:translateY(-2px)}
  a.ui-villa-card:hover .ui-villa-card__media img{transform:scale(1.03)}
}
a.ui-villa-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ---------- Segmented control (10px segments in a concentric 13px track, D21) ---------- */
.ui-segmented{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;max-width:100%;margin:0;padding:3px;border:0;border-radius:calc(var(--r-control) + 3px);background:var(--fill-tertiary)}
.ui-segmented>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ui-segmented input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ui-segmented label,.ui-segmented button{display:grid;place-items:center;min-height:2.375rem;margin:0;padding:0 1rem;border:0;border-radius:var(--r-control);background:transparent;color:var(--text-body);font-family:var(--font-text);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1.2;letter-spacing:-.003em;text-align:center;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard),box-shadow var(--dur-2) var(--ease-standard)}
.ui-segmented input:checked+label,.ui-segmented [aria-pressed="true"],.ui-segmented [aria-selected="true"],.ui-segmented [aria-checked="true"]{background:var(--color-surface);color:var(--text-primary);box-shadow:var(--elevation-2)}
.ui-segmented input:focus-visible+label,.ui-segmented button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (hover:hover){.ui-segmented label:hover,.ui-segmented button:hover{color:var(--text-primary)}}
@media (pointer:coarse){.ui-segmented label,.ui-segmented button{min-height:var(--tap-min)}}
/* --block: the track takes the full width (phone sheets, two or three choices). */
.ui-segmented--block{display:grid;width:100%}
.ui-segmented--block label,.ui-segmented--block button{padding-inline:.625rem;white-space:normal}
.ui-segmented--scroll{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.ui-segmented--scroll>*{flex:none;scroll-snap-align:start}

/* ---------- Stepper: one rounded-rectangle control, minus | value | plus (D21, CONTRACT §14.3) ----------
   <div class="ui-stepper" role="group" aria-label="Guests"><button type="button" aria-label="Remove one guest"></button>
   <output aria-live="polite">2</output><button type="button" aria-label="Add one guest"></button></div>
   44px targets, tabular figures; the first button is minus, the last plus (icons are automatic). At a
   limit the button gets aria-disabled="true" (it keeps focus) or disabled. BMGPlanner.mountStepper renders it. */
.ui-stepper{display:inline-grid;grid-template-columns:var(--tap-min) minmax(2.75rem,auto) var(--tap-min);align-items:center;flex:none;height:var(--tap-min);margin:0;padding:0;border-radius:var(--r-button);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--control-border);color:var(--text-primary);vertical-align:middle}
.ui-stepper button{position:relative;display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);margin:0;padding:0;border:0;border-radius:var(--r-button);background:transparent;color:var(--text-primary);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ui-stepper button::after{content:"";width:1rem;height:1rem;background:currentColor;-webkit-mask:var(--icon-plus) center/contain no-repeat;mask:var(--icon-plus) center/contain no-repeat}
.ui-stepper button:first-child::after{-webkit-mask-image:var(--icon-minus);mask-image:var(--icon-minus)}
@media (hover:hover){.ui-stepper button:not(:disabled,[aria-disabled="true"]):hover{background:var(--fill-tertiary)}}
.ui-stepper button:not(:disabled,[aria-disabled="true"]):active{background:var(--fill-secondary)}
.ui-stepper button:is(:disabled,[aria-disabled="true"]){color:var(--text-tertiary);cursor:not-allowed}
.ui-stepper button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.ui-stepper output{min-width:2.75rem;padding:0 .25rem;font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
/* A label beside the stepper: .ui-stepper-row > .ui-stepper-row__label (+ .ui-stepper-row__hint) + .ui-stepper */
.ui-stepper-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--tap-min)}
.ui-stepper-row__label{display:grid;gap:2px;min-width:0;color:var(--text-primary);font-size:var(--fs-callout);font-weight:var(--fw-semibold);line-height:1.3}
.ui-stepper-row__hint{color:var(--text-secondary);font-size:var(--fs-footnote);font-weight:var(--fw-regular)}

/* ---------- Form fields ---------- */
.ui-form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
@media (min-width:734px){.ui-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-field--full{grid-column:1 / -1}}
.ui-field{display:grid;align-content:start;gap:var(--space-2);margin:0;padding:0;border:0;min-width:0}
.ui-field__label,.ui-field>legend{padding:0;color:var(--text-primary);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1.3}
.ui-field__required{color:var(--status-danger-text)}
.ui-field__hint{margin:0;color:var(--text-secondary);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
.ui-input,.ui-select,.ui-textarea{display:block;width:100%;min-height:3rem;margin:0;padding:.75rem 1rem;border:1px solid var(--control-border);border-radius:var(--r-md);background:var(--color-surface);color:var(--text-primary);font-family:var(--font-text);font-size:var(--fs-input);font-weight:var(--fw-regular);line-height:1.4;letter-spacing:-.006em;-webkit-appearance:none;appearance:none;transition:border-color var(--dur-2) var(--ease-standard),box-shadow var(--dur-2) var(--ease-standard)}
.ui-textarea{min-height:8rem;resize:vertical}
.ui-select{padding-right:2.75rem;background:var(--color-surface) var(--icon-select) right .875rem center / 1.125rem no-repeat}
.ui-input::placeholder,.ui-textarea::placeholder{color:var(--text-secondary);opacity:1}
@media (hover:hover){.ui-input:hover,.ui-select:hover,.ui-textarea:hover{border-color:var(--text-secondary)}}
.ui-input:focus-visible,.ui-select:focus-visible,.ui-textarea:focus-visible{outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 4px var(--focus-halo)}
.ui-input[aria-invalid="true"],.ui-select[aria-invalid="true"],.ui-textarea[aria-invalid="true"]{border-color:var(--status-danger);box-shadow:0 0 0 4px rgb(139 47 47 / .12)}
.ui-input:disabled,.ui-select:disabled,.ui-textarea:disabled{opacity:.5;cursor:not-allowed}
.ui-field__error{display:flex;align-items:flex-start;gap:.375rem;margin:0;color:var(--status-danger-text);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
.ui-field__error::before{content:"";flex:none;width:1em;height:1em;margin-top:.15em;background:currentColor;-webkit-mask:var(--icon-alert) center/contain no-repeat;mask:var(--icon-alert) center/contain no-repeat}
.ui-check{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-3);color:var(--text-body);font-size:var(--fs-footnote);line-height:var(--lh-footnote);cursor:pointer}
.ui-check input{width:1.25rem;height:1.25rem;margin:0;accent-color:var(--c-charcoal)}
.ui-check input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Date range: two native date inputs in one field (the inputs stay the value carrier and no-JS path). */
.ui-date-range{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:0;padding:.25rem;border:1px solid var(--control-border);border-radius:var(--r-md);background:var(--color-surface)}
.ui-date-range__segment{position:relative;display:grid;gap:2px;min-width:0;padding:.5rem .875rem;border-radius:var(--r-sm);cursor:pointer;transition:background-color var(--dur-2) var(--ease-standard)}
.ui-date-range__segment+.ui-date-range__segment::before{content:"";position:absolute;left:0;top:.75rem;bottom:.75rem;width:1px;background:var(--separator)}
.ui-date-range__label{color:var(--text-secondary);font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:1.2}
.ui-date-range__input{width:100%;min-width:0;margin:0;padding:0;border:0;background:transparent;color:var(--text-primary);font-family:var(--font-text);font-size:var(--fs-input);font-weight:var(--fw-semibold);line-height:1.3}
.ui-date-range__input:focus{outline:none}
.ui-date-range__segment:focus-within{background:var(--fill-tertiary);box-shadow:inset 0 0 0 2px var(--focus-ring)}
@media (hover:hover){.ui-date-range__segment:hover{background:var(--fill-tertiary)}}
.ui-date-range[aria-invalid="true"]{border-color:var(--status-danger)}

/* Choice cards: rate plans, vehicle types, service variants. */
.ui-choice-list{display:grid;gap:var(--space-3);margin:0;padding:0;border:0}
.ui-choice{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-4);padding:var(--space-5);border:1px solid var(--separator-strong);border-radius:var(--r-lg);background:var(--color-surface);color:var(--text-primary);cursor:pointer;transition:border-color var(--dur-2) var(--ease-standard),box-shadow var(--dur-2) var(--ease-standard)}
.ui-choice input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ui-choice__title{font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.3}
.ui-choice__desc{grid-column:1;color:var(--text-secondary);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
.ui-choice__price{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:var(--fs-body);font-weight:var(--fw-semibold);text-align:right;font-variant-numeric:tabular-nums}
.ui-choice:has(input:checked){border-color:var(--selection-border);box-shadow:inset 0 0 0 1px var(--selection-border);background:color-mix(in srgb,var(--accent-tint) 35%,var(--color-surface))}
.ui-choice:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.ui-choice:has(input:disabled){opacity:.5;cursor:not-allowed}
@media (hover:hover){.ui-choice:not(:has(input:checked)):hover{border-color:var(--text-secondary)}}

/* ---------- Sheet / drawer (<dialog class="ui-sheet">, opened with showModal()) ---------- */
.ui-sheet{position:fixed;inset:auto 0 0;z-index:var(--z-sheet);display:flex;flex-direction:column;width:100%;max-width:none;max-height:min(92dvh,100dvh - env(safe-area-inset-top,0px) - 1rem);margin:0;padding:0;border:0;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--color-surface);color:var(--text-primary);box-shadow:var(--elevation-sheet);overflow:hidden;
  transition:transform var(--dur-3) var(--ease-sheet),opacity var(--dur-3) var(--ease-standard),overlay var(--dur-3) allow-discrete,display var(--dur-3) allow-discrete}
.ui-sheet:not([open]){display:none;transform:translateY(100%)}
@starting-style{.ui-sheet[open]{transform:translateY(100%)}}
.ui-sheet::backdrop{background:var(--scrim);transition:opacity var(--dur-3) var(--ease-standard),overlay var(--dur-3) allow-discrete,display var(--dur-3) allow-discrete}
@starting-style{.ui-sheet[open]::backdrop{opacity:0}}
.ui-sheet__grabber{flex:none;width:2.25rem;height:.3125rem;margin:.5rem auto 0;border-radius:var(--r-pill);background:var(--fill-primary)}
.ui-sheet__header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-5)}
.ui-sheet__title{margin:0;font-family:var(--font-display);font-size:var(--fs-title-3);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:var(--ls-title-3)}
/* Intrinsic-height dialogs need a content-based flex basis; let long bodies shrink and scroll. */
.ui-sheet__body{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--space-5) var(--space-5)}
.ui-sheet__footer{flex:none;display:grid;gap:var(--space-3);padding:var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--separator);background:var(--color-surface)}
html:has(dialog.ui-sheet[open]){overflow:hidden}
@media (min-width:734px){
  .ui-sheet--drawer{inset:0 0 0 auto;width:min(28rem,100%);height:100dvh;max-height:none;border-radius:var(--r-xl) 0 0 var(--r-xl)}
  .ui-sheet--drawer:not([open]){transform:translateX(100%)}
  @starting-style{.ui-sheet--drawer[open]{transform:translateX(100%)}}
  .ui-sheet--center{inset:0;width:min(36rem,100% - 2 * var(--gutter));height:fit-content;max-height:min(85dvh,48rem);margin:auto;border-radius:var(--r-xl);box-shadow:var(--elevation-3)}
  .ui-sheet--center:not([open]){transform:translateY(16px) scale(.98);opacity:0}
  @starting-style{.ui-sheet--center[open]{transform:translateY(16px) scale(.98);opacity:0}}
  .ui-sheet--drawer .ui-sheet__grabber,.ui-sheet--center .ui-sheet__grabber{display:none}
}
.ui-line-item{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding-block:var(--space-4);border-bottom:1px solid var(--separator)}
.ui-line-item img{width:3.5rem;height:3.5rem;border-radius:var(--r-sm);object-fit:cover}
.ui-line-item__title{font-size:var(--fs-callout);font-weight:var(--fw-semibold);line-height:1.3}
.ui-line-item__meta{color:var(--text-secondary);font-size:var(--fs-footnote)}
.ui-line-item__price{font-size:var(--fs-callout);font-weight:var(--fw-semibold);text-align:right;font-variant-numeric:tabular-nums}
.ui-totals{display:grid;gap:var(--space-2);margin:0;font-size:var(--fs-callout);font-variant-numeric:tabular-nums}
.ui-totals>div{display:flex;justify-content:space-between;gap:var(--space-4)}
.ui-totals dt{color:var(--text-secondary)}
.ui-totals dd{margin:0;text-align:right}
.ui-totals .ui-totals__grand{padding-top:var(--space-3);border-top:1px solid var(--separator);color:var(--text-primary);font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.ui-totals .ui-totals__grand dt{color:inherit}

/* ---------- Sticky summary bar (mobile) and summary card (desktop) ---------- */
.ui-summary-bar{position:fixed;inset:auto 0 0;z-index:var(--z-summary);isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--summary-h);padding:var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom,0px));color:var(--text-primary)}
.ui-summary-bar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);border-top:1px solid var(--glass-border)}
.ui-summary-bar__total{display:grid;gap:1px;min-width:0;font-variant-numeric:tabular-nums}
.ui-summary-bar__amount{font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.2}
.ui-summary-bar__note{color:var(--text-secondary);font-size:var(--fs-caption)}
.has-ui-summary-bar{padding-bottom:calc(var(--summary-h) + env(safe-area-inset-bottom,0px))}
html:has(.has-ui-summary-bar){scroll-padding-bottom:calc(var(--summary-h) + var(--space-4))}
.ui-summary-card{position:sticky;top:calc(var(--nav-h) + var(--space-4));display:grid;gap:var(--space-4);padding:var(--space-6);border-radius:var(--r-xl);background:var(--color-surface);box-shadow:var(--elevation-2)}
@media (min-width:1068px){.ui-summary-bar{display:none}.has-ui-summary-bar{padding-bottom:0}}
@media (max-width:1067.98px){.ui-summary-card{display:none}}

/* ---------- Status chips: every order and line status (CONTRACT §8.3), icon + label ---------- */
.ui-chip{--chip-bg:var(--status-neutral-tint);--chip-fg:var(--status-neutral-text);display:inline-flex;align-items:center;gap:.375rem;min-height:1.625rem;margin:0;padding:.25rem .625rem;border-radius:var(--r-badge);background:var(--chip-bg);color:var(--chip-fg);font-family:var(--font-text);font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:1.2;letter-spacing:0;white-space:nowrap}
.ui-chip[data-status]::before,.ui-chip--icon::before{content:"";flex:none;width:.875rem;height:.875rem;background:currentColor;-webkit-mask:var(--chip-icon,var(--icon-info)) center/contain no-repeat;mask:var(--chip-icon,var(--icon-info)) center/contain no-repeat}
.ui-chip__dot{flex:none;width:.4375rem;height:.4375rem;border-radius:50%;background:currentColor}
.ui-chip--success{--chip-bg:var(--status-success-tint);--chip-fg:var(--status-success-text)}
.ui-chip--warning{--chip-bg:var(--status-warning-tint);--chip-fg:var(--status-warning-text)}
.ui-chip--danger{--chip-bg:var(--status-danger-tint);--chip-fg:var(--status-danger-text)}
.ui-chip--info{--chip-bg:var(--status-info-tint);--chip-fg:var(--status-info-text)}
.ui-chip--accent{--chip-bg:var(--accent-tint);--chip-fg:var(--accent-text)}
.ui-chip--pending{--chip-bg:var(--pending-tint);--chip-fg:var(--pending-text)}
.ui-chip--on-photo{--chip-bg:rgb(26 23 21 / .62);--chip-fg:var(--c-linen);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ui-chip[data-status="AWAITING_STAY_PAYMENT"]{--chip-icon:var(--icon-clock)}
.ui-chip[data-status="REQUESTED"]{--chip-bg:var(--status-warning-tint);--chip-fg:var(--status-warning-text);--chip-icon:var(--icon-clock)}
.ui-chip[data-status="ALTERNATIVE_PROPOSED"]{--chip-bg:var(--status-info-tint);--chip-fg:var(--status-info-text);--chip-icon:var(--icon-swap)}
.ui-chip[data-status="AWAITING_PAYMENT"]{--chip-bg:var(--status-warning-tint);--chip-fg:var(--status-warning-text);--chip-icon:var(--icon-card)}
.ui-chip[data-status="PAID"],.ui-chip[data-status="CONFIRMED"]{--chip-bg:var(--status-success-tint);--chip-fg:var(--status-success-text);--chip-icon:var(--icon-check)}
.ui-chip[data-status="SCHEDULED"]{--chip-bg:var(--status-info-tint);--chip-fg:var(--status-info-text);--chip-icon:var(--icon-calendar)}
.ui-chip[data-status="PREPARING"]{--chip-bg:var(--accent-tint);--chip-fg:var(--accent-text);--chip-icon:var(--icon-sparkle)}
.ui-chip[data-status="ON_THE_WAY"]{--chip-bg:var(--accent-tint);--chip-fg:var(--accent-text);--chip-icon:var(--icon-car)}
.ui-chip[data-status="DELIVERED"]{--chip-bg:var(--status-success-tint);--chip-fg:var(--status-success-text);--chip-icon:var(--icon-check-circle)}
.ui-chip[data-status="DECLINED"]{--chip-bg:var(--status-danger-tint);--chip-fg:var(--status-danger-text);--chip-icon:var(--icon-x)}
.ui-chip[data-status="CANCELED"]{--chip-icon:var(--icon-x)}
.ui-chip[data-status="EXPIRED"]{--chip-icon:var(--icon-alert)}
.ui-chip[data-status="REFUND_PENDING"]{--chip-bg:var(--status-info-tint);--chip-fg:var(--status-info-text);--chip-icon:var(--icon-refund)}
.ui-chip[data-status="REFUNDED"]{--chip-icon:var(--icon-refund)}
@media (prefers-reduced-motion:no-preference){.ui-chip--live .ui-chip__dot,.ui-chip[data-status="ON_THE_WAY"]::before{animation:ui-pulse 2s ease-in-out infinite}}
.ui-badge{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:var(--r-badge);background:var(--color-accent);color:var(--color-on-accent);font-size:.6875rem;font-weight:var(--fw-bold);line-height:1;font-variant-numeric:tabular-nums}

/* ---------- Toasts (region: role="status" aria-live="polite"; toasts never take focus) ---------- */
.ui-toast-region{position:fixed;z-index:var(--z-toast);left:0;right:0;bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0px) + var(--toast-offset,0px));display:grid;justify-items:center;gap:var(--space-2);padding-inline:var(--gutter);pointer-events:none}
@media (max-width:1067.98px){.has-ui-summary-bar .ui-toast-region{--toast-offset:var(--summary-h)}}
.ui-toast{pointer-events:auto;display:flex;align-items:center;gap:var(--space-3);width:min(26rem,100%);padding:.75rem .75rem .75rem 1rem;border-radius:var(--r-lg);background:var(--glass-dark-bg-strong);color:var(--c-linen);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--elevation-3);font-size:var(--fs-callout);line-height:var(--lh-callout)}
.ui-toast::before{content:"";flex:none;width:1.25rem;height:1.25rem;background:currentColor;-webkit-mask:var(--toast-icon,var(--icon-info)) center/contain no-repeat;mask:var(--toast-icon,var(--icon-info)) center/contain no-repeat}
.ui-toast--success::before{--toast-icon:var(--icon-check-circle);color:#8FCBA3}
.ui-toast--error::before{--toast-icon:var(--icon-alert);color:#F09A8E}
.ui-toast--info::before{color:#9CC3E8}
.ui-toast__message{flex:1;min-width:0;margin:0}
.ui-toast__action{margin:0 0 0 auto;padding:.4375rem .75rem;border:0;border-radius:var(--r-badge);background:rgb(250 247 241 / .12);color:var(--c-honey-bright);font-family:var(--font-text);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1;cursor:pointer}
.ui-toast__action:focus-visible{outline:2px solid var(--c-honey-bright);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.ui-toast{animation:ui-toast-in var(--dur-3) var(--ease-out) both}.ui-toast[data-leaving]{animation:ui-toast-out var(--dur-2) var(--ease-in) both}}

/* ---------- Steps indicator ---------- */
.ui-steps{display:flex;gap:var(--space-2);margin:0 0 var(--space-6);padding:0;list-style:none;counter-reset:ui-step}
.ui-steps>li{flex:1;display:grid;gap:var(--space-2);min-width:0;margin:0;color:var(--text-secondary);font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:1.2}
.ui-steps>li::before{content:"";height:3px;border-radius:2px;background:var(--fill-primary)}
.ui-steps>li.is-done::before{background:var(--color-accent)}
.ui-steps>li[aria-current="step"]{color:var(--text-primary)}
.ui-steps>li[aria-current="step"]::before{background:var(--color-ink)}
@media (max-width:479.98px){.ui-steps>li:not([aria-current="step"])>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* ---------- Skeletons and empty states ---------- */
.ui-skeleton{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--fill-tertiary) 25%,var(--fill-secondary) 50%,var(--fill-tertiary) 75%) 0 0 / 200% 100%;animation:ui-shimmer 1.4s linear infinite}
.ui-skeleton--text{height:.875em;margin-block:.3em;border-radius:var(--r-pill)}
.ui-skeleton--title{width:60%;height:1.4em;border-radius:var(--r-pill)}
.ui-skeleton--media{aspect-ratio:4 / 3;border-radius:var(--r-lg)}
.ui-skeleton--circle{width:2.75rem;height:2.75rem;border-radius:50%}
.ui-empty{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-10) var(--space-5);color:var(--text-secondary);text-align:center}
.ui-empty__title{margin:0;color:var(--text-primary);font-size:var(--fs-title-3);font-weight:var(--fw-semibold);line-height:1.3}

/* ---------- Model picker (vehicles, CONTRACT §12) and menu picker ----------
   A stage (3:2 photo that cross-fades between stacked shots, name, class, spec chips, price) above a
   rail of model cards that form one radio group. Layout follows the picker's own width (container
   queries), so the same markup works in a 36rem sheet and in a 1200px page column. DOM order:
   __stage (__media, __info), __choose, __fit, __actions. Below 44rem the stage dissolves
   (display:contents) and the rail moves up under the photo: photo, rail, fit, details, actions, so a
   tap on a card changes the photo in view. From 44rem: photo | details, then rail, fit, actions.
   Focus order matches both (the details hold no controls). The rail scrolls with snap until every
   card fits on one row (2-6 cards), then becomes a single row of equal columns. */
.ui-model-picker{container:ui-picker / inline-size;display:grid;gap:var(--space-5);min-width:0;color:var(--text-primary)}
.ui-model-picker__stage{display:contents}
.ui-model-picker__media{order:0}
.ui-model-picker__choose{order:1}
.ui-model-picker__fit{order:2}
.ui-model-picker__info{order:3;padding-top:var(--space-1)}
.ui-model-picker__actions{order:4}
.ui-model-picker__media{position:relative;margin:0;aspect-ratio:16 / 10;overflow:hidden;border-radius:var(--r-tile);background:var(--color-canvas-alt)}
.ui-model-picker__shot{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0}
.ui-model-picker__shot.is-active{opacity:1}
.ui-model-picker__info{display:grid;align-content:center;gap:var(--space-4);min-width:0}
.ui-model-picker__caption{display:grid;gap:var(--space-1)}
.ui-model-picker__class{margin:0;color:var(--accent-text);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:var(--ls-footnote)}
.ui-model-picker__name{margin:0;color:var(--text-primary);font-family:var(--font-display);font-size:var(--fs-title-2);font-weight:var(--fw-semibold);line-height:var(--lh-title-2);letter-spacing:var(--ls-title-2);text-wrap:balance}
.ui-model-picker__highlights{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none;color:var(--text-body);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
.ui-model-picker__highlights>li{display:flex;align-items:flex-start;gap:.5rem;margin:0}
.ui-model-picker__highlights>li::before{content:"";flex:none;width:.875rem;height:.875rem;margin-top:.15em;background:var(--accent-text);-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
.ui-model-picker__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5rem;margin:0;padding-top:var(--space-4);border-top:1px solid var(--separator)}
.ui-model-picker__amount{color:var(--text-primary);font-size:var(--fs-title-3);font-weight:var(--fw-semibold);line-height:1.25;letter-spacing:-.012em;font-variant-numeric:tabular-nums lining-nums}
.ui-model-picker__unit{color:var(--text-secondary);font-size:var(--fs-callout);line-height:1.4}
.ui-model-picker__note{flex-basis:100%;margin-top:2px;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
/* Group fit: the selected model seats fewer guests than the party. Factual, with a way out; never auto-adds. */
.ui-model-picker__fit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-3);align-items:start;margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-md);background:var(--status-warning-tint);color:var(--status-warning-text);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
.ui-model-picker__fit::before{content:"";grid-row:1 / span 2;width:1.125rem;height:1.125rem;margin-top:.0625rem;background:currentColor;-webkit-mask:var(--icon-info) center/contain no-repeat;mask:var(--icon-info) center/contain no-repeat}
.ui-model-picker__fit>*{grid-column:2;margin:0}
.ui-model-picker [hidden],.ui-gallery [hidden],.ui-rec [hidden]{display:none}
.ui-model-picker__fit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.ui-model-picker__fit .ui-link{min-height:2.25rem;color:var(--status-warning-text);font-size:var(--fs-footnote);font-weight:var(--fw-semibold)}
.ui-model-picker__choose{display:grid;gap:var(--space-2);min-width:0}
.ui-model-picker__legend{margin:0;color:var(--text-primary);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1.3}
/* Generated or illustrative model photos (catalogue N-08): one quiet line under the rail, never a chip on the photo. */
.ui-model-picker__disclaimer{display:flex;align-items:flex-start;gap:.4rem;margin:0;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.ui-model-picker__disclaimer::before{content:"";flex:none;width:.8125rem;height:.8125rem;margin-top:.12em;background:currentColor;-webkit-mask:var(--icon-info) center/contain no-repeat;mask:var(--icon-info) center/contain no-repeat}
.ui-model-picker__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}

/* Spec chips: <ul class="ui-specs"><li data-spec="seats"><strong>5</strong> seats</li>... */
.ui-specs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}
.ui-specs>li{--spec-icon:var(--icon-info);display:inline-block;margin:0;padding:.4375rem .75rem .4375rem .625rem;border-radius:var(--r-control);background:var(--fill-tertiary);color:var(--text-body);font-size:var(--fs-footnote);font-weight:var(--fw-medium);line-height:1.3;letter-spacing:var(--ls-footnote);white-space:nowrap}
.ui-specs>li::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:.375rem;vertical-align:-.21875rem;background:currentColor;-webkit-mask:var(--spec-icon) center/contain no-repeat;mask:var(--spec-icon) center/contain no-repeat}
.ui-specs strong{color:var(--text-primary);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums lining-nums}
.ui-specs [data-spec="seats"]{--spec-icon:var(--icon-seat)}
.ui-specs [data-spec="suitcases"]{--spec-icon:var(--icon-suitcase)}
.ui-specs [data-spec="carry-ons"]{--spec-icon:var(--icon-carry-on)}
.ui-specs [data-spec="engine"]{--spec-icon:var(--icon-engine)}
.ui-specs [data-spec="duration"]{--spec-icon:var(--icon-clock)}

/* Model rail: role="radiogroup" > button[role="radio"].ui-model-card (or label.ui-model-card > input[type="radio"]).
   --ui-rail-bleed: set it to the parent's side padding so the scrolling rail runs to the edge. */
.ui-model-rail{--rail-pad:max(var(--ui-rail-bleed,0px),.375rem);display:grid;grid-auto-flow:column;grid-auto-columns:var(--rail-card,clamp(9.5rem,42cqi,11rem));gap:var(--space-3);margin:0 calc(var(--rail-pad) * -1);padding:.375rem var(--rail-pad) var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rail-pad);scrollbar-width:none;list-style:none}
.ui-model-rail::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.ui-model-rail{scrollbar-width:thin;scrollbar-color:var(--fill-primary) transparent}.ui-model-rail::-webkit-scrollbar{display:initial}}
.ui-model-rail>li{display:flex;margin:0}
/* Five rows shared by every card of the rail (photo, name, meta, note, price), so a name or a note that
   wraps on one card moves the same row on all of them. A card leaves a row it has no content for empty. */
@supports (grid-template-rows:subgrid){
  .ui-model-rail{grid-template-rows:repeat(5,auto);row-gap:0}
  .ui-model-rail>.ui-model-card,.ui-model-rail>li{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:2px;align-content:start}
  .ui-model-rail>li>.ui-model-card{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;row-gap:2px}
  .ui-model-card__media{grid-row:1}
  .ui-model-card__name{grid-row:2}
  .ui-model-card__meta{grid-row:3}
  .ui-model-card__note{grid-row:4;align-self:start}
  .ui-model-card__price{grid-row:5;align-self:end}
}
/* Rails that scroll run to the edge of their parent: a sheet body sets it; --bleed is for a picker or
   rail placed straight in a ui-container (page gutter). */
.ui-sheet__body{--ui-rail-bleed:var(--space-5)}
.ui-model-picker--bleed,.ui-rec-rail--bleed{--ui-rail-bleed:var(--gutter)}
/* Scooters sit smaller in the shared framing: the cards crop in further. */
.ui-model-picker--scooter{--ui-thumb-zoom:1.6;--ui-thumb-focus:13% 92%}
/* One row of equal columns once every card fits (the :has() guards count the cards). */
@container ui-picker (min-width:20rem){.ui-model-rail:not(:has(>:nth-child(3))){grid-auto-columns:minmax(0,15rem);margin-inline:0;padding-inline:0;overflow:visible;scroll-snap-type:none}}
@container ui-picker (min-width:30rem){.ui-model-rail:not(:has(>:nth-child(4))){grid-auto-columns:minmax(0,15rem);margin-inline:0;padding-inline:0;overflow:visible;scroll-snap-type:none}}
@container ui-picker (min-width:38rem){.ui-model-rail:not(:has(>:nth-child(5))){grid-auto-columns:minmax(0,15rem);margin-inline:0;padding-inline:0;overflow:visible;scroll-snap-type:none}}
@container ui-picker (min-width:46rem){.ui-model-rail:not(:has(>:nth-child(6))){grid-auto-columns:minmax(0,15rem);margin-inline:0;padding-inline:0;overflow:visible;scroll-snap-type:none}}
@container ui-picker (min-width:54rem){.ui-model-rail:not(:has(>:nth-child(7))){grid-auto-columns:minmax(0,15rem);margin-inline:0;padding-inline:0;overflow:visible;scroll-snap-type:none}}

.ui-model-card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:2px;width:100%;min-width:0;margin:0;padding:var(--space-2) var(--space-2) var(--space-3);border:0;border-radius:var(--r-lg);background:var(--color-surface);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--separator);font-family:var(--font-text);font-size:var(--fs-callout);font-weight:var(--fw-regular);line-height:1.3;letter-spacing:var(--ls-callout);text-align:left;text-decoration:none;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ui-model-card input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ui-model-card__media{display:block;margin:0 0 var(--space-2);aspect-ratio:3 / 2;overflow:hidden;border-radius:var(--r-md);background:var(--color-canvas-alt)}
/* The vehicle shots share one framing (model left, villa right), so the card crops in on the model:
   --ui-thumb-zoom / --ui-thumb-focus (the menu picker resets them). */
.ui-model-card__media img{--thumb-scale:var(--ui-thumb-zoom,1.3);display:block;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(var(--thumb-scale));transform-origin:var(--ui-thumb-focus,16% 72%)}
.ui-model-card__name{padding-inline:var(--space-1);color:var(--text-primary);font-weight:var(--fw-semibold);text-wrap:balance}
.ui-model-card__meta{padding-inline:var(--space-1);color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:0}
.ui-model-card__price{margin-top:auto;padding:var(--space-1) var(--space-1) 0;color:var(--text-primary);font-size:var(--fs-footnote);font-weight:var(--fw-medium);line-height:1.3;font-variant-numeric:tabular-nums lining-nums}
.ui-model-card__note{display:flex;align-items:flex-start;gap:.3125rem;padding:2px var(--space-1) 0;color:var(--text-secondary);font-size:var(--fs-caption);font-weight:var(--fw-medium);line-height:var(--lh-caption);letter-spacing:0}
.ui-model-card__note::before{content:"";flex:none;width:.8125rem;height:.8125rem;margin-top:.1em;background:currentColor;-webkit-mask:var(--icon-info) center/contain no-repeat;mask:var(--icon-info) center/contain no-repeat}
.ui-model-card__tag{position:absolute;z-index:1;top:calc(var(--space-2) + .5rem);left:calc(var(--space-2) + .5rem);max-width:calc(100% - 4.5rem)}
/* Selected: honey ring and a check badge on the photo (::after the disc, ::before the check). */
.ui-model-card::before,.ui-model-card::after{content:"";position:absolute;top:calc(var(--space-2) + .4375rem);right:calc(var(--space-2) + .4375rem);width:1.5rem;height:1.5rem;border-radius:50%;opacity:0;transform:scale(.6);pointer-events:none}
.ui-model-card::after{z-index:1;background:var(--color-accent);box-shadow:0 0 0 2px var(--color-surface),0 2px 6px rgb(18 15 12 / .18)}
.ui-model-card::before{z-index:2;border-radius:0;background:var(--color-on-accent);-webkit-mask:var(--icon-check) center/.875rem no-repeat;mask:var(--icon-check) center/.875rem no-repeat}
.ui-model-card:is([aria-checked="true"],:has(input:checked)){background:color-mix(in srgb,var(--accent-tint) 32%,var(--color-surface));box-shadow:inset 0 0 0 2px var(--selection-border)}
.ui-model-card:is([aria-checked="true"],:has(input:checked))::before,.ui-model-card:is([aria-checked="true"],:has(input:checked))::after{opacity:1;transform:none}
.ui-model-card:is(:focus-visible,:has(input:focus-visible)){outline:2px solid var(--color-ink);outline-offset:3px}
.ui-model-card:focus:not(:focus-visible){outline:none}
/* Too small for the party: still a full-colour choice; its note (secondary text) says how many it takes. */
.ui-model-card:is(:disabled,[aria-disabled="true"],:has(input:disabled)){opacity:.45;cursor:not-allowed}
@media (hover:hover){
  .ui-model-card:not([aria-checked="true"],:has(input:checked)):hover{box-shadow:inset 0 0 0 1px var(--separator-strong),var(--elevation-2)}
}
@container ui-picker (min-width:44rem){
  .ui-model-picker__stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(16rem,1fr);gap:var(--space-8);align-items:center;min-width:0}
  .ui-model-picker__info{padding-top:0}
  .ui-model-picker__choose{margin-top:var(--space-5)}
  .ui-model-picker__media{aspect-ratio:3 / 2}
  /* Wide info column: the spec chips become a strip of equal cells (icon, figure, label), never an orphan chip. */
  .ui-model-picker .ui-specs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-2)}
  .ui-model-picker .ui-specs>li{display:grid;align-content:start;gap:1px;padding:var(--space-3);border-radius:var(--r-md);white-space:normal;line-height:1.25}
  .ui-model-picker .ui-specs>li::before{margin:0 0 var(--space-1)}
  .ui-model-picker .ui-specs strong{display:block;font-size:var(--fs-title-3);line-height:1.15}
  .ui-model-picker__name{font-size:var(--fs-title-1);line-height:var(--lh-title-1);letter-spacing:var(--ls-title-1)}
}
@media (prefers-reduced-motion:no-preference){
  .ui-model-picker__shot{transform:scale(1.012);transition:opacity var(--dur-4) var(--ease-standard),transform var(--dur-reveal) var(--ease-out)}
  .ui-model-picker__shot.is-active{transform:none}
  .ui-model-card{transition:box-shadow var(--dur-2) var(--ease-standard),background-color var(--dur-2) var(--ease-standard),transform var(--dur-1) var(--ease-standard)}
  .ui-model-card:active{transform:scale(.98)}
  .ui-model-card::before,.ui-model-card::after{transition:opacity var(--dur-2) var(--ease-standard),transform var(--dur-3) var(--ease-out)}
  .ui-model-card__media img{transition:transform var(--dur-4) var(--ease-out),opacity var(--dur-2) var(--ease-standard),filter var(--dur-2) var(--ease-standard)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.ui-model-card:hover .ui-model-card__media img{transform:scale(calc(var(--thumb-scale) * 1.04))}}

/* Menu picker: the same pattern for food menus, photo first, with the menu text and an allergens line.
   class="ui-model-picker ui-menu-picker"; the menu photo carries the stage. */
.ui-menu-picker{--ui-thumb-zoom:1.3;--ui-thumb-focus:50% 86%;--rail-card:clamp(10rem,46cqi,13rem)}
.ui-menu-picker__desc{margin:0;color:var(--text-body);font-size:var(--fs-callout);line-height:var(--lh-callout);letter-spacing:var(--ls-callout);text-wrap:pretty}
.ui-menu-picker__allergens{display:flex;align-items:flex-start;gap:.5rem;margin:0;color:var(--text-secondary);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
.ui-menu-picker__allergens::before{content:"";flex:none;width:1rem;height:1rem;margin-top:.1em;background:currentColor;-webkit-mask:var(--icon-alert) center/contain no-repeat;mask:var(--icon-alert) center/contain no-repeat}
.ui-menu-picker__allergens strong{color:var(--text-body);font-weight:var(--fw-semibold)}
@container ui-picker (min-width:44rem){.ui-menu-picker .ui-model-picker__stage{grid-template-columns:minmax(0,1.7fr) minmax(16rem,1fr)}}

/* ---------- Gallery: swipeable scroll-snap carousel with dots, a live counter and prev/next ----------
   section.ui-gallery[aria-roledescription="carousel"] > .ui-gallery__viewport[tabindex="0"] > .ui-gallery__slide,
   then .ui-gallery__bar (dots, counter, buttons). Arrow keys on the viewport and the buttons move one photo. */
.ui-gallery{display:grid;gap:var(--space-3);min-width:0;margin:0}
.ui-gallery__viewport{position:relative;display:flex;gap:var(--space-3);margin:0;padding:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r-tile);list-style:none}
.ui-gallery__viewport::-webkit-scrollbar{display:none}
.ui-gallery__viewport:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.ui-gallery__slide{flex:0 0 100%;min-width:0;margin:0;aspect-ratio:3 / 2;overflow:hidden;border-radius:var(--r-tile);background:var(--color-canvas-alt);scroll-snap-align:center;scroll-snap-stop:always}
.ui-gallery__slide img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.ui-gallery--peek .ui-gallery__viewport{scroll-padding-inline:var(--space-1)}
.ui-gallery--peek .ui-gallery__slide{flex-basis:88%;scroll-snap-align:start}
.ui-gallery__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--tap-min)}
.ui-gallery__dots{display:flex;align-items:center;gap:.4375rem;margin:0;padding:0 0 0 var(--space-1)}
.ui-gallery__dots>*{display:block;width:.4375rem;height:.4375rem;border-radius:var(--r-pill);background:color-mix(in srgb,var(--text-primary) 24%,transparent)}
.ui-gallery__dots>.is-active{width:1.25rem;background:var(--text-primary)}
.ui-gallery__counter{margin:0;color:var(--text-secondary);font-size:var(--fs-footnote);font-variant-numeric:tabular-nums}
.ui-gallery__nav{display:flex;gap:var(--space-2);margin-left:auto}
.ui-gallery__nav .ui-icon-button{--icon:var(--icon-chevron);background:var(--fill-secondary)}
.ui-gallery__prev,.ui-gallery__next{flex:none}
.ui-gallery__prev::before{transform:scaleX(-1)}
.ui-gallery__nav .ui-icon-button[aria-disabled="true"]{opacity:.35;cursor:default}
@media (hover:hover){.ui-gallery__nav .ui-icon-button:not([aria-disabled="true"]):hover{background:var(--fill-primary)}}
@media (prefers-reduced-motion:no-preference){
  .ui-gallery__viewport{scroll-behavior:smooth}
  .ui-gallery__dots>*{transition:width var(--dur-3) var(--ease-out),background-color var(--dur-3) var(--ease-standard)}
}

/* ---------- Recommendations (upsell cards and rails, CONTRACT §12: at most 3, honest, priced with unit) ----------
   .ui-rec-rail > .ui-rec-rail__head + ul.ui-rec-rail__list > li > article.ui-rec; .ui-rec--row is the
   one-line cross-sell for a cart. The title link opens the service (stretched over the card); the add
   button sits above it. */
.ui-rec-rail{container:ui-rec-rail / inline-size;display:grid;gap:var(--space-4);min-width:0}
.ui-rec-rail__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-1) var(--space-5)}
.ui-rec-rail__title{margin:0;color:var(--text-primary);font-family:var(--font-display);font-size:var(--fs-title-3);font-weight:var(--fw-semibold);line-height:var(--lh-title-3);letter-spacing:var(--ls-title-3)}
.ui-rec-rail__note{margin:0;color:var(--text-secondary);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
.ui-rec-rail__list{--rail-pad:max(var(--ui-rail-bleed,0px),.375rem);display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,17.5rem);gap:var(--grid-gap);margin:0 calc(var(--rail-pad) * -1);padding:.375rem var(--rail-pad) var(--space-6);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rail-pad);scrollbar-width:none;list-style:none}
.ui-rec-rail__list::-webkit-scrollbar{display:none}
.ui-rec-rail__list>li{display:flex;min-width:0;margin:0;scroll-snap-align:start}
@container ui-rec-rail (min-width:40rem){.ui-rec-rail__list:not(:has(>:nth-child(5))){grid-auto-columns:minmax(0,1fr);margin-inline:0;padding-inline:0;overflow:visible;scroll-snap-type:none}}

.ui-rec{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:0;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--color-surface);color:var(--text-primary);box-shadow:var(--elevation-2)}
.ui-rec__media{margin:0;aspect-ratio:3 / 2;overflow:hidden;background:var(--color-canvas-alt)}
.ui-rec__media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.ui-rec__body{display:flex;flex:1;flex-direction:column;gap:var(--space-1);min-width:0;padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5)}
.ui-rec__eyebrow{margin:0;color:var(--accent-text);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1.3}
.ui-rec__title{margin:0;color:var(--text-primary);font-family:var(--font-display);font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:var(--ls-body);text-wrap:balance}
.ui-rec__open{color:inherit;text-decoration:none;border-radius:var(--r-xs)}
.ui-rec__open::after{content:"";position:absolute;inset:0;z-index:0;border-radius:var(--r-lg)}
.ui-rec__open:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* The ring moves to the whole card where :has() exists; elsewhere it stays on the title link. */
@supports selector(:has(*)){.ui-rec__open:focus-visible{outline:none}.ui-rec:has(.ui-rec__open:focus-visible){outline:2px solid var(--focus-ring);outline-offset:3px}}
.ui-rec__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);margin-top:auto;padding-top:var(--space-3)}
.ui-rec__price{margin:0;color:var(--text-secondary);font-size:var(--fs-footnote);line-height:1.35;font-variant-numeric:tabular-nums lining-nums}
.ui-rec__amount{display:block;color:var(--text-primary);font-size:var(--fs-callout);font-weight:var(--fw-semibold)}
.ui-rec__add{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.3125rem;min-height:2.25rem;margin:0 0 0 auto;padding:.4375rem .875rem .4375rem .75rem;border:0;border-radius:var(--r-button-sm);background:var(--fill-secondary);color:var(--text-primary);font-family:var(--font-text);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1.2;letter-spacing:-.003em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ui-rec__add::before{content:"";flex:none;width:.875rem;height:.875rem;background:currentColor;-webkit-mask:var(--icon-plus) center/contain no-repeat;mask:var(--icon-plus) center/contain no-repeat}
.ui-rec__add[data-state="added"]{background:var(--status-success-tint);color:var(--status-success-text)}
.ui-rec__add[data-state="added"]::before{-webkit-mask-image:var(--icon-check);mask-image:var(--icon-check)}
.ui-rec__add:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ui-rec__add:disabled,.ui-rec__add[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
@media (pointer:coarse){.ui-rec__add{min-height:var(--tap-min)}}
/* A card that opens a sheet (the guest still chooses a day, a time, a model) shows a chevron, never "Add":
   <span class="ui-rec__go" aria-hidden="true"></span>, the whole card being the __open control. Once the
   guest has added it from the sheet: data-state="added" and the text "Added". __add is only for a line that
   really adds in one tap. */
/* A card that opens: the chevron stays beside the price, however long its unit ("per vehicle, up to 10 hours"). */
.ui-rec__footer:has(>.ui-rec__go){flex-wrap:nowrap}
.ui-rec__footer>.ui-rec__price{min-width:0}
.ui-rec__go{display:inline-grid;grid-auto-flow:column;place-items:center;gap:.3125rem;flex:none;min-width:2.25rem;height:2.25rem;margin:0 0 0 auto;padding:0;border-radius:var(--r-button-sm);background:var(--fill-secondary);color:var(--text-primary);font-family:var(--font-text);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1;white-space:nowrap}
.ui-rec__go::before{content:"";width:.875rem;height:.875rem;background:currentColor;-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat}
.ui-rec__go[data-state="added"]{padding:0 .75rem 0 .625rem;background:var(--status-success-tint);color:var(--status-success-text)}
.ui-rec__go[data-state="added"]::before{-webkit-mask-image:var(--icon-check);mask-image:var(--icon-check)}
@media (hover:hover){.ui-rec:has(.ui-rec__open:hover) .ui-rec__go:not([data-state="added"]){background:var(--color-ink);color:var(--color-on-ink)}}
@media (hover:hover){.ui-rec__add:not([data-state="added"]):hover{background:var(--fill-primary)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ui-rec{transition:box-shadow var(--dur-3) var(--ease-standard),transform var(--dur-3) var(--ease-standard)}
  .ui-rec__media img{transition:transform var(--dur-4) var(--ease-out)}
  .ui-rec:not(.ui-rec--row):has(.ui-rec__open:hover){box-shadow:var(--elevation-3);transform:translateY(-2px)}
  .ui-rec:has(.ui-rec__open:hover) .ui-rec__media img{transform:scale(1.03)}
}
@media (prefers-reduced-motion:no-preference){.ui-rec__add{transition:background-color var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard),transform var(--dur-1) var(--ease-standard)}.ui-rec__add:active{transform:scale(.96)}.ui-rec__go{transition:background-color var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard)}}
/* One-line cross-sell (cart, request-sent screen): thumbnail, text, add button. Same markup. */
.ui-rec--row{flex-direction:row;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--r-lg);background:var(--fill-tertiary);box-shadow:none}
.ui-rec--row .ui-rec__media{flex:none;width:4.5rem;aspect-ratio:1;border-radius:var(--r-sm)}
.ui-rec--row .ui-rec__body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px var(--space-3);padding:0}
.ui-rec--row .ui-rec__body>:not(.ui-rec__footer){grid-column:1}
.ui-rec--row .ui-rec__footer{display:contents}
.ui-rec--row .ui-rec__price{grid-column:1}
.ui-rec--row .ui-rec__amount{display:inline;font-size:var(--fs-footnote)}
.ui-rec--row .ui-rec__add,.ui-rec--row .ui-rec__go{grid-column:2;grid-row:1 / span 3;margin:0}
.ui-rec--row .ui-rec__title{font-size:var(--fs-callout);text-wrap:pretty}

/* ---------- Garage: the game-style vehicle selector (CONTRACT §13, DESIGN.md §5.2) ----------
   Rendered by the garage script (BMGGarage.mount). A night showroom whose villa scene never moves: __stage
   stacks one frame per model and the incoming frame fades in on top of the outgoing one, which stays
   opaque underneath (no dip), under a light sweep. Then __readout (class, make, very large model name,
   price, segmented stat bars, highlights), __dock (fit line, priced ways out, select button), __rail
   (thumbnails, one radio group) and __disclaimer. One fixed dark world in both themes: the dark scope
   tokens plus --garage-*. Layout follows the garage's own width: below 54rem the readout sits under a
   4:3 stage (16:10 in a sheet on a phone); from 54rem the whole 3:2 photo and the readout stand side by side.
   Text never lies on the vehicle and the arrows never touch the readout. ui-garage--sheet fits a ui-sheet
   body (the sheet footer keeps the call to action); ui-sheet--garage turns the whole dialog into the garage
   world. Fleet mode (ui-garage--fleet) puts Add (or − n +) on the price's row, next to the model's name. */
.ui-garage{--garage-focus:38% 68%;--garage-focus-wide:42% 64%;--garage-thumb-zoom:1.28;--garage-thumb-focus:18% 76%;--garage-value-w:2.75rem;
  container:ui-garage / inline-size;position:relative;isolation:isolate;display:grid;gap:var(--space-4);min-width:0;margin:0;padding:var(--garage-pad,clamp(.75rem,.45rem + 1.2vw,1.5rem));border-radius:var(--r-tile);background:var(--garage-bg);color:var(--text-primary);font-family:var(--font-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ui-garage[data-kind="scooter"]{--garage-focus:30% 74%;--garage-focus-wide:36% 66%;--garage-thumb-zoom:1.62;--garage-thumb-focus:13% 92%;--garage-value-w:4.5rem}
.ui-garage [hidden]{display:none}
.ui-garage__showroom{position:relative;display:grid;gap:var(--space-5);min-width:0}
.ui-garage__stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4 / 3;border-radius:var(--r-lg);background:var(--garage-stage);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.ui-garage__stage:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.ui-garage__stage::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--garage-line);pointer-events:none}
@media (hover:hover) and (pointer:fine){.ui-garage__stage{cursor:grab}.ui-garage__stage:active{cursor:grabbing}}
.ui-garage__frames{position:absolute;inset:0;z-index:0}
.ui-garage__frame{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--garage-focus);opacity:0;pointer-events:none;-webkit-user-drag:none}
.ui-garage__frame:not(.is-shown,.is-entering,.is-leaving){visibility:hidden}
.ui-garage__frame.is-shown{opacity:1}
.ui-garage__frame.is-entering,.ui-garage__frame.is-leaving{opacity:0}
.ui-garage__vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--garage-scrim-top) 0%,transparent 30%)}
.ui-garage__sweep{position:absolute;inset:-10% -50%;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 40%,var(--garage-sweep) 50%,transparent 60%);mix-blend-mode:screen}
.ui-garage__hud{position:absolute;z-index:3;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);color:var(--text-primary);font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:.08em;text-transform:uppercase;text-shadow:var(--garage-text-shadow);pointer-events:none}
.ui-garage__product{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-garage__count{flex:none;font-variant-numeric:tabular-nums lining-nums}
.ui-garage__count b{color:var(--garage-accent);font-weight:var(--fw-bold)}
/* Glass arrows on the stage (the approved prototype): blur on two small buttons only. */
.ui-garage__nav{position:absolute;z-index:4;top:50%;display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);margin:0;padding:0;border:1px solid var(--garage-glass-border);border-radius:50%;background:var(--garage-glass);color:var(--text-primary);-webkit-backdrop-filter:var(--garage-glass-filter);backdrop-filter:var(--garage-glass-filter);cursor:pointer;translate:0 -50%;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ui-garage__nav::before{content:"";width:1.125rem;height:1.125rem;background:currentColor;-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat}
.ui-garage__nav--prev{left:var(--space-3)}
.ui-garage__nav--prev::before{transform:scaleX(-1)}
.ui-garage__nav--next{right:var(--space-3)}
.ui-garage__nav:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
@media (hover:hover){.ui-garage__nav:hover{border-color:var(--text-primary);background:var(--garage-glass-hover)}}
.ui-garage--single .ui-garage__nav,.ui-garage--single .ui-garage__count,.ui-garage--single .ui-garage__rail{display:none}

.ui-garage__readout{display:grid;gap:var(--space-5);min-width:0;padding:0 var(--space-1)}
.ui-garage__id{min-width:0}
.ui-garage__class{margin:0;color:var(--garage-accent);font-size:var(--fs-footnote);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:.1em;text-transform:uppercase}
.ui-garage__name{margin:var(--space-2) 0 0;color:var(--text-primary);font-family:var(--font-display);font-size:clamp(2.5rem,1.25rem + 7cqi,3.75rem);font-weight:var(--fw-bold);line-height:.95;letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere}
.ui-garage__make{display:block;margin-bottom:.45em;color:var(--text-body);font-size:max(.28em,.9375rem);font-weight:var(--fw-medium);line-height:1.2;letter-spacing:0}
.ui-garage__model{display:block}
.ui-garage__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.125rem .625rem;margin:var(--space-4) 0 0;color:var(--text-body);font-size:var(--fs-callout);line-height:1.35}
.ui-garage__amount{color:var(--text-primary);font-size:var(--fs-title-2);font-weight:var(--fw-semibold);line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.ui-garage__unit{color:var(--text-body)}
.ui-garage__tax{flex-basis:100%;color:var(--text-secondary);font-size:var(--fs-footnote)}
/* Stat bars: ten segments each (cars seats /10, large suitcases /10, carry-ons /5; scooters engine /250 cc, riders /2). */
.ui-garage__stats{display:grid;align-content:end;gap:var(--space-3);min-width:0;margin:0}
.ui-garage__stat{display:grid;grid-template-columns:minmax(6.5rem,8rem) minmax(0,1fr);align-items:center;gap:var(--space-3);margin:0}
.ui-garage__stat dt{color:var(--text-secondary);font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:.09em;text-transform:uppercase}
.ui-garage__stat dd{display:grid;grid-template-columns:minmax(0,1fr) var(--garage-value-w);align-items:center;gap:var(--space-3);margin:0}
.ui-garage__bar{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;height:.5rem}
.ui-garage__bar>span{border-radius:2px;background:var(--garage-bar-off)}
.ui-garage__bar>.is-on{background:var(--garage-accent);box-shadow:var(--garage-glow)}
.ui-garage__value{color:var(--text-primary);font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.2;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.ui-garage__stat--text{align-items:start}
.ui-garage__stat--text dd{display:block;color:var(--text-body);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}

.ui-garage__dock{display:grid;gap:var(--space-4);align-items:center;margin:0;padding:var(--space-4);border-radius:var(--r-lg);background:var(--garage-raised);box-shadow:inset 0 0 0 1px var(--garage-line)}
.ui-garage__fit{display:grid;gap:var(--space-3);min-width:0}
.ui-garage__fit-line{display:flex;align-items:flex-start;gap:var(--space-3);margin:0;color:var(--text-primary);font-size:var(--fs-callout);font-weight:var(--fw-medium);line-height:var(--lh-callout)}
.ui-garage__fit-line::before{content:"";flex:none;width:.5625rem;height:.5625rem;margin:.42em .125rem 0;border-radius:50%;background:var(--garage-accent);box-shadow:0 0 0 4px var(--garage-accent-tint)}
.ui-garage__fit[data-tone="ok"] .ui-garage__fit-line::before{background:var(--status-success);box-shadow:0 0 0 4px var(--status-success-tint)}
.ui-garage__fit-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-left:calc(.8125rem + var(--space-3))}
.ui-garage__cta{--btn-bg:var(--garage-accent);--btn-bg-hover:var(--garage-accent-hover);--btn-fg:var(--color-on-accent);width:100%;font-weight:var(--fw-semibold)}

.ui-garage__rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(9.25rem,1fr);gap:var(--space-3);margin:0 calc(var(--space-1) * -1);padding:var(--space-1) var(--space-1) var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--space-1);scrollbar-width:none}
.ui-garage__rail::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.ui-garage__rail{scrollbar-width:thin;scrollbar-color:var(--garage-line-strong) transparent}.ui-garage__rail::-webkit-scrollbar{display:initial}}
.ui-garage__thumb{position:relative;display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:.3125rem;min-width:0;margin:0;padding:var(--space-2) var(--space-2) var(--space-3);border:0;border-radius:var(--r-lg);background:var(--garage-raised);box-shadow:inset 0 0 0 1px var(--garage-line);color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ui-garage__thumb-media{display:block;margin-bottom:var(--space-1);aspect-ratio:16 / 10;overflow:hidden;border-radius:var(--r-md);background:var(--garage-stage)}
.ui-garage__thumb-media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(var(--garage-thumb-zoom));transform-origin:var(--garage-thumb-focus);-webkit-user-drag:none}
.ui-garage__thumb-name{padding-inline:var(--space-1);font-size:var(--fs-callout);font-weight:var(--fw-semibold);line-height:1.25;letter-spacing:var(--ls-callout)}
.ui-garage__thumb-meta{padding-inline:var(--space-1);color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption);font-variant-numeric:tabular-nums lining-nums}
.ui-garage__thumb[aria-checked="true"]{background:var(--garage-accent-tint);box-shadow:inset 0 0 0 2px var(--garage-accent)}
.ui-garage__thumb[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
/* Selection is the honey ring inside the card; keyboard focus is a linen ring outside it. */
.ui-garage__thumb:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px}
@media (hover:hover){.ui-garage__thumb:not([aria-checked="true"],[aria-disabled="true"]):hover{background:var(--garage-raised-hover);box-shadow:inset 0 0 0 1px var(--garage-line-strong)}}
.ui-garage__disclaimer{display:flex;align-items:flex-start;gap:.4rem;margin:0;padding-inline:var(--space-1);color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.ui-garage__disclaimer::before{content:"";flex:none;width:.8125rem;height:.8125rem;margin-top:.12em;background:currentColor;-webkit-mask:var(--icon-info) center/contain no-repeat;mask:var(--icon-info) center/contain no-repeat}

@container ui-garage (min-width:40rem){
  .ui-garage__readout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:var(--space-7)}
  .ui-garage__dock--cta{grid-template-columns:minmax(0,1fr) auto;padding-left:var(--space-5)}
  .ui-garage__cta{width:auto}
}
/* Wide: the whole photo (3:2, nothing cropped, nothing written over the vehicle) beside the readout column:
   class, make and model, the price with Add, then the stat bars. The arrows sit at the photo's mid-height, inside it. */
@container ui-garage (min-width:54rem){
  .ui-garage__showroom{grid-template-columns:minmax(0,1.62fr) minmax(18.5rem,1fr);align-items:center;gap:var(--space-7)}
  .ui-garage__stage{aspect-ratio:3 / 2;border-radius:var(--r-xl)}
  .ui-garage__hud{padding:var(--space-4) var(--space-5);font-size:var(--fs-footnote)}
  .ui-garage__nav{width:3.25rem;height:3.25rem}
  .ui-garage__nav::before{width:1.25rem;height:1.25rem}
  .ui-garage__nav--prev{left:var(--space-4)}
  .ui-garage__nav--next{right:var(--space-4)}
  .ui-garage__readout{grid-template-columns:minmax(0,1fr);align-content:center;gap:var(--space-6);padding:0 var(--space-2) 0 0}
  .ui-garage__name{font-size:clamp(2.75rem,.5rem + 3.6cqi,4rem)}
  .ui-garage__stats{width:100%}
  .ui-garage__stat{grid-template-columns:minmax(5.75rem,7rem) minmax(0,1fr)}
}
/* In a sheet: a smaller stage that leaves room for the rail; the sheet footer holds the call to action. The
   stage keeps the full width when its height is capped (a cinematic band, never a narrower box beside a black
   band). On a phone the stage is 16:10 and the name smaller, so the price and Add show in the first screen. */
.ui-garage--sheet{--garage-pad:var(--space-3);border-radius:var(--r-xl)}
.ui-garage--sheet .ui-garage__stage{width:100%;max-height:min(52dvh,26rem)}
@container ui-garage (max-width:39.99rem){
  .ui-garage--sheet .ui-garage__stage{aspect-ratio:16 / 10}
  .ui-garage--sheet .ui-garage__showroom{gap:var(--space-4)}
  .ui-garage--sheet .ui-garage__name{margin-top:var(--space-1);font-size:clamp(2rem,1rem + 6cqi,2.75rem)}
  .ui-garage--sheet .ui-garage__make{margin-bottom:.3em}
  .ui-garage--sheet .ui-garage__price{margin-top:var(--space-3)}
}
/* Fleet mode: Add (or − n +) on the price's row, at the right, so the guest reaches it right under the model. */
.ui-garage--fleet .ui-garage__id{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-4);align-items:end}
.ui-garage--fleet .ui-garage__id>*{grid-column:1 / -1}
.ui-garage--fleet .ui-garage__id>.ui-garage__price{grid-column:1}
.ui-garage--fleet .ui-garage__id>.ui-garage__qty{grid-column:2;flex-direction:column;align-items:flex-end;align-self:end;gap:var(--space-1);margin:0}
.ui-garage--fleet .ui-garage__qty-note{text-align:right}
.ui-sheet--garage{background:var(--garage-bg);color:var(--text-primary)}
.ui-sheet--garage .ui-sheet__footer{border-top-color:var(--garage-line);background:var(--garage-bg)}
.ui-sheet--garage .ui-garage--sheet{--garage-pad:0px;border-radius:0;background:none}
@media (prefers-reduced-motion:no-preference){
  .ui-garage__frame.is-shown,.ui-garage__frame.is-leaving{transition:opacity var(--garage-fade) var(--ease-standard)}
  .ui-garage__sweep.is-sweeping{animation:ui-garage-sweep var(--garage-sweep-time) var(--ease-out) both}
  .ui-garage__id{transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-4) var(--ease-out)}
  .ui-garage__id.is-out{opacity:0;transform:translateY(.625rem);transition-duration:var(--dur-1)}
  .ui-garage__bar>span{transition:background-color var(--dur-3) var(--ease-standard),box-shadow var(--dur-3) var(--ease-standard)}
  .ui-garage__bar>:nth-child(2){transition-delay:25ms}
  .ui-garage__bar>:nth-child(3){transition-delay:50ms}
  .ui-garage__bar>:nth-child(4){transition-delay:75ms}
  .ui-garage__bar>:nth-child(5){transition-delay:100ms}
  .ui-garage__bar>:nth-child(6){transition-delay:125ms}
  .ui-garage__bar>:nth-child(7){transition-delay:150ms}
  .ui-garage__bar>:nth-child(8){transition-delay:175ms}
  .ui-garage__bar>:nth-child(9){transition-delay:200ms}
  .ui-garage__bar>:nth-child(10){transition-delay:225ms}
  .ui-garage__nav{transition:background-color var(--dur-2) var(--ease-standard),border-color var(--dur-2) var(--ease-standard),scale var(--dur-1) var(--ease-standard)}
  .ui-garage__nav:active{scale:.94}
  .ui-garage__thumb{transition:background-color var(--dur-2) var(--ease-standard),box-shadow var(--dur-2) var(--ease-standard),transform var(--dur-1) var(--ease-standard)}
  .ui-garage__thumb:active{transform:scale(.98)}
  .ui-garage__thumb-media img{transition:transform var(--dur-4) var(--ease-out)}
  .ui-garage__rail{scroll-behavior:smooth}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.ui-garage__thumb:hover .ui-garage__thumb-media img{transform:scale(calc(var(--garage-thumb-zoom) * 1.04))}}

/* Garage fleet mode (CONTRACT §14.3.1): a quantity per model. The readout carries "Add", which turns into
   a stepper; rail cards wear a quantity badge; the dock holds the fleet bar (.ui-fleetbar, below). A fleet
   carried over from an earlier day (data-pending on .ui-garage) wears the warm coral of --pending and a
   dashed outline until the guest keeps it or starts empty. */
.ui-garage__qty{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-5) 0 0;text-shadow:none;pointer-events:auto}
.ui-garage__add{--btn-bg:var(--garage-accent);--btn-bg-hover:var(--garage-accent-hover);--btn-fg:var(--color-on-accent);min-width:8.5rem}
.ui-garage__add::before{content:"";flex:none;width:1rem;height:1rem;background:currentColor;-webkit-mask:var(--icon-plus) center/contain no-repeat;mask:var(--icon-plus) center/contain no-repeat}
.ui-garage .ui-stepper{background:var(--garage-stage);box-shadow:inset 0 0 0 1px var(--garage-line-strong)}
.ui-garage .ui-garage__qty-value{min-width:3.25rem;font-size:var(--fs-title-3)}
.ui-garage__qty-note{margin:0;color:var(--text-secondary);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
.ui-garage__readout>.ui-garage__qty{grid-column:1 / -1;margin:0;padding-top:var(--space-4);border-top:1px solid var(--separator)}
@media (max-width:733.98px){.ui-garage .ui-garage__stage{max-height:13.125rem}.ui-garage__readout{gap:var(--space-4)}}
.ui-garage__thumb-qty{position:absolute;z-index:1;top:calc(var(--space-2) + .375rem);right:calc(var(--space-2) + .375rem);display:inline-grid;place-items:center;min-width:1.875rem;height:1.5rem;padding:0 .4375rem;border-radius:var(--r-badge);background:var(--garage-accent);color:var(--color-on-accent);font-size:var(--fs-footnote);font-weight:var(--fw-bold);line-height:1;font-variant-numeric:tabular-nums lining-nums;box-shadow:0 0 0 2px var(--garage-bg)}
.ui-garage__dock--fleet{padding:0;background:none;box-shadow:none}
.ui-garage[data-pending] .ui-garage__thumb-qty{background:var(--pending);color:var(--c-charcoal)}
.ui-garage[data-pending] .ui-garage__thumb[data-qty]{outline:1.5px dashed var(--pending-line);outline-offset:-1.5px}
.ui-garage[data-pending] .ui-garage__thumb[data-qty]:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px}
.ui-garage[data-pending] .ui-garage__stepper{outline:1.5px dashed var(--pending-line);outline-offset:2px}

/* ---------- Planner pieces (CONTRACT §14.3): date strip, sessions, fleet bar ----------
   Rendered by the planner and garage scripts (BMGPlanner, BMGGarage; DESIGN.md §5.3). Tokens only, so the same
   markup reads in a light sheet and inside the dark garage. */

/* Date strip: the stay's days in one row that scrolls on phones. role="radiogroup" of role="radio" days (one
   day at a time) or role="group" of toggle buttons with aria-pressed (several days). States: empty, has a
   selection (__count badge), active (aria-checked / aria-pressed), pending (data-state="pending": carried
   over, waiting for a tap), unavailable (aria-disabled). Markers: data-marker="arrival" | "departure". */
/* inline-size containment: the strip never widens the column it sits in (it scrolls instead). */
.ui-datestrip{--rail-pad:max(var(--ui-rail-bleed,0px),.375rem);display:flex;gap:var(--space-2);min-width:0;contain:inline-size;margin:0 calc(var(--rail-pad) * -1);padding:.625rem var(--rail-pad) var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--rail-pad);scrollbar-width:none}
.ui-datestrip::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.ui-datestrip{scrollbar-width:thin;scrollbar-color:var(--fill-primary) transparent}.ui-datestrip::-webkit-scrollbar{display:initial}}
.ui-datestrip__day{position:relative;display:grid;grid-template-rows:auto auto 1fr;justify-items:center;align-content:start;gap:2px;flex:1 0 3.25rem;max-width:5.5rem;min-height:4.875rem;margin:0;padding:.5rem .25rem .4375rem;border:1.5px solid transparent;border-radius:var(--r-control);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--separator-strong);color:var(--text-primary);font-family:var(--font-text);text-align:center;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ui-datestrip__weekday{color:var(--text-secondary);font-size:.6875rem;font-weight:var(--fw-semibold);line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.ui-datestrip__num{font-size:var(--fs-title-3);font-weight:var(--fw-semibold);line-height:1.15;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.ui-datestrip__meta{align-self:end;min-height:1em;color:var(--accent-text);font-size:.6875rem;font-weight:var(--fw-semibold);line-height:1.1;white-space:nowrap}
.ui-datestrip__count{position:absolute;z-index:1;top:-.5rem;right:-.375rem;display:inline-grid;place-items:center;min-width:1.375rem;height:1.375rem;padding:0 .3125rem;border-radius:var(--r-badge);background:var(--color-ink);color:var(--color-on-ink);font-size:.6875rem;font-weight:var(--fw-bold);line-height:1;font-variant-numeric:tabular-nums lining-nums;box-shadow:0 0 0 2px var(--color-canvas)}
.ui-datestrip__day:is([aria-checked="true"],[aria-pressed="true"]){background:var(--color-ink);box-shadow:none;color:var(--color-on-ink)}
.ui-datestrip__day:is([aria-checked="true"],[aria-pressed="true"]) :is(.ui-datestrip__weekday,.ui-datestrip__meta){color:inherit;opacity:.82}
.ui-datestrip__day:is([aria-checked="true"],[aria-pressed="true"]) .ui-datestrip__count{background:var(--color-accent);color:var(--color-on-accent)}
.ui-datestrip__day[data-state="pending"]{border-style:dashed;border-color:var(--pending-line);background:var(--pending-tint);box-shadow:none}
.ui-datestrip__day[data-state="pending"]:not([aria-checked="true"],[aria-pressed="true"]) .ui-datestrip__meta{color:var(--pending-text)}
.ui-datestrip__day[data-state="pending"]:is([aria-checked="true"],[aria-pressed="true"]){background:var(--color-ink)}
.ui-datestrip__day[data-state="pending"] .ui-datestrip__count{background:var(--pending);color:var(--c-charcoal)}
.ui-datestrip__day[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.ui-datestrip__day:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (hover:hover){.ui-datestrip__day:not([aria-checked="true"],[aria-pressed="true"],[aria-disabled="true"],[data-state="pending"]):hover{box-shadow:inset 0 0 0 1px var(--text-secondary)}}
.ui-garage .ui-datestrip__day{background:var(--garage-raised);box-shadow:inset 0 0 0 1px var(--garage-line)}
.ui-garage .ui-datestrip__count{box-shadow:0 0 0 2px var(--garage-bg)}

/* Sessions (wellness): a list of cards, each one session the caller fills (treatment, people, day, time),
   then "Add another session". .ui-sessions > ol.ui-sessions__list > li.ui-session > __head (__title, __summary,
   __remove) + __body; .ui-sessions__add; a polite status line. */
.ui-sessions{display:grid;gap:var(--space-4);min-width:0}
.ui-sessions__list{display:grid;gap:var(--space-4);margin:0;padding:0;list-style:none;counter-reset:ui-session}
.ui-session{--ui-rail-bleed:calc(var(--space-4) - 1px);display:grid;gap:var(--space-4);min-width:0;margin:0;padding:var(--space-4) var(--space-4) var(--space-5);border-radius:var(--r-lg);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--separator-strong)}
.ui-session__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px var(--space-3);min-height:var(--tap-min)}
.ui-session__title{margin:0;color:var(--text-primary);font-family:var(--font-text);font-size:var(--fs-callout);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:var(--ls-callout);border-radius:var(--r-xs)}
.ui-session__title:focus{outline:none}
.ui-session__title:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.ui-session__summary{grid-column:1;margin:0;color:var(--text-secondary);font-size:var(--fs-footnote);line-height:var(--lh-footnote);font-variant-numeric:tabular-nums lining-nums}
.ui-session__remove{--icon:var(--icon-x);grid-column:2;grid-row:1 / span 2}
.ui-session__body{display:grid;gap:var(--space-4);min-width:0}
.ui-sessions__add{justify-self:start}
.ui-sessions__add::before{content:"";flex:none;width:1rem;height:1rem;background:currentColor;-webkit-mask:var(--icon-plus) center/contain no-repeat;mask:var(--icon-plus) center/contain no-repeat}
@media (max-width:733.98px){.ui-sheet .ui-sessions__add{justify-self:stretch}}

/* Fleet bar: what the active day (or leg) holds, how many it seats against the party, and its subtotal.
   data-tone="ok" | "short" | "info" colours the fit dot; data-empty when nothing is chosen; data-pending for a
   carried-over fleet, with the caller's actions in __actions (Keep for Tue 10 · Start empty). */
.ui-fleetbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);min-width:0;margin:0;padding:var(--space-4) var(--space-5);border:1.5px solid transparent;border-radius:var(--r-lg);background:var(--fill-tertiary);color:var(--text-primary)}
.ui-fleetbar__main{display:grid;flex:1 1 15rem;gap:2px;min-width:0}
.ui-fleetbar__title{margin:0 0 2px;color:var(--text-secondary);font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.ui-fleetbar__summary{margin:0;color:var(--text-primary);font-size:var(--fs-callout);font-weight:var(--fw-semibold);line-height:1.35;text-wrap:pretty;font-variant-numeric:tabular-nums lining-nums}
.ui-fleetbar__item{white-space:nowrap}
.ui-fleetbar__fit{display:flex;align-items:flex-start;gap:.5rem;margin:0;color:var(--text-body);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
.ui-fleetbar__fit::before{content:"";flex:none;width:.5rem;height:.5rem;margin-top:.36em;border-radius:50%;background:var(--text-secondary)}
.ui-fleetbar[data-tone="ok"] .ui-fleetbar__fit::before{background:var(--status-success)}
.ui-fleetbar[data-tone="short"] .ui-fleetbar__fit::before{background:var(--status-warning)}
.ui-fleetbar__total{display:grid;justify-items:end;gap:1px;margin:0 0 0 auto;text-align:right;font-variant-numeric:tabular-nums lining-nums}
.ui-fleetbar__amount{color:var(--text-primary);font-size:var(--fs-title-3);font-weight:var(--fw-semibold);line-height:1.2;letter-spacing:-.012em;white-space:nowrap}
.ui-fleetbar__note{color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.ui-fleetbar__actions{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}
.ui-fleetbar[data-empty] .ui-fleetbar__summary{color:var(--text-secondary);font-weight:var(--fw-regular)}
.ui-fleetbar[data-pending]{border-style:dashed;border-color:var(--pending-line);background:var(--pending-tint)}
.ui-fleetbar[data-pending] .ui-fleetbar__title{color:var(--pending-text)}
.ui-fleetbar[data-pending] .ui-fleetbar__fit::before{background:var(--pending)}
.ui-fleetbar [hidden],.ui-datestrip [hidden],.ui-sessions [hidden]{display:none}
@media (max-width:479.98px){.ui-fleetbar__actions>.ui-button{flex:1 1 auto}}

/* Above the pay button wherever money is taken (D17): <p class="ui-pay-note">Paid now. Our team confirms the
   details with you the day before.</p>. Under a generated photo (D22): <figcaption class="ui-media-note">. */
.ui-pay-note,.ui-media-note{display:flex;align-items:flex-start;gap:.5rem;margin:0;color:var(--text-secondary);font-size:var(--fs-footnote);line-height:var(--lh-footnote)}
.ui-pay-note::before,.ui-media-note::before{content:"";flex:none;width:1rem;height:1rem;margin-top:.1em;background:currentColor;-webkit-mask:var(--icon-calendar) center/contain no-repeat;mask:var(--icon-calendar) center/contain no-repeat}
.ui-media-note{font-size:var(--fs-caption);line-height:var(--lh-caption)}
.ui-media-note::before{width:.8125rem;height:.8125rem;-webkit-mask-image:var(--icon-info);mask-image:var(--icon-info)}

@media (prefers-reduced-motion:no-preference){
  .ui-datestrip{scroll-behavior:smooth}
  .ui-datestrip__day{transition:background-color var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard),box-shadow var(--dur-2) var(--ease-standard),border-color var(--dur-2) var(--ease-standard),transform var(--dur-1) var(--ease-standard)}
  .ui-datestrip__day:active{transform:scale(.97)}
  .ui-stepper button{transition:background-color var(--dur-1) var(--ease-standard)}
  .ui-fleetbar{transition:background-color var(--dur-3) var(--ease-standard),border-color var(--dur-3) var(--ease-standard)}
  .ui-session{animation:ui-rise-in var(--dur-3) var(--ease-out) both}
}

/* ---------- Reveal on scroll (the chrome script adds .is-revealed; never on LCP content) ----------
   The js class is set on <html> inline before the first paint; if the chrome script never runs (html lacks
   .ui-reveal-ready), the failsafe animation shows the content after 2.5 s. */
.js .ui-reveal:not(.is-revealed){opacity:0;transform:translate3d(0,24px,0)}
.js:not(.ui-reveal-ready) .ui-reveal:not(.is-revealed){animation:ui-reveal-failsafe 1ms linear 2.5s forwards}
.js .ui-reveal{transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:calc(var(--reveal-i,0) * var(--stagger))}
.ui-reveal-group>:nth-child(2){--reveal-i:1}
.ui-reveal-group>:nth-child(3){--reveal-i:2}
.ui-reveal-group>:nth-child(4){--reveal-i:3}
.ui-reveal-group>:nth-child(5){--reveal-i:4}
.ui-reveal-group>:nth-child(n+6){--reveal-i:5}

/* ---------- Keyframes ---------- */
@keyframes ui-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ui-rise-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@keyframes ui-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ui-shimmer{to{background-position:-200% 0}}
@keyframes ui-toast-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ui-toast-out{to{opacity:0;transform:translateY(8px)}}
@keyframes ui-reveal-failsafe{to{opacity:1;transform:none}}
@keyframes ui-garage-sweep{0%{opacity:0;transform:translateX(-40%)}18%{opacity:1}100%{opacity:0;transform:translateX(40%)}}

/* ---------- Preferences ---------- */
.theme-dark:not(html,body),.ui-tile--dark,.ui-tile--media,.ui-hero--immersive{color:var(--text-primary)}
.theme-dark:not(html,body){background-color:var(--color-canvas)}
@media (prefers-reduced-motion:reduce){
  .js .ui-reveal,.js .ui-reveal:not(.is-revealed){opacity:1;transform:none;transition:none;animation:none}
  .ui-skeleton{animation:none}
  .ui-header *,.ui-header *::before,.ui-header *::after,.ui-sheet,.ui-sheet::backdrop,.ui-button,.ui-link::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media (forced-colors:active){
  .ui-header::before,.ui-summary-bar::before{background:Canvas}
  .ui-button,.ui-chip,.ui-choice,.ui-segmented [aria-pressed="true"],.ui-segmented [aria-selected="true"],.ui-segmented input:checked+label,.ui-header .ui-header__cta,.ui-header .ui-menu__cta{border:1px solid CanvasText}
  .ui-link::after,.ui-chip::before,.ui-toast::before,.ui-stepper button::after,.ui-header .ui-header__owner::after{background:CanvasText}
  /* Model picker, gallery, recommendations: rings and fills become borders and system colours. */
  .ui-model-card,.ui-rec,.ui-specs>li,.ui-model-picker__fit,.ui-rec__add,.ui-rec__go{border:1px solid CanvasText}
  .ui-model-card:is([aria-checked="true"],:has(input:checked)){border:3px solid Highlight}
  .ui-model-card::after{background:Highlight;box-shadow:none}
  .ui-model-card::before{background:HighlightText}
  .ui-specs>li::before,.ui-model-picker__highlights>li::before,.ui-model-picker__fit::before,.ui-model-card__note::before,.ui-menu-picker__allergens::before,.ui-rec__add::before,.ui-rec__go::before,.ui-model-picker__disclaimer::before{background:CanvasText}
  .ui-gallery__dots>*{background:GrayText}
  .ui-gallery__dots>.is-active{background:CanvasText}
  .ui-model-card:focus-visible{outline:3px solid CanvasText}
  @supports selector(:has(*)){.ui-rec:has(.ui-rec__open:focus-visible){outline:3px solid CanvasText}}
  /* Garage: the photos stay; scrims, glass, glow and fills give way to borders and system colours. */
  .ui-garage,.ui-garage__dock,.ui-garage__thumb,.ui-garage__nav{border:1px solid CanvasText}
  .ui-garage__thumb[aria-checked="true"]{border:3px solid Highlight}
  .ui-garage__vignette,.ui-garage__sweep{display:none}
  .ui-garage__bar>span{forced-color-adjust:none;background:GrayText;box-shadow:none}
  .ui-garage__bar>.is-on{background:Highlight}
  .ui-garage__nav::before,.ui-garage__fit-line::before,.ui-garage__disclaimer::before{forced-color-adjust:none;background:CanvasText;box-shadow:none}
  .ui-garage__stage:focus-visible,.ui-garage__thumb:focus-visible,.ui-garage__nav:focus-visible{outline:3px solid CanvasText}
  /* Planner pieces and fleet mode: states become borders, dashes and system colours. */
  .ui-stepper,.ui-datestrip__day,.ui-session,.ui-fleetbar{border:1px solid CanvasText}
  .ui-datestrip__day:is([aria-checked="true"],[aria-pressed="true"]){forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .ui-datestrip__day[data-state="pending"],.ui-fleetbar[data-pending]{border:2px dashed CanvasText}
  .ui-datestrip__count,.ui-garage__thumb-qty,.ui-badge{forced-color-adjust:none;background:CanvasText;color:Canvas;box-shadow:none}
  .ui-garage__add::before,.ui-sessions__add::before,.ui-fleetbar__fit::before,.ui-pay-note::before,.ui-media-note::before{forced-color-adjust:none;background:CanvasText}
  .ui-stepper button:is(:disabled,[aria-disabled="true"]){color:GrayText}
}
@media print{
  .ui-skip,.ui-header,.ui-footer,.ui-summary-bar,.ui-toast-region{display:none!important}
}