/* ============================================================
   HAVEN ESTATES, shared template stylesheet
   ------------------------------------------------------------
   ONE stylesheet, linked by every page (index / listings /
   neighborhoods / about / contact). Editing this file re-themes
   the whole site, mirroring the Borg Sites "change one thing,
   everything updates" promise.

   THEME CONTRACT (Borg Studio): every color / font / radius reads
   a --t-* custom property declared once on :root below. Borg
   Studio re-themes the live preview by appending
   <style id="borg-overrides">:root{ --t-...: ... }</style> to the
   iframe head, which wins over these defaults, so the whole page
   recolors instantly. Keep ALL visual values sourced from tokens.

   Required tokens (15): --t-bg --t-surface --t-surface-2 --t-text
   --t-heading --t-muted --t-brand --t-brand-2 --t-accent
   --t-on-brand --t-border --t-grad --t-radius --t-font-head
   --t-font-body
   ============================================================ */

@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 800;font-display:swap;src:url("/assets/fonts/fraunces-italic-var.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 800;font-display:swap;src:local("Georgia"),local("Times New Roman"),local("Times")}

:root{
  --t-brand:#1f3b30;
  --t-brand-2:#2f5745;
  --t-accent:#b8975e;
  --t-bg:#f3eee5;
  --t-surface:#fbf9f4;
  --t-surface-2:#eae2d3;
  --t-heading:#1a2620;
  --t-text:#4b524d;
  --t-muted:#5e6660;
  --t-border:#dfd6c5;
  --t-on-brand:#f8f4ec;
  --t-grad:linear-gradient(135deg,var(--t-brand),var(--t-brand-2));
  --t-radius:12px;
  --t-font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --t-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── base ────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
/* never let a browser fake a weight or an italic; a missing face falls back upright */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-synthesis:none}
body{font-family:var(--t-font-body);color:var(--t-text);background:var(--t-bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,.serif{font-family:var(--t-font-head);font-style:italic;font-weight:400;color:var(--t-heading);line-height:1.1;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
section{padding:96px 0}
.tint{background:var(--t-surface);border-block:1px solid var(--t-border)}
.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}
.skip{position:absolute;left:16px;top:-48px;z-index:100;background:var(--t-brand);color:var(--t-on-brand);padding:10px 16px;border-radius:var(--t-radius);transition:top .2s}
.skip:focus{top:12px}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--t-brand);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--t-accent)}
.head{max-width:620px;margin-bottom:56px}
.head.center{text-align:center;margin-inline:auto}
.head.center .eyebrow{justify-content:center}
.head.center .eyebrow::after{content:"";width:28px;height:1px;background:var(--t-accent)}
.head h2{font-size:clamp(2rem,1.4rem+2.2vw,3rem);margin-bottom:.8rem}
.head p{color:var(--t-muted);font-size:1.06rem}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:56px}
.head-row .head{margin-bottom:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:600;font-size:.92rem;letter-spacing:.01em;padding:.9rem 1.6rem;border-radius:calc(var(--t-radius) - 4px);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s ease,box-shadow .3s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
/* The words on this button read --t-btn-text, and on hover --t-btn-text-hover, when the palette sets one: its own ink, for a palette whose words would not reach 4.5:1 on every stop of the button or of its hover. Otherwise what they always read. */
.btn-primary{background:var(--t-brand);color:var(--t-btn-text,var(--t-on-brand));box-shadow:0 14px 30px -14px color-mix(in srgb,var(--t-brand) 80%,transparent)}
.btn-primary:hover{background:var(--t-brand-2);transform:translateY(-2px);box-shadow:0 18px 36px -14px color-mix(in srgb,var(--t-brand) 85%,transparent);color:var(--t-btn-text-hover,var(--t-btn-text,var(--t-on-brand)))}
.btn-ghost{border-color:var(--t-border);color:var(--t-heading);background:var(--t-surface)}
.btn-ghost:hover{border-color:var(--t-brand);color:var(--t-brand);transform:translateY(-2px)}
.btn-outline-light{border-color:color-mix(in srgb,var(--t-on-brand) 45%,transparent);color:var(--t-on-brand);border-radius:999px}
.btn-outline-light:hover{background:color-mix(in srgb,var(--t-on-brand) 14%,transparent);border-color:color-mix(in srgb,var(--t-on-brand) 70%,transparent)}
.link{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9rem;color:var(--t-brand);border-bottom:1px solid color-mix(in srgb,var(--t-brand) 35%,transparent);padding-bottom:.15rem;transition:border-color .2s}
.link:hover{border-color:var(--t-brand)}
.link svg{width:15px;height:15px;transition:transform .2s}
.link:hover svg{transform:translateX(3px)}

/* reveals */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

/* ── nav ─────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease}
.nav .wrap{display:flex;align-items:center;gap:2rem;height:80px;transition:height .3s ease}
.logo{font-family:var(--t-font-head);font-style:italic;font-weight:400;font-size:1.6rem;line-height:1;color:var(--t-on-brand);letter-spacing:.005em;transition:color .3s ease;white-space:nowrap}
.nav nav{margin-left:auto;display:flex;gap:1.9rem;align-items:center}
.nav nav a{font-size:.9rem;font-weight:500;color:color-mix(in srgb,var(--t-on-brand) 82%,transparent);position:relative;padding:.3rem 0;transition:color .25s}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .25s ease}
.nav nav a:hover{color:var(--t-on-brand)}
.nav nav a:hover::after,.nav nav a.on::after{right:0}
.nav nav a.on{color:var(--t-on-brand)}
.nav .nav-cta{padding:.7rem 1.3rem;font-size:.85rem}
.nav .nav-cta.on::after{display:none}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--t-on-brand) 40%,transparent);border-radius:999px;background:transparent;color:var(--t-on-brand);cursor:pointer;place-items:center;transition:color .3s,border-color .3s}
.menu-btn svg{width:20px;height:20px}
.menu-btn .x{display:none}
.nav.solid{background:color-mix(in srgb,var(--t-bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--t-border);box-shadow:0 12px 32px -24px color-mix(in srgb,var(--t-heading) 45%,transparent)}
.nav.solid .wrap{height:68px}
.nav.solid .logo{color:var(--t-heading)}
.nav.solid nav a{color:var(--t-muted)}
.nav.solid nav a:hover,.nav.solid nav a.on{color:var(--t-heading)}
.nav.solid .nav-cta{color:var(--t-on-brand);background:var(--t-brand);border-color:var(--t-brand)}
.nav.solid nav a.nav-cta.on{color:var(--t-on-brand)}
.nav.solid .nav-cta:hover{background:var(--t-brand-2)}
.nav.solid .menu-btn{color:var(--t-heading);border-color:var(--t-border)}
/* The header is transparent until the page scrolls, so the wordmark and the
   nav links need a scrim of their own: over the shipped photo they measured
   1.96:1 and 2.25:1, and a customer replaces that photo with one nobody here
   gets to see. It sits above the photo and below the hero copy, and it scrolls
   away with the hero, which is exactly where the header turns solid. It is
   held flat across the 80px the header itself occupies, because a fade that
   starts giving way inside that band leaves the nav links under 4.5:1. */
.hero::after,.page-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:200px;background:linear-gradient(to bottom,color-mix(in srgb,var(--t-heading) 62%,transparent) 0,color-mix(in srgb,var(--t-heading) 62%,transparent) 80px,transparent 200px);pointer-events:none}

