/* Hallmark · shape: Bento Grid · genre: editorial · theme: Almanac (deal 2/3, seed tallow-creek-roofing-roof-f70b·ee445560·2026-11-13·r0) · job: book · draw: e120f6
 * hero: Poster (swapped from the drawn Index by the brief's upgrade) · nav: slab · footer: mast · imagery: photographs, library 2, muted · product sample: inspection report in the bento · signature: a live canvas of dimensional shingles close up, rain sheeting across the roofline, a dim lightning flicker on scroll, changing weather as each service pins
 * axes: mid/grotesk-sans/chromatic-magenta · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the library holds no shingle or roof photo, so the close-up roofline is drawn live in canvas rather than faked with an off-subject stock frame */
/* Hallmark · waive 44c · the home hero is a full-bleed Poster scene, inner service heroes are short Poster bands and /book/ is a form page whose first fields sit above the fold · the canvas carries every hero so the roofline reads close up behind the type */
/* Hallmark · dismissed F4 · the magenta fill is the booking action itself (nav Book, the hero, each pinned service and the close form all book); the selected tab is a sheet tab with a magenta bar, not a button */
/* Hallmark · waive 68 · the six data-slot attributes on /book/ are the booking form's time buttons · the shared lead.js contract keys the slot buttons on data-slot, they hold times, not pictures */
/* Hallmark · dismissed F18 · /book/ carries no picture slots, its data-slot buttons are booking times for lead.js */
/* Hallmark · waive 80 · the roof drawn in the weather canvas is the brief's requested live weather layer · the library holds no shingle or roof photo, so the close-up roofline is drawn live under the rain instead */
/* Hallmark · motion: the theme keeps still; the user's upgrade asks for motionsites-level motion: live canvas scenes, a pinned scrubbed services section, split heads, staggered rows, a clip reveal, magnetic buttons, tilting tiles, a towns marquee; all pause or hold still under reduced motion and the page is complete without script */
/* Hallmark · waive 59 · the towns marquee is a strip band joined to the foot of the hero · it reads as the hero's own edge, so it sits tight to it and the gap opens after it */
/* Hallmark · answered F15 · three gaps: field rows 24px, hero and pinned splits 96px, the close 64px; each pairs with its own composition */
/* Hallmark · dismissed 77 · /book/, /thanks/, /about/ and /service-area/ are utility pages; the anatomy of book puts the full story on the home page */
@import url("./tokens.css");
@import url("./base.css");

body { color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); }

/* 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 var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 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); }
.btn:hover { background: var(--color-paper-2); }
.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); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--quiet { border-color: var(--color-rule-2); }
.btn--time { min-height: 44px; padding: 0 var(--space-md); font: 400 var(--text-sm)/1 var(--font-outlier); font-variant-numeric: tabular-nums; }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.textlink { white-space: nowrap; color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; font-weight: 500; }
.textlink:hover { text-decoration-thickness: 2px; }
.textlink:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.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); }

/* nav: a slab */
.slab { background: var(--color-ink); color: var(--color-sheet); }
.slab__in { display: flex; align-items: center; gap: var(--space-xl); min-height: 72px; }
.wordmark { margin-right: auto; font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-sheet); text-decoration: none; white-space: nowrap; }
.slab__links { display: flex; align-items: center; gap: var(--space-lg); }
.slab__links a { font: 500 var(--text-md)/1 var(--font-display); color: var(--color-sheet); text-decoration: none; white-space: nowrap; padding-block: var(--space-sm); }
.slab__phone { font-family: var(--font-outlier) !important; font-variant-numeric: tabular-nums; }
.slab a:focus-visible, .band--ink a:focus-visible { outline-color: var(--color-sheet); }
.btn--slab { min-height: 44px; }
@media (max-width: 60rem) { .slab__links a:not(.slab__phone) { display: none; } }
@media (max-width: 40rem) { .slab__links { display: none; } .wordmark { font-size: var(--text-lg); } }

