/* Website (Code)/public/assets/css/v2.css
   v1.5  ·  2026-11-01 MYT

   The v2 design system: every "-v2" page as an apple.com product page. Each v2 page loads this file plus its own
   small page file (chauffeur-v2.css, home-v2.css …). Loads nothing else, so the Wix-measured pages never change
   because of it. Markup: see public/chauffeur-v2/index.html, the reference page.

   The numbers come from apple.com, read live on 2026-10-22 (iPhone 18 Pro, MacBook Air, Apple Card) and
   reports/Apple design language for Grandpride.md. Grandpride's own: the neutral #1d1d1f pill as the one primary action
   (Apple Card's "Apply now" is the same black pill), and gold only as --gold-ink text or a fill under ink. */

@font-face { font-family: 'GP Display'; font-weight: 400; font-display: swap;
    src: url('../fonts/sf-display-regular.woff2') format('woff2'), url('../fonts/sf-display-regular.woff') format('woff'); }
@font-face { font-family: 'GP Display'; font-weight: 600; font-display: swap;
    src: url('../fonts/sf-display-semibold.woff2') format('woff2'), url('../fonts/sf-display-semibold.woff') format('woff'); }

/* ─── TOKENS ──────────────────────────────────────────────────────────────── */

:root {
    --font: -apple-system, BlinkMacSystemFont, 'GP Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --ink:      #1d1d1f;
    --ink-2:    #6e6e73;     /* secondary text on light, 4.66:1 on #f5f5f7 */
    --ink-3:    #86868b;     /* tertiary on light; secondary on dark */
    --bg:       #ffffff;
    --bg-alt:   #f5f5f7;
    --bg-dark:  #000000;
    --surface-dark: #1d1d1f;
    --hair:     #d2d2d7;
    --hair-dark:#424245;
    --platter:  #e8e8ed;
    --link:     #0066cc;
    --link-dark:#2997ff;
    --focus:    #0071e3;
    --white:    #ffffff;     /* stays white on any section */
    --black:    #000000;
    --bg-soft:  #fafafc;     /* the sticky bars */
    --ink-disabled: #b8b8bd; /* a day that cannot be chosen */
    --error:    #e30000;     /* 4.9:1 on white */
    --error-bg: #fff2f4;
    --success:  #008009;
    --deal:     #b64400;     /* deal and badge text */
    --blue-hover: #0077ed;
    --dark-hover: #333336;
    --text-on-disabled: #424245;
    --on-dark:    #f5f5f7;   /* text on a dark section */
    --on-dark-2:  #d2d2d7;
    --on-dark-3:  #e8e8ed;
    --control:    #d2d2d7;   /* a control's fill where blur is off */
    --btn-hover:  #272729;
    --btn-active: #18181a;
    --disc-hover: #dcdce1;
    --gold:     #d4b275;     /* fill only */
    --gold-ink: #966c22;     /* gold as text on light, 4.7:1 */

    --w:    min(1260px, 87.5vw);   /* fluid, capped container */
    --w-text: 980px;               /* text blocks */
    --pad:  160px;                 /* section rhythm */
    --gap:  20px;

    --ease-standard: cubic-bezier(0.4, 0, 0.6, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-hover:    cubic-bezier(0, 0, 0.5, 1);
    --ease-reveal:   cubic-bezier(0.455, 0.03, 0.515, 0.955);

    --gn-h: 44px;
    --ln-h: 52px;
}

@media (max-width: 1068px) { :root { --w-text: 692px; --pad: 128px; } }
@media (max-width: 734px)  { :root { --w-text: 87.5vw; --pad: 96px; } }

/* ─── BASE ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 106.25%;                       /* 17px, as apple.com */
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--ln-h);          /* nothing focused hides under the sticky bar */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.4705882353;
    font-weight: 400;
    letter-spacing: -0.022em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 600; }

h1, h2, h3, .hero__title, .headline, .headline-super { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    padding: 9px 16px; border-radius: 980px;
    background: var(--ink); color: var(--white); font-size: 14px;
}
.skip:focus { top: 8px; }

.wrap { width: var(--w); margin-inline: auto; }
.wrap--text { width: var(--w-text); }

sup.fn { font-size: .6em; line-height: 0; vertical-align: super; position: relative; top: .05em; margin-left: .1em; font-weight: 400; letter-spacing: 0; }
sup.fn a { color: inherit; }
sup.fn a:hover { text-decoration: underline; }

.link { color: var(--link); }
.link:hover { text-decoration: underline; }

/* ─── BUTTONS ──────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    border-radius: 980px;
    border: 1px solid transparent;
    background: var(--ink);
    color: var(--white);
    font-size: 17px; line-height: 1.17648; font-weight: 400; letter-spacing: -0.022em;
    white-space: nowrap;
    cursor: pointer;
}
.btn:hover  { background: var(--btn-hover); }
.btn:active { background: var(--btn-active); }
.btn--elevated { padding: 12px 22px; }

/* The local-nav pill: 12px, 4×11px, 28px tall, with a 44px hit area around it. */
.btn--reduced {
    position: relative;
    min-height: 0;
    padding: 4px 11px;
    font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em;
}
.btn--reduced::after { content: ''; position: absolute; inset: -8px -4px; }

/* Text link with a chevron: no underline at rest, on hover the words only. */
.more {
    display: inline-flex; align-items: center; gap: .3em;
    color: var(--link);
    font-size: 17px; line-height: 1.23536;
}
.more:hover { text-decoration: underline; text-underline-offset: .15em; }
.more__chev { width: .45em; height: .8em; flex: none; margin-top: .08em; }
.more__icon { width: 1.05em; height: 1.05em; flex: none; }

/* ─── TYPE ────────────────────────────────────────────────────────────────── */

/* Type: 17px body / −0.022em; headlines 600; every size steps down at 1068px and 734px. */
.eyebrow {
    color: var(--ink-2);
    font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em;
    margin-bottom: 14px;
}
.eyebrow--section { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; margin-bottom: 8px; }

