/* Green Briar Garden Homes — site styles
   Palette sampled from the Green Briar logo. */

:root{
  --green:        #224632;
  --green-dark:   #16301f;
  --green-mid:    #2f5e43;
  --green-soft:   #eaf0ea;
  --cream:        #eddec4;
  --cream-lt:     #f7efe0;
  --paper:        #fcfdfd;
  --ink:          #1a2620;
  --ink-mid:      #4a5a51;
  --ink-soft:     #7d8a83;
  --line:         #dfe5df;
  --gold:         #b58b3e;
  --shadow-sm: 0 1px 2px rgba(26,38,32,.06), 0 2px 8px rgba(26,38,32,.05);
  --shadow-md: 0 4px 12px rgba(26,38,32,.08), 0 12px 32px rgba(26,38,32,.08);
  --shadow-lg: 0 8px 24px rgba(26,38,32,.12), 0 24px 64px rgba(26,38,32,.12);
  --r: 10px;
  --r-lg: 16px;
  --wrap: 1200px;
  --nav-h: 76px;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--green); }
button{ font:inherit; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2.4rem,5.2vw,4rem); }
h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); }
p{ margin:0 0 1.1em; }
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap-narrow{ width:min(100% - 2.5rem, 900px); margin-inline:auto; }
.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin:0 0 .9rem;
}
.lede{ font-size:1.1rem; color:var(--ink-mid); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:var(--r); border:1.5px solid transparent;
  font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; transition:.18s ease; white-space:nowrap;
}
.btn-primary{ background:var(--green); color:#fff; }
.btn-primary:hover{ background:var(--green-dark); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; color:var(--green); border-color:var(--green); }
.btn-outline:hover{ background:var(--green); color:#fff; }
.btn-cream{ background:var(--cream); color:var(--green-dark); }
.btn-cream:hover{ background:#e2cfad; }
.btn-ghost{ background:transparent; color:var(--ink-mid); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.btn-sm{ padding:.55rem 1rem; font-size:.72rem; }
.btn-block{ width:100%; }

/* ---------- specials banner ---------- */
#specials-bar{ background:var(--green-dark); color:var(--cream-lt); font-size:.9rem; }
#specials-bar .wrap{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:.7rem 0; text-align:center; flex-wrap:wrap;
}
#specials-bar strong{ color:#fff; }
#specials-bar a.sp-cta{
  color:var(--cream); text-decoration:underline; text-underline-offset:3px;
  font-weight:600; white-space:nowrap;
}
#specials-bar .sp-close{
  background:none; border:0; color:var(--cream); font-size:1.1rem; line-height:1;
  cursor:pointer; padding:.25rem .4rem; opacity:.7;
}
#specials-bar .sp-close:hover{ opacity:1; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(252,253,253,.96);
  border-bottom:1px solid var(--line);
}
/* The frosted effect lives on a pseudo-element rather than the header itself.
   backdrop-filter makes an element the containing block for its fixed-position
   descendants, and the mobile menu drawer is one: on the header it was being
   sized and placed against the header's own 120px box instead of the viewport,
   so the drawer opened as a stub with its links spilling out of it, and its
   parked position widened every page. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  backdrop-filter:saturate(160%) blur(10px);
}
.site-header .wrap{
  min-height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:52px; width:auto; }
.nav{ display:flex; align-items:center; gap:.25rem; }
.nav a{
  padding:.6rem .78rem; border-radius:8px; text-decoration:none; color:var(--ink);
  font-size:.76rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  transition:.15s ease; white-space:nowrap;
}
.nav a:hover{ background:var(--green-soft); color:var(--green); }
.nav a.is-active{ color:var(--green); background:var(--green-soft); }
.nav a.nav-apply{ background:var(--green); color:#fff; margin-left:.5rem; }
.nav a.nav-apply:hover{ background:var(--green-dark); color:#fff; }
.nav-toggle{
  display:none; background:none; border:1.5px solid var(--line); border-radius:8px;
  padding:.5rem .6rem; cursor:pointer; color:var(--green);
}
.nav-toggle svg{ display:block; }

@media (max-width:1080px){
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,340px); background:var(--paper);
    flex-direction:column; align-items:stretch; gap:.15rem; padding:5.5rem 1.25rem 2rem;
    box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .28s ease,
    visibility 0s linear .28s; overflow-y:auto;
    /* Parked off-screen the drawer still widened the page, so every page could be
       dragged sideways on a phone — and its links stayed focusable behind the
       closed menu. Taking it out of layout until it opens fixes both. */
    visibility:hidden;
  }
  .nav.is-open{ transform:translateX(0); visibility:visible; transition-delay:0s; }

  .nav a{ padding:.95rem .8rem; font-size:.85rem; border-bottom:1px solid var(--line); border-radius:0; }
  .nav a.nav-apply{ margin:1rem 0 0; border-radius:var(--r); text-align:center; justify-content:center; border-bottom:0; }
  .nav-close{
    position:absolute; top:1.25rem; right:1.25rem; background:none; border:0;
    font-size:1.6rem; line-height:1; cursor:pointer; color:var(--ink-mid);
  }
  .nav-scrim{ position:fixed; inset:0; background:rgba(26,38,32,.45); z-index:59; }
}
@media (min-width:1081px){ .nav-close{ display:none; } }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:min(78vh,660px); display:grid; place-items:center; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,38,25,.62) 0%, rgba(18,38,25,.52) 40%, rgba(18,38,25,.78) 100%);
}
.hero-inner{ position:relative; text-align:center; color:#fff; padding:5rem 0 3rem; }
.hero-inner h1{ color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.3); margin-bottom:.35em; }
.hero-tagline{
  font-size:clamp(1rem,2vw,1.35rem); color:var(--cream); letter-spacing:.02em;
  max-width:34ch; margin:0 auto 2.5rem; text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.hero-boxes{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
  width:min(100% - 2.5rem, 860px); margin:0 auto;
}
.hero-box{
  background:rgba(252,253,253,.95); border-radius:var(--r-lg); padding:1.6rem 1rem;
  text-decoration:none; color:var(--green-dark); text-align:center;
  transition:.2s ease; box-shadow:var(--shadow-md); border:1px solid rgba(255,255,255,.6);
}
.hero-box:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); background:#fff; }
.hero-box svg{ margin:0 auto .6rem; display:block; color:var(--green); }
.hero-box span{
  display:block; font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.hero-box small{ display:block; font-size:.78rem; color:var(--ink-soft); text-transform:none; letter-spacing:0; margin-top:.2rem; font-weight:400; }
@media (max-width:700px){
  .hero-boxes{ grid-template-columns:1fr; gap:.6rem; }
  /* icon on the left spanning both text rows, label over sub-label */
  .hero-box{
    padding:.95rem 1.1rem; display:grid; grid-template-columns:auto 1fr;
    column-gap:.9rem; align-items:center; text-align:left;
  }
  .hero-box svg{ margin:0; grid-row:1 / span 2; }
  .hero-box span{ font-size:.78rem; }
  .hero-box small{ margin-top:.05rem; }
  #specials-bar{ font-size:.8rem; }
  #specials-bar .wrap{ padding:.55rem 0; gap:.5rem; }
}

/* ---------- generic sections ---------- */
.section{ padding:clamp(3.5rem,7vw,6.5rem) 0; }
.section-tint{ background:var(--cream-lt); }
.section-green{ background:var(--green); color:var(--cream-lt); }
.section-green h2,.section-green h3{ color:#fff; }
.section-green .eyebrow{ color:var(--cream); }
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.split.reverse .split-media{ order:-1; }
.split-media img{ border-radius:var(--r-lg); box-shadow:var(--shadow-md); aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; }
@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
}

/* Linked "box" CTA used under the home page sections */
.link-box{
  display:inline-flex; align-items:center; gap:.9rem; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--green);
  border-radius:var(--r); padding:1rem 1.5rem 1rem 1.25rem; box-shadow:var(--shadow-sm);
  transition:.18s ease; color:var(--ink);
}
.link-box:hover{ transform:translateX(4px); box-shadow:var(--shadow-md); border-left-color:var(--gold); }
.link-box b{ display:block; font-size:.95rem; color:var(--green-dark); }
.link-box small{ color:var(--ink-soft); font-size:.82rem; }
.link-box .arrow{ margin-left:auto; color:var(--green); font-size:1.2rem; }