/* ── hero (home) ─────────────────────────────────── */
/* No photo behind the hero, only the colour under it: a customer who replaces
   the hero photo must never see ours showing through or around theirs. */
.hero{position:relative;min-height:clamp(600px,94vh,900px);display:flex;align-items:flex-end;padding:150px 0 132px;color:var(--t-on-brand);background:var(--t-heading);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 56%;animation:heroIn 1.8s ease-out both}
@keyframes heroIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(78% 90% at 18% 66%,color-mix(in srgb,var(--t-heading) 72%,transparent),transparent 72%),
  linear-gradient(90deg,color-mix(in srgb,var(--t-heading) 46%,transparent) 0%,color-mix(in srgb,var(--t-heading) 22%,transparent) 48%,transparent 78%),
  linear-gradient(180deg,color-mix(in srgb,var(--t-heading) 50%,transparent) 0%,color-mix(in srgb,var(--t-heading) 20%,transparent) 34%,color-mix(in srgb,var(--t-heading) 56%,transparent) 60%,color-mix(in srgb,var(--t-heading) 80%,transparent) 80%,color-mix(in srgb,var(--t-heading) 92%,transparent) 100%)}
.hero .wrap::before{content:"";position:absolute;left:-6vw;right:38%;top:-2rem;bottom:-2rem;z-index:-1;pointer-events:none;border-radius:32px;
  background:radial-gradient(90% 90% at 30% 60%,color-mix(in srgb,var(--t-heading) 62%,transparent),transparent 72%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:2rem 3rem}
.hero .eyebrow{color:color-mix(in srgb,var(--t-on-brand) 82%,transparent)}
.hero h1{color:var(--t-on-brand);font-size:clamp(2.7rem,1.6rem+4.2vw,5rem);max-width:12ch;margin-bottom:1.2rem;text-shadow:0 2px 28px color-mix(in srgb,var(--t-heading) 45%,transparent)}
.hero h1 em{font-style:italic;color:color-mix(in srgb,var(--t-accent) 42%,var(--t-on-brand))}
.hero h1,.hero h1 em{text-shadow:0 1px 2px color-mix(in srgb,var(--t-heading) 70%,transparent),0 2px 18px color-mix(in srgb,var(--t-heading) 62%,transparent),0 8px 40px color-mix(in srgb,var(--t-heading) 45%,transparent)}
.hero .lede,.hero p{text-shadow:0 1px 2px color-mix(in srgb,var(--t-heading) 60%,transparent),0 2px 14px color-mix(in srgb,var(--t-heading) 50%,transparent)}
.hero .lede{font-size:clamp(1rem,.95rem+.35vw,1.2rem);color:color-mix(in srgb,var(--t-on-brand) 86%,transparent);max-width:50ch}
.hero-stats{display:flex;gap:2.4rem;justify-content:flex-end;flex-wrap:wrap}
.hero-stats div{display:grid;gap:.15rem}
.hero-stats b{font-family:var(--t-font-head);font-style:italic;font-weight:400;font-size:1.9rem;color:var(--t-on-brand);line-height:1}
.hero-stats span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--t-on-brand) 72%,transparent)}
.scroll-hint{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);width:1px;height:44px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--t-on-brand) 70%,transparent));z-index:1;animation:hint 2.4s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.35;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,8px)}}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
@media (max-width:980px),(prefers-reduced-motion:reduce){.hero-video{display:none}}

