/* ===========================================================
   Suday Properties — v2, "premium light"
   White as the ground. Dark used twice a page, as punctuation.
   Typography leads, photography carries, motion has weight.
   =========================================================== */

/* -----------------------------------------------------------
   FONTS — self-hosted.

   These are the same variable woff2 files Google Fonts was
   already serving; the only thing that changes is who serves
   them. No third-party DNS lookup, no second TLS handshake,
   and nobody else's CDN can slow the page down.

   Variable, so one file covers every weight the design uses.
   The unicode-range split is Google's own: a visitor reading
   English or Spanish downloads only the latin file — latin-ext
   arrives only if a character actually needs it.

   swap, not block: the fallback serif/sans paints immediately
   and is replaced when the real face lands. Nobody stares at
   invisible text.
   ----------------------------------------------------------- */

/* Archivo — the UI sans */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Newsreader — the display serif */
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-latin.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-latin-ext.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Newsreader italic — the signature subhead under every hero */
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight:200 800; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  font-weight:200 800; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --white:#ffffff;
  --bone:#f5f4f2;          /* whisper alternate */
  --sand:#e9e7e4;          /* image placeholder / third tone */
  --ink:#17212b;           /* dark slate, never pure black */
  --ink-2:#4d5762;
  --ink-3:#828c96;
  --hair:#e3e5e8;          /* 1px rules */
  --hair-2:#c9ced4;
  --dark:#101820;          /* the dark panels */
  --dark-2:#17212b;
  --red:#b70021;           /* the accent. used with confidence. */
  --red-dk:#8f0019;

  --display:"Newsreader","Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  --wrap:1440px;
  --gut:clamp(24px,6vw,90px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:16px;font-weight:300;line-height:1.65;
  letter-spacing:.005em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:300;line-height:1.02;letter-spacing:-.015em}
p{margin:0 0 1.15em}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
::selection{background:var(--ink);color:var(--white)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:940px;margin:0 auto;padding:0 var(--gut)}
.bleed{width:100%}

/* ---------------- type scale ---------------- */
.d1{font-size:clamp(52px,8.4vw,136px);line-height:.96}
.d2{font-size:clamp(38px,5.4vw,84px)}
.d3{font-size:clamp(30px,3.6vw,52px)}
.d4{font-size:clamp(22px,2.2vw,32px)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.62;color:var(--ink-2);max-width:56ch;font-weight:300}
.small{font-size:14px;line-height:1.6;color:var(--ink-3)}

.label{
  font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 26px;display:block;
}
.label-r{color:var(--red)}
.tnum{font-variant-numeric:tabular-nums}
.it{font-style:italic}

