/* =========================================================
   DENTORA — recreated from reference video
   ========================================================= */

:root{
  /* palette sampled from the reference frames */
  --teal:        #2AA8C6;
  --teal-dark:   #2596B2;
  --teal-light:  #4FD8F5;
  --teal-soft:   #E2F2F7;
  --teal-btn-a:  #4CC0D8;
  --teal-btn-b:  #2AA6C4;

  --ink:         #0B0B0C;
  --ink-2:       #17181A;
  --grey-1:      #6B6E72;
  --grey-2:      #8E9296;
  --grey-3:      #B7BABD;
  --line:        #E6E7E9;

  --page:        #FDFDFD;
  --page-2:      #F5F6F6;
  --shell:       #E9E9E9;

  --r-shell:     42px;
  --r-hero:      28px;
  --hero-inset:  10px;
  --r-card:      18px;
  --r-pill:      999px;

  /* design is measured at a 1400px card inside a 1520px viewport
     → design px P  ==  clamp(min, (P/15.2)vw, P) */
  --pad:         clamp(22px, 3.09vw, 47px);
  --maxw:        1400px;

  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);

  --f-display: "Figtree", "Aeonik", "Neue Montreal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-body:    "Inter", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:500;letter-spacing:-.028em;line-height:1.06}
p{margin:0}

.shell{min-height:100vh;position:relative}
/* overflow-x:clip contains any horizontal overflow (giant footer wordmark) without
   creating a scroll container — critical because ancestors with `overflow:hidden`
   would break `position:sticky` inside the hero scroll-scrub. */
.site{position:relative;background:var(--page);overflow-x:clip}
.wrap{padding-inline:var(--pad)}

/* =========================================================
   HERO
   ========================================================= */
/* Scroll-scrub spacer — 250vh tall. The .hero inside sticks at the top and its
   background canvas advances through the WebP sequence over ~1.5 viewports of
   scroll before the trust bar naturally appears below. */
.hero-scroll{position:relative;height:250vh}

.hero{
  /* Sticky pin. `top` matches the 10px hero-inset so the white frame stays visible. */
  position:sticky;top:var(--hero-inset);
  margin:var(--hero-inset);
  border-radius:var(--r-hero);
  overflow:hidden;
  height:calc(100vh - (var(--hero-inset) * 2));
  --hpad:calc(var(--pad) - var(--hero-inset));
  display:flex;flex-direction:column;
  color:#fff;
  isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}

/* Static poster: first frame (loading state) or last frame (mobile / reduced-motion
   fallback). Left-biased object-position so the headline stays clear even when a
   16:9 frame is scaled to fill a wider viewport. */
.hero-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:15% center;
  display:block;pointer-events:none;
}
/* Scrub canvas: sits over the poster, fades in once the frame set is decoded so
   there's never a flash of empty canvas. Below the scrim (z-index -1) via .hero-media
   already being z-index:-2. */
.hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease);
}
.hero-canvas.is-ready{opacity:1}

.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    /* Tuned slightly stronger on the left so white type holds against the
       upper-left brightness of frame_000. */
    linear-gradient(90deg, rgba(10,22,26,.88) 0%, rgba(12,26,30,.58) 34%, rgba(10,20,24,.10) 62%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(6,16,20,.42) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.55) 100%);
}

/* Mobile / reduced-motion fallback — skip the sequence entirely.
   Hero returns to its old "natural height, no pin" behaviour with just the
   poster image (JS swaps its src to frame_100.webp on this path). */
@media (max-width:768px), (prefers-reduced-motion:reduce){
  .hero-scroll{height:auto}
  .hero{
    position:static;
    height:auto;
    min-height:clamp(560px, 90vw, 720px);
  }
  .hero-canvas{display:none}
}

