/* ==========================================================================
   VINEYARD — the LivingIn network design system.
   ONE stylesheet for every page on every town site.
   Change a color or a font here and it changes everywhere.
   Per-town theming happens through the variables in the :root block below.
   ========================================================================== */

:root{
  --ivory:#FFFFFF;
  --cream:#F1EFE9;
  --char:#1C1A18;
  --ink:#26221E;
  --ink-soft:#77706A;
  --wine:#26221E;          /* per-town accent lives here */
  --wine-deep:#000;
  --sand:#CFC9BF;
  --delta:#8B6B3D;        /* secondary note / delta figures */
  /* Hero backdrop tint — one line per town. Crozet: Blue Ridge greens. */
  --hero-a:#3E4A42; --hero-b:#252E28; --hero-c:#5A6858; --hero-d:#1C2420;
  --hairline:#DDD8CD;
  --hairline-d:rgba(255,255,255,.14);
  --serif:'Cormorant Garamond',serif;
  --sans:'Manrope',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --data:'Cormorant Garamond',serif;   /* all market numbers sitewide */
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.7;font-size:15.5px;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.wrap-n{max-width:880px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
h2{font-size:clamp(32px,4.4vw,50px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hr{border:none;border-top:1px solid var(--hairline)}

/* ---------- shared bits ---------- */
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--wine);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--char);color:var(--ivory);text-decoration:none;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:16px 30px;border-radius:0;transition:background .25s;border:none;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--wine)}
.btn.wine{background:var(--wine)}
.btn.wine:hover{background:var(--wine-deep)}
.btn.ivory{background:var(--ivory);color:var(--char)}
.btn.ivory:hover{background:#fff}
.btn.line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn.line:hover{background:rgba(255,255,255,.12)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--wine);outline-offset:2px}
.textlink{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--wine);border-bottom:1px solid var(--wine);padding-bottom:3px}
.textlink:hover{color:var(--wine-deep)}
.tag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--sand);color:var(--ink-soft);white-space:nowrap}
.tag.pub{background:var(--char);color:#fff;border-color:var(--char)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;padding:24px 0;transition:.3s}
header.scrolled{background:rgba(250,248,244,.95);backdrop-filter:blur(12px);padding:14px 0;border-bottom:1px solid var(--hairline)}
header.scrolled .logo,header.scrolled .nav-links a{color:var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--serif);font-weight:700;font-size:21px;color:#fff;text-decoration:none;letter-spacing:.01em}
.nav-links{display:flex;gap:30px;list-style:none;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.nav-links a{text-decoration:none;color:rgba(255,255,255,.8)}
.nav-links a:hover{color:#fff}
.nav-links a[aria-current="page"]{color:#fff;border-bottom:1px solid var(--sand);padding-bottom:3px}
header.scrolled .nav-links a:hover{color:var(--wine)}
header.scrolled .nav-links a[aria-current="page"]{border-bottom-color:var(--wine)}
.nav .btn{padding:11px 20px;font-size:11px}
header:not(.scrolled) .nav .btn{background:rgba(255,255,255,.14);backdrop-filter:blur(6px)}
header:not(.scrolled) .nav .btn:hover{background:var(--wine)}
@media(max-width:940px){.nav-links{display:none}}

/* ---------- hero: bottom-aligned (home, hub pages) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;
  /* Placeholder backdrop until real photography lands. The dark overlay is what makes
     the white hero text legible — do NOT remove it when swapping in a photo, layer the
     photo underneath it instead. Per-town tint comes from --hero-a / --hero-b. */
  background:
    linear-gradient(180deg,rgba(28,26,24,.30) 0%,rgba(28,26,24,.08) 40%,rgba(28,26,24,.78) 88%),
    linear-gradient(160deg,var(--hero-a) 0%,var(--hero-b) 30%,var(--hero-c) 55%,var(--hero-d) 100%);
  background-size:cover;background-position:center}
.hero.short{min-height:68svh}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 28px 90px;max-width:1140px;margin:0 auto}
.hero .label{color:var(--sand);margin-bottom:22px;display:block}
.hero h1{color:#fff;font-size:clamp(46px,8vw,104px);font-weight:600;max-width:980px;margin-bottom:22px;line-height:1}
.hero-sub{font-size:clamp(15px,1.9vw,19px);color:rgba(255,255,255,.84);max-width:600px;margin-bottom:40px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.34);text-align:center;pointer-events:none;width:90%}

/* ---------- hero: real-photo crossfade (home page, when hero.slideshowImages is set) ----------
   Photos + overlay are separate layers stacked BEFORE hero-inner, so hero's own
   background (the tint gradient other pages still use) is simply turned off via
   .photo-bg rather than touched — every other .hero usage is untouched. */
.hero.photo-bg{background:var(--hero-b)}
.hero-slideshow{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slideshow .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:heroSlideFade 12s infinite ease-in-out}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,26,24,.30) 0%,rgba(28,26,24,.08) 40%,rgba(28,26,24,.78) 88%)}
@keyframes heroSlideFade{0%{opacity:0}4%{opacity:1}33%{opacity:1}37%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.hero-slideshow .slide{animation:none;opacity:0}.hero-slideshow .slide:first-child{opacity:1}}


/* ---------- hero: centered (school + detail pages) ---------- */
.hero.center{align-items:center;justify-content:center;text-align:center}
.hero.center .hero-inner{padding:120px 28px;max-width:900px}
.hero.center h1{font-size:clamp(44px,7.6vw,98px);margin-bottom:24px}
.hero.center .hero-sub{max-width:620px;margin:0 auto 40px}
.hero.center .hero-ctas{justify-content:center}
.hero.center .hero-note{top:auto;bottom:26px;transform:translateX(-50%);font-size:10px}

/* hero data strip */
.hero-meta{margin-top:42px;display:flex;justify-content:center;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.22);padding-top:26px}
.hm{padding:0 24px;border-right:1px solid rgba(255,255,255,.22);text-align:center}
.hm:last-child{border-right:none}
.hm b{display:block;font-family:var(--data);font-size:clamp(22px,2.6vw,30px);font-weight:600;color:#fff;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.hm span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand)}
@media(max-width:760px){.hm{padding:14px 16px;border-right:none;min-width:50%}}

/* ---------- breadcrumb ---------- */
.crumb{background:var(--cream);border-bottom:1px solid var(--hairline);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.crumb .wrap{padding-top:14px;padding-bottom:14px}
.crumb a{text-decoration:none;color:var(--ink-soft)}
.crumb a:hover{color:var(--wine)}
.crumb span{color:var(--ink)}

/* ---------- answer block ---------- */
.answer{padding-top:92px;padding-bottom:78px}
.answer-grid{display:grid;grid-template-columns:340px 1fr;gap:70px;align-items:start}
.answer .label{display:block;margin-bottom:18px}
.answer h2{font-size:clamp(36px,4.6vw,56px);line-height:1.04}
.answer .lede{font-size:19.5px;line-height:1.62;font-weight:700;color:var(--ink);border-top:1px solid var(--char);padding-top:28px}
.answer .sub{margin-top:18px;font-size:16px;font-weight:500;color:var(--ink-soft);line-height:1.75}
.answer.centered{text-align:center;padding-top:88px;padding-bottom:76px}
.answer.centered h2{margin-bottom:26px}
.answer.centered .lede,.answer.centered .sub{text-align:left}
.byline{margin-top:30px;display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--ink-soft)}
.byline .dot{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--wine);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;font-family:var(--sans)}
.byline a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--wine)}
@media(max-width:860px){.answer-grid{grid-template-columns:1fr;gap:34px}}

/* ---------- section scaffold ---------- */
section.blk{padding-top:96px;padding-bottom:96px}
.sec-top{text-align:center;max-width:780px;margin:0 auto 20px}
.sec-top .label{display:block;margin-bottom:16px}
.sec-answer{font-size:16.5px;font-weight:600;color:var(--ink);max-width:720px;margin:0 auto 52px;text-align:center}

