/* =========================================================
   CONCEPT A — EDITORIAL / CINEMATIC
   Calypso Legal Consultancy · bilingual EN + AR (RTL)
   ========================================================= */
:root{
  --ink:#0B0908;
  --ink-2:#141110;
  --ink-3:#1E1917;
  --gold:#C9A227;
  --gold-lt:#E7D08A;
  --cream:#F5EFE4;
  --paper:#FBF8F2;
  --mut:rgba(245,239,228,.52);
  --mut-d:#6E6459;
  --line:rgba(245,239,228,.14);
  --line-d:rgba(11,9,8,.12);

  --ff-d:"Fraunces",Georgia,serif;
  --ff-b:"Inter","Helvetica Neue",Arial,sans-serif;

  --wrap:1320px;
  --pad:clamp(20px,5vw,64px);
  --sy:clamp(80px,11vw,180px);
  --e:cubic-bezier(.16,1,.3,1);
}
html[dir="rtl"]{--ff-d:"Amiri",Georgia,serif;--ff-b:"Tajawal","Segoe UI",sans-serif}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x is set on BOTH html and body on purpose. On body alone the value
   is propagated to the viewport, which is enough on desktop but which iOS
   Safari has never honoured reliably — the page could still be dragged
   sideways, exposing the background behind it.
   overscroll-behavior-x kills the rubber-band drag itself. Only the x axis:
   `none` on both axes would also disable pull-to-refresh. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  overflow-x:hidden;overscroll-behavior-x:none}
body{
  background:var(--ink);color:var(--cream);
  font-family:var(--ff-b);font-weight:300;font-size:16px;line-height:1.7;
  overflow-x:hidden;overscroll-behavior-x:none;max-width:100%;
}
html[dir="rtl"] body{line-height:1.95;font-weight:400}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

h1,h2,h3,h4,h5{font-family:var(--ff-d);font-weight:400;line-height:1.05;letter-spacing:-.02em}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h5{
  letter-spacing:0;line-height:1.55;font-weight:700}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.lbl{
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:12px;margin-block-end:22px;
}
.lbl::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--gold),transparent);opacity:.5}
html[dir="rtl"] .lbl{letter-spacing:0;font-size:.88rem;font-weight:700}
html[dir="rtl"] .lbl::after{background:linear-gradient(270deg,var(--gold),transparent)}

.sec-head{margin-block-end:clamp(44px,6vw,84px);max-width:840px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .lbl{justify-content:center}
.sec-head--center .lbl::after{display:none}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.6rem)}
html[dir="rtl"] .sec-head h2{font-size:clamp(1.7rem,3.6vw,2.9rem)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--gold);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:17px 40px;border-radius:999px;overflow:hidden;isolation:isolate;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ink);background:var(--bg);transition:color .5s var(--e);
}
html[dir="rtl"] .btn{letter-spacing:0;text-transform:none;font-size:.98rem}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--e);
}
.btn:hover::before{transform:scaleY(1)}
.btn--line{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.btn--line:hover{color:var(--ink)}
.btn--big{padding:22px 56px;font-size:.82rem}

/* =========================================================
   PRELOADER
   ========================================================= */
.loader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:grid;place-items:center;transition:clip-path 1s var(--e);
  clip-path:inset(0 0 0 0);
}
.loader.done{clip-path:inset(0 0 100% 0);pointer-events:none}
.loader__inner{display:grid;justify-items:center;gap:22px}
.loader__mark{width:78px;height:78px;animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__bar{width:min(46vw,240px);height:1px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--gold)}
.loader__pct{font-size:.7rem;letter-spacing:.24em;color:var(--mut)}

/* =========================================================
   LANGUAGE GATE
   ========================================================= */
.gate{
  position:fixed;inset:0;z-index:9000;background:var(--ink-2);
  display:grid;place-items:center;padding:var(--pad);
  transition:clip-path 1.05s var(--e);clip-path:inset(0 0 0 0);
}
.gate.done{clip-path:inset(100% 0 0 0);pointer-events:none}
.gate__inner{width:min(680px,100%)}
.gate__lockup{width:clamp(96px,11vw,132px);height:auto}
.gate__title{font-size:clamp(2rem,5vw,3.4rem);margin-block:30px 44px}
.gate__title span{color:var(--mut);font-family:"Amiri",serif}
.gate__opts{display:grid;gap:2px}
.gate__opts button{
  display:flex;align-items:center;gap:20px;width:100%;padding:26px 4px;
  border-block-start:1px solid var(--line);position:relative;overflow:hidden;
  transition:padding-inline .5s var(--e),color .4s;
}
.gate__opts button:last-child{border-block-end:1px solid var(--line)}
.gate__opts button::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);
  transform:translateY(101%);transition:transform .55s var(--e);
}
.gate__opts button:hover{padding-inline:24px;color:var(--ink)}
.gate__opts button:hover::before{transform:translateY(0)}
.gate__opts em{font-style:normal;font-size:.68rem;letter-spacing:.2em;opacity:.5}
.gate__opts b{font-family:var(--ff-d);font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:400;flex:1;text-align:start}
.gate__opts .is-ar b{font-family:"Amiri",serif}
.gate__opts i{font-style:normal;font-size:1.2rem;transition:transform .45s var(--e)}
.gate__opts button:hover i{transform:translateX(8px)}
html[dir="rtl"] .gate__opts button:hover i{transform:translateX(-8px)}

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--pad);
  transition:transform .55s var(--e),background-color .45s,padding .45s,backdrop-filter .45s;
}
.hdr.hide{transform:translateY(-104%)}
.hdr.solid{padding-block:14px;box-shadow:0 1px 0 var(--line)}
/* The tint and blur live on a pseudo-element, NOT on .hdr itself.
   backdrop-filter — like transform — makes an element the containing block for
   its position:fixed descendants. The mobile drawer is `.hdr__nav{position:fixed;
   inset:0}` inside .hdr, so putting the filter on .hdr collapsed the open drawer
   to the height of the header bar the moment .solid was applied on scroll.
   A pseudo-element is not an ancestor, so the drawer keeps the viewport as its
   containing block. Keep it this way. */