/* ── page hero (inner pages) ─────────────────────── */
.page-hero{position:relative;overflow:hidden;color:var(--t-on-brand);background:var(--t-brand);padding:150px 0 84px}
.page-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(80% 120% at 82% -10%,color-mix(in srgb,var(--t-brand-2) 80%,transparent),transparent 60%),
  linear-gradient(180deg,color-mix(in srgb,var(--t-heading) 20%,transparent),transparent 40%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .crumb{color:color-mix(in srgb,var(--t-on-brand) 62%,transparent)}
.page-hero .crumb a{color:color-mix(in srgb,var(--t-on-brand) 82%,transparent)}
.page-hero .crumb a:hover{color:var(--t-on-brand)}
.page-hero .eyebrow{color:color-mix(in srgb,var(--t-on-brand) 82%,transparent)}
.page-hero h1{color:var(--t-on-brand);font-size:clamp(2.3rem,1.6rem+2.6vw,3.6rem);max-width:18ch;margin-bottom:1rem}
.page-hero h1 em{font-style:italic;color:color-mix(in srgb,var(--t-accent) 55%,var(--t-on-brand))}
.page-hero p{color:color-mix(in srgb,var(--t-on-brand) 84%,transparent);max-width:56ch;font-size:1.06rem}
.crumb{display:flex;gap:.55rem;align-items:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:1.1rem}
.crumb span{opacity:.55}

/* search bar, overlaps the hero's bottom edge */
.search-wrap{position:relative;z-index:2;margin-top:-52px}
.search{background:var(--t-surface);border:1px solid var(--t-border);border-radius:calc(var(--t-radius) + 6px);padding:.75rem;display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:.6rem;box-shadow:0 34px 70px -32px color-mix(in srgb,var(--t-heading) 50%,transparent)}
.field{background:var(--t-surface-2);border-radius:calc(var(--t-radius) - 2px);padding:.62rem 1rem .68rem;display:grid;gap:.15rem;position:relative;transition:box-shadow .2s}
.field:focus-within{box-shadow:inset 0 0 0 1.5px var(--t-brand)}
.field label{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-muted)}
.field :is(input,select){border:0;background:transparent;font-size:.95rem;color:var(--t-heading);width:100%;padding:0;appearance:none;-webkit-appearance:none;outline:none}
.field input::placeholder{color:var(--t-muted)}
.field select{cursor:pointer;padding-right:1.2rem}
.field.sel::after{content:"";position:absolute;right:1rem;bottom:1.15rem;width:7px;height:7px;border-right:1.5px solid var(--t-muted);border-bottom:1.5px solid var(--t-muted);transform:rotate(45deg);pointer-events:none}
.search .btn{align-self:stretch;min-width:150px;padding-block:1rem;border-radius:calc(var(--t-radius) - 2px)}

