/* ═══════════════════════════════════════════════════════════
   AYAD — Luxury Dental Care
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root{
  /* palette */
  --ink:        #08111a;
  --ink-2:      #0b1620;
  --navy:       #1e2932;
  --navy-2:     #273858;
  --royal:      #0d3f8b;
  --teal:       #205875;
  --blue:       #2f85a8;
  --azure:      #4277ae;
  --sky:        #88bdd2;
  --gold:       #ddb535;
  --gold-lt:    #f3e0a3;
  --gold-dp:    #a8801f;
  --porcelain:  #eff0f0;
  --white:      #ffffff;

  --paper:      var(--ink);
  --text:       #d7dde2;
  --text-dim:   #8fa0ad;
  --line:       rgba(221,181,53,.20);
  --line-soft:  rgba(239,240,240,.10);
  --glass:      rgba(239,240,240,.032);

  /* type */
  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-ui:      'Jost', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --tr-lux: cubic-bezier(.22,1,.36,1);
  --tr-smooth: cubic-bezier(.65,.05,.36,1);

  --pad: clamp(1.25rem, 5vw, 6rem);
  --frame: clamp(10px, 1.4vw, 22px);
  --maxw: 1560px;
}

/* One modern Arabic family throughout; hierarchy comes from weight and scale,
   which is how Arabic typography does contrast. Swap --f-ar to change all three. */
html[lang="ar"]{
  --f-ar:      'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --f-display: var(--f-ar);
  --f-ui:      var(--f-ar);
  --f-body:    var(--f-ar);
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--paper)}
body{
  font-family:var(--f-body);
  font-weight:300;
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%;height:auto}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--teal),var(--gold-dp));border-radius:9px}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ── TYPE ─────────────────────────────────────────────────── */
.display{
  font-family:var(--f-display);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.022em;
  color:var(--porcelain);
}
/* Arabic display needs a taller line box than Latin: the script's ink height runs
   well past the em box, so a Latin-tight 0.98 collides line-to-line. */
html[lang="ar"] .display{line-height:1.46;letter-spacing:0;font-weight:300}

.h2{font-size:clamp(2.1rem,4.6vw,4.6rem)}
h3{font-family:var(--f-display);font-weight:400;letter-spacing:-.01em}
html[lang="ar"] h3{letter-spacing:0}

.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--f-ui);font-size:.68rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.6rem;
}
html[lang="ar"] .eyebrow{letter-spacing:normal;font-size:.8rem}
.eyebrow .rule{display:block;width:clamp(28px,4vw,64px);height:1px;background:linear-gradient(90deg,transparent,var(--gold));flex:none}
html[dir="rtl"] .eyebrow .rule{background:linear-gradient(-90deg,transparent,var(--gold))}
.eyebrow .num{font-variant-numeric:tabular-nums;opacity:.55}

.lead{font-size:clamp(1rem,1.25vw,1.18rem);color:var(--text);max-width:56ch;line-height:1.8}
html[lang="ar"] .lead{line-height:2.05}

/* ── LAYOUT ───────────────────────────────────────────────── */
.section{padding-block:clamp(6rem,13vh,11rem);padding-inline:var(--pad);position:relative}
.sec-head{max-width:var(--maxw);margin-inline:auto;margin-bottom:clamp(3rem,7vw,6rem)}
.sec-head .h2{max-width:19ch}
.sec-head--split{display:flex;flex-wrap:wrap;gap:2.5rem 4rem;align-items:flex-end;justify-content:space-between}
.sec-head--split .h2{max-width:15ch}
.sec-head__note{max-width:34ch;color:var(--text-dim);font-size:.98rem;line-height:1.85;padding-bottom:.6rem}

/* ── OVERLAYS ─────────────────────────────────────────────── */
.grain{
  position:fixed;inset:-120%;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}   16%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-3%)}    50%{transform:translate(-2%,-2%)}
  66%{transform:translate(3%,1%)}     83%{transform:translate(1%,3%)}
}

.edge-frame{
  position:fixed;inset:var(--frame);z-index:8500;pointer-events:none;
  border:1px solid rgba(221,181,53,.16);
  mix-blend-mode:screen;
}
.edge-frame::before,.edge-frame::after{
  content:'';position:absolute;width:14px;height:14px;border:1px solid rgba(221,181,53,.4);
}
.edge-frame::before{top:-1px;inset-inline-start:-1px;border-inline-end:0;border-bottom:0}
.edge-frame::after{bottom:-1px;inset-inline-end:-1px;border-inline-start:0;border-top:0}

.scroll-progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:8600;pointer-events:none}
.scroll-progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--teal),var(--gold),var(--gold-lt));
  box-shadow:0 0 18px rgba(221,181,53,.55);
}

/* ── CURSOR ───────────────────────────────────────────────── */
.cursor{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;mix-blend-mode:difference;opacity:0}
.cursor__ring{
  position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);transition:width .35s var(--tr-lux),height .35s var(--tr-lux),margin .35s var(--tr-lux),border-color .35s;
}
.cursor__dot{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#fff}
.cursor__label{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--f-ui);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;opacity:0;transition:opacity .3s;
}
.cursor.is-hover .cursor__ring{width:74px;height:74px;margin:-37px 0 0 -37px;border-color:rgba(255,255,255,.9)}
.cursor.is-hover .cursor__dot{opacity:0}
.cursor.is-label .cursor__ring{width:88px;height:88px;margin:-44px 0 0 -44px}
.cursor.is-label .cursor__label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ── PRELOADER ────────────────────────────────────────────── */
/* the curtain strips ARE the loader background, so they can slide away to reveal the page */
.loader{position:fixed;inset:0;z-index:9800;display:grid;place-items:center;overflow:hidden}
.loader__inner{position:relative;z-index:2;width:min(84vw,420px);text-align:center}
.loader__mark{width:clamp(90px,14vw,140px);margin:0 auto 1.6rem;color:var(--gold)}
.loader__mark svg{width:100%;height:auto;display:block}
.loader__mark svg path{stroke-width:2.6;vector-effect:non-scaling-stroke}
.loader__word{width:min(64vw,270px);margin:0 auto .85rem;opacity:0}
/* the founder's line, tucked under the wordmark as part of the same lockup —
   it fades in on the word's tween (see main.js), not on its own */
.loader__by{opacity:0;text-align:center;margin:0 auto 1.5rem;
  font-family:var(--f-ui);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim)}
html[lang="ar"] .loader__by{letter-spacing:normal;font-size:.76rem;text-transform:none}
.loader__meta{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--f-ui);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.8rem}
html[lang="ar"] .loader__meta{letter-spacing:normal;font-size:.78rem}
.loader__count{color:var(--gold);font-variant-numeric:tabular-nums}
.loader__bar{height:1px;background:rgba(239,240,240,.14);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--gold))}
.loader__curtain{position:absolute;inset:0;display:flex;z-index:1;pointer-events:none}
.loader__curtain i{flex:1;background:var(--ink);transform:translateY(0)}
body.is-loading{overflow:hidden}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{
  --bh:3.4rem;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  height:var(--bh);padding-inline:1.9rem;overflow:hidden;
  font-family:var(--f-ui);font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--gold);color:var(--ink);isolation:isolate;
  transition:color .5s var(--tr-lux),border-color .5s;
}
html[lang="ar"] .btn{letter-spacing:normal;font-size:.86rem;text-transform:none}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,var(--gold-dp) -12%,var(--gold) 26%,var(--gold-lt) 56%,var(--gold) 88%);
  transform:scaleY(1);transform-origin:bottom;transition:transform .55s var(--tr-lux);
}
.btn:hover::before{transform:scaleY(0)}
.btn:hover{color:var(--gold)}
.btn--ghost{border-color:rgba(239,240,240,.28);color:var(--porcelain)}
.btn--ghost::before{background:var(--porcelain);transform:scaleY(0);transform-origin:top}
.btn--ghost:hover::before{transform:scaleY(1)}
.btn--ghost:hover{color:var(--ink);border-color:var(--porcelain)}
.btn--lg{--bh:4rem;padding-inline:2.6rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.9rem;margin-top:2.6rem;
  font-family:var(--f-ui);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
html[lang="ar"] .link-arrow{letter-spacing:normal;font-size:.85rem;text-transform:none}
.link-arrow i{display:block;width:46px;height:1px;background:var(--gold);transition:width .5s var(--tr-lux)}
.link-arrow:hover i{width:76px}

/* The second number is the one the centre answers on WhatsApp. It is drawn
   in the site's own colours, not WhatsApp green — the same decision already
   made for the Waze arrow and the Qi mark. */
.btn--wa{border-color:rgba(239,240,240,.28);color:var(--porcelain)}
.btn--wa::before{background:var(--porcelain);transform:scaleY(0);transform-origin:top}
.btn--wa:hover::before{transform:scaleY(1)}
.btn--wa:hover{color:var(--ink);border-color:var(--porcelain)}
.btn--wa svg{width:17px;height:17px;fill:currentColor;flex:none}

/* ── NAV ──────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;inset-inline:0;z-index:8000;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(1.1rem,2.2vw,1.9rem) calc(var(--pad) - .3rem);
  transition:padding .5s var(--tr-lux),background .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding-block:.85rem;background:rgba(8,17,26,.72);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav.is-hidden{transform:translateY(-102%)}
.nav__brand{display:flex;flex-direction:column;align-items:flex-start;gap:.28rem}
.nav__brand img{width:clamp(112px,11vw,158px);height:auto;transition:width .5s var(--tr-lux)}
.nav.is-stuck .nav__brand img{width:clamp(98px,9vw,128px)}
.nav__by{font-family:var(--f-ui);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);white-space:nowrap;transition:color .4s}
html[lang="ar"] .nav__by{letter-spacing:normal;font-size:.66rem;text-transform:none}
.nav__brand:hover .nav__by{color:var(--gold)}

.nav__links{display:flex;gap:clamp(1.1rem,2.4vw,2.5rem)}
.nav__links a{
  position:relative;font-family:var(--f-ui);font-size:.7rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);
  padding-block:.4rem;transition:color .4s;
}
html[lang="ar"] .nav__links a{letter-spacing:normal;font-size:.9rem;text-transform:none}
.nav__links a::after{
  content:'';position:absolute;bottom:0;inset-inline-start:0;width:0;height:1px;background:var(--gold);
  transition:width .45s var(--tr-lux);
}
.nav__links a:hover{color:var(--porcelain)}
.nav__links a:hover::after,.nav__links a.is-active::after{width:100%}
.nav__links a.is-active{color:var(--gold)}

.nav__actions{display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.2rem)}
.lang{
  display:flex;align-items:center;gap:.55rem;height:2.35rem;padding-inline:.9rem;
  border:1px solid rgba(239,240,240,.18);border-radius:2rem;
  font-family:var(--f-ui);font-size:.68rem;letter-spacing:.14em;
  transition:border-color .4s,background .4s;
}
.lang:hover{border-color:var(--gold);background:rgba(221,181,53,.06)}
.lang__opt{color:var(--text-dim);transition:color .35s}
.lang__opt.is-on{color:var(--gold)}
.lang__sep{width:1px;height:12px;background:rgba(239,240,240,.2)}
.nav__cta{--bh:2.6rem;padding-inline:1.35rem;font-size:.66rem}
html[lang="ar"] .nav__cta{font-size:.8rem}

.burger{display:none;width:2.5rem;height:2.5rem;position:relative}
.burger i{position:absolute;inset-inline:.5rem;height:1px;background:var(--porcelain);transition:transform .45s var(--tr-lux),opacity .3s}
.burger i:nth-child(1){top:1rem}
.burger i:nth-child(2){top:1.45rem}
.burger.is-open i:nth-child(1){transform:translateY(.22rem) rotate(45deg)}
.burger.is-open i:nth-child(2){transform:translateY(-.22rem) rotate(-45deg)}

/* ── MOBILE MENU ──────────────────────────────────────────── */
/* a column, not an absolutely-placed pair: the link list grew with the site and
   a pinned footer eventually walks into the last link */
.menu{position:fixed;inset:0;z-index:7900;visibility:hidden;pointer-events:none;
  display:flex;flex-direction:column}
.menu.is-open{visibility:visible;pointer-events:auto}
.menu__bg{position:absolute;inset:0;background:linear-gradient(160deg,var(--ink),#0f1f2b 60%,var(--teal));transform:scaleY(0);transform-origin:top;transition:transform .8s var(--tr-lux)}
.menu.is-open .menu__bg{transform:scaleY(1)}
/* `safe center` keeps the first link reachable if the list ever outgrows the
   column; browsers that don't know it fall back to the plain `center` above */
.menu__links{position:relative;flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:.2rem;
  justify-content:center;justify-content:safe center;
  padding:clamp(4.5rem,12vh,7rem) var(--pad) 1rem}
.menu__links a{
  font-family:var(--f-display);font-size:clamp(1.05rem,min(7vw,3.5vh),3.4rem);font-weight:300;color:var(--porcelain);
  opacity:0;transform:translateY(28px);transition:opacity .6s var(--tr-lux),transform .6s var(--tr-lux),color .3s;
  padding-block:.22rem;
}
.menu.is-open .menu__links a{opacity:1;transform:none}
.menu__links a:hover{color:var(--gold)}
.menu__foot{position:relative;flex:none;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;
  padding:0 var(--pad) clamp(1.6rem,5vh,3.2rem);
  font-family:var(--f-ui);font-size:.78rem;letter-spacing:.06em;color:var(--text-dim);opacity:0;transition:opacity .5s .35s}
.menu.is-open .menu__foot{opacity:1}
.menu__wa{display:inline-flex;align-items:center;gap:.5rem}
.menu__wa svg{width:14px;height:14px;fill:currentColor;flex:none;color:var(--gold)}

/* ── SOCIAL ───────────────────────────────────────────────── */
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.social{display:flex;align-items:center}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-dim);transition:color .4s var(--tr-lux),border-color .4s;
}
.social svg{height:auto;fill:currentColor;display:block;flex:none}

/* whatever order the markup ends up in, the number people message comes first */
.social__wa{order:-1}

/* nav — bare glyphs; the ring only draws itself on approach */
.social--nav{gap:clamp(.35rem,.8vw,.6rem)}
.social--nav a{position:relative;width:2.1rem;height:2.1rem;border-radius:50%}
.social--nav svg{width:15px}
.social--nav a::before{
  content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--line);
  transform:scale(.62);opacity:0;transition:transform .45s var(--tr-lux),opacity .4s;
}
.social--nav a:hover{color:var(--gold)}
.social--nav a:hover::before{transform:scale(1);opacity:1}
.nav__div{display:block;width:1px;height:18px;background:rgba(239,240,240,.16);flex:none}

/* directions — one pin, two navigators. Which app a visitor drives with is
   theirs to pick, so the button opens a choice instead of guessing. The ring
   and the sizing are the social glyphs' so the row reads as one set. */
.navmap{position:relative;flex:none}
.navmap__btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;border-radius:50%;padding:0;
  background:none;border:0;cursor:pointer;color:var(--text-dim);
  transition:color .4s var(--tr-lux);
}
.navmap__btn svg{width:15px;height:auto;fill:currentColor;display:block;flex:none}
.navmap__btn::before{
  content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--line);
  transform:scale(.62);opacity:0;transition:transform .45s var(--tr-lux),opacity .4s;
}
.navmap__btn:hover,.navmap.is-open .navmap__btn{color:var(--gold)}
.navmap__btn:hover::before,.navmap.is-open .navmap__btn::before{transform:scale(1);opacity:1}
/* inset-inline-end keeps it inside the bar in both directions */
.navmap__pop{
  position:absolute;top:calc(100% + .75rem);inset-inline-end:0;min-width:11.5rem;
  display:flex;flex-direction:column;padding:.4rem;z-index:5;
  background:rgba(8,17,26,.94);border:1px solid var(--line-soft);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .35s,transform .45s var(--tr-lux),visibility .35s;
}
.navmap.is-open .navmap__pop{opacity:1;visibility:visible;transform:none}
.navmap__pop a{
  display:flex;align-items:center;gap:.65rem;padding:.62rem .7rem;white-space:nowrap;
  font-family:var(--f-ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);transition:color .35s,background-color .35s;
}
html[lang="ar"] .navmap__pop a{letter-spacing:normal;font-size:.85rem;text-transform:none}
.navmap__pop a svg{width:15px;height:auto;fill:currentColor;flex:none;color:var(--gold)}
.navmap__pop a:hover{color:var(--porcelain);background:rgba(239,240,240,.05)}


/* mobile menu — larger targets, sat under the phone and email */
.social--menu{gap:.8rem;margin-top:1.2rem}
.social--menu a{width:2.7rem;height:2.7rem;border:1px solid var(--line-soft);border-radius:50%;color:var(--porcelain)}
.social--menu svg{width:16px}
.social--menu a:hover{color:var(--gold);border-color:var(--gold)}

/* footer — named pills, the same gold sweep as the buttons */
.foot__social{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.foot__follow{font-family:var(--f-ui);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:.75}
html[lang="ar"] .foot__follow{letter-spacing:normal;font-size:.78rem;text-transform:none}
.social--foot{gap:.55rem;flex-wrap:wrap}

/* Google's preferred-sources deeplink, under the social row. Quieter than the
   buttons above it: this is a favour being asked, not a place to go. */
.foot__pref{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:.5rem;
  font-family:var(--f-ui);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);transition:color .4s var(--tr-lux);
}
html[lang="ar"] .foot__pref{letter-spacing:normal;font-size:.76rem;text-transform:none}
.foot__pref i{display:block;width:26px;height:1px;background:currentColor;opacity:.55;transition:width .5s var(--tr-lux)}
.foot__pref:hover{color:var(--gold)}
.foot__pref:hover i{width:44px}
.social--foot a{
  gap:.6rem;height:2.5rem;padding-inline:1.05rem;
  border:1px solid var(--line-soft);border-radius:2rem;
  position:relative;overflow:hidden;isolation:isolate;
}
.social--foot svg{width:15px}
.social__name{font-family:var(--f-ui);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase}
.social--foot a::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,var(--gold-dp),var(--gold) 45%,var(--gold-lt));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--tr-lux);
}
html[dir="rtl"] .social--foot a::before{transform-origin:right}
.social--foot a:hover{color:var(--ink);border-color:transparent}
.social--foot a:hover::before{transform:scaleX(1)}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* One looping clip instead of the four-photograph crossfade. The poster is the
   video's own first frame, so the swap from still to moving is invisible; under
   prefers-reduced-motion main.js never starts it and the poster is what stays. */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;will-change:transform;
  background:var(--ink);
}
/* the copy column must stay legible over any frame of the photography,
   so the scrim is heaviest exactly where the text sits */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,17,26,.88) 0%,rgba(8,17,26,.34) 30%,rgba(8,17,26,.66) 66%,rgba(8,17,26,.97) 100%),
    linear-gradient(90deg,rgba(8,17,26,.92) 0%,rgba(8,17,26,.72) 30%,rgba(8,17,26,.28) 62%,rgba(32,88,117,.30) 100%);
}
html[dir="rtl"] .hero__scrim{
  background:
    linear-gradient(180deg,rgba(8,17,26,.88) 0%,rgba(8,17,26,.34) 30%,rgba(8,17,26,.66) 66%,rgba(8,17,26,.97) 100%),
    linear-gradient(-90deg,rgba(8,17,26,.92) 0%,rgba(8,17,26,.72) 30%,rgba(8,17,26,.28) 62%,rgba(32,88,117,.30) 100%);
}
.hero__vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 35%,rgba(8,17,26,.75) 100%)}

.hero__content{
  position:relative;max-width:var(--maxw);width:100%;margin-inline:auto;
  padding-inline:var(--pad);padding-bottom:clamp(2.4rem,7vh,4.6rem);padding-top:clamp(8rem,18vh,12rem);
}
.hero__eyebrow{margin-bottom:clamp(1.2rem,3vh,2.2rem)}
.hero__title{
  font-size:clamp(2.9rem,8.4vw,9rem);
  max-width:14ch;margin-bottom:clamp(1.4rem,3.4vh,2.4rem);
}
html[lang="ar"] .hero__title{font-size:clamp(2.4rem,6.4vw,6.8rem);max-width:13ch}
.hero__title .w-i{background:linear-gradient(180deg,#fff 30%,#c9d6de 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{max-width:50ch;color:#bcc8d1;font-size:clamp(.94rem,1.15vw,1.08rem);line-height:1.85}
html[lang="ar"] .hero__sub{line-height:2.1}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(1.8rem,4vh,2.8rem)}

.hero__bar{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  max-width:var(--maxw);width:100%;margin-inline:auto;
  padding:1.4rem var(--pad) clamp(1.4rem,4vh,2.4rem);
  border-top:1px solid var(--line-soft);
  font-family:var(--f-ui);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);
}
html[lang="ar"] .hero__bar{letter-spacing:normal;font-size:.8rem;text-transform:none}
.hero__scroll{display:flex;align-items:center;gap:.9rem;color:var(--gold)}
.hero__line{display:block;width:64px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);position:relative;overflow:hidden}
html[dir="rtl"] .hero__line{background:linear-gradient(-90deg,var(--gold),transparent)}
.hero__line::after{content:'';position:absolute;top:0;inset-inline-start:0;width:22px;height:100%;background:var(--gold-lt);animation:sweep 2.2s var(--tr-smooth) infinite}
@keyframes sweep{0%{transform:translateX(-24px);opacity:0}30%{opacity:1}100%{transform:translateX(64px);opacity:0}}
html[dir="rtl"] .hero__line::after{animation-name:sweepR}
@keyframes sweepR{0%{transform:translateX(24px);opacity:0}30%{opacity:1}100%{transform:translateX(-64px);opacity:0}}
.hero__meta{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.hero__meta a:hover{color:var(--gold)}
.hero__wa{display:inline-flex;align-items:center;gap:.55rem}
.hero__wa svg{width:14px;height:14px;fill:currentColor;flex:none;color:var(--gold)}
@media (max-width:680px){ .hero__meta .hero__wa:last-of-type{display:none} }

/* ── MARQUEE ──────────────────────────────────────────────── */
.marquee{
  position:relative;overflow:hidden;border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(32,88,117,.10),rgba(221,181,53,.05),rgba(32,88,117,.10));
  padding-block:clamp(.9rem,1.8vw,1.35rem);
}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__group{display:flex;align-items:center;gap:clamp(1.4rem,3vw,3rem);padding-inline:clamp(.7rem,1.5vw,1.5rem);flex:none}
.marquee__group span{
  font-family:var(--f-display);font-size:clamp(1.05rem,2.2vw,2rem);font-weight:300;
  color:var(--porcelain);white-space:nowrap;letter-spacing:.01em;
}
.marquee__group i{color:var(--gold);font-size:.7em;font-style:normal}

/* ── ABOUT ────────────────────────────────────────────────── */
.about__grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2.5rem,6vw,6.5rem);align-items:center;
}
.about__visual{position:relative;aspect-ratio:1/1.06}
.about__img{position:absolute;overflow:hidden;background:var(--navy)}
.about__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.about__img--a{inset-inline-start:0;top:0;width:70%;aspect-ratio:4/5;z-index:2;box-shadow:0 40px 100px -30px rgba(0,0,0,.75)}
.about__img--b{inset-inline-end:0;bottom:0;width:52%;aspect-ratio:3/4;border:1px solid var(--line)}
/* the corner opposite the lower image is always clear, in either direction */
.about__badge{
  position:absolute;top:2%;inset-inline-end:1%;
  width:clamp(58px,6vw,86px);z-index:3;opacity:.92;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.6));
}
.about__badge img{width:100%}

.about__body .h2{max-width:16ch;margin-bottom:1.8rem}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 1.2rem;margin-top:clamp(2.4rem,5vw,3.4rem);
  border-top:1px solid var(--line-soft);padding-top:clamp(1.8rem,4vw,2.6rem)}
.stats li{display:flex;flex-direction:column;gap:.3rem}
.stats b{
  font-family:var(--f-display);font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:300;line-height:1;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.stats span{font-family:var(--f-ui);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
html[lang="ar"] .stats span{letter-spacing:normal;font-size:.82rem;text-transform:none}

/* ── PURPOSE ──────────────────────────────────────────────── */
.purpose{overflow:hidden;isolation:isolate}
.purpose::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 70% at 50% 0%,rgba(32,88,117,.20),transparent 70%);
}
.purpose__watermark{
  position:absolute;top:50%;inset-inline-end:-8%;width:min(48vw,620px);
  transform:translateY(-50%);opacity:.028;pointer-events:none;
}
.purpose__watermark img{width:100%}
.pillars{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
}
.pillar{
  position:relative;background:var(--paper);padding:clamp(2rem,3.4vw,3.4rem);
  transition:background .6s var(--tr-lux);overflow:hidden;
}
.pillar::before{
  content:'';position:absolute;inset:0;z-index:0;opacity:0;
  background:linear-gradient(155deg,rgba(32,88,117,.22),rgba(221,181,53,.05));
  transition:opacity .6s var(--tr-lux);
}
.pillar:hover::before{opacity:1}
.pillar>*{position:relative;z-index:1}
.pillar__n{
  display:block;font-family:var(--f-display);font-size:.9rem;letter-spacing:.3em;
  color:var(--gold);margin-bottom:1.5rem;
}
.pillar h3{font-size:clamp(1.5rem,2.4vw,2.2rem);color:var(--porcelain);margin-bottom:1rem}
.pillar p{color:var(--text-dim);font-size:.98rem;line-height:1.85}
html[lang="ar"] .pillar p{line-height:2.05}
.pillar__list{display:flex;flex-direction:column;gap:.8rem;margin-top:.3rem}
.pillar__list li{
  position:relative;padding-inline-start:1.3rem;color:var(--text-dim);font-size:.95rem;
}
.pillar__list li::before{
  content:'';position:absolute;inset-inline-start:0;top:.72em;width:6px;height:6px;
  background:var(--gold);transform:rotate(45deg);
}

/* ── SERVICES ─────────────────────────────────────────────── */
.services{position:relative}
.svc{border-top:1px solid var(--line-soft)}
.svc__row{
  position:relative;isolation:isolate;display:flex;align-items:center;gap:clamp(1rem,3vw,2.6rem);
  padding-block:clamp(1.1rem,2.4vw,1.7rem);border-bottom:1px solid var(--line-soft);
  cursor:pointer;transition:padding-inline .6s var(--tr-lux);
}
.svc__row::before{
  content:'';position:absolute;inset-inline:0;top:0;bottom:0;z-index:-1;
  background:linear-gradient(90deg,rgba(221,181,53,.10),transparent 65%);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--tr-lux);
}
html[dir="rtl"] .svc__row::before{
  background:linear-gradient(-90deg,rgba(221,181,53,.10),transparent 65%);
  transform-origin:right;
}
.svc__row:hover::before{transform:scaleX(1)}
.svc__row:hover{padding-inline-start:1.4rem}
.svc__i{
  font-family:var(--f-ui);font-size:.66rem;letter-spacing:.2em;color:var(--gold);
  min-width:2.4rem;font-variant-numeric:tabular-nums;opacity:.7;
}
.svc__t{
  flex:1;font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.35rem,3.4vw,2.9rem);line-height:1.2;color:var(--porcelain);
  transition:color .5s;
}
html[lang="ar"] .svc__t{font-size:clamp(1.2rem,2.9vw,2.4rem)}
.svc__row:hover .svc__t{color:var(--gold-lt)}
.svc__arrow{
  width:34px;height:1px;background:currentColor;position:relative;flex:none;
  color:var(--text-dim);
  opacity:0;transform:translateX(-14px);
  transition:opacity .5s,transform .5s var(--tr-lux),color .5s;
}
html[dir="rtl"] .svc__arrow{transform:translateX(14px)}
.svc__arrow::after{
  content:'';position:absolute;right:0;top:50%;width:8px;height:8px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
html[dir="rtl"] .svc__arrow::after{right:auto;left:0;transform:translateY(-50%) rotate(-135deg)}
.svc__row:hover .svc__arrow{opacity:1;transform:none;color:var(--gold)}
.svc__row--more .svc__t{font-style:italic;color:var(--text-dim)}

/* Every row carries its own line of copy where the hovering photograph used to
   be. It is legible at rest and only lifts on hover, rather than hiding the
   substance behind an interaction the reader has to find first. */
.svc__wrap{position:relative;max-width:var(--maxw);margin-inline:auto}
.svc__d{
  flex:none;width:clamp(190px,21vw,330px);
  font-family:var(--f-ui);font-size:.79rem;font-weight:300;line-height:1.75;
  color:var(--text-dim);opacity:.62;
  transition:opacity .55s var(--tr-lux),color .55s var(--tr-lux);
}
html[lang="ar"] .svc__d{font-size:.85rem;line-height:2.05;letter-spacing:normal}
.svc__row:hover .svc__d{opacity:1;color:var(--porcelain)}
.svc__row--more .svc__d{font-style:italic}

/* Narrow: the copy drops to its own line under the title — no hover to spend it
   on, and the row is too tight to hold two columns of text. */
@media (max-width:900px){
  .svc__row{flex-wrap:wrap;row-gap:0;align-items:baseline}
  .svc__arrow{order:2}
  .svc__d{
    order:3;flex:1 0 100%;width:auto;opacity:.82;
    margin-top:.5rem;padding-inline-start:2.4rem;font-size:.77rem;
  }
}

/* ── CLINICS (horizontal) ─────────────────────────────────── */
.clinics{position:relative;background:linear-gradient(180deg,var(--ink),#0a1a24 50%,var(--ink))}
/* the rail itself always runs left→right so the track's start edge is predictable
   in both directions; only the copy inside each panel flips. */
.clinics__pin{height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;position:relative;direction:ltr}
.clinics__head{
  position:absolute;top:clamp(4.6rem,11vh,7rem);inset-inline:var(--pad);z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
html[dir="rtl"] .clinics__head{direction:rtl}
.clinics__head .eyebrow{margin:0}
.clinics__bar{width:min(38vw,320px);height:1px;background:rgba(239,240,240,.14);overflow:hidden}
.clinics__bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--gold))}

.clinics__track{display:flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);padding-inline:var(--pad);width:max-content;will-change:transform}
.clinic{
  flex:none;width:min(88vw,1300px);
  display:grid;grid-template-columns:1.4fr .85fr;align-items:center;gap:clamp(1.6rem,3.4vw,3.4rem);
}
html[dir="rtl"] .clinic{direction:rtl}
.clinic--intro{
  width:min(62vw,620px);display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
  border-inline-start:1px solid var(--line);padding-inline-start:clamp(1.4rem,3vw,2.6rem);
}
.clinic--intro .h2{max-width:12ch}
.clinic--intro p{color:var(--text-dim);max-width:38ch;line-height:1.85}
.clinic__hint{font-family:var(--f-ui);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:.6rem}
html[lang="ar"] .clinic__hint{letter-spacing:normal;font-size:.82rem;text-transform:none}

.clinic__fig{position:relative;overflow:hidden;aspect-ratio:4/3;max-height:62vh;background:var(--navy);border:1px solid var(--line-soft)}
.clinic__fig::after{content:'';position:absolute;inset:0;background:linear-gradient(200deg,transparent 40%,rgba(8,17,26,.5))}
.clinic__fig img{width:100%;height:100%;object-fit:cover}
.clinic__n{
  display:block;font-family:var(--f-ui);font-size:.68rem;letter-spacing:.3em;color:var(--gold);margin-bottom:1.1rem;
}
.clinic__txt h3{font-size:clamp(1.5rem,2.8vw,2.6rem);color:var(--porcelain);margin-bottom:1rem;line-height:1.15}
html[lang="ar"] .clinic__txt h3{line-height:1.4}
.clinic__txt p{color:var(--text-dim);font-size:.97rem;line-height:1.85;max-width:42ch}
.clinic__link{
  display:inline-flex;align-items:center;gap:.9rem;margin-top:clamp(1.1rem,2vw,1.8rem);
  font-family:var(--f-ui);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
html[lang="ar"] .clinic__link{letter-spacing:normal;font-size:.82rem;text-transform:none}
.clinic__link i{display:block;width:38px;height:1px;background:var(--gold);transition:width .5s var(--tr-lux)}
.clinic__link:hover i{width:70px}
html[lang="ar"] .clinic__txt p{line-height:2.05}

/* fallback when the section is not pinned (small screens / reduced motion):
   the same panels become a native horizontal swipe rail */
.clinics.is-flat .clinics__pin{
  height:auto;overflow:visible;display:block;
  padding-block:clamp(5rem,12vh,8rem) clamp(2.5rem,7vh,4.5rem);
}
.clinics.is-flat .clinics__head{
  position:static;padding-inline:var(--pad);margin-bottom:clamp(1.8rem,5vw,3rem);
}
.clinics.is-flat .clinics__bar{display:none}
.clinics.is-flat .clinics__track{
  width:auto;align-items:stretch;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:1.2rem;transform:none!important;
}
.clinics.is-flat .clinics__track::-webkit-scrollbar{height:3px}
.clinics.is-flat .clinics__track::-webkit-scrollbar-track{background:var(--line-soft)}
.clinics.is-flat .clinics__track::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.clinics.is-flat .clinic{scroll-snap-align:center;width:min(82vw,470px);align-content:center}
.clinics.is-flat .clinic--intro{width:min(82vw,420px);justify-content:center}

/* ── TECH ─────────────────────────────────────────────────── */
.tech__grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);
}
.tech__sticky{position:sticky;top:clamp(7rem,16vh,10rem)}
.tech__sticky .h2{max-width:12ch;margin-bottom:1.6rem}
.tech__note{color:var(--text-dim);max-width:34ch;font-size:.97rem;line-height:1.85}
.tech__mark{width:clamp(70px,8vw,110px);margin-top:clamp(2rem,4vw,3rem);opacity:.5}
.tech__mark img{width:100%;animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.tech__list{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.tcard{
  position:relative;background:var(--paper);display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);
  gap:clamp(1.2rem,2.4vw,2.2rem);padding:clamp(1.6rem,2.6vw,2.4rem);
  transition:background .6s var(--tr-lux);
}
.tcard::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold),var(--teal));
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--tr-lux);
}
.tcard:hover::before{transform:scaleY(1)}
.tcard:hover{background:rgba(32,88,117,.08)}
.tcard figure{overflow:hidden;aspect-ratio:3/4;background:var(--navy);border:1px solid var(--line-soft)}
.tcard figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.05);transition:filter .7s,transform 1.2s var(--tr-lux)}
.tcard:hover figure img{filter:none;transform:scale(1.05)}
.tcard__n{display:block;font-family:var(--f-ui);font-size:.64rem;letter-spacing:.3em;color:var(--gold);margin-bottom:.85rem}
.tcard h3{font-size:clamp(1.25rem,2vw,1.75rem);color:var(--porcelain);margin-bottom:.75rem}
.tcard p{color:var(--text-dim);font-size:.94rem;line-height:1.8;max-width:52ch}
html[lang="ar"] .tcard p{line-height:2}
.tcard__pts{margin-top:1rem;display:flex;flex-direction:column;gap:.45rem}
.tcard__pts li{position:relative;padding-inline-start:1.15rem;font-size:.87rem;color:var(--sky);opacity:.85}
.tcard__pts li::before{content:'';position:absolute;inset-inline-start:0;top:.65em;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}

/* ── BRAND MOMENT (the rosette, struck with a compass) ────────
   The dial is real construction geometry, not art: R=96 about (200,200)
   in a 400 viewBox, six circles of that radius on the rim, and the six
   petals their crossings cut out. Sizes below are all fractions of --rose
   so the ring, the labels and the traced mark stay locked together at
   every breakpoint — change --rose alone to resize the whole dial. */
.brand{position:relative;background:var(--ink)}
.brand__pin{
  position:relative;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.7rem,2vh,1.8rem);padding:clamp(1.5rem,5vh,3.5rem) var(--pad);
}
.brand__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 44% at 50% 46%,rgba(32,88,117,.40),transparent 72%),
    radial-gradient(24% 24% at 50% 46%,rgba(221,181,53,.11),transparent 74%);
}
.brand__eyebrow{margin:0;justify-content:center;position:relative;z-index:2}

.brand__stage{--rose:min(62svh,50vw);position:relative;z-index:2;flex:none;width:var(--rose)}
.rose{position:relative;width:var(--rose);height:var(--rose);color:var(--gold)}

/* the construction sits at 76% of the stage, leaving the outer band to the labels */
.rose__svg{position:absolute;inset:12%;overflow:visible;fill:none;stroke-linecap:round}
.rose__ring{stroke:rgba(221,181,53,.20);stroke-width:1}
.rose__base{stroke:rgba(221,181,53,.38);stroke-width:1.2}
.rose__c{stroke:rgba(136,189,210,.26);stroke-width:.9}
.rose__p{stroke:var(--gold);stroke-width:1.3;fill:var(--gold);fill-opacity:.11}
.rose__n{fill:var(--gold-lt);stroke:none}
.rose__arm{stroke:var(--gold);stroke-width:1;stroke-dasharray:2 6;opacity:.5}

.rose__mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
/* the traced mark lands exactly on the petals it came from: 2R of a 400 box, at 76% */
.rose__markSvg{width:36.5%;height:auto;overflow:visible;color:var(--gold-lt);stroke-width:4.4}

.rose__tags{position:absolute;inset:0;pointer-events:none}
.rose__tag{
  position:absolute;left:50%;top:50%;width:min(27%,17ch);text-align:center;
  transform:translate(-50%,-50%) rotate(var(--a)) translate(calc(var(--rose) * .435))
            rotate(calc(-1 * var(--a)));
}
.rose__tag__in{
  display:block;font-family:var(--f-ui);font-size:clamp(.58rem,.72vw,.72rem);
  font-weight:300;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-dim);line-height:1.55;
}
.rose__tag b{
  display:block;font-weight:400;font-size:.9em;letter-spacing:.22em;
  color:var(--gold);opacity:.75;margin-bottom:.5em;font-variant-numeric:tabular-nums;
}
html[lang="ar"] .rose__tag__in{letter-spacing:normal;text-transform:none;font-size:clamp(.68rem,.86vw,.84rem)}

.brand__cap{position:relative;z-index:2;width:min(92vw,var(--maxw));text-align:center}
.brand__line{
  font-family:var(--f-display);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.6vw,3.4rem);color:var(--porcelain);line-height:1.05;margin-bottom:.8rem;
}
html[lang="ar"] .brand__line{letter-spacing:0;line-height:1.35;font-weight:400}
.brand__sub{
  max-width:52ch;margin-inline:auto;color:#b9c6d0;
  font-size:clamp(.88rem,1.05vw,1rem);line-height:1.8;
}
html[lang="ar"] .brand__sub{line-height:2.05}

/* no JS, reduced motion, or a viewport too short to pin: the finished dial, in flow */
.brand.is-flat .brand__pin{height:auto;padding-block:clamp(4rem,10vh,7rem)}
.brand.is-flat .brand__stage{--rose:min(78vw,520px)}
/* nothing sweeps the arm without the scrub, and the scaffolding has to step
   back off the mark exactly as far as the timeline would have taken it */
.brand.is-flat .rose__arm{display:none}
.brand.is-flat .rose__circles{opacity:.3}
.brand.is-flat .rose__petals{opacity:.45}

/* ── TEAM ─────────────────────────────────────────────────── */
.team__banner{
  max-width:var(--maxw);margin:0 auto clamp(3rem,6vw,5rem);overflow:hidden;
  aspect-ratio:21/8;border:1px solid var(--line-soft);
}
@media (max-width:760px){.team__banner{aspect-ratio:16/10}}
.team__banner img{width:100%;height:100%;object-fit:cover;object-position:center 32%;transform:scale(1.1)}

/* 7 doctors across two rows of four: the founder's card takes two of them.
   Source portraits are ~450px wide, so no card is ever scaled past its pixels. */
.docs{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.8rem);
}
.doc{position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#12202b,#0a141d);border:1px solid var(--line-soft);
  transition:border-color .5s,transform .7s var(--tr-lux)}
.doc:hover{border-color:var(--line);transform:translateY(-6px)}
.doc--lead{grid-column:span 2;flex-direction:row;border-color:var(--line)}
.doc figure{overflow:hidden;aspect-ratio:1/1.06;background:#0d1a24;flex:none}
.doc--lead figure{width:46%;aspect-ratio:auto;align-self:stretch}
.doc figure img{width:100%;height:100%;object-fit:cover;object-position:center 18%;
  filter:grayscale(1) contrast(1.08) brightness(.92);transition:filter .8s var(--tr-lux),transform 1.2s var(--tr-lux)}
.doc:hover figure img{filter:none;transform:scale(1.04)}
.doc__info{flex:1;padding:clamp(1rem,1.8vw,1.6rem);border-top:1px solid var(--line-soft)}
.doc--lead .doc__info{display:flex;flex-direction:column;justify-content:center;
  border-top:0;border-inline-start:1px solid var(--line-soft)}
.doc__role{display:block;font-family:var(--f-ui);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
html[lang="ar"] .doc__role{letter-spacing:normal;font-size:.78rem;text-transform:none}
.doc__info h3{font-size:clamp(1.05rem,1.5vw,1.5rem);color:var(--porcelain);margin-bottom:.35rem;line-height:1.25}
.doc--lead .doc__info h3{font-size:clamp(1.4rem,2.4vw,2.2rem)}
.doc__info p{font-family:var(--f-ui);font-size:.76rem;letter-spacing:.05em;color:var(--text-dim);line-height:1.6}

/* ── FOUNDER ──────────────────────────────────────────────── */
.founder{border-top:1px solid var(--line-soft)}
.founder__grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
/* the portrait is treated exactly like the team cards, so the two sections read
   as one set rather than two designs */
.founder__portrait{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#12202b,#0a141d);
  border:1px solid var(--line);
}
.founder__portrait img{
  display:block;width:100%;height:auto;aspect-ratio:1/1.08;
  object-fit:cover;object-position:center 15%;
  filter:grayscale(1) contrast(1.08) brightness(.92);
  transition:filter .9s var(--tr-lux),transform 1.3s var(--tr-lux);
}
.founder__portrait:hover img{filter:none;transform:scale(1.04)}
.founder__portrait figcaption{
  padding:clamp(1rem,1.8vw,1.6rem);border-top:1px solid var(--line-soft);
}
.founder__role{
  display:block;font-family:var(--f-ui);font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.55rem;
}
html[lang="ar"] .founder__role{letter-spacing:normal;font-size:.78rem;text-transform:none}
.founder__portrait strong{
  display:block;font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.3;color:var(--porcelain);
}

.founder__body{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.1rem,2vw,1.7rem)}
.founder__lede{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.2rem,2vw,1.85rem);line-height:1.55;color:var(--porcelain);
  max-width:44ch;
}
html[lang="ar"] .founder__lede{line-height:1.9}
.founder__body > p:not(.founder__lede){
  color:var(--text-dim);font-size:.98rem;line-height:1.85;max-width:56ch;
}
html[lang="ar"] .founder__body > p:not(.founder__lede){line-height:2.1}

/* the credentials: a hairline grid, one fact per cell, so more can be added
   without the block needing a new layout */
.founder__creds{
  width:100%;margin-top:.3rem;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
}
.founder__creds > div{background:var(--ink);padding:clamp(1rem,1.7vw,1.5rem)}
.founder__creds dt{
  font-family:var(--f-ui);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem;
}
html[lang="ar"] .founder__creds dt{letter-spacing:normal;font-size:.76rem;text-transform:none}
.founder__mail{
  font-family:var(--f-ui);font-size:.74rem;letter-spacing:.05em;color:var(--text-dim);
  border-bottom:1px solid var(--line-soft);padding-bottom:.25rem;
  transition:color .4s,border-color .4s;
}
.founder__mail:hover{color:var(--gold);border-color:var(--gold)}
.founder__creds dd{color:var(--porcelain);font-size:.9rem;line-height:1.65}
html[lang="ar"] .founder__creds dd{line-height:1.95}

@media (max-width:900px){
  .founder__grid{grid-template-columns:1fr}
  .founder__portrait{max-width:380px}
  .founder__creds{grid-template-columns:1fr}
}

/* ── MAP / NAVIGATION LINKS ───────────────────────────────── */
/* Two ways to actually get here: the Google listing, and a Waze deep link to
   the same coordinates. Both are set in logical properties so they mirror. */
.maplinks{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.15rem}
.maplinks a{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .9rem;border:1px solid var(--line);
  font-family:var(--f-ui);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--porcelain);
  transition:color .5s,border-color .5s,background-color .5s;
}
html[lang="ar"] .maplinks a{letter-spacing:normal;font-size:.82rem;text-transform:none}
.maplinks svg{width:14px;height:14px;fill:currentColor;flex:none}
.maplinks a:hover{color:var(--gold);border-color:var(--gold);background:rgba(221,181,53,.07)}
.maplinks--menu{margin-top:1rem}
.maplinks--menu a{border-color:var(--line-soft)}

/* ── GALLERY ──────────────────────────────────────────────── */
.gal{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.7rem,1.6vw,1.6rem);
}
.gal__i{overflow:hidden;background:var(--navy);border:1px solid var(--line-soft)}
.gal__i img{width:100%;height:100%;object-fit:cover;filter:brightness(.86) saturate(.9);transition:filter .8s var(--tr-lux)}
.gal__i:hover img{filter:brightness(1.04) saturate(1.05)}
/* five figures, and every row has to come to twelve: 4+5+3, then 5+7 */
.gal__i--1{grid-column:span 4;aspect-ratio:3/4}
.gal__i--2{grid-column:span 5;aspect-ratio:4/3;align-self:end}
.gal__i--3{grid-column:span 3;aspect-ratio:3/4;margin-top:clamp(1rem,4vw,4rem)}
.gal__i--4{grid-column:span 5;aspect-ratio:1/1}
.gal__i--5{grid-column:span 7;aspect-ratio:16/10;align-self:center}

/* ── CASES (before / after) ───────────────────────────────── */
.cases{border-top:1px solid var(--line-soft)}
.cases__wrap{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.25fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:start;
}
/* a square stage that fills a 1560px column is taller than the screen, and a
   comparison you cannot see all of is not a comparison — cap it and let it sit
   against the outer edge */
.cases__stage{width:100%;max-width:660px;justify-self:end}

/* the index reads as a table of contents: number, title, and the pair itself
   in miniature — greyed until it is the one on the stage */
.cases__index{border-top:1px solid var(--line-soft)}
.cix{
  position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:1rem;text-align:start;
  padding:1.05rem .1rem;border-bottom:1px solid var(--line-soft);
}
.cix::after{
  content:'';position:absolute;inset-inline-start:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--teal));transition:width .65s var(--tr-lux);
}
html[dir="rtl"] .cix::after{background:linear-gradient(-90deg,var(--gold),var(--teal))}
.cix:hover::after{width:38%}
.cix.is-on::after{width:100%}
.cix__n{font-family:var(--f-ui);font-size:.62rem;letter-spacing:.2em;color:var(--gold);
  opacity:.42;font-variant-numeric:tabular-nums;transition:opacity .45s}
.cix__t{font-family:var(--f-display);font-weight:300;font-size:clamp(1rem,1.2vw,1.18rem);
  line-height:1.3;color:var(--text-dim);transition:color .45s}
html[lang="ar"] .cix__t{line-height:1.8}
.cix.is-on .cix__n{opacity:1}
.cix:hover .cix__t,.cix.is-on .cix__t{color:var(--porcelain)}
.cix__th{display:flex;gap:2px;flex:none;opacity:.4;transition:opacity .5s}
.cix__th img{width:32px;height:32px;object-fit:cover;filter:grayscale(1) contrast(.9) brightness(1.05);transition:filter .6s}
.cix.is-on .cix__th{opacity:1}
.cix.is-on .cix__th img{filter:none}

/* the stage. --p is the reveal: 0 = all before, 1 = all after. Everything
   inside — the clip, the handle, the two labels — reads from that one number,
   so the whole thing moves off a single style.setProperty per frame. */
.cmp{
  --p:1;
  position:relative;aspect-ratio:1/1;overflow:hidden;cursor:ew-resize;
  background:var(--navy);border:1px solid var(--line-soft);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.cmp__frame{position:absolute;inset:0}
.cmp__case{
  position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:scale(1.04);
  transition:opacity .7s var(--tr-lux),transform 1s var(--tr-lux),visibility .7s;
}
.cmp__case.is-on{opacity:1;visibility:visible;transform:none}
.cmp__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp__img--a{clip-path:inset(0 0 0 calc(var(--p) * 100%))}
html[dir="rtl"] .cmp__img--a{clip-path:inset(0 calc(var(--p) * 100%) 0 0)}

.cmp__tag{
  position:absolute;top:clamp(.8rem,1.6vw,1.4rem);z-index:2;pointer-events:none;
  font-family:var(--f-ui);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  padding:.42rem .85rem;color:var(--porcelain);
  border:1px solid rgba(239,240,240,.18);background:rgba(8,17,26,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
html[lang="ar"] .cmp__tag{letter-spacing:normal;font-size:.74rem;text-transform:none}
/* each label lives over the frame the other one owns, so it fades out as the
   wipe swallows its half */
.cmp__tag--b{inset-inline-start:clamp(.8rem,1.6vw,1.4rem);opacity:calc(var(--p) * 3)}
.cmp__tag--a{inset-inline-end:clamp(.8rem,1.6vw,1.4rem);opacity:calc((1 - var(--p)) * 3);
  color:var(--gold);border-color:var(--line)}

.cmp__handle{
  position:absolute;inset-block:0;inset-inline-start:calc(var(--p) * 100%);
  width:0;z-index:3;display:grid;place-items:center;
}
.cmp__handle:focus{outline:none}
.cmp__line{
  position:absolute;inset-block:0;inset-inline-start:-1px;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold) 10%,var(--gold-lt) 50%,var(--gold) 90%,transparent);
  box-shadow:0 0 24px rgba(221,181,53,.4);
}
.cmp__knob{
  position:relative;display:grid;place-items:center;
  width:clamp(44px,4.2vw,56px);height:clamp(44px,4.2vw,56px);border-radius:50%;
  border:1px solid var(--gold);color:var(--gold-lt);background:rgba(8,17,26,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .45s var(--tr-lux),background .45s,color .45s;
}
.cmp__knob svg{width:24px;height:24px}
.cmp:hover .cmp__knob{transform:scale(1.1)}
.cmp__handle:focus-visible .cmp__knob{outline:2px solid var(--gold);outline-offset:5px;background:var(--gold);color:var(--ink)}

/* the caption and the note live in the left column, under the index — the stage
   is a plate, and this is its wall label. Captions share one grid cell so the
   block is as tall as the longest of them and nothing jumps when a case changes */
.cases__caps{display:grid;margin-top:clamp(1.6rem,3vw,2.4rem)}
.cases__cap{
  grid-area:1/1;max-width:54ch;
  font-family:var(--f-display);font-weight:300;font-size:clamp(1.05rem,1.45vw,1.36rem);
  line-height:1.5;color:var(--porcelain);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .6s var(--tr-lux),transform .6s var(--tr-lux),visibility .6s;
}
html[lang="ar"] .cases__cap{font-weight:400;line-height:1.9}
.cases__cap.is-on{opacity:1;visibility:visible;transform:none}
.cases__legal{
  margin-top:clamp(1.2rem,2.2vw,1.8rem);padding-top:clamp(1rem,2vw,1.4rem);
  border-top:1px solid var(--line-soft);
  font-size:.78rem;line-height:1.8;color:var(--text-dim);max-width:62ch;
}
html[lang="ar"] .cases__legal{font-size:.86rem;line-height:2}

/* the clinic's own composites — before and after already in one frame. They
   arrive at three different aspect ratios and cropping them would eat the
   labels, so the rail fixes the height and lets each width follow. */
.cases__files{max-width:var(--maxw);margin:clamp(3rem,6vw,5rem) auto 0}
.cases__filesHead{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.4rem;
  padding-bottom:1.1rem;margin-bottom:clamp(1.2rem,2.4vw,1.8rem);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--f-ui);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
html[lang="ar"] .cases__filesHead{letter-spacing:normal;font-size:.84rem;text-transform:none}
.cases__filesNote{letter-spacing:.04em;text-transform:none;color:var(--text-dim);font-size:.82rem}
html[lang="ar"] .cases__filesNote{font-size:.86rem}
/* the rail always overflows — one row of these is wider than any monitor — so
   the hint can be static rather than measured */
.cases__filesHint{display:inline-flex;align-items:center;gap:.7rem;margin-inline-start:auto;color:var(--text-dim)}
.cases__filesHint i{display:block;width:34px;height:1px;background:currentColor;opacity:.5}
.files:focus-visible{outline:2px solid var(--gold);outline-offset:6px}

/* Two rows inside one scroller, so thirty-five cards cost half the travel.
   A grid with two rows would have been the shorter way to write it, but the
   cards are all different widths and every grid column would size to the wider
   of its pair — leaving a hole beside the narrower one. Two flex rows that
   scroll together keep each card at its own width. Each row is max-content so
   it lays out at its full length rather than shrinking to the viewport. */
.files{
  display:flex;flex-direction:column;gap:clamp(.7rem,1.4vw,1.3rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:thin;
  scrollbar-color:var(--gold-dp) rgba(239,240,240,.06);
  padding-bottom:1rem;
}
.files__row{display:flex;gap:clamp(.7rem,1.4vw,1.3rem);width:max-content}
.files::-webkit-scrollbar{height:4px}
.files::-webkit-scrollbar-track{background:rgba(239,240,240,.06)}
.files::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--teal),var(--gold-dp));border-radius:4px}
.files li{
  flex:none;scroll-snap-align:center;
  height:clamp(155px,23vh,265px);
  border:1px solid var(--line-soft);background:var(--navy);overflow:hidden;
}
.files__btn{display:block;height:100%;border:0;padding:0;background:none;cursor:pointer}
.files__btn:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.files img{
  display:block;height:100%;width:auto;max-width:none;
  filter:brightness(.92) saturate(.95);transition:filter .7s var(--tr-lux);
}
.files li:hover img,
.files__btn:focus-visible img{filter:none}

/* ── CASE CARD VIEWER ─────────────────────────────────────── */
/* Deliberately CSS transitions and not GSAP, for the same reason .cmp is:
   build() returns early under prefers-reduced-motion, and being able to read a
   case card is content, not choreography. It has to keep working there. */
.lb{
  position:fixed;inset:0;z-index:8200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3.4rem);
  visibility:hidden;pointer-events:none;opacity:0;
  transition:opacity .42s var(--tr-lux),visibility 0s linear .42s;
}
.lb.is-open{visibility:visible;pointer-events:auto;opacity:1;transition-delay:0s}
/* .nav sits at 8000, just under this, and at 93% the wordmark ghosted
   through behind the card. It needs to be near-solid. */
.lb__bg{position:absolute;inset:0;background:rgba(6,12,18,.975);backdrop-filter:blur(10px)}
.lb__img{
  position:relative;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  border:1px solid var(--line-soft);background:var(--navy);
  transform:scale(.965);transition:transform .42s var(--tr-lux);
}
.lb.is-open .lb__img{transform:scale(1)}

.lb__x,.lb__nav{
  position:absolute;display:grid;place-items:center;
  border:1px solid var(--line-soft);background:rgba(8,17,26,.72);
  color:var(--porcelain);cursor:pointer;
  transition:background .4s var(--tr-lux),color .4s var(--tr-lux),border-color .4s var(--tr-lux);
}
.lb__x:hover,.lb__nav:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.lb__x:focus-visible,.lb__nav:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lb__x svg,.lb__nav svg{width:20px;height:20px;fill:none;stroke:currentColor}
.lb__x{inset-block-start:clamp(1rem,3vw,2rem);inset-inline-end:clamp(1rem,3vw,2rem);width:46px;height:46px}
.lb__nav{inset-block-start:50%;translate:0 -50%;width:52px;height:52px}
.lb__nav--prev{inset-inline-start:clamp(.5rem,2vw,1.6rem)}
.lb__nav--next{inset-inline-end:clamp(.5rem,2vw,1.6rem)}
/* the chevron points inline-start; the next button is the same glyph turned */
.lb__nav--next svg{transform:rotate(180deg)}
/* and in Arabic the whole pair swaps sides, so each one turns again */
html[dir="rtl"] .lb__nav svg{transform:rotate(180deg)}
html[dir="rtl"] .lb__nav--next svg{transform:none}

.lb__count{
  position:absolute;inset-block-end:clamp(.9rem,2.6vw,1.9rem);inset-inline-start:50%;translate:-50% 0;
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-ui);font-size:.7rem;letter-spacing:.24em;color:var(--text-dim);
}
.lb__count b{font-weight:400;color:var(--gold)}
.lb__count i{display:block;width:26px;height:1px;background:currentColor;opacity:.5}

@media (max-width:680px){
  .lb__nav{width:42px;height:42px}
  .lb__x{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .lb,.lb__img{transition:none}
}

/* ── REVIEWS ──────────────────────────────────────────────── */
.revs{border-top:1px solid var(--line-soft)}
.revs__defs{position:absolute;width:0;height:0;overflow:hidden}

.revs__score{padding-bottom:.4rem}
.revs__rating{display:flex;align-items:baseline;gap:1rem;margin-bottom:.7rem}
.revs__num{font-family:var(--f-display);font-weight:300;font-size:clamp(2.6rem,5vw,4rem);
  line-height:1;color:var(--porcelain);font-variant-numeric:tabular-nums}
.revs__stars,.rev__stars{display:inline-flex;gap:.28rem;align-items:center}
.revs__stars svg{width:clamp(14px,1.5vw,18px)}
.rev__stars svg{width:13px}
.revs__stars svg,.rev__stars svg{height:auto;fill:var(--gold);flex:none}
.revs__meta{color:var(--text-dim);font-size:.92rem;line-height:1.7;max-width:26ch}
.revs__score .link-arrow{margin-top:1.4rem}

/* Hairline slab, same idiom as the technology list: the 1px grid gap is the
   background showing through, so the cards read as one carved block. */
.revs__grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
}
.rev{
  position:relative;overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column;align-items:flex-start;gap:1.05rem;
  padding:clamp(1.7rem,2.8vw,2.6rem);
  transition:background .6s var(--tr-lux);
}
.rev::before{
  content:'';position:absolute;inset-inline:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--teal));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--tr-lux);
}
html[dir="rtl"] .rev::before{transform-origin:right;background:linear-gradient(-90deg,var(--gold),var(--teal))}
.rev:hover::before{transform:scaleX(1)}
.rev:hover{background:rgba(32,88,117,.08)}

/* watermark quote — decorative, sits behind the text */
.rev__mark{
  position:absolute;top:-.28em;inset-inline-end:.4rem;pointer-events:none;
  font-family:var(--f-display);font-size:9rem;line-height:1;color:var(--gold);opacity:.09;
}

.rev__quote{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.02rem,1.35vw,1.24rem);line-height:1.62;color:var(--porcelain);
  flex:1;
}
html[lang="ar"] .rev__quote{font-weight:400;line-height:1.95}
.rev__by{display:flex;align-items:center;gap:.8rem;padding-top:.9rem;
  border-top:1px solid var(--line-soft);width:100%}

/* Most reviewers carry Google's generated letter avatar rather than a photo,
   so the monogram is the common case — drawn in our own palette instead of
   Google's blue. Real portraits get the same grayscale as the doctor cards. */
.rev__pfp{
  width:38px;height:38px;flex:none;border-radius:50%;overflow:hidden;
  background:linear-gradient(180deg,#12202b,#0a141d);border:1px solid var(--line);
  display:grid;place-items:center;
}
/* the doctor cards can afford a dark grayscale; at 38px a face needs lifting
   or it collapses into a dark disc */
.rev__pfp img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(.98) brightness(1.22);transition:filter .7s var(--tr-lux)}
.rev:hover .rev__pfp img{filter:none}
.rev__pfp--mono{font-family:var(--f-display);font-size:1.1rem;line-height:1;color:var(--gold)}
.rev__id{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.rev__name{font-family:var(--f-ui);font-size:.82rem;letter-spacing:.06em;color:var(--porcelain)}
.rev__src{font-family:var(--f-ui);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);opacity:.75}
html[lang="ar"] .rev__src{letter-spacing:normal;font-size:.76rem;text-transform:none}

/* ── PAYMENTS ─────────────────────────────────────────────── */
.pay{
  position:relative;border-top:1px solid var(--line-soft);
  padding:clamp(4rem,9vh,7rem) var(--pad);
  background:radial-gradient(120% 150% at 80% 50%,rgba(32,88,117,.20),transparent 60%);
}
html[dir="rtl"] .pay{background:radial-gradient(120% 150% at 20% 50%,rgba(32,88,117,.20),transparent 60%)}
.pay__inner{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(2.4rem,5vw,5rem);align-items:center;
}
.pay__title{font-size:clamp(1.9rem,3.4vw,3.1rem);margin-bottom:1.05rem}
html[lang="ar"] .pay__title{font-size:clamp(1.7rem,3vw,2.7rem)}
.pay__lead{font-size:clamp(.98rem,1.15vw,1.1rem);line-height:1.85;max-width:52ch;color:var(--text)}
html[lang="ar"] .pay__lead{line-height:2.05}
.pay__ways{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.7rem}
.pay__ways li{
  font-family:var(--f-ui);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);border:1px solid var(--line-soft);border-radius:2rem;padding:.5rem 1.05rem;
}
html[lang="ar"] .pay__ways li{letter-spacing:normal;font-size:.8rem;text-transform:none}
.pay__ways li:first-child{color:var(--gold);border-color:var(--line)}

.pay__visual{display:flex;justify-content:center}
.qi{width:min(100%,410px)}
/* a payment card is a physical object — it does not mirror in Arabic, so the
   chip stays on the left and the contactless arcs keep pointing right */
.qi__card{
  direction:ltr;
  position:relative;aspect-ratio:1.586/1;overflow:hidden;border-radius:16px;
  padding:clamp(1.15rem,2vw,1.65rem);
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(142deg,#0d1c27 0%,#1a4058 40%,#205875 66%,#0f2635 100%);
  border:1px solid rgba(221,181,53,.32);color:var(--porcelain);
  box-shadow:0 34px 74px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(239,240,240,.10);
}
.qi__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 26%,rgba(243,224,163,.15) 46%,transparent 62%);
}
.qi__row{display:flex;align-items:center;gap:1.05rem;color:var(--gold-lt)}
.qi__chip{width:clamp(38px,4.2vw,50px);opacity:.92}
.qi__wave{width:clamp(19px,2.2vw,25px);opacity:.7}
.qi__no{
  display:flex;gap:1em;font-family:var(--f-ui);font-size:clamp(.92rem,1.5vw,1.16rem);
  letter-spacing:.2em;color:rgba(239,240,240,.6);
}
.qi__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.qi__here{font-family:var(--f-ui);font-size:.57rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(239,240,240,.6)}
html[lang="ar"] .qi__here{letter-spacing:normal;font-size:.74rem;text-transform:none}
/* set in the site's own type, not Qi's logo file — see the note in index.html */
.qi__mark{
  font-family:var(--f-ui);font-weight:600;line-height:1;letter-spacing:-.03em;
  font-size:clamp(1.5rem,2.6vw,2rem);color:var(--porcelain);
}

/* ── CONTACT ──────────────────────────────────────────────── */
.contact{position:relative;overflow:hidden;isolation:isolate;padding:clamp(6rem,14vh,11rem) var(--pad) clamp(5rem,10vh,8rem)}
.contact__bg{position:absolute;inset:0;z-index:-2}
.contact__bg video,.contact__bg img{
  width:100%;height:100%;object-fit:cover;opacity:.30;
  filter:saturate(.75) brightness(1.1);transform:scale(1.16);
}
.contact::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(32,88,117,.28) 55%,var(--ink) 100%);
}
.contact__inner{max-width:var(--maxw);margin-inline:auto;position:relative}
.contact__title{font-size:clamp(2.4rem,6.4vw,6.6rem);max-width:15ch;margin-bottom:clamp(2.6rem,6vw,4.4rem)}
html[lang="ar"] .contact__title{font-size:clamp(2rem,5.2vw,5.2rem)}
.contact__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem clamp(1.5rem,3vw,3rem);
  border-top:1px solid var(--line);padding-top:clamp(1.8rem,4vw,2.8rem);
}
.contact__col h4{
  font-family:var(--f-ui);font-size:.64rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.8rem;
}
html[lang="ar"] .contact__col h4{letter-spacing:normal;font-size:.8rem;text-transform:none}
.contact__col p{color:var(--porcelain);font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1.8;max-width:32ch}
.contact__col a{border-bottom:1px solid transparent;transition:border-color .4s,color .4s}
.contact__col a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.contact__wa{display:inline-flex;align-items:center;gap:.65rem;flex-wrap:wrap;border-bottom:0!important}
.contact__wa svg{width:16px;height:16px;fill:currentColor;flex:none;color:var(--gold)}
.contact__wa span{border-bottom:1px solid transparent;transition:border-color .4s}
.contact__wa:hover span{border-bottom-color:var(--gold)}
.contact__wa b{
  font-family:var(--f-ui);font-size:.56rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);border-radius:2rem;padding:.1rem .6rem;
}
html[lang="ar"] .contact__wa b{letter-spacing:normal;font-size:.72rem;text-transform:none}
.contact__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(2.4rem,5vw,3.6rem)}

/* ── FOOTER ───────────────────────────────────────────────── */
.foot{padding-inline:var(--pad);padding-bottom:clamp(1.6rem,4vh,2.6rem);background:var(--ink);border-top:1px solid var(--line-soft)}
.foot__top{
  max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;padding-block:clamp(2.6rem,6vw,4.4rem);
}
.foot__brand{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.foot__brand img{width:clamp(76px,7vw,104px)}
.foot__by{font-family:var(--f-ui);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);text-align:center;transition:color .4s}
html[lang="ar"] .foot__by{letter-spacing:normal;font-size:.72rem;text-transform:none}
.foot__brand:hover .foot__by{color:var(--gold)}
.foot__nav{display:flex;flex-wrap:wrap;gap:clamp(1rem,2.4vw,2.4rem)}
.foot__nav a{font-family:var(--f-ui);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);transition:color .4s}
html[lang="ar"] .foot__nav a{letter-spacing:normal;font-size:.88rem;text-transform:none}
.foot__nav a:hover{color:var(--gold)}
.foot__bar{
  max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;padding-top:1.4rem;border-top:1px solid var(--line-soft);
  font-family:var(--f-ui);font-size:.68rem;letter-spacing:.08em;color:var(--text-dim);
}
.foot__lang{
  padding:.4rem 1.1rem;border:1px solid var(--line-soft);border-radius:2rem;
  letter-spacing:.14em;transition:color .4s,border-color .4s;
}
.foot__top-link{transition:color .4s}
.foot__lang:hover,.foot__top-link:hover{color:var(--gold)}
.foot__lang:hover{border-color:var(--gold)}

/* ── ANIMATION PRE-STATES (only when JS is live) ──────────── */
html.js-ready [data-reveal],
html.js-ready [data-stagger]>*,
html.js-ready [data-tcard],
html.js-ready .pillar,
html.js-ready .doc,
html.js-ready .gal__i,
html.js-ready .rev{opacity:0}
html.js-ready [data-split]{opacity:0}
html.js-ready [data-split] .w-i{will-change:transform}
html.js-ready .clinics__head .eyebrow{opacity:0}
html.js-ready .brand:not(.is-flat) .rose,
html.js-ready .brand:not(.is-flat) .brand__eyebrow,
html.js-ready .brand:not(.is-flat) .brand__cap>*{opacity:0}

/* Word masks. The padding gives the reveal room so no glyph clips; the matching
   negative margin keeps the mask layout-neutral. Keep the two in step — padding
   larger than the line's spare leading is what makes stacked lines collide. */
.w{display:inline-block;overflow:hidden;vertical-align:top;
   padding-block:.14em .3em;margin-block:-.14em -.3em}
html[lang="ar"] .w{padding-block:.1em .22em;margin-block:-.1em -.22em}
.w-i{display:inline-block}

/* parallax images need overscan so no edge is exposed while they drift */
[data-parallax] img{transform:scale(1.2)}

/* ── RESPONSIVE ───────────────────────────────────────────── */
/* The nav socials are the first thing to go when the bar gets tight — and they
   come back below 960px, where the links and the CTA have left the bar and
   there is room again. Below 560px the bar is brand + lang + burger only. */
@media (max-width:1360px){ .social--nav,.nav__div{display:none} }
@media (max-width:960px){ .social--nav{display:flex} .nav__div{display:block} }
@media (max-width:560px){ .social--nav,.nav__div{display:none} }

@media (max-width:1180px){
  .about__grid{grid-template-columns:1fr;gap:3rem}
  .about__visual{max-width:560px;aspect-ratio:1/1}
  .tech__grid{grid-template-columns:1fr;gap:2.5rem}
  .tech__sticky{position:static}
  .tech__mark{display:none}
  .docs{grid-template-columns:repeat(3,1fr)}
  .doc--lead{grid-column:span 3}
  .doc--lead figure{width:38%}
  .revs__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .nav__links{display:none}
  /* the burger takes over here and the bar has no room for a second line */
  .nav__by{display:none}
  /* below this the orbit is too tight to hold six labels, so the promises drop
     out of their ring into a plain two-up list under the dial.

     The section still pins. It used to stop, and the construction then played
     against a section that was scrolling away underneath it: by the time the
     mark was struck — the last quarter of the timeline — the rosette was off
     the top of the screen and nobody ever saw it. Pinning is the whole reason
     the piece reads on a desktop. So everything here is sized to fit one
     screen instead: a smaller dial, tighter padding, smaller gaps. */
  .brand__pin{height:100svh;min-height:0;padding-block:clamp(1rem,3.4vh,2.4rem);gap:clamp(.5rem,1.5vh,1.1rem)}
  .brand__stage{--rose:min(60vw,330px);width:min(92vw,520px);
    display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,2.6vh,1.9rem)}
  .rose__tags{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.3rem 1.6rem;width:100%}
  .rose__tag{position:static;transform:none;width:auto;text-align:start}
  .rose__tag b{margin-bottom:.35em}
  .brand.is-flat .brand__pin{height:auto;padding-block:clamp(4.5rem,11vh,7rem);gap:2rem}
  .brand.is-flat .brand__stage{--rose:min(74vw,420px)}
  .burger{display:block}
  .nav__cta{display:none}
  /* the square stage stops being a sensible full-width block well before the
     phone breakpoint — cap it and centre the column instead */
  .cases__wrap{grid-template-columns:1fr;gap:clamp(2rem,5vw,2.8rem)}
  .cases__stage{order:1;justify-self:center;max-width:620px}
  .cases__side{order:2}
  .cases__stage,.cases__side{width:100%;max-width:620px;margin-inline:auto}
  .pay__inner{grid-template-columns:1fr;gap:2.8rem}
  .pay__visual{justify-content:flex-start}
  .pillars{grid-template-columns:1fr}
  .clinic{grid-template-columns:1fr;width:min(84vw,560px);gap:1.4rem}
  .clinic__fig{aspect-ratio:16/10;max-height:38vh}
  .clinic--intro{width:min(84vw,520px)}
  .contact__grid{grid-template-columns:1fr}
  .revs__score{padding-bottom:0}
  .gal__i{grid-column:span 6}
  .gal__i--5{grid-column:span 12}
}
@media (max-width:680px){
  :root{--frame:8px}
  .edge-frame{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .docs{grid-template-columns:repeat(2,1fr)}
  .doc--lead{grid-column:span 2;flex-direction:row}
  .doc--lead figure{width:46%}
  .tcard{grid-template-columns:1fr}
  .tcard figure{aspect-ratio:16/10;max-width:none}
  .revs__grid{grid-template-columns:1fr}
  .rev__mark{font-size:7rem}

  /* ch-based measures are tuned for wide columns; on a phone they squeeze
     headings into four-word ribbons, so let them use the full width */
  .sec-head .h2,
  .sec-head--split .h2,
  .tech__sticky .h2,
  .about__body .h2,
  .contact__title,
  .clinic--intro .h2{max-width:none}
  .sec-head__note,.tech__note{max-width:none}
  .revs__meta{max-width:none}
  .hero__bar{font-size:.6rem;gap:1rem}
  .hero__meta{gap:1rem}
  /* the rail is pinned on phones too, so panels must fit inside one viewport */
  .clinic{width:min(86vw,430px);gap:1.1rem}
  .clinic__fig{aspect-ratio:4/3;max-height:34vh}
  .clinic__txt h3{font-size:1.45rem;margin-bottom:.6rem}
  .clinic__txt p{font-size:.9rem;line-height:1.7;max-width:none}
  .clinic__n{margin-bottom:.7rem}
  .clinic--intro{width:min(86vw,400px)}
  .clinics__head{top:5.2rem}
  .clinics__bar{width:42vw}
  /* keep the staggered editorial rhythm on phones rather than a flat 2-up grid */
  .gal{grid-template-columns:repeat(6,1fr);gap:.7rem}
  .gal__i--1{grid-column:span 4;aspect-ratio:3/4}
  .gal__i--2{grid-column:span 2;aspect-ratio:2/3;align-self:end}
  .gal__i--3{grid-column:span 3;aspect-ratio:3/4;margin-top:-1.6rem}
  .gal__i--4{grid-column:span 3;aspect-ratio:1/1;margin-top:1.4rem}
  .gal__i--5{grid-column:span 6;aspect-ratio:4/3;align-self:center}
  .foot__top{flex-direction:column;align-items:flex-start;gap:1.6rem}

  .files li{height:clamp(118px,16vh,158px)}
  .cases__filesNote{width:100%}
  .cix{gap:.8rem;padding-block:.95rem}
  .cix__t{font-size:1.02rem}
  .cix__th img{width:22px;height:22px}
  .cases__cap{max-width:none}
  .cases__legal{max-width:none}
  .cmp__knob{width:46px;height:46px}
  .qi{width:100%}
  .social--foot{width:100%}
}

/* Nine links, a phone number, an email and three social buttons do not fit down
   a short phone at display sizes — hence the 3.5vh cap on the link size above.
   Height, not width, is the constraint here; this trims what is left. */
@media (max-height:800px){
  .brand__stage{--rose:min(48svh,42vw)}
  .menu__links{padding-top:clamp(3.6rem,10vh,5rem)}
  .social--menu{margin-top:.7rem}
  .social--menu a{width:2.3rem;height:2.3rem}
  .social--menu svg{width:14px}
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.js-ready [data-reveal],
  html.js-ready [data-stagger]>*,
  html.js-ready [data-tcard],
  html.js-ready [data-split],
  html.js-ready .pillar,
  html.js-ready .doc,
  html.js-ready .gal__i,
  html.js-ready .rev,
  html.js-ready .clinics__head .eyebrow,
  html.js-ready .brand .rose,
  html.js-ready .brand .brand__eyebrow,
  html.js-ready .brand .brand__cap>*{opacity:1!important}
  .grain{animation:none}
  .tech__mark img{animation:none}
  .hero__line::after{animation:none}
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print{
  .loader,.cursor,.grain,.edge-frame,.nav,.menu,.scroll-progress{display:none!important}
  body{background:#fff;color:#000}
}