/* Self-hosted IBM Plex (SIL OFL 1.1). Variable Latin + static Arabic + the
   condensed display face. Regenerate with build/fonts.sh if weights or
   subsets change. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;
src:url(../fonts/plex-sans-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;
src:url(../fonts/plex-sans-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;
src:url(../fonts/plex-arabic-arabic-400.woff2) format('woff2');
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;
src:url(../fonts/plex-arabic-arabic-600.woff2) format('woff2');
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* Display face: IBM Plex Sans Condensed 600/700, the v8.17 profile display
   type (design-system-v8 §4). Subset from the profile's own OFL TTFs with
   pyftsubset to latin + latin-ext in one file per weight, so the Turkish
   ğ ş İ ı Ç Ö Ü come from the same request: 17.4 + 16.9 KB.
   Latin/Turkish headings only -- Arabic never uses a condensed face. */
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:600;font-display:swap;
src:url(../fonts/plex-cond-latin-600.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0100-017F,U+0192,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0306-0308,U+030A-030C,U+0312,U+0327-0329,U+2000-206F,U+20A0-20BF,U+2113,U+2122,U+2126,U+2190-2193,U+2212,U+2215,U+FB01-FB02,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;
src:url(../fonts/plex-cond-latin-700.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0100-017F,U+0192,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0306-0308,U+030A-030C,U+0312,U+0327-0329,U+2000-206F,U+20A0-20BF,U+2113,U+2122,U+2126,U+2190-2193,U+2212,U+2215,U+FB01-FB02,U+FEFF,U+FFFD}

/* ============================================================
   MARAS design system
   White + MARAS navy, orange accent. Mobile-first, RTL-native.
   Authored in build/styles.css -> emitted to dist/assets/css/maras.css
   ============================================================ */

/* ---------- tokens ----------
   Palette = company profile v8.17 (#2B3E6B navy / #F7941D orange), DECIDED
   D2 on 2026-09-30, so the site and the printed profile read as one system.
   The LOGO FILES are untouched: dist/assets/brand/logo*.svg keep the
   #1D2F5C/#F47E20 artwork and are never recoloured.
   Navy is dominant (60-70% of the home page's height); orange is accent only
   -- button fill, rules, numerals and eyebrows on navy, focus ring -- and is
   NEVER body text, a large fill or a section background. Orange TEXT on light
   uses --orange-ink, because #F7941D on white is 2.28:1.
   Every ratio in the comments is measured by qa/contrast.html. */
:root{
  --navy:#2B3E6B;         /* primary brand surface: white 10.48, --on-dark-2 6.90, orange 4.59 */
  --navy-900:#1F2E52;     /* hero/pagehead base, services, projects teaser: white 13.37 */
  --navy-950:#141C30;     /* footer: white 16.96, --on-dark-3 9.67 */
  --navy-800:#24345A;     /* translucent-card fallback between navy and navy-900 */
  --navy-line:rgba(255,255,255,.14);

  --orange:#F7941D;       /* accent only. On white 2.28 -> never text on white */
  --orange-hover:#E8870F; /* primary button hover, with --on-orange 6.45 */
  --orange-ink:#A34F00;   /* orange TEXT on light: white 5.71, paper 5.00 */
  --on-orange:#26190A;    /* text on an orange fill: 7.51 */
  --orange-soft:#FDEBD3;  /* pale orange chip, carries --orange-ink at 4.90 */

  --white:#FFFFFF;
  --paper:#EDF0F6;        /* v8.17 soft navy, the light alternate band */
  --line:#D8DCE6;         /* decorative hairlines on light */
  --line-strong:#808A9B;  /* control and button boundaries: white 3.48, paper 3.05 */

  --ink:#1A2336;          /* text on light: 15.70 on white */
  --ink-2:#5C6578;        /* secondary text: 5.85 white, 5.13 paper */
  --ink-3:#5C6578;        /* alias of --ink-2; the old lighter grey failed on paper */

  --on-dark:#FFFFFF;
  --on-dark-2:#C9D2E5;    /* body on navy: 6.90 */
  --on-dark-3:#BAC4D8;    /* meta on navy: 5.98 */
  --line-dark:var(--navy-line);

  /* type. Body = IBM Plex Sans; display (Latin/Turkish headings, stat figures,
     QHSE letters, index numerals) = IBM Plex Sans Condensed, the v8.17 display
     face. Arabic never uses a condensed face. */
  --font:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-ar:'IBM Plex Sans Arabic','IBM Plex Sans','Segoe UI',Tahoma,sans-serif;
  --font-display:'IBM Plex Sans Condensed','IBM Plex Sans','Arial Narrow',
                 'Segoe UI',system-ui,sans-serif;

  /* SPEC P4.2. The scale stays monotonic. --step--1 is the 13px production
     floor for meta and eyebrows (Arabic 14px, below); nothing is smaller. */
  --step--1:.8125rem;                                   /* 13px meta / eyebrow */
  --step-ui:.9375rem;                                   /* 15px small / UI / buttons */
  --step-0:1rem;                                        /* 16px body */
  --step-1:clamp(1.0625rem,1rem + .35vw,1.25rem);       /* 17-20px lede */
  --step-2:clamp(1.25rem,1.1rem + .5vw,1.5rem);         /* 20-24px h3 */
  --step-3:clamp(1.5rem,1.3rem + .9vw,2rem);            /* 24-32px */
  --step-4:clamp(1.875rem,1.3rem + 2.2vw,3rem);         /* 30-48px h2 */
  --step-5:clamp(2.25rem,1.5rem + 3.2vw,3.75rem);       /* 36-60px page h1 */
  --step-6:clamp(2.75rem,1.6rem + 4.9vw,5.25rem);       /* 44-84px hero h1 */
  --step-stat:clamp(2.5rem,1.8rem + 2.6vw,3.75rem);     /* 40-60px stat figure */

  /* space */
  --s1:.25rem;  --s2:.5rem;   --s3:.75rem;  --s4:1rem;
  --s5:1.5rem;  --s6:2rem;    --s7:2.75rem; --s8:3.5rem;
  --s9:4.5rem;  --s10:6rem;   --s11:8rem;

  --gutter:clamp(20px,10px + 2.2vw,40px);
  --maxw:1240px;
  --maxw-text:70ch;

  /* v8.17 is sharp-cornered */
  --radius:2px;
  --radius-lg:4px;
  --shadow-1:0 1px 2px rgba(20,28,48,.06),0 6px 18px rgba(20,28,48,.06);
  --shadow-2:0 2px 6px rgba(20,28,48,.08),0 18px 44px rgba(20,28,48,.10);
  --ring:0 0 0 3px rgba(247,148,29,.45);
  --tap:44px;
  --t:200ms cubic-bezier(.2,.6,.3,1);
}
/* Arabic: +1px on body/small/meta, and no condensed display face. */
html[lang="ar"]{
  --font-display:var(--font-ar);
  --step--1:.875rem;      /* 14px meta floor */
  --step-ui:1rem;         /* 16px small / UI */
  --step-0:1.0625rem;     /* 17px body */
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font);font-size:var(--step-0);line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html[lang="ar"] body{font-family:var(--font-ar);line-height:1.85}
img,svg,video{max-width:100%;height:auto;display:block}
/* Display type: condensed 700 for h1/h2, 600 for h3. Arabic resolves
   --font-display to the Arabic family and drops the negative tracking. */
h1,h2,h3,h4{
  margin:0;font-family:var(--font-display);font-weight:700;
  line-height:1.02;letter-spacing:-.005em;color:var(--ink);text-wrap:balance
}
h3,h4{font-weight:600;line-height:1.15}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{
  font-weight:600;letter-spacing:0;line-height:1.35
}
p{margin:0}
ul,ol{margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius)}
/* the ring has to be visible where a box-shadow would be clipped */
:focus-visible:where(input,select,textarea){box-shadow:var(--ring)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:76ch}
.section{padding-block:clamp(64px,40px + 6vw,120px)}
.section--tight{padding-block:clamp(2.5rem,1.8rem + 4vw,4.5rem)}
.section--paper{background:var(--paper)}
.section--dark{background:var(--navy-900);color:var(--on-dark-2)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--on-dark)}
.section--navy{background:var(--navy);color:var(--on-dark-2)}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.stack>*+*{margin-block-start:var(--s4)}
.stack-lg>*+*{margin-block-start:var(--s6)}

.grid{display:grid;gap:var(--s5)}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:clamp(2rem,1rem + 5vw,4.5rem);align-items:start}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide{grid-template-columns:1.15fr .85fr}
  .split--narrow{grid-template-columns:.8fr 1.2fr}
}

/* ---------- typography helpers ----------
   Section header = 32x2px orange rule + 13px uppercase label -> H2 ->
   optional lede (<=62ch). Arabic never gets uppercase or tracking. */
.eyebrow{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--font);
  font-size:var(--step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-ink);margin:0 0 var(--s4)
}
html[lang="ar"] .eyebrow{letter-spacing:0;text-transform:none}
.eyebrow::before{content:"";inline-size:32px;block-size:2px;background:var(--orange);flex:none}
.section--dark .eyebrow,.section--navy .eyebrow{color:var(--orange)}
/* section header block: heading group, optionally split heading | lede at 960 */
.shead{max-inline-size:760px;margin-block-end:var(--s8)}
.shead .lede{margin-block-start:var(--s4)}
.shead--split{max-inline-size:none;display:grid;gap:var(--s5)}
@media (min-width:960px){
  .shead--split{grid-template-columns:1.1fr 1fr;gap:var(--s9);align-items:end}
  .shead--split .lede{margin-block-start:0}
}
.h-display{font-size:var(--step-6)}
.h1{font-size:var(--step-5)}
.h2{font-size:var(--step-4)}
.h3{font-size:var(--step-2)}
.h4{font-size:var(--step-2)}
.lede{font-size:var(--step-1);color:var(--ink-2);line-height:1.6;max-width:62ch}
html[lang="ar"] .lede{line-height:1.85}
.section--dark .lede,.section--navy .lede{color:var(--on-dark-2)}
.muted{color:var(--ink-2)}
.prose{max-width:var(--maxw-text)}
.prose>*+*{margin-block-start:var(--s4)}
.prose p{color:var(--ink-2)}
.prose p.lede{color:var(--ink)}
.prose h2{font-size:var(--step-3);margin-block-start:var(--s7)}
.prose h3{font-size:var(--step-2);margin-block-start:var(--s6)}
.prose ul{padding-inline-start:1.15em;list-style:disc}
.prose ul li+li{margin-block-start:var(--s2)}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--orange-ink)}

/* ---------- buttons ----------
   48px minimum height, 2px radius, 1.5px border, 15px/600. Exactly one
   orange-filled button per viewport region: header CTA, hero CTA, CTA band. */
.btn{
  --btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-block-size:48px;padding:12px 24px;
  border:1.5px solid var(--btn-bd);border-radius:var(--radius);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:var(--step-ui);font-weight:600;
  cursor:pointer;transition:transform var(--t),background var(--t),border-color var(--t),color var(--t);
  text-align:center;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--accent{--btn-bg:var(--orange);--btn-bd:var(--orange);--btn-fg:var(--on-orange)}
.btn--accent:hover{--btn-bg:var(--orange-hover);--btn-bd:var(--orange-hover)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:var(--line-strong)}
.btn--ghost:hover{--btn-bd:var(--navy);--btn-bg:#fff}
.btn--on-dark{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)}
.btn--on-dark:hover{--btn-bd:#fff;--btn-bg:rgba(255,255,255,.08)}
.btn__arrow{flex:none;transition:transform var(--t)}
.btn:hover .btn__arrow{transform:translateX(3px)}
html[dir="rtl"] .btn__arrow{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .btn__arrow{transform:scaleX(-1) translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* Text link: 15px/600, --orange-ink on light and --orange on navy, 44px tall
   so it is a WCAG 2.5.8 target in its own right. */
.link-arrow{
  display:inline-flex;align-items:center;gap:var(--s2);min-block-size:var(--tap);
  font-size:var(--step-ui);font-weight:600;color:var(--orange-ink);
  transition:color var(--t)
}
.link-arrow:hover{color:var(--navy);text-decoration:underline;text-underline-offset:4px}
.link-arrow svg{flex:none;transition:transform var(--t)}
.link-arrow:hover svg{transform:translateX(3px)}
html[dir="rtl"] .link-arrow svg{transform:scaleX(-1)}
html[dir="rtl"] .link-arrow:hover svg{transform:scaleX(-1) translateX(3px)}

/* ---------- skip link ---------- */
.skip{
  position:absolute;inset-inline-start:var(--s4);inset-block-start:-100px;z-index:200;
  background:var(--navy);color:#fff;padding:.7em 1.1em;border-radius:var(--radius);
  font-weight:600;transition:inset-block-start var(--t)
}
.skip:focus{inset-block-start:var(--s4)}

/* ---------- header ---------- */
.header{position:sticky;inset-block-start:0;z-index:100;background:#fff;border-block-end:1px solid var(--line)}
.header__bar{display:flex;align-items:center;gap:var(--s5);min-height:70px}
@media (min-width:1024px){.header__bar{min-height:82px}}
.brand{display:flex;align-items:center;gap:var(--s3);flex:none;padding-block:var(--s2)}
.brand__logo{inline-size:clamp(108px,9vw,140px);block-size:auto}
.brand__rule{inline-size:1px;block-size:30px;background:var(--line);flex:none}
/* 13px is the production font floor, so the tag sits at 13px in every
   language (Phase 1 had 12px EN/TR). 18ch keeps the longest Turkish wording
   inside the 82px header bar. */
.brand__tag{
  font-size:13px;line-height:1.25;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);max-inline-size:18ch;display:none
}
html[lang="ar"] .brand__tag{letter-spacing:0;text-transform:none;font-size:14px;max-inline-size:14ch}
@media (min-width:1180px){.brand__tag,.brand__rule{display:block}}
/* home: the hero eyebrow already carries brand.positioning; don't repeat it in the header */
.is-home .brand__tag,.is-home .brand__rule{display:none}
.brand__rule{display:none}

.nav{display:none;margin-inline-start:auto;align-items:center;gap:clamp(.5rem,-.4rem + 1.6vw,1.45rem)}
@media (min-width:1024px){.nav{display:flex}}
.nav__link{
  position:relative;display:inline-flex;align-items:center;min-block-size:var(--tap);
  padding:0 .1em;font-size:var(--step--1);font-weight:500;color:var(--ink-2);
  white-space:nowrap;transition:color var(--t)
}
@media (min-width:1320px){.nav__link,.nav__link--group{font-size:var(--step-ui)}}
.nav__link:hover{color:var(--navy)}
.nav__link::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:-2px;block-size:2px;
  background:var(--orange);transform:scaleX(0);transition:transform var(--t)
}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--navy);font-weight:600}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

.header__end{display:flex;align-items:center;gap:var(--s3);margin-inline-start:auto}
@media (min-width:1024px){.header__end{margin-inline-start:0}}
.header__cta{display:none}
@media (min-width:1280px){.header__cta{display:inline-flex}}

/* language switch */
.lang{position:relative}
.lang__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-block-size:var(--tap);min-inline-size:var(--tap);
  padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:#fff;font-size:var(--step--1);font-weight:600;cursor:pointer;transition:border-color var(--t)
}
.lang__btn:hover{border-color:var(--line-strong)}
.lang__list{
  position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;z-index:120;
  min-inline-size:132px;padding:var(--s2);margin:0;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-2)
}
.lang__list[hidden]{display:none}
.lang__list a{display:block;padding:.5em .6em;border-radius:2px;font-size:var(--step--1);font-weight:500}
.lang__list a:hover{background:var(--paper)}
.lang__list a[aria-current="true"]{color:var(--orange-ink);font-weight:700}

/* mobile menu */
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:var(--tap);block-size:var(--tap);flex:none;
  border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;cursor:pointer
}
@media (min-width:1024px){.burger{display:none}}
.burger__box{position:relative;inline-size:18px;block-size:12px}
.burger__box span{
  position:absolute;inset-inline:0;block-size:2px;background:var(--navy);border-radius:2px;
  transition:transform var(--t),opacity var(--t)
}
.burger__box span:nth-child(1){inset-block-start:0}
.burger__box span:nth-child(2){inset-block-start:5px}
.burger__box span:nth-child(3){inset-block-start:10px}
.burger[aria-expanded="true"] .burger__box span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__box span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;
  background:var(--navy-900);color:#fff;
  padding:var(--s5) var(--gutter) var(--s8);
  overflow-y:auto;overscroll-behavior:contain
}
.mobile-nav[hidden]{display:none}
.mobile-nav__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-block-end:var(--s7)}
.mobile-nav__close{
  inline-size:var(--tap);block-size:var(--tap);display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.4);border-radius:var(--radius);background:transparent;color:#fff;cursor:pointer
}
.mobile-nav__list{list-style:none;display:flex;flex-direction:column}
.mobile-nav__list li{border-block-end:1px solid var(--line-dark)}
.mobile-nav__list a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) 0;font-size:var(--step-2);font-weight:600;color:#fff
}
.mobile-nav__list a[aria-current="page"]{color:var(--orange)}
.mobile-nav__list a span{
  color:var(--on-dark-3);font-family:var(--font-display);font-size:var(--step-ui);
  font-weight:700;font-variant-numeric:tabular-nums
}
.mobile-nav__foot{margin-block-start:var(--s7);display:grid;gap:var(--s4)}
.mobile-nav__langs{display:flex;gap:var(--s2);flex-wrap:wrap}
.mobile-nav__langs a{
  display:inline-flex;align-items:center;min-block-size:var(--tap);
  padding:0 1em;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius);
  font-size:var(--step-ui);font-weight:600
}
.mobile-nav__langs a[aria-current="true"]{background:#fff;color:var(--navy-900);border-color:#fff}
body.is-locked{overflow:hidden}

/* ---------- hero ----------
   One photographic band, content sitting at its foot, no decorative mesh and
   no corridor: the corridor is a map and belongs with the offices band. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--navy-900);color:var(--on-dark-2);
  min-block-size:clamp(560px,52vw + 180px,820px);
  display:flex;align-items:flex-end
}
.hero__inner{position:relative;inline-size:100%;padding-block:var(--s10) var(--s9)}
/* the v8.17 brand line, one sentence per line, the last in orange */
.hero h1{
  color:#fff;font-size:var(--step-6);line-height:.98;
  margin-block:var(--s5);overflow-wrap:normal;hyphens:none;text-wrap:initial
}
.hero h1 .l{display:block}
.hero h1 .accent{color:var(--orange)}
html[lang="ar"] .hero h1{line-height:1.25}
/* The Turkish brand line is ~50% longer than the English one; sizing it down
   keeps it to the same three lines from 760px up instead of wrapping to five. */
html[lang="tr"] .hero h1{font-size:clamp(2.25rem,1.1rem + 3.6vw,4rem)}
.hero__lede{font-size:var(--step-1);color:var(--on-dark-2);max-inline-size:54ch}
.hero__actions{margin-block-start:var(--s7)}
.hero__presence{
  list-style:none;margin-block-start:var(--s8);padding-block-start:var(--s5);
  border-block-start:1px solid var(--navy-line);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s7)
}
.hero__presence li{
  display:flex;align-items:center;gap:10px;
  color:#fff;font-size:var(--step-ui);font-weight:500
}
.hero__presence li::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:var(--orange);flex:none}

/* ---------- cards ---------- */
.card{
  position:relative;display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s6) var(--s5) var(--s6);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1);transform:translateY(-2px)}
a.card:hover{border-color:var(--navy)}
.card__num{
  font-family:var(--font-display);
  font-size:var(--step-ui);font-weight:700;letter-spacing:.04em;color:var(--orange-ink);
  font-variant-numeric:tabular-nums
}
.card__icon{color:var(--navy);margin-block-end:var(--s2)}
.card h3,.card h2{font-size:var(--step-2)}
.card p{color:var(--ink-2);font-size:var(--step-ui)}
.card__more{margin-block-start:auto;padding-block-start:var(--s4)}
.card--dark{background:var(--navy-800);border-color:var(--navy-line)}
.card--dark p{color:var(--on-dark-2)}
.card--dark:hover{border-color:rgba(255,255,255,.4)}
.card--flat{background:var(--paper);border-color:transparent}
.card--flat:hover{background:#fff;border-color:var(--line)}

/* numbered capability list */
.caps{list-style:none;display:grid;gap:0;border-block-start:1px solid var(--line)}
.caps li{
  display:grid;gap:var(--s2) var(--s5);padding-block:var(--s5);
  border-block-end:1px solid var(--line);align-items:baseline
}
@media (min-width:760px){.caps li{grid-template-columns:3.5rem 15rem 1fr}}
.caps__n{font-family:var(--font-display);font-weight:700;color:var(--orange-ink);
         font-variant-numeric:tabular-nums;font-size:var(--step-0);letter-spacing:.04em}
.caps h3{font-size:var(--step-2)}
.caps p{color:var(--ink-2)}
.section--dark .caps,.section--dark .caps li{border-color:var(--line-dark)}
.section--dark .caps p{color:var(--on-dark-2)}

/* stat / figure row */
.figs{list-style:none;display:grid;gap:var(--s5)}
@media (min-width:640px){.figs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.figs{grid-template-columns:repeat(4,1fr)}}
.figs li{padding-inline-start:var(--s4);border-inline-start:2px solid var(--orange)}
.figs dt{font-family:var(--font-display);font-size:var(--step-3);font-weight:700;color:var(--navy)}
.section--dark .figs dt{color:#fff}
.figs dd{margin:0;color:var(--ink-2);font-size:var(--step--1)}
.section--dark .figs dd{color:var(--on-dark-3)}

/* ---------- offices ---------- */
.offices{display:grid;gap:var(--s5)}
@media (min-width:720px){.offices{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.offices{grid-template-columns:repeat(4,1fr)}}
.office{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.office__flagrow{display:flex;align-items:center;gap:var(--s3)}
.office__country{font-size:var(--step--1);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
html[lang="ar"] .office__country{letter-spacing:0;text-transform:none}
.office h3{font-size:var(--step-2)}
.office__meta{list-style:none;display:grid;gap:var(--s2);font-size:var(--step-ui);color:var(--ink-2)}
.office__meta li{display:flex;gap:var(--s3);align-items:flex-start}
.office__meta svg{flex:none;margin-block-start:.25em;color:var(--navy)}
.office__role{font-size:var(--step-ui);color:var(--ink-2)}

/* map */
.map{position:relative;background:var(--navy-900);border-radius:var(--radius);overflow:hidden}
.map svg{inline-size:100%;block-size:auto;display:block}
.map__legend{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s4);padding:var(--s5);border-block-start:1px solid var(--line-dark)}
.map__legend li{display:flex;align-items:center;gap:var(--s2);color:#fff;font-size:var(--step--1);font-weight:500}
.map__legend b{color:var(--on-dark-3);font-weight:500}
.map__dot{inline-size:9px;block-size:9px;border-radius:50%;background:var(--orange);flex:none;box-shadow:0 0 0 4px rgba(247,148,29,.2)}

/* ---------- pending / placeholder states ---------- */
.pending{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:.25em .6em;border:1px dashed var(--line-strong);border-radius:2px;
  background:#FFF8F0;color:var(--orange-ink);
  font-size:var(--step--1);font-weight:600
}
.pending::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--orange);flex:none}
.section--dark .pending,.map .pending{background:#ffffff14;border-color:#ffffff3d;color:#F8C79A}
.imgslot{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  aspect-ratio:16/10;padding:var(--s6);
  background:
    repeating-linear-gradient(135deg,#EDF0F5 0 12px,#E6EAF1 12px 24px);
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink-2);text-align:center
}
.imgslot--tall{aspect-ratio:4/5}
.imgslot--wide{aspect-ratio:21/9}
.imgslot__label{font-size:var(--step--1);font-weight:600;color:var(--ink-2);max-inline-size:34ch}
.imgslot__hint{font-size:var(--step--1);color:var(--ink-2);max-inline-size:40ch}
.imgslot svg{color:var(--line-strong)}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--s5)}
.field{display:grid;gap:var(--s2)}
.field label{font-size:var(--step-ui);font-weight:600;color:var(--ink)}
.field .req{color:var(--orange-ink)}
.field input:not([type="radio"]):not([type="checkbox"]),
.field select,.field textarea{
  inline-size:100%;padding:.8em .9em;
  font:inherit;font-size:var(--step-0);color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);
  transition:border-color var(--t),box-shadow var(--t)
}
.field textarea{resize:vertical;min-block-size:8.5em}
.field input:not([type="radio"]):not([type="checkbox"]):focus,
.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:var(--ring)
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#B0301F}
.field__err{font-size:var(--step--1);color:#B0301F;font-weight:500;min-block-size:1.2em}
.field__err:empty{min-block-size:0}
@media (min-width:680px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}}
.form__note{font-size:var(--step--1);color:var(--ink-2)}
.form__status{padding:var(--s4) var(--s5);border-radius:var(--radius);font-weight:500;font-size:var(--step-0)}
.form__status[hidden]{display:none}
.form__status--ok{background:#ECF7F0;border:1px solid #BEE3CC;color:#1C6B3C}
.form__status--err{background:#FDF0EE;border:1px solid #F3C7C0;color:#93291B}
.form__status--busy{background:var(--paper);border:1px solid var(--line);color:var(--ink-2)}
.hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}

/* ---------- misc ---------- */
.breadcrumb{padding-block:var(--s4);border-block-end:1px solid var(--line);background:var(--paper)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--step--1);color:var(--ink-2)}
.breadcrumb li{display:flex;align-items:center;gap:var(--s2)}
.breadcrumb li+li::before{content:"/";color:var(--line-strong)}
html[dir="rtl"] .breadcrumb li+li::before{content:"\\\\"}
.breadcrumb a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.breadcrumb [aria-current="page"]{color:var(--ink-2);font-weight:500}

.pagehead{padding-block:clamp(2.5rem,1.6rem + 4.5vw,5rem);background:var(--navy-900);color:var(--on-dark-2)}
.pagehead h1{color:#fff;font-size:var(--step-5);max-inline-size:24ch}
.pagehead .lede{margin-block-start:var(--s4);color:var(--on-dark-2);font-size:var(--step-1);max-inline-size:58ch}
/* breadcrumb inside a photographic page head */
.pagehead .breadcrumb{
  padding:0;margin-block-end:var(--s5);background:none;border:0;
  position:relative;z-index:2
}
.pagehead .breadcrumb .wrap{padding-inline:0;max-inline-size:none}
.pagehead .breadcrumb ol{color:var(--on-dark-3)}
.pagehead .breadcrumb a{color:#fff}
.pagehead .breadcrumb [aria-current="page"]{color:var(--on-dark-3)}
.pagehead .breadcrumb li+li::before{color:var(--on-dark-3)}

.cta{background:var(--navy-900);color:var(--on-dark-2)}
.cta__inner{display:grid;gap:var(--s6);align-items:center}
@media (min-width:900px){.cta__inner{grid-template-columns:1.3fr .7fr}}
.cta h2{color:#fff;font-size:var(--step-4);max-inline-size:20ch}
.cta p{color:var(--on-dark-2);margin-block-start:var(--s4);max-inline-size:56ch;font-size:var(--step-1)}
.cta.has-media{padding-block:0}
.cta.has-media .cta__inner{padding-block:clamp(64px,40px + 6vw,120px)}

.tags{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2)}
.tags li{
  padding:.35em .8em;border:1px solid var(--line);border-radius:100px;
  font-size:var(--step--1);color:var(--ink-2);background:#fff
}
.section--dark .tags li{border-color:var(--line-dark);background:#ffffff0d;color:var(--on-dark-2)}

.ticks{list-style:none;display:grid;gap:var(--s3)}
.ticks li{display:flex;gap:var(--s3);align-items:flex-start;color:var(--ink-2)}
.ticks svg{flex:none;margin-block-start:.3em;color:var(--orange)}
.section--dark .ticks li{color:var(--on-dark-2)}

.rule{border:0;border-block-start:1px solid var(--line);margin-block:var(--s7)}
.section--dark .rule{border-color:var(--line-dark)}

/* ---------- footer ---------- */
.footer{background:var(--navy-950);color:var(--on-dark-3);padding-block:var(--s9) var(--s6);font-size:var(--step-ui)}
.footer__grid{display:grid;gap:var(--s7)}
@media (min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1080px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.footer__brandcol{display:grid;gap:var(--s4);align-content:start}
.footer__logo{inline-size:132px}
.footer__about{color:var(--on-dark-3);max-inline-size:38ch}
.footer h2{font-family:var(--font);font-size:var(--step--1);font-weight:600;letter-spacing:.12em;
           text-transform:uppercase;color:#fff;margin-block-end:var(--s3)}
html[lang="ar"] .footer h2{letter-spacing:0;text-transform:none}
.footer ul{list-style:none;display:grid;gap:0}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__bottom{
  margin-block-start:var(--s8);padding-block-start:var(--s5);border-block-start:1px solid var(--navy-line);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;align-items:center;
  font-size:var(--step--1)
}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s5)}
/* Registered entity name. Inherits the footer's own text colour rather than
   introducing a dimmer one: this is legal identification, not decoration, and
   the footer colour is the audited-passing value. */
.footer__entity{display:block;margin-block-start:var(--s2);max-inline-size:52ch}
.footer__bottom p{margin:0}

/* ---------- corridor diagram ----------
   The track is a MAP, not a reading sequence, so it keeps geographic order
   west -> east, left -> right in Arabic too (SPEC P4.7 rule 3): direction:ltr
   on the track, direction:rtl inside each node. */
.corridor{
  padding:var(--s6) var(--s5);
  background:var(--navy-800);border:1px solid var(--navy-line);border-radius:var(--radius-lg)
}
.corridor--dark{background:var(--navy-800)}
.section--paper .corridor,.section:not(.section--dark):not(.section--navy):not(.hero) .corridor{
  background:var(--navy-900)
}
.corridor__track{list-style:none;display:grid;gap:0}
.corridor__node{
  position:relative;display:grid;gap:2px;
  padding-inline-start:var(--s6);padding-block:var(--s4)
}
/* the connecting spine */
.corridor__node::after{
  content:"";position:absolute;inset-inline-start:4px;inset-block-start:1.35em;
  inline-size:1px;block-size:100%;background:linear-gradient(var(--orange),rgba(247,148,29,.15))
}
.corridor__node:last-child::after{display:none}
.corridor__dot{
  position:absolute;inset-inline-start:0;inset-block-start:1.05em;
  inline-size:9px;block-size:9px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 4px rgba(247,148,29,.16)
}
.corridor__country{
  font-size:var(--step--1);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-3)
}
html[lang="ar"] .corridor__country{letter-spacing:0;text-transform:none;font-size:var(--step-ui)}
.corridor__city{font-size:var(--step-1);font-weight:600;color:#fff;line-height:1.3}
.corridor__coord{
  font-size:var(--step--1);color:var(--on-dark-3);
  font-variant-numeric:tabular-nums;letter-spacing:.02em
}
.corridor__note{
  margin-block-start:var(--s4);padding-block-start:var(--s4);
  border-block-start:1px solid var(--navy-line);
  font-size:var(--step--1);color:var(--on-dark-3)
}

/* horizontal 4-stop track: home offices band (H10) */
.corridor--row{background:none;border:0;padding:0;border-radius:0}
.corridor--row .corridor__track{
  position:relative;direction:ltr;
  grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s5)
}
.corridor--row .corridor__node{
  padding-inline-start:0;padding-block:28px 0;gap:4px;align-content:start
}
html[dir="rtl"] .corridor--row .corridor__node{direction:rtl;text-align:start}
.corridor--row .corridor__node::after{display:none}
.corridor--row .corridor__dot{
  inset-block-start:0;inset-inline-start:0;
  inline-size:14px;block-size:14px;
  background:var(--navy);border:3px solid var(--orange);box-shadow:none
}
html[dir="rtl"] .corridor--row .corridor__dot{inset-inline-start:auto;left:0;right:auto}
.corridor--row .corridor__city{
  font-family:var(--font-display);font-size:var(--step-3);font-weight:700;line-height:1.1
}
.corridor--row .corridor__role{
  font-size:var(--step-ui);color:var(--on-dark-2);line-height:1.55;max-inline-size:34ch;
  margin-block-start:var(--s2)
}
@media (min-width:960px){
  .corridor--row .corridor__track{grid-template-columns:repeat(4,1fr)}
  /* the connector runs through the dots, west to east */
  .corridor--row .corridor__track::before{
    content:"";position:absolute;inset-inline:6px;inset-block-start:6px;block-size:2px;
    background:linear-gradient(90deg,var(--orange),rgba(247,148,29,.25))
  }
}
.contactrow{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);
  margin-block-start:var(--s8);padding-block-start:var(--s5);
  border-block-start:1px solid var(--navy-line)
}
.contactrow a{
  display:inline-flex;align-items:center;gap:10px;min-block-size:var(--tap);
  color:#fff;font-weight:600;font-size:var(--step-ui)
}
.contactrow a:hover{text-decoration:underline;text-underline-offset:4px}
.contactrow svg{inline-size:18px;block-size:18px;color:var(--orange);flex:none}
.contactrow .link-arrow{color:var(--orange)}
.contactrow .link-arrow:hover{color:#fff}

/* ---------- utilities (kept tiny; CSP forbids inline style attributes) ---------- */
.mt-3{margin-block-start:var(--s3)}
.mt-4{margin-block-start:var(--s4)}
.mt-5{margin-block-start:var(--s5)}
.mt-6{margin-block-start:var(--s6)}
.mt-7{margin-block-start:var(--s7)}
.mt-8{margin-block-start:var(--s8)}
.tac{text-align:center}
.jc-c{justify-content:center}
.mx-auto{margin-inline:auto}
.center-block{margin-inline:auto}
.footer__h2--gap{margin-block-start:var(--s6)}

/* ---------- root language dispatcher ---------- */
.dispatch{
  margin:0;min-height:100vh;display:grid;place-items:center;
  background:var(--navy-900);color:#fff;text-align:center;padding:var(--s6)
}
.dispatch img{inline-size:170px;margin:0 auto var(--s7)}
.dispatch p{color:var(--on-dark-2)}
.dispatch ul{
  list-style:none;padding:0;margin:var(--s5) 0 0;
  display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center
}
.dispatch a{
  display:block;padding:.8em 1.4em;border:1px solid #ffffff3d;border-radius:var(--radius);
  color:#fff;font-weight:600
}
.dispatch a:hover{background:#ffffff14;border-color:#fff}
.dispatch span{color:var(--on-dark-3);font-weight:400}

/* anchor targets must clear the sticky header */
main > section[id]{scroll-margin-block-start:84px}

/* the card cue is a span, so the whole card drives its hover state */
a.card:hover .link-arrow,a.scard:hover .link-arrow{color:var(--navy)}
a.card:hover .link-arrow svg,a.scard:hover .link-arrow svg{transform:translateX(3px)}
html[dir="rtl"] a.card:hover .link-arrow svg,
html[dir="rtl"] a.scard:hover .link-arrow svg{transform:scaleX(-1) translateX(3px)}
/* D-P1-4, re-verified on the v8.17 palette: --orange-ink fails on navy, so
   text links on every navy surface use --orange (4.59 on --navy, 5.86 on
   --navy-900) and go white on hover. */
.section--dark .link-arrow,.section--navy .link-arrow,
.card--dark .link-arrow,.scard .link-arrow,.cta .link-arrow{color:var(--orange)}
.section--dark .link-arrow:hover,.section--navy .link-arrow:hover{color:#fff}
a.card--dark:hover .link-arrow,a.scard:hover .link-arrow{color:#fff}

/* visually hidden but available to assistive technology */
.sr-only{
  position:absolute!important;inline-size:1px;block-size:1px;
  padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0
}

/* ================= grouped navigation ================= */
.nav__list{list-style:none;display:flex;align-items:center;gap:clamp(.35rem,-.5rem + 1.5vw,1.25rem)}
.nav__item--group{position:relative}
.nav__link--group{
  display:inline-flex;align-items:center;gap:var(--s2);min-block-size:var(--tap);
  border:0;background:none;cursor:pointer;padding:0 .1em;
  font-size:var(--step--1);font-weight:500;color:var(--ink-2);white-space:nowrap
}
.nav__link--group[aria-current="true"]{color:var(--navy);font-weight:600}
.nav__caret{transition:transform var(--t);flex:none}
.nav__link--group[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}
.navmenu{
  position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:calc(-1 * var(--s4));
  z-index:130;min-inline-size:330px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-2);padding:var(--s3)
}
.navmenu[hidden]{display:none}
.navmenu__list{list-style:none;display:grid;gap:2px}
.navmenu__list a{display:grid;gap:2px;padding:.65em .7em;border-radius:2px}
.navmenu__list a:hover{background:var(--paper)}
.navmenu__t{font-size:var(--step-0);font-weight:600;color:var(--navy)}
.navmenu__d{font-size:var(--step--1);color:var(--ink-2);line-height:1.45}
.navmenu__list a[aria-current="page"] .navmenu__t{color:var(--orange-ink)}
.navmenu__all{
  display:flex!important;align-items:center;gap:var(--s2);
  font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);border-block-end:1px solid var(--line);
  border-radius:0!important;margin-block-end:var(--s2);padding-block-end:.7em!important
}
html[lang="ar"] .navmenu__all{letter-spacing:0;text-transform:none}
.navmenu__all:hover{background:transparent!important;color:var(--navy)}
html[dir="rtl"] .navmenu__all svg{transform:scaleX(-1)}

.mobile-nav__grouphead{
  padding:var(--s6) 0 var(--s2);border:0!important;
  font-size:var(--step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-3)
}
html[lang="ar"] .mobile-nav__grouphead{letter-spacing:0;text-transform:none}
.mobile-nav__child a{padding-inline-start:var(--s4)}
.mobile-nav__child a::before{
  content:"";position:absolute;inset-inline-start:0;inline-size:2px;block-size:1.1em;
  background:var(--line-dark)
}
.mobile-nav__child{position:relative}

/* ================= scope questionnaire ================= */
.scope{display:grid;gap:0;border-block-start:1px solid var(--line)}
.scope__row{
  display:grid;gap:var(--s2) var(--s6);padding-block:var(--s5);
  border-block-end:1px solid var(--line)
}
@media (min-width:820px){.scope__row{grid-template-columns:22rem 1fr;align-items:baseline}}
.scope__q{display:flex;gap:var(--s3);align-items:flex-start;font-weight:600;color:var(--navy)}
.scope__q svg{flex:none;margin-block-start:.3em;color:var(--orange)}
.scope__a{margin:0;color:var(--ink-2)}
.section--dark .scope,.section--dark .scope__row{border-color:var(--line-dark)}
.section--dark .scope__q{color:#fff}
.section--dark .scope__a{color:var(--on-dark-2)}
.scope__lab{
  font-size:var(--step--1);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2)
}
html[lang="ar"] .scope__lab{letter-spacing:0;text-transform:none}

/* ================= cross-division links ================= */
.crosslinks{display:grid;gap:var(--s4)}
@media (min-width:760px){.crosslinks{grid-template-columns:repeat(3,1fr)}}
.crosslink{
  display:grid;gap:var(--s2);padding:var(--s5);
  background:#ffffff0d;border:1px solid var(--line-dark);border-radius:var(--radius);
  transition:border-color var(--t),background var(--t),transform var(--t)
}
.crosslink:hover{border-color:#ffffff40;background:#ffffff14;transform:translateY(-2px)}
.crosslink__t{
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--step-1);font-weight:600;color:#fff
}
.crosslink__t svg{flex:none;color:var(--orange);transition:transform var(--t)}
.crosslink:hover .crosslink__t svg{transform:translateX(3px)}
html[dir="rtl"] .crosslink__t svg{transform:scaleX(-1)}
html[dir="rtl"] .crosslink:hover .crosslink__t svg{transform:scaleX(-1) translateX(3px)}
.crosslink__b{color:var(--on-dark-2);font-size:var(--step-0)}

/* ================= radios / enquiry type ================= */
.field--radios{border:0;padding:0;margin:0}
.field--radios legend{
  padding:0;margin-block-end:var(--s3);
  font-size:var(--step-ui);font-weight:600;color:var(--ink)
}
.radios{
  display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))
}
.radio{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:.75em .9em;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:#fff;cursor:pointer;font-size:var(--step-ui);min-block-size:var(--tap);
  transition:border-color var(--t),background var(--t)
}
.radio:hover{border-color:var(--navy)}
.radio input{
  flex:none;inline-size:auto;padding:0;margin:.15em 0 0;
  accent-color:var(--orange);border:0;background:none
}
.radio span{min-inline-size:0;overflow-wrap:break-word}
.radio:has(input:checked){border-color:var(--orange);background:var(--orange-soft)}
.radio:has(input:focus-visible){box-shadow:var(--ring)}

/* ================= misc additions ================= */
.domain__icon{display:inline-flex;color:var(--navy)}
.linklist{list-style:none;display:grid;gap:var(--s3)}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.facts{display:grid;gap:0;border-block-start:1px solid var(--line)}
.factrow{
  display:grid;grid-template-columns:1fr 1.4fr;gap:var(--s4);
  padding-block:var(--s4);border-block-end:1px solid var(--line);font-size:var(--step--1)
}
.factrow dt{color:var(--ink-2);font-weight:600}
.factrow dd{margin:0;color:var(--ink)}
/* credits rows: keep licence and "· Source" whole; stack label over value on phones */
.credit__lic,.credit__src{white-space:nowrap}
@media (max-width:599.98px){.factrow--credit{grid-template-columns:1fr;gap:var(--s1)}}
.project__meta{
  font-size:var(--step--1);color:var(--ink-2);letter-spacing:.02em;margin-block-end:var(--s1)
}
.project__shot{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.project__shot img{inline-size:100%;block-size:auto;display:block}

/* ---------- WCAG 2.2 SC 2.5.8: minimum 24px activation area ----------
   Text links inside navigational lists (footer, breadcrumb, link lists and
   office contact rows) were 19-23px tall. Giving them an explicit minimum
   keeps them comfortably tappable without changing the visual rhythm. */
/* raised from 24px to the full 44px for SPEC P4.8: every link, button and
   control is a 44x44 target, footer and breadcrumb included. */
.footer ul a,
.footer__legal a,
.breadcrumb a,
.breadcrumb [aria-current="page"],
.linklist a,
.office__meta a,
.lang__list a,
.mobile-nav__langs a,
.contactrow a{
  display:inline-flex;align-items:center;
  min-block-size:var(--tap)
}
.office__meta li{min-block-size:var(--tap);align-items:center}
.office__meta svg{margin-block-start:0}
/* the breadcrumb bar keeps its rhythm: the 44px target overhangs the padding */
.breadcrumb{padding-block:2px}
.breadcrumb a,.breadcrumb [aria-current="page"]{padding-block:2px}
.footer ul{gap:0}

/* ---------- WCAG AA contrast corrections (verified numerically) ----------
   Found by qa/contrast.html, which composites the real rendered colours.
   - .hero is not .section--dark, so its eyebrow was inheriting the
     dark-on-light orange ink: 2.25:1. Now 6.32:1.
   - .muted in the footer was the light-theme grey on navy: 3.64:1 -> 6.45:1.
   - breadcrumb links were 4.32:1 on the paper bar -> 7.19:1.
   - the 01/02 list numerals were orange on white: 2.67:1 -> 7.52:1, while the
     dark sections keep the brighter orange at 6.32:1. */
/* every navy surface -- hero, pagehead, cta -- needs the bright orange */
.hero .eyebrow,.pagehead .eyebrow,.cta .eyebrow{color:var(--orange)}
.footer .muted{color:var(--on-dark-3)}
.breadcrumb a{color:var(--ink-2)}
.caps__n{color:var(--orange-ink)}
.section--dark .caps__n,.section--navy .caps__n,.hero .caps__n,
.pagehead .caps__n,.cta .caps__n{color:var(--orange)}
.card__num{color:var(--orange-ink)}
.card--dark .card__num{color:var(--orange)}
.section--dark .loc__list svg,.section--navy .loc__list svg{color:var(--orange)}

/* ================= photographic bands =================
   Every photograph sits under a heavy navy overlay. Three reasons:
   1. white text stays well above WCAG AA on any image;
   2. the photographs read as art direction rather than as evidence of a
      specific MARAS project, which stand-in imagery must never imply;
   3. it makes five different photographs look like one consistent system. */
/* Explicit positive layering. A negative z-index put the photograph behind
   the section's own opaque background, which painted it out entirely. */
.media{position:absolute;inset:0;z-index:0;overflow:hidden}
.media picture{display:block;block-size:100%}
.media__img{inline-size:100%;block-size:100%;object-fit:cover;object-position:center}
.media::after{
  content:"";position:absolute;inset:0;
  /* v8.17 design-system section 3. Three layers: a top scrim under the sticky
     header, the profile's own lower gradient, and a leading-edge wash where
     the text sits. Verified against the real pixels by qa/photo-contrast.html:
     the worst pixel under every text node clears 4.5:1. */
  background:
    linear-gradient(to bottom,rgba(20,28,48,.55) 0%,rgba(20,28,48,0) 32%),
    linear-gradient(to top,rgba(20,28,48,.92) 0%,rgba(31,46,82,.50) 35%,rgba(31,46,82,0) 70%),
    linear-gradient(90deg,rgba(20,28,48,.93) 0%,rgba(31,46,82,.88) 42%,rgba(31,46,82,.55) 66%,rgba(31,46,82,.18) 100%);
}
/* The gradient mirrors in RTL; the PHOTOGRAPH never does. */
html[dir="rtl"] .media::after{
  background:
    linear-gradient(to bottom,rgba(20,28,48,.55) 0%,rgba(20,28,48,0) 32%),
    linear-gradient(to top,rgba(20,28,48,.92) 0%,rgba(31,46,82,.50) 35%,rgba(31,46,82,0) 70%),
    linear-gradient(270deg,rgba(20,28,48,.93) 0%,rgba(31,46,82,.88) 42%,rgba(31,46,82,.55) 66%,rgba(31,46,82,.18) 100%);
}
/* below 760 the text runs the full width, so the wash becomes vertical only */
/* Below 760 the text runs the FULL width of the band and starts near its
   top, where a horizontal wash contributes nothing, so the phone gets one
   vertical wash that stays heavy all the way up. Measured per text node by
   qa/photo-contrast.html: at .60/.45 the 13px eyebrow and the breadcrumb
   came in at 3.86-4.49:1 against white. */
@media (max-width:759.98px){
  .media::after,html[dir="rtl"] .media::after{
    background:linear-gradient(to top,
      rgba(20,28,48,.96) 0%,rgba(31,46,82,.90) 50%,
      rgba(31,46,82,.80) 80%,rgba(31,46,82,.74) 100%)
  }
}
/* a thin orange rule ties the bands to the brand */
.has-media{position:relative;isolation:isolate;overflow:hidden}
/* content sits above the photograph */
.has-media > .wrap{position:relative;z-index:2}
.has-media::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;
  block-size:4px;background:var(--orange);z-index:3
}
.pagehead.has-media{background:var(--navy-900)}
@media (prefers-reduced-motion:no-preference){
  .media__img{will-change:auto}
}

/* A page head carrying a photograph needs room for it to register, and the
   text reads better sitting at the foot of the band. */
.pagehead.has-media{
  padding-block:var(--s9) var(--s8);
  min-block-size:clamp(360px,20vw + 260px,520px);
  display:flex;align-items:flex-end
}
.pagehead.has-media > .wrap{inline-size:100%}
.pagehead.has-media h1{font-size:var(--step-5)}

/* ================= labelled capability lists =================
   The company profile lists capabilities as short labels rather than described
   services, so the site renders them the same way instead of inventing a
   sentence for each one. */
.labl{list-style:none;display:grid;gap:var(--s3)}
@media (min-width:620px){.labl--3,.labl--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){
  .labl--3{grid-template-columns:repeat(3,1fr)}
  .labl--4{grid-template-columns:repeat(4,1fr)}
}
.labl__item{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s4);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  font-weight:500;color:var(--ink);line-height:1.35;
  transition:border-color var(--t),box-shadow var(--t)
}
.labl__item:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1)}
.labl__item svg{flex:none;color:var(--orange)}
.section--paper .labl__item{background:#fff}
.section--dark .labl__item{
  background:#ffffff0d;border-color:var(--line-dark);color:var(--on-dark)
}
.section--dark .labl__item:hover{border-color:#ffffff33;box-shadow:none}
.labl__item--card{padding:var(--s5) var(--s5);font-size:var(--step-1)}
.labl__item{min-block-size:var(--tap)}

/* ================= customs coverage =================  */
.locs{display:grid;gap:var(--s5)}
@media (min-width:700px){.locs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.locs{grid-template-columns:repeat(3,1fr)}}
.loc{padding:var(--s5);background:#ffffff0d;border:1px solid var(--line-dark);
     border-radius:var(--radius)}
.loc__c{
  font-size:var(--step--1);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--orange);margin-block-end:var(--s3)
}
html[lang="ar"] .loc__c{letter-spacing:0;text-transform:none}
.loc__list{list-style:none;display:grid;gap:var(--s2)}
.loc__list li{display:flex;gap:var(--s2);align-items:flex-start;color:#fff}
.loc__list svg{flex:none;margin-block-start:.3em;color:var(--orange)}

/* ================= named projects =================  */
.projs{list-style:none;display:grid;gap:0;border-block-start:1px solid var(--line)}
.proj{
  display:grid;gap:var(--s2) var(--s5);align-items:baseline;
  padding-block:var(--s5);border-block-end:1px solid var(--line)
}
@media (min-width:760px){.proj{grid-template-columns:3.5rem 1fr auto}}
/* orange-on-white is 2.67:1; the darker ink is 7.52:1 */
.proj__n{font-family:var(--font-display);font-weight:700;color:var(--orange-ink);
         font-variant-numeric:tabular-nums;font-size:var(--step-0);letter-spacing:.04em}
.section--dark .proj__n{color:var(--orange)}
.proj__t{font-size:var(--step-2);font-weight:600;color:var(--navy)}
.proj__l{display:inline-flex;align-items:center;gap:var(--s2);
         font-size:var(--step-ui);color:var(--ink-2)}
.proj__l svg{flex:none;color:var(--orange-ink)}

/* ================= ISO badge =================
   1.5px orange border, orange check mark, and the text exactly ONCE: the
   label already reads "ISO 9001 certified", so nothing repeats it. */
.isobadge{
  display:inline-flex;align-items:center;gap:var(--s3);min-block-size:var(--tap);
  padding:10px 16px;border:1.5px solid var(--orange);border-radius:var(--radius);
  font-size:var(--step-ui);font-weight:600;color:var(--ink);background:transparent
}
.isobadge svg{flex:none;color:var(--orange-ink)}
.section--dark .isobadge,.section--navy .isobadge,.isobadge--dark{color:#fff}
.section--dark .isobadge svg,.section--navy .isobadge svg,.isobadge--dark svg{color:var(--orange)}

/* ================= office HQ badge =================  */
/* 13px, the production floor -- this was 12px in Phase 1 */
.office__hq,.corridor__hq{
  display:inline-block;padding:3px 8px;border-radius:var(--radius);
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase
}
html[lang="ar"] .office__hq,html[lang="ar"] .corridor__hq{
  letter-spacing:0;text-transform:none;font-size:14px
}
.office__hq{background:var(--orange-soft);color:var(--orange-ink);margin-inline-start:auto}
.corridor__hq{background:var(--orange);color:var(--on-orange);margin-inline-start:var(--s3)}
.corridor--row .corridor__hq{margin-inline-start:0;margin-block:2px 4px;align-self:start;justify-self:start}
.office__flagrow{inline-size:100%}

/* ============================================================
   PHASE 4 COMPONENTS (SPEC P4.3)
   Ported from the design mockup's mock.css, re-expressed against this
   stylesheet's tokens and logical properties. No left/right in new CSS.
   ============================================================ */

/* ---------- stat band (H2) ----------
   Four figures, each traceable to a list printed in v8.17. The numerals stay
   Latin digits in Arabic (as the profile does, and as the phone number and
   the ISO number already do), so each figure carries dir="ltr". */
.stats{background:var(--navy);color:var(--on-dark-2)}
.stats__list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:960px){.stats__list{grid-template-columns:repeat(4,1fr)}}
.stat{
  display:grid;gap:6px;align-content:start;
  padding:var(--s6) var(--s5);border-inline-start:1px solid var(--navy-line)
}
.stats__list li:first-child{border-inline-start:0;padding-inline-start:0}
@media (max-width:959.98px){
  .stat{padding:var(--s5) var(--s4)}
  .stats__list li:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .stats__list li:nth-child(n+3){border-block-start:1px solid var(--navy-line)}
}
.stat__n{
  font-family:var(--font-display);font-weight:700;font-size:var(--step-stat);
  line-height:1;color:#fff
}
/* Arabic keeps the Latin digits but never a condensed face */
html[lang="ar"] .stat__n{font-family:var(--font-ar);font-weight:600}
.stat__n--iso{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem)}
.stat__l{font-size:var(--step-ui);line-height:1.45;color:var(--on-dark-2)}

/* ---------- service photo card (H4) ----------
   The whole card is the link: one anchor per card, never a nested one. */
.scards{display:grid;gap:var(--s5)}
@media (min-width:760px){.scards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.scards{grid-template-columns:repeat(4,1fr)}}
.scard{
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid var(--navy-line);border-radius:var(--radius-lg);
  transition:border-color var(--t),transform var(--t)
}
.scard:hover{border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.scard__ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.scard__ph picture{display:block;block-size:100%}
.scard__ph img{inline-size:100%;block-size:100%;object-fit:cover}
.scard__ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,28,48,.80) 0%,rgba(31,46,82,.25) 45%,rgba(31,46,82,0) 70%)
}
.scard__n{
  position:absolute;inset-block-end:12px;inset-inline-start:16px;z-index:2;
  font-family:var(--font-display);font-weight:700;font-size:var(--step-1);
  letter-spacing:.04em;color:var(--orange)
}
html[lang="ar"] .scard__n{font-family:var(--font-ar)}
.scard__b{display:flex;flex-direction:column;gap:10px;padding:var(--s5);flex:1}
.scard h3{font-size:var(--step-2);color:#fff}
.scard p{font-size:var(--step-ui);color:var(--on-dark-2);line-height:1.55}
.scard .link-arrow{margin-block-start:auto}
@media (max-width:759.98px){
  .scard{flex-direction:row}
  .scard__ph{aspect-ratio:auto;inline-size:112px;flex:none}
  .scard__b{padding:var(--s4);gap:6px}
  .scard p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---------- numbered list (H5, v8.17 p14) ---------- */
.nlist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--s5)}
@media (min-width:960px){.nlist{grid-template-columns:repeat(4,1fr);column-gap:var(--s6)}}
.nlist li{
  display:flex;align-items:baseline;gap:14px;min-block-size:var(--tap);
  padding-block:18px;border-block-start:1px solid var(--line);
  font-weight:500;font-size:var(--step-0);color:var(--ink)
}
.nlist__n{
  font-family:var(--font-display);font-weight:700;color:var(--orange-ink);
  font-size:var(--step-0);min-inline-size:1.7em;font-variant-numeric:tabular-nums
}
html[lang="ar"] .nlist__n{font-family:var(--font-ar)}
.section--dark .nlist li,.section--navy .nlist li{border-color:var(--navy-line);color:#fff}
.section--dark .nlist__n,.section--navy .nlist__n{color:var(--orange)}

/* ---------- QHSE band (H6, v8.17 p16) ----------
   The big marks are aria-hidden decoration: the label under each one carries
   the meaning. In Arabic the four words ARE the marks, because an Arabic
   Q/H/S/E initialism would be meaningless. */
.qhse{display:grid;gap:var(--s8)}
@media (min-width:960px){.qhse{grid-template-columns:1.05fr 1fr;align-items:center;gap:var(--s10)}}
.qhse__letters{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.qhse__letters li{border-block-start:4px solid var(--orange);padding-block-start:var(--s4)}
.qhse__mark{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(3.25rem,2rem + 5vw,6.5rem);line-height:.9;color:#fff
}
html[lang="ar"] .qhse__mark{
  font-family:var(--font-ar);font-weight:600;
  font-size:clamp(1.125rem,.8rem + 1.2vw,1.75rem);line-height:1.35
}
.qhse__l{
  display:block;margin-block-start:10px;font-size:var(--step--1);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)
}
html[lang="ar"] .qhse__l{letter-spacing:0;text-transform:none;font-size:var(--step-ui)}
/* in Arabic the word is already the mark, so it is not repeated underneath */
html[lang="ar"] .qhse__letters .qhse__l{
  position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)
}
.qhse__body h2{margin-block:var(--s4) var(--s5)}
.qhse__body p+p{margin-block-start:var(--s4)}
.qhse__body .isobadge{margin-block-start:var(--s6)}
@media (max-width:559.98px){
  .qhse__letters{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}
}

/* ---------- leadership (H7, v8.17 p2) ----------
   No-clearance state: no portrait element at all, so the block is a single
   column of name / role / quote. structure.LEADER_PORTRAITS drives the
   two-column variant the day the portraits are cleared. */
.leaders{display:grid;gap:var(--s7)}
@media (min-width:960px){.leaders{grid-template-columns:1fr 1fr;gap:var(--s9)}}
.leader{display:grid;gap:var(--s4);align-content:start}
.leader--portrait{grid-template-columns:120px 1fr;gap:var(--s5);align-items:start}
@media (min-width:760px){.leader--portrait{grid-template-columns:180px 1fr;gap:var(--s6)}}
.leader__portrait{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy)}
.leader__portrait img{inline-size:100%;block-size:100%;object-fit:cover}
.leader h3{font-size:var(--step-2);text-transform:uppercase;letter-spacing:.02em;color:var(--navy)}
html[lang="ar"] .leader h3{text-transform:none;letter-spacing:0}
.section--dark .leader h3,.section--navy .leader h3{color:#fff}
.leader__role{font-size:var(--step-ui);font-weight:600;color:var(--orange-ink);margin-block-start:4px}
.section--dark .leader__role,.section--navy .leader__role{color:var(--orange)}
.leader blockquote{
  margin:0;padding-inline-start:var(--s4);border-inline-start:3px solid var(--orange);
  font-size:var(--step-0);line-height:1.65;color:var(--ink-2)
}
html[lang="ar"] .leader blockquote{line-height:1.85}
.section--dark .leader blockquote,.section--navy .leader blockquote{color:var(--on-dark-2)}

/* ---------- project card (H8 / PR2) ---------- */
.pcards{display:grid;gap:var(--s5)}
@media (min-width:760px){.pcards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.pcards--4{grid-template-columns:repeat(4,1fr)}}
.pcard{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg)
}
.section--dark .pcard,.section--navy .pcard{
  background:rgba(255,255,255,.03);border-color:var(--navy-line)
}
.pcard__ph{
  position:relative;aspect-ratio:3/2;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-900) 100%)
}
.pcard__ph picture{display:block;block-size:100%}
.pcard__ph img{inline-size:100%;block-size:100%;object-fit:cover}
.pcard__ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,28,48,.70) 0%,rgba(31,46,82,.15) 50%,rgba(31,46,82,0) 75%)
}
.pcard__n{
  position:absolute;inset-block-start:14px;inset-inline-start:16px;z-index:2;
  font-family:var(--font-display);font-weight:700;font-size:var(--step-1);color:var(--orange)
}
html[lang="ar"] .pcard__n{font-family:var(--font-ar)}
.pcard__b{padding:var(--s5);display:grid;gap:8px;align-content:start}
.pcard h3{font-size:var(--step-2);color:var(--ink)}
.section--dark .pcard h3,.section--navy .pcard h3{color:#fff}
.pcard__loc{display:flex;align-items:center;gap:8px;font-size:var(--step-ui);color:var(--ink-2)}
.section--dark .pcard__loc,.section--navy .pcard__loc{color:var(--on-dark-2)}
.pcard__loc svg{flex:none;color:var(--orange-ink)}
.section--dark .pcard__loc svg,.section--navy .pcard__loc svg{color:var(--orange)}
/* the projects page shows them large, 2x2, at 16:9 */
.pcards--lg .pcard__ph{aspect-ratio:16/9}
.pcards--lg .pcard h3{font-size:var(--step-3)}
/* the home teaser collapses to compact rows on a phone so the page stays short */
@media (max-width:759.98px){
  .pcards--4 .pcard{flex-direction:row;align-items:stretch}
  .pcards--4 .pcard__ph{aspect-ratio:auto;inline-size:112px;flex:none}
  .pcards--4 .pcard__n{inset-block-start:8px;inset-inline-start:10px}
  .pcards--4 .pcard__b{padding:var(--s4)}
}

/* ---------- client logo wall (H9, v8.17 p18) ----------
   Rendered only for a client with WRITTEN web permission; with none cleared
   the section is absent entirely rather than showing an empty heading.
   Logos keep their own colours -- no forced greyscale. */
.wall{
  list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  border-block-start:1px solid var(--line);border-inline-start:1px solid var(--line)
}
@media (min-width:760px){.wall{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.wall{grid-template-columns:repeat(6,1fr)}}
.wall li{
  aspect-ratio:3/2;display:grid;place-items:center;padding:var(--s5);background:#fff;
  border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line)
}
.wall img{max-inline-size:70%;max-block-size:50%;inline-size:auto;block-size:auto;object-fit:contain}

/* ---------- RTL: arrows and gradients mirror, artwork never does ---------- */
html[dir="rtl"] .scard__ph img,
html[dir="rtl"] .pcard__ph img,
html[dir="rtl"] .media__img,
html[dir="rtl"] .leader__portrait img,
html[dir="rtl"] .wall img,
html[dir="rtl"] .brand__logo,
html[dir="rtl"] .footer__logo,
html[dir="rtl"] .qhse__mark,
html[dir="rtl"] .stat__n{transform:none}

/* ---------- index numerals over photographs ----------
   A numeral sitting directly on a photograph is at the mercy of whatever is
   under it: --orange over the bright end of a card photo measures about
   3.8:1, which clears the large-text threshold at the 20px desktop size and
   fails the 4.5:1 body threshold at 390. The numeral therefore sits on a
   solid --navy-950 plate, which is 7.44:1 against --orange over every
   photograph, and reads as the index plate the printed profile uses. */
.scard__n,.pcard__n{
  background:var(--navy-950);padding:2px 9px;border-radius:var(--radius);
  line-height:1.25
}

/* ============================================================
   Gate fixes, measured in the browser (tools/gate.py)
   ============================================================ */

/* ---------- text over a photograph is white ----------
   --orange is a LIGHT colour (relative luminance .386), so on the lighter
   half of a photographic band it measures 2.4:1 against the 13px eyebrow --
   the opposite way round from flat navy, where it is 4.59-5.86:1. Over a
   photograph every text node is therefore white (5.7:1 at the same worst
   pixel) and the accent is carried by the 32x2px orange rule, which is
   decoration rather than text. Measured per text node, per glyph box, by
   qa/photo-contrast.html. */
.has-media .eyebrow{color:#fff}
.has-media .eyebrow::before{background:var(--orange)}
.has-media .lede,
.hero.has-media .hero__lede,
.cta.has-media p{color:#fff}
.pagehead.has-media .breadcrumb ol,
.pagehead.has-media .breadcrumb a,
.pagehead.has-media .breadcrumb [aria-current="page"],
.pagehead.has-media .breadcrumb li+li::before{color:#fff}

/* ---------- 44x44 targets ---------- */
.brand{min-block-size:var(--tap)}
.footer ul a,
.footer__legal a,
.breadcrumb a,
.breadcrumb [aria-current="page"],
.linklist a,
.office__meta a,
.lang__list a,
.mobile-nav__langs a,
.contactrow a{min-inline-size:var(--tap);justify-content:flex-start}
/* Links that sit INSIDE a line of prose keep their line box -- the padding
   grows the hit area and the equal negative margin takes the space back, so
   the paragraph's rhythm is unchanged while the target is a full 44px. */
.prose a,
.factrow dd a,
.factrow dt a{
  display:inline-flex;align-items:center;
  padding-block:12px;margin-block:-12px
}

/* ---------- long unbreakable tokens ----------
   The Turkish industrial copy carries "(upstream/midstream/downstream)",
   a 31-character run with no break opportunity, which pushed a four-column
   card past the viewport at 390 and overflowed it at 1440. */
.scard__b,.pcard__b{min-inline-size:0}
.scard p,.scard h3,.card p,.pcard h3,.lede,.prose p,.nlist li{overflow-wrap:break-word}

/* ---------- remaining 44px targets ---------- */
.nav__link,.nav__link--group{min-inline-size:var(--tap);justify-content:center}
.factrow dd a,.factrow dt a,.prose a{min-inline-size:var(--tap)}

/* ---------- mobile density of the two tallest navy bands ----------
   At 390 the hero fills its band from its content, so the 96/72 desktop
   padding just makes a very tall navy block; 56/44 keeps the same rhythm on
   a phone and takes ~70px off the page. */
@media (max-width:759.98px){
  .hero__inner{padding-block:var(--s8) var(--s7)}
  .footer{padding-block:var(--s8) var(--s6)}
  .footer__grid{gap:var(--s6)}
}

/* ---------- home projects teaser on paper ----------
   SPEC H8 puts the teaser on section--dark. It is on --paper instead: the
   Clients band (H9) is the one light band between the leadership block and
   the offices corridor, and with D-CLR leaving CLIENTS empty it is absent
   entirely, which pushed the navy share of the home page to 77-79% against
   the 60-70% the mockup was measured at. Moving the teaser to paper restores
   the light-band count the target was measured with, and it also makes the
   white project cards on the home page match the ones on /projects/. */
.section--paper .pcard{background:#fff;border-color:var(--line)}

/* ---------- header brand tag ----------
   At the 13px production floor the Turkish wording set four lines inside an
   82px bar. Two lines fit; the tag therefore gets room for two and only
   appears from 1280px, the width at which the header CTA appears too. */
/* px, not ch: the ch unit is the width of "0", and this text is uppercase
   with +0.05em tracking, so 26ch measured ~25% narrower than it sets. */
.brand__tag{max-inline-size:250px;display:none}
html[lang="ar"] .brand__tag{max-inline-size:210px}
@media (min-width:1180px){.brand__tag,.brand__rule{display:none}}
@media (min-width:1280px){.brand__tag{display:block}.brand__rule{display:block}}
.is-home .brand__tag,.is-home .brand__rule{display:none}

/* ---------- CTA band ----------
   Stacked, as the mockup sets it: heading, body, then the button row, all on
   the leading edge over the photograph, rather than the buttons floating in
   a second column. */
.cta.has-media .cta__inner{grid-template-columns:1fr;gap:var(--s6);justify-items:start}
.cta.has-media .btn-row{margin-block-start:0}