/* Michael Tipping Psychology — site styles
   Source: Claude Design "Michael Tipping - Site v2" */

/* Self-hosted so no visitor request goes to Google. Both are the variable latin-subset
   files Google Fonts serves (Manrope v20, Newsreader v26, SIL Open Font License), so one
   file per family covers every weight the site uses. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}

:root {
  --ink: oklch(0.26 0.032 166);
  --ink-2: oklch(0.32 0.030 166);
  --text: oklch(0.36 0.027 166);
  --text-soft: oklch(0.42 0.026 166);
  --muted: oklch(0.48 0.026 166);
  --muted-2: oklch(0.52 0.023 166);
  --faint: oklch(0.55 0.021 166);
  --faint-2: oklch(0.56 0.023 166);
  --accent: oklch(0.42 0.065 166);
  --accent-hover: oklch(0.33 0.060 166);
  --accent-soft: oklch(0.48 0.045 166);
  --btn: oklch(0.37 0.058 166);        /* the logo green, #1D4A39 */
  --btn-hover: oklch(0.30 0.050 166);
  --panel: oklch(0.935 0.021 138);
  --panel-sub: oklch(0.958 0.013 138);
  --tint: oklch(0.950 0.013 138);
  --tint-hover: oklch(0.918 0.017 138);
  --line: oklch(0.900 0.011 138);
  --line-2: oklch(0.860 0.013 138);
  --star: oklch(0.70 0.030 166);
  --white: oklch(1 0 0);               /* kept pure: card surfaces that must lift off the cream */
  --paper: oklch(0.993 0.009 100);     /* the logo's own background, #FEFDF6 */
  --sand: oklch(0.972 0.019 92);       /* warm cream band, one step off the paper */
  --footer-ink: oklch(0.96 0.008 95);
  --footer-soft: oklch(0.78 0.020 166);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max: 1120px;
  --gutter: 40px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

[id] { scroll-margin-top: 24px; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);  /* iOS Safari paints both its bars with the body colour, so this sets them to the brand cream */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

h1, h2, h3, p { margin: 0; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.serif { font-family: var(--serif); font-weight: 400; }

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

/* ---------- Header ---------- */

.site-header { background: var(--paper); }

.site-header .wrap {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: block;
  line-height: 0;  /* the anchor should hug the logo, not an invisible text box */
}
.brand img {
  width: 196px;
  height: auto;
}
.brand:hover { text-decoration: none; }

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 16.5px;
}

.nav a {
  color: oklch(0.40 0.027 166);
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: oklch(0.80 0.022 166);
}
.nav a:hover { color: var(--ink); text-decoration-color: currentColor; }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 20px 28px;
  background: var(--btn);
  color: var(--white);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.btn:hover { background: var(--btn-hover); color: var(--white); text-decoration: none; }

/* Two-line CTA: main label + a quieter reassurance line inside the same button. */
.btn--stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: center;   /* sub-label sits centred under the label, not ragged left */
  gap: 6px;
  padding: 20px 26px;
  line-height: 1.2;
  max-width: 34ch;
  border-radius: 4px;
}
.btn__label { font-size: 15.5px; font-weight: 600; }
.btn__sub {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: oklch(0.99 0 0 / 0.7);
}

.btn--light {
  padding: 16px 26px;
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  white-space: nowrap;
}
.btn--light:hover { background: var(--line); color: var(--ink); }
.btn--light .btn__sub { color: var(--muted); }
/* the sub-label is wider than the label here, so the side padding reads as slack */


/* ---------- Page shell ---------- */

main { overflow-x: clip; background: var(--paper); }

/* Tinted band. Full width from 1200px up and on phones; a boxed panel in between.
   Box: 16px outer margin + 24px inner padding = content still 40px from the viewport edge. */
.band { width: 100%; }

@media (min-width: 641px) and (max-width: 1199.98px) {
  .band { width: auto; margin: 0 16px; border-radius: 8px; overflow: hidden; }
  .band > .wrap { padding-left: 24px; padding-right: 24px; }
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
}

.rule { border-top: 1px solid var(--line); }

/* ---------- Home: hero ---------- */

.hero { background: var(--panel); }

.hero__grid {
  padding-top: 56px;
  padding-bottom: 56px;
  align-items: stretch;
}

.hero__copy {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__kicker {
  font-size: 15px;
  line-height: 1.4;
  color: var(--accent);
}

.hero__title {
  margin-top: 16px;
  max-width: 18ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.032em;
}

.hero__lede {
  margin-top: 24px;
  max-width: 34ch;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-soft);
}

.hero__cta { align-self: flex-start; margin-top: 32px; }

.hero__photo {
  grid-column: 7 / 13;
  min-height: 440px;
  border-radius: 6px;
  overflow: hidden;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* ---------- Home: intro ---------- */

.intro {
  position: relative;
  padding: 40px 0 32px;
  row-gap: 0;
  align-items: start;
}

/* Tilted photo print. A real grid item, not absolutely positioned: that is what keeps
   the intro text on the same columns as every section body below it. */
.print {
  grid-column: 1 / 6;
  grid-row: 1 / 4;
  align-self: start;
  justify-self: start;
  width: 88%;
  padding: 12px;
  background: var(--white);
  box-shadow: 0 1px 2px oklch(0.26 0.032 166 / 0.10), 0 14px 28px oklch(0.26 0.032 166 / 0.16);
  transform: rotate(-0.5deg);
  transform-origin: top left;
}
.print__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-image: url("../images/michael-tipping.jpg");
  background-size: 275%;
  background-position: 36% 9%;
}

.intro__lead {
  grid-column: 6 / 12;
  font-family: var(--serif);
  font-size: 31px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.intro__goal {
  grid-column: 6 / 12;
  margin-top: 40px;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.45;
  letter-spacing: -0.018em;
}

.intro__body {
  grid-column: 6 / 12;
  margin-top: 24px;
  /* type comes from .body-copy on the element, so it matches the How I work paragraphs exactly */
}

.underline-draw {
  position: relative;
  padding-bottom: 3px;
}
.underline-draw::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: oklch(0.52 0.075 166);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(0.35, 0.9, 0.4, 1);
}
.underline-draw.is-drawn::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .underline-draw::after { transition: none; transform: scaleX(1); }
}

.h2-serif {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}


.creds-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.prose-list {
  margin: -8px 0 0;            /* tighten against the sentence that introduces it */
  padding-left: 1.15em;
  list-style: disc;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text);
}
.prose-list li::marker { color: var(--faint); }

.creds-list li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.creds-list li:first-child { padding-top: 0; }   /* first row sits flush with the section label */
.creds-list li:last-child { border-bottom: 0; }

.creds__abbr { color: var(--faint); white-space: nowrap; }


/* ---------- Home: labelled sections ---------- */

.split {
  padding: 26px 0;
  gap: 24px;
  align-items: start;
}
.split--last { padding-bottom: 80px; }

/* How I work is the one section on a band. Everything below it bunches up, so the
   band reads as separate rather than as one of four evenly spaced blocks.
   The sections live inside a .wrap, so the band breaks out with a pseudo-element
   rather than by restructuring the page. */
.split--band {
  position: relative;
  isolation: isolate;
  /* uneven padding on purpose: the label above has 3.5px of half-leading, the list
     below has 6.2px, so equal padding would not read as equal space */
  padding-top: 56px;
  padding-bottom: 52px;
  margin-top: 20px;
  margin-bottom: 28px;
}
.split--band::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  background: var(--sand);
}

.split__label {
  grid-column: 1 / 4;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}

.split__body {
  grid-column: 6 / 12;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.split__body--wide { grid-column: 6 / 13; }

.rate {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -0.018em;
}

.body-copy {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text);
}

.locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.location h3 {
  margin-bottom: 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.location p {
  margin-bottom: 18px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-soft);
}

