/* ============================================================================
   MOTION WHEEL — LAYOUT REMODEL (public site)

   Layout language taken from the Lunar Rossa reference and rebuilt around
   the rental business:

     · content lives inside large rounded blocks, inset from the page edge
     · one tall condensed caps voice for display, Poppins for everything else
     · headline line boxes set TIGHTER than the cap height (lh .88)
     · a pill navigation bar floating over the page, pill buttons with a
       round arrow badge
     · numbered process rows, oversized stat blocks, marquee ribbons

   The palette is untouched — every colour still resolves through tokens.css.
   This sheet loads last, so it wins over site.css and pages.css.
   ========================================================================= */


/* ---------------------------------------------------------------- 1 · TYPE */

h1, .h1, h2, .h2, .display,
.phead h1, .login__quote {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--head-ls);
  line-height: var(--head-lh);
}

.display { font-size: clamp(2.9rem, 7.6vw, 6.3rem); }
.h1      { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
.h2      { font-size: clamp(1.9rem, 3.6vw, 3rem); }

/* The display face runs to the line box; give the paragraph after it air. */
h1 + p, .h1 + p, h2 + p, .h2 + p, .display + p { margin-top: 18px; }

/* One italic accent per headline — the reference's "taste the joy" role.
   It rides inline at roughly half the cap height, never on its own line. */
.display em, .h1 em, .h2 em, h1 em, h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--green-deep);
  font-size: .56em;
  line-height: 1;
  white-space: nowrap;
}
.h1 em, h2 em, .h2 em { font-size: .78em; }
.dark .display em, .dark .h1 em, .dark .h2 em,
.on-dark .display em, .on-dark .h1 em, .on-dark .h2 em { color: var(--green-bright); }

/* Small modifier phrase set inline beside a display word — the reference's
   "BAKING endless" trick. Never allowed to wrap or inflate the line box. */
.h-mod {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .155em;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  vertical-align: .95em;
  margin-left: .5em;
  white-space: nowrap;
  color: var(--green);
}
.dark .h-mod, .on-dark .h-mod { color: var(--green-bright); }

/* Card and block titles keep the UI voice, uppercase and tight. */
.h3, h3, .svc__b h3, .rcard__b h3, .fcard h3, .why__c strong {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.005em;
}

body, p, li, .lede, input, select, textarea, button {
  font-family: var(--font-body);
}
.lede { font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.62; }


/* ------------------------------------------------------------- 2 · LABELS */

/* The eyebrow becomes a pill — the reference marks every section this way. */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--green-soft);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  gap: 0;
}
.eyebrow::before { display: none; }
.dark .eyebrow, .on-dark .eyebrow {
  color: var(--green-bright);
  background: rgba(143, 209, 63, .13);
}

.mono {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .11em;
}

.kicker, .svc__num, .tag {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .12em;
}
.tag { border-radius: var(--r-pill); padding: 7px 14px; font-size: .625rem; }


/* ------------------------------------------------------------ 3 · BUTTONS */

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 16px 14px 16px 28px;
  border-radius: var(--r-pill);
  gap: 14px;
}
.btn:not(:has(.ar)) { padding-right: 28px; }

/* The arrow rides in its own circle, as on the reference's CONTACT US pill. */
.btn .ar {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  padding: 7px;
  background: rgba(255, 255, 255, .2);
  transition: transform .35s var(--ease-out), background .3s var(--ease);
}
.btn:hover .ar { transform: translateX(3px); background: rgba(255, 255, 255, .34); }
.btn--ghost .ar { background: rgba(13, 15, 12, .1); }
.dark .btn--ghost .ar, .on-dark .btn--ghost .ar { background: rgba(245, 242, 234, .16); }
.btn--sm { padding: 11px 20px; font-size: .6875rem; }

.linkc {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.linkc .ar {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid currentColor;
  font-size: .7rem;
  transition: transform .35s var(--ease-out);
}
.linkc:hover .ar { transform: translateX(4px); }


/* -------------------------------------------------- 4 · ANNOUNCEMENT RIBBON */

.ticker {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 11px 0;
}
.ticker span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, .8);
}
.ticker b { color: var(--volt); }


/* ------------------------------------------------------ 5 · FLOATING NAV */

.hdr {
  position: sticky;
  top: 6px;
  z-index: 90;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  padding: 6px var(--gut) 0;
}
.hdr__in {
  height: 70px;
  padding-inline: 22px 12px;
  background: var(--ink);
  border-radius: var(--r-pill);
  box-shadow: 0 12px 34px rgba(13, 15, 12, .16);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.hdr.is-stuck { box-shadow: none; }

/* ------------------------------------------------- the bar, once you move
   At the top the bar introduces the business: full height, the name and
   what it does. The moment the page moves that job is done and the bar's
   only remaining job is to be reachable, so it gives its height back to
   the page — 70px to 54px, the mark down with it, and the strapline out.

   Height and padding are transitioned rather than a transform, because the
   bar must keep its real size: `scroll-margin-top` on every anchored
   section is measured against it, and a scaled bar would land every jump
   in the wrong place. One element changing height costs nothing. */
.hdr { transition: padding-top .3s var(--ease), transform .38s var(--ease), opacity .3s var(--ease); }
/* Off the top when reading down, back on the first scroll up. Transform
   only, so nothing on the page moves to make room. Keyboard focus inside
   the bar brings it back, so it is never hidden from someone tabbing. */
.hdr.is-away { transform: translateY(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
.hdr.is-away:focus-within { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hdr { transition: none; } }
.hdr__in {
  transition: box-shadow .35s var(--ease), height .3s var(--ease),
              padding .3s var(--ease), max-width .4s var(--ease);
}
.hdr__logo img { transition: height .3s var(--ease); }

.hdr__in { max-width: 100%; margin-inline: auto; }

.hdr.is-stuck { padding-top: 0; }
.hdr.is-stuck .hdr__in {
  height: 58px;
  max-width: min(1240px, 93%);
  padding-inline: 16px 10px;
  box-shadow: 0 14px 40px rgba(13, 15, 12, .34);
}
.hdr.is-stuck .hdr__logo img { height: 30px; }
.hdr.is-stuck .nav a { padding-block: 8px; }
.hdr.is-stuck .hdr__cta { padding-block: 9px; }

/* Somebody who asked for less movement gets the smaller bar straight away
   rather than a bar that resizes under them. */
@media (prefers-reduced-motion: reduce) {
  .hdr, .hdr__in, .hdr__logo img { transition: none; }
}

.hdr__logo img { height: 40px; }
@media (min-width: 900px) {
  .hdr__word { display: block; }
  .hdr__word strong {
    font-family: var(--font-head); font-weight: 400; font-size: 1.15rem;
    letter-spacing: .01em; color: var(--paper); text-transform: uppercase;
  }
  .hdr__word span {
    font-family: var(--font-display); font-weight: 500; font-size: .5625rem;
    letter-spacing: .16em; color: rgba(245, 242, 234, .5);
  }
}

.nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, .74);
  padding: 10px 15px;
}
.nav a:hover { background: rgba(245, 242, 234, .1); color: var(--paper); }
.nav a.on { background: var(--green); color: #fff; }

.hdr__act { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 1000px) { .hdr__act { margin-left: 0; } }
.hdr__cta { display: none; }
@media (min-width: 640px) { .hdr__cta { display: inline-flex; } }

/* The burger belongs to the widths where the nav is hidden. .nav turns on
   at 1000px, so the button turns off at the same number: above it the five
   links are already on screen and the button opened a drawer listing them
   a second time. */
.burger {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 234, .26);
  background: transparent;
  color: var(--paper);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.burger:hover { background: rgba(245, 242, 234, .12); border-color: rgba(245, 242, 234, .5); }
.burger i, .burger i::before, .burger i::after { background: var(--paper); width: 15px; }
@media (min-width: 1000px) { .burger { display: none; } }

/* ------------------------------------------------- 6 · ROUNDED PAGE BLOCKS */

/* Dark stretches stop being full-bleed bands and become inset panels. */
.hero {
  border-radius: var(--r-block);
  margin: 16px var(--gut) 0;
  overflow: hidden;
}
.hero .wrap { padding-inline: clamp(20px, 3vw, 52px); }
.hero__grid { min-height: min(80vh, 780px); }

/* `.section { background: var(--white) }` further down is a single class,
   same as `.dark`, and wins on order — which left every dark band that had
   no id rule of its own as pale text on white. Two classes settles it. */
.section.dark {
  background: var(--ink);
  border-radius: var(--r-block);
  margin-inline: var(--gut);
}
.section.dark + .section.dark { margin-top: 16px; }

.phead {
  border-radius: var(--r-block);
  margin: 16px var(--gut) 0;
  overflow: hidden;
}

/* The footer runs to all three edges: it is the end of the page, not
   another block sitting on it. Its wrap keeps the page gutter, so the
   columns line up with the content above. */
.ftr { border-radius: 0; margin: 0; }

/* Inset blocks already carry the page gutter, so their inner wrap needs less. */
.hero > .wrap, .phead > .wrap, .section.dark > .wrap,
.cta > .wrap {
  padding-inline: clamp(18px, 3vw, 52px);
}

.phead .crumbs, .phead .crumbs a {
  font-family: var(--font-display); font-weight: 600;
  font-size: .625rem; letter-spacing: .16em;
}

/* Every photograph gets the reference's generous corner. */
.hero__img img, .wsp__img, .founder__img, .dub__img,
.svc__media, .rcard__m, .fcard, .pcard__m, .local__card {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hero__img { border-radius: var(--r-block); }
.dub__img { border-radius: var(--r-block); }


/* --------------------------------------------------------------- 7 · HERO */

.hero__copy .display { margin-top: 20px; }
.hero__sub { max-width: 46ch; }
.hero__cta { margin-top: 34px; }

/* Stat trio under the headline — the reference's 10K+ / 99% / 500+ row.
   A grid, not a wrapping flex row, so the three blocks stay equal at any width. */
.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 44px;
}
.hero__meta > div {
  background: rgba(245, 242, 234, .06);
  border: 1px solid rgba(245, 242, 234, .12);
  border-radius: var(--r-md);
  padding: 18px 20px;
  transition: background .35s var(--ease), transform .35s var(--ease-out);
}
.hero__meta > div:hover { background: rgba(143, 209, 63, .13); transform: translateY(-3px); }
.hero__meta strong {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: 0; line-height: 1;
  display: block; color: var(--green-bright);
}
.hero__meta span {
  font-family: var(--font-display); font-weight: 500;
  font-size: .625rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(245, 242, 234, .6); margin-top: 8px; display: block;
}

.hero__badge, .hero__coord { border-radius: var(--r-md); }
.hero__badge b { font-family: var(--font-head); font-weight: 400; letter-spacing: 0; }


/* ------------------------------------------------------------ 8 · MARQUEE */

.strip {
  background: var(--volt);
  border: 0;
  padding: 16px 0;
  margin-top: 16px;
}
.strip span {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.strip svg { width: 9px; height: 9px; opacity: .5; }
.strip__row { gap: 26px; padding-right: 26px; }


/* --------------------------------------------------------- 9 · SECTION HEAD */

/* The H1 carries the search phrase; the brand line lives here, right under
   it, in the same italic voice the hero uses for its accent word. */
.shead__tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: 1.15;
  color: var(--green-deep);
  margin-top: 10px;
}
.dark .shead__tag, .on-dark .shead__tag { color: var(--green-bright); }

.shead { align-items: flex-end; }
.shead__t .h1 { margin-top: 18px !important; }
.shead__aside { padding-bottom: 6px; }


/* ------------------------------------------------------------- 10 · CARDS */

.svc__c, .booking__card, .formcard, .infocard, .asidecard,
.tcard, .local__card, .faqgroup, .why__c {
  border-radius: var(--r-lg);
}
/* The hairline grids become separated cards — the reference never butts
   two panels together. */
.svc, .why {
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.svc__c {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  padding: 10px;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.svc__c:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.svc__b { padding: 22px 14px 18px; }
.svc__num {
  border-radius: var(--r-pill);
  font-size: .625rem;
  letter-spacing: .14em;
}

.rcard { border-radius: var(--r-lg); }
.rcard:hover { transform: translateY(-6px); }

.tcard { background: var(--white); border: 1px solid var(--line); }

.booking__card {
  border-radius: var(--r-block);
  padding: clamp(22px, 3vw, 40px);
}
.field input, .field select, .field textarea,
.ff input, .ff select, .ff textarea {
  border-radius: var(--r-md);
  font-family: var(--font-body);
}
.field label, .ff label {
  font-family: var(--font-display); font-weight: 600;
  font-size: .625rem; letter-spacing: .13em; text-transform: uppercase;
}


/* -------------------------------------------------- 11 · NUMBERED PROCESS */

/* The reference's 01–04 rows: separated cards, oversized ghost numerals. */
.steps {
  gap: 12px;
  background: transparent;
  border: 0;
  border-block: 0;
}
.step {
  background: rgba(245, 242, 234, .05);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 26px 24px 30px;
  transition: background .35s var(--ease), transform .35s var(--ease-out);
}
.step:hover { background: rgba(143, 209, 63, .1); transform: translateY(-5px); }
.step b {
  font-family: var(--font-head); font-weight: 400;
  font-size: 3.6rem; letter-spacing: 0; line-height: .8;
  color: rgba(245, 242, 234, .18);
  margin-bottom: 16px;
}
.step:hover b { color: var(--green-bright); }
.step strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase;
}
.steps--light .step { background: var(--white); border-color: var(--line); }
.steps--light .step b { color: var(--grey-300); }


/* --------------------------------------------------------- 12 · STAT WALL */

.why {
  gap: 12px;
  background: transparent;
  border: 0;
}
.why__c {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 2.8vw, 40px);
  transition: transform .4s var(--ease-out), border-color .3s var(--ease);
}
.why__c:hover { transform: translateY(-6px); border-color: var(--green); }
.why__c .n {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(3rem, 5vw, 4.6rem); letter-spacing: 0; line-height: .85;
}
.why__c strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-deep);
}


