/* ---- notfound.css ---- */
/* ===========================================================================
   The /404 and /401 stubs.

   This was pages.css, and carried /about-us, /contact, /referral, /patients,
   /counselling-psychotherapy and /volunteers as well. Those six now render
   Webflow's own markup and its own stylesheet (ADR-0004), and do not load
   this one — so their hero, split, enquiry-form, list and panel rules matched
   nothing and have gone. The two stubs are all that is left, and are the
   whole of what this file is now: a capped prose measure and the row of
   links under it.
   Tokens only — no new palette, no new type scale.
   =========================================================================== */

/* --- prose-measure band ---------------------------------------------------
   For a band that is one heading and one paragraph. `.lede` already caps
   itself at 60ch; this caps the heading with it so the two share an edge. */
.page-measure { max-width: 46rem; }
.page-measure__lede { margin-top: 1.2rem; max-width: none; }
.page-measure .btns { margin-top: 2rem; }

/* --- the links out --------------------------------------------------------
   A dead end should still offer somewhere to go, so both stubs end in a row
   of pill links to the pages a lost reader most likely wanted. */
.notfound__btns { margin: clamp(1.8rem, 1rem + 2vw, 2.4rem) 0 0; }
.notfound__heading {
  font-size: var(--step-1);
  margin: clamp(2.4rem, 1.5rem + 3vw, 3.4rem) 0 1.2rem;
}
.notfound__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.notfound__links a {
  display: inline-flex;
  align-items: center;
  padding: .6em 1.15em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
  color: var(--green-deep);
  white-space: nowrap;
}
.notfound__links a:hover { background: var(--ground); }

/* ---- privacy.css ---- */
/* ===========================================================================
   /privacy-policy/ — the privacy policy (ADR-0020).

   One area, one file (README.md next to this one); every rule is scoped
   under .pp, and the print sheet under body.page-privacy (set by the page's
   data file), because areas.css is one stylesheet on every hand-written
   page and a bare .site-header rule in @media print would reach them all.
   Tokens only. The brief's floor for this audience: body text at
   16px or more (--step-0 starts at 1rem), the site's contrast (ink on white
   or on --ground, --muted at 5.99:1, --green-deep links), H1 → H2 and no
   other heading level, no text in images, no motion.

   Three things the layout depends on:

   - The hero's top padding starts with the funding belt's height, as
     testimonials.css does: funding-belt.css fixes .r-belt 40px tall under
     the header with no body offset.
   - Each section heading carries a scroll margin of the belt's height,
     so a jump from the menu or a consent form's deep link lands with the
     heading in view, not under the chrome. site.css's scroll-padding-top on
     html already clears the header, and the two add up, so the margin here
     is the belt only — header plus belt again would land the heading a
     hundred pixels low.
   - :target marks the heading a reader jumped to. It is the one piece of
     feedback a fragment link gives, and it needs no script.
   =========================================================================== */

/* --- hero: H1, the introduction ------------------------------------------ */

.pp-hero {
  background: var(--ground);
  padding-block: calc(40px + clamp(1.5rem, 1rem + 2vw, 2.5rem)) clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.pp-title { font-size: var(--step-3); }
.pp-intro {
  max-width: 70ch;
  margin-top: 1.25rem;
  font-size: var(--step-0);
  line-height: 1.65;
}
.pp-intro p { margin: 0 0 1em; }
.pp-intro p:last-child { margin-bottom: 0; }
.pp-intro strong { color: var(--ink-strong); }

/* --- body: the menu beside the sections from 1000px, above them below ---- */

.pp-body { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3rem) var(--section-y); }

