/* ==========================================================================
   Equity Property Management - theme stylesheet
   Brand System v1, palette Option A. Every value here is from the deck.

   Assembled 2026-08-17 from the approved static build:
     site/index.html   (base + homepage)
     site/contact.html (emergency bar, forms, details)
     site/about.html   (about hero, facts, story, CTA band)
     site/blog.html    (two-track post surface)
   Base rules come from index.html because it is the superset. Page blocks are
   appended in page order. Do not re-split this file per page.

   HARD RULE from the brand deck: never #000000. The brand black is --forest.
   ========================================================================== */

:root{
  /* Option A - sampled from the mark. Brand System v1, section 03. */
  --forest:#0E2C24;      /* text/primary, dark sections, primary button fill */
  --green:#489E81;       /* fills, strokes, borders. NEVER body text. */
  --green-700:#2F7A62;   /* the only green text sits in */
  --sage:#84BA89;        /* accent text on forest */
  --pale-sage:#BFD49C;
  --charcoal:#2E3532;    /* body */
  --gray:#6B7671;        /* secondary */
  --border:#DCE2DA;
  --surface:#FFFFFF;
  --surface-alt:#F7F9F6;
  --alert:#C0271F;       /* functional only. used once, on Contact. not brand. */
  --gutter:24px;
  --max:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Source Sans 3',system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.65;
  color:var(--charcoal);background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--forest)}
h1{font-weight:800;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-.025em}
h2{font-weight:700;font-size:clamp(30px,3.6vw,40px);line-height:1.15;letter-spacing:-.02em}
h3{font-weight:700;font-size:28px;line-height:1.25;letter-spacing:-.015em}
p{max-width:62ch}
a{color:var(--green-700)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--green);outline-offset:3px;border-radius:2px;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.label{
  font-weight:600;font-size:13px;line-height:1.4;letter-spacing:.10em;
  text-transform:uppercase;color:var(--green-700);
}
.label.on-dark{color:var(--sage)}
.lead{font-size:21px;line-height:1.6;color:var(--charcoal)}
.small{font-size:16px;line-height:1.55}
.muted{color:var(--gray)}

/* Bracketed values are open. Marked, never faked. Brand System v1, section 04 + close. */
.pending{
  color:var(--gray);border-bottom:1px dashed var(--green);
  padding-bottom:1px;font-style:normal;
}

/* ---------- BUTTONS - 8px radius, no shadow, no gradient ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:13px 24px;border-radius:8px;
  font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:17px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-primary{background:var(--forest);color:#fff}
.btn-primary:hover{background:#143B30}
.btn-secondary{background:#fff;color:var(--forest);border-color:var(--forest)}
.btn-secondary:hover{border-color:var(--green-700);color:var(--green-700)}
.btn-on-dark{background:#fff;color:var(--forest)}
.btn-on-dark:hover{background:#F2F6F1}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.4em;min-height:48px;
  color:var(--green-700);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--green);align-self:flex-start;
}

/* Portal buttons - external. The 4px green left edge means "this leaves the site."
   Nothing else on the site uses it. */
