/* V11 PATH-SAFE MOTION — loaded with document-relative path for local + live use. */

/* ============================================================
   IS&S V9 MOTION SYSTEM
   Purpose: add polished motion without changing page structure.
   Performance: animation is primarily transform + opacity.
   Accessibility: motion is disabled/reduced when the OS requests it.
   ============================================================ */

:root{
  --motion-fast: 180ms;
  --motion-base: 420ms;
  --motion-slow: 760ms;
  --motion-ease: cubic-bezier(.2,.7,.2,1);
  --motion-ease-out: cubic-bezier(.16,1,.3,1);
}

/* -------------------------
   Page entrance choreography
   ------------------------- */
.motion-ready .site-header{
  animation: issHeaderIn 620ms var(--motion-ease-out) both;
}
.motion-ready .state-strip{
  animation: issStripIn 540ms var(--motion-ease-out) both;
}
.motion-ready .utility-bar{
  animation: issFadeIn 500ms ease both;
}

.motion-ready .hero .eyebrow,
.motion-ready .support-hero .eyebrow{
  animation: issHeroIn 560ms var(--motion-ease-out) 80ms both;
}
.motion-ready .hero h1,
.motion-ready .support-hero h1{
  animation: issHeroIn 700ms var(--motion-ease-out) 150ms both;
}
.motion-ready .hero-copy,
.motion-ready .support-hero > div > p,
.motion-ready .hero-clarifier{
  animation: issHeroIn 680ms var(--motion-ease-out) 240ms both;
}
.motion-ready .hero-actions,
.motion-ready .gold-button{
  animation: issHeroIn 620ms var(--motion-ease-out) 320ms both;
}
.motion-ready .audience{
  animation: issFadeUp 620ms var(--motion-ease-out) 390ms both;
}
.motion-ready .process-card,
.motion-ready .dark-card{
  animation: issPanelIn 820ms var(--motion-ease-out) 190ms both;
}

/* -------------------------
   Scroll reveal system
   ------------------------- */
.motion-ready .motion-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity var(--motion-slow) var(--motion-ease-out),
    transform var(--motion-slow) var(--motion-ease-out);
}
.motion-ready .motion-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.motion-ready .motion-stagger > *{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity 650ms var(--motion-ease-out),
    transform 650ms var(--motion-ease-out);
}
.motion-ready .motion-stagger.is-visible > *{
  opacity:1;
  transform:translateY(0);
}
.motion-ready .motion-stagger.is-visible > *:nth-child(1){transition-delay:30ms}
.motion-ready .motion-stagger.is-visible > *:nth-child(2){transition-delay:90ms}
.motion-ready .motion-stagger.is-visible > *:nth-child(3){transition-delay:150ms}
.motion-ready .motion-stagger.is-visible > *:nth-child(4){transition-delay:210ms}
.motion-ready .motion-stagger.is-visible > *:nth-child(5){transition-delay:270ms}
.motion-ready .motion-stagger.is-visible > *:nth-child(6){transition-delay:330ms}
.motion-ready .motion-stagger.is-visible > *:nth-child(7){transition-delay:390ms}
.motion-ready .motion-stagger.is-visible > *:nth-child(8){transition-delay:450ms}

/* -------------------------
   Navigation / button motion
   ------------------------- */
.primary-nav a{
  position:relative;
  transition:
    color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible{
  transform:translateY(-2px);
}

.quote-top,
.apply-top,
.gold-cta,
.gold-button,
.btn,
.card-cta,
.primary-cta,
.submit-button,
.cta-dark,
.buy-button{
  position:relative;
  overflow:hidden;
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) ease,
    filter var(--motion-fast) ease;
}
.quote-top::after,
.apply-top::after,
.gold-cta::after,
.gold-button::after,
.btn-gold::after,
.card-cta::after,
.primary-cta::after,
.submit-button::after,
.cta-dark::after,
.buy-button::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -45%;
  width:35%;
  transform:skewX(-20deg) translateX(-220%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transition:transform 680ms var(--motion-ease-out);
  pointer-events:none;
}
.quote-top:hover::after,
.apply-top:hover::after,
.gold-cta:hover::after,
.gold-button:hover::after,
.btn-gold:hover::after,
.card-cta:hover::after,
.primary-cta:hover::after,
.submit-button:hover::after,
.cta-dark:hover::after,
.buy-button:hover::after{
  transform:skewX(-20deg) translateX(500%);
}
.quote-top:hover,
.apply-top:hover,
.gold-cta:hover,
.gold-button:hover,
.btn:hover,
.card-cta:hover,
.primary-cta:hover,
.submit-button:hover,
.cta-dark:hover,
.buy-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(6,31,55,.16);
}

