/* Ricci Clinics — self-hosted fonts. No external CDN. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url('../assets/fonts/jost-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/playfair-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/playfair-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/elmessiri-arabic-600.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/elmessiri-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/elmessiri-arabic-700.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/elmessiri-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/tajawal-arabic-400.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/tajawal-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/tajawal-arabic-500.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/tajawal-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/tajawal-arabic-700.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/tajawal-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   Ricci Clinics — Design System  (pure CSS, compat-safe)
   No :has(), no container queries. WebP+JPG, JS-optional.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --gold-900:#5F4A1F;
  --gold-800:#725822;
  --gold-700:#8A6A2E;
  --gold:#B0894A;
  --gold-500:#BB9553;
  --gold-400:#CBAD73;
  --gold-300:#DDC79A;
  --gold-200:#E9D8B6;
  --gold-100:#F3E9D4;
  --champagne:#EFE2C6;

  --cream:#FBF6EC;
  --cream-2:#F6EEDF;
  --cream-3:#F1E7D5;
  --white:#FFFFFF;

  --ink:#2C2620;
  --ink-2:#5C5347;
  --ink-3:#87796A;

  --pink:#F0DAD6;
  --pink-2:#E7C6C4;
  --rose:#C88B92;

  --wa:#1FA855;
  --wa-ink:#0F7C3C;

  --line:#EADBBE;
  --line-soft:#EFE7D6;

  --sh-xs:0 1px 3px rgba(74,58,26,.06);
  --sh-sm:0 4px 14px rgba(74,58,26,.07);
  --sh:0 12px 34px rgba(74,58,26,.10);
  --sh-lg:0 26px 64px rgba(74,58,26,.14);
  --sh-gold:0 14px 34px rgba(176,137,74,.28);

  --r-sm:12px;
  --r:18px;
  --r-lg:28px;
  --r-xl:40px;
  --r-pill:999px;

  --ff-head:'Playfair Display','El Messiri',Georgia,'Times New Roman',serif;
  --ff-body:'Jost','Tajawal',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --ff-ar-head:'El Messiri','Playfair Display',Georgia,serif;

  --wrap:1200px;
  --gap:clamp(16px,4vw,28px);
  --sec-y:clamp(56px,9vw,110px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Arabic gets El Messiri-first headings for authentic feel */
:root[lang="ar"]{ --ff-head:'El Messiri','Playfair Display',Georgia,serif; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-head);font-weight:700;line-height:1.18;margin:0;color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:clamp(18px,5vw,40px)}
.section{padding-block:var(--sec-y);position:relative}
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.18em;flex:none}
.txt-gold{color:var(--gold-700)}
/* Per-paragraph base direction so mixed AR/EN text (reviews, descriptions,
   phone numbers) never shows flipped punctuation. */
.review__text,.svc-card__desc,.svc-card__name,.section__sub,.hero__lead,
.footer__mission,.branch__addr,.svc-group__tag{unicode-bidi:plaintext}

.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;inset-block-start:-60px;inset-inline-start:14px;z-index:200;
  background:var(--gold);color:#fff;padding:10px 18px;border-radius:var(--r-pill);
  transition:inset-block-start .2s}
.skip-link:focus{inset-block-start:12px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--ff-body);font-weight:600;font-size:16px;line-height:1;
  padding:14px 24px;border:1.5px solid transparent;border-radius:var(--r-pill);
  min-height:48px;text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s,border-color .22s,color .22s;
  will-change:transform;
}
.btn .ic{width:1.2em;height:1.2em}
.btn--lg{padding:17px 32px;font-size:17px;min-height:56px}
.btn--sm{padding:10px 16px;font-size:14px;min-height:44px}
.btn--gold{background:linear-gradient(135deg,var(--gold-500),var(--gold) 55%,var(--gold-700));color:#fff;box-shadow:var(--sh-gold)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(176,137,74,.36)}
.btn--gold:active{transform:translateY(0)}
.btn--outline-gold{background:transparent;border-color:var(--gold);color:var(--gold-800)}
.btn--outline-gold:hover{background:var(--gold);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:var(--white);border-color:var(--line);color:var(--ink);box-shadow:var(--sh-xs)}
.btn--ghost:hover{border-color:var(--gold-300);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.btn--wa{background:var(--white);border-color:var(--gold-200);color:var(--ink)}
.btn--wa .ic{color:var(--wa)}
.btn--wa:hover{background:var(--gold-100);border-color:var(--gold-300)}

/* ---------- Eyebrow / section heads ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--ff-body);font-weight:600;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-700);
}
.eyebrow::before,.eyebrow::after{content:"";width:22px;height:1.5px;background:var(--gold-300)}
.section__head{text-align:center;max-width:760px;margin:0 auto clamp(34px,5vw,56px)}
.section__title{
  font-size:30px;font-size:clamp(28px,4.4vw,46px);margin-top:16px;letter-spacing:-.01em;
}
.section__sub{margin-top:16px;color:var(--ink-2);font-size:17px;font-size:clamp(16px,2vw,18px)}

/* ---------- Reveal (only hidden when JS on) ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important;transform:none !important;transition:none}
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
/* NOTE: no backdrop-filter here on purpose — it would create a containing
   block that traps the position:fixed mobile drawer inside the header,
   and it is unreliable on older WebKit. Solid translucent bg instead. */
.site-header{position:sticky;top:0;z-index:100;
  background:rgba(251,246,236,.94);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s,background-color .3s}
.site-header.is-scrolled{box-shadow:var(--sh-sm);background:rgba(251,246,236,.98)}
.header__inner{display:flex;align-items:center;gap:16px;min-height:74px}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand__logo{width:auto;height:44px}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:26px}
.nav__list{display:flex;align-items:center;gap:6px}
.nav__link{position:relative;padding:10px 12px;font-weight:500;color:var(--ink);border-radius:10px;font-size:15.5px}
.nav__link::after{content:"";position:absolute;inset-inline:12px;bottom:5px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .25s var(--ease)}
.nav__link:hover{color:var(--gold-800)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__close{display:none}
.nav__cta{margin-inline-start:8px}
.header__actions{display:flex;align-items:center;gap:10px}
.lang-toggle{display:inline-flex;align-items:center;gap:6px;background:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;min-height:44px;
  font-weight:600;font-size:14px;color:var(--ink);transition:border-color .2s,background-color .2s}
.lang-toggle:hover{border-color:var(--gold-300);background:var(--gold-100)}
.lang-toggle .ic{color:var(--gold-700)}
.nav-toggle{display:none;background:var(--white);border:1.5px solid var(--line);
  border-radius:12px;width:48px;height:48px;align-items:center;justify-content:center;color:var(--ink)}
.nav-toggle .ic{width:24px;height:24px}
.nav-scrim{position:fixed;inset:0;background:rgba(44,38,32,.42);z-index:98;opacity:0;
  transition:opacity .3s}
.nav-scrim.is-open{opacity:1}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,11vw,120px);
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(240,218,214,.55),transparent 60%),
    radial-gradient(900px 520px at 8% 10%,rgba(233,216,182,.6),transparent 58%),
    linear-gradient(180deg,var(--cream),var(--cream-2))}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.hero__glow--1{width:42vw;height:42vw;max-width:520px;max-height:520px;
  background:radial-gradient(circle,rgba(203,173,115,.55),transparent 68%);top:-6%;inset-inline-end:-4%}
.hero__glow--2{width:38vw;height:38vw;max-width:460px;max-height:460px;
  background:radial-gradient(circle,rgba(240,218,214,.7),transparent 68%);bottom:-12%;inset-inline-start:-6%}
.hero__arch{position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:min(760px,86%);height:520px;border:1.5px solid rgba(176,137,74,.22);
  border-radius:400px 400px 40px 40px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
  mask-image:linear-gradient(180deg,#000,transparent 75%)}
.hero__inner{position:relative;max-width:880px;margin:0 auto;text-align:center;
  padding-block:clamp(20px,4vw,40px)}
/* signature corner brackets */
.hero__inner::before,.hero__inner::after{content:"";position:absolute;width:34px;height:34px;
  border:2px solid var(--gold-400);opacity:.85}
.hero__inner::before{top:0;inset-inline-start:clamp(4px,3vw,30px);border-inline-end:0;border-block-end:0;border-radius:8px 0 0 0}
.hero__inner::after{bottom:0;inset-inline-end:clamp(4px,3vw,30px);border-inline-start:0;border-block-start:0;border-radius:0 0 8px 0}
.hero__eyebrow{display:inline-flex;gap:.5em;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:13px;color:var(--gold-700);margin-bottom:18px}
.hero__eyebrow .brk{position:relative;padding:0 2px}
.hero__title{font-size:40px;font-size:clamp(36px,7vw,68px);letter-spacing:-.015em}
.hero__title-1,.hero__title-2{display:block}
.hero__title-2{margin-top:.12em}
.hero__lead{margin:22px auto 0;max-width:600px;color:var(--ink-2);font-size:18px;font-size:clamp(16px,2.3vw,20px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.hero__stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,5vw,52px);
  margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.hero__stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.hero__stat strong{font-family:var(--ff-head);font-size:30px;font-size:clamp(26px,4vw,38px);color:var(--gold-800);line-height:1}
.hero__stat span{font-size:14px;color:var(--ink-3);letter-spacing:.02em}
.hero__scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  color:var(--gold-700);background:var(--white);border-radius:50%;box-shadow:var(--sh-sm);
  animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion:reduce){.hero__scroll{animation:none}}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.services__wrap{display:flex;flex-direction:column;gap:clamp(30px,5vw,52px)}
.svc-group{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(20px,3.4vw,34px);box-shadow:var(--sh-sm)}
.svc-group__head{display:flex;align-items:center;gap:16px;margin-bottom:22px;
  padding-bottom:20px;border-bottom:1px dashed var(--line)}
.svc-group__badge{flex:none;width:58px;height:58px;border-radius:16px;display:flex;
  align-items:center;justify-content:center;color:var(--gold-700);
  background:linear-gradient(140deg,var(--gold-100),var(--gold-200));border:1px solid var(--gold-200)}
.svc-group__badge .ic{width:28px;height:28px}
.svc-group__title{font-size:23px;font-size:clamp(21px,3vw,28px)}
.svc-group__tag{color:var(--ink-3);font-size:15px;margin-top:2px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.svc-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:10px;padding:22px 20px;border:1px solid var(--line-soft);border-radius:var(--r);
  background:linear-gradient(180deg,#fff,var(--cream));transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--gold-200)}
.svc-card__icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:var(--gold-700);background:var(--gold-100);border:1px solid var(--gold-200);transition:background-color .25s,color .25s}
.svc-card__icon .ic{width:26px;height:26px}
.svc-card:hover .svc-card__icon{background:linear-gradient(140deg,var(--gold),var(--gold-700));color:#fff}
.svc-card__name{font-size:19px}
.svc-card__desc{color:var(--ink-2);font-size:14.5px;line-height:1.6;flex:1 0 auto}
.svc-card__cta{display:inline-flex;align-items:center;gap:.5em;margin-top:6px;
  font-weight:600;font-size:14px;color:var(--wa-ink);padding:9px 15px;min-height:44px;
  border:1.5px solid var(--gold-200);border-radius:var(--r-pill);background:var(--white);
  transition:background-color .2s,border-color .2s,transform .2s}
.svc-card__cta .ic{color:var(--wa);width:1.2em;height:1.2em}
.svc-card__cta:hover{background:var(--gold-100);border-color:var(--gold-300)}
.services__note{margin-top:26px;text-align:center;color:var(--ink-3);font-size:14px}

/* ============================================================
   WHY
   ============================================================ */
.why{background:var(--cream)}
.why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.why__card{background:linear-gradient(180deg,#fff,var(--cream-2));border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:30px 26px;text-align:center;box-shadow:var(--sh-xs);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.why__card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.why__icon{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:var(--gold-700);
  background:radial-gradient(circle at 30% 25%,var(--gold-100),var(--gold-200));border:1px solid var(--gold-200)}
.why__icon .ic{width:30px;height:30px}
.why__card h3{font-size:20px;margin-bottom:8px}
.why__card p{color:var(--ink-2);font-size:15px}

/* ============================================================
   SIGNATURE / MESOTHERAPY
   ============================================================ */
.signature{background:linear-gradient(180deg,var(--cream),var(--cream-3))}
.signature__inner{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(28px,6vw,72px);
  align-items:center}
.signature__media{position:relative;margin:0;justify-self:center;max-width:420px;width:100%}
.signature__media::before{content:"";position:absolute;inset:-18px;
  background:radial-gradient(circle at 50% 30%,rgba(203,173,115,.35),transparent 70%);z-index:-1}
.signature__img{width:100%;border-radius:220px 220px 24px 24px;box-shadow:var(--sh-lg);
  border:1px solid var(--gold-200)}
.signature__tag{position:absolute;bottom:16px;inset-inline-start:50%;transform:translateX(-50%);
  background:rgba(251,246,236,.92);color:var(--gold-800);font-weight:600;font-size:13px;
  padding:7px 16px;border-radius:var(--r-pill);box-shadow:var(--sh-sm);white-space:nowrap}
.signature__body .section__title{margin-top:14px}
.signature__body .btn{margin-top:26px}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{background:
  radial-gradient(900px 500px at 90% 0%,rgba(240,218,214,.5),transparent 60%),
  var(--cream-2)}
.reviews__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.review{position:relative;background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:30px 26px 24px;box-shadow:var(--sh-xs);
  display:flex;flex-direction:column;gap:14px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.review:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.review__quote{position:absolute;top:18px;inset-inline-end:22px;color:var(--gold-200)}
.review__quote .ic{width:34px;height:34px}
.review__stars{display:inline-flex;gap:3px;color:var(--gold-500)}
.review__stars .ic{width:19px;height:19px}
.review__text{color:var(--ink);font-size:16px;line-height:1.75;flex:1}
.review__by{display:flex;flex-direction:column;gap:1px;padding-top:12px;border-top:1px solid var(--line-soft)}
.review__by strong{font-family:var(--ff-head);font-size:17px;color:var(--gold-900)}
.review__src{font-size:13px;color:var(--ink-3)}

/* ============================================================
   RESULTS
   ============================================================ */
.results{background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.results__inner{display:grid;grid-template-columns:1fr minmax(0,440px);gap:clamp(28px,6vw,64px);align-items:center}
.results__body .section__title{margin-top:14px}
.results__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.results__hint{margin-top:18px;color:var(--ink-3);font-size:13.5px}
.results__frame{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);
  background:
    repeating-linear-gradient(135deg,rgba(203,173,115,.08) 0 12px,transparent 12px 24px),
    linear-gradient(160deg,var(--gold-100),var(--pink) 130%);
  border:1px solid var(--gold-200);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh);overflow:hidden}
.results__frame::before{content:"";position:absolute;inset:14px;border:1.5px dashed rgba(176,137,74,.4);border-radius:20px}
.results__ph{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  color:var(--gold-800);font-weight:600;padding:24px;max-width:80%}
.results__ph .ic{width:40px;height:40px;padding:14px;border-radius:50%;background:rgba(255,255,255,.7);
  box-shadow:var(--sh-sm);width:64px;height:64px}
/* aspect-ratio fallback for old WebKit */
@supports not (aspect-ratio:1){.results__frame{height:0;padding-bottom:125%}.results__ph{position:absolute}}

/* ============================================================
   BRANCHES
   ============================================================ */
.branches{background:var(--cream)}
.branches__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.branch{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sh-xs);display:flex;flex-direction:column;gap:16px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.branch:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.branch__head{display:flex;align-items:center;gap:14px}
.branch__icon{flex:none;width:50px;height:50px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;color:var(--gold-700);background:var(--gold-100);border:1px solid var(--gold-200)}
.branch__icon .ic{width:26px;height:26px}
.branch__name{font-size:20px}
.branch__addr{color:var(--ink-2);font-size:14.5px}
.branch__map{position:relative;border-radius:var(--r);overflow:hidden;background:
    repeating-linear-gradient(45deg,rgba(203,173,115,.08) 0 10px,transparent 10px 20px),
    linear-gradient(160deg,var(--gold-100),var(--cream-3));
  border:1px solid var(--line);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
@supports not (aspect-ratio:1){.branch__map{height:0;padding-bottom:62%}}
.branch__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.branch__map-btn{display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  background:rgba(255,255,255,.75);border:1.5px solid var(--gold-200);color:var(--gold-800);
  font-weight:600;font-size:14px;padding:14px 20px;border-radius:var(--r-pill);min-height:48px;
  box-shadow:var(--sh-sm);transition:background-color .2s,transform .2s}
@supports not (aspect-ratio:1){.branch__map-btn{position:absolute}}
.branch__map-btn .ic{width:24px;height:24px;color:var(--gold-700)}
.branch__map-btn:hover{background:#fff;transform:translateY(-2px)}
.branch__actions{display:flex;gap:10px;margin-top:auto}
.branch__actions .btn{flex:1}

/* ============================================================
   BOOK
   ============================================================ */
.book{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.book__inner{position:relative;overflow:hidden;text-align:center;max-width:820px;margin:0 auto;
  background:linear-gradient(150deg,#fff,var(--cream-2));border:1px solid var(--gold-200);
  border-radius:var(--r-xl);padding:clamp(40px,7vw,72px) clamp(24px,5vw,56px);box-shadow:var(--sh-lg)}
.book__arch{position:absolute;top:-90px;left:50%;transform:translateX(-50%);width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(203,173,115,.28),transparent 66%);pointer-events:none}
.book__inner .section__title{margin-top:14px}
.book__inner .section__sub{margin-inline:auto;max-width:560px}
.book__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:linear-gradient(180deg,var(--ink),#221d18);color:#E7DECF}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;
  padding-block:clamp(44px,7vw,72px)}
.footer__logo{height:52px;width:auto;margin-bottom:14px;
  /* logo is gold on transparent — sits well on dark */}
.footer__tag{color:var(--gold-300);font-weight:600;letter-spacing:.04em;font-size:14px}
.footer__mission{margin-top:12px;color:#C9BEAC;font-size:14.5px;max-width:34ch}
.footer__title{font-family:var(--ff-body);font-weight:600;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-300);margin-bottom:16px}
.footer__list li{display:flex;align-items:center;gap:10px;margin-bottom:6px;color:#D6CCBB;font-size:15px}
.footer__list .ic{color:var(--gold-400);width:19px;height:19px;flex:none}
.footer__list a,.footer__list li>span{display:inline-flex;align-items:center;min-height:44px}
.footer__list a:hover{color:#fff}
.footer__social{display:inline-flex;align-items:center;gap:9px;color:#EDE4D5;font-weight:600;
  padding:10px 16px;border:1px solid rgba(233,216,182,.28);border-radius:var(--r-pill);
  margin-bottom:16px;transition:border-color .2s,background-color .2s}
.footer__social .ic{color:var(--gold-400)}
.footer__social:hover{border-color:var(--gold-400);background:rgba(233,216,182,.08)}
.footer__book{display:inline-flex}
.footer__bar{border-top:1px solid rgba(233,216,182,.16)}
.footer__bar-inner{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  padding-block:18px;font-size:13.5px;color:#B7AC99}
.footer__demo{color:var(--gold-300);font-weight:600}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.fab-wa{position:fixed;z-index:90;inset-block-end:20px;inset-inline-end:20px;
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--wa);color:#fff;box-shadow:0 12px 28px rgba(31,168,85,.44);
  transition:transform .25s var(--ease),box-shadow .25s}
.fab-wa .ic{width:30px;height:30px}
.fab-wa:hover{transform:scale(1.07) translateY(-2px);box-shadow:0 16px 34px rgba(31,168,85,.5)}
.fab-wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);
  animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.fab-wa::after{animation:none;display:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:860px){
  .signature__inner{grid-template-columns:1fr;text-align:center}
  .signature__body .eyebrow{justify-content:center}
  .results__inner{grid-template-columns:1fr}
  .results__frame{max-width:420px;margin:0 auto;width:100%}
  .results__body .eyebrow{justify-content:center}
  .results__body{text-align:center}
  .results__cta{justify-content:center}
}
@media (max-width:800px){
  /* Mobile nav drawer */
  .nav{position:fixed;inset-block:0;inset-inline-end:0;width:min(84vw,340px);
    margin:0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--cream);box-shadow:var(--sh-lg);padding:78px 24px 32px;z-index:99;
    transform:translateX(100%);transition:transform .32s var(--ease);overflow-y:auto}
  html[dir="rtl"] .nav{transform:translateX(-100%)}
  /* open state must out-specify the dir hide rule above */
  .nav.is-open,html[dir="rtl"] .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .nav__link{display:block;padding:14px 12px;font-size:17px;border-bottom:1px solid var(--line-soft)}
  .nav__link::after{display:none}
  .nav__cta{margin:18px 0 0;text-align:center}
  .nav__close{display:inline-flex;position:absolute;top:18px;inset-inline-end:18px;
    width:44px;height:44px;align-items:center;justify-content:center;background:var(--white);
    border:1px solid var(--line);border-radius:12px;color:var(--ink)}
  .nav-toggle{display:inline-flex}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand__logo{height:38px}
  .hero__cta .btn,.book__cta .btn{width:100%}
  .svc-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__stat strong{font-size:28px}
  .btn{width:auto}
}