/* ---- nav ---- */
.nav{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(18px,2.24vw,34px) var(--hpad);
  animation:fadeDown .9s var(--ease-out) both;
}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:clamp(19px,1.71vw,26px);font-weight:600;letter-spacing:-.022em}
.logo-mark{width:24px;height:24px;color:#fff;flex:none}

.nav-pills{
  display:flex;align-items:center;gap:6px;
  padding:5px;border-radius:var(--r-pill);
}
.npill{
  padding:10px 19px;border-radius:var(--r-pill);
  font-size:14px;font-weight:450;color:rgba(255,255,255,.94);
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.10);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.npill:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.npill.is-active{background:#fff;color:var(--ink);border-color:#fff;font-weight:500}

/* =========================================================
   Button system — the hero "Book an Appointment" is the canon.
   Two variants:
     .btn-white  — white pill · dark text · TEAL ic-circle w/ white arrow
     .btn-teal   — teal gradient pill · white text · WHITE ic-circle w/ teal arrow
   Every CTA on the site uses one of these two. Both share layout so they
   swap 1:1 depending on background. .btn-lg adds vertical breathing room
   for hero and full-width contexts.
   ========================================================= */
.btn-white, .btn-teal{
  display:inline-flex;align-items:center;gap:14px;
  padding:7px 7px 7px 22px;
  border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;border:0;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 2px 14px rgba(0,0,0,.10)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.btn-teal{
  background:linear-gradient(180deg,var(--teal-btn-a),var(--teal-btn-b));
  color:#fff;
  box-shadow:0 8px 22px -8px rgba(42,168,198,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(42,168,198,.75), inset 0 1px 0 rgba(255,255,255,.35);filter:brightness(1.05)}
.btn-teal:disabled,.btn-white:disabled{opacity:.5;pointer-events:none}
/* Label + icon layout — always label left, icon right */
.btn-white > span, .btn-teal > span{flex:0 1 auto;min-width:0;order:0}
.btn-white > .ic-circle, .btn-teal > .ic-circle{order:1}
/* Nav-cta is a compact right-side utility button (no icon), so keep tighter padding */
.nav-cta{padding:12px 22px}

/* ---- hero body ---- */
.hero-body{
  position:relative;z-index:2;
  flex:1;
  padding:clamp(26px,4.2vw,64px) var(--hpad) 0;
  display:flex;flex-direction:column;
}
.hero-title{
  font-size:clamp(40px,4.67vw,71px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.038em;
  margin-bottom:clamp(14px,1.45vw,22px);
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line>span{display:block}
.hero-title .line-2{padding-left:clamp(30px,9.01vw,137px)}

.hero-sub{
  font-size:clamp(13px,.99vw,15px);
  line-height:1.82;
  color:rgba(255,255,255,.86);
  font-weight:350;
  margin-bottom:clamp(22px,2.7vw,41px);
}
.btn-lg{padding:9px 9px 9px 26px;font-size:15px;gap:18px;align-self:flex-start}
.ic-circle{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  transition:transform .4s var(--ease);
}
.ic-circle svg{width:18px;height:18px}
.ic-circle.teal{background:var(--teal);color:#fff}
/* Arrow uses --ink (near-black) instead of --teal so it holds contrast against
   the white circle in every browser, including subpixel-rendered ones (Firefox,
   Zen). The pill itself is teal → the white circle is what carries the
   affordance; the arrow just has to be readable. */
.ic-circle.white{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn-white:hover .ic-circle, .btn-teal:hover .ic-circle{transform:translateX(3px) rotate(0deg)}
/* Neutralise the arrow-shift on hover for buttons whose icon is a phone glyph (call CTA) */
.btn-teal.btn-icon-static:hover .ic-circle, .btn-white.btn-icon-static:hover .ic-circle{transform:none}

/* ---- glass video card ---- */
.glass-card{
  margin-top:clamp(28px,4.9vw,74px);
  width:clamp(214px,15.4vw,234px);
  padding:8px;
  border-radius:14px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.5);
  transition:transform .45s var(--ease), background .45s var(--ease);
}
.glass-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.22)}
.gc-thumb{position:relative;height:clamp(104px,7.9vw,120px);border-radius:9px;overflow:hidden}
.gc-play{
  position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.38);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;color:#fff;
  border:1px solid rgba(255,255,255,.5);
}
.gc-play svg{width:15px;height:15px}
.gc-text{
  padding:18px 6px 22px;
  font-size:clamp(13px,.99vw,15px);line-height:1.65;font-weight:450;color:#fff;
}
.gc-foot{display:flex;align-items:center;justify-content:space-between;padding:0 6px 8px}
.gc-rate{display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
.gc-rate b{font-weight:600}
.star{width:14px;height:14px;flex:none}
.muted{color:rgba(255,255,255,.72)}
.gc-arrow{width:15px;height:15px;color:rgba(255,255,255,.9)}

/* ---- service pills ---- */
.svc-pills{
  position:absolute;right:var(--hpad);bottom:clamp(56px,8.35vw,127px);
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  animation:fadeUp 1.1s .55s var(--ease-out) both;
}
.svc-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.spill{
  padding:11px 22px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:450;color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:.35s var(--ease);white-space:nowrap;
}
.spill:hover{background:rgba(255,255,255,.3);transform:translateY(-2px)}
.spill.is-active{background:#fff;color:var(--ink);font-weight:500;border-color:#fff}

/* ---- hero bottom bar ---- */
.hero-bar{
  position:relative;z-index:2;
  margin:0 var(--hpad);
  padding:18px 0 clamp(18px,2.2vw,33px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-size:13px;color:rgba(255,255,255,.86);
  animation:fadeUp 1.1s .7s var(--ease-out) both;
}
.hero-bar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.75) 20%, rgba(255,255,255,.20) 21%, rgba(255,255,255,.18) 100%);
}
.hb-right{justify-self:end}

/* =========================================================
   RULER STRIP
   ========================================================= */
.ruler{
  height:clamp(64px,6.05vw,92px);
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--page);
  padding-inline:var(--pad);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.ruler-track{display:flex;align-items:center;white-space:nowrap;animation:marquee 34s linear infinite;will-change:transform}
.ruler-track:hover{animation-play-state:paused}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
.rl-ticks{
  width:118px;height:15px;flex:none;
  background-image:repeating-linear-gradient(90deg, #D9DADC 0 1px, transparent 1px 4px);
}
.rl-label{
  padding:0 14px;font-size:13.5px;color:var(--ink);white-space:nowrap;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  line-height:34px;
}

/* =========================================================
   SHARED BITS
   ========================================================= */
.badge{
  display:inline-flex;align-items:center;
  width:fit-content;justify-self:start;align-self:start;
  padding:11px 21px;border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:#fff;
  font-size:clamp(12px,.92vw,14px);font-weight:450;color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.h2{
  font-size:clamp(30px,3.75vw,57px);
  font-weight:500;line-height:1.14;letter-spacing:-.032em;
}
.lede{font-size:clamp(13px,.95vw,14.5px);line-height:1.86;color:var(--grey-1);font-weight:350}
/* .btn-block — full-width variant used inside sidebars */
.btn-block{display:flex;justify-content:space-between;width:100%}

.arrows{display:flex;gap:10px}
.arw{
  width:52px;height:38px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  transition:.35s var(--ease);
}
.arw svg{width:19px;height:19px}
.arw-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.arw-ghost:hover{background:var(--page-2);transform:translateX(-2px)}
.arw-teal{background:var(--teal);color:#fff}
.arw-teal:hover{background:var(--teal-dark);transform:translateX(2px)}
.arw:disabled{opacity:.35;pointer-events:none}

/* =========================================================
   ABOUT
   ========================================================= */
.about{padding:clamp(34px,4.6vw,70px) 0 clamp(30px,3.9vw,60px);background:var(--page)}
.about-grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(20px,2.6vw,40px)}
.about-faces{display:flex;gap:clamp(9px,1.05vw,16px);margin-top:clamp(38px,5.5vw,84px)}
.face{width:clamp(74px,7.76vw,118px);aspect-ratio:1;border-radius:50%}

.big-quote-text{
  font-size:clamp(21px,2.83vw,43px);
  font-weight:500;line-height:1.30;letter-spacing:-.024em;
}

/* word-by-word scroll reveal */
.reveal-text .w{
  color:rgba(11,11,12,.16);
  transition:color .28s linear;
  display:inline-block;
}
.reveal-text .w.on{color:var(--ink)}

.about-bottom{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,22vw,335px);
  gap:clamp(24px,4vw,60px);align-items:end;
  margin-top:clamp(38px,4.9vw,75px);
}
.stats-label{font-size:clamp(12px,.92vw,14px);color:var(--grey-1);margin-bottom:clamp(20px,2.24vw,34px)}
.stat-row{display:flex;gap:clamp(28px,7.76vw,118px);flex-wrap:wrap}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(30px,3.75vw,57px);font-weight:500;letter-spacing:-.038em;line-height:1}
.stat span{display:block;margin-top:clamp(12px,1.32vw,20px);font-size:clamp(12px,.92vw,14px);color:var(--grey-1)}
.about-img{aspect-ratio:335/253;border-radius:14px}

/* =========================================================
   FEATURE TREATMENT
   ========================================================= */
.feature{padding:clamp(52px,7.1vw,108px) 0 clamp(44px,5.6vw,86px);background:var(--page)}
.feature .badge{margin-bottom:clamp(20px,2.9vw,44px)}
.feature .h2{font-size:clamp(28px,3.16vw,48px);line-height:1.17;margin-bottom:clamp(16px,2.1vw,32px)}
.feature-grid{
  display:grid;grid-template-columns:minmax(0,1.33fr) minmax(0,1fr);
  gap:clamp(18px,1.51vw,23px);
  margin-top:clamp(44px,6.6vw,100px);
  align-items:start;
}
.feat-left{display:grid;grid-template-columns:minmax(0,.53fr) minmax(0,.47fr);gap:clamp(16px,1.84vw,28px);align-items:start}

/* call card */
.call-card{
  position:relative;aspect-ratio:370/443;border-radius:14px;overflow:hidden;
  background:linear-gradient(170deg,#C7DCF0,#BCD5EC);
}
.cc-doc{position:absolute;inset:0}
.cc-pip{
  position:absolute;top:8px;right:8px;width:31%;aspect-ratio:1/.85;
  border-radius:8px;border:1.5px solid rgba(255,255,255,.85);overflow:hidden;
}
.cc-controls{
  position:absolute;left:0;right:0;bottom:12px;
  display:flex;justify-content:center;gap:8px;
}
.cc-btn{
  width:52px;height:34px;border-radius:var(--r-pill);
  background:rgba(122,126,131,.78);backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  transition:.3s var(--ease);
}
.cc-btn:hover{background:rgba(122,126,131,.95)}
.cc-btn svg{width:19px;height:19px}
.cc-end{background:#E23B3B}
.cc-end:hover{background:#CE2E2E}
.cc-end svg{transform:rotate(0deg)}

/* doctor info */
.doc-name{font-size:clamp(19px,1.84vw,28px);font-weight:500;letter-spacing:-.032em}
.doc-role{font-size:clamp(12px,.92vw,14px);color:var(--grey-1);margin-top:12px}
.doc-rate{display:flex;align-items:center;gap:6px;font-size:clamp(12px,.92vw,14px);margin-top:20px}
.doc-rate b{font-weight:600}
.doc-rate .muted{color:var(--grey-1)}
.doc-copy{font-size:clamp(12px,.92vw,14px);line-height:1.72;color:var(--grey-1);margin-top:clamp(28px,4.2vw,64px)}
.doc-info .btn-teal{margin-top:clamp(16px,1.6vw,24px)}

/* right room + floating card */
.feat-right{position:relative}
.room{aspect-ratio:541/771;border-radius:14px}
.stat-card{
  position:absolute;left:3.2%;right:4%;bottom:0;
  background:#fff;border-radius:14px;
  padding:clamp(16px,1.51vw,23px) clamp(16px,1.71vw,26px) clamp(16px,1.71vw,26px);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.05);
}
.stat-card::before{ /* stacked-card edge like the reference */
  content:"";position:absolute;left:14px;right:14px;top:-8px;height:16px;
  background:#fff;border-radius:14px 14px 0 0;z-index:-1;
  box-shadow:0 -6px 20px -8px rgba(0,0,0,.16);
}
.sc-top{display:flex;align-items:flex-start;gap:16px}
.sc-cell{flex:1;min-width:0}
.sc-right{text-align:right}
.sc-div{width:1px;align-self:stretch;background:var(--line)}
.sc-k{font-size:12.5px;line-height:1.42;color:var(--grey-1)}
.sc-v{margin-top:12px;display:flex;align-items:baseline;gap:5px}
.sc-right .sc-v{justify-content:flex-end}
.sc-v b{font-family:var(--f-display);font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.03em}
.sc-v span{font-size:12.5px;color:var(--ink-2)}
.sc-line{height:1px;background:var(--line);margin:16px 0 14px}
.sc-bot{display:flex;align-items:center;justify-content:space-between}
.sc-k2{font-size:12.5px;color:var(--ink-2)}
.sc-pct{font-size:12.5px;color:var(--ink-2)}
.sc-bars{display:flex;gap:4px;margin-top:12px;height:34px;align-items:stretch}
.sc-bars i{flex:1;border-radius:var(--r-pill);background:var(--teal-soft);transition:background .5s var(--ease)}
.sc-bars i.on{background:var(--teal)}

/* =========================================================
   WHY CHOOSE
   ========================================================= */
.why{background:var(--page-2);padding:clamp(52px,7.6vw,116px) 0 clamp(56px,7.9vw,120px);overflow:hidden}
.why-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,5.7vw,86px)}
.why-rail{overflow:hidden;padding-inline:var(--pad)}
.why-track{
  display:flex;gap:clamp(10px,1.25vw,19px);align-items:stretch;
  height:clamp(280px,25.4vw,386px);
  transition:transform .8s var(--ease-out);will-change:transform;
}
.wcard{
  flex:none;border-radius:20px;overflow:hidden;position:relative;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.wcard:hover{transform:translateY(-4px)}
.wcard-white{
  background:#fff;width:clamp(212px,19.7vw,300px);
  padding:clamp(18px,1.9vw,28px) 0 0;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.02);
  display:flex;flex-direction:column;
}
.wcard-white:hover{border-color:rgba(42,168,198,.35);box-shadow:0 20px 40px -28px rgba(0,0,0,.12)}
.wcard-white h3{font-size:clamp(16px,1.45vw,22px);font-weight:500;line-height:1.26;letter-spacing:-.03em;padding:0 clamp(16px,1.71vw,26px) clamp(14px,1.32vw,20px)}
.wcard-img{flex:1;min-height:0;width:calc(100% - 2 * clamp(16px,1.71vw,26px));margin:0 clamp(16px,1.71vw,26px) clamp(16px,1.71vw,26px);border-radius:10px}

.wcard-teal{
  width:clamp(268px,26vw,396px);
  background:linear-gradient(155deg, var(--teal) 0%, var(--teal-dark) 100%);color:#fff;
  padding:clamp(22px,2.5vw,36px) clamp(22px,2.5vw,36px) clamp(20px,1.7vw,26px);
  display:flex;flex-direction:column;justify-content:space-between;gap:30px;
  box-shadow:0 20px 40px -24px rgba(42,168,198,.35);
}
.wc-top{display:flex;align-items:center;gap:14px}
.avstack{display:inline-flex}
.avstack i{width:clamp(26px,2.24vw,34px);height:clamp(26px,2.24vw,34px);border-radius:50%;border:2px solid var(--teal);margin-left:-10px;display:block}
.avstack i:first-child{margin-left:0}
.wc-join{font-size:clamp(12px,.92vw,14px);color:rgba(255,255,255,.94)}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 17px;border-radius:var(--r-pill);
  background:#fff;color:var(--teal);font-size:clamp(12px,.92vw,14px);font-weight:500;
}
.chip svg{width:15px;height:15px}
.wc-copy{
  margin-top:clamp(14px,1.45vw,22px);
  font-size:clamp(15px,1.38vw,21px);line-height:1.42;font-weight:400;
  color:rgba(255,255,255,.62);letter-spacing:-.012em;
}
.wc-copy em{font-style:normal;color:#fff}

.wcard-photo{width:clamp(320px,33.1vw,503px)}
.wcard-photo .wcard-img{width:100%;margin:0;border-radius:16px;height:100%}

.wcard-stat{padding:clamp(18px,1.97vw,30px) clamp(16px,1.71vw,26px);display:flex;flex-direction:column}
.wc-big{font-size:clamp(30px,3.16vw,48px);font-weight:500;letter-spacing:-.038em;line-height:1}
.wc-big span{font-weight:400}
.wc-sub{font-size:clamp(12px,.92vw,14px);line-height:1.45;color:var(--ink-2);margin-top:14px}
.wc-bars{display:flex;align-items:flex-end;gap:clamp(10px,1.19vw,18px);margin-top:auto;padding-top:24px;min-height:0;flex:1}
.wb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.wb span{
  width:100%;max-width:44px;border-radius:var(--r-pill);background:var(--teal);
  transform-origin:bottom;animation:barGrow 1s var(--ease-out) both;
}
.wb .wb-hi{background:var(--teal-light)}
.wb em{font-style:normal;font-size:12.5px;color:var(--ink-2);margin-top:10px}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.testi{background:var(--page);padding:clamp(52px,7vw,110px) 0 clamp(60px,8vw,130px)}
.testi-grid{
  display:grid;
  grid-template-columns:minmax(0,.20fr) minmax(0,.64fr) minmax(0,.16fr);
  gap:clamp(20px,3vw,44px);
}
.testi-left{display:flex;flex-direction:column}
.testi-left .badge{align-self:flex-start}
.testi-face{width:clamp(112px,9.7vw,148px);aspect-ratio:148/170;border-radius:14px;margin-top:clamp(50px,6.9vw,105px)}
.testi-meta{
  display:flex;justify-content:space-between;
  width:clamp(112px,9.7vw,148px);margin-top:16px;
  font-size:clamp(11px,.86vw,13px);color:var(--ink-2);
}
.testi-mid{position:relative}
.qmark{
  position:absolute;left:0;top:-.04em;
  font-family:var(--f-display);font-size:clamp(44px,4.9vw,74px);line-height:1;
  color:#D8DADC;
}
.testi-quote{
  margin:0;
  padding-left:clamp(40px,4.2vw,62px);
  font-family:var(--f-display);
  font-size:clamp(20px,2.5vw,38px);
  font-weight:500;line-height:1.31;letter-spacing:-.028em;
  text-indent:0;
}
.testi-quote.reveal-text{padding-left:0;margin-left:clamp(40px,4.2vw,62px)}
.testi-name{margin-top:clamp(28px,3.6vw,55px);font-size:clamp(15px,1.32vw,20px);font-weight:600;font-family:var(--f-display);letter-spacing:-.022em;margin-left:clamp(40px,4.2vw,62px)}
.testi-role{margin-top:7px;font-size:clamp(12px,.92vw,14px);color:var(--grey-1);margin-left:clamp(40px,4.2vw,62px)}
.testi-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:40px}
.testi-face2{width:100%;max-width:150px;aspect-ratio:150/155;border-radius:12px}

/* =========================================================
   INSIGHTS
   ========================================================= */
.insights{background:var(--page);padding:clamp(48px,6vw,96px) 0 clamp(56px,7vw,110px)}
.ins-head{display:grid;grid-template-columns:minmax(0,.40fr) minmax(0,.60fr);gap:24px;align-items:start;margin-bottom:clamp(30px,4.4vw,66px)}
.ins-title{font-size:clamp(28px,3.75vw,57px);line-height:1.14}
.ins-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.58vw,24px)}
.post{
  background:var(--page-2);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.post:hover{transform:translateY(-6px);box-shadow:0 26px 54px -26px rgba(0,0,0,.28)}
.post-img{position:relative;aspect-ratio:414/315;border-radius:16px}
.post-chip{
  position:absolute;left:15px;top:15px;
  padding:7px 15px;border-radius:var(--r-pill);
  background:#fff;font-size:clamp(10px,.79vw,12px);font-weight:450;color:var(--ink);
}
.post-body{padding:clamp(14px,1.32vw,20px) clamp(14px,1.32vw,20px) clamp(18px,1.71vw,26px);display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pm-left{display:inline-flex;align-items:center;gap:11px}
.pm-av{width:clamp(28px,2.24vw,34px);height:clamp(28px,2.24vw,34px);border-radius:50%;flex:none;display:block}
.pm-left b{display:block;font-size:clamp(12px,.99vw,15px);font-weight:600;letter-spacing:-.012em}
.pm-left em{display:block;font-style:normal;font-size:clamp(11px,.86vw,13px);color:var(--grey-1);margin-top:3px}
.pm-date{font-size:clamp(11px,.86vw,13px);color:var(--grey-1);white-space:nowrap}
.post-title{
  margin-top:clamp(14px,1.45vw,22px);font-size:clamp(15px,1.45vw,22px);font-weight:500;
  line-height:1.40;letter-spacing:-.026em;
}
.learn{
  margin-top:auto;padding-top:clamp(18px,1.71vw,26px);
  display:inline-flex;align-items:center;gap:9px;
  font-size:clamp(12px,.92vw,14px);color:var(--ink);transition:gap .3s var(--ease);
}
.learn svg{width:16px;height:16px;color:var(--grey-1)}
.learn:hover{gap:14px}
.ins-cta{display:flex;justify-content:center;margin-top:clamp(30px,4vw,58px)}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:var(--page-2);padding:clamp(50px,6.6vw,100px) 0 0;overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.52fr);gap:clamp(28px,4vw,60px);align-items:start}
.foot .h2{font-size:clamp(28px,3.75vw,57px);line-height:1.14}
.foot-news p{font-size:clamp(12.5px,.99vw,15px);line-height:1.72;color:var(--ink-2);font-weight:350}
.news-form{
  margin-top:22px;display:flex;align-items:center;gap:10px;
  background:#EFEFEF;border-radius:var(--r-pill);padding:7px 7px 7px 18px;
}
.nf-ic{width:19px;height:19px;color:var(--grey-2);flex:none}
.news-form input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:14px;color:var(--ink);padding:10px 0;
}
.news-form input::placeholder{color:var(--grey-2)}
.news-form button{
  padding:12px 24px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--teal-btn-a),var(--teal-btn-b));
  color:#fff;font-size:13.5px;font-weight:500;
  transition:.3s var(--ease);
}
.news-form button:hover{filter:brightness(1.06)}

.foot-line{height:1px;background:#E3E4E4;margin:clamp(38px,5vw,74px) 0 clamp(30px,3.6vw,52px)}
.foot-cols{display:grid;grid-template-columns:.178fr .195fr .289fr .338fr;gap:0}
.fcol h4{font-size:clamp(11px,.86vw,13px);font-weight:400;letter-spacing:.055em;color:var(--grey-2);margin-bottom:clamp(18px,1.71vw,26px);font-family:var(--f-body)}
.fcol a{display:block;font-size:clamp(12.5px,.99vw,15px);color:var(--ink);margin-bottom:clamp(14px,1.51vw,23px);transition:color .3s}
.fcol a:hover{color:var(--teal)}
.fmail{font-family:var(--f-display);font-size:clamp(19px,1.97vw,30px)!important;font-weight:500;letter-spacing:-.028em;margin-bottom:0!important}
.ffollow{font-size:clamp(12.5px,.99vw,15px);margin-top:clamp(20px,1.97vw,30px);margin-bottom:clamp(12px,1.19vw,18px)}
.socials{display:flex;gap:9px}
.socials a{
  width:34px;height:34px;border-radius:50%;
  border:1px solid #DEDFDF;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0;transition:.3s var(--ease);
}
.socials a svg{width:16px;height:16px;color:var(--ink)}
.socials a:hover{background:var(--teal);border-color:var(--teal)}
.socials a:hover svg{color:#fff}

.wordmark{
  margin-top:clamp(28px,3.6vw,52px);
  font-family:var(--f-display);
  font-size:clamp(64px,20.1vw,305px);
  font-weight:500;letter-spacing:-.052em;line-height:.82;
  text-align:center;
  color:#EDEEEE;
  user-select:none;
  white-space:nowrap;
}
.foot-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:clamp(14px,1.6vw,22px) 0 clamp(18px,2.2vw,30px);
  font-size:12px;color:var(--grey-2);
}
.foot-bar span:nth-child(2){justify-self:center}
.foot-bar span:nth-child(3){justify-self:end}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

[data-anim="rise"]{
  opacity:0;transform:translateY(26px);filter:blur(8px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out);
}
[data-anim="rise"].in{opacity:1;transform:none;filter:blur(0)}

/* hero title lines animate on load */
.hero-title .line>span{transform:translateY(105%);opacity:0;animation:heroLine 1.15s var(--ease-out) forwards}
.hero-title .line:nth-child(1)>span{animation-delay:.12s}
.hero-title .line:nth-child(2)>span{animation-delay:.24s}
@keyframes heroLine{to{transform:none;opacity:1}}
.hero-sub[data-anim],.hero-cta[data-anim],.glass-card[data-anim]{opacity:0;transform:translateY(24px);filter:blur(6px);animation:heroFade 1s var(--ease-out) forwards}
.hero-sub[data-anim]{animation-delay:.4s}
.hero-cta[data-anim]{animation-delay:.5s}
.glass-card[data-anim]{animation-delay:.62s}
@keyframes heroFade{to{opacity:1;transform:none;filter:blur(0)}}

/* placeholder media */
.ph{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#DDE3E6}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-anim="rise"]{opacity:1;transform:none;filter:none}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .feature-grid{grid-template-columns:minmax(0,1fr)}
  .ins-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-grid{grid-template-columns:minmax(0,1fr)}
  .about-faces{margin-top:28px}
  .testi-grid{grid-template-columns:minmax(0,.26fr) minmax(0,.74fr)}
  .testi-right{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
  .testi-face2{max-width:130px}
}
@media (max-width:760px){
  :root{--r-shell:26px}
  .nav-pills{display:none}
  .svc-pills{position:static;align-items:flex-start;margin-top:34px;padding-bottom:8px}
  .svc-row{justify-content:flex-start}
  .hero-title .line-2{padding-left:0}
  .hero-bar{flex-direction:column;gap:10px;text-align:center}
  .feat-left{grid-template-columns:minmax(0,1fr)}
  .about-bottom{grid-template-columns:minmax(0,1fr)}
  .ins-head{grid-template-columns:minmax(0,1fr)}
  .ins-grid{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .foot-cols{grid-template-columns:minmax(0,1fr)}
  .testi-grid{grid-template-columns:minmax(0,1fr)}
  .foot-bar{grid-template-columns:1fr;gap:8px;text-align:center}
  .foot-bar span{justify-self:center!important}
  .stat-card{position:static;margin-top:16px;left:auto;right:auto}
  .room{aspect-ratio:16/11}
}

/* =========================================================
   PHASE 1 — content-strategy-v1 additions
   All new sections. Reuses existing tokens where possible.
   ========================================================= */

/* ---- nav right cluster (lang toggle + CTA) ---- */
.nav-right{display:flex;align-items:center;gap:14px}
.lang-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:rgba(255,255,255,.94);
  font-family:var(--f-body);font-size:12.5px;font-weight:500;letter-spacing:.02em;
  transition:background .3s var(--ease), transform .3s var(--ease);
  cursor:pointer;
}
.lang-toggle:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
.lang-toggle .lang-sep{opacity:.35}
.lang-toggle .is-active{color:#fff;font-weight:600}
.lang-toggle span:not(.is-active){opacity:.6}

/* ---- hero CTA duo (Call + WhatsApp) ---- */
.hero-ctas{
  display:inline-flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(18px,2.6vw,40px);
}
.btn-wa{
  display:inline-flex;align-items:center;gap:12px;
  background:#25D366;color:#0B2E14;
  border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:14px;font-weight:600;
  padding:13px 22px 13px 13px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  box-shadow:0 2px 14px rgba(37,211,102,.30);
}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,211,102,.35);background:#20BA5B}
.ic-circle.wa{background:#fff;color:#25D366}

/* ---- TRUST BAR ---- */
.trustbar{background:var(--page);padding:clamp(22px,2.9vw,44px) 0 clamp(10px,1.2vw,18px)}
.trust-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.32vw,20px);
  padding-inline:var(--pad);
}
.trust-chip{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 20px;border-radius:var(--r-pill);
  background:var(--page-2);border:1px solid var(--line);
  color:var(--ink);
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.trust-chip:hover{transform:translateY(-2px);background:#fff;border-color:var(--teal)}
.trust-chip .tc-ic{width:22px;height:22px;color:var(--teal);flex:none}
.trust-chip b{font-family:var(--f-display);font-weight:500;font-size:clamp(13px,1.05vw,16px);letter-spacing:-.014em;display:block;line-height:1.1}
.trust-chip em{font-style:normal;font-size:clamp(11px,.79vw,12px);color:var(--grey-1);display:block;margin-top:2px}

/* ---- SERVICES GRID (NEW) ---- */
.services{background:var(--page);padding:clamp(52px,7.1vw,108px) 0 clamp(40px,5.2vw,80px)}
.services-head{max-width:820px;margin-bottom:clamp(28px,3.6vw,56px)}
.services-head .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(28px,3.16vw,48px);line-height:1.15}
.services-head .lede{margin-top:clamp(14px,1.45vw,22px);font-size:clamp(14px,1.12vw,17px);line-height:1.65;color:var(--grey-1);max-width:66ch}
.svc-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.32vw,20px);
}
.svc-tile{
  display:flex;flex-direction:column;
  padding:clamp(20px,2vw,30px);
  background:var(--page-2);border-radius:16px;
  border:1px solid transparent;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
  color:var(--ink);text-decoration:none;
}
.svc-tile:hover{transform:translateY(-4px);background:#fff;border-color:var(--teal);box-shadow:0 24px 50px -30px rgba(0,0,0,.22)}
.svc-ic{
  width:44px;height:44px;border-radius:12px;
  background:var(--teal-soft);color:var(--teal);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:clamp(18px,1.84vw,28px);flex:none;
}
.svc-ic svg{width:24px;height:24px}
.svc-tile h3{font-size:clamp(17px,1.45vw,22px);font-weight:500;letter-spacing:-.024em;line-height:1.25}
.svc-tile p{margin-top:10px;font-size:clamp(13px,1.02vw,15px);line-height:1.55;color:var(--grey-1);flex:1}
.svc-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:clamp(18px,1.84vw,28px);gap:12px;
}
.svc-price{font-family:var(--f-display);font-size:clamp(14px,1.19vw,18px);font-weight:500;letter-spacing:-.02em}
.svc-price em{font-style:normal;font-size:12px;font-weight:400;color:var(--grey-1)}
.svc-arw{width:18px;height:18px;color:var(--teal);flex:none;transition:transform .3s var(--ease)}
.svc-tile:hover .svc-arw{transform:translateX(4px)}
.services-note{
  margin-top:clamp(24px,2.9vw,44px);
  font-size:clamp(12.5px,.99vw,15px);color:var(--grey-1);line-height:1.65;
  max-width:66ch;
}

