/* Cardel Ride of a Lifetime 2026 theme.
   Design system carried over from the approved comp (design-comps/site/shell.css).
   The WordPress integration layer is at the bottom of this file. */
:root {
    --navy: #0F213E;
    --navy-deep: #0B1830;
    --red: #BC212D;
    --red-hover: #9B1822;
    --teal: #2BADB8;
    --teal-text: #0E6F77;
    --teal-bright: #7FE1E8; /* AA on navy */
    --bg: #FAFAF7;
    --surface: #FFFFFF;
    --ink: #1a1a1a;
    --muted: #4B5563;
    --hairline-dark: rgba(255,255,255,.14);
    --display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --body: "Inter", system-ui, sans-serif;
    /* 110deg so the stripe bands sit at 20deg from vertical, the same angle as the
       hero flag edges and .slash i. Bands run perpendicular to the gradient line. */
    --pinstripe: repeating-linear-gradient(110deg, transparent 0 26px, rgba(255,255,255,.05) 26px 27px);
    --timer-h: 74px; /* content clearance for the fixed cart timer bar */

    /* LEGACY TOKEN ALIASES. Rules carried over from the previous theme (cookie banner,
       lightbox, gallery grid) still reference its --cardel-* names. Replacing the token
       layer left those resolving to nothing, which is why the cookie banner rendered
       with NO background and the expanded preferences panel showed the page through it.
       Mapped onto the 2026 palette so the old rules keep working unchanged. */
    --cardel-primary:      var(--navy);
    --cardel-primary-soft: #1B3257;
    --cardel-accent:       var(--red);
    --cardel-accent-hover: var(--red-hover);
    --cardel-accent-soft:  rgba(188, 33, 45, .1);
    --cardel-teal:         var(--teal);
    --cardel-teal-hover:   #228E97;
    --cardel-teal-soft:    rgba(43, 173, 184, .12);
    --cardel-teal-text:    var(--teal-text);
    --cardel-bg:           var(--bg);
    --cardel-surface:      var(--surface);
    --cardel-text:         var(--ink);
    --cardel-muted:        var(--muted);
    --cardel-border:       #E8E5E0;
    --cardel-radius:       10px;
    --cardel-shadow-sm:    0 1px 2px rgba(15, 23, 42, .04);
    --cardel-shadow-md:    0 8px 24px rgba(15, 23, 42, .08);
    --cardel-shadow-lg:    0 24px 60px rgba(15, 23, 42, .12);
  }
  * { box-sizing: border-box; margin: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: var(--body); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.55; }
  img { max-width: 100%; display: block; }
  a { color: var(--teal-text); }
  h1, h2, h3 { font-family: var(--display); font-style: italic; text-transform: uppercase; line-height: 1.02; color: var(--navy); letter-spacing: .005em; }
  :focus-visible { outline: 3px solid var(--teal-text); outline-offset: 2px; border-radius: 2px; }
  .on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--teal-bright); }
  .skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 18px; z-index: 200; }
  .skip:focus { left: 12px; top: 12px; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

  /* ===== Header (06: slim, logo, menu, CTA always visible) ===== */
  .site-header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 3px solid var(--teal); }
  .site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 66px; }
  .logo img { height: 44px; width: auto; }
  .nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
  .nav a { font-weight: 600; font-size: 14.5px; color: var(--navy); text-decoration: none; padding: 12px 12px; border-radius: 6px; }
  .nav a:hover { background: #EEF6F7; color: var(--teal-text); }
  .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; cursor: pointer; border: 0; }
  /* Square by choice: the angled cut was removed. The size variants stay so button
     sizing is never set with an inline style. */
  .btn-book { background: var(--red); color: #fff; font-size: 18px; padding: 12px 26px;
    transition: background 160ms ease, transform 160ms ease; }
  .btn-book--lg { font-size: 22px; padding: 16px 40px; }
  .btn-book--sm { font-size: 16px; padding: 9px 22px; }
  .btn-book:hover { background: var(--red-hover); transform: translateY(-1px); }
  .btn-book:active { transform: translateY(0); }
  .menu-toggle { display: none; }

  /* ===== Cart status strip (live-site feature, incorporated) ===== */
  .cart-strip-row { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: flex-end; pointer-events: none; }
  .cart-strip { background: var(--navy); color: #fff; display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; padding: 9px 22px 9px 26px; clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%); pointer-events: auto; }
  .cart-strip svg { width: 18px; height: 18px; flex: none; }
  .cart-strip a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  .cart-strip a:hover { color: var(--teal-bright); }

  /* Ride-week pricing strip (header.php). Sits above the sticky header and scrolls
     away with the page. White on red is 5.9:1; the link keeps white on hover and
     thickens its underline instead of changing colour. The link's negative vertical
     margins give it a 44px tap target without growing the bar. */
  .promo-bar { background: var(--red); color: #fff; }
  .promo-bar .wrap { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .promo-bar p { margin: 0; padding: 8px 0; text-align: center; font-size: 14.5px; line-height: 1.45; }
  .promo-bar strong { font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 16px; margin-right: 6px; }
  .promo-bar a { display: inline-block; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin: -12px 0 -12px 8px; padding: 12px 4px; }
  .promo-bar a:hover { text-decoration-thickness: 2px; }

  /* ===== Hero: full-bleed faded gallery under the header (live-site treatment) ===== */
  /* 650px cap so the stats band ("Every lap matters") breaks the fold on a normal
     desktop window instead of sitting entirely below it. Hero content measures 529px,
     so .hero-inner padding had to come down from 160px total to 104px to fit inside. */
  .hero { position: relative; overflow: hidden; background: var(--surface); min-height: min(calc(100dvh - 66px), 650px); display: flex; align-items: center; }
  /* .hero is a <section>, so it was silently picking up the global `section { padding: 72px 0 }`
     and running 144px taller than its min-height. Interior pages keep that padding, hence :not(). */
  .hero:not(.page-hero) { padding: 0; }
  .hero-gallery { position: absolute; inset: 0; z-index: 0; }
  .hero-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
  .hero-gallery img:first-child { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .hero-gallery img { animation: heroFade 18s infinite; }
    .hero-gallery img:nth-child(1) { animation-delay: 0s; }
    .hero-gallery img:nth-child(2) { animation-delay: 6s; }
    .hero-gallery img:nth-child(3) { animation-delay: 12s; }
    @keyframes heroFade { 0% {opacity:0;} 5% {opacity:1;} 33.3% {opacity:1;} 41% {opacity:0;} 100% {opacity:0;} }
  }
  /* Interior heroes keep the original flat wash. */
  .hero-scrim { position: absolute; inset: 0; z-index: 1; background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.55) 58%, rgba(255,255,255,.18) 100%),
    linear-gradient(0deg, rgba(255,255,255,.35), rgba(255,255,255,.35)); }
  /* Home hero: single horizontal fade, no flat wash. The old second layer added 35% white
     across the WHOLE hero, so even at the right edge the photo sat under ~47% white and was
     never full colour. Now it holds ~0.92 behind the copy (which ends near 50% of a 1440px
     window) and reaches 0 by 88%, so the right side of the car is fully saturated. */
  .hero:not(.page-hero) .hero-scrim {
    /* Where .hero-copy actually ends. Percentage stops do NOT work here: the copy column is a
       fixed 620px but the gradient is viewport-relative, so on a 1024px window the text ran out
       into the transparent zone and teal fell to 1.7:1. Above 1240px the wrap centres, so the
       copy edge is 50vw + 24px; below that the wrap is flush left, so it is a flat 644px. */
    --copy-edge: max(644px, calc(50vw + 24px));
    background: linear-gradient(90deg,
      rgba(255,255,255,.96) 0,
      rgba(255,255,255,.90) var(--copy-edge),
      rgba(255,255,255,.50) calc(var(--copy-edge) + 160px),
      rgba(255,255,255,.14) calc(var(--copy-edge) + 300px),
      rgba(255,255,255,0)   calc(var(--copy-edge) + 400px)); }
  /* longhand: these elements also carry .wrap, and a padding shorthand would reset its
     24px side padding to 0, putting text flush against the screen edge on mobile. */
  .hero-inner { width: 100%; padding-top: 40px; padding-bottom: 64px; position: relative; z-index: 2; }
  /* Hero video sits beside the copy from 1024 up; below that it stacks under it.
     The copy keeps its own max-width, so the split never squeezes the headline. */
  @media (min-width: 1024px) {
    /* Card caps at 520 on a wide screen but gives width back near the 1024
       breakpoint, so the headline column is never squeezed under ~500px. */
    .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, min(520px, 44%)); align-items: center; gap: 40px; }
  }
  .hero-video { margin-top: 32px; }
  @media (min-width: 1024px) { .hero-video { margin-top: 0; } }
  /* The whole poster is the button. Navy ground + red cap ties it to the count
     tiles, so the hero gains a card rather than a foreign widget. */
  .video-card { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
    border-top: 4px solid var(--red); background: var(--navy); cursor: pointer; overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 33, 62, .28); }
  /* Full strength: the poster is the video's own branded thumbnail, not a stock photo to tint. */
  .video-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Just enough shade at the foot to hold the label, not a wash over the image. */
  .video-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,33,62,.62), rgba(15,33,62,0) 34%); }
  .video-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
    width: 72px; height: 72px; border-radius: 50%; background: var(--red); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(15, 33, 62, .4); transition: transform 200ms ease-out, background-color 200ms ease-out; }
  .video-card__play svg { width: 34px; height: 34px; margin-left: 3px; }
  .video-card__label { position: absolute; left: 18px; bottom: 15px; z-index: 1; font-family: var(--display);
    font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: #fff; }
  .video-card:hover .video-card__play,
  .video-card:focus-visible .video-card__play { transform: translate(-50%, -50%) scale(1.08); background: var(--red-hover); }
  .video-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  .video-card:active .video-card__play { transform: translate(-50%, -50%) scale(.98); }
  .hero-copy { max-width: 620px; }
  .hero-copy h1 { font-size: clamp(46px, 5.4vw, 76px); font-weight: 800; }
  .hero-copy h1 .accent { color: var(--red); }
  .hero-tag { font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; color: var(--teal-text); font-size: clamp(18px, 1.6vw, 22px); margin: 10px 0 14px; letter-spacing: .03em; }
  .hero-copy p.lede { color: var(--muted); max-width: 46ch; }
  .hero-meta { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 20px; font-weight: 700; font-size: 14.5px; color: var(--navy); }
  .hero-meta span { position: relative; padding-left: 16px; }
  .hero-meta span::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 6px; background: var(--red); transform: skewX(-12deg); }
  .hero-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .hero-cta-row .free { font-size: 14px; color: var(--muted); }
  .hero-cta-row .free strong { color: var(--teal-text); }
  .price-anchor { font-size: 13.5px; font-weight: 600; color: var(--navy); background: #EEF6F7; padding: 4px 10px; border-radius: 999px; }
  /* Countdown (05: navy tiles, red top bar) */
  .count { margin-top: 26px; }
  .count-label { font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .06em; color: var(--navy); margin-bottom: 8px; }
  .count-tiles { display: flex; gap: 10px; }
  /* Event-day panel. Same navy block and red cap as the tiles, so the hero
     does not change character when the clock runs out. */
  .count [hidden] { display: none; }
  .count-now { display: flex; flex-direction: column; gap: 6px; max-width: 52ch; background: var(--navy); color: #fff; border-top: 4px solid var(--red); padding: 14px 20px 16px; }
  .count-now b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 26px; line-height: 1.08; }
  .count-now span { font-size: 13.5px; line-height: 1.5; color: var(--teal-bright); }
  .tile { background: var(--navy); color: #fff; border-top: 4px solid var(--red); padding: 8px 12px 7px; min-width: 74px; text-align: center; }
  .tile b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 30px; display: block; line-height: 1; font-variant-numeric: tabular-nums; }
  .tile small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--teal-bright); }
  /* Tri-color diagonal flag, following the live site's .cardel-hero__accent so the
     color proportions match (stops at 18/46/62%). The navy run is solid: the pinstripe
     overlay that used to sit on it was removed by request. */
  /* All the diagonals here sit at 20deg from vertical, the same angle as .slash i,
     .stats .rule and the car price tags, so the flag reads as the same language.
     The outer edge offset is height x tan(20deg) = 48 x 0.364 = 17px. The color
     bands are a 110deg gradient because bands run perpendicular to the gradient
     line, and 110 - 90 = 20. The mask uses 110deg for the same reason, so the
     pinstripe stops exactly on the navy-to-red boundary.
     clip-path, not transform: transform breaks the background-attachment: fixed
     that keeps the pinstripe aligned with the stats band below. */
  .hero-flag { position: absolute; right: -64px; bottom: 0; z-index: 2; width: min(62vw, 940px); height: 48px; pointer-events: none;
    clip-path: polygon(17px 0, 100% 0, calc(100% - 17px) 100%, 0 100%);
    background: linear-gradient(110deg,
      transparent 0, transparent 18%,
      var(--navy) 18%, var(--navy) 46%,
      var(--red) 46%, var(--red) 62%,
      var(--teal) 62%, var(--teal) 100%); }

  /* ===== Stats band (05 pinstripe + bold; 14 clean; above/at fold) ===== */
  .stats { background-color: var(--navy); background-image: var(--pinstripe); background-attachment: fixed; color: #fff; padding: 44px 0 40px; position: relative; z-index: 3; }
  .stats h2 { color: #fff; font-size: clamp(30px, 3vw, 42px); font-weight: 800; }
  .stats .rule { width: 76px; height: 6px; background: var(--red); transform: skewX(-20deg); margin: 10px 0 26px; }
  .stats-kicker { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-bright); font-weight: 700; }
  .stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
  .stat { padding: 6px 18px; border-left: 1px solid var(--hairline-dark); }
  .stat:first-child { border-left: 0; padding-left: 0; }
  .stat b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(26px, 2.4vw, 38px); display: block; line-height: 1.05; font-variant-numeric: tabular-nums; }
  .stat span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-bright); font-weight: 600; display: block; margin-top: 4px; }

  /* ===== Section furniture: 08's red double-slash mark (the ONLY header motif) ===== */
  section { padding: 72px 0; }
  /* Section mark: the same three colors in the same order and relative widths as
     .hero-flag (navy, then red, then teal), so the mark reads as a slice of the flag. */
  .slash { display: inline-block; margin-bottom: 6px; }
  .slash i { display: inline-block; height: 22px; transform: skewX(-20deg); margin-right: 5px; }
  .slash i:nth-child(1) { width: 16px; background: var(--navy); }
  .slash i:nth-child(2) { width: 9px;  background: var(--red); }
  .slash i:nth-child(3) { width: 15px; background: var(--teal); }
  /* on navy, swap the navy bar for white so all three stay visible */
  .on-dark .slash i:nth-child(1) { background: #fff; }
  .sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
  .sec-head h2 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; }
  .sec-head .more { font-weight: 700; font-size: 15px; }

  /* ===== Featured supercars (08: first card double, big images, navy CTA tile) ===== */
  .steps-strip { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
  .step { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid #E5E7EB; padding: 10px 16px; font-weight: 600; font-size: 14.5px; color: var(--navy); }
  .step em { font-family: var(--display); font-style: italic; font-weight: 800; color: #fff; background: var(--teal-text); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
  /* Cards are flex columns: the photo flexes to fill, so a short card in a tall
     grid row grows its image instead of leaving dead white space. The wide card's
     fixed aspect ratio sets the row height. Body copy gets real padding. */
  .car-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .car { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid #EAE6DF; }
  .car--wide { grid-column: span 2; grid-row: span 1; }
  .car img { width: 100%; object-fit: cover; flex: 1 1 auto; min-height: 230px; max-height: 500px; }
  .car--wide img { aspect-ratio: 21/10; flex: 0 0 auto; min-height: 0; }
  .car .tag { position: absolute; top: 0; left: 0; z-index: 2; background: var(--red); color: #fff; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 16px; padding: 7px 18px 7px 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
  .car-body { padding: 16px 20px 20px; }
  .car h3 { font-size: 26px; font-weight: 800; }
  .car .driver { color: var(--muted); font-size: 14px; margin-top: 2px; }
  .car .avail { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; background: #EEF6F7; color: var(--teal-text); }
  .car .avail.low { background: #FBE9EA; color: var(--red-hover); }
  .photo-needed { position: relative; flex: 1 1 auto; min-height: 230px; border: 2px dashed #C9BFB4; background: #F6F4F0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px; }
  .photo-needed b { font-family: var(--display); font-style: italic; font-weight: 700; color: var(--navy); font-size: 17px; }
  .photo-needed span { font-size: 12.5px; color: var(--muted); max-width: 30ch; }
  .cta-tile { grid-column: span 2; background: var(--navy); background-image: var(--pinstripe); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 30px 22px; min-height: 240px; }
  .cta-tile b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 30px; line-height: 1.06; }
  .cta-tile a { color: var(--teal-bright); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }

  /* ===== Day of Event: ONE schedule of record (06 teal timeline) ===== */
  .day { background: var(--surface); }
  .timeline { position: relative; margin-top: 8px; display: grid; gap: 0; }
  .slot-row { display: grid; grid-template-columns: 150px 26px 1fr; gap: 18px; padding: 22px 0; }
  .slot-row + .slot-row { border-top: 1px solid #E9E7E1; }
  .slot-time { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 26px; color: var(--red); line-height: 1.1; }
  .slot-time small { display: block; font-family: var(--body); font-style: normal; font-weight: 600; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
  .slot-dot { position: relative; }
  .slot-dot::before { content: ""; position: absolute; top: 6px; left: 8px; width: 12px; height: 12px; background: var(--teal); border-radius: 50%; }
  .slot-dot::after { content: ""; position: absolute; top: 24px; bottom: -24px; left: 13px; width: 2px; background: #D9E8EA; }
  .slot-row:last-child .slot-dot::after { display: none; }
  .slot-body h3 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
  .slot-body p { color: var(--muted); max-width: 66ch; }
  .slot-body .first { color: var(--teal-text); font-weight: 600; }

  /* ===== Charity (real-asset slots) ===== */
  .charity { background: linear-gradient(180deg, #FDF6F0 0%, var(--bg) 100%); }
  .charity-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 44px; align-items: center; }
  .charity h2 { font-size: clamp(34px, 3.6vw, 50px); }
  .charity p.big { font-size: 18px; max-width: 54ch; margin: 14px 0; }
  .quote { border-top: 3px solid var(--teal); padding-top: 14px; margin: 22px 0; max-width: 52ch; }
  .quote p { font-size: 17px; font-style: italic; color: var(--navy); }
  .quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: 14px; color: var(--muted); }
  .asset-slot { position: relative; border: 2px dashed #C9BFB4; padding: 6px; }
  .asset-slot .note { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; }
  .charity-media img { width: 100%; height: 380px; object-fit: cover; }
  .charity .money-line { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-weight: 700; color: var(--navy); }
  .charity .money-line .pct { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 40px; color: var(--red); }

  /* ===== Sponsors on front page (06 wish) ===== */
  /* ===== Sponsors: real tier hierarchy, size descends with tier ===== */
  .sponsors { background: var(--surface); }
  .sponsors p.note { color: var(--muted); font-size: 14.5px; max-width: 70ch; margin-bottom: 30px; }
  .tier-label { display: flex; align-items: center; gap: 14px; margin: 34px 0 16px; }
  .tier-label b { font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); font-size: 17px; white-space: nowrap; }
  .tier-label i { display: block; height: 3px; background: var(--teal); flex: 1; transform: skewX(-30deg); }
  .tier-label .count { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  /* Primary: hero treatment */
  .sponsor-primary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 30px; border: 2px solid var(--navy); background: var(--surface); padding: 30px 34px; margin-top: 6px; }
  .sponsor-primary .badge { display: inline-block; background: var(--red); color: #fff; font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 14px; padding: 5px 16px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
  .sponsor-primary h3 { font-size: 30px; margin: 12px 0 6px; }
  .sponsor-primary p { color: var(--muted); font-size: 14.5px; max-width: 40ch; }
  /* padding:0 is deliberate: the charity page's generic .logo-plate sets 34px, which
     leaked in through the stylesheet merge and made this plate 310px instead of 242px. */
  .sponsor-primary .logo-plate { display: flex; align-items: center; justify-content: center; border: 1px solid #E7E3DC; min-height: 240px; padding: 0; }
  .sponsor-primary .logo-plate img { max-height: 240px; width: auto; object-fit: contain; }
  /* Tier rows: bigger logos, name always visible beneath */
  .sponsor-row { display: grid; gap: 14px; }
  .sponsor-row--aw { grid-template-columns: repeat(4, 1fr); }
  .sponsor-tile { border: 1px solid #E7E3DC; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--surface); padding: 20px 16px; }
  .sponsor-row--aw .sponsor-tile { min-height: 232px; }
  .sponsor-row--aw .sponsor-tile img { max-height: 161px; }
  .sponsor-tile img { width: auto; object-fit: contain; }
  .sponsor-tile .name { font-weight: 700; font-size: 15px; color: var(--navy); text-align: center; line-height: 1.25; }
  .sponsor-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 34px; padding-top: 24px; border-top: 1px solid #E7E3DC; }
  .sponsor-cta p { color: var(--muted); font-size: 14.5px; max-width: 56ch; }
  /* Square, matching .btn-book. The angled cut was removed from both. */
  .btn-invite { background: var(--red); color: #fff; font-size: 17px; padding: 12px 26px; }
  .btn-invite:hover { background: var(--red-hover); }

  /* ===== CTA band + footer ===== */
  .cta-band { background: var(--navy); background-image: var(--pinstripe); color: #fff; text-align: center; padding: 72px 24px; }
  .cta-band h2 { color: #fff; font-size: clamp(34px, 4vw, 54px); font-weight: 800; }
  .cta-band p { color: #C7D2E2; max-width: 56ch; margin: 12px auto 24px; }
  .cta-band .seats { margin-top: 18px; font-family: var(--display); font-style: italic; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-bright); font-size: 15px; }
  footer { background: var(--navy-deep); color: #C7D2E2; padding: 44px 0 28px; font-size: 14px; }
  footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
  footer h3 { color: #fff; font-size: 18px; margin-bottom: 10px; }
  footer a { color: #C7D2E2; text-decoration: none; display: inline-block; padding: 4px 0; }
  footer a:hover { color: var(--teal-bright); }
  footer .thanks { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hairline-dark); text-align: center; color: #fff; font-weight: 600; }
  footer .legal { margin-top: 8px; text-align: center; font-size: 12.5px; color: #8FA0B8; }

  /* ===== Motion ===== */
  @media (prefers-reduced-motion: no-preference) {
    .car, .btn-book, .sponsor-tile.invite { transition: transform 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease; }
    .car:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15,33,62,.14); }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

  /* ===== Mobile ===== */
  /* The nav (7 items + Register for updates) runs out of room well above phone
     width — hand over to the hamburger at 1190px. Layout grids, heroes and the
     rest of the mobile treatment keep their own 960px breakpoint. */
  @media (max-width: 1190px) {
    .nav { display: none; }
    .menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; background: none; border: 2px solid var(--navy); width: 46px; height: 46px; font-size: 20px; color: var(--navy); }
  }
  @media (max-width: 960px) {
    .site-header .btn-book { margin-left: 8px; font-size: 15px; padding: 10px 16px; } /* CTA stays OUTSIDE the menu */
    .hero { min-height: 0; }
    .hero-inner { padding-top: 74px; padding-bottom: 80px; }
    .hero-scrim { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,.6) 100%); }
    .cart-strip-row { padding-left: 0; padding-right: 0; }
    .cart-strip { width: 100%; clip-path: none; justify-content: center; padding: 9px 14px; }
    .hero-flag { width: 88vw; height: 54px; right: -40px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
    .stat { border-left: 0; padding: 6px 10px 6px 0; }
    .car-grid { grid-template-columns: 1fr; }
    .car--wide, .cta-tile { grid-column: auto; }
    /* single column: no stretching, so give every photo the same fixed ratio */
    .car img, .car--wide img { aspect-ratio: 16/10; flex: 0 0 auto; min-height: 0; }
    .photo-needed { min-height: 200px; }
    .charity-grid { grid-template-columns: 1fr; }
    .charity-media img { height: 260px; }
    .sponsor-primary { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
    .sponsor-primary .logo-plate { min-height: 150px; }
    .sponsor-primary .logo-plate img { max-height: 150px; }
    .sponsor-row--aw { grid-template-columns: repeat(2, 1fr); }
    .sponsor-row--aw .sponsor-tile { min-height: 170px; padding: 16px 12px; gap: 10px; }
    .sponsor-row--aw .sponsor-tile img { max-height: 104px; }
    .sponsor-tile .name { font-size: 14px; }
    .sponsor-cta { flex-direction: column; align-items: flex-start; }
    .slot-row { grid-template-columns: 92px 22px 1fr; gap: 10px; }
    .slot-time { font-size: 20px; }
    footer .cols { grid-template-columns: 1fr; }
    .count-tiles { flex-wrap: wrap; }
    .count-now { max-width: none; padding: 13px 16px 15px; }
    .count-now b { font-size: 22px; }
    .tile { min-width: 68px; }
  }


/* ---- page-level additions for interior pages ---- */
.page-hero { position: relative; overflow: hidden; background: var(--surface); min-height: 300px; display: flex; align-items: center; }
.page-hero .hero-gallery img { filter: none; }
.page-hero-inner { width: 100%; padding-top: 54px; padding-bottom: 62px; position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(38px, 4.4vw, 62px); font-weight: 800; max-width: 20ch; }
.page-hero .lede { color: var(--muted); max-width: 58ch; margin-top: 14px; font-size: 17px; }
.crumbs { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.crumbs a { color: var(--teal-text); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.prose { max-width: 68ch; }
.prose p { margin-bottom: 16px; color: #23303f; }
.prose h3 { font-size: 26px; margin: 30px 0 10px; }
.prose ul { margin: 0 0 16px 20px; }
.prose li { margin-bottom: 8px; }
.panel { background: var(--surface); border: 1px solid #EAE6DF; padding: 26px 28px; }
.two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 960px) {
  .two-col, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .page-hero-inner { padding-top: 34px; padding-bottom: 40px; }
}

/* current-page indicator in the primary nav (used by every interior page) */
.nav a[aria-current="page"] { background: #EEF6F7; color: var(--teal-text); }

/* ===== Register-for-updates modal (Pardot iframe, native <dialog>) ===== */
/* position/margin restated because the theme's element reset strips the UA's
   native <dialog> centering. */
.cardel-register { position: fixed; inset: 0; margin: auto; height: fit-content; border: 0; padding: 0; background: transparent; width: min(560px, calc(100vw - 32px)); }
.cardel-register::backdrop { background: rgba(15, 33, 62, .72); }
/* NAVY panel on purpose: the Pardot form template is styled white-on-transparent
   (matching the old site's navy modal) — on a white panel every field and label
   is invisible. */
.cardel-register__panel { background: var(--navy); border-top: 4px solid var(--teal); box-shadow: 0 24px 60px rgba(15, 33, 62, .35); }
.cardel-register__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--navy); }
.cardel-register__head h2 { color: #fff; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 22px; margin: 0; }
.cardel-register__close { background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }
.cardel-register__close:hover { color: var(--teal-bright); }
.cardel-register__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cardel-register iframe { display: block; width: 100%; height: min(640px, calc(100vh - 170px)); border: 0; background: transparent; }

/* clip-path crops outlines, so the still-skewed controls need an INSET focus ring */
.sponsor-tile.invite:focus-visible,
.cart-strip a:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
/* .btn-invite is square now, like .btn-book, so a normal outward ring works */
.btn-invite:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.on-dark .btn-invite:focus-visible { outline-color: #fff; }
/* .btn-book is square now, so a normal outward ring works and is far easier to see */
.btn-book:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.on-dark .btn-book:focus-visible, .timer-bar .btn-book:focus-visible { outline-color: #fff; }

/* Interior pages use a SINGLE hero photo. The 3-frame heroFade cycle would leave a
   lone image hidden ~60% of the time, so single-image galleries stay static. */
.hero-gallery img:only-child,
.page-hero .hero-gallery img { animation: none !important; opacity: 1 !important; }

  /* ============================================================
     BOOKING FLOW (steps 1-5). Same language as comp-61:
     square corners, 1px #EAE6DF hairlines, navy display italic.
     ============================================================ */

  /* --- Slim flow header (replaces the photo hero inside checkout) --- */
  /* padding:0 overrides the global `section { padding: 72px 0 }`; the band sets its own via .wrap */
  .flow-top { background: var(--navy); color: #fff; position: relative; overflow: hidden; padding: 0; }
  .flow-top::before { content:""; position:absolute; inset:0; background-image: var(--pinstripe); background-attachment: fixed; pointer-events:none; }
  .flow-top .wrap { position: relative; padding-top: 26px; padding-bottom: 26px; }
  .flow-top h1 { color: #fff; font-size: clamp(30px, 4vw, 46px); }
  .flow-top .crumbs, .flow-top .crumbs a { color: #C7D3E4; }
  .flow-top .crumbs a:hover { color: var(--teal-bright); }
  .flow-back { display: inline-flex; align-items: center; gap: 7px; color: var(--teal-bright); font-weight: 600; font-size: 14.5px; text-decoration: none; margin-bottom: 10px; }
  .flow-back:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* --- 5-step progress indicator --- */
  .stepper { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
  .stepper li { flex: 1 1 130px; min-width: 118px; }
  .stepper > li > a, .stepper > li > span { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; text-decoration: none;
    color: #9FB2CC; background: rgba(255,255,255,.05); border-top: 3px solid rgba(255,255,255,.18); }
  .stepper > li > a:hover { color: #fff; background: rgba(255,255,255,.12); }
  .stepper .n { font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1; width: 24px; flex: none; }
  .stepper .done > a, .stepper .done > span { color: #fff; border-top-color: var(--teal); }
  .stepper .done .n { font-size: 0; }
  .stepper .done .n::before { content: "\2713"; font-family: var(--body); font-style: normal; font-size: 15px; color: var(--teal-bright); }
  .stepper .now > span { color: #fff; background: rgba(255,255,255,.16); border-top-color: var(--red); font-weight: 700; }

  /* --- Two-column checkout: work area + sticky order rail --- */
  .flow-wrap { padding-top: 40px; padding-bottom: 72px; }
  .flow-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 32px; align-items: start; }
  .rail { position: sticky; top: 86px; border: 1px solid #EAE6DF; background: var(--surface); }
  .rail h2 { font-size: 22px; padding: 16px 20px; border-bottom: 1px solid #EAE6DF; margin: 0; }
  .rail-body { padding: 16px 20px 20px; }
  .rail-line { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 14.5px; color: var(--muted); }
  .rail-line strong { color: var(--ink); font-weight: 600; }
  .rail-line.discount { color: var(--teal-text); }
  .rail-total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--navy); }
  .rail-total span { font-family: var(--display); font-style: italic; text-transform: uppercase; font-size: 21px; color: var(--navy); }
  .rail-total b { font-family: var(--display); font-style: italic; font-size: 30px; color: var(--red); line-height: 1; }
  .rail-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
  .rail-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F1EEE9; }
  .rail-item:last-of-type { border-bottom: 0; }
  .rail-item img { width: 64px; height: 48px; object-fit: cover; flex: none; }
  .rail-item .t { font-weight: 600; font-size: 14px; line-height: 1.3; }
  .rail-item .s { font-size: 12.5px; color: var(--muted); }

  /* --- Panels + forms --- */
  .flow-panel { border: 1px solid #EAE6DF; background: var(--surface); padding: 26px 28px 30px; margin-bottom: 22px; }
  .flow-panel > h2 { font-size: clamp(24px,2.6vw,30px); margin-bottom: 4px; }
  .flow-panel > .sub { color: var(--muted); font-size: 15px; margin-bottom: 20px; max-width: 62ch; }
  .field { margin-bottom: 18px; }
  .field label, .fieldset-label { display: block; font-weight: 600; font-size: 14px; color: var(--navy); margin-bottom: 6px; }
  .req { color: var(--red); }
  .field input, .field select, .field textarea { width: 100%; font-family: var(--body); font-size: 16px; color: var(--ink);
    padding: 12px 14px; min-height: 46px; background: #fff; border: 1px solid #C9C4BB; }
  .field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 1px; }
  .field .hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
  .field-row { display: flex; gap: 14px; }
  .field-row > * { flex: 1 1 0; }
  fieldset { border: 0; padding: 0; margin: 0 0 18px; }

  /* --- Lap session picker (radio cards) --- */
  .session-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px,1fr)); gap: 10px; }
  .session { position: relative; border: 1px solid #D8D3CA; background: #fff; padding: 14px 16px; cursor: pointer; display: block; }
  .session input { position: absolute; opacity: 0; width: 0; height: 0; }
  /* These live inside a <label>, which may only hold phrasing content, so they must be
     spans and need an explicit display. .time is inline-block so a following .pill sits
     beside it on the same line; .left stays block so it drops to its own line below. */
  .session .time { display: inline-block; vertical-align: middle; font-family: var(--display); font-style: italic; font-size: 25px; color: var(--navy); line-height: 1; }
  .session .left { display: block; font-size: 13px; color: var(--muted); margin-top: 5px; }
  .session .left.low { color: var(--red); font-weight: 600; }
  .session:hover { border-color: var(--teal); }
  .session:has(input:checked) { border: 2px solid var(--red); background: #FEF6F6; padding: 13px 15px; }
  .session:has(input:focus-visible) { outline: 3px solid var(--teal-text); outline-offset: 2px; }
  .session.is-full { opacity: .55; cursor: not-allowed; background: #F5F3F0; }
  .session.is-full .left { color: var(--muted); font-weight: 600; }

  /* --- Review / cart line items --- */
  .line-item { display: grid; grid-template-columns: 132px minmax(0,1fr) auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid #EAE6DF; align-items: start; }
  .line-item:first-of-type { padding-top: 0; }
  .line-item img { width: 132px; aspect-ratio: 4/3; object-fit: cover; }
  .line-item h3 { font-size: 22px; margin-bottom: 3px; }
  .line-item .meta { font-size: 14px; color: var(--muted); }
  .line-price { font-family: var(--display); font-style: italic; font-size: 27px; color: var(--navy); text-align: right; white-space: nowrap; }
  .pax { margin-top: 12px; border: 1px solid #EFECE6; background: #FBFAF8; padding: 11px 14px; }
  .pax dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
  .pax dd { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
  .pax-grid { display: flex; flex-wrap: wrap; gap: 8px 26px; }
  .link-danger { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .link-danger:hover { color: var(--red); }

  /* --- Promo code --- */
  .promo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 22px; padding-top: 22px; border-top: 1px solid #EAE6DF; }
  .promo .field { margin: 0; flex: 1 1 220px; }
  .btn-quiet { font-family: var(--body); font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 15px;
    background: #fff; color: var(--navy); border: 1px solid var(--navy); padding: 12px 22px; min-height: 46px; }
  .btn-quiet:hover { background: var(--navy); color: #fff; }
  .promo-applied { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; background: #E9F6F7; color: var(--teal-text); font-weight: 600; font-size: 14px; padding: 8px 14px; }

  /* --- Step actions --- */
  .flow-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
  .flow-actions .btn-book { font-size: 20px; padding: 14px 34px; }
  .btn-back { font-family: var(--body); font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 15px; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; background: none; padding: 10px 0; }
  .btn-back:hover { color: var(--red); }

  /* --- Payment --- */
  .stripe-mock { border: 1px solid #D8D3CA; background: #fff; padding: 18px; }
  .stripe-mock .sm-label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
  .stripe-mock .sm-input { border: 1px solid #C9C4BB; min-height: 46px; display: flex; align-items: center; padding: 0 14px; color: #6B7280; font-size: 15px; margin-bottom: 14px; background: #fff; }
  .stripe-mock .sm-row { display: flex; gap: 14px; }
  .stripe-mock .sm-row > * { flex: 1; }
  .secured { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 14px; }
  .secured svg { width: 15px; height: 15px; flex: none; }
  .code-inline { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: .06em; color: var(--navy); }

  /* --- Confirmation --- */
  .confirm-mark { width: 62px; height: 62px; background: var(--teal); display: grid; place-items: center; margin-bottom: 18px; }
  .confirm-mark svg { width: 34px; height: 34px; stroke: #fff; }
  .code-plate { border: 2px solid var(--navy); background: #fff; padding: 18px 24px; display: inline-block; margin: 4px 0 6px; }
  .code-plate .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
  .code-plate .val { font-family: ui-monospace, Menlo, monospace; font-size: 30px; font-weight: 700; letter-spacing: .08em; color: var(--navy); }
  .confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .bring { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  .bring li { display: flex; gap: 11px; font-size: 15px; }
  .bring li::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; margin-top: 8px; }

  /* --- Fixed cart timer bar --- */
  .timer-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--navy); color: #fff; border-top: 3px solid var(--teal); }
  .timer-bar .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 58px; padding-top: 9px; padding-bottom: 9px; }
  .timer-bar .lbl { font-size: 14px; color: #C7D3E4; }
  .timer-bar .clock { font-family: ui-monospace, Menlo, monospace; font-size: 21px; font-weight: 700; letter-spacing: .04em; }
  .timer-bar .spacer { margin-left: auto; }
  .timer-bar.is-warn { background: #7A3A08; border-top-color: #F0A64B; }
  .timer-bar.is-warn .lbl { color: #FBE3C6; }
  .timer-bar.is-critical { background: var(--red); border-top-color: #FFD1D5; }
  .timer-bar.is-critical .lbl { color: #FFDDE0; }
  body.has-timer { padding-bottom: var(--timer-h); }

  @media (max-width: 960px) {
    .flow-grid { grid-template-columns: 1fr; }
    .rail { position: static; order: -1; }
    .line-item { grid-template-columns: 96px minmax(0,1fr); }
    .line-item img { width: 96px; }
    .line-price { grid-column: 2; text-align: left; font-size: 24px; }
    .flow-panel { padding: 20px 18px 24px; }
    .stepper li { flex: 1 1 88px; min-width: 0; }
    .stepper > li > a, .stepper > li > span { padding: 9px 8px; font-size: 12px; gap: 6px; }
    .stepper .n { width: 18px; font-size: 16px; }
    /* the timer bar wraps to two rows at this width (measured 112px), so grow the clearance */
    :root { --timer-h: 124px; }
    .flow-actions .btn-book { width: 100%; }
    .field-row { flex-wrap: wrap; }
  }

  /* ============================================================
     SCROLL DISCOVERY MOTION
     Every hidden state below is scoped to html.js-reveal, which reveal.js adds
     synchronously and ONLY when JS runs and the visitor has not asked for reduced
     motion. Without that class these rules are inert and all content renders at full
     opacity. That is deliberate: a reveal that gates visibility ships blank sections
     in headless renderers, print, and background tabs where observers never fire.

     The motion differs by what it reveals rather than applying one fade everywhere:
       wipe      - section headings, a diagonal sweep matching the flag and pinstripe angle
       count     - impact numbers tick up to their real value
       stagger   - card grids and photo walls, siblings 55ms apart
       stagger-x - the day schedule, rows sliding in from the left like a list filling
       rise      - everything else, a restrained lift
     ============================================================ */
  :root { --ease-out-expo: cubic-bezier(.16,1,.3,1); }

  /* Transitions live on the element unconditionally; only the START state is gated,
     so a reveal can never leave something stuck invisible. */
  [data-reveal="rise"],
  [data-reveal="wipe"],
  [data-reveal="stagger"] > *,
  [data-reveal="stagger-x"] > * {
    transition: opacity 520ms var(--ease-out-expo), transform 520ms var(--ease-out-expo);
  }
  [data-reveal="wipe"] { transition: opacity 380ms ease-out, clip-path 640ms var(--ease-out-expo); }
  /* tabular figures stop the counter reflowing its own label while it ticks */
  [data-reveal="count"] { font-variant-numeric: tabular-nums; }

  .js-reveal [data-reveal="rise"]:not(.is-in) { opacity: 0; transform: translateY(16px); }

  /* Diagonal sweep on the same axis as .hero-flag and --pinstripe. Vertical bounds run
     past the box so descenders and the red slash mark are never clipped mid-animation. */
  .js-reveal [data-reveal="wipe"]:not(.is-in) {
    opacity: 0;
    clip-path: polygon(0 -25%, 0 -25%, -16% 125%, 0 125%);
  }
  [data-reveal="wipe"] { clip-path: polygon(0 -25%, 134% -25%, 118% 125%, 0 125%); }

  .js-reveal [data-reveal="stagger"]:not(.is-in) > * { opacity: 0; transform: translateY(18px); }
  .js-reveal [data-reveal="stagger-x"]:not(.is-in) > * { opacity: 0; transform: translateX(-20px); }

  /* Cars and gallery tiles settle from very slightly small, which reads as arriving
     rather than sliding. Kept under 3% so it never looks like a zoom effect. */
  .js-reveal .car-grid[data-reveal="stagger"]:not(.is-in) > *,
  .js-reveal .masonry[data-reveal="stagger"]:not(.is-in) > * {
    transform: translateY(18px) scale(.978);
  }
  .car-grid[data-reveal="stagger"] > *,
  .masonry[data-reveal="stagger"] > * { transform-origin: 50% 100%; }

  /* The schedule dot pops as its row lands. */
  .js-reveal [data-reveal="stagger-x"]:not(.is-in) > * .slot-dot { transform: scale(.4); opacity: 0; }
  [data-reveal="stagger-x"] > * .slot-dot { transition: transform 420ms var(--ease-out-expo) 90ms, opacity 300ms ease-out 90ms; }

  /* THE ESCAPE HATCH. reveal.js adds .reveal-off when no frame paints within 1.2s,
     which means transitions would never advance and gated content would stay invisible.
     transition:none is the important part: it makes the values jump rather than animate,
     so this works even in a context that cannot run an animation at all. */
  .reveal-off [data-reveal],
  .reveal-off [data-reveal] > *,
  .reveal-off [data-reveal] > * .slot-dot {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  @media print {
    [data-reveal], [data-reveal] > *, [data-reveal] > * .slot-dot {
      transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-reveal] > *, [data-reveal] > * .slot-dot {
      transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important;
    }
  }

  /* ============================================================
     RIDE DETAIL: photo carousel + description on the left, the whole
     booking decision on the right. Mirrors the live site's arrangement
     so the ride, its sessions, and the passenger form are decided in
     one column without scrolling back and forth.
     ============================================================ */
  .ride-detail { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; align-items: start; }

  .carousel { position: relative; border: 1px solid #EAE6DF; background: #fff; }
  .carousel-track { position: relative; aspect-ratio: 4/3; overflow: hidden; }
  /* first frame is visible with no JS and no class needed, so the photo can never be blank */
  .carousel-track img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 520ms ease; }
  .carousel-track img:first-child, .carousel-track img.is-on { opacity: 1; }
  .carousel-track img.is-off { opacity: 0; }
  .carousel-pause { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0;
    background: rgba(15,33,62,.66); color: #fff; display: grid; place-items: center; cursor: pointer; }
  .carousel-pause:hover { background: var(--navy); }
  .carousel-pause svg { width: 15px; height: 15px; }
  /* Prev/next arrows. Hidden until hover on pointer devices so they stay out of the
     photo, but ALWAYS visible where there is no hover (touch) and whenever focus is
     inside the carousel, so keyboard users can see what they are operating. */
  .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
    border: 0; padding: 0; background: rgba(15,33,62,.66); color: #fff; display: grid; place-items: center;
    cursor: pointer; opacity: 0; transition: opacity 180ms ease, background 160ms ease; }
  .carousel-nav:hover { background: var(--navy); }
  .carousel-nav svg { width: 17px; height: 17px; }
  .carousel-prev { left: 12px; }
  .carousel-next { right: 12px; }
  .carousel:hover .carousel-nav,
  .carousel:focus-within .carousel-nav { opacity: 1; }
  /* no hover to reveal them on touch, and mobile needs them permanently */
  @media (hover: none), (pointer: coarse) { .carousel-nav { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .carousel-nav { transition: none; } }

  .carousel-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
  .carousel-dots button { width: 10px; height: 10px; border: 0; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(15,33,62,.35); }
  .carousel-dots button[aria-current="true"] { background: #fff; }

  .ride-lede { margin-top: 22px; }
  .ride-lede p { color: var(--muted); margin-bottom: 14px; max-width: 64ch; }

  .ride-head { margin-bottom: 20px; }
  .ride-head h1 { font-size: clamp(30px, 3.4vw, 46px); }
  .ride-price { font-family: var(--display); font-style: italic; font-size: 27px; color: var(--red); margin-top: 8px; line-height: 1; }
  .ride-driver { font-size: 15px; color: var(--muted); margin-top: 8px; }
  .ride-driver b { color: var(--navy); font-weight: 600; }

  /* sold-out marker inside a session card */
  .pill { display: inline-block; vertical-align: middle; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; background: var(--navy); color: #fff; padding: 3px 8px; margin-left: 10px; }
  .session.is-full .pill { background: #6B7280; }

  /* "Saved on this device" passenger recall, a real feature of the booking plugin */
  .recall { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 14px;
    padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px dashed #DDD8D0; }
  .recall .lbl { color: var(--muted); }
  .chip { border: 1px solid #C9C4BB; background: #fff; font: inherit; font-size: 13.5px; padding: 8px 13px; cursor: pointer; color: var(--ink); }
  .chip:hover { border-color: var(--teal); color: var(--teal-text); }
  .recall .forget { margin-left: auto; font-size: 13.5px; }

  /* Age / Height / Weight sit on one line, divided by hairlines like the live site */
  .pax-row { display: flex; flex-wrap: wrap; gap: 0; }
  .pax-row > * { flex: 1 1 148px; padding: 0 16px; border-left: 1px solid #EAE6DF; margin-bottom: 0; }
  .pax-row > *:first-child { padding-left: 0; border-left: 0; }
  .pax-row > *:last-child { padding-right: 0; }
  .height-pair { display: flex; gap: 10px; }
  .height-pair > * { flex: 1 1 0; min-width: 0; }
  .waiver { font-size: 13px; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }

  @media (max-width: 960px) {
    .carousel-nav { opacity: 1; }
    .ride-detail { grid-template-columns: 1fr; gap: 26px; }
    .pax-row > * { flex: 1 1 100%; padding: 0; border-left: 0; margin-bottom: 18px; }
    .recall .forget { margin-left: 0; }
  }

  /* ============================================================
     MODAL (native <dialog>). Used for the car show entry form, which is
     served by Pardot rather than built into the page.
     ============================================================ */
  /* margin:auto is what centres a native <dialog>. The global `* { margin: 0 }` reset
     wipes it out, so it has to be restored here or the modal pins to the top left. */
  .modal { border: 0; padding: 0; margin: auto; width: min(680px, calc(100vw - 32px)); background: var(--surface);
    box-shadow: 0 26px 64px rgba(15,33,62,.30); color: var(--ink); }
  .modal::backdrop { background: rgba(15,33,62,.64); }
  .modal-head { display: flex; align-items: center; gap: 16px; padding: 20px 26px; border-bottom: 1px solid #EAE6DF; }
  .modal-head h2 { font-size: clamp(22px,2.4vw,28px); }
  .modal-close { margin-left: auto; width: 40px; height: 40px; flex: none; border: 1px solid #C9C4BB;
    background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--navy); }
  .modal-close:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
  .modal-close svg { width: 16px; height: 16px; }
  .modal-body { padding: 24px 26px 28px; max-height: min(70vh, 640px); overflow-y: auto; }
  .modal-foot { padding: 0 26px 24px; font-size: 13px; color: var(--muted); line-height: 1.5; }
  /* Video modal. Width is capped by the viewport HEIGHT as well, so a 16:9 body
     always fits on a short laptop screen instead of running off the bottom. */
  .modal--video { width: min(1100px, calc(100vw - 32px), calc((100vh - 150px) * 16 / 9)); }
  .modal-body--video { padding: 0; max-height: none; overflow: visible; aspect-ratio: 16 / 9; background: #000; }
  .modal-body--video iframe { display: block; width: 100%; height: 100%; border: 0; }

  /* Marked slot where a third-party form renders. Deliberately looks unfinished:
     this content is not ours to design, and the outline says so at a glance. */
  .embed-slot { border: 2px dashed #C1BBB0; background: #FBFAF8; padding: 30px 24px; text-align: center; }
  .embed-slot .tag { display: block; font-family: var(--display); font-style: italic; text-transform: uppercase;
    font-size: 21px; color: var(--navy); letter-spacing: .02em; }
  .embed-slot p { font-size: 14px; color: var(--muted); margin-top: 10px; max-width: 46ch; margin-left: auto; margin-right: auto; }
  .embed-slot ul { margin: 14px auto 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 6px 8px; max-width: 44ch; }
  .embed-slot li { font-size: 12.5px; background: #fff; border: 1px solid #E2DDD5; padding: 4px 10px; color: var(--muted); }

  .entry-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; }
  .entry-cta .note { font-size: 14px; color: var(--muted); }


  /* ============================================================
     WORDPRESS INTEGRATION LAYER
     Everything above is the design system from the approved comp. Below is only
     what is needed to bind it to real WordPress output: nav-walker classes,
     menu lists, editor content, and admin-bar offsets.
     ============================================================ */

  /* --- Primary nav: the walker emits <li class="nav-item"><a class="nav-link"> --- */
  .nav ul, .nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
  .nav li { position: relative; }
  .nav a, .nav .nav-link { font-weight: 600; font-size: 14.5px; color: var(--navy); text-decoration: none; padding: 12px; border-radius: 6px; display: block; }
  .nav a:hover, .nav .nav-link:hover { background: #EEF6F7; color: var(--teal-text); }
  .nav .current-menu-item > a, .nav .current_page_item > a,
  .nav a[aria-current="page"] { background: #EEF6F7; color: var(--teal-text); }

  /* Submenus, if anyone ever adds one. CSS-only so they work without Bootstrap's JS,
     which this theme no longer loads. */
  .nav .sub-menu, .nav .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 210px; margin: 0; padding: 6px;
    background: var(--surface); border: 1px solid #EAE6DF; box-shadow: 0 12px 28px rgba(15,33,62,.12);
    display: none; flex-direction: column; align-items: stretch; z-index: 120; }
  .nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu,
  .nav li:hover > .dropdown-menu, .nav li:focus-within > .dropdown-menu { display: flex; }

  /* --- Footer link lists (wp_nav_menu or the hard-coded fallback) --- */
  footer .footer-links, footer .menu { list-style: none; margin: 0; padding: 0; }
  footer .footer-links li { margin-bottom: 6px; }
  footer .footer-links a { display: inline-block; }
  /* the cookie-consent preferences control is rendered as a button by the theme include */
  footer .footer-links button { background: none; border: 0; padding: 0; font: inherit; color: var(--teal-bright);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

  /* --- Editor content (the_content) --- */
  .entry-content > * + * { margin-top: 1.1em; }
  .entry-content h2 { font-size: clamp(26px, 3vw, 38px); margin-top: 1.4em; }
  .entry-content h3 { font-size: clamp(20px, 2.2vw, 26px); margin-top: 1.3em; }
  .entry-content p, .entry-content li { color: var(--muted); max-width: 72ch; }
  .entry-content strong { color: var(--ink); }
  .entry-content ul, .entry-content ol { padding-left: 1.25em; }
  .entry-content li { margin-bottom: .4em; }
  .entry-content img { height: auto; }
  .entry-content a { text-decoration: underline; text-underline-offset: 3px; }
  .entry-content blockquote { border-left: 0; padding: 18px 22px; background: #F3F7F8; }
  .entry-content .alignleft { float: left; margin: 0 1.4em .8em 0; }
  .entry-content .alignright { float: right; margin: 0 0 .8em 1.4em; }
  .entry-content .aligncenter { margin-left: auto; margin-right: auto; }
  .entry-content figure { margin: 1.4em 0; }
  .entry-content figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
  .wp-caption-text { font-size: 13.5px; color: var(--muted); }
  .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap; }

  /* --- Logged-in admin bar must not hide the sticky header --- */
  .admin-bar .site-header { top: 32px; }
  @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

  /* --- Header logo: support both the custom-logo image and the inline SVG fallback --- */
  .logo .custom-logo, .logo-mark svg, .logo img { height: 44px; width: auto; display: block; }
  .logo-mark { display: block; }
  .logo-wordmark { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase;
    font-size: 22px; color: var(--navy); }

  /* --- Cart strip hangs below the sticky header, floating over the hero — it must
         never add height to the header itself. min-height: 0 cancels the 66px the
         shared .site-header .wrap rule would otherwise force on this row. --- */
  .site-header .cart-strip-row { position: absolute; top: 100%; left: 0; right: 0; min-height: 0; display: flex; justify-content: flex-end; pointer-events: none; }

  @media (max-width: 1190px) {
    /* Hamburger nav: the toggle reveals the menu as a stacked panel. The Book a
       Ride button deliberately stays OUTSIDE the panel so booking is always one
       tap away. Breakpoint matches the .nav/.menu-toggle handover above. */
    /* z-index above the cart strip's 5 — both hang at top:100%, and the open
       menu must cover the strip, not sit under it. */
    .nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 6; background: var(--surface);
      border-bottom: 3px solid var(--teal); box-shadow: 0 14px 26px rgba(15,33,62,.12);
      display: none; padding: 8px 0; }
    .nav.is-open { display: block; }
    .nav ul, .nav .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav a, .nav .nav-link { padding: 14px 24px; border-radius: 0; min-height: 44px; }
    .nav .sub-menu, .nav .dropdown-menu { position: static; display: flex; border: 0; box-shadow: none; padding-left: 16px; }
    .site-header .wrap { position: relative; flex-wrap: nowrap; }
  }

  /* --- wp_nav_menu with items_wrap '%3$s' emits <li> as DIRECT children of .nav,
         so there is no <ul> to reset. Style the list items themselves. --- */
  .nav { list-style: none; }
  .nav > li, .nav li { list-style: none; }
  .nav > li > a { display: block; }

  /* --- classes the 2026 templates introduce --- */
  .sec-sub { color: var(--muted); font-size: 15.5px; max-width: 62ch; margin-top: 6px; }
  .sec-cta { margin-top: 30px; }
  .car-photo-missing { flex: 1 1 auto; min-height: 230px; display: grid; place-items: center;
    background: #F5F3F0; border-bottom: 1px dashed #C1BBB0; color: var(--muted);
    font-family: var(--display); font-style: italic; text-transform: uppercase; font-size: 18px; }
  .sponsor-fallback { font-weight: 700; font-size: 16px; color: var(--navy); text-align: center; padding: 20px; }
  .car-body h3 a { color: inherit; text-decoration: none; }
  .car-body h3 a:hover { color: var(--red); }
  .charity-media img { width: 100%; height: auto; object-fit: cover; }

  /* The comp's car grid pairs 3 cards with a full-width CTA tile. `span 2` left a
     gap in a 3-column grid, so stretch it across the row. */
  .car-grid .cta-tile { grid-column: 1 / -1; min-height: 150px; }

  /* ============================================================
     
  /* SCOPING FIX: the comp pages each had their own <style> block, so merging them
     let page-specific rules override shared components further up this file.
     Two were real regressions: the gallery filter chip redefined .pill, which is
     the booking flow SOLD badge, and the car-show form redefined .field/.req,
     which the checkout forms use. Each is now scoped to its own page context. */

  /* SCOPING FIX 2: three comp pages contributed selectors broad enough to restyle
     the whole site once merged into one stylesheet. section:not(.hero) set 88px
     padding on every section everywhere, not just its own page. Each is now
     scoped with the body_class hook added in functions.php. */
PAGE-LEVEL CSS from the approved comps.
     Each comp page shipped its own <style> block. Those rules are merged here
     so every page keeps the styling it was designed with. Kept per-page and in
     source order; later duplicates simply win, which matches how the comps ran.
     ============================================================ */
  /* ---- from comp: the-event.html ---- */
/* Small page-level additions only. No new colors, fonts or components. */
  .nav a[aria-current="page"] { background: #EEF6F7; color: var(--teal-text); }
  .sec-head--tight { margin-bottom: 14px; }
  .sec-intro { color: var(--muted); font-size: 17px; max-width: 64ch; margin-bottom: 30px; }
  .sec-white { background: var(--surface); }
  /* Impact band on this page carries three figures, not six. */
  .stats-3 .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .point h3 { font-size: 24px; font-weight: 800; }
  .point p { color: var(--muted); margin-top: 8px; }
  .panel--note { border-left: 4px solid var(--teal); margin-top: 30px; }
  .panel--note p { color: var(--muted); max-width: 70ch; }
  .panel--note b { color: var(--navy); }
  .media img { width: 100%; height: 360px; object-fit: cover; }
  .maplink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 15px; color: var(--teal-text); }
  .addr { font-style: normal; font-weight: 600; color: var(--navy); font-size: 18px; max-width: 34ch; }
  @media (max-width: 960px) {
    .stats-3 .stat-grid { grid-template-columns: 1fr; }
    .media img { height: 240px; }
  }

  /* ---- from comp: purchase-a-ride.html ---- */
/* Current-page nav state (per _SHELL-SPEC.md) */
  .nav a[aria-current="page"] { background:#EEF6F7; color: var(--teal-text); }

  /* Caption in the section head reads as copy, not as the .more link on index */
  .sec-head span.more { color: var(--muted); font-weight: 600; max-width: 34ch; }

  /* ---- Filter toolbar: white panel, navy display labels, 1px hairlines ---- */
  .toolbar { background: var(--surface); border: 1px solid #EAE6DF; padding: 18px 22px; display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin-bottom: 30px; }
  .toolbar .field { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
  .toolbar label { font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: var(--navy); }
  .toolbar select { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--ink); background-color: #fff; border: 1px solid #CFCAC2; border-radius: 0; min-height: 44px; padding: 10px 40px 10px 14px; width: 100%; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230F213E' stroke-width='2'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
  .toolbar select:hover { border-color: var(--navy); }
  .result-count { margin-left: auto; font-weight: 700; font-size: 14.5px; color: var(--navy); padding-bottom: 11px; }

  /* ---- Navy "Featured" chip: the .tag motif mirrored to the top right ---- */
  .car .tag-featured { position: absolute; top: 0; right: 0; z-index: 2; background: var(--navy); color: #fff; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px 7px 18px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); }

  /* ---- Secondary card action. Deliberately square + navy so the red skewed
         "Book a Ride" stays the only primary booking label on the page.
         The ::after stretches the link over the whole card, so the card is clickable. ---- */
  .car-body .btn-select { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 14px; padding: 9px 20px; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; color: var(--navy); background: #fff; border: 2px solid var(--navy); cursor: pointer; }
  .car-body a.btn-select::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .car-body a.btn-select:hover { background: var(--navy); color: #fff; }
  .car-body .btn-select[disabled] { color: var(--muted); border-color: #C9C4BC; background: #F4F2EE; cursor: not-allowed; }

  /* ---- Sold-out card: photo dims, copy keeps full contrast ---- */
  .car.is-out { background: #FBFAF8; }
  .car.is-out img { filter: grayscale(.65); opacity: .68; }
  .car .avail.out { background: #E7EAEF; color: var(--navy); }

  /* ---- Trust panel ---- */
  .trust h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; }
  .trust p.big { font-size: 19px; color: #23303f; max-width: 62ch; margin: 14px 0 0; }
  .trust p.fine { font-size: 14.5px; color: var(--muted); max-width: 62ch; margin-top: 14px; padding-top: 14px; border-top: 1px solid #EAE6DF; }
  .trust p.link { margin-top: 16px; }
  .trust p.link a { font-weight: 700; font-size: 15px; }

  @media (max-width: 960px) {
    .toolbar { flex-direction: column; align-items: stretch; padding: 16px; }
    .toolbar .field { min-width: 0; }
    .result-count { margin-left: 0; padding-bottom: 0; }
  }

  /* ---- from comp: car-show.html ---- */
/* Alternating section background, same value the shell uses for .day */
  .bg-surface { background: var(--surface); }

  /* shell.css crossfades .hero-gallery img on an 18s 3-image cycle. This page hero
     has ONE photo, which would leave it invisible for most of that cycle. Hold it. */
  .page-hero .hero-gallery img { animation: none; opacity: 1; }

  /* Visually hidden (for "opens in a new tab" hints) */
  .vh { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* Secondary action: navy sibling of .btn-book. Never used for booking. */
  .page-hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }

  /* Section 1: copy paired with two real event photos */
  .photo-pair { display: grid; gap: 18px; }
  .photo-pair figure { margin: 0; background: var(--surface); border: 1px solid #EAE6DF; }
  .photo-pair img { width: 100%; height: 236px; object-fit: cover; }
  .photo-pair figcaption { font-size: 13px; color: var(--muted); padding: 10px 14px; }

  /* Accepted categories: 5-up navy tiles, same family as the countdown tiles */
  .cat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 26px; }
  .cat { background: var(--navy); background-image: var(--pinstripe); color: #fff;
    border-top: 4px solid var(--red); padding: 22px 18px 20px; min-height: 128px;
    display: flex; flex-direction: column; justify-content: flex-end; }
  .cat .kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--teal-bright); font-weight: 700; margin-bottom: 6px; }
  .cat b { font-family: var(--display); font-style: italic; font-weight: 800;
    text-transform: uppercase; font-size: 30px; line-height: 1.02; }

  /* Steps flow: .timeline/.slot-row with step numbers instead of times */
  .steps-timeline .slot-row { grid-template-columns: 92px 26px 1fr; }
  .steps-timeline .slot-time { font-size: 34px; }

  .note-panel { margin-top: 28px; background: #EEF6F7; border-left: 5px solid var(--teal-text);
    padding: 18px 22px; max-width: 74ch; }
  .note-panel b { font-family: var(--display); font-style: italic; text-transform: uppercase;
    letter-spacing: .04em; color: var(--navy); font-size: 18px; }
  .note-panel p { color: #23303f; margin-top: 2px; }

  /* ===== Submission form ===== */
  .form-panel { max-width: 880px; }
  .req-legend { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 22px; }
  .car-show-form .req { color: var(--red); font-weight: 700; }
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .car-show-form .field { display: flex; flex-direction: column; }
  .field--full { grid-column: 1 / -1; }
  .car-show-form .field label { font-weight: 600; font-size: 14.5px; color: var(--navy); margin-bottom: 6px; }
  .car-show-form .field .hint { font-size: 13px; color: var(--muted); font-weight: 400; margin-bottom: 6px; }
  .car-show-form .field input, .car-show-form .field select, .car-show-form .field textarea {
    font-family: var(--body); font-size: 16px; color: var(--ink); background: var(--surface);
    border: 1px solid #7C838D; border-radius: 3px; padding: 11px 14px; min-height: 46px; width: 100%; }
  .car-show-form .field textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
  .car-show-form .field select { appearance: none; padding-right: 42px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
    background-position: calc(100% - 21px) 21px, calc(100% - 15px) 21px;
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy); }
  .form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
  .form-status { font-size: 14px; font-weight: 600; color: var(--teal-text); }
  .form-legalese { margin-top: 20px; padding-top: 18px; border-top: 1px solid #EAE6DF;
    font-size: 13.5px; color: var(--muted); max-width: 68ch; }

  /* Venue / charity panels */
  .info-panel h3 { font-size: 26px; margin-bottom: 10px; }
  .info-panel p { color: #23303f; }
  .info-panel .panel-link { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 15px; }

  @media (max-width: 960px) {
    .cat-row { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .steps-timeline .slot-row { grid-template-columns: 62px 22px 1fr; gap: 10px; }
    .steps-timeline .slot-time { font-size: 26px; }
    .photo-pair img { height: 210px; }
  }

  /* ---- from comp: sponsors.html ---- */
/* Tier hierarchy: logo scale steps DOWN with each tier so rank reads at a glance.
     All-Wheel keeps shell.css sizing (4 up, 161px logos); these two go smaller. */
  .sponsor-row--rw { grid-template-columns: repeat(6, 1fr); }
  .sponsor-row--rw .sponsor-tile { min-height: 168px; gap: 11px; padding: 16px 12px; }
  .sponsor-row--rw .sponsor-tile img { max-height: 92px; }
  .sponsor-row--rw .sponsor-tile .name { font-size: 13.5px; }

  .sponsor-row--fw { grid-template-columns: repeat(6, 1fr); }
  .sponsor-row--fw .sponsor-tile { min-height: 132px; gap: 9px; padding: 14px 10px; }
  .sponsor-row--fw .sponsor-tile img { max-height: 62px; }
  .sponsor-row--fw .sponsor-tile .name { font-size: 12.5px; }

  /* .count also carries the countdown block's margin-top; neutralise it inside the tier rule. */
  .tier-label .count { margin-top: 0; }

  /* Navy secondary button: deliberately NOT red so "Book a Ride" stays the only
     red call to action on the page. Square corners (owner request 2026-08-08). */
  .btn-navy { background: var(--navy); color: #fff; font-size: 17px; padding: 12px 26px;
    transition: background 160ms ease, transform 160ms ease; }
  .btn-navy:hover { background: var(--navy-deep); transform: translateY(-1px); }
  .btn-navy:active { transform: translateY(0); }

  .invite-panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: center; }
  /* Every other h2 in the system gets its size from a wrapper (.sec-head, .stats, .cta-band);
     this one stands alone, so it needs the section-heading scale set explicitly. */
  .invite-panel h2 { font-size: clamp(30px, 3vw, 42px); font-weight: 800; }
  .invite-panel p { color: var(--muted); max-width: 54ch; margin-top: 12px; }
  .invite-action { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .invite-meta { font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.5; }

  /* Tablet: 6 up gets cramped, so drop to 4 up. Hierarchy still holds because it is
     carried by logo max-height, not by column count. */
  @media (max-width: 1180px) and (min-width: 961px) {
    .sponsor-row--rw, .sponsor-row--fw { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 960px) {
    .sponsor-row--rw, .sponsor-row--fw { grid-template-columns: repeat(2, 1fr); }
    .sponsor-row--rw .sponsor-tile { min-height: 140px; }
    .sponsor-row--rw .sponsor-tile img { max-height: 78px; }
    .sponsor-row--fw .sponsor-tile { min-height: 116px; }
    .sponsor-row--fw .sponsor-tile img { max-height: 56px; }
    .invite-panel { grid-template-columns: 1fr; gap: 22px; }
  }

  /* ---- from comp: gallery.html ---- */
/* ---- Current-page nav marker. _SHELL-SPEC.md says shell.css already styles
         .nav a[aria-current="page"], but it does not; scoped here so the shared
         stylesheet stays untouched. ---- */
  .nav a[aria-current="page"] { background: #EEF6F7; color: var(--teal-text); }

  /* ---- Category pill row ---- */
  .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
  .filters .pill { font-family: var(--body); font-style: normal; font-weight: 600; font-size: 14.5px;
    min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center;
    background: var(--surface); border: 1px solid #D9D4CC; border-radius: 999px;
    color: var(--navy); cursor: pointer; letter-spacing: .01em; }
  .filters .pill:hover { background: #EEF6F7; border-color: #BFDDE0; color: var(--teal-text); }
  .filters .pill[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
  .filters .pill[aria-pressed="true"]:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }

  /* ---- Masonry photo grid (CSS columns; gaps match the site's 20px/26px rhythm) ---- */
  .masonry { columns: 4; column-gap: 20px; }
  .shot { break-inside: avoid; margin: 0 0 20px; overflow: hidden;
    background: #EFECE6; border: 1px solid #EAE6DF; }
  .shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
  .shot.is-tall img { aspect-ratio: 3 / 4; }
  .shot.is-square img { aspect-ratio: 1 / 1; }
  .shot.is-wide img { aspect-ratio: 16 / 10; }

  /* ---- Load more ---- */
  .load-more { text-align: center; margin-top: 38px; }
  /* clip-path would crop an outset ring, so draw this one inside the shape */
  .showing { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--muted); }

  /* ---- Editorial line before the CTA band ---- */
  .editorial { background: var(--surface); border-top: 1px solid #EAE6DF; padding: 60px 0; text-align: center; }
  .editorial .rule { width: 76px; height: 6px; background: var(--red); transform: skewX(-20deg); margin: 0 auto 20px; }
  .editorial p { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase;
    color: var(--navy); font-size: clamp(26px, 3.2vw, 42px); line-height: 1.06; max-width: 22ch; margin: 0 auto; }

  @media (prefers-reduced-motion: no-preference) {
    .filters .pill { transition: background 160ms ease, border-color 160ms ease, color 160ms ease; }
    .shot { transition: transform 200ms cubic-bezier(.22,1,.36,1), box-shadow 200ms ease; }
    .shot img { transition: opacity 200ms ease; }
    .shot:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15,33,62,.16); }
    .shot:hover img { opacity: .92; }
  }

  @media (max-width: 1100px) { .masonry { columns: 3; } }
  @media (max-width: 760px) {
    .masonry { columns: 2; column-gap: 14px; }
    .shot { margin-bottom: 14px; }
  }
  @media (max-width: 460px) { .masonry { columns: 1; } }

  /*   /* NOTE: .btn-secondary is defined once, by the FAQ comp, and page-faq.php is the
     only template using it. The car-show and gallery comps each shipped their own
     overridden copy; those were removed so the winning rule is not a cascade accident. */
---- from comp: faq.html ---- */
/* Small page-level additions only. No new colors, fonts or components. */
  .nav a[aria-current="page"] { background: #EEF6F7; color: var(--teal-text); }

  /* ---- Category jump nav: sticks directly under the 66px header on desktop,
          becomes a plain inline row on mobile so it never eats the viewport. ---- */
  .jump { position: sticky; top: 66px; z-index: 90; background: var(--surface); border-bottom: 1px solid #EAE6DF; }
  .jump .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  .jump .jump-label { font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; font-size: 13.5px; color: var(--muted); margin-right: 12px; }
  .jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 13px; border-radius: 6px;
    font-weight: 600; font-size: 14.5px; color: var(--navy); text-decoration: none; }
  .jump a:hover { background: #EEF6F7; color: var(--teal-text); }
  /* Anchor targets clear the sticky header + sticky jump nav. */
  .page-faq main section[id] { scroll-margin-top: 132px; }

  /* ---- FAQ sections ---- */
  .faq-sec { padding: 56px 0; }
  .sec-white { background: var(--surface); }
  .faq-cat { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
  .faq-cat h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; white-space: nowrap; }
  .faq-cat i { display: block; height: 3px; background: var(--teal); flex: 1; transform: skewX(-30deg); }
  .faq-count { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 18px; }

  /* ---- Accordion rows: hairline separators, generous padding, real 44px+ targets ---- */
  .faq-list { border-top: 1px solid #E9E7E1; }
  .faq-item { border-bottom: 1px solid #E9E7E1; }
  .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start;
    justify-content: space-between; gap: 24px; padding: 22px 2px; min-height: 44px; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::marker { content: ""; }
  /* Questions keep the brand display face but drop uppercase: 18 long sentence-case
     questions are materially easier to read this way, and text being read must not fight back. */
  .faq-item h3 { text-transform: none; font-size: clamp(19px, 1.7vw, 22px); font-weight: 700;
    color: var(--navy); line-height: 1.2; max-width: 46ch; }
  .faq-item summary:hover h3 { color: var(--teal-text); }
  /* +/- indicator: two background bars; the vertical bar collapses to 0 when open. */
  .faq-item summary::after { content: ""; flex: none; width: 22px; height: 22px; margin-top: 3px;
    background-image: linear-gradient(var(--red), var(--red)), linear-gradient(var(--red), var(--red));
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 22px 3px, 3px 22px;
    transition: background-size 180ms ease-out; }
  .faq-item[open] summary::after { background-size: 22px 3px, 3px 0; }
  /* Outline sits inside the row so the ring never collides with the hairlines above and below. */
  .faq-item summary:focus-visible { outline: 3px solid var(--teal-text); outline-offset: -3px; border-radius: 2px; }
  .faq-item .answer { padding: 0 56px 26px 2px; max-width: 72ch; color: #23303f; }
  .faq-item .answer a { font-weight: 600; }

  /* ---- Closing "still have a question" panel ---- */
  .panel--ask { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    border-left: 4px solid var(--teal); padding: 30px 32px; }
  .panel--ask h2 { font-size: clamp(28px, 2.8vw, 38px); font-weight: 800; }
  .panel--ask p { color: var(--muted); margin-top: 8px; max-width: 46ch; }
  /* Secondary button: square now, like .btn-book — the angled cut was removed
     sitewide, so a real outward focus ring works again. */
  .btn-secondary { background: var(--surface); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy);
    font-size: 17px; padding: 13px 26px;
    transition: background 160ms ease, color 160ms ease; }
  .btn-secondary:hover { background: var(--navy); color: #fff; }
  .btn-secondary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

  @media (max-width: 960px) {
    .jump { position: static; }
    .page-faq main section[id] { scroll-margin-top: 78px; }
    .faq-sec { padding: 42px 0; }
    .faq-cat { flex-wrap: wrap; gap: 12px; }
    .faq-cat h2 { white-space: normal; }
    .faq-item .answer { padding-right: 0; }
    .panel--ask { padding: 24px 22px; }
  }

  /* ---- from comp: hope-4-mvc-kids.html ---- */
/* Page-level additions only: existing tokens, no new colors, fonts or components.
     This is the warmest page in the prototype, so sections breathe more than elsewhere. */
  .page-hope-4-mvc-kids section:not(.hero):not(.cta-band) { padding: 88px 0; }

  .kicker { font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--teal-text); margin-bottom: 4px; }
  .page-hope-4-mvc-kids .page-hero .page-hero-inner { padding-top: 88px; }

  /* The hero photo is still a placeholder, so it carries the same dashed real-asset
     marker used on the home page, drawn over the hero image layer. */
  .hero-asset { position: absolute; inset: 12px; z-index: 4; padding: 0; pointer-events: none; }

  .hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
  .btn-navy { background: var(--navy); color: #fff; font-size: 17px; padding: 12px 26px; min-height: 44px; transition: background 160ms ease, transform 160ms ease; }
  .btn-navy:hover { background: var(--navy-deep); transform: translateY(-1px); }
  .btn-navy:active { transform: translateY(0); }

  .sec-white { background: var(--surface); }
  .sec-head--tight { margin-bottom: 14px; }
  .sec-intro { color: var(--muted); font-size: 17px; max-width: 66ch; margin-bottom: 34px; }
  .point h3 { font-size: 24px; font-weight: 800; }
  .point p { color: var(--muted); margin-top: 8px; }

  /* Charity logo plate. Borderless by request. The PRIMARY SPONSOR plate keeps its
     border through the more specific `.sponsor-primary .logo-plate` rule further up
     this file, which was an explicit earlier decision. Do not merge the two. */
  .logo-plate { display: flex; align-items: center; justify-content: center; background: var(--surface); padding: 34px; min-height: 280px; }
  .logo-plate img { max-height: 180px; width: auto; object-fit: contain; }

  /* Pull quote: the .quote component at display scale. */
  .quote--lead { max-width: 26ch; margin: 0; }
  .quote--lead p { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.16; }
  .quote.asset-slot { border: 2px dashed #C9BFB4; padding: 34px 16px 14px; }

  /* The three points, stacked beside the photo instead of a second card grid. */
  .point-list { display: grid; gap: 0; }
  .point-list .point { padding: 22px 0 22px 18px; position: relative; }
  .point-list .point + .point { border-top: 1px solid #E9E7E1; }
  .point-list .point::before { content: ""; position: absolute; left: 0; top: 27px; width: 6px; height: 22px; background: var(--red); transform: skewX(-12deg); }
  .point-list .point p { max-width: 54ch; }

  /* .money-line rescoped so the home page component works outside .charity. */
  .money-line { display: flex; align-items: center; gap: 20px; font-weight: 700; color: var(--navy); }
  .money-line .pct { font-family: var(--display); font-style: italic; font-weight: 800; color: var(--red); }
  .money-line--feature { margin-top: 44px; padding-top: 26px; border-top: 3px solid var(--teal); font-size: 19px; }
  .money-line--feature .pct { font-size: clamp(58px, 7vw, 92px); line-height: .9; }
  .money-line--feature .sub { display: block; font-weight: 500; font-size: 15px; color: var(--muted); margin-top: 4px; }

  .media-slot img { width: 100%; height: 440px; object-fit: cover; }
  .support-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
  .support-note { margin-top: 22px; color: var(--muted); font-size: 15px; max-width: 56ch; }

  @media (max-width: 960px) {
    .page-hope-4-mvc-kids section:not(.hero):not(.cta-band) { padding: 56px 0; }
    .page-hope-4-mvc-kids .page-hero .page-hero-inner { padding-top: 74px; }
    .hero-asset { inset: 8px; }
    .logo-plate { min-height: 200px; padding: 24px; }
    .logo-plate img { max-height: 130px; }
    .media-slot img { height: 260px; }
    .money-line--feature { flex-direction: column; align-items: flex-start; gap: 8px; }
  }

  /* ---- from comp: privacy-policy.html ---- */
/* shell.css sizes .prose h3 but not .prose h2, which would leave the top-level
     legal headings smaller than their own sub-headings. Element selectors only:
     no new classes, no new colors. */
  .prose h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; margin: 40px 0 12px; }
  .prose h2:first-of-type { margin-top: 32px; }
  .prose ul { margin-bottom: 20px; }
  .prose li { color: #23303f; }

  /* ---- from comp: terms-and-conditions.html ---- */
/* shell.css sizes .prose h3 but not .prose h2, which would leave the top-level
     legal headings smaller than their own sub-headings. Element selectors only:
     no new classes, no new colors. */
  .prose h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; margin: 40px 0 12px; }
  .prose h2:first-of-type { margin-top: 32px; }
  .prose ul { margin-bottom: 20px; }
  .prose li { color: #23303f; }

  /* ============================================================
     LIGHTBOX. Carried over verbatim from the previous theme: replacing
     theme.css wholesale dropped these rules, which left the gallery
     lightbox controls rendering as loose buttons at the foot of the page.
     assets/js/gallery-lightbox.js depends on exactly these class names.
     ============================================================ */
.cardel-lightbox {
	position: fixed; inset: 0;
	background: rgba(15, 33, 62, 0.94);   /* navy with a touch of transparency */
	z-index: 99998;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4rem 1rem;
}
.cardel-lightbox.is-open { display: flex; }
body.cardel-lightbox-open { overflow: hidden; }
.cardel-lightbox__stage {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
}
.cardel-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 9rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.cardel-lightbox__caption {
	color: rgba(255,255,255,.85);
	font-size: .9rem;
	max-width: 720px;
	text-align: center;
	margin: 0;
	font-family: 'Inter', sans-serif;
}
.cardel-lightbox__nav {
	position: absolute;
	background: rgba(0,0,0,.45);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 200ms ease, transform 200ms ease;
}
.cardel-lightbox__nav:focus-visible {
	background: var(--cardel-accent);
	transform: scale(1.05);
	outline: none;
}
.cardel-lightbox__close {
	top: 1.25rem;
	right: 1.25rem;
	width: 44px;
	height: 44px;
}
.cardel-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
}
.cardel-lightbox__nav:focus-visible {
	transform: translateY(-50%) scale(1.05);
}
.cardel-lightbox__nav--prev { left: 1.25rem; }
.cardel-lightbox__nav--next { right: 1.25rem; }
.cardel-lightbox__counter {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,.85);  /* WCAG AA — high contrast on navy bg */
	font-family: 'DM Sans', sans-serif;
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}
.cardel-lightbox.is-loading .cardel-lightbox__img { opacity: .25; transition: opacity 200ms ease; }
.cardel-lightbox::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 48px; height: 48px;
	margin: -24px 0 0 -24px;
	border: 3px solid rgba(255,255,255,.2);
	border-top-color: var(--cardel-teal);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	animation: cardel-spin 800ms linear infinite;
	transition: opacity 150ms;
	z-index: 1;
}
.cardel-lightbox.is-loading::before { opacity: 1; }
.cardel-lightbox__nav { border: 2px solid CanvasText; }
.cardel-lightbox { padding: 3rem .5rem; }
.cardel-lightbox__nav { width: 44px; height: 44px; }
.cardel-lightbox__nav--prev { left: .5rem; }
.cardel-lightbox__nav--next { right: .5rem; }
.cardel-lightbox__close { top: .75rem; right: .75rem; }
.cardel-lightbox__nav { transition: none; }
.cardel-lightbox::before { animation-duration: 2400ms; }
.cardel-lightbox.is-loading .cardel-lightbox__img { transition: none; }


  /* ============================================================
     COOKIE BANNER, GALLERY GRID and HERO PHOTO rules, carried over verbatim
     from the previous theme. Replacing theme.css wholesale dropped these while
     the PHP and JS that depend on them survived.
     The cookie banner one was a live bug: without position:fixed the banner
     rendered inline at the end of the document, and cookie-consent.js focuses
     its Accept button on load, which scrolled every first-time visitor to the
     very bottom of the page.
     ============================================================ */
.cardel-cookie-banner button:focus-visible {
	outline: 3px solid var(--cardel-teal-text, #0E6F77);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cardel-bg, #FAFAF7) !important;
	transform: none;
}
.cardel-hero__bg .cardel-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
	display: block;
	opacity: 0;
	transition: opacity 1.4s ease-in-out;
}
.cardel-hero__bg .cardel-hero__photo.is-active { opacity: 1; }
.cardel-hero__bg[data-cardel-gallery="false"] .cardel-hero__photo { opacity: 1; transition: none; }
.cardel-hero__photo--placeholder {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 75% 25%, rgba(43, 173, 184, .18), transparent 55%),
		radial-gradient(circle at 25% 75%, rgba(188, 33, 45, .12), transparent 50%),
		linear-gradient(135deg, #e8e5e0 0%, #f5f2ec 100%);
}
.cardel-cookie-banner {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 99990; /* below the booking timer (99999) but above everything else */
	background: var(--cardel-primary);
	color: #fff;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
	border-top: 3px solid var(--cardel-teal);
	font-family: 'Inter', sans-serif;
	font-size: .95rem;
	line-height: 1.55;
	padding: calc(1rem + env(safe-area-inset-bottom, 0px)) 1rem 1rem;
}
.cardel-cookie-banner[hidden] { display: none; }
body:has(.roal-timer) .cardel-cookie-banner {
	/* --roal-timer-h is the bar's real measured height (set by cart-timer.js);
	   the px value is only a no-JS fallback. The bar wraps to ~160px on narrow
	   screens, where a static offset left the consent buttons buried under it. */
	bottom: calc(var(--roal-timer-h, 64px) + env(safe-area-inset-bottom, 0px));
}
.cardel-cookie-banner__inner {
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}
.cardel-cookie-banner__view[data-view="default"] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem 1.25rem;
	align-items: center;
}
.cardel-cookie-banner__icon {
	color: var(--cardel-teal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cardel-cookie-banner__title {
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 .25rem;
	color: #fff;
	letter-spacing: 0.02em;
}
.cardel-cookie-banner__body {
	margin: 0;
	color: rgba(255, 255, 255, .85);
	font-size: .9rem;
}
.cardel-cookie-banner__body a {
	color: var(--cardel-teal);
	font-weight: 600;
	text-decoration: underline;
}
.cardel-cookie-banner__body a:focus { color: #fff; }
.cardel-cookie-banner__actions {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	align-items: center;
}
.cardel-cookie-banner__actions .btn {
	font-size: .9rem;
	padding: .5rem 1rem;
}
.cardel-cookie-banner__actions .btn-outline-dark {
	color: #fff;
	border-color: rgba(255, 255, 255, .4);
	background: transparent;
}
.cardel-cookie-banner__actions .btn-outline-dark:focus {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border-color: #fff;
}
.cardel-cookie-banner__customize {
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
	font: inherit;
	text-decoration: underline;
	padding: .5rem .75rem;
	font-size: .9rem;
}
.cardel-cookie-banner__customize:focus { color: #fff; }
.cardel-cookie-banner__view[data-view="customize"] {
	max-width: 720px;
	margin: 0 auto;
}
.cardel-cookie-banner__back {
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, .7);
	cursor: pointer;
	padding: .25rem .5rem .25rem 0;
	margin: 0 0 .5rem -.25rem;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .85rem;
}
.cardel-cookie-banner__back:focus { color: #fff; }
.cardel-cookie-banner__categories {
	list-style: none;
	margin: .75rem 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .85rem;
}
.cardel-cookie-cat {
	background: rgba(255, 255, 255, .06);
	border-radius: 6px;
	padding: .85rem 1rem;
}
.cardel-cookie-cat__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: default;
	gap: 1rem;
}
label.cardel-cookie-cat__head { cursor: pointer; }
.cardel-cookie-cat__name {
	font-family: 'DM Sans', sans-serif;
	font-size: .95rem;
	color: #fff;
}
.cardel-cookie-cat__desc {
	margin: .35rem 0 0;
	color: rgba(255, 255, 255, .72);
	font-size: .82rem;
	line-height: 1.5;
}
.cardel-cookie-cat__toggle--locked {
	font-size: .75rem;
	color: rgba(255, 255, 255, .55);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
}
.cardel-cookie-cat__switch {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 22px;
	flex: 0 0 auto;
}
.cardel-cookie-cat__switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.cardel-cookie-cat__switch-track {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .25);
	border-radius: 22px;
	transition: background-color 200ms ease;
}
.cardel-cookie-cat__switch-track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform 200ms ease;
}
.cardel-cookie-cat__switch input:checked + .cardel-cookie-cat__switch-track {
	background: var(--cardel-teal);
}
.cardel-cookie-cat__switch input:checked + .cardel-cookie-cat__switch-track::after {
	transform: translateX(16px);
}
.cardel-cookie-cat__switch input:focus-visible + .cardel-cookie-cat__switch-track {
	box-shadow: 0 0 0 2px var(--cardel-teal), 0 0 0 4px rgba(43, 173, 184, .3);
}
.cardel-gallery-grid-section { background: var(--cardel-surface); border-top: 1px solid var(--cardel-border); }
.cardel-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .75rem;
}
@media (prefers-reduced-motion: reduce) {
  .cardel-hero__bg .cardel-hero__photo { transition: opacity 0.01ms; }
}
@media (max-width: 991.98px) {
  .cardel-hero__bg .cardel-hero__photo { object-position: center center; }
}
@media (max-width: 480px) {
  body:has(.roal-timer) .cardel-cookie-banner {
		bottom: calc(var(--roal-timer-h, 110px) + env(safe-area-inset-bottom, 0px));
	}
}
@media (max-width: 767.98px) {
  .cardel-cookie-banner__view[data-view="default"] {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767.98px) {
  .cardel-cookie-banner__icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cardel-cookie-cat__switch-track::after { transition: none; }
}
@media (forced-colors: active) {
  .cardel-cookie-banner { border-top: 3px solid CanvasText; }
  .cardel-cookie-cat__switch-track { border: 1px solid CanvasText; }
}
@media (max-width: 1199.98px) {
  .cardel-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .cardel-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}

  /* Vehicle submission modal: navy body so the Pardot form sits on brand colour
     rather than a white slab. Scoped to this dialog, not all .modal-body, so a
     future modal can still choose a light body. */
  #submitvehicle .modal-body { background-color: var(--navy); }

  /* Back control in the cookie preferences view now carries a visible label, so give it
     a gap and a proper 44px target instead of icon-only sizing. */
  .cardel-cookie-banner__back { gap: 6px; min-height: 44px; font-size: .9rem; font-weight: 600; }
  .cardel-cookie-banner__back:hover { color: #fff; }