/* Structural CSS only: layout mechanics, accessibility, the parts that must work.
 * No brand decisions live here; every color, font and size comes from tokens.css.
 * Rafa's design work goes in design.css (loaded after this file), which starts empty.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); }
/* Links inside running text: bold, underlined; Copper on light, Gold on dark; visited Chocolate on light, Copper on dark.
 * Menus, buttons and cards carry a class and keep no underline [Rafa 2026-10-22, brand kit gap 11]. */
main :is(p, li, dd, td, figcaption, blockquote) a:not([class], nav a, :has(*)) { color: var(--color-link-text); font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
main :is(p, li, dd, td, figcaption, blockquote) a:not([class], nav a, :has(*)):visited { color: var(--color-link-visited); }
/* On a raised Quartz card Copper falls to 3.45:1, so links there use the kit link colour (Chocolate on light, Gold on dark), still bold and underlined. */
.login-card a:not([class]) { color: var(--color-link); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
/* Rounded focus ring on every focusable element [Rafa 2026-10-22, brand kit gap 12]. :where() keeps it at zero specificity, so an element's own radius wins. */
:where(:focus-visible) { border-radius: var(--radius-sm); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p, li { max-width: var(--measure); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-2); top: var(--space-2); z-index: 100; background: var(--color-bg); padding: var(--space-1) var(--space-2); }

.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--space-2); }
section { padding-block: var(--space-5); }

/* Sticky header; on narrow screens only the Book button stays [Rafa 2026-09-14]. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg); }
.site-header .wrap { display: flex; align-items: center; gap: var(--space-2); min-height: var(--header-h); }
.site-nav { display: flex; gap: var(--space-2); margin-inline-start: auto; align-items: center; flex-wrap: wrap; }
.site-nav a { text-decoration: none; }
.site-nav .nav-links { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
/* Phone: logo, Book and a hamburger stay in the bar; the links, the phone number and the
   light/dark switch open as a panel under it. */
.nav-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--color-surface); color: var(--color-text); border: 0; border-radius: var(--radius); cursor: pointer; }
.nav-burger span { display: block; width: 1.25rem; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.nav-burger[aria-expanded="true"] span { box-shadow: none; rotate: 45deg; }
.nav-burger[aria-expanded="true"] span::after { content: ""; display: block; width: 100%; height: 2px; background: currentColor; rotate: 90deg; }
.nav-links .nav-call, .nav-links .nav-theme { display: none; }
/* 1100px: with six items (About added 2026-10-14) the row wraps below about 1070px; measured, with a margin. */
@media (max-width: 1100px) {
  .site-nav { flex-wrap: nowrap; gap: var(--space-1); }
  .site-nav .nav-phone, .site-nav > .theme-toggle { display: none; }
  .nav-burger { display: inline-flex; }
  .site-nav .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: var(--space-1) var(--space-2) var(--space-3); background: var(--color-bg); border-bottom: 1px solid var(--color-border); max-height: calc(100vh - var(--header-h)); overflow: auto; }
  .site-nav.is-open .nav-links { display: flex; }
  .nav-links > li { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); max-width: none; }
  .nav-links > li:first-child { border-top: 0; }
  .nav-links > li > a, .nav-menu summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 700; }
  .nav-links .nav-call, .nav-links .nav-theme { display: block; }
  .nav-theme .theme-toggle { width: 100%; justify-content: space-between; min-height: 48px; font-weight: 700; }
  .site-nav .nav-menu ul { position: static; min-width: 0; padding: 0 0 var(--space-1); border: 0; border-radius: 0; box-shadow: none; }
  .site-nav .nav-menu ul a { padding-inline: var(--space-2); }
}

/* Logo [brand kit 1.4]: the light lockup on light grounds, the dark lockup on dark grounds, switched by
 * the same rule as the theme. Kit minimum for the lockup is 180px wide. */
/* Clear space [brand kit, Lockup]: nothing comes closer to the lockup than half the camera's height. */
.logo { display: inline-flex; align-items: center; text-decoration: none; margin-block: var(--logo-clear); margin-inline-end: var(--logo-clear); }
.logo img { width: 188px; height: auto; }
.logo .logo-dark { display: none; }
:root[data-theme="dark"] .logo .logo-dark { display: block; }
:root[data-theme="dark"] .logo .logo-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .logo-dark { display: block; }
  :root:not([data-theme="light"]) .logo .logo-light { display: none; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.25rem; border-radius: var(--radius-sm); border: 0; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: color .12s, box-shadow .12s; }
.btn-primary { background: var(--color-button); color: var(--color-button-text); }
/* Kit button states: hover and focus add a Gold ring, and a Gold label on light. */
.btn:is(:hover, :focus-visible) { outline: 0; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); }
.btn-primary:is(:hover, :focus-visible) { color: var(--color-button-hover-text); }
/* Brand kit, Buttons: one button colour per ground. A secondary action is the small size (36 px), not another fill. */
.btn-secondary { background: var(--color-button); color: var(--color-button-text); min-height: 36px; padding: 0 var(--space-2); }
.btn-secondary:is(:hover, :focus-visible) { color: var(--color-button-hover-text); }
.btn-icon { gap: 0.5rem; }
.btn-icon .icon { width: 20px; height: 20px; flex: none; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; min-width: 44px; padding: 0; background: transparent; color: var(--color-text); border: 0; font: inherit; cursor: pointer; }
.theme-track { position: relative; flex: none; width: 3rem; height: 1.75rem; background: var(--color-surface); border-radius: 999px; }
/* The knob carries the icon of the current mode: a sun in light mode, a moon in dark mode. */
.theme-knob { position: absolute; top: 50%; left: 0.2rem; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--color-selected); color: var(--color-selected-text); translate: 0 -50%; transition: left 0.2s ease; }
.theme-knob svg { display: block; width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.theme-knob .theme-sun circle { fill: currentColor; }
.theme-knob .theme-moon { fill: currentColor; stroke: none; }
.theme-knob .theme-moon, .theme-toggle[aria-pressed="true"] .theme-sun { display: none; }
.theme-toggle[aria-pressed="true"] .theme-moon { display: block; }
.theme-toggle[aria-pressed="true"] .theme-knob { left: calc(100% - 1.5rem); background: var(--color-accent); color: var(--color-accent-text); }
@media (prefers-reduced-motion: reduce) { .theme-knob { transition: none; } }

.cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--color-surface); border: 0; border-radius: var(--radius); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.card .btn { margin-top: auto; }
.muted { color: var(--color-text-muted); }
.proof { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.talk-options { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.talk-options[hidden] { display: none; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--space-1); border-bottom: 1px solid var(--color-border); }
.table-scroll { overflow-x: auto; }

/* Footer: business block, the four audiences, the site links, the two actions; proof and copyright on the base line. */
/* Header phone as a pill on the raised surface [Yendi 2026-10-13: 'the phone number in the header, let's use a pill']. The kit
   defines the fully rounded radius (radius-full) and no pill component of its own. */
.nav-phone { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding-inline: var(--space-2); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav-phone .icon { width: 1.1em; height: 1.1em; }
.nav-phone:hover { color: var(--color-link); }
.site-footer { padding-block: var(--space-5) var(--space-3); background: var(--color-footer) var(--surface-footer); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.footer-business p, .footer-business address { margin: var(--space-2) 0 0; font-style: normal; max-width: 34ch; }
.footer-links h2 { margin: 0 0 var(--space-1); font-size: var(--text-h3); }
.footer-links ul, .footer-social, .footer-base ul { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* With a mouse the rows sit closer; touch screens keep the 44px target [Yendi 2026-10-13: 'let's make them tighter']. */
@media (hover: hover) and (pointer: fine) { .footer-links a { min-height: 0; padding-block: 0.3rem; } }
.footer-actions { display: grid; gap: var(--space-1); }
.footer-social { display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between; margin-block-start: var(--space-2); }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--color-text); }
.footer-social svg { fill: currentColor; }
.footer-social a:hover { color: var(--color-link); }
.footer-base { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-block-start: var(--space-4); padding-block-start: var(--space-3); border-top: 1px solid var(--color-rule); }
.footer-base ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.footer-base li, .footer-base p { max-width: none; margin: 0; color: var(--color-text-muted); }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); } }

