/**
 * Shell styles of the Casa Limonia demo (fork content layer): navigation,
 * page heads, split blocks, forms, footer, legal pages. Sections themselves use
 * the framework layer (.mv-section, .mv-card, .mv-button, .mv-tabs,
 * .mv-hero-video) and the framework candidates in candidates.css. Every colour
 * is a var(--...), no literals.
 */

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); }
img { max-width: 100%; height: auto; display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 12px 18px;
  border-radius: 8px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
h1, h2, h3 { font-family: var(--font-heading); color: var(--text); line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin: 0 0 16px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 14px; }
h3 { font-size: 1.2rem; margin: 0 0 8px; }
p { line-height: 1.65; color: var(--text-2); }
.mv-section p { color: var(--_mv-muted); }
.eyebrow {
  display: inline-block; margin: 0 0 12px; font-size: .8125rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text);
}
.mv-section .eyebrow { color: var(--_mv-link); }
.lead { font-size: 1.12rem; max-width: 60ch; text-wrap: pretty; }
.mv-section__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section-head { max-width: 46rem; margin-bottom: 2.25rem; }
.section-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* --- nav ------------------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.wrap-nav { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.nav-brand svg { width: 34px; height: 34px; flex: none; color: var(--accent); }
.nav-brand b { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; letter-spacing: .01em; }
.nav-menu { display: flex; align-items: center; gap: 26px; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: var(--text-2); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 10px 0; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent-text); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* Seven links with the Start link (Olli 2026-10-16): keep each on one line, tighter just above the menu breakpoint. */
.nav-links a { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1180px) { .nav-links { gap: 10px; } .nav-links a { font-size: .875rem; } .nav-cta { padding: 10px 14px; font-size: .9375rem; } }
.nav-lang { display: flex; gap: 6px; }
.nav-lang a { color: var(--text-3); text-decoration: none; font-weight: 700; font-size: .82rem; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radius-sm); min-height: 36px; display: inline-flex; align-items: center; }
.nav-lang a.on { background: var(--accent-soft); color: var(--accent-text); }
.nav-cta { padding: 10px 18px; font-size: 1rem; border-radius: 999px; }
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; width: 24px; background: var(--text); border-radius: 2px; }
@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .nav-menu { position: fixed; inset: 72px 0 0 0; background: var(--surface); flex-direction: column; align-items: stretch; padding: 24px; gap: 20px; transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; overflow-y: auto; }
  .nav-menu.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s ease, transform .2s ease; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links a { min-height: 48px; display: flex; align-items: center; font-size: 1.05rem; }
  .nav-cta { text-align: center; justify-content: center; }
}

/* --- reveal (no-JS baseline: visible) -------------------------------------- */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal-on [data-reveal].in { opacity: 1; transform: none; }

/* --- media + AI badge ------------------------------------------------------- */
.media { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--panel-a); box-shadow: var(--shadow-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media[data-ratio="4/5"] { aspect-ratio: 4 / 5; }
.media[data-ratio="3/2"] { aspect-ratio: 3 / 2; }
.media[data-ratio="16/10"] { aspect-ratio: 16 / 10; }
/* AI mark (Olli 2026-10-16): one subtle pill with the madevisible AI icon (ai-badge-spec v2.1.0),
   mixed case and about 12 % smaller than before; the hero uses 13px instead of the core 15px. */
.ai-badge {
  position: absolute; bottom: 10px; left: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--brand-ink) 72%, transparent); color: var(--brand-surface);
  font-size: .71rem; font-weight: 600; letter-spacing: .01em; text-transform: none;
  padding: 3px 9px 3px 4px; border-radius: 999px; line-height: 1.3; white-space: nowrap;
}
.ai-badge::before {
  content: ""; width: 1.3em; height: 1.3em; flex: 0 0 auto;
  background: url("../img/brand/ai-mark.svg") center / contain no-repeat;
}
.mv-hero-video .mv-hero-video__media > .ai-badge { font-size: .8125rem; }
/* The pinned scroll stage sits under the sticky nav (73px), so a bottom badge was cut off on load:
   top left, just below the nav, is visible both before and while the hero is pinned. */
.mv-hero-video[data-layout="scroll"] .mv-hero-video__media > .ai-badge { top: 86px; bottom: auto; left: 12px; }
.ai-disclosure { font-size: .95rem; color: var(--text-3); }

