/* Boardwalk Bikes — homepage variant × sentimental.bike. Colours = April demo tokens (verbatim hexes). */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url(/sv/fonts/barlow-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url(/sv/fonts/barlow-500-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url(/sv/fonts/barlow-600-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url(/sv/fonts/barlow-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 800; font-style: normal; font-display: swap; src: url(/sv/fonts/barlow-800-latin.woff2) format("woff2"); }
@font-face { font-family: "Barlow Fallback"; src: local("Arial"); size-adjust: 93%; ascent-override: 102%; descent-override: 20%; }

:root {
  /* April demo palette */
  --navy: #0B2A3C; --deep: #0E4D64; --orange: #FF6B35; --yellow: #FFD566; --amber: #FBBF24;
  --teal: #0097B2; --cream: #F5F0E8; --green: #22C55E; --body: #5A6B7A;
  /* --body one step darker for small text on the tan grounds (April --body is 3.9–4.4:1 there) */
  --body-2: #445362;
  /* one step deeper than --cream, same hue: sentimental's warm-grey hero role */
  --sand: #EDE5D8; --sand-2: #E2D7C4; --paper: #FBF8F3;
  --line: rgba(11, 42, 60, .16);

  --font: "Barlow", "Barlow Fallback", Arial, sans-serif;
  --text-hero: clamp(3rem, 1.5rem + 4.6vw, 5.6rem);
  --text-xl: clamp(2.7rem, 1.2rem + 4.8vw, 6rem);
  --text-2xl: clamp(2.1rem, 1.4rem + 2.1vw, 3.4rem);
  --text-lg: clamp(1.35rem, 1.1rem + .7vw, 1.75rem);
  --text-md: clamp(1.06rem, 1rem + .25vw, 1.2rem);
  --text-sm: .9375rem; --text-xs: .8125rem;
  --track-display: -0.022em;

  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px; --s-16: 128px;
  --px: clamp(16px, 5.5vw, 96px);
  --maxw: 1320px;
  --r-big: clamp(44px, 9vw, 130px);
  --r-card: 28px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-swap: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms; --dur-2: 280ms; --dur-3: 520ms; --dur-4: 900ms;
  --stagger: 80ms;
  --hdr-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--sand); color: var(--navy); font: 400 var(--text-md)/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
blockquote, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--px) * 2); margin-inline: auto; padding-inline: var(--px); }
.muted { color: var(--body-2); } /* April --body is 4.4:1 on the tan grounds; one step darker passes everywhere */
.small { font-size: var(--text-xs); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 40px; font-weight: 700; text-decoration: none; transition: top var(--dur-2) var(--ease-out); }
.skip:focus { top: 16px; }
#main:focus { outline: none; }

/* type */
.h1 { font-size: var(--text-hero); font-weight: 600; line-height: 1.1; letter-spacing: var(--track-display); }
.h1 .ln { display: block; overflow: clip; padding-bottom: .04em; }
.h1 .ln > span { display: inline-block; }
.h2 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.08; letter-spacing: var(--track-display); }
.h-xl { font-size: var(--text-xl); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; }
.h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-3); }
.sub { font-size: var(--text-lg); font-weight: 400; margin-top: var(--s-1); }
.lede { font-size: var(--text-lg); line-height: 1.5; }
.caps { text-transform: uppercase; font-weight: 700; font-size: var(--text-sm); letter-spacing: .03em; }

/* ▸ link */
.tri { display: inline-flex; align-items: center; gap: 14px; font-size: var(--text-md); font-weight: 500; text-decoration: none; padding-block: 6px; }
.tri i { width: 0; height: 0; border-left: 9px solid currentColor; border-block: 6px solid transparent; transition: transform var(--dur-2) var(--ease-out); }
.tri span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--dur-3) var(--ease-out); }
.tri:hover i, .tri:focus-visible i { transform: translateX(4px); }
.tri:hover span, .tri:focus-visible span { background-size: 100% 1.5px; }

/* pill CTA — navy, white disc inset left */
.pill { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 30px 6px 6px; border-radius: 72px; background: var(--navy); color: #fff; font-weight: 700; font-size: var(--text-sm); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.pill-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cream); color: var(--navy); transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.pill-ico .ico { width: 22px; height: 22px; }
.pill:hover, .pill:focus-visible { background: var(--deep); transform: translateY(-2px); }
.pill:hover .pill-ico, .pill:focus-visible .pill-ico { transform: rotate(-12deg) scale(1.06); background: var(--orange); }
.pill--sm { min-height: 50px; padding-right: 22px; }
.pill--sm .pill-ico { width: 38px; height: 38px; }
.pill--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.pill--ghost .pill-ico { background: var(--navy); color: var(--cream); }
.pill--ghost:hover, .pill--ghost:focus-visible { background: var(--navy); color: #fff; }
.disc-btn { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--navy); color: #fff; text-decoration: none; transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.disc-btn .ico { width: 22px; height: 22px; }
.disc-btn:hover, .disc-btn:focus-visible { background: var(--deep); transform: scale(1.05); }
.disc { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: var(--navy); color: var(--cream); }
.disc .ico { width: 40px; height: 40px; }
.disc--o { background: var(--teal); color: var(--navy); }

/* section modes — each band declares its scheme */
.mode-light { color-scheme: light; --mode-ink: var(--navy); }
.mode-tint { color-scheme: light; --mode-ink: var(--navy); }
.mode-dark { color-scheme: dark; --mode-ink: #fff; }

/* ------------------------------------------------------------ header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 40; transition: background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.hdr-in { display: flex; align-items: center; gap: var(--s-4); height: var(--hdr-h); padding-inline: clamp(16px, 2.2vw, 32px); transition: height var(--dur-3) var(--ease-out); }
.hdr.is-scrolled { background: rgba(237, 229, 216, .88); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.hdr.is-scrolled .hdr-in { height: 72px; }
.hdr.is-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand-disc { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--navy); flex: none; }
.mark, .mq-mark, .foot-water { display: block; background: url(/sv/img/mark.png) center / contain no-repeat; aspect-ratio: 600 / 346; }
.brand-disc .mark { width: 38px; transition: transform var(--dur-3) var(--ease-out); }
.brand:hover .brand-disc .mark { transform: translateX(3px) rotate(-4deg); }
.brand-wm { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.brand-wm b { font-weight: 700; }
.nav { display: flex; gap: clamp(20px, 2.6vw, 44px); margin-left: auto; white-space: nowrap; }
.nav a { position: relative; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding-block: 8px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-3) var(--ease-out); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.hdr-act { display: flex; align-items: center; gap: 10px; margin-left: clamp(12px, 2vw, 32px); }
.burger { display: none; }
.burger span, .burger span::before { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.burger span::before { content: ""; position: absolute; top: 6px; width: 14px; }
.burger span { transform: translateY(-3px); }
@media (max-width: 1239px) {
  .nav { display: none; }
  .burger { display: grid; }
  .hdr-act { margin-left: auto; }
}
@media (max-width: 640px) {
  .hdr-cta { display: none; }
  .brand-wm { font-size: 1.12rem; }
  .brand-disc { width: 46px; height: 46px; }
  .brand-disc .mark { width: 32px; }
  .disc-btn { width: 44px; height: 44px; }
  .hdr-in { gap: 10px; padding-inline: 14px; }
  .hdr-act { gap: 8px; margin-left: auto; }
  .brand { gap: 9px; min-width: 0; }
}
@media (max-width: 360px) { .brand-wm { font-size: 1rem; } .brand-disc { width: 42px; height: 42px; } }

/* mobile menu — <dialog> outside the header (top layer) */
.menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 clamp(16px, 5vw, 40px) 32px; border: 0; background: var(--sand); color: var(--navy); overflow-y: auto; }
.menu::backdrop { background: rgba(11, 42, 60, .5); }
.menu[open] { display: flex; flex-direction: column; animation: menuIn var(--dur-3) var(--ease-out); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.menu-bar { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.menu-close { position: relative; }
.menu-close::before, .menu-close::after { content: ""; position: absolute; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transform: rotate(45deg); }
.menu-close::after { transform: rotate(-45deg); }
.menu-nav { display: grid; gap: 4px; margin-block: var(--s-4); }
.menu-nav a { display: block; font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; padding-block: 6px; }
.menu-nav a[aria-current] { color: var(--deep); }
.menu-nav a:hover { color: var(--orange); }
.menu-foot { margin-top: auto; display: grid; gap: var(--s-2); justify-items: start; }
.menu-tue { font-weight: 700; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; min-height: clamp(640px, 82vh, 900px); background: var(--sand); overflow: clip; display: flex; flex-direction: column; }
.hero-copy { position: relative; z-index: 3; padding-top: calc(var(--hdr-h) + clamp(32px, 6vh, 72px)); }
.tris { display: grid; gap: 2px; margin-top: var(--s-3); justify-items: start; }
.hero-band { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: var(--cream); overflow: hidden; z-index: 1; }
.ghosts { position: absolute; inset: 0; transform: translate3d(calc(var(--mx, 0px) * -1.6), 0, 0); transition: transform 1.4s var(--ease-out); }
.ghost { position: absolute; left: 0; max-width: 100%; overflow: hidden; bottom: -.14em; font-size: clamp(9rem, 29vw, 30rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--sand-2); white-space: nowrap; opacity: 0; transform: translateY(8%); transition: opacity var(--dur-3) var(--ease-swap), transform var(--dur-4) var(--ease-out); user-select: none; }
.ghost.is-on { opacity: 1; transform: none; }
.ghost::before { content: attr(data-word); } /* decorative type lives in CSS; the band is aria-hidden */
.hero-stage { position: absolute; z-index: 2; right: 0; bottom: 58px; width: min(64vw, 1000px); aspect-ratio: 1.5; }
.hero-stage .hbikes { position: absolute; inset: 0; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform 1.2s var(--ease-out); }
.hbike { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 70% 100%; opacity: 0; transition: opacity var(--dur-3) var(--ease-swap), transform var(--dur-4) var(--ease-out); }
.hbike.is-on { opacity: 1; transform: none; animation: enterR var(--dur-4) var(--ease-out); }
@keyframes enterR { from { transform: translateX(6vw); } to { transform: none; } }
.hlink { position: absolute; inset: 0; display: block; }
.hlink:not(.is-on) { visibility: hidden; }
.hbike.is-out { opacity: 0; transform: translateX(-5vw); }
.hero-stage::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -8px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 42, 60, .28), transparent); z-index: -1; }
.hchips { position: absolute; left: 2%; top: 30%; }
.hchip { position: absolute; left: 0; top: 0; display: grid; gap: 2px; padding: 12px 18px; border-radius: 18px; background: var(--paper); box-shadow: 0 10px 30px rgba(11, 42, 60, .12); white-space: nowrap; opacity: 0; transform: translateY(10px) scale(.94); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.hchip.is-on { opacity: 1; transform: none; transition-delay: 260ms; }
.hchip b { font-size: var(--text-sm); font-weight: 700; }
.hchip span { font-size: var(--text-xs); font-weight: 600; color: var(--deep); }
.htabs { position: relative; z-index: 3; margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); height: 108px; }
.htab { display: flex; justify-content: flex-end; align-items: flex-start; padding: 22px clamp(18px, 3vw, 44px) 0; border-radius: var(--r-big) var(--r-big) 0 0; background: var(--sand-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; transition: background-color var(--dur-3) var(--ease-swap), color var(--dur-2) var(--ease-out); }
.htab + .htab { margin-left: calc(var(--r-big) * -1); padding-left: calc(var(--r-big) + 12px); }
.htab:nth-child(1) { z-index: 3; } .htab:nth-child(2) { z-index: 2; } .htab:nth-child(3) { z-index: 1; }
.htab:hover { background: #D8CBB4; }
.htab[aria-selected="true"] { background: var(--orange); color: var(--navy); }
.htab span { position: relative; }

/* ------------------------------------------------------------ rounded cream panel */
.panel { position: relative; z-index: 4; margin-top: -50px; background: var(--cream); border-radius: var(--r-big) var(--r-big) 0 0; }
.feats { padding-block: clamp(64px, 9vw, 120px) clamp(48px, 6vw, 80px); }
.feat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 72px); }
.feat h3 { font-size: var(--text-lg); font-weight: 600; margin: 28px 0 10px; letter-spacing: -0.01em; }
.feat p { font-size: var(--text-sm); max-width: 32ch; }
.feat p + p { margin-top: 6px; }
.feat .disc { transition: transform var(--dur-4) var(--ease-out); }
.js-motion .feat.reveal .disc { transform: scale(.8); }
.js-motion .feat.reveal.is-in .disc { transform: none; }
.rule { width: min(920px, 72%); margin: clamp(56px, 7vw, 96px) auto 0; border: 0; border-top: 1px solid var(--navy); }

/* ------------------------------------------------------------ story */
.story { background: var(--cream); padding-block: clamp(48px, 7vw, 112px) clamp(80px, 10vw, 150px); }
.story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 120px); align-items: center; }
.story-copy .h2 { margin-bottom: var(--s-4); }
.story-copy p:not(.eyebrow) { font-size: var(--text-sm); max-width: 46ch; }
.story-copy p + p { margin-top: var(--s-2); }
.story-copy .tri { margin-top: var(--s-3); }
.quarter { position: relative; }
.quarter a { display: block; overflow: hidden; border-radius: 0 0 0 48%; }
.quarter a:hover img { transform: scale(1.04); }
.quarter img { transition: transform 1.2s var(--ease-out);  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 66% 60%; border-radius: 0 0 0 48%; }
.quarter figcaption { margin-top: 14px; font-size: var(--text-xs); color: var(--body); text-align: right; }

/* ------------------------------------------------------------ group ride band */
.rideband { background: var(--navy); color: #fff; padding-top: clamp(72px, 9vw, 130px); }
.rideband-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-6); align-items: end; padding-bottom: clamp(48px, 6vw, 88px); }
.rideband-side p { font-size: var(--text-md); color: rgba(255, 255, 255, .86); }
.rideband-side p + p { margin-top: var(--s-2); }
.rideband-side .tri { margin-top: var(--s-3); color: var(--yellow); }
.ride-photo { overflow: hidden; border-radius: var(--r-big) var(--r-big) 0 0; }
.ride-photo a { display: block; }
.ride-photo a:hover img { filter: saturate(1.1); }
.ride-photo img { transition: filter var(--dur-4) var(--ease-out);  width: 100%; aspect-ratio: 1920 / 1440; object-fit: cover; transform: scale(1.06) translateY(var(--py, 0px)); will-change: transform; }

/* ------------------------------------------------------------ delivery statement */
.deliver { background: var(--sand); padding-block: clamp(96px, 12vw, 180px); }
.deliver .h2 { margin-bottom: var(--s-5); }
.deliver-note { margin-top: var(--s-4); font-weight: 700; font-size: var(--text-sm); letter-spacing: .02em; color: var(--deep); }
.sig { display: flex; align-items: center; gap: 14px; margin-top: var(--s-6); font-weight: 700; line-height: 1.2; }
.sig small { font-weight: 600; color: var(--body-2); font-size: var(--text-xs); }
.sig .brand-disc { width: 48px; height: 48px; }
.sig .brand-disc .mark { width: 34px; }

