:root{
  /* Colors */
  --bg: #E9EDF6;              /* page background */
  --text: #0f0f0f;            /* main text */
  --muted: #656A70;
  --accent: #345C8A;
  --star: #FFC83D;
  --frame: #B5C2D5;           /* right rounded frame + rings */
  --ring: #B5C2D5;

  /* Layout + spacing */
  --padX: clamp(16px, 4vw, 28px);
  --edge-fade: 80px;
  --nav-gap: clamp(12px, 3vw, 30px);

  /* Sizing (legacy vars kept if referenced) */
  --page-w: 1365px;
  --page-h: 768px;
  --pad-x: var(--padX);
  --pad-y: clamp(24px, 6vw, 64px);

  /* Typography */
  --body-size: clamp(16px, 1.6vw, 22px);
  --line: 1.65;
  --name-size: clamp(28px, 3.2vw, 44px);
  --role-size: clamp(16px, 2vw, 28px);

  /* UI */
  --frame-bw: 14px;
  --radius: 44px;
  --card-radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Base */
* { box-sizing: border-box; }
html{
  scroll-behavior: smooth;
}
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.4;
  -webkit-text-size-adjust: 100%;
}

/* Media defaults */
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Layout wrapper */
.main{
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--padX);
  padding-block: clamp(12px, 3vw, 24px);
}

/* Header */
.topbar{ background:var(--bg); }
.topbar .wrap{
  max-width:1100px;
  margin-inline:auto;
  padding-inline: var(--padX);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Brand (logo + name) */
.brand{
  display:grid;
  grid-auto-flow:column;
  align-items:center;
  gap:14px;
}
#logo{ width: 56px; height:auto; }
.brand .name{ line-height:1.15; }
.brand .name .line1{ font-weight:700; font-size:15px; }
.brand .name .line2{ font-weight:700; font-size:14px; }

/* Nav */
nav { margin-left: auto; }
nav ul{
  display:flex;
  list-style:none;
  gap:var(--nav-gap);
  padding:0;
  margin:0;
  align-items:center;
  flex-wrap: wrap;
}
nav a{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
}
nav a:hover,
nav a:focus{
  color: #345C8A;
  outline:none;
}

/* Small screens tweaks for nav */
@media (max-width:720px){
  .topbar .wrap{ min-height:64px; }
  .brand .name .line1{ font-size:14px; }
  .brand .name .line2{ font-size:13px; }
  nav ul{ gap:14px; }
}
@media (max-width:480px){
  nav ul{
    flex-wrap: wrap;   /* allow wrapping */
    overflow-x: visible; /* disable slider */
  }
  nav ul::-webkit-scrollbar{ display:none; }
}

/* Sections spacing */
section { margin-block: clamp(3rem, 8vh, 8rem); }

/* Hero */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  min-height:100svh;
  min-height:58dvh; /* modern mobile viewport */
  padding:max(16px,4vh) var(--padX);
  overflow:clip;
}
@media(min-width:960px){
  .hero{ grid-template-columns:1.05fr 1fr; column-gap:clamp(24px,4vw,72px); }
}

.copy{ 
  max-width:54rem; 
  z-index:2;
  position: relative;
  font-size: var(--body-size);
  line-height: var(--line);
  letter-spacing: 0.01em;
  text-align: justify;
}
.copy p { margin: 0; }
.copy p + p { margin-top: 28px; }

.copy h1{
  color: black;
  margin:0 0 clamp(18px,2.5vw,28px);
  font-family:Poppins, Inter, Arial, sans-serif;
  font-weight:800;
  line-height:1.06;
  letter-spacing:-0.02em;
  font-size:clamp(2rem, 6vw, 5rem);
}
h1 .accent{ color:var(--accent) }

.sublead{
  margin:0 0 clamp(20px,4vw,40px);
  max-width:46rem;
  font-weight:600;
  font-style:italic;
  text-transform:uppercase;
  color:var(--muted);
  letter-spacing:.02em;
  font-size:clamp(12px,1.25vw,16px);
}

