/* ═══════════════════════════════════════════════════════════════════════════
   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: at this ratio each of the
       headline's three sentences lands on its own line instead of wrapping. */
    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 of the three sentences 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-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: rgba(255, 255, 255, 0.58);
}

/* The stage: IGLO art on a floating light panel with orbiting feature chips.
   The artwork's opaque white background multiplies into the panel gradient. */
.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);
    /* The source artwork carries ~15% of blank margin on every side; the
       panel clips it so the stack itself fills the frame. */
    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);
}
.hero__stage-panel img {
    width: 100%;
    mix-blend-mode: multiply;
    transform: scale(1.16);
}
.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); }
.float-chip--1 { top: 4%; left: -9%; }
.float-chip--2 { top: 46%; 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(-7px); }
    to   { transform: translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
    .float-chip { animation: none; }
    .hero-badge__dot { animation: none; }
}


/* Hero credibility card */
.cred-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8);
    display: grid;
    gap: var(--space-5);
}
.cred-card__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}
.cred-card__item svg {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 0.15em;
}
.cred-card__item strong { display: block; }
.cred-card__item span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ── 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 {
    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);
}

/* ── Program library grid ──────────────────────────────────────────────── */
.library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

/* ── 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); }
.package-card--featured {
    background:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(160, 188, 209, 0.28) 0%, transparent 65%),
        var(--color-primary-deep);
    border-color: var(--color-primary-deep);
    box-shadow: var(--shadow-lg);
}
.package-card--featured .package-card__label { color: var(--color-text-inverse); }
.package-card--featured .package-card__desc { color: rgba(255, 255, 255, 0.78); }
.package-card__flag {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.25rem 0.9rem;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.package-card__label { font-size: var(--text-xl); }
.package-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    flex-grow: 1;
    margin-inline: auto;
}
.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);
}

/* ── Delivery options ──────────────────────────────────────────────────── */
.delivery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}
.delivery-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}
.delivery-card__icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.delivery-card h3 { font-size: var(--text-lg); }
.delivery-card p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.delivery-card--premium {
    background: var(--color-primary-deep);
    border-color: var(--color-primary-deep);
}
.delivery-card--premium h3 { color: var(--color-text-inverse); }
.delivery-card--premium p { color: rgba(255, 255, 255, 0.8); }
.delivery-card--premium .delivery-card__icon {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-accent);
}
/* Pulled out of the flow and pinned to the corner. In flow it pushed this
   card's icon and heading 42px lower than the other three, so nothing in the
   row lined up — the cards were always the same height, but read as uneven. */
.delivery-card__badge {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── 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); }
.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);
}

/* ── 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%; }

.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(4, 1fr);
    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 { 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);
}