/* ---------- market stats bar (generator block) ---------- */
.statsbar{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.statsbar .wrap{display:flex;flex-wrap:wrap}
.sb{padding:36px 24px;flex:1;min-width:160px;border-right:1px solid var(--hairline);text-align:center}
.sb:last-of-type{border-right:none}
.sb b{display:block;font-family:var(--data);font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.sb span{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.18em}
.sb-meta{width:100%;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:26px;font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);letter-spacing:.04em}
.sb-meta a{color:var(--wine);text-decoration:none;font-weight:600}
@media(max-width:760px){.sb{min-width:calc(50% - 24px);padding:24px 16px}}

/* ---------- school directory table (/schools) ---------- */
.directory{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.dir-hold{border-top:1px solid var(--char);background:var(--ivory)}
table.dir{width:100%;border-collapse:collapse}
table.dir thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;text-align:left;padding:18px 20px 14px;border-bottom:1px solid var(--hairline)}
table.dir thead th.num,table.dir td.num{text-align:center}
tr.tier th{background:var(--char);color:#fff;padding:14px 20px;text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
tr.tier th .tier-note{color:var(--sand);letter-spacing:.1em;margin-left:14px;text-transform:none;font-size:10px}
tr.row{border-bottom:1px solid var(--hairline);transition:background .2s}
tr.row:hover{background:var(--cream)}
tr.row td,tr.row th{padding:20px;vertical-align:middle}
tr.row th{text-align:left;font-weight:400}
.s-name{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);text-decoration:none;display:inline-block;line-height:1.1;border-bottom:1px solid transparent}
tr.row:hover .s-name{border-bottom-color:var(--wine)}
.s-note{display:block;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-soft);margin-top:7px;max-width:360px;line-height:1.5}
.accolade{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wine);margin-top:9px;max-width:360px;line-height:1.6}
td.num{font-family:var(--data);font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
td.go{text-align:right;white-space:nowrap}
td.go a{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--wine);font-weight:500;border-bottom:1px solid var(--sand);padding-bottom:3px}
td.go a:hover{border-bottom-color:var(--wine)}
.dir-meta,.tbl-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft)}
.dir-meta a,.tbl-meta a{color:var(--wine);font-weight:600;text-decoration:none}
@media(max-width:820px){
  table.dir,table.dir tbody,table.dir tr,table.dir td,table.dir th{display:block;width:100%}
  table.dir thead{display:none}
  tr.tier th .tier-note{display:block;margin:6px 0 0}
  tr.row{padding:22px 20px;border-bottom:1px solid var(--hairline)}
  tr.row td,tr.row th{padding:0}
  .s-note,.accolade{max-width:none}
  tr.row td.meta-cell{margin-top:14px}
  td.num{margin-top:10px;text-align:left}
  td.num::before{content:attr(data-label) ' ';font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
  td.go{text-align:left;margin-top:14px}
}

/* ---------- feeder convergence diagram (signature) ---------- */
.converge{display:grid;grid-template-columns:1.15fr auto 1fr;gap:0;align-items:center;border-top:1px solid var(--char);padding-top:34px}
.conv-col{display:flex;flex-direction:column;gap:1px}
.conv-el{background:var(--cream);border:1px solid var(--hairline);padding:15px 18px;display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.conv-el b{font-family:var(--serif);font-size:20px;font-weight:600}
.conv-el em{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-style:normal;white-space:nowrap}
.conv-arm{width:78px;height:100%;min-height:230px;position:relative}
.conv-arm svg{width:100%;height:100%;display:block;overflow:visible}
.conv-out{display:flex;flex-direction:column;gap:14px}
.conv-node{background:var(--char);color:#fff;padding:22px 24px}
.conv-node span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);display:block;margin-bottom:8px}
.conv-node b{font-family:var(--serif);font-size:clamp(22px,2.6vw,29px);font-weight:600;line-height:1.1;display:block}
.conv-caption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:22px;text-align:center}
@media(max-width:880px){.converge{grid-template-columns:1fr;gap:22px}.conv-arm{display:none}}

/* ---------- "A look at" dark photo section ---------- */
.look{background:var(--char);color:#fff;padding:110px 0}
.look .label{color:var(--sand)}
.look h2{color:#fff}
.look .sec-answer{color:rgba(255,255,255,.82)}
.look-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:14px}
.lk{position:relative;overflow:hidden;display:flex;align-items:flex-end;aspect-ratio:4/3}
.lk.tall{grid-row:span 2;aspect-ratio:auto}
.lk.wide{grid-column:span 2}
.lk::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(20,18,16,.8) 100%)}
.lk .ph{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.lk:hover .ph{transform:scale(1.045)}
.lk i{position:relative;z-index:2;padding:16px 18px;font-family:var(--sans);font-size:12.5px;font-weight:600;font-style:normal}
.video-slot{margin-top:16px;border:1px solid rgba(255,255,255,.25);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:20px}
.look-foot{margin-top:46px;text-align:center}
.look-foot p{font-size:15.5px;font-weight:500;color:rgba(255,255,255,.82);max-width:680px;margin:0 auto 28px}
.look .textlink{color:var(--sand);border-color:var(--sand)}
@media(max-width:880px){
  .look-grid{grid-template-columns:repeat(2,1fr)}
  .lk.tall{grid-row:span 1;aspect-ratio:4/3}
  .lk.wide{grid-column:span 2}
}

/* ---------- zone table (school pages) ---------- */
.tbl-hold{overflow-x:auto;border-top:1px solid var(--char)}
table.zt{width:100%;border-collapse:collapse;min-width:680px}
table.zt thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;text-align:left;padding:18px 18px 14px 0;border-bottom:1px solid var(--hairline)}
table.zt tbody th{font-family:var(--serif);font-size:21px;font-weight:600;text-align:left;padding:18px 18px 18px 0;border-bottom:1px solid var(--hairline);width:30%}
table.zt tbody th a{text-decoration:none;border-bottom:1px solid transparent}
table.zt tbody tr:hover th a{border-bottom-color:var(--wine)}
table.zt td{font-size:14px;font-weight:500;padding:18px 18px 18px 0;border-bottom:1px solid var(--hairline);vertical-align:middle}
table.zt td.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
table.zt tbody tr:hover th,table.zt tbody tr:hover td{background:var(--cream)}
.zone-note{margin:34px 0 0;padding:24px 26px;background:var(--cream);border-left:3px solid var(--wine);font-size:14.5px;color:var(--ink-soft)}
.zone-note.wide{margin:38px auto 0;max-width:860px}
.zone-note strong{color:var(--ink)}
.zone-note .btn{margin-top:18px}