.byline{ margin-top:clamp(10px,2vw,20px); display:grid; row-gap:6px; }
.byline .name{
  font-family:Poppins, Inter, sans-serif;
  font-weight:800;
  font-style:italic;
  letter-spacing:.06em;
  font-size:clamp(16px,2vw,26px);
}
.byline .role{
  font-weight:700;
  letter-spacing:.14em;
  font-size:clamp(12px,1.25vw,16px);
  color:#2e3136;
}

/* Right visual */
.art{
  position:relative;
  z-index:1;
  height:100%;
  display:grid;
  align-items:center;
  justify-items:end;
}
.circle{
  position:relative;
  width:min(72vmin,680px);
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transform:translateX(6vmin);
  bottom: 5%;
}
.circle img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
/* subtle outer ring */
.circle::before{
  content:"";
  position:absolute; inset:-6%;
  border-radius:50%;
  background:radial-gradient(closest-side, transparent 72%, rgba(255,255,255,.55) 73% 74%, transparent 75%);
  pointer-events:none;
}

/* Facts row */
.facts{
  display:grid;
  grid-auto-flow:column;
  gap:clamp(20px,4vw,64px);
  align-items:center;
  justify-content:flex-start;
  margin-top:clamp(24px,10vh,60px);
}
.stars{display:inline-flex; gap:6px; margin-bottom:8px}
.stars svg{width:clamp(18px,2.3vw,26px); height:auto; fill:var(--star); filter:drop-shadow(0 1px 0 rgba(0,0,0,.06))}
.facts .label{font-size:clamp(13px,1.4vw,18px); color:#2f3136}
.count{
  font-family:Poppins, Inter, sans-serif;
  font-weight:600;
  font-size:clamp(24px,4.5vw,44px);
  line-height:1.1;
  text-align:left;
}
.muted{color:#44484e; font-size:clamp(13px,1.4vw,18px); text-align:left}

/* Desktop centering */
@media(min-width:960px){
  .art{ align-content:center; justify-items:center; }
}

/* Mobile: image behind text; facts stack */
@media(max-width:959.98px){
  .hero{ padding-top:14vw; padding-bottom:10vw; }
  .art{ position:absolute; inset:0 0 auto 0; height:52vh; pointer-events:none; opacity:.42; }
  .circle{ width:90vmin; transform:translate(12vmin,-6vmin); left: 30px;}
  .facts{
    margin-top:18px;
    grid-auto-flow:row;
    grid-template-columns: 1fr 1fr;
  }
}
@media(max-width:520px){
  .facts{ grid-template-columns: 1fr; }
}

@media(prefers-reduced-motion:reduce){
  .circle,.facts{ transform:none }
}

/* Marquee */
.marquee{
  position:relative;
  overflow:hidden;
  margin-block:22px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent);
}
.marquee__track{
  display:flex;
  align-items:stretch;
  gap:var(--gap, 24px);
  will-change: transform;
  animation-name: scroll;
  animation-duration: var(--duration, 40s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.marquee[data-direction="right"] .marquee__track{ animation-direction: reverse; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* Cards */
.card{
  margin-left: 1rem;
  flex:0 0 auto;
  width:clamp(220px, 70vw, 380px);
  background:#fff;
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.card img{
  display:block;
  width:100%;
  height:clamp(150px, 40vw, 220px);
  object-fit:cover;
}
.card .title{
  padding:14px 18px;
  font-weight:800;
  font-size:clamp(1rem, 1.3vw, 1.25rem);
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none !important; }
}

/* About */
.About {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding-inline: var(--padX);
  padding-block: clamp(24px, 6vw, 64px);
  position: relative;
  overflow: hidden;
  height: auto; /* remove fixed height to avoid clipping */
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 480px);
  gap: clamp(20px, 4vw, 40px);
  padding: 0; /* padding handled by .About */
  position: relative;
}

/* Decorative rings under text */
.ring {
  position: absolute;
  border: var(--frame-bw) solid var(--ring);
  border-radius: 50%;
  z-index: 1;
  opacity: 0.5;
}
.ring--lg { width: 260px; height: 260px; left: 460px; bottom: 140px; }
.ring--sm { width: 100px; height: 100px; left: 680px; bottom: 88px; }

/* Right visual area */
.visual { position: relative; min-height: clamp(420px, 60vw, 560px); }
.phone-frame{
  position: absolute;
  right: 18px;
  top: 24px;
  width: clamp(220px, 40vw, 330px);
  height: clamp(420px, 68vw, 560px);
  border: var(--frame-bw) solid var(--frame);
  border-radius: var(--radius);
  opacity: 0.5;
}
.doctor{
  position: absolute;
  right: 116px;
  bottom: 0;
  width: clamp(240px, 48vw, 355px);
  height: auto;
  object-fit: contain;
  z-index: 1;
  bottom: 100px;
  /* Bottom fade to transparent (shows page background) */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,1,1,1) 95%, rgba(0,0,0,0) 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


.visual::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: clamp(60px, 18vh, 180px);
  pointer-events:none;
  /* match your --bg (#E9EDF6) */
  background: linear-gradient(to bottom, rgba(233,237,246,0) 0%, rgba(233,237,246,1) 100%);
}

.signature{
  position: absolute;
  left: 0;
  bottom: 20px;
  z-index: 2;
}
.signature h1{
  margin: 0 0 8px 0;
  font-size: var(--name-size);
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #000;
}
.signature p{
  margin: 0;
  font-size: var(--role-size);
  font-weight: 700;
}

/* Responsiveness for About */
@media (max-width: 1200px) {
  .ring--lg { left: 420px; }
  .ring--sm { left: 630px; }
}
@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 120px; /* room for signature */
  }
  .visual {
    min-height: clamp(420px, 75vw, 560px);
  }
  .signature { position: static; margin-top: 16px; }
  .ring--lg, .ring--sm { display: none; }

  /* Center visuals on mobile */
  .phone-frame, .doctor{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .phone-frame{
    top: 0;
    bottom: auto;
  }
  .doctor{
    bottom: 0;
  }
}

/* Treatments */
.Treatments {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--padX);
}
.Treatments-Container h1{
  margin: 12px 0 28px;
  font-family: Poppins, Inter, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 10vw, 6rem);
  line-height: .95;
  letter-spacing: -0.01em;
}
.Treatments-Container h2{
  margin: 8px 0 6px;
  font-weight: 800;
  font-size: clamp(1.25rem, 3.6vw, 2.2rem);
}
.Treatments-Container ul{
  margin: 24px 0 0;
  padding-left: 1.25rem;
  list-style: disc;
  padding-bottom: 10px;
}
.Treatments-Container li{
  margin: 14px 0;
  font-size: clamp(0.9rem, 1.7vw, 1.2rem);
  line-height: 1.45;
  letter-spacing: 0.002em;
}
li::marker{ font-size: 1em; }

/* layout */
.Video-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  padding: 32px 16px 56px;
  max-width: 1200px;
  margin: 0 auto;
}

/* card */
.video-card {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: var(--card-bg);
}
.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--card-bg); /* shows gray if video not loaded */
}

/* controls overlay */
.controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px 14px;
  color: var(--white);
  background: linear-gradient(transparent 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.35) 100%);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* progress (custom range) */
.progress {
  width: 100%;
  appearance: none;
  height: 2px;
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  outline: none;
}
.progress::-webkit-slider-runnable-track {
  height: 2px; background: rgba(255,255,255,.9); border-radius: 999px;
}
.progress::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); border: none; margin-top: -5px;
}
.progress::-moz-range-track {
  height: 2px; background: rgba(255,255,255,.9); border-radius: 999px;
}
.progress::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: none;
}
.progress::-moz-range-progress {
  background: rgba(255,255,255,.9); height: 2px; border-radius: 999px;
}

/* ================
   Responsive grid
   ================ */
@media (max-width: 1200px) {
  .Video-section {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns */
    gap: 48px;
  }
}

@media (max-width: 900px) {
  .Video-section {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns */
    gap: 32px;
    padding: 32px 20px 60px;
  }
}

@media (max-width: 600px) {
  .Video-section {
    grid-template-columns: 1fr; /* 1 column, full‑width cards */
    gap: 20px;
    padding: 24px 12px 40px;
  }

  .video-card {
    height: 320px; /* shorter cards on mobile */
  }

  .controls {
    padding: 8px 10px 10px; /* tighter controls on small screens */
  }
}

    /* buttons row */
    .buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin-top: 8px;
    }
    .control {
      color: var(--white);
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      padding: 4px;
      opacity: .95;
    }
    .control:hover { opacity: 1; transform: translateY(-1px); }
    .control:active { transform: translateY(0); }

    .play {
      width: 38px; height: 38px;
      border: 2px solid var(--white);
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      font-size: 18px;
    }

    /* prev/next icons via CSS content */
    .skip.back::before { content: "\23EE"; }    /* ⏮ */
    .skip.forward::before { content: "\23ED"; } /* ⏭ */


    /* ===== Footer ===== */
