/* drwebne.com — design system from Claude Design project "Dr. Webne psychology practice website"
   Palette: theme #59 — a light, warm palette around sage and terracotta.
   Every ground is a light colour; depth lives in the text and in the one terracotta button.
   Terracotta acts (buttons, links, eyebrows); sage structures (rules, hairlines, band grounds).
   Fonts: Lora (headings) + Source Sans 3 (body). */

:root {
  /* --- grounds: six light papers. Nothing on this site goes dark. --- */
  --paper: #fdfaf3;        /* page ground — warmer than white */
  --card: #f7f0e4;         /* cream — cards and quiet panels */
  --sand: #f2e8d8;         /* footer — deepest ground used */
  --footer-band: #f2e8d8;
  --sage-wash: #e9f0ea;    /* full-width bands — the mark's green, at a whisper */
  --clay-wash: #f8e7dd;    /* the welcoming one — hero wash, invitation blocks */
  --honey-wash: #fcf0da;   /* sparingly — a note worth noticing */

  /* --- text: warm browns, never black. Ratios are against the paper. --- */
  --ink: #4f4034;          /* headings — 9.52:1 */
  --body: #5c4c3d;         /* body copy — 7.88:1 */
  --muted: #6b5a48;        /* secondary text — 6.03:1 */
  --faint: #7d6d58;        /* meta — 4.80:1, the lightest that still passes */
  --faint-2: #7d6d58;      /* labels */

  /* --- rules and borders --- */
  --hairline: #e6dcc9;     /* warm divider */
  --hairline-mid: #d9c9ac; /* structural rule, form borders */
  --sage-hairline: #b9cdbf;
  --sage-border: #cddccf;
  --clay-border: #e0c3ad;
  --clay-underline: #d9b09b;
  --dot: #b9a888;

  /* --- the two brand colours, and what each is allowed to do --- */
  --clay: #a9552f;         /* buttons — 5.00:1 carrying paper-coloured text */
  --clay-deep: #9a4520;    /* links and hover — 6.21:1 */
  --sage: #8fae9b;         /* rules and marks — 2.32:1, decoration only, never words */
  --sage-deep: #6f9280;    /* 3.30:1 — large display type only, never body text */
  /* The mark's green taken far enough down to set type over the hero photograph.
     The ratios above are against paper; over the photo, measured across the band the
     headline occupies, --sage-deep falls to 2.14:1 median and 1.27:1 at its worst
     pixel. This holds 5.09:1 median and 3.02:1 at the worst — clear of the 3:1 large
     text minimum everywhere on that image. Large display type only, like --sage-deep. */
  --sage-ink: #3a5545;

  --serif: "Lora", Georgia, serif;
  --sans: "Source Sans 3", Georgia, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--ink); }

a { color: var(--clay-deep); }
a:hover { opacity: .85; }

img { max-width: 100%; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 56px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--clay); color: var(--paper); padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- masthead ---------- */

.masthead { padding-top: 22px; }

/* One centred stack: the brand block, then the consultation button beneath it.
   Previously a 1fr / auto / 1fr grid that centred the brand but hung the button
   off the right-hand edge, which read as lopsided. */
.masthead .brand-row {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding-bottom: 18px;
}
/* The brand link and the contact line share this wrapper, so the contact line
   can sit under the address without nesting a tel:/mailto: link inside the
   homepage link, which is invalid and would swallow the taps. */
.masthead .brand-row .brand-block { text-align: center; }

.brand { position: relative; display: flex; align-items: center; text-decoration: none; color: inherit; }
/* The logo is a watermark behind the name stack rather than a mark beside it:
   lifted out of the link's flow, centred on the type, enlarged, and faded well
   back so it reads as ground, not figure. It stays a child of the <a>, so the
   link keeps one box and one entry in the accessibility tree — display:contents
   on the <a> drops it. Positioning is against .brand, which is why that is
   relative: against .brand-row it would centre on the whole masthead width and
   drift off the type as the portal button changes the flanking columns.
   .16 keeps it clear of the address and practice lines, which are set in
   --faint and are the least contrasty type in the block. */
.brand > img {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  opacity: .16; z-index: 0; pointer-events: none;
}
.brand img { width: 108px; height: 108px; flex: none; }
/* The name / practice / address stack centres on itself, against the address
   line that sets the block's width, and rides above the watermark. */
.brand > span { position: relative; z-index: 1; text-align: center; }
/* The name carries the mark's deepened green, the same one the homepage headline
   uses — 7.85:1 on paper, so unlike over the photograph there is nothing marginal
   about it here. */
.brand .name { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: .01em; color: var(--sage-ink); }
.brand .practice {
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin-top: 3px;
}
/* Phone and email under the address, in the mark's deepened green — 7.85:1 on
   paper, the same green the name above carries. */
.brand-contact {
  text-align: center; margin-top: 6px;
  font-size: 15px; color: var(--sage-ink);
}
.brand-contact a { color: inherit; text-decoration: none; }
.brand-contact a:hover { text-decoration: underline; }
.brand-contact .sep { margin: 0 8px; color: var(--sage); }

/* The practice line, under the phone and email in the same deepened green. */
.brand-practice {
  text-align: center; margin-top: 6px;
  font-size: 15px; color: var(--sage-ink);
}

/* Softened at Dr. Webne's request: a full pill rather than a rounded rectangle,
   more room around the label, a faint shadow to lift it off the paper, and easier
   letter spacing. The colour is unchanged — paper on --clay is 5.00:1 against a
   4.5:1 minimum, so there is no room to lighten it. */
