/* ===== the river: the site flows left to right over running water ===== */
.hero-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:#efe8d8;opacity:.85}

.river{position:relative}
.river-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.river-track{
  display:flex;align-items:center;gap:7vw;padding:0 11vw 15vh;height:100%;
  will-change:transform;
}
.panel{
  flex:0 0 auto;width:min(78vw,860px);max-height:74vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border:1px solid rgba(109,100,82,.16);border-radius:20px;
  padding:2.4rem 2.6rem;box-shadow:0 24px 70px rgba(40,35,26,.14);
  will-change:opacity,transform;
}
.panel-wide{width:min(112vw,1280px)}
.panel h2{max-width:none}
.panel .lede{font-size:1rem}
.panel .stat-grid{margin-top:1.6rem}
.panel .story-photo{float:right;width:38%;margin:0 0 1rem 1.4rem}
.panel .story-photo img{border:6px solid #fff;border-radius:4px;transform:rotate(1.2deg);box-shadow:0 18px 44px rgba(40,35,26,.2)}
.panel .story-photo figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--ink-soft);margin-top:.5rem;text-align:center}

/* available-lot cards, drifting on the current */
.open-strip{display:flex;gap:1rem;margin-top:1.8rem;overflow-x:auto;padding-bottom:.8rem;scrollbar-width:thin}
.open-card{
  flex:0 0 210px;background:var(--canvas);border:1px solid rgba(109,100,82,.22);border-radius:14px;
  padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;
}
.open-card b{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--accent)}
.open-card .oc-price{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--ink)}
.open-card .oc-size{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--ink-soft)}
.open-card .oc-note{font-size:.85rem;color:var(--ink-soft);line-height:1.4}
.open-card a{margin-top:auto;font-size:.85rem;font-weight:600;color:var(--accent);text-decoration:underline}

/* compact destination list inside the flow */
.adv-list{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.6rem}
.adv-mini{
  display:flex;align-items:center;gap:.9rem;border:1px solid rgba(109,100,82,.18);border-radius:14px;
  padding:.6rem;background:var(--canvas);cursor:pointer;text-align:left;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.adv-mini:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(40,35,26,.14)}
.adv-mini img{width:86px;height:64px;object-fit:cover;border-radius:9px;flex:none}
.adv-mini i{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:var(--accent);display:block}
.adv-mini b{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink)}

.concept-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
.concept-duo img{border-radius:12px}

/* ===== the water, flowing left to right beneath everything ===== */
.water{position:absolute;left:0;right:0;bottom:0;height:15vh;min-height:96px;pointer-events:none;z-index:2}
.water i{position:absolute;left:0;right:0;bottom:0;display:block;background-repeat:repeat-x;background-position:0 bottom}
.water .w1{
  height:100%;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'%3E%3Cpath d='M0 42 Q150 12 300 42 T600 42 V90 H0 Z' fill='%23a8c3d4'/%3E%3C/svg%3E");
  background-size:600px 100%;animation:flowR 17s linear infinite;
}
.water .w2{
  height:72%;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 70' preserveAspectRatio='none'%3E%3Cpath d='M0 34 Q175 6 350 34 T700 34 V70 H0 Z' fill='%238fb0a4'/%3E%3C/svg%3E");
  background-size:700px 100%;animation:flowR 11s linear infinite;
}
.water .w3{
  height:46%;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 50' preserveAspectRatio='none'%3E%3Cpath d='M0 26 Q125 8 250 26 T500 26 V50 H0 Z' fill='%23779e91'/%3E%3C/svg%3E");
  background-size:500px 100%;animation:flowR 7.5s linear infinite;
}
@keyframes flowR{from{background-position-x:0}to{background-position-x:600px}}
.water .w2{animation-name:flowR2}
@keyframes flowR2{from{background-position-x:0}to{background-position-x:700px}}
.water .w3{animation-name:flowR3}
@keyframes flowR3{from{background-position-x:0}to{background-position-x:500px}}

