/* ═══════════════════════════════════════════════════════════
   riyadhossam.online — Luxury Digital Studio
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root{
  --ink:        #06060A;
  --ink-2:      #0B0B11;
  --ink-3:      #111119;
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);

  --text:       #EFEDE8;
  --text-2:     rgba(239,237,232,.66);
  --text-3:     rgba(239,237,232,.40);

  --gold:       #C9A961;
  --gold-2:     #E8D4A0;
  --gold-3:     #8A6D2F;
  --gold-glow:  rgba(201,169,97,.18);

  --grad-gold:  linear-gradient(135deg,#8A6D2F 0%,#C9A961 26%,#F3E3B8 50%,#C9A961 74%,#8A6D2F 100%);

  --font-d:     'Cormorant Garamond', 'Times New Roman', serif;
  --font-b:     'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-m:     'JetBrains Mono', ui-monospace, monospace;

  --wrap:       1240px;
  --pad:        clamp(18px, 4.4vw, 56px);
  --sec:        clamp(62px, 8.4vw, 132px);

  --ease:       cubic-bezier(.19,1,.22,1);
  --ease-2:     cubic-bezier(.4,0,.2,1);
  --r:          4px;
}

/* Arabic typography swap */
html[lang="ar"]{
  --font-d: 'IBM Plex Sans Arabic', 'Cormorant Garamond', serif;
  --font-b: 'IBM Plex Sans Arabic', 'Inter Tight', sans-serif;
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:300;
}
body.is-locked{overflow:hidden}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

::selection{background:var(--gold);color:#0A0A0F}

/* Scrollbar */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:rgba(201,169,97,.28);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(201,169,97,.5)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.skip-link{
  position:fixed;top:-100px;inset-inline-start:16px;z-index:9999;
  background:var(--gold);color:#0A0A0F;padding:10px 18px;border-radius:var(--r);
  font-size:13px;font-weight:500;transition:top .2s;
}
.skip-link:focus{top:16px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:840px}

/* ── PRELOADER ────────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:grid;place-items:center;
  transition:opacity .8s var(--ease),visibility .8s;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader__mark{
  font-family:var(--font-d);font-size:46px;letter-spacing:.16em;font-weight:400;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-inline-start:.16em;
}
.loader__bar{width:180px;height:1px;background:var(--line-2);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .25s var(--ease-2)}
.loader__pct{font-family:var(--font-m);font-size:11px;color:var(--text-3);letter-spacing:.1em}

/* ── AMBIENT BG ───────────────────────────────────────────── */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient__orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;will-change:transform}
.ambient__orb--1{width:56vw;height:56vw;top:-18vw;inset-inline-start:-12vw;
  background:radial-gradient(circle,rgba(201,169,97,.22),transparent 68%);animation:drift1 26s ease-in-out infinite}
.ambient__orb--2{width:46vw;height:46vw;top:44vh;inset-inline-end:-14vw;
  background:radial-gradient(circle,rgba(120,90,200,.16),transparent 68%);animation:drift2 32s ease-in-out infinite}
.ambient__orb--3{width:40vw;height:40vw;bottom:-14vw;inset-inline-start:28vw;
  background:radial-gradient(circle,rgba(90,160,150,.13),transparent 68%);animation:drift3 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(7vw,6vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-8vw,-7vh)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(5vw,-5vh)}}

.ambient__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(60px,8vw,110px) clamp(60px,8vw,110px);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent 78%);
}
.ambient__grain{
  position:absolute;inset:-200%;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

.scroll-progress{
  position:fixed;top:0;inset-inline-start:0;height:2px;width:0;z-index:9997;
  background:var(--grad-gold);transition:width .1s linear;
}

/* ── NAV ──────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;inset-inline:0;z-index:900;
  transition:transform .5s var(--ease),background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,6,10,.74);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translateY(-102%)}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:18px var(--pad);
  display:flex;align-items:center;gap:28px;
}

.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand__mark{
  width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;
  border:1px solid rgba(201,169,97,.4);border-radius:50%;
  font-family:var(--font-d);font-size:14px;letter-spacing:.08em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:border-color .4s,transform .5s var(--ease);
}
.brand:hover .brand__mark{border-color:var(--gold);transform:rotate(-8deg) scale(1.06)}
.brand__text{font-size:14.5px;letter-spacing:-.005em;font-weight:400;white-space:nowrap}
.brand__dot{color:var(--text-3)}

.nav__links{display:flex;gap:30px;margin-inline-start:auto}
.nav__links a{
  font-size:13.5px;color:var(--text-2);position:relative;padding:4px 0;
  transition:color .3s;letter-spacing:.005em;
}
.nav__links a::after{
  content:'';position:absolute;bottom:0;inset-inline-start:0;width:0;height:1px;
  background:var(--gold);transition:width .4s var(--ease);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{width:100%}

.nav__actions{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
.nav__links + .nav__actions{margin-inline-start:0}

/* Language pill — sliding indicator, EN / AR */
.lang{
  position:relative;display:flex;align-items:center;flex-shrink:0;
  padding:3px;border:1px solid var(--line-2);border-radius:100px;
  background:rgba(255,255,255,.02);transition:border-color .3s;
}
.lang:hover{border-color:rgba(201,169,97,.42)}
.lang::before{
  content:'';position:absolute;top:3px;bottom:3px;inset-inline-start:3px;width:calc(50% - 3px);
  background:rgba(201,169,97,.14);border:1px solid rgba(201,169,97,.34);
  border-radius:100px;transition:transform .45s var(--ease);
}
.lang.is-ar::before{transform:translateX(100%)}
[dir="rtl"] .lang.is-ar::before{transform:translateX(-100%)}
.lang__opt{
  position:relative;z-index:1;min-width:38px;text-align:center;padding:5px 4px;
  font-family:var(--font-b);font-size:11.5px;font-weight:500;letter-spacing:.09em;
  color:var(--text-3);transition:color .35s;
}
.lang__opt.is-on{color:var(--gold-2)}

.burger{display:none;width:34px;height:34px;position:relative;flex-shrink:0}
.burger span{
  position:absolute;inset-inline-start:7px;width:20px;height:1px;background:var(--text);
  transition:transform .4s var(--ease),opacity .3s;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger.is-on span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-on span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ── MOBILE MENU ──────────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:890;background:var(--ink-2);
  display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu__links{display:flex;flex-direction:column;gap:6px}
.menu__links a{
  font-family:var(--font-d);font-size:clamp(34px,10vw,56px);line-height:1.18;
  font-weight:300;color:var(--text);opacity:0;transform:translateY(28px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
}
.menu.is-open .menu__links a{opacity:1;transform:none}
.menu.is-open .menu__links a:nth-child(1){transition-delay:.18s}
.menu.is-open .menu__links a:nth-child(2){transition-delay:.24s}
.menu.is-open .menu__links a:nth-child(3){transition-delay:.30s}
.menu.is-open .menu__links a:nth-child(4){transition-delay:.36s}
.menu.is-open .menu__links a:nth-child(5){transition-delay:.42s}
.menu.is-open .menu__links a:nth-child(6){transition-delay:.48s}
.menu__links a:hover{color:var(--gold)}
.menu__links a:last-child{color:var(--gold-2)}
.menu__foot{
  position:absolute;bottom:calc(var(--pad) + 10px);inset-inline-start:var(--pad);
  display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-3);
}
.menu__foot a{color:var(--gold)}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:100px;font-size:14px;font-weight:500;
  letter-spacing:.005em;position:relative;overflow:hidden;
  transition:color .4s,border-color .4s,transform .5s var(--ease),box-shadow .5s;
  will-change:transform;
}
.btn--sm{padding:10px 20px;font-size:13px}
.btn--lg{padding:17px 34px;font-size:15px}
.btn--full{width:100%}

.btn__arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease);flex-shrink:0}
[dir="rtl"] .btn__arrow{transform:scaleX(-1)}
.btn:hover .btn__arrow{transform:translateX(4px)}
[dir="rtl"] .btn:hover .btn__arrow{transform:scaleX(-1) translateX(4px)}

.btn--gold{background:var(--grad-gold);background-size:200% 100%;color:#0A0A0F;
  box-shadow:0 4px 24px rgba(201,169,97,.16)}
.btn--gold:hover{background-position:100% 0;box-shadow:0 8px 40px rgba(201,169,97,.32);transform:translateY(-2px)}

.btn--ghost{border:1px solid var(--line-2);color:var(--text)}
.btn--ghost::before{
  content:'';position:absolute;inset:0;background:rgba(255,255,255,.06);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.btn--ghost:hover{border-color:var(--line-2)}
.btn--ghost:hover::before{transform:scaleX(1)}
.btn--ghost > *{position:relative;z-index:1}

.btn--outline{border:1px solid rgba(201,169,97,.34);color:var(--gold-2)}
.btn--outline:hover{border-color:var(--gold);background:rgba(201,169,97,.07)}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{
  position:relative;z-index:1;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,13vh,146px) 0 clamp(52px,7.5vh,92px);
}
/* NOTE: physical `left` + physical translateX — a logical inset here would fight
   the physical transform and shove the glow off-canvas in RTL. It is a symmetric
   decorative glow, so it must centre identically in both directions. */
.hero__glow{
  position:absolute;top:14%;left:50%;transform:translateX(-50%);
  width:min(900px,92vw);height:min(900px,92vw);
  background:radial-gradient(circle,var(--gold-glow),transparent 62%);
  filter:blur(46px);pointer-events:none;
}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(26px,4vw,40px);
  font-family:var(--font-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-2);padding:8px 16px;border:1px solid var(--line);border-radius:100px;
  background:rgba(255,255,255,.02);backdrop-filter:blur(8px);
}
html[lang="ar"] .hero__eyebrow{font-family:var(--font-b);letter-spacing:0;font-size:12px}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(201,169,97,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,169,97,.55)}70%{box-shadow:0 0 0 11px rgba(201,169,97,0)}100%{box-shadow:0 0 0 0 rgba(201,169,97,0)}}

.hero__title{
  font-family:var(--font-d);
  font-size:clamp(34px,9.2vw,52px);          /* phones: width-driven */
  line-height:1.06;font-weight:300;letter-spacing:-.022em;
  margin-bottom:clamp(22px,3.4vw,38px);
  max-width:none;                             /* the three spans ARE the line breaks */
}
@media (min-width:901px){
  /* laptops & desktops: height-aware so the hero never exceeds one screen */
  .hero__title{font-size:min(5.4vw,8.4vh,98px);line-height:1.02}
}
html[lang="ar"] .hero__title{line-height:1.34;font-weight:200;letter-spacing:0;font-size:clamp(30px,8vw,46px)}
@media (min-width:901px){html[lang="ar"] .hero__title{font-size:min(4.7vw,7.3vh,84px);line-height:1.28}}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line__in{
  display:block;transform:translateY(105%);
  transition:transform 1.1s var(--ease);
}
.is-ready .hero__title .line__in{transform:none}
.is-ready .hero__title .line:nth-child(2) .line__in{transition-delay:.1s}
.is-ready .hero__title .line:nth-child(3) .line__in{transition-delay:.2s}
.hero__title em{
  font-style:italic;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-inline-end:.06em;
}
html[lang="ar"] .hero__title em{font-style:normal;font-weight:500}

.hero__sub{
  font-size:clamp(15px,min(1.7vw,2.3vh),18.5px);line-height:1.72;color:var(--text-2);
  max-width:60ch;margin-bottom:clamp(34px,4.6vw,48px);font-weight:300;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:clamp(38px,5.6vw,70px)}

.hero__proof{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px);
  padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line);
}
.proof{display:flex;flex-direction:column;gap:5px}
.proof strong{
  font-family:var(--font-d);font-size:clamp(25px,min(3.5vw,4.8vh),41px);font-weight:400;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
html[lang="ar"] .proof strong{font-family:var(--font-b);font-weight:500}
.proof span{font-size:12.5px;color:var(--text-3);line-height:1.45;letter-spacing:.01em}

.hero__scroll{
  position:absolute;bottom:26px;inset-inline-end:var(--pad);
  display:flex;align-items:center;gap:11px;
  font-family:var(--font-m);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3);
}
html[lang="ar"] .hero__scroll{font-family:var(--font-b);letter-spacing:0}
.hero__scroll i{display:block;width:46px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.hero__scroll i::after{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:40%;
  background:var(--gold);animation:slide 2.2s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
[dir="rtl"] .hero__scroll i::after{animation-name:slideR}
@keyframes slideR{0%{transform:translateX(100%)}100%{transform:translateX(-300%)}}
@media (max-width:900px){.hero__scroll{display:none}}

/* ── MARQUEE ──────────────────────────────────────────────── */
.marquee-wrap{
  position:relative;z-index:1;padding:clamp(26px,4vw,38px) 0;
  border-block:1px solid var(--line);background:rgba(255,255,255,.015);
}
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.marquee__track{display:flex;gap:0;width:max-content;animation:scroll 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .marquee__track{animation-name:scrollR}
@keyframes scrollR{from{transform:translateX(0)}to{transform:translateX(50%)}}
.marquee__item{
  display:flex;align-items:center;gap:clamp(30px,5vw,60px);
  padding-inline:clamp(15px,2.5vw,30px);
  font-family:var(--font-d);font-size:clamp(17px,2.2vw,27px);font-weight:300;
  color:var(--text-3);white-space:nowrap;letter-spacing:.005em;
  transition:color .4s;
}
html[lang="ar"] .marquee__item{font-family:var(--font-b);font-weight:300}
.marquee__item:hover{color:var(--gold-2)}
.marquee__item::after{content:'◆';font-size:7px;color:rgba(201,169,97,.42);font-family:var(--font-b)}

/* ── SECTION HEADS ────────────────────────────────────────── */
.section{position:relative;z-index:1;padding-block:var(--sec)}
.section--work{background:linear-gradient(180deg,transparent,rgba(255,255,255,.016),transparent)}

.shead{margin-bottom:clamp(44px,6vw,80px);max-width:62ch}
.shead__num{
  display:block;font-family:var(--font-m);font-size:11px;letter-spacing:.24em;
  color:var(--gold);margin-bottom:16px;
}
.shead__title{
  font-family:var(--font-d);font-size:clamp(28px,min(5vw,6.9vh),60px);line-height:1.06;
  font-weight:300;letter-spacing:-.018em;margin-bottom:16px;
}
html[lang="ar"] .shead__title{line-height:1.3;font-weight:300;letter-spacing:0}
.shead__sub{font-size:clamp(14.5px,1.5vw,16.5px);color:var(--text-2);line-height:1.7;max-width:56ch;font-weight:300}

/* ── SERVICES ─────────────────────────────────────────────── */
.grid-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.svc{
  background:var(--ink);padding:clamp(28px,3.6vw,46px);position:relative;
  transition:background .55s var(--ease);
  display:flex;flex-direction:column;gap:13px;
}
.svc::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .55s;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(201,169,97,.08),transparent 42%);
  pointer-events:none;
}
.svc:hover{background:var(--ink-3)}
.svc:hover::before{opacity:1}
.svc__ico{
  font-size:20px;color:var(--gold);margin-bottom:6px;
  transition:transform .6s var(--ease);transform-origin:center;
}
.svc:hover .svc__ico{transform:rotate(90deg) scale(1.15)}
.svc h3{font-family:var(--font-d);font-size:clamp(20px,2.1vw,26px);font-weight:400;line-height:1.24;letter-spacing:-.01em}
html[lang="ar"] .svc h3{font-weight:500;line-height:1.5}
.svc p{font-size:14.5px;color:var(--text-2);line-height:1.72;flex-grow:1}
.svc__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.svc__tags li{
  font-family:var(--font-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);padding:4px 10px;border:1px solid var(--line);border-radius:100px;
}

/* ── WORK ─────────────────────────────────────────────────── */
.grid-work{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(16px,2.4vw,28px)}
.case{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;background:var(--ink-2);position:relative;
  transition:border-color .55s,transform .7s var(--ease),box-shadow .7s var(--ease);
}
.case:hover{border-color:rgba(201,169,97,.3);transform:translateY(-5px);
  box-shadow:0 26px 70px -26px rgba(0,0,0,.85)}
.case__visual{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--c2),#08080C 72%);
  display:grid;place-items:center;
}
.case__shape{
  width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,var(--c1),transparent 64%);
  filter:blur(26px);opacity:.82;
  transition:transform 1.1s var(--ease),opacity .7s;
}
.case__shape--2{border-radius:34% 66% 58% 42%/44% 38% 62% 56%}
.case__shape--3{border-radius:62% 38% 40% 60%/48% 62% 38% 52%}
.case__shape--4{border-radius:18px;width:48%}
.case:hover .case__shape{transform:scale(1.24) rotate(22deg);opacity:1}
.case__visual::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
          mask-image:linear-gradient(180deg,#000,transparent);
}
.case__body{padding:clamp(22px,2.8vw,34px);display:flex;flex-direction:column;gap:11px}
.case__meta{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);
}
.case__meta span:first-child{color:var(--gold)}
html[lang="ar"] .case__meta{font-family:var(--font-b);letter-spacing:0;font-size:12px}
.case__title{font-family:var(--font-d);font-size:clamp(21px,2.4vw,30px);font-weight:400;line-height:1.2;letter-spacing:-.012em}
html[lang="ar"] .case__title{font-weight:500;line-height:1.45}
.case__body p{font-size:14.5px;color:var(--text-2);line-height:1.7}
.case__kpis{display:flex;gap:clamp(18px,3vw,34px);margin-top:8px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.case__kpis span{display:flex;flex-direction:column;gap:2px}
.case__kpis strong{font-family:var(--font-d);font-size:clamp(20px,2.2vw,27px);font-weight:400;color:var(--gold-2)}
html[lang="ar"] .case__kpis strong{font-family:var(--font-b);font-weight:600}
.case__kpis em{font-style:normal;font-size:11.5px;color:var(--text-3)}

/* ── MANIFESTO ────────────────────────────────────────────── */
.manifesto{position:relative;z-index:1;padding-block:clamp(70px,10vw,150px);
  border-block:1px solid var(--line);background:rgba(201,169,97,.022)}
.manifesto__text{
  font-family:var(--font-d);font-size:clamp(20px,min(3.6vw,5.1vh),43px);line-height:1.3;
  font-weight:300;letter-spacing:-.015em;max-width:22ch;
}
html[lang="ar"] .manifesto__text{line-height:1.6;letter-spacing:0;max-width:28ch}
.manifesto__text em{
  font-style:italic;background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[lang="ar"] .manifesto__text em{font-style:normal;font-weight:500}
.manifesto__text span:last-child{color:var(--text-2)}

/* ── PROCESS ──────────────────────────────────────────────── */
.steps{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.step{
  display:flex;gap:clamp(20px,4vw,60px);align-items:flex-start;
  padding-block:clamp(26px,3.4vw,42px);border-bottom:1px solid var(--line);
  transition:background .5s,padding-inline .5s var(--ease);
  padding-inline:0;
}
.step:hover{background:rgba(255,255,255,.018);padding-inline:clamp(10px,1.6vw,22px)}
.step__n{
  font-family:var(--font-m);font-size:12px;letter-spacing:.1em;color:var(--gold);
  padding-top:8px;flex-shrink:0;min-width:34px;
}
.step h3{font-family:var(--font-d);font-size:clamp(21px,2.7vw,34px);font-weight:400;
  line-height:1.2;margin-bottom:9px;letter-spacing:-.012em}
html[lang="ar"] .step h3{font-weight:500;line-height:1.45}
.step p{font-size:14.5px;color:var(--text-2);line-height:1.72;max-width:62ch}
.step__time{
  display:inline-block;margin-top:12px;font-family:var(--font-m);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  padding:4px 11px;border:1px solid var(--line);border-radius:100px;
}
html[lang="ar"] .step__time{font-family:var(--font-b);letter-spacing:0;font-size:12px}

/* ── TESTIMONIALS ─────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(18px,2.4vw,28px)}
.quote{
  border:1px solid var(--line);border-radius:6px;padding:clamp(26px,3vw,38px);
  background:var(--ink-2);display:flex;flex-direction:column;gap:20px;position:relative;
  transition:border-color .5s,transform .6s var(--ease);
}
.quote:hover{border-color:rgba(201,169,97,.26);transform:translateY(-4px)}
.quote::before{
  content:'"';position:absolute;top:6px;inset-inline-end:20px;
  font-family:var(--font-d);font-size:86px;line-height:1;color:rgba(201,169,97,.13);
}
.quote blockquote{font-size:15.5px;line-height:1.78;color:var(--text);flex-grow:1;font-weight:300;position:relative;z-index:1}
.quote figcaption{display:flex;flex-direction:column;gap:3px;padding-top:18px;border-top:1px solid var(--line)}
.quote figcaption strong{font-size:14px;font-weight:500;color:var(--gold-2)}
.quote figcaption span{font-size:12.5px;color:var(--text-3)}

/* ── PRICING ──────────────────────────────────────────────── */
.grid-price{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(18px,2.2vw,26px);align-items:stretch}
.price{
  border:1px solid var(--line);border-radius:8px;padding:clamp(28px,3.2vw,42px);
  background:var(--ink-2);display:flex;flex-direction:column;gap:16px;position:relative;
  transition:border-color .5s,transform .6s var(--ease),background .5s;
}
.price:hover{border-color:var(--line-2);transform:translateY(-4px)}
.price--feat{
  border-color:rgba(201,169,97,.38);
  background:linear-gradient(170deg,rgba(201,169,97,.07),rgba(255,255,255,.012) 48%,transparent);
  box-shadow:0 24px 70px -34px rgba(201,169,97,.4);
}
.price--feat:hover{border-color:var(--gold)}
.price__badge{
  position:absolute;top:-1px;inset-inline-end:24px;transform:translateY(-50%);
  background:var(--grad-gold);color:#0A0A0F;font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:100px;
}
html[lang="ar"] .price__badge{letter-spacing:0;font-size:11px}
.price h3{font-family:var(--font-d);font-size:clamp(24px,2.6vw,32px);font-weight:400;letter-spacing:-.01em}
html[lang="ar"] .price h3{font-weight:600}
.price__for{font-size:13.5px;color:var(--text-3);line-height:1.6;min-height:2.9em}
.price__amt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.price__from{font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
.price__amt strong{font-family:var(--font-d);font-size:clamp(28px,3.4vw,42px);font-weight:400;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang="ar"] .price__amt strong{font-family:var(--font-b);font-weight:600}
.price__amt em{font-style:normal;font-size:15px;color:var(--text-3);-webkit-text-fill-color:var(--text-3)}
.price__list{display:flex;flex-direction:column;gap:11px;flex-grow:1;margin-bottom:8px}
.price__list li{position:relative;padding-inline-start:22px;font-size:14px;color:var(--text-2);line-height:1.55}
/* checkmark: unequal arms read as a tick, not a chevron.
   Checkmarks are not mirrored in Arabic, so keep it physical in both directions. */
.price__list li::before{
  content:'';position:absolute;inset-inline-start:2px;top:5px;width:5px;height:9px;
  border:solid var(--gold);border-width:0 1.4px 1.4px 0;
  transform:rotate(45deg);
}
.price__note{margin-top:26px;font-size:12.5px;color:var(--text-3);text-align:center}

/* ── ABOUT ────────────────────────────────────────────────── */
.section--about{background:linear-gradient(180deg,transparent,rgba(255,255,255,.016),transparent)}
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(34px,6vw,90px);align-items:start}
.about__portrait{
  margin-top:30px;aspect-ratio:3/4;border-radius:6px;border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 34%,rgba(201,169,97,.2),transparent 62%),
    linear-gradient(160deg,var(--ink-3),var(--ink));
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.about__portrait span{
  font-family:var(--font-d);font-size:clamp(56px,8vw,110px);font-weight:300;letter-spacing:.08em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-inline-start:.08em;
}
.about__portrait::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 26%,#000 76%);
          mask-image:radial-gradient(circle at 50% 50%,transparent 26%,#000 76%);
}
.about__right{display:flex;flex-direction:column;gap:19px;padding-top:clamp(0px,3vw,42px)}
.about__lead{
  font-family:var(--font-d);font-size:clamp(19.5px,min(2.8vw,3.9vh),33px);line-height:1.3;
  font-weight:300;letter-spacing:-.014em;margin-bottom:6px;
}
html[lang="ar"] .about__lead{line-height:1.55;font-weight:400;letter-spacing:0}
.about__right p{font-size:15px;color:var(--text-2);line-height:1.78}
.about__vals{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;
  margin-top:18px;padding-top:26px;border-top:1px solid var(--line);
}
.about__vals div{display:flex;flex-direction:column;gap:5px}
.about__vals strong{font-family:var(--font-d);font-size:19px;font-weight:400;color:var(--gold-2)}
html[lang="ar"] .about__vals strong{font-weight:600}
.about__vals span{font-size:13px;color:var(--text-3);line-height:1.55}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq summary{
  list-style:none;cursor:pointer;padding-block:clamp(18px,2.4vw,26px);
  font-family:var(--font-d);font-size:clamp(18px,2.2vw,25px);font-weight:400;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  transition:color .35s;letter-spacing:-.008em;
}
html[lang="ar"] .fq summary{font-weight:500;letter-spacing:0}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{
  content:'';width:11px;height:11px;flex-shrink:0;position:relative;
  border-inline-end:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(45deg);transition:transform .45s var(--ease);margin-bottom:5px;
}
.fq[open] summary::after{transform:rotate(-135deg);margin-bottom:0;margin-top:5px}
.fq summary:hover{color:var(--gold-2)}
.fq p{
  padding-bottom:clamp(20px,2.6vw,28px);font-size:14.5px;color:var(--text-2);
  line-height:1.78;max-width:68ch;
  animation:fqIn .55s var(--ease);
}
@keyframes fqIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ── CONTACT ──────────────────────────────────────────────── */
.section--contact{
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%,rgba(201,169,97,.08),transparent 68%),
    linear-gradient(180deg,transparent,rgba(255,255,255,.02));
  border-top:1px solid var(--line);
}
.ct{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:clamp(38px,6vw,86px);align-items:start}
.ct__title{
  font-family:var(--font-d);font-size:clamp(26px,min(4.4vw,6.1vh),50px);line-height:1.08;
  font-weight:300;letter-spacing:-.02em;margin-bottom:18px;max-width:15ch;
}
html[lang="ar"] .ct__title{line-height:1.32;letter-spacing:0}
.ct__sub{font-size:15.5px;color:var(--text-2);line-height:1.74;max-width:46ch;margin-bottom:36px;font-weight:300}
.ct__direct{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ct__link{
  background:var(--ink);padding:17px 22px;display:flex;flex-direction:column;gap:3px;
  transition:background .4s;
}
a.ct__link:hover{background:var(--ink-3)}
.ct__link span{font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
html[lang="ar"] .ct__link span{font-family:var(--font-b);letter-spacing:0;font-size:12px}
.ct__link strong{font-size:15px;font-weight:400;color:var(--gold-2)}

/* Form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
html[lang="ar"] .field label{font-family:var(--font-b);letter-spacing:0;font-size:12.5px}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.028);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;font-size:15px;font-weight:300;color:var(--text);
  transition:border-color .35s,background .35s;width:100%;font-family:var(--font-b);
}
.field textarea{resize:vertical;min-height:112px;line-height:1.6}
.field select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A961' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-inline-end:40px}
[dir="rtl"] .field select{background-position:left 15px center;padding-inline-end:15px;padding-inline-start:40px}
.field select option{background:var(--ink-3);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(201,169,97,.55);background:rgba(201,169,97,.045);
}
.field input.is-bad,.field textarea.is-bad{border-color:#C4553F;background:rgba(196,85,63,.07)}
.form > .btn{grid-column:1/-1;margin-top:6px}
.form__alt{grid-column:1/-1;font-size:12.5px;color:var(--text-3);text-align:center}
.form__status{grid-column:1/-1;font-size:14px;text-align:center;min-height:1.4em}
.form__status.is-ok{color:var(--gold-2)}
.form__status.is-bad{color:#E08A72}

/* ── FOOTER ───────────────────────────────────────────────── */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);padding-block:clamp(38px,5vw,58px);background:var(--ink)}
.foot__top{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.foot__nav{display:flex;gap:clamp(16px,2.4vw,30px);flex-wrap:wrap}
.foot__nav a{font-size:13.5px;color:var(--text-3);transition:color .3s}
.foot__nav a:hover{color:var(--gold-2)}
.foot__bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:22px;font-size:12.5px;color:var(--text-3)}

/* ── REVEAL ───────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
/* If JS fails or is disabled, content must still be readable */
.no-js .reveal{opacity:1;transform:none}
.no-js .hero__title .line__in{transform:none}
.no-js .loader{display:none}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE LADDER
   Targets laptops and phones with equal weight.
   ═══════════════════════════════════════════════════════════ */

/* ── SHORT LANDSCAPE SCREENS (most laptops: 1280×720, 1440×800) ──
   Wide but vertically tight — reclaim height so the hero fits
   in one screen without the fold cutting the CTAs off. */
@media (min-width:1024px) and (max-height:860px){
  .hero{padding-block:clamp(88px,11.5vh,120px) clamp(44px,6vh,68px);min-height:100svh}
  .hero__eyebrow{margin-bottom:clamp(16px,2.4vh,26px)}
  .hero__title{margin-bottom:clamp(16px,2.6vh,28px)}
  .hero__sub{margin-bottom:clamp(20px,3vh,32px);max-width:54ch}
  .hero__cta{margin-bottom:clamp(26px,4.4vh,48px)}
  .hero__proof{padding-top:clamp(18px,2.6vh,28px)}
}
@media (min-width:1024px) and (max-height:720px){
  .hero__sub{font-size:15px;line-height:1.6}
  .hero__proof strong{font-size:clamp(22px,3.4vh,30px)}
  .hero__proof span{font-size:11.5px}
  .hero__scroll{display:none}
}

/* ── SMALL LAPTOPS / LARGE TABLETS (1024–1180) ── */
@media (max-width:1180px){
  .nav__links{gap:22px}
  .nav__links a{font-size:13px}
  .grid-work{grid-template-columns:1fr 1fr}
}

/* ── TABLET / NAV COLLAPSE (≤1024) ── */
@media (max-width:1024px){
  .nav__links{display:none}
  .burger{display:block}
  .nav__actions{margin-inline-start:auto}
  .about{grid-template-columns:1fr;gap:34px}
  .about__left{display:flex;flex-direction:column}
  .about__portrait{max-width:280px;aspect-ratio:4/3;margin-top:18px}
  .about__right{padding-top:0}
  .ct{gap:44px}
  .grid-price{grid-template-columns:1fr 1fr}
  .price--feat{grid-column:1/-1;order:-1}
}

/* ── LANDSCAPE PHONES & SMALL TABLETS (≤900) ── */
@media (max-width:900px){
  .grid-work{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .quote{padding:26px}
  .hero{min-height:auto;padding-block:clamp(104px,16vh,140px) clamp(56px,9vh,84px)}
  .hero__title{max-width:none}
}

/* ── PHONES (≤768) ── */
@media (max-width:768px){
  :root{--sec:clamp(56px,13vw,84px)}

  /* nav must never overflow: brand + language + burger only */
  .nav__actions .btn--sm{display:none}
  .nav__inner{gap:14px}
  .nav__actions{gap:10px}

  .hero__proof{grid-template-columns:repeat(2,1fr);gap:22px 18px}
  .hero__cta{flex-direction:column;align-items:stretch;gap:11px}
  .hero__cta .btn{width:100%}
  .hero__sub{max-width:none}

  .grid-price{grid-template-columns:1fr}
  .price--feat{order:0}
  .price__for{min-height:0}

  .form{grid-template-columns:1fr}
  .ct{gap:38px}

  .step{gap:14px;padding-block:24px}
  .step__n{min-width:26px;font-size:11px;padding-top:6px}
  .step:hover{padding-inline:0}

  .foot__top{flex-direction:column;align-items:flex-start;gap:20px}
  .foot__bot{flex-direction:column;gap:7px}
  .quote::before{font-size:60px;inset-inline-end:16px}

  /* comfortable tap targets */
  .btn{min-height:48px}
  .btn--sm{min-height:42px}
  .nav__links a,.foot__nav a{padding-block:6px}
  .fq summary{padding-block:18px}
}

/* ── SMALL PHONES (≤520) ── */
@media (max-width:520px){
  .nav__inner{padding-block:14px;gap:12px}
  .brand__mark{width:30px;height:30px;font-size:12.5px}
  .brand__text{font-size:13px}

  .hero__eyebrow{font-size:10px;padding:7px 13px;letter-spacing:.14em}
  .hero__proof{gap:20px 16px}
  .hero__proof strong{font-size:29px}

  .svc{padding:26px 22px}
  .case__body{padding:22px 20px}
  .case__kpis{gap:20px}
  .case__meta{font-size:10px;letter-spacing:.08em}
  .price{padding:26px 22px}
  .ct__link{padding:15px 18px}
  .field input,.field select,.field textarea{font-size:16px} /* ≥16px stops iOS zoom-on-focus */
  .marquee__item{gap:26px;padding-inline:13px}
}

/* ── VERY SMALL PHONES (≤360) ── */
@media (max-width:360px){
  .brand__dot{display:none}
  .hero__proof{grid-template-columns:1fr 1fr;gap:18px 14px}
  .hero__proof strong{font-size:26px}
  .hero__proof span{font-size:11.5px}
  .lang__opt{min-width:34px;font-size:11px}
  .case__kpis{flex-direction:column;gap:14px}
}

/* ── RTL FIXES ────────────────────────────────────────────── */
[dir="rtl"] .btn--ghost::before{transform-origin:right}
[dir="rtl"] .hero__title,[dir="rtl"] .shead,[dir="rtl"] .manifesto__text{text-align:right}
[dir="rtl"] .fq summary::after{transform:rotate(135deg)}
[dir="rtl"] .fq[open] summary::after{transform:rotate(-45deg)}
[dir="rtl"] .loader__mark,[dir="rtl"] .about__portrait span{padding-inline-start:0;padding-inline-end:.12em}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{opacity:1;transform:none}
  .hero__title .line__in{transform:none}
  .marquee__track{animation:none}
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print{
  .ambient,.loader,.nav,.menu,.scroll-progress,.hero__scroll,.marquee-wrap{display:none!important}
  body{background:#fff;color:#111}
  .reveal{opacity:1;transform:none}
}