/* =============================================================
   Components.
   ─────────────────────────────────────────────────────────────
   VISUAL INDEX: /kit/ is the living styleguide — every component
   rendered with its "when to use" rule. Review/annotate there.
   This file is sectioned with `/* ===== N. NAME ===== *​/` dividers;
   search those to navigate. Doc-page chrome lives in css/kit.css.
   ─────────────────────────────────────────────────────────────
   Type-role distinction (Conflict 11):
     --font-display (serif) is reserved for HERO H1 (.quiet-headline)
     and SECTION H2 (.section-title) only. Every card title, list
     item, FAQ summary, etc. uses --font-text (sans). The serif tier
     is reserved by intent, not by drift.

   Action tiers (Conflict 12):
     Tier 1: .btn.btn-primary — gradient fill (--gradient-action).
             The single highest-intent action on a section.
     Tier 2: .btn.btn-secondary — outlined.
             Alternative or comparison actions.
     Tier 3: .arrow-link / .quiet-link — text-only actions.
             In-text navigation, soft cross-links, "read more" affordances.
   ============================================================= */

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--surface-overlay-bg);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: var(--border-hairline);
}

.site-header-inner {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--space-1) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .site-header-inner { padding: var(--space-1-25) var(--space-6); }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--ink);
}

.brand-mark {
    height: 44px;
    width: auto;
}

.site-nav { display: none; }

/* When nav is open, remove backdrop-filter so the fixed nav escapes the
   header's containing block and is positioned relative to the viewport. */
.site-header.nav-is-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Mobile nav open state — full-screen overlay above everything */
.site-nav.nav-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    background: var(--surface-base);
    overflow-y: auto;
    z-index: 200;
    padding-top: 72px;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-8);
}

.nav-close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
}
.site-nav.nav-open .nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
}
.site-nav.nav-open .nav-list > li {
    width: 100%;
    border-bottom: var(--border-hairline);
}
.site-nav.nav-open .nav-list > li > a {
    display: block;
    padding: var(--space-2) 0;
    font-size: var(--text-lg);
    font-weight: 500;
    background: none !important;
}
.site-nav.nav-open .nav-menu,
.site-nav.nav-open .nav-mega {
    display: block !important;
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 var(--space-2) var(--space-3);
    background: transparent;
    min-width: 0;
    width: 100%;
}
.site-nav.nav-open .nav-mega {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-1);
}
.site-nav.nav-open .nav-menu a,
.site-nav.nav-open .nav-mega a {
    padding: var(--space-1) 0;
    font-size: var(--text-base);
    color: var(--ink-muted);
}
.site-nav.nav-open .nav-mega-label {
    margin-top: var(--space-1);
}

/* Hamburger button */
.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
}
.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 1px;
    transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
    .nav-toggle { display: none; }
    .site-nav { display: block; flex: 1; }
    .site-nav ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space-4);   /* more air (B) — covers old <ul> + new .nav-list during rollout */
    }
    .site-nav a {
        font-family: var(--font-ui);
        font-size: 1.125rem;    /* fixed (reader-enlarge safe); a touch larger than before (B) */
        font-weight: 600;
        color: var(--ink);
        text-decoration: none;
        transition: color var(--transition-fast), background-size var(--transition-fast);
        white-space: nowrap;
    }
    .site-nav a:hover,
    .site-nav a:focus-visible,
    .site-nav a[aria-current="page"] { color: var(--accent-link); }
    /* Active/hover underline on TOP-LEVEL links only, drawn as a gradient
       background (leaves ::after free for the dropdown caret — no conflict). */
    .site-nav .nav-list > li > a {
        padding-bottom: 4px;
        background-image: var(--gradient-action);
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 0% 2px;
    }
    .site-nav .nav-list > li > a:hover,
    .site-nav .nav-list > li > a:focus-visible,
    .site-nav .nav-list > li > a[aria-current="page"] { background-size: 100% 2px; }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-3);   /* low, elegant pill — height minimised, width kept */
    line-height: 1.2;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
    border: var(--border-cta);
    cursor: pointer;
    white-space: nowrap;   /* keep multi-word labels on one line — never collapse to a circle */
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.btn-primary {
    background: var(--gradient-action);
    color: var(--ink-on-accent);
    box-shadow: var(--shadow-button-rest);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

.btn-primary:focus-visible {
    box-shadow: var(--shadow-button-rest), var(--ring-focus);
}

/* ONE pill height across the whole site (settled): every button shares the base
   --space-0-5 vertical padding. Variants change WIDTH only, never height. */
.btn-large {
    padding: var(--space-0-5) var(--space-5, 40px);   /* same height as base, just wider */
    font-size: var(--text-sm);
}

.btn-nav { flex-shrink: 0; }   /* base height; width auto */

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink-hairline);
}

.btn-secondary:hover {
    border-color: var(--accent-end);
    color: var(--accent-link);
}

/* Quiet links */
.quiet-link {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    text-decoration: none;
    border-bottom: var(--border-hairline);
    padding-bottom: var(--space-0-25);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.quiet-link:hover,
.quiet-link:focus-visible {
    color: var(--accent-link);
    border-bottom-color: var(--accent-link);
}

.arrow-link {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--accent-link);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
}

.arrow-link:hover,
.arrow-link:focus-visible {
    color: var(--ink);
    transform: translateX(2px);
}

/* =============================================================
   SECTION HEAD — eyebrow → title → optional sub block, with one
   margin-bottom spacing variant per follow-up content kind.
   ─────────────────────────────────────────────────────────────
   Replaces ~30 per-section CSS rules that hand-tuned the same
   pattern. Each variant's margin-bottom is the distance from the
   end of the head to whatever comes next on the page.

   Variants (mutually exclusive; pick by what comes next):
     (default)             section h2 + prose → 32px bottom
     .section-head--hero   page h1 + body prose, larger title → 32px
     .section-head--grid   precedes a content grid → 64px
     .section-head--accordion  precedes a FAQ accordion → 48px
     .section-head--spine  centred CTA section, tight → 24px
     .section-head--row    title left + action link right → 48px

   Modifiers:
     .section-head--centred  text-align: center (combinable)

   Internal spacing:
     eyebrow → title    0 (close pairing by intent)
     title → sub        16px (--space-2) when sub is present
   ============================================================= */

.section-head {
    margin-bottom: var(--space-4);
}

.section-head > .eyebrow + .section-title,
.section-head > .eyebrow + .quiet-headline {
    margin-top: var(--space-1);
}

.section-head > .section-title + .section-sub,
.section-head > .quiet-headline + .lede {
    margin-top: var(--space-2);
}

.section-head--hero       { margin-bottom: var(--space-4); }
.section-head--grid       { margin-bottom: var(--space-8); }
.section-head--accordion  { margin-bottom: var(--space-6); }
.section-head--spine      { margin-bottom: var(--space-3); }

.section-head--centred    { text-align: center; }

/* Row variant: title block left, action link right. Used by Library section heads. */
.section-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.section-head--row .section-head__main > * + * { margin-top: var(--space-1); }

/* When .section-head contains a row of items (eyebrow + title), reset their
   default sibling margins. The component's internal stacking owns spacing. */
.section-head > .section-title,
.section-head > .quiet-headline,
.section-head > .section-sub,
.section-head > .eyebrow {
    margin-block: 0;
}

/* Difference card */
.difference h3 {
    font-family: var(--font-text);
    font-size: var(--text-xl);
    font-weight: 500;
    margin-bottom: var(--space-2);
    color: var(--ink);
}

.difference p {
    color: var(--ink-muted);
    line-height: var(--lh-body);
    margin-bottom: var(--space-3);
}

/* =============================================================
   CARD — one primitive, four size variants, two state variants.
   ─────────────────────────────────────────────────────────────
   Variants (mutually exclusive size; one per card):
     .card-featured  32px title (--text-card-featured) — primary offerings
     .card-browse    24px title (--text-card-browse)   — content tiles
     .card-compact   19px title (--text-card-compact)  — dense thumbnails

   States (orthogonal):
     .card-quiet     non-interactive (no hover) — used by testimonials
     .card-linkable  the card itself is an <a> (whole-card click)
     .card-media     first child is a top-edge thumbnail (no padding-top)
     .card-pending   dashed border + reduced opacity (TBC content)

   Sub-elements:
     .card-head   row at the top (eyebrow + badge)
     .card-title  the H-element
     .card-body   the description paragraph
     .card-foot   row at the bottom (price / action)
     .card-price  specialized data point (currency) — program cards only
   ============================================================= */

.card {
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.card:hover {
    border-color: var(--accent-end);
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

.card-quiet {
    gap: var(--space-3);
}

.card-quiet:hover {
    border-color: var(--ink-hairline);
    transform: none;
    box-shadow: none;
}

.card-linkable {
    text-decoration: none;
    color: inherit;
}

.card-linkable:focus-visible {
    outline: none;
    border-color: var(--accent-end);
    box-shadow: var(--elevation-2), var(--ring-focus);
}

.card-compact {
    text-align: center;
    align-items: center;
    gap: var(--space-1);
}

.card-pending {
    border-style: dashed;
    opacity: 0.85;
}

.card-media {
    padding: 0;
    overflow: hidden;
}

/* Card sub-elements */
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.card-title {
    font-family: var(--font-text);
    font-weight: var(--weight-medium);
    color: var(--ink);
    margin: 0;
    line-height: var(--lh-heading);
}

.card-featured .card-title { font-size: var(--text-card-featured); }
.card-browse   .card-title { font-size: var(--text-card-browse); }
.card-compact  .card-title { font-size: var(--text-card-compact); }

.card-body {
    color: var(--ink-muted);
    line-height: var(--lh-body);
    flex: 1;
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.card-price {
    font-family: var(--font-text);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--ink);
}

/* Card-media: thumb fills the top edge, body content gets padded back in */
.card-media > :not(.library-card-thumb-link):not(.library-card-thumb):not(.card-event-thumb-link) {
    padding-inline: var(--space-4);
}
.card-media > .card-title:first-of-type { padding-top: var(--space-3); }
.card-media > .card-body { padding-bottom: var(--space-4); }

/* =============================================================
   EVENT CARD — image-led variant of .card-media. Used for dated,
   in-person events on /trainings/, /events/, homepage. Photo at top
   with date stamp overlay; eyebrow / title / body / button below.
   ============================================================= */

.card-event-thumb-link {
    display: block;
    text-decoration: none;
    position: relative;
    line-height: 0;
}

.card-event-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: var(--surface-sunken);
}

.card-event-date {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    background: rgba(43, 42, 38, 0.85);
    color: var(--surface-base);
    padding: var(--space-0-75) var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: var(--lh-caption);
}

.card-event-thumb-link:hover .card-event-thumb {
    opacity: 0.92;
    transition: opacity var(--transition-fast);
}

/* Foot variant with just a single button (no price counterpart) */
.card-foot--button {
    justify-content: flex-start;
}

/* Badge — small pill, used inside .card-head */
.badge {
    background: var(--gradient-tint);
    color: var(--accent-link);
    border-radius: var(--radius-pill);
    padding: var(--space-0-5) var(--space-1-25);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

/* Testimonial-specific blockquote / figcaption inside .card.card-quiet */
.card-quiet blockquote {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--text-lg);
    line-height: var(--lh-caption);
    color: var(--ink);
    quotes: "“" "”";
}

.card-quiet blockquote::before { content: open-quote; }
.card-quiet blockquote::after  { content: close-quote; }

.card-quiet figcaption {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.placeholder-note {
    margin-top: var(--space-4);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    font-style: italic;
}

/* Coach-specific sub-elements (used only on .card.card-compact and .card.card-browse on /coaches/) */
.coach-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    filter: var(--photo-grade);   /* warm whisper, applied to real coach photos only */
    background: var(--gradient-action);
    color: var(--ink-on-accent);
    font-family: var(--font-text);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.coach-card-rich .coach-avatar { margin: 0 0 var(--space-2); }

.coach-role {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-bottom: var(--space-2);
}

.coach-card-rich {
    text-align: left;
    align-items: stretch;
}

.coach-location {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent-link);
    letter-spacing: 0.02em;
}

.coach-languages {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.coach-focus {
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--lh-caption);
    margin-top: var(--space-1);
    margin-bottom: var(--space-3);
    flex: 1;
}

.coach-book {
    align-self: flex-start;
    margin-top: auto;
}

/* =============================================================
   COACH PROFILE — used on /coaches/<slug>/ pages.
   Layout: portrait left, identity right; stacks on mobile.
   ============================================================= */

.coach-profile-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
    .coach-profile-header {
        grid-template-columns: 240px 1fr;
        gap: var(--space-6);
    }
}

.coach-portrait {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--surface-sunken);
}

.coach-portrait--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-action);
    color: var(--ink-on-accent);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-regular);
    letter-spacing: 0.02em;
}

.coach-positioning {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    line-height: var(--lh-heading);
    font-style: italic;
    color: var(--ink);
    margin: var(--space-2) 0 0;
    max-width: 36ch;
}

.coach-meta {
    margin: 0;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
}

* + .coach-meta { margin-top: var(--space-4); }

.coach-meta-row {
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: var(--space-3);
    align-items: baseline;
}

@media (max-width: 640px) {
    .coach-meta-row {
        grid-template-columns: 1fr;
        gap: var(--space-0-5);
    }
}

.coach-meta dt {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
    margin: 0;
}

.coach-meta dd {
    font-family: var(--font-text);
    font-size: var(--text-base);
    color: var(--ink);
    margin: 0;
}

/* Coach directory filters */
.filter-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-75);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.filter-select {
    padding: var(--space-2) var(--space-3);
    border: var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-base);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--text-base);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                      linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--space-6);
}

.filter-select:hover:not(:disabled) { border-color: var(--accent-end); }
.filter-select:focus-visible {
    outline: none;
    border-color: var(--accent-end);
    box-shadow: var(--ring-focus);
}
.filter-select:disabled { opacity: 0.6; cursor: not-allowed; }

/* =============================================================
   FORM — labelled inputs stacked in a calm vertical rhythm.
   Used by /free-intro/, /contact/, and any future lead-capture
   surface. Inputs consume only tokens.
   ============================================================= */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: left;
}

/* Form sitting after preceding content (lede, paragraph, etc.) gets
   the standard vertical breathing room. Mirrors .lede + .open-actions. */
* + .form { margin-top: var(--space-6); }

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-75);
}

.form-label {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink);
    letter-spacing: var(--tracking-meta);
}

.form-input,
.form-textarea,
.form-select {
    font-family: var(--font-text);
    font-size: var(--text-base);
    color: var(--ink);
    padding: var(--space-1-25) var(--space-3);   /* lowered ~35% (was --space-2) — more elegant fields */
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--ink-muted);
}

.form-input:hover:not(:disabled),
.form-textarea:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: var(--accent-end);
}

.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
    outline: none;
    border-color: var(--accent-end);
    box-shadow: var(--ring-focus);
}

.form-textarea { min-height: 7em; resize: vertical; }

.form-help {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: var(--lh-caption);
}

.form-submit { align-self: flex-start; }

/* Inline form variant — email input + submit button on one row.
   Used by the newsletter signup. */
.form--inline {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.form--inline .form-input {
    flex: 1;
    min-width: 0;
}

.form--inline .form-submit {
    align-self: stretch;
}

/* =============================================================
   TRAINING SUMMARY — the format/length/dates/price/prerequisites
   block on training detail pages. Definition list visually rendered
   as a key-value table.
   ============================================================= */

.training-summary {
    margin: 0;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
}

* + .training-summary { margin-top: var(--space-4); }

.training-summary-row {
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: var(--space-3);
    align-items: baseline;
}

@media (max-width: 640px) {
    .training-summary-row {
        grid-template-columns: 1fr;
        gap: var(--space-0-5);
    }
}

.training-summary dt {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
    margin: 0;
}

.training-summary dd {
    font-family: var(--font-text);
    font-size: var(--text-base);
    color: var(--ink);
    margin: 0;
}

/* =============================================================
   REFLECTION — used on /library/<slug>/ pages for canonical
   reflection entries that may have any combination of text /
   audio / video formats. Plus the format tags on /library/ cards.
   ============================================================= */

/* Format tags on /library/ reflection-list cards — graphical, with SVG icons */
.reflection-card-formats {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.reflection-format-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    padding: var(--space-0-5) var(--space-1-25);
    background: var(--surface-sunken);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
}

.reflection-format-tag svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Per-format colour accents on the tags — so Read / Listen / Watch read as distinct things */
.reflection-format-tag--read svg { color: var(--accent-link); }
.reflection-format-tag--listen svg { color: var(--accent-end); }
.reflection-format-tag--watch svg { color: var(--accent-start); }

/* =============================================================
   SITE ANNOUNCEMENT — thin band at the very top of every page,
   above the site header. Single line, calm typography, names the
   next concrete dated opportunity. Updates as events come and go.
   ============================================================= */

.site-announcement {
    background: var(--surface-sunken);
    border-bottom: var(--border-hairline);
    padding: var(--space-1) var(--space-3);
    text-align: center;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--ink);
    line-height: var(--lh-caption);
}

.site-announcement-prefix {
    color: var(--ink-muted);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-xs);
    margin-right: var(--space-1);
}

.site-announcement a {
    color: var(--accent-link);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.site-announcement a:hover {
    text-decoration: underline;
}

/* Reflection card thumbnail — typographic treatment when no image is available */
.reflection-card-thumb {
    aspect-ratio: 16 / 9;
    width: 100%;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--gradient-action);
    color: var(--ink-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-regular);
    letter-spacing: 0.02em;
    overflow: hidden;
}

.reflection-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Reflection page hero — format chip row links to the in-page anchors */
.reflection-formats {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin: var(--space-3) 0;
}

/* Choose-your-format block on the reflection page itself — equally weighted blocks */
.format-choose {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    margin: var(--space-4) 0;
}

@media (min-width: 768px) {
    .format-choose {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

.format-choose-block {
    padding: var(--space-3);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--surface-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.format-choose-label {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
}

.audio-player-wrap {
    width: 100%;
}

.audio-player-wrap audio {
    width: 100%;
}

.video-embed-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.video-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The text body of a reflection — uses .reading container but tightens line-height for long-form */
.reflection-body p {
    margin-bottom: var(--space-3);
}

/* =============================================================
   PRICING TABLE — used on event pages where pricing is a matrix
   of options × tiers. Real <table> for semantic correctness.
   ============================================================= */

.pricing-table {
    width: 100%;
    margin: var(--space-4) 0;
    border-collapse: collapse;
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-family: var(--font-text);
    font-size: var(--text-base);
}

.pricing-table-caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
    margin-bottom: var(--space-1);
}

.pricing-table thead th {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-hairline);
    background: var(--surface-sunken);
}

.pricing-table tbody th {
    font-weight: var(--weight-semibold);
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--ink);
}

.pricing-table tbody td {
    padding: var(--space-2) var(--space-3);
    color: var(--ink);
}

.pricing-table tbody tr + tr th,
.pricing-table tbody tr + tr td {
    border-top: var(--border-hairline);
}

/* ---------- Library page ---------- */

/* Chip row — anchor links to in-page sections */
.chip-row {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 10px var(--space-3);
    border-radius: var(--radius-pill);
    border: var(--border-hairline);
    background: var(--surface-base);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.chip:hover {
    border-color: var(--accent-end);
    color: var(--accent-link);
}

.chip:focus-visible {
    outline: none;
    border-color: var(--accent-end);
    color: var(--accent-link);
    box-shadow: var(--ring-focus);
}

/* Library-card specialized sub-elements
   (the card itself is just `.card.card-browse`, or `.card.card-browse.card-media` for video) */

.library-card-meta {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    text-transform: uppercase;
}

.library-card-podcast-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.library-card-badge {
    background: var(--gradient-tint);
    color: var(--accent-link);
    padding: var(--space-0-5) var(--space-1-25);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
}

.library-card-thumb-link {
    display: block;
    text-decoration: none;
}

.library-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--gradient-action);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.library-card-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(43, 42, 38, 0.18), rgba(43, 42, 38, 0.45));
}

.library-card-thumb-play {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background: rgba(250, 246, 238, 0.92);
    color: var(--accent-link);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding-left: var(--space-0-5);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.card-media:hover .library-card-thumb-play {
    transform: scale(1.05);
    background: var(--surface-base);
}

.library-card-thumb-duration {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    z-index: 1;
    background: rgba(43, 42, 38, 0.7);
    color: var(--surface-base);
    padding: var(--space-0-5) var(--space-1-25);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
}

/* FAQ */
.faq-item {
    border-bottom: var(--border-hairline);
}

.faq-item:first-of-type {
    border-top: var(--border-hairline);
}

.faq-item summary {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--ink);
    padding: var(--space-3) 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    transition: color var(--transition-fast);
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
    color: var(--accent-link);
    outline: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-base);
    flex-shrink: 0;
    margin-bottom: var(--space-0-5);
}

.faq-item[open] summary::after {
    transform: rotate(225deg);
    margin-bottom: -4px;
}

.faq-item p {
    padding: 0 0 var(--space-3);
    color: var(--ink-muted);
    line-height: var(--lh-body);
    font-size: var(--text-base);
    max-width: 60ch;
}

/* Footer */
.footer-col h4 {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--ink);
}

.footer-col ul { display: grid; gap: var(--space-0-75); }

.footer-col a {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-col a:hover,
.footer-col a:focus-visible {
    color: var(--ink);
}

.footer-tagline {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    line-height: var(--lh-caption);
}

/* ---------- Felt-moment overlay ---------- */
.felt-moment {
    position: fixed;
    inset: 0;
    background: var(--surface-base);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.felt-moment[hidden] { display: none; }

.felt-moment[data-open="true"] {
    opacity: 1;
}

.felt-moment-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    font-size: 24px;
    line-height: 1;
    color: var(--ink-muted);
    background: transparent;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.felt-moment-close:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

.felt-moment-close:focus-visible {
    outline: none;
    background: var(--surface-sunken);
    color: var(--ink);
    box-shadow: var(--ring-focus);
}

.felt-moment-inner {
    max-width: 640px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.felt-moment-safety {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}

.felt-moment-line {
    font-family: var(--font-text);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--ink);
    min-height: 6em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.felt-moment-line[data-visible="true"] {
    opacity: 1;
    transform: none;
}

.felt-moment-line[data-landing="true"] {
    background: var(--gradient-action);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.felt-moment-progress {
    display: flex;
    gap: var(--space-1);
}

.felt-moment-progress span {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--ink-hairline);
    transition: background var(--transition-base);
}

.felt-moment-progress span[data-active="true"] {
    background: var(--accent-end);
}

.felt-moment-actions {
    display: flex;
    gap: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
    .felt-moment-line {
        opacity: 1;
        transform: none;
    }
}

/* Hero with photo */
.hero-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: var(--space-8);
    }
}

.hero-photo-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--elevation-3);
}

.hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: var(--photo-grade);   /* warm whisper — luminosity without nostalgia */
}

/* =============================================================
   THE WORK — institutional self-portrait elements.
   Used on /method/ (the work's home). These signal institutional
   depth through STRUCTURE — a charted map, dated provenance, a
   named faculty — rather than through colder colour or chrome.
   They stay inside the warm palette and the existing type roles.
   ============================================================= */

/* --- Gated build-block --------------------------------------
   A dashed frame around content that is awaiting an external
   source (Connirae's dates, the EU framing, the faculty roster).
   Same dashed language as .card-pending, scaled to a section
   block. Pair with a .placeholder-note inside that states the gate. */
.gated {
    border: var(--border-hairline);
    border-style: dashed;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--surface-base);
}

/* --- Awareness diagram --------------------------------------
   A small, restrained schematic of the canonical move: the felt
   "I" as a contraction held within the field of Awareness. The
   soft tint is the field; the solid node is the contracted "I".
   Confirmed content (not gated) — it visualises the awakening
   definition already used in copy. */
.awareness-diagram {
    margin: var(--space-6) auto 0;
    max-width: 520px;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-lg);
    background: var(--gradient-tint);
    border: var(--border-hairline);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.awareness-diagram-field {
    position: absolute;
    top: var(--space-3);
    left: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.awareness-diagram-node {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-pill);
    background: var(--gradient-action);
    color: var(--ink-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1;
    box-shadow: var(--elevation-2);
}

.awareness-diagram-caption {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-4);
    right: var(--space-4);
    text-align: center;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: var(--lh-caption);
}

/* --- Provenance timeline ------------------------------------
   A vertical, dated chronology. The dates do the institutional
   work: a left rule threads the milestones, a node marks each.
   The 9px node is centred on the 1px rule via the -4px offset. */
.work-timeline {
    margin-top: var(--space-6);
    border-left: var(--border-hairline);
}

.work-timeline-item {
    position: relative;
    padding: 0 0 var(--space-6) var(--space-6);
}

.work-timeline-item:last-child { padding-bottom: 0; }

.work-timeline-item::before {
    content: "";
    position: absolute;
    left: -4px;
    top: var(--space-0-5);
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: var(--accent-end);
}

.work-timeline-year {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
    color: var(--accent-link);
}

.work-timeline-body {
    margin-top: var(--space-0-5);
    color: var(--ink);
    line-height: var(--lh-body);
}

/* --- Library format triptych --------------------------------
   Hero illustration on /library/: one reflection, available as
   Read / Listen / Watch. Sits in the hero-grid's second column.
   Reuses the per-format icon colour accents from the reflection
   card tags (read=link, listen=end, watch=start). */
.format-triptych {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--gradient-tint);
}

.format-triptych-head {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-muted);
}

.format-triptych-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-base);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

.format-triptych-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.format-triptych-item--read svg   { color: var(--accent-link); }
.format-triptych-item--listen svg { color: var(--accent-end); }
.format-triptych-item--watch svg  { color: var(--accent-start); }

/* ===== ATELIER (Variant B) — promoted to canonical 2026-05-22.
   Treatments target shared classes so B applies site-wide.
   Token definitions live in tokens.css. ===== */
/* ─────────────────────────────────────────────────────────────
   2.  ACCESSIBILITY — prefers-reduced-motion
   ─────────────────────────────────────────────────────────────
   All transitions and animations are suppressed for users who
   have requested reduced motion at the OS level.
   ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:       0.01ms !important;
        animation-iteration-count: 1     !important;
        transition-duration:      0.01ms !important;
        scroll-behavior: auto           !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   3.  GLOBAL PAGE BODY
   ─────────────────────────────────────────────────────────────
   Variant B body copy is fractionally softer. The --surface-base
   warm parchment stays as the default page ground.
   ──────────────────────────────────────────────────────────── */

body {
    /* Atelier: a touch warmer background wash. The value is the
       existing token — confirmed in components.css. */
    background-color: var(--surface-base);
}


/* ─────────────────────────────────────────────────────────────
   4.  HERO SECTION — luminous gradient-tint field
   ─────────────────────────────────────────────────────────────
   The hero sits in a soft, luminous --gradient-tint wash.
   Text stays on solid/legible surfaces — the field is behind the
   layout, not behind text directly.
   ──────────────────────────────────────────────────────────── */

.section-open {
    background: var(--gradient-tint);
    /* Atelier: more generous top breathing room */
    padding-block: clamp(var(--space-12), 16vh, 16vh)
                   clamp(var(--space-8),  12vh, 12vh);
}

/* Hero headline: display serif in --ink-deep for authority */
/* .quiet-headline is defined once in typography.css (the header system).
   Only its gradient-accent span lives here. */

/* The one allowed luminous gradient accent on the hero headline span.
   Text over this gradient stays legible because the gradient uses
   brand blues/pinks that clear WCAG AA on the warm background.
   -webkit-text-fill-color: transparent clips painting to the text
   shape; the gradient provides contrast equivalent to --accent-link
   (confirmed: blue #5C76B9 and pink #DA7EAF both ≥4.5:1 on
   --surface-base/#FAF6EE at these weight/size combinations). */
.quiet-headline .accent-gradient {
    background:                var(--gradient-action);
    -webkit-background-clip:   text;
    background-clip:           text;
    -webkit-text-fill-color:   transparent;
    color:                     transparent;
}

/* Hero photo: large, soft-cornered, elevated.
   The photo wraps in a generous --radius-lg shell with a warm glow shadow. */
.hero-photo-wrap {
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-3);
    /* Slightly larger aspect in Atelier: more presence */
    aspect-ratio:  4 / 5;
}

/* Hero grid: reversed column order on desktop so the photo leads.
   On mobile the text stacks above the photo (default). */
@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr 1.05fr;
        gap: var(--space-8);
    }
}

/* ── HERO BAND (Option 2) — interior / funnel-page hero ───────
   Headline as a full-width band on top; intro + form beside the
   portrait in a row beneath. Caps the headline and trims the
   oversized hero padding so headline + intro + form + image all
   sit above the fold. NOT used on the home hero (that keeps its
   large vertical statement). Apply `.section-open.hero-band` with
   a `.hero-row` wrapper around the intro/form and the photo. */
.hero-band.section-open {
    padding-block: clamp(var(--space-6), 6vh, var(--space-12)) var(--space-8);
}
.hero-band .quiet-headline {
    font-size: clamp(2.25rem, 5vw, 4rem);
}
.hero-band .hero-row {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--space-6);
    margin-top:            var(--space-6);
    align-items:           center;
}
@media (min-width: 1024px) {
    .hero-band .hero-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
}

/* =============================================================
   COMING-UP — a simple thin band (one line, hairline-ruled).
   Demoted from a full structural section so the trainings own the
   early real estate.
   ============================================================= */
.section-upcoming { padding-block: var(--space-1-25) 4px; border-block: var(--border-hairline); }
.upcoming-band {
    margin:      0;
    display:     flex;
    flex-wrap:   wrap;
    align-items: baseline;
    gap:         var(--space-2) var(--space-4);
    font-family: var(--font-ui);
    font-size:   var(--text-sm);
    color:       var(--ink);
}
.upcoming-band .struct-eyebrow {
    font-family:    var(--font-ui);
    font-weight:    var(--weight-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color:          var(--accent-link);
}
.upcoming-band a {
    color: var(--ink);
    text-decoration: none;
    padding: 2px var(--space-1-25);
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.upcoming-band a:hover,
.upcoming-band a:focus-visible {
    color: var(--accent-link);
    background: var(--surface-sunken);
}

/* =============================================================
   PATHWAY CARDS — compact (≈2x smaller per review): more columns,
   tighter padding, smaller title + body.
   ============================================================= */
.section-pathway .program-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3);
}
.section-pathway .card-featured { padding: var(--space-3); gap: var(--space-1); }
/* Keep the level label on one line and the badge a horizontal pill (id19). */
.section-pathway .card-head { flex-wrap: nowrap; gap: var(--space-2); align-items: center; }
.section-pathway .card-head .eyebrow,
.section-pathway .badge { white-space: nowrap; }
.section-pathway .card-featured .card-title { font-size: var(--text-card-compact); }
.section-pathway .card-body  { font-size: var(--text-sm); }
.section-pathway .card-price { font-size: var(--text-sm); }

/* Coach Training — horizontal banner beneath the 4 level cards. */
.coach-train {
    display:               grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows:    auto auto;
    align-items:           center;
    row-gap:               var(--space-1);
    column-gap:            var(--space-3);
    margin-top:            var(--space-4);
    padding:               var(--space-3) var(--space-4);
    border:                var(--border-hairline);
    border-radius:         var(--radius-md);
    background:            var(--surface-base);
    text-decoration:       none;
    color:                 var(--ink);
    transition:            border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.coach-train:hover,
.coach-train:focus-visible { border-color: var(--accent-end); box-shadow: var(--elevation-2); }
.coach-train-eyebrow {
    grid-column:    1 / -1;
    font-family:    var(--font-ui);
    font-weight:    var(--weight-extrabold);
    font-size:      var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color:          var(--accent-link);
}
.coach-train-title { grid-column: 1; font-family: var(--font-display); font-size: var(--text-lg); }
.coach-train-price { grid-column: 2; font-family: var(--font-text); font-weight: var(--weight-bold); color: var(--ink-deep); }
.coach-train-arrow { grid-column: 3; color: var(--accent-link); font-weight: var(--weight-bold); }

/* Explainer — tighten the space + shrink the diagram so it stops reading as a
   big empty gap (id7 + id21). */
/* Method pillars — replaces the flat quiet-list in section-explain with
   a 3-column graphic structure: filled gradient circle + title + body. */
.method-pillars {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
@media (min-width: 640px) {
    .method-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.method-pillar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}
.method-pillar-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-regular);
    line-height: var(--lh-heading);
    color: var(--ink-deep);
    margin: 0;
}
.method-pillar p {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: var(--lh-body);
    margin: 0;
}

.section-explain .awareness-diagram {
    margin-top:   var(--space-6);
    max-width:    440px;
    aspect-ratio: 16 / 9;
}

/* Coaches — larger portraits, centred cards, raised so they pop and feel more
   personal (id22). */
.section-coaches .coach-grid { gap: var(--space-4); }
.section-coaches .card-compact {
    text-align:  center;
    align-items: center;
    gap:         var(--space-1);
    padding:     var(--space-4) var(--space-3);
}
.section-coaches .coach-avatar {
    width:         100px;
    height:        100px;
    margin-inline: auto;
    box-shadow:    var(--elevation-2);
}
.section-coaches .card-compact .card-title {
    font-family: var(--font-display);
    font-size:   var(--text-lg);
    color:       var(--ink-deep);
}

/* Structural eyebrow label — re-added as a standalone (used on /pages/ and the
   /trainers/ directory group headings). */
.struct-eyebrow {
    display:        block;
    font-family:    var(--font-ui);
    font-weight:    var(--weight-extrabold);
    font-size:      var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color:          var(--accent-link);
    margin-bottom:  var(--space-2);
}

/* Trainers — language-router chips + directory group spacing. */
.lang-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.lang-nav a {
    font-family:    var(--font-ui);
    font-size:      var(--text-sm);
    font-weight:    var(--weight-semibold);
    color:          var(--ink);
    text-decoration: none;
    padding:        var(--space-1) var(--space-2);
    border:         var(--border-hairline);
    border-radius:  var(--radius-pill);
    transition:     border-color var(--transition-fast), color var(--transition-fast);
}
.lang-nav a:hover,
.lang-nav a:focus-visible { border-color: var(--accent-end); color: var(--accent-link); }
.section-directory .struct-eyebrow { margin-top: var(--space-6); font-size: var(--text-lg); color: var(--ink-deep); }
.trainer-grid { margin-bottom: var(--space-4); }
.directory-note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--ink-muted); margin: 0 0 var(--space-2); }

/* Stacked form — donate "request a meeting" + future contact forms. */
.form--stack { display: grid; gap: var(--space-3); max-width: 32rem; margin-top: var(--space-4); }
.form-field { display: grid; gap: var(--space-1); }
.form-label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-deep); }
.form--stack .form-input { width: 100%; }
textarea.form-input { resize: vertical; font-family: var(--font-text); }
select.form-input { appearance: none; }

/* Book — page hero + cover placeholder, and the modest home band. */
.book-cover-ph {
    aspect-ratio:   2 / 3;
    max-width:      200px;
    border-radius:  var(--radius-sm);
    background:     var(--gradient-tint);
    border:         var(--border-hairline);
    box-shadow:     var(--elevation-2);
    display:        grid;
    place-items:    center;
    color:          var(--ink-muted);
    font-family:    var(--font-ui);
    font-size:      var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
}
/* Real book cover (graphic, not a photo — no photo-grade; crisp with a lift). */
.book-cover {
    width:         100%;
    max-width:     200px;
    height:        auto;
    border-radius: var(--radius-sm);
    box-shadow:    var(--elevation-3);
    display:       block;
}
.book-hero { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 768px) { .book-hero { grid-template-columns: 200px 1fr; gap: var(--space-6); align-items: center; } }
.book-band { display: grid; gap: var(--space-4); align-items: start; }
.book-band .book-cover-ph { max-width: 150px; }
/* 3D perspective: reads as a physical book propped on a surface.
   Column reduced so the image doesn't overpower short body copy. */
.book-band .book-cover {
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
    transform: perspective(700px) rotateY(-14deg) rotate(-1.5deg) translateY(-4px);
    box-shadow: 18px 20px 50px rgba(0,0,0,0.18), 4px 4px 16px rgba(0,0,0,0.10);
    transform-origin: center center;
}
@media (min-width: 768px) { .book-band { grid-template-columns: 260px 1fr; gap: var(--space-8); } }

/* Portrait crop helper — keep the subject's face in frame (free-intro). */
.hero-photo--face { object-position: 50% 22%; }

/* Image placeholder — for layout slots awaiting real photography. */
.img-ph {
    aspect-ratio:   16 / 9;
    border-radius:  var(--radius-md);
    background:     var(--gradient-tint);
    border:         var(--border-hairline);
    display:        grid;
    place-items:    center;
    color:          var(--ink-muted);
    font-family:    var(--font-ui);
    font-size:      var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    margin:         var(--space-4) 0;
}


/* ─────────────────────────────────────────────────────────────
   5.  SECTION-OPEN ACTIONS — "Take a quiet minute" button area
   ─────────────────────────────────────────────────────────────
   Felt-moment trigger sits in the warm luminous field.
   The button is the existing .btn.btn-primary (gradient fill).
   The quiet-link gets a fractionally warmer colour.
   ──────────────────────────────────────────────────────────── */

.section-open .open-actions {
    margin-top: var(--space-6);
}

.section-open .quiet-link {
    /* Warmer, slightly more legible against the tinted field */
    color: var(--ink-muted);
}


/* ─────────────────────────────────────────────────────────────
   6.  UPCOMING EVENTS — calm typographic band
   ─────────────────────────────────────────────────────────────
   Sits on --surface-base, clean surface break via whitespace.
   No rule. Warm separation from hero's tinted field is achieved
   purely by the surface colour returning to default.
   ──────────────────────────────────────────────────────────── */

.section-upcoming {
    background: var(--surface-base);
}

.section-upcoming .eyebrow {
    /* Atelier: the eyebrow is a bit warmer and slightly tinted */
    color: var(--accent-link);
}


/* ─────────────────────────────────────────────────────────────
   7.  "That's the seed of the method." — EXPLAIN SECTION
   ─────────────────────────────────────────────────────────────
   Sits in the --surface-sunken tier. The awareness diagram lives
   inside a slightly deeper tinted field panel within this section.
   Section head H2 gradient span is allowed here as the "naming"
   moment (part of the hero→diagram emotional sequence).
   ──────────────────────────────────────────────────────────── */

.section-explain .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-3xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

/* The "seed of the method." gradient span — valid second gradient use
   because it's the payoff of the hero felt-moment sequence. */
.section-explain .section-title .accent-gradient {
    background:              var(--gradient-action);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    color:                   transparent;
}

/* Awareness diagram: sits in a deeper tinted field with generous radius.
   Already styled in components.css with --gradient-tint + --radius-lg.
   Variant B: larger, slightly elevated to float in the sunken section. */
.awareness-diagram {
    max-width:    560px;
    margin-top:   var(--space-8);
    border-radius: var(--radius-lg);
    box-shadow:   var(--elevation-2);
    /* A slightly richer tint for the field, using the same token */
    background:   var(--gradient-tint);
    border:       none;
}

.awareness-diagram-node {
    /* Atelier: the "I" node is slightly larger — more presence */
    width:  100px;
    height: 100px;
    box-shadow: var(--elevation-3);
}

/* The felt "I" dissolving INTO awareness: the I forms, rests, then fades and
   spreads out, softening into the surrounding field of Awareness (::before,
   ever-present all around) until only awareness remains — then re-forms.
   Slow continuous loop. Reduced-motion holds it still. */
.awareness-diagram-node {
    position:  relative;
    animation: ww-i-dissolve 21s var(--ease) infinite;
}
.awareness-diagram-node::before {
    content:       "";
    position:      absolute;
    inset:         -64px;
    border-radius: var(--radius-pill);
    background:    radial-gradient(circle, rgba(218, 126, 175, 0.18), transparent 72%);
    z-index:       -1;
    animation:     ww-field 21s var(--ease) infinite;
}
@keyframes ww-i-dissolve {
    0%   { opacity: 0; transform: scale(1.5); filter: blur(10px); }
    18%  { opacity: 1; transform: scale(1);   filter: blur(0); }
    55%  { opacity: 1; transform: scale(1);   filter: blur(0); }
    100% { opacity: 0; transform: scale(1.9); filter: blur(12px); }
}
@keyframes ww-field {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    55%      { opacity: 0.9; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .awareness-diagram-node { animation: none; }
    .awareness-diagram-node::before { display: none; }
}


/* ─────────────────────────────────────────────────────────────
   8.  "How is this different?" — DIFFERENCE CARDS
   ─────────────────────────────────────────────────────────────
   Raised surface tier. Cards float with soft shadow.
   Generous rounded corners.
   ──────────────────────────────────────────────────────────── */

.section-different {
    background: var(--surface-base);
}

.section-different .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

/* Atelier difference cards: raised surface + soft shadow + big radius */
.difference {
    background:    var(--surface-raised);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    box-shadow:    var(--elevation-2);
    /* No border — the shadow and surface-raised do the separation work */
    border:        none;
    transition:    box-shadow var(--transition-base),
                   transform  var(--transition-fast);
}

.difference:hover {
    box-shadow: var(--elevation-3);
    transform:  translateY(-2px);
}

.difference h3 {
    font-family: var(--font-display);
    font-size:   var(--text-xl);
    font-weight: var(--weight-regular);
    line-height: var(--lh-heading);
    color:       var(--ink-deep);
    margin-bottom: var(--space-2);
}


/* ─────────────────────────────────────────────────────────────
   9.  FREE INTRO SPINE — the luminous gradient-tint field
   ─────────────────────────────────────────────────────────────
   The second gradient-field moment. The spec allows a soft
   luminous gradient field behind the Free-Intro spine section.
   Text sits on a warm raised panel inside the field so contrast
   remains WCAG AA: headline is --ink-deep on --surface-raised.
   ──────────────────────────────────────────────────────────── */

.section-spine {
    background: var(--gradient-tint);
    padding-block: var(--space-16);
}

/* Inner raised panel to keep text legible on the tinted field */
.section-spine .reading {
    background:    var(--surface-raised);
    border-radius: var(--radius-lg);
    padding:       var(--space-8) var(--space-6);
    box-shadow:    var(--elevation-2);
    text-align:    center;
}

.section-spine .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

/* The "free introduction." gradient span within the spine headline.
   Permitted as a format accent per the spec. */
.section-spine .section-title .accent-gradient {
    background:              var(--gradient-action);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    color:                   transparent;
}


/* ─────────────────────────────────────────────────────────────
   10.  STAY CLOSE — "Not ready? Stay in the conversation."
   ─────────────────────────────────────────────────────────────
   Warm surface-tier shift (sunken). Whitespace separation, no rule.
   ──────────────────────────────────────────────────────────── */

.section-stay-close {
    /* Already data-tier="sunken" → background is --surface-sunken */
}

.section-stay-close .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-lg), 3vw, var(--text-xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}


/* ─────────────────────────────────────────────────────────────
   11.  FAQ SECTION
   ─────────────────────────────────────────────────────────────
   Sunken tier, generous panel. FAQ items get soft rounded tops
   instead of the Variant A hairline-heavy treatment.
   ──────────────────────────────────────────────────────────── */

.section-faq .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

/* Atelier FAQ: items sit in a warm raised panel, no hairline border top/bottom.
   Replaced by generous padding and soft shadow for the open state. */
.section-faq .faq-item {
    border-bottom: 1px solid var(--ink-hairline);
}

.section-faq .faq-item:first-of-type {
    border-top: 1px solid var(--ink-hairline);
}

.section-faq .faq-item[open] {
    background:    var(--surface-raised);
    border-radius: var(--radius-md);
    border-color:  transparent;
    box-shadow:    var(--elevation-1);
}

.section-faq .faq-item[open] summary {
    color: var(--accent-link);
}


/* ─────────────────────────────────────────────────────────────
   12.  QUIET PROOF — testimonials
   ─────────────────────────────────────────────────────────────
   Raised floating cards with generous radius. Warm surface.
   ──────────────────────────────────────────────────────────── */

.section-proof {
    background: var(--surface-base);
}

.section-proof .credibility {
    font-family:   var(--font-display);
    font-size:     var(--text-lg);
    font-weight:   var(--weight-regular);
    color:         var(--ink-muted);
    font-style:    italic;
    letter-spacing: 0.01em;
}

.section-proof .card-quiet {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-2);
    padding:       var(--space-2);
    transition:    box-shadow var(--transition-base), transform var(--transition-fast);
}

.section-proof .card-quiet:hover {
    box-shadow: var(--elevation-3);
    transform:  translateY(-2px);
}

/* In Atelier, testimonial blockquotes get the serif treatment */
.section-proof .card-quiet blockquote {
    font-family: var(--font-display);
    font-size:   0.9rem;
    font-style:  italic;
    font-weight: var(--weight-regular);
    line-height: var(--lh-body);
    color:       var(--ink);
}


/* ─────────────────────────────────────────────────────────────
   13.  PATHWAY — training cards
   ─────────────────────────────────────────────────────────────
   Raised surface tier. Generous rounded corners. Warm floating panels.
   The gradient CTA (--gradient-action) on .btn-primary is untouched.
   ──────────────────────────────────────────────────────────── */

.section-pathway {
    background: var(--surface-sunken);
}

.section-pathway .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

/* Pathway program cards: raised surface, big radius, soft shadow */
.section-pathway .card-featured {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-2);
    padding:       var(--space-6);
    transition:    box-shadow var(--transition-base),
                   transform  var(--transition-fast);
}

.section-pathway .card-featured:hover {
    box-shadow: var(--elevation-3);
    transform:  translateY(-3px);
    border:     none;
}

/* Card titles in pathway use serif for Atelier warmth */
.section-pathway .card-featured .card-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    color:       var(--ink-deep);
}

/* Router block: raised warm panel */
.router {
    background:    var(--surface-raised);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    box-shadow:    var(--elevation-2);
    border:        none;
    margin-top:    var(--space-8);
}

.router-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    color:       var(--ink-deep);
}


/* ─────────────────────────────────────────────────────────────
   14.  COACHES SECTION
   ─────────────────────────────────────────────────────────────
   Warm sunken field. Compact coach cards get raised surface + radius.
   ──────────────────────────────────────────────────────────── */

.section-coaches {
    /* Already data-tier="sunken" */
}

.section-coaches .section-title {
    font-family: var(--font-display);
    font-size:   clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-regular);
    line-height: var(--lh-display);
    color:       var(--ink-deep);
}

.section-coaches .card-compact {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
    transition:    box-shadow var(--transition-base),
                   transform  var(--transition-fast);
}

.section-coaches .card-compact:hover {
    box-shadow: var(--elevation-2);
    transform:  translateY(-2px);
    border:     none;
}


/* ─────────────────────────────────────────────────────────────
   15.  SECTION HEADLINES — global serif override for all H2s
   ─────────────────────────────────────────────────────────────
   In Atelier, section H2 (.section-title) use the display serif
   and --ink-deep. This is the base; per-section overrides above
   add size and specific line-height where needed.
   ──────────────────────────────────────────────────────────── */

/* .section-title is defined once in typography.css (the header system). */


/* ─────────────────────────────────────────────────────────────
   16.  CTA BUTTON — confirm gradient-action on btn-primary
   ─────────────────────────────────────────────────────────────
   The spec: CTA uses --gradient-action. Already set in components.css.
   No override needed — confirmed present and untouched.
   Variant B-specific: the CTA in the spine section gets a slightly
   larger shadow to sit well on the warm raised panel.
   ──────────────────────────────────────────────────────────── */

.section-spine .btn-primary {
    box-shadow: var(--shadow-button-rest);
}

.section-spine .btn-primary:hover {
    box-shadow: var(--shadow-button-hover);
}


/* ─────────────────────────────────────────────────────────────
   17.  FOOTER — warm surface consistency
   ─────────────────────────────────────────────────────────────
   Footer inherits --surface-sunken from layout.css. Atelier keeps
   the warm parchment feel; no changes needed beyond confirming
   the existing rule-hairline border-top is softened.
   ──────────────────────────────────────────────────────────── */

.site-footer {
    border-top: none;
    /* Warm footer: a subtle top separator via padding, not a rule */
    padding-block-start: var(--space-12);
}


/* ─────────────────────────────────────────────────────────────
   18.  EYEBROW — warm label treatment
   ─────────────────────────────────────────────────────────────
   Eyebrows (specimen labels) in Atelier are a degree warmer:
   --accent-link (the legible pink) rather than --ink-muted.
   This adds colour warmth to section openers.
   ──────────────────────────────────────────────────────────── */

.eyebrow {
    font-family:     var(--font-ui);
    font-size:       var(--text-xs);
    font-weight:     var(--weight-semibold);
    text-transform:  uppercase;
    letter-spacing:  var(--tracking-eyebrow);
    color:           var(--accent-link);
    display:         block;
    line-height:     var(--lh-caption);
}


/* ─────────────────────────────────────────────────────────────
   19.  LEDE — slightly warmer body copy
   ─────────────────────────────────────────────────────────────
   Lede paragraphs in Atelier: full --ink (not muted) for warmer
   presence. The spine lede stays muted (components.css rule kept).
   ──────────────────────────────────────────────────────────── */

.lede {
    font-size:   var(--text-base);
    line-height: var(--lh-body);
    color:       var(--ink);
}


/* ─────────────────────────────────────────────────────────────
   20.  QUIET LIST — ruled border treatment
   ─────────────────────────────────────────────────────────────
   Atelier: the left-border rule on .quiet-list--ruled uses a
   warmer, softer gradient as the rule. The 2px brand-gradient
   hairline is the signature architectural device.
   ──────────────────────────────────────────────────────────── */

/* Hairline rows — a full-width rule separates each item (chosen 2026-06-09:
   cleaner separation of text-from-text than a vertical bar). Editorial, calm. */
.quiet-list--ruled { list-style: none; padding-left: 0; }
.quiet-list--ruled li {
    padding-block: var(--space-1-25);
    border-top: var(--border-hairline);
}
.quiet-list--ruled li:last-child { border-bottom: var(--border-hairline); }


/* ─────────────────────────────────────────────────────────────
   20b. HESITATIONS LIST — objection / honest-answer pairs
   ─────────────────────────────────────────────────────────────
   Used in training pages' "If you're hesitating" section.
   Visitor's objection sits as a <dt>; honest answer as a <dd>.
   Reuses the gradient-rule device from .quiet-list--ruled.
   ──────────────────────────────────────────────────────────── */

.hesitation-list {
    margin-top: var(--space-4);
    display:    grid;
    gap:        var(--space-4);
}

.hesitation-list dt {
    font-family:   var(--font-display);
    font-size:     var(--text-lg);
    line-height:   1.3;
    color:         var(--ink);
    border-left:   3px solid var(--accent-end);
    background:    linear-gradient(to right, rgba(218, 126, 175, 0.06), transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding:       var(--space-1) var(--space-3);
    margin-bottom: var(--space-2);
}

.hesitation-list dd {
    margin-left:  0;
    padding-left: var(--space-3);
    font-size:    var(--text-base);
    line-height:  var(--lh-body);
    color:        var(--ink);
}


/* ─────────────────────────────────────────────────────────────
   21.  SAFETY LINE — warm, reassuring meta
   ──────────────────────────────────────────────────────────── */

.safety-line {
    font-family: var(--font-ui);
    font-size:   var(--text-xs);
    color:       var(--ink-muted);
    font-style:  italic;
    line-height: var(--lh-caption);
}


/* ─────────────────────────────────────────────────────────────
   22.  ANNOUNCEMENT BAND — Atelier warm treatment
   ─────────────────────────────────────────────────────────────
   Already styled in components.css. Atelier: the band gets the
   gradient-tint background for a touch more warmth.
   ──────────────────────────────────────────────────────────── */

.site-announcement {
    background:   var(--gradient-tint);
    border-bottom: 1px solid var(--ink-hairline);
}


/* ─────────────────────────────────────────────────────────────
   23.  FELT-MOMENT OVERLAY — warm Atelier surface
   ─────────────────────────────────────────────────────────────
   The overlay uses --surface-raised for a slightly warmer feel
   than the default --surface-base.
   ──────────────────────────────────────────────────────────── */

.felt-moment {
    background: var(--surface-raised);
}

/* ===== ATELIER — remaining components brought into the B language (2026-05-22)
   Bespoke components the first promotion didn't reach. Same Atelier patterns:
   warm raised surface + generous radius + soft shadow (no hard border),
   display serif on larger titles, softer input corners. ===== */

/* Browse cards (library reflections, video tiles) — match featured/quiet */
.card-browse {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
    transition:    box-shadow var(--transition-base), transform var(--transition-fast);
}
.card-browse:hover {
    box-shadow: var(--elevation-2);
    transform:  translateY(-2px);
    border:     none;
}
.card-browse .card-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    color:       var(--ink-deep);
}

/* Event card (image-led) — warm raised panel, corners clipped */
.card-event {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
    overflow:      hidden;
}
.card-event:hover {
    box-shadow: var(--elevation-2);
    transform:  translateY(-2px);
}

/* Definition-list panels — training summary + coach meta */
.training-summary,
.coach-meta {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
}

/* Pricing table — warm raised panel */
.pricing-table {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
    overflow:      hidden;
}

/* Coach portrait — softer corners to match B */
.coach-portrait {
    border-radius: var(--radius-lg);
}

/* Reflection "choose your format" blocks — warm raised panels */
.format-choose-block {
    background:    var(--surface-raised);
    border:        none;
    border-radius: var(--radius-lg);
    box-shadow:    var(--elevation-1);
}

/* Forms — warmer, softer inputs */
.form-input,
.form-textarea,
.form-select {
    background:    var(--surface-raised);
    border-radius: var(--radius-md);
}

.filter-select {
    background: var(--surface-raised);
}

/* /method/ institutional build-frame — keep the dashed gate, soften corners */
.gated {
    border-radius: var(--radius-lg);
}

/* Hero region line — global-home positioning + a small Europe button, woven
   into the hero (sits directly on top of the large headline). */
.hero-region {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.hero-region .eyebrow { margin: 0; }
.btn-region {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--accent-link);
    text-decoration: none;
    padding: var(--space-0-5) var(--space-1-25);
    border: var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.btn-region::after { content: " \2192"; }
.btn-region:hover { color: var(--ink); border-color: var(--accent-end); }

/* Learn fold-out — desktop nav dropdown (hover + keyboard focus-within, no JS).
   Flush under the trigger so there's no hover gap to fall through. */
.nav-has-menu { position: relative; }
.nav-has-menu > a::after {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: var(--space-0-75);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.7;
}
.site-nav .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--surface-raised);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-2);
    padding: var(--space-1);
    padding-top: var(--space-2);
    z-index: var(--z-header);
}
.site-nav .nav-has-menu:hover .nav-menu,
.site-nav .nav-has-menu:focus-within .nav-menu { display: block; }
.site-nav .nav-menu li { display: block; }
.site-nav .nav-menu a {
    display: block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--ink);
}
.site-nav .nav-menu a:hover,
.site-nav .nav-menu a:focus-visible {
    background: var(--surface-sunken);
    color: var(--accent-link);
}

/* MEGA PANEL (Learn) — a wide, grouped fold-out, footer-style: small labelled
   columns of links. Same hover/focus open model as .nav-menu, no JS. */
.site-nav .nav-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: var(--space-4) var(--space-6);
    background: var(--surface-raised);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-2);
    padding: var(--space-4);
    z-index: var(--z-header);
}
.site-nav .nav-has-mega:hover .nav-mega,
.site-nav .nav-has-mega:focus-within .nav-mega { display: grid; }
.nav-mega-group { display: flex; flex-direction: column; gap: var(--space-0-5); }
.nav-mega-label {
    font-family: var(--font-structure); font-weight: var(--weight-extrabold);
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-muted); margin: 0 0 var(--space-1);
}
.site-nav .nav-mega a {
    display: block; padding: var(--space-0-75) 0;
    font-size: var(--text-sm); color: var(--ink); white-space: nowrap; text-decoration: none;
}
.site-nav .nav-mega a:hover,
.site-nav .nav-mega a:focus-visible { color: var(--accent-link); }

/* =================================================================
   LEVEL SYSTEM — one visual language for the five levels: serif
   numerals + a rationed brand-gradient accent. Shared by the
   progression spine (/method/) and the level cards (/trainings/video/).
   ================================================================= */

/* Progression spine — the I→V journey as a connected sequence, not a list.
   The gradient line encodes the path; serif numerals are the nodes. */
.level-spine {
    --spine-node: 56px;
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    position: relative;
}
.level-spine::before {                       /* the connecting line = brand light */
    content: "";
    position: absolute;
    left: calc(var(--spine-node) / 2 - 1px);
    top: var(--space-6);
    bottom: var(--space-6);
    width: 2px;
    background: var(--gradient-action);
    opacity: 0.45;
}
.level-step {
    position: relative;
    display: grid;
    grid-template-columns: var(--spine-node) 1fr;
    gap: var(--space-4);
    align-items: start;
    padding-block: var(--space-4);
}
.level-step-num {
    width: var(--spine-node);
    height: var(--spine-node);
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-base);
    border: 2px solid var(--accent-end);
    font-family: var(--font-display);        /* serif numeral — elegant */
    font-size: var(--text-lg);
    line-height: 1;
    color: var(--accent-link);
    position: relative;
    z-index: 1;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.level-step:hover .level-step-num {           /* node lights up on hover */
    background: var(--gradient-action);
    border-color: transparent;
    color: var(--ink-on-accent);
}
.level-step-text {
    margin: 0;
    padding-top: var(--space-2);
    font-size: var(--text-base);
    line-height: var(--lh-body);
    color: var(--ink);
}
.level-step-text strong { color: var(--ink-deep); }

/* Level cards — a big serif numeral watermark + a rationed gradient top edge.
   Add `card-level` + a `.card-numeral` to a `.card-featured`. */
.card-level {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-level::before {                         /* gradient accent — top edge */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--gradient-action);
}
.card-numeral {
    display: none;       /* giant watermark pulled — too large + disconnected; see _card-lab for options */
    position: absolute;
    top: var(--space-1);
    right: var(--space-3);
    z-index: -1;
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--accent-end);
    opacity: 0.14;
    pointer-events: none;
}
.card-level:hover {
    transform: translateY(-4px);
    box-shadow: var(--elevation-3);
}
/* The level node — the spine's circle-numeral, reused inline in the card head
   so the cards and the /method/ spine speak one language. */
.card-level .card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: flex-start;
}
.card-level .card-head .badge { margin-left: auto; }
/* =============================================================
   LEVEL-CIRCLE — the canonical level mark (numeral node). The circle
   vocabulary used WHEREVER a level appears: home pathway, /trainings/,
   video, in-person, level pages. Default = outline on light; --fill =
   the brand gradient. Serif numeral (the elegant "node"), matching the
   approved video treatment. Sizes: --sm (cards), default, --lg (hero).
   `.card-node` is kept as an alias so existing markup still renders.
   ============================================================= */
.level-circle,
.card-node {
    flex-shrink:   0;
    display:       grid;
    place-items:   center;
    width:         48px;
    height:        48px;
    border-radius: var(--radius-pill);
    border:        2px solid var(--accent-end);
    background:    var(--surface-base);
    color:         var(--accent-link);
    font-family:   var(--font-display);
    font-size:     var(--text-lg);
    line-height:   1;
}
.level-circle--sm,
.card-node { width: 40px; height: 40px; font-size: 1.15rem; }
.level-circle--lg { width: 88px; height: 88px; font-size: var(--text-2xl); }
.level-circle--fill {
    background:   var(--gradient-action);
    color:        var(--ink-on-accent);
    border-color: transparent;
}

/* =============================================================
   GRAPHIC PRIMITIVES (id32) — the small kit that lets a text-heavy
   page read as composed without a single illustration. Three pieces,
   all built on the third voice (--font-structure, heavy) and the
   existing hairline + gradient tokens:
     .section-num   big structural numeral + label — breaks long runs
     .spec-row      hairline label/value rhythm — schedules, specs, includes
     .tint-field    gradient as a soft FIELD (not solid) behind a quote/stat
   ============================================================= */

/* 1 — NUMBERED-SECTION MARKER. A large, quiet third-voice numeral with an
   uppercase label beside it. Use to head the steps of a long page (video
   "reasons," germany "training day") so the eye has structure to land on. */
.section-num {
    display:      flex;
    align-items:  baseline;
    gap:          var(--space-3);
}
.section-num__digit {
    flex-shrink:    0;
    font-family:    var(--font-structure);
    font-weight:    var(--weight-black);
    font-size:      clamp(2.5rem, 7vw, var(--text-3xl));
    line-height:    0.9;
    letter-spacing: -0.02em;
    /* gradient numeral — the brand colour story, used as ink not fill */
    background:              var(--gradient-action);
    -webkit-background-clip: text;
            background-clip: text;
    color:                   transparent;
}
.section-num__label {
    font-family:    var(--font-structure);
    font-weight:    var(--weight-extrabold);
    font-size:      var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color:          var(--ink-muted);
    line-height:    var(--lh-caption);
}
/* Outline variant — numeral as a hairline-stroked figure, for sunken grounds */
.section-num--outline .section-num__digit {
    background:              none;
    -webkit-text-stroke:     2px var(--accent-end);
    color:                   transparent;
}

/* 2 — SPEC-ROW. A label/value row on a hairline rhythm. Replaces dry bullet
   lists for schedules, "what's included," and at-a-glance specs. The hairline
   between rows is the graphic; the heavy label is the third voice. */
.spec-list { border-top: var(--border-hairline); }
.spec-row {
    display:               grid;
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
    gap:                   var(--space-3);
    align-items:           baseline;
    padding-block:         var(--space-3);
    border-bottom:         var(--border-hairline);
}
.spec-row__label {
    font-family:    var(--font-structure);
    font-weight:    var(--weight-extrabold);
    font-size:      var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color:          var(--ink-muted);
    line-height:    var(--lh-caption);
}
.spec-row__value {
    font-family: var(--font-text);
    font-size:   var(--text-base);
    color:       var(--ink);
    line-height: var(--lh-body);
}
.spec-row__value > * + * { margin-top: var(--space-1); }
@media (max-width: 640px) {
    .spec-row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* 3 — TINT-FIELD. The gradient as a soft, low-opacity FIELD behind a large
   pull-quote or a stat — never a solid block. Keeps the gradient "rationed"
   (per the audit) while giving a long page one warm graphic anchor. */
.tint-field {
    position:      relative;
    isolation:     isolate;
    padding:       clamp(var(--space-8), 8vw, var(--space-12));
    border-radius: var(--radius-lg);
    overflow:      hidden;
}
.tint-field::before {
    content:  "";
    position: absolute;
    inset:    0;
    z-index:  -1;
    background: var(--gradient-action);
    opacity:    0.1;        /* a tint, not a fill */
}
.tint-field__quote {
    font-family:    var(--font-display);
    font-size:      clamp(var(--text-xl), 4.5vw, var(--text-3xl));
    line-height:    var(--lh-display);
    color:          var(--ink);
    max-width:      24ch;
    margin:         0;
}
.tint-field__quote cite {
    display:     block;
    margin-top:  var(--space-3);
    font-family: var(--font-structure);
    font-weight: var(--weight-extrabold);
    font-size:   var(--text-xs);
    font-style:  normal;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color:       var(--accent-link);
}

/* Method hero — text beside a treated image; the headline is compact (functional,
   not a giant decorative display). Text first, image second; stacks on mobile. */
.hero-grid--method { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .hero-grid--method { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); } }
.quiet-headline--compact { font-size: clamp(var(--text-2xl), 4.5vw, var(--text-3xl)); line-height: 1.1; }
.method-hero-photo { margin: 0; }
.method-hero-photo img {
    width: 100%; height: auto; display: block;
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
    filter: var(--photo-grade);
}
/* A reading column centred under a wider section header/grid. */
.reading--centered { margin-inline: auto; margin-top: var(--space-5, 40px); }

/* Compact benefits — two tight columns with a small gradient dot. Not airy. */
.benefit-grid {
    list-style: none; padding: 0;
    margin: var(--space-4) 0;
    display: grid; grid-template-columns: 1fr; gap: var(--space-1-25) var(--space-6);
}
@media (min-width: 560px) { .benefit-grid { grid-template-columns: 1fr 1fr; } }
.benefit-grid li {
    position: relative; padding-left: 40px;   /* room for the 28px medallion + gap */
    font-size: var(--text-base); line-height: 1.4; color: var(--ink);
}
/* On-brand marker: the WW lotus set in a small hairline circle (circle = brand
   primitive, same vocabulary as the level nodes). Bg-independent. */
.benefit-grid li::before {
    content: ""; position: absolute; left: 0; top: -1px;
    width: 28px; height: 28px; border-radius: 50%;
    border: var(--border-hairline);
    background: url('/img/logos/logo-icon-abstract.svg') no-repeat center / 15px auto;
}

/* Method mechanism — three steps as a PROCESS: uniform circle nodes joined by
   arrows, black body text, tight. (No crude blocks, no oversized numerals.) */
.method-steps {
    display: flex; flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
@media (min-width: 760px) { .method-steps { flex-direction: row; align-items: flex-start; gap: var(--space-4); } }
.method-step { flex: 1; display: flex; flex-direction: column; gap: var(--space-0-5); }
.method-step .level-circle { margin-bottom: var(--space-1); }
.method-step__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--lh-heading);
    color: var(--ink-deep);
    margin: 0;
}
.method-step__body {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--ink);          /* black, not muted */
    margin: 0;
}
/* Refined connector — a thin gradient line + a chevron, not a glyph. Sits centred
   on the circle row. */
.method-arrow {
    flex: none;
    align-self: flex-start;
    height: 48px;                 /* = level-circle height → centres on the circle row */
    display: flex; align-items: center;
    font-size: 0;                 /* hide the fallback glyph; drawn below */
}
.method-arrow::before {
    content: ""; width: 30px; height: 2px;
    background: var(--gradient-action); border-radius: var(--radius-pill);
}
.method-arrow::after {
    content: ""; width: 7px; height: 7px;
    border-top: 2px solid var(--accent-end); border-right: 2px solid var(--accent-end);
    transform: rotate(45deg); margin-left: -5px;
}
@media (max-width: 759px) { .method-arrow { transform: rotate(90deg); margin-left: var(--space-3); height: auto; } }

/* The meaning paragraph under the steps — small (matches the step body so it reads
   as a continuation, not a disjointed larger block), left, hairline-separated. */
.method-coda { max-width: 60ch; margin-top: var(--space-5, 40px); padding-top: var(--space-4); border-top: var(--border-hairline); }
.method-coda p { margin: 0; font-size: var(--text-sm); line-height: var(--lh-body); color: var(--ink); }

/* Method page runs on a tighter vertical rhythm (~30% less than the default). */
.method-page .section { padding-block: clamp(var(--space-3), 3.5vw, var(--space-5, 34px)); }
.method-page .section-head { margin-bottom: var(--space-4); }

/* FRAMED SECTION — the organizing element for text sections. A framing column
   (eyebrow + title + an anchoring thesis) sits beside the content, divided by a
   hairline spine. Gives a header→paragraph→list section a backbone + hierarchy.
   Reusable on any content-heavy section. */
.framed { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 860px) {
    .framed { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); align-items: start; }
    .framed__body { border-left: var(--border-hairline); padding-left: var(--space-8); }
}
.framed__frame .section-head,
.framed__frame .section-title,
.framed__frame .eyebrow { margin-bottom: 0; }
.framed__thesis {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--lh-heading);
    color: var(--accent-link);
    margin-top: var(--space-3);
    max-width: 22ch;
}
.framed__body > * + * { margin-top: var(--space-3); }

/* ============================================================
   CONCEPT GRAPHICS — drawing the abstract ideas (depth without photos).
   A "field of awareness" atmospheric ground + two CSS diagrams:
   the I dissolving into the field, and the nested layers of the I.
   ============================================================ */
.field-section { position: relative; overflow: hidden; }
.field-section::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(58% 58% at 50% 42%,
        rgba(92, 118, 185, 0.16), rgba(218, 126, 175, 0.11) 45%, transparent 74%);
}
.field-section > * { position: relative; z-index: 1; }

.concept-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-top: var(--space-6); }
@media (min-width: 780px) { .concept-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; } }
.concept { margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* Parallel figure label above BOTH diagrams (symmetry). */
.concept__label {
    font-family: var(--font-structure); font-weight: var(--weight-extrabold);
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-muted); margin: 0 0 var(--space-3);
}
.concept figcaption {
    margin-top: var(--space-4);
    font-family: var(--font-text);
    font-size: var(--text-sm);
    line-height: var(--lh-body);
    color: var(--ink);
    max-width: 34ch; margin-inline: auto;
}

/* Shared stage — both diagrams sit in an identical soft circular field, same
   size, so they read as a matched pair (not soft-vs-hard). */
.diagram-stage {
    position: relative;
    width: min(260px, 72vw); aspect-ratio: 1 / 1; margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 118, 185, 0.16) 0%, rgba(218, 126, 175, 0.11) 52%, transparent 72%);
    display: grid; place-items: center;
}
/* Diagram 1 — the felt "I" dissolving into the field (rings radiate outward). */
.diagram-awareness__node {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--gradient-action); color: var(--ink-on-accent);
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: var(--text-xl); line-height: 1;
    /* concentric rings = the node relaxing outward into the field */
    box-shadow: 0 0 0 14px rgba(218, 126, 175, 0.10),
                0 0 0 30px rgba(92, 118, 185, 0.07),
                0 0 0 50px rgba(92, 118, 185, 0.04);
}

/* Diagram 2 — layers of the "I": concentric circles, centred in the same stage. */
.layer { border: 2px solid; border-radius: 50%; display: grid; place-items: center; padding: clamp(var(--space-2), 3vw, var(--space-4)); }
.layer-3 { border-color: rgba(218, 126, 175, 0.30); }
.layer-2 { border-color: rgba(218, 126, 175, 0.55); }
.layer-1 { border-color: var(--accent-end); }
.layer-core {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--gradient-action); color: var(--ink-on-accent);
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: var(--text-lg); line-height: 1;
}

/* Difference cards — "Wholeness Work vs X"; tighter, smaller body. */
.difference .vs { color: var(--accent-link); font-style: italic; }
.difference h3 { line-height: var(--lh-heading); }
.difference p { font-size: var(--text-sm); line-height: 1.45; }

/* BREATH BAND — a full-bleed nature image as a visual exhale between sections.
   Rationed: one per long page, at an emotional beat. Optional overlaid pull-quote
   (white serif on a lightly darkened image). The calm, premium treatment. */
.breath-band { position: relative; width: 100%; line-height: 0; }
.breath-band > img {
    display: block;
    width: 100%;
    height: clamp(260px, 40vh, 520px);
    object-fit: cover;
    filter: var(--photo-grade);
}
.breath-band__quote {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--space-6);
}
.breath-band__quote blockquote {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4.5vw, 3.25rem);
    line-height: var(--lh-display);
    color: #fff;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5);
    max-width: 22ch;
    margin: 0;
}

/* PHOTOGRAPHIC ANCHOR — REMOVED. Fixed rule (2026-06-10): never put an image
   inside the dark-blue anchor block. The anchor is always flat navy + the
   gradient headline. (Class kept out of use intentionally.) */

/* TRAINER CARD — faced + personal (every trainer is also a coach). Portrait with
   the warm-whisper grade, name, where/languages, a "Trains" level indicator
   showing which levels they're authorised to teach, and a personal line. */
.trainer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-4);
}
@media (min-width: 680px)  { .trainer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .trainer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trainer-card {
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.trainer-card__photo { aspect-ratio: 4 / 5; background: var(--surface-sunken); }
.trainer-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); display: block; }
.trainer-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.trainer-card__name { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--lh-heading); color: var(--ink-deep); margin: 0; }
.trainer-card__meta { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.trainer-card__line { font-family: var(--font-text); font-size: var(--text-sm); line-height: var(--lh-body); color: var(--ink); margin: var(--space-1) 0; }
.trainer-card .arrow-link { margin-top: auto; }

/* TRAINS — teaching-authority indicator. Distinct from a coach's "completed"
   levels: a labelled row of filled level-circles for the levels they may train. */
.trains { display: flex; align-items: center; gap: var(--space-1-25); flex-wrap: wrap; margin: var(--space-1) 0; }
.trains__label {
    font-family: var(--font-structure);
    font-weight: var(--weight-extrabold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-muted);
    margin-right: var(--space-1);
}

/* FACED TESTIMONIAL — real person, smaller quote, role + (optional) trainer level. */
.testimonial-faced-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
@media (min-width: 760px) { .testimonial-faced-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.testimonial-faced {
    margin: 0;
    padding: var(--space-4);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--surface-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.testimonial-faced__head { display: flex; align-items: center; gap: var(--space-2); }
.testimonial-faced__photo { width: 52px; height: 52px; border-radius: var(--radius-pill); object-fit: cover; filter: var(--photo-grade); flex-shrink: 0; }
.testimonial-faced__name { font-family: var(--font-display); font-size: var(--text-base); line-height: 1.1; color: var(--ink-deep); margin: 0; }
.testimonial-faced__role { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--ink-muted); margin: var(--space-0-5) 0 0; }
.testimonial-faced__quote { font-family: var(--font-text); font-size: var(--text-sm); line-height: var(--lh-body); color: var(--ink); margin: 0; }

/* NUMBERED REASONS — a graphic grid for "reasons / points" sections, so a
   summing-up list reads as designed (big gradient numerals) rather than as dry
   bullets. Reuses .section-num__digit. Use where a page enumerates reasons/why. */
.reason-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
@media (min-width: 720px) {
    .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
.reason-card {
    padding: var(--space-5, 40px) var(--space-4) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-deep);   /* dark-blue card — the gradient numeral pops on navy */
    color: var(--ink-on-deep);
}
.reason-card .section-num__digit { font-size: clamp(2.5rem, 6vw, 3.5rem); display: block; }
.reason-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--lh-heading);
    margin: var(--space-1) 0;
    color: var(--ink-on-deep);
}
.reason-card__body { font-size: var(--text-base); line-height: var(--lh-body); color: var(--ink-on-deep-body); margin: 0; }

/* Kit-page doc styling lives in css/kit.css (the styleguide's own chrome),
   loaded only by /kit/. Kept out of components.css to keep production lean. */

/* =============================================================
   ANCHOR BAND — the "blue anchor": a rationed warm-dark grounding
   moment, one per page. Inspired by the Level-1 book cover; it's the
   single place the blue→pink gradient gets to be the hero. Applied as
   a MODIFIER to an existing closing CTA (.section-spine), so it adds
   punch without adding length. The .accent-gradient span in the
   headline already carries the gradient; everything else goes quiet
   on the deep navy. Never use more than one per page (rarity = punch).
   ============================================================= */
.section-anchor > .reading,
.section-anchor > .content {
    background:    var(--surface-deep, #20263F);
    color:         var(--ink-on-deep, var(--ink-on-deep));
    border-radius: var(--radius-lg);
    padding:       clamp(var(--space-8), 8vw, var(--space-12)) clamp(var(--space-4), 6vw, var(--space-8));
    text-align:    center;
}
.section-anchor .section-title { color: var(--ink-on-deep, var(--ink-on-deep)); }
.section-anchor .lede          { color: var(--ink-on-deep-body); }
.section-anchor .safety-line   { color: var(--ink-on-deep-muted); }
.section-anchor .text-link     { color: var(--ink-on-deep); }
/* The CTA goes from solid gradient pill to a low hairline-ghost — elegant on dark,
   lets the gradient headline stay the brightest object. */
.section-anchor .btn-primary {
    background:  transparent;
    color:       var(--ink-on-deep);
    border:      1px solid var(--ink-on-deep-faint);
    box-shadow:  none;
}
.section-anchor .btn-primary:hover {
    border-color: var(--ink-on-deep);
    transform:    translateY(-1px);
    box-shadow:   none;
}

/* Forms on the anchor's dark ground (door LPs) — legible inputs on navy, light
   labels/help; the submit stays BRIGHT (it's the conversion action, not a quiet
   ghost like a content-page CTA). */
.section-anchor .form-label { color: var(--ink-on-deep, var(--ink-on-deep)); }
.section-anchor .form-input {
    background: var(--surface-deep-fill);
    border: 1px solid var(--surface-deep-border);
    color: var(--ink-on-deep, var(--ink-on-deep));
}
.section-anchor .form-input::placeholder { color: var(--ink-on-deep-faint); }
.section-anchor .form-input:focus {
    border-color: var(--ink-on-deep-body);
    outline: none;
    box-shadow: var(--ring-focus);
}
.section-anchor .form-help { color: var(--ink-on-deep-muted); }
/* Override the ghost-CTA rule for the form's submit — keep it the bright gradient
   so the conversion action stays the brightest object on the band. */
.section-anchor .form-submit.btn-primary {
    background:    var(--gradient-action);
    color:        var(--ink-on-accent);
    border-color: transparent;
}
.section-anchor .form-submit.btn-primary:hover { transform: translateY(-1px); }

/* General light-ghost button for any dark ground (used by the coach band too). */
.btn-ghost-light {
    background: transparent;
    color:      var(--ink-on-deep, var(--ink-on-deep));
    border:     1px solid var(--ink-on-deep-faint);
    box-shadow: none;
}
.btn-ghost-light:hover { border-color: var(--ink-on-deep); transform: translateY(-1px); }

/* Reader text-size control (injected into the header by main.js). Three
   A's of increasing size; the active one carries the gradient. */
.text-size {
    position: fixed;
    bottom: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-overlay);
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    padding: var(--space-0-75);
    background: var(--surface-overlay-bg);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: var(--border-hairline);
    border-radius: var(--radius-pill);
    box-shadow: var(--elevation-2);
}
.text-size-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    line-height: 1;
    color: var(--ink-muted);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.text-size-btn:nth-child(1) { font-size: 0.8rem; }
.text-size-btn:nth-child(2) { font-size: 0.95rem; }
.text-size-btn:nth-child(3) { font-size: 1.15rem; }
.text-size-btn:hover { color: var(--accent-link); border-color: var(--accent-end); }
.text-size-btn[aria-pressed="true"] {
    color: var(--ink-on-accent);
    background: var(--gradient-action);
    border-color: transparent;
}
.text-size-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
@media (max-width: 768px) {
    .text-size-btn { width: 40px; height: 40px; }   /* larger touch targets on mobile */
}

/* =================================================================
   PORTRAIT + QUOTE — the validated "graphic moment": a functional
   portrait beside a large serif pull-quote. Reusable site-wide.
   Add `quote-grid--portrait-right` to flip the portrait to the right.
   ================================================================= */
.section-quote { padding-block: clamp(var(--space-12), 13vw, var(--space-16)); }
.quote-grid {
    max-width: var(--content-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
}
@media (min-width: 880px) {
    .quote-grid { grid-template-columns: 0.78fr 1.22fr; gap: var(--space-12); }
    .quote-grid--portrait-right { grid-template-columns: 1.22fr 0.78fr; }
    .quote-grid--portrait-right .quote-portrait { order: 2; }
}
.quote-portrait { margin: 0; }
.quote-portrait img {
    display: block;
    width: 100%;
    height: auto;
    /* Cream mat — the cohesion frame (colour-neutral, skin-safe). The warm
       whisper grade gives the photo its luminosity inside the mat. */
    padding: var(--space-1-25);
    background: var(--surface-base);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
    filter: var(--photo-grade);
}
.quote-body { margin: 0; }

/* Large decorative opening mark — typographic anchor, adds graphic presence
   without competing with the portrait. */
.quote-body::before {
    content: "\201C";
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 7rem);
    line-height: 0.7;
    color: var(--accent-link);
    opacity: 0.25;
    display: block;
    margin-bottom: var(--space-2);
}

.quote-text {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4.2vw, 3.25rem);
    line-height: 1.18;
    color: var(--ink-deep);
    text-wrap: balance;
}
.quote-attr {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-2);
    border-top: var(--border-hairline);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-meta);
    color: var(--ink-muted);
}


/* =============================================================
   YOUR PATH IN — four journey cards on the trainings page
   ============================================================= */

.journey-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: start;
}

@media (max-width: 1100px) {
    .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .journey-grid { grid-template-columns: minmax(0, 1fr); }
}

.journey-card {
    background: var(--surface-base);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.journey-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.journey-num {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--accent-end);
    color: var(--accent-link);
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1;
}

.journey-title {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-deep);
    margin: 0;
}

.journey-fit {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}

.journey-steps {
    margin: 0;
    padding: 0 0 0 var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--ink-deep);
    line-height: 1.5;
    flex: 1;
}

.journey-steps li { padding-left: var(--space-1); }

.journey-note {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    margin: 0;
    padding-top: var(--space-2);
    border-top: var(--border-hairline);
    line-height: 1.5;
}

.journey-foot {
    padding-top: var(--space-1);
}

.journey-unsure {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}