.pp-layout {
  display: grid;
  gap: var(--gap);
  align-items: start;
}
@media (min-width: 1000px) {
  .pp-layout {
    grid-template-columns: 17rem minmax(0, 72ch);
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .pp-toc {
    position: sticky;
    top: calc(var(--header-h) + 40px + 1rem);
    max-height: calc(100vh - var(--header-h) - 40px - 2rem);
    overflow: auto;
  }
}

/* --- the jump menu ------------------------------------------------------- */

.pp-toc {
  background: var(--mint-pale);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.pp-toc__heading {
  margin: 0 0 .8rem;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-text);
}
.pp-toc__list {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: .5rem;
  font-size: var(--step-0);
  line-height: 1.4;
}
.pp-toc__list li::marker { color: var(--green-text); font-weight: 700; }
.pp-toc__list a {
  color: var(--ink-strong);
  text-decoration: none;
  text-underline-offset: .18em;
}
.pp-toc__list a:hover,
.pp-toc__list a:focus-visible { color: var(--green-text); text-decoration: underline; }
/* site.css's mint ring is 1.5:1 on the mint panel; the ink's green is 4.8:1. */
.pp-toc__list a:focus-visible { outline-color: var(--green-text); }

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

.pp-content {
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-wrap: break-word;
}
.pp-content h2 {
  font-size: var(--step-2);
  margin: 2.2em 0 .6em;
  scroll-margin-top: calc(40px + 1rem); /* the belt; html's scroll-padding-top adds the header */
}
.pp-content > h2:first-child { margin-top: 0; }
/* Where the reader landed: a mint rule in the margin, so the mark does not
   move the text. Cleared by the next jump, since only one element is :target. */
.pp-content h2:target {
  border-left: 4px solid var(--mint);
  padding-left: .5em;
  margin-left: calc(-.5em - 4px);
}
/* On a phone the outset would be the whole 16px gutter and the bar would
   touch the bezel; a smaller one keeps a few pixels of margin. */
@media (max-width: 479px) {
  .pp-content h2:target {
    padding-left: .3em;
    margin-left: calc(-.3em - 4px);
  }
}
.pp-content p { margin: 0 0 1.2em; }
.pp-content a { color: var(--green-deep); text-underline-offset: .18em; }
.pp-content a:hover { color: var(--green-text); }
.pp-content strong { color: var(--ink-strong); font-weight: 700; }
.pp-content ul,
.pp-content ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.pp-content li { margin-bottom: .5em; }
.pp-content li::marker { color: var(--green-text); }
.pp-content hr { margin: 1.25em 0 0; border: 0; border-top: 1px solid var(--line); }

.pp-top { margin: 1.5em 0 0; font-size: var(--step--1); }
.pp-top a { color: var(--muted); text-underline-offset: .18em; }
.pp-top a:hover { color: var(--green-text); }

.pp-updated {
  margin: 2.5em 0 0;
  padding-top: 1.25em;
  border-top: 1px solid var(--line);
  color: var(--ink-strong);
}

/* --- print: what the compliance binder's PDF snapshot shows --------------- */
/* tools/privacy-snapshot.mjs prints the built page headlessly. The chrome,
   the belt (position: fixed, so it would repeat on every sheet), the menu
   and the "Back to top" links are furniture; the policy, its date and its
   address go on paper, with the page's own URL above the title.
   Every selector is under .page-privacy or .pp: this sheet is for this page,
   and the other hand-written pages keep printing their header and footer. */
@media print {
  .page-privacy .site-header,
  .page-privacy .site-footer,
  .page-privacy .skip-link,
  .page-privacy .r-belt,
  .pp-toc,
  .pp-top { display: none !important; }
  .pp-hero { background: none; padding-top: 0; }
  .pp-hero .wrap::before {
    content: "www.allbrainsclinic.com/privacy-policy/";
    display: block;
    margin-bottom: .75em;
    font-size: 12px;
    color: var(--muted);
  }
  .pp-layout { display: block; }
  .pp-content h2 { break-after: avoid; }
  .pp-content a { color: inherit; }
  .pp-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: var(--muted); }
}

/* ---- referral-form.css ---- */
/* Referral form — /referral/form/ and /referral-sent/.
 *
 * site.css carries no form-control styling at all: the eight enquiry forms are
 * ported Webflow markup and are dressed entirely by webflow.css. This is the
 * first hand-authored form on the site, so the controls have to be built here.
 *
 * Everything is scoped under .rform on purpose. A bare `input { }` rule in an
 * area stylesheet would be inert on the ported pages (they do not link
 * areas.css — see the README next to this file) but would land on any future
 * hand-authored page whether it wanted it or not. Scoping keeps the blast
 * radius to this form until there is a second one to generalise from.
 *
 * Tokens only, per the README — no new palette, no new type scale.
 */

.rform {
  max-width: 46rem;
}

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

.rform__section {
  border: 0;
  margin: 0 0 var(--gap);
  padding: 0 0 var(--gap);
  border-bottom: 1px solid var(--line);
}
.rform__section:last-of-type { border-bottom: 0; }

.rform__legend {
  padding: 0;
  margin: 0 0 .35rem;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--green-text);
}

.rform__note {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: var(--step--1);
  max-width: 52ch;
}

/* --- fields -------------------------------------------------------------- */

.rform__row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: 1rem;
}
.rform__row--single { grid-template-columns: 1fr; }

.rform__field { display: flex; flex-direction: column; gap: .35rem; }

.rform__label {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-strong);
}

/* The asterisk is decoration; `required` on the control is what actually says
   so, and it is what a screen reader announces. Hidden from the accessibility
   tree so the word is not read twice. */
.rform__req { color: var(--green-text); }

.rform__hint {
  font-size: .78rem;
  color: var(--muted);
}

/* A label that heads a block rather than one control. */
.rform__label--block { display: block; margin-bottom: .5rem; }

.rform input[type="text"],
.rform input[type="email"],
.rform input[type="tel"],
.rform input[type="date"],
.rform select,
.rform textarea {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink-strong);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Without this an <input> in a grid cell refuses to shrink below its
     intrinsic size and the row overflows on a phone. */
  min-width: 0;
}

.rform textarea { min-height: 6.5rem; resize: vertical; }

.rform input::placeholder,
.rform textarea::placeholder { color: var(--muted); opacity: 1; }

.rform select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23476685'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 1.15rem;
  padding-right: 2.2rem;
}

/* --- the medication table ------------------------------------------------ */

/* Seven rows of three inputs, headed like the table on the printable form.
   Each row is its own grid so the header's columns and the inputs' line up
   without a <table>, which would fight the control styling above. */
.rform__medtable {
  display: grid;
  gap: .4rem;
  margin-top: .35rem;
}
.rform__medhead,
.rform__medrow {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr 1fr;
  gap: .5rem;
  min-width: 0;
}
.rform__medhead {
  padding: .45rem .8rem;
  background: var(--ink-strong);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 700;
}
.rform__medrow input[type="text"] { padding: .55rem .7rem; }
/* The row number only exists for the phone layout below. */
.rform__medno { display: none; }

/* Below about 40rem the three columns no longer fit. Each row becomes a
   small two-column card: its number, the medication across the full width,
   then dosage and date side by side. Seven of them is a long way to scroll,
   so the inputs are tighter than elsewhere on the form and the card says
   which row it is. The header row, which only names the columns, is replaced
   by the inputs' own placeholders. */