.btn {
  display: inline-block; background: var(--clay); color: var(--paper);
  text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 14px 30px; letter-spacing: .01em; border: 0; cursor: pointer;
  font-family: var(--sans); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(169, 85, 47, .18);
  transition: opacity .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.btn:hover {
  background: var(--clay-deep); opacity: 1;
  box-shadow: 0 3px 14px rgba(169, 85, 47, .26);
}
.btn-lg { font-size: 18px; padding: 19px 40px; letter-spacing: .005em; }

.site-nav {
  display: flex; justify-content: center; gap: 34px; flex-wrap: wrap;
  border-top: 1px solid var(--sage-hairline); border-bottom: 1px solid var(--sage-hairline);
  padding: 13px 0; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a[aria-current="page"],
.site-nav a.section-current { color: var(--clay-deep); font-weight: 600; }

/* ---------- hero (home) ---------- */

.hero { padding: 76px 54px 60px; text-align: center; }
.hero .kicker {
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--clay-deep); font-weight: 600; margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.16;
  margin: 0 auto; max-width: 900px; letter-spacing: -.005em; text-wrap: pretty;
}
/* Portrait beside the opening paragraph, at Dr. Webne's request. The arch matches
   the About page frame. Stacks and centres on phones. */
.hero-intro {
  display: flex; align-items: center; justify-content: center;
  gap: 34px; margin: 30px auto 0; max-width: 860px; text-align: left;
}
.hero-portrait {
  flex: none; width: 210px; height: 285px; object-fit: cover; object-position: center 18%;
  border-radius: 105px 105px 10px 10px;
  border: 1px solid var(--sage-border);
  display: block;
}
.hero-intro .lede { margin: 0; max-width: none; }

.hero .lede {
  font-size: 20px; line-height: 1.65; max-width: 720px;
  margin: 30px auto 0; color: var(--body);
}
.hero .accepting { font-size: 19px; font-weight: 700; margin: 26px 0 0; }
.hero .cta-row {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 32px; flex-wrap: wrap;
}
.hero .cta-row .or { font-size: 18px; color: var(--body); }

.tel {
  font-weight: 700; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--clay);
}

/* ---------- shared bands ---------- */

.facts-bar {
  border-top: 1px solid var(--hairline-mid); border-bottom: 1px solid var(--hairline-mid);
  padding: 18px 56px; display: flex; justify-content: center; flex-wrap: wrap;
  column-gap: 16px; row-gap: 6px; font-size: 17px; color: var(--muted); font-weight: 600;
  text-align: center;
}
.facts-bar .dot { color: var(--dot); }

.intro-note { padding: 44px 54px 0; text-align: center; }
.intro-note p {
  font-size: 20px; line-height: 1.65; max-width: 720px; margin: 0 auto; color: var(--body);
}

.paths { padding: 52px 40px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.path-card {
  padding: 26px 0 0; display: flex; flex-direction: column; gap: 16px;
  border-top: 1px solid var(--hairline-mid);
}
.path-card::before { content: ""; width: 32px; border-top: 3px solid var(--sage); }
.path-card h3 { font-size: 27px; margin: 0; line-height: 1.3; }
.path-card p { font-size: 18px; line-height: 1.6; margin: 0; color: var(--body); }
.link-italic {
  font-family: var(--serif); font-style: italic; font-size: 19px;
  color: var(--clay-deep); text-decoration: none; margin-top: auto;
}

.band-green {
  margin: 68px 0 0; background: var(--sage-wash);
  border-top: 1px solid var(--sage-border); border-bottom: 1px solid var(--sage-border);
}
.band-green .inner {
  padding: 64px 40px; display: grid; grid-template-columns: 300px 1fr;
  gap: 64px; align-items: center;
}
.portrait { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Sized to the homepage portrait: the same 210px width, and 255px tall rather than
   285px. The About photograph is a much tighter crop than the homepage one, and with
   object-fit:cover a shorter frame scales it up less — at 255px his face renders about
   the same size as it does on the homepage. */
.portrait .frame {
  width: 210px; height: 255px; background: #dce8df; border: 1px solid var(--sage-hairline);
  border-radius: 105px 105px 10px 10px;
  display: flex; align-items: center; justify-content: center;
}
.portrait .frame span { font-family: var(--serif); font-size: 64px; font-weight: 600; color: #5c8271; }
/* The photo fills the arch and is clipped by it. object-position sits high so the
   crop takes the jacket rather than the top of his head. */
.portrait .frame { overflow: hidden; }
.portrait .frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  display: block;
}
.portrait .label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.band-green h2 { font-size: 36px; margin: 0 0 22px; line-height: 1.25; }
.band-green > .inner p { font-size: 19px; line-height: 1.68; margin: 0; color: var(--body); }
.band-green strong { color: var(--ink); }

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-top: 26px; }
.checks .check {
  border-top: 1px solid var(--sage-hairline); padding-top: 13px;
  display: flex; gap: 11px; align-items: baseline;
}
.checks .check .mark { color: var(--clay); font-family: var(--serif); font-size: 18px; font-weight: 600; flex: none; }
.checks .check span:last-child { font-size: 17.5px; line-height: 1.45; color: var(--ink); font-weight: 600; }

.steps-section { padding: 72px 40px 76px; text-align: center; }
/* On contact.html the steps sit directly above the contact grid; their two
   paddings would otherwise stack into a ~120px trough. */
.steps-section + .contact-grid { padding-top: 4px; }
.steps-section h2 { font-size: 36px; margin: 0 0 38px; line-height: 1.25; }
.steps { max-width: 740px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; }
.step {
  display: grid; grid-template-columns: 70px 1fr; gap: 26px; align-items: baseline;
  padding: 24px 0; border-top: 1px solid var(--hairline-mid);
}
.step:last-child { border-bottom: 1px solid var(--hairline-mid); }
.step .num { font-family: var(--serif); font-size: 42px; color: var(--sage-deep); line-height: 1; }
.step .title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.step p { font-size: 18px; line-height: 1.6; margin: 6px 0 0; color: var(--body); }
.steps-section > .btn { margin-top: 52px; }

/* ---------- page & article scaffolding ---------- */

.page-head { padding: 40px 40px 0; }
.page-head h1 {
  font-size: clamp(32px, 4vw, 44px); line-height: 1.18; margin: 0;
  max-width: 830px; letter-spacing: -.005em; text-wrap: pretty;
}
/* The homepage heading treatment, for a page head that wants it: same Cormorant
   italic, same size clamp, same deepened green. Opt-in per page rather than on
   .page-head h1, which every interior page shares. */
.page-head h1.display {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-weight: 600;
  font-size: clamp(30px, calc(6.6vw - 8px), 70px);
  line-height: 1.15; letter-spacing: .005em;
  max-width: none; color: var(--sage-ink);
}
/* The banner face at section-heading size: same Cormorant italic and deepened green
   as the page banners, but keeping each heading's own size. */
.title-display {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-weight: 600;
  color: var(--sage-ink);
}

.page-head .lede { font-size: 21px; line-height: 1.6; color: var(--muted); margin: 20px 0 0; max-width: 680px; }
.breadcrumb {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint-2); margin-bottom: 22px;
}
.breadcrumb a { text-decoration: none; color: var(--clay-deep); }
.breadcrumb .sep { color: var(--dot); }
.article-grid {
  padding: 40px 40px 0; display: grid; grid-template-columns: 222px minmax(0, 1fr);
  gap: 60px; align-items: start;
}