/* ===== flat mode: phones and reduced motion get the vertical stack ===== */
.river.flat .river-stage{position:static;height:auto;overflow:visible;display:block}
.river.flat .river-track{display:block;padding:2rem 5vw;transform:none !important}
.river.flat .panel{width:auto;max-height:none;overflow:visible;margin-bottom:1.6rem;opacity:1 !important;transform:none !important}
.river.flat .water{display:none}
@media (prefers-reduced-motion:reduce){
  .water i{animation:none}
}
@media (max-width:900px){
  .adv-list{grid-template-columns:1fr}
  .concept-duo{grid-template-columns:1fr}
  .panel .story-photo{float:none;width:100%;margin:1rem 0}
}

.panel .kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;color:var(--accent);margin-bottom:.8rem}
.panel h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.16}

/* real water: the generated creek loop, feathered into the page */
.water{height:17vh;min-height:110px}
.water video{
  width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%);
  mask-image:linear-gradient(180deg,transparent,#000 42%);
}

/* the real waterline: thin, blended into the page, drifting with the current */
.water{height:12vh;min-height:88px}
.water video{
  width:calc(100% + 420px);max-width:none;height:100%;object-fit:cover;object-position:bottom;
  mix-blend-mode:multiply;
  -webkit-mask-image:none;mask-image:none;
  will-change:transform;
}

/* show the waterline itself: anchor the band to the video's top, page melts into water */
.water{height:15vh;min-height:110px}
.water video{object-position:top}

/* ===== the plat, whole and unscrolled: text left, full map right ===== */
.panel-wide{width:min(64vw,980px);max-height:82vh;overflow:visible;padding:2rem 2.4rem}
.lots-cols{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:2.2rem;align-items:start}
.lots-left .lot-card{position:static;margin-top:1.4rem}
.lots-right{display:flex;justify-content:center}
.lots-right .lot-map{padding:.8rem;width:auto}
.lots-right .lot-map svg{height:min(72vh,900px);width:auto;display:block}
@media (max-width:900px){
  .lots-cols{grid-template-columns:1fr}
  .lots-right .lot-map svg{height:auto;width:100%}
}