/* ---------- floor plan cards ---------- */
.fp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1.5rem; }
.fp-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s ease; display:flex; flex-direction:column;
}
.fp-card:hover{ box-shadow:var(--shadow-md); }
.fp-card.is-unavailable{ opacity:.62; }
.fp-card-media{ position:relative; background:var(--cream-lt); aspect-ratio:16/11; }
.fp-card-media img{ width:100%; height:100%; object-fit:contain; padding:.75rem; }
/* A real photograph fills the frame; a floor plan drawing needs to breathe. */
.fp-card-media.has-photo{ background:var(--cream-lt); }
.fp-card-media.has-photo img{ object-fit:cover; padding:0; }
.fp-badge{
  position:absolute; top:.75rem; left:.75rem; background:var(--green); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.35rem .65rem; border-radius:99px;
}
.fp-badge.gray{ background:var(--ink-soft); }
.fp-badge.gold{ background:var(--gold); }
.fp-card-body{ padding:1.25rem 1.35rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.fp-card h3{ margin:0 0 .15rem; font-size:1.4rem; }
.fp-sub{ font-size:.85rem; color:var(--ink-soft); margin:0 0 1rem; }
.fp-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:0 0 1.1rem;
  padding:.85rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.fp-stats div{ text-align:center; }
.fp-stats b{ display:block; font-size:1.02rem; color:var(--green-dark); font-family:var(--serif); }
.fp-stats span{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.fp-actions{ display:flex; gap:.55rem; margin-top:auto; }
.fp-actions .btn{ flex:1; }

/* units dropdown inside a floorplan card */
.unit-toggle{
  width:100%; background:var(--green-soft); border:0; border-radius:var(--r);
  padding:.7rem 1rem; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; color:var(--green-dark); font-size:.82rem; font-weight:600; margin-bottom:.85rem;
}
.unit-toggle:hover{ background:#dde8de; }
.unit-toggle .chev{ transition:transform .2s ease; }
.unit-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.unit-list{ list-style:none; margin:0 0 1rem; padding:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.unit-list[hidden]{ display:none; }
.unit-row{
  display:grid; grid-template-columns:1fr auto; gap:.75rem; align-items:center;
  padding:.8rem 1rem; border-bottom:1px solid var(--line); background:#fff;
}
.unit-row:last-child{ border-bottom:0; }
.unit-row:hover{ background:var(--cream-lt); }
.unit-row-main b{ display:block; font-size:.92rem; color:var(--green-dark); }
.unit-row-main small{ display:block; color:var(--ink-soft); font-size:.78rem; }
.unit-row .rent{ font-family:var(--serif); font-size:1.15rem; color:var(--green-dark); text-align:right; }
.unit-row .rent small{ display:block; font-family:var(--sans); font-size:.68rem; color:var(--ink-soft); }

/* ---------- filter bar ---------- */
.filters{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.1rem 1.25rem; box-shadow:var(--shadow-sm); margin-bottom:2rem;
}
.filter-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.field label,.field .flabel{
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  font:inherit; font-size:.9rem; padding:.6rem .7rem; border:1.5px solid var(--line);
  border-radius:8px; background:#fff; color:var(--ink); min-width:0; width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--green); outline:none; }
.chipset{ display:flex; gap:.35rem; flex-wrap:wrap; }
.chip{
  border:1.5px solid var(--line); background:#fff; border-radius:99px; padding:.45rem .9rem;
  font-size:.8rem; cursor:pointer; color:var(--ink-mid); transition:.15s ease; user-select:none;
}
.chip:hover{ border-color:var(--green); }
.chip.is-on{ background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }
.range-pair{ display:flex; align-items:center; gap:.4rem; }
.range-pair span{ color:var(--ink-soft); }
.filters-more{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.filters-more[hidden]{ display:none; }
.filters-more .filter-row{ gap:1.5rem; }
.filters-foot{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);
}
.switch{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.85rem; color:var(--ink-mid); }
.switch input{ width:auto; accent-color:var(--green); width:17px; height:17px; }
.viewtoggle{ display:inline-flex; border:1.5px solid var(--line); border-radius:8px; overflow:hidden; }
.viewtoggle button{
  background:#fff; border:0; padding:.5rem .85rem; cursor:pointer; color:var(--ink-soft);
  font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:.4rem;
}
.viewtoggle button.is-on{ background:var(--green); color:#fff; }
.result-count{ font-size:.88rem; color:var(--ink-mid); }
.result-count b{ color:var(--green-dark); }

/* list view */
.fp-list{ display:flex; flex-direction:column; gap:1rem; }
.fp-list .fp-card{ flex-direction:row; }
.fp-list .fp-card-media{ width:270px; flex-shrink:0; aspect-ratio:auto; }
@media (max-width:760px){
  .fp-list .fp-card{ flex-direction:column; }
  .fp-list .fp-card-media{ width:100%; aspect-ratio:16/11; }
}
.empty-state{
  text-align:center; padding:4rem 1rem; border:2px dashed var(--line); border-radius:var(--r-lg); color:var(--ink-soft);
}

/* ---------- unit detail ---------- */
.unit-hero{ display:grid; grid-template-columns:1.55fr 1fr; gap:2.5rem; align-items:start; }
@media (max-width:900px){ .unit-hero{ grid-template-columns:1fr; gap:1.75rem; } }
.slider{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--cream-lt); box-shadow:var(--shadow-md); }
.slider-track{ display:flex; transition:transform .35s cubic-bezier(.4,0,.2,1); }
.slider-track figure{ margin:0; min-width:100%; position:relative; }
.slider-track img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.slider-track figure.is-plan img{ object-fit:contain; background:var(--cream-lt); padding:1rem; }
.slider-track figcaption{
  position:absolute; bottom:0; left:0; right:0; padding:2.5rem 1.25rem .9rem;
  background:linear-gradient(transparent,rgba(22,48,31,.8)); color:#fff; font-size:.85rem;
}
.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(252,253,253,.92);
  border:0; width:44px; height:44px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  color:var(--green-dark); box-shadow:var(--shadow-sm); font-size:1.3rem; line-height:1;
}
.slider-nav:hover{ background:#fff; }
.slider-nav.prev{ left:.85rem; } .slider-nav.next{ right:.85rem; }
.slider-dots{ display:flex; gap:.4rem; justify-content:center; padding:.85rem; }
.slider-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:var(--line); cursor:pointer; padding:0; }
.slider-dots button.is-on{ background:var(--green); width:22px; border-radius:99px; }
.unit-panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--shadow-sm); }
.unit-panel h1{ font-size:2rem; margin-bottom:.1em; }
.unit-panel .plan-name{ color:var(--gold); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.spec-list{ list-style:none; margin:1.35rem 0; padding:0; }
.spec-list li{
  display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0;
  border-bottom:1px solid var(--line); font-size:.9rem;
}
.spec-list li:last-child{ border-bottom:0; }
.spec-list span{ color:var(--ink-soft); }
.spec-list b{ color:var(--green-dark); font-weight:600; text-align:right; }
.tag-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 0; }
.tag{
  background:var(--green-soft); color:var(--green-dark); border-radius:99px;
  padding:.3rem .75rem; font-size:.75rem; font-weight:500;
}
.unit-cta{ display:grid; gap:.6rem; margin-top:1.4rem; }

/* rent estimator */
.estimator{ background:var(--cream-lt); border-radius:var(--r-lg); padding:1.5rem; margin-top:1.5rem; }
.estimator h3{ font-size:1.15rem; margin-bottom:.15em; }
.estimator .hint{ font-size:.82rem; color:var(--ink-soft); margin-bottom:1.1rem; }
.est-group{ margin-bottom:1rem; }
.est-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:1.2rem; padding-top:1.1rem; border-top:2px solid var(--green);
}
.est-total .amt{ font-family:var(--serif); font-size:2rem; color:var(--green-dark); }
.est-note{ font-size:.75rem; color:var(--ink-soft); margin-top:.6rem; }

/* "let's get you moved in" */
.movein{ background:var(--green); color:var(--cream-lt); border-radius:var(--r-lg); padding:clamp(1.75rem,4vw,2.75rem); }
.movein h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); }
.movein-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin-top:1.5rem; }
.movein-grid h4{ font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); margin:0 0 .35rem; font-weight:700; }
.movein-grid p{ margin:0; color:#fff; }
.movein-grid a{ color:#fff; }

/* ---------- site map ---------- */
.map-shell{
  position:relative; background:var(--cream-lt); border-radius:var(--r-lg);
  overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.map-shell svg{ display:block; width:100%; height:auto; }
/* Hotspots sit in the artwork's own coordinate space, so they scale with it. */
.bldg{ cursor:pointer; }
.bldg rect.hit{
  fill:rgba(34,70,50,0); stroke:rgba(34,70,50,0); stroke-width:3; transition:.15s ease;
}
.bldg:hover rect.hit{ fill:rgba(34,70,50,.18); stroke:var(--green); }
.bldg.is-sel rect.hit{ fill:rgba(34,70,50,.32); stroke:var(--green); stroke-width:4; }
.bldg.has-avail rect.hit{ stroke:rgba(181,139,62,.9); }
.bldg circle.badge{ fill:var(--gold); stroke:#fff; stroke-width:2.5; }
.bldg text.badge-n{
  font-family:var(--sans); font-size:16px; font-weight:700; fill:#fff; pointer-events:none;
}
.bldg:focus-visible rect.hit{ fill:rgba(34,70,50,.28); stroke:var(--gold); stroke-width:4; }
.map-legend{
  display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1rem;
  font-size:.85rem; color:var(--ink-mid); align-items:center;
}
.map-legend span{ display:inline-flex; align-items:center; gap:.45rem; }
.swatch{ width:15px; height:15px; border-radius:3px; border:2px solid var(--green); background:rgba(34,70,50,.18); }
.swatch.sel{ background:rgba(34,70,50,.5); }
.swatch.avail{ background:var(--gold); border-color:var(--gold); border-radius:50%; }
#map-note{ margin-left:auto; font-weight:600; color:var(--green-dark); }
.map-detail{ margin-top:1.75rem; }
.map-detail h3{ margin-bottom:.3rem; }

/* ---------- gallery ---------- */
.gal-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.gal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.gal-item{
  border:0; padding:0; background:var(--cream-lt); border-radius:var(--r); overflow:hidden;
  cursor:zoom-in; position:relative; box-shadow:var(--shadow-sm);
}
.gal-item img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .35s ease; }
.gal-item:hover img{ transform:scale(1.05); }
.gal-cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.75rem .9rem .7rem; text-align:left;
  background:linear-gradient(transparent,rgba(22,48,31,.82)); color:#fff; font-size:.82rem;
}
.lightbox{ position:fixed; inset:0; background:rgba(12,22,16,.94); z-index:200; display:grid; place-items:center; padding:2rem 1rem; }
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:min(96vw,1400px); max-height:86vh; width:auto; border-radius:var(--r); }
.lightbox .lb-cap{ color:var(--cream); text-align:center; margin-top:1rem; font-size:.9rem; }
.lb-btn{
  position:absolute; background:rgba(252,253,253,.14); border:0; color:#fff; width:48px; height:48px;
  border-radius:50%; cursor:pointer; font-size:1.4rem; display:grid; place-items:center;
}
.lb-btn:hover{ background:rgba(252,253,253,.28); }
.lb-close{ top:1.25rem; right:1.25rem; }
.lb-prev{ left:1.25rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.25rem; top:50%; transform:translateY(-50%); }

/* ---------- resources ---------- */
.res-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:900px){ .res-layout{ grid-template-columns:1fr; } }
.res-side{ position:sticky; top:calc(var(--nav-h) + 1.5rem); }
.res-links{ list-style:none; margin:0 0 2rem; padding:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
.res-links li{ border-bottom:1px solid var(--line); }
.res-links li:last-child{ border-bottom:0; }
.res-links a{
  display:flex; align-items:center; gap:.8rem; padding:.95rem 1.15rem; text-decoration:none;
  color:var(--ink); font-size:.9rem; font-weight:500; transition:.15s ease;
}
.res-links a:hover{ background:var(--green-soft); color:var(--green); }
.res-links a .ic{ color:var(--green); flex-shrink:0; }
.res-links a .arrow{ margin-left:auto; color:var(--ink-soft); }
.res-links a.is-pending{ color:var(--ink-soft); cursor:default; }
.res-links a.is-pending:hover{ background:#fafbfa; color:var(--ink-soft); }
.pending-pill{
  margin-left:auto; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  background:var(--cream); color:#8a6a26; padding:.2rem .5rem; border-radius:99px;
}
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; padding:1.1rem 2rem 1.1rem 0; font-weight:600; color:var(--green-dark);
  list-style:none; position:relative; font-size:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.25rem; top:50%; transform:translateY(-50%); font-size:1.4rem; color:var(--green); font-weight:400; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ margin:0 0 1.2rem; color:var(--ink-mid); }
.attractions{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.attraction{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.25rem; }
.attraction h4{ font-family:var(--sans); font-size:.95rem; margin:0 0 .2rem; color:var(--green-dark); }
.attraction p{ margin:0; font-size:.84rem; color:var(--ink-soft); }

/* ---------- forms ---------- */
.contact-layout{
  display:grid; grid-template-columns:1.6fr 1fr;
  gap:clamp(2rem,5vw,3.5rem); align-items:start;
}
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }

.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,4vw,2.5rem); box-shadow:var(--shadow-sm); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.req{ color:#b4453a; }
.radio-row{ display:flex; gap:1.25rem; flex-wrap:wrap; padding-top:.2rem; }
.radio-row label{ display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink); cursor:pointer; }
.radio-row input{ width:17px; height:17px; accent-color:var(--green); }
.robot{
  display:flex; align-items:center; gap:.8rem; border:1.5px solid var(--line); border-radius:var(--r);
  padding:1rem 1.15rem; background:#fafbfa;
}
.robot input{ width:22px; height:22px; accent-color:var(--green); flex-shrink:0; }
.robot label{ font-size:.92rem; text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink); cursor:pointer; }
.form-error{ background:#fdeceb; border:1px solid #f2c4c0; color:#8f2f26; padding:.8rem 1rem; border-radius:var(--r); font-size:.88rem; margin-bottom:1.25rem; }
.form-error[hidden]{ display:none; }
.field-err{ color:#b4453a; font-size:.78rem; }

/* ---------- floating contact widget ---------- */
.fab{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:120; display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }
.fab-menu{ display:flex; flex-direction:column; gap:.45rem; align-items:flex-end; }
.fab-menu[hidden]{ display:none; }
.fab-item{
  display:inline-flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--line);
  border-radius:99px; padding:.6rem 1.1rem .6rem .85rem; text-decoration:none; color:var(--ink);
  font-size:.85rem; font-weight:600; box-shadow:var(--shadow-md); cursor:pointer;
  animation:fabIn .22s cubic-bezier(.2,.9,.3,1.2) backwards;
}
.fab-item:hover{ background:var(--green); color:#fff; border-color:var(--green); }
.fab-item:hover .fab-ic{ background:rgba(255,255,255,.2); color:#fff; }
.fab-item:nth-child(1){ animation-delay:0s } .fab-item:nth-child(2){ animation-delay:.04s }
.fab-item:nth-child(3){ animation-delay:.08s } .fab-item:nth-child(4){ animation-delay:.12s }
@keyframes fabIn{ from{ opacity:0; transform:translateY(8px) scale(.96);} to{ opacity:1; transform:none; } }
.fab-ic{ width:28px; height:28px; border-radius:50%; background:var(--green-soft); color:var(--green); display:grid; place-items:center; flex-shrink:0; }
.fab-toggle{
  display:inline-flex; align-items:center; gap:.55rem; background:var(--green); color:#fff; border:0;
  border-radius:99px; padding:.85rem 1.35rem; font-size:.85rem; font-weight:700; letter-spacing:.04em;
  cursor:pointer; box-shadow:var(--shadow-lg);
}
.fab-toggle:hover{ background:var(--green-dark); }
.fab-toggle .x{ display:none; } .fab.is-open .fab-toggle .x{ display:block; }
.fab.is-open .fab-toggle .lbl,.fab.is-open .fab-toggle .ic{ display:none; }

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:1.25rem; }
.modal[hidden]{ display:none; }
.modal-scrim{ position:absolute; inset:0; background:rgba(18,32,24,.6); backdrop-filter:blur(2px); }
.modal-card{
  position:relative; background:var(--paper); border-radius:var(--r-lg); width:min(100%,560px);
  max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg); padding:clamp(1.5rem,4vw,2.25rem);
}
.modal-close{ position:absolute; top:.85rem; right:.95rem; background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--ink-soft); }
.modal-card h2{ font-size:1.7rem; padding-right:2rem; }
.modal-card .sub{ color:var(--ink-mid); font-size:.92rem; margin-bottom:1.5rem; }