/* hero: a full-bleed live scene behind giant type (the upgrade swaps the drawn Index posture for Poster) */
.slab { position: sticky; top: 0; z-index: var(--z-sticky-nav); }
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - 72px); background: var(--color-ink-2); color: var(--color-paper); overflow: clip; }
.hero--inner { min-height: calc(70svh - 72px); }
.scene { margin: 0; }
.scene--hero { position: absolute; inset: 0; transform-origin: 50% 30%; }
.scene--hero canvas, .scene--hero::after { z-index: -1; }
.hero__content { z-index: 1; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--color-ink-2); }
.scene--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-ink) 0%, color-mix(in oklab, var(--color-ink) 70%, transparent) 35%, transparent 75%); pointer-events: none; }
.scene__cap { position: absolute; inset: var(--space-md) 0 auto 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-paper); }
.hero__content { position: relative; display: grid; justify-items: start; gap: var(--space-lg); padding-block: var(--space-3xl) var(--space-2xl); }
.hero .hero__head { max-width: 15ch; font-size: clamp(3rem, 6.6vw + 0.5rem, 8.25rem); line-height: 0.92; letter-spacing: -0.045em; color: var(--color-sheet); }
.hero .hero__head--inner { font-size: var(--text-display); line-height: 0.96; max-width: 18ch; }
.line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span { display: block; animation: rise 1s var(--ease-out) both; animation-delay: calc(150ms + var(--i, 0) * 110ms); }
@keyframes rise { from { transform: translateY(110%); } }
.hero__lead { color: var(--color-paper); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-lg) var(--space-xl); }
.hero__next { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-paper); }
.hero .crumb a { color: var(--color-paper); }
.btn--big { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-lg); }
.btn--ghost { color: var(--color-sheet); border-color: var(--color-paper); background: color-mix(in oklab, var(--color-ink) 45%, transparent); }
.btn--ghost:hover { background: var(--color-ink); }
.btn--ghost:focus-visible { outline-color: var(--color-sheet); }
.policy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.policy li { padding-left: var(--space-sm); border-left: var(--rule-bar) solid var(--color-accent); }
.hero .policy, .band--ink .policy { color: var(--color-paper); }
.close__form .policy { color: var(--color-muted); }
.hero :is(a, button):focus-visible, .band--ink :is(a, button):focus-visible, .mbar :is(a, button):focus-visible, .slab :is(a, button):focus-visible { outline-color: var(--color-sheet); }
.close__form :is(a, button):focus-visible { outline-color: var(--color-focus); }
.times { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
[data-magnetic] { transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }

[data-split] .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
[data-split] .w > span { display: inline-block; }

/* marquee of the towns */
.marquee { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; padding-inline-end: var(--gutter); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); }
.marquee__track { display: flex; width: max-content; animation: marq 70s linear infinite; }
.marquee__run { display: flex; gap: var(--space-xl); padding-right: var(--space-xl); font: 600 var(--text-section)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); white-space: nowrap; }
.marquee__sep { color: var(--color-accent); }
@keyframes marq { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__view { overflow: clip; min-width: 0; }
[data-loop]:not(.is-running) .marquee__track { animation-play-state: paused; }
html:not(.js) [data-loop-toggle] { display: none; }
@media (prefers-reduced-motion: reduce) { [data-loop-toggle] { display: none; } .marquee__track { animation: none; } }

/* pinned services: the canvas changes weather as each kind of work takes the screen */
.pin { display: flex; align-items: center; min-height: calc(100svh - 72px); padding-block: var(--space-2xl); }
.pin > .container { width: 100%; }
.pin__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.pin__stage { position: relative; height: min(68svh, 620px); min-height: 380px; }
.scene--pin { position: absolute; inset: 0; }
.scene--pin canvas { inset: 0 0 48px 0; height: calc(100% - 48px); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.scene--pin .scene__cap { inset: auto 0 0 0; min-height: 48px; padding-inline: 0; justify-content: space-between; color: var(--color-muted); }
.pin__body h2 { margin-bottom: var(--space-xl); }
.panel { display: grid; gap: var(--space-md); }
.panel h3 { font-size: var(--text-2xl); }
.panel__line { font-size: var(--text-lead); max-width: 44ch; }
.panel__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-md); }
html:not(.js) .panel + .panel { margin-top: var(--space-2xl); }

