/* Teeth Whitening — /teeth-whitening/
   Scoped to body.page-whitening. Page hero, sec-head, stick, points, ledger, arch frames, related and accordion are shared (site.css).
   Signature: a shade guide on ink. Forty steps run from a stained tone to enamel; on reveal a needle of light travels
   the guide, the steps behind it brighten, and each sentence of the process drops in as the needle passes. */

/* The needle, the developed length of the guide and the sampled step are animatable numbers. @property cannot be nested
   under the body class, so the names carry this page's --tw- prefix; this file is loaded only by /teeth-whitening/. */
@property --tw-pos { syntax: "<number>"; inherits: true; initial-value: .9875; }
@property --tw-reach { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --tw-n { syntax: "<integer>"; inherits: true; initial-value: 40; }

.page-whitening {
  /* The stained end of the scale: sand deepened with a little sun-deep and ink, a warm biscuit that stays in the
     sand-to-enamel family (no rose cast). The bright end is enamel. */
  --tw-deep: color-mix(in oklab, color-mix(in oklab, var(--sand) 84%, var(--sun-deep)) 90%, var(--ink));
  --tw-ease: cubic-bezier(.4, 0, .2, 1);
}
.page-whitening .rich a:hover { color: var(--ink-3); }

/* ---------- Overview: a wide heading, the lead beneath it, the second paragraph set off to the right ---------- */
.page-whitening .tw-intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: var(--space-block); align-items: end; }
.page-whitening .tw-intro__head { grid-column: 1 / span 10; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-whitening .tw-intro__title { max-width: 19ch; }
.page-whitening .tw-intro__lead { grid-column: 1 / span 7; }
.page-whitening .tw-intro__lead .lead { font-size: clamp(1.3rem, 1.95vw, 1.8rem); color: var(--ink); text-wrap: pretty; }
.page-whitening .tw-intro__copy { grid-column: 9 / -1; padding-bottom: .35em; }
.page-whitening .tw-intro__copy p { margin: 0; padding-top: 24px; border-top: 1px solid var(--line); }
/* The honest note: whitening changes natural enamel only */
.page-whitening .tw-note {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 14px;
  padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-strong);
}
.page-whitening .tw-note__label { grid-column: 1 / span 3; grid-row: 1 / span 2; align-self: start; padding-top: .7em; }
.page-whitening .tw-note__text { grid-column: 4 / span 8; margin: 0; font-family: var(--f-display); font-size: var(--fs-lead); font-weight: 300; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.page-whitening .tw-note__more { grid-column: 4 / span 7; max-width: 62ch; margin: 0; color: var(--muted); text-wrap: pretty; }
@media (max-width: 1080px) {
  .page-whitening .tw-intro__head { grid-column: 1 / -1; }
  .page-whitening .tw-intro__lead { grid-column: 1 / span 8; }
  .page-whitening .tw-intro__copy { grid-column: 5 / -1; }
  .page-whitening .tw-note__label { grid-column: 1 / span 4; }
  .page-whitening .tw-note__text, .page-whitening .tw-note__more { grid-column: 5 / -1; }
}
@media (max-width: 900px) {
  .page-whitening .tw-intro__grid { row-gap: 40px; }
  .page-whitening .tw-intro__lead, .page-whitening .tw-intro__copy { grid-column: 1 / -1; }
  .page-whitening .tw-note__label, .page-whitening .tw-note__text, .page-whitening .tw-note__more { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
  .page-whitening .tw-note__label { margin-bottom: 6px; }
}

/* ---------- How it works (ink): the shade guide ---------- */
.page-whitening .tw-works { overflow: hidden; }
.page-whitening .tw-works__head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: clamp(64px, 8vw, 120px); }

.page-whitening .tw-scale {
  --head: 34px;          /* the sampled swatch rides above the bar */
  --bar-h: clamp(76px, 8.2vw, 118px);
}

/* Caption: the direction of the guide, from its stained end to its bright end */
.page-whitening .tw-scale__cap {
  display: flex; align-items: center; gap: 18px; margin: 0 0 16px;
  font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; color: var(--on-ink-muted);
}
.page-whitening .tw-scale__end { white-space: nowrap; }
.page-whitening .tw-scale__end:last-child { color: var(--on-ink); }
.page-whitening .tw-scale__dir { position: relative; flex: 1; height: 1px; background: var(--line-ink-strong); }
.page-whitening .tw-scale__dir::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--on-ink-muted); border-right: 1px solid var(--on-ink-muted); transform: rotate(45deg); transform-origin: 100% 0; }

