/* SliperInvest AE
   Palette from the supplied swatch. One stylesheet serves the English (ltr)
   and Arabic (rtl) builds; direction comes from logical properties and the
   --dir multiplier. */

:root{
  --ink:#241814;
  --bark:#372620;
  --bark-2:#4A352D;
  --clay:#C7733E;
  --clay-d:#A55C2D;
  --cream:#E2DBC5;
  --cream-2:#EFEADC;
  --sand:#DCB59D;
  --stone:#A7A0A1;
  --teal:#295F65;
  --teal-d:#1C464B;
  --paper:#FBF9F4;
  --line:#DAD2C2;
  --line-d:rgba(226,219,197,.20);
  --mut:#6E6055;
  --mut-d:rgba(226,219,197,.62);

  --disp:'Readex Pro', system-ui, sans-serif;
  --body:'IBM Plex Sans Arabic', system-ui, sans-serif;

  --hh:74px;
  --gut:clamp(18px,4.4vw,52px);
  --maxw:1280px;
  --notch:18px;

  --e:cubic-bezier(.22,.72,.24,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --dir:1;
}
[dir="rtl"]{ --dir:-1; }

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink); overflow-x:clip;
  font-family:var(--body); font-size:16.5px; line-height:1.74;
  -webkit-font-smoothing:antialiased;
}
[lang="ar"] body{ font-size:17px; line-height:1.95; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:600; line-height:1.1; margin:0 0 .5em; letter-spacing:-.022em; }
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{ letter-spacing:0; line-height:1.35; }
p{ margin:0 0 1em; }
::selection{ background:var(--clay); color:#fff; }
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ width:100%; max-width:860px; margin-inline:auto; padding-inline:var(--gut); }
.skip{ position:absolute; inset-block-start:-100px; inset-inline-start:10px; z-index:300; background:var(--clay); color:#fff; padding:12px 18px; transition:inset-block-start .2s; }
.skip:focus{ inset-block-start:10px; }
[hidden]{ display:none !important; }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 1. Opening curtain */
.curtain{ position:fixed; inset:0; z-index:900; background:var(--bark); pointer-events:none; transform:translateY(0); }
.curtain span{ position:absolute; inset-block-end:clamp(26px,6vh,64px); inset-inline-start:var(--gut); font-family:var(--disp); font-weight:600; font-size:clamp(28px,6vw,62px); color:var(--cream); letter-spacing:-.03em; opacity:0; }
[lang="ar"] .curtain span{ letter-spacing:0; }
body.booting{ overflow:hidden; height:100dvh; }
body.go .curtain{ transform:translateY(-101%); transition:transform .92s var(--e-out) .18s; }
body.go .curtain span{ animation:curtainName .7s var(--e) forwards; }
@keyframes curtainName{ 0%{opacity:0;transform:translateY(16px)} 45%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-10px)} }

/* 2. Reveals */
.up{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--e), transform .8s var(--e); }
.up.in{ opacity:1; transform:none; }
.stg > *{ transition-delay:calc(var(--i,0) * 70ms); }

.w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.w > i{ display:inline-block; font-style:normal; transform:translateY(105%); transition:transform .9s var(--e-out); }
.w.in > i, .in .w > i{ transform:none; }

/* Images are uncovered by a panel sliding up, not by a wipe across */
.rv{ position:relative; overflow:hidden; background:var(--cream); }
.rv > img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 1.4s var(--e-out); }
.rv::after{ content:''; position:absolute; inset:0; z-index:2; background:var(--cream); transform:translateY(0); transition:transform 1.05s var(--e-out); }
.rv.on-bark::after{ background:var(--bark); }
.rv.on-teal::after{ background:var(--teal); }
.rv.in::after{ transform:translateY(-101%); }
.rv.in > img{ transform:none; }
.rv.tall{ aspect-ratio:4/5; } .rv.wide{ aspect-ratio:16/10; }
.rv.cine{ aspect-ratio:21/9; } .rv.box{ aspect-ratio:1/1; }

/* Ledger rules draw themselves in */
.rule{ height:1px; background:var(--line); transform:scaleX(0); transform-origin:inline-start; transition:transform 1s var(--e-out); }
.rule.in{ transform:scaleX(1); }
.on-dark .rule, .bark .rule, .teal .rule{ background:var(--line-d); }

