:root{
  --pine:#16302a;
  --pine-deep:#0f2220;
  --pine-mid:#1d4038;
  --sand:#e9dcc2;
  --sand-soft:#f6efe1;
  --cream:#fbf8f1;
  --lake:#2f6f7a;
  --lake-light:#5f9aa2;
  --ink:#1a211f;
  --ink-soft:#4b564f;
  --line:#ddd3bd;
  --radius:4px;
  --wrap:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Work Sans",system-ui,sans-serif;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.1;margin:0;letter-spacing:-.01em}
h1 em,.brand-text em{font-style:italic;font-weight:400}
p{margin:0 0 1rem}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--pine);color:var(--cream);padding:10px 16px;border-radius:var(--radius)}
:focus-visible{outline:2px solid var(--lake);outline-offset:3px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(251,248,241,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--pine)}
.mark{width:30px;height:30px;flex:none}
.brand-text{font-family:"Fraunces",serif;font-size:18px;font-weight:600;line-height:1.05;display:flex;flex-direction:column}
.brand-text em{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.site-header nav{display:flex;align-items:center;gap:28px}
.site-header nav a{font-size:15px;text-decoration:none;color:var(--ink-soft);transition:color .2s}
.site-header nav a:hover{color:var(--pine)}
.menu-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--pine);margin:4px 0;transition:transform .3s var(--ease),opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.site-header nav.mobile-nav{display:none;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line);background:var(--cream)}
.mobile-nav a{padding:15px clamp(20px,5vw,40px);text-decoration:none;font-size:16px;border-bottom:1px solid var(--line);color:var(--pine)}
.site-header nav.mobile-nav.open{display:flex}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--pine);color:var(--cream);
  padding:14px 26px;border:0;border-radius:var(--radius);cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:500;text-decoration:none;letter-spacing:.01em;
  transition:background .2s,transform .2s var(--ease);
}
.btn:hover{background:var(--pine-mid);transform:translateY(-1px)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-ghost{background:transparent;color:var(--pine);box-shadow:inset 0 0 0 1px var(--pine)}
.btn-ghost:hover{background:rgba(22,48,42,.06)}
.btn-full{width:100%;padding:16px;font-size:16px}

/* ---------- photo slots ---------- */
.photo-slot{
  position:relative;background:
    linear-gradient(135deg,rgba(22,48,42,.07),rgba(47,111,122,.1)),var(--sand-soft);
  border:1px dashed var(--line);border-radius:var(--radius);overflow:hidden;
  min-height:180px;display:flex;align-items:flex-end;
}
.photo-slot::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(22,48,42,.10) 1px,transparent 1px);
  background-size:16px 16px;opacity:.6;
}
.slot-tag{
  position:relative;z-index:2;margin:12px;padding:5px 10px;border-radius:2px;
  background:rgba(22,48,42,.85);color:var(--cream);
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
}
.photo-slot.tall{min-height:380px}
.photo-slot.wide{min-height:240px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--pine-deep);color:var(--cream);overflow:hidden}
.hero-media{position:absolute;inset:0;border:0;border-radius:0;opacity:.5;align-items:flex-start;justify-content:flex-end}
.hero-media::after{opacity:.35}
.hero-media .slot-tag{background:rgba(251,248,241,.9);color:var(--pine)}
.hero-copy{position:relative;z-index:3;padding-top:clamp(72px,12vw,132px);padding-bottom:clamp(72px,12vw,132px);max-width:960px}
.hero::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,rgba(15,34,32,.94) 0%,rgba(15,34,32,.82) 48%,rgba(15,34,32,.55) 100%)}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.eyebrow.light{color:var(--lake-light)}
.hero .eyebrow{color:var(--lake-light)}
.hero h1{font-size:clamp(38px,6.4vw,76px);max-width:20ch;margin-bottom:24px}
.lede{font-size:clamp(17px,1.6vw,20px);max-width:58ch;color:rgba(251,248,241,.84);margin-bottom:32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:52px}
.hero .btn{background:var(--sand);color:var(--pine-deep)}
.hero .btn:hover{background:#f2e7cf}
.hero .btn-ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(251,248,241,.45)}
.hero .btn-ghost:hover{background:rgba(251,248,241,.1)}
.hero-facts{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);margin:0;padding-top:28px;border-top:1px solid rgba(251,248,241,.18)}
.hero-facts dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lake-light);margin-bottom:6px}
.hero-facts dd{margin:0;font-family:"Fraunces",serif;font-size:20px}

/* ---------- properties ---------- */
.property{padding:clamp(64px,9vw,120px) 0}
.property.alt{background:var(--sand-soft)}
.prop-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:start}
.prop-grid.reverse .prop-copy{order:2}
.prop-copy h2{font-size:clamp(29px,3.6vw,44px);margin-bottom:10px;max-width:18ch}
.addr{font-size:14px;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:22px}
.prop-copy p{color:var(--ink-soft);max-width:48ch}
.ticks{list-style:none;padding:0;margin:0 0 28px}
.ticks li{position:relative;padding-left:26px;margin-bottom:9px;font-size:16px;color:var(--ink-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:var(--lake);opacity:.75}
.ticks.light li{color:rgba(251,248,241,.82)}
.ticks.light li::before{background:var(--lake-light)}
.rate-block{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.rate{flex:1 1 150px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.property.alt .rate{background:#fff}
.rate-label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.rate-num{font-family:"Fraunces",serif;font-size:30px;font-weight:600;color:var(--pine);display:block;line-height:1.1}
.rate-num small{font-family:"Work Sans",sans-serif;font-size:13px;font-weight:400;color:var(--ink-soft);letter-spacing:.02em}
.fine{font-size:13.5px;color:var(--ink-soft);margin-bottom:26px}
.fine.center{text-align:center;margin:14px 0 0}
.prop-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prop-gallery .tall{grid-column:1/-1}

/* ---------- lake ---------- */
.lake{background:var(--pine);color:var(--cream);padding:clamp(64px,9vw,120px) 0}
.lake-h{font-size:clamp(29px,3.8vw,46px);max-width:22ch;margin-bottom:clamp(36px,5vw,56px)}
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,44px)}
.access .photo-slot{background:linear-gradient(135deg,rgba(251,248,241,.1),rgba(95,154,162,.16));border-color:rgba(251,248,241,.25);margin-bottom:20px}
.access .photo-slot::after{background-image:radial-gradient(rgba(251,248,241,.14) 1px,transparent 1px)}
.access .slot-tag{background:rgba(251,248,241,.9);color:var(--pine)}
.access h3{font-size:22px;margin-bottom:10px}
.access p{color:rgba(251,248,241,.78);max-width:44ch}
.pull{
  font-family:"Fraunces",serif;font-size:clamp(20px,2.4vw,27px);line-height:1.4;
  max-width:34ch;margin:clamp(44px,6vw,72px) 0 0;padding-left:24px;
  border-left:2px solid var(--lake-light);color:var(--sand);
}

/* ---------- rates ---------- */
.rates{padding:clamp(64px,9vw,120px) 0}
.rates h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:12px}
.sub{color:var(--ink-soft);max-width:52ch;margin-bottom:36px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;min-width:620px;border-collapse:collapse;text-align:left}
thead th{
  font-family:"Work Sans",sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:0 16px 12px 0;border-bottom:1px solid var(--pine);
}
tbody th{font-family:"Fraunces",serif;font-size:19px;font-weight:600;color:var(--pine);padding:20px 16px 20px 0;border-bottom:1px solid var(--line);vertical-align:top}
tbody th span{display:block;font-family:"Work Sans",sans-serif;font-size:13px;font-weight:400;color:var(--ink-soft);margin-top:4px}
tbody td{padding:20px 16px 20px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-soft);vertical-align:top}
.terms{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:10px;max-width:70ch}
.terms li{font-size:15px;color:var(--ink-soft);padding-left:18px;position:relative}
.terms li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;background:var(--lake);border-radius:50%}
.terms strong{color:var(--pine)}

/* ---------- inquiry ---------- */
.inquire{background:var(--pine-deep);color:var(--cream);padding:clamp(64px,9vw,120px) 0}
.inq-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,80px);align-items:start}
.inq-intro h2{font-size:clamp(29px,3.6vw,44px);margin-bottom:18px}
.inq-intro p{color:rgba(251,248,241,.8);max-width:44ch}
.inq-form{background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:clamp(24px,3.4vw,38px)}
.field{margin-bottom:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
input,select,textarea{
  width:100%;padding:12px 14px;font-family:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--lake);outline:none;box-shadow:0 0 0 3px rgba(47,111,122,.14)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:#a4402f;background:#fdf4f2}
.estimate{background:var(--sand-soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:20px}
.est-label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.est-lines div{display:flex;justify-content:space-between;gap:16px;font-size:15px;padding:5px 0;color:var(--ink-soft)}
.est-lines div.total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-family:"Fraunces",serif;font-size:19px;color:var(--pine)}
.form-status{font-size:14px;margin:14px 0 0;text-align:center;color:var(--ink-soft)}
.form-status.ok{color:#1d6a4f}
.form-status.err{color:#a4402f}

/* ---------- footer ---------- */
.site-footer{background:var(--pine);color:rgba(251,248,241,.78);padding:clamp(48px,6vw,80px) 0 28px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
.site-footer .mark{width:34px;height:34px;color:var(--sand);margin-bottom:14px}
.foot-name{font-family:"Fraunces",serif;font-size:19px;color:var(--cream);margin:0}
.foot-sub{font-size:14px;margin:4px 0 0}
.site-footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lake-light);margin-bottom:14px;font-family:"Work Sans",sans-serif;font-weight:600}
.site-footer p{margin:0 0 12px;line-height:1.5}
.site-footer a{color:var(--sand)}
.foot-todo{font-size:13px;opacity:.65;font-style:italic}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(251,248,241,.16);font-size:13px}
.foot-bottom p{margin:0}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .site-header .header-inner nav{display:none}
  .menu-toggle{display:block}
  .prop-grid,.inq-grid,.access-grid,.foot-grid{grid-template-columns:1fr}
  .prop-grid.reverse .prop-copy{order:0}
  .prop-gallery{order:-1}
  .photo-slot.tall{min-height:260px}
}
@media (max-width:600px){
  body{font-size:16px}
  .row{grid-template-columns:1fr;gap:0}
  .hero-facts{gap:24px}
  .hero-facts div{flex:1 1 40%}
  .hero-actions .btn{width:100%;text-align:center}
  .prop-gallery{grid-template-columns:1fr}
  .pull{padding-left:18px}
  .foot-bottom{flex-direction:column}
}

