/* ------------------------------------------------------------------
   Dr. Quick Books, Inc. — redesign mockup, v2
   Visual vernacular: the accounting ledger. Pale green ledger paper,
   green ink for the record, red ink for what needs attention.
   Type: IBM Plex Serif (display) + IBM Plex Sans (text) + Plex Mono
   (account numbers only).
   ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  --paper: #f3f5ef;
  --paper-2: #e9ede3;
  --rule: #c9d8c6;
  --rule-strong: #9fb8a4;
  --ink: #15261d;
  --ink-2: #4f6157;
  --green: #1e5c3c;
  --green-deep: #123a26;
  --green-ink-on-dark: #cfe3d3;
  --green-soft: #dce8dd;
  --red: #b0322a;
  --white: #ffffff;

  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --max: 1240px;
  --gutter: clamp(16px, 4vw, 56px);
  --radius: 4px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a {
  color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
a:hover { color: var(--green-deep); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--white);
}
.skip:focus { left: 8px; }

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

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(46px, 7vw, 100px); /* the second line is 6.25em wide and must fit the copy column */
  line-height: 0.94;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(36px, 4.8vw, 66px);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
h3 { font-size: 22px; line-height: 1.3; font-weight: 500; }
h4 { font-size: 17px; line-height: 1.35; font-family: var(--sans); font-weight: 600; }

.lede {
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 54ch;
}

.fig, .ledger, .rates { font-variant-numeric: tabular-nums; }

.acct {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--red);
  letter-spacing: 0.04em;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 22px;
  border-radius: var(--radius);
  border: 1.5px solid var(--green);
  background: var(--green);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.btn--ghost { background: transparent; color: var(--green); }
.btn--ghost:hover { background: var(--green-soft); color: var(--green-deep); }
.btn--sm { min-height: 40px; padding: 6px 14px; font-size: 15px; }

/* ---------- top bar ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.top__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 66px;
}
.brand {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand__inc { color: var(--ink-2); font-weight: 400; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px 24px;
}
.nav a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
}
.nav a:not(.btn):hover { border-bottom-color: var(--green); }
.nav .acct { font-size: 10.5px; }

.menu-btn {
  display: none;
  min-height: 44px;
  padding: 6px 14px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: 500 15px var(--sans);
  cursor: pointer;
}

@media (max-width: 1180px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .nav.is-open { display: flex; box-shadow: 0 18px 28px -16px rgba(21, 38, 29, 0.35); }
  .nav a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
  .nav .btn { margin-top: 16px; }
}

/* ---------- hero ---------- */
/* Alignment contract on desktop. The headline's cap line, the portrait's top
   edge, and the top of the red rule share one line. The copy's last baseline,
   the portrait's bottom edge, and the bottom of the rule share another.
   Both trims come from IBM Plex metrics measured in the browser: 0.147em is the
   space between the h1 line box and its cap height at line-height 0.94, and
   6.4px is the space between the note's baseline and its line box bottom. */

.hero {
  --photo-w: clamp(280px, 30vw, 400px);
  padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 88px);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--photo-w);
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 14px;
}
.hero__copy {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* The red margin rule of a ledger page, hung 28px left of the text edge so the
   copy lines up with the brand and every section below. */
.hero__copy::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 0;
  bottom: 0;
  width: 5px;
  border-left: 2px solid var(--red);
  border-right: 1px solid var(--red);
}
.hero h1 { margin: -0.147em 0 36px; }
/* Flex margins don't collapse, so the lede keeps only its pushing margin. */
.hero .lede { margin: auto 0 0; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
/* Doubled class beats the global p:last-child reset, which zeroed this trim. */
.hero .hero__note {
  margin: 20px 0 -6.4px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 48ch;
}

.hero__photo {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: subgrid;
}
/* The frame is at least 4:5 and stretches to the copy's height, so the bottom
   edge always meets the last baseline. */
.hero__frame {
  position: relative;
  min-height: calc(var(--photo-w) * 1.25);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--green-deep);
}
.hero__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__photo figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.hero__photo figcaption b { font-style: normal; font-weight: 500; color: var(--ink); }

@media (max-width: 1099px) {
  .hero__copy { padding-left: 28px; }
  .hero__copy::before { left: 0; }
}
@media (max-width: 899px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 40px; }
  .hero .lede { margin-top: 0; }
  .hero__photo { grid-column: 1; grid-row: auto; display: block; width: min(100%, 360px); }
  .hero__frame { min-height: 0; aspect-ratio: 4 / 5; }
  .hero__photo figcaption { margin-top: 12px; }
}

/* ---------- full-bleed photograph bands ---------- */

