/* Hillside Counseling site styles.
   Colors, fonts, and spacing are set once in :root below. Change them there.
   Mobile first: base rules are for phones; @media (min-width: ...) blocks add larger-screen layout. */

:root {
  --bg: #fbf8f3;            /* warm off-white page background */
  --bg-alt: #f3ede3;        /* warm sand for header, page intros, alternating sections */
  --surface: #fffdfa;       /* cards and boxes */
  --tint: #e6eeea;          /* light tint of the accent, for callouts */
  --ink: #23201c;           /* main text */
  --muted: #5a5249;         /* secondary text */
  --line: #ddd4c6;          /* borders and dividers */
  --accent: #234c3d;        /* the one accent color: the logo green */
  --accent-strong: #183a2e; /* accent hover state (darker) */
  --on-accent: #ffffff;     /* text on accent backgrounds */
  --footer-bg: #1f3b33;
  --footer-ink: #f3ede3;
  --footer-muted: #c9d6cf;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
  --container: 74rem;
  --measure: 42rem;
  --space-section: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

@media (min-width: 48em) {
  body { font-size: 1.125rem; }
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  margin: 0 0 0.6em;
  line-height: 1.2;
  text-wrap: balance;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 1.55rem + 2.6vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.65rem, 1.35rem + 1.3vw, 2.35rem); }
h3 { font-size: 1.15rem; font-weight: 700; }

p, ul, ol, dl, table { margin: 0 0 1.1em; }
/* Wrapping: headings balance their lines; body text avoids a lone word on the last line.
   (Chrome, Edge, and Safari honor these; other browsers simply wrap normally.) */
p, li, dd, dt, figcaption { text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
main:focus { outline: none; }

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; color: var(--on-accent); }

/* ---------- Header and navigation ---------- */

.site-header {
  position: relative;
  z-index: 10;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 0.75rem;
  min-height: 4.5rem;
}

/* Header logo: hills | name over credentials. Everything scales from --name-w (the width of
   logo-name.svg); the hills width and the gap keep the master logo's proportions
   (ratios printed by tools/make-logos.ps1). align-items: center centers the hills against
   the name + credentials block.
   Phones: fits beside the Menu button on one line down to 360px wide.
   Desktop: leaves room for the full menu from 1152px up. */
.brand {
  --name-w: clamp(8.25rem, 34vw, 11rem);
  display: flex;
  align-items: center;
  gap: calc(var(--name-w) * 0.0592);
  padding-block: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-hills { display: block; flex: none; width: calc(var(--name-w) * 0.4587); height: auto; }
.brand-words { display: flex; flex-direction: column; gap: 0.2rem; }
.brand-name { display: block; width: var(--name-w); height: auto; }
.brand-creds {
  /* matches the credentials line in the logo (open letter-spacing); near-black like the name and menu */
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s, background-color 0.2s;
}
.menu-icon { position: relative; }
.menu-icon::before,
.menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  display: none;
  flex-basis: 100%;
  padding-bottom: 1rem;
}
.site-nav.is-open { display: block; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list > li { border-top: 1px solid var(--line); }

.nav-list a:not(.btn),
.nav-group summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 0.25rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.nav-list a:not(.btn):hover,
.nav-group summary:hover { color: var(--accent); }

.nav-list a:not(.btn)[aria-current="page"],
.nav-group.is-current > summary {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.nav-group summary {
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.4rem 0.2rem 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.nav-group[open] summary::after { transform: translateY(0.25rem) rotate(225deg); }

.nav-sub { list-style: none; margin: 0 0 0.5rem; padding: 0 0 0 1rem; }
.nav-sub a:not(.btn) { font-weight: 500; }

.nav-cta { padding-top: 1rem; }
.nav-cta .btn { width: 100%; }

/* Full menu from 1152px (72em). Below that, the Menu button. At exactly 1152px the logo + menu
   still have ~30px to spare; tools/audit-layout.ps1 checks this width. */
@media (min-width: 72em) {
  .brand { --name-w: clamp(10.25rem, 25vw - 7.75rem, 12.25rem); }
  .brand-creds { font-size: 0.8125rem; }
  .menu-toggle { display: none; }
  .site-nav { display: block; flex-basis: auto; padding: 0; }
  .nav-list { display: flex; align-items: center; gap: 1.25rem; }
  .nav-list > li { border: 0; }
  .nav-list a:not(.btn),
  .nav-group summary { min-height: 44px; padding: 0.25rem 0; font-size: 1rem; }
  .nav-group { position: relative; }
  .nav-sub {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: -1rem;
    min-width: 17.5rem;
    margin: 0;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgb(35 32 28 / 0.12);
  }
  .nav-sub a:not(.btn) { padding: 0.5rem 0.75rem; border-radius: 8px; }
  .nav-sub a:not(.btn):hover { background: var(--bg-alt); }
  .nav-cta { padding: 0; }
  .nav-cta .btn { width: auto; min-height: 44px; padding: 0.6rem 1.15rem; font-size: 0.95rem; }
}

/* ---------- Buttons and small text ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem clamp(1.1rem, 4vw, 1.5rem);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, transform 0.15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn-primary:active { transform: translateY(1px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 1.75rem 0 0.75rem;
}

.text-link { font-weight: 700; }
.fine { font-size: 0.92rem; color: var(--muted); }

.eyebrow {
  margin-bottom: 1rem;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}

.lead {
  max-width: 40rem;
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
}

/* ---------- Page tops (hero and page intros) with the hill-line motif ---------- */

.hero,
.page-intro {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
}
.hero { padding: clamp(3rem, 2rem + 5vw, 6.5rem) 0 clamp(5rem, 3.5rem + 6vw, 9rem); }
.page-intro { padding: clamp(2.5rem, 1.75rem + 4vw, 5rem) 0 clamp(4.5rem, 3rem + 5vw, 7.5rem); }
.hero h1 { max-width: 21ch; }
.page-intro h1 { max-width: 24ch; }

/* Home hero: text, then the headshot. Side by side from 960px; photo below the text on smaller screens. */
.hero-inner { display: grid; gap: 3rem; }
.hero-photo { width: min(20rem, 100% - 1rem); }
@media (min-width: 60em) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) clamp(18rem, 30vw, 26rem);
    align-items: center;
    column-gap: clamp(3rem, 6vw, 6rem);
  }
  .hero-photo { width: 100%; }
}