@media (max-width: 40rem) {
  .rform__medhead { display: none; }
  .rform__medrow {
    grid-template-columns: 1fr 1fr;
    gap: .3rem .4rem;
    padding: .45rem .5rem .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .rform__medno {
    display: block;
    grid-column: 1 / -1;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .rform__medrow input[name^="Medication"] { grid-column: 1 / -1; }
  .rform__medrow input[type="text"] { padding: .45rem .55rem; }
}

/* --- choices ------------------------------------------------------------- */

.rform__choices { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.rform__choices--stack { flex-direction: column; gap: .55rem; }

.rform__choice {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: var(--step-0);
  line-height: 1.4;
  cursor: pointer;
}

.rform__choice input {
  /* 1rem boxes align with the cap height of the label beside them rather than
     its line box, which is why this is a margin and not align-items: center. */
  margin: .2rem 0 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--green-deep);
  flex: none;
}

/* --- files --------------------------------------------------------------- */

.rform__file {
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.rform__file input { font-size: var(--step--1); width: 100%; }

/* --- the acknowledgement ------------------------------------------------- */

.rform__attest {
  padding: 1.1rem 1.2rem;
  background: var(--mint-pale);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.rform__attest p {
  margin: 0 0 .9rem;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-strong);
}

/* --- conditional reveals ------------------------------------------------- */

/* Hidden with [hidden] so the no-JavaScript path shows every detail box rather
   than hiding a required field the reader cannot reach. The script adds the
   attribute on load; without it, nothing is hidden. */
.rform [hidden] { display: none; }

/* --- outcome panels ------------------------------------------------------ */

.rform__panel {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: var(--step-0);
}
.rform__panel--error {
  background: #fdece9;
  border: 1px solid #e6a79c;
  color: #7c2d1c;
}
.rform__panel--ok {
  background: var(--mint-pale);
  border: 1px solid var(--mint);
  color: var(--mint-ink);
}
/* Parked and jotform modes (lib/referral-link.js): the "not available yet,
   please fax" or "the online form is at the Jotform"
   notice shown in place of the form. Informational, so neither the error red
   nor the success mint: the site's pale sky over ink. */
.rform__panel--notice {
  background: #e8f1fa;
  border: 1px solid var(--navy-700);
  color: var(--ink-strong);
}
.rform__panel--notice p { margin: 0; }
.rform__panel--notice a { color: var(--navy-700); font-weight: 600; }

/* The consent sentence above the button (ADR-0020): a note, but one that
   must not be missed, so it takes the ink and the body size — the one legal
   sentence in the form is not its smallest text. */
.rform__consent {
  margin: 1.25rem 0 0;
  max-width: 52ch;
  color: var(--ink);
  font-size: var(--step-0);
}
.rform__consent a { color: var(--green-deep); text-underline-offset: .18em; }

.rform__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.rform__actions .btn[disabled] { opacity: .6; cursor: progress; }

/* --- the sent page ------------------------------------------------------- */

.referral-sent__ref {
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--mint-pale);
  color: var(--mint-ink);
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---- search.css ---- */
/* Search: the header affordance and the /search results page.

   The header rules are here rather than in site.css because ticket 10 owns the
   search affordance and site.css is shared ground — the same reason every other
   area has its own file. They are the only rules in here that touch the chrome;
   everything below `--- /search ---` belongs to one page.
   Areas load after site.css, so the two `order` overrides below win. */

/* --- header affordance ---------------------------------------------------- */

/* Sits outside .nav so it survives the mobile menu being collapsed. The two
   `order` values put it where the live site puts it: at the right-hand end of
   the row on a wide screen, and just before the menu button on a narrow one. */
.nav-search {
  order: 3;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6em;
  border-radius: 10px;
  color: #dbe8f6;
  text-decoration: none;
}
.nav-search svg { width: 22px; height: 22px; }
.nav-search:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-search[aria-current="page"] { color: var(--mint); }
.nav { order: 2; }
.nav-toggle { order: 4; }

@media (max-width: 1200px) {
  /* .nav is position:fixed at this width, so it leaves the row and the icon can
     take the auto margin that used to push the menu button right. */
  .nav-search { order: 2; margin-left: auto; padding: .45em; }
  .nav-search svg { width: 21px; height: 21px; }
  .nav-toggle { order: 3; margin-left: 0; flex: none; }

  /* The header row now carries one control more than it was laid out for, and at
     390px there was no room for it: the menu button was being squeezed from 42px
     wide to 17px. The logo is the only thing in the row that can give ground, so
     it is allowed to scale down — which also fixes the overflow the row already
     had on a 320px screen. Measured at 390, 375 and 360. */
  .site-header .wrap { gap: .5rem; }
  .brand { flex: 0 1 auto; min-width: 0; }
  /* Keeps site.css's height: 42px — object-fit is what stops the wordmark being
     stretched when max-width: 100% narrows the box it sits in. */
  .brand img { object-fit: contain; object-position: left center; }
}

/* --- /search -------------------------------------------------------------- */

/* A results list is read one line at a time, so it gets a narrower column than
   the 1180px the rest of the site lays out in. */
.search-page { max-width: calc(820px + var(--gap) * 2); }

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.search-form__input {
  flex: 1 1 17rem;
  min-width: 0;
  font: inherit;
  color: var(--ink-strong);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .95em 1.4em;
}
.search-form__input::placeholder { color: var(--muted); }
.search-form__submit { flex: none; }

.search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}
.search-chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: .45em 1em;
  border-radius: 999px;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.search-chip:hover { border-color: var(--green); color: var(--green-deep); }
.search-chip[aria-pressed="true"] {
  background: var(--mint-pale);
  border-color: var(--green);
  color: var(--mint-ink);
}
.search-chip__count { color: var(--muted); font-variant-numeric: tabular-nums; }
.search-chip[aria-pressed="true"] .search-chip__count { color: var(--green-deep); }

.search-status {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: var(--step--1);
}
.search-status:empty { margin: 0; }

.search-group { margin-top: 2.6rem; }
.search-group__title {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: var(--step-1);
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--mint-pale);
}
.search-group__count {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.search-group__list { list-style: none; margin: 0; padding: 0; }
.search-group__more {
  margin-top: 1rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  background: none;
  border: 0;
  padding: .4em 0;
  cursor: pointer;
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.search-group__note {
  margin: 1rem 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}

.search-result { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.search-result__title { font-size: var(--step-0); line-height: 1.35; }
.search-result__title a { color: var(--ink-strong); text-decoration: none; }
.search-result__title a:hover { color: var(--green-deep); text-decoration: underline; }
.search-result__excerpt {
  margin: .4rem 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.search-result__excerpt mark {
  background: var(--mint-pale);
  color: var(--ink-strong);
  border-radius: 3px;
  padding: 0 .15em;
}
.search-result__subs {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0 0 0 .9rem;
  border-left: 2px solid var(--mint-pale);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: var(--step--1);
}

.search-note { margin-top: 2rem; max-width: 60ch; }
.search-note__links { margin: 0; padding-left: 1.2rem; }
.search-note__links li { margin-bottom: .35rem; }

/* ---- small-collections.css ---- */
/* ===========================================================================
   Small collections — Links and Apps, Gallery and Testimonials.

   Three collections that between them add one page type each, so they share
   one area file rather than three near-empty ones (src/css/areas/README.md:
   one file per area, and these are one area's worth of work).

   /resources, Books, Careers and Author used to live here too. Those now
   render Webflow's own markup and its own stylesheet (ADR-0004) and do not
   load this file, so their heroes, definition lists, jump nav and CTA bands
   matched nothing and have gone with them — as did the Testimonials index,
   which is why the quotation card below is styled for the "more reviews" row
   on a single review rather than for a grid of its own. (The index is
   hand-written again since ADR-0019 and has its own file, testimonials.css;
   nothing here is shared with it.)

   What is left is spacing, one two-column hero, and the three components the
   design system does not already carry: a resource card with a logo crop, a
   photograph grid and a quotation card. Tokens only — no new palette, no new
   type scale.
   =========================================================================== */

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

/* A .grid built from a <ul>: the list semantics matter (a screen reader
   announces "22 items"), the bullets and indent do not. */
ul.grid, .gallery-set__grid, .tst__services-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- a Link or App --------------------------------------------------------- */

/* A two-column hero: copy on the left, the logo on the right, stacking under
   860px. */
.link-hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}
@media (max-width: 860px) {
  .link-hero__inner { grid-template-columns: 1fr; }
}

.link-hero__back { margin-bottom: 1.2em; }
.link-hero__kind { margin: 0 0 1rem; display: flex; }
.link-hero__title { font-size: var(--step-3); }
.link-hero__lede { margin: 1.2rem 0 0; }
.link-hero__cta { margin: 2rem 0 0; }

.link-hero__media {
  width: clamp(9rem, 20vw, 13rem);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 1.2rem;
  display: grid;
  place-items: center;
}
.link-hero__media img { width: 100%; height: auto; object-fit: contain; }

.link-hero__host { margin: .9rem 0 0; font-size: var(--step--1); color: var(--muted); }
.link-hero__host strong { color: var(--ink-strong); overflow-wrap: anywhere; }

.link-hero__note {
  margin: 1.8rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--mint);
  max-width: 52ch;
  font-size: var(--step--1);
  color: var(--muted);
}

.link-more__grid { margin-top: 2.5rem; }
.link-more__foot, .tst-more__foot { margin: 2.5rem 0 0; }

/* Cards in a resource grid hold much less than an Assessment card, so they get
   less padding and their titles come down a step. */
.res-card { padding: 1.4rem; }
.res-card__title { font-size: var(--step-0); }

/* A logo is square, which does not work in the design system's 16/10 card
   crop. It sits inside the frame rather than filling it, because a cropped
   logo loses its name. */
.res-card__media--logo {
  aspect-ratio: 1;
  background: var(--surface);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.res-card__media--logo img { width: 100%; height: 100%; object-fit: contain; }

/* --- a Gallery ------------------------------------------------------------- */

.gallery-hero__copy { max-width: 46rem; }
.gallery-hero__media { margin: clamp(2rem, 1rem + 3vw, 3rem) 0 0; }
.gallery-hero__media img {
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--ground);
}

.gallery-set__heading { font-size: var(--step-2); }
.gallery-set__grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) { .gallery-set__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery-set__grid { grid-template-columns: 1fr; } }
.gallery-set__item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--ground);
}

.gallery-link__cta { margin: 0; }
.gallery-more__grid { margin-top: 2.5rem; }

/* --- Testimonials ---------------------------------------------------------- */

.tst-more__grid { margin-top: 2.5rem; align-items: start; }
/* The quotes run from 29 to 916 characters, so the cards are left at their
   natural height rather than stretched to the tallest in the row. */
.tst-grid__item { display: grid; }

.tst-card { gap: 1rem; height: 100%; }
.tst-card__rating { margin: 0; }
.tst-card__rating img, .tst__rating img, .tst-card__rating svg, .tst__rating svg { width: 78px; height: 15px; }

.tst-card__quote {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--mint);
  color: var(--ink);
  font-size: var(--step--1);
}
.tst-card__quote p { margin: 0 0 .8em; }
.tst-card__quote p:last-child { margin-bottom: 0; }

.tst-card__who, .tst__who {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.tst-card__avatar, .tst__avatar {
  border-radius: 999px;
  object-fit: cover;
  background: var(--ground);
  flex: none;
}
.tst-card__avatar { width: 44px; height: 44px; }
.tst__avatar { width: 56px; height: 56px; }
.tst-card__name, .tst__name { font-weight: 700; color: var(--ink-strong); }

.tst-card__more { margin: auto 0 0; font-size: var(--step--1); }

/* --- one Testimonial ------------------------------------------------------- */

.tst__inner { max-width: 44rem; margin-inline: auto; min-width: 0; }
.tst__back { margin-bottom: 1.2em; }
.tst__title { font-size: var(--step-2); }
.tst__rating { margin: 1.6rem 0 0; }

.tst__quote {
  margin: 2rem 0 0;
  padding-left: 1.4rem;
  border-left: 4px solid var(--mint);
  font-size: var(--step-1);
  color: var(--ink-strong);
}
/* .article-body's own top margin would double the space set above. */
.tst__quote.article-body { margin-top: 2rem; }
.tst__quote p:last-child { margin-bottom: 0; }

.tst__who { margin-top: 2rem; }
.tst__source { margin: 1.6rem 0 0; font-size: var(--step--1); }

.tst__services {
  margin-top: 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.tst__services-heading {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-text);
}
.tst__services-list {
  margin-top: .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  font-size: var(--step--1);
}

/* ---- testimonials.css ---- */
/* ===========================================================================
   /testimonials/ — the reviews index (ADR-0019).

   One area, one file (README.md next to this one). Every rule is scoped under
   .tsm so nothing here lands on another hand-authored page, and the review
   pages' own styles stay in small-collections.css.

   The brief: still, short, legible. No motion of any kind — the only
   transitions on the page are site.css's own on .btn, which this page does
   not use — so prefers-reduced-motion has nothing to switch off. Tokens
   only: the mint panel is --mint-pale, the ink is --ink / --ink-strong, the
   quiet text is --muted (4.67:1 on --mint-pale, 5.99:1 on white), links are
   --green-text (4.81:1 on --mint-pale, 6.17:1 on white). Every control is at
   least 44px tall.
   =========================================================================== */

/* --- hero: eyebrow, H1, one sentence ------------------------------------- */

/* Short on purpose: the page should reach "Show more" within about two
   screens at 1440x900, so the H1 is one step under the site's default and
   sits on one line from about 900px up. The top padding starts with the
   funding belt's height: funding-belt.css fixes .r-belt 40px tall under the
   header with no body offset, so a section's first line sits under it unless
   the section leaves the room itself (2026-10-03: the eyebrow sat 8px under
   the belt at 1440 and touched it at 375). */
.tsm-hero {
  padding-block: calc(40px + clamp(1.5rem, 1rem + 2vw, 2.5rem)) clamp(1.25rem, .75rem + 1.5vw, 1.75rem);
}
.tsm-hero__title { font-size: var(--step-3); max-width: 26ch; }
.tsm-hero__lede { margin: .8rem 0 0; }

/* --- the featured three, on a soft panel ---------------------------------- */

.tsm-featured { padding-block: clamp(.75rem, .5rem + 1vw, 1.25rem) 0; }

.tsm-panel {
  background: var(--mint-pale);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
}
.tsm-panel__heading {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-text);
  margin: 0 0 1rem;
}

