/* Custom Bikes Service — design tokens. GENERATED by brand/tokens/tokens.mjs — do not edit by hand. */
@font-face { font-family: 'Jost'; src: url('../fonts/jost-latin-wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; }
:root {
  --cbs-graphite: #101315;
  --cbs-graphite-2: #171B1E;
  --cbs-graphite-3: #1E2226;
  --cbs-rule-dark: #2B3035;
  --cbs-bead: #F3F4F5;
  --cbs-white: #FFFFFF;
  --cbs-rule-light: #D3D8DC;
  --cbs-ink: #121518;
  --cbs-ink-muted: #545D65;
  --cbs-on-dark: #E6E9EC;
  --cbs-on-dark-muted: #9AA2A9;
  --cbs-titanium: #8A939B;
  --cbs-titanium-light: #BAC1C7;
  --cbs-titanium-ink: #79828A;
  --cbs-blue-dark: #7F95E0;
  --cbs-blue-light: #3E5BB5;
  --cbs-heat: linear-gradient(90deg, #C9A65A, #A8703F 35%, #7B5AA6 66%, #4F74C9);
  --cbs-font: 'Jost', Futura, 'Century Gothic', system-ui, sans-serif;
  --cbs-display-size: clamp(2.1rem, 1.2rem + 4.6vw, 4.2rem); --cbs-display-weight: 300; --cbs-display-tracking: 0.2em; --cbs-display-leading: 1.05;
  --cbs-h2-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); --cbs-h2-weight: 400; --cbs-h2-tracking: 0.01em; --cbs-h2-leading: 1.15;
  --cbs-h3-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); --cbs-h3-weight: 400; --cbs-h3-tracking: 0.01em; --cbs-h3-leading: 1.25;
  --cbs-body-size: 1.0625rem; --cbs-body-weight: 400; --cbs-body-tracking: 0; --cbs-body-leading: 1.65;
  --cbs-small-size: 0.875rem; --cbs-small-weight: 400; --cbs-small-tracking: 0; --cbs-small-leading: 1.55;
  --cbs-label-size: 0.72rem; --cbs-label-weight: 500; --cbs-label-tracking: 0.2em; --cbs-label-leading: 1.4;
  --cbs-button-size: 0.74rem; --cbs-button-weight: 500; --cbs-button-tracking: 0.2em; --cbs-button-leading: 1;
  --cbs-space-1: 4px; --cbs-space-2: 8px; --cbs-space-3: 12px; --cbs-space-4: 16px; --cbs-space-5: 24px; --cbs-space-6: 32px; --cbs-space-7: 48px; --cbs-space-8: 64px; --cbs-space-9: 96px; --cbs-space-10: 128px;
  --cbs-fast: 240ms; --cbs-ui: 480ms; --cbs-reveal: 1200ms; --cbs-drift: 9s; --cbs-ease-out: cubic-bezier(.16, 1, .3, 1); --cbs-ease-io: cubic-bezier(.65, 0, .35, 1);
  --cbs-max: 1180px; --cbs-measure: 66ch; --cbs-radius: 2px;
}
/* Section modes: every section is either dark (graphite) or light (bead-blast); components read only these. */
.is-dark  { --bg: var(--cbs-graphite); --surface: var(--cbs-graphite-2); --fg: var(--cbs-on-dark); --muted: var(--cbs-on-dark-muted); --rule: var(--cbs-rule-dark); --link: var(--cbs-blue-dark); --mark: var(--cbs-titanium-light); background: var(--bg); color: var(--fg); }
.is-light { --bg: var(--cbs-bead); --surface: var(--cbs-white); --fg: var(--cbs-ink); --muted: var(--cbs-ink-muted); --rule: var(--cbs-rule-light); --link: var(--cbs-blue-light); --mark: var(--cbs-ink); background: var(--bg); color: var(--fg); }
@media (prefers-reduced-motion: reduce) { :root { --cbs-fast: 1ms; --cbs-ui: 1ms; --cbs-reveal: 1ms; --cbs-drift: 0s; } }

/* ── Components. Every colour comes from the section mode (.is-dark / .is-light) defined in tokens.css. ───────────── */
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important } /* component display rules must never override the hidden attribute */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; background: var(--cbs-graphite) } /* the canvas iOS shows when you pull past the top or bottom: dark, like the header and footer (body stays bead) */
body { margin: 0; font-family: var(--cbs-font); font-size: var(--cbs-body-size); line-height: var(--cbs-body-leading); font-weight: 400; background: var(--cbs-bead); color: var(--cbs-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
img, video, svg { display: block; max-width: 100% }
img { height: auto }
a { color: inherit }
p, h1, h2, h3, h4, figure, blockquote, ul, ol { margin: 0 }
h1, h2, h3 { font-weight: 400; text-wrap: balance }
h2 { font-size: var(--cbs-h2-size); line-height: var(--cbs-h2-leading); letter-spacing: var(--cbs-h2-tracking) }
h3 { font-size: var(--cbs-h3-size); line-height: var(--cbs-h3-leading) }
:focus-visible { outline: 2px solid var(--link, var(--cbs-blue-light)); outline-offset: 3px }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--cbs-white); color: var(--cbs-ink); padding: 10px 14px }
.skip:focus { left: 8px }
.wrap { width: 100%; max-width: var(--cbs-max); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.stack { display: grid; gap: var(--cbs-space-5); align-content: start }
.center { text-align: center; justify-items: center }
.label { font-size: var(--cbs-label-size); font-weight: var(--cbs-label-weight); letter-spacing: var(--cbs-label-tracking); line-height: var(--cbs-label-leading); text-transform: uppercase; color: var(--muted) }
.small { font-size: var(--cbs-small-size) }
.muted { color: var(--muted) }
.hide-s { display: inline }
@media (max-width: 719px) { .hide-s { display: none } }

/* links + buttons */
.link, .prose a { color: var(--fg); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: 2px; transition: background-size var(--cbs-ui) var(--cbs-ease-out), color var(--cbs-fast) }
.link:hover, .prose a:hover { background-image: var(--cbs-heat) }
.linklike { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-family: var(--cbs-font); font-size: var(--cbs-button-size); font-weight: var(--cbs-button-weight); letter-spacing: var(--cbs-button-tracking); text-transform: uppercase; line-height: 1; text-decoration: none; padding: 1.15em 2.1em; border: 1px solid currentColor; border-radius: var(--cbs-radius); cursor: pointer; color: var(--fg); background: transparent; transition: background-color var(--cbs-ui) var(--cbs-ease-out), color var(--cbs-ui) var(--cbs-ease-out), border-color var(--cbs-ui) }
.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.btn--solid:hover { background: transparent; color: var(--fg) }
.btn--ghost:hover { background: var(--fg); color: var(--bg) }
.btn--light { background: #F2F4F5; color: var(--cbs-graphite); border-color: #F2F4F5 }
.btn--light:hover { background: transparent; color: #F2F4F5 }
.btn--text { border-color: transparent; padding-inline: .8em; text-decoration: underline; text-underline-offset: 4px }

/* ── Header: stacked lockup over the hero, hands off to the compact Jaw c on scroll ─────────────────────────────── */
.hd { --hh: 112px; position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: calc(var(--hh) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: var(--cbs-graphite); color: #F2F4F5; transition: height var(--cbs-ui) var(--cbs-ease-io), background-color var(--cbs-ui) var(--cbs-ease-io) }
.hd--over:not(.is-c):not(.menu-open-hd) { background: transparent }
.hd::after { content: ""; position: absolute; left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); bottom: 0; height: 1px; background: var(--cbs-heat); opacity: .85; transition: left var(--cbs-ui) var(--cbs-ease-io), right var(--cbs-ui) var(--cbs-ease-io) }
.hd.is-c { --hh: 64px }
.hd.is-c::after { left: 0; right: 0 }
.hd__in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.hd__menu { justify-self: start; display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; color: inherit; cursor: pointer; padding: 10px 0; font: inherit }
.hd__menu .label, .hd__book { color: inherit }
.burger { width: 22px; display: grid; gap: 5px }
.burger i { display: block; height: 1.5px; background: currentColor; transition: transform var(--cbs-ui) var(--cbs-ease-io), opacity var(--cbs-fast), width var(--cbs-ui) }
.burger i:last-child { width: 70% }
.hd__menu[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.hd__menu[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0 }
.hd__menu[aria-expanded="true"] .burger i:nth-child(3) { width: 100%; transform: translateY(-6.5px) rotate(-45deg) }
.hd__logo { display: grid; place-items: center; height: 100%; color: inherit; text-decoration: none }
.hd__full, .hd__compact { grid-area: 1 / 1; transition: opacity var(--cbs-ui) var(--cbs-ease-io), transform var(--cbs-ui) var(--cbs-ease-io) }
.hd__full .cbs-logo { height: 70px; width: auto }
.hd__compact { opacity: 0; transform: translateY(6px) }
.hd__compact .cbs-logo { height: 34px; width: 34px }
.hd.is-c .hd__full { opacity: 0; transform: translateY(-8px) scale(.92); pointer-events: none }
.hd.is-c .hd__compact { opacity: 1; transform: none }
.hd__book { justify-self: end; text-decoration: none; padding: 10px 0; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; transition: background-size var(--cbs-ui) var(--cbs-ease-out) }
.hd__book:hover { background-size: 100% 1px }
@media (max-width: 719px) {
  .hd, .hd.is-c { --hh: 64px }
  .hd__full { display: none }
  .hd__compact { opacity: 1; transform: none }
  .hd__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
}
/* full-screen menu */
.menu { position: fixed; inset: 0; z-index: 40; display: grid; align-content: center; gap: var(--cbs-space-7); padding: 120px max(24px, env(safe-area-inset-left, 0px)) 48px; overflow-y: auto }
.menu:not([hidden]) { animation: menu-in var(--cbs-ui) var(--cbs-ease-out) both }
@keyframes menu-in { from { opacity: 0 } }
.menu__list { list-style: none; padding: 0; display: grid; gap: 4px; justify-items: center }
.menu__list a { display: inline-block; font-size: clamp(1.8rem, 1.2rem + 3vw, 3.2rem); font-weight: 300; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 6px 0 6px .18em; background: var(--cbs-heat) no-repeat 0 100% / 0% 1px; transition: background-size var(--cbs-ui) var(--cbs-ease-out) }
.menu__list a:hover, .menu__list a:focus-visible { background-size: 100% 1px }
.menu__facts { display: grid; gap: 6px; justify-items: center; text-align: center; color: var(--muted) }
.menu__facts a { color: var(--fg) }
html.menu-open { overflow: hidden }
html.menu-open .hd { background: var(--cbs-graphite) }

/* ── Hero ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 560px; height: min(100svh, 940px); overflow: hidden; display: grid; align-items: end; color: #F2F4F5 }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100% }
.hero__media img { object-fit: cover; object-position: 50% 45%; transform-origin: 60% 50%; animation: drift var(--cbs-drift) var(--cbs-ease-out) both }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,19,21,.62) 0%, rgba(16,19,21,.08) 28%, rgba(16,19,21,.22) 58%, rgba(16,19,21,.9) 100%) }
.hero__in { position: relative; z-index: 2; display: grid; gap: var(--cbs-space-4); justify-items: center; text-align: center; padding-bottom: clamp(56px, 9vh, 96px) }
.hero__eyebrow { color: rgba(242,244,245,.85); text-wrap: balance }
@media (max-width: 719px) {
  .hero__media img { object-position: 30% 50% }
  .hero::before { background: linear-gradient(180deg, rgba(16,19,21,.55) 0%, rgba(16,19,21,.15) 22%, rgba(16,19,21,.55) 48%, rgba(16,19,21,.94) 100%) }
}
.hero__title { font-size: var(--cbs-display-size); font-weight: var(--cbs-display-weight); letter-spacing: var(--cbs-display-tracking); text-transform: uppercase; line-height: var(--cbs-display-leading); margin-right: calc(-1 * var(--cbs-display-tracking)) }
.hero__sub { max-width: 46ch; color: rgba(242,244,245,.88) }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--cbs-space-3); justify-content: center; margin-top: var(--cbs-space-2) }
.hero__ctas .btn--ghost { color: #F2F4F5 }
.hero__ctas .btn--ghost:hover { background: #F2F4F5; color: var(--cbs-graphite) }
.hero__cue { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 1px; height: 44px; background: rgba(242,244,245,.35); overflow: hidden }
.hero__cue::after { content: ""; position: absolute; left: 0; top: -44px; width: 1px; height: 44px; background: #F2F4F5; animation: drip 2.4s var(--cbs-ease-io) infinite }
@keyframes drift { from { transform: scale(1.08) } to { transform: scale(1) } }
@keyframes drip { to { transform: translateY(88px) } }
.settle { animation: settle 1.8s var(--cbs-ease-out) .65s both }
/* The settle animation widens the tracking, so the title's line breaks are fixed per width: the wider letters then overflow
   (clipped by the hero) instead of re-wrapping, and nothing below the title moves (CLS was 0.09 on desktop). 3 lines on a
   phone, "Bespoke / bicycle builds" up to 1259px, one line from 1260px, where the wrap and the type size stop growing. */
.hero__title { min-width: 0; max-width: 100% } /* a grid item: without this its nowrap line widens the column while settling */
.hero__title .ht, .hero__title .hw { display: block; white-space: nowrap }
@media (min-width: 600px) { .hero__title .hw { display: inline } }
@media (min-width: 1260px) { .hero__title { white-space: nowrap } .hero__title .ht { display: inline } }
@keyframes settle { from { opacity: 0; letter-spacing: calc(var(--cbs-display-tracking) + .32em); filter: blur(6px) } to { filter: blur(0) } }
.rise { animation: rise 1.1s var(--cbs-ease-out) var(--d, .4s) both }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } }

/* ── Sections ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sec { padding-block: clamp(72px, 10vw, 136px) }
.sec__head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--cbs-space-5); align-items: baseline }
.sec__head h2 { grid-column: 1 / -1; grid-row: 2 }
@media (max-width: 719px) { .sec__head { grid-template-columns: 1fr auto } }
.svc { list-style: none; padding: 0; border-top: 1px solid var(--rule); margin-top: var(--cbs-space-4) }
.svc a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 28px; gap: var(--cbs-space-6); align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--rule); text-decoration: none }
.svc__name { font-size: var(--cbs-h3-size); background: var(--cbs-heat) no-repeat 0 100% / 0% 1px; padding-bottom: 3px; justify-self: start; transition: background-size var(--cbs-ui) var(--cbs-ease-out) }
.svc__text { color: var(--muted) }
.svc__go { justify-self: end; color: var(--link); transition: transform var(--cbs-ui) var(--cbs-ease-out) }
.svc a:hover .svc__name { background-size: 100% 1px }
.svc a:hover .svc__go { transform: translateX(6px) }
@media (max-width: 719px) { .svc a { grid-template-columns: minmax(0, 1fr) 24px } .svc__text { grid-column: 1; grid-row: 2 } }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center }
.duo__media { overflow: hidden }
.duo__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover }
@media (max-width: 859px) { .duo { grid-template-columns: 1fr } }
.quote { padding-left: var(--cbs-space-5); border-left: 1px solid var(--rule); display: grid; gap: var(--cbs-space-3) }
.quote p { font-size: var(--cbs-h3-size); line-height: 1.4 }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); gap: var(--cbs-space-6) var(--cbs-space-5); margin-top: var(--cbs-space-4) }
.card a, .card { display: grid; gap: 10px; text-decoration: none; align-content: start }
.card__media { overflow: hidden; background: var(--surface) }
.card__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.2s var(--cbs-ease-out) }
.card a:hover .card__media img { transform: scale(1.04) }
.card__name { font-size: 1.12rem; margin-top: 6px }
.card__meta { font-size: var(--cbs-small-size); color: var(--muted) }
.film { position: relative; min-height: 380px; height: clamp(380px, 62vh, 640px); overflow: hidden; display: grid; align-items: center; text-align: center; color: #F2F4F5 }
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.film::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(16,19,21,.55) }
.film__in { position: relative; z-index: 2; display: grid; gap: var(--cbs-space-4); justify-items: center }
.film__title { font-size: clamp(1.5rem, 1rem + 2.6vw, 2.8rem); font-weight: 300; letter-spacing: .2em; text-transform: uppercase; margin-right: -.2em }
.film__sub { max-width: 52ch; color: rgba(242,244,245,.85) }
.film__pause { position: absolute; z-index: 3; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 20px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(242,244,245,.55); background: rgba(16,19,21,.35); color: #F2F4F5; display: grid; place-items: center; cursor: pointer; font-size: 12px }
.marques__row { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(24px, 4vw, 52px); max-width: 980px }
.marques__row li { font-size: .92rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); transition: color var(--cbs-fast) }
.marques__row li:hover { color: var(--fg) }
.marques__row--small li { font-size: .74rem; letter-spacing: .22em }
/* Reviews: a scroll-snap rail (one card and a peek on phones, three on desktop); arrows and "Read more" come from site.js */
.rvw__score { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--cbs-small-size) }
.rvw__stars { display: inline-flex; gap: 3px; color: var(--mark); margin: 0 }
.rvw { width: 100%; display: grid; gap: var(--cbs-space-5); margin-top: var(--cbs-space-4) }
.rvw__rail { --gap: var(--cbs-space-5); list-style: none; margin: 0; padding: 0 0 var(--cbs-space-3); display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 380px); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; text-align: left }
@media (max-width: 899px) { .rvw__rail { margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px } } /* runs to the screen edge: the next card peeks */
@media (min-width: 900px) { .rvw__rail { --gap: var(--cbs-space-6); grid-auto-columns: calc((100% - 2 * var(--gap)) / 3) } }
.rvw__rail:focus-visible { outline: 1px solid var(--fg); outline-offset: 6px }
.rvw__item { scroll-snap-align: start; display: grid }
.rvw__card { margin: 0; display: flex; flex-direction: column; gap: var(--cbs-space-4); padding: var(--cbs-space-6) var(--cbs-space-5) var(--cbs-space-5); border: 1px solid var(--rule); background: var(--surface) }
.rvw__text { margin: 0; font-size: 1.04rem; line-height: 1.65 }
.rvw__text p { margin: 0 0 .8em }
.rvw__text p:last-child { margin: 0 }
.rvw.is-js .rvw__text.is-long:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden }
.rvw__more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: var(--cbs-small-size); text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.rvw__by { display: grid; gap: 2px; margin-top: auto; padding-top: var(--cbs-space-4); border-top: 1px solid var(--rule) }
.rvw__name { font-weight: 500 }
.rvw__date { font-size: var(--cbs-small-size); color: var(--muted) }
.rvw__nav { display: flex; justify-content: center; gap: var(--cbs-space-3) }
.rvw__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--fg); font-size: 1.1rem; cursor: pointer; transition: border-color var(--cbs-fast), opacity var(--cbs-fast) }
.rvw__btn:hover:not(:disabled) { border-color: var(--fg) }
.rvw__btn:disabled { opacity: .35; cursor: default }
.rvw__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--cbs-space-4) var(--cbs-space-6); margin-top: var(--cbs-space-4) }
.cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--cbs-space-6) }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--cbs-space-4); align-items: center }

