/* ═══════════════════════════════════════════════════════════════════════════
   Jeddy Wellness — Page sections
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero (home) — dark, cinematic ─────────────────────────────────────── */
.hero {
    position: relative;
    padding-top: clamp(3.5rem, 7vw, 6rem);
    background:
        radial-gradient(ellipse 55% 70% at 80% 12%, rgba(0, 93, 158, 0.55) 0%, transparent 68%),
        radial-gradient(ellipse 45% 55% at 2% 100%, rgba(253, 112, 60, 0.13) 0%, transparent 60%),
        var(--color-primary-deep);
    color: var(--color-text-inverse);
    overflow: hidden;
}
/* Faint dot grid, fading toward the stage side */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(160, 188, 209, 0.55) 1px, transparent 1.5px);
    background-size: 28px 28px;
    opacity: 0.22;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 30%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 80% at 85% 30%, #000 0%, transparent 72%);
    pointer-events: none;
}
.hero .container { position: relative; }
.hero__inner {
    display: grid;
    /* The copy column is deliberately the wider one so the headline's sentences
       each land on their own line instead of wrapping mid-phrase. */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(var(--space-8), 4vw, var(--space-16));
    align-items: center;
}
.hero__copy > * + * { margin-top: var(--space-6); }
.hero h1 {
    font-size: clamp(2.25rem, 3.6vw, 3rem);
    color: var(--color-text-inverse);
    /* Each sentence owns a line at every width — that cadence is the headline's
       structure, so it must not re-balance on resize. */
    text-wrap: initial;
}
.hero h1 span { display: block; }
/* Gradient-orange emphasis inside the headline — AA at display sizes on navy */
.u-grad-accent {
    background: linear-gradient(94deg, var(--color-accent-light) 10%, var(--color-accent) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-steel);
}
.hero-badge__dot {
    width: 8px; height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    box-shadow: 0 0 0 0 rgba(253, 112, 60, 0.55);
    animation: badge-pulse 2.4s ease-out infinite;
}
@keyframes badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(253, 112, 60, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(253, 112, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(253, 112, 60, 0); }
}
.hero__sub {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.72);
    max-width: 52ch;
}
.hero__sub strong {
    color: var(--color-text-inverse);
    font-weight: var(--weight-semibold);
}
.hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.hero .cta-microcopy {
    margin-top: var(--space-4);
    color: rgba(255, 255, 255, 0.55);
}

/* Stat row anchoring the hero — a supporting strip, not a second headline */
.hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-top: clamp(var(--space-10), 4vw, var(--space-16));
    padding-block: var(--space-6) var(--space-10);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.stat__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-text-inverse);
    letter-spacing: -0.02em;
}
.stat__num em {
    font-style: normal;
    color: var(--color-accent);
}
.stat__label {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-text-inverse);
}
.stat__sub {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: rgba(255, 255, 255, 0.55);
}

/* The stage: "Our Focus" art on a floating light panel with orbiting feature
   chips. The artwork's opaque white background multiplies into the panel
   gradient. The chips sit in the art's own whitespace — above the top-left
   pill, in the gap right of the centre circle, below the bottom-left pill. */
.hero__stage {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 560px;
}
.hero__stage-panel {
    background: linear-gradient(168deg, #FFFFFF 30%, var(--color-primary-soft));
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    overflow: hidden;
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.10),
        0 0 90px rgba(0, 93, 158, 0.25);
}
/* No zoom: the old IGLO art needed scale(1.16) to crop ~15% blank margins,
   but this art's pills run to within ~7.5% of the side edges. */
.hero__stage-panel img {
    width: 100%;
    mix-blend-mode: multiply;
}
.float-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem 1.05rem;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    box-shadow: var(--shadow-xl);
    animation: chip-float 7s ease-in-out infinite alternate;
}
.float-chip svg { color: var(--color-primary); }
/* Positions measured against the art's pills (headless-Chrome probe,
   1100–1440px, animation frozen) — the chips must only ever float over
   whitespace. #1 straddles the panel's top edge like #3 straddles the bottom;
   #2 is centred in the ~60px gap between the two right-hand pills. The float
   travel is ±5px because #2's gap cannot absorb more. */