.toc { position: sticky; top: 24px; border-top: 2px solid var(--clay); padding-top: 16px; }
.toc .toc-label {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; margin-bottom: 14px;
}
.toc nav { display: grid; gap: 11px; font-size: 15px; line-height: 1.4; }
.toc nav a { text-decoration: none; color: var(--body); }
.toc nav a.cross {
  color: var(--clay-deep); font-size: 14px; padding-top: 8px;
  border-top: 1px solid var(--hairline); line-height: 1.35;
}
.toc nav a.quiet {
  color: var(--faint); font-size: 14px; padding-top: 6px;
  border-top: 1px solid var(--hairline);
}

.side-cta {
  background: var(--clay-wash); padding: 20px; border-radius: 10px;
  margin-top: 26px; display: flex; flex-direction: column; gap: 10px;
}
.side-cta p { font-size: 15px; line-height: 1.5; color: var(--body); margin: 0; }
.side-cta .btn { display: block; font-size: 13.5px; padding: 11px 12px; text-align: center; line-height: 1.35; }

article.prose { max-width: 700px; }
/* The About page body runs the full page width instead of the 700px measure, at
   Dr. Webne's request. Padding matches .article-grid so it lines up with the
   portrait column above it. */
article.prose.about-body { max-width: none; padding: 0 40px 0; }
.prose h2 {
  font-size: 31px; line-height: 1.28; margin: 0 0 20px;
  letter-spacing: -.005em; text-wrap: pretty;
}
.prose h2 + *, .prose h3 + * { margin-top: 0; }
.prose h2.ruled { margin-top: 52px; border-top: 1px solid var(--hairline-mid); padding-top: 34px; }
.prose h3 { font-size: 23px; line-height: 1.32; margin: 34px 0 8px; }
.prose p { font-size: 19px; line-height: 1.72; margin: 0 0 20px; color: var(--body); text-wrap: pretty; }
.prose ol.numbered {
  margin: 0 0 24px; padding-left: 26px; display: grid; gap: 13px;
  font-size: 18px; line-height: 1.65; color: var(--body);
}
.prose ul.plain {
  margin: 0 0 14px; padding-left: 22px; display: grid; gap: 8px;
  font-size: 17px; line-height: 1.6; color: var(--body);
}
.prose ul.cols { grid-template-columns: 1fr 1fr; gap: 8px 28px; }

/* The About page opening, in terracotta at Dr. Webne's request. --clay-deep is
   6.21:1 on paper; the name and the two sub-headings carry it too, so the block
   reads as one piece against the --body prose that follows it. */
/* Direct children only, so the colour does not leak into the "Why Choose" panel
   or the closing call-to-action nested inside the full-width article. */
.about-intro > p, .about-intro > h2, .about-intro > h3 { color: var(--clay-deep); }
.about-intro .name { font-size: 28px; margin: 0 0 14px; }
.about-intro h3 { margin-top: 30px; }
/* The credentials, kept when the Credentials section was replaced by the
   "Why Choose" panel. */
.about-intro .credentials { font-size: 17px; font-style: italic; line-height: 1.5; margin: 0 0 22px; }

/* "Why Choose Dr. Webne?" — terracotta on the sage band, at Dr. Webne's request.
   --clay-deep is 5.58:1 against --sage-wash, clear of the 4.5:1 minimum. Scoped
   under .prose so these win over the .prose h2 / h3 / p rules. */
.prose .why-choose {
  background: var(--sage-wash); border-radius: 10px;
  padding: 34px 36px; margin: 44px 0 24px;
}
.prose .why-choose h2,
.prose .why-choose h3,
.prose .why-choose p { color: var(--clay-deep); }
.prose .why-choose h2 { font-size: 31px; margin: 0 0 4px; }
.prose .why-choose h3 { font-size: 21px; margin: 26px 0 6px; }
.prose .why-choose p { font-size: 18px; line-height: 1.65; margin: 0; }
.prose .why-choose .why-goal {
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--sage-hairline);
}

/* pull-out (sage wash) */
.pullout { background: var(--sage-wash); padding: 30px 32px; margin: 26px 0 24px; border-radius: 10px; }
.pullout .kicker {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay-deep); font-weight: 700; margin-bottom: 6px;
}
.pullout .title { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.3; margin-bottom: 20px; }
.pullout .after {
  font-size: 16px; line-height: 1.65; color: var(--body); margin: 22px 0 0;
  border-top: 1px solid var(--sage-hairline); padding-top: 18px;
}

.q-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 34px; }
.q-grid li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.q-grid .n { font-family: var(--serif); font-weight: 600; color: var(--clay-deep); flex: none; }

