/* ===========================================================================
   CHEZ MOI APARTMENTS - site.css
   THESIS: this property is a dark green place with warm oak inside it.
   The page walks you in: it opens in the shade of the trees and switches
   ONCE, at the floor plans, into oak light, and stays there.

   Palette is MEASURED from the property's own 25 photographs, not chosen:
     exteriors  25.8% green, median L=36   -> #21251a shade, #5a7327 foliage
     interiors  57.3% warm,  median L=60   -> #794122 walnut, #c5a470 oak,
                                              #deddd9 greige wall
   Accent lock: ONE hue family (oak, ~25deg). --oak on light, --ember on dark.
   Radius rule: containers 14px, buttons pill, inputs 10px. No exceptions.
   =========================================================================== */

:root{
  /* OUTSIDE - measured from exterior photography */
  --forest-900:#141a12;
  --forest-800:#1b2318;
  --forest-700:#26301f;
  --foliage:#5a7327;
  --foliage-lit:#7d8c2e;

  /* INSIDE - measured from apartment interiors */
  --oak-900:#2a2018;
  --oak-700:#794122;
  --oak:#a05c2b;          /* accent on light. 5.17:1 with white text */
  --ember:#d08a45;        /* same hue family, accent on dark. 6.24:1 on forest */
  --oak-300:#c5a470;

  /* NEUTRALS - measured greige, deliberately not cream */
  --bone:#e6e4de;
  --bone-lit:#f2f0ec;
  --paper:#fbfaf8;
  --ink:#1e2419;          /* deep forest ink, 13.96:1 on --bone-lit */
  --ink-soft:#4a5142;     /* 7.24:1 */

  --line:rgba(30,36,25,.13);
  --line-dark:rgba(230,228,222,.14);
  --shadow:0 20px 56px -26px rgba(20,26,18,.42);
  --shadow-lift:0 28px 70px -28px rgba(20,26,18,.5);

  --r-box:14px;
  --r-input:10px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* LEGACY ALIASES - subpages still reference the pre-2026-09-14 token names in
     their own <style> blocks. Mapped onto the measured palette so those rules
     resolve instead of silently collapsing to inherited ink. Do not use these
     in new CSS; use the measured names above. */
  --clay:var(--oak);
  --clay-dark:var(--oak-700);
  --sand:var(--bone);
  --cream:var(--bone-lit);
  --charcoal:var(--oak-900);
  --sage:var(--foliage);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--bone-lit);
  line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{
  font-family:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  font-weight:600;line-height:1.06;letter-spacing:-.018em;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

.eyebrow{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oak);font-weight:600;
}

/* BUTTONS - pill, one radius rule, tactile push on :active */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;font-weight:500;font-size:15px;
  letter-spacing:.005em;cursor:pointer;border:1px solid transparent;
  white-space:nowrap;transition:background .25s var(--ease),
    border-color .25s var(--ease),transform .18s var(--ease),color .25s var(--ease);
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-solid{background:var(--oak);color:#fff}
.btn-solid:hover{background:var(--oak-700)}
.btn-ghost{border-color:rgba(230,228,222,.52);color:var(--bone-lit);
  background:rgba(20,26,18,.34);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(20,26,18,.62);border-color:var(--ember)}
.btn-dark{background:var(--forest-900);color:var(--bone-lit)}
.btn-dark:hover{background:var(--forest-700)}
.btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* =====================  OUTSIDE  ===================== */

/* NAV - sits in the shade with the hero. One line, 74px. */
header.nav{
  position:sticky;top:0;z-index:50;background:var(--forest-900);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  color:var(--bone-lit);
}
/* THE NAV BELONGS TO THE FOREST, not on top of it. At rest it is solid
   --forest-900 with NO bottom rule, so it and the threshold band below are one
   unbroken dark field - the bar stops reading as a separate slab.
   It only condenses (translucent + hairline) once it has scrolled off the band
   and is floating over oak light, where it needs the separation to stay legible.
   Driven by scroll(), not JS. Where scroll-timeline is unsupported the animation
   simply never applies and the nav stays solid forest - fails open, like the
   reveal and the canopy. */
@keyframes nav-lift{
  to{background:rgba(20,26,18,.88);border-bottom-color:var(--line-dark)}
}
header.nav{
  animation:nav-lift linear both;
  animation-timeline:scroll(root block);
  animation-range:0 96px;
}
@media (prefers-reduced-motion:reduce){
  header.nav{animation:none;background:rgba(20,26,18,.88);
    border-bottom-color:var(--line-dark)}
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{
  width:40px;height:40px;border-radius:50%;background:var(--ember);color:var(--forest-900);
  display:grid;place-items:center;font-family:'Bricolage Grotesque',sans-serif;
  font-size:20px;font-weight:700;
}
.brand b{font-family:'Bricolage Grotesque',sans-serif;font-size:23px;font-weight:600;
  letter-spacing:-.02em;color:#fff}
.brand small{display:block;font-family:'Instrument Sans',sans-serif;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--oak-300);margin-top:-1px}
nav.links{display:flex;gap:30px;align-items:center}
nav.links a{font-size:14px;font-weight:500;color:rgba(230,228,222,.84);
  transition:color .2s var(--ease)}
nav.links a:hover{color:var(--ember)}
.nav-cta{padding:10px 20px;font-size:14px;background:var(--ember);color:var(--forest-900)}
.nav-cta:hover{background:var(--oak-300)}
.burger{display:none;background:none;border:0;font-size:26px;cursor:pointer;
  color:var(--bone-lit)}

/* HERO - the shade under the trees. Photo is the page. */
.hero{position:relative;min-height:min(74vh,660px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;background:var(--forest-900)}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(20,26,18,.52) 0%,rgba(20,26,18,.30) 30%,rgba(20,26,18,.93) 100%),
    url('images/71730995.webp') center 38%/cover;
}
/* the green the photo already is, pushed one stop further so type can sit on it */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,26,18,.74) 0%,rgba(20,26,18,.10) 66%);
}
.hero .wrap{position:relative;z-index:2;padding-bottom:84px;padding-top:104px;
  max-width:1180px}
.hero .eyebrow{color:var(--oak-300)}
.hero h1{font-size:clamp(44px,6.2vw,78px);margin:14px 0 18px;max-width:15ch;
  letter-spacing:-.028em}
.hero p.lede{font-size:18.5px;font-weight:400;max-width:44ch;
  color:rgba(246,244,240,.9);line-height:1.68}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
/* STAT BAND - its own section now, with foliage.js drawing depth behind it.
   The canvas is decorative: if it never paints, this is still a forest-900
   panel with legible figures on it. */
.stat-band{position:relative;background:var(--forest-900);color:#fff;
  overflow:hidden;isolation:isolate}
.stat-band > canvas{position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none}
.stat-band > .wrap{position:relative;z-index:1;padding-top:66px;padding-bottom:66px}

