:root {
    --paper: #faffff;
    --ink: #222427;
    --red: #e60c0c;
    --red-deep: #bc0909;
    --error: #bc0909;
    --muted: #606666;
    --line: #cdd4d4;
    /* Surfaces: controls and cards, soft panels, the pressed/hover wash, a
       switch track or disabled button, a loading block, and disabled text. */
    --surface: #ffffff;
    --tint: #f1f5f5;
    --hover: #eef2f2;
    --track: #dfe4e4;
    --skeleton: #e8eded;
    --faint: #adb5b5;
    /* The dark bands (visit, meet, footer, perks): dark in both themes. */
    --night: #222427;
    --night-text: #faffff;
    --night-muted: #cdd4d4;
    --night-line: #3a3d41;
    color-scheme: light;
    /* Scale corner radii to labels, controls and media. */
    --radius-caption: 6px;
    --radius-sm: 8px;
    --radius-control: 10px;
    --radius-button: 12px;
    --radius-media: 16px;
    --display: 'Anton', Impact, sans-serif;
    --body: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Side margin; in landscape it grows to clear the notch (viewport-fit=cover). */
    --gutter: max(48px, env(safe-area-inset-left), env(safe-area-inset-right));
    /* Motion curves: ease-out for things entering or answering a tap, ease-in
       for quick exits, drawer for the booking sheet on phones (the iOS sheet
       curve). */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-in: cubic-bezier(.55, 0, 1, .45);
    --ease-drawer: cubic-bezier(.32, .72, 0, 1);
    /* A little overshoot, for a pick that should feel like a click. */
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    color: var(--ink);
    background: var(--paper);
    font-family: var(--body);
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
}
/* Dark theme: from the system setting, unless the rider picked a theme with
   the toggle (data-theme on <html>, set by theme.js before first paint).
   Brand red stays; the page goes graphite and the dark bands sit one step
   lighter than the page. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #131517;
        --ink: #eef2f2;
        --red: #f0201b;
        --red-deep: #c90f0b;
        --error: #ff7070;
        --muted: #9aa3a3;
        --line: #33373b;
        --surface: #1c1f22;
        --tint: #1f2225;
        --hover: #2a2e32;
        --track: #3a3e43;
        --skeleton: #24272b;
        --faint: #5a6165;
        --night: #1c1f22;
        --night-text: #eef2f2;
        --night-muted: #aab3b3;
        --night-line: #33373b;
        color-scheme: dark;
    }
    :root:not([data-theme="light"]) .map { filter: brightness(.8) contrast(1.05); }
}
:root[data-theme="dark"] {
    --paper: #131517;
    --ink: #eef2f2;
    --red: #f0201b;
    --red-deep: #c90f0b;
    --error: #ff7070;
    --muted: #9aa3a3;
    --line: #33373b;
    --surface: #1c1f22;
    --tint: #1f2225;
    --hover: #2a2e32;
    --track: #3a3e43;
    --skeleton: #24272b;
    --faint: #5a6165;
    --night: #1c1f22;
    --night-text: #eef2f2;
    --night-muted: #aab3b3;
    --night-line: #33373b;
    color-scheme: dark;
}
/* The map has no dark style of its own: soften it so it doesn't glare. */
:root[data-theme="dark"] .map { filter: brightness(.8) contrast(1.05); }
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
/* Nothing may reach past the page edge: a document even a few px wider than
   the screen makes phones zoom the whole page out. Clipping on body alone
   isn't enough, since body's overflow is handed to the viewport; with html set
   too, body keeps its own clip and the page stays exactly screen-wide. */
