/* Ellershaw & Vane — "Wraycombe House" demo listing.
 *
 * Built 2026-10-20. British throughout, by design and not by accident:
 * agency name, address and postcode format, tenure, "offers in excess of"
 * pricing, Grade II* listing, EPC band, council tax band, and a Cotswold
 * limestone house photographed in England.
 *
 * Mechanics below are the proven template, unchanged: room-by-room real-photo
 * slideshow with crossfade, the optional video stop at the end
 * (VIDEO_STOP_INDEX in app.js), the mobile walkthrough-entry overlay, the
 * floorplan / room-dimensions / photographs sections, the lightbox and the
 * arrange-a-viewing form. Only content, asset paths and the hero geometry
 * notes further down are specific to this property.
 */

:root {
  --paper: #f5f3ef;
  --white: #fff;
  --ink: #1c1b19;
  --ink-soft: #6b665f;
  --ink-faint: #9b958c;
  --line: #ddd8d0;
  --line-soft: #eae6df;
  --slate: #3d4f57;
  --slate-deep: #221b14;      /* near-black warm charcoal, used behind the canvas */
  --slate-deep-78: rgba(34, 27, 20, .82);
  --gold: #c9a567;            /* single warm 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);
  --mobile-bar-h: 52px;
}

* { 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; }

/* ===== Header ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 1.6rem 5vw;
  background: linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 100%);
  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; }
.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-addr { color: var(--ink); }
.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;
}
.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 ===== */
.hero-wrap { position: relative; }
.hero-standalone {
  position: relative; z-index: 10;
  height: 100svh; width: 100%;
  background-color: var(--slate-deep);
  background-image: linear-gradient(180deg, rgba(20,17,13,.12) 0%, rgba(20,17,13,.5) 100%),
                     url('../frames/exterior-front.webp');
  background-size: cover; background-position: center 45%;
  color: var(--text-on-dark);
}
/* Mobile hero. The desktop hero photograph is a wide landscape elevation
   (1920x1080), and cover-cropping a 16:9 image into a 390x844 phone viewport
   reduces it to a near-unrecognisable sliver of masonry — a bug this template
   has been bitten by before, so it is designed out here rather than
   discovered later. exterior-front-portrait.webp (1080x1920) is a genuinely
   vertical photograph of the SAME elevation by the same photographer, not a
   crop of the landscape frame, so nothing is lost to the crop at all.
   Generated by _ev_src/build_assets.py. Scoped to the hero only; the location
   section further down uses the landscape frame regardless of viewport. */
@media (max-width: 820px) {
  .hero-standalone {
    background-image: linear-gradient(180deg, rgba(20,17,13,.12) 0%, rgba(20,17,13,.55) 100%),
                       url('../frames/exterior-front-portrait.webp');
    background-position: center center;
  }
}
.hero-bg-sharp { display: none; }
/* Desktop hero — full-bleed by construction, and deliberately so.
   An earlier generation of this template letterboxed on purpose:
   `height:100%; width:auto` held the photo at its native aspect, centred,
   over a blurred darkened copy of itself filling whatever was left at the
   sides. That only reaches both edges when the viewport aspect is narrower
   than the image's; on anything wider it leaves blurred vertical bars (they
   measured 160px a side at 1600x720). Do not reintroduce it.
   The photo covers the full section at every viewport instead, verified by
   measurement rather than by eye — _ev_src/measure_hero.js reports the gap
   between the <img> box and the section box at four viewport sizes and must
   read 0.0 on all four edges. `object-position` keeps the crop biased above
   centre so the gables and chimneys survive on short, wide viewports rather
   than the lawn. There is no blurred backdrop layer: once the image covers,
   that layer can never be seen, and dropping it saves decoding a second copy
   of a half-megabyte photograph. */
