/* ===========================================================
   HealthSphere & Wellness — homepage
   Design system: warm spa wellness + blue/green brand,
   editorial serif headlines (Dermapro-inspired structure)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* brand */
  --blue:        #1f9bd1;
  --blue-deep:   #0e6e9b;
  --green:       #7cb828;
  --green-deep:  #5d9a1d;
  --green-tip:   #a6d24a;

  /* ink + neutrals (cool, calm) */
  --ink:    #11383f;   /* headings */
  --body:   #45616a;   /* paragraphs */
  --muted:  #7d949b;   /* captions */
  --line:   #e2ebed;
  --line-2: #d3e0e3;

  /* backgrounds */
  --white:    #ffffff;
  --mist:     #f3f8f9;   /* cool off-white */
  --cream:    #f8f5ef;   /* warm off-white */
  --mist-2:   #eaf3f4;

  --shadow-sm: 0 2px 10px rgba(17,56,63,.05);
  --shadow-md: 0 18px 50px -22px rgba(17,56,63,.28);
  --shadow-lg: 0 40px 90px -40px rgba(17,56,63,.45);

  --maxw: 1240px;
  --grad: linear-gradient(118deg, var(--blue) 0%, #3aa9b0 48%, var(--green) 100%);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  color:var(--body);
  background:var(--white);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,.serif{ font-family:'Cormorant Garamond', Georgia, serif; color:var(--ink); font-weight:500; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; }
.eyebrow{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--blue-deep);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:''; width:26px; height:2px; background:var(--grad); border-radius:2px;
}
.eyebrow.center{ justify-content:center; }
.lead{ font-size:1.12rem; line-height:1.7; color:var(--body); }

/* buttons -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:.95rem;
  padding:15px 28px; border-radius:100px; cursor:pointer; border:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .3s;
  letter-spacing:.01em; white-space:nowrap;
}
.btn-primary{ background:var(--grad); color:#fff; box-shadow:0 14px 30px -12px rgba(31,155,209,.6); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(31,155,209,.7); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-deep); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn svg{ width:18px; height:18px; }

.link-more{
  display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.92rem;
  color:var(--blue-deep); letter-spacing:.01em;
}
.link-more svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.link-more:hover svg{ transform:translateX(4px); }

/* real photos ---------------------------------------------- */
.shot{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-slide .shot{ position:absolute; inset:0; }

/* placeholders -------------------------------------------- */
.ph{
  position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(31,155,209,.16), rgba(124,184,40,.16)),
    var(--mist-2);
}
.ph::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255,255,255,.55), transparent 60%),
    repeating-linear-gradient(135deg, rgba(17,56,63,.035) 0 2px, transparent 2px 22px);
}
.ph::after{
  content: attr(data-ph);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Hanken Grotesk', monospace; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(17,56,63,.4); font-weight:600;
  border:1px dashed rgba(17,56,63,.22); padding:8px 14px; border-radius:100px;
  background:rgba(255,255,255,.4); backdrop-filter:blur(2px);
  white-space:nowrap;
}