/* ------------------------------------------------------------ fleet — scroll-pinned configurator (signature) */
.fleet { position: relative; height: calc(var(--n) * 64vh + 100vh); background: var(--sand); }
.fleet-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 55% 52%, rgba(255, 255, 255, .16), transparent 70%), radial-gradient(120% 90% at 50% 120%, rgba(0, 0, 0, .14), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fleet-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--g); color: var(--ink); border-radius: var(--r-big) var(--r-big) 0 0; transition: background-color var(--dur-3) var(--ease-swap), color var(--dur-3) var(--ease-swap); }
.fleet-head { position: absolute; left: 0; right: 0; top: clamp(90px, 13vh, 130px); z-index: 3; }
.fleet-head .eyebrow { margin-bottom: 10px; }
.onames { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.oname::before { content: attr(data-word); } /* decorative outline type lives in CSS */
.oname { position: absolute; left: 50%; top: 21%; transform: translate(-50%, 6%); font-size: clamp(5.5rem, 17vw, 19rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: clamp(2px, .26vw, 4px) var(--ink); opacity: 0; white-space: nowrap; transition: opacity var(--dur-3) var(--ease-swap), transform var(--dur-4) var(--ease-out); }
.oname.is-on { opacity: .4; transform: translate(-50%, 0); }
.fbikes { position: absolute; z-index: 2; left: 57%; top: 48%; width: min(48vw, 760px, 84vh); aspect-ratio: 1.55; transform: translate(-50%, -50%); }
.fbike { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; opacity: 0; transform: scale(.96); transition: opacity var(--dur-3) var(--ease-swap), transform var(--dur-4) var(--ease-out); }
.fbike.is-on { opacity: 1; transform: none; animation: enterR var(--dur-4) var(--ease-out); }
.fbike.is-past { opacity: 0; transform: translateX(-10vw) scale(.96); }
.fshadow { position: absolute; left: 6%; right: 6%; bottom: -14px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .3), transparent); z-index: -1; }
.rates { position: absolute; z-index: 3; left: var(--px); bottom: clamp(28px, 5vh, 56px); width: min(360px, 27vw); }
.rate { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; transform: translateY(14px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); pointer-events: none; }
.rate.is-on { position: relative; opacity: 1; transform: none; pointer-events: auto; transition-delay: 140ms; }
.rkind { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.rname { font-size: var(--text-lg); font-weight: 600; margin: 2px 0 12px; }
.rrow { display: flex; flex-wrap: wrap; gap: 6px; }
.rrow + .rrow { margin-top: 6px; }
.rrow li { display: grid; min-width: 62px; padding: 8px 11px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.rrow span { font-size: .75rem; font-weight: 600; opacity: .85; }
.rrow b { font-size: 1.15rem; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.rnote { margin-top: 10px; font-size: var(--text-xs); font-weight: 500; max-width: 44ch; }
.dots { position: absolute; z-index: 3; right: clamp(20px, 7vw, 150px); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; }
.dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.dot i { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 0 currentColor; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.dot:hover i { transform: scale(1.2); }
.dot.is-on i { transform: scale(1.5); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px var(--g), 0 0 0 5px currentColor; }
.fleet-foot { position: absolute; z-index: 3; left: 50%; bottom: clamp(24px, 5vh, 52px); transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; }
.skipnext { font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; padding: 6px; }
.skipnext:hover { text-decoration: underline; }
.fprog { width: 160px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 20%, transparent); overflow: hidden; }
.fprog i { display: block; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(var(--p, 0)); }
.fleet-foot .pill { background: var(--navy); color: #fff; }
.fleet-stage[style*="--ink:#0B2A3C"] .pill, .fleet-stage.ink-navy .pill { background: var(--navy); }
.fleet-stage.ink-white .pill { background: #fff; color: var(--navy); }
.fleet-stage.ink-white .pill .pill-ico { background: var(--navy); color: #fff; }
.no-js .fleet { height: auto; }
.no-js .fleet-stage { position: relative; }
.no-js .dots, .no-js .fprog { display: none; }

/* ------------------------------------------------------------ e-bike vs golf cart */
.vs { background: var(--cream); padding-block: clamp(96px, 11vw, 170px); border-radius: var(--r-big) var(--r-big) 0 0; position: relative; z-index: 2; margin-top: calc(var(--r-big) * -1); }
.vs .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-6) clamp(32px, 5vw, 80px); align-items: center; }
.vs-head .h-xl { font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4.4rem); margin-bottom: var(--s-3); }
.vs-bike { width: 100%; filter: drop-shadow(0 26px 22px rgba(11, 42, 60, .16)); }
.js-motion .vs-bike.reveal { transform: translateY(40px) scale(.94); } /* never translate X: an unrevealed element must not widen the page */
.vs-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 24px); margin-top: var(--s-4); }
.vcard { padding: 28px 26px 32px; border-radius: var(--r-card); background: var(--paper); box-shadow: 0 1px 0 var(--line); transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.vcard:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(11, 42, 60, .12); }
.vcard .disc { width: 64px; height: 64px; }
.vcard .disc .ico { width: 30px; height: 30px; }
.vcard h3 { font-size: 1.3rem; font-weight: 600; margin: 22px 0 8px; }
.vcard p { font-size: var(--text-sm); color: var(--body); }

/* ------------------------------------------------------------ rules spec */
.rules { background: var(--sand); padding-block: clamp(88px, 10vw, 150px); }
.rules .h2 em { font-style: normal; color: var(--deep); }
.spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 72px); }
.spec-col { border-top: 1px solid var(--navy); padding-top: 22px; }
.spec-col h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 600; margin-bottom: 14px; }
.spec-col li { font-size: var(--text-sm); padding-block: 10px; border-bottom: 1px solid var(--line); }
.spec-col .tri { margin-top: 18px; }
.now { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 30px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--paper); }
.now:empty { display: none; }
.now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.now.is-yes { color: #11743A; }
.now.is-no { color: #B23F12; }

/* ------------------------------------------------------------ visit */
.visit { background: var(--sand); }
.visit-frame { position: relative; overflow: hidden; border-radius: var(--r-big) var(--r-big) 0 0; min-height: clamp(560px, 62vw, 860px); }
.visit-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.visit-tag { position: absolute; right: clamp(20px, 8vw, 160px); top: clamp(40px, 6vw, 88px); font-weight: 700; color: var(--navy); background: var(--cream); padding: 10px 18px; border-radius: 30px; }
.visit-card { position: absolute; right: var(--px); bottom: clamp(32px, 5vw, 72px); width: min(440px, 100% - 32px); padding: 32px 32px 30px; border-radius: var(--r-card); background: var(--cream); box-shadow: 0 30px 60px rgba(11, 42, 60, .25); }
.visit-card .eyebrow { margin-bottom: 10px; }
.visit-card .h3 a { text-decoration: none; }
.visit-card .h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.status { display: flex; align-items: center; gap: 9px; margin: 14px 0 10px; font-weight: 700; font-size: var(--text-sm); }
.status i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255, 107, 53, .5); }
.status.is-open i { background: var(--green); animation: pulse 2.2s var(--ease-out) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 100% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); } }
.hours { width: 100%; font-size: var(--text-sm); margin-bottom: 10px; }
.hours th { text-align: left; font-weight: 500; padding: 5px 0; }
.hours td { text-align: right; padding: 5px 0; font-variant-numeric: tabular-nums; }
.hours tr { border-bottom: 1px solid var(--line); }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; color: var(--deep); }
.visit-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }

/* ------------------------------------------------------------ brand marquee */
.mq { background: var(--yellow); overflow: hidden; padding-block: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-track { display: flex; width: max-content; }
.mq-track li { display: flex; align-items: center; gap: clamp(24px, 3vw, 44px); padding-right: clamp(24px, 3vw, 44px); white-space: nowrap; }
.mq-track a { font-size: clamp(1.8rem, 1rem + 2.4vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.mq-track a:hover { color: var(--deep); }
.mq-mark { width: clamp(52px, 5vw, 78px); }
.js-motion .mq-track.is-looping { animation: mq var(--mq-dur, 40s) linear infinite; }
.mq:hover .mq-track, .mq-track.is-paused { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ footer */
.foot { position: relative; overflow: hidden; background: var(--sand-2); padding-top: clamp(72px, 9vw, 130px); }
.foot-water { position: absolute; left: 50%; bottom: -34%; width: min(1100px, 120vw); transform: translateX(-50%); opacity: .045; pointer-events: none; }
.foot-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--s-6); }
.foot-lead .h3 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--track-display); margin-bottom: var(--s-2); }
.foot-lead p { font-size: var(--text-sm); max-width: 44ch; }
.soc { display: flex; gap: 10px; margin-top: var(--s-3); }
.soc a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: #fff; transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.soc a:hover { background: var(--orange); color: var(--navy); transform: translateY(-2px); }
.soc svg { width: 20px; height: 20px; }
.foot-links { display: grid; gap: 8px; align-content: start; }
.foot-links a { font-size: 1.12rem; font-weight: 600; text-decoration: none; }
.foot-links a:hover { color: var(--deep); text-decoration: underline; }
.foot .muted { color: var(--body-2); }
.foot-visit { font-size: var(--text-sm); display: grid; gap: var(--s-2); align-content: start; }
.foot-visit a { font-weight: 600; text-decoration: none; }
.foot-visit a:hover { text-decoration: underline; }
.foot-cta { position: relative; display: flex; justify-content: center; margin-top: clamp(64px, 8vw, 120px); }
.legal { position: relative; text-align: center; font-size: var(--text-xs); padding-block: var(--s-4) var(--s-5); }

