/* ============================================================
   QUAIL LEGACY APARTMENTS — Brand Design System
   Derived from QuailCreekApartments Logo Guide
   Primary:  Sage #71A28A  ·  Slate #5F6A72
   Accent:   Gold #FFB60F  ·  Olive #A2AD00
   Neutral:  Warm Gray #E2E1DD
   Type:     Cormorant Garamond (display) · Montserrat (UI/body)
   ============================================================ */

:root{
  --sage:#71A28A;  --sage-dk:#5b8773;  --sage-lt:#e6efe9;
  --sage-btn:#46785f; --sage-btn-dk:#3a6b51; /* AA-safe: white text >=4.5:1 */
  --slate:#5F6A72; --slate-dk:#3f474d; --ink:#2b3136;
  --gold:#FFB60F;  --olive:#A2AD00;
  --warm:#E2E1DD;  --cream:#f7f6f2;   --paper:#fffefb;
  --white:#ffffff;
  --line:rgba(43,49,54,.12);
  --shadow-sm:0 2px 10px rgba(43,49,54,.08);
  --shadow:0 14px 40px rgba(43,49,54,.14);
  --shadow-lg:0 30px 70px rgba(43,49,54,.20);
  --r:14px; --r-lg:22px; --r-pill:999px;
  --maxw:1200px;
  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  overflow-x:hidden;
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--paper); line-height:1.6; font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.08; margin:0; color:var(--ink); letter-spacing:.2px}
h1{font-size:clamp(2.8rem,6vw,5rem)}
h2{font-size:clamp(2.1rem,4vw,3.3rem)}
h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.eyebrow{font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.22em; font-size:.72rem; color:var(--sage-btn)}
.lede{font-size:1.18rem; color:var(--slate); max-width:60ch}
.muted{color:var(--slate)}
.serif-accent{font-family:var(--display); font-style:italic; color:var(--sage-dk)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans);
  font-weight:600; font-size:.86rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.95em 1.8em; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:.25s var(--ease); white-space:nowrap}
.btn-primary{background:var(--sage-btn); color:#fff}
.btn-primary:hover{background:var(--sage-btn-dk); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn-gold{background:var(--gold); color:var(--ink)}
.btn-gold:hover{filter:brightness(.95); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent; color:var(--ink); border-color:currentColor}
.btn-ghost:hover{background:var(--ink); color:#fff}
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn-ghost-light:hover{background:#fff; color:var(--ink)}

/* ---------- Header / Nav ---------- */
.site-head{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(255,254,251,.86); border-bottom:1px solid var(--line); transition:.3s}
.nav{display:flex; align-items:center; justify-content:space-between; height:92px; gap:24px}
.brand{display:flex; align-items:center; gap:.7rem; flex:0 0 auto; min-width:0}
.brand .mark{width:38px; height:38px; color:var(--sage); flex:0 0 auto}
.brand .mark svg{width:100%; height:100%}
.brand .mark img{width:100%; height:100%; object-fit:contain}
.brand-lockup{object-fit:contain}
/* Official horizontal logo lockup (icon + wordmark) */
.brand-lockup{height:60px; width:auto; max-width:none; display:block; padding-right:8px; flex:0 0 auto}
.site-foot .brand-lockup{height:58px}
@media(max-width:900px){ .brand-lockup{height:48px} }
@media(max-width:680px){ .brand-lockup{height:42px} }
.brand .name{font-family:var(--display); font-weight:600; font-size:1.32rem; line-height:1; letter-spacing:.5px}
.brand .name small{display:block; font-family:var(--sans); font-weight:600;
  font-size:.52rem; letter-spacing:.34em; text-transform:uppercase; color:var(--slate); margin-top:3px}
.nav-links{display:flex; align-items:center; gap:1.5rem; list-style:none; margin:0; padding:0}
.nav-links a{font-size:.78rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--slate); transition:.2s; position:relative; white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--gold); transition:.25s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:.7rem; flex:0 0 auto}
.nav-mobile-cta{display:none}
.nav-cta .btn{padding:.66em 1.15em; font-size:.74rem}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:88vh; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover}
/* ---- Hero crossfade slideshow ---- */
.hero-bg .slide{position:absolute; inset:0; z-index:1; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.8s ease-in-out; will-change:opacity}
.hero-bg .slide.is-active{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .hero-bg .slide.is-active{animation:kenburns 8s ease-out both}
  @keyframes kenburns{from{transform:scale(1.05)} to{transform:scale(1.13)}}
}
.hero-bg::after{content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,rgba(43,49,54,.28) 0%,rgba(43,49,54,.18) 40%,rgba(43,49,54,.82) 100%)}
.hero .wrap{position:relative; z-index:2; padding-bottom:72px; padding-top:120px; width:100%}
.hero h1{color:#fff; max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero .eyebrow{color:var(--gold)}
.hero .lede{color:rgba(255,255,255,.92); margin:1.1rem 0 1.8rem}
.hero-cta{display:flex; gap:1rem; flex-wrap:wrap}
.hero-strip{position:relative; z-index:2; display:flex; gap:2.5rem; flex-wrap:wrap;
  padding:22px 0; border-top:1px solid rgba(255,255,255,.18); margin-top:34px}
.hero-strip .stat .n{font-family:var(--display); font-size:2rem; line-height:1; color:#fff}
.hero-strip .stat .l{font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; color:rgba(255,255,255,.8)}

/* ---------- Sections ---------- */
section{padding:92px 0}
.section-head{max-width:680px; margin-bottom:54px}
.section-head .eyebrow{margin-bottom:.7rem; display:block}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.bg-cream{background:var(--cream)}
.bg-sage{background:var(--sage-btn); color:#fff}
.bg-sage h2,.bg-sage h3{color:#fff}
.bg-warm{background:var(--warm)}

/* ---------- Feature split ---------- */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center}
.split.rev .split-media{order:2}
.split-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3}
.split-media img{width:100%; height:100%; object-fit:cover}
.split-body p{margin:1rem 0 1.6rem}

/* ---------- Amenity grid ---------- */
.amen-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.amen{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 26px; transition:.28s var(--ease)}
.amen:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.amen .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--sage-lt); color:var(--sage-dk); margin-bottom:16px}
.amen .ic svg{width:24px; height:24px}
.amen h4{font-family:var(--sans); font-weight:700; font-size:1rem; letter-spacing:.01em; margin-bottom:6px}
.amen p{font-size:.92rem; color:var(--slate); margin:0}

