/* Hallmark · shape: Feature Stack · genre: playful · theme: brand · redesign: full · draw: 82f38a · job: try
 * paper: oklch(99.4% 0.003 285) · accent: #1E00B9 (Taaly blue) · display: Baloo Bhaijaan 2 · body: Helvetica Neue · hero: Settled (text 6, the route 6) · nav: kept (slab bar, capped) · footer: kept (mast) · signature: the route, three real Taaly screens climbing from Taal to Werk
 * imagery: screenshots 9 (the repo's own captures) · axes: light/rounded-sans/chromatic-blue · posture: full-palette (field Taaly blue, signal yellow, seal mint, papers lilac/cream/mint) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the page argues "language first, then work" only through order; the route in the hero now makes that argument visibly, with the app's own screens */
/* Hallmark · dropped the hero people videos, cut-outs and doodles, the drawn audience and job-interview figures, the browser bar on the dashboard, the eyebrows (For municipalities, For newcomers…), the triad heading "Language. Participation. Work.", the four STEP cards that repeated the three pillars, the hero lead and the line "Trusted by 18 municipalities, funds and partners" · 58, 54, 19, 69, 47a and 80 name them; every fact they carried is still on the page */
/* Hallmark · reworded "Live · 45,000+ conversations" to "Live: 45,000+ conversations", "Live · 12 municipalities" to "Live in 12 municipalities", "(2025–26)" to "(2025/26)" · 63 and 19 name the dot and the dash */
/* Hallmark · waive 44c · the route panel is 590px against a 365px text block, centres 73px apart because the third phone climbs to the top of the panel · the rising steps are the signature, centring them would flatten the climb */
/* Hallmark · waive 49b · the wrapping links are the news headlines in the slider, full sentences that are the article titles, set as h4 links · a title is not a label and cannot be shortened on this page */
/* Hallmark · waive 72 · on /ar at 375 the In hun woorden rail scrolls right to left and the next Taaly quote waits at the screen edge until it snaps into the gutter · the Taaly quotes rail is cut by the edge on purpose, so readers see there is more */
/* Hallmark · waive 47b · two framed captures at most per row, each a real Taaly screen inside a rounded frame, no device chrome drawn · the phone screens are the product being sold */

/* Hallmark · dropped headings "Taal. Meedoen. Werk.", "Oefenen", "Verbinden", "Werk & groei" (the four STEP cards repeated the three chapters) and the figure labels as h3 (now p under each figure) · 19 and 69 name them; "Leer Nederlands door het te spreken" and "Regie op inburgering met realtime inzicht" kept as row lead-ins, "Word taalcoach" kept as the row's button */
/* Hallmark · dropped images: the hero cut-outs 1d0fd1_a71abae6…, 1d0fd1_dc284588…, the doodles 6c5da3c9.svg, 0b02f184.svg, the drawn figures 6e4fb875.svg, 18ef1587.svg, eecca2f5.svg, the two hero videos · 80 and 83 name them; the app's own screens replace them */
/* Hallmark · 80% minder administratie: source given by the owner (Taaly research with existing clients), now captioned under the figure */
/* Hallmark · dismissed 25 · .hm-figs p and .hm-msteps p are one-line captions under a figure or a step head, 28ch and up is allowed for them */
/* Hallmark · answered F19 · the fourth weight (600) is the shared header, footer and cookie pop-up in site.css, out of this homepage redesign */
/* Hallmark · answered F20 · the orphan is the cookie pop-up's third button (Voorkeuren), shared chrome */
/* Hallmark · hero-review: fix · 4 findings · 3 resolved 1 partial (the soft video-call capture upscaled 2.4x) */
/* Hallmark · finish-review: subagent · 7 findings · 6 resolved 1 partial (the partner logos differ in their own whitespace; Microsoft for Startups scaled, the rest wait for trimmed files) · gap: none; the video-call and AI-coach captures were upscaled (OpenCV EDSR and FSRCNN) since no originals exist, a fresh screenshot would still be sharper */

