:root {
  --pine: #183B2B; /* admin-green-dark */
  --pine-deep: #10291D; /* a step darker than --pine, as before */
  --sage: #5C6F60; /* admin-green-muted, darkened for AA on .post-card-date */
  --taupe: #708373; /* admin-green-muted (token is unused) */
  --mist: #DFE5DA; /* admin-sage (token is unused) */
  --water: #1C7293; /* primary accent */
  --water-dark: #155870; /* primary accent, hover/dark */
  --stone: #F8F6EF; /* admin-bg */
  --stone-mid: #F1EFE6; /* admin-sidebar */
  --rust: #A34A2E;
  --rust-dark: #8A3C25;
  --river: #4C6B70;
  --ink: #18241E; /* admin-text */
  --cream: #FFFFFF; /* admin-surface */
  --radius: 20px;
  /* The two-step spacing system: the pill sits --space-1 from the viewport
     edges and all page content sits --space-2, so content is always inset
     further than the pill. Both halve on phones (see the 900px block). */
  --space-1: 29px;
  --space-2: 58px;
  /* Vertical space the fixed header pill occupies: --space-1 plus the pill's
     92px height. Heroes add this to their own top padding so their dark band
     runs up behind the pill while the gap below it stays put. */
  --header-offset: 121px;

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Public Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
/* Future-proofing: no page links to an in-page anchor today, but if one does
   the target would otherwise land underneath the fixed pill. */
html { scroll-padding-top: calc(var(--header-offset) + var(--space-1)); }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--stone);
  color: var(--ink);
  line-height: 1.6;
}
/* Full width: content sits exactly --space-2 from the viewport edges at every
   size. Line length is held by the max-widths on text elements instead. */
.wrap { margin: 0 auto; padding: 0 var(--space-2); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; font-weight: 700; }
a { color: inherit; }

/* HEADER */
/* The bar itself is now a transparent sticky shell; the colour, blur and pill
   shape move onto .nav-inner so the hero shows through around it. Height zero
   so the pill floats OVER the hero instead of pushing it down - each hero's own
   top padding is what keeps content clear of it. */
/* Fixed, not sticky: the pill sits 29px from the top at every scroll position
   rather than only before the page moves. Out of flow entirely, so heroes
   start at y=0 and their dark band runs up behind it - no light strip. The
   shell is transparent and click-through; the pill itself takes the pointer. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: none;
  border-bottom: none;
  pointer-events: none;
}

/* Scroll edge effect: content passing under the pill recedes - tinted, blurred
   and desaturated at the very top, fading out below. Sits behind the pill but
   above page content, and never takes the pointer. The mask makes the blur and
   desaturation fall off smoothly instead of ending on a hard line. */
.site-header::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--header-offset) + var(--space-1));
  /* The header's own z-index:30 is the stacking context: 0 here keeps the
     layer above all page content, while the pill's z-index:1 keeps it above
     the layer. */
  z-index: 0;
  pointer-events: none;
  /* --stone (#F8F6EF), the page background the content scrolls over. */
  background: linear-gradient(
    to bottom,
    rgba(248, 246, 239, 0.85) 0%,
    rgba(248, 246, 239, 0) 100%
  );
  -webkit-backdrop-filter: blur(8px) saturate(50%);
  backdrop-filter: blur(8px) saturate(50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  /* Hidden until the page has actually scrolled - nav.js adds .is-scrolled.
     With JS off the class never arrives and the effect simply never shows. */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.site-header.is-scrolled::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .site-header::before { transition: none; }
  #site-nav a:not(.nav-cta), .icon-link { transition: none; }
}