/* Questions page: question on the left, answer on the right, one rule between them. */
.questions h1 { margin: 0 0 var(--space-4); }
.qa { margin: 0; }
.qa-item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2) var(--space-5); padding-block: var(--space-3); border-top: 1px solid var(--color-rule); }
.qa dt h2 { margin: 0; font-size: var(--text-h3); }
.qa dd { margin: 0; }
.qa dd p { margin: 0; }
.qa dd p + p { margin-block-start: var(--space-1); }
@media (max-width: 760px) { .qa-item { grid-template-columns: 1fr; } }

/* Quotes fill their card; the browser default indents them 40px per side. */
blockquote, figure { margin: 0; }


/* Hero film. Default (no JS, reduced motion): the poster image, the hero copy and the beats
   stack as a normal section. With JS the block turns into a pinned full-screen film whose
   scroll position plays the frames and brings each beat in from its side. */
.hero-film { padding-block: 0; }
.hero-film-stage { position: relative; }
.hero-film-stage > img, .hero-film-stage > canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-copy, .beat { background: var(--color-bg); padding: var(--space-3); border-radius: var(--radius); }
/* Over the film there is no card [brand kit, Logos on photos: "No box, no panel"; Yendi 2026-10-07]. The photo is
   darkened from its bottom edge with the kit's Espresso edge gradient and the text sits on it in White. The gradient
   and the white follow --on-photo (hero-film.js): 1 while the photo fills the frame, 0 once the plan stands on the
   page colour, where the text takes the page's own text colour. */
.hero-film.is-film .hero-film-stage { background-color: var(--brand-espresso); }
.hero-film.is-film.is-ground .hero-film-stage { background-color: transparent; }
.hero-film.is-film .hero-film-stage::after { content: ""; position: absolute; inset: 0; background: var(--photo-edge); opacity: var(--on-photo, 1); pointer-events: none; }
.hero-film.is-film .hero-copy, .hero-film.is-film .beat { z-index: 1; background: none; padding: 0; border-radius: 0; color: color-mix(in srgb, var(--brand-white) calc(var(--on-photo, 1) * 100%), var(--color-text)); }
.hero-film.is-film .hero-copy { --color-button: var(--brand-gold); --color-button-text: var(--brand-camera-black); --color-button-hover-text: var(--brand-camera-black); color: var(--brand-white); }
.hero-film.is-film .hero-copy h1 { color: inherit; }
.hero-copy h1 { margin-block: 0 var(--space-2); }
.hero-copy .hero-where { margin-block: 0 var(--space-2); }
/* Beats are sentences, so they are set as a lead paragraph in DM Sans, not in the display face [Rafa 2026-10-07; brand kit, Typefaces]. */
.beat p { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--text-lead); line-height: 1.4; }
.beat-final .btn { margin-block-start: var(--space-2); }
/* The last beat is the offer: display line, one sentence, one large button [brand kit, Type rules: read in order]. */
.beat-final p { font-weight: 400; }
.beat-final .beat-price { font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); font-size: var(--text-display); line-height: 1.05; margin-block-end: var(--space-2); }
.beat-final p:not(.beat-price) { font-size: var(--text-lead); margin-block-end: var(--space-3); }
.btn-large { min-height: 56px; padding: 0 2rem; font-size: 1.25rem; }

.hero-film.is-film { height: var(--hero-film-scroll); }
.hero-film.is-film .hero-film-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden; }
.hero-film.is-film .hero-film-stage > img, .hero-film.is-film .hero-film-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.hero-film.is-film .hero-copy, .hero-film.is-film .beat { position: absolute; max-width: var(--beat-width); will-change: transform, opacity; }
.hero-film.is-film .hero-copy { left: var(--space-4); bottom: var(--space-4); max-width: calc(var(--beat-width) * 1.5); }
.hero-film.is-film .beat { bottom: var(--space-4); opacity: 0; visibility: hidden; text-wrap: balance; }
.hero-film.is-film .beat[data-side="left"] { left: var(--space-4); }
.hero-film.is-film .beat[data-side="right"] { right: var(--space-4); }
/* Placement: the texts that play over the photo sit at the bottom, on the edge gradient (the kit darkens the bottom
   edge only), so "top" is no longer used there. Next-day stays middle right: by then the plan is on the page colour. */
.hero-film.is-film .beat[data-pos="middle"] { top: 50%; bottom: auto; translate: 0 -50%; }
/* The plan slides to the left half; the offer takes the right half, centred top to bottom, on the page colour. */
.hero-film.is-film .beat-final { text-align: left; right: auto; left: 56%; max-width: min(34rem, 38vw); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
@media (max-width: 760px) {
  .hero-film.is-film .hero-copy, .hero-film.is-film .beat { left: var(--space-2); right: var(--space-2); bottom: var(--space-3); max-width: none; }
  /* On a phone the film is a narrow crop and the house fills it, so the beats leave the photo: one fixed band at the
     top of the stage, on a dense frost, in the page's text colour, whatever side or position they have on wide
     screens [Yendi 2026-10-31]. The offer bar has scrolled away before the first beat plays. */
  .hero-film.is-film .beat:not(.beat-final), .hero-film.is-film .beat[data-pos]:not(.beat-final) { top: var(--space-2); bottom: auto; translate: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius); color: var(--color-text); background: color-mix(in srgb, var(--color-bg) calc(var(--frost-opacity) + 20%), transparent); -webkit-backdrop-filter: blur(var(--frost-blur)); backdrop-filter: blur(var(--frost-blur)); text-wrap: pretty; }
  .hero-film.is-film .beat.beat-final[data-pos] { top: auto; bottom: var(--space-3); translate: none; max-width: none; left: var(--space-2); right: var(--space-2); padding: var(--space-3); background: color-mix(in srgb, var(--color-bg) var(--frost-opacity), transparent); -webkit-backdrop-filter: blur(var(--frost-blur)); backdrop-filter: blur(var(--frost-blur)); }
}

/* Brokerage proof band, right under the hero film. Names are text until Jesse clears logos. */
.brokerage-stat { font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); font-size: var(--text-h2); line-height: 1.2; margin-block: 0 var(--space-3); }
.brokerage-names { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-4); font-weight: 700; color: var(--color-text-muted); }
/* Logos drawn in one ink through a mask, so every brand sits in the same colour in light and dark. */
.brokerage-logo { display: block; height: var(--logo-h); background: var(--color-text-muted); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.brokerage-names li:has(.brokerage-logo[aria-label="Better Homes and Gardens"]) .brokerage-logo,
.brokerage-names li:has(.brokerage-logo[aria-label="eXp Realty"]) .brokerage-logo,
.brokerage-names li:has(.brokerage-logo[aria-label="Ming Tree Realtors"]) .brokerage-logo { height: calc(var(--logo-h) * 1.8); }
.brokerage-quote { max-width: 52rem; }
.brokerage-quote blockquote p { font-size: var(--text-h3); line-height: 1.45; margin-block: 0 var(--space-1); }
.brokerage-quote figcaption, .voice figcaption { display: flex; align-items: center; gap: var(--space-2); }
.voice-face { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; flex: none; }

/* Testimonials: the broker-owner quote leads with its photo, the agents sit under it. The bold phrase
   is an exact phrase of each quote. */
.voices-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-block-end: var(--space-4); }
.voices-head h2, .voices-head p { margin: 0; }
.voice { margin: 0; }
.voice blockquote { margin: 0; }
.voice blockquote p { margin: 0 0 var(--space-2); max-width: none; }
/* The highlighted phrase is marked over its full height [Yendi and Rafa 2026-10-07]. */
.voice blockquote strong { font-weight: 700; background: var(--color-mark); padding: 0.08em 0.2em; border-radius: 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* A large opening quote mark; the first two lines of the quote wrap beside it [Rafa 2026-10-07]. */
.voice blockquote p::before, .brokerage-quote blockquote p::before { content: "\201C"; float: left; height: 0.3em; margin-inline-end: 0.015em; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 8.8em; line-height: 0.8; color: var(--color-quote-mark); }
.voice-row blockquote p { font-size: var(--text-lead); }
.voice-lead { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.voice-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; }
.voice-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.voice-lead blockquote p { font-size: var(--text-h3); line-height: 1.45; }
.voice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-top: 1px solid var(--color-rule); }
@media (max-width: 900px) {
  .voice-lead, .voice-row { grid-template-columns: 1fr; gap: var(--space-3); }
}
/* Who we serve: four doors, one per kind of visitor. Each door is one link; the whole card is the target. */
.doors { padding-block: var(--space-4); }
.doors h2 { margin: 0 0 var(--space-3); }
.door-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.door-grid li { display: flex; max-width: none; }
.door { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; padding: var(--space-3); border: 0; border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.door h3 { margin: 0; font-size: var(--text-h2); }
.door p { margin: 0; }
.door-cta { margin-top: auto; padding-block-start: var(--space-2); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
/* Hover lifts the door with the kit gradient; it never inverts to Camera Black or White [Yendi and Rafa 2026-10-07]. */
.door:hover, .door:focus-visible { background: var(--surface-hover); }
@media (max-width: 1000px) { .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .door-grid { grid-template-columns: 1fr; } }

/* "Who we serve" in the header: a disclosure that works without JavaScript (details/summary). */
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -0.15rem; }
.nav-menu details[open] summary::after { rotate: 225deg; translate: 0 0.1rem; }
.nav-menu ul { position: absolute; top: calc(100% + var(--space-2)); left: calc(var(--space-2) * -1); z-index: 60; min-width: 17rem; margin: 0; padding: var(--space-1); list-style: none; background: var(--color-surface); border-radius: var(--radius); }
.nav-menu ul a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); border-radius: calc(var(--radius) / 2); color: var(--color-text); }
.nav-menu ul a:hover, .nav-menu ul a:focus-visible { background: var(--color-bg); }

