/* ============================================================================
   KINCIRCLE HEALTH  |  styles.css
   You should rarely need to edit this file. Text lives in content.js.
   Brand rules applied here: zero border radius, no shadows, 2px navy rules,
   flush-left headings, cream-dominant palette.
   ========================================================================== */

:root {
  /* Brand palette */
  --navy: #0E1B2A;
  --green: #1F9E76;
  --green-deep: #0F6E5C;
  --mint: #DCEDE5;
  --cream: #F7F3EA;
  --gold: #D79A3B;
  --clay: #B4633C;

  /* Derived */
  --navy-70: rgba(14, 27, 42, 0.72);
  --rule: 2px solid var(--navy);
  --hairline: 1px solid rgba(14, 27, 42, 0.22);

  /* Type */
  --display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
  --util: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --gutter: 24px;
  --max: 1240px;
  --section-y: clamp(64px, 8vw, 116px);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Focus and skip link -------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.on-navy :focus-visible { outline-color: var(--green); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: var(--cream);
  padding: 14px 20px; font-family: var(--util); font-size: 0.85rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: 0; }

/* --- Type scale ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-align: left;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -0.01em; }
h4 { font-size: 1rem; letter-spacing: -0.005em; }
p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--util);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 18px;
  display: block;
}
.on-navy .eyebrow { color: var(--gold); }

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  max-width: 62ch;
}

.meta {
  font-family: var(--util);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section { padding: var(--section-y) 0; }
section + section { border-top: var(--rule); }
.section-head { max-width: 74ch; margin-bottom: clamp(36px, 4vw, 56px); }

.on-navy { background: var(--navy); color: var(--cream); }
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4 { color: var(--cream); }
.on-navy a { color: var(--green); }
.on-navy a:hover { color: var(--mint); }
.on-navy + section { border-top: none; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: var(--cream);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--mint); color: var(--navy); border-color: var(--navy); }
.on-navy .btn { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.on-navy .btn:hover { background: var(--green); border-color: var(--green); color: var(--navy); }
.on-navy .btn--ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.on-navy .btn--ghost:hover { background: var(--cream); color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--cream);
  border-bottom: var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 76px;
}
.brand { display: flex; align-items: center; text-decoration: none; padding: 8px 0; }
.brand img { height: 34px; width: auto; }
/* The supplied logo PNGs have a solid white background. Multiply blending drops
   that white out against the cream page. Remove these two rules once transparent
   PNG or SVG versions of the logo are in place. See ASSETS-NEEDED.md. */
.brand img.full { mix-blend-mode: multiply; }
.brand .mark { display: none; height: 32px; }
.site-header.is-condensed .brand .full { display: none; }
.site-header.is-condensed .brand .mark { display: block; }

.site-nav ul { display: flex; align-items: center; gap: 26px; }
.site-nav a {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  padding: 12px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="true"] {
  color: var(--green-deep);
  border-bottom-color: var(--green);
}
.header-cta { display: none; }
@media (min-width: 1100px) { .header-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; min-width: 44px; padding: 10px 14px;
  background: transparent; border: 2px solid var(--navy);
  font-family: var(--util); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy);
  cursor: pointer;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
@media (max-width: 899px) {
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: var(--rule);
    padding: 8px var(--gutter) 24px;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: var(--hairline); }
  .site-nav a { display: block; padding: 16px 0; font-size: 1.05rem; border-bottom: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { padding: clamp(72px, 9vw, 132px) 0 clamp(60px, 7vw, 100px); }
.hero .grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 900px) {
  .hero .grid { grid-template-columns: 7fr 4fr; align-items: end; gap: 64px; }
}
.hero h1 { max-width: 16ch; }
.hero .lede { color: var(--mint); }
.hero-aside {
  border-left: 2px solid var(--green);
  padding-left: 24px;
}
.hero-aside p { font-family: var(--util); font-size: 0.8rem; letter-spacing: 0.06em; line-height: 1.7; color: var(--mint); }

/* --- Proof points --------------------------------------------------------- */
.proof { padding: 0; }
.proof-grid {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  background: var(--navy); border: var(--rule);
}
@media (min-width: 640px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .proof-grid { grid-template-columns: repeat(4, 1fr); } }
.proof-cell { background: var(--cream); padding: 30px 26px 28px; }
.proof-figure {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.1rem); line-height: 1;
  letter-spacing: -0.03em; display: block; margin-bottom: 12px;
}
.proof-figure::after {
  content: ""; display: block; width: 34px; height: 4px;
  background: var(--gold); margin-top: 14px;
}
.proof-label { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.3; margin: 0 0 6px; }
.proof-note { font-family: var(--util); font-size: 0.72rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--green-deep); margin: 0; }