/* 3. Buttons: the underline thickens into a filled block */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border:1.5px solid transparent;
  font-family:var(--disp); font-weight:500; font-size:14.5px; white-space:nowrap;
  overflow:hidden; isolation:isolate; transition:color .35s var(--e), border-color .35s var(--e);
}
.btn::before{ content:''; position:absolute; inset-inline:0; inset-block-end:0; z-index:-1; height:2px; background:var(--clay); transition:height .4s var(--e-out); }
.btn:hover::before{ height:100%; }
.b-clay{ background:var(--clay); color:#fff; }
.b-clay::before{ background:var(--bark); }
.b-bark{ background:var(--bark); color:var(--cream); }
.b-bark::before{ background:var(--clay); }
.b-line{ border-color:var(--line); color:var(--ink); }
.b-line:hover{ color:#fff; border-color:var(--clay); }
.b-ghost{ border-color:rgba(226,219,197,.34); color:var(--cream); }
.b-ghost:hover{ color:#fff; border-color:var(--clay); }
.b-block{ width:100%; }
.b-sm{ padding:11px 19px; font-size:13.5px; }
.btn[disabled]{ opacity:.55; pointer-events:none; }
.arw::after{ content:'\2192'; display:inline-block; transition:transform .35s var(--e); }
[dir="rtl"] .arw::after{ content:'\2190'; }
.btn:hover .arw::after, a:hover > .arw::after{ transform:translateX(calc(4px * var(--dir))); }

.ul{ position:relative; display:inline-block; padding-block-end:4px; font-family:var(--disp); font-weight:500; font-size:14px; }
.ul::after{ content:''; position:absolute; inset-inline:0; inset-block-end:0; height:1.5px; background:var(--clay); transform:scaleX(.24); transform-origin:inline-start; transition:transform .5s var(--e-out); }
.ul:hover::after{ transform:scaleX(1); }

/* 4. Header */
.hd{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:200; height:var(--hh);
  display:flex; align-items:center; color:var(--cream);
  transform:translateY(-100%); opacity:0;
  transition:transform .7s var(--e), opacity .4s, background .4s, color .4s, box-shadow .4s;
}
body.go .hd{ transform:none; opacity:1; transition-delay:.72s; }
.hd.solid{ background:rgba(36,24,20,.94); backdrop-filter:blur(14px) saturate(1.3); }
.hd.light:not(.solid){ color:var(--ink); }
.hd.hide{ transform:translateY(-100%); transition-delay:0s; }
.hd-in{ display:flex; align-items:center; gap:clamp(10px,2.4vw,28px); width:100%; }
.brand{ display:flex; align-items:baseline; gap:9px; flex-shrink:0; font-family:var(--disp); }
.brand b{ font-size:18.5px; font-weight:600; letter-spacing:-.035em; }
.brand s{ text-decoration:none; font-family:var(--body); font-size:10px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; opacity:.66; }
[lang="ar"] .brand s{ letter-spacing:0; font-size:12px; text-transform:none; }
[lang="ar"] .brand b{ letter-spacing:0; }
.nav{ display:flex; gap:clamp(10px,1.8vw,23px); margin-inline-start:auto; }
.nav a{ font-size:14px; font-weight:400; opacity:.76; transition:opacity .25s; position:relative; padding-block:7px; }
.nav a:hover,.nav a[aria-current]{ opacity:1; }
.nav a[aria-current]::after{ content:''; position:absolute; inset-inline:0; inset-block-end:0; height:1.5px; background:var(--clay); }
.hd-act{ display:flex; align-items:center; gap:9px; margin-inline-start:auto; }
.nav + .hd-act{ margin-inline-start:0; }
.lang{ font-family:var(--disp); font-size:12.5px; font-weight:500; padding:8px 13px; border:1.5px solid currentColor; opacity:.76; transition:opacity .25s, background .25s, color .25s, border-color .25s; }
.lang:hover{ opacity:1; background:var(--clay); border-color:var(--clay); color:#fff; }
.burger{ display:none; width:42px; height:42px; border:1.5px solid currentColor; background:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; opacity:.82; }
.burger i{ width:15px; height:1.5px; background:currentColor; transition:transform .35s var(--e); }
.burger.x i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger.x i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.sheet{ position:fixed; inset:0; z-index:190; background:var(--bark); color:var(--cream); padding:calc(var(--hh) + 22px) var(--gut) 34px; overflow:auto; clip-path:inset(0 0 100% 0); transition:clip-path .62s var(--e-out); pointer-events:none; }
.sheet.open{ clip-path:inset(0); pointer-events:auto; }
.sheet a.big{ display:block; font-family:var(--disp); font-weight:500; font-size:clamp(23px,6.4vw,38px); padding:11px 0; border-block-end:1px solid var(--line-d); opacity:0; transform:translateY(16px); transition:opacity .45s var(--e), transform .45s var(--e); }
.sheet.open a.big{ opacity:1; transform:none; }
.sheet.open a.big:nth-child(1){ transition-delay:.1s; } .sheet.open a.big:nth-child(2){ transition-delay:.15s; }
.sheet.open a.big:nth-child(3){ transition-delay:.2s; } .sheet.open a.big:nth-child(4){ transition-delay:.25s; }
.sheet.open a.big:nth-child(5){ transition-delay:.3s; } .sheet.open a.big:nth-child(6){ transition-delay:.35s; }
.sheet .cta{ margin-block-start:24px; display:grid; gap:9px; }

/* 5. Hero */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; background:var(--bark); color:var(--cream); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.3; }
.hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(36,24,20,.86) 0%, rgba(36,24,20,.5) 44%, rgba(36,24,20,.96) 100%); }
.hero-in{ position:relative; z-index:2; padding-block:calc(var(--hh) + 34px) clamp(24px,4vw,44px); }
.eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--disp); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--clay); margin-block-end:16px; }
[lang="ar"] .eyebrow{ letter-spacing:0; text-transform:none; font-size:13px; }
.eyebrow::before{ content:''; width:clamp(20px,3.4vw,38px); height:1.5px; background:currentColor; flex-shrink:0; }
.hero h1{ font-size:clamp(38px,8.4vw,116px); font-weight:600; margin:0 0 clamp(16px,2.6vw,26px); letter-spacing:-.04em; }
[lang="ar"] .hero h1{ font-size:clamp(32px,6.8vw,92px); letter-spacing:0; }
.hero h1 em{ font-style:normal; color:var(--sand); }
.hero-sub{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(20px,4vw,52px); align-items:end; }
.hero-sub > *{ min-width:0; }
.hero-sub p{ font-size:clamp(15px,1.5vw,18px); color:var(--mut-d); max-width:48ch; margin:0; }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-note{ position:relative; z-index:2; border-block-start:1px solid var(--line-d); }
.hero-note div{ padding-block:15px; font-size:13px; color:var(--mut-d); display:flex; align-items:center; gap:10px; }
.hero-note b{ display:inline-block; width:6px; height:6px; background:var(--clay); flex-shrink:0; }

