/* =====================================================================
   VAL MEDICAL AESTHETIC CLINIC — public site
   Direction: light · soft · aqua. Cool paper, one clinic accent (#4299CF)
   and a deep teal anchor. Arch-topped photography, generous curves, soft glow.
   Everything direction-sensitive uses logical properties (RTL + LTR).
   ===================================================================== */

:root{
  /* surfaces */
  --paper:       #FFFFFF;
  --cream:       #F7FBFE;
  --tint:        #EBF5FC;
  --tint-2:      #D6EAF8;
  --anchor:      #1B4F72;   /* deep blue used as ink, and for the admin chrome */
  --anchor-soft: #21618C;
  --band:        #4299CF;   /* the big filled bands on the public site */

  /* ink */
  --ink:         #1C2B36;
  --ink-soft:    #52646F;
  --ink-faint:   #7B909F;
  --on-anchor:   #DCEBF8;

  /* accent — the clinic colour, plus a deeper tone that stays legible as text */
  --brand:       #4299CF;
  --brand-deep:  #21618C;
  --brand-hover: #5DADE2;
  --brand-soft:  #D6EAF8;
  --on-brand:    #0B2232;   /* text that sits on the brand fill */
  --sand:        #C9A87C;

  --line:        #DDEBF6;
  --line-2:      #BBD8EC;

  /* state colours — not brand, deliberately kept recognisable */
  --ok:   #2F6B4F;  --ok-bg:   #EEF6F1;
  --warn: #8A6212;  --warn-bg: #FBF3E2;
  --bad:  #9A3B32;  --bad-bg:  #FBEFEE;
  --info: #2F5B86;  --info-bg: #EDF3F9;

  /* type */
  /* Alexandria carries all Arabic text; Cormorant stays for Latin display */
  --f-display: "Cormorant Garamond", "Alexandria", Georgia, serif;
  --f-body:    "Alexandria", system-ui, -apple-system, sans-serif;

  --t-xs:  .75rem;  --t-sm: .875rem;  --t-base: 1.0625rem;  --t-md: 1.1875rem;
  --t-lg:  1.375rem;
  --t-xl:  clamp(1.6rem, 3vw, 2.1rem);
  --t-2xl: clamp(2rem, 4.2vw, 3.1rem);
  --t-3xl: clamp(2.5rem, 5.6vw, 4.4rem);

  /* shape + depth */
  --r-sm:  14px;
  --r:     22px;
  --r-lg:  32px;
  --r-pill:999px;
  --arch:  50% 50% var(--r-lg) var(--r-lg) / 34% 34% var(--r-lg) var(--r-lg);
  --sh-soft: 0 18px 50px -28px rgb(27 79 114 / .35);
  --sh-lift: 0 28px 70px -30px rgb(27 79 114 / .45);
  --sh-card: 0 2px 10px -4px rgb(27 79 114 / .12);

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --shell:  1280px;
  --sec-y:  clamp(4rem, 9vw, 7.5rem);
  --ease:   cubic-bezier(.22,1,.36,1);
  --dur:    .7s;
}

*,*::before,*::after{ box-sizing:border-box; }
/* the attribute has to beat display:grid/flex, or "hidden" blocks stay on screen */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-body); font-size:var(--t-base); line-height:1.8;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
[dir="rtl"]{ --f-display: "Alexandria", system-ui, sans-serif; }
[dir="rtl"] body{ line-height:1.9; }
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:400; line-height:1.2; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{ font-weight:600; line-height:1.4; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--brand-soft); color:var(--anchor); }
:focus-visible{ outline:2px solid var(--brand-deep); outline-offset:3px; border-radius:4px; }

/* ----------------------------------------------------------- structure */
.shell{ width:min(100% - (var(--gutter)*2), var(--shell)); margin-inline:auto; }
.section{ padding-block:var(--sec-y); position:relative; }
.section--tint{ background:var(--tint); }
.section--paper{ background:var(--paper); }
.section--anchor{ background:var(--band); color:#fff; }
.section--anchor h2,.section--anchor h3{ color:#fff; }

/* soft aqua glow used behind heroes and bands — light, not a gradient blob */
.glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none; z-index:0; }
.glow--brand{ background:var(--brand-soft); }
.glow--sand{ background:#F3E7D4; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; background:var(--tint);
  border:1px solid var(--line-2); color:var(--brand-deep); border-radius:var(--r-pill);
  padding:.4rem 1rem; font-size:var(--t-xs); letter-spacing:.08em; font-weight:500;
}
.section--anchor .eyebrow{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.34); color:#fff; }
.eyebrow::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); }

.sec-head{ max-width:62ch; margin-bottom:clamp(2.25rem,4vw,3.5rem); position:relative; z-index:1; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-title{ font-size:var(--t-2xl); margin-block:1rem .9rem; }
.sec-lead{ color:var(--ink-soft); font-size:var(--t-md); margin:0; }
.section--anchor .sec-lead{ color:rgba(255,255,255,.9); }

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:54px; padding:0 1.9rem; border-radius:var(--r-pill);
  /* the clinic colour carries the main call to action; the ink on it is the
     anchor tone, which keeps it at 6.5:1 instead of the 2.2:1 white would give */
  background:var(--brand); color:var(--on-brand); border:1px solid var(--brand);
  font-size:var(--t-sm); font-weight:600; letter-spacing:.02em;
  box-shadow:0 12px 28px -14px rgb(33 97 140 / .5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px rgb(33 97 140 / .45); background:var(--brand-hover); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); box-shadow:none; }
.btn--ghost:hover{ background:var(--paper); border-color:var(--brand); color:var(--brand-deep); box-shadow:var(--sh-card); }
.btn--white{ background:#fff; color:var(--anchor); border-color:#fff; }
.btn--white:hover{ background:var(--tint); }
.btn--anchor{ background:var(--band); border-color:var(--band); box-shadow:none; }
.btn--anchor:hover{ background:var(--anchor-soft); }
.btn--block{ width:100%; }
.btn--sm{ min-height:44px; padding:0 1.3rem; }

.tlink{ display:inline-flex; align-items:center; gap:.5rem; font-size:var(--t-sm); color:var(--brand-deep); font-weight:500; }
.tlink__arrow{ transition:transform .35s var(--ease); }
[dir="rtl"] .tlink__arrow{ transform:scaleX(-1); }
.tlink:hover .tlink__arrow{ transform:translateX(4px); }
[dir="rtl"] .tlink:hover .tlink__arrow{ transform:scaleX(-1) translateX(4px); }

/* ----------------------------------------------------------- masthead */
.masthead{ position:fixed; inset-block-start:0; inset-inline:0; z-index:60; transition:background .4s var(--ease), box-shadow .4s var(--ease); }
.masthead__in{ display:flex; align-items:center; gap:clamp(.75rem,2.5vw,2rem); min-height:84px; }
body.scrolled .masthead{ background:rgba(247,251,254,.93); backdrop-filter:blur(16px); box-shadow:0 1px 0 var(--line), 0 10px 30px -24px rgb(27 79 114 / .4); }
body.scrolled .masthead__in{ min-height:70px; }

.brandmark{ display:flex; align-items:center; flex-shrink:0; }
.brandmark .mask{
  display:block; width:118px; height:63px; background:var(--anchor);
  -webkit-mask:url("../img/logo-mark.png") no-repeat center/contain;
          mask:url("../img/logo-mark.png") no-repeat center/contain;
  transition:width .4s var(--ease), height .4s var(--ease);
}
body.scrolled .brandmark .mask{ width:96px; height:51px; }
.brandmark img{ display:none; }
@supports not ((-webkit-mask-image:url("x")) or (mask-image:url("x"))){
  .brandmark .mask{ display:none; } .brandmark img{ display:block; height:58px; filter:brightness(0); }
}

.nav{ display:flex; align-items:center; gap:clamp(.9rem,1.8vw,1.75rem); margin-inline-start:auto; }
.nav__link{ font-size:var(--t-sm); padding-block:.35rem; position:relative; }
.nav__link::after{ content:""; position:absolute; inset-inline-start:0; bottom:0; width:100%; height:1.5px;
  background:var(--brand); border-radius:2px; transform:scaleX(0); transform-origin:inline-start; transition:transform .4s var(--ease); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.lang{ font-size:var(--t-xs); letter-spacing:.1em; color:var(--ink-soft); border:1px solid var(--line-2);
  border-radius:var(--r-pill); padding:.35rem .7rem; }
.lang:hover{ color:var(--brand-deep); border-color:var(--brand); }

.burger{ display:none; width:46px; height:46px; align-items:center; justify-content:center; margin-inline-start:auto;
  border:1px solid var(--line-2); border-radius:50%; background:rgba(255,255,255,.7); }
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); border-radius:2px; position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; inset-inline-start:0; width:18px; height:1.5px;
  background:var(--ink); border-radius:2px; transition:transform .35s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span::after{ transform:translateY(-6px) rotate(-45deg); }

.drawer{ position:fixed; inset:0; z-index:55; background:var(--cream); display:flex; flex-direction:column;
  justify-content:center; padding:var(--gutter); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
body.menu-open .drawer{ opacity:1; visibility:visible; }
.drawer a{ font-family:var(--f-display); font-size:clamp(1.7rem,6.5vw,2.4rem); padding-block:.45rem;
  border-bottom:1px solid var(--line); display:block; }
[dir="rtl"] .drawer a{ font-weight:600; }

/* --------------------------------------------------------------- hero */
.hero{ position:relative; padding-block:clamp(7.5rem,13vw,9.5rem) var(--sec-y); overflow:hidden; }
.hero__glow-1{ width:520px; height:520px; inset-block-start:-120px; inset-inline-end:-80px; }
.hero__glow-2{ width:380px; height:380px; inset-block-end:-140px; inset-inline-start:-120px; opacity:.4; }
.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero h1{ font-size:var(--t-3xl); margin-block:1.4rem 1.2rem; }
.hero h1 .accent{ color:var(--brand-deep); }
.hero__lead{ color:var(--ink-soft); font-size:var(--t-md); max-width:44ch; margin-bottom:2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

.hero__trust{ margin-top:clamp(2.25rem,4vw,3rem); display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; }
.hero__trust-item{ display:flex; align-items:center; gap:.65rem; }
.hero__trust-item b{ font-family:var(--f-display); font-size:1.5rem; line-height:1; color:var(--anchor); }
[dir="rtl"] .hero__trust-item b{ font-weight:600; }
.hero__trust-item span{ font-size:var(--t-xs); color:var(--ink-soft); max-width:16ch; line-height:1.5; }
.hero__trust-sep{ width:1px; height:34px; background:var(--line-2); }

/* arch-framed photography */
.frame{ position:relative; }
.frame__img{ position:relative; overflow:hidden; border-radius:var(--arch); box-shadow:var(--sh-soft); background:var(--tint-2); }
.frame__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.frame:hover .frame__img img{ transform:scale(1.04); }
.frame--tall .frame__img{ aspect-ratio:4/5; }
.frame--square .frame__img{ aspect-ratio:1/1; }
/* hairline echo of the arch, offset — gives the photo a designed edge */
.frame::after{
  content:""; position:absolute; inset:-14px; border:1px solid var(--line-2);
  border-radius:var(--arch); pointer-events:none; opacity:.9;
}
.frame__badge{
  position:absolute; inset-block-end:1.25rem; inset-inline-start:-1.5rem; z-index:2;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid var(--line);
  border-radius:var(--r); padding:.85rem 1.1rem; box-shadow:var(--sh-card); max-width:17rem;
}
.frame__badge b{ display:block; font-size:var(--t-sm); font-weight:600; }
.frame__badge span{ font-size:var(--t-xs); color:var(--ink-soft); }

/* --------------------------------------------------------- trust strip */
.pills{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.pill{ display:inline-flex; align-items:center; gap:.5rem; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.6rem 1.1rem; font-size:var(--t-sm); box-shadow:var(--sh-card); }
.pill svg{ width:16px; height:16px; stroke:var(--brand); fill:none; stroke-width:1.5; flex-shrink:0; }
.pill--plain{ background:var(--tint); box-shadow:none; }

/* ------------------------------------------------------- service cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.75rem); }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lift); border-color:var(--brand-soft); }
.card__media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--tint-2); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.card:hover .card__media img{ transform:scale(1.06); }
.card__count{ position:absolute; inset-block-start:.9rem; inset-inline-end:.9rem; background:rgba(255,255,255,.92);
  border-radius:var(--r-pill); padding:.25rem .75rem; font-size:var(--t-xs); color:var(--anchor); }
.card__body{ padding:clamp(1.1rem,2vw,1.6rem); display:flex; flex-direction:column; flex:1; gap:.5rem; }
.card__title{ font-size:var(--t-lg); }
.card__text{ color:var(--ink-soft); font-size:var(--t-sm); margin:0; }
.card__device{ font-size:var(--t-xs); color:var(--brand-deep); }
.card__foot{ margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line); display:flex;
  align-items:center; justify-content:space-between; gap:.75rem; }

/* ------------------------------------------------- surgery feature band */
.feature{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.surglist{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1.25rem; margin-block:1.75rem; }
.surglist a{ display:flex; align-items:center; gap:.7rem; padding-block:.6rem; font-size:var(--t-sm);
  border-bottom:1px solid rgba(255,255,255,.28); transition:gap .35s var(--ease), color .35s var(--ease); }
.surglist a:hover{ gap:1.1rem; color:#fff; }
/* the brand blue disappears against the lighter band, so the marker goes white */
.surglist i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.85); flex-shrink:0; }

/* ----------------------------------------------------------- why cards */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.why__item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.3rem,2.2vw,1.9rem); transition:box-shadow .45s var(--ease), transform .45s var(--ease); }
.why__item:hover{ box-shadow:var(--sh-soft); transform:translateY(-4px); }
.why__icon{ width:46px; height:46px; border-radius:50%; background:var(--tint); display:grid; place-items:center; margin-bottom:1rem; }
.why__icon svg{ width:22px; height:22px; stroke:var(--brand-deep); fill:none; stroke-width:1.5; }
.why__t{ font-size:var(--t-lg); margin-bottom:.4rem; }
.why__d{ color:var(--ink-soft); font-size:var(--t-sm); margin:0; }

/* ------------------------------------------------------ before / after */
.ba{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-lg); background:var(--tint-2);
  cursor:ew-resize; user-select:none; box-shadow:var(--sh-soft); }
.ba__layer{ position:absolute; inset:0; }
.ba__layer img{ width:100%; height:100%; object-fit:cover; }
.ba__after{ clip-path:inset(0 0 0 var(--pos,50%)); }
[dir="rtl"] .ba__after{ clip-path:inset(0 var(--pos,50%) 0 0); }
.ba__handle{ position:absolute; inset-block:0; inset-inline-start:var(--pos,50%); width:2px; background:#fff; }
.ba__knob{ position:absolute; top:50%; inset-inline-start:50%; transform:translate(-50%,-50%); width:44px; height:44px;
  border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--brand-deep);
  box-shadow:0 6px 18px -6px rgb(27 79 114 / .5); font-size:var(--t-xs); }
.ba__tag{ position:absolute; inset-block-start:1rem; font-size:var(--t-xs); background:rgba(255,255,255,.9);
  color:var(--anchor); padding:.3rem .8rem; border-radius:var(--r-pill); }
.ba__tag--b{ inset-inline-start:1rem; } .ba__tag--a{ inset-inline-end:1rem; }
.photo-slot{ width:100%; height:100%; display:grid; place-items:center; background:var(--tint); }
.photo-slot span{ font-size:var(--t-xs); color:var(--ink-soft); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:.45rem .9rem; }

/* ------------------------------------------------------------- doctor */
.doctor{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.credentials{ display:grid; gap:.75rem; margin-top:1.5rem; }
.credentials li{ display:flex; gap:.75rem; align-items:flex-start; font-size:var(--t-sm); color:var(--ink-soft); }
.credentials svg{ width:18px; height:18px; stroke:var(--brand); fill:none; stroke-width:1.6; flex-shrink:0; margin-top:.35rem; }

/* --------------------------------------------------------- testimonials */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.quote{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.3rem,2.2vw,1.8rem);
  display:flex; flex-direction:column; gap:1rem; }
.quote__stars{ display:flex; gap:.2rem; }
.quote__stars svg{ width:15px; height:15px; fill:var(--sand); stroke:none; }
.quote__text{ font-family:var(--f-display); font-size:var(--t-md); line-height:1.65; margin:0; }
[dir="rtl"] .quote__text{ font-weight:500; line-height:1.8; }
.quote__by{ margin-top:auto; display:flex; align-items:center; gap:.75rem; font-size:var(--t-sm); }
.quote__av{ width:40px; height:40px; border-radius:50%; background:var(--tint-2); display:grid; place-items:center;
  color:var(--brand-deep); font-size:var(--t-sm); font-weight:600; }

/* ---------------------------------------------------------------- faq */
.faq{ max-width:60rem; margin-inline:auto; }
.faq__item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); margin-bottom:.75rem;
  overflow:hidden; transition:box-shadow .4s var(--ease); }
.faq__item[open]{ box-shadow:var(--sh-card); border-color:var(--brand-soft); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; text-align:start;
  padding:1.15rem clamp(1.1rem,2vw,1.6rem); font-family:var(--f-display); font-size:var(--t-md); cursor:pointer; list-style:none; }
[dir="rtl"] .faq__q{ font-weight:600; }
.faq__q::-webkit-details-marker{ display:none; }
.faq__sign{ flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--tint); position:relative; }
.faq__sign::before,.faq__sign::after{ content:""; position:absolute; top:50%; inset-inline-start:50%; width:12px; height:1.6px;
  background:var(--brand-deep); border-radius:2px; transform:translate(-50%,-50%); transition:transform .35s var(--ease); }
[dir="rtl"] .faq__sign::before,[dir="rtl"] .faq__sign::after{ transform:translate(50%,-50%); }
.faq__sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
[dir="rtl"] .faq__sign::after{ transform:translate(50%,-50%) rotate(90deg); }
.faq__item[open] .faq__sign::after{ transform:translate(-50%,-50%) rotate(0); }
[dir="rtl"] .faq__item[open] .faq__sign::after{ transform:translate(50%,-50%) rotate(0); }
.faq__a{ padding:0 clamp(1.1rem,2vw,1.6rem) 1.35rem; color:var(--ink-soft); font-size:var(--t-sm); }

/* ------------------------------------------------------------ cta band */
.cta{ position:relative; overflow:hidden; background:var(--band); color:#fff; border-radius:var(--r-lg);
  padding:clamp(2.25rem,5vw,4rem); }
.cta__glow{ width:420px; height:420px; inset-block-start:-180px; inset-inline-end:-120px; opacity:.22; background:var(--brand); }
.cta__in{ position:relative; z-index:1; display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.cta h2{ font-size:var(--t-2xl); margin-bottom:.75rem; }
.cta p{ color:rgba(255,255,255,.88); margin:0; }
.cta__actions{ display:grid; gap:.75rem; }

/* ------------------------------------------------------------- footer */
.footer{ background:var(--tint); border-top:1px solid var(--line); padding-block:clamp(2.75rem,5vw,4rem) 1.75rem; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(1.75rem,4vw,3rem); }
.footer h4{ font-family:var(--f-body); font-size:var(--t-sm); font-weight:600; color:var(--anchor); margin-bottom:1rem; }
.footer li{ margin-bottom:.55rem; font-size:var(--t-sm); color:var(--ink-soft); }
.footer a:hover{ color:var(--brand-deep); }
.footer__logo{ width:150px; height:80px; margin-bottom:1rem; }
.footer__social{ display:flex; gap:.6rem; margin-top:1rem; }
.footer__social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; }
.footer__social a:hover{ background:var(--paper); border-color:var(--brand); }
.footer__social svg{ width:17px; height:17px; stroke:var(--ink-soft); fill:none; stroke-width:1.5; }
.footer__social a:hover svg{ stroke:var(--brand-deep); }
.footer__bottom{ margin-top:clamp(2rem,4vw,3rem); padding-top:1.25rem; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; font-size:var(--t-xs); color:var(--ink-faint); }

/* --------------------------------------------------------- mobile bar */
.mbar{ display:none; position:fixed; inset-block-end:0; inset-inline:0; z-index:70; background:rgba(247,251,254,.96);
  backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:.4rem; gap:.4rem; }
.mbar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  padding:.5rem 0; font-size:var(--t-xs); color:var(--ink); border-radius:var(--r-sm); min-height:52px; }
.mbar a.is-primary{ background:var(--brand-deep); color:#fff; }
.mbar svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.6; }

/* ------------------------------------------------------------ reveals */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.07s } .reveal[data-d="2"]{ transition-delay:.14s }
.reveal[data-d="3"]{ transition-delay:.21s } .reveal[data-d="4"]{ transition-delay:.28s }
.reveal[data-d="5"]{ transition-delay:.35s } .reveal[data-d="6"]{ transition-delay:.42s }

/* ---------------------------------------------------------- utilities */
.muted{ color:var(--ink-soft); }
.num{ font-variant-numeric:tabular-nums; }
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }
.center{ text-align:center; }
.flash{ border-radius:var(--r); padding:1rem 1.25rem; margin-bottom:1rem; font-size:var(--t-sm); border:1px solid; }
.flash--success{ background:#F0F7F2; border-color:#CFE4D6; color:#2A5F43; }
.flash--error{ background:var(--bad-bg); border-color:#EBC9C5; color:var(--bad); }
.flash--warn{ background:var(--warn-bg); border-color:#E8D6AE; color:var(--warn); }
.flash--info{ background:var(--info-bg); border-color:#CFE0EF; color:var(--info); }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* --------------------------------------------------------- responsive */
@media (max-width:1024px){
  .hero__grid,.feature,.doctor{ grid-template-columns:1fr; }
  .cards,.why,.quotes{ grid-template-columns:1fr 1fr; }
  .cta__in{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .frame__badge{ inset-inline-start:1rem; }
}
@media (max-width:760px){
  body{ padding-bottom:62px; }
  .nav{ display:none; } .burger{ display:flex; } .mbar{ display:flex; }
  .cards,.why,.quotes,.surglist{ grid-template-columns:1fr; }
  .hero{ padding-block:7rem 3rem; }
  .hero__trust-sep{ display:none; }
  .hero__trust{ gap:1rem 1.75rem; }
  .frame::after{ inset:-8px; }
  /* the badge stops covering the portrait on a phone */
  .frame__badge{ position:static; margin-top:1rem; max-width:none; backdrop-filter:none; }
  .footer__grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
}
@media print{ .masthead,.mbar,.cta,.footer,.drawer{ display:none; } body{ background:#fff; padding:0; } }

/* footer wordmark recoloured to the anchor tone from the same white artwork */
.mask-anchor{ display:block; background:var(--anchor);
  -webkit-mask:url("../img/logo-mark.png") no-repeat center/contain;
          mask:url("../img/logo-mark.png") no-repeat center/contain; }

/* ---------------------------------------------------------- icon sizing */
.ic{ width:1.15em; height:1.15em; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; }
.btn .ic{ width:18px; height:18px; }
.pill .ic{ width:16px; height:16px; stroke:var(--brand); }
.why__icon .ic{ width:22px; height:22px; stroke:var(--brand-deep); }
.tlink .ic{ width:16px; height:16px; }
.mbar .ic{ width:19px; height:19px; }
.footer__social .ic{ width:17px; height:17px; stroke:var(--ink-soft); }
.footer__social a:hover .ic{ stroke:var(--brand-deep); }
.credentials .ic{ width:18px; height:18px; stroke:var(--brand); margin-top:.35rem; }
.ic--star{ width:15px; height:15px; fill:var(--sand); stroke:none; }
.ic--facebook,.ic--whatsapp{ stroke-width:1.5; }

/* faces sit high in a portrait crop — keep eyes in the upper third */
.frame__img img{ object-position:50% 22%; }
.hero h1 .accent{ display:block; }
.card__media img{ object-position:50% 30%; }

/* ------------------------------------------------------ service lists */
.svc-list{ display:grid; gap:.25rem; }
.svc-list a{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1rem; border-radius:var(--r-sm); border:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease); }
.svc-list a:hover{ background:var(--paper); border-color:var(--line); }
.svc-list small{ color:var(--ink-faint); font-size:var(--t-xs); white-space:nowrap; }
.section--tint .svc-list a:hover{ background:#fff; }

/* team cards: with only two of them the row gets wide, and a 4/5 portrait at
   that width turns into a poster — hold the grid in and cap the photo */
.cards--team{ max-width:920px; margin-inline:auto; }
.cards--team .card__media{ max-height:400px; }
.cards--team .card__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }

/* --------------------------------------------------------------- offers */
.offer{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh-card); }
.offer__img{ aspect-ratio:3/2; overflow:hidden; background:var(--tint); }
.offer__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.offer:hover .offer__img img{ transform:scale(1.04); }
.offer__body{ padding:clamp(1.15rem,2.2vw,1.6rem); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.offer__value{ align-self:flex-start; background:var(--brand); color:var(--on-brand);
  border-radius:var(--r-pill); padding:.1rem .8rem; font-size:var(--t-sm); font-weight:600; }
.offer__title{ font-size:var(--t-md); margin:0; line-height:1.5; }
.offer__lead{ margin:0; color:var(--ink-soft); font-size:var(--t-sm); }
.offer__price{ margin:0; font-size:var(--t-md); display:flex; gap:.6rem; align-items:baseline; }
.offer__price b{ color:var(--brand-deep); }
.offer__text{ margin:0; font-size:var(--t-sm); color:var(--ink-soft); }
.offer__meta{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.25rem;
  font-size:var(--t-xs); color:var(--ink-soft); }
.offer__terms{ margin:0; font-size:var(--t-xs); color:var(--ink-faint); border-top:1px solid var(--line);
  padding-top:.6rem; }
.offer .btn{ margin-top:auto; align-self:flex-start; }

/* --------------------------------------------------------------- forms */
.form{ display:grid; gap:1rem; margin-top:1.25rem; }
.field{ display:grid; gap:.4rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label{ font-size:var(--t-sm); font-weight:500; color:var(--ink); }
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:.8rem 1rem; font:inherit; font-size:var(--t-sm); color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ min-height:auto; resize:vertical; line-height:1.7; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgb(66 153 207 / .22);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-faint); }
.field--error input,.field--error select,.field--error textarea{ border-color:var(--bad); }
.field__hint{ font-size:var(--t-xs); color:var(--ink-faint); }
.field__err{ font-size:var(--t-xs); color:var(--bad); }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }

/* a clock as hour · minute · ص/م — a native time input follows the browser's
   locale, which is not always the clinic's */
.timepick{ display:grid; grid-template-columns:1fr auto 1fr 1fr; gap:.4rem; align-items:center; }
.timepick select{ min-width:0; text-align:center; }
.timepick__sep{ font-weight:600; color:var(--ink-faint); }

/* a date as three dropdowns: day · month · year, no calendar grid to page through */
.datepick{ display:grid; grid-template-columns:5.5rem 1fr 6rem; gap:.5rem; }
.datepick select{ min-width:0; }
@media (max-width:420px){ .datepick{ grid-template-columns:1fr 1fr; }
  .datepick__m{ grid-column:span 2; order:-1; } }

/* ---- required / optional ------------------------------------------------
   The marker is driven by the control's own `required` attribute rather than
   written into each label, so it can never disagree with what the server
   actually enforces. `.field--plain` opts a field out (checkboxes, toggles). */
.field > label{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.field > label::after{
  font-size:.6875rem; font-weight:500; line-height:1.7; letter-spacing:.01em;
  padding:0 .5rem; border-radius:var(--r-pill); white-space:nowrap;
}
:root{ --lbl-req:"Required"; --lbl-opt:"Optional"; }
[dir="rtl"]{ --lbl-req:"مطلوب"; --lbl-opt:"اختياري"; }

.field:has([required]) > label::after{
  content:var(--lbl-req); color:var(--brand-deep); background:var(--brand-soft);
}
.field:has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):not(:has([required])) > label::after{
  content:var(--lbl-opt); color:var(--ink-faint); background:var(--tint);
  border:1px solid var(--line);
}
.field--plain > label::after{ content:none !important; }

/* ------------------------------------------------------- booking form */
.booking{ max-width:52rem; margin-inline:auto; display:grid; gap:1.25rem; }
.bstep{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.3rem,2.6vw,2rem); }
.bstep__head{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.bstep__no{ width:30px; height:30px; border-radius:50%; background:var(--brand-deep); color:#fff;
  display:grid; place-items:center; font-size:var(--t-sm); font-weight:600; flex-shrink:0; }
.bstep__t{ font-size:var(--t-lg); margin:0; }

.days{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(72px,1fr); gap:.5rem;
  overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory; }
.day{ scroll-snap-align:start; display:grid; gap:.1rem; justify-items:center; padding:.7rem .4rem;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); min-height:76px;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.day small{ font-size:var(--t-xs); color:var(--ink-faint); }
.day b{ font-size:1.15rem; font-family:var(--f-display); }
.day:hover:not(:disabled){ border-color:var(--brand); }
.day--off{ opacity:.4; cursor:not-allowed; }
.day.is-on{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.day.is-on small{ color:rgba(255,255,255,.8); }

.times{ display:flex; flex-wrap:wrap; gap:.5rem; min-height:52px; align-items:center; }
.time{ padding:.6rem 1.05rem; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--paper);
  font-size:var(--t-sm); transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.time:hover{ border-color:var(--brand); }
.time.is-on{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.times .spinner{ font-size:var(--t-sm); color:var(--ink-faint); }

.bsummary{ background:var(--tint); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:.9rem 1.1rem; font-size:var(--t-sm); margin-bottom:1rem; }
.bsummary b{ color:var(--brand-deep); }

/* ------------------------------------------------------------ auth box */
.authbox{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem); align-items:center; }
.authbox__panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.5rem); box-shadow:var(--sh-soft); }
.authbox__foot{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; align-items:center; }
@media (max-width:900px){ .authbox{ grid-template-columns:1fr; } .authbox__aside{ display:none; } }


/* ------------------------------------------------- long-option guard
   A <select> reports the width of its widest <option> as its min-content
   size. Inside a grid or flex parent that inflates the whole column, which
   is what pushed the booking form past the viewport. Every form wrapper
   gets min-width:0 so the track is free to shrink, and controls are capped
   to their container, with long option text truncated instead of pushing. */
.booking, .booking > *, .bstep, .form, .field, .field-row, .field-row > * { min-width: 0; }
.field select, .field input, .field textarea, .toolbar select, .toolbar input { max-width: 100%; }
.field select { text-overflow: ellipsis; }
/* the day strip scrolls inside its own box */
.days { max-width: 100%; }

/* ------------------------------------------------- account invitation */
.acct-cta{
  display:grid; grid-template-columns:1.4fr .6fr; gap:clamp(1.25rem,3vw,2.5rem); align-items:center;
  background:var(--tint); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,2rem); margin-bottom:1.25rem; max-width:52rem; margin-inline:auto;
}
.acct-cta h2{ font-size:var(--t-lg); margin-bottom:.5rem; }
.acct-cta p{ color:var(--ink-soft); font-size:var(--t-sm); margin-bottom:.75rem; }
.acct-cta ul{ display:grid; gap:.45rem; }
.acct-cta li{ display:flex; gap:.55rem; align-items:flex-start; font-size:var(--t-sm); }
.acct-cta li .ic{ width:16px; height:16px; stroke:var(--brand-deep); flex-shrink:0; margin-top:.3rem; }
.acct-cta__note{ margin:.9rem 0 0; font-size:var(--t-xs); color:var(--brand-deep); }
.acct-cta__actions{ display:grid; gap:.75rem; justify-items:center; }
.acct-cta__actions .btn{ width:100%; }
@media (max-width:760px){ .acct-cta{ grid-template-columns:1fr; } }

/* ------------------------------------------------------- form polish */
/* a field whose neighbour carries a hint must not drift out of line */
.field{ align-content:start; }
.field-row{ align-items:start; }
.req{ color:var(--brand-deep); font-weight:600; }

/* phone input with a country picker, joined into one control */
.phone{
  display:flex; align-items:stretch; background:var(--paper);
  border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.phone:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px rgb(66 153 207 / .22); }
.phone__cc{
  /* the widest <option> would otherwise set this control's size */
  flex:0 0 128px; width:128px; min-width:0; max-width:128px; background:var(--tint);
  border:0!important; border-radius:0!important; box-shadow:none!important;
  padding-inline:.6rem; font-size:var(--t-sm); text-overflow:ellipsis;
  border-inline-end:1px solid var(--line-2)!important;
}
.phone__num{
  flex:1 1 auto; min-width:0; border:0!important; border-radius:0!important;
  box-shadow:none!important; background:transparent;
}
.phone__cc:focus, .phone__num:focus{ outline:0; }
@media (max-width:420px){ .phone__cc{ flex-basis:104px; width:104px; max-width:104px; font-size:var(--t-xs); } }