/* =========================================================
   STELLAR — DESIGN SYSTEM
   Warm cream paper-cut · petrol blue · muted gold
   ========================================================= */
:root{
  /* paper stack */
  --cream:        #F1EADC;
  --cream-deep:   #E7DECB;
  --paper:        #FBF7EF;
  --paper-edge:   #FFFDF8;

  /* brand */
  --petrol:       #005467;   /* taken from the official logo */
  --petrol-deep:  #01323E;
  --petrol-soft:  #2C7383;
  --gold:         #A98A4B;   /* hairlines, rules, graphic accents */
  --gold-ink:     #806631;   /* the same muted gold, one step down, for small text */
  --gold-light:   #C9AC72;   /* gold on dark surfaces */
  --graphite:     #2C3033;
  --ink:          #14191B;

  --rule:         rgba(0,84,103,.13);
  --rule-soft:    rgba(0,84,103,.07);
  --hair:         rgba(0,84,103,.10);
  --gold-hair:    rgba(169,138,75,.55);

  /* type */
  --display: 'Manrope', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  --editorial: 'Newsreader', Georgia, 'Times New Roman', serif;
  --arabic-display: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --arabic-body:    'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --arabic-editorial:'Noto Naskh Arabic', 'Times New Roman', serif;
  --arabic: var(--arabic-body);

  /* metrics */
  --gutter: clamp(20px, 5vw, 88px);
  --maxw: 1320px;
  --section: clamp(78px, 10.4vw, 168px);
  --ease: cubic-bezier(.22,.61,.36,1);
}
html[dir="rtl"]{ --display: var(--arabic-display); --editorial: var(--arabic-editorial); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--display); font-weight:400;
  font-size:clamp(15.5px,1.05vw,17px); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html[dir="rtl"] body{ font-family:var(--arabic-body); line-height:1.9; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
::selection{ background:var(--petrol); color:var(--paper-edge); }

.skip{
  position:absolute; inset-inline-start:-9999px; top:10px; z-index:99;
  background:var(--petrol); color:var(--paper-edge); padding:12px 20px;
  font-size:.82rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
}
.skip:focus{ inset-inline-start:12px; }
html[dir="rtl"] .skip{ letter-spacing:0; text-transform:none; }

/* paper grain — the only texture in the system */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle at 20% 12%, rgba(0,84,103,.045), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(169,138,75,.05), transparent 52%);
}
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:1; }

/* ---------- typography scale ----------
   Hierarchy comes from size, spacing and colour. Weight stays light:
   headlines 300, body 400, labels 500. Bold is not used. */
body{ font-weight:400; }
.display{
  font-family:var(--display); font-weight:300; color:var(--petrol-deep);
  font-size:clamp(2.5rem,7vw,5.3rem); line-height:1.02;
  letter-spacing:-.032em; margin:0; text-wrap:balance;
}
html[dir="rtl"] .display{ font-family:var(--arabic-display); letter-spacing:0; line-height:1.42; font-weight:300; font-size:clamp(1.9rem,4.8vw,3.6rem); }
.h2{
  font-family:var(--display); font-weight:300; color:var(--petrol-deep);
  font-size:clamp(1.85rem,4.1vw,3.3rem); line-height:1.08;
  letter-spacing:-.026em; margin:0; text-wrap:balance;
}
html[dir="rtl"] .h2{ font-family:var(--arabic-display); letter-spacing:0; line-height:1.5; font-weight:300; font-size:clamp(1.5rem,3.1vw,2.4rem); }
.h3{ font-family:var(--display); font-weight:500; color:var(--petrol-deep); font-size:clamp(1.12rem,1.9vw,1.5rem); line-height:1.25; letter-spacing:-.012em; margin:0; }
html[dir="rtl"] .h3{ font-family:var(--arabic-display); letter-spacing:0; line-height:1.6; font-weight:500; font-size:clamp(1.05rem,1.7vw,1.32rem); }
.lede{
  font-family:var(--editorial); font-weight:300;
  font-size:clamp(1.1rem,1.75vw,1.44rem); line-height:1.62; letter-spacing:-.006em;
  color:var(--graphite); max-width:33ch; margin:0;
}
html[dir="rtl"] .lede{ font-family:var(--arabic-editorial); font-weight:400; line-height:2.0; max-width:36ch; font-size:clamp(1.02rem,1.5vw,1.24rem); }
.body{ max-width:60ch; color:#3F464A; margin:0; font-weight:400; }
html[dir="rtl"] .body{ font-family:var(--arabic-body); line-height:1.92; max-width:44ch; }
.small{ font-size:.84rem; line-height:1.68; color:#5F666A; }
html[dir="rtl"] .small{ font-size:.88rem; line-height:1.9; }
.serif{ font-family:var(--editorial); font-weight:300; }
html[dir="rtl"] .serif{ font-family:var(--arabic-editorial); font-weight:400; }
.ar{ font-family:var(--arabic-body); direction:rtl; }
.alt-line{ font-family:var(--arabic-editorial); direction:rtl; text-align:left; font-weight:400; }
html[dir="rtl"] .alt-line{ font-family:'Newsreader', Georgia, serif; direction:ltr; text-align:right; font-weight:300; }

/* section label — a small plate cut into the paper */
.tab{
  display:inline-block; background:transparent; color:var(--gold-ink);
  font-size:.66rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  padding:0 0 10px; border-bottom:1px solid var(--gold-hair);
}
html[dir="rtl"] .tab{ letter-spacing:.06em; font-size:.8rem; text-transform:none; font-weight:400; }
.tab--gold{ color:var(--gold); }
.num{ font-family:var(--display); font-weight:500; font-size:.74rem; letter-spacing:.14em; color:var(--gold-ink); }

/* ---------- paper-cut primitives ----------
   A plane is a single sheet of cut paper: a clipped shape, a real drop
   shadow, and a lit top edge. Every visual in the site is built from these. */
.sheet{
  position:relative; background:var(--paper);
  box-shadow:
    0 1px 0 var(--paper-edge) inset,
    0 34px 70px -52px rgba(1,50,62,.34),
    0 2px 6px -5px rgba(1,50,62,.075);
}
.sheet--cream{ background:var(--cream-deep); }
.sheet--petrol{ background:var(--petrol); color:var(--paper-edge); }
.sheet--deep{ background:var(--petrol-deep); color:var(--paper-edge); }

.plane{
  position:relative; background:var(--paper);
  filter:drop-shadow(0 16px 24px rgba(1,50,62,.075)) drop-shadow(0 1px 1px rgba(1,50,62,.04));
}
.plane::after{ /* lit cut edge */
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 22%,rgba(255,255,255,.9) 78%,transparent);
  pointer-events:none;
}
.plane--cream{ background:var(--cream-deep); }
.plane--petrol{ background:var(--petrol); color:var(--paper-edge); }
.plane--gold{ background:var(--gold); color:#241F0E; }

/* THREE master paper geometries — the whole site is cut from these.
   .g-sheet     architectural sheet — calm institutional surfaces
   .g-corner    precision corner cut — hierarchy, index and active states
   .g-signature signature asymmetric cut — reserved for strategic moments */
.g-sheet{ clip-path:none; }
.g-corner{ clip-path:polygon(0 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px)); }
.g-signature{ clip-path:polygon(0 0,100% 0,calc(100% - 34px) 100%,0 100%); }

/* mirrored for right-to-left reading */
html[dir="rtl"] .g-corner{ clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); }
html[dir="rtl"] .g-signature{ clip-path:polygon(34px 0,100% 0,100% 100%,0 100%); }
html[dir="rtl"] .chain__cap{ clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); }

/* a channel: the negative space the system runs through */
.spine{ position:absolute; inset-block:0; width:2px; background:linear-gradient(180deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent); opacity:.5; }

/* ---------- buttons ----------
   Slim proportions, hairline structure, one gold detail, quiet movement. */
.btn{
  --bg:var(--petrol); --fg:var(--paper-edge);
  position:relative; display:inline-flex; align-items:center; gap:12px;
  background:var(--bg); color:var(--fg);
  font-weight:500; font-size:.72rem; letter-spacing:.19em; text-transform:uppercase;
  padding:15px 26px; border:0; cursor:pointer; line-height:1;
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s, box-shadow .5s var(--ease);
  box-shadow:0 10px 22px -19px rgba(1,50,62,.7);
}
html[dir="rtl"] .btn{ letter-spacing:.02em; text-transform:none; font-size:.9rem; font-weight:400; }
.btn::after{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px; background:var(--gold); opacity:.7; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:none; }
.btn .bar{ width:18px; height:1px; background:currentColor; opacity:.6; transition:width .5s var(--ease), opacity .4s; }
.btn:hover .bar{ width:28px; opacity:1; }
.btn--ghost{ --bg:transparent; --fg:var(--petrol); box-shadow:inset 0 0 0 1px var(--rule); }
.btn--ghost::after{ opacity:0; transition:opacity .4s; }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--gold-hair); }
.btn--ghost:hover::after{ opacity:.8; }
.btn--gold{ --bg:var(--gold); --fg:#241F0E; }
.btn--gold::after{ background:rgba(255,255,255,.5); }

/* ---------- header ----------
   The complete vertical lockup, sized down and given real clear space.
   Nothing else but language and menu. */
.hdr{
  position:fixed; inset-inline:0; top:0; z-index:60; padding-block:14px;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
.hdr.is-stuck{ background:rgba(241,234,220,.88); -webkit-backdrop-filter:blur(18px) saturate(115%); backdrop-filter:blur(18px) saturate(115%); box-shadow:0 1px 0 var(--hair); padding-block:8px; }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:block; padding:8px 14px 8px 0; }
html[dir="rtl"] .brand{ padding:8px 0 8px 14px; }
.brand img{ height:58px; width:auto; object-fit:contain; transition:height .6s var(--ease); }
.hdr.is-stuck .brand img{ height:50px; width:auto; }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.nav a{
  font-size:.72rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
  color:var(--graphite); padding-block:8px; position:relative; transition:color .4s;
}
html[dir="rtl"] .nav a{ letter-spacing:.01em; text-transform:none; font-size:.92rem; font-weight:400; }
.nav a::after{ content:""; position:absolute; inset-inline-start:0; bottom:2px; height:1px; width:0; background:var(--gold); transition:width .5s var(--ease); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ width:100%; }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--petrol); }
.hdr__act{ display:flex; align-items:center; gap:18px; }
.lang{
  background:none; border:0; cursor:pointer; padding:7px 2px;
  font-size:.72rem; font-weight:500; letter-spacing:.14em; color:var(--petrol);
  border-bottom:1px solid var(--hair); transition:border-color .4s;
}
html[dir="rtl"] .lang{ letter-spacing:.02em; font-size:.85rem; }
.lang:hover{ border-color:var(--gold-hair); }
.burger{ display:none; width:40px; height:40px; background:none; border:0; cursor:pointer; padding:0; position:relative; }
.burger span{ position:absolute; inset-inline:9px; height:1px; background:var(--petrol); transition:transform .5s var(--ease), opacity .3s; }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:23px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:55; background:var(--cream);
  transform:translateY(-101%); transition:transform .7s var(--ease);
  display:flex; flex-direction:column; justify-content:center; padding:110px var(--gutter) 44px; visibility:hidden;
}
body.menu-open .drawer{ transform:translateY(0); visibility:visible; }
.drawer a{
  font-family:var(--display); font-weight:300; font-size:clamp(1.7rem,7.4vw,2.4rem);
  letter-spacing:-.03em; line-height:1.3; color:var(--petrol-deep);
  border-bottom:1px solid var(--hair); padding-block:15px; display:flex; justify-content:space-between; align-items:baseline;
}
html[dir="rtl"] .drawer a{ letter-spacing:0; font-weight:400; }
.drawer a span{ font-size:.66rem; letter-spacing:.16em; color:var(--gold-ink); font-weight:500; }
.drawer__foot{ margin-top:40px; display:flex; flex-wrap:wrap; gap:14px; }
.drawer__foot .btn{
  font-family:var(--display); font-size:.72rem; font-weight:500; letter-spacing:.19em;
  color:var(--paper-edge); border-bottom:0; padding:15px 26px; line-height:1;
  display:inline-flex; justify-content:flex-start; align-items:center; gap:12px;
}
html[dir="rtl"] .drawer__foot .btn{ letter-spacing:.02em; font-size:.9rem; font-weight:400; }