/* inline CTA strip */
.inline-cta {
  border-top: 1px solid var(--hairline-mid); border-bottom: 1px solid var(--hairline-mid);
  padding: 24px 0; margin: 32px 0;
  display: flex; gap: 26px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.inline-cta .ask { font-family: var(--serif); font-size: 20px; line-height: 1.4; max-width: 390px; }
.inline-cta .btn { flex: none; padding: 14px 24px; }

/* soft cards in article flow */
.card-block { background: var(--card); padding: 28px 30px; border-radius: 10px; }
.card-block .card-title { font-family: var(--serif); font-size: 23px; font-weight: 600; margin-bottom: 12px; }
.card-block p { font-size: 17.5px; line-height: 1.68; margin: 0 0 14px; color: var(--body); }
.card-block p:last-child { margin-bottom: 0; }
.card-block .lead-in { font-size: 16px; line-height: 1.6; margin: 0 0 10px; color: var(--muted); font-weight: 600; }
.card-stack { display: grid; gap: 0; }
.card-stack .card-block {
  background: transparent; border-radius: 0; padding: 28px 0;
  border-top: 1px solid var(--hairline-mid);
}
.card-stack .card-block:last-child { border-bottom: 1px solid var(--hairline-mid); }

/* read next */
.read-next {
  border-top: 1px solid var(--hairline-mid); padding: 28px 0 0; margin: 44px 0 0;
  display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.read-next .kicker {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint-2); font-weight: 700; margin-bottom: 8px;
}
.read-next .title { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.32; margin-bottom: 8px; }
.read-next p { font-size: 16.5px; line-height: 1.6; margin: 0; color: var(--body); }
.read-next .link-italic { flex: none; margin: 0; }

/* closing CTA (clay wash — the invitation) */
.closing-cta {
  background: var(--clay-wash); padding: 32px 34px; border-radius: 12px;
  display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.closing-cta .title {
  font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.32;
  margin-bottom: 8px; max-width: 420px;
}
.closing-cta .sub { font-size: 16px; color: var(--muted); }
/* Dr. Webne's opening answer on the Assessments page, in terracotta like the
   homepage service copy. --clay-deep is 6.21:1 on paper. */
.prose .intro-clay p,
.prose .intro-clay li { color: var(--clay-deep); }
.prose .intro-clay ul.plain { font-size: 18px; margin: 0 0 20px; gap: 6px; }
.prose .intro-clay { margin-bottom: 34px; }
.prose .intro-clay .btn { margin-top: 10px; }

/* Opt-in: the other pages keep their response line left-aligned with the title. */
.closing-cta .sub.centered { text-align: center; }
.closing-cta .btn { flex: none; padding: 16px 26px; font-size: 16px; }

/* references */
.refs { margin-top: 44px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.refs .label {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint-2); font-weight: 700; margin-bottom: 12px;
}
.refs .list { display: grid; gap: 8px; font-size: 13.5px; line-height: 1.6; color: var(--faint); max-width: 620px; }

/* numbered hairline rows (school success factors, therapy types) */
.num-rows { display: grid; border-top: 1px solid var(--hairline-mid); margin: 28px 0; }
.num-rows .row {
  border-bottom: 1px solid var(--hairline-mid); padding: 22px 0;
  display: grid; grid-template-columns: 34px 1fr; gap: 18px;
}
.num-rows .row .n { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--sage-deep); }
.num-rows .row .row-title { font-family: var(--serif); font-size: 21px; font-weight: 600; margin-bottom: 8px; }
.num-rows .row p { font-size: 17.5px; line-height: 1.65; margin: 0; color: var(--body); }

/* ---------- age bands (success in school) ---------- */

.band-chips {
  margin: 32px 0 0; border-top: 1px solid var(--hairline-mid); border-bottom: 1px solid var(--hairline-mid);
  padding: 18px 40px;
}
.band-chips .label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint-2); font-weight: 700; margin-bottom: 12px;
}
.band-chips .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.band-chips a {
  text-decoration: none; background: var(--sage-wash); border-radius: 6px;
  color: var(--clay-deep); font-size: 15px; font-weight: 600; padding: 9px 16px;
  transition: background-color .25s ease;
}
.band-chips a:hover { background: #dbe8de; }
.band-chips a.pending { border-style: dashed; border-color: var(--clay-border); background: var(--honey-wash); color: var(--muted); }
.band-chips a.quiet { border: 1px solid var(--hairline); background: transparent; color: var(--muted); font-weight: 400; }

.bands { display: grid; gap: 14px; }
details.band { border: 1px solid var(--hairline); background: var(--card); border-radius: 10px; overflow: hidden; }
details.band > summary {
  list-style: none; cursor: pointer; padding: 20px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  scroll-margin-top: 20px;
}
details.band > summary::-webkit-details-marker { display: none; }
details.band > summary:hover { background: var(--sand); }
details.band .band-id {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay-deep); font-weight: 700;
}
details.band .band-title { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.25; }
details.band .band-summary { font-size: 14.5px; color: var(--muted); }
details.band .band-head-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
details.band .band-head-right { display: flex; align-items: center; gap: 16px; flex: none; }
details.band .bx { font-size: 26px; line-height: 1; color: var(--clay); }
details.band .bx::after { content: "+"; }
details.band[open] .bx::after { content: "–"; }
details.band .band-body { padding: 0 28px 26px; }
details.band .band-body .steps-list { display: grid; gap: 15px; font-size: 17px; line-height: 1.65; color: var(--body); }
details.band .band-body .steps-list strong { color: var(--ink); }

