/* المفصل للعلاج الطبيعي — مبني على ثيم إسناد: ليل كحلي متصل، المعين شكلٌ متكرر، وشريطان عاجيان للضوء. */
:root{
  --ink:#04172D;--ink-2:#08203D;--ink-3:#0D2B4E;--line:#1B3554;--fg:#F2F4F7;--muted:#97A7BC;
  --accent:#4689DB;--accent-soft:#9CC2F0;--silver:#E5E7EA;--tile:#FFFFFF;
  --ivory:#EEF1F5;--on-ivory:#04172D;--on-ivory-muted:#4A5B70;--on-ivory-line:#CBD3DD;--on-ivory-accent:#1F5FB0;
  --wa:#25D366;
  --font:"Thmanyah Sans","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --s-hero:clamp(2.3rem,5.6vw,5.2rem);--s-1:clamp(1.9rem,4vw,3.4rem);--s-2:clamp(1.35rem,2.4vw,2rem);
  --wrap:1240px;--ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(88px + env(safe-area-inset-top,0px));background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--font);font-size:1.0625rem;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:700;line-height:1.45;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:max(18px,env(safe-area-inset-right,0px))}
@media(min-width:900px){.wrap{padding-inline:48px}}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--accent-soft);line-height:1.6}
.eyebrow::before{content:"";width:.55rem;height:.55rem;background:var(--accent);transform:rotate(45deg)}
.sec{padding-block:clamp(4.5rem,11vw,9rem)}
.sec-head{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:clamp(2rem,4vw,3.5rem);max-width:40em}
.sec-head h2{font-size:var(--s-1)}
.sec-head p{color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:50px;padding:.75rem 1.6rem;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.btn svg{width:20px;height:20px;flex:none}
.btn-solid{background:var(--fg);color:var(--ink)}
.btn-solid:hover{background:var(--accent);color:var(--fg)}
.btn-wa{background:var(--fg);color:var(--ink)}
.btn-wa svg{color:#128C4B}
.btn-wa:hover{background:var(--wa);color:#04172D}
.btn-wa:hover svg{color:#04172D}
.btn-line{border:1px solid var(--line);color:var(--fg);font-weight:400}
.btn-line:hover{border-color:var(--accent-soft);background:var(--ink-3)}
.on-ivory .btn-line{border-color:var(--on-ivory-line);color:var(--on-ivory)}
.on-ivory .btn-line:hover{background:#fff;border-color:var(--on-ivory-accent)}
.on-ivory .btn-wa{background:var(--on-ivory);color:var(--fg)}
.on-ivory .btn-wa svg{color:var(--wa)}
[data-spot]{position:relative;isolation:isolate}
[data-spot]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s var(--ease);background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(70,137,219,.18),transparent 60%)}
[data-spot]:hover::after{opacity:1}

/* Cursor (fine pointers) */
.cur{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border:1.5px solid var(--accent-soft);transform:translate(-100px,-100px) rotate(45deg);pointer-events:none;z-index:70;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s;display:none}
.cur.big{width:40px;height:40px;margin:-20px 0 0 -20px;background:rgba(70,137,219,.16);border-color:var(--accent)}
@media(hover:hover) and (pointer:fine){.cur{display:block}}

/* Header */
.hdr{position:fixed;top:0;inset-inline:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
.hdr.solid{background:rgba(4,23,45,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.85rem}
.logo{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.logo .tile{width:54px;height:54px;border-radius:14px;background:var(--ink-3);border:1px solid var(--line);overflow:hidden;flex:none;display:grid;place-items:center}
.logo .tile .mk{height:34px;width:auto}
.logo b{font-size:1.05rem;line-height:1.3;display:block}
.logo small{display:block;color:var(--muted);font-size:.78rem;letter-spacing:.06em}
.nav{display:flex;gap:2rem;font-size:.95rem;color:var(--muted)}
.nav a{text-decoration:none;position:relative;transition:color .2s}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:1px;background:var(--accent-soft);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover{color:var(--fg)}
.nav a:hover::after{transform:scaleX(1)}
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);align-items:center;justify-content:center;cursor:pointer}
.mnav{position:fixed;inset:0;z-index:49;background:var(--ink);padding:calc(6.5rem + env(safe-area-inset-top,0px)) 24px 2rem;display:flex;flex-direction:column;gap:1.1rem;font-size:1.7rem;font-weight:700}
.mnav a{text-decoration:none}
.mnav .btn{margin-top:1rem;align-self:flex-start;font-size:1.05rem}
[hidden]{display:none!important}
@media(max-width:980px){.nav{display:none}.menu-btn{display:inline-flex}}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:calc(7rem + env(safe-area-inset-top,0px)) 4rem;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center;width:100%}
.hero-copy{display:flex;flex-direction:column;gap:1.5rem}
.hero-copy h1{font-size:var(--s-hero);line-height:1.3}
.hero-copy p{color:var(--muted);font-size:1.15rem;max-width:32em}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}
.creds{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--muted);font-size:.92rem;padding-top:.5rem}
.creds span{display:inline-flex;align-items:center;gap:.5rem}
.creds span::before{content:"";width:6px;height:6px;background:var(--accent-soft);transform:rotate(45deg)}
.hero-mark{position:relative;aspect-ratio:1/1;width:100%;max-width:520px;justify-self:center}
.hero-mark .ghost{position:absolute;inset:0;border:1px solid var(--line);transform:rotate(45deg) scale(.86);border-radius:48px}
.hero-mark .ghost.g2{transform:rotate(45deg) scale(.62);border-color:rgba(70,137,219,.35);animation:breathe 7s var(--ease) infinite}
.hero-mark .core{position:absolute;inset:24%;display:grid;place-items:center}
.hero-mark .core .mk{height:100%;width:auto;fill:#fff;filter:drop-shadow(0 20px 50px rgba(70,137,219,.35))}
.hero-mark .orbit{position:absolute;inset:6%;border-radius:50%;border:1px dashed rgba(156,194,240,.22);animation:spin 40s linear infinite}
.hero-mark .orbit::before{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;background:var(--accent-soft);transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:rotate(45deg) scale(.68)}}
@media(max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.hero-mark{max-width:300px;order:-1}.hero{min-height:auto}}

/* Credentials figures */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fig{padding:clamp(1.75rem,3.5vw,3rem) clamp(1rem,2.5vw,2rem);display:flex;flex-direction:column;gap:.9rem;border-inline-start:1px solid var(--line);overflow:hidden}
.fig:first-child{border-inline-start:0}
.fig .v{font-weight:300;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1.1;color:var(--fg)}
.fig .lbl{color:var(--muted);font-size:.98rem;line-height:1.6}
.fig .bar{height:2px;background:var(--line);position:relative;overflow:hidden}
.fig .bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.fig:hover .bar::after{transform:scaleX(1)}
@media(max-width:760px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}.fig:nth-child(3){border-inline-start:0}.fig:nth-child(n+3){border-top:1px solid var(--line)}}

/* Services */
.svc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:3rem;align-items:start}
.svc-head{position:sticky;top:7rem;display:flex;flex-direction:column;gap:1.4rem}
.svc-head h2{font-size:var(--s-1)}
.svc-head p{color:var(--muted)}
.list{border-top:1px solid var(--line);isolation:isolate}
.list details{border-bottom:1px solid var(--line);position:relative}
.list details::before{content:"";position:absolute;inset:0;background:var(--ink-3);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);z-index:-1}
.list details:hover::before,.list details[open]::before{transform:scaleX(1)}
.list summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1.25rem;padding:1.4rem 1.25rem;font-size:clamp(1.1rem,1.9vw,1.45rem);font-weight:700;line-height:1.55;transition:color .25s,padding .4s var(--ease)}
.list summary::-webkit-details-marker{display:none}
.list details:hover summary{color:var(--accent-soft);padding-inline-start:1.75rem}
.list .d{flex:none;width:14px;height:14px;border:1.5px solid var(--accent);transform:rotate(45deg);transition:background .3s,transform .5s var(--ease)}
.list details:hover .d{background:var(--accent)}
.list details[open] .d{background:var(--accent);transform:rotate(225deg)}
.list .body{padding:0 3.4rem 1.7rem 1.25rem;color:var(--muted);max-width:44em}
.list .tag{display:inline-block;margin-inline-start:.6rem;font-size:.75rem;font-weight:400;color:var(--accent-soft);border:1px solid var(--line);border-radius:999px;padding:.05rem .65rem;vertical-align:middle}
@media(max-width:900px){.svc{grid-template-columns:minmax(0,1fr)}.svc-head{position:static}.list .body{padding-inline-start:3rem}}

/* Ivory band — Dr. Nabil */
.on-ivory{background:var(--ivory);color:var(--on-ivory)}
.on-ivory .eyebrow{color:var(--on-ivory-accent)}
.on-ivory .eyebrow::before{background:var(--on-ivory-accent)}
.doc-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.doc-grid h2{font-size:var(--s-1)}
.doc-grid .lead{color:var(--on-ivory-muted);margin-top:1.25rem;max-width:34em}
.pillars{display:flex;flex-direction:column;margin-top:2.25rem}
.pillar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;padding:1.35rem 0;border-top:1px solid var(--on-ivory-line);transition:padding .4s var(--ease)}
.pillar:hover{padding-inline-start:.75rem}
.pillar .d{width:12px;height:12px;background:var(--on-ivory);transform:rotate(45deg);margin-top:.75rem;transition:transform .5s var(--ease),background .3s}
.pillar:hover .d{transform:rotate(225deg);background:var(--on-ivory-accent)}
.pillar h3{font-size:1.25rem;margin-bottom:.25rem}
.pillar p{color:var(--on-ivory-muted)}
.portrait{position:relative;aspect-ratio:1/1;max-width:540px;width:100%;justify-self:center;margin-top:3rem}
.portrait .back{position:absolute;inset:8%;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--on-ivory-line);transform:translate(-8%,-8%);transition:transform .8s var(--ease)}
[dir=ltr] .portrait .back{transform:translate(8%,-8%)}
.portrait:hover .back{transform:translate(-11%,-11%)}
[dir=ltr] .portrait:hover .back{transform:translate(11%,-11%)}
.portrait .img{position:absolute;inset:8%;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:radial-gradient(70% 60% at 50% 38%,#1F4E86 0%,var(--ink-3) 45%,var(--ink) 100%)}
.portrait .img::after{content:"";position:absolute;inset:22%;border:1px solid rgba(156,194,240,.25);transform:rotate(45deg);border-radius:24px}
.portrait .photo{position:absolute;inset:8%;clip-path:polygon(-30% -60%,130% -60%,100% 50%,50% 100%,0 50%)}
.portrait .photo img{position:absolute;left:50%;bottom:-1%;width:72%;height:auto;transform:translateX(-50%);filter:drop-shadow(0 18px 30px rgba(4,23,45,.35))}
.portrait .name{position:absolute;inset-inline-start:0;bottom:7%;z-index:2;background:#fff;border:1px solid var(--on-ivory-line);border-radius:18px;padding:.9rem 1.25rem;box-shadow:0 18px 40px -24px rgba(4,23,45,.45);display:flex;flex-direction:column;gap:.15rem;text-align:start;min-width:12rem}
.portrait .name b{font-size:1.15rem;line-height:1.4}
.portrait .name span{color:var(--on-ivory);font-size:.95rem;line-height:1.5}
.portrait .name small{color:var(--on-ivory-muted);font-size:.82rem;line-height:1.4;direction:ltr;unicode-bidi:isolate;align-self:flex-start}
[dir=rtl] .portrait .name small{align-self:flex-start}
@media(max-width:900px){.doc-grid{grid-template-columns:minmax(0,1fr)}.portrait{max-width:400px;margin-top:1rem}}

/* Women band */
.band{position:relative;overflow:hidden;border-radius:32px;background:var(--ink-2);border:1px solid var(--line);padding:clamp(2.25rem,6vw,4.5rem);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem;align-items:end}
.band h2{font-size:var(--s-1);line-height:1.4}
.band p{color:var(--muted);margin-top:1rem;max-width:30em}
.band .acts{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end}
.band ul{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.band li{border:1px solid var(--line);border-radius:999px;padding:.3rem 1rem;font-size:.92rem;color:var(--fg);background:rgba(13,43,78,.6)}
.band .bgd{position:absolute;width:420px;height:420px;border:1px solid var(--line);transform:rotate(45deg);border-radius:40px;inset-inline-end:-160px;top:-180px;pointer-events:none}
.band .bgd+.bgd{width:300px;height:300px;inset-inline-end:-40px;top:-60px;border-color:rgba(70,137,219,.35)}
@media(max-width:900px){.band{grid-template-columns:minmax(0,1fr)}.band .acts{justify-content:flex-start}}

/* Steps — a real sequence */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;counter-reset:s}
.step{border:1px solid var(--line);border-radius:24px;padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;background:var(--ink-2);transition:border-color .3s,transform .4s var(--ease)}
.step:hover{border-color:var(--accent);transform:translateY(-4px)}
.step .n{width:42px;height:42px;display:grid;place-items:center;font-weight:700;color:var(--ink);background:var(--accent-soft);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.step h3{font-size:1.2rem}
.step p{color:var(--muted);font-size:.98rem}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Why — second light band */
.why-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.why-list .pillar:nth-child(-n+2){border-top-color:var(--on-ivory)}
@media(max-width:760px){.why-list{grid-template-columns:minmax(0,1fr)}.why-list .pillar:nth-child(2){border-top-color:var(--on-ivory-line)}}

/* Close / contact */
.close{border-top:1px solid var(--line)}
.close-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:3rem;align-items:end}
.close h2{font-size:var(--s-hero);line-height:1.3}
.close .lead{color:var(--muted);margin-top:1.25rem;max-width:30em}
.close .hero-cta{margin-top:2rem}
.contact{display:flex;flex-direction:column}
.contact .row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--line);flex-wrap:wrap;text-decoration:none;transition:border-color .3s,padding .4s var(--ease)}
.contact a.row:hover{border-color:var(--accent);padding-inline-start:.6rem}
.contact .row span{color:var(--muted)}
.contact .row b{font-weight:400}
.contact .row b.ltr{direction:ltr;unicode-bidi:isolate}
@media(max-width:900px){.close-grid{grid-template-columns:minmax(0,1fr)}}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) calc(2rem + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(2,minmax(0,3fr));gap:2.5rem}
.foot-grid .about{display:flex;flex-direction:column;gap:1.1rem;color:var(--muted);max-width:28em}
.foot-grid h3{font-size:1rem;margin-bottom:1rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;color:var(--muted)}
.foot-grid a{text-decoration:none;transition:color .2s}
.foot-grid a:hover{color:var(--fg)}
.foot-base{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.85rem}
@media(max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* Floating WhatsApp */
.wa-float{position:fixed;inset-inline-start:max(18px,env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:55;width:60px;height:60px;border-radius:50%;background:var(--wa);color:#04172D;display:grid;place-items:center;box-shadow:0 16px 36px -12px rgba(37,211,102,.55);transition:transform .3s var(--ease)}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px}

/* Reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.hero-mark .ghost.g2{animation:none}html{scroll-behavior:auto}.cur{display:none}}

/* Language switch */
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 1rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;font-size:.95rem;cursor:pointer;text-decoration:none;transition:border-color .3s,background .3s}
.lang:hover{border-color:var(--accent-soft);background:var(--ink-3)}
.hdr .acts{display:flex;align-items:center;gap:.6rem}
@media(max-width:980px){.hdr .acts .btn{display:none}}
/* LTR mirroring */
[dir=ltr] .nav a::after,[dir=ltr] .fig .bar::after,[dir=ltr] .list details::before{transform-origin:left}
[lang=en] h1,[lang=en] h2,[lang=en] h3{line-height:1.2}
[lang=en] .hero-copy h1{line-height:1.12;letter-spacing:-.01em}
[lang=en] .close h2{line-height:1.15}
[lang=en] body,[lang=en]{line-height:1.7}
@media(max-width:760px){.fig .v{font-size:clamp(1.9rem,9vw,2.6rem)}.portrait .name{bottom:-4%}}
.wa-float{inset-inline-start:auto;right:max(18px,env(safe-area-inset-right,0px))}

svg.mk{fill:#fff;display:block}
/* Intro — the mark assembles once on load */
body.is-intro{overflow:hidden}
.intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;transition:opacity .8s var(--ease),clip-path .9s var(--ease);clip-path:circle(150% at 50% 50%);cursor:pointer}
.intro.out{opacity:0;clip-path:circle(0% at 50% 45%);pointer-events:none}
.intro-in{display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.intro-mark{position:relative;width:min(64vw,300px);aspect-ratio:1/1;display:grid;place-items:center}
.intro .rings{position:absolute;inset:0;width:100%;height:100%;fill:none;overflow:visible}
.intro .rings rect{stroke-dasharray:1;stroke-dashoffset:1;stroke-width:1.2}
.intro .r1{stroke:rgba(156,194,240,.35);animation:draw 1.1s var(--ease) 1.05s forwards}
.intro .r2{stroke:var(--accent);animation:draw 1s var(--ease) .85s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.intro .pulse{position:absolute;inset:22%;border:1.5px solid var(--accent-soft);border-radius:28%;transform:rotate(45deg) scale(.6);opacity:0;animation:pulse 1.2s var(--ease) 1.25s forwards}
@keyframes pulse{0%{opacity:.9;transform:rotate(45deg) scale(.7)}100%{opacity:0;transform:rotate(45deg) scale(1.55)}}
.intro .logo-svg{position:absolute;top:24%;height:52%;left:50%;width:auto;transform:translateX(-50%);fill:#fff;overflow:visible}
.intro .pc{opacity:0;transform-box:fill-box;transform-origin:center;animation:join .95s cubic-bezier(.2,.9,.2,1) forwards}
.intro .p-femur{transform:translate(-90px,-260px) rotate(-14deg);animation-delay:.15s}
.intro .p-tibia{transform:translate(70px,300px) rotate(12deg);animation-delay:.25s}
.intro .p-fib{transform:translate(-260px,60px) scale(.6);animation-delay:.4s}
.intro .p-pat{transform:scale(0) rotate(-90deg);animation-delay:.55s}
.intro .p-ftop{transform:translate(320px,-160px);animation-delay:.35s}
.intro .p-fmid{transform:translate(300px,40px);animation-delay:.48s}
@keyframes join{60%{opacity:1}100%{opacity:1;transform:none}}
.intro-word{text-align:center;opacity:0;transform:translateY(12px);animation:word .8s var(--ease) 1.3s forwards}
.intro-word b{display:block;font-size:clamp(1.3rem,4vw,1.8rem);line-height:1.4}
.intro-word small{display:block;color:var(--muted);letter-spacing:.32em;font-size:.72rem;margin-top:.35rem;direction:ltr}
@keyframes word{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.intro{display:none}.hero-mark .orbit{animation:none}}
/* Hover micro-interactions — light, only on devices with a real pointer */
@media(hover:hover) and (pointer:fine){
.btn{will-change:transform}
.btn:active{transform:scale(.97)!important}
.btn svg{transition:transform .45s var(--ease)}
.btn:hover svg{transform:rotate(-12deg) scale(1.12)}
.btn-line:hover svg{transform:translateX(-3px)}
[dir=ltr] .btn-line:hover svg{transform:translateX(3px)}
.logo .tile{transition:border-color .3s,background .3s}
.logo .tile .mk{transition:transform .6s var(--ease)}
.logo:hover .tile{border-color:var(--accent);background:#123760}
.logo:hover .tile .mk{transform:rotate(-8deg) scale(1.08)}
.fig{transition:background .4s var(--ease)}
.fig .v{transition:transform .5s var(--ease),color .3s}
.fig:hover{background:rgba(13,43,78,.45)}
.fig:hover .v{transform:translateY(-6px);color:var(--accent-soft)}
.list summary .d{will-change:transform}
.band li{transition:background .3s,border-color .3s,transform .35s var(--ease)}
.band li:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.step .n{transition:transform .5s var(--ease)}
.step:hover .n{transform:rotate(180deg)}
.pillar h3{transition:color .3s}
.pillar:hover h3{color:var(--on-ivory-accent)}
.contact .row b{transition:color .3s}
.contact a.row:hover b{color:var(--accent-soft)}
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease)}
.hero-mark .core,.hero-mark .ghost,.hero-mark .orbit{transition:translate .6s var(--ease)}
.portrait .photo img{transition:transform .6s var(--ease),filter .6s}
.portrait:hover .photo img{transform:translateX(-50%) scale(1.03)}
}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:waring 2.8s var(--ease) infinite;pointer-events:none}
.wa-float:hover::after{animation-duration:1.2s}
@keyframes waring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.wa-float::after{animation:none;display:none}}
[dir=ltr]{unicode-bidi:isolate}
.foot-grid a.ig{display:inline-flex;align-items:center;gap:.5rem}
.foot-grid a.ig svg{width:18px;height:18px;flex:none;transition:transform .4s var(--ease),color .3s}
.foot-grid a.ig:hover svg{transform:rotate(-10deg) scale(1.15);color:#E1306C}
/* Footer social buttons */
.social{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.soc{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.55rem 1.1rem .55rem 1.25rem;border-radius:999px;border:1px solid var(--line);background:var(--ink-3);color:var(--fg)!important;text-decoration:none;font-weight:700;font-size:.95rem;transition:background .35s var(--ease),border-color .35s,transform .35s var(--ease),color .3s}
.soc svg{width:24px;height:24px;flex:none;transition:transform .45s var(--ease)}
.soc.ig svg{color:#F58529}
.soc.ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B 45%,#8134AF 75%,#515BD4);border-color:transparent;transform:translateY(-3px)}
.soc.ig:hover svg{color:#fff;transform:rotate(-10deg) scale(1.12)}
.soc.wa svg{color:var(--wa)}
.soc.wa:hover{background:var(--wa);border-color:var(--wa);color:#04172D!important;transform:translateY(-3px)}
.soc.wa:hover svg{color:#04172D}
/* Hero mark: always-on gentle float + smooth parallax on every device */
.hero-mark .core .mk{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-2deg)}}
.hero-mark .core,.hero-mark .ghost,.hero-mark .orbit{transition:translate .5s var(--ease)}
/* Responsive polish */
.svc-head .btn{align-self:flex-start}
@media(max-width:560px){
.logo b{font-size:.95rem;white-space:nowrap}
.logo small{display:none}
.logo .tile{width:46px;height:46px;border-radius:12px}
.logo .tile .mk{height:30px}
.hero-cta .btn{flex:1 1 auto;justify-content:center}
.hero-mark{max-width:240px}
.soc{flex:1 1 auto;justify-content:center}
.site-foot{padding-bottom:calc(6rem + env(safe-area-inset-bottom,0px))}
}
@media(min-width:561px) and (max-width:1024px){
.hero-copy h1{font-size:clamp(2.2rem,6vw,3.6rem)}
.wrap{padding-inline:32px}
}
@media(prefers-reduced-motion:reduce){.hero-mark .core .mk{animation:none}}
/* Tap / click ripple — soft ring + small diamond at the touch point */
.tap{position:fixed;width:0;height:0;pointer-events:none;z-index:120}
.tap i,.tap b{position:absolute;left:0;top:0;display:block}
.tap i{width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:1.5px solid rgba(156,194,240,.85);background:radial-gradient(circle,rgba(70,137,219,.28) 0%,rgba(70,137,219,0) 70%);transform:scale(.2);opacity:.9;animation:tapring .75s cubic-bezier(.2,.7,.1,1) forwards}
.tap b{width:10px;height:10px;margin:-5px 0 0 -5px;background:#9CC2F0;transform:rotate(45deg) scale(1);opacity:.9;animation:tapdot .6s cubic-bezier(.2,.7,.1,1) forwards}
@keyframes tapring{to{transform:scale(1.6);opacity:0}}
@keyframes tapdot{to{transform:rotate(225deg) scale(.2);opacity:0}}
/* Journey globe — Montana & New York to Amman */
.reach{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.reach .txt{display:flex;flex-direction:column;gap:1.4rem}
.reach h2{font-size:var(--s-1)}
.reach .lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.95;color:var(--muted);max-width:32em}
[lang=en] .reach .lead{line-height:1.7}
.reach .quote{font-size:var(--s-2);font-weight:700;color:var(--accent-soft);line-height:1.5;padding-inline-start:1rem;border-inline-start:2px solid var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;font-size:.92rem;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease)}
.chip i{width:8px;height:8px;background:var(--accent-soft);transform:rotate(45deg);transition:transform .4s var(--ease)}
.chip:hover,.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--ink-3)}
.chip[aria-pressed="true"] i{transform:rotate(225deg) scale(1.3)}
.chip.hq i{background:var(--accent)}
.globe-box{position:relative;aspect-ratio:1/1;width:100%;max-width:640px;justify-self:center;touch-action:pan-y;cursor:grab}
.globe-box.drag{cursor:grabbing}
.globe-box canvas{width:100%;height:100%;display:block}
@media(max-width:900px){.reach{grid-template-columns:minmax(0,1fr)}.globe-box{order:-1;max-width:520px}}