/* A shared, edge-to-edge opening for SG's illustrated service pages.
   Keep the original painting continuous: no oval crop or horizontal fade. */
.immersive-page{overflow-x:clip}
.immersive-page>header{
  position:absolute;inset:0 0 auto;z-index:3;
  max-width:none;width:100%;margin:0;padding:24px 7.5%;
}
.immersive-page>header img{width:164px;height:auto}
.immersive-page>header>a:last-child{font-size:14px;background:#fdfbf7cc;backdrop-filter:blur(8px);padding:5px 10px;border:0;border-radius:20px}
.immersive-page .page-opening{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  justify-content:center;align-items:stretch;
  width:100vw;max-width:none;height:auto;max-height:none;
  min-height:max(680px,100svh);margin:0 calc(50% - 50vw);
  padding:130px 7.5vw 100px;overflow:hidden;
  scroll-snap-align:start;scroll-margin-top:0;
}
.immersive-page .page-opening:before{display:none}
.immersive-page .page-opening-art{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  pointer-events:none;margin:0;opacity:1;mask-image:none;
}
.immersive-page .page-opening-art img{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;opacity:1;
  mask-image:none;mix-blend-mode:multiply;translate:none;
}
.immersive-page .page-opening:after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#fdfbf730,transparent 18%,transparent 93%,#fdfbf7);
}
.immersive-page .page-opening-copy{
  position:relative;width:38vw;max-width:600px;padding:0;margin:0;
  background:none;align-self:flex-start;
}
.immersive-page .page-opening h1{
  max-width:none;margin:0 0 25px;font-size:clamp(44px,4.2vw,70px);
  line-height:1.12;letter-spacing:-.035em;
}
.immersive-page .page-opening .eyebrow{font-size:12px;line-height:1.6;letter-spacing:1.7px;margin:0 0 22px}
.immersive-page .page-opening :is(.intro,.lead){
  max-width:440px;font-size:clamp(18px,1.4vw,21px);line-height:1.7;
  margin:0 0 24px;color:#567487;
}
.immersive-page .page-opening :is(.principle,.intro-note){
  max-width:470px;font-size:15px;line-height:1.7;margin:0 0 23px;color:#617b8a;
}
.immersive-page .page-opening :is(.text-link,.about-start){font-size:16px;margin-top:8px}
.about-page .page-opening-copy{width:38vw;max-width:560px}
.about-page .page-opening h1{max-width:none}
.about-page .page-opening h1>span:first-child{white-space:nowrap}
.about-page .page-opening .intro{max-width:440px}
/* Lift the reading text too, without changing the approved interactive layouts. */
.immersive-page .team-story>p,.immersive-page .team-story .letter{font-size:17px}
.immersive-page .team-story .team-link,.immersive-page .scene-link{font-size:15px}
.immersive-page .explore-panel>p{font-size:18px}
.immersive-page .section-heading>p,.immersive-page .platform p{font-size:16px}
.immersive-page .course>p:not(.course-meta){font-size:15px}
.immersive-page .course>a{font-size:14px}
.immersive-page .step-panel>p:not(.stage-label){font-size:17px}
.immersive-page .step-panel .example{font-size:15px!important}
.immersive-page .activate-close p:not(.eyebrow){font-size:16px}
@media(min-width:701px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .about-page .page-opening-art img{
    transform:scale(1.008);translate:calc(var(--drift-x,0px) * .3) calc(var(--drift-y,0px) * .3);
    transition:translate 1.5s ease;
  }
}
@media(min-width:701px) and (max-aspect-ratio:3/2){
  .immersive-page .page-opening{padding-top:130px;padding-bottom:100px;min-height:100svh}
  .immersive-page .page-opening-copy{width:43vw;max-width:560px}
  .immersive-page .page-opening-art img{top:auto;bottom:0;height:62vw;object-fit:cover;object-position:right bottom;mask-image:linear-gradient(180deg,transparent,#000 30%)}
  .immersive-page .page-opening:after{background:radial-gradient(ellipse at 15% 40%,#fdfbf7c9,transparent 60%),linear-gradient(180deg,#e9eff233,transparent 25%,transparent 94%,#fdfbf7)}
  .immersive-page .page-opening :is(.intro,.lead){max-width:360px}
}
@media(max-width:700px){
  .immersive-page>header{padding:22px 23px}
  .immersive-page>header img{width:138px}
  .immersive-page>header>a:last-child{font-size:12px}
  .immersive-page .page-opening{
    justify-content:flex-start;min-height:100svh;
    padding:125px 23px 290px;
  }
  .immersive-page .page-opening-copy{width:100%;max-width:none;margin:0;padding:0}
  .immersive-page .page-opening h1{font-size:clamp(39px,10.4vw,58px);line-height:1.12;margin-bottom:23px}
  .immersive-page .page-opening :is(.intro,.lead){font-size:18px;line-height:1.65;max-width:none;margin-bottom:20px}
  .immersive-page .page-opening .eyebrow{font-size:11px;letter-spacing:1.4px;margin-bottom:18px}
  .immersive-page .page-opening :is(.principle,.intro-note){font-size:14px;margin-bottom:18px}
  .immersive-page .page-opening :is(.text-link,.about-start){font-size:15px;margin-top:4px}
  .immersive-page .page-opening-art{background:#fdfbf7}
  .immersive-page .page-opening-art img{
    top:auto;bottom:0;height:280px;object-fit:cover;object-position:right bottom;
    mask-image:linear-gradient(180deg,transparent,#000 18%,#000 94%,transparent);
  }
  .immersive-page .page-opening:after{background:linear-gradient(180deg,#e9eff233,transparent 25%,transparent 94%,#fdfbf7)}
  .immersive-page .team-story>p,.immersive-page .team-story .letter{font-size:16px}
  .immersive-page .explore-panel>p{font-size:17px}
}