/* ============================================================
   KENFLO Emotional Health Services — warm premium wellness theme
   Palette: deep forest/teal primary, warm cream background,
   muted sage accents, restrained gold/sand highlights.
   ============================================================ */
:root {
  --forest: #1f4e44;
  --forest-dark: #14352e;
  --forest-light: #2e6b5d;
  --cream: #faf6ef;
  --cream-dark: #f1e9dc;
  --sage: #9cb4a0;
  --sage-light: #dce8de;
  --gold: #c9a961;
  --gold-dark: #a8894a;
  --ink: #26332f;
  --muted: #6b7a74;
  --white: #ffffff;
  --danger: #b3462e;
  --danger-bg: #fbeae5;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(31, 78, 68, 0.10);
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 16px;
}
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--forest-dark); line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--forest-light); }
img { max-width: 100%; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 760px; }
.container.narrow-sm { max-width: 440px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--forest); color: #fff; padding: 8px 16px; z-index: 200; }
.skip-link:focus { left: 0; }
.muted { color: var(--muted); font-size: .9rem; }
.fineprint { font-size: .82rem; color: var(--muted); }
.inline-form { display: inline; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-block; padding: 10px 22px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; transition: all .18s ease;
  font-family: var(--font-body); text-align: center;
}
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: var(--forest-dark); transform: translateY(-1px); }
.btn-outline { border-color: var(--forest); color: var(--forest); background: transparent; }
.btn-outline:hover { background: var(--forest); color: #fff; }
.btn-ghost { color: var(--forest); background: var(--sage-light); }
.btn-ghost:hover { background: var(--sage); }
.btn-gold { background: var(--gold); color: var(--forest-dark); }
.btn-gold:hover { background: var(--gold-dark); color: #fff; }
.contact-info { background: var(--forest-dark); color: var(--sage-light); border-radius: var(--radius); padding: 30px 32px; margin-top: 36px; }
.contact-info h3 { color: #fff; margin: 0 0 14px; font-size: 1.3rem; }
.contact-info .contact-email, .contact-info .contact-phone { display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 12px 18px; margin: 0 0 12px; transition: background .18s, border-color .18s; }
.contact-info .contact-email:hover, .contact-info .contact-phone:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); }
.contact-info .contact-email:hover .email-label, .contact-info .contact-phone:hover .email-label { text-decoration: underline; }
.contact-info .email-label { color: var(--gold); font-weight: 600; font-size: .92rem; }
.contact-info a.email-link { color: #fff; text-decoration: none; font-size: 1.02rem; font-weight: 500; word-break: break-all; font-family: var(--font-body); }
.contact-info a.email-link:hover { text-decoration: underline; color: var(--gold); }
.contact-info .contact-note { font-size: .88rem; color: var(--sage-light); margin: 14px 0 0; }
@media (max-width: 560px) { .contact-info { padding: 22px 18px; } }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #8f3620; }
.btn-lg { padding: 14px 30px; font-size: 1.05rem; }
.btn-sm { padding: 6px 14px; font-size: .82rem; }
.btn-block { display: block; width: 100%; }

.notice {
  background: var(--danger-bg); border-left: 5px solid var(--danger); border-radius: 8px;
  padding: 14px 18px; font-size: .92rem; margin: 22px 0;
}
.crisis-card {
  background: #fdf3ee; border: 2px solid var(--danger); border-radius: var(--radius);
  padding: 22px; margin: 22px 0;
}
.crisis-card h3 { color: var(--danger); margin-top: 0; }
.crisis-card p { margin-bottom: .5em; }

.service { border-bottom: 1px solid var(--cream-dark); padding: 18px 0; }
.service h2 { font-size: 1.3rem; }
.service-media { margin: -6px 0 16px; }
.service-media--left { display: flex; gap: 26px; align-items: flex-start; }
.service-media--left .service-media-img { flex: 0 0 172px; width: 172px; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); background: var(--white); position: relative; }
.service-media--left .service-media-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.service-media--left .service-body { flex: 1; min-width: 0; }
.service-media--left .service-body h2 { margin-top: 0; }
.service-media--right { display: flex; gap: 26px; align-items: flex-start; }
.service-media--right .service-media-img { flex: 0 0 172px; width: 172px; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); background: var(--white); position: relative; margin-left: auto; }
.service-media--right .service-media-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.service-media--right .service-body { flex: 1; min-width: 0; text-align: left; }
.service-media--right .service-body h2 { margin-top: 0; }
.service-media--right .service-body p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .service-media--left, .service-media--right { flex-direction: column; gap: 14px; }
  .service-media--left .service-media-img, .service-media--right .service-media-img { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1/1; max-height: 200px; }
  .service-media--right .service-media-img { margin-left: 0; }
  .service-media--right .service-body { text-align: left; }
}
.prose h2 { margin-top: 1.4em; }
.prose p:last-child { margin-bottom: 0; }