/* --- Card grids ----------------------------------------------------------- */
.card-grid {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  background: var(--navy); border: var(--rule);
}
@media (min-width: 720px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--cream);
  padding: 32px 28px 30px;
  display: flex; flex-direction: column;
}
.card--mint { background: var(--mint); }

/* Service cards */
.service h3 { margin-bottom: 14px; }
.service .service-what { font-size: 1rem; margin-bottom: 20px; }
.service dl { margin: 0; border-top: var(--hairline); padding-top: 16px; }
.service dt {
  font-family: var(--util); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--green-deep);
  margin-bottom: 4px;
}
.service dd { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.55; }
.service dd:last-child { margin-bottom: 0; }

/* --- About ---------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 920px) { .about-grid { grid-template-columns: 7fr 5fr; gap: 64px; } }
.commitments { border-top: var(--rule); padding-top: 22px; }
.commitments li {
  font-family: var(--display); font-weight: 500; font-size: 1rem;
  padding: 14px 0 14px 26px; border-bottom: var(--hairline); position: relative;
}
.commitments li::before {
  content: ""; position: absolute; left: 0; top: 22px;
  width: 12px; height: 2px; background: var(--green);
}
.about-lockup img { width: 100%; max-width: 360px; margin-bottom: 34px; mix-blend-mode: multiply; }

/* Programs */
.program-list { border-top: var(--rule); }
.program-list li { border-bottom: var(--hairline); padding: 24px 0; }
.program-list h4 { font-family: var(--display); font-size: 1.15rem; margin-bottom: 8px; }
.program-list p { font-size: 0.98rem; }

/* Founder */
.founder-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
@media (min-width: 860px) { .founder-grid { grid-template-columns: 4fr 8fr; gap: 52px; } }
.founder-portrait { border: var(--rule); background: var(--mint); }
.founder-portrait img { width: 100%; }
.portrait-placeholder {
  aspect-ratio: 4 / 5; display: flex; align-items: flex-end;
  padding: 20px; font-family: var(--util); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep);
}
.founder-role { font-family: var(--util); font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 6px; }
.founder-affil { font-size: 0.95rem; padding-bottom: 22px; margin-bottom: 22px; border-bottom: var(--rule); }

/* --- Publications --------------------------------------------------------- */
.pub-list { border-top: var(--rule); }
.pub {
  display: grid; grid-template-columns: 1fr; gap: 6px 32px;
  padding: 28px 0; border-bottom: var(--hairline);
}
@media (min-width: 860px) { .pub { grid-template-columns: 128px 1fr; } }
.pub-meta { display: flex; flex-direction: column; gap: 6px; }
.pub-year { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1; }
.pub-topic {
  font-family: var(--util); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy);
  background: var(--mint); padding: 5px 8px; align-self: flex-start;
}
.pub h3 { font-size: 1.12rem; line-height: 1.28; margin-bottom: 8px; }
.pub h3 a { color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--green); }
.pub h3 a:hover { color: var(--green-deep); border-bottom-color: var(--navy); }
.pub-journal { font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 8px; }
.pub-summary { font-size: 0.98rem; margin: 0; }

/* --- Partnerships --------------------------------------------------------- */
.partner h3 { font-size: 1.35rem; margin-bottom: 12px; }
.partner-note { font-family: var(--util); font-size: 0.74rem; line-height: 1.6; letter-spacing: 0.04em; margin-top: 24px; color: var(--green-deep); max-width: 70ch; }

/* --- Families ------------------------------------------------------------- */
.families-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 920px) { .families-grid { grid-template-columns: 7fr 5fr; gap: 60px; } }
.safety-box { border: var(--rule); background: var(--cream); padding: 28px 26px; }
.safety-box h3 { font-size: 1.1rem; margin-bottom: 12px; }
.safety-box p { font-size: 0.98rem; }
.safety-box::before {
  content: ""; display: block; height: 6px; width: calc(100% + 52px);
  background: var(--gold); margin: -28px -26px 24px;
}

