/* ============================================================
   Aloha Psychiatry, v4
   Design language taken from the August artifact draft: quiet,
   institutional, document-like. Two typefaces, squared corners,
   hairline-bordered grids, near-white ground. No cards, no
   shadows, no mono, no decorative motifs.
   The artifact shipped as inline styles with zero media queries;
   this is the same look rebuilt as a real, responsive stylesheet.
   ============================================================ */

:root {
  /* ground + surfaces */
  --bg:        #FFFDF8;   /* page ground, near-white, faintly warm */
  --panel:     #F7F2E7;   /* alternating section tone */
  --line:      #E3DDD2;   /* hairline on --bg */
  --line-2:    #DED6C4;   /* hairline on --panel */

  /* ink */
  --ink:       #1C2621;   /* headings */
  --text:      #3D4A43;   /* body */
  --muted:     #5A665F;   /* secondary */
  --muted-2:   #5F6C64;   /* tertiary */
  --label:     #75663F;   /* eyebrows and small caps, warm brown-gold */

  /* accent */
  --pine:      #324B3D;
  --pine-dark: #1C2621;
  --gold:      #CD9E37;

  /* controls */
  --field:     #D8CFBB;
  --btn-line:  #C9C0AE;

  /* type */
  --display: "Source Serif 4", Georgia, serif;
  --sans:    "Manrope", system-ui, -apple-system, sans-serif;

  /* measure */
  --max: 1140px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
[id] { scroll-margin-top: 6rem; }

a { color: var(--pine); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--pine); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ------------------------------------------------------------
   Type
   ------------------------------------------------------------ */
.eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 1.5rem;
}
.label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.8rem;
}

h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0; }

.hero-title {
  font-weight: 400;
  font-size: clamp(2.25rem, 4.2vw, 3rem);   /* 36 → 48 */
  line-height: 1.13;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  margin-bottom: 1.5rem;
}
.page-title {
  font-weight: 400;
  font-size: clamp(2.1rem, 3.9vw, 2.75rem);  /* 34 → 44 */
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  max-width: 26em;
  margin-bottom: 1.4rem;
}
.section-title {
  font-weight: 400;
  font-size: clamp(1.65rem, 2.7vw, 2rem);  /* 26 → 32 */
  line-height: 1.2;
  text-wrap: pretty;
}
.sub-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3125rem;                        /* 21 */
  line-height: 1.3;
}

.lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 40em; margin: 0; }
.lede-ink { color: #4E5A53; }
.prose { max-width: 42em; }
.prose p { margin: 0 0 1.25rem; }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.small { font-size: 1rem; }

/* ------------------------------------------------------------
   Buttons, squared, not pills
   ------------------------------------------------------------ */
.btn {
  display: inline-block;
  border-radius: 6px;
  padding: 0.85rem 1.5rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.35;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}
.btn-primary { background: var(--pine); color: var(--bg); }
.btn-primary:hover { background: var(--pine-dark); color: var(--bg); }
.btn-secondary { color: var(--pine); border-color: var(--btn-line); background: transparent; }
.btn-secondary:hover { border-color: var(--pine); color: var(--pine); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* text link with a quiet rule under it */
.link-more {
  display: inline-block;
  font-size: 1.0625rem;
  color: var(--pine);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.link-more:hover { border-color: var(--pine); }

/* ------------------------------------------------------------
   Patient-safety top bar
   ------------------------------------------------------------ */
.topbar {
  background: var(--pine);
  color: #EEDFBC;
  font-size: 0.9rem;
  line-height: 1.5;
}
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  padding-block: 0.55rem;
}
.topbar .crisis { color: #FFFDF7; }
@media (max-width: 719px) { .topbar { font-size: 0.8rem; } }

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.1rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.brand img { height: 2.875rem; width: auto; }
.brand .wordmark {
  display: block;
  font-family: var(--display);
  letter-spacing: 0.3em;
  font-size: 1.25rem;
  color: var(--pine);
  line-height: 1.1;
}
.brand .subword {
  display: block;
  letter-spacing: 0.24em;
  font-size: 0.6875rem;
  color: var(--muted-2);
  line-height: 1.5;
}
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a {
  font-size: 0.96875rem;
  color: var(--text);
  text-decoration: none;
  padding-block: 0.2rem;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--pine); box-shadow: inset 0 -1px 0 var(--gold); }
.nav-cta {
  background: var(--pine);
  color: var(--bg);
  border-radius: 6px;
  padding: 0.6rem 1.1rem;
  font-size: 0.96875rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--pine-dark); color: var(--bg); }

@media (max-width: 1023px) {
  .nav-inner { flex-wrap: wrap; gap: 0.6rem 1rem; padding-block: 0.85rem; }
  .nav-cta { order: 1; margin-left: auto; }
  .nav-links {
    order: 2;
    flex-basis: 100%;
    gap: 1.35rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.15rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 0.9rem; }
}
@media (max-width: 520px) {
  .brand img { height: 2.4rem; }
  .brand .wordmark { font-size: 1.05rem; letter-spacing: 0.26em; }
  .nav-cta { font-size: 0.875rem; padding: 0.5rem 0.9rem; }
}

/* ------------------------------------------------------------
   Sections, separated by hairlines and tone, never by cards
   ------------------------------------------------------------ */
.section { border-bottom: 1px solid var(--line); }
.section > .wrap { padding-block: clamp(3.25rem, 6vw, 5.25rem); }
.section-panel { background: var(--panel); }
.section-panel .section-head-line { border-color: var(--line-2); }
.section-tight > .wrap { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

/* two-column section head: title left, content right */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; }
  .split-even { grid-template-columns: 1fr 1fr; }
  .split-wide { grid-template-columns: 1.15fr 0.85fr; }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero > .wrap { padding-block: clamp(3.25rem, 6vw, 5.75rem); }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
}
/* single-column hero, headline holds its own measure instead of
   running the full container width */
