/* ==========================================================================
   Claremont Counselling
   styles.css
   --------------------------------------------------------------------------
   Contents
   0.  Fonts
   1.  Design tokens
   2.  Reset and base
   3.  Typography
   4.  Layout helpers
   5.  Buttons and links
   6.  Header and navigation
   7.  Hero
   8.  Sections
   9.  Cards, steps and lists
   10. Counsellor profiles
   11. Space and map
   12. Fees
   13. Contact
   14. Footer
   15. Utility pages (privacy)
   16. Motion and print
   17. Small helpers
   ========================================================================== */

/* 0. Fonts ================================================================ */

/* Self-hosted rather than loaded from Google Fonts. The CloudFront CSP is
   font-src 'self' / style-src 'self', so a third-party font stylesheet is
   blocked outright and the page silently falls back to system fonts.
   These are the variable latin-subset builds, SIL Open Font Licence 1.1;
   one file per family covers the whole weight range. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/karla.woff2") format("woff2");
}

/* 1. Design tokens ======================================================== */

:root {
  /* Brand palette, taken from the logo */
  /* Everything is drawn from the logo's own deep green, #1a3330.
     No third hue: the lift comes from value and white space, not colour. */
  --green-900: #101f1d;   /* deepest, footer */
  --green-800: #1a3330;   /* primary brand green, from the logo */
  --green-700: #26443f;
  --green-400: #6d817c;   /* muted label green */
  --green-200: #c6cfcb;
  --green-100: #e4eae7;

  --sage:      #7e9188;   /* the logo's own antialiased midtone, used for hairlines */

  --paper:     #f4f6f3;   /* page ground, a neutral biased green rather than cream */
  --paper-alt: #eaeee9;   /* alternating band */
  --white:     #ffffff;

  --ink:       #1b211f;   /* body text */
  --ink-muted: #4e5a56;

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spacing and rhythm */
  --measure: 34rem;         /* comfortable reading width */
  --wrap: 68rem;            /* page container */
  --wrap-narrow: 50rem;
  --space-section: clamp(4rem, 9vw, 7.5rem);
  --radius: 2px;

  --shadow-soft: 0 1px 2px rgba(18, 37, 34, 0.04), 0 8px 24px rgba(18, 37, 34, 0.05);
}

/* 2. Reset and base ======================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* clears the sticky header on anchor jumps */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--green-200);
  margin: 3rem 0;
}

::selection { background: var(--green-200); color: var(--green-900); }

/* Visible focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green-800);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* 3. Typography =========================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--green-900);
  letter-spacing: 0.005em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; }
h4 { font-size: 1.1rem; line-height: 1.4; }

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

.lead {
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-400);
  margin: 0 0 1rem;
  max-width: none;
}

.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--green-800);
  border-left: 2px solid var(--sage);
  padding-left: 1.5rem;
  margin: 2rem 0;
  max-width: 30rem;
}
.pullquote p { max-width: none; margin: 0; font-size: inherit; }

/* 4. Layout helpers ======================================================= */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--alt { background: var(--paper-alt); }
.section--dark {
  background: var(--green-800);
  color: var(--green-100);
}
.section--dark h2,
.section--dark h3 { color: var(--white); }
.section--dark .eyebrow { color: var(--green-200); }
.section--dark .lead { color: var(--green-100); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 52em) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-2--wide-first { grid-template-columns: 1.15fr 0.85fr; }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 42em) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* 5. Buttons and links ==================================================== */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2rem;
  border: 1px solid var(--green-800);
  border-radius: var(--radius);
  background: var(--green-800);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  background: var(--green-900);
  border-color: var(--green-900);
  color: var(--white);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--green-800);
}
.btn--ghost:hover {
  background: var(--green-800);
  color: var(--white);
}
.btn--on-dark {
  background: var(--white);
  border-color: var(--white);
  color: var(--green-900);
}
.btn--on-dark:hover {
  background: var(--green-100);
  border-color: var(--green-100);
  color: var(--green-900);
}
.btn--ghost-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}
.btn--ghost-on-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
  color: var(--white);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

/* 6. Header and navigation =============================================== */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  /* Solid, not frosted: the wordmark PNG has the paper colour baked in, so a
     translucent bar would show it as a box over whatever scrolls beneath. */
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--green-200);
  box-shadow: 0 1px 12px rgba(18, 37, 34, 0.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.25rem;
}

