/* Ceylon Rides Club — Galle Fort
   Friendly modern travel: geometric type, full-bleed photography, orange + charcoal. */

/* Self-hosted type. Both families ship as VARIABLE fonts, so one file per
   subset covers every weight we use — Inter 400–700, Sora 500–700. That is
   4 files instead of 7, and it removes the fonts.googleapis.com round-trip
   (DNS + TLS + 2 hops) that used to block first paint.

   Only latin + latin-ext are self-hosted. The language switcher offers
   සිං and தமிழ், which these subsets do not cover — those scripts fall
   through to the system stack, exactly as they did before. If the Sinhala
   and Tamil translations ever ship for real, add Noto Sans Sinhala/Tamil
   here rather than widening these subsets.

   font-display: swap on every face — text paints in the fallback stack
   immediately, so a slow font can never hold up FCP. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(fonts/sora-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(fonts/sora-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer reset, tokens, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
  body, h1, h2, h3, h4, p, figure, ol, ul, dl, dd { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  button, input, select { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
}

@layer tokens {
  :root {
    --navy-950: #0E0E0E;
    --navy-900: #171717;
    --navy-800: #252525;
    --navy-700: #383838;
    /* Accent contract — do not break:
       --gold      fills, 3px+ rules, and marks only. ~2.9:1 on white: never for text.
       --gold-dk   all accent TEXT. ~4.6:1 on --bg, passes AA.
       Any accent text below 18px uses --gold-dk. No exceptions.
       On a --gold fill, the label is --navy-950, never #fff. */
    --gold:       #EF6815;
    --gold-light: #FFD0AD;
    --gold-dk:    #A94200;
    --gold-soft:  rgba(239,104,21,.09);
    --wa:         #167A4A;
    --wa-dark:    #105F39;

    /* Zero-chroma paper. Every neutral here is a true grey: R=G=B, no hue,
       no temperature. The page previously ran on warm sand (hue 39, sat 32%)
       which read as beige; tinting it cool would only have swapped one
       default for another. Colour on this page now comes from the orange,
       the WhatsApp green and the photography, never from the ground. */
    --bg:      #FFFFFF;
    --surface: #F0F0F0;
    --ink:     #171717;
    --muted:   #595959;
    --rule:    #DCDCDC;

    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --shell:  82rem;

    --t-hero: clamp(2.35rem, 1.2rem + 4.6vw, 4.75rem);
    --t-h2:   clamp(1.75rem, 1.35rem + 1.65vw, 2.55rem);
    --t-h3:   clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    --t-body: clamp(.98rem, .96rem + .12vw, 1.03rem);
    --t-fine: 0.875rem;

    /* Shape lock — one radius per role:
       --r-pill  tags, status chips, badges
       --r-lg    cards and media
       --r       buttons and inputs
       --r-sm    hairline details only */
    --r-sm: 6px;
    --r: 10px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-pill: 999px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Neutral shadows to match the neutral ground. The previous warm-tinted
       set would put the beige cast straight back in as soft brown haze. */
    --sh-1: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
    --sh-2: 0 10px 30px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
    --sh-3: 0 28px 64px rgba(0,0,0,.20), 0 8px 22px rgba(0,0,0,.10);

    /* Stacking scale. --z-splash sits above everything: the loader must
       cover the sticky masthead (--z-bar) and the floating chat button
       (--z-dock), or the "loading" screen paints under the very chrome
       it is supposed to be hiding. */
    --z-bar: 200; --z-dock: 300; --z-splash: 400;
    color-scheme: light;
  }
}

@layer base {
  body {
    background: var(--bg); color: var(--ink);
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--t-body); line-height: 1.58;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(239,104,21,.18);
  }
  h1, h2, h3, .serif {
    font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: lining-nums;
    font-weight: 600; line-height: 1.13; letter-spacing: -0.005em;
    text-wrap: balance; overflow-wrap: break-word;
  }
  h1 { font-size: var(--t-hero); letter-spacing: -.025em; line-height: 1.04; }
  h2 { font-size: var(--t-h2); letter-spacing: -.018em; }
  h3 { font-size: var(--t-h3); }
  p { text-wrap: pretty; }
  b, strong { font-weight: 700; }
  ::selection { background: var(--gold); color: var(--navy-950); }
  :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: var(--r-sm); }

  .skip {
    position: absolute; left: var(--gutter); top: -100vh; z-index: 999;
    background: var(--navy-900); color: #fff; padding: .75em 1.1em; text-decoration: none;
  }
  .skip:focus { top: .75rem; }
}

@layer layout {
  .shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; min-width: 0; }
  section { padding-block: clamp(3.4rem, 6vw, 5rem); scroll-margin-top: 5rem; }
  .surface { background: var(--surface); }
  .lede { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .lede h2 { max-width: 18ch; }
  .lede p { margin-top: 1rem; color: var(--muted); text-wrap: balance; }
  /* Gold rule under section headings — the heritage detail */
  .lede h2::after, .head h2::after {
    content: ""; display: block; width: 58px; height: 3px;
    background: var(--gold); margin-top: 1.1rem; border-radius: var(--r-pill);
  }
}