/* The plate holds the animated numbers. Default (no JS, reduced motion, after reveal): the finished reading. */
.page-whitening .tw-scale__plate {
  --tw-pos: .9875; --tw-reach: 1; --tw-n: 40;
  position: relative; padding-top: var(--head);
  transition: --tw-pos 3.2s var(--tw-ease) .3s, --tw-reach 3.2s var(--tw-ease) .3s, --tw-n 3.2s var(--tw-ease) .3s;
}
.js.ready .page-whitening .tw-scale:not(:has(.tw-scale__trigger.is-visible)) .tw-scale__plate { --tw-pos: .0125; --tw-reach: .025; --tw-n: 1; transition: none; }
/* After the first pass the needle answers the pointer quickly. */
.page-whitening .tw-scale__plate.is-done { transition: --tw-pos .7s var(--ease-out), --tw-n .7s var(--ease-out); }
.page-whitening .tw-scale__trigger { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; pointer-events: none; }

/* The bar: a flat stained ground; the graded steps are developed over it as the needle passes. */
.page-whitening .tw-scale__bar { position: relative; height: var(--bar-h); }
.page-whitening .tw-scale__base,
.page-whitening .tw-scale__dev { position: absolute; inset: 0; }
.page-whitening .tw-scale__base { background: var(--tw-deep); }
.page-whitening .tw-scale__dev { display: flex; clip-path: inset(0 calc((1 - var(--tw-reach)) * 100%) 0 0); }
.page-whitening .tw-scale__dev i {
  flex: 1 1 0; min-width: 0;
  background: color-mix(in oklab, var(--tw-deep), var(--enamel) calc(var(--k) * 2.5641%));
  box-shadow: inset -1px 0 0 var(--ink);
}
.page-whitening .tw-scale__dev i:last-child { box-shadow: none; }

/* The needle of light, with a round swatch of the shade it is passing over */
.page-whitening .tw-scale__marker { position: absolute; top: 0; bottom: 0; left: calc(var(--tw-pos) * 100%); width: 0; pointer-events: none; }
.page-whitening .tw-scale__marker::before {
  content: ""; position: absolute; left: -.75px; top: calc(var(--head) - 12px); bottom: 0; width: 1.5px; background: var(--sun);
}
.page-whitening .tw-scale__chip {
  position: absolute; left: -8px; top: 0; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
  background: color-mix(in oklab, var(--tw-deep), var(--enamel) calc((var(--tw-n) - 1) * 2.5641%));
  box-shadow: 0 0 0 1px var(--sun);
}

/* The process: one sentence per stage, hung from the foot of the guide */
.page-whitening .tw-stages {
  --drop: clamp(48px, 5vw, 76px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.4vw, 56px);
  margin: var(--drop) 0 0; padding: 0; list-style: none;
}
.page-whitening .tw-stage { position: relative; transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--at, 0s); }
.page-whitening .tw-stage::before {
  content: ""; position: absolute; left: 0; top: calc(var(--drop) * -1); height: calc(var(--drop) - 16px); width: 1px;
  background: var(--line-ink-strong); transform-origin: top; transition: transform 1s var(--ease-out) var(--at, 0s);
}
.page-whitening .tw-stage::after {
  content: ""; position: absolute; left: -3.5px; top: calc(var(--drop) * -1 - 3.5px); width: 7px; height: 7px; border-radius: 50%;
  background: var(--sun); box-shadow: 0 0 0 1px var(--sun);
  transition: background-color .6s var(--ease-out) var(--at, 0s), box-shadow .6s var(--ease-out) var(--at, 0s);
}
.js.ready .page-whitening .tw-scale:not(:has(.tw-scale__trigger.is-visible)) .tw-stage { opacity: 0; transform: translateY(16px); transition: none; }
.js.ready .page-whitening .tw-scale:not(:has(.tw-scale__trigger.is-visible)) .tw-stage::before { transform: scaleY(0); transition: none; }
.js.ready .page-whitening .tw-scale:not(:has(.tw-scale__trigger.is-visible)) .tw-stage::after { background-color: var(--ink); box-shadow: 0 0 0 1px var(--on-ink-muted); transition: none; }
.page-whitening .tw-stage__label {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; color: var(--on-ink);
}
.page-whitening .tw-stage__text {
  max-width: 32ch; margin: 0;
  font-family: var(--f-display); font-size: clamp(1.2rem, 1.5vw, 1.42rem); font-weight: 300; line-height: 1.42; letter-spacing: -.005em;
  color: var(--on-ink); text-wrap: balance;
}

