@charset "UTF-8";
/* =========================================================================
   Elite HR — powered by MENA BIG
   Palette sampled from the brand mark. Structural motif: the 45° slice
   cut into the logo letterforms, repeated in buttons, cards and markers.
   ------------------------------------------------------------------------
   1. Tokens          5. Header & navigation    9. Contact & forms
   2. Reset & base    6. Hero                  10. Footer
   3. Layout          7. Home sections         11. Motion
   4. Components      8. Services              12. Responsive
   ========================================================================= */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- brand surfaces --- */
  --navy-900:#061625;
  --navy-800:#081B2F;
  --navy-700:#0D2845;
  --navy-600:#12314F;
  --navy-500:#1A3A5C;
  --navy-line:#1D3F63;

  --cream-50:#FBF8F4;
  --cream-100:#F4EDE5;
  --cream-200:#EDE3D8;
  --cream-300:#E2D5C6;
  --cream-line:#D9CBBA;

  --gold-700:#8A6524;
  --gold-600:#9B7230;
  --gold-500:#AC7F38;
  --gold-400:#C4933F;
  --gold-300:#CD9E4C;
  --gold-200:#E2BE7E;

  /* --- text --- */
  --ink:#0D2845;
  --ink-mid:#42556A;
  --ink-soft:#6B7C8D;
  --on-navy:#F4EDE5;
  --on-navy-mid:#AFC0D0;
  --on-navy-soft:#8195A9;

  /* --- measure & rhythm --- */
  --wrap:1200px;
  --wrap-narrow:820px;
  --gut:clamp(1.25rem, 4vw, 3rem);
  --header-h:78px;

  --space-1:.5rem;
  --space-2:.75rem;
  --space-3:1rem;
  --space-4:1.5rem;
  --space-5:2rem;
  --space-6:clamp(2.25rem, 4vw, 3rem);
  --space-7:clamp(3rem, 6vw, 4.5rem);
  --band-y:clamp(3.75rem, 8vw, 7rem);
  --band-y-tight:clamp(2.75rem, 5vw, 4.5rem);

  /* --- fluid type scale --- */
  --step--2:clamp(.72rem, .70rem + .10vw, .78rem);
  --step--1:clamp(.84rem, .81rem + .13vw, .92rem);
  --step-0:clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:clamp(1.18rem, 1.10rem + .36vw, 1.4rem);
  --step-2:clamp(1.42rem, 1.26rem + .72vw, 1.9rem);
  --step-3:clamp(1.75rem, 1.44rem + 1.35vw, 2.65rem);
  --step-4:clamp(2.2rem, 1.58rem + 2.7vw, 4.05rem);

  /* --- motion --- */
  --ease:cubic-bezier(.22,.71,.31,1);
  --t-fast:.16s;
  --t-med:.28s;
  --t-slow:.55s;

  /* --- elevation (restrained; this design leans on hairlines) --- */
  --lift-1:0 1px 2px rgba(13,40,69,.05), 0 6px 18px rgba(13,40,69,.06);
  --lift-2:0 2px 4px rgba(13,40,69,.06), 0 14px 34px rgba(13,40,69,.10);
  --lift-navy:0 18px 40px rgba(3,12,22,.34);

  /* --- the 45° slice, one source of truth --- */
  --slice-sm:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  --slice-md:polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  --slice-lg:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;                 /* clip, not hidden — keeps position:sticky alive */
  scroll-padding-top:var(--header-h);   /* anchors clear the sticky masthead */
}

body{
  margin:0;
  background:var(--cream-100);
  color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;display:block;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}

h1,h2,h3,h4,h5{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 114;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--step-4);font-weight:700;letter-spacing:-.028em}
h2{font-size:var(--step-3);letter-spacing:-.022em}
h3{font-size:var(--step-1);font-variation-settings:"wdth" 108}
h4{font-size:var(--step-0);font-variation-settings:"wdth" 106}

p{margin:0 0 1em;max-width:70ch;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:600}

/* Focus: one visible, consistent ring everywhere. */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--gold-300);
  outline-offset:3px;
  border-radius:1px;
}
.band--navy :focus-visible,
.band--deep :focus-visible,
.masthead :focus-visible,
.hero :focus-visible,
.foot :focus-visible,
.phero :focus-visible{outline-color:var(--gold-200)}

/* The router parks focus on the heading or section it just routed to, so a
   screen reader announces the new view. Those targets are not controls, so
   they take the focus without drawing a ring around a block of text. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}

::selection{background:var(--gold-300);color:var(--navy-800)}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip{
  position:fixed;inset-inline-start:1rem;top:-120px;z-index:400;
  background:var(--gold-500);color:#fff;
  font-family:"Archivo",sans-serif;font-weight:600;font-size:var(--step--1);
  padding:.9rem 1.4rem;text-decoration:none;
  clip-path:var(--slice-sm);
  transition:top var(--t-med) var(--ease);
}
/* Any focus reveals it, including the programmatic focus that "back to top"
   hands over — :focus-visible alone would leave it focused but off-screen. */
.skip:focus,.skip:focus-visible{top:1rem}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:var(--wrap-narrow)}

