/* Layout: dark gallery of a Dubai founder. Gold arch motif, map of the Algeria to Dubai journey, editorial serif over clean sans. */
:root{
  --ink:#0B110E; --ink-2:#101814; --ink-3:#16211B; --line:#24332B;
  --gold:#C9A45C; --gold-hi:#E4C88C; --gold-lo:#8E7238;
  --ivory:#F4EFE6; --sand:#C8BFAE; --mute:#93A097; --palm:#2F4A3C;
  --display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --body:"Manrope","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ar-display:"Amiri","Noto Naskh Arabic",serif;
  --ar-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1280px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--body);font-size:16px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
[dir="rtl"] body,[dir="rtl"]{font-family:var(--ar-body)}
img,svg,canvas{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}
[dir="rtl"] .eyebrow{font-family:var(--ar-body);letter-spacing:0;font-size:14px}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;line-height:1.04;letter-spacing:-.01em}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:var(--ar-display);letter-spacing:0;line-height:1.35}
h2{font-size:clamp(38px,5vw,72px)}
em.g{font-style:italic;color:var(--gold)}
[dir="rtl"] em.g{font-style:normal}
.lead{font-size:clamp(17px,1.4vw,19px);color:var(--sand);max-width:60ch;margin:0}
.skip{position:fixed;inset-inline-start:16px;top:-80px;background:var(--gold);color:var(--ink);padding:10px 16px;z-index:130;border-radius:8px;transition:top .3s}
.skip:focus{top:16px}

/* progress + cursor */
.progress{position:fixed;inset:0 0 auto;height:2px;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);z-index:60}
[dir="rtl"] .progress{transform-origin:100% 50%}
.cursor{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:90;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,opacity .3s;opacity:0;mix-blend-mode:difference}
.cursor.on{opacity:1}
.cursor.big{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(201,164,92,.18)}
.dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:91;opacity:0}
.dot.on{opacity:1}
@media (pointer:coarse){.cursor,.dot{display:none}}

/* preloader */
.loader{display:none}
.js .loader{position:fixed;inset:0;background:var(--ink);z-index:120;display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
.loader.done{opacity:0;visibility:hidden}
.loader svg{width:76px;height:95px}
.loader .la{stroke-dasharray:420;stroke-dashoffset:420;animation:ldraw 1.1s var(--ease) forwards}
.loader rect{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:lrise .6s var(--ease) forwards}
.loader rect:nth-of-type(1){animation-delay:.55s}.loader rect:nth-of-type(2){animation-delay:.7s}.loader rect:nth-of-type(3){animation-delay:.85s}
@keyframes ldraw{to{stroke-dashoffset:0}}
@keyframes lrise{to{transform:scaleY(1)}}

/* header */
.site-head{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:transform .5s var(--ease),background .4s,border-color .4s;border-bottom:1px solid transparent}
.site-head.solid{background:rgba(11,17,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.site-head.hide{transform:translateY(-100%)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px}
.brand{display:flex;align-items:center;gap:14px;color:var(--ivory)}
.brand:hover{color:var(--ivory)}
.brand svg{width:30px;height:38px;flex:none}
.brand-word{display:inline-flex;flex-direction:column;gap:5px}
.brand-word b{font-family:var(--display);font-weight:600;font-size:19px;line-height:1;letter-spacing:.12em;margin-inline-end:-.12em;white-space:nowrap}
.brand-word i{display:flex;justify-content:space-between;font-style:normal;font-size:8px;font-weight:700;color:var(--gold)}
[dir="rtl"] .brand-word b{font-family:var(--ar-display);font-weight:700;font-size:24px;letter-spacing:0;margin:0}
[dir="rtl"] .brand-word i{justify-content:center;gap:8px;font-family:var(--ar-display);font-size:13px;align-items:center}
[dir="rtl"] .brand-word i::before,[dir="rtl"] .brand-word i::after{content:"";flex:1;height:1px;background:var(--gold)}
.nav{display:flex;align-items:center;gap:30px;font-size:14px}
.nav a{color:var(--sand);position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover{color:var(--ivory)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.lang{font-family:var(--ar-display);font-size:17px!important}
[dir="rtl"] .lang{font-family:var(--body);font-size:13px!important;letter-spacing:.12em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid var(--gold);color:var(--gold);background:transparent;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),border-color .45s;font-family:inherit}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:none}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid::before{background:var(--ivory)}
.btn.quiet{border-color:var(--line);color:var(--ivory)}
.btn .arr{transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
[dir="rtl"] .btn .arr{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ivory);cursor:pointer}
.menu-btn span{display:block;width:18px;height:1.5px;background:currentColor;margin:4px auto;transition:transform .4s var(--ease)}
@media (max-width:980px){
  .nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;gap:26px;font-size:24px;font-family:var(--display);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;padding:max(20px,env(safe-area-inset-top,0px)) 20px 20px}
  .nav.open{opacity:1;visibility:visible}
  .menu-btn{display:block;position:relative;z-index:2}
  .menu-btn[aria-expanded="true"] span:first-child{transform:translateY(2.75px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-2.75px) rotate(-45deg)}
}

/* hero */
.hero{position:relative;padding-top:calc(120px + env(safe-area-inset-top,0px));padding-bottom:56px;overflow:hidden;isolation:isolate}
.hero canvas.map{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.95}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(to bottom,transparent,var(--ink));z-index:-1;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px;min-width:0}
.hero h1{font-size:clamp(46px,5.6vw,86px);line-height:1}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.hero h1 .w>span{display:inline-block}
[dir="rtl"] .hero h1{line-height:1.25;font-size:clamp(46px,6.2vw,92px)}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px}
.coords{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.coords b{color:var(--sand);font-weight:500}
.coords .ln{width:48px;height:1px;background:linear-gradient(90deg,var(--gold-lo),var(--gold))}
[dir="rtl"] .coords .ln{transform:scaleX(-1)}
.portrait{position:relative;justify-self:center;width:100%;max-width:470px}
.portrait .frame{position:relative;aspect-ratio:23/29;border-radius:240px 240px 6px 6px;overflow:hidden;background:var(--ink-3);max-width:100%}
.portrait .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.08);will-change:transform}
.portrait .outline{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);pointer-events:none;overflow:visible}
.portrait .outline path{stroke-dasharray:1700;stroke-dashoffset:1700}
.chip{position:absolute;display:flex;flex-direction:column;gap:3px;padding:13px 18px;border-radius:14px;background:rgba(11,17,14,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);white-space:nowrap}
.chip small{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
[dir="rtl"] .chip small{font-family:var(--ar-body);letter-spacing:0;font-size:12px}
.chip strong{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ivory)}
[dir="rtl"] .chip strong{font-family:var(--ar-display);font-size:19px}
.chip.c1{inset-inline-start:-34px;bottom:30%}
.chip.c2{inset-inline-end:-26px;bottom:7%;background:var(--gold);border-color:var(--gold)}
.chip.c2 small{color:#3A2E14}
.chip.c2 strong{color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:8px}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#5FD38D;box-shadow:0 0 0 0 rgba(95,211,141,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(95,211,141,0)}100%{box-shadow:0 0 0 0 rgba(95,211,141,0)}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:72px;padding-top:32px;border-top:1px solid var(--line)}
.stat{display:flex;flex-direction:column;gap:4px}
.stat .n{font-family:var(--display);font-size:clamp(42px,4.6vw,64px);line-height:1;color:var(--ivory);font-variant-numeric:tabular-nums}
.stat .n sup{font-size:.5em;color:var(--gold);vertical-align:top;margin-inline-start:2px}
.stat .t{font-size:13.5px;color:var(--mute)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:64px}
  .portrait{max-width:380px}
  .chip.c1{inset-inline-start:-8px}
  .chip.c2{inset-inline-end:-8px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* marquee */
.band{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding-block:26px}
.band-track{display:flex;gap:52px;width:max-content;font-family:var(--display);font-size:clamp(26px,3vw,40px);color:var(--sand);white-space:nowrap;animation:mq 38s linear infinite}
[dir="rtl"] .band-track{font-family:var(--ar-display);animation-direction:reverse}
.band-track .sep{color:var(--gold);font-size:.6em;align-self:center}
.band:hover .band-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* words */
.words{padding-block:150px}
.words-in{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:48px}
.words p.big{font-family:var(--display);font-size:clamp(32px,4.2vw,60px);line-height:1.16;margin:0;color:var(--ivory)}
[dir="rtl"] .words p.big{font-family:var(--ar-display);line-height:1.6}
.words p.big .wd{transition:color .3s}
.words p.big .wd.dim{color:#3D4A42}
.sign{display:flex;align-items:center;gap:18px;margin-top:40px;color:var(--mute);font-size:14px}
.sign img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.sign b{display:block;color:var(--ivory);font-family:var(--display);font-size:22px;font-weight:600}
[dir="rtl"] .sign b{font-family:var(--ar-display)}
@media (max-width:800px){.words-in{grid-template-columns:1fr}.words{padding-block:100px}}

/* ventures */
.ventures{padding-block:120px 60px}
.v-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:56px}
.v-head .lead{max-width:420px}
.v-rail{overflow-x:auto;overflow-y:hidden;max-width:100vw;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.v-rail::-webkit-scrollbar{display:none}
.v-rail.pinned{overflow:hidden;scroll-snap-type:none}
.vcard{scroll-snap-align:center}
.v-track{display:flex;gap:28px;width:max-content;padding-inline:max(20px,calc((100vw - var(--wrap))/2 + 20px));padding-bottom:40px}
.vcard{position:relative;width:min(560px,82vw);display:flex;flex-direction:column;gap:22px;padding:34px;border-radius:28px;background:var(--ink-2);border:1px solid var(--line);color:var(--ivory);transform-style:preserve-3d;transition:border-color .5s,background .5s;flex:none}
.vcard:hover{border-color:var(--gold);background:var(--ink-3);color:var(--ivory)}
.vcard .art{height:250px;border-radius:20px;background:var(--ink);display:grid;place-items:center;overflow:hidden;position:relative}
.vcard .art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(201,164,92,.13),transparent 60%);opacity:0;transition:opacity .6s}
.vcard:hover .art::before{opacity:1}
.vcard .art svg{width:300px;height:190px;transition:transform .8s var(--ease)}
.vcard:hover .art svg{transform:scale(1.06)}
.vmeta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
[dir="rtl"] .vmeta{font-family:var(--ar-body);letter-spacing:0;font-size:13px}
.vmeta .go{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--sand);transition:all .5s var(--ease)}
.vcard:hover .vmeta .go{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:rotate(-45deg)}
[dir="rtl"] .vcard:hover .vmeta .go{transform:rotate(45deg) scaleX(-1)}
.vcard h3{font-size:clamp(34px,3.4vw,46px);font-weight:600}
.vcard p{margin:0;color:var(--sand);font-size:15.5px;max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--sand)}
/* venture illustrations */
.drip{animation:drip 2.6s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(-6px) scaleY(.4);opacity:0}30%{opacity:1}80%{transform:translateY(28px) scaleY(1);opacity:1}100%{transform:translateY(34px);opacity:0}}
.drip{transform-box:fill-box;transform-origin:top}
.bee{animation:bee 7s ease-in-out infinite}
@keyframes bee{0%,100%{transform:translate(0,0)}25%{transform:translate(18px,-10px)}50%{transform:translate(34px,4px)}75%{transform:translate(12px,12px)}}
.rec{animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.chartline{stroke-dasharray:160;stroke-dashoffset:160;animation:cl 3.2s var(--ease) infinite}
@keyframes cl{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-160}}
.truck{animation:truck 6s ease-in-out infinite}
@keyframes truck{0%,100%{transform:translateX(-18px)}50%{transform:translateX(18px)}}
.road{animation:road 1s linear infinite}
@keyframes road{to{stroke-dashoffset:-24}}
.wheel{transform-box:fill-box;transform-origin:center;animation:spin 1.2s linear infinite}
.coin{transform-box:fill-box;transform-origin:center;animation:spin 16s linear infinite}
.flow{stroke-dasharray:6 6;animation:road .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){.v-track{flex-direction:column;width:auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}.vcard{width:100%}.vcard .art{height:210px}}

/* journey */
.journey{padding-block:120px;background:var(--ink-2);border-block:1px solid var(--line)}
.j-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
.j-intro{display:flex;flex-direction:column;gap:22px;align-self:start;position:sticky;top:120px}
.tl{position:relative;display:flex;flex-direction:column;gap:56px;padding-inline-start:44px}
.tl::before{content:"";position:absolute;inset-inline-start:7px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl .fill{position:absolute;inset-inline-start:7px;top:8px;width:1px;height:calc(100% - 16px);background:var(--gold);transform-origin:top;transform:scaleY(0)}
.step{position:relative;display:flex;flex-direction:column;gap:8px}
.step::before{content:"";position:absolute;inset-inline-start:-44px;top:10px;width:15px;height:15px;border-radius:50%;background:var(--ink-2);border:1px solid var(--gold);transition:background .5s}
.step.on::before{background:var(--gold);box-shadow:0 0 0 6px rgba(201,164,92,.14)}
.step .yr{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--gold)}
.step h3{font-size:clamp(28px,2.6vw,36px);font-weight:600}
.step p{margin:0;color:var(--sand);max-width:56ch}
.step .where{font-size:13px;color:var(--mute)}
@media (max-width:860px){.j-grid{grid-template-columns:1fr}.j-intro{position:static}}

/* credentials */
.creds{padding-block:130px}
.c-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.cred{position:relative;padding:36px 32px;border-radius:24px;border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:border-color .5s,transform .6s var(--ease)}
.cred:hover{border-color:var(--gold);transform:translateY(-6px)}
.cred svg{width:54px;height:54px;color:var(--gold)}
.cred h3{font-size:34px;font-weight:600}
.cred p{margin:0;color:var(--sand);font-size:15px}
.cred .big{position:absolute;inset-inline-end:-10px;bottom:-30px;font-family:var(--display);font-size:150px;line-height:1;color:var(--ink-3);pointer-events:none;transition:color .6s}
.cred:hover .big{color:#1F2D25}
.cred>*:not(.big){position:relative}
.skills{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.skills span{padding:10px 18px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line);font-size:14px;color:var(--sand)}
@media (max-width:860px){.c-grid{grid-template-columns:1fr}}

/* approach */
.approach{padding-block:40px 130px}
.a-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:56px;border-radius:28px;overflow:hidden;background:var(--line)}
.a-item{background:var(--ink);padding:40px 34px;display:flex;flex-direction:column;gap:16px;transition:background .5s}
.a-item:hover{background:var(--ink-2)}
.a-item .no{font-family:var(--display);font-size:64px;line-height:1;color:var(--gold)}
.a-item h3{font-size:32px;font-weight:600}
.a-item p{margin:0;color:var(--sand);font-size:15.5px}
@media (max-width:860px){.a-grid{grid-template-columns:1fr}}

/* faq */
.faq{padding-block:120px;background:var(--ink-2);border-block:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
.q{border-bottom:1px solid var(--line)}
.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:26px;font-family:var(--display);font-size:clamp(22px,2vw,28px);font-weight:600;min-height:44px}
[dir="rtl"] .q summary{font-family:var(--ar-display)}
.q summary::-webkit-details-marker{display:none}
.q summary .pm{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .5s var(--ease),background .4s,color .4s;color:var(--gold)}
.q[open] summary .pm{transform:rotate(45deg);background:var(--gold);color:var(--ink)}
.q p{margin:0 0 26px;color:var(--sand);max-width:62ch}
@media (max-width:860px){.f-grid{grid-template-columns:1fr}}

/* contact */
.contact{padding-block:130px;position:relative;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
.contact h2{font-size:clamp(44px,6vw,92px)}
.cinfo{display:flex;flex-direction:column;gap:6px;margin-top:36px}
.crow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
.crow small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
[dir="rtl"] .crow small{font-family:var(--ar-body);letter-spacing:0;font-size:12px}
.crow .v{font-size:17px;color:var(--ivory);user-select:all;word-break:break-word}
.crow .v a{color:var(--ivory)}
.crow .v a:hover{color:var(--gold)}
.copy{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--sand);font:inherit;font-size:12.5px;cursor:pointer;transition:all .3s}
.copy:hover{border-color:var(--gold);color:var(--gold)}
form.enq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:36px;border-radius:28px;background:var(--ink-2);border:1px solid var(--line);align-self:start}
.fld{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--sand)}
.fld.full{grid-column:1/-1}
.fld input,.fld select,.fld textarea{font:inherit;font-size:15px;color:var(--ivory);background:var(--ink);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-height:50px;transition:border-color .3s}
.fld textarea{resize:vertical;min-height:130px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold)}
.form-note{grid-column:1/-1;font-size:13px;color:var(--mute);margin:0}
.form-note.ok{color:var(--gold-hi)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}form.enq{grid-template-columns:1fr;padding:24px}}

/* footer */
.foot{overflow:hidden;border-top:1px solid var(--line);padding-block:44px calc(44px + env(safe-area-inset-bottom,0px))}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;font-size:13.5px;color:var(--mute)}
.foot-in nav{display:flex;flex-wrap:wrap;gap:22px}
.foot-in nav a{color:var(--sand)}
.foot-in nav a:hover{color:var(--gold)}
.huge{font-family:var(--display);font-weight:600;font-size:clamp(40px,9.4vw,150px);line-height:.9;color:var(--ink-3);letter-spacing:-.02em;white-space:nowrap;margin-bottom:36px;user-select:none}
[dir="rtl"] .huge{font-family:var(--ar-display);letter-spacing:0;line-height:1.2}


/* ===== Tablet ===== */
@media (max-width:900px){
  h2{font-size:clamp(32px,5.6vw,46px)}
  .hero{padding-top:calc(104px + env(safe-area-inset-top,0px))}
  .hero h1{font-size:clamp(38px,6.4vw,56px)}
  [dir="rtl"] .hero h1{font-size:clamp(34px,6vw,50px)}
  .words,.ventures,.journey,.creds,.faq,.contact{padding-block:96px}
  .approach{padding-block:24px 96px}
  .words p.big{font-size:clamp(26px,4.4vw,36px)}
  .contact h2{font-size:clamp(36px,6vw,54px)}
}
/* ===== Phone ===== */
@media (max-width:600px){
  body{font-size:15px;line-height:1.6}
  .wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  .head-in{padding-block:12px}
  .brand svg{width:24px;height:30px}
  .brand-word b{font-size:15px}
  .brand-word i{font-size:7px}
  [dir="rtl"] .brand-word b{font-size:19px}
  [dir="rtl"] .brand-word i{font-size:11px}
  .menu-btn{width:44px;height:44px}
  .eyebrow{font-size:10.5px;letter-spacing:.18em;line-height:1.6}
  [dir="rtl"] .eyebrow{font-size:13px}
  h2{font-size:clamp(28px,7.8vw,34px);line-height:1.1}
  [dir="rtl"] h2{line-height:1.4}
  .lead{font-size:15.5px;line-height:1.65}
  .btn{min-height:48px;padding:0 22px;font-size:14.5px}

  .hero{padding-top:calc(92px + env(safe-area-inset-top,0px));padding-bottom:40px}
  .hero-grid{gap:48px}
  .hero-copy{gap:20px}
  .hero h1{font-size:clamp(32px,9.2vw,40px);line-height:1.08}
  [dir="rtl"] .hero h1{font-size:clamp(30px,8.6vw,38px);line-height:1.45}
  .hero .cta{flex-direction:column}
  .hero .cta .btn{width:100%}
  .coords{font-size:10px;gap:6px 10px}
  .coords .ln{width:28px}
  .portrait{max-width:300px}
  .portrait .outline{inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px)}
  .chip{padding:9px 13px;border-radius:12px}
  .chip small{font-size:8.5px;letter-spacing:.14em}
  [dir="rtl"] .chip small{font-size:10.5px}
  .chip strong{font-size:15px}
  [dir="rtl"] .chip strong{font-size:15px}
  .chip.c1{inset-inline-start:-6px;bottom:32%}
  .chip.c2{inset-inline-end:-6px;bottom:6%}
  .stats{gap:22px 16px;margin-top:48px;padding-top:24px}
  .stat .n{font-size:34px}
  .stat .t{font-size:12.5px;line-height:1.4}

  .band{padding-block:16px}
  .band-track{font-size:20px;gap:28px}

  .words,.ventures,.journey,.creds,.faq,.contact{padding-block:72px}
  .approach{padding-block:16px 72px}
  .words-in{gap:18px}
  .words p.big{font-size:22px;line-height:1.4}
  [dir="rtl"] .words p.big{font-size:21px;line-height:1.8}
  .sign{margin-top:28px;font-size:13px}
  .sign img{width:46px;height:46px}
  .sign b{font-size:18px}

  .v-head{margin-bottom:32px;gap:16px}
  .v-track{gap:18px;padding-bottom:8px}
  .vcard{padding:20px;gap:14px;border-radius:22px}
  .vcard .art{height:170px;border-radius:16px}
  .vcard .art svg{width:230px;height:146px}
  .vmeta{font-size:10px;letter-spacing:.12em}
  [dir="rtl"] .vmeta{font-size:12px}
  .vmeta .go{width:38px;height:38px}
  .vcard h3{font-size:28px}
  .vcard p{font-size:14.5px}
  .tags span{font-size:11.5px;padding:5px 10px}

  .j-grid{gap:40px}
  .tl{gap:36px;padding-inline-start:32px}
  .step::before{inset-inline-start:-32px;width:13px;height:13px}
  .tl::before,.tl .fill{inset-inline-start:6px}
  .step .yr{font-size:10.5px}
  .step h3{font-size:22px}
  [dir="rtl"] .step h3{font-size:21px}
  .step p{font-size:14.5px}

  .c-grid{gap:14px;margin-top:32px}
  .cred{padding:24px 22px;gap:10px;border-radius:20px}
  .cred svg{width:40px;height:40px}
  .cred h3{font-size:26px}
  .cred p{font-size:14.5px}
  .cred .big{display:none}
  .skills{gap:8px;margin-top:20px}
  .skills span{font-size:12.5px;padding:8px 13px}

  .a-grid{margin-top:32px;border-radius:22px}
  .a-item{padding:26px 22px;gap:10px}
  .a-item .no{font-size:40px}
  .a-item h3{font-size:24px}
  .a-item p{font-size:14.5px}

  .f-grid{gap:20px}
  .q summary{font-size:18px;padding-block:18px;gap:14px}
  [dir="rtl"] .q summary{font-size:18px}
  .q summary .pm{width:32px;height:32px}
  .q p{font-size:14.5px;margin-bottom:18px}

  .contact-grid{gap:36px}
  .contact h2{font-size:clamp(30px,8.4vw,36px)}
  .cinfo{margin-top:22px}
  .crow{padding-block:14px;gap:12px}
  .crow .v{font-size:15px}
  form.enq{padding:20px;gap:14px;border-radius:22px}
  .fld input,.fld select,.fld textarea{font-size:16px;padding:12px 14px;min-height:48px}
  form.enq .btn{width:100%}

  .foot{padding-block:32px calc(32px + env(safe-area-inset-bottom,0px))}
  .huge{font-size:clamp(30px,10vw,44px);margin-bottom:22px;line-height:1}
  .foot-in{flex-direction:column;align-items:flex-start;gap:14px;font-size:12.5px}
  .foot-in nav{gap:16px}
}
@media (max-width:360px){
  .hero h1{font-size:30px}
  .stats{grid-template-columns:1fr 1fr}
  .stat .n{font-size:30px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .portrait .outline path{stroke-dashoffset:0}
  .loader{display:none}
}
