/* Date: 2026-07-06 | File: assets/css/style.css
   Purpose: THE master stylesheet. Requires tokens.css loaded first (header.php does this).
   Rule: no page-specific CSS files, no <style> blocks in PHP — all styles live here.

   TABLE OF CONTENTS:
   1. Reset & Base
   2. Layout (containers, sections)
   3. Header & Navigation
   4. Hero
   5. Buttons
   6. Cards & Grids
   7. Lists
   8. Fact Table
   9. FAQ Accordion
   10. CTA Conversion
   11. Footer
   12. Breadcrumb
   13. Social Proof (case studies, logo wall, testimonials, metrics)
   14. Training Section (program list, timeline, track strip)
   15. Assessment Form (multi-step)
   16. Utilities
   17. Responsive
   18. Imagery (tints, frames, split hero, section figures)
*/

/* ===== 1. RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; /* keep anchored sections clear of the sticky header */ }
body { font-family: var(--font-family); font-size: var(--font-base); line-height: var(--leading-relaxed); color: var(--text-primary); background: var(--bg-white); }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; } /* author display rules (e.g. .btn) must not defeat the hidden attribute */
a { color: var(--brand-secondary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--brand-primary); }
h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: var(--weight-bold); }

/* ===== 2. LAYOUT ===== */
.layout-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); }
.layout-container--narrow { max-width: var(--container-narrow); }
.section { padding: var(--space-4xl) 0; }
.section--compact { padding: var(--space-2xl) 0; }
.section--bg-light { background: var(--bg-light); }
.section--bg-white { background: var(--bg-white); }
.section--bg-dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section__title { font-size: var(--font-3xl); color: var(--brand-secondary); text-align: center; margin-bottom: var(--space-md); }
.section__description { font-size: var(--font-md); color: var(--text-secondary); text-align: center; max-width: 720px; margin: 0 auto var(--space-2xl); }

/* ===== 3. HEADER & NAVIGATION ===== */
.header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-sm) var(--space-xl); background: var(--bg-glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: none; position: sticky; top: 0; z-index: var(--z-sticky); transition: background var(--transition-base), box-shadow var(--transition-base), padding var(--transition-base); }
.header.is-scrolled { background: var(--bg-white); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-sm); padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.header__logo img { display: block; width: 180px; height: auto; }
.header__nav-list { display: flex; gap: var(--space-xl); list-style: none; }
.header__nav-link { font-weight: var(--weight-medium); color: var(--text-primary); text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 8px; transition: color var(--transition-fast), text-decoration-color var(--transition-fast); }
.header__nav-link:hover { color: var(--brand-primary); text-decoration-line: underline; text-decoration-color: var(--brand-primary); }
.header__toggle { display: none; background: none; border: none; font-size: var(--font-2xl); color: var(--text-primary); cursor: pointer; }
.header__nav-item { position: relative; }

/* ===== 4. HERO ===== */
.hero-section { margin-top: calc(-1 * var(--header-height)); padding: calc(var(--space-5xl) + var(--header-height)) 0 var(--space-5xl); /* extends bg behind the glass header */ }
.hero-title { font-size: var(--font-4xl); color: var(--text-primary); margin-bottom: var(--space-base); max-width: 880px; }
.hero-subtitle { font-size: var(--font-xl); color: var(--brand-secondary); font-weight: var(--weight-medium); margin-bottom: var(--space-base); max-width: 800px; }
.hero-description { font-size: var(--font-md); color: var(--text-secondary); max-width: 760px; }

