/* ==========================================================================
   Sam Gidwani: styles
   Ships to the WordPress build verbatim. Block-scoped: one <section> class
   per future ACF block, each owning its own wrapper chain.
   ========================================================================== */

/* --------------------------------------------------------------- base ---- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  text-wrap: balance;
  margin: 0;
}

p, li { text-wrap: pretty; }
p { margin: 0 0 var(--space-4); max-width: var(--maxw-prose); }
p:last-child { margin-bottom: 0; }

a { color: var(--violet); text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
a:hover { color: var(--violet-deep); }

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

::selection { background: var(--peri); color: var(--plum-deep); }

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

/* ---------------------------------------------------------- structure ---- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

/* Surfaces. One theme per section, never mid-section. */
[data-surface="paper"] { background: var(--paper); color: var(--ink); }
[data-surface="tint"]  { background: var(--paper-tint); color: var(--ink); }
[data-surface="lilac"] { background: var(--lilac); color: var(--ink); }
[data-surface="plum"]  { background: var(--plum); color: var(--on-plum); }
[data-surface="deep"]  { background: var(--plum-deep); color: var(--on-plum); }

[data-surface="plum"] h1, [data-surface="plum"] h2, [data-surface="plum"] h3,
[data-surface="deep"] h1, [data-surface="deep"] h2, [data-surface="deep"] h3 { color: var(--on-plum); }
[data-surface="plum"] p, [data-surface="deep"] p { color: var(--on-plum-muted); }
/* Buttons carry their own colour on every surface, so exclude them here: an
   unscoped `[data-surface] a` rule outranks `.btn-solid` and would repaint the
   label. */
[data-surface="plum"] a:not(.btn), [data-surface="deep"] a:not(.btn) { color: var(--peri); }
[data-surface="plum"] a:not(.btn):hover, [data-surface="deep"] a:not(.btn):hover { color: var(--peri-bright); }

.section-pad { padding-block: var(--space-9); }
.section-pad-sm { padding-block: var(--space-8); }

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--step-5); margin-top: var(--space-6); }
.prose h3 { font-size: var(--step-4); margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: 1.2em; max-width: var(--maxw-prose); }
.prose li + li { margin-top: var(--space-2); }

/* ------------------------------------------------------------- pieces ---- */

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--violet);
  margin: 0 0 var(--space-3);
  display: block;
}
[data-surface="plum"] .eyebrow, [data-surface="deep"] .eyebrow { color: var(--peri); }

/* Section header: intro stacked under the title, not set beside it. */
.section-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.section-head__title { font-size: var(--step-6); }
.section-head__intro { color: var(--ink-muted); margin: 0; max-width: 62ch; }
[data-surface="plum"] .section-head__intro { color: var(--on-plum-muted); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85em 1.4em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-hover) ease,
              border-color var(--dur-hover) ease,
              color var(--dur-hover) ease,
              transform var(--dur-press) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn .arr { transition: transform var(--dur-hover) var(--ease-out); }

.btn-solid { background: var(--violet); color: var(--paper); border-color: var(--violet); }
.btn-outline { background: transparent; color: var(--violet); border-color: var(--line); }

/* The solid button is one treatment everywhere: violet fill, white label. It
   used to invert to a periwinkle fill on plum surfaces, which made the hero CTA
   the odd one out against the identical button in the header.

   The outline button on plum takes a white label for the same reason. Its only
   use is the hero telephone number, which sits beside a solid white-labelled
   button and over a photograph: periwinkle made it read as the weaker of the
   two, and the photograph is light enough in places that the accent lost its
   footing. */
[data-surface="plum"] .btn-outline, [data-surface="deep"] .btn-outline {
  color: var(--on-plum); border-color: var(--line-plum);
}

@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: var(--violet-deep); border-color: var(--violet-deep); color: var(--paper); }
  .btn-outline:hover { border-color: var(--violet); color: var(--violet-deep); }
  [data-surface="plum"] .btn-outline:hover, [data-surface="deep"] .btn-outline:hover {
    border-color: var(--on-plum); color: var(--on-plum);
  }
  .btn:hover .arr { transform: translateX(3px); }
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Duotone ----------------------------------------------------------------
   Matches the treatment already baked into the expertise photography: greyscale
   with a plum tint. Apply to UNTREATED photography only. `mix-blend-mode: color`
   keeps the image's luminance and takes the overlay's hue, which is what makes
   it a duotone rather than a wash; `isolation` stops it blending with the page
   behind. */
.duotone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
}
.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(1) contrast(0.95) brightness(1.06);
}
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--plum);
  mix-blend-mode: color;
  opacity: 0.55;
  pointer-events: none;
}

/* On a plum surface the `color` blend keeps the original luminance, so a
   high-key photograph punches a white hole in the panel. `multiply` pulls the
   range down into the plum instead, so the image sits in the surface. Held
   light: enough to tint, not so much that the photograph disappears. */
.duotone--deep img { filter: grayscale(1) contrast(1.02); }
.duotone--deep::after { mix-blend-mode: multiply; opacity: 0.3; }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5em 0.95em;
  white-space: nowrap;
}

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

.siteheader {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--plum);
  border-bottom: 1px solid var(--line-plum);
}
.siteheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 4.75rem;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo {
  width: auto;
  height: clamp(2.75rem, 2.4rem + 1.4vw, 3.5rem);
  display: block;
}

.nav { display: none; }
.nav > ul { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav a {
  color: var(--on-plum-muted);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  transition: color var(--dur-hover) ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-plum); }