.float-chip--1 { top: -1%; left: -9%; }
.float-chip--2 { top: 41.5%; right: -7%; animation-delay: -2.6s; }
.float-chip--3 { bottom: -5%; left: 6%; animation-delay: -4.8s; }
.float-chip--3 svg { color: var(--color-accent-text); }
@keyframes chip-float {
    from { transform: translateY(-5px); }
    to   { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
    .float-chip { animation: none; }
    .hero-badge__dot { animation: none; }
}


/* ── Page hero (interior pages) ────────────────────────────────────────── */
.page-hero {
    padding-block: var(--space-16) var(--space-12);
    background:
        radial-gradient(ellipse 55% 60% at 90% 0%, var(--color-primary-soft) 0%, transparent 60%),
        var(--color-bg);
}
.page-hero h1 { margin-block: var(--space-3) var(--space-4); }
.page-hero__sub {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 62ch;
}
.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

/* ── The Offer ─────────────────────────────────────────────────────────── */
.offer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: center;
}
.offer__copy p:not(.section-label) {  /* see .section-head p in components.css */
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
}
/* The kit card. Deliberately a single flat card — an earlier stacked-sheets
   treatment read as a swipeable slider, which it isn't. */
.includes-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-10);
    box-shadow: var(--shadow-md);
}
.includes-card__title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

/* ── What We Do — the four conditions (client copy) ────────────────────── */
.applied__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(var(--space-8), 5vw, var(--space-16));
    align-items: center;
}
.applied__copy p:not(.section-label) {
    margin-top: var(--space-4);
    color: var(--color-text-secondary);
}
.applied__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}
/* Each condition leads in full ink; what it covers reads as secondary. */
.applied__card .checklist li { font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.applied__card .checklist strong { font-weight: var(--weight-semibold); color: var(--color-text); }
/* A full sentence, not a label — so sentence case, not the tracked uppercase
   the includes-card title uses. */
.applied__card-intro {
    margin-bottom: var(--space-5);
    max-width: none;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.applied__closing {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    max-width: none;
}
/* Second closing line follows the first — one rule between them is enough */
.applied__closing--tight {
    margin-top: var(--space-3);
    padding-top: 0;
    border-top: 0;
}

/* ── Product walkthrough video ─────────────────────────────────────────── */
.video-frame {
    max-width: 900px;
    margin-inline: auto;
}
.video-frame__facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 60% 70% at 50% 40%, rgba(0, 93, 158, 0.30) 0%, transparent 70%),
        var(--color-primary-deep);
    box-shadow: var(--shadow-xl);
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.video-frame__facade:hover { transform: translateY(-3px); }
.video-frame__poster {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.video-frame__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 84px; height: 84px;
    border-radius: var(--radius-full);
    background: var(--color-cta);
    color: var(--color-on-cta);
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.45);
    transition: transform var(--transition-fast);
}
.video-frame__facade:hover .video-frame__play { transform: translate(-50%, -50%) scale(1.06); }
.video-frame__duration {
    position: absolute;
    bottom: var(--space-5);
    right: var(--space-5);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.55);
    color: #FFF;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
/* The real player, swapped in on click */
.video-frame video,
.video-frame iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: block;
}

/* ── Program library grid ──────────────────────────────────────────────── */
.library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
/* Ten programs leave two empty cells in the final row of a 3-column grid.
   The ghost card spans both so the grid closes flush. */
.library-grid .program-card--ghost { grid-column: span 2; }

/* "Not sure where to start?" — moved out of the grid at the client's request
   so the library reads as a list of programs and the CTA reads as a CTA. */
