/* ==========================================================================
   Illuminated Soul Healings — homepage
   Tokens follow package/DESIGN_SYSTEM.md. Mobile-first.
   ========================================================================== */

:root {
  /* Palette */
  --color-ink: #514260;
  --color-plum: #8e68ac;
  --color-plum-dark: #78539a;
  --color-rose: #c987b5;
  --color-gold: #c5a55a;
  --color-gold-soft: rgba(197, 165, 90, 0.34);
  --color-beige: #f5eee5;
  --color-ivory: #fbf7f1;
  --color-warm-blush: #f6e6e8;
  --color-soft-lavender: #eee2f3;
  --color-warm-band: #eee2dc;
  --color-body: #6f6579;
  --color-line: #ddcbbc;
  --color-mark-fill: #f7dfeb;

  /* AA-safe text variants of the palette above. The design-system tokens stay
     exactly as specified and keep doing the decorative work (fills, rules,
     icons, borders); these darker siblings carry the small text that has to
     clear 4.5:1 on every surface the page uses. */
  --color-rose-text: #934669;    /* eyebrows, "learn more", footer headings */
  --color-rose-text-hover: #7c3a59;
  --color-plum-text: #74558d;    /* offering tags, nav hover, form status */
  --color-plum-strong: #8964a6;  /* button + bar fills, so white text clears AA */
  --color-body-strong: #665d70;  /* body copy on the tinted bands */
  --color-gold-deep: #9c7d2c;    /* review stars — 3:1 as a graphical mark */

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', Arial, Helvetica, sans-serif;
  --font-script: 'Allura', 'Cormorant Garamond', cursive;

  /* Layout */
  --shell: 1240px;
  --gutter: 22px;
  --section-y: 56px;
  --radius-card: 22px;
  --radius-pill: 999px;

  --shadow-soft: 0 14px 34px rgba(81, 66, 96, 0.06);
  --shadow-lift: 0 18px 42px rgba(81, 66, 96, 0.11);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: 72px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; --section-y: 88px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 64px; --section-y: 104px; }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-beige);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 0.85rem; font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

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

.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon { width: 1em; height: 1em; display: block; color: var(--color-gold); }

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.button--primary { background: var(--color-plum-strong); color: #fff; }
.button--primary:hover { background: var(--color-plum-dark); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.button--outline { background: transparent; border-color: var(--color-gold); color: var(--color-ink); }
.button--outline:hover { background: rgba(197, 165, 90, 0.12); transform: translateY(-2px); }
.button--ghost { background: transparent; border-color: var(--color-rose); color: var(--color-rose-text); }
.button--ghost:hover { background: var(--color-rose-text); color: #fff; transform: translateY(-2px); }

.button-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Shared section furniture --------------------------------------------- */

.eyebrow {
  margin: 0 0 26px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-rose-text);
}
.eyebrow::after {
  content: '';
  display: block;
  width: 74px; height: 1px;
  margin-top: 13px;
  background: var(--color-gold);
}
.eyebrow--centred { text-align: center; }
.eyebrow--centred::after { margin-inline: auto; }

.section-head { max-width: 780px; margin: 0 auto clamp(38px, 5vw, 60px); text-align: center; }
.section-head h2 { margin-bottom: 18px; }
.section-head__lede { color: var(--color-body); font-size: 1.02rem; }

h1 {
  font-size: clamp(2.35rem, 9.6vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
h2 { font-size: clamp(2rem, 5.2vw, 3.25rem); line-height: 1.1; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.55rem); line-height: 1.2; }

@media (min-width: 1024px) {
  h1 { font-size: clamp(3.7rem, 4.6vw, 4.5rem); }
  .section-head__lede { font-size: 1.08rem; }
}

/* --- 1. Announcement bar --------------------------------------------------- */

.announcement { background: var(--color-plum-strong); color: #fffaf4; }
.announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 38px;
  padding: 7px var(--gutter);
  text-align: center;
}
.announcement p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.announcement__star { width: 12px; height: 12px; color: #ead285; flex: none; }
@media (max-width: 560px) {
  .announcement__star { display: none; }
  .announcement p { font-size: 0.63rem; letter-spacing: 0.1em; }
}

/* --- 2. Header ------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 241, 0.97);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid rgba(197, 165, 90, 0.2);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  flex: none;
}
.brand__mark { display: block; flex: none; line-height: 0; }
.brand__mark img { display: block; width: auto; height: 46px; }

/* Below 360px the header row does not fit: the brand and the Menu button need
   about 353px inside a 320px viewport, and `body { overflow-x: hidden }` means
   the excess is clipped rather than scrollable, so the button loses its edge.
   Stepping the brand down recovers ~40px. The Menu button and every other tap
   target keep their 44px. */
@media (max-width: 359px) {
  .brand { gap: 10px; }
  .brand__mark img { height: 40px; }
  .brand__name { font-size: 1.14rem; letter-spacing: 0.13em; }
  .brand__script { font-size: 1.05rem; }
  .nav-toggle { padding-inline: 13px; gap: 0; }
  /* The bars alone, with the word kept for screen readers. The button itself
     stays 44px, so the tap target is untouched. */
  .nav-toggle__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0.16em;
  color: var(--color-ink);
}
.brand__script {
  font-family: var(--font-script);
  font-size: 1.18rem;
  color: var(--color-plum);
  margin-top: 4px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 17px; }
.nav-toggle__bars span {
  display: block; height: 1.5px; background: var(--color-ink); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  padding: 8px var(--gutter) 24px;
  background: var(--color-ivory);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-soft);
}
.nav.is-open { display: block; }
.nav__list { list-style: none; margin: 0 0 18px; padding: 0; }
.nav__list li + li { border-top: 1px solid rgba(221, 203, 188, 0.6); }
.nav__link {
  display: flex;
  align-items: center;
  min-height: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-ink);
}
.nav__link:hover, .nav__link.is-current { color: var(--color-plum-text); }
.nav__cta { width: 100%; }

@media (min-width: 1024px) {
  .header__inner { min-height: 108px; }
  .brand__mark img { height: 56px; }
  .brand__name { font-size: 1.45rem; }
  .brand__script { font-size: 1.35rem; }
  .nav-toggle { display: none; }
  /* Six nav items plus the booking button. The gaps have to open up with the
     viewport rather than sit at a fixed 26/22px, or the row runs past the
     shell at 1024-1200px and the page scrolls sideways. */
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.6vw, 52px);
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.2vw, 46px);
    margin: 0;
  }
  .nav__list li + li { border-top: 0; }
  .nav__link { min-height: 44px; font-size: 0.88rem; font-weight: 700; white-space: nowrap; }
  .nav__cta { width: auto; white-space: nowrap; }
}

/* Between the desktop breakpoint and 1200px the six nav items, the wordmark
   and the booking button do not fit at full size — "Our Services" and "Book a
   Session" wrap onto two lines. Everything steps down a little through that
   band instead; the 44px tap targets are untouched. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header__inner { min-height: 92px; }
  .brand { gap: 10px; }
  .brand__mark img { height: 46px; }
  .brand__name { font-size: 1.24rem; }
  .brand__script { font-size: 1.14rem; }
  .nav__link { font-size: 0.8rem; }
  .nav__cta { padding-inline: 18px; font-size: 0.66rem; letter-spacing: 0.1em; }
}

/* --- 3. Hero --------------------------------------------------------------- */

/* The client asked for the hero photograph off the page (2026-09-09), so the
   hero is a centred typographic band. overflow:hidden stays: the section is
   still the page's full-bleed ivory ground. */
.hero {
  background: var(--color-ivory);
  border-bottom: 1px solid rgba(221, 203, 188, 0.55);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 34px;
  padding-block: 52px 58px;
}
.hero__copy { max-width: 860px; }
.hero .button-row, .hero .pills { justify-content: center; }
.hero__lede {
  color: var(--color-body);
  font-size: 1.05rem;
  line-height: 1.72;
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 30px;
}

.pills { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 32px 0 0; padding: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 18px;
  background: rgba(251, 244, 236, 0.87);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
}
.pill__icon { width: 15px; height: 15px; color: var(--color-gold); flex: none; }

@media (min-width: 1024px) {
  .hero__grid { padding-block: 84px 92px; }
  .hero__lede { font-size: 1.125rem; }
}

/* --- 4. Manifesto ---------------------------------------------------------- */

.manifesto {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #eadcf0 0%, #f7ede5 50%, #f3dde6 100%);
  padding-block: clamp(40px, 6vw, 62px);
  text-align: center;
}
.manifesto__inner { max-width: 900px; margin-inline: auto; }
.manifesto__statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.62rem);
  line-height: 1.48;
  color: var(--color-ink);
  margin: 0;
}
.manifesto__ring {
  position: absolute;
  top: 50%;
  width: 230px; height: 230px;
  background: url('/assets/img/flower-of-life.svg') center / contain no-repeat;
  opacity: 0.34;
  transform: translateY(-50%);
  pointer-events: none;
}
.manifesto__ring--left { left: -130px; }
.manifesto__ring--right { right: -130px; }

/* --- 5. About -------------------------------------------------------------- */

.about { background: var(--color-ivory); padding-block: var(--section-y); }
.about__grid { display: grid; gap: 38px; align-items: center; }
.about__media { position: relative; max-width: 540px; }
.about__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--color-line);
  border-radius: clamp(70px, 16vw, 150px);
}
.about__badge {
  position: absolute;
  right: -6px; bottom: -18px;
  display: grid;
  place-items: center;
  width: 78px; height: 78px;
  background: var(--color-ink);
  border: 8px solid var(--color-ivory);
  border-radius: 50%;
}
.about__badge-icon { width: 24px; height: 24px; color: #ecd17e; }
.about__copy h2 { margin-bottom: 22px; }
.about__copy p { color: var(--color-body); font-size: 1.02rem; }
.about__copy .button { margin-top: 16px; }

@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: clamp(46px, 6vw, 95px); }
  .about__copy p { font-size: 1.06rem; }
}