/* Homepage only (linked from src/pages/home.html). Shared chrome (header, footer, cookie pop-up) stays in site.css. */

:root {
  /* scale (Hallmark shared scale) */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.25rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 220ms;
  --container: 1440px; --hm-gutter: min(5vw, 72px); --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px;
  --z-raised: 10; --z-sticky: 200;
  --nav-clear: 128px;
  /* brand, from site.css :root (Taaly's own palette) */
  --color-paper: oklch(99.4% 0.003 285);
  --color-paper-2: #F0F0FE;
  --color-paper-3: #FEFCE8;
  --color-paper-4: #E7FFF7;
  --color-ink: oklch(21% 0.045 280);
  --color-ink-2: oklch(40% 0.03 280);
  --color-muted: oklch(48% 0.025 280);
  --color-rule: oklch(88% 0.015 280);
  --color-head: #23216E;
  --color-accent: #1E00B9;
  --color-accent-2: #2A10D6;
  --color-accent-ink: oklch(99% 0.004 285);
  --color-field: #1E00B9;
  --color-field-ink: oklch(99% 0.004 285);
  --color-field-ink-2: #D9D7FF;
  --color-field-rule: oklch(48% 0.2 275);
  --color-signal: #FDCA12;
  --color-signal-2: #FFD63A;
  --color-signal-ink: oklch(21% 0.045 280);
  --color-seal: #1EFFBC;
  --color-live: #0B6B4A;
  --color-shadow: oklch(30% 0.12 278 / 0.16);
  --color-outline: oklch(21% 0.045 280 / 0.08);
  --color-focus: #1E00B9;
  --color-focus-on-field: #FDCA12;
  --font-display: var(--font, "Baloo Bhaijaan 2", system-ui, sans-serif);
  --font-body: var(--font-text, "Helvetica Neue", Helvetica, Arial, sans-serif);
  --radius-card: 28px; --radius-shot: 24px; --radius-round: 999px;
  --shadow-route: 0 24px 40px -20px oklch(12% 0.08 278 / 0.55);
}

.hm {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
}

/* base, scoped to the page */
html, body { overflow-x: clip; }
.hm *, .hm *::before, .hm *::after { box-sizing: border-box; }
.hm :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.hm ::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
.hm h1, .hm h2, .hm h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-synthesis: none; color: var(--color-head); letter-spacing: -0.015em; line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.hm h2 { font-size: var(--text-section); max-width: 22ch; }
.hm h3 { font-size: var(--text-title); line-height: 1.2; max-width: 40ch; }
.hm p { margin: 0; text-wrap: pretty; }
.hm img { max-width: 100%; height: auto; display: block; }
:where(.hm) figure { margin: 0; }
:where(.hm) ol, :where(.hm) ul { margin: 0; padding: 0; }
.hm-c { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--hm-gutter); }
.hm-lead { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 46ch; }
.hm-aside { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 60ch; }
.hm-aside a, .hm-link { color: var(--color-accent); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: color var(--dur-micro) var(--ease-out); }
.hm-aside a:hover, .hm-link:hover { color: var(--color-ink); }
.hm .stores { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hm .stores a { display: block; border-radius: 10px; transition: transform var(--dur-micro) var(--ease-out); }
.hm .stores a:hover { transform: translateY(-1px); }
.hm .stores a:active { transform: translateY(1px); }
.hm .stores img { height: 52px; width: auto; }

/* controls: one recipe, swapped per field */
.hm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 2px solid var(--color-accent); border-radius: var(--radius-round); background: transparent; color: var(--color-accent); font: 700 var(--text-md)/1 var(--font-display); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.hm-btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.hm-btn:active { transform: translateY(1px); }
.hm-btn:disabled, .hm-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.hm-btn-signal { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); }
.hm-btn-signal:hover { background: var(--color-signal-2); border-color: var(--color-signal-2); color: var(--color-signal-ink); }
.hm-muni .hm-btn-quiet { border-color: var(--color-field-ink-2); color: var(--color-field-ink); }
.hm-muni .hm-btn-quiet:hover { background: var(--color-field-ink); color: var(--color-field); }
.hm-muni :focus-visible { outline-color: var(--color-focus-on-field); }