/* ── Inner pages ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.page-hd { padding-top: calc(112px + env(safe-area-inset-top, 0px) + clamp(48px, 8vw, 96px)); padding-bottom: clamp(48px, 7vw, 88px) }
.page-hd--tall { min-height: 80svh; display: grid; align-items: center }
.page-hd__title { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); font-weight: 300; letter-spacing: .16em; text-transform: uppercase; line-height: 1.08 }
.page-hd__title--post { letter-spacing: .06em; text-transform: none; font-weight: 400 }
.page-hd a { color: inherit }
.page-hd a.btn--light { color: var(--cbs-graphite) }
.page-hd a.btn--light:hover { color: #F2F4F5 }
@media (max-width: 719px) { .page-hd { padding-top: calc(64px + env(safe-area-inset-top, 0px) + 48px) } }
.prose { max-width: calc(var(--cbs-measure) + 40px) }
.prose--wide { max-width: var(--cbs-max) }
.prose > * + * { margin-top: 1.1em }
.prose h2 { margin-top: 1.8em; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); font-weight: 400; letter-spacing: .01em; line-height: 1.25 } .prose h3 { margin-top: 1.5em }
.prose ul, .prose ol { padding-left: 1.2em }
.prose img { margin-block: 1.4em }
.prose__lead img { width: 100% }
.pic { display: contents }
/* 404 (T-013): digits, headline and actions keep the approved proportions at every width */
.nf__in { gap: var(--cbs-space-5) }
.nf__digits { margin: 0; display: flex; align-items: center; justify-content: center; gap: .1em; font-size: clamp(4.2rem, 2.9rem + 4.2vw, 6.8rem); font-weight: 200; line-height: 1; letter-spacing: .02em; color: #F2F4F5 }
.nf__cog { flex: none; width: .8em; height: .8em; color: #E6E9EC; overflow: visible }
.nf__links .l1 { stroke: var(--cbs-titanium-light) }
.nf__links .l2 { stroke: var(--cbs-blue-dark) }
.nf__spin { transform-box: view-box; transform-origin: 50px 50px; animation: nf-spin 5s linear infinite }
.nf__digits:hover .nf__spin { animation-duration: 1.4s }
@keyframes nf-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .nf__spin { animation: none } }
.nf__title { margin: 0; text-transform: none; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); font-weight: 300; letter-spacing: .02em; line-height: 1.2; text-wrap: balance; max-width: 22ch }
.nf__sub { margin: 0; color: var(--muted); max-width: 44ch }
.nf__actions { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center }
.builds__more { margin-top: var(--cbs-space-7); color: var(--muted) }
/* Journal (/blog-page/): the page text is the standfirst, then Secure Blog Editor's index (styled by the plugin) */
.journal > p { max-width: 62ch; color: var(--muted); font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.7 }
.journal > p + p { margin-top: 1em }
.journal > p:first-child { color: var(--fg); font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.55; font-weight: 300 }
.journal #sbe-container { margin-top: clamp(48px, 7vw, 88px) }
.prose hr { border: 0; height: 1px; width: 64px; margin: 2.4em 0; background: var(--cbs-heat) }
.prose li + li { margin-top: .45em }
html:has(#cbs-consent:not([hidden])) #sbe-fab-container { display: none } /* never cover the consent choices */
.build-hd { position: relative; min-height: 70svh; display: grid; align-items: end; overflow: hidden }
.build-hd__media, .build-hd__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.build-hd::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,19,21,.5), rgba(16,19,21,.1) 35%, rgba(16,19,21,.88)) }
.build-hd__in { position: relative; z-index: 2; padding-top: 160px; padding-bottom: 56px }
.build-hd__spec { color: var(--muted) }
/* page components */
.lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); line-height: 1.6; color: var(--muted); max-width: 62ch }
.lead strong, .lead b { font-weight: inherit }
.svc--detail { margin-top: 0 }
.svc__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--cbs-space-6); padding: 34px 0; border-bottom: 1px solid var(--rule); align-items: baseline }
.svc--detail .svc__name { font-size: var(--cbs-h3-size); background: none; padding: 0 }
@media (max-width: 719px) { .svc__row { grid-template-columns: 1fr; gap: 10px } }
.band { position: relative; height: clamp(320px, 56vh, 620px); overflow: hidden; display: grid; align-items: end }
.band__media, .band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(16,19,21,.75)) }
.band__in { position: relative; z-index: 2; padding-bottom: 32px }
.band__in .label { color: rgba(242,244,245,.85) }
.duo--top { align-items: start }
/* Services: the bike builds itself part by part as the services scroll past (brand/motion/build-bike.mjs) */
/* Desktop: the drawing sits on a stage the height of the viewport under the compact header. The stage pins first, and only
   then does the first service reach the stage's centre line, so the bike never moves while it is being built; the copy
   column scrolls past it. The lead-in (.build__hint) and tail (.build__end) spacing is what guarantees that order. */