/* the hover list, with a canvas that follows the cursor */
.list-sec { position: relative; padding-block: var(--section-gap); }
.hlist { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.hlist li { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.hlist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-lg); padding-block: var(--space-lg); color: var(--color-ink); text-decoration: none; }
.hlist__name { display: block; font: 600 var(--text-section)/1.05 var(--font-display); letter-spacing: -0.03em; transition: transform var(--dur-short) var(--ease-out); }
.hlist__row:hover .hlist__name, .hlist__row:focus-visible .hlist__name { transform: translateX(var(--space-lg)); }
.hlist__row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.hlist__note { font-size: var(--text-lead); color: var(--color-muted); }
.hreveal { display: none; }
.js .hreveal { display: block; position: fixed; left: 0; top: 0; z-index: var(--z-dropdown); width: 300px; height: 210px; margin: 0; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
.hreveal canvas { width: 100%; height: 100%; display: block; outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.hreveal.is-on { visibility: visible; opacity: 1; transition: opacity var(--dur-short) var(--ease-out); }
@media (hover: none), (max-width: 60rem) { .js .hreveal { display: none; } }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); margin-top: var(--space-2xl); }

/* links draw their underline */
.textlink, .mast__links a, .slab__links a { position: relative; }
.textlink::after, .mast__links a::after, .slab__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.textlink:hover::after, .mast__links a:hover::after, .slab__links a:hover::after, .slab__links a[aria-current]::after { transform: scaleX(1); }