/* --- Contact and form ----------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 920px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: 64px; } }
.contact-details { border-top: 2px solid var(--green); padding-top: 24px; }
.contact-details dt { font-family: var(--util); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.contact-details dd { margin: 0 0 22px; font-size: 1rem; }

.field { margin-bottom: 22px; }
.field label {
  display: block; font-family: var(--util); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 8px; color: var(--mint);
}
.field .hint { display: block; font-family: var(--body); font-size: 0.85rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--mint); opacity: 0.85; margin-top: 4px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: var(--body); font-size: 1rem; color: var(--navy);
  background: var(--cream); border: 2px solid var(--cream);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--green);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--gold);
}
.field-error { display: none; font-family: var(--util); font-size: 0.74rem; letter-spacing: 0.05em; color: var(--gold); margin-top: 8px; }
.field-error.is-shown { display: block; }
.hp { position: absolute; left: -9999px; }

.privacy-notice {
  font-family: var(--util); font-size: 0.74rem; line-height: 1.65;
  letter-spacing: 0.04em; color: var(--mint); border-left: 2px solid var(--gold);
  padding-left: 16px; margin: 6px 0 26px; max-width: 60ch;
}
.form-status { display: none; border: 2px solid var(--cream); padding: 18px 20px; margin-bottom: 24px; font-size: 1rem; }
.form-status.is-shown { display: block; }
.form-status--ok { border-color: var(--green); }
.form-status--err { border-color: var(--gold); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--navy); color: var(--cream); border-top: 6px solid var(--green); padding: clamp(52px, 6vw, 80px) 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 5fr 3fr 4fr; gap: 48px; } }
.footer-logo { width: 210px; margin-bottom: 20px; }
.site-footer p { font-size: 0.95rem; color: var(--mint); }
.site-footer h3 { font-family: var(--util); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.site-footer nav li { margin-bottom: 10px; }
.site-footer nav a { font-family: var(--display); font-size: 0.95rem; color: var(--cream); text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer nav a:hover { color: var(--green); border-bottom-color: var(--green); }
.footer-base {
  margin-top: 44px; padding-top: 22px; border-top: 2px solid rgba(220, 237, 229, 0.28);
  display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between;
}
.footer-base p { font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.05em; margin: 0; }

/* --- 404 ------------------------------------------------------------------ */
.error-page { min-height: 62vh; display: flex; align-items: center; padding: var(--section-y) 0; }
.error-code { font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 12vw, 8rem); line-height: 0.9; letter-spacing: -0.04em; margin: 0 0 24px; }

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .btn-row, form { display: none; }
  body { background: #fff; }
}