/* Brokerages page. */
.brokers-head { padding-block-end: var(--space-3); }
.brokers-head h1 { margin: 0 0 var(--space-2); }
.brokers-intro { font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); font-size: var(--text-h2); line-height: 1.2; max-width: 40ch; margin: 0 0 var(--space-4); }
.brokers-head .brokerage-names { margin-block-end: 0; }
.brokers-office { background: var(--color-surface); }
.brokers-office h2 { margin: 0 0 var(--space-3); }
.office-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.office-list li { max-width: none; padding-block-start: var(--space-2); border-top: 2px solid var(--color-rule); }
.office-list h3 { margin: 0 0 var(--space-1); }
.office-list p { margin: 0; }
.brokers-voices h2 { margin: 0; }
.brokers-voices .voice-row { border-top: 0; padding-block-start: 0; }
.brokers-close { padding-block-start: 0; }
.brokers-close h2 { margin: 0 0 var(--space-2); }
.brokers-close .note-action { display: flex; flex-wrap: wrap; gap: var(--space-1); }
@media (max-width: 1000px) { .office-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
@media (max-width: 560px) { .office-list { grid-template-columns: 1fr; } }
/* Closing section: a dusk photo of another house (not the hero), with the three prices for the size the visitor chose. */
.final-cta { position: relative; padding: 0; min-height: min(46rem, 90vh); display: flex; align-items: flex-end; overflow: hidden; }
.final-cta-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.final-cta-card { position: relative; margin: var(--space-4); padding: var(--space-3); max-width: 44rem; border-radius: var(--radius); background: color-mix(in srgb, var(--color-bg) var(--frost-opacity), transparent); -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(1.2); backdrop-filter: blur(var(--frost-blur)) saturate(1.2); }
.final-size { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-weight: 700; }
.final-size[hidden] { display: none; }
.final-size select { font: inherit; font-weight: 400; color: var(--color-text); background: var(--color-surface); border: 0; border-radius: var(--radius-sm); padding: 0.6rem var(--space-2); }
/* Home-size dropdown (size-picker.js builds it over the select): the closed control and the open list
   share one surface and one shape, and the chevron sits inside the padding [Yendi and Rafa 2026-10-07]. */
.size-dd { position: relative; font-weight: 400; }
.size-dd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; min-width: 15rem; padding: 0 var(--space-2); font: inherit; color: var(--color-text); background: var(--color-surface); border: 0; border-radius: var(--radius-sm); cursor: pointer; font-variant-numeric: tabular-nums; }
.size-dd-btn::after { content: ""; flex: none; width: 0.45rem; height: 0.45rem; margin-inline-end: 0.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -0.15rem; }
.size-dd-btn[aria-expanded="true"]::after { rotate: 225deg; translate: 0 0.1rem; }
.size-dd-list { position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: 40; min-width: 100%; margin: 0; padding: var(--space-1); list-style: none; background: var(--color-surface); border-radius: var(--radius); }
.size-dd-list[hidden] { display: none; }
/* Over the closing photo the card sits at the bottom of a clipped section, so the list opens upward. */
.final-cta .size-dd-list { top: auto; bottom: calc(100% + 0.35rem); }
@media (max-width: 760px) { .final-cta .size-dd-list { top: calc(100% + 0.35rem); bottom: auto; } }
.size-dd-list li { display: flex; align-items: center; min-height: 44px; max-width: none; padding: 0 var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; }
.size-dd-list li:hover, .size-dd-list li.is-active { background: var(--color-bg); }
.size-dd-list li[aria-selected="true"] { background: var(--color-selected); color: var(--color-selected-text); }
.size-dd-select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.final-prices { list-style: none; margin: var(--space-3) 0 var(--space-2); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.final-prices li { display: grid; gap: 0.25rem; align-content: start; }
.final-price { font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); font-size: var(--text-price); line-height: 1; font-variant-numeric: tabular-nums; }
.final-note { margin: 0 0 var(--space-3); max-width: none; }
.final-cta .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
@media (max-width: 760px) {
  .final-cta { min-height: 0; display: block; }
  .final-cta-photo { position: static; height: 14rem; }
  .final-cta-card { margin: 0; border-radius: 0; border: 0; background: var(--color-bg); -webkit-backdrop-filter: none; backdrop-filter: none; padding: var(--space-3) var(--space-2); }
  .final-prices { grid-template-columns: 1fr; gap: var(--space-2); }
  .final-prices li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
}

/* Packages: three tiers on one baseline, PRO carried in the inverse colorway as the recommended pick.
   The Marketing Kit hangs off the grid as one band, because it is what PRO and PLUS add. */