.band {
  position: relative;
  color: var(--white);
  background: var(--green-deep);
  min-height: clamp(360px, 62vw, 720px);
  display: grid;
  align-items: end;
  isolation: isolate;
}
.band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(18, 58, 38, 0.82) 0%, rgba(18, 58, 38, 0.25) 45%, rgba(18, 58, 38, 0) 100%);
}
.band .wrap { width: 100%; padding-block: clamp(32px, 5vw, 64px); }
.band blockquote {
  margin: 0;
  max-width: 24ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.band cite {
  display: block;
  margin-top: 16px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 15px;
  color: var(--green-ink-on-dark);
}
.band--story { align-items: center; }
.band--story .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.band--story h2 { font-size: clamp(32px, 4vw, 54px); margin-bottom: 16px; }
.band--story p { max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--green-ink-on-dark); }
.band--story::after { background: linear-gradient(to right, rgba(18, 58, 38, 0.86) 0%, rgba(18, 58, 38, 0.55) 50%, rgba(18, 58, 38, 0.1) 100%); }
@media (max-width: 800px) {
  .band--story .wrap { grid-template-columns: 1fr; }
  .band--story::after { background: rgba(18, 58, 38, 0.72); }
}

/* ledger strip on the dark ground */
.strip { background: var(--green-deep); color: var(--white); }
.ledger-strip {
  list-style: none;
  margin: 0;
  padding: clamp(28px, 3vw, 40px) 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.ledger-strip li {
  padding: 4px 24px 0;
  border-left: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
}
.ledger-strip li:first-child { border-left: 0; padding-left: 0; }
.ledger-strip .fig {
  display: block;
  font-family: var(--serif);
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.ledger-strip span { font-size: 14px; color: var(--green-ink-on-dark); line-height: 1.35; display: block; }

/* Five figures: three over two on narrow screens, with the second row filling
   the width, so no figure sits alone. */
@media (max-width: 900px) {
  .ledger-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 28px; }
  .ledger-strip li { grid-column: span 2; padding: 4px 14px 0; }
  .ledger-strip li:nth-child(n + 4) { grid-column: span 3; }
  .ledger-strip li:nth-child(4) { border-left: 0; padding-left: 0; }
}

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

.section { padding-block: clamp(72px, 10vw, 144px); }
.section--tint { background: var(--paper-2); }
.section--dark { background: var(--green-deep); color: var(--green-ink-on-dark); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark a { color: var(--white); }
.section--dark .acct { color: #f0b7b0; }
.section--dark .lede { color: var(--green-ink-on-dark); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 14px;
  align-items: baseline;
  margin-bottom: clamp(40px, 5vw, 72px);
}
/* On wide screens the account number hangs in the page margin, so every
   heading shares one left edge with the brand and the content below it. */
@media (min-width: 1320px) {
  .section__head {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 18px;
    margin-left: -80px;
  }
  .section__head .acct { justify-self: end; }
  .section__head .lede { grid-column: 2; }
}

/* two-column split with sticky intro */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.split__intro { position: sticky; top: 90px; }
.split__intro .section__head { margin-bottom: 28px; }
.split__intro .intro-photo {
  margin-top: 40px;
  width: min(100%, 300px);
}
.split__intro .intro-photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.split__intro .intro-photo figcaption {
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__intro { position: static; }
  .split__intro .intro-photo { display: none; }
}

/* ---------- symptoms (intake sheet) ---------- */

.symptoms {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.symptom { border-bottom: 1px solid var(--rule-strong); }
.symptom h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.7vw, 24px); }
.symptom__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 18px;
  align-items: start;
  text-align: left;
  padding: 22px 4px 22px 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
}
.symptom__btn:hover { color: var(--green-deep); }
.symptom__box {
  width: 22px;
  height: 22px;
  margin-top: 4px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  position: relative;
}
/* the red-ink check appears when expanded */
.symptom__box::after {
  content: "";
  position: absolute;
  left: 6px; top: 1px;
  width: 6px; height: 12px;
  border-right: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 160ms ease;
}
.symptom__btn[aria-expanded="true"] .symptom__box { border-color: var(--red); }
.symptom__btn[aria-expanded="true"] .symptom__box::after { transform: rotate(45deg) scale(1); }
.symptom__dx {
  padding: 0 4px 26px 46px;
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 17px;
}
.symptom__dx p { margin: 0; }
.dx {
  font-family: var(--serif);
  font-style: italic;
  color: var(--red);
  margin-right: 8px;
}
.symptoms__foot { margin-top: 28px; color: var(--ink-2); max-width: 60ch; }

/* ---------- services ---------- */

.primary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px clamp(28px, 4vw, 64px);
  margin: 0 0 clamp(56px, 7vw, 96px);
  padding: 0;
  list-style: none;
}
.primary li { border-top: 2px solid var(--ink); padding-top: 22px; }
.primary h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.primary p { color: var(--ink-2); max-width: 40ch; }
@media (max-width: 800px) { .primary { grid-template-columns: 1fr; gap: 32px; } }

