/* ============================================================
   Esteem Dental Clinic — All-on-X landing page
   Structure and motion from the Dentistry X Framer template.
   Palette and typography from the Esteem Brand Guide.

   Brand Guide → tokens
     primary    f8f4eb  f8f4ee  f3eeea  eeebe6
     supplement f5efe6  f2ece3  d4c1b1  c2b19c
     text/head  865543  8b5640  866042  7e5f4c  977465  ffffff
     headline   Prata      (Tan Angleton is licensed — see README)
     body       Inter / Montserrat
   ============================================================ */

:root{
  /* grounds */
  --cream:     #f8f4eb;   /* page */
  --cream-2:   #f3eeea;   /* alternating sections */
  --cream-3:   #eeebe6;
  --surface:   #f8f4ee;   /* cards on tinted sections */
  --surface-2: #f5efe6;
  --sand:      #d4c1b1;
  --sand-2:    #c2b19c;

  /* ---- ink. Headings and body read in near-black against the cream; the
     browns are now an accent, used to pick out the words that matter. ---- */
  --ink:       #16120f;   /* headings */
  --ink-body:  #35302b;   /* body copy */
  --ink-soft:  #6a625b;   /* captions, small secondary labels */
  --ink-deep:  #0f0c0a;   /* the dark block at the foot of the page */

  --brown:      #865543;  /* the accent: highlighted words, actions */
  --brown-alt:  #8b5640;
  --brown-mid:  #866042;
  --brown-deep: #7e5f4c;
  --muted:      #6a625b;  /* kept as an alias so older rules stay readable */

  --line: #e6ddd2;        /* derived hairline, between eeebe6 and d4c1b1 */

  --container: 1180px;
  --gutter: 20px;

  /* spring(stiffness 200, damping 40, mass 1) ≈ this tween */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .9s;

  /* cards rest on a soft shadow and lift a little further on hover */
  --lift:   0 2px 4px rgba(134,85,67,.045), 0 12px 26px rgba(134,85,67,.07);
  --lift-hi:0 5px 11px rgba(134,85,67,.06),  0 24px 48px rgba(134,85,67,.14);
}

/* Lenis (smooth scrolling) — required by the library */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

*,*::before,*::after{ box-sizing:border-box; }
/* clip (not hidden) — keeps the pinned tracks from widening the page
   without creating a scroll container that would break position:sticky */
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  overflow-x:clip;
  background:var(--cream);
  color:var(--ink-body);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:24px; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- Type scale: template values exactly ---------- */
/* Prata is a single-weight display serif, so headings stay at 400 and
   lose the tight tracking the sans-serif template used. */
h1,h2,h3,h4{
  margin:0; color:var(--ink);
  font-family:'Prata',Georgia,serif; font-weight:400;
  letter-spacing:-.005em;
}
h1{ font-size:66px; line-height:1.12; }
h2{ font-size:42px; line-height:1.2; }
h3{ font-size:23px; line-height:1.3; }
h4{ font-size:19px; line-height:1.35; }
p{ margin:0; }

/* ============================================================
   EMPHASIS
   The page is educational, so the eye needs somewhere to land.
   Three levels, used sparingly:
     .hl   a word or phrase lifted into the brand brown
     em    a quieter aside, in the sans italic (Prata has no italic,
           so mixing in Inter is both honest and a deliberate contrast)
     .lede the one sentence per section that must be read
   ============================================================ */
.hl{ color:var(--brown); }
h1 .hl,h2 .hl,h3 .hl,h4 .hl{ font-style:normal; }
strong,b{ font-weight:600; color:var(--brown); }
em,i,.em{
  font-family:'Inter',system-ui,sans-serif; font-style:italic;
  font-weight:400; letter-spacing:0;
}
/* inside a heading the italic stays in Prata - one family per title */
h1 em,h2 em,h3 em,h4 em{
  font-family:'Prata',Georgia,serif; font-style:italic;
  font-size:1em; color:var(--brown); letter-spacing:-.01em;
}
.lede{ font-size:19px; line-height:30px; color:var(--ink); }
.lede strong{ font-weight:600; }

.nb{ white-space:nowrap; }
.mono{ font-family:'Inter',system-ui,sans-serif; letter-spacing:0; font-weight:600;
  font-variant-numeric:tabular-nums; }

/* eyebrow pill — template: radius 1000px, 12-13px */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  align-self:flex-start; width:fit-content; white-space:nowrap;
  font-size:13px; line-height:1; font-weight:600;
  color:var(--cream); background:var(--brown);
  border:0; border-radius:1000px;
  padding:10px 18px;
}
.center .eyebrow{ align-self:center; }
.eyebrow.light{ color:var(--ink-deep); background:#fff; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
section{ padding:100px 0; position:relative; background:var(--cream); }
section.tint{ background:var(--cream-2); }
/* The section head the client liked: the big line on the left, a short note
   set small on the right, sitting on the same baseline. Used everywhere now. */
.head{ display:flex; flex-direction:column; gap:20px; max-width:none; min-width:0; }
.head h2{ font-size:46px; line-height:1.14; }
.head.center{ align-items:center; text-align:center; margin-inline:auto; }
.head-row{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);
  align-items:end; gap:56px;
}

/* ---------- Buttons: template h48, radius 30px, icon circle LEFT ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:8px 24px 8px 8px;
  border-radius:30px; border:1px solid transparent;
  font-size:14px; font-weight:500; cursor:pointer;
  transition:transform .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn i{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%;
  display:grid; place-items:center; font-style:normal; font-size:13px;
  transition:transform .4s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:hover i{ transform:rotate(45deg); }
.btn-primary{ background:var(--brown); color:#fff; }
.btn-primary i{ background:rgba(255,255,255,.2); color:#fff; }
.btn-primary:hover{ background:var(--brown-deep); }
.btn-light{ background:var(--cream-3); color:var(--ink); border-color:transparent; }
.btn-light i{ background:var(--brown); color:#fff; }
.btn-onDark{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.22); backdrop-filter:blur(8px); }
.btn-onDark i{ background:#fff; color:var(--brown); }

/* ============================================================
   NAV
   ============================================================ */
.nav-wrap{
  /* no transform here: a transformed ancestor would become the containing
     block for the position:fixed mobile overlay and shrink it to the bar */
  position:fixed; top:-1px; left:0; right:0; width:100%; z-index:50;
}
.nav{
  height:80px; display:flex; align-items:center;
  position:relative; z-index:46;      /* above the mobile overlay (z-45) */
  transform:translateY(0); will-change:transform;
  transition:transform .45s var(--ease), background-color .45s var(--ease), backdrop-filter .45s var(--ease);
}
.nav-wrap.hidden .nav{ transform:translateY(-100px); }
.nav-wrap.scrolled .nav{
  background:rgba(248,244,235,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:block; line-height:1; }
/* The lockup is deliberately not scoped to .brand - the footer card uses
   the same mark, "dental clinic" stacked under "esteem" on its own rule.
   "DENTAL CLINIC" is capped, as in the clinic's logo file. Caps are wider
   per letter, so at the artwork's own tracking they would have to be set
   tiny to keep the artwork's width; the tracking is pulled in instead and
   the line runs the full width of the rule, which is the width of
   "esteem". */
.mark{ display:block; text-align:center; }
.brand .mark{ color:var(--brown); transition:color .45s var(--ease); }
.mark .n{
  display:block; font-family:'Prata',Georgia,serif; font-size:26px; line-height:.51;
  letter-spacing:.149em; text-indent:.149em; padding-bottom:7px;
  border-bottom:1px solid currentColor;
}
.mark .s{
  display:block; font-family:'Inter',sans-serif; font-size:9.63px; line-height:1.4;
  letter-spacing:.32em; text-indent:.32em; padding-top:6px; font-weight:400;
  text-transform:uppercase;
}

.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:14px; color:var(--ink-body); position:relative; padding:4px 0; transition:color .45s var(--ease); }
.nav-wrap.scrolled .nav-links a{ color:var(--ink); }
.nav-links a:hover{ color:var(--brown); }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:currentColor; transition:width .4s var(--ease); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:18px; }
/* the client's own header CTA: a rule under the words, not a pill */
.nav-link-cta{
  display:inline-flex; align-items:center; gap:20px;
  font-size:13px; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--brown); padding-bottom:9px;
  transition:gap .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.nav-link-cta .arr{ font-size:17px; font-weight:400; line-height:1; transition:transform .4s var(--ease); }
.nav-link-cta:hover{ gap:26px; color:var(--brown-deep); border-color:var(--brown); }
.nav-link-cta:hover .arr{ transform:translate(3px,3px); }
/* Menu toggle: a hamburger that becomes a smile when the menu opens.
   No background or border — just the strokes. */
.burger{
  display:none;
  width:44px; height:44px; flex:0 0 44px;
  padding:0; border:0; background:none; cursor:pointer;
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.nav-wrap.scrolled .burger{ color:var(--ink); }
.nav-wrap.open .burger{ color:#fff; }
.burger svg{ width:28px; height:28px; display:block; margin:0 auto; overflow:visible; }

.burger .bars path,
.burger .grin path{
  transition:opacity .3s var(--ease), transform .45s var(--ease), stroke-dashoffset .5s var(--ease);
  transform-origin:14px 14px;
}
/* closed: three bars */
.burger .grin{ opacity:0; }
.burger .grin .arc{ stroke-dasharray:34; stroke-dashoffset:34; }
.burger .grin .tooth{ opacity:0; }

/* open: bars fold away, the mouth draws itself into a smile */
.nav-wrap.open .burger .bars path:nth-child(1){ opacity:0; transform:translateY(5px); }
.nav-wrap.open .burger .bars path:nth-child(2){ opacity:0; }
.nav-wrap.open .burger .bars path:nth-child(3){ opacity:0; transform:translateY(-5px); }
.nav-wrap.open .burger .grin{ opacity:1; }
.nav-wrap.open .burger .grin .arc{ stroke-dashoffset:0; transition-delay:.1s; }
.nav-wrap.open .burger .grin .tooth{ opacity:1; transition-delay:.34s; }

.mobile-panel{
  position:fixed; inset:0;
  background:var(--brown);
  padding:96px var(--gutter) 32px;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  z-index:45;
  overflow-y:auto;
}
.nav-wrap.open .mobile-panel{ opacity:1; transform:none; pointer-events:auto; }
.mobile-panel a:not(.btn){
  font-size:19px; line-height:1.2; color:#fff;
  padding:17px 0; border-bottom:1px solid rgba(255,255,255,.12);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.mobile-panel a:not(.btn):hover{ padding-left:6px; color:var(--brown-soft); }
.mobile-panel a.btn{
  margin-top:28px; justify-content:center;
  border-bottom:0; padding:0 26px; font-size:15px; height:52px;
}
/* while the overlay is open the bar sits on top of it, so invert the bar */
.nav-wrap.open .nav{ background:transparent; backdrop-filter:none; box-shadow:none; }
.nav-wrap.open .brand .mark{ color:#fff; }

/* ============================================================
   HERO — light split layout. The brand is cream, and the client's
   clinical photography is never tinted or darkened, so the headline
   sits beside the image rather than on top of it.
   ============================================================ */
.hero{ padding:150px 0 90px; background:var(--cream); position:relative; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.hero-left{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.hero h1{ max-width:13ch; }
.hero-body{ font-size:18px; line-height:30px; color:var(--ink-body); max-width:54ch; }
.hero-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.hero-tabs span{
  font-size:13px; line-height:1; font-weight:500; color:var(--ink-body);
  padding:11px 16px; border-radius:1000px;
  border:0; background:var(--cream-3);
}
.hero-media{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3; background:var(--cream-3); }
.hero-media video{ width:100%; height:100%; object-fit:cover; display:block; }

/* the keyword line inside the H1 — same heading, plain type */
.h1-main{ display:block; }
/* the second half of the client's headline, set smaller and in the sans so the
   first half carries the weight. Still inside the <h1>. */
.h1-sub{
  display:block; margin-top:20px; max-width:30ch;
  font-family:'Inter',system-ui,sans-serif; font-size:21px; line-height:31px;
  font-weight:400; letter-spacing:-.005em; color:var(--ink-body);
}
.h1-sub strong{ font-weight:600; color:var(--brown); }
.hero-card{
  position:absolute; left:20px; bottom:20px;
  background:rgba(248,244,235,.94); border:0;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:14px; padding:16px 20px;
}
.hero-card .big{
  display:block; font-family:'Prata',Georgia,serif; font-size:32px;
  line-height:1; color:var(--brown);
}
.hero-card .sub{ display:block; margin-top:6px; font-size:13px; line-height:18px; color:var(--ink-body); }

/* On desktop the picture takes the whole top-right of the stage: it starts at
   the very top of the page and runs to the right edge of the viewport. */
@media (min-width:1200px){
  .hero{ padding:0; min-height:800px; display:flex; align-items:center; }
  .hero > .container{ width:100%; }
  .hero-grid{ grid-template-columns:1fr; gap:0; }
  .hero-left{ max-width:560px; padding:158px 0 88px; position:relative; z-index:2; }
  /* as wide as the text column allows, so the photograph is cropped as little
     as possible: 50vw is the half the panel could take if the page were not
     centred, less the 46px that keeps a 56px gap beside the headline */
  .hero-media{
    position:absolute; top:0; right:0; bottom:0;
    width:min(calc(50vw - 46px), 1000px); max-width:none; height:auto;
    aspect-ratio:auto; border-radius:0 0 0 28px;
  }
  /* the bar now sits over the picture, so give it something to sit on */
  .nav-wrap::before{
    content:''; position:absolute; inset:0 0 auto 0; height:132px; pointer-events:none;
    background:linear-gradient(180deg, var(--cream) 0%, var(--cream) 34%, rgba(248,244,235,0) 100%);
    opacity:1; transition:opacity .45s var(--ease);
  }
  .nav-wrap.scrolled::before{ opacity:0; }
}

/* ============================================================
   ABOUT / SOLUTION — 3-up row, stats strip
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:stretch; }

.ab-card{
  background:var(--cream-2); border-radius:16px; padding:28px 26px;
  display:flex; flex-direction:column; gap:18px;
}
.ab-icon{ width:34px; height:34px; color:var(--brown); }
.ab-card p{ font-size:14px; line-height:21px; color:var(--brown-deep); }
.ab-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.ab-tags span{
  font-size:12px; line-height:1; padding:8px 12px; border-radius:1000px;
  background:var(--surface); border:1px solid var(--line); color:var(--brown);
}
.ab-actions{ display:flex; align-items:center; gap:10px; }
.btn-round{
  width:48px; height:48px; flex:0 0 48px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--brown);
  display:grid; place-items:center; font-size:16px;
  transition:background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn-round:hover{ background:var(--brown); color:#fff; border-color:var(--brown); transform:translateY(-2px); }

.ab-media{ position:relative; margin:0; border-radius:16px; overflow:hidden; min-height:320px; }
.ab-media img,.ab-media video{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.ab-media figcaption{
  position:absolute; left:18px; top:18px; z-index:2;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font-size:13px; padding:8px 14px; border-radius:1000px;
}

.ab-fan{ display:flex; flex-direction:column; gap:18px; justify-content:center; }
.fan{ display:flex; justify-content:center; padding:10px 0; overflow:hidden; }
.fan img{
  width:33%; aspect-ratio:3/4; object-fit:cover; border-radius:12px;
  border:4px solid var(--cream); box-shadow:0 14px 34px rgba(74,56,40,.14);
}
.fan img:nth-child(1){ transform:rotate(-9deg) translateX(16%); z-index:1; }
.fan img:nth-child(2){ transform:translateY(-6px); z-index:3; }
.fan img:nth-child(3){ transform:rotate(9deg) translateX(-16%); z-index:2; }
.ab-fan p{ font-size:14px; line-height:21px; color:var(--brown-deep); }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin-top:56px; padding-top:40px; border-top:1px solid var(--line);
}
.stats strong{ display:block; font-size:42px; line-height:1.05; letter-spacing:-.03em; color:var(--brown); font-weight:500; }
.stats span{ display:block; margin-top:8px; font-size:14px; line-height:20px; color:var(--muted); }

/* ============================================================
   CARE — 2x2 tinted cards + heading right
   ============================================================ */
.care-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.care-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.care-card{
  background:var(--cream-2); border-radius:12px; padding:28px 24px 30px;
  display:flex; flex-direction:column; gap:14px; min-height:231px;
  transition:transform .4s var(--ease), background-color .4s var(--ease);
}
.care-card:hover{ transform:translateY(-6px); background:#e4dbca; }
.care-card .ico{
  width:40px; height:40px; color:var(--brown);
}
.care-card h3{ font-size:19px; }
.care-card p{ font-size:14px; line-height:20px; color:var(--muted); }

/* ============================================================
   PINNED HORIZONTAL TRACKS (Service + Case Study)
   ============================================================ */
.pin{ padding:100px 0; }
.pin-inner{ padding:0; }
.pin-head{ margin-bottom:40px; }
.head-actions{ display:flex; align-items:center; gap:12px; }
.sld-nav{ display:flex; gap:8px; }
.sld-btn{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface);
  color:var(--brown); cursor:pointer; display:grid; place-items:center;
  font-size:16px; line-height:1;
  transition:background-color .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.sld-btn:hover:not(:disabled){ background:var(--brown); color:#fff; border-color:var(--brown); transform:translateY(-2px); }
.sld-btn:disabled{ opacity:.35; cursor:default; }
.track{
  display:flex; gap:20px;
  overflow-x:auto;
  /* proximity, never mandatory: mandatory snap reverts programmatic scrolls
     and cancels the arrow buttons */
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:4px;
  cursor:grab;
}
.track::-webkit-scrollbar{ display:none; }
.track > *{ scroll-snap-align:start; }
.track.dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }

/* Service card — template: 392x560, radius 12, pad 28/24/30, gap 32 */
.svc-card{
  flex:0 0 392px; background:var(--surface); border-radius:12px;
  padding:28px 24px 30px; display:flex; flex-direction:column; gap:32px;
  min-height:560px;
}
.svc-top{ display:flex; flex-direction:column; gap:24px; }
.svc-card .step{ font-size:12px; color:var(--brown); }
.svc-card h3{ font-size:22px; }
.svc-card p{ font-size:14px; line-height:21px; color:var(--muted); }
.svc-media{ margin-top:auto; border-radius:10px; overflow:hidden; aspect-ratio:344/220; }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc-card:hover .svc-media img{ transform:scale(1.06); }

/* Case card — template: 610 wide, image right, stats row beneath */
.case-card{
  flex:0 0 610px; background:var(--surface); border-radius:12px; padding:24px;
  display:flex; flex-direction:column; gap:20px;
}
.case-top{ display:grid; grid-template-columns:1fr 240px; gap:20px; }
.case-info{ display:flex; flex-direction:column; gap:12px; }
.case-info h3{ font-size:22px; }
.case-info p{ font-size:14px; line-height:21px; color:var(--muted); }
.case-img{ border-radius:10px; overflow:hidden; aspect-ratio:4/3; }
.case-img img{ width:100%; height:100%; object-fit:cover; }
.case-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border-top:1px solid var(--line); padding-top:18px; }
.case-stats .k{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.case-stats .v{ font-size:22px; color:var(--brown); letter-spacing:-.02em; }

/* ============================================================
   CHOOSE US — centred head + numbered accordion + image w/ card
   ============================================================ */
.choose-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; margin-top:56px; }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-item:first-child{ border-top:1px solid var(--line); }
.acc-q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:14px; padding:20px 0;
  font-size:17px; font-weight:500; color:var(--brown); letter-spacing:-.01em;
}
.acc-q .num{ color:var(--brown); font-size:14px; flex:0 0 auto; }
.acc-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.acc-item.open .acc-a{ grid-template-rows:1fr; }
.acc-a-in{ overflow:hidden; }
.acc-a p{ padding:0 0 20px 34px; font-size:14px; line-height:21px; color:var(--muted); }
.choose-media{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/5; }
.choose-media img{ width:100%; height:100%; object-fit:cover; }
.glass-card{
  position:absolute; left:20px; bottom:20px; right:20px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:14px; padding:20px 22px; color:#fff;
}
.glass-card .big{ font-size:40px; line-height:1; letter-spacing:-.02em; }
.glass-card .sub{ font-size:13px; color:rgba(255,255,255,.85); margin-top:8px; }

/* ============================================================
   NUMBER / JOURNEY ROWS
   ============================================================ */
.rows{ margin-top:40px; }
.row-item{
  display:grid; grid-template-columns:260px 220px 1fr; gap:40px; align-items:center;
  padding:28px 0; border-top:1px solid var(--line);
}
.row-item:last-child{ border-bottom:1px solid var(--line); }
.row-item .big{ font-size:56px; line-height:1; color:var(--brown); letter-spacing:-.03em; }
.row-item h4{ font-size:18px; }
.row-item p{ font-size:14px; line-height:20px; color:var(--muted); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ margin-top:48px; max-width:900px; margin-inline:auto; }
.faq-item{ border-radius:12px; margin-bottom:6px; transition:background-color .4s var(--ease); }
.faq-item.open{ background:var(--cream-2); }
.faq-q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 24px; font-size:18px; font-weight:500; color:var(--ink); letter-spacing:-.01em;
}
.faq-item:not(.open){ border-bottom:1px solid var(--line); border-radius:0; }
.faq-icon{ flex:0 0 20px; width:20px; height:20px; position:relative; }
.faq-icon::before,.faq-icon::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--brown);
  transition:transform .4s var(--ease);
}
.faq-icon::before{ width:14px; height:1.5px; transform:translate(-50%,-50%); }
.faq-icon::after{ width:1.5px; height:14px; transform:translate(-50%,-50%); }
.faq-item.open .faq-icon::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a-in{ overflow:hidden; }
.faq-a p{ padding:0 24px 14px; font-size:15px; line-height:25px; color:var(--ink-body); }
.faq-a p:last-child{ padding-bottom:24px; }
.faq-a ul{ padding:0 24px 24px 42px; list-style:disc; }
.faq-a li{ font-size:15px; line-height:25px; color:var(--ink-body); padding:2px 0; }

/* ============================================================
   CTA — 3 image cards + centred statement + button
   ============================================================ */
.cta-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:40px 0 48px; max-width:940px; margin-inline:auto; }
.cta-card{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:3/4; }
.cta-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cta-card:hover img{ transform:scale(1.05); }
.cta-card .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.62) 100%); }
.cta-card .cap{
  position:absolute; left:0; right:0; bottom:0; padding:20px 18px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.cta-card .tick{
  width:28px; height:28px; border-radius:50%; background:var(--brown); color:#fff;
  display:grid; place-items:center; font-size:13px;
}
.cta-card .cap p{ color:#fff; font-size:13px; line-height:18px; }
.cta-statement{
  font-family:'Prata',Georgia,serif;
  font-size:32px; line-height:1.4; letter-spacing:-.005em; color:var(--ink);
  max-width:820px; margin-inline:auto; text-align:center;
}

/* ============================================================
   SUITABILITY — three numbered cards
   ============================================================ */
.head-aside{
  max-width:36ch; font-size:16px; line-height:27px; color:var(--ink-body);
  padding:20px 0 6px; border-top:1px solid var(--line);
  justify-self:end;
}
.head-aside strong{ font-weight:600; color:var(--brown); }
.sui-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.sui-card{
  background:var(--surface); border:0; border-radius:18px;
  padding:26px 24px 24px; display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--lift); will-change:transform;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.sui-card:hover{ transform:translateY(-9px) rotate(-.75deg); box-shadow:var(--lift-hi); }
.sui-card:nth-child(even):hover{ transform:translateY(-9px) rotate(.75deg); }
.sui-card .n{ font-size:13px; color:var(--brown-mid); }
.sui-card h3{ font-size:21px; }
.sui-card p{ font-size:14px; line-height:22px; }
.sui-media{ margin-top:auto; padding-top:18px; border-radius:12px; overflow:hidden; }
.sui-media img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:12px; }

/* ============================================================
   SLIDER
   One component, used for the parts of the treatment and for the
   treatment stages. It moves itself, and you can move it.
   Picture on the left, words on the right; `.fit` is for the
   clinical images, which must not be cropped.
   ============================================================ */
.kicker{ display:inline-block; font-size:13px; line-height:1.3; letter-spacing:0;
  font-weight:600; color:var(--brown-mid); margin-bottom:18px; }
/* the slider label needs air under a section head, which the retired
   statement block used to provide */
.head-row + .kicker{ margin-top:54px; }

.sld{ margin-top:8px; }
.sld-view{ overflow:hidden; border-radius:24px; box-shadow:var(--lift); }
.sld-track{
  display:flex; will-change:transform;
  transition:transform .72s cubic-bezier(.45,.05,.2,1);
}
.sld-track.no-anim{ transition:none; }
.sld-item{
  flex:0 0 100%; min-width:0;
  display:grid; grid-template-columns:1.02fr .98fr; align-items:stretch; gap:0;
  background:var(--cream-3);
}
/* the picture runs to the card's own edge rather than sitting inside it as a
   second rounded shape, so the two halves read as one card */
.sld-media{ height:430px; background:var(--cream-2); overflow:hidden; }
.sld-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* the stage pictures carry labels and anatomy the dentist needs intact */
.sld-media.fit{ background:var(--cream-3); display:flex; align-items:center; justify-content:center; padding:0; }
.sld-media.fit img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.sld-copy{ padding:44px 48px; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; }
.sld-n{
  font-family:'Inter',system-ui,sans-serif; font-size:13px; font-weight:600;
  letter-spacing:0; color:var(--brown); margin-bottom:18px;
  font-variant-numeric:tabular-nums;
}
.sld-of{ font-weight:400; color:var(--ink-soft); }
.sld-copy h3{ font-size:30px; line-height:1.2; margin-bottom:14px; }
.sld-copy p{ font-size:16px; line-height:28px; color:var(--ink-body); max-width:40ch; }
.sld-copy p strong{ font-weight:600; color:var(--brown); }

.sld-ui{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:22px; }
.sld-dots{ display:flex; gap:9px; }
.sld-dot{
  width:30px; height:4px; padding:0; border:0; border-radius:4px; cursor:pointer;
  background:var(--sand); transition:background-color .4s var(--ease), width .4s var(--ease);
}
.sld-dot.is-on{ width:52px; background:var(--brown); }
.sld-arrows{ display:flex; gap:10px; }
.sld-btn{
  width:46px; height:46px; border:0; border-radius:50%; cursor:pointer;
  background:var(--cream-3); color:var(--ink);
  display:grid; place-items:center; font-size:16px;
  transition:background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.sld-btn:hover{ background:var(--brown); color:#fff; transform:translateY(-2px); }

/* a short ask at the end of each section, so the page keeps offering a way in */
.sec-cta{
  display:flex; align-items:center; justify-content:space-between; gap:36px;
  flex-wrap:wrap; margin-top:44px; padding-top:32px;
  border-top:1px solid var(--line);
}
.sec-cta p{ font-size:18px; line-height:29px; color:var(--ink); max-width:46ch; }
.sec-cta p strong{ font-weight:600; color:var(--brown); }

/* ============================================================
   BENEFITS
   ============================================================ */
.ben-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px; }
.ben-card{
  background:var(--surface); border:0; border-radius:18px; padding:26px 24px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--lift); will-change:transform;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.ben-card:hover{ transform:translateY(-9px) rotate(.7deg); box-shadow:var(--lift-hi); }
.ben-card:nth-child(odd):hover{ transform:translateY(-9px) rotate(-.7deg); }
.ben-card .n{ font-size:13px; color:var(--brown-mid); }
.ben-card h4{ font-size:19px; }
.ben-card p{ font-size:14px; line-height:22px; }

/* ============================================================
   PATIENT CAROUSEL
   ============================================================ */
.pcar{ margin-top:48px; }
.pcar-track{
  display:flex; align-items:center; gap:20px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.pcar-track::-webkit-scrollbar{ display:none; }
.pcar-track.dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.pslide{
  flex:0 0 100%; margin:0; scroll-snap-align:center;
  display:flex; flex-direction:column; justify-content:center;
}
/* the two cases are very different shapes - one nearly square, one a wide
   strip - so each sits centred in a box of a fixed height instead of being
   stretched to the full width, which made the square one enormous and left
   the wide one stranded at the top of the track. The box also holds its
   height while a lazy image is still loading. */
/* the client's cases are square, so give them more height than the old wide
   strip needed - otherwise a 1:1 photo sits small in the middle of the row */
.pmedia{ height:clamp(300px, 58vh, 560px); display:flex; align-items:center;
  justify-content:center; min-height:0; }
.pslide img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  border-radius:18px; background:var(--surface); border:0;
}
.pslide figcaption{ margin-top:16px; text-align:center; font-size:15px; line-height:23px; color:var(--ink-soft); }
.pcar-ui{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:26px; }
.pcar-count{ font-size:13px; color:var(--muted); letter-spacing:0; font-weight:600;
  font-variant-numeric:tabular-nums; }

/* ============================================================
   JOURNEY STEPS
   ============================================================ */
/* ============================================================
   JOURNEY — cards that stack as the page scrolls
   Each card sticks 14px lower than the one before, so the stack
   keeps a visible edge of every stage already passed.
   ============================================================ */

/* ============================================================
   CTA BAND
   ============================================================ */
/* ============================================================
   THE CLOSING BLOCK
   One dark panel: the ask on the left, the clinic on the right,
   then the page links, the disclaimer and the line of credits.
   ============================================================ */
footer{
  background:var(--ink-deep); color:rgba(255,255,255,.66);
  border-radius:30px 30px 0 0; padding:76px 0 34px; margin-top:0;
}
footer h2{ color:#fff; max-width:11ch; }
footer h2 em{ color:var(--sand); }
footer .lede{ color:rgba(255,255,255,.8); max-width:46ch; }
footer .lede strong{ color:#fff; }
.foot-top{
  display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:start;
  padding-bottom:58px;
}
.foot-ask{ display:flex; flex-direction:column; gap:22px; align-items:flex-start; }

/* the clinic's own card, lifted off the dark so it reads as the one place
   on the page where the address lives */
.foot-card{
  background:rgba(255,255,255,.055); border-radius:22px; padding:30px 28px;
  display:flex; flex-direction:column; gap:18px;
  font-size:15px; line-height:24px;
}
.foot-card .mark{ display:inline-block; align-self:flex-start; color:#fff; margin-bottom:2px; }
.foot-card .mark .n{ font-size:27px; }
.foot-card .mark .s{ font-size:10px; }
.foot-card address{ font-style:normal; color:rgba(255,255,255,.8); }
.foot-rows{ display:flex; flex-direction:column; gap:3px; }
.foot-rows a{ transition:color .3s var(--ease); }
.foot-rows a:hover{ color:#fff; }
.foot-card .hours{ color:rgba(255,255,255,.58); font-size:14px; line-height:22px; }
.foot-card .hours strong{ color:#fff; font-weight:500; }
.foot-dir{
  align-self:flex-start; margin-top:2px;
  font-size:14px; font-weight:600; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:7px;
  transition:border-color .3s var(--ease);
}
.foot-dir:hover{ border-color:#fff; }

.foot-links{
  display:flex; flex-wrap:wrap; gap:8px 28px;
  padding:26px 0; border-top:1px solid rgba(255,255,255,.1);
}
.foot-links a{ font-size:14px; transition:color .3s var(--ease); }
.foot-links a:hover{ color:#fff; }
.foot-bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:13px;
}
.foot-bottom a:hover{ color:#fff; }
.disclaimer{ font-size:12px; line-height:19px; color:rgba(255,255,255,.5); padding:20px 0 4px; max-width:95ch; }

/* ============================================================
   MOTION
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(100px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:var(--d,0s);
}
.reveal.in{ opacity:1; transform:none; }
.reveal-fade{ opacity:0; transition:opacity var(--dur) var(--ease); transition-delay:var(--d,0s); }
/* cards arrive from the right. A keyframe, not a transition, so the finished
   state leaves `transform` free for the hover twist. */
.slide-r:not(.in){ opacity:0; }
.slide-r.in{ animation:slideR var(--dur) var(--ease) var(--d,0s) backwards; }
@keyframes slideR{ from{ opacity:0; transform:translateX(72px); } to{ opacity:1; transform:none; } }
.reveal-fade.in{ opacity:1; }
.pop{ transform:scale(0); transition:transform .7s var(--ease); transition-delay:var(--d,0s); }
.pop.in{ transform:scale(1); }
.tr-word{ opacity:.4; }

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-fade,.slide-r{ opacity:1 !important; transform:none !important; transition:none; animation:none; }
  .pop{ transform:none !important; }
  .tr-word{ opacity:1 !important; }
  .nav-wrap{ transition:none; }
}

/* ============================================================
   RESPONSIVE — template breakpoints 1200 / 810
   ============================================================ */

@media (max-width:1199.98px){
  section{ padding:60px 0; }
  h1{ font-size:52px; }
  h2{ font-size:34px; }
  .hero{ padding:120px 0 64px; }
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  /* the film is 3:4, so the panel follows it rather than cropping it */
  .hero-media{ aspect-ratio:4/5; }
  .nav-links{ display:none; }
  .burger{ display:block; }
  .tilt{ display:none; }
  .care-grid{ grid-template-columns:1fr; gap:32px; }
  .choose-grid{ grid-template-columns:1fr; gap:36px; }
  .choose-media{ aspect-ratio:16/10; }
  .row-item{ grid-template-columns:160px 1fr; gap:20px; row-gap:8px; }
  .row-item p{ grid-column:2; }
  .row-item .big{ font-size:44px; }
  .cta-cards{ margin:32px auto 36px; }
  .case-grid{ grid-template-columns:1fr; gap:16px; margin-top:32px; }
  .foot-top{ grid-template-columns:1fr; gap:36px; padding-bottom:40px; }
  footer{ padding:56px 0 30px; border-radius:24px 24px 0 0; }
    .about-grid{ grid-template-columns:1fr; }
  .ab-media{ min-height:260px; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:28px 20px; margin-top:40px; padding-top:32px; }
  .stats strong{ font-size:34px; }
  .pin{ padding:60px 0; }
  .head-row{ grid-template-columns:1fr; align-items:start; gap:22px; }
  .head-row + .kicker{ margin-top:34px; }
  .head-aside{ max-width:none; justify-self:start; padding-top:16px; }
  .head{ max-width:none; }
  .head h2{ font-size:34px; }
  .sui-grid{ grid-template-columns:1fr; gap:16px; margin-top:34px; }
  .sld-item{ grid-template-columns:1fr; }
  .sld-media{ height:300px; }
  .sld-media.fit{ height:270px; padding:16px; }
  .sld-copy{ padding:30px 28px 34px; }
  .sld-copy h3{ font-size:25px; }
  .ben-grid{ grid-template-columns:1fr; gap:14px; margin-top:32px; }
  .head-actions{ flex-wrap:wrap; }
  .svc-card{ flex-basis:330px; min-height:0; }
  .case-card{ flex-basis:520px; }
  .nav{ height:76px; }                 /* template tablet nav */
  .foot-links{ gap:6px 22px; }
  .reveal{ transform:translateY(60px); }
}

@media (max-width:809.98px){
  h1{ font-size:34px; }
  h2{ font-size:26px; }
  h3{ font-size:19px; }
  .hero{ padding:104px 0 52px; }
  .nav{ height:72px; }
  .sld-view{ border-radius:18px; }
  .sld-media{ height:215px; }
  .sld-media.fit{ height:230px; padding:12px; }
  .sld-copy{ padding:22px 20px 26px; }
  .sld-copy h3{ font-size:21px; line-height:1.25; }
  .sld-copy p{ font-size:15px; line-height:26px; }
  .sld-n{ margin-bottom:12px; }
  .sld-ui{ margin-top:16px; }
  .sld-dot{ width:22px; }
  .sld-dot.is-on{ width:38px; }
  .hero-tabs{ gap:6px; }
  .hero-tabs span{ font-size:11px; padding:8px 11px; }
  .nav-cta .btn-primary{ display:none; }  /* phone header = logo + burger only */

  .hero-tabs span{ font-size:11px; padding:8px 12px; }
  .hero-card{ left:14px; bottom:14px; padding:13px 16px; }
  .hero-card .big{ font-size:26px; }
  .care-cards{ grid-template-columns:1fr; }
  .care-card{ min-height:0; }
  .svc-card{ flex-basis:280px; padding:22px 20px 24px; gap:24px; }
  .sld-btn{ width:42px;height:42px;font-size:15px; }
  /* on a narrow screen a square case is capped by the width, so the box
     follows the width instead of leaving a band of empty cream below it */
  .pmedia{ height:clamp(280px, 92vw, 420px); }
  .sec-cta{ margin-top:32px; padding-top:24px; gap:20px; }
  .sec-cta p{ font-size:16px; line-height:26px; }
  .sec-cta .btn{ width:100%; justify-content:center; }
  .case-card{ flex-basis:300px; padding:18px; }
  .case-top{ grid-template-columns:1fr; }
  .case-stats{ grid-template-columns:1fr; gap:12px; }
  .row-item{ grid-template-columns:1fr; gap:6px; padding:22px 0; }
  .row-item p{ grid-column:1; }
  .row-item .big{ font-size:38px; }
  /* three across instead of a tall stack: caption moves out from under the
     image so the row stays short */
  .cta-cards{ grid-template-columns:repeat(3,1fr); gap:10px; max-width:none; margin:28px auto 32px; }
  .cta-card{ aspect-ratio:auto; border-radius:0; overflow:visible; display:flex; flex-direction:column; }
  .cta-card img{ height:auto; aspect-ratio:3/4; border-radius:10px; }
  .cta-card .veil{ display:none; }
  .cta-card .cap{ position:static; padding:10px 2px 0; gap:6px; }
  .cta-card .tick{ width:20px; height:20px; font-size:10px; }
  .cta-card .cap p{ color:var(--brown-deep); font-size:11px; line-height:15px; }
  .stats{ grid-template-columns:1fr; gap:22px; }
  .stats strong{ font-size:30px; }
  .ab-card{ padding:24px 20px; }
  .faq-q,.acc-q{ font-size:16px; }
  .faq-q{ padding:18px; }
  .faq-a p{ padding-left:18px; padding-right:18px; }
  .faq-a ul{ padding-left:36px; padding-right:18px; }
  footer{ padding:44px 0 26px; border-radius:20px 20px 0 0; }
  .foot-card{ padding:22px 20px; border-radius:18px; }
  .foot-links{ flex-direction:column; gap:2px; }
  .foot-links a{ padding:5px 0; }
  footer .head-actions .btn{ width:100%; justify-content:center; }
  /* compact nav bar */
  .nav .container{ gap:10px; }
  .brand .mark .n{ font-size:22px; }
  .brand .mark .s{ font-size:8.15px; }
  .brand .mark .n{ font-size:21px; }
  .brand .mark .s{ font-size:7.78px; }
  .nav-cta .btn{ height:40px; padding:6px 16px 6px 6px; font-size:13px; white-space:nowrap; }
  .nav-cta .btn i{ width:28px;height:28px;flex:0 0 28px; }
  .burger{ width:40px;height:40px;flex:0 0 40px; }
  .burger svg{ width:26px;height:26px; }
}

@media (min-width:1200px){ .mobile-panel{ display:none; } }

/* ============================================================
   TEXT ENTRY (SJMC kit) — recoloured for Esteem
   bar 2 is set to each section's own background so the second
   sweep erases cleanly instead of leaving a band of colour.
   ============================================================ */
:root{
  --te-bar1: var(--sand);
  --te-bar2: var(--cream);
  --te-badge-bg: var(--brown);
  --te-badge-ink: var(--brown);
  --te-badge-ink-in: var(--cream);
}
section.tint{ --te-bar2: var(--cream-2); }
/* a heading inside a card is uncovered against the card, not the section */
.sui-card,.ben-card,.sld-item{ --te-bar2: var(--surface); }

/* headings keep their own type; the kit only adds the sweep */
h1 [data-wipe], h2[data-wipe]{ gap:0; }
.head.center [data-wipe]{ align-items:center; text-align:center; }
.te-line{ padding-bottom:.08em; }

/* the eyebrow pill IS the badge: the bar fills the whole pill, padding included */
.eyebrow{ position:relative; overflow:hidden; }
.eyebrow .te-bl{ padding:0; overflow:visible; }
.eyebrow .te-bl i{ left:-17px; top:-11px; height:calc(100% + 22px); }
.eyebrow.te-in .te-bl i{ left:-17px; width:calc(100% + 34px); }
.kicker{ --te-badge-bg:var(--sand); --te-badge-ink:var(--brown-mid); --te-badge-ink-in:var(--brown); }
.kicker .te-bl{ padding:0 10px; border-radius:4px; }
.kicker .te-bl i{ top:-5px; height:calc(100% + 10px); }

/* rolling stat number */
.hero-card .big[data-count]{ display:inline-flex; }

/* ============================================================
   NAV CTA — the text link collapses with the links
   ============================================================ */
@media (max-width:809.98px){
  .nav-link-cta{ display:none; }
  .nav-cta{ gap:0; }
}