.hills {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  pointer-events: none;
}
.hills path {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hills .hills-l1 { stroke-opacity: 0.18; stroke-width: 1.5; }
.hills .hills-l2 { stroke-opacity: 0.3; stroke-width: 1.5; }
.hills .hills-l3 { stroke-opacity: 0.5; stroke-width: 2; }
.hills .hills-fill { fill: var(--bg); stroke: none; }

/* ---------- Home sections ---------- */

.section { padding-block: var(--space-section); }
.section-alt { background: var(--bg-alt); }
.section-lead { max-width: var(--measure); font-size: 1.1rem; }
.also { max-width: var(--measure); margin-top: 1.5rem; color: var(--muted); }

.cards {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.cards { max-width: var(--measure); }
@media (min-width: 70em) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: none; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
/* The whole card shows the focus ring, so the link doesn't need its own (where browsers support :has). */
@supports selector(:has(*)) {
  .card-link:focus-visible { outline: none; }
}
.card h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.card p { flex: 1; }
.card-link { font-weight: 700; margin-top: 0.25rem; }
.card-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.5rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-0.1rem) rotate(45deg);
}

.steps {
  display: grid;
  gap: 1.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 60em) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; }
}
.steps li { position: relative; padding-top: 3.4rem; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--serif);
  font-size: 1.2rem;
}
.steps p { margin: 0; }

.fees-grid { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 48em) {
  .fees-grid { grid-template-columns: 3fr 2fr; gap: 3.5rem; }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 0.35rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
}

.plain-list { margin-bottom: 1.25rem; padding: 0; list-style: none; }
.plain-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }

/* Headshot with an offset hill-green frame (home hero and About intro) */
.photo-frame {
  position: relative;
  display: block;
  isolation: isolate;
}
.photo-frame::before {
  content: "";
  position: absolute;
  inset: 0.75rem -0.75rem -0.75rem 0.75rem;
  z-index: -1;
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  opacity: 0.35;
}
.headshot {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Home "Hi, I'm Jarid": a small round avatar beside the heading (the big photo is in the hero);
   the paragraphs below get the full text width. */
.about-teaser > * { max-width: var(--measure); }
.teaser-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.teaser-head h2 { margin: 0; }
.avatar { display: block; flex: none; width: 4.5rem; }
.avatar .headshot { border-radius: 50%; }
@media (min-width: 48em) {
  .avatar { width: 6rem; }
}

/* ---------- Inner pages ---------- */

/* Inner pages read as one centered column. From 960px the About intro widens to fit the photo
   beside the text; below that it stacks in the same column as the rest of the page. */
.page-intro > .container,
.content { width: min(100% - 2rem, var(--measure)); }
.content + .cta-band > .container { width: min(100% - 2rem, 56rem); }

.intro-with-photo { display: grid; gap: 2.5rem; align-items: center; }
.intro-with-photo picture { width: min(17rem, 100% - 1rem); }
@media (min-width: 60em) {
  .page-intro > .intro-with-photo { width: min(100% - 2rem, 62rem); }
  .intro-with-photo { grid-template-columns: 1fr 22rem; gap: 4rem; }
  .intro-with-photo picture { width: 22rem; }
}
.byline { margin-top: -0.25rem; color: var(--muted); font-weight: 600; }

.content { padding-top: var(--space-section); }

.prose {
  max-width: var(--measure);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.prose h3 { margin-top: 1.75rem; }
.prose ul,
.prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.45rem; }
.prose .chips { padding-left: 0; }
.prose .chips li { margin-bottom: 0; }

.marker-list { padding-left: 0 !important; list-style: none; }
.marker-list li { position: relative; margin-bottom: 0.7rem; padding-left: 1.9rem; }
.marker-list li::before {
  /* a tiny hill arc instead of a bullet */
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 1.05rem;
  height: 0.55rem;
  border: 2px solid var(--accent);
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
}

.callout {
  max-width: var(--measure);
  margin-bottom: 2.5rem;
  padding: clamp(1rem, 0.5rem + 2.5vw, 2.25rem);
  background: var(--tint);
  border-radius: var(--radius-lg);
}
.callout h2 { font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem); }
.callout .marker-list { margin-bottom: 0; }

.aside-note {
  padding: 1rem 1.25rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.98rem;
}

.fees-note {
  max-width: var(--measure);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 1rem;
}

.on-this-page {
  max-width: var(--measure);
  margin-bottom: 3rem;
  padding: 1.1rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.on-this-page p { margin-bottom: 0.35rem; font-size: 0.95rem; font-weight: 700; }
.on-this-page ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.on-this-page a { display: inline-block; padding: 0.3rem 0; }

.creds-grid { display: grid; gap: 0 2.5rem; }
.creds-grid h3 { margin-top: 1.25rem; color: var(--accent); font-size: 1.05rem; }

/* About: credential badges side by side under the license list. Psychology Today's script draws its
   seal (146 x 46px) on the link; the space is reserved so nothing shifts while it loads, and the link
   stays hidden until the seal is drawn (main.js adds .is-ready), so a blocked seal leaves no empty link. */
.prose .badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin: 1.25rem 0 0.5rem;
  padding: 0;
  list-style: none;
}
.prose .badges li { margin: 0; }
.badges a { display: block; }
.sx-verified-seal { width: 146px; height: 46px; visibility: hidden; }
.sx-verified-seal.is-ready { visibility: visible; }
.badge-ncc { width: 7.5rem; }

.sources { color: var(--muted); font-size: 0.95rem; }
.sources li { margin-bottom: 0.8rem; overflow-wrap: anywhere; }
.sources a { display: block; width: fit-content; }