.hdr::before{content:"";position:absolute;inset:0;z-index:-2;opacity:0;
  background:rgba(11,9,8,.72);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  transition:opacity .45s}
.hdr.solid::before{opacity:1}
.hdr__brand{display:flex;align-items:center;gap:12px}
.hdr__brand img{width:40px;height:40px}
.hdr__brand-txt{display:flex;flex-direction:column;gap:3px;line-height:1}
.hdr__brand-txt b{font-family:var(--ff-d);font-weight:400;font-size:1.05rem;letter-spacing:.22em}
.hdr__brand-txt em{font-style:normal;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-lt);white-space:nowrap}
html[dir="rtl"] .hdr__brand-txt b{letter-spacing:0;font-size:1.2rem}
html[dir="rtl"] .hdr__brand-txt em{letter-spacing:0;text-transform:none;font-size:.76rem}
.hdr__nav{display:flex;gap:clamp(16px,2.4vw,38px)}
.hdr__nav > a{position:relative;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);
  transition:color .35s;white-space:nowrap}
html[dir="rtl"] .hdr__nav > a{letter-spacing:0;text-transform:none;font-size:.96rem}
.hdr__nav > a::after{content:"";position:absolute;inset-block-end:-6px;inset-inline-start:0;width:0;height:1px;
  background:var(--gold);transition:width .45s var(--e)}
.hdr__nav > a:hover{color:var(--cream)}
.hdr__nav > a:hover::after{width:100%}
.hdr__end{display:flex;align-items:center;gap:14px}
.lang{
  padding:9px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;transition:.4s var(--e);
}
html[dir="rtl"] .lang{letter-spacing:0;text-transform:none;font-size:.9rem}
.lang:hover{background:var(--gold);color:var(--ink);box-shadow:none}
.burger{display:none;width:34px;height:22px;flex-direction:column;justify-content:center;gap:6px}
.burger i{display:block;height:1px;background:var(--cream);transition:.4s var(--e)}
.burger.open i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger.open i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:0 var(--pad) clamp(60px,9vw,110px)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.16);animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.0) translateY(-2%)}}
.hero__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,9,8,.72) 0%,rgba(11,9,8,.35) 35%,rgba(11,9,8,.92) 100%)}
.hero__body{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto}
.hero__est{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-lt);margin-block-end:26px}
html[dir="rtl"] .hero__est{letter-spacing:0;text-transform:none;font-size:.9rem}
.hero__h{font-size:clamp(2.6rem,7.4vw,6.4rem);max-width:16ch}
html[dir="rtl"] .hero__h{font-size:clamp(2.1rem,6vw,5rem);max-width:20ch}
.hero__sub{margin-block:26px 36px;max-width:52ch;color:var(--mut);font-size:clamp(.98rem,1.3vw,1.14rem)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
/* staged entrance — .in is added once the gate closes */
.hero__est,.hero__sub,.hero__cta,.hero__cue{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--e),transform .9s var(--e);
}
.hero.in .hero__est{transition-delay:.45s}
.hero.in .hero__sub{transition-delay:.58s}
.hero.in .hero__cta{transition-delay:.71s}
.hero.in .hero__cue{transition-delay:.9s}
.hero.in .hero__est,.hero.in .hero__sub,.hero.in .hero__cta,.hero.in .hero__cue{
  opacity:1;transform:none;
}
.hero__cue{position:absolute;inset-block-end:34px;inset-inline-end:var(--pad);z-index:2;
  display:flex;align-items:center;gap:12px;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
html[dir="rtl"] .hero__cue{letter-spacing:0;text-transform:none;font-size:.85rem}
.hero__cue i{display:block;width:52px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:40%;background:var(--gold);
  animation:cue 2.4s var(--e) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(260%)}}

/* split-text animation */
[data-split] .ln{display:block;overflow:hidden}
/* Arabic ascenders/diacritics sit higher than the Latin line box — give the
   mask a little headroom so the overflow:hidden doesn't shave them off */
html[dir="rtl"] [data-split] .ln{padding-block-start:.14em;margin-block-start:-.14em}
[data-split] .ln > span{display:inline-block;transform:translateY(105%);
  transition:transform 1.05s var(--e)}
[data-split].in .ln > span{transform:translateY(0)}

/* =========================================================
   MARQUEE
   ========================================================= */
.marq{background:var(--gold);color:var(--ink);overflow:hidden;padding-block:15px;
  border-block:1px solid rgba(11,9,8,.12)}
.marq__track{display:flex;white-space:nowrap;width:max-content;animation:marq 70s linear infinite}
/* in RTL the track overflows to the LEFT of the strip, so it has to travel
   right to stay in view — a reversed -50% would run it off-screen */
html[dir="rtl"] .marq__track{animation-name:marq-rtl}
.marq__track span{font-family:var(--ff-d);font-size:clamp(.95rem,1.5vw,1.25rem);
  letter-spacing:.04em;padding-inline-end:24px}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes marq-rtl{to{transform:translateX(50%)}}

/* =========================================================
   INTRO
   ========================================================= */
.intro{padding-block:var(--sy);background:var(--ink)}
.intro__grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(32px,5vw,90px);align-items:start}
.intro__fig{margin-block-start:30px;overflow:hidden;border-radius:2px}
.intro__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(.35) contrast(1.05);
  transition:transform 1.2s var(--e),filter .8s}
.intro__fig:hover img{transform:scale(1.05);filter:none}
.stmt{font-family:var(--ff-d);font-size:clamp(1.35rem,2.9vw,2.5rem);line-height:1.3;font-weight:300;
  letter-spacing:-.015em}
html[dir="rtl"] .stmt{font-size:clamp(1.2rem,2.4vw,2rem);line-height:1.75;font-weight:700;letter-spacing:0}
[data-words] .w{opacity:.16;transition:opacity .5s ease}
[data-words] .w.lit{opacity:1}
.intro__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,54px);
  margin-block-start:clamp(40px,5vw,72px);padding-block-start:clamp(30px,4vw,48px);border-block-start:1px solid var(--line)}