/* ===== 5. BUTTONS ===== */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); border: 2px solid transparent; border-radius: var(--radius-base); font-size: var(--font-base); font-weight: var(--weight-semibold); cursor: pointer; transition: all var(--transition-base); }
.btn-primary { background: var(--brand-primary); color: var(--text-on-dark); }
.btn-primary:hover { background: #b02a0b; color: var(--text-on-dark); }
.btn-hero { background: var(--bg-gradient-cta); color: var(--text-on-dark); }
.btn-hero:hover { box-shadow: var(--shadow-md); color: var(--text-on-dark); transform: translateY(-2px); }
.btn-primary-outline { border-color: var(--brand-primary); color: var(--brand-primary); background: transparent; }
.btn-primary-outline:hover { background: var(--brand-primary); color: var(--text-on-dark); }
.btn-secondary-outline { border-color: var(--brand-secondary); color: var(--brand-secondary); background: transparent; }
.btn-secondary-outline:hover { background: var(--brand-secondary); color: var(--text-on-dark); }
.btn-white { background: var(--bg-white); color: var(--brand-secondary); }
.btn-white:hover { color: var(--brand-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn--large { padding: var(--space-base) var(--space-2xl); font-size: var(--font-md); }
.btn--arrow::after { content: "→"; transition: transform var(--transition-fast); }
.btn--arrow:hover::after { transform: translateX(4px); }
.btn-link { font-weight: var(--weight-semibold); color: var(--brand-secondary); }
.btn-link:hover { color: var(--brand-primary); }
.btn-primary-cta { background: var(--brand-primary); color: var(--text-on-dark); box-shadow: var(--shadow-md); } /* udemy-courses/ enroll button */
.btn-primary-cta:hover { box-shadow: var(--shadow-lg); }
.btn-secondary-cta { background: var(--brand-accent-blue); color: var(--text-on-dark); box-shadow: var(--shadow-md); } /* udemy-courses/ enroll button, monthly tier */
.btn-secondary-cta:hover { box-shadow: var(--shadow-lg); }
.btn--full { width: 100%; } /* udemy-courses/ enroll buttons */
.btn--compact { padding: var(--space-xs) var(--space-base); font-size: var(--font-sm); } /* udemy-courses/ enroll buttons */

/* ===== 6. CARDS & GRIDS ===== */
.grid-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-xl); } /* udemy-courses/ course grid */
.card-grid { display: grid; gap: var(--space-lg); }
.card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.card--hover { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__icon { font-size: var(--font-3xl); color: var(--brand-primary); }
.card__icon-img { width: 48px; height: 48px; object-fit: contain; }
.card__title { font-size: var(--font-lg); color: var(--brand-secondary); font-weight: var(--weight-semibold); }
.card__title a { color: inherit; }
.card__description { color: var(--text-secondary); font-size: var(--font-sm); flex-grow: 1; }
/* Split card: text left, hero image flush on the right 40% */
.card--split { flex-direction: row; padding: 0; gap: 0; overflow: hidden; }
.card--split .card__body { flex: 1 1 60%; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); }
.card--split .card__aside { flex: 0 0 40%; width: 40%; align-self: stretch; object-fit: cover; }

/* ===== 7. LISTS ===== */
.list-icon { list-style: none; }
.list-icon li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-xs); color: var(--text-secondary); }
.list-icon li::before { position: absolute; left: 0; font-weight: var(--weight-bold); }
.list-icon--dot li::before { content: "•"; color: var(--brand-primary); font-size: var(--font-lg); line-height: 1.3; }
.list-icon--check li::before { content: "✓"; color: var(--brand-accent-green); }
.list-icon--arrow li::before { content: "→"; color: var(--brand-secondary); }

/* ===== 8. FACT TABLE (program snapshot) ===== */
.fact-table { border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; }
.fact-row { display: grid; grid-template-columns: 220px 1fr; }
.fact-row + .fact-row { border-top: 1px solid var(--border-light); }
.fact-row dt { padding: var(--space-base) var(--space-lg); font-weight: var(--weight-bold); color: var(--brand-secondary); background: var(--bg-light); }
.fact-row dd { padding: var(--space-base) var(--space-lg); color: var(--text-secondary); }

/* ===== 9. FAQ ACCORDION ===== */
.accordion__item { border: 1px solid var(--border-light); border-radius: var(--radius-base); margin-bottom: var(--space-sm); background: var(--bg-white); }
.accordion__question { padding: var(--space-base) var(--space-lg); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; position: relative; padding-right: var(--space-3xl); }
.accordion__question::-webkit-details-marker { display: none; }
.accordion__question::after { content: "+"; position: absolute; right: var(--space-lg); color: var(--brand-primary); font-size: var(--font-xl); font-weight: var(--weight-bold); }
.accordion__item[open] .accordion__question::after { content: "−"; }
.accordion__answer { padding: 0 var(--space-lg) var(--space-base); color: var(--text-secondary); }