/* frames for the app's own screens */
.hm-shot { position: relative; overflow: hidden; border-radius: var(--radius-shot); background: var(--color-paper-2); box-shadow: 0 18px 40px -18px var(--color-shadow); }
.hm-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; outline: 1px solid var(--color-outline); outline-offset: -1px; pointer-events: none; z-index: 2; }
.hm-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; z-index: 1; }

/* ============ HERO ============ */
.hm-hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hm-hero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; min-height: min(calc(100svh - 104px - var(--space-2xl) - var(--space-3xl)), 720px); }
.hm-hero h1 { display: flex; flex-direction: column; gap: var(--space-xs); max-width: none; margin-block-end: var(--space-lg); }
.hm-h1a { max-width: 22ch; } .hm-h1b { max-width: 14ch; }
.hm-h1a { font-size: clamp(2rem, 2.6vw + 0.6rem, 3rem); line-height: 1.08; }
.hm-h1b { font-size: clamp(2.75rem, 4.4vw + 0.8rem, 4.75rem); line-height: 1; }
.hm-hero .hm-lead { color: var(--color-ink); margin-block-end: var(--space-xl); }
.hm-hero .hm-aside { margin-block-start: var(--space-lg); }

.hm-route { list-style: none; display: flex; align-items: flex-end; justify-content: center; padding: var(--space-xl) var(--space-lg) var(--space-lg); border-radius: 40px; background: var(--color-field); }
.hm-route li { flex: 0 1 200px; min-width: 0; position: relative; }
.hm-route li + li { margin-inline-start: var(--space-sm); }
.hm-route li:nth-child(1) { z-index: 1; padding-block-end: 0; }
.hm-route li:nth-child(2) { z-index: 2; padding-block-end: 56px; }
.hm-route li:nth-child(3) { z-index: 3; padding-block-end: 112px; }
.hm-route .hm-shot { aspect-ratio: 1 / 2.06; border-radius: 22px; box-shadow: var(--shadow-route); background: var(--color-paper); }
.hm-route figcaption { margin-block-start: var(--space-md); font: 800 var(--text-title)/1.1 var(--font-display); color: var(--color-field-ink); text-align: center; }

/* ============ THE APP: sticky chapters ============ */
.hm-stack { padding-block: var(--section-gap-s) var(--section-gap); }
.hm-stack-head { display: grid; gap: var(--space-md); margin-block-end: var(--space-2xl); }
.hm-chapters { list-style: none; counter-reset: ch; display: grid; gap: var(--space-3xl); }
.hm-chapter { counter-increment: ch; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; padding-block-start: var(--space-2xl); border-block-start: 1px solid var(--color-rule); }
.hm-pane { position: sticky; top: var(--nav-clear); align-self: start; z-index: var(--z-raised); display: grid; gap: var(--space-md); }
.hm-pane h3::before { content: counter(ch); margin-inline-end: 0.3em; color: var(--color-seal); -webkit-text-stroke: 2px var(--color-accent); paint-order: stroke fill; }
.hm-pane h3 { font-size: var(--text-section); line-height: 1; }
.hm-pane ul { list-style: none; display: grid; gap: var(--space-xs); }
.hm-pane li { position: relative; padding-inline-start: 22px; color: var(--color-ink-2); line-height: 1.5; max-width: 44ch; }
.hm-pane li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 3px; background: var(--color-accent); }
.hm-state { font-weight: 700; color: var(--color-live); font-size: var(--text-sm); }
.hm-pane .hm-link { justify-self: start; }
.hm-shots { display: flex; gap: var(--gap-columns); justify-content: flex-start; }
.hm-shots .hm-shot { flex: 0 1 300px; aspect-ratio: 1 / 2.05; }
.hm-shot-coach { background: var(--color-paper-4); }
.hm-shot-coach > img { object-fit: contain; object-position: 50% 50%; padding-block: var(--space-md); }
.hm-shot-photo > img { object-position: 50% 50%; }
.hm-shot-crop { aspect-ratio: 1200 / 1560 !important; flex-basis: 480px !important; background: var(--color-ink); }
.hm-shot-crop > img { object-position: 50% 96%; }