/* -------------------------
   Brand / hero ambience
   ------------------------- */
.logo-box{
  position:relative;
  overflow:hidden;
  transition:transform 240ms var(--motion-ease), box-shadow 240ms ease;
}
.logo-box::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-55%;
  width:34%;
  height:140%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(247,183,25,.8),transparent);
  animation:issLogoSweep 6.5s ease-in-out infinite;
}
.brand:hover .logo-box{
  transform:translateY(-2px) rotate(-1deg);
  box-shadow:0 8px 18px rgba(6,31,55,.17);
}

.hero{
  --wm-parallax-x: 0px;
  --wm-parallax-y: 0px;
}

/* The large IS&S watermark now visibly travels around the hero section.
   It remains behind all readable content. */
.watermark{
  transform-origin:50% 50%;
  animation:issWatermarkWander 15s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change:opacity,transform;
  pointer-events:none;
}

/* Moving ambient shapes behind the content make the hero visibly alive
   without covering text or controls. */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  z-index:0;
  will-change:transform,opacity;
}
.hero::before{
  width:clamp(90px,10vw,170px);
  aspect-ratio:1;
  left:8%;
  top:13%;
  background:radial-gradient(circle at 35% 35%,
    rgba(247,183,25,.30),
    rgba(247,183,25,.08) 48%,
    transparent 72%);
  animation:issGoldOrb 11s ease-in-out infinite alternate;
}
.hero::after{
  width:clamp(160px,16vw,280px);
  aspect-ratio:1;
  right:7%;
  bottom:-10%;
  background:radial-gradient(circle,
    rgba(15,85,138,.20),
    rgba(15,85,138,.07) 48%,
    transparent 73%);
  animation:issBlueOrb 14s ease-in-out infinite alternate;
}
.process-card,
.dark-card{
  transition:transform 260ms var(--motion-ease), box-shadow 260ms ease;
}
.process-card:hover,
.dark-card:hover{
  transform:translateY(-4px);
  box-shadow:18px 16px 0 var(--gold);
}

.process-step{
  transition:background-color 180ms ease, transform 180ms var(--motion-ease);
}
.process-step:hover{
  transform:translateX(5px);
  background:rgba(255,255,255,.025);
}

/* -------------------------
   Cards / information blocks
   ------------------------- */
.info-card,
.explain-grid article,
.terms-grid article,
.use-case,
.relationship-card,
.category-grid article,
.score-grid > div,
.check-grid > div,
.service-grid > div,
.flow-grid > div,
.payment-rules > div{
  transition:
    transform 220ms var(--motion-ease),
    box-shadow 220ms ease,
    border-color 220ms ease;
}
.info-card:hover,
.explain-grid article:hover,
.terms-grid article:hover,
.use-case:hover,
.relationship-card:hover,
.category-grid article:hover,
.score-grid > div:hover,
.check-grid > div:hover,
.service-grid > div:hover,
.flow-grid > div:hover,
.payment-rules > div:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(6,31,55,.09);
}

/* -------------------------
   Statistics animation support
   ------------------------- */
.stat{
  position:relative;
  overflow:hidden;
}
.stat::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 650ms var(--motion-ease-out);
}
.stat.is-visible::before{
  transform:scaleX(1);
}
.stat-num{
  transition:transform 220ms var(--motion-ease), text-shadow 220ms ease;
}
.stat:hover .stat-num{
  transform:translateY(-2px) scale(1.04);
  text-shadow:0 5px 18px rgba(0,0,0,.18);
}

/* -------------------------
   Form focus / interaction
   ------------------------- */
