/* Hallmark · shape: Narrative Workflow · genre: editorial · theme: brand
 * paper: oklch(97.6% 0.008 75) · accent: oklch(74.7% 0.166 63.5) · display: Bricolage Grotesque · body: system-ui · hero: Ledge (/), Stage (/scooter/, /auto/), Banner (/termini-e-condizioni/) · nav: edge-aligned · footer: company block and call shortcuts, after the old site · signature: Il Fungo di Lacco Ameno filling the first screen, the €25 price in the hero line
 * axes: light/grotesk-heavy/warm · posture: full palette (navy field from the logo ring, orange signal from the logo disc) · contrast: pass · fold: pass · v2.0.0
 * draw: c6ccb2 · job: book · shape: Catalogue (/scooter/, /auto/), Long Document (/termini-e-condizioni/), copy: legal text rewritten with the owner’s consent · imagery: photographs 1 (the owner's, hero), product cutouts 3 (the owner's) · swap: full-bleed room photo became the navy delivery band, the library had no Ischia frame */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a rental page could be anywhere; led with Il Fungo and the real price list so it can only be this office in Lacco Ameno */
/* Hallmark · answered F4 · the filled tab is the selected state of the Scooter, Auto and 6 to 9 posti switcher, not a second call to action */
/* Hallmark · dismissed 58 · the 469 count includes the Auto and 6 to 9 posti price tables, hidden behind the switcher once script runs; no screen passes 80 words */
/* Hallmark · dismissed render · document.fonts reports Bricolage Grotesque 700 800 loaded over http; the warning matches the preload, not a fallback face */
/* Hallmark · dismissed 69 · €25 repeats in the hero offer, the price list and the model picker of the booking form; the picker lists each model with its price so the customer books the right one */
/* Hallmark · dismissed 77 · /termini-e-condizioni/ is one legal document read top to bottom with a contents rail, not a landing page; it holds four clause lists */
@import url("./tokens.css");
@import url("./base.css");

/* Skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-ink-2); border-color: var(--color-ink-2); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-ink-2); }
.btn--photo { background: transparent; color: var(--color-on-photo); border-color: var(--color-on-photo); }
.btn--photo:hover { background: color-mix(in oklab, var(--color-on-photo) 16%, transparent); border-color: var(--color-on-photo); }
.btn--photo:focus-visible { outline-color: var(--color-on-photo); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } .btn:active { transform: none; } }

/* Nav: edge-aligned, the wordmark from the logo, four destinations and the booking */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__in { display: flex; align-items: center; gap: var(--space-xl); height: var(--nav-height); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); margin-right: auto; color: var(--color-ink-2); text-decoration: none; }
.brand img { width: 44px; height: 44px; flex-shrink: 0; }
.brand__name { font: var(--display-weight) var(--text-lg)/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__links a { color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover { color: var(--color-ink-2); text-decoration: underline; }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.menu { position: relative; display: none; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu__list { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); min-width: 14rem; margin: 0; padding: var(--space-xs) 0; list-style: none; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.menu__list a { display: block; padding: var(--space-sm) var(--space-md); color: var(--color-ink); text-decoration: none; }
.menu__list a:hover { background: var(--color-paper-2); }
.menu__list a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.lang { position: relative; }
.lang summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-xs); list-style: none; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; cursor: pointer; border-radius: var(--radius-card); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { text-decoration: underline; }
.lang summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lang__list { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); min-width: 11rem; margin: 0; padding: var(--space-xs) 0; list-style: none; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.lang__list a { display: block; padding: var(--space-sm) var(--space-md); color: var(--color-ink); text-decoration: none; }
.lang__list a[aria-current] { font-weight: 700; color: var(--color-ink-2); }
.lang__list a:hover { background: var(--color-paper-2); }
.lang__list a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* Hero: Ledge. The photograph is the field, the head rests at its base */
.hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: calc(100dvh - var(--nav-height)); color: var(--color-on-photo); }
.hero__photo { position: absolute; inset: 0; margin: 0; z-index: 1; }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 55%; }
.hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, color-mix(in oklab, var(--color-scrim) 84%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 52%, transparent) 42%, transparent 72%); }
.hero__in { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); padding-block: var(--space-4xl) var(--space-2xl); }
.hero__in > * { grid-column: 1 / span 8; }
.hero h1 { max-width: 15ch; color: var(--color-on-photo); }
.hero__lead { color: var(--color-on-photo); }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }

/* Quick facts: the three kinds of vehicle and what you need */
.quick { padding-block: var(--section-gap-s) var(--section-gap); }
.quick h2 { margin-bottom: var(--space-2xl); }
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.cat { display: grid; align-content: start; gap: var(--space-md); height: 100%; padding: var(--space-xl); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.cat:hover { border-color: var(--color-ink-2); }
.cat:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cat__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs); margin-block: var(--space-sm); font: var(--display-weight) var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.cat__price span { font: 400 var(--text-md)/1.2 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
.cat p:last-child { color: var(--color-ink); max-width: 45ch; }
.needs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-2xl) 0 0; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.needs > div { padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.needs > div:first-child { padding-left: 0; border-left: 0; }
.needs dt { font-size: var(--text-sm); color: var(--color-muted); }
.needs dd { margin: var(--space-2xs) 0 0; font-size: var(--text-lg); font-weight: 700; }

/* Prices: a switcher by kind of vehicle, the real price list in each panel */
.prices { padding-block: var(--section-gap); background: var(--color-paper-2); }
.prices__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.prices__head h2 { grid-column: 1 / span 7; }
.prices__head .lead { grid-column: 9 / span 4; color: var(--color-ink); }
.tabs { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-pill); background: var(--color-paper); }
.tabs button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-size: var(--text-md); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.tabs button:hover { background: var(--color-paper-3); }
.tabs button[aria-selected="true"] { background: var(--color-ink-2); color: var(--color-paper); }
.tabs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tabs button:active { transform: translateY(1px); }
.tabs button:disabled { opacity: 0.55; cursor: not-allowed; }
html:not(.js) .tabs { display: none; }
.panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; margin-top: var(--space-xl); }
.panel + .panel { margin-top: var(--space-3xl); }
.js .panel + .panel { margin-top: var(--space-xl); }
.panel__pic { margin: 0; }
.panel.is-in { animation: panel-in var(--dur-long) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
.panel__pic img { mix-blend-mode: multiply; transition: opacity var(--dur-short) var(--ease-out); }
.panel__pic img.is-out { opacity: 0; transition-duration: var(--dur-micro); }
.panel tr[data-pic] { cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.panel tbody tr[data-pic]:hover { background: var(--color-paper-3); }
.panel tbody tr[aria-current] { background: var(--color-paper); }
.panel tbody th { padding-block: var(--space-2xs); padding-left: var(--space-sm); }
.panel thead th:first-child { padding-left: var(--space-sm); }
.pick { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; white-space: nowrap; cursor: pointer; }
.pick:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.pick:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.pick:active { color: var(--color-ink-2); }
.pick:disabled { opacity: 0.55; cursor: not-allowed; }
.pick[aria-pressed="true"] { color: var(--color-ink-2); }
.panel__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--space-xl); background: var(--color-paper); border-radius: var(--radius-card); }
.panel__pic figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.panel__title { margin-bottom: var(--space-md); }
.panel table { width: 100%; border-collapse: collapse; }
.panel th, .panel td { padding: var(--space-md) var(--space-md) var(--space-md) 0; text-align: left; border-bottom: var(--rule-hair) solid var(--color-rule); }
.panel thead th { padding-block: var(--space-xs); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.panel tbody th { font-weight: 700; }
.panel .num { text-align: right; padding-right: 0; padding-left: var(--space-md); font-variant-numeric: tabular-nums; }
.panel tbody td:last-child { font-weight: 700; color: var(--color-ink-2); }
.prices__note { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); }
.more { display: inline-block; margin-top: var(--space-lg); color: var(--color-ink-2); font-weight: 700; text-underline-offset: 0.2em; }
.more:hover { text-decoration-thickness: 2px; }
.more:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Booking: the request written out, sent through WhatsApp */
.book { padding-block: var(--section-gap-l) var(--section-gap); }
.book__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.book__head { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); }
.book__alt a { color: var(--color-ink-2); font-weight: 700; white-space: nowrap; }
.form { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label, .seg legend { font-size: var(--text-sm); font-weight: 700; }
.opt { font-weight: 400; color: var(--color-muted); }
.field input, .field select { min-height: 48px; min-width: 0; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.field select { width: 100%; cursor: pointer; }
.field input::placeholder { color: var(--color-muted); }
.field input:hover, .field select:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid] { border-color: var(--color-error); }
.field input:disabled, .field select:disabled { opacity: 0.55; cursor: not-allowed; }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend { margin-bottom: var(--space-xs); padding: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg label:hover { background: var(--color-paper-2); }
.seg input:checked + label { background: var(--color-ink-2); border-color: var(--color-ink-2); color: var(--color-paper); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg input:disabled + label { opacity: 0.55; cursor: not-allowed; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xs); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }

/* Delivery: the navy band */
.delivery { padding-block: var(--section-gap-s); background: var(--color-field); color: var(--color-field-ink); --color-focus: var(--color-field-focus); }
.delivery__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.delivery h2 { grid-column: 1 / span 5; color: var(--color-field-ink); }
.delivery__rows { grid-column: 7 / span 6; margin: 0; }
.delivery__rows > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-lg); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-field-rule); }
.delivery__rows > div:last-child { border-bottom: var(--rule-hair) solid var(--color-field-rule); }
.delivery__rows dt { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); }
.delivery__rows dd { margin: 0; font-size: var(--text-lead); line-height: 1.45; }

