/* ==========================================================================
   Ataraxy Mediation — Core design system
   Extracted and adapted from the Ataraxy Training Webflow export.
   ========================================================================== */

:root {
  /* Typography */
  --font-main: "Open Sans", sans-serif;
  --fs-h1: clamp(2.25rem, 3vw + 1rem, 3rem);
  --fs-h2: clamp(1.9rem, 2.4vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.3rem, 1vw + 1rem, 1.6rem);
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-xs: 0.8rem;
  --lh-body: 1.6;

  /* Colors */
  --c-bg: #ffffff;
  --c-ink: #333f4b;
  --c-heading: #56697c;
  --c-heading-soft: #6b7f92;
  --c-cream: #faf3e6;
  --c-teal-tint: #e9f5f5;
  --c-grey-tint: #f1f1f1;
  /* Hover and tap fill on white surfaces. Carries a trace of blue so it sits in
     the same family as the slate text rather than reading as dirty beside it,
     and is deep enough to register on a phone in daylight, which --c-grey-tint
     at #f1f1f1 is not. */
  --c-grey-soft: #e9edf2;
  --c-border: #e2e2e2;
  --c-btn-dark: #56697c;
  --c-btn-dark-hover: #45525f;
  --c-white: #ffffff;

  /* Decorative accent gradients (numbered chips, small pills) */
  --grad-lavender: linear-gradient(39deg, #e3e6ff, #f5f6ff 44.8%, #f2f3ff);
  --grad-teal: linear-gradient(39deg, #e5f8f8, #f4fdfd 44.8%, #e9f2f1);
  --grad-peach: linear-gradient(39deg, #f8f4d9, #f8f5ef 44.8%, #efe4d3);

  /* Spacing scale. The token name is its pixel value at the default root font
     size, so a declaration says what it does without a lookup. Values are in
     rem so the whole scale still answers to the browser's text size.

     Every step sits on a 4px grid. Dense at the bottom, where component padding
     and icon gaps live, doubling at the top, where section rhythm lives. Reach
     for the nearest step rather than adding one: 30px is not on the grid, and
     --sp-32 is indistinguishable from it in a stacked gap.

     No literal spacing value belongs in a declaration below. If a design needs
     something genuinely off-grid, that is a reason to add a step here and name
     it, so the second use finds it. */
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-96: 6rem;
  --sp-128: 8rem;

  /* The t-shirt names this scale replaces. Aliases, not second definitions, so
     each value still has one home. The 48 declarations already using these keep
     working untouched; new work should use the numbered steps, and these go once
     the last caller is converted. */
  --sp-xs: var(--sp-16);
  --sp-sm: var(--sp-24);
  --sp-md: var(--sp-32);
  --sp-lg: var(--sp-40);
  --sp-xl: var(--sp-48);
  --sp-xxl: var(--sp-128);

  /* Radii */
  --radius-outer: 1rem;
  --radius-main: 0.6rem;
  --radius-inner: 0.5rem;

  /* Shadows */
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-card: 8px 11px 50px -8px rgba(152, 152, 152, 0.4);
}

/* ==========================================================================
   Base
   ========================================================================== */

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background-color: var(--c-bg);
  margin: 0;
}

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

a {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-xs);
  font-weight: 300;
  color: var(--c-heading);
  line-height: 1.2;
}

p {
  margin: 0 0 1rem;
}

.container {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-xl);
  padding-right: var(--sp-xl);
}

.section {
  width: 100%;
  position: relative;
}

.section--spacer {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.section--spacer-lg {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.section--spacer-compact {
  padding-top: 3.5rem;
  padding-bottom: 1rem;
}

.section-heading {
  font-size: var(--fs-h2);
  text-align: center;
  margin-bottom: var(--sp-md);
}

.section-heading--left {
  text-align: left;
}

.section-intro {
  max-width: 640px;
  margin: 0 auto var(--sp-xxl);
  text-align: center;
}

/* Faint decorative ripple circles used behind several sections */
.ripple-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.section > .container {
  position: relative;
  z-index: 1;
}

.ripple-bg img {
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: 900px;
  max-width: none;
  opacity: 0.5;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-main);
  font-family: var(--font-main);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn--primary {
  background-color: var(--c-btn-dark);
  border-color: var(--c-btn-dark);
  color: var(--c-white);
  box-shadow: var(--shadow-soft);
}

.btn--primary:hover {
  background-color: var(--c-btn-dark-hover);
  border-color: var(--c-btn-dark-hover);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--c-heading-soft);
  color: var(--c-heading);
}

.btn--outline:hover {
  background-color: var(--c-heading);
  border-color: var(--c-heading);
  color: var(--c-white);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ==========================================================================
   Nav — structure, values and interaction states matched to the
   Ataraxy Training Webflow export (nav-header_* classes).
   ========================================================================== */

.nav-header_bg-fade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 100%);
  z-index: 998;
  pointer-events: none;
}

.nav-header_wrapper {
  z-index: 999;
  padding-right: var(--sp-lg);
  padding-left: var(--sp-lg);
  margin-top: 40px;
  position: sticky;
  top: 20px;
}

.nav-header_container {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
}

.nav-header-logo_container {
  display: inline-flex;
  padding: 0.1rem 0.2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-outer);
  background-color: var(--c-white);
  align-self: center;
  box-shadow: 0 0 #0000;
  transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
    border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.nav-header-logo_container:hover {
  border-color: var(--c-border);
  box-shadow: 0 2px 30px 3px rgba(0, 0, 0, 0.2);
}

.nav-header-logo_container img {
  height: 49px;
  width: auto;
  display: block;
}

.nav-header_list {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  align-self: center;
  display: flex;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-header_item {
  z-index: 999;
  padding: 1rem;
  border-radius: 8rem;
  border: 1px solid transparent;
  font-size: var(--fs-small);
  color: var(--c-heading);
  text-decoration: none;
  transition: all 0.26s cubic-bezier(0.645, 0.045, 0.355, 1);
  position: relative;
  overflow: visible;
  display: block;
}

.nav-header_item:hover {
  border: 1px solid var(--c-border);
  box-shadow: 0 0 19px 1px rgba(255, 255, 255, 0.15), inset 0 0 11px 2px rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.09);
  border-radius: 8rem;
  overflow: hidden;
}

.nav-header_item[aria-current="page"] {
  border: 1px solid var(--c-border);
  background-color: rgba(255, 255, 255, 0.09);
}