.hero-narrow { max-width: 46rem; }
.hero-narrow .hero-title { max-width: 18em; }

/* ------------------------------------------------------------
   Notice panel, patient redirect
   ------------------------------------------------------------ */
.notice {
  background: var(--panel);
  border-top: 2px solid var(--gold);
  padding: 1.6rem 1.75rem;
}
.section-panel .notice { background: var(--bg); }
.notice p { margin: 0; font-size: 1.03125rem; line-height: 1.55; color: #4E5A53; }
.notice strong { color: var(--ink); }

/* ------------------------------------------------------------
   Fact bar, the three-up strip under a hero
   ------------------------------------------------------------ */
.factbar { background: var(--panel); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.factbar-inner {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.factbar-inner > div {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line-2);
}
.factbar-inner > div:last-child { border-bottom: 0; }
.factbar .fb-label {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: .6rem;
}
.factbar .fb-value {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.28;
  color: var(--ink);
  text-wrap: pretty;
}
.factbar .fb-note {
  display: block;
  margin-top: .45rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted);
}
@media (min-width: 760px) {
  .factbar-inner { grid-template-columns: repeat(3, 1fr); }
  .factbar-inner > div { padding: 2.5rem 2rem 2.6rem; border-bottom: 0; border-left: 1px solid var(--line-2); }
  .factbar-inner > div:first-child { padding-left: 0; border-left: 0; }
  .factbar-inner > div:last-child { padding-right: 0; }
}

/* ------------------------------------------------------------
   Record row, owned numbers, plainly
   ------------------------------------------------------------ */
.record {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line-2);
}
@media (min-width: 640px) { .record { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .record { grid-template-columns: repeat(4, 1fr); } }
.record > div { padding: 1.75rem 1.5rem 0 0; }
@media (min-width: 640px) {
  .record > div { border-left: 1px solid var(--line-2); padding-inline: 1.5rem; }
  .record > div:first-child { border-left: 0; padding-left: 0; }
}
@media (min-width: 1000px) {
  .record > div:first-child { border-left: 0; }
}
.record .n {
  font-family: var(--display);
  font-size: 1.875rem;
  line-height: 1.15;
  color: var(--pine);
  margin-bottom: 0.5rem;
}
.record .c { font-size: 1rem; color: var(--muted); }

/* ------------------------------------------------------------
   Cell grid, bordered cells, the workhorse layout
   ------------------------------------------------------------ */
.cells {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.section-panel .cells { border-top-color: var(--line-2); }
@media (min-width: 720px) { .cells { grid-template-columns: 1fr 1fr; } }
.cell {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.125rem;
  color: var(--ink);
}
.section-panel .cell { border-bottom-color: var(--line-2); }
@media (min-width: 720px) {
  .cell { padding: 1.35rem 1.5rem 1.35rem 0; }
  .cell:nth-child(even) { padding: 1.35rem 0 1.35rem 1.5rem; border-left: 1px solid var(--line); }
  .section-panel .cell:nth-child(even) { border-left-color: var(--line-2); }
}
.cell h4 { font-size: 1.1875rem; font-weight: 600; margin-bottom: 0.3rem; }
.cell p { margin: 0; font-size: 1.03125rem; color: var(--muted); line-height: 1.55; }

/* ------------------------------------------------------------
   Stack list, titled rows in a single column
   ------------------------------------------------------------ */
.stack { display: grid; gap: 2.25rem; }
.stack-item h3 { font-size: 1.3125rem; font-weight: 600; margin-bottom: 0.45rem; }
.stack-item p { margin: 0; color: var(--muted); max-width: 44em; }

.ruled { border-top: 1px solid var(--line); }
.section-panel .ruled { border-top-color: var(--line-2); }
.ruled > * {
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.section-panel .ruled > * { border-bottom-color: var(--line-2); }
.ruled h3 { font-size: 1.4375rem; font-weight: 600; margin-bottom: 0.4rem; }
.ruled p { margin: 0; color: var(--muted); max-width: 44em; }

/* ------------------------------------------------------------
   Steps, numbered, four across
   ------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: 1fr; gap: 2.25rem; }
@media (min-width: 620px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 2.25rem; } }
.step .n {
  font-family: var(--display);
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  color: var(--label);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--field);
  margin-bottom: 1.1rem;
}
.step h3 { font-size: 1.1875rem; font-weight: 600; margin-bottom: 0.45rem; }
.step p { margin: 0; font-size: 1.03125rem; color: var(--muted); }

/* ------------------------------------------------------------
   Checklist, numbered standards
   ------------------------------------------------------------ */
.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); counter-reset: chk; }
.checklist li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line-2);
  counter-increment: chk;
}
.checklist li::before {
  content: counter(chk, decimal-leading-zero);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--label);
}
.checklist li span { font-size: 1.09375rem; color: var(--ink); line-height: 1.5; }
.checklist:not(.checklist-2) li:last-child { border-bottom: 0; padding-bottom: 0; }
.two-up .h-section { padding-bottom: 0.9rem; margin-bottom: 0; border-bottom: 1px solid var(--line-2); }
@media (min-width: 900px) {
  .checklist-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
  .checklist-2 li:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}

