/* The Agents Property Consultants — "Round Top Barn", Warwick Road, Knowle.
 *
 * Real client demo, 2026-10-15 — built on Terrie Williams' go-ahead for a
 * real listing. Forked from showcase-linden-vale/ (itself forked from
 * site/, the real "Summit Realty" live demo) — the scroll-driven canvas
 * mechanic below is UNCHANGED from that proven build; only the color
 * system, copy, and photography are this page's own. Photography and all
 * listing facts are real, pulled from theagents.properties.
 *
 * Design direction: committed fully to crisp/minimal — warm-white paper and
 * near-true-black (not warm brown-black) for the dark sections, so the
 * light/dark contrast reads sharp and confident rather than splitting the
 * difference. One accent (muted brass) used sparingly, per the researched
 * brief (see daily note 2026-09-21): photography and typographic confidence
 * carry the premium feeling, not added motion.
 *
 * WHAT DID NOT CHANGE: every mechanic the scroll-driven canvas walkthrough
 * depends on — .canvas-wrap, #scroll-container's height/z-index, the fixed
 * .scroll-section positioning trick, and the exact class names app.js
 * queries (.section-label/.section-heading/.section-body/.cta-button/.stat,
 * .stat-number[data-value]) — is untouched below. Only WHERE it runs
 * changed (now inside #walkthrough, its own scroll container — see the
 * comment above that rule) plus this file's color/type/static-section work.
 */

:root {
  --paper: #f7f5f1;
  --white: #fff;
  --ink: #141414;
  --ink-soft: #656560;
  --ink-faint: #96908a;
  --line: #ddd8d0;
  --line-soft: #eae6df;
  --slate: #242424;
  --slate-deep: #111111;      /* true near-black, not warm brown — crisp direction */
  --slate-deep-78: rgba(17, 17, 17, .84);
  --gold: #b3905c;            /* single muted-brass accent, used sparingly — labels/suffixes only */
  --bg-light: var(--paper);
  --bg-dark: var(--slate-deep);
  --text-on-light: var(--ink);
  --text-on-dark: #f3efe7;
  --accent: var(--gold);
  --muted: var(--ink-soft);
  --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --max: 1200px;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg-light);
  color: var(--text-on-light);
  font-family: var(--font-body);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.label {
  font-family: var(--font-body); font-size: .66rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-faint);
  line-height: 1.5;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.band { padding: clamp(4.5rem, 10vw, 8.5rem) 0; }

/* ===== Loader ===== */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-brand {
  font-family: var(--font-display);
  font-size: 1.5rem; letter-spacing: .14em;
  color: var(--text-on-dark);
  font-weight: 400;
}
.loader-brand span { color: var(--accent); font-style: italic; }
#loader-bar-track {
  width: 220px; height: 1px; background: rgba(243,239,231,0.15);
}
#loader-bar { width: 0%; height: 100%; background: var(--accent); transition: width 0.2s ease; }
#loader-percent {
  font-size: 0.72rem; letter-spacing: 0.15em; color: var(--ink-faint);
  font-family: var(--font-body);
}

/* ===== Header ===== */
/* mix-blend-mode:difference reads cleanly over the hero photo AND the
   canvas walkthrough with zero extra JS — kept from the original build. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 1.6rem 5vw;
  mix-blend-mode: difference;
  transition: background-color .25s ease, border-color .25s ease;
}
.site-header nav { display: flex; justify-content: space-between; align-items: center; }
.logo {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: 1.28rem; letter-spacing: .05em; color: #fff;
  transition: color .15s ease;
}
.logo span { font-style: italic; }
/* Address/price, hidden until the header goes solid — same fade-in pattern
   as the current client template's topbar-mid, so the bar reads as a plain
   brand mark over the hero and picks up the listing facts once solid. */