/* --- Program portfolio and program pages -------------------------------- */
.program-card-grid { display:grid; grid-template-columns:1fr; border:2px solid var(--navy); gap:2px; background:var(--navy); }
@media (min-width:800px){ .program-card-grid{ grid-template-columns:repeat(3,1fr); } }
.program-card { background:var(--cream); padding:clamp(26px,4vw,42px); min-height:330px; display:flex; flex-direction:column; align-items:flex-start; }
.program-card:nth-child(2){ background:var(--mint); }
/* Show more of the lower part of the FatherlyACT image. */
.program-card:nth-child(2) .program-card-image img {
  object-position: center 72%;
}
.program-card h3{ font-size:clamp(1.65rem,3vw,2.3rem); margin:18px 0 8px; }
.program-card p{ margin-bottom:18px; }
.program-status { font-family:var(--util); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); }
.program-audience{ font-family:var(--util); font-size:.76rem; letter-spacing:.06em; color:var(--green-deep); }
.text-link{ margin-top:auto; font-family:var(--display); font-weight:700; color:var(--navy); text-decoration:none; border-bottom:2px solid var(--green); }
.text-link:hover{ color:var(--green-deep); }
.page-hero { background:var(--navy); color:var(--cream); padding:clamp(72px,10vw,132px) 0 clamp(56px,8vw,96px); border-bottom:6px solid var(--green); }
.page-hero h1{ color:var(--cream); max-width:16ch; }
.page-hero .lede{ color:var(--mint); max-width:68ch; }
.status-chip{ display:inline-block; font-family:var(--util); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); background:var(--gold); padding:8px 10px; margin-bottom:22px; }
.page-nav{ display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:28px; }
.page-nav a{ color:var(--mint); font-family:var(--display); text-decoration:none; border-bottom:1px solid var(--green); }
.feature-grid,.recruit-grid,.audience-grid{ display:grid; grid-template-columns:1fr; border:2px solid var(--navy); gap:2px; background:var(--navy); }
@media (min-width:760px){ .feature-grid{grid-template-columns:repeat(3,1fr);} .recruit-grid,.audience-grid{grid-template-columns:repeat(3,1fr);} }
.feature,.recruit-card,.audience-card{ background:var(--cream); padding:28px; }
.feature:nth-child(even),.recruit-card:nth-child(even){ background:var(--mint); }
.feature h3,.recruit-card h3,.audience-card h3{ font-size:1.25rem; margin-bottom:10px; }
.store-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.store-badge{ display:inline-flex; align-items:center; min-height:48px; padding:10px 16px; border:2px solid var(--cream); color:var(--cream); font-family:var(--display); font-weight:700; text-decoration:none; }
.store-badge:hover{ background:var(--cream); color:var(--navy); }
.store-badge.disabled{ opacity:.65; cursor:not-allowed; }
.stage-list{ display:grid; grid-template-columns:repeat(5,1fr); border:2px solid var(--navy); gap:2px; background:var(--navy); counter-reset:stage; }
.stage-list li{ list-style:none; background:var(--cream); padding:28px 18px; font-family:var(--display); font-weight:700; counter-increment:stage; }
.stage-list li::before{ content:"0" counter(stage); display:block; font-family:var(--util); font-size:.68rem; letter-spacing:.14em; color:var(--green-deep); margin-bottom:12px; }
@media(max-width:700px){ .stage-list{grid-template-columns:1fr;} }
.callout{ border:2px solid var(--navy); background:var(--mint); padding:clamp(26px,4vw,44px); }
.disclaimer{ border-left:4px solid var(--gold); padding-left:18px; font-family:var(--util); font-size:.82rem; line-height:1.65; }
.simple-list{ columns:1; padding-left:1.2rem; }
@media(min-width:760px){ .simple-list.two-col{ columns:2; column-gap:60px; } }
.simple-list li{ break-inside:avoid; margin-bottom:12px; }
.program-footer-links{ display:flex; flex-wrap:wrap; gap:16px 28px; margin-top:24px; }


/* ==========================================================================
   PHOTO-HEAVY LAYOUT, FAQ, NEWSLETTER, AND SCIENCE FACTS
   ========================================================================== */