@media (min-width: 821px) {
  .hero-standalone { overflow: hidden; }
  .hero-standalone::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(20,17,13,.15) 0%, rgba(20,17,13,.55) 100%);
  }
  .hero-bg-sharp {
    display: block; position: absolute; z-index: 1;
    inset: 0; width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: center 42%;
  }
}
.hero-card {
  position: absolute; left: var(--pad); bottom: clamp(1.5rem, 4vw, 3.2rem);
  width: min(400px, calc(100% - var(--pad) * 2));
  z-index: 20;
  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);
  color: var(--text-on-dark);
}
.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-wt-tile {
  display: none; width: 100%; border: none; padding: 0; margin: 1.1rem 0 0;
  cursor: pointer; appearance: none; background: none; text-align: left;
  position: relative; border-radius: 4px; overflow: hidden;
}
.hero-wt-tile img { display: block; width: 100%; height: 7rem; object-fit: cover; }
.hero-wt-tile-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(0deg, rgba(10,10,10,.75), rgba(10,10,10,.35));
  color: #fff; font-family: var(--font-body); font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
/* From real prospect feedback: the walkthrough button should be a priority
   button, as an overlay on the landing photo. The root cause was real, not a
   taste complaint — on
   mobile .hero-card is position:static (see the @media(max-width:780px)
   block below), so the tile only ever appeared after a full 100svh hero
   photo, i.e. a whole screen of scrolling with zero indication anything was
   below it. Fixed by lifting the tile out of the card's static flow:
   .hero-wrap stays the nearest *positioned* ancestor (position:relative,
   untouched), so position:absolute here resolves against the hero photo
   itself, not the now-static card — the button becomes a real overlay on
   the landing photo, visible on first paint, with zero scrolling. Desktop
   is untouched (this tile is still display:none above 780px; desktop's
   entry point is the always-visible walkthrough button in .hero-cta-row,
   which was never the thing anyone flagged as buried). */
@media (max-width: 780px) {
  /* position:fixed, not absolute: .hero-wrap's own height is the hero photo
     PLUS .hero-card's in-flow content below it (heading/price/links/CTA),
     so an absolute tile anchored to .hero-wrap's bottom edge lands ~250px
     past the photo — i.e. the exact same "scroll to find it" bug, just
     moved. Fixed pins it to the viewport itself regardless of document
     height, which is also consistent with how .mobile-bar (below) already
     stays persistent across the whole page — this template already uses
     fixed overlays for primary actions, this isn't a new pattern. */
  .hero-wt-tile {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 15;
    left: 50%; bottom: calc(var(--mobile-bar-h) + 1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(21rem, calc(100% - 2.4rem)); height: 4.4rem;
    border-radius: 999px; box-shadow: 0 12px 32px -8px rgba(0,0,0,.6);
    animation: wt-tile-in .5s ease .3s both;
  }
  .hero-wt-tile img { height: 100%; border-radius: 999px; }
  .hero-wt-tile-label {
    border-radius: 999px; font-size: .78rem; letter-spacing: .14em;
    background: linear-gradient(0deg, rgba(10,10,10,.8), rgba(10,10,10,.45));
  }
}
@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  .hero-wt-tile { animation: none; }
}
@keyframes wt-tile-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

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

.hero-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-tour {
  background: transparent; border-color: var(--accent); color: var(--accent);
}
.btn-tour:hover { background: var(--accent); color: var(--slate-deep); border-color: var(--accent); }

/* Hero CTA prominence flip: the walkthrough button is the whole point of the
   page and has to dominate; "Arrange a viewing" sits back behind it.
   Scoped to .hero-cta-row only (not .btn-tour globally, which is also the
   #walkthrough-entry section further down a different, light-background
   context that wasn't part of this ask) and not to bare .btn (reused as a
   plain light-background form submit button elsewhere on this page). */
.hero-cta-row .btn:not(.btn-tour) {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.55);
}
.hero-cta-row .btn:not(.btn-tour):hover {
  background: #fff; color: var(--slate-deep); border-color: #fff;
}
.hero-cta-row .btn-tour {
  background: var(--accent); border-color: var(--accent); color: var(--slate-deep);
  font-weight: 600; padding: 1.15em 2.2em;
  animation: tour-scream 2.6s ease-in-out infinite;
}
.hero-cta-row .btn-tour:hover { background: #fff; border-color: #fff; color: var(--slate-deep); animation: none; }
@keyframes tour-scream {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,165,103,.5); }
  50%      { box-shadow: 0 0 0 10px rgba(201,165,103,0); }
}
@media (prefers-reduced-motion: reduce) { .hero-cta-row .btn-tour { animation: none; } }

