/* ==========================================================================
   Southern Pine Lake — main.css
   Design system: navy, cream, brass. Nothing else. Cormorant Garamond + Jost.
   Built for Netlify static deploy. No frameworks, no build step.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Core palette, pulled from the SPL badge logo */
  /* Three colours only: navy, cream, brass. No mid blues. */
  --ink:        #060D17;   /* deepest navy, near black */
  --navy:       #0B1524;   /* brand navy */
  --navy-lift:  #121E30;
  --navy-line:  #1D2B3E;

  --sand:       #B7C3CE;   /* steel grey accent */
  --sand-soft:  #D9E0E7;
  --sand-ink:   #4E5D6C;   /* slate grey for small text on light grey */

  --paper:      #F7F8FA;   /* cool near-white */
  --paper-2:    #EDF0F4;
  --paper-3:    #D9DFE6;

  --tx-dark:    #17212E;
  --tx-mid:     #4E5A67;
  --tx-light:   rgba(255,255,255,.80);
  --tx-faint:   rgba(255,255,255,.56);

  /* Type */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Jost", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap: 1200px;
  --wrap-tight: 780px;
  --gut: clamp(20px, 5vw, 56px);
  --sect: clamp(64px, 9vw, 132px);

  --r: 2px;      /* corner radius: almost none, deliberate */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.72;
  color:var(--tx-dark);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; }
figure{ margin:0; }   /* UA default is 1em 40px, which silently shrinks every tile */
hr{ border:0; border-top:1px solid var(--paper-3); margin:0; }

/* --- 3. Type scale ------------------------------------------------------- */
/* Cormorant Garamond ships old style figures by default, which look like
   typos in a price table. Force lining, tabular figures everywhere we set
   the serif on numbers. */
.h-hero,.h1,.h2,.h3,.stat b,td.lot-no,td.price,.card .num,.agent-name{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

.h-hero{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.8rem,7.6vw,5.9rem);
  line-height:.94;
  letter-spacing:-.015em;
}
.h1{ font-family:var(--serif); font-size:clamp(2.5rem,5.6vw,4.4rem); line-height:1.02; letter-spacing:-.012em; }
.h2{ font-family:var(--serif); font-size:clamp(2rem,4vw,3.3rem);   line-height:1.08; letter-spacing:-.01em; }
.h3{ font-family:var(--serif); font-size:clamp(1.5rem,2.3vw,2.1rem); line-height:1.18; }
.h4{ font-family:var(--sans); font-size:1.02rem; font-weight:500; letter-spacing:.02em; }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--sand);
  margin:0 0 1.15rem;
}
.eyebrow.on-light{ color:var(--sand-ink); }