/* ── listings ───────────────────────────────────── */
.listings{padding-top:88px}
.l-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.l-card{background:var(--t-surface);border:1px solid var(--t-border);border-radius:calc(var(--t-radius) + 4px);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease}
.l-card:hover{transform:translateY(-6px);box-shadow:0 36px 60px -32px color-mix(in srgb,var(--t-heading) 45%,transparent)}
.l-media{position:relative;aspect-ratio:2/1;overflow:hidden;background:var(--t-surface-2)}
.l-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.l-card:hover .l-media img{transform:scale(1.05)}
.l-media .status{position:absolute;top:.85rem;left:.85rem;font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.38rem .72rem;border-radius:999px;background:color-mix(in srgb,var(--t-surface) 90%,transparent);color:var(--t-brand);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.l-media .status.gold{color:color-mix(in srgb,var(--t-accent) 60%,var(--t-heading))}
.l-media .save{position:absolute;top:.75rem;right:.75rem;width:34px;height:34px;border-radius:50%;border:0;background:color-mix(in srgb,var(--t-surface) 90%,transparent);color:var(--t-heading);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);transition:color .2s,transform .2s}
.l-media .save svg{width:16px;height:16px}
.l-media .save:hover{color:var(--t-brand);transform:scale(1.06)}
.l-body{padding:1.25rem 1.35rem 1.4rem;display:grid;gap:.45rem}
.l-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.l-body .pr{font-family:var(--t-font-head);font-style:italic;font-weight:400;font-size:1.55rem;color:var(--t-heading);line-height:1}
.l-body .per{font-size:.76rem;color:var(--t-muted)}
.l-body h3{font-family:var(--t-font-body);font-style:normal;font-weight:600;font-size:1.02rem;letter-spacing:0;color:var(--t-heading)}
.addr{font-size:.86rem;color:var(--t-muted);display:flex;align-items:center;gap:.4rem}
.addr svg{width:14px;height:14px;color:var(--t-accent);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.55rem;padding-top:.9rem;border-top:1px solid var(--t-border)}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:500;color:var(--t-heading);background:var(--t-surface-2);border-radius:999px;padding:.36rem .72rem}
.chip svg{width:14px;height:14px;color:var(--t-brand)}
.l-body .l-cta{margin-top:.7rem}