.also { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(28px, 4vw, 64px); align-items: start; }
.also h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
.also .aside-note { margin-top: 24px; }
.services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px clamp(24px, 3vw, 48px);
  margin: 0;
}
.service { border-top: 1px solid var(--rule-strong); padding-top: 12px; }
.service dt { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.service dd { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
@media (max-width: 800px) { .also { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .services { grid-template-columns: 1fr; } }

.aside-note {
  border-left: 3px solid var(--red);
  padding: 4px 0 4px 20px;
  color: var(--ink-2);
  max-width: 48ch;
  font-size: 16px;
}
.aside-note strong { color: var(--ink); font-weight: 600; }

/* ---------- credentials ---------- */

.lead-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.lead-stat .big {
  font-family: var(--serif);
  font-size: clamp(120px, 18vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--green-deep);
}
.lead-stat p { max-width: 42ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--ink); }
.lead-stat p small { display: block; margin-top: 12px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 700px) { .lead-stat { grid-template-columns: 1fr; } }

/* Ten badges: one row of ten on desktop, two rows of five on tablets, and a
   two-column list on phones, so no badge ever sits alone on a row. */
.badge-row {
  list-style: none;
  margin: 0;
  padding: clamp(28px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 28px 12px;
  align-items: start;
}
.badge-row figure { text-align: center; }
.badge-row img {
  height: 84px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 10px;
  object-fit: contain;
  mix-blend-mode: multiply; /* white badge grounds disappear into the paper */
}
.badge-row figcaption { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
@media (max-width: 1100px) { .badge-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .badge-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .badge-row figure { display: flex; align-items: center; gap: 12px; text-align: left; }
  .badge-row img { width: 48px; height: 56px; margin: 0; flex: none; }
  .badge-row figcaption { font-size: 13.5px; }
}

.cred-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 760px) { .cred-grid { grid-template-columns: 1fr; } }

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--white) 45%, transparent);
}
.ledger li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
  align-items: baseline;
}
.ledger li span:last-child { color: var(--white); font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.ledger li span:first-child { color: var(--green-ink-on-dark); }
.ledger--paper { border-top-color: var(--ink); }
.ledger--paper li { border-bottom-color: var(--rule-strong); }
.ledger--paper li span:first-child { color: var(--ink); }
.ledger--paper li span:last-child { color: var(--green-deep); }

.awards h3 { margin-bottom: 12px; font-size: 26px; font-weight: 400; }
.awards p { color: var(--green-ink-on-dark); max-width: 48ch; }
.awards .years {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.awards .years li {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--white);
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  border-radius: 3px;
}

.cpe { margin-top: 32px; }
.cpe h4 { color: var(--white); font-family: var(--serif); font-weight: 400; font-size: 19px; margin-bottom: 4px; }
.cpe p { font-size: 14.5px; color: var(--green-ink-on-dark); margin-bottom: 12px; max-width: 46ch; }
.cpe ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* 13 years split 7 and 6 */
  gap: 10px;
}
.cpe li { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--white) 25%, transparent); }
.cpe .yr { font-family: var(--mono); font-size: 12px; color: var(--green-ink-on-dark); }
.cpe .hrs { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--white); }
@media (max-width: 600px) { .cpe ol { gap: 8px; } .cpe .hrs { font-size: 18px; } }

/* ---------- career ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  position: relative;
  border-left: 1px solid var(--rule-strong);
}
.timeline li { position: relative; padding-bottom: 32px; max-width: 60ch; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--green);
}
.timeline li.is-now::before { background: var(--red); border-color: var(--red); }
.timeline h3 { font-size: clamp(22px, 1.9vw, 26px); font-weight: 400; margin-bottom: 4px; }
.timeline .when { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); display: block; margin-bottom: 8px; }
.timeline p { color: var(--ink-2); }

.industries { margin-top: clamp(48px, 6vw, 80px); }
.industries h3 { font-weight: 400; font-size: 24px; }
.tags {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags li {
  font-size: 14px;
  padding: 5px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink);
}
.tags li.more { border-style: dashed; color: var(--ink-2); }

/* ---------- reviews ---------- */

