/* =========================================================
   NEW LIFE CLINIC — stylesheet
   1. Tokens
   2. Reset & base
   3. Primitives
   4. Header & navigation
   5. Hero
   6. Doctor
   7. How it works
   8. About
   9. Footer & FAB
   10. Motion
   11. Responsive
   12. Legal pages
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --blue-50:#eff5ff;  --blue-100:#d9e6fb; --blue-600:#1d5fd6; --blue-700:#1749a8;
  --indigo-50:#eef2ff;--indigo-600:#4f46e5;
  --teal-50:#f0fdfa;  --teal-100:#ccfbf1; --teal-600:#0d9488;
  --cyan-50:#ecfeff;  --cyan-600:#0891b2;
  --green-50:#f0fdf4; --green-100:#dcfce7;--green-500:#22c55e;--green-600:#16a34a;
  --green-700:#15803d;
  --purple-50:#faf5ff;--purple-100:#f3e8ff;--purple-600:#9333ea;
  --amber-50:#fffbeb; --amber-100:#fef3c7;--amber-400:#facc15;--amber-500:#f59e0b;
  --amber-600:#d97706;--amber-700:#b45309;
  --rose-50:#fff1f2;  --rose-600:#e11d48;

  --white:#fff;
  --gray-50:#f7f9fc;  --gray-100:#eef2f8; --gray-200:#dfe6f0; --gray-300:#c3cfdf;
  --gray-400:#8c9bb1; --gray-500:#5f6f87; --gray-600:#44546e; --gray-700:#2e3f57;
  --gray-800:#1e293b; --gray-900:#0A2540;   /* deep clinical navy = brand ink */
  --ink-900:#071B33;
  --mint-50:#ecfdf5; --mint-100:#d1fae5; --mint-500:#10b981; --mint-600:#059669;

  --r-lg:.5rem; --r-xl:.75rem; --r-2xl:1rem; --r-3xl:1.5rem; --r-full:9999px;

  --sh-sm:0 1px 2px 0 rgb(10 37 64/.05);
  --sh-md:0 4px 12px -2px rgb(10 37 64/.07), 0 2px 5px -2px rgb(10 37 64/.05);
  --sh-lg:0 14px 30px -8px rgb(10 37 64/.1), 0 5px 12px -6px rgb(10 37 64/.06);
  --sh-xl:0 28px 50px -14px rgb(10 37 64/.14), 0 10px 20px -10px rgb(10 37 64/.08);
  --sh-2xl:0 40px 72px -20px rgb(10 37 64/.22);
  --sh-blue:0 14px 30px -10px rgb(37 99 235/.5);

  /* Poppins carries headings — geometric, confident, reads as medical-professional.
     Inter carries every piece of running text and UI, where legibility wins. */
  --font-head:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;

  --wrap:1200px;
  --gutter:1.25rem;
  --header-h:72px;

  --ease:cubic-bezier(.4,0,.2,1);
  --speed:.2s;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
     scroll-padding-top:calc(var(--header-h) + 16px)}

body{
  font-family:var(--font);
  font-size:16px;line-height:1.55;
  color:var(--gray-900);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,.brand,.footer__brand,.stat__value,.slot__time{
  font-family:var(--font-head);font-weight:700;line-height:1.2;letter-spacing:-.02em;
}
em{font-style:normal;font-weight:600;color:var(--gray-800)}
address{font-style:normal}

:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px;border-radius:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip-link{
  position:absolute;left:50%;top:-100px;transform:translateX(-50%);z-index:100;
  background:var(--blue-600);color:#fff;padding:.625rem 1.25rem;
  border-radius:0 0 var(--r-lg) var(--r-lg);font-weight:600;
  transition:top var(--speed) var(--ease);
}
.skip-link:focus{top:0}

/* ---------- 3. Primitives ---------- */
.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.section{padding-block:clamp(3.5rem,2.6rem + 3.4vw,5.5rem)}

.section__head{text-align:center;margin-bottom:3rem}
.section__tag{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  padding:.4375rem .875rem;border-radius:var(--r-full);
  background:var(--blue-50);border:1px solid var(--blue-100);
  color:var(--blue-700);font-size:.75rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.section__dot{width:.375rem;height:.375rem;border-radius:50%;background:var(--blue-600);
              box-shadow:0 0 0 3px rgb(37 99 235/.18)}
.section__head--wide{margin-bottom:3.5rem}
.section__title{font-size:clamp(1.75rem,1.35rem + 1.8vw,2.5rem);font-weight:800;
                letter-spacing:-.035em;color:var(--gray-900);margin-bottom:.75rem}
.section__sub{font-size:clamp(.9375rem,.9rem + .25vw,1.0625rem);color:var(--gray-600);font-weight:400}
.section__head--wide .section__sub{max-width:44rem;margin-inline:auto}
.subsection__title{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);font-weight:700;
                   color:var(--gray-900);text-align:center;margin-bottom:2rem}

.icon{display:inline-flex;align-items:center;justify-content:center;
      font-size:1.25rem;line-height:1;flex:none;color:currentColor}
.icon--sm{font-size:1rem}
.icon--lg{font-size:1.5rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.6875rem 1.5rem;border-radius:var(--r-xl);
  font-weight:700;font-size:.9375rem;white-space:nowrap;letter-spacing:-.01em;
  transition:background-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease),
             transform var(--speed) var(--ease);
}
.btn--pill{border-radius:var(--r-full)}
.btn--block{width:100%}
.btn--lg{padding:.9375rem 2rem;font-size:1rem}
.btn--raised{box-shadow:var(--sh-blue)}
.btn--raised:hover{box-shadow:0 18px 36px -10px rgb(37 99 235/.6);transform:translateY(-1px)}
.btn:active{transform:scale(.98)}

.btn--primary{background:linear-gradient(135deg,#3B82F6,#2563EB 55%,#1D4ED8);color:#fff}
.btn--primary:hover{background:linear-gradient(135deg,#2563EB,#1D4ED8 55%,#1E40AF)}
.btn--whatsapp{background:linear-gradient(135deg,#22C55E,#16A34A 60%,#15803D);color:#fff;
               padding:.9375rem 1.5rem;box-shadow:0 12px 26px -10px rgb(22 163 74/.55)}
.btn--whatsapp:hover{background:linear-gradient(135deg,#16A34A,#15803D);
                     box-shadow:0 16px 32px -10px rgb(22 163 74/.6);transform:translateY(-1px)}
.btn--whatsapp .icon{font-size:1.15rem}

/* Chips & status */
.chip{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.25rem .625rem;border-radius:var(--r-full);
  font-size:.75rem;font-weight:700;letter-spacing:-.005em;
  background:var(--gray-100);color:var(--gray-600);
}
.chip.is-open{background:var(--green-50);color:var(--green-700)}
.chip.is-closed{background:var(--amber-50);color:var(--amber-700)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:var(--r-full);
  background:rgb(255 255 255/.85);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgb(37 99 235/.18);
  color:var(--blue-700);font-size:.8125rem;font-weight:700;
  box-shadow:0 6px 18px -8px rgb(10 37 64/.2);
}

/* Cards */
.card{background:var(--white);border-radius:var(--r-2xl)}
.card--lg{
  position:relative;padding:2rem;border:1px solid rgb(10 37 64/.07);
  box-shadow:var(--sh-md);overflow:hidden;
  transition:box-shadow var(--speed) var(--ease),transform var(--speed) var(--ease);
}
.card--lg::after{
  content:"";position:absolute;right:-3rem;top:-3rem;width:11rem;height:11rem;
  border-radius:50%;background:radial-gradient(circle,rgb(37 99 235/.08),transparent 68%);
  pointer-events:none;
}
.card--lg:hover{box-shadow:var(--sh-xl);transform:translateY(-3px)}
.card--sm{
  padding:1.75rem 1.5rem;border-radius:var(--r-2xl);
  border:1px solid rgb(10 37 64/.07);box-shadow:var(--sh-sm);
  transition:box-shadow var(--speed) var(--ease),
             transform var(--speed) var(--ease),
             border-color var(--speed) var(--ease);
}
.card--sm:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);border-color:rgb(37 99 235/.24)}

.card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:var(--r-xl);margin-bottom:.875rem;
}
.card__icon--sm{width:2.5rem;height:2.5rem;border-radius:var(--r-lg)}
.card__icon--blue{background:linear-gradient(140deg,#DBEAFE,#BFDBFE);color:var(--blue-700)}
.card__icon--teal{background:linear-gradient(140deg,#CCFBF1,#99F6E4);color:var(--teal-600)}
.card__icon--blue-soft{background:linear-gradient(140deg,#EFF6FF,#DBEAFE);color:var(--blue-600)}
.card__icon--teal-soft{background:linear-gradient(140deg,#F0FDFA,#CCFBF1);color:var(--teal-600)}
.card__icon--green-soft{background:linear-gradient(140deg,#ECFDF5,#D1FAE5);color:var(--mint-600)}
.card__icon--purple-soft{background:linear-gradient(140deg,#FAF5FF,#F3E8FF);color:var(--purple-600)}
.card__icon--amber-soft{background:linear-gradient(140deg,#FFFBEB,#FEF3C7);color:var(--amber-600)}
.card__icon--rose-soft{background:linear-gradient(140deg,#FFF1F2,#FFE4E6);color:var(--rose-600)}

.card__title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}
.card__text{color:var(--gray-500);font-size:.9375rem;line-height:1.6}
.card__heading{font-size:1.0625rem;font-weight:600;margin-bottom:.4375rem;color:var(--gray-900)}
.card__note{font-size:.875rem;color:var(--gray-500);line-height:1.6}

/* ---------- 4. Header & navigation ---------- */
.header{
  position:sticky;top:0;z-index:40;
  background:rgb(255 255 255/.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgb(10 37 64/.07);
  transition:box-shadow var(--speed) var(--ease),background-color var(--speed) var(--ease);
}
.header.is-stuck{box-shadow:0 6px 20px -8px rgb(10 37 64/.14);background:rgb(255 255 255/.94)}
.header__inner{display:flex;align-items:center;justify-content:space-between;
               gap:1rem;padding-block:.875rem}

.brand{display:inline-flex;align-items:center;gap:.55rem;font-size:1.375rem;font-weight:800;letter-spacing:-.04em;color:var(--gray-900);white-space:nowrap}
.brand__accent{
  background:linear-gradient(135deg,#2563EB,#0D9488);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.nav{display:none;align-items:center;gap:1.75rem}
.nav__list{display:flex;align-items:center;gap:1.625rem}
.nav__link{position:relative;font-weight:600;font-size:.9375rem;color:var(--gray-500);
           padding-block:.25rem;transition:color var(--speed) var(--ease)}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--blue-600);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--speed) var(--ease);
}
.nav__link:hover{color:var(--gray-900)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--gray-900)}
.nav .btn{padding:.625rem 1.5rem;box-shadow:0 8px 18px -8px rgb(37 99 235/.55)}
.nav .btn:hover{box-shadow:0 12px 24px -8px rgb(37 99 235/.6);transform:translateY(-1px)}

.nav-toggle{display:grid;place-items:center;color:var(--gray-600);padding:.25rem}
.nav-toggle .icon{font-size:1.5rem}
.nav-toggle__close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__close{display:block}

.mobile-nav[hidden]{display:none}
.mobile-nav{
  border-top:1px solid var(--gray-100);padding:.75rem var(--gutter) 1.125rem;
  display:grid;gap:.125rem;animation:slide-down .22s var(--ease) both;
}
.mobile-nav__link{display:block;padding:.6875rem .25rem;font-weight:600;
                  color:var(--gray-700);border-radius:var(--r-lg);
                  transition:background-color var(--speed) var(--ease)}
.mobile-nav__link:hover{background:var(--gray-50)}
.mobile-nav .btn{margin-top:.5rem}

/* ---------- 5. Hero ----------
   Copy on the left with its own 2×2 feature grid, consultation image right. */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% 8%, rgb(37 99 235/.09), transparent 62%),
    radial-gradient(760px 420px at 6% 86%, rgb(16 185 129/.055), transparent 60%),
    linear-gradient(175deg,#F2F7FF 0%,#F8FBFF 48%,var(--white) 100%);
  padding-block:3rem 3.5rem;
}
/* faint dot grid gives the flat background some texture */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgb(10 37 64/.04) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(70% 58% at 22% 30%, #000 18%, transparent 72%);
  mask-image:radial-gradient(70% 58% at 22% 30%, #000 18%, transparent 72%);
}
.hero>*{position:relative;z-index:1}
.hero__orb{position:absolute;border-radius:50%;filter:blur(78px);pointer-events:none;z-index:0}
.hero__orb--a{width:24rem;height:24rem;right:-7rem;top:-9rem;background:rgb(37 99 235/.11)}
.hero__orb--b{width:20rem;height:20rem;left:-10rem;bottom:-12rem;background:rgb(16 185 129/.05)}
.hero__grid{display:grid;gap:2rem;align-items:center}
.hero__copy{display:grid;gap:1.125rem;justify-items:start;text-align:left}
.hero__title{font-size:clamp(2.125rem,1.4rem + 3.6vw,3.5rem);font-weight:800;
             line-height:1.06;letter-spacing:-.04em;color:var(--gray-900)}
.hero__lede{font-size:clamp(1.0625rem,1rem + .4vw,1.1875rem);color:var(--gray-600);
            max-width:32rem;line-height:1.65}

.hero__media{width:100%;max-width:25rem;margin-inline:auto}

/* Editorial portrait: the photograph sits on an offset accent block with a
   thin outline behind it, and a caption plate anchored across the bottom. */
.portrait{position:relative;isolation:isolate}
.portrait picture,.portrait img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:var(--r-3xl);
  box-shadow:0 34px 60px -24px rgb(10 37 64/.42), 0 0 0 1px rgb(255 255 255/.7);
}
.portrait::before{
  content:"";position:absolute;inset:auto -1.5rem -1.5rem 3.5rem;
  height:58%;border-radius:var(--r-3xl);z-index:-1;
  background:linear-gradient(140deg,var(--blue-600),#0F8B8D);
  opacity:.11;
}
.portrait__frame{
  position:absolute;inset:2rem -1.75rem -1.75rem 2rem;
  border:1.5px solid rgb(29 95 214/.22);border-radius:var(--r-3xl);z-index:-1;
}
.portrait__caption{
  position:absolute;left:1rem;right:1rem;bottom:1rem;
  display:flex;align-items:center;gap:.75rem;
  padding:.875rem 1rem;border-radius:var(--r-xl);
  background:rgb(255 255 255/.93);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 14px 30px -12px rgb(10 37 64/.3);
}
.portrait__status{
  width:.625rem;height:.625rem;flex:none;border-radius:50%;background:var(--gray-400);
}
.portrait__status.is-open{background:var(--mint-500);box-shadow:0 0 0 4px rgb(16 185 129/.18)}
.portrait__status.is-closed{background:var(--amber-400);box-shadow:0 0 0 4px rgb(250 204 21/.18)}
.portrait__meta{display:grid;gap:.0625rem;min-width:0}
.portrait__meta strong{font-size:.9375rem;font-weight:700;color:var(--gray-900);letter-spacing:-.015em}
.portrait__meta span{font-size:.75rem;color:var(--gray-500)}
.hero__media picture,.hero__media img{display:block;width:100%}

.pillars{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem 1.5rem;margin-top:.75rem;width:100%;
  padding-top:1.5rem;border-top:1px solid rgb(10 37 64/.09);
}
.pillar{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.75rem .25rem;
  transition:transform var(--speed) var(--ease);
}
.pillar:hover{transform:translateY(-2px)}
.pillar__icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;flex:none;
              border-radius:var(--r-lg);transition:transform var(--speed) var(--ease)}

.pillar__icon--blue{background:linear-gradient(140deg,#DBEAFE,#BFDBFE);color:var(--blue-700)}
.pillar__icon--teal{background:linear-gradient(140deg,#CCFBF1,#A7F3D0);color:var(--teal-600)}
.pillar__icon--green{background:linear-gradient(140deg,#D1FAE5,#A7F3D0);color:var(--mint-600)}
.pillar__icon--purple{background:linear-gradient(140deg,#F3E8FF,#E9D5FF);color:var(--purple-600)}
.pillar__title{font-size:.9375rem;font-weight:700;letter-spacing:-.01em}
.pillar__text{font-size:.8125rem;color:var(--gray-500);line-height:1.45}

/* ---------- 6. Doctor ----------
   Centred, symmetric card. Reading order runs straight down the middle:
   portrait → name → credential → specialty → rating → facts → hours → action. */
.doctors{background:var(--white)}

.doctor{
  position:relative;overflow:hidden;
  max-width:30rem;margin-inline:auto;text-align:center;
  display:grid;gap:1.5rem;padding:2.5rem 1.75rem 1.75rem;
  background:var(--white);border:1px solid rgb(10 37 64/.07);
  border-radius:var(--r-3xl);box-shadow:var(--sh-xl);
  transition:box-shadow .28s var(--ease),transform .28s var(--ease);
}
/* soft brand wash behind the portrait */
.doctor::before{
  content:"";position:absolute;left:50%;top:-7rem;translate:-50% 0;
  width:20rem;height:14rem;pointer-events:none;
  background:radial-gradient(circle,rgb(37 99 235/.13),transparent 66%);
}
.doctor>*{position:relative}
.doctor:hover{box-shadow:var(--sh-2xl);transform:translateY(-4px)}

.doctor__head{display:grid;justify-items:center}

.doctor__photo{position:relative;margin-bottom:1.125rem}
.doctor__photo img{
  width:7.5rem;height:7.5rem;border-radius:var(--r-full);object-fit:cover;
  border:5px solid var(--white);background:var(--gray-100);
  box-shadow:0 0 0 2px rgb(37 99 235/.28), 0 16px 30px -12px rgb(10 37 64/.35);
}
.doctor__status{
  position:absolute;right:.25rem;bottom:.25rem;width:1.125rem;height:1.125rem;
  border:3px solid var(--white);border-radius:var(--r-full);background:var(--gray-400);
}
.doctor__status.is-open{background:var(--green-500)}
.doctor__status.is-closed{background:var(--amber-400)}
.doctor__status.is-open::after{
  content:"";position:absolute;inset:-3px;border-radius:var(--r-full);
  border:2px solid var(--green-500);opacity:0;
  animation:pulse-ring 2.4s var(--ease) infinite;
}

.doctor__name{font-size:1.5rem;font-weight:800;letter-spacing:-.035em}
.doctor__degree{
  margin-top:.375rem;font-size:.6875rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400);
}
.doctor__specialty{
  margin-top:.6875rem;display:inline-block;
  padding:.375rem 1rem;border-radius:var(--r-full);
  background:linear-gradient(135deg,#EFF6FF,#DBEAFE);
  border:1px solid rgb(37 99 235/.18);color:var(--blue-700);
  font-size:.875rem;font-weight:700;
}

.rating{display:flex;align-items:center;justify-content:center;gap:.125rem;margin-top:.875rem}
.star{color:var(--gray-300);font-size:.9375rem}
.star--on{color:var(--amber-400)}
.rating__value{margin-left:.4375rem;font-size:.8125rem;font-weight:600;color:var(--gray-500)}

.doctor__tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
  padding-block:1.5rem;border-block:1px solid var(--gray-100);
}
.doctor__tags li{
  display:inline-flex;align-items:center;gap:.4375rem;
  padding:.4375rem .75rem;border-radius:var(--r-full);
  background:var(--gray-50);border:1px solid var(--gray-200);
  font-size:.8125rem;font-weight:500;color:var(--gray-700);
}
.doctor__tags .icon{color:var(--gray-400)}

.slot{
  background:linear-gradient(150deg,#F5F9FF,#EAF2FE);
  border:1px solid rgb(37 99 235/.16);
  border-radius:var(--r-2xl);padding:1.375rem;text-align:center;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9);
}
.slot__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
           gap:.5rem;margin-bottom:.75rem}
.slot__row .chip{margin-top:0}
.slot__icon{
  display:grid;place-items:center;flex:none;width:1.625rem;height:1.625rem;
  border-radius:var(--r-lg);background:var(--blue-100);color:var(--blue-700);
}
.slot__label{
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray-500);
}
.slot__time{
  font-size:1.75rem;font-weight:800;line-height:1.15;
  letter-spacing:-.035em;color:var(--blue-700);
}
.slot__time span{opacity:.45;padding-inline:.25rem}
.slot__days{margin-top:.375rem;font-size:.8125rem;font-weight:500;color:var(--gray-600)}
.slot__note{
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--blue-100);
  font-size:.75rem;line-height:1.55;color:var(--gray-500);
}
.chip{margin-top:.875rem}

.doctor__foot{font-size:.75rem;color:var(--gray-400);margin-top:-1rem}

/* ---------- 7. How it works ---------- */
.flow{
  position:relative;
  background:
    radial-gradient(760px 360px at 88% 6%, rgb(37 99 235/.06), transparent 60%),
    radial-gradient(620px 320px at 6% 96%, rgb(16 185 129/.06), transparent 60%),
    var(--gray-50);
  border-block:1px solid rgb(10 37 64/.06);
}
.flow__grid{display:grid;gap:1.25rem}
.flow__step{
  position:relative;background:var(--white);border:1px solid rgb(10 37 64/.07);
  border-radius:var(--r-2xl);padding:1.75rem 1.5rem;box-shadow:var(--sh-sm);
  transition:box-shadow var(--speed) var(--ease),
             transform var(--speed) var(--ease),
             border-color var(--speed) var(--ease);
}
.flow__step:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);border-color:rgb(37 99 235/.24)}
.flow__icon{display:grid;place-items:center;width:3rem;height:3rem;
            border-radius:var(--r-xl);margin-bottom:1rem;
            box-shadow:inset 0 0 0 1px rgb(255 255 255/.7)}
.flow__icon--blue{background:linear-gradient(140deg,#EFF6FF,#DBEAFE);color:var(--blue-600)}
.flow__icon--indigo{background:linear-gradient(140deg,#EEF2FF,#E0E7FF);color:var(--indigo-600)}
.flow__icon--teal{background:linear-gradient(140deg,#F0FDFA,#CCFBF1);color:var(--teal-600)}
.flow__icon--cyan{background:linear-gradient(140deg,#ECFEFF,#CFFAFE);color:var(--cyan-600)}
.flow__icon--amber{background:linear-gradient(140deg,#FFFBEB,#FEF3C7);color:var(--amber-600)}
.flow__icon--green{background:linear-gradient(140deg,#ECFDF5,#D1FAE5);color:var(--mint-600)}
.flow__num{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
           text-transform:uppercase;color:var(--blue-600);margin-bottom:.3125rem}

.flow__footnote{
  display:flex;align-items:flex-start;gap:.75rem;
  max-width:42rem;margin:2.5rem auto 0;padding:1.0625rem 1.375rem;
  background:var(--white);border:1px solid rgb(37 99 235/.16);
  border-radius:var(--r-2xl);box-shadow:var(--sh-sm);
  font-size:.8125rem;color:var(--gray-600);line-height:1.6;
}
.flow__footnote .icon{color:var(--blue-600);flex:none;margin-top:.125rem}

/* ---------- 8. About ---------- */
.about{
  background:
    radial-gradient(680px 340px at 92% 4%, rgb(16 185 129/.05), transparent 60%),
    radial-gradient(620px 320px at 4% 70%, rgb(37 99 235/.05), transparent 60%),
    var(--white);
}
.purpose{display:grid;gap:1.5rem;margin-bottom:3.5rem}
.benefits{margin-bottom:.5rem}
.benefits__grid{display:grid;gap:1.25rem}

.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;
  margin-top:3.5rem;padding:2.25rem 1.5rem;text-align:center;
  background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-2xl);
}
.stat__value{display:block;font-size:clamp(1.5rem,1.25rem + 1.2vw,2.125rem);
             font-weight:700;letter-spacing:-.03em;margin-bottom:.25rem}
.stat__value--blue{color:var(--blue-600)}
.stat__value--teal{color:var(--teal-600)}
.stat__value--amber{color:var(--amber-600)}
.stat__value--purple{color:var(--purple-600)}
.stat__label{font-size:.8125rem;color:var(--gray-500);font-weight:500}

/* ---------- 8b. Trust band ----------
   One dark moment between the light content and the footer. */
.band{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--ink-900) 0%,#0C2E52 52%,#0A2540 100%);
  padding-block:3.25rem;
}
.band__orb{
  position:absolute;width:34rem;height:34rem;right:-10rem;top:-16rem;border-radius:50%;
  background:radial-gradient(circle,rgb(16 185 129/.22),transparent 66%);
  filter:blur(30px);pointer-events:none;
}
.band .container{position:relative}
.band .stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem;
  margin:0;padding:0;background:none;border:0;text-align:center;
}
.band .stat__value{
  display:block;font-family:var(--font-head);
  font-size:clamp(1.75rem,1.35rem + 1.6vw,2.5rem);font-weight:800;
  letter-spacing:-.035em;margin-bottom:.375rem;color:#fff;
}
.band .stat__label{font-size:.8125rem;font-weight:500;color:rgb(203 225 255/.72)}

/* ---------- 9. Footer & FAB ---------- */
.footer{
  position:relative;color:#fff;padding-block:3rem 1.75rem;
  background:linear-gradient(180deg,#081E36,#061627);
}
.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgb(96 165 250/.5),transparent);
}
.footer__grid{display:grid;gap:1.75rem;margin-bottom:1.75rem}
.footer__brand{font-size:1.25rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.5rem;color:#fff}
.footer__brand .brand__accent{color:#60a5fa}
.footer__blurb{font-size:.875rem;color:var(--gray-400)}
.footer__hours{display:inline-flex;align-items:center;gap:.5rem;margin-top:.625rem;
               font-size:.8125rem;font-weight:600;color:#fff}
.footer__title{font-size:.875rem;font-weight:700;margin-bottom:.75rem;letter-spacing:-.01em}
.footer__list{display:grid;gap:.5rem;font-size:.875rem;color:var(--gray-400)}
.footer__list a,.footer__list address{display:inline-flex;align-items:flex-start;gap:.5rem;
                                      transition:color var(--speed) var(--ease)}
.footer__list a:hover{color:#fff}
.footer__list .icon{margin-top:.1875rem}

.footer__legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.375rem 1.5rem;border-top:1px solid rgb(255 255 255/.1);padding-top:1.25rem;
  text-align:center;font-size:.8125rem;color:var(--gray-400);
}
.footer__legal>p{margin-inline:auto}
.footer__credit a{color:#fff;font-weight:700;transition:color var(--speed) var(--ease)}
.footer__credit a:hover{color:#60a5fa}

.fab{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:50;
  display:grid;place-items:center;width:3.375rem;height:3.375rem;
  background:linear-gradient(135deg,#25D366,#16A34A);color:#fff;border-radius:var(--r-full);
  box-shadow:0 12px 28px -8px rgb(22 163 74/.65), 0 0 0 6px rgb(34 197 94/.14);
  transition:background-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease),
             transform var(--speed) var(--ease);
}
.fab .icon{font-size:1.5rem}
.fab:hover{transform:scale(1.07);box-shadow:0 16px 34px -8px rgb(22 163 74/.7), 0 0 0 9px rgb(34 197 94/.16)}
.fab__tip{
  position:absolute;right:calc(100% + .625rem);top:50%;translate:0 -50%;
  background:var(--gray-900);color:#fff;padding:.4375rem .6875rem;
  border-radius:var(--r-lg);font-size:.8125rem;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--speed) var(--ease);
}
.fab:hover .fab__tip,.fab:focus-visible .fab__tip{opacity:1}

/* ---------- 10. Motion ---------- */
@keyframes slide-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes pulse-ring{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.9)}}

.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-visible{opacity:1;transform:none;
                   transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}
.reveal:nth-child(6){transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- 11. Responsive ---------- */
@media (min-width:600px){
  .flow__grid,.benefits__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats,.band .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:768px){
  .container{padding-inline:1.75rem}
  .nav{display:flex}
  .nav-toggle,.mobile-nav{display:none!important}
  .purpose{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doctor{padding:1.75rem}
  .hero{padding-block:3rem 3.5rem}
}

@media (min-width:1024px){
  .container{padding-inline:2rem}
  .hero{padding-block:4rem 4.5rem}
  .hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:4rem;align-items:center}
  .hero__media{max-width:25rem;margin-inline:auto;margin-right:1.5rem}
  .hero__copy{gap:1.25rem}
  .flow__grid,.benefits__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.3fr}
}

@media (max-width:599px){
  .hero__grid{gap:1.75rem}
  .pillars{gap:.75rem 1rem}
}

@media (max-width:480px){
  /* stack the hours label and the live chip rather than letting both wrap */
  .slot__row{flex-direction:column;gap:.5rem}
  .slot__label{display:flex;align-items:center;gap:.4375rem}
}

@media (max-width:400px){
  .pillars{grid-template-columns:1fr}
  .brand{font-size:1.1875rem}
  .fab{right:1rem;bottom:1rem}
}

@media (max-height:480px) and (orientation:landscape){
  .header{position:static}
}

/* ---------- 12. Legal pages ---------- */
.page-hero{background:linear-gradient(to bottom,var(--blue-50),var(--white));
           padding-block:2.5rem 2rem;text-align:center}
.page-hero__title{font-size:clamp(1.625rem,1.3rem + 1.5vw,2.125rem)}
.page-hero__meta{margin-top:.5rem;font-size:.8125rem;color:var(--gray-500)}

.legal{padding-block:2.5rem 3.5rem}
.prose{max-width:44rem;margin-inline:auto}
.prose h2{font-size:1.125rem;margin-top:2rem;margin-bottom:.625rem;
          scroll-margin-top:calc(var(--header-h) + 16px)}
.prose h2:first-of-type{margin-top:0}
.prose p,.prose li{color:var(--gray-600);font-size:.9375rem;line-height:1.7}
.prose p+p{margin-top:.75rem}
.prose ul{list-style:disc;padding-left:1.25rem;display:grid;gap:.4375rem;margin-top:.625rem}
.prose a{color:var(--blue-600);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--blue-700)}
.prose strong{color:var(--gray-800);font-weight:700}

.toc{background:var(--gray-50);border:1px solid var(--gray-200);
     border-radius:var(--r-xl);padding:1.125rem 1.25rem;margin-bottom:2rem}
.toc__title{font-size:.6875rem;font-weight:700;letter-spacing:.08em;
            text-transform:uppercase;color:var(--gray-500);margin-bottom:.625rem}
.toc__list{display:grid;gap:.3125rem;font-size:.875rem}
.toc__list a{color:var(--gray-700)}
.toc__list a:hover{color:var(--blue-700);text-decoration:underline}

/* ---------- 13. Brand mark (heartbeat logo) ---------- */
.brand__mark{display:grid;place-items:center;width:2rem;height:2rem;flex:none;
  border-radius:.625rem;color:#fff;font-size:.95rem;
  background:linear-gradient(135deg,#2563EB,#0D9488);
  box-shadow:0 6px 14px -6px rgb(37 99 235/.55)}
.brand__mark--sm{width:1.75rem;height:1.75rem;font-size:.85rem;border-radius:.55rem}
.footer__brand{display:inline-flex;align-items:center;gap:.5rem}
@keyframes heartbeat{0%,55%,100%{transform:scale(1)}18%{transform:scale(1.18)}32%{transform:scale(1)}}
.brand__mark i{animation:heartbeat 2s ease-in-out infinite;transform-origin:center}
@media (prefers-reduced-motion:reduce){.brand__mark i{animation:none}}

/* ---------- 14. Consultation fee badge ---------- */
.fee{display:flex;align-items:center;gap:.875rem;margin-top:1rem;
  padding:.9375rem 1.125rem;border-radius:var(--r-xl);
  border:1px solid rgb(37 99 235/.16);
  background:linear-gradient(135deg,#EFF6FF,#F0FDFA)}
.fee__icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;
  border-radius:var(--r-lg);color:#fff;font-size:1.05rem;
  background:linear-gradient(135deg,#2563EB,#0D9488)}
.fee__body{display:flex;flex-direction:column;line-height:1.3;margin-right:auto}
.fee__label{font-weight:700;color:var(--gray-900);font-size:.95rem}
.fee__note{font-size:.78rem;color:var(--gray-500)}
.fee__amount{font-family:var(--font-head);font-weight:800;font-size:1.5rem;
  color:var(--blue-700);letter-spacing:-.02em}

/* ---------- 15. Visit us / location ---------- */
.location__grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:860px){
  .location__grid{grid-template-columns:1fr 1.1fr;align-items:stretch}
}
.location__info{background:var(--white);border:1px solid rgb(10 37 64/.07);
  border-radius:var(--r-2xl);box-shadow:var(--sh-sm);
  padding:1.75rem 1.5rem;display:flex;flex-direction:column}
.location__list{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem}
.location__list li{display:flex;gap:.875rem;align-items:flex-start}
.location__icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;
  border-radius:var(--r-lg);font-size:1.05rem}
.location__icon--blue{background:linear-gradient(140deg,#DBEAFE,#BFDBFE);color:var(--blue-700)}
.location__icon--green{background:linear-gradient(140deg,#D1FAE5,#A7F3D0);color:var(--mint-600)}
.location__icon--purple{background:linear-gradient(140deg,#F3E8FF,#E9D5FF);color:var(--purple-600)}
.location__icon--teal{background:linear-gradient(140deg,#CCFBF1,#A7F3D0);color:var(--teal-600)}
.location__label{font-size:.8125rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--gray-500);margin-bottom:.15rem}
.location__text{font-size:.95rem;color:var(--gray-800);font-style:normal;line-height:1.5}
.location__text a{color:var(--blue-700);font-weight:600}
.location__info .btn{margin-top:auto}
.location__map{min-height:340px;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid rgb(10 37 64/.07);box-shadow:var(--sh-sm)}
.location__map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* ---------- 16. Real clinic photo ---------- */
.clinic-photo{position:relative;margin:0 auto 2.5rem;max-width:920px;
  border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-lg);
  border:1px solid rgb(10 37 64/.07)}
.clinic-photo img{width:100%;height:auto;display:block}
.clinic-photo figcaption{position:absolute;left:1rem;bottom:1rem;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .75rem;border-radius:var(--r-full);
  font-size:.8125rem;font-weight:700;color:#fff;
  background:rgb(10 37 64/.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.clinic-photo figcaption .fa-solid{font-size:.85rem}