/* ===== status colors, unmistakable: green / yellow / red ===== */
.lot-poly.available{fill:#8fbf6a;stroke:#6f9e4e}
.lot-poly.pending{fill:#f0c94f;stroke:#c7a134}
.lot-poly.sold{fill:#d95f4c;stroke:#ad4636;opacity:.92}
.lot-poly.sold:hover{fill:#d95f4c;stroke:#ad4636}
.dot-av{background:#8fbf6a}.dot-pe{background:#f0c94f}.dot-so{background:#d95f4c}
.lc-status.available{background:rgba(143,191,106,.18);color:#4e7433;border:1px solid #8fbf6a}
.lc-status.pending{background:rgba(240,201,79,.18);color:#8a6c14;border:1px solid #f0c94f}
.lc-status.sold{background:rgba(217,95,76,.15);color:#a03c2c;border:1px solid #d95f4c}
.lot-id{font-size:11px}

/* ===== plat typography, surveyor's hand ===== */
.lot-map svg{font-family:'Albert Sans',system-ui,sans-serif}
.rd-name{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:15px;fill:#7a7259;letter-spacing:.06em}
.rd-edge{font-family:'Space Mono',monospace;font-size:13px;fill:#8a8168;letter-spacing:.22em}
.blk{font-family:'Space Mono',monospace;font-size:19px;fill:#b9b19a;letter-spacing:.5em;opacity:.85}
.cm-name{font-family:'Space Mono',monospace;font-size:10px;fill:#7d7f68;letter-spacing:.16em}
.cm-sub{font-family:'Space Mono',monospace;font-size:10px;fill:#8a8168}
.lot-num{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:25px;fill:#2e2a20}
.lot-ac{font-family:'Space Mono',monospace;font-size:12.5px;fill:#5f5947}
.lot-price{font-family:'Space Mono',monospace;font-size:14.5px;font-weight:700;letter-spacing:.04em}
.lot-price.available{fill:#3c6b1f}
.lot-price.pending{fill:#8a6c14}
.lot-price.sold{fill:#8f2f20}
.lot-g{cursor:pointer}
.lot-g:focus{outline:none}
.lot-g:focus .lot-poly{stroke:#28231a;stroke-width:3}
.lot-poly{stroke-width:1.4;transition:fill .2s var(--ease-out),stroke .2s var(--ease-out)}
.lot-poly.sel{stroke:#28231a;stroke-width:3}
.lot-g:hover .lot-poly{fill-opacity:.72}
.lot-g:hover .lot-poly.sold{fill-opacity:1}

/* ===== the hero as the river's first panel: one motion, always sideways ===== */
.panel-hero{
  width:min(92vw,1480px);max-height:74vh;height:74vh;padding:0;overflow:hidden;
  position:relative;border:0;background:#1a232e;
}
.panel-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(20,26,20,.72) 0%,rgba(20,26,20,.35) 45%,rgba(20,26,20,0) 70%)}
.panel-hero .hero-ui{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;
  gap:1rem;align-items:flex-start;padding:0 clamp(2rem,5vw,4.5rem);max-width:820px;color:#fdfaf2;
}
.panel-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4vw,3.4rem);line-height:1.1;text-shadow:0 2px 22px rgba(10,14,10,.55)}
.panel-hero .hero-sub{font-size:clamp(1rem,1.4vw,1.18rem);color:#efe8d8;text-shadow:0 1px 12px rgba(10,14,10,.6);max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.btn-ghost{background:rgba(253,250,242,.12);border:1px solid rgba(253,250,242,.55);color:#fdfaf2}
.btn-ghost:hover{background:rgba(253,250,242,.22)}

/* the cue that tells people which way the site moves */
.scroll-cue{
  position:absolute;right:clamp(1.4rem,3vw,3rem);bottom:1.6rem;z-index:3;
  display:flex;align-items:center;gap:.7rem;color:#fdfaf2;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-shadow:0 1px 10px rgba(10,14,10,.7);
}
.scroll-cue i{
  display:block;width:56px;height:1px;background:rgba(253,250,242,.55);position:relative;
}
.scroll-cue i::after{
  content:"";position:absolute;top:-3px;right:0;width:7px;height:7px;
  border-top:1px solid #fdfaf2;border-right:1px solid #fdfaf2;transform:rotate(45deg);
}
.scroll-cue{animation:cueDrift 2.6s var(--ease-out) infinite}
@keyframes cueDrift{0%,100%{transform:translateX(0);opacity:.9}50%{transform:translateX(9px);opacity:1}}

/* ===== the rail: where you are in the journey, and a way to jump ===== */
.rail{
  position:absolute;left:0;right:0;bottom:calc(15vh + 1rem);z-index:6;
  display:flex;justify-content:center;align-items:center;gap:.45rem;pointer-events:auto;
}
.rail button{
  border:0;background:none;cursor:pointer;padding:.5rem .25rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;
}
.rail .dot{display:block;width:26px;height:3px;border-radius:2px;background:rgba(109,100,82,.3);transition:background .35s var(--ease-out),width .35s var(--ease-out)}
.rail button:hover .dot{background:rgba(176,83,44,.6)}
.rail button.on .dot{background:var(--accent);width:46px}
.rail .rl{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--ink-soft);
  opacity:0;transition:opacity .35s var(--ease-out);white-space:nowrap;
}
.rail button.on .rl,.rail button:hover .rl{opacity:1}
@media (max-width:900px){.rail{display:none}}
.river.flat .rail{display:none}
.river.flat .panel-hero{height:auto;max-height:none;min-height:70vh}
.river.flat .scroll-cue{display:none}

/* tap-to-play, only when a browser refuses muted autoplay */
.film-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  background:var(--accent);color:#fff;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:1.05rem;padding:.9em 2em;
  box-shadow:0 14px 44px rgba(10,16,24,.5);
}
.film-play:hover{background:var(--accent-hover)}

/* ===== film captions: large, centered, cinematic ===== */
.film-cap{
  left:0;right:0;bottom:12vh;max-width:none;
  align-items:center;text-align:center;padding:0 6vw;
  transform:translateY(22px);gap:.9rem;
}
.film-cap.on{transform:none}
.film-cap i{
  font-size:clamp(.72rem,1.05vw,.95rem);letter-spacing:.42em;color:#f2dcae;
  text-shadow:0 2px 16px rgba(6,10,14,.9);
}
.film-cap b{
  font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.02;letter-spacing:-.005em;
  text-shadow:0 3px 40px rgba(6,10,14,.85),0 1px 5px rgba(6,10,14,.6);
}
.film::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46vh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,16,0),rgba(8,12,16,.62));
}
.film-cap,.film-skip{z-index:4}

/* ===== the plat: sharp corners, survey typography sized to the bigger frame ===== */
.lot-poly{stroke-width:2.4;rx:0}
.common{fill:#e4e7d8;stroke:#a8a48c;stroke-width:2}
.lot-num{font-size:46px}
.lot-ac{font-size:23px}
.lot-price{font-size:30px}
.rd-name{font-size:27px}
.rd-edge{font-size:23px}
.blk{font-size:40px;letter-spacing:.42em}
.cm-name{font-size:20px;letter-spacing:.14em}
.cm-sub{font-size:19px}
.lot-legend{gap:1.1rem}

/* ==========================================================================
   THE FINE-TOOTH PASS: proportion, distinct panels, documents, mobile
   ========================================================================== */

/* no image is ever stretched: every frame declares its ratio and crops */
img{max-width:100%;height:auto}
.panel img,.panel video{object-fit:cover}
.concept-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.5rem}
.concept-duo figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(40,35,26,.14)}
.concept-duo img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.adv-mini img{width:104px;height:78px;aspect-ratio:4/3;object-fit:cover;flex:none}

/* the hero: taller frame, kicker above the headline */
.hero-kick{font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;color:#f0d9a8;text-shadow:0 1px 10px rgba(10,14,10,.8)}
.panel-hero{height:min(74vh,760px);max-height:760px}
.panel-hero .hero-bg{object-position:center 62%}

/* ---- groundwork: utilities as a refined row, documents as real cards ---- */
.panel-ground{width:min(66vw,1020px)}
.util-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:1.6rem}
.util{
  background:var(--canvas);border:1px solid rgba(109,100,82,.2);border-radius:12px;
  padding:.9rem 1rem;display:flex;flex-direction:column;gap:.15rem;
}
.util b{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink)}
.util i{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;color:var(--ink-soft)}
.d-kick{font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;color:var(--accent);margin-top:2rem}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.9rem}
.doc{
  display:flex;flex-direction:column;gap:.35rem;min-height:112px;
  background:var(--canvas);border:1px solid rgba(109,100,82,.26);border-left:5px solid var(--accent);
  border-radius:12px;padding:1.1rem 1.3rem;text-decoration:none;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .3s var(--ease-out);
}
.doc:hover{transform:translateY(-3px);background:#fff;box-shadow:0 16px 40px rgba(40,35,26,.16)}
.doc b{font-family:var(--display);font-weight:600;font-size:1.22rem;color:var(--ink)}
.doc em{font-style:normal;font-size:.92rem;color:var(--ink-soft);line-height:1.45}
.doc i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--accent);margin-top:auto}

/* ---- the area: the number leads ---- */
.stat-n{
  font-family:var(--display);font-weight:600;font-size:2.3rem;line-height:1;color:var(--accent);
  display:block;margin-bottom:.2rem;
}
.stat b{font-size:1rem;line-height:1.28}

/* ---- the legacy: an editorial spread on paper ---- */
.panel-legacy{width:min(74vw,1180px);background:#fdfbf4}
.legacy-cols{display:grid;grid-template-columns:minmax(240px,330px) 1fr;gap:2.6rem;align-items:start}
.legacy-photo{margin:0}
.legacy-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border:8px solid #fff;border-radius:3px;box-shadow:0 22px 55px rgba(40,35,26,.24);transform:rotate(-1.4deg)}
.legacy-photo figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--ink-soft);margin-top:1rem;text-align:center}
.legacy-body h2{max-width:18ch}
.legacy-body .lede{font-size:1rem;line-height:1.72;margin-top:1rem;color:#4a4436}
.legacy-body .lede.drop::first-letter{
  font-family:var(--display);font-weight:600;font-size:3.1rem;line-height:.82;
  float:left;padding:.06em .12em 0 0;color:var(--accent);
}
.panel-legacy::after{
  content:"";position:absolute;left:2.6rem;right:2.6rem;bottom:1.5rem;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-muted),transparent);
}

/* ---- the visit panel ---- */
.panel-visit{width:min(52vw,760px)}
.visit-call{margin-top:1.2rem;color:var(--ink-soft)}
.visit-call a{color:var(--accent);font-weight:600;text-decoration:underline}

/* ---- iOS-safe viewport units everywhere the screen height matters ---- */
.river-stage{height:100vh;height:100dvh}
.film{height:100vh;height:100dvh}
.panel{max-height:74vh;max-height:74dvh}
.panel-wide{max-height:82vh;max-height:82dvh}

/* ==========================================================================
   MOBILE: iOS and Android get a calm vertical site, generous touch targets
   ========================================================================== */
@media (max-width:900px){
  .river.flat .river-track{padding:1.2rem 5vw 3rem}
  .river.flat .panel{
    width:auto;max-height:none;height:auto;padding:1.7rem 1.4rem;margin-bottom:1.3rem;
    opacity:1 !important;transform:none !important;
  }
  .river.flat .panel-hero{
    height:auto;min-height:auto;padding:0;margin-bottom:1.3rem;border-radius:18px;overflow:hidden;
  }
  .river.flat .panel-hero .hero-bg{position:relative;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
  .river.flat .panel-hero::after{background:linear-gradient(180deg,rgba(20,26,20,.15) 30%,rgba(20,26,20,.82) 100%)}
  .river.flat .panel-hero .hero-ui{
    position:absolute;inset:auto 0 0 0;height:auto;padding:1.4rem 1.3rem 1.6rem;max-width:none;
  }
  .panel-hero h1{font-size:clamp(1.7rem,7.4vw,2.5rem)}
  .panel-hero .hero-sub{font-size:.98rem}
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1 1 100%;justify-content:center;min-height:48px}
  .panel h2{font-size:clamp(1.35rem,5.6vw,1.9rem)}
  .panel .lede{font-size:1rem}
  /* the plat gets the full width and stays legible */
  .lots-cols{grid-template-columns:1fr;gap:1.2rem}
  .lots-right .lot-map{padding:.5rem;width:100%}
  .lots-right .lot-map svg{height:auto;width:100%}
  .lot-card{position:static;margin-top:1rem}
  /* one column for everything that was two */
  .util-row,.doc-grid,.concept-duo,.legacy-cols,.stat-grid{grid-template-columns:1fr}
  .legacy-photo img{transform:none;max-width:320px;margin:0 auto}
  .legacy-photo figcaption{margin-bottom:1.2rem}
  .legacy-body .lede.drop::first-letter{font-size:2.6rem}
  /* touch targets */
  .chip{min-height:44px;display:inline-flex;align-items:center;padding:.55em 1.2em}
  .doc{min-height:96px}
  .adv-mini{min-height:88px}
  .form input{min-height:48px;font-size:16px} /* 16px stops iOS zoom-on-focus */
  .form .btn,.btn{min-height:48px}
  .nav{padding:.7rem 5vw}
  .nav-mark{font-size:.8rem;letter-spacing:.18em}
  .film-cap{bottom:16vh;padding:0 7vw}
  .film-cap b{font-size:clamp(1.9rem,8.4vw,3rem)}
  .film-cap i{font-size:.62rem;letter-spacing:.3em}
  .film-skip{right:1rem;bottom:1.2rem;min-height:44px;display:inline-flex;align-items:center}
  .footer{padding:2rem 5vw 2.6rem}
}
@media (max-width:420px){
  .panel{padding:1.4rem 1.1rem}
  .doc b{font-size:1.1rem}
  .stat-n{font-size:2rem}
}
/* never let anything push the page sideways.
   NOTE: overflow-x:hidden here would break position:sticky on the river stage.
   overflow-x:clip contains the same overflow without creating a scroll container. */
html,body{max-width:100%;overflow-x:clip}

/* ---- final pass ---- */
/* the legacy spread gets the room its three paragraphs need */
.panel-legacy{max-height:86vh;max-height:86dvh}
.legacy-body .lede{font-size:.97rem;line-height:1.68;margin-top:.85rem}
.legacy-cols{gap:2.2rem}

/* inline phone links are real tap targets, not hairlines */
.lot-call a,.visit-call a,.footer a[href^="tel:"]{display:inline-block;padding:.35em 0;min-height:32px}
@media (max-width:900px){
  .lot-call a,.visit-call a,.footer a[href^="tel:"]{min-height:44px;padding:.6em 0}
  /* the kicker stays on one line on a phone */
  .hero-kick{letter-spacing:.2em;font-size:.58rem;white-space:nowrap}
  .panel-hero .hero-ui{gap:.7rem}
}
.footer .fineprint a{display:inline-block;padding:.4em 0;min-height:34px}
@media (max-width:900px){.footer .fineprint a{min-height:44px;padding:.7em 0}}

/* ==========================================================================
   HERO PROPORTION · THE MARK ON EVERY PANEL · THE FAINT LANDSCAPE
   ========================================================================== */

/* the hero sits inside the frame so the scroll cue is always visible */
.panel-hero{
  width:min(72vw,1160px);height:min(76vh,780px);height:min(76dvh,780px);max-height:780px;
}
.scroll-cue{right:1.8rem;bottom:1.4rem}

/* the name rides every panel, quietly */
.panel{position:relative}
.panel:not(.panel-hero)::before{
  content:"WITHERS ESTATES";
  position:absolute;top:1rem;right:1.4rem;z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:.52rem;letter-spacing:.34em;color:var(--ink-soft);opacity:.5;
}
.panel-legacy::before,.panel-wide::before{opacity:.42}
@media (max-width:900px){.panel:not(.panel-hero)::before{top:.7rem;right:.9rem;font-size:.46rem;letter-spacing:.26em}}

/* the last page: one action, no second form */
.visit-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem}
.btn-big{font-size:1.06rem;padding:.95em 2.1em;min-height:54px}
.panel-visit .btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.panel-visit .btn-ghost:hover{background:rgba(176,83,44,.08)}
.visit-note{margin-top:1.1rem;font-size:.9rem;color:var(--ink-soft)}
@media (max-width:900px){.visit-actions .btn{flex:1 1 100%;justify-content:center}}

/* the faint landscape behind the white space */
.backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.backdrop svg{position:absolute;left:0;bottom:0;width:100%;height:78%}
.bd-ridge-far{fill:var(--sky);opacity:.15}
.bd-ridge-near{fill:var(--field);opacity:.13}
.bd-dune{fill:var(--accent);opacity:.055}
.bd-dune2{fill:var(--accent);opacity:.045}
.river-track{position:relative;z-index:1}
.rail{z-index:6}
@media (max-width:900px){
  .backdrop{position:fixed;inset:0;height:100vh;height:100dvh}
  .backdrop svg{height:56%}
  .bd-ridge-far{opacity:.11}
  .bd-ridge-near{opacity:.1}
}

/* ===== film captions: the small line gets real presence ===== */
.film-cap i{
  font-size:clamp(1rem,1.5vw,1.35rem);letter-spacing:.36em;font-weight:600;
  color:#f6e2b4;text-shadow:0 2px 20px rgba(6,10,14,.95),0 1px 4px rgba(6,10,14,.8);
}
.film-cap b{font-weight:600}
.film-cap{gap:1.15rem}

/* the arrival: bold, centered, with purpose */
.film-cap.big{bottom:auto;top:50%;transform:translateY(-46%)}
.film-cap.big.on{transform:translateY(-50%)}
.film-cap.big i{
  font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:.5em;color:#f8e9c4;
}
.film-cap.big b{
  font-size:clamp(3.2rem,8.2vw,7.2rem);line-height:.98;letter-spacing:-.015em;font-weight:600;
  text-shadow:0 4px 60px rgba(6,10,14,.95),0 2px 10px rgba(6,10,14,.85);
}
.film-cap.big::after{
  content:"";display:block;width:clamp(90px,12vw,190px);height:3px;margin:.5rem auto 0;
  background:linear-gradient(90deg,transparent,#f6e2b4,transparent);border-radius:2px;
}
.film.has-big::after{background:linear-gradient(180deg,rgba(8,12,16,.35),rgba(8,12,16,.72))}

@media (max-width:900px){
  .film-cap i{font-size:.92rem;letter-spacing:.3em}
  .film-cap b{font-size:clamp(2.1rem,9.6vw,3.2rem)}
  .film-cap.big i{font-size:.95rem;letter-spacing:.4em}
  .film-cap.big b{font-size:clamp(2.6rem,12.4vw,4rem);line-height:1.02}
  .film-cap.big::after{height:2px;margin-top:.45rem}
}