/* ------------------------------------------------------------
   Plain list, bordered rows, no numbers
   ------------------------------------------------------------ */
.plainlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.section-panel .plainlist { border-top-color: var(--line-2); }
.plainlist li {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.09375rem;
  color: var(--ink);
}
.section-panel .plainlist li { border-bottom-color: var(--line-2); }

/* ------------------------------------------------------------
   Q&A
   ------------------------------------------------------------ */
.qa { border-top: 1px solid var(--line); }
.section-panel .qa { border-top-color: var(--line-2); }
.qa details { border-bottom: 1px solid var(--line); }
.section-panel .qa details { border-bottom-color: var(--line-2); }
.qa summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 400;
  color: var(--label);
  flex-shrink: 0;
}
.qa details[open] summary::after { content: "\2013"; }
.qa details p { margin: 0; padding: 0 0 1.4rem; color: var(--muted); max-width: 60em; }

/* ------------------------------------------------------------
   Facts table, the company record
   ------------------------------------------------------------ */
.facts { margin: 0; border-top: 1px solid var(--line-2); }
.facts-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line-2);
}
@media (min-width: 620px) { .facts-row { grid-template-columns: 11.875rem 1fr; gap: 1.5rem; align-items: baseline; } }
.facts-row dt { font-size: 0.96875rem; color: var(--muted); }
.facts-row dd { margin: 0; font-size: 1.09375rem; color: var(--ink); }

/* ------------------------------------------------------------
   Quiet aside
   ------------------------------------------------------------ */
.aside-note {
  margin: 1.5rem 0 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--gold);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46em;
}

/* ------------------------------------------------------------
   Photography, squared, hairline-framed
   ------------------------------------------------------------ */
.photo { margin: 0; }
.photo img { width: 100%; height: auto; border: 1px solid var(--line); }
.photo-band img { aspect-ratio: 21 / 9; object-fit: cover; }
.photo-tall img { aspect-ratio: 4 / 3; object-fit: cover; }
.photo figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }

/* full-bleed landscape band */
.band { border-bottom: 1px solid var(--line); margin: 0; }
.band img {
  width: 100%;
  height: clamp(200px, 26vw, 320px);
  object-fit: cover;
  border: 0;
}

/* ------------------------------------------------------------
   Direct contact details
   ------------------------------------------------------------ */
.direct { margin-top: 1.75rem; }
.direct .line { font-size: 1.125rem; color: var(--ink); line-height: 1.75; }
.direct .place { color: var(--muted); }

/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */
.form { display: grid; gap: 1.5rem; max-width: 48rem; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: 0.9375rem; color: var(--muted); margin-bottom: 0.45rem; }
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--field);
  border-radius: 6px;
  padding: 0.75rem 0.875rem;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--pine);
  outline-offset: 1px;
  border-color: transparent;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input[type="file"] { padding: 0.6rem 0.875rem; font-size: 0.96875rem; }
.form-note { margin: 0; font-size: 0.9375rem; color: var(--muted); max-width: 48em; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.form-fallback { font-size: 0.9375rem; color: var(--muted); }

/* ------------------------------------------------------------
   Closing band
   ------------------------------------------------------------ */
.closer { background: var(--panel); border-bottom: 1px solid var(--line); }
.closer > .wrap { padding-block: clamp(3.25rem, 6vw, 5rem); }
.closer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem 3rem;
}
.closer-grid > div { min-width: min(100%, 22rem); }
.closer .section-title { max-width: 20em; margin-bottom: 0.85rem; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.foot { background: var(--panel); }
.foot > .wrap { padding-block: 3.5rem 2.25rem; }
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-2);
}
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.2fr 0.8fr 0.8fr; gap: 3rem; } }
.foot-brand .brand { margin-bottom: 1.1rem; }
.foot-brand p { margin: 0; font-size: 0.96875rem; color: var(--muted); max-width: 30em; }
.foot h5 {
  margin: 0 0 0.8rem;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}
.foot-list { display: grid; gap: 0.5rem; font-size: 0.96875rem; color: var(--text); }
.foot-list a { color: var(--text); text-decoration: none; }
.foot-list a:hover { color: var(--pine); text-decoration: underline; text-decoration-color: var(--gold); }
.foot-legal {
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--muted-2);
}


/* ------------------------------------------------------------
   Hero aside, the spec list beside a page hero
   ------------------------------------------------------------ */
.hero-aside {
  margin: 0;
  border-top: 1px solid var(--line);
  align-self: start;
}
.hero-aside > div {
  padding: 1.05rem 0 1.15rem;
  border-bottom: 1px solid var(--line);
}
.hero-aside dt {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--label);
}
.hero-aside dd {
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}
.hero-aside + .hero-aside { margin-top: 1.5rem; }