/* specials popup */
.promo-card{ text-align:center; }
.promo-card .promo-kicker{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.promo-card h2{ padding:0; margin-top:.4rem; }
.promo-card .fine{ font-size:.78rem; color:var(--ink-soft); margin-top:1rem; }

/* ---------- footer ---------- */
.site-footer{ background:var(--green-dark); color:#c9d6cc; padding:clamp(3rem,6vw,4.5rem) 0 2rem; font-size:.9rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer img.flogo{ height:64px; width:auto; margin-bottom:1rem; }
.site-footer h4{ font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); margin:0 0 .9rem; font-weight:700; }
.site-footer a{ color:#c9d6cc; text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:.5rem; }
.footer-bottom{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.8rem; color:#9fb0a4;
}
.eho{ display:flex; align-items:center; gap:.9rem; }
.eho svg{ opacity:.75; }

/* ---------- page head ---------- */
.page-head{ background:var(--green); color:var(--cream-lt); padding:clamp(2.5rem,5vw,4rem) 0; }
.page-head h1{ color:#fff; margin-bottom:.2em; }
.page-head p{ margin:0; color:var(--cream); max-width:60ch; }
.crumbs{ font-size:.78rem; color:var(--cream); margin-bottom:.75rem; }
.crumbs a{ color:var(--cream); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ── Application page ───────────────────────────────────────────────────────
   The leasing flow is a page now, not an overlay, so it needs a column of its
   own rather than the full content width: a long form is harder to read the
   wider it gets. */
.apply-flow{margin:2rem 0 2.5rem}
.apply-loading{color:var(--ink-soft);padding:2.5rem 0;text-align:center}
.apply-aside{border-top:1px solid var(--line);padding-top:1.5rem;color:var(--ink-soft)}
.apply-aside h2{margin:0 0 .35rem}
.apply-aside p{margin:0}

/* The site map's "already leased" toggle, matched to the one on the floor
   plans page so the two read as the same control. */
.map-occ-toggle{ display:flex; align-items:center; gap:.55rem; margin:0 0 1rem;
  font-size:.82rem; color:var(--ink-soft); cursor:pointer; }
.map-occ-toggle input{ width:1rem; height:1rem; accent-color:var(--green); cursor:pointer; }