input,
select,
textarea{
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms var(--motion-ease);
}
input:focus,
select:focus,
textarea:focus{
  transform:translateY(-1px);
}
.checks label,
.checkbox-grid label,
.agreements label{
  transition:transform 180ms var(--motion-ease), border-color 180ms ease, background-color 180ms ease;
}
.checks label:hover,
.checkbox-grid label:hover,
.agreements label:hover{
  transform:translateX(3px);
  border-color:rgba(15,85,138,.38);
}

/* -------------------------
   Marquee depth
   ------------------------- */
.marquee-shell,
.benefit-marquee-shell{
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.award-item,
.benefit-marquee-group > div{
  transition:opacity 180ms ease, transform 180ms var(--motion-ease);
}
.award-item:hover,
.benefit-marquee-group > div:hover{
  opacity:1;
  transform:translateY(-2px);
}

/* -------------------------
   Gold line micro animation
   ------------------------- */
.eyebrow span{
  transform-origin:left center;
  animation:issGoldRule 2.8s ease-in-out infinite;
}

/* -------------------------
   Keyframes
   ------------------------- */
@keyframes issHeaderIn{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes issStripIn{
  from{opacity:.2;transform:scaleX(.94)}
  to{opacity:1;transform:scaleX(1)}
}
@keyframes issFadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes issHeroIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes issFadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes issPanelIn{
  from{opacity:0;transform:translateX(28px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes issLogoSweep{
  0%,74%{transform:skewX(-20deg) translateX(-220%)}
  88%,100%{transform:skewX(-20deg) translateX(520%)}
}
@keyframes issWatermarkWander{
  0%{
    opacity:.52;
    transform:
      translate3d(calc(var(--wm-parallax-x) + 0px),calc(var(--wm-parallax-y) + 0px),0)
      rotate(-4deg)
      scale(.96);
  }
  18%{
    opacity:.74;
    transform:
      translate3d(calc(var(--wm-parallax-x) + 95px),calc(var(--wm-parallax-y) - 58px),0)
      rotate(-1deg)
      scale(1.04);
  }
  42%{
    opacity:.61;
    transform:
      translate3d(calc(var(--wm-parallax-x) + 175px),calc(var(--wm-parallax-y) - 18px),0)
      rotate(3deg)
      scale(1.08);
  }
  64%{
    opacity:.77;
    transform:
      translate3d(calc(var(--wm-parallax-x) + 85px),calc(var(--wm-parallax-y) + 34px),0)
      rotate(1deg)
      scale(1.01);
  }
  82%{
    opacity:.58;
    transform:
      translate3d(calc(var(--wm-parallax-x) - 35px),calc(var(--wm-parallax-y) + 10px),0)
      rotate(-3deg)
      scale(.98);
  }
  100%{
    opacity:.52;
    transform:
      translate3d(calc(var(--wm-parallax-x) + 0px),calc(var(--wm-parallax-y) + 0px),0)
      rotate(-4deg)
      scale(.96);
  }
}
@keyframes issGoldOrb{
  0%{opacity:.35;transform:translate3d(-15px,20px,0) scale(.85)}
  35%{opacity:.62;transform:translate3d(80px,-20px,0) scale(1.05)}
  70%{opacity:.42;transform:translate3d(145px,42px,0) scale(.92)}
  100%{opacity:.68;transform:translate3d(210px,-8px,0) scale(1.12)}
}
@keyframes issBlueOrb{
  0%{opacity:.25;transform:translate3d(20px,35px,0) scale(.90)}
  40%{opacity:.48;transform:translate3d(-90px,-30px,0) scale(1.08)}
  75%{opacity:.30;transform:translate3d(-160px,18px,0) scale(.96)}
  100%{opacity:.52;transform:translate3d(-220px,-42px,0) scale(1.12)}
}
@keyframes issGoldRule{
  0%,100%{transform:scaleX(1)}
  50%{transform:scaleX(.62)}
}



/* ============================================================
   V10 — VISIBLE CONTINUOUS MOTION
   These are intentionally more obvious than the V9 micro-motion.
   ============================================================ */

/* Animated gold Illinois strip */
.state-strip{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(100deg,
      #f7b719 0%,
      #ffd867 24%,
      #f7b719 48%,
      #e9a900 70%,
      #f7b719 100%);
  background-size:220% 100%;
  animation:issStateStripFlow 8s linear infinite;
}
.state-strip::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,
    transparent 0 42%,
    rgba(255,255,255,.38) 48%,
    transparent 54% 100%);
  transform:translateX(-120%);
  animation:issStripGlint 5.5s ease-in-out infinite;
  pointer-events:none;
}

/* Animated gold accent on the dark process panel */
.process-card{
  overflow:hidden;
}
.process-card::before{
  content:"";
  position:absolute;
  left:-35%;
  top:0;
  width:28%;
  height:3px;
  background:linear-gradient(90deg,
    transparent,
    var(--gold),
    #fff1a8,
    var(--gold),
    transparent);
  filter:drop-shadow(0 0 6px rgba(247,183,25,.6));
  animation:issPanelGoldSweep 4.8s ease-in-out infinite;
  z-index:5;
  pointer-events:none;
}
.process-card::after{
  content:"";
  position:absolute;
  right:-30px;
  bottom:-30px;
  width:110px;
  height:110px;
  border:1px solid rgba(247,183,25,.28);
  border-radius:50%;
  box-shadow:
    0 0 0 18px rgba(247,183,25,.035),
    0 0 0 36px rgba(247,183,25,.020);
  animation:issPanelOrbit 8s ease-in-out infinite;
  pointer-events:none;
}

/* Visible CTA breathing signal */
.btn-gold,
.quote-top,
.apply-top,
.gold-cta,
.gold-button,
.buy-button{
  animation:issCtaBreathe 4.6s ease-in-out infinite;
}

/* Moving light across the statistics strip */
.stats{
  position:relative;
  overflow:hidden;
}
.stats::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-24%;
  width:18%;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent);
  transform:skewX(-18deg);
  animation:issStatsSweep 6.8s ease-in-out infinite;
  pointer-events:none;
}

/* Slightly animated dark information bars */
.benefit-band,
.award-band{
  position:relative;
}
.benefit-band::before,
.award-band::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,
    transparent 0 30%,
    rgba(15,85,138,.10) 42%,
    transparent 54% 100%);
  background-size:240% 100%;
  animation:issDarkBandFlow 12s linear infinite;
}