/* reveal on scroll ---------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============== UTILITY BAR ============== */
.utility{
  background:var(--ink); color:rgba(255,255,255,.82);
  font-size:.8rem; letter-spacing:.02em;
}
.utility .wrap{ display:flex; align-items:center; justify-content:space-between; height:40px; }
.utility a{ color:rgba(255,255,255,.82); transition:color .25s; }
.utility a:hover{ color:#fff; }
.utility .u-left{ display:flex; gap:26px; align-items:center; }
.utility .u-right{ display:flex; gap:20px; align-items:center; }
.utility .dot{ width:5px;height:5px;border-radius:50%;background:var(--green-tip);display:inline-block;margin-right:8px;vertical-align:middle;}
.u-hide{ }
@media (max-width:760px){ .utility .u-left .u-hide{ display:none; } }

/* ============== HEADER ============== */
.header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent;
  transition:box-shadow .35s var(--ease), border-color .35s, background .35s;
}
.header.scrolled{ box-shadow:0 6px 24px -16px rgba(17,56,63,.4); border-color:var(--line); }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; height:84px; transition:height .35s var(--ease); gap:30px; }
.header.scrolled .wrap{ height:70px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand .badge{ width:50px; height:50px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); display:grid; place-items:center; overflow:hidden; transition:width .35s,height .35s; flex:none; }
.header.scrolled .brand .badge{ width:44px; height:44px; }
.brand .badge img{ width:40px; height:40px; object-fit:contain; }
.brand .name{ line-height:1; }
.brand .name b{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.5rem; color:var(--ink); letter-spacing:.01em; display:block; }
.brand .name span{ font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--blue-deep); font-weight:700; }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ font-size:.83rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); position:relative; padding:6px 0; white-space:nowrap; }
.nav a::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--grad); transition:width .3s var(--ease); }
.nav a:hover::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:18px; }
.icon-btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--ink); transition:.3s var(--ease); background:#fff; }
.icon-btn:hover{ border-color:var(--blue); color:var(--blue-deep); }
.icon-btn svg{ width:18px; height:18px; }
.burger{ display:none; }

@media (max-width:980px){
  .nav, .header .icon-btn:not(.burger){ display:none; }
  .header .burger{ display:grid; }
}
@media (max-width:560px){
  .brand .name span{ display:none; }
  .header-cta .btn-primary{ display:none; }
}

/* mobile menu */
.mmenu{ position:fixed; inset:0; z-index:80; background:rgba(255,255,255,.98); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; padding:30px 40px; transform:translateY(-100%);
  visibility:hidden; opacity:0; pointer-events:none;
  transition:transform .5s var(--ease), opacity .4s var(--ease), visibility .5s; }
.mmenu.open{ transform:none; visibility:visible; opacity:1; pointer-events:auto; }
.mmenu .mhead{ display:flex; justify-content:space-between; align-items:center; }
.mmenu nav{ display:flex; flex-direction:column; gap:6px; margin-top:40px; }
.mmenu nav a{ font-family:'Cormorant Garamond',serif; font-size:2rem; color:var(--ink); padding:10px 0; border-bottom:1px solid var(--line); }
.mmenu .btn{ margin-top:30px; justify-content:center; }

/* ============== HERO ============== */
.hero{ position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
.hero-bg{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease), transform 7s linear; transform:scale(1.06); }
.hero-slide.active{ opacity:1; transform:scale(1); }
.hero-slide .ph{ width:100%; height:100%; }
.hero-slide.s1 .ph{ background:linear-gradient(120deg,#cfe6ef,#dfeccf 70%,#eef3e6); }
.hero-slide.s2 .ph{ background:linear-gradient(120deg,#cae3ee,#bfe0e8 55%,#d7ead0); }
.hero-slide.s3 .ph{ background:linear-gradient(120deg,#e7eddf,#cfe6ec 60%,#cde3da); }
.hero-overlay{ position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(8,40,47,.74) 0%, rgba(8,40,47,.42) 42%, rgba(8,40,47,.08) 70%, rgba(8,40,47,.18) 100%),
  linear-gradient(0deg, rgba(8,40,47,.55), transparent 45%); }
.hero-inner{ position:relative; z-index:3; padding:0 0 86px; width:100%; }
.hero-eyebrow{ color:#cfe9f3 !important; }
.hero-eyebrow::before{ background:var(--green-tip); }
.hero h1{ color:#fff; font-size:clamp(3rem, 6.4vw, 6.2rem); line-height:.98; font-weight:500; max-width:14ch; margin:22px 0 0; letter-spacing:-.01em; }
.hero h1 em{ font-style:italic; color:#dff0c4; }
.hero-sub{ color:rgba(255,255,255,.9); font-size:1.18rem; max-width:46ch; margin-top:24px; line-height:1.6; }
.hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hero-dots{ display:flex; gap:12px; margin-top:46px; align-items:center; }
.hero-dots button{ width:38px; height:4px; border-radius:4px; border:none; background:rgba(255,255,255,.32); cursor:pointer; padding:0; transition:background .3s, width .3s; }
.hero-dots button.active{ background:var(--green-tip); width:54px; }
.hero-float{ position:absolute; right:48px; bottom:86px; z-index:3; display:flex; flex-direction:column; gap:14px; }
.hero-chip{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px);
  color:#fff; padding:14px 20px; border-radius:16px; min-width:190px; }
.hero-chip b{ font-family:'Cormorant Garamond',serif; font-size:1.9rem; display:block; line-height:1; color:#fff; }
.hero-chip span{ font-size:.78rem; letter-spacing:.04em; opacity:.85; }
@media (max-width:980px){ .hero-float{ display:none; } }
@media (max-width:560px){ .hero{ min-height:88vh; } .hero-inner{ padding-bottom:60px; } }

/* ============== TRUST STRIP ============== */
.trust{ background:var(--white); border-bottom:1px solid var(--line); }
.trust .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 30px; padding:26px 40px; }
.trust .item{ display:flex; align-items:center; gap:11px; font-size:.92rem; color:var(--ink); font-weight:600; }
.trust .item svg{ width:22px; height:22px; color:var(--green-deep); flex:none; }

/* ============== SECTION BASICS ============== */
section{ position:relative; }
.sec{ padding:104px 0; }
.sec-head{ max-width:640px; }
.sec-head.center{ margin:0 auto; text-align:center; }
.sec-title{ font-size:clamp(2.3rem,4.2vw,3.5rem); line-height:1.04; margin-top:18px; letter-spacing:-.01em; }
.sec-head p{ margin-top:18px; }
.bg-mist{ background:var(--mist); }
.bg-cream{ background:var(--cream); }

/* decorative ring motif */
.ring{ position:absolute; border-radius:50%; border:1.5px solid var(--line-2); pointer-events:none; }

/* ============== APPROACH (why) ============== */
.approach .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:74px; align-items:center; }
.approach-media{ position:relative; }
.approach-media .ph, .approach-media .photo{ aspect-ratio:4/4.4; border-radius:20px; box-shadow:var(--shadow-md); overflow:hidden; position:relative; }
.approach-media .shot{ object-position:42% 38%; }
.approach-media .ringline{ position:absolute; width:150px; height:150px; border-radius:50%; border:2px solid var(--green); opacity:.4; right:-34px; top:-34px; }
.approach-media .ringline.b{ border-color:var(--blue); width:96px; height:96px; right:-18px; top:auto; bottom:-26px; opacity:.5; }
.stat-card{ position:absolute; left:-30px; bottom:40px; background:#fff; border-radius:18px; padding:20px 24px; box-shadow:var(--shadow-md); display:flex; gap:16px; align-items:center; }
.stat-card b{ font-family:'Cormorant Garamond',serif; font-size:2.6rem; color:var(--blue-deep); line-height:1; }
.stat-card span{ font-size:.82rem; color:var(--body); max-width:14ch; line-height:1.35; }
.approach ul{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.approach li{ display:flex; gap:14px; align-items:flex-start; }
.approach li .tick{ width:26px; height:26px; border-radius:50%; background:var(--mist-2); display:grid; place-items:center; flex:none; margin-top:2px; }
.approach li .tick svg{ width:14px; height:14px; color:var(--green-deep); }
.approach li b{ color:var(--ink); font-weight:600; }
@media (max-width:920px){ .approach .wrap{ grid-template-columns:1fr; gap:54px; } .approach-media{ order:-1; } .stat-card{ left:10px; } }

/* ============== HOW IT WORKS ============== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:54px; counter-reset:step; }
.step{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px 30px; position:relative; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.step .num{ font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:600; color:#fff; width:48px; height:48px; border-radius:50%; background:var(--grad); display:grid; place-items:center; letter-spacing:.02em; }
.step h3{ font-size:1.55rem; margin:22px 0 8px; }
.step p{ font-size:.96rem; }
.step .line{ position:absolute; top:58px; right:-26px; width:26px; height:2px; background:var(--line-2); }
.step:last-child .line{ display:none; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } .step .line{ display:none; } }

/* ============== TREATMENTS ============== */
.treatments .grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:54px; }
.tcard{ background:#fff; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease); display:flex; flex-direction:column; }
.tcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.tcard .media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.tcard .media .ph, .tcard .media .shot{ width:100%; height:100%; transition:transform .9s var(--ease); }
.tcard:hover .media .ph, .tcard:hover .media .shot{ transform:scale(1.06); }
.tcard .tag{ position:absolute; top:18px; left:18px; z-index:2; background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  color:var(--blue-deep); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border-radius:100px; white-space:nowrap; }
.tcard .body{ padding:34px 34px 36px; display:flex; flex-direction:column; flex:1; }
.tcard h3{ font-size:2rem; line-height:1.05; }
.tcard .body p{ margin:12px 0 0; font-size:1rem; }
.tcard .meta{ display:flex; gap:10px; margin:22px 0 26px; flex-wrap:wrap; }
.tcard .meta span{ font-size:.8rem; font-weight:600; color:var(--ink); background:var(--mist); border:1px solid var(--line); padding:7px 14px; border-radius:100px; display:inline-flex; gap:7px; align-items:center; }
.tcard .meta span svg{ width:14px; height:14px; color:var(--green-deep); }
.tcard .foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
@media (max-width:820px){ .treatments .grid{ grid-template-columns:1fr; } }
.tcard .media.icon-media{ display:grid; place-items:center; background:
  radial-gradient(120% 130% at 20% 10%, rgba(31,155,209,.16), transparent 60%),
  radial-gradient(120% 130% at 90% 100%, rgba(124,184,40,.18), transparent 60%),
  var(--mist); }
.tcard .media.icon-media svg{ width:84px; height:84px; color:var(--blue-deep); opacity:.92; }
.tcard .media.icon-media .doc-badge{ width:150px; height:150px; object-fit:contain; background:#fff; border-radius:50%; box-shadow:var(--shadow-md); }

/* expandable test descriptions */
.tcard .expand{ display:none; border-top:1px dashed var(--line-2); margin:0 0 24px; }
.tcard .expand.open{ display:grid; gap:16px; padding-top:18px; }
.tcard .expand b{ color:var(--ink); font-weight:600; display:block; font-size:1.02rem; }
.tcard .expand p{ margin:4px 0 0 !important; font-size:.93rem; }
.treatments [id]{ scroll-margin-top:96px; }
.tcard.wide{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(300px, 2fr) 3fr; }
.tcard.wide .media{ aspect-ratio:auto; min-height:300px; height:100%; }
@media (max-width:820px){
  .tcard.wide{ display:flex; flex-direction:column; grid-column:auto; }
  .tcard.wide .media{ aspect-ratio:16/10; min-height:0; height:auto; width:100%; }
}

/* ============== BENEFITS ============== */
.benefits .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px; }
.bcard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px 30px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.bcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.bcard .ic{ width:62px; height:62px; border-radius:50%; background:var(--mist-2); display:grid; place-items:center; margin-bottom:22px; transition:background .4s; }
.bcard:hover .ic{ background:linear-gradient(135deg, rgba(31,155,209,.18), rgba(124,184,40,.18)); }
.bcard .ic svg{ width:28px; height:28px; color:var(--blue-deep); }
.bcard h3{ font-size:1.5rem; margin-bottom:8px; }
.bcard p{ font-size:.95rem; }
@media (max-width:900px){ .benefits .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .benefits .grid{ grid-template-columns:1fr; } }

/* ============== DARK PILLARS BAND ============== */
.band{ background:
  radial-gradient(120% 140% at 12% 0%, rgba(31,155,209,.4), transparent 55%),
  radial-gradient(120% 140% at 100% 100%, rgba(124,184,40,.32), transparent 55%),
  #0b3037; color:#fff; overflow:hidden; }
.band .wrap{ position:relative; z-index:2; }
.band h2{ color:#fff; font-size:clamp(2.2rem,4vw,3.4rem); line-height:1.05; max-width:18ch; }
.band h2 em{ font-style:italic; color:#dff0c4; }
.band .lead{ color:rgba(255,255,255,.82); max-width:52ch; margin-top:20px; }
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:54px; }
.pillar{ border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:30px 26px; background:rgba(255,255,255,.04); transition:background .4s, transform .4s var(--ease); }
.pillar:hover{ background:rgba(255,255,255,.09); transform:translateY(-5px); }
.pillar .ic{ width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;margin-bottom:20px; }
.pillar .ic svg{ width:26px;height:26px;color:var(--green-tip); }
.pillar h3{ color:#fff; font-size:1.45rem; }
.pillar p{ color:rgba(255,255,255,.72); font-size:.9rem; margin-top:6px; }
.band-cta{ margin-top:50px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.band-note{ color:rgba(255,255,255,.6); font-size:.9rem; }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pillars{ grid-template-columns:1fr; } }

/* ============== TESTIMONIALS ============== */
.tests{ background:var(--cream); }
.tests-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.t-nav{ display:flex; gap:12px; }
.t-nav button{ width:50px; height:50px; border-radius:50%; border:1px solid var(--line-2); background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--ink); transition:.3s var(--ease); }
.t-nav button:hover{ border-color:var(--blue); color:var(--blue-deep); }
.t-nav button svg{ width:18px; height:18px; }
.t-viewport{ overflow:hidden; margin-top:48px; }
.t-track{ display:flex; transition:transform .6s var(--ease); }
.t-slide{ min-width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.qcard{ background:#fff; border-radius:20px; padding:38px 34px; box-shadow:var(--shadow-sm); border:1px solid var(--line); display:flex; flex-direction:column; }
.qcard .stars{ display:flex; gap:3px; color:var(--green); margin-bottom:18px; }
.qcard .stars svg{ width:18px; height:18px; }
.qcard blockquote{ font-family:'Cormorant Garamond',serif; font-size:1.45rem; line-height:1.35; color:var(--ink); font-weight:500; }
.qcard blockquote::before{ content:'“'; color:var(--green); }
.qcard blockquote::after{ content:'”'; color:var(--green); }
.qcard .who{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.qcard .av{ width:48px;height:48px;border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#fff; font-weight:700; font-size:1.05rem; flex:none; }
.qcard .who b{ display:block; color:var(--ink); font-weight:600; font-size:.98rem; }
.qcard .who span{ font-size:.84rem; color:var(--muted); }
@media (max-width:900px){ .t-slide{ grid-template-columns:1fr; } }

/* ============== CONTACT / LOCATION ============== */
.contact .wrap{ display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:stretch; }
.contact-info .row{ display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.contact-info .row:first-of-type{ border-top:1px solid var(--line); }
.contact-info .row .ic{ width:46px;height:46px;border-radius:50%;background:var(--mist-2);display:grid;place-items:center;flex:none; }
.contact-info .row .ic svg{ width:20px;height:20px;color:var(--blue-deep); }
.contact-info .row b{ color:var(--ink); font-weight:600; display:block; font-size:1.02rem; }
.contact-info .row span,.contact-info .row a{ font-size:.96rem; color:var(--body); }
.contact-info .row a:hover{ color:var(--blue-deep); }
.contact-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.map{ display:block; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md); min-height:440px; position:relative; }
.map .ph{ position:absolute; inset:0; }
.map .shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.map .pin{ position:absolute; left:50%; top:46%; transform:translate(-50%,-100%); z-index:3; }
.map .pin .dot{ width:54px;height:54px;border-radius:50% 50% 50% 0; background:var(--grad); transform:rotate(-45deg); box-shadow:var(--shadow-md); display:grid; place-items:center; }
.map .pin .dot img{ width:30px;height:30px;transform:rotate(45deg); }
@media (max-width:900px){ .contact .wrap{ grid-template-columns:1fr; gap:40px; } .map{ min-height:320px; } }

/* ============== FOOTER ============== */
.footer{ background:#0b3037; color:rgba(255,255,255,.72); padding:80px 0 0; }
.footer .top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer .fbrand .badge{ width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;margin-bottom:18px; }
.footer .fbrand .badge img{ width:42px;height:42px; object-fit:contain; }
.footer .fbrand b{ font-family:'Cormorant Garamond',serif; font-size:1.7rem; color:#fff; display:block; }
.footer .fbrand p{ margin-top:14px; max-width:34ch; font-size:.94rem; line-height:1.6; }
.footer h4{ color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:20px; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer ul a{ font-size:.95rem; transition:color .25s, padding .25s; }
.footer ul a:hover{ color:#fff; padding-left:5px; }
.fsocial{ display:flex; gap:12px; margin-top:8px; }
.fsocial a{ width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#fff;transition:.3s var(--ease); }
.fsocial a:hover{ background:var(--grad); border-color:transparent; transform:translateY(-3px); }
.fsocial svg{ width:18px;height:18px; }
.footer .bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:.85rem; flex-wrap:wrap; gap:10px; }
.footer .bottom a:hover{ color:#fff; }
@media (max-width:820px){ .footer .top{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:520px){ .footer .top{ grid-template-columns:1fr; } }

/* ============== SPECIALISTS / E-CONSULTATIONS ============== */
.specialists{ background:var(--white); }
#specialists, #book{ scroll-margin-top:70px; }
.doc-grid{ display:grid; gap:30px; margin-top:54px; }
.doc{ display:grid; grid-template-columns:380px 1fr; background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); }
.doc-media{ position:relative; min-height:360px; }
.doc-media .shot{ position:absolute; inset:0; width:100%; height:100%; object-position:50% 18%; }
.doc-media.doc-logo{ display:grid; place-items:center; background:
  radial-gradient(120% 130% at 20% 10%, rgba(31,155,209,.14), transparent 60%),
  radial-gradient(120% 130% at 90% 100%, rgba(124,184,40,.16), transparent 60%),
  var(--mist); padding:40px; }
.doc-media.doc-logo img{ width:210px; height:210px; object-fit:contain; background:#fff; border-radius:50%; box-shadow:var(--shadow-md); }
.doc-logo-link, .doc-badge-link{ display:inline-grid; place-items:center; border-radius:50%; transition:transform .4s var(--ease); }
.doc-logo-link:hover, .doc-badge-link:hover{ transform:translateY(-3px) scale(1.03); }
.doc-logo-link:hover img, .doc-badge-link:hover img{ box-shadow:var(--shadow-lg); }
.doc-body{ padding:42px 46px 44px; }
.doc-role{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--blue-deep); }
.doc-body h3{ font-size:2.2rem; line-height:1.05; margin-top:10px; }
.doc-body p{ margin-top:14px; font-size:.99rem; }
.doc-sub{ display:block; color:var(--ink); font-weight:600; margin-top:24px; font-size:.95rem; }
.doc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.doc-tags span{ display:inline-flex; align-items:center; line-height:1.3; font-size:.78rem; font-weight:600; color:var(--ink); background:var(--mist); border:1px solid var(--line); padding:6px 13px; border-radius:100px; }
.doc-note{ color:var(--muted); font-size:.88rem; }
.doc-actions{ display:flex; align-items:center; gap:24px; margin-top:28px; flex-wrap:wrap; }
@media (max-width:920px){
  .doc{ grid-template-columns:1fr; }
  .doc-media{ min-height:320px; }
  .doc-body{ padding:32px 28px 36px; }
}

/* ============== ONLINE BOOKING ============== */
.book{ background:
  radial-gradient(120% 140% at 12% 0%, rgba(31,155,209,.4), transparent 55%),
  radial-gradient(120% 140% at 100% 100%, rgba(124,184,40,.32), transparent 55%),
  #0b3037; color:#fff; overflow:hidden; }
.book .eyebrow{ color:#bfe6c0; }
.book .eyebrow::before{ background:var(--green-tip); }
.book .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.book .wrap > div{ min-width:0; }
.book h2{ color:#fff; font-size:clamp(2.2rem,4vw,3.4rem); line-height:1.05; margin-top:16px; }
.book h2 em{ font-style:italic; color:#dff0c4; }
.book .lead{ color:rgba(255,255,255,.82); margin-top:18px; max-width:54ch; }
.book-points{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:30px; }
.book-points li{ display:flex; gap:14px; align-items:flex-start; color:rgba(255,255,255,.85); font-size:.98rem; }
.book-points .tick{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); display:grid; place-items:center; flex:none; margin-top:2px; }
.book-points .tick svg{ width:13px; height:13px; color:var(--green-tip); }
.book-points b{ color:#fff; font-weight:600; }
.book-actions{ margin-top:32px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.bform{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px; }
.bform label{ display:flex; flex-direction:column; gap:8px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.72); }
.bform input, .bform select{ width:100%; min-width:0; height:52px; border-radius:12px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff; padding:0 16px; font-family:'Hanken Grotesk',sans-serif; font-size:.95rem; color-scheme:dark; outline:none; transition:border-color .25s, background .25s; }
.bform input::placeholder{ color:rgba(255,255,255,.45); }
.bform input:focus, .bform select:focus{ border-color:var(--green-tip); background:rgba(255,255,255,.12); }
.bform select option{ color:var(--ink); background:#fff; }
.bform .full{ grid-column:1 / -1; justify-content:center; margin-top:6px; }
.book-note{ color:rgba(255,255,255,.6); font-size:.88rem; margin-top:16px; }
.book-media{ position:relative; }
.book-media .photo{ border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:1/1.04; position:relative; }
.book-media .photo .shot{ position:absolute; inset:0; }
.book-chip{ position:absolute; left:22px; right:22px; bottom:22px; background:rgba(255,255,255,.95); backdrop-filter:blur(4px); border-radius:14px; padding:14px 18px; color:var(--ink); font-weight:600; font-size:.88rem; box-shadow:var(--shadow-md); display:flex; gap:10px; align-items:center; }
.book-chip svg{ width:20px; height:20px; color:var(--green-deep); flex:none; }
@media (max-width:920px){ .book .wrap{ grid-template-columns:1fr; gap:44px; } }
@media (max-width:560px){ .bform{ grid-template-columns:1fr; } }

/* ============== BOOKING MODAL (seamless) ============== */
.bmodal{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:24px; }
.bmodal.open{ display:flex; }
.bmodal-veil{ position:absolute; inset:0; background:rgba(8,40,47,.55); backdrop-filter:blur(6px); animation:bveil .3s var(--ease); }
@keyframes bveil{ from{ opacity:0; } }
.bmodal-card{ position:relative; z-index:2; width:min(560px,100%); max-height:calc(100vh - 48px); overflow:auto; background:#fff; border-radius:24px; box-shadow:var(--shadow-lg); padding:42px 44px 34px; animation:bpop .42s var(--ease); }
@keyframes bpop{ from{ opacity:0; transform:translateY(22px) scale(.985); } }
.bmodal-x{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--ink); transition:.3s var(--ease); z-index:3; }
.bmodal-x:hover{ border-color:var(--blue); color:var(--blue-deep); transform:rotate(90deg); }
.bmodal-x svg{ width:18px; height:18px; }
.bmodal .eyebrow{ color:var(--blue-deep); }
.bmodal h3{ font-size:2.1rem; line-height:1.05; margin-top:12px; }
.bmodal-intro{ margin-top:12px; font-size:.98rem; max-width:46ch; }
.bmform{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
.bmform label{ display:flex; flex-direction:column; gap:8px; font-size:.71rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--muted); }
.bmform .full{ grid-column:1 / -1; }
.bmform input, .bmform select{ width:100%; min-width:0; height:52px; border-radius:12px; border:1px solid var(--line-2); background:var(--mist); color:var(--ink); padding:0 15px; font-family:'Hanken Grotesk',sans-serif; font-size:.97rem; font-weight:500; outline:none; transition:border-color .25s, background .25s, box-shadow .25s; }
.bmform input::placeholder{ color:var(--muted); font-weight:400; }
.bmform input:focus, .bmform select:focus{ border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(31,155,209,.12); }
.bmform button.full{ justify-content:center; margin-top:4px; }
.bmform-note{ grid-column:1 / -1; font-size:.8rem; letter-spacing:normal; text-transform:none; font-weight:400; color:var(--muted); line-height:1.5; margin-top:2px; }
.bmodal-done{ text-align:center; padding:22px 10px 16px; }
.bmodal-check{ width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg, rgba(31,155,209,.16), rgba(124,184,40,.2)); display:grid; place-items:center; margin:0 auto 22px; }
.bmodal-check svg{ width:38px; height:38px; color:var(--green-deep); }
.bmodal-done h3{ margin-top:0; }
.bmodal-done p{ max-width:40ch; margin:12px auto 26px; }
body.bmodal-lock{ overflow:hidden; }
@media (max-width:520px){
  .bmodal{ padding:14px; }
  .bmodal-card{ padding:34px 22px 26px; border-radius:20px; }
  .bmform{ grid-template-columns:1fr; }
  .bmodal h3{ font-size:1.8rem; }
}

/* ============== SEARCH OVERLAY ============== */
.smodal{ position:fixed; inset:0; z-index:130; display:none; justify-content:center; align-items:flex-start; padding:12vh 24px 24px; }
.smodal.open{ display:flex; }
.smodal-veil{ position:absolute; inset:0; background:rgba(8,40,47,.5); backdrop-filter:blur(5px); animation:bveil .25s var(--ease); }
.smodal-card{ position:relative; z-index:2; width:min(620px,100%); background:#fff; border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden; animation:bpop .32s var(--ease); }
.smodal-bar{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
.smodal-bar > svg{ width:22px; height:22px; color:var(--blue-deep); flex:none; }
.smodal-bar input{ flex:1; min-width:0; border:none; outline:none; font-family:'Hanken Grotesk',sans-serif; font-size:1.1rem; color:var(--ink); background:transparent; }
.smodal-bar input::placeholder{ color:var(--muted); }
.smodal-esc{ flex:none; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); background:var(--mist); border-radius:8px; padding:6px 10px; cursor:pointer; transition:.25s var(--ease); }
.smodal-esc:hover{ border-color:var(--blue); color:var(--blue-deep); }
.smodal-results{ list-style:none; max-height:52vh; overflow:auto; padding:8px; }
.smodal-results a{ display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:12px; cursor:pointer; transition:background .2s; }
.smodal-results a:hover, .smodal-results a.active{ background:var(--mist); }
.sr-ic{ width:38px; height:38px; border-radius:10px; background:var(--mist-2); display:grid; place-items:center; flex:none; }
.sr-ic svg{ width:17px; height:17px; color:var(--blue-deep); }
.sr-txt b{ display:block; color:var(--ink); font-weight:600; font-size:.98rem; }
.sr-txt > span{ font-size:.84rem; color:var(--muted); }
.smodal-empty{ padding:30px 22px 34px; text-align:center; color:var(--muted); font-size:.95rem; }
@media (max-width:520px){ .smodal{ padding:8vh 12px 12px; } }

/* floating whatsapp */
.fab{ position:fixed; right:24px; bottom:24px; z-index:70; width:60px; height:60px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform .35s var(--ease); }
.fab:hover{ transform:scale(1.08); }
.fab svg{ width:30px; height:30px; color:#fff; }