/* filter chips (listings) */
.filterbar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.filterbar .chip{appearance:none;-webkit-appearance:none;margin:0;font-family:inherit;font-size:.78rem;font-weight:600;line-height:inherit;letter-spacing:.04em;text-align:inherit;color:var(--t-heading);padding:.55rem 1.1rem;border:1px solid var(--t-border);border-radius:999px;background:var(--t-surface);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.filterbar .chip.on,.filterbar .chip:hover{background:var(--t-brand);border-color:var(--t-brand);color:var(--t-on-brand)}

/* coming soon (text rows, no images) */
.coming{border-top:1px solid var(--t-border)}
.coming li{display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;padding:1.4rem .25rem;border-bottom:1px solid var(--t-border)}
.coming .cs-when{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#76613c;min-width:120px}
.coming h3{font-family:var(--t-font-body);font-style:normal;font-weight:600;font-size:1.05rem;color:var(--t-heading);margin-bottom:.2rem}
.coming p{font-size:.88rem;color:var(--t-muted)}
.coming .cs-pr{font-family:var(--t-font-head);font-style:italic;font-size:1.2rem;color:var(--t-heading);white-space:nowrap}

/* ── split (about story / neighborhood features) ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.split + .split{margin-top:5rem}
.split.rev .split-fig{order:2}
.split-fig{position:relative;border-radius:calc(var(--t-radius) + 6px);overflow:hidden;aspect-ratio:4/3;background:var(--t-surface-2);box-shadow:0 40px 70px -44px color-mix(in srgb,var(--t-heading) 55%,transparent)}
.split-fig img{width:100%;height:100%;object-fit:cover}
.split-fig .badge{position:absolute;left:1.1rem;bottom:1.1rem;background:color-mix(in srgb,var(--t-surface) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--t-border);border-radius:var(--t-radius);padding:.7rem 1rem .75rem;display:grid;gap:.05rem}
.split-fig .badge b{font-family:var(--t-font-head);font-style:italic;font-weight:400;font-size:1.1rem;color:var(--t-heading)}
.split-fig .badge span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t-muted)}
.split-body h2{font-size:clamp(1.9rem,1.4rem+1.8vw,2.6rem);margin-bottom:1rem}
.split-body p{color:var(--t-text);margin-bottom:1rem;max-width:52ch}
.split-body p:last-of-type{margin-bottom:0}
.split-body .sig{font-family:var(--t-font-head);font-style:italic;color:var(--t-muted)}
.hood-stats{display:flex;gap:2.2rem;flex-wrap:wrap;margin:1.4rem 0}
.hood-stats div b{display:block;font-family:var(--t-font-head);font-style:italic;font-size:1.5rem;color:var(--t-heading);line-height:1}
.hood-stats div span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t-muted)}

/* ── why haven ──────────────────────────────────── */
.why .wrap{display:grid;grid-template-columns:.94fr 1.06fr;gap:5rem;align-items:center}
.portrait{position:relative;padding:0 18px 18px 0}
.portrait::before{content:"";position:absolute;top:26px;right:0;bottom:0;left:26px;border:1px solid var(--t-accent);border-radius:calc(var(--t-radius) + 6px);opacity:.75}
.portrait img{position:relative;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 40%;border-radius:calc(var(--t-radius) + 6px);box-shadow:0 44px 80px -44px color-mix(in srgb,var(--t-heading) 60%,transparent)}
.portrait .tag{position:absolute;left:1.25rem;bottom:2.4rem;background:color-mix(in srgb,var(--t-surface) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--t-border);border-radius:var(--t-radius);padding:.7rem 1rem .75rem;display:grid;gap:.05rem}
.portrait .tag b{font-family:var(--t-font-head);font-style:italic;font-weight:400;font-size:1.1rem;color:var(--t-heading)}
.portrait .tag span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t-muted)}
.why .head{margin-bottom:2rem}
.points{display:grid;gap:1.7rem}
.point{display:grid;grid-template-columns:54px 1fr;gap:1.25rem;align-items:start}
.point .ic{width:54px;height:54px;border-radius:50%;border:1px solid var(--t-border);background:var(--t-bg);display:grid;place-items:center;color:var(--t-brand);transition:background-color .25s,color .25s,border-color .25s}
.point:hover .ic{background:var(--t-brand);color:var(--t-on-brand);border-color:var(--t-brand)}
.point .ic svg{width:22px;height:22px}
.point h3{font-size:1.28rem;margin-bottom:.3rem}
.point p{font-size:.95rem;color:var(--t-muted);max-width:44ch}
.why-foot{margin-top:2.4rem;display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.why-foot .sig{font-family:var(--t-font-head);font-style:italic;font-size:1rem;color:var(--t-muted)}
.points.cols{grid-template-columns:repeat(3,1fr);gap:2rem}
.points.cols .point{grid-template-columns:1fr;gap:1rem}

/* stat band (about) */
.statband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;text-align:center}
.statband div b{display:block;font-family:var(--t-font-head);font-style:italic;font-weight:400;font-size:2.4rem;color:var(--t-heading);line-height:1}
.statband div span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t-muted);margin-top:.5rem;display:block}