/* ---------- Floor plans ---------- */
.fp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.fp{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:.28s var(--ease); display:flex; flex-direction:column}
.fp:hover{box-shadow:var(--shadow); transform:translateY(-4px)}
/* Floor-plan thumbnails. These are photorealistic 3D renders on white, so the
   panel is white and the image is NOT blended. The previous rule used a cream
   panel with mix-blend-mode:multiply, which was right for flat 2D line drawings
   (it dropped their white out) but tints a render and muddies its shadows. */
.fp-img{aspect-ratio:4/3; background:#fff; display:grid; place-items:center; padding:10px; border-bottom:1px solid var(--line)}
.fp-img img{max-width:100%; max-height:100%; width:auto; object-fit:contain}
.fp-body{padding:24px 26px 28px}
.fp-body .tier{display:inline-block; font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; color:var(--sage-dk); background:var(--sage-lt); padding:4px 11px; border-radius:var(--r-pill); margin-bottom:10px}
.fp h3{font-size:1.5rem; margin-bottom:4px}
.fp .specs{display:flex; gap:18px; color:var(--slate); font-size:.86rem; margin:10px 0 16px;
  border-top:1px solid var(--line); padding-top:14px}
.fp .specs b{color:var(--ink); font-weight:700}
.fp .price{font-family:var(--display); font-size:1.7rem; color:var(--ink)}
.fp .price span{font-family:var(--sans); font-size:.8rem; color:var(--slate)}
/* 3D Walkthrough button.
   NOTE ON THE ICON: a previous version used an inline SVG with no intrinsic
   size. When the stylesheet was served from cache the size cap never applied,
   the SVG expanded to fill its container and blew the card apart. The icon is
   now pinned three independent ways, so no single failure can repeat it:
     1. width/height ATTRIBUTES on the <svg> itself  -> correct with zero CSS
     2. an inline style="" on the <svg>              -> survives a stale sheet
     3. the rule below                               -> normal operation
   If you edit the icon, keep all three. */
.fp-tour{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  margin-top:16px; padding:11px 20px; border-radius:var(--r-pill);
  font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.04em;
  line-height:1; /* pin the height so it can't stretch on a fallback font */
  color:#fff; background:var(--sage-btn); border:1px solid var(--sage-btn);
  text-decoration:none; transition:.18s var(--ease)}
.fp-tour svg{width:18px; height:18px; min-width:18px; max-width:18px;
  min-height:18px; max-height:18px; flex:none; display:block}
.fp-tour:hover{background:var(--sage-btn-dk); border-color:var(--sage-btn-dk);
  transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.fp-tour:focus-visible{outline:2px solid var(--sage-btn); outline-offset:3px}

/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px}
.gallery a{overflow:hidden; border-radius:var(--r); position:relative; cursor:pointer}
.gallery img{width:100%; height:100%; object-fit:cover; transition:.5s var(--ease)}
.gallery a:hover img{transform:scale(1.06)}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}