.hero-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.hero-badges .stat{padding-left:18px;border-left:1px solid rgba(197,164,112,.34)}
.hero-badges .stat b{font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(30px,3.4vw,42px);font-weight:600;display:block;line-height:1;
  letter-spacing:-.025em;text-shadow:0 2px 18px rgba(20,26,18,.6)}
.hero-badges .stat span{font-size:11.5px;letter-spacing:.12em;
  color:rgba(246,244,240,.78);text-transform:uppercase;display:block;
  margin-top:11px;text-shadow:0 2px 14px rgba(20,26,18,.7)}

@media(max-width:820px){
  .hero-badges{grid-template-columns:1fr 1fr;gap:26px}
  .stat-band > .wrap{padding-top:48px;padding-bottom:48px}
}

/* STRIP - still outside */
.strip{background:var(--forest-800);color:var(--bone)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:16px 44px;justify-content:center;
  padding:20px 28px;font-size:14px;letter-spacing:.01em}
.strip span{display:flex;align-items:center;gap:9px;color:rgba(230,228,222,.86)}
.strip svg{width:17px;height:17px;stroke:var(--foliage-lit);fill:none;stroke-width:1.6}

/* ABOUT / THE GROUNDS - the last dark section */
.about{background:var(--forest-900);color:var(--bone)}
.about h2{color:#fff}
.about .eyebrow{color:var(--oak-300)}
.about p{color:rgba(230,228,222,.78)}
.about-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:60px;align-items:center}
.about ul{list-style:none;margin-top:24px;display:grid;gap:14px}
.about li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;
  color:rgba(230,228,222,.88)}
.about li i{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:rgba(125,140,46,.16);border:1px solid rgba(125,140,46,.4);
  display:grid;place-items:center;color:var(--foliage-lit);font-style:normal}

/* =====================  THE THRESHOLD  =====================
   The one theme switch on the page. Dark above, warm below. */
section{padding:92px 0}
.sec-head{max-width:620px;margin-bottom:48px}
.sec-head h2{font-size:clamp(32px,4.2vw,50px);margin:12px 0 14px}
.sec-head p{color:var(--ink-soft);font-size:16.5px;max-width:60ch}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* the threshold band moved to its own .threshold section when the page became
   a walk-through; #plans is now just another warm interior section. */

/* =====================  INSIDE  ===================== */

/* FLOOR PLANS */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-box);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan .ph{height:172px;background-size:cover;background-position:center;position:relative}
.plan .tag{position:absolute;top:10px;left:10px;background:rgba(251,250,248,.94);
  color:var(--oak-700);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px}
.plan-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.plan h3{font-size:23px;margin:0 0 8px}
.plan .specs{display:flex;gap:12px;color:var(--ink-soft);font-size:12.5px;
  margin:4px 0 12px;flex-wrap:wrap}
.plan .specs span{display:flex;align-items:center;gap:4px}
.plan p{font-size:13.5px;line-height:1.55;margin:0 0 14px;color:var(--ink-soft)}
.plan .price{font-family:'Bricolage Grotesque',sans-serif;font-size:27px;color:var(--ink);
  font-weight:600;margin-top:auto;line-height:1;letter-spacing:-.02em}
.plan .price small{font-family:'Instrument Sans',sans-serif;font-size:12px;
  color:var(--ink-soft);font-weight:400;display:block;letter-spacing:0}
.plan .btn{margin-top:14px;width:100%;padding:12px 20px;font-size:14px}

/* AMENITIES - inside now, greige on paper, oak marks */
.amen{background:var(--bone)}
.amen .sec-head h2{color:var(--ink)}
.amen .sec-head p{color:var(--ink-soft)}
.amen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.amen-card{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-box);padding:26px 22px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.amen-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.amen-card svg{width:28px;height:28px;stroke:var(--oak);fill:none;stroke-width:1.5;
  margin-bottom:15px}
.amen-card h3{font-size:19px;color:var(--ink);margin-bottom:6px}
.amen-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
/* visual variation: the first and last tiles carry the property, not just type */
.amen-grid .amen-card:nth-child(1),
.amen-grid .amen-card:nth-child(6){
  background-image:linear-gradient(180deg,rgba(20,26,18,.2),rgba(20,26,18,.88)),
    url('images/71731003.webp');
  background-size:cover;background-position:center;border-color:transparent;
}
.amen-grid .amen-card:nth-child(6){background-image:
  linear-gradient(180deg,rgba(20,26,18,.2),rgba(20,26,18,.88)),url('images/71730996.webp')}
.amen-grid .amen-card:nth-child(1) h3,
.amen-grid .amen-card:nth-child(6) h3{color:#fff}
.amen-grid .amen-card:nth-child(1) p,
.amen-grid .amen-card:nth-child(6) p{color:rgba(246,244,240,.84)}
.amen-grid .amen-card:nth-child(1) svg,
.amen-grid .amen-card:nth-child(6) svg{stroke:var(--ember)}

/* GALLERY - flat, the photographs do the work */
#gallery{background:var(--bone-lit)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:12px}
.gallery a{border-radius:var(--r-box);overflow:hidden;background-size:cover;
  background-position:center;position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.gallery a::after{content:'';position:absolute;inset:0;
  background:rgba(20,26,18,0);transition:background .3s var(--ease)}
.gallery a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gallery a:hover::after{background:rgba(20,26,18,.16)}
.gallery .big{grid-column:span 2;grid-row:span 2}
.gallery .tall{grid-row:span 2}

/* REVIEWS */
.reviews{background:var(--bone)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-box);
  padding:30px 28px;display:flex;flex-direction:column}
.stars{color:var(--oak);font-size:16px;letter-spacing:2px;margin-bottom:14px}
.rev p{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;line-height:1.35;
  color:var(--ink);font-weight:500;letter-spacing:-.012em}
.rev .who{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:13px}
.rev .av{width:44px;height:44px;border-radius:50%;background:var(--oak);color:#fff;
  display:grid;place-items:center;font-weight:600;
  font-family:'Bricolage Grotesque',sans-serif;font-size:18px}
.rev .who b{font-family:'Instrument Sans',sans-serif;font-size:14.5px;font-weight:600;
  display:block}
.rev .who span{font-size:13px;color:var(--ink-soft)}
.rev-scores{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;margin-top:48px;
  padding-top:38px;border-top:1px solid var(--line)}
.rev-scores .s b{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;
  color:var(--oak-700);display:block;line-height:1;letter-spacing:-.02em}
.rev-scores .s span{font-size:13px;color:var(--ink-soft)}

/* RESIDENT PORTAL */
.resident{background:var(--bone-lit);border-top:1px solid var(--line)}
.resident-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.resident-info h2{font-size:clamp(30px,3.6vw,42px);margin:12px 0 16px}
.resident-info p{color:var(--ink-soft);font-size:16px;margin:0 0 22px}
.resident-features{list-style:none;display:grid;gap:15px;margin:26px 0}
.resident-features li{display:flex;gap:14px;align-items:flex-start;font-size:15px}
.resident-features li i{flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:var(--oak);color:#fff;display:grid;place-items:center;font-style:normal;
  font-size:15px}
.portal-card{background:var(--oak-900);color:var(--bone-lit);
  border:1px solid transparent;border-radius:var(--r-box);padding:32px;text-align:center}
.portal-card h3{font-size:21px;margin:0 0 8px;color:#fff}
.portal-card p{color:rgba(230,228,222,.76);font-size:14px;margin:0 0 20px}
.portal-card .btn{width:100%;background:var(--ember);color:var(--oak-900)}
.portal-card .btn:hover{background:var(--oak-300)}

/* LOCATION */
.loc-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:0;
  border-radius:var(--r-box);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.loc-info{padding:50px 46px;background:var(--paper)}
.loc-info h2{font-size:clamp(30px,3.6vw,40px);margin-bottom:8px}
.loc-list{list-style:none;margin-top:26px;display:grid;gap:20px}
.loc-list li{display:flex;gap:16px;align-items:flex-start}
.loc-list svg{width:22px;height:22px;stroke:var(--oak);fill:none;stroke-width:1.6;
  flex:0 0 auto;margin-top:3px}
.loc-list b{display:block;font-weight:600;font-size:15px}
.loc-list span{color:var(--ink-soft);font-size:15px}
.loc-map{min-height:460px;background:var(--bone)}
.loc-map iframe{width:100%;height:100%;border:0;display:block}

/* CONTACT / CTA - the warm dark, same hue family as the footer */
.cta{background:var(--oak-900);color:#fff;text-align:center}
.cta h2{font-size:clamp(34px,4.6vw,58px);margin-bottom:16px}
.cta p{color:rgba(246,244,240,.82);font-size:17px;max-width:52ch;margin:0 auto 32px}
.cta-form{max-width:620px;margin:36px auto 0;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-box);padding:36px 32px;
  text-align:left}
.cta-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cta-form label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(246,244,240,.78);display:block;margin-bottom:7px;font-weight:500}
.cta-form input,.cta-form select,.cta-form textarea{
  width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r-input);padding:13px 15px;color:#fff;font-family:inherit;
  font-size:15px;margin-bottom:18px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:rgba(246,244,240,.62)}