/* ===== 10. CTA CONVERSION ===== */
.cta-conversion { position: relative; overflow: hidden; background: var(--bg-gradient-cta); color: var(--text-on-dark); padding: var(--space-3xl); border-radius: var(--radius-lg); text-align: center; margin: var(--space-2xl) 0; box-shadow: var(--shadow-lg); }
.cta-conversion::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.08) 0 22%, transparent 22% 58%, rgba(209,50,13,.16) 58% 75%, transparent 75%); pointer-events: none; }
.cta-conversion::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -140px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 60px rgba(255,255,255,.05), 0 0 0 120px rgba(255,255,255,.03); pointer-events: none; }
.cta-conversion__inner { position: relative; z-index: 1; }
.cta-conversion__eyebrow { display: inline-block; margin-bottom: var(--space-md); padding: var(--space-2xs) var(--space-sm); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-full); background: rgba(255,255,255,.08); font-size: var(--font-xs); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; }
.cta-conversion__heading { font-size: var(--font-2xl); margin-bottom: var(--space-base); }
.cta-conversion__description { font-size: var(--font-md); opacity: 0.9; max-width: 680px; margin: 0 auto var(--space-lg); }
.cta-conversion__link { color: var(--text-on-dark); text-decoration: underline; opacity: 0.85; }
.cta-conversion__link:hover { color: var(--text-on-dark); opacity: 1; }
/* Split variant (cta.php $cta_points set): left copy, right glass card with a bullet list */
.cta-conversion--split { text-align: left; }
.cta-conversion--split .cta-conversion__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.cta-conversion--split .cta-conversion__description { margin: 0 0 var(--space-lg); max-width: none; }
.cta-conversion__card { padding: var(--space-xl); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.cta-conversion__card h3 { margin: 0 0 var(--space-sm); font-size: var(--font-lg); color: var(--text-on-dark); }
.cta-conversion__card ul { margin: 0; padding: 0; list-style: none; }
.cta-conversion__card li { display: flex; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid rgba(255,255,255,.12); opacity: .85; }
.cta-conversion__card li:last-child { border-bottom: 0; }
.cta-conversion__card li::before { content: ""; width: 9px; height: 9px; margin-top: 7px; border-radius: var(--radius-full); background: var(--brand-primary); flex: 0 0 auto; }
@media (max-width: 900px) {
    .cta-conversion--split .cta-conversion__inner { grid-template-columns: 1fr; }
}

/* ===== 11. FOOTER ===== */
.footer { background: var(--bg-gradient-footer); padding: var(--space-3xl) 0 var(--space-lg); margin-top: var(--space-4xl); }
.footer__columns { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2xl); margin-bottom: var(--space-xl); }
.footer__title { font-size: var(--font-md); color: var(--brand-secondary); margin-bottom: var(--space-sm); }
.footer__column p { font-size: var(--font-sm); color: var(--text-secondary); }
.footer__links { list-style: none; }
.footer__links li { margin-bottom: var(--space-xs); font-size: var(--font-sm); }
.footer__links a { color: var(--text-secondary); }
.footer__links a:hover { color: var(--brand-primary); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-base); border-top: 1px solid var(--border-medium); padding-top: var(--space-base); font-size: var(--font-sm); color: var(--text-muted); }
.footer__legal { display: flex; flex-wrap: nowrap; gap: var(--space-base); }
.footer__legal li { margin-bottom: 0; white-space: nowrap; }
.footer__legal li:not(:last-child)::after { content: "|"; margin-left: var(--space-base); color: var(--border-medium); }
.footer__social { display: flex; gap: var(--space-sm); }

/* ===== 12. BREADCRUMB ===== */
.breadcrumb { padding: var(--space-sm) var(--space-lg); font-size: var(--font-sm); color: var(--text-muted); }
.breadcrumb__sep { margin: 0 var(--space-xs); color: var(--text-light); }
.breadcrumb__current { color: var(--text-secondary); font-weight: var(--weight-medium); }

/* ===== 13. SOCIAL PROOF ===== */
/* Media cards (case studies, videos) */
.card--flush { padding: 0; overflow: hidden; }
.cs-card__media { height: 180px; background: var(--bg-light); }
.cs-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.tag-pill { background: var(--bg-light); color: var(--text-muted); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-full); font-size: var(--font-xs); align-self: flex-start; }

/* Logo wall */
.logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-lg); align-items: center; }
.logo-wall__item { display: flex; justify-content: center; align-items: center; padding: var(--space-sm); }
.logo-wall__item img { height: 96px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: all var(--transition-base); }
.logo-wall__item img:hover { filter: none; opacity: 1; }

/* Testimonial quotes */
.quote-card { position: relative; }
.quote-card__mark { font-size: var(--font-4xl); color: var(--brand-primary); line-height: 1; font-family: Georgia, serif; }
.quote-card__text { color: var(--text-secondary); font-style: italic; flex: 1; }
.quote-card__logo { width: 48px; height: 48px; object-fit: contain; }

/* Video thumbnails */
.video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-dark); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: var(--radius-full); background: rgba(209, 50, 13, 0.9); color: var(--text-on-dark); display: flex; align-items: center; justify-content: center; font-size: var(--font-2xl); transition: transform var(--transition-base); }
.video-thumb:hover .video-thumb__play { transform: scale(1.1); }

/* Metrics band (standalone) + hero proof metrics */
.metrics-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-lg); text-align: center; }
.metric__value { font-size: var(--font-3xl); font-weight: var(--weight-bold); color: var(--brand-primary); }
.metric__label { color: var(--text-muted); font-size: var(--font-sm); }
.proof-metrics { display: flex; flex-wrap: wrap; gap: var(--space-2xl); margin-top: var(--space-xl); }
.proof-metric { display: flex; flex-direction: column; }
.proof-metric__value { font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--brand-primary); }
.proof-metric__label { font-size: var(--font-sm); color: var(--text-secondary); }