/* Without transparency effects, keep the tint and drop the processing. */
@media (prefers-reduced-transparency: reduce) {
  .site-header::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Solid, no blur - the glass depends on transparency to work at all. */
  .glass-surface,
  .site-header .nav-inner::before {
    background: var(--pine);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* The pill is the element that carries .wrap too, so this also neutralises
   .wrap's max-width and padding - keeping them in one rule avoids an
   equal-specificity ordering fight between the two. */
/* The pill carries NO backdrop-filter of its own: an element with one becomes
   a backdrop root, and the mobile menu nested inside it would then sample the
   pill instead of the page, leaving page text unblurred behind the menu. The
   glass lives on ::before instead, so .nav-inner stays a plain box. */
.site-header .nav-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: var(--space-1);
  padding: 12px 29px;
  pointer-events: auto;
}

/* Shared glass surface: the pill and the mobile menu are the same material. */
.glass-surface,
.site-header .nav-inner::before {
  background: rgba(24, 59, 43, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  /* All inset except the drop shadow, so nothing adds layout size - the pill
     stays 92px tall and --header-offset is unaffected.
     1: the hairline stroke. 2: a top highlight, the lit edge of the glass.
     3: a soft shadow so it lifts off the page. */
  box-shadow:
    inset 0 0 0 1px rgba(248, 246, 239, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.15);
}

.site-header .nav-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  z-index: -1;
}
.nav-inner { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; position: relative; }
.logo { display: flex; align-items: center; }
.logo-img { height: 68px; width: auto; display: block; }
#site-nav { display: flex; gap: 28px; align-items: center; }
.nav-links {
  display: flex;
  align-items: center;
  /* 20px + 18px padding each side = the same ~56px between words as the old
     28px gap with 14px padding. */
  gap: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#site-nav a { color: var(--cream); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
/* Every plain link carries the highlight's padding and radius, so marking one
   current changes only its background - no reflow, nothing re-centres.
   Padding, line-height and font-size all match .nav-cta, so the highlight is
   exactly as tall as the Contact Us button. The 1.6 line-height is inherited,
   the same way .nav-cta inherits it. */
#site-nav a:not(.nav-cta) { padding: 9px 18px; border-radius: 999px; font-weight: 600; }
/* The current page reads as a selected tab. */
#site-nav a:not(.nav-cta)[aria-current="page"] { background: rgba(255, 255, 255, 0.12); }
/* Contact Us keeps its solid pill; current adds a ring inside it. */
#site-nav a.nav-cta[aria-current="page"] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4); }
/* A fainter version of the current-page pill, rather than a colour change the
   eye can barely find on the glass. Text stays white. */
#site-nav a:not(.nav-cta):hover,
#site-nav a:not(.nav-cta):focus-visible { background: rgba(255, 255, 255, 0.08); }
#site-nav a:not(.nav-cta) { transition: background 0.15s ease; }
.nav-cta {
  background: var(--water); color: var(--cream) !important;
  padding: 9px 18px; border-radius: 999px; font-weight: 600;
}
.nav-cta:hover { background: var(--water-dark); color: var(--cream) !important; }

/* MOBILE NAV TOGGLE */
/* Mobile only - hidden on desktop alongside the hamburger. */
#icon-nav { display: none; }

.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 34px; height: 34px; padding: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.nav-toggle span {
  display: block; width: 26px; height: 2px; background: var(--cream);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* BUTTONS */
.btn { display: inline-block; padding: 14px 30px; text-decoration: none; font-weight: 600; border: none; cursor: pointer; border-radius: 999px; font-size: 0.95rem; letter-spacing: 0.01em; }
.btn-primary { background: var(--water); color: var(--cream); }
.btn-primary:hover { background: var(--water-dark); }

/* HERO */
.hero {
  position: relative;
  background: var(--pine);
  color: var(--cream);
  /* The pill overlays this section; the visible gap below it stays 90px. */
  padding: calc(var(--header-offset) + var(--space-2)) 0 var(--space-2);
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Focal point is the deer, which sits at 62-76% across and 51-82% down the
   source (Deer_river.jpg, 3862x2578, a 3:2 frame).

   Only ONE axis is ever cropped here, because the hero box is far wider than
   3:2: cover scales the image to the hero's width, so it overflows vertically
   and not at all horizontally. The 69% is therefore inert on desktop - it only
   earns its keep in the narrow case below - and 72% is what does the work,
   pushing the visible window down to end around 85-89% of the image so the
   deer's legs and hooves clear the bottom edge instead of being sliced off at
   the 81% that `center` was leaving. */
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: 69% 72%;
}
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(24, 59, 43, 0.55); }
.contour-bg { position: absolute; inset: 0; opacity: 0.35; z-index: 2; }
.hero .contour-bg { inset: auto 0 0 0; height: 33%; opacity: 0.45; }
.contour-bg svg { width: 100%; height: 100%; }
.contour { fill: none; stroke: var(--water); stroke-width: 1.5; }
.c1 { opacity: 0.5; }
.c2 { opacity: 0.35; }
.c3 { opacity: 0.4; }
.c4 { opacity: 0.25; }
.c5 { opacity: 0.3; }
@media (prefers-reduced-motion: no-preference) {
  .contour { animation: drift 40s ease-in-out infinite alternate; }
  .c2 { animation-duration: 55s; }
  .c3 { animation-duration: 48s; }
  .c4 { animation-duration: 62s; }
  .c5 { animation-duration: 35s; }
}
@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(-40px); }
}
.hero-inner { position: relative; z-index: 3; width: 100%; }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stone); opacity: 0.75; margin-bottom: 18px;
}
.hero h1 { font-size: 4.4rem; line-height: 0.98; }
.hero-sub { font-size: 1.15rem; color: var(--stone); max-width: 520px; margin: 26px 0 34px; opacity: 0.9; }
.hero-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-ctas .link-arrow { margin-top: 0; }