.cta-form input:focus,.cta-form select:focus,.cta-form textarea:focus{
  outline:none;border-color:var(--ember);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(208,138,69,.24)}
.cta-form option{color:var(--ink)}
.cta-form button{width:100%;font-size:16px;padding:16px;background:var(--ember);
  color:var(--oak-900)}
.cta-form button:hover{background:var(--oak-300)}
.form-note{font-size:13px;color:rgba(246,244,240,.66);text-align:center;margin-top:14px}

/* FOOTER - warm dark. Same family as .cta, not a second theme. */
footer{background:var(--oak-900);color:rgba(230,228,222,.74);padding:62px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;
  padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}
footer h4{color:#fff;font-size:15px;font-weight:600;margin-bottom:18px;
  letter-spacing:.01em}
footer a{display:block;font-size:14.5px;margin-bottom:11px;
  transition:color .2s var(--ease)}
footer a:hover{color:var(--ember)}
.foot-brand b{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;color:#fff;
  letter-spacing:-.02em}
.foot-brand p{font-size:14.5px;margin-top:12px;max-width:34ch}
.foot-bottom{padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:12px;font-size:13px;color:rgba(230,228,222,.56)}
.eho{display:inline-flex;align-items:center;gap:7px}

/* =====================  MOTION  =====================
   Motivated: sections enter in the reading order so the walk-in reads as a
   sequence, not a dump. Nothing loops. Everything collapses under reduce. */
/* FAILS OPEN. The hidden state only exists once JS has added .reveal-on to
   <html>, so if the script never runs, never parses, or is blocked, every
   section is simply visible. Content is never permanently invisible. */
.reveal-on [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-on [data-reveal].seen{opacity:1;transform:none}
.reveal-on [data-reveal-stagger] > *{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.reveal-on [data-reveal-stagger].seen > *{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],[data-reveal-stagger] > *{opacity:1 !important;transform:none !important;
    transition:none !important}
  .btn,.plan,.amen-card,.gallery a{transition:none}
}

/* =====================  SLIDESHOW  ===================== */
.about-grid .shots{position:relative;margin:0;border-radius:var(--r-box);overflow:hidden;
  box-shadow:var(--shadow-lift);height:100%;min-height:440px;background:var(--forest-800)}
.about-grid .shots-frame{position:absolute;inset:0}
.about-grid .shots img{position:absolute;inset:0;width:100%;height:100%;min-height:0;
  object-fit:cover;border-radius:0;box-shadow:none;opacity:0;
  transition:opacity .7s ease}
.about-grid .shots img.on{opacity:1}
.shots-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;
  border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(20,26,18,.5);
  color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .25s ease,background .25s ease;backdrop-filter:blur(3px);
  padding:0 0 3px}
.shots-nav.prev{left:14px}
.shots-nav.next{right:14px}
.shots:hover .shots-nav,.shots:focus-within .shots-nav{opacity:1}
.shots-nav:hover{background:rgba(20,26,18,.78)}
.shots-nav:focus-visible{opacity:1;outline:2px solid var(--ember);outline-offset:2px}
.shots-cap{position:absolute;left:0;right:0;bottom:0;display:flex;
  justify-content:space-between;align-items:flex-end;gap:12px;padding:44px 18px 16px;
  color:#fff;font-size:13.5px;
  background:linear-gradient(to top,rgba(20,26,18,.82),rgba(20,26,18,0));
  pointer-events:none}
.shots-count{font-variant-numeric:tabular-nums;opacity:.82;white-space:nowrap}
.shots-dots{position:absolute;left:0;right:0;bottom:46px;display:flex;
  justify-content:center;gap:7px;flex-wrap:wrap;padding:0 16px}
.shots-dots button{width:7px;height:7px;padding:0;border-radius:50%;border:none;
  background:rgba(255,255,255,.45);cursor:pointer;
  transition:background .25s ease,transform .25s ease}
.shots-dots button.on{background:var(--ember);transform:scale(1.5)}
.shots-dots button:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .about-grid .shots img{transition:none}
  .shots-nav{transition:none}
}

/* SOLID LAST GALLERY TILE */
.tile-all{background:var(--forest-900);color:var(--bone-lit);display:flex;
  flex-direction:column;justify-content:flex-end;gap:2px;padding:24px;
  text-decoration:none;border-radius:var(--r-box);
  transition:background .25s var(--ease),transform .3s var(--ease)}
.tile-all:hover{background:var(--forest-700);transform:translateY(-3px)}
.tile-all-n{font-family:'Bricolage Grotesque',sans-serif;font-size:42px;line-height:1;
  font-weight:600;letter-spacing:-.03em}