.hero .grid { align-items: stretch; }
.hero-photo { margin: 0; min-height: 420px; border-left: 2px solid var(--green); overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: center; }
.photo-band { margin: 0; width: 100%; height: clamp(340px, 52vw, 680px); overflow: hidden; border-top: var(--rule); }
.photo-band--short { height: clamp(280px, 38vw, 520px); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.program-photo-hero { margin: 0; height: clamp(360px, 55vw, 720px); overflow: hidden; border-bottom: var(--rule); }
.program-photo-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.signup-section { padding: 0; background: var(--mint); }
.signup-grid { display: grid; grid-template-columns: 1fr; }
.signup-grid figure { margin: 0; min-height: 420px; overflow: hidden; }
.signup-grid figure img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.signup-copy { padding: clamp(48px, 7vw, 92px) max(var(--gutter), calc((100vw - var(--max))/2)); }
@media (min-width:900px){ .signup-grid { grid-template-columns: 1fr 1fr; } .signup-copy { padding-left: clamp(48px,6vw,90px); padding-right: max(var(--gutter), calc((100vw - var(--max))/2)); } }
.newsletter-form label { display:block; font-family:var(--display); font-weight:600; margin-bottom:8px; }
.newsletter-row { display:flex; gap:10px; align-items:stretch; max-width:620px; }
.newsletter-row input { flex:1; min-height:52px; border:2px solid var(--navy); background:var(--cream); padding:12px 14px; font:inherit; }
.form-note { font-family:var(--util); font-size:.72rem; line-height:1.55; margin-top:14px; }
.hp { position:absolute; left:-9999px; }
.faq-list { border-top:var(--rule); }
.faq-list details { border-bottom:var(--rule); padding:0; }
.faq-list summary { cursor:pointer; font-family:var(--display); font-size:clamp(1.05rem,2vw,1.35rem); font-weight:700; padding:24px 44px 24px 0; position:relative; }
.faq-list summary::after { content:"+"; position:absolute; right:8px; top:20px; font-size:1.7rem; }
.faq-list details[open] summary::after { content:"–"; }
.faq-list details p { padding:0 0 26px; max-width:74ch; }
.science-section { background:var(--mint); }
.science-grid { display:grid; grid-template-columns:1fr; gap:2px; background:var(--navy); border:var(--rule); }
@media(min-width:700px){.science-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.science-grid{grid-template-columns:repeat(5,1fr)}}
.science-fact { background:var(--cream); padding:28px 22px; }
.science-number { display:block; font-family:var(--display); font-size:clamp(2.2rem,4vw,3.4rem); line-height:1; margin-bottom:14px; color:var(--green-deep); }
.science-fact h3 { font-size:1.05rem; }
.science-fact p { font-family:var(--util); font-size:.78rem; line-height:1.55; }
.footer-legal-links { display:flex; flex-wrap:wrap; gap:20px; padding:20px 0; border-top:1px solid rgba(247,243,234,.25); font-family:var(--util); font-size:.75rem; }
.footer-legal-links a { color:var(--mint); }
.legal-page { padding:clamp(56px,8vw,100px) 0; }
.legal-page .wrap { max-width:900px; }
.legal-page h2 { margin-top:1.5em; }
.legal-page h3 { margin-top:1.4em; }
.legal-page ul { list-style:disc; padding-left:24px; margin:0 0 1.2em; }
.legal-page li { margin-bottom:.45em; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2px; background:var(--navy); border:var(--rule); }
.blog-card { background:var(--cream); padding:28px; }
@media(max-width:899px){ .newsletter-row{flex-direction:column;} .hero-photo{min-height:320px;} .hero-photo img{min-height:320px;} }


/* ======================== AUGUST 2026 BRAND UPDATES ======================== */
.hero-brandmark {
  display: block;
  width: min(560px, 88%);
  height: auto;
  margin: 0 0 38px;
}
.has-submenu { position: relative; }
.submenu {
  display: none;
  position: absolute;
  z-index: 50;
  top: calc(100% + 12px);
  left: 0;
  min-width: 190px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 2px solid var(--navy);
  background: var(--cream);
}
.submenu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.submenu li + li { border-top: 2px solid var(--navy); }
.submenu a {
  display: block;
  padding: 14px 16px;
  color: var(--navy) !important;
  font-family: Archivo, sans-serif;
  font-size: 11px !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.submenu a:hover, .submenu a:focus-visible { background: var(--mint); }
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu { display: block; }

.partner-cta {
  margin-top: 28px;
  padding: 36px;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 28px;
  align-items: center;
}
.partner-cta h3, .partner-cta p { margin: 0; color: inherit; }

.about-page-hero { padding-bottom: 80px; }
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 72px;
  align-items: center;
}
.brandmark-stage {
  position: relative;
  min-height: 430px;
  border: 2px solid rgba(247,243,234,.32);
  overflow: hidden;
}
.brandmark-stage__large {
  position: absolute;
  width: 390px;
  height: 390px;
  right: -85px;
  bottom: -85px;
  opacity: .92;
}
.brandmark-stage__small {
  position: absolute;
  width: 116px;
  height: 116px;
  left: 42px;
  top: 42px;
}
.about-subnav {
  position: sticky;
  top: 76px;
  z-index: 20;
  background: var(--cream);
  border-bottom: 2px solid var(--navy);
}
.about-subnav .wrap {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding-top: 0;
  padding-bottom: 0;
}
.about-subnav a {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  border-right: 2px solid var(--navy);
  font-family: Archivo, sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.about-subnav a:hover, .about-subnav a:focus-visible { background: var(--mint); }

.brand-foundation-grid {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 72px;
  align-items: center;
}
.foundation-mark {
  border: 2px solid var(--navy);
  min-height: 380px;
  display: grid;
  place-items: center;
  background: var(--mint);
}
.foundation-mark img { width: min(300px, 70%); height: auto; }
.brand-foundation--navy { background: var(--navy); color: var(--cream); }
.brand-foundation--navy h2, .brand-foundation--navy p { color: var(--cream); }
.brand-foundation--navy .brand-foundation-grid { grid-template-columns: 1.3fr .7fr; }
.brand-foundation--navy .foundation-mark { border-color: var(--cream); background: transparent; }
.brand-promise {
  margin: 0;
  font-family: Newsreader, serif;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.08;
  color: var(--navy);
}
.mint-section { background: var(--mint); }
.story-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--navy);
  gap: 2px;
  background: var(--navy);
}
.value-card { background: var(--cream); padding: 34px; min-height: 230px; }
.about-services-callout .wrap,
.service-close .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.services-hero h1 { max-width: 18ch; }
.service-close { border-top: 2px solid var(--cream); }