/* ── neighborhoods trio ─────────────────────────── */
.hoods{padding-bottom:0}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile{position:relative;aspect-ratio:2.35/1;overflow:hidden;background:var(--t-surface-2);margin:0;display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.tile:hover img{transform:scale(1.045)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--t-heading) 74%,transparent))}
.tile figcaption{position:absolute;left:1.5rem;right:1.5rem;bottom:1.25rem;z-index:1;color:var(--t-on-brand);display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.tile figcaption b{font-family:var(--t-font-head);font-style:italic;font-weight:400;font-size:1.4rem;line-height:1}
.tile figcaption span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;white-space:nowrap}

/* ── testimonials ───────────────────────────────── */
.stories{background:var(--t-surface-2)}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.t-card{display:grid;grid-template-columns:76px 1fr;gap:1.3rem;padding:0 2.2rem;align-items:start;border-left:1px solid color-mix(in srgb,var(--t-heading) 12%,transparent)}
.t-card:first-child{border-left:0;padding-left:0}
.t-card:last-child{padding-right:0}
.t-card img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--t-surface),0 0 0 4px var(--t-border)}
.t-card .q{font-family:var(--t-font-head);font-style:italic;font-size:3.2rem;line-height:.55;color:var(--t-accent);display:block;height:1.35rem}
.t-card blockquote{font-size:.98rem;line-height:1.7;color:var(--t-text)}
.t-card .who{margin-top:.9rem;font-size:.82rem;color:var(--t-muted);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.t-card .who strong{color:var(--t-heading);font-weight:600}
.t-card .who .stars{color:var(--t-accent);font-size:.72rem;display:inline-flex;align-items:center;gap:.12em}
.t-card .who .stars svg{width:1.05em;height:1.05em}

/* ── contact ────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:start}
.cform{display:grid;gap:1.25rem}
.cform .grp{display:grid;gap:.5rem}
.cform label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--t-heading)}
.cform input,.cform select,.cform textarea{background:var(--t-surface);border:1px solid var(--t-border);border-radius:calc(var(--t-radius) - 2px);padding:.85rem 1rem;font-size:.96rem;color:var(--t-heading);width:100%;transition:border-color .2s,box-shadow .2s}
.cform textarea{resize:vertical;min-height:130px}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{outline:none;border-color:var(--t-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--t-brand) 18%,transparent)}
.cform .two{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-note{font-size:.82rem;color:var(--t-muted)}
.form-ok{display:none;background:color-mix(in srgb,var(--t-brand) 12%,var(--t-surface));border:1px solid color-mix(in srgb,var(--t-brand) 40%,var(--t-border));border-radius:var(--t-radius);padding:1rem 1.1rem;color:var(--t-heading);font-size:.94rem}
.form-ok.show{display:block}
.form-ok b{font-family:var(--t-font-head);font-style:italic}
.info-card{background:var(--t-surface);border:1px solid var(--t-border);border-radius:calc(var(--t-radius) + 4px);padding:2rem 1.9rem}
.info-card + .info-card{margin-top:1.4rem}
.info-card h3{font-size:1.35rem;margin-bottom:1.25rem}
.info-list{display:grid;gap:1.1rem}
.info-list li{display:grid;grid-template-columns:44px 1fr;gap:.9rem;align-items:start;font-size:.94rem;color:var(--t-text)}
.info-list .ic{width:44px;height:44px;border-radius:50%;background:var(--t-surface-2);color:var(--t-brand);display:grid;place-items:center}
.info-list .ic svg{width:19px;height:19px}
.info-list b{display:block;color:var(--t-heading);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem}
.info-list a:hover{color:var(--t-brand)}
.hours{display:grid;gap:.6rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;padding-bottom:.6rem;border-bottom:1px solid var(--t-border)}
.hours li:last-child{border-bottom:0;padding-bottom:0}
.hours span{color:var(--t-muted)}
.hours b{color:var(--t-heading);font-weight:600}

/* map-lite (CSS-only, no external map) */
.map-lite{position:relative;height:320px;border:1px solid var(--t-border);border-radius:calc(var(--t-radius) + 4px);overflow:hidden;background:
  repeating-linear-gradient(0deg,transparent 0 38px,color-mix(in srgb,var(--t-heading) 6%,transparent) 38px 39px),
  repeating-linear-gradient(90deg,transparent 0 38px,color-mix(in srgb,var(--t-heading) 6%,transparent) 38px 39px),
  var(--t-surface)}
.map-lite::before{content:"";position:absolute;left:14%;top:0;bottom:0;width:26px;background:color-mix(in srgb,var(--t-brand) 16%,transparent);transform:skewX(-12deg)}
.map-lite::after{content:"";position:absolute;left:0;right:0;top:58%;height:30px;background:color-mix(in srgb,var(--t-accent) 20%,transparent)}
.map-pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%);z-index:2;text-align:center}
.map-pin svg{width:40px;height:40px;color:var(--t-brand);filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--t-heading) 32%,transparent))}
.map-pin span{display:inline-block;margin-top:.4rem;background:var(--t-brand);color:var(--t-on-brand);font-size:.72rem;letter-spacing:.06em;padding:.32rem .7rem;border-radius:var(--t-radius);white-space:nowrap}