/* ============ IMPACT ============ */
.hm-impact { background: var(--color-paper-3); padding-block: var(--section-gap-s); }
.hm-impact h2 { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 24ch; font-size: var(--text-display-s); }
.hm-h2b { font-size: 0.66em; line-height: 1.15; }
.hm-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: var(--space-2xl); }
.hm-figs > div { padding-inline: var(--space-lg); border-inline-start: 1px solid var(--color-rule); display: grid; gap: var(--space-sm); align-content: start; }
.hm-figs > :first-child { padding-inline-start: 0; border-inline-start: 0; }
.hm-figs b { font: 800 var(--text-display-s)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.hm-figs p { color: var(--color-ink-2); max-width: 30ch; }
.hm .hm-src { margin-block-start: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); max-width: 90ch; }
.hm-quotes-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-block: var(--section-gap-s) var(--space-xl); }
.hm-rail-nav { display: flex; gap: var(--space-xs); }
.hm-arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--color-head); border-radius: 50%; background: transparent; color: var(--color-head); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.hm-arrow:hover:not(:disabled) { background: var(--color-head); color: var(--color-paper-3); }
.hm-arrow:active:not(:disabled) { transform: translateY(1px); }
.hm-arrow:disabled { opacity: 0.55; cursor: not-allowed; }
[dir="rtl"] .hm-arrow svg { transform: scaleX(-1); }
html:not(.js) .hm-rail-nav { display: none; }
.hm .hm-quotes-h { margin: 0; font-size: var(--text-title); }
.hm-rail { display: flex; gap: var(--space-2xl); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--hm-gutter), (100% - var(--container)) / 2 + var(--hm-gutter)); padding-inline: max(var(--hm-gutter), (100% - var(--container)) / 2 + var(--hm-gutter)); padding-block-end: var(--space-lg); scrollbar-color: var(--color-muted) transparent; }
.hm-q { flex: 0 0 min(440px, 82vw); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); padding-block-start: var(--space-lg); border-block-start: 2px solid var(--color-head); }
.hm-q blockquote { margin: 0; font: 700 1.3125rem/1.4 var(--font-display); color: var(--color-ink); text-indent: -0.42em; }
.hm-q figcaption { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.hm-q figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hm-q figcaption > span { display: grid; gap: var(--space-3xs); }
.hm-q figcaption b { color: var(--color-ink); font-size: var(--text-md); }

/* ============ FOR MUNICIPALITIES ============ */
.hm-muni { background: var(--color-field); color: var(--color-field-ink); padding-block: var(--section-gap-s); }
.hm-muni h2, .hm-muni h3 { color: var(--color-field-ink); }
.hm-muni .hm-lead { color: var(--color-field-ink-2); max-width: 58ch; }
.hm-muni-head { display: grid; gap: var(--space-md); }
.hm-msteps { list-style: none; counter-reset: ms; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-block: var(--space-2xl); }
.hm-msteps li { counter-increment: ms; display: grid; gap: var(--space-sm); align-content: start; padding-block-start: var(--space-lg); border-block-start: 1px solid var(--color-field-rule); }
.hm-msteps h3::before { content: counter(ms) ". "; color: var(--color-signal); }
.hm-msteps p { color: var(--color-field-ink-2); max-width: 36ch; }
.hm-muni-show { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: end; }
.hm-dash { aspect-ratio: 2784 / 1504; border-radius: 20px; background: var(--color-paper); }
.hm-muni-side { display: flex; align-items: flex-end; gap: var(--space-lg); }
.hm-hours { flex: 0 0 auto; width: min(100%, 220px); aspect-ratio: 596 / 1319; border-radius: 20px; background: var(--color-paper); }
.hm-fig { display: grid; gap: var(--space-2xs); padding-block-end: var(--space-xs); }
.hm-fig b { font: 800 var(--text-display-s)/1 var(--font-display); color: var(--color-signal); font-variant-numeric: tabular-nums; }
.hm-fig span { color: var(--color-field-ink-2); font-size: var(--text-sm); }
.hm-fig small { color: var(--color-field-ink-2); font-size: var(--text-sm); opacity: 0.85; max-width: 24ch; }
.hm-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-2xl); }