/* --- 6. Services overview -------------------------------------------------- */

.services { background: var(--color-beige); padding-block: var(--section-y); }

.card-grid {
  display: grid;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 620px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; } }

.s-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.s-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.s-card__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 22px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: 50%;
}
.s-card__icon .icon { width: 21px; height: 21px; }
.s-card__title { font-size: 1.4rem; margin-bottom: 14px; }
.s-card__text { color: var(--color-body); font-size: 0.9rem; line-height: 1.66; margin-bottom: 22px; }
.s-card__more {
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-rose-text);
  text-decoration: none;
}
.s-card__more:hover { color: var(--color-rose-text-hover); text-decoration: underline; text-underline-offset: 4px; }

/* --- 7. Philosophy band ---------------------------------------------------- */

.philosophy {
  position: relative;
  background: var(--color-soft-lavender);
  padding-block: clamp(46px, 6vw, 70px);
}
.philosophy__quote {
  max-width: 1010px;
  margin: 0 auto;
  text-align: center;
}
.philosophy__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.9vw, 1.72rem);
  line-height: 1.5;
  margin: 0;
}
.philosophy__quote::before {
  content: '\201C';
  display: block;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--color-gold);
  margin-bottom: 20px;
}
.philosophy__spark { position: absolute; color: var(--color-gold); }
.philosophy__spark .icon { width: 15px; height: 15px; }
.philosophy__spark--tl { top: 46px; left: max(var(--gutter), calc((100% - var(--shell)) / 2 + 40px)); }
.philosophy__spark--br { bottom: 46px; right: max(var(--gutter), calc((100% - var(--shell)) / 2 + 40px)); }
@media (max-width: 767px) { .philosophy__spark { display: none; } }

/* --- 8. Choose Your Healing Path ------------------------------------------- */

.path { background: var(--color-beige); padding-block: var(--section-y); }
.path__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .path__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; align-items: start; } }

.offering {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 36px);
  border: 1px solid var(--color-line);
  border-radius: 24px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.offering:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.offering--ivory { background: var(--color-ivory); }
.offering--blush { background: var(--color-warm-blush); }
.offering__ring {
  position: absolute;
  top: -38px; right: -38px;
  width: clamp(96px, 34vw, 152px);
  aspect-ratio: 1;
  height: auto;
  background: url('/assets/img/flower-of-life.svg') center / contain no-repeat;
  opacity: 0.3;
  pointer-events: none;
}
.offering__tag {
  position: relative;
  margin: 0 0 24px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-plum-text);
}
.offering__tag::after {
  content: '';
  display: block;
  width: 74px; height: 1px;
  margin-top: 11px;
  background: var(--color-gold);
}
.offering__title { position: relative; font-size: clamp(1.5rem, 3vw, 1.88rem); margin-bottom: 20px; }
.offering__body { flex: 1 1 auto; color: var(--color-body); font-size: 0.94rem; line-height: 1.72; }
.offering__body p { margin-bottom: 1.05em; }
.offering__option {
  margin: 0 0 1.05em;
  padding: 16px 18px;
  background: rgba(251, 247, 241, 0.72);
  border: 1px solid rgba(221, 203, 188, 0.7);
  border-radius: 14px;
}
.offering--ivory .offering__option { background: rgba(245, 238, 229, 0.68); }
.offering__option-title { font-weight: 700; color: var(--color-ink); margin-bottom: 0.5em; }
.offering__list { list-style: none; margin: 0 0 1.05em; padding: 0; }
.offering__list li { position: relative; padding-left: 24px; margin-bottom: 9px; }
.offering__list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 0.68em;
  width: 6px; height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
}
.offering__cta { align-self: flex-start; }

/* The first offering runs the width of the grid and splits its two sessions
   into columns. Below 900px the grid is a single column and they simply
   stack, which is what the shorter copy wants anyway. */
@media (min-width: 900px) {
  .path__grid > .offering--wide { grid-column: 1 / -1; }
  .offering--wide .offering__sessions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 56px);
  }
  .offering--wide .offering__session-col + .offering__session-col { margin-top: 0; }
  .offering--wide .offering__session-col > :first-child { margin-top: 0; }
  /* A wide card with only one run of copy would otherwise stretch its lines
     the full width of the grid. */
  .offering--banner .offering__body { max-width: 68ch; }
}
.offering__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 1.05em;
}
.offering__body > .offering__actions:last-child { margin-bottom: 0; }

/* A named session inside one offering, e.g. "Initial Session — 90 Minutes". */
.offering__session {
  margin: 0 0 0.75em;
  font-family: var(--font-display);
  font-size: 1.24rem;
  line-height: 1.28;
  color: var(--color-ink);
}
.offering__actions + .offering__session { margin-top: 1.9em; }
/* Below 900px the wide card's two sessions stack instead of sitting side by
   side, so they need the same separation the heading rule above gives. */
.offering__session-col + .offering__session-col { margin-top: 1.9em; }

/* A short qualifier under the title, e.g. "90-Minute Session". */
.offering__meta {
  margin: -8px 0 1.05em;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-plum-text);
}

/* Her qualifying lines: "...please begin here." */
.offering__note {
  margin: 0 0 1.05em;
  padding-left: 14px;
  border-left: 2px solid var(--color-gold);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--color-body);
}

/* --- 9. What to Expect ----------------------------------------------------- */

.process { background: var(--color-warm-band); padding-block: var(--section-y); }
.process .section-head__lede { color: var(--color-body-strong); }
.process__grid {
  display: grid;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
@media (min-width: 620px) { .process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .process__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step {
  padding: 30px 24px 28px;
  background: rgba(251, 244, 236, 0.86);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  text-align: center;
}
.step__number {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  background: var(--color-ivory);
  border: 1.2px solid var(--color-gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-ink);
}
.step__title { font-size: 1.28rem; margin-bottom: 12px; }
.step__text { color: var(--color-body); font-size: 0.87rem; line-height: 1.62; }

/* --- 10. FAQs -------------------------------------------------------------- */

.faq { background: var(--color-ivory); padding-block: var(--section-y); }
.faq__grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }

.faq__item {
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  padding: 24px 26px;
}
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 2.2vw, 1.42rem);
  line-height: 1.28;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__marker {
  position: relative;
  flex: none;
  width: 36px; height: 36px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: 50%;
}
.faq__marker::before, .faq__marker::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--color-gold-deep);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.faq__marker::before { width: 13px; height: 1.6px; }
.faq__marker::after { width: 1.6px; height: 13px; }
.faq__item[open] .faq__marker::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a { padding-top: 16px; color: var(--color-body); font-size: 0.94rem; line-height: 1.74; }

/* --- 11. Reviews ----------------------------------------------------------- */

.reviews { background: var(--color-beige); padding-block: var(--section-y); }
.reviews__viewport { position: relative; }
.reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(258px, 82%);
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 4px calc(var(--gutter)) 18px;
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.reviews__track > * { scroll-snap-align: center; }

.review {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: 20px;
}
.review__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.review__stars { margin: 0; color: var(--color-gold-deep); font-size: 1.02rem; letter-spacing: 2px; }
.review__source {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(26, 106, 224, 0.12);
  color: #1a6ae0;
  font-weight: 700; font-size: 0.85rem;
}
.review__quote { margin: 0 0 22px; }
.review__quote p { font-size: 0.9rem; line-height: 1.66; color: var(--color-ink); }
.review__person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review__avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 0.85rem;
}
.review__meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.review__name { font-size: 0.85rem; font-weight: 700; }
.review__when { font-size: 0.74rem; color: var(--color-body); }

.reviews__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  transform: translateY(-50%);
  background: var(--color-plum-strong);
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.reviews__arrow:hover { background: var(--color-plum-dark); }
.reviews__arrow[disabled] { opacity: 0.3; cursor: default; }
.reviews__arrow--prev { left: calc(var(--gutter) * -1); }
.reviews__arrow--next { right: calc(var(--gutter) * -1); }

/* A 0 minimum lets the four columns collapse to fit the container instead of
   overflowing, so the carousel squashed every card to ~156px at tablet widths
   rather than showing two and scrolling. The track must be allowed to overflow.
   Two cards plus one 22px gap: 2 * (50% - 11px) + 22px = 100%. */
@media (min-width: 620px) { .reviews__track { grid-auto-columns: calc(50% - 11px); } }

/* Four across only once each card clears ~250px. At 1024 a four-column grid
   left them 216px wide, which is too tight for a paragraph of review text, so
   the scroll carousel carries that range instead — the design system allows
   either on anything below desktop. */
@media (min-width: 1180px) {
  .reviews__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .reviews__arrow { display: none; }
}

/* --- 12. Newsletter -------------------------------------------------------- */

.newsletter { background: var(--color-ivory); padding-block: clamp(40px, 5vw, 58px); }
.newsletter__grid { display: grid; gap: 26px; align-items: center; }
.newsletter__copy h2 { font-size: clamp(1.75rem, 4vw, 2.38rem); margin-bottom: 10px; }
.newsletter__copy p { color: var(--color-body); font-size: 0.98rem; }

.newsletter__form { display: flex; flex-wrap: wrap; gap: 12px; }
.newsletter__input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 54px;
  padding: 14px 24px;
  background: var(--color-beige);
  border: 1px solid #bcb7af;
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.newsletter__input::placeholder { color: #6e6c72; }
.newsletter__input:focus-visible { border-color: var(--color-plum); }
.newsletter__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter__submit { flex: 0 0 auto; }
.newsletter__status {
  flex: 1 0 100%;
  margin: 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--color-plum-text);
}
.newsletter__status.is-error { color: #99302e; }

@media (min-width: 900px) {
  .newsletter__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 44px; }
  .newsletter__form { justify-content: flex-end; }
}

/* --- 13. Closing CTA ------------------------------------------------------- */

.closing {
  position: relative;
  overflow: hidden;
  background: #e7d9f3;
  padding-block: clamp(52px, 6.5vw, 78px);
  text-align: center;
}
.closing__inner { max-width: 980px; margin-inline: auto; }
.closing h2 { margin-bottom: 16px; }
.closing__text { color: var(--color-body-strong); font-size: 1.05rem; margin-bottom: 30px; }
.closing__ring {
  position: absolute;
  top: 50%;
  width: 320px; height: 320px;
  background: url('/assets/img/flower-of-life.svg') center / contain no-repeat;
  opacity: 0.44;
  transform: translateY(-50%);
  pointer-events: none;
}
.closing__ring--left { left: -180px; }
.closing__ring--right { right: -180px; }
.closing__spark { position: absolute; color: var(--color-gold); }
.closing__spark .icon { width: 17px; height: 17px; }
.closing__spark--tl { top: 62px; left: max(var(--gutter), calc((100% - var(--shell)) / 2 + 40px)); }
.closing__spark--br { bottom: 62px; right: max(var(--gutter), calc((100% - var(--shell)) / 2 + 40px)); }
@media (max-width: 767px) { .closing__spark { display: none; } }

/* --- 14. Footer ------------------------------------------------------------ */

.footer { background: var(--color-ivory); padding-block: clamp(44px, 5vw, 62px) 30px; }
.footer__grid { display: grid; gap: 34px; }
@media (min-width: 620px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Four columns only once there is genuinely room for the wordmark, the long
   service names and the email side by side; 2x2 below that. */
@media (min-width: 1200px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1.5fr) minmax(0, 1.1fr);
    gap: 40px;
  }
}
.footer__brand .brand__mark img { height: 52px; }
.footer__brand .brand__name { font-size: 1.32rem; }
.footer__brand .brand__script { font-size: 1.24rem; }

.footer__heading {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-rose-text);
  margin-bottom: 20px;
}
.footer__brand, .footer__col { min-width: 0; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li + li { margin-top: 4px; }
.footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  max-width: 100%;
  font-size: 0.87rem;
  line-height: 1.45;
  text-decoration: none;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.footer__social { align-items: flex-start; }
.footer__social-icon { margin-top: 3px; }
/* The email is the longest string in the footer: give it its own scale and a
   <wbr> after the @ so it breaks cleanly rather than mid-word. */
.footer__email { font-size: 0.79rem; letter-spacing: -0.005em; }
.footer__col a:hover { color: var(--color-plum-text); text-decoration: underline; text-underline-offset: 4px; }
.footer__social-icon { width: 17px; height: 17px; color: var(--color-plum); flex: none; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid rgba(216, 191, 140, 0.53);
  font-size: 0.76rem;
  color: var(--color-body);
}
.footer__base p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Motion ---------------------------------------------------------------- */

/* Reveals move only — never fade. A transition frozen part-way must still
   leave readable content on screen. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transform: translateY(16px); transition: transform 0.7s var(--ease); }
  .js .reveal.is-visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

@media print {
  .header, .announcement, .reviews__arrow, .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; }
  .faq__item { break-inside: avoid; }
}

/* ==========================================================================
   Interior pages — About, Our Services, Book a Session, Contact, legal
   ========================================================================== */

/* --- Compact page hero ----------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #eadcf0 0%, #f7ede5 50%, #f3dde6 100%);
  padding-block: clamp(46px, 7vw, 84px);
  text-align: center;
}
.page-hero__inner { max-width: 880px; margin-inline: auto; }
.page-hero h1 {
  font-size: clamp(2.25rem, 6.4vw, 3.6rem);
  line-height: 1.06;
  margin-bottom: 20px;
}
.page-hero__lede {
  color: var(--color-body-strong);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  max-width: 46em;
  margin-inline: auto;
}
.page-hero__promise {
  max-width: 34em;
  margin: 0 auto 18px;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2.2vw, 1.4rem);
  line-height: 1.42;
  color: var(--color-ink);
}
.page-hero__ring {
  position: absolute;
  top: 50%;
  width: 300px; height: 300px;
  background: url('/assets/img/flower-of-life.svg') center / contain no-repeat;
  opacity: 0.36;
  transform: translateY(-50%);
  pointer-events: none;
}
.page-hero__ring--left { left: -170px; }
.page-hero__ring--right { right: -170px; }

/* --- About: intro ---------------------------------------------------------- */

.intro { background: var(--color-ivory); padding-block: var(--section-y); }
.intro__grid { display: grid; gap: 38px; align-items: center; }
.intro__media { position: relative; max-width: 540px; }
.intro__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--color-line);
  border-radius: clamp(70px, 16vw, 150px);
}
.intro__copy h1 { font-size: clamp(2.2rem, 5.4vw, 3.3rem); margin-bottom: 20px; }
.intro__lede { color: var(--color-body); font-size: 1.06rem; margin-bottom: 30px; }

@media (min-width: 900px) {
  .intro__grid { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: clamp(46px, 6vw, 95px); }
}

/* --- About: story ---------------------------------------------------------- */

.story { background: var(--color-beige); padding-block: var(--section-y); }
.story__inner { max-width: 820px; margin-inline: auto; }
.story__inner h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.16;
  margin-bottom: 26px;
}
.story__inner p { color: var(--color-body); font-size: 1.02rem; }
.story__quote {
  margin: 30px 0;
  padding: 26px 30px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-gold);
  border-radius: 20px;
}
.story__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.42;
  color: var(--color-ink);
}
.story__list { list-style: none; margin: 0 0 1.3em; padding: 0; }
.story__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--color-body);
}
.story__list li::before {
  content: '';
  position: absolute;
  left: 6px; top: 0.72em;
  width: 7px; height: 7px;
  background: var(--color-gold);
  border-radius: 50%;
}
.story__signoff { margin-top: 30px; color: var(--color-body); }
.story__signature {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-script);
  font-size: 2.1rem;
  line-height: 1.2;
  color: var(--color-plum);
}

/* --- About: how I support you ---------------------------------------------- */

.support { background: var(--color-ivory); padding-block: var(--section-y); }
.support__grid {
  display: grid;
  gap: 14px 26px;
  list-style: none;
  margin: 0 0 38px;
  padding: 0;
}
@media (min-width: 700px) { .support__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .support__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.support__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  font-size: 0.94rem;
  line-height: 1.55;
}
.support__icon { width: 15px; height: 15px; margin-top: 5px; flex: none; color: var(--color-gold); }
.support__closing {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
  color: var(--color-body);
  font-size: 1.02rem;
}
.support__space-intro {
  text-align: center;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-ink);
}
.support__words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.support__words li {
  padding: 10px 24px;
  background: var(--color-soft-lavender);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--color-ink);
}

/* --- About: qualifications ------------------------------------------------- */

.training { background: var(--color-beige); padding-block: var(--section-y); }
.training__grid {
  display: grid;
  gap: 26px;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}
@media (min-width: 620px) { .training__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .training__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

.t-card {
  padding: 30px 28px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.t-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.t-card__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 20px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: 50%;
}
.t-card__icon .icon { width: 21px; height: 21px; }
.t-card__title { font-size: 1.26rem; margin-bottom: 12px; }
.t-card__text { color: var(--color-body); font-size: 0.9rem; line-height: 1.66; }
.t-card__areas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.t-card__areas li {
  padding: 5px 12px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  color: var(--color-body-strong);
}
.training__closing {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-body);
  font-size: 1.02rem;
}

/* --- Services page: illustrated offerings ---------------------------------- */

.offering__figure { margin: 0 0 26px; }
.offering__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: 18px;
  border: 1px solid var(--color-line);
}
@media (min-width: 900px) {
  .path--illustrated .offering__figure img { aspect-ratio: 4 / 3; }
}

/* --- Book a session -------------------------------------------------------- */

.booking-steps { background: var(--color-warm-band); padding-block: clamp(40px, 5vw, 62px); }

.booking { background: var(--color-ivory); padding-block: var(--section-y); }
.booking__widget {
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: 10px;
  overflow: hidden;
}
.booking__widget .calendly-inline-widget { border-radius: 16px; overflow: hidden; }
.booking__fallback { padding: 40px 24px; text-align: center; color: var(--color-body); }
.booking__direct {
  margin-top: 26px;
  text-align: center;
  color: var(--color-body);
  font-size: 0.96rem;
}
.booking__direct a { color: var(--color-plum-text); text-underline-offset: 4px; }

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

.contact { background: var(--color-ivory); padding-block: var(--section-y); }
.contact__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) {
  .contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(44px, 5vw, 76px); }
}

.contact__details h2 { margin-bottom: 18px; }
.contact__lede { color: var(--color-body); margin-bottom: 30px; }
.contact__list { list-style: none; margin: 0 0 30px; padding: 0; }
.contact__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(221, 203, 188, 0.7);
}
.contact__item:last-child { border-bottom: 1px solid rgba(221, 203, 188, 0.7); }
.contact__item-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: 50%;
}
.contact__item-icon .icon { width: 19px; height: 19px; }
.contact__item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact__item-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-rose-text);
}
.contact__item-value { color: var(--color-ink); font-size: 0.96rem; overflow-wrap: anywhere; }
a.contact__item-value:hover { color: var(--color-plum-text); }
.contact__social { gap: 10px; }
.contact__social-icon { width: 17px; height: 17px; margin-right: 2px; color: currentColor; }

.contact__form-card {
  padding: clamp(26px, 3.6vw, 40px);
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.contact__form-heading { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: 10px; }
.contact__form-lede { color: var(--color-body); margin-bottom: 28px; font-size: 0.98rem; }

.field-row { display: grid; gap: 0 18px; }
@media (min-width: 560px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { margin: 0 0 20px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-ink);
}
.field__req { color: var(--color-rose-text); }
.field__optional { font-weight: 400; color: var(--color-body); letter-spacing: 0; }
.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 18px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  /* Only background-image here: the background shorthand would reset the
     custom caret tile and leave the select with no chevron at all. */
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%238e68ac' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--color-plum); }
.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: #99302e; }

.field--check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.field--check input {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--color-plum);
}
.field--check label {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--color-body);
}
.field--check a { color: var(--color-plum-text); text-underline-offset: 3px; }

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}
.contact-form__status {
  margin: 0;
  flex: 1 1 200px;
  min-height: 1.2em;
  font-size: 0.88rem;
  color: var(--color-plum-text);
}
.contact-form__status.is-error { color: #99302e; }

/* --- Legal pages ----------------------------------------------------------- */

.legal { background: var(--color-ivory); padding-block: clamp(44px, 6vw, 84px); }
.legal__inner { max-width: 820px; margin-inline: auto; }
.legal h1 { font-size: clamp(2.1rem, 5vw, 3rem); margin-bottom: 10px; }
.legal__updated {
  margin-bottom: 30px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-rose-text);
}
.legal__intro { color: var(--color-body); font-size: 1.02rem; }
.legal__section { margin-top: 38px; }
.legal__section h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.68rem);
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(221, 203, 188, 0.8);
}
.legal__section p { color: var(--color-body); font-size: 0.98rem; }
.legal__section a { color: var(--color-plum-text); overflow-wrap: anywhere; }
.legal__list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.legal__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  color: var(--color-body);
  font-size: 0.98rem;
}
.legal__list li::before {
  content: '';
  position: absolute;
  left: 5px; top: 0.72em;
  width: 6px; height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
}

/* --- 404 ------------------------------------------------------------------- */

.notfound { background: var(--color-ivory); padding-block: clamp(48px, 6vw, 80px); }
.notfound__inner { text-align: center; }
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Checkbox rows: the real tap target is the label ------------------------ */

/* A 24px box is the conventional size, but a box alone is a small target. The
   label carries a `for=`, so the whole row toggles the checkbox — sizing the
   label to at least 44px makes that the actual hit area. */
.field--check {
  align-items: center;
  padding-block: 4px;
}
.field--check input { width: 24px; height: 24px; margin-top: 0; }
/* Not flex: an inline link inside a flex container becomes its own flex item
   and the spaces either side of it collapse away — the consent line rendered as
   "agree to thePrivacy Policyand understand". Block flow keeps the sentence
   intact, and the row above still centres the box against it. */
.field--check label {
  display: block;
  min-height: 44px;
  padding-block: 11px;
  cursor: pointer;
}

/* --- Offering sub-heading (e.g. "Choose Your Preferred Reading Format") ----- */

.offering__subhead {
  margin: 1.4em 0 0.9em;
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--color-ink);
}

/* --- Manifesto headline ---------------------------------------------------- */

.manifesto__heading {
  font-size: clamp(1.55rem, 3.6vw, 2.3rem);
  line-height: 1.16;
  margin-bottom: 16px;
}

/* --- Reviews: full verified text behind a native disclosure ---------------- */

.review__lead { margin-bottom: 0; }
.review__ellipsis { color: var(--color-body); }

/* When the disclosure is open the lead runs straight into the rest, so the
   trailing ellipsis would read as a gap in the sentence. */
.review__quote:has(.review__full[open]) .review__ellipsis { display: none; }

.review__full { margin-top: 10px; }
.review__full > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-rose-text);
  cursor: pointer;
  list-style: none;
}
.review__full > summary::-webkit-details-marker { display: none; }
.review__full > summary::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.review__full[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.review__full > summary:hover { color: var(--color-rose-text-hover); }
.review__full > p { margin-top: 10px; }
.review__full[open] { margin-bottom: 4px; }

/* The card grid stretches rows to the tallest card; keep the person pinned to
   the bottom so avatars stay on one line across the row. */
.review__quote { margin-bottom: 18px; }

/* --- Two fixes found by testing with JavaScript disabled ------------------- */

/* 1. A class that sets `display` beats the user-agent rule for [hidden], so the
      carousel arrows stayed on screen while marked hidden — visible, focusable
      and inert. Make the attribute win everywhere. */
[hidden] { display: none !important; }

/* 2. `.visually-hidden` is absolutely positioned, so it resolves against the
      nearest positioned ancestor. Inside the reviews carousel that was
      `.reviews__viewport`, which sits OUTSIDE the scrolling track — so the
      off-screen cards' hidden labels escaped the scroll container and stretched
      the document to 887px at 375px wide. Giving each card a containing block
      keeps them inside the part that scrolls. */
.review { position: relative; }

/* ==========================================================================
   Blog — index and article pages
   ========================================================================== */

.post-index { background: var(--color-beige); padding-block: var(--section-y); }

.post-grid {
  display: grid;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; } }

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.post-card__media { display: block; line-height: 0; }
.post-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 40%;
}
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 28px; }
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.post-card__category { color: var(--color-rose-text); }
.post-card__time { color: var(--color-body); }
.post-card__title { font-size: 1.3rem; line-height: 1.25; margin-bottom: 12px; }
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { color: var(--color-plum-text); }
.post-card__excerpt {
  color: var(--color-body);
  font-size: 0.9rem;
  line-height: 1.66;
  margin: 0;
}

/* --- Article --------------------------------------------------------------- */

.post { display: block; }

.post__header {
  background: linear-gradient(90deg, #eadcf0 0%, #f7ede5 50%, #f3dde6 100%);
  padding-block: clamp(34px, 5vw, 60px);
}
.post__header-inner { max-width: 820px; margin-inline: auto; }
.post__header h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1;
  margin-bottom: 18px;
}

.post__crumbs { margin-bottom: 22px; }
.post__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.76rem;
  color: var(--color-body-strong);
}
.post__crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--color-line); }
.post__crumbs a { color: var(--color-body-strong); text-underline-offset: 3px; }
.post__crumbs a:hover { color: var(--color-plum-text); }
.post__crumbs [aria-current] { color: var(--color-ink); }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-body-strong);
}
.post__category { color: var(--color-rose-text); }

.post__figure { background: var(--color-ivory); padding-top: clamp(28px, 4vw, 44px); }
.post__figure .shell { max-width: calc(880px + var(--gutter) * 2); }
.post__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 38%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.post__body { background: var(--color-ivory); padding-block: clamp(34px, 5vw, 56px) var(--section-y); }
.post__body-inner { max-width: 720px; margin-inline: auto; }
.post__body-inner h2 {
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  line-height: 1.2;
  margin-top: 1.9em;
  margin-bottom: 0.6em;
}
.post__body-inner h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); margin-top: 1.6em; margin-bottom: 0.5em; }
.post__body-inner > p {
  color: var(--color-body);
  font-size: 1.04rem;
  line-height: 1.78;
}
.post__body-inner > p:first-of-type { font-size: 1.12rem; color: var(--color-ink); }

.post__list { list-style: none; margin: 0 0 1.4em; padding: 0; }
.post__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  color: var(--color-body);
  font-size: 1.02rem;
  line-height: 1.7;
}
.post__list li::before {
  content: '';
  position: absolute;
  left: 6px; top: 0.72em;
  width: 7px; height: 7px;
  background: var(--color-gold);
  border-radius: 50%;
}

.post__toc {
  margin: 0 0 2.2em;
  padding: 24px 28px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.post__toc-heading {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-rose-text);
  margin-bottom: 14px;
}
.post__toc ol { margin: 0; padding-left: 20px; }
.post__toc li { margin-bottom: 7px; color: var(--color-body); }
.post__toc a { color: var(--color-ink); text-underline-offset: 3px; }
.post__toc a:hover { color: var(--color-plum-text); }

.post__cta {
  margin-top: 2.6em;
  padding: 30px 32px;
  background: var(--color-warm-blush);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.post__cta-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-plum-text);
  margin-bottom: 10px;
}
.post__cta-title { font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin-bottom: 20px; }
.post__cta p:last-child { margin: 0; }

.post__disclaimer {
  margin-top: 2.2em;
  padding-top: 20px;
  border-top: 1px solid rgba(221, 203, 188, 0.8);
  color: var(--color-body);
  font-size: 0.86rem;
  line-height: 1.65;
}

.post__more { background: var(--color-beige); padding-block: var(--section-y); }
.post__more-heading {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 42px);
}
@media (min-width: 1024px) {
  .post-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Post card: one link, whole card clickable ----------------------------- */

/* The image used to be a second <a> to the same URL, marked aria-hidden and
   tabindex=-1. That is an ARIA violation (aria-hidden on an interactive
   element), it left a link with no accessible name, and it gave every post two
   links competing for the same anchor text. The title link now stretches over
   the card instead — one link, correctly named, fully keyboard reachable. */
.post-card { position: relative; }
.post-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.post-card:focus-within { box-shadow: var(--shadow-lift); }
.post-card__title a:focus-visible { outline: none; }
.post-card:has(.post-card__title a:focus-visible) {
  outline: 2px solid var(--color-plum);
  outline-offset: 3px;
}
/* Keep the excerpt selectable rather than swallowed by the stretched link. */
.post-card__excerpt { position: relative; }

/* ==========================================================================
   Interaction — restrained by design. Every control below works as a plain
   link or button without JavaScript; scripting only adds the state.
   ========================================================================== */

/* --- Services jump nav ----------------------------------------------------- */

.jump {
  position: sticky;
  top: 78px;
  z-index: 60;
  background: rgba(251, 247, 241, 0.96);
  backdrop-filter: saturate(120%) blur(8px);
  border-block: 1px solid rgba(221, 203, 188, 0.75);
}
@media (min-width: 1024px) { .jump { top: 108px; } }

.jump__list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.jump__list::-webkit-scrollbar { display: none; }

.jump__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  white-space: nowrap;
  background: var(--color-beige);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-body-strong);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.jump__link:hover { background: var(--color-warm-blush); color: var(--color-ink); }
.jump__link.is-current {
  background: var(--color-plum-strong);
  border-color: var(--color-plum-strong);
  color: #fff;
}

/* The sticky bar adds to the fixed offset an anchor has to clear. */
.path--illustrated { scroll-margin-top: 0; }
.path--illustrated .offering { scroll-margin-top: 150px; }
@media (min-width: 1024px) { .path--illustrated .offering { scroll-margin-top: 184px; } }

/* --- Booking: session picker ----------------------------------------------- */

.booking__picker { margin-bottom: 28px; }
.booking__picker-label {
  margin-bottom: 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-rose-text);
}
.booking__picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.booking__pick {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.booking__pick:hover { background: var(--color-warm-blush); transform: translateY(-1px); }
.booking__pick.is-current {
  background: var(--color-plum-strong);
  border-color: var(--color-plum-strong);
  color: #fff;
}

/* --- Blog: category filter -------------------------------------------------- */

.post-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: clamp(28px, 4vw, 40px);
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(221, 203, 188, 0.8);
}
.post-filter__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-rose-text);
}
.post-filter__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.post-filter__button {
  min-height: 44px;
  padding: 10px 20px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-body-strong);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.post-filter__button:hover { background: var(--color-warm-blush); color: var(--color-ink); }
.post-filter__button.is-current {
  background: var(--color-plum-strong);
  border-color: var(--color-plum-strong);
  color: #fff;
}
.post-filter__count {
  margin: 0 0 0 auto;
  font-size: 0.8rem;
  color: var(--color-body);
}

/* --- Reading progress ------------------------------------------------------- */

.reading-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-rose), var(--color-plum-strong));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --- Back to top ------------------------------------------------------------ */

.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: var(--color-plum-strong);
  border-radius: 50%;
  box-shadow: var(--shadow-lift);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.to-top:hover { background: var(--color-plum-dark); transform: translateY(-3px); }
.to-top__arrow {
  width: 10px; height: 10px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateY(2px) rotate(45deg);
}

@media print {
  .jump, .to-top, .reading-progress, .post-filter, .booking__picker { display: none !important; }
}

/* ==========================================================================
   Mentorship — The Embodied Alignment & Magnetism Mentorship + application
   ========================================================================== */

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

.page-hero__tagline {
  max-width: 30em;
  margin: 0 auto 20px;
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 2.6vw, 1.65rem);
  line-height: 1.34;
  color: var(--color-ink);
}
.page-hero__closer {
  margin-top: 20px;
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  line-height: 1.25;
  color: var(--color-plum-text);
}
.button-row--centred { justify-content: center; margin-top: 28px; }

/* Breadcrumb inside a page hero. Same shape as the article crumbs, centred. */
.crumbs { margin-bottom: 20px; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.76rem;
  color: var(--color-body-strong);
}
.crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--color-line); }
.crumbs a { color: var(--color-body-strong); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--color-plum-text); }
.crumbs [aria-current] { color: var(--color-ink); }

/* --- Alignment & magnetism: the four tensions ------------------------------ */

.tension { background: var(--color-ivory); padding-block: var(--section-y); }
.tension__grid {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0 0 clamp(38px, 5vw, 58px);
  padding: 0;
}
@media (min-width: 700px) { .tension__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tension__item {
  padding: 26px 28px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-rose);
  border-radius: var(--radius-card);
}
.tension__want {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.14rem, 2.2vw, 1.38rem);
  line-height: 1.32;
  color: var(--color-ink);
}
.tension__but { color: var(--color-body); font-size: 0.97rem; line-height: 1.62; }
.tension__prose { max-width: 780px; margin-inline: auto; text-align: center; }
.tension__prose p { color: var(--color-body); font-size: 1.02rem; }

/* --- What changes ---------------------------------------------------------- */

.imagine { background: var(--color-beige); padding-block: var(--section-y); }
/* The shared support cards sit on beige; on a beige band they need the lift. */
.imagine .support__item, .fit .support__item,
.tension .support__item { background: var(--color-ivory); }
.imagine__close {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.imagine__close span, .imagine__close strong { display: block; }
.imagine__close span { color: var(--color-body); font-size: 1.02rem; margin-bottom: 8px; }
.imagine__close strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.3;
  color: var(--color-ink);
}

/* --- A mentorship that meets you where you are ----------------------------- */

.meets { background: var(--color-ivory); padding-block: var(--section-y); }
.meets__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.meets__inner h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.16;
  margin-bottom: 26px;
}
.meets__inner p { color: var(--color-body); font-size: 1.02rem; }
.qualities {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}
.meets__list {
  list-style: none;
  margin: 26px auto;
  padding: 0;
  max-width: 34em;
}
.meets__list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-body);
  font-size: 1rem;
  line-height: 1.6;
}
.meets__list li:last-child { border-bottom: 0; }
.meets__signoff {
  max-width: 40em;
  margin: 28px auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.45;
  color: var(--color-ink);
}

.qualities li {
  padding: 14px 20px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.35;
  color: var(--color-ink);
}

/* --- The method ------------------------------------------------------------ */

.method { background: var(--color-warm-band); padding-block: var(--section-y); }
.method .section-head__lede { color: var(--color-body-strong); }
.method__grid {
  display: grid;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: start;
}
@media (min-width: 900px) { .method__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }

.method__item {
  padding: 32px 30px 30px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.method__number {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-gold-deep);
}
.method__name {
  margin-bottom: 6px;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.method__tagline {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--color-rose-text);
}
.method__body p { color: var(--color-body); font-size: 0.95rem; line-height: 1.68; }
.method__quote {
  margin: 0 0 1.15em;
  padding: 18px 22px;
  background: var(--color-beige);
  border-left: 3px solid var(--color-gold);
  border-radius: 14px;
}
.method__quote p {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--color-ink);
}
.method__list { list-style: none; margin: 0 0 1.15em; padding: 0; }
.method__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  color: var(--color-body);
  font-size: 0.95rem;
  line-height: 1.55;
}
.method__list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 0.66em;
  width: 6px; height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
}

/* --- Personal Alignment Blueprint ------------------------------------------ */

.blueprint { background: var(--color-beige); padding-block: var(--section-y); }
.blueprint__intro {
  margin-bottom: 26px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-ink);
}
.blueprint__grid {
  display: grid;
  gap: 22px;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}
@media (min-width: 620px) { .blueprint__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .blueprint__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } }

.blueprint__note, .journeys__note {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-body-strong);
  font-size: 0.9rem;
  line-height: 1.66;
}

/* --- What's included ------------------------------------------------------- */

.included { background: var(--color-soft-lavender); padding-block: var(--section-y); }
.included .section-head__lede { color: var(--color-body-strong); }
.included__close, .fit__close, .ws-close {
  max-width: 780px;
  margin: 36px auto 0;
  text-align: center;
}
.included__close p, .fit__close p, .ws-close p { color: var(--color-body-strong); font-size: 1.02rem; }

/* --- Choose your journey --------------------------------------------------- */

.journeys { background: var(--color-ivory); padding-block: var(--section-y); }
.journeys__grid {
  display: grid;
  gap: 24px;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  align-items: start;
}
@media (min-width: 700px) { .journeys__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .journeys__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } }

.j-card {
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.j-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.j-card--featured { border-color: var(--color-plum); box-shadow: var(--shadow-soft); }
.j-card__flag {
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 6px 14px;
  background: var(--color-plum-strong);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.j-card__name {
  margin-bottom: 4px;
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.j-card__term {
  margin-bottom: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-rose-text);
}
.j-card__tagline {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.35;
  color: var(--color-ink);
}
.j-card__text { color: var(--color-body); font-size: 0.93rem; line-height: 1.66; }
.j-card__for {
  margin: 0 0 14px;
  color: var(--color-plum-text);
  font-size: 0.92rem;
  line-height: 1.6;
}
.j-card__label {
  margin: 0 0 8px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-rose-text);
}
.j-card__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.j-card__list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
  color: var(--color-body);
  font-size: 0.9rem;
  line-height: 1.55;
}
.j-card__list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}
.j-card__choose {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--color-ink);
}

/* --- Is this you? ---------------------------------------------------------- */

.fit { background: var(--color-beige); padding-block: var(--section-y); }

/* --- Closing: the four "more" lines ---------------------------------------- */

.closing__more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
.closing__more li {
  padding: 10px 20px;
  background: rgba(251, 247, 241, 0.72);
  border: 1px solid rgba(197, 165, 90, 0.4);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--color-ink);
}

/* --- The application form --------------------------------------------------- */

/* Her sixteen questions include checkbox groups, radio groups and a 1-10
   scale, so the form needed more than the single-line fields the contact form
   uses. Every group is a <fieldset>/<legend>; the styles below only make it
   look like the rest of the site. */
.qnum { color: var(--color-rose-text); font-variant-numeric: tabular-nums; }
.field--group {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.field--group legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-ink);
}
.opts {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 700px) {
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--consents .opts { grid-template-columns: 1fr; }
}
.opt {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 4px 14px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: 12px;
}
.opt input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  align-self: center;
  accent-color: var(--color-plum-strong);
}
/* The label is the tap target — the box alone is far under 44px, and the
   label is what a thumb actually lands on. */
.opt label {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 44px;
  margin: 0;
  padding: 4px 0;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-body-strong);
  cursor: pointer;
}
.opt:focus-within { border-color: var(--color-plum); }

/* The readiness scale. Each step is a 44px tap target so it works on a phone. */
.scale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.scale__step { flex: 1 1 44px; }
.scale__step input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.scale__step label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--color-body-strong);
  cursor: pointer;
}
.scale__step input:checked + label {
  background: var(--color-plum-strong);
  border-color: var(--color-plum-strong);
  color: #fff;
}
/* The input is visually hidden, so the focus ring has to move to the label. */
.scale__step input:focus-visible + label {
  outline: 2px solid var(--color-plum);
  outline-offset: 2px;
}
.scale__ends {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-body-strong);
}

/* The honeypot. Hidden from people, still submitted by bots. */
.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Her confirmation message. Ships hidden and is revealed by the server after a
   submission made without JavaScript — see server.js. */
.form-done {
  padding: 26px 24px;
  background: var(--color-warm-blush);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  text-align: center;
}
.form-done h2 {
  margin: 0 0 14px;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.3;
}
.form-done p {
  margin: 0 0 12px;
  color: var(--color-body-strong);
  font-size: 0.96rem;
  line-height: 1.66;
}
.form-done__closer {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--color-ink);
}

/* Her intro paragraphs above the form. */
.page-hero__note {
  max-width: 46em;
  margin: 0 auto 10px;
  color: var(--color-body-strong);
  font-size: 0.96rem;
  line-height: 1.66;
}

/* --- Group events ----------------------------------------------------------- */

/* The one part of the site assembled at request time — see src/events.js. The
   date block is a fixed column so a list of events reads as a calendar down
   the left rather than as a stack of unrelated cards. */
.gevents { background: var(--color-beige); padding-block: var(--section-y); }
.gevents__grid {
  display: grid;
  gap: 18px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 820px;
}
.gevent {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 24px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: 18px;
}
.gevent__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  margin: 0;
  padding: 10px 0;
  /* Without this the date block stretches to the full height of the card. */
  align-self: start;
  background: var(--color-warm-blush);
  border-radius: 14px;
}
.gevent__day {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-ink);
}
.gevent__month {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-plum-text);
}
.gevent__body { min-width: 0; }
.gevent__title {
  margin: 0 0 4px;
  font-size: clamp(1.12rem, 2.2vw, 1.35rem);
  line-height: 1.28;
}
.gevent__when {
  margin: 0 0 10px;
  color: var(--color-plum-text);
  font-size: 0.88rem;
  font-weight: 600;
}
.gevent__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.gevent__meta li {
  padding: 4px 12px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  color: var(--color-body-strong);
}
.gevent__text {
  margin: 0 0 12px;
  color: var(--color-body);
  font-size: 0.94rem;
  line-height: 1.62;
}
.gevent__price {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--color-ink);
}
.gevent__cta { margin-top: 2px; }
.gevents__empty {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-body-strong);
  font-size: 1rem;
  line-height: 1.7;
}

/* Below 520px the date column costs more than it gives, so it becomes a row. */
@media (max-width: 519px) {
  .gevent { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .gevent__date {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 14px;
    align-self: start;
  }
  .gevent__day { font-size: 1.3rem; }
}

/* --- Who it is not for ----------------------------------------------------- */

.notfit {
  max-width: 780px;
  margin: 46px auto 0;
  padding: 30px 32px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: 20px;
}
.notfit__heading {
  margin: 0 0 18px;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.3;
  text-align: center;
}
.notfit__list { list-style: none; margin: 0 0 20px; padding: 0; }
.notfit__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--color-body);
  font-size: 0.94rem;
  line-height: 1.6;
}
.notfit__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 10px;
  height: 1px;
  background: var(--color-gold);
}
.notfit__close {
  margin: 0;
  text-align: center;
  color: var(--color-body-strong);
  font-size: 0.92rem;
  line-height: 1.66;
}

/* --- Ready to take the first step? ----------------------------------------- */

.ready { background: var(--color-beige); padding-block: var(--section-y); }
.ready__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.ready__inner h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.18;
  margin-bottom: 22px;
}
.ready__text { color: var(--color-body); font-size: 1.02rem; }
.ready__intro {
  margin: 26px 0 14px;
  font-weight: 600;
  color: var(--color-body-strong);
}
.ready__list {
  display: inline-block;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  text-align: left;
}
.ready__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  color: var(--color-body);
  font-size: 0.96rem;
  line-height: 1.55;
}
.ready__list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}
.ready__question {
  margin: 28px auto;
  padding: 0;
  border: 0;
  max-width: 34em;
}
.ready__question p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.4;
  color: var(--color-ink);
}
.ready__closer {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--color-plum-text);
}

/* --- Standing note (not a substitute for medical care) --------------------- */

.mentor-note { background: var(--color-ivory); padding-block: 30px; }
.mentor-note p {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-body-strong);
  font-size: 0.84rem;
  line-height: 1.66;
}

/* --- Application form: helper text under a label --------------------------- */

.field__hint {
  display: block;
  margin: -3px 0 9px;
  color: var(--color-body-strong);
  font-size: 0.83rem;
  line-height: 1.5;
}

/* ==========================================================================
   Workshop: Angelic Reiki Level 1 & 2 Practitioner Training
   One dated event page. It reuses the shared components wherever the shape
   already fits (.story, .meets__inner, .support__grid, .qualities, .card-grid,
   .faq, .closing, .contact) and only adds what a dated, priced, capped
   workshop genuinely needs: an illustrated hero, a schedule, and the facts
   panel beside it.
   ========================================================================== */

.wshero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #eadcf0 0%, #f7ede5 50%, #f3dde6 100%);
  padding-block: clamp(40px, 6vw, 78px);
}
.wshero__inner {
  position: relative;
  display: grid;
  gap: clamp(28px, 4.5vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .wshero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}
.wshero__copy { min-width: 0; }
.wshero h1 {
  font-size: clamp(2.05rem, 5.2vw, 3.35rem);
  line-height: 1.07;
  margin-bottom: 16px;
}
.wshero__tagline {
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  color: var(--color-plum-text);
}

.wshero__facts {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
@media (min-width: 560px) { .wshero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wshero__fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  background: rgba(251, 247, 241, 0.74);
  border: 1px solid rgba(197, 165, 90, 0.42);
  border-radius: 16px;
}
.wshero__fact-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.wshero__fact-icon .icon { width: 17px; height: 17px; }
.wshero__fact-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wshero__fact-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-rose-text);
}
.wshero__fact-value { color: var(--color-ink); font-size: 0.95rem; line-height: 1.45; }
.wshero__lede { color: var(--color-ink); font-size: clamp(1rem, 1.7vw, 1.1rem); }
.wshero__text { color: var(--color-body-strong); font-size: 0.98rem; }
.wshero .button-row { margin-top: 26px; }

/* Below 900px the artwork leads. `order` moves it visually only — the DOM
   keeps the <h1> first, which is the order assistive tech follows, and the
   image is not focusable so nothing about tab order changes. */
.wshero__media { order: -1; margin: 0; }
@media (min-width: 900px) { .wshero__media { order: 0; } }
.wshero__media img {
  width: 100%;
  border-radius: 26px;
  border: 1px solid rgba(197, 165, 90, 0.5);
  box-shadow: var(--shadow-lift);
}

/* One display-type line closing a prose section. */
p.ws-emphasis {
  margin-top: 26px;
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 2.7vw, 1.7rem);
  line-height: 1.34;
  color: var(--color-ink);
}

.ws-what { background: var(--color-ivory); padding-block: var(--section-y); }
.ws-approach { background: var(--color-warm-band); padding-block: var(--section-y); }
/* The shared quote block is left-anchored by a gold rule; in a centred column
   that reads as a mistake, so this one is symmetric. */
.ws-approach .method__quote {
  max-width: 30em;
  margin-inline: auto;
  padding: 20px 26px;
  border: 1px solid rgba(197, 165, 90, 0.5);
  border-radius: 18px;
  text-align: center;
}
.ws-certificate { background: var(--color-ivory); padding-block: var(--section-y); }

.ws-learn { background: var(--color-ivory); padding-block: var(--section-y); }
.ws-learn__more {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--color-rose-text);
}

.ws-includes { background: var(--color-soft-lavender); padding-block: var(--section-y); }
.ws-includes__grid { margin-top: 0; }
@media (min-width: 700px) { .ws-includes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ws-includes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-includes__grid li {
  background: var(--color-ivory);
  border-radius: var(--radius-card);
  text-align: center;
}

.ws-small { background: var(--color-beige); padding-block: var(--section-y); }
.ws-small__inner { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (min-width: 820px) {
  .ws-small__inner { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); }
}
.ws-small__figure {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-plum);
}
.ws-small__body { min-width: 0; }
.ws-small__body h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.16;
  margin-bottom: 20px;
}
.ws-small__body p { color: var(--color-body); font-size: 1.02rem; }
p.ws-small__lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.4;
  color: var(--color-ink);
}
.ws-small__spaces { list-style: none; margin: 0 0 1.3em; padding: 0; }
.ws-small__spaces li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: var(--color-body);
}
.ws-small__spaces li::before {
  content: '';
  position: absolute;
  left: 6px; top: 0.72em;
  width: 7px; height: 7px;
  background: var(--color-gold);
  border-radius: 50%;
}

.ws-details { background: var(--color-soft-lavender); padding-block: var(--section-y); }
.ws-details__grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 860px) {
  .ws-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}
.ws-details__panel, .ws-facts {
  padding: 30px 28px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.ws-details__sub {
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-rose-text);
}
.ws-schedule { list-style: none; margin: 0; padding: 0; }
.ws-schedule__item { padding: 16px 0; border-top: 1px solid rgba(221, 203, 188, 0.7); }
.ws-schedule__item:first-child { padding-top: 0; border-top: 0; }
.ws-schedule__item:last-child { padding-bottom: 0; }
.ws-schedule__day {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.32rem);
  line-height: 1.3;
  color: var(--color-ink);
}
.ws-schedule__time { margin: 0; color: var(--color-body); font-size: 0.95rem; }

.ws-facts { list-style: none; margin: 0; }
.ws-facts__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(221, 203, 188, 0.7);
}
.ws-facts__item:first-child { padding-top: 0; border-top: 0; }
.ws-facts__item:last-child { padding-bottom: 0; }
.ws-facts__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: 50%;
}
.ws-facts__icon .icon { width: 18px; height: 18px; }
.ws-facts__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ws-facts__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-rose-text);
}
.ws-facts__value { color: var(--color-ink); font-size: 0.98rem; line-height: 1.5; }
.ws-details__notes { max-width: 780px; margin: 30px auto 0; text-align: center; }
.ws-details__notes p { margin-bottom: 0.5em; color: var(--color-body-strong); font-size: 0.95rem; }

.ws-prompt {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  color: var(--color-ink);
}
.ws-signoff { margin: 34px 0 0; color: var(--color-body-strong); }
.ws-signoff .story__signature { display: block; margin-top: 2px; }

@media print {
  .tension__item, .method__item, .j-card, .s-card { break-inside: avoid; }
  .ws-details__panel, .ws-facts, .support__item, .ws-includes__grid li { break-inside: avoid; }
  .wshero__media { display: none; }
}

/* --- Work With Me: intro + complementary-care note ------------------------- */

.intro-band { background: var(--color-ivory); padding-block: clamp(38px, 5.5vw, 64px); }
.intro-band__grid { display: grid; gap: 34px; align-items: center; justify-items: center; }
.intro-band__media { width: 100%; max-width: 320px; }
.intro-band__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 2px solid var(--color-line);
  border-radius: clamp(60px, 13vw, 130px);
}
.intro-band__text {
  max-width: 58ch;
  margin: 0 0 1.05em;
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.78;
  color: var(--color-body);
  text-align: center;
}
.intro-band__text:last-child { margin-bottom: 0; }
@media (min-width: 820px) {
  .intro-band__grid {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 56px;
    /* stacked, the columns centre; side by side, the copy sits against the photo */
    justify-items: start;
  }
  .intro-band__text { text-align: left; }
}

.service-note { background: var(--color-beige); padding: 0 0 clamp(40px, 6vw, 72px); }
.service-note__text {
  max-width: 74ch;
  margin: 0 auto;
  padding: 20px 24px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-ivory);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--color-body);
  text-align: center;
}

/* ==========================================================================
   Group event: Reclaim Your Power (Full Moon in Aries)
   A group event with a page of its own. It borrows the workshop page's hero,
   facts panel and closing band wholesale — only the square artwork, the two
   experience tiers, the three modalities and the intention band are new.
   ========================================================================== */

/* The artwork here is a 600px square, not the workshop's tall illustration, so
   it is capped rather than stretched: at full column width it would tower over
   the copy beside it. */
.wshero--event .wshero__media { justify-self: center; }
.wshero--event .wshero__media img {
  max-width: 460px;
  border-radius: 50%;
  border: 1px solid rgba(197, 165, 90, 0.5);
}

.ev-modalities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 20px 0 24px;
  padding: 0;
}
.ev-modalities li {
  padding: 6px 15px;
  background: rgba(251, 247, 241, 0.74);
  border: 1px solid rgba(197, 165, 90, 0.42);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-plum-text);
}

.ev-prices { list-style: none; margin: 22px 0 0; padding: 0; }
.ev-prices li {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.32rem);
  line-height: 1.5;
  color: var(--color-ink);
}

/* Her six short "to people / to situations" lines. They are a list because she
   wrote them one per line, but they are set as prose: bullets would turn a
   falling rhythm into an inventory. */
.ev-given { list-style: none; margin: 0 0 1.3em; padding: 0; }
.ev-given li {
  margin-bottom: 4px;
  color: var(--color-body-strong);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.1vw, 1.3rem);
  line-height: 1.5;
}

.ev-working { background: var(--color-warm-band); padding-block: var(--section-y); }
.ev-parts { display: grid; gap: 20px; }
@media (min-width: 900px) { .ev-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ev-part {
  padding: 30px 28px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.ev-part__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 16px;
  background: var(--color-warm-blush);
  border-radius: 50%;
  color: var(--color-plum-text);
}
.ev-part__icon .icon { width: 24px; height: 24px; }
.ev-part__title {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 2.3vw, 1.45rem);
  line-height: 1.25;
}
.ev-part p { color: var(--color-body); font-size: 0.96rem; }
.ev-part__lede { margin-top: 1.1em; color: var(--color-body-strong); font-weight: 600; }
.ev-part__list { list-style: none; margin: 14px 0 0; padding: 0; }
.ev-part__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  color: var(--color-body);
  font-size: 0.94rem;
}
.ev-part__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.62em;
  width: 6px; height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
}
.ev-part__close {
  margin-top: 1.2em;
  padding-top: 16px;
  border-top: 1px solid rgba(221, 203, 188, 0.7);
  color: var(--color-body-strong);
  font-style: italic;
}
.ev-part__after { margin-top: 0.8em; }

.ev-intention {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #eadcf0 0%, #f7ede5 50%, #f3dde6 100%);
  padding-block: clamp(44px, 6vw, 72px);
  text-align: center;
}
.ev-intention__list { list-style: none; margin: 0; padding: 0; }
.ev-intention__list li {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  line-height: 1.42;
  color: var(--color-ink);
}

.ev-tiers { background: var(--color-ivory); padding-block: var(--section-y); }
.ev-tiers__grid {
  display: grid;
  gap: 22px;
  max-width: 940px;
  margin-inline: auto;
}
@media (min-width: 820px) { .ev-tiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-tier {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.ev-tier--featured {
  background: var(--color-soft-lavender);
  border-color: rgba(197, 165, 90, 0.55);
  box-shadow: var(--shadow-lift);
}
.ev-tier__title {
  margin: 0 0 6px;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  line-height: 1.22;
}
.ev-tier__price {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1;
  color: var(--color-plum-text);
}
.ev-tier__lede { margin-bottom: 1em; color: var(--color-body-strong); font-weight: 600; font-size: 0.96rem; }
.ev-tier__list { list-style: none; margin: 0 0 24px; padding: 0; }
.ev-tier__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  color: var(--color-body);
  font-size: 0.95rem;
}
.ev-tier__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.6em;
  width: 7px; height: 7px;
  background: var(--color-gold);
  border-radius: 50%;
}
.ev-tier__extras { list-style: none; margin: 0 0 24px; padding: 0; }
.ev-extra { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.ev-extra__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-plum-text);
}
.ev-extra__icon .icon { width: 18px; height: 18px; }
.ev-extra__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-extra__title { font-weight: 700; color: var(--color-ink); }
.ev-extra__text { color: var(--color-body); font-size: 0.94rem; line-height: 1.6; }
/* The CTA sits on the bottom edge of both cards whichever list is longer. */
.ev-tier__cta { margin-top: auto; align-self: flex-start; }

.ev-bring__prompt {
  max-width: 780px;
  margin: 0 auto 22px;
  text-align: center;
  color: var(--color-body-strong);
  font-weight: 600;
}

.ev-details__grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 860px) {
  .ev-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}
.ev-details__prices .ws-facts__value {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
}

/* --- The featured event band (homepage + /group-events/) ------------------- */

/* One event large enough to have its own page, shown above the dated cards she
   manages herself. It is part of the build, not the request-time splice. */
.gfeature {
  display: grid;
  gap: clamp(20px, 3.5vw, 38px);
  align-items: center;
  max-width: 820px;
  margin: 0 auto 22px;
  padding: 26px;
  background: var(--color-ivory);
  border: 1px solid rgba(197, 165, 90, 0.5);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 720px) {
  .gfeature { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
}
.gfeature__media { margin: 0; justify-self: center; }
.gfeature__media img {
  width: 100%;
  max-width: 260px;
  border-radius: 50%;
  border: 1px solid rgba(197, 165, 90, 0.5);
}
.gfeature__body { min-width: 0; }
.gfeature__title {
  margin: 0 0 4px;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  line-height: 1.22;
}
.gfeature__title a { color: inherit; text-decoration: none; }
.gfeature__title a:hover, .gfeature__title a:focus-visible { color: var(--color-plum-text); }
.gfeature__tagline {
  margin: 0 0 12px;
  color: var(--color-plum-text);
  font-size: 0.88rem;
  font-weight: 600;
}
.gfeature__lede { margin: 0 0 14px; color: var(--color-body); font-size: 0.95rem; line-height: 1.62; }
.gfeature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.gfeature__meta li {
  padding: 4px 12px;
  background: var(--color-beige);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  color: var(--color-body-strong);
}
.gfeature__prices {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--color-ink);
}
.gfeature__cta { margin-top: 2px; }

/* --- Radio group: the real tap target is the label ------------------------- */

/* Matches .field--check, which does the same job for the consent boxes. */
.field--radios { margin: 0 0 20px; padding: 0; border: 0; }
.field--radios legend { padding: 0; margin-bottom: 6px; }
.field__radio { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.field__radio input { margin: 0; flex: none; width: 20px; height: 20px; }
.field__radio label { min-height: 44px; display: flex; align-items: center; margin: 0; cursor: pointer; }

@media print {
  .ev-part, .ev-tier, .gfeature { break-inside: avoid; }
  .wshero--event .wshero__media, .gfeature__media { display: none; }
}

/* --- Group event: what people sent afterwards ------------------------------ */

/* Short messages, so they are a wall rather than the homepage carousel: ten of
   these read faster side by side than one at a time behind arrows, and there is
   no JavaScript involved in seeing all of them. */
.ev-quotes { background: var(--color-beige); padding-block: var(--section-y); }
.ev-quotes__grid {
  display: grid;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 700px) { .ev-quotes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ev-quotes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ev-quote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  background: var(--color-ivory);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.ev-quote blockquote { margin: 0; }
.ev-quote blockquote p {
  margin: 0;
  color: var(--color-body);
  font-size: 0.95rem;
  line-height: 1.68;
}
.ev-quote__who { display: flex; align-items: center; margin: auto 0 0; }
.ev-quote__initial {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding-inline: 8px;
  background: var(--color-warm-blush);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-plum-text);
}
.ev-quotes__note {
  max-width: 720px;
  margin: 26px auto 0;
  text-align: center;
  color: var(--color-body-strong);
  font-size: 0.86rem;
  line-height: 1.65;
}

@media print { .ev-quote { break-inside: avoid; } }

/* --- Workshop: sold out, waitlist open ------------------------------------- */

/* The badge sits under the page's own eyebrow, so the state is read with the
   label rather than as a separate announcement further down. */
.wshero__status .eyebrow { margin-bottom: 14px; }
.ws-soldout__badge {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 14px;
  background: var(--color-plum-strong);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The notice under the hero. Eight sections describing the training sit
   between the hero and the form, so this says once, early and plainly what
   every button on the page now does. */
.ws-soldout {
  background: var(--color-warm-blush);
  border-block: 1px solid rgba(197, 165, 90, 0.42);
  padding-block: clamp(26px, 4vw, 40px);
}
.ws-soldout__inner { max-width: 780px; margin-inline: auto; text-align: center; }
.ws-soldout__heading {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.25;
}
.ws-soldout__text {
  margin: 0 0 22px;
  color: var(--color-body-strong);
  font-size: 1rem;
  line-height: 1.7;
}

/* The safety net under the two experience buttons. Both go to Calendly; this
   is where someone goes when a calendar has no times that suit — or, as of
   2026-09-10, no times at all on the Personalised event. */
.ev-tiers__fallback {
  max-width: 720px;
  margin: 26px auto 0;
  text-align: center;
  color: var(--color-body-strong);
  font-size: 0.93rem;
  line-height: 1.7;
}

/* Softening into Trust (27 October 2026). Her date and length lines carry no
   label of their own, so the value is the whole fact; and her "Please choose
   carefully" line sits under the closing button, where it is read just before
   choosing a ticket. */
.ev-when .wshero__fact { align-items: center; }
.ev-closing__note {
  margin: 22px 0 0;
  color: var(--color-body-strong);
  font-size: 0.93rem;
}

/* ==========================================================================
   Instagram strip — V39-era addition, 13 Sep 2026
   Sophia asked for recent posts visible without leaving the site. Tiles are
   LOCAL files: the CSP is img-src 'self', so a cdninstagram URL would render
   as six empty squares with no error anyone would notice.
   ========================================================================== */
.instagram { background: var(--color-ivory); padding-block: var(--section-y); }
.instagram h2 { margin: 0 0 10px; }
.ig-note {
  margin: 0 0 26px;
  max-width: 46ch;
  color: var(--color-body);
  font-size: 0.92rem;
}
.ig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
}
@media (min-width: 620px)  { .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .ig-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; } }
.ig-tile {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-beige);
}
.ig-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease, opacity 320ms ease;
}
.ig-tile:hover img, .ig-tile:focus-visible img { transform: scale(1.04); opacity: 0.92; }
.ig-tile:focus-visible { outline: 2px solid var(--color-plum); outline-offset: 3px; }
.ig-follow {
  display: inline-block;
  margin-top: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-plum-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 2px;
}
.ig-follow:hover, .ig-follow:focus-visible { color: var(--color-rose-text); }
@media (prefers-reduced-motion: reduce) {
  .ig-tile img { transition: none; }
  .ig-tile:hover img, .ig-tile:focus-visible img { transform: none; }
}

/* ---- In Their Words: client testimonials supplied direct, NOT Google ----
   Deliberately has no star rating and no source badge. The .review cards on the
   home page carry the Google mark because they ARE Google reviews; these came
   from Sophia over WhatsApp under initials, and must never be mistaken for the
   verified kind. Added 2026-09-14. */
.words { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.words__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem;
  grid-template-columns: 1fr; }
@media (min-width: 860px) { .words__grid { grid-template-columns: 1fr 1fr; } }
.words__card { background: #fff; border: 1px solid rgba(138,109,163,.18);
  border-radius: 18px; padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 12px 30px rgba(80,55,100,.06); display: flex;
  flex-direction: column; gap: 1rem; }
.words__quote { margin: 0; font-size: .98rem; line-height: 1.7; }
.words__quote p { margin: 0 0 .85rem; }
.words__quote p:last-child { margin-bottom: 0; }
.words__who { margin: auto 0 0; display: flex; align-items: center; gap: .75rem; }
.words__initials { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: 50%;
  background: #c987b5; color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 600; }
.words__meta { display: flex; flex-direction: column; line-height: 1.35; }
.words__name { font-weight: 600; }
.words__prog { font-size: .82rem; opacity: .72; }

/* ==========================================================================
   Mentorship, 2026-10-05 version — her rewrite mapped onto the blocks above.
   ========================================================================== */

/* Her three short lines under the hero lede, as pills like the closing band. */
.page-hero__more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.page-hero__more li {
  padding: 9px 18px;
  background: rgba(251, 247, 241, 0.72);
  border: 1px solid rgba(197, 165, 90, 0.4);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.35;
  color: var(--color-ink);
}

/* "The same pattern…": one example per area of life, three across. */
@media (min-width: 900px) {
  .tension__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tension__prose .tension__turn {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.3;
  color: var(--color-ink);
}
.imagine__close--spaced { margin-top: clamp(30px, 4vw, 44px); }

/* LOVE / HEALTH / WEALTH. Uneven lengths, so the cards do not stretch. */
.possible__grid { align-items: start; }
.possible__card .s-card__title { letter-spacing: 0.08em; }
.possible__lead {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.38;
  color: var(--color-ink);
}
.possible__card .s-card__text { margin-bottom: 12px; }
.possible__close {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--color-plum-text);
}

/* "You begin asking:" — three questions, so a narrower column of pills. */
.qualities--tight { max-width: 34em; margin: 16px auto 0; }

/* EMBODY's six separate lines. */
.method__lines { margin: 0 0 1.15em; }
.method__lines p { margin-bottom: 6px; }

/* Three blueprint tools now, not four. */
@media (min-width: 900px) {
  .blueprint__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* What's included is a list of seven on the lavender band. */
.included .support__item { background: var(--color-ivory); }

/* Her journey headings read "REALIGN — 3 Months" as one heading. */
.j-card .j-card__name { margin-bottom: 14px; }
.j-card__name .j-card__dash {
  font-size: 0.6em;
  letter-spacing: 0;
  vertical-align: 0.14em;
  color: var(--color-gold-deep);
}
.j-card__name .j-card__term {
  display: inline;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.5em;
  vertical-align: 0.2em;
  white-space: nowrap;
}
.j-card__text + .j-card__text { margin-top: 12px; }

/* --- Choose Your Mentorship Journey, priced (2026-10-09) ---------------------
   Her section now sits straight after the opening story, between the beige
   story band and the ivory tension band, so it takes the lavender band the old
   "What's included" list had, with ivory cards on it. One column up to tablet
   width (each card is long), three across from 1100px with the investment
   lined up along the bottom of all three. */
.journeys--priced { background: var(--color-soft-lavender); }
.journeys--priced .section-head__lede { color: var(--color-body-strong); }
.journeys--priced .section-head__lede + .section-head__lede { margin-top: 12px; }
.journeys--priced .journeys__grid {
  max-width: 680px;
  margin: 0 auto;
  align-items: stretch;
}
@media (min-width: 700px) { .journeys--priced .journeys__grid { grid-template-columns: none; } }
@media (min-width: 1100px) {
  .journeys--priced .journeys__grid {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }
}
.journeys--priced .j-card { background: var(--color-ivory); }
.j-card__includes {
  margin: 22px 0 10px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--color-ink);
}
.journeys--priced .j-card__list { margin-bottom: 24px; }
.j-card__invest {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}
.j-card__investment {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 8px;
}
.j-card__investment-label { font-size: 0.95rem; font-weight: 600; color: var(--color-body-strong); }
.j-card__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 2.5rem);
  line-height: 1;
  color: var(--color-plum-text);
}
.j-card__payment { margin: 0; color: var(--color-body); font-size: 0.92rem; }
.j-card__after { margin: 12px 0 0; color: var(--color-body); font-size: 0.92rem; line-height: 1.6; }

/* With the lavender "What's included" band gone, the blueprint (beige) would
   sit right on top of "may be for you" (beige). The blueprint band turns ivory
   and its cards beige instead. */
.blueprint { background: var(--color-ivory); }
.blueprint .t-card { background: var(--color-beige); }

/* Her assessment line and disclaimer under the three pathways (2026-10-09,
   replacing the Personal Alignment Blueprint section). The disclaimer is
   small print: smaller, but kept on --color-body-strong, which clears 4.5:1
   on the lavender band. */
.journeys__after {
  max-width: 780px;
  margin: 40px auto 0;
  text-align: center;
}
.journeys__assessment { margin: 0 0 18px; color: var(--color-body-strong); font-size: 1.02rem; }
.journeys__disclaimer { margin: 0; color: var(--color-body-strong); font-size: 0.8rem; line-height: 1.6; }