.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 { height: 100svh; }
  .hero-card {
    position: static; width: auto; left: auto; right: auto; bottom: auto;
    padding: 1.5rem var(--pad) 1.8rem;
    background: var(--slate-deep); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .hero-heading { font-size: 1.85rem; margin-bottom: .6rem; }
  .hero-links { margin: 1rem 0 1.1rem; padding-top: 1rem; }
  .tlink { padding-top: .75rem; padding-bottom: .75rem; }
  .hero-links { gap: 0 1.25rem; margin-top: 1rem; }
  .wt-entry-btn { min-height: 44px; }
}

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

/* ===== Canvas / room slideshow stage ===== (mechanic — unchanged) */
.wt-photo-stage {
  display: none; position: fixed; inset: 0; z-index: 1; background: var(--paper);
}
html.wt-mode-canvas .wt-photo-stage { display: block; }
.wt-photo-frame {
  position: absolute; inset: clamp(2rem, 6vh, 4.5rem) clamp(2.5rem, 7vw, 6rem);
  box-sizing: border-box; border: 14px solid #fff;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.55);
}
.wt-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
  transform: scale(1); transform-origin: center center;
}
.wt-photo.on-top { opacity: 1; z-index: 2; animation: wt-kenburns 9s ease-in-out infinite alternate; }
@keyframes wt-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.wt-photo-caption {
  position: fixed;
  right: calc(clamp(2.5rem, 7vw, 6rem) + 1.4rem);
  top: calc(clamp(2rem, 6vh, 4.5rem) + 1.4rem);
  z-index: 10; color: var(--text-on-dark);
  background: var(--slate-deep-78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 4px; padding: 1rem 1.4rem;
}
.wt-photo-label {
  display: block; font-family: var(--font-body); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(243,239,231,.6);
  margin-bottom: .35rem;
}
.wt-photo-room-name {
  display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 400;
}

/* ===== Walkthrough overlay — the door ===== (mechanic — unchanged) */
#walkthrough {
  position: fixed; inset: 0; z-index: 550;
  background: var(--slate-deep);
  display: none;
  overflow: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html.wt-open #walkthrough { display: block; }
html.wt-open, html.wt-open body { overflow: hidden; }

.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%; top: clamp(4.5rem, 10vw, 6rem); transform: translateX(-50%);
  z-index: 70; color: rgba(243,239,231,.85); font-family: var(--font-body); font-size: .68rem;
  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; }
.wt-hint { display: none; }
html.wt-mode-canvas .wt-hint { display: block; }
html.wt-mode-canvas .wt-bar {
  background: linear-gradient(180deg, rgba(245,243,239,.9) 0%, rgba(245,243,239,0) 100%);
}
html.wt-mode-canvas .wt-brand { color: var(--ink); }
html.wt-mode-canvas .wt-hint { color: var(--ink-soft); }

.wt-video {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; background: #000;
  cursor: pointer;
}
html.wt-mode-canvas .wt-video { display: none; }
/* The one extra stop past the last real room (VIDEO_STOP_INDEX in app.js).
   This build's film is landscape (960x540, confirmed via ffprobe) — the
   mirror image of the reference this template came from, whose video was
   portrait and needed a taller frame. On a narrow mobile viewport
   .wt-photo-frame's default
   inset box is itself tall/portrait-shaped (same box the room photos use),
   so object-fit:contain alone squeezed the landscape video into a small
   strip with huge black bars top and bottom. The fix reshapes the frame to
   the video's own aspect ratio for this one stop,
   centred vertically, same side insets as every other room) just rotated
   90 degrees for a landscape source instead of a portrait one. */
html.wt-mode-canvas.wt-video-stop .wt-photo-frame {
  top: 50%; bottom: auto; transform: translateY(-50%);
  height: auto; aspect-ratio: 16 / 9;
}
/* On a narrow viewport the normal room-photo side insets (clamped to 6rem)
   leave a 16:9 box looking small and marooned in the middle of the screen —
   widen it to nearly the full viewport width here so the video reads as the
   main event, not an afterthought floating in empty paper background. */