.headline-super {
    font-size: 80px; line-height: 1.05; font-weight: 600; letter-spacing: -0.015em;
}
.headline {
    font-size: 64px; line-height: 1.0625; font-weight: 600; letter-spacing: -0.009em;
}
.sec-head__title {
    font-size: 48px; line-height: 1.08349; font-weight: 600; letter-spacing: -0.003em;
}

@media (max-width: 1068px) {
    .headline-super { font-size: 64px; line-height: 1.0625; letter-spacing: -0.009em; }
    .headline       { font-size: 48px; line-height: 1.08349; letter-spacing: -0.003em; }
    .sec-head__title{ font-size: 40px; line-height: 1.1; letter-spacing: 0; }
    .eyebrow--section { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
}
@media (max-width: 734px) {
    .headline-super { font-size: 48px; line-height: 1.08349; letter-spacing: -0.003em; }
    .headline       { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
    .sec-head__title{ font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
    .eyebrow, .eyebrow--section { font-size: 19px; line-height: 1.21053; letter-spacing: .012em; }
}

/* ─── SECTIONS ────────────────────────────────────────────────────────────── */

/* Layout: 87.5% wide, capped at 1260px; text blocks 980 → 692 → 87.5%; sections 160 → 128 → 96. */
.sec { padding-block: var(--pad); overflow: clip; }
.sec--alt  { background: var(--bg-alt); }
.sec--dark { background: var(--bg-dark); color: var(--on-dark); }
.sec--dark .eyebrow { color: var(--ink-3); }

.sec-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    margin-bottom: 48px;
}
.sec-head__title { max-width: 760px; }
.sec-head .more { flex: none; padding-bottom: 6px; }
@media (max-width: 734px) {
    .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
}

/* ─── GLOBAL NAV ──────────────────────────────────────────────────────────── */

.gn {
    position: relative; z-index: 40;
    height: var(--gn-h);
    background: rgba(250, 250, 252, .92);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .gn {
        background: rgba(250, 250, 252, .8);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
}
.gn__bar {
    display: flex; align-items: center; gap: 8px;
    max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 22px;
}
.gn__logo { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; flex: none; }
.gn__logo img { width: 21px; height: auto; opacity: .88; }
.gn__list { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; }
.gn__link {
    display: block; padding: 0 8px; line-height: var(--gn-h);
    font-size: 12px; letter-spacing: -0.01em;
    color: rgba(0, 0, 0, .8);
    transition: color .32s var(--ease-standard);
}
a.gn__link:hover, .gn__link[aria-current="page"] { color: var(--black); }
.gn__link--soon { color: rgba(0, 0, 0, .48); cursor: default; }
.gn__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; color: rgba(0, 0, 0, .8); flex: none; }
.gn__icon svg { width: 15px; height: 15px; }
.gn__icon:hover { color: var(--black); }
.gn__burger { display: none; }

@media (max-width: 833px) {
    :root { --gn-h: 48px; }
    .gn__bar { padding: 0 16px; }
    .gn__logo { margin-left: -10px; }
    .gn__list {
        position: fixed; inset: var(--gn-h) 0 0 0;
        flex-direction: column; justify-content: flex-start; align-items: stretch;
        padding: 20px 48px;
        background: var(--bg-soft);
        visibility: hidden; opacity: 0;
        transition: opacity .32s var(--ease-standard), visibility 0s linear .32s;
        overflow-y: auto;
    }
    .gn.is-open .gn__list { visibility: visible; opacity: 1; transition: opacity .32s var(--ease-standard); }
    /* A backdrop-filter makes the bar the containing block of the fixed menu, so drop it while open. */
    .gn.is-open { background: var(--bg-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .gn__list li { opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
    .gn.is-open .gn__list li { opacity: 1; transform: none; }
    .gn.is-open .gn__list li:nth-child(2) { transition-delay: .02s; }
    .gn.is-open .gn__list li:nth-child(3) { transition-delay: .04s; }
    .gn.is-open .gn__list li:nth-child(4) { transition-delay: .06s; }
    .gn.is-open .gn__list li:nth-child(5) { transition-delay: .08s; }
    .gn.is-open .gn__list li:nth-child(6) { transition-delay: .10s; }
    .gn.is-open .gn__list li:nth-child(7) { transition-delay: .12s; }
    .gn.is-open .gn__list li:nth-child(8) { transition-delay: .14s; }
    .gn__link { padding: 0; font-size: 28px; line-height: 1.5; font-weight: 600; letter-spacing: .007em; color: var(--ink); }
    .gn__link--soon { color: var(--ink-3); }
    .gn__icon { margin-left: auto; margin-right: 0; }
    .gn__burger {
        display: grid; place-content: center; gap: 6px;
        width: 44px; height: 44px; margin-right: -12px;
    }
    .gn__burger span {
        display: block; width: 17px; height: 1.2px; border-radius: 1px; background: var(--ink);
        transition: transform .24s var(--ease-standard);
    }
    .gn.is-open .gn__burger span:first-child { transform: translateY(3.6px) rotate(45deg); }
    .gn.is-open .gn__burger span:last-child  { transform: translateY(-3.6px) rotate(-45deg); }
    body.is-locked { overflow: hidden; }
}

/* ─── GLOBAL NAV FLYOUTS ──────────────────────────────────────────────────── */

/* apple.com globalnav-submenu, read live 2026-10-23 (v2-nav.js). Desktop only. The panel drops from the bar over
   .24s and folds up .12s after its rows go. Rows rise 4px and fade in 20ms apart, each column 80ms after the last.
   A frosted grey curtain covers the page. Switching product slides the height and cross-fades the words. */

.gn__trigger { position: relative; display: block; }
.gn__chev, .gn__sub, .gn-curtain { display: none; }

@media (min-width: 834px) {
    .gn.is-flyout-open { background: var(--bg-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }

    /* Keyboard only: invisible to the mouse, shown when focused (apple.com's submenu trigger). */
    .gn__chev {
        display: grid; place-items: center;
        position: absolute; top: 0; right: -14px; width: 22px; height: 100%;
        color: rgba(0, 0, 0, .8);
        pointer-events: none;
    }
    .gn__chev svg {
        width: 8px; height: 5px; margin-top: 2px;
        fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
        opacity: 0; transition: opacity .24s var(--ease-standard);
    }
    .gn__chev:focus-visible { outline-offset: -7px; }
    .gn__chev:focus-visible svg { opacity: 1; }
    .is-open > .gn__trigger .gn__chev svg { transform: scaleY(-1); }

    .gn__sub {
        display: block;
        position: absolute; left: 0; right: 0; top: var(--gn-h);
        height: 0; max-height: calc(100vh - var(--gn-h)); overflow: hidden;
        visibility: hidden;
        background: var(--bg-soft);
        text-align: left;
        transition: height .24s var(--ease-standard) .12s, visibility 0s linear .36s;
    }
    .gn__item--flyout.is-open > .gn__sub {
        z-index: 1; height: var(--h); visibility: visible;
        transition: height .24s var(--ease-standard), visibility 0s;
    }
    /* Switching: the panel left behind goes at once, since the new one is already sliding to its height. */
    .gn.is-switching .gn__item--flyout:not(.is-open) > .gn__sub { height: 0; visibility: hidden; transition: none; }

    .gn__sub-content {
        display: flex;
        max-width: 1024px; margin: 0 auto; padding: 40px 22px 84px;
    }
    .gn__group { --gd: calc(var(--g) * 80ms); max-width: 25%; padding-right: 44px; margin-bottom: -4px; }
    .gn__group--elevated { max-width: 50%; padding-right: 88px; }
    .gn__sub-head { font-size: 12px; line-height: 1.33337; font-weight: 400; letter-spacing: -.01em; color: var(--ink-2); }
    .gn__sub-item { margin-inline: -11px; font-size: 12px; line-height: 1.33337; font-weight: 600; letter-spacing: -.01em; }
    .gn__sub-item:first-child { margin-top: 10px; }
    .gn__sub-item--elevated { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; }
    .gn__sub-item--elevated:first-child { margin-top: 6px; }
    .gn__sub-item--elevated + .gn__sub-item:not(.gn__sub-item--elevated), .gn__sub-item.is-gap { margin-top: 14px; }
    .gn__sub-link {
        display: inline-block; padding: 7px 11px; margin-bottom: -6px;
        color: var(--dark-hover);
        transition: color .32s var(--ease-standard);
    }
    .gn__sub-item--elevated .gn__sub-link { padding-top: 9px; }
    .gn__sub-link:hover { color: var(--black); }
    .gn__sub-link:focus-visible { outline-offset: -7px; }

    .gn__sub-head, .gn__sub-item {
        opacity: 0; transform: translateY(-4px);
        transition: opacity .2s var(--ease-standard), transform .2s var(--ease-standard);
    }
    .gn__item--flyout.is-open .gn__sub-item {
        opacity: 1; transform: none;
        transition-duration: .32s; transition-delay: calc(var(--gd) + var(--n) * 20ms);
    }
    .gn__item--flyout.is-open .gn__sub-head {
        opacity: 1; transform: none;
        transition-duration: .32s; transition-delay: calc(var(--gd) + 80ms);
    }
    .gn.is-switching .is-open .gn__sub-head, .gn.is-switching .is-open .gn__sub-item { transition: none; }
    .gn.is-switching .is-open .gn__sub-content { animation: gn-fade .12s var(--ease-standard) both; }

    .gn-curtain {
        display: block;
        position: fixed; inset: 0; z-index: 39;          /* over the sticky local nav (30), under the bar (40) */
        background: rgba(232, 232, 237, .4);
        -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
        opacity: 0; visibility: hidden;
        transition: opacity .32s var(--ease-standard) 80ms, visibility .32s step-end 80ms;
    }
    .gn.is-flyout-open + .gn-curtain {
        opacity: 1; visibility: visible;
        transition: opacity .32s var(--ease-standard) 80ms, visibility .32s step-start 80ms;
    }
}
@keyframes gn-fade { from { opacity: 0; } }
@media (min-width: 834px) and (prefers-reduced-motion: reduce) {
    .gn__sub, .gn__sub-head, .gn__sub-item, .gn-curtain { transition-duration: .01ms !important; transition-delay: 0s !important; }
    .gn__sub-head, .gn__sub-item { transform: none; }
}

/* ─── LOCAL NAV ───────────────────────────────────────────────────────────── */

/* 52px sticky, frosted rgba(250,250,252,.8) saturate(180%) blur(20px), keyline. */

.ln {
    position: sticky; top: 0; z-index: 30;
    height: var(--ln-h);
    background: rgba(255, 255, 255, .92);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .16);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ln {
        background: rgba(250, 250, 252, .8);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
}
.ln__bar {
    display: flex; align-items: center;
    width: var(--w); max-width: 980px; height: 100%; margin: 0 auto;
}
.ln__title {
    margin-right: auto;
    font-size: 21px; line-height: 1.14286; font-weight: 600; letter-spacing: .011em;
}
.ln__menu { display: flex; align-items: center; }
.ln__tabs { display: flex; align-items: center; margin-right: 12px; }
.ln__tab {
    position: relative; display: block;
    margin-left: 24px; padding: 16px 0;
    font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em;
    color: var(--ink); opacity: .8;
    transition: opacity .24s var(--ease-standard);
}
.ln__tab:hover { opacity: 1; }
.ln__tab[aria-current="true"] { opacity: 1; cursor: default; }
.ln__tab[aria-current="true"]::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink);
}
.ln__toggle { display: none; }
.ln__cta { margin-left: 12px; }

/* Over a dark section the bar goes dark too (theme-dark on apple.com's local nav). */
.ln { transition: background-color .32s var(--ease-standard), color .32s var(--ease-standard), box-shadow .32s var(--ease-standard); }
.ln.is-dark { background: rgba(22, 22, 23, .8); color: var(--on-dark); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16); }
.ln.is-dark .ln__tab { color: var(--on-dark); }
.ln.is-dark .ln__tab[aria-current="true"]::after { background: var(--bg-alt); }
.ln.is-dark .ln__toggle { color: var(--on-dark); }
.ln.is-dark .ln__cta { background: var(--bg-alt); color: var(--ink); }
.ln.is-dark .ln__cta:hover { background: var(--white); }

/* Tucked away over a full-screen hero (apple.com/apple-vision-pro): out of the flow and slid up under the global nav,
   so the hero gets the whole screen. It slides in once the element named by data-hide-until reaches the top (v2.js).
   Pages without the attribute keep the bar in place. */
.ln[data-hide-until] {
    margin-bottom: calc(-1 * var(--ln-h));
    transition: background-color .32s var(--ease-standard), color .32s var(--ease-standard), box-shadow .32s var(--ease-standard),
                transform .45s var(--ease-out), opacity .45s var(--ease-out), visibility 0s;
}
.ln.is-tucked {
    transform: translateY(-100%); opacity: 0; visibility: hidden;
    transition: transform .3s var(--ease-standard), opacity .3s var(--ease-standard), visibility 0s linear .3s;
}

@media (max-width: 833px) {
    :root { --ln-h: 48px; }
    .ln__title { font-size: 19px; line-height: 1.21053; letter-spacing: .012em; }
    .ln__toggle {
        display: grid; place-items: center; width: 44px; height: 44px; margin-right: 4px;
        color: var(--ink);
    }
    .ln__toggle svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
        transition: transform .32s var(--ease-standard); }
    .ln.is-open .ln__toggle svg { transform: rotate(180deg); }
    .ln__menu {
        position: absolute; top: var(--ln-h); left: 0; right: 0;
        display: block;
        background: rgba(250, 250, 252, .97);
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .16);
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        transition: clip-path .32s var(--ease-standard), visibility 0s linear .32s;
    }
    .ln.is-open .ln__menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .32s var(--ease-standard); }
    .ln__tabs { display: block; width: var(--w); margin: 0 auto; padding: 4px 0 16px; }
    .ln__tab { margin: 0; padding: 12px 0; font-size: 14px; line-height: 1.42859; border-bottom: 1px solid var(--hair); }
    .ln__tabs li:last-child .ln__tab { border-bottom: 0; }
    .ln__tab[aria-current="true"]::after { display: none; }
    .ln__tab[aria-current="true"] { color: var(--ink-2); }
    .ln__cta { margin-left: 0; }
    .ln.is-dark .ln__menu { background: rgba(22, 22, 23, .97); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16); }
    .ln.is-dark .ln__tab { border-color: var(--hair-dark); }
    .ln.is-dark .ln__tab[aria-current="true"] { color: var(--ink-3); }
}

