/* tfh-ui.css — TFH Design System Layer
 * -----------------------------------------------------------
 * Purpose  : New namespaced (.tfh-*) styles loaded AFTER the legacy
 *            CSS stack. Adds the TFH design system without touching
 *            tfh.css / tfh-2022.css / app.css.
 * Load order in Layout.astro:
 *   tfh.css → tfh-2022.css → flexbox.css → app.css → tfh-ui.css
 * Hard rules:
 *   - Never override .btn, .btn-*, .col-*, .row, .container directly.
 *   - New patterns get new class names (.tfh-*).
 *   - Every .tfh-* pattern added here must have a matching /styleguide
 *     entry before it ships to production.
 * Browser floor: Safari 16+, modern evergreen. Modern CSS (grid,
 *   subgrid, :has(), container queries, color-mix()) OK as progressive
 *   enhancement. Layout-critical :has() gated with @supports.
 * Docs: tfh-brain/wiki/projects/tfh-css-refactor.md
 * =========================================================== */


/* ===========================================================
   1 — TOKENS
   Additions to tfh-2022.css :root. Only new/missing tokens go
   here — do not duplicate anything already in tfh-2022.css.
   =========================================================== */
:root {
    /* Gray scale — tfh-2022.css has 200/400/600/800; add 100 */
    --gray-100: hsla(0, 0%, 97%, 100%);

    /* Spacing scale — 4px base, derived from most-used page values.
       Use in new .tfh-* patterns; legacy pages keep their raw px values.
       rem values based on 10px root (tfh.css sets html { font-size: 10px }). */
    --navbar-h: 50px;      /* fixed navbar height — used for hero padding offsets */
    --space-2xs: 0.4rem;   /*  4px */
    --space-xs:  0.8rem;   /*  8px */
    --space-sm:  1.6rem;   /* 16px */
    --space-md:  3.2rem;   /* 32px */
    --space-lg:  4.8rem;   /* 48px */
    --space-xl:  6.4rem;   /* 64px */
    --space-2xl: 9.6rem;   /* 96px */

    /* TFH brand blue — used in legacy tfh.css (#4178BE btn-primary).
       tfh-2022.css primary is currently grayscale (winter scheme).
       Phase 2a resolves which value the .tfh-btn family uses. */
    --tfh-brand-blue:      #4178BE;
    --tfh-brand-dark-text: #0D1111;
    --tfh-brand-bg:        #FDFBFB;

    /* Button tokens */
    --tfh-btn-radius:       10px;
    --tfh-btn-padding-y:    13px;
    --tfh-btn-padding-x:    26px;
    --tfh-btn-font-size:    24px;     /* NHG Display 55 Roman, base button */
    --tfh-btn-font-size-sm: 18px;     /* NHG Display 55 Roman, small button */
    --tfh-btn-font-weight:  500;      /* Display Pro 55 Roman = 500 in Adobe kit */
    --tfh-btn-border-w:     1.5px;
    --tfh-btn-icon-size:    48px;
    --tfh-btn-dark:         #0D1111;
    --tfh-btn-blue:         var(--tfh-brand-blue);

    /* Font families — NHG Text Pro for headings, Display Pro for body/UI.
       Text Pro: headings, titles, subtitles, leads, footer.
       Display Pro: body copy, buttons, links, nav, paragraphs, spans. */
    --tfh-font-heading: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --tfh-font-body:    "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Type scale — fluid via slope-intercept clamp (375px → 1440px viewport)
       Root font-size is 10px (set by tfh.css Bootstrap legacy). All rem values below
       use 10px base. Formula: minVpRem = minVp/10; slope = (maxRem-minRem)/(maxVpRem-minVpRem);
       intercept = minRem - slope×minVpRem; vwCoeff = slope×100. */
    --tfh-type-size-hero:     clamp(3.6rem, 3.66vw + 2.23rem, 7.5rem);    /* full-width background-image header h1 — 36→75px */
    --tfh-type-size-display:  clamp(3.6rem, 3.66vw + 2.23rem, 7.5rem);    /* H1 / H2 — 36→75px */
    --tfh-type-size-large:    clamp(2.8rem, 2.44vw + 1.88rem, 5.4rem);    /* .large impact headings — 28→54px */
    --tfh-type-size-h2:       clamp(4rem, 3.29vw + 2.77rem, 7.5rem);      /* 40→75px */
    --tfh-type-size-h3:       clamp(4.48rem, 0.60vw + 4.25rem, 5.12rem);  /* 44.8→51.2px */
    --tfh-type-size-h4:       clamp(2.2rem, 1.69vw + 1.57rem, 4rem);      /* 22→40px */
    --tfh-type-size-h5:       clamp(1.7rem, 0.47vw + 1.52rem, 2.2rem);    /* 17→22px */
    --tfh-type-size-h6:       18px;
    --tfh-type-size-special:  clamp(1.8rem, 0.56vw + 1.59rem, 2.4rem);    /* special paragraphs, card body — 18→24px */
    --tfh-type-size-subtitle: clamp(1.6rem, 0.56vw + 1.39rem, 2.2rem);    /* small titles, card labels — 16→22px */
    --tfh-type-size-lead:     clamp(2rem, 0.188vw + 1.93rem, 2.2rem);     /* 20→22px */
    --tfh-type-size-body:     18px;   /* fixed — body text doesn't scale */
    --tfh-type-size-small:    14px;   /* fixed */
    --tfh-type-size-eyebrow:  14px;   /* fixed */

    /* Type weights — Adobe Fonts remaps Display Pro differently than Text Pro:
       Text Pro:    55 Roman = 400,  65 Medium = 500  (standard mapping)
       Display Pro: 55 Roman = 500,  65 Medium = 600  (Adobe offset) */
    --tfh-type-weight-medium:         500;   /* Text Pro 65 Medium */
    --tfh-type-weight-display-medium: 600;   /* Display Pro 65 Medium */
    --tfh-type-weight-display-roman:  500;   /* Display Pro 55 Roman */
    --tfh-type-weight-bold:           700;
    --tfh-type-weight-normal:         400;   /* Text Pro 55 Roman */
    --tfh-type-weight-light:          300;

    /* Line heights */
    --tfh-type-lh-heading: 1.02;   /* NHG spec: 102% */
    --tfh-type-lh-tight:   0.8;    /* .ministry-template h2 — impact heads */
    --tfh-type-lh-body:    1.43;   /* Bootstrap baseline */
    --tfh-type-lh-loose:   1.75;

    /* Letter spacing */
    --tfh-type-tracking-heading: -0.027em;  /* proportional -2px at 75px */
    --tfh-type-tracking-ui:      -0.5px;    /* buttons, special paragraphs, subtitles */
    --tfh-type-tracking-wide:    6px;       /* eyebrow / all-caps labels */
    --tfh-type-tracking-body:    -0.01em;   /* default body tracking — applies wherever --tfh-font-body is set unless overridden */
    --tfh-type-tracking-tight:   -0.025em;  /* slightly tighter than body — large card headlines and similarly compact display text */

    /* Brand green — primary brand color family */
    --brand-green:       rgb(93, 111, 84);
    --brand-green-dark:  rgb(45, 60, 38);
    --brand-green-light: rgb(177, 193, 169);
    --ink:        rgb(0, 0, 0);
    --ink-2:      rgb(33, 41, 31);
    --muted:      rgb(112, 115, 120);
    --muted-2:    rgb(169, 174, 178);
    --line:       rgb(226, 227, 230);
    --line-2:     rgb(216, 216, 216);
    --blue:       rgb(45, 91, 255);
    --bg-soft:    rgb(245, 245, 245);
    --radius:     20px;
    --radius-sm:  12px;
}