.portal{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:12px 16px;
  border:1px solid var(--border);border-left:4px solid var(--green);
  border-radius:8px;background:#fff;color:var(--forest);
  font-weight:600;font-size:17px;text-decoration:none;
  transition:border-color .15s ease;
}
.portal:hover{border-color:var(--green)}
.portal-solid{background:var(--forest);color:#fff;border-color:var(--forest);border-left-color:var(--green)}
.portal-solid:hover{background:#143B30;border-color:#143B30;border-left-color:var(--green)}
.icon{width:24px;height:24px;flex:none;stroke:var(--green);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.icon-sm{width:18px;height:18px}
.on-forest .icon{stroke:var(--sage)}

/* ---------- HEADER - 88px at rest, 64px past 120px of scroll ---------- */
header{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--border);
}
.bar{
  height:88px;display:flex;align-items:center;gap:32px;
  transition:height .2s ease-out;
}
header.scrolled .bar{height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo svg{width:34px;height:34px;flex:none}
/* Client-supplied lockup, 2026-08-12. Height-locked so the 88px/64px header swap
   never reflows it. The SVG rules above stay for any view that falls back. */
.logo img{height:54px;width:auto;display:block}
header.scrolled .logo img{height:44px}
.logo .word{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:20px;letter-spacing:-.02em;color:var(--forest);line-height:1;
}
.logo .sub{
  font-family:'Source Sans 3',sans-serif;font-weight:400;
  font-size:11px;letter-spacing:.04em;color:var(--gray);line-height:1.2;
}
nav{margin-left:auto;display:flex;align-items:center;gap:28px}
nav a.nav-link{
  color:var(--charcoal);text-decoration:none;font-weight:400;font-size:17px;
}
nav a.nav-link:hover{color:var(--green-700)}
.tel{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--forest);font-weight:600;text-decoration:none;white-space:nowrap;
}
.menu-btn{display:none;background:none;border:none;padding:10px;cursor:pointer}

/* ---------- HERO - asymmetric 52/48. The photo is a panel, never a background. ---------- */
.hero{display:grid;grid-template-columns:52fr 48fr;align-items:stretch;
  border-bottom:1px solid var(--border)}
.hero-copy{padding:96px 0 96px;display:flex;flex-direction:column;justify-content:center}
/* Right-align the copy block inside the 52fr column so its left edge lands on the
   same vertical as .wrap does further down the page. */
.hero-copy .inner{width:100%;max-width:calc(var(--max) * .52);margin-left:auto;
  padding:0 56px 0 var(--gutter)}
.hero h1{margin:18px 0 22px}
.hero .lead{max-width:36ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* Photo panels - CSS placeholders standing in for the shot list, section 07. */
.photo{
  background:var(--surface-alt);border-left:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;padding:40px;min-height:520px;
}
.photo .note{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;line-height:1.7;color:var(--gray);text-align:center;max-width:34ch;
  text-transform:uppercase;letter-spacing:.06em;
}
.photo .note strong{display:block;color:var(--green-700);margin-bottom:8px;letter-spacing:.14em}
/* A photo panel that now holds a real image instead of a shot-list note.
   min-width:0 on the grid children - without it the image's intrinsic width
   becomes the column's min-content size and eats the copy column. */
.photo.filled{padding:0;overflow:hidden}
.photo.filled img{width:100%;height:100%;object-fit:cover;display:block}
.hero>*,.why-grid>*{min-width:0}

section{padding:96px 0}
.section-head{margin-bottom:48px;max-width:64ch}
.section-head .label{display:block;margin-bottom:14px}

/* ---------- THE TWO-DOOR FORK ---------- */
.fork{background:var(--surface-alt);border-bottom:1px solid var(--border)}
.fork-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;margin-bottom:40px;flex-wrap:wrap}
.fork-head .aside{font-size:17px;color:var(--gray);max-width:34ch;text-align:right}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.door{
  border:1px solid var(--border);border-radius:8px;background:#fff;
  padding:40px;display:flex;flex-direction:column;
  transition:border-color .15s ease;
}
.door:hover{border-color:var(--green)}
.door.on-forest{background:var(--forest);border-color:var(--forest)}
.door.on-forest h3,.door.on-forest .h2ish{color:#fff}
.door.on-forest p,.door.on-forest li{color:#D6E2DB}
.door .h2ish{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
  font-size:32px;line-height:1.15;letter-spacing:-.02em;color:var(--forest);
  margin:14px 0 16px;
}
.door ul{list-style:none;margin:26px 0 0;display:flex;flex-direction:column;gap:11px}
.door li{display:flex;gap:11px;align-items:flex-start;font-size:17px}
.door-foot{margin-top:auto;padding-top:34px;display:flex;align-items:center;
  gap:18px;flex-wrap:wrap}
.portal-stack{margin-top:auto;padding-top:34px;display:flex;flex-direction:column;gap:12px}
.portal-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- PROOF BAR ---------- */
.proof{background:var(--forest);color:#fff;padding:64px 0}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.proof .num{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:56px;
  line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
}
.proof .num .pending{color:var(--sage);border-bottom-color:var(--sage)}
.proof .cap{margin-top:12px;color:var(--sage);font-size:15px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase}

/* ---------- WHAT WE HANDLE ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tile{border:1px solid var(--border);border-radius:8px;padding:32px;background:#fff;
  transition:border-color .15s ease}
.tile:hover{border-color:var(--green)}
.tile h3{font-size:22px;margin:20px 0 10px}
.tile p{font-size:17px;color:var(--charcoal)}

/* ---------- WHY EQUITY ---------- */
.why{background:var(--surface-alt);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.why-grid{display:grid;grid-template-columns:44fr 56fr;gap:64px;align-items:center}
.why .photo{min-height:560px;border:1px solid var(--border);border-radius:8px}
.why .quote{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(34px,4vw,48px);line-height:1.1;letter-spacing:-.025em;
  color:var(--forest);margin:16px 0 24px;
}
.sig{display:flex;align-items:center;gap:14px;margin-top:32px}
.sig .rule{width:44px;height:2px;background:var(--green);flex:none}
.sig .name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
  font-size:18px;color:var(--forest)}
.sig .role{font-size:16px;color:var(--gray)}

/* ---------- SERVICE AREA ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);border-radius:8px;padding:11px 18px;
  font-weight:600;font-size:17px;color:var(--forest);background:#fff;
}
.chip.open{border-style:dashed;border-color:var(--green);color:var(--gray);font-weight:400}

/* ---------- TESTIMONIALS - real reviews, pulled from the Equity Facebook page
   2026-08-16. First names only, per client instruction. The dashed "slot"
   placeholder these replaced is gone. ---------- */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.quote-card{
  border:1px solid var(--border);border-left:3px solid var(--green);
  border-radius:8px;background:#fff;padding:32px;
  display:flex;flex-direction:column;
}
.quote-card .src{
  font-weight:600;font-size:12px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--green-700);margin-bottom:16px;
}
.quote-card blockquote{
  font-size:17px;line-height:1.62;color:var(--charcoal);
}
.quote-card .who{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:12px}
.quote-card .who .rule{width:26px;height:2px;background:var(--green);flex:none}
.quote-card .who .n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
  font-size:17px;color:var(--forest)}
.quote-card .who .r{font-size:15px;color:var(--gray)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
details{border-bottom:1px solid var(--border);padding:20px 0}
details summary{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:19px;
  color:var(--forest);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  min-height:28px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"";width:12px;height:12px;flex:none;
  border-right:1.5px solid var(--green);border-bottom:1.5px solid var(--green);
  transform:rotate(45deg);transition:transform .2s ease;margin-bottom:4px;
}
details[open] summary::after{transform:rotate(-135deg);margin-bottom:0}
details p{margin-top:14px;font-size:17px}

/* ---------- CLOSING CTA + FOOTER ---------- */
/* ---------- PHOTO BANDS - still panels, never backgrounds. Nothing sits over them. ---------- */
.area-photo{margin-top:44px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.area-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.area-photo figcaption{padding:14px 18px;background:var(--surface-alt);
  border-top:1px solid var(--border);font-size:15px;color:var(--gray)}
.band{display:block;width:100%}
.band img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;max-height:520px}

.close-cta{background:var(--forest);color:#fff;padding:96px 0}
.close-cta h2{color:#fff;max-width:20ch}
.close-cta .lead{color:#D6E2DB;margin-top:18px;max-width:46ch}
.close-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
footer{background:#0A211B;color:#B9C9C0;padding:64px 0 40px;font-size:16px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.10em;text-transform:uppercase;color:var(--sage);margin-bottom:18px}
footer a{color:#B9C9C0;text-decoration:none;display:inline-block;padding:5px 0}
footer a:hover{color:#fff}
footer ul{list-style:none}
.foot-logo{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.foot-logo svg{width:32px;height:32px}
.foot-logo .word{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:19px;color:#fff;letter-spacing:-.02em;line-height:1}
.foot-logo .sub{font-size:11px;color:#8FA79B;letter-spacing:.04em}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding-top:24px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:#8FA79B}

/* ---------- MOBILE STICKY BAR - appears after the fork ---------- */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--border);
  backdrop-filter:blur(8px);
  transform:translateY(110%);transition:transform .2s ease-out;
}
.sticky-bar.show{transform:translateY(0)}
.sticky-bar .btn{flex:1;font-size:16px;padding:12px 14px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .tiles{grid-template-columns:1fr 1fr}
  .why-grid{gap:40px}
  .proof .num{font-size:44px}
}
@media (max-width:900px){
  :root{--gutter:20px}
  body{font-size:17px}
  section{padding:64px 0}
  nav .nav-link{display:none}
  .menu-btn{display:block}
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:56px 0 48px}
  .hero-copy .inner{padding:0 var(--gutter);margin-left:0;max-width:none}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
  .photo{border-left:none;border-top:1px solid var(--border);min-height:320px;aspect-ratio:4/5}
  .doors{grid-template-columns:1fr}
  .fork-head .aside{text-align:left}
  .proof-grid{grid-template-columns:1fr;gap:32px}
  .why-grid{grid-template-columns:1fr}
  .why .photo{min-height:380px;aspect-ratio:auto;order:-1}
  .faq-grid{grid-template-columns:1fr;gap:32px}
  .quotes{grid-template-columns:1fr}
  .quote-card{padding:26px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .sticky-bar{display:flex}
  body{padding-bottom:76px}
  .door{padding:28px}
  .portal-pair{grid-template-columns:1fr}
}
@media (max-width:600px){
  .logo .sub{display:none}
  .close-ctas{flex-direction:column;align-items:stretch}
  .close-ctas .btn{width:100%}
}

/* Mobile header: compact Call button + hamburger. Per the deck's 390pt mockup,
   the phone stays reachable at every breakpoint but collapses to a button. */
.tel-word{display:none}
@media (max-width:900px){
  nav{gap:10px}
  .tel-num{display:none}
  .tel-word{display:inline}
  .tel{background:var(--forest);color:#fff;border-radius:8px;padding:0 16px;
    min-height:48px;font-size:16px}
  .tel .icon{stroke:#fff}
  header .btn-primary{display:none}
}
@media (max-width:600px){
  .tiles{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

/* ---------- CURRENT-PAGE NAV STATE (all pages except the homepage) ---------- */
nav a.nav-link[aria-current]{color:var(--forest);font-weight:600;
  border-bottom:2px solid var(--green);padding-bottom:2px}
/* Grid children need an explicit min-width:0 or long words blow out the column. */
.about-hero>*,.story-grid>*{min-width:0}

/* ==========================================================================
   CONTACT
   ========================================================================== */
/* ---------- EMERGENCY BAR - above the header. First thing painted.
     Red is functional, used once on the whole site. It is not in the brand palette. ---------- */
.emergency{background:var(--alert);color:#fff}
.emergency .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.emergency .txt{display:flex;align-items:center;gap:11px;font-weight:600;font-size:17px}
.emergency .txt span.bold{white-space:nowrap}
.emergency .txt span.thin{font-weight:400}
.emergency .icon{stroke:#fff}
.emergency .num{margin-left:auto;background:#fff;color:var(--alert);font-weight:700;
  border-radius:8px;padding:10px 18px;min-height:48px;display:inline-flex;align-items:center;
  text-decoration:none;white-space:nowrap}

/* padding-top/bottom only. A shorthand here would clobber .wrap's gutter. */
.page-head{padding-top:72px;padding-bottom:40px}
.page-head .label{display:block;margin-bottom:14px}
.forms{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:96px}
.card{border:1px solid var(--border);border-radius:8px;padding:40px;background:#fff;
  transition:border-color .15s ease;display:flex;flex-direction:column}
.card:hover{border-color:var(--green)}
.card.tenant{border-top:3px solid var(--green)}
.card h2{margin:14px 0 8px}
.field{margin-top:22px}
.field label{display:block;font-weight:600;font-size:16px;color:var(--forest);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;min-height:56px;padding:14px 16px;border:1px solid var(--border);border-radius:8px;
  font-family:'Source Sans 3',sans-serif;font-size:17px;color:var(--charcoal);background:#fff;
  transition:border-color .15s ease}
.field textarea{min-height:112px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--green)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card form{display:flex;flex-direction:column;height:100%}
.submit{margin-top:32px;align-self:flex-start}
.portal-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}

.details{background:var(--surface-alt);border-top:1px solid var(--border);padding:72px 0}
.details-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.details h3{margin-bottom:12px}
.details ul{list-style:none}
.details li{padding:5px 0}
.details a{text-decoration:none;font-weight:600}


@media (max-width:900px){
  .emergency .txt{flex-wrap:wrap}
  .emergency .txt span.thin{flex-basis:100%;padding-left:29px}
  .emergency .num{margin-left:0;width:100%;justify-content:center}
  .forms{grid-template-columns:1fr;padding-bottom:64px}
  .card{padding:26px}
  .row{grid-template-columns:1fr}
  .details-grid{grid-template-columns:1fr;gap:32px}
  .portal-pair{grid-template-columns:1fr}
  .submit{width:100%}
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
/* padding-top/bottom only. A shorthand here would clobber .wrap's gutter. */
.about-hero{display:grid;grid-template-columns:52fr 48fr;gap:64px;align-items:center;
  padding-top:80px;padding-bottom:80px}
.about-hero .photo{min-height:520px}
.quote{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(34px,4vw,48px);line-height:1.1;letter-spacing:-.025em;
  color:var(--forest);margin:16px 0 24px}
.story{background:var(--surface-alt);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.story-grid{display:grid;grid-template-columns:56fr 44fr;gap:64px;align-items:start}
.story p+p{margin-top:20px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fact{border:1px solid var(--border);border-radius:8px;padding:28px;background:#fff;
  transition:border-color .15s ease}
.fact:hover{border-color:var(--green)}
.fact .n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:40px;
  line-height:1;letter-spacing:-.03em;color:var(--forest);font-variant-numeric:tabular-nums}
.fact .c{margin-top:10px;font-size:15px;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:var(--green-700)}
.cta-band{background:var(--forest);color:#fff;padding:80px 0}
.cta-band h2{color:#fff;max-width:22ch}
.cta-band .lead{color:#D6E2DB;margin-top:16px;max-width:46ch}
.cta-band .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn-on-dark{background:#fff;color:var(--forest)}
.btn-on-dark:hover{background:#F2F6F1}
@media (max-width:900px){
  .about-hero{grid-template-columns:1fr;gap:32px;padding-top:48px;padding-bottom:48px}
  .about-hero .photo{min-height:340px;order:-1}
  .story-grid{grid-template-columns:1fr;gap:32px}
  .facts{grid-template-columns:1fr}
  .cta-band .row{flex-direction:column;align-items:stretch}
  .cta-band .btn{width:100%}
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.track{margin-bottom:64px}
.track-head{display:flex;align-items:baseline;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.post{border:1px solid var(--border);border-radius:8px;background:#fff;padding:28px;
  display:flex;flex-direction:column;transition:border-color .15s ease;min-height:230px}
.post:hover{border-color:var(--green)}
.post .kicker{font-size:13px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--green-700)}
.post h3{margin:14px 0 12px;font-size:20px}
.post .meta{margin-top:auto;padding-top:18px;font-size:15px;color:var(--gray)}
.queued{border-style:dashed;border-color:var(--green);background:var(--surface-alt)}
.note-band{border:1px solid var(--border);border-left:4px solid var(--green);
  border-radius:8px;padding:28px;background:var(--surface-alt);margin-top:8px}
@media (max-width:900px){.posts{grid-template-columns:1fr}}

/* ==========================================================================
   WORDPRESS SHELL
   Components the static build did not need: a working mobile menu, form status
   messaging, post body copy, and pagination.
   ========================================================================== */

/* Skip link. Visible only once focused. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:12px 18px;
  background:var(--forest);color:#fff;border-radius:8px;text-decoration:none}
.screen-reader-text:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Mobile menu panel. The hamburger in the static build did nothing. */
.mobile-nav{display:none;border-top:1px solid var(--border);background:#fff;
  padding:8px var(--gutter) 16px}
.mobile-nav a{display:block;min-height:48px;display:flex;align-items:center;
  color:var(--charcoal);text-decoration:none;font-size:17px;
  border-bottom:1px solid var(--border)}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav a:hover{color:var(--green-700)}
@media (max-width:900px){
  .mobile-nav:not([hidden]){display:block}
}

/* Form status. Never red unless something actually failed: alert red is
   functional on this site and must not become decoration. */
.form-status{margin-top:18px;padding:14px 16px;border-radius:8px;
  border:1px solid var(--border);border-left:4px solid var(--green);
  background:var(--surface-alt);font-size:16px;line-height:1.55;max-width:none}
.form-status.is-error{border-left-color:var(--alert);color:var(--alert)}

/* Post and page body copy. */
.entry{max-width:72ch}
.entry h2{margin:44px 0 16px}
.entry h3{margin:32px 0 12px}
.entry p{margin-bottom:20px}
.entry ul,.entry ol{margin:0 0 20px 22px}
.entry li{margin-bottom:8px}
.entry img{max-width:100%;height:auto;border-radius:8px}
.entry blockquote{margin:28px 0;padding-left:20px;border-left:4px solid var(--green);
  font-size:21px;line-height:1.6;color:var(--forest)}
.entry a{font-weight:600}

/* Pagination. */
.pagination{display:flex;gap:10px;flex-wrap:wrap;margin-top:48px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;padding:0 14px;border:1px solid var(--border);
  border-radius:8px;text-decoration:none;color:var(--forest);
  transition:border-color .15s ease}
.pagination .page-numbers:hover{border-color:var(--green)}
.pagination .page-numbers.current{background:var(--forest);color:#fff;border-color:var(--forest)}

/* Blog post cards link to real posts now, so the heading carries the anchor. */
.post h3 a{color:var(--forest);text-decoration:none}
.post h3 a:hover{color:var(--green-700)}

/* ==========================================================================
   HERO BANNER VARIANTS
   Decision 4 from the 2026-08-16 review call: move the aerial neighbourhood
   photo to a full-width banner at the very top, headline overlaid to one side.

   Three layouts, chosen in Appearance > Customize. Marty and Andrea pick one.

   The headline is LIVE TEXT over the photo in every variant, never baked into
   an image. Baked-in type is invisible to Google, unreadable to a screen
   reader, and cannot reflow on a phone, and this site exists to rank.

   Contrast: white on a forest scrim at these alphas clears WCAG AA comfortably
   (roughly 12:1 at the headline's position in each layout). Do not thin the
   scrims to show more photograph - the photo is the backdrop, the sentence is
   the product.
   ========================================================================== */

.hero-banner{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:min(78vh,660px);overflow:hidden;background:var(--forest)}
.hero-banner>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
.hero-banner::before{content:"";position:absolute;inset:0;z-index:-1}
.hero-banner .wrap{width:100%;position:relative}
.hero-banner .inner{max-width:52ch}
.hero-banner h1{color:#fff;margin:16px 0 0}
/* The second sentence is the positioning, so it gets its own line and the sage
   accent. "Seventeen years" alone is a tenure stat, and tenure is the scale
   fight this brand deliberately does not enter. */
.hero-banner h1 .promise{display:block;color:var(--pale-sage);margin-top:6px}
.hero-banner .lead{color:#D6E2DB;max-width:44ch;margin-top:22px}
.hero-banner .label{color:var(--pale-sage)}
.hero-banner .hero-ctas{margin-top:34px}
.hero-banner .rule{display:block;width:64px;height:3px;background:var(--green);
  margin-top:28px;border-radius:2px}
.hero-banner .veteran{display:block;font-weight:600;font-size:13px;line-height:1.4;
  letter-spacing:.10em;text-transform:uppercase;color:#fff;opacity:.92;margin-top:14px}

/* ---- A. Left scrim. Closest to the approved homepage, least disruptive. ---- */
.hero-banner.is-scrim::before{
  background:linear-gradient(90deg,
    rgba(14,44,36,.95) 0%, rgba(14,44,36,.92) 34%,
    rgba(14,44,36,.62) 56%, rgba(14,44,36,.18) 78%, rgba(14,44,36,.06) 100%);
}

/* ---- B. Bottom cinematic. Most photo-forward. ---- */
.hero-banner.is-cinematic{align-items:flex-end}
.hero-banner.is-cinematic::before{
  /* The eyebrow sits near the TOP of the text block, roughly three quarters of
     the way up the frame, and the first pass left it on sunlit grass at .19
     alpha. Coverage now holds past that point and only opens up in the top
     fifth, which is the part of the neighbourhood actually worth showing. */
  background:linear-gradient(0deg,
    rgba(14,44,36,.96) 0%, rgba(14,44,36,.93) 32%,
    rgba(14,44,36,.86) 58%, rgba(14,44,36,.66) 76%,
    rgba(14,44,36,.30) 90%, rgba(14,44,36,.08) 100%);
}
.hero-banner.is-cinematic .wrap{padding-bottom:64px;padding-top:120px}
/* Wider measure so the headline lands in four lines instead of five. `ch` here
   is relative to .inner's 18px, not the h1's, which is why this number looks
   larger than the rendered column. */
.hero-banner.is-cinematic .inner{max-width:70ch}
.hero-banner.is-cinematic h1{max-width:13ch}

/* ---- C. Split panel. Highest contrast, most corporate. ---- */
.hero-banner.is-panel{display:grid;grid-template-columns:54fr 46fr;
  align-items:stretch;min-height:min(74vh,620px)}
/* The panel column is narrow by design, so the display size has to come down
   or the headline runs to eight lines and buries the call to action. */
.hero-banner.is-panel h1{font-size:clamp(28px,2.5vw,40px);line-height:1.1}
.hero-banner.is-panel>img{position:relative;inset:auto;z-index:0;height:100%}
.hero-banner.is-panel::before{display:none}
.hero-banner.is-panel .panel{background:var(--forest);display:flex;
  align-items:center;padding:56px 48px}
.hero-banner.is-panel .inner{max-width:36ch}
.hero-banner.is-panel .lead{max-width:34ch}

@media (max-width:900px){
  /* Every variant becomes the same thing on a phone: photo behind, heavy
     scrim, text stacked. A 42% side panel is unusable at 390px. */
  .hero-banner,
  .hero-banner.is-panel{display:flex;align-items:flex-end;
    grid-template-columns:none;min-height:auto}
  .hero-banner.is-panel>img{position:absolute;inset:0;z-index:-2;
    width:100%;height:100%}
  .hero-banner::before,
  .hero-banner.is-panel::before{display:block;
    background:linear-gradient(0deg,
      rgba(14,44,36,.97) 0%, rgba(14,44,36,.93) 34%,
      rgba(14,44,36,.72) 60%, rgba(14,44,36,.34) 84%, rgba(14,44,36,.14) 100%);
  }
  .hero-banner .wrap,
  .hero-banner.is-cinematic .wrap{padding-top:180px;padding-bottom:44px}
  .hero-banner.is-panel .panel{background:none;padding:0;display:block}
  .hero-banner .inner,
  .hero-banner.is-panel .inner{max-width:none}
  .hero-banner .lead{max-width:none}
  .hero-banner .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-banner .hero-ctas .btn{width:100%}
}