.tile-all-t{font-size:15px;line-height:1.35;opacity:.86}
.tile-all-c{margin-top:10px;font-size:13px;letter-spacing:.04em;color:var(--ember)}
.tile-all:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* =====================  MOBILE  ===================== */
@media(max-width:900px){
  nav.links{display:none}
  .burger{display:block}
  .about-grid,.loc-grid,.resident-grid{grid-template-columns:1fr}
  .plans,.rev-grid{grid-template-columns:1fr}
  .amen-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .cta-form .row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  section{padding:66px 0}
  .loc-info{padding:38px 26px}
  .hero .wrap{padding-top:72px;padding-bottom:56px}
  .hero-badges{gap:22px}
}
@media(max-width:860px){
  .about-grid .shots{min-height:320px}
  .shots-dots{bottom:42px}
}
@media(max-width:560px){
  .amen-grid,.gallery{grid-template-columns:1fr}
  .gallery .big,.gallery .tall{grid-column:auto;grid-row:auto}
  .wrap{padding:0 20px}
}

/* ===========================================================================
   ARCHITECTURE: the walk-through + the portal spine.
   Section families, in order, each used exactly once:
     1 road in (full-bleed photo hero)      2 grounds (horizontal pan)
     3 threshold (full-bleed switch)        4a pair  4b split  4c strip
     4d rows    4e two-column list          5 asymmetric quote trio
     6 two doors + practical foot
   =========================================================================== */

/* ---------- 2. THE GROUNDS: you travel through them sideways ---------- */
.grounds{padding:0;height:360vh;position:relative;background:var(--forest-900);
  view-timeline-name:--grounds;view-timeline-axis:block}
.grounds-pin{position:sticky;top:0;height:100vh;overflow:clip;
  display:flex;align-items:center}
/* The canopy continues behind the pan - the leaves ARE the outside, and they
   stop at .threshold. Absolutely positioned, so it takes no part in the pin's
   flex layout; .grounds-pin is sticky and so already a containing block.
   NEVER change overflow:clip above to hidden: hidden makes the pin a scroll
   container, which detaches the --grounds view-timeline and freezes the pan. */
.grounds-foliage{position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none}
.grounds-pin > .grounds-track{position:relative;z-index:1}
.grounds-track{display:flex;align-items:stretch;gap:22px;padding:0 clamp(20px,5vw,64px);
  height:74vh;width:max-content;flex:0 0 auto;will-change:transform;
  animation:g-pan linear both;animation-timeline:--grounds;
  animation-range:cover 21.74% cover 78.26%}
@keyframes g-pan{from{transform:translateX(0)}
  to{transform:translateX(calc(-100% + 100vw))}}

.gshot{position:relative;flex:0 0 auto;width:min(62vw,760px);border-radius:var(--r-box);
  overflow:hidden;background:var(--forest-800);margin:0}
.gshot img{width:100%;height:100%;object-fit:cover}
/* The pan photos are from the BRIGHT shoot and were sitting ON the dark forest
   instead of IN it - the pasted look. Fix the LIGHTING, not the object: seat
   every shot under the same canopy shade the rest of the outside run is in, so
   the pan and the stat band read as one UI. */
.gshot{box-shadow:0 30px 70px -30px rgba(10,14,8,.9),
  inset 0 0 0 1px rgba(197,164,112,.16)}
.gshot img{filter:brightness(.82) saturate(.88) contrast(1.04)}
.gshot::after{content:"";position:absolute;inset:0;pointer-events:none;
  z-index:1;border-radius:inherit;
  background:
    radial-gradient(120% 84% at 50% 18%,rgba(20,26,18,0) 40%,rgba(20,26,18,.46) 100%),
    linear-gradient(180deg,rgba(20,26,18,.30) 0%,rgba(20,26,18,0) 32%)}
.gshot figcaption{z-index:2}
.gshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 22px 20px;
  color:#fff;font-size:14.5px;
  background:linear-gradient(to top,rgba(20,26,18,.86),rgba(20,26,18,0))}
.gshot-lead,.gshot-end{background:none;display:flex;align-items:center;
  width:min(52vw,620px)}
.gshot-lead{width:min(46vw,560px)}
.gshot-copy{color:var(--bone)}
.gshot-copy h2{color:#fff;font-size:clamp(32px,4.4vw,54px);margin-bottom:18px}
.gshot-copy p{color:rgba(230,228,222,.8);font-size:17px;max-width:38ch}
.gshot-end .g-lead{font-size:clamp(24px,3vw,34px);color:#fff;max-width:18ch;
  font-family:'Bricolage Grotesque',sans-serif;line-height:1.12;
  letter-spacing:-.02em;margin-bottom:24px}

/* no scroll-driven animation, or the visitor asked for less motion:
   the same photos become a touch-native snap strip. Nothing is lost. */
@supports not (animation-timeline: view()){
  .grounds{height:auto}
  .grounds-pin{position:static;height:auto;display:block;padding:78px 0}
  .grounds-track{animation:none;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:16px}
  .gshot{scroll-snap-align:center;height:62vh;min-height:380px}
  .gshot-lead,.gshot-end{height:auto;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .grounds{height:auto}
  .grounds-pin{position:static;height:auto;display:block;padding:78px 0}
  .grounds-track{animation:none;height:auto;overflow-x:auto;scroll-snap-type:x mandatory}
  .gshot{scroll-snap-align:center;height:62vh;min-height:380px}
  .gshot-lead,.gshot-end{height:auto;min-height:0}
}

/* ---------- 3. THE THRESHOLD: the one theme switch ---------- */
.threshold{padding:0;position:relative;min-height:min(88vh,760px);overflow:hidden;
  display:flex;align-items:flex-end;background:var(--forest-900)}
.threshold-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.threshold::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--forest-900) 0%,rgba(20,26,18,.42) 34%,
    rgba(20,26,18,.1) 58%,rgba(160,92,43,.22) 82%,var(--bone-lit) 100%)}
.threshold-copy{position:relative;z-index:2;width:100%;max-width:1180px;
  margin:0 auto;padding:0 28px 8px}
.threshold-copy h2{font-size:clamp(34px,5.4vw,68px);color:var(--ink);max-width:16ch;
  letter-spacing:-.028em}

/* ---------- 4. INSIDE A HOME ---------- */
.room{background:var(--bone-lit);padding:84px 0}
.room-head{max-width:640px;margin-bottom:40px}
.room-head h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:14px}
.room-head p{color:var(--ink-soft);font-size:16.5px;max-width:58ch}

/* 4a pair */
.room-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding:0 clamp(20px,3vw,40px)}
.room-pair img{width:100%;height:clamp(300px,42vw,520px);object-fit:cover;
  border-radius:var(--r-box)}

/* 4b split */
.room-split{background:var(--bone)}
.room-split-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;
  align-items:center}