/* CREDENTIALS STRIP */
.credentials-strip { background: var(--stone-mid); border-bottom: 1px solid rgba(24, 36, 30,0.1); }
.credentials-inner {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  padding: var(--space-2) 0; font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.05em; color: var(--ink);
}
.dot { color: var(--water); }

/* SECTIONS */
.section { padding: var(--space-2) 0; }
.section-dark { background: var(--pine); color: var(--cream); position: relative; }
.section-eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--water); margin: 0 0 12px;
}
.section-eyebrow-light { color: var(--water); }
.section h2 { font-size: 2.6rem; margin-bottom: 44px; }
.section-dark h2 { color: var(--cream); }

/* CONTOUR DIVIDER */
.contour-divider { position: absolute; left: 0; right: 0; height: 40px; overflow: hidden; }
.contour-divider-top { top: -1px; background: var(--pine); }
.contour-divider-top::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(100deg, transparent 0 38px, rgba(248, 246, 239,0.12) 38px 39px);
}

/* SERVICES */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card {
  background: var(--cream); padding: 32px 26px; border: 1px solid rgba(24, 36, 30,0.08);
  border-top: 3px solid var(--water);
  border-radius: var(--radius); overflow: hidden;
}
.service-icon { color: var(--water); width: 44px; height: 44px; margin-bottom: 18px; }
.service-icon svg { width: 100%; height: 100%; }
.service-card h3 { font-size: 1.35rem; margin-bottom: 12px; letter-spacing: 0.01em; }
.service-card p { font-size: 0.95rem; color: rgba(24, 36, 30,0.75); margin: 0; }

/* SERVICES — PHOTO CARDS (homepage) */
.service-card--photo {
  position: relative;
  min-height: 340px;
  padding: 0;
  border: none;
  border-top: none;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius); overflow: hidden;
}
.service-card--photo .service-card-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 48px 24px 24px;
  background: linear-gradient(to bottom, rgba(24, 59, 43,0) 0%, rgba(24, 59, 43,0.85) 100%);
}
.service-card--photo h3 { color: var(--cream); font-weight: 700; font-size: 1.3rem; margin-bottom: 8px; letter-spacing: 0.01em; }
.service-card--photo p { color: rgba(255, 255, 255,0.8); font-size: 0.9rem; font-weight: 400; margin: 0; }