.fee-table {
  width: 100%;
  margin: 1rem 0 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  overflow: hidden;
}
.fee-table th,
.fee-table td { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; }
.fee-table th:last-child,
.fee-table td:last-child { text-align: right; }
.fee-table thead th {
  background: var(--bg-alt);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fee-table tbody tr:last-child td { border-bottom: 0; }
.fee-table td:last-child { font-weight: 700; }

.notice {
  padding: clamp(1rem, 0.6rem + 2vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  font-size: 1rem;
}
.notice h3 { margin-top: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }
.notice a { overflow-wrap: anywhere; }
.notice p:last-child { margin-bottom: 0; }

.glance { margin: 0 0 1rem; border-top: 1px solid var(--line); }
.glance div { display: grid; gap: 0.15rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 40em) {
  .glance div { grid-template-columns: 8rem 1fr; gap: 1.5rem; }
}
.glance dt { font-weight: 700; }
.glance dd { margin: 0; }

.refer-box {
  padding: clamp(1rem, 0.5rem + 2.5vw, 2.25rem);
  background: var(--tint);
  border-radius: var(--radius-lg);
}
.refer-box .actions { margin-top: 0.5rem; }
.refer-box p:last-child { margin-bottom: 0; }

/* ---------- Consult page (/consult/) ---------- */

.crisis-note {
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.consult-form { max-width: var(--measure); margin-bottom: 3rem; container-type: inline-size; }
/* The embedded Google Form. A frame from another site can't resize itself, so its height is set
   by the frame's own width (a container query, so a desktop scrollbar can't throw it off) to show
   the whole form with no scrollbar inside it and no empty space under it. Each band = the form's
   height at the band's narrowest width + 48px (room for Google's "?" button). Measured 2026-09-28
   with tools/measure-form.ps1; re-measure after changing the form's questions (README, "Consult form").
   Browsers without container queries use the first height, the tallest. */
.form-frame {
  display: block;
  width: 100%;
  height: 2250px;              /* frame under 320px wide (320px screens): form 2202px at 288 */
  margin-bottom: 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
}
@container (min-width: 320px) { .form-frame { height: 2148px; } }  /* 2100 at 320 (360px phones) */
@container (min-width: 343px) { .form-frame { height: 2119px; } }  /* 2071 at 343 (375px phones) */
@container (min-width: 350px) { .form-frame { height: 2079px; } }  /* 2031 at 350 (390-430px phones) */
@container (min-width: 420px) { .form-frame { height: 2057px; } }  /* 2009 at 420 */
@container (min-width: 480px) { .form-frame { height: 2008px; } }  /* 1960 at 480 */
@container (min-width: 560px) { .form-frame { height: 1962px; } }  /* 1914 at 560 */
@container (min-width: 600px) { .form-frame { height: 1922px; } }  /* 1874 at 600 */
@container (min-width: 672px) { .form-frame { height: 1912px; } }  /* 1864 at 672 (tablets and desktop) */

/* ---------- Closing call to action and Good Faith Estimate note ---------- */

.cta-band { padding-block: var(--space-section); }
.cta-inner {
  padding: clamp(2rem, 1.25rem + 4vw, 4rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
  background: var(--tint);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cta-inner h2 { margin-inline: auto; max-width: 22ch; }
.cta-inner p { max-width: 36rem; margin-inline: auto; }
.cta-inner .btn { margin-top: 0.5rem; }
.cta-inner .fine { margin: 1rem auto 0; }

.gfe-short { padding-bottom: var(--space-section); }
.gfe-short .container { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.gfe-short h2 {
  margin-bottom: 0.35rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
.gfe-short p { max-width: var(--measure); margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---------- Footer ---------- */

.site-footer {
  padding: 3rem 0 2rem;
  background: var(--footer-bg);
  color: var(--footer-ink);
  font-size: 0.98rem;
}
.site-footer a { color: var(--footer-ink); }
.site-footer a:hover { color: #ffffff; }
.site-footer :focus-visible { outline-color: var(--footer-ink); }

.footer-top { display: grid; gap: 2rem; }
@media (min-width: 60em) {
  .footer-top { grid-template-columns: 1.3fr 1fr; gap: 3rem; }
}
.footer-brand p { margin-bottom: 0.35rem; color: var(--footer-muted); }
.footer-logo { display: block; width: min(100%, 25rem); height: auto; margin-bottom: 1rem; }
.footer-contact { margin: 1rem 0 0; padding: 0; list-style: none; }
.footer-contact li { margin-bottom: 0.3rem; }
.footer-nav ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
.footer-nav li { margin-bottom: 0.4rem; break-inside: avoid; }
.footer-contact a,
.footer-nav a { display: inline-block; padding-block: 0.15rem; }

.crisis {
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgb(243 237 227 / 0.4);
  border-radius: var(--radius);
}
.copyright { margin: 1.5rem 0 0; color: var(--footer-muted); font-size: 0.9rem; }

/* ---------- Motion preferences ---------- */

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

/* ---------- Printing ---------- */
/* Browsers usually leave out background colors when printing, so light text on a dark background
   (the footer, the step numbers) would print almost invisible. Print those dark on white, and leave
   out the parts that only work on screen (menu, buttons, the consult form). */
@media print {
  .skip-link, .menu-toggle, .site-nav, .hills, .actions, .cta-band, .on-this-page,
  .consult-form, .footer-logo, .footer-nav { display: none !important; }
  .hero, .page-intro, .section { padding-block: 1.5rem; }
  .content { padding-top: 1.5rem; }
  .site-footer { padding-top: 1rem; background: none; color: var(--ink); border-top: 1px solid var(--line); }
  .site-footer a, .footer-brand p, .copyright { color: var(--ink); }
  .crisis { border-color: var(--line); }
  .steps li::before { background: none; color: var(--ink); border: 1px solid var(--ink); }
  .card, .steps li, .fee-table, .glance div { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}