.header-mid {
  display: flex; align-items: baseline; gap: 1.4rem;
  opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease;
  color: #fff;
}
.site-header.solid .header-mid { opacity: 1; transform: none; }
.header-mid .h-addr { font-family: var(--font-display); font-size: .95rem; }
.header-mid .h-price { font-family: var(--font-body); font-size: .72rem; letter-spacing: .08em; color: rgba(243,239,231,.65); }
.site-header.solid .header-mid .h-price { color: var(--ink-soft); }
@media (max-width: 900px) { .header-mid { display: none; } }
.nav-links { display: flex; gap: 2.5rem; align-items: center; }
.nav-links a {
  color: #fff; text-decoration: none; font-size: 0.68rem;
  letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500;
  transition: color .15s ease;
}
/* Real bug found 2026-10-11: mix-blend-mode:difference reads cleanly over
   the dark hero/canvas, but once scrolled into the plain-light "Full
   details" sections below, a fixed difference-blended header garbles and
   overlaps the page's own heading/footer text instead of reading as a
   clean bar. Solved the same way the current client template's sticky
   topbar does it: go solid-background the moment the hero scrolls out of
   view (toggled by an IntersectionObserver on .hero-standalone in app.js),
   same mechanism, no blend-mode past that point. */
.site-header.solid {
  mix-blend-mode: normal;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header.solid .logo,
.site-header.solid .nav-links a { color: var(--ink); }

/* ===== Hero ===== */
/* Structure follows the real template's hero-card pattern: a full-bleed
   photograph (the real exterior shot, not a canvas frame — a stronger open
   for a showcase build than starting on an interior still) with a solid
   dark card inset bottom-left carrying the listing facts, and a separate
   pill bottom-right cueing the walkthrough. */
.hero-standalone {
  position: relative; z-index: 10;
  height: 100svh; width: 100%;
  background-color: var(--slate-deep);
  /* This hero photo is a bright exterior (light sky, white render), not a
     dark interior frame like the real template's own hero — the fixed,
     mix-blend-mode:difference header (see .site-header below) needs a
     consistently dark band behind it to read white, which a photo this
     light doesn't provide on its own. A 3-stop scrim darkens the top (header
     zone) and bottom (hero-card zone) while leaving the middle more visible. */
  background-image: linear-gradient(180deg, rgba(6,6,6,.62) 0%, rgba(6,6,6,.22) 32%, rgba(6,6,6,.7) 100%),
                     url('../frames/hero_exterior.jpg');
  background-size: cover; background-position: center 30%;
  color: var(--text-on-dark);
}
/* Concept-demo badge — the brief's explicit "must clearly read as a
   concept/demo on its face" requirement: a visible pill in the hero itself,
   not just the footer disclosure further down the page. */
.concept-badge {
  display: inline-block;
  font-family: var(--font-body); font-size: .62rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-on-dark);
  border: 1px solid rgba(243,239,231,.5);
  border-radius: 999px;
  padding: .5em 1.1em;
  margin-bottom: 1rem;
}
.hero-card {
  position: absolute; left: var(--pad); bottom: clamp(1.5rem, 4vw, 3.2rem);
  width: min(400px, calc(100% - var(--pad) * 2));
  background: var(--slate-deep-78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: clamp(1.6rem, 2.6vw, 2.2rem) clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.5rem, 2.4vw, 2rem);
}
.hero-card .label { color: rgba(243,239,231,.65); margin-bottom: .9rem; }
.hero-heading {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 3.4vw, 2.85rem); line-height: 1.08;
  margin-bottom: .9rem; color: var(--text-on-dark);
}
.hero-meta {
  font-family: var(--font-body); font-size: .7rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.9; opacity: .88;
}
.hero-links {
  display: flex; flex-wrap: wrap; gap: .6rem 1.25rem;
  margin: 1.4rem 0 1.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.22);
}
.tlink {
  font-family: var(--font-body); font-size: .72rem; letter-spacing: .04em;
  text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: 3px; opacity: .85; transition: opacity .2s ease;
}
.tlink:hover { opacity: 1; }