/* The two-line wordmark is taller but narrower than the old single-line one
   (about 133px wide against 188px), so the 75em nav breakpoint still holds. */
.site-logo { display: block; flex-shrink: 0; }
.site-logo img { height: 2.5rem; width: auto; }

/* Desktop navigation.

   Seven nowrap links plus a button need roughly 1160px, but .wrap caps at
   68rem/1088px, so at the original 60em breakpoint the bar overflowed its
   container and the "Get in touch" button was clipped off the right edge at
   every realistic viewport width. Fixed by tightening the type and gap and by
   holding the mobile menu until 75em, where the full bar genuinely fits. */
.nav {
  display: none;
  align-items: center;
  gap: clamp(0.85rem, 1.4vw, 1.35rem);
}
@media (min-width: 75em) { .nav { display: flex; } }

.nav a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav a:hover,
.nav a.is-active {
  color: var(--green-900);
  border-bottom-color: var(--sage);
}
.nav .btn {
  padding: 0.7rem 1.35rem;
  color: var(--white);
  border-bottom: 1px solid var(--green-800);
  font-size: 0.72rem;
}
.nav .btn:hover { color: var(--white); border-bottom-color: var(--green-900); }

/* Mobile menu */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 75em) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--green-900);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--green-200);
  background: var(--paper);
}
.nav-mobile.is-open { display: block; }
@media (min-width: 75em) { .nav-mobile { display: none !important; } }
.nav-mobile ul { list-style: none; margin: 0; padding: 0.5rem 0 1.5rem; }
.nav-mobile a {
  display: block;
  padding: 0.9rem 0;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green-900);
  border-bottom: 1px solid var(--green-100);
}
.nav-mobile .btn { margin-top: 1.25rem; width: 100%; color: var(--white); }

/* 7. Hero ================================================================= */

.hero {
  position: relative;
  background: var(--green-800);
  color: var(--green-100);
  padding-block: clamp(4.5rem, 12vw, 9rem);
  overflow: hidden;
}

/* Soft concentric rings, a quiet nod to the logo marks */
.hero::after {
  content: "";
  position: absolute;
  right: -12%;
  top: 50%;
  width: min(46rem, 75vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.045) 0 38%, transparent 38.5%),
    radial-gradient(circle, transparent 0 55%, rgba(255,255,255,0.05) 55.2%, transparent 55.8%),
    radial-gradient(circle, transparent 0 74%, rgba(255,255,255,0.035) 74.2%, transparent 74.8%);
  pointer-events: none;
}

/* Logo, gap and 42rem of copy, plus the .wrap padding, with nothing squeezed */
.hero__inner { position: relative; z-index: 1; max-width: 68rem; }

/* Square logo beside the copy, stacking above it on a phone */
.hero__row {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 40em) {
  .hero__row { flex-direction: column; align-items: flex-start; }
}

/* The PNG carries a 10% margin in the hero green outside its white frame, so
   the visible square is about 80% of these dimensions. */
.hero__logo {
  --hero-logo: clamp(7rem, 22vw, 18rem);
  flex-shrink: 0;
  width: var(--hero-logo);
  height: var(--hero-logo);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* Side by side, lift the logo so its white frame, not the image edge, lines up
   with the cap height of the h1: up by the PNG's 10% margin, back down by the
   ~0.22em between the h1's line box and the top of its capitals. The h1 size
   here must track the h1 rule in section 3. */
@media (min-width: 40.01em) {
  .hero__logo {
    margin-top: calc(var(--hero-logo) * -0.1 + clamp(2.4rem, 6vw, 4rem) * 0.22);
  }
}

.hero__content { min-width: 0; max-width: 42rem; }

.hero h1 { color: var(--white); margin-bottom: 0.6rem; }

.hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.3;
  color: var(--green-200);
  margin: 0 0 1.5rem;
  max-width: none;
}

/* Flex so the three phrases can wrap onto separate lines on a narrow screen.
   Each span is nowrap and the markup has no whitespace between them, so as
   plain inline content the strapline is a single unbreakable 340px run with no
   break opportunity anywhere. That clears a 390px viewport by about 11px, and
   the font-size is already pinned at its clamp minimum, so on a 360px phone it
   would overflow and widen the whole document. Wrapping costs nothing wider. */