.page-hero { background: var(--forest); color: #fff; padding: 54px 0; }
.page-hero h1 { color: #fff; margin-bottom: 6px; }
.page-hero p { color: var(--sage-light); margin: 0; font-size: 1.05rem; }

.success-card, .error-card { text-align: center; padding: 48px 34px; }
.ref-code {
  font-family: monospace; font-size: 1.6rem; background: var(--sage-light); color: var(--forest-dark);
  display: inline-block; padding: 10px 26px; border-radius: 10px; letter-spacing: 2px; font-weight: 700;
}

/* ---------------- Forms ---------------- */
.form-card h2, .form-card h1 { margin-top: 0; }
label { display: block; font-weight: 600; font-size: .9rem; margin: 14px 0 6px; color: var(--forest-dark); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--sage); border-radius: 10px;
  font-family: var(--font-body); font-size: .95rem; background: var(--white); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--forest-light); border-color: var(--forest-light); }
textarea { resize: vertical; }
.form-note { font-size: .84rem; color: var(--muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkbox-label { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.checkbox-label input { width: auto; }
button.btn { border: none; }

.contact-layout { display: grid; grid-template-columns: 1.4fr .8fr; gap: 32px; align-items: start; }
.form-card { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.contact-aside .panel, .contact-aside .crisis-card { margin-bottom: 20px; }

/* ---------------- Flash messages ---------------- */
.flash-stack { margin-top: 16px; }
.flash { padding: 12px 18px; border-radius: 10px; margin-bottom: 10px; font-size: .92rem; box-shadow: var(--shadow); }
.flash-success { background: var(--sage-light); color: var(--forest-dark); border-left: 5px solid var(--forest-light); }
.flash-error { background: var(--danger-bg); color: var(--danger); border-left: 5px solid var(--danger); }
.flash-warning { background: #fdf6e3; color: #7a5c1a; border-left: 5px solid var(--gold); }


/* ---------------- Header / nav ---------------- */
.site-header { background: var(--white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; flex-wrap: wrap; gap: 8px; }
.brand { font-family: var(--font-heading); font-size: 1.18rem; font-weight: 700; color: var(--forest-dark); text-decoration: none; letter-spacing: .5px; white-space: nowrap; }
.brand span { color: var(--gold-dark); font-size: .88rem; font-weight: 400; }
.brand .brand-logo {
  display: inline-block; height: 30px; width: auto; margin-right: 9px; vertical-align: middle;
  border: 1px solid rgba(20,53,46,.18); border-radius: 6px; padding: 2px; background: rgba(255,255,255,.55);
  transition: transform .18s ease, box-shadow .18s ease; image-rendering: -webkit-optimize-contrast;
}
.brand .brand-logo:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(20,53,46,.18); }
.brand .brand-logo img { height: 100%; width: auto; display: block; }
@media (max-width: 900px) { .brand .brand-logo { height: 26px; margin-right: 8px; } }
/* Ten capsule items plus the brand exceed one 1120px row once the descriptor is
   shown, so the descriptor is held back while the full nav is visible and returns
   where there is room for it (the hamburger layout, and very wide screens). The
   logo and "KENFLO" wordmark still carry the brand at those widths. */
@media (min-width: 1200px) { .brand span { display: none; } }
@media (min-width: 1800px) { .brand span { display: inline; } }
/* Very narrow phones cannot fit logo + wordmark + descriptor next to the toggle. */
@media (max-width: 380px) { .brand span { display: none; } }
@media (max-width: 560px) { .brand .brand-logo { height: 22px; margin-right: 6px; }
  .brand { font-size: 1.15rem; } .brand span { font-size: .82rem; } }
.brand-light { color: #fff; }
.brand-light span { color: var(--gold); }
.site-nav { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* Capsule ("tablet") nav items.
   Each item is a pill whose green tint fades to fully transparent at both ends, so
   the pills read as soft capsules sitting in the white header instead of hard-edged
   blocks. A blurred, negative-spread shadow adds a halo that also fades out into the
   background. Nothing here paints on the header's white background itself.
   Sizing is deliberately compact: ten capsules plus the brand have to share a 1120px
   row, so padding and the gap are kept tight to hold the header to a single row. */
.site-nav a {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 8px 11px; border-radius: 999px;
  text-decoration: none; color: var(--forest-dark); font-weight: 600; font-size: .84rem;
  letter-spacing: 0; white-space: nowrap;
  background-image: linear-gradient(90deg,
    rgba(156, 180, 160, 0) 0%,
    rgba(156, 180, 160, .34) 18%,
    rgba(216, 231, 220, .62) 50%,
    rgba(156, 180, 160, .34) 82%,
    rgba(156, 180, 160, 0) 100%);
  box-shadow: 0 5px 14px -7px rgba(31, 78, 68, .40), inset 0 0 0 1px rgba(31, 78, 68, .07);
  transition: color .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.site-nav a:hover {
  color: var(--forest-dark); transform: translateY(-1px);
  box-shadow: 0 8px 18px -7px rgba(31, 78, 68, .55), inset 0 0 0 1px rgba(31, 78, 68, .16);
}
.site-nav a:focus-visible { outline: 2px solid var(--forest-light); outline-offset: 2px; }
/* Marks the page the visitor is on. */
.site-nav a[aria-current="page"] {
  color: var(--forest); font-weight: 700; background-color: rgba(220, 232, 222, .60);
  box-shadow: 0 6px 16px -7px rgba(31, 78, 68, .50), inset 0 0 0 1px rgba(31, 78, 68, .18);
}

/* The call to action stays a solid pill so it is not mistaken for a nav tab. */
.site-nav .nav-cta {
  color: #fff; background-image: none; background-color: var(--forest);
  min-height: 38px; padding: 9px 17px; font-size: .85rem;
  box-shadow: 0 8px 18px -8px rgba(31, 78, 68, .75);
}
.site-nav .nav-cta:hover { background-color: var(--forest-dark); color: #fff; }
.site-nav .nav-cta[aria-current="page"] { background-color: var(--forest-dark); }

.nav-toggle { display: none; background: none; border: 1px solid var(--sage); border-radius: 8px; font-size: 1.3rem; padding: 4px 12px; cursor: pointer; color: var(--forest); }

.admin-topbar { background: var(--forest-dark); padding: 10px 0; }
.admin-topbar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.admin-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-nav a { color: var(--sage-light); text-decoration: none; font-size: .9rem; font-weight: 500; }
.admin-nav a:hover { color: #fff; }
.admin-nav .btn-outline { border-color: var(--gold); color: var(--gold); }
.admin-nav .btn-outline:hover { background: var(--gold); color: var(--forest-dark); }

/* ---------------- Hero carousel ---------------- */
.hero-carousel {
  position: relative; width: 100%; display: grid; grid-template-columns: 1fr;
  min-height: 520px; overflow: hidden; border-radius: var(--radius);
}
.hero-slide {
  grid-area: 1 / 1; position: relative; display: flex; align-items: center;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.hero-slide.active {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity .7s ease, visibility 0s linear 0s;
}
.hero-slide .hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide .hero-slide-overlay { position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(20,53,46,.55) 0%, rgba(31,78,68,.32) 55%, rgba(46,107,93,.18) 100%); }
.hero-slide .hero-slide-content { position: relative; z-index: 2; width: 100%; padding: 38px 10px; max-width: 560px; }
.hero-slide .hero-slide-content .eyebrow { color: var(--gold); margin-bottom: 10px; }
.hero-slide .hero-slide-content h1 { color: #fff; font-size: 2.6rem; margin: 6px 0 16px; }
.hero-slide .hero-slide-content .lede { color: var(--sage-light); font-size: 1.15rem; max-width: 520px; }
.hero-slide .hero-slide-content .hero-actions { margin-top: 26px; }
.hero-slide .hero-slide-content .btn-outline { border-color: var(--sage-light); color: var(--sage-light); }
.hero-slide .hero-slide-content .btn-outline:hover { background: var(--sage-light); color: var(--forest-dark); }
.hero-slide .hero-slide-content .btn-ghost { background: rgba(255,255,255,.12); color: #fff; }
.hero-slide .hero-slide-content .btn-ghost:hover { background: rgba(255,255,255,.22); }
.hero-carousel .hero-carousel-indicators { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 9px; align-items: center; }
.hero-carousel .hero-carousel-indicators button { width: 11px; height: 11px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--cream); opacity: .55; transition: opacity .2s, transform .2s; }
.hero-carousel .hero-carousel-indicators button:hover { opacity: .85; }
.hero-carousel .hero-carousel-indicators button.active { opacity: 1; transform: scale(1.25); }
.hero-carousel .hero-carousel-indicators button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 900px) {
  .hero-carousel { min-height: 470px; }
  .hero-slide .hero-slide-content h1 { font-size: 2rem; }
  .hero-slide .hero-slide-content .lede { font-size: 1rem; }
  .hero-carousel .hero-carousel-indicators { bottom: 14px; }
}
@media (max-width: 560px) {
  .hero-carousel { min-height: 0; }
  .hero-slide .hero-slide-content { padding: 26px 10px; }
  .hero-slide .hero-slide-content h1 { font-size: 1.7rem; }
  .hero-slide .hero-slide-content .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-slide .hero-slide-content .hero-actions .btn { text-align: center; }
}

/* ---------------- Hero ---------------- */
.hero {
  background: linear-gradient(135deg, var(--forest-dark) 0%, var(--forest) 55%, var(--forest-light) 100%);
  color: #fff; padding: 34px 0 44px;
}
.hero-inner { max-width: 860px; }
.hero h1 { color: #fff; font-size: 2.6rem; margin: 12px 0 18px; }
.hero .lede { font-size: 1.15rem; color: var(--sage-light); max-width: 720px; }
.eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: .8rem; color: var(--gold); font-weight: 700; margin: 0; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero .btn-outline { border-color: var(--sage-light); color: var(--sage-light); }
.hero .btn-outline:hover { background: var(--sage-light); color: var(--forest-dark); }
.hero .btn-ghost { background: rgba(255,255,255,.12); color: #fff; }
.hero .btn-ghost:hover { background: rgba(255,255,255,.22); }

.trust-statement { background: var(--gold); padding: 34px 0; text-align: center; }
.trust-statement h2 { color: var(--forest-dark); font-size: 1.45rem; margin-bottom: 8px; }
.trust-statement p { margin: 0 auto; max-width: 860px; color: #3f3417; }

/* ---------------- Sections ---------------- */
.section { padding: 64px 0; }
.section-alt { background: var(--cream-dark); }
.section-title { text-align: center; }
.section-sub { text-align: center; color: var(--muted); margin-top: -8px; margin-bottom: 36px; }
.split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
.legal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--white); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink); display: block; transition: transform .18s ease, box-shadow .18s ease;
  border-top: 4px solid var(--sage);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(31, 78, 68, .16); border-top-color: var(--gold); }
.card h3 { color: var(--forest); }
.card p { color: var(--muted); font-size: .93rem; margin: 0; }
.success-mark {
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--forest); color: var(--white);
  font-size: 2.1rem; font-weight: 700; line-height: 1; box-shadow: var(--shadow);
}

.panel {
  background: var(--white); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
  border-left: 5px solid var(--sage);
}
.panel h3:first-child { margin-top: 0; }

.checklist { list-style: none; padding: 0; }
.checklist li { padding: 8px 0 8px 32px; position: relative; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--forest-light); font-weight: 700; }

.chip-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0; }
.chip { background: var(--sage-light); color: var(--forest-dark); border-radius: 999px; padding: 6px 16px; font-size: .87rem; font-weight: 500; }

.cta-band {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  border-radius: var(--radius); color: #fff; text-align: center; padding: 46px 30px; margin-top: 36px;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--sage-light); }

/* ---------------- Official brand logo & page imagery ---------------- */
.hero-logo {
  display: block; width: 100%; max-width: 320px; height: auto; margin: 0 0 24px;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
}

.card-media {
  margin: -28px -28px 16px; overflow: hidden; border-radius: 10px 10px 0 0;
  aspect-ratio: 4 / 3; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.card-media img { display: block; width: 100%; height: 100%; object-fit: contain; }

.page-media { margin: 0 0 28px; text-align: center; }
.page-media img {
  display: block; width: 100%; max-width: 360px; margin: 0 auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.page-media--sm img { max-width: 300px; }

.brand-band {
  margin: 0 0 28px; padding: 26px 32px;
  background: linear-gradient(135deg, var(--forest-dark) 0%, var(--forest) 60%, var(--forest-light) 100%);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.brand-band h2 { color: #fff; margin: 0 0 4px; font-size: 1.25rem; }
.brand-band p { color: var(--sage-light); margin: 0; font-size: .95rem; }

/* ---------------- Balanced text + image split ----------------
   Grid children are forced to min-width:0 so a wide image can never blow its column
   out and ride over the neighbouring text (the failure mode when .card-media — which
   is built for the padded inside of a .card — was reused here). */
.split--balanced { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 34px; }
.split--balanced > * { min-width: 0; }
.split--balanced .brand-band { margin: 0; }

/* Framed standalone image: the frame owns the aspect ratio and centre-crops, so the
   picture fills its box edge to edge with no letterboxing and no overflow. */
.media-frame {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--cream-dark); border: 1px solid rgba(31, 78, 68, .10);
  box-shadow: var(--shadow);
}
.media-frame img { display: block; width: 100%; height: auto; object-fit: cover; object-position: center; }
/* organisation_community1.jpeg is exactly 4:5, so this frame shows it uncropped. */
.split--balanced .media-frame img { aspect-ratio: 4 / 5; height: 100%; }
@media (max-width: 900px) {
  .split--balanced { gap: 22px; }
  .split--balanced .brand-band { margin-bottom: 2px; }
  /* Stacked layout: keep the picture at its native 4:5 and cap the width instead of
     cropping it into a short banner, so the whole image stays visible. */
  .split--balanced .media-frame { max-width: 440px; margin: 0 auto; }
}

/* Partner chips: left-aligned with a little lift so all thirteen categories stay
   legible and wrap naturally instead of running off the edge of the column. */
.partner-label { margin-bottom: 0; }
.chip-cloud--partners { justify-content: flex-start; margin: 14px 0 26px; }
.chip-cloud--partners .chip {
  background: var(--white); border: 1px solid rgba(31, 78, 68, .16);
  box-shadow: 0 2px 7px -4px rgba(31, 78, 68, .35);
}

.logo-plate { margin: 0 0 30px; text-align: center; }
.logo-plate img {
  display: block; width: 100%; max-width: 520px; margin: 0 auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
}

@media (max-width: 720px) {
  .hero-logo { max-width: 250px; }
  .page-media img { max-width: 100%; }
}


/* ---------------- Admin ---------------- */
.admin-wrap { padding: 34px 20px 64px; }
.admin-wrap.narrow { max-width: 720px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: 1.7rem; }
.page-head h2 { margin: 0; font-size: 1.25rem; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 26px; }
.stat-card {
  background: var(--white); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-bottom: 4px solid var(--sage);
}
.stat-card:first-child { border-bottom-color: var(--gold); }
.stat-num { font-family: var(--font-heading); font-size: 2.2rem; color: var(--forest); font-weight: 700; }
.stat-label { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-bar input[type="text"] { flex: 2; min-width: 200px; width: auto; }
.filter-bar select { flex: 1; min-width: 140px; width: auto; }

.table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th {
  background: var(--forest); color: #fff; text-align: left; padding: 12px 14px;
  font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--cream-dark); font-size: .92rem; vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--cream); }
.table a { font-weight: 600; }
.row-actions { display: flex; gap: 8px; align-items: center; }

.badge {
  display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
}
.badge-new { background: #e8f0fe; color: #1a56b0; }
.badge-in_review { background: #fdf6e3; color: #7a5c1a; }
.badge-contacted { background: var(--sage-light); color: var(--forest-dark); }
.badge-scheduled { background: #efe3fb; color: #6b3fa0; }
.badge-active { background: var(--sage-light); color: var(--forest); }
.badge-completed { background: #dff2e3; color: #1e7a3f; }
.badge-closed { background: #e8e8e8; color: #555; }
.badge-declined { background: var(--danger-bg); color: var(--danger); }
.badge-p-low { background: #eef3f0; color: var(--muted); }
.badge-p-normal { background: var(--sage-light); color: var(--forest-dark); }
.badge-p-high { background: #fdecd0; color: #9a6a10; }
.badge-p-urgent { background: var(--danger); color: #fff; }
.badge-c-active { background: #dff2e3; color: #1e7a3f; }
.badge-c-inactive { background: #f4f4f4; color: #666; }
.badge-c-archived { background: #e8e8e8; color: #555; }
.badge-role-admin { background: var(--forest); color: #fff; }
.badge-role-staff { background: var(--sage-light); color: var(--forest-dark); }

.pagination { display: flex; align-items: center; gap: 14px; margin-top: 20px; color: var(--muted); font-size: .9rem; }

.detail-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px; align-items: start; }
.meta-list { margin: 0; }
.meta-list > div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--cream-dark); }
.meta-list dt { min-width: 150px; color: var(--muted); font-size: .85rem; font-weight: 600; }
.meta-list dd { margin: 0; font-size: .93rem; overflow-wrap: anywhere; }
.message-block {
  background: var(--cream); border-left: 4px solid var(--gold); margin: 16px 0 0; padding: 14px 18px;
  border-radius: 8px; white-space: pre-wrap; font-size: .95rem;
}
.note { border-bottom: 1px solid var(--cream-dark); padding: 12px 0; }
.note p { margin: 0 0 4px; white-space: pre-wrap; }
.note-form { margin-top: 16px; }
.danger-zone { margin-top: 16px; border-top: 1px solid var(--cream-dark); padding-top: 12px; }
.danger-zone summary { cursor: pointer; color: var(--danger); font-weight: 600; font-size: .9rem; }
.danger-zone form { margin-top: 12px; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--forest-dark); color: var(--sage-light); margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1.4fr .8fr; gap: 34px; padding: 48px 20px 30px; }
.site-footer h4 { color: #fff; margin-bottom: 10px; font-size: 1.02rem; }
.site-footer p { font-size: .88rem; }
.footer-links a { color: var(--gold); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.site-footer .fineprint { color: #b8c8c0; }
.crisis-notice { background: #7a2e1c; color: #f7ded5; padding: 14px 0; font-size: .88rem; }
.copyright { padding: 16px 20px; font-size: .8rem; color: #8fa8a0; border-top: 1px solid rgba(255,255,255,.08); }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .two-col, .legal-cols, .contact-layout, .detail-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
  .table { display: block; overflow-x: auto; }
}
/* Collapse the nav to the hamburger until there is genuinely room for ten capsules
   beside the brand (see the brand-descriptor notes above). Showing it any earlier
   wraps the nav onto its own row and doubles the header height. */
@media (max-width: 1199px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    padding: 14px 0 6px; gap: 8px;
  }
  .site-nav.open { display: flex; }
  /* Full-width capsules: generous 46px tap targets for thumbs, with the same
     fade-out edge treatment so the dropdown does not look like a solid slab. */
  .site-nav a {
    width: 100%; justify-content: flex-start; min-height: 46px; padding: 12px 20px;
    font-size: .97rem;
    background-image: linear-gradient(90deg,
      rgba(156, 180, 160, .06) 0%,
      rgba(216, 231, 220, .55) 40%,
      rgba(156, 180, 160, .06) 100%);
  }
  .site-nav .nav-cta {
    justify-content: center; margin-top: 4px; padding: 13px 20px; min-height: 48px;
    background-image: none;
  }
}
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: 18px 0 26px; }
}

/* ---------------- Meet the Team ---------------- */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 26px 0 30px; }
.team-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; border-top: 4px solid var(--sage); display: flex; flex-direction: column;
}
.team-photo {
  aspect-ratio: 1 / 1; width: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--forest-dark) 0%, var(--forest) 55%, var(--forest-light) 100%);
}
.team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.team-monogram { font-family: var(--font-heading); font-size: 3.1rem; letter-spacing: 3px; color: rgba(255,255,255,.94); }
.team-body { padding: 22px 24px 26px; }
/* Scoped tightly so .prose h2 cannot win on specificity and re-space the card titles. */
.team-card .team-name { margin: 0 0 4px; font-size: 1.25rem; }
.team-card .team-credential { display: inline; font-weight: 400; font-size: .8em; color: var(--muted); }
.team-card .team-role {
  margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gold-dark);
}
.team-card .team-meta { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.team-card .team-meta li {
  display: flex; gap: 12px; align-items: baseline; padding: 7px 0;
  border-bottom: 1px dashed var(--cream-dark); overflow-wrap: anywhere;
}
.team-card .team-meta li:last-child { border-bottom: none; }
.team-card .team-key {
  flex: 0 0 62px; color: var(--muted); font-weight: 700; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .6px;
}
.team-card .team-focus { margin: 14px 0 0; font-size: .92rem; color: var(--muted); }
@media (min-width: 680px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}

/* ---------------- Footer contact ---------------- */
.site-footer .footer-contact { font-size: .95rem; margin: -2px 0 12px; }
.site-footer .footer-contact a { color: #fff; text-decoration: none; font-weight: 600; }
.site-footer .footer-contact a:hover { color: var(--gold); text-decoration: underline; }

/* ============================================================
   UX / quality layer — mobile-first, progressively enhanced.
   Everything here either fixes a usability defect or adds polish
   on top of the base layout; nothing redefines the core structure.
   ============================================================ */

/* 1. Touch: any tappable control clears the 44px minimum target size. */
@media (pointer: coarse) {
  .btn:not(.btn-block) { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-block { min-height: 50px; }
  .site-nav a { min-height: 46px; }
}

/* 2. Anchors land below the sticky header rather than tucked behind it. */
#main, section[id], [id="request-form"], [id="privacy"], [id="terms"], [id="accessibility"] {
  scroll-margin-top: 96px;
}

/* 3. Visible keyboard focus everywhere — previously only form fields were styled. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* 4. The sticky header gains depth once scrolled, so content reads as passing
      underneath it instead of merging with it. */
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(20, 53, 46, .16); }

/* 5. Large screens: widen the measure and spacing instead of stretching line length. */
@media (min-width: 1200px) {
  .container { max-width: 1200px; }
  .card-grid { gap: 26px; }
}
@media (min-width: 1500px) {
  .container { max-width: 1280px; }
  h1 { font-size: 2.45rem; }
  .section { padding: 72px 0; }
}
@media (min-width: 1800px) {
  .container { max-width: 1360px; }
}

/* 6. Balanced headline wrapping, and gentler paragraph rag where supported. */
h1, h2, h3 { text-wrap: balance; }
.prose p, .lede { text-wrap: pretty; }

/* 7. Honour the OS "reduce motion" preference: no crossfade, no lift, no auto-motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .site-nav a:hover, .card:hover, .btn-primary:hover, .brand .brand-logo:hover { transform: none; }
}