.lede{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.35vw,1.85rem);
  line-height:1.42;
  color:var(--tx-dark);
  font-weight:400;
}
.on-dark .lede{ color:#fff; }

.small{ font-size:.86rem; line-height:1.65; color:var(--tx-mid); }
.on-dark .small{ color:var(--tx-faint); }
.italic{ font-style:italic; }

/* --- 4. Layout ----------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.wrap-tight{ max-width:var(--wrap-tight); }
.section{ padding-block:var(--sect); }
.section-sm{ padding-block:clamp(44px,6vw,80px); }
.center{ text-align:center; }
.mt{ margin-top:clamp(22px,3vw,34px); }
.mt-lg{ margin-top:clamp(38px,5vw,64px); }

.dark{ background:var(--navy); color:#fff; }
.ink{ background:var(--ink); color:#fff; }

.paper-2{ background:var(--paper-2); }
.on-dark{ color:#fff; }
.on-dark p{ color:var(--tx-light); }
.on-dark .h1,.on-dark .h2,.on-dark .h3{ color:#fff; }

.grid{ display:grid; gap:clamp(24px,3.4vw,48px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.split.wide-l{ grid-template-columns:1.15fr .85fr; }
.split.wide-r{ grid-template-columns:.85fr 1.15fr; }
@media (max-width:880px){ .split,.split.wide-l,.split.wide-r{ grid-template-columns:1fr; } }

/* --- 5. Rules & flourishes ---------------------------------------------- */
.rule{ width:56px; height:1px; background:var(--sand); margin:0 0 1.6rem; }
.rule.center{ margin-inline:auto; }
.rule.thin{ background:var(--paper-3); width:100%; }

.serif-mark{
  font-family:var(--serif); font-style:italic; color:var(--sand);
  font-size:1.6rem; line-height:1;
}

/* --- 6. Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:.78rem; font-weight:400;
  letter-spacing:.19em; text-transform:uppercase; text-decoration:none;
  padding:1.02em 1.9em; border:1px solid currentColor; border-radius:var(--r);
  color:var(--tx-dark); background:transparent;
  transition:background .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease), transform .32s var(--ease);
  cursor:pointer;
}
.btn:hover{ background:var(--tx-dark); color:var(--paper); }
.btn.solid{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn.solid:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.on-dark .btn{ color:#fff; border-color:rgba(255,255,255,.42); }
.on-dark .btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.on-dark .btn.solid{ background:var(--sand); border-color:var(--sand); color:var(--ink); }
.on-dark .btn.solid:hover{ background:var(--sand-soft); border-color:var(--sand-soft); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-row.center{ justify-content:center; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55em; text-decoration:none;
  font-size:.78rem; letter-spacing:.19em; text-transform:uppercase;
  border-bottom:1px solid var(--sand); padding-bottom:.35em; color:inherit;
  transition:gap .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow:hover{ gap:1em; border-color:currentColor; }
.link-arrow svg{ width:14px; height:9px; flex:none; }

/* --- 7. Header ----------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  padding-block:18px;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,21,36,.72), rgba(10,21,36,0));
  opacity:1; transition:opacity .4s var(--ease);
}
.site-header.stuck{ background:var(--navy); padding-block:11px; box-shadow:0 1px 0 var(--navy-line); }
.site-header.stuck::before{ opacity:0; }

.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:#fff; }
.brand img{ width:69px; height:69px; transition:width .4s var(--ease), height .4s var(--ease); }
.site-header.stuck .brand img{ width:56px; height:56px; }
@media (max-width:560px){ .brand img{ width:56px; height:56px; } .site-header.stuck .brand img{ width:48px; height:48px; } }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text b{ font-family:var(--sans); font-weight:400; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; }
.brand-text span{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--tx-faint); margin-top:3px; }

.nav-links{ display:flex; align-items:center; gap:clamp(18px,2.2vw,34px); list-style:none; }
.nav-links a{
  text-decoration:none; color:#fff; font-size:.76rem; letter-spacing:.17em;
  text-transform:uppercase; opacity:.82; position:relative; padding-block:4px;
  transition:opacity .28s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--sand); transition:right .34s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ right:0; }
.nav-links a[aria-current="page"]{ opacity:1; }
.nav-links .btn{ padding:.78em 1.4em; opacity:1; }
.nav-links .btn::after{ display:none; }

.burger{
  display:none; width:44px; height:34px; background:none; border:0; padding:8px 6px;
  cursor:pointer; flex-direction:column; justify-content:space-between;
}
.burger span{ display:block; height:1px; background:#fff; transition:transform .34s var(--ease), opacity .24s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }

@media (max-width:940px){
  .burger{ display:flex; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(360px,84vw);
    background:var(--navy); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:26px; padding:0 40px;
    transform:translateX(100%); transition:transform .42s var(--ease);
    box-shadow:-20px 0 60px rgba(0,0,0,.35);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:.95rem; letter-spacing:.14em; }
}

/* --- 8. Hero ------------------------------------------------------------- */
.hero{
  position:relative; min-height:min(76svh,720px);
  display:grid; align-items:end;
  background:var(--ink); color:#fff; overflow:hidden;
  padding-block:132px clamp(40px,5vw,64px);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,21,36,.58) 0%, rgba(10,21,36,.30) 34%, rgba(10,21,36,.86) 100%),
    radial-gradient(120% 78% at 50% 100%, rgba(10,21,36,.62), transparent 65%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-badge{ width:clamp(84px,10vw,120px); margin-bottom:clamp(22px,3vw,34px); }
.hero-sub{
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--sand); margin:0 0 1.2rem;
}
.hero-tag{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,2.1vw,1.62rem); line-height:1.32; color:rgba(255,255,255,.9);
  max-width:34ch; margin:1.15rem 0 0;
}
.hero-avail{
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sand-soft); margin:1.3rem 0 0;
}
.hero-cta{ margin-top:clamp(30px,4vw,44px); }

.hero-scroll{
  position:absolute; left:50%; bottom:22px; z-index:2; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--tx-faint);
}
.hero-scroll i{ display:block; width:1px; height:38px; background:linear-gradient(var(--sand),transparent); }
@media (max-width:640px){ .hero-scroll{ display:none; } }