body { margin: 0; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
/* iOS enlarges small text on its own ("text autosizing"): on a phone the
   13-16px lines in the tools panel all came out at about 18px and the grid
   ran past the screen. 100% keeps the sizes we set and still lets the rider
   zoom. A sideways swipe must not drag the page either: it only scrolls
   down. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-x: none; }
a { color: inherit; text-underline-offset: 5px; }
button { font: inherit; }
/* Taps get their own :active styles below instead of the grey system flash;
   manipulation drops the double-tap-zoom wait on controls. */
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
::selection { background: var(--red); color: white; }
img { display: block; max-width: 100%; object-fit: cover; }
/* Round photo/video wrappers so zooming images and playing videos stay inside
   the same contour. Standalone photos share it; logos keep their own shape. */
.hero-photo, .jobs-grid figure, .frame, .community,
.workbench, .faq-photo, .people > img, .meet-grid > img, .entrance,
.meet-more { border-radius: var(--radius-media); }
figure, p, h1, h2, h3 { margin: 0; }
p { line-height: 1.65; }
h1, h2, h3, summary { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; }
.wrap { width: min(1320px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.skip { position: fixed; top: -80px; left: 16px; padding: 16px; background: var(--paper); z-index: 10; }
.skip:focus { top: 12px; }
.header { display: flex; justify-content: space-between; align-items: center; padding-block: 26px; gap: 24px; }
.logo { display: inline-block; flex-shrink: 0; }
.logo img { object-fit: contain; }
nav { display: flex; align-items: center; gap: 34px; }
nav a { text-decoration: none; font-size: 14px; font-weight: 600; padding-block: 14px; }
/* A label never breaks in two: "Winter / storage" read as two links. */
nav a, .nav-book .button { white-space: nowrap; }
/* Holds the header's Book button, so the glass rim light on phones rings
   the button alone and not the Menu button next to it. */
.nav-book { position: relative; display: inline-flex; }
/* A flat red block with the label set in Anton like the headlines: the type
   carries the button, no glow or texture behind it. */
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 58px; padding: 17px 24px 15px; border-radius: var(--radius-button); background: var(--red); color: white; text-decoration: none; font: 400 20px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; transition: background .2s ease, transform 160ms var(--ease-out); }
/* Gives a little under the finger, label and arrow with it. */
.button:active:not(:disabled) { background: var(--red-deep); transform: scale(.97); }
.button .icon, .text-link .icon { transition: transform .18s ease; }
.button .icon { width: .95em; height: .95em; margin-top: -2px; }
.button .icon-ne { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 18 6M7.5 6H18v10.5'/%3E%3C/svg%3E"); }
/* Magnetic lean toward the pointer (garage.js sets --pull-x/--pull-y). */
.button.magnetic { translate: var(--pull-x, 0) var(--pull-y, 0); transition: background .2s ease, transform 160ms var(--ease-out), translate .35s var(--ease-out); }
.button.small { min-height: 48px; padding: 13px 20px 11px; border-radius: var(--radius-control); font-size: 18px; }
/* Line icons drawn as SVG masks, so they take the text colour and share one
   stroke; unicode arrows came out hairline next to the semibold labels. */
.icon { display: inline-block; flex: none; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-ne { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 18.5 5.5M8 5.5h10.5V16'/%3E%3C/svg%3E"); }
.icon-e { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h16.5M13.5 5.5 20 12l-6.5 6.5'/%3E%3C/svg%3E"); }
.icon-w { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12H4M10.5 5.5 4 12l6.5 6.5'/%3E%3C/svg%3E"); }
.icon-menu { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E"); }
.icon-x { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 5.5 13 13m0-13-13 13'/%3E%3C/svg%3E"); }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; padding-top: 24px; padding-bottom: 70px; align-items: stretch; }
.location { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
h1, h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; }
h1 { font-size: clamp(58px, 6.8vw, 98px); line-height: 1.04; letter-spacing: -.025em; }
.intro { font-size: 17px; margin: 28px 0; max-width: 440px; }
/* What the garage is, what a first try costs and where, right by the button,
   so the slogan doesn't have to explain the offer on its own. */
.hero-facts { margin: -6px 0 30px; padding: 0; list-style: none; max-width: 440px; }
.hero-facts li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.hero-facts li:last-child { border-bottom: 1px solid var(--line); }
.quiet-link { display: block; width: fit-content; font-size: 14px; padding-block: 20px; }
/* As tall as the text beside it, so both start and end on the same lines. */
.hero-photo { position: relative; height: auto; min-height: 520px; overflow: hidden; }
.hero-photo img { position: absolute; inset: 0; }
.hero-photo img { width: 100%; height: 100%; object-position: 52% 55%; }
/* On first load the shot settles into place; with reduced motion it's just there. */
@media (prefers-reduced-motion: no-preference) {
    .hero-photo img { animation: settle 1.6s var(--ease-out) both; }
}
@keyframes settle { from { transform: scale(1.08); } }
.hero-photo figcaption { position: absolute; bottom: 20px; left: 20px; right: 20px; width: fit-content; background: var(--paper); padding: 12px 16px; font-size: 12px; }
.hero-photo figcaption, .jobs-grid figcaption, .people figcaption { border-radius: var(--radius-caption); }
.section { padding-block: 90px; }
h2 { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.1; letter-spacing: -.015em; }
h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 40px; }
.section-heading p { max-width: 430px; color: var(--muted); }
.workbench { width: 100%; height: 390px; object-position: center; }
.facilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: 32px; }
.facilities p { color: var(--muted); font-size: 15px; max-width: 340px; }
/* Four points in a row (mechanics.html, "Skip the hard part"): two per row on
   tablets, one on phones, so the fourth never sits alone. */
.facilities-four { grid-template-columns: repeat(4, 1fr); gap: 36px; }
@media (max-width: 1000px) { .facilities-four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .facilities-four { grid-template-columns: 1fr; gap: 0; } }
/* A heading over a row of points lines up with that row (mechanics.html):
   the title over the first columns, the paragraph over the last, instead of
   the usual title-left / paragraph-far-right split that matches no column. */
.section-heading.on-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 50px; }
.section-heading.on-grid h2 { grid-column: 1 / 3; }
.section-heading.on-grid p { grid-column: 3; max-width: none; }
.section-heading.on-grid-four { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 36px; }
.section-heading.on-grid-four h2 { grid-column: 1 / 3; }
.section-heading.on-grid-four p { grid-column: 3 / 5; max-width: none; }
@media (max-width: 1000px) {
    .section-heading.on-grid-four { grid-template-columns: repeat(2, 1fr); }
    .section-heading.on-grid-four h2 { grid-column: 1; }
    .section-heading.on-grid-four p { grid-column: 2; }
}
@media (max-width: 700px) { .section-heading.on-grid, .section-heading.on-grid-four { display: block; } }
.jobs { padding-bottom: 90px; }
.jobs-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 330px 330px; gap: 12px; }
.jobs-grid figure { position: relative; overflow: hidden; }
.jobs-grid .tall { grid-row: span 2; }
.jobs-grid img { width: 100%; height: 100%; transition: transform .6s ease; }
.jobs-grid figcaption, .people figcaption { position: absolute; left: 14px; bottom: 14px; background: var(--paper); padding: 8px 12px; font-size: 12px; font-weight: 600; }
.tools { padding-bottom: 90px; }
.tools-intro { display: flex; flex-direction: column; align-items: flex-end; gap: 28px; }
.gallery-nav { display: flex; gap: 8px; }
.gallery-button { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--ink); border-radius: var(--radius-button); background: transparent; color: var(--ink); cursor: pointer; font-size: 18px; }
.gallery-button:active:not(:disabled) { background: var(--ink); color: var(--paper); }
.gallery-button:disabled { opacity: .25; cursor: default; }
.gallery { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; }
.slide { flex: 0 0 calc((100% - 36px) / 3.35); scroll-snap-align: start; }
.slide .frame { aspect-ratio: 3 / 4; }
.slide h3 { margin: 18px 0 6px; font-size: 18px; }
.slide p { color: var(--muted); font-size: 15px; max-width: 330px; }
.gallery-bar { position: relative; height: 2px; margin-top: 32px; background: var(--line); overflow: hidden; }
.gallery-bar span { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--ink); transition: transform .2s ease; }
.reel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 80px 0 0; padding: 0; list-style: none; }
.reel p { margin-top: 12px; font-size: 14px; color: var(--night-muted); }
.clip { position: relative; }
.frame { position: relative; overflow: hidden; background: #111; }
.frame img, .frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.frame video.is-live { opacity: 1; }
.reel .frame { aspect-ratio: 3 / 4; }
/* Full 44px hit area, but only a 30px chip shows: on phones the clips sit two
   abreast and full-size squares crowded every tile. */
.clip-toggle { position: absolute; top: 4px; right: 4px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-control); background: none; cursor: pointer; }
/* Keep the keyboard focus ring inside the clipped media frame. */
.clip-toggle:focus-visible { outline-offset: -2px; }
.clip-toggle::after { content: ''; position: absolute; inset: 7px; z-index: -1; border-radius: var(--radius-sm); background: rgba(34, 36, 39, .55); transition: background .2s ease; }
.clip-toggle:active::after { background: #111214; }
.clip-toggle::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 3 12 8 4 13Z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); content: ''; width: 16px; height: 16px; background: var(--surface); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; transform: translateX(1px); }
.clip-toggle.is-playing::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='2.5' width='3' height='11' rx='1'/%3E%3Crect x='9' y='2.5' width='3' height='11' rx='1'/%3E%3C/svg%3E"); transform: none; }
.faq-photo { width: min(340px, 100%); height: 420px; margin-top: 48px; filter: grayscale(1); }
.visit { background: var(--night); color: var(--night-text); }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.steps li { position: relative; padding: 0 0 28px 52px; counter-increment: steps; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(steps); position: absolute; left: 0; top: -4px; color: #ff7070; font-family: var(--display); font-size: 30px; }
.steps p { color: var(--night-muted); font-size: 15px; }
/* Lift prices, inside the dark visit section. Prices are filled from
   /api/public/pricing by booking.js; the markup holds the same numbers. */
.prices { margin-top: 88px; }
.prices-head { display: flex; align-items: end; justify-content: space-between; gap: 48px; padding-bottom: 20px; border-bottom: 1px solid #45494d; }
.prices-head h3 { font: 400 44px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.prices-head p { max-width: 460px; color: var(--night-muted); font-size: 15px; }
.offer { margin-top: 28px; padding: 20px 24px; border-left: 4px solid var(--red); border-radius: var(--radius-sm); background: #2d3034; }
.offer[hidden] { display: none; }
.offer .offer-title { font: 400 30px/1.1 var(--display); letter-spacing: .01em; }
.offer p:not(.offer-title) { margin-top: 8px; color: var(--night-muted); font-size: 15px; }
/* Each card opens the booking sheet with its length already picked. Rows
   share one height, and every card has the same three lines. */
.price-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.price-cards li { display: flex; }
.price-card { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 20px 20px 22px; border: 1px solid #45494d; border-radius: var(--radius-media); color: inherit; text-decoration: none; transition: border-color .2s ease, background .2s ease, transform 160ms var(--ease-out); }
.price-card:active { transform: scale(.98); background: rgba(255, 255, 255, .04); }
.price-card:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.price-cards h4 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; font-size: 15px; font-weight: 600; }
.price-cards h4 .icon { width: 18px; height: 18px; color: var(--red); transition: transform .2s var(--ease-out); }
.price-cards p { margin-top: auto; }
@media (hover: hover) {
    .price-card:hover { border-color: var(--red); background: rgba(255, 255, 255, .03); }
    .price-card:hover h4 .icon { transform: translateX(4px); }
}
.price-cards strong { font: 400 56px/1 var(--display); font-variant-numeric: tabular-nums; }
.price-cards p { color: var(--night-muted); font-size: 14px; line-height: 1.5; }
.prices-foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 28px; }
.prices-foot p { max-width: 640px; color: var(--night-muted); font-size: 15px; }
.prices-foot strong { color: var(--night-text); font-weight: 600; }
.questions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }
details { border-bottom: 1px solid var(--line); }
summary { position: relative; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; padding: 23px 40px 23px 0; }
summary::-webkit-details-marker { display: none; }
/* A plus that folds into a minus while the answer is open, centred on the
   first line of the question (absolute, since older Safari won't flex a
   summary). */
summary::after { content: ''; position: absolute; top: 26px; right: 2px; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: background-size .25s var(--ease-out); }
details[open] > summary::after { background-size: 100% 2px, 2px 0; }
/* The answer slides open and shut instead of snapping, in step with the plus.
   Needs height transitions to auto; browsers without them keep the snap. */
@supports (interpolate-size: allow-keywords) {
    details { interpolate-size: allow-keywords; }
    details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .25s var(--ease-out), opacity .25s var(--ease-out), content-visibility .25s allow-discrete; }
    details[open]::details-content { block-size: auto; opacity: 1; }
}
details:first-child summary { padding-top: 8px; }
details:first-child summary::after { top: 11px; }
details p { color: var(--muted); padding: 0 20px 24px 0; font-size: 15px; }
details .text-link { margin: -12px 0 20px; }
.community { display: grid; grid-template-columns: 1.35fr 1fr; overflow: hidden; background: var(--red); color: white; align-items: center; }
.community > .community-media { padding: 0; align-self: stretch; }
.community-media { height: 570px; }
.smoke { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--red); }
/* The triptych and its red copy panel form one continuous outer shape. */
.smoke .frame { border-radius: 0; }
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.people img:first-child, .people .wide { grid-column: span 2; }
.people img, .people .clip { width: 100%; height: 340px; }
.people .clip { margin: 0; }
.people .frame { height: 100%; }
/* The flowers ride is 9:16, so it runs two rows tall instead of cropping to a square. */
.people .clip.tall { grid-row: span 2; height: auto; }
.meet { margin-top: 90px; background: var(--night); color: var(--night-text); }
.meet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.meet-copy { grid-column: 1 / 3; grid-row: 1 / 3; align-self: center; padding-right: 60px; }
.meet .location { color: #ff7070; }
.meet .intro { color: var(--night-muted); max-width: 480px; }
.meet-points { margin: 0 0 36px; padding: 0; list-style: none; }
.meet-points li { padding: 14px 0; border-top: 1px solid var(--night-line); color: var(--night-muted); font-size: 15px; }
.meet-points li:last-child { border-bottom: 1px solid var(--night-line); }
.meet-points strong { color: var(--night-text); font-weight: 600; }
.meet .text-link { margin-top: 18px; }
.meet-photo { grid-column: 3 / 5; align-self: start; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.meet-grid > img:not(.meet-photo), .meet-grid > .clip, .meet-more { width: 100%; height: 400px; }
.meet-grid .frame { height: 100%; }
.meet-wide { grid-column: span 2; }
.meet-more { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; background: var(--red); color: white; text-decoration: none; }
.meet-more > span { font-family: var(--display); font-size: clamp(30px, 3vw, 44px); line-height: 1.1; text-transform: uppercase; }
.meet-more strong { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 600; }
.meet-more:active { background: var(--red-deep); }
.meet-more .icon { transition: transform .18s ease; }
.community > div { padding: 55px; }
.community p { margin: 24px 0; font-size: 16px; }
.text-link { display: flex; width: fit-content; align-items: center; gap: 16px; min-height: 44px; font-size: 14px; font-weight: 600; }
a:not(.button, .meet-more):active { opacity: .6; }
.find { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 60px; align-items: center; }
.entrance { width: 100%; height: 420px; }
.map { grid-column: 1 / -1; grid-row: 2; display: block; width: 100%; height: 420px; border: 0; background: var(--skeleton); }
.find p { margin-top: 22px; color: var(--muted); }
address { font-style: normal; line-height: 1.8; margin-bottom: 20px; }
/* The footer is a graphite board stuck to the page with two strips of red
   tape (assets/images/tape-a/-b.webp, photos) over its top corners. Where a
   strip bends over the board's edges it creases: a lit ridge and a shadow
   along the top edge and down the side, clipped to the tape by the mask.
   --cx/--cy is the board's corner in the strip's own (tilted) box, worked out
   from the strip's size, offset and angle; the creases turn back by --un to
   run straight along the edges. */
.site-foot { padding: 72px 0 max(40px, env(safe-area-inset-bottom)); }
.footer { position: relative; display: grid; grid-template-columns: 1fr 2fr; gap: 48px; padding: 52px 56px 48px; border-radius: var(--radius-media); background: var(--night); color: var(--night-text); }
.tape { position: absolute; top: -21px; width: 160px; aspect-ratio: 640 / 170; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); pointer-events: none; }
.tape > span { position: absolute; inset: 0; overflow: hidden; background: var(--img) center / 100% 100% no-repeat; -webkit-mask: var(--img) center / 100% 100% no-repeat; mask: var(--img) center / 100% 100% no-repeat; }
.tape > span::before, .tape > span::after { content: ''; position: absolute; top: calc(var(--cy) + 2px); }
/* Real tape doesn't fold in one even line: the crease comes and goes. */
.tape > span::before { -webkit-mask: linear-gradient(to right, #000 0 6%, rgba(0,0,0,.35) 14%, #000 22%, #000 34%, rgba(0,0,0,.5) 41%, #000 50%, rgba(0,0,0,.7) 63%, #000 72%, rgba(0,0,0,.4) 84%, #000 93%); mask: linear-gradient(to right, #000 0 6%, rgba(0,0,0,.35) 14%, #000 22%, #000 34%, rgba(0,0,0,.5) 41%, #000 50%, rgba(0,0,0,.7) 63%, #000 72%, rgba(0,0,0,.4) 84%, #000 93%); }
.tape > span::after { -webkit-mask: linear-gradient(#000, rgba(0,0,0,.45) 30%, #000 55%, rgba(0,0,0,.6) 80%, transparent); mask: linear-gradient(#000, rgba(0,0,0,.45) 30%, #000 55%, rgba(0,0,0,.6) 80%, transparent); }
.tape > span::before { width: 220px; height: 7px; margin-top: -3.5px; background: linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .3) 40%, rgba(40, 0, 0, .4) 58%, rgba(40, 0, 0, 0) 90%); }
.tape > span::after { width: 7px; height: 90px; left: var(--cx); margin-left: -3.5px; transform-origin: 50% 0; transform: rotate(var(--un)); }
.tape-left { left: -28px; transform: rotate(-9deg); --img: url("../images/tape-a.webp"); --un: 9deg; --cx: 28.7px; --cy: 12.9px; }
.tape-left > span::before { left: var(--cx); transform-origin: 0 50%; transform: rotate(var(--un)); }
.tape-left > span::after { background: linear-gradient(to right, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .3) 40%, rgba(40, 0, 0, .4) 58%, rgba(40, 0, 0, 0) 90%); }
.tape-right { right: -24px; transform: rotate(7deg); --img: url("../images/tape-b.webp"); --un: -7deg; --cx: 135.5px; --cy: 14.2px; }
.tape-right > span::before { left: calc(var(--cx) - 220px); transform-origin: 100% 50%; transform: rotate(var(--un)); }
.tape-right > span::after { background: linear-gradient(to left, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .3) 40%, rgba(40, 0, 0, .4) 58%, rgba(40, 0, 0, 0) 90%); }
.footer-brand p { margin-top: 18px; color: var(--night-muted); font-size: 14px; }
.footer-cols { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 32px; }
.footer-cols ul { margin: 0; padding: 0; list-style: none; }
.footer-cols p { color: var(--night-muted); font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.footer-cols p.footer-head { margin-bottom: 8px; color: #ff7070; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.footer-cols a { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 40px; font-size: 15px; font-weight: 600; text-decoration: none; }
.footer-cols .icon { width: 1em; height: 1em; }
/* Phone menu (the Menu button sits next to Book in the header). A modal
   <dialog>: focus stays inside, Esc closes it, the page behind is inert. */
.menu-button, .menu { display: none; }
/* Light / dark toggle (theme.js): shows the theme you'd switch to. */
.theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: none; color: var(--ink); cursor: pointer; transition: transform 160ms var(--ease-out); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle .icon { width: 20px; height: 20px; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.2 14.6A8.5 8.5 0 0 1 9.4 3.8a8.5 8.5 0 1 0 10.8 10.8Z'/%3E%3C/svg%3E"); transition: transform .35s var(--ease-out); }
:root[data-shown-theme="dark"] .theme-toggle .icon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M4.6 4.6l1.6 1.6M17.8 17.8l1.6 1.6M2.5 12h2.2M19.3 12h2.2M4.6 19.4l1.6-1.6M17.8 6.2l1.6-1.6'/%3E%3C/svg%3E"); transform: rotate(90deg); }
@media (hover: hover) { .theme-toggle:hover { background: var(--hover); } }
.menu-head-actions { display: flex; gap: 10px; }
.menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: max(14px, env(safe-area-inset-top)) var(--gutter) max(24px, env(safe-area-inset-bottom)); border: 0; background: var(--paper); color: var(--ink); overflow-y: auto; }
.menu::backdrop { background: transparent; }
.menu-head { display: flex; justify-content: space-between; align-items: center; }
.menu-close { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: none; color: var(--ink); cursor: pointer; }
.menu-close .icon { width: 22px; height: 22px; }
.menu-links { margin: 28px 0 0; padding: 0; list-style: none; }
.menu-links a { display: block; padding: 14px 0 12px; border-bottom: 1px solid var(--line); font: 400 clamp(34px, 10.5vw, 50px)/1.1 var(--display); text-transform: uppercase; text-decoration: none; }
.menu-links li:first-child a { border-top: 1px solid var(--line); }
.menu-links a[aria-current="page"] { color: var(--red); }
.menu-foot { display: grid; gap: 14px; margin-top: auto; padding-top: 32px; }
.menu-foot .button { width: 100%; }
.menu-small { display: flex; flex-wrap: wrap; gap: 0 24px; }
.menu-small a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.menu-small .icon { width: 1em; height: 1em; }
html:has(.menu[open]) { overflow: hidden; }
/* Gallery page (gallery.html, assets/js/gallery.js) */
.shots-head { padding-top: 24px; }
.shots-head .intro { max-width: 520px; margin-bottom: 0; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 12px; margin-top: 48px; padding: 0; list-style: none; }
.shots li { aspect-ratio: 3 / 2; }
.shots .feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.shots .tall { grid-row: span 2; aspect-ratio: auto; }
.shot { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius-media); background: #111; }
.shot img { width: 100%; height: 100%; transition: transform .6s ease; }
.shots-end { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.shots-end > div { align-self: center; padding-right: 48px; }
.shots-end p { margin: 22px 0 30px; color: var(--muted); max-width: 420px; }
.shots-end .meet-more { min-height: 320px; }
.lightbox { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #111214; color: white; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox img { width: auto; height: auto; max-width: calc(100% - 184px); max-height: calc(100dvh - 128px); object-fit: contain; border-radius: var(--radius-sm); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-button); background: none; color: white; cursor: pointer; }
.lightbox button:active { background: rgba(255, 255, 255, .14); }
.lightbox .icon { width: 22px; height: 22px; }
.lightbox-close { top: max(20px, env(safe-area-inset-top)); right: 24px; }
.lightbox-prev { left: 24px; top: calc(50% - 26px); }
.lightbox-next { right: 24px; top: calc(50% - 26px); }
.lightbox-count { position: absolute; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom)); color: var(--night-muted); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.menu, .lightbox { opacity: 0; transition: opacity .2s var(--ease-out), transform .3s var(--ease-out), overlay .2s allow-discrete, display .2s allow-discrete; }
.menu { transform: translateY(-10px); }
.menu[open], .lightbox[open] { opacity: 1; transform: none; }
@starting-style {
    .menu[open], .lightbox[open] { opacity: 0; }
    .menu[open] { transform: translateY(-10px); }
}
/* Phone-only "Book a lift" pinned to the bottom (garage.js shows it). */
.sticky-book { display: none; }
/* Hover only where there's a real pointer: on touch screens :hover sticks to
   whatever was tapped last. Taps get the :active styles instead. */
@media (hover: hover) {
    .button:hover { background: var(--red-deep); }
    .button:hover .icon, .text-link:hover .icon, .meet-more:hover .icon { transform: translate(2px, -2px); }
    .jobs-grid figure:hover img, .shot:hover img { transform: scale(1.03); }
    .footer-cols a:hover { text-decoration: underline; }
    .lightbox button:hover { background: rgba(255, 255, 255, .14); }
    .gallery-button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
    .clip-toggle:hover::after { background: #111214; }
    .meet-more:hover { background: var(--red-deep); }
}
/* Swipe is how touch screens move the tool strip; the arrows stay for mice. */
@media (hover: none) and (pointer: coarse) {
    .gallery-nav { display: none; }
}
@media (max-width: 1000px) {
    :root { --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); }
    nav { gap: 18px; }
    .hero { gap: 32px; }
    h1 { font-size: clamp(54px, 7vw, 80px); }
    .visit-grid, .questions { gap: 44px; }
    .community > div { padding: 32px; }
    .community { grid-template-columns: 1.2fr 1fr; }
    .community-media { height: 460px; }
    .jobs-grid { grid-template-rows: 280px 280px; }
    .slide { flex-basis: calc((100% - 12px) / 2.3); }
    .meet-copy { padding-right: 24px; }
    .meet-grid > img:not(.meet-photo), .meet-grid > .clip, .meet-more { height: 320px; }
    .find { grid-template-columns: 1fr 1fr; }
    .entrance { grid-column: span 2; height: 360px; }
}
/* 701-800px: four links, the theme switch and Book don't fit on one line.
   The switch steps out (the page still follows the system theme) and the
   links close up; below 701 everything moves into the menu. */
@media (min-width: 701px) and (max-width: 800px) {
    nav { gap: 14px; }
    nav .theme-toggle { display: none; }
    /* Same-page anchors ("Find us", "Price") and "The garage" (the logo goes
       home too) step out as well, to make room for the account link. */
    nav a[href^="#"], nav a[href="/"]:not(.logo) { display: none; }
}
@media (max-width: 700px) {
    /* scroll-padding-bottom keeps focused and anchored things clear of the
       pinned booking button. */
    :root { --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); scroll-padding-bottom: 96px; }
    .header { padding-block: 14px; gap: 14px; }
    .header .logo img { width: 100px; height: 56px; }
    /* The header's Book button stays put in the top-right corner while the
       page scrolls (only it shows in nav on a phone). Solid red on the first
       screen; once the page moves it turns to the same red glass the pinned
       bottom button used (html.is-scrolled, set in garage.js). */
    nav { position: fixed; z-index: 5; top: max(18px, calc(env(safe-area-inset-top) + 8px)); right: var(--gutter); }
    nav .button { transition: background .3s ease, box-shadow .3s ease, transform 160ms var(--ease-out); }
    nav a:not(.button), nav .theme-toggle { display: none; }
    .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 16px; padding-bottom: 0; }
    /* Button and "Take a look inside" share a row, so the photo starts on the
       first screen instead of below it. */
    .hero-copy { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; }
    .hero-copy > :not(a) { flex-basis: 100%; }
    .quiet-link { padding-block: 16px; }
    .location { font-size: 12px; margin-bottom: 16px; }
    h1 { font-size: clamp(54px, 13.5vw, 80px); }
    .intro { font-size: 16px; margin: 18px 0 24px; }
    .hero-facts { margin: -8px 0 22px; }
    .hero-facts li { padding-block: 8px; }
    .desktop-break { display: none; }
    .hero-photo { height: 390px; }
    .hero-photo img { object-position: center 61%; }
    .hero-photo figcaption { left: 14px; bottom: 14px; font-size: 12px; }
    .section { padding-block: 60px; }
    .section-heading { display: block; margin-bottom: 28px; }
    .section-heading p { margin-top: 22px; font-size: 16px; }
    .facilities p, .steps p, details p, .meet-points li { font-size: 16px; }
    .workbench { height: 240px; }
    /* Stacked on a phone the three points ran into each other; a hairline
       and air between them keep each one its own thing. */
    .facilities { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
    .facilities > div { padding-block: 22px 26px; border-top: 1px solid var(--line); }
    .facilities > div:last-child { padding-bottom: 0; }
    .facilities h3 { margin-bottom: 8px; }
    .visit-grid, .questions, .find { grid-template-columns: 1fr; gap: 32px; }
    .prices { margin-top: 56px; }
    .prices-head { display: block; }
    .prices-head h3 { font-size: 36px; }
    .prices-head p { margin-top: 12px; }
    .offer { padding: 16px 18px; }
    .offer .offer-title { font-size: 26px; }
    .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .price-card { padding: 16px; }
    .price-cards strong { font-size: 44px; }
    .prices-foot { display: grid; gap: 20px; }
    .prices-foot .button { width: 100%; }
    .steps { margin-top: 12px; }
    .steps li { padding-left: 40px; }
    .jobs { padding-bottom: 60px; }
    .jobs-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 220px; gap: 8px; }
    .jobs-grid .tall { grid-column: span 2; grid-row: span 2; }
    .jobs-grid figcaption { left: 10px; bottom: 10px; padding: 6px 10px; font-size: 12px; }
    .reel { display: flex; gap: 10px; margin: 48px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
    .reel::-webkit-scrollbar { display: none; }
    .reel .clip { flex: 0 0 64%; scroll-snap-align: start; }
    .faq-photo { display: none; }
    .tools { padding-bottom: 60px; }
    .tools-intro { align-items: flex-start; gap: 22px; }
    .tools-intro { margin-top: 22px; }
    .tools-intro p { margin-top: 0; }
    .gallery { gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); }
    .slide { flex-basis: 78%; }
    .slide h3 { margin-top: 14px; font-size: 17px; }
    .gallery-bar { margin-top: 24px; }
    .people figcaption { left: 10px; bottom: 10px; padding: 6px 10px; font-size: 12px; }
    .meet { margin-top: 60px; }
    .meet-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .meet-copy { grid-column: 1 / -1; grid-row: auto; padding: 0 0 28px; }
    .meet-photo { grid-column: 1 / -1; }
    .meet-grid { grid-auto-flow: dense; }
    .meet-wide { grid-column: 1 / -1; }
    .meet-grid > img:not(.meet-photo), .meet-grid > .clip, .meet-more { height: 260px; }
    .meet-grid > img.meet-wide { height: auto; aspect-ratio: 3 / 2; }
    .meet-more { padding: 20px; }
    .community { grid-template-columns: 1fr; }
    .community-media { height: 300px; }
    .people { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
    .people img, .people .clip { height: 220px; }
    .people { grid-auto-flow: dense; }
    .entrance { grid-column: auto; height: 320px; }
    .map { grid-row: auto; height: 340px; }
    .community > div { padding: 30px 24px 38px; }
    .community h2 { font-size: clamp(37px, 10vw, 60px); }
    .site-foot { padding-top: 56px; }
    .footer { grid-template-columns: 1fr; gap: 30px; padding: 40px 24px 28px; }
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
    .footer-cols > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .tape { width: 118px; top: -15px; }
    .tape-left { left: -12px; --cx: 12.7px; --cy: 7.6px; }
    .tape-right { right: -10px; --cx: 107.5px; --cy: 9px; }
    nav { gap: 8px; }
    .menu-button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 14px; border: 0; border-radius: var(--radius-control); background: var(--ink); color: var(--paper); font: 400 18px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: transform 160ms var(--ease-out); }
    .menu-button:active { transform: scale(.97); }
    .menu-button .icon { width: 20px; height: 20px; }
    .menu[open] { display: flex; flex-direction: column; }
    .shots { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
    .shots .feature, .shots .wide-sm { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
    .shots-end { grid-template-columns: 1fr; gap: 32px; }
    .shots-end > div { padding-right: 0; }
    .shots-end .meet-more { min-height: 220px; }
    .lightbox img { max-width: 100%; max-height: calc(100dvh - 180px); border-radius: 0; }
    .lightbox-prev, .lightbox-next { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); }
    .lightbox-prev { left: 20px; }
    .lightbox-next { right: 20px; }
    .lightbox-count { bottom: max(30px, calc(env(safe-area-inset-bottom) + 16px)); }
    /* Inset a little past the text column so the floating button doesn't
       line up edge to edge with everything under it. */
    .sticky-book { display: block; position: fixed; z-index: 5; left: calc(var(--gutter) + 14px); right: calc(var(--gutter) + 14px); bottom: max(14px, env(safe-area-inset-bottom)); visibility: hidden; pointer-events: none; transition: visibility 0s linear .18s; }
    .sticky-book.is-shown { visibility: visible; pointer-events: auto; transition-delay: 0s; }
    /* Leaves quicker than it arrives: the exit is ease-in and short, the entry
       a softer ease-out from slightly below and smaller. Opacity sits on the
       button, not the wrapper: fading an ancestor would cut the glass off
       from what's behind it for the length of the fade. */
    .sticky-book .button { display: flex; width: 100%; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .18s var(--ease-in), transform .18s var(--ease-in), background .2s ease; box-shadow: 0 10px 24px -10px rgba(34, 36, 39, .5); }
    .sticky-book.is-shown .button { opacity: 1; transform: none; transition: opacity .32s var(--ease-out), transform .42s var(--ease-out), background .2s ease; }
    .sticky-book.is-shown .button:active:not(:disabled) { transform: scale(.97); transition-duration: .16s; }
    /* Flying into a red button further down. The target carries a view
       timeline and the pinned button runs on it, so the browser moves it in
       step with the scroll (garage.js only picks the target and sets the
       geometry). It starts as the target's top edge comes in at the bottom
       of the screen and lands once the target has risen past it; after that
       it stays parked, faded out, on the target. */
    /* Zero inset: otherwise the timeline shrinks by the page's scroll-padding
       and the flight starts late. */
    .cta-fly { view-timeline: --cta block; view-timeline-inset: 0px; }
    .sticky-book.is-flying { transform-origin: 0 0; animation: cg-fly linear forwards; }
    .sticky-book.is-flying .button, .sticky-book.is-flying::before { animation: cg-fly-fade linear forwards; }
    .sticky-book.is-flying, .sticky-book.is-flying .button, .sticky-book.is-flying::before {
        animation-timeline: --cta;
        animation-range: cover 0px cover var(--fly-range);
    }
    /* Liquid red. The site red stays nearly opaque, so the colour holds over
       any photo; what makes it read as a drop of liquid rather than a
       sticker is the light: a wet curved reflection across the top, a
       brighter caustic pooling at the bottom, a thin lit rim and an inner
       shade along the lower edge for thickness. Only a light blur of what
       little shows through: a heavy frost is what looked tinted and rough on
       the iPhone. A slight dim (.9, not the old .55) keeps white paper
       under it from washing the red out to salmon. Chromium still bends the edges through the SVG lens. */
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .sticky-book .button, html.is-scrolled nav .button {
            background:
                radial-gradient(130% 110% at 50% -38%, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .12) 40%, rgba(255, 255, 255, 0) 50%),
                radial-gradient(70% 70% at 50% 135%, rgba(255, 40, 20, .55), rgba(255, 40, 20, 0) 70%),
                rgba(236, 0, 0, .72);
            -webkit-backdrop-filter: blur(1px) saturate(3) brightness(.9);
            backdrop-filter: blur(1px) saturate(3) brightness(.9);
            text-shadow: 0 1px 1px rgba(120, 0, 0, .35);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .75),
                inset 0 0 0 1px rgba(255, 255, 255, .14),
                inset 0 -3px 6px -2px rgba(110, 0, 0, .45),
                0 10px 22px -10px rgba(34, 36, 39, .55),
                0 2px 5px -2px rgba(34, 36, 39, .3);
        }
        .sticky-book .button.is-refracting, html.is-scrolled nav .button.is-refracting { backdrop-filter: url(#cg-lens) saturate(3) brightness(.9); }
        .sticky-book .button:active:not(:disabled), html.is-scrolled nav .button:active:not(:disabled) { background-color: rgba(188, 9, 9, .95); }
        /* Rim light from the page itself: a soft band inside the button's edge
           that takes whatever is behind it, blurs, brightens and saturates it,
           so the glass glows white over paper and in the photo's colours over
           a photo. It lives on the wrapper, not the button: the button's own
           backdrop-filter would make it the backdrop root for anything inside
           it, and a ring in there would have nothing to sample. So the ring
           repeats the button's fade, lift and press. */
        .sticky-book::before, .nav-book::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            border-radius: var(--radius-button);
            pointer-events: none;
            -webkit-backdrop-filter: blur(6px) brightness(1.7) saturate(2);
            backdrop-filter: blur(6px) brightness(1.7) saturate(2);
            /* Four edge fades added together: brightest right at the rim,
               gone about a finger's width in, so it glows instead of outlining. */
            --fade: #000, rgba(0, 0, 0, .35) 3px, transparent 12px;
            -webkit-mask: linear-gradient(to bottom, var(--fade)), linear-gradient(to top, var(--fade)), linear-gradient(to right, var(--fade)), linear-gradient(to left, var(--fade));
            mask: linear-gradient(to bottom, var(--fade)), linear-gradient(to top, var(--fade)), linear-gradient(to right, var(--fade)), linear-gradient(to left, var(--fade));
            opacity: 0;
            transform: translateY(14px) scale(.96);
            transition: opacity .18s var(--ease-in), transform .18s var(--ease-in);
        }
        .sticky-book.is-shown::before { opacity: 1; transform: none; transition: opacity .32s var(--ease-out), transform .42s var(--ease-out); }
        .sticky-book.is-shown:has(.button:active)::before { transform: scale(.97); transition-duration: .16s; }
        /* The header button's glow comes on with its glass once the page moves. */
        .nav-book::before { border-radius: var(--radius-control); transform: none; transition: opacity .3s ease; }
        html.is-scrolled .nav-book::before { opacity: 1; }
        html.is-scrolled .nav-book:has(.button:active)::before { transform: scale(.97); transition: transform .16s var(--ease-out); }
    }
    @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
        .sticky-book .button, .sticky-book .button.is-refracting, html.is-scrolled nav .button {
            background: var(--red);
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
            text-shadow: none;
        }
        .sticky-book .button:active:not(:disabled), html.is-scrolled nav .button:active:not(:disabled) { background: var(--red-deep); }
        .sticky-book::before, .nav-book::before { display: none; }
    }
}
@media (max-width: 700px) {
    /* While a flight is set up, the scroll timeline alone moves the button:
       the show/hide lift and shrink would otherwise kick in whenever the
       script flips is-shown at either end, a small jolt on the way back up.
       will-change keeps it on its own layer for the whole trip. */
    .sticky-book.is-flying { will-change: transform; }
    .sticky-book.is-flying .button { transform: none; transition: background .2s ease; }
    .sticky-book.is-flying::before { transform: none; transition: none; }
}
/* Lets the pinned Book button see the view timeline on whichever button it
   is flying into (see .cta-fly). */
html { timeline-scope: --cta; }
@keyframes cg-fly {
    /* Linear on purpose: the target also moves linearly with the scroll, so
       the gap between them closes evenly and they meet exactly at the end. */
    from { transform: none; }
    to { transform: translate(var(--fly-x), var(--fly-y)) scale(var(--fly-s)); }
}
/* A long, eased fade: it starts a third of the way in and slows into zero,
   so the landing dissolves instead of cutting out. */
@keyframes cg-fly-fade {
    0%, 30% { opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    100% { opacity: 0; }
}
/* Storage price calculator (storage.html, assets/js/storage.js) */
.calc-card { display: grid; gap: 22px; max-width: 620px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--surface); }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 600; }
.calc-row output { font: 400 28px/1 var(--display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
/* A thin grey track that fills red up to a red thumb with a white rim
   (storage.js sets --fill). The native one came with a blue focus box. */
.calc-card input[type="range"] { --fill: 33%; width: 100%; height: 44px; margin: -10px 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.calc-card input[type="range"]:focus { outline: none; }
.calc-card input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--red) var(--fill), var(--line) var(--fill)); }
.calc-card input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.calc-card input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--red); }
.calc-card input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; border: 4px solid white; border-radius: 50%; background: var(--red); box-shadow: 0 1px 4px rgba(34, 36, 39, .35); -webkit-appearance: none; appearance: none; transition: transform 160ms var(--ease-out), box-shadow .2s ease; }
.calc-card input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 4px solid white; border-radius: 50%; background: var(--red); box-shadow: 0 1px 4px rgba(34, 36, 39, .35); transition: transform 160ms var(--ease-out), box-shadow .2s ease; }
.calc-card input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.calc-card input[type="range"]:active::-moz-range-thumb { transform: scale(1.12); }
.calc-card input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(34, 36, 39, .35), 0 0 0 6px rgba(230, 12, 12, .25); }
.calc-card input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 1px 4px rgba(34, 36, 39, .35), 0 0 0 6px rgba(230, 12, 12, .25); }
.calc-check { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.calc-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--red); cursor: pointer; }
.calc-check span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.calc-check strong { display: block; color: var(--ink); font-size: 16px; }
.calc-total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.calc-total span { font-weight: 600; }
.calc-total strong { font: 400 52px/1 var(--display); font-variant-numeric: tabular-nums; }
.calc-total small { grid-column: 1 / -1; color: var(--muted); font-size: 14px; text-align: right; }
.calc-card .button { justify-self: start; }
/* The share steps (mechanics.html #share): three slices of a month, then the
   first-weeks offer, above the calculator that adds them up. */