/* ------------------------------------------------- 13 · BIG SERVICE ROWS */

/* Service menu reads as the reference's large uppercase list rows. */
.srow { padding: 20px 4px; }
.srow__t {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; letter-spacing: .02em; text-transform: uppercase;
}
.srow__n { font-family: var(--font-head); font-weight: 400; font-size: .9375rem; letter-spacing: 0; opacity: .5; }
.srow__p { font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; letter-spacing: .01em; text-transform: uppercase; }
.srow__ar {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid currentColor;
}


/* ------------------------------------------------------------- 14 · CTA */

.cta {
  background: var(--green);
  color: #fff;
  border-radius: var(--r-block);
  margin-inline: var(--gut);
  overflow: hidden;
}
.cta .h1 { color: #fff; }
.cta .h1 em { color: var(--volt); }
.cta .eyebrow { background: rgba(255, 255, 255, .16); color: #fff; }
.cta .mono { color: rgba(255, 255, 255, .78); }
.cta .btn--accent { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: var(--paper); }
.cta .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .5); }
.cta .btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--green-deep); }
.cta__rule { background: rgba(255, 255, 255, .4); }


/* ---------------------------------------------------------- 15 · FOOTER */

.ftr__top h4 {
  font-family: var(--font-display); font-weight: 600;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-bright);
}
.ftr__top ul a, .ftr address {
  font-family: var(--font-display); font-weight: 500;
  font-size: .8125rem; letter-spacing: .04em;
}
.ftr__socials a {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line-dark);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.ftr__socials a:hover { background: var(--green); color: #fff; border-color: var(--green); }
.ftr__bot { padding-block: 24px; }


/* -------------------------------------------------------- 16 · MOBILE UI */

.mmenu nav a {
  font-family: var(--font-head); font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em;
}
.mbar .btn { padding: 13px 18px; font-size: .6875rem; }

@media (max-width: 780px) {
  .hero, .section.dark, .cta, .phead { margin-inline: 12px; }
  .hdr { padding-inline: 12px; }
  .hdr__in { height: 62px; padding-inline: 14px 8px; }
  .hdr__logo img { height: 34px; }
  .burger { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc__c, .why__c, .step, .hero__meta > div, .rcard { transition: none; }
}

/* ------------------------------------------------------ 17 · TESTIMONIALS */

.revhead { display: grid; gap: clamp(22px, 3vw, 40px); align-items: end; }
@media (min-width: 940px) { .revhead { grid-template-columns: 1fr auto; } }

.score {
  display: flex; align-items: center; gap: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 28px;
}
.score b {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(2.8rem, 5vw, 3.8rem); letter-spacing: .01em; line-height: .85;
}
.score .stars svg { width: 15px; height: 15px; }
.score__n {
  display: block; margin-top: 8px;
  font-family: var(--font-display); font-weight: 500;
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

/* A rail rather than a static grid: six reviews drift past, and the row
   stops the moment you hover one so it can be read. */
.testrail {
  margin-top: clamp(32px, 4vw, 56px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.testrail__track { display: flex; width: max-content; animation: slide 60s linear infinite; }
.testrail__row { display: flex; gap: 18px; padding-right: 18px; }
.testrail:hover .testrail__track,
.testrail:focus-within .testrail__track { animation-play-state: paused; }
/* <figure> carries a 40px UA margin that would double every gap. */
.tcard { margin: 0; }
.testrail .tcard { width: min(78vw, 360px); flex: none; }
.tcard .stars svg { width: 13px; height: 13px; }

.stars__off { color: var(--grey-300); }

.tcard blockquote { font-size: 1.18rem; }
.tcard__by { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.tcard__by .tcard__what {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--font-display); font-weight: 600;
  font-size: .625rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green-deep);
  background: var(--green-soft);
  border-radius: var(--r-pill);
  padding: 6px 13px;
}

.revnote { margin-top: clamp(26px, 3vw, 40px); color: var(--grey-400); }

@media (prefers-reduced-motion: reduce) {
  .testrail__track { animation: none; }
  .testrail { overflow-x: auto; }
}

/* ------------------------------------------- 18 · AVAILABILITY SEARCH BAR */

/* Day / hour switch, styled like the console's mode switch so the two
   halves of the product feel like one thing. */
.hmodes {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.hmode {
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.hmode:hover { color: var(--ink); }
.hmode.on { background: var(--ink); color: var(--paper); }

/* One rounded bar with the fields divided by hairlines, the way a booking
   search reads: what, when, how long, go. */
.bsearch {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  overflow: hidden;
  margin-top: clamp(18px, 2.4vw, 26px);
}
@media (min-width: 760px) {
  .bsearch { grid-template-columns: repeat(3, 1fr) auto; align-items: stretch; }
  .bsearch__go { grid-column: -2 / -1; }
}
@media (min-width: 1080px) {
  .bsearch { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}
@media (min-width: 760px) {
  .bsearch.bsearch--two { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
}

.bsearch__f {
  background: var(--white);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: background .25s var(--ease);
}
/* display:flex on the field would otherwise beat the UA's [hidden] rule. */
.bsearch__f[hidden], .field[hidden], .tag[hidden] { display: none !important; }
.bsearch__f:focus-within { background: var(--paper); }
.bsearch__f label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.bsearch__f input,
.bsearch__f select {
  border: 0;
  background: none;
  outline: none;
  padding: 0;
  width: 100%;
  min-width: 0;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink);
  cursor: pointer;
}
.bsearch__f select.is-set {
  animation: setflash .9s var(--ease);
}
@keyframes setflash {
  0%, 100% { color: var(--ink); }
  25%      { color: var(--green-deep); }
}

.bsearch__go {
  border-radius: 0;
  padding-inline: clamp(22px, 3vw, 34px);
  justify-content: center;
}
@media (max-width: 759px) { .bsearch__go { border-radius: 0 0 var(--r-block) var(--r-block); } }

/* ---- Result: real models, real prices, each a link into the booking ---- */
.offers { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 720px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .25s var(--ease), transform .25s var(--ease-out);
}
.offer:hover { border-color: var(--green); transform: translateY(-2px); }
.offer__n b, .offer__p b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.01em;
}
.offer__n span, .offer__p span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .625rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.offer__p { text-align: right; flex: none; }
.offer__p b { color: var(--green-deep); }

.booking__head { align-items: center; }


/* ============================================================================
   19 · BRAND — PURPLE AND GREEN AS EQUAL PARTNERS

   The mark is a gear split down the middle: purple on the left, green on
   the right, a volt bolt between them. The site now speaks the same way:

     purple   the brand itself — surfaces, headline accents, where you are
     green    anything you can act on — buttons, availability, "free"
     volt     the spark — tiny highlights only
   ========================================================================= */

/* Headline accents belong to the brand colour on light grounds… */
.display em, .h1 em, .h2 em, h1 em, h2 em { color: var(--purple); }
/* …and on dark ones, the hero pairs the two halves of the mark. */
.dark .display em, .dark .h1 em, .dark .h2 em,
.on-dark .display em, .on-dark .h1 em, .on-dark .h2 em { color: var(--purple-bright); }
.shead__tag { color: var(--purple); }
.dark .shead__tag, .on-dark .shead__tag { color: var(--purple-bright); }

/* Where you are is purple; what you can do is green. */
.nav a.on { background: var(--purple); color: #fff; }
.chip.on, .chips .chip.on { background: var(--purple); border-color: var(--purple); color: #fff; }

.eyebrow--purple { color: var(--purple); background: var(--purple-soft); }
.dark .eyebrow--purple, .on-dark .eyebrow--purple { color: var(--purple-bright); background: rgba(200, 149, 222, .14); }

.btn--purple { --btn-bg: var(--purple); --btn-bd: var(--purple); --btn-fg: #fff; }
.btn--purple:hover { --btn-bg: var(--purple-600); --btn-bd: var(--purple-600); }
.btn--ghost:hover { --btn-bg: var(--purple); --btn-bd: var(--purple); --btn-fg: #fff; }

.step:hover b { color: var(--purple-bright); }
.why__c:hover { border-color: var(--purple); }
.why__c strong { color: var(--purple); }
.svc__c:hover .linkc { color: var(--purple); }

/* ---------- The split gear, as a recurring motif ----------
   A two-tone ring with teeth, drawn in CSS so it costs no image. */
.hero, .cta, .phead--purple { position: relative; isolation: isolate; }
.hero .gearmark, .cta .gearmark { display: none; }
.hero::before, .cta::before, .phead--purple::before {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  width: 440px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 180deg, var(--purple) 0 50%, var(--green) 50% 100%);
  /* ring  +  (toothed band = outer band ∩ spokes) */
  -webkit-mask:
    radial-gradient(circle, transparent 55%, #000 55.5% 64%, transparent 64.5%),
    radial-gradient(circle, transparent 63%, #000 63.5% 71%, transparent 71.5%),
    repeating-conic-gradient(#000 0 7deg, transparent 7deg 18deg);
  -webkit-mask-composite: source-over, source-in;
  mask:
    radial-gradient(circle, transparent 55%, #000 55.5% 64%, transparent 64.5%),
    radial-gradient(circle, transparent 63%, #000 63.5% 71%, transparent 71.5%),
    repeating-conic-gradient(#000 0 7deg, transparent 7deg 18deg);
  mask-composite: add, intersect;
  opacity: .22;
  animation: spin 90s linear infinite;
}
.hero::before { left: -150px; bottom: -170px; }
.cta::before { right: -130px; top: -150px; width: 360px; opacity: .3; }
.phead--purple::before { right: -120px; top: -140px; width: 400px; opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  .hero::before, .cta::before, .phead--purple::before { animation: none; }
}

/* The split bar: the same two halves as the email header. */
.ftr { position: relative; overflow: hidden; }
.ftr::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--split);
}
.side__brand { position: relative; }

/* ---------- Brand surfaces ---------- */
/* The rentals band and the shop header are purple; ink stays for the hero
   and the workshop, so the page alternates the two halves of the mark. */

.phead--purple { background: var(--purple-ink); color: var(--paper); }
.phead--purple .crumbs a, .phead--purple .crumbs span { color: rgba(245, 242, 234, .55); }
.phead--purple .crumbs b { color: var(--paper); }
.phead--purple .eyebrow { color: var(--purple-bright); background: rgba(200, 149, 222, .14); }
.phead--purple .lede { color: rgba(245, 242, 234, .78); }

.cta { background: var(--purple); }
.cta .h1 em { color: var(--volt); }
.cta .btn--accent { --btn-bg: var(--green); --btn-bd: var(--green); --btn-fg: #fff; }
.cta .btn--accent:hover { --btn-bg: var(--green-deep); --btn-bd: var(--green-deep); }


/* ------------------------------------------------------------ 20 · SHOP */

/* Promises under the shop header: why buying here beats buying online. */
.promise { display: grid; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 820px) { .promise { grid-template-columns: repeat(3, 1fr); } }
.promise__i {
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(200, 149, 222, .22);
}
.promise__i b {
  display: block; font-family: var(--font-head); font-weight: 400;
  font-size: 1.6rem; line-height: 1; color: var(--purple-bright);
}
.promise__i strong {
  display: block; margin-top: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .875rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--paper);
}
.promise__i span { display: block; margin-top: 6px; font-size: .875rem; line-height: 1.5; color: rgba(245, 242, 234, .7); }

/* Category chips are real links, so each category page is crawlable. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.chip:hover { border-color: var(--purple); color: var(--purple); }
.toolbar { border: 0; padding-block: 0; align-items: center; }

/* Product cards */
.prods { gap: 14px; }
@media (min-width: 560px) { .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .prods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard { border-radius: var(--r-lg); padding: 8px; }
.pcard:hover { border-color: var(--purple); box-shadow: var(--shadow-md); transform: translateY(-5px); }
.pcard__m {
  display: block; position: relative; aspect-ratio: 1 / 1;
  border-radius: var(--r-md); overflow: hidden; background: var(--paper-2);
}
.pcard__m img { width: 100%; height: 100%; object-fit: cover; }
.pcard__b { padding: 14px 10px 10px; gap: 6px; }
.pcard__cat {
  font-family: var(--font-display); font-weight: 600;
  font-size: .5625rem; letter-spacing: .15em; color: var(--purple);
}
.pcard__b h3 { font-size: .9375rem; text-transform: none; letter-spacing: -.01em; line-height: 1.25; }
.pcard__b h3 a:hover { color: var(--purple); }
.pcard__s { font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.pcard__foot { padding-top: 12px; margin-top: auto; border-top: 1px solid var(--line); }
.pcard .price { font-family: var(--font-head); font-weight: 400; font-size: 1.35rem; letter-spacing: .01em; }
.pcard__where {
  font-family: var(--font-display); font-weight: 600; font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* Stock is honest and loud: it decides whether the trip is worth making. */
.stockpill {
  position: absolute; left: 10px; top: 10px;
  padding: 6px 11px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: .5625rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--white); color: var(--ink);
  box-shadow: 0 2px 8px rgba(13, 15, 12, .12);
}
.stockpill--in_stock { background: var(--green); color: #fff; }
.stockpill--low      { background: var(--volt); color: var(--ink); }
.stockpill--order    { background: var(--purple); color: #fff; }
.stockpill--out      { background: var(--ink); color: var(--paper); }

/* Placeholder art until the stock is photographed: the split, softly. */
.pplate {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--split-soft);
  color: var(--ink);
}
.pplate svg {
  width: 58%; height: auto;
  fill: none; stroke: currentColor; stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .6s var(--ease-out);
}
.pplate .volt { fill: var(--volt); stroke: var(--ink); stroke-width: 2; }
.pplate .volt-s { stroke: var(--volt); stroke-width: 4; }
.pcard:hover .pplate svg { transform: scale(1.06) rotate(-2deg); }
.rcard__m .rcard__art { aspect-ratio: 4 / 3; height: auto; }
.rcard:hover .pplate svg { transform: scale(1.06) rotate(-2deg); }

.shelfnote { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Product page ---------- */
.pdp { align-items: start; }
@media (min-width: 900px) { .pdp { grid-template-columns: 1.05fr .95fr; } }
.pdp__photo {
  border-radius: var(--r-block); overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--paper-2);
}
.pdp__photo img { width: 100%; height: 100%; object-fit: cover; }
.pplate--lg svg { width: 52%; stroke-width: 2.6; }
.pdp__buy .h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.pdp__price {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 24px;
}
.pdp__price b {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem); letter-spacing: .01em; line-height: 1;
}
.pdp__price span {
  font-family: var(--font-display); font-weight: 600; font-size: .6875rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--purple);
}
.stock {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: .8125rem;
}
.stock i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.stock[data-stock="low"] i { background: var(--volt); box-shadow: 0 0 0 4px #fff4c8; }
.stock[data-stock="order"] i { background: var(--purple); box-shadow: 0 0 0 4px var(--purple-soft); }
.stock[data-stock="out"] i { background: var(--danger); box-shadow: 0 0 0 4px #f6dcd8; }
.pdp__try { margin-top: 16px; }
.pdp__try .linkc { color: var(--purple); }

.askform {
  margin-top: 22px; padding: 22px;
  border-radius: var(--r-lg);
  background: var(--white); border: 1px solid var(--purple);
  box-shadow: 0 0 0 5px var(--purple-soft);
}
.askform__g { display: grid; gap: 12px; margin: 14px 0 16px; }
@media (min-width: 560px) { .askform__g { grid-template-columns: 1fr 1fr; } }
.askform .field--full { grid-column: 1 / -1; }

.spectable th {
  font-family: var(--font-display); font-weight: 600;
  font-size: .625rem; letter-spacing: .13em; color: var(--muted);
}


/* ------------------------------------------------- 21 · REQUEST FORMS */

.consent { display: grid; gap: 8px; }
.consent .checkline { margin-top: 0; }
.consent__legal { font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.consent__legal a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
/* The honeypot: out of sight and out of the tab order, but still in the form. */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.btn.is-busy { opacity: .75; cursor: progress; }

.booking__result.is-bad { border-color: var(--danger); background: #fbeeec; color: #7a2419; }
.booking__result.is-bad strong { color: var(--danger); }

/* After a request goes, the form steps back and the receipt steps forward. */
.sent { display: flex; gap: 14px; align-items: flex-start; }
.sent__ic {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: #fff;
}
.sent__ic svg { width: 17px; height: 17px; }
.sent strong { display: block; font-size: 1.05rem; }
.sent p { margin-top: 6px; line-height: 1.55; }
.sent .mono { margin-top: 10px; color: var(--muted); }
.is-sent .fstep, .is-sent .formfoot, .is-sent > .fset, .is-sent .askform__g,
.is-sent > .eyebrow, .is-sent > [type=submit] { display: none !important; }
.is-sent .booking__result { margin-top: 0; }

/* ---------------------------------------------------------- 22 · PROSE */

.prose { max-width: 760px; }
.prose .h3 { margin-top: 36px; font-size: 1.05rem; }
.prose p, .prose li { margin-top: 12px; line-height: 1.7; color: var(--ink-700); }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.notice {
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--purple-soft); color: var(--purple-deep);
  border-left: 4px solid var(--purple);
}

.ftr__areas { max-width: 62ch; line-height: 1.7; }
/* A product with no photo yet keeps the split plate on its own page too. */
.pdp__photo.pplate { background: var(--split-soft); }


/* ============================================================================
   23 · PURPLE ON THE FIRST SCREEN
   The home opened on ink and green, so the brand colour only arrived three
   scrolls down. Purple now leads: the ribbon, the hero and every section
   label; ink and purple alternate down the page, and green stays for what
   you can press.
   ========================================================================= */

/* Ribbon and hero open in the brand colour. */
.ticker { background: var(--purple); }
.ticker span { color: rgba(255, 255, 255, .86); }
.hero {
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(107, 46, 128, .55), transparent 60%),
    var(--purple-ink);
}
.hero .eyebrow { color: var(--purple-bright); background: rgba(200, 149, 222, .16); }
.hero__meta > div { background: rgba(255, 255, 255, .05); border-color: rgba(200, 149, 222, .22); }
.hero__meta > div:hover { background: rgba(200, 149, 222, .14); }
.hero__meta > div:nth-child(2) strong { color: var(--purple-bright); }
.hero__meta > div:nth-child(3) strong { color: var(--volt); }
.hero__badge b { color: var(--purple); }
.hero .btn--ghost { --btn-bd: rgba(200, 149, 222, .45); }
.hero .btn--ghost:hover { --btn-bg: var(--purple); --btn-bd: var(--purple); --btn-fg: #fff; }

/* Section labels are brand, not action: purple everywhere. */
.eyebrow { color: var(--purple); background: var(--purple-soft); }
.dark .eyebrow, .on-dark .eyebrow { color: var(--purple-bright); background: rgba(200, 149, 222, .14); }
.svc__num { background: var(--purple); color: #fff; }

/* Bands alternate the two halves of the mark:
   hero purple · rentals ink · workshop purple · CTA purple. */
#workshop.section.dark {
  background:
    radial-gradient(100% 80% at 100% 0%, rgba(107, 46, 128, .5), transparent 55%),
    var(--purple-ink);
}
#workshop .step { background: rgba(255, 255, 255, .05); border-color: rgba(200, 149, 222, .2); }

/* Light sections get the purple too. */
.why__c .n { color: var(--purple); }
.why__c .n em { color: var(--green); }
#about { background: var(--purple-soft) !important; }
#about .founder__sig { color: var(--purple); }
.pullquote span { color: var(--purple); }
.score b { color: var(--purple); }
/* The search card wears the split bar, like the footer and the emails. */
.booking__card { position: relative; overflow: hidden; }
.booking__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--split);
}

.hmode.on { background: var(--purple); color: #fff; }

/* ============================================================
   24 · RENTAL COUNTER + 404
   Second reference pass: ebiko (huge Anton headlines on calm
   neutral bands) and horizone (a hire page that opens with the
   search, not with prose).

   The shape: a dark purple hero that states what the page is
   for, the availability card lifted into its lower edge, then
   the three steps that replace the checkout this business
   deliberately does not have.
   ============================================================ */

.rhero {
  position: relative;
  isolation: isolate;
  background: var(--purple-ink);
  padding: 84px 0 104px;          /* the extra bottom is where the card sits */
  overflow: hidden;
}

/* The photograph is a texture, not a subject: heavily darkened so the
   headline keeps its contrast at every window size. */
.rhero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(42, 17, 53, .82) 0%, rgba(42, 17, 53, .94) 60%, var(--purple-ink) 100%),
    radial-gradient(120% 90% at 85% 0%, rgba(107, 46, 128, .75), transparent 60%),
    url("/assets/img/ebike-fat-outdoor.jpg") center 30% / cover no-repeat;
}

.rhero__in { position: relative; }
.rhero .crumbs { margin-bottom: 30px; }
/* Headline left, the sentence that explains it right — the same two-column
   head the rest of the site uses, so the pages still feel like one site. */
.rhero__t {
  display: grid; gap: 28px 48px; align-items: end;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.rhero__h { min-width: 0; }
.rhero .h1 { margin-top: 16px; font-size: clamp(44px, 7.4vw, 104px); line-height: .92; }
.rhero__lede { margin-top: 0; padding-bottom: 6px; color: rgba(245, 242, 234, .78); }

/* Three plain facts, in the place a car-hire site puts its star rating.
   Nothing invented: no counts, no reviews we do not have yet. */
.rtrust {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr);
  background: rgba(245, 242, 234, .16);
  border: 1px solid rgba(245, 242, 234, .16);
  border-radius: 14px; overflow: hidden;
}
.rtrust li { background: var(--purple-ink); padding: 20px 22px; }
.rtrust b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 15px; letter-spacing: -.01em; color: var(--paper);
}
.rtrust span {
  display: block; margin-top: 5px; font-size: 13px; line-height: 1.45;
  color: rgba(245, 242, 234, .62);
}

/* The search card rides up into the hero, the way a hire counter sits in
   the doorway rather than in the next room. */
.rhero + .booking { margin-top: -68px; padding-top: 0; position: relative; z-index: 2; }
.rhero + .booking .booking__card { box-shadow: 0 24px 60px -28px rgba(42, 17, 53, .6); }

@media (max-width: 860px) {
  .rhero { padding: 60px 0 88px; }
  .rhero__t { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .rhero .h1 { font-size: clamp(38px, 11vw, 60px); }
  .rtrust { grid-template-columns: 1fr; margin-top: 32px; }
  .rhero + .booking { margin-top: -56px; }
}

/* ---------------------------------------------------- three steps */
.steps3__l {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr);
  counter-reset: none;
}
.steps3__l li {
  position: relative; padding: 28px 24px 26px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
}
.steps3__l li::after {                 /* the split gear, quartered down one edge */
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--purple) 0 50%, var(--green) 50% 100%);
}
.steps3__n {
  display: block; font-family: var(--font-head); font-size: 30px; line-height: 1;
  color: var(--purple); letter-spacing: .01em;
}
.steps3__l h3 { margin: 12px 0 8px; }
.steps3__l p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

@media (max-width: 860px) { .steps3__l { grid-template-columns: 1fr; } }

/* A calm neutral band between two white ones — ebiko's rhythm. */
.section--alt { background: var(--paper-2); }

/* ------------------------------------------------------------ 404 */
.phead--404 { background: var(--purple-ink); color: var(--paper); padding: 96px 0 84px; }
.phead--404 .h1 { color: var(--paper); }
.phead--404 .eyebrow { color: var(--purple-bright); }
.e404 { max-width: 44ch; }
.e404 .lede { color: rgba(245, 242, 234, .76); margin-top: 18px; }
.e404__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.e404__grid {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr);
}
.e404__grid a {
  display: block; height: 100%; padding: 20px;
  border: 1px solid rgba(245, 242, 234, .18); border-radius: 14px;
  text-decoration: none; transition: border-color .18s, background .18s;
}
.e404__grid a:hover { border-color: var(--green-bright); background: rgba(245, 242, 234, .05); }
.e404__grid b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 15px; color: var(--paper);
}
.e404__grid span {
  display: block; margin-top: 6px; font-size: 13px; line-height: 1.45;
  color: rgba(245, 242, 234, .6);
}

@media (max-width: 860px) {
  .phead--404 { padding: 64px 0 56px; }
  .e404__grid { grid-template-columns: 1fr 1fr; margin-top: 40px; }
}
@media (max-width: 520px) { .e404__grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------- focus, everywhere
   Buttons already had a ring; links, fields and summaries did not.
   One rule, so every keyboard stop on the site is visible. */
a:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}
.dark a:focus-visible,
.on-dark a:focus-visible,
.rhero a:focus-visible { outline-color: var(--green-bright); }

/* Anchors land under the sticky header unless they are told not to.
   Every target an in-page link points at: the availability card, the
   fleet, and anything else given an id to jump to. */
#check, #fleet, #rentals, #workshop, #shop, #about, [id][data-anchor] {
  scroll-margin-top: 104px;
}
@media (max-width: 860px) { #check, #fleet, #rentals, #workshop, #shop, #about { scroll-margin-top: 84px; } }

/* ============================================================
   25 · QUIETER FURNITURE (ebiko pass)

   Two complaints, one cause: too many things asking to be
   looked at. Ebiko's page is mostly air, one enormous headline
   per screen, and chrome that stays out of the way until you
   need it. This section takes the shouting out of the section
   nav and gives the home room to breathe.
   ============================================================ */

/* ------------------------------------------------- room to breathe
   Ebiko runs about 160px of air between sections at desktop. Ours was
   closer to 90, which is what made seven sections read as a wall. */

/* And one headline per screen, at the size ebiko sets them. */
.section .shead .h1 { font-size: clamp(38px, 5.6vw, 82px); line-height: .96; }
.shead { margin-bottom: 8px; }

/* ============================================================
   26 · PHOTO PLACEHOLDERS

   The client is reshooting. Until the photographs land, every
   content photo is a labelled box of the right shape, so the
   layout being judged is the real one and nobody mistakes a
   stand-in for a decision.

   The label is the alt text the photo will inherit — it says
   what the picture has to show. docs/PHOTO-LIST.md is the same
   information as a shot list.

   One switch turns them off: MW_PHOTOS=ready python generate.py
   ============================================================ */

.ph {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; padding: 22px;
  background:
    repeating-linear-gradient(135deg,
      rgba(107, 46, 128, .05) 0 10px, transparent 10px 20px),
    var(--paper-2);
  border: 1px dashed var(--grey-300);
  border-radius: inherit;
  text-align: center;
  overflow: hidden;
}

/* The ratio, set like a slate on a shoot. */
.ph__r {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--purple);
  padding: 4px 9px; border-radius: 99px; background: var(--white);
  border: 1px solid var(--line);
}
.ph__t {
  max-width: 34ch;
  font-family: var(--font-display); font-weight: 500;
  font-size: .8125rem; line-height: 1.5; color: var(--grey-500);
}

/* In a dark band the box has to invert, or it punches a hole in the panel. */
.dark .ph, .on-dark .ph, .rhero .ph {
  background:
    repeating-linear-gradient(135deg,
      rgba(245, 242, 234, .06) 0 10px, transparent 10px 20px),
    rgba(245, 242, 234, .04);
  border-color: rgba(245, 242, 234, .22);
}
.dark .ph__r, .on-dark .ph__r {
  background: transparent; color: var(--purple-bright); border-color: rgba(245, 242, 234, .25);
}
.dark .ph__t, .on-dark .ph__t { color: rgba(245, 242, 234, .62); }

/* Small boxes drop the slate — there is no room for it. */
@container (max-width: 220px) { .ph__r { display: none; } }
.ph--sm .ph__r { display: none; }

/* ============================================================
   27 · EBIKO PASS

   The reference, measured at 1165px wide:
     H1 Anton 130px · H2 64px · H3 50px · card titles Anton 40px
     white page, #f4f4f4 bands, ink #151515, one accent
     10px radii, pill buttons with a SQUARE arrow badge
     section labels: mark + hairline rule + quiet lowercase word

   What carries over: the scale, the air, Anton everywhere, the
   square badge, the labelled rule. What does not: the lime.
   Motion Wheel's accents are the purple and green of the mark,
   and the client chose them.
   ============================================================ */

/* ---------------------------------------------------- the page itself
   Ebiko is white with grey bands. Ours keeps a trace of warmth so the
   brand does not turn generic, but it stops being a beige page. */
:root {
  --paper: #fbfaf8;
  --paper-2: #f2f1ed;
}
body { background: var(--white); }
.section { background: var(--white); }
.section--alt { background: var(--paper-2); }

/* ------------------------------------------------------------- type
   Anton for every heading, down to the card titles. That single choice
   is most of what makes the reference look like itself. */
.h1, .h2, .h3, .h4, .display { font-family: var(--font-head); font-weight: 400; }
.h1  { font-size: clamp(40px, 7.4vw, 112px); line-height: .9;  letter-spacing: -.005em; }
.h2  { font-size: clamp(34px, 5.2vw, 64px);  line-height: .94; }
.h3  { font-size: clamp(26px, 3.4vw, 44px);  line-height: .98; }
.h4  { font-size: clamp(20px, 2.2vw, 34px);  line-height: 1;   text-transform: uppercase; }

/* The second line of a headline drops to grey, the way the reference
   splits "KEEPING EVERY RIDE / RUNNING SMOOTHLY". Ours goes purple. */
.h1 em, .h2 em, .h3 em { font-style: normal; color: var(--purple); }
.dark .h1 em, .on-dark .h1 em,
.dark .h2 em, .on-dark .h2 em { color: var(--purple-bright); }

/* ------------------------------------------------- section label
   A small mark, a hairline across the page, and one quiet word. */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 0; background: none; border: 0; border-radius: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: .8125rem; letter-spacing: 0; text-transform: none;
  color: var(--muted);
}
.eyebrow::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--split);
}
.eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}
.dark .eyebrow, .on-dark .eyebrow { color: rgba(245, 242, 234, .7); }
.dark .eyebrow::after, .on-dark .eyebrow::after { background: rgba(245, 242, 234, .18); }

/* ---------------------------------------------------------- buttons
   A pill with a square badge holding the arrow — the reference's own
   shape, and the thing that makes its buttons read as a set. */
.btn { border-radius: 999px; padding: 13px 14px 13px 24px; gap: 14px; }
.btn .ar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(255, 255, 255, .22);
}
.btn--ghost .ar, .btn--light .ar { background: rgba(13, 15, 12, .08); }
.btn--accent .ar { background: rgba(255, 255, 255, .25); }
/* A button with no arrow keeps its old padding, or it looks lopsided. */
.btn:not(:has(.ar)) { padding: 13px 24px; }

/* ------------------------------------------------------------ radii
   The reference is square-ish: 10px on cards, pills only on buttons
   and tags. Our big rounded panels were the other half of the noise. */
:root { --r-card: 10px; --r-lg: 12px; }
.rcard, .scard, .pcard, .svc__c, .why__c, .steps3__l li, .trow, .formcard,
.booking__card, .e404__grid a, .rtrust { border-radius: 10px; }

/* ------------------------------------------------ the full-bleed hero
   One picture, the width of the window; the headline lives on it. The
   scrim is a gradient rather than a flat tint so the top of the photo
   stays bright under the header and the type still holds at the foot. */
.hero--full {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(88vh, 760px);
  padding: 0 0 clamp(28px, 4vw, 54px);
  margin: 0; border-radius: 0;
  background: var(--purple-ink);
  overflow: hidden;
}
.hero--full .hero__media { position: absolute; inset: 0; }
.hero--full .hero__media picture { display: block; width: 100%; height: 100%; }
.hero--full .hero__media img,
.hero--full .hero__media .ph {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: auto !important; border-radius: 0; border: 0;
  /* Centring the crop is what loses the subject. A wide window is shorter
     than the file, so the crop eats the top — where the rider's head is;
     a phone is far taller than the file, so it eats the sides instead.
     Holding the frame slightly above centre keeps the head in on desktop,
     and the horizontal half keeps the rider in on a phone, where the
     visible slice is only the middle of the width. */
  object-position: 50% 34%;
}
@media (max-width: 700px) {
  .hero--full .hero__media img,
  .hero--full .hero__media .ph { object-position: 46% 40%; }
}
/* The scrim. Purple rather than black, so the brand is in the photograph
   itself and not only in the furniture around it. */
.hero--full::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(34, 13, 45, .62) 0%, rgba(34, 13, 45, .1) 26%, rgba(34, 13, 45, .72) 74%, rgba(34, 13, 45, .96) 100%),
    linear-gradient(98deg,
      rgba(34, 13, 45, .92) 0%, rgba(34, 13, 45, .84) 22%,
      rgba(34, 13, 45, .5) 40%, rgba(34, 13, 45, .14) 56%,
      rgba(34, 13, 45, .04) 74%, rgba(34, 13, 45, .3) 100%);
}
.hero--full .hero__in { position: relative; z-index: 2; width: 100%; }

.hero--full .display {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(52px, 11.2vw, 164px); line-height: .86;
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--paper); margin: 0;
  text-wrap: balance;
}
.hero--full .display em { font-style: normal; color: var(--purple-bright); }
.hero--full .hero__sub {
  max-width: 46ch; margin: 22px 0 0;
  font-size: clamp(15px, 1.25vw, 17px); line-height: 1.6;
  color: rgba(245, 242, 234, .82);
}
.hero--full .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }


@media (max-width: 860px) {
  .hero--full { min-height: 0; padding-top: 180px; }
}

/* The second line is the same face as the first — only the colour moves.
   The serif italic belongs to the old hero and would fight Anton here. */
.hero--full .display em {
  font-family: var(--font-head); font-style: normal;
  text-transform: uppercase; letter-spacing: -.01em;
  color: var(--purple-bright);
}

/* The stand-in's caption gets out of the headline's way and sits in the
   corner, like a slate on a contact sheet. */
.hero--full .ph {
  display: block; padding: 0; border: 0; background:
    repeating-linear-gradient(135deg, rgba(245,242,234,.05) 0 12px, transparent 12px 24px),
    var(--purple-ink);
}
.hero--full .ph__r { display: none; }
.hero--full .ph__t {
  position: absolute; right: 20px; top: 20px; max-width: 24ch;
  text-align: right; font-size: .75rem; line-height: 1.45;
  color: rgba(245, 242, 234, .5);
}

/* The reference has no second typeface in its headlines: the accent is a
   colour change, not a face change. The serif italic stays in the brand
   for quotes and signatures, but it leaves the headings. */
.h1 em, .h2 em, .h3 em, .h4 em, .display em {
  font-family: var(--font-head);
  font-style: normal; text-transform: uppercase; letter-spacing: -.005em;
  color: var(--purple);
}
.dark .h1 em, .dark .h2 em, .dark .h3 em,
.on-dark .h1 em, .on-dark .h2 em, .on-dark .h3 em { color: var(--purple-bright); }

