/* Shared cinematic hero-to-content transition for all service pages. */
main > :is(.hero,.about-hero,.about-est-hero,.offer-hero,.goal-hub-hero,.goal-detail-hero,.esthetic-faq-hero,.ortho-faq-hero):first-child{
  position:sticky!important;
  top:0;
  z-index:0;
}

main > :is(.values,.about-values,.standards,.offer-standards,.goal-standards,.faq-assurance,.ortho-faq-assurance,.contact-zone,.section):nth-child(2){
  position:relative;
  z-index:5;
  width:100%;
  margin-left:0;
  margin-right:0;
  box-shadow:0 -34px 70px rgba(18,12,10,.28);
}

main > :is(.values,.about-values,.standards,.offer-standards,.goal-standards,.faq-assurance,.ortho-faq-assurance,.contact-zone,.section):nth-child(2)::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  right:0;
  left:0;
  height:1px;
  background:rgba(255,244,236,.38);
  pointer-events:none;
}

main > .values:nth-child(2){background:#d7c1ae}
main > .about-values:nth-child(2){background:linear-gradient(120deg,#251814,#0b0b0b)}
body.esthetic-legal main > .standards:nth-child(2),
body.esthetic-legal main > .offer-standards:nth-child(2){background:#171311}
main > .contact-zone:nth-child(2){background:#f7f1eb}
main > .goal-standards:nth-child(2){background:linear-gradient(120deg,#251814,#0b0b0b)}
main > .faq-assurance:nth-child(2){background:linear-gradient(120deg,#281a15,#0b0a0a)}
main > .ortho-faq-assurance:nth-child(2){background:linear-gradient(120deg,#4a3025,#1a110e)}

/* Every layer following a sticky hero must paint its own opaque surface. */
main > .story{background:#fbf8f4}
main > .intro{background:#fbf8f4}
main > .pricing{background:#fbf8f4}
body.esthetic-legal main > .intro{background:#0d0d0d}
body.esthetic-legal main > .pricing{background:radial-gradient(circle at 90% 10%,rgba(120,76,57,.15),transparent 30%),#0a0a0a}
main > .quote-section{background:#211c19}
main > .approach{background:#eee3d8}
main > .about-cta{background:#fbf8f4}

/*
 * One stacking contract for every service page. New content sections inherit
 * a solid canvas automatically, so a sticky photo or video can never bleed
 * through an unpositioned layer.
 */
main > section:not(:first-child){
  position:relative;
  z-index:3;
}
main > .section-light{background-color:#eee5dc!important}
main > .section-dark{background-color:#0a0a0a!important}
body.esthetic-legal main > .section-warm{background-color:#1b1412!important}
main > .editorial-feature{background-color:#0b0b0b!important}
main > .cta-est{background-color:#080909!important}
main > .cta{background-color:#15110f!important}
body.esthetic-legal main > .standards{background-color:#171311!important}
body.esthetic-legal main > .offer-standards{background-color:#171311!important}

main > :is(.story,.intro,.pricing,.section,.quote-section,.approach,.contact-zone,.map-section,.cta,.cta-est,.about-cta){
  position:relative;
  z-index:3;
}

@media(max-width:680px){
  main > :is(.hero,.about-hero,.about-est-hero,.offer-hero,.goal-hub-hero,.goal-detail-hero,.esthetic-faq-hero,.ortho-faq-hero):first-child{position:relative!important}
  main > :is(.values,.about-values,.standards,.offer-standards,.goal-standards,.faq-assurance,.ortho-faq-assurance,.contact-zone,.section):nth-child(2){box-shadow:0 -18px 42px rgba(18,12,10,.2)}
}

@media(prefers-reduced-motion:reduce){
  main > :is(.hero,.about-hero,.about-est-hero,.offer-hero,.goal-hub-hero,.goal-detail-hero,.esthetic-faq-hero,.ortho-faq-hero):first-child{position:relative!important}
}