.adts-story {
  --adts-progress: 0;
  --adts-blue: #079fd5;
  --adts-ink: #153d4d;
  box-sizing: border-box;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 240vh;
  color: var(--adts-ink);
  font-family: Arial, "Segoe UI", sans-serif;
}
.adts-story * { box-sizing: border-box; }
.adts-sticky {
  position: sticky;
  top: 85px;
  height: calc(100vh - 85px);
  min-height: 610px;
  overflow: hidden;
  background: radial-gradient(ellipse 55% 80% at 72% 50%, #d9f3fa 0, #eef9fc 52%, #f9fdff 100%);
  border-top: 1px solid #d6eff6;
  border-bottom: 1px solid #d6eff6;
}
.adts-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(420px, 1.05fr);
  align-items: center;
  width: min(100%, 1450px);
  height: 100%;
  margin: 0 auto;
  padding: 45px clamp(25px, 5vw, 84px);
}
.adts-copy { position: relative; z-index: 4; max-width: 585px; }
.adts-story .adts-eyebrow {
  margin: 0 0 25px;
  color: #078dbd;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .18em;
  line-height: 1.6;
}
.adts-story .adts-copy h2 {
  margin: 0 0 24px;
  color: var(--adts-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 5vw, 86px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.055em;
  text-transform: none;
}
.adts-copy h2 em { color: var(--adts-blue); font-style: italic; }
.adts-story .adts-intro {
  max-width: 430px;
  margin: 0 0 32px;
  color: #547381;
  font-size: 16px;
  line-height: 1.75;
}
.adts-detail {
  min-height: 98px;
  margin: 0 0 28px;
  padding: 3px 0 4px 19px;
  border-left: 2px solid var(--adts-blue);
}
.adts-step, .adts-title, .adts-desc { display: block; }
.adts-step { margin-bottom: 8px; color: #078dbd; font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.adts-title { margin-bottom: 5px; color: var(--adts-ink); font-family: Georgia, serif; font-size: 27px; font-weight: 400; line-height: 1.2; }
.adts-desc { color: #547381; font-size: 14px; line-height: 1.5; }
.adts-story .adts-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 15px 22px;
  border: 1px solid var(--adts-blue);
  border-radius: 2px;
  background: var(--adts-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
}
.adts-story .adts-cta:hover, .adts-story .adts-cta:focus { background: #087fae; border-color: #087fae; color: #fff; text-decoration: none; }
.adts-scroll { display: flex; align-items: center; gap: 11px; margin-top: 42px; color: #668b99; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.adts-scroll i { position: relative; display: block; width: 40px; height: 1px; background: #a7d6e3; }
.adts-scroll i:after { content: ""; display: block; width: calc(var(--adts-progress) * 100%); height: 1px; background: var(--adts-blue); }
.adts-visual { position: relative; display: grid; place-items: center; height: min(75vh, 710px); min-height: 475px; perspective: 1200px; }
.adts-orbit { position: absolute; width: min(95%, 700px); aspect-ratio: 1; border: 1px solid rgba(7,159,213,.18); border-radius: 50%; box-shadow: 0 0 0 72px rgba(7,159,213,.025), 0 0 0 140px rgba(7,159,213,.015); }
.adts-orbit:after { content: ""; position: absolute; inset: 17%; border: 1px dashed rgba(7,159,213,.2); border-radius: 50%; }
.adts-tooth { position: relative; z-index: 2; display: block; width: min(100%, 590px); height: 100%; overflow: visible; filter: drop-shadow(0 28px 26px rgba(28,84,105,.18)); transform: rotate(-7deg) rotateY(calc(var(--adts-progress) * 18deg)) scale(1.02); transform-origin: center; }
.adts-tooth .enamel { transform: translate(calc(var(--adts-progress) * 115px), calc(var(--adts-progress) * -75px)); opacity: calc(1 - var(--adts-progress) * .52); }
.adts-tooth .dentin { transform: translate(calc(var(--adts-progress) * -68px), calc(var(--adts-progress) * 8px)); }
.adts-tooth .pulp { transform: translate(calc(var(--adts-progress) * -85px), calc(var(--adts-progress) * 12px)); opacity: calc(.42 + var(--adts-progress) * .58); }
.adts-tooth .enamel, .adts-tooth .dentin, .adts-tooth .pulp { transition: transform .13s linear, opacity .13s linear; }
.adts-callout { position: absolute; z-index: 3; right: 0; padding-left: 63px; color: #2c6d80; font-size: 11px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; opacity: 0; transition: opacity .25s ease; }
.adts-callout:before { content: ""; position: absolute; left: 0; top: 50%; width: 52px; height: 1px; background: var(--adts-blue); }
.adts-callout-enamel { top: 28%; }
.adts-callout-dentin { top: 51%; }
.adts-callout-pulp { top: 73%; }
.adts-callout.is-active { opacity: 1; }
@media (max-width: 1000px) {
  .adts-inner { grid-template-columns: minmax(290px, 1fr) minmax(340px, 1fr); padding-inline: 35px; }
  .adts-story .adts-copy h2 { font-size: clamp(44px, 5.3vw, 68px); }
}
@media (max-width: 760px) {
  .adts-story { height: 220vh; }
  .adts-sticky { top: 66px; height: calc(100vh - 66px); min-height: 590px; }
  .adts-inner { display: block; padding: 42px 22px; }
  .adts-copy { max-width: 470px; }
  .adts-story .adts-eyebrow { margin-bottom: 16px; font-size: 9px; }
  .adts-story .adts-copy h2 { max-width: 440px; font-size: clamp(40px, 9vw, 62px); }
  .adts-story .adts-intro { max-width: 290px; margin-bottom: 18px; font-size: 13px; line-height: 1.55; }
  .adts-detail { min-height: 88px; margin-bottom: 17px; }
  .adts-title { font-size: 22px; }
  .adts-desc { max-width: 260px; font-size: 12px; }
  .adts-story .adts-cta { padding: 11px 15px; font-size: 10px; }
  .adts-scroll { margin-top: 22px; font-size: 9px; }
  .adts-visual { position: absolute; right: -20%; bottom: -15%; width: 82%; height: 67%; min-height: 0; opacity: .83; }
  .adts-callout { display: none; }
}
@media (max-width: 440px) {
  .adts-story .adts-copy h2 { font-size: 42px; }
  .adts-visual { right: -28%; bottom: -13%; width: 96%; height: 55%; opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .adts-tooth, .adts-tooth .enamel, .adts-tooth .dentin, .adts-tooth .pulp { transition: none; }
}