/* The rentals hero reads its photograph from CSS, so the generator's
   placeholder pass never sees it. While the reshoot is on, the band is
   the purple and the pattern alone; the line below says what belongs
   there, and it is listed in docs/PHOTO-LIST.md with the rest. */
/* The photograph is there now, so the stripes and the note that said what
   belonged here are gone. The scrim runs across, not down: near-solid purple
   under the headline on the left, thinning to the right where the riders
   are, and closing again along the bottom edge where the search card docks.
   Purple rather than black, so the brand is in the picture itself. */
.rhero__bg, .phead__bg {
  position: absolute; inset: 0; z-index: -1;
  background-repeat: no-repeat; background-size: cover;
}
.rhero__bg {
  background-image:
    linear-gradient(180deg, transparent 55%, rgba(42, 17, 53, .9) 100%),
    linear-gradient(90deg, rgba(42, 17, 53, .95) 0%, rgba(42, 17, 53, .86) 38%, rgba(42, 17, 53, .46) 100%),
    url("/assets/img/bg-rentals.jpg");
  background-position: center, center, center 32%;
}
.phead__bg {
  background-image:
    linear-gradient(90deg, rgba(42, 17, 53, .96) 0%, rgba(42, 17, 53, .88) 42%, rgba(42, 17, 53, .56) 100%),
    url("/assets/img/bg-shop.jpg");
  /* Held near the top of the file: the head is in its upper quarter, and a
     centred crop put it under the menu bar. */
  background-position: center, 50% 6%;
}
/* The gear mark was the shop head's only decoration; with a photograph
   behind it, it lands on the man's face. */
.phead--purple:has(.phead__bg)::before { display: none; }

/* A phone shows a narrow slice of a wide photograph, and the text now runs
   the full width, so the scrim has to hold everywhere and the slice has to
   be the one with the faces in it. */
@media (max-width: 760px) {
  .rhero__bg {
    background-image:
      linear-gradient(180deg, rgba(42, 17, 53, .8) 0%, rgba(42, 17, 53, .86) 60%, rgba(42, 17, 53, .96) 100%),
      url("/assets/img/bg-rentals.jpg");
    background-position: center, 52% 30%;
  }
  .phead__bg {
    background-image:
      linear-gradient(180deg, rgba(42, 17, 53, .78) 0%, rgba(42, 17, 53, .9) 100%),
      url("/assets/img/bg-shop.jpg");
    background-position: center, 60% 8%;
  }
}

/* ============================================================
   28 · THE HEADER SITS ON THE HERO

   The bar was a block of its own above the page, so between the
   ticker and the hero there was a band of paper the width of the
   window. In the reference the picture starts immediately and the
   navigation rides on it.

   The bar keeps its place in the document — it is still the first
   thing after the ticker, still sticky, still the first stop for
   a keyboard — and a negative margin equal to its own height lets
   the section behind it come up and fill the gap.

   Only where the first section can carry it: a dark band. On the
   light pages (contact, privacy, faq) the bar keeps its own
   ground, because dark-on-paper is the look there.
   ============================================================ */