.share-steps { width: 100%; border-collapse: collapse; font-size: 15px; }
.share-steps caption { padding-bottom: 8px; font-weight: 600; text-align: left; }
.share-steps th, .share-steps td { padding: 10px 0; border-top: 1px solid var(--line); font-weight: 400; text-align: left; }
.share-steps td { font: 400 26px/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.share-note { margin: -10px 0 0; color: var(--muted); font-size: 13px; }
.share-intro { margin: 0; padding: 12px 14px; border-left: 3px solid var(--red); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--tint); font-size: 15px; }
@media (max-width: 700px) {
    .calc-card { padding: 22px 18px; }
    .calc-card .button { justify-self: stretch; }
}
/* Mechanics apply form (mechanics.html #apply): the calculator's card, so the
   page keeps one shape for things you fill in. Years are radio chips. */
.apply-form, .apply-done { display: grid; gap: 18px; max-width: 620px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--surface); }
.apply-form[hidden], .apply-done[hidden] { display: none; }
.apply-form .field { margin: 0; }
.apply-form .field > small { font-size: 13px; }
.apply-years { min-width: 0; padding: 0; border: 0; }
.apply-years legend { margin-bottom: 8px; padding: 0; font-weight: 600; font-size: 14px; }
.chip-radio { position: relative; display: inline-flex; align-items: center; }
.chip-radio input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip-radio:has(input:checked) { background: var(--red); border-color: var(--red); color: white; }
.chip-radio:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 2px; }
.apply-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.apply-status { min-height: 20px; margin: 0; color: var(--muted); font-size: 14px; }
.apply-status:empty { display: none; }
.apply-status.is-error { color: var(--error); }
.apply-form .button { justify-self: start; }
.apply-form .button[aria-busy="true"] { opacity: .6; cursor: wait; }
.apply-done h3 { font: 400 36px/1 var(--display); text-transform: uppercase; }
.apply-done p { margin: 0; color: var(--muted); }
.apply-done:focus { outline: none; }
@media (max-width: 700px) {
    .apply-form, .apply-done { padding: 22px 18px; }
    .apply-form .button { justify-self: stretch; }
}
/* Privacy policy (privacy.html): one readable column. */
.legal { max-width: 760px; padding-block: 40px 100px; }
.legal h1 { font-size: clamp(56px, 9vw, 110px); line-height: .95; }
.legal .intro { margin-top: 28px; max-width: none; }
.legal h2 { margin-top: 56px; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; }
.legal p, .legal li { margin-top: 14px; font-size: 16px; line-height: 1.6; }
.legal ul { padding-left: 20px; }
.legal li::marker { color: var(--red); }
.legal code { font-size: 14px; padding: 1px 6px; border-radius: 4px; background: var(--hover); }
.legal address { margin-top: 14px; font-style: normal; line-height: 1.6; }
.legal .text-link { margin-top: 18px; }
.legal section + section { margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--line); }