/* Make major dark cards float slightly even when not hovered */
.relationship-card.dark,
.use-case.dark,
.buy-card{
  animation:issDarkCardFloat 6.8s ease-in-out infinite;
}

/* Animate small numbered badges */
.badge,
.explain-number,
.score-badge,
.status-badge{
  animation:issBadgePulse 4.2s ease-in-out infinite;
}

/* Make page headings' gold lines feel active */
.eyebrow span{
  box-shadow:0 0 0 rgba(247,183,25,0);
  animation:issGoldRuleActive 3.1s ease-in-out infinite;
}

@keyframes issStateStripFlow{
  from{background-position:0% 50%}
  to{background-position:220% 50%}
}
@keyframes issStripGlint{
  0%,58%{transform:translateX(-130%);opacity:0}
  70%{opacity:1}
  88%,100%{transform:translateX(145%);opacity:0}
}
@keyframes issPanelGoldSweep{
  0%,12%{transform:translateX(0);opacity:0}
  24%{opacity:1}
  72%{opacity:1}
  88%,100%{transform:translateX(560%);opacity:0}
}
@keyframes issPanelOrbit{
  0%,100%{transform:translate3d(0,0,0) scale(.90);opacity:.32}
  50%{transform:translate3d(-25px,-22px,0) scale(1.12);opacity:.68}
}
@keyframes issCtaBreathe{
  0%,100%{box-shadow:0 0 0 0 rgba(247,183,25,.00)}
  50%{box-shadow:0 0 0 5px rgba(247,183,25,.12),0 10px 25px rgba(6,31,55,.12)}
}
@keyframes issStatsSweep{
  0%,15%{transform:translateX(0) skewX(-18deg);opacity:0}
  28%{opacity:1}
  74%{opacity:1}
  90%,100%{transform:translateX(760%) skewX(-18deg);opacity:0}
}
@keyframes issDarkBandFlow{
  from{background-position:220% 50%}
  to{background-position:-20% 50%}
}
@keyframes issDarkCardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes issBadgePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@keyframes issGoldRuleActive{
  0%,100%{transform:scaleX(.65);box-shadow:0 0 0 rgba(247,183,25,0)}
  50%{transform:scaleX(1.15);box-shadow:0 0 12px rgba(247,183,25,.55)}
}