/* ===========================================================
   2 — BASE
   Minimal element-level additions only. No overrides of rules
   that already exist in the legacy stack.
   =========================================================== */
/* Hide focus ring on mouse-click; keep it sharp for keyboard nav. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

/* Global body font — NHG Display Pro replaces Proxima Nova sitewide. */
body {
    font-family: var(--tfh-font-body);
    letter-spacing: var(--tfh-type-tracking-body);
}

/* H1–H4 — NHG Text Pro, Medium weight, new scale.
   Overrides tfh-2022.css `h1–h6 { font-family: proxima-nova }` and
   tfh.css `.lead, h1 { text-transform: uppercase; letter-spacing: 2px; }`. */
h1, h2, h3, h4 {
    font-family: var(--tfh-font-heading);
    font-weight: var(--tfh-type-weight-medium);
    line-height: var(--tfh-type-lh-heading);
    letter-spacing: var(--tfh-type-tracking-heading);
    text-transform: none;
}
h1 { font-size: var(--tfh-type-size-display); }
h2 { font-size: var(--tfh-type-size-h2); }
h3 { font-size: var(--tfh-type-size-h3); }
h4      { font-size: var(--tfh-type-size-h4); }

/* H5, H6 — Text Pro medium, UI scale */
h5, h6 {
    font-family: var(--tfh-font-heading);
    font-weight: var(--tfh-type-weight-medium);
    letter-spacing: var(--tfh-type-tracking-ui);
    text-transform: none;
}
h5 { font-size: var(--tfh-type-size-h5); }
h6 { font-size: var(--tfh-type-size-h6); }

/* Nav links — Display Pro 55 Roman (500), 20px, no uppercase */
.navbar-tfh .navbar-nav > li > a {
    font-family: var(--tfh-font-body);
    font-size: 20px;
    font-weight: var(--tfh-type-weight-display-roman);
    text-transform: none;
    letter-spacing: normal;
}
/* Nav brand — Proxima Nova, all caps (legacy style retained by design) */
.navbar-tfh .navbar-brand {
    font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}
/* Megamenu section headers — override tfh-2022.css `.megamenu .h2 { text-transform: uppercase }` */
.megamenu .h2 {
    text-transform: none;
    letter-spacing: normal;
}

/* Footer — Text Pro, no uppercase
   Overrides tfh.css `.footer-nav .footer-nav-header { text-transform: uppercase; letter-spacing: 1px }` */
footer,
.footer-contact {
    font-family: var(--tfh-font-heading);
}
.footer-nav .footer-nav-header {
    font-size: 20px;
    text-transform: none;
    letter-spacing: normal;
}
.footer-nav a {
    font-size: 18px;
}


/* ===========================================================
   3 — BUTTONS (.tfh-btn family)
   Phase 2a fills this section.
   Figma ref: tfh-brain/raw/assets/figma-buttons-2026-04-30/
   Audit ref: css-audit-2026-04-30 §2.1
   Variants planned:
     .tfh-btn                 base (outlined, border + text)
     .tfh-btn--filled         solid fill
     .tfh-btn--ghost          translucent (replaces .btn-ghost)
     .tfh-btn--icon           round icon-only (carousel arrows)
     .tfh-btn--link           text + trailing arrow link
     .tfh-btn--link-accent    blue large inline link (§ "big inline")
     .tfh-btn--dropdown       outlined with chevron trigger
   States on each: :hover, :focus-visible, :disabled, loading
   =========================================================== */
/* 3.1 — Base / Secondary (outlined) */
/* a.tfh-btn listed alongside .tfh-btn to win over body-class `a` color rules
   (e.g. body.missions a { color: green }) which have higher specificity (0,1,1)
   than a plain class selector (0,1,0). */
.tfh-btn,
a.tfh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--tfh-btn-padding-y) var(--tfh-btn-padding-x);
    font-family: var(--tfh-font-body);
    font-size: var(--tfh-btn-font-size);
    font-weight: var(--tfh-btn-font-weight);
    letter-spacing: var(--tfh-type-tracking-ui);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--tfh-btn-radius);
    border: var(--tfh-btn-border-w) solid var(--tfh-btn-dark);
    color: var(--tfh-btn-dark);
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tfh-btn:hover,
a.tfh-btn:hover {
    background: var(--tfh-btn-dark);
    color: #fff;
    text-decoration: none;
}

/* 3.2 — Primary (filled dark) */
.tfh-btn.tfh-btn--primary,
a.tfh-btn.tfh-btn--primary {
    background: var(--tfh-btn-dark);
    color: #fff;
    border-color: var(--tfh-btn-dark);
}
.tfh-btn.tfh-btn--primary:hover,
a.tfh-btn.tfh-btn--primary:hover {
    background: transparent;
    color: var(--tfh-btn-dark);
    text-decoration: none;
}

/* 3.3 — Link / Tertiary (text + optional arrow, no border) */
.tfh-btn.tfh-btn--link {
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}
.tfh-btn.tfh-btn--link:hover {
    border-color: transparent;
    background: transparent;
    color: var(--tfh-btn-dark);
    text-decoration: none;
}
/* Text span — underline scoped here, not on the full button */
.tfh-btn.tfh-btn--link .text {
    position: relative;
}
.tfh-btn.tfh-btn--link .text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    opacity: 0;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tfh-btn.tfh-btn--link:hover .text::after {
    opacity: 1;
    transform: translateY(3px);
}
/* Arrow nudge — works for icon before or after text */
.tfh-btn.tfh-btn--link .arrow {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tfh-btn.tfh-btn--link:hover .arrow {
    transform: translateX(4px);
}
.tfh-btn.tfh-btn--link:hover .arrow--before {
    transform: translateX(-4px);
}

/* 3.4 — Link-Accent (large blue inline statement) */
.tfh-btn.tfh-btn--link-accent {
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    color: var(--tfh-btn-blue);
    background: transparent;
    font-size: 22px;
    font-weight: 600;
}
.tfh-btn.tfh-btn--link-accent:hover {
    border-color: transparent;
    background: transparent;
    color: var(--tfh-btn-blue);
    text-decoration: none;
}
.tfh-btn.tfh-btn--link-accent .text {
    position: relative;
}
.tfh-btn.tfh-btn--link-accent .text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    opacity: 0;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tfh-btn.tfh-btn--link-accent:hover .text::after {
    opacity: 1;
    transform: translateY(3px);
}
.tfh-btn.tfh-btn--link-accent .arrow {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tfh-btn.tfh-btn--link-accent:hover .arrow {
    transform: translateX(5px);
}

/* 3.5 — Icon (circular, filled dark by default) */
.tfh-btn.tfh-btn--icon {
    padding: 0;
    border-radius: 50%;
    width: var(--tfh-btn-icon-size);
    height: var(--tfh-btn-icon-size);
    justify-content: center;
    background: var(--tfh-btn-dark);
    color: #fff;
    border-color: var(--tfh-btn-dark);
}
.tfh-btn.tfh-btn--icon:hover {
    background: transparent;
    color: var(--tfh-btn-dark);
    text-decoration: none;
}
.tfh-btn.tfh-btn--icon.swiper-button-disabled {
    background: var(--gray-200);
    border-color: var(--gray-200);
    color: var(--gray-400);
    opacity: 1;
    pointer-events: none;
}

/* 3.6 — Dropdown */
.tfh-btn.tfh-btn--dropdown {
    /* inherits secondary styles */
}
.tfh-btn.tfh-btn--dropdown .fa-chevron-down {
    margin-left: 8px;
    display: inline-block;
    transition: transform 0.2s ease;
}
.tfh-btn.tfh-btn--dropdown.is-open .fa-chevron-down {
    transform: rotate(180deg);
}

.tfh-dropdown {
    position: relative;
    display: inline-block;
}
.tfh-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1.5px solid var(--tfh-btn-dark);
    border-radius: var(--tfh-btn-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 200;
    overflow: hidden;
}
.tfh-dropdown__menu.is-open {
    display: block;
}
.tfh-dropdown__menu li {
    border-bottom: 1px solid #e8e8e8;
}
.tfh-dropdown__menu li:last-child {
    border-bottom: none;
}
.tfh-dropdown__menu li a {
    display: block;
    padding: 13px 26px;
    color: var(--tfh-btn-dark);
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--tfh-btn-font-size);
    font-weight: var(--tfh-btn-font-weight);
}
.tfh-dropdown__menu li a:hover {
    background: var(--tfh-btn-dark);
    color: #fff;
    text-decoration: none;
}

/* 3.7 — Shared states */
.tfh-btn:focus-visible {
    outline: 3px solid var(--tfh-btn-blue);
    outline-offset: 2px;
}
.tfh-btn[disabled],
.tfh-btn.tfh-btn--disabled {
    opacity: 0.4;
    pointer-events: none;
}
.tfh-btn.tfh-btn--loading {
    opacity: 0.7;
    pointer-events: none;
}
@keyframes tfh-btn-spin {
    to { transform: rotate(360deg); }
}
.tfh-btn__spinner {
    display: inline-block;
    animation: tfh-btn-spin 0.8s linear infinite;
}

/* 3.8 — Small button */
.tfh-btn.tfh-btn--sm {
    font-size: var(--tfh-btn-font-size-sm);
    padding: 10px 20px;
}

/* 3.9 — Dark context (Approach B — parent-context auto-inversion)
   Any .tfh-btn inside these wrappers inverts automatically.
   Add .on-dark to any dark container not covered by the selectors below.
   .on-dark does NOT set a background — the container provides its own dark bg. */

/* Secondary on dark: white outline → white fill on hover */
.background-color-primary .tfh-btn,
.background-color-secondary .tfh-btn,
[class*="dark-bg"] .tfh-btn,
.on-dark .tfh-btn {
    color: #fff;
    border-color: #fff;
}
.background-color-primary .tfh-btn:hover,
.background-color-secondary .tfh-btn:hover,
[class*="dark-bg"] .tfh-btn:hover,
.on-dark .tfh-btn:hover {
    background: #fff;
    color: var(--tfh-btn-dark);
}

/* Primary on dark: white fill → hollow white outline on hover */
/* a.tfh-btn--primary listed alongside .tfh-btn--primary to win over
   a.tfh-btn.tfh-btn--primary (0,2,1) which beats plain .on-dark .tfh-btn--primary (0,2,0) */
.background-color-primary .tfh-btn--primary,
.background-color-primary a.tfh-btn--primary,
.background-color-secondary .tfh-btn--primary,
.background-color-secondary a.tfh-btn--primary,
[class*="dark-bg"] .tfh-btn--primary,
[class*="dark-bg"] a.tfh-btn--primary,
.on-dark .tfh-btn--primary,
.on-dark a.tfh-btn--primary {
    background: #fff;
    color: var(--tfh-btn-dark);
    border-color: #fff;
}
.background-color-primary .tfh-btn--primary:hover,
.background-color-primary a.tfh-btn--primary:hover,
.background-color-secondary .tfh-btn--primary:hover,
.background-color-secondary a.tfh-btn--primary:hover,
[class*="dark-bg"] .tfh-btn--primary:hover,
[class*="dark-bg"] a.tfh-btn--primary:hover,
.on-dark .tfh-btn--primary:hover,
.on-dark a.tfh-btn--primary:hover {
    background: transparent;
    color: #fff;
}

/* Link on dark: white text, never gets white bg fill */
.background-color-primary .tfh-btn--link,
.background-color-secondary .tfh-btn--link,
[class*="dark-bg"] .tfh-btn--link,
.on-dark .tfh-btn--link {
    color: #fff;
    border-color: transparent;
}
.background-color-primary .tfh-btn--link:hover,
.background-color-secondary .tfh-btn--link:hover,
[class*="dark-bg"] .tfh-btn--link:hover,
.on-dark .tfh-btn--link:hover {
    background: transparent !important;
    border-color: transparent;
    color: #fff;
}

/* Link-accent on dark: lightened blue (#89b4fa), never gets white bg fill */
.background-color-primary .tfh-btn--link-accent,
.background-color-secondary .tfh-btn--link-accent,
[class*="dark-bg"] .tfh-btn--link-accent,
.on-dark .tfh-btn--link-accent {
    color: #89b4fa;
    border-color: transparent;
}
.background-color-primary .tfh-btn--link-accent:hover,
.background-color-secondary .tfh-btn--link-accent:hover,
[class*="dark-bg"] .tfh-btn--link-accent:hover,
.on-dark .tfh-btn--link-accent:hover {
    background: transparent !important;
    color: #89b4fa;
}

/* Icon on dark: white fill → hollow white outline on hover */
.background-color-primary .tfh-btn--icon,
.background-color-secondary .tfh-btn--icon,
[class*="dark-bg"] .tfh-btn--icon,
.on-dark .tfh-btn--icon {
    background: #fff;
    color: var(--tfh-btn-dark);
    border-color: #fff;
}
.background-color-primary .tfh-btn--icon:hover,
.background-color-secondary .tfh-btn--icon:hover,
[class*="dark-bg"] .tfh-btn--icon:hover,
.on-dark .tfh-btn--icon:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

/* ===========================================================
   4 — TYPOGRAPHY (.tfh-heading-*, .tfh-body, etc.)
   Phase 3 fills this section.
   Audit ref: css-audit-2026-04-30 §2.3
   =========================================================== */
/* .tfh-heading-display — hero / large campaign heading (H1/H2 scale) */
.tfh-heading-display {
    font-family: var(--tfh-font-heading);
    font-size: var(--tfh-type-size-display);
    font-weight: var(--tfh-type-weight-medium);
    line-height: var(--tfh-type-lh-heading);
    letter-spacing: var(--tfh-type-tracking-heading);
}

/* .tfh-heading-section — in-body section heading (H2 scale) */
.tfh-heading-section {
    font-family: var(--tfh-font-heading);
    font-size: var(--tfh-type-size-h2);
    font-weight: var(--tfh-type-weight-medium);
    line-height: var(--tfh-type-lh-heading);
    letter-spacing: var(--tfh-type-tracking-heading);
}

/* .tfh-lead — prominent intro paragraph */
.tfh-lead {
    font-family: var(--tfh-font-body);
    font-size: var(--tfh-type-size-lead);
    line-height: 1.5;
    letter-spacing: var(--tfh-type-tracking-body);
    color: var(--muted);
    margin: 0;
}

/* .tfh-special — prominent paragraph under headings or in cards */
.tfh-special {
    font-family: var(--tfh-font-body);
    font-size: var(--tfh-type-size-special);
    font-weight: var(--tfh-type-weight-normal);
    letter-spacing: var(--tfh-type-tracking-ui);
    line-height: var(--tfh-type-lh-body);
}

/* .tfh-subtitle — small titles, bolded card text, stand-alone links */
.tfh-subtitle {
    font-family: var(--tfh-font-body);
    font-size: var(--tfh-type-size-subtitle);
    font-weight: var(--tfh-type-weight-display-medium);
    letter-spacing: var(--tfh-type-tracking-ui);
}

/* .tfh-body — standard paragraph text */
.tfh-body {
    font-family: var(--tfh-font-body);
    font-size: var(--tfh-type-size-body);
    font-weight: var(--tfh-type-weight-normal);
    line-height: var(--tfh-type-lh-body);
    letter-spacing: var(--tfh-type-tracking-body);
}

/* .tfh-small — caption / fine print */
.tfh-small {
    font-family: var(--tfh-font-body);
    font-size: var(--tfh-type-size-small);
    font-weight: var(--tfh-type-weight-normal);
    line-height: var(--tfh-type-lh-body);
    letter-spacing: var(--tfh-type-tracking-body);
}

/* Fluid display headings — visit campus / new design system */
.display-xl {
    font-family: var(--tfh-font-heading);
    font-weight: var(--tfh-type-weight-medium);
    font-size: clamp(8rem, 1.50vw + 7.44rem, 9.6rem); /* 80→96px */
    line-height: 0.96;
    color: var(--ink);
    margin: 0;
}

.display-md {
    font-family: var(--tfh-font-heading);
    font-weight: var(--tfh-type-weight-medium);
    font-size: clamp(2.8rem, 2.07vw + 2.03rem, 5rem); /* 28→50px */
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

/* Section-level label — precedes headings or card titles.
   For inline field labels (stats, data rows) use .tfh-label instead. */
.eyebrow {
    font-family: var(--tfh-font-body);
    font-weight: var(--tfh-type-weight-display-roman);
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 var(--space-xs);
}

/* Field label — small uppercase label above a stat value or data row.
   Distinct from .eyebrow: smaller, tighter margin, used inline with data. */
.tfh-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0 0 var(--space-2xs);
}
.tfh-card--media .tfh-label,
.tfh-card--dark .tfh-label  { color: rgba(255,255,255,0.55); }
.tfh-card--split .tfh-label { color: rgba(255,255,255,0.55); }


/* .body — utility class for paragraph body text */
.body {
    font-family: var(--tfh-font-body);
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: var(--tfh-type-tracking-body);
    color: var(--muted);
    margin: 0;
}

/* Hero header h1 — full-width background-image headers.
   Overrides legacy tfh.css `header h1 { font-size: 56px; }` and
   `.lead, h1 { text-transform: uppercase; letter-spacing: 2px; }` sitewide. */
header h1 {
    font-size: var(--tfh-type-size-hero);
    text-transform: none;
    letter-spacing: var(--tfh-type-tracking-heading);
}
/* Override legacy `header { text-transform: uppercase; letter-spacing: 1px; }` */
header {
    text-transform: none;
    letter-spacing: normal;
}

@media only screen and (max-width: 480px) {
    header h1 {
        font-size: 10.5vw;
    }
}


/* ===========================================================
   5 — LAYOUT
   Shell container + primitives extracted from page <style is:global> blocks.
   Phase 4 Step 3 moves rules here; pages delete duplicates.
   Extraction list: css-page-extraction-sweep-2026-04-30 §A2, A5
   =========================================================== */
/* Shell — max-width layout container */
.shell {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 clamp(1.6rem, 4.51vw - 0.09rem, 6.4rem); /* 16→64px, 375→1440px */
}

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

/* Light-background header — white bg, dark text */
.header--light {
    background: #fff;
    color: #000;
}
/* Interior page header — reduced vertical padding vs full hero */
.header--sm { padding: 70px 0 40px; }

/* Page-title h1 inside a header-grid uses bold weight for visual impact */
.header-grid__text h1 { font-weight: var(--tfh-type-weight-bold); }

/* Header grid — text + image split layout for ministry page heroes */
.header-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5rem;
}
@media only screen and (min-width: 992px) {
    .header-grid {
        grid-template-columns: 40% 60%;
        gap: 0;
    }
    .header-grid__text {
        margin-top: 100px;
        margin-bottom: 100px;
        padding-right: 2rem;
    }
    .header-grid__img img {
        width: 100%;
        height: 100%;
    }
}

