/* Two scenes share one glass surface. With no JS/motion they read in normal flow. */
.opening-main{isolation:isolate}
.scroll-story{position:relative;z-index:2;max-width:1920px;margin:24px auto 0;padding:0 14px 14px}
.story-stage{position:relative;border-radius:30px;overflow:hidden;isolation:isolate;background:#16333e;color:#fff}
.story-backdrop{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate;z-index:-1;background:#16333e}
.story-ambient{position:absolute;z-index:-2;inset:-30px;background:linear-gradient(120deg,#112d3cbf,#22313d80),url('/assets/hero-support.jpg') center/cover;filter:blur(18px);transform:scale(1.08)}
.story-glass{position:relative;background:linear-gradient(130deg,#ffffff22,#d8edff08 55%,#ffffff18);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);padding:36px 48px}
.story-topline,.story-bottomline{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:1.5px;font-weight:500}
.story-mark{width:23px;height:23px;background:#fff;mask:url('/assets/wellist-mark.svg') center/contain no-repeat;-webkit-mask:url('/assets/wellist-mark.svg') center/contain no-repeat}
.story-chapter{margin-left:auto;color:#c1d1d6;letter-spacing:2px}
.problem-scene{padding:100px 0 110px;overflow:hidden}
.problem-scene h2{font:500 clamp(30px,3.9vw,68px)/1.2 Sora,Arial,sans-serif;letter-spacing:-.065em;text-align:center;margin:0}
.problem-line{display:block;will-change:transform,opacity}
.problem-line em{font-style:normal;color:#edc6df}
.solution-scene{padding:38px 0;text-align:center}
.story-eyebrow{font-size:9px;letter-spacing:1.7px;color:#d1dfe3;margin:0 0 14px}
.solution-copy h2{font:500 clamp(32px,3.4vw,57px)/1.15 Sora,Arial,sans-serif;letter-spacing:-.06em;margin:0 0 15px}
.solution-copy>p:last-child{font-size:14px;line-height:1.7;color:#d1dfe3;margin:0}
.resource-composition{position:relative;width:min(850px,100%);height:370px;margin:24px auto 20px;text-align:left}
.resource-hub{position:absolute;inset:0 20px;padding:23px 24px;background:#f4f3ee;color:#153743;border-radius:23px;box-shadow:0 24px 60px #071f2926}
.folio-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid #17343e18}
.folio-brand{display:flex;align-items:center;gap:8px;font:500 22px/1 Sora,Arial,sans-serif;letter-spacing:-1px;white-space:nowrap}
.folio-mark,.folio-watermark{background:currentColor;mask:url('/assets/wellist-mark.svg') center/contain no-repeat;-webkit-mask:url('/assets/wellist-mark.svg') center/contain no-repeat}
.folio-mark{width:25px;height:25px;flex:none}
.folio-caption{font-size:11px;line-height:1.3;color:#617379;text-align:right}
.resource-tile{position:absolute;display:flex;flex-direction:column;align-items:flex-start;padding:21px 23px;border-radius:15px;overflow:hidden;isolation:isolate;will-change:transform,opacity;box-shadow:none}
.tile-benefits{left:44px;right:calc(50% + 6px);top:92px;height:254px;background:#e7cadc;color:#472a40}
.tile-community{left:calc(50% + 6px);right:44px;top:92px;height:121px;background:#dce9e9;color:#153743}
.tile-human{left:calc(50% + 6px);right:44px;top:225px;height:121px;background:#183c48;color:#f6f5ee}
.folio-category{font-size:9px;line-height:1.3;font-weight:500;letter-spacing:.8px;text-transform:uppercase;position:relative;z-index:1}
.folio-card-title{font:500 23px/1.15 Sora,Arial,sans-serif;letter-spacing:-.055em;margin-top:12px;max-width:calc(100% - 48px);position:relative;z-index:1}
.tile-benefits .folio-card-title{font-size:34px;max-width:265px;margin-top:24px}
.folio-symbol{position:absolute;bottom:21px;right:22px;width:34px;height:34px;stroke-width:1.25;opacity:.9}
.tile-benefits .folio-symbol{left:23px;right:auto;bottom:24px;width:42px;height:42px}
.folio-watermark{position:absolute;width:190px;height:190px;right:-42px;bottom:-46px;opacity:.09;transform:rotate(-14deg);z-index:0}
.solution-link{margin:auto;color:#fff;border:0;font-size:12px}.solution-link:hover{color:#edc6df}
.story-bottomline{font-size:9px;letter-spacing:.2px;color:#c0ced5;gap:22px}
.story-progress{height:2px;width:100px;background:#ffffff20;overflow:hidden}.story-progress>span{display:block;width:100%;height:100%;background:#dfb9d4;transform:scaleX(var(--story-progress,0));transform-origin:left}
.story-footnote{margin-left:auto}
.scroll-story[data-motion="pinned"]{height:450svh}
.scroll-story[data-motion="pinned"] .story-stage{position:sticky;top:14px;height:calc(100svh - 28px)}
.scroll-story[data-motion="pinned"] .story-glass{height:100%;padding:0}
.scroll-story[data-motion="pinned"] .story-topline{position:absolute;top:32px;left:40px;right:40px;z-index:3}
.scroll-story[data-motion="pinned"] .story-bottomline{position:absolute;bottom:28px;left:40px;right:40px;z-index:3}
.scroll-story[data-motion="pinned"] .problem-scene{position:absolute;inset:0;display:grid;place-items:center;padding:60px 35px;pointer-events:none}
.scroll-story[data-motion="pinned"] .problem-scene h2{width:100%}
.scroll-story[data-motion="pinned"] .solution-scene{position:absolute;inset:70px 30px 65px;display:flex;flex-direction:column;justify-content:center;padding:0}
.scroll-story[data-motion="pinned"] .resource-composition{flex:none}
@media(min-width:1001px) and (min-height:650px){.opening-main:has([data-motion="pinned"])>.hero-layout{position:sticky;top:14px;z-index:0}}
@media(max-width:900px){.scroll-story{margin-top:12px;padding-inline:12px}.story-glass{padding:26px}.problem-scene{padding:80px 0}.story-bottomline{gap:12px}.story-progress{width:50px}.solution-copy h2{font-size:35px}}
@media(max-width:540px){
  .scroll-story{padding:0 8px 8px}.story-stage{border-radius:25px}.story-glass{padding:25px 18px}
  .problem-scene h2{font-size:clamp(25px,6.7vw,34px);letter-spacing:-.065em;line-height:1.3}.problem-scene{padding:75px 0}
  .solution-copy h2{font-size:30px}.story-topline{font-size:8px;letter-spacing:1px}
  .resource-composition{height:330px;margin:18px auto 16px}
  .resource-hub{inset:0;padding:17px 15px;border-radius:20px}
  .folio-heading{padding-bottom:13px;gap:12px}
  .folio-brand{font-size:18px;gap:5px}.folio-mark{width:21px;height:21px}.folio-caption{font-size:9px;max-width:108px}
  .resource-tile{padding:15px;border-radius:12px}
  .tile-benefits{left:15px;right:15px;top:69px;height:116px}
  .tile-community{left:15px;right:calc(50% + 4px);top:193px;height:122px}
  .tile-human{left:calc(50% + 4px);right:15px;top:193px;height:122px}
  .folio-category{font-size:8px;letter-spacing:.3px}
  .folio-card-title{font-size:15px;line-height:1.15;margin-top:9px;max-width:100%}
  .tile-benefits .folio-card-title{font-size:25px;margin-top:10px;max-width:210px;padding-right:15px}
  .folio-symbol{width:21px;height:21px;bottom:12px;right:13px;stroke-width:1.5}
  .tile-benefits .folio-symbol{left:auto;right:18px;bottom:20px;width:30px;height:30px}
  .folio-watermark{width:125px;height:125px;right:-15px;bottom:-38px}
  .scroll-story[data-motion="pinned"]{height:420svh}
  .scroll-story[data-motion="pinned"] .story-stage{top:8px;height:calc(100svh - 16px)}
  .scroll-story[data-motion="pinned"] .story-topline{top:25px;left:22px;right:22px}
  .scroll-story[data-motion="pinned"] .problem-scene{padding:65px 20px}
  .scroll-story[data-motion="pinned"] .solution-scene{inset:70px 17px 35px}
}
@media(max-width:360px){
  .folio-caption{font-size:8px;max-width:92px}.folio-brand{font-size:16px}.folio-mark{width:18px;height:18px}
  .resource-tile{padding:12px}.folio-category{font-size:7px;letter-spacing:0}
  .tile-benefits .folio-card-title{font-size:23px;max-width:175px}.folio-card-title{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.problem-line,.resource-tile{will-change:auto}}

/* The opening parts separate as the next surface enters; no fog or live blur. */
.opening-main>.hero-layout{position:relative;overflow-x:clip}
.hero-layout>.intro-panel{transform:translate3d(calc(var(--opening-progress,0) * -110%),0,0)}
.hero-layout>.audience-cards>.audience-card{transform:translate3d(calc(var(--opening-progress,0) * 110%),0,0)}
@media(min-width:1001px) and (min-height:650px){.opening-main:has([data-motion="pinned"])>.hero-layout{position:sticky}}


/* On phones the complete opening scrolls into view, then stays behind the glass. */
@media(max-width:900px){
  .opening-main>.hero-layout[data-mobile-overlap]{position:sticky;top:min(8px,calc(var(--scene-height,100svh) - var(--mobile-stack-height) - 16px));z-index:0}
  .scroll-story[data-mobile-overlap] .story-stage{transform:translate3d(0,var(--sheet-rise,28px),0) scale(var(--sheet-scale,.965));transform-origin:50% 100%;opacity:var(--sheet-opacity,0);box-shadow:0 -18px 55px rgba(8,29,38,var(--sheet-shadow,0))}
  .scroll-story[data-mobile-overlap] .story-topline{opacity:1}
  .hero-layout>.intro-panel{transform:translate3d(0,calc(var(--opening-progress,0) * -100%),0)}
  .hero-layout>.audience-cards>.audience-card:first-child{transform:translate3d(calc(var(--opening-progress,0) * -110%),0,0)}
  .hero-layout>.audience-cards>.audience-card:last-child{transform:translate3d(calc(var(--opening-progress,0) * 110%),0,0)}
  /* Only the backdrop grows into space exposed by retracting browser chrome. */
  html[data-scene-mobile] .story-stage{overflow:visible;background:transparent}
  html[data-scene-mobile] .story-backdrop{bottom:auto;height:calc(100% + max(0px,100lvh - var(--scene-height)))}
  html[data-scene-mobile] .story-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,#ffffff22,#d8edff08 55%,#ffffff18)}
  html[data-scene-mobile] .story-glass{border-radius:inherit;overflow:hidden;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  html[data-scene-mobile] .scroll-story[data-motion="pinned"]{height:calc(var(--scene-height) * 4.5)}
  html[data-scene-mobile] .scroll-story[data-motion="pinned"] .story-stage{height:calc(var(--scene-height) - 28px)}
  html[data-scene-mobile] .intro-panel{min-height:calc(var(--scene-height) * .6)}
}
@media(max-width:540px){
  /* Let both audience cards finish scrolling into view before the glass enters.
     The native sticky opening fills this reading distance; no touch damping. */
  .scroll-story[data-mobile-overlap]{margin-top:calc(12px + clamp(120px,calc(var(--scene-height) * .3),220px))}
  html[data-scene-mobile] .scroll-story[data-motion="pinned"]{height:calc(var(--scene-height) * 4.2)}
  html[data-scene-mobile] .scroll-story[data-motion="pinned"] .story-stage{height:calc(var(--scene-height) - 16px)}
  html[data-scene-mobile] .intro-panel--video{min-height:calc(var(--scene-height) - 84px - env(safe-area-inset-bottom,0px))}
  html[data-scene-mobile] .intro-panel--video .hero-award{margin-top:clamp(18px,calc(var(--scene-height) * .035),30px)}
  html[data-scene-short] .intro-panel--video .hero-award{margin-top:18px}
}
/* Touch cards retain their neutral fill after a tap. */
@media(max-width:540px) and (hover:none){.hero-layout[data-mobile-overlap] .audience-card::before{content:none}}

@media(prefers-reduced-motion:reduce){.hero-layout>.intro-panel,.hero-layout>.audience-cards>.audience-card{transform:none}}