/* Page header (interior pages) */
.page-head{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  padding-block:clamp(150px,17vw,210px) clamp(52px,7vw,80px);
}
.page-head-media{ position:absolute; inset:0; z-index:0; }
.page-head-media img{ width:100%; height:100%; object-fit:cover; }
.page-head-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,21,36,.80), rgba(10,21,36,.62) 45%, rgba(10,21,36,.92));
}
.page-head .wrap{ position:relative; z-index:1; }
.crumbs{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-faint); margin:0 0 1.5rem; }
.crumbs a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:2px; }
.crumbs a:hover{ border-color:var(--sand); }

/* --- 9. Stat band -------------------------------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--paper-3); border-bottom:1px solid var(--paper-3);
}
.stat{ padding:clamp(26px,3.6vw,44px) clamp(14px,2vw,28px); text-align:center; position:relative; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--paper-3); }
.stat b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem,4vw,3.15rem); line-height:1; color:var(--navy); letter-spacing:-.01em;
}
.stat span{
  display:block; margin-top:.7rem; font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tx-mid);
}

/* Stat band on a light section: numbers and labels flip dark. */
.paper-2 .stats{ border-color:var(--paper-3); }
.paper-2 .stat + .stat::before{ background:var(--paper-3); }
.paper-2 .stat:nth-child(3)::after,.paper-2 .stat:nth-child(4)::after{ background:var(--paper-3); }
.paper-2 .stat b{ color:var(--navy); }
.paper-2 .stat span{ color:var(--tx-mid); }
.paper-2 .stat.hot b, .paper-2 .stat.hot span{ color:var(--sand-ink); }

@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd)::before{ display:none; }
  .stat:nth-child(3)::after,.stat:nth-child(4)::after{ content:""; position:absolute; left:8%; right:8%; top:0; height:1px; background:var(--paper-3); }
}

/* --- 10. Figures & media ------------------------------------------------- */
.figure{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--paper-3); }
.figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.15s var(--ease); }
.figure:hover img{ transform:scale(1.035); }
.figure.tall{ aspect-ratio:4/5; }
.figure.wide{ aspect-ratio:16/10; }
.figure.square{ aspect-ratio:1/1; }
.figure figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:18px 20px;
  background:linear-gradient(transparent, rgba(10,21,36,.82));
  color:#fff; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.frame{ position:relative; }
.frame::after{
  content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.34);
  pointer-events:none; z-index:2;
}

/* --- 11. Cards ----------------------------------------------------------- */
.card{
  background:#fff; border:1px solid var(--paper-3); border-radius:var(--r);
  padding:clamp(26px,3vw,38px);
  transition:border-color .34s var(--ease), transform .34s var(--ease), box-shadow .34s var(--ease);
}
.card:hover{ border-color:var(--sand); transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(15,29,48,.45); }
.card .num{
  font-family:var(--serif); font-size:1.5rem; color:var(--sand-ink);
  display:block; margin-bottom:.7rem; line-height:1;
}
.card h3{ margin-bottom:.7rem; }

.feature-list{ list-style:none; }
.feature-list li{
  position:relative; padding:16px 0 16px 30px; border-bottom:1px solid var(--paper-3);
  font-size:.97rem;
}
.on-dark .feature-list li{ border-color:var(--navy-line); }
.feature-list li:last-child{ border-bottom:0; }
.feature-list li::before{
  content:""; position:absolute; left:2px; top:26px; width:12px; height:1px; background:var(--sand);
}

/* --- 12. Lot table ------------------------------------------------------- */
.lot-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  margin-bottom:26px;
}
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.72em 1.25em; border:1px solid var(--paper-3); background:#fff;
  border-radius:100px; cursor:pointer; color:var(--tx-mid);
  transition:all .28s var(--ease);
}
.chip:hover{ border-color:var(--sand); color:var(--tx-dark); }
.chip[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }

.lot-count{ font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-mid); }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--paper-3); border-radius:var(--r); background:#fff; }
table.lots{ width:100%; border-collapse:collapse; min-width:640px; }
table.lots th{
  text-align:left; font-family:var(--sans); font-weight:400;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-mid);
  padding:18px 20px; border-bottom:1px solid var(--paper-3); background:var(--paper-2);
  white-space:nowrap;
}
table.lots th button{
  background:none; border:0; padding:0; cursor:pointer; color:inherit; font:inherit;
  letter-spacing:inherit; text-transform:inherit; display:inline-flex; align-items:center; gap:6px;
}
table.lots th button:hover{ color:var(--tx-dark); }
table.lots th button .caret{ opacity:.35; font-size:.7em; }
table.lots th[aria-sort] button .caret{ opacity:1; color:var(--sand); }
table.lots td{ padding:19px 20px; border-bottom:1px solid var(--paper-2); font-size:.95rem; vertical-align:middle; }
table.lots tr:last-child td{ border-bottom:0; }
table.lots tbody tr{ transition:background .24s var(--ease); }
table.lots tbody tr:hover{ background:var(--paper); }
td.lot-no{ font-family:var(--serif); font-weight:600; font-size:1.6rem; color:var(--navy); width:1%; white-space:nowrap; padding-right:8px; }
td.price{ font-family:var(--serif); font-weight:500; font-size:1.42rem; color:var(--navy); white-space:nowrap; }

.tag{
  display:inline-block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.5em .95em; border-radius:100px; white-space:nowrap;
}
.tag.available{ background:#E7EDF3; color:#1E4266; }
.tag.pending  { background:#E3E8EE; color:#3E4C5C; }
.tag.sold     { background:#EDEFF2; color:#585F6B; }

.data-note{
  display:flex; gap:14px; align-items:flex-start;
  border-left:2px solid var(--sand); padding:16px 0 16px 20px;
  font-size:.84rem; line-height:1.6; color:var(--tx-mid);
}
.on-dark .data-note{ color:var(--tx-light); }

/* --- 13. Gallery --------------------------------------------------------- */
.gallery{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(150px,17.5vw,285px);
  gap:clamp(10px,1.4vw,18px);
}
.gallery a{ display:block; position:relative; overflow:hidden; border-radius:var(--r); background:var(--paper-3); }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.gallery a:hover img{ transform:scale(1.04); }
.gallery a::after{
  content:""; position:absolute; inset:0; background:rgba(10,21,36,0); transition:background .35s var(--ease);
}
.gallery a:hover::after{ background:rgba(10,21,36,.14); }
/* Uniform row track keeps every tile in a row flush at top and bottom,
   whatever the source aspect ratio is. */
.gspan-7 { grid-column:span 7;  grid-row:span 2; }
.gspan-5 { grid-column:span 5;  grid-row:span 2; }
.gspan-6 { grid-column:span 6;  grid-row:span 2; }
.gspan-4 { grid-column:span 4;  grid-row:span 2; }
.gspan-12{ grid-column:span 12; grid-row:span 2; }
@media (max-width:760px){
  .gallery{ grid-auto-rows:clamp(160px,30vw,230px); }
  .gspan-7,.gspan-5,.gspan-4,.gspan-6,.gspan-12{ grid-column:span 12; grid-row:span 1; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(6,13,22,.95); align-items:center; justify-content:center;
  padding:clamp(18px,5vw,64px);
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:86vh; object-fit:contain; border-radius:var(--r); }
.lightbox-close,.lightbox-nav{
  position:absolute; background:none; border:1px solid rgba(255,255,255,.3); color:#fff;
  width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1;
  display:grid; place-items:center; transition:background .28s var(--ease);
}
.lightbox-close:hover,.lightbox-nav:hover{ background:rgba(255,255,255,.14); }
.lightbox-close{ top:24px; right:24px; }
.lightbox-nav.prev{ left:18px; top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right:18px; top:50%; transform:translateY(-50%); }
.lightbox-cap{
  position:absolute; bottom:22px; left:0; right:0; text-align:center;
  color:var(--tx-faint); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
}

/* --- 14. Agent card ------------------------------------------------------ */
.agent{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,3.4vw,46px); align-items:center;
}
@media (max-width:640px){ .agent{ grid-template-columns:1fr; text-align:center; justify-items:center; } }
.agent-mark{ width:clamp(96px,11vw,132px); opacity:.95; }
.agent-name{ font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.1; }
.agent-role{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sand); margin-top:.7rem; }
.agent-lines{ list-style:none; margin-top:1.3rem; display:flex; flex-wrap:wrap; gap:10px 26px; }
.agent-lines a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.26); padding-bottom:3px; font-size:.92rem; }
.agent-lines a:hover{ border-color:var(--sand); }
.on-dark .agent-lines li{ color:var(--tx-light); }