.site-footer {
  background: rgba(15, 23, 42, 0.6); /* 60% opacity */
  color: #e2e8f0;
  margin-top: 4rem;
}

.site-footer a {
  color: #cbd5e1;      /* slate-300 */
  text-decoration: none;
}
.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 2fr 1.5fr 1fr 1fr;
  padding: 3rem 0;
  width: 100%;

}


.site-footer .wrap {
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Brand block */
.footer-brand .footer-logo img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.footer-brand .brand-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  margin: 0.75rem 0 0;
}
.footer-sublead {
  margin: 0.75rem 0 1rem;
  color: #cbd5e1;
  max-width: 46ch;
  line-height: 1.5;
}
.footer-ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 0.55rem;
  border: 1px solid #334155; /* slate-600 */
  background: #111827;       /* gray-900 */
  color: #fff;
  font-weight: 600;
}
.btn--primary {
  background: #22c55e; /* green-500 */
  border-color: #22c55e;
  color: #081b0b;
}
.btn--primary:hover { filter: brightness(1.05); }
.btn--ghost:hover { background: #1f2937; }

/* Contact */
.footer-contact h4,
.footer-links h4,
.footer-social h4 {
  font-weight: 700;
  margin-bottom: 0.75rem;
  font-family: 'Inter', sans-serif;
  color: #f8fafc; /* slate-50 */
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.contact-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.5rem;
  align-items: start;
}
.contact-list .icon {
  color: #94a3b8; /* slate-400 */
  font-size: 18px;
  line-height: 1.25;
}

/* Resources */
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

/* Social */
.social-list {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
.social-list a {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: #1f2937;   /* gray-800 */
  border: 1px solid #334155;
  border-radius: 8px;
  color: #cbd5e1;
}
.social-list a:hover {
  color: #ffffff;
  border-color: #475569; /* slate-600+ */
}

/* Legal */
.footer-legal {
   border-top: 1px solid #1f2937;
  padding: 1rem 0 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  color: #94a3b8;
}
.footer-legal .legal-links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
@media (max-width: 560px) {
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Sticky Call + WhatsApp */
.sticky-contact {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

.sticky-contact .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(255,255,255,0.15);
}

.sticky-contact .cta-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

.sticky-contact .cta-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.6), 0 8px 20px rgba(0,0,0,0.25);
}

/* Colors */
.sticky-contact .cta-btn.call {
  background: #22c55e; /* Brand green */
}
.sticky-contact .cta-btn.whatsapp {
  background: #25D366; /* WhatsApp green */
}

/* Show text labels on larger screens */
.sticky-contact .label {
  display: none;
}
@media (min-width: 768px) {
  .sticky-contact .cta-btn {
    width: auto;
    padding: 0 14px;
  }
  .sticky-contact .label {
    display: inline;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sticky-contact .cta-btn {
    transition: none;
  }
}

/* Don’t show in print */
@media print {
  .sticky-contact { display: none !important; }
}
  /* Banner */
.banner{
  position:relative;
  width:min(1200px, 94vw);
  margin:0 auto;                    /* center the banner */
  aspect-ratio:16/9;                /* desktop: keep design ratio */
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg,#ff7a1a,#ff6a00);
  box-shadow:0 20px 60px rgba(0,0,0,.15);
  isolation:isolate;
}

/* Food collage at the top with a wavy bottom edge */
.banner::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:clamp(140px, 26%, 220px);
  background:url("/assets/meal.jpg") top/cover no-repeat;
  clip-path:polygon(
    0% 0%, 100% 0%, 100% 72%,
    86% 78%, 74% 72%, 62% 80%,
    48% 74%, 34% 81%, 18% 76%,
    0% 82%
  );
}

/* Grid for text + image */
.content{
  position:relative;
  height:100%;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:2rem;
  padding:clamp(18px, 2.6vw, 36px);
}

.banner h1{
  color:#ffffff;
  font-weight:800;
  font-size:clamp(26px, 4.6vw, 56px);
  line-height:1.12;
  margin:clamp(8px,1.2vw,12px) 0 .4em;
  text-shadow:0 10px 28px rgba(0,0,0,.35);
  letter-spacing:.3px;
}

.sub{
  color:#101010;
  font-weight:500;
  font-size:clamp(14px, 1.5vw, 20px);
  margin:.25rem 0 1rem;
}

.highlight{
  color:#0d0d0d;
  font-weight:700;
  font-size:clamp(18px, 2.6vw, 34px);
  margin:0 0 1.1rem;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:#0b0b0b;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:clamp(16px,1.7vw,28px);
  padding:clamp(12px,1.5vw,16px) clamp(18px,2.6vw,30px);
  border-radius:999px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 36px rgba(0,0,0,.38);
  background:#000;
}
.cta svg{flex:0 0 auto}

/* Doctor image */
.banner-doctor{
  position:absolute;
  right:clamp(14px, 2.4vw, 34px);
  bottom:0;
  height:min(92%, 620px);
  object-fit:contain;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.28));
  z-index:2;
  pointer-events:none;
  user-select:none;
}

/* Vertical label on the right */
.side-label{
  position:absolute;
  right:-240px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  font-weight:700;
  color:#000;
  font-size:clamp(14px, 1.7vw, 22px);
  letter-spacing:.3px;
  z-index:1;
}
.side-label span{
  display:inline-block;
  border-left:6px solid #000;
  padding-left:14px;
  background:rgba(255,255,255,.2);
  border-radius:6px;
}

/* Bottom contact strip */
.footer{
  position:absolute;
  left:clamp(18px, 2.6vw, 32px);
  right:clamp(18px, 2.6vw, 32px);
  bottom:clamp(12px, 2.2vw, 22px);
  display:flex;
  gap:clamp(12px, 2.8vw, 36px);
  flex-wrap:wrap;
  z-index:3;
  font-weight:600;
  color:#141414;
  font-size:clamp(12px, 1.3vw, 18px);
}
.footer .item{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:rgba(255,255,255,.38);
  padding:.4rem .8rem;
  border-radius:999px;
  backdrop-filter:blur(2px);
}

/* Text area (desktop) */
.left{
  min-width: 1000px;
  max-width:720px;
  padding-right:clamp(0px, 10vw, 180px);
}

/* =========================
   Responsive: tablet & down
   ========================= */
@media (max-width: 900px){
  .banner{
    width:100%;
    margin:0;
    border-radius:22px;
    left:0;                 /* override any horizontal offset */
  }

  .content{
    grid-template-columns:1fr;
    align-items:start;
  }

  .left{
    min-width:0;
    max-width:100%;
    padding-right:0;
  }

  .banner-doctor{
    height:46%;
    right:6px;
    opacity:.95;
  }

  .side-label{
    display:none;
  }
}

/* =========================
   Responsive: mobile
   ========================= */
@media (max-width: 600px){
  .banner{
    aspect-ratio:auto;      /* let height grow with content */
    border-radius:18px;
  }

  .banner::before{
    height:160px;           /* slightly shorter collage on mobile */
  }

  .content{
    padding:16px 14px 18px;
  }

  .left{
    text-align:center;      /* center all hero text on mobile */
  }

  .cta{
    width:100%;
    justify-content:center; /* full-width button, centered text */
  }

  /* Put doctor image below text instead of overlapping */
  .banner-doctor{
    position:static;
    display:block;
    margin:12px auto 4px;
    height:220px;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));
  }

  /* Footer becomes a normal block below content */
  .footer{
    position:static;
    margin:8px 14px 14px;
    padding:0;
    flex-direction:column;
    align-items:stretch;
  }

  .footer .item{
    width:100%;
    justify-content:flex-start;
  }
}

/* Right side vertical sticky call button */
.sticky-call-wrapper {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9999;
}

.sticky-call-wrapper a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;          /* adjust as needed */
  height: 380px;        /* adjust as needed */
  background-color: #27245a;
  color: #ffffff;
  border-radius: 45px 0 0 45px;
  text-decoration: none;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 18px 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.sticky-call-wrapper a:hover {
  background-color: #34306f;
  transform: translateX(-4px);
}

/* Vertical text */
.sticky-call-wrapper span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
}

.sticky-call-main {
  font-size: 18px;
}

.sticky-call-sub {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
}

/* Make vertical call bar mobile-friendly */
@media (max-width: 768px) {

  .sticky-call-wrapper {
    right: 6px;               /* pull fully onto screen */
    top: auto;
    bottom: 50%;              /* avoid keyboard + bottom icons */
    transform: translateY(50%);
    z-index: 999999;          /* force on top */
  }

  .sticky-call-wrapper a {
    width: 60px;              /* slimmer for phones */
    height: 260px;
    padding: 10px 4px;
    border-radius: 30px 0 0 30px;
  }

  .sticky-call-wrapper span {
    writing-mode: vertical-rl;
    font-size: 14px;
  }
}/* ========================= */
/*          FAQ CSS          */
/* ========================= */

.faq-section {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: var(--padX);
  padding-block: clamp(32px, 6vw, 64px);
}

.faq-title {
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  font-weight: 800;
  margin-bottom: clamp(20px, 4vw, 40px);
}

.faq-wrap {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

.faq-item {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.faq-item:active {
  transform: scale(0.995);
}

.faq-question {
  width: 100%;
  padding: clamp(16px, 4vw, 22px);
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(1rem, 3.8vw, 1.3rem);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  gap: 12px;
}

.faq-icon {
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 600;
  color: var(--accent);
  transition: transform .3s ease;
  flex-shrink: 0;
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding-inline: clamp(14px, 3vw, 20px);
  transition: max-height .35s ease, padding .35s ease;
}

.faq-item.open .faq-answer {
  max-height: 600px;
  padding-block: 10px 18px;
}

.faq-answer p {
  font-size: clamp(0.9rem, 3.5vw, var(--body-size));
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ========================= */
/*      Mobile Enhancements  */
/* ========================= */

@media (max-width: 768px) {
  .faq-section {
    padding-inline: 16px;
  }

  .faq-question {
    padding: 18px;
    font-size: clamp(1rem, 4.2vw, 1.25rem);
  }

  .faq-item {
    border-radius: calc(var(--card-radius) - 4px);
  }

  .faq-title {
    text-align: center;
    font-size: clamp(1.7rem, 7vw, 2.6rem);
  }
}

@media (max-width: 480px) {
  .faq-question {
    padding: 16px;
    font-size: clamp(1rem, 4.5vw, 1.2rem);
    line-height: 1.35;
  }

  .faq-answer p {
    font-size: clamp(0.9rem, 4vw, 1rem);
  }

  .faq-icon {
    font-size: clamp(1.3rem, 7vw, 1.8rem);
  }

  .faq-item {
    padding-inline: 0;
  }
}

@media (max-width: 360px) {
  .faq-question {
    padding: 14px;
    font-size: 1rem;
  }

  .faq-answer {
    padding-inline: 14px;
  }
}