details.band.pending { border: 1px dashed var(--clay-border); background: var(--honey-wash); }
details.band.pending > summary:hover { background: #f9e6c6; }
details.band.pending .band-id { color: var(--clay-deep); }
details.band.pending .band-title { color: var(--ink); }
details.band.pending .bx { color: var(--clay-deep); }
.pending-chip {
  font: 700 10px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .1em;
  color: var(--clay-deep); background: #f6e3c4; padding: 5px 7px;
}
details.band.pending .band-body p { font-size: 15.5px; line-height: 1.6; color: var(--body); margin: 0; }

/* ---------- FAQ accordion ---------- */

.faq { border-top: 1px solid var(--hairline-mid); }
details.faq-item { border-bottom: 1px solid var(--hairline-mid); }
details.faq-item > summary {
  list-style: none; cursor: pointer; padding: 20px 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary .q { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--muted); }
details.faq-item[open] > summary .q { color: var(--ink); }
details.faq-item .fx { font-size: 22px; color: var(--clay); line-height: 1; flex: none; }
details.faq-item .fx::after { content: "+"; }
details.faq-item[open] .fx::after { content: "–"; }
details.faq-item .a { padding: 0 0 20px; }
details.faq-item .a p { font-size: 17.5px; line-height: 1.68; margin: 0 0 12px; color: var(--body); max-width: 620px; }
details.faq-item .a p:last-child { margin-bottom: 0; }

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

.site-footer { margin-top: 64px; border-top: 1px solid var(--hairline-mid); background: var(--footer-band); }
.site-footer .inner { padding: 38px 40px 44px; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; }
.site-footer .who { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.site-footer .details { font-size: 14.5px; line-height: 1.7; color: var(--muted); }
/* --faint is spec'd against the paper; on the deeper sand of the footer it falls
   to 4.12:1, so footer meta text steps up to --muted (5.24:1). */
.site-footer .col-label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 12px;
}
.site-footer .links { display: grid; gap: 7px; font-size: 14.5px; line-height: 1.4; }
.site-footer .links a { text-decoration: none; }
.site-footer .links a.quiet { color: var(--muted); }
.site-footer .crisis {
  margin-top: 28px; border-top: 1px solid var(--hairline-mid); padding-top: 18px;
  font-size: 14px; line-height: 1.6; color: var(--muted); font-style: italic; max-width: 720px;
}
.site-footer .details a { color: inherit; text-decoration: none; }

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

.contact-grid { padding: 44px 40px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-card { background: var(--card); padding: 32px 34px; border-radius: 12px; }
.contact-card h2 { font-size: 27px; margin: 0 0 16px; }
.contact-card .big-line { font-size: 20px; margin: 0 0 10px; color: var(--body); }
.form-note {
  border-left: 3px solid var(--clay); background: var(--card); border-radius: 0 8px 8px 0;
  padding: 14px 18px; font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 18px 0;
}
.form-note.crisis-note { border-left-color: #a02b2b; }
.form-note.form-error { border-left-color: #a02b2b; color: var(--body); }
form .field { margin-bottom: 18px; }
form label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; color: var(--ink); }
form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="date"], form textarea, form select {
  width: 100%; padding: 11px 12px; font-size: 16px; font-family: var(--sans);
  border: 1px solid var(--hairline-mid); background: #fff; color: var(--ink); border-radius: 5px;
}
form textarea { min-height: 84px; resize: vertical; }
.checks-fieldset { border: 1px solid var(--hairline-mid); padding: 14px 16px 8px; margin: 0; border-radius: 8px; }
.checks-fieldset legend { font-weight: 600; font-size: 16px; padding: 0 6px; }
.checks-fieldset label { display: flex; gap: 10px; align-items: baseline; font-weight: 400; margin-bottom: 10px; }
.checks-fieldset input { accent-color: var(--clay); }
/* Date choices on the contact form: a date and a time of day per row, stacked on narrow screens. */
.date-fieldset { padding-bottom: 14px; }
.date-fieldset .fieldset-hint { font-size: 16px; color: var(--muted); margin: 2px 0 14px; }
.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.date-row:last-child { margin-bottom: 0; }
.date-row label { font-size: 16px; }
.date-row input[type="date"] { min-height: 46px; }
@media (max-width: 520px) { .date-row { grid-template-columns: 1fr; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); } .date-row:last-child { border-bottom: 0; padding-bottom: 0; } }
/* Booking buttons land on the form heading — leave a little room above it. */
#request { scroll-margin-top: 24px; }
.map-embed { border: 1px solid var(--hairline-mid); width: 100%; height: 320px; display: block; border-radius: 10px; }

/* ---------- client portal button (header) ---------- */

.masthead-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Was "Client Portal" — thirteen characters. The label is now forty-seven, and Dr.
   Webne asked that the button stay about the size it was. It cannot stay exactly:
   something has to give between width, height and type size. The compromise is a
   smaller label wrapping to two lines inside a capped width, which lands near 220x53
   against the old 130x40 — close in weight, where a single line at this size would
   have run past 300px and pushed the brand off the masthead's centre line. */
.btn-portal {
  background: transparent; color: var(--clay-deep);
  border: 1.5px solid var(--clay);
  box-shadow: none;
  padding: 11px 24px;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0;
  /* Was capped at 220px to stop it dominating the old right-hand column; centred
     under the brand it has room to sit on one line. */
  text-align: center;
}
.btn-portal:hover { background: var(--clay-wash); color: var(--clay-deep); opacity: 1; }

/* ---------- washed photo hero (home) ---------- */
/* Two layers: a clay → honey → sage wash that carries the theme, and the paper
   veil above it that keeps the type legible over whatever the photograph does. */

.hero-photo {
  position: relative; background-color: var(--paper);
  background-image: url("hero-office.jpg");
  background-position: center 64%; background-size: cover; background-repeat: no-repeat;
  min-height: 65vh; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--sage-border);
}
.hero-photo::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(64% 58% at 50% 52%,
      rgba(253, 250, 243, .86) 0%,
      rgba(253, 250, 243, .58) 54%,
      rgba(253, 250, 243, 0) 100%),
    linear-gradient(180deg,
      rgba(253, 250, 243, .52) 0%,
      rgba(253, 250, 243, .70) 52%,
      rgba(253, 250, 243, .96) 100%),
    linear-gradient(120deg,
      rgba(248, 231, 221, .74) 0%,
      rgba(252, 240, 218, .60) 45%,
      rgba(233, 240, 234, .74) 100%);
}
.hero-photo .hero { position: relative; width: 100%; }

/* ---------- homepage: the three-section layout ----------
   Section heights follow taylorpsychology.ca, measured at 1280×720:
   hero 508px (0.70vh) · statement 473px (0.66vh) · learn-more 326px (0.45vh).
   Clamped at both ends so short laptop windows don't crush the type and tall
   monitors don't strand three lines of copy in an ocean of paper. */

/* Section 1 — pinned. The photo holds still at the top of the window while
   sections 2 and 3 rise over it. Nothing animates: this is occlusion, not
   motion, so it needs no reduced-motion guard, and unlike
   background-attachment:fixed it behaves correctly on iOS Safari.
   The sticky element makes a stacking context, so the sections that cover it
   must be positioned with z-index or they would paint underneath. */
.hero-pinned {
  position: sticky; top: 0; z-index: 0;
  /* min-height, not height: the hero copy sets the real height. A fixed height
     would be overrun by the copy and the statement section would slide up over
     the buttons. See the max-height guard below for the other half of this. */
  height: auto; min-height: clamp(440px, 70vh, 720px);
}