/* FACILITY TYPES */
.facility-intro { font-size: 1.05rem; color: rgba(24, 36, 30,0.75); max-width: 720px; margin: -20px 0 40px; }
.facility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.facility-card {
  background: var(--pine); color: var(--cream);
  padding: 32px 26px;
  border-radius: var(--radius); overflow: hidden;
}
.facility-icon { color: var(--cream); width: 44px; height: 44px; margin-bottom: 18px; }
.facility-icon svg { width: 100%; height: 100%; }
.facility-card h3 { font-size: 1.35rem; margin-bottom: 12px; letter-spacing: 0.01em; color: var(--cream); font-weight: 700; }
.facility-card p { font-size: 0.95rem; color: rgba(255, 255, 255,0.75); margin: 0; }

/* PILLARS */
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 30px; }
.pillar-rule { width: 40px; height: 3px; background: var(--water); margin-bottom: 20px; }
.pillar h3 { font-size: 1.3rem; margin-bottom: 10px; }
.pillar p { color: rgba(255, 255, 255,0.75); font-size: 0.95rem; margin: 0; }

/* ABOUT */
.about-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.about-copy p { color: rgba(24, 36, 30,0.8); }
.stat-plate {
  border: 1.5px solid var(--ink); padding: 30px 26px; display: flex; flex-direction: column; gap: 26px;
  position: relative;
  border-radius: var(--radius); overflow: hidden;
}
.stat-plate::before, .stat-plate::after {
  content: ''; position: absolute; width: 10px; height: 10px; border: 1.5px solid var(--water);
}
.stat-plate::before { top: -1.5px; left: -1.5px; border-right: none; border-bottom: none; }
.stat-plate::after { bottom: -1.5px; right: -1.5px; border-left: none; border-top: none; }
.stat { display: flex; align-items: baseline; gap: 16px; }
.stat-num { font-family: var(--font-mono); font-weight: 600; font-size: 2.2rem; color: var(--water); min-width: 64px; }
.stat-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.4; color: var(--ink); }

/* CONTACT */
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; }
.info-block { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; }
.info-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--water); }
.info-value { font-size: 1.05rem; }
.info-value a { text-decoration: none; }
.info-value a:hover { text-decoration: underline; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; margin-bottom: 2px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.contact-form input, .contact-form textarea {
  font-family: var(--font-body); font-size: 0.95rem; padding: 12px 14px;
  background: rgba(255, 255, 255,0.06); border: 1px solid rgba(255, 255, 255,0.3);
  color: var(--cream); border-radius: 2px;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255, 255, 255,0.4); }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--water); outline-offset: 1px; }
