/* ==========================================================================
   Cordelia Boardman | London Psychotherapy and Counselling
   Hand-written CSS. No frameworks, no external fonts, no JavaScript.
   Fonts are system stacks so nothing is requested from third parties,
   which keeps the site fast and avoids sending visitor IPs to Google.
   ========================================================================== */

:root {
  /* Brand: sampled from the previous Divi site (#F78640) and softened */
  --orange:        #e8762f;
  --orange-deep:   #c25a19;
  --orange-lift:   #f08a45;   /* lighter, for hover on ink-on-orange buttons */
  --orange-tint:   #fdf1e8;
  --orange-line:   #f2d5bd;

  --ink:           #2c2724;
  --ink-soft:      #55504b;
  --ink-faint:     #7d7671;

  --paper:         #fdfbf8;
  --paper-warm:    #f8f3ed;
  --rule:          #e8e0d6;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;   /* comfortable reading width */
  --wide:    64rem;   /* page container */
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

/* ---------- Skip link (accessibility) ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 0; }

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

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

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

/* Long reference text: a privacy notice, and anything else read in sections
   rather than straight through. Full width like the rest of the site, but
   paragraphs and lists keep a readable measure so lines do not run to a hundred
   characters. Headings span the full width, which is what stops the page
   looking like a narrow column floating in the middle. */
.longform p, .longform ul, .longform ol { max-width: 44rem; }
.longform h2 { margin-top: 2.5rem; }
.longform li { margin-bottom: .4rem; }

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

/* Ink on orange, not white on orange. This strip carries her email address at
   13px, and white on this orange is 2.97:1, the worst contrast on the site and
   on its smallest text. Ink on the same orange is 4.96:1 and passes, so the
   band keeps its colour. */
.topbar {
  background: var(--orange);
  color: var(--ink);
  font-size: 0.875rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.75rem;
  justify-content: center;
  text-align: center;
  padding-block: 0.5rem;
  font-size: 0.8125rem;
}
@media (min-width: 48rem) {
  .topbar .wrap {
    justify-content: flex-end;
    gap: 0.5rem 1.75rem;
    font-size: 0.875rem;
  }
}
.topbar a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 39, 36, 0.4);
}
.topbar a:hover { border-bottom-color: var(--ink); }

.masthead {
  background: #fff;
  border-bottom: 1px solid var(--rule);
}

/* Keep the navigation in reach on the longer pages. The psychotherapy and
   privacy pages run to nearly 4,000px, and without this you have to scroll
   all the way back up to move anywhere.
   Desktop only, deliberately: on a phone a fixed bar eats a chunk of a small
   screen for the whole visit, and the pages are read top to bottom there
   anyway. The email strip above it is not sticky, so it scrolls away and the
   navigation takes its place. */
@media (min-width: 48rem) {
  .masthead {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}
.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.25rem;
}

.brand { display: inline-flex; align-items: center; }
@media (min-width: 48rem) {
  }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .nav { gap: 0.25rem 1.5rem; }
}
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
@media (min-width: 48rem) {
  .nav a { font-size: 0.9375rem; padding-block: 0.35rem; }
}
.nav a:hover { color: var(--orange-deep); }
.nav a[aria-current="page"] {
  color: var(--orange-deep);
  border-bottom-color: var(--orange);
}

/* ---------- Hero ---------- */

/* The maze background has been removed. It was a Shutterstock image licensed
   years ago, and a stock licence is a shaky footing for something that reads
   as part of an identity. The hero now rests on the warm paper tone alone,
   which is quieter anyway and lets the photograph do the work. */
.hero {
  position: relative;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 48rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3.5rem; }
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
  font-weight: 600;
}

.portrait {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}
.portrait-caption {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ---------- Typography ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
  margin: 0 0 1.25rem;
}
h2 {
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  margin: 3rem 0 1rem;
}
h3 {
  font-size: 1.1875rem;
  margin: 2rem 0 0.5rem;
}

p { margin: 0 0 1.25rem; }

/* The opening paragraph, set identically to the body.
   It began slightly larger, which read as an inconsistency rather than a
   hierarchy. Setting it to 1rem then made it SMALLER than the 1.0625rem body
   and a paler grey, which looked like a different typeface altogether. It now
   matches on all three counts: size, weight and colour. The class stays as a
   hook, doing nothing visual. */
.lede {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
}

a { color: var(--orange-deep); }
a:hover { color: var(--ink); }

main { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Lists ---------- */

ul, ol { margin: 0 0 1.5rem; padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }

/* Two-column list of presenting issues */
.reasons {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem 2rem;
  max-width: 40rem;
}
@media (min-width: 34rem) {
  .reasons { grid-template-columns: 1fr 1fr; }
}
.reasons li {
  padding: 0.45rem 0 0.45rem 1.5rem;
  position: relative;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--orange);
}

/* ---------- Call to action ---------- */