/* ------------------------------------------------------------ motion */
.js-motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js-motion .reveal.is-in { opacity: 1; transform: none; }
.js-motion .h1 .ln > span { animation: lineRise var(--dur-4) var(--ease-out) both; animation-delay: calc(var(--l, 0) * 120ms + 80ms); }
.h1 .ln:nth-child(2) > span { --l: 1; } .h1 .ln:nth-child(3) > span { --l: 2; }
@keyframes lineRise { from { transform: translateY(105%); } to { transform: none; } }
.js-motion .hero-stage { animation: bikeIn 1.1s var(--ease-out) .35s both; }
@keyframes bikeIn { from { opacity: 0; transform: translateX(6vw); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .ride-photo a { display: block; }
.ride-photo a:hover img { filter: saturate(1.1); }
.ride-photo img { transition: filter var(--dur-4) var(--ease-out);  transform: none; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .vs-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-lead { grid-column: 1 / -1; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .rates { width: 300px; }
  .rrow li { min-width: 0; padding: 7px 9px; }
  .fbikes { left: 58%; width: 46vw; }
}
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-copy { padding-bottom: 12px; }
  .hero-stage { position: relative; right: auto; bottom: auto; width: 94%; margin: 0 0 18px auto; }
  .hero-band { height: 46%; }
  .hchips { top: -6px; left: 2%; }
  .htabs { height: 96px; }
  .htab { padding: 18px 12px 0; font-size: .68rem; letter-spacing: .02em; border-radius: 30px 30px 0 0; justify-content: center; text-align: center; }
  .htab + .htab { margin-left: -30px; padding-left: 36px; }
  .feat-row { grid-template-columns: 1fr; gap: 40px; }
  .feat { display: grid; grid-template-columns: 72px 1fr; column-gap: 20px; }
  .feat .disc { width: 72px; height: 72px; grid-row: span 3; }
  .feat .disc .ico { width: 32px; height: 32px; }
  .feat h3 { margin-top: 4px; }
  .story-grid { grid-template-columns: 1fr; }
  .rideband-head { grid-template-columns: 1fr; }
  .vs .wrap { grid-template-columns: 1fr; }
  .vs-bike { max-width: 520px; }
  .spec { grid-template-columns: 1fr; }
  .visit-frame { min-height: 0; border-radius: var(--r-big) var(--r-big) 0 0; }
  .visit-img { position: relative; aspect-ratio: 1 / 1; height: auto; }
  .visit-card { position: relative; right: auto; bottom: auto; width: auto; margin: -64px 16px 0; }
  .visit-tag { right: 16px; top: 24px; }
  .visit { padding-bottom: 56px; }
  /* configurator stacks: head / name+bike / dots / rates / cta */
  .fleet { height: calc(var(--n) * 56vh + 100vh); }
  .fleet-head { top: 84px; }
  .oname { top: 25%; font-size: 28vw; }
  .fbikes { left: 50%; top: 41%; width: 92vw; }
  .dots { top: calc(41% + 30vw + 14px); right: auto; left: 50%; transform: translateX(-50%); grid-auto-flow: column; gap: 2px; }
  .dot { width: 40px; height: 40px; }
  .dot i { width: 20px; height: 20px; }
  .rates { left: 16px; right: 16px; width: auto; top: calc(41% + 30vw + 66px); bottom: auto; }
  .rate { top: 0; bottom: auto; }
  .rname { font-size: 1.2rem; margin-bottom: 8px; }
  .rrow li { min-width: 0; padding: 6px 9px; }
  .rrow b { font-size: 1rem; }
  .rnote { display: none; }
  .fleet-foot .skipnext { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-height: 780px) { .dots { gap: 6px; } .dot { width: 38px; height: 38px; } .dot i { width: 22px; height: 22px; } }
@media (max-width: 600px) { .vs-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) and (max-height: 760px) {
  .fleet-head { top: 70px; }
  .fleet-head .h2 { font-size: 1.8rem; }
  .oname { top: 20%; }
  .fbikes { top: 36%; width: 76vw; }
  .dots { top: calc(36% + 25vw + 8px); }
  .rates { top: calc(36% + 25vw + 56px); }
  .rrow li { padding: 5px 8px; }
  .fprog { display: none; }
}

/* scroll lock behind the open menu */
html.menu-open, html.menu-open body { overflow: hidden; }

/* linked product shots react on hover */
.fbike-link { position: absolute; inset: 0; display: block; }
.fbike-link:not(.is-on) { pointer-events: none; }
.fbike-link:hover .fbike.is-on, .fbike-link:focus-visible .fbike.is-on { transform: translateY(-6px) scale(1.015); }
.vs-link { display: block; }
.vs-link:hover .vs-bike, .vs-link:focus-visible .vs-bike { transform: translateY(-8px) rotate(-1deg); }
.vs-bike { transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-4) var(--ease-out); }
.visit-img-link { position: absolute; inset: 0; display: block; }
.visit-img-link img { transition: transform 1.4s var(--ease-out); }
.visit-img-link:hover img { transform: scale(1.03); }

/* delivery flyer + bike map — the shop's own artifacts */
.deliver-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: center; max-width: calc(var(--maxw) + var(--px) * 2); }
.flyer { display: block; transform: rotate(3deg); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(11, 42, 60, .22); transition: transform var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out); }
.flyer:hover, .flyer:focus-visible { transform: rotate(0) translateY(-6px); box-shadow: 0 40px 70px rgba(11, 42, 60, .28); }
.map-card { display: grid; gap: 12px; margin-top: 22px; text-decoration: none; }
.map-card img { border-radius: 18px; transition: transform var(--dur-4) var(--ease-out); }
.map-card:hover img { transform: translateY(-4px); }
.map-card span { font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 900px) { .deliver-in { grid-template-columns: 1fr; } .flyer { max-width: 420px; } }

/* =================================================================== INTERIOR PAGES (sentimental Our Story / Dealership / Contact) */
.mode-light { background: var(--cream); color: var(--navy); }
.mode-tint { background: var(--sand); color: var(--navy); }
.mode-dark { background: var(--navy); color: #fff; }
.mode-dark .muted { color: rgba(255, 255, 255, .78); }
.mode-dark .tri { color: var(--yellow); }
.narrow { max-width: calc(860px + var(--px) * 2); }
.l2 { color: inherit; }
.note { font-weight: 700; margin-top: var(--s-2); }
.hint { font-size: var(--text-sm); color: var(--body-2); margin-top: var(--s-2); }
.mode-dark .hint { color: rgba(255, 255, 255, .78); }
.bigline { font-size: var(--text-lg); font-weight: 700; line-height: 1.25; margin-block: 6px var(--s-2); }
.lede-sm { font-size: var(--text-md); margin-block: var(--s-2) var(--s-4); }
.strong { font-weight: 700; }
.addr { display: flex; align-items: center; gap: 10px; margin-top: var(--s-3); font-weight: 600; }
.addr .ico { width: 22px; height: 22px; flex: none; }
.addr a { text-decoration: none; border-bottom: 2px solid var(--orange); }

/* shared section rhythm */
.board, .prem, .incl, .split, .brands, .gallery, .now-sec, .tides, .mapsec, .laws, .vids, .newssec, .tl-sec, .contact, .inside, .mapwide, .law, .partner, .motto-sec { padding-block: clamp(72px, 9vw, 140px); position: relative; }
.sechead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-bottom: clamp(32px, 4vw, 56px); }
.sechead .h2 { max-width: 26ch; }
.h1, .h2, .h-xl { text-wrap: balance; }
.h2 .l2, .h1--page .l2 { color: var(--deep); }
.mode-dark .h2 .l2 { color: var(--yellow); }
.cta-card .h2 .l2 { color: var(--deep); }
.sechead .eyebrow { margin-bottom: 14px; }