/* Metric band */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); border-block-start:1px solid var(--line); }
.metrics > *{ min-width:0; }
.metrics div{ padding:clamp(18px,2.8vw,34px) clamp(12px,1.8vw,24px); border-inline-end:1px solid var(--line); }
.metrics div:last-child{ border-inline-end:none; }
.metrics b{ display:block; font-family:var(--disp); font-weight:600; font-size:clamp(26px,3.8vw,48px); line-height:1; letter-spacing:-.04em; color:var(--clay); }
.metrics span{ display:block; font-size:12.5px; color:var(--mut); margin-block-start:9px; }

/* 6. Sections */
.sec{ padding-block:clamp(56px,8.6vw,126px); position:relative; }
.sec-sm{ padding-block:clamp(38px,5.6vw,76px); }
.bark{ background:var(--bark); color:var(--mut-d); }
.bark h2,.bark h3,.bark h4{ color:var(--cream); }
.teal{ background:var(--teal); color:rgba(226,219,197,.76); }
.teal h2,.teal h3,.teal h4{ color:#fff; }
.cream{ background:var(--cream-2); }
.sand{ background:var(--sand); }
.shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap; margin-block-end:clamp(26px,4.2vw,56px); }
.shead h2{ font-size:clamp(27px,4.8vw,58px); max-width:18ch; margin:0; }
[lang="ar"] .shead h2{ max-width:22ch; }
.shead p{ max-width:44ch; color:var(--mut); margin:0; }
.bark .shead p,.teal .shead p{ color:var(--mut-d); }
.mid{ text-align:center; }
.mid .shead{ justify-content:center; }
.mid .eyebrow{ justify-content:center; }
.mid .eyebrow::after{ content:''; width:clamp(20px,3.4vw,38px); height:1.5px; background:currentColor; }
.mid .shead h2{ margin-inline:auto; }

/* Outlined numeral pinned beside a section */
.numbered{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,62px); align-items:start; }
.numbered > *{ min-width:0; }
.bignum{ position:sticky; inset-block-start:calc(var(--hh) + 26px); font-family:var(--disp); font-weight:600; font-size:clamp(54px,10vw,148px); line-height:.8; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px var(--clay); opacity:.5; }
[lang="ar"] .bignum{ letter-spacing:0; }