/* Section — consistent vertical rhythm wrapper */
.tfh-section       { padding: var(--space-2xl) 0; }
.tfh-section--sm   { padding: var(--space-xl) 0; }
.tfh-section--dark  { background: var(--ink); color: #fff; }
.tfh-section--muted { background: var(--bg-soft); }
.tfh-section--brand { background: var(--brand-green); color: #fff; }

/* Centered eyebrow + title + intro block at top of a section */
.tfh-section__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-lg);
}

/* Content grids — prefer these over Bootstrap .row/.col for new designs */
.tfh-grid { display: grid; gap: var(--space-sm); }

/* Intrinsic responsive — columns reflow when they'd fall below min-width. No breakpoints needed.
   min() prevents overflow on screens narrower than the min value.
   2col: 2→1 at ~750px | 3col: 3→2 at ~900px, 2→1 at ~610px | 4col: cascades 4→3→2→1 */
.tfh-grid--2col { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.tfh-grid--3col { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.tfh-grid--4col { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* Sidebar grids use unequal ratios — auto-fill can't express these, so keep a single breakpoint */
.tfh-grid--sidebar     { grid-template-columns: 1fr 1.4fr; }
.tfh-grid--sidebar-rev { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 700px) {
    .tfh-grid--sidebar,
    .tfh-grid--sidebar-rev { grid-template-columns: 1fr; }
}

/* ── Hero — 50/50 split hero with portrait image and floating info card ── */
.hero-section { padding: var(--space-2xl) 0; }
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}
.hero-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-md); }
.hero-photo-wrap { position: relative; }
.hero-photo {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: min(780px, calc(100vh - 160px));
    background-size: cover;
    background-position: center;
}
.hero-info-card {
    position: absolute;
    left: calc(-1 * var(--space-md));
    bottom: var(--space-md);
    background: #fff;
    border-radius: var(--radius);
    padding: var(--space-md);
    box-shadow: 0 24px 48px -16px rgba(0,0,0,0.18);
    min-width: 320px;
}
.hero-info-row {
    display: flex;
    align-items: baseline;
    column-gap: var(--space-sm);
    flex-wrap: wrap;
}
.hero-info-detail {
    font-family: var(--tfh-font-body);
    font-size: var(--tfh-type-size-lead);
    color: var(--muted);
    letter-spacing: var(--tfh-type-tracking-body);
    white-space: nowrap;
}
@media (max-width: 900px) {
    .hero-section { padding: calc(var(--navbar-h) + var(--space-md)) 0 var(--space-lg); }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-photo { aspect-ratio: 1 / 1; }
    .hero-photo-wrap { padding-bottom: 100px; }
    .hero-info-card {
        width: calc(100% - var(--space-sm));
        min-width: 0;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
    }
}


/* ===========================================================
   6 — MINISTRY TEMPLATE
   Shared rhythm for .ministry-template pages.
   Phase 4 Step 3 moves rules here; pages delete duplicates.
   Extraction list: css-page-extraction-sweep-2026-04-30 §A3, B1, B2
   =========================================================== */
.ministry-template p {
    line-height: 1.4;
    margin-bottom: 2rem;
}
.ministry-template .info-section {
    margin-top: 50px;
    margin-bottom: 50px;
}
.ministry-template .section-title {
    margin-bottom: 4rem;
}
@media only screen and (max-width: 768px) {
    .ministry-template .container {
        max-width: none;
    }
}


/* ===========================================================
   7 — FAQ COMPONENTS
   Two global FAQ patterns:
     faq-lg__* — Bootstrap-collapse accordion (baptism, CR, thelanding)
     faq-block-* — Sidebar-sticky + button accordion (visit/campus)
   =========================================================== */

/* ── faq-lg (Bootstrap collapse accordion) ────────────────── */
.faq-lg__item {
    border-bottom: 1px solid var(--gray-200);
    padding: 25px 0;
}
.faq-lg__item:first-child {
    border-top: 1px solid var(--gray-200);
}
.faq-lg__question {
    margin-bottom: 0;
    padding-right: 30px;
    position: relative;
}
.faq-lg__question a {
    color: inherit;
    font-weight: 400;
}
.faq-lg__question:focus,
.faq-lg__question:hover {
    text-decoration: none;
}
.faq-lg__answer {
    padding: 20px 0 35px;
    color: var(--gray-800);
}
.chevron {
    float: right;
    width: 18px;
    height: 18px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .25s ease;
    position: absolute;
    right: 0;
    top: 50%;
}
.faq-lg__question a:not(.collapsed) .chevron {
    transform: translateY(-50%) rotate(-135deg);
}
.collapsing {
    will-change: height;
    transition: height .4s ease-in-out;
}