/* lightbox */
.lb{position:fixed; inset:0; background:rgba(20,24,27,.92); z-index:200; display:none;
  align-items:center; justify-content:center; padding:5vw}
.lb.open{display:flex}
.lb img{max-width:100%; max-height:90vh; border-radius:10px; box-shadow:var(--shadow-lg)}
.lb-close{position:absolute; top:24px; right:30px; color:#fff; font-size:2rem; cursor:pointer; line-height:1}

/* ---------- Portfolio cards (umbrella) ---------- */
.props{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.prop{position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:360px;
  display:flex; align-items:flex-end; color:#fff; box-shadow:var(--shadow-sm); transition:.3s var(--ease)}
.prop:hover{box-shadow:var(--shadow-lg); transform:translateY(-5px)}
.prop img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:.6s var(--ease)}
.prop:hover img{transform:scale(1.06)}
.prop::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(43,49,54,0) 30%,rgba(43,49,54,.85) 100%)}
.prop .pc{position:relative; z-index:2; padding:28px}
.prop .pc .loc{font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); font-weight:700}
.prop .pc h3{color:#fff; font-size:1.7rem; margin:4px 0 6px}
.prop .pc .old{font-size:.82rem; color:rgba(255,255,255,.78)}
.prop .pc .go{margin-top:14px; display:inline-flex; align-items:center; gap:.5em; font-size:.78rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.08em}
.prop .pc .go svg{transition:.25s}
.prop:hover .pc .go svg{transform:translateX(4px)}

/* ---------- Stats band ---------- */
.stats-band{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center}
.stats-band .stat .n{font-family:var(--display); font-size:clamp(2.6rem,4vw,3.6rem); line-height:1; color:#fff}
.stats-band .stat .l{font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.85); margin-top:8px}

/* ---------- Contact / form ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start}
.form{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:36px; box-shadow:var(--shadow-sm)}
.field{margin-bottom:18px}
.field label{display:block; font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--slate); margin-bottom:7px}
.field input,.field select,.field textarea{width:100%; font-family:var(--sans); font-size:.95rem;
  padding:13px 15px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-lt)}
.field textarea{resize:vertical; min-height:110px}
.field.row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-note{font-size:.8rem; color:var(--slate); margin-top:6px}
.contact-info .ci{display:flex; gap:14px; align-items:flex-start; margin-bottom:24px}
.contact-info .ci .ic{width:42px; height:42px; border-radius:11px; background:var(--sage-lt);
  color:var(--sage-dk); display:grid; place-items:center; flex:0 0 auto}
.contact-info .ci .ic svg{width:20px;height:20px}
.contact-info .ci b{display:block; font-size:.95rem}
.contact-info .ci span{color:var(--slate); font-size:.92rem}
.map{margin-top:10px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); height:230px}
.map iframe{width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.05)}

/* ---------- CTA band ---------- */
.cta-band{position:relative; color:#fff; text-align:center; overflow:hidden}
.cta-band .bg{position:absolute; inset:0; z-index:0}
.cta-band .bg img{width:100%;height:100%;object-fit:cover}
.cta-band .bg::after{content:"";position:absolute;inset:0;background:rgba(43,49,54,.78)}
.cta-band .wrap{position:relative; z-index:2}
.cta-band h2{color:#fff; max-width:18ch; margin:0 auto .8rem}
.cta-band p{color:rgba(255,255,255,.9); max-width:48ch; margin:0 auto 1.8rem}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink); color:rgba(255,255,255,.72); padding:64px 0 30px; font-size:.9rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12)}
.site-foot .brand .name{color:#fff}
.site-foot .brand .name small{color:rgba(255,255,255,.72)} /* AA on dark footer */
.site-foot .brand .mark{color:var(--sage)}
.site-foot p{margin:.5rem 0; max-width:34ch}
.foot-col h5{font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  font-size:.72rem; color:#fff; margin:0 0 16px}
.foot-col a{display:block; padding:5px 0; color:rgba(255,255,255,.72); transition:.2s}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px}
.foot-bottom .eho{display:flex; align-items:center; gap:10px; font-size:.78rem}
.foot-bottom .eho svg{width:26px;height:26px;opacity:.8}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:.7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .split,.contact-grid{grid-template-columns:1fr; gap:34px}
  .split.rev .split-media{order:0}
  .amen-grid,.fp-grid,.props{grid-template-columns:repeat(2,1fr)}
  .stats-band{grid-template-columns:repeat(2,1fr); gap:34px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
/* condensed nav (hamburger) for tablet + narrow desktop so the logo never crowds */
@media(max-width:1240px){
  .nav-links, .nav-cta{display:none}
  .nav-toggle{display:block}
  .nav-links.open{display:flex; position:absolute; top:92px; left:0; right:0; flex-direction:column;
    background:var(--paper); padding:22px 28px; gap:1.15rem; box-shadow:var(--shadow); border-bottom:1px solid var(--line)}
  .nav-links.open a{font-size:.9rem}
  .nav-links.open .nav-mobile-cta{display:block; margin-top:6px}
  .nav-links.open .nav-mobile-cta a{display:inline-flex}
}
@media(max-width:680px){
  body{font-size:16px}
  .amen-grid,.fp-grid,.props,.stats-band,.foot-grid{grid-template-columns:1fr}
  .hero{min-height:78vh}
  section{padding:64px 0}
  .field.row{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr; grid-auto-rows:240px}
  .gallery .wide{grid-column:auto}
  .gallery .tall{grid-row:auto}
  .hero-strip{gap:1.5rem 2rem}
}


/* ---------- Accessibility ---------- */
/* Skip link (visible on focus) */
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff;
  padding:12px 20px; font-weight:700; border-radius:0 0 8px 0}
.skip-link:focus{left:0}
/* Visible keyboard focus ring on all interactive elements */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.gallery a:focus-visible, .prop:focus-visible, .nav-toggle:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:4px;
}
/* Hero slideshow pause/play control (injected by JS) */
.ss-control{position:absolute; right:20px; bottom:20px; z-index:3; width:44px; height:44px;
  border-radius:50%; background:rgba(43,49,54,.55); color:#fff; border:1.5px solid rgba(255,255,255,.65);
  cursor:pointer; display:grid; place-items:center; transition:.2s; backdrop-filter:blur(4px)}