.pull {
  margin: 0 0 clamp(56px, 7vw, 96px);
  padding-left: 23px;
  border-left: 5px double var(--red);
}
/* Red rules hang 28px into the margin, matching the hero rule. */
@media (min-width: 1100px) { .pull { margin-left: -28px; } }
.pull blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 22ch;
  text-wrap: balance;
}
.pull p { margin-top: 20px; max-width: 60ch; color: var(--ink-2); font-size: 17px; }
.pull cite { display: block; margin-top: 12px; font-style: normal; font-size: 15px; color: var(--ink-2); }
.pull cite b { font-weight: 500; color: var(--ink); }

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px clamp(28px, 4vw, 64px);
  margin: 0 0 clamp(48px, 6vw, 80px);
}
.quote blockquote {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.4;
  color: var(--ink);
}
.quote blockquote::before { content: "\201C"; color: var(--red); margin-right: 2px; }
.quote blockquote::after { content: "\201D"; color: var(--red); margin-left: 2px; }
.quote figcaption { font-size: 14.5px; color: var(--ink-2); }
.quote figcaption b { color: var(--ink); font-weight: 500; }
@media (max-width: 800px) { .quotes { grid-template-columns: 1fr; gap: 28px; } }

.sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 5vw, 72px);
}
@media (max-width: 760px) { .sources { grid-template-columns: 1fr; } }

/* ---------- rates ---------- */

.rates {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
}
.rates th, .rates td { text-align: left; vertical-align: top; padding: 20px 0; border-bottom: 1px solid var(--rule-strong); }
.rates th { font-weight: 400; font-family: var(--serif); font-size: 23px; width: 70%; padding-right: 24px; }
.rates th small { display: block; font-family: var(--sans); font-size: 15.5px; font-weight: 400; color: var(--ink-2); margin-top: 6px; line-height: 1.5; max-width: 54ch; }
.rates td { text-align: right; font-family: var(--serif); font-size: 26px; color: var(--green-deep); white-space: nowrap; }
.rates td small { display: block; font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
.rates tr:last-child th, .rates tr:last-child td { border-bottom: 3px double var(--ink); }
.rates tr.is-free td { color: var(--red); }
@media (max-width: 600px) {
  .rates th, .rates td { display: block; width: auto; }
  .rates th { border-bottom: 0; padding-bottom: 6px; }
  .rates td { text-align: left; padding-top: 0; }
  .rates tr:last-child th { border-bottom: 0; }
}
.rates-foot { margin-top: 22px; color: var(--ink-2); font-size: 15.5px; max-width: 70ch; }

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { margin: 24px 0 0; padding: 0; list-style: none; }
.contact-list li { padding: 12px 0; border-top: 1px solid var(--rule-strong); display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.contact-list li:last-child { border-bottom: 1px solid var(--rule-strong); }
.contact-list .k { color: var(--ink-2); font-size: 15px; }
/* Bigger tap area without moving the text. */
.contact-list a { font-weight: 500; display: inline-block; padding-block: 12px; margin-block: -12px; }

.composer {
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 36px);
}
.composer h3 { margin-bottom: 6px; font-weight: 400; font-size: 26px; }
.composer > p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 22px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 500; font-size: 15px; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 0;
  border-color: var(--green);
  background: var(--white);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.composer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.composer__foot small { color: var(--ink-2); font-size: 14px; }

/* ---------- partner band ---------- */

.partner { background: var(--green-soft); }
.partner .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 6vw, 80px); }
.partner h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.partner p { color: var(--ink-2); max-width: 56ch; }
.partner blockquote { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--ink); border-left: 3px solid var(--red); padding-left: 18px; }
.partner cite { display: block; font-style: normal; font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); margin-top: 10px; }
@media (max-width: 900px) { .partner .wrap { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */

.foot { padding-block: 56px 40px; border-top: 1px solid var(--ink); }
.foot__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; font-size: 15px; color: var(--ink-2); }
.foot__grid strong { color: var(--ink); font-weight: 500; display: block; margin-bottom: 6px; }
.foot__grid address { font-style: normal; }
.foot__grid a { display: inline-block; padding-block: 5px; }
.foot__legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule-strong); font-size: 13.5px; color: var(--ink-2); display: grid; gap: 8px; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .symptom__box::after { transition: none; }
}

/* ---------- print ---------- */
@media print {
  .top, .skip, .hero__cta, .composer, .menu-btn, .band img, .band::after { display: none !important; }
  .band, .strip, .section--dark { background: none !important; color: var(--ink) !important; min-height: 0; }
  .band *, .strip *, .section--dark * { color: var(--ink) !important; border-color: var(--rule-strong) !important; }
  .symptom__dx[hidden] { display: block !important; }
}