/* The pin only works when the window is tall enough to show the whole hero at once:
   a sticky element taller than the viewport holds its top edge at 0, so its bottom —
   here the consultation CTA — can never be scrolled into view, and the statement
   section slides over it. The hero copy is short again (kicker, headline, CTA — about
   290px), so the section's own min-height is what sets its height: 70vh always fits,
   and only the 440px floor of that clamp can outrun a very short window. Hence 460px,
   not the ~940px this guard needed while the two service paragraphs lived in the hero.
   relative, not static: .hero-photo::before is inset:0 against this element, and
   static would hand it a different containing block, stripping the wash that makes
   the copy readable over the photo. */
@media (max-height: 460px) {
  .hero-pinned { position: relative; }
}
/* On phones the hero stacks — headline, portrait, paragraph, scroll cue — and runs
   about 720px, taller than a 667 or 736 screen. A sticky element taller than the
   viewport pins its top, so its bottom could never be scrolled to. */
@media (max-width: 760px) and (max-height: 780px) {
  .hero-pinned { position: relative; }
}
.hero-pinned .hero { padding: 40px 54px; }

/* Section 1's headline is Cormorant Garamond italic — Dr. Webne's choice. It is now the
   face used by every page banner (.display) and by the Contact page's section headings
   (.title-display), so each of those pages requests it in its own font link.

   The 6.6vw - 8px figure was calculated to hold "Empowering Minds at Every Stage of Life"
   on one line. That headline moved down to the statement band on 2026-09-21 and this slot
   now carries the longer "Professional Skills You Need, Experience You Can Trust", which
   wraps to two lines at every width. The sizing is kept as it is because the two headlines
   are deliberately matched: .statement-title uses the same clamp, at his request. The
   900px max-width from .hero h1 still has to be cleared here, or it would force an
   earlier wrap on wide screens. */
.hero-pinned .hero h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(30px, calc(6.6vw - 8px), 70px);
  line-height: 1.15;
  letter-spacing: .005em;
  max-width: none;
  /* The mark's green, deepened — Dr. Webne asked for a bolder form of the logo green.
     Not --sage-deep, which is the obvious candidate and measures 3.30:1 against paper:
     this headline sits on a photograph, and sampled across the band it occupies that
     green drops to 2.14:1 median, 1.27:1 at worst. --sage-ink holds 5.09:1 median and
     3.02:1 at worst, which clears the 3:1 large-text minimum across the whole image —
     and this headline is large type at every size it takes, 70px down to the 30px
     phone floor at weight 600. Cormorant's italic strokes are thin, so the margin
     earns its keep. */
  color: var(--sage-ink);
}

/* The homepage hero headline is a short title again ("Empowering Minds at Every Stage
   of Life"), so it takes the plain .hero h1 treatment every other page's hero uses —
   no override needed here. The paragraph under it uses .hero .lede, likewise shared.
   Its colour is not: Dr. Webne asked for the consultation button's terracotta, and only
   this one paragraph gets it — .lede carries the standard --body on six other pages.
   --clay is 5.00:1 on paper, which clears the 4.5:1 minimum but with less room than the
   --body it replaces; --clay-deep is the 6.21:1 version of the same brown if it needs it.
   strong keeps the colour it inherits, so the bold run reads as part of the sentence
   rather than a second colour, and drops from the browser's 700 to 600, which is what
   this face wants at 20px over a photo. */
.hero-pinned .hero .lede { color: var(--clay); }
.hero .lede strong { font-weight: 600; }

/* "here" as a button inside the sentence, twice — Dr. Webne's wording. Ghost rather
   than solid, per the site's standing rule that the consultation button stays the
   loudest action; three solid terracotta buttons in one hero would flatten that.
   Paper ground because they sit over the photograph, and baseline alignment so the
   line of type does not jog around them. */
/* The hero's closing line, in place of the buttons and email that used to sit here.
   A line of air above it — the blank line Dr. Webne asked for — and the paragraph's
   own terracotta, a size down, so it reads as an aside rather than a second claim. */
.hero .scroll-cue {
  font-size: 18px;
  line-height: 1.6;
  color: var(--clay);
  margin: 2.2em auto 0;
  max-width: 720px;
}

/* Sits directly under the h1 — same uppercase treatment, roughly half the size,
   so it reads as a continuation of the headline rather than a second heading. */
.hero .h1-sub {
  font-family: var(--serif);
  text-transform: uppercase;
  font-size: clamp(15px, 1.75vw, 22px);
  letter-spacing: .12em;
  line-height: 1.4;
  color: var(--muted);
  max-width: 760px;
  margin: 14px auto 0;
  text-wrap: balance;
}

/* Two blank lines of air below the subhead, then the invitation in body voice. */
.hero .hero-note {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--body);
  max-width: 700px;
  margin: 2.6em auto 0;
  text-wrap: pretty;
}

/* Secondary action — ghost outline so the terracotta consultation button below
   stays the loudest thing in the hero. Paper ground because it sits on the photo. */
.hero .hero-note-cta { margin-top: 22px; }
.hero .hero-note-cta .btn-ghost { background: var(--paper); }

/* Section 2 — the statement. */
.statement {
  position: relative; z-index: 1;
  background: var(--sage-wash);
  border-top: 1px solid var(--sage-border);
  border-bottom: 1px solid var(--sage-border);
  min-height: clamp(420px, 66vh, 680px);
  display: flex; align-items: center;
}
/* padding-block, not the shorthand: .inner is also .wrap, and a shorthand here
   would zero out .wrap's 56px/28px side padding and run the copy to the screen edge. */
.statement .inner { width: 100%; text-align: center; padding-block: 64px; }
/* Matched to the hero headline at Dr. Webne's request: same face, same italic, same
   green — and now the same size too, sharing the hero's clamp so the two lines carry
   equal weight rather than one reading as a subordinate line. The uppercase goes with
   it — "match" means the two lines should look like a pair, and caps in Cormorant
   italic would read as a different treatment entirely. No one-line constraint here:
   this sentence is 54 characters and is meant to wrap.
   --sage-ink is 7.06:1 on the sage band, against 3.02:1 at worst over the hero
   photograph — the same green has an easier job on a flat ground. */