.location a { font-size: 15.5px; }

/* ---------- Subpages ---------- */

.page-title {
  padding: 80px 0 56px;
  max-width: 40ch;
}
.page-title h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -0.032em;
}

.page-hero { background: var(--panel-sub); }

.page-hero__grid {
  padding-top: 40px;
  padding-bottom: 48px;
  align-items: end;
}
.page-hero__copy { grid-column: 1 / 10; }

.page-hero__kicker {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.page-hero h1 {
  margin-top: 14px;
  max-width: 20ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: -0.030em;
}

.page-hero__lede {
  margin-top: 20px;
  max-width: 48ch;
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-soft);
}

.section { padding: 64px 0; }
.section--first { padding-top: 48px; }
.section--flush { padding-top: 0; }

.section .h2-serif { margin-bottom: 24px; }

.prose {
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 17px;
  line-height: 1.78;
  color: var(--text);
}
.prose--tight { gap: 18px; font-size: 16.5px; line-height: 1.75; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.two-col--wide { gap: 64px; }

.info-box { border: 1px solid var(--line); }

.info-box__row {
  padding: 26px 30px;
  border-bottom: 1px solid var(--line);
}
.info-box__row:last-child { border-bottom: 0; }

.info-box__label {
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.info-box__value { font-size: 16.5px; line-height: 1.6; }

.photo-placeholder {
  height: 320px;
  background: var(--tint);
  border: 1px dashed var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.list-box {
  padding: 32px 36px 34px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
}

.list-box h3 {
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.list-box ul { list-style: none; margin: 0; padding: 0; }

.list-box li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--text);
}
.list-box li:last-child { border-bottom: 0; padding-bottom: 0; }

.quote-box {
  padding: 36px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
}
.quote-box p {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.5;
  color: var(--ink);
}

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

.footer-cta {
  background: var(--ink);
  color: var(--footer-ink);
}

.footer-cta .wrap {
  padding-top: 60px;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
}

.footer-cta__copy {
  grid-column: 3 / 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.footer-cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.026em;
}

.footer-cta p {
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--footer-soft);
  /* one line at desktop; balanced rather than orphaned if it ever wraps */
  text-wrap: balance;
}

.footer-cta .btn--light { margin-top: 10px; }

.footer-cta__photo {
  grid-column: 8 / 13;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  overflow: hidden;
}
.footer-cta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

.footer-meta {
  background: var(--tint);
  color: var(--ink);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.footer-meta .wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* the whole band runs on an 8px ladder: 8 between name and role (one pair),
   then 24 to the credentials, the rule, and the Lifeline line in turn */
.footer-meta__plaque {
  grid-column: 3 / 11;
  padding-top: 56px;
  text-align: center;
}

.footer-meta__name {
  font-family: var(--serif);
  font-size: 32px;
  /* body's 1.5 put an 8px shelf of leading under the name and broke the pair */
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.footer-meta__role {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
  color: var(--muted-2);
  margin-top: 8px;
}

/* one wrapped sans line, not four flexed serif items: the credentials are a
   colophon here, and they already appear in full under Qualifications */
.footer-meta__creds {
  margin-top: 24px;
  font-size: 13px;
  /* 1.85 set the two lines further apart than a colophon wants; they read as one block now */
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--faint);
  text-wrap: balance;   /* stops "Medicare provider" orphaning on a phone */
}

.footer-meta__links {
  grid-column: 8 / 13;
  padding-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  font-size: 15px;
}

.footer-meta__links h3 {
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
  color: var(--muted);
}

.footer-meta__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-meta__links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-meta__urgent {
  grid-column: 1 / 13;
  /* equal above and below, so the rule sits centred in its own gap */
  margin-top: 24px;
  padding: 24px 0 48px;
  border-top: 1px solid var(--line-2);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-soft);
  text-align: center;
}

/* ---------- Responsive ---------- */

/* side-by-side intro: let the card take its height from the text beside it rather
   than from a fixed ratio, so the two columns end together */
@media (min-width: 901px) {
  .print { align-self: stretch; }
  .print__photo { height: 100%; aspect-ratio: auto; }
}


/* credentials sit opposite the name from small tablets up; they stack on phones */
@media (min-width: 641px) {
  /* inset on the left only, to clear the copy column. The right edge stays on the
     wrap's content edge so the photo lines up with the nav above it. */
  .hero__photo { margin-left: 20px; margin-right: 0; border-radius: 10px; }

  /* the logo box is taller than the wordmark because the triangle runs past it top and
     bottom, so centring on the box drops the links below the words. Lift them onto the
     wordmark's x-height band (38.3% down the asset, not 50%). */
  .nav { transform: translateY(-7px); }

}


/* tablets: there is room for the photo well below 1024, just not full width.
   700px is the point where a 5-column photo stops looking like a postage stamp. */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .hero__copy { grid-column: 1 / 8; }
  /* stretching to the copy height turned a 4:3 landscape into a narrow portrait slot,
     so only ~57% of the frame survived the crop. Give it a square and bias the crop up. */
  .hero__photo {
    grid-column: 8 / 13;
    min-height: 0;
    aspect-ratio: 3 / 4;
    align-self: start;
    margin-top: 37px;   /* kicker line (21px) + .hero__title margin-top (16px) */
  }
  .hero__photo img { object-position: 50% 45%; }
}