/* Questions */
.faq { padding-block: var(--section-gap) var(--section-gap-s); }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.faq h2 { grid-column: 1 / span 4; }
.faq__rows { grid-column: 5 / span 8; }
.faq details { border-top: var(--rule-hair) solid var(--color-rule); }
.faq details:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); list-style: none; cursor: pointer; font: var(--display-weight) var(--text-title)/1.2 var(--font-display); overflow-wrap: break-word; min-width: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; color: var(--color-ink-2); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--color-ink-2); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details p { padding-bottom: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; }
.faq details a { color: var(--color-ink-2); }

/* Footer: company details on the left, call shortcuts on the right, as on the old site */
.fill { padding: 0 0.25em; border: 1px dashed currentColor; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.foot { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-field); color: var(--color-field-ink); --color-focus: var(--color-field-focus); }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.foot__company { grid-column: 1 / span 5; display: grid; justify-items: start; gap: var(--space-lg); }
.foot__logo img { width: 240px; height: auto; }
.foot__logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.foot address { font-style: normal; font-size: var(--text-lead); line-height: 1.55; }
.foot address strong { font-weight: 700; }
.foot__calls { grid-column: 7 / span 6; }
.foot__title { margin-bottom: var(--space-md); font-size: var(--text-title); color: var(--color-field-ink); }
.calls { margin: 0; padding: 0; list-style: none; }
.call { display: grid; grid-template-columns: 24px 8.5rem minmax(0, 1fr) auto; column-gap: var(--space-md); align-items: center; min-height: 64px; padding: var(--space-md) var(--space-sm); border-top: var(--rule-hair) solid var(--color-field-rule); color: var(--color-field-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.calls li:last-child .call { border-bottom: var(--rule-hair) solid var(--color-field-rule); }
.call:hover { background: color-mix(in oklab, var(--color-field-ink) 10%, transparent); }
.call:active { background: color-mix(in oklab, var(--color-field-ink) 16%, transparent); }
.call:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.call__icon { width: 24px; height: 24px; fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.call__who { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); }
.call__num { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.foot__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md) var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-field-rule); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot__company a:not(.foot__logo), .foot__bottom a { color: var(--color-field-ink); white-space: nowrap; }
.foot__company a:not(.foot__logo):hover, .foot__bottom a:hover { text-decoration-thickness: 2px; }
.foot__company a:not(.foot__logo):focus-visible, .foot__bottom a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.foot__legal { font-size: var(--text-sm); }

/* Document pages (termini e condizioni): a Banner head, the contents beside the text */
.doc-head { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.doc-head h1 { font-size: var(--text-display-s); max-width: 24ch; }
.doc-head .lead { margin-top: var(--space-md); }
.doc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; padding-block: var(--space-3xl) var(--section-gap-s); }
.toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-height) + var(--space-xl)); }
.toc ol { margin: 0; padding: 0; list-style: none; border-left: var(--rule-hair) solid var(--color-rule); }
.toc a { display: block; white-space: nowrap; padding: var(--space-xs) var(--space-md); color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.toc a:hover { color: var(--color-ink-2); text-decoration: underline; }
.toc a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.doc__body { grid-column: 5 / span 7; display: grid; gap: var(--space-3xl); }
.doc__body section { display: grid; gap: var(--space-lg); }
.doc__body h2 { font-size: max(2.5rem, var(--text-2xl)); }
.doc__body ul { display: grid; gap: var(--space-sm); margin: 0; padding-left: var(--space-lg); }
.doc__body li, .doc__body p { max-width: 68ch; line-height: 1.7; }
.doc__body li::marker { color: var(--color-ink-2); }

.doc__terms { display: grid; margin: 0; }
.doc__terms > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-lg); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.doc__terms > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.doc__terms dt { font-weight: 700; }
.doc__terms dd { margin: 0; line-height: 1.7; }
.doc__body a:not(.btn) { color: var(--color-ink-2); }
.doc__body a:not(.btn):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.doc__updated { font-size: var(--text-sm); color: var(--color-muted); }
.form__privacy { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-muted); }
.form__privacy a { color: var(--color-ink-2); }
.form__privacy a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.doc__body { gap: 0; }
.doc__body section { display: block; }
.clause { border-top: var(--rule-hair) solid var(--color-rule); }
.doc__body section:last-of-type .clause { border-bottom: var(--rule-hair) solid var(--color-rule); }
.clause summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-xl); list-style: none; cursor: pointer; }
.clause summary::-webkit-details-marker { display: none; }
.clause__title { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.clause summary::after { content: "+"; flex-shrink: 0; font: var(--display-weight) var(--text-2xl)/1 var(--font-display); color: var(--color-ink-2); }
.clause[open] summary::after { content: "\2212"; }
.clause summary:hover .clause__title { color: var(--color-ink-2); }
.clause summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.clause > :not(summary) { margin: 0 0 var(--space-lg); }
.clause > :last-child { margin-bottom: var(--space-xl); }
.doc__back { margin-top: var(--space-2xl); }

/* Catalogue pages (scooter, auto): a Stage head, the models in grids, facts in rows */
.page-hero { padding-block: var(--space-3xl); background: var(--color-paper-2); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: calc(100dvh - var(--nav-height) - 2 * var(--space-3xl)); }
.page-hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.page-hero__pic { margin: 0; }
.page-hero__pic img { width: 100%; max-height: 72dvh; object-fit: contain; mix-blend-mode: multiply; }
.range { padding-block: var(--section-gap) 0; }
.range__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.range__head h2 { grid-column: 1 / span 6; }
.range__head .lead { grid-column: 8 / span 5; }
.models { display: grid; gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.models--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.models--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.model { display: grid; gap: var(--space-sm); align-content: start; }
.model__pic { margin: 0 0 var(--space-sm); background: var(--color-paper-2); border-radius: var(--radius-card); }
.model__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--space-xl); mix-blend-mode: multiply; }
.model__pic--type { display: grid; place-items: center; aspect-ratio: 4 / 3; font: var(--display-weight) var(--text-2xl)/1 var(--font-display); color: var(--color-ink-2); }
.range--vans, .range:has(+ .included) { padding-bottom: var(--section-gap); }
.models--2 .model__pic img { aspect-ratio: 16 / 10; }
.model__price { font-size: var(--text-lg); color: var(--color-muted); }
.model__price .num { font: var(--display-weight) var(--text-2xl)/1 var(--font-display); color: var(--color-ink-2); }
.model__note { color: var(--color-ink); }
.model .more { margin-top: var(--space-xs); justify-self: start; }
.why { padding-block: var(--section-gap); }
.why__statement { max-width: 22ch; font-size: var(--text-display-s); line-height: 1.08; }
.why__line { margin-top: var(--space-xl); max-width: 60ch; }
.included { padding-block: var(--section-gap-s); background: var(--color-field); color: var(--color-field-ink); --color-focus: var(--color-field-focus); }
.included__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.included h2 { grid-column: 1 / span 4; color: var(--color-field-ink); }
.facts { grid-column: 6 / span 7; margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr); gap: var(--space-lg); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-field-rule); }
.facts > div:last-child { border-bottom: var(--rule-hair) solid var(--color-field-rule); }
.facts dt { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); }
.facts dd { margin: 0; font-size: var(--text-lead); line-height: 1.45; }
.qa { grid-column: 5 / span 8; margin: 0; }
.qa > div { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.qa > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.qa dt { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); }
.qa dd { margin: var(--space-xs) 0 0; font-size: var(--text-lead); line-height: 1.5; max-width: 60ch; }
.qa a { color: var(--color-ink-2); white-space: nowrap; }
.cta { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.cta__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xl); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (max-width: 60rem) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-xl); }
  .range__head h2, .range__head .lead,   .range__head { row-gap: var(--space-md); }
    .models--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .models--3, .models--2 { grid-template-columns: minmax(0, 1fr); }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