/* ============ WHO IT IS FOR ============ */
.hm-who { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.hm-who-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.hm-who-head { display: grid; gap: var(--space-md); position: sticky; top: var(--nav-clear); }
.hm-rows { list-style: none; }
.hm-rows > li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) auto; gap: var(--gap-columns); align-items: center; padding-block: var(--space-xl); border-block-end: 1px solid var(--color-rule); }
.hm-rows > li:first-child { padding-block-start: 0; }
.hm-rows > li > div { display: grid; gap: var(--space-2xs); }
.hm-row-lead { font-weight: 700; color: var(--color-ink); }
.hm-rows p:not(.hm-row-lead) { color: var(--color-ink-2); }

/* ============ PROOF ============ */
.hm-proof { padding-block: var(--section-gap-s) var(--section-gap); }
.hm-figs-reach { margin-block-start: 0; }
.hm .hm-partners-h { margin-block-start: var(--space-3xl); }
.hm-logos { margin-block-start: var(--space-2xl); }
.hm-logos .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--color-ink) 6%, var(--color-ink) 94%, transparent); }
.hm-logos .marquee-track { display: flex; gap: var(--space-3xl); width: max-content; animation: hm-marquee 48s linear infinite; }
.hm-logos .marquee img { width: 140px; height: 56px; object-fit: contain; filter: grayscale(1); opacity: 0.85; }
.hm-logos .marquee img[src*="39a21a6490ee"] { transform: scale(1.7); }
[data-loop]:not(.is-running) .marquee-track { animation-play-state: paused; }
@keyframes hm-marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .hm-logos .marquee-track { animation-name: hm-marquee-rtl; }
@keyframes hm-marquee-rtl { to { transform: translateX(50%); } }
.hm-logos .hm-c { display: flex; justify-content: flex-end; margin-block-start: var(--space-sm); }
.hm-loop-btn { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-round); background: transparent; color: var(--color-ink-2); font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.hm-loop-btn:hover { background: var(--color-paper-2); }
.hm-loop-btn:active { transform: translateY(1px); }
.hm-when-held, .hm-logos.is-held .hm-when-run { display: none; }
.hm-logos.is-held .hm-when-held { display: inline; }
html:not(.js) .hm-loop-btn { display: none; }
.hm-news { margin-block-start: var(--space-3xl); }
.hm .art-head { margin-block-end: var(--space-lg); }
.hm .art-title { font-size: var(--text-section); color: var(--color-head); }
.hm .art { background: var(--color-paper-2); }
.hm .art:hover .art-img img { transform: none; }
.hm .art-img img { transition: none; }
.hm .art-img img { height: 100%; }
.hm .art-btn svg, .hm .art-all svg { display: none; }
.hm .art-dot { transition: background-color var(--dur-short) var(--ease-out); }
.hm .art-arrow:focus-visible, .hm .art-dot:focus-visible, .hm .art-track:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.hm .art-btn { min-height: 48px; white-space: nowrap; }
.hm .art-meta { margin-block-end: var(--space-md); }
.hm .art-h { margin-block: 0 var(--space-xs); }