/* ---------- feeder path cards ---------- */
.path{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.path-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--char);padding-top:30px}
.pnode{background:var(--ivory);border:1px solid var(--hairline);padding:26px 24px;text-decoration:none;display:block;transition:border-color .2s,transform .25s}
.pnode:hover{border-color:var(--char);transform:translateY(-3px)}
.pnode.here{background:var(--char);color:#fff;border-color:var(--char)}
.pnode em{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-style:normal;display:block;margin-bottom:10px}
.pnode.here em{color:var(--sand)}
.pnode b{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.12;display:block;margin-bottom:8px}
.pnode.here b{color:#fff}
.pnode p{font-size:13.5px;font-weight:500;color:var(--ink-soft)}
.pnode.here p{color:rgba(255,255,255,.75)}
.pnode .textlink{font-size:11px;margin-top:14px;display:inline-block}
@media(max-width:820px){.path-row{grid-template-columns:1fr}}

/* ---------- trade-offs ---------- */
.tradeoffs{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--char)}
.to{padding:34px 38px 38px 0}
.to:last-child{padding-left:38px;padding-right:0;border-left:1px solid var(--hairline)}
.to h3{font-size:27px;margin-bottom:20px}
.to ul{list-style:none}
.to li{font-size:15px;font-weight:500;padding:13px 0;border-bottom:1px solid var(--hairline);display:flex;gap:14px}
.to li::before{content:'+';font-family:var(--mono);color:var(--wine);flex-shrink:0}
.to.watch li::before{content:'–'}
@media(max-width:820px){
  .tradeoffs{grid-template-columns:1fr}
  .to{padding:30px 0}
  .to:last-child{padding-left:0;border-left:none;border-top:1px solid var(--hairline)}
}

/* ---------- neighborhood cards (home) ---------- */
.hood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hood{text-decoration:none;display:block}
.hood .frame{aspect-ratio:16/10;overflow:hidden;position:relative}
.hood .ph{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hood:hover .ph{transform:scale(1.045)}
.hood-cap{border-top:1px solid var(--char);margin-top:18px;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hood-cap h3{font-size:25px}
.hood-cap .band{font-family:var(--mono);font-size:11px;color:var(--wine);white-space:nowrap;letter-spacing:.04em}
.hood p{padding-top:6px;font-size:14px;font-weight:500;color:var(--ink)}
.hood-more{margin-top:56px;text-align:center}
@media(max-width:880px){.hood-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hood-grid{grid-template-columns:1fr}}
/* Phones: the homepage grid is a preview, not a directory. Below 560px only the
   neighborhoods flagged `featured: true` in the fact sheet are shown; the button
   underneath carries the rest. The hub grid (/neighborhoods/) has no .hood-preview
   class and always shows everything. :has() is the guard — a town that flags none
   of its neighborhoods still gets the full grid rather than an empty one. */
@media(max-width:560px){
  .hood-preview:has(.hood-featured) .hood:not(.hood-featured){display:none}
}

/* Phones, the hub (/neighborhoods/): two cards per row rather than one. Fifteen
   full-width cards is a very long scroll; two-up lets someone take in the whole
   town in a few flicks. The caption stacks and the type steps down because the
   column is ~157px at 390px wide — name beside price band does not fit there.
   The homepage preview is excluded: it is showing three cards, not fifteen, so
   it keeps the full-width treatment. */
@media(max-width:560px){
  .hood-grid:not(.hood-preview){grid-template-columns:repeat(2,1fr);gap:22px}
  .hood-grid:not(.hood-preview) .hood-cap{flex-direction:column;align-items:flex-start;
    gap:3px;margin-top:12px;padding-top:10px}
  .hood-grid:not(.hood-preview) .hood-cap h3{font-size:17.5px;line-height:1.14}
  .hood-grid:not(.hood-preview) .hood-cap .band{font-size:10px}
  .hood-grid:not(.hood-preview) .hood p{padding-top:5px;font-size:12.5px;line-height:1.45}
}

/* ---------- movers / nearby / zone cards ---------- */
.mover-grid,.near-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.mover,.near{border-top:1px solid var(--char);padding-top:22px;text-decoration:none;display:block;transition:border-color .2s}
.mover:hover,.near:hover{border-top-color:var(--wine)}
.mover h3,.near h3{font-size:25px;margin-bottom:10px}
.near em{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-style:normal;display:block;margin-bottom:10px}
.mover p,.near p{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:16px}
.mover .textlink,.near .textlink{font-size:11px}
@media(max-width:820px){.mover-grid,.near-grid{grid-template-columns:1fr;gap:32px}}

.zones{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.zone-card{background:var(--ivory);border:1px solid var(--hairline);padding:28px 26px;text-decoration:none;display:block;transition:border-color .2s,transform .25s}
.zone-card:hover{border-color:var(--char);transform:translateY(-3px)}
.zone-card em{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-style:normal;display:block;margin-bottom:10px}
.zone-card h3{font-size:24px;margin-bottom:8px}
.zone-card p{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:16px}
.zone-card .textlink{font-size:12px}
@media(max-width:880px){.zone-grid{grid-template-columns:1fr}}

/* ---------- schools split (home) ---------- */
.schools{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.school-split{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center}
.school-split .label{display:block;margin-bottom:16px}
.school-split h2{margin-bottom:18px}
.school-split .lead-p{font-size:16.5px;font-weight:600;color:var(--ink);max-width:500px}
.feeder{border-top:1px solid var(--char)}
.feeder-step{display:flex;align-items:baseline;gap:20px;padding:22px 2px;border-bottom:1px solid var(--hairline)}
.feeder-step .n{font-family:var(--mono);font-size:10px;color:var(--wine);letter-spacing:.2em;text-transform:uppercase;width:100px;flex-shrink:0}
.feeder-step b{font-family:var(--serif);font-size:22px;font-weight:600}
.schools .btn{margin-top:28px}
@media(max-width:840px){.school-split{grid-template-columns:1fr;gap:40px}}

/* ---------- private school cards ---------- */
.school-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 40px}
.school{border-top:1px solid var(--char);padding-top:22px;transition:border-color .2s}
.school:hover{border-top-color:var(--wine)}
.school-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.school-head h3{font-size:27px}
.school-head h3 a{text-decoration:none;border-bottom:1px solid transparent}
.school:hover .school-head h3 a{border-bottom-color:var(--wine)}
.school p{font-size:14.5px;font-weight:500;color:var(--ink);margin:10px 0 16px}
.school .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border-top:1px solid var(--hairline);padding-top:12px;margin-bottom:14px}
.school .textlink{font-size:12px}
@media(max-width:820px){.school-grid{grid-template-columns:1fr;gap:38px}}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--hairline)}
.faq details:first-of-type{border-top:1px solid var(--char)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 4px;font-family:var(--serif);font-weight:600;font-size:22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--wine);flex-shrink:0;font-weight:400}
.faq details[open] summary::after{content:'–'}
.faq .a{padding:0 4px 28px;font-size:15px;font-weight:500;color:var(--ink);max-width:740px}
.faq .a a{color:var(--wine);font-weight:700;text-decoration:none}
.faq .a a:hover{text-decoration:underline}
.faq-foot{margin-top:30px;text-align:center}