/* ── faq-block (sidebar-sticky + button accordion) ─────────── */
.faq-block-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 80px;
    align-items: start;
}
.faq-block-sticky { position: sticky; top: 32px; }
.faq-block__item { border-top: 1px solid var(--line); }
.faq-block__item:last-child { border-bottom: 1px solid var(--line); }
.faq-block__question {
    width: 100%; display: flex;
    justify-content: space-between; align-items: center;
    padding: 28px 0; background: transparent; border: none;
    cursor: pointer; text-align: left;
    font-family: var(--tfh-font-heading);
    font-size: 22px; font-weight: 500;
    letter-spacing: -0.022em; color: var(--ink);
}
.faq-block__question span { padding-right: var(--space-sm); }
.faq-block__chevron {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.faq-block__item.is-open .faq-block__chevron { transform: rotate(180deg); }
.faq-block__answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-block__item.is-open .faq-block__answer { max-height: 400px; }
.faq-block__answer p {
    padding: 0 0 28px;
    margin: 0; max-width: 720px;
    font-size: 19px; line-height: 1.5;
    letter-spacing: -0.012em; color: var(--muted);
}
@media (max-width: 700px) {
    .faq-block-grid { grid-template-columns: 1fr; gap: 40px; }
    .faq-block-sticky { position: static; }
}


/* ===========================================================
   8 — CARDS
   Card family patterns.
   Phase 4 Step 3 moves rules here; pages delete duplicates.
   =========================================================== */
/* ----- Base card ----- */
.tfh-card {
    --card-radius: var(--radius);
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* Standard image block on top of the card */
.tfh-card__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
}
.tfh-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Text + actions below the media */
.tfh-card__body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.tfh-card__title {
    font-family: var(--tfh-font-heading);
    font-size: var(--tfh-type-size-h5);
    font-weight: var(--tfh-type-weight-medium);
    line-height: var(--tfh-type-lh-heading);
    letter-spacing: var(--tfh-type-tracking-heading);
    color: var(--ink);
    margin: 0;
}
.tfh-card__text {
    font-family: var(--tfh-font-body);
    font-size: var(--tfh-type-size-body);
    color: var(--muted);
    line-height: var(--tfh-type-lh-body);
    letter-spacing: var(--tfh-type-tracking-body);
    margin: 0;
}
.tfh-card__meta {
    font-family: var(--tfh-font-body);
    font-size: var(--tfh-type-size-small);
    color: var(--muted-2);
    letter-spacing: var(--tfh-type-tracking-body);
    margin: 0;
}
.tfh-card__actions {
    margin-top: auto;
    padding-top: var(--space-sm);
}

/* ----- Media card — background-image + gradient overlay ----- */
.tfh-card--media {
    background: var(--ink) center/cover no-repeat;
    position: relative;
    aspect-ratio: 4 / 5;
}
.tfh-card--media .tfh-card__media { display: none; }
.tfh-card--media .tfh-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
    border-radius: inherit;
    pointer-events: none;
}
.tfh-card--media .tfh-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-lg);
    color: #fff;
}
.tfh-card--media .eyebrow { color: rgba(255,255,255,0.75); }
.tfh-card--media .tfh-card__title   { color: #fff; }
.tfh-card--media .tfh-card__text    { color: rgba(255,255,255,0.8); }

/* 16:9 media card — for video / landscape content */
.tfh-card--media.tfh-card--wide { aspect-ratio: 16 / 9; }

/* Play button overlay — top-right corner of video thumbnail */
.tfh-card__play {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tfh-card__media:hover .tfh-card__play {
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}
.tfh-card__play svg {
    width: 24px;
    height: 26px;
    fill: var(--ink);
    margin-left: 4px;
}

/* ----- Dark card — solid dark background ----- */
.tfh-card--dark {
    background: var(--ink);
    color: #fff;
}
.tfh-card--dark .eyebrow { color: rgba(255,255,255,0.6); }
.tfh-card--dark .tfh-card__title   { color: #fff; }
.tfh-card--dark .tfh-card__text    { color: rgba(255,255,255,0.7); }

/* ----- Muted card — light gray bg, no image ----- */
.tfh-card--muted { background: var(--bg-soft); }

/* ----- Tall media card — min-height floor instead of fixed aspect-ratio -----
   Pair with .tfh-card--media. Used for full-height worship/ministry feature cards. */
.tfh-card--tall {
  aspect-ratio: unset;
  min-height: clamp(400px, 50vw, 600px);
}

/* ----- Video card — 16:9 thumbnail + play button, dark body below -----
   Pair with .tfh-card--dark. Place .tfh-card__play inside .tfh-card__media. */
.tfh-card--video .tfh-card__media {
  aspect-ratio: 16 / 9;
  position: relative;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.tfh-card--video .tfh-card__body { gap: var(--space-sm); }

/* Bottom-fade gradient for video thumbnails. Place as first child of .tfh-card__media. */
.tfh-card__fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,1) 100%);
  pointer-events: none;
}

/* Stat/footer row — label+value pairs and/or a CTA at the bottom of a card body.
   Two children → equal columns (e.g. two stats, or one stat + button). */
.tfh-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.25);
}
.tfh-card--feature .tfh-card__stats { border-top-color: var(--line); }
.tfh-card__stats > .tfh-btn { justify-self: end; }

/* Stat value — the data line beneath a .tfh-label inside .tfh-card__stats */
.tfh-card__stat-value {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}
.tfh-card--feature .tfh-card__stat-value { color: var(--ink); }

/* Card footer — border-top separator before a meta row or CTA */
.tfh-card__footer {
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.tfh-card--video .tfh-card__footer,
.tfh-card--dark .tfh-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}
.tfh-card--feature .tfh-card__footer { border-top-color: var(--line); }

/* ----- Feature card — centered logo/image on top, white gradient fades into body -----
   White bg, logo zone on top (flex centered), body below the gradient. */
.tfh-card--feature {
  background: #fff;
  min-height: 560px;
}
.tfh-card--feature .tfh-card__media {
  aspect-ratio: unset;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  min-height: 220px;
  padding: var(--space-lg);
}
.tfh-card--feature .tfh-card__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.tfh-card--feature .tfh-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 68%);
  pointer-events: none;
}
.tfh-card--feature .tfh-card__body {
  position: relative;
  z-index: 1;
}

/* ----- Split card — brand-green two-column block: body left, photo right -----
   Used for featured ministry sections. Collapses to single column on mobile
   and hides the photo column. */
.tfh-card--split {
  --card-radius: 28px;
  background: var(--brand-green);
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 560px;
}
.tfh-card--split .tfh-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
}
.tfh-card--split .eyebrow    { color: rgba(255,255,255,0.65); }
.tfh-card--split .tfh-card__text { color: rgba(255,255,255,0.85); }
.tfh-card--split.on-dark h2,
.tfh-card--split.on-dark h3 { color: #fff; }
.tfh-card--split.on-dark h2 { margin-bottom: var(--space-sm); }
.tfh-card--split .tfh-card__media {
  aspect-ratio: unset;
  background-size: cover;
  background-position: center;
  position: relative;
}
/* Tablet: equal columns, image stays visible */
@media (max-width: 960px) {
  .tfh-card--split { grid-template-columns: 1fr 1fr; min-height: 480px; }
}
/* Mobile: image on top, content below */
@media (max-width: 640px) {
  .tfh-card--split { grid-template-columns: 1fr; min-height: unset; }
  .tfh-card--split .tfh-card__media { order: -1; aspect-ratio: 4 / 3; min-height: 260px; }
}

/* Planned legacy extractions (Phase 4 Step 3):
     .card-black / .card-black a   (thelanding)
     .cta-card--h100               (thelanding — modifier for tfh-2022.css .cta-card) */

/* ----- Card element additions -----
   Headline: large display text inside a card body (26–32px range).
   Date, Tag, Series, Speaker: event/sermon card metadata.
   ---------------------------------------------------------------- */
.tfh-card__headline {
    font-family: var(--tfh-font-heading);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: var(--tfh-type-tracking-tight);
    line-height: 1.08;
}
.tfh-card--dark .tfh-card__headline,
.tfh-card--video .tfh-card__headline {
    max-width: 520px;
}
.tfh-card--media .tfh-card__headline {
    font-size: 32px;
    line-height: 1.05;
}
.tfh-card__date {
    font-size: 15px;
    opacity: 0.9;
    letter-spacing: -0.01em;
}
.tfh-card__tag {
    position: absolute; left: 20px; bottom: 20px;
    display: flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px; letter-spacing: 0.06em;
    text-transform: uppercase; font-weight: 500;
}
.tfh-card__series { font-size: 18px; font-weight: 500; }
.tfh-card__speaker { font-size: 14px; opacity: 0.6; letter-spacing: -0.01em; margin-top: 2px; }

/* Add top gap to the footer row inside video/dark cards */
.tfh-card--video .tfh-card__footer,
.tfh-card--dark .tfh-card__footer { margin-top: var(--space-xs); }


/* ===========================================================
   9 — COMPONENTS
   Shared UI widgets extracted from page styles.
   Phase 4 Step 3 moves rules here; pages delete duplicates.
   Extraction list: css-page-extraction-sweep-2026-04-30 §A4, A7, A8
   =========================================================== */
/* Pursuit book / resource section */
.pursuit-copy,
.pursuit-buy {
    padding-top: 0;
}
.pursuit-get-involved .album-wrapper {
    border-top: 6px solid #215E6B;
}
.pursuit-get-involved .album-wrapper h2 {
    font-size: 30px;
    margin-bottom: 30px;
}
.pursuit-get-involved .album-wrapper p {
    margin-bottom: 20px;
}
.album-wrapper ul {
    list-style: none;
    padding-left: 0;
}
a.legacy-play-button {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #215E6B;
    margin-top: 20px;
    margin-bottom: 10px;
}
.pursuit-resources {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.pursuit-army img {
    max-width: 300px;
}
.pursuit-army-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pursuit-army-img {
    max-width: 400px;
    padding: 30px;
}
.pursuit-army-text {
    max-width: 600px;
    padding: 30px;
}
@media only screen and (max-width: 768px) {
    .pursuit-army-flex {
        flex-direction: column;
    }
}

/* ----- CTA Banner (.tfh-banner) -----
   Full-width colored strip: headline left, buttons right.
   Appears on nearly every page — Download App, Next Steps, Other Ways to Give, etc. */
.tfh-banner {
    border-radius: var(--radius);
    padding: var(--space-xl) var(--space-2xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    background: var(--bg-soft);
}
.tfh-banner__text { flex: 1; }
.tfh-banner__title {
    font-family: var(--tfh-font-heading);
    font-size: var(--tfh-type-size-h4);
    font-weight: var(--tfh-type-weight-medium);
    line-height: var(--tfh-type-lh-heading);
    letter-spacing: var(--tfh-type-tracking-heading);
    color: inherit;
    margin: 0;
}
.tfh-banner__body {
    font-family: var(--tfh-font-body);
    font-size: var(--tfh-type-size-body);
    color: inherit;
    opacity: 0.8;
    letter-spacing: var(--tfh-type-tracking-body);
    margin: var(--space-2xs) 0 0;
}
.tfh-banner__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}
.tfh-banner--brand { background: var(--brand-green); color: #fff; }
.tfh-banner--dark  { background: var(--ink);   color: #fff; }

@media (max-width: 760px) {
    .tfh-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-lg) var(--space-md);
    }
}

/* ----- Carousel (.tfh-carousel) -----
   Wrapper for Swiper v11 instances. HTML structure:
     .tfh-carousel
       .tfh-carousel__header (optional — section title + controls)
         .tfh-carousel__controls
           button.tfh-btn.tfh-btn--icon.tfh-swiper-prev
           button.tfh-btn.tfh-btn--icon.tfh-swiper-next
       .swiper.tfh-swiper[data-swiper-options='{"loop":true}']
         .swiper-wrapper
           .swiper-slide > .tfh-card (any variant)
   Init: global script in Layout.astro reads data-swiper-options on .tfh-swiper */
.tfh-carousel { position: relative; }
.tfh-carousel__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.tfh-carousel__controls {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    flex-shrink: 0;
}
.tfh-swiper { overflow: hidden; }

/* ----- Steps list (.tfh-steps-*) -----
   Sidebar-sticky layout with numbered steps. Used on visit/campus.
   HTML structure:
     .tfh-steps-grid
       .tfh-steps-sticky  (header col — goes sticky on desktop)
       div                (steps col — border-top on the wrapper)
         .tfh-steps__item (each row)
           .tfh-steps__num
           div > .tfh-steps__title + p.tfh-steps__body
   ---------------------------------------------------------------- */
.tfh-steps-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
}
.tfh-steps-sticky { position: sticky; top: 32px; }
.tfh-steps__item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 32px;
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.tfh-steps__num {
    font-family: var(--tfh-font-heading);
    font-size: 36px; font-weight: 500;
    color: var(--brand-green); letter-spacing: -0.02em;
}
.tfh-steps__title {
    font-size: 32px; font-weight: 500;
    letter-spacing: -0.02em; margin-bottom: 12px; color: var(--ink);
}
.tfh-steps__body {
    font-size: 19px; color: var(--muted);
    line-height: 1.4; margin: 0;
}
@media (max-width: 700px) {
    .tfh-steps-grid { grid-template-columns: 1fr; gap: 40px; }
    .tfh-steps-sticky { position: static; }
}

/* ----- CTA card (.tfh-cta-card) -----
   Dark full-width card with heading+body on the left and
   stacked action buttons on the right.
   ---------------------------------------------------------------- */
.tfh-cta-card {
    background: var(--ink); color: #fff;
    border-radius: 28px; padding: 72px 64px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-lg); align-items: center;
}
.tfh-cta-card__actions {
    display: flex; flex-direction: column;
    gap: 12px; align-items: flex-start; justify-self: end;
}
@media (max-width: 700px) {
    .tfh-cta-card { grid-template-columns: 1fr; padding: 48px 32px; }
    .tfh-cta-card__actions { justify-self: start; }
}
.on-dark .tfh-lead { color: rgba(255,255,255,0.7); }
.tfh-cta-card .tfh-lead { max-width: 520px; margin-top: var(--space-sm); }


/* ===========================================================
   10 — FORMS (.tfh-form family)
   Phase 4+ fills this section.
   Audit ref: css-audit-2026-04-30 §2.2
   =========================================================== */
/* (Phase 4+) */


/* ===========================================================
   11 — UTILITIES
   Small helper classes.
   Phase 4 Step 3 moves rules here; pages delete duplicates.
   =========================================================== */
.gap-1 { gap: .5em; }
.gap-2 { gap: 1em; }
.gap-3 { gap: 2em; }

/* Icon button — circular icon-only button (carousel arrows, etc.) */
.icon-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.icon-btn:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.icon-btn[disabled],
.icon-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Still pending (not extracted in this run):
     .l-grid__stack   (thelanding — single-page, low extraction value) */