.packages h2 { margin-block-end: var(--space-4); }
.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; }
.pkg { position: relative; display: flex; flex-direction: column; padding: var(--space-4) var(--space-3) var(--space-3); border-radius: var(--radius); }
.pkg h2, .pkg h3 { margin: 0; font-size: var(--text-h3); }
.pkg-price { margin: var(--space-2) 0 var(--space-1); font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); font-size: var(--text-price); line-height: 1; font-variant-numeric: tabular-nums; }
.pkg-band[hidden] { display: none; }
.pkg-ask { font: inherit; font-family: var(--font-body); font-size: var(--text-body); font-weight: 700; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
/* Home-size picker: one row of chips; the chosen size sets every card's price below it. */
.size-picker { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.size-picker[hidden] { display: none; }
.size-picker legend { padding: 0; margin-block-end: var(--space-1); font-weight: 700; }
.size-options { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.size-options label { position: relative; }
.size-options input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
/* Chips and tags are kit labels: DM Sans Bold, capitals, tracked [Yendi 2026-10-07; brand kit 1.4, label]. */
.size-options span { display: block; padding: 0.55rem var(--space-2); background: var(--color-surface); border-radius: 999px; font-family: var(--font-body); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.size-options input:checked + span { background: var(--color-selected); color: var(--color-selected-text); }
.size-options input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.pkg-blurb { margin: 0 0 var(--space-2); }
.pkg-list { list-style: none; padding: var(--space-2) 0 0; margin: 0 0 var(--space-3); border-top: 1px solid var(--color-rule); display: grid; gap: var(--space-1); }
.pkg-list li { padding-inline-start: 1.25rem; position: relative; }
.pkg-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 2px; background: var(--color-border); }
.pkg .btn { margin-top: auto; }
/* The recommended package is the one raised surface in the row, on the kit gradient [Yendi and Rafa 2026-10-07]. */
.pkg-featured { background: var(--surface-featured); }
.pkg-featured .pkg-list li::before { background: var(--color-rule); }
.pkg-badge { position: absolute; top: 0; left: var(--space-3); translate: 0 -50%; margin: 0; padding: 0.25rem var(--space-2); border-radius: 999px; background: var(--color-accent); color: var(--color-accent-text); font-family: var(--font-body); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.pkg-note { margin-block: var(--space-3) 0; max-width: none; }
/* Marketing Kit map: the property website is the hub; the flyer, the social pieces and the MLS
   links hang off one spine to its right. All pictures are Jesse's own sample kit. */
.kit { margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-top: 1px solid var(--color-rule); }
.kit-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: end; margin-block-end: var(--space-4); }
.kit-head h3 { margin: 0; font-size: var(--text-h2); }
.kit-head p { margin: 0; color: var(--color-text-muted); }
.kit-head p + p { margin-block-start: var(--space-1); }
.match { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.match-photo { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.match-text h3 { margin: 0 0 var(--space-2); font-size: var(--text-h2); }
.match-text p { margin: 0; color: var(--color-text-muted); }
.match-text p + p { margin-block-start: var(--space-2); }
.match-text p + h3 { margin-block-start: var(--space-4); }
.kit-map { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.kit-piece { margin: 0; }
.kit-piece figcaption { max-width: 34ch; }
.kit-piece img { display: block; width: 100%; height: auto; }
.kit-site { position: relative; }
.kit-site figcaption { margin-block-start: var(--space-2); max-width: 48ch; }
.kit-browser { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.kit-browser-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem var(--space-2); background: var(--color-surface, var(--color-bg)); border-bottom: 1px solid var(--color-border); }
.kit-browser-bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-border); }
.kit-browser-bar b, .kit-link b { font-weight: 400; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-browser-bar b { margin-inline-start: var(--space-1); padding: 0.1rem var(--space-2); border: 1px solid var(--color-border); border-radius: 999px; min-width: 0; }
.kit-branches { position: relative; display: grid; gap: var(--space-4); padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--color-rule); }
.kit-branches::before { content: ""; position: absolute; top: 50%; right: 100%; width: var(--space-5); height: 2px; background: var(--color-rule); }
.kit-branches .kit-piece { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.kit-branches .kit-piece::before { content: ""; position: absolute; top: 50%; right: 100%; width: var(--space-4); height: 2px; background: var(--color-rule); }
.kit-thumbs { display: flex; align-items: flex-end; gap: var(--space-1); }
.kit-thumbs img { border: 1px solid var(--color-border); border-radius: calc(var(--radius) / 2); }
.kit-flyer .kit-thumbs img { width: 6.5rem; }
.kit-social .kit-thumbs img:first-child { width: 4.25rem; }
.kit-social .kit-thumbs img:last-child { width: 3.75rem; }
.kit-link { display: grid; gap: 0.4rem; width: 100%; padding: var(--space-1); border: 1px solid var(--color-border); border-radius: calc(var(--radius) / 2); }
.kit-link i { height: 0.4rem; border-radius: 999px; background: var(--color-border); }
.kit-link i:nth-of-type(2) { width: 80%; }
.kit-link i:nth-of-type(3) { width: 55%; }

/* Shoot day: the seller checklist as a sheet of paper you can download, and who comes to the house. */
.shoot-day-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.shoot-day h2 { margin-block-start: 0; }
.prep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.prep-sheet { rotate: -2.5deg; border: 1px solid var(--color-border); border-radius: calc(var(--radius) / 2); overflow: hidden; background: var(--brand-white, #fff); }
.prep-sheet img { display: block; width: 100%; height: auto; }
.prep-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-block-start: var(--space-3); }
.btn-download { display: inline-flex; align-items: center; gap: var(--space-1); }
.crew { padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--color-rule); }
@media (max-width: 900px) {
  .shoot-day-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .crew { padding-inline-start: var(--space-3); }
}
@media (max-width: 560px) { .prep { grid-template-columns: 1fr; } .prep-sheet { max-width: 85%; } }

/* Featured add-ons: the four a picture explains. Two are before/after sliders driven by a range input. */
.addons-featured { margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-top: 1px solid var(--color-rule); }
.addons-featured h3 { margin: 0 0 var(--space-4); font-size: var(--text-h2); }
.addon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
.addon-media { border-radius: var(--radius); overflow: hidden; }
.addon-media img, .addon-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.addon-compare .addon-media, .addon-photo .addon-media { aspect-ratio: 3 / 2; }
.addon-text h4 { margin: var(--space-2) 0 0; font-size: var(--text-h3); }
.addon-text p { margin: 0; }
.addon-text .addon-price { margin-block-start: var(--space-1); font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); font-size: var(--text-h2); line-height: 1; font-variant-numeric: tabular-nums; }
.addon-price span:not([data-contract]) { font-family: var(--font-body); font-weight: 400; font-stretch: normal; font-size: var(--text-body); }
.addon-video { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.addon-video .addon-media { aspect-ratio: 9 / 16; }
.addon-video .addon-text h4 { margin-block-start: 0; }
.compare { position: relative; width: 100%; height: 100%; }
.compare img { position: absolute; inset: 0; }
.compare-before { clip-path: inset(0 calc(100% - var(--cut)) 0 0); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; translate: -1px 0; background: var(--color-bg); }
.compare-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.25rem; height: 2.25rem; translate: -50% -50%; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-bg); }
.compare-tag { position: absolute; bottom: var(--space-1); padding: 0.15rem var(--space-1); border-radius: calc(var(--radius) / 2); background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.compare-tag-before { left: var(--space-1); }
.compare-tag-after { right: var(--space-1); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }

@media (max-width: 900px) {
  .pkg-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .pkg-featured { order: -1; }
  .kit-head { grid-template-columns: 1fr; gap: var(--space-1); }
  .match { grid-template-columns: 1fr; gap: var(--space-3); }
  .kit-map { grid-template-columns: 1fr; gap: var(--space-4); }
  .kit-branches::before { top: auto; bottom: 100%; right: auto; left: -2px; width: 2px; height: var(--space-4); }
  .addon-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kit-branches { padding-inline-start: var(--space-3); }
  .kit-branches .kit-piece { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-2); }
  .kit-branches .kit-piece::before { width: var(--space-3); }
  .kit-flyer .kit-thumbs img { width: 5rem; }
  .kit-social .kit-thumbs img:first-child { width: 3.25rem; }
  .kit-social .kit-thumbs img:last-child { width: 2.75rem; }
}

/* Pricing page. The package cards are the home's; under them one table carries every home size,
   with the row of the chosen size in the inverse colorway (the same mark as the chosen chip). */
.pricing-packages { padding-block-end: var(--space-4); }
.pricing-head { margin-block-end: var(--space-4); }
.pricing-head h1 { margin: 0 0 var(--space-2); }
.pricing-head p { margin: 0; }
.size-table { margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-top: 1px solid var(--color-rule); }
.size-table summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; }
.size-table summary::-webkit-details-marker { display: none; }
.size-table summary::after { content: ""; width: 0.6em; height: 0.6em; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -0.15em; transition: rotate 0.2s; }
.size-table[open] summary::after { rotate: 225deg; translate: 0 0.15em; }
.size-table summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius); }
.size-table h2 { margin: 0; }
.size-table .table-scroll { margin-block-start: var(--space-3); }
.size-table table { table-layout: fixed; font-variant-numeric: tabular-nums; }
.size-table th, .size-table td { padding: var(--space-2); vertical-align: baseline; }
.size-table thead th { vertical-align: bottom; font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); line-height: 1.15; }
.size-table thead th:first-child { font-family: var(--font-body); font-weight: 400; font-stretch: normal; color: var(--color-text-muted); }
.size-table tbody th { font-weight: 400; white-space: nowrap; }
.size-table td { font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); font-size: var(--text-h3); line-height: 1.15; }
.size-table tr.is-on > * { background: var(--color-surface); border-bottom-color: transparent; }
.size-table tr.is-on > :first-child { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); }
.size-table tr.is-on > :last-child { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
/* the chosen package's column, and the price where it meets the chosen size */
.size-table .is-col { background: var(--color-surface); border-bottom-color: transparent; }
.size-table thead .is-col { border-start-start-radius: var(--radius); border-start-end-radius: var(--radius); }
.size-table tbody tr:last-child .is-col { border-end-start-radius: var(--radius); border-end-end-radius: var(--radius); }
.size-table tr.is-on > td.is-col { background: var(--color-selected); color: var(--color-selected-text); border-radius: var(--radius); }
.size-table td[data-col], .size-table th[data-col] { cursor: pointer; }
.size-table .pkg-ask { font-stretch: normal; }

/* Add-ons as a rate card: group name (and its example) on the left, the add-ons and prices on the right. */
.rates { padding-block-start: var(--space-4); }
.rates-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-block-end: var(--space-4); }
.rates-head h2, .rates-head p { margin: 0; }
.rate-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-3) var(--space-5); padding-block: var(--space-4); border-top: 1px solid var(--color-rule); }
.rate-group h3 { margin: 0; font-size: var(--text-h2); }
.rate-media { margin-block-start: var(--space-3); border-radius: var(--radius); overflow: hidden; }
.rate-media img, .rate-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rate-media-photo, .rate-media-compare, .rate-media-clip { aspect-ratio: 3 / 2; }
/* A plan is a white sheet: shown whole, with a border so it holds its edge in light mode. */
.rate-media-plan { border: 1px solid var(--color-border); background: var(--brand-white); }
.rate-media-plan img { height: auto; object-fit: contain; }
.rate-media-below { aspect-ratio: 16 / 9; max-width: 30rem; }
.rate-media-video { aspect-ratio: 9 / 16; width: 9.5rem; flex: none; margin-block-start: 0; }
.rate-group-head:has(.rate-media-video) { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.rate-list { list-style: none; margin: 0; padding: 0; }
.rate-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: baseline; max-width: none; padding-block: var(--space-2); border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.rate-list li:first-child { padding-block-start: 0; }
.rate-list li:last-child { border-bottom: 0; }
.rate-name { grid-column: 1; font-weight: 700; }
.rate-detail { grid-column: 1; color: var(--color-text-muted); }
.rate-price { grid-column: 2; grid-row: 1 / span 2; align-self: start; text-align: end; font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); font-size: var(--text-h2); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-price span:not([data-contract]) { font-family: var(--font-body); font-weight: 400; font-stretch: normal; font-size: var(--text-body); }
.rate-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.rate-card .rate-media { margin-block: 0 var(--space-2); }
.rate-card .rate-media-plan { aspect-ratio: 3 / 2; }
.rate-card .rate-media-plan img { height: 100%; }
.rate-card .rate-price { font-size: var(--text-h3); }

/* Three notes that sit outside the packages (retainer, travel, commercial), each under its own
   accent rule with its action on one baseline. Then the page closes on the surface band with the
   three prices for the chosen size and the Book button. */
.pricing-notes { padding-block: var(--space-4) var(--space-5); }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.note { display: flex; flex-direction: column; padding-block-start: var(--space-3); border-top: 2px solid var(--color-rule); }
.note h2 { margin: 0 0 var(--space-1); font-size: var(--text-h3); }
.note p { margin: 0 0 var(--space-2); }
.note p:last-child { margin-block-end: 0; }
.note-figure b { font-family: var(--font-heading); font-weight: var(--heading-weight); font-stretch: var(--heading-stretch); font-size: var(--text-h2); line-height: 1; font-variant-numeric: tabular-nums; }
.note .note-action { margin: auto 0 0; padding-block-start: var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pricing-close { background: var(--color-surface); }
.close-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-5); align-items: end; }
.close-prices .final-prices { margin-block-end: 0; }
.close-action p { margin: 0 0 var(--space-2); }
.close-action .btn { width: 100%; min-height: 56px; }
.pricing-close .final-size select { background: var(--color-bg); }
@media (max-width: 900px) {
  .rate-group { grid-template-columns: 1fr; }
  .rate-media-photo, .rate-media-plan { max-width: 28rem; }
  .notes-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .close-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}
@media (max-width: 560px) {
  .size-table th, .size-table td { padding: var(--space-2) var(--space-1); }
  .size-table tbody th { white-space: normal; }
  .rate-cards { grid-template-columns: 1fr; }
}

/* /login/: sign-in card beside a look at what the account holds. */
.login-grid { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--space-5); align-items: center; padding-block: var(--space-4); }
.login-card { padding: var(--space-4) var(--space-3); border-radius: var(--radius); background: var(--color-surface); }
.login-card h1 { margin-block: 0 var(--space-2); }
.login-form { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.login-form[hidden] { display: none; }
.login-form label { font-family: var(--font-heading); font-stretch: var(--heading-stretch); font-weight: 700; font-size: var(--text-body); margin-top: var(--space-1); }
.login-form input { font: inherit; font-size: var(--text-body); color: var(--color-text); background: var(--color-bg); padding: 0.75rem var(--space-2); border: 0; border-radius: var(--radius-sm); width: 100%; }
.login-form input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.login-form .btn { margin-top: var(--space-2); width: 100%; justify-content: center; }
.login-links { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.login-aside .kit-browser img { display: block; width: 100%; height: auto; }
.login-aside h2 { margin-top: var(--space-3); }
.login-account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); padding-left: 1.2em; }
@media (max-width: 860px) {
  .login-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .login-account { grid-template-columns: minmax(0, 1fr); }
}

/* /architecture/#quote: scripted quote chat. */
/* Vacation rental booking details and the pay button, under the order summary (src/scripts/rental-pay.js). */
.rental-pay { margin-block-start: var(--space-3); }
.rental-pay form { display: grid; gap: var(--space-2); }
.rental-pay h3 { margin: 0; font-size: var(--text-h3); }
.rental-pay label { display: grid; gap: 0.35rem; font-weight: 700; }
.rental-pay input { font: inherit; font-weight: 400; font-size: var(--text-body); color: var(--color-text); background: var(--color-bg); border: 0; border-radius: var(--radius-sm); padding: 0.7rem var(--space-2); width: 100%; min-width: 0; }
.rental-pay input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.rental-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-1); align-items: end; }
.rental-note, .rental-status { margin: 0; color: var(--color-text-muted); }
.rental-status:empty { display: none; }
.rental-done h3 { margin: 0 0 var(--space-1); }
.rental-done p { margin: 0; }
.rental-pay .book-actions { margin-block-start: var(--space-2); }
/* The chat stays as a plain link here, so the pay button is the one action of the block. */
.rental-pay .book-actions .btn { background: none; color: var(--color-link); padding: 0; min-height: 44px; text-decoration: underline; font-weight: 400; }
/* Below the drawing set: the project-team tours and the output formats side by side on raised cards, then the quote with its
   words on the left and the chat on the right [Yendi 2026-10-13: 'that page needs some work still (after the sheets...)']. */
.arch-deliver-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); align-items: stretch; }
.arch-deliver .card { max-width: none; padding: var(--space-4); gap: var(--space-2); }
.arch-deliver h2 { font-size: var(--text-h2); margin: 0; }
.arch-deliver p { margin: 0; }
.arch-deliver .format-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.arch-deliver .format-list li { padding: 0.5rem var(--space-2); border-radius: var(--radius-full); background: var(--color-bg); font-weight: 700; }
.arch-turnaround { font-family: var(--font-heading); font-stretch: var(--heading-stretch); font-weight: 700; font-size: var(--text-h3); }
.quote > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; column-gap: var(--space-5); align-items: start; }
.quote > .wrap > h2, .quote > .wrap > p { grid-column: 1; }
.quote > .wrap > .quote-chat { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; max-width: none; }
@media (max-width: 900px) {
  .arch-deliver-grid { grid-template-columns: 1fr; }
  .quote > .wrap { display: block; }
  .quote > .wrap > .quote-chat { margin-top: var(--space-3); }
}
.quote-chat { max-width: 40rem; margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--color-surface); }
.quote-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.quote-msg { max-width: 85%; padding: 0.75rem var(--space-2); border-radius: var(--radius); }
.quote-msg p { margin: 0; }
.quote-bot { align-self: flex-start; background: var(--color-bg); color: var(--color-text); }
.quote-user { align-self: flex-end; background: var(--color-accent); color: var(--color-accent-text); font-weight: 700; }
.quote-form { margin-top: var(--space-3); }
.quote-form label { display: block; font-family: var(--font-heading); font-stretch: var(--heading-stretch); font-weight: 700; margin-bottom: var(--space-1); }
.quote-row { display: flex; gap: var(--space-1); }
.quote-row input { flex: 1; min-width: 0; font: inherit; font-size: var(--text-body); color: var(--color-text); background: var(--color-bg); padding: 0.75rem var(--space-2); border: 0; border-radius: var(--radius-sm); }
.quote-row input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.quote-options { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.quote-error { margin: var(--space-1) 0 0; font-weight: 700; }
.quote-hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .quote-row { flex-direction: column; } .quote-msg { max-width: 100%; } }