.tsm-featured__list,
.tsm-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  /* Cards stretch to their row (the card is height: 100% and its attribution
     is margin-top: auto), so the footers of a row line up. */
}
.tsm-featured__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsm-featured__item { display: grid; }

/* --- the grid: 3 / 2 / 1 columns ----------------------------------------- */

.tsm-all { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3rem) var(--section-y); }

.tsm-all__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin: 0 0 1.25rem;
}
.tsm-all__heading { font-size: var(--step-2); }
.tsm-all__count {
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: .35em;
}
/* An inline link whose hit area is 44px tall without moving the text: the
   box is at least 44px with the text centred in it, and the negative margin
   gives the difference to the line box (1.6em, site.css's body line-height)
   back to the layout. (2026-10-03: a fixed .8em of padding came to 42.75px
   at 375, and an em calc to 43.97px — min-height does not round.) */
.tsm-all__write,
.tsm-card__source a,
.tsm-cta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: calc((1.6em - 44px) / 2);
  font-weight: 700;
}

.tsm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsm-grid__item { display: grid; }
/* The script hides the cards past the first nine; `display: grid` above would
   otherwise beat the attribute. */
.tsm-grid__item[hidden] { display: none; }

@media (max-width: 1023px) {
  .tsm-grid, .tsm-featured__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two columns and an odd count: the last card spans the row rather than
     sitting beside an empty cell. For the grid "last" means the last card
     that is showing — the ninth before "Show more", the nineteenth after. */
  .tsm-featured__item:last-child:nth-child(odd),
  .tsm-grid__item:nth-child(odd):not(:has(~ .tsm-grid__item:not([hidden]))) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 639px) {
  .tsm-grid, .tsm-featured__list { grid-template-columns: 1fr; }
}