.app-preview-section { background: var(--cream); }
.app-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 18px;
  overflow-x: auto;
  padding: 8px 4px 26px;
  scroll-snap-type: x mandatory;
}
.app-shot {
  min-width: 190px;
  margin: 0;
  border: 2px solid var(--navy);
  background: var(--navy);
  scroll-snap-align: start;
}
.app-shot img {
  display: block;
  width: 100%;
  height: 430px;
  object-fit: cover;
  object-position: top;
}
.app-preview-source {
  font-size: 14px;
  max-width: 760px;
}

@media (max-width: 1100px) {
  .partner-cta { grid-template-columns: 1fr; }
  .app-screenshot-grid { grid-template-columns: repeat(5, 220px); }
}
@media (max-width: 780px) {
  .hero-brandmark { width: min(430px, 100%); }
  .site-nav .submenu {
    position: static;
    display: block;
    border: 0;
    border-top: 1px solid var(--navy);
    margin-top: 8px;
  }
  .site-nav .submenu a { padding-left: 30px; }
  .about-hero-grid,
  .brand-foundation-grid,
  .brand-foundation--navy .brand-foundation-grid,
  .story-grid,
  .about-services-callout .wrap,
  .service-close .wrap { grid-template-columns: 1fr; }
  .brandmark-stage { min-height: 300px; }
  .brandmark-stage__large { width: 290px; height: 290px; }
  .foundation-mark { min-height: 280px; }
  .values-grid { grid-template-columns: 1fr; }
}


/* ======================== AUGUST 2026 REFINEMENTS V6 ======================== */

/* Header logo reduced by half from the previous 34px treatment. */
.site-header .brand img.full {
  height: 17px;
  width: auto;
}
.site-header .brand img.mark {
  height: 24px;
  width: 24px;
}

/* About now opens as a dedicated page. Mission and Vision use the on-page subnav,
   so the global dropdown is intentionally removed. */
.site-nav .submenu,
.has-submenu > .submenu {
  display: none !important;
}

/* Homepage hero: text on the left and the family image directly to the right. */
.hero .grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 520px);
  gap: 56px;
  align-items: start;
}

.hero-photo--landscape {
  width: 100%;
  max-width: 520px;
  min-height: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-left: 0;
  border-top: 0;
  justify-self: end;
  align-self: start;
  overflow: hidden;
  background: var(--navy);
}

.hero-photo--landscape img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
  background: var(--navy);
}

/* Small representative images for BrotherlyACT, FatherlyACT, and SisterlyACT. */
.program-card {
  padding-top: 0;
  overflow: hidden;
}
.program-card-image {
  width: calc(100% + clamp(52px, 8vw, 84px));
  margin: 0 calc(clamp(26px, 4vw, 42px) * -1) 28px;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border-bottom: 2px solid var(--navy);
}
.program-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* The nine organizational services now live on the dedicated About page. */
.about-services-section {
  background: var(--cream);
  border-top: 2px solid var(--navy);
}
.about-services-section .card.service {
  min-height: 100%;
}