/* ─── 1 · HERO ────────────────────────────────────────────────────────────── */

.hero { padding-bottom: 72px; }
.hero__media {
    position: relative;
    height: min(calc(100svh - var(--gn-h) - var(--ln-h) - 260px), 760px);
    min-height: 420px;
    overflow: hidden;
    background: var(--bg-alt);
}
.hero__media img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
    animation: hero-in 1.6s var(--ease-out) both;
}
@keyframes hero-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

.hero__row {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
    padding-top: 48px;
}
.hero__name {
    font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em;
    margin-bottom: 4px;
    animation: rise .9s var(--ease-reveal) .25s both;
}
.hero__title {
    font-size: 96px; line-height: 1.04167; font-weight: 600; letter-spacing: -0.015em;
    padding-bottom: .05em; margin-bottom: -.05em;
    background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 38%, #5a4520 72%, var(--gold-ink) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: rise .9s var(--ease-reveal) .35s both;
}
.hero__badge {
    margin-top: 14px;
    color: var(--gold-ink);
    font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em;
    animation: rise .9s var(--ease-reveal) .45s both;
}
.hero__buy {
    display: flex; flex-direction: column; align-items: flex-end; gap: 18px;
    text-align: right;
    animation: rise .9s var(--ease-reveal) .55s both;
}
.hero__price { font-size: 17px; line-height: 1.47059; color: var(--ink); }
.hero__copy { flex: 1; min-width: 0; }
.hero__buy  { flex: none; max-width: 340px; }

@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

@media (max-width: 1068px) {
    /* Tablet and small laptop: the headline gets the full width, price and button sit under it. */
    .hero__row { flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 40px; }
    .hero__buy { align-items: flex-start; text-align: left; max-width: none; }
    .hero__title { font-size: 80px; line-height: 1.05; }
    .hero__name  { font-size: 24px; }
}
@media (max-width: 734px) {
    .hero { padding-bottom: 56px; }
    .hero__media { height: 54svh; min-height: 340px; }
    .hero__row { flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 32px; }
    .hero__name { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
    .hero__title { font-size: 56px; line-height: 1.07143; letter-spacing: -0.005em; }
    .hero__badge { font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em; margin-top: 12px; }
    .hero__buy { align-items: flex-start; text-align: left; gap: 16px; }
}

/* ─── 2 · HIGHLIGHTS GALLERY ──────────────────────────────────────────────── */

/* Gallery: dot platter + play/pause, active dot stretches and fills. */
.highlights { padding-bottom: 96px; }

.gallery__track {
    display: flex; gap: var(--gap);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-inline: calc((100% - var(--w)) / 2);
    scroll-padding-inline: calc((100% - var(--w)) / 2);
    scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item {
    position: relative; flex: none;
    width: var(--w);
    height: clamp(460px, 48.6vw, 700px);
    border-radius: 28px; overflow: hidden;
    background: var(--surface-dark);
    scroll-snap-align: start;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item::before {                        /* 35%+ scrim behind the caption (HIG) */
    content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.25) 55%, rgba(0,0,0,0));
}
.gallery__caption {
    position: absolute; z-index: 2; top: 56px; left: 50%; transform: translateX(-50%);
    width: min(640px, calc(100% - 64px));
    text-align: center; color: var(--white);
    font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em;
    text-wrap: balance;
}

.gallery__controls {
    display: flex; justify-content: center; align-items: center; gap: 14px;
    margin-top: 28px;
}
.dotnav {
    display: flex; align-items: center; gap: 0;
    height: 56px; padding: 0 12px;
    border-radius: 28px;
    background: rgba(210, 210, 215, .64);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dotnav, .playpause { -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
}
.dotnav__dot { display: grid; place-items: center; width: 20px; height: 44px; }
.dotnav__dot span {
    position: relative; overflow: hidden;
    width: 8px; height: 8px; border-radius: 4px;
    background: rgba(0, 0, 0, .42);
    transition: width .5s var(--ease-standard), background-color .5s var(--ease-standard);
}
.dotnav__dot:hover span { background: rgba(0, 0, 0, .64); }
.dotnav__dot.is-current { width: 44px; }
.dotnav__dot.is-current span { width: 32px; background: rgba(0, 0, 0, .24); }
.dotnav__dot.is-current span::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, .64);
    transform-origin: left center; transform: scaleX(1);
}
.gallery.is-playing .dotnav__dot.is-current span::after {
    animation: dotfill var(--autoplay, 6000ms) linear both;
}
.gallery.is-paused .dotnav__dot.is-current span::after { animation-play-state: paused; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.playpause {
    display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(210, 210, 215, .64);
    color: rgba(0, 0, 0, .8);
}
.playpause:hover { color: var(--black); }
.playpause svg { width: 22px; height: 22px; fill: currentColor; }
.playpause__play { display: none; }
.playpause[data-state="paused"] .playpause__pause { display: none; }
.playpause[data-state="paused"] .playpause__play  { display: block; }

@media (max-width: 1068px) { .gallery__caption { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; top: 44px; } }
@media (max-width: 734px) {
    .gallery__item { height: 540px; border-radius: 22px; }
    .gallery__caption { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; top: 32px; width: calc(100% - 48px); }
    .gallery__item::before { height: 55%; }
    .dotnav { height: 48px; } .playpause { width: 48px; height: 48px; }
}

/* ─── 3 · INTRO ───────────────────────────────────────────────────────────── */

.intro { text-align: center; }
.intro__copy {
    margin-top: 1.6em;
    color: var(--ink-2);
    font-size: 21px; line-height: 1.38105; letter-spacing: .011em;
    max-width: 820px; margin-inline: auto;
}
.intro__copy strong, .story__copy strong, .modal__copy strong { color: var(--ink); font-weight: 600; }

.stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px;
    max-width: 980px;
    margin-top: 88px;
    text-align: left;
}
.stat { display: flex; flex-direction: column; padding-top: 20px; border-top: 1px solid var(--hair); }
.stat__pre  { font-size: 17px; line-height: 1.23536; font-weight: 600; color: var(--ink); }
.stat__value {
    align-self: flex-start;
    margin: 4px 0 6px;
    font-size: 56px; line-height: 1.07143; font-weight: 600; letter-spacing: -0.005em;
    background: linear-gradient(90deg, var(--ink), var(--gold-ink));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-bottom: .05em; margin-bottom: calc(6px - .05em);
}
.stat__post { font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--ink-2); }

@media (max-width: 1068px) { .stat__value { font-size: 48px; } }
@media (max-width: 734px) {
    .intro__copy { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
    .stats { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; width: var(--w-text); }
    .stat__value { font-size: 40px; line-height: 1.1; }
}

/* ─── 4 · CHAUFFEURS (DARK STORY) ─────────────────────────────────────────── */

.story .headline { margin-bottom: 64px; }
.story__media {
    width: min(1440px, 100%); margin: 0 auto;
    aspect-ratio: 16 / 9; max-height: 820px;
    overflow: hidden;
}
.story__media img { width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .story__media[data-grow] {
            animation: debleed linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 45%;
        }
        @keyframes debleed {
            from { clip-path: inset(0 12.5% round 28px); }
            to   { clip-path: inset(0 0 round 0); }
        }
    }
}
.story__copy {
    margin-top: 64px;
    color: var(--ink-3);
    font-size: 21px; line-height: 1.38105; letter-spacing: .011em;
}
.story__copy strong { color: var(--on-dark); }

.specs {
    display: grid; grid-template-columns: 1fr 1.75fr; gap: 48px;
    margin-top: 72px; padding-top: 32px;
    border-top: 1px solid var(--hair-dark);
}
.specs__stats { display: flex; flex-direction: column; gap: 28px; }
.specs__stats li { display: flex; flex-direction: column; padding-bottom: 28px; border-bottom: 1px solid var(--hair-dark); }
.specs__stats li:last-child { border-bottom: 0; padding-bottom: 0; }
.specs__stats .stat__pre  { color: var(--on-dark); }
.specs__stats .stat__post { color: var(--ink-3); }
.specs__value { font-size: 40px; line-height: 1.1; font-weight: 600; color: var(--on-dark); margin: 2px 0 4px; }
.specs__list { display: flex; flex-direction: column; gap: 22px; color: var(--ink-3); }
.specs__list strong { display: block; color: var(--on-dark); }