/* faq */
.faq{max-width:820px;margin:0 auto;display:grid;gap:.9rem}
.faq details{border:1px solid var(--t-border);border-radius:var(--t-radius);background:var(--t-surface);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.4rem 1.6rem;font-family:var(--t-font-head);font-style:italic;font-size:1.18rem;color:var(--t-heading);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--t-accent);border-bottom:2px solid var(--t-accent);transform:rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 1.6rem 1.5rem;color:var(--t-text);font-size:.96rem;max-width:70ch}

/* ── cta ────────────────────────────────────────── */
.cta{padding:0}
.cta-band{display:grid;grid-template-columns:.42fr .58fr;min-height:236px;background:var(--t-surface-2);border-block:1px solid var(--t-border)}
.cta-art{position:relative;overflow:hidden;min-height:150px}
.cta-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:19% 50%}
.cta-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,var(--t-surface-2))}
.cta-copy{display:flex;align-items:center;justify-content:space-between;gap:2rem 3rem;padding:44px clamp(24px,5vw,72px) 44px clamp(8px,2vw,24px);flex-wrap:wrap}
.cta-copy h2{font-size:clamp(1.7rem,1.3rem+1.6vw,2.4rem);margin-bottom:.35rem;max-width:22ch}
.cta-copy p{color:var(--t-muted);max-width:46ch;font-size:.98rem}
.cta-copy .btn{padding:1.05rem 2rem;font-size:.98rem}

/* ── footer ─────────────────────────────────────── */
footer{background:var(--t-brand);color:color-mix(in srgb,var(--t-on-brand) 72%,transparent);padding:68px 0 32px}
.f-grid{display:grid;grid-template-columns:1.4fr .9fr .9fr 1.2fr;gap:2.5rem}
footer .logo{color:var(--t-on-brand);font-size:1.75rem;display:inline-block;margin-bottom:1rem}
footer .about{font-size:.9rem;max-width:34ch}
footer h4{font-family:var(--t-font-body);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-on-brand);margin-bottom:1.1rem;font-weight:600}
footer li{margin-bottom:.6rem;font-size:.9rem}
footer li a{transition:color .2s}
footer li a:hover{color:var(--t-on-brand)}
.f-contact li{display:flex;gap:.75rem;align-items:flex-start}
.f-contact svg{width:16px;height:16px;flex:none;margin-top:.22rem;color:var(--t-accent)}
.f-bottom{border-top:1px solid color-mix(in srgb,var(--t-on-brand) 14%,transparent);margin-top:52px;padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.8rem}
.socials{display:flex;gap:.6rem}
.socials a{width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,var(--t-on-brand) 25%,transparent);display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.socials a:hover{background:color-mix(in srgb,var(--t-on-brand) 12%,transparent);border-color:color-mix(in srgb,var(--t-on-brand) 50%,transparent)}
.socials svg{width:15px;height:15px}