.contact-form button { align-self: flex-start; margin-top: 6px; }
.form-status { font-family: var(--font-mono); font-size: 0.85rem; min-height: 1.2em; }
.form-status.success { color: #8fbf9a; }
.form-status.error { color: #e08a6f; }

/* APPROACH (postcard-style cards) */
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.approach-card {
  background: var(--pine); color: var(--cream);
  padding: 32px 26px;
  border-radius: var(--radius); overflow: hidden;
}
.approach-card img { width: 44px; height: 44px; margin-bottom: 18px; }
.approach-card h3 { font-size: 1.3rem; margin-bottom: 12px; color: var(--cream); }
.approach-rule { width: 32px; height: 2px; background: var(--cream); opacity: 0.3; margin: 0 0 16px; }
.approach-card p { font-size: 0.95rem; color: rgba(255, 255, 255,0.72); margin: 0; max-width: 300px; }

/* GUIDE — MODULE NAV */
.module-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
.module-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.module-tab--active { background: var(--water); color: var(--cream); }
.module-tab--muted { background: rgba(24, 36, 30,0.06); color: rgba(24, 36, 30,0.4); }
.module-tab-soon {
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(24, 36, 30,0.1); padding: 2px 7px; border-radius: 999px;
}

/* GUIDE — Q&A ACCORDION */
.qa-list { display: flex; flex-direction: column; gap: var(--space-1); }

/* GUIDE PAGE LAYOUT
   Two columns: a vertical topic nav beside the Q&A panels. Scoped to the guide
   so .page-hero, .section, .module-nav and .module-tab keep working unchanged
   for every other page. Spacing here is 29/58 only; no colours are introduced -
   the tabs keep their existing --active and --muted treatments. */
/* Two classes (0,2,0) so this beats the later .page-hero block (0,1,0) on
   specificity rather than on source order. */
/* 29px of visible space between the pill and the h1; 29px at the bottom. */
.page-hero.page-hero--guide { padding: calc(var(--header-offset) + var(--space-2)) 0 var(--space-2); }

.section--guide { padding-top: var(--space-2); padding-bottom: var(--space-2); }

.section--guide { position: relative; }

/* The sidebar's cream panel runs from the viewport's left edge to the middle of
   the 58px column gap, full height of the section including its padding.
   Drawn as a pseudo-element on the section rather than a background on the nav,
   because it has to bleed past .wrap's max-width and padding.
   Positioned from the panel's RIGHT edge using the same max-width arithmetic
   .wrap uses, so no 100vw is involved and no horizontal scrollbar can appear. */
.section--guide::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* right edge = wrap's left padding + 250px column + half the column gap.
     .wrap is full width now, so there is no centring term to account for. */
  right: calc(100% - (var(--space-2) + 250px + var(--space-1)));
  background: var(--cream);
  border-right: 1px solid rgba(24, 36, 30,0.1);
  z-index: 0;
}
/* Content sits above the panel. */
.section--guide > .wrap { position: relative; z-index: 1; }

.guide-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  column-gap: var(--space-2);
  align-items: start;
}

.guide-layout .module-nav {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-1);
  margin-bottom: 0;
}

.guide-layout .module-tab {
  display: flex;
  align-items: center;
  /* An explicit line-height makes the row height deterministic: without it a
     tab carrying a SOON badge has a different line box from a plain one, so no
     single padding could give both exactly 58px.
     24px line + 17px x 2 padding = 58px for a single-line label; a two-line
     label grows by one line rather than being squeezed. */
  line-height: 24px;
  padding: 17px var(--space-1);
  border-radius: 12px;
  gap: 12px;
  /* Long topic names wrap instead of overflowing the 250px column. */
  white-space: normal;
}

/* The SOON badge is inline with its own 2px vertical padding, which pushed the
   line box to 28px and made those tabs 62px instead of 58px. Taking it out of
   the inline flow keeps every row the same height. */
.guide-layout .module-tab .module-tab-soon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
  height: 20px;
}

@media (max-width: 900px) {
  :root {
    --space-1: 14.5px;
    --space-2: 29px;
    /* The pill keeps its 92px height here (no .logo-img override below 900px),
       so the offset is 14.5 + 92. */
    --header-offset: 106.5px;
  }
  /* No sidebar panel or divider once the nav is a horizontal row. */
  .section--guide::before { display: none; }
  .guide-layout { grid-template-columns: 1fr; column-gap: 0; }
  .guide-layout .module-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: var(--space-1);
    gap: 12px;
  }
  .guide-layout .module-tab {
    /* Back to the shared pill treatment for the horizontal row. */
    line-height: inherit;
    padding: 10px 20px;
    border-radius: 999px;
    white-space: nowrap;
  }
}
.qa-card {
  background: var(--pine); color: var(--cream);
  padding: var(--space-1);
  border-radius: var(--radius); overflow: hidden;
}
.qa-question {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  cursor: pointer; list-style: none; font-weight: 700; font-size: 1.1rem;
}
.qa-question::-webkit-details-marker { display: none; }
.qa-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; transition: transform 0.2s ease; }
.qa-icon::before { content: '+'; }
.qa-card[open] .qa-icon { transform: rotate(45deg); }
.qa-answer { font-size: 0.95rem; color: rgba(255, 255, 255,0.8); margin: 16px 0 0; }
/* .qa-more is a <p> with no rule of its own, so it was taking the browser's
   default 1em top AND bottom margin. The bottom one stacked onto the card's
   29px padding and made the card bottom-heavy. */