/* ================= SPLIT ENTRY GATE ================= */
body.gate-open{overflow:hidden}
.gate{
  position:fixed;inset:0;z-index:200;background:var(--pine-deep);
  --split:50%;--skew:7%;
  transition:opacity .7s var(--ease);
}
.gate.closing{pointer-events:none}
.gate.gone{display:none}
.gate-panels{position:absolute;inset:0}
.gate-panel{
  position:absolute;inset:0;margin:0;padding:0;border:0;background:none;
  cursor:pointer;text-align:left;color:var(--cream);font-family:inherit;
  display:block;overflow:hidden;
  transition:clip-path .85s var(--ease);
}
.gate-panel--a{clip-path:polygon(0 0, calc(var(--split) + var(--skew)) 0, calc(var(--split) - var(--skew)) 100%, 0 100%)}
.gate-panel--b{clip-path:polygon(calc(var(--split) + var(--skew)) 0, 100% 0, 100% 100%, calc(var(--split) - var(--skew)) 100%)}
.gate-seam{
  position:absolute;top:-4%;bottom:-4%;left:var(--split);width:1px;
  background:linear-gradient(to bottom,transparent,rgba(233,220,194,.5),transparent);
  transform:skewX(-4deg);transform-origin:top;
  transition:left .85s var(--ease),opacity .5s;
}
.gp-photo{
  position:absolute;inset:0;border:0;border-radius:0;min-height:0;
  align-items:flex-start;justify-content:center;
  transform:scale(1.04);transition:transform 1.1s var(--ease);
}
.gp-photo .slot-tag{margin-top:96px;background:rgba(251,248,241,.85);color:var(--pine)}
.gp-veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,26,24,.94) 0%,rgba(10,26,24,.62) 45%,rgba(10,26,24,.5) 100%);
  transition:background .6s var(--ease);
}
.gate-panel--a .gp-veil{background:linear-gradient(to top,rgba(10,26,24,.94),rgba(10,26,24,.6))}
.gp-inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:0 6vw 13vh;max-width:min(30ch,40vw);
  transition:opacity .5s,transform .85s var(--ease);
}
.gate-panel--b .gp-inner{align-items:flex-start;margin-left:auto;padding-left:4vw;padding-right:6vw}
.gp-num{font-family:"Work Sans",sans-serif;font-size:11px;letter-spacing:.28em;color:var(--lake-light);margin-bottom:18px}
.gp-name{
  font-family:"Fraunces",serif;font-weight:600;line-height:.92;letter-spacing:-.02em;
  font-size:clamp(42px,5.6vw,84px);margin-bottom:16px;hyphens:auto;
}
.gp-addr{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,248,241,.6);margin-bottom:14px}
.gp-note{font-size:15.5px;line-height:1.55;color:rgba(251,248,241,.75);margin-bottom:22px}
.gp-rate{font-family:"Fraunces",serif;font-size:23px;color:var(--sand);margin-bottom:28px}
.gp-rate small{font-family:"Work Sans",sans-serif;font-size:13px;color:rgba(251,248,241,.6)}
.gp-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:7px;border-bottom:1px solid rgba(251,248,241,.4);
  transition:gap .3s var(--ease),border-color .3s,color .3s;
}
.gp-cta svg{width:19px;height:19px}

/* hover / focus: the seam slides toward the other home */
@media (hover:hover) and (min-width:801px){
  .gate-panels:has(.gate-panel--a:hover),.gate-panels:has(.gate-panel--a:focus-visible){--split:64%}
  .gate-panels:has(.gate-panel--b:hover),.gate-panels:has(.gate-panel--b:focus-visible){--split:36%}
  .gate-panel:hover .gp-photo,.gate-panel:focus-visible .gp-photo{transform:scale(1)}
  .gate-panel:hover .gp-veil{background:linear-gradient(to top,rgba(10,26,24,.9),rgba(10,26,24,.42))}
  .gate-panel:hover .gp-cta{gap:18px;border-color:var(--sand);color:var(--sand)}
}
.gate-panel:focus-visible{outline:none}
.gate-panel:focus-visible .gp-cta{gap:18px;border-color:var(--sand);color:var(--sand)}

/* chosen panel takes the whole screen */
.gate.choosing .gate-seam{opacity:0}
.gate.choose-a{--split:112%}
.gate.choose-b{--split:-12%}
.gate.choosing .gate-panel:not(.chosen) .gp-inner{opacity:0;transform:translateY(14px)}
.gate.choosing .chosen .gp-inner{opacity:0;transform:translateY(-24px);transition-delay:.05s}
.gate.choosing .chosen .gp-veil{background:linear-gradient(to top,rgba(10,26,24,.96),rgba(10,26,24,.8))}
.gate.out{opacity:0}

.gate-top{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:clamp(22px,3vw,36px) clamp(20px,5vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  pointer-events:none;transition:opacity .5s;
}
.gate-brand{display:flex;align-items:center;gap:12px;color:var(--cream);font-family:"Fraunces",serif;font-size:18px;font-weight:600;white-space:nowrap}
.gate-brand em{font-style:normal;font-family:"Work Sans",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lake-light);display:block}
.gate-brand .mark{width:30px;height:30px;color:var(--sand)}
.gate-kicker{
  margin:0;max-width:36ch;text-align:right;
  font-size:14px;line-height:1.6;color:rgba(251,248,241,.68);
}
.gate-bottom{position:absolute;bottom:0;left:0;right:0;z-index:5;display:flex;justify-content:center;padding:0 20px clamp(24px,4vw,38px);transition:opacity .4s}
.gate-both{
  background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,241,.62);
  padding:10px 14px;border-bottom:1px solid rgba(251,248,241,.22);transition:color .25s,border-color .25s;
}
.gate-both:hover{color:var(--sand);border-color:var(--sand)}
.gate.choosing .gate-top,.gate.choosing .gate-bottom{opacity:0}

/* ================= VIEW SWITCHER ================= */
.view-switch{
  position:fixed;z-index:70;bottom:20px;left:50%;transform:translateX(-50%) translateY(14px);
  display:flex;align-items:center;gap:14px;
  background:rgba(15,34,32,.94);backdrop-filter:blur(10px);
  color:var(--cream);border-radius:100px;padding:9px 9px 9px 20px;
  box-shadow:0 10px 30px rgba(15,34,32,.28);
  opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.view-switch.in{opacity:1;transform:translateX(-50%) translateY(0)}
.vs-label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lake-light)}
.vs-seg{display:flex;gap:4px;background:rgba(251,248,241,.08);border-radius:100px;padding:3px}
.vs-seg button{
  background:none;border:0;cursor:pointer;color:rgba(251,248,241,.72);font-family:inherit;
  font-size:13px;padding:7px 14px;border-radius:100px;white-space:nowrap;transition:background .25s,color .25s;
}
.vs-seg button:hover{color:var(--cream)}
.vs-seg button[aria-pressed="true"]{background:var(--sand);color:var(--pine-deep)}

/* filtered views */
body[data-view="turtle-bay"] #barndominium,
body[data-view="barndominium"] #turtle-bay{display:none}
body[data-view="turtle-bay"] [data-home="barndominium"],
body[data-view="barndominium"] [data-home="turtle-bay"]{display:none}
body[data-view="turtle-bay"] #turtle-bay,
body[data-view="barndominium"] #barndominium{background:var(--sand-soft)}
body[data-view="turtle-bay"] #turtle-bay .rate,
body[data-view="barndominium"] #barndominium .rate{background:#fff}
body[data-view="turtle-bay"] nav a[data-home="barndominium"],
body[data-view="barndominium"] nav a[data-home="turtle-bay"]{display:none}

@media (max-width:800px){
  .gate{--skew:0%}
  .gate-panel{transition:clip-path .8s var(--ease)}
  .gate-panel--a{clip-path:polygon(0 0,100% 0,100% var(--split),0 calc(var(--split) - 5%))}
  .gate-panel--b{clip-path:polygon(0 calc(var(--split) - 5%),100% var(--split),100% 100%,0 100%)}
  .gate-seam{top:var(--split);left:-4%;right:-4%;bottom:auto;width:auto;height:1px;transform:skewY(-2deg);
    background:linear-gradient(to right,transparent,rgba(233,220,194,.5),transparent);
    transition:top .8s var(--ease),opacity .5s}
  .gate.choose-a{--split:118%}
  .gate.choose-b{--split:-18%}
  .gate-panel--a .gp-inner{justify-content:flex-start;padding:15vh 24px 0;max-width:none}
  .gate-panel--b .gp-inner{justify-content:flex-end;padding:0 24px 13vh;margin-left:0;max-width:none}
  .gp-name{font-size:clamp(34px,10vw,52px);margin-bottom:10px}
  .gp-note{display:none}
  .gp-rate{font-size:19px;margin-bottom:18px}
  .gp-photo{align-items:flex-end}
  .gp-photo .slot-tag{margin:14px}
  .gate-panel--b .gp-photo{align-items:flex-start}
  .gate-kicker{display:none}
  .gate-top{padding:20px 24px}
  .view-switch{left:12px;right:12px;transform:translateY(14px);justify-content:center;padding:9px 12px;border-radius:14px;gap:10px}
  .view-switch.in{transform:translateY(0)}
  .vs-label{display:none}
  .vs-seg{width:100%;justify-content:space-between}
  .vs-seg button{flex:1;text-align:center;padding:9px 6px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .gate,.gate-panel,.gate-seam,.gp-photo,.gp-inner,.view-switch{transition:none!important}
}

/* ---- gate refinements ---- */
.gp-inner{max-width:min(460px,40vw)}
.gp-name{font-size:clamp(36px,4.5vw,68px);overflow-wrap:break-word}
.gp-addr{white-space:nowrap}
.gp-note{max-width:30ch}
.gp-photo{justify-content:flex-start}
.gate-panel--b .gp-photo{justify-content:flex-end}
.gp-photo .slot-tag{margin:clamp(74px,9vh,104px) clamp(24px,4vw,44px) 0}
.gate-panel--a .gp-photo{background:linear-gradient(150deg,rgba(47,111,122,.22),rgba(22,48,42,.3)),var(--sand-soft)}
.gate-panel--b .gp-photo{background:linear-gradient(150deg,rgba(233,220,194,.2),rgba(22,48,42,.34)),var(--sand-soft)}
.gate-panel--a .gp-veil{background:linear-gradient(to top,rgba(8,24,26,.95),rgba(10,34,38,.62))}
.gate-panel--b .gp-veil{background:linear-gradient(to top,rgba(14,28,22,.95),rgba(26,40,28,.6))}
@media (max-width:800px){
  .gp-inner{max-width:none}
  .gp-note{display:none}
  .gp-photo .slot-tag{margin:76px 24px 0}
  .gate-panel--b .gp-photo{align-items:flex-end;justify-content:flex-end}
  .gate-panel--b .gp-photo .slot-tag{margin:0 24px 76px}
}

/* ---- gate refinements 2 ---- */
.gp-inner{max-width:min(520px,42vw)}
.gp-name{font-size:clamp(34px,3.3vw,52px);word-break:break-word;max-width:100%}
.gate-panel--b .gp-inner{padding-left:5vw;padding-right:5vw}
.gp-photo{align-items:center;justify-content:flex-start}
.gate-panel--b .gp-photo{justify-content:flex-end;align-items:center}
.gp-photo .slot-tag{margin:0 clamp(20px,3.5vw,40px)}
@media (max-width:800px){
  .gp-name{font-size:clamp(32px,8.4vw,46px)}
  .gp-inner{max-width:none}
  .gp-photo,.gate-panel--b .gp-photo{align-items:flex-start;justify-content:center}
  .gp-photo .slot-tag{margin:30vh 0 0}
  .gate-panel--b .gp-photo .slot-tag{margin:0 0 26vh}
  .gate-panel--b .gp-photo{align-items:flex-end}
}

/* ---- gate photo tag placement ---- */
.gp-photo,.gate-panel--b .gp-photo{align-items:flex-start}
.gp-photo .slot-tag{margin:24vh clamp(28px,6vw,92px) 0}
@media (max-width:800px){
  .gp-photo .slot-tag{margin:32vh 0 0}
  .gate-panel--b .gp-photo{align-items:flex-end}
  .gate-panel--b .gp-photo .slot-tag{margin:0 0 24vh}
}

/* ---- final polish ---- */
body.has-switcher{padding-bottom:84px}
@media (max-width:800px){
  .gp-photo .slot-tag,.gate-panel--b .gp-photo .slot-tag{display:none}
  body.has-switcher{padding-bottom:76px}
}

/* ================= SWIPE GALLERY ================= */
.gallery{padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px);background:var(--cream);overflow:hidden}
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,38px)}
.gallery-head h2{font-size:clamp(28px,3.4vw,42px)}
.gallery-nav{display:flex;gap:10px}
.gnav{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--pine);
  display:grid;place-items:center;transition:background .22s,border-color .22s,transform .22s var(--ease),opacity .22s;
}
.gnav svg{width:20px;height:20px}
.gnav:hover{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.gnav:active{transform:scale(.94)}
.gnav[disabled]{opacity:.3;cursor:default}
.gnav[disabled]:hover{background:transparent;border-color:var(--line);color:var(--pine)}

.slides{
  list-style:none;margin:0;padding:0 0 12px;
  display:flex;gap:clamp(14px,1.8vw,26px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--edge);
  padding-left:var(--edge);padding-right:var(--edge);
  --edge:max(20px,calc((100vw - var(--wrap)) / 2 + 20px));
  --card:min(62vw,720px);
  scrollbar-width:none;cursor:grab;
}
.slides::-webkit-scrollbar{display:none}
.slides.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.slides:focus-visible{outline:2px solid var(--lake);outline-offset:6px;border-radius:var(--radius)}
.slide{
  flex:0 0 var(--card);scroll-snap-align:start;
  transition:opacity .45s var(--ease);
}
.slide-photo{
  min-height:clamp(280px,44vh,520px);border:0;border-radius:var(--radius);
  align-items:flex-end;
  transform:scale(.96);filter:saturate(.85);
  transition:transform .55s var(--ease),filter .55s var(--ease),box-shadow .55s var(--ease);
  user-select:none;-webkit-user-drag:none;
}
.slide.active .slide-photo{transform:scale(1);filter:none;box-shadow:0 18px 44px rgba(15,34,32,.16)}
.slide:not(.active){opacity:.62}
.slide-cap{
  margin:16px 2px 0;display:flex;flex-direction:column;gap:4px;
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.slide.active .slide-cap{opacity:1;transform:none}
.slide-cap span{font-family:"Fraunces",serif;font-size:19px;color:var(--pine)}
.slide-cap em{font-style:normal;font-size:13px;color:var(--ink-soft);opacity:.75}

.gallery-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(18px,2.4vw,30px)}
.dots{display:flex;gap:8px;align-items:center}
.dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line);transition:background .25s,width .3s var(--ease);
}
.dots button[aria-selected="true"]{background:var(--pine);width:26px;border-radius:100px}
.swipe-hint{margin:0;font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft);opacity:.8}
.swipe-hint kbd{
  font-family:inherit;font-size:12px;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:4px;padding:1px 6px;background:#fff;
}

/* only show the relevant photos for the chosen home */
body[data-view="turtle-bay"] .slide[data-home="barndominium"],
body[data-view="barndominium"] .slide[data-home="turtle-bay"]{display:none}

@media (max-width:800px){
  .slides{--card:min(80vw,420px);--edge:20px}
  .slide-photo{min-height:clamp(240px,38vh,340px)}
  .gallery-nav{display:none}
  .gallery-head{align-items:center}
  .swipe-hint kbd{display:none}
  .gallery-foot{justify-content:center}
  .swipe-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .slide-photo,.slide-cap,.slide{transition:none}
  .slides{scroll-behavior:auto}
}

/* ---- gallery: centre the active photo so both neighbours peek ---- */
.slides{
  --edge:max(20px,calc((100vw - var(--card)) / 2));
  scroll-padding-left:var(--edge);
}
.slide{scroll-snap-align:center}
@media (max-width:800px){
  .slides{--card:min(78vw,420px);--edge:calc((100vw - var(--card)) / 2)}
}

/* ================= ENTRY PHOTO DECKS ================= */
.gate-panel{cursor:pointer}
.gp-inner{padding-bottom:clamp(48px,9vh,96px)}
.gp-inner p{margin:0}

.deck{
  position:relative;width:min(440px,34vw);
  aspect-ratio:4/3;margin-bottom:clamp(20px,3vh,34px);
  touch-action:pan-y;cursor:grab;
}
.deck.dragging{cursor:grabbing}
.deck-card{
  position:absolute;inset:0;border:0;border-radius:6px;min-height:0;
  align-items:flex-end;overflow:hidden;
  background:linear-gradient(150deg,rgba(233,220,194,.3),rgba(47,111,122,.34)),var(--sand-soft);
  box-shadow:0 22px 50px rgba(6,18,16,.5);
  transform-origin:bottom left;
  transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease);
  will-change:transform;
}
.deck-card::after{background-image:radial-gradient(rgba(22,48,42,.14) 1px,transparent 1px);opacity:.5}
.deck-cap{
  position:relative;z-index:3;margin:0;padding:14px 16px;width:100%;
  font-size:13.5px;letter-spacing:.02em;color:var(--cream);
  background:linear-gradient(to top,rgba(8,20,18,.9),transparent);
  opacity:0;transition:opacity .45s var(--ease);
}
/* stack positions */
.deck-card{opacity:0;pointer-events:none;transform:translate3d(26px,26px,0) scale(.9) rotate(2.5deg);filter:brightness(.5)}
.deck-card.pos-0{opacity:1;pointer-events:auto;transform:none;filter:none;z-index:3}
.deck-card.pos-0 .deck-cap{opacity:1}
.deck-card.pos-1{opacity:1;transform:translate3d(20px,18px,0) scale(.955) rotate(1.6deg);filter:brightness(.62);z-index:2}
.deck-card.pos-2{opacity:1;transform:translate3d(38px,34px,0) scale(.915) rotate(3.2deg);filter:brightness(.45);z-index:1}
.deck-card.leaving{transform:translate3d(-46%,4px,0) scale(.94) rotate(-6deg);opacity:0;z-index:4}
.deck-card.leaving-back{transform:translate3d(46%,4px,0) scale(.94) rotate(6deg);opacity:0;z-index:4}