/* Hero boxed proof grid — 4 equal-height credential cards */
.hero-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); margin-top: var(--space-xl); max-width: 1040px; }
.hero-proof-card {  border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-base) var(--space-md); min-height: 98px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow-md); }
.hero-proof-card__main { height: 34px; display: flex; align-items: center; margin-bottom: var(--space-xs); }
.hero-proof-card__main--text { font-size: var(--font-2xl); line-height: 1; font-weight: var(--weight-bold); color: var(--brand-primary); white-space: nowrap; }
.hero-proof-card__main--sm { font-size: var(--font-xl); }
.hero-proof-card__main--logo { justify-content: flex-start; }
.hero-proof-card__logo { max-height: 100px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.hero-proof-card__line { font-size: var(--font-sm); line-height: 1.25; color: var(--text-secondary); white-space: nowrap; }

/* ===== 14. TRAINING SECTION ===== */
/* Program list (compact grouped rows on the training cluster page) */
.program-list__group-title { font-size: var(--font-md); color: var(--brand-primary); margin: var(--space-xl) 0 var(--space-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--weight-semibold); }
.program-list__row { display: grid; grid-template-columns: minmax(260px, 1.2fr) 150px 2fr; gap: var(--space-base); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-light); align-items: baseline; }
.program-list__name { font-weight: var(--weight-semibold); }
.program-list__duration { color: var(--text-muted); font-size: var(--font-sm); white-space: nowrap; }
.program-list__desc { color: var(--text-secondary); font-size: var(--font-sm); }

/* Timeline (training legacy page) */
.timeline { position: relative; padding-left: var(--space-xl); list-style: none; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border-light); }
.timeline__item { position: relative; padding-bottom: var(--space-xl); }
.timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--space-xl) + 0px); top: 5px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--brand-primary); border: 2px solid var(--bg-white); }
.timeline__year { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--brand-secondary); margin-bottom: var(--space-2xs); }
.timeline__item p { color: var(--text-secondary); }

/* Other-tracks strip (bottom of track pages) */
.track-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-md); font-weight: var(--weight-medium); }
.track-strip__sep { color: var(--text-light); }

/* ===== 15. ASSESSMENT FORM (multi-step) ===== */
.assessment { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-2xl); box-shadow: var(--shadow-base); }
.assessment__progress { height: 6px; background: var(--bg-light); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-xs); }
.assessment__progress-bar { height: 100%; width: 12.5%; background: var(--brand-primary); border-radius: var(--radius-full); transition: width var(--transition-base); }
.assessment__progress-label { font-size: var(--font-sm); color: var(--text-muted); margin-bottom: var(--space-lg); }
.assessment__step { border: none; display: none; }
.assessment__step.is-active { display: block; }
.assessment__question { font-size: var(--font-xl); font-weight: var(--weight-semibold); color: var(--brand-secondary); line-height: var(--leading-tight); margin-bottom: var(--space-lg); }
.assessment__hint { font-size: var(--font-sm); color: var(--text-muted); margin: calc(-1 * var(--space-base)) 0 var(--space-base); }
.assessment__options { display: grid; gap: var(--space-sm); }
.assessment__option { display: flex; align-items: center; gap: var(--space-sm); border: 1px solid var(--border-light); border-radius: var(--radius-base); padding: var(--space-base) var(--space-lg); cursor: pointer; color: var(--text-primary); transition: border-color var(--transition-fast), background var(--transition-fast); }
.assessment__option:hover { border-color: var(--brand-secondary); }
.assessment__option:has(input:checked) { border-color: var(--brand-primary); background: var(--bg-light); }
.assessment__option input { accent-color: var(--brand-primary); flex-shrink: 0; }
.assessment__error { color: var(--brand-accent-red); font-size: var(--font-sm); margin-top: var(--space-sm); }
.assessment__nav { display: flex; justify-content: space-between; gap: var(--space-base); margin-top: var(--space-xl); }
.form-field { margin-bottom: var(--space-base); }
.form-field label { display: block; font-weight: var(--weight-medium); font-size: var(--font-sm); margin-bottom: var(--space-2xs); }
.form-field input, .form-field textarea { width: 100%; padding: var(--space-sm) var(--space-base); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); font: inherit; color: var(--text-primary); }
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--brand-secondary); outline-offset: 1px; border-color: var(--brand-secondary); }
.form-field textarea { resize: vertical; }
.assessment__consent { font-size: var(--font-xs); color: var(--text-muted); margin-top: var(--space-sm); }
.assessment__result-title { font-size: var(--font-2xl); color: var(--brand-secondary); margin-bottom: var(--space-base); }
.assessment__result-text { font-size: var(--font-md); color: var(--text-secondary); margin-bottom: var(--space-base); }
.assessment__result-note { color: var(--text-secondary); font-size: var(--font-sm); margin-bottom: var(--space-xs); padding-left: var(--space-lg); position: relative; }
.assessment__result-note::before { content: "→"; position: absolute; left: 0; color: var(--brand-primary); font-weight: var(--weight-bold); }

/* ===== 16. UTILITIES ===== */
.text-center { text-align: center; }
.text-brand { color: var(--brand-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.weight-medium { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold { font-weight: var(--weight-bold); }
.flex { display: flex; align-items: center; gap: var(--space-base); }
.flex--center { justify-content: center; }
.flex--wrap { flex-wrap: wrap; }
.flex--gap-xs { gap: var(--space-xs); }
.flex--gap-md { gap: var(--space-md); }
.mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); }
.mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .mb-2xl { margin-bottom: var(--space-2xl); }

/* ===== 17. RESPONSIVE ===== */
@media (max-width: 1023px) {
    .card-grid--cols-3, .card-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
    .footer__columns { grid-template-columns: 1fr 1fr; }
    .logo-wall { grid-template-columns: repeat(4, 1fr); }
    .hero-proof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .section { padding: var(--space-2xl) 0; }
    .hero-section { padding: calc(var(--space-3xl) + var(--header-height)) 0 var(--space-3xl); }
    .hero-title { font-size: var(--font-3xl); }
    .hero-subtitle { font-size: var(--font-lg); }
    .section__title { font-size: var(--font-2xl); }
    .card-grid--cols-2, .card-grid--cols-3, .card-grid--cols-4 { grid-template-columns: 1fr; }
    .grid-courses { grid-template-columns: 1fr; }
    .card--split { flex-direction: column; }
    .card--split .card__aside { flex-basis: auto; width: 100%; height: 160px; }
    .fact-row { grid-template-columns: 1fr; }
    .fact-row dt { padding-bottom: var(--space-2xs); }
    .fact-row dd { padding-top: var(--space-2xs); }
    .footer__columns { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; gap: var(--space-base); }
    .header, .header.is-scrolled { padding: var(--space-sm) var(--space-base); background: var(--bg-white); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .header__cta { display: none; }
    .header__toggle { display: block; }
    .header__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-white); box-shadow: var(--shadow-md); padding: var(--space-base); }
    .header__nav.is-open { display: block; }
    .header__nav-list { flex-direction: column; gap: var(--space-base); }
    .logo-wall { grid-template-columns: repeat(3, 1fr); }
    .proof-metrics { gap: var(--space-lg); }
    .hero-proof-grid { grid-template-columns: 1fr; }
    .hero-proof-card__line { white-space: normal; }
    .program-list__row { grid-template-columns: 1fr; gap: var(--space-2xs); padding: var(--space-base) 0; }
    .program-list__duration { white-space: normal; }
    .assessment { padding: var(--space-lg); }
    .assessment__nav { flex-wrap: wrap; }
}

/* ===== 18. IMAGERY ===== */
/* Tint frames: .img-tint alone = Tint-0 (frame only); add .tint-1/.tint-2 for a brand wash. SVG diagrams get no tint classes. */
.img-tint { position: relative; border-radius: var(--radius-md); overflow: hidden; margin: 0; }
.img-tint img { display: block; width: 100%; height: auto; }
.img-tint::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tint-1::after { background: var(--brand-secondary); opacity: 0.14; mix-blend-mode: multiply; }
.tint-2::after { background: var(--brand-primary); opacity: 0.12; mix-blend-mode: multiply; }
.img-grey { filter: grayscale(1); }
.frame-browser { position: relative; border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-base); padding-top: var(--space-lg); background: var(--bg-light); margin: 0; }
.frame-browser::before { content: ""; position: absolute; top: var(--space-xs); left: var(--space-sm); width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-full); background: var(--border-medium); box-shadow: var(--space-sm) 0 0 var(--border-medium), var(--space-lg) 0 0 var(--border-medium); }
.frame-browser img { display: block; width: 100%; height: auto; }

/* Split hero (hero.php renders .hero-split when $hero_image is set; text first so mobile stacks image after text) */
.hero-split { display: grid; grid-template-columns: 1fr 560px; gap: var(--space-3xl); align-items: center; }

/* Section figures: centered media block or text+media split inside a section */
.section-media { margin: var(--space-xl) auto 0; max-width: 640px; }
.section-media--full { max-width: 100%; }
.section-split { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-2xl); align-items: center; }
.section-split .section__title { text-align: left; }

/* Timeline media slot (legacy page — image above the entry text) */
.timeline__media { margin: 0 0 var(--space-sm); max-width: 480px; }
.timeline__media img { border-radius: var(--radius-md); }

/* Grey badge row variant (logo-wall.php 'grey' option — stays grayscale, capped height) */
.logo-wall--grey .logo-wall__item img { max-height: 120px; height: auto; }
.logo-wall--grey .logo-wall__item img:hover { filter: grayscale(1); opacity: 0.75; }