.qa-more { margin: var(--space-1) 0 0; }
/* .link-arrow carries margin-top: 8px for its other uses; inside .qa-more that
   would stack on top of the 29px above. */
.qa-more .link-arrow { margin-top: 0; }
/* Whatever ends the card, the bottom inset is the card's own 29px padding -
   so a card with a Read more link and one without match. */
.qa-card > :last-child { margin-bottom: 0; }

/* PAGE HERO (subpages: Services / Team / Contact) */
.page-hero {
  position: relative;
  background: var(--pine);
  color: var(--cream);
  /* The pill overlays this section; the visible gap below it stays 110px. */
  padding: calc(var(--header-offset) + var(--space-2)) 0 var(--space-2);
  overflow: hidden;
}
.page-hero .contour-bg { opacity: 0.35; }
.page-hero-inner { position: relative; z-index: 1; }
/* 880px clears the longest title, "Stormwater Management Services" (847px at
   3.2rem), so every subpage h1 is one line from 1440px up, while still capping
   a future title before it can run the full width of a wide screen. */
.page-hero h1 { font-size: 3.2rem; line-height: 1; max-width: 880px; }
/* 720px is set by the longest subtitle: Services is 1269px unwrapped, so
   anything under ~635px spills it to a third line. 720 holds it to two and
   leaves the Guide's 559px subtitle on one line - at 560px it was overflowing
   by a single pixel, which is what pushed "asks." onto a line of its own. */
.page-hero-sub { font-size: 1.05rem; color: var(--stone); max-width: 720px; margin: 20px 0 0; opacity: 0.9; }

/* VIEW-ALL / LINK ARROW */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--water); text-decoration: none; font-weight: 600;
  font-size: 0.95rem; margin-top: 8px;
}
.link-arrow:hover { color: var(--water-dark); }
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* The hero link sits on Deer_river.jpg under a 0.55 dark-green overlay, which
   averages about rgb(52,73,57) behind this text. Accent blue lands near 1.8:1
   there - and #1C7293 tops out at 3.88:1 even against pure black, so no scrim
   or shadow can carry it to 4.5:1. It was already unreadable before the
   repaint, at 2.1:1 in the old blue. Light text is the only thing that works,
   and it matches the h1 and sub already beside it; the shadow covers the
   brighter patches of the photo. */
.hero .link-arrow { color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.hero .link-arrow:hover { color: var(--stone); }
.services-footer { margin-top: 36px; text-align: center; }

/* CTA BAND */
.cta-band { background: var(--stone-mid); padding: var(--space-2) 0; }
.cta-band-dark { background: var(--pine-deep); color: var(--cream); }
.cta-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band h2 { font-size: 1.9rem; margin: 0 0 4px; }
.cta-band-dark h2 { color: var(--cream); }
.cta-band p { margin: 0; color: rgba(24, 36, 30,0.75); max-width: 480px; }
.cta-band-dark p { color: rgba(255, 255, 255,0.75); }

/* TEAM BIOS */
.bio-section { padding: var(--space-2) 0; }
.bio-section--pine { background: var(--pine); color: var(--cream); }
.bio-section--stone { background: var(--stone); color: var(--ink); }
/* Photo column is two thirds of the original 40%. No cap on the text: it runs
   the full remaining width, which is what keeps wide screens from ending in a
   band of empty background.

   align-items:center because at this size the portrait is TALLER than the bio
   text - by 65-142px at 1440 and ~330px at 1920, in every bio. Top aligning
   would pin the text to the photo's top edge and leave all of that slack as a
   void at the bottom right; centring splits it evenly and sets the text
   against the middle of the portrait. (This is the opposite of what a smaller
   photo wants, where the text is the taller of the two.) */
.bio-inner {
  display: grid;
  grid-template-columns: calc(40% * 2 / 3) 1fr;
  gap: var(--space-2);
  align-items: center;
}
.bio-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: rgba(24, 36, 30,0.08); }
.bio-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.bio-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; text-align: center; opacity: 0.6; padding: 0 20px; }
.bio-caption { margin-top: 14px; font-size: 0.85rem; font-style: italic; opacity: 0.75; }
.bio-heading { font-size: 2.2rem; text-transform: uppercase; margin-bottom: 20px; }
.bio-rule { width: 48px; height: 2px; background: currentColor; opacity: 0.3; margin-bottom: 24px; }
.bio-content p { font-size: 1rem; margin: 0 0 18px; }
.bio-content p:last-child { margin-bottom: 0; }
.bio-section--pine .bio-content p { color: rgba(255, 255, 255,0.8); }
.bio-section--stone .bio-content p { color: rgba(24, 36, 30,0.8); }