.btn {
  display: inline-block; font-family: var(--font-body); font-size: .715rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; line-height: 1;
  padding: 1.05em 1.9em; border: 1px solid #fff; border-radius: 2px;
  background: #fff; color: var(--slate-deep); text-decoration: none; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: transparent; color: #fff; }

/* Now a real <button> (data-wt-open — opens #walkthrough), not a scroll
   cue, so it gets cursor/appearance resets a <div> never needed. */
.scroll-indicator {
  position: absolute; right: clamp(1.5rem, 4vw, var(--pad)); bottom: clamp(2rem, 6vw, 4.5rem);
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--font-body); font-size: .95rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
  background: rgba(10,10,10,.92); backdrop-filter: blur(10px) saturate(140%);
  border: 2px solid rgba(255,255,255,.85); border-radius: 999px;
  padding: 1.3em 2.3em; cursor: pointer; appearance: none;
  box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,.5);
  animation: wt-pulse 2.6s ease-in-out infinite;
  transition: background .2s ease, transform .2s ease;
}
.scroll-indicator:hover, .scroll-indicator:focus-visible {
  background: #000; transform: scale(1.06); animation-play-state: paused;
}
@keyframes wt-pulse {
  0%, 100% { box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,.45); }
  50% { box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 10px rgba(255,255,255,0); }
}
/* A play wedge, not a down-chevron — a chevron reads "scroll for more",
   which is exactly the implied auto-play cue sir asked to remove. */
.wt-enter-icon {
  width: 0; height: 0; margin-left: 2px;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}

@media (max-width: 780px) {
  .hero-standalone { display: flex; flex-direction: column; height: auto; min-height: 100svh; }
  .hero-card {
    position: static; order: 2; width: auto; left: auto; bottom: auto;
    padding: 1.3rem var(--pad) 1.6rem; margin-top: auto;
  }
  .scroll-indicator {
    position: static; order: 3; align-self: center;
    margin: -1.3rem 0 1.6rem; background: rgba(18,20,21,.72);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-standalone { will-change: opacity; }
}

/* ===== Canvas ===== (mechanic — unchanged, minus the scroll-linked
   circle-wipe reveal: that animated clip-path was keyed to scrollContainer's
   scroll progress, which only existed because the walkthrough used to be
   auto-triggered in-page. Entry is a click now, not a scroll, and
   #walkthrough itself snaps open instantly — same convention
   pytches-close-site's own #walkthrough uses, no transition on the overlay
   shell — so there's nothing left for a clip-path wipe to key off. */
.canvas-wrap {
  position: fixed; inset: 0; z-index: 1;
}
#canvas { width: 100%; height: 100%; display: block; }

/* ===== Walkthrough overlay — the door ===== (NEW 2026-10-11)
   #walkthrough is a fixed, full-viewport element that is its own scroll
   container (overflow-y:auto here). .canvas-wrap/#dark-overlay/.marquee-wrap
   above and below are all position:fixed, so they stay viewport-relative
   regardless of which element the visitor is actually scrolling — exactly
   the same reasoning pytches-close-site's own #walkthrough CSS documents
   for its pinned stage. app.js points ScrollTrigger's `scroller` at this
   element instead of the window; nothing else about the engine changed. */
#walkthrough {
  position: fixed; inset: 0; z-index: 550;
  background: var(--slate-deep);
  display: none;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html.wt-open #walkthrough { display: block; }
html.wt-open, html.wt-open body { overflow: hidden; }

/* Fixed chrome over the walkthrough — brand + close, findable at every
   point in the scroll, same "never a trap" reasoning as the reference
   build: close button, Escape key, and the browser back button (app.js)
   are all live for as long as #walkthrough is open. */
.wt-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem clamp(1.1rem, 5vw, 2.8rem);
  color: var(--text-on-dark); pointer-events: none;
  background: linear-gradient(180deg, rgba(20,17,13,.55) 0%, rgba(20,17,13,0) 100%);
}
.wt-bar > * { pointer-events: auto; }
.wt-brand {
  font-family: var(--font-body); font-size: .68rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; opacity: .85;
}
.wt-close {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  font-family: var(--font-body); font-size: .68rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; background: rgba(18,20,21,.5);
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  padding: .7em 1.2em; backdrop-filter: blur(8px); transition: background .2s ease;
}
.wt-close:hover, .wt-close:focus-visible { background: rgba(255,255,255,.2); }
.wt-close svg { width: 11px; height: 11px; }