/* --- 15. Documents ------------------------------------------------------- */
.doc-list{ list-style:none; display:grid; gap:0; }
.doc-list li{ border-top:1px solid var(--paper-3); }
.doc-list li:last-child{ border-bottom:1px solid var(--paper-3); }
.doc-list a{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px; text-decoration:none;
  transition:padding .32s var(--ease), color .32s var(--ease);
}
.doc-list a:hover{ padding-inline:14px 4px; color:var(--navy); }
.doc-list .doc-t{ font-family:var(--serif); font-size:1.32rem; }
.doc-list .doc-m{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-mid); white-space:nowrap; }
.on-dark .doc-list li{ border-color:var(--navy-line); }
.on-dark .doc-list a:hover{ color:var(--sand-soft); }
.on-dark .doc-list .doc-m{ color:var(--tx-faint); }

/* --- 16. Forms ----------------------------------------------------------- */
.form{ display:grid; gap:20px; }
.field{ display:grid; gap:9px; }
.field label{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-mid); }
.field input,.field select,.field textarea{
  font:inherit; font-size:.98rem; color:var(--tx-dark);
  padding:15px 16px; border:1px solid var(--paper-3); border-radius:var(--r);
  background:#fff; width:100%; transition:border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--sand); box-shadow:0 0 0 3px rgba(194,164,104,.18);
}
.field textarea{ min-height:150px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.hp{ position:absolute; left:-9999px; opacity:0; }

/* --- 17. Footer ---------------------------------------------------------- */
.site-footer{ background:var(--ink); color:#fff; padding-block:clamp(56px,7vw,88px) 34px; }
.foot-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1.25fr; gap:clamp(30px,4vw,60px);
  padding-bottom:clamp(34px,4.5vw,54px); border-bottom:1px solid var(--navy-line);
}
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-logo{ width:82px; margin-bottom:20px; }
.site-footer h4{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sand); margin-bottom:18px; font-weight:400;
}
.site-footer ul{ list-style:none; display:grid; gap:11px; }
.site-footer a{ text-decoration:none; color:var(--tx-light); font-size:.92rem; transition:color .26s var(--ease); }
.site-footer a:hover{ color:#fff; }
.site-footer p{ color:var(--tx-faint); font-size:.9rem; }
.legal{ padding-top:26px; display:grid; gap:12px; }
.legal p{ font-size:.72rem; line-height:1.68; color:rgba(255,255,255,.54); margin:0; }
.eho{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.eho svg{ flex:none; }
.made{ font-size:.7rem; letter-spacing:.12em; }
.made a{ color:rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.2); }
.made a:hover{ color:#fff; }

/* --- 18. Motion ---------------------------------------------------------- */
/* Reveal only when JS has confirmed it is running. Without this guard a
   failed or blocked main.js leaves every .rise block permanently invisible,
   which reads as blank sections. */
.js .rise{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js .rise.in{ opacity:1; transform:none; }
.js .rise.d1{ transition-delay:.09s; } .js .rise.d2{ transition-delay:.18s; }
.js .rise.d3{ transition-delay:.27s; } .js .rise.d4{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){
  .js .rise{ opacity:1; transform:none; transition:none; }
  .figure img,.gallery img{ transition:none; }
}

/* --- 19. Utilities ------------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; z-index:300; padding:14px 20px;
  background:var(--sand); color:var(--ink); text-decoration:none; font-size:.8rem;
}
.skip:focus{ left:16px; top:16px; }
:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }
.noscroll{ overflow:hidden; }
[hidden]{ display:none !important; }

/* --- 20. Layout refinements -------------------------------------------- */

/* Two column body copy so wide sections do not leave a dead half. */
.cols-2{
  columns:2; column-gap:clamp(32px,4vw,64px);
  max-width:none;
}
.cols-2 p{ break-inside:avoid; }
@media (max-width:820px){ .cols-2{ columns:1; } }

/* Long reference lists read better when the intro tracks alongside them. */
@media (min-width:881px){
  .sticky-col{ position:sticky; top:112px; align-self:start; }
  .split.top{ align-items:start; }
}

/* Closing note under a section, quieter than body copy. */
.section-note{
  margin-top:clamp(28px,3.5vw,44px);
  padding-top:22px; border-top:1px solid var(--paper-3);
  display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center;
  justify-content:space-between;
}
.on-dark .section-note{ border-color:var(--navy-line); }

/* --- 21. Small screen corrections -------------------------------------- */
@media (max-width:560px){
  .hero-sub{ letter-spacing:.2em; font-size:.66rem; }
  .hero{ padding-block:132px 60px; }
  .hero-media img{ object-position:center 62%; }
  .eyebrow{ letter-spacing:.24em; }
  .btn{ padding:.95em 1.5em; letter-spacing:.15em; }
  .btn-row .btn{ width:100%; justify-content:center; }
  .agent-lines{ flex-direction:column; gap:12px; }
  .doc-list a{ flex-direction:column; align-items:flex-start; gap:8px; }
  .lot-toolbar{ flex-direction:column; align-items:flex-start; }
  .filters{ width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .chip{ flex:none; }
}
/* Nudge people that the homesite table scrolls sideways on a phone. */
@media (max-width:700px){
  .table-scroll{ position:relative; }
  .table-scroll::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:44px;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92));
    pointer-events:none;
  }
  .scroll-hint{
    display:block; margin-top:12px; font-size:.68rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--tx-mid);
  }
}
.scroll-hint{ display:none; }

