/* ==========================================================================
   Kat Lech Psychotherapy — CBT & EMDR
   Design tokens first, then base, layout, components, sections, utilities.
   Every brand value lives in :root — change it there and it changes site-wide.
   ========================================================================== */

:root {
  /* Colour — pastel green and blue grounds over a deep slate-teal ink.
     No pink anywhere. Colour sits in the backgrounds; text is never tinted.
     --accent is decorative only and fails contrast for text. */
  --ground:      #f8faf9;
  --surface:     #ffffff;
  --sage:        #e3ede5;
  --sky:         #e0e9f0;
  --accent:      #9cb9a6;
  --ink:         #2d3a3a;
  --ink-muted:   #54615e;
  --rule:        #dde6e0;
  --error:       #9a2f2a;
  --ink-on-dark: #f2f6f3;
  --muted-on-dark: #b9c5c0;

  /* Type */
  --font-display: "Literata", "Iowan Old Style", Georgia, serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* A true modular scale: every step is the one below it x1.25, at both ends
     of the fluid range, so the hierarchy holds its proportions at any width.
     The old sizes were hand-tuned and their ratios ran from 1.21 to 1.71,
     shifting as the window resized. Everything is smaller now — the display
     size drops from 70px to 41px — because a long, quiet headline does not
     need to shout to be first.
     --step-small sits deliberately off the scale, at a 14px legibility
     floor for navigation and labels. */
  --step-display: clamp(2.07rem, 1.87rem + 0.90vw, 2.59rem);
  --step-h2:      clamp(1.73rem, 1.60rem + 0.60vw, 2.075rem);
  --step-h3:      clamp(1.44rem, 1.35rem + 0.38vw, 1.66rem);
  --step-lead:    clamp(1.20rem, 1.15rem + 0.23vw, 1.33rem);
  --step-body:    clamp(1rem, 0.98rem + 0.11vw, 1.0625rem);
  --step-small:   0.875rem;

  /* Spacing — the same 1.5 ratio, opened up by about a fifth. The type got
     smaller without the space around it changing, so the page had gone tight
     relative to what sits in it. Section rhythm goes 90px to 112px. */
  --space-2xs: 0.5rem;
  --space-xs:  0.875rem;
  --space-s:   1.375rem;
  --space-m:   2rem;
  --space-l:   3rem;
  --space-xl:  4.5rem;
  --space-2xl: 7rem;
  --space-3xl: 10rem;

  /* Height of the sticky masthead plus a little breathing room. */
  --header-height: 9.5rem;

  --measure: 62ch;
  --measure-tight: 48ch;
  --shell: 74rem;
  --shell-narrow: 46rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The masthead is sticky, so anchored targets and keyboard focus must be
     scrolled clear of it — WCAG 2.2 AA, Focus Not Obscured (Minimum). */
  scroll-padding-top: var(--header-height);

  /* iOS enlarges text when a phone is turned to landscape unless stopped. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.22;
  text-wrap: balance;
  margin: 0;
}

/* Negative tracking only where the type is large enough to need it. */
h1, h2 { letter-spacing: -0.015em; }

h1 { font-size: var(--step-display); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); line-height: 1.3; }

p { margin: 0 0 var(--space-s); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

ul, ol { margin: 0; padding: 0; }

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

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  background: var(--ink);
  color: var(--ink-on-dark);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.shell-narrow {
  width: min(100% - 2.5rem, var(--shell-narrow));
  margin-inline: auto;
}

.section { padding-block: var(--space-2xl); }
.section-tight { padding-block: var(--space-xl); }

.band-sage { background: var(--sage); }
.band-sky { background: var(--sky); }
.band-ink { background: var(--ink); color: var(--ink-on-dark); }
.band-ink h2, .band-ink h3 { color: var(--ink-on-dark); }

/* The line under a heading. Same typeface as the headings so subheads read
   as one system across every page. */
.lead {
  font-family: var(--font-display);
  font-size: var(--step-lead);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: var(--measure-tight);
}

.band-ink .lead { color: var(--muted-on-dark); }

.prose > * + * { margin-top: var(--space-s); }
/* One rule for the gap under a heading, rather than a value per section.
   It has to be clearly larger than the gap between two paragraphs, or the
   heading reads as part of the block above it instead of introducing what
   follows. Cards set their own tighter values below. */
h1 + *,
h2 + *,
h3 + * { margin-top: var(--space-m); }

/* Running text gets more, since the heading is carrying more beneath it. */
.prose > h2 + *,
.prose > h3 + * { margin-top: var(--space-l); }

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

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.95em 1.9em;
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.btn-primary {
  background: var(--ink);
  color: var(--ink-on-dark);
}
.btn-primary:hover { background: #3f5150; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--ink-on-dark); }

.btn-on-dark {
  background: var(--ink-on-dark);
  color: var(--ink);
  border-color: var(--ink-on-dark);
}
.btn-on-dark:hover { background: transparent; color: var(--ink-on-dark); }

.link-underline {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease);
}
.link-underline:hover { border-color: currentColor; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

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

.topstrip {
  height: 10px;
  background: var(--accent);
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}

/* Logo above the navigation, both centred. */
.masthead-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-s);
}