/* ---------- author ---------- */
.author{border-top:1px solid var(--char);padding-top:30px;display:grid;grid-template-columns:96px 1fr;gap:28px;align-items:start}
.author .avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(150deg,#5A6858,#252E28);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:30px;font-weight:700}
.author h3{font-size:25px;margin-bottom:8px}
.author p{font-size:15px;font-weight:500;color:var(--ink-soft);max-width:660px;margin-bottom:14px}
@media(max-width:640px){.author{grid-template-columns:1fr}}

/* ---------- lead capture ---------- */
.capture{background:var(--wine);color:#fff;padding:110px 0}
.cap-split{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.capture .label{color:#D8D3CA}
.capture h2{color:#fff;margin:16px 0 18px}
.capture .lead-p{color:rgba(255,255,255,.78);font-size:16px;max-width:460px;margin-bottom:28px}
.cap-points{list-style:none;display:flex;flex-direction:column;gap:13px}
.cap-points li{display:flex;gap:14px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.92)}
.cap-points li::before{content:'—';color:#D8D3CA}
.cap-form{background:var(--ivory);color:var(--ink);padding:44px 42px}
.cap-form h3{font-size:26px;margin-bottom:4px}
.cap-form .fine{font-size:12.5px;color:var(--ink-soft);margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.field input,.field select{width:100%;background:transparent;border:none;border-bottom:1px solid #C9C2B6;padding:10px 2px;color:var(--ink);font-family:var(--sans);font-size:15px;border-radius:0}
.field input:focus,.field select:focus{border-bottom-color:var(--wine);outline:none}
.cap-form .btn{width:100%;justify-content:center;margin-top:14px}
.cap-form .privacy{margin-top:16px;font-size:11.5px;color:var(--ink-soft);text-align:center}
.cap-form .privacy a{color:var(--ink-soft)}
@media(max-width:880px){.cap-split{grid-template-columns:1fr;gap:46px}.cap-form{padding:34px 26px}}

/* ---------- footer ---------- */
footer{background:var(--char);color:rgba(255,255,255,.55);padding:64px 0 40px;font-size:13.5px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--hairline-d);margin-bottom:26px}
.foot-top h4{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand);margin-bottom:16px;font-weight:500}
.foot-top ul{list-style:none}
.foot-top li{margin-bottom:9px}
.foot-top a{text-decoration:none;color:rgba(255,255,255,.55)}
.foot-top a:hover{color:#fff}
.foot-brand{font-family:var(--serif);font-size:24px;font-weight:700;color:#fff;margin-bottom:12px}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer strong{color:#fff;font-weight:600}
.eho{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em}
@media(max-width:760px){.foot-top{grid-template-columns:1fr}}

/* ---------- things to do strip (home) ---------- */
.life{background:var(--char);color:#fff;padding:110px 0}
.life .label{color:var(--sand)}
.life h2{color:#fff}
.life .sec-answer{color:rgba(255,255,255,.82)}
.life-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 46px}
.life-card{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:flex-end}
.life-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,18,16,.75) 100%)}
.life-card .ph{position:absolute;inset:0;transition:transform .6s}
.life-card:hover .ph{transform:scale(1.04)}
.life-card span{position:relative;z-index:2;padding:18px 20px;font-size:13px;font-weight:600;letter-spacing:.02em}
.life-foot{text-align:center}
.life-foot p{font-size:15.5px;font-weight:500;color:rgba(255,255,255,.82);max-width:620px;margin:0 auto 30px}
.life .textlink{color:var(--sand);border-color:var(--sand)}
@media(max-width:880px){.life-strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- neighbourhood pages (Old Trail pattern) ---------- */
/* amenity look — dark band, photo grid + video slot */
.look-card{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:flex-end}
.look-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,18,16,.75) 100%)}
.look-card .ph{position:absolute;inset:0;transition:transform .6s}
.look-card:hover .ph{transform:scale(1.04)}
.look-card span{position:relative;z-index:2;padding:16px 18px;font-size:13px;font-weight:600}
@media(max-width:820px){.look-grid{grid-template-columns:repeat(2,1fr)}}

/* market snapshot — cream stat strip */
.statband{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:84px 0}
.statband .sec-top{margin-bottom:12px}
.takeaway{font-size:16px;color:var(--ink);max-width:680px;margin:0 auto 44px;text-align:center}
.stats{display:flex;flex-wrap:wrap}
.source{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);margin-top:30px;text-align:center;letter-spacing:.04em}
@media(max-width:760px){.sb{min-width:calc(50% - 30px);padding:22px 20px 22px 0}}

/* budget tiers */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.tier .t-label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:10px}
@media(max-width:820px){.tier-grid{grid-template-columns:1fr;gap:32px}}

/* trade-offs — two columns */
.trade{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.trade-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.trade-col h3{font-size:28px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--char)}
.trade-col ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.trade-col li{display:flex;gap:14px;font-size:15px}
.trade-col li::before{content:'—';color:var(--ink-soft);flex-shrink:0}
.trade-col li b{font-weight:700}
@media(max-width:820px){.trade-grid{grid-template-columns:1fr;gap:44px}}

/* nearby */
.schools-cta{text-align:center;margin-top:36px}
.near-cap{border-top:1px solid var(--char);margin-top:16px;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.near-cap h3{font-size:22px}
.near-cap .band{font-family:var(--mono);font-size:11px;color:var(--ink-soft);white-space:nowrap}
@media(max-width:820px){.near-grid{grid-template-columns:1fr}}

/* CTA band */
.cta-band{background:var(--char);color:#fff;text-align:center;padding:100px 20px}
.cta-band .label{color:var(--sand);display:block;margin-bottom:16px}
.cta-band h2{color:#fff;margin-bottom:16px}
.cta-band p{color:rgba(255,255,255,.68);max-width:520px;margin:0 auto 34px}
.cta-band .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media(max-width:820px){.look-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.tier-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:820px){.trade-grid{grid-template-columns:1fr;gap:44px}}
@media(max-width:820px){.near-grid{grid-template-columns:1fr}}

/* ---------- budget tier cards ---------- */
.tier{border-top:1px solid var(--char);padding-top:22px}
.tier h3{font-size:30px;margin-bottom:12px}
.tier p{font-size:14.5px;color:var(--ink-soft)}

/* ---------- feeder rows with a note under the school name ---------- */
.feeder-step div b{font-family:var(--serif);font-size:23px;font-weight:600;display:block}
.feeder-step div p{font-size:13.5px;color:var(--ink-soft);margin-top:4px}

/* ---------- stats strip: last cell drops its divider ---------- */
.sb:last-child{border:none;margin:0}

/* Sub-page heroes sit slightly shorter than the home hero so the answer card peeks. */
.hero.sub-page{min-height:92svh}

/* ---------- answer card variant (neighbourhood pages) ---------- */
/* The home page answer is a two-column grid. Neighbourhood pages use the
   centred serif card from the approved Old Trail layout. Same block, two looks. */
.answer.card{padding:96px 0 84px;text-align:center}
.answer.card .label{display:block;margin-bottom:24px}
.answer.card .lede{font-family:var(--serif);font-size:clamp(24px,3.4vw,38px);line-height:1.32;font-weight:500;color:var(--ink);max-width:900px;margin:0 auto;border-top:none;padding-top:0}
.answer.card .sub{margin:26px auto 0;font-size:16px;font-weight:400;color:var(--ink-soft);max-width:620px}

/* ---------- nearby neighbourhood cards ---------- */
.near{text-decoration:none;display:block}
.near .frame{aspect-ratio:16/10;overflow:hidden;position:relative}
.near .ph{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.near:hover .ph{transform:scale(1.045)}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;scroll-behavior:auto}
  .lk:hover .ph,.hood:hover .ph,.life-card:hover .ph,.look-card:hover .ph,.near:hover .ph,.pnode:hover,.zone-card:hover{transform:none}
}


/* ==========================================================================
   NEIGHBORHOOD PAGE v2 (July 2026 approved layout)
   New, namespaced components — nothing below overrides existing pages.
   ========================================================================== */

/* data table — first thing after the hero */
.statsbar5{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.statsbar5 .wrap{padding-top:0;padding-bottom:0}
.stats5{display:grid;grid-template-columns:repeat(5,1fr)}
.stats5 .st{padding:36px 24px;text-align:center;border-right:1px solid var(--hairline)}
.stats5 .st:last-child{border-right:none}
.stats5 .st b{display:block;font-family:var(--data);font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1;color:var(--char);font-variant-numeric:tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.stats5 .st span{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.18em}
.stats5-meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:26px;font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);letter-spacing:.04em}
.stats5-meta a{color:var(--wine);text-decoration:none;font-weight:600}
@media(max-width:860px){.stats5{grid-template-columns:repeat(2,1fr)}.stats5 .st{padding:24px 16px}.stats5 .st:nth-child(2n){border-right:none}.stats5 .st:last-child{grid-column:span 2;border-right:none}}

/* budget tiers — card style, data-font prices */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tierc{border:1px solid var(--hairline);background:#fff;padding:32px 30px}
.tierc .band{font-family:var(--data);font-size:25px;font-weight:500;color:var(--char);display:block;margin-bottom:6px}
.tierc h3{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
.tierc p{font-size:15px;font-weight:500;color:var(--ink);line-height:1.65}
@media(max-width:820px){.tier-grid{grid-template-columns:1fr}}

/* what it's like — icon bank inside the existing dark .look section */
.icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.icon-card{border:1px solid var(--hairline-d);padding:34px 28px;text-align:center;transition:border-color .25s,background .25s}
.icon-card:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.03)}
.icon-card svg{width:44px;height:44px;stroke:var(--sand);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 18px;display:block}
.icon-card h3{font-family:var(--sans);color:#fff;font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:.01em}
.icon-card p{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.65);line-height:1.6}
@media(max-width:820px){.icon-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.icon-grid{grid-template-columns:1fr}}

/* comparison picker + table */
.compare-pick{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.compare-pick label{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.compare-pick select{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--char);padding:12px 16px;border-radius:0;cursor:pointer}
.compare-pick select:focus{outline:3px solid var(--wine);outline-offset:2px}
.table-scroll{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--hairline)}
.compare-table th{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.02em;padding:20px 22px;text-align:center;background:#fff;border-bottom:1px solid var(--hairline)}
.compare-table th:first-child{width:24%;background:transparent}
.compare-table th.hl{background:var(--char);color:var(--ivory)}
.compare-table td{padding:16px 22px;font-size:15px;font-weight:500;border-bottom:1px solid var(--hairline);vertical-align:middle;text-align:center;font-variant-numeric:tabular-nums;line-height:1.55}
.compare-table td:first-child{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);text-align:left;background:transparent}
.compare-table tbody tr:nth-child(even) td{background:#FBFAF6}
.compare-table td.hl{background:var(--cream);font-family:var(--data);font-size:17px;font-weight:600;border-left:1px solid var(--hairline);border-right:1px solid var(--hairline);font-variant-numeric:tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.compare-table tbody tr:nth-child(even) td.hl{background:#EFEBE2}
.compare-table tr:last-child td{border-bottom:none;font-family:var(--serif);font-size:16.5px;font-style:italic;font-weight:500;color:var(--ink)}
.compare-table tr:last-child td:first-child{font-family:var(--sans);font-size:10.5px;font-style:normal;color:var(--ink-soft)}
.compare-table small{font-size:11px;font-weight:600;color:var(--ink-soft)}
.cmp-note{font-size:13px;font-weight:500;color:var(--ink-soft);text-align:center;margin-top:14px;max-width:640px;margin-left:auto;margin-right:auto}

/* schools strip — full-size band */
.school-strip{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:90px 0}
.school-line{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.school-line .step{font-family:var(--sans);font-size:19px;font-weight:700;color:var(--ink)}
.school-line .step small{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.school-line .arrow{color:var(--sand);font-size:24px}
.school-strip .fine{text-align:center;font-size:15px;font-weight:500;color:var(--ink-soft);max-width:660px;margin:0 auto}
.school-strip .fine strong{color:var(--ink);font-weight:700}
.school-strip .fine a{color:var(--wine);font-weight:700;text-decoration:none}
.school-strip .fine a:hover{text-decoration:underline}

/* new-construction buyer note */
.buynote{background:var(--ivory);border-top:1px solid var(--hairline)}
.buynote .sec-answer{margin-bottom:0}

/* ===== COST OF LIVING ===== */
/* ============================================================
   COST OF LIVING — additions to site.css (matches preview v4)
   Paste at the bottom of src/css/site.css.
   Token-based (--serif/--sans/--mono/--ink/etc.) so it inherits
   the live design system. The --data token is defined once at the
   top of this file; do not redeclare it here.
   ============================================================ */

/* ---- Page hero (skip if an identical .page-hero already exists) ---- */
.page-hero{background:var(--cream);border-bottom:1px solid var(--hairline);padding:88px 0 64px}
.page-hero h1{font-size:clamp(42px,6.4vw,74px);max-width:820px;margin:18px 0 20px}
.page-hero .hero-sub{font-size:clamp(15px,1.9vw,17.5px);color:var(--ink-soft);max-width:560px}

/* ---- Answer card (prose variant) ---- */
.answer-card{padding:56px 28px 0}
.answer-card .lede{font-size:20px;line-height:1.6;font-weight:700;color:var(--ink);border-top:1px solid var(--char);padding-top:26px;max-width:820px}
.answer-card .sub{margin-top:18px;font-size:16px;font-weight:500;color:var(--ink-soft);line-height:1.75;max-width:760px}

/* ---- Stats strip with even 3-line cells ---- */
.col-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.col-stat{padding:36px 24px 30px;border-right:1px solid var(--hairline);text-align:center}
.col-stat:last-child{border-right:none}
.col-stat b{display:block;font-family:var(--data);font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.col-stat span{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.col-stat .yoy{display:block;margin-top:10px;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.04em;color:var(--ink-soft)}
.col-stat .yoy.up{color:#3E6B4F}
.col-stat .yoy.down{color:#8A5A3A}
@media(max-width:760px){.col-stats{grid-template-columns:repeat(2,1fr)}.col-stat{padding:24px 16px 20px}.col-stat:nth-child(2n){border-right:none}}

/* ---- Datelines & caveats ---- */
.dateline{margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.table-caveat{margin-top:12px;font-size:13.5px;color:var(--ink-soft);max-width:640px}

/* ---- Comparison bar scale ---- */
.cmp{border-top:1px solid var(--char);max-width:860px}
.cmp-row{padding:24px 0;border-bottom:1px solid var(--hairline)}
.cmp-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.cmp-name{font-size:15px;font-weight:700;letter-spacing:.02em}
.cmp-val{font-family:var(--data);font-size:31px;font-weight:600}
.cmp-track{height:10px;background:var(--cream)}
.cmp-track i{display:block;height:100%;background:var(--sand)}
.cmp-row.is-crozet .cmp-track i{background:var(--wine)}
.cmp-row.is-crozet .cmp-name{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--wine)}
.cmp-note{margin-top:10px;font-size:13.5px;color:var(--ink-soft);max-width:640px}

/* ---- Price-tier bars with counts ---- */
.tier-bars{border-top:1px solid var(--char)}
.tier-row{display:grid;grid-template-columns:170px 1fr 64px;grid-template-rows:auto auto;align-items:center;column-gap:22px;padding:22px 0;border-bottom:1px solid var(--hairline)}
.tier-band{font-family:var(--data);font-size:23px;font-weight:600;color:var(--ink)}
.tier-count{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}
.tier-track{height:6px;background:var(--cream);position:relative}
.tier-fill{height:100%;background:var(--wine)}
.tier-pct{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);text-align:right}
.tier-row .tier-note{grid-column:1/-1;margin-top:8px;font-size:14px;color:var(--ink-soft)}
@media(max-width:640px){.tier-row{grid-template-columns:1fr 56px;row-gap:10px}.tier-band{grid-column:1/-1}}

/* ---- Data tables (neighborhood + HOA) ---- */
.col-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.col-table{width:100%;border-collapse:collapse;min-width:620px}
.col-table th{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:0 18px 12px 0;border-bottom:1px solid var(--char)}
.col-table td{font-family:var(--data);font-size:21px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;padding:16px 18px 16px 0;border-bottom:1px solid var(--hairline);white-space:nowrap;vertical-align:middle;line-height:1.3}
.col-table td.num,.col-table th.num{text-align:center;padding-right:18px;padding-left:18px}
.col-table td:first-child{font-family:var(--sans);font-size:15px;font-weight:600;white-space:normal}
.col-table td.txt{font-family:var(--sans);font-size:14px;font-weight:500;white-space:normal;color:var(--ink-soft)}
.col-table td a{color:var(--ink);text-decoration:none}
.col-table td a:hover{color:var(--wine)}
.col-table tr.low-sample td{color:var(--ink-soft)}
.ls-flag{display:block;width:max-content;margin-top:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--hairline);padding:3px 8px}

/* ---- True monthly cost chart ---- */
.monthly-grid{border-top:1px solid var(--char);max-width:760px}
.monthly-line{display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--hairline)}
.monthly-line span{font-size:15px;font-weight:700;color:var(--ink)}
.monthly-line b{font-family:var(--data);font-size:29px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.monthly-line b.pend{color:var(--ink-soft);font-weight:500;font-style:italic}
.monthly-line em{grid-column:1/-1;font-style:normal;font-size:12.5px;color:var(--ink-soft);margin-top:5px;max-width:560px}
.monthly-line.total{border-bottom:2px solid var(--char)}
.monthly-line.total b{font-size:38px}
.monthly-bar{grid-column:1/-1;height:6px;background:var(--cream);margin-top:10px}
.monthly-bar i{display:block;height:100%;background:var(--wine)}

/* ---- HOA Q&A + shared bits ---- */
.body-p{max-width:720px;font-size:15.5px;color:var(--ink);margin:0 0 18px}
.mover-links{display:flex;gap:28px;flex-wrap:wrap;margin-top:26px}
.hoa-q{max-width:760px;margin-top:34px}
.hoa-q h3{margin-top:38px;margin-bottom:10px;font-size:24px}
.hoa-q h3:first-child{margin-top:0}
.hoa-q p{font-size:15px;color:var(--ink);max-width:720px}

/* ==========================================================================
   SECONDARY SCHOOL PAGES (middle / high / private)
   Ported verbatim from the approved Western, Henley, Field School and Miller
   drafts. Every rule here is town-agnostic — a new town reuses all of it and
   supplies only the values in its own <town>.json under schools.secondary[].
   ========================================================================== */

/* ---- hero variant: content bottom-anchored AND centered, stats baked in ----
   The shared .hero above is bottom-LEFT. Secondary school pages are
   bottom-CENTER with a stat row inside the green. This is a modifier, not a
   rewrite, so the home page and hub heroes are untouched. */
.hero.stat-hero{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;overflow:hidden}
.hero.stat-hero .hero-inner{padding:0 28px 46px;max-width:1140px;margin:0 auto;text-align:center}
.hero.stat-hero h1{font-size:clamp(44px,7.6vw,96px);max-width:900px;margin:0 auto 22px}
.hero.stat-hero .hero-sub{font-size:clamp(15px,1.9vw,18px);color:rgba(255,255,255,.82);max-width:620px;margin:0 auto 34px}
.hero.stat-hero .hero-ctas{justify-content:center;margin-bottom:44px}
.hero.stat-hero .hero-note{position:static;transform:none;width:auto;pointer-events:auto;
  padding:22px 28px 0;font-size:10.5px;letter-spacing:.18em;color:rgba(255,255,255,.35);margin:0}
.hero-rule{border:none;border-top:1px solid rgba(255,255,255,.22);max-width:1140px;margin:0 auto}

/* stat row baked directly into the green — data-font numbers, mono caps labels */
.hero-stats{display:flex;flex-wrap:wrap;justify-content:center;padding-top:44px}
.hero-stats .stat{flex:0 1 200px;padding:0 28px;border-right:1px solid rgba(255,255,255,.18)}
.hero-stats .stat:last-child{border-right:none}
.hero-stats .stat b{display:block;font-family:var(--data);font-weight:600;font-size:clamp(27px,2.9vw,37px);color:#fff;line-height:1;margin-bottom:8px}
.hero-stats .stat span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media(max-width:760px){.hero-stats .stat{flex:0 1 45%;padding:0 16px 20px}}

/* ---- "The Short Version": centered head, left-aligned body ---- */
.short-version{padding-top:80px;padding-bottom:80px;text-align:center}
.short-version .label{display:block;margin-bottom:16px}
.short-version h2{margin-bottom:26px}
.short-version .sv-rule{border:none;border-top:1.5px solid var(--char);margin-bottom:36px}
.short-version .body{text-align:left;max-width:960px;margin:0 auto}
.short-version .lede{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:18px}
.short-version .sub{font-size:16px;color:var(--ink-soft)}

/* ---- data block + facts table (academics, program details) ---- */
.datablock{background:#fff;border:1px solid var(--hairline);padding:30px 32px;margin-bottom:14px}
.datablock .takeaway{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:20px;text-align:left;max-width:none}
table.factstable{width:100%;border-collapse:collapse;font-size:14.5px}
table.factstable th,table.factstable td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--hairline)}
table.factstable th:last-child,table.factstable td:last-child{text-align:center}
table.factstable th{font-family:var(--sans);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
table.factstable td b{font-family:var(--data);font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}

/* ---- feeder pipeline / "where it fits": 3 identical white cards.
   No card gets a dark highlight — "you are here" is carried by the eyebrow
   text alone. Do not add a .current background variant here. ---- */
.pipeline{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);text-align:center}
.pipeline .sec-top,.pipeline .sec-answer{margin-left:auto;margin-right:auto;text-align:center}
.pipeline-rule{border:none;border-top:1.5px solid var(--char);margin:0 0 2px}
.pipeline-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hairline)}
.pcard{background:#fff;padding:30px 26px;text-align:left;border-right:1px solid var(--hairline)}
.pcard:last-child{border-right:none}
.pcard .peyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:10px}
.pcard h3{font-size:22px;margin-bottom:10px}
.pcard p{font-size:14px;color:var(--ink-soft);margin-bottom:14px}
.pcard .textlink{font-size:11.5px}
@media(max-width:820px){.pipeline-grid{grid-template-columns:1fr}.pcard{border-right:none;border-bottom:1px solid var(--hairline)}.pcard:last-child{border-bottom:none}}

/* ---- headline stat row on light background (athletics) ---- */
.stats-row{display:flex;flex-wrap:wrap;justify-content:center;padding-top:44px;border-top:2px solid var(--char)}
.stats-row .stat{flex:0 1 240px;padding:0 34px;border-right:1px solid var(--hairline)}
.stats-row .stat:last-child{border-right:none}
.stats-row .stat b{display:block;font-family:var(--data);font-weight:600;font-size:clamp(28px,3vw,41px);color:var(--ink);line-height:1;margin-bottom:10px}
.stats-row .stat > span{display:block;font-family:var(--sans);font-weight:700;font-size:13.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.stats-row .stat em{display:block;font-style:normal;font-size:13px;color:var(--delta)}
.stats-meta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-soft);text-transform:uppercase;padding-top:18px;border-top:1px solid var(--hairline);text-align:center}
@media(max-width:760px){.stats-row .stat{flex:0 1 45%;padding:0 18px 20px}}

/* ---- tag row (clubs, sports offered) ---- */
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* ---- trailing note paragraph under a section (replaces inline styles) ---- */
.sec-note{margin-top:22px;font-size:15.5px;color:var(--ink-soft);max-width:700px}
.datablock + .sec-note{margin-top:26px}

/* ==========================================================================
   THINGS TO DO — hub (/things-to-do/) + 4 season pages (Aug 2026)
   New, namespaced components. Reuses existing shared blocks where possible:
   .hero.center, .crumb (breadcrumb.njk), .short-version, .faq, .capture,
   .byline — none of those are redefined here.
   Renamed .tier -> .td-tier: a ".tier" class already exists (budget-tier
   cards, schools-hub table row header) with a different, incompatible
   definition — reusing it here would have broken one of those two pages.
   ========================================================================== */

/* ---- season doors (hub) ---- */
.td-seasons{padding-top:92px;padding-bottom:92px}
.season-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.season{position:relative;display:flex;align-items:flex-end;aspect-ratio:16/10;overflow:hidden;text-decoration:none;color:#fff}
.season .ph{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.season::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.10) 30%,rgba(20,18,16,.82) 100%)}
.season:hover .ph{transform:scale(1.045)}
.season-body{position:relative;z-index:2;padding:34px 36px;width:100%}
.season-body .k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);display:block;margin-bottom:10px}
.season-body h3{font-family:var(--serif);font-size:clamp(30px,3.4vw,42px);color:#fff;font-weight:600;margin-bottom:8px}
.season-body p{font-size:14.5px;color:rgba(255,255,255,.85);max-width:420px;margin-bottom:16px}
.season-body .go{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px}
@media(max-width:720px){.season-grid{grid-template-columns:1fr}.season{aspect-ratio:4/3}.season-body{padding:26px 24px}}

/* ---- listing sections: wineries / restaurants / outdoors (hub), and the
   "what to do this season" grid (season pages) ---- */
.td-sec{padding-top:84px;padding-bottom:84px}
.td-sec.alt{background:var(--cream);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.td-head{text-align:center;max-width:780px;margin:0 auto 14px}
.td-head .label{display:block;margin-bottom:14px}
.td-head h2{font-size:clamp(30px,4vw,46px)}
.td-intro{max-width:720px;margin:22px auto 56px;text-align:center;font-size:16.5px;font-weight:600}

/* tier header — label / rule / count above a card grid */
.td-tier{display:flex;align-items:baseline;gap:18px;margin:0 0 30px}
.td-tier h3{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--wine);font-weight:500;white-space:nowrap}
.td-tier .rule{flex:1;border-top:1px solid var(--char)}
.td-tier .n{font-family:var(--mono);font-size:11px;color:var(--ink-soft);letter-spacing:.1em;white-space:nowrap}

/* full cards — winery/restaurant/park/season-activity photo cards */
.td-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
.td-card{display:flex;flex-direction:column}
.td-frame{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--sand)}
.td-frame .ph{position:absolute;inset:0}
.td-cap{border-top:1px solid var(--char);margin-top:16px;padding-top:13px}
.td-cap h3{font-size:24px;margin-bottom:6px}
.td-addr{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--delta);margin-bottom:11px}
.td-card p{font-size:14.5px;line-height:1.65}
.td-note{margin-top:10px;padding-left:12px;border-left:2px solid var(--delta);font-size:13.5px;color:var(--ink-soft)}
@media(max-width:900px){.td-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.td-grid{grid-template-columns:1fr}}

/* collapsible tiers below the card grid, and the spring/summer/fall/winter
   calendar table — native <details>/<summary>, not JS-hidden */
.drop{margin-top:22px;border-top:1px solid var(--char)}
.drop summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:16px;padding:22px 2px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--wine)}
.drop summary::-webkit-details-marker{display:none}
.drop summary .n{margin-left:auto;color:var(--ink-soft);letter-spacing:.1em}
.drop summary::after{content:'+';font-size:18px;line-height:1;color:var(--wine);width:14px;text-align:right}
.drop[open] summary::after{content:'–'}
.drop summary:hover{color:var(--delta)}
.drop .inner{padding:4px 0 34px}
.drop+.drop{margin-top:0}

.td-table{width:100%;border-collapse:collapse;font-size:14.5px}
.td-table th{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;text-align:left;padding:0 14px 12px 0;border-bottom:1px solid var(--char)}
.td-table td{padding:13px 14px 13px 0;border-bottom:1px solid var(--hairline);vertical-align:top}
.td-table td:first-child{font-weight:600;white-space:nowrap}
.td-table .town{font-family:var(--mono);font-size:12px;color:var(--ink-soft);letter-spacing:.04em}
.td-table .when{font-family:var(--data);font-size:15px;color:var(--ink);white-space:nowrap}
@media(max-width:640px){.td-table td:first-child{white-space:normal}.td-table th:nth-child(2),.td-table td:nth-child(2){display:none}}

.sec-foot{margin-top:30px;font-size:14px;color:var(--ink-soft);max-width:820px}
.src-line{margin-top:34px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:center}

/* ---- what it costs (season pages): three columns, free / a few dollars / where it adds up ---- */
.cost{padding-top:88px;padding-bottom:88px}
.cost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;margin-top:8px}
.cost-col{border-top:1px solid var(--char);padding-top:18px}
.cost-col h3{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--wine);font-weight:500;margin-bottom:6px}
.cost-col .cap{font-size:13.5px;color:var(--ink-soft);margin-bottom:20px}
.cost-row{border-top:1px solid var(--hairline);padding:14px 0;display:flex;gap:14px;align-items:baseline}
.cost-row:first-of-type{border-top:none}
.cost-row .what{flex:1;font-size:14.5px;line-height:1.55}
.cost-row .amt{font-family:var(--data);font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap;text-align:right}
.cost-row .amt.free{color:var(--delta)}
.cost-note{margin-top:30px;padding:22px 24px;background:var(--cream);border-left:3px solid var(--delta);font-size:14.5px;max-width:860px}
.cost-note strong{color:var(--ink)}
@media(max-width:860px){.cost-grid{grid-template-columns:1fr;gap:0}.cost-col{margin-bottom:26px}}

