/* =========================================================================
   FEC Blog Head Section · V-3 Centered Announcement (modernized v2 2026-05-06)
   Page 334027. Divi-native: 4 [et_pb_text] modules + structural decorations.
   Modernization layer: side hairlines + scroll cue (architectural frame).
   System tokens: Navy #283582, Cyan #3ca3dd, Cool-white #ecf0f7,
   Fraunces / Rubik / Avenir / JetBrains Mono.
   ========================================================================= */

/* Section — relative for absolute children, overflow hidden */
body.page-id-334027 .fec-head-redesign-v-3 {
  position: relative;
  background-color: #ecf0f7 !important;
  padding: 128px 0 !important;
  overflow: hidden;
}

/* Center everything in the row's column */
body.page-id-334027 .fec-head-redesign-v-3 .et_pb_column {
  text-align: center;
}

/* ---- 1. EYEBROW: Rubik caps Cyan ------------------------------------- */

body.page-id-334027 .fec-head-redesign-v-3 .fec-v3-eyebrow p {
  margin: 0 !important;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #3ca3dd;
}

/* ---- 2. AUTHORITY STRIP: more readable — Navy@72%, 12.5px ----------- */

body.page-id-334027 .fec-head-redesign-v-3 .fec-v3-authority p {
  margin: 0 !important;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(40, 53, 130, 0.72);
}

/* ---- 3. H2: Fraunces 500, italic em on accent word ------------------- */

body.page-id-334027 .fec-head-redesign-v-3 .fec-v3-h2 h2 {
  margin: 0 auto !important;
  max-width: 16ch;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: #283582;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

body.page-id-334027 .fec-head-redesign-v-3 .fec-v3-h2 h2 em {
  font-style: italic;
  color: #3ca3dd;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* ---- 4. DECK: Avenir gray narrow ------------------------------------- */

body.page-id-334027 .fec-head-redesign-v-3 .fec-v3-deck p {
  margin: 0 auto !important;
  max-width: 60ch;
  font-family: "Avenir", "Avenir Next", "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: #6b7286;
}

/* ---- SCROLL CUE: 2px line (::before, animated translateY for smoothness)
        + "scroll" text (::after) — both Navy (FEC primary) ----------------- */

/* Line travels VERTICALLY through the text area. The text has a solid
   matching bg which occludes the line when behind it (z-index layering).
   Visual: line appears above SCROLL → enters behind it (hidden) → exits below. */

body.page-id-334027 .fec-head-redesign-v-3::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 48px;                              /* same base as text (was 60) */
  width: 2px;
  height: 16px;
  background: #283582;
  transform: translateX(-50%) translateY(-32px);
  opacity: 0;
  z-index: 1;                                /* BEHIND text */
  pointer-events: none;
  animation:
    fec-v3-scroll-translate 2.2s linear infinite,
    fec-v3-scroll-fade 2.2s linear infinite;
}

@keyframes fec-v3-scroll-translate {
  from { transform: translateX(-50%) translateY(-32px); }
  to   { transform: translateX(-50%) translateY(32px); }
}

@keyframes fec-v3-scroll-fade {
  0%, 100% { opacity: 0; }
  14%, 86% { opacity: 1; }
}

body.page-id-334027 .fec-head-redesign-v-3::after {
  content: "scroll";
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: #ecf0f7;
  padding: 8px 14px;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #283582;
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 640px) {
  body.page-id-334027 .fec-head-redesign-v-3 {
    padding: 96px 0 !important;
  }
  body.page-id-334027 .fec-head-redesign-v-3 .fec-v3-authority p {
    font-size: 11px;
    letter-spacing: 0.18em;
  }
  body.page-id-334027 .fec-head-redesign-v-3::after {
    bottom: 44px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-334027 .fec-head-redesign-v-3::before {
    animation: none;
    transform: translateX(-50%);
    opacity: 1;
  }
}