/* -------------------------
   Reduced motion
   ------------------------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }

  .motion-ready .motion-reveal,
  .motion-ready .motion-stagger > *{
    opacity:1 !important;
    transform:none !important;
  }

  .watermark,
  .hero::before,
  .hero::after,
  .state-strip,
  .state-strip::after,
  .process-card::before,
  .process-card::after,
  .stats::after,
  .benefit-band::before,
  .award-band::before,
  .btn-gold,
  .quote-top,
  .apply-top,
  .gold-cta,
  .gold-button,
  .buy-button,
  .relationship-card.dark,
  .use-case.dark,
  .buy-card,
  .badge,
  .explain-number,
  .score-badge,
  .status-badge,
  .eyebrow span,
  .logo-box::after{
    animation:none !important;
  }

  .marquee-track,
  .benefit-marquee-track{
    animation:none !important;
    transform:none !important;
  }

  .marquee-group[aria-hidden="true"],
  .benefit-marquee-group[aria-hidden="true"]{
    display:none !important;
  }

  .marquee-shell,
  .benefit-marquee-shell{
    overflow-x:auto !important;
    mask-image:none !important;
    -webkit-mask-image:none !important;
  }
}

/* Avoid excessive hover animation on touch-first devices. */
@media (hover:none){
  .process-card:hover,
  .dark-card:hover,
  .info-card:hover,
  .explain-grid article:hover,
  .terms-grid article:hover,
  .use-case:hover,
  .relationship-card:hover,
  .category-grid article:hover,
  .score-grid > div:hover,
  .check-grid > div:hover,
  .service-grid > div:hover,
  .flow-grid > div:hover,
  .payment-rules > div:hover{
    transform:none;
    box-shadow:none;
  }
}


/* ============================================================
   V13 — GLOBAL IS&S WATERMARK ON EVERY PAGE
   One viewport-level watermark follows the visitor across every
   public page. It stays above section/card backgrounds, but all
   interactive controls remain above it.
   ============================================================ */

/* Hide any legacy hero-contained watermark so only one large IS&S mark appears. */
.hero > .watermark{
  visibility:hidden !important;
}

.page-watermark-orbit{
  position:fixed;
  left:2.5vw;
  top:9vh;
  z-index:40;
  pointer-events:none;
  user-select:none;
  isolation:isolate;

  width:max-content;
  height:max-content;

  font-family:Arial,Helvetica,sans-serif;
  font-weight:900;
  font-size:clamp(118px,14.5vw,275px);
  line-height:.78;
  letter-spacing:-.075em;

  /* Navy fill is readable on light sections.
     Gold outline keeps the watermark visible on navy sections. */
  color:rgba(6,31,55,.10);
  -webkit-text-stroke:clamp(1px,.12vw,2.5px) rgba(247,183,25,.58);
  text-shadow:
    0 2px 0 rgba(255,255,255,.10),
    0 8px 24px rgba(6,31,55,.08);

  opacity:.92;
  filter:drop-shadow(0 4px 12px rgba(247,183,25,.12));

  animation:issGlobalWatermarkOrbitAllPages 23s cubic-bezier(.45,.02,.55,.98) infinite;
  will-change:transform,opacity;
}

/* Soft moving halo keeps it visible when crossing dark panels. */
.page-watermark-orbit::before{
  content:"";
  position:absolute;
  inset:-15%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(247,183,25,.09) 0%,
    rgba(255,255,255,.025) 44%,
    transparent 72%
  );
  filter:blur(10px);
  animation:issGlobalWatermarkHaloAllPages 5s ease-in-out infinite;
}

/* Moving glint across the IS&S lettering. */
.page-watermark-orbit::after{
  content:"";
  position:absolute;
  left:-18%;
  top:-12%;
  width:20%;
  height:130%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,211,82,.31),
    transparent
  );
  transform:skewX(-18deg);
  animation:issGlobalWatermarkGlintAllPages 5.8s ease-in-out infinite;
}

/* Full-viewport path. Because this element is fixed, it follows the visitor
   while they scroll through long program/application pages. */
@keyframes issGlobalWatermarkOrbitAllPages{
  0%{
    transform:translate3d(0,0,0) rotate(-6deg) scale(.90);
    opacity:.70;
  }
  11%{
    transform:translate3d(20vw,-1vh,0) rotate(-2deg) scale(1.00);
    opacity:.94;
  }
  24%{
    transform:translate3d(57vw,5vh,0) rotate(4deg) scale(.93);
    opacity:.82;
  }
  37%{
    transform:translate3d(64vw,42vh,0) rotate(7deg) scale(1.03);
    opacity:.96;
  }
  50%{
    transform:translate3d(36vw,66vh,0) rotate(0deg) scale(.91);
    opacity:.78;
  }
  63%{
    transform:translate3d(0vw,58vh,0) rotate(-7deg) scale(1.04);
    opacity:.95;
  }
  76%{
    transform:translate3d(11vw,29vh,0) rotate(-3deg) scale(.95);
    opacity:.82;
  }
  89%{
    transform:translate3d(48vw,18vh,0) rotate(5deg) scale(1.02);
    opacity:.94;
  }
  100%{
    transform:translate3d(0,0,0) rotate(-6deg) scale(.90);
    opacity:.70;
  }
}

@keyframes issGlobalWatermarkHaloAllPages{
  0%,100%{opacity:.42;transform:scale(.94)}
  50%{opacity:.92;transform:scale(1.08)}
}

@keyframes issGlobalWatermarkGlintAllPages{
  0%,62%{transform:translateX(-220%) skewX(-18deg);opacity:0}
  72%{opacity:1}
  92%,100%{transform:translateX(720%) skewX(-18deg);opacity:0}
}

/* The watermark is visually above cards/backgrounds.
   Controls and interactive fields stay on top and remain easy to use. */
.site-header,
.primary-nav,
.hero-left,
.process-card .process-label,
.process-card .process-step,
.application-panel form,
.quote-section form,
.payment-gate .buy-card,
.marquee-toggle,
.benefit-marquee-toggle,
button,
a,
input,
select,
textarea{
  position:relative;
  z-index:50;
}

/* Keep modal dialogs above everything. */
.modal,
[role="dialog"]{
  z-index:200 !important;
}

/* Small screen path keeps the same idea but reduces the footprint. */
@media (max-width:1000px){
  .page-watermark-orbit{
    left:2vw;
    top:13vh;
    font-size:clamp(92px,20vw,180px);
    -webkit-text-stroke:1.5px rgba(247,183,25,.52);
    animation-name:issGlobalWatermarkOrbitAllPagesMobile;
    animation-duration:20s;
  }
}

@keyframes issGlobalWatermarkOrbitAllPagesMobile{
  0%{transform:translate3d(0,0,0) rotate(-5deg) scale(.92)}
  25%{transform:translate3d(50vw,11vh,0) rotate(4deg) scale(1.02)}
  50%{transform:translate3d(33vw,55vh,0) rotate(1deg) scale(.94)}
  75%{transform:translate3d(2vw,39vh,0) rotate(-4deg) scale(1.02)}
  100%{transform:translate3d(0,0,0) rotate(-5deg) scale(.92)}
}

/* Honor the visitor's reduced-motion preference. */
@media (prefers-reduced-motion: reduce){
  .page-watermark-orbit,
  .page-watermark-orbit::before,
  .page-watermark-orbit::after{
    animation:none !important;
  }

  .page-watermark-orbit{
    position:fixed;
    left:16%;
    top:42%;
    transform:none !important;
    opacity:.32;
  }
}


/* ============================================================
   V16 — SHARED CONTINUOUS MARQUEE ENGINE
   Loaded by every public page.
   This is now the authoritative style layer for all IS&S tickers.
   ============================================================ */