/* Mega menu ---------------------------------------------------------------
   The practice has two overview procedures and four areas, each with its own
   conditions. That is too much for a dropdown, so it gets a panel. */

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--on-plum-muted);
  cursor: pointer;
  transition: color var(--dur-hover) ease;
}
.nav__trigger:hover,
.nav__trigger[aria-expanded="true"] { color: var(--on-plum); }
.nav__chev {
  width: 0.5em; height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--dur-hover) var(--ease-out);
}
.nav__trigger[aria-expanded="true"] .nav__chev { transform: translateY(0.05em) rotate(-135deg); }

.mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--plum-deep);
  border-top: 1px solid var(--line-plum);
  box-shadow: 0 24px 48px -24px rgb(20 12 28 / 0.6);
}
.mega[hidden] { display: none; }
.mega__inner {
  display: grid;
  /* Overview runs wider than the link columns: it carries the two images. */
  grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-6);
}
.mega__col { min-width: 0; }
.mega__col--overview {
  border-right: 1px solid var(--line-plum);
  padding-right: var(--space-5);
}
.mega__title {
  font-size: var(--step--3);
  font-family: var(--font-text);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--peri);
  margin: 0 0 var(--space-4);
}
.mega__title a { color: var(--peri); text-decoration: none; }
.mega__title a:hover { color: var(--peri-bright); }
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li + li { margin-top: var(--space-3); }
.mega__list a {
  color: var(--on-plum-muted);
  text-decoration: none;
  font-size: var(--step--1);
  line-height: var(--lh-tight);
  display: block;
}
.mega__list a:hover { color: var(--on-plum); }
.mega__list--lead li + li { margin-top: var(--space-4); }

.megafeature { display: block; text-decoration: none; }
.megafeature__media {
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
}
.megafeature__media img { aspect-ratio: 16 / 10; object-fit: cover; }
.megafeature__label {
  display: block;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--on-plum);
  line-height: var(--lh-heading);
  transition: color var(--dur-hover) ease;
}
.megafeature__media::after { transition: opacity var(--dur-panel) ease; }
.megafeature__media img { transition: filter var(--dur-panel) ease; }

/* Hover lifts the treatment off entirely: tint out, greyscale out, so the
   photograph comes up in full colour. */
@media (hover: hover) and (pointer: fine) {
  .megafeature:hover .megafeature__label { color: var(--peri); }
  .megafeature:hover .megafeature__media::after { opacity: 0; }
  .megafeature:hover .megafeature__media img { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .megafeature__media::after,
  .megafeature__media img { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__chev { transition: none; }
}

.header-cta { display: none; }

.navtoggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 1px solid var(--line-plum);
  border-radius: var(--radius-pill);
  color: var(--on-plum);
  font: inherit;
  font-size: var(--step--1);
  padding: 0.55em 1em;
  cursor: pointer;
}

/* Mobile drawer -----------------------------------------------------------
   Fixed to the viewport under the header, not in the flow inside it. The old
   version put all 22 links inside the sticky header: on a 700px screen the
   header grew to 1413px, pinned itself at top: 0, and everything from FAQs
   downwards was unreachable. A sticky element taller than the viewport cannot
   be scrolled to, and `overflow: hidden` sealed it.

   Now the drawer owns the screen below the header and each tier scrolls
   itself. `--header-h` is measured and set by app.js, with the header's own
   min-height as the fallback. */
.drawer {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h, 4.75rem);
  bottom: 0;
  z-index: 40;
  background: var(--plum-deep);
  border-top: 1px solid var(--line-plum);
  /* The panels scroll, not this. `clip` rather than `hidden` where it is
     supported, because a hidden box is still a scroll container: the second
     tier sits a full width off to the right, and anything that scrolls this
     box sideways (focus does, see app.js) drags that panel most of the way in
     before its own transition has moved at all. `clip` cannot be scrolled.
     The pair is deliberate: older browsers keep `hidden`. */
  overflow: hidden;
  overflow: clip;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-panel) var(--ease-out),
              transform var(--dur-panel) var(--ease-out);
}
.drawer.is-open { opacity: 1; transform: none; }
.drawer[hidden] { display: none; }

.drawer__panel {
  position: absolute;
  inset: 0;
  /* Opaque: the panels are stacked, so the second tier has to cover the first
     rather than slide over it transparently. */
  background: var(--plum-deep);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Don't hand the scroll to the page behind when the panel hits its end. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4) var(--gutter) var(--space-7);
}
.drawer__panel[hidden] { display: none; }

/* The second tier arrives from the right. It keeps `hidden` when closed, so it
   stays out of the tab order and the accessibility tree; app.js unhides it a
   frame before it slides, which is what makes the transition run. */
.drawer__panel--sub {
  transform: translateX(100%);
  transition: transform var(--dur-drawer) var(--ease-drawer);
  /* The panels are the same colour, so without an edge the slide reads as the
     text changing rather than a sheet moving over the one underneath. */
  box-shadow: -16px 0 32px -8px rgb(0 0 0 / 0.45);
}
.drawer__panel--sub.is-open { transform: none; }

/* The first tier has no movement of its own, only the drawer's fade, so its
   contents come up a beat behind it. The second tier is already travelling
   across the screen and needs nothing on top: two movements at once reads as
   lag, not polish. */
.drawer__panel:not(.drawer__panel--sub) > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-panel) var(--ease-out) 80ms,
              transform var(--dur-panel) var(--ease-out) 80ms;
}
.drawer.is-open .drawer__panel:not(.drawer__panel--sub) > * {
  opacity: 1;
  transform: none;
}

.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list > li + li { border-top: 1px solid var(--line-plum); }

.drawer__list a,
.drawer__push {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--on-plum);
  text-decoration: none;
  font-size: var(--step-2);
  cursor: pointer;
}

/* Second tier: smaller, grouped, and the group heading is the area page. */
.drawer__group + .drawer__group { margin-top: var(--space-5); }
.drawer__eyebrow {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--peri);
  margin: 0;
}
/* The four area headings are pages in their own right, same as in the mega
   menu. Small type, but the press target is still a full 44px row. Overview is
   not a page, so it stays as plain text and keeps the tighter spacing. */