/* /architecture/: the scanned building's drawings carry the page. */
.drawing-line { filter: var(--drawing-filter); }
.arch-hero { padding-block: var(--space-4) var(--space-3); overflow: hidden; }
.arch-hero-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-4); align-items: end; }
.arch-hero-head h1 { margin: 0; }
.arch-hero-lede p { margin: 0 0 var(--space-2); }
.arch-hero-lede .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.arch-hero-drawing { margin: var(--space-4) auto 0; max-width: 1500px; padding-inline: var(--space-2); }
.arch-hero-drawing figcaption { margin-top: var(--space-2); color: var(--color-text-muted); }
.scan-stage { position: relative; }
.scan-stage img { display: block; width: 100%; height: auto; }
.scan-line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--color-border); box-shadow: 0 0 1.5rem 0.25rem color-mix(in srgb, var(--color-accent) 60%, transparent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .scan-stage img { animation: scan-reveal 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .scan-line { animation: scan-sweep 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}
@keyframes scan-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scan-sweep { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.arch-services { background: var(--color-surface); }
.arch-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.arch-row + .arch-row { margin-top: var(--space-5); }
.arch-row.is-flipped .arch-media { order: 2; }
.arch-media { margin: 0; }
.arch-media img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
/* line drawings sit on a plate; the plate takes the colour because dark mode inverts the image itself */
.arch-plate { padding: var(--space-2); border-radius: var(--radius); background: var(--color-bg); }
.arch-plate img { border-radius: 0; }
/* dark [Yendi 2026-10-07]: the plate is the raised surface, so the band behind it goes back to the page ground */
:root[data-theme="dark"] .arch-plate { background: var(--surface-featured); }
:root[data-theme="dark"] .arch-services { background: var(--color-bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .arch-plate { background: var(--surface-featured); }
  :root:not([data-theme="light"]) .arch-services { background: var(--color-bg); }
}
.arch-media figcaption { margin-top: var(--space-1); }
.arch-text h2 { margin-top: 0; }
.arch-bullets { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); }
.arch-bullets li { padding-top: var(--space-1); border-top: 2px solid var(--color-rule); font-weight: 700; }

.sheets { overflow: hidden; }
.sheets-head h2 { margin-top: 0; }
.sheets-head > * { max-width: var(--measure); }
/* The table: paper is white in both modes, like the real sheets. */
.sheet-table { margin-top: var(--space-4); padding: var(--space-5) var(--space-2) var(--space-4); background: var(--color-surface); }
.sheet-pile { list-style: none; position: relative; margin: 0 auto; padding: 0; width: min(100%, 46rem); aspect-ratio: 3 / 2; }
.paper { position: absolute; inset: 0; max-width: none; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--brand-white); color: var(--brand-espresso); border: 1px solid var(--brand-warm-gray); transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: transform 0.75s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.3s ease; cursor: pointer; }
.paper img { width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: var(--space-2); }
.paper-title { justify-self: end; margin: 0 var(--space-1) var(--space-1); padding: 0.15rem var(--space-1); border: 1px solid var(--brand-espresso); }
.paper-title b { font-family: var(--font-heading); font-stretch: var(--heading-stretch); }
.sheet-table.is-armed .paper:not(.is-down) { transform: translate(var(--x), -160%) rotate(calc(var(--r) * 7)); opacity: 0; }
.paper.is-leaving { transform: translate(115%, var(--y)) rotate(12deg); opacity: 0; }
.sheet-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin-top: var(--space-4); }
.sheet-now { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sheet-table { position: relative; overflow: hidden; }   /* falling sheets enter at the table's edge, never over the heading */
.sheet-index-label { margin: var(--space-4) 0 var(--space-2); }
.sheet-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.sheet-index dt { font-weight: 700; }
.sheet-index dd { margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-1); }
.sheet-index a { display: inline-block; padding-block: 0.5rem; }
.sheet-dialog { width: min(96vw, 1500px); max-height: 94vh; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); }
.sheet-dialog::backdrop { background: color-mix(in srgb, var(--brand-camera-black) 70%, transparent); }
.sheet-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-bg); }
.sheet-dialog-bar p { margin: 0; font-weight: 700; }
.sheet-dialog-body { padding: var(--space-2); overflow: auto; }
.sheet-dialog-body img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; }

.arch-band { background: var(--color-surface); }
.arch-band .wrap > * { max-width: var(--measure); }
.format-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
.format-list li { padding: 0.5rem var(--space-2); background: var(--color-surface); border-radius: 999px; font-family: var(--font-body); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
@media (max-width: 900px) {
  .arch-hero-head, .arch-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .arch-row.is-flipped .arch-media { order: 0; }
  .sheet-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper-title { display: none; }
  .sheet-now { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin: var(--space-2) auto 0; text-align: center; font-weight: 700; max-width: none; }
}

/* The model that turns with the pointer: canvas over a still image, edges faded into the page. */
.turntable { position: relative; touch-action: pan-y; cursor: ew-resize; -webkit-mask-image: radial-gradient(ellipse 58% 72% at 50% 50%, #000 48%, transparent 96%); mask-image: radial-gradient(ellipse 58% 72% at 50% 50%, #000 48%, transparent 96%); }
.turntable img { display: block; width: 100%; height: auto; border-radius: 0; }
.turntable canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.turntable.is-live canvas { display: block; }
.turntable.is-live img { visibility: hidden; }
.arch-row:has(.is-turntable) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 900px) { .arch-row:has(.is-turntable) { grid-template-columns: minmax(0, 1fr); } }

/* Book calculator (structure). Two columns on desktop: the choices, and a summary that follows the scroll. */
.book-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-block-start: var(--space-3); }
.book-step { margin-block-end: var(--space-4); padding: 0; border: 0; }
.book-step h2 { margin-block: 0 var(--space-2); font-size: var(--text-h3); }
.book-step h3 { margin: var(--space-3) 0 var(--space-1); font-family: var(--font-body); font-size: var(--text-body); font-weight: 700; }
.book-step .size-picker { margin: 0; }
.book-pkgs { display: grid; gap: var(--space-2); }
.book-pkg { position: relative; display: block; cursor: pointer; }
.book-pkg > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.book-pkg-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: 0.25rem; padding: var(--space-2) var(--space-3); background: var(--color-surface); border-radius: var(--radius); }
.book-pkg-name { font-family: var(--font-heading); font-stretch: var(--heading-stretch); font-weight: var(--heading-weight); font-size: var(--text-h3); }
.book-pkg-price { font-family: var(--font-heading); font-stretch: var(--heading-stretch); font-weight: var(--heading-weight); font-size: var(--text-h2); line-height: 1; font-variant-numeric: tabular-nums; text-align: end; }
.book-pkg-blurb, .book-pkg-includes { grid-column: 1 / -1; }
.book-pkg-includes { color: var(--color-text-muted); }
/* The chosen package takes a kit gradient. Gold is kept for buttons and other things you click [Yendi 2026-10-07]. */
.book-pkg > input:checked + .book-pkg-body { background: var(--color-chosen) var(--surface-chosen); color: var(--brand-white); }
.book-pkg > input:checked + .book-pkg-body .book-pkg-includes { color: inherit; }
.book-pkg > input:focus-visible + .book-pkg-body { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.book-addons { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--color-border); }
.book-addon { border-block-end: 1px solid var(--color-border); }
.book-addon[hidden] { display: none; }
.book-addon label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; cursor: pointer; }
.book-addon input[type="checkbox"] { width: 1.35rem; height: 1.35rem; accent-color: var(--color-selected); margin: 0; }
.book-addon input[type="number"] { width: 4rem; font: inherit; font-size: var(--text-body); padding: 0.35rem 0.5rem; border: 0; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.book-addon-text { display: grid; }
.book-addon-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.book-addon-price > span:not([data-contract]) { font-weight: 400; color: var(--color-text-muted); }
.book-summary { position: sticky; top: calc(var(--header-h) + var(--space-2)); padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius); }
.book-summary h2 { font-size: var(--text-h3); margin-block-end: var(--space-1); }
.book-lines { list-style: none; margin: 0; padding: 0; }
.book-lines li { display: flex; justify-content: space-between; gap: var(--space-2); padding: 0.4rem 0; font-variant-numeric: tabular-nums; }
.book-lines li span:last-child { white-space: nowrap; }
.book-total { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-1) 0 var(--space-2); padding-block-start: var(--space-2); border-block-start: 2px solid var(--color-text); font-weight: 700; }
/* Order form (HD Photo Hub) fills the screen under the sticky header and scrolls inside itself: the form
   is on another domain and does not report its height. */
.book-form { margin-block-start: var(--space-2); scroll-margin-top: var(--header-h); }
.book-form iframe { display: block; width: 100%; height: calc(100dvh - var(--header-h)); min-height: 36rem; border: 0; background: var(--color-bg); }
.book-total[hidden] { display: none; }
.book-total strong { font-family: var(--font-heading); font-stretch: var(--heading-stretch); font-weight: var(--heading-weight); font-size: var(--text-price); line-height: 1; font-variant-numeric: tabular-nums; }
.book-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-block: var(--space-2); }
.book-next { padding-inline-start: 1.25rem; }
@media (max-width: 900px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-summary { position: static; }
}

/* Service area map (structure). Colors are the role tokens; labels are HTML so they keep the 16px floor. */
/* Text and map start at the same top edge; with seven counties the map is tall, and centering pushed the text down [Yendi 2026-10-14: 'a lot of white space on the top']. */
.area { padding-block-start: var(--space-4); }
.area-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.area-text { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
.area-map { position: relative; margin: 0; width: 100%; max-width: 28rem; justify-self: center; }
.area-map svg { display: block; width: 100%; height: 100%; }
.area-county { fill: var(--color-shape); }
.area-county-far { fill: none; }
.area-near { fill: var(--color-accent); }
.area-line { fill: none; stroke: var(--color-bg); stroke-width: 2; stroke-linejoin: round; }
.area-line-far { stroke: var(--color-text-muted); stroke-width: 1; }
.area-ring { fill: none; stroke: var(--color-text); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.area-dot { fill: var(--color-text); stroke: var(--color-bg); stroke-width: 3; }
.area-label { position: absolute; transform: translate(-50%, -50%); padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--color-bg); color: var(--color-text); font-size: var(--text-body); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.area-label-city { transform: translate(calc(-100% - 0.9rem), -50%); }
.area-label-radius { transform: translate(-50%, calc(-100% - 0.5rem)); font-weight: 400; }
@media (max-width: 900px) {
  .area-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .area-text { position: static; }
}


/* Vacation Rentals. Photos keep their own 3:2 frame, uncropped and untinted (brand kit, Photography). */
.vr-photo { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.vr-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-5); align-items: center; }
.vr-list .price { font-family: var(--font-heading); font-stretch: var(--heading-stretch); font-weight: var(--heading-weight); font-size: var(--text-h2); margin: 0 0 var(--space-2); }
.vr-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.vr-includes-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.vr-list { padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius); }
.vr-list ul { margin: 0 0 var(--space-3); padding-inline-start: 1.2em; display: grid; gap: var(--space-1); }
@media (max-width: 800px) {
  .vr-hero-grid, .vr-includes-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .vr-gallery-grid { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* App: the stores' official badges, unaltered, at the same height, with the clear space each store asks for. */
.store-badges { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-block: var(--space-3); }
.store-badges a { display: inline-flex; border-radius: var(--radius-sm); }
.store-badges img { display: block; height: 48px; width: auto; }

/* Service Area: what is shot in every county, as a two-column list under the map. */
.area-services { padding-block-start: 0; }
.area-services h2 { margin-block-end: var(--space-2); }
.area-service-list { columns: 2; column-gap: var(--space-5); margin: 0 0 var(--space-3); padding-inline-start: 1.2em; }
.area-service-list li { break-inside: avoid; margin-block-end: var(--space-1); }
@media (max-width: 700px) { .area-service-list { columns: 1; } }

/* Current offer. A slim line under the header on every page and a block at the top of Pricing with the
   terms. Raised surface, kit label; Gold stays on the button. */
.tag { font-family: var(--font-body); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.offer-bar { background: var(--color-surface); }
/* On the home the bar lies over the top of the hero photo and leaves with the first scroll, so the
   photo starts right under the header [Yendi 2026-10-07: "It should lay on top of it"]. */
body:has(.hero-film) .top-bars { position: absolute; top: var(--header-h); left: 0; right: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) var(--frost-opacity), transparent); -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(1.2); backdrop-filter: blur(var(--frost-blur)) saturate(1.2); }
.offer-bar .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem var(--space-2); padding-block: 0.6rem; }
.offer-bar .tag { color: var(--color-text-muted); }
.offer-bar a { font-weight: 700; white-space: nowrap; }
body:has(.hero-film) .top-bars .offer-bar { background: none; }
.offer-bar + .offer-bar { border-top: 1px solid var(--color-border); }
.sheet-dialog:has(video) { width: min(96vw, 1280px); }
.sheet-dialog-body video { display: block; width: 100%; height: auto; max-height: 80vh; }
.offer { margin-block: var(--space-4) 0; padding: var(--space-4); background: var(--surface-featured); border-radius: var(--radius); scroll-margin-top: calc(var(--header-h) + var(--space-2)); }
.offer .tag { margin: 0 0 var(--space-1); color: var(--color-text-muted); }
.packages .offer h2, .offer h2 { margin: 0 0 var(--space-2); max-width: 30ch; }
.offer + .size-picker { margin-block-start: var(--space-4); }
.offer ul { margin: 0 0 var(--space-3); padding-inline-start: 1.2em; display: grid; gap: 0.35rem; }
.offer p:last-child { margin: 0; }
.offer-has-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.offer-media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; }
.offer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .offer-has-media { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .offer-media { order: -1; } }
@media (max-width: 700px) { .offer { padding: var(--space-3); } }

/* Listings page: the public list of listings, read from HD Photo Hub at build time (tools/listings.mjs).
   A card is a raised surface with the photo flush to its top edge; the whole card is one link. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.listings { padding-block: var(--space-4) var(--space-5); }
.listings-find { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); margin-block: var(--space-3); max-width: 44rem; }
.listings-find input, .listings-find select { width: 100%; font: inherit; font-size: var(--text-body); color: var(--color-text); background: var(--color-surface); border: 0; border-radius: var(--radius-sm); padding: 0.75rem var(--space-2); }
.listings-find input, .listings-find select { min-height: 44px; }
.listings-town { position: relative; display: block; }
.listings-town select { -webkit-appearance: none; appearance: none; padding-inline-end: 2.75rem; }
.listings-town::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); rotate: 45deg; translate: 0 -70%; pointer-events: none; }
.listings-find input::placeholder { color: var(--color-text-muted); opacity: 1; }
.listings-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.listing[hidden] { display: none; }
.listing a { display: flex; flex-direction: column; height: 100%; color: var(--color-text); text-decoration: none; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; }
.listing-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--color-shape); }
.listing-body { display: grid; gap: 0.25rem; padding: var(--space-2); flex: 1; align-content: start; }
.listing-address { margin: 0; font-weight: 700; font-size: var(--text-lead); line-height: 1.25; text-wrap: pretty; }
.listing-town { margin: 0; color: var(--color-text-muted); }
.listing-agent { margin: var(--space-1) 0 0; display: flex; align-items: center; gap: 0.75rem; color: var(--color-text-muted); }
.listing-agent img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex: none; }
.listing-agent strong { display: block; color: var(--color-text); }
.listing a:hover .listing-address, .listing a:focus-visible .listing-address { text-decoration: underline; text-underline-offset: 0.18em; }
.listing a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.listings-empty { margin-block: var(--space-4); }
.listings-more { margin-block: var(--space-4) 0; text-align: center; }
@media (max-width: 480px) {
  .listings-find { grid-template-columns: 1fr; }
}
.listings-find[hidden], .listings-more [hidden], .listings-empty[hidden] { display: none; }
/* Town pages (/listings/{town}/) and the links between them: each town is a raised pill. */
.town-links ul { list-style: none; margin: var(--space-3) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.town-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); text-decoration: none; font-weight: 500; }
.town-links a:hover, .town-links a:focus-visible { background: var(--color-selected); color: var(--color-selected-text); }
.listings-book { margin-block: var(--space-4) 0; text-align: center; }
.area-towns { padding-block: var(--space-4) var(--space-5); }