.room-copy h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:16px}
.room-copy p{color:var(--ink-soft);font-size:16.5px;max-width:46ch}
.room-specs{margin-top:30px;display:grid;gap:0}
.room-specs div{display:flex;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.room-specs div:last-child{border-bottom:0}
.room-specs dt{font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft)}
.room-specs dd{font-size:15px;font-weight:500}
.room-stack{display:grid;gap:14px}
.room-stack img{width:100%;height:clamp(190px,22vw,270px);object-fit:cover;
  border-radius:var(--r-box)}

/* 4c strip */
.room-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 clamp(20px,5vw,64px) 18px;-webkit-overflow-scrolling:touch}
.room-scroll img{flex:0 0 auto;width:min(46vw,380px);height:clamp(260px,30vw,400px);
  object-fit:cover;border-radius:var(--r-box);scroll-snap-align:start}
.room-note{margin-top:24px;font-size:15px}
.room-note a{color:var(--oak);font-weight:500;border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease)}
.room-note a:hover{border-color:var(--oak)}

/* 4d plan rows */
.room-plans{background:var(--bone)}
.plan-rows{border-top:1px solid var(--line)}
.plan-row{display:grid;grid-template-columns:1.4fr 1fr .8fr auto;gap:24px;
  align-items:baseline;padding:26px 4px;border-bottom:1px solid var(--line);
  transition:background .22s var(--ease),padding-left .22s var(--ease)}
.plan-row:hover{background:var(--paper);padding-left:18px}
.plan-row-name{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(24px,2.6vw,34px);
  font-weight:600;letter-spacing:-.022em}
.plan-row-spec,.plan-row-size{color:var(--ink-soft);font-size:15.5px}
.plan-row-go{color:var(--oak);font-size:14.5px;font-weight:500;white-space:nowrap}
.plan-row:focus-visible{outline:2px solid var(--oak);outline-offset:2px}

/* 4e what comes with the address */
.room-included{background:var(--bone-lit)}
.room-included-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}
.room-included-grid h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:14px}
.room-included-lead{color:var(--ink-soft);font-size:16.5px;max-width:34ch}
.included-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;
  gap:26px 40px}
.included-list li{display:flex;flex-direction:column;gap:5px;
  padding-top:16px;border-top:2px solid var(--oak)}
.included-list b{font-size:16px;font-weight:600}
.included-list span{color:var(--ink-soft);font-size:14.5px;line-height:1.5}

/* ---------- 5. REVIEWS: asymmetric trio ---------- */
.rev-lead{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:start}
.rev-lead blockquote{margin:0}
.rev-lead blockquote p{font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(26px,3.2vw,40px);line-height:1.2;letter-spacing:-.022em;
  color:var(--ink);font-weight:500}
.rev-lead cite,.rev-small cite{display:block;margin-top:20px;font-style:normal}
.rev-lead cite b,.rev-small cite b{display:block;font-size:15px;font-weight:600}
.rev-lead cite span,.rev-small cite span{font-size:13.5px;color:var(--ink-soft)}
.rev-side{display:grid;gap:26px}
.rev-small{padding-top:22px;border-top:1px solid var(--line)}
.rev-small p{font-size:16.5px;line-height:1.5;color:var(--ink)}
.reviews .rev-scores .s a{color:var(--oak);font-weight:500;font-size:14.5px}

/* ---------- 6. THE PAPERWORK: two doors ---------- */
.doors{background:var(--oak-900);color:var(--bone-lit);padding:96px 0 76px}
.doors-head{max-width:620px;margin-bottom:44px}
.doors-head h2{color:#fff;font-size:clamp(30px,3.8vw,48px);margin-bottom:14px}
.doors-head p{color:rgba(230,228,222,.78);font-size:16.5px;max-width:52ch}
.doors-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.door{display:flex;flex-direction:column;gap:10px;padding:38px 34px 32px;
  border-radius:var(--r-box);border:1px solid rgba(230,228,222,.18);
  background:rgba(255,255,255,.04);
  transition:background .25s var(--ease),border-color .25s var(--ease),
    transform .25s var(--ease)}
.door:hover{background:rgba(255,255,255,.08);border-color:var(--ember);
  transform:translateY(-4px)}
.door:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.door-kicker{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember);font-weight:600}
.door-title{font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(24px,2.6vw,32px);font-weight:600;color:#fff;
  letter-spacing:-.022em;line-height:1.12}
.door-body{color:rgba(230,228,222,.76);font-size:15px;max-width:40ch;line-height:1.55}
.door-go{margin-top:auto;padding-top:18px;color:var(--ember);font-size:15px;
  font-weight:500}
.door-apply{background:rgba(208,138,69,.12);border-color:rgba(208,138,69,.34)}

.doors-foot{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:34px;
  margin-top:56px;padding-top:38px;border-top:1px solid rgba(230,228,222,.16)}
.doors-contact{display:flex;flex-direction:column;gap:7px;font-size:14.5px;
  color:rgba(230,228,222,.76)}
.doors-contact b{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;margin-bottom:4px}
.doors-contact a{color:var(--ember);transition:color .2s var(--ease)}
.doors-contact a:hover{color:var(--oak-300)}
.doors-map{border-radius:var(--r-box);overflow:hidden;min-height:180px;
  background:var(--forest-800)}
.doors-map iframe{width:100%;height:100%;min-height:180px;border:0;display:block}

/* ---------- mobile ---------- */
@media(max-width:900px){
  .grounds{height:auto}
  .grounds-pin{position:static;height:auto;display:block;padding:64px 0}
  .grounds-track{animation:none;height:auto;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:16px}
  .gshot{width:78vw;height:54vh;min-height:340px;scroll-snap-align:center}
  .gshot-lead,.gshot-end{width:82vw;height:auto;min-height:0;padding:8px 0}
  .threshold{min-height:70vh}
  .room{padding:62px 0}
  .room-pair,.room-split-grid,.room-included-grid,.rev-lead,
  .doors-grid,.doors-foot{grid-template-columns:1fr}
  .room-pair img{height:clamp(240px,54vw,360px)}
  .included-list{grid-template-columns:1fr 1fr;gap:22px 26px}
  .plan-row{grid-template-columns:1fr auto;gap:6px 18px;padding:22px 4px}
  .plan-row-size{display:none}
  .doors-map{min-height:240px}
}
@media(max-width:560px){
  .included-list{grid-template-columns:1fr}
  .room-scroll img{width:76vw}
  .plan-row-go{grid-column:1/-1;padding-top:6px}
}