.drawer__eyebrow a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
}
.drawer__eyebrow:not(:has(a)) { padding-block: var(--space-3) var(--space-2); }
.drawer__list--sub a { font-size: var(--step-0); min-height: 2.75rem; color: var(--on-plum-muted); }
.drawer__list--sub a:hover { color: var(--on-plum); }

.drawer__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  color: var(--on-plum);
  margin: 0 0 var(--space-5);
}

.drawer__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  margin-bottom: var(--space-4);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--peri);
  cursor: pointer;
}

/* One chevron, rotated. Points right to go deeper, left to come back. */
.drawer__chev {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  color: var(--peri);
}
.drawer__chev--back { transform: rotate(135deg); }

/* The booking action sits at the foot of the first tier, pushed down when the
   list is short and simply following it when it is not. */
.drawer__cta { margin: auto 0 0; padding-top: var(--space-6); }
.drawer__cta .btn { width: 100%; justify-content: center; }

@media (min-width: 64rem) {
  .nav, .header-cta { display: block; }
  .navtoggle { display: none; }
  .drawer { display: none; }
}

/* --------------------------------------------------------------- hero ---- */

/* Full-bleed hero, carrying the practice's existing image. The photograph is
   already duotoned to the palette and has clear space at the left, so the
   overlay only needs to deepen it enough to hold white text. */
.phero {
  position: relative;
  background: var(--plum);
  color: var(--on-plum);
  overflow: hidden;
  isolation: isolate;
}
.phero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.phero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--plum-deep) 0%, rgb(41 25 53 / 0.82) 42%, rgb(64 42 79 / 0.35) 100%);
}
.phero__inner {
  padding-block: var(--space-9) var(--space-10);
}
.phero__copy { max-width: 34rem; }
.phero__title {
  font-size: var(--step-9);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--on-plum);
  margin-bottom: var(--space-5);
}
.phero__lead {
  font-size: var(--step-2);
  color: var(--on-plum-muted);
  max-width: 42ch;
  margin-bottom: var(--space-6);
}

@media (max-width: 47.99rem) {
  /* The photograph's subject sits right of centre, so on narrow screens the
     overlay goes vertical rather than trying to hold a side-by-side read. */
  .phero__bg::after {
    background: linear-gradient(to bottom, rgb(41 25 53 / 0.86) 0%, rgb(41 25 53 / 0.78) 60%, rgb(64 42 79 / 0.6) 100%);
  }
}

/* --------------------------------------------------------- index rows ---- */
/* Numbered editorial index. The house pattern for a meaningful sequence.    */

.indexrows__list { list-style: none; margin: 0; padding: 0; }
.indexrow { border-top: 1px solid var(--line); }
.indexrows__list > .indexrow:last-child { border-bottom: 1px solid var(--line); }

.indexrow__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-hover) ease;
}
.indexrow__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-5); line-height: var(--lh-heading); letter-spacing: var(--track-heading); }
.indexrow__meta { display: block; color: var(--ink-muted); font-size: var(--step--1); line-height: var(--lh-tight); margin: var(--space-2) 0 0; max-width: 56ch; }
.indexrow__arr { color: var(--violet); transition: transform var(--dur-hover) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .indexrow__link:hover .indexrow__title { color: var(--violet); }
  .indexrow__link:hover .indexrow__arr { transform: translateX(4px); }
}

/* ------------------------------------------------------- rating bar ----- */
/* Narrow strip under the hero. Light surface deliberately: the Doctify mark is
   dark navy and the stars are their mint, so neither sits on plum. */

.ratingbar { border-bottom: 1px solid var(--line); }
.ratingbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
  font-size: var(--step--1);
  color: var(--ink-muted);
  text-align: center;
}
.ratingbar__inner p { margin: 0; max-width: none; }
.ratingbar__score { color: var(--ink); font-weight: 700; }
/* the base rule sets images to block, which would break these onto their own
   lines mid-sentence */
.ratingbar__stars, .ratingbar__logo {
  display: inline-block;
  vertical-align: middle;
  width: auto;
}
/* inline SVG rather than the supplied mint PNG, so the stars take the text
   colour instead of disappearing into the surface */
.ratingbar__stars { height: 0.85em; fill: currentColor; margin-inline: 0.2em 0.4em; }
.ratingbar__logo { height: 1.35em; margin-left: 0.2em; }

/* -------------------------------------------------------- area cards ---- */

.areacards__list { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.areacard { min-width: 0; }
.areacard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--lilac);
  transition: background-color var(--dur-hover) ease,
              box-shadow var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}
.areacard__media { display: block; overflow: hidden; }
.areacard__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-reveal) var(--ease-out);
}
.areacard__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  flex: 1;
}
.areacard__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
}
.areacard__text { color: var(--ink-muted); font-size: var(--step--1); line-height: var(--lh-tight); }
.areacard__arr { color: var(--violet); margin-top: auto; font-size: var(--step--1); font-weight: 700; }