/* footer contact list + site nav */
.foot dl { margin: 0; display: grid; gap: 0.15rem; }
.foot dt {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--label);
  margin-top: 0.85rem;
}
.foot dl > dt:first-of-type { margin-top: 0; }
.foot dd { margin: 0; font-size: 0.96875rem; color: var(--text); }
.foot dd a { color: var(--text); text-decoration: none; }
.foot dd a:hover { color: var(--pine); text-decoration: underline; text-decoration-color: var(--gold); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.foot ul a { font-size: 0.96875rem; color: var(--text); text-decoration: none; }
.foot ul a:hover { color: var(--pine); text-decoration: underline; text-decoration-color: var(--gold); }
.foot-brand img { display: block; width: 100%; max-width: 6.5rem; height: auto; margin-bottom: 1.1rem; }

.foot-note {
  margin: 1.75rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--line-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62em;
  text-wrap: pretty;
}


/* ============================================================
   Inner-page components
   These class names were authored on the inner pages but never
   had rules; defined here in the same language as the home page.
   ============================================================ */

/* display scale, aliases of the home page's title scale */
.display-xl {
  font-weight: 400;
  font-size: clamp(2.25rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.display-lg {
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.display-md {
  font-weight: 400;
  font-size: clamp(1.65rem, 2.7vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.h-section { font-size: 1.4375rem; font-weight: 600; margin-bottom: 0.9rem; }
.body-lg { font-size: 1.09375rem; line-height: 1.65; }
.body-lg p { margin: 0 0 1.25rem; max-width: 44em; }
.punctuate { color: var(--gold); }
.arr { display: none; }

/* hero variants used on inner pages */
.hero-grid { align-items: start; }
.hero-headline { max-width: 15em; margin-bottom: 1.5rem; }
.hero-headline em { font-style: italic; }
.hero-lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: #4E5A53; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.hero-media { display: grid; gap: 2rem; }
.hero-media .hero-aside { margin-top: 0; }

/* section head: eyebrow left, title and lede right */
.section-head { margin-bottom: 3rem; max-width: 46rem; }
.section-head .eyebrow { margin-bottom: 0.85rem; }
.section-head .lede { max-width: 40em; }

.section-paper { background: var(--panel); }
.section-paper .cells, .section-paper .ruled { border-top-color: var(--line-2); }
.section-paper .cell, .section-paper .ruled > * { border-bottom-color: var(--line-2); }
.section-ink { background: var(--pine); border-bottom: 0; }
.section-ink .eyebrow { color: #D7C08A; }
.section-ink, .section-ink p, .section-ink strong { color: #F3EDDF; }
.section-ink strong { color: #FFFDF7; }

/* pillars, numbered three-up */
.pillars { display: grid; grid-template-columns: 1fr; gap: 2.5rem; border-top: 1px solid var(--line); padding-top: 2.5rem; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.section-paper .pillars { border-top-color: var(--line-2); }
.pillar .num, .step .num, .assure-item .num, .cover .num {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--label);
  margin-bottom: 0.85rem;
}
.pillar h3 { font-size: 1.3125rem; font-weight: 600; margin-bottom: 0.5rem; }
.pillar p, .assure-item p, .step p { margin: 0; color: var(--muted); line-height: 1.6; }
.step h4, .assure-item h4 { font-size: 1.1875rem; font-weight: 600; margin-bottom: 0.45rem; }

/* thesis block, a single argued statement */
.thesis { max-width: 46rem; }
.thesis .eyebrow { margin-bottom: 0.85rem; }
.thesis-body { max-width: 42em; font-size: 1.09375rem; line-height: 1.7; }
.thesis-body p { margin: 0 0 1.25rem; }
.thesis-body p:last-child { margin-bottom: 0; }

/* contrast table */
.contrast { border-top: 1px solid var(--line); }
.section-paper .contrast { border-top-color: var(--line-2); }
.contrast-head, .contrast-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .contrast-head, .contrast-row { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.contrast-head {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: 0.9rem;
}
.contrast-head .group-label { color: var(--label); }
.contrast-row .usual { color: var(--muted); }
.contrast-row .group { color: var(--ink); }

/* vignettes */
.vignettes { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 800px) { .vignettes { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.vignette { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.vignette .tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.9rem;
}
.vignette p { margin: 0 0 0.9rem; color: var(--muted); line-height: 1.6; }
.vignette .outcome { margin: 0; color: var(--ink); font-family: var(--display); font-size: 1.125rem; line-height: 1.45; }

/* assurances, four-up */
.assure { display: grid; grid-template-columns: 1fr; gap: 2.25rem; border-top: 1px solid var(--line); padding-top: 2.25rem; }
@media (min-width: 620px) { .assure { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .assure { grid-template-columns: repeat(4, 1fr); } }
.section-paper .assure { border-top-color: var(--line-2); }

/* covers, numbered labelled rows */
.covers { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .covers { grid-template-columns: repeat(3, 1fr); } }
.section-paper .covers { border-top-color: var(--line-2); }
.cover { padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .cover { padding: 2rem 2rem 2.25rem; border-bottom: 0; border-left: 1px solid var(--line); }
  .cover:first-child { padding-left: 0; border-left: 0; }
  .cover:last-child { padding-right: 0; }
}
.section-paper .cover { border-color: var(--line-2); }
.cover .label {
  display: block;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 0.5rem;
}
.cover .note { display: block; color: var(--muted); font-size: 1.03125rem; line-height: 1.6; }

/* paired columns */
.two-up { display: grid; grid-template-columns: 1fr; gap: 2.75rem; }
@media (min-width: 900px) { .two-up { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* closer extras */
.closer-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.proof-line { margin: 1.5rem 0 0; font-size: 1rem; color: var(--muted); max-width: 30em; }
.proof-link {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 1rem;
  color: var(--pine);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.proof-link:hover { border-color: var(--pine); }
.next-steps { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.9rem; max-width: 34em; }
.next-steps li { display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; color: var(--text); }
.next-steps .n {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--label);
}

/* scope statements, two-column bordered */
.spec-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 800px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
.section-paper .spec-grid { border-top-color: var(--line-2); }
.spec { padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 800px) {
  .spec { padding: 1.75rem 2rem 1.9rem 0; }
  .spec:nth-child(even) { padding-left: 2rem; border-left: 1px solid var(--line); padding-right: 0; }
}
.section-paper .spec { border-color: var(--line-2); }
.spec h4 { font-size: 1.1875rem; font-weight: 600; margin-bottom: 0.45rem; }
.spec p { margin: 0; color: var(--muted); line-height: 1.6; }

/* hero spec list promoted to a full-width strip under the hero */
.aside-strip { background: var(--panel); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.aside-strip > .wrap { padding-block: 0; }
.hero-aside-strip { border-top: 0; display: grid; grid-template-columns: 1fr; }
.hero-aside-strip > div { border-bottom: 1px solid var(--line-2); }
.hero-aside-strip > div:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .hero-aside-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-aside-strip-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-aside-strip > div { padding: 1.9rem 1.75rem 2rem; border-bottom: 0; border-left: 1px solid var(--line-2); }
  .hero-aside-strip > div:first-child { padding-left: 0; border-left: 0; }
  .hero-aside-strip > div:last-child { padding-right: 0; }
}

/* ------------------------------------------------------------
   Mobile pass (2026-08-13)
   Fixes found by auditing at 375px: the nav links were in a
   horizontally scrolling strip with a fade mask, so "About" sat
   half-cut at the right edge on every page and read as broken.
   Tap targets in the nav were 30px against a 44px guideline, and
   stacked buttons had ragged widths.
   ------------------------------------------------------------ */
@media (max-width: 599px) {
  /* Let the four links share the row instead of scrolling out of sight.
     They fit on one line at 375px and wrap cleanly below that. */
  .nav-links {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0.15rem 1rem;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: 0;
  }
  .nav-links a {
    font-size: 0.86rem;
    padding-block: 0.7rem;   /* ~44px tap target */
  }
  .nav-inner { padding-block: 0.7rem; gap: 0.4rem 1rem; }
  .nav-cta { padding: 0.7rem 1rem; }

  /* Full-width actions: consistent edges, and comfortably tappable. */
  .btn-row .btn,
  .hero-ctas .btn,
  .closer-actions .btn,
  .form-actions .btn {
    display: block;
    width: 100%;
    text-align: center;
    white-space: normal;
  }
  .btn-row, .hero-ctas, .closer-actions { gap: 0.65rem; }
  .form-actions { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .form-fallback { text-align: center; }

  /* Give the crisis line its own line rather than a cramped split. */
  .topbar-inner { gap: 0.15rem; padding-block: 0.5rem; }
}


/* ------------------------------------------------------------
   Dark footer (design pass 2026-08-14). Overrides the light
   footer above so the footer separates from panel sections.
   Delete this block to restore the light footer.
   ------------------------------------------------------------ */
.foot { background: var(--pine); }
.foot .brand img { filter: brightness(0) invert(1); opacity: 0.92; }
.foot .brand .wordmark { color: #FBF3E8; }
.foot .brand .subword { color: rgba(251, 243, 232, 0.6); }
.foot h5 { color: rgba(251, 243, 232, 0.6); }
.foot p, .foot li, .foot dd, .foot .foot-list, .foot-brand p, .foot .foot-note { color: rgba(251, 243, 232, 0.78); }
.foot dt { color: rgba(251, 243, 232, 0.55); }
.foot a, .foot .foot-list a, .foot dd a, .foot ul a { color: #FBF3E8; }
.foot a:hover, .foot .foot-list a:hover, .foot dd a:hover, .foot ul a:hover { color: #FFFFFF; text-decoration-color: var(--gold); }
.foot .foot-grid { border-bottom-color: rgba(251, 243, 232, 0.2); }
.foot .foot-legal { color: rgba(251, 243, 232, 0.55); }

/* closer variant: page-ground tone, for pages whose last content
   section is already panel-toned (Home, health-systems) */
.closer-bg { background: var(--bg); }