.band{padding-block:var(--band-y);position:relative}
.band--tight{padding-block:var(--band-y-tight)}
.band--navy{background:var(--navy-700);color:var(--on-navy)}
.band--deep{background:var(--navy-800);color:var(--on-navy)}
.band--warm{background:var(--cream-200)}
.band--navy p,.band--deep p{color:var(--on-navy-mid)}

/* Hairline seam between two cream bands, so sections read as distinct. */
.band--seam{border-top:1px solid var(--cream-line)}

/* --- router views --- */
.view{display:none}
.view.is-active{display:block;animation:view-in .4s var(--ease) both}

/* --- section headers: one repeating pattern (eyebrow -> rule -> h2 -> lede) --- */
.shead{margin-bottom:clamp(2rem, 4vw, 3.25rem);max-width:64ch}
.shead--wide{max-width:none}
.eyebrow{
  display:flex;align-items:center;gap:.65rem;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 104;
  font-weight:600;font-size:var(--step--2);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-600);margin:0 0 .9rem;
}
.eyebrow::before{
  content:"";width:22px;height:9px;flex:none;background:var(--gold-500);
  clip-path:polygon(0 0,100% 0,100% 55%,55% 100%,0 100%);
}
.band--navy .eyebrow,.band--deep .eyebrow,.hero .eyebrow,.phero .eyebrow{color:var(--gold-200)}
.band--navy .eyebrow::before,.band--deep .eyebrow::before,
.hero .eyebrow::before,.phero .eyebrow::before{background:var(--gold-300)}

.lede{
  font-size:var(--step-1);line-height:1.55;font-weight:300;
  color:var(--ink-mid);max-width:62ch;
}
.band--navy .lede,.band--deep .lede,.hero .lede,.phero .lede{color:var(--on-navy-mid)}

.rule-gold{width:56px;height:3px;background:var(--gold-500);border:0;margin:0 0 1.5rem}
.gap-lg{margin-bottom:clamp(2rem,5vw,3.5rem)}
.gap-md{margin-bottom:2.25rem}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- buttons ------------------------------------------------------------ */
.btn{
  --btn-bg:var(--gold-500);
  --btn-bg-hover:var(--gold-400);
  --btn-fg:#FFFBF5;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;                      /* comfortable touch target */
  padding:.85rem 1.7rem;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 104;
  font-weight:600;font-size:var(--step--1);letter-spacing:.015em;
  text-align:center;text-decoration:none;white-space:nowrap;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1.5px solid transparent;cursor:pointer;
  clip-path:var(--slice-sm);
  transition:background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.btn:hover{background:var(--btn-bg-hover)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:progress;pointer-events:none}
.btn__arrow{
  flex:none;width:.85em;height:.85em;
  transition:transform var(--t-med) var(--ease);
}
.btn:hover .btn__arrow{transform:translateX(3px)}

.btn--ghost{
  --btn-bg:transparent;--btn-bg-hover:var(--navy-600);--btn-fg:var(--on-navy);
  border-color:rgba(244,237,229,.3);
}
.btn--ghost:hover{border-color:var(--gold-300)}
.btn--outline{
  --btn-bg:transparent;--btn-bg-hover:var(--gold-500);--btn-fg:var(--ink);
  border-color:var(--ink);
}
.btn--outline:hover{color:#FFFBF5;border-color:var(--gold-500)}
.btn--sm{min-height:42px;padding:.6rem 1.15rem}
.btn--block{display:flex;width:100%}

/* --- text links with the slice arrow ------------------------------------ */
.tlink{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 104;
  font-weight:600;font-size:var(--step--1);
  color:var(--gold-600);text-decoration:none;
  padding-bottom:2px;
  background-image:linear-gradient(var(--gold-500),var(--gold-500));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--t-med) var(--ease),color var(--t-fast) var(--ease);
}
.tlink:hover{background-size:100% 1.5px}
.tlink__arrow{width:.8em;height:.8em;flex:none;transition:transform var(--t-med) var(--ease)}
.tlink:hover .tlink__arrow{transform:translateX(3px)}
.band--navy .tlink,.band--deep .tlink,.foot .tlink{color:var(--gold-200)}
.band--navy .tlink,.band--deep .tlink{background-image:linear-gradient(var(--gold-300),var(--gold-300))}

/* --- the slice marker, used in lists and tables ------------------------- */
.mark{
  display:inline-block;width:15px;height:15px;background:var(--gold-500);
  clip-path:polygon(0 0,100% 0,100% 65%,65% 100%,0 100%);
}
.mark--no{width:16px;height:2px;background:var(--cream-line);clip-path:none;vertical-align:middle}

/* --- tick list ---------------------------------------------------------- */
.ticks li{
  position:relative;padding:.5rem 0;padding-inline-start:1.45rem;
  font-size:var(--step--1);color:var(--ink-mid);line-height:1.55;
}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:1rem;width:8px;height:8px;
  background:var(--gold-500);
  clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%);
}

/* --- cards -------------------------------------------------------------- */
.card{
  background:var(--cream-50);
  padding:1.9rem 1.7rem 2rem;
  display:flex;flex-direction:column;gap:.7rem;
  clip-path:var(--slice-md);
  transition:transform var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease),
             background var(--t-med) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--lift-1);background:#fff}