.library-cta {
    max-width: 640px;
    margin: clamp(var(--space-10), 5vw, var(--space-16)) auto 0;
    padding-top: clamp(var(--space-8), 4vw, var(--space-12));
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.library-cta h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.library-cta p {
    margin-inline: auto;
    margin-bottom: var(--space-6);
    color: var(--color-text-secondary);
}

/* Audience marker — only set where a program is not aimed at a workplace
   audience (currently Student Well-Being alone). */
.program-card__audience {
    align-self: flex-start;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-full);
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.chip--audience {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
}

/* Delivery options, reduced from a card section to a single line under the
   How It Works stepper. */
.delivery-line {
    max-width: none;
    margin-top: clamp(var(--space-8), 4vw, var(--space-12));
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.delivery-line strong { color: var(--color-text); }

/* ── Packages ──────────────────────────────────────────────────────────── */
.package-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}
.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-6) var(--space-6);
    text-align: center;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.package-card:hover { border-color: var(--color-steel); box-shadow: var(--shadow-md); }
/* Tier size as a numeral — the only thing besides the client's own label that
   these cards are allowed to assert. No descriptions, no "most popular" flag:
   her doc defines neither, and inventing them speaks for her. */
.package-card__count {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-steel);
    letter-spacing: -0.02em;
}
.package-card__label {
    font-size: var(--text-lg);
    flex-grow: 1;
}
.package-note {
    text-align: center;
    margin-top: var(--space-8);
}
.package-note p {
    margin-inline: auto;
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
}

/* ── Keynote band ──────────────────────────────────────────────────────── */
.keynote-band {
    position: relative;
    padding-block: var(--space-20);
    background:
        radial-gradient(ellipse 45% 70% at 88% 15%, rgba(0, 93, 158, 0.35) 0%, transparent 65%),
        radial-gradient(ellipse 35% 55% at 5% 95%, rgba(253, 112, 60, 0.10) 0%, transparent 60%),
        var(--color-primary-deep);
    overflow: hidden;
}
.keynote-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: center;
}
.keynote-band .chip-row { margin-block: var(--space-6); }
.keynote-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.portrait-frame {
    position: relative;
    justify-self: center;
    width: min(320px, 100%);
    margin: 0;
}
/* Offset accent frame behind the photo */
.portrait-frame::before {
    content: '';
    position: absolute;
    top: -14px; left: -14px;
    right: 14px; bottom: 26px;
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-lg);
    opacity: 0.85;
    pointer-events: none;
}
.keynote-band__portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}
.portrait-frame figcaption {
    margin-top: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
}
.portrait-frame figcaption strong { color: var(--color-text-inverse); }
/* Light-section variant (keynotes page) */
.section--surface .portrait-frame figcaption { color: var(--color-text-secondary); }
.section--surface .portrait-frame figcaption strong { color: var(--color-text); }

/* ── Final CTA — contained panel, never full-bleed ─────────────────────── */
/* The section carries no colour of its own — it continues whatever section
   sits above it, so the dark panel floats rather than introducing a band. */
.cta-banner {
    padding-block: clamp(4rem, 7vw, 6rem);
    background: var(--color-bg-alt);
}
.cta-banner--paper   { background: var(--color-bg); }
.cta-banner--surface { background: var(--color-surface); }
.cta-banner__card {
    text-align: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-8);
    background:
        radial-gradient(ellipse 55% 85% at 50% -15%, rgba(0, 93, 158, 0.45) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 94% 105%, rgba(253, 112, 60, 0.12) 0%, transparent 60%),
        var(--color-primary-deep);
    box-shadow: var(--shadow-xl);
}
.cta-banner h2 {
    /* Wide enough that "well-being" never breaks at its own hyphen */
    max-width: 30ch;
    margin-inline: auto;
    margin-bottom: var(--space-4);
}
/* Scoped to the description only — a bare `.cta-banner p` also caught the
   microcopy and blew it up to --text-lg. */
.cta-banner__text {
    max-width: 54ch;
    margin-inline: auto;
    margin-bottom: var(--space-8);
    font-size: var(--text-lg);
}

/* ── /programs — detail sections ───────────────────────────────────────── */
.program-detail {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: var(--space-6);
    padding: var(--space-10) 0;
    border-top: 1px solid var(--color-border);
    align-items: start;
}
.program-detail:last-of-type { border-bottom: 1px solid var(--color-border); }
/* Closing "library keeps growing" row — same rhythm, dashed and muted so it
   reads as an open-ended entry rather than an eleventh program. */
.program-detail--note {
    border-top-style: dashed;
    border-bottom-style: dashed;
}
.program-detail--note h3 { color: var(--color-text-secondary); }
.program-detail--note .program-detail__num {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px dashed var(--color-steel);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
}
.program-detail__num {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-steel);
    line-height: 1;
    padding-top: 0.2rem;
}
.program-detail h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.program-detail__long { color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.program-detail__cta { padding-top: 0.2rem; }

/* ── /team ─────────────────────────────────────────────────────────────────
   Sumana carries the brand, so she gets a dedicated feature block rather than
   being row one of three identical alternating rows. Hannah and Jason then sit
   as an equal pair, and the ambassadors resolve into a real grid instead of a
   loose float of pills.
   ───────────────────────────────────────────────────────────────────────── */
.founder {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(var(--space-8), 5vw, var(--space-16));
    align-items: center;
}
.founder__photo {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 360px;
}
.founder__photo::before {
    content: '';
    position: absolute;
    top: -16px; left: -16px; right: 16px; bottom: 16px;
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-lg);
    pointer-events: none;
}
.founder__photo img {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}
.founder__name { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.founder__role {
    margin-block: var(--space-2) var(--space-5);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent-text);
}
.founder__bio { color: var(--color-text-secondary); font-size: var(--text-lg); }
.founder__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block: var(--space-6);
}
.founder__facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.founder__facts li svg { color: var(--color-primary); }

/* Hannah + Jason — equal pair.
   Both source headshots are square (400² and 800²). An earlier full-height
   photo panel forced them into a 0.39 aspect strip, so object-fit:cover threw
   away ~61% of each image — not stretched, but badly over-cropped. The avatar
   is now locked to the source's own 1:1, sitting in a tinted header band, and
   the bio gets the card's full width instead of a cramped column. */
.team-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}
.team-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.team-card:hover {
    border-color: var(--color-steel);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
.team-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-8);
    background: var(--color-primary-soft);
    border-bottom: 1px solid var(--color-border);
}
.team-card__photo {
    width: 104px;
    aspect-ratio: 1;          /* matches the source exactly — no crop at all */
    height: auto;
    flex-shrink: 0;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radius-full);
    border: 3px solid var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.team-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8);
    flex-grow: 1;
}
.team-card__name { font-size: var(--text-xl); }
/* A plain label, not a pill: these roles are long enough to wrap, and a
   two-line rounded pill looks broken. Matches .founder__role. */
.team-card__role {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}
.team-card__bio {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    flex-grow: 1;
}
.team-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    width: 100%;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

/* Ambassadors */
.ambassadors__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--space-8), 5vw, var(--space-12));
    align-items: center;
}
.ambassadors__photo { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.ambassadors__tagline {
    margin: clamp(var(--space-10), 5vw, var(--space-16)) auto var(--space-6);
    text-align: center;
    font-style: italic;
    color: var(--color-text-secondary);
}
.ambassador-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
.ambassador-grid a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    transition: all var(--transition-fast);
}
.ambassador-grid a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.ambassador-grid__avatar {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
}
.ambassador-grid__name { flex-grow: 1; }
.ambassador-grid a > svg { color: var(--color-steel); flex-shrink: 0; }
.ambassador-grid a:hover > svg { color: var(--color-primary); }

.join-card {
    margin-top: var(--space-10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-10);
    box-shadow: var(--shadow-sm);
}
.join-card__copy { flex: 1 1 26rem; }
.join-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
/* max-width:none — the global p{max-width:68ch} is only ~476px at this font
   size, so the line broke in half and left the right side of the card empty. */