.wordmark {
  display: block;
  line-height: 0;
}

/* The lockup stacks the name over the strapline, so it needs more height
   than the single-line version it replaced. */
.wordmark img {
  height: clamp(34px, 5vw, 46px);
  width: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--rule);
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: var(--step-small);
  color: var(--ink);
  cursor: pointer;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-m);
  width: 100%;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-m);
  list-style: none;
}

.nav-list a {
  text-decoration: none;
  font-size: var(--step-small);
  letter-spacing: 0.02em;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.nav-list a:hover,
.nav-list a[aria-current="page"] { border-color: var(--accent); }

/* Stacked and centred, the masthead took 146px — a quarter of a small phone
   screen, and it is sticky, so that quarter never comes back. Below the
   breakpoint the logo sits beside the menu button instead. */
@media (max-width: 62rem) {
  :root { --header-height: 5rem; }

  .masthead-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-xs);
  }

  .wordmark img { height: 32px; }

  .nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-s) 1.25rem var(--space-m);
  }
  .nav[data-open="true"] { display: flex; }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-list a {
    display: block;
    padding-block: var(--space-s);
    border-bottom: 1px solid var(--rule);
  }
  .nav .btn { margin-top: var(--space-s); text-align: center; }
}

@media (min-width: 62.0625rem) {
  .nav-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   Hero — typography led. The opening question is the strongest asset here.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--space-2xl) var(--space-3xl);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: var(--space-2xl);
  }
}

.hero h1 {
  max-width: 18ch;
  }

.hero-sub {
  margin-top: var(--space-m);
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 44ch;
}

.hero-affirm {
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-h3);
  line-height: 1.35;
  max-width: 26ch;
}

.hero-next { margin-top: var(--space-l); }


.hero-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  /* Matches the band immediately below, so the curve reads as that section
     rising rather than as a stripe of its own. */
  fill: var(--sage);
}

/* Image placeholders — sized so real photographs drop straight in. */
.frame {
  position: relative;
  background: var(--sage);
  border: 1px solid var(--rule);
}

.frame::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-xs);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.frame-portrait { aspect-ratio: 4 / 5; }
.frame-wide { aspect-ratio: 3 / 2; }

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A photograph at its own proportions — no crop, no fixed ratio. The width
   and height attributes on the img reserve the space so nothing shifts as
   it loads. */
.photo {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--sage);
}

.photo img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

.intro { background: var(--sage); }

.intro-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 60rem) {
  .intro-grid {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* The heading here is a column of its own, not a heading sitting above the
   text, so the general gap under a heading would push the second column down
   the page instead of adding space beneath it. */
.intro-grid > h2 + * { margin-top: 0; }

/* --------------------------------------------------------------------------
   Specialisms — alternating bands, not a card grid. Heavy subject matter
   reads calmer with full-width room around it.
   -------------------------------------------------------------------------- */

.specialism { padding-block: var(--space-xl); }

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

.specialism-grid {
  display: grid;
  gap: var(--space-m);
  align-items: start;
}

@media (min-width: 60rem) {
  .specialism-grid {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
    gap: var(--space-2xl);
  }
}

/* One step below the section heading above them. They were both set at the
   h2 size, so "Trauma" and "What I can help with" carried equal weight. */
.specialism h3 {
  font-size: var(--step-h3);
  text-wrap: balance;
}

/* The opening line of each specialism carries the weight — it is the
   sentence someone recognises themselves in. */
.specialism .prose > p:first-child {
  font-size: var(--step-lead);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Approaches — a definition list with hairlines. Not a sequence, so no
   numbered markers.
   -------------------------------------------------------------------------- */

.approach-list {
  list-style: none;
  margin-top: var(--space-l);
  border-top: 1px solid var(--rule);
}

.approach-item {
  display: grid;
  gap: var(--space-2xs) var(--space-l);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .approach-item {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
    align-items: baseline;
  }
}

.approach-item h3 { font-size: var(--step-h3); }
.approach-item p { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Why work with me
   -------------------------------------------------------------------------- */

.why-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 60rem) {
  .why-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.credential-list {
  list-style: none;
  display: grid;
  gap: var(--space-s);
}

.credential-list li {
  padding-left: var(--space-m);
  position: relative;
  color: var(--muted-on-dark);
}

.credential-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 1px;
  background: var(--accent);
}

.credential-list strong {
  display: block;
  color: var(--ink-on-dark);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Insurance
   -------------------------------------------------------------------------- */

.insurers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block: var(--space-l);
}

.insurers li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-width: 9.5rem;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--rule);
}

/* One slot per insurer so three logos of very different proportions read as
   a set. AXA is more than twice as wide as it is tall; WPA is nearly square. */
.insurers img {
  height: 40px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
}

.insurers span {
  font-size: var(--step-small);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.closing { text-align: center; }
.closing p { margin-inline: auto; }

/* Short, centred blocks. The general heading gap is sized for a column of
   running text and looks like a hole under two centred lines, so these take
   the paragraph gap instead. */
.closing h2 + * { margin-top: var(--space-s); }
.closing-next { margin-top: var(--space-l); }

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

.site-footer {
  background: var(--ink);
  border-top: 3px solid var(--accent);
  color: var(--muted-on-dark);
  padding-block: var(--space-xl) var(--space-l);
  font-size: var(--step-small);
}

.footer-grid {
  display: grid;
  gap: var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid rgba(247, 242, 244, 0.18);
}

@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.site-footer h2 {
  font-size: 1.1rem;
  color: var(--ink-on-dark);
  margin-bottom: var(--space-s);
}

/* Small type in short columns — the general heading gap is too much here. */
.site-footer h2 + * { margin-top: 0; }

.footer-wordmark {
  display: block;
  margin-bottom: var(--space-s);
}

.footer-wordmark img { height: 40px; width: auto; }

.site-footer a { color: var(--ink-on-dark); }

.site-footer ul { list-style: none; display: grid; gap: var(--space-2xs); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  padding-top: var(--space-m);
}

/* --------------------------------------------------------------------------
   Inner page header
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: var(--space-xl) var(--space-l);
  border-bottom: 1px solid var(--rule);
}

.page-head h1 { max-width: 20ch; }

.page-head .lead { margin-top: var(--space-m); }

.specialism h3 + * { margin-top: var(--space-s); }

/* --------------------------------------------------------------------------
   Therapy sections — one per approach, anchored for direct linking
   -------------------------------------------------------------------------- */

.therapy { padding-block: var(--space-2xl); scroll-margin-top: 6rem; }

/* Where two sections share the same ground, a rule does the separating that
   a change of band colour does elsewhere. */
.section-divided { border-bottom: 1px solid var(--rule); }

.therapy-head { max-width: var(--measure); margin-bottom: var(--space-l); }

.therapy-head .kicker {
  font-family: var(--font-display);
  font-size: var(--step-lead);
  line-height: 1.45;
  color: var(--ink-muted);
  margin-top: var(--space-2xs);
}

/* Steps — the one numbered component on the site. The content really is a
   sequence, so the numeral does work rather than decoration: it tells you
   how many stages there are and where you are in them.

   One definition serves every use: the therapy pages on plain ground, the
   EMDR section on the blue band, the ADHD section on the dark band, and the
   insurance process. Only the colours change between them. */
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

/* One per row. In two columns a three-step sequence left an empty cell, and
   a sequence reads better straight down than in a Z. */

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-xs) var(--space-s);
  align-content: start;
  padding: var(--space-s);
  background: var(--surface);
  border: 1px solid var(--rule);
}

/* The numeral is the only circle on the site. It earns the shape by being a
   counter rather than a container. */