.nav-header_btn-text {
  z-index: 999;
  position: relative;
}

.btn-back-blur_effect {
  z-index: 0;
  background-color: rgb(255 255 255 / 45%);
  opacity: 1;
  filter: blur(12px);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  mix-blend-mode: darken;
  border-radius: 8rem;
  transition: border-radius 0.26s cubic-bezier(0.645, 0.045, 0.355, 1);
  position: absolute;
  inset: 0%;
}

/* Hamburger — hidden on desktop, drives the Lottie menu icon on mobile */
.ham-btn {
  z-index: 999;
  background-color: var(--c-white);
  width: 50px;
  height: 50px;
  display: none;
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
}

.ham-btn svg path {
  stroke: var(--c-heading) !important;
}

@media screen and (max-width: 991px) {
  .nav-header-logo_container {
    align-self: flex-start;
  }

  .nav-header_list {
    width: 70vw;
    height: 80vh;
    padding: var(--sp-lg) var(--sp-xs) var(--sp-sm) var(--sp-sm);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-main);
    background-color: var(--c-white);
    flex-flow: column;
    justify-content: center;
    align-items: stretch;
    display: none;
    position: fixed;
    top: 19px;
    right: 38px;
    box-shadow: 0 2px 40px 20px rgba(0, 0, 0, 0.21);
  }

  .nav-header_list.is-open {
    display: flex;
  }

  .nav-header_item {
    color: var(--c-heading);
    border-width: 0 0 1px;
    border-color: var(--c-border);
    border-radius: 0;
    text-align: center;
  }

  .nav-header_item:hover {
    box-shadow: none;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .nav-header_item[aria-current="page"] {
    border-width: 0 0 1px;
    border-radius: 0;
    background-color: var(--c-grey-tint);
  }

  .btn-back-blur_effect {
    filter: none;
    display: none;
  }

  .ham-btn {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-inner);
    width: 50px;
    height: 50px;
    padding: 5px;
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .nav-header_list {
    width: 96vw;
    top: 72px;
    right: 8px;
  }

  .nav-header_item {
    padding-top: var(--sp-lg);
    padding-bottom: var(--sp-lg);
  }

  .ham-btn {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   Homepage header v2 — gradient/glass concept, homepage only
   (scoped under the --v2 modifier classes; does not affect other pages)
   ========================================================================== */

.nav-header_bg-fade--v2 {
  height: 190px;
  background: linear-gradient(180deg, #5c728d 0%, rgb(92 114 141 / 0%) 100%);
}

.nav-header_wrapper--v2 {
  margin-top: 0;
  top: 0;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.nav-header-logo_container--v2 {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.nav-header-logo_container--v2:hover {
  border: none;
  box-shadow: none;
}

.nav-header-logo_container--v2 img {
  height: 85px;
  width: auto;
}

/* The logo is a flex sibling of the nav, so it is the item flex picks on to
   absorb every pixel the nav needs. Pinning it stops that: inside the swap
   band the lockup is replaced by the square icon, which keeps its own width
   and proportions no matter how wide the nav grows. */
.nav-header-logo_container--v2 {
  flex-shrink: 0;
}

.nav-header-logo_container .nav-header-logo_icon {
  display: none;
  max-width: none;
  flex-shrink: 0;
}

/* The icon only earns its place where the nav tabs compete with the logo for
   horizontal room. Upper edge is measured: lockup (299px) + nav (1017px
   after the group gap below) + 2 x 40px wrapper padding = 1396px, so the
   lockup starts being compressed at 1395px and the swap sits one step
   earlier at 1400px. Lower edge is 992px, where the tabs collapse into the
   hamburger and stop competing, so the lockup comes back. */
@media screen and (min-width: 992px) and (max-width: 1400px) {
  .nav-header-logo_container--v2 .nav-header-logo_lockup {
    display: none;
  }

  .nav-header-logo_container--v2 .nav-header-logo_icon {
    display: block;
  }
}

.nav-header_wrapper--v2 .nav-header_list {
  gap: 10px;
}

.nav-header_group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  box-shadow: inset 0 10px 12px -8px rgba(255, 255, 255, 0.25);
  padding: 0.6rem;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: background-color 0.26s cubic-bezier(0.645, 0.045, 0.355, 1),
    border-color 0.26s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* "Becoming a mediator" is the outbound CTA and sits alone in its own
   group, so it gets its own hover: the whole group surface fills white and
   the label plus the external-link glyph flip to the dark heading colour,
   instead of the button stroke the other tabs reveal. Desktop only, since
   on mobile the group is display:contents and paints no surface. */
@media screen and (min-width: 992px) {
  .nav-header_group--cta:hover {
    background-color: var(--c-white);
    border-color: var(--c-white);
  }

  .nav-header_wrapper--v2 .nav-header_group--cta:hover .nav-header_item,
  .nav-header_wrapper--v2 .nav-header_group--cta:hover .nav-header_item:hover {
    color: var(--c-heading);
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
  }

  .nav-header_group--cta:hover .icon-external {
    fill: var(--c-heading);
  }
}

.nav-header_wrapper--v2 .nav-header_item {
  font-size: 16px;
  color: #fff;
  padding: 0.65rem 0.85rem;
  border-radius: 7px;
  white-space: nowrap;
}

.nav-header_wrapper--v2 .nav-header_item:hover,
.nav-header_wrapper--v2 .nav-header_item[aria-current="page"] {
  border: 1px solid #fff;
  border-radius: 7px;
  background-color: transparent;
  box-shadow: none;
}

.nav-header_wrapper--v2 .nav-header_item.nav-dropdown_trigger:hover {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}

.nav-header_wrapper--v2 .btn-back-blur_effect {
  display: none;
}

.nav-header_wrapper--v2 .nav-header_btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-header_wrapper--v2 .icon-external {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: fill 0.26s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Icon (119px) + nav (1017px) + 2 x 40px wrapper padding = 1216px, so below
   that the nav no longer fits even with the icon in place. Tighten the nav
   itself for the last stretch before the mobile menu takes over at 991px,
   rather than letting the header overflow the viewport. Must sit after the
   base --v2 nav rules above so it wins on source order. */
@media screen and (max-width: 1215px) {
  .nav-header_wrapper--v2 {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
  }

  .nav-header-logo_container--v2 img {
    height: 60px;
  }

  .nav-header_wrapper--v2 .nav-header_list {
    gap: 5px;
  }

  .nav-header_wrapper--v2 .nav-header_group {
    padding: 0.4rem;
    gap: 5px;
  }

  .nav-header_wrapper--v2 .nav-header_item {
    font-size: 14px;
    padding: 0.55rem 0.5rem;
  }
}

/* ==========================================================================
   Nav dropdown — "Understanding conflict" (homepage only)
   ========================================================================== */

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown_trigger {
  position: relative;
  z-index: 2;
}

.nav-dropdown_chevron {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: transform 0.2s ease, fill 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown_chevron,
.nav-dropdown:focus-within .nav-dropdown_chevron {
  transform: rotate(180deg);
  fill: #95a3b5;
}

.nav-dropdown_panel {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
  z-index: 1;
}

.nav-dropdown:hover .nav-dropdown_panel,
.nav-dropdown:focus-within .nav-dropdown_panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown_panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  background-color: #5c728d;
  border-radius: 16px;
  padding: 58px 0.9rem 0.9rem;
  box-shadow: 0 14px 30px rgba(92, 114, 141, 0.45);
}

.nav-dropdown_item {
  display: block;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
  text-wrap: auto;
}

.nav-dropdown_item:hover,
.nav-dropdown_item:focus-visible {
  background-color: #677E9B;
}

@media screen and (max-width: 991px) {
  .nav-dropdown_panel,
  .nav-dropdown_chevron {
    display: none;
  }

  /* The two dropdown triggers are the only items wrapped in an extra element,
     and that wrapper is display:flex for the desktop tab strip. Once the group
     above collapses to display:contents, .nav-dropdown stretches to the full
     width of the column but the trigger inside it is a flex item, and a flex
     item sizes to its content on the main axis. So the anchor stayed as narrow
     as its label while every other item filled the row, and the hover and tap
     fill only painted that short box.

     Dropping the wrapper to block makes the trigger an ordinary block child
     that fills the width, which is what the other items already were. Scoped
     to this breakpoint on purpose: the base rule still needs flex and
     align-items: center to seat the trigger in the desktop strip, and it needs
     to stay a block-level containing block for .nav-dropdown_panel, which is
     absolutely positioned at width: 100% against it. */
  .nav-dropdown {
    display: block;
  }
}

@media screen and (max-width: 991px) {
  .nav-header_group {
    display: contents;
  }

  /* Lockup returns once the tabs collapse into the hamburger, scaled to fit
     beside it rather than left at its desktop size. At 60px tall the lockup
     is 211px wide, so the narrowest case (320px viewport, 48px of wrapper
     padding, 40px button) still leaves 21px between the two. 60px also
     matches the icon height in the band just above, so the header does not
     change height across the swap. The container keeps flex-shrink: 0, so
     this is a smaller lockup rather than a compressed one. Selector carries
     the wrapper class to outrank .nav-header-logo_container--v2 img. */
  .nav-header_wrapper--v2 .nav-header-logo_container--v2 img {
    height: 60px;
    width: auto;
    max-width: 211px;
  }

  /* The open mobile menu is a white sheet, not the slate of the desktop
     dropdown. On a phone this panel covers most of the hero, so a light
     surface keeps the page feeling open where a near-full-bleed slate fill
     read as a modal. It now matches the shared mobile menu the other pages
     use, so the two are one component again. The geometry is kept from the
     slate version, since auto height with an internal scroll and left-aligned
     items handles a long list better than the shared menu's centred 80vh box.

     A white sheet needs the hairline border back: the slate fill separated
     itself from the hero photo, white over a bright sky does not. The shadow
     loses its blue cast for the same reason, and is thrown a little further so
     the sheet still lifts off a light background. */
  .nav-header_wrapper--v2 .nav-header_list {
    height: auto;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    gap: 0.35rem;
    padding: 0.9rem;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    background-color: var(--c-white);
    justify-content: flex-start;
    box-shadow: 0 14px 34px rgba(51, 63, 75, 0.18);
  }

  /* Type moves up from the desktop 16px and takes the heading slate. Light text
     on a dark fill gains apparent weight from halation, so carrying the same
     16px straight onto white would have read thinner than it did on the slate;
     17px holds the presence the panel had. Weight stays 400 because these are
     the only navigation on the page at this width and should read as plain
     language, with 600 reserved below to mark where you already are. 300 and
     600 are the neighbouring loaded weights, so 500 is not available to
     synthesise cleanly.

     Contrast on white is 6.1:1, and 5.2:1 on the tap fill below. */
  .nav-header_wrapper--v2 .nav-header_item {
    font-size: 1.0625rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--c-heading);
    padding: 0.85rem 1.1rem;
    border: none;
    border-radius: 10px;
    background-color: transparent;
    text-align: left;
    white-space: normal;
    transition: background-color 0.15s ease;
  }

  /* Same hover and tap behaviour as the slate panel, a filled rounded row, in
     soft grey instead of the lighter blue. :active carries it on touch, where
     :hover either never fires or sticks after the tap.

     The .nav-dropdown_trigger variants are listed explicitly: the desktop
     rule that keeps triggers flat on hover outranks the plain item selector
     here, and there is no panel to open on mobile anyway. */
  .nav-header_wrapper--v2 .nav-header_item:hover,
  .nav-header_wrapper--v2 .nav-header_item:focus-visible,
  .nav-header_wrapper--v2 .nav-header_item:active,
  .nav-header_wrapper--v2 .nav-header_item[aria-current="page"],
  .nav-header_wrapper--v2 .nav-header_item.nav-dropdown_trigger:hover,
  .nav-header_wrapper--v2 .nav-header_item.nav-dropdown_trigger:focus-visible,
  .nav-header_wrapper--v2 .nav-header_item.nav-dropdown_trigger:active {
    border: none;
    border-radius: 10px;
    box-shadow: none;
    background-color: var(--c-grey-soft);
  }

  /* The current page shared its fill with hover on the slate panel, which left
     the two indistinguishable once tapping began. Weight separates them without
     spending a second colour. */
  .nav-header_wrapper--v2 .nav-header_item[aria-current="page"] {
    font-weight: 600;
  }

  /* Both the chevron and this glyph carry fill="#ffffff" in the markup, so the
     colour has to be taken back in CSS or the icon vanishes on the white sheet.
     The chevron is display:none at this width; this one is not. */
  .nav-header_wrapper--v2 .icon-external {
    fill: var(--c-heading);
  }

  .nav-header_wrapper--v2 .ham-btn {
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
}

/* The v2 header is taller (110px logo + padding) than the shared nav, so the
   hero-under-nav offset needs its own value here — scoped to the homepage
   via the sibling combinator so the shared .hero rule stays untouched. */
.nav-header_wrapper--v2 ~ main .hero {
  margin-top: -150px;
  padding-top: 150px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background-image: url("../images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  margin-top: -97px; /* pulls hero photo up under the transparent nav */
  padding-top: 97px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 25, 30, 0.15), rgba(20, 25, 30, 0.05) 40%);
  pointer-events: none;
}

.hero_card-wrap {
  position: relative;
  max-width: 640px;
  margin: 6rem auto;
}

.hero_card-frame {
  position: absolute;
  inset: -1.5rem;
  z-index: 0;
  border: 1px solid var(--c-border);
  border-radius: calc(var(--radius-outer) + 1rem);
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.hero_card {
  position: relative;
  z-index: 1;
  background-color: var(--c-white);
  border-radius: var(--radius-outer);
  box-shadow: var(--shadow-card);
  padding: var(--sp-xl);
  text-align: center;
}

.hero_card h1 {
  font-size: var(--fs-h1);
}

.hero_card p {
  color: var(--c-ink);
}

/* Homepage hero v2 — text sits directly on the photo, left-aligned,
   no card/panel. Scoped to .hero--v2 so the shared .hero rule (used by
   other pages) stays untouched. */

.hero--v2::after {
  background: linear-gradient(90deg, rgba(10, 14, 18, 0.55) 0%, rgba(10, 14, 18, 0.28) 42%, rgba(10, 14, 18, 0) 68%),
    linear-gradient(180deg, rgba(10, 14, 18, 0.25) 0%, rgba(10, 14, 18, 0) 45%);
}

.hero_content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  text-align: left;
  color: #fff;
}

.hero_content h1 {
  color: #fff;
  font-size: var(--fs-h1);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero_content p {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* Homepage hero ripple — the brand mark blown up and bled off the right
   edge, exactly as in the design reference. Everything is expressed as a
   percentage of the hero box so the mark keeps the reference proportions
   at any width: at a 1920px hero it lands on x 899–2350, centred on the
   y = 514 line (48.4% of the 1062px reference hero). The section already
   clips overflow via .has-parallax. */
.hero_ripple {
  position: absolute;
  top: 48.4%;
  right: -22.396%; /* (2350 - 1920) / 1920 — the mark bleeds off-canvas */
  z-index: 0;
  width: 75.573%; /* 1451 / 1920 */
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  /* Essence, 2026-08-07: the rings read as too solid a white and pull the eye
     off the headline. Stepped back here rather than in the SVG's gradient
     stops, so the left-to-right fade the mark inherits from the brand icon
     keeps its shape and only the whole mark gets quieter. */
  opacity: 0.45;
}

/* Rings expand out of their own centre, inner first, so the mark arrives
   like a ripple spreading across water. */
.hero_ripple-ring {
  transform-box: fill-box;
  transform-origin: center;
}

.js-enabled .hero_ripple-ring {
  opacity: 0;
  animation: hero-ripple-in 2.6s var(--ripple-delay, 0s) cubic-bezier(0.19, 0.75, 0.3, 1) both,
    hero-ripple-breathe 9s calc(var(--ripple-delay, 0s) + 2.6s) ease-in-out infinite;
}

@keyframes hero-ripple-in {
  from {
    opacity: 0;
    transform: scale(0.76);
  }

  60% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Barely-there drift once settled, so the water never looks frozen. */
@keyframes hero-ripple-breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.012);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-enabled .hero_ripple-ring {
    opacity: 1;
    animation: none;
  }
}

/* Decorative only — step it back so it never fights the copy on phones. Stays
   below the desktop value above, since the copy takes proportionally more of
   the hero at this width. */
@media (max-width: 900px) {
  .hero_ripple {
    opacity: 0.3;
  }
}

.btn--ghost {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: #fff;
}

.btn-arrow {
  display: inline-block;
}

/* ==========================================================================
   Motion — parallax backgrounds + scroll reveals. Site-wide system.
   Opt-in via [data-parallax] / [data-reveal] hooks (plus the .has-parallax
   helper below) — apply the same markup on any page/section to adopt it.
   ========================================================================== */

/* Any section that hosts a [data-parallax] layer needs to clip its
   oversized travel area and give its real content an explicit stacking
   order so it always paints above the parallax layer. Generic hook —
   not tied to the homepage --v2 variants, so it works on any page. */
.has-parallax {
  overflow: hidden;
}

.has-parallax > .container {
  position: relative;
  z-index: 1;
}

[data-parallax] {
  position: absolute;
  top: -200px;
  bottom: -200px;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}

/* Reveal: fully visible/interactive by default. Only hides once JS
   confirms it's active (html.js-enabled), per progressive enhancement. */
html.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 2.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-enabled [data-reveal].is-revealed {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-parallax] {
    transform: none !important;
  }

  .pill-accent {
    animation: none !important;
  }
}

/* ==========================================================================
   Feature card grid ("Where can family mediation help?")
   ========================================================================== */

.help-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.25rem;
  align-items: stretch;
}

/* gap is a floor, not a fixed distance, so this needs no breakpoint. On desktop
   the card is stretched to the height of the card grid beside it and
   space-between still does the work; the gap only shows up once the card
   collapses to its own content and the heading and button would otherwise
   touch. */
.help-intro {
  background: linear-gradient(135deg, #eaf6f6, #faf6ee);
  border-radius: var(--radius-outer);
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-32);
}

.help-intro h2 {
  font-size: var(--fs-h2);
  margin: 0;
}

/* minmax(0, 1fr) rather than 1fr: a plain 1fr track carries an automatic
   min-content floor, so the longest unbreakable word in a card
   ("Intergenerational") was forcing the whole grid, and with it the page,
   wider than the viewport below ~400px. */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.help-card {
  border-radius: var(--radius-outer);
  padding: var(--sp-sm);
  min-height: 160px;
  font-size: 1.05rem;
  color: var(--c-heading);
  overflow-wrap: break-word;
}

.help-card:nth-child(3) {
  grid-column: 1;
}

.help-card--cream { background-color: var(--c-cream); }
.help-card--teal { background-color: var(--c-teal-tint); }
.help-card--grey { background-color: var(--c-grey-tint); }

/* ==========================================================================
   "Why choose mediation" — glass card over photo
   ========================================================================== */

.why-choose {
  position: relative;
  background-image: url("../images/why-choose-bg.jpg");
  background-size: cover;
  background-position: center;
  padding-top: 6rem;
  padding-bottom: 9rem;
}

.why-choose .section-heading {
  color: var(--c-white);
  margin-bottom: 6rem;
}

.why-choose_card-wrap {
  position: relative;
  margin-top: var(--sp-xl);
}

.why-choose_card {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-outer);
  box-shadow: var(--shadow-card);
  padding: var(--sp-xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}

/* The fill is stretched to 300% of the pill's width so background-position
   has somewhere to travel; the colour stops themselves are untouched, so the
   pill only ever shows the same shades sliding gently left and right. */
.pill-accent {
  width: 90px;
  height: 18px;
  border-radius: var(--radius-main);
  margin-bottom: 0.75rem;
  background-size: 300% 100%;
  background-position: 0% 50%;
  animation: pill-accent-drift 14s ease-in-out infinite;
}

@keyframes pill-accent-drift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* background-image, not the background shorthand: the shorthand would reset
   the background-size the drift above depends on. */
.why-choose_card > div:nth-child(1) .pill-accent { background-image: var(--grad-lavender); }
.why-choose_card > div:nth-child(2) .pill-accent { background-image: var(--grad-teal); }
.why-choose_card > div:nth-child(3) .pill-accent { background-image: var(--grad-peach); }

.why-choose_card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
}

.why-choose_card p {
  font-size: 1rem;
  margin: 0;
}

/* ==========================================================================
   "How the process works" — numbered steps
   ========================================================================== */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.step-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-outer);
  padding: var(--sp-sm);
  background-color: var(--c-white);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-inner);
  font-size: 1.3rem;
  color: var(--c-heading);
  margin-bottom: 1rem;
}

.step-card:nth-child(4n+1) .step-number { background: var(--grad-lavender); }
.step-card:nth-child(4n+2) .step-number { background: var(--grad-teal); }
.step-card:nth-child(4n+3) .step-number { background: var(--grad-peach); }
.step-card:nth-child(4n+4) .step-number { background: var(--grad-lavender); }

.step-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.step-card p {
  font-size: 1rem;
  color: var(--c-ink);
  margin: 0;
}

/* ==========================================================================
   "Other ways we can help" — image cards
   ========================================================================== */

.other-ways_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.other-ways_card {
  display: block;
  border-radius: var(--radius-outer);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.other-ways_card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.other-ways_card-body {
  padding: var(--sp-sm);
}

.other-ways_card-body h2,
.other-ways_card-body h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.other-ways_card-body p {
  font-size: 1rem;
  margin: 0;
}

.other-ways_card--cream .other-ways_card-body { background-color: var(--c-cream); }
.other-ways_card--teal .other-ways_card-body { background-color: var(--c-teal-tint); }

.other-ways_card--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-outer);
  overflow: hidden;
  background-color: var(--c-grey-tint);
}

.other-ways_card--wide img {
  height: 100%;
  min-height: 320px;
  max-height: 320px;
  object-fit: cover;
}

.other-ways_card--wide .other-ways_card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Ripple overlays on the card photos ---------------------------------- */