.join-card p {
    max-width: none;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
.join-card__note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-success);
}

/* ── /media — press clippings ──────────────────────────────────────────────
   The screenshots are of the articles as they ran, so they are framed like
   physical clippings: a slight tilt, a paper edge, and the readable headline
   set in our own type beneath. The shot supplies proof; the type carries the
   information.
   ───────────────────────────────────────────────────────────────────────── */
.clip__outlet {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}
.clip__rule {
    width: 26px; height: 2px;
    border-radius: 2px;
    background: var(--color-accent);
}
.clip__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
}

/* Lead clipping */
.clip-lead {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(var(--space-8), 5vw, var(--space-16));
    align-items: center;
    color: var(--color-text);
}
.clip-lead__shot {
    position: relative;
    display: block;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    transform: rotate(-1.5deg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.clip-lead:hover .clip-lead__shot {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.clip-lead__shot img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top;
    border-radius: 2px;
}
.clip-lead__title {
    display: block;
    margin-block: var(--space-4) var(--space-4);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
}
.clip-lead__note {
    display: block;
    margin-bottom: var(--space-5);
    color: var(--color-text-secondary);
}

/* Clipping wall */
.clip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}
.clip-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.clip-card:hover {
    color: var(--color-text);
    border-color: var(--color-steel);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.clip-card__shot {
    display: block;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-paper-alt);
    overflow: hidden;
}
.clip-card__shot img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: top;
    filter: saturate(0.85);
    transition: transform var(--transition-base), filter var(--transition-base);
}
.clip-card:hover .clip-card__shot img { transform: scale(1.04); filter: saturate(1); }
.clip-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    flex-grow: 1;
}
.clip-card__title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    flex-grow: 1;
}

/* Recognition */
.recognition-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.recognition-card:hover {
    color: var(--color-text);
    border-color: var(--color-steel);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.recognition-card__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.recognition-card__body { display: flex; flex-direction: column; gap: var(--space-3); }
.recognition-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

/* ── /podcast — Workplace Wellness Hour ──────────────────────────────────
   Deliberately plain (client: "keep it like the rest of the pages"): the page
   reuses .offer__inner / .includes-card / .team-cards; only the stat line and
   the watch card's text need rules of their own. */
.podcast-stat {
    max-width: none;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.podcast-stat__num {
    font-size: var(--text-5xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-primary);
}
.podcast-stat__sub {
    max-width: none;
    margin-top: var(--space-2);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}
/* Facts, not ticks — so the icons take the brand blue, not checklist green. */
.podcast-facts li { font-weight: var(--weight-regular); }
.podcast-facts li svg { color: var(--color-primary); }
.podcast-watch__title { font-size: var(--text-xl); }
.podcast-watch__text {
    max-width: none;
    margin-block: var(--space-3) var(--space-6);
    color: var(--color-text-secondary);
}


/* ── Blog (design reference for the WordPress theme) ──────────────────────── */
.blog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border);
}
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Search — get_search_form() in the theme */
.blog-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 22rem;
}
.blog-search__icon {
    position: absolute;
    left: var(--space-4);
    display: grid;
    place-items: center;
    color: var(--color-text-secondary);
    pointer-events: none;
}
.blog-search input {
    width: 100%;
    padding: 0.7rem 5.5rem 0.7rem 2.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.blog-search input::-webkit-search-cancel-button { cursor: pointer; }
.blog-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.blog-search__submit {
    position: absolute;
    right: 5px;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: background var(--transition-fast);
}
.blog-search__submit:hover { background: var(--color-primary-dark); }
.filter-pill {
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
.filter-pill:hover { border-color: var(--color-steel); color: var(--color-primary); }
.filter-pill.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Post thumbnails — gradient stand-ins until WP supplies featured images */
.post-thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(140deg, var(--color-primary), var(--color-primary-deep));
}
.post-thumb--2 { background: linear-gradient(140deg, #2F6F9F, var(--color-primary-deep)); }
.post-thumb--3 { background: linear-gradient(140deg, var(--color-accent-dark), #8C3410); }
.post-thumb--4 { background: linear-gradient(140deg, var(--color-steel), var(--color-primary)); }
.post-thumb--lg { aspect-ratio: 4 / 3; height: 100%; }
/* A real featured image (WordPress the_post_thumbnail) fills the frame at the
   frame's ratio instead of its own — so every card in a row stays one height. */
.post-thumb { overflow: hidden; }
.post-thumb > img {
    grid-area: 1 / 1;
    place-self: stretch;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--color-text);
    margin-bottom: var(--space-10);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.post-featured:hover { color: var(--color-text); border-color: var(--color-steel); box-shadow: var(--shadow-lg); }
.post-featured__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: clamp(var(--space-8), 4vw, var(--space-12));
}
.post-featured__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* blog list: 3-up (2026-10-19) */
    gap: var(--space-5);
}
.post-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.post-card:hover {
    color: var(--color-text);
    border-color: var(--color-steel);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.post-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    flex-grow: 1;
}
.post-card__cat {
    align-self: flex-start;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.post-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}
.post-card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    flex-grow: 1;
}
.post-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
}
.post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-12);
}
.pagination__item {
    display: grid;
    place-items: center;
    min-width: 42px; height: 42px;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
a.pagination__item:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__item.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.pagination__next { display: inline-flex; gap: var(--space-2); }
.pagination__gap { color: var(--color-text-secondary); padding-inline: var(--space-1); }

/* ── Single post ──────────────────────────────────────────────────────────── */
.article-header { max-width: 46rem; }
.article-header h1 {
    margin-block: var(--space-4) var(--space-5);
    font-size: clamp(2rem, 4vw, 3rem);
}
.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.article-meta__avatar {
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    object-position: top;
}
.article-meta strong { color: var(--color-text); }

.article-hero-img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}

