/* =============================================================
   FEC Hero Test — EDITORIAL / MAGAZINE  (page 333930)
   Slug: fec-hero-test-editorial
   Aesthetic: Print-magazine. Typography-led. Display serif H1.
   Drop cap. Pull-quote with vertical rule. Folio + masthead.
   Palette LOCKED to: #283582 Navy · #3ca3dd Bright Blue ·
                       #FFFFFF White · #1F1F1F Dark Grey
   Fonts LOCKED to: Rubik (UI/eyebrow/tags/CTA), Avenir (body)
                   + Fraunces (display serif H1, pull-quote)
   ============================================================= */

/* -------------------------------------------------------------
   1. @font-face — Rubik + Avenir (mirror of live FEC site)
   ------------------------------------------------------------- */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local(''),
         url('fonts/rubik-v26-latin-300.woff2') format('woff2'),
         url('fonts/rubik-v26-latin-300.woff') format('woff');
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
         url('fonts/rubik-v26-latin-regular.woff2') format('woff2'),
         url('fonts/rubik-v26-latin-regular.woff') format('woff');
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(''),
         url('fonts/rubik-v26-latin-500.woff2') format('woff2'),
         url('fonts/rubik-v26-latin-500.woff') format('woff');
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''),
         url('fonts/rubik-v26-latin-700.woff2') format('woff2'),
         url('fonts/rubik-v26-latin-700.woff') format('woff');
}
@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
         url('fonts/Avenir-Light.woff2') format('woff2'),
         url('fonts/Avenir-Light.woff') format('woff');
}
@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''),
         url('fonts/Avenir-Black.woff2') format('woff2'),
         url('fonts/Avenir-Black.woff') format('woff');
}

/* Display serif — Fraunces (Google Fonts CDN, weights 300/400/700, +ital).
   Variable font, modern transitional/clarendon — perfect editorial voice. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,700&display=swap');

/* -------------------------------------------------------------
   2. Hide global header (test page only)
   ------------------------------------------------------------- */
#top-header,
#main-header,
.et_fixed_nav #main-header,
#et-top-navigation {
    display: none !important;
}
#page-container {
    padding-top: 0 !important;
}
#page-container,
#et-main-area,
#main-content {
    overflow: visible !important;
}

/* -------------------------------------------------------------
   3. Section root — VAGÁNS gradient-mesh: deep navy base + cyan
      glow accents + rotating star pattern + tech-grid + grain.
      Tone is darker so headline text reads cleanly.
   ------------------------------------------------------------- */
/* Section root — WebGL canvas approach (v5 — 2026-05-05).
   All previous CSS-based bg animation attempts hit Chrome compositor bugs
   (mix-blend-mode + filter:blur + conic-gradient combo refused to paint
   until scroll). Replaced with a WebGL canvas (fec-hero-bg.js) that paints
   on the GPU, bypassing the CSS pipeline entirely.

   The CSS background here is the FALLBACK shown until JS initializes (and
   permanently shown if WebGL is unavailable or prefers-reduced-motion is on). */
.fec-hero.fec-hero-section {
    position: relative;
    overflow: hidden;
    color: #FFFFFF;
    background:
        radial-gradient(60% 80% at 75% 30%, rgba(60, 163, 221, 0.32) 0%, rgba(60, 163, 221, 0) 65%),
        radial-gradient(70% 80% at 0% 50%, rgba(20, 30, 80, 0.55) 0%, rgba(20, 30, 80, 0) 65%),
        #283582 !important;
    background-repeat: no-repeat;
}

/* WebGL canvas — fills the section, sits behind all content rows.
   Injected by fec-hero-bg.js as the section's first child. */
#fec-hero-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* respect the hero's bottom radius so the canvas doesn't bleed past */
    border-radius: inherit;
    display: block;
}

/* -------------------------------------------------------------
   3b. Deck — 3-verb tagline directly under H1 (editorial sub-headline)
   ------------------------------------------------------------- */
.fec-hero-deck {
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-style: italic;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.55;
    text-align: center;
    margin: 0 auto;
    max-width: 900px;
    text-wrap: balance;
    font-variation-settings: "opsz" 36, "SOFT" 60, "WONK" 1;
}

/* (All-centered magazine-cover layout removed — back to 2-col grid:
    body+CTA on left 3_5, pull-quote on right 2_5. Default left-align.) */