/* ---- season switcher (season pages): the other three seasons ---- */
.switch{padding-top:80px;padding-bottom:80px}
.switch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sw{position:relative;display:flex;align-items:flex-end;aspect-ratio:16/10;overflow:hidden;text-decoration:none;color:#fff}
.sw .ph{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.sw::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.10) 30%,rgba(20,18,16,.80) 100%)}
.sw:hover .ph{transform:scale(1.05)}
.sw-body{position:relative;z-index:2;padding:24px 26px;width:100%}
.sw-body .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);display:block;margin-bottom:8px}
.sw-body h3{font-family:var(--serif);font-size:28px;color:#fff;font-weight:600}
@media(max-width:720px){.switch-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion: reduce){.season:hover .ph,.sw:hover .ph{transform:none}}

/* ==========================================================================
   ABOUT — /about/ (Aug 2026)
   Deliberately its own visual pattern: no .hero, no dark video band, no
   stats bar. A quiet portrait intro + reading column + two photos + a
   plain credentials line + a simple CTA. All new selectors are prefixed
   "about-" — nothing here redefines a shared class. Everything else on
   this page (.wrap, .crumb, .label, .btn) is the site's existing shared
   CSS, unchanged.
   ========================================================================== */

/* body.no-hero — a reusable structural fix, not About-specific styling.
   header{} is position:fixed with white text everywhere, because on every
   existing page it sits transparently over a tall, dark .hero. About is
   the first page with no hero at all, so the fixed header floated over
   the breadcrumb with unreadable near-white text. Any future hero-less
   page (e.g. a plain FAQ page) should reuse body.no-hero rather than
   reinventing this. */
body.no-hero header{background:rgba(250,248,244,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--hairline)}
body.no-hero .logo,body.no-hero .nav-links a{color:var(--ink)}
body.no-hero .nav-links a:hover{color:var(--wine)}
body.no-hero .nav-links a[aria-current="page"]{border-bottom-color:var(--wine)}
body.no-hero header:not(.scrolled) .nav .btn{background:var(--char);color:var(--ivory)}
body.no-hero header:not(.scrolled) .nav .btn:hover{background:var(--wine-deep)}
body.no-hero .crumb{padding-top:96px}

.about-intro{padding:56px 0 70px}
.about-intro-grid{display:grid;grid-template-columns:260px 1fr;gap:52px;align-items:center}
.about-portrait{position:relative;aspect-ratio:4/5}
.about-portrait .ph{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);text-align:center;padding:20px;width:100%;height:100%}
.about-intro-text .label{margin-bottom:14px;display:block}
.about-intro-text h1{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;font-size:clamp(38px,5.4vw,56px);margin-bottom:10px;color:var(--ink)}
.about-role{font-size:15.5px;color:var(--ink-soft);font-weight:600;margin-bottom:20px}
.about-quote{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);line-height:1.4;border-left:3px solid var(--wine);padding-left:20px}
@media(max-width:700px){.about-intro-grid{grid-template-columns:1fr;gap:28px}.about-portrait{max-width:220px}}

