/**
 * Trade Pages — shared styles for /trades/<family>/ and /trades/<role>/ pages
 * Generated from trade-role-page-mockup.html and trade-family-mockup.html
 *
 * Consumes brand tokens from /shared/brand.css with hard-coded fallbacks.
 */

:root {
    --tp-primary: var(--gwk-primary, #3F5F2A);
    --tp-primary-dark: var(--gwk-primary-dark, #2E4020);
    --tp-primary-deep: #1a2410;     /* deeper than primary-dark, used in hero gradient */
    --tp-primary-soft: #E8EFE2;
    --tp-accent: var(--gwk-accent, #D49027);
    --tp-accent-dark: var(--gwk-accent-dark, #B8791F);
    --tp-accent-bright: #E8A82E;    /* brighter accent for use on dark hero bg */
    --tp-accent-soft: #FBEFD9;
    --tp-page-bg: #F7F7F5;          /* warm off-white, matches students.html */
    --tp-gray-50: #F9FAFB;
    --tp-gray-100: #F3F4F6;
    --tp-gray-200: #E5E7EB;
    --tp-gray-300: #D1D5DB;
    --tp-gray-500: #4B5563;
    --tp-gray-700: #374151;
    --tp-gray-900: #111827;
}

body {
    background: var(--tp-page-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* .cta-button + nav/header/footer rules removed 2026-05-09. They lived
   here as a duplicate of main.html's inline nav rules and competed with
   /shared/css/public-nav.css (the canonical source-of-truth, regenerated
   from main.html via scripts/extract-canonical-nav-css.js). Keeping a
   single source of truth ensures every page that loads public-nav.css
   gets the same font, size, spacing, and color the homepage uses. */

/* ============================================================
   SCROLL PROGRESS BAR
============================================================ */
.tp-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--tp-primary) 0%, var(--tp-accent) 100%);
    z-index: 100;
    transition: width 0.05s linear;
    pointer-events: none;
}

/* ============================================================
   BREADCRUMB
   Note: <nav class="tp-breadcrumb"> is a <nav> element. The canonical
   public-nav.css (mirrored from main.html) sets bare `nav { background:
   white; position: sticky; top: 0; box-shadow: ... }` — that cascades
   onto the breadcrumb without these overrides, making it sticky with a
   shadow and white panel. We reset those properties so the breadcrumb
   renders inline as plain text within the page flow.
============================================================ */
.tp-breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 0;
    font-size: 0.875rem;
    color: var(--tp-gray-500);
    background: transparent;
    position: static;
    box-shadow: none;
    z-index: auto;
}
.tp-breadcrumb a { color: var(--tp-gray-700); text-decoration: none; font-weight: 500; }
.tp-breadcrumb a:hover { color: var(--tp-primary); }
.tp-breadcrumb span.sep { margin: 0 0.5rem; color: var(--tp-gray-300); }
.tp-breadcrumb span.current { color: var(--tp-gray-700); }

/* ============================================================
   HERO (shared between role + family pages)
   Dark green gradient + drifting blueprint grid + radial atmosphere,
   matching the students.html design language.
============================================================ */
.tp-hero {
    position: relative;
    color: #fff;
    padding: 4.5rem 2rem 5.5rem;
    background: linear-gradient(135deg, var(--tp-primary-deep) 0%, var(--tp-primary-dark) 50%, var(--tp-primary) 100%);
    overflow: hidden;
    isolation: isolate;
}
/* Radial atmosphere */
.tp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(212, 144, 39, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(63, 95, 42, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
    animation: tp-hero-atmosphere 15s ease-in-out infinite alternate;
    z-index: 0;
}
@keyframes tp-hero-atmosphere {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-3%, -3%); }
}
/* Drifting blueprint grid */
.tp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(212, 144, 39, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 144, 39, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    animation: tp-grid-drift 25s linear infinite;
    z-index: 0;
}
@keyframes tp-grid-drift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

/* Family ornament — recolored for dark hero. Override stroke colors via CSS
   so the same SVG works on dark bg without re-authoring per-family. */
.tp-hero-ornament {
    position: absolute;
    top: -20px;
    right: -40px;
    width: 480px;
    height: 480px;
    /* No SVG-wide opacity. The static decorative paths already use
       rgba(255,255,255,0.5) for their stroke (see rules below) so they
       look appropriately faded. Flow dots stay at full opacity so the
       moving orange ball is actually visible — the previous opacity:0.32
       cascaded through CSS and made the dots ~32% opaque on every page. */
    pointer-events: none;
    animation: tp-ornament-drift 18s ease-in-out infinite alternate;
    z-index: 0;
}
.tp-hero-ornament path,
.tp-hero-ornament line,
.tp-hero-ornament rect,
.tp-hero-ornament circle:not(.tp-flow-dot):not(.tp-flow-dot-glow) {
    stroke: rgba(255, 255, 255, 0.5);
}
.tp-hero-ornament circle:not(.tp-flow-dot):not(.tp-flow-dot-glow)[fill] {
    fill: rgba(255, 255, 255, 0.5);
}
.tp-hero-ornament rect[fill]:not([fill="none"]) {
    fill: rgba(255, 255, 255, 0.5);
}
/* Orange accent group still uses orange — but brighter for visibility on dark */
.tp-hero-ornament g[stroke="#D49027"] line,
.tp-hero-ornament g[stroke="#D49027"] circle,
.tp-hero-ornament g[stroke="#D49027"] rect,
.tp-hero-ornament g[stroke="#D49027"] path {
    stroke: var(--tp-accent-bright);
}
.tp-hero-ornament g[stroke="#D49027"] circle[fill]:not([fill="none"]) {
    fill: var(--tp-accent-bright);
}

@keyframes tp-ornament-drift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-12px, 8px) rotate(2deg); }
}

.tp-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}
.tp-hero-eyebrow {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(212, 144, 39, 0.18);
    border: 1px solid rgba(212, 144, 39, 0.5);
    color: var(--tp-accent-bright);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    animation: tp-fade-down 0.7s ease-out;
}
@keyframes tp-fade-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tp-hero h1 {
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    font-weight: 900;
    line-height: 1.05;
    color: #fff;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
    max-width: 900px;
}
/* Word-by-word rise animation — wrap each word in <span class="tp-word"> in templates */
.tp-hero h1 .tp-word {
    display: inline-block;
    animation: tp-word-rise 0.8s ease-out backwards;
}
.tp-hero h1 .tp-word:nth-child(1) { animation-delay: 0.10s; }
.tp-hero h1 .tp-word:nth-child(2) { animation-delay: 0.18s; }
.tp-hero h1 .tp-word:nth-child(3) { animation-delay: 0.26s; }
.tp-hero h1 .tp-word:nth-child(4) { animation-delay: 0.34s; }
.tp-hero h1 .tp-word:nth-child(5) { animation-delay: 0.42s; color: var(--tp-accent-bright); }
.tp-hero h1 .tp-word:nth-child(6) { animation-delay: 0.50s; color: var(--tp-accent-bright); }
.tp-hero h1 .tp-word:nth-child(7) { animation-delay: 0.58s; color: var(--tp-accent-bright); }
@keyframes tp-word-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tp-hero-tagline {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.75rem;
    max-width: 680px;
    line-height: 1.55;
}
.tp-hero-cta-group { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* Hero ornament flow droplets — orange dots that travel a hidden SVG path */
.tp-flow-dot { fill: var(--tp-accent-bright); filter: drop-shadow(0 0 6px rgba(232, 168, 46, 0.95)); }
.tp-flow-dot-glow { fill: var(--tp-accent-bright); opacity: 0.45; }

/* ============================================================
   CTA BUTTONS
============================================================ */
.tp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    cursor: pointer;
}
/* Bronze gradient — WCAG AA with white text (4.94:1+); matches .career-card,
   .appr-callout, .browse-cta--jobs across student/SC callouts. */
.tp-btn-primary {
    background: linear-gradient(135deg, #7A4F12 0%, #7D4E11 100%);
    color: #fff;
}
.tp-btn-primary:hover {
    background: linear-gradient(135deg, #7D4E11 0%, #5C3A0D 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(154, 101, 25, 0.35);
}
.tp-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.tp-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

/* ============================================================
   SECTION SHELL — alternating subtle tint for visual rhythm
   The page used to read as one long flat scroll of white sections.
   Tinting every other section (warm-cream wash) breaks the page
   into clear chunks the eye can land on without being heavy-handed.
============================================================ */
.tp-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}
/* Tinted sections span full viewport width; the inner content stays
   centered via max-width on .tp-section. We achieve the full-bleed
   look using a wrapping pattern: the rule below applies a warm wash
   to the section background. Because .tp-section also has max-width:
   1200px, the tint is bounded — but the outer body-bg fills the gutter.
   For a true full-bleed alternation we'd need a wrapper element; this
   bounded version reads as a soft card and is intentional. */
main#main-content > section.tp-section:nth-of-type(even):not(.tp-faq):not(.tp-footer-cta) {
    background: linear-gradient(180deg, rgba(212, 144, 39, 0.04) 0%, rgba(63, 95, 42, 0.02) 100%);
    border-radius: 16px;
}
.tp-section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tp-accent-dark);
    margin-bottom: 0.75rem;
}
.tp-section-heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--tp-primary-dark);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}
.tp-section-intro {
    color: var(--tp-gray-700);
    max-width: 760px;
    margin-bottom: 2rem;
}

/* Scroll-reveal — content is visible by default to match students.html /
   veterans.html pattern. The .in-view class is still added by JS for any
   children that opt in (e.g., children of .tp-roles-grid), but the section
   itself is never hidden. Avoids mobile-blank when IntersectionObserver
   misfires under iOS Safari stacking-context edge cases. */
.tp-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ============================================================
   FAMILY STATS (family page) — translucent on dark hero