.cta {
  display: inline-block;
  background: var(--orange);
  /* Ink, not white. White on this orange is 2.97:1, which fails WCAG AA for
     text at this size, and "Get in touch" is the one thing on the page that
     has to be readable by everyone. Ink on the same orange is 4.96:1 and
     passes, so the brand colour is kept exactly as it is and only the
     lettering changes. Going the other way, darkening the orange enough for
     white to pass, would have meant leaving the brand colour behind. */
  color: var(--ink);
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: 2px;
  font-size: 1rem;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease;
}
/* Lifts rather than darkens. The button carries ink lettering for contrast,
   and darkening the orange under dark text drops it to 3.35:1, so the hover
   state would fail where the resting state passes. Lighter goes the right way:
   5.92:1. */
.cta:hover { background: var(--orange-lift); color: var(--ink); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.cta-note { font-size: 0.9375rem; color: var(--ink-faint); margin: 0; }

/* ---------- Panels ---------- */

.panel {
  background: var(--orange-tint);
  border: 1px solid var(--orange-line);
  border-radius: 3px;
  padding: 1.75rem;
  margin: 2.5rem 0;
  max-width: var(--measure);
}
.panel > :last-child { margin-bottom: 0; }
.panel h2, .panel h3 { margin-top: 0; }

.quiet {
  border-left: 3px solid var(--orange);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 2rem 0;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.quiet > :last-child { margin-bottom: 0; }

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

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.contact-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.contact-list .label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}
.contact-list .value {
  font-size: 1.0625rem;
}
/* Values deliberately NOT set in the serif. The label above each one is already
   doing the distinguishing, in small uppercase, and an email address set in a
   serif next to sans labels reads as a mistake rather than a flourish. */
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--orange-line); }
.contact-list a:hover { border-bottom-color: var(--orange); }

/* ---------- Locations ---------- */

.places {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
  max-width: 44rem;
}
/* Three cards once online is one of the places. Below this width they stack,
   which is better than a two-then-one row leaving an orphan. */
@media (min-width: 58rem) {
  .places { grid-template-columns: repeat(3, 1fr); max-width: 62rem; }
}
@media (min-width: 40rem) and (max-width: 57.99rem) {
  .places { grid-template-columns: 1fr 1fr; }
  /* Two columns cannot hold three cards without stranding one at half width
     under the first. Let a lone third card run the full row instead. */
  .place:nth-child(3):last-child { grid-column: 1 / -1; }
}
.place {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.5rem;
}
.place h3 { margin: 0 0 0.4rem; }
.place p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }

/* ---------- Credentials ---------- */

.creds {
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
  padding-block: 2.5rem;
}
.creds h2 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}
.creds p { color: var(--ink-soft); font-size: 0.9375rem; margin-bottom: 1.5rem; }
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}
/* A linked badge is a claim the visitor can check, so it should look
   clickable. Slight lift on hover, and a visible focus ring for the keyboard. */
.badges a { display: block; border-radius: 3px; transition: opacity .15s ease; }
.badges a:hover { opacity: .78; }
.badges a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.badges img { width: auto; display: block; }

/* Logos are sized by AREA, not by height.
   These three have very different proportions: FPC is a wide low banner at
   3.16:1, BACP 2.25:1, UKCP nearly square at 1.85:1. Set them all to the same
   height and FPC looks twice the size of UKCP, because a wide shape at equal
   height covers far more ground. Heights below are derived from a common
   target area, so they read as equal weight instead of equal height. */
.badges img[src*="fpc"]  { height: 44px; }
.badges img[src*="bacp"] { height: 52px; }
.badges img[src*="ukcp"] { height: 57px; }
/* The BACP and FPC badges are JPEGs with a white rectangle baked in, which
   multiply hides against the page. The UKCP one is a transparent PNG and must
   NOT be blended: multiply would dull its colours for no reason. */
.badges img[src$=".jpg"] { mix-blend-mode: multiply; }

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

.foot {
  background: var(--ink);
  color: #cfc7be;
  padding-block: 2.5rem;
  font-size: 0.9375rem;
  line-height: 1.65;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 40rem) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}
.foot h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.foot a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.foot a:hover { border-bottom-color: #fff; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 0.4rem; }
.foot p { margin: 0 0 0.75rem; }

.legal {
  border-top: 1px solid #45403b;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: #9a938b;
}
.legal p { margin: 0 0 0.5rem; }

/* ---------- Focus states ---------- */

a:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--orange-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Print ---------- */

@media print {
  .topbar, .nav, .cta, .foot { display: none; }
  body { background: #fff; font-size: 11pt; }
  .hero { background: #fff; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Brand mark ----------
   The labyrinth, drawn rather than photographed. currentColor means the one
   SVG serves the orange header, a reversed-out footer and a one-colour print
   without a second file. The name sits on two lines because two lines are as
   tall as the circle, which is what makes them read as one object rather than
   an icon parked next to some words. */

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--orange); }
.brand:hover { color: var(--orange-deep); }
.brand-mark { width: 38px; height: 38px; flex: none; display: block; }
.brand-name {
  font-family: var(--serif); font-weight: 400; font-size: 1.12rem;
  line-height: .98; letter-spacing: -.01em; color: var(--ink);
}
.brand-name span { display: block; }
@media (max-width: 34rem) {
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 1rem; }
}