/* 2000 Lawnville Road
   One page, told as scenes. Each pinned scene exposes --p (0 at the start of its scroll, 1 at the end)
   from app.js; every motion below is a function of that one number, so the whole choreography can be
   read here. Without JavaScript the page is simply a sequence of full-screen sections. */

/* Fonts are served from this site (no third-party requests), Latin subsets only. */
@font-face { font-family: "Libre Caslon Display"; src: url("/fonts/libre-caslon-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/fonts/libre-caslon-text-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/fonts/libre-caslon-text-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/fonts/libre-franklin-latin.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }

:root {
  --limewash: #F3F3EE;
  --paper: #FBFBF8;
  --ink: #1B201D;
  --stone: #5C6560;
  --barn: #857865;
  --pasture: #25302A;
  --deep: #141A16;
  --brass: #94661F;
  --brass-light: #D4A658;
  --ivory: #F1EFE8;
  --rule: #DADBD2;
  --field-line: #CBCBC1;
  --error: #9A3B2E;

  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--deep);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--ivory); color: var(--ink); padding: 10px 14px; text-decoration: none; font-size: 14px;
}
.skip:focus { top: 12px; }

.preview-flag {
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  background: var(--brass); color: var(--paper);
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 2px; pointer-events: none; opacity: .94;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 24px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border-radius: 1px; border: 1px solid transparent; cursor: pointer;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn-light { background: var(--ivory); color: var(--deep); }
.btn-light:hover { background: #fff; }
.btn-ghost { color: var(--ivory); border-color: rgba(241, 239, 232, .55); }
.btn-ghost:hover { border-color: var(--ivory); background: rgba(241, 239, 232, .08); }
.btn-dark { background: var(--ink); color: var(--ivory); }
.btn-dark:hover { background: var(--pasture); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  color: var(--ivory);
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.site-header.solid {
  background: rgba(243, 243, 238, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
  border-bottom-color: var(--rule);
}
.wordmark { font-family: var(--display); font-size: 21px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.site-nav { display: flex; gap: 30px; margin-left: auto; }
.site-nav a, .header-cta {
  font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
.site-nav a { opacity: .82; transition: opacity .3s ease; }
.site-nav a:hover { opacity: 1; }
.header-cta { border: 1px solid currentColor; padding: 10px 16px; white-space: nowrap; }
@media (max-width: 900px) { .site-nav { display: none; } }
@media (max-width: 420px) {
  .wordmark { font-size: 18px; }
  .header-cta { padding: 9px 11px; letter-spacing: .1em; }
}

/* ---------- media and placeholders ---------- */
.media { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: transform, opacity; }
.tile, .agent-photo { position: relative; }
.ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .2; mix-blend-mode: overlay;
}
.ph-label {
  position: absolute; right: 16px; bottom: 14px; z-index: 3;
  font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(241, 239, 232, .6); pointer-events: none;
}

.ph-aerial { background:
  radial-gradient(55% 40% at 74% 20%, rgba(255, 222, 150, .6), transparent 70%),
  radial-gradient(30% 14% at 38% 64%, rgba(28, 38, 22, .55), transparent 70%),
  linear-gradient(180deg, #d9c89c 0%, #bba472 20%, #847d4c 40%, #5a673d 56%, #37452b 76%, #1f2a1b 100%); }
.ph-front { background:
  radial-gradient(70% 60% at 50% 32%, rgba(255, 250, 235, .38), transparent 70%),
  linear-gradient(180deg, #cbcfc5 0%, #9ca493 34%, #6c7563 60%, #3c4536 100%); }
.ph-greatroom { background:
  radial-gradient(40% 36% at 50% 64%, rgba(236, 160, 86, .6), transparent 70%),
  repeating-linear-gradient(90deg, rgba(20, 14, 9, .28) 0 18px, transparent 18px 150px),
  radial-gradient(95% 85% at 50% 45%, #6f5339, #2d231a 82%); }
.ph-beams { background:
  repeating-linear-gradient(11deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 9px),
  repeating-linear-gradient(7deg, rgba(255, 230, 190, .07) 0 1px, transparent 1px 13px),
  linear-gradient(135deg, #7c5c3d, #4b3524 55%, #2c2016); }
.ph-kitchen { background:
  radial-gradient(70% 60% at 60% 28%, rgba(255, 255, 250, .6), transparent 70%),
  linear-gradient(180deg, #e3e2d9, #c4c2b6 52%, #8f8d80); }
.ph-range { background:
  radial-gradient(30% 22% at 32% 70%, rgba(186, 144, 72, .5), transparent 70%),
  linear-gradient(160deg, #5e6364, #303435 60%, #1c1f20); }
.ph-porch { background:
  radial-gradient(80% 50% at 50% 30%, rgba(240, 245, 230, .5), transparent 70%),
  linear-gradient(180deg, #bac5b3, #8d9b84 45%, #57664d 75%, #3a4632); }
.ph-florida { background:
  radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 245, .75), transparent 70%),
  linear-gradient(180deg, #ece9dc, #cecab9 55%, #a7a28e); }
.ph-carriage { background:
  radial-gradient(60% 50% at 40% 30%, rgba(250, 240, 220, .42), transparent 70%),
  linear-gradient(180deg, #bfbaa8, #8c8775 45%, #5b5747 72%, #353528); }
.ph-pool-day { background:
  radial-gradient(60% 30% at 70% 14%, rgba(255, 255, 240, .6), transparent 70%),
  linear-gradient(180deg, #b9d4d7 0%, #9fc1c3 30%, #5f9497 52%, #4e7b5f 70%, #2f4a31 100%); }
.ph-pool-dusk { background:
  radial-gradient(34% 26% at 26% 76%, rgba(222, 146, 62, .7), transparent 70%),
  linear-gradient(180deg, #1c2442 0%, #35315b 28%, #2b3a55 48%, #1d3a3e 66%, #0f1c17 100%); }
.ph-pasture { background:
  radial-gradient(10% 22% at 84% 34%, rgba(255, 216, 140, .8), transparent 70%),
  radial-gradient(16% 9% at 16% 55%, rgba(30, 38, 22, .75), transparent 70%),
  radial-gradient(22% 10% at 47% 53%, rgba(30, 38, 22, .6), transparent 70%),
  radial-gradient(7% 6% at 64% 60%, rgba(70, 36, 24, .85), transparent 70%),
  radial-gradient(14% 8% at 90% 56%, rgba(30, 38, 22, .7), transparent 70%),
  linear-gradient(180deg, #e2cb90 0%, #c6ab6b 28%, #8e8b50 47%, #5e6c36 63%, #3b4b27 82%, #243219 100%); }
.ph-creek { background:
  radial-gradient(45% 12% at 50% 70%, rgba(220, 235, 230, .42), transparent 70%),
  linear-gradient(180deg, #809b8d, #53715f 45%, #2e4239); }
.ph-portrait { background:
  radial-gradient(34% 30% at 50% 36%, #c4baa9, transparent 72%),
  radial-gradient(60% 40% at 50% 100%, #6b6457, transparent 72%),
  linear-gradient(180deg, #dcd9d0, #a39d90); }

.scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.scrim-center { background: radial-gradient(ellipse at center, rgba(10, 14, 11, .42) 0%, rgba(10, 14, 11, .18) 55%, rgba(10, 14, 11, .5) 100%); }
.scrim-bl { background:
  linear-gradient(to top, rgba(12, 16, 13, .8) 0%, rgba(12, 16, 13, .38) 36%, rgba(12, 16, 13, 0) 62%),
  linear-gradient(to right, rgba(12, 16, 13, .5) 0%, rgba(12, 16, 13, 0) 55%); }

/* ---------- scene 1: opening ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  display: grid; place-items: center; text-align: center; color: var(--ivory); background: var(--deep);
}
.hero-media { transform: scale(1); }
.js .hero-media { transform: scale(1.12); transition: transform 9s var(--ease-out); }
.js .loaded .hero-media { transform: scale(1); }
.hero-copy { position: relative; z-index: 2; padding-inline: var(--gutter); }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(3.1rem, 10.5vw, 8.6rem);
  line-height: .95; letter-spacing: -.012em;
  margin: .28em 0 .24em;
}
.hero-line { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: rgba(241, 239, 232, .88); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }
.js .hero-in { opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease, transform 1.6s var(--ease-out); transition-delay: calc(.45s + var(--d) * .3s); }
.js .loaded .hero-in { opacity: 1; transform: none; }
.hero .ph-label { bottom: 18px; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; z-index: 2; width: 1px; height: 58px; overflow: hidden; background: rgba(241, 239, 232, .22); }
.scroll-cue span { display: block; width: 1px; height: 100%; background: var(--ivory); animation: cue 2.6s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------- pinned scenes ---------- */
.scene { position: relative; height: 190vh; background: var(--deep); color: var(--ivory); --p: 0; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.copy { position: relative; z-index: 2; }
.copy h2 { font-family: var(--display); font-size: clamp(2.15rem, 4.9vw, 4.1rem); line-height: 1.03; margin: .38em 0 .46em; }
.copy p:not(.eyebrow) { font-weight: 300; font-size: clamp(15.5px, 1.22vw, 18px); line-height: 1.72; max-width: 46ch; }
.copy-bl { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(44px, 10vh, 104px); max-width: 590px; }
.copy-bl p:not(.eyebrow) { color: rgba(241, 239, 232, .86); }
.copy-bl .eyebrow { color: rgba(241, 239, 232, .78); }

/* text arrives once the picture has settled */
.js .scene .copy {
  --a: clamp(0, (var(--p) - var(--start, .1)) * 4, 1);
  opacity: var(--a);
  transform: translateY(calc((1 - var(--a)) * 26px));
}

/* scene 2: the front of the house arrives already in frame, then settles like a camera landing.
   (A second aerial used to sit here and dissolve away, which read as a frozen frame after the opening.) */
.scene-estate { height: 175vh; --start: .1; }
.scene-estate .settle { transform: scale(calc(1.12 - .12 * clamp(0, var(--p) * 1.3, 1))); }

/* scene 6b: up to the lookout, then out through its windows */
.scene-lookout { height: 200vh; --start: .32; }
.scene-lookout .layer-a { opacity: calc(1 - clamp(0, (var(--p) - .12) * 2.4, 1)); transform: scale(calc(1 + var(--p) * .12)); }
.scene-lookout .layer-b { opacity: clamp(0, (var(--p) - .12) * 2.4, 1); transform: scale(calc(1.1 - .1 * clamp(0, var(--p) * 1.3, 1))); }

/* scene 4: the room, then into the timber */
.scene-residence { height: 220vh; --start: .06; }
.scene-residence .layer-a { transform: scale(calc(1 + var(--p) * .2)); }
.scene-residence .layer-b { opacity: clamp(0, (var(--p) - .45) * 3.5, 1); transform: scale(calc(1.14 - .14 * clamp(0, (var(--p) - .45) * 2, 1))); }

/* scene 5: kitchen split, both photographs in frame as it arrives; the detail settles beside the words */
.scene-kitchen { height: 170vh; background: var(--limewash); color: var(--ink); --start: .18; }
.split { display: grid; grid-template-columns: 1.4fr 1fr; background: var(--limewash); }
.split-wide { position: relative; overflow: hidden; }
.split-wide .media { transform: scale(calc(1.12 - var(--p) * .12)); }
.split-side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(22px, 3vw, 40px); padding: calc(var(--header-h) + 24px) var(--gutter) clamp(36px, 7vh, 80px) clamp(24px, 3.5vw, 56px); }
.split-detail { position: relative; overflow: hidden; }
.split-detail .media { transform: scale(calc(1.16 - .16 * clamp(0, var(--p) * 1.6, 1))); }
.split-detail .ph-label, .split-wide .ph-label { color: rgba(241, 239, 232, .75); }
.copy-plain .eyebrow { color: var(--barn); }
.copy-plain p:not(.eyebrow) { color: var(--stone); }
.copy-plain h2 { font-size: clamp(2rem, 3.6vw, 3.3rem); }

/* scene 6: drift from the porch to the Florida room */
.scene-drift { height: 220vh; --start: .04; }
.drift-track { position: absolute; inset: 0; width: 200%; display: flex; transform: translateX(calc(clamp(0, (var(--p) - .12) * 1.3, 1) * -50%)); will-change: transform; }
.drift-track .media { position: relative; inset: auto; flex: 0 0 50%; height: 100%; }

/* scene 7: the carriage house is in frame as it scrolls in, then the camera eases toward it.
   (It used to wipe up from black, and the wipe only began once pinned, so a black frame scrolled in first.) */
.scene-wipe { height: 175vh; --start: .12; }
.scene-wipe .push { transform: scale(calc(1 + var(--p) * .1)); }

/* scene 8: the signature, day turns to dusk */
.scene-dusk { height: 260vh; --start: .02; }
.scene-dusk { --dusk: clamp(0, (var(--p) - .15) * 1.6, 1); }
.scene-dusk .layer-b { opacity: var(--dusk); }
.scene-dusk .glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(30% 24% at 26% 76%, rgba(236, 150, 64, .55), transparent 70%);
  opacity: calc(var(--dusk) * var(--dusk));
}
.scene-dusk .copy h2 { color: rgba(241, 239, 232, calc(.62 + .38 * var(--dusk))); }

/* scene 9: a long, slow pan across the land */
.scene-land { height: 290vh; --start: .06; }
.pan { position: absolute; inset: 0; overflow: hidden; }
.pan .media { right: auto; width: 170%; transform: translateX(calc(var(--p) * -41.2%)); }

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; grid-template-rows: 44svh minmax(0, 1fr); }
  .split-side { grid-template-rows: auto; padding: 26px 20px 34px; align-content: start; }
  .split-detail { display: none; }
  .copy-bl { bottom: 40px; }
  .pan .media { width: 260%; transform: translateX(calc(var(--p) * -61.5%)); }
}

/* ---------- scene 3: at a glance ---------- */
.glance { background: var(--limewash); color: var(--ink); padding: clamp(80px, 12vw, 150px) var(--gutter); text-align: center; }
.glance-price { font-family: var(--display); font-size: clamp(2.7rem, 6.2vw, 4.8rem); line-height: 1; }
.glance-price span { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--barn); margin-bottom: 18px; }
.figures { display: flex; flex-wrap: wrap; justify-content: center; margin: clamp(40px, 5vw, 60px) auto 0; padding: 0; max-width: 960px; row-gap: 26px; }
.figures div { display: flex; flex-direction: column-reverse; gap: 6px; padding-inline: clamp(18px, 3.2vw, 44px); border-left: 1px solid var(--rule); }
.figures div:first-child { border-left: 0; }
.figures dd { margin: 0; font-family: var(--display); font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1; font-variant-numeric: lining-nums; }
.figures dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
@media (max-width: 560px) {
  .figures div { width: 50%; border-left: 0; }
  .figures div:last-child { width: 100%; }
}

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1.2s ease, transform 1.5s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- scene 10: location ---------- */
.location { background: var(--pasture); color: var(--ivory); padding: clamp(90px, 12vw, 160px) var(--gutter); }
.location-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.location .copy .eyebrow { color: rgba(241, 239, 232, .7); }
.location .copy p:not(.eyebrow) { color: rgba(241, 239, 232, .82); }
.drive-times { list-style: none; margin: 34px 0 0; padding: 0; max-width: 460px; }
.drive-times li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(241, 239, 232, .16); font-size: 15px; }
.drive-times b { font-weight: 500; white-space: nowrap; }
.drive-times .tbc { font-weight: 400; font-style: italic; color: var(--brass-light); }
.drive-note { margin-top: 12px; font-size: 12.5px; color: rgba(241, 239, 232, .55); }
.map { margin: 0; }
.map svg { width: 100%; height: auto; display: block; border-radius: 2px; }
.map .m-land { fill: #222C26; }
.map .m-lake { fill: rgba(104, 150, 160, .30); }
.map .m-river { fill: none; stroke: rgba(104, 150, 160, .55); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map .m-primary { fill: none; stroke: rgba(241, 239, 232, .07); stroke-width: 1.1; }
.map .m-trunk { fill: none; stroke: rgba(241, 239, 232, .11); stroke-width: 1.4; }
.map .m-motorway { fill: none; stroke: rgba(241, 239, 232, .3); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.map .route { fill: none; stroke: var(--brass-light); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.js .map .route { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-out); }
.js .map.in .route { stroke-dashoffset: 0; }
.js .map .r2 { transition-delay: .3s; }
.js .map .r3 { transition-delay: .55s; }
.js .map .r4 { transition-delay: .8s; }
.js .map .r5 { transition-delay: 1.05s; }
.js .map .r6 { transition-delay: 1.3s; }
.map .dot { fill: var(--ivory); }
.map .dot-home { fill: var(--brass-light); }
.map .dot-home-star { fill: var(--brass-light); }
.map .m-leader { fill: none; stroke: rgba(241, 239, 232, .5); stroke-width: 1.2; }
.map .dot-home-ring { fill: none; stroke: var(--brass-light); stroke-width: 1.2; opacity: .55; transform-box: fill-box; transform-origin: center; animation: ring 3.2s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
.map text { font-family: var(--sans); paint-order: stroke; stroke: #222C26; stroke-width: 6px; stroke-linejoin: round; }
.map .m-label { fill: var(--ivory); font-size: 20px; font-weight: 600; }
.map .m-min { fill: var(--brass-light); font-size: 15px; font-weight: 500; }
.map .m-water { fill: rgba(150, 196, 204, .8); font-family: var(--serif); font-style: italic; font-size: 16px; }
.map .m-road { fill: rgba(241, 239, 232, .6); font-size: 13px; font-weight: 600; letter-spacing: .12em; }
.map .sh-interstate { fill: #2C4A6B; stroke: rgba(241, 239, 232, .7); stroke-width: 1.2; }
.map .sh-us { fill: #EFEDE4; stroke: rgba(34, 44, 38, .5); stroke-width: 1; }
.map .sh-state { fill: #EFEDE4; stroke: rgba(34, 44, 38, .5); stroke-width: 1; }
.map .sh-num-light { fill: #F1EFE8; font-weight: 700; stroke: none; }
.map .sh-num-dark { fill: #1B201D; font-weight: 700; stroke: none; }
.map .m-scale path { fill: none; stroke: rgba(241, 239, 232, .5); stroke-width: 1.5; }
.map .m-scale text, .map .m-north text { fill: rgba(241, 239, 232, .55); font-size: 12px; letter-spacing: .08em; }
.map .m-north path { fill: rgba(241, 239, 232, .5); }
.map figcaption { margin-top: 10px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(241, 239, 232, .45); text-align: right; }
@media (max-width: 700px) {
  .map .m-label { font-size: 34px; }
  .map .m-min { font-size: 26px; }
  .map .m-water, .map .m-road { font-size: 24px; }
  .map .sh-num-light, .map .sh-num-dark { font-size: 15px !important; }
  .map .m-scale text, .map .m-north text { font-size: 22px; }
  .map text { stroke-width: 9px; }
}
@media (max-width: 860px) { .location-inner { grid-template-columns: 1fr; } }

/* ---------- scene 11: gallery ---------- */
.gallery { background: var(--limewash); color: var(--ink); padding: clamp(90px, 11vw, 150px) var(--gutter); }
.gallery-head { max-width: 1240px; margin: 0 auto clamp(34px, 4vw, 54px); }
.gallery-head .eyebrow { color: var(--barn); }
.gallery-head h2 { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.03; margin-top: .35em; }
.mosaic {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(84px, 10.5vw, 150px); gap: 8px;
}
.tile { border: 0; padding: 0; cursor: zoom-in; overflow: hidden; border-radius: 1px; transition: filter .5s ease; }
.tile::before { content: ""; position: absolute; inset: 0; background: rgba(12, 16, 13, 0); transition: background-color .5s ease; z-index: 1; }
.tile:hover::before { background: rgba(12, 16, 13, .16); }
.t1 { grid-column: 1 / 5; grid-row: 1 / 4; }
.t2 { grid-column: 5 / 7; grid-row: 1 / 3; }
.t3 { grid-column: 5 / 7; grid-row: 3 / 4; }
.t4 { grid-column: 1 / 3; grid-row: 4 / 6; }
.t5 { grid-column: 3 / 6; grid-row: 4 / 6; }
.t6 { grid-column: 6 / 7; grid-row: 4 / 5; }
.t7 { grid-column: 6 / 7; grid-row: 5 / 6; }
.gallery-actions { max-width: 1240px; margin: 28px auto 0; }
@media (max-width: 700px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; }
  .t1 { grid-column: 1 / 3; grid-row: span 2; }
  .t2, .t3, .t4, .t5, .t6, .t7 { grid-column: auto; grid-row: auto; }
  .t5 { grid-column: 1 / 3; }
}

/* ---------- scene 12: private showing ---------- */
.showing { background: var(--paper); color: var(--ink); padding: clamp(90px, 11vw, 150px) var(--gutter) clamp(50px, 6vw, 80px); border-top: 1px solid var(--rule); }
.showing-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.showing-lead { position: sticky; top: calc(var(--header-h) + 40px); }
.showing-lead .eyebrow { color: var(--barn); }
.showing-lead h2 { font-family: var(--display); font-size: clamp(2.5rem, 5.2vw, 4.3rem); line-height: 1.02; margin: .35em 0 .45em; }
.showing-lead > p:not(.eyebrow) { color: var(--stone); font-size: 17px; line-height: 1.7; max-width: 40ch; }
.agent { display: flex; gap: 20px; align-items: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--rule); }
.agent-photo { flex: none; width: 92px; height: 116px; overflow: hidden; }
/* The portrait fills its frame and is cropped, never stretched: img's max-width alone squeezed it to 92 px wide while
   its height attribute held it at 275 (2026-10-21). */
.agent-photo picture { display: block; width: 100%; height: 100%; }
.agent-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.agent-name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.agent-title, .agent-office { font-size: 13px; color: var(--stone); line-height: 1.5; }
.agent-title { margin-top: 4px; }
.agent-phones { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 8px; font-size: 14px; }
.agent-phones a { text-underline-offset: 3px; text-decoration-color: var(--rule); }
.agent-phones a:hover { text-decoration-color: currentColor; }
@media (max-width: 900px) {
  .showing-inner { grid-template-columns: 1fr; }
  .showing-lead { position: static; }
}

.inquiry fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.inquiry legend, .label-like, .inquiry label { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.inquiry legend { padding: 0; margin-bottom: 10px; }
.hint { font-weight: 400; color: var(--stone); }
.kind { display: flex; border: 1px solid var(--ink); position: relative; }
.kind input, .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kind label { flex: 1; text-align: center; padding: 14px 10px; font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.kind input:checked + label { background: var(--ink); color: var(--ivory); }
.kind input:focus-visible + label, .chips input:focus-visible + label { outline: 2px solid var(--brass-light); outline-offset: 2px; }
.row.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 560px) { .row.two { grid-template-columns: 1fr; } }
.field { margin-top: 20px; display: grid; gap: 7px; align-content: start; }
.inquiry input:not([type="radio"]):not([type="checkbox"]), .inquiry select, .inquiry textarea {
  width: 100%; font: 16px/1.4 var(--sans); color: var(--ink);
  padding: 12px 13px; background: #fff; border: 1px solid var(--field-line); border-radius: 1px;
  transition: border-color .25s ease; appearance: none; -webkit-appearance: none;
}
.inquiry select { background-image: linear-gradient(45deg, transparent 50%, var(--stone) 50%), linear-gradient(135deg, var(--stone) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.inquiry textarea { resize: vertical; min-height: 96px; }
.inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(212, 166, 88, .35); }
.field.invalid input, .field.invalid textarea { border-color: var(--error); }
.visit { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
.visit + .visit { margin-top: 8px; }
.link-btn { justify-self: start; background: none; border: 0; padding: 4px 0; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--field-line); cursor: pointer; }
.link-btn:hover { text-decoration-color: currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { font-size: 14px; font-weight: 400; padding: 9px 15px; border: 1px solid var(--field-line); border-radius: 999px; background: #fff; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.chips label:hover { border-color: var(--ink); }
.chips input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.agent-name-field { margin-top: 12px; display: grid; gap: 7px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.consent-field { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; margin-top: 26px; }
.consent-field input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.consent-field label { font-size: 12.5px; font-weight: 400; color: var(--stone); line-height: 1.6; }
.consent-field .err { grid-column: 2; }
.err { color: var(--error); font-size: 13px; }
.err:empty { display: none; }
.form-error { margin-top: 18px; background: #F5E8E3; color: #7A2E22; padding: 12px 14px; font-size: 14px; }
.submit { margin-top: 24px; min-width: 240px; }
.submit.is-busy { opacity: .7; pointer-events: none; }
.fineprint { margin-top: 14px; font-size: 12.5px; color: var(--stone); }
@media (max-width: 560px) { .submit { width: 100%; } }

.thanks { border: 1px solid var(--rule); background: #fff; padding: clamp(28px, 5vw, 56px); }
.thanks .eyebrow { color: var(--barn); }
.thanks h3 { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin: .4em 0 .5em; }
.thanks p:not(.eyebrow) { color: var(--stone); font-size: 17px; max-width: 42ch; }
.thanks:focus { outline: none; }

.particulars { max-width: 1240px; margin: clamp(70px, 9vw, 120px) auto 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.particulars summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.particulars summary::-webkit-details-marker { display: none; }
.particulars summary::after { content: "+"; font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: 0; transition: transform .4s var(--ease-out); }
.particulars[open] summary::after { transform: rotate(45deg); }
.particulars-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 40px; padding: 6px 0 36px; }
.particulars h3 { font-family: var(--serif); font-style: italic; font-size: 1.1rem; margin-bottom: 10px; }
.particulars ul { list-style: none; margin: 0; padding: 0; }
.particulars li { font-size: 14.5px; color: var(--stone); padding: 5px 0; border-top: 1px solid var(--rule); }
.particulars dl { margin: 0; }
.particulars dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding: 5px 0; border-top: 1px solid var(--rule); }
.particulars dt { color: var(--stone); }
.particulars dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 1000px) { .particulars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .particulars-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: rgba(241, 239, 232, .8); padding: clamp(64px, 8vw, 96px) var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); }
.footer-inner { max-width: 1240px; margin: 0 auto; }
.footer-mark { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--ivory); }
.footer-listing { margin: 20px 0 22px; font-size: 14.5px; display: grid; gap: 4px; }
.footer-who { color: var(--ivory); font-size: 15.5px; }
.footer-listing a { text-underline-offset: 3px; text-decoration-color: rgba(241, 239, 232, .3); }
.footer-legal { font-size: 12.5px; color: rgba(241, 239, 232, .55); max-width: 72ch; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(241, 239, 232, .12); font-size: 12.5px; }
.eho { display: flex; align-items: center; gap: 10px; }
.footer-bottom a { text-underline-offset: 3px; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(9, 12, 10, .97); color: var(--ivory); }
.lb-stage { position: absolute; inset: 72px 96px 76px; }
.lb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.lb-slide.on { opacity: 1; }
.lb-slide img { width: 100%; height: 100%; object-fit: contain; }
.lb-caption { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font-size: 13px; color: rgba(241, 239, 232, .72); padding-inline: 20px; }
.lb-count { position: absolute; left: 24px; top: 26px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(241, 239, 232, .55); }
.lb-btn { position: absolute; background: none; border: 0; color: var(--ivory); cursor: pointer; padding: 14px; opacity: .78; transition: opacity .3s ease; }
.lb-btn:hover { opacity: 1; }
.lb-close { right: 16px; top: 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .lb-stage { inset: 64px 0 90px; }
  .lb-prev, .lb-next { top: auto; bottom: 18px; transform: none; }
  .lb-caption { bottom: 70px; }
}

/* ---------- privacy and other plain pages ---------- */
.plain { background: var(--paper); color: var(--ink); padding: calc(var(--header-h) + clamp(60px, 8vw, 110px)) var(--gutter) clamp(70px, 9vw, 120px); }
.plain-inner { max-width: 720px; margin: 0 auto; }
.plain .eyebrow { color: var(--barn); }
.plain h1 { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; margin: .35em 0 .6em; }
.plain h2 { font-family: var(--serif); font-style: italic; font-size: 1.35rem; margin: 2em 0 .5em; }
.plain p, .plain li { color: var(--stone); font-size: 16.5px; line-height: 1.75; }
.plain ul { padding-left: 20px; }
.plain .draft-note { background: #F4EBDA; color: #6E4E17; padding: 12px 14px; font-size: 14px; margin-bottom: 28px; }
.site-header.always-solid { background: rgba(243, 243, 238, .92); color: var(--ink); border-bottom-color: var(--rule); }

/* ---------- photographs ---------- */
.media picture, .tile picture { position: absolute; inset: 0; display: block; background-size: cover; background-position: center; }
.media img, .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drift-track .media picture { position: absolute; }
.tile { background: var(--rule); }
.tile img { transition: transform 1.2s var(--ease-out); }
.tile:hover img { transform: scale(1.03); }
.hero-media picture { position: absolute; inset: 0; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; }
.hero-video.ready { opacity: 1; }

.btn-outline { background: transparent; color: var(--ink); border-color: rgba(27, 32, 29, .35); }
.btn-outline:hover { border-color: var(--ink); background: rgba(27, 32, 29, .04); }
.gallery-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.status-line { margin-top: clamp(34px, 4vw, 48px); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }

/* ---------- answers ---------- */
.faq { background: var(--paper); color: var(--ink); padding: clamp(90px, 11vw, 140px) var(--gutter) clamp(20px, 3vw, 40px); border-top: 1px solid var(--rule); }
.faq-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--header-h) + 40px); }
.faq-head .eyebrow { color: var(--barn); }
.faq-head h2 { font-family: var(--display); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; margin-top: .35em; }
.faq-list { display: grid; }
.faq-item { padding: 22px 0 24px; border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item h3 { font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; margin-bottom: 8px; }
.faq-item p { color: var(--stone); font-size: 16px; line-height: 1.7; max-width: 62ch; }
@media (max-width: 860px) { .faq-inner { grid-template-columns: 1fr; } .faq-head { position: static; } }

/* ---------- film ---------- */
.film .film-stage { position: absolute; inset: 64px clamp(0px, 4vw, 64px) clamp(24px, 5vh, 64px); display: grid; place-items: center; }
.film video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; background: #000; }

.footer-listing { font-style: normal; }
.plain .updated { margin-top: 2.4em; font-size: 14px; }
.lb-slide picture { position: absolute; inset: 0; }
.lb-slide img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- all photographs page ---------- */
.gallery-actions .text-link { align-self: center; margin-left: 8px; font-size: 14px; text-underline-offset: 4px; text-decoration-color: rgba(27, 32, 29, .35); }
.gallery-actions .text-link:hover { text-decoration-color: currentColor; }
.photos-page .photos-head { max-width: 1240px; margin: 0 auto clamp(40px, 5vw, 64px); }
.photos-page .photos-head .eyebrow a { text-decoration: none; }
.photos-page .photos-head p:not(.eyebrow) { max-width: 70ch; }
.photo-group { max-width: 1240px; margin: 0 auto clamp(48px, 6vw, 80px); }
.photo-group h2 { font-family: var(--serif); font-style: italic; font-size: 1.5rem; margin: 0 0 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
.photo { margin: 0; }
.photo picture { display: block; aspect-ratio: 3 / 2; background: var(--rule); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--stone); }
@media (max-width: 1100px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .photo-grid { grid-template-columns: 1fr; } }

/* ---------- reduced motion: the same story as still frames ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scene { height: auto !important; }
  .sticky { position: relative; }
  .js .scene .copy, .js .reveal, .js .hero-in { opacity: 1 !important; transform: none !important; }
  .js .hero-media, .media, .drift-track, .pan .media { transform: none !important; }
  .scene-residence .layer-b, .scene-dusk .layer-a, .scene-lookout .layer-a { display: none; }
  .scene-dusk .layer-b, .scene-lookout .layer-b { opacity: 1 !important; }
  .scene-dusk .glow { opacity: 1 !important; }
  .scene-dusk .copy h2 { color: var(--ivory) !important; }
  .split-detail { clip-path: none !important; }
  .js .map .route { stroke-dashoffset: 0 !important; }
  .hero-video { display: none; }
}