/* below that there is no room for it, so centre the copy the way the phone layout
   does rather than leaving a half-empty band */
@media (max-width: 699.98px) {
  .hero__copy { grid-column: 1 / 13; align-items: center; text-align: center; }
  .hero__title, .hero__lede { max-width: none; }
  .hero__cta { align-self: center; }
  .hero__photo { display: none; }
  .hero__grid { padding-top: 48px; padding-bottom: 48px; }
}

@media (max-width: 900px) {
  .intro__lead { font-size: clamp(27px, 3.4vw, 31px); letter-spacing: -0.026em; }
  .intro__goal { font-size: clamp(21px, 2.6vw, 23px); margin-top: 32px; }
  .split__label { grid-column: 1 / 13; margin-bottom: 4px; }
  .intro__lead, .intro__goal, .intro__body { grid-column: 1 / 13; max-width: 56ch; }
  .print { order: 1; grid-column: 1 / 13; grid-row: auto; margin-bottom: 32px;
           width: min(82%, 330px); justify-self: center; transform-origin: center; }
  /* the 4:5 crop is too tall once the card is this wide, so square it off on phones */
  .print__photo { aspect-ratio: 1 / 1; }
  .intro__lead { order: 2; }
  .intro__goal { order: 3; }
  .intro__body { order: 4; }
  .split__body, .split__body--wide { grid-column: 1 / 13; max-width: 56ch; }
  .two-col, .two-col--wide { grid-template-columns: 1fr; gap: 40px; }
  .footer-cta__copy { grid-column: 2 / 12; }
  .footer-cta__photo { grid-column: 1 / 13; }
  .footer-meta__plaque { grid-column: 2 / 12; }
  .footer-meta__links { grid-column: 1 / 13; padding-top: 40px; }
}

/* stacked layout on tablets: a centred print over edge-to-edge text left the print adrift,
   so bring the text in to one centred column under it, and keep every section below on
   that same column. A px measure, not ch, because the blocks differ in font size and have
   to share a left edge. */