.deck-ui{
  position:absolute;left:0;bottom:-42px;z-index:5;
  display:flex;align-items:center;gap:10px;
}
.deck-arrow{
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(251,248,241,.08);border:1px solid rgba(251,248,241,.28);color:var(--cream);
  display:grid;place-items:center;transition:background .22s,border-color .22s,transform .2s var(--ease);
}
.deck-arrow svg{width:16px;height:16px}
.deck-arrow:hover{background:var(--sand);border-color:var(--sand);color:var(--pine-deep)}
.deck-arrow:active{transform:scale(.92)}
.deck-count{font-size:12px;letter-spacing:.14em;color:rgba(251,248,241,.55)}
.deck-count b{font-weight:500;color:var(--sand)}

.gate-panel--b .deck{margin-left:0}
.gp-cta{
  background:none;font-family:inherit;cursor:pointer;
  margin-top:8px;padding:0 0 7px;
}
.gp-cta:hover{gap:18px;border-color:var(--sand);color:var(--sand)}

/* the deck needs room, so tighten the type on the gate */
.gp-num{margin-bottom:10px!important}
.gp-name{font-size:clamp(30px,2.9vw,46px);margin-bottom:10px}
.gp-addr{margin-bottom:10px}
.gp-rate{font-size:20px;margin-bottom:16px}
.gp-inner{max-width:min(560px,44vw)}