/* --- scroll hero: lighter scrim so the table stays visible, copy sits low --- */
.mv-hero-video[data-layout="scroll"] .mv-hero-video__media::after {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--mv-hero-video-scrim) 88%, transparent) 0%,
    color-mix(in srgb, var(--mv-hero-video-scrim) 55%, transparent) 38%,
    color-mix(in srgb, var(--mv-hero-video-scrim) 10%, transparent) 72%,
    color-mix(in srgb, var(--mv-hero-video-scrim) 30%, transparent) 100%);
}
.mv-hero-video .mv-hero-video__headline { max-width: 15ch; }
.mv-hero-video .mv-hero-video__caption { position: relative; inset: auto; z-index: 1; box-sizing: border-box; width: auto; max-width: none; margin: 0 max(24px, calc((100% - var(--maxw)) / 2 + 24px)); padding: 0 0 44px; font-size: .95rem; color: var(--mv-hero-video-muted); }
/* 44px bottom keeps the caption above the .ai-badge (bottom 10px + 25px tall); at 16px they overlapped on phones. */
/* The badge is the visible AI mark; the caption is kept for screen readers only (build-shell.mjs). */
.mv-hero-video .mv-hero-video__caption.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hero-scroll-hint {
  position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%);
  margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mv-hero-video-muted); display: none;
}
.mvx-beats-on .hero-scroll-hint { display: block; opacity: calc(1 - var(--mvx-p, 0) * 12); }
/* Phones: AI badge and AI caption already fill the bottom of the hero, and the hint is decorative
   (aria-hidden), so it is left out there instead of overlapping either of them. */
@media (max-width: 600px) { .mvx-beats-on .hero-scroll-hint { display: none; } }
.mvx-beats__cta {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 26px; border-radius: 999px;
  background: var(--mv-hero-video-action-bg); color: var(--mv-hero-video-action-text);
  font-weight: 700; text-decoration: none;
}
.mvx-beats__cta:hover { background: var(--mv-hero-video-action-hover); }
.mvx-beats__cta:focus-visible { outline: 3px solid var(--mv-hero-video-text); outline-offset: 3px; }

/* --- page head (sub pages) -------------------------------------------------- */
.page-head { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.page-head .lead { margin-bottom: 0; }
@media (max-width: 860px) { .page-head { grid-template-columns: minmax(0, 1fr); } }

/* --- split block ------------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split[data-flip] > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } .split[data-flip] > :first-child { order: 0; } }
.facts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.facts li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; align-items: start; }
.facts b { display: block; color: var(--_mv-text, var(--text)); font-size: 1.02rem; margin-bottom: 2px; }
.facts span { color: var(--_mv-muted, var(--text-2)); line-height: 1.55; }
.facts svg { width: 2.4rem; height: 2.4rem; padding: .5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }

/* --- cards grid (framework .mv-card) ---------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; }
.card-grid .mv-card { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.card-grid .mv-card h3 { margin: 0; }
.card-grid .mv-card p { margin: 0; color: var(--_mv-card-muted, inherit); }
.card-price { margin-top: auto !important; padding-top: .6rem; font-weight: 700; font-size: 1.1rem; }
.mv-card .media { box-shadow: none; margin: -1.5rem -1.5rem .75rem; border-radius: 0; }

/* --- reviews ---------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.quotes blockquote { margin: 0 0 .9rem; font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.5; }
.quotes figcaption { font-size: .95rem; font-weight: 600; }
.demo-label { font-size: .95rem; margin-top: 1.25rem; }

/* --- menu page tabs (framework .mv-tabs) ------------------------------------ */
.menu-note { margin-top: 2rem; font-size: 1rem; }
.mv-tabs__panel { padding-top: 1.75rem; }
.menu-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }

/* --- info / visit ----------------------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.info-grid .mv-card { padding: 1.5rem; }
.map-art { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.map-art svg { width: 100%; height: 100%; display: block; }
.map-art figcaption { position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: .95rem; font-weight: 600; }

/* --- forms (demo only, see forms-demo.js) ----------------------------------- */
.form-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: minmax(0, 1fr); } }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-1); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 18px; min-width: 0; }
.form-row label, .form-row legend { font-weight: 600; font-size: 1rem; color: var(--text); }
.form-row .hint { font-size: .95rem; color: var(--text-3); }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 0 18px; }
@media (max-width: 640px) { .form-grid-2, .form-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.form-card input, .form-card select, .form-card textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md); padding: 12px 14px; min-height: 48px; width: 100%;
  box-sizing: border-box; min-width: 0; max-width: 100%;
}
/* Date and time fields on iPhone (Olli 2026-10-16): Safari gives them their own intrinsic width and
   they stuck out of the form. Drop the native look so the field takes the column width like the others
   (the picker still opens), and let the value sit left like in the other fields. */
.form-card input[type="date"], .form-card input[type="time"] { -webkit-appearance: none; appearance: none; display: block; text-align: left; }
.form-card input[type="date"]::-webkit-date-and-time-value, .form-card input[type="time"]::-webkit-date-and-time-value { text-align: left; min-width: 0; }
.form-card select { appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.form-card textarea { min-height: 120px; resize: vertical; }
.form-card :is(input, select, textarea):focus-visible { outline: 3px solid var(--accent-text); outline-offset: 1px; border-color: var(--accent-text); }
.form-submit { width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; border-radius: 999px; }
.preview-note { font-size: .95rem; color: var(--text-3); margin: 14px 0 0; }
.demo-banner { display: block; margin: 18px 0 0; padding: 14px 18px; border-radius: var(--radius-md); background: var(--success-bg); color: var(--success); border: 1px solid var(--success); font-size: 1rem; font-weight: 600; }
.demo-banner:empty { padding: 0; border: 0; margin: 0; }
.demo-notice { margin: 0 0 28px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--info-bg); color: var(--info); border: 1px solid var(--line-soft); font-size: 1rem; }
.side-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .9rem; }
.side-list li { padding-left: 1.4rem; position: relative; color: var(--text-2); line-height: 1.55; text-wrap: pretty; }
.side-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); }

/* --- footer ----------------------------------------------------------------- */
.site-footer { background: var(--mv-inverse-bg); color: var(--mv-inverse-text); }
.footer-in { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 0; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-col { display: grid; gap: 8px; align-content: start; }
.footer-col p, .footer-col a, .footer-bottom p { color: var(--mv-inverse-muted); font-size: .95rem; margin: 0; }
.footer-col a { text-decoration: none; padding: 4px 0; min-height: 32px; display: inline-flex; align-items: center; }
.footer-col a:hover { color: var(--mv-inverse-link); text-decoration: underline; }
.footer-col .nav-brand { color: var(--mv-inverse-text); margin-bottom: 6px; }
.footer-col .nav-brand svg { color: var(--mv-inverse-link); }
.footer-heading { font-weight: 700; font-size: .8125rem !important; letter-spacing: .06em; text-transform: uppercase; color: var(--mv-inverse-text) !important; margin: 0 0 4px !important; }
.footer-bottom { max-width: var(--maxw); margin: 40px auto 0; border-top: 1px solid var(--mv-inverse-border); padding: 18px 24px 28px; display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; }
.footer-bottom p { font-size: .95rem; max-width: 62ch; flex: 1 1 320px; }
.footer-bottom a { color: var(--mv-inverse-link); }
.site-footer a:focus-visible { outline: 3px solid var(--mv-inverse-focus); outline-offset: 2px; }
@media (max-width: 860px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }

/* --- legal pages ------------------------------------------------------------ */
.legal-wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }
.legal-wrap .legal h1 { margin-bottom: 24px; }
.legal-wrap .legal h2 { margin-top: 32px; font-size: 1.35rem; }
.legal-wrap a { color: var(--accent-text); }

/* --- small helpers (replace inline styles) ---------------------------------- */
.quote-card { padding: 1.5rem; }
.quote-card figure { margin: 0; }
.side-hours { margin-top: 2rem; }
.card-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.side-list--inverse { max-width: 44rem; }
.side-list--inverse li { color: inherit; }
.card-title { font-size: 1.3rem; }
.map-art { margin: 0; }
.mvx-bento { grid-auto-flow: dense; }
/* Pill actions everywhere: the core hero action follows --radius (framework candidate:
   a --mv-hero-video-action-radius token), so the fork rounds it here. */