@media (hover: hover) and (pointer: fine) {
  .areacard__link:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
  .areacard__link:hover .areacard__media img { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .areacard__link:hover { transform: none; }
  .areacard__link:hover .areacard__media img { transform: none; }
}

@media (min-width: 40rem) { .areacards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .areacards__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------- split row ---- */

.splitrow__inner { display: grid; gap: var(--space-6); align-items: center; }
.splitrow__media img { border-radius: var(--radius); width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.splitrow__title { font-size: var(--step-7); margin-bottom: var(--space-4); }
.splitrow__body { color: var(--ink-muted); }
[data-surface="plum"] .splitrow__body { color: var(--on-plum-muted); }
.splitrow__sig {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.splitrow__sig strong { color: var(--ink); font-weight: 600; display: block; }
[data-surface="plum"] .splitrow__sig { border-color: var(--line-plum); color: var(--on-plum-muted); }
[data-surface="plum"] .splitrow__sig strong { color: var(--on-plum); }

.splitrow__actions { margin-top: var(--space-5); }

/* Cut-out portrait: no crop, no radius, stood on the bottom edge of the
   section itself. The section gives up its bottom padding so the figure can
   reach the edge, and the copy column carries that padding instead. */
/* the figure overhangs to the viewport edge; 100vw counts the scrollbar, so clip
   the few stray pixels rather than letting them scroll the page sideways.
   The copy column runs tighter top and bottom than a standard section: the row
   height is set by the copy, and the figure is a fixed size, so pulling the copy
   in is what brings the two columns into balance. */
.splitrow--cutout { padding-top: var(--space-7); padding-bottom: 0; overflow-x: clip; }
.splitrow--cutout .splitrow__copy { padding-bottom: var(--space-7); }
.splitrow--cutout .splitrow__media { align-self: end; }
.splitrow--cutout .splitrow__media img {
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: contain;
  width: 100%;
  height: auto;
  margin-bottom: 0;
}

@media (min-width: 60rem) {
  .splitrow__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .splitrow--flip .splitrow__media { order: -1; }
  /* the figure earns more of the row than a straight 50/50 split, and runs off
     the right edge of the viewport rather than stopping at the container, so it
     reads at something like life size instead of as an inset picture */
  .splitrow--cutout .splitrow__inner {
    grid-template-columns: minmax(26rem, 1fr) minmax(0, 1.6fr);
    align-items: end;
    gap: var(--space-5);
  }
  .splitrow--cutout .splitrow__media {
    margin-right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--maxw)) / 2));
  }
  /* Intro variant: copy carries less weight than the image, so let it sit
     narrower and align to the top rather than centring in a tall row. */
  .splitrow--intro .splitrow__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}

/* --------------------------------------------------------- logo strip ---- */

.logostrip__inner { display: grid; gap: var(--space-5); align-items: center; }
.logostrip__label {
  font-size: var(--step-3);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  margin: 0;
  max-width: 26ch;
}
.logostrip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.logostrip__list a { display: inline-flex; align-items: center; color: var(--ink); }
.logostrip__mark { display: block; width: auto; }
/* Sized per mark, not by a shared max-height: these logos have different
   proportions and cap heights, so one rule makes them optically unequal. */
.logostrip__mark--tatler { height: 2rem; }
.logostrip__mark--doctify { height: 1.75rem; }

@media (min-width: 56rem) {
  /* label takes the slack, logos take exactly what they need, so the marks
     never get squeezed into wrapping */
  .logostrip__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); }
  .logostrip__list { justify-content: flex-end; flex-wrap: nowrap; }
}

/* -------------------------------------------------------- value cards ---- */

/* Not a card: a ruled column. Line across the top, vertical padding only, no
   fill and no side inset, so the copy sits flush to the column edge. Heading
   and body sizing still match .areacard. */
.valuegrid__list { display: grid; gap: var(--space-4) var(--space-5); list-style: none; margin: 0; padding: 0; }
.valuecard {
  border-top: 1px solid var(--ink);
  padding: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.valuecard__title { font-size: var(--step-3); }
.valuecard__text { color: var(--ink-muted); font-size: var(--step--1); line-height: var(--lh-tight); margin: 0; }

@media (min-width: 42rem) { .valuegrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .valuegrid__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -------------------------------------------------------- testimonial ---- */

/* The practice's own plum texture. Not tileable (centre glow, dark edges) so it
   runs cover and centred, and the wash must be a gradient rather than a
   background-color or it would sit behind the image instead of over it.

   The wash is held light on purpose. At 0.82 it flattened the texture to ~7
   levels of luminance across the whole section, which is invisible over an area
   this size. 0.3 keeps a 31-level spread, which reads, while still holding the
   muted intro copy at 4.97:1 on the brightest part of the vignette. */
.quotes {
  background-color: var(--plum);
  background-image:
    linear-gradient(rgb(64 42 79 / 0.3), rgb(64 42 79 / 0.3)),
    url("../img/2020/12/texture_original_web-min.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.quotes__list { display: grid; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.quote {
  background: var(--plum-soft);
  border-radius: var(--radius);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quote__text { font-family: var(--font-display); font-size: var(--step-2); line-height: var(--lh-tight); color: var(--on-plum); margin: 0; max-width: none; }
.quote__author { font-size: var(--step--2); color: var(--on-plum-muted); margin: auto 0 0; max-width: none; }

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

/* -------------------------------------------------------- locations ----- */
/* List left, map right. Selecting a location moves the map, so the cards are
   buttons rather than links: there is no page behind them to navigate to. */

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

/* Same treatment as .indexrow: hairline-separated rows, no card. The active row
   takes a solid rule along its top edge, drawn as an overlay so switching
   selection never shifts the list by a pixel. */
.locations__list { list-style: none; margin: 0; padding: 0; }
.locationcard { border-top: 1px solid var(--line); position: relative; }
.locations__list > .locationcard:last-child { border-bottom: 1px solid var(--line); }

.locationcard__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: var(--space-5) 0;
  color: inherit;
  transition: color var(--dur-hover) ease;
}

.locationcard__link::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 2px;
  background: var(--violet);
  opacity: 0;
  transition: opacity var(--dur-hover) ease;
}
.locationcard__link[aria-current="true"]::before { opacity: 1; }

.locationcard__place {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  transition: color var(--dur-hover) ease;
}
.locationcard__venue {
  display: block;
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--lh-tight);
  margin-top: var(--space-2);
}
.locationcard__arr { color: var(--violet); transition: transform var(--dur-hover) var(--ease-out); }

.locationcard__link[aria-current="true"] .locationcard__place { color: var(--violet); }
.locationcard__link[aria-current="true"] .locationcard__arr { transform: translateX(4px); }

@media (hover: hover) and (pointer: fine) {
  .locationcard__link:hover .locationcard__place { color: var(--violet); }
  .locationcard__link:hover .locationcard__arr { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .locationcard__link::before { transition: none; }
}

/* The map column stretches to the list's height, and the canvas fills it via
   flex. A percentage height here would resolve against an auto-height grid item
   and collapse the map to nothing. */
.locations__map { display: flex; }
.locations__canvas {
  flex: 1;
  min-height: 24rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-tint);
  z-index: 0;              /* keep Leaflet panes under the sticky header */
}

/* Desaturate the basemap so it sits behind the brand rather than competing.
   Tile pane only, so the pins keep their colour. The class is set from JS and
   comes off once a CARTO key is in place, since that basemap is already grey. */
.locations__canvas.is-desaturated .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.92) brightness(1.06);
}

/* Leaflet chrome, brought into the palette */
.locations__canvas .leaflet-control-zoom a {
  color: var(--ink);
  border-color: var(--line);
  background: var(--paper);
}
.locations__canvas .leaflet-control-zoom a:hover { color: var(--violet); }
.locations__canvas .leaflet-control-attribution {
  background: rgb(255 255 255 / 0.82);
  color: var(--ink-faint);
  font-size: 11px;
}
.locations__canvas .leaflet-control-attribution a { color: var(--ink-muted); }
.locations__canvas .leaflet-popup-content-wrapper,
.locations__canvas .leaflet-popup-tip { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.locations__canvas .leaflet-popup-content { margin: var(--space-4); font-family: var(--font-text); }

.mappin__title { font-weight: 700; font-size: var(--step-0); margin: 0 0 var(--space-2); }
.mappin__meta { font-size: var(--step--1); color: var(--ink-muted); margin: 0; max-width: 26ch; }
.mappin__meta a { color: var(--violet); }

@media (min-width: 60rem) {
  .locations__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-6);
    align-items: stretch;
  }
}

/* -------------------------------------------------------- accordion ----- */
/* Native <details>/<summary>: keyboard, screen reader and find-in-page support
   come for free, and it needs no JS. Shared by the FAQs and the team bios. */

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  min-height: 2.75rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  transition: color var(--dur-hover) ease;
}
/* both are needed: the pseudo-element for Safari, list-style for the rest */
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary { list-style: none; }
.accordion__summary::marker { content: ""; }

.accordion__sign {
  flex: none;
  position: relative;
  width: 0.75em;
  height: 0.75em;
  align-self: center;
  color: var(--violet);
}
.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--dur-panel) var(--ease-out), opacity var(--dur-panel) ease;
}
.accordion__sign::after { transform: translateY(-50%) rotate(90deg); }
[open] > .accordion__summary .accordion__sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.accordion__body { padding-bottom: var(--space-5); }
.accordion__body > * + * { margin-top: var(--space-4); }
.accordion__body p { color: var(--ink-muted); }

@media (hover: hover) and (pointer: fine) {
  .accordion__summary:hover { color: var(--violet); }
}
@media (prefers-reduced-motion: reduce) {
  .accordion__sign::before, .accordion__sign::after { transition: none; }
}

/* --------------------------------------------------------- team grid ---- */

/* A ruled directory, not a grid of expanders. The bios run from 70 to 420
   words, so an accordion in a grid column stretched one cell and dropped the
   whole row. Here every bio is simply open: nothing to click, nothing hidden
   from search, and the ragged row heights read as editorial rather than broken.
   The portrait column stays narrow so a long bio does not make a tall row. */
.teamgrid__list { display: grid; gap: var(--space-7); list-style: none; margin: 0; padding: 0; }
/* Name, role and bio are grid siblings, so their own margins would stack on top
   of the row gap. The gap owns the vertical rhythm; the children own none. */
.teamcard { display: grid; gap: var(--space-2); min-width: 0; }
.teamcard + .teamcard { border-top: 1px solid var(--line); padding-top: var(--space-7); }

.teamcard__media { border-radius: var(--radius); margin-bottom: var(--space-2); }
.teamcard__media img { aspect-ratio: 4 / 5; object-fit: cover; }
.teamcard__name { font-size: var(--step-4); }
.teamcard__role {
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--lh-tight);
  margin: 0;
}
.teamcard__bio { margin-top: var(--space-3); }
.teamcard__bio > * + * { margin-top: var(--space-4); }
.teamcard__bio p { color: var(--ink-muted); }

@media (min-width: 48rem) {
  .teamcard {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-2);
    align-items: start;
  }
  .teamcard__media { grid-row: span 3; margin-bottom: 0; }
}

/* ------------------------------------------------------ contact cols ---- */

.contactcols__list { display: grid; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.contactcard { border-top: 1px solid var(--ink); padding-top: var(--space-4); }
.contactcard__title { font-size: var(--step-3); margin-bottom: var(--space-3); }
.contactcard__rows { display: grid; gap: var(--space-2); margin: 0; }
.contactcard__rows dt {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contactcard__rows dd { margin: 0 0 var(--space-3); font-size: var(--step--1); }
.contactcard__rows dd:last-child { margin-bottom: 0; }

@media (min-width: 48rem) { .contactcols__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }

/* ------------------------------------------------------- clinic list ---- */

.cliniclist__list { display: grid; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.clinic { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.clinic__name { font-size: var(--step-2); margin-bottom: var(--space-2); }
/* breaks come from <br> in the markup, so no white-space: pre-line here: it
   would render the source newlines as well and double the leading */
.clinic__address { color: var(--ink-muted); font-size: var(--step--1); line-height: var(--lh-tight); margin: 0; }
.clinic__link { display: inline-block; margin-top: var(--space-3); font-size: var(--step--1); font-weight: 700; }

@media (min-width: 42rem) { .cliniclist__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .cliniclist__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------ enquiry --- */

.enquiry__inner { display: grid; gap: var(--space-6); align-items: start; }
.enquiry__form { display: grid; gap: var(--space-4); }

.field { display: grid; gap: var(--space-1); border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label { font-size: var(--step--1); font-weight: 700; padding: 0; }
.field__req { color: var(--ink-faint); font-weight: 400; }

/* Inputs sit tight: the label above already carries the height, so the control
   only needs enough to be comfortably tappable. */
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--step--1);
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5em 0.7em;
  width: 100%;
  min-height: 2.75rem;      /* touch target floor */
}
.field textarea { min-height: 6rem; resize: vertical; padding-block: 0.6em; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--violet); }

.fieldgroup { display: grid; gap: var(--space-4); }
.fieldgroup[hidden] { display: none; }

/* Mode switch: the radios drive which field group shows. In Gravity Forms this
   is the conditional-logic trigger, so keep it as a radio, not a tab widget. */
.modeswitch { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); min-width: 0; }
.modeswitch__options { display: grid; gap: var(--space-2); }
.modeswitch__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0.4em 0.85em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
.modeswitch__option:has(:checked) { border-color: var(--violet); background: var(--paper-tint); }
.modeswitch__option input { accent-color: var(--violet); width: 1.1em; height: 1.1em; flex: none; }

.choices { display: grid; gap: var(--space-1); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.5rem;
  font-size: var(--step--1);
  cursor: pointer;
}
.choice input { accent-color: var(--violet); width: 1.1em; height: 1.1em; flex: none; }

@media (min-width: 34rem) {
  .modeswitch__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .enquiry__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); }
}

/* ------------------------------------------------------------ page top --- */

.pagehead { background: var(--plum); color: var(--on-plum); }
.pagehead__inner { padding-block: var(--space-7) var(--space-8); }
.pagehead__title { font-size: var(--step-8); line-height: var(--lh-display); letter-spacing: var(--track-display); max-width: 20ch; }
.pagehead__lead { font-size: var(--step-2); color: var(--on-plum-muted); margin-top: var(--space-4); max-width: 56ch; }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-5); padding: 0; font-size: var(--step--2); }
.crumbs li { color: var(--on-plum-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line-plum); }
.crumbs a { color: var(--on-plum-muted); text-decoration: none; }
.crumbs a:hover { color: var(--peri); }

/* --------------------------------------------------------- article ------- */

.article__inner { display: grid; gap: var(--space-7); }
.article__body { min-width: 0; }
.article__figure { margin: 0 0 var(--space-6); }
.article__figure img { border-radius: var(--radius); width: 100%; }

.aside { min-width: 0; }
/* Pale fill, no outline, matching .areacard. */
.aside__panel {
  background: var(--paper-tint);
  border: 0;
  border-radius: var(--radius);
  padding: var(--space-5);
}
.aside__panel + .aside__panel { margin-top: var(--space-5); }
.aside__title {
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--space-4);
}
.siblingnav { list-style: none; margin: 0; padding: 0; }
.siblingnav li + li { border-top: 1px solid var(--line); }
.siblingnav a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--step--1);
  transition: color var(--dur-hover) ease;
}
.siblingnav a:hover { color: var(--violet); }
.siblingnav a[aria-current="page"] { color: var(--violet); font-weight: 600; }
.aside__text { font-size: var(--step--1); color: var(--ink-muted); }
.aside__actions { margin-top: var(--space-4); }

@media (min-width: 64rem) {
  .article__inner { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-8); }
  .aside { position: sticky; top: 6.5rem; align-self: start; }
}

/* -------------------------------------------------------- overview ------ */
/* The two treatment overviews run to about 1,700 words. They are broken up by
   giving each section a different block rather than by alternating surfaces,
   which lets the contents rail stay stuck for the whole page.

   Same geometry as .article on purpose: body left, sticky rail right, so the
   site has one two-column reading layout rather than two. */

.overview__inner { display: grid; gap: var(--space-7); }
.overview__body { min-width: 0; }

/* The rest of the opening paragraph, which is too long to leave in the plum
   head. Set larger than body copy so it still reads as the introduction. */
.overview__standfirst {
  font-size: var(--step-1);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  max-width: var(--maxw-prose);
  margin: 0 0 var(--space-7);
}

/* A section is a chunk. The rule and the space are what separate them; nothing
   here changes surface, so the rail never sits against a colour it did not
   expect. scroll-margin keeps an anchored heading clear of the fixed header. */
.ovsection { scroll-margin-top: 5.5rem; }
.ovsection + .ovsection {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}
.overview .section-head { margin-bottom: var(--space-6); }
.overview .section-head__title { font-size: var(--step-5); }

/* Two up inside the narrower body column, not four: at 20rem of rail the four
   across version drops to about 11rem a column and the titles all wrap. */
@media (min-width: 34rem) {
  .valuegrid__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (min-width: 68rem) {
  .valuegrid__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Condition rows ----------------------------------------------------------
   The heaviest section on the page: seven clusters of about 75 words. Set as
   hairline-ruled rows, same family as .indexrow and .locationcard, so it reads
   as a list to scan rather than a wall to read. The links are the point: the
   source page carries no outbound links at all. */
/* The list does not close itself. The rule between sections is the break, and a
   closing rule here put two hairlines 64px apart with nothing between them. */
.condrows { list-style: none; margin: 0; padding: 0; }
.condrow { border-top: 1px solid var(--line); padding-block: var(--space-5); }
.condrow__title { font-size: var(--step-3); margin: 0; }
.condrow__text {
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--lh-body);
  margin: var(--space-2) 0 0;
  max-width: 62ch;
}
.condrow__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.condrow__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;          /* touch target floor */
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--violet);
  text-decoration: none;
}
/* No underline: it ran under the arrow as well as the label, which reads as a
   mistake. The violet, the weight and the arrow already mark these as links, so
   hover deepens the colour and moves the arrow, matching .indexrow. */
