/* ECI revision v8: targeted copy emphasis, lighter credentials and phone-first card composition. */

.eci-mobile-swipe{display:none}
.eci-swipe-swim-lane{display:contents}
.eci-swipe-swimmer{display:none}

.eci-story-highlight{
  padding:0 .1em;
  color:var(--eci-ink);
  font-weight:720;
  background:linear-gradient(180deg,transparent 64%,rgba(255,227,110,.48) 64%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* Keep the credential palette recognizable while making the fills quieter. */
.eci-credential-card{
  border-color:color-mix(in srgb,var(--card) 28%,#9eb1ab)!important;
  background:linear-gradient(140deg,#fff 18%,color-mix(in srgb,var(--card) 20%,#fff))!important;
}
.eci-credential-card:after{
  opacity:.23!important;
  animation:eciCredentialFloat 8.8s ease-in-out infinite;
  will-change:transform;
}
.eci-credential-card:nth-child(2n):after{animation-delay:-2.7s;animation-duration:10.2s}
.eci-credential-card:nth-child(3n):after{animation-delay:-5.1s;animation-duration:9.6s}
.eci-credential-card--leadership:after{animation-delay:-3.8s;animation-duration:11.4s}

@keyframes eciCredentialFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  35%{transform:translate3d(-7px,8px,0) scale(1.03)}
  68%{transform:translate3d(5px,-5px,0) scale(.98)}
}

@keyframes eciSwipeHint{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}

@keyframes eciSwipeSwimmerPass{
  0%,17%{left:-104px;opacity:0}
  20%{opacity:.46}
  64%{left:calc(100% + 104px);opacity:.46}
  67%,100%{left:calc(100% + 104px);opacity:0}
}

.eci-promise-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.eci-promise-section>.container{position:relative;z-index:1}
.eci-promise-swimmer{
  position:absolute;
  z-index:0;
  left:0;
  width:clamp(150px,18vw,220px);
  height:auto;
  opacity:0;
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
}
.eci-promise-swimmer--one{
  top:9%;
  animation:eciPromiseSwimOne 12s linear infinite;
}
.eci-promise-swimmer--two{
  top:61%;
  animation:eciPromiseSwimTwo 12s linear -6s infinite;
}

@keyframes eciPromiseSwimOne{
  0%,16%{opacity:0;transform:translate3d(-125%,10px,0) rotate(8deg)}
  19%{opacity:.11}
  43%{opacity:.11;transform:translate3d(calc(100vw + 125%),52px,0) rotate(8deg)}
  46%,100%{opacity:0;transform:translate3d(calc(100vw + 125%),52px,0) rotate(8deg)}
}

@keyframes eciPromiseSwimTwo{
  0%,18%{opacity:0;transform:translate3d(-125%,52px,0) rotate(-11deg)}
  21%{opacity:.085}
  45%{opacity:.085;transform:translate3d(calc(100vw + 125%),-14px,0) rotate(-11deg)}
  48%,100%{opacity:0;transform:translate3d(calc(100vw + 125%),-14px,0) rotate(-11deg)}
}

@media(max-width:720px){
  h1,h2{text-wrap:balance}

  .eci-swipe-swim-lane{
    position:relative;
    isolation:isolate;
    display:flex;
    align-items:center;
    min-width:0;
    margin:20px 0 10px;
  }
  .eci-swipe-swim-lane .eci-mobile-swipe{
    position:relative;
    z-index:2;
    margin:0;
    overflow:hidden;
    isolation:isolate;
  }
  .eci-mobile-swipe-label,
  .eci-mobile-swipe-arrow{position:relative;z-index:2}
  .eci-swipe-swimmer{
    position:absolute;
    z-index:1;
    top:50%;
    left:-104px;
    display:block;
    width:92px;
    aspect-ratio:800/377;
    opacity:0;
    pointer-events:none;
    user-select:none;
    transform:translateY(-50%);
    animation:eciSwipeSwimmerPass 10.4s linear infinite;
    will-change:left,opacity;
  }
  .eci-swipe-swim-lane--dark .eci-swipe-swimmer{
    filter:brightness(1.7) saturate(.82);
  }
  .eci-swipe-swimmer svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
  }

  .eci-mobile-swipe{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin:20px 0 10px;
    max-width:100%;
    padding:8px 12px 9px;
    border:1px solid rgba(191,154,26,.22);
    border-radius:10px;
    color:var(--color-teal-dark);
    background:linear-gradient(180deg,rgba(255,250,222,.9),rgba(255,231,124,.48));
    box-shadow:0 5px 14px rgba(103,82,15,.08);
    font-size:.73rem;
    font-weight:800;
    letter-spacing:.08em;
    line-height:1.35;
    text-transform:uppercase;
  }
  .eci-mobile-swipe-arrow{font-size:1.05rem;animation:eciSwipeHint 2.3s ease-in-out infinite}
  .eci-mobile-swipe--dark{
    color:#fff7d3;
    border-color:rgba(255,237,157,.28);
    background:rgba(255,231,124,.13);
    box-shadow:none;
  }

  /* Four short IVF-lab stages stay visible together instead of becoming a long stack. */
  .eci-lab-path{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .eci-lab-step{
    min-height:164px;
    padding:15px 13px!important;
  }
  .eci-lab-step strong{font-size:.92rem}
  .eci-lab-step small{font-size:.88rem!important;line-height:1.48}

  /* Purposeful swipe rails replace tall single-card stacks on phones. */
  .eci-care-map,
  .eci-context-grid,
  .eci-update-grid,
  .eci-beyond-grid{
    display:flex!important;
    overflow-x:auto;
    overflow-y:hidden;
    gap:12px!important;
    margin-top:10px!important;
    padding:3px 18px 15px 1px;
    scroll-padding-inline:1px 18px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(61,104,120,.38) transparent;
  }
  .eci-care-map>div{flex:0 0 84%}
  .eci-context-card{flex:0 0 84%}
  .eci-update-card{flex:0 0 88%}
  .eci-learning-card{flex:0 0 92%}

  .eci-care-map>div,.eci-context-card,.eci-update-card,.eci-learning-card{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .eci-care-map>div{min-height:142px}
  .eci-context-card,.eci-context-card:nth-child(2){min-height:230px!important;transform:none!important}
  .eci-update-card{height:100%;min-height:480px}
  .eci-learning-card{height:100%}

  /* Audience and promise cards become clear, swipeable reading panels. */
  .eci-who-grid,
  .eci-promise-list{
    display:flex!important;
    align-items:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    gap:11px!important;
    margin-top:10px!important;
    padding:3px 18px 15px 1px;
    scroll-padding-inline:1px 18px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(61,104,120,.38) transparent;
  }
  .eci-who-card,
  .eci-promise-item{
    flex:0 0 88%;
    scroll-snap-stop:always;
    scroll-snap-align:start;
  }
  .eci-who-card{min-height:210px}
  .eci-who-card:last-child{
    grid-column:auto!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
  }
  .eci-who-card:last-child>div{max-width:none}
  .eci-promise-item{min-height:210px!important}
  .eci-promise-item:last-child{grid-column:auto!important}

  /* Two-column credential mosaic on normal phones, with the image and leadership line full width. */
  .eci-credential-strip,
  .eci-credential-strip--stack{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .eci-credential-strip--stack>img,
  .eci-credential-card--leadership{grid-column:1/-1!important}
  .eci-credential-card{
    min-height:116px;
    align-items:flex-start!important;
    flex-direction:column;
    gap:11px!important;
    padding:16px 15px!important;
  }
  .eci-credential-card--leadership{
    min-height:92px;
    align-items:center!important;
    justify-content:center!important;
  }
}

@media(max-width:374px){
  .eci-lab-step{min-height:172px;padding:14px 11px!important}
  .eci-lab-step strong{font-size:.86rem}
  .eci-lab-step small{font-size:.82rem!important}
  .eci-care-map>div,.eci-context-card{flex-basis:89%}
  .eci-update-card,.eci-who-card,.eci-promise-item{flex-basis:93%}
  .eci-learning-card{flex-basis:96%}
  .eci-credential-strip,
  .eci-credential-strip--stack{grid-template-columns:minmax(0,1fr)!important}
  .eci-credential-strip--stack>img,
  .eci-credential-card--leadership{grid-column:auto!important}
  .eci-credential-card{min-height:92px;flex-direction:row;align-items:center!important}
}

@media(prefers-reduced-motion:reduce){
  .eci-credential-card:after,.eci-mobile-swipe-arrow{animation:none!important}
  .eci-promise-swimmer{display:none!important}
  .eci-swipe-swimmer{display:none!important}
}