/* About page */
.about-head { max-width: 46rem; }
.about-intro { font-size: var(--text-lead, 1.25rem); color: var(--color-text-muted); }
.founders { list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 20rem)); gap: var(--space-4); }
.founder img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; border-radius: var(--radius); }
.founder-name { margin: var(--space-2) 0 0; font-weight: 700; color: var(--color-text); }
.founder-role { margin: 0; color: var(--color-text-muted); }
.about-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-block-end: var(--space-5); }
.about-part h2 { font-size: var(--text-h3); margin: 0 0 var(--space-2); }
.about-part p { margin: 0; }
.about-careers { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-5); }
.about-careers h2 { font-size: var(--text-h3); margin: 0 0 var(--space-1); }
.about-careers p { margin: 0; }
.about-voices { margin-block-end: var(--space-5); padding-block-start: var(--space-4); border-top: 1px solid var(--color-rule); }
@media (max-width: 900px) {
  .about-body { grid-template-columns: 1fr; gap: var(--space-4); }
  .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
}

/* Reviews carousel: a row that scrolls sideways and snaps to each card */
.reviews-track { list-style: none; margin: 0; padding: 0 0 var(--space-2); display: grid; grid-auto-flow: column; grid-auto-columns: 24rem; column-gap: var(--space-3); align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.review { scroll-snap-align: start; background: var(--color-surface); border-radius: var(--radius); padding: var(--space-3); display: grid; gap: var(--space-2); }
.review-stars { margin: 0; display: flex; gap: 2px; color: var(--color-text); }
.review-stars svg { fill: currentColor; }
.review-text { margin: 0; }
.review-text p { margin: 0; max-width: none; }
.review-text p + p { margin-block-start: var(--space-1); }
.review.is-clamped .review-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.review-more { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--color-text); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; min-height: 2.75rem; }
.review-by { margin: 0; display: grid; }
.review-by span { color: var(--color-text-muted); }
.reviews-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-block-start: var(--space-2); }
.reviews-nav { margin: 0; display: flex; gap: var(--space-1); }
.reviews-nav[hidden] { display: none; }
.reviews-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.reviews-btn:disabled { opacity: 0.4; cursor: default; }
.reviews-btn:focus-visible, .review-more:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media (max-width: 600px) { .reviews-track { grid-auto-columns: 86%; } }

/* Reviews stage: one review at a time on the kit's Copper Glow ground (dark in both themes).
   On dark: headings White, text Quartz, links and marks Gold, buttons Gold with a Camera Black sign. */
.stage { background: var(--brand-espresso) linear-gradient(180deg, var(--brand-copper-glow-top), var(--brand-espresso)); color: var(--brand-quartz); padding-block: var(--space-5); overflow: hidden; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--space-5); align-items: start; }
.stage h2 { margin: 0; font-size: var(--text-h3); color: var(--brand-white); }
.stage a { color: var(--brand-gold); }
.stage-score { margin: var(--space-3) 0 var(--space-2); display: grid; gap: var(--space-1); }
.stage-num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(5rem, 3rem + 9vw, 10rem); line-height: 0.85; letter-spacing: 0; color: var(--brand-gold); font-variant-numeric: lining-nums; }
.stage-stars { display: flex; gap: 3px; color: var(--brand-gold); }
.stage-stars svg { fill: currentColor; }
.stage-slides { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.stage-slide figure { margin: 0; }
.stage-pull { margin: 0; }
.stage-pull p { margin: 0; max-width: 22ch; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.12; letter-spacing: 0; color: var(--brand-white); text-wrap: balance; max-width: none; }
.stage-slide figcaption { margin-block-start: var(--space-3); display: grid; }
.stage-slide figcaption strong { color: var(--brand-white); }
.stage-full { margin-block-start: var(--space-2); }
.stage-full summary { display: inline-block; min-height: 2.75rem; line-height: 2.75rem; cursor: pointer; color: var(--brand-gold); text-decoration: underline; text-underline-offset: 0.18em; list-style: none; }
.stage-full summary::-webkit-details-marker { display: none; }
.stage-full div { max-width: 62ch; }
.stage-full p { margin: 0 0 var(--space-1); max-width: none; }
.stage-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-4); }
.stage-controls[hidden] { display: none; }
.stage-ticks { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex: 1; max-width: 26rem; }
.stage-ticks li { flex: 1; }
.stage-ticks button { display: block; width: 100%; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.stage-ticks i { display: block; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--brand-warm-gray) 45%, transparent); overflow: hidden; position: relative; }
.stage-ticks i::after { content: ""; position: absolute; inset: 0; background: var(--brand-gold); transform: scaleX(0); transform-origin: left; }
.stage-ticks .is-done i::after { transform: scaleX(1); }
.stage-ticks .is-on i::after { transform: scaleX(1); }
.stage-buttons { margin: 0; display: flex; gap: var(--space-1); }
.stage-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--radius-sm); background: var(--brand-gold); color: var(--brand-camera-black); cursor: pointer; }
.stage-btn .i-play { display: none; }
.stage.is-paused .stage-btn .i-play { display: inline; }
.stage.is-paused .stage-btn .i-pause { display: none; }
.stage :focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }
/* With the script: slides share one cell and only the current one shows */
.stage.is-live .stage-slides { gap: 0; }
.stage.is-live .stage-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.stage.is-live .stage-slide.is-on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .stage.is-live .stage-slide { transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
  .stage.is-live .stage-slide.is-on { transition: opacity 0.6s ease 0.15s, visibility 0s; }
  .stage.is-live .stage-slide .stage-pull p { transform: translateY(0.4em); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
  .stage.is-live .stage-slide.is-on .stage-pull p { transform: none; }
  .stage.is-playing .stage-ticks .is-on i::after { animation: stage-fill var(--stage-ms, 7000ms) linear both; }
  @keyframes stage-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.about-book { padding-block: var(--space-5); }
@media (max-width: 900px) {
  .stage-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .stage-score { grid-template-columns: auto 1fr; align-items: end; column-gap: var(--space-2); }
  .stage-num { grid-row: span 2; }
  .stage-controls { flex-wrap: wrap; }
  .stage-ticks { max-width: none; flex-basis: 100%; }
}

/* App page: the copy beside four phone frames holding the app's own screens */
.app-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: var(--space-5); align-items: center; }
.app-lead { font-size: var(--text-lead); color: var(--color-text-muted); }
.app-phones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); align-items: start; }
.app-phones li:nth-child(2) { margin-block-start: var(--space-5); }
.app-phones li:nth-child(3) { margin-block-start: var(--space-3); }
.app-phones li:nth-child(4) { margin-block-start: var(--space-5); }
.app-more { padding-block-start: 0; }
.feature-cards { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.feature-cards h3 { font-size: var(--text-h3); margin: 0; }
.feature-cards p { margin: 0; }
.app-get { grid-column: 1 / -1; max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.app-get .store-badges { margin-block: 0; }
@media (max-width: 900px) { .feature-cards { grid-template-columns: 1fr; } }
.phone { margin: 0; }
.phone-body { background: var(--brand-camera-black); border-radius: 1.75rem; padding: 0.5rem; }
.phone-body img { display: block; width: 100%; height: auto; border-radius: 1.3rem; }
.phone figcaption { margin-block-start: var(--space-1); text-align: center; color: var(--color-text-muted); }
:root[data-theme="dark"] .phone-body { background: var(--brand-chocolate); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone-body { background: var(--brand-chocolate); } }
@media (max-width: 900px) {
  .app-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .app-phones { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-2); }
  .app-phones li { scroll-snap-align: center; }
  .app-phones li:nth-child(n) { margin-block-start: 0; }
}


/* /contact/: the message form, with the two optional text-message boxes (A2P opt-in). */
.contact-grid { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); align-items: start; }
.contact-form textarea { font: inherit; font-size: var(--text-body); color: var(--color-text); background: var(--color-bg); padding: 0.75rem var(--space-2); border: 0; border-radius: var(--radius-sm); width: 100%; resize: vertical; }
.contact-form textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.contact-form .contact-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1); align-items: start; margin-top: var(--space-2); font-family: var(--font-body); font-weight: 400; }
.contact-form .contact-consent input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--color-button); }
.contact-note { margin-top: var(--space-2); }
.contact-aside { padding-block-start: var(--space-4); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .contact-aside { padding-block-start: 0; } }

/* /text/: A2P opt-in page, one column of reading width. */
.text-optin { max-width: var(--measure); padding-block: var(--space-5); }
.text-consent { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }