/* Hallmark · shape: Split Studio · genre: editorial · theme: Manifesto (deal 2/3, seed brightvane-electric-panel-upgrades-890f·ee445560·2026-11-13·r0) · job: book · draw: 072e29
 * hero: Counter · nav: banner over a retracting bar · footer: statement · imagery: photographs, library 2, duotone · signature: a live canvas current, arcs running a circuit behind the headline and bending toward the cursor (by request)
 * axes: dark/display-condensed/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the library has no panel photo; the circuit canvas and the city permit facts carry the specifics instead */
/* Hallmark · waive 38iii · the red word sits once per page, in the hero head only · the Manifesto theme names one red word as its signature, AMPS on the Sacramento home page */
/* Hallmark · waive 55b · each hero line is its own nowrap span sized in cqi · the Anton lockup for Sacramento cannot wrap at any width */
/* Hallmark · waive 68 · the empty button[data-slot] elements carry booking times · lead.js reads data-slot as the time pick for the Brightvane booking form, never a picture */
/* Hallmark · waive 81 · button[data-slot] holds a weekday and a time as text · booking times for the lead form contract, not picture slots */
/* Hallmark · waive 44c · inner pages use a Banner hero at 62dvh with the first section showing above the fold · service, area, about and thanks pages are references a visitor scans before booking */
/* Hallmark · dismissed 77 · the book and thanks pages are the booking form and its no-script confirmation, one job each */
/* Hallmark · dismissed F18 · the four data-slot buttons on the book page are the lead contract's time picks, not pictures */
/* Hallmark · dismissed 23 · .svc__progress span is a 2px red scroll gauge on the services stage, far under the footprint */
/* Hallmark · waive 59 · the towns marquee under the hero is a hairline band one line tall · it reads as the hero's foot for the Sacramento towns, not a section that needs a gap */
/* Hallmark · dismissed 58 · the home count includes the marquee's aria-hidden repeat of the five towns, every 900px window stays under the screen budget */
/* Hallmark · answered F4 · on the one red close the primary turns to the ground with ink text, as the Manifesto theme prescribes */
@import url("./tokens.css");
@import url("./base.css");

:root { --banner-h: 40px; --bar-h: 68px; --nav-h: calc(var(--banner-h) + var(--bar-h) + var(--rule-bar)); }

body { color: var(--color-ink-2); }
h1, h2, h3 { text-transform: uppercase; line-height: 1.02; color: var(--color-ink); }
a:hover { color: var(--color-accent-text); }

.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); }

/* the grid every section sits on */
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }

/* ---- nav: a banner over a bar; the banner tucks away on scroll down ---- */
.masthead { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 70%, transparent); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.masthead.is-solid { background: var(--color-paper); }
.masthead.is-tucked { transform: translateY(calc(-1 * var(--banner-h))); }
.banner { background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.banner .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--banner-h); }
.banner p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.banner a { color: var(--color-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.banner a:hover { color: var(--color-accent-text); }
.bar { border-bottom: var(--rule-bar) solid var(--color-ink); }
.bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--bar-h); }
.wordmark { font: 400 var(--text-2xl)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--color-muted); }
.wordmark:hover { color: var(--color-ink); }
.links { display: flex; align-items: center; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
.links a:not(.btn) { position: relative; color: var(--color-ink-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--space-2xs)); height: 2px; background: var(--color-accent-text); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-short) var(--ease-out); }
.links a:not(.btn):hover, .links a[aria-current="page"] { color: var(--color-ink); }
.links a:not(.btn):hover::after, .links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.navphone { color: var(--color-ink); font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.navphone:hover { color: var(--color-accent-text); }
.menu { display: none; position: relative; }
.menu summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink-2); color: var(--color-ink); cursor: pointer; list-style: none; font-weight: 600; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.menu ul { position: absolute; right: 0; top: 100%; z-index: var(--z-dropdown); min-width: 16rem; margin: var(--space-xs) 0 0; padding: var(--space-sm) 0; list-style: none; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.menu ul a { display: block; padding: var(--space-sm) var(--space-lg); color: var(--color-ink); text-decoration: none; }

/* ---- controls ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid transparent; border-radius: 0; background: none; font: 600 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), color var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.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--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-deep); color: var(--color-accent-ink); }
.btn--secondary { border-color: var(--color-ink-2); color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.textlink { position: relative; display: inline-block; color: var(--color-ink); font-weight: 600; text-decoration: none; padding-bottom: var(--space-2xs); background: linear-gradient(var(--color-muted), var(--color-muted)) 0 100% / 100% 1px no-repeat; }
.textlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent-text); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-long) var(--ease-out); }
.textlink:hover { color: var(--color-ink); }
.textlink:hover::after { transform: scaleX(1); transform-origin: left; }
.textlink:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .btn, .masthead, .textlink::after, .links a::after { transition: none; } }

/* ---- hero: the counter of free times beside the head, a live current behind ---- */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: calc(100dvh - var(--nav-h)); padding-block: var(--space-2xl); perspective: 1200px; overflow: clip; }
.hero--full { min-height: 100svh; margin-top: calc(-1 * var(--nav-h)); padding-top: calc(var(--nav-h) + var(--space-xl)); }
.hero .current { transform-origin: 50% 100%; }
.hero--short { min-height: calc(62dvh - var(--nav-h)); padding-block: var(--space-2xl) var(--space-lg); }
.hero--short + .section { padding-top: var(--section-gap-s); }
.current { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero__text { grid-column: 1 / span 7; container-type: inline-size; }
.hero--short .hero__text { grid-column: 1 / span 9; }
.hero--short .display > span { font-size: 12.5cqi; }
.hero--short .display:not(:has(> span:nth-child(3))) > span { font-size: 15cqi; }
.hero--book { padding-block: var(--space-xl); }
.hero--book .hero__text { grid-column: 1 / span 5; align-self: center; }
.hero--book .display > span { font-size: 17cqi; }
.booking--full .times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.booking--full .field { margin-top: var(--space-sm); }
.hero--book .facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.display { max-width: none; font-size: var(--text-display); line-height: var(--lh-tight); }
.display > span { display: block; white-space: nowrap; font-size: 19cqi; clip-path: inset(-30% -4% 0 -4%); }
.display > span > span { display: block; animation: rise 1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
.display .hot { color: var(--color-accent-text); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .display > span > span { animation: none; } }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 40ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.current-toggle { position: absolute; right: var(--gutter); bottom: var(--space-lg); z-index: var(--z-raised); min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.current-toggle:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
.current-toggle:active { transform: translateY(1px); }
.current-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.current-toggle:disabled { opacity: 0.55; cursor: not-allowed; }
html:not(.js) .current-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .current-toggle { display: none; } }

.counter { grid-column: 9 / span 4; align-self: center; padding: var(--space-xl); background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-ink); }
.counter h2 { font-size: var(--text-title); font-variant-numeric: tabular-nums; }
.counter p { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.time { width: 100%; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2xs); min-height: 72px; padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink-2); font: 500 var(--text-sm)/1.2 var(--font-body); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.time b { font: 400 var(--text-xl)/1 var(--font-display); color: var(--color-ink); text-transform: uppercase; }
.time { transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.time:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .time:hover { transform: none; } }
.time:active { transform: translateY(1px); }
.time:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.time:disabled { opacity: 0.55; cursor: not-allowed; }
.time[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.time[aria-pressed="true"] b { color: var(--color-accent-ink); }
button[data-slot] { position: static; overflow: visible; background: var(--color-paper); }
.counter .actions { margin-top: var(--space-lg); }
.counter .btn { flex: 1; }

/* ---- sections ---- */
.section { padding-block: var(--section-gap); }
.section--l { padding-block: var(--section-gap-l); }
.section--s { padding-block: var(--section-gap-s); }
.band { background: var(--color-paper-2); color: var(--color-ink-2); border-top: var(--rule-hair) solid var(--color-rule); }
.head { grid-column: 1 / span 6; }
.head .lead { margin-top: var(--space-md); }

/* services: the switcher beside the booking */
.services .head { grid-column: 1 / -1; }
.switch { grid-column: 1 / span 7; }
.seg { display: flex; flex-wrap: wrap; gap: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.seg button { min-height: 48px; padding: 0 var(--space-lg); border: 0; border-bottom: var(--rule-bar) solid transparent; background: none; color: var(--color-muted); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.seg button:hover { color: var(--color-ink); }
.seg button:active { transform: translateY(1px); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.seg button:disabled { opacity: 0.55; cursor: not-allowed; }
.seg button[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
html:not(.js) .seg { display: none; }
.panel { padding-top: var(--space-xl); }
html:not(.js) .panel + .panel { border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-xl); }
.panel h3 { font-size: var(--text-section); max-width: 16ch; }
.panel > p { margin-top: var(--space-md); font-size: var(--text-lead); max-width: 48ch; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-xl) 0 0; }
.facts div { padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-weight: 600; color: var(--color-ink); }
.facts dd { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.panel .textlink { display: inline-block; margin-top: var(--space-xl); }

.booking { grid-column: 9 / span 4; align-self: start; padding: var(--space-xl); background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-ink); }
.booking h3 { font-size: var(--text-xl); }
.booking--full { grid-column: 7 / span 6; }
.field { display: grid; gap: var(--space-2xs); margin-top: var(--space-md); }
.field label, .field legend, fieldset.field legend { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); padding: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
fieldset.field { border: 0; margin-inline: 0; padding: 0; min-width: 0; }
.input { width: 100%; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
textarea.input { min-height: 88px; padding-block: var(--space-sm); resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%), linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.input:focus-visible { outline-color: var(--color-focus); }
.input:disabled { opacity: 0.55; cursor: not-allowed; }
.booking .times { margin-top: var(--space-2xs); }
.booking .time { min-height: 56px; }
.booking .time b { font-size: var(--text-lg); }
.hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
form[data-lead] { position: relative; }
.error { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-left: var(--rule-bar) solid var(--color-error); color: var(--color-ink); font-size: var(--text-sm); }
.booking .btn--primary { width: 100%; margin-top: var(--space-lg); }
.note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.done { outline: none; }
.done h3 { font-size: var(--text-section); }
.done p { margin-top: var(--space-md); }
.done:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* the full-bleed photograph, no head */
.bleed { margin: 0; }
.bleed [data-slot] { width: 100%; aspect-ratio: 21 / 9; min-height: 440px; max-height: 760px; }
.bleed figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.photo { aspect-ratio: 4 / 5; min-height: 440px; margin: 0; }

/* the record: numbered rows under hairlines */
.record-head { grid-column: 1 / span 4; align-self: start; }
.record { grid-column: 5 / span 8; margin: 0; padding: 0; list-style: none; counter-reset: rec; border-top: var(--rule-hair) solid var(--color-rule); }
.record li { counter-increment: rec; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.record li::before { content: counter(rec, decimal-leading-zero); font: 400 var(--text-section)/1 var(--font-display); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.record h3 { font-size: var(--text-2xl); }
.record p { color: var(--color-ink-2); }

/* the stacked creed beside the terms */
.creed { grid-column: 1 / span 7; margin: 0; font: 400 var(--text-display)/var(--lh-tight) var(--font-display); text-transform: uppercase; color: var(--color-ink); container-type: inline-size; }
.creed span { display: block; white-space: nowrap; font-size: 13cqi; }
.terms { grid-column: 9 / span 4; align-self: end; margin: 0; }
.terms div { padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.terms dt { font-weight: 600; color: var(--color-ink); }
.terms dd { margin: var(--space-2xs) 0 0; }

/* rows: questions, towns, team */
.rows { grid-column: 5 / span 8; margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.rows > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows dt { font: 400 var(--text-xl)/1.1 var(--font-display); text-transform: uppercase; color: var(--color-ink); }
.rows dd { margin: 0; }
.rows--wide { grid-column: 1 / -1; }
.rows--wide > div { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); align-items: baseline; }
.rows--wide dt { font-size: var(--text-section); }
.rows--wide .meta { font-size: var(--text-sm); color: var(--color-muted); }

/* the poster line */
.poster { font: 400 var(--text-display)/var(--lh-tight) var(--font-display); text-transform: uppercase; color: var(--color-ink); container-type: inline-size; margin: 0; }
.poster span { display: block; white-space: nowrap; font-size: 21cqi; }
.poster-wrap { grid-column: 1 / -1; }
.poster-wrap p { margin-top: var(--space-lg); font-size: var(--text-lead); max-width: 52ch; }

/* split media row (service pages with a photograph) */
.media-text { grid-column: 1 / span 5; align-self: center; }
.media-text p { margin-top: var(--space-md); font-size: var(--text-lead); }
.media { grid-column: 7 / span 6; }

/* the close: hours, address and the booking again, on the one red field */
.close { background: var(--color-accent); color: var(--color-accent-ink); }
.close h2, .close h3, .close a, .close dt, .close dd, .close p { color: var(--color-accent-ink); }
.close .cols { align-items: end; }
.close h2 { grid-column: 1 / -1; }
.hours { grid-column: 1 / span 5; margin: 0; }
.hours div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-accent-ink); }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.visit { grid-column: 6 / span 3; font-size: var(--text-lead); line-height: 1.4; font-style: normal; }
.visit a { text-decoration: underline; text-decoration-thickness: 1px; }
.close-cta { grid-column: 10 / span 3; justify-self: end; text-align: right; }
.close .btn--ground { background: var(--color-paper); color: var(--color-ink); }
.close .btn--ground:hover { background: var(--color-paper-3); color: var(--color-ink); }

/* closes on paper (service pages) */
.close-band h2 { grid-column: 1 / span 7; }
.close-band .side { grid-column: 9 / span 4; align-self: end; display: grid; gap: var(--space-md); }
.close-band .side p { color: var(--color-ink-2); }

/* ---- footer: one statement, the links beneath ---- */
.footer { padding-block: var(--section-gap-s) var(--space-2xl); border-top: var(--rule-bar) solid var(--color-ink); }
.statement { font: 400 var(--text-display-s)/1.02 var(--font-display); text-transform: uppercase; color: var(--color-ink); max-width: 24ch; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.foot ul { grid-column: 1 / span 6; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot a { color: var(--color-ink-2); }
.foot a:hover { color: var(--color-accent-text); }
.foot address { grid-column: 8 / span 5; font-style: normal; color: var(--color-ink-2); }
.credits { grid-column: 1 / -1; color: var(--color-muted); }
.credits a { color: var(--color-muted); }

/* ---- under 60rem everything stacks in reading order ---- */
@media (max-width: 60rem) {
  :root { --banner-h: 36px; --bar-h: 60px; }
  .links { display: none; }
  .menu { display: block; }
  .hero { min-height: 0; padding-block: var(--space-2xl) var(--space-3xl); }
  .hero__text, .hero--short .hero__text, .hero--book .hero__text, .counter, .switch, .booking, .booking--full, .record-head, .record, .creed, .terms, .rows, .head, .media-text, .media, .hours, .visit, .close-band h2, .close-band .side, .foot ul, .foot address { grid-column: 1 / -1; }
  .close-cta { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .record li { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); }
  .record li p { grid-column: 2; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .rows > div, .rows--wide > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .bleed [data-slot] { aspect-ratio: 4 / 3; min-height: 0; }
  .banner .hide-s { display: none; }
}
@media (max-width: 40rem) {
  .seg { flex-wrap: nowrap; overflow-x: auto; }
  .field-row, .booking--full .times { grid-template-columns: minmax(0, 1fr); }
  .booking--full .times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .current-toggle { bottom: var(--space-sm); }
}

/* ================= motion layer ================= */
.policy { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.close .policy { color: var(--color-accent-ink); }
.close :focus-visible { outline-color: var(--color-accent-ink); }

/* split heads: built by script only, so the plain head stands without it */
.split-line { display: block; }
.split-w { display: inline-block; clip-path: inset(-20% -6% 0 -6%); }

/* towns marquee */
.marquee { position: relative; padding-block: var(--space-lg); border-block: var(--rule-hair) solid var(--color-rule); overflow: clip; }
.marquee__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee ul { display: flex; align-items: center; gap: var(--space-2xl); margin: 0; padding: 0 var(--space-2xl) 0 0; list-style: none; font: 400 var(--text-section)/1 var(--font-display); text-transform: uppercase; color: var(--color-ink); white-space: nowrap; }
.marquee li { display: flex; align-items: center; gap: var(--space-2xl); }
.marquee li::after { content: ""; width: 14px; height: 14px; background: var(--color-accent); }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:not(.is-running) .marquee__track, .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee [data-loop-toggle] { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.marquee [data-loop-toggle]:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
.marquee [data-loop-toggle]:active { transform: translateY(-50%) translateY(1px); }
.marquee [data-loop-toggle]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.marquee [data-loop-toggle]:disabled { opacity: 0.55; cursor: not-allowed; }
html:not(.js) [data-loop-toggle] { display: none; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } [data-loop-toggle] { display: none; } }

/* pinned services: the stage holds, each job takes the screen */
.svc { align-items: start; }
.svc__list { grid-column: 1 / span 5; }
.svc__panel { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--bar-h)); padding-block: var(--space-2xl); opacity: 0.35; transition: opacity var(--dur-long) var(--ease-out); }
.svc__panel.is-active, html:not(.js) .svc__panel { opacity: 1; }
.svc__panel h3 { font-size: var(--text-section); max-width: 14ch; }
.svc__panel > p { margin-top: var(--space-md); font-size: var(--text-lead); max-width: 46ch; }
.svc__panel .facts { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--space-xl); }
.svc__panel .facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-sm); }
.svc__panel .facts dd { margin: 0; font-size: var(--text-md); }
.svc__panel .actions { margin-top: var(--space-xl); }
.svc__side { grid-column: 7 / span 6; position: sticky; top: calc(var(--bar-h) + var(--rule-bar) + var(--space-lg)); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-md); height: calc(100svh - var(--bar-h) - var(--rule-bar) - var(--space-2xl)); }
html:not(.js) .svc__side { display: none; }
html:not(.js) .svc__list { grid-column: 1 / span 8; }
.svc__tabs { display: flex; gap: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.svc__tabs button { min-height: 48px; padding: 0 var(--space-md); border: 0; border-bottom: var(--rule-bar) solid transparent; background: none; color: var(--color-muted); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.svc__tabs button:hover { color: var(--color-ink); }
.svc__tabs button:active { transform: translateY(1px); }
.svc__tabs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.svc__tabs button:disabled { opacity: 0.55; cursor: not-allowed; }
.svc__tabs button[aria-current="true"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.svc__stage { position: relative; overflow: clip; background: var(--color-paper-2); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.svc__stage > canvas, .svc__stage > [data-layer] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.svc__stage > .is-on { opacity: 1; }
.svc__progress { position: absolute; left: var(--space-md); top: var(--space-md); bottom: var(--space-md); width: 2px; background: var(--color-rule); z-index: var(--z-raised); }
.svc__progress span { position: absolute; inset: 0; background: var(--color-accent); transform-origin: top; }
@media (prefers-reduced-motion: reduce) { .svc__panel, .svc__stage > * { transition: none; } }

/* booking beside the creed */
.book-side { grid-column: 1 / span 6; display: grid; gap: var(--space-2xl); align-content: start; }
.book-side .creed { grid-column: auto; }
.book-side .terms { grid-column: auto; }
.book-sec .booking { grid-column: 8 / span 5; }

/* job index with the cursor frame */
.jobs { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.job { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); text-decoration: none; }
.job b { font: 400 var(--text-display-s)/1 var(--font-display); text-transform: uppercase; color: var(--color-ink); transition: transform var(--dur-long) var(--ease-out); }
.job:hover { color: var(--color-ink); }
.job:hover b { transform: translateX(var(--space-lg)); }
.job:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.float { position: fixed; left: 0; top: 0; z-index: var(--z-dropdown); width: 300px; aspect-ratio: 4 / 5; pointer-events: none; background: var(--color-paper-2); clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-long) var(--ease-out); }
.float.is-on { clip-path: inset(0 0 0 0); }
.float > * { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.float > .is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .job b, .float { transition: none; } .job:hover b { transform: none; } }

/* the record's own call to action */
.record-cta { grid-column: 5 / span 8; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }

/* mobile dock: call and book, always in reach */
.dock { display: none; }
@media (max-width: 60rem) {
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-xs); padding: var(--space-xs) var(--space-md); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); }
  .footer { padding-bottom: var(--space-4xl); }
  .navphone { display: none; }
  .hero--full { min-height: 100svh; padding-top: calc(var(--nav-h) + var(--space-xl)); }
  .svc__list, .svc__side, .book-side, .book-sec .booking, .record-cta { grid-column: 1 / -1; }
  .svc__side { grid-row: 1; top: calc(var(--bar-h) + var(--rule-bar)); height: 42svh; z-index: var(--z-raised); background: var(--color-paper); padding-bottom: var(--space-xs); }
  .svc__tabs { overflow-x: auto; }
  .svc__panel { min-height: 70svh; }
  .job { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .marquee [data-loop-toggle] { position: static; transform: none; margin: var(--space-md) var(--gutter) 0; }
}
.job span { justify-self: end; text-align: right; }
@media (max-width: 60rem) { .job span { justify-self: start; text-align: left; } }