/* ── responsive ─────────────────────────────────── */
@media(max-width:1040px){
  .why .wrap{gap:3rem}
  .t-card{padding:0 1.4rem;grid-template-columns:60px 1fr;gap:1rem}
  .t-card img{width:60px;height:60px}
}
@media(max-width:960px){
  .nav nav{display:none}
  .menu-btn{display:grid}
  .nav.open nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--t-surface);border-bottom:1px solid var(--t-border);padding:.6rem 24px 1.2rem;box-shadow:0 30px 50px -30px color-mix(in srgb,var(--t-heading) 50%,transparent)}
  .nav.open nav a{color:var(--t-heading);padding:.85rem 0;border-bottom:1px solid var(--t-border);font-size:1rem}
  .nav.open nav a::after{display:none}
  .nav.open nav a.on{color:var(--t-brand)}
  .nav.open nav .nav-cta{margin-top:1rem;border-radius:calc(var(--t-radius) - 4px);border:0;background:var(--t-brand);color:var(--t-on-brand);text-align:center;justify-content:center;padding:.9rem}
  .nav.open .menu-btn .bars{display:none}
  .nav.open .menu-btn .x{display:block}
  .hero-grid{grid-template-columns:1fr}
  .hero-stats{justify-content:flex-start;gap:1.8rem}
  .search{grid-template-columns:1fr 1fr}
  .search .btn{grid-column:1/-1}
  .l-grid{grid-template-columns:repeat(2,1fr)}
  .why .wrap{grid-template-columns:1fr;gap:3.5rem}
  .portrait{max-width:640px}
  .split,.split.rev{grid-template-columns:1fr;gap:2.4rem}
  .split.rev .split-fig{order:0}
  .split + .split{margin-top:3.5rem}
  .t-grid{grid-template-columns:1fr;gap:2.2rem}
  .t-card{padding:0;border-left:0;grid-template-columns:64px 1fr}
  .t-card+.t-card{padding-top:2.2rem;border-top:1px solid color-mix(in srgb,var(--t-heading) 12%,transparent)}
  .contact-grid{grid-template-columns:1fr;gap:2.6rem}
  .f-grid{grid-template-columns:1fr 1fr}
  .cta-band{grid-template-columns:1fr}
  .cta-art{min-height:140px}
  .cta-art img{object-position:22% 50%}
  .cta-art::after{background:linear-gradient(180deg,transparent 35%,var(--t-surface-2))}
  .cta-copy{padding:8px 24px 44px}
}
@media(max-width:760px){
  .trio{grid-template-columns:1fr}
  .tile{aspect-ratio:2.8/1}
  .coming li{grid-template-columns:1fr;gap:.35rem}
  .coming .cs-pr{grid-row:1;justify-self:start}
}
@media(max-width:640px){
  section{padding:68px 0}
  .hero{padding:132px 0 116px;min-height:min(92vh,760px)}
  .hero-media img{object-position:66% 56%}
  .hero::before{background:linear-gradient(180deg,color-mix(in srgb,var(--t-heading) 62%,transparent) 0%,color-mix(in srgb,var(--t-heading) 14%,transparent) 30%,color-mix(in srgb,var(--t-heading) 48%,transparent) 55%,color-mix(in srgb,var(--t-heading) 88%,transparent) 100%)}
  .hero h1{max-width:none}
  .hero .hide-sm{display:none}
  .hero-stats{gap:1.4rem}
  .hero-stats b{font-size:1.55rem}
  .page-hero{padding:124px 0 64px}
  .statband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search{grid-template-columns:1fr}
  .search-wrap{margin-top:-40px}
  .l-grid{grid-template-columns:1fr}
  .listings{padding-top:64px}
  .head-row{margin-bottom:36px}
  .two{grid-template-columns:1fr}
  .cform .two{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;gap:2rem}
  .f-bottom{flex-direction:column;text-align:center}
  .scroll-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}

/* Tap targets. WCAG 2.2 asks for 24px of vertical hit area; these links
   paint smaller than that, so each takes the padding that gets it there. The
   padding is on the link itself, nothing else moves. */
.crumb a{padding-block:3px}
footer li a{padding-block:4px}
.f-contact li a{padding-block:1px}
.info-list a{padding-block:3px}

/* Embedded previews (gallery grid + Borg Studio iframe): reveal-on-scroll
   would otherwise leave content invisible, so force everything shown. */
html.embedded .rv{opacity:1!important;transform:none!important;transition:none!important}