@layer components {
  /* ---- Header ---- */
  .mast {
    position: sticky; top: 0; z-index: var(--z-bar);
    width: 100%; margin: 0;
    min-height: 76px; padding: .65rem var(--gutter);
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    border-bottom: 1px solid rgba(17,17,17,.10);
    box-shadow: 0 4px 18px rgba(17,17,17,.045);
  }
  .mast__inner {
    width: min(100%, var(--shell)); margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .wordmark { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
  .wordmark img { width: 48px; height: 48px; object-fit: contain; border-radius: 0; }
  .wordmark span {
    font-family: "Sora", "Helvetica Neue", Arial, sans-serif; font-weight: 700;
    line-height: 1.12; font-size: 1.02rem; letter-spacing: .01em;
    display: grid;
  }
  .nav { display: flex; align-items: center; gap: clamp(.9rem, 2.1vw, 1.85rem); }
  .nav a {
    text-decoration: none; font-size: .95rem; font-weight: 600; color: var(--ink);
    padding-block: .35rem; position: relative; transition: color .2s var(--ease);
  }
  .nav a::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
    height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
  }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { color: var(--navy-900); }
  .nav a.btn { color: #fff; }
  .nav a.btn::after { content: none; }
  .nav a.btn--gold { color: var(--navy-950); }
  /* ---- Mobile navigation ----
     Below 60rem the primary links previously just vanished, leaving the
     phone with no navigation at all. They now collapse into a panel behind
     the hamburger; "Reserve Now" stays out on the bar at all widths because
     it is the page's conversion path. */
  .navtoggle { display: none; }
  /* Both wrappers are transparent to the bar's flex layout above the
     breakpoint, so the links and the language picker stay direct flex
     children of .nav and space out as they always did. */
  .nav__collapse, .nav__links { display: contents; }

  @media (max-width: 60rem) {
    .navtoggle {
      display: grid; place-items: center;
      width: 44px; height: 44px; padding: 0; order: 3;
      background: transparent; border: 1px solid var(--rule);
      border-radius: var(--r); cursor: pointer;
      transition: background-color .18s var(--ease), border-color .18s var(--ease);
    }
    .navtoggle:hover { background: var(--surface); border-color: #B0B0B0; }
    .navtoggle:focus-visible { outline: 3px solid var(--wa); outline-offset: 2px; }
    .navtoggle__bars { display: grid; gap: 4px; width: 18px; }
    .navtoggle__bars span {
      display: block; height: 2px; width: 100%; background: var(--ink);
      border-radius: 2px;
      transition: transform .22s var(--ease), opacity .16s var(--ease);
    }
    /* Bars fold into a cross while the panel is open. */
    .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(2) { opacity: 0; }
    .navtoggle[aria-expanded="true"] .navtoggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .mast__inner { position: relative; flex-wrap: wrap; }
    .nav { order: 4; flex: 1 0 100%; display: block; }

    /* One collapsing row: the 0fr -> 1fr transition needs a single grid row
       wrapping everything, so .nav__collapse stops being display:contents
       here and becomes that row. */
    .nav__collapse {
      display: grid; grid-template-rows: 0fr;
      transition: grid-template-rows .26s var(--ease);
    }
    .nav[data-open] .nav__collapse { grid-template-rows: 1fr; }
    .nav__links { display: block; min-height: 0; overflow: hidden; }
    .nav[data-open] .nav__links { padding-block: .35rem .85rem; }

    .nav .hide-sm {
      display: block; padding: .95rem .1rem; font-size: 1rem;
      border-bottom: 1px solid var(--rule);
    }
    .nav .hide-sm::after { content: none; }
    .lang { margin-top: .9rem; justify-self: start; }

    /* Reserve Now stays on the top bar beside the hamburger. It is pinned
       to the bar's own row height, not to .mast__inner, which grows when
       the panel opens and would drag the button down with it. */
    .nav a.btn {
      position: absolute; right: calc(44px + .6rem);
      top: 0; height: 44px; display: inline-flex; align-items: center;
    }
  }

  /* Under 22rem (352px) the bar cannot hold wordmark + button + hamburger
     on one line, so the button drops into the panel and the bar keeps the
     two things that must always be reachable: identity and the menu.
     390px phones stay above this and keep the button on the bar. */
  @media (max-width: 30rem) {
    .nav a.btn { font-size: .85rem; padding-inline: .8rem; }
  }
  @media (max-width: 22rem) {
    .nav a.btn { position: static; translate: none; height: auto; width: 100%;
      justify-content: center; margin-top: .9rem; }
    .nav__collapse { order: 1; }
    .nav { display: grid; }
    .nav a.btn { order: 2; }
    /* Only reveal it with the panel, so the closed bar stays uncluttered. */
    .nav:not([data-open]) a.btn { display: none; }
  }

  @media (max-width: 30rem) {
    /* Two lines, never three: "Rides Club" must not wrap again. */
    .wordmark span { font-size: .88rem; white-space: nowrap; }
    .wordmark img { width: 38px; height: 38px; }
    .mast { min-height: 70px; padding-block: .55rem; }
    .mast__inner { gap: .5rem; }
    .mast .btn { padding-inline: .9rem; font-size: .85rem; }
    .lang select { min-height: 44px; }
  }

  /* ---- Buttons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 48px; padding: .7em 1.55em;
    background: var(--navy-900); color: #fff; border: 0; border-radius: var(--r);
    cursor: pointer; font-weight: 700; font-size: .95rem; letter-spacing: .02em;
    text-decoration: none;
    transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .btn:hover { background: var(--navy-700); transform: translateY(-1px); box-shadow: var(--sh-2); }
  .btn:active { transform: translateY(0); }
  .btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
  .btn--gold { background: var(--gold); color: var(--navy-950); }
  .btn--gold:hover { background: #DD5B0C; }
  .btn--wa { background: var(--wa); color: #fff; }
  .btn--wa:hover { background: var(--wa-dark); }
  .btn--ghost {
    background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .btn--ghost:hover { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px #fff; }
  .btn--outline { background: #fff; color: var(--navy-900); box-shadow: inset 0 0 0 1.5px var(--rule); }
  .btn--outline:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px #C4C4C4; }

  /* The primary action is the only saturated element over the photograph.
     Ivory here reads as "considered" but makes Reserve and Explore look identical,
     which is what stopped the hero converting. Gold on navy-950 is 8.2:1. */
  .hero .btn--gold, .tour-hero .btn--gold {
    background: var(--gold); color: var(--navy-950);
    box-shadow: 0 10px 30px rgba(169,66,0,.34);
  }
  .hero .btn--gold:hover, .tour-hero .btn--gold:hover { background: #FF7620; }

  /* ---- Hero: full-bleed photograph ---- */
  .hero {
    position: relative; isolation: isolate;
    min-height: clamp(42rem, calc(100svh - 76px), 54rem);
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(5rem, 11vw, 8.5rem);
    overflow: hidden;
  }
  .hero__img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(100deg, rgba(8,32,53,.62) 0%, rgba(8,32,53,.38) 42%, rgba(8,32,53,.06) 72%, rgba(8,32,53,.02) 100%),
      linear-gradient(0deg, rgba(8,32,53,.12), transparent 42%);
  }
  .hero__eyebrow {
    display: flex; align-items: center; gap: .7rem;
    color: #fff; font-size: .76rem; line-height: 1.2;
    font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(17,17,17,.42);
  }
  .hero__eyebrow span { width: 30px; height: 3px; flex-shrink: 0; background: var(--gold); }
  .hero h1 {
    color: #fff; max-width: 11.5ch; margin-top: 1.35rem;
    font-size: clamp(2.55rem, 1.35rem + 4.3vw, 4.7rem);
    line-height: 1.01; letter-spacing: -.04em;
    text-shadow: 0 2px 24px rgba(17,17,17,.38);
  }
  .hero p.sub {
    margin-top: 1.5rem; color: #EFEFEF; max-width: 40ch; font-size: 1.08rem;
    text-shadow: 0 1px 10px rgba(17,17,17,.45);
  }
  .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
  .hero__meta {
    max-width: 42rem; margin-top: 2.5rem; padding-top: 1.2rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
    border-top: 1px solid rgba(255,255,255,.28);
    color: #EFEFEF; font-size: .79rem; font-weight: 600;
  }
  .hero__meta > span { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-light); }
  @media (max-width: 38rem) {
    .hero { min-height: calc(100svh - 70px); padding-block: 4.75rem; align-items: end; }
    .hero__img { object-position: 73% 50%; }
    .hero__eyebrow { font-size: .68rem; letter-spacing: .1em; }
    .hero__meta { align-items: flex-start; gap: .35rem; }
    .hero__meta p { width: 100%; }
    .hero__meta > span { display: none; }
  }

  /* ---- Routes ---- */
  .route-controls {
    display: flex; justify-content: flex-end; gap: .6rem;
    margin: -1rem 0 1.25rem;
  }
  .route-controls[hidden] { display: none; }
  .route-control {
    display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1;
    border: 1px solid rgba(17,17,17,.22); border-radius: 50%;
    background: transparent; color: var(--ink); cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
  }
  .route-control:hover:not(:disabled) { background: var(--ink); color: #fff; }
  .route-control:disabled { opacity: .28; cursor: default; }
  .route-control svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .routes {
    --route-gap: clamp(1rem, 2vw, 1.5rem);
    display: grid; grid-auto-flow: column;
    grid-auto-columns: min(88%, 21rem); gap: var(--route-gap);
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory; scroll-behavior: smooth;
    scrollbar-width: none; padding: .25rem .15rem 1.5rem;
  }
  .routes::-webkit-scrollbar { display: none; }
  @media (min-width: 48rem) { .routes { grid-auto-columns: calc((100% - var(--route-gap)) / 2); } }
  @media (min-width: 70rem) { .routes { grid-auto-columns: calc((100% - (3 * var(--route-gap))) / 4); } }
  .route {
    display: flex; flex-direction: column; min-width: 0;
    background: #FFFFFF; border: 1px solid rgba(17,17,17,.13);
    border-radius: var(--r-lg); overflow: hidden;
    scroll-snap-align: start;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
  }
  .route:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: rgba(239,104,21,.4); }
  .route__media { position: relative; overflow: hidden; background: #dedede; }
  .route__media img { width: 100%; height: clamp(9.5rem, 14vw, 12rem); object-fit: cover; }
  .route__when {
    position: absolute; inset-block-end: 0; inset-inline-start: 0;
    background: var(--navy-900); color: #fff;
    font-size: .76rem; font-weight: 700; letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    padding: .4em .8em; margin: .65rem; border-radius: var(--r-pill);
  }
  .tag {
    position: absolute; inset-block-start: .7rem; inset-inline-end: .7rem;
    background: var(--gold); color: var(--navy-950);
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .35em .75em; border-radius: var(--r-pill);
  }
  .route__body { display: flex; flex: 1; flex-direction: column; padding: 1rem; }
  .route__body h3 { font-size: clamp(1.08rem, 1.35vw, 1.25rem); }
  .route__facts {
    margin-top: .4rem; color: var(--muted); font-size: .8rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .route p.desc { margin-top: .5rem; color: var(--muted); font-size: .86rem; line-height: 1.45; text-wrap: pretty; }
  .route__link {
    display: inline-block; align-self: flex-start; margin-top: auto; padding-top: .9rem; color: var(--ink);
    font-size: .8rem; font-weight: 700; text-decoration-color: var(--gold);
    text-decoration-thickness: 2px; text-underline-offset: .25rem;
  }
  .route__link:hover { color: var(--gold-dk); }

  /* ---- Split (bikes / booking) ---- */
  /* Top-aligned: the copy belongs beside the form's head, not floating
     centred against a much taller card. */
  .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  @media (min-width: 54rem) {
    .split { grid-template-columns: minmax(0,1fr) minmax(0,26rem); }
    /* Optical alignment with the form card's inner padding. */
    .split > div:first-child { padding-top: clamp(.5rem, 1.5vw, 1.25rem); }
  }
  .split img {
    width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--r-lg); box-shadow: var(--sh-2);
    border: 1px solid rgba(255,255,255,.72);
  }
  .checks { margin-top: 1.5rem; display: grid; gap: .7rem; }
  .checks li { display: grid; grid-template-columns: 20px 1fr; gap: .8rem; align-items: start; color: var(--muted); }
  .checks svg { width: 20px; height: 20px; color: var(--gold-dk); margin-top: .2rem; }

  /* ---- Easy ride story ---- */
  .bike-story {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--navy-900); color: #fff;
    padding-block: clamp(4rem, 7vw, 6.5rem);
  }
  .bike-story::before {
    content: ""; position: absolute; z-index: -1; inset: -20% -8% auto auto;
    width: min(55rem, 76vw); aspect-ratio: 1; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 0 0 5rem rgba(255,255,255,.018), 0 0 0 10rem rgba(255,255,255,.012);
  }
  .bike-story__grid { display: grid; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
  @media (min-width: 58rem) {
    .bike-story__grid { grid-template-columns: minmax(18rem, .78fr) minmax(0, 1.22fr); }
    .bike-story__intro { position: sticky; top: 7.5rem; }
  }
  .bike-story__eyebrow {
    color: var(--gold-light); font-size: .72rem; line-height: 1.2;
    font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  }
  .bike-story h2 {
    margin-top: .9rem; max-width: 9ch; color: #fff;
    font-size: clamp(2.7rem, 5.4vw, 5rem); line-height: .98; letter-spacing: -.045em;
  }
  .bike-story__intro > p:not(.bike-story__eyebrow) {
    max-width: 39ch; margin-top: 1.5rem; color: #C7C7C7;
  }
  .bike-story__note {
    display: flex; flex-wrap: wrap; align-items: center; gap: .65rem;
    margin-top: 2.2rem; color: #fff; font-size: .76rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
  }
  .bike-story__note i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
  .bike-story__list { border-top: 1px solid rgba(255,255,255,.2); }
  .bike-story__list li {
    display: grid; grid-template-columns: clamp(3.25rem, 7vw, 5.5rem) 1fr;
    gap: clamp(1rem, 3vw, 2.5rem); align-items: start;
    padding-block: clamp(1.5rem, 3.6vw, 2.35rem);
    border-bottom: 1px solid rgba(255,255,255,.2);
    transition: padding-inline .3s var(--ease), background-color .3s var(--ease);
  }
  .bike-story__list li:hover { padding-inline: .8rem; background: rgba(255,255,255,.035); }
  .bike-story__number {
    color: var(--gold); font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
    font-size: .76rem; font-weight: 700; letter-spacing: .12em; padding-top: .25rem;
  }
  .bike-story__list b {
    display: block; color: #fff; font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); font-weight: 600;
  }
  .bike-story__list p { max-width: 42ch; margin-top: .4rem; color: #A5A5A5; font-size: .96rem; }

  /* ---- Rider notes: pin-board composition ---- */
  .rider-notes {
    position: relative; height: 300svh; padding: 0;
    background: #F5F5F5;
  }
  .review-stage {
    --review-wheel-size: min(92vw, 105rem);
    --review-orbit-radius: min(46vw, 52rem);
    position: sticky; top: 76px; width: 100%; max-width: none;
    height: calc(100svh - 76px); min-height: 36rem; overflow: hidden;
    background: #FAFAFA;
  }
  .rider-notes__head {
    position: absolute; z-index: 4; top: clamp(1.6rem, 5vh, 3.25rem); left: 50%; translate: -50% 0;
    width: min(90%, 46rem); text-align: center;
  }
  .rider-notes__head > span {
    display: block; width: 2.25rem; height: 2px; margin: 0 auto .85rem; background: var(--ink);
  }
  .rider-notes__head h2 {
    color: var(--ink); font-size: clamp(2rem, 4vw, 3.65rem);
    line-height: .96; letter-spacing: -.04em; text-transform: uppercase;
  }
  .rider-notes__head p {
    margin-top: .65rem; color: #6B6B6B; font-size: .76rem;
    font-weight: 600; letter-spacing: .1em;
  }
  .review-wheel {
    --wheel-turn: 0deg;
    position: absolute; z-index: 1; left: 50%; bottom: calc(60% - var(--review-wheel-size)); translate: -50% 0;
    width: var(--review-wheel-size); aspect-ratio: 1; border-radius: 50%;
    transform: rotate(var(--wheel-turn)); transform-origin: 50% 50%; will-change: transform;
    filter: drop-shadow(0 -1.2rem 2.4rem rgba(17,17,17,.14));
  }
  .review-wheel img { width: 100%; height: 100%; object-fit: contain; }
  .review-orbit {
    --orbit-radius: var(--review-orbit-radius);
    position: absolute; z-index: 3; left: 50%; bottom: calc(60% - var(--review-wheel-size)); translate: -50% 0;
    width: var(--review-wheel-size); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  }
  .review-note {
    --angle: 0deg; --counter-angle: 0deg;
    position: absolute; z-index: 1; left: 50%; top: 50%;
    width: clamp(13rem, 18vw, 17rem); pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--orbit-radius)));
    transform-origin: 50% 50%; will-change: transform;
  }
  .review-note--one { --angle: 0deg; --counter-angle: 0deg; }
  .review-note--two { --angle: 36deg; --counter-angle: -36deg; }
  .review-note--three { --angle: 72deg; --counter-angle: -72deg; }
  .review-note__surface {
    display: block; width: 100%; font: inherit; text-align: left; cursor: pointer;
    min-height: clamp(15rem, 22vw, 20rem); padding: 1rem 1rem 1.15rem;
    background: #FFF; color: var(--ink); border: 1px solid rgba(17,17,17,.08);
    box-shadow: 0 .6rem 1.5rem rgba(31,25,20,.08);
    opacity: .22; filter: grayscale(.85) saturate(.35);
    transform: rotate(var(--counter-angle)) scale(.82); transform-origin: 50% 50%;
    transition: opacity .3s var(--ease), filter .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
    pointer-events: auto;
  }
  .review-note__photo {
    display: block; width: 100%; height: auto; aspect-ratio: 1.23; margin-bottom: .55rem;
    object-fit: cover; filter: saturate(.76) sepia(.08);
  }
  .review-note.is-active { z-index: 4; }
  .review-note.is-active .review-note__surface {
    opacity: 1; filter: none; transform: rotate(var(--counter-angle)) scale(1.06);
    box-shadow: 0 1.4rem 3.2rem rgba(31,25,20,.2);
  }
  .review-note__route {
    color: var(--gold-dk); font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
  }
  .review-stars { color: var(--gold); font-size: .82rem; line-height: 1; letter-spacing: .08em; }
  .review-note__quote {
    margin-top: .45rem; font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(.98rem, 1.2vw, 1.18rem); font-weight: 600; line-height: 1.24;
  }
  .review-note__surface > span {
    display: block; margin-top: .8rem; color: #828282;
    font-size: .59rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  }
  .review-dialog {
    width: min(92vw, 62rem); max-height: min(88svh, 48rem); padding: 0;
    color: var(--ink); background: #FFF; border: 0; border-radius: var(--r-lg);
    box-shadow: 0 2rem 6rem rgba(15,12,10,.35); overflow: hidden;
  }
  .review-dialog[open] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr); }
  .review-dialog::backdrop { background: rgba(17,17,17,.68); backdrop-filter: blur(5px); }
  .review-dialog__close {
    position: absolute; z-index: 2; top: .8rem; right: .8rem;
    width: 44px; height: 44px; display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.92);
    color: var(--ink); font-size: 1.7rem; line-height: 1; cursor: pointer;
    box-shadow: var(--sh-2);
  }
  .review-dialog__media { min-height: 29rem; background: var(--surface); }
  .review-dialog__media img { width: 100%; height: 100%; object-fit: cover; }
  .review-dialog__copy { align-self: center; padding: clamp(2rem, 5vw, 4rem); }
  .review-dialog__copy .eyebrow { margin-top: 1.4rem; }
  .review-dialog__copy h3 { margin-top: .65rem; font-size: clamp(1.6rem, 3vw, 2.5rem); }
  .review-dialog__copy > p:last-child { margin-top: 1.15rem; color: var(--muted); font-size: 1.08rem; }
  body.modal-open { overflow: hidden; }
  .review-scroll {
    position: absolute; z-index: 4; left: 50%; bottom: 1.1rem; translate: -50% 0;
    display: flex; align-items: center; gap: .55rem; color: #636363;
    font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  }
  .review-scroll > span { width: 1.8rem; height: 1px; background: currentColor; }
  @media (max-width: 42rem) {
    .rider-notes { height: 280svh; }
    .review-stage { top: 70px; height: calc(100svh - 70px); min-height: 36rem; }
    .rider-notes__head { top: 1.5rem; left: 50%; right: auto; width: 92%; }
    .rider-notes__head h2 { font-size: clamp(2rem, 10vw, 2.8rem); }
    /* The orbit is sized off the viewport, not a fixed rem value: at 390px
       a 44rem wheel is nearly twice the screen, which pushed the active
       card off-centre and sliced its neighbours against the edges. */
    .review-stage {
      --review-wheel-size: min(135vw, 30rem);
      --review-orbit-radius: min(52vw, 12rem);
    }
    .review-wheel, .review-orbit { bottom: calc(50% - var(--review-wheel-size)); }
    /* Cards must fit the viewport with room to spare, and the arc between
       them narrows so the neighbours stay on screen instead of swinging out
       past the edges. */
    .review-note { width: min(52vw, 12.5rem); }
    .review-note__surface { min-height: 12.5rem; padding: .7rem; }
    .review-note__photo { aspect-ratio: 1.5; }
    .review-note.is-active .review-note__surface { transform: rotate(var(--counter-angle)) scale(1); }
    .review-scroll { bottom: .75rem; white-space: nowrap; }
    .review-dialog[open] { grid-template-columns: 1fr; overflow-y: auto; }
    .review-dialog__media { min-height: 17rem; max-height: 42svh; }
    .review-dialog__copy { padding: 1.6rem; }
  }
  @media (min-width: 43rem) and (max-width: 68rem) {
    .review-stage { --review-wheel-size: min(110vw, 64rem); --review-orbit-radius: min(54vw, 29rem); }
    .review-note { width: clamp(12rem, 24vw, 15rem); }
  }
  @media (prefers-reduced-motion: reduce) {
    .rider-notes { height: auto; }
    .review-stage { position: relative; top: auto; height: min(46rem, 86svh); }
  }

  /* ---- Prices ---- */
  /* Shares --surface with the other tinted sections: one sand, used consistently,
     rather than a bespoke beige per section. The decorative tinted circle that
     used to bleed into the top-right corner is gone; it framed nothing. */
  #pricing { position: relative; background: var(--surface); color: var(--ink); }
  .pricing__lede { max-width: none; display: grid; gap: .65rem; }
  /* Small, tracked and set against a rule: reads as a section marker rather
     than a stray orange link. */
  .pricing__lede .eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    color: var(--gold-dk); font-size: .72rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .pricing__lede .eyebrow::before {
    content: ""; width: 1.75rem; height: 2px; background: var(--gold); border-radius: var(--r-pill);
  }
  .pricing__lede h2 {
    max-width: 15ch; color: var(--ink);
    font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
    line-height: 1.02; letter-spacing: -.035em;
  }
  .pricing__lede h2::after { content: none; }
  /* Sits directly under the heading, not stranded in the far corner. */
  .pricing__lede > p:last-child { margin-top: .25rem; color: var(--muted); max-width: 42ch; }
  /* Discrete cards on the sand, not cells in a ruled table. The gap plus a
     raised centre card gives the row an actual silhouette. */
  .plans {
    display: grid; gap: 1rem; background: transparent;
    margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
    align-items: center;
  }
  @media (min-width: 50rem) {
    /* Single column: heading and its supporting line stay together as one
       block. The old two-column split stranded the sub-line in the far right
       corner, aligned to nothing. */
    /* Asymmetric on purpose: the recommended plan is wider, so it reads as the
       default choice from shape alone rather than relying on a corner badge. */
    .plans { grid-template-columns: minmax(0,.85fr) minmax(0,1.3fr) minmax(0,.85fr); align-items: stretch; }
  }
  .plan {
    position: relative; padding: clamp(2rem, 3vw, 2.6rem) clamp(1.7rem, 2.6vw, 2.2rem);
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.5);
    border: 1px solid var(--rule); border-radius: var(--r-lg);
    transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
                transform .35s var(--ease), border-color .35s var(--ease);
  }
  .plan:hover {
    background: #fff; border-color: rgba(239,104,21,.35);
    transform: translateY(-3px); box-shadow: var(--sh-2);
  }
  /* All three cards share the badge clearance so their headings sit on one
     baseline; only the recommended card actually shows a badge there. */
  @media (min-width: 50rem) {
    .plan { padding-top: clamp(2.6rem, 3.6vw, 3.2rem); }
  }
  .plan ul { align-content: start; }
  /* The recommended card is the one place colour is allowed to be loud.
     Everything else in this section stays neutral so it has something to
     stand against. */
  /* Raised, whiter and slightly taller than its neighbours. The choice should
     be obvious from silhouette alone, before any label is read. */
  .plan--best {
    background: #fff; color: var(--ink);
    border-color: transparent;
    box-shadow: inset 0 3px 0 var(--gold), var(--sh-3);
  }
  .plan--best:hover {
    background: #fff; border-color: transparent; transform: translateY(-3px);
    box-shadow: inset 0 3px 0 var(--gold), var(--sh-3);
  }
  @media (min-width: 50rem) {
    .plan--best { padding-block: clamp(3rem, 4vw, 3.6rem) clamp(2.4rem, 3.2vw, 3rem); }
  }
  /* Badge rides the top edge, centred on the gold rule, instead of floating
     into the price row and colliding with it. */
  .plan--best::before {
    content: "Most booked"; position: absolute;
    inset-block-start: 0; inset-inline-start: 50%;
    translate: -50% -50%;
    background: var(--gold); color: var(--navy-950);
    font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: .42em .9em; border-radius: var(--r-pill);
    white-space: nowrap;
  }
  .plan__duration {
    color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  }
  .plan--best .plan__duration { color: var(--muted); }
  .plan h3 { margin-top: .65rem; color: inherit; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .05em; }
  .plan .amt {
    margin-top: 1.35rem; display: flex; align-items: baseline; gap: .4rem;
    padding-bottom: 1.1rem; margin-bottom: .25rem;
    border-bottom: 1px solid var(--rule);
  }
  .plan--best .amt { border-bottom-color: var(--rule); }
  .plan .amt b {
    font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
    color: inherit; font-size: clamp(2.1rem, 2.9vw, 2.85rem); font-weight: 700; letter-spacing: -.045em;
    font-variant-numeric: lining-nums tabular-nums;
  }
  /* The recommended price is the largest number in the section. */
  .plan--best .amt b { font-size: clamp(2.5rem, 3.7vw, 3.6rem); }
  .plan .cur, .plan .amt span.per { color: var(--muted); }
  .plan--best .cur, .plan--best .amt span.per { color: var(--muted); }
  .plan .cur { font-size: .82rem; font-weight: 700; }
  .plan .amt span.per { font-size: .86rem; font-weight: 600; }
  .plan p.who { margin-top: 1rem; color: var(--muted); font-size: .93rem; text-wrap: pretty; }
  .plan--best p.who { color: var(--muted); }
  .plan p.who { margin-bottom: 1.5rem; }

  /* Live total — the arithmetic a visitor would otherwise do in their head.
     Hidden until JS fills it, so the per-bike price stays correct without scripting. */
  /* Ink, not orange: this is information, not an accent. Orange in this
     section means "recommended" and nothing else. */
  .plan__total {
    margin-top: -.35rem; margin-bottom: 1.1rem;
    font-size: .88rem; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .plan__total[hidden] { display: none; }
  .plan ul { margin-top: 1.15rem; display: grid; gap: .5rem; font-size: .93rem; color: var(--muted); }
  .plan ul li { display: grid; grid-template-columns: 16px 1fr; gap: .55rem; align-items: start; }
  .plan ul svg { width: 16px; height: 16px; color: var(--gold-dk); margin-top: .22rem; }
  .plan .btn { margin-top: auto; width: 100%; }
  /* Guarantees breathing room even when the list is short. */
  .plan ul { margin-bottom: 1.5rem; }
  /* ---- Pricing details: rates vs practical info, two columns ---- */
  .details {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
    padding-top: clamp(1.75rem, 3vw, 2.5rem);
    border-top: 2px solid var(--rule);
  }
  @media (min-width: 50rem) { .details { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .details__col h3 {
    font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gold-dk); font-family: "Inter", sans-serif;
  }

  .deflist { margin-top: 1rem; display: grid; gap: 0; }
  .deflist > div {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: .3rem 1.5rem;
    padding: .95rem 0; border-bottom: 1px solid var(--rule);
  }
  .deflist dt { color: var(--muted); }
  .deflist .qual {
    display: inline-block; font-size: .78rem; color: var(--muted);
    border: 1px solid var(--rule); padding: .05em .5em; margin-inline-start: .35rem;
    border-radius: 999px; vertical-align: 1px;
  }
  .deflist dd {
    margin: 0; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; text-align: right;
    margin-inline-start: auto;
  }
  .deflist .unit { font-weight: 400; color: var(--muted); font-size: .93rem; }

  .details__note { margin-top: 1rem; font-size: var(--t-fine); color: var(--muted); }

  .pricing-note {
    margin-top: 1.75rem; padding: .85rem 1.05rem;
    background: rgba(255,255,255,.52); border: 1px solid var(--rule); border-radius: var(--r);
    font-size: var(--t-fine); color: var(--muted); max-width: 46rem;
    text-wrap: pretty;
  }
  .pricing-note strong { color: var(--ink); }
  .pricing-note strong { font-weight: 700; }


  /* ---- Booking: dark information panel + white action card ---- */
  .book {
    background: var(--surface); color: var(--ink);
    padding-block: clamp(4.5rem, 8vw, 7rem);
    border-top: 1px solid var(--rule);
  }
  .book__panel {
    position: relative;
    display: grid;
    grid-template-areas: "head" "form" "details";
    gap: clamp(2rem, 5vw, 3.5rem);
    padding: 0;
    color: var(--ink);
  }
  .book__head { grid-area: head; align-self: start; }
  .book__kicker {
    margin-bottom: .8rem; color: var(--gold-dk);
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase;
  }
  .book__head h2 {
    max-width: 13ch; color: var(--ink);
    font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.75rem);
    line-height: 1.04; letter-spacing: -.045em;
  }
  .book__head h2 span { color: var(--gold-dk); }
  .book__head > p {
    max-width: 38ch; margin-top: 1.2rem;
    color: var(--muted); font-size: .98rem;
  }

  .book .reserve--card {
    grid-area: form; align-self: center;
    padding: clamp(1.4rem, 3vw, 2.25rem);
    display: grid; gap: 1.25rem; min-width: 0;
    background: #fff; color: var(--ink);
    border: 1px solid var(--rule); border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
  }
  .reserve__cardhead {
    padding-bottom: 1rem; border-bottom: 1px solid var(--rule);
    font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
    color: var(--ink); font-size: 1.18rem; font-weight: 600;
    letter-spacing: -.025em;
  }
  /* Sentence case, matching the chip legend and the card heading. The
     reference sets its labels the same way: quiet, above the value. */
  .book .reserve--card .field label {
    color: var(--muted); font-size: .8rem; font-weight: 700;
    letter-spacing: 0; text-transform: none;
  }
  @media (min-width: 32rem) {
    }
  .book .reserve--card > .btn { width: 100%; margin-top: .1rem; }
  .reserve__terms {
    margin: 0; padding: .85rem .95rem;
    background: var(--surface); border-radius: var(--r-sm);
    color: var(--muted); font-size: .77rem; line-height: 1.5;
  }
  .reserve__terms strong { color: var(--ink); }

  .book__details {
    grid-area: details; display: grid; gap: clamp(2rem, 4vw, 3rem);
    align-self: end; min-width: 0;
  }
  .book__place {
    display: grid; grid-template-columns: 2.5rem minmax(0,1fr) auto;
    gap: .85rem; align-items: center;
  }
  .book__place-icon {
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--gold-soft); color: var(--gold-dk);
  }
  .book__place-icon svg {
    width: 1.15rem; height: 1.15rem;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .book__place h3 { color: var(--ink); font-size: 1rem; letter-spacing: -.015em; }
  .book__place p { margin-top: .2rem; color: var(--muted); font-size: .78rem; }
  .book__place > a {
    color: var(--wa-dark); font-size: .78rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
  }
  .book__place > a:hover { text-decoration: underline; }

  .book__faq-wrap > h3 {
    margin-bottom: .55rem; color: var(--muted);
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase;
  }
  /* The generic .faq rules are defined later in this file, so these
     dark-panel overrides carry an extra class to win on specificity rather
     than source order. Without it the questions rendered in --ink on the
     near-black panel and were literally invisible. */
  .book__panel .book__faq { border-top-color: var(--rule); }
  .book__panel .book__faq details { border-bottom-color: var(--rule); }
  .book__panel .book__faq summary {
    min-height: 50px; padding: .8rem 0;
    color: var(--ink); font-size: .9rem;
  }
  .book__panel .book__faq summary:hover { color: var(--gold-dk); }
  .book__panel .book__faq summary::after { color: var(--gold-dk); }
  .book__panel .book__faq details > div > p {
    max-width: 46ch; color: var(--muted); font-size: .82rem;
  }
  .book__panel .book__faq details[open] > div > p { padding-bottom: .85rem; }

  @media (min-width: 60rem) {
    .book__panel {
      grid-template-columns: minmax(0,1fr) minmax(23rem,.9fr);
      grid-template-areas:
        "head form"
        "details form";
      align-items: stretch;
      column-gap: clamp(3rem, 7vw, 7rem);
      row-gap: clamp(2.5rem, 5vw, 4rem);
    }
  }
  @media (max-width: 30rem) {
    .book__place { grid-template-columns: 2.5rem minmax(0,1fr); }
    .book__place > a { grid-column: 2; justify-self: start; }
  }

  /* Pill chips for start time. Four short choices are faster to tap than a
     dropdown, and the selected one stays visible without opening anything.
     Filled chip uses --gold with --navy-950 text per the accent contract. */
  .reserve-chips { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .reserve-chips legend {
    padding: 0; margin-bottom: .6rem;
    color: var(--muted); font-size: .8rem; font-weight: 700;
  }
  .reserve-chips__row { display: flex; flex-wrap: wrap; gap: .5rem; }
  .reserve-chips label { position: relative; cursor: pointer; }
  .reserve-chips input {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .reserve-chips span {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: .5rem 1rem;
    background: var(--bg); color: var(--ink);
    border: 1px solid #CFCFCF; border-radius: var(--r-pill);
    font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums;
    transition: background-color .18s var(--ease), border-color .18s var(--ease),
                color .18s var(--ease), transform .18s var(--ease);
  }
  .reserve-chips label:hover span { border-color: #9A9A9A; }
  .reserve-chips input:checked + span {
    background: var(--gold); border-color: var(--gold); color: var(--navy-950);
  }
  .reserve-chips input:focus-visible + span {
    outline: 3px solid var(--wa); outline-offset: 2px;
  }
  .reserve-chips label:active span { transform: scale(.97); }

  /* Underline fields: the rule sits under the value, not around it, so the
     card reads as writing on a page rather than a stack of grey boxes. */
  .reserve--card .field--line input,
  .reserve--card .field--line select {
    min-height: 44px; padding: .4rem 0;
    background: transparent; border: 0;
    border-bottom: 1.5px solid #CFCFCF; border-radius: 0;
    font-weight: 600;
  }
  .reserve--card .field--line input:hover,
  .reserve--card .field--line select:hover { background: transparent; border-bottom-color: #9A9A9A; }
  .reserve--card .field--line input:focus,
  .reserve--card .field--line select:focus {
    outline: none; background: transparent;
    border-bottom-color: var(--gold); box-shadow: none;
  }
  .reserve--card .field--line input:focus-visible,
  .reserve--card .field--line select:focus-visible { outline: 3px solid var(--wa); outline-offset: 3px; }
  /* The chevron rides on the baseline of the underline rather than inside a box. */
  .reserve--card .field--line.field--select::after { inset-inline-end: .2rem; inset-block-end: 22px; }
  /* Error state for the underline field. Declared after the generic
     .field.is-invalid rules further down would still lose on source order,
     so this carries the card class and !important on the one property that
     must not be overridden: the rule the visitor actually sees turn red. */
  .reserve--card .field--line.is-invalid input {
    border-bottom-color: #A3231A !important;
    background: transparent;
  }
  .reserve--card .field--line.is-invalid input:focus {
    box-shadow: none; border-bottom-color: #A3231A !important;
  }

  /* ---- Reserve form ---- */
  .reserve {
    background: #fff; color: var(--ink);
    padding: clamp(1.5rem, 3.5vw, 2.15rem);
    display: grid; gap: 1.25rem;
  }
  .reserve__head { padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); }
  .reserve h3 { color: var(--ink); font-size: 1.45rem; letter-spacing: -.02em; }
  .reserve__head > p { color: var(--muted); font-size: var(--t-fine); margin-top: .3rem; }
  .reserve__fields { display: grid; gap: 1rem; }
  /* Time and count share a row: they are both short, and pairing them keeps
     the form to three visual rows instead of four. */
  .reserve__row { display: grid; gap: 1rem; }
  @media (min-width: 26rem) { .reserve__row { grid-template-columns: 1fr 1fr; } }

  .field { display: grid; gap: .4rem; min-width: 0; position: relative; }
  .field label {
    font-size: .74rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #4A4A4A;
  }
  .field input, .field select {
    min-height: 52px; width: 100%;
    background: #F4F4F4;
    border: 1.5px solid #D2D2D2;
    border-radius: var(--r);
    padding: 0 .9rem;
    color: var(--ink);
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: .98rem; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .field select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.4rem; }
  .field input[type="date"] { appearance: none; -webkit-appearance: none; }
  .field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .62; cursor: pointer; }
  .field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
  .field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
  /* Chevron anchored to the input row, so a wrapping label cannot shift it. */
  .field.field--select::after {
    content: ""; position: absolute; pointer-events: none;
    inset-inline-end: 1rem; inset-block-end: 26px;
    width: 8px; height: 8px; translate: 0 50%;
    border-right: 2px solid var(--wa); border-bottom: 2px solid var(--wa);
    transform: rotate(45deg);
  }
  .field input:hover, .field select:hover { border-color: #B0B0B0; background: #fff; }
  /* Mouse focus gets the soft ring; keyboard focus keeps a real outline so the
     focused control stays obvious without relying on the shadow alone. */
  .field input:focus, .field select:focus {
    border-color: var(--wa); background: #fff; outline: none;
    box-shadow: 0 0 0 3px rgba(22,122,74,.16);
  }
  .field input:focus-visible, .field select:focus-visible {
    outline: 3px solid var(--gold); outline-offset: 2px;
  }
  .field select option { color: var(--ink); background: #fff; font-weight: 600; }

  .field__hint { color: #666666; font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .field__error { display: none; color: #A3231A; font-size: .78rem; font-weight: 700; }
  .field.is-invalid .field__error { display: block; }
  .field.is-invalid .field__hint { display: none; }
  .field.is-invalid input, .field.is-invalid select { border-color: #A3231A; background: #FEF7F7; }
  .field.is-invalid input:focus, .field.is-invalid select:focus { box-shadow: 0 0 0 3px rgba(163,35,26,.15); }

  .reserve .btn { width: 100%; min-height: 54px; font-size: 1rem; }
  .reserve .btn--wa { box-shadow: 0 8px 20px rgba(22,122,74,.22); }
  .reserve .btn--wa:hover { box-shadow: 0 10px 26px rgba(16,95,57,.28); }
  .reserve__meta {
    margin: 0; text-align: center; color: #6E6E6E; font-size: .8rem;
  }
  /* ---- Footer ---- */
  .foot {
    background: var(--surface); color: #565656;
    padding-block: clamp(3.5rem, 7vw, 5.5rem) 1.5rem;
    border-top: 1px solid var(--rule); font-size: var(--t-fine);
  }
  .foot__main { display: grid; gap: 2.5rem; }
  @media (min-width: 44rem) { .foot__main { grid-template-columns: minmax(0, 1.5fr) .7fr 1fr; } }
  .foot__brand { max-width: 25rem; }
  .foot__mark { display: inline-flex; align-items: center; gap: .85rem; color: var(--ink); }
  .foot__mark img { width: 52px; height: 52px; object-fit: contain; border-radius: var(--r-sm); }
  .foot__mark span { font-family: "Sora", "Helvetica Neue", Arial, sans-serif; font-size: 1.18rem; font-weight: 700; }
  .foot__brand > p { margin-top: 1.15rem; max-width: 34ch; color: #5D5D5D; line-height: 1.65; }
  .foot__group { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
  .foot__group > p { color: var(--ink); font-weight: 700; font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .25rem; }
  .foot__group > span { color: #5D5D5D; }
  .foot__contact { color: var(--wa-dark); margin-top: .35rem; }
  .foot a { text-decoration: none; transition: color .2s var(--ease); }
  .foot a:hover { color: var(--ink); }
  .foot .foot__contact:hover { color: var(--wa); }
  .foot__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.25rem;
    border-top: 1px solid rgba(17,17,17,.12); color: #6A6A6A;
  }

  /* ---- Premium closing flow: rates, reassurance, booking ---- */
  #pricing { background: #F3F5F7; }
  .pricing__lede {
    max-width: 42rem; margin: 0 auto clamp(2.75rem, 5vw, 4.25rem);
    justify-items: center; text-align: center;
  }
  .pricing__lede .eyebrow { justify-content: center; }
  .pricing__lede h2 { max-width: 18ch; }
  .pricing__lede > p:last-child { max-width: 38ch; }

  .plans {
    grid-template-columns: 1fr; gap: 1.25rem; margin-top: 0;
    background: transparent; border: 0; align-items: stretch;
  }
  .plan,
  .plan--best {
    min-height: 0; padding: 0; overflow: hidden;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #D8DCE1; border-radius: 1.25rem;
    box-shadow: 0 12px 35px rgba(25,31,41,.07);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  .plan:hover,
  .plan--best:hover {
    background: #fff; transform: translateY(-5px);
    border-color: #C5CBD2; box-shadow: 0 20px 48px rgba(25,31,41,.12);
  }
  .plan--best,
  .plan--best:hover { border-color: var(--gold); box-shadow: 0 22px 55px rgba(169,66,0,.16); }
  .plan--best::before {
    content: "Most booked"; inset-block-start: 1.75rem; inset-inline: auto 1.5rem; translate: 0;
    background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.58);
    padding: .32em .72em; font-size: .64rem;
  }

  .plan__top {
    min-height: 13.25rem; padding: clamp(1.7rem, 3vw, 2.25rem);
    background: #202B3B; color: #fff;
  }
  .plan--best .plan__top { background: linear-gradient(135deg, #F07A2F, var(--gold)); }
  .plan__duration { color: rgba(255,255,255,.7); }
  .plan--best .plan__duration { color: rgba(255,255,255,.78); }
  .plan h3 { margin-top: .55rem; color: #fff; font-size: 1.3rem; letter-spacing: -.01em; }
  .plan .amt,
  .plan--best .amt {
    margin: 1.2rem 0 0; padding: 0; border: 0; color: #fff;
  }
  .plan .amt b,
  .plan--best .amt b { color: #fff; font-size: clamp(2.65rem, 4vw, 3.65rem); }
  .plan .cur,
  .plan .amt span.per,
  .plan--best .cur,
  .plan--best .amt span.per { color: rgba(255,255,255,.8); }
  .plan__total { margin: .4rem 0 0; color: rgba(255,255,255,.9); font-size: .82rem; }

  .plan__body {
    flex: 1; display: flex; flex-direction: column;
    padding: clamp(1.6rem, 3vw, 2.15rem);
  }
  .plan p.who,
  .plan--best p.who { min-height: 4.6em; margin: 0; color: var(--muted); }
  .plan .plan__features {
    margin: 1.5rem 0 2rem; display: grid; gap: .85rem; color: #343A43; font-size: .9rem;
  }
  .plan .plan__features li {
    position: relative; display: block; padding-inline-start: 1.75rem;
  }
  .plan .plan__features li::before {
    content: "✓"; position: absolute; left: 0; top: .02rem;
    display: grid; place-items: center; width: 1.15rem; height: 1.15rem;
    border: 1.5px solid #8B949F; border-radius: 50%; color: var(--ink);
    font-size: .68rem; font-weight: 800; line-height: 1;
  }
  .plan .btn { width: 100%; margin-top: auto; border-radius: var(--r-pill); }
  .plan:not(.plan--best) .btn {
    background: #EEF1F5; color: var(--navy-900); box-shadow: none;
  }
  .plan:not(.plan--best) .btn:hover { background: #E1E6EC; }
  .plan--best .btn { background: var(--gold); color: var(--navy-950); }
  .plan--best .btn:hover { background: #FF7620; }

  @media (min-width: 50rem) {
    .plans { grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
    .plan--best { transform: translateY(-.75rem); }
    .plan--best:hover { transform: translateY(calc(-.75rem - 5px)); }
  }

  .plans__included-text {
    margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem;
    border-top: 1px solid #D8DCE1; color: var(--muted); font-size: .9rem;
  }
  .plans__included-text strong { color: var(--ink); }


  /* ---- FAQ (base; the numbered treatment below extends this) ---- */
  .faq details { border-bottom: 1px solid var(--rule); }
  .faq details:last-child { border-bottom: 0; }
  .faq summary {
    cursor: pointer; list-style: none;
    align-items: center; gap: 1rem;
    font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600; color: var(--ink);
    transition: color .2s var(--ease);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--gold-dk); }
  /* Plus that rotates into a cross. */
  .faq summary::after {
    content: ""; flex-shrink: 0; justify-self: end;
    width: 16px; height: 16px;
    background:
      linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
    color: var(--gold-dk);
    transition: transform .3s var(--ease);
  }
  .faq details[open] summary::after { transform: rotate(135deg); }
  /* Animated open via grid rows, so the answer slides rather than snaps. */
  .faq details > div {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--ease);
  }
  .faq details[open] > div { grid-template-rows: 1fr; }
  .faq details > div > p { overflow: hidden; color: var(--muted); }
  .faq details[open] > div > p { padding-bottom: 1.3rem; }
  @media (prefers-reduced-motion: reduce) { .faq details > div { transition: none; } }

  /* No 01/02/03 markers: these are five independent questions, not a sequence,
     so a counter would decorate rather than inform. The questions carry
     themselves. */
  .faq { border-top: 1px solid var(--rule); }
  .faq summary {
    display: grid; grid-template-columns: minmax(0,1fr) 1.2rem;
    padding: 1.6rem 0; min-height: 74px; font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  }
  .faq details > div > p { max-width: 58ch; }



  .foot {
    background: var(--navy-900); color: #AFAFAF;
    border-top: 0; padding-block: clamp(3.5rem, 7vw, 5.5rem) 1.5rem;
  }
  .foot__mark,
  .foot__group > p { color: #fff; }
  .foot__brand > p,
  .foot__group > span { color: #AFAFAF; }
  .foot__contact { color: #8DD6AD; }
  .foot a:hover { color: #fff; }
  .foot__bottom { border-top-color: rgba(255,255,255,.14); color: #8E8E8E; }

  /* ---- Tours page ---- */
  .tour-hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: clamp(31rem, 72svh, 46rem); display: grid; align-items: end;
    padding-block: clamp(4rem, 9vw, 6.5rem); color: #fff;
  }
  .tour-hero > img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover; object-position: 54% 53%;
  }
  .tour-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(25,17,12,.82) 0%, rgba(25,17,12,.52) 46%, rgba(25,17,12,.12) 78%);
  }
  .tour-hero h1 {
    max-width: 11ch; margin-top: 1rem; color: #fff;
    font-size: clamp(2.75rem, 1.4rem + 5vw, 5.25rem); line-height: 1.01; letter-spacing: -.045em;
  }
  .tour-hero .shell > p:not(.hero__eyebrow) { max-width: 39ch; margin-top: 1.25rem; color: #EFEFEF; }
  /* .tour-hero .btn--gold is handled with .hero .btn--gold above. */

  .tour-opening__grid { display: grid; gap: 1.5rem clamp(3rem, 9vw, 8rem); align-items: start; }
  @media (min-width: 52rem) { .tour-opening__grid { grid-template-columns: .55fr 1.45fr; } }
  .tour-opening h2 { max-width: 15ch; }
  .tour-opening h2 + p { max-width: 54ch; margin-top: 1.2rem; color: var(--muted); font-size: 1.08rem; }

  .tour-list__head { max-width: 42rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
  .tour-list__head h2 { margin-top: .7rem; }
  .tour-story {
    display: grid; gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
    padding-block: clamp(2.75rem, 6vw, 5rem); border-top: 1px solid var(--rule);
    scroll-margin-top: 7rem;
  }
  @media (min-width: 54rem) {
    .tour-story { grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr); }
    .tour-story--reverse .tour-story__media { order: 2; }
    .tour-story--reverse { grid-template-columns: minmax(18rem, .88fr) minmax(0, 1.12fr); }
  }
  .tour-story__media { overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-1); }
  .tour-story__media img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  }
  .tour-story__number { color: var(--gold-dk); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .tour-story h2 { margin-top: .75rem; }
  .tour-story__facts { margin-top: .75rem; color: var(--ink); font-weight: 700; font-size: .9rem; }
  .tour-story__facts + p { max-width: 44ch; margin-top: 1rem; color: var(--muted); }
  .tour-story .btn { margin-top: 1.6rem; }

  .tour-how__head { max-width: 34rem; }
  .tour-how__head h2 { margin-top: .7rem; }
  /* Two-column stagger, not a third identical 3-up row. The second column drops
     to create a reading rhythm instead of three equal blocks. */
  .tour-how__steps { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
  @media (min-width: 48rem) {
    .tour-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(3rem, 7vw, 6rem); }
    .tour-how__steps li:nth-child(even) { margin-top: 3.25rem; }
  }
  .tour-how__steps li { padding-top: 1.35rem; border-top: 2px solid var(--ink); }
  .tour-how__steps li > span { color: var(--gold-dk); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
  .tour-how__steps h3 { margin-top: 1.2rem; font-size: 1.18rem; }
  .tour-how__steps p { margin-top: .65rem; color: var(--muted); max-width: 30ch; }

  .tour-cta {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: clamp(24rem, 48svh, 32rem); display: grid; align-items: center; color: #fff;
  }
  .tour-cta > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
  .tour-cta::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(25,17,12,.80), rgba(25,17,12,.42) 54%, rgba(25,17,12,.10));
  }
  .tour-cta h2 { max-width: 13ch; margin-top: .7rem; color: #fff; }
  .tour-cta .eyebrow { color: var(--gold-light); }
  .tour-cta .shell > p:not(.eyebrow) { max-width: 40ch; margin-top: 1rem; color: #EFEFEF; }
  .tour-cta .btn { margin-top: 1.7rem; }

  /* ---- Language select ---- */
  .lang { position: relative; display: flex; }
  .lang select {
    appearance: none; -webkit-appearance: none;
    min-height: 46px; padding: 0 2rem 0 .85rem;
    background: rgba(255,255,255,.55); border: 1.5px solid var(--rule); border-radius: var(--r-sm);
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: .93rem; font-weight: 700; line-height: 1; color: var(--ink); cursor: pointer;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
  }
  .lang select:hover { border-color: #C4C4C4; background: var(--surface); }
  .lang::after {
    content: ""; position: absolute; inset-inline-end: .8rem; inset-block-start: 50%;
    width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
    border-right: 2px solid var(--gold-dk); border-bottom: 2px solid var(--gold-dk);
    transform: rotate(45deg);
  }
  @media (max-width: 60rem) { .lang select { padding-inline: .55rem 1.7rem; } }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* ---- Floating contact ---- */
  /* One floating element, on every breakpoint. Replaces the old mobile-only
     Reserve dock: two competing fixed items in the same corner was the bug. */
  .contact-fab {
    position: fixed; z-index: var(--z-dock);
    inset-block-end: calc(1rem + env(safe-area-inset-bottom));
    inset-inline-end: clamp(1rem, 3vw, 2rem);
    display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
  }

  .contact-fab__btn {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 52px; padding: 0 1.35rem;
    background: var(--wa); color: #fff;
    border: 0; border-radius: var(--r-pill); cursor: pointer;
    font-weight: 700; font-size: .95rem; letter-spacing: .01em;
    box-shadow: 0 10px 28px rgba(16,95,57,.34);
    transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .contact-fab__btn:hover { background: var(--wa-dark); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16,95,57,.4); }
  .contact-fab__btn:active { transform: translateY(0); }
  .contact-fab__btn-icon { display: inline-flex; }
  .contact-fab__btn-icon svg { width: 1.35rem; height: 1.35rem; }
  /* Icon swaps with the expanded state; the label hides so the button
     collapses to a tidy circle once the panel is open. */
  .contact-fab__btn-icon--close { display: none; }
  .contact-fab__btn[aria-expanded="true"] .contact-fab__btn-icon--open { display: none; }
  .contact-fab__btn[aria-expanded="true"] .contact-fab__btn-icon--close { display: inline-flex; }
  .contact-fab__btn[aria-expanded="true"] { padding-inline: .95rem; }
  .contact-fab__btn[aria-expanded="true"] .contact-fab__btn-label { display: none; }

  .contact-fab__panel {
    width: min(20.5rem, calc(100vw - 2rem));
    background: #fff; color: var(--ink);
    border: 1px solid var(--rule); border-radius: var(--r-lg);
    box-shadow: var(--sh-3); overflow: hidden;
    transform-origin: bottom right;
  }
  .contact-fab__panel[hidden] { display: none; }
  .contact-fab__head { padding: 1.1rem 1.15rem .9rem; border-bottom: 1px solid var(--rule); }
  .contact-fab__title {
    font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em;
  }
  .contact-fab__sub { margin-top: .25rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }

  .contact-fab__row {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: .9rem 1.15rem; min-height: 56px;
    border-bottom: 1px solid var(--rule);
    text-decoration: none; color: var(--ink);
    transition: background-color .18s var(--ease);
  }
  .contact-fab__row:hover { background: var(--surface); }
  .contact-fab__row b {
    display: block; font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
    font-size: .95rem; font-weight: 600;
  }
  .contact-fab__row > span:last-child { color: var(--muted); font-size: .8rem; line-height: 1.4; }
  .contact-fab__icon {
    flex-shrink: 0; display: grid; place-items: center;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: var(--surface); color: var(--ink);
  }
  .contact-fab__icon svg { width: 1.1rem; height: 1.1rem; }
  .contact-fab__row--wa .contact-fab__icon { background: rgba(22,122,74,.12); color: var(--wa-dark); }
  .contact-fab__foot {
    padding: .8rem 1.15rem; color: var(--muted); font-size: .74rem;
    letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  }

  /* Never sit on top of the footer's last row. */
  .foot { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  /* The review dialog owns the screen while it is open. */
  body.modal-open .contact-fab { opacity: 0; pointer-events: none; }

  /* Placeholder values render as normal text — no highlighting. */

  /* ── Splash ───────────────────────────────────────────────────────────
     First-visit loader: full-screen ground, wordmark only, no logo.

     Three rules keep it from harming the metrics it is meant to dress up:

     1. It is an OVERLAY, not a gate. The document underneath parses and
        paints normally — no body{opacity:0}, no visibility:hidden. The
        browser still measures the hero as LCP, and crawlers get the full
        page. A loader that hides content is the classic way to wreck LCP.
     2. Nothing here loads over the network. It is type on a background
        colour, so it can paint on the very first frame — the whole point
        of a loading screen is that it is already there.
     3. It cannot outlive its welcome: JS dismisses it at 2.5s max, and
        the CSS below has its own independent auto-dismiss so a JS error
        or a blocked script can never leave a visitor staring at it. */
  .splash {
    position: fixed; inset: 0; z-index: var(--z-splash);
    display: grid; place-items: center;
    background: var(--navy-900);
    /* Matches <meta name="theme-color">, so the browser chrome and the
       splash agree and there is no seam between them. */
  }
  .splash[hidden] { display: none; }

  /* Full width, minus the gutter: the type below is sized so the wordmark
     fits one line where there is room and breaks naturally where there
     isn't. Constraining the measure here instead just forces a ragged
     three-line wrap on every screen. */
  .splash__inner { padding: var(--gutter); max-width: 100%; }

  .splash__word {
    font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    /* Scales with the viewport so it reads as a full-screen statement on a
       phone and on a desktop alike, rather than small type adrift in black.
       5.2vw keeps "Ceylon Rides Club" on ONE line from ~430px up, and lets
       it break to two lines below that rather than overflowing. */
    font-size: clamp(1.35rem, 5.2vw, 3.4rem);
    line-height: 1.1; letter-spacing: -.02em;
    text-align: center; text-wrap: balance; color: #fff;
  }
  /* Below ~360px there is no size that keeps the wordmark on one line and
     still reads as a splash, so let it break to two rather than clip. */
  @media (max-width: 22.5rem) {
    .splash__word { font-size: 1.7rem; }
  }
  /* Exit. .is-done is set by JS; the element is removed from the DOM when
     this finishes, so it never lingers as a hit-testing ghost. */
  .splash.is-done { opacity: 0; transition: opacity .42s var(--ease); pointer-events: none; }

  @media (prefers-reduced-motion: no-preference) {
    .splash__word { animation: splash-word-in .55s var(--ease) both; }
    .splash.is-done { transition: opacity .42s var(--ease), scale .42s var(--ease); scale: 1.02; }
    @keyframes splash-word-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  }

  /* Failsafe. Independent of JS entirely: if the script never runs — error,
     CSP, blocked file — the splash still clears itself and the page is
     usable. Runs slightly after the JS timeout so JS wins in the normal case. */
  .splash { animation: splash-failsafe 0s linear 3.2s forwards; }
  @keyframes splash-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .hero__img { animation: hero-image-in 1.5s var(--ease) both; }
    .lift > * { animation: lift .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
    @keyframes hero-image-in { from { opacity: .7; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
    @keyframes lift { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    .reveal { animation: lift .55s var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 32%; }

    /* Scroll-driven, so it needs no JS and cannot leave content stuck hidden:
       where animation-timeline is unsupported the element simply renders. */
    @supports (animation-timeline: view()) {
      .rise {
        animation: rise .6s var(--ease) both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
      }
      /* The recommended card settles last, so the eye lands on it. */
      .plans .plan { --rise-delay: 0ms; }
      .plans .plan--best { animation-duration: .72s; }
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(26px) scale(.985); }
      to   { opacity: 1; transform: none; }
    }

    /* Answers slide rather than snap; pairs with the grid-rows transition. */
    .faq details[open] > div > p { animation: fade-in .34s var(--ease) both; }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  }
}