/* ---------- mobile hero: it must fit the viewport, badges included ---------- */
@media(max-width:560px){
  .brand small{display:none}
  .brand b{font-size:20px}
  .brand .mark{width:34px;height:34px;font-size:17px}
  .nav-inner{height:64px}
  .nav-cta{padding:9px 15px;font-size:13px}

  .hero{min-height:min(86svh,700px)}
  .hero .wrap{padding-top:44px;padding-bottom:34px}
  .hero h1{font-size:clamp(34px,9.4vw,44px);margin:10px 0 12px;max-width:none}
  .hero p.lede{font-size:15.5px;line-height:1.5}
  .hero-actions{margin-top:20px;gap:10px}
  .hero-actions .btn{padding:12px 20px;font-size:14px}
  .hero-badges{margin-top:24px;padding-top:16px;gap:14px 26px}
  .hero-badges .stat b{font-size:25px}
  .hero-badges .stat span{font-size:10.5px;letter-spacing:.06em}

  .threshold-copy h2{font-size:clamp(28px,8.6vw,38px)}
  .gshot figcaption{font-size:13px;padding:44px 16px 16px}
}

/* ---------- FLOOR PLANS PAGE ----------
   The four plan drawings are SVG with square viewBoxes (274 / 300 / 330 / 387
   user units). Left unconstrained an inline SVG expands to the full container
   width, which is how this page rendered one plan at full-viewport size. The
   drawing is capped here and the sq-ft caption lives in HTML, not baked into
   the bottom edge of the viewBox where it was being clipped. */
.fp-intro{background:var(--bone-lit);padding:72px 0 8px}
.fp-intro h1{font-size:clamp(34px,4.6vw,56px);margin-bottom:16px}
.fp-intro p{color:var(--ink-soft);font-size:17px;max-width:58ch}
.fp-intro a{color:var(--oak);font-weight:500}

.fp-section{background:var(--bone-lit);padding:44px 0 92px}
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}

.fp-card{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-box);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.fp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

.fp-draw{background:var(--bone-lit);border-bottom:1px solid var(--line);
  padding:26px;display:grid;place-items:center}
.fp-draw svg{width:100%;height:auto;max-width:330px;max-height:330px;display:block}

.fp-meta{padding:24px 26px 26px;display:flex;flex-direction:column;gap:6px}
.fp-meta h2{font-size:clamp(22px,2.2vw,29px)}
.fp-spec{color:var(--ink-soft);font-size:15px}
.fp-size{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:600;
  letter-spacing:-.02em;line-height:1.1;margin-top:6px}
.fp-size span{display:block;font-family:'Instrument Sans',sans-serif;font-size:13px;
  font-weight:400;letter-spacing:0;color:var(--ink-soft);margin-top:3px}
.fp-meta .btn{align-self:flex-start;margin-top:16px}

@media(max-width:900px){
  .fp-grid{grid-template-columns:1fr}
  .fp-intro{padding:56px 0 6px}
  .fp-section{padding:32px 0 66px}
  .fp-draw{padding:20px}
  .fp-draw svg{max-width:300px;max-height:300px}
}
@media(max-width:560px){
  .fp-draw svg{max-width:100%;max-height:none}
}

/* ===========================================================================
   THE PAGE SYSTEM - added 2026-09-14 (six-page architecture rebuild)

   WHY THIS EXISTS: about / amenities / gallery / location / reviews / contact
   were the vendor-template section stack. They opened flat in oak light with no
   entrance, and their nav markup (.nav-links / .brand-c) was never defined in
   this file at all, so it fell back to browser defaults.

   THE IDEA: the site is a WALK, and every page is one leg of it. Each page now
   enters through the same dark forest threshold the home page opens in, and
   lands in the same oak light. Seven pages stop reading as seven tabs and start
   reading as rooms in one building.

   TWO ARCHETYPES, both lifted from index.html. Do not invent a third.
     A. SPINE  - .pg-head dark band -> .pg-body lifts a card into oak light,
                 with a sticky .rail holding context in view.
                 Used by: about, location, reviews, contact.
     B. WALK   - .pg-head dark band -> .dark-run stays outside under foliage ->
                 ONE dark-to-warm switch -> oak light inside. Never two.
                 Used by: amenities, gallery.

   THE LEAVES BELONG TO THE OUTSIDE. canvas.foliage goes in .pg-head and
   .dark-run only. It never crosses the switch into an interior section.
   =========================================================================== */

/* --- A. THE THRESHOLD BAND. Every page enters through this. --- */
.pg-head{position:relative;background:var(--forest-900);color:#fff;
  padding:0;overflow:hidden}
.pg-head > canvas{position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0}
.pg-head > .wrap{position:relative;z-index:1;padding-top:74px;padding-bottom:112px}
.pg-head .eyebrow{color:var(--oak-300)}
.pg-head h1{color:#fff;font-size:clamp(34px,5vw,54px);margin:15px 0 14px;max-width:17ch}
.pg-head .lede{color:rgba(230,228,222,.78);font-size:17px;max-width:56ch}

/* --- the body that receives the lift --- */
.pg-body{background:var(--bone-lit);padding:0 0 96px}

/* --- the two-column spine. Main column + sticky rail. --- */
.spine{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:40px;
  align-items:start;margin-top:-72px}
.spine-main{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-box);box-shadow:var(--shadow);padding:38px 36px}
.spine-main > h2{font-size:clamp(26px,3.2vw,38px);margin:0 0 14px}
.spine-main > p{color:var(--ink-soft);font-size:17px}

/* the rail is OAK-900, not forest. Warm dark reads as "inside", which keeps the
   one-switch rule intact; forest-800 makes it vanish into the band above. */
.rail{position:sticky;top:96px;background:var(--oak-900);color:var(--bone);
  border-radius:var(--r-box);padding:28px 26px;box-shadow:var(--shadow-lift)}
.rail h3{color:#fff;font-size:18px;margin-bottom:18px}
.rail dl{display:grid;gap:15px;margin:0}
.rail dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oak-300);font-weight:600}
.rail dd{margin:3px 0 0;font-size:15.5px;color:var(--bone);line-height:1.5}
.rail dd a{color:var(--ember);font-weight:500}
.rail .rail-cta{display:block;margin-top:24px;width:100%}
.rail hr{border:0;border-top:1px solid var(--line-dark);margin:20px 0}