/* Body typography — this is what the WP theme's content styles must match */
.article-body {
    max-width: 44rem;
    margin-inline: auto;
    font-size: 1.0625rem;
    line-height: var(--leading-relaxed);
}
.article-body > * + * { margin-top: var(--space-6); }
.article-body p { max-width: none; color: var(--color-ink); }
.article-body h2 {
    margin-top: var(--space-12);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}
.article-body h3 {
    margin-top: var(--space-10);
    font-size: var(--text-xl);
}
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: var(--space-6); }
.article-body li + li { margin-top: var(--space-3); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li::marker { color: var(--color-steel); }
.article-body blockquote {
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    border-left: 3px solid var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--color-primary-dark);
}
.article-body figure { margin-block: var(--space-10); }
.article-body figure img { width: 100%; border-radius: var(--radius-md); }
.article-body figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: center;
}
.article-callout {
    padding: var(--space-6) var(--space-8);
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
}
.article-callout strong { display: block; margin-bottom: var(--space-2); color: var(--color-primary-dark); }

.article-share {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 44rem;
    margin: var(--space-12) auto 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.article-share a {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
.article-share a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.author-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    max-width: 44rem;
    margin: var(--space-12) auto 0;
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
}
.author-card__photo {
    width: 88px; height: 88px;
    border-radius: var(--radius-full);
    object-fit: cover;
    object-position: top;
}
.author-card__name { font-size: var(--text-lg); }
.author-card__role {
    margin-block: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent-text);
}
.author-card p:not(.author-card__role) { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ── /contact ──────────────────────────────────────────────────────────── */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-16);
    align-items: start;
}
.contact-aside { display: grid; gap: var(--space-6); }
.contact-aside .card p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.contact-aside .card h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.contact-form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-10);
    box-shadow: var(--shadow-md);
}

/* ── 404 / thank-you ───────────────────────────────────────────────────── */
.error-hero {
    text-align: center;
    padding-block: var(--space-24);
}
.error-hero h1 { margin-bottom: var(--space-4); }
.error-hero p {
    margin-inline: auto;
    margin-bottom: var(--space-8);
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}
.error-hero__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}