.hero__strap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  font-style: italic;
  color: var(--green-200);
  margin-bottom: 1.75rem;
  max-width: none;
}
.hero__strap span { white-space: nowrap; }
.hero__strap em {
  font-style: normal;
  color: var(--green-400);
  padding-inline: 0.5rem;
}

/* Body paragraphs only, so .hero__sub and .hero__strap keep --green-200. */
.hero p:not([class]) { color: var(--green-100); }

/* 8. Sections ============================================================= */

.rule {
  width: 3rem;
  height: 1px;
  background: var(--sage);
  border: 0;
  margin: 0 0 1.5rem;
}
.section--dark .rule { background: var(--green-400); }

/* 9. Cards, steps and lists ============================================== */

.card {
  background: var(--white);
  border: 1px solid var(--green-100);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.section--alt .card { border-color: var(--green-200); }

.step { position: relative; }
.step__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--green-200);
  display: block;
  margin-bottom: 0.75rem;
}
.step h3 { margin-bottom: 0.5rem; }
.step p { font-size: 1rem; color: var(--ink-muted); }

.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.tag-list li {
  border: 1px solid var(--green-200);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9375rem;
  color: var(--green-800);
  background: var(--white);
}
.section--dark .tag-list li {
  border-color: rgba(255,255,255,0.28);
  background: transparent;
  color: var(--white);
}

.tick-list { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: var(--measure); }
.tick-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.7rem;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--sage);
}

/* 10. Counsellor profiles ================================================ */

.people {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 56em) { .people { grid-template-columns: repeat(2, 1fr); } }

.person__photo {
  aspect-ratio: 4 / 5;
  background: var(--green-100);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }

.person__role {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-400);
  margin: 0 0 0.75rem;
}
.person h3 { margin-bottom: 0.35rem; }
/* Bio paragraphs only, so .person__role and .person__cred keep their sizes. */
.person p:not([class]) { font-size: 1rem; }

/* Photo placeholder, shown until real images are dropped in */
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, var(--green-100) 0 10px, var(--paper-alt) 10px 20px);
  color: var(--green-400);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1rem;
}
.placeholder svg { width: 2rem; height: 2rem; opacity: 0.6; }

/* 11. Space and map ====================================================== */

.space-media {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.space-media > * { border-radius: var(--radius); overflow: hidden; }
.space-media__main { aspect-ratio: 4 / 3; }
/* Side by side, the main photo is twice the width of the two stacked ones, so
   all three 4:3 images come out the same height bar the 1rem gap. The main one
   then stretches to the stack's height and crops by those few pixels, rather
   than leaving a band of empty space beneath it. */
@media (min-width: 40em) {
  .space-media { grid-template-columns: 2fr 1fr; }
  .space-media__main { aspect-ratio: auto; }
}
.space-media__side { display: grid; gap: 1rem; grid-template-rows: 1fr 1fr; }
.space-media__side > * { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.space-media img { width: 100%; height: 100%; object-fit: cover; }

.address {
  font-style: normal;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.address strong { font-weight: 600; }

/* A card that links out to Google Maps, rather than an embedded iframe.
   The iframe is blocked by the CSP (default-src 'self'), and embedding it
   would drop Google cookies on a counselling visitor before they have
   chosen to go there. The link is the honest version of the same thing. */
.map-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.85rem;
  border: 1px solid var(--green-200);
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  background: var(--green-100);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.map-card svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--green-400);
  flex: none;
}
.map-card address {
  font-style: normal;
  line-height: 1.7;
  margin: 0;
  color: var(--ink);
}
.map-card a { font-size: 0.95rem; }

/* 12. Fees =============================================================== */

.fees {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: 2.5rem;
}
@media (min-width: 44em) { .fees { grid-template-columns: repeat(2, 1fr); } }

.fee {
  border: 1px solid var(--green-200);
  border-radius: var(--radius);
  background: var(--white);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.fee__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-400);
  margin: 0 0 0.6rem;
}
.fee__price {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 2.75rem);
  line-height: 1;
  color: var(--green-900);
  margin: 0 0 0.5rem;
}
.fee__price small {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
/* The description paragraph only. Unscoped, this outranks .fee__label and
   .fee__price — both are plain class selectors — and flattens the price to
   body size. */
.fee p:not([class]) { font-size: 0.9375rem; color: var(--ink-muted); margin: 0; }

/* 13. Contact ============================================================ */

.crisis {
  border: 1px solid var(--sage);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(126, 145, 136, 0.10);
  padding: 1.25rem 1.5rem;
  margin-top: 2.5rem;
  max-width: 34rem;
}
.crisis h3 { margin-bottom: 0.4rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-900); }
.crisis p { font-size: 0.9375rem; margin: 0; color: var(--ink); }