/* ---------------- links & buttons ---------------- */
/* text link with a chevron — the workhorse secondary action */
.lnk{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--red);
  transition:gap .45s var(--ease),color .45s var(--ease);
}
.lnk::after{content:"›";font-size:17px;line-height:1;transform:translateY(-1px)}
.lnk:hover{gap:14px;color:var(--red-dk)}
.lnk-ink{color:var(--ink)}
.lnk-ink:hover{color:var(--red)}
.lnk-l{color:#fff}
.lnk-l:hover{color:#fff;opacity:.75}

/* solid crimson, square corners, arrow set into the right padding */
.btn{
  display:inline-flex;align-items:center;
  padding:18px 50px 18px 24px;background:var(--red);color:#fff;border:1px solid var(--red);
  font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:.01em;
  cursor:pointer;position:relative;transition:background .45s var(--ease),border-color .45s var(--ease);
}
.btn::after{
  content:"→";position:absolute;right:22px;font-size:15px;line-height:1;
  transition:transform .45s var(--ease);
}
.btn:hover{background:var(--red-dk);border-color:var(--red-dk)}
.btn:hover::after{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair-2)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-l{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-l:hover{background:#fff;border-color:#fff;color:var(--ink)}
.cta-row{display:flex;gap:26px;flex-wrap:wrap;align-items:center}

/* ---------------- header ---------------- */
/* utility row above the nav */
.util{border-bottom:1px solid var(--hair);background:var(--white)}
.util .wrap{display:flex;justify-content:flex-end;align-items:center;gap:28px;height:40px}
.util a{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;transition:color .4s var(--ease)}
.util a::after{content:"›";font-size:14px;line-height:1;transform:translateY(-1px);color:var(--red)}
.util a:hover{color:var(--red)}
@media(max-width:760px){.util{display:none}}

header.nav{
  position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--hair);
}
/* the crimson rule that anchors the whole identity */
header.nav::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}
header.nav .wrap{display:flex;align-items:center;gap:34px;height:88px}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand img{height:40px;width:auto}
.brand span{display:block}
.brand .bt{font-family:var(--display);font-size:21px;letter-spacing:.01em;line-height:1}
.brand .bs{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
nav.main{display:flex;gap:30px;margin-left:auto;align-items:center}
nav.main a{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  position:relative;padding:6px 0;transition:color .4s var(--ease);
}
nav.main a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after,nav.main a.on::after{transform:scaleX(1)}
nav.main a.on{color:var(--ink)}

/* The "Others" group. Villa Bonita, the ranch and KDLK each run their own site,
   so they sit behind one trigger instead of eating three slots in the bar.
   The trigger is a real button, so it is reachable by keyboard; :focus-within
   opens the panel for anyone tabbing through, not just for a mouse. */
.grp{position:relative;display:flex;align-items:center}
.grptop{
  background:none;border:0;padding:6px 0;cursor:pointer;font-family:var(--sans);
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);position:relative;transition:color .4s var(--ease);
}
.grptop::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.grp:hover .grptop,.grp:focus-within .grptop,.grp.open .grptop{color:var(--ink)}
.grp:hover .grptop::after,.grp:focus-within .grptop::after,.grp.open .grptop::after{transform:scaleX(1)}
.grpsub{
  position:absolute;top:100%;left:-22px;margin-top:14px;min-width:210px;
  background:var(--white);border:1px solid var(--hair);padding:6px 22px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  z-index:60;
}
.grp:hover .grpsub,.grp:focus-within .grpsub,.grp.open .grpsub{opacity:1;visibility:visible;transform:none}
.grpsub a{padding:13px 0}
.grpsub a+a{border-top:1px solid var(--hair)}

.navcta{flex:none;display:flex;align-items:center;gap:20px}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;padding:0;
  align-items:center;justify-content:center}
.burger i{display:block;width:22px;height:1px;background:var(--ink);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1px;background:var(--ink);
  transition:transform .4s var(--ease)}
.burger i::before{top:-7px}.burger i::after{top:7px}

@media(max-width:1100px){
  nav.main{display:none;position:fixed;inset:88px 0 auto;background:var(--white);flex-direction:column;
    align-items:stretch;gap:0;padding:8px var(--gut) 34px;border-bottom:1px solid var(--hair);max-height:calc(100vh - 88px);overflow:auto}
  nav.main.open{display:flex}
  nav.main a{padding:19px 0;border-bottom:1px solid var(--hair);font-size:13px;letter-spacing:.14em}
  nav.main a::after{display:none}
  .burger{display:flex}
  /* No hover on a touch screen, so the group just unfolds into the list. */
  .grp{display:block}
  .grptop{display:none}
  .grpsub{position:static;opacity:1;visibility:visible;transform:none;margin:0;
    min-width:0;border:0;padding:0;display:block}
  .grpsub a+a{border-top:0}
}
@media(max-width:600px){
  header.nav .wrap{height:72px}
  nav.main{inset:72px 0 auto;max-height:calc(100vh - 72px)}
  .brand img{height:34px}
  .brand .bt{font-size:18px}
}

/* ---------------- hero: full-bleed photograph, type over it ---------------- */
.hero{position:relative;overflow:hidden;min-height:clamp(460px,68vh,760px);display:flex;align-items:center}
.hero>img{position:absolute;inset:0;width:100%;height:114%;object-fit:cover;top:-7%;z-index:0;will-change:transform}
/* Two layers, so the type stays legible over a bright sky as readily as over a
   dark warehouse: a directional wash for depth, and a floor under the text. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(16,24,32,.42) 0%,rgba(16,24,32,.30) 55%,rgba(16,24,32,.52) 100%),
    linear-gradient(100deg,rgba(16,24,32,.90) 0%,rgba(16,24,32,.72) 48%,rgba(16,24,32,.44) 100%);
}
/* Video sits over the poster image and fades in only once it is actually
   playing, so a slow connection, a blocked autoplay or a failed file all leave
   the photograph in place rather than a black rectangle. */
.hero-v video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease);z-index:0;
}
.hero-v video.on{opacity:1}

.hero-in{position:relative;z-index:2;width:100%;padding:clamp(64px,9vw,120px) 0}
.hero h1{color:#fff;max-width:17ch}
.hero .label{color:rgba(255,255,255,.7)}
.hero .cta-row{margin-top:clamp(32px,4vw,48px)}
/* the italic serif subhead — the signature under every hero headline */
.sub{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(19px,1.9vw,27px);line-height:1.42;color:rgba(255,255,255,.88);
  max-width:44ch;margin:clamp(20px,2.4vw,30px) 0 0}
.sub-ink{color:var(--ink-2)}

/* white type-led header for interior/utility pages */
.hero-w{padding:clamp(64px,9vw,140px) 0 clamp(40px,5vw,66px)}
.hero-w h1{max-width:16ch}
.hero-w .lede{margin-top:clamp(24px,2.6vw,38px)}
.hero-w .cta-row{margin-top:clamp(32px,4vw,50px)}
.hero-fig{position:relative;overflow:hidden;height:clamp(300px,48vw,620px)}
.hero-fig img{width:100%;height:118%;object-fit:cover;position:absolute;top:-9%;left:0;will-change:transform}

/* index strip under the hero */
.index{border-top:1px solid var(--hair);display:grid;grid-template-columns:repeat(4,1fr)}
/* The band sizes itself to however many figures it is given. */
.index.two{grid-template-columns:repeat(2,1fr)}
.index.three{grid-template-columns:repeat(3,1fr)}
.index div{padding:clamp(28px,3.4vw,48px) 0;border-right:1px solid var(--hair);padding-right:24px}
.index div:last-child{border-right:0}
.index b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(38px,4.6vw,68px);line-height:1}
.index span{display:block;margin-top:12px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:820px){
  .index{grid-template-columns:1fr 1fr}
  .index div:nth-child(2n){border-right:0}
  .index div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  /* two sit fine side by side; three would strand one, so stack those */
  .index.three{grid-template-columns:1fr}
  .index.three div{border-right:0;border-bottom:1px solid var(--hair)}
  .index.three div:last-child{border-bottom:0}
}

/* ---------------- sections ---------------- */
section{padding:clamp(78px,11vw,190px) 0}
section.tight{padding:clamp(56px,7vw,110px) 0}
.bone{background:var(--bone)}
.rule{height:1px;background:var(--hair);border:0;margin:0}

.head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:clamp(46px,6vw,86px)}
.head .lede{margin:0;max-width:40ch}
@media(max-width:860px){.head{grid-template-columns:1fr;gap:22px;align-items:start}}

/* ---------------- dark sections (used sparingly) ---------------- */
/* dark panel backed by a photograph — the way Hines gets contrast without
   ever leaving a white site. Flat .dark is the fallback. */
.dark-photo{position:relative;overflow:hidden}
.dark-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dark-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(16,24,32,.95) 0%,rgba(16,24,32,.9) 55%,rgba(16,24,32,.84) 100%)}
.dark-photo>.wrap{position:relative;z-index:2}