/* mobile booking bar */
.mbar { display: none; }
@media (max-width: 60rem) {
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-xs) var(--gutter) calc(var(--space-xs) + env(safe-area-inset-bottom)); background: var(--color-ink); }
  .mbar .btn--quiet { color: var(--color-sheet); border-color: var(--color-paper); }
  body { padding-bottom: var(--space-3xl); }
  .pin { min-height: 0; }
  .pin__stage { height: 360px; }
  .marquee__run { font-size: var(--text-2xl); }
  .hlist__name { font-size: var(--text-2xl); }
}
.times { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* the weather canvas */
html:not(.js) [data-loop-toggle] { display: none; }
@media (prefers-reduced-motion: reduce) { [data-loop-toggle] { display: none; } }

/* section heads */

/* switcher */
.seg { display: flex; gap: 0; margin-bottom: var(--space-lg); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.seg button { min-height: 48px; padding: 0 var(--space-lg); border: 0; background: transparent; color: var(--color-muted); font: 500 var(--text-lg)/1 var(--font-display); cursor: pointer; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.seg button:hover { color: var(--color-ink); background: var(--color-paper-2); }
.seg button[aria-selected="true"] { color: var(--color-ink); background: var(--color-sheet); box-shadow: inset 0 -3px 0 var(--color-accent); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.seg button:active { transform: translateY(1px); }
html:not(.js) .seg { display: none; }
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-sm) 0; }
.terms > div { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
.terms dt { font-size: var(--text-sm); color: var(--color-muted); }
.terms dd { margin: var(--space-2xs) 0 0; font: 500 var(--text-md)/1.35 var(--font-display); color: var(--color-ink); }

/* full-bleed photograph, no head */
.bleed-fig { margin: 0; }
.bleed { aspect-ratio: 21 / 8; min-height: 360px; width: 100%; }
.bleed > img { object-position: 50% 55%; outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }
.bleed-fig figcaption { display: block; }

/* bento */
.bento-sec { padding-block: var(--section-gap-l) var(--section-gap); }
.bento-head { margin-bottom: var(--space-2xl); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(280px, auto); gap: var(--gap-columns); }
.tile { margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); }
.tile h3 { font-size: var(--text-2xl); }
.tile p { max-width: 48ch; }
.tile--lead { grid-column: 1 / span 7; grid-row: span 2; background: transparent; padding: 0; border: 0; }
.tile--claim { grid-column: 8 / span 5; justify-content: flex-end; }
.tile--photo { grid-column: 8 / span 5; padding: 0; background: transparent; border: 0; }
.tile--photo .photo { flex: 1; min-height: 240px; }
.tile--photo .photo > img, .how__photo .photo > img { outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; object-position: 50% 50%; }
.tile--fig { grid-column: 1 / span 5; justify-content: flex-end; }
.tile--fin { grid-column: 6 / span 7; justify-content: flex-end; background: transparent; border-top: var(--rule-bar) solid var(--color-rule-2); }
.bigfig { font: 500 var(--text-display)/0.9 var(--font-outlier); letter-spacing: -0.04em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.bigfig .unit { font-size: var(--text-xl); letter-spacing: 0; color: var(--color-muted); }
.report { flex: 1; padding: var(--space-xl); background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); }
.report table, .towns, .hours { width: 100%; border-collapse: collapse; }
.report caption { caption-side: top; text-align: left; padding-bottom: var(--space-md); font: 600 var(--text-xl)/1.2 var(--font-display); color: var(--color-ink); }
th { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); text-align: left; }
thead th { padding: var(--space-sm) 0; border-bottom: var(--rule-bar) solid var(--color-rule-2); }
td, tbody th { padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.report td { font-size: var(--text-lg); color: var(--color-ink); }
.num { font-family: var(--font-outlier); text-align: right; }
.report tr.is-flag td { color: var(--color-accent-2); }
.tile__line { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* close: hours, address, booking on the ink band */
.band--ink { background: var(--color-ink); color: var(--color-paper); }
.band--ink h2, .band--ink h3 { color: var(--color-sheet); }
.close__head { margin-bottom: var(--space-2xl); }
.close__grid h3 { font-size: var(--text-title); margin-bottom: var(--space-md); }
.close { padding-block: var(--section-gap-s); }
.close__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--space-2xl); }
.close__grid--two { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.close__grid--form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.close__info { display: grid; gap: var(--space-xl); }
.close__info .close__head { margin-bottom: 0; }
.close__form { padding: var(--space-xl); background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-accent); color: var(--color-ink-2); }
.close__form h3 { color: var(--color-ink); font-size: var(--text-2xl); }
.slots__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
.tile { transition: transform var(--dur-short) var(--ease-out); }
.band--ink th { color: var(--color-paper); font-size: var(--text-md); }
.band--ink td, .band--ink tbody th { border-top-color: var(--color-rule-2); }
.band--ink .num { color: var(--color-sheet); }
.close__addr { font: 500 var(--text-xl)/1.35 var(--font-display); font-style: normal; color: var(--color-sheet); }
.close__note { margin-top: var(--space-md); color: var(--color-paper); max-width: 34ch; }
.band--ink .btn--quiet { color: var(--color-sheet); border-color: var(--color-muted); }
.band--ink .btn--quiet:hover { background: var(--color-ink-2); }
.times--ink { margin-bottom: var(--space-lg); }
.close .btn--primary { margin-top: var(--space-lg); }
.times--ink + .btn--primary { margin-top: 0; }

/* footer: a mast */
.mast { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-bar) solid var(--color-rule-2); }
.mast__word { font: 600 clamp(2.5rem, 7vw, 6.5rem)/0.95 var(--font-display); letter-spacing: -0.04em; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.mast__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.mast__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.mast__links a, .mast__addr a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.mast__links a:hover, .mast__addr a:hover { text-decoration-thickness: 2px; }
.mast__addr { font-style: normal; line-height: 1.6; }
.mast__legal { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); max-width: 90ch; }
.mast__legal a { color: var(--color-muted); }

/* inner pages */
.crumb { font-size: var(--text-sm); color: var(--color-muted); }
.crumb a { color: var(--color-muted); text-decoration-color: var(--color-accent); }
.banner { padding-block: var(--space-2xl); }
.banner__head { font-size: var(--text-display); letter-spacing: -0.035em; line-height: 0.98; }
.banner--plain { padding-block: var(--space-3xl) var(--space-2xl); }
.banner--plain .lead { margin-top: var(--space-lg); }
.banner--thanks { padding-block: var(--section-gap) var(--space-xl); }
.thanks__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }

.rows-sec, .crew-sec { padding-block: var(--space-2xl) var(--section-gap); }
.faq-sec { padding-block: var(--section-gap) var(--section-gap-l); }
.rows--faq dd { font-size: var(--text-md); max-width: 52ch; }
.rows-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.rows { margin: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.rows > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows dt { font: 600 var(--text-title)/1.2 var(--font-display); color: var(--color-ink); letter-spacing: -0.01em; }
.rows dd { margin: 0; font-size: var(--text-lg); }
.rows--tight > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-md); }
.rows--tight dd { font-size: var(--text-md); }