.benefit-marquee-shell{
  display:block !important;
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
}

.benefit-marquee-track{
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:center !important;
  width:max-content !important;
  min-width:max-content !important;
  max-width:none !important;
  transform:translate3d(0,0,0);
  will-change:transform;
  animation:issBenefitMarqueeScroll 30s linear infinite !important;
}

.benefit-marquee-group{
  display:flex !important;
  flex:0 0 auto !important;
  flex-flow:row nowrap !important;
  align-items:center !important;
  width:max-content !important;
  min-width:max-content !important;
}

.benefit-marquee-group > div{
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  gap:10px !important;
  min-width:430px !important;
  width:auto !important;
  padding:0 28px !important;
  border-right:1px solid rgba(111,143,168,.28) !important;
  white-space:nowrap !important;
  color:#c7d5df !important;
  font-size:11px !important;
  line-height:1.25 !important;
}

.benefit-marquee-group > div > .badge{
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:34px !important;
  height:22px !important;
  padding:0 8px !important;
  margin:0 !important;
  background:var(--gold,#f7b719) !important;
  color:var(--navy,#061f37) !important;
  border-radius:2px !important;
  font-size:9px !important;
  font-weight:900 !important;
}

.benefit-marquee-group > div > b{
  flex:0 0 auto !important;
  color:#fff !important;
  font-weight:900 !important;
}

.benefit-marquee-group > div > span:last-child:not(.badge){
  color:#b8c8d4 !important;
  font-weight:400 !important;
}

.benefit-marquee-shell:hover .benefit-marquee-track,
.benefit-marquee-shell:focus-within .benefit-marquee-track,
.benefit-marquee-shell.is-paused .benefit-marquee-track{
  animation-play-state:paused !important;
}

.benefit-marquee-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(159,196,223,.48);
  background:transparent;
  color:#d7e5ee;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
  cursor:pointer;
}

.benefit-marquee-toggle:hover,
.benefit-marquee-toggle:focus-visible{
  background:var(--gold,#f7b719);
  border-color:var(--gold,#f7b719);
  color:var(--navy,#061f37);
}

@keyframes issBenefitMarqueeScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Home award marquee uses the same reliability rules but retains its
   own dimensions/content styling from home.css. */
.marquee-shell{
  overflow:hidden !important;
}
.marquee-track{
  display:flex !important;
  flex-flow:row nowrap !important;
  width:max-content !important;
  min-width:max-content !important;
  will-change:transform;
}
.marquee-group{
  display:flex !important;
  flex:0 0 auto !important;
  flex-flow:row nowrap !important;
  width:max-content !important;
  min-width:max-content !important;
}

/* Keep duplicated loop groups out of the accessibility tree; the visible
   first group remains readable, and the animation itself is non-live. */
.benefit-marquee-shell[role="marquee"],
.marquee-shell[role="marquee"]{
  speak:none;
}

/* Pause all ticker motion when the document tab is hidden. */
.page-hidden .benefit-marquee-track,
.page-hidden .marquee-track{
  animation-play-state:paused !important;
}

@media(max-width:1000px){
  .benefit-marquee-group > div{
    min-width:375px !important;
    padding-inline:22px !important;
  }
}

@media(max-width:720px){
  .benefit-marquee-shell{
    -webkit-mask-image:none;
    mask-image:none;
  }
  .benefit-marquee-group > div{
    min-width:315px !important;
    padding-inline:18px !important;
    font-size:10px !important;
  }
}

/* When reduced motion is requested, the ticker becomes a manually
   scrollable horizontal row instead of disappearing or duplicating. */
@media(prefers-reduced-motion:reduce){
  .benefit-marquee-track,
  .marquee-track{
    animation:none !important;
    transform:none !important;
  }

  .benefit-marquee-group[aria-hidden="true"],
  .marquee-group[aria-hidden="true"]{
    display:none !important;
  }

  .benefit-marquee-shell,
  .marquee-shell{
    overflow-x:auto !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .benefit-marquee-toggle,
  .marquee-toggle{
    display:none !important;
  }
}

.marquee-toggle,.benefit-marquee-toggle{display:none!important}

.formsubmit-honey{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}