/* --- B. THE DARK RUN. Stays outside, under the canopy. --- */
.dark-run{position:relative;background:var(--forest-900);color:#fff;overflow:hidden}
.dark-run > canvas{position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0}
.dark-run > .wrap{position:relative;z-index:1;padding-top:78px;padding-bottom:90px}
.dark-run h2{color:#fff;font-size:clamp(28px,3.6vw,42px);max-width:18ch}
.dark-run .lede{color:rgba(230,228,222,.74);font-size:16.5px;max-width:52ch;margin-top:14px}
.dark-run .eyebrow{color:var(--oak-300)}

/* --- THE ONE SWITCH. Dark to warm, once per page. --- */
.switch{position:relative;background:var(--bone-lit);padding:74px 0 10px;
  text-align:center}
.switch::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;
  background:linear-gradient(to bottom,var(--forest-900),transparent);
  opacity:.14;pointer-events:none}
.switch .eyebrow{color:var(--oak)}
.switch h2{font-size:clamp(28px,4vw,46px);margin:12px auto 0;max-width:20ch}
.switch p{color:var(--ink-soft);font-size:17px;max-width:56ch;margin:14px auto 0}

/* --- a card stack that works in either archetype --- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));
  gap:18px;margin-top:34px}
.tile{border-radius:var(--r-box);padding:24px 22px}
.tile svg{width:26px;height:26px;fill:none;stroke-width:1.5;margin-bottom:14px}
.tile h3{font-size:17px;margin-bottom:7px}
.tile p{font-size:14.5px;line-height:1.6}
/* on dark */
.dark-run .tile{background:rgba(230,228,222,.055);border:1px solid var(--line-dark)}
.dark-run .tile svg{stroke:var(--ember)}
.dark-run .tile h3{color:#fff}
.dark-run .tile p{color:rgba(230,228,222,.72)}
/* on light */
.lit .tile{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.lit .tile svg{stroke:var(--oak)}
.lit .tile p{color:var(--ink-soft)}
.lit{padding:0 0 90px}

/* --- the checkmark list the old pages used but never styled --- */
.ticks{list-style:none;display:grid;gap:15px;margin:24px 0 0;padding:0}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:13px;align-items:start;
  font-size:16px;color:var(--ink-soft)}
.ticks li i{display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--oak);color:#fff;
  font-style:normal;font-size:12px;font-weight:700;margin-top:3px}
.ticks li b{color:var(--ink)}

@media (max-width:900px){
  .spine{grid-template-columns:1fr;gap:24px;margin-top:-56px}
  .rail{position:static}
  .pg-head > .wrap{padding-top:56px;padding-bottom:94px}
  .spine-main{padding:26px 22px}
  .dark-run > .wrap{padding-top:58px;padding-bottom:66px}
  .switch{padding-top:56px}
}

/* --- STACKING: .pg-head is positioned (it holds the canvas), so it paints over
   a STATIC .pg-body and swallowed the top of the lifted card. The lift only
   works if the receiving section wins the stacking order. --- */
.pg-body,.lit,.switch{position:relative;z-index:1}

/* --- the carousel's sizing lived under `.about-grid .shots`, a container the
   rebuild removed. Unscoped, .shots has no position or height and its
   absolutely-positioned caption/dots escape to the viewport. Re-homed here so
   the carousel works anywhere in the page system. --- */
.spine-main .shots,.lit .shots{position:relative;margin:0;
  border-radius:var(--r-box);overflow:hidden;min-height:min(52vh,420px);
  background:var(--bone)}
.spine-main .shots-frame,.lit .shots-frame{position:absolute;inset:0}
.spine-main .shots img,.lit .shots img{position:absolute;inset:0;width:100%;
  height:100%;min-height:0;object-fit:cover;opacity:0;transition:opacity .7s ease}
.spine-main .shots img.on,.lit .shots img.on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .spine-main .shots img,.lit .shots img{transition:none}
}

/* ===========================================================================
   THE FOREST GROUND - 2026-09-14, his brief: "use all white space as theme
   space, so green with floating leaves", "outside of the portal", and
   "it should be seamless as if the page was built inside the forest ui".

   THE MECHANISM, and why it is seam-proof: no section paints its own
   background any more. There is ONE fixed, full-viewport canopy behind the
   whole document, and every section is transparent on top of it. Sections
   cannot seam against each other because there are no section edges left to
   seam - the ground is continuous and does not scroll with the content.
   The per-band canvases inside .pg-head / .dark-run are switched OFF here for
   the same reason: two canopies would beat against each other.

   Content cards stay oak-light. They read as lit windows in the trees, which
   is also what keeps body copy legible - no dark-on-dark anywhere.
   OPT OUT with <body data-ground="off"> (portal.html, owner.html).
   =========================================================================== */
body:not([data-ground="off"]){background:var(--forest-900);color:var(--bone)}

canvas.page-ground{
  position:fixed;inset:0;width:100vw;height:100vh;
  display:block;z-index:0;pointer-events:none;
}
/* lift every child above the fixed canopy. MUST NOT touch header.nav: setting
   position:relative here overrode header.nav{position:sticky} and the nav
   stopped sticking (caught in the browser, not in review). */
body:not([data-ground="off"]) > *:not(canvas.page-ground):not(header.nav){position:relative;z-index:1}
body:not([data-ground="off"]) > header.nav{z-index:50}

/* every light ground goes transparent - the canopy shows through all of it */
/* OUTSIDE ONLY. The canopy is the ground for the outside run; INSIDE stays
   cream. His correction 2026-09-14: the interior room sections had gone dark,
   so "The kitchen is the first room you stand in" was rendering on forest -
   a kitchen is indoors. The one-switch thesis is restored: leaves and forest
   outside, cream light inside, exactly one transition between them. */
body:not([data-ground="off"]) :is(
  .pg-head,.dark-run,.stat-band,.grounds,.pg-body,.lit,.switch,.bk-body,.st-body
){background:transparent}

/* INSIDE. Cream ground, no canopy, no leaves. */
body:not([data-ground="off"]) :is(
  .room,.room-split,.room-plans,.room-included,.threshold,
  .fp-intro,.fp-section,.amen,.reviews,.resident,#gallery
){background:var(--bone-lit);color:var(--ink)}
body:not([data-ground="off"]) :is(
  .room,.room-split,.room-plans,.room-included,
  .fp-intro,.fp-section,.amen,.reviews,.resident,#gallery
) :is(h1,h2,h3,b,strong){color:var(--ink)}
body:not([data-ground="off"]) :is(
  .room,.room-split,.room-plans,.room-included,
  .fp-intro,.fp-section,.amen,.reviews,.resident,#gallery
) p{color:var(--ink-soft)}

/* the per-band canopies stand down; the page ground carries the leaves now */
body:not([data-ground="off"]) :is(.pg-head,.dark-run,.stat-band) > canvas.foliage{display:none}
/* .switch was a dark-to-warm edge; with one continuous ground there is no edge */
body:not([data-ground="off"]) .switch::before{display:none}