.statement-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(30px, calc(6.6vw - 8px), 70px);
  letter-spacing: .005em;
  line-height: 1.2; color: var(--sage-ink);
  max-width: 900px; margin: 0 auto; text-wrap: balance;
}
.statement-eyebrow {
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--clay-deep); font-weight: 600;
  margin: 32px 0 14px;
}
/* Terracotta at Dr. Webne's request, and it carries the 32px of air the eyebrow line
   above it used to provide before that line was removed. --clay-deep, not --clay: this
   sits on the sage band, where the button's --clay measures exactly 4.50:1 — the AA
   minimum for normal text with nothing to spare — while --clay-deep holds 5.58:1. */
.statement-body {
  font-size: 19px; line-height: 1.68; color: var(--clay-deep);
  max-width: 680px; margin: 32px auto 0; text-wrap: pretty;
}
.statement-ask {
  font-size: 19px; line-height: 1.68; color: var(--clay-deep);
  margin: 14px auto 0; max-width: 680px; text-wrap: balance;
}
.statement .btn { margin-top: 38px; }

/* Section 3 — the short one. */
.learn-more {
  position: relative; z-index: 1;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  min-height: clamp(300px, 45vh, 440px);
  display: flex; align-items: center;
}
.learn-more .inner { width: 100%; text-align: center; padding-block: 48px; }
.learn-more h2 { font-size: clamp(28px, 3.2vw, 38px); margin: 0 0 12px; line-height: 1.25; }
.lm-sub { font-size: 18px; color: var(--muted); margin: 0 0 32px; }
.lm-buttons { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
/* Equal widths — "Assessment" and "Therapy" are different lengths, and a matched
   pair reads as one choice rather than two unrelated links. */
.lm-buttons .btn { min-width: 210px; text-align: center; }

/* The two invitations that used to sit in the hero. Side by side on desktop so the
   section stays short; the buttons align on a shared baseline because each column is
   a column-flex box with the paragraph allowed to grow and the button pushed to the
   end — the two paragraphs are very different lengths. */
.lm-invites {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 48px; align-items: stretch;
  max-width: 1000px; margin: 0 auto; text-align: left;
}
.lm-invite { display: flex; flex-direction: column; }
/* Every line in both invitations is terracotta, at Dr. Webne's request —
   --clay-deep is 6.21:1 on this paper ground. */
.lm-invite p {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6; color: var(--clay-deep);
  margin: 0 0 24px; flex: 0 0 auto; text-wrap: pretty;
}
.lm-heading {
  font-size: clamp(21px, 1.9vw, 25px); font-weight: 700;
  color: var(--clay-deep); text-align: center;
  margin: 0 0 16px; line-height: 1.25;
}
/* Only the body paragraph grows — the question line sits tight above the buttons
   rather than sharing the column's spare height with the paragraph. */
/* The bulleted list of assessment types, in the same terracotta as the copy. */
.lm-invite ul.lm-list {
  margin: 0 0 24px; padding-left: 22px; display: grid; gap: 6px;
  font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--clay-deep);
  flex: 0 0 auto;
}
/* The button holds the foot of the column, so the copy above it does not have to
   grow to push it there — which stopped working once a column held more than one
   paragraph. */
.lm-invite .btn { align-self: flex-start; margin-top: auto; }
.lm-invite .btn + .btn { margin-top: 12px; }

/* Outlined variant — keeps the solid terracotta consultation button the single
   loudest action on the page. Border #a9552f on paper is 5.00:1, well clear of
   the 3:1 minimum for non-text; the label #9a4520 is 6.21:1. */
.btn-ghost {
  background: transparent; color: var(--clay-deep);
  border: 1.5px solid var(--clay);
}
.btn-ghost:hover { background: var(--clay-wash); color: var(--clay-deep); opacity: 1; }

/* ---------- value-prop row (home, replaces facts bar) ---------- */

.value-props {
  background: var(--sage-wash);
  border-bottom: 1px solid var(--sage-border);
  padding: 46px 40px;
}
.value-props .cols {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.vp .rule { width: 32px; border-top: 3px solid var(--sage); margin: 0 0 14px; }
.vp h3 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
.vp p { font-size: 15.5px; line-height: 1.55; margin: 0; color: var(--body); }

/* ---------- washed photo CTA band (home) ---------- */

.band-photo {
  position: relative; margin-top: 68px;
  background-color: var(--paper);
  background-image: url("band-morning.jpg");
  background-position: center 62%; background-size: cover; background-repeat: no-repeat;
  border-top: 1px solid var(--hairline-mid); border-bottom: 1px solid var(--hairline-mid);
}
.band-photo::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(253, 250, 243, .64) 0%,
      rgba(253, 250, 243, .72) 100%),
    linear-gradient(120deg,
      rgba(248, 231, 221, .68) 0%,
      rgba(252, 240, 218, .54) 50%,
      rgba(233, 240, 234, .68) 100%);
}
.band-photo .inner {
  position: relative; max-width: 880px; margin: 0 auto;
  text-align: center; padding: 88px 28px;
}
.band-photo h2 {
  font-size: clamp(30px, 3.6vw, 42px); line-height: 1.22;
  margin: 0 0 14px; letter-spacing: -.005em; text-wrap: pretty;
}
.band-photo .sub {
  font-family: var(--serif); font-style: italic;
  font-size: 20px; line-height: 1.6; color: var(--body);
  max-width: 640px; margin: 0 auto 32px;
}

/* statement-headline scale for the two home bands */
.band-green h2 { font-size: clamp(32px, 3.4vw, 42px); }
.steps-section h2 { font-size: clamp(32px, 3.4vw, 42px); }
.band-green .btn { margin-top: 30px; }

/* ---------- washed photo page headers (interior pages) ---------- */

.page-hero {
  position: relative; background-color: var(--paper);
  background-size: cover; background-position: center 45%; background-repeat: no-repeat;
  border-bottom: 1px solid var(--sage-border);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(253, 250, 243, .62) 0%,
      rgba(253, 250, 243, .78) 55%,
      rgba(253, 250, 243, .97) 100%),
    linear-gradient(120deg,
      rgba(248, 231, 221, .70) 0%,
      rgba(252, 240, 218, .56) 48%,
      rgba(233, 240, 234, .70) 100%);
}
.page-hero > * { position: relative; }
.page-hero .page-head { padding: 88px 56px 72px; }

