/* GENERATED FILE — DO NOT EDIT.
   Source: shared/design-system/sections.css
   Regenerate: node shared/design-system/sync.mjs
   Edits here are overwritten and will silently desync the other targets. */

/* ============================================================
   Focus Media Services — SECTIONS
   ------------------------------------------------------------
   Page-section furniture: subpage header, bridge band, Ways to Learn
   blocks, course cards, split sections, video production, the vertical
   work conveyors, and the CTA card. Kept in original document order.

   Canonical source — edit here, then run:
       node shared/design-system/sync.mjs
   Never edit the generated copies in each target's ds folder.
   ============================================================ */

/* ---------- Subpage header + helpers ---------- */

.hero__trust-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-slate);
}
.hero__trust-line li { display: flex; align-items: center; }
.hero__trust-line li + li::before {
    content: "";
    width: 4px; height: 4px;
    margin: 0 14px;
    border-radius: 50%;
    background: var(--green);
}

.cta__note {
    margin: 18px 0 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .65);
}
.cta__note a { color: #fff; text-decoration: underline; }
.cta__note a:hover { color: var(--emphasis); }

/* book sources / video links page */
.src-wrap { max-width: 900px; }
.src-chapter { margin-bottom: 44px; }
.src-chapter h2 { font-size: 21.6px; margin-bottom: 6px; }
.src-chapter h2 .accent { color: var(--secondary); }
html.mode-dark .src-chapter h2 .accent { color: var(--emphasis); }
.src-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.src-list li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 12px 4px;
    border-bottom: 1px solid var(--hairline);
    font-size: 15.5px;
    line-height: 1.6;
}
.src-num {
    flex: 0 0 44px;
    font-weight: 600;
    color: var(--text-soft);
    font-size: 13.5px;
}
.src-body a {
    color: var(--secondary);
    font-weight: 500;
}
html.mode-dark .src-body a { color: var(--emphasis); }
.src-body a:hover { text-decoration: underline; }
/* Same Lucide arrow as .footer-ext, at citation size. */
.src-ext {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 5px;
    vertical-align: -.02em;
    opacity: .55;
    background-color: currentColor;
    -webkit-mask: var(--icon-arrow-up-right) center / contain no-repeat;
    mask: var(--icon-arrow-up-right) center / contain no-repeat;
}
.src-and { color: var(--text-soft); font-size: 14px; }

/* how-it-works steps */
.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 34px;
    text-align: left;
}
@media (min-width: 960px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step-card { padding: 30px 32px; }
.step-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    background: rgba(120, 198, 31, .18);
    color: #4d8a0a;
    font-weight: 600;
    border-radius: var(--radius-round);
}
.step-card h3 { margin-bottom: 6px; font-size: 18px; }
.step-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--body-text); }