.card h4,.card h3{color:var(--ink)}
.card p{color:var(--ink-mid);font-size:var(--step--1);line-height:1.65;margin:0;flex:1}
.card .tlink{align-self:flex-start;margin-top:.35rem}
.card__num{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112;font-weight:700;
  font-size:var(--step--1);letter-spacing:.08em;color:var(--gold-500);
}

/* Hairline grid: a 1px gap over a rule colour reads as drawn lines. */
.grid-rule{display:grid;gap:1px;background:var(--cream-line)}
.grid-1{grid-template-columns:minmax(0,1fr)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* A lone card spans the full width, which would leave a single paragraph
   stranded against a lot of empty space. At desktop it splits: label and
   heading left, copy and link right — the same relationship the service
   section heads use. Below that it falls back to the normal stacked card. */
@media (min-width:941px){
  .grid-1 .card{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(2rem,4vw,3.5rem);
    row-gap:.35rem;
    align-items:start;
  }
  .grid-1 .card .card__num{grid-column:1;grid-row:1}
  .grid-1 .card h4{grid-column:1;grid-row:2}
  .grid-1 .card p:not(.card__num){grid-column:2;grid-row:1/3;max-width:none;margin:0}
  .grid-1 .card .tlink{grid-column:2;grid-row:3;align-self:start;margin-top:1.1rem}
}

/* --- matrices ----------------------------------------------------------- */
.matrix-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.matrix{width:100%;border-collapse:collapse}
.matrix th,.matrix td{
  text-align:start;padding:1rem 1.15rem;
  border-bottom:1px solid var(--cream-line);
  font-size:var(--step--1);
}
.matrix thead th{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106;font-weight:600;
  border-bottom:2px solid var(--ink);vertical-align:bottom;color:var(--ink);
}
.matrix tbody th{
  font-weight:600;font-family:"IBM Plex Sans",sans-serif;color:var(--ink);width:28%;
}
.matrix tbody tr{transition:background var(--t-fast) var(--ease)}
.matrix tbody tr:hover{background:var(--cream-50)}
.matrix td{color:var(--ink-mid)}
.matrix--center td,.matrix--center thead th:not(:first-child){text-align:center}
.matrix--center td{width:24%}

/* A qualified answer where the other cells carry a yes/no marker. */
.cell-note{
  display:inline-block;font-size:var(--step--2);line-height:1.35;
  color:var(--ink-mid);font-style:italic;
}

/* --- tags --------------------------------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:.6rem}
.tags li{
  border:1px solid var(--cream-line);background:var(--cream-50);
  padding:.6rem 1.05rem;font-size:var(--step--1);color:var(--ink-mid);
  transition:border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.tags li:hover{border-color:var(--gold-500);color:var(--ink);background:#fff}

/* Lead sectors: the three we actually lead in, carried by weight and the
   gold edge rather than by size, so the "also" row still reads as a peer. */
.tags--lead{margin-bottom:1.75rem}
.tags--lead li{
  position:relative;
  padding:.8rem 1.25rem;padding-inline-start:2.1rem;
  background:var(--navy-700);border-color:var(--navy-700);
  color:var(--on-navy);font-weight:600;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106;
  font-size:var(--step-0);
}
.tags--lead li::before{
  content:"";position:absolute;inset-inline-start:1.1rem;top:50%;margin-top:-5px;
  width:10px;height:10px;background:var(--gold-300);
  clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%);
}
.tags--lead li:hover{background:var(--navy-600);border-color:var(--gold-500);color:#fff}
.band--warm .tags--lead li,.band--navy .tags--lead li{border-color:var(--navy-700)}

.tags__also{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 104;
  font-weight:600;font-size:var(--step--2);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 .85rem;
}

.tbc{color:var(--ink-soft);font-style:italic}
.side-card .tbc,.foot .tbc{color:var(--on-navy-soft)}

/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */
.masthead{
  position:sticky;top:0;z-index:120;
  background:var(--navy-700);
  border-bottom:1px solid var(--navy-line);
  transition:background var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
.masthead.is-stuck{
  background:rgba(8,27,47,.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 10px 30px rgba(3,12,22,.28);
}
.masthead__in{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h)}

.brand{display:block;flex:none;margin-inline-end:auto;padding-block:.5rem}
.brand img{height:42px;width:auto;transition:opacity var(--t-fast) var(--ease)}
.brand:hover img{opacity:.85}

.nav{display:flex;align-items:center;gap:.35rem}
.nav__link{
  position:relative;
  display:inline-flex;align-items:center;min-height:44px;
  padding:.4rem .85rem;
  color:var(--on-navy);text-decoration:none;
  font-size:var(--step--1);font-weight:500;
  transition:color var(--t-fast) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;inset-inline:.85rem;bottom:.35rem;height:2px;
  background:var(--gold-300);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-med) var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:#fff}

.nav__lang{
  display:inline-flex;align-items:center;min-height:44px;padding:.4rem .85rem;
  color:var(--on-navy-soft);text-decoration:none;font-size:var(--step--1);letter-spacing:.03em;
  transition:color var(--t-fast) var(--ease);
}
.nav__lang:hover{color:var(--on-navy)}
.nav .btn{margin-inline-start:.75rem}

.burger{
  display:none;
  align-items:center;justify-content:center;gap:.55rem;
  min-height:44px;min-width:44px;padding:.5rem .9rem;
  background:transparent;border:1px solid rgba(244,237,229,.3);color:var(--on-navy);
  font-family:"Archivo",sans-serif;font-size:var(--step--2);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.burger:hover{border-color:var(--gold-300);background:var(--navy-600)}
.burger__bars{position:relative;width:18px;height:12px;flex:none}
.burger__bars span{
  position:absolute;inset-inline-start:0;width:100%;height:2px;background:currentColor;
  transition:transform var(--t-med) var(--ease),opacity var(--t-fast) var(--ease);
}
.burger__bars span:nth-child(1){top:0}
.burger__bars span:nth-child(2){top:5px}
.burger__bars span:nth-child(3){top:10px}
.burger[aria-expanded="true"] .burger__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.nav__scrim{
  position:fixed;inset:0;z-index:110;
  background:rgba(6,22,37,.6);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-med) var(--ease),visibility var(--t-med);
}
.nav__scrim.is-shown{opacity:1;visibility:visible}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--navy-700);color:var(--on-navy);
  padding-block:clamp(3.5rem,9vw,7rem) 0;
}
/* Layered geometry: the logo's 45° cut, scaled up as architecture. */
.hero__figure{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__figure::before{
  content:"";position:absolute;inset-inline-end:-8%;top:-15%;width:52%;height:140%;
  background:var(--navy-600);
  clip-path:polygon(40% 0,100% 0,60% 100%,0 100%);
  opacity:.6;
}
.hero__figure::after{
  content:"";position:absolute;inset-inline-end:4%;top:-15%;width:26%;height:140%;
  background:linear-gradient(180deg,rgba(205,158,76,.22),rgba(205,158,76,0));
  clip-path:polygon(44% 0,100% 0,56% 100%,0 100%);
}
.hero__glow{
  position:absolute;inset-inline-start:-10%;bottom:-40%;width:55%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(29,63,99,.55),transparent 68%);
  pointer-events:none;
}
.hero__in{position:relative;z-index:1}
.hero h1{max-width:16ch}
.hero h1 .cut{
  color:var(--gold-300);
  display:inline-block;
}
.hero__lede{margin-top:1.6rem;max-width:56ch;font-size:var(--step-1)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}

.scope{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--navy-line);
}
.scope>div{
  padding-block:1.6rem 1.9rem;padding-inline:0 1.5rem;
  border-inline-end:1px solid var(--navy-line);
}
.scope>div:last-child{border-inline-end:0}
.scope>div+div{padding-inline-start:1.5rem}
.scope dt{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108;font-weight:600;
  font-size:var(--step-0);color:#fff;margin-bottom:.35rem;
}
.scope dd{margin:0;color:var(--on-navy-mid);font-size:var(--step--1);line-height:1.55}

/* --- inner-page hero ---------------------------------------------------- */
.phero{
  position:relative;overflow:hidden;
  background:var(--navy-700);color:var(--on-navy);
  padding-block:clamp(2.75rem,6vw,4.75rem);
}
.phero::after{
  content:"";position:absolute;inset-inline-end:-6%;top:-25%;width:40%;height:150%;
  background:var(--navy-600);clip-path:polygon(42% 0,100% 0,58% 100%,0 100%);
  opacity:.55;pointer-events:none;
}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:var(--step-3);max-width:20ch}
.phero p{margin-top:1.15rem;max-width:60ch;color:var(--on-navy-mid)}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:var(--step--1);color:var(--on-navy-soft);margin:0 0 1.15rem;
}
.crumbs a{
  color:var(--on-navy-mid);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.crumbs a:hover{color:#fff;border-color:var(--gold-300)}
.crumbs span[aria-hidden]{color:var(--on-navy-soft);opacity:.7}

/* ==========================================================================
   7. HOME SECTIONS
   ========================================================================== */
.split{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);align-items:start;
}
.facts{border-top:2px solid var(--ink);position:sticky;top:calc(var(--header-h) + 2rem)}
.facts div{
  display:grid;grid-template-columns:1fr auto;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--cream-line);
  font-size:var(--step--1);
}
.facts dt{color:var(--ink-soft)}
.facts dd{margin:0;font-weight:600;text-align:end;color:var(--ink)}

/* --- service clusters --------------------------------------------------- */
.cluster+.cluster{margin-top:clamp(2.75rem,5vw,4.25rem)}
.cluster__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.25rem;flex-wrap:wrap;
  padding-bottom:.9rem;margin-bottom:1.75rem;border-bottom:2px solid var(--ink);
}
.cluster__head h3{font-size:var(--step-2);font-variation-settings:"wdth" 112}
.cluster__where{font-size:var(--step--1);color:var(--ink-soft)}

/* --- group panel & stats ------------------------------------------------ */
.group-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,6vw,4.5rem);align-items:center;
}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--navy-line)}
.stat{
  background:var(--navy-700);padding:1.7rem 1.5rem;
  transition:background var(--t-med) var(--ease);
}
.stat:hover{background:var(--navy-600)}
.stat b{
  display:block;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112;
  font-weight:700;font-size:clamp(1.95rem,4vw,2.8rem);line-height:1;
  color:var(--gold-300);letter-spacing:-.025em;
}
.stat span{display:block;margin-top:.55rem;font-size:var(--step--1);color:var(--on-navy-mid);line-height:1.45}

/* --- process steps ------------------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--cream-line)}
.steps--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps--three .step{background:var(--cream-50)}
.steps--three .step:hover{background:#fff}
.step{
  background:var(--cream-100);padding:1.9rem 1.6rem 2rem;position:relative;
  transition:background var(--t-med) var(--ease);
}
.step:hover{background:var(--cream-50)}
.step b{
  display:flex;align-items:center;gap:.7rem;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112;font-weight:700;
  font-size:var(--step-2);color:var(--gold-500);line-height:1;margin-bottom:.85rem;
}
.step b::after{content:"";flex:1;height:1px;background:var(--cream-line)}
.step h4{margin-bottom:.4rem}
.step p{font-size:var(--step--1);color:var(--ink-mid);margin:0;line-height:1.6}

/* --- compliance dual panel ---------------------------------------------- */
.dual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--navy-line);margin-top:2.5rem}
.dual>section{background:var(--navy-700);padding:2rem 1.8rem 2.2rem}
.dual h3{font-size:var(--step-1);margin-bottom:.35rem;color:#fff}
.dual .where{
  display:block;font-family:"IBM Plex Sans",sans-serif;
  font-size:var(--step--1);color:var(--gold-200);margin-bottom:1.25rem;
}
.dual li{
  position:relative;padding:.75rem 0;padding-inline-start:1.45rem;
  border-bottom:1px solid var(--navy-line);
  font-size:var(--step--1);color:var(--on-navy-mid);line-height:1.55;
}
.dual li:last-child{border-bottom:0}
.dual li::before{
  content:"";position:absolute;inset-inline-start:0;top:1.2rem;width:8px;height:8px;background:var(--gold-500);
  clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%);
}
.dual li strong{color:#fff;font-weight:600}

/* One panel left in the row: it spans the full width, and the list splits
   into two columns so the space is used rather than left trailing. */
.dual--single{grid-template-columns:minmax(0,1fr)}
.dual--single ul{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,3.5rem);
}
.dual--single li:nth-last-child(-n+2){border-bottom:0}

/* --- closing CTA -------------------------------------------------------- */
.cta-flex{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.75rem,5vw,4rem);flex-wrap:wrap;
}
.cta-flex h2{max-width:19ch}
.cta-flex p{margin:1rem 0 0}
.cta-flex .btn{flex:none}

/* ==========================================================================
   8. SERVICES
   ========================================================================== */
.jump{
  position:sticky;top:var(--header-h);z-index:80;
  background:var(--cream-200);
  border-bottom:1px solid var(--cream-line);
}
.jump__in{
  display:flex;gap:.25rem;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.jump__in::-webkit-scrollbar{display:none}
.jump a{
  position:relative;display:inline-flex;align-items:center;
  min-height:48px;padding:.65rem .9rem;white-space:nowrap;
  text-decoration:none;font-size:var(--step--1);font-weight:500;color:var(--ink-mid);
  transition:color var(--t-fast) var(--ease);
}
.jump a::after{
  content:"";position:absolute;inset-inline:.9rem;bottom:0;height:2px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-med) var(--ease);
}
.jump a:hover{color:var(--ink)}
.jump a:hover::after,.jump a.is-active::after{transform:scaleX(1)}
.jump a.is-active{color:var(--ink);font-weight:600}

.svc-block{
  padding-block:clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--cream-line);
  /* html's scroll-padding already clears the masthead; this clears the
     sticky jump bar that sits under it. */
  scroll-margin-top:60px;
}
.svc-block--last{border-bottom:0}
.svc-block__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:start;
}
.svc-block h2{font-size:var(--step-2)}
.svc-block__where{
  display:inline-block;margin-top:1rem;
  font-size:var(--step--2);letter-spacing:.06em;text-transform:uppercase;
  font-family:"Archivo",sans-serif;font-weight:600;
  color:var(--gold-600);border:1px solid rgba(172,127,56,.4);
  padding:.4rem .75rem;
}
.detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--cream-line);margin-top:2.5rem}
.detail>div{background:var(--cream-50);padding:1.7rem 1.6rem 1.9rem}
.detail h3{
  font-size:var(--step--1);font-variation-settings:"wdth" 104;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600);
  margin-bottom:.9rem;
}
.detail p{font-size:var(--step--1);color:var(--ink-mid);margin:0 0 .85rem;line-height:1.65}
.svc-cta{margin-top:2rem}

/* Sub-heading for blocks that sit between the section head and the detail
   grid — "How it runs", "Structures we set up". */
.sub-head{
  font-size:var(--step-1);font-variation-settings:"wdth" 110;
  margin:clamp(2rem,4vw,2.75rem) 0 1.15rem;
  padding-bottom:.65rem;border-bottom:2px solid var(--ink);
}

/* A terms note that belongs with a list but is not part of it. */
.note-inline{
  margin:1.15rem 0 0;padding:.85rem 1rem;
  font-size:var(--step--2);line-height:1.55;color:var(--ink-mid);
  background:var(--cream-200);border-inline-start:3px solid var(--gold-500);
}

