/* ---- teeth-whitening.html — page-specific styles (kept out of styles.css) ---- */

/* nav: mark Services as the active link on this page */
.nav__links a.is-active{color:var(--blue)}

/* ---- glow-up band ---- */
.whiten-glow__band{background:var(--green);border-radius:28px;padding:clamp(2.2rem,4vw,3.6rem);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.whiten-glow__copy h2{color:var(--green-light);max-width:22ch;margin-bottom:1.6rem}
.whiten-glow__copy h2 em{color:var(--lime);font-style:italic}
.whiten-glow__media{margin:0;max-width:260px;justify-self:center}
.whiten-glow__media img{width:100%;display:block}
.whiten-glow__media figcaption{color:#fff;font-size:.95rem;margin-top:1rem;text-align:center}

/* ---- process ---- */
.whiten-process__head p{font-size:1.05rem;margin-top:.8rem;max-width:60ch}
.whiten-process__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.whiten-step{border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.8rem;background:#fff}
.whiten-step__num{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:.5rem;background:var(--green-pale);color:var(--green);font-family:var(--sans);font-weight:700;font-size:1.05rem;margin-bottom:1.2rem}
.whiten-step h3{font-family:var(--sans);color:var(--ink);font-weight:400;font-size:1.4rem;margin-bottom:.7rem}
.whiten-step p{font-size:.96rem}

/* ---- results / before-after ---- */
.whiten-results__inner{max-width:820px}
.whiten-compare{position:relative;height:28rem;border-radius:var(--radius);overflow:hidden;touch-action:none;cursor:ew-resize;user-select:none}
.whiten-compare__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.whiten-compare__after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.whiten-compare__divider{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 12px rgba(0,0,0,.25)}
.whiten-compare__handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}

/* ---- pricing band ---- */
.whiten-pricing__panel{background:var(--green-light);border-radius:28px;padding:clamp(2.2rem,4vw,3.6rem);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.whiten-pricing__copy h2{color:var(--ink);max-width:20ch;margin-bottom:.7rem}
.whiten-pricing__copy p{max-width:44ch;font-size:1rem;color:var(--ink);margin-bottom:1.6rem}
.whiten-pricing__card{position:relative;background:#fff;border-radius:var(--radius);padding:2.4rem 2rem 2rem;max-width:28rem;width:100%;justify-self:center}
.whiten-pricing__card h3{font-family:var(--sans);color:var(--ink);font-weight:500;font-size:1.35rem;margin-bottom:.4rem}
.whiten-pricing__ribbon{position:absolute;top:0;right:0;background:var(--lime);color:var(--green);font-family:var(--sans);font-weight:700;font-size:1.15rem;padding:.5rem 1rem;border-radius:999px 0 0 999px;transform:translateY(-50%)}
.whiten-pricing__fine{color:var(--muted);font-size:.9rem}

/* ---- responsive ---- */
@media(max-width:900px){
  .whiten-glow__band,
  .whiten-pricing__panel{grid-template-columns:1fr}
  .whiten-process__grid{grid-template-columns:1fr}
  .whiten-compare{height:20rem}
}