/* ---------- gentle scroll reveals (enabled by site.js via .reveal-on) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal-on .reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity .8s cubic-bezier(.25, .6, .25, 1), transform .8s cubic-bezier(.25, .6, .25, 1);
  }
  .reveal-on .reveal.revealed { opacity: 1; transform: none; }
  .reveal-on .value-props .vp:nth-child(2) { transition-delay: .1s; }
  .reveal-on .value-props .vp:nth-child(3) { transition-delay: .2s; }
  .reveal-on .value-props .vp:nth-child(4) { transition-delay: .3s; }
}

/* ---------- annotation layer (copy pass) — hidden unless ?notes=1 ----------
   Deliberately off-palette: these are editorial markers for the copy pass,
   and they should never be mistaken for part of the site. */

.note { display: none; }
html.show-notes .note { display: flex; gap: 12px; align-items: flex-start; border: 1px dashed #9fb0c4; background: #eef2f7; padding: 14px 16px; margin: 14px 0 20px; }
html.show-notes .note .tag {
  font: 700 10px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .1em;
  color: #3d5878; background: #dbe4ef; padding: 5px 7px; flex: none;
}
html.show-notes .note .body { font-size: 14.5px; line-height: 1.6; color: #3d5878; }
html.show-notes .note.draft { border-color: #c9a227; background: #fdf6e3; }
html.show-notes .note.draft .tag { color: #8a6d0b; background: #f6e7bd; }
html.show-notes .note.draft .body { color: #7a5f08; }
.note-inline { display: none; }
html.show-notes .note-inline {
  display: inline-block; font: 700 10px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .08em;
  color: #8a6d0b; background: #f6e7bd; border: 1px dashed #c9a227;
  padding: 3px 6px; margin-left: 8px; vertical-align: 2px;
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .wrap { padding: 0 28px; }
  .article-grid { grid-template-columns: 1fr; gap: 0; padding: 32px 0 0; }
  /* matches the grid above, which drops its side padding on phones */
  article.prose.about-body { padding: 0; }
  .toc { position: static; margin-bottom: 36px; }
  .band-green .inner { grid-template-columns: 1fr; gap: 36px; padding: 44px 28px; text-align: center; }
  .checks { text-align: left; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .site-footer .cols { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  .insert-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .insert-aside { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--sage-hairline); padding-top: 18px; }
  .paths { grid-template-columns: 1fr; padding: 40px 0 0; }
  .hero { padding: 52px 8px 44px; }
  .facts-bar { padding: 16px 20px; font-size: 15px; }
  .intro-note { padding: 36px 4px 0; }
  .page-head { padding: 32px 0 0; }
  .band-chips { padding: 16px 20px; margin-left: -28px; margin-right: -28px; }
  .checks { grid-template-columns: 1fr; }
  .q-grid { grid-template-columns: 1fr; }
  .prose ul.cols { grid-template-columns: 1fr; }
  .steps-section { padding: 56px 0 60px; }
  .step { grid-template-columns: 48px 1fr; gap: 16px; }
  .step .num { font-size: 32px; }
  /* One column on a phone: the flanking 1fr tracks have nothing to balance
     (the portal button is hidden below 760px) and would only squeeze the brand. */
  .masthead .brand-row { grid-template-columns: 1fr; text-align: center; }
  .masthead .brand-row .brand { grid-column: 1; justify-content: center; }
  .masthead .brand-row .masthead-actions { grid-column: 1; justify-self: center; }
  /* The watermark scales with the smaller name stack it sits behind. */
  .brand img { width: 88px; height: 88px; }
  .brand .name { font-size: 24px; }
  .site-nav { gap: 16px 22px; font-size: 13px; }
  .num-rows .row { grid-template-columns: 26px 1fr; gap: 12px; }
  details.band > summary { padding: 16px 18px; }
  details.band .band-body { padding: 0 18px 22px; }
  .contact-grid { padding: 36px 0 0; }
  .site-footer .inner { padding: 32px 0 36px; }
  .site-footer { padding-left: 28px; padding-right: 28px; }
}

/* ---------- responsive: hero photo, value props, photo band ---------- */

@media (max-width: 900px) {
  .value-props .cols { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 760px) {
  /* Shown on phones since the announcement bar was removed — it used to carry the
     only booking link at the top of a phone screen. */
  .btn-portal { max-width: 100%; }
  .hero-photo { min-height: 0; }
  .hero-photo::before {
    background:
      linear-gradient(180deg,
        rgba(253, 250, 243, .72) 0%,
        rgba(253, 250, 243, .84) 52%,
        rgba(253, 250, 243, .97) 100%),
      linear-gradient(120deg,
        rgba(248, 231, 221, .74) 0%,
        rgba(252, 240, 218, .60) 45%,
        rgba(233, 240, 234, .74) 100%);
  }
  .value-props { padding: 36px 28px; }
  .band-photo .inner { padding: 64px 24px; }
}

@media (max-width: 560px) {
  .value-props .cols { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- responsive: the three homepage sections ---------- */

@media (max-width: 760px) {
  /* Height follows the content here (the clamp is only a floor) — the hero copy wraps
     past 74vh on a phone, and a fixed height would let the statement section slide up
     over the buttons. Restated rather than left to .hero-photo's min-height, which
     height would otherwise win over. */
  .hero-pinned { height: auto; min-height: clamp(400px, 74vh, 640px); }
  .hero-pinned .hero { padding: 32px 8px; }
  .hero-intro { flex-direction: column; gap: 22px; text-align: center; }
  .hero-portrait { width: 175px; height: 238px; border-radius: 88px 88px 10px 10px; }
  .hero .h1-sub { margin-top: 12px; }
  .hero .hero-note { font-size: 16px; margin-top: 1.9em; }
  .statement { min-height: clamp(400px, 70vh, 640px); }
  .statement .inner { padding-block: 52px; }
  .statement-eyebrow { margin-top: 26px; }
  .learn-more { min-height: clamp(280px, 44vh, 400px); }
  /* Full-width stacked buttons — bigger tap targets than a wrapped row. */
  .lm-buttons { flex-direction: column; align-items: stretch; gap: 14px; }
  .lm-invites { grid-template-columns: 1fr; gap: 36px; }
  .lm-invite .btn { align-self: stretch; text-align: center; }
}