/* hero kicker — the company definition, in gold, at institutional scale */
.kicker{
  margin:0 0 clamp(16px,2.4vh,22px); color:var(--gold-ink);
  font-family:var(--display); font-weight:500; font-size:.74rem;
  letter-spacing:.26em; text-transform:uppercase; line-height:1.5;
}
html[dir="rtl"] .kicker{ font-family:var(--arabic-display); font-weight:500; letter-spacing:.02em; text-transform:none; font-size:.98rem; }

/* ---------- hero ----------
   Complete lockup, statement, system. In that order, with real clear space. */
.hero{ position:relative; padding-block:clamp(112px,15vh,180px) clamp(36px,6vh,72px); overflow:hidden; }
@media (min-width:1081px){ .hero{ min-height:100svh; display:flex; align-items:center; } }
.hero__grid{ display:grid; grid-template-columns:1fr; gap:clamp(24px,3.6vw,38px); }
.hero__system{ margin-block:clamp(6px,1.4vh,14px); }
@media (min-width:1081px){
  .hero__grid{
    grid-template-columns:1.04fr .9fr; column-gap:clamp(40px,6vw,96px); row-gap:clamp(26px,3vw,40px);
    grid-template-areas:"intro system" "foot system"; align-items:center;
  }
  .hero__intro{ grid-area:intro; align-self:end; }
  .hero__foot{ grid-area:foot; align-self:start; }
  .hero__system{ grid-area:system; margin:0; }
}
.hero__logo{ width:clamp(118px,10.5vw,154px); margin-bottom:clamp(38px,5.6vh,58px); }
.hero__logo img{ width:100%; height:auto; object-fit:contain; }