.wt-hint {
  position: fixed; left: 50%; bottom: clamp(1rem, 3vw, 1.8rem); transform: translateX(-50%);
  z-index: 70; color: rgba(243,239,231,.8); font-family: var(--font-body); font-size: .62rem;
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-align: center;
  pointer-events: none; transition: opacity .7s ease; white-space: nowrap;
}
.wt-hint.gone { opacity: 0; }

@media (max-width: 780px) {
  .wt-brand { font-size: .62rem; letter-spacing: .14em; }
  .wt-close { font-size: .62rem; padding: .65em 1em; }
}

/* ===== Dark overlay ===== (mechanic — unchanged) */
#dark-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg-dark);
  opacity: 0; pointer-events: none;
}

/* ===== Marquee ===== (mechanic — unchanged) */
.marquee-wrap {
  position: fixed; top: 46%; left: 0; z-index: 40;
  width: 200%; pointer-events: none;
  opacity: 0;
}
.marquee-text {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 13vw; white-space: nowrap;
  color: rgba(243,239,231,0.07);
  -webkit-text-stroke: 1px rgba(243,239,231,0.16);
}

/* ===== Scroll container ===== (mechanic — unchanged) */
#scroll-container { position: relative; height: 1500vh; z-index: 60; }

.scroll-section {
  position: fixed; top: 50%; left: 0; width: 100%;
  transform: translateY(-50%);
  opacity: 0;
  /* Matches the opacity default — see the pointerEvents comment in
     setupSectionAnimation() in app.js for the click-through bug this
     closes (an invisible fixed section eating clicks meant for the one
     stacked visibly on top of it). */
  pointer-events: none;
}
.section-inner { max-width: 40vw; }

.align-left { padding-left: 6vw; padding-right: 55vw; }
.align-right { padding-left: 55vw; padding-right: 6vw; }
.align-left .section-inner, .align-right .section-inner { max-width: 40vw; }