.mv-hero-video .mv-hero-video__cta { border-radius: 999px; }

/* No single-word last line (house rule, measured at 1920/1440/1280/834/393):
   headings balance, running text and narrow item names use "pretty", which keeps
   at least two words on the last line. Legal headings are long single nouns in
   German, so they get a calmer scale. */
p, li, .mvx-pricelist__name, .legal h2, .legal h3 { text-wrap: pretty; }
.legal-wrap .legal h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.legal-wrap .legal h2 { font-size: clamp(1.2rem, 2.4vw, 1.35rem); }

/* Phones (Olli 2026-10-16): the AI mark is smaller still and always sits bottom left in the image.
   In the scroll hero it only comes into view once the stage pins, i.e. when you start scrolling.
   On the small gallery tiles only the AI icon remains (the caption owns the bottom right). */
@media (max-width: 600px) {
  .ai-badge { left: 8px; bottom: 8px; font-size: .625rem; font-weight: 500; padding: 2px 7px 2px 3px; gap: 4px; }
  .mv-hero-video[data-layout="scroll"] .mv-hero-video__media > .ai-badge,
  .mv-hero-video .mv-hero-video__media > .ai-badge { top: auto; bottom: 8px; left: 8px; font-size: .625rem; }
  .mvx-bento__item .ai-badge { top: auto; bottom: .6rem; left: .6rem; font-size: 0; gap: 0; padding: 2px; }
  .mvx-bento__item .ai-badge::before { width: 15px; height: 15px; }
  .mvx-bento__caption { max-width: calc(100% - 3rem); }
}
/* Phones: hero copy in the middle of the screen instead of at the very bottom (Olli 2026-10-16). */
@media (max-width: 600px) {
  .mv-hero-video[data-layout="scroll"] .mv-hero-video__stage { align-items: center; }
  .mv-hero-video[data-layout="scroll"] .mv-hero-video__media::after {
    background: linear-gradient(to top,
      color-mix(in srgb, var(--mv-hero-video-scrim) 82%, transparent) 0%,
      color-mix(in srgb, var(--mv-hero-video-scrim) 62%, transparent) 50%,
      color-mix(in srgb, var(--mv-hero-video-scrim) 35%, transparent) 100%);
  }
}

/* --- slim footer and the closing booking question (Olli 2026-10-16) -------------- */
.footer-cols--slim { grid-template-columns: 1.6fr 1fr 1fr; }
.footer-bottom--slim { align-items: center; padding-top: 16px; padding-bottom: 22px; }
.footer-bottom--slim p { font-size: .875rem; }
.footer-bottom--slim .footer-legal { flex: 0 0 auto; max-width: none; }
.footer-legal a { color: var(--mv-inverse-muted); text-decoration: none; display: inline-block; padding: 6px 2px; }
.footer-legal a:hover { color: var(--mv-inverse-link); text-decoration: underline; }
@media (max-width: 860px) { .footer-cols--slim { grid-template-columns: 1fr 1fr; } .footer-cols--slim > .footer-col:first-child { grid-column: 1 / -1; } }
.cta-ask__inner { display: grid; justify-items: center; text-align: center; }
.cta-ask__inner h2 { max-width: 22ch; margin-bottom: .5rem; text-wrap: balance; }
.cta-ask__inner .lead { margin: 0 auto; }
.cta-ask__inner .section-actions { justify-content: center; }

/* Buttons with an icon (calendar for booking, arrow for other pages). */
.btn-icon { display: inline-flex; align-items: center; gap: .55em; }
.btn-icon svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

