/* v31 visual system (DESIGN.md "Version 31"). Loaded after composition.css, before motion.css.
   Square photographs and fields, hairlines instead of boxes, pill buttons, mono chapter indices; the logo colour
   #203838 carries the territory field, the plan and the model. The territory chapter holds the massing model and
   the drifting strip of all 17 photographs; the location map is monochrome so the plan reads first. */
:root { --logo: #203838; --hair: #d3dbd5; --mono: 'Red Hat Mono', ui-monospace, Consolas, monospace; }
main { container-type: inline-size; }
h1, h2 { letter-spacing: -.04em; }

/* Chapter indices: a mono number and a short hairline */

/* Vector logo (qa-kit/vectorize.py, IoU 0.999 against the approved v18 master): sized by its height */
.brand img { width: auto; height: 44px; }
@media (max-width: 760px) { .brand img { height: 38px; } }

/* Buttons are pills; hover changes the fill in place (no movement towards the pointer) */
.button { border-radius: 999px; }
.button .icon { border-radius: 50%; }

/* ── Hero: a larger photograph that runs to the right edge of the page ─────────────────── */
/* the page gutter is max(56px, (width - 1440px) / 2) above 1200 px, 32 px up to 1200, 20 px on phones */
:root { --gutter: max(56px, (100cqw - 1440px) / 2); }
@media (max-width: 1200px) { :root { --gutter: 32px; } }
@media (max-width: 520px) { :root { --gutter: 20px; } }
.hero-photo { border-radius: 0; min-height: min(78vh, 760px); min-height: min(78svh, 760px); margin-right: calc(-1 * var(--gutter)); }
.hero-photo::after { width: 120px; }
@media (max-width: 900px) { .hero-photo { margin-right: 0; min-height: 420px; } }
@media (max-width: 520px) { .hero-photo { min-height: 340px; } }

/* ── Rental: hairline rows; the photograph matches the height of the list ───────────────── */
.rental-layout { align-items: stretch; }
.space { border-top: 1px solid var(--hair); }
.space:last-child { border-bottom: 1px solid var(--hair); }
.rental-photo { border-radius: 0; min-height: 560px; }
.rental-photo figcaption { border-radius: 0; }
@media (max-width: 900px) { .rental-photo { min-height: 0; } }

/* ── Territory: full-width field in the logo colour ─────────────────────────────────────── */
.territory { margin-inline: 0; border-radius: 0; background: var(--logo); }
.territory .shell { width: auto; margin-inline: var(--gutter); }
.territory > .shell.section { padding-bottom: 40px; }
.territory-model { margin: 8px 0 0; }
/* v42: one short, native scroll interval keeps the complete model and all seven tabs in view. */
.model-tour.is-tour-ready { margin-top: 8px; }
.model-tour.is-tour-ready::after { content: ''; display: block; height: var(--model-tour-distance); }
.model-tour.is-tour-ready .territory-model { position: sticky; top: var(--model-tour-top); margin: 0; }
.model-tour.is-tour-ready .model-stage { height: var(--model-tour-height); aspect-ratio: auto; max-height: none; }
/* Unlike overflow:hidden, clip does not create an ancestor scroll container for the sticky figure. */
.territory:has(.model-tour.is-tour-ready) { overflow: clip; }
.model-stage { position: relative; aspect-ratio: 16 / 6; max-height: 80vh; width: 100%; overflow: hidden; touch-action: pan-y; }
.model-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.model-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s; }
.territory-model.is-live .model-poster { opacity: 0; pointer-events: none; }
.model-stage.is-pointing { cursor: pointer; }
.model-labels { position: absolute; inset: 0; pointer-events: none; }
.model-labels span { position: absolute; left: 0; top: 0; padding: 3px 6px; font: 500 11px/1.1 var(--mono); color: #fff; background: #203838d9; opacity: 0; transition: opacity .35s, background .25s; white-space: nowrap; }
.model-labels span.is-on { opacity: 1; }
.model-labels span.is-lit { background: var(--wine); }
.model-tip { position: absolute; left: 0; top: 0; z-index: 2; padding: 9px 12px; font: 500 13px/1.2 var(--mono); color: var(--ink); background: #fff; pointer-events: none; white-space: nowrap; box-shadow: 0 10px 30px -14px #000a; }
.model-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.model-legend button { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 18px; border: 1px solid #ffffff38; border-radius: 999px; background: transparent; color: #eef3ee; font: 500 14px/1.2 'Archivo', sans-serif; transition: background .25s, border-color .25s, color .25s; }
.model-legend button small { font: 500 12px/1 var(--mono); color: #b9cbbf; }
.model-legend button:hover { background: #ffffff14; border-color: #ffffff66; }
.model-legend button[aria-pressed="true"] { background: var(--wine); border-color: var(--wine); color: #fff; }
.model-legend button[aria-pressed="true"] small { color: #f0dce2; }
@media (max-width: 760px) {
  .model-stage { aspect-ratio: 4 / 5; max-height: 78vh; }
  .model-legend { gap: 8px; }
  .model-legend button { min-height: 40px; padding: 8px 14px; font-size: 13px; }
}

/* Photo strip: every photograph of the territory drifts past; the series name sits under its first photo */
.photo-strip { margin-top: 30px; overflow: hidden; cursor: grab; outline-offset: -3px; }
.photo-strip.is-dragging { cursor: grabbing; }
.photo-strip.is-dragging a { pointer-events: none; }
.strip-track { display: flex; gap: 14px; width: max-content; padding-left: var(--gutter); will-change: transform; }
.shot { flex: none; margin: 0; }
.shot a { display: block; overflow: hidden; cursor: zoom-in; }
.shot img { display: block; height: clamp(250px, 30vw, 430px); width: auto; transition: transform .9s cubic-bezier(.22, 1, .36, 1), filter .4s; user-select: none; -webkit-user-drag: none; }
.shot figcaption { margin-top: 12px; font: 500 12px/1.2 var(--mono); color: #b9cbbf; }
@media (hover: hover) and (pointer: fine) { .shot a:hover img { transform: scale(1.04); } }
.strip-controls { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 0 96px; }
.strip-controls button { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #ffffff40; border-radius: 50%; background: transparent; color: #fff; transition: background .25s, border-color .25s; }
.strip-controls button:hover { background: #ffffff18; border-color: #ffffff80; }
.strip-controls[hidden] { display: none; }
@media (max-width: 520px) { .strip-track { gap: 10px; } .strip-controls { padding-bottom: 64px; } }

/* ── Location: monochrome basemap, the plan in the logo colour ──────────────────────────── */
.site-plan { border-radius: 0; border: 0; background: #edf0ec; }
.plan-stage { height: clamp(560px, 54vw, 780px); background: #eef1ec; }
.city-map .leaflet-tile-pane { filter: grayscale(1) contrast(.74) brightness(1.12); }
.property-label span { font: 600 12px/1 var(--mono); color: var(--logo); background: #ffffffeb; border-radius: 0; padding: 3px 5px; box-shadow: 0 1px 6px #0e1f1a26; }
.property-address-marker span { border-radius: 0; }
.plan-filters button, .plan-picker-trigger, .plan-tool, .plan-controls { border-radius: 999px; }
@media (max-width: 760px) { .plan-stage { height: 380px; } } /* v41, user: a lower map on phones */

/* ── Certificates: full-width sage field ─────────────────────────────────────────────────── */
.certificates.shell, .certificates.shell:where(*) { width: auto; margin-inline: 0; border-radius: 0; padding-inline: var(--gutter); }

/* ── FAQ: hairline rows ─────────────────────────────────────────────────────────────────── */
.faq-list details { background: transparent; border-radius: 0; border-top: 1px solid var(--hair); padding: 18px 0; margin: 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--hair); }

/* ── Contacts: rows on hairlines; the rental row is the wine band ────────────────────────── */
.company-contact-grid { row-gap: 0; }
.company-contact-card { border-radius: 0; background: transparent; border-top: 1px solid var(--hair); }
.company-contact-card:last-child { border-bottom: 1px solid var(--hair); }
.company-contact-card.is-rental { background: var(--wine); border-top-color: var(--wine); }

/* ── Closing: full width ─────────────────────────────────────────────────────────────────── */
.contact { margin-inline: 0; border-radius: 0; }

/* Location heading in the first column, text and address beside it; the Google map row sits on hairlines */
#vieta .location-copy h2 { grid-column: 1; grid-row: 1 / 3; }
#vieta .location-copy > p { grid-column: 2; grid-row: 1; }
#vieta .location-copy > .location-address-row { grid-column: 2; grid-row: 2; }
.location-map { background: transparent; border-radius: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }

/* ── v32 type: Archivo replaces Space Grotesk and Manrope (registry: Space Grotesk is a reflexive AI-site face).
   Display lines are set wide (112 %), text at 100 %; only the closing word animates an axis (weight). ── */
body { font-family: 'Archivo', Arial, sans-serif; font-stretch: 100%; }
h1, h2, h3, .brand > span, .space-name, .main-phone, .company-contact-card > h3, .certificate-card h3 { font-family: 'Archivo', Arial, sans-serif; font-stretch: 112%; }
h1, h2 { font-weight: 640; letter-spacing: -.045em; }
.brand > span { font-weight: 600; letter-spacing: -.02em; }
.brand small { font-stretch: 100%; }
.space-name { font-weight: 520; }

/* v32 hero transition through the plan (hero-plan.js): the canvas sits over the slides, under the edge wash and controls */
.hero-plan-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s; pointer-events: none; }
.hero-photo.is-plan-live .hero-plan-canvas { opacity: 1; }


/* v32: after the rise the model can be turned by dragging */
.territory-model.is-live .model-stage { cursor: grab; }
.model-stage.is-dragging { cursor: grabbing; }
.model-stage.is-pointing { cursor: pointer; }

/* v32: Archivo at 112 % is ~10 % wider than the old face; the two-line hero title keeps its overlap */
/* typography.css set 7vw (desktop) and 12.35vw (≤ 900 px) for the old face; Archivo at 112 % needs ~10 % less */
/* the hero title is sized from its column (container units), so it never runs into the photo: three lines on desktop
   (longest „Erdvė jūsų“ = 5.07 × font size), two on phones („verslo augimui.“ = 7.26 ×) */
.hero-copy { container-type: inline-size; }
@media (min-width: 901px) { .hero h1 { font-size: clamp(56px, 6.4vw, 98px); font-size: min(112px, calc(100cqi / 5.25)); } .hero h1 span { display: block; } }
@media (max-width: 900px) { .hero h1 { font-size: clamp(30px, 11.1vw, 80px); font-size: min(80px, calc(100cqi / 7.45)); } }
/* phones: the hero photo starts higher, so the opening silhouette is in the first screen */
@media (max-width: 520px) { .hero { gap: 20px; } .hero-description { margin-top: 16px; } .hero-actions { margin-top: 20px; } .hero-address { padding-top: 16px; } }

/* selection in the logo colour */
::selection { background: #203838; color: #f6f7f5; }
.territory ::selection, .contact ::selection { background: #f6f7f5; color: #203838; }
/* the rental type is already named in the list beside the photo: no caption badge on it (app.js still fills it) */
.rental-photo figcaption[hidden] { display: none; }

/* ── Closing (v32): the logo-colour field; the main phone is the largest action (the drawn boundary line was removed in v37 at the user's request) ── */
.contact { background: var(--logo); }
.contact-inner { position: relative; z-index: 1; }
.contact h2 { grid-row: 1; }
.contact p { grid-row: 2; }
.contact-call { grid-column: 1; grid-row: 3; display: inline-flex; flex-direction: column; gap: 10px; width: fit-content; margin-top: 34px; padding-bottom: 12px; border-bottom: 1px solid #ffffff59;
  color: #fff; font: 600 clamp(36px, 4.6vw, 68px)/1 'Archivo', sans-serif; font-stretch: 112%; letter-spacing: -.035em; white-space: nowrap; transition: color .3s, border-color .3s; }
.contact-call small { font: 500 13px/1 var(--mono); letter-spacing: .02em; color: #b9cbbf; }
.contact-call:hover { color: #f0dce2; border-color: currentColor; }
.contact-action { grid-row: 1 / span 3; }
@media (max-width: 760px) { .contact-action { grid-row: 4; } .contact-call { font-size: clamp(30px, 8.6vw, 44px); margin-top: 28px; } }

/* ── Footer (v32, user feedback): one centred composition on the closing's own field — logo | sections | to the top on
   one line, the legal line centred under them with thin vertical rules; no card, no second tone, one main phone (above) ── */
.contact::before { display: none; }
.footer { width: 100%; max-width: none; margin: 0; padding: 0; border-radius: 0; background: var(--logo); color: #c9d6cd; }
.footer-inner { border-top: 1px solid #ffffff24; padding-block: 34px 30px; }
.footer-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.footer-brand { justify-self: start; color: #fff; }
.footer-brand img { height: 40px; }
.footer-brand small { color: #b9cbbf; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 30px; font-size: 14px; font-weight: 500; }
.footer-nav a { color: #e9efea; padding-block: 10px; transition: color .25s; }
.footer-nav a:hover { color: #f0dce2; }
.footer .footer-top { justify-self: end; width: 44px; height: 44px; margin: 0; padding: 0; display: grid; place-items: center; place-content: center; border-radius: 50%; border: 1px solid #ffffff3d; background: transparent; color: #fff; transition: background .3s, color .3s, border-color .3s; }
.footer .footer-top .icon { display: block; width: 18px; height: 18px; margin: 0; }
html[data-motion="full"] .footer .footer-top:hover { transform: none; background: #f6f7f5; border-color: #f6f7f5; color: var(--logo); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid #ffffff1a; font-size: 12px; line-height: 1.5; color: #a9bcb1; }
.footer-legal > * { padding: 2px 14px; }
.footer-legal > * + * { border-left: 1px solid #ffffff33; }
.footer-legal a { color: #dfe7e1; transition: color .25s; }
.footer-legal a:hover { color: #fff; }
.footer-legal strong { color: #fff; font-weight: 600; }
@media (max-width: 1100px) { .footer-line { grid-template-columns: 1fr; justify-items: center; gap: 16px; } .footer-brand, .footer .footer-top { justify-self: center; } }
@media (max-width: 900px) { .footer-legal { flex-direction: column; gap: 4px; } .footer-legal > * + * { border-left: 0; } }
/* phones: the closing ends after its button, no empty field before the footer line */
@media (max-width: 760px) { .contact-inner { min-height: 0; padding-block: 64px 52px; } }

/* ── Header (v34, user rules of 4 Oct 2026 for all sites): the logo is never small (caps of the descriptor ≥ 14 px on
   desktop, ≥ 10 px on phones); every text in the header — wordmark, sections, number — stands on one baseline
   (measured with zero-size baseline markers: spread 0 px at 1150 and 1440); the menu lines turn into a cross in 0.5 s ── */
.header .brand > span { font-size: 26px; line-height: 1.1; }
.header .brand small { font-size: 14px; letter-spacing: .04em; margin-top: 5px; }
.header .brand img { height: 50px; }
@media (min-width: 1101px) {
  .header-inner { align-items: baseline; min-height: 0; padding-block: 23px; }
  .header .brand > img { align-self: center; }
  .header .brand > span { align-self: baseline; }
  .desktop-nav { align-items: baseline; }
  .header-contact > .icon { align-self: center; }
  .header-contact > span { align-self: baseline; line-height: 43px; }
}
/* 1101–1200 px: the number is hidden, the icon alone has no text baseline */
@media (min-width: 1101px) and (max-width: 1200px) { .header-contact { align-self: center; } }
@media (max-width: 1100px) { .header .brand > span { font-size: 22px; } .header .brand small { font-size: 12px; } .header .brand img { height: 44px; } }
@media (max-width: 760px) { .header .brand > span { font-size: 20px; } .header .brand small { font-size: 11px; letter-spacing: .03em; } .header .brand img { height: 40px; } }
@media (max-width: 420px) { .header .brand > span { font-size: 19px; } .header .brand small { font-size: 10.5px; letter-spacing: .02em; } .header .brand img { height: 36px; } }
@media (max-width: 380px) { .header .brand > span { font-size: 18px; } .header .brand small { font-size: 10px; letter-spacing: .01em; } .header .brand img { height: 34px; } }
@media (max-width: 359px) { .header .brand > span { font-size: 15px; } .header .brand small { font-size: 9px; letter-spacing: 0; } .header .brand img { height: 28px; } }
.menu-toggle span { transition: transform .5s cubic-bezier(.65, 0, .35, 1); }

/* v35, user: „чуть уменьшить расстояние между словами вертикальное“ — the hero title's lines closer (was 1.05) */
.hero h1 { line-height: .95; }

/* v35, user: „выравнивание текста по вертикали“ — the legend pills centre their row (a flex row with baseline alignment
   kept the text at the top of the 44 px pill); name and code stay on one baseline, trimmed to the caps for the optical centre */
.model-legend button { display: inline-grid; grid-auto-flow: column; justify-content: start; align-content: center; align-items: baseline; column-gap: 10px; transition: background .35s, border-color .35s, color .35s; }
.model-legend button > span, .model-legend button > small { text-box: trim-both cap alphabetic; }
/* v35, user: the scroll tour lights the pills one by one (territory3d.js adds .is-tour) */
.model-legend button.is-tour { background: var(--wine); border-color: var(--wine); color: #fff; }
.model-legend button.is-tour small { color: #f0dce2; }

/* v37: the footer sections stay on one line on narrow phones */
@media (max-width: 420px) { .footer-nav { gap: 4px 18px; font-size: 13px; } }

/* v39, user: „текст не должен быть так впритык. и кнопка плюс тоже“ — FAQ rows keep 22 px inside, also as a card on hover */
.faq-list details { padding-inline: 22px; }
@media (max-width: 520px) { .faq-list details { padding-inline: 16px; } }

/* v40, user rule of 5 Oct 2026 for all sites: no blue flash on touch; a press shows its own state in place
   (fill or colour), the focus ring stays on :focus-visible only */
html { -webkit-tap-highlight-color: transparent; }
.menu-toggle:active span { background: var(--wine); }
.button:active, .home:active { filter: brightness(.9); }
.header-contact:active .icon, .footer .footer-top:active { background: #d4dfcf; color: var(--logo); }
.hero-gallery-controls button:active { background: #d4dfcf; }
.model-legend button:active { background: #ffffff2e; }
.space summary:active, .faq-list summary:active { color: var(--wine); }
.desktop-nav a:active, .footer-nav a:active, .footer-legal a:active, .contact-call:active { color: var(--wine); }
.contact-call:active { color: #f0dce2; }

/* v40, user: in the menu the phone never looks like a section link; the menu panel a little darker; the site behind
   it dims while the menu is open */
.header:has(.menu-toggle[aria-expanded="true"]) { background: #e6eae5; }
.mobile-nav { background: #e6eae5; }
.mobile-nav a.mobile-call { display: inline-flex; align-items: center; gap: 14px; margin-top: 16px; padding: 8px 22px 8px 8px; border-radius: 40px; background: var(--wine); color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.mobile-call-icon { display: grid; place-items: center; place-content: center; width: 44px; height: 44px; border-radius: 50%; background: #ffffff24; }
.mobile-call-icon .icon { width: 20px; height: 20px; }
.mobile-call small { display: block; margin-bottom: 2px; font: 500 11px/1 var(--mono); letter-spacing: .02em; color: #f0dce2; }
.mobile-nav a.mobile-call:active { filter: brightness(.9); }
body::after { content: ''; position: fixed; inset: 0; z-index: 19; background: #14201e; opacity: 0; pointer-events: none; transition: opacity .35s; }
html:has(.menu-toggle[aria-expanded="true"]) body::after { opacity: .42; }

/* v40, user: on phones the closing is one centred composition, like the footer under it */
@media (max-width: 760px) {
  .contact-copy { justify-items: center; text-align: center; }
  .contact p { margin-inline: auto; }
  .contact-call { justify-self: center; align-items: center; }
  .contact-action { justify-self: center; }
}

/* v49: language switch LT | EN (header from 761 px, mobile menu, footer line) */
.header-end { display: flex; align-items: baseline; gap: 22px; }
.lang-switch { display: inline-flex; align-items: baseline; font: 600 13px/1 'Archivo', Arial, sans-serif; letter-spacing: .06em; }
.lang-switch a { padding: 10px 9px; color: var(--muted); transition: color .25s; }
.lang-switch a + a { border-left: 1px solid var(--hair); }
.lang-switch a[aria-current="true"] { color: var(--ink); }
.lang-switch a:hover { color: var(--wine); }
@media (max-width: 1100px) { .header-end { margin-left: auto; } .header-end .header-contact { margin-left: 0; } }
@media (max-width: 760px) { .header-end .lang-switch { display: none; } }
.mobile-nav .lang-mobile { display: flex; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); }
.mobile-nav .lang-mobile a { display: inline-block; padding: 10px 18px 10px 0; font-size: 15px; }
.mobile-nav .lang-mobile a + a { padding-left: 18px; }
.footer-legal .lang-switch { padding: 2px 14px; }
.footer-legal .lang-switch a { padding: 6px 9px; color: #a9bcb1; }
.footer-legal .lang-switch a + a { border-left-color: #ffffff33; }
.footer-legal .lang-switch a[aria-current="true"] { color: #fff; }
.footer-legal .lang-switch a:hover { color: #f0dce2; }
/* v49 EN: the English title has three short lines on phones too */
@media (max-width: 900px) { html[lang="en"] .hero h1 span { display: block; } }

/* v52 header rule 28.10: the phone bar shows logo + LT|EN + phone button + menu, compact, ≥ 10 px apart; the wordmark stacks in two lines */
@media (max-width: 760px) {
  .header .header-inner { gap: 10px; }
  .header .header-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  .header .header-end .lang-switch { display: inline-flex; align-items: center; }
  .header .header-end .lang-switch a { padding: 12px 8px; }
  .header .header-contact { margin-left: 0; }
  .header .menu-toggle { margin-left: 0; flex: none; }
}
@media (max-width: 600px) {
  .header .brand { min-width: 0; flex: 0 1 auto; gap: 8px; align-items: center; }
  .header .brand > span { width: min-content; font-size: 16px; line-height: 1.02; }
  .header .brand small { display: none; }
  .header .brand img { height: 36px; }
}
@media (max-width: 374px) {
  .header .brand > span { font-size: 15px; }
  .header .brand img { height: 32px; }
  .header .header-end .lang-switch a { padding: 12px 6px; }
}
/* v51 «открытое меню без каши»: items → language → phone button, one left edge, groups ≥ 24 px */
.mobile-nav .lang-mobile { margin-top: 24px; padding-top: 14px; }
.mobile-nav .lang-mobile + a.mobile-call { margin-top: 24px; align-self: flex-start; }

/* v52 FIRST_TIME_RIGHT: no line or shadow under the bar, no fade laid over the hero photo, air between LT and EN */
.header { box-shadow: none; }
.hero-photo::after { content: none !important; display: none !important; }
.lang-switch { gap: 8px; }
.lang-switch a + a { border-left: 0; }

/* v52 desktop nav with air (rule 27.10: 28–44 px between items; the grey capsule packed them 3 px apart) */
.desktop-nav { gap: 32px; padding: 0; background: none; border-radius: 0; }
.desktop-nav a { padding: 11px 0; border-radius: 0; }
.desktop-nav a[aria-current="location"], .desktop-nav a[aria-current="location"]:hover { background: none; color: var(--wine); }
.desktop-nav a:hover { background: none; color: var(--wine); }
@media (max-width: 1200px) { .desktop-nav { gap: 24px; } }
/* v52: three equal bars in the menu button; the bar is solid (no see-through blur reading as a shadow line) */
.menu-toggle span:nth-child(2) { transition: opacity .3s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7.5px) rotate(-45deg); }
.header, .header.is-scrolled { background: #f6f7f5; backdrop-filter: none; -webkit-backdrop-filter: none; }
.header:has(.menu-toggle[aria-expanded="true"]) { background: #e6eae5; }

.mobile-nav { box-shadow: none; }

/* v54 header 28.10: contact button, logo shrinks when stuck, soft shade (never a line) */
.header-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 22px; background: var(--wine); color: #fff; font: 600 15px/1 'Archivo', Arial, sans-serif; letter-spacing: .01em; white-space: nowrap; border-radius: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transition: background .3s, transform .3s; }
.header-cta .icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.header-cta:hover { background: #5c0d22; }
.header-cta:hover .icon { transform: translate(2px, -2px); }
.header-end { gap: 24px; }
@media (max-width: 1200px) { .header-cta { display: none; } }
.header .brand img { transition: height .35s cubic-bezier(.65, 0, .35, 1); }
.header.is-scrolled { box-shadow: 0 16px 26px -14px rgba(26, 40, 38, .32); }
.header.is-scrolled .brand img { height: 42px; }
@media (max-width: 1100px) { .header.is-scrolled .brand img { height: 38px; } }
@media (max-width: 760px) { .header.is-scrolled .brand img { height: 34px; } }
@media (max-width: 600px) { .header.is-scrolled .brand img { height: 32px; } }
@media (max-width: 374px) { .header.is-scrolled .brand img { height: 29px; } }

/* v54 rental types: a rail of five photo panels, one open at a time (replaces the list + photo split) */
.rail { display: flex; gap: 6px; height: clamp(520px, 74svh, 680px); margin-top: 8px; }
.rail-panel { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--deep); transition: flex-grow .75s cubic-bezier(.65, 0, .35, 1); }
.rail-panel.is-open { flex-grow: 3.2; }
.rail-photo { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.rail-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .5s; filter: saturate(.78) brightness(.92); }
.rail-panel.is-open .rail-photo img { transform: scale(1); filter: none; }
.rail-foot { flex: none; min-height: 236px; padding: 18px 16px 22px; color: #fff; background: var(--deep); display: flex; flex-direction: column; gap: 10px; }
.rail-tab { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: #fff; max-width: 100%; }
.rail-tab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.rail-no { font: 500 13px/1 var(--mono, 'Red Hat Mono', monospace); letter-spacing: .08em; color: #b9c9c0; }
.rail-name { white-space: nowrap; font: 600 clamp(13px, 1.25vw, 19px)/1.1 'Archivo', Arial, sans-serif; font-stretch: 108%; letter-spacing: 0; }
.rail-panel:not(.is-open):hover .rail-photo img { filter: saturate(.95) brightness(1); }
.rail-more { display: none; }
.rail-panel.is-open .rail-name { display: none; }
.rail-panel.is-open .rail-more { display: block; animation: rail-in .6s .15s cubic-bezier(.16, 1, .3, 1) backwards; }
.rail-title { margin: 0 0 8px; font: 600 clamp(24px, 2.4vw, 34px)/1.1 'Archivo', Arial, sans-serif; font-stretch: 112%; letter-spacing: -.015em; color: #fff; }
.rail-more p { margin: 0 0 14px; max-width: 46ch; font-size: 15px; line-height: 1.6; color: #d4dfcf; }
.rail-more .text-button { color: #fff; min-height: 40px; }
@keyframes rail-in { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 900px) {
  .rail { flex-direction: column; height: auto; gap: 8px; }
  .rail-panel { flex: none; flex-direction: column-reverse; transition: none; }
  .rail-photo { flex: none; height: 0; }
  .rail-panel.is-open .rail-photo { height: min(62vw, 300px); }
  .rail-photo img { transition: none; }
  .rail-foot { min-height: 0; padding: 14px 18px 16px; }
  .rail-tab { flex-direction: row; align-items: center; gap: 14px; width: 100%; min-height: 44px; }
  .rail-name { align-self: center; font-size: 20px; }
  .rail-panel.is-open .rail-name { display: none; }
  .rail-panel.is-open .rail-tab { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .rail-panel, .rail-photo img { transition: none; } .rail-panel.is-open .rail-more { animation: none; } }

/* v54 revision 28–30.10: the first screen fills the viewport, no dead dark band under the strip, FAQ heading follows the list, certificates on the page ground */
@media (min-width: 901px) {
  .hero-photo { min-height: clamp(560px, calc(100svh - 120px), 860px); }
  .hero { align-items: stretch; }
}
.strip-controls { padding: 20px 0 56px; }
.faq-section > .section-heading { position: sticky; top: 130px; align-self: start; }
.certificates.shell { background: transparent; border-radius: 0; }
.certificates .section-heading > p, .certificate-card p { color: var(--muted); }
.certificate-card p { font-size: 15px; line-height: 1.5; }