@media (max-width: 1068px) { .specs { grid-template-columns: 1fr; } .specs__stats { flex-direction: row; gap: 48px; } .specs__stats li { border: 0; padding: 0; } }
@media (max-width: 734px) {
    .story .headline { margin-bottom: 40px; }
    .story__media { aspect-ratio: 4 / 5; }
    .story__copy { margin-top: 40px; font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
    .specs { margin-top: 48px; }
    .specs__stats { flex-direction: column; gap: 24px; }
    .specs__value { font-size: 32px; line-height: 1.125; }
}

/* ─── TILES AND CARDS ─────────────────────────────────────────────────────── */

/* Cards: 28px radius, no shadow, hover scale 1.0161 over .3s cubic-bezier(0,0,.5,1). */
.tile { position: relative; border-radius: 28px; overflow: hidden; }
.tile--media { aspect-ratio: 6 / 7; background: var(--surface-dark); }
.tile--media img { width: 100%; height: 100%; object-fit: cover; }
.tile--card { background: var(--bg); padding: 40px 36px 44px; }
.sec:not(.sec--alt):not(.sec--dark) .tile--card { background: var(--bg-alt); }   /* white card on a white section becomes grey */
.tile__icon { width: 36px; height: 36px; color: var(--gold-ink); margin-bottom: 28px; }
.tile__title { font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: .009em; margin-bottom: 10px; }
.tile--card p { color: var(--ink-2); }

@media (hover: hover) {
    .tile, .card { transition: transform .3s var(--ease-hover); }
    .tile:hover, .card:hover { transform: scale(1.0161); }
}

/* The "+" disc: 36px, inset 16px, with a 44px hit area. */
.disc {
    position: absolute; right: 16px; bottom: 16px; z-index: 2;
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--platter); color: rgba(0, 0, 0, .56);
    transition: background-color .1s linear, color .1s linear;
}
.disc::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.disc svg { width: 20px; height: 20px; }
.disc:hover { background: var(--disc-hover); color: rgba(0, 0, 0, .88); }
.disc--glass { background: rgba(210, 210, 215, .72); color: rgba(0, 0, 0, .8); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .disc--glass { -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
}

/* ─── 5 · OCCASIONS ───────────────────────────────────────────────────────── */

.occasions .headline { margin-bottom: 64px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.duo__copy { margin-top: 28px; max-width: 500px; color: var(--ink-2); }
.duo__copy strong { color: var(--ink); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 72px; }

@media (max-width: 1068px) { .trio { gap: 16px; } .tile--card { padding: 32px 28px 36px; } .tile__title { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; } }
@media (max-width: 734px) {
    .occasions .headline { margin-bottom: 40px; }
    .duo { grid-template-columns: 1fr; gap: 48px; }
    .duo__copy { margin-top: 20px; }
    .trio { grid-template-columns: 1fr; margin-top: 48px; }
    .tile { border-radius: 22px; }
    .tile--card { padding: 28px 28px 32px; }
    .tile__icon { margin-bottom: 20px; }
    .tile__title { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
}

/* ─── 6 · RATES ───────────────────────────────────────────────────────────── */

.rates { text-align: center; }
.rates__lede { margin-top: 1.2em; color: var(--ink-2); font-size: 21px; line-height: 1.38105; letter-spacing: .011em; }
.rates__car { width: min(680px, 87.5vw); margin: 56px auto 0; }
.rates__car img { width: 100%; height: auto; }
.rates__car figcaption { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 20px; }
.rates__name   { font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: .009em; }
.rates__colors { font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--ink-2); }

.prices {
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: 980px; margin-top: 72px;
    border-top: 1px solid var(--hair);
}
.price { display: flex; flex-direction: column; align-items: center; padding: 36px 12px 0; }
.price + .price { border-left: 1px solid var(--hair); }
.price__label { font-size: 17px; line-height: 1.23536; font-weight: 600; }
.price__value { margin: 10px 0 6px; font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0; }
.price__note  { font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--ink-2); }

.rates__cta { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 64px; }

@media (max-width: 1068px) {
    .prices { grid-template-columns: 1fr 1fr; }
    .price:nth-child(3) { border-left: 0; }
    .price:nth-child(n+3) { border-top: 1px solid var(--hair); margin-top: 36px; }
    .price { padding-top: 32px; }
}
@media (max-width: 734px) {
    .rates__lede { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
    .prices { grid-template-columns: 1fr; width: var(--w-text); margin-top: 48px; }
    .price, .price + .price { border-left: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; text-align: left;
        padding: 20px 0; margin: 0; border-top: 0; border-bottom: 1px solid var(--hair); }
    .price__value { order: 2; margin: 0; font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
    .price__note { order: 3; flex-basis: 100%; }
    .rates__cta { flex-direction: column; gap: 20px; margin-top: 48px; }
}

/* ─── 7 · HOW IT WORKS ────────────────────────────────────────────────────── */

.steps .headline { margin-bottom: 0; }
.steps .trio { margin-top: 64px; counter-reset: none; }
.step__n {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px; margin-right: 12px; border-radius: 50%;
    background: var(--gold); color: var(--ink);
    font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0;
    vertical-align: 3px;
}
@media (max-width: 734px) { .steps .trio { margin-top: 40px; } }

/* ─── 8 · WHY GRANDPRIDE (FEATURE CARDS) ──────────────────────────────────── */

/* Feature card: 17/600 label, 28/600 headline, 36px #e8e8ed disc inset 16px. */

.sec--alt + .why.sec--alt { padding-top: 0; }   /* cards that continue a grey section do not restart its padding */
.cards__track {
    display: flex; gap: var(--gap);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-inline: calc((100% - var(--w)) / 2);
    scroll-padding-inline: calc((100% - var(--w)) / 2);
    padding-block: 12px;                 /* room for the hover scale */
    margin-block: -12px;
    scrollbar-width: none;
}
.cards__track::-webkit-scrollbar { display: none; }
.card {
    position: relative; flex: none;
    width: 372px; height: 500px;
    padding: 30px 32px;
    border-radius: 28px;
    background: var(--bg);
    scroll-snap-align: start;
    display: flex; flex-direction: column;
}
.card__label { font-size: 17px; line-height: 1.23536; font-weight: 600; margin-bottom: 6px; }
.card__title { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em; }
.card__body  { margin-top: 12px; font-size: 17px; line-height: 1.23536; color: var(--ink); }
.card__art {
    margin: auto auto 24px;
    width: 120px; height: 120px;
    color: var(--gold-ink);
}
.card__art--price {
    display: grid; place-items: center;
    border-radius: 50%; background: var(--bg-alt);
    color: var(--gold-ink);
    font-size: 44px; font-weight: 600; letter-spacing: -0.01em;
}
/* Line icons: the sprite's strokes inherit this, so a big illustration keeps a fine line
   (1.5 at 24px would be 7.5px at 120px, which looks like clip-art). */
svg { stroke-width: 1.5; }
.card svg.card__art { stroke-width: .7; }

.paddles { display: flex; justify-content: flex-end; gap: 18px; margin-top: 32px; }
.paddle {
    position: relative;
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(210, 210, 215, .64); color: rgba(0, 0, 0, .56);
    transition: background-color .1s linear, color .1s linear, opacity .2s linear;
}
.paddle::after { content: ''; position: absolute; width: 44px; height: 44px; }
.paddle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.paddle:hover:not(:disabled) { background: rgba(223, 223, 227, .698); color: rgba(0, 0, 0, .64); }
.paddle:disabled { opacity: .42; cursor: default; }

@media (max-width: 734px) {
    .card { width: min(320px, 82vw); height: 460px; padding: 28px; border-radius: 22px; }
    .card__title { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; }
    .card__art { width: 96px; height: 96px; }
}

/* ─── 9 · FAQ ─────────────────────────────────────────────────────────────── */

.faq__title { margin-bottom: 40px; }
.faq__list { border-top: 1px solid var(--hair); }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__item summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 24px 0;
    font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em;
    text-wrap: balance;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {                    /* the + that turns into × */
    content: ''; flex: none; width: 18px; height: 18px;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat;
    color: var(--ink-2);
    transition: transform .32s var(--ease-standard);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item[open][data-closing="true"] summary::after { transform: none; }   /* turns back as the answer starts closing */
.faq__item summary:hover { color: var(--ink-2); }
.faq__body { padding: 0 48px 28px 0; color: var(--ink-2); }
.faq__body p { max-width: 720px; }
.faq__body p + p { margin-top: 0.8em; }                   /* answers from FaqDB may hold several paragraphs */
.faq__a p:not(:last-child) { padding-bottom: 0.8em; }      /* the car pages' answers: each p carries 28px below */

/* Smooth open/close where the browser can animate to auto. */
@supports (interpolate-size: allow-keywords) {
    .faq__list { interpolate-size: allow-keywords; }
    .faq__item::details-content { height: 0; overflow: clip; transition: height .4s var(--ease-standard), content-visibility .4s allow-discrete; }
    .faq__item[open]::details-content { height: auto; }
    .faq__list.is-js .faq__item::details-content { transition: none; }   /* v2.js animates it instead, everywhere */
}

@media (max-width: 734px) { .faq__item summary { font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em; padding: 20px 0; } .faq__body { padding-right: 0; } }

/* ─── 10 · CLOSER ─────────────────────────────────────────────────────────── */

.closer {
    text-align: center;
    background:
        radial-gradient(60% 52% at 50% 58%, rgba(212, 178, 117, .26), rgba(212, 178, 117, 0) 72%),   /* fully faded before the section ends, so no line shows at the footer */
        var(--bg-alt);
}
.closer__title {
    font-size: 96px; line-height: 1.04167; font-weight: 600; letter-spacing: -0.015em;
    padding-bottom: .05em; margin-bottom: -.05em;
    background: linear-gradient(180deg, var(--ink) 30%, #5a4520 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.closer__copy { margin-top: 1.4em; color: var(--ink-2); font-size: 21px; line-height: 1.38105; letter-spacing: .011em; }
.closer__cta { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 40px; }

@media (max-width: 1068px) { .closer__title { font-size: 80px; line-height: 1.05; } }
@media (max-width: 734px) {
    .closer__title { font-size: 48px; line-height: 1.08349; letter-spacing: -0.003em; }
    .closer__copy { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
    .closer__cta { flex-direction: column; gap: 20px; }
}

/* ─── FOOTER (ac-globalfooter) ────────────────────────────────────────────── */

.gf {
    background: var(--bg-alt);
    color: rgba(0, 0, 0, .56);
    font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em;
}
.gf__wrap { max-width: 980px; margin: 0 auto; padding: 0 22px 21px; }
.gf a { color: rgba(0, 0, 0, .72); }
.gf a:hover { color: rgba(0, 0, 0, .88); text-decoration: underline; }

.gf__notes {
    list-style: decimal; padding: 17px 0 11px 1.2em;
    border-bottom: 1px solid var(--hair);
}
.gf__notes li { padding-left: .2em; margin-bottom: .8em; }
.gf__notes li:target { color: var(--ink); }

.gf__crumbs { display: flex; align-items: center; gap: 10px; padding: 17px 0 15px; color: rgba(0, 0, 0, .88); }
.gf__crumbs img { width: 14px; height: auto; opacity: .88; }
.gf__crumbs svg { width: 6px; height: 10px; color: rgba(0, 0, 0, .48); }
.gf__crumbs a { display: grid; place-items: center; min-width: 24px; min-height: 24px; }

.gf__notes + .gf__dir { padding-top: 20px; }      /* no breadcrumbs between (home) */
.gf__dir {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--hair);
}
.gf__col summary {
    list-style: none; pointer-events: none;
    color: rgba(0, 0, 0, .88); font-weight: 600;
    margin-bottom: .8em;
}
.gf__col summary::-webkit-details-marker { display: none; }
.gf__col li { margin-bottom: .8em; }

.gf__more { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.gf__more a { color: var(--link); }

.gf__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; padding-top: 16px; }
.gf__legal ul { display: flex; flex-wrap: wrap; }
.gf__legal li + li { border-left: 1px solid var(--hair); margin-left: 9px; padding-left: 9px; }
.gf__region { margin-left: auto; }

@media (max-width: 833px) {
    .gf__wrap { padding-inline: 16px; }
    .gf__dir { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; }
    .gf__col { border-bottom: 1px solid var(--hair); }
    .gf__col:last-child { border-bottom: 0; }
    .gf__col summary {
        pointer-events: auto; cursor: pointer;
        display: flex; justify-content: space-between; align-items: center;
        margin: 0; padding: 12px 0; font-weight: 400;
    }
    .gf__col summary::after {
        content: ''; width: 7px; height: 7px; margin-right: 4px;
        border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .2s var(--ease-standard);
    }
    .gf__col[open] summary::after { transform: translateY(2px) rotate(-135deg); }
    .gf__col ul { padding: 0 0 12px 12px; }
    .gf__legal { flex-direction: column; align-items: flex-start; }
    .gf__region { margin-left: 0; order: -1; }
}

/* ─── MODAL (ac-modal) ────────────────────────────────────────────────────── */

/* 48% scrim, 18px sheet, 36px close disc. */

.modal {
    width: 816.67px; max-width: calc(100vw - 80px);
    max-height: calc(100dvh - 80px);
    margin: auto; padding: 76px 76px 64px;
    border: 0; border-radius: 18px;
    background: var(--bg); color: var(--ink);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0;
    transition: opacity .4s var(--ease-standard), overlay .4s allow-discrete, display .4s allow-discrete;
}
.modal[open] { opacity: 1; }
@starting-style { .modal[open] { opacity: 0; } }
.modal::backdrop {
    background: rgba(0, 0, 0, .48);
    opacity: 0;
    transition: opacity .4s var(--ease-standard), overlay .4s allow-discrete, display .4s allow-discrete;
}
.modal[open]::backdrop { opacity: 1; }
@starting-style { .modal[open]::backdrop { opacity: 0; } }

/* The close disc stays put while a long sheet scrolls. Its <form> is the sticky box (the disc alone was trapped in it). */
.modal > form[method="dialog"] { position: sticky; top: 0; z-index: 2; }
.modal__close {
    position: sticky; top: -60px; float: right;
    margin: -60px -60px 0 0;
    right: auto; bottom: auto;
}
.modal__eyebrow { font-size: 17px; line-height: 1.23536; font-weight: 600; margin-bottom: 8px; }
.modal__title { font-size: 48px; line-height: 1.08349; font-weight: 600; letter-spacing: -0.003em; margin-bottom: 28px; }
.modal__copy { color: var(--ink-2); font-size: 21px; line-height: 1.38105; letter-spacing: .011em; }
.modal__img { margin-top: 40px; width: 100%; height: auto; border-radius: 18px; }
.modal__table { margin-top: 36px; border-top: 1px solid var(--hair); }
.modal__table div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.modal__table dt { font-weight: 600; }
.modal__table dd { color: var(--ink-2); }
.modal__note { margin-top: 20px; font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--ink-2); }

@media (max-width: 1068px) { .modal { width: 692px; padding: 64px 56px 56px; } .modal__close { margin: -48px -40px 0 0; } }
@media (max-width: 734px) {
    .modal { width: max(87.5%, 480px); padding: 56px 32px 40px; }
    .modal__title { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
    .modal__copy { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
    .modal__close { margin: -40px -16px 0 0; }
}
@media (max-width: 480px) {
    /* a bottom sheet on phones */
    .modal { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: calc(100dvh - 40px);
        padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}
body.has-modal { overflow: hidden; }

/* ─── REVEAL (StaggeredFadeIn) ────────────────────────────────────────────── */

/* 30px rise, .7s / .9s, .15s stagger. */

.js [data-reveal] {
    opacity: 0; transform: translateY(30px);
    transition: opacity .9s var(--ease-reveal) var(--d, 0s), transform .7s var(--ease-reveal) var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ─── PREFERENCES ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero__media img, .hero__name, .hero__title, .hero__badge, .hero__buy { animation: none; }
    .js [data-reveal] { transform: none; transition: opacity .4s linear; }
    .tile, .card { transition: none; }
    .tile:hover, .card:hover { transform: none; }
    .dotnav__dot span, .ln__toggle svg, .ln__menu, .gn__list, .gn__list li { transition: none; }
    .ln.is-tucked { transform: none; }        /* a tucked bar only fades */
}

@media (prefers-reduced-transparency: reduce) {
    .gn, .ln { background: var(--bg-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .dotnav, .playpause, .disc--glass { background: var(--control); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
    .ln { box-shadow: inset 0 -2px 0 var(--ink); }
    .card, .tile--card { box-shadow: inset 0 0 0 2px var(--ink); }
    .stat__value, .hero__title, .closer__title { background: none; color: var(--ink); }
}

/* ─── SHARED ──────────────────────────────────────────────────────────────── */

/* Used by more than one page: the calendar (ui/datePicker.js), .vh, modal lists, the Turnstile box (ui/humanCheck.js). */

.calendar.is-open { opacity: 1; transform: none; }
.calendar__step:hover { background: var(--bg-alt); }
.calendar__step svg { width: 8px; height: 12px; }
.calendar__day:hover:not(:disabled) { background: var(--bg-alt); }
.calendar__day.is-today { color: var(--gold-ink); font-weight: 600; }
.calendar__day.is-selected, .calendar__day.is-selected:hover { background: var(--ink); color: var(--white); font-weight: 600; }
.modal__list { margin-top: 32px; border-top: 1px solid var(--hair); }
.human-check:not(:empty) { margin-top: 24px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }