/* =====================================================
   DESIGN SYSTEM PATTERNS
   Shared components for the editorial design.
   Sections opt into a colour scheme; children read the
   --section-* variables rather than fixed colours.
===================================================== */

/* ── Section colour schemes ───────────────────────── */

.section {
    position: relative;
    padding-block: var(--section-padding);
    background: var(--color-bg);
    color: var(--color-primary);
}

.section--dark {
    --section-fg: var(--color-text-on-dark);
    --section-fg-muted: var(--color-muted-on-dark);
    --section-fg-faint: rgb(242 239 233 / 0.4);
    --section-border: var(--color-border-on-dark);
    --section-accent: var(--color-accent-soft);
    --section-surface: rgb(255 255 255 / 0.04);
    --section-fg-inverse:  var(--color-primary);
    background: var(--color-primary);
    color: var(--section-fg);
}

.section--light,
.section--tint {
    --section-fg: var(--color-primary);
    --section-fg-muted: var(--color-muted);
    --section-fg-faint: rgb(26 22 19 / 0.45);
    --section-border: var(--color-border);
    --section-accent: var(--color-accent);
    --section-fg-inverse: var(--color-bg);
    color: var(--section-fg);
}

.section--light { 
    background: var(--color-bg);
    --section-surface: #FFFFFF;
 }
.section--tint  { 
    background: var(--color-bg-tint);
    --section-surface: var(--color-bg);
 }

/* ── Buttons ────────────────────── */
.btn-dark {
    background-color: var(--section-fg);
    border: 1px solid var(--section-fg);
    color: var(--section-fg-inverse);
}

.btn-dark:hover {
    background-color: transparent;
    color: var(--section-fg);
    box-shadow: none;
}

/* ── Maintenance holding page ────────────────────── */

.maintenance {
    min-block-size: 100svh;
    display: grid;
    place-items: center;
    text-align: center;
    padding-inline: var(--container-padding);
}

.maintenance-inner {
    max-inline-size: 36rem;
}

.maintenance-logo {
    margin-block-end: var(--space-2xl);
}

.maintenance-logo img {
    block-size: 48px;
    inline-size: auto;
    margin-inline: auto;
}

.maintenance-wordmark {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    color: var(--section-fg);
}

.maintenance-title {
    font-size: var(--fs-2xl);
    margin-block-end: var(--space-lg);
}

.maintenance-message {
    margin-inline: auto;
    margin-block-end: var(--space-xl);
}

.maintenance-email {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    color: var(--section-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

/* ── Card surface — one treatment for every card ──── */
/* Hover + transitions live in motion.css */

.program-card,
.testimonial-card,
.about-pillars .pillar {
    background: var(--section-surface, #FFFFFF);
    border: var(--card-border-width, 1px) solid
            var(--card-border-color, var(--section-border));
    border-radius: var(--radius-card);
}


/* ── The Problem — two column ────────────────────── */

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

.problem-grid--no-table {
    grid-template-columns: minmax(0, 1fr);
}

/* ── Comparison table ────────────────────────────── */

.compare-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-block-start: 1px solid var(--section-border);
}
/* Row wrapper — invisible to the grid, but lets a row hover as one */
.compare-row {
    display: contents;
}

.compare-head {
    padding: var(--space-md) var(--space-lg);
    border-block-end: 1px solid var(--section-border);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-accent);
}

.compare-cell {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-block-end: 1px solid var(--section-border);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
}

.compare-head--old,
.compare-cell--old {
    border-inline-end: 1px solid var(--section-border);
    color: var(--section-fg-faint);
}

.compare-cell--old .compare-text {
    text-decoration: line-through;
}

.compare-cell--new {
    color: var(--section-fg);
}

.compare-cell--new .compare-mark {
    color: var(--section-accent);
}

.compare-mark {
    flex-shrink: 0;
    font-size: var(--fs-sm);
}

/* ── Section label:  03 — WHO WE ARE ─────────────── */

.section-label {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.section-label-number {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-sm);
    color: var(--section-accent);
}

.section-label-text {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-accent);
    white-space: nowrap;
}

.section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--section-border);
}

/* ── Who We Are — two column ─────────────────────── */

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

.wwa-grid--no-media {
    grid-template-columns: minmax(0, 1fr);
}

.wwa-media {
    margin: 0;
}

/* Frame sets the shape; image, slides or video fill it */
.wwa-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--section-border, var(--color-border));
}

/* Video: same width, height follows 16:9 */
.wwa-media--video .wwa-frame {
    aspect-ratio: 16 / 9;
}

.wwa-frame > img,
.wwa-frame > video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* Slideshow — crossfade */
.wwa-frame .wwa-slide {
    opacity: 0;
}

.wwa-frame .wwa-slide.is-active {
    opacity: 1;
}

/* Video pause / play button */
.wwa-video-toggle {
    position: absolute;
    inset-block-end: var(--space-md);
    inset-inline-end: var(--space-md);
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #FFFFFF;
    cursor: pointer;
}

.wwa-video-toggle:focus-visible {
    outline: 2px solid var(--section-accent, var(--color-accent));
    outline-offset: 2px;
}

.wwa-video-toggle svg {
    inline-size: 18px;
    block-size: 18px;
    fill: currentColor;
}

.wwa-video-toggle[data-state="playing"] .wwa-icon-play,
.wwa-video-toggle[data-state="paused"] .wwa-icon-pause {
    display: none;
}

.wwa-caption {
    margin-block-start: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-fg-faint);
}

/* ── Display heading ─────────────────────────────── */

.display-heading {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: var(--tracking-display);
    color: var(--section-fg);
    margin: 0;
}

/* The terracotta italic phrase */
.display-em {
    font-style: italic;
    color: var(--section-accent);
}

/* ── Pill buttons ────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;

    padding: 14px 30px;
    border-radius: var(--radius-pill);

    font-family: var(--font-body);
    font-size: var(--fs-button);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;

    transition: transform var(--transition-fast),
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.btn::after {
    content: "—";
    opacity: 0.55;
}

.btn-primary {
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: var(--color-text-on-dark);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--color-accent);
    box-shadow: none;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--section-border, var(--color-border));
    color: var(--section-fg, var(--color-primary));
}

.btn-outline:hover {
    background: transparent;
    border-color: var(--section-accent, var(--color-accent));
    color: var(--section-accent, var(--color-accent));
}

.btn-ghost {
    background: transparent;
    border: none;
    padding-left: 0;
    padding-right: 0;
    color: var(--section-accent, var(--color-accent));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.btn-ghost:hover {
    color: var(--section-fg, var(--color-primary));
    text-decoration-color: currentColor;
    transform: none;
}

/* ── Shared section content ──────────────────────── */

.section-heading {
    font-size: var(--fs-xl);
    max-width: 18ch;
    text-wrap: balance;
    margin: 0 0 var(--space-xl);
}

.section-lead {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.85;
    color: var(--section-fg-muted);
    max-width: 60ch;
    margin: 0 0 var(--space-xl);
}

.section-quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--section-fg);
    max-width: 42ch;
    margin: 0;
}

/* ── Framing lines (question / answer) ───────────── */

.wwa-framing {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--section-fg-muted);
    margin: 0 0 var(--space-sm);
}

.wwa-framing-quote {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--section-fg);
}

.wwa-framing--answer {
    font-size: var(--fs-lg);
    color: var(--section-fg);
    margin-bottom: 0;
}

.wwa-framing--answer .wwa-framing-quote {
    color: var(--section-accent);
}

/* ── Process chain ───────────────────────────────── */

.process-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: var(--space-2xl) 0 0;
}

.process-chain li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.process-chain li:not(:last-child)::after {
    content: "→";
    color: var(--section-accent);
    font-size: var(--fs-sm);
}

.process-step {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--section-border);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-fg-muted);
}

/* Alternate steps pick up the accent, as in the demo */
.process-chain li:nth-child(even) .process-step {
    border-color: var(--section-accent);
    color: var(--section-accent);
}

/* ── The Difference — bordered grid ──────────────── */

.difference-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--section-border);
    margin-block-start: var(--space-2xl);
}

.difference-item {
    padding: var(--space-xl);
    border-inline-end: 1px solid var(--section-border);
    border-block-end: 1px solid var(--section-border);
}

/* No divider on the last column */
.difference-item:nth-child(3n) {
    border-inline-end: none;
}

/* Full-width final item */
.difference-item--wide {
    grid-column: 1 / -1;
    border-inline-end: none;
}

/* Nothing below the last row */
.difference-item:last-child {
    border-block-end: none;
}

.difference-number {
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-sm);
    color: var(--section-accent);
    margin-block-end: var(--space-lg);
}

.difference-title {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: 1.25;
    color: var(--section-fg);
    margin: 0 0 var(--space-sm);
    text-wrap: balance;
}

.difference-body {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--section-fg-muted);
    margin: 0;
}

.section-actions {
    margin-block-start: var(--space-2xl);
}

/* ── What We Do — territory columns ──────────────── */

.territory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2xl);
    margin-block-start: var(--space-2xl);
}

.territory {
    border-block-start: 1px solid var(--section-fg);
    padding-block-start: var(--space-lg);
}

.territory-title {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--section-fg);
    margin: 0 0 var(--space-lg);
}

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

.territory-list li {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--section-fg-muted);
    padding-block: 6px;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.territory-list li:hover {
    color: var(--section-fg);
    transform: translateX(4px);
}

/* ── Closing CTA block ───────────────────────────── */

.territory-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    flex-wrap: wrap;
    margin-block-start: var(--space-3xl);
    padding: var(--space-xl);
    border: 1px solid var(--section-border);
    background: var(--section-surface);
}

.territory-cta-title {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--section-fg);
    margin: 0 0 var(--space-2xs);
}

.territory-cta-body {
    font-size: var(--fs-sm);
    color: var(--section-fg-muted);
    margin: 0;
}


/* ── Learning Journeys — two column ──────────────── */

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

.journey-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: none;
}

.journey-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-block: var(--space-sm);
    cursor: default;
}

.journey-list--dot .journey-item::before,
.journey-list--both .journey-item::before {
    content: "";
    inline-size: 9px;
    block-size: 9px;
    flex-shrink: 0;
    border: 1px solid var(--section-accent);
    rotate: 45deg;
    transition: background var(--transition-fast);
}

.journey-item:hover::before {
    background: var(--section-accent);
}

.journey-label {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    color: var(--section-fg);
    transition: color var(--transition-fast);
}

.journey-item:hover .journey-label {
    color: var(--section-accent);
}

.journey-item--active::before {
    background: var(--section-accent);
}

.journey-number {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-sm);
    color: var(--section-fg-faint);
    inline-size: 2.5ch;
    flex-shrink: 0;
}



.journey-item--active .journey-label {
    color: var(--section-accent);
}

/* ── Our Work ────────────────────────────────────── */

.work-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2xl);
}

.work-heading {
    margin-block-end: 0;
}

.work-note {
    flex: 0 0 auto;
    max-inline-size: 36ch;
    text-align: right;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--section-fg-muted);
    margin: 0;
}

.work-body {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-2xl);
    border-block-start: 1px solid var(--section-border);
}

.work-placeholder {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-lg);
    color: var(--section-fg-faint);
    margin: 0;
}

/* ── Client Portfolio ────────────────────────────── */

.portfolio-heading {
    max-inline-size: none;
    text-wrap: wrap;
    margin-block-end: var(--space-md);
}

.portfolio-note {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--section-fg-muted);
    max-inline-size: 60ch;
    margin: 0;
}

.portfolio-block {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-2xl);
    border-block-start: 1px solid var(--section-border);
}

.portfolio-pill-label {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-accent);
    margin: 0 0 var(--space-lg);
}

.portfolio-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}

.portfolio-pill {
    padding: 10px 18px;
    border: 1px solid var(--section-border);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--section-fg-muted);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.portfolio-pill:hover {
    color: var(--section-accent);
    border-color: var(--section-accent);
}

/* Nested testimonial slider — strip its own section chrome */

.portfolio-testimonials .section,
.portfolio-testimonials .testimonials {
    padding-block: 0;
    background: transparent;
}

.portfolio-testimonials .container {
    padding-inline: 0;
    max-inline-size: none;
}

/* =====================================================
   FOUNDERS
===================================================== */

.founders-section {
    --section-fg: var(--founders-fg);
    --section-fg-muted: var(--founders-fg-muted);
    --section-fg-faint: var(--founders-fg-faint);
    --section-border: var(--founders-border);
    --section-accent: var(--founders-accent);

    background: var(--founders-bg);
    color: var(--section-fg);
    overflow: hidden;
}


/* -----------------------------------------------------
   Introduction
----------------------------------------------------- */

.founders-intro {
    padding-block: clamp(4.5rem, 8vw, 7rem) 3.5rem;
}

.founders-label {
    margin-block-end: var(--space-xl);
}

.founders-label .section-label-text {
    color: var(--section-accent);
}

.founders-title {
    max-inline-size: 15ch;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--section-fg);
}

.founders-intro-text {
    max-inline-size: 52ch;
    margin: var(--space-xl) 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--section-fg-muted);
}


/* -----------------------------------------------------
   Founder Grid
----------------------------------------------------- */

.founders-list {
    padding-block: 0 clamp(5rem, 8vw, 7rem);
}

.founders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 5rem);
}


/* -----------------------------------------------------
   Founder Card
----------------------------------------------------- */

.founder-card {
    min-inline-size: 0;
}

.founder-card-media {
    position: relative;
    inline-size: 50%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--section-border);
    background: rgba(255, 255, 255, 0.04);
}

.founder-card-media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--transition-medium);
}

.founder-card:hover .founder-card-media img {
    transform: scale(1.02);
}

.founder-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    color: var(--section-fg-faint);
}

.founder-placeholder span {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 8vw, 7rem);
    font-style: italic;
}


/* -----------------------------------------------------
   Founder Information
----------------------------------------------------- */

.founder-card-content {
    padding-block-start: var(--space-xl);
}

.founder-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--section-fg);
}

.founder-role {
    margin: var(--space-xs) 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-accent);
}


/* -----------------------------------------------------
   Founder Quote
----------------------------------------------------- */

.founder-quote {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    max-inline-size: 48ch;
    margin: var(--space-xl) 0;
}

.founder-quote-mark {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 400;
    line-height: 0.7;
    color: var(--section-accent);
}

.founder-quote-text {
    padding-block-start: 0.2rem;
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
    font-style: italic;
    line-height: 1.55;
    color: var(--section-fg);
}


/* -----------------------------------------------------
   Founder Link
----------------------------------------------------- */

.founder-link {
    margin-block-start: var(--space-md);
}

.founder-link:hover,
.founder-link:focus-visible {
    background-color: var(--section-accent);
    border-color: var(--section-accent);
    color: #ffffff;
}

/* ── Statement band ──────────────────────────────── */

.statement-band {
    padding-block: var(--space-lg);
    padding-inline: var(--container-padding);
    text-align: center;
}

.statement-band--accent { background: var(--color-accent); }
.statement-band--dark   { background: var(--color-primary); }

.statement-band-text {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    line-height: 1.8;
    color: var(--color-text-on-dark);
    max-inline-size: 100ch;
    margin-inline: auto;
    text-wrap: balance;
}

/* ── Final CTA ───────────────────────────────────── */

.final-cta .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.final-cta-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-accent);
    margin: 0 0 var(--space-lg);
}

.final-cta-title {
    font-size: var(--fs-2xl);
    max-inline-size: none;
    text-wrap: balance;
    margin: 0 0 var(--space-md);
}

.final-cta-subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--section-fg-muted);
    margin: 0 0 var(--space-2xl);
}

.final-cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
}

.final-cta-email {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-fg-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.final-cta-email:hover {
    color: var(--section-accent);
}

/* ── Insights ────────────────────────────────────── */

.insight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xl);
    margin-block-start: var(--space-2xl);
    align-items: start;
}

.insight-media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin-block-end: var(--space-lg);
}

.insight-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: scale var(--transition-medium);
}

.insight:hover .insight-media img {
    scale: 1.03;
}

.insight-date {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-fg-faint);
    margin-block-end: var(--space-sm);
}

.insight-title {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 var(--space-sm);
    text-wrap: balance;
}

.insight-title a {
    color: var(--section-fg);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.insight-title a:hover {
    color: var(--section-accent);
}

.insight-excerpt {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--section-fg-muted);
    margin: 0;
}

/* ── Subordinate footer sections (related / keep reading) ── */

.section--related {
    padding-block: var(--space-3xl);
}

.section--related .insight-grid,
.section--related .programs-grid {
    margin-block-start: var(--space-xl);
}

.section--related .insight-title,
.section--related .program-card__body :is(h2, h3, h4) {
    font-size: var(--fs-base);
}

.section--related .insight-media {
    margin-block-end: var(--space-md);
}

.program-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.program-card__media--empty {
    background: var(--section-border, var(--color-border));
}

.program-excerpt {
    font-size: var(--fs-card-body);
    line-height: 1.7;
    color: var(--section-fg-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-block-end: 0;
}

.program-card__body :is(h2, h3, h4) {
    font-family: var(--font-heading);
    font-size: var(--fs-card-title);
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 var(--space-sm);
}

.program-card__body :is(h2, h3) a {
    color: var(--section-fg, var(--color-primary));
    text-decoration: none;
    transition: color var(--transition-fast);
}

.program-card__body :is(h2, h3) a:hover {
    color: var(--section-accent, var(--color-accent));
}

/* ── Program rows (child groups inside section 05) ── */

.program-row {
    margin-block-start: var(--space-3xl);
}

.program-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-block-end: var(--space-md);
    margin-block-end: var(--space-xl);
    border-block-end: 1px solid var(--section-border);
}

.program-row-title {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    color: var(--section-fg);
}

.program-row-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;

    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--section-fg-muted);
    transition: color var(--transition-fast);
}

.program-row-link:hover,
.program-row-link:focus-visible {
    color: var(--section-accent);
}

.program-row-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 22px;
    block-size: 22px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    transition: transform var(--transition-fast);
}

.program-row-link:hover .program-row-link-icon {
    transform: rotate(90deg);
}

/* Card count comes from the Customizer via --cols */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: var(--space-xl);
}

/* ── Word marquee ────────────────────────────────── */

.marquee {
    overflow: hidden;
    padding-block: var(--space-md);
}

.marquee--dark  { background: var(--color-primary); --marquee-fg: var(--color-text-on-dark); }
.marquee--light { background: var(--color-bg);      --marquee-fg: var(--color-primary); }
.marquee--tint  { background: var(--color-bg-tint); --marquee-fg: var(--color-primary); }

.marquee-track {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    inline-size: max-content;
    animation: marquee-scroll var(--marquee-speed, 40s) linear infinite;
    will-change: transform;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-item {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-lg);
    color: var(--marquee-fg);
    white-space: nowrap;
}

.marquee-sep {
    color: var(--color-accent);
    font-size: var(--fs-xs);
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* ── Showreel band ───────────────────────────────── */

.showreel {
    position: relative;
    min-block-size: 60svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-primary);
}

.showreel-media {
    position: absolute;
    inset: 0;
}

.showreel-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.showreel-overlay {
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    opacity: var(--showreel-overlay-opacity, 0.82);
}

.showreel-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-inline: var(--container-padding);
}

.showreel-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--space-lg);
}

.showreel-title {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-xl);
    color: var(--color-text-on-dark);
    margin: 0 0 var(--space-lg);
}

.showreel-caption {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted-on-dark);
    margin: 0;
}

/* ── Single post ─────────────────────────────────── */

/* ── Article layout ──────────────────────────────── */

.post-single {
    --measure: 65ch;
    --figure: 900px;
    overflow-x: clip;
}

.post-header {
    max-inline-size: var(--measure);
    margin-inline: auto;
}

.post-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);

    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-fg-faint);
    margin-block-end: var(--space-lg);
}

.post-meta-line a {
    color: var(--section-accent);
    text-decoration: none;
}

.post-meta-line a:hover {
    text-decoration: underline;
}

.post-meta-line > * + *::before {
    content: "·";
    margin-inline-end: var(--space-sm);
    color: var(--section-fg-faint);
}

.post-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--section-fg);
    margin: 0 0 var(--space-lg);
    text-wrap: balance;
}

.post-standfirst {
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--section-fg);
    margin: 0 0 var(--space-lg);
}

.post-byline {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-fg-muted);
    margin: 0;
    padding-block-end: var(--space-lg);
    border-block-end: 1px solid var(--section-border);
}

.post-media {
    max-inline-size: var(--figure);
    margin: var(--space-2xl) auto;
}

.post-media img {
    inline-size: 100%;
    block-size: auto;
    display: block;
}
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    max-inline-size: 68ch;
    margin: var(--space-3xl) auto 0;
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--section-border);
}

.post-tag {
    padding: 6px 14px;
    border: 1px solid var(--section-border);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--section-fg-muted);
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.post-tag:hover {
    color: var(--section-accent);
    border-color: var(--section-accent);
}

.insight-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── Generic page ────────────────────────────────── */

.page-single .post-header {
    margin-block-end: 0;
}

.page-single .post-media + .container .content-body {
    margin-block-start: 0;
}

/* A page with only a title shouldn't carry the media spacing */
.page-single .post-title:last-child {
    margin-block-end: 0;
}

/* ── Contact ─────────────────────────────────────── */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    margin-block-start: var(--space-2xl);
    align-items: start;
}

.contact-details {
    border-block-start: 1px solid var(--section-border);
}

.contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-md);
    padding-block: var(--space-lg);
    border-block-end: 1px solid var(--section-border);
}

.contact-row-label {
    flex: 0 0 6rem;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--section-accent);
}

.contact-row-value {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    color: var(--section-fg);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a.contact-row-value:hover {
    color: var(--section-accent);
}

.contact-form {
    padding: var(--space-xl);
    background: var(--section-surface);
    border: 1px solid var(--section-border);
}

.contact-form-note {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--section-fg-muted);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .nav-list > li > a::after,
    .nav-list .sub-menu,
    .nav-list .sub-menu a {
        transition: none;
    }
}

/* Article-flow pages — sections are parts of one document,
   not separate statements, so they need a tighter rhythm. */
.program-single,
.post-flow {
    --section-padding: var(--space-2xl);
}