.step::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.step h4 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: var(--step-h3);
}

.step p {
  grid-column: 1 / -1;
  margin-bottom: 0;
  color: var(--ink-muted);
  max-width: var(--measure);
}

@media (min-width: 40rem) {
  .step { padding: var(--space-m); }
  .step p { grid-column: 2; }
}

.step p + p { margin-top: var(--space-xs); }

/* On the blue band a white card would be the only pure white on the page,
   so it takes the page ground instead. */
.band-sky .step { background: var(--ground); border-color: #cfdce6; }

.band-ink .step {
  background: rgba(242, 246, 243, 0.07);
  border-color: rgba(242, 246, 243, 0.2);
}

.band-ink .step h4 { color: var(--ink-on-dark); }
.band-ink .step p { color: var(--muted-on-dark); }
.band-ink .step::before { background: var(--ink-on-dark); color: var(--ink); }

/* Tag lists — "can be helpful for" groupings */
.taglist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin-top: var(--space-m);
}

.taglist li {
  padding: 0.4em 0.95em;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: var(--step-small);
}

.band-ink .taglist li {
  background: transparent;
  border-color: rgba(247, 242, 244, 0.28);
  color: var(--ink-on-dark);
}

.band-sage .taglist li,
.band-sky .taglist li { background: var(--ground); }

.tag-heading {
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: 500;
  margin-top: var(--space-l);
}

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

.quote-grid {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

@media (min-width: 52rem) {
  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.quote {
  margin: 0;
  padding: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--rule);
}

.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-lead);
  line-height: 1.5;
}

.quote figcaption { font-weight: 500; color: var(--ink); }

/* Masonry-ish columns so quotes of very different lengths don't leave one
   column short. */
@media (min-width: 52rem) {
  .quote-grid {
    display: block;
    columns: 2;
    column-gap: var(--space-l);
  }
  .quote {
    break-inside: avoid;
    margin-bottom: var(--space-l);
  }
}

.quote figcaption {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: var(--step-small);
  color: var(--ink-muted);
}

.notice {
  padding: var(--space-m);
  border: 1px dashed var(--accent);
  background: var(--surface);
  font-size: var(--step-small);
  color: var(--ink-muted);
  margin-top: var(--space-l);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 58rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.field { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-m); }

.field label { font-size: var(--step-small); font-weight: 500; }

.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: var(--step-body);
  padding: 0.75em 0.9em;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink);
  width: 100%;
}

.field textarea { min-height: 9rem; resize: vertical; }

.field-note { font-size: var(--step-small); color: var(--ink-muted); }

.field .required { color: var(--error); font-weight: 500; }

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline-offset: 1px; }

.field-error {
  font-size: var(--step-small);
  color: var(--error);
  font-weight: 500;
}

[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }

.error-summary {
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  border: 2px solid var(--error);
  background: var(--surface);
}

.error-summary h2 {
  font-size: var(--step-h3);
  margin-bottom: var(--space-xs);
}

.error-summary ul { display: grid; gap: var(--space-2xs); padding-left: var(--space-s); }
.error-summary li { list-style: disc; }
.error-summary a { color: var(--error); }

.detail-list {
  list-style: none;
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.detail-list dt,
.detail-list .detail-label {
  font-size: var(--step-small);
  color: var(--ink-muted);
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Motion — one entrance on load, nothing on scroll. For an audience living
   with anxiety and ADHD, a page that stays still is the kinder default.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .enter {
    opacity: 0;
    transform: translateY(10px);
    animation: enter 0.55s var(--ease) forwards;
  }
  .enter-1 { animation-delay: 0.02s; }
  .enter-2 { animation-delay: 0.09s; }
  .enter-3 { animation-delay: 0.16s; }
  .enter-4 { animation-delay: 0.23s; }
}

@keyframes enter {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Accreditation marks — supplied artwork sits on white so each one gets its
   own panel rather than being dropped onto a coloured band.
   -------------------------------------------------------------------------- */

/* Sits under the portrait. Equal columns rather than content-sized boxes,
   so the longer caption doesn't make one panel wider than the other. */
.accreditation {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-s);
}

.accreditation li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  padding: var(--space-s);
  background: var(--surface);
  border: 1px solid var(--rule);
}