/* ============ FAQ ============ */
.hm-faq { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.hm-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.hm-faq-in > h2 { position: sticky; top: var(--nav-clear); }
.hm .faq { max-width: none; margin: 0; }
.hm .faq-item { border-block-end: 1px solid var(--color-rule); }
.hm .faq-q { min-height: 48px; padding-block: var(--space-sm); padding-inline: var(--space-xs); color: var(--color-ink); text-align: start; cursor: pointer; }
.hm .faq-q h3 { font: 700 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); max-width: none; }
.hm .faq-q .chev { color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.hm .faq-a { transition: none; }
.hm .faq-a p { color: var(--color-ink-2); max-width: 68ch; }
.hm-faq-more { margin-block-start: var(--space-xl); }

/* ============ CLOSE ============ */
.hm-close { background: var(--color-paper-4); padding-block: var(--section-gap-s) 0; overflow: hidden; }
.hm-close-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; }
.hm-close-text { display: grid; gap: var(--space-lg); justify-items: start; padding-block-end: var(--section-gap-s); }
.hm-close h2 { display: flex; flex-direction: column; font-size: var(--text-display-s); max-width: 16ch; }
.hm-close .hm-h2b { font-size: 0.7em; }
.hm-close-art { position: relative; align-self: end; height: clamp(320px, 38vw, 560px); }
.hm-close-art img { position: absolute; bottom: 0; height: 100%; width: auto; max-width: none; }
.hm-ph1 { inset-inline-end: 0; }
.hm-ph2 { inset-inline-end: 0; }

/* ============ under 60rem: everything stacks in reading order ============ */
@media (max-width: 60rem) {
  .hm { --section-gap-s: 80px; --section-gap: 96px; --gap-columns: 24px; }
  .hm-hero-in, .hm-chapter, .hm-who-in, .hm-faq-in, .hm-close-in, .hm-muni-show { grid-template-columns: minmax(0, 1fr); }
  .hm-hero-in { min-height: 0; gap: 0; }
  .hm-hero-text { display: contents; }
  .hm-hero h1 { order: 1; }
  .hm-route { order: 2; margin-block-end: var(--space-lg); }
  .hm-hero .hm-lead { order: 3; margin-block-end: var(--space-lg); }
  .hm-hero .stores { order: 4; }
  .hm-hero .hm-aside { order: 5; }
  .hm-route { max-width: 520px; width: 100%; margin-inline: auto; }
  .hm-pane, .hm-who-head, .hm-faq-in > h2 { position: static; }
  .hm-msteps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hm-msteps li { padding-block: var(--space-lg); }
  .hm-rows > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); justify-items: start; }
  .hm-close-text { padding-block-end: 0; }
}
@media (max-width: 40rem) {
  .hm { --section-gap-s: 64px; --section-gap: 72px; --gap-columns: 16px; }
  .hm-hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hm-route { padding: var(--space-lg) var(--space-sm) var(--space-md); border-radius: 28px; }
  .hm-route li + li { margin-inline-start: var(--space-xs); }
  .hm-route figcaption { font-size: var(--text-md); margin-block-start: var(--space-xs); }
  .hm-route li:nth-child(2) { padding-block-end: 32px; }
  .hm-route li:nth-child(3) { padding-block-end: 64px; }
  .hm-shots { flex-direction: column; align-items: stretch; }
  .hm-shots .hm-shot { flex: 0 0 auto; width: min(100%, 300px); }
  .hm-shot-crop { width: 100% !important; }
  .hm-figs { grid-template-columns: minmax(0, 1fr); }
  .hm-figs > div { padding: var(--space-md) 0; border-inline-start: 0; border-block-start: 1px solid var(--color-rule); }
  .hm-figs > :first-child { border-block-start: 0; padding-block-start: 0; }
  .hm-muni-side { gap: var(--space-md); }
  .hm-hours { width: 150px; }
  .hm .stores img { height: 46px; }
  .hm-close-art { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm *, .hm *::before, .hm *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .hm-logos .marquee-track { animation: none; }
  .hm-loop-btn { display: none; }
}
[dir="rtl"] .hm-q blockquote { text-indent: 0; }