/* ==========================================================================
   9. CONTACT & FORMS
   ========================================================================== */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,4.5rem);align-items:start;
}
.field{margin-bottom:1.2rem}
.field label{
  display:block;font-size:var(--step--1);font-weight:600;
  margin-bottom:.45rem;color:var(--ink);
}
.field .req{color:var(--gold-600)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;min-height:48px;
  border:1px solid var(--cream-line);background:var(--cream-50);
  font-size:var(--step--1);color:var(--ink);border-radius:0;
  transition:border-color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-soft)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold-500);background:#fff;
  box-shadow:inset 0 0 0 1px var(--gold-500);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2342556A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
  padding-inline-end:2.5rem;cursor:pointer;
}
.field .err{
  display:none;margin-top:.4rem;font-size:var(--step--2);color:#A32C2C;font-weight:500;
}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{
  border-color:#A32C2C;box-shadow:inset 0 0 0 1px #A32C2C;
}
.field.is-invalid .err{display:block}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.5rem}
.form-note{font-size:var(--step--1);color:var(--ink-soft);margin-top:1.15rem}
.form-note a{color:var(--gold-600);text-decoration:underline;text-underline-offset:3px}
.form-status{
  display:none;margin-top:1.15rem;padding:.9rem 1.1rem;
  font-size:var(--step--1);line-height:1.55;
  background:var(--cream-200);border-inline-start:3px solid var(--gold-500);color:var(--ink-mid);
}
.form-status.is-shown{display:block}
.form-status.is-error{background:#FBEDEC;border-inline-start-color:#A32C2C;color:#7A2020}

.side-card{
  background:var(--navy-700);color:var(--on-navy);
  padding:2rem 1.8rem;clip-path:var(--slice-lg);
  box-shadow:var(--lift-navy);
}
.side-card h3{font-size:var(--step-1);margin-bottom:.9rem;color:#fff}
.side-card p{color:var(--on-navy-mid);font-size:var(--step--1)}
.side-card dl{margin:1.25rem 0 0}
.side-card dl div{padding:.85rem 0;border-bottom:1px solid var(--navy-line)}
.side-card dl div:last-child{border-bottom:0}
.side-card dt{font-size:var(--step--2);letter-spacing:.09em;text-transform:uppercase;color:var(--on-navy-soft)}
.side-card dd{margin:.3rem 0 0;font-size:var(--step--1);color:var(--on-navy)}
.side-card a{color:var(--gold-200)}
.aside-block{margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--cream-line)}
.aside-block h3{font-size:var(--step-1);margin-bottom:.6rem}
.aside-block p{font-size:var(--step--1);color:var(--ink-mid)}

/* --- prose (privacy) ---------------------------------------------------- */
.prose{max-width:72ch}
.prose h2{font-size:var(--step-2);margin:2.75rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose li{position:relative;padding-inline-start:1.3rem;margin-bottom:.45rem;color:var(--ink-mid)}
.prose li::before{
  content:"";position:absolute;inset-inline-start:0;top:.75rem;width:7px;height:7px;background:var(--gold-500);
  clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%);
}
.prose ul{margin-bottom:1em}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.foot{background:var(--navy-800);color:var(--on-navy);padding-block:clamp(3rem,6vw,4.5rem) 1.75rem}
.foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.5rem}
.foot img{height:48px;width:auto;margin-bottom:1.15rem}
.foot p{font-size:var(--step--1);color:var(--on-navy-mid);max-width:36ch}
.foot h4{
  font-size:var(--step--2);letter-spacing:.13em;text-transform:uppercase;
  color:#fff;margin-bottom:1.1rem;font-variation-settings:"wdth" 104;
}
.foot li{margin-bottom:.15rem;font-size:var(--step--1);color:var(--on-navy-mid);line-height:1.6}
.foot li>span{display:inline-block;padding-block:.35rem}
.foot a:not(.btn):not(.powered){
  display:inline-block;padding-block:.35rem;
  color:var(--on-navy-mid);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.foot a:not(.btn):not(.powered):hover{color:#fff;border-color:var(--gold-300)}

.foot__bar{
  margin-top:clamp(2.5rem,5vw,3.25rem);padding-top:1.75rem;
  border-top:1px solid var(--navy-line);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem 1.75rem;flex-wrap:wrap;
  font-size:var(--step--1);color:var(--on-navy-soft);
}
/* The legal line is long; let it wrap inside its own column so the
   attribution button stays on the same row at desktop widths. */
.foot__legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.5rem;
  flex:1 1 34rem;max-width:78ch;line-height:1.55;
}

/* --- the MENA BIG attribution button ------------------------------------ */
.powered{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:46px;padding:.7rem 1.35rem;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 104;
  font-weight:600;font-size:var(--step--1);letter-spacing:.015em;
  color:var(--on-navy);text-decoration:none;white-space:nowrap;
  background:transparent;border:1.5px solid var(--gold-500);
  clip-path:var(--slice-sm);
  transition:background var(--t-med) var(--ease),
             color var(--t-med) var(--ease),
             border-color var(--t-med) var(--ease);
}
.powered:hover,.powered:focus-visible{background:var(--gold-500);color:#FFFBF5;border-color:var(--gold-500)}
.powered__mark{
  width:11px;height:11px;flex:none;background:var(--gold-300);
  clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);
  transition:background var(--t-med) var(--ease);
}
.powered:hover .powered__mark,.powered:focus-visible .powered__mark{background:#FFFBF5}
.powered__ext{width:.8em;height:.8em;flex:none;opacity:.75}

/* --- back to top -------------------------------------------------------- */
.totop{
  position:fixed;inset-inline-end:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;
  background:var(--navy-700);color:var(--on-navy);
  border:1px solid var(--navy-line);cursor:pointer;
  clip-path:var(--slice-sm);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t-med) var(--ease),
             visibility var(--t-med),
             transform var(--t-med) var(--ease),
             background var(--t-fast) var(--ease);
}
.totop.is-shown{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--gold-500);border-color:var(--gold-500);color:#FFFBF5}
.totop svg{width:16px;height:16px}

/* ==========================================================================
   11. MOTION
   ========================================================================== */
@keyframes view-in{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Hero entrance — plays once, on first arrival. */
.hero.is-animating .reveal,
.hero.is-animating .scope{opacity:0;animation:rise .72s var(--ease) forwards}
.hero.is-animating .reveal[data-step="1"]{animation-delay:.04s}
.hero.is-animating .reveal[data-step="2"]{animation-delay:.14s}
.hero.is-animating .reveal[data-step="3"]{animation-delay:.24s}
.hero.is-animating .scope{animation-delay:.34s}

/* Scroll reveal — JS adds .is-in as sections enter the viewport. */
.js .r-up{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.js .r-up.is-in{opacity:1;transform:none}
.js .r-up[data-delay="1"]{transition-delay:.08s}
.js .r-up[data-delay="2"]{transition-delay:.16s}
.js .r-up[data-delay="3"]{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero.is-animating .reveal,.hero.is-animating .scope{opacity:1;animation:none}
  .js .r-up{opacity:1;transform:none}
  .card:hover{transform:none}
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

/* --- laptop and below --------------------------------------------------- */
@media (max-width:1100px){
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 2rem}
  .foot__top>div:first-child{grid-column:1/-1}
  .foot p{max-width:52ch}
}

/* --- tablet ------------------------------------------------------------- */
@media (max-width:940px){
  .split,.group-grid,.contact-grid,.svc-block__head{grid-template-columns:1fr}
  .detail,.dual{grid-template-columns:1fr}
  .dual--single ul{grid-template-columns:1fr}
  .dual--single li:nth-last-child(-n+2){border-bottom:1px solid var(--navy-line)}
  .dual--single li:last-child{border-bottom:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Cards stay two-up on tablet; the odd one out spans the row so the
     hairline grid never shows an empty cell. */
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3>:last-child{grid-column:1/-1}
  .facts{position:static}
  .steps--three{grid-template-columns:1fr}

  /* Four hero tiles go two-up on tablet, so they stay a strip and not a list. */
  .scope{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scope>div{padding-block:1.3rem 1.5rem;padding-inline:0 1.4rem}
  .scope>div:nth-child(odd){padding-inline-start:0}
  .scope>div:nth-child(even){border-inline-end:0;padding-inline-end:0;padding-inline-start:1.4rem}
  .scope>div:nth-child(-n+2){border-bottom:1px solid var(--navy-line)}
  .scope>div:nth-child(n+3){padding-top:1.4rem}
  .hero__figure{display:none}
  .phero::after{display:none}
  .cta-flex{align-items:flex-start}
}

/* --- mobile navigation -------------------------------------------------- */
@media (max-width:860px){
  :root{--header-h:66px}
  .burger{display:inline-flex}
  .brand img{height:34px}

  .nav{
    position:fixed;top:0;inset-inline-end:0;bottom:0;z-index:130;
    width:min(340px,86vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--navy-700);
    border-inline-start:1px solid var(--navy-line);
    padding:calc(var(--header-h) + 1rem) var(--gut) 2rem;
    transform:translateX(100%);
    transition:transform var(--t-med) var(--ease);
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:-20px 0 50px rgba(3,12,22,.4);
  }
  .nav.is-open{transform:none}
  .nav__link,.nav__lang{
    padding:1rem 0;min-height:52px;
    border-bottom:1px solid var(--navy-line);
  }
  .nav__link::after{inset-inline-start:0;inset-inline-end:auto;bottom:.65rem;width:28px}
  .nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
  .nav .btn{margin:1.5rem 0 0;width:100%}
}

/* --- phone -------------------------------------------------------------- */
@media (max-width:680px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-3>:last-child{grid-column:auto}
}

@media (max-width:640px){
  .steps{grid-template-columns:1fr}
  .two-up{grid-template-columns:1fr;gap:0}
  .stats{grid-template-columns:1fr}

  .scope{grid-template-columns:1fr}
  .scope>div,
  .scope>div:nth-child(odd),
  .scope>div:nth-child(even){
    border-inline-end:0;border-bottom:1px solid var(--navy-line);
    padding:1.15rem 0;
  }
  .scope>div:last-child{border-bottom:0}
  .tags--lead li{font-size:var(--step--1)}
  .foot__top{grid-template-columns:1fr;gap:2rem}
  .foot__top>div:first-child{grid-column:auto}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:1.25rem}
  /* The row-layout basis is a width; in a column it would become a height. */
  .foot__legal{flex:0 1 auto;max-width:none}
  .cluster__head{gap:.4rem}
  .cta-flex .btn{width:100%}
  .totop{display:none}

  /* Matrices become stacked records rather than a sideways scroll. */
  .matrix-scroll{overflow:visible}
  .matrix,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block;width:auto}
  .matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .matrix tbody tr{
    background:var(--cream-50);border:1px solid var(--cream-line);
    margin-bottom:.85rem;padding:.35rem 1.1rem .9rem;
  }
  .matrix tbody tr:hover{background:var(--cream-50)}
  .matrix tbody th{
    width:auto;padding:.85rem 0 .6rem;border-bottom:2px solid var(--ink);
    font-family:"Archivo",sans-serif;font-size:var(--step-0);
  }
  .matrix td{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    text-align:end;width:auto;padding:.7rem 0;border-bottom:1px solid var(--cream-line);
  }
  .matrix tbody tr td:last-child{border-bottom:0}
  .matrix td::before{
    content:attr(data-label);
    text-align:start;font-weight:500;color:var(--ink-soft);flex:1;
  }
  .matrix--center td{text-align:end}
}

/* --- very narrow -------------------------------------------------------- */
@media (max-width:380px){
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
}

/* ==========================================================================
   13. RIGHT-TO-LEFT AND ARABIC
   --------------------------------------------------------------------------
   Layout, spacing and alignment mirror on their own: every rule above uses
   logical properties. What is left here is what CSS cannot express
   logically — clip-path geometry, transforms, gradient direction — plus one
   deliberate exception.

   The 45° slice does NOT mirror. It is cut from the logo letterforms, and
   the logo is a fixed Latin mark that cannot flip; mirroring the motif
   around an unmirrored logo would read as a mistake rather than as
   direction. Reading-order cues do mirror — arrows, the underline wipe, the
   drawer, the hero wedge — because those carry direction, not brand.
   ========================================================================== */

/* --- directional glyphs ------------------------------------------------- */
[dir="rtl"] .btn__arrow,
[dir="rtl"] .tlink__arrow{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .btn__arrow,
[dir="rtl"] .tlink:hover .tlink__arrow{transform:scaleX(-1) translateX(3px)}

/* An external-link mark is a symbol, not a direction — it never flips. */
.tlink__ext{width:.8em;height:.8em;flex:none;opacity:.8}
[dir="rtl"] .tlink__ext,
[dir="rtl"] .powered__ext,
[dir="rtl"] .totop svg{transform:none}

/* --- gradients and background positions --------------------------------- */
[dir="rtl"] .tlink{background-position:100% 100%}
[dir="rtl"] .field select{background-position:left 1rem center}

/* --- hero geometry: the wedge sits opposite the text, so it mirrors ------ */
[dir="rtl"] .hero__figure::before{clip-path:polygon(0 0,60% 0,100% 100%,40% 100%)}
[dir="rtl"] .hero__figure::after{clip-path:polygon(0 0,56% 0,100% 100%,44% 100%)}
[dir="rtl"] .phero::after{clip-path:polygon(0 0,58% 0,100% 100%,42% 100%)}

/* --- the drawer enters from the trailing edge, now the left ------------- */
@media (max-width:860px){
  [dir="rtl"] .nav{transform:translateX(-100%);box-shadow:20px 0 50px rgba(3,12,22,.4)}
  [dir="rtl"] .nav.is-open{transform:none}
}

/* --- Arabic typography ---------------------------------------------------
   Archivo and IBM Plex Sans carry no Arabic. Noto Kufi Arabic keeps the
   angular, architectural feel of the headings; IBM Plex Sans Arabic is the
   direct counterpart to the Latin body face. Arabic is a joined script, so
   letter-spacing is reset to normal everywhere — tracking breaks the
   connections — and the leading opens up to clear the taller ascenders.
   ------------------------------------------------------------------------ */
[lang="ar"] body,
[lang="ar"] button,
[lang="ar"] input,
[lang="ar"] select,
[lang="ar"] textarea{
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",system-ui,sans-serif;
  line-height:1.85;
}
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5{
  font-family:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif;
  line-height:1.5;
  font-variation-settings:normal;
}
[lang="ar"] h1{line-height:1.45}

/* Tracking and small-caps styling do not apply to a joined script. */
[lang="ar"] *{letter-spacing:normal}
[lang="ar"] .eyebrow,
[lang="ar"] .foot h4,
[lang="ar"] .side-card dt,
[lang="ar"] .detail h3,
[lang="ar"] .svc-block__where,
[lang="ar"] .burger,
[lang="ar"] .tags__also{text-transform:none}

/* Headline measures that were tuned for Latin need room in Arabic. */
[lang="ar"] .hero h1{max-width:19ch}
[lang="ar"] .cta-flex h2{max-width:24ch}
[lang="ar"] .phero h1{max-width:24ch}

/* The lede's light weight is too fragile at Arabic's stroke contrast. */
[lang="ar"] .lede{font-weight:400}

/* Latin runs inside Arabic copy — brand, legal and contact strings. */
[lang="ar"] .ltr{
  direction:ltr;unicode-bidi:isolate;display:inline-block;
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
}

/* --- print -------------------------------------------------------------- */
@media print{
  .masthead,.jump,.totop,.skip,.nav__scrim,.hero__figure{display:none !important}
  .view{display:block !important}
  body{background:#fff;color:#000}
  .band--navy,.band--deep,.foot,.hero,.phero{background:#fff !important;color:#000 !important}
}