============================================================ */
.tp-family-stats { display: flex; gap: 1rem; margin-top: 1.75rem; flex-wrap: wrap; }
.tp-family-stat {
    padding: 0.95rem 1.35rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tp-family-stat strong {
    display: block;
    font-size: 1.65rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.tp-family-stat span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ============================================================
   ROLE CARDS (family page lists roles)
============================================================ */
.tp-roles-grid {
    display: grid;
    /* auto-fill + max width caps each card so 2-role families don't stretch
       to half the screen, and incomplete last rows (e.g. Transportation has
       7 roles → 3-3-1 used to leave one lonely card) center via justify-content. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}
.tp-role-card {
    position: relative;
    display: block;
    padding: 2rem;
    background: #fff;
    border: 2px solid var(--tp-gray-200);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.tp-role-card:hover {
    border-color: var(--tp-accent);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(63, 95, 42, 0.12);
    background: linear-gradient(180deg, #fff 0%, #fff8ec 100%);
}
.tp-role-card:hover .tp-role-arrow { transform: translateX(6px); color: var(--tp-accent-dark); }
.tp-role-card:hover .tp-role-glyph { transform: scale(1.05) rotate(-3deg); color: var(--tp-accent-dark); }
.tp-role-card:hover .tp-role-name { color: var(--tp-accent-dark); }
.tp-role-card:hover .tp-role-cta { color: var(--tp-accent-dark); }
.tp-role-glyph { width: 64px; height: 64px; margin-bottom: 1.25rem; transition: transform 0.4s ease; }
.tp-role-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tp-primary-dark);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.tp-role-variants {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--tp-primary-soft);
    color: var(--tp-primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.tp-role-desc { color: var(--tp-gray-700); margin-bottom: 1.25rem; font-size: 0.95rem; }
.tp-role-aliases { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.tp-role-alias {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: var(--tp-gray-50);
    color: var(--tp-gray-700);
    font-size: 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--tp-gray-200);
}
.tp-role-alias.featured {
    background: var(--tp-accent-soft);
    color: var(--tp-accent-dark);
    border-color: var(--tp-accent);
    font-weight: 600;
}
.tp-role-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tp-primary);
}
.tp-role-arrow { display: inline-block; transition: all 0.25s ease; }

/* ============================================================
   ALSO CALLED — staggered pill cluster (role page)
============================================================ */
.tp-also-called {
    background: var(--tp-gray-50);
    border-top: 1px solid var(--tp-gray-200);
    border-bottom: 1px solid var(--tp-gray-200);
}
.tp-pill-cluster { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1rem; }
.tp-pill {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    background: #fff;
    border: 1.5px solid var(--tp-gray-200);
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--tp-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.tp-pill:hover {
    border-color: var(--tp-primary);
    color: var(--tp-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(63, 95, 42, 0.12);
}

/* ============================================================
   FLAT SECTION GRADIENTS — give visual rhythm between hero,
   gray sections, and dark sections (matches students.html).
   Subtle green-to-white wash on narrative + paths, warm wash on skills.
============================================================ */
.tp-narrative,
.tp-paths {
    background: linear-gradient(135deg, #F3F7F0 0%, #FFFFFF 100%);
}
.tp-skills {
    background: linear-gradient(135deg, #FBF7EE 0%, #FFFFFF 100%);
}
.tp-roles-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F7F0 100%);
}

/* ============================================================
   WHAT YOU'D DO (role page narrative)
============================================================ */
.tp-narrative p {
    font-size: 1.125rem;
    color: var(--tp-gray-700);
    margin-bottom: 1.25rem;
    max-width: 780px;
}

/* ============================================================
   CAREER LADDER (role page)
============================================================ */
.tp-ladder {
    background: var(--tp-primary-dark);
    color: #fff;
    border-radius: 24px;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
}
.tp-ladder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(212, 144, 39, 0.08) 1px, transparent 1px),
        linear-gradient(0deg,  rgba(212, 144, 39, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.tp-ladder-inner { position: relative; z-index: 1; }
.tp-ladder .tp-section-label { color: var(--tp-accent); }
.tp-ladder .tp-section-heading { color: #fff; }
.tp-ladder-source { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 2rem; }
.tp-ladder-source a { color: var(--tp-accent); }

.tp-ladder-rungs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    position: relative;
}
.tp-ladder-connector {
    position: absolute;
    top: 38px;
    left: 6%;
    right: 6%;
    height: 4px;
    width: 88%;
    pointer-events: none;
    overflow: visible;
}
.tp-ladder-connector line {
    stroke: rgba(212, 144, 39, 0.55);
    stroke-width: 2;
    stroke-dasharray: 8 8;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tp-ladder.in-view .tp-ladder-connector line { stroke-dashoffset: 0; }

.tp-rung {
    text-align: center;
    cursor: pointer;
    position: relative;
    padding: 0.5rem 0.25rem;
    border-radius: 12px;
}
.tp-rung:hover .tp-rung-marker {
    background: var(--tp-accent);
    color: var(--tp-primary-dark);
}
.tp-rung.selected {
    background: rgba(212, 144, 39, 0.08);
    box-shadow: inset 0 0 0 2px var(--tp-accent);
}
.tp-rung.selected .tp-rung-marker {
    background: var(--tp-accent);
    color: var(--tp-primary-dark);
    transform: scale(1.05);
}

.tp-rung-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--tp-primary-dark);
    border: 3px solid var(--tp-accent);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tp-accent);
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}
.tp-rung-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
.tp-rung-pay {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tp-accent);
    margin-bottom: 0.25rem;
    font-variant-numeric: tabular-nums;
}
.tp-rung-note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); line-height: 1.4; }
.tp-rung-tap-hint {
    font-size: 0.7rem;
    color: rgba(212, 144, 39, 0.7);
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    transition: opacity 0.3s ease;
}
.tp-rung.selected .tp-rung-tap-hint { color: var(--tp-accent); }

/* Rung detail expand panel */
.tp-rung-detail {
    grid-column: 1 / -1;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}
.tp-rung-detail.open { max-height: 600px; opacity: 1; margin-top: 2rem; }
.tp-rung-detail-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(212, 144, 39, 0.3);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    position: relative;
}
.tp-rung-detail-card::before {
    content: '';
    position: absolute;
    top: -8px;
    width: 16px;
    height: 16px;
    background: var(--tp-primary-dark);
    border-top: 1px solid rgba(212, 144, 39, 0.3);
    border-left: 1px solid rgba(212, 144, 39, 0.3);
    transform: rotate(45deg);
    transition: left 0.3s ease;
}
.tp-rung-detail-card[data-pointer="1"]::before { left: 11.5%; }
.tp-rung-detail-card[data-pointer="2"]::before { left: 36.5%; }
.tp-rung-detail-card[data-pointer="3"]::before { left: 61.5%; }
.tp-rung-detail-card[data-pointer="4"]::before { left: 86.5%; }
.tp-rung-detail-card h4 { color: var(--tp-accent); font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }
.tp-rung-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
}
.tp-rung-detail-grid > div {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}
.tp-rung-detail-grid strong {
    display: block;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

/* ============================================================
   PAY BANDS BY STATE (role page)
============================================================ */
.tp-pay-bands { background: var(--tp-gray-50); }
.tp-pay-grid { display: grid; gap: 1rem; margin-top: 1.5rem; max-width: 820px; }
.tp-pay-row {
    display: grid;
    grid-template-columns: 60px 1fr 200px;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--tp-gray-200);
}
.tp-pay-state { font-weight: 700; color: var(--tp-primary-dark); font-size: 1.1rem; }
.tp-pay-bar-wrap {
    position: relative;
    height: 14px;
    background: var(--tp-gray-100);
    border-radius: 999px;
    overflow: hidden;
}
.tp-pay-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--tp-primary) 0%, var(--tp-accent) 100%);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.tp-pay-row.in-view .tp-pay-bar { transform: scaleX(1); }
.tp-pay-range {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tp-gray-700);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tp-pay-range strong { color: var(--tp-primary-dark); }
.tp-pay-source {
    margin-top: 1.25rem;
    font-size: 0.8rem;
    color: var(--tp-gray-500);
    max-width: 820px;
}
.tp-pay-source a { color: var(--tp-primary); }

/* ============================================================
   SKILLS — chips with core highlight
============================================================ */
.tp-skills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
.tp-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.tp-skill-chip.core {
    background: var(--tp-accent-soft);
    color: var(--tp-accent-dark);
    border: 1.5px solid var(--tp-accent);
}
.tp-skill-chip.core.in-view { animation: tp-core-pulse 1.5s ease-out 0.3s 1; }
@keyframes tp-core-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(212, 144, 39, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(212, 144, 39, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 144, 39, 0); }
}
.tp-skill-chip.support {
    background: var(--tp-gray-100);
    color: var(--tp-gray-700);
    border: 1.5px solid var(--tp-gray-200);
}
.tp-skill-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); }
.tp-skills-legend {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--tp-gray-500);
    margin-top: 0.75rem;
}
.tp-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.tp-legend-dot.core { background: var(--tp-accent); }
.tp-legend-dot.support { background: var(--tp-gray-300); }

/* ============================================================
   PATH CARDS (How to Get In)
============================================================ */
.tp-path-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.tp-path-card {
    padding: 1.5rem;
    background: #fff;
    border: 1.5px solid var(--tp-gray-200);
    border-radius: 12px;
    transition: all 0.25s ease;
}
.tp-path-card:hover {
    border-color: var(--tp-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(63, 95, 42, 0.1);
}
.tp-path-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tp-primary-dark);
    margin-bottom: 0.5rem;
}
.tp-path-meta {
    font-size: 0.8rem;
    color: var(--tp-gray-500);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.tp-path-card p { font-size: 0.95rem; color: var(--tp-gray-700); }
.tp-path-card a { color: var(--tp-primary); }

/* ============================================================
   SECOND-CHANCE NOTE (legacy single-callout, kept for fallback)
============================================================ */
.tp-sc-note {
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    background: var(--tp-primary-soft);
    border-left: 4px solid var(--tp-primary);
    border-radius: 0 12px 12px 0;
    font-size: 0.95rem;
    color: var(--tp-primary-dark);
    max-width: 820px;
}
.tp-sc-note a { color: var(--tp-primary); }

/* ============================================================
   PATHWAYS — 3-up inclusivity block
   Veterans · Students · Second Chance
============================================================ */
.tp-pathways {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}
.tp-pathway-card {
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem;
    background: #fff;
    border: 1.5px solid var(--tp-gray-200);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.tp-pathway-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--tp-primary);
    transition: background 0.25s ease;
}
.tp-pathway-card[data-population="veterans"]::before { background: var(--tp-primary-dark); }
.tp-pathway-card[data-population="students"]::before { background: var(--tp-accent); }
.tp-pathway-card[data-population="second-chance"]::before { background: var(--tp-primary); }

.tp-pathway-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(63, 95, 42, 0.10);
    border-color: transparent;
}
.tp-pathway-card[data-population="veterans"]:hover { border-color: var(--tp-primary-dark); }
.tp-pathway-card[data-population="students"]:hover { border-color: var(--tp-accent); }
.tp-pathway-card[data-population="second-chance"]:hover { border-color: var(--tp-primary); }

.tp-pathway-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 1rem;
    color: var(--tp-primary-dark);
}
.tp-pathway-card[data-population="students"] .tp-pathway-icon { color: var(--tp-accent-dark); }
.tp-pathway-card[data-population="veterans"] .tp-pathway-icon { color: var(--tp-primary-dark); }
.tp-pathway-card[data-population="second-chance"] .tp-pathway-icon { color: var(--tp-primary); }

.tp-pathway-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tp-primary-dark);
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}
.tp-pathway-card p {
    font-size: 0.9rem;
    color: var(--tp-gray-700);
    line-height: 1.55;
    margin-bottom: 1rem;
}
.tp-pathway-card p a { color: var(--tp-primary); font-weight: 600; }
.tp-pathway-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tp-primary);
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}
.tp-pathway-link:hover {
    color: var(--tp-accent-dark);
    gap: 0.6rem;
}
.tp-pathway-card[data-population="students"] .tp-pathway-link { color: var(--tp-accent-dark); }
.tp-pathway-card[data-population="students"] .tp-pathway-link:hover { color: var(--tp-primary-dark); }

.tp-pathways-intro {
    color: var(--tp-gray-700);
    max-width: 720px;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .tp-pathways { grid-template-columns: 1fr; gap: 1rem; }
    .tp-pathway-card { padding: 1.5rem 1.25rem 1.25rem; }
}

/* ============================================================
   FAMILY RESOURCES (family page)
============================================================ */
.tp-family-resources { background: var(--tp-gray-50); border-radius: 24px; padding: 3rem 2rem; }
.tp-family-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.tp-resource-block {
    padding: 1.5rem;
    background: #fff;
    border: 1.5px solid var(--tp-gray-200);
    border-radius: 12px;
    transition: all 0.25s ease;
}
.tp-resource-block:hover {
    border-color: var(--tp-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(63, 95, 42, 0.1);
}
.tp-resource-block h3 { font-size: 1.05rem; font-weight: 700; color: var(--tp-primary-dark); margin-bottom: 0.6rem; }
.tp-resource-block p { font-size: 0.9rem; color: var(--tp-gray-700); margin-bottom: 0.75rem; }
.tp-resource-block a { color: var(--tp-primary); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.tp-resource-block a:hover { color: var(--tp-accent-dark); }

/* ============================================================
   RELATED ROLES
============================================================ */
.tp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.tp-related-card {
    padding: 1.25rem;
    background: #fff;
    border: 1.5px solid var(--tp-gray-200);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}
.tp-related-card:hover { border-color: var(--tp-accent); transform: translateY(-3px); }
.tp-related-family {
    font-size: 0.75rem;
    color: var(--tp-gray-500);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}
.tp-related-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--tp-primary-dark); }

/* ============================================================
   FAQ (role + family pages — visible Q&A backed by FAQPage JSON-LD)
============================================================ */
.tp-faq {
    max-width: 880px;
}
.tp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.tp-faq-item {
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--tp-gray-200);
    border-left: 4px solid var(--tp-accent);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tp-faq-item:hover {
    border-left-color: var(--tp-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.tp-faq-item h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tp-primary-dark);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.tp-faq-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tp-gray-700);
    margin: 0;
}
@media (max-width: 600px) {
    .tp-faq-item { padding: 1rem 1.15rem; }
    .tp-faq-item h3 { font-size: 1rem; }
}

/* ============================================================
   FOOTER CTA (role page)
============================================================ */
.tp-footer-cta {
    background: var(--tp-primary-dark);
    color: #fff;
    text-align: center;
    padding: 4rem 1.5rem;
    border-radius: 24px;
    max-width: 1200px;
    margin: 0 auto 4rem;
    position: relative;
    overflow: hidden;
}
.tp-footer-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--tp-accent) 0%, transparent 60%);
    opacity: 0.18;
    pointer-events: none;
}
.tp-footer-cta-inner { position: relative; z-index: 1; }
.tp-footer-cta h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.75rem; }
.tp-footer-cta p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
    .tp-section { padding: 2.5rem 1rem; }

    .tp-hero { margin: 0.5rem 0.75rem 0; padding: 2rem 1.25rem 2.5rem; border-radius: 16px; }
    .tp-hero-ornament { width: 240px; height: 240px; opacity: 0.1; top: -10px; right: -30px; }
    .tp-hero h1 { font-size: 2.25rem; }
    .tp-hero-tagline { font-size: 1rem; }
    .tp-hero-cta-group { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .tp-btn { justify-content: center; padding: 0.95rem 1.25rem; }
    /* Hide the desktop-only scroll cue on mobile — it overlaps the stacked
       CTAs and is redundant on small screens where users already scroll. */
    .tp-hero-scroll-cue { display: none; }

    .tp-breadcrumb { padding: 1rem 1rem 0; font-size: 0.8rem; }
    .tp-section-heading { font-size: 1.5rem; }

    .tp-family-stats { gap: 0.5rem; }
    .tp-family-stat { padding: 0.65rem 1rem; flex: 1 1 calc(50% - 0.5rem); min-width: 0; }
    .tp-family-stat strong { font-size: 1.15rem; }
    .tp-family-stat span { font-size: 0.7rem; }

    .tp-roles-grid { grid-template-columns: 1fr; gap: 1rem; }
    .tp-role-card { padding: 1.5rem; }
    .tp-role-name { font-size: 1.3rem; }
    .tp-role-glyph { width: 52px; height: 52px; margin-bottom: 1rem; }

    .tp-pill { padding: 0.6rem 1rem; font-size: 0.9rem; }

    .tp-ladder { padding: 2rem 1.25rem; border-radius: 16px; }
    .tp-ladder-rungs { grid-template-columns: repeat(2, 1fr); gap: 2rem 0.75rem; }
    .tp-ladder-connector { display: none; }
    .tp-rung { padding: 0.75rem 0.5rem; }
    .tp-rung-marker { width: 64px; height: 64px; font-size: 1.25rem; }
    .tp-rung-title { font-size: 0.95rem; }
    .tp-rung-pay { font-size: 1.2rem; }
    .tp-rung-detail-card::before { display: none; }
    .tp-rung-detail-card { padding: 1.25rem; }

    .tp-pay-row { grid-template-columns: 44px 1fr; padding: 0.85rem 1rem; }
    .tp-pay-row .tp-pay-range { grid-column: 1 / -1; text-align: left; font-size: 0.9rem; }
    .tp-pay-state { font-size: 1rem; }

    .tp-skill-chip { font-size: 0.85rem; padding: 0.5rem 0.85rem; }
    .tp-path-grid { grid-template-columns: 1fr; }
    .tp-path-card { padding: 1.25rem; }
    .tp-related-grid { grid-template-columns: 1fr; }
    .tp-family-resources { padding: 2rem 1.25rem; border-radius: 16px; }
    .tp-family-resources-grid { grid-template-columns: 1fr; }
    .tp-sc-note { padding: 1.25rem; font-size: 0.9rem; }

    .tp-footer-cta { margin: 0 0.75rem 2rem; padding: 2.5rem 1.25rem; border-radius: 16px; }
    .tp-footer-cta h2 { font-size: 1.5rem; }
    .tp-footer-cta p { font-size: 1rem; }
}

@media (max-width: 480px) {
    .tp-hero h1 { font-size: 1.85rem; }
    .tp-ladder-rungs { grid-template-columns: 1fr; gap: 1.5rem; }
    .tp-rung-detail.open { max-height: 1000px; }
    .tp-family-stat { flex: 1 1 100%; }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .tp-hero-ornament { animation: none; }
    .tp-flow-dot, .tp-flow-dot-glow { display: none; }
    .tp-pay-bar { transform: scaleX(1); }
    .tp-reveal, .tp-pill, .tp-rung, .tp-role-card { opacity: 1; transform: none; }
    .tp-ladder-connector line { stroke-dashoffset: 0 !important; }
    .tp-scroll-progress { display: none; }
}

/* ============================================================
   FAQ ACCORDION + PATHWAY READABILITY + PAY SOURCE LINE
   + STICKY MOBILE CTA           (added 2026-05-09)

   - FAQ items render as native <details>/<summary>. No JS,
     keyboard + screen-reader accessible by default, honors
     prefers-reduced-motion. Content stays in the DOM (Google
     indexes it; the FAQPage JSON-LD is the canonical schema).
   - Pathway cards: paragraph spacing fires only between sibling
     <p> tags, so single-paragraph (un-re-authored) cards keep
     their original tight layout.
   - Defensive: in single-paragraph cards with multiple <strong>
     anchors, tone trailing ones down so the eye finds one anchor.
   - Pay source line gets a quieter secondary line for SOC code +
     state-estimate links — keeps the headline ("Pay data: BLS
     OEWS ... Expanding nationally") prominent while leaving the
     drill-down available for sceptics.
   - Sticky mobile CTA: visible only <= 720px viewport, anchored
     to bottom, reuses the primary hero CTA target. Adds bottom
     padding to <main> so footer/CTA aren't covered by the bar.
============================================================ */
.tp-faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.tp-faq-item { padding: 0; border: 1px solid #e5e7eb; border-radius: 12px;
               background: #fff; transition: box-shadow 0.15s; }
.tp-faq-item[open] { box-shadow: 0 4px 18px rgba(0,0,0,0.06); }
.tp-faq-item > summary { list-style: none; cursor: pointer;
                         padding: 1rem 1.25rem;
                         font-weight: 600; font-size: 1.05rem; color: #1f2937;
                         display: flex; justify-content: space-between;
                         align-items: center; gap: 1rem; }
.tp-faq-item > summary::-webkit-details-marker { display: none; }
.tp-faq-item > summary::after { content: '+'; font-size: 1.5rem; line-height: 1;
                                color: #4B5563; transition: transform 0.15s; }
.tp-faq-item[open] > summary::after { content: '−'; }
.tp-faq-item > p { padding: 0 1.25rem 1.1rem; margin: 0; line-height: 1.65;
                   color: #4b5563; }

.tp-pathway-card p { line-height: 1.6; color: #4b5563; }
.tp-pathway-card p + p { margin-top: 0.65em; }
.tp-pathway-card p strong { font-weight: 600; color: #1f2937; }
.tp-pathway-card p strong ~ strong { font-weight: 500; color: inherit; }

.tp-pay-source-meta { display: inline-block; margin-top: 0.4em;
                      font-size: 0.85em; color: #4B5563; }

.tp-sticky-mobile-cta { display: none; }
@media (max-width: 720px) {
  .tp-sticky-mobile-cta {
      display: flex; justify-content: center;
      position: fixed; left: 0; right: 0; bottom: 0;
      padding: 0.75rem 1rem;
      background: rgba(255,255,255,0.97);
      border-top: 1px solid #e5e7eb;
      box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
      z-index: 50;
  }
  .tp-sticky-mobile-cta .tp-btn { width: 100%; max-width: 420px;
                                  text-align: center; }
  /* Avoid the sticky bar covering the page-end footer CTA. */
  main#main-content { padding-bottom: 5rem; }
}

/* ============================================================
   HERO ENTRANCE ANIMATIONS — tagline + CTAs + scroll cue
   + boosted flow dots         (added 2026-05-09)

   The eyebrow already fades in via tp-fade-down and the H1 already
   rises word-by-word via tp-word-rise. This block wires the same
   energy through the rest of the hero — tagline, CTAs, scroll cue —
   so the per-trade page feels alive in the same way main.html and
   students.html do.

   The flow dots got brighter + larger + a little tighter on cycle
   so they read clearly against the 32%-opacity ornament. The path
   they travel hasn't changed (M40 80 → M440 360 inside the SVG,
   which is anchored upper-right of the hero).
============================================================ */
.tp-hero-tagline {
    animation: tp-fade-up 0.7s ease-out 0.7s backwards;
}
.tp-hero-cta-group {
    animation: tp-fade-up 0.7s ease-out 0.9s backwards;
}
@keyframes tp-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scroll cue at bottom of hero — same gentle bounce as students.html. */
.tp-hero-scroll-cue {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 2;
    animation: tp-scroll-bounce 2.5s ease-in-out infinite;
    pointer-events: none;
}
.tp-hero-scroll-cue::after {
    content: '↓';
    display: block;
    font-size: 1.25rem;
    margin-top: 0.4rem;
    text-align: center;
}
@keyframes tp-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

/* Flow dots — brighter, bigger, sharper drop-shadow so they read
   against the faded blueprint ornament instead of getting lost. */
.tp-flow-dot {
    fill: var(--tp-accent-bright);
    filter: drop-shadow(0 0 8px rgba(232, 168, 46, 1))
            drop-shadow(0 0 14px rgba(232, 168, 46, 0.65));
}
.tp-flow-dot-glow {
    fill: var(--tp-accent-bright);
    opacity: 0.6;
    filter: blur(2px);
}

/* Reduced-motion: kill the entrance animations so users with
   prefers-reduced-motion see content immediately. The `backwards`
   fill on entrance animations would otherwise leave the elements
   stuck at opacity:0 if we just disabled the keyframes. */
@media (prefers-reduced-motion: reduce) {
    .tp-hero-tagline,
    .tp-hero-cta-group,
    .tp-hero-eyebrow {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .tp-hero-scroll-cue { animation: none; }
}