@charset "UTF-8";
/**
 * Page builder block styles.
 *
 * One section per block, keyed by the `layout-{name}` class on the outer
 * <section>. The `bg-{key}` background classes live in css/base.css; this
 * file deals with layout and component styling specific to each block.
 *
 * Design tokens (--color-*, --space-*, --font-*) are defined in
 * css/base.css under :root. They're declared in Phase 05; hex values
 * tune later. References here assume those tokens exist.
 */

/* ============================================================
   Hero block (parts/blocks/hero.php)
   ============================================================ */

.layout-hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--space-xxl, 8rem) 0 var(--space-xl, 6rem);
}

.layout-hero.bg-teal-dark,
.layout-hero.bg-teal-deep {
    background: linear-gradient(180deg, var(--color-teal-darker, #051C23) 0%, var(--color-teal-dark, #082932) 100%);
    color: var(--color-white, #ffffff);
}

.layout-hero::before,
.layout-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.layout-hero::before {
    top: -200px;
    right: -200px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(122, 197, 205, 0.18), transparent 60%);
}

.layout-hero::after {
    bottom: -300px;
    left: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(91, 160, 171, 0.16), transparent 60%);
}

/* Light backgrounds: drop the gradient and decorative orbs. */
.layout-hero.bg-cream,
.layout-hero.bg-pale,
.layout-hero.bg-white {
    color: inherit;
}

.layout-hero.bg-cream::before,
.layout-hero.bg-cream::after,
.layout-hero.bg-pale::before,
.layout-hero.bg-pale::after,
.layout-hero.bg-white::before,
.layout-hero.bg-white::after {
    display: none;
}

.tif-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-lg, 4rem);
    align-items: center;
}

.tif-hero__grid--has-card {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-xl, 6rem);
}

.tif-hero__grid--solo {
    grid-template-columns: 1fr;
    max-width: 920px;
}

.tif-hero__lead {
    max-width: 720px;
}

/* Hero eyebrow. Authored as a <pre> at the top of the Content WYSIWYG (the
   site-wide convention, like .tif-section-intro pre). The <pre> defaults
   (monospace, preserved whitespace, padding) are reset here. `.tif-hero__eyebrow`
   is kept as a transitional selector for any content not yet on the <pre> form. */
.tif-hero__content pre,
.tif-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 var(--space-md, 2rem);
    padding: 0;
    overflow: visible;
    white-space: normal;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-accent, #7ac5cd);
}

.tif-hero__content pre::before,
.tif-hero__eyebrow::before {
    content: "";
    width: 40px;
    height: 1px;
    background: currentColor;
}

.tif-hero__content {
    margin-bottom: var(--space-md, 2rem);
}

.tif-hero__content h1,
.tif-hero__content h2 {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-md, 2rem);
}

.tif-hero__content h1 em,
.tif-hero__content h2 em {
    font-style: italic;
    color: var(--color-teal-accent, #7ac5cd);
    position: relative;
    display: inline-block;
}

/* Fading accent underline on the emphasised hero word (mockup .hero h1 em::after).
   currentColor lets it follow the em colour: accent on dark heroes, teal-deep on light. */
.tif-hero__content h1 em::after,
.tif-hero__content h2 em::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.04em;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, currentColor, transparent);
}