/* ---- PRICING + INSURANCE (NEW) ---- */
.pricing{background:var(--page-2);padding:clamp(52px,7.1vw,108px) 0}
.pricing-head{max-width:820px;margin-bottom:clamp(28px,3.6vw,56px)}
.pricing-head .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(28px,3.16vw,48px);line-height:1.15}
.pricing-head .lede{margin-top:clamp(14px,1.45vw,22px);font-size:clamp(14px,1.12vw,17px);line-height:1.65;color:var(--grey-1);max-width:66ch}
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.19vw,18px);
}
.price-card{
  padding:clamp(18px,1.97vw,30px);
  background:#fff;border-radius:14px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.price-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(0,0,0,.20)}
.price-name{font-size:clamp(13px,1.02vw,15px);color:var(--grey-1);letter-spacing:.005em}
.price-amt{
  margin-top:12px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(28px,2.9vw,44px);letter-spacing:-.035em;line-height:1;
  color:var(--ink);
}
.price-cur{font-size:.6em;color:var(--grey-1);font-weight:400;letter-spacing:-.02em;margin-right:2px}
.price-note{margin-top:10px;font-size:12.5px;color:var(--grey-1)}

.insurance{margin-top:clamp(32px,4vw,60px)}
.insurance-label{font-size:12.5px;letter-spacing:.06em;color:var(--grey-2);text-transform:uppercase}
.insurance-list{
  list-style:none;padding:0;margin:clamp(12px,1.32vw,20px) 0 0;
  display:flex;flex-wrap:wrap;gap:8px 10px;
}
.insurance-list li{
  padding:9px 15px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);
  font-size:clamp(12.5px,.99vw,14px);color:var(--ink);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.insurance-list li:hover{border-color:var(--teal);color:var(--teal)}
.insurance-list li.ins-more{background:transparent;border-color:transparent;color:var(--grey-1);font-style:italic}
.emi-line{margin-top:clamp(18px,2vw,30px);font-size:clamp(13px,1.05vw,15.5px);line-height:1.6;color:var(--ink)}
.emi-line b{font-weight:600}

/* ---- LOCATION (NEW) ---- */
.location{background:var(--page);padding:clamp(52px,7.1vw,108px) 0}
.loc-grid{display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);gap:clamp(24px,3.4vw,52px);align-items:center}
.loc-left .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(28px,3.16vw,48px);line-height:1.15}
.loc-address{margin-top:clamp(20px,2.4vw,36px);font-style:normal}
.loc-address p{font-size:clamp(14px,1.12vw,16px);line-height:1.65;color:var(--ink)}
.loc-address p b{font-family:var(--f-display);font-size:clamp(16px,1.32vw,20px);font-weight:500;letter-spacing:-.02em;display:block;margin-bottom:6px}
.loc-meta{list-style:none;padding:0;margin:clamp(20px,2.4vw,36px) 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.loc-meta li{display:flex;flex-direction:column;gap:4px;font-size:clamp(12.5px,.99vw,14px)}
.loc-meta li b{font-weight:500;color:var(--ink-2)}
.loc-meta li span{color:var(--grey-1)}
.loc-left .btn-teal{margin-top:clamp(4px,.5vw,10px)}
.map-placeholder{
  width:100%;aspect-ratio:1/.85;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg, var(--teal-soft) 0%, #F1F6F7 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.map-placeholder::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(42,168,198,.06) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(42,168,198,.06) 0 2px, transparent 2px 22px);
}
.map-inner{position:relative;text-align:center;color:var(--teal-dark)}
.map-inner svg{width:52px;height:52px;margin-bottom:10px}
.map-inner p{font-family:var(--f-display);font-weight:500;font-size:clamp(15px,1.32vw,20px);letter-spacing:-.02em}

/* Real Google Maps iframe embed (replaces .map-placeholder) */
.map-embed{
  width:100%;aspect-ratio:1/.85;border:0;border-radius:20px;overflow:hidden;
  display:block;background:var(--page-2);
  box-shadow:0 1px 2px rgba(0,0,0,.02);
}
.map-embed-big{aspect-ratio:16/12;margin-bottom:16px}

/* ---- CONTACT TRIO (NEW) ---- */
.contact-trio{background:var(--page-2);padding:clamp(52px,7.1vw,108px) 0 clamp(40px,5.2vw,80px)}
.ct-head{max-width:720px;margin:0 auto clamp(28px,3.6vw,56px);text-align:center}
.ct-head .badge{display:inline-flex}
.ct-head .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(28px,3.16vw,48px);line-height:1.15}
.ct-head .lede{margin-top:clamp(14px,1.45vw,22px);font-size:clamp(14px,1.12vw,17px);line-height:1.65;color:var(--grey-1)}
.ct-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.45vw,22px);
}
.ct-card{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.5vw,38px);
  background:#fff;border-radius:20px;
  border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  color:var(--ink);text-decoration:none;
}
.ct-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(0,0,0,.22);border-color:var(--teal)}
.ct-ic{
  width:56px;height:56px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:clamp(18px,1.84vw,24px);flex:none;
}
.ct-ic svg{width:28px;height:28px}
.ct-call .ct-ic{background:var(--teal-soft);color:var(--teal)}
.ct-wa .ct-ic{background:#DCF6E2;color:#25D366}
.ct-form .ct-ic{background:#F1EAFC;color:#7C3AED}
.ct-card h3{font-size:clamp(18px,1.58vw,24px);font-weight:500;letter-spacing:-.024em}
.ct-value{
  margin-top:12px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(18px,1.71vw,26px);letter-spacing:-.024em;color:var(--ink);
}
.ct-note{margin-top:10px;font-size:12.5px;color:var(--grey-1);line-height:1.55}
.ct-form input,.ct-form select{
  width:100%;margin-top:10px;
  padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);
  background:var(--page-2);
  font:inherit;font-size:14px;color:var(--ink);
  outline:none;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.ct-form input:focus,.ct-form select:focus{border-color:var(--teal);background:#fff}
.ct-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236B6E72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
/* Form-submit variant reuses .btn-teal — see .btn-teal in the base layer.
   The .ct-submit / .cf-submit class now only adds layout tweaks
   (top margin, self-alignment) so the visual matches every other CTA. */
.ct-submit{margin-top:14px;align-self:flex-start}
.ct-emergency{
  margin-top:clamp(32px,3.6vw,52px);text-align:center;
  font-size:clamp(13px,1.05vw,15.5px);color:var(--ink);
}
.ct-emergency a{color:var(--teal);font-weight:600;border-bottom:1px solid currentColor}

/* screen-reader only label */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- FOOTER additions ---- */
.foot-brand{display:flex;flex-direction:column;gap:clamp(18px,2vw,30px)}
.foot-nap{font-style:normal;font-size:clamp(13px,1.05vw,15px);line-height:1.7;color:var(--ink)}
.foot-nap p{margin:0}
.foot-nap p b{font-family:var(--f-display);font-weight:500;font-size:clamp(15px,1.19vw,17px);letter-spacing:-.02em}
.foot-nap a{color:var(--ink);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.foot-nap a:hover{border-color:var(--teal);color:var(--teal)}

/* ---- FLOATING WHATSAPP BUBBLE ---- */
.wa-bubble{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 12px 34px -10px rgba(37,211,102,.55),0 4px 12px rgba(0,0,0,.15);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  animation:waFloat 3s ease-in-out infinite;
}
.wa-bubble:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 20px 46px -12px rgba(37,211,102,.65)}
.wa-bubble svg{width:30px;height:30px}
@keyframes waFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* =========================================================
   RESPONSIVE additions for new sections
   ========================================================= */
@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-grid{grid-template-columns:minmax(0,1fr)}
  .loc-grid{grid-template-columns:minmax(0,1fr)}
  .nav-right .lang-toggle{display:none}
}
@media (max-width:760px){
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loc-meta{grid-template-columns:minmax(0,1fr)}
  .trust-list{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x mandatory;padding-bottom:6px}
  .trust-chip{flex:none;scroll-snap-align:start}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .btn-wa,.hero-cta{justify-content:center}
  .wa-bubble{width:52px;height:52px;right:16px;bottom:16px}
}

/* =========================================================
   PHASE 2 — internal pages (services / doctors / pricing /
   contact / appointment / faq / location)
   All additive. Reuses existing tokens.
   ========================================================= */

/* ---- Page body defaults (internal pages have no shell frame) ---- */
body.page{background:var(--page)}

/* ---- Nav variant for solid backgrounds ---- */
.nav.nav-solid{
  position:sticky;top:0;z-index:50;
  background:rgba(253,253,253,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:clamp(12px,1.4vw,20px) var(--pad);
  animation:none;
}
.nav.nav-solid .logo{color:var(--ink)}
.nav.nav-solid .logo-mark{color:var(--teal)}
.nav.nav-solid .nav-pills{background:transparent}
.nav.nav-solid .npill{
  color:var(--ink-2);background:transparent;border-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav.nav-solid .npill:hover{background:var(--page-2);color:var(--ink);transform:none}
.nav.nav-solid .npill.is-active{background:var(--ink);color:#fff;font-weight:500}
.nav.nav-solid .lang-toggle{color:var(--ink-2);background:var(--page-2);border-color:var(--line)}
.nav.nav-solid .lang-toggle:hover{background:#fff}
.nav.nav-solid .lang-toggle .is-active{color:var(--ink)}

/* ---- Page hero (slim) ---- */
.page-hero{padding:clamp(52px,7vw,110px) 0 clamp(40px,5vw,80px);background:var(--page)}
.page-hero .wrap{padding-inline:var(--pad)}
.page-hero .badge{display:inline-flex}
.page-h1{
  margin-top:clamp(16px,2vw,30px);
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(34px,5.2vw,80px);line-height:1.05;letter-spacing:-.032em;
  max-width:16ch;
}
.page-hero .page-lede{
  margin-top:clamp(18px,2vw,30px);
  font-size:clamp(15px,1.32vw,20px);line-height:1.55;color:var(--grey-1);
  max-width:60ch;
}
.page-hero-tight{padding-bottom:clamp(20px,2.5vw,40px)}

/* Breadcrumbs */
.crumbs{
  list-style:none;padding:0;margin:clamp(22px,2.6vw,40px) 0 0;
  display:flex;flex-wrap:wrap;gap:8px;
  font-size:12.5px;color:var(--grey-1);
}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--grey-2)}
.crumbs a{color:var(--teal);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.crumbs a:hover{border-color:currentColor}
.crumbs [aria-current]{color:var(--ink)}

/* ---- Category subnav (sticky pills) ---- */
.catnav{
  position:sticky;top:64px;z-index:40;
  background:rgba(253,253,253,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:12px 0;
}
.catnav-inner{
  display:flex;gap:8px;overflow-x:auto;
  padding-inline:var(--pad);
  scroll-snap-type:x mandatory;
  -ms-overflow-style:none;scrollbar-width:none;
}
.catnav-inner::-webkit-scrollbar{display:none}
.catpill{
  flex:none;scroll-snap-align:start;
  padding:9px 17px;border-radius:var(--r-pill);
  background:var(--page-2);color:var(--ink-2);
  font-size:13.5px;font-weight:500;letter-spacing:-.005em;
  transition:background .3s var(--ease), color .3s var(--ease);
  border:1px solid transparent;
}
.catpill:hover{background:#fff;border-color:var(--line)}
.catpill.is-active{background:var(--ink);color:#fff}

/* ---- Service detail blocks (services.html) ---- */
.svc-block{padding:clamp(52px,7vw,108px) 0}
.svc-block-alt{background:var(--page-2)}
.svc-block-head{max-width:820px;margin-bottom:clamp(30px,4vw,60px)}
.svc-block-head .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(28px,3.16vw,48px);line-height:1.15}
.svc-block-head .lede{margin-top:clamp(14px,1.45vw,22px);font-size:clamp(14px,1.12vw,17px);line-height:1.65;color:var(--grey-1);max-width:66ch}
.svc-detail{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,2.5vw,40px);align-items:center;
  padding:clamp(24px,2.8vw,42px);
  background:#fff;border-radius:16px;
  border:1px solid var(--line);
  margin-bottom:clamp(14px,1.45vw,22px);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-detail:hover{border-color:var(--teal);box-shadow:0 24px 50px -30px rgba(0,0,0,.15)}
.svc-block-alt .svc-detail{background:var(--page)}
.svc-detail-left{min-width:0}
.svc-ic-lg{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;
  background:var(--teal-soft);color:var(--teal);
  margin-bottom:clamp(14px,1.45vw,22px);
}
.svc-ic-lg svg{width:26px;height:26px}
.svc-detail h3{font-size:clamp(20px,1.84vw,28px);font-weight:500;letter-spacing:-.028em;line-height:1.2}
.svc-detail-left p{margin-top:10px;font-size:clamp(14px,1.12vw,16.5px);line-height:1.6;color:var(--grey-1);max-width:60ch}
.svc-meta{
  list-style:none;padding:0;margin:clamp(18px,2vw,30px) 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 24px;
}
.svc-meta li{display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.svc-meta li b{font-weight:500;color:var(--ink-2);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.svc-meta li span{color:var(--ink);line-height:1.4}
.svc-meta li em{font-style:normal;color:var(--grey-1);font-size:12px}

/* Emergency box */
.emergency-box{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,2.5vw,40px);align-items:center;
  padding:clamp(24px,3vw,44px);
  background:linear-gradient(135deg, #FFF4EC 0%, #FFECDC 100%);
  border-radius:20px;
}
.em-badge{
  display:inline-block;padding:6px 12px;border-radius:var(--r-pill);
  background:#E45C2B;color:#fff;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  margin-bottom:14px;
}
.emergency-box h3{font-size:clamp(20px,2.1vw,32px);font-weight:500;letter-spacing:-.028em}
.emergency-box p{margin-top:8px;font-size:clamp(14px,1.12vw,16px);line-height:1.55;color:var(--ink-2);max-width:52ch}

/* ---- Doctors page ---- */
.doc-page{padding:clamp(52px,7vw,108px) 0}
.doc-page-alt{background:var(--page-2)}
.doc-grid{
  display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(28px,3.6vw,60px);align-items:start;
}
.doc-grid-flip{grid-template-columns:minmax(0,.66fr) minmax(0,.34fr)}
.doc-grid-flip .doc-side{order:2}
.doc-grid-flip .doc-main{order:1}
.doc-portrait{
  width:100%;aspect-ratio:1;border-radius:24px;
  background-color:var(--page-2);
}
.doc-quick{
  margin-top:clamp(20px,2vw,30px);
  padding:clamp(20px,2vw,30px);
  background:#fff;border:1px solid var(--line);border-radius:16px;
}
.doc-page-alt .doc-quick{background:var(--page)}
.doc-role-tag{font-size:12px;letter-spacing:.05em;color:var(--teal);text-transform:uppercase;font-weight:600;margin-bottom:14px}
.doc-quick ul{list-style:none;padding:0;margin:0 0 clamp(18px,2vw,26px);display:grid;gap:10px}
.doc-quick li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--grey-1);padding-bottom:10px;border-bottom:1px solid var(--line)}
.doc-quick li:last-child{border-bottom:0}
.doc-quick li b{color:var(--ink);font-weight:500}
.doc-main .h2{font-size:clamp(30px,3.6vw,52px);line-height:1.1}
.doc-creds{margin-top:12px;font-size:clamp(14px,1.19vw,17px);color:var(--teal);font-weight:500;letter-spacing:-.005em}
.doc-section{margin-top:clamp(24px,2.8vw,42px)}
.doc-section h3{font-size:clamp(16px,1.32vw,20px);font-weight:500;letter-spacing:-.02em;color:var(--ink-2);margin-bottom:12px}
.doc-section p{font-size:clamp(14px,1.12vw,16.5px);line-height:1.65;color:var(--grey-1);margin-bottom:12px;max-width:65ch}
.doc-list{list-style:none;padding:0;margin:0}
.doc-list li{position:relative;padding-left:24px;font-size:clamp(14px,1.12vw,16px);line-height:1.55;color:var(--ink-2);margin-bottom:10px}
.doc-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.doc-quote{
  margin:0;padding:clamp(20px,2vw,30px);
  background:var(--page-2);border-left:3px solid var(--teal);border-radius:0 12px 12px 0;
  font-family:var(--f-display);font-size:clamp(16px,1.45vw,20px);line-height:1.55;font-style:italic;letter-spacing:-.014em;color:var(--ink);
}
.doc-page-alt .doc-quote{background:#fff}
.doc-quote cite{display:block;margin-top:12px;font-size:13px;font-style:normal;color:var(--grey-1)}

/* ---- Pricing full tables ---- */
.pricing-full{padding:clamp(52px,7vw,108px) 0}
.price-disclaimer{
  padding:16px 20px;background:var(--page-2);border-radius:12px;
  font-size:13.5px;line-height:1.6;color:var(--grey-1);margin-bottom:clamp(28px,3vw,44px);
}
.price-disclaimer b{color:var(--ink-2);font-weight:600}
.price-table{margin-bottom:clamp(30px,3.6vw,54px)}
.pt-h{font-size:clamp(20px,1.84vw,28px);font-weight:500;letter-spacing:-.024em;margin-bottom:14px;color:var(--ink)}
.price-table table{
  width:100%;border-collapse:collapse;
  background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);
}
.price-table thead{background:var(--page-2)}
.price-table th{
  text-align:left;padding:14px 18px;font-size:12px;letter-spacing:.06em;color:var(--grey-1);text-transform:uppercase;font-weight:500;
  border-bottom:1px solid var(--line);
}
.price-table td{
  padding:14px 18px;font-size:14px;color:var(--ink);
  border-bottom:1px solid var(--line);vertical-align:top;
}
.price-table tr:last-child td{border-bottom:0}
.price-table td:nth-child(2){font-family:var(--f-display);font-weight:500;color:var(--ink);white-space:nowrap}
.price-table td:nth-child(3),.price-table td:nth-child(4){color:var(--grey-1)}

.insurance-panel{background:var(--page-2);padding:clamp(52px,7vw,108px) 0}
.insurance-panel .ins-head{max-width:820px;margin-bottom:clamp(28px,3vw,44px)}
.insurance-panel .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(28px,3.16vw,48px);line-height:1.15}
.insurance-panel .lede{margin-top:clamp(14px,1.45vw,22px);font-size:clamp(14px,1.12vw,17px);line-height:1.65;color:var(--grey-1);max-width:66ch}
.ins-big li{padding:12px 20px;font-size:14px}
.ins-note{margin-top:clamp(20px,2.4vw,32px);font-size:14px;line-height:1.65;color:var(--grey-1);max-width:70ch}
.ins-note a{color:var(--teal);border-bottom:1px solid currentColor}

.emi-panel{padding:clamp(52px,7vw,108px) 0}
.emi-grid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,.45fr);gap:clamp(28px,3.6vw,60px);align-items:center}
.emi-left .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(28px,3.16vw,48px);line-height:1.15}
.emi-left .lede{margin-top:clamp(14px,1.45vw,22px);font-size:clamp(14px,1.12vw,17px);line-height:1.65;color:var(--grey-1);max-width:60ch}
.emi-list{list-style:none;padding:0;margin:clamp(20px,2.4vw,32px) 0 0;display:grid;gap:12px}
.emi-list li{padding:14px 18px;background:var(--page-2);border-radius:10px;font-size:14px;color:var(--ink-2)}
.emi-list li b{color:var(--ink);font-weight:600;margin-right:6px}
.emi-example{
  padding:clamp(28px,3.2vw,48px);
  background:linear-gradient(160deg, var(--teal-soft) 0%, #F0FCFF 100%);
  border-radius:24px;
  text-align:center;
}
.emi-eg-label{font-size:12.5px;letter-spacing:.06em;color:var(--teal-dark);text-transform:uppercase;font-weight:500}
.emi-eg-headline{
  margin-top:14px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(32px,3.6vw,52px);letter-spacing:-.03em;line-height:1.05;color:var(--ink);
}
.emi-eg-headline em{font-size:.42em;font-style:normal;color:var(--grey-1);font-weight:400;margin-left:6px}
.emi-eg-note{margin-top:12px;font-size:13px;color:var(--grey-1)}
.emi-example .btn-teal{margin-top:clamp(20px,2vw,28px)}

/* ---- FAQ accordion (uses native <details>) ---- */
.faq-block{padding:clamp(48px,6.6vw,100px) 0}
.faq-block-alt{background:var(--page-2)}
.faq-head{max-width:720px;margin-bottom:clamp(28px,3.2vw,48px)}
.faq-head .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(26px,3.16vw,44px);line-height:1.15}
.faq-list{display:grid;gap:clamp(10px,1.05vw,16px);max-width:900px}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:0 clamp(20px,2vw,28px);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-block-alt .faq-item{background:var(--page)}
.faq-item[open]{border-color:var(--teal);box-shadow:0 20px 40px -30px rgba(0,0,0,.15)}
.faq-item summary{
  list-style:none;cursor:pointer;
  padding:clamp(18px,2vw,26px) 0;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(15px,1.32vw,19px);letter-spacing:-.018em;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";width:20px;height:20px;flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item p{
  padding:0 0 clamp(20px,2vw,28px);margin:0;
  font-size:clamp(14px,1.12vw,16px);line-height:1.65;color:var(--grey-1);max-width:70ch;
}

/* ---- Contact full form ---- */
.contact-trio-first{padding-top:clamp(28px,3vw,44px)}
.contact-full{padding:clamp(52px,7vw,108px) 0}
.contact-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);gap:clamp(28px,3.6vw,56px);align-items:start}
.contact-form-wrap .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(28px,3.16vw,44px);line-height:1.15}
.contact-form-wrap .lede{margin-top:clamp(14px,1.45vw,22px);font-size:clamp(14px,1.12vw,16.5px);line-height:1.6;color:var(--grey-1)}
.contact-form{margin-top:clamp(24px,2.6vw,40px);display:grid;gap:clamp(14px,1.45vw,22px)}
.cf-row{display:grid;gap:clamp(14px,1.45vw,22px)}
.cf-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cf-field{display:flex;flex-direction:column;gap:8px}
.cf-field span{font-size:13px;font-weight:500;color:var(--ink-2)}
.cf-field input,.cf-field select,.cf-field textarea{
  padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--page-2);
  font:inherit;font-size:14px;color:var(--ink);outline:none;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:var(--teal);background:#fff}
.cf-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236B6E72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
.cf-field textarea{min-height:96px;resize:vertical;font-family:inherit}
.cf-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--grey-1);line-height:1.5}
.cf-check input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--teal)}
.cf-submit{justify-self:start;align-self:flex-start;margin-top:6px}
.cf-note{font-size:12.5px;color:var(--grey-1)}
.cf-note a{color:var(--teal);border-bottom:1px solid currentColor}

.contact-side{position:sticky;top:100px;display:grid;gap:16px}
.side-card{padding:clamp(20px,2vw,28px);background:var(--page-2);border-radius:16px}
.side-card h3{font-family:var(--f-display);font-weight:500;font-size:clamp(15px,1.19vw,17px);letter-spacing:-.018em;margin-bottom:12px}
.side-card p{font-size:13.5px;line-height:1.6;color:var(--grey-1);margin:0 0 12px}
.side-card-alert{background:linear-gradient(135deg, #FFF4EC 0%, #FFECDC 100%)}
.btn-block{display:flex;justify-content:center}
.hours-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hours-list li{display:flex;justify-content:space-between;font-size:13.5px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.hours-list li:last-child{border-bottom:0}
.hours-list li b{font-weight:500;color:var(--ink-2)}
.hours-list li span{color:var(--grey-1)}
.ct-email .ct-ic{background:#F1EAFC;color:#7C3AED}

/* ---- Appointment multi-step form ---- */
.appt-form-section{padding:clamp(30px,4vw,60px) 0 clamp(52px,7vw,108px)}
.appt-wrap{max-width:820px;margin:0 auto}
.appt-progress{
  list-style:none;padding:0;margin:0 0 clamp(28px,3vw,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  counter-reset:step;
}
.appt-progress li{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-radius:12px;
  background:var(--page-2);border:1px solid var(--line);
  color:var(--grey-1);
  transition:.3s var(--ease);
}
.appt-progress li.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.appt-progress li.is-done{background:var(--teal-soft);color:var(--teal-dark);border-color:var(--teal-soft)}
.ap-num{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.2);color:currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.appt-progress li:not(.is-active) .ap-num{background:#fff;color:var(--ink-2);border:1px solid var(--line)}
.ap-label{font-size:13.5px;font-weight:500}

.appt-form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,44px)}
.appt-step{border:0;padding:0;margin:0;display:none}
.appt-step.is-active{display:block}
.appt-step legend{
  padding:0;margin:0 0 8px;
  font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.5vw,32px);letter-spacing:-.024em;line-height:1.15;color:var(--ink);
}
.step-help{font-size:14px;color:var(--grey-1);line-height:1.55;margin-bottom:clamp(20px,2.4vw,32px);max-width:60ch}
.svc-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:clamp(24px,2.6vw,36px)}
.svc-pick{cursor:pointer}
.svc-pick input{position:absolute;opacity:0;pointer-events:none}
.svc-pick-inner{
  display:block;padding:14px 18px;border-radius:12px;
  background:var(--page-2);border:1.5px solid var(--line);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.svc-pick:hover .svc-pick-inner{border-color:var(--teal)}
.svc-pick input:checked+.svc-pick-inner{border-color:var(--teal);background:var(--teal-soft)}
.svc-pick-inner b{display:block;font-weight:500;font-size:14.5px;color:var(--ink)}
.svc-pick-inner em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--grey-1)}
.svc-pick-alert .svc-pick-inner b{color:#E45C2B}

.appt-nav{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:clamp(20px,2.4vw,32px);flex-wrap:wrap;
}
.btn-ghost{
  padding:12px 18px;border-radius:var(--r-pill);
  background:transparent;color:var(--ink-2);font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .3s var(--ease);
}
.btn-ghost:hover{background:var(--page-2)}

.appt-thanks{padding:clamp(30px,4vw,60px) 0;text-align:center}
.thanks-inner{max-width:520px;margin:0 auto}
.thanks-tick{
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:var(--teal-soft);color:var(--teal);margin-bottom:22px;
}
.thanks-tick svg{width:44px;height:44px}
.appt-thanks .h2{font-size:clamp(24px,2.6vw,34px);line-height:1.2}
.appt-thanks p{margin-top:14px;font-size:15px;color:var(--grey-1);line-height:1.6}
.thanks-ctas{margin-top:clamp(20px,2.4vw,32px);display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---- Location page ---- */
.loc-page{padding:clamp(52px,7vw,108px) 0}
.loc-big-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,.4fr);gap:clamp(28px,3.6vw,56px);align-items:start}
.map-placeholder-big{aspect-ratio:16/12;border-radius:20px;margin-bottom:16px}
.map-sub{font-size:12.5px;color:var(--grey-1);margin-top:4px;font-family:var(--f-body);font-weight:400;letter-spacing:0}
.loc-details{display:grid;gap:clamp(24px,2.6vw,36px)}
.loc-block .h2{font-size:clamp(20px,1.84vw,26px);line-height:1.2;margin-bottom:14px}
.loc-block address p{font-size:14.5px;line-height:1.65;color:var(--ink)}
.loc-block address p b{font-family:var(--f-display);font-weight:500;font-size:clamp(16px,1.32vw,18px);letter-spacing:-.018em}
.loc-contact{font-size:14px;margin-top:8px}
.loc-contact a{color:var(--ink);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.loc-contact a:hover{border-color:var(--teal);color:var(--teal)}
.loc-facts{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.loc-facts li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.loc-facts li:last-child{border-bottom:0}
.loc-facts li b{font-weight:500;color:var(--ink-2)}
.loc-facts li span{color:var(--grey-1);text-align:right}

/* Directions grid */
.directions{background:var(--page-2);padding:clamp(52px,7vw,108px) 0}
.dir-head{max-width:720px;margin-bottom:clamp(28px,3vw,44px)}
.dir-head .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(28px,3.16vw,44px);line-height:1.15}
.dir-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.45vw,22px)}
.dir-card{padding:clamp(22px,2.4vw,32px);background:#fff;border-radius:16px;border:1px solid var(--line);transition:border-color .3s var(--ease), transform .3s var(--ease)}
.dir-card:hover{border-color:var(--teal);transform:translateY(-3px)}
.dir-ic{
  width:40px;height:40px;border-radius:10px;
  background:var(--teal-soft);color:var(--teal);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.dir-ic svg{width:22px;height:22px}
.dir-card h3{font-size:clamp(16px,1.32vw,20px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.dir-steps{margin:12px 0 0;padding-left:20px;color:var(--grey-1);font-size:14px;line-height:1.7}
.dir-steps li{margin-bottom:4px}
.dir-time{margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.dir-time b{font-family:var(--f-display);font-size:15px;font-weight:500;color:var(--teal);margin-right:4px}

/* Nearby landmarks */
.nearby{padding:clamp(52px,7vw,108px) 0}
.near-head{max-width:720px;margin-bottom:clamp(24px,2.6vw,40px)}
.near-head .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(26px,3.16vw,40px);line-height:1.15}
.near-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.near-list li{display:flex;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--page-2);border-radius:12px;font-size:14px}
.near-list li b{font-weight:500;color:var(--ink)}
.near-list li span{color:var(--grey-1);font-size:13px}

/* =========================================================
   RESPONSIVE for internal pages
   ========================================================= */
@media (max-width:1080px){
  .doc-grid,.doc-grid-flip{grid-template-columns:minmax(0,1fr)}
  .doc-grid-flip .doc-side{order:0}
  .doc-grid-flip .doc-main{order:0}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-side{position:static}
  .loc-big-grid{grid-template-columns:minmax(0,1fr)}
  .emi-grid{grid-template-columns:minmax(0,1fr)}
  .dir-grid{grid-template-columns:minmax(0,1fr)}
  .near-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-detail{grid-template-columns:minmax(0,1fr)}
  .svc-detail-right{justify-self:start}
  .svc-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .nav.nav-solid .nav-pills{display:none}
  .catnav{top:56px}
  .cf-row-2{grid-template-columns:minmax(0,1fr)}
  .appt-progress{grid-template-columns:minmax(0,1fr);gap:8px}
  .svc-picker{grid-template-columns:minmax(0,1fr)}
  .near-list{grid-template-columns:minmax(0,1fr)}
  .emergency-box{grid-template-columns:minmax(0,1fr)}
  .price-table{overflow-x:auto}
  .price-table table{min-width:520px}
  .svc-meta{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================
   PHASE 3 — blog index + article typography + i18n toggle
   All additive.
   ========================================================= */

/* ---- Blog featured post ---- */
.blog-featured{padding:clamp(30px,4vw,60px) 0}
.feat-card{
  display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,.45fr);
  gap:clamp(24px,3vw,44px);align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:24px;
  overflow:hidden;color:var(--ink);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.2);border-color:var(--teal)}
.feat-media{position:relative;aspect-ratio:16/11;min-height:280px}
.feat-chip{
  position:absolute;top:16px;left:16px;
  padding:7px 15px;border-radius:var(--r-pill);
  background:#fff;color:var(--ink);font-size:12.5px;font-weight:500;
}
.feat-body{padding:clamp(28px,3vw,48px);display:flex;flex-direction:column;justify-content:center}
.feat-eyebrow{font-size:12px;letter-spacing:.06em;color:var(--teal);text-transform:uppercase;font-weight:600;margin-bottom:14px}
.feat-title{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,2.8vw,40px);letter-spacing:-.028em;line-height:1.15;color:var(--ink)}
.feat-excerpt{margin-top:16px;font-size:clamp(14px,1.19vw,16.5px);line-height:1.6;color:var(--grey-1)}
.feat-meta{display:inline-flex;align-items:center;gap:12px;margin-top:22px}
.feat-meta .pm-av{width:36px;height:36px;border-radius:50%}
.feat-meta b{font-weight:500;font-size:14px;color:var(--ink)}
.feat-meta em{display:block;margin-top:2px;font-style:normal;font-size:12.5px;color:var(--grey-1)}

/* ---- Blog grid ---- */
.blog-grid-section{padding:clamp(20px,3vw,52px) 0 clamp(52px,7vw,108px)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.58vw,24px)}
.post-link{display:flex;flex-direction:column;color:inherit;text-decoration:none;height:100%}
.post-excerpt{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--grey-1);flex:1}
.post-soon{opacity:.7;pointer-events:none}
.post-soon .post-link{cursor:default}
.post-soon .post-img{filter:saturate(.6)}
.soon-tag{
  position:absolute;top:15px;right:15px;
  padding:6px 12px;border-radius:var(--r-pill);
  background:#0B0B0C;color:#fff;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
}

/* ---- Blog newsletter section ---- */
.blog-news{background:var(--page-2);padding:clamp(52px,7vw,108px) 0}
.blog-news-inner{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,.45fr);gap:clamp(24px,3vw,48px);align-items:center}
.blog-news-inner .h2{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(26px,3vw,40px);line-height:1.15}
.blog-news-inner .lede{margin-top:clamp(14px,1.45vw,22px);font-size:clamp(14px,1.12vw,16.5px);line-height:1.6;color:var(--grey-1)}
.news-form-lg{padding:10px 10px 10px 22px}
.news-form-lg input{font-size:15px;padding:14px 0}
.news-form-lg button{padding:14px 28px;font-size:14px}

/* =========================================================
   ARTICLE PAGE (blog/*.html)
   ========================================================= */
.article-page .nav.nav-solid{border-bottom-color:var(--line)}
.article-hero{padding:clamp(30px,4vw,60px) 0 clamp(20px,3vw,44px)}
.article-hero .chip{display:inline-flex;padding:7px 15px;background:var(--teal-soft);color:var(--teal-dark);border-radius:var(--r-pill);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.article-title{
  margin-top:20px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(30px,4.6vw,64px);letter-spacing:-.03em;line-height:1.08;
  max-width:22ch;
}
.article-meta{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:clamp(20px,2.4vw,32px);
  font-size:14px;color:var(--grey-1);
}
.article-meta .pm-av{width:36px;height:36px;border-radius:50%;flex:none}
.article-meta b{font-weight:500;color:var(--ink)}
.meta-dot{opacity:.4}

.article-body{padding:clamp(28px,4vw,64px) 0 clamp(52px,7vw,108px)}
.article-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}

/* Sticky TOC */
.article-toc{position:sticky;top:110px;font-size:13.5px}
.toc-label{
  font-size:11px;letter-spacing:.08em;color:var(--grey-2);text-transform:uppercase;font-weight:600;
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.article-toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.article-toc li{counter-increment:toc;margin-bottom:8px}
.article-toc a{
  display:flex;align-items:baseline;gap:8px;
  color:var(--grey-1);padding:6px 0;
  border-left:2px solid transparent;padding-left:12px;margin-left:-14px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.article-toc a::before{content:counter(toc, decimal-leading-zero);font-size:11px;color:var(--grey-2);font-variant-numeric:tabular-nums}
.article-toc a:hover{color:var(--ink);border-color:var(--teal)}

/* Prose typography */
.article-prose{max-width:70ch;font-size:clamp(15px,1.25vw,17.5px);line-height:1.75;color:var(--ink-2)}
.article-prose .lede{font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--ink);margin-bottom:clamp(24px,3vw,44px)}
.article-prose h2{
  margin-top:clamp(32px,4vw,60px);margin-bottom:18px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(22px,2.4vw,32px);letter-spacing:-.024em;line-height:1.2;color:var(--ink);
  scroll-margin-top:120px;
}
.article-prose h3{
  margin-top:clamp(22px,2.6vw,32px);margin-bottom:12px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(18px,1.71vw,22px);letter-spacing:-.02em;color:var(--ink);
}
.article-prose p{margin:0 0 18px}
.article-prose p b, .article-prose li b{font-weight:600;color:var(--ink)}
.article-prose a{color:var(--teal);border-bottom:1px solid rgba(42,168,198,.35);transition:border-color .3s var(--ease)}
.article-prose a:hover{border-color:currentColor}

.prose-list, .prose-numbered{margin:0 0 22px;padding-left:22px}
.prose-list li, .prose-numbered li{margin-bottom:10px}
.prose-list{list-style:none;padding-left:0}
.prose-list li{position:relative;padding-left:22px}
.prose-list li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.prose-numbered{list-style:decimal;padding-left:24px}
.prose-numbered li::marker{color:var(--teal);font-weight:600}
.prose-grid{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.prose-grid li{padding:10px 14px;background:var(--page-2);border-radius:10px;font-size:14px;color:var(--ink)}
.prose-price{font-family:var(--f-display);font-weight:500;color:var(--teal-dark);white-space:nowrap}

/* Callouts */
.callout{
  padding:18px 22px;border-radius:12px;
  margin:22px 0;font-size:15px;line-height:1.6;
  border-left:3px solid var(--teal);
}
.callout p{margin:0}
.callout p b{color:var(--ink);font-weight:600}
.callout-info{background:var(--teal-soft);border-left-color:var(--teal)}
.callout-warning{background:#FFF4EC;border-left-color:#E45C2B}

/* Prose tables (reuses .price-table but wraps for mobile overflow) */
.table-wrap{overflow-x:auto;margin:22px 0}
.article-prose .price-table{background:transparent}
.article-prose .price-table table{border-radius:12px}

/* Inline CTA */
.cta-inline{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  margin:clamp(28px,3.2vw,44px) 0;
  padding:clamp(20px,2.4vw,32px);
  background:var(--page-2);border-radius:16px;
}

.prose-hr{border:0;border-top:1px solid var(--line);margin:clamp(32px,4vw,60px) 0 20px}
.prose-signature{font-family:var(--f-display);font-style:normal;font-size:15px;color:var(--grey-1)}
.prose-signature em{font-style:italic;color:var(--grey-2)}

/* Related articles */
.related{background:var(--page-2);padding:clamp(52px,7vw,108px) 0}
.related .h2{font-size:clamp(24px,2.6vw,36px);line-height:1.15;margin-bottom:clamp(24px,2.6vw,36px)}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.58vw,24px)}
.related-card{
  padding:clamp(24px,2.6vw,36px);
  background:#fff;border:1px solid var(--line);border-radius:16px;
  color:var(--ink);text-decoration:none;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.related-card:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 24px 50px -30px rgba(0,0,0,.18)}
.related-card .chip{display:inline-flex;padding:6px 12px;background:var(--teal-soft);color:var(--teal-dark);border-radius:var(--r-pill);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.related-card h3{margin-top:14px;font-family:var(--f-display);font-weight:500;font-size:clamp(17px,1.58vw,22px);letter-spacing:-.02em;line-height:1.25}
.related-card p{margin-top:10px;font-size:14px;line-height:1.55;color:var(--grey-1)}

/* Responsive */
@media (max-width:1080px){
  .feat-card{grid-template-columns:minmax(0,1fr)}
  .feat-media{min-height:200px}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-news-inner{grid-template-columns:minmax(0,1fr)}
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .article-toc{position:static;padding:20px;background:var(--page-2);border-radius:12px}
  .article-toc a{border-left:0;padding-left:0;margin-left:0}
  .related-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .blog-grid{grid-template-columns:minmax(0,1fr)}
  .prose-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-inline{flex-direction:column;align-items:stretch}
  .cta-inline .btn-teal, .cta-inline .btn-ghost{justify-content:center}
}