.contact-direct { margin-top: 2.5rem; }
.contact-direct dl { margin: 0; }
.contact-direct dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-400);
  margin-bottom: 0.25rem;
}
.contact-direct dd {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
}
.contact-direct a { text-decoration: none; border-bottom: 1px solid var(--green-200); }
.contact-direct a:hover { border-bottom-color: var(--green-800); }

/* 14. Footer ============================================================= */

.site-footer {
  background: var(--green-900);
  color: var(--green-200);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.9375rem;
}
.site-footer a { color: var(--green-100); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.22); }
.site-footer a:hover { color: var(--white); border-bottom-color: var(--white); }

.site-footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
}
@media (min-width: 46em) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.site-footer h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-400);
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }
/* A light version of the header wordmark. Its background is baked in at the
   footer's --green-900, so it must stay on that colour. */
.site-footer__logo img { height: 3.5rem; width: auto; margin-bottom: 1.25rem; }
.site-footer p { max-width: 24rem; color: var(--green-200); }

.site-footer__base {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--green-400);
}
.site-footer__base p { margin: 0; max-width: none; color: var(--green-400); }

.badges { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.badge-slot {
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-400);
}

/* A plain-text credential mark. This is typography, not a reproduction of
   BACP's own trademarked logo, which is not available to display at every
   membership grade. Swap for the real logo the moment it is available. */
.credential-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  width: fit-content;
}
.credential-badge__org {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--white);
  padding-right: 0.75rem;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}
.credential-badge__tier {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-200);
}

/* 15. Utility pages ====================================================== */

.doc {
  padding-block: clamp(3rem, 8vw, 6rem);
}
.doc h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.doc h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: 3rem; }
.doc h3 { margin-top: 2rem; }
.doc ul, .doc ol { max-width: var(--measure); padding-left: 1.25rem; }
.doc li { margin-bottom: 0.5rem; }
.doc__meta { font-size: 0.9rem; color: var(--ink-muted); }

/* 16. Motion and print =================================================== */

/* The reveal is added by JavaScript (html.reveal-ready) so that with scripting
   off, or before main.js runs, every word is already on the page. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-ready [data-reveal].is-visible { 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;
  }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  /* The map card is kept: unlike the old iframe it is just an address,
     which is the one thing worth having on paper. */
  .site-header, .nav-mobile, .hero::after, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .hero, .site-footer { background: #fff !important; color: #000 !important; }
  .section--dark h2, .hero h1 { color: #000 !important; }
}

/* 17. Small helpers ======================================================= */

/* These exist because the CSP is style-src 'self': a style="" attribute is
   dropped by the browser, so every one-off tweak has to live here. */

.text-small    { font-size: 0.95rem; }
.text-muted    { color: var(--ink-muted); }
.text-centre   { text-align: center; }
.mt-loose      { margin-top: 1.5rem; }
.mb-loose      { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Attribution under the welcome pull quote */
.pullquote-credit { font-size: 0.9rem; color: var(--ink-muted); }

/* The qualification line under a counsellor's name */
.person__cred {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

/* "Follow" sits under "Contact" in the footer and needs the extra air */
.site-footer__subhead { margin-top: 1.75rem; }

/* Privacy page: the base bar is the only thing in that footer */
.site-footer__base--bare { border-top: 0; padding-top: 0; }

/* 404 ===================================================================== */

.page-gap {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.page-gap h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.page-gap .lead { margin-inline: auto; }
.page-gap .btn-row { justify-content: center; }
.page-gap__mark {
  height: 5rem;
  width: auto;
  margin: 0 auto 2.5rem;
}