.layout-hero.bg-cream .tif-hero__content h1 em,
.layout-hero.bg-pale .tif-hero__content h1 em,
.layout-hero.bg-white .tif-hero__content h1 em {
    color: var(--color-teal-deep, #0a2a2f);
}

.tif-hero__content p {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 60ch;
    margin: 0 0 var(--space-sm, 1rem);
}

.layout-hero.bg-teal-dark .tif-hero__content p,
.layout-hero.bg-teal-deep .tif-hero__content p {
    opacity: 0.85;
}

.tif-hero__lead .tif-buttons {
    margin-top: var(--space-md, 2rem);
}

/* Stat card */
.tif-hero-card {
    position: relative;
    padding: 44px 36px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(122, 197, 205, 0.22);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.layout-hero.bg-cream .tif-hero-card,
.layout-hero.bg-pale .tif-hero-card,
.layout-hero.bg-white .tif-hero-card {
    background: var(--color-white, #ffffff);
    border-color: rgba(10, 42, 47, 0.15);
    box-shadow: 0 30px 60px -30px rgba(10, 42, 47, 0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.tif-hero-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 80px;
    height: 4px;
    background: var(--color-teal-accent, #7ac5cd);
}

.tif-hero-card__label {
    font-size: 0.625rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 18px;
    color: var(--color-teal-accent, #7ac5cd);
}

.tif-hero-card__headline {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 4rem;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 12px;
}

.tif-hero-card__desc {
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 24px;
    opacity: 0.85;
}

.tif-hero-card__divider {
    height: 1px;
    margin: 22px 0;
    background: rgba(122, 197, 205, 0.2);
}

.layout-hero.bg-cream .tif-hero-card__divider,
.layout-hero.bg-pale .tif-hero-card__divider,
.layout-hero.bg-white .tif-hero-card__divider {
    background: rgba(10, 42, 47, 0.12);
}

.tif-hero-card__stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.tif-hero-card__stat-num {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-teal-accent, #7ac5cd);
}

.layout-hero.bg-cream .tif-hero-card__stat-num,
.layout-hero.bg-pale .tif-hero-card__stat-num,
.layout-hero.bg-white .tif-hero-card__stat-num {
    color: var(--color-teal-deep, #0a2a2f);
}

.tif-hero-card__stat-lbl {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    max-width: 140px;
    text-align: right;
    opacity: 0.75;
}

/* Scroll cue — pinned to the bottom of the hero, pulsing line (mockup .scroll-cue).
   Colour inherits from the hero (white on dark, navy on light). */
.tif-hero__scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.6;
}

.tif-hero__scroll-line {
    width: 1px;
    height: 36px;
    background: var(--color-teal-accent, #7ac5cd);
    transform-origin: top;
    animation: tif-scroll-pulse 2s ease-in-out infinite;
}

@keyframes tif-scroll-pulse {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50%      { transform: scaleY(0.4); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .tif-hero__scroll-line { animation: none; }
}

/* Full-width above/below WYSIWYG slots (shared by every block) */
.full-above,
.full-below {
    width: 100%;
}

/* Tablet and below: collapse to single column. */
@media (max-width: 1024px) {
    .layout-hero {
        min-height: 0;
        /* Extra bottom room so the centred scroll cue clears the stacked stat card. */
        padding: var(--space-xl, 6rem) 0 9rem;
    }

    .tif-hero__grid--has-card {
        grid-template-columns: 1fr;
        gap: var(--space-lg, 4rem);
    }

    .tif-hero-card {
        padding: 36px 28px;
    }
}

@media (max-width: 768px) {
    .layout-hero {
        padding: var(--space-lg, 4rem) 0 var(--space-md, 2rem);
    }

    .tif-hero__content h1,
    .tif-hero__content h2 {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .tif-hero-card__headline {
        font-size: 3rem;
    }

    /* The hero is no longer full-height on mobile, so the pinned cue would
       collide with content — drop it. */
    .tif-hero__scroll {
        display: none;
    }
}

/* ============================================================
   Shared section intro  (eyebrow · title · lede)

   The recurring "section header" pattern from the mockup
   (.section-eyebrow / h2.section-title / p.section-lede). Blocks render
   it as plain WYSIWYG, so we reproduce the mockup component styles via
   element selectors scoped to a `.tif-section-intro` marker class that
   every intro-bearing block carries.

   HTML conventions (authored in the block WYSIWYG):
     eyebrow      → <pre>…</pre>   (a native element that survives the
                    TinyMCE Visual⇄Text round-trip, unlike a custom class)
     blue phrase  → <em>…</em>
     lede         → <p>…</p>
   `.block-eyebrow` is kept as a transitional selector so content not yet
   converted to <pre> still picks up the eyebrow styling.

   Colour is inherited from the section (navy on light, white on dark) so
   no per-context title colour is needed — only the eyebrow and the <em>
   accent flip between light and dark backgrounds.
   ============================================================ */

.tif-section-intro pre,
.tif-section-intro .block-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    padding: 0;
    overflow: visible;
    white-space: normal;
    font-family: var(--font-sans);
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-teal-deep);
}

.tif-section-intro pre::before,
.tif-section-intro .block-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: currentColor;
}

/* h1 and h2 share the section-title look. A page rendered from the builder
   (no Hero) opens its first section with an <h1> for a correct document outline;
   the mockup draws every section title at h2 size, so h1 matches h2 here. The
   Hero's large <h1> is the exception — it lives in .tif-hero, not in a
   .tif-section-intro, so it keeps its own scale. */
.tif-section-intro h1,
.tif-section-intro h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    max-width: 780px;
    margin: 0 0 26px;
}

.tif-section-intro h1 em,
.tif-section-intro h2 em {
    font-style: italic;
    color: var(--color-teal-deep);
}

.tif-section-intro p {
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 720px;
    margin: 0;
    opacity: 0.85;
}

/* Dark-background sections: eyebrow + title accent lift to the lighter teals
   (mockup .dark/.deep overrides). Title text itself inherits white. */
.bg-teal-dark .tif-section-intro pre,
.bg-teal-deep .tif-section-intro pre,
.bg-teal-dark .tif-section-intro .block-eyebrow,
.bg-teal-deep .tif-section-intro .block-eyebrow {
    color: var(--color-teal-light);
}

.bg-teal-dark .tif-section-intro h1 em,
.bg-teal-deep .tif-section-intro h1 em,
.bg-teal-dark .tif-section-intro h2 em,
.bg-teal-deep .tif-section-intro h2 em {
    color: var(--color-teal-accent);
}

/* ============================================================
   Common content blocks (Phase 11)
   single_column · two_column · three_column · trio_grid

   All four sit at natural height with vertical rhythm from the
   spacing scale (the Hero is the only block that forces 100vh).
   An editor's "Override padding" inline style wins over these
   defaults. Horizontal gutters come from the inner wrapper, not
   the section, so the bg colour still spans full width.
   ============================================================ */

.layout-single_column,
.layout-two_column,
.layout-three_column,
.layout-trio_grid,
.layout-code_grid,
.layout-contact_grid {
    padding-block: clamp(var(--space-lg, 4rem), 7vw, var(--space-xl, 6rem));
}

/* --- Single column ------------------------------------------ */

/* The single-column block holds the mockup's left-aligned section header
   (eyebrow / title / lede), so its content carries .tif-section-intro and
   renders left-aligned and full-width within the wrapper. The per-element
   max-widths (title 780px, lede 720px) come from .tif-section-intro; the
   pull-quote below spans the full wrapper. */
.tif-single-col__content {
    text-align: left;
}

/* Centred variant — the mockup's centred call-to-action sections (Members
   "Join the Forum", mockup .container[text-align:center]). Toggled by the
   `align_center` field → .tif-single-col--centered on the wrapper. Centres the
   eyebrow, title, lede and the buttons row; the per-element max-widths are kept
   and centred with auto side margins (mockup .section-title / .section-lede
   margin-left/right:auto). */
.tif-single-col--centered {
    text-align: center;
}

.tif-single-col--centered .tif-single-col__content {
    text-align: center;
}

.tif-single-col--centered .tif-section-intro pre,
.tif-single-col--centered .tif-section-intro .block-eyebrow {
    justify-content: center;
}

.tif-single-col--centered .tif-section-intro h1,
.tif-single-col--centered .tif-section-intro h2,
.tif-single-col--centered .tif-section-intro p {
    margin-left: auto;
    margin-right: auto;
}

.tif-single-col--centered .tif-buttons {
    justify-content: center;
}

/* Pull-quote — a WYSIWYG <blockquote> inside single-column content renders
   as the mockup's .pull-quote (Who We Are intro, Engagements page). */
.tif-single-col__content blockquote {
    position: relative;
    margin: 60px 0 0;
    padding: 50px 60px;
    background: var(--color-teal-pale, #c4e3e8);
    border-left: 4px solid var(--color-teal-deep, #144854);
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-teal-dark, #082932);
}

/* Reset the lede typography inherited from .tif-section-intro p for the
   quote's own paragraphs. */
.tif-single-col__content blockquote p {
    max-width: none;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    opacity: 1;
}

.tif-single-col__content blockquote cite {
    display: block;
    margin-top: 18px;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-teal-deep, #144854);
}

/* Pull-quote on a dark section (no dark pull-quotes on Who We Are, but keep
   the component readable if one is authored there). */
.bg-teal-dark .tif-single-col__content blockquote,
.bg-teal-deep .tif-single-col__content blockquote {
    color: var(--color-white, #ffffff);
}

/* At the single content breakpoint the pull-quote shrinks (mockup .pull-quote
   at <=1024). Cross-page: also tightens the Who We Are intro pull-quote. */
@media (max-width: 1024px) {
    .tif-single-col__content blockquote {
        padding: 36px 30px;
        font-size: 1.2rem;
    }
}

/* --- single_column variant: principles grid ----------------- */
/* Mockup .principles-list / .principle (What We Do framework). A two-column
   grid of teal-left-ruled items, authored from the `principles` repeater. */

.tif-principles-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 50px;
    margin-top: 50px;
}

/* When the principles follow a pull-quote (Engagements Board Dialogue section),
   the mockup spaces them 60px from it (.principles-list margin-top:60px). */
.tif-single-col__content:has(blockquote) + .tif-principles-list {
    margin-top: 60px;
}

.tif-principle {
    border-left: 2px solid var(--color-teal-accent, #7ac5cd);
    padding: 6px 0 6px 24px;
}

.tif-principle h3 {
    margin: 0 0 8px;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-teal-dark, #082932);
}

.tif-principle p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--color-navy-text, #082832);
    opacity: 0.78;
}

/* --- single_column variant: criteria box -------------------- */
/* Mockup .criteria — a bordered white box with a serif heading and a numbered
   list using decimal-leading-zero serif counters. */

.tif-criteria {
    margin-top: 40px;
    padding: 40px;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-grey-soft, #c5d5d8);
}

.tif-criteria h3 {
    margin: 0 0 20px;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-teal-dark, #082932);
}

.tif-criteria ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: crit;
}

.tif-criteria ol li {
    counter-increment: crit;
    position: relative;
    padding: 14px 0 14px 50px;
    border-bottom: 1px solid var(--color-grey-soft, #c5d5d8);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-navy-text, #082832);
    opacity: 0.85;
}

.tif-criteria ol li:last-child {
    border-bottom: none;
}

.tif-criteria ol li::before {
    content: counter(crit, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 14px;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-teal-accent, #7ac5cd);
}

/* --- Code grid (block) -------------------------------------- */
/* Mockup .code-grid / .code-pillar (What We Do — Stewardship Code mapping).
   Solid teal-deep cards with a big serif marker; cards keep the teal-deep skin
   regardless of the (dark) section background. */

.tif-code-grid__intro {
    max-width: 780px;
}

.tif-code-grid__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.tif-code-pillar {
    padding: 32px 28px;
    background: var(--color-teal-deep, #144854);
    color: var(--color-white, #ffffff);
}

/* Pillar content is a single WYSIWYG: the marker is authored as Preformatted
   (<pre>), the title as a Heading, the text as a paragraph. Mirrors the eyebrow
   <pre> convention (blocks.md §3.2.1) and trio_grid's pillar internals — the
   client never types HTML or a class. */
.tif-code-pillar pre {
    display: block;
    margin: 0 0 16px;
    padding: 0;
    overflow: visible;
    white-space: normal;
    background: none;
    border: 0;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 500;
    color: var(--color-teal-accent, #7ac5cd);
}

/* Style every heading level the same so whichever the editor picks renders as
   the card title. */
.tif-code-pillar h2,
.tif-code-pillar h3,
.tif-code-pillar h4,
.tif-code-pillar h5,
.tif-code-pillar h6 {
    margin: 0 0 12px;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-white, #ffffff);
}

.tif-code-pillar p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    opacity: 0.85;
}

/* Single 1024 breakpoint: both grids collapse to one column (mockup line
   1041–1042). The people/impact-style "never 1-col" rule does not apply here. */
@media (max-width: 1024px) {
    .tif-principles-list,
    .tif-code-grid__grid {
        grid-template-columns: 1fr;
    }
}

/* --- Two column --------------------------------------------- */

.tif-two-col {
    display: grid;
    gap: clamp(var(--space-md, 2rem), 4vw, var(--space-xl, 6rem));
    align-items: start;
}

.tif-two-col--50-50 { grid-template-columns: 1fr 1fr; }
.tif-two-col--60-40 { grid-template-columns: 3fr 2fr; }
.tif-two-col--40-60 { grid-template-columns: 2fr 3fr; }

/* --- Three column ------------------------------------------- */

.tif-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-md, 2rem), 4vw, var(--space-lg, 4rem));
    align-items: start;
}

/* --- Trio grid ---------------------------------------------- */

.tif-trio-grid__intro {
    max-width: 720px;
    margin-bottom: var(--space-lg, 4rem);
}

.tif-trio-grid__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md, 2rem);
}

.tif-trio-grid__item {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-grey-soft, #c5d5d8);
    transition: transform 0.4s var(--ease, ease), box-shadow 0.4s var(--ease, ease);
}

/* Card lift + accent underline mirror the mockup .pillar interaction. */
.tif-trio-grid__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -30px rgba(8, 41, 50, 0.2);
}

.tif-trio-grid__item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-teal-accent, #7ac5cd);
    transition: width 0.5s var(--ease, ease);
}

.tif-trio-grid__item:hover::after {
    width: 100%;
}

.tif-trio-grid__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.tif-trio-grid__body {
    padding: 44px 32px;
}

/* Line the list dividers up across the three pillars. Each card spans three
   shared rows — image, copy, list — via subgrid, so the copy row takes the
   height of the tallest copy and every list starts on the same line whatever
   the length of the text above it (or of the lists themselves; aligning the
   list to flex-end would only line up the bottoms). trio_grid.php splits the
   WYSIWYG at its first <ul> into __text / __list for this. Three-up only — the
   stacked layout (<=1024px) has nothing to align — and not the engagement-type
   cards, which carry no list and whose counter ::before would take a row. */
@media (min-width: 1025px) {
    .tif-trio-grid__grid:not(.tif-trio-grid__grid--cards) {
        row-gap: 0;
    }

    .tif-trio-grid__grid:not(.tif-trio-grid__grid--cards) .tif-trio-grid__item {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
    }

    .tif-trio-grid__grid:not(.tif-trio-grid__grid--cards) .tif-trio-grid__image {
        grid-row: 1;
    }

    .tif-trio-grid__grid:not(.tif-trio-grid__grid--cards) .tif-trio-grid__body {
        display: grid;
        grid-row: 2 / span 2;
        grid-template-rows: subgrid;
    }

    /* Copy and list are separate grid items now, so the copy's last bottom
       margin no longer collapses into the list's top margin — drop the list's
       to keep the original 16px gap above the divider. */
    .tif-trio-grid__grid:not(.tif-trio-grid__grid--cards) .tif-trio-grid__list > :first-child {
        margin-top: 0;
    }
}

/* Pillar body WYSIWYG → mockup .pillar internals. The num eyebrow is authored
   as <pre> (serif accent, no leading rule — distinct from .tif-section-intro). */
.tif-trio-grid__body pre {
    display: block;
    margin: 0 0 22px;
    padding: 0;
    overflow: visible;
    white-space: normal;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    /* teal-deep on the default (light/white) pillar card — teal-accent failed
       4.5:1 on the white card (~1.96:1, WCAG 1.4.3). The dark-section override
       below restores teal-accent where the card sits on a teal-dark/deep band. */
    color: var(--color-teal-deep);
}

/* h2 or h3: a standalone trio section sitting directly under the page <h1>
   (no section intro heading) authors its pillar titles as <h2>; a trio that
   follows an <h2> section intro authors them as <h3>. Both render identically
   here so the heading level can follow the document outline (WCAG 1.3.1). */
.tif-trio-grid__body :is(h2, h3) {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.55rem;
    line-height: 1.2;
    margin: 0 0 16px;
}

.tif-trio-grid__body p {
    font-size: 0.93rem;
    line-height: 1.7;
    opacity: 0.78;
    margin: 0 0 16px;
}

.tif-trio-grid__body ul {
    list-style: none;
    margin: 14px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--color-grey-soft);
}

.tif-trio-grid__body li {
    position: relative;
    padding: 6px 0 6px 16px;
    font-size: 0.85rem;
    opacity: 0.78;
}

.tif-trio-grid__body li::before {
    content: "\2013";
    position: absolute;
    left: 0;
    font-weight: 600;
    color: var(--color-teal-deep);
}

/* On dark sections the divider + dashes use the translucent/light accents. */
.layout-trio_grid.bg-teal-dark .tif-trio-grid__body ul,
.layout-trio_grid.bg-teal-deep .tif-trio-grid__body ul {
    border-top-color: rgba(168, 219, 226, 0.25);
}

/* Dark-section overrides: the pillar eyebrow, dash bullets and engage-type
   auto-number flip back to teal-accent (3:1+ on teal-dark/deep), where the
   teal-deep light-section colour would be too dark to read. */
.layout-trio_grid.bg-teal-dark .tif-trio-grid__body pre,
.layout-trio_grid.bg-teal-deep .tif-trio-grid__body pre,
.layout-trio_grid.bg-teal-dark .tif-trio-grid__body li::before,
.layout-trio_grid.bg-teal-deep .tif-trio-grid__body li::before,
.layout-trio_grid.bg-teal-dark .tif-trio-grid__grid--cards .tif-trio-grid__body::before,
.layout-trio_grid.bg-teal-deep .tif-trio-grid__grid--cards .tif-trio-grid__body::before {
    color: var(--color-teal-accent);
}

/* On dark sections the white card inverts to a translucent panel so the
   inherited light text stays legible. */
.layout-trio_grid.bg-teal-dark .tif-trio-grid__item,
.layout-trio_grid.bg-teal-deep .tif-trio-grid__item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(122, 197, 205, 0.22);
}

/* Engage-type card variant on dark sections: its title and body hardcode dark
   ink (teal-dark / navy) for the white-section design, which is invisible on a
   teal-dark/deep band. Flip them to light and lift the top rule to teal-accent.
   (The tagline, big number and cell borders already invert via the rules
   above.) Keeps the card usable on any background — WCAG 1.4.3. */
.layout-trio_grid.bg-teal-dark .tif-trio-grid__grid--cards,
.layout-trio_grid.bg-teal-deep .tif-trio-grid__grid--cards {
    border-top-color: var(--color-teal-accent);
}

.layout-trio_grid.bg-teal-dark .tif-trio-grid__grid--cards .tif-trio-grid__body :is(h2, h3),
.layout-trio_grid.bg-teal-deep .tif-trio-grid__grid--cards .tif-trio-grid__body :is(h2, h3),
.layout-trio_grid.bg-teal-dark .tif-trio-grid__grid--cards .tif-trio-grid__body p,
.layout-trio_grid.bg-teal-deep .tif-trio-grid__grid--cards .tif-trio-grid__body p {
    color: var(--color-white);
}

/* --- trio_grid variant: engagement-type cards --------------- */
/* Mockup .engage-types / .engage-type (Engagements page). The "Engagement-type
   cards" toggle (card_style) adds .tif-trio-grid__grid--cards: a contiguous
   bordered grid (no gap, 2px teal-deep top rule, shared 1px cell borders) with
   a big auto-numbered serif marker and an uppercase tagline. Distinct from the
   standard pillar cards above — no hover lift, no accent underline, no bullet
   list. The big 01/02/03 is a CSS counter (the client never types it); the
   item's <pre> eyebrow renders as the tagline. */
.tif-trio-grid__grid--cards {
    gap: 0;
    border-top: 2px solid var(--color-teal-deep);
    counter-reset: tif-engage-card;
}

.tif-trio-grid__grid--cards .tif-trio-grid__item {
    border: 0;
    border-right: 1px solid var(--color-grey-soft);
    border-bottom: 1px solid var(--color-grey-soft);
    transition: none;
}

.tif-trio-grid__grid--cards .tif-trio-grid__item:last-child {
    border-right: none;
}

/* No hover lift / accent underline on the bordered cards. */
.tif-trio-grid__grid--cards .tif-trio-grid__item:hover {
    transform: none;
    box-shadow: none;
}

.tif-trio-grid__grid--cards .tif-trio-grid__item::after {
    content: none;
}

.tif-trio-grid__grid--cards .tif-trio-grid__body {
    padding: 44px 36px;
    counter-increment: tif-engage-card;
}

/* Auto-numbered serif marker (mockup .engage-type .icon-num). */
.tif-trio-grid__grid--cards .tif-trio-grid__body::before {
    content: counter(tif-engage-card, decimal-leading-zero);
    display: block;
    margin-bottom: 22px;
    font-family: var(--font-serif);
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1;
    /* teal-deep on the white engage-type cards — the 56px marker is large text
       but teal-accent on white is still only ~1.96:1, under even the 3:1
       large-text floor (WCAG 1.4.3). teal-accent restored on dark sections via
       the override beside the pillar eyebrow rules above. */
    color: var(--color-teal-deep);
}

/* The <pre> eyebrow becomes the uppercase tagline (overrides the pillar num
   styling on .tif-trio-grid__body pre). */
.tif-trio-grid__grid--cards .tif-trio-grid__body pre {
    margin: 0 0 18px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-teal-deep);
}

.tif-trio-grid__grid--cards .tif-trio-grid__body :is(h2, h3) {
    margin: 0 0 14px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-teal-dark);
}

.tif-trio-grid__grid--cards .tif-trio-grid__body p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-navy-text);
    opacity: 0.78;
}

@media (prefers-reduced-motion: reduce) {
    .tif-trio-grid__item,
    .tif-trio-grid__item::after {
        transition: none;
    }
}

/* Tablet: generic three-up drops to two columns; the pillars (trio) stack to a
   single column at this breakpoint, matching the mockup .pillars. */
@media (max-width: 1024px) {
    .tif-three-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .tif-trio-grid__grid {
        grid-template-columns: 1fr;
    }

    /* Stacked engagement-type cards drop the right border (mockup
       .engage-type { border-right: none } at <=1024). */
    .tif-trio-grid__grid--cards .tif-trio-grid__item {
        border-right: none;
    }
}

/* Mobile: every multi-column block stacks. */
@media (max-width: 768px) {
    .tif-two-col,
    .tif-two-col--50-50,
    .tif-two-col--60-40,
    .tif-two-col--40-60,
    .tif-three-col,
    .tif-trio-grid__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   IF structural blocks (Phase 12)
   impact_stats · timeline · people_grid · engagement_list

   These four sit at natural height with the same vertical rhythm
   as the Phase 11 common blocks. Horizontal gutters come from the
   inner wrapper so the bg colour spans full width. An editor's
   "Override padding" inline style wins over the defaults.
   ============================================================ */

.layout-impact_stats,
.layout-timeline,
.layout-people_grid,
.layout-engagement_list {
    padding-block: clamp(var(--space-lg, 4rem), 7vw, var(--space-xl, 6rem));
}

.tif-impact__intro,
.tif-timeline__intro,
.tif-people__intro,
.tif-engage__intro {
    max-width: 720px;
    margin-bottom: var(--space-lg, 4rem);
}

/* --- Impact stats ------------------------------------------- */

.tif-impact__grid {
    /* One rule colour drives every divider (top/bottom/right + the 2×2 row
       divider added at <=1024). Dark sections override it below. */
    --tif-rule: var(--color-grey-soft, #c5d5d8);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--tif-rule);
    border-bottom: 1px solid var(--tif-rule);
}

.tif-impact__grid--cols-1 { grid-template-columns: 1fr; }
.tif-impact__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.tif-impact__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.tif-impact__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.tif-impact__cell {
    padding: 46px 28px;
    border-right: 1px solid var(--tif-rule);
}

.tif-impact__cell:last-child {
    border-right: none;
}

.tif-impact__stat {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-weight: 400;
    font-size: clamp(2.8rem, 4.5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-teal-deep, #144854);
    margin-bottom: 12px;
}

.tif-impact__desc {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-grey-mid, #5b6e74);
}

/* Dark-background variant: light translucent rules + accent colours
   (the mockup's impact grid sits on a dark teal section). */
.layout-impact_stats.bg-teal-dark .tif-impact__grid,
.layout-impact_stats.bg-teal-deep .tif-impact__grid {
    --tif-rule: rgba(168, 219, 226, 0.25);
}

.layout-impact_stats.bg-teal-dark .tif-impact__stat,
.layout-impact_stats.bg-teal-deep .tif-impact__stat {
    color: var(--color-teal-accent, #7ac5cd);
}

.layout-impact_stats.bg-teal-dark .tif-impact__desc,
.layout-impact_stats.bg-teal-deep .tif-impact__desc {
    color: var(--color-teal-light, #a8dbe2);
}

/* --- Timeline ----------------------------------------------- */

.tif-timeline__list {
    list-style: none;
    position: relative;
    padding-left: 40px;
}

.tif-timeline__list::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--color-teal-light, #a8dbe2);
}

.tif-timeline__item {
    position: relative;
    margin-bottom: 44px;
}

.tif-timeline__item:last-child {
    margin-bottom: 0;
}

.tif-timeline__item::before {
    content: "";
    position: absolute;
    left: -45px;
    top: 8px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-cream, #e6eff1);
    border: 2px solid var(--color-teal-deep, #144854);
}

.tif-timeline__year {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-teal-deep, #144854);
    margin-bottom: 6px;
}

.tif-timeline__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-navy-text, #082832);
    margin-bottom: 6px;
}

.tif-timeline__desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-grey-mid, #5b6e74);
}

/* Dark-background variant. */
.layout-timeline.bg-teal-dark .tif-timeline__list::before,
.layout-timeline.bg-teal-deep .tif-timeline__list::before {
    background: rgba(168, 219, 226, 0.4);
}

.layout-timeline.bg-teal-dark .tif-timeline__item::before,
.layout-timeline.bg-teal-deep .tif-timeline__item::before {
    background: var(--color-teal-deep, #144854);
    border-color: var(--color-teal-accent, #7ac5cd);
}

.layout-timeline.bg-teal-dark .tif-timeline__year,
.layout-timeline.bg-teal-deep .tif-timeline__year {
    color: var(--color-teal-accent, #7ac5cd);
}

.layout-timeline.bg-teal-dark .tif-timeline__title,
.layout-timeline.bg-teal-deep .tif-timeline__title {
    color: var(--color-white, #ffffff);
}

.layout-timeline.bg-teal-dark .tif-timeline__desc,
.layout-timeline.bg-teal-deep .tif-timeline__desc {
    color: var(--color-teal-light, #a8dbe2);
}

/* --- People grid -------------------------------------------- */

/* Column count is an editor choice on the block's Settings tab (3 or 4);
   the template always emits a --cols-{n} modifier. Both collapse to 2
   columns at <=1024 (see the breakpoint block further down). */
.tif-people__grid {
    display: grid;
    gap: 36px 28px;
}

.tif-people__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.tif-people__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.tif-person {
    text-align: left;
}

.tif-person__portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 16px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--color-teal-pale, #c4e3e8), var(--color-teal-light, #a8dbe2));
}

/* Soft top-left sheen on the gradient placeholder (mockup .person .portrait::before).
   Only on the initials placeholder — suppressed once a real portrait image is set. */
.tif-person__portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.5), transparent 60%);
}

.tif-person__portrait:has(.tif-person__image)::before {
    content: none;
}

.tif-person__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tif-person__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--color-teal-dark, #082932);
    opacity: 0.55;
}

.tif-person__name {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--color-teal-dark, #082932);
    margin-bottom: 4px;
}

.tif-person__role {
    margin-top: 0; /* override the base p + p top margin; the mockup .role is a <div> with none */
    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--color-grey-mid, #5b6e74);
}

/* Dark-background variant: names invert to white, roles lighten. */
.layout-people_grid.bg-teal-dark .tif-person__name,
.layout-people_grid.bg-teal-deep .tif-person__name {
    color: var(--color-white, #ffffff);
}

.layout-people_grid.bg-teal-dark .tif-person__role,
.layout-people_grid.bg-teal-deep .tif-person__role {
    color: var(--color-teal-light, #a8dbe2);
}

/* --- Person bio trigger + modal ------------------------------ */
/* The headshot is a button covering the portrait (people_grid.php); it opens
   the member's bio in a <dialog>. Cards for members with no bio yet render
   without a trigger, so they stay unclickable. */

/* Hidden until js/main.js confirms <dialog> support and adds .tif-modal-ready
   to <html>. Without that the modal can't open, and an affordance that does
   nothing is worse than none — the card just reads as a plain portrait. */
.tif-person__trigger {
    display: none;
}

.tif-modal-ready .tif-person__trigger {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    width: 100%;
    padding: 14px;
    font: inherit;
    text-align: left;
    background: linear-gradient(to top, rgba(8, 41, 50, 0.82), rgba(8, 41, 50, 0) 60%);
    border: none;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.3s var(--ease, ease);
}

.tif-person__trigger:hover,
.tif-person__trigger:focus-visible {
    opacity: 1;
}

/* The portrait clips its overflow, so the global two-tone focus ring would be
   cut off. Draw the same ring inside the trigger instead. */
.tif-person__trigger:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 0;
    box-shadow:
        inset 0 0 0 2px var(--color-teal-accent, #7ac5cd),
        inset 0 0 0 4px var(--color-teal-deep, #144854);
}

.tif-person__trigger-label {
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-white, #ffffff);
}

.tif-person__trigger:hover .btn__arrow {
    transform: translateX(4px);
}

.tif-person__image {
    transition: transform 0.6s var(--ease, ease);
}

.tif-person__portrait:has(.tif-person__trigger:hover) .tif-person__image,
.tif-person__portrait:has(.tif-person__trigger:focus-visible) .tif-person__image {
    transform: scale(1.04);
}

/* Scroll lock while a modal is open — showModal() makes the page inert but
   does not stop it scrolling behind the backdrop. */
body.tif-modal-open {
    overflow: hidden;
}

.tif-person-modal {
    width: min(720px, calc(100vw - 40px));
    max-height: min(80vh, 760px);
    padding: 0;
    color: var(--color-navy-text, #082832);
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-grey-soft, #c5d5d8);
    border-left: 4px solid var(--color-teal-accent, #7ac5cd);
}

.tif-person-modal[open] {
    display: flex;
    flex-direction: column;
}

.tif-person-modal::backdrop {
    background: rgba(8, 41, 50, 0.65);
}

.tif-person-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-teal-deep, #144854);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s var(--ease, ease);
}

.tif-person-modal__close:hover {
    color: var(--color-teal-dark, #082932);
}

.tif-person-modal__inner {
    overflow-y: auto;
    padding: 40px;
}

.tif-person-modal__head {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
    padding-right: 40px; /* clear the close button */
}

.tif-person-modal__portrait {
    flex: 0 0 96px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(160deg, var(--color-teal-pale, #c4e3e8), var(--color-teal-light, #a8dbe2));
}

.tif-person-modal__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tif-person-modal__role {
    margin: 0 0 8px;
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-teal-deep, #144854);
}

.tif-person-modal__name {
    margin: 0;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--color-teal-dark, #082932);
}

.tif-person-modal__bio {
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.85;
}

.tif-person-modal__bio p {
    margin: 0;
}

.tif-person-modal__bio p + p {
    margin-top: 1em;
}

/* Social links close the modal out — the values and treatment are the ones the
   retired /team/{slug}/ single used (.tif-team-member__social), moved here with
   the modal now being the only place a full profile is read. */
.tif-person-modal__social {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--color-grey-soft, #c5d5d8);
}

.tif-person-modal__social-link {
    display: inline-flex;
    align-items: center;
    padding-bottom: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-teal-deep, #144854);
    text-decoration: none;
    border-bottom: 1px solid var(--color-grey-soft, #c5d5d8);
    transition: color 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease);
}

.tif-person-modal__social-link:hover,
.tif-person-modal__social-link:focus-visible {
    color: var(--color-teal-dark, #082932);
    border-bottom-color: var(--color-teal-deep, #144854);
}

@media (prefers-reduced-motion: reduce) {
    .tif-person__trigger,
    .tif-person__image,
    .tif-person-modal__close,
    .tif-person-modal__social-link {
        transition: none;
    }

    .tif-person__portrait:has(.tif-person__trigger:hover) .tif-person__image,
    .tif-person__portrait:has(.tif-person__trigger:focus-visible) .tif-person__image {
        transform: none;
    }
}

/* Small screens: the modal fills more of the viewport and the header stacks. */
@media (max-width: 600px) {
    .tif-person-modal {
        width: calc(100vw - 24px);
        max-height: 88vh;
    }

    .tif-person-modal__inner {
        padding: 28px 24px;
    }

    .tif-person-modal__head {
        gap: 18px;
        margin-bottom: 22px;
    }

    .tif-person-modal__portrait {
        flex-basis: 72px;
    }

    .tif-person-modal__name {
        font-size: 1.45rem;
    }
}

/* --- Featured person (the mockup's .exec-feature) ----------- */
/* An optional lead card above the people grid: a large square portrait, the
   role title, name and bio. Set via the people_grid block's Featured person
   field. Reconciled value-for-value against mockup .exec-feature. */
.tif-featured-person {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 50px;
    align-items: center;
    padding: 40px;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-grey-soft, #c5d5d8);
    border-left: 4px solid var(--color-teal-accent, #7ac5cd);
}

.tif-featured-person__portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-teal-deep, #144854), var(--color-teal-dark, #082932));
}

.tif-featured-person__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tif-featured-person__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 4rem;
    color: var(--color-white, #ffffff);
    opacity: 0.6;
}

.tif-featured-person__role {
    margin-bottom: 12px;
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-teal-deep, #144854);
}

.tif-featured-person__name {
    margin: 0 0 16px;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-weight: 500;
    font-size: 2rem;
    color: var(--color-teal-dark, #082932);
}

.tif-featured-person__bio {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-navy-text, #082832);
    opacity: 0.8;
}

.tif-featured-person__bio p {
    margin: 0;
}

.tif-featured-person__bio p + p {
    margin-top: 1em;
}

/* The grid that follows a featured card gets the mockup's 50px gap
   (.people-grid style="margin-top: 50px" on the exec section). */
.tif-people__grid--after-featured {
    margin-top: 50px;
}

/* On dark sections the featured card keeps its own light background, so its
   text colours stay as the light-section defaults above — no override. */

/* --- Engagement list ---------------------------------------- */

.tif-engage__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Optional CTA below the list — e.g. "View all engagement case studies",
   linking the /case-studies/ archive (mirrors .tif-pubs__cta). */
.tif-engage__cta {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.tif-engage__cta .tif-buttons {
    margin-top: 0;
}

.tif-engage-item {
    padding: 28px;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-grey-soft, #c5d5d8);
    transition: border-color 0.3s var(--ease, ease);
}

.tif-engage-item:hover {
    border-color: var(--color-teal-deep, #144854);
}

.tif-engage-item__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.tif-engage-item__type {
    padding: 4px 10px;
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-white, #ffffff);
    background: var(--color-teal-deep, #144854);
}

.tif-engage-item__status {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-grey-mid, #5b6e74);
}

.tif-engage-item__title {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-teal-dark, #082932);
    margin-bottom: 8px;
}

.tif-engage-item__title a {
    color: inherit;
    text-decoration: none;
}

.tif-engage-item__title a:hover,
.tif-engage-item__title a:focus {
    text-decoration: underline;
}

.tif-engage-item__desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-navy-text, #082832);
    opacity: 0.75;
}

/* Dark-background variant: cards invert to a translucent panel
   (matching the trio-grid treatment). */
.layout-engagement_list.bg-teal-dark .tif-engage-item,
.layout-engagement_list.bg-teal-deep .tif-engage-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(122, 197, 205, 0.22);
}

.layout-engagement_list.bg-teal-dark .tif-engage-item:hover,
.layout-engagement_list.bg-teal-deep .tif-engage-item:hover {
    border-color: var(--color-teal-accent, #7ac5cd);
}

.layout-engagement_list.bg-teal-dark .tif-engage-item__title,
.layout-engagement_list.bg-teal-deep .tif-engage-item__title {
    color: var(--color-white, #ffffff);
}

.layout-engagement_list.bg-teal-dark .tif-engage-item__status,
.layout-engagement_list.bg-teal-deep .tif-engage-item__status {
    color: var(--color-teal-light, #a8dbe2);
}

.layout-engagement_list.bg-teal-dark .tif-engage-item__desc,
.layout-engagement_list.bg-teal-deep .tif-engage-item__desc {
    color: var(--color-teal-light, #a8dbe2);
    opacity: 0.9;
}

/* Tablet and below: the impact grid goes to a 2×2 and STAYS there (the mockup
   never collapses it to a single column). The right column loses its right
   border and the top row gains a bottom divider, giving the cross-rule. */
@media (max-width: 1024px) {
    .tif-impact__grid,
    .tif-impact__grid--cols-3,
    .tif-impact__grid--cols-4,
    .tif-people__grid,
    .tif-people__grid--cols-3,
    .tif-people__grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .tif-impact__grid--cols-4 .tif-impact__cell:nth-child(2n) {
        border-right: none;
    }

    .tif-impact__grid--cols-4 .tif-impact__cell:nth-child(1),
    .tif-impact__grid--cols-4 .tif-impact__cell:nth-child(2) {
        border-bottom: 1px solid var(--tif-rule);
    }

    /* The engagement (case-study) list stacks to one column at the single
       content breakpoint (mockup .engage-list at <=1024), not 768. */
    .tif-engage__list {
        grid-template-columns: 1fr;
    }
}

/* Mobile: the featured-person card stacks. The people grid stays 2×2 below
   1024 — the mockup never drops it to one column. */
@media (max-width: 768px) {
    .tif-featured-person {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ============================================================
   IF content blocks (Phase 13)
   publications_grid · quote_grid · member_firms_grid · iif_feature

   Same natural-height vertical rhythm as the Phase 11/12 blocks;
   horizontal gutters come from the inner wrapper so the bg colour
   spans full width. An editor's "Override padding" inline style
   wins over the defaults.
   ============================================================ */

.layout-publications_grid,
.layout-resource_grid,
.layout-quote_grid,
.layout-member_firms_grid,
.layout-iif_feature {
    padding-block: clamp(var(--space-lg, 4rem), 7vw, var(--space-xl, 6rem));
}

.tif-pubs__intro,
.tif-quotes__intro,
.tif-firms__intro {
    margin-bottom: var(--space-lg, 4rem);
}

/* --- Publications grid -------------------------------------- */

.tif-pubs__filters {
    gap: 10px;
    margin-bottom: var(--space-lg, 4rem);
}

/* Filter chips are <button>s (base.css resets button styling, so the
   look is declared here in full). Mirrors the mockup .chip / .chip.active. */
.tif-chip {
    padding: 8px 18px;
    /* grey-mid, not grey-soft: an inactive chip on a white section has the
       border as its only boundary, which must clear 3:1 (WCAG 2.2 §1.4.11).
       The dark-section chip overrides below set their own translucent border. */
    border: 1px solid var(--color-grey-mid, #5b6e74);
    background: var(--color-white, #ffffff);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    color: var(--color-navy-text, #082832);
    transition: background 0.3s var(--ease, ease), color 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
}

.tif-chip:hover,
.tif-chip.is-active {
    background: var(--color-teal-deep, #144854);
    color: var(--color-white, #ffffff);
    border-color: var(--color-teal-deep, #144854);
    text-decoration: none;
}

.tif-pubs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md, 2rem);
}

/* Centred CTA row below the grid (mockup "Explore the Content Library"). */
.tif-pubs__cta {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.tif-pubs__cta .tif-buttons {
    margin-top: 0;
}

.tif-pub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-grey-soft, #c5d5d8);
    transition: transform 0.4s var(--ease, ease), box-shadow 0.4s var(--ease, ease);
}

.tif-pub-card.is-hidden {
    display: none;
}

.tif-pub-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -30px rgba(8, 41, 50, 0.2);
}

.tif-pub-card__cover {
    position: relative;
    aspect-ratio: 1 / 1.41;
    overflow: hidden;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--color-teal-deep, #144854), var(--color-teal-dark, #082932));
    color: var(--color-white, #ffffff);
}

.tif-pub-card__cover--alt {
    background: linear-gradient(135deg, var(--color-teal-mid, #5ba0ab), var(--color-teal-deep, #144854));
}

.tif-pub-card__cover--cream {
    background: var(--color-cream, #e6eff1);
    color: var(--color-teal-dark, #082932);
}

/* When a cover image is set it fills the panel, hiding the gradient + text. */
.tif-pub-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tif-pub-card__cover-type {
    font-size: 0.625rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.8;
}

.tif-pub-card__cover-title {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 400;
}

.tif-pub-card__meta {
    display: flex;
    flex-direction: column;
    padding: 22px 26px;
}

.tif-pub-card__type {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
    margin-bottom: 10px;
}

.tif-pub-card__title {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--color-teal-dark, #082932);
    margin-bottom: 8px;
}

.tif-pub-card__title a {
    color: inherit;
    text-decoration: none;
}

/* Stretched link: the whole card is clickable, but only the title is a
   link in the accessibility tree. */
.tif-pub-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.tif-pub-card:hover .tif-pub-card__title a,
.tif-pub-card__title a:focus-visible {
    text-decoration: underline;
}

.tif-pub-card__desc {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--color-grey-mid, #5b6e74);
    margin-bottom: 16px;
}

.tif-pub-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.tif-pub-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
}

/* The members badge sits above the stretched link so it reads as part of
   the card, not the clickable surface. */
.tif-pub-card__footer .tif-badge {
    position: relative;
    z-index: 1;
}

/* Dark-background variant: cards invert to a translucent panel; chips and
   accents lighten (matching the trio/engagement treatment). */
.layout-publications_grid.bg-teal-dark .tif-chip,
.layout-publications_grid.bg-teal-deep .tif-chip {
    background: transparent;
    border-color: rgba(168, 219, 226, 0.4);
    color: var(--color-teal-light, #a8dbe2);
}

.layout-publications_grid.bg-teal-dark .tif-chip:hover,
.layout-publications_grid.bg-teal-dark .tif-chip.is-active,
.layout-publications_grid.bg-teal-deep .tif-chip:hover,
.layout-publications_grid.bg-teal-deep .tif-chip.is-active {
    background: var(--color-teal-accent, #7ac5cd);
    border-color: var(--color-teal-accent, #7ac5cd);
    color: var(--color-teal-dark, #082932);
}

.layout-publications_grid.bg-teal-dark .tif-pub-card,
.layout-publications_grid.bg-teal-deep .tif-pub-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(122, 197, 205, 0.22);
}

.layout-publications_grid.bg-teal-dark .tif-pub-card__title,
.layout-publications_grid.bg-teal-deep .tif-pub-card__title {
    color: var(--color-white, #ffffff);
}

.layout-publications_grid.bg-teal-dark .tif-pub-card__type,
.layout-publications_grid.bg-teal-dark .tif-pub-card__link,
.layout-publications_grid.bg-teal-deep .tif-pub-card__type,
.layout-publications_grid.bg-teal-deep .tif-pub-card__link {
    color: var(--color-teal-accent, #7ac5cd);
}

.layout-publications_grid.bg-teal-dark .tif-pub-card__desc,
.layout-publications_grid.bg-teal-deep .tif-pub-card__desc {
    color: var(--color-teal-light, #a8dbe2);
}

/* Dynamic "View all {type}" button shown below the grid on a filtered tab
   (hidden on the "All" tab). Mirrors .tif-pubs__cta spacing. The [hidden]
   rule is explicit because the flex display would otherwise win over it. */
.tif-pubs__view-all {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.tif-pubs__view-all[hidden] {
    display: none;
}

.tif-pubs__view-all .tif-buttons,
.tif-pubs__view-all .btn {
    margin-top: 0;
}

/* --- Resource grid (resource_grid block) -------------------- */

/* The mockup .resource-grid / .resource-card. A query-driven per-type
   publications section (Four O'Clock Forums, S-360 Projects, …): the editor
   picks one or more publication types and the block lists their most recent
   posts as bordered cards. Distinct from .tif-pub-card (cover panel) and the
   trio/code/engage card variants — see blocks.md. */
.tif-resource-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.tif-resource-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-grey-soft, #c5d5d8);
    padding: 36px;
    transition: transform 0.3s var(--ease, ease), box-shadow 0.3s var(--ease, ease);
}

.tif-resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -28px rgba(8, 41, 50, 0.2);
}

.tif-resource-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
    margin-bottom: 16px;
}

.tif-resource-card__title {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 500;
    color: var(--color-teal-dark, #082932);
    margin-bottom: 14px;
}

.tif-resource-card__title a {
    color: inherit;
    text-decoration: none;
}

/* Stretched link: the whole card is clickable, only the title is in the
   accessibility tree (mirrors .tif-pub-card). */
.tif-resource-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.tif-resource-card:hover .tif-resource-card__title a,
.tif-resource-card__title a:focus-visible {
    text-decoration: underline;
}

.tif-resource-card__desc {
    flex: 1;
    font-size: 0.93rem;
    line-height: 1.65;
    /* Apply the 78% tint via color-mix, NOT `opacity`: an opacity < 1 creates a
       stacking context that paints this paragraph above the card's stretched
       title link (.tif-resource-card__title a::after), making the desc area
       un-clickable. color-mix keeps the same tone with no stacking context. */
    color: color-mix(in srgb, var(--color-navy-text, #082832) 78%, transparent);
    margin-bottom: 20px;
}

.tif-resource-card__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.tif-resource-card__topic {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-teal-deep, #144854);
    background: var(--color-teal-pale, #c4e3e8);
    padding: 4px 10px;
}

.tif-resource-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.tif-resource-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
}

/* Members badge pushes to the right (mockup .members-only margin-left:auto)
   and sits above the stretched card link so it stays its own target. */
.tif-resource-card__footer .tif-badge {
    position: relative;
    z-index: 1;
}

/* Centred CTA row below the grid (e.g. "View all Four O'Clock Forums"). */
.tif-resources__cta {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.tif-resources__cta .tif-buttons {
    margin-top: 0;
}

/* --- Quote grid --------------------------------------------- */

.tif-quotes__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

.tif-quote-card {
    position: relative;
    padding: 48px 44px;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-grey-soft, #c5d5d8);
    transition: transform 0.4s var(--ease, ease), box-shadow 0.4s var(--ease, ease);
}

.tif-quote-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -30px rgba(8, 41, 50, 0.18);
}

.tif-quote-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--color-teal-accent, #7ac5cd);
}

.tif-quote-card__mark {
    display: block;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 5rem;
    line-height: 0.6;
    font-weight: 500;
    color: var(--color-teal-accent, #7ac5cd);
    opacity: 0.5;
    margin-bottom: 8px;
}

.tif-quote-card__body {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.25rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--color-teal-dark, #082932);
    margin: 0 0 28px;
}

.tif-quote-card__attr {
    border-top: 1px solid var(--color-grey-soft, #c5d5d8);
    padding-top: 18px;
}

.tif-quote-card__attr strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-teal-dark, #082932);
    margin-bottom: 4px;
}

.tif-quote-card__attr span {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-teal-deep, #144854);
}

/* Dark-background variant. */
.layout-quote_grid.bg-teal-dark .tif-quote-card,
.layout-quote_grid.bg-teal-deep .tif-quote-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(122, 197, 205, 0.22);
}

.layout-quote_grid.bg-teal-dark .tif-quote-card__body,
.layout-quote_grid.bg-teal-deep .tif-quote-card__body {
    color: var(--color-white, #ffffff);
}

.layout-quote_grid.bg-teal-dark .tif-quote-card__attr,
.layout-quote_grid.bg-teal-deep .tif-quote-card__attr {
    border-top-color: rgba(168, 219, 226, 0.25);
}

.layout-quote_grid.bg-teal-dark .tif-quote-card__attr strong,
.layout-quote_grid.bg-teal-deep .tif-quote-card__attr strong {
    color: var(--color-white, #ffffff);
}

.layout-quote_grid.bg-teal-dark .tif-quote-card__attr span,
.layout-quote_grid.bg-teal-deep .tif-quote-card__attr span {
    color: var(--color-teal-light, #a8dbe2);
}

/* --- Member firms grid -------------------------------------- */

/* Each tile draws its own 1px rule (outline) into the shared 1px gaps, so a
   part-filled last row ends at the last firm instead of exposing a block of
   grid background. Outline rather than box-shadow so the rules survive
   forced-colours mode. --tif-rule must stay opaque: neighbouring outlines
   overlap in the gaps, so a translucent colour would double up. */
.tif-firms__grid {
    --tif-rule: var(--color-grey-soft, #c5d5d8);
    list-style: none;
    display: grid;
    gap: 1px;
    padding: 1px;
}

/* Columns come from the block's Columns setting (4–7, default 7); the
   template always emits a --cols-{n} modifier. Narrower screens cap the
   count rather than scale it — at most 6 at <=1280, then 4 / 3 / 2 at
   1024 / 768 / 480 (rules below) — so tiles stay at least ~145px wide. */
.tif-firms__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.tif-firms__grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.tif-firms__grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
.tif-firms__grid--cols-7 { grid-template-columns: repeat(7, 1fr); }

/* No hover state on tiles (client request) — static wall. */
.tif-firm-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 110px;
    padding: 32px 18px;
    background: var(--color-white, #ffffff);
    outline: 1px solid var(--tif-rule);
}

.tif-firm-tile__link {
    color: inherit;
    text-decoration: none;
}

/* Stretched link so the whole tile is clickable with a single link node. */
.tif-firm-tile__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.tif-firm-tile__name {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-teal-dark, #082932);
}

.tif-firm-tile__logo {
    width: auto;
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Dark-background variant: deep-teal tiles, lightened gridlines + text. The
   rule is the old 25% teal-light pre-mixed with the section colour, so it
   stays opaque (see the grid note above). */
.layout-member_firms_grid.bg-teal-dark .tif-firms__grid {
    --tif-rule: color-mix(in srgb, var(--color-teal-light, #a8dbe2) 25%, var(--color-teal-dark, #082932));
}

.layout-member_firms_grid.bg-teal-deep .tif-firms__grid {
    --tif-rule: color-mix(in srgb, var(--color-teal-light, #a8dbe2) 25%, var(--color-teal-deep, #144854));
}

.layout-member_firms_grid.bg-teal-dark .tif-firm-tile,
.layout-member_firms_grid.bg-teal-deep .tif-firm-tile {
    background: var(--color-teal-deep, #144854);
}

.layout-member_firms_grid.bg-teal-dark .tif-firm-tile__name,
.layout-member_firms_grid.bg-teal-deep .tif-firm-tile__name {
    color: var(--color-white, #ffffff);
}

/* --- I&IF feature ------------------------------------------- */

.tif-iif {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(var(--space-md, 2rem), 5vw, 70px);
    align-items: center;
}

.tif-iif--reversed {
    grid-template-columns: 1fr 1.3fr;
}

.tif-iif--reversed .tif-iif__visual {
    order: -1;
}

.tif-iif__content > :first-child {
    margin-top: 0;
}

.tif-iif__content h2 em,
.tif-iif__content h3 em {
    font-style: italic;
    color: var(--color-teal-deep, #144854);
}

.tif-iif__content p {
    margin-top: var(--space-sm, 1rem);
    line-height: 1.7;
}

.tif-iif__content .tif-buttons {
    margin-top: var(--space-md, 2rem);
}

.tif-iif__visual {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gradient panel only behind the ampersand fallback — an uploaded image sits
   on the section background with no panel behind it. */
.tif-iif__visual--placeholder {
    background: linear-gradient(135deg, var(--color-teal-accent, #7ac5cd) 0%, var(--color-teal-deep, #144854) 100%);
}

/* Concentric decorative rings, matching the mockup .iif-visual placeholder.
   Only on the ampersand fallback (no image) — the PHP adds the modifier so
   the rings never overlay a real logo. */
.tif-iif__visual--placeholder::before,
.tif-iif__visual--placeholder::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.tif-iif__visual--placeholder::before {
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
}

.tif-iif__visual--placeholder::after {
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Decorative placeholder content (ampersand + brand label), centred above the
   concentric rings — mirrors the mockup .iif-visual .center. */
.tif-iif__center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    color: var(--color-white, #ffffff);
}

.tif-iif__ampersand {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 7rem;
    line-height: 1;
    font-style: italic;
    font-weight: 300;
    margin-bottom: 12px;
    text-indent: -20px;
}

.tif-iif__label {
    font-size: 0.6875rem; /* 11px */
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 600;
}

.tif-iif__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.layout-iif_feature.bg-teal-dark .tif-iif__content h2 em,
.layout-iif_feature.bg-teal-deep .tif-iif__content h2 em,
.layout-iif_feature.bg-teal-dark .tif-iif__content h3 em,
.layout-iif_feature.bg-teal-deep .tif-iif__content h3 em {
    color: var(--color-teal-accent, #7ac5cd);
}

@media (prefers-reduced-motion: reduce) {
    .tif-pub-card,
    .tif-quote-card,
    .tif-chip {
        transition: none;
    }
}

/* Small laptop: 7 firms per row would squeeze tiles under ~145px below 1280,
   so the 7-column setting drops to 6. 4–6 hold until the tablet step. */
@media (max-width: 1280px) {
    .tif-firms__grid--cols-7 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Tablet: tighten the multi-column grids. */
@media (max-width: 1024px) {
    /* Publication + resource card grids hold a 2-up layout at <=1024 (the
       mockup stacks to 1-col, but Daniel wants 2x2 with a ~290px minimum
       card width). They drop to one column at <=680, where two columns can
       no longer keep the 290px floor (2*290 + gap over a 92% wrapper). */
    .tif-pubs__grid,
    .tif-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Member firms: every column setting steps down to 4 → 3 → 2
       (1024 / 768 / 480) so tiles stay roughly 145–235px wide. These
       unqualified rules sit after the --cols-{n} modifiers, so they win. */
    .tif-firms__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .tif-iif,
    .tif-iif--reversed {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Stacked: the visual always follows the copy regardless of reverse, and
       spans the full column width (mockup .iif-grid stacked). */
    .tif-iif--reversed .tif-iif__visual {
        order: 0;
    }

    /* Quote cards collapse to one column at the single 1024 breakpoint
       (mockup .quotes-grid / .quote-card at <=1024), not at 768. */
    .tif-quotes__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tif-quote-card {
        padding: 36px 30px;
    }

    .tif-quote-card__body {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .tif-firms__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Card grids drop to one column only once two columns can't keep the ~290px
   minimum width (Daniel's call — see the <=1024 rule above). */
@media (max-width: 680px) {
    .tif-pubs__grid,
    .tif-resource-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .tif-firms__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Publications archive + single (Phase 14)
   archive-publication.php · taxonomy-publication_type.php ·
   single-publication.php. These templates don't run the page builder, so
   blocks.css is enqueued for them via tif_request_uses_publication_templates()
   in inc/enqueue.php. They reuse .tif-pubs__grid / .tif-pub-card / .tif-chip
   from the publications_grid block above.
   ============================================================ */

/* --- Archive / taxonomy listing ----------------------------- */

.tif-pub-archive {
    padding-block: clamp(var(--space-lg, 4rem), 7vw, var(--space-xl, 6rem));
}

.tif-pub-archive__header {
    max-width: 720px;
    margin-bottom: var(--space-lg, 4rem);
}

.tif-pub-archive__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
    margin-bottom: var(--space-sm, 1rem);
}

.tif-pub-archive__title {
    margin-bottom: var(--space-sm, 1rem);
}

.tif-pub-archive__lede {
    font-size: 1.05rem;
    color: var(--color-grey-mid, #5b6e74);
}

.tif-pub-archive__empty {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.4rem;
    color: var(--color-teal-deep, #144854);
}

/* --- Single publication ------------------------------------- */

.tif-publication {
    padding-block: clamp(var(--space-lg, 4rem), 7vw, var(--space-xl, 6rem));
}

.tif-publication__top {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: clamp(var(--space-md, 2rem), 5vw, var(--space-xl, 6rem));
    align-items: start;
}

.tif-publication__cover {
    position: relative;
    aspect-ratio: 1 / 1.41;
    overflow: hidden;
}

.tif-publication__cover--placeholder {
    display: flex;
    align-items: flex-end;
    padding: 28px;
    background: linear-gradient(135deg, var(--color-teal-deep, #144854), var(--color-teal-dark, #082932));
    color: var(--color-white, #ffffff);
}

.tif-publication__cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tif-publication__cover-title {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.6rem;
    line-height: 1.2;
}

.tif-publication__intro {
    display: flex;
    flex-direction: column;
}

.tif-publication__type {
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
    margin-bottom: var(--space-sm, 1rem);
}

.tif-publication__title {
    margin-bottom: var(--space-sm, 1rem);
}

.tif-publication__date {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 1rem);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-grey-mid, #5b6e74);
    margin-bottom: var(--space-md, 2rem);
}

.tif-publication__summary {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--color-teal-dark, #082932);
}

.tif-publication__actions {
    margin-top: var(--space-md, 2rem);
}

.tif-publication__file-meta {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    opacity: 0.85;
}

.tif-publication__body {
    margin-top: clamp(var(--space-lg, 4rem), 6vw, var(--space-xl, 6rem));
}

.tif-publication__body > * + * {
    margin-top: var(--space-sm, 1rem);
}

.tif-publication__related {
    margin-top: clamp(var(--space-lg, 4rem), 6vw, var(--space-xl, 6rem));
    padding-top: var(--space-lg, 4rem);
    border-top: 1px solid var(--color-grey-soft, #c5d5d8);
}

.tif-publication__related-title {
    margin-bottom: var(--space-md, 2rem);
}

@media (max-width: 768px) {
    .tif-publication__top {
        grid-template-columns: 1fr;
    }

    .tif-publication__cover {
        max-width: 280px;
    }
}

/* ============================================================
   News, Events & Case Studies (Phase 15)
   home.php · single.php · archive-event.php · single-event.php ·
   archive-case_study.php · single-case_study.php. Template-level styles
   (not page-builder blocks); blocks.css is enqueued for them via
   tif_request_uses_content_templates() in inc/enqueue.php. The case-study
   archive/single reuse .tif-engage__list / .tif-engage-item (Phase 12).
   ============================================================ */

/* --- Shared archive/single header furniture ----------------- */

.tif-news,
.tif-events,
.tif-cs-archive,
.tif-post,
.tif-event,
.tif-case-study {
    padding-block: clamp(var(--space-lg, 4rem), 7vw, var(--space-xl, 6rem));
}

.tif-news__header,
.tif-events__header,
.tif-cs-archive__header {
    max-width: 760px;
    margin-bottom: var(--space-lg, 4rem);
}

.tif-news__eyebrow,
.tif-events__eyebrow,
.tif-cs-archive__eyebrow,
.tif-post__eyebrow,
.tif-event__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
    margin-bottom: var(--space-sm, 1rem);
}

.tif-news__title,
.tif-events__title,
.tif-cs-archive__title {
    margin-bottom: var(--space-sm, 1rem);
}

.tif-news__lede,
.tif-events__lede,
.tif-cs-archive__lede {
    font-size: 1.05rem;
    color: var(--color-grey-mid, #5b6e74);
}

.tif-news__empty,
.tif-cs-archive__empty {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.4rem;
    color: var(--color-teal-deep, #144854);
}

/* --- News index (home.php) ---------------------------------- */

/* When the intro is rendered from the posts page's page_builder (a full
   section above), the mockup keeps intro + list in one block. Collapse the
   doubled vertical padding: the intro section drops its bottom padding (rule
   below) and the list carries the mockup's own gap (.news-list margin-top). */
.tif-news--has-intro {
    padding-top: 44px;
}

/* Intro section directly above a template-owned content section (News list /
   Contact grid): drop its bottom padding so the gap is the mockup's in-block
   value (44px / 50px) rather than two stacked sections' padding summed. */
.layout-single_column:has(+ .tif-news--has-intro),
.layout-single_column:has(+ .tif-contact-section) {
    padding-bottom: 0;
}

.tif-news-item {
    position: relative;
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 36px;
    align-items: center;
    padding: 32px 0;
    border-bottom: 1px solid var(--color-grey-soft, #c5d5d8);
    transition: padding-left 0.3s var(--ease, ease);
}

.tif-news-item:hover {
    padding-left: 12px;
}

.tif-news-item__date {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
}

.tif-news-item__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-teal-dark, #082932);
}

.tif-news-item__link {
    color: inherit;
    text-decoration: none;
}

/* Stretched link — the whole row is clickable, one a11y link node. */
.tif-news-item__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.tif-news-item__link:hover,
.tif-news-item__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Badge sits above the stretched-link overlay so it stays legible. */
.tif-news-item__title .tif-badge {
    position: relative;
    z-index: 1;
}

.tif-news-item__arrow {
    color: var(--color-teal-deep, #144854);
    font-size: 1.4rem;
    transition: transform 0.3s var(--ease, ease);
}

.tif-news-item:hover .tif-news-item__arrow {
    transform: translateX(6px);
}

/* --- News single (single.php) ------------------------------- */

.tif-post__title {
    margin-bottom: var(--space-sm, 1rem);
}

.tif-post__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 1rem);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-grey-mid, #5b6e74);
}

.tif-post__thumbnail,
.tif-case-study__thumbnail {
    margin-block: var(--space-lg, 4rem);
}

.tif-post__content > * + *,
.tif-event__body > * + *,
.tif-case-study__body > * + * {
    margin-top: var(--space-sm, 1rem);
}

.tif-post__footer {
    margin-top: var(--space-lg, 4rem);
    padding-top: var(--space-md, 2rem);
    border-top: 1px solid var(--color-grey-soft, #c5d5d8);
}

.tif-post__footer .nav-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md, 2rem);
}

.tif-post__nav-label {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-grey-mid, #5b6e74);
    margin-bottom: 4px;
}

.tif-post__nav-title {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    color: var(--color-teal-dark, #082932);
}

/* --- Events archive (archive-event.php) --------------------- */

.tif-events__group + .tif-events__group {
    margin-top: var(--space-xl, 6rem);
}

.tif-events__group-title {
    margin-bottom: var(--space-md, 2rem);
    padding-bottom: var(--space-sm, 1rem);
    border-bottom: 1px solid var(--color-grey-soft, #c5d5d8);
}

.tif-events__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.tif-events__empty {
    color: var(--color-grey-mid, #5b6e74);
}

.tif-event-card {
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 24px;
    padding: 28px;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-grey-soft, #c5d5d8);
    transition: border-color 0.3s var(--ease, ease), transform 0.3s var(--ease, ease);
}

.tif-event-card:hover {
    border-color: var(--color-teal-deep, #144854);
    transform: translateY(-2px);
}

.tif-event-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 6px;
    text-align: center;
    background: var(--color-pale, #eff5f6);
    color: var(--color-teal-deep, #144854);
}

.tif-event-card__day {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
}

.tif-event-card__month {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 4px;
}

.tif-event-card__year {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    color: var(--color-grey-mid, #5b6e74);
    margin-top: 2px;
}

.tif-event-card__tbc {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}

.tif-event-card__format {
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
    margin-bottom: 8px;
}

.tif-event-card__title {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-teal-dark, #082932);
    margin-bottom: 8px;
}

.tif-event-card__link {
    color: inherit;
    text-decoration: none;
}

.tif-event-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.tif-event-card__link:hover,
.tif-event-card__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.tif-event-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--color-grey-mid, #5b6e74);
    margin-bottom: 8px;
}

.tif-event-card__desc {
    font-size: 0.88rem;
    line-height: 1.6;
    /* Tint via color-mix, NOT `opacity`: opacity < 1 makes a stacking context
       that paints the desc above the card's stretched link
       (.tif-event-card__link::after), blocking clicks over it (same fix as
       .tif-resource-card__desc). */
    color: color-mix(in srgb, var(--color-navy-text, #082832) 78%, transparent);
}

/* Footer holding the members badge on a gated card. Above the stretched
   link so the badge stays legible (event card + shared case-study card). */
.tif-event-card__footer,
.tif-engage-item__footer {
    position: relative;
    z-index: 1;
    margin-top: 14px;
}

/* --- Event single (single-event.php) ------------------------ */

/* The featured image is series branding (every Four O'Clock Forum shares one
   graphic), not a photo of the event — so it sits beside the title as a small
   square tile rather than running full-bleed above the body. Without a featured
   image the intro is a plain block and the text keeps the header's full width. */
.tif-event__intro--media {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: clamp(var(--space-sm, 1rem), 4vw, var(--space-lg, 4rem));
    align-items: center;
}

.tif-event__intro-media img {
    width: 100%;
}

.tif-event__intro-text > :last-child {
    margin-bottom: 0;
}

.tif-event__title {
    margin-bottom: var(--space-sm, 1rem);
}

.tif-event__past-note {
    display: inline-block;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-grey-mid, #5b6e74);
    margin-bottom: var(--space-sm, 1rem);
}

.tif-event__facts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md, 2rem);
    margin-block: var(--space-md, 2rem);
    padding-block: var(--space-md, 2rem);
    border-block: 1px solid var(--color-grey-soft, #c5d5d8);
}

.tif-event__fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tif-event__fact-label {
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
}

.tif-event__fact-value {
    font-size: 0.95rem;
    color: var(--color-teal-dark, #082932);
}

/* The "When" value carries date + time in separate spans (single-event.php) so
   they stay whole and stack onto their own lines in narrow fact columns, rather
   than the time breaking mid-value ("4:00" / "pm"). */
time.tif-event__fact-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5ch;
}

.tif-event__fact-date,
.tif-event__fact-time {
    white-space: nowrap;
}

.tif-event__register {
    margin-bottom: var(--space-md, 2rem);
}

.tif-event__downloads {
    margin-top: var(--space-lg, 4rem);
    padding-top: var(--space-md, 2rem);
    border-top: 1px solid var(--color-grey-soft, #c5d5d8);
}

.tif-event__downloads-title {
    font-size: 1.1rem;
    margin-bottom: var(--space-sm, 1rem);
}

.tif-event__downloads-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tif-event__download a {
    font-weight: 500;
}

/* --- Case study single (single-case_study.php) -------------- */

.tif-case-study__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--space-sm, 1rem);
}

.tif-case-study__type {
    padding: 4px 10px;
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-white, #ffffff);
    background: var(--color-teal-deep, #144854);
}

.tif-case-study__status {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-grey-mid, #5b6e74);
}

.tif-case-study__title {
    margin-bottom: var(--space-sm, 1rem);
}

.tif-case-study__related {
    margin-top: clamp(var(--space-lg, 4rem), 6vw, var(--space-xl, 6rem));
    padding-top: var(--space-lg, 4rem);
    border-top: 1px solid var(--color-grey-soft, #c5d5d8);
}

.tif-case-study__related-title {
    margin-bottom: var(--space-md, 2rem);
}

/* --- Responsive --------------------------------------------- */

@media (max-width: 1024px) {
    .tif-events__list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tif-news-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tif-news-item__arrow {
        display: none;
    }

    .tif-post__footer .nav-links {
        flex-direction: column;
    }

    /* Stacked, the tile keeps a fixed width rather than going full-bleed —
       a 100%-wide square would be taller than the phone viewport. */
    .tif-event__intro--media {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm, 1rem);
    }

    .tif-event__intro-media {
        width: 160px;
    }
}

/* ============================================================
   Contact grid — page-builder block (layout contact_grid,
   parts/blocks/contact_grid.php). Info column (details repeater) beside
   the CF7 form column. Mirrors the mockup's .contact-grid; the form
   controls themselves are styled in components.css (.tif-contact-form).
   ============================================================ */

.tif-contact-section {
    /* Top gap matches the mockup's .contact-grid margin-top (50px); the intro
       section above drops its bottom padding (see the :has rule by the News
       list). Bottom keeps the normal section rhythm before the footer. */
    padding-top: 50px;
    padding-bottom: clamp(var(--space-lg, 4rem), 7vw, var(--space-xl, 6rem));
}

.tif-contact {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(var(--space-md, 2rem), 5vw, 70px);
    align-items: start;
}

.tif-contact--single {
    grid-template-columns: 1fr;
    max-width: var(--wrapper-small, 880px);
}

.tif-contact__block {
    padding: 22px 0;
    border-bottom: 1px solid var(--color-grey-soft, #c5d5d8);
}

.tif-contact__block:first-child {
    padding-top: 0;
}

.tif-contact__label {
    margin: 0 0 10px;
    font-size: 0.625rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-teal-deep, #144854);
}

.tif-contact__value {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--color-teal-dark, #082932);
}

.tif-contact__value p {
    margin: 0;
}

.tif-contact__value p + p {
    margin-top: 0.5rem;
}

.tif-contact__value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--color-grey-soft, #c5d5d8);
    transition: border-color 0.25s var(--ease, ease);
}

.tif-contact__value a:hover,
.tif-contact__value a:focus-visible {
    border-bottom-color: var(--color-teal-deep, #144854);
}

@media (max-width: 1024px) {
    .tif-contact {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}