.accreditation img {
  width: auto;
  height: 52px;
}

/* The EMDR mark is a wide lens shape and the BABCP one is square, so matching
   their heights would make the EMDR mark look much the larger of the two.
   Matched by area instead, with the difference paid back as margin so both
   labels still start on the same line. */
.accreditation img[src*="emdr"] {
  height: 38px;
  margin-block: 7px;
}

.accreditation span {
  font-size: var(--step-small);
  line-height: 1.35;
  color: var(--ink-muted);
  text-align: center;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Contact extras
   -------------------------------------------------------------------------- */

/* Off-screen rather than display:none — bots skip hidden fields, and this
   still has to be a real field they can fill in. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about-grid {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}

@media (min-width: 58rem) {
  /* The text is short and the photograph is square, so equal columns left the
     two halves ending at very different heights. The text column is narrower
     and both are centred on each other instead. */
  .about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: var(--space-2xl);
    align-items: center;
  }

  /* A square photograph at full column width towered over three short
     paragraphs. Capped, so the two halves are closer in height. */
  .about-grid .photo-mounted {
    max-width: 26rem;
    justify-self: end;
    /* Room for the corners the tilt throws out past the box. */
    margin-right: var(--space-xs);
  }

  .about-grid .prose { max-width: var(--measure-tight); }
}

/* A mount rather than a border: white card, photograph inset within it, and a
   shadow soft enough to read as depth rather than decoration. */
.photo-mounted {
  margin: 0;
  /* Polaroid proportions: even margin on three sides, a deep one below. */
  padding: var(--space-xs) var(--space-xs) var(--space-l);
  background: var(--surface);
  border: 1px solid var(--rule);
  transform: rotate(-1.75deg);
  box-shadow:
    0 2px 3px rgba(45, 58, 58, 0.06),
    0 22px 45px -26px rgba(45, 58, 58, 0.5);
}

.photo-mounted img { display: block; }

@media (min-width: 58rem) {
  .photo-mounted { padding: var(--space-s) var(--space-s) var(--space-xl); }
}

/* Quiet note under the testimonials — present for anyone who looks for it,
   without competing with the quotes themselves. */
.disclaimer {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: var(--step-small);
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   Qualifications panel
   -------------------------------------------------------------------------- */

.quals {
  display: grid;
  gap: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--space-l);
}

@media (min-width: 58rem) {
  .quals {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-2xl);
    padding: var(--space-l) var(--space-xl);
  }
}

.qual-group h3 {
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--accent);
}

/* The label is a rule-topped heading; the list belongs tight beneath it. */
.qual-group h3 + * { margin-top: var(--space-s); }

.qual-list {
  list-style: none;
  display: grid;
}

.qual-list li {
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule);
  max-width: var(--measure);
}

.qual-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* --------------------------------------------------------------------------
   Target size
   -------------------------------------------------------------------------- */

/* WCAG 2.2 AA, Target Size (Minimum): a link that sits on its own — in the
   navigation, in the footer, or alone in a paragraph — needs a 24px target.
   Links inside a sentence are exempt and are left alone. The hit area is
   grown with a pseudo-element rather than with padding, so the underline
   stays tight to the type. */
.nav-list a,
.site-footer a,
p > a.link-underline:only-child {
  position: relative;
}

.nav-list a::after,
.site-footer a::after,
p > a.link-underline:only-child::after {
  content: "";
  position: absolute;
  inset: -0.45rem -0.3rem;
}

/* The footer links stack, so they also need room between them or the enlarged
   targets would overlap each other. */
.site-footer li + li { margin-top: var(--space-xs); }

/* The mobile menu already has full-width rows; no pseudo-element needed. */
@media (max-width: 62rem) {
  .nav-list a::after { content: none; }
}

/* --------------------------------------------------------------------------
   Photographs on small screens
   -------------------------------------------------------------------------- */

/* Once the two-column layouts stack, both photographs ran the full width of
   the screen and dominated the page. Halved and centred, so they read as a
   picture beside the writing rather than as the subject of it. */

@media (max-width: 59.9375rem) {
  .hero .photo {
    max-width: 50%;
    margin-inline: auto;
  }
}

@media (max-width: 57.9375rem) {
  .about-grid .photo-mounted {
    max-width: 50%;
    margin-inline: auto;
  }
}