.about-bio{padding:0 0 60px}
.about-bio-col{max-width:680px}
.about-bio-col p{font-size:16px;color:var(--ink);margin-bottom:20px}
.about-bio-col p:last-child{margin-bottom:0}
.about-placeholder{background:var(--cream);border-left:3px solid var(--sand);padding:10px 14px}
.about-quote.about-placeholder{border-left-color:var(--wine)}

.about-photos{padding:0 0 70px}
.about-photo-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.about-photo-row .ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:center;padding:14px}
@media(max-width:640px){.about-photo-row{grid-template-columns:1fr}}

.about-creds{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:26px 0}
.about-creds-row{display:flex;flex-wrap:wrap;gap:34px 44px}
.about-cred b{display:block;font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:600;margin-bottom:2px}
.about-cred span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

.about-cta{padding:64px 0;text-align:center}
.about-cta h2{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--ink);font-size:clamp(26px,3.4vw,34px);margin-bottom:12px}
.about-cta p{color:var(--ink-soft);max-width:440px;margin:0 auto 26px;font-size:15.5px}

/* ============================================================
   PLAIN PAGE — utility pages with no photo hero
   Applied via bodyClass: page-plain in front matter.
   Used by: /thank-you/. Reusable for /privacy/ and any future
   confirmation or legal page.

   Why this exists: the site header is white text sized to sit
   over a dark photo hero. On an ivory page that header is
   invisible. This block flips it to solid, and pins the footer
   to the bottom so a short page never looks half-loaded.
   ============================================================ */