.band--well { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); }
.terms-sec { padding-block: var(--section-gap-s); }
.bigterms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; }
.bigterms > div { border-top: var(--rule-bar) solid var(--color-rule-2); padding-top: var(--space-md); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); }
.bigterms dt { font-size: var(--text-sm); color: var(--color-muted); }
.bigterms dd { margin: 0; font: 600 var(--text-2xl)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--color-ink); }
.next__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.next__label { font: 600 var(--text-title)/1.2 var(--font-display); color: var(--color-ink); }


.towns-sec { padding-block: var(--space-2xl) var(--section-gap); }
.towns tbody th { font: 600 var(--text-title)/1.2 var(--font-display); color: var(--color-ink); padding-block: var(--space-lg); }
.towns td { font-size: var(--text-lg); padding-block: var(--space-lg); }
.towns thead th.num { text-align: right; }
.towns td.num { padding-right: var(--space-xl); font-size: var(--text-md); }
.towns__more { margin-top: var(--space-xl); font-size: var(--text-lg); }
.towns__more a { color: var(--color-ink); text-decoration-color: var(--color-accent); }

.how-sec { padding-block: var(--section-gap-s) var(--section-gap-l); }
.how-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.how-grid h2 { margin-bottom: var(--space-xl); }
.how-grid .btn { margin-top: var(--space-xl); }
.how__photo { margin: 0; }
.how__photo .photo { aspect-ratio: 4 / 3; min-height: 440px; }

/* booking form */
.book { padding-block: var(--space-xl) var(--section-gap); }
.book__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.book__side { display: grid; gap: var(--space-lg); position: sticky; top: var(--space-xl); }
.terms--side { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.terms--side a { white-space: nowrap; color: var(--color-ink); text-decoration-color: var(--color-accent); }
.book__form { background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); padding: var(--space-xl); }
.lead-form { display: grid; gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
label, legend { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-ink-2); }
input, select, textarea { min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-sheet); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--color-focus); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
textarea { resize: vertical; }
.help { margin-top: calc(-1 * var(--space-sm)); font-size: var(--text-sm); color: var(--color-muted); min-height: 1lh; }
.slots { margin: 0; padding: 0; border: 0; }
.slots legend { margin-bottom: var(--space-xs); }
.slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-xs); }
.slot { white-space: nowrap; min-height: 48px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 400 var(--text-sm)/1.2 var(--font-outlier); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.slot:hover { background: var(--color-paper-2); }
.slot:active { transform: translateY(1px); }
.slot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.slot[aria-pressed="true"] { background: var(--color-ink); color: var(--color-sheet); border-color: var(--color-ink); }
.slot:disabled { opacity: 0.55; cursor: not-allowed; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--color-error); font-weight: 500; }
.lead-form .btn--primary { justify-self: start; }
.done { display: grid; gap: var(--space-md); }
.done:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* responsive */
@media (max-width: 60rem) {
  .pin__grid, .close__grid, .close__grid--two, .rows-grid, .how-grid, .book__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .how__photo .photo { min-height: 0; }
  .bigterms { grid-template-columns: minmax(0, 1fr); }
  .bigterms > div { min-height: 0; }
  .terms { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .book__side { position: static; }
  .mast__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .towns thead { display: none; }
  .towns tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
  .towns tbody th, .towns td { border: 0; padding: var(--space-2xs) 0; text-align: left; }
  .towns td:last-child { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-md); }
  .towns td.num { padding-right: 0; text-align: right; }
}
@media (max-width: 40rem) {
  .hlist__note { display: none; }
  .field-row, .slots__grid { grid-template-columns: minmax(0, 1fr); }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .mast__cols { grid-template-columns: minmax(0, 1fr); }
  .tile, .report, .book__form { padding: var(--space-lg); }
  .seg button { padding: 0 var(--space-md); font-size: var(--text-md); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .slot, .seg button, .hlist__row { transition: none; }
  .btn:active, .slot:active, .seg button:active { transform: none; }
}