/* ---------- Bridge: statement + stats (navy band after the hero) ---------- */
.bridge { padding-top: 14px; padding-bottom: 4px; }
.bridge h2 { margin-bottom: 40px; }
.stats-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.stats-row .stat {
    flex: 1 1 200px;
    padding: 28px 20px 0;
    text-align: center;
}
.stats-row .stat + .stat { border-left: 1px solid rgba(255, 255, 255, .18); }
@media (max-width: 639px) {
    .stats-row .stat + .stat { border-left: 0; }
}
.stats-row .stat strong {
    display: block;
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.stats-row .stat span { font-size: 13.5px; color: #9fc4dd; }
/* the book's key question, called out in the brand's light blue */
.stats-row .stat b { font-weight: 600; color: var(--emphasis); }

/* ---------- Ways to Learn: section title + the video pointer line ---------- */
.tiles-title { margin-top: 0; color: var(--primary); }
.tiles-title .accent { color: var(--secondary); }

.learn-video-note {
    margin: 34px 0 0;
    text-align: center;
    font-size: 14.5px;
    color: var(--body-text);
}
.learn-video-note a { font-weight: 600; color: var(--secondary); }
.learn-video-note a:hover { text-decoration: underline; }

/* ---------- Ways to Learn: color blocks ---------- */
.blocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 34px;
    text-align: left;
}
@media (min-width: 960px) { .blocks { grid-template-columns: repeat(3, 1fr); } }
.block {
    position: relative;
    padding: 40px 36px 34px;
    border-radius: var(--radius-lg);
    color: #fff;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}
.block:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* seven offerings compose as three rows: the flagship (first) and the
   crisis line (last) span two columns on desktop */
@media (min-width: 960px) { .block--wide { grid-column: span 2; } }
/* solid product color as fallback; the photo + .tint wash sit on top */
.block--course   { background-color: var(--c-course); }
.block--book     { background-color: var(--c-book); }
.block--lib      { background-color: var(--c-library); }
.block--virtual  { background-color: var(--c-virtual); }
.block--oncam    { background-color: var(--c-oncam); }
.block--speaking { background-color: var(--c-speaking); }
.block--consult  { background-color: var(--c-consult); }
/* photo blocks carry a strong product-color wash; the photo sits softened
   behind it so the text reads first. Layering (bottom to top): the element's
   own background-image (hidden), a ::before repainting that image via
   background:inherit with a REAL blur filter (backdrop-filter under a washed
   pseudo silently no-ops on some GPUs), the ::after color wash, then the
   z-indexed content. The scale hides the blur's soft edges; hover snaps the
   photo back into focus and pulls the wash back. */
.block.tint { --tint-opacity: .85; }
.block.tint:hover { --tint-opacity: .7; }
.block.tint::before,
.card.tint::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(5px);
    transform: scale(1.08);
}
.block.tint::before {
    transition: filter .35s ease-in-out, transform .35s ease-in-out;
}
.block.tint:hover::before { filter: blur(0); transform: scale(1); }
.block.tint::after { transition: opacity .35s ease-in-out; }
/* keep the block's content above the tint wash */
.block.tint > * { position: relative; z-index: 1; }
.block__num {
    position: absolute;
    top: 10px; right: 22px;
    font-size: 100px;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, .14);
    transform-origin: top right;
    transition: color .35s ease-in-out, transform .35s ease-in-out;
}
.block:hover .block__num { color: rgba(255, 255, 255, .34); transform: scale(1.06); }
.block h3 { color: #fff; font-size: 23px; margin-bottom: 10px; position: relative; }
.block p {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .88);
    margin-bottom: 18px;
    position: relative;
    transition: color .35s ease-in-out;
}
.block:hover p { color: #fff; }
.block .link-more { font-size: 14px; color: #fff; position: relative; }

/* ---------- Course cards ---------- */
.course-lede { max-width: 900px; margin-left: auto; margin-right: auto; }
/* Left-justified variant: same 900px measure, but the block sits on the
   container's left edge instead of centering (course "What You'll Learn"). */
.course-lede--left { margin-left: 0; margin-right: 0; }

.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
    text-align: center;
}
@media (min-width: 960px) {
    .cards-grid { grid-template-columns: 1fr 1fr; text-align: left; }
}
.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    color: #fff;
    border-radius: var(--radius-lg);
}
@media (min-width: 640px) {
    .card { padding: 50px 70px; }
}
.card h3 { color: #fff; }
.card .btn { align-self: center; margin-top: 10px; }
@media (min-width: 960px) {
    .card .btn { align-self: flex-start; }
}
/* photo-backed offer card: the Ways blocks' tinted-photo grammar carried into
   .card. Softer still than the blocks — these cards hold buttons and no hover
   reveal, so the photo stays a quiet texture behind the wash. (The blurred
   ::before is defined with the block's, above.) */
.card.tint { --tint-opacity: .88; overflow: hidden; }
.card.tint > * { position: relative; z-index: 1; }
/* paired offer cards align as a set: titles at the top, button tail pinned
   to the bottom of the equal-height cards. The fine print gathers in one
   .card__notes block: stacked (mobile) it simply flows after the button;
   side by side it leaves the flow (absolute, in the reserved bottom padding)
   so both cards' buttons land at exactly the same height however much fine
   print follows. */
.cards-grid .card { position: relative; justify-content: flex-start; }
.cards-grid .card > div { margin-top: auto; }
.card__notes { margin-top: 18px; }
.card__notes .cta__note { margin: 0; }
.card__notes .cta__note + .cta__note { margin-top: 10px; }
@media (min-width: 960px) {
    .cards-grid .card { padding-bottom: 120px; }
    .cards-grid .card .card__notes {
        position: absolute;
        left: 70px;
        right: 70px;
        bottom: 24px;
        margin: 0;
    }
}

/* ---------- Split sections ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: stretch;
}
@media (min-width: 960px) {
    .split { grid-template-columns: 1fr 1fr; }
    .split > .split__copy { order: -1; }
}

/* plain text column for splits on light backgrounds (no card slab) */
.split__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
@media (min-width: 960px) {
    .split__copy { text-align: left; padding-right: 30px; }
}
.split__copy .btn { align-self: center; margin-top: 10px; }
@media (min-width: 960px) {
    .split__copy .btn { align-self: flex-start; }
}
.team-intro h2 { color: var(--primary); }
.team-intro h2 .accent { color: var(--secondary); }
.team-intro p { color: var(--body-text); }
/* dark-band variant: light-on-navy */
.team-intro--dark h2 { color: var(--emphasis); }
.team-intro--dark h2 .accent { color: #fff; }
.team-intro--dark p { color: #cfe0ec; }

/* lead trainer portrait */
.lead-portrait { position: relative; max-width: 460px; justify-self: center; }
@media (min-width: 960px) { .lead-portrait { justify-self: start; } }

/* lead-trainer band (homepage, settled): one portrait balancing the bio —
   tighten the composition and center the portrait in its column instead of
   pinning it to the gutter */
.split--lead {
    max-width: 1140px;
    margin: 0 auto;
    align-items: center;
}
/* the bio carries more words than the portrait carries width — give the
   copy column the larger share */
@media (min-width: 960px) { .split--lead { grid-template-columns: 7fr 5fr; } }
.split--lead .lead-portrait { justify-self: center; }
@media (min-width: 960px) { .split--lead .lead-portrait { justify-self: center; } }
.lead-portrait img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
/* ---------- Video production section ---------- */
.gov-centered { max-width: 800px; margin: 0 auto; padding: 0 30px; }
.gov-centered h2 { color: var(--primary); }
.gov-centered h2 .accent { color: var(--secondary); }
.gov-centered p { color: var(--body-text); }

/* capability-led selling */
.gov-caps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 34px;
    width: fit-content;
    margin: 8px auto 26px;
    padding: 0;
    list-style: none;
    text-align: left;
}
@media (min-width: 640px) { .gov-caps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .gov-caps { grid-template-columns: repeat(4, auto); } }
.gov-caps li {
    position: relative;
    padding-left: 32px;
    font-size: 16px;
    color: var(--body-text);
}
.gov-caps li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(120, 198, 31, .2);
    color: #4d8a0a;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-round);
}
.gov-proof {
    margin: 0 0 28px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* ---------- Hero variant C: dual vertical work conveyors ---------- */
.vert-stage {
    display: flex;
    gap: 16px;
    height: 540px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
@media (max-width: 959px) {
    .vert-stage { height: 380px; }
}
.vert-col {
    flex: 1;
    min-width: 0;
}
.vert-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
    animation: vert-scroll 50s linear infinite;
}
.vert-track--down { animation-direction: reverse; animation-duration: 58s; }
@keyframes vert-scroll {
    to { transform: translateY(-50%); }
}
.vert-stage:hover .vert-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .vert-track { animation: none; }
}
/* the conveyor's photo card (markup built by main.js). Items own their
   spacing (uniform including the loop seam); no shadow — a card shadow
   greyed the gaps between stacked cards */
.vert-track .work-card {
    width: 100%;
    margin-bottom: 16px;
    background: var(--surface-card);
    border-radius: var(--radius);
    overflow: hidden;
}
.vert-track .work-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* caps + proof inside a split column */
.split .gov-caps {
    width: fit-content;
    margin: 4px auto 20px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .split .gov-caps { grid-template-columns: 1fr 1fr; gap: 10px 28px; }
}
@media (min-width: 960px) {
    .split .gov-caps { margin-left: 0; }
}
.split .gov-proof { margin-bottom: 22px; }

/* ---------- Membership / news cards ---------- */
.thoughts { padding-bottom: 5em; }
.thoughts h2 { margin-bottom: 20px; color: var(--primary); }
/* .thoughts-grid / .news-card removed: the membership page now uses the one
   shared article card (.post-grid / .post-card) from
   shared/design-system/article-card.css, the same component /thoughts renders. */

/* ---------- CTA (rounded card) ---------- */
.cta-wrap { background: var(--light); }
.cta {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cta__bg {
    height: 450px;
    background-size: cover;
    background-position: center;
}
.cta__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgba(23, 75, 115, .88) 0%, #174b73 100%);
}
.cta__content {
    max-width: 900px;
    padding: 0 30px;
    text-align: center;
    color: #fff;
}
.cta__content h2 { color: #fff; }