body.page-plain{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Header: solid ivory instead of transparent-over-photo.
   Mirrors the .scrolled state rather than inventing a new look. */
body.page-plain header{
  position:static;
  background:var(--ivory);
  border-bottom:1px solid var(--hairline);
  padding:18px 0;
  backdrop-filter:none;
}
body.page-plain header .logo{color:var(--ink)}
body.page-plain header .nav-links a{color:var(--ink-soft)}
body.page-plain header .nav-links a:hover{color:var(--ink)}
body.page-plain header .nav .btn{
  background:var(--char);
  backdrop-filter:none;
  padding:11px 20px;
  font-size:11px;
}
body.page-plain header .nav .btn:hover{background:var(--wine)}

/* The message. flex:1 on main pushes the footer down. */
.plain-main{
  flex:1;
  display:flex;
  align-items:center;
  padding:88px 0;
}
.plain-msg{max-width:600px}
.plain-msg h1{
  font-size:clamp(42px,6vw,64px);
  margin-bottom:22px;
}
.plain-msg p{
  font-size:18px;
  color:var(--ink);
  margin-bottom:16px;
}
.plain-msg .quiet{
  font-size:15px;
  color:var(--ink-soft);
}
.plain-msg .onward{
  margin-top:38px;
  padding-top:24px;
  border-top:1px solid var(--hairline);
  font-size:14px;
  color:var(--ink-soft);
}
.plain-msg .onward a{
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--sand);
}
.plain-msg .onward a:hover{border-bottom-color:var(--ink)}