/* 6px of padding + a 70px bar = 76. */
body:has(main > .hero--full:first-child) .hdr,
body:has(main > .rhero:first-child) .hdr,
body:has(main > section.dark:first-child) .hdr,
body:has(main > .phead:first-child) .hdr {
  margin-bottom: -76px;
}

/* The sections that start at the top need their content clear of it.
   The full-bleed hero is anchored to its foot, so it needs nothing. */
body:has(main > .rhero:first-child) .rhero { padding-top: calc(76px + clamp(40px, 5vw, 72px)); }
body:has(main > section.dark:first-child) .phead { padding-top: calc(76px + clamp(32px, 4vw, 56px)); }

/* The stand-in's slate would land under the bar otherwise. */
.hero--full .ph__t { top: calc(76px + 16px); }
.rhero__in::before { top: 6px; }

/* Where the bar floats on a photograph it gets a hairline instead of a
   drop shadow: a shadow over a dark picture reads as a smudge. */
body:has(main > .hero--full:first-child) .hdr__in,
body:has(main > .rhero:first-child) .hdr__in,
body:has(main > section.dark:first-child) .hdr__in {
  box-shadow: 0 0 0 1px rgba(245, 242, 234, .1);
}
body:has(main > .hero--full:first-child) .hdr.is-stuck .hdr__in,
body:has(main > .rhero:first-child) .hdr.is-stuck .hdr__in,
body:has(main > section.dark:first-child) .hdr.is-stuck .hdr__in {
  box-shadow: 0 0 0 1px rgba(245, 242, 234, .14), 0 18px 46px rgba(13, 15, 12, .38);
}

/* A page head is a dark block, so the bar belongs on it rather than above
   it. Without this the block began 16px down and the body's white showed
   through the bar's own padding — a white shelf under a floating pill. */
main > .phead:first-child {
  margin-top: 0;
  padding-top: calc(70px + 14px + clamp(26px, 3vw, 46px));
}

/* The shop is a destination in the nav, not a utility page, so its head
   carries the weight the rentals and repairs heroes carry. Privacy and the
   FAQ keep the short block — a tall purple banner over a policy page is
   height spent on nothing. Measured in the same units as the bar above it,
   so the two stay in step when the bar changes. */
.phead--tall { padding-bottom: clamp(52px, 6.5vw, 96px); }
main > .phead--tall:first-child {
  padding-top: calc(70px + 14px + clamp(44px, 5.5vw, 92px));
  min-height: clamp(460px, 52vw, 640px);
  /* The centring lives on the section, not on the wrap: min-height on a
     border-box section already covers the padding, so inheriting it onto
     the wrap counted that padding a second time and the block overshot. */
  display: flex; flex-direction: column; justify-content: center;
}
body:has(main > .phead:first-child) .hdr__in {
  box-shadow: 0 0 0 1px rgba(245, 242, 234, .1);
}
body:has(main > .phead:first-child) .hdr.is-stuck .hdr__in {
  box-shadow: 0 0 0 1px rgba(245, 242, 234, .14), 0 18px 46px rgba(13, 15, 12, .38);
}
@media (max-width: 780px) {
  main > .phead:first-child { padding-top: calc(62px + 14px + 28px); }
}

/* ============================================================
   29 · ABOUT, THE REFERENCE'S WAY

   Label under a hairline. Headline on the left, big, its second
   line in the accent. The paragraph and the button held over to
   the right, starting at the same baseline as the headline. Then
   a photo band that deliberately breaks the column: indented on
   the left, running off the right edge of the window.
   ============================================================ */

.about2 { padding-bottom: 0; }
.about2 .eyebrow { margin-bottom: 34px; }

.about2__head {
  display: grid; gap: 28px 64px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
}
.about2__head .h1 { margin: 0; }
/* The second line is the quieter half of the sentence. */
.about2__head .h1 em { color: var(--head-quiet); }

.about2__aside { padding-top: 6px; }
.about2__aside p {
  margin: 0; max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; color: var(--muted);
}
.about2__aside .btn { margin-top: 26px; }

/* The band starts inside the column and runs out past the right edge —
   the picture is wider than the page, which is what gives the block its
   movement. The left indent matches the gutter the text sits in. */
.about2__band {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin-top: clamp(44px, 6vw, 86px);
  margin-left: clamp(16px, 18vw, 290px);
  /* The band already sits outside .wrap, so it reaches the window edge on
     its own. A negative margin on top of that pushed it past the edge and
     put 47px of horizontal scroll on the whole page. */
  margin-right: 0;
}
.about2__band figure { margin: 0; overflow: hidden; }
.about2__band img, .about2__band .ph {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0;
}
.about2__band img { display: block; }

@media (max-width: 900px) {
  .about2__head { grid-template-columns: 1fr; gap: 24px; }
  .about2__band { margin-left: 0; margin-right: 0; grid-template-columns: 1fr; }
}

/* The reference's button: ink body, accent badge. */
.btn--dark { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: var(--paper); }
.btn--dark:hover { --btn-bg: var(--purple); --btn-bd: var(--purple); }
.btn--dark .ar { background: var(--green); color: #fff; }

/* ============================================================
   30 · SERVICES ROW + THE SEARCH INSIDE THE HERO
   ============================================================ */

.svc2__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-top: 30px;
}
.svc2__head .h1 { margin: 0; }
.svc2__head .h1 em { color: var(--head-quiet); }

.svc2__nav { display: flex; gap: 8px; flex: none; padding-bottom: 8px; }
.svc2__ar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 8px;
  border: 0; cursor: pointer; color: var(--ink);
  background: var(--green-soft);
  transition: background .18s, color .18s, transform .18s;
}
.svc2__ar:hover { background: var(--green); color: #fff; }
.svc2__ar:active { transform: translateY(1px); }
.svc2__ar[disabled] { opacity: .35; cursor: default; background: var(--paper-2); }

/* A rail rather than a grid: four fit on a desktop, and on a narrow screen
   it becomes a swipe without the layout having to change shape. */
.svc2__rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(236px, 29%, 360px);
  gap: 0; margin-top: clamp(32px, 4vw, 56px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; scroll-behavior: smooth;
}
.svc2__rail::-webkit-scrollbar { display: none; }

.svc2__c {
  scroll-snap-align: start; min-width: 0;
  border-left: 1px solid var(--line);
  padding: 0 clamp(14px, 1.4vw, 22px);
}
.svc2__c:last-child { border-right: 1px solid var(--line); }

.svc2__t {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 118px; padding-bottom: 20px;
}
.svc2__t h3 { margin: 0; }
.svc2__n { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); }

/* The alternating hang is what stops the row reading as one grey band. */
.svc2__m { margin: 0; margin-top: var(--drop, 0px); overflow: hidden; border-radius: 8px; }
.svc2__m img, .svc2__m .ph {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px;
}
.svc2__m img { display: block; }
.svc2__b { padding: 18px 0 0; }
.svc2__b p { margin: 0 0 14px; font-size: .9375rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 1000px) {
  .svc2__rail { grid-auto-columns: clamp(258px, 62%, 420px); }
  .svc2__head { flex-direction: column; align-items: flex-start; }
  .svc2__nav { padding-bottom: 0; }
}

/* -------------------------------------------- the search, in the hero
   It is the first thing the business wants asked, so it belongs on the
   opening screen rather than below it. Same trick as the rentals page:
   the hero leaves room at its foot and the card comes up into it. */
/* The card is a child of the hero now, so it needs no overlap at all —
   just a gap under the buttons and the hero's own bottom padding beneath
   it. The purple runs behind the whole card instead of half of it. */
.hero--full .booking {
  margin-top: clamp(26px, 3vw, 42px);
  padding: 0; position: relative; z-index: 2;
}
.hero--full .booking__card { box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .5); }

@media (max-width: 860px) {
  .hero--full .booking { margin-top: 24px; }
}

/* ============================================================
   31 · MOTION

   motion.js wraps each line of a headline in .ln / .ln__i so the
   line can rise out from under a clipped edge. The clip lives
   here; the movement lives there.

   Nothing is pre-hidden in CSS. If the script never runs — no
   JavaScript, a blocked CDN, reduced motion — the page is
   already in its finished state and these rules change nothing
   visible.
   ============================================================ */

.ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ln__i { display: block; will-change: transform; }

/* The hero's picture is scaled on entry, so it must not spill. */
.hero--full .hero__media { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .ln { overflow: visible; }
  .ln__i { transform: none !important; }
}

/* ============================================================
   32 · THE HERO, MADE OBJECTIVE

   Three faults at a wide viewport: the headline grew past its
   usefulness (164px at 1900px), the block was anchored to the
   foot with no guaranteed clearance so the first line slid under
   the bar, and the gaps between the four elements were set in vw
   — which meant the wider the screen, the further the visitor had
   to travel before reaching the one thing the business wants
   asked. The search now lands inside the first screen.
   ============================================================ */

.hero--full {
  /* Enough to be a hero, not so much that the search falls off the screen.
     The 124px is the ticker and the bar, which overlay the top. */
  min-height: min(74vh, 660px);
  padding-top: 108px;
  /* Trimmed until the search card's foot lands inside the first screen at
     1600x900 — the size most of the shop's desktop visitors arrive on. */
  padding-bottom: clamp(88px, 7vw, 112px);
}
/* With the card inside, the stack is taller than the band's floor height.
   `margin-top: auto` bottom-anchored it and pushed the headline up under
   the bar; the content now simply starts below the padding and the band
   grows to fit. */
.hero--full .hero__in { margin-top: 0; }
.hero--full { justify-content: flex-start; }

.hero--full .display {
  font-size: clamp(46px, 7.6vw, 104px);
  line-height: .86;
}
.hero--full .hero__sub { margin-top: 16px; max-width: 52ch; }
.hero--full .hero__cta { margin-top: 22px; }

@media (max-width: 860px) {
  .hero--full { min-height: 0; padding-top: 112px; padding-bottom: 86px; }
}

/* The section rhythm was set for seven sections of prose. With the search
   on the first screen the page should get to the point faster. */
.section .shead .h1 { font-size: clamp(34px, 4.4vw, 64px); }
.about2__head .h1, .svc2__head .h1 { font-size: clamp(34px, 4.4vw, 64px); }

/* ============================================================
   33 · SHOP BAND
   Centred head, then the goods full-bleed over an oversized word
   set in the page's own grey. The word is scenery: it is
   aria-hidden, and the headline above carries the meaning.
   ============================================================ */

.shop2 { text-align: center; padding-bottom: clamp(40px, 5vw, 64px); }
.shop2 .eyebrow--mid { justify-content: center; }
.shop2 .eyebrow--mid::after { display: none; }
.shop2 .eyebrow--mid::before { order: -1; }

.shop2__head { margin-top: 26px; }
.shop2__head .h1 { margin: 0 auto; }
.shop2__head .h1 em { color: var(--head-quiet); }
.shop2__head .btn { margin-top: 26px; }

.shop2__band {
  position: relative; margin-top: clamp(30px, 3.4vw, 48px);
  padding-inline: 0; overflow: hidden;
}
.shop2__note { margin-top: 26px; color: var(--muted); }

/* ---------------------------------------------------- the shop carousel
   One machine held in the middle with its neighbours showing at the
   edges, the oversized word behind it, and the name and description read
   underneath between the two arrows. The word is scenery: aria-hidden,
   and the headline above already carries the meaning. */
.shopcar__ghost {
  position: absolute; left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  font-family: var(--font-head); font-weight: 400;
  text-transform: uppercase; letter-spacing: -.02em;
  font-size: clamp(96px, 24vw, 380px); line-height: .8;
  color: var(--grey-200); opacity: .55;
  white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
}
.dark .shopcar__ghost { color: rgba(245, 242, 234, .07); opacity: 1; }

.shopcar__rail {
  position: relative; z-index: 1;
  display: flex; gap: clamp(14px, 1.6vw, 26px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; scroll-behavior: smooth;
  /* Half a viewport of air at each end so the first and the last can
     reach the middle like every other one. */
  padding-inline: calc(50% - min(23vw, 310px));
}
.shopcar__rail::-webkit-scrollbar { display: none; }

.shopcar__s {
  flex: 0 0 min(46vw, 620px); scroll-snap-align: center;
  position: relative; display: block; border-radius: var(--r-card);
  overflow: hidden; background: none;
  opacity: .42; transform: scale(.9); transform-origin: 50% 100%;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.shopcar__s.is-on { opacity: 1; transform: none; }
.shopcar__s img, .shopcar__s .ph {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 0;
}
.shopcar__s img { display: block; }
.shopcar__s .pplate { width: 100%; aspect-ratio: 4 / 3; }
.shopcar__s .stockpill { position: absolute; top: 14px; left: 14px; }

.shopcar__cap { margin-top: clamp(18px, 2vw, 30px); }
.shopcar__n {
  font-family: var(--font-head); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 50px); line-height: 1; margin: 0;
}
.shopcar__row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 46px); margin-top: 14px;
}
.shopcar__d {
  margin: 0; flex: 0 1 46ch; min-height: 2.9em;
  font-size: .9375rem; line-height: 1.6; color: var(--muted);
}
.shopcar__p {
  margin: 12px 0 0; font-family: var(--font-head); font-weight: 400;
  font-size: 1.45rem; text-transform: uppercase;
}
.shopcar__p span {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
  color: var(--muted);
}

@media (max-width: 760px) {
  .shopcar__rail { padding-inline: 5vw; }
  .shopcar__s { flex-basis: 84vw; }
  .shopcar__row { flex-wrap: wrap; }
  .shopcar__d { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .shopcar__rail { scroll-behavior: auto; }
  .shopcar__s { transition: none; }
}


/* The old founder block sat on lilac. The rebuilt one follows the
   reference: white ground, the colour carried by the type and the badge. */
#about.about2 { background: var(--white) !important; }

/* ============================================================
   34 · DESIGN AUDIT — THE THREE FAULTS

   Measured on the built page, not guessed at:

   · SEVEN radii in use at once (0, 8, 10, 12, 14, 35.4, 999px).
     Three full-width sections carried a 35px corner, which is
     the one shape the reference never uses: it turns a band into
     a floating card and breaks the edge of the page.
   · Every section had margin 0. Four white sections ran into one
     another with nothing between them, so the eye read one wall
     instead of four ideas.
   · 7,521px — 8.2 screens — to say four things.

   One radius scale, a real rhythm between sections, and a page
   that gets to the point.
   ============================================================ */

/* ---------------------------------------------------- one radius scale
   Bands are square. Media and cards take 8px. Pills stay pills.
   Nothing else is allowed a corner. */
:root { --r-block: 0px; --r-card: 8px; --r-lg: 8px; }

.hero, .section.dark, .phead, .section, .cta {
  border-radius: 0;
  margin-inline: 0;
}
.section.dark + .section.dark { margin-top: 0; }

.rcard, .scard, .pcard, .svc__c, .why__c, .steps3__l li, .trow, .formcard,
.booking__card, .e404__grid a, .rtrust, .ph, .svc2__m, .step, .wsp__img,
.about2__band figure, .prods > * {
  border-radius: var(--r-card);
}

/* -------------------------------------------------------- section rhythm
   Consecutive sections on the same ground need a line between them, or
   they read as one block. A dark band is its own separator, so the rule
   only applies where the ground does not change. */
.section + .section:not(.dark) { border-top: 1px solid var(--line); }
.section.dark + .section:not(.dark),
.section:not(.dark) + .section.dark { border-top: 0; }

/* -------------------------------------------------- vertical rhythm
   One value, set once, for every band on the site. Four separate passes
   had each written their own and the last one quietly won, which is why
   the spacing read differently from page to page. --sec-y is the only
   place it is decided now; a page that needs less says --sec-y, not a
   padding of its own. */
.section { padding-block: var(--sec-y); }
.section--tight { padding-block: calc(var(--sec-y) * .66); }

/* The search card is the one thing allowed to break the grid, and it is
   already doing it over the hero. It keeps its corner. */
.booking__card { border-radius: 14px; }

/* Lenis needs these four rules to behave. Inlined rather than pulled from
   a second CDN file: it is less than a request's worth of CSS. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================================
   40 · THE HERO, TO THE REFERENCE

   Three changes from what was here. The purple now carries the
   left half of the picture outright, so the headline sits on flat
   ground instead of on whatever the photograph happens to be doing
   there. The two buttons are gone — they repeated the bar above and
   the search below — and in their place are three facts, each one
   already true elsewhere on the site. And the search card stops
   being a white panel dropped on a dark band: it is glass over the
   photograph, which is what the reference does and what keeps the
   first screen reading as one thing.
   ============================================================ */

/* ------------------------------------------------- the label row */
.hero__tags {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 18px; margin: 0 0 clamp(18px, 2vw, 26px);
}
.hero__pin {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: rgba(200, 149, 222, .16);
  border: 1px solid rgba(200, 149, 222, .34);
  color: var(--purple-bright);
  font-family: var(--font-display); font-weight: 600;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
}
.hero__pin svg { width: 14px; height: 14px; flex: none; }
.hero__cats {
  font-family: var(--font-display); font-weight: 600;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245, 242, 234, .7);
}

/* ------------------------------------------- the search, as glass
   Everything below exists because the card sits on a photograph
   now. `color-scheme: dark` is the one that is easy to miss: without
   it the browser draws its own date text and calendar button in the
   colours it uses for a light field, which on this card is black on
   near-black. */
.hero--full .booking__card {
  color-scheme: dark;
  background: rgba(30, 12, 40, .58);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border: 1px solid rgba(200, 149, 222, .3);
  box-shadow:
    0 40px 90px -42px rgba(0, 0, 0, .8),
    0 0 70px -26px rgba(138, 74, 173, .5);
}
.hero--full .booking,
.hero--full .booking * { color: var(--paper); }
/* <option> is drawn by the OS in a popup outside the card, so it needs its
   own pair rather than the inherited paper — that inheritance is what made
   the vehicle list white on white. */
.hero--full .booking option {
  color: var(--paper);
  background: #1b0f24;
}
.hero--full .booking .eyebrow {
  background: none; padding: 0; color: rgba(245, 242, 234, .62);
}
.hero--full .booking .eyebrow::after { background: rgba(245, 242, 234, .22); }
.hero--full .booking .h3 { color: var(--paper); }
.hero--full .booking .h3 em { color: var(--purple-bright); }

/* The fields stop being one joined bar and become separate boxes,
   which is how the reference reads them: three questions, not one
   long strip. */
.hero--full .booking .bsearch {
  background: none; border: 0; overflow: visible;
  gap: clamp(10px, 1vw, 14px);
}
.hero--full .booking .bsearch__f {
  background: rgba(14, 6, 20, .5);
  border: 1px solid rgba(245, 242, 234, .14);
  border-radius: 12px;
  padding: 13px 18px;
}
.hero--full .booking .bsearch__f:focus-within {
  background: rgba(14, 6, 20, .72);
  border-color: rgba(200, 149, 222, .55);
}
.hero--full .booking .bsearch__f label { color: rgba(245, 242, 234, .5); }
.hero--full .booking .bsearch__f input,
.hero--full .booking .bsearch__f select { color: var(--paper); }
.hero--full .booking .bsearch__go {
  border-radius: 12px;
  justify-content: center;
}

.hero--full .booking .hmodes {
  background: rgba(14, 6, 20, .5);
  border-color: rgba(245, 242, 234, .16);
}
.hero--full .booking .hmode { color: rgba(245, 242, 234, .6); }
.hero--full .booking .hmode:hover { color: var(--paper); }
.hero--full .booking .hmode.on { background: var(--purple); color: #fff; }

.hero--full .booking .btn--accent,
.hero--full .booking .btn--accent * { color: #fff; }

.hero--full .booking__card::before {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(200, 149, 222, 0) 0%, rgba(200, 149, 222, .75) 28%,
    rgba(143, 209, 63, .6) 72%, rgba(143, 209, 63, 0) 100%);
}

.hero--full .booking .tag {
  background: rgba(245, 242, 234, .08);
  border-color: rgba(245, 242, 234, .2);
  color: var(--paper);
}
.hero--full .booking .tag--accent {
  background: rgba(143, 209, 63, .18);
  border-color: rgba(143, 209, 63, .34);
  color: var(--green-bright);
}

/* ------------------------------------- the caption on the picture
   While the photographs are still being taken this is the stand-in's
   label. The reference has a small card in the same place saying what
   the picture is, so it is styled as one. It goes when the photo
   lands, because the whole .ph box goes with it. */
.hero--full .ph__t {
  z-index: 3;
  top: clamp(160px, 30vh, 330px); bottom: auto; right: clamp(20px, 4vw, 64px);
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 25ch; padding: 14px 16px;
  text-align: left; border-radius: 12px;
  background: rgba(30, 12, 40, .66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(200, 149, 222, .28);
  color: rgba(245, 242, 234, .82);
}
.hero--full .ph__t::before {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(107, 46, 128, .8) center / 13px 13px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c895de' stroke-width='1.8'%3E%3Cpath d='M10 18s6-5.2 6-9.4A6 6 0 0 0 4 8.6C4 12.8 10 18 10 18Z'/%3E%3Ccircle cx='10' cy='8.6' r='2.1'/%3E%3C/svg%3E");
}
@media (max-width: 1100px) { .hero--full .ph__t { display: none; } }

/* ============================================================
   35 · WORKSHOP + RENTALS, LAID OUT PROPERLY

   Workshop: the photo sat above the headline inside a narrow
   column while the price list started at the top of the other
   one. Nothing lined up and the bottom-right quarter was empty.
   Now the head runs across the top and one row of two columns
   carries the bench and the list, tops aligned.

   Rentals: three models in a grid built for four, so a quarter
   of the band was dead space, and each card was a dark box on a
   dark band — a box inside a box. The box goes; the photograph
   and the type do the work.
   ============================================================ */

/* The eyebrow kept a lilac pill from the old skin. It is a rule and a
   label now, on every ground. */
.dark .eyebrow, .on-dark .eyebrow,
.dark .eyebrow--purple, .on-dark .eyebrow--purple {
  background: none; padding: 0;
}

/* ------------------------------------------------------------ workshop */
.wsp__head {
  display: grid; gap: 24px 64px; align-items: end;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  margin-top: 30px;
}
.wsp__head .h1 { margin: 0; font-size: clamp(34px, 4.4vw, 64px); }
.wsp__intro { padding-bottom: 6px; }
.wsp__intro .lede { margin: 0; max-width: 46ch; }
.wsp__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.wsp__grid {
  display: grid; gap: 28px 48px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  margin-top: clamp(34px, 4vw, 56px);
}
.wsp__img { position: relative; margin: 0; }
.wsp__img img, .wsp__img .ph {
  width: 100%; aspect-ratio: 10 / 11; object-fit: cover;
  border-radius: var(--r-card);
}
.wsp__img img { display: block; }
.wsp__menu .mono { margin: 0 0 14px; }
.wsp__menu .linkc { margin-top: 18px; }

@media (max-width: 900px) {
  .wsp__head, .wsp__grid { grid-template-columns: 1fr; }
  .wsp__img img, .wsp__img .ph { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------- rentals
   A card again, but a quiet one. Stripping the panel entirely left the
   type sitting flush against the picture and against the next column,
   with nothing holding a column together; the padded mount gives every
   edge the same air and makes the three read as three objects. */
.rent {
  display: grid; gap: clamp(16px, 1.6vw, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 52px);
}
.rcard {
  --pad: clamp(12px, 1vw, 16px);
  display: flex; flex-direction: column;
  padding: var(--pad);
  border: 1px solid transparent; border-radius: var(--r-card);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .35s var(--ease-out);
}
/* On paper the mount is a shade off the page rather than a shade onto it,
   and the hover reaches for the purple half of the mark. */
.rcard { background: var(--paper-2); border-color: var(--line); }
.rcard:hover { background: var(--white); border-color: var(--purple); }
.dark .rcard, .on-dark .rcard {
  background: rgba(245, 242, 234, .05); border-color: rgba(245, 242, 234, .11);
}
.dark .rcard:hover, .on-dark .rcard:hover {
  background: rgba(245, 242, 234, .08); border-color: rgba(200, 149, 222, .45);
}

/* site.css sets these light-on-dark. Both grounds, stated. */
.rcard__b p { color: var(--muted); }
.rcard__price span, .rcard__pre { color: var(--muted); }
.avail--soon { color: var(--grey-500); }
.dark .rcard__b p, .on-dark .rcard__b p { color: rgba(245, 242, 234, .6); }
.dark .rcard__price span, .dark .rcard__pre,
.on-dark .rcard__price span, .on-dark .rcard__pre { color: rgba(245, 242, 234, .45); }
.dark .avail--soon, .on-dark .avail--soon { color: rgba(245, 242, 234, .45); }
.rcard:hover { transform: translateY(-3px); }

/* The picture is inset by the same padding, so the mount reads as a mount
   rather than as a frame drawn around a photograph. */
.rcard__m { position: relative; border-radius: calc(var(--r-card) - 4px); overflow: hidden; }
.rcard__m img, .rcard__m .ph {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0;
}
.rcard__m img { display: block; }
.rcard__m .tag { position: absolute; top: 12px; left: 12px; }

.rcard__b { padding: 18px 6px 2px; display: flex; flex-direction: column; flex: 1; }
.rcard__b h3 {
  font-family: var(--font-head); font-weight: 400; text-transform: uppercase;
  font-size: clamp(19px, 1.7vw, 25px); line-height: 1.05; margin: 0;
}
.rcard__b p { margin: 9px 0 0; font-size: .9375rem; line-height: 1.6; }
.rcard .avail { margin-top: 14px; }

/* Price and the link share one line at the foot, so every card ends level
   whatever the length of its blurb. "from" is a prefix, not a word wedged
   between the figure and the unit. */
.rcard__price {
  display: flex; align-items: baseline; gap: 7px;
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.dark .rcard__price, .on-dark .rcard__price { border-top-color: rgba(245, 242, 234, .16); }
/* --green-bright is a lime: it reads on ink and disappears on paper. */
.section:not(.dark) .avail { color: var(--green-deep); }
.section:not(.dark) .avail i { background: var(--green); }
.rcard__price b { font-family: var(--font-head); font-size: clamp(26px, 2.4vw, 34px); line-height: 1; }
.rcard__price .rcard__wk {
  margin-left: auto; font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .04em; color: var(--ink); white-space: nowrap;
}
.dark .rcard__price .rcard__wk, .on-dark .rcard__price .rcard__wk { color: rgba(245, 242, 234, .85); }
.rcard__pre {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; opacity: .55; align-self: center;
}
.rcard .btn {
  align-self: stretch; justify-content: center;
  margin-top: 16px; padding-left: 20px; padding-right: 14px;
}

@media (max-width: 900px) { .rent { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .rent { grid-template-columns: 1fr; } }

/* The services rail on a dark band: the dividing lines and the arrow
   buttons need the dark variants, or they vanish or glare. */
.dark .svc2__c { border-left-color: rgba(245, 242, 234, .16); }
.dark .svc2__c:last-child { border-right-color: rgba(245, 242, 234, .16); }
.dark .svc2__n { color: rgba(245, 242, 234, .55); }
.dark .svc2__b p { color: rgba(245, 242, 234, .68); }
.dark .svc2__head .h1 em { color: var(--purple-bright); }
.dark .svc2__ar { background: rgba(245, 242, 234, .1); color: var(--paper); }
.dark .svc2__ar:hover { background: var(--green); color: #fff; }
.dark .svc2__ar[disabled] { background: rgba(245, 242, 234, .05); opacity: .4; }

.wsp__foot {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: clamp(30px, 3.4vw, 46px);
}

/* ============================================================
   36 · REVIEWS

   Three columns: a face, the quote at headline size, and one
   panel carrying a single figure. The old version slid every
   review past the reader on a marquee — all of them visible,
   none of them readable.
   ============================================================ */

.revs__grid {
  display: grid; gap: 4px; margin-top: 30px;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .9fr);
  align-items: stretch;
}
.revs__face { margin: 0; overflow: hidden; border-radius: var(--r-card); }
.revs__face img, .revs__face .ph {
  width: 100%; height: 100%; min-height: 380px;
  object-fit: cover; border-radius: 0;
}
.revs__face img { display: block; }

.revs__quote {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 3.4vw, 54px);
  background: var(--paper-2); border-radius: var(--r-card);
  text-align: center;
}
.revs__quote blockquote {
  margin: 0; font-family: var(--font-head); font-weight: 400;
  font-size: clamp(22px, 2.5vw, 38px); line-height: 1.04;
  text-transform: uppercase; letter-spacing: -.005em; color: var(--ink);
  text-wrap: balance;
}
.revs__quote figcaption {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 22px;
}
.revs__who strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .9375rem; }
.revs__who span { font-size: .8125rem; color: var(--muted); }
.revs__nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; }
.revs__count { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); margin-left: 6px; }

/* The one figure, on the brand's own colour, with the mark behind it. */
.revs__stat {
  position: relative; overflow: hidden;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--purple); color: var(--paper);
  border-radius: var(--r-card);
}
.revs__stat b {
  display: block; font-family: var(--font-head); font-weight: 400;
  font-size: clamp(44px, 5vw, 72px); line-height: .9;
}
.revs__stat strong {
  display: block; margin-top: 16px;
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem;
}
.revs__stat p {
  margin: 10px 0 0; font-size: .875rem; line-height: 1.6;
  color: rgba(245, 242, 234, .8); max-width: 34ch;
}
.revs__wheel {
  position: absolute; right: -58px; bottom: -72px; width: 220px; height: 220px;
  color: rgba(245, 242, 234, .22); pointer-events: none;
}
.revnote { margin-top: 24px; color: var(--muted); }

@media (max-width: 1000px) {
  .revs__grid { grid-template-columns: 1fr 1fr; }
  .revs__face { grid-column: 1 / -1; }
  .revs__face img, .revs__face .ph { min-height: 260px; aspect-ratio: 16 / 9; }
}
@media (max-width: 680px) { .revs__grid { grid-template-columns: 1fr; } }

/* ============================================================
   37 · CLOSING BAND

   The reference ends on a strip of media the width of the window
   with a running line of type across it. Four slots, each sized
   for a photograph OR a short silent loop — drop a <video> in
   place of the <img> and nothing else has to change.
   ============================================================ */

.cta2 { background: var(--white); padding-top: clamp(56px, 5.6vw, 92px); }
.cta2__in { padding-bottom: clamp(34px, 4vw, 56px); }

.cta2__head {
  display: grid; gap: 24px 64px; align-items: end; margin-top: 28px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
.cta2__head .h1 { margin: 0; font-size: clamp(34px, 4.4vw, 64px); }
.cta2__head .h1 em { color: var(--head-quiet); }
.cta2__aside p { margin: 0 0 20px; font-size: .9375rem; color: var(--muted); }
.cta2__aside p a { color: var(--purple); }
.cta2__btns { display: flex; gap: 12px; flex-wrap: wrap; }

.cta2__band { position: relative; }

/* ---- the running line ---- */
.cta2__mq {
  position: absolute; inset-inline: 0; top: 0; z-index: 2;
  overflow: hidden; padding: 12px 0;
  background: linear-gradient(180deg, rgba(13, 15, 12, .85), rgba(13, 15, 12, .55));
}
.cta2__mqt { display: flex; width: max-content; animation: ctamq 34s linear infinite; }
.cta2__mqr { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.cta2__mqr span {
  font-family: var(--font-head); font-weight: 400; white-space: nowrap;
  font-size: clamp(22px, 2.6vw, 38px); line-height: 1;
  text-transform: uppercase; color: var(--paper);
}
.cta2__mqr svg { flex: none; width: 26px; height: 26px; color: var(--green-bright); }
@keyframes ctamq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cta2__mqt { animation: none; } }

/* ---- the four slots ---- */
.cta2__media { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.cta2__media figure { margin: 0; overflow: hidden; background: var(--paper-2); }
.cta2__media img,
.cta2__media video,
.cta2__media .ph {
  width: 100%; aspect-ratio: 9 / 10;
  object-fit: cover; border-radius: 0;
}
.cta2__media img, .cta2__media video { display: block; }

@media (max-width: 860px) {
  .cta2__head { grid-template-columns: 1fr; }
  .cta2__media { grid-template-columns: 1fr 1fr; }
  .cta2__media img, .cta2__media video, .cta2__media .ph { aspect-ratio: 1 / 1; }
}

/* ============================================================
   38 · THE RENTALS PATTERN, AND NO WIDOWS

   The fleet band on /rentals/ is the home's rentals section: same
   paper ground, same head, same cards, and the same foot row —
   the small print on the left, the way out on the right.
   ============================================================ */

.rent__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: clamp(24px, 2.6vw, 34px);
}
.rent__foot .mono { margin: 0; }

/* ----------------------------------------------------------- widows
   A single word alone on the last line reads as a mistake, and it
   moves every time the text or the viewport changes, so it cannot be
   fixed by hand.

   `balance` evens out the lines of a short block, which is what a
   headline wants. `pretty` is the one that specifically refuses to
   leave the last word on its own, which is what a paragraph wants.
   Where a browser supports neither, the text wraps as it always did —
   nothing is hidden and nothing moves. */
h1, h2, h3, h4, h5, h6,
.display, .h1, .h2, .h3, .h4,
.shopcar__n, .revs__q, blockquote, .steps3__l h3, .hero__sub {
  text-wrap: balance;
}

p, li, dd, figcaption, summary, .lede, .ph__t, .shead__aside,
.rcard__b p, .svc2__b p, .shopcar__d, .pcard__s, .ftr__brand p {
  text-wrap: pretty;
}

/* The exceptions: anything on one line by design, or laid out in a
   track where re-wrapping would fight the layout. */
.mono, .eyebrow, .tag, .btn, .avail, .crumbs, .subnav a, .nav a,
.marquee *, .cta2__mq *, .srow__t span {
  text-wrap: normal;
}

/* ============================================================
   39 · THE FAQ BAND

   The questions were already a 900px column centred in the page;
   the heading above them was not, so the block read as two things
   that had missed each other. The heading sits over its own column
   now. The questions themselves stay left-aligned: a centred list
   gives the eye a new starting point on every line, and the
   chevron needs a fixed right edge to sit on.
   ============================================================ */

.faqband { text-align: center; }
.faqband .h2 {
  max-width: 20ch;
  margin: 0 auto clamp(26px, 3vw, 40px);
}
.faqband .eyebrow { justify-content: center; }
.faqband .eyebrow::after { display: none; }
.faqband .faq { text-align: left; }

/* ------------------------------------------------- opening an answer
   A <details> snaps open because the browser does not render the
   answer at all while the element is shut, so there is nothing to
   transition from. motion.js drives the height instead.

   These two rules are all the stylesheet contributes: somewhere for
   the clipped height to work against while the animation runs, and a
   chevron that turns back the moment the answer starts closing rather
   than when it has finished. */
.faq details { overflow: hidden; }
.faq details.is-shutting summary::after { transform: translateY(-70%) rotate(45deg); }

/* ---------------------------------------------------- the map, for real
   The drawn plate was a placeholder. The embed replaces it at the same
   size, so nothing around it moves. */
.mapbox--live { position: relative; overflow: hidden; border-radius: var(--r-card); }
.mapbox--live iframe {
  display: block; width: 100%; height: 100%;
  min-height: clamp(380px, 52vh, 640px); border: 0;
}

/* ------------------------------------------------ the hero on a phone
   On a phone the headline and the search card are taller than the screen,
   so a photo behind them was never seen. Here the photo gets its own
   window under the bar — about two-thirds of the width tall — and the
   words start below it, on the photo fading into the brand purple. */
@media (max-width: 700px) {
  .hero--full { padding-top: calc(76px + 66vw); padding-bottom: 44px; }
  .hero--full .hero__media { inset: 0 0 auto 0; height: calc(76px + 66vw + 240px); }
  .hero--full .hero__media img,
  .hero--full .hero__media .ph { object-position: 50% 22%; }
  .hero--full::after {
    background: linear-gradient(180deg,
      rgba(42, 17, 53, .5) 0, rgba(42, 17, 53, 0) 90px,
      rgba(42, 17, 53, 0) calc(76px + 44vw),
      rgba(42, 17, 53, .78) calc(76px + 66vw + 40px),
      var(--purple-ink) calc(76px + 66vw + 240px));
  }
}

/* ------------------------------------------------ the weekly plan
   The terms of the mode that is on, under the search: the weekly plan's
   minimum and deposit are said before anyone picks a date. */
.bplan {
  margin: 14px 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
}
.bplan b { color: var(--ink); font-weight: 600; }
.bplan[hidden] { display: none; }
.bplan--form { margin: -4px 0 4px; grid-column: 1 / -1; }
.hero--full .booking .bplan { color: rgba(245, 242, 234, .7); }
.hero--full .booking .bplan b { color: var(--paper); }

/* The nudge: more than two weeks by the day, and the weekly plan is set
   beside it. A native <dialog>, so Esc, focus and the backdrop work. */
.nudge {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: clamp(22px, 4vw, 34px);
  border: 0;
  border-radius: var(--r-block);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.nudge::backdrop { background: rgba(42, 17, 53, .55); backdrop-filter: blur(3px); }
.nudge[open] { animation: nudgein .28s var(--ease-out, ease-out); }
@keyframes nudgein { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.nudge__x {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--paper-2); color: var(--ink);
  font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.nudge h2 { margin-top: 10px; padding-right: 32px; }
.nudge__lede { margin-top: 10px; color: var(--muted); line-height: 1.55; }
.nudge__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.nudge__opt {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md);
}
.nudge__opt b { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }
.nudge__opt > span:last-of-type { font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.nudge__opt:not(.nudge__opt--on) b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.nudge__opt--on { border-color: var(--purple); background: var(--purple-soft); }
.nudge__opt--on b { color: var(--purple-deep); }
.nudge__save {
  align-self: flex-start; margin-top: 4px; padding: 4px 10px;
  border-radius: var(--r-pill); background: var(--green); color: #fff;
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
}
.nudge__fine { margin-top: 14px; }
.nudge__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.nudge__act .btn { flex: 1 1 180px; justify-content: center; }
@media (max-width: 420px) {
  .nudge__cmp { grid-template-columns: 1fr; }
}
.rent__note { max-width: 62ch; font-size: .875rem; line-height: 1.55; color: var(--muted); }
.rent__note b { color: var(--ink); font-weight: 600; }

/* ============================================================
   33 · THE HOME SLIDER

   Four slides — rental, workshop, shop, accessories — each a
   full-bleed photograph with its words on the left, where every
   picture was composed to leave calm ground. The photos cross-
   fade and drift; the words of the slide that is on rise in.
   On a phone each slide has its own tall photograph, subject at
   the top, words at the foot over the purple fade.
   ============================================================ */
.hslider {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(88vh, 800px);
  padding: 120px 0 calc(68px + clamp(34px, 4vw, 52px));
  background: var(--purple-ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
body:has(main > .hslider:first-child) .hdr { margin-bottom: -76px; }
body:has(main > .hslider:first-child) .hdr__in { box-shadow: 0 0 0 1px rgba(245, 242, 234, .1); }
body:has(main > .hslider:first-child) .hdr.is-stuck .hdr__in {
  box-shadow: 0 0 0 1px rgba(245, 242, 234, .14), 0 18px 46px rgba(13, 15, 12, .38);
}

.hslider__media { position: absolute; inset: 0; z-index: 0; }
.hslider__img {
  position: absolute; inset: 0; display: block;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hslider__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%;
  transform: scale(1.06);
  transition: transform 8s linear;
}
.hslider__img.is-on { opacity: 1; z-index: 1; }
.hslider__img.is-on img { transform: scale(1); }

/* The scrim: purple, heavy on the left where the words are and at the
   foot where the search card lands, light over the subject. */
.hslider::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(34, 13, 45, .55) 0%, rgba(34, 13, 45, 0) 22%, rgba(34, 13, 45, 0) 60%, rgba(34, 13, 45, .85) 100%),
    linear-gradient(95deg, rgba(34, 13, 45, .9) 0%, rgba(34, 13, 45, .72) 26%, rgba(34, 13, 45, .28) 48%, rgba(34, 13, 45, 0) 66%);
}

.hslider__in { position: relative; z-index: 2; width: 100%; }
/* Every slide's words share one cell, so the block is as tall as the
   longest and nothing below it jumps when the slide changes. */
.hslider__texts { display: grid; }
.hslide {
  grid-area: 1 / 1;
  align-self: end;
  max-width: 760px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .7s var(--ease), visibility 0s linear .7s;
}
.hslide.is-on {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .7s var(--ease) .25s, transform .8s var(--ease) .25s, visibility 0s;
}
.hslider .hero__tags { margin: 0 0 16px; }
.hslider .hero__cats {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(14, 6, 20, .45); border: 1px solid rgba(245, 242, 234, .18);
  font-family: var(--font-display); font-weight: 600; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hslider .hero__cats::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); }
.hslider .display {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(44px, 7vw, 100px); line-height: .88;
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--paper); margin: 0; text-wrap: balance;
}
.hslider .display em { font-style: normal; color: var(--purple-bright); }
.hslider .hero__sub {
  max-width: 48ch; margin: 18px 0 0;
  font-size: clamp(15px, 1.25vw, 17px); line-height: 1.6;
  color: rgba(245, 242, 234, .85);
}
.hslider .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.hslider .btn--accent, .hslider .btn--accent * { color: #fff; }

/* The tabs: a bar per slide that fills while it is on, with its name —
   so the visitor sees there are four things here and can jump to one. */
.hslider__nav {
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px);
  margin-top: clamp(30px, 4vw, 46px);
}
.hslider__dot {
  flex: 0 1 150px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  padding: 8px 0; border: 0; background: none; cursor: pointer;
  color: rgba(245, 242, 234, .55); text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .3s var(--ease);
}
.hslider__dot i { display: block; height: 3px; border-radius: 3px; background: rgba(245, 242, 234, .24); overflow: hidden; }
.hslider__dot b { display: block; height: 100%; width: 0; background: var(--paper); border-radius: inherit; }
.hslider__dot:hover, .hslider__dot.is-on { color: var(--paper); }
.hslider__dot.is-on b { width: 100%; }
.hslider.is-playing .hslider__dot.is-on b { animation: hsfill var(--hs-time, 7s) linear forwards; }
.hslider.is-paused .hslider__dot.is-on b { animation-play-state: paused; }
@keyframes hsfill { from { width: 0; } to { width: 100%; } }
.hslider__pause {
  flex: 0 0 auto; width: 36px; height: 36px; margin-left: auto;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(245, 242, 234, .3);
  background: rgba(14, 6, 20, .35); color: var(--paper); cursor: pointer;
}
.hslider__pause svg { width: 12px; height: 12px; }
.hslider__pause.is-off svg { display: none; }
.hslider__pause.is-off::before { content: ""; border-left: 9px solid currentColor; border-block: 6px solid transparent; margin-left: 3px; }

/* The search card rides the slider's foot, as it does on the rentals page. */
.hslider + .booking { margin-top: -68px; padding-top: 0; position: relative; z-index: 3; }
.hslider + .booking .booking__card { box-shadow: 0 24px 60px -28px rgba(42, 17, 53, .6); }

@media (max-width: 700px) {
  .hslider {
    min-height: min(100svh, 860px);
    padding: 0 0 calc(56px + 26px);
  }
  .hslider__img img { object-position: 50% 30%; }
  .hslider::after {
    background: linear-gradient(180deg,
      rgba(34, 13, 45, .5) 0, rgba(34, 13, 45, 0) 110px,
      rgba(34, 13, 45, 0) 34%, rgba(34, 13, 45, .78) 58%, rgba(34, 13, 45, .97) 100%);
  }
  .hslider .display { font-size: clamp(40px, 12.4vw, 60px); }
  .hslider .hero__sub { font-size: 15px; margin-top: 14px; }
  .hslider .hero__cta { margin-top: 20px; }
  .hslider .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .hslider__nav { gap: 8px; margin-top: 26px; }
  .hslider__dot span { display: none; }
  .hslider__dot { flex: 1 1 0; }
  .hslider + .booking { margin-top: -56px; }
}

@media (prefers-reduced-motion: reduce) {
  .hslider__img, .hslider__img img, .hslide { transition: none; }
  .hslider__img img { transform: none; }
}

/* "+ VAT" beside a shop price: small and quiet, but on the same line. */
.vatnote {
  font-family: var(--font-body); font-weight: 500;
  font-size: .62em; letter-spacing: 0; text-transform: none;
  color: var(--muted); white-space: nowrap;
}
.pdp__price .vatnote { display: block; margin-top: 6px; font-size: .8125rem; }
.on-dark .vatnote, .dark .vatnote { color: rgba(245, 242, 234, .6); }

/* ------------------------------------------------ the fleet carousel (home)
   Three bikes in view on a desktop, two on a tablet, one and a bit on a
   phone so it is plain the row moves. Scroll-snap does the swiping; the
   arrows above it step one card at a time. */
.rentcar__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: clamp(24px, 3vw, 36px); }
.rent.rent--car {
  display: grid; grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: calc((100% - 2 * clamp(16px, 1.6vw, 24px)) / 3);
  margin-top: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}
.rent.rent--car::-webkit-scrollbar { display: none; }
.rent.rent--car > .rcard { scroll-snap-align: start; }
@media (max-width: 900px) {
  .rent.rent--car { grid-template-columns: none; grid-auto-columns: calc((100% - clamp(16px, 1.6vw, 24px)) / 2); }
}
@media (max-width: 620px) {
  .rent.rent--car { grid-template-columns: none; grid-auto-columns: 84%; }
  .rentcar__nav .svc2__ar { width: 46px; height: 46px; }
}

/* ============================================================
   34 · COOKIE CONSENT
   A card at the foot of the screen, not a wall: the page stays
   usable. Reject and Accept are the same button, side by side.
   ============================================================ */
.ckbar {
  position: fixed; z-index: 200;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 980px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  padding: 18px 20px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(42, 17, 53, .45);
  font-size: .875rem; line-height: 1.55;
}
.ckbar[hidden] { display: none; }
.ckbar__t { flex: 1 1 420px; min-width: 0; }
.ckbar__t p { margin: 0; color: var(--muted); }
.ckbar__h { font-family: var(--font-display); font-weight: 700; color: var(--ink) !important; margin-bottom: 4px !important; }
.ckbar a, .ckbox a { color: var(--purple); text-decoration: underline; }
.ckbar__a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ckbtn {
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.ckbtn:hover { background: var(--purple); border-color: var(--purple); }
.ckbtn--link { background: none; color: var(--ink); border-color: transparent; text-decoration: underline; padding: 0 10px; }
.ckbtn--link:hover { background: none; color: var(--purple); border-color: transparent; }
@media (max-width: 620px) {
  .ckbar { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .ckbar__a { width: 100%; }
  .ckbar__a .ckbtn:not(.ckbtn--link) { flex: 1 1 0; }
  .ckbar__a .ckbtn--link { width: 100%; min-height: 36px; }
}

.ckbox {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: clamp(20px, 4vw, 30px); border: 0; border-radius: var(--r-block);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg);
  font-size: .9375rem; line-height: 1.55;
}
.ckbox::backdrop { background: rgba(42, 17, 53, .55); }
.ckbox__h { font-family: var(--font-head); font-weight: 400; font-size: 1.75rem; text-transform: uppercase; margin: 0 0 8px; }
.ckbox > p { color: var(--muted); margin: 0 0 16px; }
.ckrow {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line); cursor: default;
}
label.ckrow { cursor: pointer; }
.ckrow p { margin: 4px 0 0; font-size: .8125rem; color: var(--muted); }
.ckrow__on { flex: 0 0 auto; font-size: .75rem; font-weight: 600; color: var(--green-deep); white-space: nowrap; }
.ckrow__sw {
  flex: 0 0 auto; appearance: none; -webkit-appearance: none;
  width: 46px; height: 26px; border-radius: 26px; margin-top: 2px;
  background: var(--grey-300, #c9c9c2); position: relative; cursor: pointer;
  transition: background .2s;
}
.ckrow__sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .2s;
}
.ckrow__sw:checked { background: var(--purple); }
.ckrow__sw:checked::after { transform: translateX(20px); }
.ckrow__sw:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.ckbox__a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ckbox__a .ckbtn { flex: 1 1 140px; }
.prose .tablewrap { overflow-x: auto; margin: 16px 0; }
.cktable { min-width: 560px; font-size: .875rem; }
.cktable th, .cktable td { text-align: left; vertical-align: top; padding: 10px 12px; }
.cktable td:first-child { font-family: var(--font-mono); white-space: nowrap; }


/* ============================================================
   35 · RESERVE (accessories) — collect in store or delivery
   ============================================================ */
.pdp__how { margin-top: 12px; font-size: .875rem; color: var(--muted); }
.rsv__how { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.rsv__how legend {
  font-family: var(--font-display); font-weight: 600; font-size: .625rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; padding: 0;
}
@media (min-width: 560px) { .rsv__how { grid-template-columns: 1fr 1fr; } .rsv__how legend { grid-column: 1 / -1; } }
.rsvopt {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.rsvopt:hover { border-color: var(--purple); }
.rsvopt.on { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); }
.rsvopt input { margin-top: 3px; accent-color: var(--purple); flex: none; }
.rsvopt b { display: block; font-size: .9375rem; }
.rsvopt small { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--muted); }
/* The address block reuses the form grid, without doubling its margins. */
.rsv__addr > .askform__g { margin: 0; }
.rsv__total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper);
  font-weight: 700; font-size: 1.125rem;
}
.rsv__total > span {
  font-family: var(--font-display); font-weight: 600; font-size: .625rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.rsv__total .vatnote { font-weight: 400; }
.rsv__plus { flex-basis: 100%; font-weight: 400; font-size: .8125rem; color: var(--muted); }
.is-sent .rsv__total { display: none; }
/* Opening a form scrolls to it; keep its top clear of the floating menu. */
.askform { scroll-margin-top: 110px; }

/* ============================================================
   36 · CLOSED DAY — a pick-up, return or visit on a day the
   shop is shut, said beside the date rather than at the end.
   ============================================================ */
.closednote {
  margin: 0; padding: 10px 14px; border-radius: 10px;
  background: rgba(255, 200, 5, .18); border-left: 3px solid var(--volt);
  font-size: .875rem; line-height: 1.45; color: var(--ink);
}
.closednote[hidden] { display: none; }
.closednote--bar { margin-top: 14px; }
.hero--full .booking .closednote { background: rgba(255, 200, 5, .14); color: var(--paper); }

/* ============================================================
   37 · MODEL THUMBNAILS — the bike's picture beside its name and
   price in the availability results and the booking list.
   ============================================================ */
.offer__img, .bikeopt__img {
  flex: none; width: 84px; height: 84px; border-radius: 12px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); display: grid; place-items: center;
}
.offer__img img, .bikeopt__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.offer__img .pplate, .bikeopt__img .pplate { width: 100%; height: 100%; border-radius: 0; }
.offer { justify-content: flex-start; padding: 12px 16px 12px 12px; }
.offer__n { flex: 1; min-width: 0; }
.bikeopt { padding: 10px 14px 10px 10px; }
@media (min-width: 720px) { .offer__img, .bikeopt__img { width: 104px; height: 104px; } }
@media (max-width: 380px) { .offer__img, .bikeopt__img { width: 68px; height: 68px; } }