@media (max-width: 900px) {
  .page-whitening .tw-stages { grid-template-columns: minmax(0, 1fr); margin-top: 48px; border-top: 1px solid var(--line-ink); }
  .page-whitening .tw-stage { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr); column-gap: 24px; padding: 26px 0 30px; border-bottom: 1px solid var(--line-ink); }
  .page-whitening .tw-stage::before, .page-whitening .tw-stage::after { content: none; }
  .page-whitening .tw-stage__label { align-self: start; margin: .45em 0 0; }
  .page-whitening .tw-stage__text { max-width: 40ch; }
}
@media (max-width: 640px) {
  .page-whitening .tw-scale { --bar-h: 72px; }
  .page-whitening .tw-scale__cap { gap: 12px; }
  .page-whitening .tw-scale__end { white-space: normal; max-width: 13ch; line-height: 1.35; }
  .page-whitening .tw-scale__end:last-child { text-align: right; }
  .page-whitening .tw-scale__dir { min-width: 24px; }
  .page-whitening .tw-scale__end:last-child { margin-left: auto; }
  /* Twenty broader steps read better than forty slivers at this width. */
  .page-whitening .tw-scale__dev i:nth-child(even) { display: none; }
  .page-whitening .tw-scale__dev i:nth-last-child(2) { box-shadow: none; }
  .page-whitening .tw-stage { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 22px 0 26px; }
  .page-whitening .tw-stage__label { margin: 0; }
}

/* ---------- Options: three ways to whiten, under a slim shade strip ---------- */
.page-whitening .tw-options__head { margin-bottom: clamp(40px, 5vw, 72px); }
.page-whitening .tw-options__head .sec-head__intro { text-wrap: pretty; }
.page-whitening .tw-band { position: relative; }
.page-whitening .tw-band__strip {
  display: block; height: 6px;
  box-shadow: inset 0 0 0 1px var(--line);
  background: linear-gradient(90deg,
    var(--tw-deep) 0 10%,
    color-mix(in oklab, var(--tw-deep), var(--enamel) 11.1%) 10% 20%,
    color-mix(in oklab, var(--tw-deep), var(--enamel) 22.2%) 20% 30%,
    color-mix(in oklab, var(--tw-deep), var(--enamel) 33.3%) 30% 40%,
    color-mix(in oklab, var(--tw-deep), var(--enamel) 44.4%) 40% 50%,
    color-mix(in oklab, var(--tw-deep), var(--enamel) 55.6%) 50% 60%,
    color-mix(in oklab, var(--tw-deep), var(--enamel) 66.7%) 60% 70%,
    color-mix(in oklab, var(--tw-deep), var(--enamel) 77.8%) 70% 80%,
    color-mix(in oklab, var(--tw-deep), var(--enamel) 88.9%) 80% 90%,
    var(--enamel) 90% 100%);
}
.page-whitening .tw-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
/* Each option spans three shared rows (title, text, facts), so the facts line up across the columns. */
.page-whitening .tw-opt { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 18px; align-items: start; padding: clamp(32px, 3.4vw, 48px) clamp(20px, 2.6vw, 40px) clamp(36px, 4vw, 56px); }
.page-whitening .tw-opt:first-child { padding-left: 0; }
.page-whitening .tw-opt:last-child { padding-right: 0; }
.page-whitening .tw-opt + .tw-opt { border-left: 1px solid var(--line); }
.page-whitening .tw-opt__title { font-family: var(--f-display); font-size: clamp(1.7rem, 2.5vw, 2.4rem); font-weight: 300; line-height: 1.05; letter-spacing: -.022em; }
.page-whitening .tw-opt__text { max-width: 36ch; margin: 0; color: var(--muted); text-wrap: pretty; }
.page-whitening .tw-opt__facts { width: 100%; margin: 0; padding-top: 8px; }
.page-whitening .tw-opt__facts > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.page-whitening .tw-opt__facts dt { padding-top: .3em; font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; color: var(--muted); }
.page-whitening .tw-opt__facts dd { margin: 0; font-size: .95rem; color: var(--ink); }
.page-whitening .tw-options__note { max-width: 46ch; margin: clamp(28px, 3vw, 40px) 0 0; font-family: var(--f-display); font-style: italic; font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-weight: 300; line-height: 1.4; color: var(--ink-3); }
@media (max-width: 900px) {
  .page-whitening .tw-opts { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .page-whitening .tw-opt, .page-whitening .tw-opt:first-child, .page-whitening .tw-opt:last-child { padding: 28px 0 32px; border-bottom: 1px solid var(--line); }
  .page-whitening .tw-opt + .tw-opt { border-left: 0; }
  .page-whitening .tw-opt__text { max-width: 52ch; }
}

/* ---------- Step by step: sticky title and a note on sensitivity, beside the numbered steps ---------- */
.page-whitening .tw-steps__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-whitening .tw-steps__title { max-width: 12ch; }
.page-whitening .tw-comfort { max-width: 38ch; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.page-whitening .tw-comfort__label { margin: 0 0 10px; font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--sun-deep); }
.page-whitening .tw-comfort__text { margin: 0; color: var(--muted); text-wrap: pretty; }
.page-whitening .tw-steps__list .points__title { font-size: clamp(1.3rem, 1.8vw, 1.65rem); font-weight: 300; letter-spacing: -.01em; }
.page-whitening .tw-steps__list .points__text { max-width: 54ch; }

/* ---------- Who treats you: the portrait in an arch beside her credentials; then cost and insurance ---------- */
.page-whitening .tw-team__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 56px; align-items: center; }
.page-whitening .tw-team__portrait { grid-column: 2 / span 3; margin: 14px; }
.page-whitening .tw-team__img { --ar: .8; background: var(--porcelain-2); }
.page-whitening .tw-team__img img { object-position: 50% 16%; }
.page-whitening .tw-team__body { grid-column: 6 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.page-whitening .tw-team__title { max-width: 14ch; margin-top: 4px; }
.page-whitening .tw-team__copy { max-width: 56ch; }
.page-whitening .tw-team__copy p:first-child { color: var(--ink); }

.page-whitening .tw-cost {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 28px;
  margin-top: var(--space-section); padding-top: clamp(32px, 3.4vw, 48px); border-top: 1px solid var(--line-strong);
}
.page-whitening .tw-cost__head { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.page-whitening .tw-cost__title { max-width: 12ch; font-family: var(--f-display); font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 300; line-height: 1.06; letter-spacing: -.022em; }
.page-whitening .tw-cost__body { grid-column: 6 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-whitening .tw-cost__body .rich p { margin: 0; }
.page-whitening .tw-cost__ledger { width: 100%; }

@media (max-width: 1080px) {
  .page-whitening .tw-team__portrait { grid-column: 1 / span 4; }
  .page-whitening .tw-cost__head { grid-column: 1 / span 5; }
  .page-whitening .tw-cost__body { grid-column: 7 / -1; }
}
@media (max-width: 900px) {
  .page-whitening .tw-team__portrait { grid-column: 1 / -1; width: min(300px, calc(100% - 28px)); }
  .page-whitening .tw-team__body, .page-whitening .tw-cost__head, .page-whitening .tw-cost__body { grid-column: 1 / -1; }
  .page-whitening .tw-team__title, .page-whitening .tw-cost__title { max-width: none; }
}

/* ---------- FAQ ---------- */
.page-whitening .tw-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: start; }
.page-whitening .tw-faq__head { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-whitening .tw-faq__title { max-width: 11ch; }
.page-whitening .tw-faq__list { grid-column: 6 / -1; margin-top: calc(var(--fs-label) * 1.2 + 28px); }
.page-whitening .accordion__panel a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .3s, text-decoration-color .3s; }
.page-whitening .accordion__panel a:hover { color: var(--ink-3); text-decoration-color: var(--ink-3); }
@media (max-width: 900px) {
  .page-whitening .tw-faq__head, .page-whitening .tw-faq__list { grid-column: 1 / -1; }
  .page-whitening .tw-faq__list { margin-top: 0; }
  .page-whitening .tw-steps__title, .page-whitening .tw-faq__title { max-width: none; }
}