/* page hero */
.phero { position: relative; overflow: clip; padding-top: calc(var(--hdr-h) + clamp(40px, 7vh, 88px)); }
.phero-water { position: absolute; right: 0; top: 40px; width: min(820px, 64vw); opacity: .06; pointer-events: none; }
.vside { position: absolute; left: clamp(10px, 1.4vw, 26px); top: 46%; writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--text-xs); letter-spacing: .04em; white-space: nowrap; }
.vside b { font-weight: 700; text-transform: uppercase; }
.h1--page { font-size: clamp(2.5rem, 1.2rem + 4vw, 4.9rem); line-height: 1.05; letter-spacing: -0.028em; }
.phero-grid { position: relative; display: grid; gap: var(--s-5) clamp(32px, 6vw, 110px); }
.phero--band .phero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; padding-bottom: clamp(40px, 5vw, 72px); }
.phero-intro p { font-size: var(--text-md); }
.phero-intro p + p { margin-top: 10px; }
.phero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: var(--s-4); }
.phero-band { position: relative; margin: 0; }
.phero-band .lb { display: block; overflow: hidden; border-radius: var(--r-big) 0 0 0; }
.phero-band img { width: 100%; height: clamp(340px, 46vw, 680px); object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1.4s var(--ease-out); }
.phero-band .lb:hover img { transform: scale(1.025); }
.phero-band figcaption { position: absolute; right: var(--px); bottom: 20px; background: var(--cream); color: var(--navy); font-size: var(--text-xs); font-weight: 700; padding: 8px 14px; border-radius: 30px; }
.phero--side { padding-bottom: clamp(56px, 7vw, 110px); }
.phero--side .phero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
.phero--side .phero-intro { margin-top: var(--s-4); max-width: 52ch; }
.phero-side { margin: 0; }
.phero-side .lb { display: block; overflow: hidden; border-radius: 0 0 0 48%; }
.phero-side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.phero-side .lb:hover img { transform: scale(1.03); }
.js-motion .phero .h1 { animation: rise var(--dur-4) var(--ease-out) .05s both; }
.js-motion .phero-intro, .js-motion .phero-side, .js-motion .phero-band { animation: rise var(--dur-4) var(--ease-out) .22s both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* lightbox links */
.lb { display: block; cursor: zoom-in; }

/* rounded-top band with tabs (dealership filter band) */
.board { padding-top: 0; }
.board-band { background: var(--yellow); border-radius: var(--r-big) var(--r-big) 0 0; padding-block: clamp(56px, 7vw, 100px) clamp(32px, 4vw, 48px); margin-bottom: clamp(24px, 3vw, 40px); }
.board.mode-dark { padding-top: clamp(72px, 9vw, 140px); }
.tabsrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; }
.ptabs, .ftabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ptab, .ftab { min-height: 44px; padding: 10px 18px; border-radius: 40px; font-size: var(--text-sm); font-weight: 700; box-shadow: inset 0 0 0 2px var(--navy); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.ptab:hover, .ftab:hover { transform: translateY(-2px); }
.ptab[aria-pressed="true"], .ftab[aria-pressed="true"] { background: var(--navy); color: #fff; }
.ftab { box-shadow: none; text-decoration: underline transparent 2px; text-underline-offset: 6px; }
.ftab[aria-pressed="true"] { background: transparent; color: var(--navy); text-decoration-color: var(--navy); }
.ftab:hover { text-decoration-color: var(--orange); }

/* list rows: vertical label · outlined box · details · big figure */
.rlist { display: grid; }
.rrowi { position: relative; display: grid; grid-template-columns: 28px minmax(180px, 300px) minmax(0, 1fr) auto; gap: var(--s-3) clamp(20px, 3vw, 48px); align-items: center; padding-block: 28px; border-bottom: 1px solid var(--line); transition: opacity var(--dur-3) var(--ease-out); }
.rrowi[hidden] { display: none; }
.vlabel { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; justify-self: center; white-space: nowrap; }
.rbox { display: grid; place-items: center; aspect-ratio: 1.55; padding: 12px 18px; border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy); transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.rbox { min-width: 0; overflow: hidden; }
.rbox img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-4) var(--ease-out); }
.rbox:hover { box-shadow: inset 0 0 0 2.5px var(--orange); }
.rbox:hover img { transform: translateX(6px) scale(1.04); }
.rinfo h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; text-transform: capitalize; }
.rspec, .rkind2 { font-size: var(--text-sm); font-weight: 600; color: var(--deep); margin-top: 4px; }
.rkind2 { text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-xs); margin: 0 0 4px; }
.plist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.plist + .plist { margin-top: 6px; }
.plist li { display: grid; min-width: 70px; padding: 7px 12px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.plist span { font-size: .75rem; font-weight: 600; color: var(--body-2); }
.plist b { font-size: 1.1rem; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.rlist[data-period] .rrowi li.is-col { background: var(--navy); color: #fff; }
.rlist[data-period] .rrowi li.is-col span { color: rgba(255, 255, 255, .8); }
.rnote2 { font-size: var(--text-xs); font-weight: 500; margin-top: 10px; max-width: 60ch; color: var(--body-2); }
.rbig { display: grid; justify-items: end; text-align: right; min-width: 120px; }
.rper { font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rbig b { font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.8rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums; display: inline-block; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.rbig b.out { opacity: 0; transform: translateY(-40%); }
.rbig b.in { animation: flipIn var(--dur-3) var(--ease-out); }
@keyframes flipIn { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
.rlist--dark .rrowi { border-color: rgba(255, 255, 255, .18); }
.rlist--dark .plist li { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.rlist--dark .plist span, .rlist--dark .rnote2 { color: rgba(255, 255, 255, .82); }
.rlist--dark .rspec { color: var(--yellow); }
.mtb-more { margin-top: clamp(40px, 5vw, 72px); align-items: center; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.tile { display: grid; gap: 6px; text-decoration: none; }
.tile-box { display: grid; place-items: center; aspect-ratio: 1.3; padding: 14px; border-radius: 24px; background: var(--cream); transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.tile, .tile-box { min-width: 0; }
.tile-box img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-4) var(--ease-out); }
.tile:hover .tile-box { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(0, 0, 0, .22); }
.tile:hover .tile-box img { transform: translateX(6px); }
.tile-n { font-weight: 700; font-size: 1.1rem; margin-top: 8px; }
.tile-p { font-size: var(--text-sm); }
.tile-p b { font-size: 1.15rem; }
.tiles--light .tile-box { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy); }

/* features row reuse on interior */
.feat-row--4 { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.feat-row--4 .disc { width: 72px; height: 72px; }
.feat-row--4 .disc .ico { width: 32px; height: 32px; }
.disc--sm { width: 48px; height: 48px; flex: none; }
.disc--sm .ico { width: 22px; height: 22px; }

/* delivery row */
.deliv { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.deliv-pic .lb { overflow: hidden; border-radius: var(--r-card); transform: rotate(-2deg); box-shadow: 0 30px 60px rgba(11, 42, 60, .2); transition: transform var(--dur-4) var(--ease-out); }
.deliv-pic .lb:hover { transform: rotate(0) translateY(-6px); }

/* quote card (sentimental's lime card → April yellow) */
.qcard { margin: var(--s-3) 0; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-card); background: var(--yellow); color: var(--navy); }
.qcard p { font-size: var(--text-md); line-height: 1.55; }
.qcard p::before { content: "“"; display: block; font-size: 3.2rem; font-weight: 800; line-height: .6; margin-bottom: 8px; }
.qcard footer { display: flex; align-items: center; gap: 12px; margin-top: var(--s-3); }
.qcard .brand-disc { width: 40px; height: 40px; }
.qcard .brand-disc .mark { width: 28px; }
.qcard cite { font-style: normal; font-weight: 700; font-size: var(--text-sm); }
.qcard--dark { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.qcard--wide { max-width: 980px; margin: clamp(32px, 4vw, 56px) auto 0; }

/* ticks */
.ticks { display: grid; gap: 10px; margin-top: var(--s-3); }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-sm); }
.ticks .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--deep); }
.mode-dark .ticks .ico { color: var(--yellow); }
.ticks--big li { font-size: var(--text-md); font-weight: 600; }

/* split + corner photos */
.split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.split-grid--top { align-items: start; }
.split-grid .h2 { margin-bottom: var(--s-3); }
.split-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: var(--s-4); }
.corner { margin: 0; }
.corner .lb { overflow: hidden; border-radius: 0 0 0 42%; }
.corner--r .lb { border-radius: 0 0 42% 0; }
.corner img { width: 100%; height: auto; transition: transform 1.4s var(--ease-out); }
.corner .lb:hover img { transform: scale(1.03); }
.corner figcaption { font-size: var(--text-xs); margin-top: 10px; text-align: right; color: var(--body-2); }
.corner--sm .lb { border-radius: 0 0 0 36%; }
.stack { position: relative; }
.stack-sm { width: 46%; margin: -18% 0 0 auto; position: relative; box-shadow: 0 30px 60px rgba(11, 42, 60, .22); border-radius: 0 0 0 36%; }
.stack-sm .lb { border: 6px solid var(--cream); }

/* service */
.diag { margin-block: var(--s-3); padding: 20px 22px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy); }
.diag-t { font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips li { padding: 6px 14px; border-radius: 30px; background: var(--navy); color: #fff; font-weight: 700; font-size: var(--text-sm); }
.svc { display: grid; gap: 10px; }
.svc li { display: flex; align-items: center; gap: 14px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.brands-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.logos li { display: grid; gap: 8px; justify-items: center; font-size: var(--text-xs); font-weight: 700; }
.logobox { display: grid; place-items: center; width: 100%; aspect-ratio: 1.5; padding: 16px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--navy); transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.logos li, .logobox { min-width: 0; }
.logobox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logobox:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2.5px var(--orange), 0 16px 30px rgba(11, 42, 60, .12); }
.brands-grid .pill { margin-top: var(--s-3); }
.gal { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 14vw, 220px); gap: 14px; }
.gal figure { margin: 0; position: relative; }
.gal .lb { height: 100%; overflow: hidden; border-radius: 22px; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gal .lb:hover img { transform: scale(1.05); }
.gal figcaption { position: absolute; left: 12px; bottom: 12px; background: var(--cream); padding: 5px 12px; border-radius: 20px; font-size: var(--text-xs); font-weight: 700; pointer-events: none; }
.gal { grid-template-columns: repeat(5, 1fr); }
.g1 { grid-column: span 2; grid-row: span 2; } .g2, .g3 { grid-column: span 1; } .g4, .g5 { grid-row: span 2; }
.g1 { grid-area: 1 / 1 / 3 / 3; } .g2 { grid-area: 1 / 3; } .g3 { grid-area: 2 / 3; } .g4 { grid-area: 1 / 4 / 3 / 5; } .g5 { grid-area: 1 / 5 / 3 / 6; }
.g4 img { object-fit: contain; background: #fff; }
.g1 img { object-position: 50% 15%; }

/* e-bikes */
.vsx-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.vsx-bike img { width: 100%; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35)); transition: transform var(--dur-4) var(--ease-out); }
.vsx-bike:hover img { transform: translateY(-8px) rotate(-1deg); }
.vsl { display: grid; gap: 4px; margin-top: var(--s-3); }
.vsl li { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.vsl span { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); }
.vsl .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.vyes { font-weight: 700; }
.vyes .ico { color: var(--green); }
.vno { color: rgba(255, 255, 255, .78); }
.vno .ico { color: var(--orange); }
.pcard { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-big); background: #fff; }
.pcard-bike img { width: 100%; transition: transform var(--dur-4) var(--ease-out); }
.pcard-bike:hover img { transform: translateX(8px); }
.pcard-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: var(--s-3); }
.acc { border-top: 1px solid var(--navy); padding-block: 4px; }
.acc:last-of-type { border-bottom: 1px solid var(--navy); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; cursor: pointer; font-weight: 700; font-size: var(--text-md); list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); flex: none; transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; background: #fff; }
.acc summary i::after { transform: rotate(90deg); transition: transform var(--dur-3) var(--ease-out); }
.acc[open] summary i::after { transform: rotate(0); }
.acc summary:hover i { background: var(--orange); }
.acc p { font-size: var(--text-sm); padding-bottom: 18px; max-width: 72ch; }

/* ride guide */
.now-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.rcheck { border-radius: var(--r-card); background: var(--navy); color: #fff; padding: clamp(24px, 3vw, 36px); }
.rcheck-t { font-size: var(--text-lg); font-weight: 700; }
.rcheck-now { font-size: var(--text-sm); color: rgba(255, 255, 255, .8); margin-top: 4px; }
.rcheck-list { display: grid; gap: 10px; margin-top: var(--s-3); }
.rcheck-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .07); border-left: 4px solid rgba(255, 255, 255, .3); }
.rcheck-list li.ok { border-left-color: var(--green); }
.rcheck-list li.no { border-left-color: var(--orange); }
.z-name { font-weight: 700; }
.z-law { grid-column: 1; font-size: var(--text-xs); color: rgba(255, 255, 255, .72); }
.z-state { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 6px 12px; border-radius: 20px; font-size: .75rem; letter-spacing: .05em; background: rgba(255, 255, 255, .12); }
.ok .z-state { background: var(--green); color: var(--navy); }
.no .z-state { background: var(--orange); color: var(--navy); }
.z-next { grid-column: 1 / -1; font-size: var(--text-xs); color: rgba(255, 255, 255, .86); }
.rcheck-foot { font-size: var(--text-xs); color: rgba(255, 255, 255, .72); margin-top: var(--s-2); }
.season { padding: 24px; border-radius: var(--r-card); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy); }
.season-t { font-weight: 700; margin-bottom: 14px; }
.year { position: relative; height: 44px; border-radius: 22px; background: var(--sand-2); overflow: hidden; }
.yr-in { position: absolute; top: 0; bottom: 0; left: var(--ys, 33%); width: var(--yw, 35%); display: grid; place-items: center; background: var(--orange); color: var(--navy); font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.yr-now { position: absolute; top: -2px; bottom: -2px; left: var(--yn, 50%); width: 3px; background: var(--navy); }
.yr-now::after { content: "Today"; position: absolute; top: 50%; left: 6px; transform: translateY(-50%); font-size: .7rem; font-weight: 700; font-style: normal; background: var(--paper); padding: 1px 6px; border-radius: 8px; }
.season-legend { display: grid; gap: 8px; margin-top: 14px; font-size: var(--text-xs); }
.season-legend li { display: flex; gap: 10px; align-items: flex-start; }
.sw { width: 14px; height: 14px; border-radius: 4px; flex: none; margin-top: 2px; }
.sw-in { background: var(--orange); } .sw-out { background: var(--sand-2); box-shadow: inset 0 0 0 1px var(--line); }
.rule-cards { display: grid; gap: 14px; margin-top: 14px; }
.rulec { padding: 24px; border-radius: var(--r-card); background: var(--paper); }
.rulec h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.rulec h3 a { text-decoration: none; border-bottom: 2px solid var(--orange); }
.rulec p { font-size: var(--text-sm); }
.rulec p + p { margin-top: 8px; }
.rulec--big { background: var(--sand); }
.rulec-link { margin-top: var(--s-3); }
.tides .sechead .h2 { max-width: 18ch; }
.tidebox { border-radius: var(--r-card); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); padding: clamp(20px, 3vw, 32px); }
.tb-t { font-weight: 700; font-size: var(--text-lg); }
.tb-rule { font-size: var(--text-sm); color: rgba(255, 255, 255, .82); }
.tb-chart { position: relative; margin-block: var(--s-3); height: 180px; border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, .18); }
.tb-chart svg { width: 100%; height: 100%; }
.tb-chart .water { fill: var(--teal); opacity: .75; }
.tb-chart .win { fill: var(--yellow); opacity: .28; }
.tb-chart .lbl { fill: #fff; font: 700 13px var(--font); }
.tb-chart .nowline { stroke: var(--orange); stroke-width: 3; }
.tb-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-sm); padding: 16px; text-align: center; }
.tb-loading a { color: var(--yellow); }
.tb-chart.ready .tb-loading { display: none; }
.tb-list { display: grid; gap: 8px; }
.tb-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); font-size: var(--text-sm); }
.tb-list li b { color: var(--yellow); }
.tb-list li.past { opacity: .55; }
.tb-src { font-size: var(--text-xs); color: rgba(255, 255, 255, .72); margin-top: var(--s-2); }
.tb-src a { color: #fff; }
.mapkey { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: var(--s-3); font-size: var(--text-sm); font-weight: 600; }
.mapkey li { display: flex; gap: 10px; align-items: center; }
.mapkey li::before { content: ""; width: 26px; height: 5px; border-radius: 3px; background: var(--c); }
.k0 { --c: #1E88E5; } .k1 { --c: #8E24AA; } .k2 { --c: #43A047; } .k3 { --c: #FB8C00; } .k4 { --c: #FDD835; } .k5 { --c: #E53935; }
.mapfac { position: relative; display: block; overflow: hidden; border-radius: 0 0 0 42%; }
.mapfac img { width: 100%; aspect-ratio: 1.2; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.mapfac span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 40px; background: var(--navy); color: #fff; font-weight: 700; white-space: nowrap; transition: background-color var(--dur-2) var(--ease-out); }
.mapfac span .ico { width: 20px; height: 20px; }
.mapfac:hover img { transform: scale(1.04); }
.mapfac:hover span { background: var(--deep); }
.map-live { display: block; width: 100%; height: clamp(360px, 44vw, 560px); border: 0; border-radius: var(--r-card); }
.keyimg { margin-top: 14px; overflow: hidden; border-radius: 18px; }
.map-under { margin-top: 14px; }

/* videos */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vgrid > div:first-child { grid-column: span 2; grid-row: span 2; }
.vgrid--2 { grid-template-columns: 1fr 1fr; }
.vgrid--2 > div:first-child { grid-column: auto; grid-row: auto; }
.vid { position: relative; display: block; overflow: hidden; border-radius: 22px; background: #000; height: 100%; }
.vid img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .85; transition: transform 1.2s var(--ease-out), opacity var(--dur-3) var(--ease-out); }
.vid:hover img { transform: scale(1.04); opacity: 1; }
.vplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--yellow); color: var(--navy); transition: transform var(--dur-3) var(--ease-out); }
.vplay .ico { width: 28px; height: 28px; fill: currentColor; }
.vid:hover .vplay { transform: translate(-50%, -50%) scale(1.1); }
.vtitle { position: absolute; left: 14px; right: 14px; bottom: 14px; color: #fff; font-weight: 700; font-size: var(--text-sm); text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.vid-live { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 22px; }

/* group rides news list */
.newslist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); }
.news { display: grid; grid-template-columns: 22px 150px minmax(0, 1fr); gap: 20px; align-items: center; padding-block: 24px; border-bottom: 1px solid var(--line); }
.news-pic { overflow: hidden; border-radius: 18px; }
.news-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.news-pic:hover img { transform: scale(1.05); }
.news h3 { font-size: 1.2rem; font-weight: 700; }
.news ul { display: grid; gap: 4px; margin-top: 8px; font-size: var(--text-sm); }
.icecream { margin-top: clamp(40px, 5vw, 72px); padding: clamp(24px, 3vw, 40px); border-radius: var(--r-card); background: var(--yellow); max-width: 760px; }