.condrow__link .arr { transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .condrow__link:hover { color: var(--plum); }
  .condrow__link:hover .arr { transform: translateX(4px); }
}

/* Pathway -----------------------------------------------------------------
   A genuinely ordered sequence, so it is drawn as one. A connecting rule and a
   marker carry the order; there are no numerals, which would read as the
   numbered list the house style does without. The <ol> keeps the order for
   assistive tech, which is where it belongs. */
.pathway { list-style: none; margin: 0; padding: 0; }
.pathstep {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-6);
  border-left: 1px solid var(--line);
}
.pathstep:last-child { padding-bottom: 0; border-left-color: transparent; }
.pathstep::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--violet);
  transform: translateX(-5px);
}
/* The last step has no rule under it, so its dot needs the line it sits on. */
.pathstep:last-child::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 0.45em;
  background: var(--line);
}
.pathstep__title { font-size: var(--step-2); margin: 0; }
.pathstep__text {
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--lh-body);
  margin: var(--space-2) 0 0;
  max-width: 62ch;
}

/* Contents rail -----------------------------------------------------------
   Sticky on wide screens, and a plain list above it. aria-current marks the
   section in view; app.js sets it. */
.contents { margin-bottom: var(--space-5); }
.contents__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.contents__list a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.contents__list a:hover { color: var(--violet); }
.contents__list a[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--violet);
}

@media (min-width: 64rem) {
  .overview__inner { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-8); }
  .overview__aside { position: sticky; top: 6.5rem; align-self: start; }
  /* The rail is the tallest thing in the column on a long page; let it scroll
     inside itself rather than run off the bottom of the viewport. */
  .overview__aside { max-height: calc(100vh - 8rem); overflow-y: auto; }
}

/* On narrow screens the rail sits above the body, where a stuck jump-list
   would eat the screen. */
@media (max-width: 63.999rem) {
  .overview__inner { display: flex; flex-direction: column; }
  .overview__aside { order: -1; }
  .overview__aside .aside__panel { display: none; }
}

/* --------------------------------------------------- standard page ------ */
/* Legals and anything else that is just a document. One column, no sidebar.
   Full width block, but the measure still governs the line: widening the page
   must never widen a line of body copy. */

.page__inner { display: grid; gap: var(--space-5); }
.page__inner > * { max-width: var(--maxw-prose); }
.page__updated {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin: 0;
}

/* ------------------------------------------------------------- blog ----- */
/* Same geometry as .teamcard: media in a fixed left column, text beside it,
   hairline between rows. A post without an image simply starts at the text
   column, so the list does not go ragged when only some posts are illustrated. */

.postlist__list { list-style: none; margin: 0; padding: 0; }
.postcard { position: relative; display: grid; gap: var(--space-3); }
.postcard + .postcard {
  border-top: 1px solid var(--line);
  margin-top: var(--space-7);
  padding-top: var(--space-7);
}
.postcard__media { display: block; border-radius: var(--radius); overflow: hidden; }
.postcard__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-panel) var(--ease-out);
}
.postcard__title { font-size: var(--step-4); margin: 0; }
.postcard__title a { color: inherit; text-decoration: none; }
/* The link stretches over the whole row. On its own the title is a 36px tall
   target, which is tight for an audience this site deliberately sets large
   type for; this way the image, the meta line and the standfirst are all part
   of the same press. Everything else in the row stays non-interactive, so
   there is still one link per post rather than three. */
.postcard__title a::after { content: ""; position: absolute; inset: 0; }
.postcard__text {
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--lh-body);
  margin: 0;
  max-width: 62ch;
}

/* Date and category read as one line of metadata, not two elements. */
.postcard__meta,
.postmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--step--2);
  color: var(--ink-faint);
}
/* The separators inherit the meta colour. Setting them to --line made them a
   hairline-coloured glyph at 1.31:1, which is a rule colour used as type. */

@media (hover: hover) and (pointer: fine) {
  .postcard__title a:hover { color: var(--violet); }
  .postcard:hover .postcard__media img { transform: scale(1.04); }
}

@media (min-width: 48rem) {
  .postcard {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: start;
  }
  .postcard__media { grid-row: span 3; }
  /* An unillustrated post keeps the text in the same column as the rest. */
  .postcard:not(:has(.postcard__media)) > * { grid-column: 2; }
}

/* Pagination -------------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.pagination a,
.pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-muted);
}
.pagination__current { background: var(--lilac); color: var(--ink); font-weight: 600; }
.pagination a:hover { color: var(--violet); background: var(--paper-tint); }
.pagination__next { margin-left: auto; font-weight: 600; color: var(--violet); }
.pagination__next .arr { transition: transform var(--dur-hover) var(--ease-out); }
.pagination__next:hover .arr { transform: translateX(4px); }

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

.searchform {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  max-width: 34rem;
}
.searchform input {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  font-size: var(--step--1);
  line-height: 1.3;
  padding: 0.5em 0.7em;
  min-height: 2.75rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.searchform input::placeholder { color: var(--ink-faint); }
/* On plum the field needs its own light ground: a transparent input on a dark
   surface with dark text is the classic invisible search box. */
[data-surface="plum"] .searchform input,
[data-surface="deep"] .searchform input { border-color: transparent; }

.results__inner { display: grid; gap: var(--space-5); }
.results__count { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }
.results__count strong { color: var(--ink); font-weight: 600; }

.results__list { list-style: none; margin: 0; padding: 0; }
.result { position: relative; border-top: 1px solid var(--line); padding-block: var(--space-5); }
.result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}
.result__crumb { font-size: var(--step--2); color: var(--ink-faint); }
.result__title { font-size: var(--step-3); margin: 0; }
.result__title a { color: inherit; text-decoration: none; }
.result__title a:hover { color: var(--violet); }
/* Same stretched link as .postcard: the whole result row is the target, not
   the single line of the title. */
.result__title a::after { content: ""; position: absolute; inset: 0; }
.result__text {
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--lh-body);
  margin: var(--space-2) 0 0;
  max-width: 62ch;
}
.results__empty { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.results__emptytext { color: var(--ink-muted); margin: 0 0 var(--space-4); max-width: 56ch; }

/* -------------------------------------------------------------- 404 ----- */
/* Not a page with a header on it: the whole screen is the message. */

.notfound { display: flex; align-items: center; min-height: 68vh; }
.notfound__inner { padding-block: var(--space-9); max-width: 46rem; }
.notfound__title {
  font-size: var(--step-8);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0 0 var(--space-4);
}
.notfound__lead {
  font-size: var(--step-2);
  color: var(--on-plum-muted);
  margin: 0 0 var(--space-6);
  max-width: 48ch;
}

/* Shared by the 404 and the empty search: a short list of ways out. */
.linklist { list-style: none; margin: 0; padding: 0; display: grid; }
.linklist li + li { border-top: 1px solid var(--line); }
[data-surface="plum"] .linklist li + li,
[data-surface="deep"] .linklist li + li { border-top-color: var(--line-plum); }
.linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 2.75rem;
  padding-block: var(--space-3);
  text-decoration: none;
  color: inherit;
  font-size: var(--step-0);
}
.linklist .arr { color: var(--violet); transition: transform var(--dur-hover) var(--ease-out); }
[data-surface="plum"] .linklist .arr,
[data-surface="deep"] .linklist .arr { color: var(--peri); }
.linklist a:hover .arr { transform: translateX(4px); }

/* ------------------------------------------------------------- CTA band -- */

.ctaband__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-8);
}
.ctaband[data-surface="paper"] .ctaband__inner,
.ctaband[data-surface="tint"] .ctaband__inner { border-top: 1px solid var(--line); }
.ctaband__title { font-size: var(--step-6); }
.ctaband__text { color: var(--ink-muted); margin: var(--space-3) 0 0; }
[data-surface="plum"] .ctaband__text,
[data-surface="deep"] .ctaband__text { color: var(--on-plum-muted); }

@media (min-width: 58rem) {
  .ctaband__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); }
}

/* -------------------------------------------------------------- footer --- */

.sitefooter { background: var(--plum-deep); color: var(--on-plum); }
.sitefooter__inner { display: grid; gap: var(--space-6); padding-block: var(--space-8) var(--space-6); }
.sitefooter h2 { font-size: var(--step--2); font-family: var(--font-text); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--peri); margin: 0 0 var(--space-4); }
.sitefooter ul { list-style: none; margin: 0; padding: 0; }
.sitefooter__blurb { margin-top: var(--space-4); color: var(--on-plum-muted); font-size: var(--step--1); }
.sitefooter li + li { margin-top: var(--space-2); }
.sitefooter a { color: var(--on-plum-muted); text-decoration: none; font-size: var(--step--1); }
.sitefooter a:hover { color: var(--on-plum); }

/* Menu items are full-width blocks so the whole row is a press target, not just
   the glyphs. The vertical padding replaces the list's own spacing, so the
   rhythm is unchanged while the hit area roughly doubles. Legal row is left as
   inline text on purpose. */
.sitefooter__inner ul a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;          /* 44px: the touch target floor */
  padding-block: var(--space-1);
  transition: color var(--dur-hover) ease,
              transform var(--dur-hover) var(--ease-out);
}
.sitefooter__inner li + li { margin-top: 0; }

@media (hover: hover) and (pointer: fine) {
  .sitefooter__inner ul a:hover { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .sitefooter__inner ul a { transition: color var(--dur-hover) ease; }
  .sitefooter__inner ul a:hover { transform: none; }
}
.sitefooter__legal {
  border-top: 1px solid var(--line-plum);
  padding-block: var(--space-4);
  font-size: var(--step--2);
  color: var(--on-plum-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  align-items: baseline;
}
.sitefooter__legal p { margin: 0; max-width: none; }
/* the legal row sets its own size; without this the links inherit the larger
   footer link size and sit a step above the copyright beside them */
.sitefooter__legal a { font-size: inherit; }

.sitefooter__terms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-4);
}

@media (min-width: 52rem) {
  .sitefooter__inner { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
}

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

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Reduced means gentler, not nothing: keep the fade, drop the movement.
     The !important is needed, not decorative: the blanket rule above forces
     every duration to 0.01ms with !important, so without it this fade was
     being overridden to nothing and the intent above was not what shipped. */
  [data-reveal] { transform: none; transition: opacity 200ms linear !important; }

  /* The drawer follows the same idea: it fades, it does not travel, and the
     second tier cross-fades in place instead of sliding across. */
  .drawer { transform: none; transition: opacity 200ms linear !important; }
  .drawer__panel:not(.drawer__panel--sub) > * { transform: none; }
  .drawer__panel--sub {
    transform: none;
    opacity: 0;
    box-shadow: none;
    transition: opacity 200ms linear !important;
  }
  .drawer__panel--sub.is-open { opacity: 1; }
}

/* ------------------------------------------------------------ utility ---- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; left: var(--gutter); top: -4rem;
  background: var(--paper); color: var(--violet);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  z-index: 100; transition: top var(--dur-panel) var(--ease-out);
}
.skiplink:focus { top: var(--space-3); }