/* Headings, line by line (garage.js): each line rises from its own clip. */
.reveal-line { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.reveal-line > span { display: block; transform: translateY(105%); transition: transform .9s var(--ease-out) calc(var(--line) * 90ms); }
.reveal.is-in .reveal-line > span { transform: none; }

/* Tools as a bento grid on wide screens: the first seven only (the rest are
   in the "All the tools" panel), one feature tile two columns wide, all two rows
   tall, captions over the picture. 2×2 + 6 × (1×2) = 16 cells: four columns,
   four full rows. Phones and tablets keep the swipe strip with all of them. */

@media (min-width: 1001px) {
    .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 12px; overflow: visible; scroll-snap-type: none; }
    .slide { position: relative; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; overflow: hidden; border-radius: var(--radius-media); }
    .slide:nth-child(1) { grid-column: span 2; }
    .slide:nth-child(n + 8) { display: none; }
    .slide .frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
    .slide .frame img { transition: transform .8s var(--ease-out); }
    .slide::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); pointer-events: none; }
    .slide h3, .slide p { position: relative; z-index: 1; color: #faffff; pointer-events: none; }
    .slide h3 { margin: 0 0 4px; font-size: 19px; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
    .slide p { max-width: 420px; color: rgba(250, 255, 255, .82); font-size: 14px; line-height: 1.45; }
    .gallery-nav, .gallery-bar { display: none; }
    @media (hover: hover) { .slide:hover .frame img { transform: scale(1.04); } }
}

/* Footer: the name, as big as the footer is wide (SVG textLength fits it to
   the width whatever font loads; 157px is where Anton is 1000 wide on its own). */
.footer-mark { grid-column: 1 / -1; display: block; width: 100%; height: auto; margin-top: 8px; color: var(--red); }
.footer-mark text { font-family: var(--display); font-size: 157px; fill: currentColor; }

/* Show the lower part of a picture when it is cropped (the polished engine
   cover sits low in its frame). */
.pos-low img { object-position: center 85%; }

/* "All the tools": a wide button under the tools that opens the #kit panel. */
.tools-all { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 20px; width: 100%; margin-top: 24px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s ease, transform 160ms var(--ease-out); }
.tools-all > span:first-child { font: 400 30px/1.05 var(--display); text-transform: uppercase; }
.tools-all small { grid-row: 2; color: var(--muted); font-size: 14px; }
.tools-all .icon { grid-row: 1 / 3; grid-column: 2; width: 26px; height: 26px; color: var(--red); transition: transform .2s var(--ease-out); }
.tools-all:active { transform: scale(.99); }
@media (hover: hover) { .tools-all:hover { border-color: var(--red); } .tools-all:hover .icon { transform: translateX(5px); } }

/* The panel: every tool as a row, grouped by kind, so "have they got X?"
   takes a glance. A picked tool shows on the stage beside the list (on phones,
   right under its row). The photos and clips are phone-shot portraits, so the
   stage takes each one at its own shape: no crop, no black bars. */
.kit { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.kit[open] { display: flex; flex-direction: column; }
.kit::backdrop { background: rgba(19, 21, 23, .6); }
html:has(.kit[open]) { overflow: hidden; }
/* On big screens the content keeps to 1360px; the head's rule runs edge to edge. */
.kit-head, .kit-body { --kit-side: max(var(--gutter), calc((100% - 1360px) / 2)); }
.kit-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: max(18px, env(safe-area-inset-top)) var(--kit-side) 14px; border-bottom: 1px solid var(--line); }
.kit-head h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1; }
/* A size container, so the stage can size itself to the body's height (cqh). */
.kit-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 460px); align-items: start; gap: 0 56px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; container-type: size; padding: 0 var(--kit-side) max(40px, env(safe-area-inset-bottom)); }
.kit-list { min-width: 0; }
.kit-group h3 { margin: 28px 0 4px; font-size: 17px; font-weight: 600; }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.kit-grid > li { min-width: 0; border-top: 1px solid var(--line); }
/* A row: thumbnail, name, one line on what it's for. The row's wash reaches
   8px past the text so the names still line up with the group heading. */