/* text that sits DIRECTLY on the ground (not inside a card) reads light */
body:not([data-ground="off"]) :is(.switch,.fp-intro,.sec-head) :is(h1,h2,h3){color:#fff}
body:not([data-ground="off"]) :is(.switch,.fp-intro,.sec-head) p{color:rgba(230,228,222,.78)}
body:not([data-ground="off"]) :is(.switch,.fp-intro,.sec-head) .eyebrow{color:var(--oak-300)}
body:not([data-ground="off"]) .in-note{color:rgba(230,228,222,.66)}

/* CARDS ARE THE LIT WINDOWS. Explicit, so nothing above leaks into them. */
body:not([data-ground="off"]) :is(.spine-main,.lit .tile,.fp-card,.plan,.amen-card,.rev,.bk-card){
  background:var(--paper);color:var(--ink)}
body:not([data-ground="off"]) :is(.spine-main,.lit .tile,.fp-card,.plan,.amen-card,.rev,.bk-card)
  :is(h1,h2,h3,b,strong){color:var(--ink)}
body:not([data-ground="off"]) :is(.spine-main,.lit .tile,.fp-card,.amen-card,.rev) p{color:var(--ink-soft)}
body:not([data-ground="off"]) .lit .tile svg{stroke:var(--oak)}
body:not([data-ground="off"]) .fp-draw{background:var(--bone-lit)}

/* the lift is now purely compositional - there is no band to lift out of */
body:not([data-ground="off"]) .spine{margin-top:34px}
body:not([data-ground="off"]) .pg-head > .wrap{padding-bottom:20px}

/* ===========================================================================
   FLOATING - 2026-09-14. His words: "theres still lines i can see very clear
   i want almost floating words and cards no borders".

   Every hard 1px edge comes off. Depth is carried by SHADOW and by the ground
   showing through, never by a drawn rule. A border is a statement that a thing
   has an edge; he wants the cards to read as light resting on the page instead.
   Section-boundary rules go too - those were the "very clear lines".
   =========================================================================== */

/* 1. CARDS: no borders. Shadow alone does the lifting. */
:is(.spine-main,.tile,.fp-card,.plan,.amen-card,.rev,.bk-card,.loc-map,
    .portal-card,.rail,.ex,.shots,.gallery-shots){border:0 !important}
:is(.spine-main,.fp-card,.plan,.amen-card,.rev,.bk-card){
  box-shadow:0 26px 60px -34px rgba(20,26,18,.34)}
.lit .tile,.amen-card{box-shadow:0 18px 44px -28px rgba(20,26,18,.26)}
.gshot{box-shadow:0 34px 80px -34px rgba(10,14,8,.9) !important}

/* 2. SECTION BOUNDARY RULES: the visible lines. All of them off. */
:is(section,.room,.room-split,.room-plans,.room-included,.resident,
    .fp-section,.fp-intro,.amen,.reviews,#gallery,.doors,.site-foot,footer){
  border-top:0;border-bottom:0}
.fp-draw{border-bottom:0}
.plan-row{border-bottom:0}

/* 3. THE NAV HAIRLINE. Condensed state keeps the blur, drops the rule. */
@keyframes nav-lift{to{background:rgba(20,26,18,.86);border-bottom-color:transparent}}
header.nav{border-bottom-color:transparent !important}

/* 4. INPUTS: floor, not box. A hairline underline only, and only on the
      edge that tells you where to type. */
/* every input on the site, not just the two I happened to rebuild - status and
   availability kept boxed fields while contact had underlines, which is exactly
   the kind of split the design-system pass exists to prevent. Portal and owner
   opt out: dense dashboard forms read better boxed. */
body:not([data-ground="off"]) :is(input,select,textarea){
  border:0;border-bottom:1px solid rgba(30,36,25,.16);border-radius:0;
  background:transparent;padding-left:2px;padding-right:2px}
body:not([data-ground="off"]) :is(input,select,textarea):focus{
  outline:0;border-bottom-color:var(--oak);box-shadow:0 1px 0 0 var(--oak)}

/* 5. RAIL dividers: space, not lines. */
.rail hr{border-top-color:transparent;margin:22px 0}
.score{border-bottom:0;padding:9px 0}
.quote{border-top:0;padding:20px 0}

/* --- FLOATING, second pass. The lines he could still see: the 2px oak rule
   over every "What comes with the address" item, the outlined .door cards, and
   the remaining divider rules. Depth now comes from weight and space only. --- */
.included-list li{border-top:0;padding-top:0}
.included-list b{color:var(--ink)}
.included-list{gap:30px 44px}

:is(.door,.door-apply,.doors-foot,.plan-rows,.plan-row,.rev-small,.resident,
    .amen-card,.hero-badges .stat,.fp-draw){border:0 !important}
.door{background:rgba(230,228,222,.05)}
.door-apply{background:rgba(208,138,69,.12)}
.doors-foot{padding-top:0;margin-top:48px}

/* the last rule standing: the hairline over the review scores row */
.rev-scores{border-top:0 !important;padding-top:0;margin-top:56px}

/* --- HERO: content to the BOTTOM LEFT of the frame. 2026-09-14, his note.
   The block read as vertically centred because padding-top:104px inflated it
   inside an align-items:flex-end flex parent - the padding, not the alignment,
   was holding it off the floor. Drop the top padding and it settles where the
   flex-end was always trying to put it. Left edge stays on the .wrap column so
   the headline lines up with the brand mark in the nav above it. --- */
.hero .wrap{padding-top:32px;padding-bottom:58px}
.hero h1{margin:10px 0 14px}
.hero-actions{margin-top:24px}
/* the side scrim has to reach further now that the type sits lower */
.hero::after{background:
  linear-gradient(90deg,rgba(20,26,18,.78) 0%,rgba(20,26,18,.12) 62%),
  linear-gradient(0deg,rgba(20,26,18,.55) 0%,transparent 42%)}

/* THE ACTUAL CAUSE of the hero reading as vertically centred: .hero inherits
   the generic section padding, 92px top AND bottom. Symmetric padding inside an
   align-items:flex-end parent centres the content no matter what the alignment
   says - the flex-end had nothing left to do. Zero it; .hero .wrap carries its
   own padding now. (Measured live: heroPadTop 92px / heroPadBottom 92px,
   gapAbove 211 / gapBelow 92 - not inferred from the stylesheet.) */
.hero{padding-top:0;padding-bottom:0}

/* --- THE NAV CARRIES THE CANOPY. It is opaque and sticky, so it hides the
   fixed page ground; without its own layer it reads as a solid bar laid on top
   of the forest rather than a part of it. The canvas sits between the bar's
   background and its content. overflow:hidden clips the leaves to the bar. --- */
header.nav{overflow:hidden}
header.nav > canvas.nav-foliage{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none}
header.nav > .nav-inner{position:relative;z-index:1}

/* --- HERO, the horizontal half of "bottom left". The vertical was fixed by
   zeroing .hero's inherited 92px section padding; the text was STILL sitting
   308px in from the left, because .hero .wrap is a max-width:1180px column
   centred in the viewport. Measured: contentLeft 561px in a 1796px frame.
   For the hero only, break out of that column and sit in the actual corner. --- */
.hero .wrap{max-width:none;width:100%;
  padding-left:clamp(28px,4.4vw,72px);padding-right:clamp(28px,4.4vw,72px)}
.hero h1{max-width:18ch}
.hero p.lede{max-width:46ch}
/* the side scrim only needs to cover the corner now, not half the frame */
.hero::after{background:
  linear-gradient(90deg,rgba(20,26,18,.80) 0%,rgba(20,26,18,.34) 34%,rgba(20,26,18,.06) 60%),
  linear-gradient(0deg,rgba(20,26,18,.62) 0%,transparent 46%)}