/* --- 22. Agent, headshot, brokerage lockup ------------------------------ */

/* The Christie's / Ivester Jackson lockup is never recoloured or inverted.
   On dark sections it sits on a light plate instead. */
.lockup{ display:block; width:clamp(200px,22vw,268px); height:auto; }
.lockup-plate{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--paper); border-radius:var(--r);
  padding:clamp(16px,2vw,22px) clamp(20px,2.4vw,28px);
}

.headshot{
  position:relative; width:100%; max-width:340px; border-radius:var(--r);
  overflow:hidden; background:var(--paper-3);
}
.headshot img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 12%; }
.headshot.framed::after{
  content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.34);
  pointer-events:none;
}

/* Agent block: portrait, then name and lines, then the brokerage lockup. */
.agent{ grid-template-columns:minmax(0,300px) 1fr; align-items:center; }
@media (max-width:760px){
  .agent{ grid-template-columns:1fr; text-align:left; justify-items:start; }
  .headshot{ max-width:220px; }
}
.agent-foot{
  margin-top:clamp(26px,3vw,36px); padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--navy-line);
}
.on-light .agent-foot{ border-color:var(--paper-3); }

/* --- 23. Finished homes grid -------------------------------------------- */
.homes{
  display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(120px,13.2vw,182px);
}
.homes figure{ margin:0; height:100%; }
.homes figure img{ height:100%; }
.home-lg{ grid-column:span 4; grid-row:span 2; }
.home-sm{ grid-column:span 2; grid-row:span 2; }
.home-md{ grid-column:span 3; grid-row:span 2; }
@media (max-width:820px){
  .homes{ grid-template-columns:1fr; grid-auto-rows:clamp(200px,52vw,300px); }
  .home-lg,.home-sm,.home-md{ grid-column:span 1; grid-row:span 1; }
}

/* --- 24. Footer brokerage lockup ---------------------------------------- */
/* White artwork straight on the navy, no plate. */
.foot-lockup{ width:min(250px,100%); margin-top:26px; }

/* --- 25. Final release counter ------------------------------------------ */
.stat-block{ display:grid; gap:0; border-top:1px solid var(--paper-3); }
.stat-block > div{
  display:flex; align-items:baseline; gap:18px;
  padding:20px 0; border-bottom:1px solid var(--paper-3);
}
.stat-block b{
  font-family:var(--serif); font-weight:400; font-size:2.6rem; line-height:1;
  color:var(--navy); min-width:2.6ch;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1;
}
.stat-block span{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--tx-mid); }
.stat-block .hot b{ color:var(--sand-ink); }
.stat-block .hot span{ color:var(--sand-ink); }

/* --- 26. Hero legibility ------------------------------------------------ */
/* The hero photo is bright on the right, so the text column gets its own
   gradient rather than relying on the overall scrim. */
.hero-media::after{
  background:
    linear-gradient(180deg, rgba(6,13,23,.52) 0%, rgba(6,13,23,.20) 30%, rgba(6,13,23,.88) 100%),
    linear-gradient(90deg, rgba(6,13,23,.78) 0%, rgba(6,13,23,.34) 46%, rgba(6,13,23,0) 74%);
}
.stat.hot b, .stat.hot span{ color:var(--sand-ink); }

/* --- 27. Page tweaks (Aug 2026 review) ---------------------------------- */
.lg-body p{ font-size:clamp(17px,1.16vw,19.5px); }
.lg-body .lede{ font-size:clamp(1.35rem,2vw,1.7rem); }
.lg-body .small, .lg-body .data-note span{ font-size:.9rem; }
.stat-block b{ font-size:2.9rem; min-width:2.4ch; }
.stat-block > div{ gap:22px; }