.kit-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; width: calc(100% + 16px); margin: 4px -8px; padding: 8px; border: 0; border-radius: var(--radius-control); background: none; color: var(--ink); font: inherit; text-align: left; white-space: normal; transition: background-color .15s ease; }
button.kit-item { cursor: pointer; }
.kit-thumb { position: relative; display: block; width: 56px; height: 56px; overflow: hidden; border-radius: var(--radius-sm); background: var(--tint); }
.kit-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A clip carries a small play mark; a tool with no photo yet gets a wrench. */
.kit-item[data-clip] .kit-thumb::after { content: ''; position: absolute; left: 5px; bottom: 5px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23111214' fill-opacity='.72'/%3E%3Cpath d='M8 6.4v7.2l5.6-3.6Z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat; }
.kit-plain .kit-thumb::before { content: ''; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: var(--faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5L21 12.6a6 6 0 0 1-7.9 2.3L6.4 21.6a2 2 0 0 1-2.8-2.8l6.7-6.7a6 6 0 0 1 2.3-7.9Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5L21 12.6a6 6 0 0 1-7.9 2.3L6.4 21.6a2 2 0 0 1-2.8-2.8l6.7-6.7a6 6 0 0 1 2.3-7.9Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.kit-text { display: grid; gap: 2px; min-width: 0; }
.kit-text strong { font-size: 16px; font-weight: 600; }
.kit-text span { color: var(--muted); font-size: 14px; line-height: 1.4; }
button.kit-item:focus-visible { outline: 3px solid var(--red); outline-offset: 0; }
@media (hover: hover) { button.kit-item:hover { background: var(--hover); } }
/* The tool on the stage: its row stays lit and its thumbnail gets a red ring. */
.kit-item[aria-current="true"] { background: var(--hover); }
.kit-item[aria-current="true"] .kit-thumb { outline: 2px solid var(--red); outline-offset: 2px; }
.kit-foot { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
/* The stage sticks beside the list. The picture is as tall as the room above
   the caption allows and as wide as its own shape (--ar, from the photo's
   size), never wider than the column. */
.kit-side { position: sticky; top: 0; min-width: 0; padding-top: 32px; container-type: inline-size; }
.kit-stage { display: grid; gap: 20px; }
.kit-stage[hidden] { display: none; }
.kit-frame { --ar: .75; width: min(max(200px, 100cqh - 170px) * var(--ar), 100cqw); aspect-ratio: var(--ar); border-radius: var(--radius-media); }
.kit-name { margin: 0; font: 400 clamp(30px, 2.8vw, 42px)/1.05 var(--display); text-transform: uppercase; }
.kit-note { max-width: 38ch; margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
/* The panel rises in; a new pick settles onto the stage. */
.kit[open] { animation: kit-in .35s var(--ease-out); }
@keyframes kit-in { from { opacity: 0; transform: translateY(24px); } }
.kit-stage.is-new .kit-frame { animation: kit-pick .3s var(--ease-out); }
@keyframes kit-pick { from { opacity: .4; transform: scale(.98); } }
/* Phones and narrow tablets: one column; the stage opens under the picked
   row (garage.js moves it there) and the row itself is the caption. */
@media (max-width: 859px) {
    .kit-body { display: block; }
    .kit-side { display: none; }
    .kit-grid { grid-template-columns: minmax(0, 1fr); }
    .kit-stage { padding: 4px 0 16px; container-type: inline-size; }
    .kit-frame { width: min(62cqh * var(--ar), 100cqw); margin-inline: auto; }
    .kit-caption { display: none; }
}
@media (max-width: 700px) {
    .tools-all { padding: 16px 18px; }
    .tools-all > span:first-child { font-size: 24px; }
}

/* "You won't be on your own": the AI helper, with an example answer. */
.helper { background: var(--night); color: var(--night-text); }
.helper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.helper .location { color: #ff7070; }
.helper .intro { color: var(--night-muted); max-width: 480px; }
.helper-points { margin: 0 0 32px; padding: 0; list-style: none; }
.helper-points li { padding: 14px 0; border-top: 1px solid var(--night-line); color: var(--night-muted); font-size: 15px; line-height: 1.55; }
.helper-points li:last-child { border-bottom: 1px solid var(--night-line); }
.helper-points strong { color: var(--night-text); font-weight: 600; }
.helper-chat { display: grid; gap: 12px; margin: 0; padding: 22px; border: 1px solid var(--night-line); border-radius: var(--radius-media); background: #15171a; }
.chat-bike { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--night-muted); }
.chat-q { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--red); color: white; font-size: 15px; }
.chat-a { display: grid; gap: 10px; max-width: 92%; padding: 14px 16px; border-radius: 14px 14px 14px 4px; background: #24272b; font-size: 15px; line-height: 1.55; }
.chat-badge { justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--night-muted); font-size: 12px; font-weight: 600; }
.chat-video { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-left: 3px solid var(--red); border-radius: 6px; background: rgba(255, 255, 255, .05); font-weight: 600; }
.yt-mark { flex: none; width: 34px; height: 24px; }
.chat-video-text { display: grid; gap: 2px; }
.chat-video-text span { color: var(--night-muted); font-size: 12px; font-weight: 400; }
.helper-chat figcaption { color: var(--night-muted); font-size: 12px; text-align: center; }
@media (max-width: 1000px) { .helper-grid { gap: 40px; } }
@media (max-width: 700px) {
    .helper-grid { grid-template-columns: 1fr; gap: 32px; }
    .helper-chat { padding: 16px; }
}

/* Booking modal (assets/js/booking.js) */
/* Booked: the confetti canvas covers the sheet and never takes a tap. */
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.booking { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.booking[open] { display: flex; flex-direction: column; }
.booking::backdrop { background: rgba(34, 36, 39, .62); }
/* Opens with a short fade up from 96%, closes quicker and smaller. The
   discrete display/overlay transitions keep the dialog in the top layer until
   the exit has played; where they're unsupported it just closes instantly. */
.booking, .booking::backdrop { opacity: 0; transition: opacity .15s var(--ease-out), transform .15s var(--ease-out), overlay .15s allow-discrete, display .15s allow-discrete; }
.booking { transform: scale(.98); }
.booking[open], .booking[open]::backdrop { opacity: 1; transition-duration: .25s; }
.booking[open] { transform: none; }
@starting-style {
    .booking[open], .booking[open]::backdrop { opacity: 0; }
    .booking[open] { transform: scale(.96); }
}
/* On html, not body: html's own overflow-x (see the top) stops body's
   overflow from reaching the viewport, so a lock on body would do nothing. */
html:has(.booking[open]) { overflow: hidden; }
.booking-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 6px; }
.booking-head:has(.booking-back:not([hidden])) .booking-eyebrow { display: none; }
.booking-titles { flex: 1; min-width: 0; }
.booking-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.booking h2 { font-size: 38px; }
.booking-back { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: none; color: var(--ink); cursor: pointer; }
.booking-back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.booking-titles { align-self: center; }
.booking-back[hidden] { display: none; }
.booking-back .icon { width: 16px; height: 16px; }
.booking [data-view][hidden], .booking [hidden] { display: none !important; }
/* How long? — the app's duration pills: length, full price, full-day window. */
.lengths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.length { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.length-name { font-weight: 600; font-size: 14px; }
.length-price { font: 400 22px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.length-range { font-size: 11px; color: var(--muted); }
.length[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.length[aria-pressed="true"] .length-range { color: var(--paper); opacity: .8; }
.length:not([aria-pressed="true"]):active { background: var(--hover); }
@media (hover: hover) { .length:not([aria-pressed="true"]):hover { background: var(--hover); } }
.welcome-line { margin-top: 14px; padding-left: 12px; border-left: 3px solid var(--red); font-size: 14px; line-height: 1.5; }
.length-hint { margin-top: 18px; }
/* Confirm — session, bill, add-ons, total. */
.session { margin-top: 10px; padding: 16px 18px; border-radius: var(--radius-media); background: var(--tint); }
.confirm-window { font-weight: 600; font-size: 18px; }
.session-note { margin-top: 2px; font-size: 14px; color: var(--muted); }
.session-note:empty { display: none; }
.hold { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 18px; }
.hold-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.hold:has(.hold-text:empty) { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .hold-dot { animation: hold-pulse 2s ease-in-out infinite; }
}
@keyframes hold-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bill { margin: 18px 0 0; }
.bill div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bill dt { font-size: 15px; }
.bill dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.bill-discount dt, .bill-discount dd { color: var(--red); }
/* Add-ons fold under one Extras row (the FAQ's details, at bill size). Shut,
   it still names what's picked and what it adds. */
.extras > summary { padding: 12px 36px 12px 0; font-size: inherit; font-weight: inherit; }
.extras > summary::after { top: 50%; margin-top: -7px; }
.extras-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.extra { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); cursor: default; }
label.extra { cursor: pointer; }
.extra-name { display: grid; gap: 2px; min-width: 0; }
.extra strong, .extras-head strong { font-size: 15px; font-weight: 600; }
.extra small, .extras-head small { font-size: 12px; color: var(--muted); }
.extra-amount, .extras-sum { font-weight: 600; font-variant-numeric: tabular-nums; }
.extra-amount:empty, .extras-sum:empty { display: none; }
/* A switch, so a tap target reads as on/off rather than a bare checkbox. */
.switch { appearance: none; -webkit-appearance: none; position: relative; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--track); cursor: pointer; transition: background .18s var(--ease-out); flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(34, 36, 39, .35); transition: transform .18s var(--ease-out); }
.switch:checked { background: var(--red); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .45; cursor: default; }
.stepper { display: inline-flex; align-items: center; gap: 2px; }
.stepper button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.stepper button:not(:disabled):active { background: var(--hover); }
.stepper button:disabled { color: var(--faint); cursor: default; }
.stepper output { min-width: 30px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.included { font-size: 13px; font-weight: 600; color: var(--muted); }
.total-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding: 14px 18px; border-radius: var(--radius-control); background: var(--ink); color: var(--paper); }
.total-bar span { font-weight: 600; font-size: 15px; }
.total-bar strong { font: 400 32px/1 var(--display); font-variant-numeric: tabular-nums; }
.field { display: grid; gap: 6px; margin-top: 18px; }
.field > span { font-weight: 600; font-size: 14px; }
.field > span small, .field > small { font-weight: 400; font-size: 12px; color: var(--muted); }
.field textarea, .field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: 400 16px/1.4 var(--body); }
.field textarea:focus, .field input:focus { border-color: var(--ink); }
.field textarea { resize: vertical; }
[data-view="done"] p { margin-top: 10px; font-size: 16px; }
.done-when { font-weight: 600; font-size: 18px !important; }
/* Signed in (or a guest): who, and Sign out. */
.account-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 2px; padding: 4px 4px 4px 14px; border-radius: var(--radius-control); background: var(--tint); font-size: 13px; }
.account-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-signout { flex-shrink: 0; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: 600 13px/1 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.account-signout:active { background: var(--hover); }
.account-signout:disabled { opacity: .5; cursor: default; }
/* Signed out: what an account gives, sign in, or go as a guest. */
.perks { margin-top: 6px; padding: 22px 22px 24px; border-radius: var(--radius-media); background: var(--night); color: var(--night-text); }
.perks-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #aab3b3; }
.perks-title { margin-top: 6px; font: 400 32px/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.perks-off { color: #ff7070; font-variant-numeric: tabular-nums; }
.perks-list { display: grid; gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.perk { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start; align-content: start; }
.perk::before { content: ''; grid-area: 1 / 1 / 3 / 2; width: 36px; height: 36px; border-radius: var(--radius-control); background: #33373b var(--icon) center / 20px no-repeat; }
.perk strong { grid-column: 2; font-size: 15px; font-weight: 600; line-height: 1.3; }
.perk span { grid-column: 2; margin-top: 2px; font-size: 14px; line-height: 1.45; color: #c5cccc; }
.perk-discount { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.6V4a1 1 0 0 1 1-1h8.6L21 11.4 12.4 20Z'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3C/svg%3E"); }
.perk-doc { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6Z'/%3E%3Cpath d='M14.5 3v4.5H19M9 12.5h7M9 16.5h5'/%3E%3C/svg%3E"); }
.perk-badge { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='m8.6 14-1.6 8 5-2.8 5 2.8-1.6-8'/%3E%3C/svg%3E"); }
.perk-events { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M12 13.5l1 2 2.2.3-1.6 1.5.4 2.2-2-1-2 1 .4-2.2-1.6-1.5 2.2-.3Z'/%3E%3C/svg%3E"); }
/* Wider sheet: the four perks as a 2 × 2 grid, icon on top, so the sign-in
   buttons stay in view without scrolling. */
@media (min-width: 701px) {
    .perks-list { grid-template-columns: 1fr 1fr; gap: 18px 22px; }
    .perk { grid-template-columns: 1fr; }
    .perk::before { grid-area: auto; margin-bottom: 10px; }
    .perk strong, .perk span { grid-column: 1; }
}
.signin { display: grid; gap: 10px; margin-top: 18px; }
.signin-button, .guest-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px 20px; border-radius: var(--radius-button); font: 600 16px/1.2 var(--body); cursor: pointer; transition: transform 160ms var(--ease-out), background .2s ease; }
.signin-button:active:not(:disabled), .guest-submit:active:not(:disabled) { transform: scale(.98); }
.signin-button:disabled, .guest-submit:disabled { opacity: .55; cursor: default; }
.signin-google { border: 1px solid var(--ink); background: var(--surface); color: var(--ink); }
.signin-telegram { border: 0; background: #229ed9; color: white; }
.signin-telegram:active:not(:disabled) { background: #1b8bc0; }
.signin-logo { flex: none; width: 22px; height: 22px; }
.signin-telegram .signin-logo { background: currentColor; -webkit-mask: var(--tg) center / contain no-repeat; mask: var(--tg) center / contain no-repeat; --tg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 3.6 2.9 10.7c-1.3.5-1.2 1.3-.2 1.6l4.7 1.5 1.8 5.6c.2.7.4.9.9.9s.7-.2 1-.5l2.3-2.2 4.7 3.5c.9.5 1.5.2 1.7-.8L22.9 5c.3-1.3-.5-1.9-1.5-1.4ZM8.9 13.4l9.3-5.9c.5-.3.9-.1.5.2l-7.7 7-.3 3.2-1.8-4.5Z'/%3E%3C/svg%3E") }
.signin .booking-note { text-align: center; }
.signin-lead { text-align: center; font-size: 15px; font-weight: 600; }
.signin-price { color: var(--red); font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums; vertical-align: -1px; }
/* The guest way is there, but quiet: a link that opens the form. */
.guest-toggle { display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; min-height: 44px; margin-top: 18px; padding: 8px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--muted); font: 600 14px/1.3 var(--body); cursor: pointer; }
.guest-toggle::after { content: ''; flex: none; width: 7px; height: 7px; margin: -4px 0 0 12px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s var(--ease-out), margin .2s var(--ease-out); }
.guest-toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.guest-toggle-price { font-variant-numeric: tabular-nums; }
@media (hover: hover) { .guest-toggle:hover { color: var(--ink); } }
.guest { margin-top: 2px; }
.guest-submit { margin-top: 16px; border: 1px solid var(--line); background: none; color: var(--ink); }
.guest-submit:active:not(:disabled) { background: var(--hover); }
.guest .booking-note { margin-top: 10px; }
@media (hover: hover) {
    .signin-google:hover:not(:disabled), .guest-submit:hover:not(:disabled) { background: var(--hover); }
    .signin-telegram:hover:not(:disabled) { background: #1b8bc0; }
}
.booking-continue[hidden] { display: none; }
.booking-close, .kit-close, .month-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: none; color: var(--ink); cursor: pointer; font-size: 18px; }
.month-nav button:disabled { opacity: .3; cursor: default; }
.booking-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 24px; }
.booking-status { font-size: 13px; color: var(--muted); min-height: 22px; }
.booking-status.is-error { color: #bc0909; }
.month-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.month-label { font-weight: 600; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.dow { font-size: 11px; color: var(--muted); text-align: center; padding-block: 4px; }
.day { aspect-ratio: 1; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.day:disabled { border-color: transparent; background: none; color: var(--faint); font-weight: 400; cursor: default; }
.day.skeleton { border: 0; background: var(--skeleton); animation: pulse 1.2s ease-in-out infinite alternate; }
.booking h3 { font-size: 15px; margin: 26px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 10px 14px; border: 1px solid var(--ink); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.chip small { font-size: 12px; font-weight: 400; color: var(--muted); }
.day, .chip, .month-label, .booking-summary { font-variant-numeric: tabular-nums; }
/* Never on the picked one: its white label would vanish on the pale fill. */
.day:not(:disabled, [aria-pressed="true"]):active, .chip:not([aria-pressed="true"]):active { background: var(--hover); }
@media (hover: hover) {
    .day:not(:disabled, [aria-pressed="true"]):hover, .chip:not([aria-pressed="true"]):hover { background: var(--hover); }
}
.day.is-picked, .chip.is-picked, .length.is-picked { animation: pick .38s var(--ease-spring); }
@keyframes pick { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
.day[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: white; }
.chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }
.booking-foot { display: grid; gap: 10px; border-top: 1px solid var(--line); padding: 16px 24px max(18px, env(safe-area-inset-bottom)); }
.booking-summary { font-weight: 600; line-height: 1.4; min-height: 22px; }
.booking-summary:empty, .booking-foot-note:empty { display: none; }
.booking-continue { justify-content: center; width: 100%; border: 0; cursor: pointer; }
.booking-continue:disabled { background: var(--track); color: var(--muted); cursor: default; }
.booking-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
@keyframes pulse { from { opacity: 1; } to { opacity: .45; } }
@media (max-width: 700px) {
    .booking { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; }
    /* Full screen on phones, so it comes up from the bottom edge like a
       sheet and goes back down the same way; no fade. */
    .booking, .booking[open] { opacity: 1; transition-timing-function: var(--ease-drawer); }
    .booking { transform: translateY(100%); transition-duration: .35s; }
    .booking[open] { transform: none; transition-duration: .5s; }
    @starting-style {
        .booking[open] { opacity: 1; transform: translateY(100%); }
    }
    .booking-head { padding: max(16px, env(safe-area-inset-top)) 20px 4px; }
    .booking-body { padding: 4px 20px 20px; }
    .booking-foot { padding-inline: 20px; }
    .booking h2 { font-size: 30px; }
    .perks { padding: 20px 18px 22px; }
    .perks-title { font-size: 28px; }
    .lengths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Seven squares at aspect-ratio 1 comfortably fit a wide desktop modal, but
       on a narrow phone they'd eat the whole screen — cap the height there
       only, so the grid stays square everywhere it has the room to be. */
    .day { max-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* On the narrowest phones Menu and Book don't both fit next to the logo with
   their labels, so Menu keeps just its icon (the label stays for screen readers). */
@media (max-width: 370px) {
    .menu-button { padding-inline: 13px; }
    .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .signin-button { gap: 10px; padding-inline: 12px; font-size: 15px; }
}
/* On phones the header's Request storage shortens to Request, so it and Menu
   clear the logo. */
@media (max-width: 480px) {
    .nav-long { display: none; }
}

/* Terms / privacy consent lines in the booking sheet */
.terms-note { margin-top: 12px; }
.terms-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* 404 (404.html): the hero layout, with a foam tool tray in place of the photo.
   One cut-out is empty and tagged 404. The tray is drawn with theme tokens, so
   it follows the light/dark switch without a second asset. */
.lost { align-items: center; }
.lost-links li a { color: inherit; text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lost-links li a .icon { opacity: .45; transition: transform .18s ease, opacity .18s ease; }
.lost-links li a:hover .icon { transform: translateX(3px); opacity: 1; }
.lost-tray { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 0; }
.lost-tray svg { width: 100%; max-width: 380px; height: auto; }
.lost-tray figcaption { font-size: 13px; color: var(--muted); text-align: center; }
.tray-case { fill: var(--tint); stroke: var(--line); stroke-width: 2; }
.tray-foam { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.tray-slot > * { fill: var(--track); }
.tray-tool > * { fill: var(--ink); opacity: .72; }
.tray-gap { fill: none; stroke: var(--red); stroke-width: 3; stroke-dasharray: 7 7; }
.tray-leader { fill: none; stroke: var(--red); stroke-width: 2; }
.tray-tag { fill: var(--red); font: 400 30px/1 var(--display); letter-spacing: .04em; }
@media (max-width: 860px) {
    .lost { gap: 32px; }
    .lost-tray svg { max-width: 300px; }
}

/* Header account link (garage.js): "Sign in", or "Your garage" once signed in.
   A red dot while a signed-in rider has no bike yet; on phones the dot sits on
   the Menu button, which is where the link lives there. */
.nav-account, .menu-links [data-account-link] { position: relative; }
.nav-account.has-dot::after { content: ''; position: absolute; top: 10px; right: -9px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.menu-links [data-account-link].has-dot > span::after { content: ''; display: inline-block; width: .2em; height: .2em; margin-left: .18em; border-radius: 50%; background: var(--red); vertical-align: .6em; }
.menu-button.has-dot { position: relative; }
.menu-button.has-dot::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--red); }
.nav-account[aria-current="page"] { color: var(--red); }

/* Your garage (account.html, assets/js/account.js) */
.account { padding-block: 24px 100px; }
.account [hidden] { display: none !important; }
.account-head h1 { font-size: clamp(56px, 8vw, 104px); line-height: .98; }
.account-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 18px; color: var(--muted); font-size: 15px; }
.account-line .account-who { white-space: normal; }
.account-line .account-signout { padding-inline: 8px; }
.account-status { min-height: 0; margin-top: 18px; color: var(--muted); font-size: 15px; }
.account-status:empty { display: none; }
.account-status.is-error { color: var(--error); }
.account-loading { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; margin-top: 40px; }
.account-loading span { height: 320px; border-radius: var(--radius-media); background: var(--skeleton); animation: pulse 1.2s ease-in-out infinite alternate; }
.account-out { display: grid; gap: 4px; max-width: 560px; margin-top: 8px; }
.account-out .intro { margin: 20px 0 18px; }
.account-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 24px; margin-top: 40px; }
.account-side { display: grid; gap: 24px; }
.account-card { display: grid; gap: 16px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--surface); }
.account-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.account-card h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1; }
.account-card > .button { justify-self: start; }
.account-card > p { color: var(--muted); font-size: 15px; }
/* No bike yet: "What do you ride?" is the card's heading. */
.account-bikes:has(> .bike-cards[hidden]) > .account-card-head { display: none; }
.account-add { min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--radius-control); background: none; color: var(--ink); font: 600 14px/1 var(--body); cursor: pointer; transition: transform 160ms var(--ease-out); }
.account-add:active { transform: scale(.97); background: var(--hover); }
.account-empty { color: var(--muted); }
.account-telegram .signin-button { justify-self: start; width: auto; }
/* The bikes: a 3:4 photo (the shape the app and the garage screen use) beside the name. */
.bike-cards { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bike-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; }
.bike-card-photo { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-control); background: var(--tint); }
.bike-card-photo img { width: 100%; height: 100%; }
.bike-card-add { display: grid; place-items: center; width: 100%; height: 100%; padding: 10px; border: 1px dashed var(--faint); border-radius: inherit; background: none; color: var(--ink); font: 600 13px/1.3 var(--body); cursor: pointer; }
.bike-card-add:active { background: var(--hover); }
.bike-card-text { display: grid; gap: 4px; padding-top: 4px; }
.bike-card-name { font: 400 26px/1.05 var(--display); text-transform: uppercase; }
.bike-card-meta { color: var(--muted); font-size: 14px; }
.bike-card-tag { justify-self: start; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: var(--tint); font-size: 12px; font-weight: 600; }
.bike-card-actions { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 6px; }
/* Upcoming bookings */
.visits { display: grid; margin: 0; padding: 0; list-style: none; }
.visit { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.visit:last-child { border-bottom: 1px solid var(--line); }
.visit-when { font-weight: 600; font-variant-numeric: tabular-nums; }
.visit-meta { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
    .account-add:hover { background: var(--hover); }
    .bike-card-add:hover { border-color: var(--ink); }
}
@media (max-width: 860px) {
    .account-in, .account-loading { grid-template-columns: 1fr; }
    .account-loading span:last-child { display: none; }
}
@media (max-width: 700px) {
    .account { padding-block: 12px 64px; }
    .account-in { margin-top: 28px; gap: 16px; }
    .account-side { gap: 16px; }
    .account-card { padding: 22px 18px; }
    .account-card > .button, .account-telegram .signin-button { justify-self: stretch; width: 100%; }
    .bike-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
    .bike-card-name { font-size: 22px; }
}

/* Adding a bike (assets/js/bike.js): on the account page and in the booking
   sheet's "You're booked" step. */
/* scroll-margin: a new step scrolls into view clear of the fixed header. */
.bike-flow { display: grid; gap: 14px; scroll-margin-top: 24px; }
.bike-flow[hidden] { display: none; }
.account-card .bike-flow:not(:empty) { padding-top: 6px; }
.bike-cards:not([hidden]) + .bike-flow:not(:empty) { padding-top: 20px; border-top: 1px solid var(--line); }
.bike-title { font: 400 30px/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.bike-title:focus { outline: none; }
.bike-lead { margin-top: -6px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.bike-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
.bike-offer { padding-left: 12px; border-left: 3px solid var(--red); font-size: 14px; font-weight: 600; line-height: 1.5; }
.bike-status { color: var(--muted); font-size: 14px; line-height: 1.5; }
.bike-status:empty { display: none; }
.bike-status.is-error { color: var(--error); }
/* The scan is the quick way: the big red block. By hand is the outlined one. */
.bike-scan { position: relative; display: grid; gap: 4px; width: 100%; padding: 18px 56px 16px 20px; border: 0; border-radius: var(--radius-button); background: var(--red); color: white; text-align: left; cursor: pointer; transition: background .2s ease, transform 160ms var(--ease-out); }
.bike-scan::after { content: ''; position: absolute; top: 50%; right: 20px; width: 22px; height: 22px; margin-top: -11px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2M8 10h8M8 14h5'/%3E%3C/svg%3E"); }
.bike-scan:active { background: var(--red-deep); transform: scale(.98); }
.bike-scan-title { font: 400 22px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.bike-scan-sub { font-size: 13px; line-height: 1.4; opacity: .9; }
.bike-manual { width: 100%; min-height: 54px; padding: 12px 20px; border: 1px solid var(--ink); border-radius: var(--radius-button); background: var(--surface); color: var(--ink); font: 600 16px/1.2 var(--body); cursor: pointer; transition: transform 160ms var(--ease-out); }
.bike-manual:active { transform: scale(.98); background: var(--hover); }
.bike-quiet { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); font: 600 14px/1.3 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bike-quiet:disabled { opacity: .6; cursor: default; }
.bike-quiet.is-armed { color: var(--error); }
.bike-flow .field { margin-top: 0; }
.bike-flow select, .bike-flow .field input { width: 100%; min-height: 48px; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: 400 16px/1.4 var(--body); }
.bike-flow select { appearance: none; -webkit-appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; }
.bike-flow .field input { padding-right: 14px; }
.bike-flow select:focus, .bike-flow .field input:focus { border-color: var(--ink); }
.bike-flow select:focus-visible, .bike-flow .field input:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.bike-vin { font-family: ui-monospace, 'SF Mono', Menlo, monospace !important; letter-spacing: .04em; text-transform: uppercase; }
.bike-extra { border-bottom: 0; }
.bike-extra > summary { padding: 10px 36px 10px 0; font-size: 14px; color: var(--muted); }
.bike-extra > summary::after { top: 50%; margin-top: -7px; }
.bike-extra[open] { display: grid; gap: 14px; }
.bike-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 4px; }
.bike-save { justify-content: center; min-width: 180px; border: 0; cursor: pointer; }
.bike-save:disabled { background: var(--track); color: var(--muted); cursor: default; transform: none; }
.bike-wait { height: 6px; overflow: hidden; border-radius: 3px; background: var(--track); }
.bike-wait::after { content: ''; display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--red); animation: bike-wait 1.2s var(--ease-out) infinite; }
@keyframes bike-wait { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* The photo frame: 3:4, the photo dragged around inside it. */
.bike-frame { position: relative; width: min(100%, 300px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-media); background: var(--tint); touch-action: none; user-select: none; -webkit-user-select: none; }
.bike-frame.has-photo { cursor: grab; background: #000; }
.bike-frame.is-dragging { cursor: grabbing; }
.bike-frame:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.bike-frame-img { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; }
.bike-pick { display: grid; place-items: center; align-content: center; gap: 10px; width: 100%; height: 100%; border: 1px dashed var(--faint); border-radius: inherit; background: none; color: var(--ink); font: 600 15px/1.3 var(--body); cursor: pointer; }
.bike-pick::before { content: ''; width: 34px; height: 34px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A1.5 1.5 0 0 1 4.5 7h2.3l1.4-2h7.6l1.4 2h2.3A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.bike-pick:active { background: var(--hover); }
.bike-zoom-row { display: flex; align-items: center; gap: 14px; width: min(100%, 300px); font-size: 14px; font-weight: 600; }
.bike-zoom { flex: 1; accent-color: var(--red); }
.bike-done-photo { width: min(100%, 220px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-media); }
.bike-done-photo img { width: 100%; height: 100%; }
.bike-done-name { font: 400 28px/1.05 var(--display); text-transform: uppercase; }
.bike-done-meta { margin-top: -10px; color: var(--muted); font-size: 14px; }
.bike-done-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bike-done-list li { padding-left: 22px; position: relative; font-size: 15px; line-height: 1.5; }
.bike-done-list li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border: solid var(--red); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.bike-done-list li.is-note { color: var(--muted); }
.bike-done-list li.is-note::before { top: .75em; width: 10px; height: 0; border-width: 2px 0 0; border-color: var(--faint); transform: none; }
@media (hover: hover) {
    .bike-scan:hover { background: var(--red-deep); }
    .bike-manual:hover, .bike-pick:hover { background: var(--hover); }
    .bike-quiet:hover { color: var(--ink); }
}
/* In the booking sheet: below the booking, set off by a rule. */
.booking .bike-flow:not(:empty) { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.booking .bike-title { font-size: 26px; }
.booking .bike-save { min-height: 50px; padding-block: 12px 10px; font-size: 18px; }
@media (max-width: 700px) {
    .bike-flow { scroll-margin-top: 96px; }
    .booking .bike-flow { scroll-margin-top: 0; }
    .bike-actions .bike-save { flex: 1 1 100%; }
    .bike-title { font-size: 26px; }
}