/* FOOTER */
.site-footer { background: var(--pine-deep); color: rgba(255, 255, 255,0.6); padding: var(--space-2) 0; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 0.82rem; align-items: center; }
.footer-mono { font-family: var(--font-mono); font-size: 0.75rem; }
.footer-nav { display: flex; gap: 20px; }
.footer-nav a { color: rgba(255, 255, 255,0.6); text-decoration: none; font-size: 0.82rem; }
.footer-nav a:hover { color: var(--cream); }

/* CARD HOVER LIFT */
@media (prefers-reduced-motion: no-preference) {
  .service-card--photo, .facility-card, .approach-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .service-card--photo:hover, .facility-card:hover, .approach-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  }
}

/* SCROLL REVEAL */
main > section { opacity: 1; }
html.js-ready main > section { opacity: 0; transform: translateY(20px); }
html.js-ready main > section.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) {
  html.js-ready main > section {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
}

/* RESPONSIVE */
/* BLOG / JOURNAL */
.post-layout { max-width: 760px; }
.post-date { margin-top: 14px; }
.post-back { text-decoration: none; }
.post-back:hover { color: var(--water); }

.post-hero-figure { margin: 0 0 40px; }
.post-hero-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius); }

.post-body { font-size: 1.05rem; color: rgba(24, 36, 30, 0.85); }
.post-body > :first-child { margin-top: 0; }
.post-body h2 { font-size: 1.9rem; margin: 44px 0 16px; }
.post-body h3 { font-size: 1.35rem; margin: 32px 0 12px; }
.post-body p { margin: 0 0 20px; }
.post-body ul, .post-body ol { margin: 0 0 20px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body a { color: var(--water); }
.post-body a:hover { color: var(--water-dark); }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-body blockquote {
  margin: 0 0 20px; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--water); color: rgba(24, 36, 30, 0.7); font-style: italic;
}
.post-body code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: rgba(24, 36, 30, 0.07); padding: 2px 6px; border-radius: 6px;
}
.post-body pre {
  background: var(--pine); color: var(--cream);
  padding: 18px 20px; border-radius: var(--radius); overflow-x: auto;
}
.post-body pre code { background: none; padding: 0; font-size: 0.85rem; }
.post-body hr { border: none; border-top: 1px solid rgba(24, 36, 30, 0.14); margin: 40px 0; }
.post-body table { border-collapse: collapse; width: 100%; margin: 0 0 20px; font-size: 0.95rem; }
.post-body th, .post-body td { border: 1px solid rgba(24, 36, 30, 0.14); padding: 10px 12px; text-align: left; }
.post-body th { background: rgba(24, 36, 30, 0.05); }

.post-footer-link { margin-top: 48px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--cream); border: 1px solid rgba(24, 36, 30, 0.08);
  border-top: 3px solid var(--water); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.2s ease;
}
.post-card:hover { transform: translateY(-3px); }
.post-card-thumb { width: 100%; height: 180px; object-fit: cover; display: block; }
.post-card-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.post-card-date {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sage); margin: 0 0 10px;
}
.post-card h3 { font-size: 1.3rem; margin-bottom: 10px; letter-spacing: 0.01em; }
.post-card-excerpt { font-size: 0.95rem; color: rgba(24, 36, 30, 0.75); margin: 0 0 auto; }
.post-card .link-arrow { margin-top: 18px; }