.build { --pin: calc(64px + env(safe-area-inset-top, 0px)); --stage: calc(100vh - var(--pin)); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start }
@supports (height: 100svh) { .build { --stage: calc(100svh - var(--pin)) } }
.build__fig { position: sticky; top: var(--pin); height: var(--stage); display: grid; align-content: center; color: var(--fg) }
.build__stage { margin: 0 auto; width: min(100%, calc((var(--stage) - 150px) * 1.5)); display: grid; gap: var(--cbs-space-3) }
.buildbike { display: block; width: 100%; height: auto }
/* caption under the rear wheel, button under the front one: the front axle sits at 79.4% of the drawing (612 in 40–760) */
.build__ctl { display: grid; grid-template-columns: 59fr 41fr; align-items: center; min-height: 48px }
.build__step { display: flex; flex-wrap: wrap; column-gap: 12px; align-items: baseline }
.build__n { font-variant-numeric: tabular-nums; color: var(--fg) }
.btn--sm { padding: .95em 1.4em }
.build__btn { justify-self: center; white-space: nowrap; min-height: 44px }
.build__ico { flex: none }
.build__btn .i-nx, .build__btn.is-next .i-re { display: none }
.build__btn.is-next .i-nx { display: inline }
.build__hint { display: none }
.build__end { margin: var(--cbs-space-5) 0 0; text-align: center }
.build__end .btn { transition: transform .7s var(--cbs-ease-out), background-color .7s var(--cbs-ease-out), color .7s var(--cbs-ease-out), border-color .7s }
/* the bike is complete and the CTA has come level with Rebuild: it steps forward as the solid call to action */
.build__end.is-cta .btn { transform: scale(1.14); background: var(--fg); color: var(--bg); border-color: var(--fg) }
.build__end.is-cta .btn:hover { background: transparent; color: var(--fg) }
.build__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule) }
.build__list li { min-height: 34vh; display: grid; align-content: center; border-bottom: 1px solid var(--rule) }
.build__list .svc__row { border-bottom: 0; grid-template-columns: 1fr; gap: 10px }
.build__list li { transition: opacity var(--cbs-ui) var(--cbs-ease-out) }
/* not built yet: the heading steps back by colour, never by opacity, so every state keeps AA contrast (muted = 6.3:1) */
.build__list .svc__name { transition: color var(--cbs-ui) var(--cbs-ease-out) }
html.js-build .build__list li:not(.on) .svc__name { color: var(--muted) }
@media (min-width: 860px) {
  html.js-build .build__hint { display: block; margin: calc(var(--stage) * .38 - 40px) 0 var(--cbs-space-4) }
  html.js-build .build__list li { min-height: calc(var(--stage) * .48) }
  /* site.js sets --cta-pb so the CTA comes level with Rebuild exactly when the stage releases; from there they leave together */
  html.js-build .build__end { margin: 0; min-height: calc(var(--stage) * .46 + 30px); display: grid; align-content: end; justify-items: center; padding-bottom: var(--cta-pb, 0px) }
}
html.js-build .buildbike { transition: opacity .3s var(--cbs-ease-out) }
html.js-build .buildbike.is-out { opacity: 0 }
html.js-build .buildbike.is-reset path { transition: none }
html.js-build .buildbike path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--cbs-ease-out) }
html.js-build .buildbike [data-part] { opacity: 0 } /* round caps would show dots on undrawn paths */
html.js-build .buildbike.s1 [data-part="frame"], html.js-build .buildbike.s2 [data-part="wheels"], html.js-build .buildbike.s3 [data-part="drivetrain"], html.js-build .buildbike.s4 [data-part="cockpit"] { opacity: 1 }
html.js-build .buildbike.s1 [data-part="frame"] path,
html.js-build .buildbike.s2 [data-part="wheels"] path,
html.js-build .buildbike.s3 [data-part="drivetrain"] path,
html.js-build .buildbike.s4 [data-part="cockpit"] path { stroke-dashoffset: 0 }
@media (max-width: 859px) {
  .build { grid-template-columns: 1fr }
  .build__fig { position: static; height: auto }
  .build__stage { width: 100% }
  .build__list li { min-height: 0; padding-block: 8px }
}
/* Phones in portrait: the drawing pins under the header and zooms out to 60% (site.js sets --z, --sh, --veil, --p)
   while the services scroll in beneath it; the line weight stays constant as it shrinks. Landscape phones keep the
   in-flow drawing. */
@media (max-width: 859px) and (min-height: 560px) {
  html.js-build .build__fig { --z: 1; position: sticky; top: var(--pin); z-index: 3; pointer-events: none }
  html.js-build .build__fig::before { content: ""; position: absolute; z-index: -1; top: 0; left: calc(50% - 50vw); width: 100vw; height: var(--veil, 100%); background: var(--bg) }
  html.js-build .build__fig::after { content: ""; position: absolute; top: var(--veil, 100%); left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--rule); opacity: var(--p, 0) }
  html.js-build .build__stage { padding-block: 12px }
  html.js-build .buildbike { transform-origin: 50% 0; transform: scale(var(--z)); stroke-width: calc(2.2px / var(--z)) }
  html.js-build .buildbike [stroke-width="1.1"] { stroke-width: calc(1.1px / var(--z)) }
  html.js-build .buildbike [stroke-width="2.42"] { stroke-width: calc(2.42px / var(--z)) }
  html.js-build .build__ctl { transform: translateY(calc(var(--sh, 0px) * (var(--z) - 1))) }
  html.js-build .build__btn { pointer-events: auto }
  html.js-build .build__hint { display: block; margin: var(--cbs-space-6) 0 var(--cbs-space-4) }
  html.js-build .build__list li { min-height: calc(var(--stage) * .4); padding-block: 0 }
  html.js-build .build__end { margin-top: var(--cbs-space-7) }
}
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cbs-space-4); margin: var(--cbs-space-4) 0 0; padding-top: var(--cbs-space-5); border-top: 1px solid var(--rule) }
.facts dd { margin: 4px 0 0; font-size: 1.05rem }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--cbs-space-5) }
.gallery > * { margin: 0 }
.gallery figure { overflow: hidden; background: var(--surface) }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--cbs-ease-out) }
.gallery figure:hover img { transform: scale(1.03) }
.gallery figcaption { font-size: var(--cbs-small-size); color: var(--muted); padding: 10px 2px 0 }
.contact { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: start }
.contact__aside { gap: var(--cbs-space-6) }
.contact__big { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 300; letter-spacing: .04em }
.contact__big a { text-decoration: none }
@media (max-width: 859px) { .contact { grid-template-columns: 1fr } }
.form { display: grid; gap: var(--cbs-space-5) }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cbs-space-5) }
@media (max-width: 599px) { .form__row { grid-template-columns: 1fr } }
.field { display: grid; gap: 8px }
.field label { font-size: var(--cbs-label-size); font-weight: var(--cbs-label-weight); letter-spacing: var(--cbs-label-tracking); text-transform: uppercase; color: var(--muted) }
.field label .muted { text-transform: none; letter-spacing: 0 }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1.02rem; color: var(--fg); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--cbs-radius); padding: 14px 16px; transition: border-color var(--cbs-fast) }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 1px var(--link) }
.field [aria-invalid="true"] { border-color: #B4232B }
.field__err { color: #B4232B; font-size: var(--cbs-small-size) }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.form__note { padding: 14px 16px; border-left: 2px solid; font-size: .98rem }
.form__note--ok { border-color: #2E7D4F; background: rgba(46,125,79,.08) }
.form__note--err { border-color: #B4232B; background: rgba(180,35,43,.06) }
.form__foot { display: flex; flex-wrap: wrap; gap: var(--cbs-space-4); align-items: center }

/* ── Footer ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ft { position: relative; padding-top: clamp(56px, 8vw, 96px) }
.ft__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--cbs-space-6); align-items: start }
.ft__logo { color: var(--mark); justify-self: start }
.ft__logo .cbs-logo { height: 52px; width: auto }
.ft__col { display: grid; gap: 8px; font-size: .95rem }
.ft__col a { color: var(--fg); text-decoration: none }
.ft__col a:hover { text-decoration: underline }
.ft__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: var(--cbs-space-7) var(--cbs-space-6); margin-top: var(--cbs-space-7); border-top: 1px solid var(--rule); font-size: var(--cbs-small-size); color: var(--muted) }
.ft__base a { color: inherit }
.ft__heat { display: block; height: 3px; background: var(--cbs-heat) }
@media (max-width: 859px) { .ft__grid { grid-template-columns: 1fr 1fr } .ft__logo { grid-column: 1 / -1 } }
@media (max-width: 479px) { .ft__grid { grid-template-columns: 1fr } }

/* ── Consent banner ────────────────────────────────────────────────────────────────────────────────────────────────── */
.consent { position: fixed; z-index: 60; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; pointer-events: none }
.consent__in { --bg: var(--cbs-graphite-2); --fg: var(--cbs-on-dark); --muted: var(--cbs-on-dark-muted); --rule: var(--cbs-rule-dark); --link: var(--cbs-blue-dark); pointer-events: auto; width: 100%; max-width: 860px; background: var(--bg); color: var(--fg); border: 1px solid var(--rule); border-top: 2px solid transparent; border-image: var(--cbs-heat) 1; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: end; box-shadow: 0 18px 50px -20px rgba(0,0,0,.6) }
.consent__text { display: grid; gap: 8px; font-size: .92rem }
.consent__text a { color: var(--fg) }
.consent__prefs { display: grid; gap: 10px; margin-top: 8px }
.consent__row { display: flex; gap: 10px; align-items: start; font-size: .88rem; color: var(--muted) }
.consent__row b { color: var(--fg); font-weight: 500 }
.consent__row input { margin-top: 4px; accent-color: var(--cbs-blue-dark) }
.consent__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end }
.consent .btn { padding: 1em 1.4em }
.consent .btn--solid { min-width: 10.5em } /* Accept and Reject must be equally prominent */
@media (max-width: 719px) { .consent__in { grid-template-columns: 1fr } .consent__actions { justify-content: stretch } .consent__actions .btn--solid { flex: 1 } }

/* ── Motion: scroll reveals (progressive — content is visible without them) ───────────────────────────────────────── */
@supports (animation-timeline: view()) {
  .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 5% entry 70% }
  .rv-img { animation: unclip linear both; animation-timeline: view(); animation-range: entry 0% cover 40% }
}
html.js-rv .rv:not(.in) { opacity: 0; transform: translateY(24px) }
html.js-rv .rv { transition: opacity var(--cbs-reveal) var(--cbs-ease-out), transform var(--cbs-reveal) var(--cbs-ease-out) }
@keyframes rv { from { opacity: 0; transform: translateY(28px) } }
@keyframes unclip { from { clip-path: inset(14% 0 14% 0) } to { clip-path: inset(0) } }
@media (prefers-reduced-motion: reduce) {
  .hero__media img, .settle, .rise, .rv, .rv-img, .hero__cue::after, .menu:not([hidden]) { animation: none !important }
  html.js-rv .rv:not(.in) { opacity: 1; transform: none }
  .hero__cue { display: none }
}

/* ── Secure Blog Editor (plugin markup on /blog-page/) — align with the brand without touching the plugin ───────── */
#sbe-container { font-family: var(--cbs-font) }
#sbe-container h2, #sbe-container h3 { font-weight: 400 }
#sbe-container a { color: var(--fg) }
#sbe-container button { font-family: var(--cbs-font) }