@media(max-width:600px){
  .plain-main{padding:60px 0}
}

/* ============ end plain page ============ */

/* ==========================================================================
   MOBILE NAVIGATION — added 1 Sep 2026. Town-agnostic.
   Above 940px nothing here applies; the desktop nav is untouched.
   At/below 940px the inline links and the header CTA hide, the toggle button
   appears, and the panel below the bar carries the whole menu.
   The toggle and logo inherit their color from the header's existing states
   (over-hero = white, scrolled / no-hero / page-plain = ink).
   ========================================================================== */

/* The panel is a sibling AFTER </header>, deliberately not inside it: a scrolled
   header carries backdrop-filter, which makes it the containing block for any
   fixed-position descendant and collapses the panel to the height of the bar. */

/* ---- toggle button ---- */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  margin-right:-10px;padding:0;background:none;border:none;cursor:pointer;color:#fff}
.nav-toggle-box{display:block;width:24px;height:14px;position:relative}
.nav-toggle-bar{position:absolute;left:0;width:24px;height:1.5px;background:currentColor;
  transition:transform .28s ease,opacity .18s ease,top .28s ease}
.nav-toggle-bar:first-child{top:0}
.nav-toggle-bar:last-child{top:12.5px}
header.nav-open .nav-toggle-bar:first-child{top:6px;transform:rotate(45deg)}
header.nav-open .nav-toggle-bar:last-child{top:6px;transform:rotate(-45deg)}

/* Match the logo's color in every header state. */
header.scrolled .nav-toggle,
body.no-hero .nav-toggle,
body.page-plain header .nav-toggle,
header.nav-open .nav-toggle,
header.nav-open .logo{color:var(--ink)}

/* ---- panel ---- */
.mobile-nav{display:none}
.mobile-nav-inner{width:100%;max-width:520px;margin:0 auto;padding:0 28px 48px}
.mobile-nav-links{list-style:none}
.mobile-nav-links li{border-bottom:1px solid var(--hairline)}
.mobile-nav-links li:first-child{border-top:1px solid var(--hairline)}
.mobile-nav-links a{display:block;padding:20px 0;min-height:44px;text-decoration:none;
  font-family:var(--serif);font-weight:600;font-size:clamp(26px,7.4vw,32px);
  line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.mobile-nav-links a[aria-current="page"]{color:var(--wine)}
.mobile-nav-links a[aria-current="page"]::after{content:"";display:inline-block;
  width:7px;height:7px;margin-left:12px;vertical-align:middle;background:var(--sand)}
.mobile-nav-cta{width:100%;justify-content:center;margin-top:32px;padding:19px 24px;font-size:12px}
.mobile-nav-note{margin-top:22px;text-align:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

/* ---- the 940px switch ---- */
@media(max-width:940px){
  .nav-toggle{display:inline-flex}
  .nav .btn.nav-cta{display:none}
  .mobile-nav:not([hidden]){display:flex;position:fixed;inset:0;z-index:55;
    flex-direction:column;justify-content:center;overflow-y:auto;
    padding:96px 0 32px;background:var(--ivory);
    animation:navIn .26s ease both}
}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .mobile-nav:not([hidden]){animation:none}
  .nav-toggle-bar{transition:none}
}

/* Panel open: freeze the page behind it. */
body.nav-lock{overflow:hidden}

/* ==========================================================================
   LEGAL PAGE — long-form utility text (/privacy/, and any future /terms/).
   Sits on top of the .page-plain body class, which already solves the
   invisible-header problem. This block only handles reading a wall of text:
   a narrower measure, real heading hierarchy, and generous section spacing.
   Town-agnostic.
   ========================================================================== */

.legal-main{align-items:flex-start;padding:64px 0 88px}
.legal{max-width:64ch}
.legal-head{padding-bottom:26px;border-bottom:1px solid var(--hairline)}
.legal-head h1{font-size:clamp(38px,5.4vw,54px);line-height:1.02;margin-bottom:14px}
.legal-updated{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px}
.legal-lede{font-size:18px;line-height:1.6;color:var(--ink)}
.legal-sec{margin-top:42px}
.legal-sec h2{font-size:26px;line-height:1.12;margin-bottom:12px}
.legal-sec p{font-size:15.5px;line-height:1.72;color:var(--ink-soft)}
.legal-sec p + p{margin-top:13px}
.legal-sec p strong{color:var(--ink);font-weight:700}
.legal-contact{border-top:1px solid var(--hairline);padding-top:34px}
.legal-contact address{font-style:normal;margin-top:14px;font-size:15.5px;line-height:1.75}
.legal-contact address strong{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink)}
.legal-contact a{color:var(--ink);border-bottom:1px solid var(--sand)}
@media(max-width:640px){.legal-main{padding:44px 0 64px}.legal-sec{margin-top:34px}}

/* Plain pages set `position:static` on the header, so once the page is
   scrolled the toggle button scrolls away with it — leaving the open menu
   with no visible close control. Pin the header for as long as it is open. */
body.nav-lock header{position:fixed;top:0;left:0;right:0}

/* MLS compliance attribution — sitewide footer. Quiet by design: it is a legal
   notice, not a design element, but it must stay legible. Town-agnostic. */
.foot-compliance{
  margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.55);
  max-width:78ch;
}