/* ---- 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); }

/* ---- 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);
}

.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;
}

/* --- 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);
}

.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.

   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 { 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);
}