/* Dock: call and book, always in reach on a phone */
.dock { display: none; }

@media (max-width: 60rem) {
  .nav__links, .nav__book { display: none; }
  .menu { display: block; }
  .hero__in > * { grid-column: 1 / -1; }
  .cats { grid-template-columns: minmax(0, 1fr); }
  .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .needs > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .toc { display: none; }
  .doc__body { grid-column: 1 / -1; }
  .prices__head h2, .prices__head .lead, .book__head, .form, .delivery h2, .delivery__rows, .faq h2, .faq__rows, .foot__company, .foot__calls { grid-column: 1 / -1; }
  .prices__head { row-gap: var(--space-md); }
  .panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .form, .delivery__rows, .faq__rows { margin-top: var(--space-xl); }
  .tabs { display: flex; overflow-x: auto; }
  .dock { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); padding: var(--space-sm) var(--gutter); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); }
  body { padding-bottom: var(--space-3xl); }
}

@media (max-width: 40rem) {
  .brand__name { font-size: var(--text-md); }
  .nav__in { gap: var(--space-sm); }
  .menu summary { padding-inline: var(--space-md); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .call { grid-template-columns: 24px minmax(0, 1fr); row-gap: var(--space-2xs); }
  .call__role, .call__num { grid-column: 2; }
  .delivery__rows > div, .doc__terms > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .panel th, .panel td { padding-right: var(--space-xs); font-size: var(--text-sm); }
  .panel .num { padding-left: var(--space-xs); }
}

/* Smallest phones: the logo disc alone keeps room for the language and menu buttons. */
@media (max-width: 23rem) {
  .brand__name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tabs button:active { transform: none; }
  .panel.is-in { animation: none; }
  .panel__pic img, .panel tr[data-pic] { transition: none; }
}