/* Immersive page direction, using the existing service and course content. */
html[data-site-mode=parallax] :is(.coaching-page,.compass-page) {
  --immersive-page-gutter: max(6vw,calc((100vw - 1180px)/2));
  background: #f8faff;
}

html[data-site-mode=parallax] .coaching-page .coaching-intro {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: min(750px,calc(100svh - var(--site-top)));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 110px var(--immersive-page-gutter) 115px;
  background: #2035a0;
  color: #f8faff;
  text-align: left;
}
html[data-site-mode=parallax] .coaching-page .coaching-intro::after {
  content: '';
  position: absolute;
  inset: 0 0 0 56%;
  background: linear-gradient(90deg,#2035a020,transparent 24%),url('/assets/person/nik-speaking.webp') 54% center / cover no-repeat;
  pointer-events: none;
}
html[data-site-mode=parallax] .coaching-page .coaching-intro>.eyebrow { color: #c6d1ff; margin-bottom: 36px }
html[data-site-mode=parallax] .coaching-page .coaching-intro h1 {
  width: 49%;
  max-width: 620px;
  margin: 0;
  font-size: clamp(48px,5.2vw,82px);
  line-height: 1.04;
  letter-spacing: -.06em;
  text-wrap: balance;
}
html[data-site-mode=parallax] .coaching-page .coaching-intro-copy {
  width: 46%;
  max-width: 495px;
  margin: 34px 0 0;
  font-size: 18px;
  line-height: 1.8;
  color: #e0e6ff;
}

html[data-site-mode=parallax] .coaching-page .coaching-services { width: min(100%,1180px); padding-block: 110px 105px }
html[data-site-mode=parallax] .coaching-page .coaching-service { min-height: 300px; padding-block: 60px; grid-template-columns: 84px minmax(0,1fr); gap: 42px }
html[data-site-mode=parallax] .coaching-page .coaching-service:first-child { border-top: 0 }
html[data-site-mode=parallax] .coaching-page .service-symbol { width: 62px; height: 62px; stroke-width: .9 }
html[data-site-mode=parallax] .coaching-page .service-copy h2 { font-size: clamp(31px,3.1vw,44px); letter-spacing: -.04em; margin-bottom: 23px }
html[data-site-mode=parallax] .coaching-page .service-copy p { max-width: 670px; font-size: 18px }
html[data-site-mode=parallax] .coaching-page .service-copy .text-link { margin-top: 28px }

html[data-site-mode=parallax] .coaching-page .framework {
  width: 100%;
  max-width: none;
  padding: 110px var(--immersive-page-gutter) 120px;
  border-top: 0;
  background: #edf1fa;
  row-gap: 72px;
}
html[data-site-mode=parallax] .coaching-page .framework-intro { grid-template-columns: minmax(0,1fr) 270px; column-gap: 80px }
html[data-site-mode=parallax] .coaching-page .framework h2 { max-width: 650px; font-size: clamp(42px,4.7vw,66px); letter-spacing: -.05em }
html[data-site-mode=parallax] .coaching-page .framework-compass { width: 270px }
html[data-site-mode=parallax] .coaching-page .framework-copy { max-width: 600px; margin-top: 30px }
html[data-site-mode=parallax] .coaching-page .framework-copy>p { font-size: 18px }
html[data-site-mode=parallax] .coaching-page .module-list summary { padding-block: 32px; font-size: 20px }
html[data-site-mode=parallax] .coaching-page .module-list details>div { padding-bottom: 42px; column-gap: 72px }
html[data-site-mode=parallax] .coaching-page .questions { width: 100%; max-width: none; padding: 115px var(--immersive-page-gutter) 125px; border-top: 0; gap: 90px }
html[data-site-mode=parallax] .coaching-page .questions h2 { font-size: 48px; letter-spacing: -.045em }
html[data-site-mode=parallax] .coaching-page .faq-list summary { padding-block: 29px }

html[data-site-mode=parallax] .compass-page .page-hero {
  width: 100%;
  max-width: none;
  padding: 110px var(--immersive-page-gutter) 100px;
  background: linear-gradient(120deg,#13275f,#243aaa);
  color: #f8faff;
}
html[data-site-mode=parallax] .compass-page .page-hero>.eyebrow { color: #c6d1ff; margin-bottom: 45px }
html[data-site-mode=parallax] .compass-page .page-hero h1 { font-size: clamp(78px,10vw,150px); line-height: .98; letter-spacing: -.065em }
html[data-site-mode=parallax] .compass-page .page-hero-bottom { margin-top: 55px; gap: 55px }
html[data-site-mode=parallax] .compass-page .page-hero-bottom>p { max-width: 620px; font-size: 19px; line-height: 1.8; color: #dce4ff }
html[data-site-mode=parallax] .compass-page .page-hero-bottom .text-link { color: #f8faff }
html[data-site-mode=parallax] .compass-page .framework { padding-block: 110px 120px; border-top: 0; grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr); gap: 95px }
html[data-site-mode=parallax] .compass-page .framework h2 { font-size: 54px; letter-spacing: -.045em }
html[data-site-mode=parallax] .compass-page .framework-intro>p:not(.eyebrow) { font-size: 17px; line-height: 1.85; max-width: 340px }
html[data-site-mode=parallax] .compass-page .framework-intro .compass-drawing { width: 210px; height: 230px; margin-top: 48px }
html[data-site-mode=parallax] .compass-page .framework-intro .compass-drawing svg { width: 210px }
html[data-site-mode=parallax] .compass-page .framework-intro .compass-drawing>span { left: 101px }
html[data-site-mode=parallax] .compass-page .module-list summary { font-size: 20px; padding-block: 30px }
html[data-site-mode=parallax] .compass-page .course-return { padding-block: 55px; gap: 35px }

@media(max-width:1000px) {
  html[data-site-mode=parallax] .coaching-page .framework-intro { grid-template-columns: minmax(0,1fr) 200px; column-gap: 35px }
  html[data-site-mode=parallax] .coaching-page .framework-compass { width: 200px }
  html[data-site-mode=parallax] .compass-page .framework { gap: 50px }
}
@media(max-width:850px) {
  html[data-site-mode=parallax] :is(.coaching-page,.compass-page) { --immersive-page-gutter: 36px }
  html[data-site-mode=parallax] .coaching-page .coaching-intro { min-height: 0; padding-block: 75px 40px }
  html[data-site-mode=parallax] .coaching-page .coaching-intro h1 { width: 100%; max-width: 650px; font-size: clamp(48px,8vw,70px) }
  html[data-site-mode=parallax] .coaching-page .coaching-intro-copy { width: 100%; max-width: 590px; margin-top: 28px }
  html[data-site-mode=parallax] .coaching-page .coaching-intro::after { position: relative; inset: auto; width: 100%; aspect-ratio: 1.8; margin-top: 45px; background-image: url('/assets/person/nik-speaking.webp'); background-position: center 40% }
  html[data-site-mode=parallax] .coaching-page .coaching-services { padding-block: 65px }
  html[data-site-mode=parallax] .coaching-page .coaching-service { min-height: 0; padding: 44px 0; grid-template-columns: 65px minmax(0,1fr); gap: 26px }
  html[data-site-mode=parallax] .coaching-page .service-symbol { width: 48px; height: 48px }
  html[data-site-mode=parallax] .coaching-page .framework { padding-block: 75px 85px; row-gap: 50px }
  html[data-site-mode=parallax] .coaching-page .framework-copy>p { font-size: 17px }
  html[data-site-mode=parallax] .coaching-page .module-list details>div { column-gap: 35px }
  html[data-site-mode=parallax] .coaching-page .questions { padding-block: 75px 85px; gap: 45px }
  html[data-site-mode=parallax] .coaching-page .questions h2 { font-size: 42px }
  html[data-site-mode=parallax] .compass-page .page-hero { padding-block: 75px }
  html[data-site-mode=parallax] .compass-page .page-hero h1 { font-size: clamp(76px,12vw,110px) }
  html[data-site-mode=parallax] .compass-page .page-hero-bottom { align-items: flex-start; flex-direction: column; gap: 28px; margin-top: 40px }
  html[data-site-mode=parallax] .compass-page .page-hero-bottom>p { font-size: 17px }
  html[data-site-mode=parallax] .compass-page .framework { grid-template-columns: minmax(0,1fr); gap: 50px; padding-block: 75px 85px }
  html[data-site-mode=parallax] .compass-page .framework h2 { font-size: 46px }
  html[data-site-mode=parallax] .compass-page .framework-intro .compass-drawing { display: none }
}
@media(max-width:600px) {
  html[data-site-mode=parallax] :is(.coaching-page,.compass-page) { --immersive-page-gutter: 24px }
  html[data-site-mode=parallax] .coaching-page .coaching-intro { padding-block: 55px 24px }
  html[data-site-mode=parallax] .coaching-page .coaching-intro>.eyebrow { font-size: 8px; margin-bottom: 27px }
  html[data-site-mode=parallax] .coaching-page .coaching-intro h1 { font-size: clamp(41px,10.6vw,58px) }
  html[data-site-mode=parallax] .coaching-page .coaching-intro-copy { font-size: 16px; line-height: 1.8 }
  html[data-site-mode=parallax] .coaching-page .coaching-intro::after { margin-top: 32px; aspect-ratio: 1.45 }
  html[data-site-mode=parallax] .coaching-page .coaching-services { padding-block: 35px 45px }
  html[data-site-mode=parallax] .coaching-page .coaching-service { grid-template-columns: minmax(0,1fr); gap: 24px; padding-block: 35px }
  html[data-site-mode=parallax] .coaching-page .service-symbol { width: 42px; height: 42px }
  html[data-site-mode=parallax] .coaching-page .service-copy h2 { font-size: 30px }
  html[data-site-mode=parallax] .coaching-page .service-copy p { font-size: 16px }
  html[data-site-mode=parallax] .coaching-page .framework { padding-block: 55px 60px; row-gap: 36px }
  html[data-site-mode=parallax] .coaching-page .framework-intro { grid-template-columns: minmax(0,1fr) 78px; column-gap: 14px }
  html[data-site-mode=parallax] .coaching-page .framework h2 { font-size: 34px }
  html[data-site-mode=parallax] .coaching-page .framework-compass { width: 78px }
  html[data-site-mode=parallax] .coaching-page .framework-copy { margin-top: 25px }
  html[data-site-mode=parallax] .coaching-page .framework-copy>p { font-size: 16px }
  html[data-site-mode=parallax] .coaching-page .module-list summary { font-size: 17px; padding-block: 25px; gap: 14px }
  html[data-site-mode=parallax] .coaching-page .module-list details>div { padding-bottom: 30px }
  html[data-site-mode=parallax] .coaching-page .questions { padding-block: 55px 65px; gap: 30px }
  html[data-site-mode=parallax] .coaching-page .questions h2 { font-size: 36px }
  html[data-site-mode=parallax] .coaching-page .faq-list summary { padding-block: 23px }
  html[data-site-mode=parallax] .compass-page .page-hero { padding-block: 55px 60px }
  html[data-site-mode=parallax] .compass-page .page-hero>.eyebrow { margin-bottom: 30px }
  html[data-site-mode=parallax] .compass-page .page-hero h1 { font-size: clamp(62px,15vw,88px) }
  html[data-site-mode=parallax] .compass-page .page-hero-bottom { margin-top: 30px }
  html[data-site-mode=parallax] .compass-page .page-hero-bottom>p { font-size: 16px }
  html[data-site-mode=parallax] .compass-page .framework { padding-block: 55px 65px; gap: 38px }
  html[data-site-mode=parallax] .compass-page .framework h2 { font-size: 38px }
  html[data-site-mode=parallax] .compass-page .module-list summary { font-size: 17px; padding-block: 25px }
  html[data-site-mode=parallax] .compass-page .course-return { padding-block: 38px }
}