@media (max-width: 1023px) {
    .hero-split { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}
@media (max-width: 767px) {
    .hero-split, .section-split { grid-template-columns: 1fr; }
}

/* ===== 19. LEAD MAGNETS (featured band, gate pages, inline resource blocks) ===== */
/* Featured band — the only dark band on the training page (featured-resource.php) */
.featured-band { padding: var(--space-2xl) 0; color: var(--text-on-dark); }
.featured-band__inner { position: relative; }
.featured-band__cover-link { position: absolute; left: var(--space-2xl); top: 50%; transform: translateY(-50%); width: 300px; z-index: 1; }
.featured-band__cover { display: block; width: 100%; height: auto; transform: rotate(-5deg); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); transition: transform var(--transition-base); }
.featured-band__cover-link:hover .featured-band__cover { transform: rotate(0deg); }
.featured-band__strip {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--bg-featured-band);
    background-image:
        linear-gradient(color-mix(in srgb, var(--text-on-dark) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text-on-dark) 4%, transparent) 1px, transparent 1px),
        radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--brand-primary) 32%, transparent), transparent 30%);
    background-size: 48px 48px, 48px 48px, auto;
    padding: var(--space-xl) var(--space-2xl) var(--space-xl) calc(300px + var(--space-2xl) + var(--space-xl));
}
.featured-band__kicker { color: var(--brand-primary); font-size: var(--font-sm); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-sm); }
.featured-band__title { font-size: var(--font-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); margin-bottom: var(--space-base); }
.featured-band__line { color: var(--text-on-dark); opacity: 0.85; margin-bottom: var(--space-lg); max-width: 640px; }
.btn-light-outline { border-color: var(--text-on-dark); color: var(--text-on-dark); background: transparent; }
.btn-light-outline:hover { background: var(--text-on-dark); color: var(--bg-featured-band); }

/* Card extensions (card-grid.php): tertiary resource link + portrait cover thumb for hub cards */
.card__resource-link { margin-top: var(--space-sm); font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--brand-secondary); }
.card__resource-link:hover { color: var(--brand-primary); }
.card__cover { aspect-ratio: 620 / 877; width: 100%; object-fit: cover; border: 1px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: var(--space-base); }

/* Inline resource block on program pages ("Download the free X first") */
.resource-inline { display: flex; gap: var(--space-lg); align-items: center; background: var(--bg-light); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-lg); }
.resource-inline__cover { flex: 0 0 96px; width: 96px; height: auto; border: 1px solid var(--border-light); border-radius: var(--radius-sm); }
.resource-inline__heading { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--brand-secondary); margin-bottom: var(--space-2xs); }
.resource-inline__line { font-size: var(--font-sm); color: var(--text-secondary); margin-bottom: var(--space-sm); }
.resource-inline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }

/* CFO strip — slim band on every program page, above the closing CTA */
.resource-strip { background: var(--bg-light); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: var(--space-lg) 0; text-align: center; }
.resource-strip__text { color: var(--text-secondary); }

/* Gate pages (/resources/<slug>/) */
.gate-layout { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-3xl); align-items: start; }
.gate-kicker { color: var(--brand-primary); font-size: var(--font-sm); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-sm); }
.gate-title { font-size: var(--font-3xl); line-height: var(--leading-tight); color: var(--text-primary); margin-bottom: var(--space-base); }
.gate-line { color: var(--text-secondary); font-size: var(--font-md); margin-bottom: var(--space-lg); }
.gate-cover { display: block; max-width: 310px; width: 100%; height: auto; border: 1px solid var(--border-light); border-radius: var(--radius-sm); box-shadow: var(--shadow-base); margin-top: var(--space-xl); }
.gate-form { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-xl); }
.gate-form__heading { font-size: var(--font-xl); color: var(--brand-secondary); margin-bottom: var(--space-lg); }
.gate-form__consent { font-size: var(--font-xs); color: var(--text-muted); margin-top: var(--space-base); }
.gate-success { text-align: center; }
.gate-success__icon { font-size: var(--font-4xl); color: var(--brand-accent-green); display: block; margin-bottom: var(--space-sm); }
.gate-success__heading { font-size: var(--font-xl); color: var(--brand-secondary); margin-bottom: var(--space-sm); }
.gate-success .btn { margin-top: var(--space-lg); }
.gate-success__next { margin-top: var(--space-lg); font-size: var(--font-sm); color: var(--text-secondary); }
.form-error { color: var(--brand-accent-red); font-size: var(--font-sm); margin-top: var(--space-2xs); }
.form-hp { position: absolute; left: -9999px; top: auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-base); }

/* Consultation modal (components/consultation-modal.php) — landscape layout, photo left / form right,
   sized to fit a 13" laptop viewport without the form scrolling out of view. */
.consult-modal { margin: auto; border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 0; width: min(760px, calc(100vw - var(--space-xl))); max-height: calc(100vh - var(--space-xl)); overflow: hidden; z-index: var(--z-modal); }
.consult-modal::backdrop { background: var(--overlay-dark); }
.consult-modal__body { display: grid; grid-template-columns: 2fr 3fr; max-height: inherit; } /* photo = 40% */
.consult-modal__media { border-radius: 0; height: 100%; }
.consult-modal__media img { height: 100%; object-fit: cover; }
.consult-modal__content { overflow-y: auto; max-height: inherit; }
.consult-modal .gate-form { border: none; box-shadow: none; padding: var(--space-lg); }
.consult-modal .form-field { margin-bottom: var(--space-sm); }
.consult-modal .gate-form__heading { margin-bottom: var(--space-sm); }
.consult-modal .gate-form__consent { margin-top: var(--space-sm); font-size: var(--font-xs); }
.consult-modal__close { position: absolute; top: var(--space-sm); right: var(--space-sm); background: var(--bg-white); border: none; width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: var(--font-sm); color: var(--text-muted); cursor: pointer; line-height: 1; }
.consult-modal__close:hover { color: var(--text-primary); }
@media (max-width: 700px) {
    .consult-modal { width: min(440px, calc(100vw - var(--space-xl))); }
    .consult-modal__body { grid-template-columns: 1fr; }
    .consult-modal__media { display: none; }
}

@media (max-width: 1023px) {
    .featured-band__cover-link { width: 220px; }
    .featured-band__strip { padding-left: calc(220px + var(--space-xl) + var(--space-xl)); }
    .gate-layout { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}
@media (max-width: 767px) {
    .featured-band__inner { display: flex; flex-direction: column; align-items: center; }
    .featured-band__cover-link { position: static; transform: none; width: 180px; margin-bottom: var(--space-xl); z-index: 0; }
    .featured-band__strip { width: 100%; padding: var(--space-xl); text-align: center; }
    .featured-band__line { margin-left: auto; margin-right: auto; }
    .gate-layout { grid-template-columns: 1fr; }
    .gate-cover { display: none; } /* form first on mobile; cover is decorative */
    .resource-inline-grid { grid-template-columns: 1fr; }
    .resource-inline { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Homepage spec sections (2026-07-12): products, engagement band,
   methodology flow, industry strip, credibility strip, insights
   ============================================================ */

/* Featured products */
.product-eyebrow { font-size: var(--font-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 1px; color: var(--brand-primary); margin-bottom: var(--space-xs); }
.product-flag { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-2xl); margin-top: var(--space-xl); }
.product-flag__title { font-size: var(--font-xl); color: var(--brand-secondary); margin-bottom: var(--space-sm); }
.product-flag__copy { color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-base); }

/* DocXtract workflow composition (doc → API → extracted fields) */
.dx-mock { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: var(--space-base); align-items: center; }
.dx-mock__doc { background: var(--bg-light); border: 1px solid var(--border-medium); border-radius: var(--radius-base); padding: var(--space-base); }
.dx-mock__doc-title { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); margin-bottom: var(--space-sm); white-space: nowrap; }
.dx-mock__line { height: 8px; border-radius: var(--radius-full); background: var(--border-medium); margin-bottom: var(--space-xs); }
.dx-mock__line--w50 { width: 50%; } .dx-mock__line--w60 { width: 60%; } .dx-mock__line--w70 { width: 70%; } .dx-mock__line--w80 { width: 80%; } .dx-mock__line--w90 { width: 90%; }
.dx-mock__arrow { display: flex; flex-direction: column; align-items: center; color: var(--brand-primary); font-weight: var(--weight-bold); }
.dx-mock__arrow i { font-size: var(--font-xl); }
.dx-mock__arrow span { font-size: var(--font-xs); letter-spacing: 1px; }
.dx-mock__result { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-base); box-shadow: var(--shadow-sm); padding: var(--space-base); }
.dx-mock__result-title { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); margin-bottom: var(--space-sm); }
.dx-mock__badge { background: var(--brand-secondary); color: var(--text-on-dark); border-radius: var(--radius-sm); padding: 2px var(--space-xs); font-size: var(--font-xs); }
.dx-mock__row { display: flex; align-items: baseline; gap: var(--space-xs); font-size: var(--font-xs); padding: var(--space-2xs) 0; border-bottom: 1px solid var(--border-light); }
.dx-mock__row:last-child { border-bottom: none; }
.dx-mock__row span { color: var(--text-muted); min-width: 72px; }
.dx-mock__row strong { color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-mock__row i { color: var(--brand-accent-green); }
.product-secondary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-2xl); margin-top: var(--space-lg); }
.product-secondary__title { font-size: var(--font-lg); color: var(--brand-secondary); margin-bottom: var(--space-2xs); }
.product-secondary__copy { color: var(--text-secondary); font-size: var(--font-sm); }
.product-secondary > a { flex-shrink: 0; }

/* Engagement models — horizontal journey band */
.engage-band { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: var(--space-xl); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-white); box-shadow: var(--shadow-base); overflow: hidden; }
.engage-band__item { padding: var(--space-lg); border-left: 1px solid var(--border-light); display: flex; flex-direction: column; }
.engage-band__item:first-child { border-left: none; }
.engage-band__icon { font-size: var(--font-2xl); color: var(--brand-primary); margin-bottom: var(--space-sm); }
.engage-band__name { font-size: var(--font-md); color: var(--brand-secondary); margin-bottom: var(--space-xs); }
.engage-band__copy { font-size: var(--font-sm); color: var(--text-secondary); line-height: var(--leading-normal); flex: 1; margin-bottom: var(--space-sm); }
.engage-band__item .btn-link { font-size: var(--font-sm); }

/* Methodology — connected flow */
.method-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-base); align-items: stretch; margin-top: var(--space-xl); }
.method-flow__stage { position: relative; background: var(--bg-light); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-xl); padding-top: var(--space-2xl); }
.method-flow__step { position: absolute; top: calc(-1 * var(--space-base)); left: var(--space-xl); width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--brand-secondary); color: var(--text-on-dark); font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; }
.method-flow__name { font-size: var(--font-xl); color: var(--brand-secondary); margin-bottom: var(--space-2xs); }
.method-flow__kicker { font-size: var(--font-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 1px; color: var(--brand-primary); margin-bottom: var(--space-sm); }
.method-flow__seq { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-sm); }
.method-flow__copy { font-size: var(--font-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.method-flow__outcome { font-size: var(--font-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-top: var(--space-sm); }
.method-flow__connector { display: flex; align-items: center; color: var(--brand-primary); font-size: var(--font-2xl); }

/* Industries — compact linked tiles */
.industry-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.industry-tile { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-medium); border-radius: var(--radius-full); background: var(--bg-white); color: var(--text-primary); font-size: var(--font-sm); font-weight: var(--weight-medium); text-decoration: none; transition: all var(--transition-fast); }
.industry-tile i { color: var(--brand-secondary); }
.industry-tile:hover { border-color: var(--brand-secondary); color: var(--brand-secondary); box-shadow: var(--shadow-xs); }

/* Enterprise credibility strip */
.cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); }
.cred-item { display: flex; gap: var(--space-sm); align-items: flex-start; }
.cred-item__icon { font-size: var(--font-2xl); color: var(--brand-primary); line-height: 1; }
.cred-item__title { font-size: var(--font-base); color: var(--brand-secondary); margin-bottom: var(--space-2xs); }
.cred-item__copy { font-size: var(--font-sm); color: var(--text-secondary); line-height: var(--leading-normal); }

/* Latest insights — compact editorial grid (lighter than cards) */
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); }
.insight-card { border-top: 3px solid var(--brand-primary); padding-top: var(--space-base); display: flex; flex-direction: column; }
.insight-card__category { font-size: var(--font-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 1px; color: var(--brand-primary); margin-bottom: var(--space-xs); }
.insight-card__title { font-size: var(--font-md); line-height: var(--leading-tight); margin-bottom: var(--space-xs); }
.insight-card__title a { color: var(--brand-secondary); text-decoration: none; }
.insight-card__title a:hover { text-decoration: underline; }
.insight-card__excerpt { font-size: var(--font-sm); color: var(--text-secondary); line-height: var(--leading-normal); flex: 1; margin-bottom: var(--space-sm); }
.insight-card__meta { display: flex; gap: var(--space-base); font-size: var(--font-xs); color: var(--text-muted); margin-bottom: var(--space-xs); }

@media (max-width: 1023px) {
    .engage-band { grid-template-columns: repeat(2, 1fr); }
    .engage-band__item { border-left: none; border-top: 1px solid var(--border-light); }
    .engage-band__item:first-child { border-top: none; }
    .engage-band__item:nth-child(2) { border-top: none; }
    .engage-band__item:nth-child(even) { border-left: 1px solid var(--border-light); }
    .method-flow { grid-template-columns: 1fr; gap: var(--space-lg); }
    .method-flow__connector { justify-content: center; transform: rotate(90deg); }
    .cred-grid { grid-template-columns: repeat(2, 1fr); }
    .product-flag { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .engage-band { grid-template-columns: 1fr; }
    .engage-band__item { border-left: none !important; border-top: 1px solid var(--border-light); }
    .engage-band__item:first-child { border-top: none; }
    .engage-band__item:nth-child(2) { border-top: 1px solid var(--border-light); }
    .cred-grid { grid-template-columns: 1fr; }
    .insight-grid { grid-template-columns: 1fr; }
    .product-secondary { flex-direction: column; align-items: flex-start; }
    .dx-mock { grid-template-columns: 1fr; }
    .dx-mock__arrow { flex-direction: row; gap: var(--space-xs); transform: rotate(90deg); justify-content: center; }
}