/* The media wrapper is the positioning and clipping context. Without it the
   overlay would clip to the whole card and spill over the text body, and the
   rings need to cut off at the photo edge the way the reference does. */
.other-ways_card-media {
  position: relative;
  overflow: hidden;
}

/* The photo keeps the sizing it had before the wrapper was introduced. It is
   still matched by the .other-ways_card img rules above; this only restores
   the full-bleed width the img had as a direct grid item on the wide card. */
.other-ways_card-media > img:first-child {
  display: block;
  width: 100%;
}

/* Decorative only: aria-hidden and alt="" in the markup, pointer-events off so
   the overlay never swallows a click. min-height/max-height are reset because
   the photo rules above also match this img and would otherwise stretch it. */
.other-ways_card-media .other-ways_ripple {
  position: absolute;
  height: auto;
  min-height: 0;
  max-height: none;
  max-width: none;
  opacity: 0.55;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Widths are percentages of the media box, so every placement below survives
   the drop to the single-column mobile layout without a separate breakpoint.
   Each selector carries .other-ways_card-media so it outranks the
   ".other-ways_card img { width: 100% }" rule above, which is otherwise more
   specific than a lone modifier class and would stretch every overlay. */

/* Card 1: concentric ellipses sitting roughly centred, tall enough to run off
   the top and bottom of the 260px strip. */
.other-ways_card-media .other-ways_ripple--1 {
  width: 55%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Card 2: pushed left so the ring system is cut by the card's left edge and
   only part of it reads, as in the reference. */
.other-ways_card-media .other-ways_ripple--2 {
  width: 70%;
  top: 50%;
  left: -16%;
  transform: translateY(-50%);
}

/* Card 3: the larger spiral, anchored left and clipped by the frame. */
.other-ways_card-media .other-ways_ripple--3 {
  width: 72%;
  top: 50%;
  left: -10%;
  transform: translateY(-50%);
}

/* ==========================================================================
   "Becoming a mediator" — full-bleed photo CTA
   ========================================================================== */

.cta-banner {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../images/becoming-mediator.jpg");
  background-size: cover;
  background-position: center;
}

.cta-banner_card-wrap {
  position: relative;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.cta-banner_card {
  position: relative;
  z-index: 1;
  background-color: var(--c-cream);
  border-radius: var(--radius-outer);
  box-shadow: var(--shadow-card);
  padding: var(--sp-xl);
  text-align: center;
}

.cta-banner_card h2 {
  font-size: var(--fs-h2);
}

/* ==========================================================================
   Accreditation strip
   ========================================================================== */

.accreditation {
  background: linear-gradient(120deg, #eaf6f6, #faf3e6);
  text-align: center;
}

.accreditation p {
  max-width: 560px;
  margin: 0 auto var(--sp-lg);
  font-size: 1.1rem;
}

/* Three accrediting bodies as of 2026-08-07, so the row wraps rather than
   sitting on one line at every width. */
.accreditation_logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-24);
}

.accreditation_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-white);
  border-radius: var(--radius-outer);
  box-shadow: var(--shadow-card);
  padding: var(--sp-md);
}

.accreditation_logo img {
  height: 90px;
  width: auto;
}

/* A slot whose logo file has not arrived yet. Deliberately plain and dashed:
   it should read as unfinished on the dev deploy, so it is not mistaken for a
   design decision and not quietly forgotten before launch. */
.accreditation_logo--awaiting {
  min-height: calc(90px + var(--sp-md) * 2);
  max-width: 220px;
  background-color: transparent;
  border: 1px dashed var(--c-heading-soft);
  box-shadow: none;
  color: var(--c-heading-soft);
  font-size: var(--fs-xs);
  line-height: 1.4;
  text-align: center;
}

.accreditation_logo--awaiting small {
  opacity: 0.75;
  font-style: italic;
}

/* ==========================================================================
   Build-phase placeholders

   Everything in this block exists so unfinished content looks unfinished on the
   dev deploy. It is all one grep away at launch: delete this block and the
   is-placeholder / --awaiting / --provisional classes that use it, and nothing
   else in the stylesheet depends on it.
   ========================================================================== */

.is-placeholder {
  position: relative;
  outline: 1px dashed var(--c-heading-soft);
  outline-offset: var(--sp-8);
}

.is-placeholder::before {
  content: "Placeholder copy";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--c-heading);
  color: var(--c-white);
  border-radius: 999px; /* pill, not on the spacing grid by design */
  padding: var(--sp-4) var(--sp-12);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A button whose destination is agreed in principle and not yet chosen. */
.btn--provisional {
  border-style: dashed;
  opacity: 0.85;
}

/* A whole page still carrying borrowed copy. Quieter than the block-level
   marker, because a banner repeated down every section would be unreadable. */
main.is-placeholder {
  outline: none;
}

main.is-placeholder::before {
  content: "Draft page: the words here came from the old site and are yours to rewrite";
  display: block;
  padding: var(--sp-12) var(--sp-24);
  background-color: var(--c-heading);
  color: var(--c-white);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-align: center;
}

/* ==========================================================================
   Prose — long-form running text, for the policy pages

   The marketing pages place every paragraph deliberately. These do not: they
   are a heading and a paragraph, repeated, and they want a measure and a
   rhythm rather than a layout.
   ========================================================================== */

.prose {
  max-width: 42rem;
  margin: 0 auto;
}

.prose h2 {
  margin-top: var(--sp-48);
  margin-bottom: var(--sp-12);
  font-size: var(--fs-h3);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0;
  color: var(--c-ink);
}

/* Two photographs side by side inside a section, with no card around them.
   Used on the courses page, where the pictures are punctuation between two
   lists rather than illustrations of anything in particular. */
.image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-24);
  margin-bottom: var(--sp-48);
}

.image-pair img {
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: var(--radius-outer);
  display: block;
}

@media screen and (max-width: 767px) {
  .image-pair {
    grid-template-columns: 1fr;
  }
}

/* A single card on a row built for pairs. */
.other-ways_row--single {
  margin-top: var(--sp-32);
}

.other-ways_row--single .other-ways_card {
  max-width: calc(50% - var(--sp-12));
}

@media screen and (max-width: 991px) {
  .other-ways_row--single .other-ways_card {
    max-width: none;
  }
}

/* ==========================================================================
   Section divider — small ring-icon glyph centered on a rule.
   Shared across inner pages between stacked sections.
   ========================================================================== */

.section-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin: var(--sp-xl) 0;
}

.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--c-border);
}

.section-divider img {
  width: 36px;
  height: auto;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ==========================================================================
   IntroText — shared max-width prose block
   ========================================================================== */

.intro-text {
  max-width: 700px;
  margin: 0 0 var(--sp-md);
  font-size: var(--fs-body);
}

.intro-text--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ==========================================================================
   FeatureBlock — text column + media column, reversible
   ========================================================================== */

.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
}

.feature-block--reverse .feature-block_media {
  order: -1;
}

.feature-block_media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-outer);
}

.feature-block_pull-quote {
  border-left: 3px solid var(--c-heading);
  padding-left: 1.25rem;
  margin: var(--sp-sm) 0 0;
  font-style: italic;
  color: var(--c-heading);
  font-size: 1.15rem;
}

.feature-block_note {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--c-heading);
  text-decoration: underline;
}

/* ==========================================================================
   BulletCards — cream cards, 4-up (documents) or 3-up (cancellation policy)
   ========================================================================== */

.bullet-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.bullet-cards--3up {
  grid-template-columns: repeat(3, 1fr);
}

.bullet-card {
  background-color: var(--c-cream);
  border-radius: var(--radius-outer);
  padding: var(--sp-sm);
  min-height: 140px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bullet-card p {
  margin: 0;
  color: var(--c-heading);
  font-size: 1.05rem;
}

.bullet-card_icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--c-heading);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.bullet-card_icon + p {
  color: var(--c-ink);
  font-size: 0.98rem;
}

/* Cards carrying a description under the name. They stop being labels and
   become blocks of reading, so they top-align and drop to two across earlier
   than the name-only variant. */
.bullet-cards--described {
  grid-template-columns: repeat(2, 1fr);
}

.bullet-cards--described .bullet-card {
  justify-content: flex-start;
  text-align: left;
  align-items: stretch;
}

.bullet-card_name {
  font-weight: 600;
}

.bullet-card_description {
  margin-top: var(--sp-8) !important;
  color: var(--c-ink) !important;
  font-size: 0.95rem !important;
  line-height: 1.6;
}

/* ==========================================================================
   Structure of mediation — paragraph beside a process diagram

   Added 2026-08-07. The right column is a rebuild of the diagram on
   ataraxymediation.com: same three steps, drawn in this site's palette at a
   size that can actually be read. An <ol>, because it is a sequence, with the
   connecting arrows generated in CSS so they stay out of the accessibility
   tree.
   ========================================================================== */

.structure-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-48);
  align-items: start;
}

.process-diagram {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.process-diagram_step {
  position: relative;
  background-color: var(--c-teal-tint);
  border-radius: var(--radius-outer);
  padding: var(--sp-20) var(--sp-24);
  text-align: center;
}

.process-diagram_step:last-child {
  background-color: var(--c-cream);
}

/* The arrow between one step and the next. Sits in the gap, so it needs no
   space of its own and disappears with the last step. */
.process-diagram_step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--sp-32) * -1);
  width: 0;
  height: var(--sp-32);
  border-left: 2px solid var(--c-heading-soft);
  transform: translateX(-50%);
}

.process-diagram_step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--sp-8) * -1);
  width: var(--sp-8);
  height: var(--sp-8);
  border-right: 2px solid var(--c-heading-soft);
  border-bottom: 2px solid var(--c-heading-soft);
  transform: translateX(-50%) rotate(45deg);
}

.process-diagram_label {
  display: block;
  color: var(--c-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
}

.process-diagram_detail {
  display: block;
  margin-top: var(--sp-4);
  color: var(--c-ink);
  font-size: var(--fs-xs);
}

/* ==========================================================================
   PricingCards — 3 equal-width pathway cards, per-unit pricing rows
   ========================================================================== */

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.pricing-card {
  background-color: var(--c-cream);
  border-radius: var(--radius-outer);
  padding: var(--sp-lg);
}

.pricing-card--single {
  max-width: 420px;
}

.pricing-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.pricing-card_subtitle {
  display: block;
  font-size: 0.95rem;
  color: var(--c-ink);
  margin-bottom: var(--sp-sm);
}

.pricing-card_row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(51, 63, 75, 0.1);
  font-size: 0.98rem;
  color: var(--c-ink);
}

.pricing-card_row:last-child {
  border-bottom: none;
}

.pricing-card_row .price {
  color: var(--c-heading);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Packages / Individual switch ----------------------------------------
   Added 2026-08-07. A segmented control, not a toggle pill: the two views are
   peers, and a pill implies one is the "on" state of the other.

   Without JavaScript, both panels stay visible with their own headings and the
   switch is hidden. The prices are content; the switch is enhancement. */

.pricing-switch {
  display: none;
  margin-bottom: var(--sp-32);
}

.js-enabled .pricing-switch {
  display: inline-flex;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background-color: var(--c-grey-tint);
  border-radius: 999px;
}

.pricing-switch_option {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: var(--sp-8) var(--sp-24);
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pricing-switch_option:hover {
  background-color: var(--c-grey-soft);
}

.pricing-switch_option.is-selected {
  background-color: var(--c-white);
  color: var(--c-heading);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(51, 63, 75, 0.15);
}

.pricing-switch_option:focus-visible {
  outline: 2px solid var(--c-heading);
  outline-offset: 2px;
}

/* The per-panel heading exists for the no-JS and screen-reader case. With the
   switch present, the selected tab already names the panel. */
.js-enabled .pricing-panel_fallback-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pricing-panel + .pricing-panel {
  margin-top: var(--sp-40);
}

.js-enabled .pricing-panel + .pricing-panel {
  margin-top: 0;
}

.pricing-panel:focus-visible {
  outline: 2px solid var(--c-heading);
  outline-offset: var(--sp-8);
}

.pricing-card_includes {
  list-style: none;
  margin: 0 0 var(--sp-16);
  padding: 0;
}

.pricing-card_includes li {
  position: relative;
  padding: var(--sp-8) 0 var(--sp-8) var(--sp-24);
  border-bottom: 1px solid rgba(51, 63, 75, 0.1);
  font-size: 0.98rem;
  color: var(--c-ink);
}

.pricing-card_includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-heading);
}

.pricing-card_total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-16);
  padding-top: var(--sp-16);
  border-top: 2px solid var(--c-heading-soft);
  font-weight: 600;
  color: var(--c-heading);
}

.pricing-card_total .price {
  white-space: nowrap;
}

/* --- Voucher badge and cancellation note ---------------------------------
   Both sit inside #costs. The voucher is good news, so it gets the teal tint
   and a mark; the cancellation policy is fine print, so it stays quiet. */

.costs-badge {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-16);
  max-width: 640px;
  margin-top: var(--sp-32);
  padding: var(--sp-20) var(--sp-24);
  background-color: var(--c-teal-tint);
  border-radius: var(--radius-outer);
}

.costs-badge_mark {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-40);
  height: var(--sp-40);
  border-radius: 999px;
  background-color: var(--c-white);
  color: var(--c-heading);
  font-size: 1.2rem;
  font-weight: 600;
}

.costs-badge p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink);
}

.costs-note {
  max-width: 640px;
  margin-top: var(--sp-24);
  padding: var(--sp-20) var(--sp-24);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-outer);
}

.costs-note h3 {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-small);
  color: var(--c-heading);
}

.costs-note ul {
  margin: 0;
  padding-left: var(--sp-20);
}

.costs-note li {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-ink);
}

/* ==========================================================================
   PractitionerCard — repeatable bio block (About page)
   ========================================================================== */

.practitioner-card {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  align-items: stretch;
  height: 70vh;
  background-color: var(--c-cream);
  border-radius: var(--radius-outer);
  overflow: hidden;
}

.practitioner-card_media {
  height: 100%;
}

.practitioner-card_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.practitioner-card_text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: var(--sp-xl);
}

.practitioner-card_text h2 {
  margin-bottom: var(--sp-sm);
}

.practitioner-card_text p {
  margin: 0;
  color: var(--c-ink);
}

@media screen and (max-width: 767px) {
  .practitioner-card {
    grid-template-columns: 1fr;
    height: auto;
  }

  .practitioner-card_media {
    height: 340px;
  }
}

/* ==========================================================================
   Under-construction / catch-all page — reuses .section, .ripple-bg and
   .section-heading as-is. Scoped to this one page's <body> class only.
   ========================================================================== */

body.under-construction-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.under-construction_main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}

/* ==========================================================================
   Holding page — under-construction.astro only.

   What the domain serves while the new site is built. The page carries no nav,
   no footer and none of the site scripts, so everything below is self-contained
   apart from the ring animation, which is reused from the home page hero
   through .hero_ripple-ring.

   Temporary by design. When the real site goes live this whole section comes
   out with the page.
   ========================================================================== */

.holding-page {
  margin: 0;
}

.holding {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--sp-64);
  padding-bottom: var(--sp-64);
  overflow: hidden;
}

/* The home page hero photograph, re-encoded at 1920px wide. The same picture at
   a sixth of the weight, which is worth having on the one page the whole domain
   serves for several weeks. */
.holding_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/holding-bg.jpg");
  background-size: cover;
  background-position: center;
}

.holding_ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: clamp(680px, 118vw, 1500px);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.4;
}

/* The veil sits ABOVE the rings, not below them. Sunset over pale water leaves
   white text with almost nothing to sit on, and white rings at full strength
   across the middle of the page take the eye off the words. Muting both
   together folds the mark into the photograph and leaves one clean surface for
   the copy.

   The home page darkens left-to-right because its copy is left-aligned. This
   page's copy is centred, so the falloff is radial.

   The three stops change hue as well as opacity, set by Enrique on 2026-08-25:
   near-black at the centre where the white logotype and heading sit, through
   neutral grey, out to the brand blue at the edges. The centre stays the
   darkest point, so the copy keeps its contrast while the frame lifts. */
.holding::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgb(26 31 36 / 50%) 0%,
    rgb(166 166 166 / 56%) 55%,
    rgb(144 178 212 / 70%) 100%);
}

/* Its own width rather than .container, because .container is built for a
   1500px content well and this page wants a single narrow column. */
.holding_inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 640px;
  padding-left: var(--sp-24);
  padding-right: var(--sp-24);
  text-align: center;
  color: var(--c-white);
}

.holding_logo {
  width: 260px;
  height: auto;
  margin: 0 auto var(--sp-40);
}

.holding_heading {
  font-size: var(--fs-h1);
  color: var(--c-white);
  margin-bottom: var(--sp-24);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}

.holding_body {
  color: var(--c-white);
  margin: 0 auto var(--sp-20);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.holding_body:last-of-type {
  margin-bottom: var(--sp-40);
}

/* The translucent treatment of .btn--ghost, so the block reads as part of this
   site rather than as a panel bolted onto it. Bounded on purpose: a phone
   number is one more <li>, and removing contact details altogether is one
   element. */
.holding_contact {
  display: inline-block;
  padding: var(--sp-24) var(--sp-32);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-main);
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.holding_contact-label {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.holding_contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.holding_contact-list li + li {
  margin-top: var(--sp-8);
}

.holding_contact-list a {
  color: var(--c-white);
  font-size: var(--fs-body);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: var(--sp-4);
  transition: border-color 0.2s ease;
}

.holding_contact-list a:hover,
.holding_contact-list a:focus-visible {
  border-bottom-color: var(--c-white);
}

@media (max-width: 767px) {
  .holding_logo {
    width: 200px;
    margin-bottom: var(--sp-32);
  }

  .holding_ripple {
    opacity: 0.3;
  }

  .holding_contact {
    display: block;
    padding: var(--sp-20) var(--sp-24);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  padding-top: var(--sp-xl);
  padding-bottom: var(--sp-md);
}

.footer_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}

.footer_logo img {
  height: 44px;
  width: auto;
  margin-bottom: var(--sp-md);
}

.footer_contact-list {
  list-style: none;
  margin: 0 0 var(--sp-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer_contact-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer_contact-list a {
  text-decoration: none;
}

.footer_org {
  color: var(--c-heading);
  margin-bottom: 0;
}

.footer_legal-links {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.footer_legal-links a {
  color: var(--c-heading);
  text-decoration: none;
}

.footer_legal-links a:hover {
  text-decoration: underline;
}

.footer_accreditations h2 {
  font-size: 1.2rem;
  margin-bottom: var(--sp-sm);
}

.footer_accreditation-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer_accreditation-logos img {
  height: 56px;
  width: auto;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-inner);
  padding: 0.5rem 0.75rem;
}

.footer_form-card {
  background-color: var(--c-grey-tint);
  border-radius: var(--radius-outer);
  padding: var(--sp-xl);
}

.footer_form-card h2 {
  font-size: 1.7rem;
}

.form-field {
  width: 100%;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-inner);
  background-color: var(--c-white);
  font-family: var(--font-main);
  font-size: 1rem;
  color: var(--c-ink);
}

textarea.form-field {
  min-height: 120px;
  resize: vertical;
}

.footer_form-actions {
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Contact page — details list, form groups, consent checkboxes
   ========================================================================== */

.contact-details {
  list-style: none;
  margin: var(--sp-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-lg);
  font-size: 1.1rem;
}

.contact-details a {
  text-decoration: none;
  color: var(--c-heading);
}

.contact-form_wrap {
  max-width: 640px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group .form-field {
  margin-bottom: 0;
}

.form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  color: var(--c-heading);
}

.form-consent {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
}

.form-consent_item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--c-ink);
  cursor: pointer;
}

.form-consent_item input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.form-consent_item a {
  color: var(--c-heading);
}

.footer_bottom {
  text-align: center;
  font-size: 0.9rem;
  color: #9aa5ae;
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-md);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 991px) {
  .help-section {
    grid-template-columns: 1fr;
  }

  .why-choose_card {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer_grid {
    grid-template-columns: 1fr;
  }

  .feature-block {
    grid-template-columns: 1fr;
  }

  .feature-block--reverse .feature-block_media {
    order: unset;
  }

  .bullet-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .bullet-cards--3up,
  .pricing-cards {
    grid-template-columns: 1fr;
  }

  /* The diagram stops sitting beside the paragraph and follows it. */
  .structure-block {
    grid-template-columns: 1fr;
    gap: var(--sp-32);
  }
}

@media screen and (max-width: 767px) {
  .container {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
  }

  .bullet-cards--described {
    grid-template-columns: 1fr;
  }

  /* Two full-width labels rather than a cramped pair. */
  .js-enabled .pricing-switch {
    display: flex;
    width: 100%;
  }

  .pricing-switch_option {
    flex: 1;
    padding: var(--sp-8) var(--sp-12);
  }

  .help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-card:nth-child(3) {
    grid-column: auto;
  }

  .other-ways_row {
    grid-template-columns: 1fr;
  }

  .other-ways_card--wide {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .cta-banner_card-wrap {
    margin-left: var(--sp-sm);
    margin-right: var(--sp-sm);
  }

  .bullet-cards {
    grid-template-columns: 1fr;
  }

  .footer_accreditation-logos {
    flex-wrap: wrap;
  }

  /* Tighter inset so the frame keeps a visible margin from the screen edge
     instead of sitting flush against it. Radius stays concentric with the
     card it wraps: card radius + the new inset. */
  .hero_card-frame {
    inset: -0.8rem;
    border-radius: calc(var(--radius-outer) + 0.8rem);
  }
}

/* Two help cards no longer fit side by side once the viewport drops under
   roughly 425px, so go single column before they get squeezed. */
@media screen and (max-width: 479px) {
  .help-grid {
    grid-template-columns: 1fr;
  }

  .help-card {
    min-height: 0;
  }
}