/* The six essentials follow the hero in normal reading order. */
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--conditions-sequence {
  grid-template-rows: auto auto auto auto auto auto 100svh auto;
}
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--conditions-sequence > #website-hero-conditions { grid-column: 1 / -1; grid-row: 2; align-self: start; }
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--conditions-sequence > #website-unfold-gallery { grid-row: 3; }
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--conditions-sequence > #website-copy-bloom { grid-row: 4; }
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--conditions-sequence > #website-color-showcase { grid-row: 5; }
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--conditions-sequence > #website-lp-unlimited { grid-row: 6; }
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--conditions-sequence > .lumen-sheet { grid-row: 7; }
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--conditions-sequence > .service-hero__reverse-film-stage { grid-row: 8; }

#website-hero-conditions {
  --wtb-ink: #243e56;
  --wtb-soft: #5a6e7e;
  --wtb-blue: #688da9;
  --wtb-rule: rgb(113 148 175 / 22%);
  padding: clamp(80px, 8vw, 122px) 0;
  background: #fff;
  text-align: left;
  scroll-margin-top: 72px;
}
#website-hero-conditions::before {
  background: radial-gradient(ellipse at 78% 48%, rgb(221 234 244 / 42%), transparent 58%);
}
#website-hero-conditions .website-total-branding__eyebrow { color: #68849a; font-size: 10px; letter-spacing: .2em; }
#website-hero-conditions .website-total-branding__copy h2 { line-height: 1.8; font-weight: 400; }
#website-hero-conditions .website-total-branding__copy h2 > em { margin-top: .1em; color: #759bb7; }
#website-hero-conditions .website-total-branding__description { margin-top: 30px; }
#website-hero-conditions .website-total-branding__description p { line-height: 2.3; }
#website-hero-conditions .website-total-branding__orbit { stroke: rgb(110 146 174 / 20%); }
#website-hero-conditions .website-total-branding__orbit--inner { stroke: rgb(110 146 174 / 25%); }
#website-hero-conditions .website-total-branding__rays { stroke: rgb(110 146 174 / 34%); }
#website-hero-conditions .website-total-branding__points { fill: #9bb7cc; }
#website-hero-conditions .website-total-branding__core {
  border-color: #d0deea;
  background: radial-gradient(circle at 32% 20%, #fff, #edf4f9 75%);
  box-shadow: 0 12px 38px rgb(75 113 145 / 7%), 0 0 0 9px rgb(236 244 250 / 52%);
}
#website-hero-conditions .website-total-branding__core > span { color: #6b8ba4; }
#website-hero-conditions .website-total-branding__element {
  padding: 17px 3px;
  border-top-color: #bfd1df;
  border-bottom-color: #e1eaf1;
  background: rgb(255 255 255 / 95%);
}
#website-hero-conditions .website-total-branding__element > span { color: #6d8ba2; font-size: 8px; }
#website-hero-conditions .website-total-branding__element h3 { font-weight: 500; }
#website-hero-conditions .website-total-branding__element p { font-size: 10px; }
#website-hero-conditions .website-total-branding__figure figcaption { color: #6d8293; font-size: 11px; }
@media (max-width: 1000px) {
  #website-hero-conditions .website-total-branding__layout { gap: 48px; }
}
@media (max-width: 600px) {
  #website-hero-conditions { padding: 72px 0 64px; }
  #website-hero-conditions .website-total-branding__layout { gap: 46px; }
  #website-hero-conditions .website-total-branding__copy h2 { font-size: clamp(27px, 7.3vw, 36px); line-height: 1.7; }
  #website-hero-conditions .website-total-branding__description { margin-top: 24px; }
  #website-hero-conditions .website-total-branding__description br { display: none; }
  #website-hero-conditions .website-total-branding__core::after { border-color: #bfd1df; }
  #website-hero-conditions .website-total-branding__element { padding: 15px 4px; }
  #website-hero-conditions .website-total-branding__element:first-child { grid-column: auto; width: auto; margin: 0; }
  #website-hero-conditions .website-total-branding__element h3 { font-size: 12px; }
  #website-hero-conditions .website-total-branding__element > span { font-size: 7px; letter-spacing: .05em; }
  #website-hero-conditions .website-total-branding__element p { white-space: normal; font-size: 10px; }
}