.fec-hero-deck-line {
    display: inline;
}
.fec-hero-deck-line + .fec-hero-deck-line {
    margin-left: 0.35em;
}
.fec-hero-deck-line:nth-child(1) { color: rgba(255,255,255,0.92); }
.fec-hero-deck-line:nth-child(2) { color: rgba(255,255,255,0.78); }
.fec-hero-deck-line:nth-child(3) { color: #3ca3dd; }

@media (max-width: 600px) {
    .fec-hero-deck-line {
        display: block;
    }
    .fec-hero-deck-line + .fec-hero-deck-line {
        margin-left: 0;
        margin-top: 4px;
    }
}
.fec-hero.fec-hero-section > .et_pb_row {
    position: relative;
    z-index: 1;
}

/* Canvas animation pause is handled in fec-hero-bg.js (early-return on
   prefers-reduced-motion). The CSS gradient fallback shown is already static. */

/* -------------------------------------------------------------
   4. Print masthead — running header + issue meta
   ------------------------------------------------------------- */
.fec-hero-masthead-grid {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.fec-hero-running-header,
.fec-hero-issue-meta {
    font-family: 'Rubik', sans-serif !important;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    line-height: 1;
    white-space: nowrap;
}
.fec-hero-running-header {
    color: #FFFFFF;
    font-weight: 700;
}

/* -------------------------------------------------------------
   5. Folio + byline row
   ------------------------------------------------------------- */
.fec-hero-folio-grid {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.fec-hero-folio-num {
    font-family: 'Rubik', sans-serif !important;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    line-height: 1;
}
.fec-hero-folio-slash {
    color: #3ca3dd;
    font-weight: 400;
    margin: 0 2px;
}
.fec-hero-byline {
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.85);
    line-height: 1;
    font-feature-settings: "ss01";
}

/* -------------------------------------------------------------
   6. Eyebrow — Rubik tracked
   ------------------------------------------------------------- */
.fec-hero-eyebrow p {
    font-family: 'Rubik', sans-serif !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #3ca3dd;
    line-height: 1.4;
    margin: 0;
}

/* -------------------------------------------------------------
   7. THE HERO — Avenir-Black UPPERCASE H1 (matches live FEC site)
   2026-05-06: swapped from Fraunces to Avenir-Black per Stefanie review.
   Italic em accents (.fec-hero-h1-italic, .fec-hero-h1-amp) keep Fraunces cyan.
   ------------------------------------------------------------- */
.fec-hero-headline .fec-hero-h1,
.fec-hero-headline h1.fec-hero-h1 {
    font-family: 'Avenir-Black', 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #FFFFFF;
    margin: 0;
    font-feature-settings: normal;
    font-variation-settings: normal;
}
/* Two-line H1 — Stefanie 2026-05-06: bumped up (live=45px is too small for hero) */
.fec-hero-h1-line1 {
    display: block;
    font-size: 70px;
    line-height: 1.1;
    letter-spacing: 0;
    margin-bottom: 12px;
    text-wrap: balance;
}
.fec-hero-h1-line2 {
    display: block;
    font-size: 45px;
    line-height: 1.15;
    letter-spacing: 0;
    /* Keep on a single line so the hierarchy reads cleanly */
    white-space: nowrap;
}
.fec-hero-h1-italic {
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-style: italic;
    font-weight: 400;
    color: #3ca3dd;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    /* Tiny optical kern so italic V doesn't crash the preceding "The " */
    padding: 0 0.04em;
}
.fec-hero-h1-amp {
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-style: italic;
    font-weight: 400;
    color: #3ca3dd;
    padding: 0 0.05em;
}
.fec-hero-h1-since {
    /* The dateline-style coda — smaller, tracked, tonal break, cyan accent */
    display: inline-block;
    margin-left: 0.18em;
    font-family: 'Rubik', sans-serif !important;
    font-style: normal;
    font-weight: 500;
    font-size: 0.18em;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #3ca3dd;
    vertical-align: 0.55em;
    white-space: nowrap;
}

/* -------------------------------------------------------------
   8. Body grid — pull-quote + drop-cap lede
   ------------------------------------------------------------- */
.fec-hero-body-row .et_pb_column {
    margin-bottom: 0 !important;
}

/* 8a. Pull-quote — vertical rule, tight column, Fraunces italic */
.fec-hero-pullquote-text {
    position: relative;
    margin: 0;
    padding: 4px 0 4px 28px;
    border-left: 1px solid rgba(255,255,255,0.30);
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    color: #FFFFFF;
    quotes: none;
    font-feature-settings: "ss01";
}
.fec-hero-pullquote-text::before,
.fec-hero-pullquote-text::after {
    content: none;
}
.fec-hero-pullquote-mark {
    /* Editorial-pull-quote opening mark, larger + flush left at the
       column edge (2026-05-04 David). Anchors to the blockquote which
       already has `position: relative`. */
    position: absolute;
    top: -15px;
    left: 0;
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-style: italic;
    font-weight: 400;
    font-size: 100px;
    line-height: 1;
    color: #3ca3dd;
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
}
.fec-hero-pullquote-line {
    display: block;
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(20px, 2.1vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: #FFFFFF;
}
.fec-hero-pullquote-line + .fec-hero-pullquote-line {
    margin-top: 4px;
}
/* Stefanie 2026-05-07 (iter 2): all 3 pull-quote lines white (cyan removed). */
.fec-hero-pullquote-line {
    color: rgba(255,255,255,0.92);
}
.fec-hero-pullquote-cite {
    display: block;
    margin-top: 18px;
    font-family: 'Rubik', sans-serif !important;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    line-height: 1;
}

/* 8b. Body lede — Avenir, drop cap on first letter */
.fec-hero-body p,
.fec-hero-body .fec-hero-lede {
    font-family: 'Avenir', sans-serif !important;
    font-weight: 400;
    font-size: clamp(16px, 1.18vw, 19px);
    line-height: 1.7;
    color: rgba(255,255,255,0.92);
    margin: 0;
    /* Activate optical hyphen for justified-feel paragraph */
    text-align: left;
    hyphens: manual;
}
/* Explicit drop-cap span (replaces ::first-letter — Divi's flex-column
   parent prevents ::first-letter from wrapping the lede across 3 lines).
   The <span class="fec-hero-dropcap"> sits inline with float:left, so
   subsequent text wraps around it correctly; line 4 starts at the F's
   left edge. */
.fec-hero-body .fec-hero-lede {
    overflow: visible;
}
.fec-hero-body .fec-hero-lede .fec-hero-dropcap {
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-weight: 500;
    font-style: normal;
    /* 3.4em wraps exactly 2 body lines. 3.6em was 1.24px too tall
       (margin-top 2 + height 57 > 2 line-heights 57.76), so line 3
       still wrapped under the F. (2026-05-04 David). */
    font-size: 3.4em;
    line-height: 0.86;
    float: left;
    color: #3ca3dd;
    padding: 4px 14px 0 0;
    margin-top: 2px;
    transform: translateY(2px);
    font-variation-settings: "opsz" 144, "SOFT" 30;
}

/* -------------------------------------------------------------
   9. CTA buttons — DESIGN-LOCKED (Navy / cyan glow / pill 35px)
   ------------------------------------------------------------- */
.fec-hero-cta-buttons,
.fec-hero-cta-buttons .et_pb_text_inner {
    text-align: left;
    margin-top: 0;
}

.fec-hero-cta-link {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-top: 0;
    margin-right: 12px;
    margin-left: 0;
    margin-bottom: 8px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 100%;
    text-decoration: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    padding: 25px 35px;
    color: #ffffff;
    border-radius: 35px;
    background-color: #283582;
    font-family: "Rubik", sans-serif;
    font-size: 18px;
    letter-spacing: 0.04em;
}

/* Editorial-only override: section bg is Navy, both CTAs are outline-only
   (transparent fill). Primary uses a 2px Bright Blue border for emphasis,
   secondary a 1px white border for quiet hierarchy. Locked spec
   (font / padding / pill / hover glow + scale) stays intact. */
.fec-hero-cta-link--primary {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #3ca3dd;
}
.fec-hero-cta-link--secondary {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}

.fec-hero-cta-link:hover {
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
    color: #ffffff;
    text-decoration: none;
}
.fec-hero-cta-link--primary:hover {
    background-color: #3ca3dd;
    box-shadow: 10px 0 50px #3ca3dd, inset 0 0 0 2px #3ca3dd;
}
.fec-hero-cta-link--secondary:hover {
    background-color: transparent;
    box-shadow: 10px 0 50px #3ca3dd, inset 0 0 0 1px rgba(255,255,255,0.65);
}

/* -------------------------------------------------------------
   10. Trustbar — magazine "Filed under" treatment
   ------------------------------------------------------------- */
.fec-hero-trustbar-text {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0;
    font-family: 'Rubik', sans-serif !important;
}
.fec-hero-trustbar-label {
    font-family: 'Rubik', sans-serif !important;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    line-height: 1;
}
.fec-hero-trustbar-headline {
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 1.4vw, 22px);
    letter-spacing: -0.005em;
    color: #FFFFFF;
    line-height: 1.25;
}

/* -------------------------------------------------------------
   11. Topic tag list — magazine TOC style, no boxes
   ------------------------------------------------------------- */
.fec-hero-tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.fec-hero-tag {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 22px 14px 20px 0;
    border-right: 1px solid rgba(255,255,255,0.12);
    transition: all 0.3s ease;
    cursor: default;
}
.fec-hero-tag:last-child {
    border-right: none;
}
.fec-hero-tag-num {
    font-family: 'Rubik', sans-serif !important;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.45);
    line-height: 1;
    flex-shrink: 0;
}
.fec-hero-tag-name {
    font-family: 'Fraunces', 'Times New Roman', serif !important;
    font-weight: 500;
    font-size: clamp(15px, 1.2vw, 19px);
    letter-spacing: 0;
    color: #FFFFFF;
    line-height: 1.1;
}
.fec-hero-tag:hover {
    transform: translateY(-1px);
}
.fec-hero-tag:hover .fec-hero-tag-name {
    color: #3ca3dd;
}
.fec-hero-tag:hover .fec-hero-tag-num {
    color: #3ca3dd;
}

/* -------------------------------------------------------------
   12. Tablet (≤ 980px)
   ------------------------------------------------------------- */
@media (max-width: 980px) {
    .fec-hero-body-row .et_pb_column.fec-hero-col-quote,
    .fec-hero-body-row .et_pb_column.fec-hero-col-body {
        width: 100% !important;
        margin-bottom: 32px !important;
    }
    .fec-hero-body-row .et_pb_column:last-child {
        margin-bottom: 0 !important;
    }
    .fec-hero-pullquote-text {
        padding-left: 22px;
    }
    .fec-hero-tag-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .fec-hero-tag {
        padding: 16px 14px 14px 0;
    }
    .fec-hero-tag:nth-child(2),
    .fec-hero-tag:last-child {
        border-right: none;
    }
    .fec-hero-tag {
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .fec-hero-tag:nth-last-child(-n+1) {
        border-bottom: none;
    }
}

/* -------------------------------------------------------------
   13. Phone (≤ 600px)
   ------------------------------------------------------------- */
@media (max-width: 600px) {
    .fec-hero-masthead-grid,
    .fec-hero-folio-grid {
        gap: 10px;
    }
    .fec-hero-running-header,
    .fec-hero-issue-meta,
    .fec-hero-folio-num {
        font-size: 10px;
        letter-spacing: 0.22em;
    }
    .fec-hero-byline {
        font-size: 13px;
    }
    .fec-hero-eyebrow p {
        font-size: 11px;
        letter-spacing: 0.26em;
    }
    .fec-hero-h1-line1 {
        font-size: clamp(36px, 11.5vw, 56px);
        line-height: 1.04;
        letter-spacing: -0.02em;
        margin-bottom: 0.1em;
    }
    .fec-hero-h1-line2 {
        font-size: clamp(15px, 4.6vw, 22px);
        line-height: 1.25;
        white-space: normal;
    }
    .fec-hero-h1-since {
        font-size: 0.22em;
        letter-spacing: 0.24em;
        margin-left: 0.1em;
        vertical-align: 0.45em;
    }
    .fec-hero-pullquote-mark {
        font-size: 56px;
        top: -10px;
        left: 14px;
    }
    .fec-hero-pullquote-text {
        padding-left: 20px;
    }
    .fec-hero-pullquote-line {
        font-size: 18px;
    }
    .fec-hero-body .fec-hero-lede {
        font-size: 16px;
        line-height: 1.65;
    }
    .fec-hero-body .fec-hero-lede .fec-hero-dropcap {
        font-size: 3.2em;
        padding: 4px 10px 0 0;
    }
    .fec-hero-cta-link {
        font-size: 15px;
        padding: 20px 28px;
        margin: 6px 6px 6px 0;
    }
    .fec-hero-cta-buttons,
    .fec-hero-cta-buttons .et_pb_text_inner {
        text-align: center;
    }
    .fec-hero-cta-link {
        margin: 6px 4px;
    }
    .fec-hero-trustbar-text {
        gap: 10px;
    }
    .fec-hero-trustbar-headline {
        font-size: 16px;
    }
    .fec-hero-tag-list {
        grid-template-columns: 1fr;
    }
    .fec-hero-tag {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.12);
        padding: 14px 0;
    }
    .fec-hero-tag:last-child {
        border-bottom: none;
    }
}

/* -------------------------------------------------------------
   14. Reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fec-hero-cta-link,
    .fec-hero-tag {
        transition: none;
    }
    .fec-hero-cta-link:hover,
    .fec-hero-tag:hover {
        transform: none;
    }
}

/* ================================================================
   Section 11 — Entrance choreography (added 2026-05-04 via /impeccable animate)

   Three signature flourishes layered on top of Divi's default
   et_had_animation parent fades. Each runs ONCE on page load.

   Curve: ease-out-expo cubic-bezier(0.16, 1, 0.3, 1) — confident,
   decisive deceleration.
   ================================================================ */

/* "Voice" mesh-gradient fill is now defined in section 3b above (with the
   typography rules). The previous shimmer ::after has been removed —
   the flowing mesh fill replaces it. */
.fec-hero-h1-italic {
    display: inline-block;
}

/* --- Flourish 2: Drop-cap "F" settle ---
   The drop-cap is float:left (Divi flex-column blocks ::first-letter, so
   the dropcap is an explicit <span>). On entrance it scales 1.08→1.00,
   de-blurs from 4px→0, and fades from 0.5→1.0 opacity over 380ms.
   transform-origin pulls the settle toward the baseline so it feels
   like the letter is dropping into place, not zooming out from center. */
.fec-hero-dropcap {
    transform-origin: 28% 78%;
    animation: fec-dropcap-settle 380ms cubic-bezier(0.16, 1, 0.3, 1) 1050ms 1 both;
    will-change: transform, filter, opacity;
}

@keyframes fec-dropcap-settle {
    0%   { opacity: 0.5; transform: scale(1.08); filter: blur(4px); }
    60%  { opacity: 0.95; filter: blur(0.6px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* --- Flourish 3: Pull-quote 3-line cascade ---
   The 3 verbs (Shaping / Aligning / Strengthening) currently fade together
   via Divi's parent animation. This adds a 220ms stagger so the brand
   statement BUILDS rather than appears, and the final cyan line gets a
   one-shot drop-shadow glow that brightens at 40% then settles to 0.
   The cascade carries the eye to the strongest claim (competitiveness). */
.fec-hero-pullquote-line {
    opacity: 0;
    transform: translateY(10px);
    will-change: transform, opacity;
}

/* Stefanie 2026-05-07: indexes shifted -1 after removing the opening
   quote-mark span. Now nth-child(1)=Shaping, (2)=Aligning(cyan), (3)=Strengthening. */
.fec-hero-pullquote-line:nth-child(1) {
    animation: fec-pullquote-rise 380ms cubic-bezier(0.16, 1, 0.3, 1) 1300ms 1 both;
}

.fec-hero-pullquote-line:nth-child(2) {
    animation:
        fec-pullquote-rise 380ms cubic-bezier(0.16, 1, 0.3, 1) 1520ms 1 both,
        fec-pullquote-cyan-glow 1600ms ease-out 1900ms 1 both;
}

.fec-hero-pullquote-line:nth-child(3) {
    animation: fec-pullquote-rise 380ms cubic-bezier(0.16, 1, 0.3, 1) 1740ms 1 both;
}

@keyframes fec-pullquote-rise {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fec-pullquote-cyan-glow {
    0%   { filter: drop-shadow(0 0 0 rgba(60, 163, 221, 0)); }
    35%  { filter: drop-shadow(0 0 14px rgba(60, 163, 221, 0.55)); }
    100% { filter: drop-shadow(0 0 0 rgba(60, 163, 221, 0)); }
}

/* --- prefers-reduced-motion: disable all flourishes --- */
@media (prefers-reduced-motion: reduce) {
    .fec-hero-dropcap {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .fec-hero-pullquote-line {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }
}