@media (min-width: 641px) and (max-width: 900px) {
  .intro__lead, .intro__goal, .intro__body,
  .split__label, .split__body, .split__body--wide {
    justify-self: center; width: min(100%, 640px); max-width: none;
  }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }

  .site-header .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 24px;
    padding-bottom: 0;
  }
  .brand {
    align-self: center;
  }
  .brand img {
    width: clamp(210px, 62vw, 260px);
    /* the wordmark overhangs the triangle on the right, so the file's bounding box
       is 9.7% wider on that side. Nudge right to centre on the triangle itself. */
    transform: translateX(0.86%);
    /* the wordmark ends 69% down, so this only ever fades the triangle's tail,
       dissolving it into the nav band instead of cutting it off */
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
  }
  .nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 26px;
    /* full-bleed tinted band that the triangle's tail fades down into */
    margin: -14px calc(var(--gutter) * -1) 0;
    padding: 26px var(--gutter) 24px;
    /* a veil of the page colour, not a tint: it covers the triangle's tail where it
       comes down and washes out below, so nothing reads as a band */
    background: linear-gradient(to bottom, var(--paper) 0%, var(--paper) 22%, transparent 62%);
    font-size: 16.5px;
  }
  .site-header { border-bottom: 1px solid oklch(0.92 0.011 138); }

  .hero__grid { padding-top: 48px; padding-bottom: 48px; }
  .hero__copy { align-items: center; text-align: center; }
  .hero__lede { text-wrap: pretty; }
  .hero__kicker { font-size: 14.5px; }
  .hero__title { margin-top: 12px; font-size: 34px; line-height: 1.08; letter-spacing: -0.028em; max-width: none; }
  .hero__lede { margin-top: 20px; font-size: 16px; max-width: none; }
  .hero__cta { align-self: center; margin-top: 24px; padding: 20px 22px; gap: 6px; align-items: center; text-align: center; max-width: none; }
  .hero__cta .btn__label { font-size: 17px; }
  .hero__cta .btn__sub { font-size: 13px; color: oklch(0.99 0 0 / 0.7); }

  .intro { padding: 48px 0 28px; }
  .intro__lead { font-size: 27px; line-height: 1.25; letter-spacing: -0.026em; }
  .intro__goal { margin-top: 32px; font-size: 21px; letter-spacing: -0.016em; }
  .intro__body { margin-top: 20px; }

  .help { padding: 48px 0; }
  .h2-serif { font-size: 26px; letter-spacing: -0.022em; }

  .split { padding: 28px 0; }
  .split--band { padding: 44px 0 40px; margin-top: 16px; margin-bottom: 22px; }
  .split--last { padding-bottom: 56px; }
  .split__label { font-size: 13px; }
  .rate { font-size: 23px; line-height: 1.3; }
  .body-copy { font-size: 16px; }
  .locations { gap: 24px; }
  .location h3 { font-size: 23px; margin-bottom: 8px; }
  .location p { font-size: 15px; margin-bottom: 14px; }

  .page-title { padding: 48px 0 32px; }
  .page-title h1 { font-size: 32px; }
  .page-hero__grid { padding-top: 32px; padding-bottom: 36px; }
  .page-hero h1 { font-size: 32px; }
  .page-hero__lede { font-size: 17.5px; }
  .section { padding: 48px 0; }
  .section--first { padding-top: 40px; }
  .prose { font-size: 16.5px; }
  .info-box__row { padding: 20px 22px; }
  .list-box { padding: 24px; }
  .quote-box { padding: 26px; }
  .quote-box p { font-size: 20px; }
  .photo-placeholder { height: 240px; }

  .footer-cta .wrap { padding-top: 48px; padding-bottom: 48px; }
  .footer-cta__copy { grid-column: 1 / 13; align-items: center; text-align: center; }
  .footer-cta h2 { font-size: 28px; }
  .footer-cta p { font-size: 15.5px; }
  .footer-cta .btn--light { align-self: center; text-align: center; padding: 18px 22px; }
  .footer-meta__plaque { grid-column: 1 / 13; padding-top: 40px; }
  .footer-meta__name { font-size: 26px; }
  .footer-meta__role { font-size: 18px; }
  .footer-meta__creds { font-size: 13px; }
  .footer-meta__links { padding-top: 32px; }
  .footer-meta__urgent { margin-top: 20px; padding: 20px 0 40px; font-size: 13.5px; }
  .urgent-line2 { display: block; }
}