/* Unshakable Society, take E: "The combination"
   Bright-avenue's opening on top of take C's calm layout. Her gold is the one accent:
   the pilot band is her charcoal (her brochure band) instead of the teal.
   Everything new for E sits in the block marked TAKE E at the end of this file.
   Below is take C's sheet, kept as it was. */
/* (take C's original note follows)
   Unshakable Society, take C: "The Gathering"
   Community first and editorial: big serif statements, her six pillars gathered
   around a circle like her own offerings wheel, the pilot program as the flagship.
   PLUG IN: every colour, font and the logo live in the :root block below.
   Palette a = her brand (charcoal, antique gold, warm white, pilot teal).
   Palette b = her homepage panel (taupe and mauve brown, gold pills). */

:root {
  /* palette a, "Charcoal and Gold": her seal, her flyer, her photos */
  --k-paper: #F3EFEA;        /* page ground, the highlights of her washed photos */
  --k-ink: #2A2827;          /* text */
  --k-accent: #AD9551;       /* her antique gold (the U|S mark): fills, rules, arcs, buttons */
  --k-accent-ink: #725F2E;   /* the same gold, deep enough for small words on paper and stone (AA) */
  --k-mark: #9A7F3D;         /* the header U|S mark: her gold, a breath deeper so it reads on warm white */
  --k-arc: #AD9551;          /* the thin gold arcs and the pillar orbit */
  --k-secondary: #4A7A89;    /* 11/6: HER BLUE for the Get Started band (was charcoal). Her flyer blue #6294A4, one shade deeper so white words pass AA (4.7:1) */
  --k-on-photo: #FBF9F6;     /* words over the opening photo */
  --k-scrim: #2A2522;        /* the quiet shade under words on photos */
  --k-on-secondary: #FFFFFF; /* every word on the blue is white (McKenna, 11/6) */
  --k-deep: #3D3B3A;         /* her charcoal (the seal disc): footer, dark bands */
  --k-on-deep: #F3EFEA;
  --k-glow: #DBC589;         /* her pale pill gold: the six pillar pills, words on charcoal */
  --k-tint: #E6DFD7;         /* soft stone panels */
  --k-ghost: #E6DFD8;        /* the giant UNSHAKABLE once it sits on the ground (take F) */
  --k-panel: #4A7A89;        /* the vision panel over the photo: her blue (11/6) */
  --k-on-panel: #FFFFFF;
  --k-muted: #625C59;        /* small print */
  --k-wash: #A6908A;         /* the warm blush wash laid over every photo */

  /* photo treatment: 1 = black and white with her warm wash (her brochure look), 0 = full colour */
  --k-photo-mono: 1;
  --k-photo-wash: 0.42;
  /* HER BLUE (11/6, her email: "The blue in my style guide is missing"). Her pilot
     flyer's blue is #6294A4; white small words on it only reach 3.3:1, so every
     blue field that carries words uses it one shade deeper. */
  --k-blue: #4A7A89;         /* fields with white words: bands, buttons, the vision panel (4.7:1) */
  --k-blue-flyer: #6294A4;   /* her exact flyer blue: hairlines, and big type only */
  --k-blue-ink: #3F6B79;     /* small blue words on the warm white page (5:1) */
  --k-on-blue: #FFFFFF;
  --k-blue-tint: #E3EBEE;    /* a whisper of her blue for quiet panels */
  --k-blue-deep: #2E4F5A;    /* her blue at night: white words 8.9:1 */
  --k-white: #FFFFFF;
  --k-mist-ink: #EEF3F4;     /* small print on her blue */
  --k-black: #000;

  /* fonts */
  --k-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --k-body: "Newsreader", Georgia, serif;
  --k-label: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --k-wordmark-face: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* logo. Default: her transparent U|S mark (assets/logo-mark.png, shown as a mask in
     --k-mark) + the typed words, as in her v12 homepage mockup. The round seal
     (assets/logo-seal.png) is the favicon.
     Full lockup instead, no HTML edits: put assets/logo.svg (+ logo-light.svg for
     the charcoal footer) in assets, then set
       --k-logo: url("assets/logo.svg");  --k-logo-light: url("assets/logo-light.svg");
       --k-logo-w: 220px;  --k-logo-h: 48px;  --k-seal: none;  --k-wordmark: none;  */
  --k-logo: none;
  --k-logo-light: none;
  --k-logo-w: auto;
  --k-logo-h: auto;
  --k-seal: block;
  --k-wordmark: block;
  --k-seal-size: 56px;
}

[data-palette="b"] {
  /* palette b, "Taupe Panel": her homepage mockup panel, mauve brown and the gold pills */
  --k-paper: #DCD2C8;
  --k-ink: #33282A;
  --k-accent: #DBC589;
  --k-accent-ink: #6E4F47;
  --k-mark: #7E6436;         /* deep antique gold: the gold pill colour vanishes on taupe */
  --k-arc: #A88A5C;
  --k-secondary: #6A5650;
  --k-on-photo: #FBF7F0;
  --k-scrim: #1F1B19;
  --k-on-secondary: #F6F0EA;
  --k-deep: #3A2E2C;
  --k-on-deep: #F6F0EA;
  --k-glow: #DBC589;
  --k-tint: #EAE3DB;
  --k-ghost: #D0C4B8;
  --k-panel: #74665E;        /* her mockup taupe, a step deeper so small words on it pass AA */
  --k-on-panel: #F6F0EA;
  --k-muted: #5E4F4B;
  --k-wash: #9C7F78;
  --k-photo-mono: 1;
  --k-photo-wash: 0.5;
  --k-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --k-body: "Newsreader", Georgia, serif;
  --k-label: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --k-wordmark-face: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --k-logo: none;
  --k-logo-light: none;
  --k-logo-w: auto;
  --k-logo-h: auto;
  --k-seal: block;
  --k-wordmark: block;
  --k-seal-size: 56px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--k-paper);
  color: var(--k-ink);
  font-family: var(--k-body);
  font-size: 19px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--k-display); font-weight: 500; margin: 0; line-height: 1.02; letter-spacing: -0.005em; text-wrap: balance; }
.statement, .lede { text-wrap: pretty; }
h1 em, h2 em, h3 em { color: var(--k-accent-ink); font-weight: 400; }
.num-lining, .steps li::before, .price__opts strong, .tuition strong, .dates dd, .course ol li { font-variant-numeric: lining-nums; }
em { font-style: italic; }
::selection { background: var(--k-accent); color: var(--k-ink); }
:focus-visible { outline: 2px solid var(--k-accent-ink); outline-offset: 3px; }
.wrap { width: min(1240px, 100% - 64px); margin-inline: auto; }
.narrow { width: min(980px, 100% - 64px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--k-deep); color: var(--k-on-deep); padding: 10px 16px; font-family: var(--k-label); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.skip:focus { top: 12px; }

/* ---------- small type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--k-label); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.5;
  color: var(--k-accent-ink);
  margin: 0 0 26px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--k-arc); flex: none; }
.eyebrow--plain::before { display: none; }
.label {
  font-family: var(--k-label); font-weight: 600;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; line-height: 1.5;
}
.lede { font-size: 21px; line-height: 1.55; max-width: 34ch; }
.fine { font-size: 15px; color: var(--k-muted); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--k-label); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; padding: 18px 30px; border-radius: 999px;
  background: var(--k-accent); color: var(--k-ink);
  border: 1px solid var(--k-accent);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--k-ink); border-color: var(--k-ink); }
.btn--deep { background: var(--k-blue); color: var(--k-on-blue); border-color: var(--k-blue); } /* her blue (11/6) */
.btn--deep:hover, .btn--deep:focus-visible { background: transparent; color: var(--k-ink); border-color: var(--k-ink); }
.btn--light { background: var(--k-on-deep); color: var(--k-deep); border-color: var(--k-on-deep); }
.btn--light:hover, .btn--light:focus-visible { background: transparent; color: var(--k-on-deep); border-color: var(--k-on-deep); }
.btn--ghost { background: transparent; color: var(--k-ink); border-color: color-mix(in srgb, var(--k-ink) 32%, transparent); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--k-ink); color: var(--k-paper); border-color: var(--k-ink); }

/* her brochure voice: wide spaced Montserrat caps for the big section titles
   (MISSION, VISION, UNSHAKABLE PILLARS, INTRODUCTORY PILOT PROGRAM) */
.title-caps {
  font-family: var(--k-label); font-weight: 600; text-transform: uppercase;
  font-size: clamp(24px, 2.8vw, 40px); letter-spacing: .34em; line-height: 1.2;
  margin: 0 -.34em 0 0; text-wrap: balance;
}
.title-caps--rule::after { content: ""; display: block; width: 56px; height: 1px; background: var(--k-arc); margin-top: clamp(22px, 2.6vw, 32px); }
.title-caps--light { font-weight: 500; letter-spacing: .16em; margin-right: -.16em; }

/* her six gold pills, as on her homepage panel */
.pills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; max-width: 640px; }
.pill, .pillar h3 {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--k-glow); color: var(--k-ink);
  font-family: var(--k-label); font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; line-height: 1.2;
}
.go {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--k-label); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; padding: 8px 0;
}
/* 11/11 (Lexie): an arrow, not a bare line, so it reads as a link that goes somewhere.
   The shaft grows on hover; the head is drawn by the mask's right end. */
.go::after { content: ""; width: 44px; height: 12px; flex: none; background: currentColor; transition: width .35s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.5L11 6.5M6.5 1.5L11.2 6.5L6.5 11.5' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 12px 12px no-repeat, linear-gradient(var(--k-ink),var(--k-ink)) left 50% / calc(100% - 2px) 1.3px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.5L11 6.5M6.5 1.5L11.2 6.5L6.5 11.5' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 12px 12px no-repeat, linear-gradient(var(--k-ink),var(--k-ink)) left 50% / calc(100% - 2px) 1.3px no-repeat; }
.go:hover::after, .go:focus-visible::after { width: 68px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

/* ---------- home: her "People need hope" line, inside her two gold arcs ---------- */
.creed { position: relative; text-align: center; overflow: hidden; }
.creed__in { position: relative; display: flex; flex-direction: column; align-items: center; }
.creed__arcs { position: absolute; left: 50%; top: 50%; width: min(960px, 150vw); height: min(960px, 150vw); transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.creed__arcs path { fill: none; stroke: var(--k-arc); stroke-width: .18; stroke-linecap: round; }
.creed .eyebrow { color: var(--k-accent-ink); margin-bottom: 30px; }
.creed__words { font-size: clamp(40px, 5.4vw, 80px); line-height: 1.04; font-weight: 500; letter-spacing: -0.01em; max-width: 14em; }
.creed__words span { display: block; }
.creed__words em { color: var(--k-accent-ink); font-weight: 400; }
.creed__after { margin: 34px auto 0; max-width: 40ch; font-size: 18px; line-height: 1.6; color: var(--k-muted); }

/* ---------- photos: one treatment, so her photos match on arrival ---------- */
.ph { position: relative; overflow: hidden; background: var(--k-tint); margin: 0; }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(var(--k-photo-mono)) contrast(0.96) brightness(1.03); }
.ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--k-wash); mix-blend-mode: color; opacity: calc(var(--k-photo-wash) * var(--k-photo-mono));
}
.ph--round { border-radius: 50%; aspect-ratio: 1; }
.ph--oval { border-radius: 50% / 50%; }
.ph--arch { border-radius: 999px 999px 0 0; }

/* ---------- the lifeline (crisis help) ---------- */
.lifeline { background: var(--k-tint); border-block: 1px solid color-mix(in srgb, var(--k-ink) 10%, transparent); }
.lifeline__in { display: grid; grid-template-columns: auto 1fr; gap: 10px 40px; align-items: baseline; padding: 22px 0; }
.lifeline .label { color: var(--k-accent-ink); white-space: nowrap; }
.lifeline p { margin: 0; font-size: 17px; line-height: 1.55; }
.lifeline a { font-weight: 500; }
.lifeline strong { font-weight: 500; }

/* ---------- home: hero ---------- */
.hero { padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 8vw, 120px); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero h1 { font-size: clamp(54px, 7.3vw, 112px); line-height: .94; margin-bottom: 34px; letter-spacing: -0.015em; }
.hero h1 em { color: var(--k-accent-ink); font-weight: 400; }
.hero .lede { margin-bottom: 36px; }
.hero .hero__lede { max-width: 40ch; }
.circle { position: relative; width: 100%; max-width: 540px; margin-inline: auto; aspect-ratio: 1; }
.circle .ph { position: absolute; inset: 7%; border-radius: 50%; }
.circle__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.circle__arcs path { fill: none; stroke: var(--k-arc); stroke-width: .3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .circle__arcs path { animation: draw 2.2s cubic-bezier(.6,.1,.2,1) .3s backwards; }
  .circle__arcs path + path { animation-delay: .7s; }
}
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---------- home: statement sections ---------- */
.sec { padding-block: clamp(88px, 11vw, 168px); }
.statement {
  font-family: var(--k-display); font-weight: 500;
  font-size: clamp(31px, 4.1vw, 60px); line-height: 1.12; letter-spacing: -0.01em;
  margin: 0;
}
.statement em { color: var(--k-accent-ink); font-weight: 400; }
.mission .title-caps { margin-bottom: clamp(30px, 3.6vw, 48px); }
.mission__foot {
  display: flex; justify-content: flex-end;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent);
}

/* vision: full bleed photo, her panel floats over it (her homepage mockup, reset) */
.vision { position: relative; min-height: clamp(560px, 62vw, 820px); display: grid; align-items: center; }
.vision > .ph { position: absolute; inset: 0; }
.vision__panel {
  position: relative; z-index: 1;
  width: min(560px, 100%); margin-left: auto;
  background: var(--k-panel); color: var(--k-on-panel);
  padding: clamp(36px, 4.4vw, 64px);
}
.vision__panel .title-caps { color: var(--k-on-panel); font-size: clamp(24px, 2.6vw, 36px); margin-bottom: 26px; }
.vision__panel .title-caps--rule::after { background: var(--k-glow); margin-top: 20px; }
.vision__panel p { font-family: var(--k-display); font-size: clamp(25px, 2.25vw, 32px); line-height: 1.25; margin: 0; }
.vision__panel p + p { margin-top: 22px; font-style: italic; }

/* ---------- the six pillars: gathered around the circle ---------- */
.pillars { background: var(--k-tint); }
.pillars--ring { padding-bottom: clamp(64px, 7vw, 104px); }
.pillars__head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 80px; align-items: start; margin-bottom: clamp(56px, 7vw, 96px); }
.pillars__head > p { margin: 0; font-family: var(--k-display); font-size: clamp(25px, 2.3vw, 33px); line-height: 1.3; max-width: 34ch; text-wrap: pretty; }
.pillars__head > p em, .faith em, .faith-line em { color: var(--k-accent-ink); font-style: italic; }
.ring { --S: min(560px, 46vw); position: relative; height: var(--S); }
.ring__circle { position: absolute; left: 50%; top: 0; width: var(--S); height: var(--S); transform: translateX(-50%); }
.ring__circle .ph { position: absolute; inset: 15%; border-radius: 50%; }
.ring__orbit { position: absolute; inset: 4%; border: 1px solid var(--k-arc); border-radius: 50%; }
.ring__dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--k-arc); }
.ring__list { list-style: none; margin: 0; padding: 0; }
/* each pillar is her gold pill; the pill's centre sits on its orbit dot */
.pillar {
  position: absolute; top: var(--y); width: calc(50% - var(--S) / 2 - 40px); max-width: 300px;
  transform: translateY(-26px);
}
.pillar--l { right: calc(50% + var(--S) / 2 + 40px); text-align: right; }
.pillar--r { left: calc(50% + var(--S) / 2 + 40px); }
.pillar::before {
  content: ""; position: absolute; top: 26px; height: 1px; width: var(--c); background: var(--k-arc);
}
.pillar--l::before { left: calc(100% + 14px); }
.pillar--r::before { right: calc(100% + 14px); }
.pillar h3 { min-width: 214px; padding-left: calc(28px + .22em); margin-bottom: 12px; }
.pillar p { margin: 0; font-family: var(--k-display); font-size: 19px; line-height: 1.35; font-style: italic; color: var(--k-muted); }

/* ---------- the five paths ---------- */
.paths__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px 80px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.paths__head h2 { font-size: clamp(44px, 5.4vw, 84px); line-height: .98; }
.paths__head h2 em { color: var(--k-accent-ink); font-weight: 400; }
.paths__head > p { margin: 0; font-size: 19px; max-width: 40ch; }
.paths { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 22%, transparent); }
.path {
  position: relative;
  display: grid; grid-template-columns: 64px minmax(0, 1.05fr) minmax(0, 1fr) 132px; gap: 20px 40px; align-items: center;
  padding: 34px 0; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 22%, transparent);
  scroll-margin-top: 100px;
}
.path__num { font-family: var(--k-label); font-weight: 600; font-size: 11.5px; letter-spacing: .24em; color: var(--k-accent-ink); }
.path h3 { font-size: clamp(46px, 5.6vw, 88px); line-height: .9; font-weight: 500; transition: transform .45s ease; }
.path p { margin: 0 0 12px; font-size: 18px; line-height: 1.5; }
.path__subs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.path__subs li { font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--k-muted); }
/* Phase 2 items (directory, forum, shop, app) stay in the HTML but are hidden
   for launch. To switch them on in Phase 2, delete this one line. */
.path__subs li.later { display: none; }
.path__ph { width: 132px; height: 132px; border-radius: 50%; transition: transform .45s ease; }
.path__go { position: absolute; inset: 0; z-index: 1; }
.path__go:focus-visible { outline-offset: -3px; }
.path .go { margin-top: 12px; position: relative; z-index: 2; }
.path:has(.path__go):hover h3 { transform: translateX(10px); }
.path:has(.path__go):hover .path__ph { transform: scale(1.08); }

/* ---------- the pilot program (flagship) ---------- */
.start-band { background: var(--k-secondary); color: var(--k-on-secondary); }
.start-band__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.start-band .ph { aspect-ratio: 4 / 5.2; border-radius: 999px 999px 0 0; }
.start-band .eyebrow { color: var(--k-on-secondary); }
.start-band .eyebrow::before { background: var(--k-glow); }
.start-band h2 { font-size: clamp(26px, 2.9vw, 42px); margin-bottom: 26px; }
.start-band p { max-width: 50ch; }
.tracks { list-style: none; margin: 36px 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tracks li { border-top: 1px solid color-mix(in srgb, var(--k-on-secondary) 55%, transparent); padding-top: 14px; }
.tracks .label { display: block; color: var(--k-on-secondary); margin-bottom: 6px; }
.tracks b { font-family: var(--k-display); font-weight: 500; font-size: clamp(24px, 2.2vw, 31px); line-height: 1.05; display: block; }
.tuition { margin: 0 0 34px; }
/* the pilot status pill: its words come from ONE line in site.js (PILOT_STATUS) */
.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 999px; padding: 9px 16px; margin: 0 0 28px;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k-arc); }
.start-band .status::before { background: var(--k-glow); }
.start-band .go { color: var(--k-on-secondary); }
.start-band .btn:hover, .start-band .btn:focus-visible { color: var(--k-on-secondary); border-color: var(--k-on-secondary); }

/* ---------- community statement over the gathering ---------- */
.together { position: relative; color: var(--k-on-deep); min-height: clamp(560px, 60vw, 780px); display: grid; align-items: end; }
.together > .ph { position: absolute; inset: 0; }
.together > .ph::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--k-deep) 50%, transparent) 0%, color-mix(in srgb, var(--k-deep) 22%, transparent) 45%, transparent 62%),
    linear-gradient(to top, color-mix(in srgb, var(--k-deep) 78%, transparent) 0%, color-mix(in srgb, var(--k-deep) 36%, transparent) 50%, color-mix(in srgb, var(--k-deep) 6%, transparent) 100%);
}
.together__in { position: relative; z-index: 2; padding-block: 120px clamp(64px, 7vw, 104px); }
.together .eyebrow { color: var(--k-glow); }
.together .eyebrow::before { background: var(--k-glow); }
.together .statement { font-size: clamp(34px, 4.4vw, 64px); max-width: 24ch; text-shadow: 0 2px 24px color-mix(in srgb, var(--k-deep) 45%, transparent); }
.together .statement em { color: var(--k-glow); }

/* word by word rise (JS arms it; without JS the words simply show) */
.words.armed .w { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 40ms); }
.words.armed.in .w { opacity: 1; transform: none; }

/* ---------- stay close (email) ---------- */
.stay__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 96px; align-items: center; }
.stay h2 { font-size: clamp(44px, 5vw, 76px); line-height: .98; margin-bottom: 20px; }
.stay h2 em { color: var(--k-accent-ink); font-weight: 400; }
.stay p { max-width: 40ch; }
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--k-ink);
  background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 40%, transparent);
  padding: 10px 2px; border-radius: 0;
}
.field textarea { border: 1px solid color-mix(in srgb, var(--k-ink) 30%, transparent); padding: 14px; min-height: 140px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--k-ink) 50%), linear-gradient(135deg, var(--k-ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--k-accent-ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--k-accent-ink); outline-offset: 2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }

/* ---------- footer ---------- */
.foot { background: var(--k-deep); color: var(--k-on-deep); padding: clamp(72px, 8vw, 120px) 0 36px; }
.foot a { color: var(--k-on-deep); }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr)); gap: 48px; padding-bottom: 64px; border-bottom: 1px solid color-mix(in srgb, var(--k-on-deep) 18%, transparent); }
.foot__mark { width: 128px; height: 132px; background: var(--k-glow); -webkit-mask: url("assets/logo-mark.png") center / contain no-repeat; mask: url("assets/logo-mark.png") center / contain no-repeat; margin-bottom: 28px; }
.foot__logo { background: var(--k-logo-light) left center / contain no-repeat; min-width: var(--k-logo-w); min-height: var(--k-logo-h); margin-bottom: 12px; }
.foot__word { display: var(--k-wordmark); font-family: var(--k-wordmark-face); font-weight: 700; font-size: 15px; letter-spacing: .42em; text-transform: uppercase; line-height: 1.4; margin: 0 0 10px; }
.foot__tag { font-family: var(--k-display); font-style: italic; font-size: 24px; color: var(--k-glow); margin: 0; }
.foot__h { font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; line-height: 1.5; color: var(--k-glow); margin: 8px 0 18px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot li a { text-decoration: none; font-family: var(--k-display); font-size: 22px; }
.foot li a:hover, .foot li a:focus-visible { text-decoration: underline; }
.foot__sister p { font-size: 16px; line-height: 1.55; margin-bottom: 14px; color: color-mix(in srgb, var(--k-on-deep) 82%, transparent); }
.foot__sister .go { color: var(--k-glow); }
.foot__help { display: grid; grid-template-columns: auto 1fr; gap: 8px 32px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid color-mix(in srgb, var(--k-on-deep) 18%, transparent); }
.foot__help .label { color: var(--k-glow); }
.foot__help p { margin: 0; font-size: 16px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 28px; font-size: 14px; color: color-mix(in srgb, var(--k-on-deep) 72%, transparent); }
.foot__base p { margin: 0; }

/* ---------- inner pages: shared ---------- */
.page-head { padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 80px); }
.page-head h1 { font-size: clamp(56px, 8vw, 132px); line-height: .92; letter-spacing: -0.015em; }
.page-head h1 em { color: var(--k-accent-ink); font-weight: 400; }
.crumb { font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--k-muted); margin: 0 0 30px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* pilot page */
.pilot-head__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.pilot-head .status { color: var(--k-ink); }
.pilot-head .lede { margin: 30px 0 34px; max-width: 38ch; }
.dates { background: var(--k-tint); padding: 32px 34px 26px; border-top: 2px solid var(--k-arc); }
.dates h2 { font-size: 30px; margin-bottom: 18px; }
.dates dl { margin: 0; }
.dates dl div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); }
.dates dt { font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--k-accent-ink); padding-top: 4px; }
.dates dd { margin: 0; font-size: 18px; line-height: 1.45; }
.pilot-photo { height: clamp(320px, 40vw, 560px); }
.included__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 96px; }
.included h2 { font-size: clamp(42px, 5vw, 76px); line-height: .98; }
.included h2 em { color: var(--k-accent-ink); font-weight: 400; }
.checks { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.checks li { break-inside: avoid; position: relative; padding: 14px 0 14px 28px; border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); font-size: 18px; line-height: 1.45; }
.checks li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 8px; height: 8px; background: var(--k-arc); }
.course-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.course { border-top: 1px solid var(--k-arc); padding-top: 22px; }
.course .label { color: var(--k-accent-ink); display: block; margin-bottom: 14px; }
.course h3 { font-size: clamp(32px, 3vw, 44px); line-height: 1; margin-bottom: 20px; }
.course ol { margin: 0; padding: 0; list-style: none; counter-reset: l; }
.course ol li { counter-increment: l; display: grid; grid-template-columns: 26px 1fr; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 10%, transparent); font-size: 17px; line-height: 1.4; }
.course ol li::before { content: counter(l, decimal-leading-zero); font-family: var(--k-label); font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--k-muted); padding-top: 5px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px 80px; align-items: end; margin-bottom: clamp(44px, 5vw, 72px); }
.sec-head h2 { font-size: clamp(42px, 5vw, 76px); line-height: .98; }
.sec-head h2 em { color: var(--k-accent-ink); font-weight: 400; }
.sec-head > p { margin: 0; max-width: 42ch; }
.price { background: var(--k-deep); color: var(--k-on-deep); }
.price .eyebrow { color: var(--k-glow); }
.price .eyebrow::before { background: var(--k-glow); }
.price .sec-head h2 em { color: var(--k-glow); }
/* one tuition figure, then the plan in plain words (never a tier table) */
.price__one { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px clamp(40px, 6vw, 96px); align-items: center; padding-top: 34px; border-top: 1px solid color-mix(in srgb, var(--k-on-deep) 25%, transparent); }
.price__fig { margin: 0; }
.price__fig strong { display: block; font-family: var(--k-display); font-weight: 500; font-size: clamp(64px, 7vw, 104px); line-height: 1; margin-bottom: 12px; font-variant-numeric: lining-nums; }
.price__fig .label { color: var(--k-glow); }
.price__one p:not(.price__fig) { margin: 0 0 14px; font-size: 19px; max-width: 54ch; }
.price__one .btn { margin-top: 14px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--k-arc); font-family: var(--k-display); font-size: 26px; margin-bottom: 20px; }
.steps h3 { font-size: 32px; margin-bottom: 10px; }
.steps p { margin: 0; font-size: 18px; max-width: 32ch; }

/* the application */
.apply { background: var(--k-tint); scroll-margin-top: 84px; }
.apply__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px 96px; align-items: start; }
.apply h2 { font-size: clamp(44px, 5vw, 78px); line-height: .98; margin-bottom: 22px; }
.apply h2 em { color: var(--k-accent-ink); font-weight: 400; }
@media (min-height: 820px) { .apply__aside { position: sticky; top: 120px; } }
.apply__note { margin-top: 28px; padding: 22px 24px; border-left: 2px solid var(--k-arc); background: var(--k-paper); font-size: 16.5px; line-height: 1.55; }
.apply__note p { margin: 0; }
.apply__steps { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: s; }
.apply__steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); font-size: 16.5px; line-height: 1.5; }
.apply__steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--k-arc); font-family: var(--k-display); font-size: 19px; font-variant-numeric: lining-nums; }
.apply__steps b { display: block; font-family: var(--k-display); font-weight: 500; font-size: 23px; line-height: 1.15; }
.form { background: var(--k-paper); padding: clamp(28px, 4vw, 56px); }
.form fieldset { border: 0; margin: 0 0 26px; padding: 0; }
.form legend { padding: 0; margin-bottom: 14px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-block; padding: 11px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--k-ink) 30%, transparent);
  font-size: 16.5px; line-height: 1.2; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.choice input:checked + span { background: var(--k-ink); color: var(--k-paper); border-color: var(--k-ink); }
.choice input:focus-visible + span { outline: 2px solid var(--k-accent-ink); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.5; margin: 6px 0 28px; }
.consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--k-deep); }
.form .btn { width: 100%; }
.form .fine { margin: 16px 0 0; text-align: center; }

/* faq */
.faq { border-top: 1px solid color-mix(in srgb, var(--k-ink) 22%, transparent); }
.faq details { border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 22%, transparent); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 24px 0; font-family: var(--k-display); font-size: clamp(25px, 2.4vw, 32px); line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--k-label); font-size: 20px; color: var(--k-accent-ink); transition: transform .3s ease; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 26px; max-width: 62ch; }

/* section (path) page */
.path-head__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: end; }
.path-head h1 { font-size: clamp(76px, 13vw, 210px); line-height: .82; letter-spacing: -0.03em; }
.path-head .lede { margin: 0; max-width: 32ch; }
.path-head__pillar { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--k-arc); flex: none; }
.path-hero { height: clamp(300px, 38vw, 560px); }
.spy-nav { position: sticky; top: 84px; z-index: 30; padding: 14px 0; background: color-mix(in srgb, var(--k-paper) 97%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 10%, transparent); }
.spy-nav__in { display: flex; align-items: center; gap: 20px; }
.spy-nav__in > .label { color: var(--k-accent-ink); flex: none; }
.spy { display: none; }
.spy-strip { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
/* when the pills run past the edge, the last one fades out so it reads as "scroll for more" (site.js sets the class) */
.spy-nav__in { position: relative; }
.spy-nav__in::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 52px; pointer-events: none; opacity: 0; transition: opacity .25s ease; background: linear-gradient(to right, color-mix(in srgb, var(--k-paper) 0%, transparent), var(--k-paper) 85%); }
.spy-nav__in.is-more::after { opacity: 1; }
@media (min-width: 46rem) { .spy-nav__in::after { display: none; } }
.spy-strip::-webkit-scrollbar { display: none; }
.spy-strip a, .spy > ol a {
  display: inline-block; text-decoration: none; padding: 9px 16px; border-radius: 999px;
  font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--k-ink) 22%, transparent);
}
.spy-strip a[aria-current="location"] { background: var(--k-ink); color: var(--k-paper); border-color: var(--k-ink); }
@media (min-width: 46rem) {
  .spy-strip { display: none; }
  .spy { display: inline-block; position: relative; }
}
.spy > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 18px;
  font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--k-ink) 30%, transparent); border-radius: 999px;
  cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none;
}
.spy > summary::-webkit-details-marker { display: none; }
.spy-chevron { flex: none; transition: transform 200ms ease; }
.spy[open] .spy-chevron { transform: rotate(180deg); }
.spy-now { display: inline-block; transition: opacity 180ms ease, transform 180ms ease; }
.spy-now.swap { opacity: 0; transform: translateY(5px); }
.spy > ol {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; margin: 0; padding: 8px; list-style: none; min-width: 260px;
  background: var(--k-paper); border: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); border-radius: 16px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--k-deep) 16%, transparent);
  display: flex; flex-direction: column; gap: 2px;
}
.spy > ol a { display: block; border: 0; border-radius: 10px; padding: 11px 14px; }
.spy > ol a:hover, .spy > ol a[aria-current="location"] { background: var(--k-tint); }
@media (prefers-reduced-motion: reduce) { .spy-now, .spy-chevron { transition: none; } }
.offer { padding-block: clamp(72px, 9vw, 132px); scroll-margin-top: 150px; }
.offer + .offer { border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); }
.offer__in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 6vw, 104px); align-items: center; }
.offer--flip .offer__in { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.offer--flip .offer__ph { order: 2; }
.offer__ph { aspect-ratio: 4 / 5; }
.offer__ph.ph--arch { border-radius: 999px 999px 0 0; }
.offer__ph.ph--oval { border-radius: 50%; }
.offer .label.num { color: var(--k-accent-ink); display: block; margin-bottom: 18px; }
.offer h2 { font-size: clamp(50px, 6vw, 96px); line-height: .92; margin-bottom: 26px; }
.offer h2 em { color: var(--k-accent-ink); font-weight: 400; }
.offer__words { font-family: var(--k-display); font-size: clamp(24px, 2.2vw, 31px); line-height: 1.28; margin-bottom: 28px; max-width: 30ch; }
.offer__words em { color: var(--k-accent-ink); }
.offer p { max-width: 48ch; }
.offer .actions { margin-top: 30px; }
.feature { background: var(--k-tint); padding: clamp(28px, 3vw, 40px); margin-top: 8px; }
.feature .tracks { margin: 18px 0 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.feature .tracks li { border-top-color: var(--k-arc); }
.feature .tracks .label { color: var(--k-accent-ink); }
/* the honest "not yet" note: a soft stone panel, at most one per page */
.empty { background: var(--k-tint); border-left: 2px solid var(--k-arc); padding: 22px 26px; margin-top: 8px; font-size: 17px; line-height: 1.55; }
.empty .label { color: var(--k-accent-ink); }
.empty p { margin: 0 0 6px; }
.empty p:last-child { margin: 0; }
/* her own offer lists (v12 services, overview): quiet serif lines on hairlines */
.offer-list__h { color: var(--k-accent-ink); margin: 6px 0 12px; }
.offer-list { list-style: none; margin: 0 0 8px; padding: 0; max-width: 34em; border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); }
.offer-list li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); font-family: var(--k-display); font-size: 23px; line-height: 1.25; }
.offer-list li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--k-arc); }
.offer-list + .soft-note { margin-top: 14px; }
.empty + .actions, .offer-list + .actions { margin-top: 28px; }
/* the society: her partners, her dates */
.partner-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
.partner-list li { padding: 20px 20px 20px 0; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); font-family: var(--k-display); font-size: clamp(23px, 2vw, 28px); line-height: 1.2; }
.milestones { margin: 6px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; max-width: 38em; }
.milestones div { border-top: 1px solid var(--k-arc); padding-top: 14px; }
.milestones dt { font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; color: var(--k-accent-ink); margin-bottom: 6px; }
.milestones dd { margin: 0; font-family: var(--k-display); font-size: 25px; line-height: 1.15; font-variant-numeric: lining-nums; }
/* becoming: her six course areas, under the courses row */
.areas { margin-top: clamp(56px, 6vw, 88px); }
.areas__h { display: block; color: var(--k-accent-ink); margin-bottom: 22px; }
.areas__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; }
.area { border-top: 1px solid var(--k-arc); padding-top: 18px; }
.area h3 { font-size: clamp(28px, 2.4vw, 36px); line-height: 1.05; margin-bottom: 12px; }
.area ul { list-style: none; margin: 0; padding: 0; }
.area li { padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 10%, transparent); font-size: 16.5px; line-height: 1.4; font-variant-numeric: lining-nums; }
/* the society: write to us (the site's contact form) */
.write { padding-block: clamp(72px, 9vw, 132px); scroll-margin-top: 150px; border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); }
.write .label.num { color: var(--k-accent-ink); display: block; margin-bottom: 18px; }
.write h2 { font-size: clamp(50px, 6vw, 96px); line-height: .92; margin-bottom: 26px; }
.write h2 em { color: var(--k-accent-ink); font-weight: 400; }
.write .form { background: var(--k-tint); }
.write .apply__note { background: var(--k-tint); }
/* an offer with no photo yet: words only, on a hairline */
.offer--text .offer__in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; }
.offer--text .offer__side { padding-top: 10px; }
.offer--text .offer__side h2 { margin-bottom: 0; }

/* postvention: the quiet variant. Lifeline sits first, the name is set smaller and lighter */
.lifeline--top .lifeline__in { padding: 26px 0; }
.lifeline__more { margin-top: 10px !important; }
.path-head--quiet h1 { font-size: clamp(64px, 10vw, 156px); font-weight: 400; letter-spacing: -0.02em; }
.path-head--quiet .lede { max-width: 36ch; }
.path-head--quiet .soft-note { margin: 16px 0 0; }
.resource-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
.resource-list li { padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
.resource-list li > a { font-family: var(--k-display); font-size: 25px; line-height: 1.2; text-decoration-color: var(--k-arc); }
.resource-list p { margin: 4px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--k-muted); }
.soft-note { font-size: 16.5px; line-height: 1.55; color: var(--k-muted); max-width: 52ch; }

/* the society: a gentle signpost for people arriving from her pilot flyer */
.signpost { background: var(--k-secondary); color: var(--k-on-secondary); }
.signpost__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding: 20px 0; }
.signpost p { margin: 0; font-size: 17px; }
.signpost .go { color: var(--k-on-secondary); }
.pillars-band { padding-block: clamp(72px, 9vw, 132px); scroll-margin-top: 150px; }
.pillars-band .label.num { color: var(--k-accent-ink); display: block; margin-bottom: 18px; }
.pillars-band__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px clamp(48px, 7vw, 112px); align-items: center; }
.pillars-band .faith { font-family: var(--k-display); font-size: clamp(25px, 2.3vw, 33px); line-height: 1.3; margin: 0 0 30px; max-width: 34ch; }

.others { background: var(--k-tint); }
.others__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.others__grid a { display: block; text-decoration: none; }
.others__grid .ph { width: 100%; aspect-ratio: 1; border-radius: 50%; margin-bottom: 22px; transition: transform .45s ease; }
.others__grid a:hover .ph { transform: scale(1.04); }
.others__grid .label { color: var(--k-accent-ink); }
.others__grid h3 { font-size: clamp(34px, 3vw, 46px); margin: 6px 0 8px; }
.others__grid p { margin: 0; font-size: 16.5px; line-height: 1.5; }

/* ---------- reveals (content is visible by default; this only adds the rise) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pillar { width: auto; max-width: none; }
}
@media (max-width: 960px) {
  .hero__in, .pilot-head__in, .stay__in, .apply__in, .included__in, .pillars-band__in { grid-template-columns: 1fr; }
  .circle { max-width: 460px; }
  .pillars__head, .paths__head, .sec-head { grid-template-columns: 1fr; }
  .ring { --S: min(420px, 78vw); height: auto; }
  .ring__circle { position: relative; left: auto; transform: none; margin: 0 auto 48px; }
  .ring__dot { display: none; }
  /* her six gold pills, two by three, as on her homepage panel */
  .ring__list { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .pillar, .pillar--l, .pillar--r { position: static; transform: none; width: auto; max-width: none; text-align: center; }
  .pillar::before { display: none; }
  .pillar h3 { display: flex; width: 100%; min-width: 0; margin-bottom: 10px; }
  .offer--text .offer__in { grid-template-columns: 1fr; }
  .path { grid-template-columns: 44px minmax(0, 1fr) 96px; }
  .path__body { grid-column: 2 / 4; }
  .path__ph { width: 96px; height: 96px; grid-row: 1; grid-column: 3; }
  .start-band__in { grid-template-columns: 1fr; }
  .start-band .ph { max-width: 420px; aspect-ratio: 4 / 4.4; }
  .tracks { grid-template-columns: 1fr 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .course-grid { grid-template-columns: 1fr 1fr; gap: 44px 32px; }
  .price__one { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .apply__aside { position: static; }
  .offer__in, .offer--flip .offer__in { grid-template-columns: 1fr; }
  .offer--flip .offer__ph { order: 0; }
  .offer__ph { max-width: 460px; aspect-ratio: 4 / 4.2; }
  .others__grid { grid-template-columns: 1fr 1fr; }
  .areas__grid { grid-template-columns: 1fr 1fr; }
  .path-head__in { grid-template-columns: 1fr; }
  .vision { min-height: 0; display: block; }
  .vision > .ph { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .vision__panel { width: auto; margin: -64px 20px 0; }
  .vision .wrap { width: 100%; }
}
@media (max-width: 640px) {
  body { font-size: 17.5px; }
  .wrap, .narrow { width: calc(100% - 40px); }
  .brand { gap: 10px; }
  .brand__mark { width: 42px; height: 43px; }
  .brand__word { font-size: 14px; letter-spacing: .3em; margin-right: -.3em; }
  .lifeline__in { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .lifeline p { font-size: 16px; }
  .hero h1 { font-size: clamp(50px, 14.5vw, 66px); }
  .lede { font-size: 19px; }
  .ring__list { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .pillar h3 { font-size: 11px; letter-spacing: .18em; padding: 0 10px 0 calc(10px + .18em); min-height: 44px; }
  .pillar p { font-size: 16.5px; }
  .title-caps { letter-spacing: .24em; margin-right: -.24em; }
  .title-caps--light { letter-spacing: .12em; margin-right: -.12em; }
  .pills { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pill { font-size: 11px; letter-spacing: .16em; padding: 0 8px 0 calc(8px + .16em); }
  .resource-list li > a { font-size: 22px; }
  .path { grid-template-columns: 36px minmax(0, 1fr) 72px; gap: 14px 16px; padding: 26px 0; }
  .path h3 { font-size: 44px; }
  .path__ph { width: 72px; height: 72px; }
  .path__body { grid-column: 1 / 4; }
  .tracks { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tracks b { font-size: 23px; }
  .row2 { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .foot__sister { grid-column: 1 / -1; }
  .foot li a { font-size: 20px; }
  .foot__help { grid-template-columns: 1fr; }
  .checks { columns: 1; }
  .course-grid { grid-template-columns: 1fr; }
  .dates dl div { grid-template-columns: 1fr; gap: 4px; }
  .dates { padding: 26px 22px 20px; }
  .others__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .others__grid h3 { font-size: 30px; }
  .others__grid p { font-size: 15px; }
  .spy-nav { top: 72px; }
  .spy-nav__in > .label { display: none; }
  .spy-strip { gap: 6px; }
  .spy-strip a { padding: 9px 12px; letter-spacing: .16em; }
  .offer-list li { font-size: 21px; }
  .partner-list { grid-template-columns: 1fr; }
  .milestones { grid-template-columns: 1fr; }
  .milestones div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top-color: color-mix(in srgb, var(--k-ink) 14%, transparent); }
  .milestones div:first-child { border-top-color: var(--k-arc); }
  .milestones dt { margin: 0; }
  .milestones dd { font-size: 22px; text-align: right; }
  .areas__grid { grid-template-columns: 1fr 1fr; gap: 32px 18px; }
  .area h3 { font-size: 25px; }
  .area li { font-size: 15px; }
  .creed__words { font-size: clamp(36px, 10vw, 46px); }
  .vision__panel { margin: -48px 12px 0; }
  .together > .ph img { object-position: 74% 50%; }
  .form { padding: 26px 20px; }
}


/* =====================================================================
   TAKE E: the combination
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) { html.lenis { scroll-behavior: auto; } }
html.lenis, html.lenis body { height: auto; }

/* square buttons and labels, never pills (her review rule) */
.btn, .status, .menu > summary, .field input { border-radius: 0; }
.btn::after { content: "\2192"; font-size: 14px; letter-spacing: 0; transition: transform .3s ease; }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(4px); }
.btn--light { background: transparent; color: var(--k-on-photo); border-color: currentColor; }
.btn--light:hover, .btn--light:focus-visible { background: var(--k-on-photo); color: var(--k-ink); border-color: var(--k-on-photo); }
.status::before { border-radius: 0; }

/* loading screen: her gold mark on warm white (only with JS, never with reduced motion) */
.loader { display: none; }
html.js .loader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 120;
  background: var(--k-paper); color: var(--k-ink);
  animation: loader-auto .8s ease 3.4s forwards;
}
html.js .loader.is-gone { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; }
.loader__in { display: grid; justify-items: center; gap: 22px; }
.loader__mark {
  width: 72px; height: 74px; background: var(--k-mark);
  -webkit-mask: url("assets/logo-mark.png") center / contain no-repeat; mask: url("assets/logo-mark.png") center / contain no-repeat;
  animation: loader-in 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.loader__word { font-family: var(--k-label); font-weight: 700; font-size: 12px; letter-spacing: .44em; text-transform: uppercase; margin-right: -.44em; animation: loader-in 1.1s cubic-bezier(.2,.7,.2,1) .25s both; }
.loader__in::after { content: ""; width: 120px; height: 1px; background: var(--k-arc); transform-origin: left; animation: loader-line 1.5s cubic-bezier(.6,0,.2,1) .2s both; }
@keyframes loader-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes loader-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes loader-auto { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.js .loader { display: none; } }

/* floating photo moments (bright-avenue's collage) */
[data-speed] { translate: 0 var(--py, 0px); }
.drift { position: relative; height: clamp(420px, 50vw, 700px); overflow: clip; }
.drift .ph { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--r); border-radius: 4px; }
.drift--one .f1 { --x: 6vw; --y: 18%; --w: 26vw; --r: 1800 / 1344; }
.drift--one .f2 { --x: 37vw; --y: 6%; --w: 19vw; --r: 928 / 1152; }
.drift--one .f3 { --x: 60vw; --y: 34%; --w: 30vw; --r: 1800 / 1344; }
.drift--one .f4 { --x: 30vw; --y: 52%; --w: 13vw; --r: 829 / 1100; }
.drift--two { height: clamp(380px, 42vw, 600px); }
.drift--two .f1 { --x: 52vw; --y: 12%; --w: 36vw; --r: 1800 / 1018; }
.drift--two .f2 { --x: 14vw; --y: 8%; --w: 17vw; --r: 829 / 1100; }
.drift--two .f3 { --x: 36vw; --y: 40%; --w: 14vw; --r: 829 / 1100; }

/* the six pillars, drawn (in place of C's ring) */
.raise { padding-block: clamp(88px, 11vw, 168px) clamp(72px, 8vw, 120px); }
.raise .pillars__head { margin-bottom: 0; }
.raise__art { position: relative; width: min(1000px, 100%); margin: clamp(40px, 5vw, 64px) auto 0; }
.draw { display: block; width: 100%; height: auto; overflow: visible; }
.draw path { fill: none; stroke: var(--k-arc); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.draw path.fine { stroke-width: .8; opacity: .6; }
.is-live .draw [data-draw] path { stroke-dashoffset: var(--d, 1); }
.raise__names { list-style: none; margin: 0 0 18px; padding: 0 14%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.raise__names li { text-align: center; font-family: var(--k-label); font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; margin-right: -.16em; white-space: nowrap; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.is-live [data-name] { opacity: 0; transform: translateY(10px); }
.is-live [data-name].is-on { opacity: 1; transform: none; }
.raise__track.is-live { height: 220vh; }
.raise__track.is-live .raise__pin { position: sticky; top: 84px; height: calc(100vh - 84px); display: flex; flex-direction: column; justify-content: center; }
.raise__track.is-live .raise__art { width: min(1000px, 100%, 82vh); }
.pillar-lines { list-style: none; margin: clamp(56px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 64px); }
.pillar-lines li { border-top: 1px solid var(--k-arc); padding-top: 18px; }
.pillar-lines h3 { font-family: var(--k-label); font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 10px; }
.pillar-lines p { margin: 0; font-family: var(--k-display); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.25; }

/* words rise (motion.js splits them) */
.words.armed .w { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 50ms); }
.words.armed.in .w { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .drift { height: 108vw; }
  .drift--one .f1 { --x: -6vw; --y: 6%; --w: 58vw; }
  .drift--one .f2 { --x: 58vw; --y: 2%; --w: 38vw; }
  .drift--one .f3 { --x: 34vw; --y: 52%; --w: 64vw; }
  .drift--one .f4 { --x: 8vw; --y: 56%; --w: 28vw; }
  .drift--two { height: 92vw; }
  .drift--two .f1 { --x: 30vw; --y: 8%; --w: 72vw; }
  .drift--two .f2 { --x: 4vw; --y: 34%; --w: 34vw; }
  .drift--two .f3 { --x: 48vw; --y: 52%; --w: 30vw; }
  .raise__track.is-live .raise__pin { top: 72px; height: calc(100vh - 72px); }
  .raise__track.is-live .raise__art { width: 100%; }
  .raise__names { padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 6px; margin: 0 0 24px; }
  .raise__names li { font-size: 10.5px; letter-spacing: .16em; margin-right: -.16em; }
  .draw path { stroke-width: 2.6; }
  .draw path.fine { stroke-width: 1.4; }
  .pillar-lines { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}
@media (max-width: 480px) {
  .pillar-lines { grid-template-columns: 1fr; }
}

/* =====================================================================
   TAKE F: E with her notes (10/21)
   1. D's top bar: lies over the opening photo, every link, the square MENU,
      in E's fonts and her charcoal and gold (not teal)
   2. D's opening: the photo shrinks into a floating collage, her title
      bottom right, set in E's serif. The giant word scales to the screen
      height so the words below never sit on it.
   3. the pillar names sit above the columns, bigger
   4. the two gold arcs round "People need hope" turn slowly clockwise
   ===================================================================== */

/* 1. top bar */
.top {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 20px 40px; color: var(--k-ink);
  background: color-mix(in srgb, var(--k-paper) 94%, transparent);
  transition: background .5s ease, color .5s ease, padding .5s ease;
}
.top.is-clear { background: transparent; color: var(--k-on-photo); }
.top.is-scrolled:not(.is-clear) { padding-block: 12px; }
.brand {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; flex: none;
  background: var(--k-logo) left center / contain no-repeat; min-width: var(--k-logo-w); min-height: var(--k-logo-h);
}
.brand__mark {
  display: var(--k-seal); flex: none; width: 48px; height: 49px; background: var(--k-mark);
  -webkit-mask: url("assets/logo-mark.png") center / contain no-repeat; mask: url("assets/logo-mark.png") center / contain no-repeat;
  transition: background .5s ease;
}
.top.is-clear .brand__mark { background: var(--k-on-photo); }
.brand__word {
  display: var(--k-wordmark); font-family: var(--k-wordmark-face); font-weight: 700;
  font-size: 16px; letter-spacing: .34em; line-height: 1.12; text-transform: uppercase; margin-right: -.34em;
}
.brand__word span { display: block; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav a { font-family: var(--k-display); font-weight: 500; font-size: 21px; text-decoration: none; position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* the square MENU: her seal, charcoal with a gold hairline frame */
.menu { position: relative; flex: none; }
.menu > summary {
  list-style: none; cursor: pointer; position: relative; z-index: 2;
  width: 60px; height: 60px; display: grid; place-items: center;
  background: var(--k-deep); color: var(--k-glow);
  font-family: var(--k-label); font-weight: 600; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::before { content: ""; position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--k-glow) 70%, transparent); }
.menu[open] > summary span { display: none; }
.menu[open] > summary::after { content: "Close"; }
.menu__panel {
  position: fixed; inset: 0; z-index: 1; overflow: auto;
  background: var(--k-deep); color: var(--k-on-deep);
  padding: 120px max(40px, 8vw) 48px; display: grid; align-content: center; gap: 40px;
}
.menu__panel ol { list-style: none; margin: 0; padding: 0; }
.menu__panel li a {
  display: flex; align-items: baseline; gap: 22px; text-decoration: none; padding: 10px 0;
  font-family: var(--k-display); font-weight: 500; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.1;
  border-bottom: 1px solid color-mix(in srgb, var(--k-glow) 26%, transparent);
}
.menu__panel li a span { font-family: var(--k-label); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; min-width: 46px; color: var(--k-glow); }
.menu__panel li a:hover, .menu__panel li a:focus-visible { padding-left: 10px; transition: padding .3s ease; }
.menu__help { font-size: 16px; margin: 0; }
.menu__help a { color: var(--k-glow); }

/* 2. the opening */
.scene { position: relative; }
.scene__pin {
  position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--k-paper);
  --main-w: 26vw; --main-h: 58vh; --main-y: 21vh;
}
.scene__main { position: absolute; inset: 0; z-index: 1; margin: 0; will-change: clip-path; }
.scene__main .slide { position: absolute; inset: 0; opacity: 0; }
.scene__main .slide:first-child { opacity: 1; }
.scene__pin::before, .scene__pin::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: calc(1 - var(--t, 0)); }
.scene__pin::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--k-scrim) 38%, transparent), transparent 22%); }
.scene__pin::after { background: linear-gradient(to top, color-mix(in srgb, var(--k-scrim) 58%, transparent), transparent 52%); }
/* the giant word: the whole of UNSHAKABLE inside the 5vw page gutters (her 10/31 note:
   at 21vw only 63% of it showed). Montserrat caps here run 7.51em wide, so 11.95vw = 90vw.
   Never taller than a third of the screen, and it sits high, so her title never lands on it */
.scene__giant {
  position: absolute; left: 0; right: 0; top: max(120px, 22vh); z-index: 3; margin: 0;
  display: flex; justify-content: center; white-space: nowrap; pointer-events: none;
  font-family: var(--k-label); font-weight: 500; text-transform: uppercase;
  font-size: min(11.95vw, 34vh); line-height: .8; letter-spacing: .03em; padding-left: .03em;
  color: color-mix(in srgb, var(--k-on-photo) 84%, transparent);
  transition: color 1s ease;
}
.scene.is-collage .scene__giant { color: color-mix(in srgb, var(--k-ghost) 92%, transparent); }
.scene__cards { display: none; }
.scene__lead {
  position: absolute; z-index: 5; right: 5vw; bottom: 9vh; width: min(460px, 100% - 40px);
  color: var(--k-on-photo);
}
.scene__lead h1 { font-family: var(--k-display); font-weight: 500; font-size: clamp(36px, 3.4vw, 54px); line-height: 1.04; letter-spacing: -.01em; margin-bottom: 16px; }
.scene__lead p { margin: 0; font-size: 17px; line-height: 1.65; max-width: 34ch; }
.scene__help {
  position: absolute; z-index: 5; left: 5vw; bottom: 9vh; margin: 0;
  font-family: var(--k-label); font-weight: 500; font-size: 11.5px; letter-spacing: .04em; line-height: 1.7;
  color: var(--k-on-photo); transition: color .8s ease;
}
.scene__help a { font-weight: 700; }
.scene.is-live { height: 300vh; }
.scene.is-live .scene__pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
.scene.is-live .scene__cards { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.scene__card { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--r); border-radius: 4px; opacity: 0; will-change: transform, opacity; }
.c1 { --x: 2vw; --y: 41vh; --w: 19vw; --r: 1800 / 1344; }
.c2 { --x: 14vw; --y: 15vh; --w: 18vw; --r: 1800 / 1344; }
.c3 { --x: 65vw; --y: 49vh; --w: 15vw; --r: 928 / 1152; }
.c4 { --x: 73vw; --y: 68vh; --w: 24vw; --r: 1800 / 1018; }
.c5 { --x: 39vw; --y: 83vh; --w: 11vw; --r: 829 / 1100; }
/* once the collage forms, the faded word drops behind the middle photo, clear of her title */
.scene.is-collage .scene__giant { top: 50vh; }
.scene.is-collage .scene__lead { width: min(420px, 28vw); right: 4vw; color: var(--k-ink); transform: translateY(calc(-1 * (100vh - 9vh - 16vh) + 100%)); }
.scene.is-collage .scene__help { color: var(--k-ink); }
html.is-moving:not(.is-open) .scene__lead > *,
html.is-moving:not(.is-open) .scene__help { opacity: 0; transform: translateY(22px); }
html.is-moving:not(.is-open) .scene__giant { opacity: 0; transform: translateY(8vh); }
html.is-moving:not(.is-open) .scene__main img { transform: scale(1.1); }
html.is-moving .scene__lead > *, html.is-moving .scene__help { transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
html.is-moving .scene__lead > :nth-child(2) { transition-delay: .15s; }
html.is-moving .scene__help { transition-delay: .3s, .3s, 0s; }
html.is-moving .scene__giant { transition: color 1s ease, opacity 1.2s ease .1s, top 1.2s cubic-bezier(.2,.7,.2,1); }
html.is-moving .scene__main img { transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
html.is-moving .scene__main .slide { animation: slides 21s linear infinite; }
html.is-moving .scene__main .slide:nth-child(1) { animation-delay: -1.4s; }
html.is-moving .scene__main .slide:nth-child(2) { animation-delay: 5.6s; }
html.is-moving .scene__main .slide:nth-child(3) { animation-delay: 12.6s; }
@keyframes slides { 0% { opacity: 0; } 7% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
/* the fixed top bar now lies over the page, so pinned scenes sit under it */
.raise__track.is-live .raise__pin { top: 84px; height: calc(100vh - 84px); }

/* 3. pillar names above the columns, tucked onto the lintel
   (the drawing has 9.2% of its width as air above the lintel) */
.raise__names { margin: 0 0 calc(18px - 9.2%); }
.raise__names li { font-size: 11.5px; letter-spacing: .12em; margin-right: -.12em; }

/* 4. the arcs turn: one full turn every 90 seconds */
@media (prefers-reduced-motion: no-preference) {
  .creed__arcs { animation: arcs-turn 90s linear infinite; }
}
@keyframes arcs-turn { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 1080px) {
  .nav { display: none; }
}
@media (max-width: 860px) {
  .top { padding: 14px 20px; }
  .top.is-scrolled:not(.is-clear) { padding-block: 10px; }
  .menu > summary { width: 52px; height: 52px; }
  .brand__mark { width: 38px; height: 39px; }
  .brand__word { font-size: 13px; letter-spacing: .3em; margin-right: -.3em; }
  .scene__pin { --main-w: 54vw; --main-h: 36vh; --main-y: 44vh; }
  .scene__giant { font-size: min(11.95vw, 20vh); top: max(100px, 20vh); }
  .scene__lead { left: 24px; right: 24px; width: auto; bottom: 16vh; }
  .scene__lead h1 { font-size: clamp(34px, 9.4vw, 44px); margin-bottom: 10px; }
  .scene__lead p { font-size: 16px; line-height: 1.6; }
  .scene__help { left: 24px; bottom: 5vh; font-size: 11px; }
  .scene.is-collage .scene__lead { width: auto; right: 24px; transform: translateY(calc(-1 * (100vh - 16vh - 90px) + 100%)); }
  .c1 { --x: 60vw; --y: 34vh; --w: 44vw; }
  .c2 { --x: -8vw; --y: 33vh; --w: 44vw; }
  .c3 { --x: 68vw; --y: 64vh; --w: 34vw; }
  .c4 { --x: -6vw; --y: 73vh; --w: 42vw; }
  .c5 { display: none; }
  .raise__track.is-live .raise__pin { top: 76px; height: calc(100vh - 76px); }
  .raise__names { margin: 0 0 calc(24px - 9.2%); }
  .raise__names li { font-size: 11px; letter-spacing: .16em; margin-right: -.16em; }
}

/* =====================================================================
   INNER PAGES (F), 2026-10-29: the six pages behind the menu
   prevention, healing, becoming, postvention, the-society, pilot.
   They reuse everything above (top bar, square menu, title caps, the
   offer blocks, pilot blocks, stay close, footer). Only what is new for
   them lives here. No new colours: every colour is a token.
   ===================================================================== */

/* the fixed top bar lies over the page, so an inner page starts below it */
.inner main { padding-top: 100px; }
/* a returning visitor never sees the loading screen flash between pages */
html.seen .loader { display: none; }
/* where you are: the current page in the bar and in the menu */
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu__panel li a[aria-current="page"] { color: var(--k-glow); }
/* her F rule: square, never pills (section nav, form choices) */
.spy > summary, .spy-strip a, .spy > ol, .spy > ol a, .choice span { border-radius: 0; }
.spy > ol { box-shadow: none; }

/* 1. the calm page hero: her spaced caps, a big serif statement, one framed
      photo, and the page name as a ghost word resting on the floor behind
      (the home page's giant word, once it has settled) */
.page-hero { position: relative; overflow: clip; padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 8vw, 120px); }
.page-hero:has(.page-hero__ghost) { padding-bottom: clamp(16px, 2vw, 28px); }
.page-hero__ghost {
  position: relative; z-index: 0; display: block; margin: clamp(18px, 2.2vw, 34px) 0 0; padding-left: 3vw;
  white-space: nowrap; pointer-events: none;
  font-family: var(--k-label); font-weight: 500; text-transform: uppercase;
  font-size: clamp(96px, 15vw, 230px); line-height: .8; letter-spacing: .03em;
  color: var(--k-ghost);
}
.page-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 6vw, 104px); align-items: center; }
.page-hero .crumb { margin-bottom: clamp(28px, 3vw, 40px); }
.page-hero h1.title-caps { font-size: clamp(21px, 2.2vw, 31px); margin-bottom: clamp(26px, 3vw, 38px); }
.page-hero__statement {
  font-family: var(--k-display); font-weight: 500; font-size: clamp(46px, 5.6vw, 86px);
  line-height: .98; letter-spacing: -.015em; margin: 0 0 28px; text-wrap: balance;
}
.page-hero__statement em { color: var(--k-accent-ink); font-weight: 400; }
.page-hero__lede { font-size: 20px; line-height: 1.6; max-width: 38ch; margin: 0 0 30px; }
.page-hero__pillar { margin: 0; }
.page-hero .soft-note { margin: -10px 0 28px; }
.page-hero .status { color: var(--k-ink); margin: 0 0 26px; }
.page-hero .actions { margin-top: 32px; }
/* the photo settles into a gold hairline frame, as the home photo settles into its card */
.page-hero__frame { margin: 0; padding: 14px; border: 1px solid var(--k-arc); background: var(--k-paper); }
.page-hero__frame .ph { aspect-ratio: 4 / 4.7; border-radius: 2px; }
.page-hero__frame--wide .ph { aspect-ratio: 4 / 3.4; }
.page-hero__frame--square .ph { aspect-ratio: 1; }
/* postvention, the quiet page: no ghost word, a lighter statement, nothing to sign up for */
.page-hero--quiet .page-hero__statement { font-weight: 400; font-size: clamp(42px, 4.9vw, 74px); line-height: 1.02; }
.page-hero--quiet .page-hero__frame { border-color: color-mix(in srgb, var(--k-arc) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .page-hero__ghost { animation: ghost-glide linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
  }
}
@keyframes ghost-glide { to { translate: -9vw 0; } }

/* 2. the offers: F's collage card corners instead of C's arches */
.inner .offer__ph { border-radius: 4px; }
.inner .spy-nav { margin-top: 0; }

/* 3. the pillar behind each path: her line inside the two turning gold arcs */
.creed--band { background: var(--k-tint); }
.creed--band .creed__words { font-size: clamp(34px, 4.3vw, 64px); line-height: 1.08; max-width: 17em; }
.creed--band .creed__words span { display: inline; }

/* 4. other paths: the home page's path index, a size smaller */
.others-sec .paths__head { margin-bottom: clamp(28px, 3vw, 44px); }
@media (min-width: 961px) {
  .paths--others .path { grid-template-columns: 64px minmax(0, 1.05fr) minmax(0, 1fr) 104px; padding: 26px 0; }
  .paths--others .path h3 { font-size: clamp(40px, 4.4vw, 66px); }
  .paths--others .path__ph { width: 104px; height: 104px; }
}

/* 5. notes for Lexie: what is still hers to confirm, plainly marked for the draft */
.confirm {
  font-family: var(--k-label); font-weight: 500; font-size: 13.5px; letter-spacing: .02em; line-height: 1.6;
  color: var(--k-accent-ink); background: color-mix(in srgb, var(--k-accent) 13%, transparent);
  border-left: 2px solid var(--k-accent); padding: 12px 16px; margin: 18px 0 0; max-width: 46em;
}
.price .confirm { color: var(--k-glow); background: color-mix(in srgb, var(--k-glow) 10%, transparent); border-left-color: var(--k-glow); }
.offer-list + .confirm, .milestones + .confirm, .partner-list + .confirm, .resource-list + .confirm { margin-top: 22px; }
.confirm + .actions { margin-top: 26px; }
/* on the pilot's sand panel the gold ink fell just under 4.5:1, so it goes a shade deeper there */
.apply__aside .confirm { color: color-mix(in srgb, var(--k-accent-ink) 82%, var(--k-black)); }

/* 6. forms: a preview note in the form's own voice (nothing pretends to send) */
.form-note {
  display: grid; gap: 4px; margin: 18px 0 0; padding: 16px 18px; text-align: left;
  border-left: 2px solid var(--k-arc); background: color-mix(in srgb, var(--k-accent) 14%, var(--k-paper));
  color: var(--k-ink); font-size: 16.5px; line-height: 1.5;
}
.form-note:empty { display: none; }
.form-note .label { color: var(--k-accent-ink); }
@media (prefers-reduced-motion: no-preference) { .form-note.is-on { animation: note-in .6s cubic-bezier(.2,.7,.2,1) both; } }
@keyframes note-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.field .fine { display: block; margin-top: 8px; font-size: 14px; }

/* 7. the society: the six pillars, drawn in gold hairline as they come into view */
.society-pillars { padding-block: clamp(72px, 9vw, 132px); scroll-margin-top: 150px; }
.society-pillars .label.num { color: var(--k-accent-ink); display: block; margin-bottom: 18px; }
.society-pillars .raise__art { margin-top: clamp(40px, 5vw, 64px); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .society-pillars .raise__art { view-timeline-name: --raise; }
    .society-pillars .draw path { animation: draw-line linear both; animation-timeline: --raise; animation-range: cover 4% cover 18%; }
    .society-pillars .draw g:nth-of-type(2) path { animation-range: cover 14% cover 26%; }
    .society-pillars .draw g:nth-of-type(3) path { animation-range: cover 17% cover 29%; }
    .society-pillars .draw g:nth-of-type(4) path { animation-range: cover 20% cover 32%; }
    .society-pillars .draw g:nth-of-type(5) path { animation-range: cover 23% cover 35%; }
    .society-pillars .draw g:nth-of-type(6) path { animation-range: cover 26% cover 38%; }
    .society-pillars .draw g:nth-of-type(7) path { animation-range: cover 29% cover 41%; }
    .society-pillars .draw g:nth-of-type(8) path { animation-range: cover 36% cover 48%; }
    .society-pillars .raise__names li { animation: rise linear both; animation-timeline: --raise; animation-range: cover 40% cover 50%; }
  }
}
@keyframes draw-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 8. the pilot page */
.included .dates { margin-top: clamp(32px, 4vw, 48px); }
.tracks-sec { background: var(--k-tint); }
.tracks-sec .course { border-top-color: var(--k-arc); }

@media (max-width: 960px) {
  .page-hero__in { grid-template-columns: 1fr; }
  .page-hero__frame { max-width: 560px; }
  .page-hero__frame .ph, .page-hero__frame--wide .ph { aspect-ratio: 4 / 3.3; }
  .page-hero__frame--square .ph { aspect-ratio: 1; }
}
@media (max-width: 860px) {
  .inner main { padding-top: 80px; }
}
@media (max-width: 640px) {
  .page-hero { padding-top: 32px; }
  .page-hero__ghost { font-size: 25vw; padding-left: 20px; }
  .page-hero__statement { font-size: clamp(42px, 12vw, 54px); }
  .page-hero--quiet .page-hero__statement { font-size: clamp(38px, 10.5vw, 48px); }
  .page-hero__lede { font-size: 18px; }
  .page-hero__frame { padding: 10px; }
  .creed--band .creed__words { font-size: clamp(30px, 8.4vw, 40px); }
  .confirm { font-size: 12.5px; }
}

/* ================================================================
   11/6 NEW MAP + HER BLUE. Lexie's email: prevention, intervention,
   restoration, community, the society, get started; "The blue in my
   style guide is missing from the entire website. The mood of the page
   is very boring right now." Her blue now fills the Get Started band,
   the pillar band on every path, the vision panel, the main buttons and
   the "get started" link in the top bar. Every word on it is white.
   Two more ways to see it (McKenna picks):
     ?palette=c  the same blue, with the photos in their own colour
     ?palette=d  a deep blue footer and menu. Photos stay as they are
                 (McKenna, 11/6: "No blue tint on the images")
   McKenna's pick (11/6): A, with the pillars on her blue from C.
   ================================================================ */
[data-palette="c"] { --k-photo-mono: 0; --k-photo-wash: 0; }
[data-palette="d"] { --k-deep: var(--k-blue-deep); }
/* the six pillars drawn in gold on her blue: McKenna picked this from C (11/6), on every page */
.pillars { background: var(--k-blue); color: var(--k-on-blue); --k-ink: var(--k-white); --k-accent-ink: var(--k-white); --k-blue-ink: var(--k-white); --k-muted: var(--k-mist-ink); --k-arc: var(--k-glow); }

/* the pillar band on each path: her blue, white words, the gold arcs still turning */
.creed--band { background: var(--k-blue); color: var(--k-on-blue); }
.creed--band .eyebrow, .creed--band .creed__words em { color: var(--k-on-blue); }
.creed--band .creed__arcs path { stroke: var(--k-glow); }

/* section numbers and the quiet lifeline band pick up her blue too */
.offer .label.num, .write .label.num, .society-pillars .label.num { color: var(--k-blue-ink); }
.lifeline { background: var(--k-blue-tint); border-block-color: color-mix(in srgb, var(--k-blue) 22%, transparent); }

/* the Get Started band (was the pilot band) */
.start-band .eyebrow::before { background: var(--k-on-blue); }
.start-band .tracks .label { letter-spacing: .16em; }
.start-band .btn { background: var(--k-on-blue); color: var(--k-blue); border-color: var(--k-on-blue); }
.start-band .btn:hover, .start-band .btn:focus-visible { background: transparent; color: var(--k-on-blue); border-color: var(--k-on-blue); }

/* "get started" in the top bar: a small square of her blue */
.nav ul { align-items: center; }
.nav .nav__start a { background: var(--k-blue); color: var(--k-on-blue); padding: 6px 16px 7px; }
.nav .nav__start a::after { display: none; }
.nav .nav__start a:hover, .nav .nav__start a:focus-visible { background: var(--k-blue-ink); }
.nav .nav__start a[aria-current="page"] { outline: 1px solid var(--k-blue); outline-offset: 3px; }
@media (max-width: 1240px) { .nav ul { gap: 18px; } .nav a { font-size: 19px; } }

/* COMING SOON: one span, <span class="soon">Coming soon</span>, after any name.
   Lexie is sending the list of what gets one. */
.soon {
  display: inline-block; vertical-align: middle; margin-left: 14px; position: relative; top: -.2em;
  font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; line-height: 1;
  background: var(--k-blue); color: var(--k-on-blue); padding: 8px 12px 7px;
}

/* the society: her about text, under the history line */
.about { max-width: 60ch; }
.about p { margin: 0 0 1em; }
.about p:last-child { font-style: italic; margin-bottom: 0; }

/* restoration: her PHP / IOP / aftercare table */
.treat { margin: 30px 0 0; overflow-x: auto; }
.treat table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16.5px; line-height: 1.45; }
.treat caption { text-align: left; color: var(--k-blue-ink); margin-bottom: 14px; }
.treat th, .treat td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); }
.treat thead th { font-family: var(--k-label); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--k-blue-ink); border-top: 0; }
.treat tbody th { font-family: var(--k-display); font-weight: 500; font-size: 26px; line-height: 1.1; white-space: nowrap; padding-right: 24px; }
.treat tbody tr:first-child th, .treat tbody tr:first-child td { border-top-color: var(--k-blue); }

/* get started: the "when" line above each on-ramp */
.ramp__when { color: var(--k-blue-ink); margin: 0 0 10px; }
#on-ramps .paths__head .confirm { align-self: end; }


/* the restoration table scrolls inside its column on a phone, not the page */
.offer__in > * { min-width: 0; }

/* ================================================================
   11/6 VARIETY. McKenna: "These pages are actually boring. They're just
   image on the left, image on the right. Give more color and variation of
   shape and movement." So every row on a path page now takes one of six
   shapes, and no two neighbours match. The shapes come from her own marks:
   the ARC around her seal, the STEPS under her pillars, and her blue.
     .v-split    a solid blue field beside a full height photo whose inner
                 edge is her arc (the arc opens as you arrive)
     .v-seal     centred: a round photo inside her two seal arcs, turning
     .v-cards    arched "door" cards in solid colour, side by side
     .v-collage  a pale blue field, photos at three depths (parallax)
     .v-bleed    a full width photo with an arch topped panel on it
     .v-band     a blue band with a domed top; the arched photo breaks out
   Dividers: .d-arc (a dome rising into the band) and .d-steps (her pillar
   base, stepping up). Photos with .unveil open from the bottom as they come in.
   ================================================================ */
.offer.v { border-top: 0; }
.offer.v + .offer, .offer + .offer.v { border-top: 0; }

/* colour fields. Inside the blue ones every word is white (McKenna, 11/6). */
.f-blue { background: var(--k-blue); color: var(--k-on-blue); }
.f-deep { background: var(--k-blue-deep); color: var(--k-on-blue); }
.f-mist { background: var(--k-blue-tint); }
.f-stone { background: var(--k-tint); }
.f-blue, .f-deep { --k-ink: var(--k-white); --k-accent-ink: var(--k-white); --k-blue-ink: var(--k-white); --k-muted: var(--k-mist-ink); --k-arc: var(--k-glow); }
.f-blue .btn--deep, .f-deep .btn--deep { background: var(--k-white); color: var(--k-blue-deep); border-color: var(--k-white); }
.f-blue .btn--deep:hover, .f-blue .btn--deep:focus-visible, .f-deep .btn--deep:hover, .f-deep .btn--deep:focus-visible { background: transparent; color: var(--k-white); border-color: var(--k-white); }
.f-blue .confirm, .f-deep .confirm { background: color-mix(in srgb, var(--k-white) 12%, transparent); border-left-color: var(--k-glow); }
.f-blue .soon, .f-deep .soon { background: var(--k-white); color: var(--k-blue-deep); }

/* dividers: a dome (her seal's arc) or her pillar steps, rising from the field's top edge */
.d-arc, .d-steps { position: relative; }
.d-arc::before, .d-steps::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: clamp(44px, 6vw, 96px); background: inherit; pointer-events: none;
}
.d-arc::before { border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.d-steps::before {
  height: clamp(30px, 3.2vw, 48px);
  clip-path: polygon(0 100%, 0 70%, 7% 70%, 7% 36%, 14% 36%, 14% 0, 86% 0, 86% 36%, 93% 36%, 93% 70%, 100% 70%, 100% 100%);
}

/* shared */
.v .label.num { margin-bottom: 18px; }
.v h2 { font-size: clamp(48px, 5.6vw, 92px); }
.offer-list--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 30px; border: 0; max-width: none; }
.offer-list--row li { border: 0; padding: 8px 0 8px 20px; }

/* 1. SPLIT: words on her blue, the photo full height, its inner edge her arc */
.v-split { padding: 0; }
.v-split__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(580px, 74vh, 800px); }
.v-split__text { padding: clamp(64px, 7vw, 120px) clamp(28px, 6vw, 112px); display: flex; flex-direction: column; justify-content: center; }
.v-split__text > * { max-width: 34rem; }
.v-split__ph { height: 100%; min-height: 360px; clip-path: ellipse(100% 78% at 100% 50%); }
.v-split--flip .v-split__ph { order: -1; clip-path: ellipse(100% 78% at 0% 50%); }

/* 2. SEAL: centred, a round photo inside her two arcs */
.v-seal { text-align: center; }
.v-seal .wrap { display: flex; flex-direction: column; align-items: center; }
.seal { position: relative; width: clamp(230px, 24vw, 340px); aspect-ratio: 1; margin: 0 0 clamp(40px, 4vw, 56px); }
.seal .ph { position: absolute; inset: 0; border-radius: 50%; }
.seal__arcs { position: absolute; inset: -13%; width: 126%; height: 126%; overflow: visible; pointer-events: none; }
.seal__arcs path { fill: none; stroke: var(--k-accent); stroke-width: .5; stroke-linecap: round; }
.v-seal .offer__words { margin-inline: auto; max-width: 28ch; }
.v-seal p { margin-inline: auto; }
.v-seal .actions { justify-content: center; }
.v-seal .confirm { margin-inline: auto; text-align: left; }

/* 3. CARDS: arched door cards in solid colour */
.v-cards__head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 90px); align-items: end; }
.v-cards__head .offer__words { margin-bottom: 0; }
.cards { list-style: none; margin: clamp(44px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(16px, 2vw, 26px); }
.card {
  border-radius: 999px 999px 0 0; padding: clamp(84px, 8vw, 120px) clamp(24px, 2.4vw, 36px) clamp(30px, 3vw, 40px);
  min-height: clamp(340px, 30vw, 420px); display: flex; flex-direction: column; text-align: center; align-items: center;
}
.card:nth-child(3n+1) { background: var(--k-blue); color: var(--k-on-blue); --k-ink: var(--k-white); --k-accent-ink: var(--k-white); --k-blue-ink: var(--k-white); }
.card:nth-child(3n+2) { background: var(--k-blue-deep); color: var(--k-on-blue); --k-ink: var(--k-white); --k-accent-ink: var(--k-white); --k-blue-ink: var(--k-white); }
.card:nth-child(3n+3) { background: var(--k-tint); }
.f-stone .card:nth-child(3n+3), .f-mist .card:nth-child(3n+3) { background: var(--k-paper); }
.card .label { display: block; margin-bottom: 16px; color: var(--k-blue-ink); }
.card h3 { font-family: var(--k-display); font-weight: 500; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.04; margin: 0 0 16px; }
.card p { font-size: 17px; line-height: 1.5; margin: 0; }
.card dl { margin: 6px 0 0; width: 100%; }
.card dl div { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding: 12px 0; }
.card dt { font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 4px; opacity: .85; }
.card dd { margin: 0; font-family: var(--k-display); font-size: 21px; line-height: 1.25; }
.card .go { margin-top: auto; padding-top: 22px; }
.card__ph { width: 120px; aspect-ratio: 1; border-radius: 50%; margin: -40px 0 22px; }
.v-cards .confirm { margin-top: 30px; }

/* 4. COLLAGE: a pale blue field, photos at three depths */
.v-collage .offer__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.v-collage--flip .offer__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.v-collage--flip .collage { order: 2; }
.collage { position: relative; min-height: clamp(440px, 46vw, 660px); }
.collage .ph { position: absolute; }
.collage .c-a { left: 0; top: 0; width: 58%; aspect-ratio: 4 / 5.4; border-radius: 999px 999px 0 0; }
.collage .c-b { right: 0; bottom: 0; width: 50%; aspect-ratio: 1; border-radius: 50%; outline: 10px solid var(--k-blue-tint); }
.collage .c-c { right: 6%; top: 3%; width: 30%; aspect-ratio: 3 / 4; border-radius: 4px; }

/* 5. BLEED: a full width photo, an arch topped panel standing on it */
.v-bleed { padding-block: clamp(120px, 15vw, 230px); }
.v-bleed > .ph { position: absolute; inset: 0; }
.v-bleed .wrap { position: relative; z-index: 1; display: flex; }
.v-bleed--right .wrap { justify-content: flex-end; }
.v-bleed__panel {
  width: min(600px, 100%); text-align: center; background: var(--k-paper);
  border-radius: 999px 999px 0 0; padding: clamp(96px, 9vw, 140px) clamp(30px, 4vw, 64px) clamp(40px, 4vw, 60px);
}
.v-bleed__panel.f-blue, .v-bleed__panel.f-deep { background: var(--k-blue); }
.v-bleed__panel.f-deep { background: var(--k-blue-deep); }
.v-bleed__panel .offer__words { margin-inline: auto; }
.v-bleed__panel .offer-list { margin-inline: auto; text-align: left; }
.v-bleed__panel .actions { justify-content: center; }
.v-bleed__panel .confirm { text-align: left; }

/* 6. BAND: a blue band with a domed top, the arched photo breaking out of it */
.v-band { margin-top: clamp(150px, 15vw, 230px); padding-top: 0; }
.v-band .offer__in { align-items: end; }
.v-band .offer__ph { border-radius: 999px 999px 0 0; margin-top: clamp(-200px, -15vw, -120px); }
.v-band .offer__in > div:last-child { padding-top: clamp(40px, 4vw, 70px); }

/* movement: photos open from the bottom as they arrive; the split's arc swings open */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .unveil { animation: unveil linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .unveil img { animation: unveil-img linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .v-split__ph { animation: arc-open linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .v-split--flip .v-split__ph { animation-name: arc-open-left; }
    .cards > .rv:nth-child(2) { animation-range: entry 6% entry 52%; }
    .cards > .rv:nth-child(3) { animation-range: entry 12% entry 62%; }
    .cards > .rv:nth-child(4) { animation-range: entry 18% entry 72%; }
    .seal__arcs { animation: seal-turn 80s linear infinite; }
  }
}
@keyframes unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes unveil-img { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes arc-open { from { clip-path: ellipse(0% 78% at 100% 50%); } to { clip-path: ellipse(100% 78% at 100% 50%); } }
@keyframes arc-open-left { from { clip-path: ellipse(0% 78% at 0% 50%); } to { clip-path: ellipse(100% 78% at 0% 50%); } }
@keyframes seal-turn { to { transform: rotate(360deg); } }

@media (max-width: 960px) {
  .v-split__in, .v-cards__head, .v-collage .offer__in, .v-collage--flip .offer__in { grid-template-columns: 1fr; }
  .v-split__ph, .v-split--flip .v-split__ph { order: -1; height: clamp(300px, 70vw, 460px); clip-path: ellipse(85% 100% at 50% 100%); }
  .v-split .v-split__ph { animation: none; }
  .v-collage--flip .collage { order: 0; }
  .collage { min-height: clamp(340px, 90vw, 520px); }
  .v-band .offer__ph { margin-top: -120px; max-width: 420px; }
  .v-bleed { padding-block: 0 0; }
  .v-bleed > .ph { position: relative; height: clamp(320px, 80vw, 520px); }
  .v-bleed .wrap { margin-top: -140px; padding-bottom: 72px; }
}

.v { position: relative; }
.cards--four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.cards--four .card:nth-child(4) { background: var(--k-blue); color: var(--k-on-blue); --k-ink: var(--k-white); --k-accent-ink: var(--k-white); --k-blue-ink: var(--k-white); }
.cards--four .card:nth-child(3) { background: var(--k-paper); }
.card p + .go { margin-top: auto; }
.card p { margin-bottom: 4px; }

/* inner pages: "stay close" sits in a whisper of her blue, under a dome */
.inner .stay { background: var(--k-blue-tint); position: relative; margin-top: clamp(44px, 6vw, 96px); }
.inner .stay::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(44px, 6vw, 96px); background: inherit; border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; }

/* ================================================================
   11/11 (Lexie's second round of edits). Intervention follows her
   "Choose your learning experience" flow; the society gets mission +
   vision, leadership and partner logo slots; posters for events.
   ================================================================ */
/* choose: her intro, with five numbered ways in */
.choose { padding-block: clamp(80px, 9vw, 140px) clamp(60px, 7vw, 100px); }
.choose__lede { max-width: 46ch; margin: 22px auto 0; font-size: 19px; line-height: 1.6; }
.choose__ways { list-style: none; margin: clamp(36px, 4vw, 52px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.choose__ways a { display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 20px; border: 1px solid color-mix(in srgb, var(--k-ink) 22%, transparent); border-radius: 999px; text-decoration: none; font-family: var(--k-label); font-weight: 600; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; transition: background .3s ease, color .3s ease; }
.choose__ways a span { color: var(--k-accent-ink); font-variant-numeric: lining-nums; }
.choose__ways a:hover, .choose__ways a:focus-visible { background: var(--k-blue); color: var(--k-on-blue); border-color: var(--k-blue); }
.choose__ways a:hover span, .choose__ways a:focus-visible span { color: var(--k-glow); }
/* her quote inside coaching */
.pull { margin: 4px 0 22px; padding-left: 20px; border-left: 2px solid var(--k-glow); }
.pull p { font-family: var(--k-display); font-style: italic; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.3; margin: 0; }
/* on-demand prices */
.fees { margin: 26px 0 28px; max-width: 34rem; }
.fees div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
.fees div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); }
.fees dt { font-family: var(--k-display); font-weight: 500; font-size: 24px; line-height: 1.15; }
.fees dd { margin: 0; display: contents; }
.fees dd strong { grid-column: 2; grid-row: 1; font-family: var(--k-display); font-weight: 500; font-size: 30px; line-height: 1; font-variant-numeric: lining-nums; }
.fees dd span { grid-column: 1 / -1; font-size: 15.5px; color: var(--k-muted); }
/* unshakable live program cards */
.program__price { font-family: var(--k-display); font-weight: 500; font-size: 40px !important; line-height: 1 !important; margin: 0 0 18px !important; font-variant-numeric: lining-nums; }
.program__list { list-style: none; margin: 0 0 6px; padding: 0; width: 100%; }
.program__list li { font-size: 16.5px; line-height: 1.4; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--k-ink) 14%, transparent); }
/* events: posters (4:5) with a Register button, virtual and in person */
.v-band--posters { margin-top: clamp(70px, 8vw, 120px); padding-block: clamp(30px, 4vw, 60px) clamp(70px, 8vw, 110px); }
.events__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.events__head .offer__words { max-width: 30ch; margin-inline: auto; }
.posters { list-style: none; margin: clamp(36px, 4vw, 56px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: clamp(22px, 3vw, 44px); }
.poster { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.poster__ph { width: 100%; aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border: 1px dashed color-mix(in srgb, var(--k-white) 55%, transparent); background: color-mix(in srgb, var(--k-white) 8%, transparent); border-radius: 4px; }
.poster__note { font-family: var(--k-display); font-style: italic; font-size: 22px; line-height: 1.25; max-width: 14ch; }
.poster > .label { margin: 6px 0 0; }
@media (max-width: 620px) { .posters { grid-template-columns: minmax(0, 320px); } }
/* the society: mission + vision side by side */
.society-mv { background: var(--k-paper); }
.mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 110px); }
.mv .statement { font-size: clamp(27px, 2.6vw, 40px); line-height: 1.18; }
@media (max-width: 820px) { .mv { grid-template-columns: 1fr; } }
/* leadership: six people, initials until photos come */
.leadership { background: var(--k-tint); text-align: center; }
.leadership .wrap { display: flex; flex-direction: column; align-items: center; }
.leadership .offer__words { max-width: 28ch; margin-inline: auto; }
.leaders { list-style: none; margin: clamp(40px, 5vw, 64px) 0 26px; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(34px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.leader { display: flex; flex-direction: column; align-items: center; }
.leader__ph { width: clamp(120px, 12vw, 160px); aspect-ratio: 1; border-radius: 50%; background: var(--k-paper); outline: 1px solid var(--k-accent); outline-offset: 6px; display: grid; place-items: center; margin-bottom: 26px; }
.leader__ph span { font-family: var(--k-display); font-size: clamp(34px, 3.2vw, 46px); color: var(--k-accent-ink); letter-spacing: .04em; }
.leader h3 { font-family: var(--k-display); font-weight: 500; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; margin: 0 0 8px; }
.leader .label { color: var(--k-blue-ink); margin: 0 0 6px; }
.leader__cred { font-size: 15.5px; line-height: 1.5; color: var(--k-muted); margin: 0; max-width: 26ch; }
@media (max-width: 820px) { .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .leaders { grid-template-columns: 1fr; } }
/* partners: a logo slot for each, so she can ask each partner for the right file */
.partners { list-style: none; margin: clamp(30px, 4vw, 48px) 0 30px; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.partner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.partner__logo { width: 100%; aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--k-paper); border: 1px dashed color-mix(in srgb, var(--k-ink) 30%, transparent); }
.partner__logo span { font-family: var(--k-label); font-weight: 600; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--k-muted); }
.partner__logo img { max-width: 78%; max-height: 70%; object-fit: contain; }
.partner p { font-size: 16px; line-height: 1.35; margin: 0; }
@media (max-width: 820px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* restoration: the lead line over her list */
.who-lead { font-size: 18px; line-height: 1.5; margin: 18px auto 10px; max-width: 34ch; }
.foot__help .foot__note { grid-column: 2; margin-top: 2px; font-size: 14.5px; opacity: .8; }
@media (max-width: 640px) { .foot__help .foot__note { grid-column: 1; } }
.app__words { max-width: 46ch; margin: 6px auto 0; font-size: 19px; line-height: 1.6; }
.leadership h2 { font-size: clamp(48px, 5.6vw, 92px); margin: 0 0 14px; }
.leadership .label.num { margin-bottom: 18px; }

/* 11/11: the pillars trace Lexie's stone temple (her example image). The gold lines draw as
   before, then the stone fades in under them and the lines soften into an engraving.
   Without the scroll scene (no JS, reduced motion, the Society page in Safari) the stone shows. */
.raise__temple { position: relative; }
.raise__stone { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.raise__temple .draw { position: relative; z-index: 1; }
.is-live .raise__temple .raise__stone { opacity: var(--o, 0); }
.is-live .raise__temple .draw { opacity: calc(1 - .68 * var(--o, 0)); }
.raise__art .raise__names { padding: 0 12.4% 0 12.7%; margin-bottom: 20px; }
@media (max-width: 860px) { .raise__art .raise__names { padding: 0; margin-bottom: 24px; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .society-pillars .raise__stone { animation: stone-in linear both; animation-timeline: --raise; animation-range: cover 40% cover 54%; }
    .society-pillars .raise__temple .draw { animation: lines-soften linear both; animation-timeline: --raise; animation-range: cover 40% cover 54%; }
  }
}
@keyframes stone-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lines-soften { from { opacity: 1; } to { opacity: .32; } }

/* 11/11: her real event flyers in the events band (last season's until new ones come) */
.posters { align-items: start; }
.poster__img { display: block; width: 100%; height: auto; box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--k-ink) 55%, transparent); }
.poster__when { margin: -6px 0 2px; font-size: 15px; line-height: 1.4; opacity: .85; max-width: 26ch; }
.posters__more-h { display: block; width: 100%; text-align: center; margin: clamp(48px, 6vw, 72px) 0 18px; }
.posters__more { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.posters__more img { display: block; width: 100%; height: auto; }
@media (max-width: 620px) { .posters__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 11/13: real leader photos replace the initials as they arrive */
.leader__ph--photo { overflow: hidden; }
.leader__ph--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }