/* ============================================================
   MOTION + MOBILE  (loads last)
   Restrained, purposeful motion and a thorough phone pass.
   India skews heavily mobile, so the small screen is the
   primary target, not an afterthought.
   ============================================================ */

/* ---------- MOTION ---------- */

/* gentle continuous float on the hero art (depth, not distraction) */
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.hero2-art .art-main{animation:floatA 7s var(--ease) infinite}
.hero2-art .art-card{animation:floatB 6s var(--ease) infinite}
.hero2-art .art-badge{animation:floatB 5.5s var(--ease) infinite .3s}

/* subtle image zoom on hover for cards that hold photos */
.tcard .tcard-img .media,.eqcard .eq-img .media,
.space-grid .sp .media,.docbig .docbig-photo .media{transition:transform .6s var(--ease)}
.tcard:hover .tcard-img .media,.eqcard:hover .eq-img .media,
.space-grid .sp:hover .media,.docbig:hover .docbig-photo .media{transform:scale(1.045)}

/* buttons get a soft press */
.btn:active,.so-btn:active,.wa-opt:active{transform:translateY(0) scale(.98)}

/* arch images reveal by growing the arch as they enter */
[data-r] .arch,[data-r].arch{transition:clip-path .8s var(--ease),opacity .7s var(--ease),transform .7s var(--ease)}

/* floating WhatsApp bubble (desktop; mobile uses the action bar instead) */
.wa-float{position:fixed;right:20px;bottom:22px;z-index:85;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.42);
  transition:transform .25s var(--ease),box-shadow .25s}
.wa-float svg{width:28px;height:28px}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;
  animation:waPulse 2.6s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.7);opacity:0}}
.wa-float:hover{transform:scale(1.08)}
.wa-float .wa-tip{position:absolute;right:68px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--pine);color:#fff;font-size:.82rem;font-weight:600;padding:.5rem .8rem;border-radius:8px;
  opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:var(--shadow)}
.wa-float:hover .wa-tip{opacity:1}

/* header brand mark gets a tiny life on load */
@keyframes markIn{from{opacity:0;transform:scale(.7) rotate(-8deg)}to{opacity:1;transform:none}}
.brand .mark{animation:markIn .6s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  .hero2-art .art-main,.hero2-art .art-card,.hero2-art .art-badge,
  .wa-float::before,.brand .mark{animation:none}
  .tcard:hover .tcard-img .media,.eqcard:hover .eq-img .media,
  .space-grid .sp:hover .media,.docbig:hover .docbig-photo .media{transform:none}
}

/* ---------- MOBILE PASS ---------- */

/* comfortable tap targets everywhere */
@media(max-width:760px){
  .btn,.so-btn,.wa-opt,.mainnav a,.drawer-panel a.dp-link{min-height:44px}
  .btn,.so-btn{padding-block:.8rem}
  .btn.sm{min-height:40px}
}

/* hero on phones: stack, keep the collage tidy and fully on-screen */
@media(max-width:900px){
  .hero2{padding-top:1.5rem}
  .hero2-art{margin-inline:auto;width:100%;max-width:440px}
}
@media(max-width:560px){
  .hero2-art{min-height:340px}
  .hero2-art .art-main{inset:0 0 0 16%}
  .hero2-art .art-card{width:52%;bottom:2%}
  .hero2-art .art-card .media{aspect-ratio:5/4}
  .hero2-art .art-badge{top:2%;right:2%;padding:.45rem .75rem}
  .hero2-trust{gap:.7rem}
  .hero2 .btn-row{flex-direction:column;align-items:stretch}
  .hero2 .btn-row .btn,.hero2 .btn-row .so-btn{width:100%;justify-content:center}
}

/* headings tighten on small screens so they never crowd the edge */
@media(max-width:520px){
  .head{margin-bottom:1.6rem}
  .section{padding-block:clamp(2.2rem,7vw,3rem)}
  h1{line-height:1.05}
  .hero2 .lead,.lead{font-size:1.02rem}
}

/* treatment cards: full-width, larger imagery on phones */
@media(max-width:620px){
  .tcard .tcard-img{aspect-ratio:16/10}
  .tcard h3{font-size:1.15rem}
}

/* equipment: 2 up with a readable caption on phones (was hidden) */
@media(max-width:520px){
  .eq-grid{gap:.7rem}
  .eqcard .eq-b{padding:.7rem .75rem .8rem}
  .eqcard .eq-b b{font-size:.86rem}
  .eqcard .eq-b span{display:block;font-size:.74rem;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
}

/* stat band: 2 columns, generous, last item full width and centered */
@media(max-width:760px){
  .statband{padding:1.6rem 1.3rem}
  .statband .sb-grid{grid-template-columns:1fr 1fr;gap:1.5rem 1rem}
  .statband .sb b{font-size:1.9rem}
}

/* doctors big: one per row, photo not too tall on phones */
@media(max-width:820px){
  .docbig .docbig-photo{aspect-ratio:1/1}
}

/* transformations + reviews single column already; tighten gaps */
@media(max-width:520px){
  .trans-grid,.rev-grid{gap:1rem}
  .revcard{padding:1.1rem}
}

/* clinic space: simpler 2-col mosaic on phones */
@media(max-width:520px){
  .space-grid{grid-auto-rows:104px;gap:.7rem}
}

/* FAQ + prose comfortable on phones */
@media(max-width:520px){
  .faq summary{font-size:1rem;padding-block:.9rem}
  .prose{max-width:none}
}

/* the sticky bottom action bar: bigger, clearer, safe-area aware */
@media(max-width:760px){
  .mobile-bar{grid-template-columns:1fr 1fr 1fr;padding-bottom:env(safe-area-inset-bottom,0)}
  .mobile-bar a{padding:.7rem .4rem;font-size:.74rem;gap:3px}
  .mobile-bar a svg{width:21px;height:21px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0))}
  .wa-float{display:none} /* action bar already carries WhatsApp on mobile */
}

/* hide desktop-only floating WA on very large touch too when bar shows */
@media(min-width:761px){ .wa-float{display:grid} }

/* footer CTA stacks buttons full-width on phones */
@media(max-width:560px){
  .footer2 .f2-cta .btn-row{flex-direction:column;align-items:stretch}
  .footer2 .f2-cta .btn{width:100%;justify-content:center}
}

/* prevent any horizontal overflow from absolutely-positioned art */
html,body{max-width:100%}

/* ---- review card fix: smaller Google icon, less gap ---- */
.revcard .rc-g svg{width:.8em;height:.8em}
.revcard .rc-g{margin-top:.5rem}

/* ---- btn-row gap fix on reviews CTA ---- */
.btn-row{gap:.8rem}

/* ---- tcard icon/arrow size fix ---- */
.tcard .tcard-arrow svg{width:18px;height:18px}
.tcard .tcard-pill svg{width:14px;height:14px}

/* ---- media placeholder: constrain icon size inside large containers ---- */
.media-ph .media-ico{width:48px;height:48px}
.media-ph .media-ico svg{width:22px;height:22px}
.media-ph .media-tag{font-size:.68rem;max-width:80%;margin-inline:auto}

/* ---- card-ico fix (differentiator cards, secondary service cards) ---- */
.card .card-ico svg{width:22px;height:22px}

/* ============================================================
   SERVICE TABS (segregated like competitor, but cleaner)
   Self-contained so it cannot break if other CSS fails to load.
   ============================================================ */
.svc-wrap{display:grid;grid-template-columns:220px 1fr;gap:1.6rem;align-items:start}
@media(max-width:860px){.svc-wrap{grid-template-columns:1fr;gap:1rem}}

.svc-tabs{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.5rem;box-shadow:var(--shadow-sm);position:sticky;top:90px}
@media(max-width:860px){
  .svc-tabs{position:static;display:flex;gap:.4rem;overflow-x:auto;padding:.4rem;-webkit-overflow-scrolling:touch}
  .svc-tabs::-webkit-scrollbar{display:none}
}
.svc-tab{display:block;width:100%;text-align:left;padding:.7rem .9rem;border-radius:9px;font-weight:600;font-size:.95rem;color:var(--ink-soft);background:none;border:none;cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}
.svc-tab:hover{background:var(--mint-soft);color:var(--pine)}
.svc-tab.active{background:var(--mint-soft);color:var(--mint-2)}

.svc-panels{min-height:200px}
.svc-panel{display:none}
.svc-panel.active{display:block;animation:svcFade .35s var(--ease)}
@keyframes svcFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* Self-contained service card, does not depend on .tcard */
.sv{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;
    transition:transform .25s var(--ease),box-shadow .25s var(--ease);height:100%}
.sv:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sv-img{width:100%;overflow:hidden;background:var(--tint);flex:none}
.sv-img .media,.sv-img-inner{width:100%;display:block;border-radius:0!important;aspect-ratio:16/9;overflow:hidden}
.sv-img-ph{aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(135deg,var(--tint),var(--mint-soft))}
.sv-img-ph svg{width:48px;height:48px;color:var(--mint-2);opacity:.5}
.sv-body{padding:1.2rem;display:flex;flex-direction:column;flex:1}
.sv .sv-doc{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mint-2);margin-bottom:.5rem}
.sv h3{font-size:1.08rem;line-height:1.25;margin-bottom:.4rem}
.sv p{font-size:.88rem;color:var(--ink-soft);line-height:1.5;margin-bottom:.8rem;flex:1}
.sv .sv-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line)}
.sv .sv-price{font-size:.86rem;font-weight:700;color:var(--pine);font-family:var(--mono)}
.sv .sv-go{font-size:.85rem;font-weight:600;color:var(--mint-2)}
.sv:hover .sv-go{text-decoration:underline}

/* ---- honest clinic / promises band ---- */
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:900px){.promise-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.promise-grid{grid-template-columns:1fr}}
.promise{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--mint);
  border-radius:var(--radius);padding:1.2rem}
.promise h3{font-size:1.02rem;margin-bottom:.35rem}
.promise p{font-size:.9rem;color:var(--ink-soft);line-height:1.55}

/* ---- updates cards ---- */
.upd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:820px){.upd-grid{grid-template-columns:1fr}}
.upd{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow-sm)}
.upd .upd-date{font-family:var(--mono);font-size:.72rem;color:var(--mint-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
.upd h3{font-size:1.02rem;margin-bottom:.35rem}
.upd p{font-size:.9rem;color:var(--ink-soft)}