/* --- one card -------------------------------------------------------------- */

.tsm-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.tsm-card--featured {
  border-color: transparent;
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 1rem + 1vw, 1.5rem);
}

.tsm-card__rating { margin: 0; display: flex; }
.tsm-card__rating svg { width: 78px; height: 15px; }

.tsm-card__quote {
  margin: 0;
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.5;
}
/* The clamp — only on a card that carries a control to undo it. The template
   prints `tsm-card--clampable` and the <details> from the same test, and the
   script removes both together where the quote turns out to fit, so "cut"
   implies "can be opened" by construction rather than by a character count
   (2026-10-03: the unconditional clamp cut four quotes with no control). A
   <blockquote> of <p>s: the clamp counts lines across the paragraphs, so a
   long review stops at six (ten on a featured card) with an ellipsis until
   its <details> is open. Six lines at the grid card's measure hold about 230
   characters at 1440 and 375 alike. */
.tsm-card--clampable .tsm-card__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
/* The featured three read larger by weight and ink rather than by size, so
   the panel stays one short band: the body size, a touch heavier, the
   strong ink, and room for ten lines before "Read more". */
.tsm-card--featured .tsm-card__quote {
  font-weight: 500;
  color: var(--ink-strong);
}
.tsm-card--featured.tsm-card--clampable .tsm-card__quote {
  -webkit-line-clamp: 10;
  line-clamp: 10;
}
.tsm-card__quote p { margin: 0 0 .7em; }
.tsm-card__quote p:last-child { margin-bottom: 0; }

/* Open: the card either matches :has() or carries the class the script
   mirrors from the <details>. */
.tsm-card:has(.tsm-card__more[open]) .tsm-card__quote,
.tsm-card.is-open .tsm-card__quote {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* The toggle is a native <summary>, so it works with no script. It has no
   body — the quote above it is what it opens — and no marker. */
.tsm-card__more { margin: -.6rem 0 -.3rem; }
.tsm-card__more[hidden] { display: none; }
.tsm-card__toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .25rem;
  margin-left: -.25rem;
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--green-text);
  text-decoration: underline;
  text-underline-offset: .18em;
  border-radius: 6px;
}
.tsm-card__toggle::-webkit-details-marker { display: none; }
.tsm-card__toggle::marker { content: ""; }
.tsm-card__more[open] .tsm-card__toggle-more { display: none; }
.tsm-card__more:not([open]) .tsm-card__toggle-less { display: none; }

.tsm-card__who {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
}
.tsm-card--featured .tsm-card__who { border-top-color: var(--mint-pale); }
.tsm-card__photo {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--ground);
  flex: none;
}
/* The image pipeline wraps the <img> in a <picture>; keep it out of layout. */
.tsm-card__who picture { display: contents; }
.tsm-card__by { min-width: 0; }
.tsm-card__name {
  margin: 0;
  font-weight: 700;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}
.tsm-card__source {
  margin: .1rem 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}
/* The link to the original sits on its own line under the source name. It
   was inline after a middot, which wrapped at the column widths of 1024 and
   640 and stranded the middot at the end of a line (2026-10-03). */
.tsm-card__orig { display: block; white-space: nowrap; }

/* --- the foot: show more, the notice, one link ----------------------------- */

.tsm-all__foot { margin: 1.5rem 0 0; display: flex; justify-content: center; }
.tsm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 48px;
  padding: .8em 1.8em;
  border-radius: 999px;
  border: 1.5px solid var(--green-deep);
  background: var(--surface);
  color: var(--green-text);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.tsm-btn:hover { background: var(--mint-pale); }
.tsm-btn[hidden] { display: none; }
.tsm-btn__count { font-weight: 600; letter-spacing: 0; text-transform: none; }

/* The clinic's one line under its reviews (ADR-0016), when it has one. */
.tsm-notice {
  margin: 2.5rem auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
}

.tsm-cta {
  margin: 2.5rem 0 0;
  text-align: center;
  color: var(--muted);
}