/* =======================================================================
   Winchester Dental — global stylesheet
   Companion to Tailwind (Play CDN). Holds design tokens, base type,
   reusable component classes, the photo-placeholder system, and motion.
   ======================================================================= */

:root {
  --cream:#F7F3EC; --sand:#EFE8DA; --line:#E7E1D6;
  --ink:#17302B; --ink-soft:#4C5E59;
  --teal-700:#1A4A43; --teal-600:#205A52; --teal-500:#2A6E64;
  --teal-400:#3E867C; --teal-200:#A7CBC4; --teal-50:#EAF3F1;
  --sage-500:#688672; --sage-300:#A9C0B3; --sage-100:#E5ECE7;
  --gold:#C18B3C; --ember:#B23A2E;
  --shadow-card:0 1px 2px rgba(23,48,43,.04),0 14px 36px -14px rgba(23,48,43,.16);
  --radius:1.25rem;
  --header-h:84px;
}

/* ---------- base ---------- */
*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); overflow-x:clip; }
body{
  background:var(--cream); color:var(--ink);
  font-family:'Figtree',system-ui,sans-serif; line-height:1.65;
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

h1,h2,h3,h4,.font-display{ font-family:'Fraunces',Georgia,serif; }
h1,h2,h3{ letter-spacing:-0.015em; line-height:1.08; color:var(--ink); }
::selection{ background:var(--teal-200); color:var(--teal-900,#0F2D29); }

a{ color:inherit; }
img{ max-width:100%; display:block; }

/* focus visibility — WCAG */
:focus-visible{ outline:3px solid var(--teal-400); outline-offset:2px; border-radius:6px; }
.btn:focus-visible{ outline-offset:3px; }

/* ---------- utilities ---------- */
.eyebrow{
  font-family:'Figtree',sans-serif; font-weight:600; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--teal-500);
}
.eyebrow--light{ color:var(--teal-200); }
.lede{ font-size:1.15rem; color:var(--ink-soft); line-height:1.7; }
.measure{ max-width:62ch; }
.divider-dot::before{ content:"•"; margin:0 .6rem; color:var(--sage-300); }

/* gradient text accent */
.text-gradient{
  background:linear-gradient(100deg,var(--teal-600),var(--sage-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; font-size:1rem; line-height:1; cursor:pointer;
  padding:1rem 1.6rem; border-radius:999px; border:1.5px solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
  text-decoration:none; white-space:nowrap;
}
.btn svg{ width:1.15rem; height:1.15rem; flex:none; }
.btn-primary{ background:var(--teal-700); color:#fff; box-shadow:0 10px 24px -12px rgba(26,74,67,.7); }
.btn-primary:hover{ background:var(--teal-800,#143A35); box-shadow:0 16px 30px -12px rgba(26,74,67,.55); }
.btn-gold{ background:var(--gold); color:#2A1E07; box-shadow:0 10px 24px -12px rgba(193,139,60,.7); }
.btn-gold:hover{ background:#A6742C; color:#fff; }
.btn-ember{ background:var(--ember); color:#fff; box-shadow:0 12px 28px -12px rgba(178,58,46,.7); }
.btn-ember:hover{ background:#962E24; }
.btn-outline{ background:transparent; color:var(--teal-700); border-color:var(--teal-200); }
.btn-outline:hover{ border-color:var(--teal-500); background:var(--teal-50); }
.btn-ghost-light{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.2); }
.btn-sm{ padding:.7rem 1.15rem; font-size:.92rem; }
.btn-block{ width:100%; }

/* ---------- cards & surfaces ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
/* translucent "glass" card for use ON the dark teal bands (light text) —
   intentionally NOT .card, so it stays see-through over teal */
.glass{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
}

/* ---------- before / after comparison slider ----------
   Drag the handle to wipe between the BEFORE and AFTER layers.
   To use real photos: replace each .ba__ph div with
   <img class="ba__photo" src="..." alt="Before/After"> (keep the wrappers). */
.ba{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-card); --pos:50%;
  -webkit-user-select:none; user-select:none; touch-action:pan-y;
}
.ba__img{ position:absolute; inset:0; }
.ba__before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__ph{ position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-weight:600; color:#fff; padding:1rem; }
.ba__ph--before{ background:linear-gradient(135deg,#7f8f88,#aab4ad); }
.ba__ph--after{ background:linear-gradient(135deg,var(--teal-600),var(--gold)); }
.ba__tag{ position:absolute; bottom:.7rem; z-index:3; font-size:.7rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(15,45,41,.6);
  backdrop-filter:blur(3px); padding:.3rem .6rem; border-radius:.5rem; }
.ba__tag--before{ left:.7rem; } .ba__tag--after{ right:.7rem; }
.ba__divider{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px;
  background:#fff; transform:translateX(-1px); z-index:4; pointer-events:none;
  box-shadow:0 0 6px rgba(0,0,0,.25); }
.ba__handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2.5rem; height:2.5rem; border-radius:50%; background:#fff; color:var(--teal-700);
  display:grid; place-items:center; box-shadow:0 4px 16px rgba(0,0,0,.28); }
.ba__handle svg{ width:1.25rem; height:1.25rem; }
.ba__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize; z-index:5; }
.ba:focus-within .ba__handle{ outline:3px solid var(--teal-400); outline-offset:3px; }
.card-hover{ transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.card-hover:hover{ transform:translateY(-4px); box-shadow:0 28px 60px -24px rgba(23,48,43,.28); border-color:var(--teal-200); }
.chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .85rem;
  border-radius:999px; background:#fff; border:1px solid var(--line);
  font-size:.85rem; font-weight:600; color:var(--teal-700);
}
.chip svg{ width:1rem; height:1rem; color:var(--gold); }

/* section rhythm */
.section{ padding-block:clamp(3.5rem,7vw,7rem); }
.band{ background:var(--sand); }
.band-teal{ background:var(--teal-800,#143A35); color:#fff; }
.band-sage{ background:var(--sage-100); }

/* ---------- photo system ----------
   .ph is a sizing/frame wrapper. Real <img> is injected by site.js from the
   central image map (data-img="key"). The gradient shows only until the photo
   loads (or as a graceful fallback). Swap photos in one place: assets/js/site.js. */
.ph{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--teal-700), var(--sage-500) 80%);
  color:#fff; isolation:isolate;
}
.ph > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:0; transition:opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.ph > img.is-loaded{ opacity:1; }
/* gentle zoom on hover for interactive image cards */
.card-hover:hover .ph > img, .ph.card-hover:hover > img{ transform:scale(1.045); }
.ph > :not(img){ position:relative; z-index:2; }      /* chips/badges sit above photo */
.ph--scrim::after{                                     /* legibility scrim for overlaid text */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(15,45,41,.6), rgba(15,45,41,.05) 55%);
}
.ph--scrim-soft::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, rgba(15,45,41,.35), transparent 60%);
}
/* tone fallbacks (pre-load color only) */
.ph--sage{ background:linear-gradient(135deg,var(--sage-500),var(--sage-300)); }
.ph--cream{ background:linear-gradient(135deg,var(--sand),#fff); }
.ph--gold{ background:linear-gradient(135deg,var(--gold),#E7C892); }
.ph--dark{ background:linear-gradient(135deg,var(--teal-800,#143A35),var(--teal-600)); }
/* legacy label — hidden now that real photos render */
.ph__label{ display:none !important; }
.ph__ratio{ width:100%; }
.ratio-43{ aspect-ratio:4/3; } .ratio-11{ aspect-ratio:1/1; }
.ratio-32{ aspect-ratio:3/2; } .ratio-169{ aspect-ratio:16/9; }
.ratio-45{ aspect-ratio:4/5; } .ratio-219{ aspect-ratio:21/9; }

/* ---------- stat / trust ---------- */
.stat-num{ font-family:'Fraunces',serif; font-weight:600; line-height:1; }
.stars{ display:inline-flex; gap:2px; color:var(--gold); }
.stars svg{ width:1.05rem; height:1.05rem; }

/* ---------- FAQ accordion ---------- */
.faq{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; text-align:left; padding:1.35rem 0; cursor:pointer;
  font-family:'Fraunces',serif; font-size:1.12rem; color:var(--ink); background:none; border:0;
}
.faq__icon{ flex:none; transition:transform .3s ease; color:var(--teal-500); }
.faq[open] .faq__icon{ transform:rotate(45deg); }
.faq__a{ overflow:hidden; max-height:0; transition:max-height .35s ease,padding .35s ease; color:var(--ink-soft); }
.faq[open] .faq__a{ max-height:600px; padding-bottom:1.35rem; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease;
  background:rgba(247,243,236,.85); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{ background:rgba(247,243,236,.96); box-shadow:0 6px 24px -16px rgba(23,48,43,.4); border-bottom-color:var(--line); }
.nav-link{ position:relative; font-weight:500; color:var(--ink); padding:.4rem 0; transition:color .2s ease; }
.nav-link:hover,.nav-link[aria-current="page"]{ color:var(--teal-600); }
.nav-link[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold); border-radius:2px;
}
.utility-bar a:hover{ color:#fff; }

/* dropdown */
.has-dd > .dd{ opacity:0; visibility:hidden; transform:translateY(8px); transition:all .2s ease; }
.has-dd:hover > .dd, .has-dd:focus-within > .dd{ opacity:1; visibility:visible; transform:translateY(0); }

/* mobile drawer */
.drawer{ transition:transform .35s cubic-bezier(.4,0,.2,1); }
.drawer[data-open="false"]{ transform:translateX(100%); }
.drawer[data-open="true"]{ transform:translateX(0); }
.drawer-backdrop{ transition:opacity .3s ease; }

/* ---------- booking placeholder ---------- */
.booking-shell{
  border:1.5px dashed var(--teal-200); border-radius:1.5rem; background:#fff;
  position:relative; overflow:hidden;
}
.booking-pulse{ animation:bk 1.6s ease-in-out infinite; }
@keyframes bk{ 0%,100%{ opacity:.35 } 50%{ opacity:.9 } }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.08s } .reveal-delay-2{ transition-delay:.16s }
.reveal-delay-3{ transition-delay:.24s } .reveal-delay-4{ transition-delay:.32s }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .booking-pulse{ animation:none; }
}

/* marquee (logos / reassurance) */
.marquee{ display:flex; gap:3rem; width:max-content; animation:marq 32s linear infinite; }
.marquee-wrap:hover .marquee{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee{ animation:none; } }

/* prose helper for long-form pages */
.prose-warm p{ color:var(--ink-soft); margin-block:1rem; }
.prose-warm h2{ margin-top:2.5rem; }
.prose-warm h3{ margin-top:1.75rem; margin-bottom:.5rem; font-size:1.3rem; }
.prose-warm ul{ margin:1rem 0; padding-left:0; list-style:none; }
.prose-warm ul li{ position:relative; padding-left:1.9rem; margin:.6rem 0; color:var(--ink-soft); }
.prose-warm ul li::before{
  content:""; position:absolute; left:0; top:.45rem; width:1.1rem; height:1.1rem;
  background:var(--teal-50); border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--teal-400);
}

/* =======================================================================
   REFINEMENTS — tasteful polish layer (v2)
   ======================================================================= */

/* --- display type --- */
h1,h2,h3,h4,.font-display{ font-optical-sizing:auto; }
h1{ letter-spacing:-0.025em; }
h2{ letter-spacing:-0.02em; }
.lede{ font-size:1.18rem; }
@media (min-width:640px){ .lede{ font-size:1.24rem; } }

/* --- eyebrow gets a short accent rule --- */
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; }
.eyebrow::before{
  content:""; width:1.75rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent); flex:none;
}
.eyebrow--light::before{ background:linear-gradient(90deg,var(--gold),transparent); }
.eyebrow.text-center, .text-center .eyebrow{ justify-content:center; }

/* --- band depth (no longer flat) --- */
.band{ background:
  radial-gradient(60% 80% at 85% -10%, rgba(104,134,114,.10), transparent 60%),
  var(--sand); }
.band-sage{ background:
  radial-gradient(70% 90% at 10% 0%, rgba(255,255,255,.6), transparent 55%),
  var(--sage-100); }
.band-teal{ position:relative; background:
  radial-gradient(80% 120% at 100% 0%, rgba(62,134,124,.45), transparent 55%),
  radial-gradient(70% 100% at 0% 100%, rgba(104,134,114,.25), transparent 55%),
  var(--teal-800,#143A35); }
.band-teal::before{ /* faint dot grid for texture */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px);
  background-size:22px 22px;
}
/* lift real content above the ::before texture — but DON'T clobber decorative
   absolutely-positioned children (blur blobs), or they fall into normal flow */
.band-teal > *:not(.absolute){ position:relative; z-index:1; }

/* --- button micro-interactions --- */
.btn{ position:relative; }
.btn-primary:hover,.btn-gold:hover,.btn-ember:hover{ transform:translateY(-2px); }
.btn-primary:active,.btn-gold:active,.btn-ember:active{ transform:translateY(0); }
/* arrow that nudges on hover (wrap trailing arrow in .arrow) */
.btn .arrow, .lnk .arrow{ transition:transform .25s ease; }
.btn:hover .arrow, .lnk:hover .arrow{ transform:translateX(4px); }

/* text link with arrow */
.lnk{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--teal-600); }
.lnk:hover{ color:var(--teal-700); }

/* --- card sheen refinement --- */
.card-hover{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }

/* --- count-up: hold layout while animating --- */
.stat-num[data-count]{ font-variant-numeric:tabular-nums; }

/* --- back-to-top --- */
#toTop{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:55;
  width:3rem; height:3rem; border-radius:999px; display:grid; place-items:center;
  background:var(--teal-700); color:#fff; box-shadow:var(--shadow-card);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background-color .2s ease;
  border:0; cursor:pointer;
}
#toTop.show{ opacity:1; transform:none; pointer-events:auto; }
#toTop:hover{ background:var(--teal-800,#143A35); transform:translateY(-2px); }
#toTop svg{ width:1.3rem; height:1.3rem; }
@media (max-width:480px){ #toTop{ right:.8rem; bottom:.8rem; width:2.6rem; height:2.6rem; } }

/* --- richer hero scrim for overlaid chips --- */
.ph--scrim-soft::after{ background:linear-gradient(120deg, rgba(15,45,41,.28), transparent 62%); }

@media (prefers-reduced-motion:reduce){
  .btn-primary:hover,.btn-gold:hover,.btn-ember:hover,#toTop:hover{ transform:none; }
  .card-hover:hover .ph > img, .ph.card-hover:hover > img{ transform:none; }
}

/* =======================================================================
   SMILE PLAN — membership pricing
   ======================================================================= */

/* annual/monthly segmented toggle */
.seg{ display:inline-flex; padding:.3rem; border-radius:999px; background:var(--sage-100);
  border:1px solid var(--line); gap:.25rem; }
.seg__btn{ border:0; background:transparent; cursor:pointer; font-weight:600; font-size:.95rem;
  color:var(--ink-soft); padding:.6rem 1.2rem; border-radius:999px; display:inline-flex; align-items:center; gap:.5rem;
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease; }
.seg__btn[aria-selected="true"]{ background:#fff; color:var(--teal-700); box-shadow:var(--shadow-card); }
.seg__save{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:#2A1E07; background:var(--gold); padding:.15rem .5rem; border-radius:999px; }

/* plan cards */
.plan{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-card); padding:2.1rem 1.8rem;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.plan:hover{ transform:translateY(-4px); box-shadow:0 28px 60px -24px rgba(23,48,43,.28); border-color:var(--teal-200); }
.plan--featured{ border-color:var(--teal-400); box-shadow:0 30px 70px -28px rgba(26,74,67,.42); }
@media (min-width:1024px){
  .plan--featured{ transform:scale(1.035); }
  .plan--featured:hover{ transform:scale(1.035) translateY(-4px); }
}
.plan__badge{ position:absolute; top:-.85rem; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--gold); color:#2A1E07; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:.4rem .9rem; border-radius:999px; box-shadow:0 8px 20px -8px rgba(193,139,60,.7); }
.plan__name{ font-family:'Fraunces',serif; font-size:1.5rem; color:var(--ink); }
.plan__desc{ color:var(--ink-soft); font-size:.9rem; margin-top:.35rem; min-height:2.4rem; }
.plan__price{ display:flex; align-items:baseline; gap:.4rem; margin-top:1.1rem; }
.plan__amt{ font-family:'Fraunces',serif; font-weight:600; font-size:2.9rem; line-height:1; color:var(--teal-700); }
.plan__per{ color:var(--ink-soft); font-size:.98rem; }
.plan__alt{ color:var(--ink-soft); font-size:.88rem; margin-top:.4rem; min-height:1.2rem; }
.plan__note{ color:var(--teal-500); font-size:.74rem; margin-top:.25rem; font-weight:600; }
.plan__rule{ border:0; border-top:1px solid var(--line); margin:1.35rem 0 0; }
.plan__incl{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--teal-500); margin-top:1.2rem; }
.plan__features{ list-style:none; padding:0; margin:.8rem 0 0; display:grid; gap:.75rem; }
.plan__features li{ position:relative; padding-left:1.9rem; color:var(--ink-soft); font-size:.96rem; line-height:1.5; }
.plan__features li svg{ position:absolute; left:0; top:.15rem; width:1.2rem; height:1.2rem; color:var(--teal-500); }
.plan__cta{ margin-top:auto; padding-top:1.75rem; }

/* billing-cycle price swap (JS sets textContent; these just show/hide the alt lines) */
.price-monthly{ display:none; }
[data-cycle="monthly"] .price-annual{ display:none; }
[data-cycle="monthly"] .price-monthly{ display:block; }