/* ==========================================================================
   SVAC — Unified Split Hero (FULL STYLESHEET)
   .svac-mod-hero-split
   - Right Float: desktop absolute + float; mobile in-flow viewport + CTA below
   - Bottom Right / Bottom Right Overlay: desktop pinned; mobile in-flow viewport + CTA below
   - RF_MORE: identical to right_float plus below-CTA badge + text
   - On-load stagger animation restored (uses `translate` to avoid transform conflicts)
   ========================================================================== */

.svac-mod-hero-split{
  container-type: inline-size;
  container-name: hero;

  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: var(--hero-min-h, 620px);
  isolation: isolate;
  overflow: visible;
}

/* Desktop vertical rhythm — give content room to breathe */
@container hero (min-width: 769px){
  .svac-mod-hero-split__content{
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
}

.bluelink {
  text-decoration:none;
  font-weight:500;
  color: #0058FC;
}

/* reserve real layout space beneath hero for visual rhythm */
.svac-mod-hero-split::after{
  content: "";
  display: block;
  height: var(--hero-bottom-guard, 200px);
}

/* RF_MORE: reduce bottom guard space (less dead space under badge/text) */
.svac-mod-hero-split[data-art-mode="rf_more"]{
  --hero-bottom-guard: 50px;
  --hero-bottom-guard-mobile: 50px;
}


/* =========================
   Content grid / safe zone
   ========================= */
.svac-mod-hero-split__grid{
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  min-width: 0;
}

.svac-mod-hero-split__content{
  min-width: 0;
  max-width: var(--hero-text-max, 680px);
}

/* spacer column keeps split rhythm when art is absolute */
.svac-mod-hero-split__spacer{
  min-width: 0;
}

/* =========================
   Eyebrow — canonical pill (site standard)
   ========================= */
.svac-mod-hero-split__eyebrow{
  margin: 0 0 24px;
  color: var(--eyebrow-color, #00205C);
  z-index: 4;
}

/* pill appearance — boxed uppercase, fixed min-height to avoid collapse */
.svac-mod-hero-split__eyebrow-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;

  border:2px solid currentColor;
  padding:8px 18px;
  text-transform:uppercase;
  font-weight:450;
  font-size:20px;
  line-height:20px;
  letter-spacing:1px;
  min-height:44px;
  background: transparent;
  box-sizing: border-box;
}

.svac-mod-hero-split__eyebrow-text{
  display:inline-block;
  text-transform:uppercase;
}

/* this hero doesn't use eyebrow lines */
.svac-mod-hero-split__eyebrow-lines{ display:none !important; }

/* =========================
   Type (colors controlled by module variables)
   ========================= */
.svac-mod-hero-split__heading{
  margin: 0 0 18px;
  color: var(--hero-heading-color, #00205C);
  -webkit-font-smoothing:antialiased;
}

.svac-mod-hero-split__subhead{
  margin: 0 0 26px;
  color: var(--hero-subhead-color, #00205C);
}

/* =========================
   CTA row — layout only (use global .svac-btn for visuals)
   ========================= */
.svac-mod-hero-split__cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

.svac-mod-hero-split .svac-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
  box-sizing:border-box;
}

/* =========================
   Art layer (absolute, padding-independent)
   ========================= */
.svac-mod-hero-split__art-layer{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

/* clip only bottom edge so art can bleed to top/left/right but not extend below module */
.svac-mod-hero-split__art-clip{
  position:absolute;
  inset:0;
  clip-path: inset(-9999px -9999px 0 -9999px);
}

/* Fallback: clip-path unsupported */
@supports not (clip-path: inset(0)){
  .svac-mod-hero-split{ overflow:hidden; }
  .svac-mod-hero-split__art-clip{ clip-path:none; }
}

/* =========================
   MODE: RIGHT FLOAT (desktop absolute + float)
   - rf_more reuses right_float art wrapper
   ========================= */
.svac-mod-hero-split__rf{
  position:absolute;
  top: var(--rf-art-top, -140px);
  right: var(--rf-art-right, -200px);
  z-index:2;
  pointer-events:none;
}

.svac-mod-hero-split__rf-img{
  display:block;
  width: var(--rf-art-w, 820px);
  max-width:none;
  height:auto;
  user-select:none;
}

/* Mobile in-flow viewport for right_float (hidden on desktop) */
.svac-mod-hero-split__rf-mobile{
  display:none;
}

/* float animation applied only on desktop-size containers and only when motion allowed */
@media (prefers-reduced-motion: no-preference){
  @keyframes svacHeroFloat {
    0%{ transform: translateY(0); }
    40%{ transform: translateY(-14px); }
    60%{ transform: translateY(-10px); }
    100%{ transform: translateY(0); }
  }

  @container hero (min-width: 769px){
    .svac-mod-hero-split[data-art-mode="right_float"] .svac-mod-hero-split__rf-img,
    .svac-mod-hero-split[data-art-mode="rf_more"] .svac-mod-hero-split__rf-img{
      animation: svacHeroFloat 6.5s ease-in-out 900ms infinite;
      will-change: transform;
    }
  }
}

/* =========================
   MODE: BOTTOM-RIGHT (desktop pinned + movable base art)
   ========================= */
.svac-mod-hero-split__br-circle--pinned{
  position:absolute;
  right: var(--br-circle-right, -180px);
  bottom: var(--br-circle-bottom, -220px);

  width: var(--br-circle-size, 720px);
  height: var(--br-circle-size, 720px);

  background-image: url("https://2939357.fs1.hubspotusercontent-na1.net/hubfs/2939357/2026%20SVAC%20Website/Pillar%20Pages/Yellow%20Exp%20Cirlce.svg");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;

  z-index:1;
  pointer-events:none;
}

.svac-mod-hero-split__br{
  position:absolute;
  right: var(--br-art-right, -40px);
  bottom: var(--br-art-bottom, 0px);
  z-index:2;
  pointer-events:none;
}

.svac-mod-hero-split__br-base{
  display:block;
  width: var(--br-art-w, 620px);
  max-width:none;
  height:auto;
}

/* overlay image class kept for completeness if you use it elsewhere */
.svac-mod-hero-split__br-overlay{
  display:block;
  width: var(--br-overlay-w, 260px);
  max-width:none;
  height:auto;
  position:relative;
  z-index:3;
}

/* Mobile in-flow viewport for bottom-right modes (hidden on desktop) */
.svac-mod-hero-split__br-mobile{
  display:none;
}

/* Primary CTA text styling (hero-specific override only) */
.svac-mod-hero-split .svac-btn--primary{
  color: #00205C;
  font-weight: 450;
  font-size: 24px;
}

/* =========================
   RF_MORE: below-CTA badge + text
   ========================= */
.svac-mod-hero-split__rf-more{
  display:flex;
  align-items:flex-start;
  gap: 26px;
  margin-top: 34px;
  max-width: var(--hero-text-max, 680px);
}

.svac-mod-hero-split__rf-more-badge{
  display:block;
  width: var(--rf-more-badge-width, 140px);
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
}

.svac-mod-hero-split__rf-more-text{
  min-width: 0;
  font-weight: 500;
  color: var(--svac-dark-blue, #00205C);
  font-size: 28px;
  line-height: 36px;
}

/* =========================
   On-load animations (stagger)
   - Uses `translate` (not transform) so it won't fight CTA overlap transform on mobile
   ========================= */
@media (prefers-reduced-motion: reduce){
  .svac-mod-hero-split *,
  .svac-mod-hero-split *::before,
  .svac-mod-hero-split *::after{
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
  }
}

@media (prefers-reduced-motion: no-preference){

  @keyframes svacHeroFadeUp{
    from{ opacity: 0; translate: 0 14px; }
    to{ opacity: 1; translate: 0 0; }
  }

  @keyframes svacHeroArtIn{
    from{ opacity: 0; translate: 0 10px; }
    to{ opacity: 1; translate: 0 0; }
  }

  /* Text stagger */
  .svac-mod-hero-split__eyebrow,
  .svac-mod-hero-split__heading,
  .svac-mod-hero-split__subhead,
  .svac-mod-hero-split__cta-row{
    opacity: 0;
    translate: 0 14px;
    animation: svacHeroFadeUp 720ms cubic-bezier(.2,.8,.2,1) both;
    will-change: opacity, translate;
  }

  .svac-mod-hero-split__eyebrow{ animation-delay: 80ms; }
  .svac-mod-hero-split__heading{ animation-delay: 180ms; }
  .svac-mod-hero-split__subhead{ animation-delay: 300ms; }
  .svac-mod-hero-split__cta-row{ animation-delay: 420ms; }

  /* Art fade-in (right-float desktop wrapper) */
  .svac-mod-hero-split__rf{
    opacity: 0;
    translate: 0 10px;
    animation: svacHeroArtIn 850ms cubic-bezier(.2,.8,.2,1) 260ms both;
    will-change: opacity, translate;
  }

  /* Art fade-in (right-float mobile in-flow viewport) */
  .svac-mod-hero-split__rf-mobile{
    opacity: 0;
    translate: 0 10px;
    animation: svacHeroArtIn 850ms cubic-bezier(.2,.8,.2,1) 260ms both;
    will-change: opacity, translate;
  }

  /* Art fade-in (bottom-right mobile in-flow viewport) */
  .svac-mod-hero-split__br-mobile{
    opacity: 0;
    translate: 0 10px;
    animation: svacHeroArtIn 850ms cubic-bezier(.2,.8,.2,1) 260ms both;
    will-change: opacity, translate;
  }

  /* RF_MORE fade-in (only shows in rf_more) */
  .svac-mod-hero-split__rf-more{
    opacity: 0;
    translate: 0 14px;
    animation: svacHeroFadeUp 720ms cubic-bezier(.2,.8,.2,1) 520ms both;
    will-change: opacity, translate;
  }
}

/* =========================
   Mobile behavior (container queries)
   - Right Float: eyebrow/heading/subhead, ART (centered), then CTA
   - RF_MORE: same as right_float, plus below-CTA block
   - Bottom Right: eyebrow/heading/subhead, ART (centered), then CTA
   ========================= */

@container hero (max-width: 768px){

  .svac-mod-hero-split{
    min-height: var(--hero-min-h-mobile, 560px);

    /* shared mobile crop + overlap vars */
    --hero-art-mobile-bleed-up: 220px;
    --_ctaOverlap: clamp(0px, var(--hero-cta-overlap, 28px), 220px);
  }

  .svac-mod-hero-split::after{
    height: var(--hero-bottom-guard-mobile, 100px);
  }

  /* stack content, center text */
  .svac-mod-hero-split__grid{
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .svac-mod-hero-split__content{
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px;
    padding-right: 18px;
    max-width: min(92%, var(--hero-text-max, 680px));
    text-align: center;
  }

  .svac-mod-hero-split__eyebrow{
    margin-left: auto;
    margin-right: auto;
    justify-content:center;
  }

  .svac-mod-hero-split__heading{
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 18px;
  }

  .svac-mod-hero-split__subhead{
    font-size: 18px;
    line-height: 26px;
    margin: 0 auto 0;
    max-width: 92%;
  }

  /* CTA becomes stacked and full-width */
  .svac-mod-hero-split__cta-row{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .svac-mod-hero-split__cta-row .svac-btn{
    width: 100%;
    min-height: 56px;
    padding: 16px 22px;
    box-sizing: border-box;
    justify-content:center;
  }

  /* ---------------------------------
     RIGHT FLOAT + RF_MORE (mobile in-flow viewport)
     --------------------------------- */
  .svac-mod-hero-split[data-art-mode="right_float"] .svac-mod-hero-split__rf,
  .svac-mod-hero-split[data-art-mode="rf_more"] .svac-mod-hero-split__rf{
    display:none; /* hide absolute desktop art on mobile */
  }

  .svac-mod-hero-split[data-art-mode="right_float"] .svac-mod-hero-split__rf-mobile,
  .svac-mod-hero-split[data-art-mode="rf_more"] .svac-mod-hero-split__rf-mobile{
    display:block;
    width: 100%;
    height: var(--hero-art-mobile-height, 280px);
    position: relative;
    margin: 18px auto 0;

    clip-path: inset(calc(-1 * var(--hero-art-mobile-bleed-up)) 0 0 0);
    pointer-events:none;
  }

  .svac-mod-hero-split[data-art-mode="right_float"] .svac-mod-hero-split__rf-mobile-img,
  .svac-mod-hero-split[data-art-mode="rf_more"] .svac-mod-hero-split__rf-mobile-img{
    position: absolute;
    left: 50%;
    top: var(--hero-art-mobile-anchor, 55%);
    transform: translate(-50%, -50%);
    width: var(--hero-art-mobile-width, 420px);
    max-width: none;
    height: auto;
    animation: none !important; /* protect from desktop float */
  }

  /* CTA overlap up into art area (right_float + rf_more) */
  .svac-mod-hero-split[data-art-mode="right_float"] .svac-mod-hero-split__cta-row,
  .svac-mod-hero-split[data-art-mode="rf_more"] .svac-mod-hero-split__cta-row{
    transform: translateY(calc(-1 * var(--_ctaOverlap)));
    margin-top: 0;
    position: relative;
    z-index: 3;
  }

  @supports not (clip-path: inset(0)){
    .svac-mod-hero-split[data-art-mode="right_float"] .svac-mod-hero-split__rf-mobile,
    .svac-mod-hero-split[data-art-mode="rf_more"] .svac-mod-hero-split__rf-mobile{
      overflow:hidden;
    }
  }

  /* RF_MORE below-CTA block centered/stacked on mobile */
  .svac-mod-hero-split__rf-more{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-top: 22px;
  }

  /* ---------------------------------
     BOTTOM RIGHT + OVERLAY (mobile in-flow viewport)
     --------------------------------- */

  /* Hide absolute bottom-right art + circle on mobile so it can't compete with text */
  .svac-mod-hero-split[data-art-mode="bottom_right"] .svac-mod-hero-split__br,
  .svac-mod-hero-split[data-art-mode="bottom_right_overlay"] .svac-mod-hero-split__br,
  .svac-mod-hero-split[data-art-mode="bottom_right"] .svac-mod-hero-split__br-circle,
  .svac-mod-hero-split[data-art-mode="bottom_right_overlay"] .svac-mod-hero-split__br-circle{
    display:none;
  }

  /* Show centered viewport between subhead and CTA */
  .svac-mod-hero-split[data-art-mode="bottom_right"] .svac-mod-hero-split__br-mobile,
  .svac-mod-hero-split[data-art-mode="bottom_right_overlay"] .svac-mod-hero-split__br-mobile{
    display:block;
    width: 100%;
    height: var(--br-mobile-height, 280px);
    position: relative;
    margin: 18px auto 0;

    clip-path: inset(calc(-1 * var(--hero-art-mobile-bleed-up)) 0 0 0);
    pointer-events:none;
  }

  .svac-mod-hero-split[data-art-mode="bottom_right"] .svac-mod-hero-split__br-mobile-base,
  .svac-mod-hero-split[data-art-mode="bottom_right_overlay"] .svac-mod-hero-split__br-mobile-base{
    position:absolute;
    left:50%;
    top: var(--br-mobile-anchor, 55%);
    transform: translate(-50%, -50%);
    width: var(--br-mobile-width, 420px);
    max-width:none;
    height:auto;
    animation:none !important;
  }

  /* Overlay sits above base when in bottom_right_overlay mode */
  .svac-mod-hero-split[data-art-mode="bottom_right_overlay"] .svac-mod-hero-split__br-mobile-overlay{
    position:absolute;
    left:50%;
    top: var(--br-mobile-anchor, 55%);
    transform: translate(-50%, -50%);
    width: min(var(--br-overlay-w, 260px), 260px);
    max-width:none;
    height:auto;
    z-index:2;
    animation:none !important;
  }

  /* CTA overlap up into art area (bottom-right modes) */
  .svac-mod-hero-split[data-art-mode="bottom_right"] .svac-mod-hero-split__cta-row,
  .svac-mod-hero-split[data-art-mode="bottom_right_overlay"] .svac-mod-hero-split__cta-row{
    transform: translateY(calc(-1 * var(--_ctaOverlap)));
    margin-top: 0;
    position: relative;
    z-index: 3;
  }

  @supports not (clip-path: inset(0)){
    .svac-mod-hero-split[data-art-mode="bottom_right"] .svac-mod-hero-split__br-mobile,
    .svac-mod-hero-split[data-art-mode="bottom_right_overlay"] .svac-mod-hero-split__br-mobile{
      overflow:hidden;
    }
  }

  /* Keep spacer for rhythm but visually not intrusive */
  .svac-mod-hero-split__spacer{ display:block; }

  /* Reduced motion safety */
  @media (prefers-reduced-motion: reduce){
    .svac-mod-hero-split__rf-img,
    .svac-mod-hero-split__rf-mobile-img,
    .svac-mod-hero-split__br-mobile-base,
    .svac-mod-hero-split__br-mobile-overlay{
      animation:none !important;
    }
  }
}

/* defensive @media fallback for environments without container query support */
@media (max-width: 768px){
  .svac-mod-hero-split__rf-img{ animation:none !important; }
  .svac-mod-hero-split::after{ height: var(--hero-bottom-guard-mobile, 100px); }
}