/* about */
.motto { text-align: center; }
.motto p { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.motto footer { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--s-4); font-weight: 700; }
.motto cite { font-style: normal; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 32px); counter-reset: t; }
.timeline li { position: relative; padding-top: 30px; border-top: 2px solid var(--navy); }
.timeline li::before { content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--sand); }
.timeline b { display: block; font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px; }
.timeline p { font-size: var(--text-sm); }
.storytext p:not(.eyebrow) { font-size: var(--text-md); margin-top: var(--s-2); }
.sign { font-weight: 700; font-size: var(--text-lg); }
.gchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-4); }
.gchip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 40px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy); text-decoration: none; font-weight: 600; font-size: var(--text-sm); transition: transform var(--dur-2) var(--ease-out); }
.gchip:hover { transform: translateY(-2px); }
.gchip b { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 20px; background: var(--navy); color: #fff; font-size: 1rem; }
.gchip b .ico { width: 20px; height: 20px; }

/* contact */
.hours--big { font-size: var(--text-md); margin-top: var(--s-2); }
.hours--big th, .hours--big td { padding: 10px 0; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; color: var(--deep); }
.ccards { display: grid; gap: 10px; }
.ccard { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy); text-decoration: none; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.ccard span:nth-child(2) { display: grid; font-size: var(--text-sm); overflow-wrap: anywhere; }
.ccard b { font-size: 1.05rem; }
.ccard .cgo { width: 22px; height: 22px; transition: transform var(--dur-3) var(--ease-out); }
.ccard:hover { transform: translateX(6px); box-shadow: inset 0 0 0 2.5px var(--orange); }
.ccard:hover .cgo { transform: translateX(4px); }
.contact .soc { margin-top: var(--s-3); }
.contact .muted { margin-top: var(--s-3); color: var(--body-2); }
.ingrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.incard { position: relative; display: block; overflow: hidden; border-radius: 26px; text-decoration: none; }
.incard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.incard span { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 30px; background: var(--cream); color: var(--navy); font-weight: 700; }
.incard span .ico { width: 18px; height: 18px; transition: transform var(--dur-3) var(--ease-out); }
.incard:hover img { transform: scale(1.05); }
.incard:hover span .ico { transform: translateX(4px); }

/* closing CTA card */
.cta { padding-block: clamp(72px, 9vw, 130px); }
.cta-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-big); background: #fff; }
.cta-bike { width: 100%; filter: drop-shadow(0 22px 20px rgba(11, 42, 60, .16)); transition: transform var(--dur-4) var(--ease-out); }
.cta-card:hover .cta-bike { transform: translateX(8px); }
.cta-mark { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--navy); }
.cta-mark .mark { width: 62%; }
.cta-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: var(--s-3); }
.pill--light { background: #fff; color: var(--navy); }
.pill--light .pill-ico { background: var(--navy); color: #fff; }
.pill--light:hover, .pill--light:focus-visible { background: var(--yellow); }

/* 404 */
.nf-links { display: grid; gap: 2px; margin-top: var(--s-4); }
.nf-bike img { width: 100%; }

/* lightbox */
.lightbox { width: min(1200px, 94vw); max-width: none; max-height: 92vh; padding: 0; border: 0; border-radius: 22px; background: var(--navy); color: #fff; overflow: visible; }
.lightbox::backdrop { background: rgba(11, 42, 60, .82); }
.lightbox[open] { animation: menuIn var(--dur-3) var(--ease-out); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; width: 100%; max-height: calc(92vh - 60px); object-fit: contain; border-radius: 22px 22px 0 0; background: var(--paper); }
.lightbox figcaption { padding: 16px 20px; font-weight: 700; font-size: var(--text-sm); }
.lb-close { position: absolute; top: -18px; right: -18px; z-index: 2; background: var(--orange); color: var(--navy); }
.lb-close::before, .lb-close::after { content: ""; position: absolute; width: 18px; height: 2px; background: var(--navy); border-radius: 2px; transform: rotate(45deg); }
.lb-close::after { transform: rotate(-45deg); }
html.lb-open, html.lb-open body { overflow: hidden; }

/* interior responsive */
@media (max-width: 1100px) {
  .feat-row--4, .tiles { grid-template-columns: repeat(2, 1fr); }
  .rrowi { grid-template-columns: 24px minmax(150px, 220px) minmax(0, 1fr); }
  .rbig { grid-column: 3; justify-items: start; text-align: left; }
  .pcard, .cta-card { grid-template-columns: 1fr 1fr; }
  .pcard > div:first-child, .cta-card > .h2 { grid-column: 1 / -1; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .newslist { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .phero--band .phero-grid, .phero--side .phero-grid, .split-grid, .now-grid, .vsx-grid, .brands-grid, .deliv { grid-template-columns: 1fr; }
  .vside { display: none; }
  .phero-side { max-width: 520px; }
  .phero-side img { aspect-ratio: 1; }
  .phero-band img { height: clamp(240px, 62vw, 420px); }
  .phero-band figcaption { right: 16px; bottom: 12px; }
  .rrowi { grid-template-columns: 22px 1fr; gap: 14px 16px; align-items: start; }
  .rrowi .vlabel { grid-row: span 3; align-self: stretch; }
  .rbox, .rinfo, .rbig { grid-column: 2; }
  .rbox { max-width: 360px; }
  .rbig { display: flex; align-items: baseline; gap: 12px; }
  .tabsrow { flex-direction: column; }
  .ptabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-inline: calc(var(--px) * -1); padding-inline: var(--px); scrollbar-width: none; }
  .ptab { flex: none; }
  .pcard, .cta-card { grid-template-columns: 1fr; }
  .pcard-bike, .cta-pic { max-width: 360px; }
  .vgrid, .vgrid--2 { grid-template-columns: 1fr; }
  .vgrid > div:first-child { grid-column: auto; grid-row: auto; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; }
  .gal figure { grid-area: auto !important; grid-column: span 1; grid-row: span 1; } .gal .g1 { grid-column: span 2; }
  .ingrid { grid-template-columns: 1fr; }
  .incard img { aspect-ratio: 16 / 10; }
  .vsl li { grid-template-columns: 1fr; gap: 6px; }
  .mapkey { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .stack-sm { width: 52%; }
  .lb-close { top: 8px; right: 8px; }
}
@media (max-width: 560px) {
  .feat-row--4, .tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .feat-row--4 { grid-template-columns: 1fr; }
  .news { grid-template-columns: 18px 110px minmax(0, 1fr); gap: 14px; }
  .timeline { grid-template-columns: 1fr; }
}

.linklist { display: grid; gap: 4px; margin-top: var(--s-3); }
.linklist a { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: var(--text-md); text-decoration: none; }
.linklist .ico { width: 22px; height: 22px; flex: none; transition: transform var(--dur-3) var(--ease-out); }
.linklist a:hover .ico { transform: translateX(6px); }
.linklist a:hover { color: var(--deep); }
.phero--band .vside { top: calc(var(--hdr-h) + 60px); }
.months { display: block; width: 100%; height: 18px; margin-top: 6px; overflow: visible; }
.months line { stroke: var(--navy); stroke-width: 1; vector-effect: non-scaling-stroke; }
.months text { font: 700 9px var(--font); fill: var(--body-2); text-anchor: middle; }
.law-bike { display: block; width: min(380px, 70%); margin: var(--s-6) auto 0; }
.law-bike img { width: 100%; transition: transform var(--dur-4) var(--ease-out); }
.law-bike:hover img { transform: translateX(8px); }
.tl-in { margin-top: clamp(72px, 9vw, 130px); }
.cta-pic a { display: block; }
.lightbox { background-image: radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, .08), transparent 70%); }
/* grid children may shrink below their longest word; long pill labels wrap instead of widening the page */
.split-grid > *, .now-grid > *, .phero-grid > *, .vsx-grid > *, .brands-grid > *, .deliv > *, .pcard > *, .cta-card > *, .rinfo { min-width: 0; }
.pill { max-width: 100%; }
.pill span { white-space: normal; min-width: 0; line-height: 1.2; text-wrap: balance; }
.mapfac span { white-space: normal; max-width: 86%; text-align: center; }
@media (max-width: 900px) { .ptabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.logobox { height: auto; }
.logobox img { width: 100%; height: 100%; }
.logos li { align-content: start; }
@media (max-width: 900px) { .stack-sm { width: 60%; margin-top: 16px; } }

/* =================================================================== CATEGORY COLOURS (X 2026-09-29)
   "love the strong blue being the leader, but it's a little too blue" + "assign a different colour to each service category".
   Navy stays the leader (type, pills, header). Each part of the shop owns one colour: --c-* is the fill (navy text ≥5.2:1 on it),
   --i-* is its text shade for light grounds (≥4.6:1 on sand/cream/paper). Teal fill is a tint of the April teal so navy reads on it. */
:root {
  --c-rentals: #FF6B35; --i-rentals: #B23F12;
  --c-ebikes: #3FB6CC;  --i-ebikes: #00697F;
  --c-service: #A392F2; --i-service: #5B42C4;
  --c-guide: #FFD566;   --i-guide: #7F5700;
  --c-rides: #F47A9B;   --i-rides: #AD2350;
  --c-trails: #4CC97A;  --i-trails: #17663A;
  --cat: var(--yellow); --cat-ink: var(--deep);
}
[data-cat="rentals"] { --cat: var(--c-rentals); --cat-ink: var(--i-rentals); }
[data-cat="ebikes"]  { --cat: var(--c-ebikes);  --cat-ink: var(--i-ebikes); }
[data-cat="service"] { --cat: var(--c-service); --cat-ink: var(--i-service); }
[data-cat="guide"]   { --cat: var(--c-guide);   --cat-ink: var(--i-guide); }
[data-cat="rides"]   { --cat: var(--c-rides);   --cat-ink: var(--i-rides); }
[data-cat="trails"]  { --cat: var(--c-trails);  --cat-ink: var(--i-trails); }

/* type + labels */
.h2 .l2, .h1--page .l2, .cta-card .h2 .l2 { color: var(--cat-ink); }
.mode-dark .h2 .l2 { color: var(--yellow); }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 5px; border-radius: 3px; background: var(--cat); margin-right: 10px; vertical-align: 2px; }
.vside b { color: var(--cat-ink); }
.rules .h2 em { color: var(--cat-ink); }
.deliver-note { color: var(--cat-ink); }

/* fills */
.board-band { background: var(--cat); }
.disc, .disc--o { background: var(--cat); color: var(--navy); }
.qcard { background: var(--cat); }
.qcard--paper { background: var(--paper); color: var(--navy); box-shadow: none; }
.rbox:hover, .logobox:hover, .ccard:hover { box-shadow: inset 0 0 0 2.5px var(--cat-ink); }
.chips li { background: var(--cat-ink); }
.season .sw-in, .yr-in { background: var(--c-guide); }

/* the category band (replaces most navy bands) */
.mode-cat { background: var(--cat); color: var(--navy); }
.mode-cat .h2 .l2, .mode-cat .muted, .mode-cat .hint, .mode-cat .tri, .mode-cat .corner figcaption, .mode-cat .rnote2, .mode-cat .plist span { color: var(--navy); }
.mode-cat .eyebrow::before { background: var(--navy); }
.mode-cat .h2 .l2 { font-style: italic; }
.mode-cat .rrowi { border-color: rgba(11, 42, 60, .22); }
.mode-cat .ticks .ico { color: var(--navy); }
.rideband.mode-cat { background: var(--cat); color: var(--navy); }
.rideband.mode-cat .rideband-side p { color: var(--navy); }
.rideband.mode-cat .rideband-side .tri { color: var(--navy); }

/* hero accents: a block of the page's colour behind the picture */
.phero-side .lb { box-shadow: 18px 18px 0 var(--cat); }
.phero-band .lb { box-shadow: 0 -14px 0 var(--cat); }
.phero-band { margin-top: 14px; }
.cta-pic { background: radial-gradient(circle at 50% 56%, var(--cat) 0 44%, transparent 45%); }
.deliver .flyer, .deliv-pic .lb { box-shadow: 18px 18px 0 var(--cat); }
.quarter a { box-shadow: -16px 16px 0 var(--c-rides); }

/* wayfinding: every link to a part of the shop carries its colour */
.nav a[data-cat]::after { background: var(--cat); height: 3px; }
.nav a[aria-current]::after { transform: scaleX(1); }
.menu-nav a[data-cat]::before, .foot-links a[data-cat]::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--cat); margin-right: 12px; vertical-align: 2px; }
.menu-nav a[data-cat]::before { width: 16px; height: 16px; vertical-align: 6px; }
.mode-cat .rspec, .mode-cat .rkind2, .mode-cat .rper, .mode-cat .tile-p { color: var(--navy); }
/* the tab band is a category fill too — same text rule as .mode-cat: navy on colour */
.board-band .h2 .l2, .board-band .hint, .board-band .muted, .board-band .tri { color: var(--navy); }
.board-band .h2 .l2 { font-style: italic; }
.board-band .eyebrow::before { background: var(--navy); }