@media (max-width:1100px){
  .deck{width:min(340px,38vw)}
  .gp-name{font-size:clamp(28px,3.2vw,38px)}
}
@media (max-width:800px){
  .gate{--split:50%}
  .deck{width:min(230px,52vw);aspect-ratio:4/3;margin-bottom:16px}
  .deck-ui{bottom:auto;top:8px;right:8px;left:auto;background:rgba(8,20,18,.55);border-radius:100px;padding:4px 6px;backdrop-filter:blur(6px)}
  .deck-arrow{width:28px;height:28px}
  .deck-cap{font-size:12px;padding:10px 12px}
  .gp-inner{max-width:none}
  .gate-panel--a .gp-inner{padding:10vh 24px 0}
  .gate-panel--b .gp-inner{padding:0 24px 9vh}
  .gp-name{font-size:clamp(26px,7vw,36px)}
  .gp-rate{font-size:17px;margin-bottom:12px}
  .gp-cta{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.deck-card{transition:none}}

/* deck spacing + CTA polish on the entry screen */
.deck{margin-bottom:clamp(52px,7vh,66px)}
.gp-cta{
  border:0;border-bottom:1px solid rgba(251,248,241,.45);
  display:inline-flex;align-items:center;gap:12px;
  color:var(--cream);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:gap .25s var(--ease),color .25s,border-color .25s;
}
.gp-cta svg{width:17px;height:17px}
.gp-cta:focus-visible{outline:2px solid var(--sand);outline-offset:5px}
@media (max-width:800px){.deck{margin-bottom:14px}}

/* phone: keep each half's content inside its own wedge */
@media (max-width:800px){
  .deck{width:min(196px,46vw);margin-bottom:12px}
  .deck-arrow{width:26px;height:26px}
  .deck-arrow svg{width:13px;height:13px}
  .deck-count{font-size:11px;letter-spacing:.1em}
  .deck-cap{font-size:11.5px;padding:8px 10px;line-height:1.3}
  .gp-num{margin-bottom:6px!important;font-size:10px}
  .gp-name{font-size:clamp(22px,6.2vw,30px);line-height:1.02;margin-bottom:6px}
  .gp-addr{margin-bottom:6px;font-size:11px}
  .gp-rate{font-size:15px;margin-bottom:10px}
  .gp-cta{font-size:11.5px;letter-spacing:.12em;gap:8px;padding-bottom:5px}
  .gp-cta svg{width:14px;height:14px}
  .gate-panel--a .gp-inner{padding:7vh 22px 0}
  .gate-panel--b .gp-inner{padding:0 22px 8vh}
}
@media (max-width:800px) and (max-height:700px){
  .deck{width:min(150px,38vw)}
  .gp-name{font-size:22px}
  .gp-addr{display:none}
}

/* clear the brand lockup on phones */
@media (max-width:800px){ .gate-panel--a .gp-inner{padding-top:96px} }
@media (max-width:800px) and (max-height:700px){ .gate-panel--a .gp-inner{padding-top:80px} }

/* short phones: the diagonal seam sits high on the left, so keep panel A compact */
@media (max-width:800px) and (max-height:700px){
  .gate-panel--a .gp-inner{padding-top:66px}
  .deck{width:min(124px,34vw);margin-bottom:10px}
  .deck-cap{font-size:10.5px;padding:6px 8px}
  .deck-arrow{width:22px;height:22px}
  .deck-arrow svg{width:11px;height:11px}
  .deck-ui{top:5px;right:5px;gap:6px}
  .gp-num{display:none}
  .gp-name{font-size:20px;margin-bottom:4px}
  .gp-rate{font-size:14px;margin-bottom:8px}
  .gp-cta{font-size:10.5px;letter-spacing:.1em}
}

/* phones: flatten the seam and shrink the stacks so nothing gets clipped */
@media (max-width:800px){
  .gate{--split:55%}
  .gate-panel--a{clip-path:polygon(0 0,100% 0,100% var(--split),0 calc(var(--split) - 2.5%))}
  .gate-panel--b{clip-path:polygon(0 calc(var(--split) - 2.5%),100% var(--split),100% 100%,0 100%)}
  .deck{width:min(160px,42vw);margin-bottom:10px}
  .deck-cap{font-size:11px;padding:7px 9px}
  .gp-num{display:none}
  .gp-addr{display:none}
  .gp-name{font-size:clamp(21px,5.8vw,26px);line-height:1.04;margin-bottom:6px}
  .gp-rate{font-size:15px;margin-bottom:10px}
  .gate-panel--a .gp-inner{padding-top:84px}
  .gate-panel--b .gp-inner{padding-bottom:7vh}
}
@media (max-width:800px) and (max-height:700px){
  .gate-panel--a .gp-inner{padding-top:64px}
  .deck{width:min(132px,36vw)}
  .gp-name{font-size:19px}
}

/* phones: shallower stack offset so the peeking corners never sit over the name */
@media (max-width:800px){
  .deck{margin-bottom:34px}
  .deck-card.pos-1{transform:translate3d(11px,9px,0) scale(.96) rotate(1.2deg)}
  .deck-card.pos-2{transform:translate3d(21px,17px,0) scale(.925) rotate(2.4deg)}
  .deck-card{transform:translate3d(15px,13px,0) scale(.91) rotate(2deg)}
  .gate-both{bottom:14px}
}
@media (max-width:800px) and (max-height:700px){ .deck{margin-bottom:28px} }
@media (max-width:800px) and (max-height:700px){
  .deck{margin-bottom:32px}
  .deck-card.pos-2{transform:translate3d(16px,13px,0) scale(.93) rotate(2deg)}
  .gate-both{bottom:8px;font-size:10.5px}
}

/* ================= WEDGE PHOTO DECKS (entry screen) ================= */
.deck, .deck-ui, .deck-card, .deck-count{display:none!important}

.wedge-deck{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.wshot{
  position:absolute;inset:0;border:0;border-radius:0;min-height:0;
  background:linear-gradient(150deg,rgba(233,220,194,.26),rgba(47,111,122,.3)),var(--sand-soft);
  opacity:0;transform:translate3d(8%,0,0) scale(1.06);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
  will-change:transform,opacity;
}
.wshot::after{background-image:radial-gradient(rgba(22,48,42,.13) 1px,transparent 1px);opacity:.45}
.wshot.on{opacity:1;transform:none;z-index:2}
.wshot.out{opacity:0;transform:translate3d(-8%,0,0) scale(1.02);z-index:1}
.wshot.out-back{opacity:0;transform:translate3d(8%,0,0) scale(1.02);z-index:1}
.gate-panel.grabbing{cursor:grabbing}
.gate-panel{cursor:pointer}

/* a sliver of the next photo, parallel to the zig zag seam */
.wedge-peek{
  position:absolute;top:-6%;bottom:-6%;width:78px;z-index:1;
  background:linear-gradient(150deg,rgba(233,220,194,.22),rgba(47,111,122,.26)),var(--sand-soft);
  opacity:.32;filter:brightness(.6);
  transform:skewX(-4.2deg);
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.gate-panel--a .wedge-peek{right:-30px;border-left:1px solid rgba(251,248,241,.16)}
.gate-panel--b .wedge-peek{left:-30px;border-right:1px solid rgba(251,248,241,.16)}
.gate-panel:hover .wedge-peek{opacity:.46}

/* photo controls, tucked under the copy */
.shot-bar{
  position:absolute;z-index:6;bottom:clamp(46px,8vh,92px);
  display:flex;align-items:center;gap:12px;
  color:var(--cream);
}
.gate-panel--a .shot-bar{left:clamp(28px,6vw,92px)}
.gate-panel--b .shot-bar{right:clamp(28px,6vw,92px)}
.shot-cap{font-size:12.5px;letter-spacing:.02em;color:rgba(251,248,241,.8);white-space:nowrap}
.shot-count{font-size:11px;letter-spacing:.14em;color:rgba(251,248,241,.5)}
.shot-count b{font-weight:500;color:var(--sand)}
.shot-bar .deck-arrow{display:grid!important;width:32px;height:32px}

.gp-inner{padding-bottom:clamp(104px,17vh,168px)}
.deck-arrow{
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  background:rgba(251,248,241,.08);border:1px solid rgba(251,248,241,.3);color:var(--cream);
  place-items:center;transition:background .22s,border-color .22s,transform .2s var(--ease);
}
.deck-arrow svg{width:15px;height:15px}
.deck-arrow:hover{background:var(--sand);border-color:var(--sand);color:var(--pine-deep)}
.deck-arrow:active{transform:scale(.92)}

@media (max-width:800px){
  .gate{--split:55%}
  .gp-num{display:none}
  .gp-addr{display:block;margin-bottom:8px;font-size:11px}
  .gp-name{font-size:clamp(24px,6.4vw,32px);line-height:1.03;margin-bottom:8px}
  .gp-rate{font-size:16px;margin-bottom:12px}
  .gate-panel--a .gp-inner{padding:74px 22px 0}
  .gate-panel--b .gp-inner{padding:0 22px 76px}
  .shot-bar{gap:9px}
  .gate-panel--a .shot-bar{bottom:auto;top:calc(55% - 2.5% - 52px);left:22px}
  .gate-panel--b .shot-bar{bottom:14px;right:auto;left:22px}
  .shot-cap{font-size:11.5px}
  .deck-arrow, .shot-bar .deck-arrow{width:28px;height:28px}
  .deck-arrow svg{width:13px;height:13px}
  .wedge-peek{width:46px}
  .gate-panel--a .wedge-peek{right:auto;left:-6%;width:auto;right:-6%;top:auto;bottom:-24px;height:70px;transform:skewY(-2.4deg);border:0;border-top:1px solid rgba(251,248,241,.16)}
  .gate-panel--b .wedge-peek{left:-6%;right:-6%;width:auto;top:-24px;bottom:auto;height:70px;transform:skewY(-2.4deg);border:0;border-bottom:1px solid rgba(251,248,241,.16)}
  .gate-both{bottom:10px}
}
@media (prefers-reduced-motion:reduce){.wshot{transition:opacity .2s linear}}

/* peek sliver sits just inside the seam, parallel to it */
.gate{user-select:none;-webkit-user-select:none}
.wedge-peek{width:92px;opacity:.5;filter:brightness(.72) saturate(.9);z-index:1}
.gate-panel--a .wedge-peek{right:9%;left:auto;border-left:1px solid rgba(251,248,241,.22);border-right:0}
.gate-panel--b .wedge-peek{left:9%;right:auto;border-right:1px solid rgba(251,248,241,.22);border-left:0}
@media (max-width:800px){
  .gate-panel--a .wedge-peek{right:-6%;left:-6%;width:auto;top:auto;bottom:12%;height:60px}
  .gate-panel--b .wedge-peek{left:-6%;right:-6%;width:auto;top:12%;bottom:auto;height:60px}
}
.wedge-peek{transform:skewX(-12.6deg)}
@media (max-width:800px){.wedge-peek{transform:skewY(3deg)}}

/* phones: photo controls tuck under the seam edge of each half */
@media (max-width:800px){
  .gate-panel--a .shot-bar{top:78px;bottom:auto;left:22px}
  .gate-panel--a .gp-inner{padding-top:126px}
  .gate-panel--b .shot-bar{top:calc(55% + 18px);bottom:auto;left:22px;right:auto}
  .gate-panel--b .gp-inner{padding-bottom:84px;justify-content:flex-end}
  .gate-both{bottom:12px}
}

/* ---- real photos ---- */
.photo-slot.is-filled{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--pine-mid);
}
.photo-slot.is-filled::before,
.photo-slot.is-filled::after{display:none}
.photo-slot.is-filled .slot-tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(8,20,18,.66);color:var(--cream);
  padding:5px 10px;border-radius:2px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.wshot.is-filled{background-size:cover;background-position:center}
.gate-panel--a .wshot.is-filled{background-position:65% center}
.gate-panel--b .wshot.is-filled{background-position:35% center}
.hero-media.is-filled{background-size:cover;background-position:center 58%}
.slide-photo.is-filled{background-size:cover;background-position:center}

/* ---- entry: one house per side, sliding in to a collision ---- */
.wedge-deck .wshot{opacity:1!important}
.wedge-peek{display:none!important}
.shot-bar{display:none!important}

@keyframes clashA{
  0%{transform:translate3d(-108%,0,0)}
  58%{transform:translate3d(2.4%,0,0)}
  72%{transform:translate3d(-1.2%,0,0)}
  86%{transform:translate3d(.5%,0,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes clashB{
  0%{transform:translate3d(108%,0,0)}
  58%{transform:translate3d(-2.4%,0,0)}
  72%{transform:translate3d(1.2%,0,0)}
  86%{transform:translate3d(-.5%,0,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes impactJolt{
  0%,54%{transform:translate3d(0,0,0)}
  59%{transform:translate3d(0,7px,0) scale(1.012)}
  64%{transform:translate3d(0,-4px,0) scale(.996)}
  70%{transform:translate3d(0,2px,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes seamFlare{
  0%,52%{opacity:0}
  58%{opacity:1;box-shadow:0 0 60px 14px rgba(233,220,194,.55)}
  100%{opacity:.45;box-shadow:none}
}
@keyframes riseIn{
  from{opacity:0;transform:translate3d(0,26px,0)}
  to{opacity:1;transform:none}
}
.gate-panel--a{animation:clashA .95s cubic-bezier(.22,.9,.24,1) both}
.gate-panel--b{animation:clashB .95s cubic-bezier(.22,.9,.24,1) both}
.gate-panels{animation:impactJolt 1.05s cubic-bezier(.3,.9,.3,1) both}
.gate-seam{animation:seamFlare 1.2s ease-out both}
.gate .gp-inner{animation:riseIn .6s var(--ease) .62s both}
.gate-top{animation:riseIn .6s var(--ease) .8s both}
.gate-both{animation:riseIn .6s var(--ease) .9s both}
.gate.choosing .gate-panel--a,
.gate.choosing .gate-panel--b,
.gate.choosing .gate-panels,
.gate.choosing .gp-inner{animation:none}

@media (prefers-reduced-motion: reduce){
  .gate-panel--a,.gate-panel--b,.gate-panels,.gate-seam,
  .gate .gp-inner,.gate-top,.gate-both{animation:none!important}
}

/* ---- entry clash on phones: top and bottom meet in the middle ---- */
@media (max-width: 760px){
  .gate-panel--a .wshot.is-filled{background-position:38% 42%}
  .gate-panel--b .wshot.is-filled{background-position:52% 72%}
  @keyframes clashTop{
    0%{transform:translate3d(0,-104%,0)}
    58%{transform:translate3d(0,2%,0)}
    74%{transform:translate3d(0,-1%,0)}
    100%{transform:translate3d(0,0,0)}
  }
  @keyframes clashBottom{
    0%{transform:translate3d(0,104%,0)}
    58%{transform:translate3d(0,-2%,0)}
    74%{transform:translate3d(0,1%,0)}
    100%{transform:translate3d(0,0,0)}
  }
  .gate-panel--a{animation-name:clashTop}
  .gate-panel--b{animation-name:clashBottom}
}
@media (max-width: 760px){
  .gate-panel--b .wshot.is-filled{background-position:26% 44%}
}
@media (max-width: 760px){
  .gate-panel--a .wedge-deck{top:0;bottom:auto;height:58%}
  .gate-panel--b .wedge-deck{top:auto;bottom:0;height:47%}
  .gate-panel--a .wshot.is-filled{background-position:42% 58%}
  .gate-panel--b .wshot.is-filled{background-position:30% 46%}
}

/* ---- after the clash, the names sweep in from opposite sides ---- */
@keyframes nameFromLeft{
  0%{opacity:0;transform:translate3d(-70px,0,0)}
  60%{opacity:1;transform:translate3d(7px,0,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes nameFromRight{
  0%{opacity:0;transform:translate3d(70px,0,0)}
  60%{opacity:1;transform:translate3d(-7px,0,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
.gate .gate-panel--a .gp-inner{animation:nameFromLeft .72s cubic-bezier(.2,.85,.25,1) .66s both}
.gate .gate-panel--b .gp-inner{animation:nameFromRight .72s cubic-bezier(.2,.85,.25,1) .66s both}
@media (prefers-reduced-motion: reduce){
  .gate .gate-panel--a .gp-inner,.gate .gate-panel--b .gp-inner{animation:none!important}
}

/* ---- one house: the name meets in the middle ---- */
.gate-panel .gp-half{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:0;margin:0;max-width:none;pointer-events:none;
}
.gate-panel .gp-half--a{justify-content:flex-end;padding-right:14px}
.gate-panel .gp-half--b{justify-content:flex-start;padding-left:14px}
.gp-word{
  font-family:"Fraunces",serif;font-weight:600;color:var(--cream);
  font-size:clamp(48px,9.5vw,132px);line-height:.92;letter-spacing:-.02em;
  margin:0;text-shadow:0 6px 40px rgba(6,18,16,.55);
}
.gate-lead{
  position:absolute;left:0;right:0;bottom:clamp(40px,9vh,96px);
  z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;color:var(--cream);padding:0 20px;
  animation:riseIn .6s var(--ease) 1.08s both;
}
.gl-addr{margin:0;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand)}
.gl-rate{margin:0;font-family:"Fraunces",serif;font-size:clamp(17px,2vw,22px)}
.gl-rate span{font-family:"Work Sans",sans-serif;font-size:13px;color:rgba(251,248,241,.72)}
.gl-cta{
  margin-top:8px;display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--cream);color:var(--pine);border:0;border-radius:2px;
  padding:14px 26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  transition:gap .3s var(--ease),background .3s var(--ease);
}
.gl-cta:hover{gap:18px;background:var(--sand)}
.gl-cta svg{width:18px;height:18px}
.gate-panel{cursor:default}
.gate-panels:has(.gate-panel--a:hover),.gate-panels:has(.gate-panel--b:hover){--split:50%}
@media (max-width:760px){
  .gate-panel .gp-half--a{align-items:flex-end;justify-content:center;padding:0 0 12px}
  .gate-panel .gp-half--b{align-items:flex-start;justify-content:center;padding:12px 0 0}
  .gp-word{font-size:clamp(44px,15vw,72px)}
  .gate-lead{bottom:28px}
}

/* ---- centered name, halves sweeping in from each side ---- */
.gp-half,.gp-word{display:none!important}
.gate-lead{bottom:auto;top:50%;transform:translateY(-50%);animation:none;gap:14px}
.gl-name{
  margin:0 0 6px;font-family:"Fraunces",serif;font-weight:600;color:var(--cream);
  font-size:clamp(52px,9vw,124px);line-height:.94;letter-spacing:-.02em;
  text-shadow:0 8px 46px rgba(6,18,16,.6);white-space:nowrap;
}
.gw{display:inline-block}
.gw-a{animation:nameFromLeft .8s cubic-bezier(.2,.85,.25,1) .66s both}
.gw-b{animation:nameFromRight .8s cubic-bezier(.2,.85,.25,1) .66s both}
.gl-addr{animation:riseIn .6s var(--ease) 1.12s both}
.gl-rate{animation:riseIn .6s var(--ease) 1.2s both}
.gl-cta{animation:riseIn .6s var(--ease) 1.3s both}
@media (max-width:760px){
  .gl-name{font-size:clamp(42px,13vw,72px)}
  .gate-lead{top:50%;bottom:auto}
}
@media (prefers-reduced-motion: reduce){
  .gw-a,.gw-b,.gl-addr,.gl-rate,.gl-cta{animation:none!important}
}
.gl-rate span{display:block;margin-top:4px}

/* ---- one picture across the split, warmer tint ---- */
.gate-panel--a .wedge-deck,.gate-panel--b .wedge-deck{top:0;bottom:0;height:100%}
.gate-panel--a .wshot.is-filled,
.gate-panel--b .wshot.is-filled{background-position:50% 50%!important;background-size:cover}
.gate-panel--a .gp-veil,
.gate-panel--b .gp-veil,
.gate-panel:hover .gp-veil,
.gate.choosing .chosen .gp-veil{
  background:linear-gradient(200deg,rgba(74,32,18,.62) 0%,rgba(44,22,16,.72) 45%,rgba(22,14,12,.88) 100%)!important;
}
.gate-seam{background:linear-gradient(to bottom,rgba(240,196,140,0),rgba(240,196,140,.75),rgba(240,196,140,0))}
.gl-cta{background:#f0c48c;color:#2a160e}
.gl-cta:hover{background:#f7d6a8}
.gl-addr{color:#e8c9a4}
@media (max-width:760px){
  .gate-panel--a .wedge-deck{top:0;bottom:auto;height:58%}
  .gate-panel--b .wedge-deck{top:auto;bottom:0;height:47%}
  .gate-panel--a .wshot.is-filled{background-position:46% 50%!important}
  .gate-panel--b .wshot.is-filled{background-position:46% 64%!important}
}

/* ---- details alternate in from opposite sides ---- */
.reveal-l{opacity:0;transform:translateX(-64px)}
.reveal-r{opacity:0;transform:translateX(64px)}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media (max-width:760px){
  .reveal-l{transform:translateX(-34px)}
  .reveal-r{transform:translateX(34px)}
}
@media (prefers-reduced-motion: reduce){
  .reveal-l,.reveal-r,.reveal-l.in,.reveal-r.in{opacity:1;transform:none;transition:none}
}

/* mobile: keep it one continuous picture, not two copies */
@media (max-width:760px){
  .gate-panel--a .wedge-deck,.gate-panel--b .wedge-deck{top:0;bottom:0;height:100%}
  .gate-panel--a .wshot.is-filled,
  .gate-panel--b .wshot.is-filled{background-position:46% 50%!important}
}
html,body{overflow-x:clip}
.site-head .btn,.site-head .nav-cta,header .btn-primary{color:var(--cream)!important}
.btn.btn-sm{color:var(--cream)!important;background:var(--pine)!important}
.btn.btn-sm:hover{background:var(--pine-mid)!important}

/* ---- one photo growing out of the middle, no split ---- */
.gate-seam{display:none!important}
.gate-panel--b{display:none!important}
.gate-panel--a{
  position:absolute!important;inset:0!important;width:100%!important;
  clip-path:none!important;-webkit-clip-path:none!important;
  transform:none!important;animation:none!important;
}
.gate-panels{
  animation:growFromMiddle 1.05s cubic-bezier(.16,1,.3,1) both!important;
  will-change:clip-path,transform;
}
@keyframes growFromMiddle{
  0%  {clip-path:inset(46% 50% 46% 50%);transform:scale(1.14)}
  60% {clip-path:inset(0% 0% 0% 0%);transform:scale(1.04)}
  100%{clip-path:inset(0% 0% 0% 0%);transform:scale(1)}
}
.gate-panel--a .wedge-deck{top:0!important;bottom:0!important;height:100%!important}
.gate-panel--a .wshot.is-filled{background-position:50% 50%!important}
.gw-a{animation:nameFromLeft .85s cubic-bezier(.2,.85,.25,1) .85s both!important}
.gw-b{animation:nameFromRight .85s cubic-bezier(.2,.85,.25,1) .85s both!important}
.gl-addr{animation:riseIn .6s var(--ease) 1.35s both!important}
.gl-rate{animation:riseIn .6s var(--ease) 1.45s both!important}
.gl-cta{animation:riseIn .6s var(--ease) 1.55s both!important}
@media (max-width:760px){
  .gate-panel--a .wshot.is-filled{background-position:46% 50%!important}
}
@media (prefers-reduced-motion: reduce){
  .gate-panels{animation:none!important;clip-path:none!important}
  .gw-a,.gw-b,.gl-addr,.gl-rate,.gl-cta{animation:none!important}
}

/* words travel all the way in from the edges */
@keyframes wordInLeft{
  0%{opacity:0;transform:translate3d(-58vw,0,0)}
  18%{opacity:1}
  68%{transform:translate3d(12px,0,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes wordInRight{
  0%{opacity:0;transform:translate3d(58vw,0,0)}
  18%{opacity:1}
  68%{transform:translate3d(-12px,0,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
.gw-a{animation:wordInLeft 1s cubic-bezier(.18,.9,.24,1) .8s both!important}
.gw-b{animation:wordInRight 1s cubic-bezier(.18,.9,.24,1) .8s both!important}
.gl-name{overflow:hidden}
.gl-addr{animation:riseIn .6s var(--ease) 1.7s both!important}
.gl-rate{animation:riseIn .6s var(--ease) 1.8s both!important}
.gl-cta{animation:riseIn .6s var(--ease) 1.9s both!important}
@media (prefers-reduced-motion: reduce){.gw-a,.gw-b{animation:none!important}}
.gl-name{overflow:visible}
.gate-lead{overflow:hidden;left:0;right:0}

/* house pictures live in the gallery only */
.prop-grid{display:block!important;max-width:820px}
.prop-copy{max-width:640px}
.access-grid .access{padding-top:4px}
.prop-grid{margin-left:auto;margin-right:auto}
.prop-copy{margin:0 auto}

/* ================= SURVEY ================= */
.sv-top{margin-bottom:22px}
.sv-count{margin:0 0 8px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.sv-count b{color:var(--pine)}
.sv-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.sv-bar span{display:block;height:100%;width:33.33%;background:var(--lake);transition:width .45s var(--ease)}
.sv-step{display:none;border:0;margin:0;padding:0;min-width:0}
.sv-step.is-on{display:block;animation:svIn .45s var(--ease) both}
@keyframes svIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sv-legend{padding:0;margin:0 0 16px;font-family:"Fraunces",serif;font-size:21px;color:var(--pine)}
.sv-nav{margin-top:22px}
.sv-nav.two{display:flex;gap:12px}
.sv-nav.two .btn{flex:1}
.btn-quiet{background:transparent!important;color:var(--pine)!important;border:1px solid var(--line)!important}
.btn-quiet:hover{background:var(--sand-soft)!important}
.survey select{
  width:100%;padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b564f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.survey select:focus{outline:2px solid var(--lake);outline-offset:1px}
.survey select[aria-invalid="true"],.survey input[aria-invalid="true"]{border-color:#b4462f}
@media (max-width:760px){
  .sv-nav.two{flex-direction:column-reverse}
  .sv-nav.two .btn{width:100%}
}

/* hero secondary button on dark backdrop */
.hero .btn-ghost,.hero .btn-outline,.hero .btn-2,.hero .btn.secondary{
  color:var(--cream)!important;border:1px solid rgba(251,248,241,.5)!important;background:transparent!important;
}
.hero .btn-ghost:hover,.hero .btn-outline:hover,.hero .btn-2:hover,.hero .btn.secondary:hover{
  background:rgba(251,248,241,.14)!important;border-color:var(--cream)!important;
}

/* opening photo framed wider */
.gate-panel--a{background-color:#241711!important}
.gate-panel--a .wshot.is-filled{
  background-position:50% 50%!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
}
@media (max-width:760px){
  .gate-panel--a .wshot.is-filled{background-size:auto 100%!important;background-position:36% 50%!important}
}

/* ===== clear opening: no film, photo fully zoomed out ===== */
.gate-panel--a .gp-veil,
.gate-panel--b .gp-veil,
.gate-panel:hover .gp-veil,
.gate.choosing .chosen .gp-veil{
  background:transparent!important;
}
.gate-panel--a{background-color:#0f1412!important}
.gate-panel--a .wshot.is-filled{
  background-size:contain!important;
  background-position:50% 50%!important;
  background-repeat:no-repeat!important;
}
@media (max-width:760px){
  .gate-panel--a .wshot.is-filled{background-size:contain!important;background-position:50% 46%!important}
}
/* keep the words readable now that the film is gone */
.gl-name,.gate-lead .gl-addr,.gate-lead .gl-rate,.gate-lead .gl-fine,.gate-kicker,.gate-brand{
  text-shadow:0 2px 18px rgba(8,14,12,.75),0 1px 3px rgba(8,14,12,.6);
}

/* soft pad behind the opening words only, photo itself stays clear */
.gate-lead{
  background:radial-gradient(60% 120% at 50% 42%,rgba(10,18,16,.62) 0%,rgba(10,18,16,.38) 45%,rgba(10,18,16,0) 78%)!important;
  padding:54px 26px 46px!important;
  border-radius:8px;
}
@media (max-width:760px){
  .gate-lead{padding:40px 18px 34px!important}
  .gate-panel--a .wshot.is-filled{background-position:50% 50%!important}
}

/* phones: fill the screen so there is no dead space */
@media (max-width:760px){
  .gate-panel--a .wshot.is-filled{background-size:cover!important;background-position:34% 50%!important}
  .gate-lead{background:radial-gradient(70% 90% at 50% 46%,rgba(10,18,16,.6) 0%,rgba(10,18,16,.34) 50%,rgba(10,18,16,0) 82%)!important}
}

/* opening brand stays legible on the bright photo */
.gate-brand,.gate-brand *{color:var(--cream)!important}
.gate-kicker{color:rgba(251,248,241,.92)!important}

/* phones: show the whole frame including the lake, words sit below the photo */
@media (max-width:760px){
  .gate-panel--a{background-color:#0f1412!important}
  .gate-panel--a .wshot.is-filled{
    background-size:contain!important;
    background-position:50% 24%!important;
  }
  .gate-lead{
    background:none!important;
    padding:0 18px!important;
    margin-top:24vh!important;
  }
}

/* ===== slow life in the opening photo ===== */
@keyframes liveDrift{
  0%   {transform:scale(1.02) translate3d(0,0,0)}
  50%  {transform:scale(1.09) translate3d(-1.2%,-0.9%,0)}
  100% {transform:scale(1.02) translate3d(0,0,0)}
}
@keyframes sunSweep{
  0%   {opacity:.10;transform:translate3d(-12%,-6%,0) rotate(-8deg)}
  50%  {opacity:.30;transform:translate3d(6%,3%,0) rotate(-8deg)}
  100% {opacity:.10;transform:translate3d(-12%,-6%,0) rotate(-8deg)}
}
@keyframes shimmer{
  0%,100%{opacity:.16;transform:translate3d(0,0,0) scaleY(1)}
  50%    {opacity:.34;transform:translate3d(1.5%,0,0) scaleY(1.06)}
}
.gate-panel--a .wshot.is-filled{
  animation:liveDrift 26s ease-in-out 1.9s infinite both;
  will-change:transform;
}
/* warm light drifting across the lawn */
.gate-panel--a .gp-veil{
  background:linear-gradient(112deg,rgba(255,226,170,0) 18%,rgba(255,224,168,.42) 42%,rgba(255,238,205,.16) 58%,rgba(255,226,170,0) 82%)!important;
  animation:sunSweep 19s ease-in-out 2.2s infinite both;
  mix-blend-mode:screen;
  pointer-events:none;
}
@media (max-width:760px){
  .gate-panel--a .wshot.is-filled{animation-duration:34s}
}
@media (prefers-reduced-motion:reduce){
  .gate-panel--a .wshot.is-filled,
  .gate-panel--a .gp-veil{animation:none!important}
}

/* ===== calmer opening: fewer lines, zoomed on phones, whole frame on desktop ===== */
.gate-lead .gl-rate span{display:none!important}
@media (max-width:760px){
  .gate-panel--a .wshot.is-filled{
    background-size:cover!important;
    background-position:58% 46%!important;
  }
  .gate-lead{
    background:radial-gradient(120% 90% at 50% 50%,rgba(15,34,32,.72) 0%,rgba(15,34,32,.42) 55%,rgba(15,34,32,0) 100%)!important;
    padding:26px 20px 30px!important;
    margin-top:0!important;
  }
  .gate-panel--a{background-color:#0f1412!important}
}

/* ===== eye popping opener ===== */
.gate-panel--a .wshot.is-filled{
  filter:saturate(1.12) contrast(1.06) brightness(1.03)!important;
}
/* the photo is vivid now, so soften the sun sweep and firm up the phone scrim */
.gate-panel--a .gp-veil{
  background:linear-gradient(112deg,rgba(255,232,186,0) 20%,rgba(255,230,182,.24) 44%,rgba(255,242,214,.10) 60%,rgba(255,232,186,0) 84%)!important;
}
@keyframes sunSweep{
  0%   {opacity:.08;transform:translate3d(-12%,-6%,0) rotate(-8deg)}
  50%  {opacity:.22;transform:translate3d(6%,3%,0) rotate(-8deg)}
  100% {opacity:.08;transform:translate3d(-12%,-6%,0) rotate(-8deg)}
}
@media (max-width:760px){
  .gate-lead{
    background:radial-gradient(120% 92% at 50% 50%,rgba(12,28,26,.82) 0%,rgba(12,28,26,.52) 55%,rgba(12,28,26,0) 100%)!important;
  }
}

/* ===== back to natural ===== */
.gate-panel--a .wshot.is-filled{filter:none!important}
.gate-panel--a .gp-veil{background:transparent!important;animation:none!important}

/* ===== opening: the far away shot from the dock ===== */
.gate-panel--a .wshot.is-filled{
  background-size:cover!important;
  background-position:50% 34%!important;
}
@media (max-width:760px){
  .gate-panel--a .wshot.is-filled{background-position:50% 38%!important}
}

/* ===== closing shot: the whole house ===== */
.closer{position:relative;isolation:isolate;overflow:hidden;min-height:78vh;display:grid;place-items:end center;padding:0 0 clamp(40px,7vw,86px)}
.closer-photo{
  position:absolute;inset:-6%;z-index:0;
  background:url(photos/house_full.webp) center 42%/cover no-repeat;
  transform:scale(1.04);
  animation:closerDrift 30s ease-in-out infinite both;
  will-change:transform;
}
.closer::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,34,32,.34) 0%,rgba(15,34,32,.10) 38%,rgba(15,34,32,.72) 78%,rgba(15,34,32,.92) 100%);
}
@keyframes closerDrift{
  0%   {transform:scale(1.04) translate3d(0,0,0)}
  50%  {transform:scale(1.11) translate3d(0,-1.1%,0)}
  100% {transform:scale(1.04) translate3d(0,0,0)}
}
.closer-inner{position:relative;z-index:2;width:min(var(--wrap),92vw);text-align:center;color:var(--cream)}
.closer-kicker{font-size:var(--text-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--sand);margin:0 0 10px}
.closer-h{font-family:var(--display,"Fraunces",serif);font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.02;margin:0 0 14px;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.45)}
.closer-sub{max-width:52ch;margin:0 auto 26px;color:rgba(255,255,255,.9);text-shadow:0 1px 16px rgba(0,0,0,.5)}
.closer-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--sand);color:var(--ink);text-decoration:none;
  padding:15px 30px;border-radius:var(--radius);
  font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.closer-cta:hover{background:var(--sand-soft);transform:translateY(-2px)}
@media (max-width:760px){
  .closer{min-height:68vh;padding-bottom:34px}
  .closer-photo{background-position:52% 46%;animation-duration:38s}
}
@media (prefers-reduced-motion:reduce){
  .closer-photo{animation:none!important}
}
/* keep the logo readable against the bright sky in the far shot */
.gate-top{position:relative;z-index:6}
.gate-top::before{
  content:"";position:absolute;left:-6vw;right:-6vw;top:-7vh;height:22vh;z-index:-1;
  background:linear-gradient(180deg,rgba(10,26,24,.62) 0%,rgba(10,26,24,.22) 60%,rgba(10,26,24,0) 100%);
  pointer-events:none;
}

/* ===== the walk up the lawn: one continuous push toward the house ===== */
.gate-panel--a .wshot.is-filled{
  background-position:50% 34%!important;
  background-size:cover!important;
  transform-origin:50% 36%!important;
  animation:walkUp 15s cubic-bezier(.33,.02,.22,1) 1.5s both!important;
}
@keyframes walkUp{
  0%   {transform:scale(1)}
  100% {transform:scale(1.42)}
}
@media (max-width:760px){
  .gate-panel--a .wshot.is-filled{
    background-position:50% 38%!important;
    transform-origin:50% 40%!important;
  }
  @keyframes walkUp{
    0%   {transform:scale(1)}
    100% {transform:scale(1.3)}
  }
}
@media (prefers-reduced-motion:reduce){
  .gate-panel--a .wshot.is-filled{animation:none!important}
}

/* ===== two options on the start up page ===== */
.gate-seam{display:block!important}
.gate-panel--b{display:block!important}
.gate-lead{display:none!important}
.gate-top::before{display:none}

.gate-panel--a .wshot.is-filled,
.gate-panel--b .wshot.is-filled{
  background-size:cover!important;
  transform-origin:50% 42%!important;
  animation:optDrift 30s ease-in-out 1.2s infinite both!important;
}
.gate-panel--a .wshot.is-filled{background-position:50% 36%!important}
.gate-panel--b .wshot.is-filled{background-position:50% 44%!important}
@keyframes optDrift{
  0%,100%{transform:scale(1.02)}
  50%    {transform:scale(1.12)}
}
.gate-panel--a .gp-veil,
.gate-panel--b .gp-veil{
  background:linear-gradient(to top,rgba(10,22,20,.92) 0%,rgba(10,22,20,.5) 42%,rgba(10,22,20,.14) 72%,rgba(10,22,20,.3) 100%)!important;
  animation:none!important;
}

.gate-panel .gp-inner{
  position:absolute;inset:auto 0 0 0;z-index:5;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:0 clamp(26px,4vw,64px) clamp(38px,6vh,74px);
  color:var(--cream);pointer-events:none;
}
.gate-panel--a .gp-inner{padding-right:8vw}
.gate-panel--b .gp-inner{align-items:flex-start;padding-left:7vw}
.opt-kicker{margin:0 0 8px;font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.opt-name{
  font-family:"Fraunces",serif;font-weight:600;
  font-size:clamp(30px,4.4vw,58px);line-height:1;margin:0 0 12px;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.5);
}
.opt-line{margin:0;font-size:var(--text-sm);color:rgba(255,255,255,.88);text-shadow:0 1px 14px rgba(0,0,0,.55)}
.opt-rate{margin-top:4px;color:#f0c48c}
.opt-go{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:#f0c48c;padding:13px 24px;border-radius:var(--radius);
  transition:gap .3s var(--ease),background .3s var(--ease);
}
.opt-go svg{width:17px;height:17px}
.gate-panel:hover .opt-go{gap:16px;background:#f7d6a8}

@media (max-width:760px){
  .gate-panel .gp-inner{padding:0 22px 28px}
  .gate-panel--a .gp-inner{inset:auto 0 52% 0;justify-content:flex-end}
  .gate-panel--b .gp-inner{inset:auto 0 0 0;padding-left:22px}
  .opt-name{font-size:clamp(26px,8vw,40px)}
  .gate-panel--a .wshot.is-filled{background-position:50% 40%!important}
  .gate-panel--b .wshot.is-filled{background-position:50% 46%!important}
}
@media (prefers-reduced-motion:reduce){
  .gate-panel--a .wshot.is-filled,
  .gate-panel--b .wshot.is-filled{animation:none!important}
}
/* readability over the two bright photos */
.gate-top::before{display:block}
.gate-panel--a .gp-veil,
.gate-panel--b .gp-veil{
  background:linear-gradient(to top,rgba(8,18,16,.95) 0%,rgba(8,18,16,.82) 26%,rgba(8,18,16,.42) 52%,rgba(8,18,16,.12) 76%,rgba(8,18,16,.34) 100%)!important;
}
@media (max-width:760px){
  .gate-panel--b .wshot.is-filled{background-position:50% 30%!important}
  .gate-panel--a .wshot.is-filled{background-position:50% 34%!important}
  .gate-panel--a .gp-veil{
    background:linear-gradient(to bottom,rgba(8,18,16,.42) 0%,rgba(8,18,16,.86) 46%,rgba(8,18,16,.95) 100%)!important;
  }
}
/* the veil sits under the photo, so put the shade behind the words instead */
.gate-panel .gp-inner{
  background:linear-gradient(to top,rgba(8,18,16,.94) 0%,rgba(8,18,16,.86) 42%,rgba(8,18,16,.55) 74%,rgba(8,18,16,0) 100%);
  padding-top:clamp(70px,14vh,150px);
}
@media (max-width:760px){
  /* each half gets its own crop so both buildings are actually in frame */
  .gate-panel--a .wedge-deck{top:0;bottom:auto;height:54%!important}
  .gate-panel--b .wedge-deck{top:auto;bottom:0;height:52%!important}
  .gate-panel--a .wshot.is-filled{background-position:50% 30%!important}
  .gate-panel--b .wshot.is-filled{background-position:50% 36%!important}
  .gate-panel--a .gp-inner{inset:auto 0 48% 0;padding-bottom:20px;padding-top:80px}
  .gate-panel--b .gp-inner{inset:auto 0 0 0;padding-top:80px}
}
/* keep the shade small and under each label only */
.gate-panel .gp-inner{
  background:linear-gradient(to top,rgba(8,18,16,.92) 0%,rgba(8,18,16,.74) 40%,rgba(8,18,16,.34) 72%,rgba(8,18,16,0) 100%);
  padding-top:clamp(44px,8vh,90px);
}
.gate-panel--a .gp-inner{left:0;right:50%}
.gate-panel--b .gp-inner{left:46%;right:0}
@media (max-width:760px){
  .gate-panel--a .gp-inner,
  .gate-panel--b .gp-inner{left:0;right:0;padding-top:52px}
  .gate-panel--a .gp-inner{inset:auto 0 50% 0}
}
/* one identical shade per half, full width, so no seams or double darkening */
.gate-panel--a .gp-inner,
.gate-panel--b .gp-inner{
  left:0;right:0;
  background:linear-gradient(to top,rgba(8,18,16,.9) 0%,rgba(8,18,16,.6) 34%,rgba(8,18,16,.18) 64%,rgba(8,18,16,0) 88%);
  padding-top:clamp(40px,7vh,84px);
}
.gate-panel--a .gp-inner{align-items:flex-start;padding-left:clamp(26px,4vw,64px)}
.gate-panel--b .gp-inner{align-items:flex-end;text-align:right;padding-right:clamp(26px,4vw,64px)}
@media (max-width:760px){
  .gate-panel--b .gp-inner{align-items:flex-start;text-align:left;padding-left:22px}
  .gate-panel--a .gp-inner{inset:auto 0 50% 0;padding-top:44px}
}
@media (max-width:760px){
  .gate-panel--a .gp-inner,
  .gate-panel--b .gp-inner{
    background:linear-gradient(to top,rgba(8,18,16,.88) 0%,rgba(8,18,16,.5) 38%,rgba(8,18,16,.1) 70%,rgba(8,18,16,0) 92%);
  }
  .gate-panel--b .wshot.is-filled{background-position:50% 40%!important}
}
@media (max-width:760px){
  .gate-panel--a .gp-inner,
  .gate-panel--b .gp-inner{
    background:linear-gradient(to top,rgba(8,18,16,.86) 0%,rgba(8,18,16,.4) 34%,rgba(8,18,16,0) 66%);
    padding-top:36px;
  }
  .gate-panel--b .wshot.is-filled{background-position:50% 34%!important}
  .gate-panel--b .wedge-deck{height:56%!important}
}
body[data-view="barndominium"] .hero-facts,body[data-view="barndominium"] #lake,body[data-view="barndominium"] .closer{display:none}

.slide-photo,.slide-photo.is-filled{border-radius:18px!important;overflow:hidden}
@media (max-width:640px){.slide-photo,.slide-photo.is-filled{border-radius:14px!important}}

.gate-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;color:var(--cream);font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.01em;white-space:nowrap;text-shadow:0 2px 14px rgba(0,0,0,.45);pointer-events:none}
@media (max-width:640px){.gate-top{flex-direction:column;align-items:center;gap:10px}.gate-tag{position:static;transform:none;font-size:22px}}
.season-note{display:block;font-size:13px;color:var(--ink-soft)}

.nearby{padding:clamp(56px,8vw,96px) 0;background:var(--cream)}
.nearby h2{font-size:clamp(28px,4vw,40px);margin:6px 0 10px}
.nearby .sub{color:var(--ink-soft);max-width:640px;margin-bottom:28px}
.nb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.nb-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.nb-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.nb-item h3{font-size:18px;color:var(--pine)}
.nb-mi{font-size:13px;font-weight:600;color:var(--lake);white-space:nowrap}
.nb-item p{margin:0;font-size:15px;color:var(--ink-soft);flex:1}
.nb-go{align-self:flex-start;font-size:14px;font-weight:600;color:var(--pine);text-decoration:none;border:1px solid var(--pine);border-radius:999px;padding:6px 14px}
.nb-go:hover{background:var(--pine);color:var(--cream)}
.prop-copy .btn-ghost{margin-left:8px}
@media (max-width:480px){.prop-copy .btn-ghost{margin:10px 0 0}}
.rate-num.rate-soon{font-size:clamp(22px,3vw,28px)}
@media (min-width:801px){
  .gate-panel--a .wedge-deck{right:36%}
  .gate-panel--a .wshot.is-filled{background-position:45% 38%}
}
.site-header .header-inner{max-width:none;padding-left:clamp(16px,2vw,28px);padding-right:clamp(16px,2vw,28px)}
/* tall photos: frame shrinks to the photo, no bars */
.slide.tall{flex:0 0 calc(clamp(280px,44vh,520px) * .75)}
.slide.tall .slide-photo{height:clamp(280px,44vh,520px);background-size:cover!important;background-position:center!important}
@media (max-width:800px){
  .slide.tall{flex:0 0 calc(clamp(240px,38vh,340px) * .75)}
  .slide.tall .slide-photo{height:clamp(240px,38vh,340px)}
}
.nb-toggle{margin-bottom:24px}
.nb-list[hidden]{display:none}
.nb-list.nb-open{animation:nbDrop .35s ease both}
@keyframes nbDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nb-list.nb-open{animation:none}}
.sec-rule{border:0;height:4px;width:min(360px,60%);margin:0 auto;background:#2e7d57;border-radius:4px}
/* photo viewer */
.slide-photo{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,20,18,.94);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:84vh;border-radius:14px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lb-cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#f3efe6;font-size:15px}
.lb-cap b{font-family:"Fraunces",serif;font-weight:500;font-size:18px;margin-right:8px}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-btn:hover{background:rgba(255,255,255,.25)}
.lb-prev{left:clamp(8px,2vw,28px)} .lb-next{right:clamp(8px,2vw,28px)}
.lb-close{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lb-count{position:absolute;top:26px;left:20px;color:#d9d3c6;font-size:14px}
@media (max-width:640px){.lb img{max-width:100vw;border-radius:0}.lb-btn{top:auto;bottom:56px;transform:none;width:48px;height:48px}.lb-cap{bottom:18px}}
@media (max-width:640px){.lb-btn{bottom:92px}.lb-cap{padding:0 16px}}