/* --- phones (Olli 2026-10-16) ----------------------------------------------------- */
@media (max-width: 600px) {
  /* Less side margin: content 20px from the edge instead of 40px (the form felt squeezed). */
  .mv-section__inner { padding-inline: 4px; }
  .form-card { padding: 18px 16px; }
}
@media (max-width: 720px) {
  /* Gallery tiles: one column, every picture in its own 4:3 frame, nothing cut to a sliver. */
  .mvx-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .mvx-bento .mvx-bento__item,
  .mvx-bento .mvx-bento__item[data-size] { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
}

/* --- scroll hero under the sticky nav (Olli 2026-10-16, phone) ----------------------
   The nav is sticky and 73px high. The core stage is exactly one screen high and pins at
   top 0, so on load its bottom 73px lay below the screen and, once pinned, the nav covered the
   top 73px of the picture. Fix without touching the core script (its scroll maths assumes the
   stage pins at top 0): pull the section up under the nav and start the picture box below the
   nav, so the picture fills exactly the visible part of the screen. */
:root { --nav-h: 73px; } /* = .wrap-nav min-height 72px + 1px border; the mobile menu inset (72px) is coupled to it */
.mv-hero-video[data-layout="scroll"] { margin-top: calc(-1 * var(--nav-h)); }
.mv-hero-video[data-layout="scroll"] .mv-hero-video__media { top: var(--nav-h); }
.mv-hero-video[data-layout="scroll"] .mv-hero-video__stage { padding-top: var(--nav-h); }
/* The stage padding replaces most of the core top padding of the copy block, so small phones keep the scroll hero (the copy must fit one screen). */
.mv-hero-video[data-layout="scroll"] .mv-hero-video__inner { padding-top: 24px; }
@media (max-width: 600px) { .mv-hero-video[data-layout="scroll"] .mv-hero-video__inner { padding-bottom: 56px; } }
/* Landscape and tablets: the badge sits at top 12px in the media box (85px), so the copy starts below it. */
@media (min-width: 601px) { .mv-hero-video[data-layout="scroll"] .mv-hero-video__inner { padding-top: 48px; } }
@media (min-width: 601px) { .mv-hero-video[data-layout="scroll"] .mv-hero-video__media > .ai-badge { top: 12px; } }

/* Phones (Olli 2026-10-16): the caption steps sit higher, their top edge at about 47 % of the
   screen (first 57 %, moved up 10 points by Olli 2026-10-16), so they read well while
   scrolling. The last step carries its button, which moves up with it. */
@media (max-width: 600px) {
  .mvx-beats__step { top: 47%; bottom: auto; }
}

/* --- curtain at the end of the scroll hero (Olli 2026-10-16) ----------------------
   After the last frame the light section below slides over the picture instead of the picture
   scrolling away as a block: the stage is held in place (translated down by exactly what the page
   scrolls) while the hero leaves the screen, and the next section lies above it. Pure CSS with a
   scroll-driven animation on the hero's own view timeline, so there is no scroll listener and no
   jitter; browsers without animation-timeline keep the plain scroll-away. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Own stacking context for the whole hero: Safari paints an animated sticky layer above later siblings otherwise. */
    .block--hero-video:has(> .mv-hero-video[data-scrub="on"]) { position: relative; z-index: 0; isolation: isolate; }
    .block--hero-video:has(> .mv-hero-video[data-scrub="on"]) + .mv-section { position: relative; z-index: 2; transform: translateZ(0); }
    .mv-hero-video[data-layout="scroll"][data-scrub="on"] { overflow: visible; view-timeline: --mvx-hero block; }
    .mv-hero-video[data-layout="scroll"][data-scrub="on"] .mv-hero-video__stage {
      animation: mvx-hold linear both;
      animation-timeline: --mvx-hero;
      /* Starts when the stage lets go (hero bottom at 100lvh). With the browser bar collapsed that is exit 0%; with it
         expanded (scrollport = svh) it is earlier, so the curtain does not start late and the picture does not sink. */
      animation-range: exit calc(100% - 100lvh) exit 100%;
    }
    /* A focused control in the hero (Shift+Tab back from the page) must not sit under the next section. */
    .mv-hero-video[data-layout="scroll"][data-scrub="on"]:focus-within .mv-hero-video__stage { animation: none; }
  }
}
@keyframes mvx-hold { to { transform: translateY(100%); } }

@media (prefers-reduced-motion: no-preference) {
  /* The stage is as tall as the LARGE viewport (browser bars collapsed), not the small one the core
     uses: on an iPhone the Safari bar collapses as soon as you scroll, and a 100svh stage then left a
     dark strip at the bottom and let the curtain start too early (screen recording, Olli 2026-10-16).
     With the bar collapsed the scrollport is exactly as tall as the stage, so the curtain starts the
     moment the stage lets go. Desktop: lvh equals vh, nothing changes. */
  .mv-hero-video[data-layout="scroll"][data-scrub="on"] .mv-hero-video__stage { height: 100lvh; }
}