@media (max-width: 900px) {
  .hero .grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-photo--landscape {
    width: 100%;
    max-width: 100%;
    justify-self: start;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 780px) {
  .site-header .brand img.full {
    height: 17px;
  }

  .program-card-image {
    aspect-ratio: 16 / 9;
  }
}


/* ============================================================================
   ACTIVE RECRUITMENT  |  Evidence submenu, homepage opportunity table,
   status labels, and opportunity cards.
   Square edges, no shadows, 2px navy rules, cream and mint surfaces.
   ========================================================================== */

/* --- Visually hidden text (still read by screen readers) ------------------ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Evidence submenu ----------------------------------------------------- */
/* An earlier rule switched every submenu off with !important. These rules are
   more specific, so the Evidence submenu comes back without touching it. */
.site-nav li.has-submenu {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.site-nav li.has-submenu > ul.submenu {
  top: calc(100% + 14px);
}

.site-nav li.has-submenu:hover > ul.submenu,
.site-nav li.has-submenu:focus-within > ul.submenu,
.site-nav li.has-submenu.is-open > ul.submenu {
  display: block !important;
}

/* Small toggle so the submenu also opens by tap and by keyboard. */
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  margin-left: 6px;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  color: var(--navy);
  cursor: pointer;
}
.submenu-toggle::after {
  content: "";
  display: block;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.submenu-toggle:hover { color: var(--green-deep); }
.has-submenu.is-open > .submenu-toggle::after { transform: translateY(2px) rotate(225deg); }

@media (max-width: 899px) {
  /* On phones the submenu expands inside the menu instead of floating. */
  .site-nav li.has-submenu > a { flex: 1 1 auto; }
  .site-nav li.has-submenu > ul.submenu {
    position: static;
    top: auto;
    flex: 1 0 100%;
    min-width: 0;
    margin: 0 0 12px;
    border: 2px solid var(--navy);
    background: var(--mint);
  }
  .site-nav li.has-submenu:hover > ul.submenu,
  .site-nav li.has-submenu:focus-within > ul.submenu {
    display: none !important;
  }
  .site-nav li.has-submenu.is-open > ul.submenu { display: block !important; }
  .site-nav li.has-submenu > ul.submenu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 14px 18px;
    font-size: 12px !important;
    white-space: normal;
  }
  /* 44px touch target on phones. */
  .submenu-toggle { min-width: 44px; min-height: 44px; margin-left: 8px; }
}

/* --- Status labels -------------------------------------------------------- */
.status-tag {
  display: inline-block;
  font-family: var(--util);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 2px solid transparent;
}
.status-tag--green   { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.status-tag--gold    { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.status-tag--mint    { background: var(--mint); color: var(--navy); border-color: var(--navy); }
.status-tag--paused  { background: transparent; color: var(--navy); border-color: var(--navy); }
.status-tag--closed  { background: #E4E2DC; color: var(--navy); border-color: #6E7680; }
.status-tag--neutral { background: transparent; color: var(--navy); border-color: var(--navy); }

/* --- Homepage recruitment table ------------------------------------------ */
.recruit-band { background: var(--mint); }
.recruit-band-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
@media (min-width: 900px) {
  .recruit-band-head { grid-template-columns: minmax(0, 1fr) minmax(220px, 330px); gap: 48px; }
}
.recruit-band-head .lede { margin-bottom: 0; }
.recruit-band-photo {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 2px solid var(--navy);
  background: var(--navy);
}
.recruit-band-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.recruit-table-wrap { border: 2px solid var(--navy); background: var(--cream); }
.recruit-table { width: 100%; border-collapse: collapse; text-align: left; }
.recruit-table caption { text-align: left; }
.recruit-table thead th {
  background: var(--navy);
  color: var(--cream);
  font-family: var(--util);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 18px;
}
.recruit-table tbody th,
.recruit-table tbody td {
  padding: 18px;
  border-top: 2px solid var(--navy);
  vertical-align: top;
}
.recruit-table tbody th {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  width: 26%;
}
.recruit-table tbody td { font-size: 0.95rem; line-height: 1.5; }
.recruit-next {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--green);
}
.recruit-next:hover { color: var(--green-deep); border-bottom-color: var(--navy); }
.recruit-next:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
.recruit-band-cta { margin-top: 28px; }

@media (max-width: 820px) {
  /* Each row becomes a card. Column names move into the cells. */
  .recruit-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .recruit-table,
  .recruit-table tbody,
  .recruit-table tr,
  .recruit-table tbody th,
  .recruit-table tbody td { display: block; width: auto; }
  .recruit-table tr { padding: 20px 18px 22px; border-top: 2px solid var(--navy); }
  .recruit-table tr:first-child { border-top: 0; }
  .recruit-table tbody th,
  .recruit-table tbody td { padding: 0; border-top: 0; }
  .recruit-table tbody th { font-size: 1.15rem; margin-bottom: 10px; }
  .recruit-table tbody td { margin-bottom: 12px; }
  .recruit-table tbody td:last-child { margin-bottom: 0; }
  .recruit-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--util);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 5px;
  }
}

/* --- Active Recruitment page --------------------------------------------- */
.recruit-page section[id],
.recruit-page .opportunity,
.recruit-page .anchor-alias { scroll-margin-top: 92px; }

.recruit-hero .eyebrow { color: var(--gold); }
.recruit-hero h1 { max-width: 20ch; }

.opportunity-list { border-top: 2px solid var(--navy); }
.opportunity {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: clamp(28px, 3.6vw, 46px) 0;
  border-bottom: 2px solid var(--navy);
}
@media (min-width: 940px) {
  .opportunity { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 44px; }
}
.anchor-alias { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; }

.opportunity-photo {
  margin: 0 0 26px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid var(--navy);
  background: var(--navy);
}
@media (min-width: 940px) { .opportunity-photo { margin-bottom: 0; align-self: start; } }
.opportunity-photo img { width: 100%; height: 100%; object-fit: cover; }

.opportunity-top { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-bottom: 16px; }
.opportunity-program {
  font-family: var(--util);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.opportunity h3 { font-size: clamp(1.45rem, 2.5vw, 2rem); margin-bottom: 12px; }
.opportunity-desc { font-size: 1.02rem; }

.opportunity-details {
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .opportunity-details { grid-template-columns: 210px minmax(0, 1fr); } }
.opportunity-details dt {
  font-family: var(--util);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-deep);
  border-top: var(--hairline);
  padding: 12px 0 2px;
}
.opportunity-details dd {
  margin: 0;
  padding: 0 0 12px;
  font-size: 0.97rem;
  line-height: 1.55;
}
@media (min-width: 720px) {
  .opportunity-details dt { padding: 13px 20px 13px 0; }
  .opportunity-details dd { border-top: var(--hairline); padding: 13px 0; }
}

.opportunity-subhead {
  font-family: var(--util);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 26px 0 12px;
}
.opportunity-activities { list-style: disc; padding-left: 22px; margin: 0; }
.opportunity-activities li { margin-bottom: 8px; font-size: 0.97rem; }

.opportunity-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.opportunity-actions .btn { min-height: 48px; }
/* An action with no approved link yet is shown, but is not clickable. */
.btn.is-pending {
  background: transparent;
  color: var(--navy);
  border-color: rgba(14, 27, 42, 0.45);
  cursor: not-allowed;
  font-weight: 500;
}
.btn.is-pending:hover { background: transparent; color: var(--navy); border-color: rgba(14, 27, 42, 0.45); }

.opportunity-note,
.opportunity-research {
  font-family: var(--util);
  font-size: 0.79rem;
  line-height: 1.65;
  margin-top: 22px;
  padding-left: 16px;
  max-width: 72ch;
}
.opportunity-note { border-left: 4px solid var(--gold); }
.opportunity-research { border-left: 4px solid var(--green); }

/* What to expect */
.expect-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--navy);
  border: 2px solid var(--navy);
}
@media (min-width: 640px) { .expect-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .expect-grid { grid-template-columns: repeat(4, 1fr); } }
.expect-grid li {
  background: var(--cream);
  padding: 24px 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}
.expect-grid li:nth-child(even) { background: var(--mint); }
.expect-closing {
  font-family: var(--util);
  font-size: 0.82rem;
  line-height: 1.7;
  margin-top: 24px;
  padding-left: 16px;
  border-left: 4px solid var(--green);
}

/* Privacy section on navy */
.commitments--reverse { border-top-color: var(--cream); }
.commitments--reverse li { border-bottom-color: rgba(247, 243, 234, 0.3); color: var(--cream); }
.commitments--reverse li::before { background: var(--green); }
.safety-box--navy { background: var(--mint); border-color: var(--cream); }
.safety-box--navy h3,
.safety-box--navy p { color: var(--navy); }

/* Past opportunities */
.past-empty {
  border: 2px solid var(--navy);
  background: var(--mint);
  padding: 24px 22px;
  font-family: var(--util);
  font-size: 0.85rem;
  line-height: 1.7;
  max-width: 74ch;
}