.hero__ar{
  font-family:var(--arabic-editorial); direction:rtl; text-align:left; font-weight:400;
  font-size:clamp(1.02rem,2.1vw,1.55rem); line-height:1.85; color:var(--graphite);
  margin:clamp(16px,2.6vh,24px) 0 0;
}
html[dir="rtl"] .hero__ar{ font-family:'Newsreader', Georgia, serif; direction:ltr; text-align:right; font-weight:300; letter-spacing:-.01em; line-height:1.36; }
.hero__rule{ width:44px; height:1px; background:var(--gold); opacity:.8; margin-block:clamp(24px,3.8vh,38px); }
.hero__list{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:13px clamp(18px,2.4vw,32px); }
.hero__list li{ position:relative; font-size:.71rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:#4A5155; }
.hero__list li::before{ content:""; position:absolute; inset-block-start:-8px; inset-inline-start:0; width:11px; height:1px; background:var(--gold); opacity:.7; }
html[dir="rtl"] .hero__list li{ letter-spacing:.01em; text-transform:none; font-size:.9rem; font-weight:400; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- the eight layers ----------
   Eight cut planes, arriving misaligned, resolving against one gold hairline. */
.system{ position:relative; padding-inline-start:24px; }
html[dir="rtl"] .system{ padding-inline-start:0; padding-inline-end:24px; }
.system__spine{
  position:absolute; inset-block:6px 44px; inset-inline-start:0; width:1px; background:var(--gold);
  transform-origin:top; transform:scaleY(var(--p,0)); opacity:.85;
}
html[dir="rtl"] .system__spine{ inset-inline-start:auto; inset-inline-end:0; }
.stack{ display:flex; flex-direction:column; gap:clamp(6px,.9vw,10px); }
.stack__l{
  position:relative; display:flex; align-items:center; gap:12px;
  min-height:clamp(42px,5.2vw,54px); padding-inline:clamp(16px,2vw,26px);
  background:var(--paper); color:var(--petrol-deep);
  filter:drop-shadow(0 15px 22px rgba(1,50,62,.075)) drop-shadow(0 1px 1px rgba(1,50,62,.04));
  will-change:transform;
}
.stack__l::after{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85) 20%,rgba(255,255,255,.85) 80%,transparent); }
.stack__l b{ font-size:.69rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
html[dir="rtl"] .stack__l b{ letter-spacing:.02em; text-transform:none; font-size:.9rem; font-weight:400; }
.stack__l i{ margin-inline-start:auto; font-style:normal; font-size:.63rem; letter-spacing:.13em; color:var(--gold-ink); font-weight:500; }
.stack__l.is-first{ background:var(--petrol); color:var(--paper-edge); }
.stack__l.is-first i{ color:var(--gold-light); }
.stack__l.is-mid{ background:var(--cream-deep); }
.stack__l.is-last{ background:var(--gold); color:#241F0E; }
.stack__l.is-last i{ color:rgba(36,31,14,.58); }
.system__cap{
  margin:clamp(16px,2.2vw,24px) 0 0;
  font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink);
  opacity:var(--p,0); transition:opacity .6s var(--ease);
  display:flex; align-items:center; gap:14px;
}
html[dir="rtl"] .system__cap{ letter-spacing:.02em; text-transform:none; font-size:.88rem; font-weight:400; }
.system__cap::before{ content:""; height:1px; width:calc(var(--p,0) * 38px); background:var(--gold); flex:none; }

/* ---------- generic section ---------- */
.sec{ padding-block:var(--section); position:relative; }
.sec--tight{ padding-block:clamp(58px,8vw,116px); }
.sec__head{ max-width:54ch; margin-bottom:clamp(42px,5.8vw,84px); }
.sec__head .h2{ margin-top:26px; }
.sec__head .lede{ margin-top:26px; }
.rule{ height:1px; background:var(--hair); border:0; margin:0; }
.sec--tone{ background:linear-gradient(180deg,transparent,rgba(231,222,203,.5) 16%,rgba(231,222,203,.5) 84%,transparent); }
.order{ display:flex; flex-wrap:wrap; gap:12px clamp(20px,2.8vw,36px); padding-block:24px; border-block:1px solid var(--hair); margin-bottom:clamp(34px,4.6vw,60px); }
.order span{ position:relative; font-size:.83rem; color:var(--graphite); padding-inline-start:18px; }
.order span::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em; width:8px; height:1px; background:var(--gold); opacity:.8; }
html[dir="rtl"] .order span{ font-size:.92rem; }

/* ---------- the idea: a filing block ----------
   Six tabs cut to different widths. Marketing is one of them, no larger
   than the rest — the metaphor carries the argument before the copy does. */
.filing{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:0; align-items:start; }
.tabs{ display:flex; flex-direction:column; gap:clamp(6px,.8vw,9px); position:relative; z-index:2; }
.tabs__b{
  --w: 0px;
  position:relative; text-align:start; background:var(--paper); border:0; cursor:pointer;
  width:calc(100% - var(--w)); padding:clamp(14px,1.9vw,19px) clamp(16px,2.2vw,26px);
  display:flex; align-items:center; gap:14px; color:var(--petrol-deep);
  filter:drop-shadow(0 15px 22px rgba(1,50,62,.075)) drop-shadow(0 1px 1px rgba(1,50,62,.04));
  transition:transform .45s var(--ease), background .4s, color .4s, width .45s var(--ease);
}
.tabs__b::after{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 18%,rgba(255,255,255,.9) 82%,transparent); }
.tabs__b:hover{ transform:translateX(3px); }
html[dir="rtl"] .tabs__b:hover{ transform:translateX(-3px); }
.tabs__b[aria-selected="true"]{ background:var(--petrol); color:var(--paper-edge); width:100%; transform:translateX(6px); }
html[dir="rtl"] .tabs__b[aria-selected="true"]{ transform:translateX(-6px); }
.tabs__b .n{ font-size:.68rem; letter-spacing:.1em; color:var(--gold-ink); font-weight:500; }
.tabs__b[aria-selected="true"] .n{ color:var(--gold-light); }
.tabs__b .k{ font-weight:500; letter-spacing:.02em; font-size:.98rem; }
html[dir="rtl"] .tabs__b .k{ letter-spacing:0; }
.tabs__b .edge{ /* the protruding index tab */
  position:absolute; inset-inline-end:-1px; inset-block-start:50%; translate:0 -50%;
  width:5px; height:44%; background:var(--gold); opacity:.35; transition:opacity .4s, width .4s var(--ease);
}
html[dir="rtl"] .tabs__b .edge{ inset-inline-end:auto; inset-inline-start:-1px; }
.tabs__b:hover .edge,.tabs__b[aria-selected="true"] .edge{ opacity:1; width:7px; }

.panel{
  padding:clamp(26px,3.4vw,46px) clamp(24px,3vw,44px);
  padding-inline-start:clamp(38px,5vw,80px);
  margin-inline-start:clamp(-64px,-3.6vw,-26px); margin-block-start:clamp(18px,2.4vw,34px);
  min-height:0; background:var(--paper);
  box-shadow:0 1px 0 var(--paper-edge) inset, 0 30px 60px -46px rgba(1,50,62,.5);
}
.panel::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:1px; height:56px; background:var(--gold); opacity:.7; }
.panel h3{ margin:0 0 12px; }
.panel .ar-line{ font-family:var(--arabic-editorial); direction:rtl; text-align:left; color:var(--gold-ink); font-size:1.02rem; margin-top:16px; }
html[dir="rtl"] .panel .ar-line{ display:none; }

/* ---------- difference: fragmentation against one system ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.4vw,52px); align-items:stretch; }
.frag{ padding:clamp(22px,3.2vw,40px); }
.frag__field{ position:relative; margin:26px 0 0; padding-block:6px 10px; }
.frag__p{
  position:relative; display:block; width:fit-content; max-width:100%;
  padding:10px clamp(13px,1.6vw,18px); margin-block:clamp(9px,1.2vw,13px);
  background:var(--paper); color:var(--graphite); font-size:.88rem;
  filter:drop-shadow(0 13px 19px rgba(1,50,62,.07)) drop-shadow(0 1px 1px rgba(1,50,62,.035));
  transform:translateX(var(--x,0)) rotate(var(--r,0deg));
  transition:transform .7s var(--ease);
}
.frag__p::after{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px; background:rgba(255,255,255,.85); }
.frag:hover .frag__p,.frag:focus-within .frag__p{
  transform:translateX(calc(var(--x,0) * .25)) rotate(calc(var(--r,0deg) * .2));
}
.frag__note{ margin-top:24px; font-size:.86rem; color:#5A6165; }

.chain{ padding:clamp(22px,3.2vw,40px); position:relative; }
.chain__field{ position:relative; margin-top:24px; padding-inline-start:20px; }
html[dir="rtl"] .chain__field{ padding-inline-start:0; padding-inline-end:20px; }
.chain__field::before{ content:""; position:absolute; inset-block:4px 34px; inset-inline-start:0; width:1px; background:var(--gold); opacity:.85; }
html[dir="rtl"] .chain__field::before{ inset-inline-start:auto; inset-inline-end:0; }
.chain__row{
  display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:baseline;
  background:rgba(251,247,239,.96); color:var(--petrol-deep);
  padding:11px clamp(13px,1.6vw,18px); margin-bottom:8px;
  filter:drop-shadow(0 12px 18px rgba(0,20,26,.075));
}
.chain__row b{ font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); }
html[dir="rtl"] .chain__row b{ letter-spacing:0; text-transform:none; font-size:.88rem; }
.chain__row p{ margin:0; color:#4C5357; font-size:.9rem; }
.chain__cap{
  margin:18px 0 0; padding:13px clamp(13px,1.6vw,18px);
  background:var(--gold); color:#241F0E; font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  filter:drop-shadow(0 12px 18px rgba(0,20,26,.09));
  clip-path:polygon(0 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px));  /* .g-corner */
}
html[dir="rtl"] .chain__cap{ letter-spacing:0; text-transform:none; font-size:.95rem; }

/* ---------- services ---------- */
.svc{ border-top:1px solid var(--rule-soft); }
.svc__item{ border-bottom:1px solid var(--rule-soft); }
.svc__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:start;
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,3vw,40px); align-items:center;
  padding:clamp(22px,3vw,34px) 0; transition:padding-inline .4s var(--ease), background .4s;
}
.svc__item:hover .svc__btn{ padding-inline-start:10px; }
.svc__item:hover .svc__x,.svc__item.is-open .svc__x{ opacity:1; }

.svc__n{ font-size:.78rem; font-weight:500; letter-spacing:.1em; color:var(--gold-ink); }
.svc__t{ font-family:var(--display); font-weight:300; font-size:clamp(1.25rem,3.1vw,2.15rem); letter-spacing:-.025em; line-height:1.1; color:var(--petrol-deep); }
html[dir="rtl"] .svc__t{ letter-spacing:0; line-height:1.4; }
.svc__x{ width:26px; height:26px; position:relative; flex:none; opacity:.75; transition:opacity .4s; }
.svc__x::before,.svc__x::after{ content:""; position:absolute; background:var(--petrol); transition:transform .45s var(--ease), opacity .3s; }
.svc__x::before{ inset-inline:0; top:50%; height:1px; }
.svc__x::after{ inset-block:0; inset-inline-start:50%; width:1px; margin-inline-start:-.5px; }
.svc__item.is-open .svc__x::after{ transform:scaleY(0); }
.svc__item.is-open .svc__x::before{ background:var(--gold); }
.svc__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); }
.svc__item.is-open .svc__body{ grid-template-rows:1fr; }
.svc__inner{ overflow:hidden; }
.svc__pad{ padding:0 0 clamp(26px,3.6vw,42px); display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(20px,3vw,48px); align-items:start; }
.svc__viz{ background:transparent; box-shadow:inset 0 0 0 1px var(--hair); padding:clamp(14px,1.8vw,24px); }
.svc__viz .viz{ width:100%; height:auto; display:block; }
html[dir="rtl"] .svc__viz .viz{ transform:scaleX(-1); }
.svc__copy p{ margin:0 0 18px; color:#454C50; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.chips li{
  font-size:.82rem; padding:8px 14px; background:var(--paper); color:var(--petrol-deep);
  box-shadow:0 1px 0 var(--paper-edge) inset, 0 8px 16px -14px rgba(1,50,62,.7);
  transition:transform .3s var(--ease), background .3s, color .3s;
}
.chips li:hover{ transform:translateY(-1px); background:var(--paper-edge); color:var(--petrol); box-shadow:0 1px 0 var(--paper-edge) inset, 0 0 0 1px var(--gold-hair); }

/* ---------- the Stellar Method ----------
   Six planes on one baseline. Each stage inherits the strata of the stages
   beneath it and stands a little taller, so by Legacy the structure is whole. */
.method{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,1vw,16px); align-items:end; }
.method__base{ position:absolute; inset-inline:0; inset-block-end:0; height:1px; background:var(--gold); opacity:.55; }
.stage{
  position:relative; background:var(--paper);
  padding:clamp(18px,2vw,26px) clamp(14px,1.5vw,20px) clamp(20px,2.2vw,28px);
  min-height:calc(244px + var(--n) * 13px);
  display:flex; flex-direction:column;
  filter:drop-shadow(0 15px 22px rgba(1,50,62,.075)) drop-shadow(0 1px 1px rgba(1,50,62,.04));
  clip-path:polygon(0 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px));   /* .g-corner */
  transition:transform .6s var(--ease);
}
html[dir="rtl"] .stage{ clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); }
.stage:hover{ transform:translateY(-2px); }
.stage.is-final{ background:var(--cream-deep); }
.stage.is-final::after{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px; background:var(--gold); }
.stage__strata{ display:flex; flex-direction:column; gap:2px; margin-bottom:clamp(14px,1.8vw,20px); }
.stage__s{ height:2px; background:rgba(0,84,103,.16); }
.stage__s.is-new{ background:var(--gold); }
.stage i{ font-style:normal; font-size:.68rem; letter-spacing:.14em; color:var(--gold-ink); font-weight:500; }
.stage b{
  font-family:var(--display); font-weight:400; font-size:1.02rem; letter-spacing:.02em;
  text-transform:uppercase; display:block; margin:10px 0 10px; color:var(--petrol-deep);
}
html[dir="rtl"] .stage b{ letter-spacing:0; text-transform:none; font-weight:500; font-size:1.06rem; }
.stage p{ margin:0; font-size:.84rem; line-height:1.6; color:#4C5357; }
html[dir="rtl"] .stage p{ font-size:.9rem; line-height:1.85; }

/* ---------- work ---------- */
.sec--intro{ padding-block:calc(var(--section) + 40px) clamp(30px,4vw,54px); }
.sec--intro .sec__head{ margin-bottom:0; }
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(26px,4vw,44px); }
.filters button{
  background:none; border:0; cursor:pointer; padding:9px 16px; font-size:.8rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--graphite);
  box-shadow:inset 0 0 0 1px var(--rule); transition:box-shadow .3s var(--ease), background .3s var(--ease), color .3s;
}
html[dir="rtl"] .filters button{ letter-spacing:0; text-transform:none; font-size:.95rem; }
.filters button:hover{ box-shadow:inset 0 0 0 1px var(--petrol); }
.filters button[aria-pressed="true"]{ background:var(--petrol); color:var(--paper-edge); box-shadow:none; }

.cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,34px); }
/* a single published engagement reads across the page, like a dossier spread */
.cases.is-single{ grid-template-columns:1fr; }
.cases.is-single .case__body{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(24px,4vw,64px); padding:clamp(28px,3.4vw,48px);
}
.cases.is-single .case__fields{ margin:0; }
.cases.is-single .case__head h3{ margin-top:14px; max-width:22ch; }
@media (max-width:900px){ .cases.is-single .case__body{ grid-template-columns:1fr; gap:20px; } }
.case__img{ aspect-ratio:4/3; background:var(--cream-deep); overflow:hidden; }
.case__img img{ width:100%; height:100%; object-fit:cover; }
.case__body{ padding:22px clamp(18px,2vw,26px) 28px; }
.case__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); font-weight:500; }
html[dir="rtl"] .case__meta{ letter-spacing:0; text-transform:none; font-size:.85rem; }
.case__body h3{ margin:12px 0 8px; }
.case__head .case__meta{ gap:6px 16px; }
.case__fields{ margin:16px 0 0; padding:0; list-style:none; }
.case__fields li{ display:grid; grid-template-columns:118px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--rule-soft); font-size:.88rem; }
.case__fields b{ font-weight:500; color:var(--gold-ink); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding-top:2px; }
html[dir="rtl"] .case__fields b{ letter-spacing:0; text-transform:none; font-size:.84rem; }
.case__fields span{ color:#5C6367; }

/* a grid of cut planes — used for the discipline index and the principles */
.planes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); }
.planes__i{
  padding:clamp(24px,2.6vw,34px) clamp(20px,2vw,28px);
  transition:transform .5s var(--ease);
}
.planes__i::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:26px; height:1px; background:var(--gold); opacity:.85; }
.planes__i:hover{ transform:translateY(-2px); }
.planes__i b{ display:block; font-family:var(--display); font-weight:500; font-size:1.06rem; letter-spacing:-.01em; color:var(--petrol-deep); margin-bottom:9px; }
html[dir="rtl"] .planes__i b{ letter-spacing:0; }
.planes__i p{ margin:0; font-size:.89rem; color:#4C5357; }


/* what each case records */
.anatomy{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(26px,4vw,60px); align-items:start; }
.record{ list-style:none; margin:0; padding:0; }
.record li{ display:grid; grid-template-columns:150px 1fr; gap:clamp(14px,2vw,26px); padding:16px 0; border-top:1px solid var(--rule-soft); }
.record li:last-child{ border-bottom:1px solid var(--rule-soft); }
.record b{ font-size:.74rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); padding-top:3px; }
html[dir="rtl"] .record b{ letter-spacing:0; text-transform:none; font-size:.88rem; }
.record span{ color:#454C50; font-size:.95rem; }

.policy{ padding:clamp(32px,4.6vw,64px); }
.policy p{ color:rgba(251,247,239,.82); max-width:56ch; margin:18px 0 28px; }

.disclaimer{ margin:clamp(20px,2.4vw,28px) 0 0; font-size:.78rem; line-height:1.7; color:#6A7175; max-width:62ch; }
html[dir="rtl"] .disclaimer{ font-size:.85rem; }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,72px); align-items:start; }
.channels{ list-style:none; margin:30px 0 0; padding:0; }
.channels li{ padding:16px 0; border-top:1px solid var(--rule-soft); }
.channels b{ display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-ink); font-weight:500; margin-bottom:5px; }
html[dir="rtl"] .channels b{ letter-spacing:0; text-transform:none; font-size:.85rem; }
.channels a,.channels span{ font-size:1.06rem; font-weight:400; color:var(--graphite); }
.channels .channels__addr{ display:block; font-size:.95rem; line-height:1.75; color:#4C5357; }
html[dir="rtl"] .channels .channels__addr{ font-size:.98rem; line-height:1.95; }
.channels a{ transition:color .3s; } .channels a:hover{ color:var(--gold); }
.form{ padding:clamp(26px,3.4vw,46px); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label em{ font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; color:#8A9195; margin-inline-start:6px; font-size:.9em; }
.field label{ font-size:.72rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--graphite); }
html[dir="rtl"] .field label{ letter-spacing:0; text-transform:none; font-size:.88rem; }
.field input,.field select,.field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--rule); padding:11px 2px;
  transition:border-color .3s, background .3s; border-radius:0; width:100%;
}
.field textarea{ min-height:104px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--petrol); }
.field.err input,.field.err select,.field.err textarea{ border-color:#A6412F; }
.field .msg{ font-size:.76rem; color:#A6412F; min-height:0; }
.form__foot{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:10px; }
.form__note{ font-size:.8rem; color:#6A7175; }
.sent{ padding:18px 20px; background:rgba(0,84,103,.07); border-inline-start:2px solid var(--petrol); font-size:.95rem; margin-bottom:20px; }

/* ---------- 404 ---------- */
.notfound{ padding-block:clamp(140px,20vh,240px) var(--section); text-align:center; }
.notfound__logo{ width:clamp(112px,10vw,146px); height:auto; object-fit:contain; margin:0 auto clamp(34px,5vh,52px); }
.notfound .h2{ margin-bottom:22px; }
.notfound .lede{ margin-inline:auto; }

/* ---------- closing + footer ---------- */
/* social marks: small, muted gold, no chips, no colour logos */
.social{ display:flex; align-items:center; gap:clamp(14px,1.6vw,20px); margin-bottom:16px; }
.social a{ display:inline-flex; color:var(--gold-ink); transition:color .35s var(--ease), transform .35s var(--ease); }
.social a svg{ width:19px; height:19px; display:block; }
.social a:hover{ color:var(--petrol); transform:translateY(-1px); }
.social a:focus-visible{ outline:2px solid var(--gold); outline-offset:5px; }
.social__handle{ margin:0 0 14px; font-size:.92rem; color:var(--petrol-deep); letter-spacing:.02em; }
.social__wa{
  display:inline-flex; align-items:center; gap:9px; color:var(--petrol-deep);
  font-size:.95rem; transition:color .35s var(--ease);
}
.social__wa svg{ width:18px; height:18px; color:var(--gold-ink); flex:none; transition:color .35s var(--ease); }
.social__wa:hover{ color:var(--petrol); } .social__wa:hover svg{ color:var(--petrol); }
.ftr__addr{ margin:14px 0 0; font-style:normal; font-size:.84rem; line-height:1.72; color:#5F666A; max-width:34ch; }
html[dir="rtl"] .ftr__addr{ font-size:.88rem; line-height:1.9; }
.social__site{ margin:14px 0 0; font-size:.9rem; }
.social__site a{ color:var(--graphite); transition:color .3s; }
.social__site a:hover{ color:var(--petrol); }
.ftr__logo{ width:82px; height:auto; object-fit:contain; margin-bottom:20px; }
.closing img{ width:clamp(112px,10vw,146px); height:auto; object-fit:contain; }
.closing{ padding-block:clamp(80px,12vw,150px); text-align:center; }
.closing img{ width:clamp(96px,11vw,132px); margin:0 auto clamp(26px,4vw,40px); }
.closing .h2{ color:var(--petrol-deep); }
.closing .ar-final{ font-family:var(--arabic-editorial); direction:rtl; text-align:center; font-size:clamp(1.1rem,2.4vw,1.6rem); color:var(--graphite); margin-top:20px; font-weight:400; }
.ftr{ padding-block:44px 34px; border-top:1px solid var(--rule-soft); }
.ftr__in{ display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start; }
.ftr__col h4{ margin:0 0 14px; font-size:.72rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-ink); }
html[dir="rtl"] .ftr__col h4{ letter-spacing:0; text-transform:none; font-size:.85rem; }
.ftr__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ftr__col a{ font-size:.92rem; color:var(--graphite); transition:color .3s; }
.ftr__col a:hover{ color:var(--petrol); }
.ftr__base{ margin-top:34px; padding-top:20px; border-top:1px solid var(--rule-soft); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.8rem; color:#6A7175; }

/* WhatsApp — a small petrol chip with a gold cut edge.
   Hidden over the hero, revealed once the visitor starts reading,
   and only widened on hover or focus. */
.wa{
  position:fixed; z-index:50;
  inset-block-end:max(16px, env(safe-area-inset-bottom));
  inset-inline-end:max(16px, env(safe-area-inset-right));
  display:inline-flex; align-items:center; gap:0;
  height:42px; padding-inline:11px; overflow:hidden;
  background:var(--petrol); color:var(--paper-edge);
  font-size:.72rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  box-shadow:0 14px 26px -20px rgba(1,50,62,.8);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), gap .35s var(--ease),
             padding-inline .35s var(--ease), background .3s, visibility .45s;
}
html[dir="rtl"] .wa{ letter-spacing:0; text-transform:none; font-size:.85rem; }
.wa::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px; background:var(--gold); }
.wa svg{ width:19px; height:19px; flex:none; }
.wa span{ max-width:0; opacity:0; white-space:nowrap; transition:max-width .4s var(--ease), opacity .3s; }
.wa.is-on{ opacity:1; visibility:visible; transform:none; }
.wa:hover,.wa:focus-visible{ background:var(--petrol-deep); gap:9px; padding-inline:14px 16px; }
.wa:hover span,.wa:focus-visible span{ max-width:130px; opacity:1; }
@media (hover:none){ .wa{ height:44px; } }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(13px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.06s !important; }
}

/* ---------- mobile typography ----------
   Shorter measures, tighter rhythm, serif kept for statements only. */
@media (max-width:760px){
  :root{ --section: clamp(52px,10vw,76px); }
  body{ font-size:15px; line-height:1.58; }
  html[dir="rtl"] body{ line-height:1.8; }
  .lede{ font-size:1.06rem; line-height:1.5; max-width:30ch; }
  html[dir="rtl"] .lede{ font-size:1.04rem; line-height:1.75; max-width:34ch; }
  .body{ font-size:.94rem; max-width:44ch; }
  html[dir="rtl"] .body{ font-size:.96rem; max-width:40ch; }
  .display{ font-size:clamp(2.3rem,10vw,3.1rem); }
  html[dir="rtl"] .display{ font-size:clamp(1.85rem,7.6vw,2.5rem); line-height:1.34; }
  .h2{ font-size:clamp(1.72rem,7vw,2.2rem); }
  html[dir="rtl"] .h2{ font-size:clamp(1.45rem,5.8vw,1.9rem); }
  .h3{ font-size:1.14rem; }
  .sec__head{ margin-bottom:clamp(24px,6vw,34px); }
  .sec__head .lede{ margin-top:16px; }
  .order{ gap:8px 18px; padding-block:16px; margin-bottom:26px; }
  .order span{ font-size:.82rem; }
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:block; }
  .filing{ grid-template-columns:1fr; gap:clamp(18px,3vw,26px); }
  .tabs{ gap:7px; }
  .panel{ margin-inline-start:0; margin-block-start:0; padding-inline-start:clamp(20px,4vw,30px); }
  .tabs__b{ width:calc(100% - var(--w)); }
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .stack{ width:100%; max-width:520px; }
  .filing,.split,.contact,.anatomy{ grid-template-columns:1fr; }
  .planes{ grid-template-columns:repeat(2,1fr); }
  .method{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
  .stage{ min-height:0; }
  .svc__pad{ grid-template-columns:1fr; gap:20px; }
  .svc__viz{ padding:10px; }
  .svc__viz .viz{ max-height:150px; }
}
@media (max-width:760px){
  .cases{ grid-template-columns:1fr; }
  .planes{ grid-template-columns:1fr; }
  .record li{ grid-template-columns:1fr; gap:4px; }
  .grid2{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding-block:130px 70px; }
  .stack__l b{ font-size:.72rem; }
  .case__fields li{ grid-template-columns:1fr; gap:3px; }
  .ftr__in{ gap:30px; }
  .btn{ padding:15px 22px; font-size:.8rem; }
}
@media (max-width:480px){
  .method{ grid-template-columns:1fr; gap:10px; }
  .stage{ min-height:0; margin-inline-start:calc(var(--n,0) * 7px); }
  .method__base{ inset-inline:0 auto; inset-block:0; width:1px; height:auto; }
  html[dir="rtl"] .method__base{ inset-inline:auto 0; }
  .brand__txt{ display:none; }
}