.ss-control:hover{background:rgba(43,49,54,.85)}
.ss-control svg{width:18px; height:18px}
@media(max-width:680px){ .ss-control{right:14px; bottom:14px} }

/* --- Consent banner (tracking.js) --------------------------------------- */
.consent-bar{position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:var(--ink,#2b2b28); color:#fff; padding:16px 22px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 22px; box-shadow:0 -4px 22px rgba(0,0,0,.22)}
.consent-bar p{margin:0; font-size:.86rem; line-height:1.55; max-width:64ch; color:rgba(255,255,255,.92)}
.consent-actions{display:flex; gap:10px; flex:none}
.consent-bar .btn{padding:.6em 1.3em; font-size:.78rem}
@media (max-width:640px){
  .consent-bar{padding:14px 16px; gap:12px}
  .consent-bar p{font-size:.8rem}
  .consent-actions{width:100%; justify-content:center}
}

/* --- Form failure notice (site.js showFailure) --------------------------- */
.form-error{display:none; margin:0 0 18px; padding:14px 16px; border-radius:var(--r,14px);
  background:#fdeaea; border:1px solid #e3b7b7; color:#7a2020;
  font-size:.88rem; line-height:1.55}
.form-error strong{display:block; margin-bottom:2px}
.form-error a{color:#7a2020; text-decoration:underline; font-weight:600}