.section-content .section-inner {
  background: var(--slate-deep-78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 2.2rem 2.4rem;
  border-radius: 2px;
}
.section-content .section-label {
  display: block; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem; font-weight: 500;
}
.section-content .section-heading {
  font-family: var(--font-display); font-weight: 400;
  font-size: 3.2rem; line-height: 1.1; margin-bottom: 1.2rem;
  color: var(--text-on-dark);
}
.section-content .section-body {
  font-size: 1.05rem; line-height: 1.65; color: rgba(243,239,231,0.78);
  font-family: var(--font-display);
}

/* ===== Stats ===== (class names are JS hooks — unchanged) */
.section-stats {
  width: 100%; padding: 0 8vw;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw;
}
.stat { display: flex; flex-direction: column; align-items: flex-start; }
.stat-number {
  font-family: var(--font-display); font-weight: 400;
  font-size: 4.6vw; color: var(--text-on-dark); line-height: 1;
}
.stat-suffix {
  font-family: var(--font-body); font-size: 1rem; color: var(--accent); margin-top: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.stat-label {
  font-family: var(--font-body); font-size: 0.78rem; color: rgba(243,239,231,0.55); margin-top: 0.35rem;
}

/* ===== CTA ===== */
.section-cta .section-inner {
  background: var(--slate-deep-78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 2.2rem 2.4rem;
  border-radius: 2px;
}
.section-cta .section-label {
  display: block; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem; font-weight: 500;
}
.section-cta .section-heading {
  font-family: var(--font-display); font-weight: 400;
  font-size: 3.6rem; line-height: 1.08; margin-bottom: 1.2rem;
  color: var(--text-on-dark);
}
.section-cta .section-body {
  font-size: 1.05rem; line-height: 1.65; color: rgba(243,239,231,0.78); margin-bottom: 1.8rem;
  max-width: 34ch; font-family: var(--font-display);
}
.cta-button {
  display: inline-block; font-family: var(--font-body);
  padding: 1.05em 1.9em; border: 1px solid #fff;
  background: #fff; color: var(--slate-deep);
  text-decoration: none; font-size: 0.715rem; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; border-radius: 2px; cursor: pointer; appearance: none;
  transition: background 0.25s ease, color .25s ease;
}
.cta-button:hover { background: transparent; color: #fff; }

/* ===== Full details — the current real-client register ===== */
.details-section {
  position: relative; z-index: 90;
  background: var(--bg-light); color: var(--text-on-light);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.14; }
.section-heading-md { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 0.6rem 0 1.4rem; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  margin-bottom: clamp(1.4rem, 3vw, 2rem); flex-wrap: wrap; }
.sec-head .section-heading-md { margin: 0; }

/* Overview: sticky hairline sidebar + prose, straight off the current
   client template (Aucoot's two-column spine). */
.overview { padding-top: clamp(3.5rem, 7vw, 6rem); }
.ov-grid { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: clamp(2.5rem, 6vw, 6rem); }
@media (max-width: 940px) { .ov-grid { grid-template-columns: 1fr; gap: 3rem; } }

.sidebar { position: sticky; top: 2.5rem; align-self: start; font-family: var(--font-body); }
.sb-block { padding: 0 0 1.15rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--line); }
.sb-block:last-child { border-bottom: 0; }
.sb-block .label { display: block; margin-bottom: .5rem; }
.sb-block p, .sb-block li { font-size: .9rem; line-height: 1.6; font-family: var(--font-body); }
.sb-block ul { list-style: none; }
.sb-block a { display: block; text-decoration: none; border-bottom: 1px solid var(--line);
  padding: .15rem 0; width: max-content; transition: border-color .2s ease; }
.sb-block a:hover { border-bottom-color: var(--ink); }
.sb-sub { color: var(--ink-soft); font-size: .8rem !important; }
@media (max-width: 940px) {
  .sidebar { position: static; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap: 0 2rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
  .sb-block { border-bottom: 1px solid var(--line-soft); }
  .sb-block:last-child { border-bottom: 1px solid var(--line-soft); }
}

.standfirst {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.9vw, 2.05rem); line-height: 1.3; font-style: italic;
  max-width: 24ch; margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.prose { max-width: 36em; font-family: var(--font-display); font-size: 1.14rem; line-height: 1.7; }
.prose p { margin-bottom: 1.3em; }
.prose p:last-child { margin-bottom: 0; }
.prose .first { font-size: 1.2rem; }
.prose h3 {
  font-family: var(--font-body); font-size: .68rem; font-weight: 500; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 2.8rem 0 1.1rem;
}
.prose h3:first-child { margin-top: 0; }

/* Photographs set between passages of prose, two up with a real gutter —
   straight off the current client template. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.8rem, 1.6vw, 1.4rem);
  margin: clamp(2.2rem, 4vw, 3.2rem) 0; max-width: 36em; }
.pair figure { margin: 0; }
.pair img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--line-soft); }
.pair figcaption { font-family: var(--font-body); font-size: .72rem; color: var(--ink-faint);
  margin-top: .65rem; line-height: 1.5; }
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } }

/* Outline button for light (paper/white) section backgrounds — .btn itself
   is a solid white pill built for the dark hero, which would read invisible
   on a white "details-section", so the "show all" control gets its own
   ink-bordered variant matching the current client template's .btn. */
.btn-outline {
  display: inline-block; font-family: var(--font-body); font-size: .715rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; line-height: 1;
  padding: 1.05em 1.9em; border: 1px solid var(--ink); border-radius: 2px;
  background: none; color: var(--ink); text-decoration: none; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.btn-outline:hover { background: var(--ink); color: var(--paper); }

.worth { margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.worth .label { display: block; margin-bottom: 1rem; }
.worth ul { list-style: none; columns: 2; column-gap: 3rem; }
.worth li { break-inside: avoid; font-size: 1.02rem; line-height: 1.55; font-family: var(--font-display);
  padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
@media (max-width: 700px) { .worth ul { columns: 1; } }

/* Photographs — a real gallery grid with a collapse/expand control, the
   section the original build was missing entirely against the current
   client template. */
.photographs { background: var(--white); border-top: 1px solid var(--line); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.8rem, 1.6vw, 1.4rem); }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
.grid a { display: block; overflow: hidden; background: var(--line-soft); aspect-ratio: 4/3; }
.grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.grid a:hover img { transform: scale(1.035); }
.grid.collapsed a:nth-child(n+9) { display: none; }
.more-row { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* Lightbox for the photograph grid. z-index 600 is load-bearing: .site-header
   sits at z-index 500 (it has to clear the canvas walkthrough and footer),
   so a lower lightbox z-index leaves the fixed header intercepting clicks on
   the close button — caught live via an automated click that timed out on
   ".lb .x" with "site-header intercepts pointer events" in the trace. */
.lb { position: fixed; inset: 0; z-index: 600; background: rgba(10,11,12,.95); display: none;
  place-items: center; padding: clamp(1rem, 5vw, 3.5rem); }
.lb.open { display: grid; }
.lb img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.lb button { position: absolute; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; width: 46px; height: 46px;
  border-radius: 999px; transition: background .2s ease; }
.lb button:hover, .lb button:focus-visible { background: rgba(255,255,255,.22); }
.lb .x { top: clamp(1rem, 3vw, 1.8rem); right: clamp(1rem, 3vw, 1.8rem); }
.lb .prev { left: clamp(.6rem, 2vw, 1.8rem); top: 50%; transform: translateY(-50%); }
.lb .next { right: clamp(.6rem, 2vw, 1.8rem); top: 50%; transform: translateY(-50%); }
.lb-cap { position: absolute; left: 0; right: 0; bottom: clamp(.8rem, 2.4vw, 1.6rem); text-align: center;
  color: rgba(255,255,255,.8); font-family: var(--font-body); font-size: .73rem; padding: 0 4rem; }

/* Floorplan — same SVG asset as the original build, just restyled to the
   current template's bordered white-panel treatment. */
.floorplan { background: var(--white); border-top: 1px solid var(--line); }
.floorplan .wrap { max-width: 1100px; }
.floorplan-note { color: var(--ink-soft); max-width: 50ch; font-size: 1rem; margin-top: -1rem; margin-bottom: 1.6rem; font-family: var(--font-body); }
.floorplan-wrap { border: 1px solid var(--line); padding: 2rem; background: #fff; }
.floorplan-svg { width: 100%; height: auto; display: block; }
.fp-room { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.fp-room-name { font-family: var(--font-display); font-weight: 400; font-size: 15px; fill: var(--ink); text-anchor: middle; }
.fp-dim { font-family: var(--font-body); font-size: 11px; fill: var(--ink-soft); text-anchor: middle; }
.fp-room-name-vert { font-family: var(--font-display); font-weight: 400; font-size: 13px; fill: var(--ink-soft); text-anchor: middle; }
.fp-caption { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.12em;
  fill: var(--ink-faint); text-anchor: middle; text-transform: uppercase; }

/* Room dimensions — hairline rows, straight off the current template. */
.numbers { background: var(--paper); border-top: 1px solid var(--line); }
.num-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr));
  gap: clamp(2.4rem, 4vw, 3.6rem); margin-top: clamp(2rem, 4vw, 3rem); }
.num-group h3 { font-family: var(--font-body); font-size: .68rem; font-weight: 500; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink); padding-bottom: .85rem; border-bottom: 1px solid var(--ink); }
.num-group h3.spaced { margin-top: 2.8rem; }
.num-group dl > div { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.2rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.num-group dt { font-size: 1.02rem; font-family: var(--font-display); }
.num-group dd { margin: 0; text-align: right; font-family: var(--font-body); font-size: .85rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-group dd em { display: block; font-style: normal; font-size: .74rem; color: var(--ink-faint); margin-top: .2rem; }
.num-foot { margin-top: 2.4rem; font-size: .92rem; color: var(--ink-soft); max-width: 60ch; font-family: var(--font-body); }

/* Location — a text column plus one real exterior photograph, straight off
   the current client template's two-column loc-grid. */
.location { background: var(--white); border-top: 1px solid var(--line); }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (max-width: 820px) { .loc-grid { grid-template-columns: 1fr; } }
.loc-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--line-soft); }
.loc-grid .prose { max-width: 38em; }

/* Walkthrough entry — a small, modest two-column band (image + copy +
   button), not a hero takeover. Sir's explicit ask 2026-10-11: pull the
   walkthrough trigger out of the hero into its own section here, between
   the details overview and Photographs, sized down from the hero pill. */
.walkthrough-entry {
  position: relative; min-height: 70vh;
  background-image: linear-gradient(rgba(8,8,8,.18), rgba(8,8,8,.32)), url('../frames/frame_0150.webp');
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.wt-entry-card {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  padding: clamp(2rem, 4vw, 3.2rem) clamp(2.2rem, 5vw, 4rem);
  max-width: 34em; text-align: center;
}
.wt-entry-copy { color: var(--ink-soft); margin: .8rem 0 1.6rem; }
.wt-entry-btn { display: inline-flex; align-items: center; gap: .7rem; }
.wt-entry-btn .wt-enter-icon { border-left-color: var(--ink); }
.wt-entry-btn:hover .wt-enter-icon { border-left-color: var(--paper); }

/* Viewing / contact — the slate band, same as the current template. */
.viewing { background: var(--slate); color: #fff; }
.view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
@media (max-width: 820px) { .view-grid { grid-template-columns: 1fr; } }
.viewing h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 1.2rem; }
.viewing .intro { font-size: 1.08rem; color: rgba(255,255,255,.82); max-width: 34ch; margin-bottom: 2.4rem; font-family: var(--font-display); }
.viewing .label { color: rgba(255,255,255,.6); display: block; margin-bottom: .5rem; }
.agent-block { padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.25); margin-top: 1.8rem; }
.agent-block p { font-size: 1.02rem; line-height: 1.6; font-family: var(--font-body); }
.phone { display: inline-block; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4); margin-top: .6rem; font-variant-numeric: tabular-nums; }
.phone:hover { border-bottom-color: #fff; }
.form { display: grid; gap: .75rem; }
.form input, .form textarea {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.3); color: #fff;
  padding: .95rem 1.05rem; font-family: var(--font-body); font-size: .92rem; border-radius: 2px; width: 100%;
}
.form input:focus, .form textarea:focus { outline: 2px solid rgba(255,255,255,.65); outline-offset: 1px; }
.form input::placeholder, .form textarea::placeholder { color: rgba(255,255,255,.55); }
.form button { margin-top: .4rem; border: none; cursor: pointer; }
.sent { font-size: .92rem; color: rgba(255,255,255,.85); margin-top: .4rem; font-family: var(--font-body); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ===== Footer ===== (z-index 100 is load-bearing — see the comment on
   #scroll-container above; every .scroll-section is position:fixed, so the
   footer needs to sit above the highest fixed layer or the persisted CTA
   text bleeds through it.) Single small-print paragraph, no marketing
   columns — straight off the current client template's minimal footer. */
.site-footer {
  position: relative; z-index: 100;
  background: var(--bg-dark); color: var(--text-on-dark);
  padding: 3rem 0; font-size: .88rem; line-height: 1.7;
}
.site-footer .wrap { max-width: var(--max); }
.site-footer p { max-width: 80ch; color: rgba(243,239,231,.72); }

/* Mobile action bar — present on every current client build, absent from
   the old Summit Realty; cheap addition, consistent with the register. */
.mobile-bar { display: none; }
@media (max-width: 780px) {
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: grid;
    grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
    border-top: 1px solid var(--line);
  }
  .mobile-bar a {
    background: var(--paper); text-align: center; padding: 1.05rem .5rem; text-decoration: none;
    font-family: var(--font-body); font-size: .67rem; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink);
  }
  .mobile-bar a.primary { background: var(--ink); color: var(--paper); }
  body { padding-bottom: 50px; }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .align-left, .align-right { padding-left: 6vw; padding-right: 6vw; }
  .align-left .section-inner, .align-right .section-inner { max-width: 100%; }
  .section-content .section-heading { font-size: 2.1rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6vw 4vw; }
  .stat-number { font-size: 10vw; }
  .section-cta .section-heading { font-size: 2.3rem; }
  #scroll-container { height: 900vh; }
  .marquee-text { font-size: 20vw; }
}

/* ─────────────────── reduced motion ───────────────────
   Decorative transforms only — the canvas walkthrough itself is scroll
   position mapped straight onto which frame is drawn, not animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}