.dark,.dark-photo{background:var(--dark);color:rgba(255,255,255,.76)}
.dark-photo h1,.dark-photo h2,.dark-photo h3,.dark-photo h4{color:#fff}
.dark-photo .lede{color:rgba(255,255,255,.72)}
.dark-photo .label{color:rgba(255,255,255,.5)}
.dark-photo .facts{border-color:rgba(255,255,255,.18)}
.dark-photo .facts li{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.78)}
.dark-photo .info{border-color:rgba(255,255,255,.18)}
.dark-photo .info p{color:rgba(255,255,255,.7)}
.dark-photo .index,.dark-photo .index div{border-color:rgba(255,255,255,.18)}
.dark-photo .index b{color:#fff}
.dark-photo .index span{color:rgba(255,255,255,.5)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .lede{color:rgba(255,255,255,.66)}
.dark .label{color:rgba(255,255,255,.45)}
.dark .rule{background:rgba(255,255,255,.14)}
.dark .index{border-color:rgba(255,255,255,.14)}
.dark .index div{border-color:rgba(255,255,255,.14)}
.dark .index b{color:#fff}
.dark .index span{color:rgba(255,255,255,.45)}

/* ---------------- category rows ---------------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,44px)}
@media(max-width:900px){.cats{grid-template-columns:1fr;gap:44px}}
.cat{display:block}
.cat figure{margin:0;overflow:hidden;position:relative;background:var(--sand)}
/* landscape — these are wide buildings, a portrait crop throws away the building
   and keeps the parking lot */
.cat img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.3s var(--ease)}
.cat:hover img{transform:scale(1.045)}
.cat-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:22px;padding-bottom:16px;border-bottom:1px solid var(--hair);transition:border-color .6s var(--ease)}
.cat:hover .cat-meta{border-color:var(--ink)}
.cat h3{font-size:clamp(24px,2.3vw,34px)}
.cat .n{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.cat p{margin:16px 0 0;font-size:15px;color:var(--ink-2);max-width:36ch}

/* ---------------- listing grid ---------------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px) clamp(20px,2.4vw,40px)}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr;gap:46px}}

.card{display:flex;flex-direction:column}
.card figure{margin:0;position:relative;overflow:hidden;background:var(--sand)}
.card figure img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.3s var(--ease)}
.card:hover figure img{transform:scale(1.05)}
.card .noimg{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:30px;font-family:var(--display);font-size:22px;color:var(--ink-3);background:var(--bone)}
.stat{position:absolute;top:0;left:0;z-index:2;background:var(--white);
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:10px 15px}
.stat.off{background:var(--ink);color:#fff}
.stat.wait{background:var(--bone)}
.stat em{font-style:normal;color:var(--red)}

.card-b{padding-top:20px;display:flex;flex-direction:column;flex:1}
.card-t{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.card-b h3{font-size:clamp(21px,1.7vw,26px)}
.card-b .pr{font-family:var(--display);font-size:clamp(20px,1.6vw,25px);white-space:nowrap}
.card-b .ad{font-size:13.5px;color:var(--ink-3);margin:8px 0 0}
.card-b .sp{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--hair);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  transition:border-color .6s var(--ease)}
.card:hover .card-b .sp{border-color:var(--ink)}
.empty{grid-column:1/-1;padding:90px 24px;text-align:center;border-top:1px solid var(--hair)}

/* ---------------- filters ---------------- */
.filters{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  position:sticky;top:88px;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}
@media(max-width:1100px){.filters{top:88px}}
@media(max-width:600px){.filters{top:72px}}
.filters .wrap{display:flex;gap:34px;align-items:center;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.fg{display:flex;gap:22px;flex-wrap:wrap}
.fg button{
  background:none;border:0;padding:5px 0;cursor:pointer;font-family:var(--sans);
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  position:relative;transition:color .4s var(--ease);
}
.fg button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.fg button:hover{color:var(--ink)}
.fg button[aria-pressed=true]{color:var(--ink)}
.fg button[aria-pressed=true]::after{transform:scaleX(1)}
.fcount{margin-left:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.fcount b{color:var(--ink);font-weight:500}

/* ---------------- editorial split ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,6vw,110px);align-items:center}
.split.flip>*:first-child{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:44px}.split.flip>*:first-child{order:0}}
.split figure{margin:0;overflow:hidden;background:var(--sand)}
.split figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split.wide figure img{aspect-ratio:4/3}
/* The build-to-suit pair: two marked-up aerials of the same parcel. They are
   3:2 and carry labels near the edges, so they keep their own ratio rather
   than being cropped into the 4:3 the other figures use. */
.split.plans figure img{aspect-ratio:3/2}
.split h2+.lede{margin-top:26px}
.facts{list-style:none;padding:0;margin:38px 0 0;border-top:1px solid var(--hair)}
.facts li{padding:16px 0;border-bottom:1px solid var(--hair);font-size:15px;color:var(--ink-2);
  display:flex;gap:18px;align-items:baseline}
.facts li::before{content:"";width:14px;height:1px;background:var(--red);flex:none;transform:translateY(-4px)}
.dark .facts{border-color:rgba(255,255,255,.14)}
.dark .facts li{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}

/* ---------------- trio band ---------------- */
/* Six-column base so five cards fill two complete rows — three, then two wider —
   rather than leaving an orphaned gap on the second row. */
.trio{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(20px,2.6vw,44px)}
.trio>a{grid-column:span 2}
.trio>a:nth-child(4),.trio>a:nth-child(5){grid-column:span 3}
@media(max-width:900px){
  .trio{grid-template-columns:1fr;gap:44px}
  .trio>a,.trio>a:nth-child(4),.trio>a:nth-child(5){grid-column:auto}
}
.trio a figure{margin:0;overflow:hidden;background:var(--sand)}
.trio img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform 1.3s var(--ease)}
.trio>a:nth-child(4) img,.trio>a:nth-child(5) img{aspect-ratio:3/2}
@media(max-width:900px){.trio img{aspect-ratio:3/2!important}}
/* waiting on photography */
.trio .noimg{display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:1/1;padding:12%;background:var(--bone);color:var(--ink-3);
  font-family:var(--display);font-size:clamp(20px,1.8vw,26px);line-height:1.2}
.trio>a:nth-child(4) .noimg,.trio>a:nth-child(5) .noimg{aspect-ratio:3/2}
@media(max-width:900px){.trio .noimg{aspect-ratio:3/2!important}}
.trio a:hover img{transform:scale(1.05)}
.trio h3{font-size:clamp(24px,2.2vw,32px);margin-top:24px}
.trio p{margin:12px 0 0;font-size:15px;color:var(--ink-2);max-width:34ch}
.dark .trio p{color:rgba(255,255,255,.6)}

/* ---------------- single property ---------------- */
.p-gal{display:grid;grid-template-columns:2fr 1fr;gap:6px}
.p-gal .stack{display:grid;gap:6px}
.p-gal figure{margin:0;overflow:hidden;background:var(--sand)}
.p-gal a{display:block;overflow:hidden;background:var(--sand)}
.p-gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.p-gal a:hover img{transform:scale(1.04)}
.p-gal>a img{aspect-ratio:4/3}
.p-gal .stack img{aspect-ratio:4/3}
@media(max-width:820px){.p-gal{grid-template-columns:1fr}.p-gal .stack{grid-template-columns:1fr 1fr}}

.p-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(40px,6vw,110px);align-items:start}
@media(max-width:960px){.p-cols{grid-template-columns:1fr;gap:52px}}
.p-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:clamp(34px,4vw,52px) 0}
.p-facts div{padding:24px 20px 24px 0}
.p-facts b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(26px,2.4vw,36px);line-height:1}
.p-facts span{display:block;margin-top:10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

.dl{border-top:1px solid var(--hair);margin:0}
.dl div{display:flex;gap:24px;padding:15px 0;border-bottom:1px solid var(--hair);font-size:15px}
.dl dt{width:170px;flex:none;color:var(--ink-3);margin:0}
.dl dd{margin:0;color:var(--ink)}
.taglist{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--hair-2);padding:8px 14px}

.ask{position:sticky;top:120px;border-top:2px solid var(--ink);padding-top:28px}
.ask h3{font-size:clamp(24px,2vw,30px)}
.ask p{font-size:15px;color:var(--ink-2);margin-top:14px}
.ask .tel{display:block;font-family:var(--display);font-size:clamp(30px,2.6vw,40px);margin:20px 0 26px}
.ask .tel:hover{color:var(--red)}
.ask .btn{width:100%;margin-bottom:12px}
@media(max-width:960px){.ask{position:static}}

.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal img{aspect-ratio:4/3;object-fit:cover;width:100%;cursor:zoom-in;transition:opacity .5s var(--ease)}
.gal img:hover{opacity:.82}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.97);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain}
.lb button{position:absolute;background:none;border:1px solid rgba(255,255,255,.28);color:#fff;
  width:54px;height:54px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .4s var(--ease)}
.lb button:hover{background:rgba(255,255,255,.12)}
.lb .lb-x{top:26px;right:26px}
.lb .lb-p{left:26px;top:50%;transform:translateY(-50%)}
.lb .lb-n{right:26px;top:50%;transform:translateY(-50%)}
@media(max-width:640px){.lb .lb-p{left:10px}.lb .lb-n{right:10px}}

/* ---------------- forms ---------------- */
.form{display:grid;gap:30px;max-width:820px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media(max-width:640px){.form .row{grid-template-columns:1fr}.form{gap:24px}}
label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
input,select,textarea{
  width:100%;font-family:var(--sans);font-size:16px;font-weight:300;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--hair-2);padding:10px 0;transition:border-color .5s var(--ease);
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink)}
textarea{min-height:120px;resize:vertical}
select{cursor:pointer}
.hp{position:absolute;left:-9999px}
.consent{display:flex;gap:14px;align-items:flex-start;font-size:13px;color:var(--ink-3);line-height:1.55}
.consent input{width:16px;height:16px;flex:none;margin-top:3px;border:1px solid var(--hair-2)}
.consent label{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink-3);margin:0}
.consent a{border-bottom:1px solid var(--hair-2)}
.consent a:hover{border-color:var(--red);color:var(--red)}
.formnote{font-size:13px;color:var(--ink-3);margin:0}
/* Shown above a form when a submission bounced. A failed send must never be
   silent — the visitor has to know their message did not go. */
.formerr{margin:0 0 26px;padding:15px 20px;background:#fdf2f4;border-left:2px solid var(--red);
  color:var(--red-dk);font-size:14px;line-height:1.5}

/* ---------------- info columns ---------------- */
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,70px);
  border-top:1px solid var(--hair);padding-top:clamp(34px,4vw,56px)}
@media(max-width:820px){.info{grid-template-columns:1fr;gap:38px}}
.info h4{font-size:clamp(20px,1.8vw,26px);margin-bottom:14px}
.info p{font-size:15px;color:var(--ink-2);margin:0 0 8px}
.info a:hover{color:var(--red)}
.dark .info{border-color:rgba(255,255,255,.14)}
.dark .info p{color:rgba(255,255,255,.62)}

/* ---------------- footer ---------------- */
footer{background:var(--dark);color:rgba(255,255,255,.6);padding:clamp(70px,9vw,130px) 0 40px;font-size:14px}
footer h4{color:#fff;font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;margin-bottom:24px}
footer a{color:rgba(255,255,255,.6);transition:color .4s var(--ease)}
footer a:hover{color:#fff}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:13px}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(30px,4vw,64px)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr;gap:44px}}
.flogo{height:52px;width:auto;filter:brightness(0) invert(1);margin-bottom:26px;opacity:.92}
.fbot{margin-top:clamp(50px,6vw,90px);padding-top:28px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.36)}
.fbot a{color:rgba(255,255,255,.36);transition:color .4s var(--ease)}
.fbot a:hover{color:rgba(255,255,255,.7)}

/* ---------------- prose / legal ---------------- */
.prose{max-width:70ch;font-size:16.5px;color:var(--ink-2)}
.prose h2{font-size:clamp(24px,2.4vw,34px);margin:56px 0 18px;color:var(--ink)}
.prose h3{font-size:21px;margin:36px 0 12px;color:var(--ink)}
.prose ul{padding-left:20px}
.prose li{margin-bottom:11px}
.prose strong{color:var(--ink);font-weight:500}
.prose a{border-bottom:1px solid var(--hair-2);color:var(--ink)}
.prose a:hover{border-color:var(--red);color:var(--red)}
.callout{border-left:1px solid var(--red);padding:6px 0 6px 28px;margin:34px 0;color:var(--ink)}
.callout p:last-child{margin:0}

.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair);padding:26px 0}
.faq summary{cursor:pointer;font-family:var(--display);font-size:clamp(21px,1.8vw,27px);list-style:none;
  display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:17px;font-weight:300;color:var(--ink-3);flex:none}
.faq details[open] summary::after{content:"—";color:var(--red)}
.faq details p{margin:18px 0 0;color:var(--ink-2);max-width:68ch;font-size:15.5px}

.crumbs{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:28px 0}
.crumbs a:hover{color:var(--ink)}
/* over a photograph */
.crumbs-l{color:rgba(255,255,255,.66)}
.crumbs-l a:hover{color:#fff}

.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:14px 20px;z-index:999}
.skip:focus{left:14px;top:14px}

.map{width:100%;height:clamp(300px,42vw,520px);border:0;filter:grayscale(1) contrast(1.06)}

/* ---------------- motion ---------------- */
/* Only hide when JS is confirmed running — otherwise the page must render as
   plain, fully visible HTML. The .js class is set by an inline script in <head>. */
.js [data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js [data-rv].in{opacity:1;transform:none}
.js [data-rv][data-d="1"]{transition-delay:.1s}
.js [data-rv][data-d="2"]{transition-delay:.2s}
.js [data-rv][data-d="3"]{transition-delay:.3s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  [data-rv]{opacity:1;transform:none}
  .reveal-img{clip-path:none}
}