.intro__cols h3{font-size:1.15rem;color:var(--gold-lt);margin-block-end:10px}
.intro__cols p{color:var(--mut);font-size:.96rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:34px}
.chips li{padding:8px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);
  font-size:.76rem;letter-spacing:.1em;color:var(--mut);transition:.4s var(--e)}
html[dir="rtl"] .chips li{letter-spacing:0;font-size:.92rem}
.chips li:hover{color:var(--ink);background:var(--gold);box-shadow:none}

/* =========================================================
   SERVICES
   ========================================================= */
.svcs{padding-block:var(--sy);background:var(--ink-2)}
.svc-list{position:relative;border-block-start:1px solid var(--line)}
.svc{
  position:relative;display:grid;isolation:isolate;
  grid-template-columns:auto 1.1fr 1fr auto;align-items:center;gap:clamp(16px,3vw,48px);
  padding-block:clamp(28px,3.6vw,46px);border-block-end:1px solid var(--line);
  transition:padding-inline .6s var(--e),color .4s;
}
.svc::before{content:"";position:absolute;inset-block:0;inset-inline:-24px;z-index:-1;
  background:var(--gold);transform:scaleY(0);transform-origin:bottom;
  transition:transform .6s var(--e)}
.svc:hover{padding-inline:24px;color:var(--ink)}
.svc:hover::before{transform:scaleY(1)}
.svc__no{font-size:.7rem;letter-spacing:.2em;opacity:.55}
.svc h3{font-size:clamp(1.4rem,2.8vw,2.3rem)}
.svc p{color:var(--mut);font-size:.95rem;max-width:44ch;transition:color .4s}
.svc:hover p{color:rgba(11,9,8,.7)}
.svc__arrow{font-style:normal;font-size:1.35rem;transition:transform .5s var(--e)}
.svc:hover .svc__arrow{transform:translateX(10px)}
html[dir="rtl"] .svc__arrow{transform:scaleX(-1)}
html[dir="rtl"] .svc:hover .svc__arrow{transform:scaleX(-1) translateX(10px)}

/* =========================================================
   BAND / STATS
   ========================================================= */
.band{position:relative;overflow:hidden;padding-block:clamp(70px,9vw,140px)}
.band__bg{position:absolute;inset:-12% 0}
.band__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.42)}
.band__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,46px)}
.stat{text-align:center;position:relative}
.stat + .stat::before{content:"";position:absolute;inset-block:12%;
  inset-inline-start:calc(-1 * clamp(10px,1.5vw,23px));width:1px;background:var(--line)}
.stat b{display:block;font-family:var(--ff-d);font-weight:400;font-size:clamp(2.2rem,5vw,4rem);
  color:var(--gold-lt);line-height:1;margin-block-end:12px}
.stat span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
html[dir="rtl"] .stat span{letter-spacing:0;text-transform:none;font-size:.92rem}

/* =========================================================
   APPROACH
   ========================================================= */
.appr{padding-block:var(--sy);background:var(--ink)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,42px);
  padding-block-start:56px}
.steps__line{position:absolute;inset-block-start:0;inset-inline:0;height:1px;background:var(--line)}
.steps__line i{display:block;height:100%;width:0;background:var(--gold);transition:width .1s linear}
.step{position:relative}
.step::before{content:"";position:absolute;inset-block-start:-56px;inset-inline-start:0;
  width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--gold);
  transform:translateY(-4px)}
.step b{display:block;font-family:var(--ff-d);font-size:1rem;color:var(--gold);margin-block-end:14px;letter-spacing:.1em}
.step h4{font-size:clamp(1.15rem,1.9vw,1.5rem);margin-block-end:10px}
.step p{color:var(--mut);font-size:.94rem}

/* =========================================================
   FOUNDER
   ========================================================= */
.fndr{padding-block:var(--sy);background:var(--ink-2)}
.fndr__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,86px);align-items:center}
/* the portrait is a transparent cutout, so it stands in the panel rather than
   sitting inside a photo box — no blend-mode trickery needed */
.fndr__pic{
  position:relative;overflow:hidden;border-radius:2px;
  background:
    radial-gradient(120% 78% at 50% 104%, rgba(201,162,39,.24), transparent 62%),
    linear-gradient(165deg,#241d17,#100d0b);
  box-shadow:inset 0 0 0 1px var(--line);
  padding-block-start:26px;
}
.fndr__pic::after{
  content:"";position:absolute;inset-block-end:0;inset-inline:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6;
}
.fndr__pic img{width:100%;filter:grayscale(.9) contrast(1.06);
  transition:filter .9s var(--e),transform 1.2s var(--e)}
.fndr__pic:hover img{filter:grayscale(0) contrast(1);transform:scale(1.03)}
.fndr__p{color:var(--mut);margin-block-start:28px;max-width:56ch}
.fndr__sig{margin-block-start:34px;padding-block-start:24px;border-block-start:1px solid var(--line)}
.fndr__sig b{display:block;font-family:var(--ff-d);font-size:1.2rem;font-weight:400}
.fndr__sig span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
html[dir="rtl"] .fndr__sig span{letter-spacing:0;text-transform:none;font-size:.9rem}

/* =========================================================
   INDUSTRIES
   ========================================================= */
.inds{padding-block:var(--sy) calc(var(--sy) * .6);background:var(--ink)}
.ind-list{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,80px)}
.ind-list li{display:flex;align-items:baseline;gap:14px;padding-block:22px;
  border-block-start:1px solid var(--line);transition:.45s var(--e)}
.ind-list li span{font-size:.66rem;letter-spacing:.18em;color:var(--gold);opacity:.7}
.ind-list li p{font-family:var(--ff-d);font-size:clamp(1.05rem,1.6vw,1.3rem)}
.ind-list li:hover{padding-inline-start:14px;color:var(--gold-lt)}

/* =========================================================
   CTA
   ========================================================= */
.cta{position:relative;overflow:hidden;padding-block:clamp(90px,12vw,180px);text-align:center}
.cta__bg{position:absolute;inset:-12% 0}
.cta__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.55)}
.cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(11,9,8,.62) 40%,rgba(11,9,8,.78) 100%)}
.cta__body{position:relative;z-index:2}
.cta__body h2{font-size:clamp(2rem,5vw,4rem);max-width:18ch;margin-inline:auto}
.cta__body > p{color:var(--mut);margin-block:22px 40px;max-width:46ch;margin-inline:auto}
/* phone and email under the home-page call to action. The label keeps the
   tracked-uppercase treatment; the numbers themselves do not — tracking a
   phone number apart makes it harder to read, which is the opposite of
   what this line is for. */
.cta__reach{
  margin-block-start:30px;display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:center;gap:6px 12px;
  font-size:.88rem;color:var(--mut);
}
.cta__reach-l{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
html[dir="rtl"] .cta__reach-l{letter-spacing:0;text-transform:none;font-size:.9rem}
.cta__reach-sep{color:var(--mut-d)}
@media (max-width:520px){
  .cta__reach{flex-direction:column;gap:8px}
  .cta__reach-sep{display:none}
}

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{background:var(--ink-2);padding-block:clamp(56px,7vw,90px) 0;border-block-start:1px solid var(--line)}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,52px)}
.ftr__mark{width:96px;height:auto;margin-block-end:22px}
.ftr__slogan{color:var(--mut);max-width:32ch;font-size:.94rem}
.ftr h5{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-block-end:18px}
html[dir="rtl"] .ftr h5{letter-spacing:0;text-transform:none;font-size:.92rem}
.ftr a,.ftr__grid p{display:block;color:var(--mut);font-size:.92rem;margin-block-end:10px;transition:.35s}
.ftr a:hover{color:var(--cream);padding-inline-start:6px}
.ftr__bar{margin-block-start:clamp(40px,5vw,70px);padding-block:24px;border-block-start:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.74rem;color:var(--mut)}
/* Developer credit. Overrides .ftr a, which is a block with its own margin
   and a hover indent — both wrong for a link sitting inline in a sentence.
   The underline is an ::after grown by WIDTH, not a scaleX from a physical
   transform-origin, so it sweeps from the start edge in Arabic too. */
.ftr__by{font-size:.66rem}
.ftr__by a{position:relative;display:inline-block;margin-block-end:0;font-size:inherit;
  font-weight:400;letter-spacing:.02em;color:var(--mut);transition:color .35s var(--e)}
/* currentColor, so the underline follows the text rather than needing its own
   hover rule — grey at rest, cream on hover. */
.ftr__by a::after{content:"";position:absolute;inset-block-end:-3px;inset-inline-start:0;
  width:0;height:1px;background:currentColor;transition:width .45s var(--e)}
.ftr__by a:hover{color:var(--cream);padding-inline-start:0}
.ftr__by a:hover::after{width:100%}
/* Arrow sits inside the dir="ltr" link, so up-and-right is correct either way. */
.ftr__by-arw{display:inline-block;margin-inline-start:5px;font-size:.9em;
  transition:transform .35s var(--e)}
.ftr__by a:hover .ftr__by-arw{transform:translate(2px,-2px)}
/* In Arabic the arrow sits at the inline-end, which is the left. Mirror the
   glyph so it still points away from the text, and let the hover nudge ride
   the flipped axis so it moves outward rather than back into the name. */
html[dir="rtl"] .ftr__by-arw{transform:scaleX(-1)}
html[dir="rtl"] .ftr__by a:hover .ftr__by-arw{transform:scaleX(-1) translate(2px,-2px)}

/* =========================================================
   REVEAL
   ========================================================= */
.rev{opacity:0;transform:translateY(30px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rev.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .intro__grid{grid-template-columns:1fr}
  .intro__fig img{aspect-ratio:16/10}
  .fndr__grid{grid-template-columns:1fr}
  .fndr__pic{max-width:440px}
  .steps{grid-template-columns:1fr 1fr;gap:44px 32px}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .svc{grid-template-columns:auto 1fr;gap:6px 18px}
  .svc p{grid-column:2;max-width:none}
  .svc__arrow{display:none}
  .band__grid{grid-template-columns:1fr 1fr;gap:38px}
  .stat + .stat::before{display:none}
}
@media (max-width:560px){
  .hdr__brand img{width:34px;height:34px}
  .hdr__brand-txt b{font-size:.92rem;letter-spacing:.16em}
  .hdr__brand-txt em{font-size:.48rem;letter-spacing:.16em}
  .steps{grid-template-columns:1fr}
  .steps__line{inset-block-start:0;width:1px;height:100%;inset-inline-start:4px;inset-inline-end:auto}
  .steps__line i{width:100%!important;height:0}
  .step{padding-inline-start:30px}
  .step::before{inset-block-start:6px;inset-inline-start:0}
  .ftr__grid{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
  .ind-list{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rev{opacity:1;transform:none}
  [data-split] .ln > span{transform:none}
  [data-words] .w{opacity:1}
  html{scroll-behavior:auto}
}

/* =========================================================
   MULTI-PAGE ADDITIONS
   Dropdown nav · interior pages · content blocks
   Everything below uses logical properties, so it mirrors
   automatically in Arabic. No fixed heights anywhere — blocks
   grow with whatever content the client supplies.
   ========================================================= */

/* ---------------------------------------------------------
   NAV — shared
   --------------------------------------------------------- */
.hdr__nav{align-items:center}
.navitem{position:relative;display:flex;align-items:center;gap:5px}

/* top-level links keep the original treatment */
.hdr__nav > a,
.navitem > a{
  position:relative;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut);transition:color .35s;white-space:nowrap;
}
html[dir="rtl"] .hdr__nav > a,
html[dir="rtl"] .navitem > a{letter-spacing:0;text-transform:none;font-size:.96rem}
.hdr__nav > a::after,
.navitem > a::after{
  content:"";position:absolute;inset-block-end:-6px;inset-inline-start:0;width:0;height:1px;
  background:var(--gold);transition:width .45s var(--e);
}
.hdr__nav > a:hover,.navitem > a:hover,
.hdr__nav > a.is-active,.navitem > a.is-active{color:var(--cream)}
.hdr__nav > a.is-active::after,
.navitem > a.is-active::after{width:100%;background:var(--gold)}
.hdr__nav > a:hover::after,.navitem > a:hover::after{width:100%}

/* caret — decorative on desktop, a real button on mobile */
.sub-tog{
  display:flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:none;pointer-events:none;
  transition:transform .4s var(--e);
}
/* physical borders on purpose: a caret points down in both directions.
   Logical properties would mirror it into a sideways chevron in Arabic. */
.sub-tog i{
  width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);color:var(--mut);transition:color .35s;
}
.navitem:hover .sub-tog i{color:var(--gold)}

/* ---------------------------------------------------------
   NAV — desktop dropdown
   --------------------------------------------------------- */
@media (min-width:1101px){
  .sub{
    position:absolute;inset-block-start:calc(100% + 16px);inset-inline-start:-18px;
    min-width:250px;padding:10px;
    background:rgba(16,13,11,.94);backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:0 0 0 1px var(--line),0 26px 60px rgba(0,0,0,.5);
    display:block;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .32s var(--e),transform .32s var(--e),visibility .32s;
    z-index:60;
  }
  /* hover bridge, so the pointer can cross the gap */
  .navitem::before{
    content:"";position:absolute;inset-block-start:100%;inset-inline:-18px;height:18px;
  }
  .sub__in{display:flex;flex-direction:column;gap:2px}

  /* Services opens as a three-column panel: the advisory practices, then
     Company Formation and its four pages, then IP & Business and its six.
     Shows the real hierarchy without a third-level flyout, which is
     unusable on touch. The panel is wider than its trigger by design —
     ignore it when auditing horizontal overflow. */
  .sub--mega{min-width:800px;inset-inline-start:-300px}
  .sub--mega .sub__in{display:grid;grid-template-columns:1fr 1.1fr 1.3fr;gap:0 12px;align-items:start}
  .sub__col{display:flex;flex-direction:column;gap:2px;min-width:0}
  .sub--mega .sub__col + .sub__col{
    border-inline-start:1px solid var(--line);padding-inline-start:12px;
  }
  .navitem:hover .sub,
  .navitem:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
  .navitem:hover .sub-tog{transform:rotate(180deg)}

  .sub a{
    display:block;padding:11px 16px;font-size:.78rem;letter-spacing:.04em;
    color:var(--mut);white-space:nowrap;transition:.3s var(--e);
    border-inline-start:2px solid transparent;
  }
  html[dir="rtl"] .sub a{letter-spacing:0;font-size:.95rem}
  .sub a::after{display:none}
  .sub a:hover,.sub a.is-active{
    color:var(--cream);background:rgba(201,162,39,.10);border-inline-start-color:var(--gold);
  }
}

/* Two kinds of column heading, deliberately not alike:
   - Company Formation is a real page, so it is a link and behaves like one.
   - Advisory is only a grouping label, so it is styled as a label and never
     invites a click it cannot honour. */
.sub__head{
  display:block;padding:11px 16px;
  border-block-end:1px solid var(--line);margin-block-end:4px;
}
a.sub__head{
  font-family:var(--ff-d);font-size:.78rem;color:var(--gold)!important;
}
a.sub__head:hover{
  color:var(--cream)!important;background:rgba(201,162,39,.12);
}
span.sub__head{
  cursor:default;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lt)!important;opacity:.62;padding-block:13px;
}
span.sub__head:hover{background:transparent!important}
html[dir="rtl"] span.sub__head{letter-spacing:0;text-transform:none;font-size:.8rem}

/* ---------------------------------------------------------
   NAV — mobile drawer with accordion
   Built to hold seven top-level items plus every sub-item
   without overflowing: the panel scrolls.
   --------------------------------------------------------- */
/* The drawer takes over below 1025px rather than 861px. Seven top-level
   items plus the language button do not fit across an English header until
   about 1024px wide, so the tablet band gets the drawer — which is already
   built to hold all seven plus their six children. */
@media (max-width:1100.98px){
  .burger{display:flex}
  /* Same containing-block trap as the blur above: .hdr.hide uses a transform.
     app.js already refuses to add .hide while the drawer is open, but the
     transform lingers for the length of its transition — this covers that
     window so the drawer can never be clipped to the header. */
  .hdr:has(.hdr__nav.open){transform:none}
  .hdr__nav{
    position:fixed;inset:0;z-index:-1;background:var(--ink);
    flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:0;padding:104px var(--pad) 48px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e);
  }
  .hdr__nav.open{clip-path:inset(0 0 0 0)}

  .hdr__nav > a,
  .navitem > a{
    font-family:var(--ff-d);font-size:clamp(1.35rem,5.6vw,1.9rem);letter-spacing:0;
    text-transform:none;color:var(--cream);padding-block:14px;
  }
  /* only the link inside a dropdown row grows, to push its caret to the edge.
     Applying this to every top-level link would stretch them down the column. */
  .navitem > a{flex:1}
  .hdr__nav > a,.navitem{flex:none}
  html[dir="rtl"] .hdr__nav > a,
  html[dir="rtl"] .navitem > a{font-size:clamp(1.25rem,5.2vw,1.75rem)}
  .hdr__nav > a::after,.navitem > a::after{display:none}

  .hdr__nav > a,
  .navitem{border-block-end:1px solid var(--line)}
  .navitem{flex-wrap:wrap;gap:0}

  /* caret becomes a tappable toggle with a generous target */
  .sub-tog{
    pointer-events:auto;width:52px;height:52px;flex:none;margin-inline-start:auto;
  }
  .sub-tog i{width:9px;height:9px;color:var(--gold)}
  .navitem.open .sub-tog{transform:rotate(180deg)}

  .sub{
    flex-basis:100%;display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .5s var(--e);
  }
  .navitem.open .sub{grid-template-rows:1fr}
  .sub__in{overflow:hidden;min-height:0}
  .sub a{
    display:block;padding:11px 0;padding-inline-start:18px;
    font-size:.95rem;color:var(--mut);
    border-inline-start:1px solid var(--line);
  }
  .sub--mega .sub__in{display:block}
  .sub__col + .sub__col{
    margin-block-start:10px;padding-block-start:10px;padding-inline-start:0;
    border-inline-start:0;border-block-start:1px solid var(--line);
  }
  .sub__head{
    letter-spacing:.16em;text-transform:uppercase;
    padding-block:8px!important;border-block-end:0;margin-block-end:0;
  }
  a.sub__head{font-size:.78rem!important;opacity:1}
  span.sub__head{font-size:.66rem!important}
  html[dir="rtl"] a.sub__head{letter-spacing:0;text-transform:none;font-size:.95rem!important}
  html[dir="rtl"] span.sub__head{letter-spacing:0;text-transform:none;font-size:.86rem!important}
  .sub__col:first-child a:first-child{margin-block-start:2px}
  .sub__col:last-child a:last-child{margin-block-end:16px}
  .sub a.is-active{color:var(--gold);border-inline-start-color:var(--gold)}
}

/* Just above the drawer breakpoint the header is at its tightest with seven
   top-level items, so the nav gap closes up before anything can overflow. */
@media (min-width:1101px) and (max-width:1280px){
  .hdr__nav{gap:18px}
}

/* ---------------------------------------------------------
   INTERIOR PAGE HERO
   --------------------------------------------------------- */
.phero{
  position:relative;isolation:isolate;
  padding-block:clamp(150px,20vw,230px) clamp(56px,7vw,90px);
  overflow:hidden;
}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover;opacity:.78}
/* Darkening is the veil's job alone. Stacking a low image opacity *and* a
   heavy veil left the photograph about 9% visible — effectively black.
   These values were measured against all nine hero images: cream text over
   the brightest 8% of any of them still returns 7:1, i.e. WCAG AAA. The
   lighter interior photographs (lawbooks, signing, consult, meeting) are
   the binding constraint — do not raise the image opacity without
   re-checking those four. The gradient runs to solid --ink at the base so
   the hero meets the section below it without a seam. */
.phero__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,9,8,.76) 0%,rgba(11,9,8,.46) 46%,var(--ink) 100%);
}
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
  margin-block-end:20px;
}
html[dir="rtl"] .crumb{letter-spacing:0;text-transform:none;font-size:.85rem}
.crumb a{color:var(--mut);transition:color .3s}
.crumb a:hover{color:var(--gold)}
.crumb i{font-style:normal;color:var(--gold);opacity:.6}
html[dir="rtl"] .crumb i{transform:scaleX(-1)}
.crumb b{font-weight:400;color:var(--cream)}
.phero h1{
  font-size:clamp(2.1rem,5.4vw,4.2rem);max-width:19ch;
  overflow-wrap:break-word;
}
html[dir="rtl"] .phero h1{font-size:clamp(1.8rem,4.4vw,3.3rem);max-width:22ch}
.phero__lead{
  margin-block-start:clamp(18px,2.4vw,28px);max-width:62ch;
  font-size:clamp(1rem,1.45vw,1.16rem);color:var(--mut);
}

/* ---------------------------------------------------------
   PAGE BODY BLOCKS
   --------------------------------------------------------- */
.psec{padding-block:clamp(56px,8vw,110px)}
.psec--tight{padding-block:clamp(38px,5vw,70px)}
.psec--alt{background:var(--ink-2)}

/* a big pull-quote statement */
.pstmt{
  font-family:var(--ff-d);font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.28;
  max-width:26ch;color:var(--cream);
}
html[dir="rtl"] .pstmt{font-size:clamp(1.3rem,2.7vw,2.05rem);line-height:1.6;max-width:30ch}

/* stacked content blocks — heading + body, any number of them */
.blocks{display:grid;gap:clamp(30px,4vw,54px);margin-block-start:clamp(34px,4.5vw,60px)}
.block{
  display:grid;grid-template-columns:minmax(0,7ch) minmax(0,1fr);
  gap:6px clamp(18px,3vw,44px);align-items:start;
  padding-block-start:clamp(20px,2.6vw,30px);border-block-start:1px solid var(--line);
}
.block__n{
  font-family:var(--ff-d);font-size:.9rem;color:var(--gold);letter-spacing:.1em;
  padding-block-start:5px;
}
.block__b{min-width:0}
.block h3{
  font-size:clamp(1.15rem,1.9vw,1.55rem);margin-block-end:10px;
  overflow-wrap:break-word;
}
.block p{color:var(--mut);max-width:64ch;overflow-wrap:break-word}

/* the "what this covers" checklist */
.checks{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:2px clamp(24px,4vw,56px);margin-block-start:clamp(26px,3.4vw,40px);
}
.checks li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding-block:15px;border-block-end:1px solid var(--line);
}
.checks li::before{
  content:"";width:6px;height:6px;margin-block-start:11px;flex:none;
  background:var(--gold);transform:rotate(45deg);
}
.checks li span{color:var(--mut);overflow-wrap:break-word}

/* Regulator footnote under an IP service list — which UAE authority
   administers the filing. Deliberately quiet; it is a fact, not a claim. */
.pnote{
  margin-block-start:clamp(22px,2.6vw,34px);max-width:68ch;
  font-size:.82rem;line-height:1.7;color:var(--mut);
  padding-inline-start:14px;border-inline-start:1px solid var(--line);
}

/* card grid — used by the two overview pages to reach their children */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(16px,2vw,26px);margin-block-start:clamp(34px,4.5vw,60px);
}
.card{
  display:flex;flex-direction:column;gap:12px;
  padding:clamp(24px,3vw,36px);background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .45s var(--e),transform .45s var(--e),box-shadow .45s var(--e);
}
.card:hover{
  background:var(--ink-3);transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.35),0 22px 50px rgba(0,0,0,.34);
}
.card__n{font-family:var(--ff-d);font-size:.82rem;color:var(--gold);letter-spacing:.18em}
.card h3{font-size:clamp(1.12rem,1.7vw,1.4rem);overflow-wrap:break-word}
.card p{color:var(--mut);font-size:.95rem;flex:1;overflow-wrap:break-word}
.card__go{
  display:inline-flex;align-items:center;gap:9px;color:var(--gold);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-block-start:4px;
}
html[dir="rtl"] .card__go{letter-spacing:0;text-transform:none;font-size:.92rem}
.card__go i{font-style:normal;transition:transform .4s var(--e)}
html[dir="rtl"] .card__go i{transform:scaleX(-1)}
.card:hover .card__go i{transform:translateX(6px)}
html[dir="rtl"] .card:hover .card__go i{transform:scaleX(-1) translateX(6px)}

/* two-column split: copy beside a picture */
.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(30px,5vw,72px);align-items:center;
}
.split__fig{position:relative;overflow:hidden}
.split__fig img{width:100%;height:auto;object-fit:cover}
.split__fig--frame{
  box-shadow:inset 0 0 0 1px var(--line),0 30px 70px rgba(0,0,0,.4);
  background:var(--ink-2);
}
.split__fig--frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.28);
}

/* founder portrait — the supplied photograph has its own background,
   so it is framed deliberately rather than floated as a cutout */
.portrait{max-width:430px;margin-inline:auto;width:100%}
.portrait img{width:100%;height:auto;display:block}
.portrait__cap{
  padding:16px 20px;background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
}
.portrait__cap b{display:block;font-family:var(--ff-d);font-size:1.08rem;color:var(--cream)}
.portrait__cap span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
html[dir="rtl"] .portrait__cap span{letter-spacing:0;text-transform:none;font-size:.9rem}

/* sign-off beneath the founder's message */
.portrait__sign{
  margin-block-start:clamp(20px,2.4vw,30px);
  font-family:var(--ff-d);font-size:1rem;color:var(--gold);
}

/* pull quote — the client's own sentence, set apart from the body copy */
.pquote{
  margin-block-start:clamp(28px,3.4vw,44px);max-width:56ch;
  padding-inline-start:clamp(18px,2vw,26px);
  border-inline-start:2px solid var(--gold);
  font-family:var(--ff-d);font-size:clamp(1.12rem,2vw,1.5rem);
  line-height:1.5;color:var(--cream);
}
html[dir="rtl"] .pquote{font-size:clamp(1.02rem,1.8vw,1.32rem);line-height:1.8}

/* page-level call to action */
.pcta{
  padding-block:clamp(56px,8vw,110px);text-align:center;
  background:var(--ink-2);box-shadow:inset 0 1px 0 var(--line);
}
.pcta h2{font-size:clamp(1.7rem,3.6vw,2.9rem);max-width:20ch;margin-inline:auto}
html[dir="rtl"] .pcta h2{font-size:clamp(1.45rem,3vw,2.4rem);max-width:24ch}
.pcta p{color:var(--mut);max-width:56ch;margin:18px auto 30px}

/* prose — a safe container for whatever the client sends later */
.prose{max-width:70ch}
.prose > * + *{margin-block-start:1.05em}
.prose p,.prose li{color:var(--mut);overflow-wrap:break-word}
.prose h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-block-start:1.6em}
.prose h3{font-size:clamp(1.15rem,1.9vw,1.5rem);margin-block-start:1.5em}
.prose ul{display:grid;gap:9px}
.prose ul li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
}
.prose ul li::before{
  content:"";width:5px;height:5px;margin-block-start:10px;
  background:var(--gold);transform:rotate(45deg);
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:760px){
  .block{grid-template-columns:1fr;gap:8px}
  .block__n{padding-block-start:0}
  .portrait{max-width:340px}
}
@media (max-width:560px){
  .phero{padding-block:clamp(124px,30vw,160px) clamp(40px,9vw,60px)}
  .phero h1{font-size:clamp(1.75rem,8.2vw,2.4rem);max-width:none}
  html[dir="rtl"] .phero h1{font-size:clamp(1.55rem,7.4vw,2.1rem)}
  .phero__lead{font-size:.98rem}
  .pstmt{font-size:clamp(1.28rem,6.4vw,1.7rem);max-width:none}
  html[dir="rtl"] .pstmt{font-size:clamp(1.15rem,5.8vw,1.5rem)}
  .crumb{font-size:.6rem;letter-spacing:.14em}
  .card{padding:22px}
  .pcta h2,.pcta p{max-width:none}
}

/* very small screens — keep the drawer usable */
@media (max-width:1100.98px) and (max-height:620px){
  .hdr__nav{padding-block-start:88px}
  .hdr__nav > a,.navitem > a{font-size:1.15rem;padding-block:10px}
  .sub-tog{height:42px}
}

/* ---------------------------------------------------------
   CONTACT FORM
   Grows with its content; every field is full width on phones.
   --------------------------------------------------------- */
.cform{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(14px,2vw,20px);align-content:start;
  padding:clamp(24px,3.4vw,40px);background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
}
.cform label{display:flex;flex-direction:column;gap:8px;min-width:0}
.cform__wide{grid-column:1/-1}
.cform label span{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
html[dir="rtl"] .cform label span{letter-spacing:0;text-transform:none;font-size:.86rem}
.cform input,.cform select,.cform textarea{
  font:inherit;font-size:.95rem;color:var(--cream);
  background:var(--ink);border:0;box-shadow:inset 0 0 0 1px var(--line);
  padding:13px 15px;border-radius:2px;width:100%;
  transition:box-shadow .35s var(--e);
}
.cform textarea{resize:vertical;min-height:110px}
.cform input::placeholder,.cform textarea::placeholder{color:var(--mut-d)}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;box-shadow:inset 0 0 0 1px var(--gold);
}
.cform select{appearance:none;cursor:pointer}
.cform select option{background:var(--ink);color:var(--cream)}
.cform .btn{grid-column:1/-1;justify-self:start}
/* WhatsApp — direct-contact link under the enquiry form, added at the
   client's request. Deliberately NOT WhatsApp green: the glyph carries the
   recognition, and brand green fights the gold on a dark editorial page. */
.cform__alt{
  grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;
  gap:12px;font-size:.86rem;color:var(--mut);
}
.wa{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line);color:var(--cream);
  font-size:.8rem;letter-spacing:.02em;
  transition:color .35s var(--e),box-shadow .35s var(--e);
}
.wa:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.wa__i{width:17px;height:17px;fill:currentColor;flex:none}
.wa__num{color:var(--mut)}
html[dir="rtl"] .wa{letter-spacing:0}

.cform__note{
  grid-column:1/-1;font-size:.8rem;color:var(--mut-d);margin-block-start:2px;
}
@media (max-width:560px){
  .cform{grid-template-columns:1fr}
  .cform .btn{justify-self:stretch;text-align:center}
}

/* file input — the native control cannot be styled, so it is given the same
   inset border and padding as the text fields and left otherwise alone */
.cform__file{
  padding:11px 15px;font-size:.86rem;cursor:pointer;
}
.cform__file::file-selector-button{
  font:inherit;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);border:0;border-radius:2px;
  padding:8px 14px;margin-inline-end:14px;cursor:pointer;
  transition:background .35s var(--e);
}
.cform__file::file-selector-button:hover{background:var(--gold-lt)}
html[dir="rtl"] .cform__file::file-selector-button{letter-spacing:0;text-transform:none;font-size:.86rem}
.cform__hint{font-size:.76rem;color:var(--mut-d);font-style:normal}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   fields that are outright hidden but will happily fill this one. */
.hp{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* form result line */
.fstatus{
  grid-column:1/-1;font-size:.88rem;line-height:1.6;min-height:1.2em;
  margin-block-start:2px;
}
.fstatus.is-wait{color:var(--mut)}
.fstatus.is-ok{color:var(--gold-lt)}
.fstatus.is-err{color:#E0876F}
.cform button[disabled]{opacity:.55;pointer-events:none}

/* Phone and email links. dir="ltr" is set on the markup so Arabic does not
   reorder the digits or throw the + to the wrong end of the number; the
   inline-block keeps that override from dragging the line's alignment with
   it, so the number still sits on the correct side in RTL. */
.clink{
  display:inline-block;color:inherit;
  border-block-end:1px solid transparent;
  transition:color .35s var(--e),border-color .35s var(--e);
}
.clink:hover{color:var(--gold);border-block-end-color:rgba(201,162,39,.5)}
html[dir="rtl"] .clink{text-align:right}

/* ---------------------------------------------------------
   CAREERS — vacancy accordion
   --------------------------------------------------------- */
.jobs{display:grid;gap:clamp(12px,1.6vw,18px);margin-block-start:clamp(30px,4vw,48px)}
.job{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.job details{width:100%}
.job summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2vw,26px);align-items:start;
  padding:clamp(20px,2.6vw,30px);
  transition:background .35s var(--e);
}
.job summary::-webkit-details-marker{display:none}
.job summary:hover{background:rgba(245,239,228,.03)}
.job__n{
  font-family:var(--ff-d);font-size:.9rem;color:var(--gold);
  padding-block-start:3px;
}
.job__id h3{font-size:clamp(1.1rem,1.9vw,1.42rem);margin-block-end:7px}
.job__id p{color:var(--mut);font-size:.92rem;max-width:60ch}
.job__more{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  white-space:nowrap;padding-block-start:5px;
}
html[dir="rtl"] .job__more{letter-spacing:0;text-transform:none;font-size:.84rem}
/* the caret rotates open; physical borders are deliberate here, exactly as
   with .sub-tog — a caret points down in both writing directions */
.job__more::after{
  content:"";display:inline-block;width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);margin-inline-start:9px;vertical-align:2px;
  transition:transform .35s var(--e);
}
.job details[open] .job__more::after{transform:rotate(-135deg);vertical-align:-1px}
.job__body{
  padding:0 clamp(20px,2.6vw,30px) clamp(24px,3vw,34px);
  border-block-start:1px solid var(--line);margin-block-start:2px;
  padding-block-start:clamp(20px,2.4vw,28px);
}
.job__meta{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);margin-block-end:clamp(20px,2.6vw,30px)}
.job__meta li{display:flex;flex-direction:column;gap:5px}
.job__meta b{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:400;
}
html[dir="rtl"] .job__meta b{letter-spacing:0;text-transform:none;font-size:.8rem}
.job__meta span{font-size:.92rem;color:var(--cream)}
.job__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(22px,3vw,44px);
}
.job__list{display:grid;gap:10px;margin-block-start:16px}
.job__list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  color:var(--mut);font-size:.92rem;line-height:1.62;
}
.job__list li::before{
  content:"";width:5px;height:5px;margin-block-start:9px;
  background:var(--gold);transform:rotate(45deg);
}
.job__apply{
  display:inline-flex;align-items:center;gap:10px;margin-block-start:clamp(22px,2.8vw,32px);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  padding-block-end:4px;border-block-end:1px solid rgba(201,162,39,.4);
  transition:border-color .35s var(--e);
}
.job__apply:hover{border-block-end-color:var(--gold)}
.job__apply i{font-style:normal;transition:transform .35s var(--e)}
.job__apply:hover i{transform:translateX(4px)}
html[dir="rtl"] .job__apply{letter-spacing:0;text-transform:none;font-size:.88rem}
html[dir="rtl"] .job__apply i{transform:scaleX(-1)}
html[dir="rtl"] .job__apply:hover i{transform:scaleX(-1) translateX(4px)}
@media (max-width:640px){
  .job summary{grid-template-columns:auto minmax(0,1fr)}
  .job__more{grid-column:2;padding-block-start:10px}
}

/* second and later pages in a session: no loader, no gate, no flash */
.loader.instant,.gate.instant{display:none!important;transition:none!important}