.post-empty { font-size: 1.05rem; color: rgba(24, 36, 30, 0.7); margin: 0; }

@media (max-width: 900px) {
  /* .wrap now takes its inset from --space-2, which this block already halves. */
  .hero h1, .page-hero h1 { font-size: 2.9rem; }
  .services-grid, .pillars-grid, .facility-grid, .approach-grid { grid-template-columns: 1fr; }
  .about-layout, .contact-layout, .bio-inner { grid-template-columns: 1fr; }
  .section h2 { font-size: 2rem; }
  .module-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; margin-bottom: 36px; }

  /* Narrow screens flip the crop axis: the hero box is now taller than it is
     wide, so cover scales the image to the hero's HEIGHT and the overflow is
     horizontal. 72% goes inert and the X value is what frames the shot - 82%
     lands the visible window on roughly 51-89% of the image width, so the deer
     (62-76%) sits just left of centre with room on both sides rather than
     being clipped at the right edge. */
  .hero-photo { background-position: 82% 72%; }

  .nav-toggle { display: flex; }
  /* The text nav is desktop-only; mobile gets the icon bar instead. Only one
     of the two is in the accessibility tree at a time, since display:none
     removes it entirely. */
  #site-nav { display: none; }
  #site-nav.nav-open { display: none; }

  /* Icon tab bar: a glass pill below the header pill, same width, fully
     rounded, one row of five evenly spaced icon links.

     Always rendered here so it can animate - nav.js toggles .nav-open and the
     two states below slide it in and out. left/right:0 against .nav-inner's
     padding box makes it exactly as wide as the pill.

     z-index:-2 is what lets it slide out from UNDER the pill: the glass lives
     on .nav-inner::before at z-index:-1 and the pill's own content (logo,
     hamburger) is in normal flow above that, so both stay over the bar for the
     whole travel. .nav-inner has no background of its own, so painting behind
     it costs nothing. */
  #icon-nav {
    display: flex;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: -2;
    border-radius: 999px;
    padding: 8px 10px;

    /* Closed, and the state the bar animates back to. -100% - 8px undoes the
       8px gap plus the bar's own height, so its bottom edge lands on the
       pill's bottom edge - the bar (60px) is shorter than the pill (92px), so
       it ends up fully covered. visibility:hidden keeps it out of the tab
       order and the accessibility tree; the 0.2s delay holds it visible until
       the slide back up has finished. */
    transform: translateY(calc(-100% - 8px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.2s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.15s ease,
      visibility 0s linear 0.2s;
  }

  /* Open: slides down into place. Slower than the close, iOS-style ease-out,
     with the fade running ahead of the slide so the bar reads as solid as soon
     as it clears the pill. visibility flips immediately - no delay - or the
     links would not be focusable until the slide ended. */
  #icon-nav.nav-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.2s ease,
      visibility 0s linear 0s;
  }
  .icon-link {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    /* 44px minimum touch target. */
    min-width: 44px; min-height: 44px;
    border-radius: 999px;
    color: var(--cream);
    transition: background 0.15s ease;
  }
  .icon-link svg { display: block; }
  .icon-link:hover,
  .icon-link:focus-visible { background: rgba(255, 255, 255, 0.08); }
  .icon-link[aria-current="page"] { background: rgba(255, 255, 255, 0.12); }

  .footer-inner { flex-direction: column; align-items: flex-start; }

  .post-grid { grid-template-columns: 1fr; }
  .post-body { font-size: 1rem; }
  .post-body h2 { font-size: 1.6rem; }
}

/* No slide when motion is unwelcome - the bar just appears and disappears,
   with a fade short enough to read as instant. Sits after the block above so
   it overrides both icon bar states. */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #icon-nav {
    transform: none;
    transition: opacity 0.08s linear, visibility 0s linear 0.08s;
  }
  #icon-nav.nav-open {
    transform: none;
    transition: opacity 0.08s linear, visibility 0s linear 0s;
  }
}