/* 7. Programme rows */
.grp{ margin-block-end:clamp(34px,5vw,64px); }
.grp-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:22px; flex-wrap:wrap; padding-block-end:14px; }
.grp-hd h3{ font-size:clamp(21px,3.1vw,34px); margin:0; }
.grp-hd p{ margin:0; font-size:14px; color:var(--mut); max-width:48ch; }
.bark .grp-hd p,.teal .grp-hd p{ color:var(--mut-d); }
.crs{ border-block-end:1px solid var(--line); }
.bark .crs,.teal .crs{ border-color:var(--line-d); }
.crs-b{ width:100%; background:none; border:none; text-align:start; display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:clamp(10px,2.2vw,26px); padding:clamp(15px,2.2vw,23px) 2px; transition:padding-inline .4s var(--e); }
.crs-b:hover{ padding-inline-start:12px; }
.crs-i{ font-family:var(--disp); font-size:11.5px; color:var(--stone); min-width:2.4em; }
.crs-n{ font-family:var(--disp); font-weight:500; font-size:clamp(15.5px,1.9vw,21px); }
.crs-m{ font-size:12.5px; color:var(--mut); white-space:nowrap; }
.bark .crs-m,.teal .crs-m{ color:var(--mut-d); }
.crs-h{ font-family:var(--disp); font-weight:500; font-size:clamp(14px,1.6vw,17px); color:var(--clay); white-space:nowrap; }
.teal .crs-h{ color:var(--sand); }
.crs-x{ position:relative; width:14px; height:14px; flex-shrink:0; }
.crs-x::before,.crs-x::after{ content:''; position:absolute; background:currentColor; transition:transform .42s var(--e); }
.crs-x::before{ inset-inline:0; inset-block-start:6.25px; height:1.5px; }
.crs-x::after{ inset-block:0; inset-inline-start:6.25px; width:1.5px; }
.crs.open .crs-x::after{ transform:scaleY(0); }
.crs-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--e); }
.crs.open .crs-body{ grid-template-rows:1fr; }
.crs-body > div{ overflow:hidden; }
.crs-in{ padding:0 2px clamp(18px,2.6vw,26px); display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(16px,3vw,40px); }
.crs-in > *{ min-width:0; }
.crs-in p{ max-width:60ch; color:var(--mut); font-size:14.5px; margin:0; }
.bark .crs-in p,.teal .crs-in p{ color:var(--mut-d); }
.crs-out h4{ font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin:0 0 10px; }
[lang="ar"] .crs-out h4{ letter-spacing:0; text-transform:none; font-size:13px; }
.crs-out li{ display:flex; gap:10px; font-size:14px; color:var(--mut); margin-block-end:7px; }
.bark .crs-out li,.teal .crs-out li{ color:var(--mut-d); }
.crs-out li::before{ content:''; flex-shrink:0; width:5px; height:5px; background:var(--clay); margin-block-start:.62em; }

/* Sticky catalogue index */
.cat{ display:grid; grid-template-columns:200px 1fr; gap:clamp(24px,4.6vw,70px); align-items:start; }
.cat > *{ min-width:0; }
.cat-ix{ position:sticky; inset-block-start:calc(var(--hh) + 30px); }
.cat-ix h4{ font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); margin:0 0 14px; }
[lang="ar"] .cat-ix h4{ letter-spacing:0; text-transform:none; font-size:13px; }
.cat-ix a{ display:block; font-size:14px; color:var(--mut); padding-block:7px; border-inline-start:1.5px solid var(--line); padding-inline-start:13px; transition:color .3s, border-color .3s; }
.cat-ix a.on{ color:var(--ink); border-color:var(--clay); }
.cat-ix a:hover{ color:var(--ink); }

/* 8. Cards with a cut corner */
.notch{ clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
[dir="rtl"] .notch{ clip-path:polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch)); }
.tile{ padding:clamp(20px,2.6vw,32px); background:var(--paper); border:1px solid var(--line); transition:transform .4s var(--e), border-color .4s; }
.tile:hover{ transform:translateY(-4px); border-color:var(--clay); }
.tile .k{ display:block; font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.15em; color:var(--clay); margin-block-end:13px; }
[lang="ar"] .tile .k{ letter-spacing:0; font-size:13px; }
.tile h4{ font-size:17.5px; margin:0 0 8px; }
.tile p{ margin:0; font-size:14px; color:var(--mut); }
.bark .tile,.teal .tile{ background:rgba(226,219,197,.05); border-color:var(--line-d); }
.bark .tile p,.teal .tile p{ color:var(--mut-d); }
.cream .tile{ background:var(--paper); }

.g2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(13px,2vw,24px); }
.g3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr)); gap:clamp(13px,2vw,24px); }
.g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(13px,2vw,24px); }
.g2 > *,.g3 > *,.g4 > *{ min-width:0; }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,76px); align-items:center; }
.duo > *{ min-width:0; }
.duo.rev > :first-child{ order:2; }
.duo.top{ align-items:start; }

/* 9. Scope block: two columns, kept visually distinct on purpose */
.scope{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,40px); }
.scope > *{ min-width:0; }
.scope-col h3{ font-size:clamp(18px,2.2vw,24px); margin:0 0 6px; display:flex; align-items:center; gap:11px; }
.scope-col > .rule{ margin-block:16px 22px; }
.scope-col li{ margin-block-end:22px; }
.scope-col li b{ display:block; font-family:var(--disp); font-weight:500; font-size:16px; margin-block-end:5px; }
.scope-col li span{ display:block; font-size:14px; color:var(--mut); }
.bark .scope-col li span{ color:var(--mut-d); }
.mark{ display:inline-flex; width:22px; height:22px; flex-shrink:0; align-items:center; justify-content:center; font-size:13px; font-family:var(--disp); }
.mark.y{ background:var(--clay); color:#fff; }
.mark.n{ border:1.5px solid var(--stone); color:var(--stone); }

/* 10. Formats, steps, faculty */
.fmt{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2.4vw,30px); }
.fmt > *{ min-width:0; }
.fmt-c{ background:var(--paper); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; }
.bark .fmt-c{ background:rgba(226,219,197,.05); border-color:var(--line-d); }
.fmt-c .rv{ aspect-ratio:16/9; }
.fmt-t{ padding:clamp(18px,2.4vw,28px); flex:1; display:flex; flex-direction:column; }
.fmt-t .k{ font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.15em; color:var(--clay); }
[lang="ar"] .fmt-t .k{ letter-spacing:0; font-size:13px; }
.fmt-t h3{ font-size:clamp(19px,2.2vw,25px); margin:9px 0 9px; }
.fmt-t p{ font-size:14.5px; color:var(--mut); margin:0 0 16px; }
.bark .fmt-t p{ color:var(--mut-d); }
.fmt-t ul{ margin-block-start:auto; }
.fmt-t li{ display:flex; gap:10px; font-size:13.5px; color:var(--mut); padding-block:6px; border-block-start:1px solid var(--line); }
.bark .fmt-t li{ color:var(--mut-d); border-color:var(--line-d); }
.fmt-t li::before{ content:''; flex-shrink:0; width:5px; height:5px; background:var(--clay); margin-block-start:.68em; }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.2vw,30px); }
.steps > *{ min-width:0; }
.step{ padding-block-start:20px; border-block-start:1.5px solid var(--clay); }
.step b{ display:block; font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.13em; color:var(--clay); margin-block-end:13px; }
[lang="ar"] .step b{ letter-spacing:0; }
.step h4{ font-size:17px; margin:0 0 8px; }
.step p{ margin:0; font-size:14px; color:var(--mut); }
.bark .step p,.teal .step p{ color:var(--mut-d); }

.fac{ padding:clamp(20px,2.6vw,30px); border:1px solid var(--line); background:var(--paper); position:relative; overflow:hidden; }
.fac::before{ content:''; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:2px; background:var(--clay); transform:scaleX(0); transform-origin:inline-start; transition:transform .6s var(--e-out); }
.fac:hover::before{ transform:scaleX(1); }
.fac .nm{ font-family:var(--disp); font-weight:600; font-size:clamp(18px,2.1vw,23px); margin:0 0 4px; }
.fac .rl{ font-size:13px; color:var(--clay); margin:0 0 12px; }
.fac p{ font-size:14px; color:var(--mut); margin:0 0 15px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tags span{ font-size:12px; padding:4px 11px; border:1px solid var(--line); color:var(--mut); }

/* 11. Reviews, no avatars */
.rv-top{ display:flex; align-items:flex-end; gap:clamp(16px,3.4vw,42px); flex-wrap:wrap; padding-block-end:20px; border-block-end:1px solid var(--line); margin-block-end:24px; }
.rv-avg{ font-family:var(--disp); font-weight:600; font-size:clamp(44px,7vw,74px); line-height:.9; letter-spacing:-.05em; color:var(--clay); }
.rv-meta .st{ font-size:18px; letter-spacing:4px; color:var(--clay); }
.rv-meta span{ display:block; font-size:13px; color:var(--mut); margin-block-start:4px; }
.rvs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(13px,2vw,22px); }
.rvs > *{ min-width:0; }
.rvc{ background:var(--paper); border:1px solid var(--line); padding:clamp(18px,2.4vw,28px); display:flex; flex-direction:column; }
.cream .rvc{ background:var(--paper); }
.rvc .st{ font-size:13.5px; letter-spacing:2px; color:var(--clay); margin-block-end:12px; }
.rvc p{ font-size:14.5px; margin:0 0 16px; }
.rvc .by{ margin-block-start:auto; padding-block-start:14px; border-block-start:1px solid var(--line); }
.rvc .by b{ display:block; font-family:var(--disp); font-weight:500; font-size:14px; }
.rvc .by span{ display:block; font-size:12.5px; color:var(--mut); margin-block-start:2px; }

/* 12. Forms */
.card{ background:var(--paper); border:1px solid var(--line); padding:clamp(20px,3.2vw,38px); }
.fld{ margin-block-end:16px; }
.fld label{ display:block; font-family:var(--body); font-weight:600; font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--mut); margin-block-end:7px; }
[lang="ar"] .fld label{ letter-spacing:0; text-transform:none; font-size:13px; }
.fld label .opt{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--stone); }
.fld input,.fld textarea{
  width:100%; padding:13px 15px; font-family:var(--body); font-size:15.5px; color:var(--ink);
  background:var(--cream-2); border:1.5px solid var(--line); border-radius:0;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.fld input:focus,.fld textarea:focus{ outline:none; border-color:var(--clay); background:var(--paper); box-shadow:0 0 0 3px rgba(199,115,62,.16); }
.fld textarea{ resize:vertical; min-height:110px; }
.fld.bad input,.fld.bad textarea{ border-color:#B3261E; background:#FCF3F2; }
.err{ display:none; font-size:13px; color:#B3261E; margin-block-start:7px; }
.fld.bad .err{ display:block; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.two > *{ min-width:0; }
.req{ color:var(--clay); }
.agree{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--mut); margin-block-end:8px; }
.agree input{ margin-block-start:5px; flex-shrink:0; width:17px; height:17px; accent-color:var(--clay); }
.agree a{ color:var(--clay); text-decoration:underline; }
.agree.bad{ color:#B3261E; }
.agree.bad input{ outline:2px solid #B3261E; outline-offset:2px; }
.fsum{ display:none; background:#FCF3F2; border-inline-start:3px solid #B3261E; padding:13px 16px; font-size:13.5px; color:#B3261E; margin-block-end:16px; }
.fsum.show{ display:block; }
.note{ background:var(--cream-2); border-inline-start:3px solid var(--clay); padding:14px 17px; font-size:13.5px; color:var(--mut); margin-block-start:16px; }
.note a{ color:var(--clay); text-decoration:underline; }
.bark .note,.teal .note{ background:rgba(226,219,197,.06); color:var(--mut-d); }

/* 13. Page head, accordion, legal */
.ph{ background:var(--bark); color:var(--cream); padding-block:calc(var(--hh) + clamp(38px,6vw,82px)) clamp(30px,5vw,60px); position:relative; overflow:hidden; }
.ph-bg{ position:absolute; inset:0; }
.ph-bg img{ width:100%; height:100%; object-fit:cover; opacity:.18; }
.ph-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(36,24,20,.6), rgba(36,24,20,.95)); }
.ph > .wrap,.ph > .narrow{ position:relative; z-index:2; }
.crumb{ font-size:12.5px; color:var(--mut-d); margin-block-end:14px; }
.crumb a:hover{ color:var(--clay); }
.ph h1{ font-size:clamp(30px,6.2vw,74px); margin:0; }
.ph p{ color:var(--mut-d); max-width:58ch; margin:15px 0 0; }

.qa{ border-block-start:1px solid var(--line); }
.qa-i{ border-block-end:1px solid var(--line); }
.qa-q{ width:100%; background:none; border:none; text-align:start; padding:clamp(17px,2.4vw,26px) 2px; display:flex; justify-content:space-between; align-items:center; gap:22px; font-family:var(--disp); font-weight:500; font-size:clamp(15.5px,1.9vw,19px); }
.qa-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--e); }
.qa-i.open .qa-a{ grid-template-rows:1fr; }
.qa-i.open .crs-x::after{ transform:scaleY(0); }
.qa-a > div{ overflow:hidden; }
.qa-a p{ padding:0 2px clamp(17px,2.4vw,26px); margin:0; color:var(--mut); max-width:74ch; }

.legal{ max-width:78ch; }
.legal h2{ font-size:clamp(20px,2.6vw,27px); margin-block-start:clamp(30px,4.4vw,52px); }
.legal h2:first-child{ margin-block-start:0; }
.legal h3{ font-family:var(--body); font-weight:700; font-size:16px; margin-block:22px 8px; }
.legal p,.legal li{ color:#4A4038; font-size:16px; }
.legal ul{ list-style:disc; padding-inline-start:22px; margin-block-end:1em; }
.legal ol{ list-style:decimal; padding-inline-start:22px; margin-block-end:1em; }
.legal li{ margin-block-end:8px; }
.toc{ background:var(--cream-2); border:1px solid var(--line); padding:clamp(18px,2.4vw,26px); margin-block-end:clamp(26px,4vw,44px); }
.toc h4{ font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--mut); margin:0 0 12px; }
[lang="ar"] .toc h4{ letter-spacing:0; text-transform:none; font-size:13px; }
.toc li{ margin-block-end:7px; font-size:15px; }
.toc a:hover{ color:var(--clay); text-decoration:underline; }
.tbl-w{ overflow-x:auto; margin-block:10px 20px; }
.tbl{ width:100%; border-collapse:collapse; font-size:15px; min-width:min(100%,500px); }
.tbl th,.tbl td{ text-align:start; padding:12px 16px 12px 0; border-block-end:1px solid var(--line); vertical-align:top; }
[dir="rtl"] .tbl th,[dir="rtl"] .tbl td{ padding:12px 0 12px 16px; }
.tbl th{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); font-weight:700; }
[lang="ar"] .tbl th{ letter-spacing:0; text-transform:none; font-size:13px; }
.tbl td:first-child{ color:var(--mut); }
.tbl.kv td:first-child{ width:40%; }
.bark .tbl th,.bark .tbl td{ border-color:var(--line-d); }
.bark .tbl td:first-child{ color:var(--mut-d); }

/* 14. Credentials strip */
.creds{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.4vw,28px); }
.creds > *{ min-width:0; }
.cred{ padding:clamp(20px,2.6vw,30px); border:1px solid var(--line-d); }
.cred .k{ display:block; font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--sand); margin-block-end:12px; }
[lang="ar"] .cred .k{ letter-spacing:0; text-transform:none; font-size:13px; }
.cred b{ display:block; font-family:var(--disp); font-weight:600; font-size:clamp(17px,2.1vw,22px); color:var(--cream); line-height:1.3; margin-block-end:8px; }
.cred span{ display:block; font-size:13.5px; color:var(--mut-d); }

/* 15. CTA, footer */
.cta-b{ position:relative; overflow:hidden; background:var(--bark); color:var(--cream); padding:clamp(38px,6vw,86px) clamp(22px,4vw,58px); text-align:center; }
.cta-b::before{ content:''; position:absolute; inset:-50% -10%; background:radial-gradient(ellipse at 50% 0%, rgba(199,115,62,.36), transparent 64%); }
.cta-b > *{ position:relative; }
.cta-b h2{ font-size:clamp(25px,4.4vw,50px); max-width:20ch; margin-inline:auto; margin-block-end:14px; }
.cta-b p{ color:var(--mut-d); max-width:48ch; margin-inline:auto; margin-block-end:26px; }
.cta-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.ft{ background:var(--ink); color:var(--mut-d); padding-block:clamp(42px,6vw,72px) 0; }
.ft-g{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.5fr; gap:clamp(20px,3vw,38px); padding-block-end:clamp(28px,4vw,46px); border-block-end:1px solid var(--line-d); }
.ft-g > *{ min-width:0; }
.ft .brand b{ color:var(--cream); font-size:21px; }
.ft > .wrap > .ft-g p{ font-size:13.5px; color:rgba(226,219,197,.46); margin-block-start:14px; }
.ft h4{ font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); margin:0 0 15px; }
[lang="ar"] .ft h4{ letter-spacing:0; text-transform:none; font-size:13px; }
.ft li{ margin-block-end:9px; font-size:13.5px; }
.ft li a{ color:rgba(226,219,197,.54); transition:color .22s; }
.ft li a:hover{ color:var(--cream); }
.imprint{ font-size:13px; line-height:2; color:rgba(226,219,197,.5); }
.imprint b{ color:rgba(226,219,197,.8); font-weight:600; }
.ft-bar{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:20px; font-size:12px; color:rgba(226,219,197,.36); }
.lnk{ background:none; border:none; padding:0; font:inherit; color:inherit; text-decoration:underline; }
.lnk:hover{ color:var(--cream); }

/* 16. Cookies, progress, dock */
.prog{ position:fixed; inset-block-start:0; inset-inline:0; height:2px; z-index:250; pointer-events:none; }
.prog i{ display:block; height:100%; background:var(--clay); transform:scaleX(0); transform-origin:inline-start; }

.ck{ position:fixed; inset-block-end:16px; inset-inline:16px; z-index:400; max-width:580px; margin-inline:auto; background:var(--paper); color:var(--ink); border:1px solid var(--line); padding:clamp(19px,2.6vw,26px); box-shadow:0 26px 60px rgba(36,24,20,.3); display:none; }
.ck.show{ display:block; animation:ckIn .45s var(--e); }
@keyframes ckIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.ck h4{ font-size:18px; margin:0 0 6px; }
.ck > p{ font-size:13px; color:var(--mut); margin:0 0 15px; }
.ck a{ color:var(--clay); text-decoration:underline; }
.ck-more{ display:none; margin-block-end:15px; border-block-start:1px solid var(--line); }
.ck.x .ck-more{ display:block; }
.ck-opt{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding-block:12px; border-block-end:1px solid var(--line); }
.ck-opt b{ display:block; font-size:14px; }
.ck-opt span{ display:block; font-size:12.5px; color:var(--mut); }
.sw{ position:relative; width:44px; height:25px; flex-shrink:0; }
.sw input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; z-index:2; }
.sw i{ position:absolute; inset:0; background:var(--line); transition:background .28s; }
.sw i::after{ content:''; position:absolute; inset-block-start:3px; inset-inline-start:3px; width:19px; height:19px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .28s var(--e); }
.sw input:checked + i{ background:var(--clay); }
.sw input:checked + i::after{ transform:translateX(calc(19px * var(--dir))); }
.sw input:disabled + i{ opacity:.45; }
.ck-row{ display:flex; gap:8px; flex-wrap:wrap; }
.ck-row .btn{ flex:1 1 126px; }

.dock{ position:fixed; inset-block-end:0; inset-inline:0; z-index:180; display:none; gap:8px; padding:10px var(--gut); background:rgba(251,249,244,.97); backdrop-filter:blur(12px); border-block-start:1px solid var(--line); }
.dock .btn{ flex:1; }

[id]{ scroll-margin-block-start:calc(var(--hh) + 20px); }

/* 17. Responsive */
@media (max-width:1080px){
  .ft-g{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .metrics{ grid-template-columns:1fr 1fr; }
  .metrics div:nth-child(-n+2){ border-block-end:1px solid var(--line); }
  .metrics div:nth-child(2n){ border-inline-end:none; }
  .hero-sub{ grid-template-columns:1fr; gap:20px; }
  .g4{ grid-template-columns:1fr 1fr; }
  .cat{ grid-template-columns:1fr; }
  .cat-ix{ position:static; display:none; }
  .creds{ grid-template-columns:1fr; }
  .crs-in{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:860px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .hd-act .btn{ display:none; }
  .hd-in{ gap:10px; }
  .duo,.duo.rev{ grid-template-columns:1fr; gap:26px; }
  .duo.rev > :first-child{ order:0; }
  .dock{ display:flex; }
  body{ padding-block-end:68px; }
  .sec{ padding-block:clamp(46px,7vw,80px); }
  .fmt{ grid-template-columns:1fr; }
  .scope{ grid-template-columns:1fr; gap:34px; }
  .numbered{ grid-template-columns:1fr; gap:14px; }
  .bignum{ position:static; font-size:clamp(46px,13vw,72px); }
}
@media (max-width:640px){
  .ft-g{ grid-template-columns:1fr; gap:24px; }
  .steps,.g4{ grid-template-columns:1fr; }
  .two{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:1fr; }
  .metrics div{ border-inline-end:none; border-block-end:1px solid var(--line); }
  .crs-b{ grid-template-columns:1fr auto; row-gap:6px; }
  .crs-i{ display:none; }
  .crs-m{ grid-column:1; font-size:12px; }
  .crs-h{ grid-column:2; }
  .brand s{ display:none; }
  .ft .brand s{ display:block; }
}

/* 18. Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .up,.w > i{ opacity:1 !important; transform:none !important; }
  .rv::after{ transform:translateY(-200%) !important; }
  .rv > img{ transform:none !important; }
  .rule{ transform:scaleX(1) !important; }
  .curtain{ display:none !important; }
  .bignum{ position:static !important; }
}