/* ============================================================
   VADODARA INSTITUTE OF PILES — shared stylesheet
   Brand: teal #39b3c2 · deep teal #0d6671 · red #d92419
   ============================================================ */

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

:root{
  --teal:         #39b3c2;
  --teal-tint:    #e3f4f6;
  --teal-deep:    #0d6671;
  --teal-deeper:  #0a4f58;
  --ink:          #16282b;
  --red:          #d92419;
  --red-deep:     #b01a12;
  --white:        #ffffff;
  --pale:         #f4fafb;
  --line:         #dfeef0;
  --text-muted:   #52686b;

  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:    'Inter', 'Plus Jakarta Sans', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --container: 1160px;
  --shadow-card: 0 10px 28px -16px rgba(13,40,44,0.22);
  --shadow-pop:  0 18px 40px -18px rgba(13,40,44,0.3);
}

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}
h1,h2,h3,h4{ font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; color: var(--ink); }
p { margin: 0 0 1em; color: var(--text-muted); }
.container{ max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 860px){ .container{ padding-inline: 32px; } }

.skip-link{ position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 8px; transition: top .2s ease; }
.skip-link:focus{ top: 12px; }
:focus-visible{ outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }

.eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 12px; }
.eyebrow::before{ content:""; width: 20px; height: 2px; background: var(--red); border-radius: 2px; }
.eyebrow.on-teal{ color: #d7fbf4; }
.eyebrow.on-teal::before{ background: #d7fbf4; }
.eyebrow.center{ justify-content: center; }

/* ---------- buttons ---------- */
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; padding: 14px 24px; border-radius: 100px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; white-space: nowrap; }
.btn svg{ width: 19px; height: 19px; flex: none; }
.btn-primary{ background: var(--red); color: var(--white); box-shadow: 0 10px 22px -10px rgba(217,36,25,0.5); }
.btn-primary:hover{ background: var(--red-deep); transform: translateY(-2px); }
.btn-outline{ background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline:hover{ background: var(--teal-tint); border-color: var(--teal); transform: translateY(-2px); }
.btn-outline.on-teal{ color: var(--white); border-color: rgba(255,255,255,.45); }
.btn-outline.on-teal:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }
.btn-block{ width: 100%; }
.btn-sm{ padding: 10px 18px; font-size: .85rem; }

/* ---------- photo placeholder frames (clean, conventional) ---------- */
.ph-frame{
  position: relative; background: var(--teal-tint); border: 1.5px dashed #b7dee2;
  border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; overflow: hidden; color: var(--teal-deep);
}
.ph-frame svg.ph-icon{ width: 30px; height: 30px; opacity: .6; }
.ph-frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.doctor-teaser-photo .doctor-photo img{ width: 100%; height: auto; object-fit: contain; display: block; }
.ph-frame .ph-label{ font-size: .74rem; letter-spacing: .04em; font-weight: 700; color: var(--teal-deep); opacity: .75; text-align: center; padding-inline: 10px; }
.ph-frame.on-teal-deep{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.75); }
.ph-frame.on-teal-deep .ph-label{ color: rgba(255,255,255,.75); }

/* ============ UTILITY BAR ============ */
.utility-bar{ background: var(--teal-deeper); color: rgba(255,255,255,.9); font-size: .82rem; display: none; }
.utility-bar .container{ display: flex; align-items: center; justify-content: space-between; padding-block: 8px; }
.utility-bar a{ text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.utility-bar a:hover{ color: #d7fbf4; }
.utility-bar svg{ width: 14px; height: 14px; }
.utility-right{ display: flex; gap: 20px; }
@media (min-width: 860px){ .utility-bar{ display: block; } }

/* ============ HEADER / NAV ============ */
header.site-header{ position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease; }
header.site-header.is-scrolled{ box-shadow: 0 8px 22px -18px rgba(13,40,44,.5); }
.nav-row{ display: flex; align-items: center; justify-content: space-between; padding-block: 12px; gap: 16px; }
.brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img{ height: 44px; width: auto; }
.brand-word{ font-family: var(--font-display); font-weight: 800; line-height: 1.05; }
.brand-word .l1{ display:block; font-size: .7rem; letter-spacing: .1em; color: var(--teal-deep); text-transform: uppercase; }
.brand-word .l2{ display:block; font-size: 1.1rem; color: var(--ink); }

.nav-links{ display: none; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a{ text-decoration: none; color: var(--ink); font-weight: 600; font-size: .94rem; position: relative; padding-block: 4px; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--red); transform: scaleX(0); transition: transform .2s ease; }
.nav-links a:hover::after{ transform: scaleX(1); }
.nav-links a[aria-current="page"]{ color: var(--red); }
.nav-links a[aria-current="page"]::after{ transform: scaleX(1); }
.nav-cta{ display: none; }
@media (min-width: 1000px){ .nav-links{ display: flex; } .nav-cta{ display: inline-flex; } }

.nav-toggle{ display: inline-flex; background: none; border: none; padding: 8px; cursor: pointer; color: var(--ink); }
.nav-toggle svg{ width: 26px; height: 26px; }
@media (min-width: 1000px){ .nav-toggle{ display: none; } }

.nav-call{ display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: var(--teal-tint); border: 1px solid var(--line); border-radius: 12px; color: #25d366; flex-shrink: 0; transition: background .2s ease, transform .2s ease; animation: navCallRing 2s ease-in-out infinite; }
.nav-call svg{ width: 22px; height: 22px; animation: navCallIcon 2s ease-in-out infinite; }
.nav-call:hover{ background: #d3eff2; transform: translateY(-1px); animation-play-state: paused; }
body.menu-open{ overflow: hidden; }
@keyframes navCallRing{ 0%,100%{ box-shadow: 0 0 0 0 rgba(37,211,102,.35); } 50%{ box-shadow: 0 0 0 8px rgba(37,211,102,0); } }
@keyframes navCallIcon{ 0%,100%{ transform: rotate(0deg); } 10%{ transform: rotate(14deg); } 20%{ transform: rotate(-12deg); } 30%{ transform: rotate(10deg); } 40%{ transform: rotate(-8deg); } 50%,100%{ transform: rotate(0deg); } }
.nav-mobile-btns{ display: flex; gap: 8px; align-items: center; }
@media (min-width: 1000px){ .nav-call{ display: none; } .nav-mobile-btns{ display: none; } }

.mobile-menu{ position: fixed; inset: 0; background: var(--teal-deeper); z-index: 150; display: flex; flex-direction: column; padding: 22px 24px; transform: translateX(100%); transition: transform .3s ease; }
.mobile-menu.is-open{ transform: translateX(0); }
.mobile-menu-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.mobile-menu-top button{ background: none; border: none; color: var(--white); cursor: pointer; padding: 8px; }
.mobile-menu-top svg{ width: 26px; height: 26px; }
.mobile-menu a{ color: var(--white); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.mobile-menu a[aria-current="page"]{ color: #d7fbf4; }
.mobile-menu .btn{ margin-top: 22px; }

/* ============ PAGE HERO (inner pages) ============ */
.page-hero{ position: relative; overflow: hidden; background: linear-gradient(160deg, var(--teal-tint) 0%, var(--white) 75%); padding-block: 46px 40px; text-align: center; }
.page-hero .container{ position: relative; z-index: 1; }
.page-blob{ position: absolute; border-radius: 50%; pointer-events: none; }
.page-blob--teal{ width: 330px; height: 330px; top: -150px; right: -90px; background: radial-gradient(circle at 35% 30%, rgba(57,179,194,.18), rgba(57,179,194,0) 70%); }
.page-blob--red{ width: 270px; height: 270px; bottom: -130px; left: -110px; background: radial-gradient(circle at 60% 40%, rgba(217,36,25,.08), rgba(217,36,25,0) 70%); }
.page-hero .eyebrow{ justify-content: center; }
.page-hero h1{ font-size: clamp(2rem, 5vw, 2.7rem); }
.page-hero p{ max-width: 56ch; margin-inline: auto; font-size: 1.02rem; }
.breadcrumb{ font-size: .82rem; color: var(--text-muted); margin-bottom: 14px; }
.breadcrumb a{ color: var(--teal-deep); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover{ text-decoration: underline; }

/* ============ HOME HERO ============ */
.hero{
  position: relative; overflow: hidden; padding-block: 44px 56px;
  background:
    radial-gradient(circle at 88% 12%, rgba(57,179,194,.16), transparent 40%),
    radial-gradient(circle at 4% 96%, rgba(217,36,25,.08), transparent 42%),
    linear-gradient(160deg, var(--teal-tint) 0%, var(--white) 68%);
}
.hero .container{ position: relative; z-index: 1; display: grid; gap: 38px; }
.hero-blob{ position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.hero-blob--teal{ width: 380px; height: 380px; top: -150px; right: -100px; background: radial-gradient(circle at 30% 30%, rgba(57,179,194,.24), rgba(57,179,194,0) 70%); }
.hero-blob--red{ width: 320px; height: 320px; bottom: -130px; left: -120px; background: radial-gradient(circle at 60% 40%, rgba(217,36,25,.10), rgba(217,36,25,0) 70%); }
.hero-copy p.lead{ font-size: 1.06rem; color: var(--ink); opacity: .8; max-width: 54ch; }
.hero h1{ font-size: clamp(2rem, 5.6vw, 3.1rem); }
.hero h1 .accent{ position: relative; display: inline-block; color: var(--red); }
.hero h1 .accent-mark{
  position: absolute; left: -2%; right: -2%; bottom: .06em; height: .30em; z-index: -1;
  background: linear-gradient(90deg, rgba(217,36,25,.20), rgba(217,36,25,.08));
  border-radius: 6px; transform-origin: left center;
}
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.hero-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip{ display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px; font-size: .83rem; font-weight: 600; color: var(--teal-deeper); box-shadow: var(--shadow-card); }
.chip-rating{ gap: 6px; padding-block: 7px; line-height: 1.15; text-decoration: none; }
.chip-rating .stars{ color: #f6a723; letter-spacing: 1.5px; font-size: .88rem; }
.chip-rating strong{ font-family: var(--font-display); font-size: 1.05rem; color: var(--teal-deep); }
.chip-rating small{ color: var(--text-muted); font-size: .74rem; font-weight: 600; }
.chip svg{ width: 16px; height: 16px; color: var(--red); flex: none; }

/* hero visual: framed card + floating badges */
.hero-visual{ position: relative; max-width: 460px; margin-inline: auto; width: 100%; }
.hero-card{
  position: relative; z-index: 1; background: var(--white); border: 1px solid var(--line);
  border-radius: 26px; padding: 12px; box-shadow: var(--shadow-pop);
}
.hero-card::before{
  content:""; position: absolute; inset: -14px; z-index: -1;
  border: 1.5px solid rgba(57,179,194,.35); border-radius: 32px;
}
.hero-card .ph-frame{ aspect-ratio: 1/1.04; }
.hero-float{
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 14px; box-shadow: var(--shadow-pop);
}
.hero-float strong{ display: block; font-family: var(--font-display); font-size: .84rem; line-height: 1.25; color: var(--ink); }
.hero-float small{ font-size: .72rem; color: var(--text-muted); }
.hero-float-ic{ width: 34px; height: 34px; border-radius: 10px; background: var(--teal-tint); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; flex: none; }
.hero-float-ic svg{ width: 17px; height: 17px; }
.hero-float--top{ top: -22px; left: 2px; }
.hero-float--bottom{ bottom: -20px; right: 2px; border-radius: 100px; padding: 10px 16px; }
.hero-float--bottom .hero-float-ic{ background: rgba(217,36,25,.10); color: var(--red); }

/* hero blog strip */
.hero-blog{ grid-column: 1 / -1; margin-top: 20px; padding-top: 32px; border-top: 1px solid var(--line); }
.hero-blog-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-blog-head h2{ font-family: var(--font-display); font-size: 1.18rem; color: var(--ink); margin: 0; }
.hero-blog-head a{ color: var(--teal-deep); font-weight: 700; font-size: .85rem; text-decoration: none; }
.hero-blog-head a:hover{ color: var(--red); }
.hero-blog-grid{ display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px){ .hero-blog-grid{ grid-template-columns: repeat(4, 1fr); } }
.hero-blog-card{ display: flex; flex-direction: column; gap: 7px; text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hero-blog-card:hover{ transform: translateY(-4px); border-color: var(--teal); box-shadow: var(--shadow-pop); }
.hero-blog-cat{ font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--red); }
.hero-blog-card strong{ font-family: var(--font-display); font-size: .92rem; line-height: 1.45; color: var(--ink); }
.hero-blog-card:hover strong{ color: var(--teal-deep); }
@media (min-width: 900px){
  .hero .container{ grid-template-columns: 1.05fr .95fr; align-items: center; }
  .hero{ padding-block: 64px 78px; }
  .hero-float--top{ left: -18px; }
  .hero-float--bottom{ right: -14px; }
}

/* ============ TRUST STRIP ============ */
.trust-strip{ background: var(--teal-deep); padding-block: 24px; }
.trust-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.trust-item{ display: flex; align-items: center; gap: 12px; color: var(--white); }
.trust-item .ic{ width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; flex: none; }
.trust-item svg{ width: 19px; height: 19px; color: #d7fbf4; }
.trust-item span{ font-weight: 600; font-size: .87rem; }
@media (min-width: 780px){ .trust-grid{ grid-template-columns: repeat(4,1fr); } }

/* ============ SECTION generic ============ */
.section{ padding-block: 64px; }
.section-pale{ background: var(--pale); }
.section-head{ max-width: 620px; margin-bottom: 40px; }
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head h2{ font-size: clamp(1.65rem, 3.6vw, 2.15rem); }
.section-head p{ font-size: 1rem; }

/* ============ ABOUT (teaser + full) ============ */
.about-wrap{ display: grid; gap: 36px; align-items: center; }
.about-copy p{ font-size: 1.01rem; color: var(--ink); opacity: .82; }
.about-figure{ width: 100%; position: relative; overflow: hidden; }
.about-figure img{ object-fit: contain; height: auto; }
@media (min-width: 900px){ .about-wrap{ grid-template-columns: .85fr 1.15fr; } .about-wrap.rev{ grid-template-columns: 1.15fr .85fr; } .about-wrap.rev .about-figure{ order: 2; } }

.teaser-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-card); display: grid; gap: 18px; }
.teaser-card .link-arrow{ color: var(--red); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; }
.teaser-card .link-arrow:hover{ text-decoration: underline; }
.teaser-card .link-arrow svg{ width: 16px; height: 16px; }

/* ============ CONDITIONS ============ */
.cond-grid{ display: grid; gap: 24px; grid-template-columns: 1fr; }
.cond-card{
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px 34px; box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cond-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px; z-index:1;
  background: linear-gradient(90deg, var(--teal-deep), var(--red));
  transform: scaleX(0); transform-origin: left; transition: transform .38s ease;
}
.cond-card:hover{ transform: translateY(-7px); box-shadow: var(--shadow-pop); border-color: rgba(13,102,113,.25); }
.cond-card:hover::before{ transform: scaleX(1); }
.cond-num{
  position:absolute; right:18px; bottom:8px; z-index:0; pointer-events:none;
  font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1;
  color: rgba(13,102,113,.08);
}
.cond-icon{ width: 130px; height: 130px; border-radius: 50%; background: transparent; display:flex; align-items:center; justify-content:center; margin-bottom: 18px; }
.cond-icon img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cond-icon svg{ width: 27px; height: 27px; color: var(--teal-deep); }
.cond-icon--red{ background: transparent; } .cond-icon--red svg{ color: var(--red); }
.cond-icon--green{ background: transparent; } .cond-icon--green svg{ color: #1f7a52; }
.cond-card h3{ font-size: 1.2rem; margin-bottom: 8px; }
.cond-card p{ font-size: .95rem; margin-bottom: 0; }
@media (min-width: 720px){ .cond-grid{ grid-template-columns: repeat(3,1fr); } }

/* ============ DOCTOR SPOTLIGHT (deep teal, not black) ============ */
.doctor-section{ background: var(--teal-deep); color: var(--white); }
.doctor-section p, .doctor-section .cred-item p{ color: rgba(255,255,255,.8); }
.doctor-wrap{ display: grid; gap: 40px; }
.doctor-photo-wrap{ max-width: 360px; margin-inline: auto; width: 100%; position: relative; }
.doctor-photo-wrap .ph-frame{ aspect-ratio: .95/1; position: relative; z-index: 1; }
.doctor-photo-wrap::after{
  content:""; position:absolute; inset:-16px; z-index:0; border-radius: 24px;
  background: linear-gradient(135deg, rgba(215,251,244,.28), rgba(255,255,255,0) 55%);
  transform: rotate(-3deg); pointer-events:none;
}
.doctor-name{ font-size: clamp(1.7rem,3.6vw,2.3rem); color: var(--white); margin-bottom: 4px; }
.doctor-suffix{ color: #d7fbf4; font-weight: 700; letter-spacing: .03em; margin-bottom: 16px; display:block; font-size: .98rem; }
.doctor-bio{ font-size: 1rem; max-width: 58ch; }
.cred-list{ display: grid; gap: 15px; margin-top: 22px; }
.cred-item{ display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.cred-badge{
  font-family: var(--font-display); font-weight: 800; font-size: .78rem;
  background: linear-gradient(135deg, rgba(215,251,244,.22), rgba(255,255,255,.05));
  color: var(--white); border: 1px solid rgba(255,255,255,.35); border-radius: 10px;
  padding: 6px 11px; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4);
}
.cred-item p{ margin: 0; font-size: .92rem; }
@media (min-width: 900px){ .doctor-wrap{ grid-template-columns: .8fr 1.2fr; align-items: center; } }

/* ---- Home page doctor TEASER: inset card on a teal band ---- */
.doctor-teaser-section{ background: var(--teal-deep); }
.doctor-teaser-card{
  position: relative; z-index: 1;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: 28px; display: grid; gap: 26px;
}
.doctor-teaser-photo{ position: relative; z-index: 1; }
.doctor-teaser-photo::after{
  content:""; position:absolute; inset:-14px; z-index:0; border-radius: var(--radius-lg);
  border: 2px dashed rgba(255,255,255,.3); transform: rotate(-2deg); pointer-events:none;
}
.doctor-teaser-photo .doctor-photo{ position: relative; z-index: 1; border: 6px solid #fff; box-shadow: 0 22px 40px -18px rgba(0,0,0,.45); border-radius: var(--radius-lg); overflow: hidden; width: 100%; }
.doctor-teaser-copy h2{ font-size: clamp(1.4rem,3vw,1.8rem); margin-bottom: 2px; }
.mini-cred-row{ display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.mini-cred{
  font-family: var(--font-display); font-weight: 800; font-size: .74rem; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--teal-tint), #d6eef2); border: 1px solid var(--line);
  color: var(--teal-deep); border-radius: 100px; padding: 6px 13px;
}
.doctor-teaser-copy p{ font-size: .96rem; }
.doctor-teaser-copy .btn{ margin-top: 4px; }
@media (min-width: 780px){
  .doctor-teaser-card{ grid-template-columns: .8fr 1.2fr; align-items: center; padding: 36px; }
}

/* ============ WHY CHOOSE ============ */
.why-grid{ display: grid; gap: 20px; grid-template-columns: 1fr; }
.why-card{
  position: relative; overflow: hidden; display: flex; gap: 15px;
  padding: 24px; border-radius: var(--radius-md); background: var(--white);
  border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-pop); border-color: rgba(13,102,113,.22); }
.why-card::after{
  content:""; position:absolute; right:-26px; bottom:-26px; width:110px; height:110px;
  border-radius:50%; background: radial-gradient(circle, rgba(57,179,194,.14), transparent 70%);
  pointer-events:none;
}
.why-num{
  position:absolute; top:16px; right:18px; font-family: var(--font-display); font-weight: 800;
  font-size: 1.02rem; color: rgba(13,102,113,.18);
}
.why-ic{ width: 44px; height: 44px; border-radius: 12px; background: var(--teal-tint); display:flex; align-items:center; justify-content:center; flex:none; transition: transform .3s ease; }
.why-card:hover .why-ic{ transform: rotate(-8deg) scale(1.08); }
.why-ic svg{ width: 21px; height: 21px; color: var(--teal-deep); }
.why-ic--red{ background: #fdeceb; } .why-ic--red svg{ color: var(--red); }
.why-ic--green{ background: #e6f4ed; } .why-ic--green svg{ color: #1f7a52; }
.why-card h3{ font-size: 1.02rem; margin-bottom: 6px; }
.why-card p{ font-size: .91rem; margin: 0; }
@media (min-width: 700px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1050px){ .why-grid{ grid-template-columns: repeat(3,1fr); } }

/* ============ GALLERY ============ */
.gallery-section{ background: linear-gradient(180deg, #eef7f9 0%, var(--white) 62%); }
.gallery-grid{ display: grid; gap: 16px; grid-template-columns: repeat(2,1fr); }
.gallery-tile{
  position: relative; aspect-ratio: 1/1; border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--line); background: var(--white);
  box-shadow: var(--shadow-card); transition: transform .3s ease, box-shadow .3s ease;
}
.gallery-tile::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px; z-index:2;
  background: linear-gradient(90deg, var(--teal-deep), var(--red));
}
.gallery-tile:hover{ transform: translateY(-6px) rotate(.8deg); box-shadow: var(--shadow-pop); }
.gallery-tile .ph-frame{
  position: absolute; inset: 0; border: none; border-radius: 0;
  transition: transform .55s ease;
}
.gallery-tile:hover .ph-frame{ transform: scale(1.06); }
.gallery-tile .ph-frame.g-1{ background: linear-gradient(160deg, #e3f4f6 0%, #ffffff 72%); }
.gallery-tile .ph-frame.g-2{ background: linear-gradient(160deg, #fdeceb 0%, #ffffff 72%); }
.gallery-tile .ph-frame.g-3{ background: linear-gradient(160deg, #e6f4ed 0%, #ffffff 72%); }
.gallery-tile .ph-frame.g-4{ background: linear-gradient(160deg, #eef1fb 0%, #ffffff 72%); }
.g-num{
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-display); font-weight: 800; font-size: .74rem; letter-spacing: .08em;
  color: var(--red); background: rgba(255,255,255,.92); border: 1px solid var(--line);
  border-radius: 100px; padding: 5px 11px; box-shadow: 0 4px 12px -6px rgba(13,40,44,.25);
}
.gallery-tile::after{
  content:""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(13,102,113,.14) 100%);
  opacity: 0; transition: opacity .3s ease;
}
.gallery-tile:hover::after{ opacity: 1; }
@media (min-width: 640px){ .gallery-grid{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 960px){ .gallery-grid{ grid-template-columns: repeat(4,1fr); } }
.gallery-note{ margin-top: 26px; text-align: center; }

/* ============ FAQ ============ */
.faq-list{ max-width: 760px; margin-inline: auto; display: grid; gap: 12px; }
.faq-item{ border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); overflow: hidden; }
.faq-q{ width: 100%; text-align: left; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 22px; font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink); }
.faq-q svg{ width: 20px; height: 20px; color: var(--red); flex: none; transition: transform .25s ease; }
.faq-item[data-open="true"] .faq-q svg{ transform: rotate(180deg); }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-in{ padding: 0 22px 20px; font-size: .94rem; color: var(--text-muted); }

/* ============ VISIT / CONTACT ============ */
.visit-section{ background: var(--pale); }
.visit-grid{ display: grid; gap: 32px; }
.visit-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); transition: transform .28s ease, box-shadow .28s ease; }
.visit-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.hours-table{ width: 100%; border-collapse: collapse; margin-top: 14px; }
.hours-table td{ padding: 10px 0; border-top: 1px solid var(--line); font-size: .93rem; }
.hours-table td:first-child{ font-weight: 700; color: var(--ink); }
.hours-table td:last-child{ text-align: right; color: var(--text-muted); }
.addr-block{ display: flex; gap: 12px; margin-top: 20px; }
.addr-block svg{ width: 21px; height: 21px; color: var(--red); flex: none; margin-top: 2px; }
.addr-block p{ margin: 0; font-size: .93rem; color: var(--ink); opacity: .85; }
.visit-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.map-embed{ border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.map-embed iframe{ width: 100%; height: 300px; border: 0; display: block; }
.form-grid{ display: grid; gap: 14px; margin-top: 16px; }
.form-row{ display: grid; gap: 6px; }
.form-row label{ font-size: .81rem; font-weight: 700; color: var(--ink); }
.form-row input, .form-row textarea{ border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--font-body); font-size: .94rem; background: var(--pale); color: var(--ink); }
.form-row input:focus, .form-row textarea:focus{ outline: none; border-color: var(--teal-deep); background: var(--white); }
.form-note{ font-size: .78rem; color: var(--text-muted); margin-top: 10px; }
@media (min-width: 980px){ .visit-grid{ grid-template-columns: 1fr 1fr; } }

/* ============ CTA BAND ============ */
.cta-band{ background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%); color: var(--white); text-align: center; padding-block: 58px; position: relative; overflow: hidden; }
.cta-band .container{ position: relative; z-index: 1; }
.cta-band .btn-outline{ color: var(--white); border-color: rgba(255,255,255,.55); }
.cta-band .btn-outline:hover{ background: var(--white); color: var(--red-deep); }
.cta-band::before{ content:""; position:absolute; width:340px; height:340px; border-radius:50%; background: rgba(255,255,255,.06); top:-160px; right:-100px; }
.cta-band h2{ color: var(--white); font-size: clamp(1.5rem,3.4vw,2rem); margin-bottom: .45em; }
.cta-band p{ color: rgba(255,255,255,.9); max-width: 52ch; margin: 0 auto 1.6em; }
.cta-band .btn-primary{ background: var(--white); color: var(--red); box-shadow: 0 12px 26px -12px rgba(0,0,0,.35); }
.cta-band .btn-primary:hover{ background: var(--ink); color: var(--white); transform: translateY(-2px); }
.cta-band .btn-outline{ border-color: rgba(255,255,255,.6); color: var(--white); }
.cta-band .btn-outline:hover{ background: rgba(255,255,255,.16); border-color: var(--white); transform: translateY(-2px); }
.cta-band .btn-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top: 8px; }

/* ============ FOOTER ============ */
footer.site-footer{ background: var(--ink); color: rgba(255,255,255,.7); padding-block: 48px 24px; }
.footer-grid{ display: grid; gap: 32px; }
.footer-brand{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand img{ height: 50px; object-fit: contain; }
.footer-brand span{ font-family: var(--font-display); font-weight: 800; color: var(--white); font-size: 1.02rem; }
footer h4{ color: var(--white); font-family: var(--font-display); font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
footer ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer a{ color: rgba(255,255,255,.72); text-decoration: none; font-size: .91rem; }
footer a:hover{ color: #d7fbf4; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 20px; display: flex; flex-direction: column; gap: 10px; font-size: .77rem; }
.footer-disclaimer{ max-width: 70ch; }
@media (min-width: 900px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } .footer-bottom{ flex-direction: row; justify-content: space-between; align-items: center; } }

/* ============ FLOATING ELEMENTS ============ */
.float-whatsapp{ position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; color: var(--white); box-shadow: 0 12px 26px -8px rgba(37,211,102,.6); text-decoration: none; }
.float-whatsapp svg{ width: 27px; height: 27px; }
.float-whatsapp::before{ content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; animation: pulse-ring 2.4s ease-out infinite; z-index:-1; }
@keyframes pulse-ring{ 0%{ transform: scale(1); opacity:.5; } 100%{ transform: scale(1.85); opacity:0; } }
.back-top{ position: fixed; right: 20px; bottom: 86px; z-index: 90; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; }
.back-top.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-top svg{ width: 17px; height: 17px; }

/* ============ scroll reveal ============ */
.reveal{ opacity: 0; }
.reveal.is-visible{ opacity: 1; transition: opacity .55s ease; }

/* ============ GSAP hero entrance ============ */
.hero-init [data-hero-anim]{ opacity: 0; transform: translateY(28px); will-change: transform, opacity; }
.hero-init [data-hero-card]{ opacity: 0; transform: translateY(24px) scale(.94); will-change: transform, opacity; }
.hero-init [data-hero-float]{ opacity: 0; transform: translateY(16px); will-change: transform, opacity; }
.hero-init .hero-blob{ opacity: 0; transform: scale(.7); will-change: transform, opacity; }
.hero-init .hero h1 .accent-mark{ transform: scaleX(0); }
.hero-init [data-ph-anim]{ opacity: 0; transform: translateY(24px); will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce){
  .hero-init [data-hero-anim], .hero-init [data-hero-card], .hero-init [data-hero-float], .hero-init [data-ph-anim]{ opacity: 1; transform: none; will-change: auto; }
  .hero-init .hero-blob{ opacity: 1; transform: scale(1); will-change: auto; }
  .hero-init .hero h1 .accent-mark{ transform: scaleX(1); }
}

/* ============ scroll progress bar ============ */
.scroll-progress{
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 210;
  background: linear-gradient(90deg, var(--teal-deep), var(--red));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* ============ marquee ticker ============ */
.marquee{
  position: relative; z-index: 3; overflow: hidden; white-space: nowrap;
  background: var(--white); border-block: 1px solid var(--line); padding-block: 15px;
  transform: rotate(-1.6deg) scale(1.03); margin-block: -6px;
}
.marquee-track{ display: inline-flex; will-change: transform; }
.marquee-half{ display: inline-flex; flex: none; }
.marquee-item{
  display: inline-flex; align-items: center; gap: 12px; padding-inline: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  letter-spacing: .02em; color: var(--teal-deep); text-transform: uppercase;
}
.marquee-item svg{ width: 17px; height: 17px; color: var(--red); flex: none; }

/* ============ CTA band decoration ============ */
.cta-ring{
  position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.16);
  pointer-events: none; will-change: transform;
}
.cta-ring--1{ width: 270px; height: 270px; top: -110px; right: -50px; }
.cta-ring--2{ width: 190px; height: 190px; bottom: -80px; left: 6%; border-color: rgba(255,255,255,.12); }

/* ============ heading word reveal ============ */
.section-head h2 .word{ display: inline-block; overflow: hidden; vertical-align: bottom; }
.section-head h2 .word-in{ display: inline-block; will-change: transform; }

/* ============ Section decoration ============ */
.section-decor{ position: relative; overflow: hidden; }
.section-decor .container{ position: relative; z-index: 1; }
.dot-pattern{ position: absolute; inset: 0; pointer-events: none; }
.dot-pattern--dark{ background-image: radial-gradient(rgba(13,102,113,.9) 1.4px, transparent 1.4px); background-size: 28px 28px; opacity: .07; }
.dot-pattern--light{ background-image: radial-gradient(rgba(255,255,255,.5) 1.4px, transparent 1.4px); background-size: 26px 26px; opacity: .22; }
.sec-ring{ position: absolute; border-radius: 50%; pointer-events: none; }
.sec-ring--1{ width: 300px; height: 300px; top: -90px; right: -70px; border: 2px dashed rgba(255,255,255,.22); }
.sec-ring--2{ width: 210px; height: 210px; bottom: -80px; left: 4%; border: 2px dashed rgba(255,255,255,.14); }

/* ============================================================
   OVERFLOW FIX
   ============================================================ */
html, body{ overflow-x: clip; }
@supports not (overflow: clip){ html, body{ overflow-x: hidden; } }

/* ============================================================
   ANIMATED NAV TOGGLE (hamburger)
   ============================================================ */
.nav-toggle{
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4.5px;
  background: var(--teal-tint); border: 1px solid var(--line); border-radius: 12px;
  width: 46px; height: 46px; padding: 0; cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.nav-toggle .bar{ display: block; width: 20px; height: 2.2px; border-radius: 2px; background: var(--teal-deep); transition: transform .25s ease, opacity .2s ease; }
.nav-toggle:hover{ background: #d3eff2; transform: translateY(-1px); }
@media (min-width: 1000px){ .nav-toggle{ display: none; } }

/* ============================================================
   DRAWER MOBILE MENU (redesign)
   ============================================================ */
.drawer-overlay{ position: fixed; inset: 0; z-index: 140; background: rgba(10,40,44,.55); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.drawer-overlay.is-visible{ opacity: 1; pointer-events: auto; }
.mobile-menu{
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 150;
  width: min(86vw, 380px);
  background: linear-gradient(172deg, var(--teal-deeper) 0%, #0b5560 52%, var(--teal-deep) 100%);
  box-shadow: -24px 0 50px -28px rgba(0,0,0,.55);
  display: flex; flex-direction: column; padding: 20px 22px 24px;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1), visibility 0s .35s;
  visibility: hidden; overflow-y: auto;
}
.mobile-menu.is-open{ transform: translateX(0); visibility: visible; transition: transform .35s cubic-bezier(.22,1,.36,1), visibility 0s; }
.mobile-menu-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.drawer-close{ background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: var(--white); width: 40px; height: 40px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease, background .25s ease; }
.drawer-close:hover{ background: rgba(255,255,255,.22); transform: rotate(90deg); }
.drawer-close svg{ width: 20px; height: 20px; }
.drawer-nav{ display: flex; flex-direction: column; margin-top: 4px; }
.drawer-nav a{
  color: rgba(255,255,255,.92); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.22rem;
  padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: space-between; transition: color .2s ease, padding-left .2s ease;
}
.drawer-nav a::after{ content: "→"; color: rgba(255,255,255,.45); font-size: 1rem; transition: color .2s ease, transform .2s ease; }
.drawer-nav a:hover{ color: #d7fbf4; padding-left: 8px; }
.drawer-nav a:hover::after{ color: #d7fbf4; transform: translateX(3px); }
.drawer-nav a[aria-current="page"]{ color: #d7fbf4; }
.drawer-nav a[aria-current="page"]::after{ color: #d7fbf4; }
.drawer-cta{ margin-top: auto; display: grid; gap: 10px; padding-top: 18px; }
.drawer-note{ margin: 14px 2px 0; font-size: .78rem; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 7px; }
.drawer-note svg{ width: 14px; height: 14px; flex: none; color: #d7fbf4; }

/* ============================================================
   HERO REVIEWS + LOCATION (index)
   ============================================================ */
.chip-link{ text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.chip-link:hover{ border-color: var(--teal); color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.hero-reviews{ margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-reviews-link{ display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(57,179,194,.5); transition: color .2s ease, text-decoration-color .2s ease; }
.hero-reviews-link:hover{ color: var(--red); text-decoration-color: var(--red); }
.hero-reviews-link svg{ width: 14px; height: 14px; }
@media (max-width: 639px){ .hero-reviews{ font-size: 12px; gap: 10px; flex-direction: column; align-items: flex-start; } .hero-reviews .social-round{ margin-left: auto; } }
.hero-rating{ display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px 16px; box-shadow: var(--shadow-card); }
.hero-rating .stars{ color: #f6a723; font-size: 1.02rem; letter-spacing: 2px; }
.hero-rating .score{ line-height: 1.15; }
.hero-rating .score strong{ font-family: var(--font-display); font-size: 1.15rem; color: var(--teal-deep); display: block; }
.hero-rating .score small{ color: var(--text-muted); font-size: .74rem; }
.review-pill{ display: inline-flex; align-items: center; gap: 7px; border-radius: 100px; border: 1px solid var(--line); background: var(--white); color: var(--teal-deep); font-size: .8rem; font-weight: 700; padding: 10px 15px; text-decoration: none; box-shadow: var(--shadow-card); transition: all .2s ease; }
.review-pill:hover{ color: var(--red); border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.review-pill svg{ width: 15px; height: 15px; }
.review-pill--filled{ background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.review-pill--filled:hover{ background: var(--red); border-color: var(--red); color: #fff; }

/* ============================================================
   TESTIMONIALS SLIDER
   ============================================================ */
.testi-section{ position: relative; }
.testi-slider{ position: relative; max-width: 820px; margin: 0 auto; }
.testi-viewport{ overflow: hidden; }
.testi-track{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.testi-slider-on .testi-track{ display: flex; align-items: stretch; will-change: transform; }
.testi-slider-on .testi-slide{ flex: 0 0 100%; min-width: 0; }
.testi-slide{ min-width: 0; }
.testi-card{
  height: 100%; display: flex; flex-direction: column; gap: 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px 22px; box-shadow: var(--shadow-card); position: relative;
}
.testi-card::before{ content: "“"; position: absolute; top: -8px; right: 20px; font-family: var(--font-display); font-size: 96px; line-height: 1; color: var(--teal); opacity: .16; }
.testi-card .stars{ color: #f6a723; letter-spacing: 2px; font-size: .92rem; }
.testi-card blockquote{ margin: 0; font-size: .98rem; line-height: 1.8; color: var(--ink); }
.testi-card footer{ margin-top: auto; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.testi-avatar{ width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--teal), var(--teal-deep)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: .95rem; flex: none; }
.testi-card footer .who{ line-height: 1.3; }
.testi-card footer strong{ font-family: var(--font-display); font-size: .95rem; display: block; }
.testi-card footer small{ color: var(--text-muted); font-size: .78rem; }
.testi-controls{ display: none; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.testi-slider-on .testi-controls{ display: flex; }
.testi-btn{ width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--teal-deep); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); transition: all .2s ease; }
.testi-btn:hover{ background: var(--teal-deep); color: #fff; transform: translateY(-2px); }
.testi-btn svg{ width: 18px; height: 18px; }
.testi-dots{ display: flex; gap: 8px; }
.testi-dot{ width: 8px; height: 8px; border-radius: 100px; border: 0; background: #c2dfe3; padding: 0; cursor: pointer; transition: all .25s ease; }
.testi-dot.is-active{ background: var(--red); width: 26px; }
.testi-note{ margin-top: 28px; text-align: center; }
.testi-note a{ color: var(--teal-deep); font-weight: 700; }

/* ============================================================
   FOOTER (redesign)
   ============================================================ */
footer.site-footer{ background: var(--ink); color: rgba(255,255,255,.72); padding-block: 0 22px; position: relative; overflow: hidden; }
.footer-accent{ height: 4px; background: linear-gradient(90deg, var(--teal) 0%, var(--teal-deep) 45%, var(--red) 100%); }
.footer-glow{ position: absolute; border-radius: 50%; pointer-events: none; }
.footer-glow--teal{ width: 420px; height: 420px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(57,179,194,.26), transparent 70%); }
.footer-glow--red{ width: 380px; height: 380px; bottom: -170px; left: -150px; background: radial-gradient(circle, rgba(217,36,25,.18), transparent 70%); }
.footer-grid{ position: relative; display: grid; gap: 34px; padding-block: 38px 8px; }
.footer-col{ min-width: 0; }

footer h4{ color: var(--white); font-family: var(--font-display); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
footer h4::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
footer ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer a{ color: rgba(255,255,255,.72); text-decoration: none; font-size: .91rem; }
footer a:hover{ color: #d7fbf4; }

.social-links{ display: flex; gap: 10px; }
.footer-col .social-links{ margin-top: 16px; }
.social-links a{ display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: 100px; padding: 9px 15px; font-size: .82rem; font-weight: 600; color: var(--white); text-decoration: none; transition: all .2s ease; }
.social-links a:hover{ background: var(--red); border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.social-links a.social-fb{ color: #8fc6ff; border-color: rgba(24,119,242,.45); }
.social-links a.social-fb:hover{ background: #1877F2; border-color: #1877F2; color: #fff; }
.social-links a.social-ig{ color: #ffb3c7; border-color: rgba(228,64,95,.45); }
.social-links a.social-ig:hover{ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: #bc1888; color: #fff; }
.social-links svg{ width: 16px; height: 16px; }
.social-links--light{ margin-top: 22px; }
.social-links--light a{ background: var(--white); border: 1px solid var(--line); color: var(--teal-deep); box-shadow: var(--shadow-card); }
.social-links--light a:hover{ color: var(--red); border-color: var(--teal); box-shadow: var(--shadow-pop); }
.social-links--light a.social-fb{ color: #1877F2; border-color: rgba(24,119,242,.35); }
.social-links--light a.social-fb:hover{ background: #1877F2; border-color: #1877F2; color: #fff; }
.social-links--light a.social-ig{ color: #E4405F; border-color: rgba(228,64,95,.35); }
.social-links--light a.social-ig:hover{ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: #bc1888; color: #fff; }

.social-rounds{ display: flex; gap: 10px; }
.clinic-card .social-rounds{ margin-top: 18px; position: relative; z-index: 1; }
.social-round{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); color: var(--text-muted); box-shadow: var(--shadow-card); transition: all .2s ease; flex: none; }
.social-round svg{ width: 17px; height: 17px; }
.social-round--fb{ color: #1877F2; border-color: rgba(24,119,242,.35); }
.social-round--fb:hover{ background: #1877F2; border-color: #1877F2; color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.social-round--ig{ color: #E4405F; border-color: rgba(228,64,95,.35); }
.social-round--ig:hover{ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: #bc1888; color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.utility-bar .social-round{ width: 26px; height: 26px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); box-shadow: none; }
.utility-bar .social-round svg{ width: 13px; height: 13px; }
.utility-bar .social-round--fb{ color: #8fc6ff; }
.utility-bar .social-round--fb:hover{ background: #1877F2; border-color: #1877F2; color: #fff; transform: none; box-shadow: none; }
.utility-bar .social-round--ig{ color: #ffb3c7; }
.utility-bar .social-round--ig:hover{ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: #bc1888; color: #fff; transform: none; box-shadow: none; }
.footer-links a{ transition: color .2s ease, padding-left .2s ease; }
.footer-links a::before{ content: "→"; margin-right: 9px; color: var(--teal); opacity: .75; }
.footer-links a:hover{ padding-left: 5px; }
.footer-rating{ display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; padding: 8px 14px; font-size: .8rem; line-height: 1.35; }
.footer-rating .stars{ color: #f6a723; letter-spacing: 1.5px; }
.footer-contact li{ display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.5; }
.footer-contact svg{ width: 16px; height: 16px; color: var(--teal); flex: none; margin-top: 2px; }
.footer-cta{ display: grid; gap: 10px; margin-top: 18px; max-width: 220px; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); margin-top: 18px; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; font-size: .77rem; }
.footer-disclaimer{ max-width: 72ch; line-height: 1.7; }
@media (min-width: 640px){ .footer-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .footer-grid{ grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.3fr; } .footer-bottom{ flex-direction: row; justify-content: space-between; align-items: center; } }
@media (max-width: 639px){ .footer-brand img{ height: 44px; } .brand-word .l2{ font-size: 1.5rem; } .brand-word .l1{ font-size: .6rem; } .mobile-menu .btn{ margin-top: 18px; } .mobile-menu a{ font-size: 1rem; } .trust-item span{ font-size: 12px; } .nav-row{ gap: 5px; } .section{ padding-block: 45px; } }

/* ============================================================
   BLOG
   ============================================================ */
.btn-wa{ background: #1fb355; border-color: #1fb355; color: #fff; }
.btn-wa:hover{ background: #179c49; border-color: #179c49; color: #fff; }

.breadcrumb{ margin: 0 0 12px; font-size: .84rem; color: var(--text-muted); }
.breadcrumb a{ color: var(--teal-deep); font-weight: 600; text-decoration: none; }
.breadcrumb a:hover{ color: var(--red); }
.blog-meta{ margin-top: 14px; font-size: .85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.blog-meta span{ display: inline-flex; align-items: center; gap: 6px; }
.blog-meta svg{ width: 15px; height: 15px; }

.blog-wrap{ display: grid; gap: 36px; }
.blog-post{ min-width: 0; }
.blog-post > * + * { margin-top: 24px; }
.blog-post h2{ font-family: var(--font-display); color: var(--teal-deep); font-size: 1.5rem; line-height: 1.3; margin-top: 36px; }
.blog-post h3{ font-family: var(--font-display); color: var(--ink); font-size: 1.14rem; margin-top: 30px; }
.blog-post p{ line-height: 1.85; color: var(--ink); }
.blog-post ul, .blog-post ol{ line-height: 1.85; padding-left: 22px; display: grid; gap: 8px; }
.blog-post li::marker{ color: var(--red); }
.blog-post blockquote{ margin: 0; border-left: 4px solid var(--teal); background: var(--teal-tint); padding: 18px 20px; border-radius: 0 var(--radius-md) var(--radius-md) 0; font-family: var(--font-display); font-weight: 600; color: var(--teal-deep); }
.blog-post figure{ margin: 0; }
.blog-post .ph-frame{ aspect-ratio: 16/9; border-radius: var(--radius-md); border: 0; background: var(--teal-tint); }
.blog-post .ph-frame img{ border-radius: var(--radius-md); }
.blog-lead{ font-size: 1.05rem; line-height: 1.85; color: var(--text-muted); }
.callout-tip{ display: flex; gap: 12px; background: var(--pale); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius-md); padding: 16px 18px; line-height: 1.6; }
.callout-tip svg{ width: 22px; height: 22px; color: var(--teal-deep); flex: none; margin-top: 2px; }
.callout-tip strong{ color: var(--teal-deep); }

.blog-sidebar{ display: grid; gap: 22px; align-content: start; }
.clinic-card{ background: linear-gradient(170deg, var(--teal-deep), var(--teal-deeper)); color: #fff; border-radius: var(--radius-lg); padding: 26px; position: relative; overflow: hidden; box-shadow: var(--shadow-pop); }
.clinic-card::after{ content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); top: -80px; right: -80px; }
.clinic-card h3{ font-family: var(--font-display); margin: 0 0 4px; font-size: 1.1rem; position: relative; z-index: 1; color: #fff; }
.clinic-card .clinic-tag{ display: inline-block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #d7fbf4; margin-bottom: 12px; position: relative; z-index: 1; }
.clinic-card ul{ list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.clinic-card li{ display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.94); }
.clinic-card li svg{ width: 16px; height: 16px; flex: none; margin-top: 2px; color: #d7fbf4; }
.clinic-card .btn-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 1; }
.clinic-card .btn-row .btn:last-child{ grid-column: 1 / -1; }
.clinic-card .btn-outline{ border-color: rgba(255,255,255,.55); color: #fff; }
.clinic-card .btn-outline:hover{ background: rgba(255,255,255,.14); border-color: #fff; color: #fff; transform: translateY(-2px); }

.blog-card-list{ display: grid; gap: 10px; }
.blog-card-list a{ display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; font-size: .9rem; font-weight: 600; color: var(--ink); transition: all .2s ease; }
.blog-card-list a:hover{ border-color: var(--teal); color: var(--teal-deep); transform: translateX(4px); box-shadow: var(--shadow-card); }
.blog-card-list a span{ color: var(--teal); flex: none; }
@media (min-width: 960px){ .blog-wrap{ grid-template-columns: 1fr 330px; } .blog-sidebar{ position: sticky; top: 100px; align-self: start; } }

/* blog listing grid */
.blog-grid{ display: grid; gap: 22px; }
@media (min-width: 700px){ .blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px){ .blog-grid{ grid-template-columns: repeat(3, 1fr); } }
.blog-card{ display: flex; flex-direction: column; gap: 13px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-card); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-pop); border-color: var(--teal); }
.blog-card .blog-cat{ align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-deep); background: var(--teal-tint); border-radius: 100px; padding: 6px 12px; }
.blog-card h3{ font-family: var(--font-display); font-size: 1.12rem; line-height: 1.35; margin: 0; color: var(--ink); }
.blog-card p{ margin: 0; font-size: .9rem; line-height: 1.65; color: var(--text-muted); flex: 1; }
.blog-card .blog-card-foot{ display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .78rem; color: var(--text-muted); border-top: 1px solid var(--line); padding-top: 14px; }
.blog-card .blog-card-foot > span{ display: inline-flex; align-items: center; gap: 5px; }
.blog-card .blog-card-foot svg{ width: 13px; height: 13px; flex: none; color: var(--teal); }
.blog-card .read-more{ color: var(--red); font-weight: 700; }

/* home blog section: image cover cards */
.blog-card--media{ padding: 0 24px 24px; overflow: hidden; }
.blog-cover{ display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; margin: 0 -24px 12px; position: relative; overflow: hidden; }
.blog-cover svg{ width: 62px; height: 62px; color: rgba(255,255,255,.92); position: relative; z-index: 1; transition: transform .3s ease; }
.blog-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; transition: transform .3s ease; }
.blog-cover::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.18), transparent 55%); }
.blog-card:hover .blog-cover svg{ transform: scale(1.14) rotate(-4deg); }
.blog-cover--piles{ background: linear-gradient(135deg, #4fc3d4, var(--teal-deep) 60%, var(--teal-deeper)); }
.blog-cover--fissure{ background: linear-gradient(135deg, #ff9a7a, var(--red) 55%, var(--red-deep)); }
.blog-cover--fistula{ background: linear-gradient(135deg, #1c8a97, var(--teal-deep) 45%, #09383f); }
.blog-cover--pilonidal{ background: linear-gradient(135deg, #b07d62, #6b4636 55%, #3f281d); }
.blog-cover--vadodara{ background: linear-gradient(135deg, #4f9fd6, #17628f 50%, #0a3a55); }
.blog-cover--doctor{ background: linear-gradient(135deg, #8f8ff2, #4c4cc4 50%, #26268a); }
.blog-cover--cost{ background: linear-gradient(135deg, #eec06a, #c78a2a 55%, #8a5d12); }
.blog-more{ text-align: center; margin-top: 34px; }

/* ============================================================
   SURGERY VIDEOS SLIDER (index)
   ============================================================ */
.videos{ position: relative; overflow: hidden; background: linear-gradient(170deg, var(--teal-deep) 0%, var(--teal-deeper) 55%, #07323a 100%); padding-block: 76px 84px; }
.videos .section-head h2{ color: #fff; }
.videos .section-head p{ color: rgba(255,255,255,.78); }
.videos .eyebrow{ color: #8fe0ec; }
.videos-glow{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.videos-glow--teal{ width: 320px; height: 320px; background: rgba(57,179,194,.45); top: -80px; left: -80px; }
.videos-glow--red{ width: 280px; height: 280px; background: rgba(217,36,25,.35); bottom: -90px; right: -70px; }

.video-slider{ position: relative; max-width: 460px; margin-inline: auto; }
.video-track{ display: block; transition: transform .75s cubic-bezier(.22,1,.36,1); }
.video-slide{ min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding: 12px 12px 22px; box-shadow: 0 24px 60px rgba(3,26,30,.45); margin-bottom: 18px; }
.video-slider-on .video-track{ display: flex; }
.video-slider-on .video-viewport{ overflow: hidden; border-radius: 14px; }
.video-slider-on .video-slide{ flex: 0 0 100%; margin-bottom: 0; }
.video-frame{ position: relative; aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #0f5660, #062d35); }
.video-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-player{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.video-player.is-live{ display: block; }
.video-embed{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; }
.video-embed.is-live{ display: block; height: 112%; }
.video-badge{ position: absolute; top: 10px; left: 10px; z-index: 2; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--red); padding: 5px 11px; border-radius: 100px; }
.video-info{ padding: 16px 8px 0; }
.video-tag{ display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8fe0ec; background: rgba(57,179,194,.16); border: 1px solid rgba(57,179,194,.35); border-radius: 100px; padding: 5px 12px; margin-bottom: 12px; }
.video-info h3{ color: #fff; font-size: 1.25rem; margin-bottom: 8px; }
.video-info p{ color: rgba(255,255,255,.78); font-size: .9rem; line-height: 1.6; margin: 0 0 14px; }
.video-link{ display: inline-flex; align-items: center; gap: 7px; color: #d7fbf4; font-weight: 700; font-size: .85rem; text-decoration: none; }
.video-link:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.video-link svg{ width: 15px; height: 15px; }

.video-btn{ position: absolute; top: 42%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; backdrop-filter: blur(6px); }
.video-btn:hover{ background: var(--red); border-color: var(--red); }
.video-btn svg{ width: 18px; height: 18px; }
.video-btn--prev{ left: 8px; }
.video-btn--next{ right: 8px; }

.video-controls{ display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; }
.video-dots{ display: flex; gap: 9px; }
.video-dot{ width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.35); cursor: pointer; transition: all .25s ease; }
.video-dot.is-active{ background: #fff; transform: scale(1.25); }
.video-dot:hover{ background: #d7fbf4; }
.video-progress{ width: min(300px, 72%); height: 3px; border-radius: 100px; background: rgba(255,255,255,.2); overflow: hidden; }
.video-progress span{ display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--teal), #fff); border-radius: 100px; transform: scaleX(0); transform-origin: left center; }
.video-slider-off .video-controls{ display: none; }

/* sound toggle button */
.video-sound{ display: none; position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.5); color: #fff; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); transition: all .2s ease; }
.video-player.is-live ~ .video-sound{ display: flex; }
.video-sound svg{ width: 17px; height: 17px; }
.video-sound__on{ display: none; }
.video-sound.is-muted .video-sound__off{ display: block; }
.video-sound.is-muted .video-sound__on{ display: none; }
.video-sound:not(.is-muted) .video-sound__off{ display: none; }
.video-sound:not(.is-muted) .video-sound__on{ display: block; }
.video-sound:hover{ background: var(--red); border-color: var(--red); }

/* play button */
.video-play{ display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.5); color: #fff; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); transition: all .2s ease; }
.video-play.is-hidden{ display: none; }
.video-play svg{ width: 22px; height: 22px; margin-left: 3px; }
.video-play:hover{ background: var(--red); border-color: var(--red); transform: translate(-50%, -50%) scale(1.08); }
.video-panel--light .video-play{ background: rgba(255,255,255,.9); border-color: var(--line); color: var(--ink); }

/* panels layout: surgery + testimonials side by side on desktop */
.video-panels{ display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 6px; }
.video-panel{ position: relative; border-radius: var(--radius-lg); padding: 14px 16px 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.video-panel--light{ background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.video-panel-title{ color: #fff; font-size: .92rem; font-weight: 800; letter-spacing: .04em; text-align: center; margin: 0 0 10px; }
.video-panel--light .video-panel-title{ color: var(--ink); }
.video-panel .video-slider{ max-width: 280px; width: 100%; }
.video-panel .video-frame{ aspect-ratio: 9/16; }
.video-panel .video-info{ padding: 8px 2px 0; }
.video-panel .video-tag{ margin-bottom: 6px; font-size: .65rem; }
.video-panel .video-info h3{ font-size: .95rem; margin-bottom: 2px; }
.video-panel .video-controls{ margin-top: 8px; gap: 8px; }
.video-panel .video-btn{ width: 36px; height: 36px; }
.video-panel .video-btn--prev{ left: 8px; }
.video-panel .video-btn--next{ right: 8px; }
.video-panel .video-sound{ width: 32px; height: 32px; }
.video-panel .video-play{ width: 46px; height: 46px; }
.video-panel .video-play svg{ width: 19px; height: 19px; }
@media (min-width: 1024px){ .video-panels{ grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 767px){ .video-panel{ padding: 20px 16px 24px; } }

/* light panel overrides */
.video-panel--light .video-slide{ background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.video-panel--light .video-tag{ color: var(--teal-deep); background: var(--teal-tint); border-color: #bcdde1; }
.video-panel--light .video-info h3{ color: var(--ink); }
.video-panel--light .video-link{ color: var(--red); }
.video-panel--light .video-link:hover{ color: var(--red-deep); }
.video-panel--light .video-btn{ background: var(--white); border-color: var(--line); color: var(--teal-deep); box-shadow: var(--shadow-card); }
.video-panel--light .video-btn:hover{ background: var(--red); border-color: var(--red); color: #fff; }
.video-panel--light .video-dot{ background: #c4dadd; }
.video-panel--light .video-dot.is-active{ background: var(--teal-deep); }
.video-panel--light .video-progress{ background: #dcebed; }
.video-panel--light .video-progress span{ background: linear-gradient(90deg, var(--teal), var(--teal-deep)); }
.video-panel--light .video-sound{ background: rgba(255,255,255,.9); border-color: var(--line); color: var(--ink); }

/* compact fit so both panels sit on one desktop screen */
@media (min-width: 1024px){
  .videos{ padding-block: 36px 42px; }
  #video-library .section-head{ margin-bottom: 12px; }
  #video-library .section-head p{ font-size: .9rem; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
[data-lightbox]{ cursor: zoom-in; }
[data-lightbox] img{ transition: transform .3s ease; }
[data-lightbox]:hover img{ transform: scale(1.03); }

.lb-overlay{ position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; }
.lb-overlay.is-open{ display: flex; opacity: 1; }
.lb-overlay img{ max-width: 90vw; max-height: 85vh; border-radius: var(--radius-md); box-shadow: 0 8px 40px rgba(0,0,0,.5); object-fit: contain; }
.lb-overlay .lb-caption{ position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .95rem; background: rgba(0,0,0,.55); padding: 6px 18px; border-radius: 20px; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; }
.lb-close{ position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border: none; background: rgba(255,255,255,.12); border-radius: 50%; color: #fff; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; z-index: 10; }
.lb-close:hover{ background: rgba(255,255,255,.25); }
.lb-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; background: rgba(255,255,255,.1); border-radius: 50%; color: #fff; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; z-index: 10; }
.lb-nav:hover{ background: rgba(255,255,255,.22); }
.lb-prev{ left: 16px; }
.lb-next{ right: 16px; }
.brand-hl, .doc-hl{ position: relative; display: inline; font-weight: 700; background-image: linear-gradient(90deg, rgba(217,36,25,.18), rgba(57,179,194,.18)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .32em; padding-bottom: .04em; transition: background-size .3s ease; }
.brand-hl:hover, .doc-hl:hover{ background-size: 100% .85em; }
.doc-hl{ background-image: linear-gradient(90deg, rgba(57,179,194,.18), rgba(57,179,194,.08)); }
.about-social{ position: absolute; bottom: 12px; left: 12px; display: flex; gap: 8px; z-index: 3; }
.about-social .social-round{ width: 38px; height: 38px; }
.about-social .social-round svg{ width: 17px; height: 17px; }
@media (max-width: 639px){ .clinic-card .btn-text{ display: none; } .clinic-card .btn-row .btn{ justify-content: center; padding-left: 0; padding-right: 0; } }