@media (max-width: 780px) {
  html.wt-mode-canvas.wt-video-stop .wt-photo-frame {
    left: 1rem; right: 1rem;
  }
}
html.wt-mode-canvas.wt-video-stop .wt-video {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; z-index: 2;
}
html.wt-mode-canvas.wt-video-stop .wt-photo { opacity: 0 !important; }
.wt-video-bar {
  display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
  align-items: center; gap: .7rem; padding: .7rem .9rem;
  background: linear-gradient(0deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,0) 100%);
}
html.wt-mode-canvas .wt-video-bar { display: none; }
html.wt-mode-canvas.wt-video-stop .wt-video-bar { display: flex; }
.wt-vbtn {
  width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); border-radius: 6px;
  color: #fff; cursor: pointer; appearance: none; font-family: var(--font-body);
  font-size: .78rem; font-weight: 600;
}
.wt-vbtn svg { width: 20px; height: 20px; }
.wt-video-time {
  flex: none; color: #fff; font-family: var(--font-body); font-size: .68rem;
  letter-spacing: .04em; white-space: nowrap; min-width: 5.2em;
}
.wt-video-seek {
  flex: 1 1 auto; min-width: 0; appearance: none; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.3); outline: none;
}
.wt-video-seek::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; cursor: pointer;
}
.wt-video-seek::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff; border: none; cursor: pointer;
}
.wt-video-fullscreen { position: static; }

@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 {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: var(--bg-dark);
  opacity: 0; pointer-events: none;
}
html.wt-mode-canvas #dark-overlay { display: block; }

/* ===== Marquee ===== (mechanic — unchanged) */
.marquee-wrap {
  display: none;
  position: fixed; top: 46%; left: 0; z-index: 40;
  width: 200%; pointer-events: none;
  opacity: 0;
}
html.wt-mode-canvas .marquee-wrap { display: block; }
.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, marquee anchor only) */
#scroll-container { display: none; position: relative; height: 1500vh; z-index: 60; }

/* ===== 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 { 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; }

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

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

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

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

/* The band's backdrop has to name a frame that exists in THIS build's
   frames/ directory. The template this was built from pointed at a room
   name with no counterpart in this house — and a dead url() in CSS fails
   silently (no console error, no broken-image icon, just a flat background),
   which is exactly the class of stale reference that hides outside the
   HTML and survives a careful read of the markup. */
.walkthrough-entry {
  position: relative; min-height: 70vh;
  background-image: linear-gradient(rgba(10,10,10,.18), rgba(10,10,10,.3)), url('../frames/library.webp');
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 780px) {
  .walkthrough-entry { background-image: none; background-color: var(--paper); min-height: auto; padding: 3rem 0; }
}
.wt-entry-card {
  background: var(--slate-deep-78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  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;
  color: var(--text-on-dark);
}
.wt-entry-copy { color: rgba(243,239,231,.8); 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(--accent); }
.wt-entry-btn:hover .wt-enter-icon { border-left-color: var(--slate-deep); }

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

.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-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: var(--mobile-bar-h); }

  .hero-standalone { min-height: calc(100svh - var(--mobile-bar-h)); }
  .hero-card { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
  .mobile-bar a { padding-bottom: calc(1.05rem + env(safe-area-inset-bottom, 0px)); }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .nav-links a:not(.nav-cta) { display: none; }
}

/* This agency's name is materially longer than the one this template was
   last set up for, and the header is a two-item flex row with no wrapping:
   at 390px the wordmark and "Arrange a viewing" met in the middle with no
   gap between them. Caught in the mobile screenshot pass, not by reading the
   CSS — the sizes are fine at every width the desktop breakpoints cover and
   only collide at the narrow end. Scoped to <=520px so nothing above it
   moves. */
@media (max-width: 520px) {
  .site-header { padding: 1.3rem 4.5vw; }
  .site-header nav { gap: 1rem; }
  .logo { font-size: 1.02rem; letter-spacing: .02em; }
  .nav-links a { font-size: .6rem; letter-spacing: .1em; }
}

/* ─────────────────── reduced motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}