/* ==========================================================================
   AL MUNDHIR (MTC) — DESIGN SYSTEM
   One shared stylesheet. Every page is a copy of the approved template.
   Written with CSS logical properties throughout so the /ar/ RTL mirror
   (css/rtl.css, Phase 4) needs minimal overrides — not left/right hacks.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Brand — sampled from the approved logo. Do not alter without sign-off. */
  --color-navy: #1D2935;
  --color-navy-700: #263544;
  --color-navy-600: #324457;
  --color-amber: #D38C3C;
  --color-amber-600: #B36F27;
  /* Text-safe amber. #B36F27 measures only 4.02:1 on white and 3.71:1 on
     paper — both fail body text. This darker tone clears 4.5:1 on white,
     paper AND paper-dim. Use it for ANY amber-coloured text on a light
     background; keep --color-amber for fills, rules and icons only. */
  --color-amber-text: #9A5C1A;

  /* Neutrals — cool "drawing paper", not warm cream, to stay off-template */
  --color-white: #FFFFFF;
  --color-paper: #F5F6F5;
  --color-paper-dim: #ECEEF0;
  --color-border: #DCE1E6;
  --color-border-on-navy: rgba(255,255,255,0.14);
  --color-slate: #4A5568;         /* secondary text on light bg — 7.5:1 */
  --color-muted-on-navy: #A9B4C0; /* secondary text on navy bg */

  /* IMPORTANT — contrast-tested, see CLAIM-REGISTER / build notes:
     amber on white/paper = 2.77:1, FAILS text contrast at any size.
     amber is decorative-only on light backgrounds (icons, rules, dots).
     amber on navy = 5.34:1, PASSES — safe as text on dark sections.
     navy on amber = 5.34:1, PASSES — safe for badges/buttons (navy text
     on an amber fill). Never white text on an amber fill. */

  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --container-max: 1220px;
  --container-pad: var(--space-5);

  --nav-height: 76px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{ margin: 0; }
img, picture, svg{ display: block; max-width: 100%; }
img{ height: auto; }
h1,h2,h3,h4,h5,h6,p,figure{ margin: 0; }
ul,ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a{ color: inherit; text-decoration: none; }
input,textarea,select{ font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Base typography ---------- */
body{
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-navy);
  background: var(--color-white);
  font-feature-settings: "cv11", "ss01";
  /* Sticky footer: keeps the footer at the viewport bottom on short pages
     (thank-you, 404) instead of floating mid-page, while having no effect
     on normal content-heavy pages that already exceed viewport height. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main{ flex: 1 0 auto; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}

h1{ font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3{ font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
h4{ font-size: 1.05rem; }

p{ color: var(--color-slate); }
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--color-slate); line-height: 1.6; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-amber-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before{
  content: "";
  width: 5px; height: 5px;
  background: var(--color-amber);
  border-radius: 1px;
  display: inline-block;
  flex: none;
}
.eyebrow.on-dark{ color: var(--color-amber); }

.stat-figure{
  font-family: var(--font-mono);
  font-weight: 500;
}

/* ---------- Layout primitives ---------- */
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section{ padding-block: var(--space-9); }
.section--tight{ padding-block: var(--space-7); }
.section--navy{ background: var(--color-navy); color: var(--color-white); }
.section--navy p{ color: var(--color-muted-on-navy); }
.section--navy h2, .section--navy h3{ color: var(--color-white); }
.section--paper{ background: var(--color-paper); }

.section-head{
  max-width: 640px;
  margin-block-end: var(--space-7);
}
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head h2{ margin-block-start: var(--space-3); }

.grid{
  display: grid;
  gap: var(--space-5);
}
/* Every grid item gets min-width:0 — grid items default to min-width:auto
   and refuse to shrink below their content, which is what caused a real
   overflow at 320px on the last build. Non-negotiable. */
.grid > *{ min-width: 0; }

.grid-2{ grid-template-columns: repeat(1, 1fr); }
.grid-3{ grid-template-columns: repeat(1, 1fr); }
.grid-4{ grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px){
  .grid-2{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
  .grid-4{ grid-template-columns: repeat(4, 1fr); }
}

.blueprint-grid{
  background-image:
    linear-gradient(var(--color-border-on-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-on-navy) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline: 2px solid var(--color-amber); outline-offset: 2px; }
.btn--primary{ background: var(--color-amber); color: var(--color-navy); box-shadow: 0 1px 0 rgba(29,41,53,0.08); }
.btn--primary:hover{ background: var(--color-amber-600); box-shadow: 0 4px 12px rgba(179,111,39,0.35); }
.btn--outline-dark{ border-color: var(--color-navy); color: var(--color-navy); }
.btn--outline-dark:hover{ background: var(--color-navy); color: var(--color-white); }
.btn--outline-light{ border-color: var(--color-border-on-navy); color: var(--color-white); }
.btn--outline-light:hover{ background: var(--color-white); color: var(--color-navy); border-color: var(--color-white); }
.btn--block{ width: 100%; }

/* ---------- Header / nav ---------- */
.site-header{
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--color-white);
  border-block-end: 1px solid var(--color-border);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--nav-height);
}
.nav-logo{ display: flex; align-items: center; }
.nav-logo{ display: flex; align-items: center; gap: var(--space-3); }
/* The approved logo is a stacked (icon-over-wordmark) mark — squeezing the
   full lockup into a 38px-tall nav bar would make the wordmark illegible.
   Standard practice for stacked marks: use the icon alone in tight nav/
   footer contexts, and set the name as real text — better for accessibility
   and SEO than baking it into a raster image, and it stays crisp at any
   zoom level, which an image wordmark does not. */
.nav-logo img{ block-size: 36px; inline-size: auto; }
.nav-logo .logo-text{ display: flex; flex-direction: column; line-height: 1.15; font-family: var(--font-display); }
.nav-logo .logo-text .name{ font-weight: 700; font-size: 0.92rem; color: var(--color-navy); letter-spacing: 0.01em; }
.nav-logo .logo-text .sub{ font-weight: 700; font-size: 0.68rem; color: var(--color-amber-text); letter-spacing: 0.1em; }

.nav-links{
  display: none;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
}
.nav-links a{
  padding-block: var(--space-2);
  border-block-end: 2px solid transparent;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ border-block-end-color: var(--color-amber); }

.nav-actions{ display: flex; align-items: center; gap: var(--space-3); }
.lang-toggle{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.lang-toggle:hover{ border-color: var(--color-navy); }

.nav-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-sm);
}
.nav-toggle:hover{ background: var(--color-paper); }
.nav-toggle .bar{
  position: relative;
  inline-size: 22px;
  block-size: 2px;
  background: var(--color-navy);
  display: block;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle .bar::before, .nav-toggle .bar::after{
  content: "";
  position: absolute;
  inline-size: 22px;
  block-size: 2px;
  background: var(--color-navy);
  inset-inline-start: 0;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle .bar::before{ transform: translateY(-7px); }
.nav-toggle .bar::after{ transform: translateY(7px); }
.nav-toggle[aria-expanded="true"] .bar{ background: transparent; }
.nav-toggle[aria-expanded="true"] .bar::before{ transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after{ transform: translateY(0) rotate(-45deg); }

/* Mobile menu panel — deliberately NOT using backdrop-filter on a fixed
   element (it creates a new containing block and breaks position:fixed
   children — that's what broke the last build's mobile nav). Solid
   background + explicit height instead. */
.mobile-panel{
  position: fixed;
  inset-inline: 0;
  inset-block-start: var(--nav-height);
  block-size: calc(100dvh - var(--nav-height));
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-6) var(--container-pad) var(--space-7);
  transform: translateX(100%);
  transition: transform 260ms var(--ease);
  z-index: 40;
  overflow-y: auto;
}
[dir="rtl"] .mobile-panel{ transform: translateX(-100%); }
.mobile-panel.is-open{ transform: translateX(0); }
.mobile-panel a{
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  display: block;
  padding-block: var(--space-3);
  min-height: 44px;
}
.mobile-panel .mobile-links{ border-block-start: 1px solid var(--color-border-on-navy); padding-block-start: var(--space-5); }
.mobile-panel .mobile-links a{ border-block-end: 1px solid var(--color-border-on-navy); }
.mobile-contact{ font-family: var(--font-mono); font-size: 0.9rem; color: var(--color-muted-on-navy); }
.mobile-contact a{ color: var(--color-amber); display: inline-block; padding-block: var(--space-1); min-height: 44px; display:flex; align-items:center; }

@media (min-width: 1024px){
  .nav-links{ display: flex; }
  .nav-toggle{ display: none; }
  .mobile-panel{ display: none; }
}

/* ---------- Skip link ---------- */
.skip-link{
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-4);
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 100;
  font-weight: 600;
  transition: inset-block-start 160ms var(--ease);
}
.skip-link:focus{ inset-block-start: var(--space-4); }

/* ---------- Focus states ---------- */
:focus{ outline: none; }
:focus-visible{
  outline: 2.5px solid var(--color-amber);
  outline-offset: 2px;
  border-radius: 2px;
}
.section--navy :focus-visible{ outline-color: var(--color-amber); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
  padding-block: var(--space-9) var(--space-8);
}
.hero-inner{
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-7);
}
.hero-copy{ max-width: 620px; }
.hero-copy h1{ color: var(--color-white); margin-block: var(--space-4) var(--space-5); }
.hero-copy .lede{ color: var(--color-muted-on-navy); max-width: 52ch; }
.hero-ctas{ display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-6); }
.hero-facts{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border-on-navy);
}
.hero-fact dt{ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-on-navy); }
.hero-fact dd{ margin: var(--space-1) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.hero-art{ position: relative; }
.hero-art svg{ width: 100%; height: auto; }

/* ---------- Five systems: sticky index, ported from the paused redesign's
   Services page (same .sys-* markup and behavior, reused verbatim for the
   actual five systems it was originally built for). Images sit in a fixed
   16:10 frame instead of full-bleed, so this reads as a reference list, not
   another hero moment. ---------- */
.sys-layout{
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 1000px){
  .sys-layout{ grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: var(--space-9); }
}
.sys-index{ align-self: start; }
@media (min-width: 1000px){
  .sys-index{ position: sticky; inset-block-start: calc(var(--nav-height) + var(--space-6)); }
}
.sys-index h2{ margin-block-start: var(--space-3); }
.sys-nav{ margin-block-start: var(--space-7); display: none; }
@media (min-width: 1000px){ .sys-nav{ display: block; } }
.sys-nav button{
  inline-size: 100%;
  text-align: start;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-slate);
  transition: color 160ms var(--ease);
}
.sys-nav button span{ font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; }
.sys-nav button em{
  font-style: normal;
  font-size: 1.05rem;
  display: inline-block;
  transition: transform 160ms var(--ease);
}
.sys-nav button:hover{ color: var(--color-navy); }
.sys-nav button[aria-current="true"]{ color: var(--color-navy); }
.sys-nav button[aria-current="true"] em{ transform: translateX(0.35rem); }
.sys-nav button[aria-current="true"] span{ color: var(--color-amber-text); }

.sys-flow{ display: grid; gap: var(--space-9); }
.sys-item{ scroll-margin-block-start: 8rem; }
.sys-figure{
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-paper-dim);
  border-radius: var(--radius-lg);
}
.sys-figure img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.sys-item:hover .sys-figure img{ transform: scale(1.03); }
.sys-body{ padding-block-start: var(--space-5); display: grid; gap: var(--space-3); }
.sys-kicker{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-amber-text);
}
.sys-item p{ color: var(--color-slate); max-inline-size: 52ch; }
.sys-ref{
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}

/* ---------- Five systems: navy theme ----------
   Contextual overrides layered on the base .sys-* component above, the same
   way .section--navy overrides base text colors elsewhere on the site. */
.systems{ background: var(--color-navy); }
.systems .eyebrow{ color: var(--color-amber); }
.systems .sys-index h2{ color: var(--color-white); }
.systems .sys-nav{ font-size: 1.05rem; }
.systems .sys-nav button{ color: var(--color-muted-on-navy); border-block-end-color: var(--color-border-on-navy); }
.systems .sys-nav button span{ font-size: 0.82rem; }
.systems .sys-nav button em{ font-size: 1.15rem; }
.systems .sys-nav button:hover,
.systems .sys-nav button[aria-current="true"]{ color: var(--color-white); }
.systems .sys-nav button[aria-current="true"] span{ color: var(--color-amber); }
.systems .sys-figure{ background: var(--color-navy-700); }
.systems .sys-body{
  padding: var(--space-6);
  background: var(--color-navy-700);
  border-radius: var(--radius-lg);
}
.systems .sys-kicker{ color: var(--color-amber); }
.systems .sys-item h3{ color: var(--color-white); }
.systems .sys-item p{ color: var(--color-muted-on-navy); }
.systems .sys-ref{ color: var(--color-white); border-block-start-color: var(--color-border-on-navy); }

/* ---------- Projects teaser: intro column beside a numbered list, rather
   than stacked above it ---------- */
.track-layout{
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 900px){
  .track-layout{
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: var(--space-9);
    align-items: start;
  }
}
.track-list{ display: grid; }
.track-card{
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--color-border);
  transition: background-color 160ms var(--ease);
}
.track-list .track-card:last-child{ border-block-end: 1px solid var(--color-border); }
.track-card:hover{ background: var(--color-paper); }
.track-card-num{
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-amber-text);
}
.track-card-body h3{ margin-block-start: var(--space-1); }
.track-card-body p:last-child{ margin-block-start: var(--space-2); font-size: 0.95rem; color: var(--color-slate); }

@media (min-width: 1024px){
  .hero-inner{ grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .hero-facts{ grid-template-columns: repeat(4, 1fr); }
}

/* Photographic hero has no side illustration — one column, taller, with the
   copy sitting lower so the image reads above it. */
.hero--photo{ padding-block: var(--space-10) var(--space-9); }
.hero--photo .hero-inner{ grid-template-columns: 1fr; }
.hero--photo .hero-copy{ max-width: 46rem; }
@media (min-width: 1024px){
  .hero--photo .hero-inner{ grid-template-columns: 1fr; }
}

/* ---------- Cards / pills ---------- */
.card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.card:hover{ border-color: var(--color-amber); }
.card .eyebrow{ margin-block-end: var(--space-3); }
.card h3{ margin-block-end: var(--space-2); }
.card p{ font-size: 0.95rem; }

.card--dark{
  background: var(--color-navy-700);
  border-color: var(--color-navy-600);
}
.card--dark h3{ color: var(--color-white); }
.card--dark p{ color: var(--color-muted-on-navy); }

.pill{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-4);
  min-height: 84px;
  border-radius: var(--radius-md);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
}
.pill strong{ font-family: var(--font-display); font-size: 1rem; }
.pill span{ font-size: 0.78rem; color: var(--color-slate); }

.pill--dark{
  background: var(--color-navy-700);
  border-color: var(--color-navy-600);
}
.pill--dark strong{ color: var(--color-amber); }
.pill--dark span{ color: var(--color-muted-on-navy); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-navy); color: var(--color-muted-on-navy); padding-block: var(--space-10) var(--space-6); }
/* p defaults to --color-slate, which is 1.96:1 on navy. Override explicitly
   or footer copy fails contrast badly. */
.site-footer p{ color: var(--color-muted-on-navy); }

/* ---- Original 4-column footer: every page except index.html ---- */
.footer-grid{ display: grid; gap: var(--space-7); }
.footer-logo{ display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-4); }
.footer-logo img{ block-size: 40px; inline-size: auto; }
.footer-logo .logo-text{ display: flex; flex-direction: column; line-height: 1.15; font-family: var(--font-display); }
.footer-logo .logo-text .name{ font-weight: 700; font-size: 1rem; color: var(--color-white); }
.footer-logo .logo-text .sub{ font-weight: 700; font-size: 0.72rem; color: var(--color-amber); letter-spacing: 0.1em; }
.footer-col h3{
  color: var(--color-white);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-block-end: var(--space-4);
}
.footer-col a, .footer-col p{ display: block; padding-block: var(--space-1); font-size: 0.92rem; }
.footer-col a{ min-height: 32px; display: flex; align-items: center; }
.footer-col a:hover{ color: var(--color-amber); }
.footer-bottom{
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-on-navy);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: 0.8rem;
  font-family: var(--font-mono);
}
@media (min-width: 768px){
  .footer-grid{ grid-template-columns: 1.3fr repeat(3, 1fr); }
}

/* ---- New footer, adopted from the paused redesign (index-redesign.html),
   ported onto the site's real navy/amber tokens: index.html ONLY for now.
   Do not delete the block above while any other page still ships the old
   footer-grid markup - deleting it breaks every page but this one. ---- */
.foot-cta{
  margin-block-start: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.04;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  max-inline-size: 16ch;
  color: var(--color-white);
}
.foot-action{ margin-block-start: var(--space-7); }
.foot-meta{
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border-on-navy);
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 820px){
  .foot-meta{ grid-template-columns: 1fr 1fr; gap: var(--space-9); }
}
.foot-meta .eyebrow{ margin-block-end: var(--space-4); }
.foot-tel{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  padding-block: var(--space-2);
  color: var(--color-white);
  transition: color 160ms var(--ease);
}
.foot-tel:hover{ color: var(--color-amber); }
.foot-addr{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  max-inline-size: 30ch;
  color: var(--color-muted-on-navy);
}
.foot-links{
  margin-block-start: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  font-size: 0.9375rem;
}
.foot-links a{ color: var(--color-muted-on-navy); opacity: 0.85; transition: opacity 160ms var(--ease), color 160ms var(--ease); }
.foot-links a:hover{ opacity: 1; color: var(--color-white); }
.foot-links span{ opacity: 0.3; }
.foot-legal{
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-on-navy);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--color-muted-on-navy);
}

/* ---------- No-JS guard ----------
   Content is visible by default. Only once JS confirms it can restore
   the animation do we hide-then-reveal. If JS never runs, nothing is
   ever hidden — this is the fix for the 73–88% blank-page bug.

   Second failure mode, caught on a throttled 3G test: JS *is* enabled, so
   .js applies and .reveal goes to opacity 0 immediately — but main.js is
   deferred and may take seconds to arrive, or may never arrive at all.
   Content sat invisible in the meantime. The failsafe animation below
   forces every .reveal visible after 3s no matter what. If the observer
   gets there first, .in wins and cancels it. */
.js .reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  animation: reveal-failsafe 1ms linear 3s forwards;
}
.js .reveal.in{ opacity: 1; transform: none; animation: none; }
@keyframes reveal-failsafe{ to{ opacity: 1; transform: none; } }

/* Above-the-fold hero never depends on JS at all — it animates in via CSS
   on load, so it is painted with the first frame on any connection. */
.js .hero-copy, .js .hero-art{
  opacity: 0;
  animation: hero-in 620ms var(--ease) 80ms forwards;
}
.js .hero-art{ animation-delay: 200ms; }
@keyframes hero-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce){
  .js .hero-copy, .js .hero-art{ opacity: 1; animation: none; }
}

/* ---------- Data tables (project references, classification) ---------- */
.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.table-scroll:focus-visible{ outline: 2.5px solid var(--color-amber); outline-offset: 2px; }
table.data{
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-inline-size: 640px;
}
table.data caption{
  text-align: start;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-navy);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-paper);
}
table.data th, table.data td{
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  vertical-align: top;
}
table.data thead th{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
  background: var(--color-paper);
  white-space: nowrap;
}
table.data tbody tr:last-child td{ border-block-end: 0; }
table.data tbody tr:hover{ background: var(--color-paper); }
table.data td.num{ font-family: var(--font-mono); white-space: nowrap; }
table.data td.yr{ font-family: var(--font-mono); white-space: nowrap; color: var(--color-slate); }
.table-note{
  font-size: 0.82rem;
  color: var(--color-slate);
  margin-block-start: var(--space-3);
}

/* ---------- Definition rows (legal standing, contact facts) ---------- */
.fact-list{ display: grid; gap: 0; }
.fact-row{
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}
.fact-row dt{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
}
.fact-row dd{ margin: 0; font-family: var(--font-display); font-weight: 600; }
@media (min-width: 640px){
  .fact-row{ grid-template-columns: 220px 1fr; gap: var(--space-4); align-items: baseline; }
}
.section--navy .fact-row{ border-block-end-color: var(--color-border-on-navy); }
.section--navy .fact-row dt{ color: var(--color-muted-on-navy); }
.section--navy .fact-row dd{ color: var(--color-white); }

/* ---------- Checklist ---------- */
.checklist li{
  position: relative;
  padding-inline-start: var(--space-6);
  padding-block: var(--space-2);
  color: var(--color-slate);
}
.checklist li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.05em;
  inline-size: 10px;
  block-size: 2px;
  background: var(--color-amber);
}
.section--navy .checklist li{ color: var(--color-muted-on-navy); }

/* ---------- Page header (inner pages) ---------- */
.page-head{
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: var(--space-8) var(--space-8);
}
.page-head h1{ color: var(--color-white); margin-block: var(--space-4) var(--space-4); }
.page-head .lede{ color: var(--color-muted-on-navy); max-width: 62ch; }

/* ---------- Notice ---------- */
.notice{
  border-inline-start: 3px solid var(--color-amber);
  background: var(--color-paper);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-slate);
}

/* ---------- Print ----------
   Procurement officers print pages. Strip the chrome, force readable
   black-on-white, and expose link destinations that would otherwise be
   invisible on paper. */
@media print{
  .site-header, .mobile-panel, .nav-toggle, .lang-toggle,
  .hero-art, .skip-link, form, .btn{ display: none !important; }

  html, body{ background: #fff !important; color: #000 !important; }
  .section, .section--navy, .section--paper, .hero, .site-footer{
    background: #fff !important;
    color: #000 !important;
    padding-block: 1.2rem !important;
  }
  .section--navy h2, .section--navy h3, .hero-copy h1,
  .foot-cta, .foot-tel, .foot-legal,
  .site-footer h3, .footer-bottom{ color: #000 !important; }
  .section--navy p, .site-footer p, .hero-copy .lede,
  .hero-fact dt, .hero-fact dd{ color: #222 !important; }

  .card, .pill{ border: 1px solid #999 !important; background: #fff !important; break-inside: avoid; }
  .card--dark strong, .pill--dark strong{ color: #000 !important; }
  .pill--dark span, .card--dark p{ color: #222 !important; }

  .reveal{ opacity: 1 !important; transform: none !important; }

  h1,h2,h3{ break-after: avoid; }
  .grid{ gap: 0.6rem !important; }

  /* Show where links actually go on paper. */
  main a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 0.8em; color: #444; }
  main a[href^="mailto:"]::after{ content: " (" attr(href) ")"; font-size: 0.8em; color: #444; }

  @page{ margin: 14mm; }
}

/* ---------- Division block (services scope) ----------
   A long spec list rendered as bare headings + text reads as "floating in
   air": nothing contains it, nothing paces it, and odd item counts leave a
   dead half-row. This gives each division a numbered marker, a contained
   surface, and a consistent internal grid. Structure, not decoration —
   a specification list doesn't need a photograph per section, it needs
   somewhere to sit. */
.division{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-block-end: var(--space-5);
  position: relative;
  overflow: hidden;
}
.division::before{
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--color-amber);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.division:hover::before{ opacity: 1; }

.division-head{
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block-end: var(--space-5);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}
.division-num{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-amber-text);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.division-head h3{ margin: 0; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }

.division-items{
  display: grid;
  gap: var(--space-5) var(--space-7);
  grid-template-columns: 1fr;
}
.division-items > *{ min-width: 0; }
@media (min-width: 760px){
  .division-items{ grid-template-columns: repeat(2, 1fr); }
}
.division-item strong{
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-navy);
  margin-block-end: var(--space-1);
  padding-inline-start: var(--space-5);
  position: relative;
}
.division-item strong::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 12px;
  block-size: 2px;
  background: var(--color-amber);
}
.division-item p{
  margin: 0;
  padding-inline-start: var(--space-5);
  font-size: 0.92rem;
  line-height: 1.6;
}

[dir="rtl"] .division-head h3,
[dir="rtl"] .division-num,
[dir="rtl"] .division-item strong{
  font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
  letter-spacing: normal;
}

/* ---------- Print ---------- */
@media print{
  .division{ break-inside: avoid; border-color: #999 !important; }
  .division::before{ display: none !important; }
}

/* ---------- Photographic hero ----------
   Full-bleed image with a navy scrim. The scrim is not decoration: white
   text over an unmodified photo fails contrast unpredictably as the image
   changes. A fixed-opacity navy overlay makes the contrast ratio a known
   quantity regardless of what's behind it — measured, not hoped for. */
.hero--photo{
  position: relative;
  isolation: isolate;
  background: var(--color-navy);
}
.hero--photo .hero-bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero--photo .hero-bg img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.hero--photo::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two layers: a strong scrim on the TEXT side only, plus a light overall
     wash for legibility. Keeping the whole frame at 0.9 made the sunset go
     grey and killed the warmth the image was chosen for. This lets the
     photograph read on the open side while the copy side stays safely
     above 4.5:1 — verified by measuring real rendered pixels, not by eye. */
  background:
    linear-gradient(to right,
      rgba(29,41,53,0.95) 0%,
      rgba(29,41,53,0.88) 38%,
      rgba(29,41,53,0.45) 72%,
      rgba(29,41,53,0.30) 100%),
    linear-gradient(to bottom,
      rgba(29,41,53,0.35) 0%,
      rgba(29,41,53,0.15) 40%,
      rgba(29,41,53,0.45) 100%);
}
/* Arabic copy sits on the right, so the strong side mirrors. */
[dir="rtl"] .hero--photo::after{
  background:
    linear-gradient(to left,
      rgba(29,41,53,0.95) 0%,
      rgba(29,41,53,0.88) 38%,
      rgba(29,41,53,0.45) 72%,
      rgba(29,41,53,0.30) 100%),
    linear-gradient(to bottom,
      rgba(29,41,53,0.35) 0%,
      rgba(29,41,53,0.15) 40%,
      rgba(29,41,53,0.45) 100%);
}

/* ---------- Page header with image ---------- */
.page-head--photo{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.page-head--photo .head-bg{ position: absolute; inset: 0; z-index: -2; }
.page-head--photo .head-bg img{
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center 55%;
}
.page-head--photo::after{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Was a flat 0.93/0.86 wash, which buried the photograph entirely — the
     image read as grey noise rather than a picture. Now directional: firm
     behind the copy, open on the far side so the image is actually visible.
     Text side stays measured above 4.5:1. */
  background:
    linear-gradient(to right,
      rgba(29,41,53,0.94) 0%,
      rgba(29,41,53,0.86) 42%,
      rgba(29,41,53,0.52) 75%,
      rgba(29,41,53,0.38) 100%),
    linear-gradient(to bottom,
      rgba(29,41,53,0.30) 0%,
      rgba(29,41,53,0.12) 45%,
      rgba(29,41,53,0.40) 100%);
}
[dir="rtl"] .page-head--photo::after{
  background:
    linear-gradient(to left,
      rgba(29,41,53,0.94) 0%,
      rgba(29,41,53,0.86) 42%,
      rgba(29,41,53,0.52) 75%,
      rgba(29,41,53,0.38) 100%),
    linear-gradient(to bottom,
      rgba(29,41,53,0.30) 0%,
      rgba(29,41,53,0.12) 45%,
      rgba(29,41,53,0.40) 100%);
}
/* Keep header copy off the open side so it never drifts over the bright
   part of the image as the viewport widens. */
.page-head--photo .container > *{ max-width: 46rem; }

/* ---------- Split: image beside content ---------- */
.split{ display: grid; gap: var(--space-7); align-items: center; }
.split > *{ min-width: 0; }
.split-media{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.split-media img{
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
@media (min-width: 900px){
  .split{ grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split--reverse .split-media{ order: 2; }
}

/* ---------- Card with image ---------- */
.card--media{ padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--media .card-img{ aspect-ratio: 16 / 10; overflow: hidden; }
.card--media .card-img img{
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.card--media:hover .card-img img{ transform: scale(1.04); }
.card--media .card-body{ padding: var(--space-5) var(--space-6) var(--space-6); }
.card--media h3{ margin-block-end: var(--space-2); }

@media (prefers-reduced-motion: reduce){
  .card--media:hover .card-img img,
  .split-media img{ transform: none !important; }
}

/* ---------- Print: strip heavy imagery ---------- */
@media print{
  .hero--photo .hero-bg, .page-head--photo .head-bg,
  .split-media, .card--media .card-img{ display: none !important; }
  .hero--photo::after, .page-head--photo::after{ display: none !important; }
}

/* ---------- Client / partner logo wall ----------
   These 15 logos come from 15 different brand systems: wildly different
   aspect ratios (KOC is portrait, Hyundai is a 4:1 banner), and colour
   palettes that include navy, black and white. Dropping them straight onto
   a section background would make several of them disappear — KOC's blue on
   the navy section, the white elements in the ministry seals on paper.

   So every logo sits on its own white tile at a fixed height with
   object-fit: contain. One consistent ground, correct proportions
   preserved, works identically on light and dark sections. This is the
   standard fix and it's what the playbook flags as the fallback for logos
   that won't sit cleanly on a coloured background. */
.logo-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.logo-grid > *{ min-width: 0; }
@media (min-width: 640px){ .logo-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .logo-grid{ grid-template-columns: repeat(4, 1fr); } }

.logo-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.logo-card:hover{ border-color: var(--color-amber); }

.logo-card .logo-frame{
  /* 62px was too tight: several government marks carry their own wordmark
     baked into the artwork, so at 62px the emblem shrank and the embedded
     text became illegible. 88px gives those marks room without making the
     pure-emblem logos (KNPC) look oversized. See BUILD-NOTES for the
     open question about cropping to emblem-only. */
  block-size: 88px;
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-card .logo-frame img{
  max-block-size: 100%;
  max-inline-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
.logo-card .logo-label{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-navy);
  text-align: center;
  line-height: 1.3;
}
.logo-card .logo-role{
  font-size: 0.72rem;
  color: var(--color-slate);
  text-align: center;
  margin: 0;
}

/* On navy sections the tile stays white — that's the whole point — but the
   border needs to read against navy rather than against paper. */
.section--navy .logo-card{ border-color: transparent; }

[dir="rtl"] .logo-card .logo-label,
[dir="rtl"] .logo-card .logo-role{
  font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
  letter-spacing: normal;
}

@media print{
  .logo-card{ border: 1px solid #999 !important; break-inside: avoid; }
}

/* ---------- Case study pages ----------
   These read differently from the rest of the site: one long-form narrative
   per page rather than a grid of cards. The body column is deliberately
   narrower and more editorial so it reads like a document rather than a
   brochure, which suits a procurement officer scanning for evidence. */

.cs-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The scrim is navy, so this section is a dark context and must declare
     its own text colours. Without this the h1 inherits the global default
     (navy) and renders navy-on-navy: measured at 1.00:1, i.e. completely
     invisible. .page-head sets these for exactly the same reason. */
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: clamp(var(--space-9), 12vw, var(--space-10)) var(--space-9);
}
.cs-hero h1{ color: var(--color-white); }
.cs-hero .lede{ color: var(--color-muted-on-navy); max-width: 62ch; }
.cs-hero .cs-bg{ position: absolute; inset: 0; z-index: -2; }
.cs-hero .cs-bg img{
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center 55%;
}
/* Directional scrim: firm behind the copy, opening up across the far side so
   the photograph is actually visible rather than flattened to grey.
   Measured against real rendered pixels on all six photos: the brightest
   (Camp Arifjan, Airport T2) pushed the lede down to 4.23:1 at the previous
   0.89 mid-stop, just under the 4.5 threshold. Raised to 0.93 through the
   text zone, which brings the worst case clear while still letting the
   image read on the open side. */
.cs-hero::after{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right,
      rgba(29,41,53,0.96) 0%,
      rgba(29,41,53,0.93) 50%,
      rgba(29,41,53,0.60) 80%,
      rgba(29,41,53,0.42) 100%),
    linear-gradient(to bottom,
      rgba(29,41,53,0.34) 0%,
      rgba(29,41,53,0.16) 45%,
      rgba(29,41,53,0.50) 100%);
}
[dir="rtl"] .cs-hero::after{
  background:
    linear-gradient(to left,
      rgba(29,41,53,0.96) 0%,
      rgba(29,41,53,0.93) 50%,
      rgba(29,41,53,0.60) 80%,
      rgba(29,41,53,0.42) 100%),
    linear-gradient(to bottom,
      rgba(29,41,53,0.34) 0%,
      rgba(29,41,53,0.16) 45%,
      rgba(29,41,53,0.50) 100%);
}
.cs-hero .container > *{ max-width: 46rem; }
.cs-hero h1{ margin-block: var(--space-3) var(--space-4); color: var(--color-white); }
.cs-hero .cs-facts{ max-width: none; }

/* Breadcrumb back to the projects index */
.cs-back{
  /* Must be block-level. As an inline-flex it sat on the same line as the
     eyebrow that follows it, and the two collided at desktop widths. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-amber);
  text-decoration: none;
  min-block-size: 44px;
}
.cs-back:hover, .cs-back:focus-visible{ color: var(--color-white); }
[dir="rtl"] .cs-back{
  font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

/* Fact strip: the at-a-glance data a procurement reader wants first */
.cs-facts{
  display: grid;
  gap: var(--space-5) var(--space-6);
  grid-template-columns: 1fr;
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid rgba(255,255,255,0.18);
}
.cs-facts > *{ min-width: 0; }
@media (min-width: 620px){ .cs-facts{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px){ .cs-facts{ grid-template-columns: repeat(4, 1fr); } }
.cs-fact dt{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-on-navy);
  margin-block-end: var(--space-2);
}
.cs-fact dd{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-white);
  line-height: 1.35;
}
[dir="rtl"] .cs-fact dt{
  font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.78rem;
}
[dir="rtl"] .cs-fact dd{ font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif; }

/* Editorial body column */
.cs-body{ max-width: 42rem; }
.cs-body h2, .cs-subhead{
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  margin-block: var(--space-8) var(--space-4);
}
.cs-body h2:first-child{ margin-block-start: 0; }
.cs-subhead{ margin-block-start: 0; margin-block-end: var(--space-4); }
.cs-body p{ margin-block-end: var(--space-4); }
.cs-body p:last-child{ margin-block-end: 0; }
.cs-body strong{ color: var(--color-navy); font-weight: 600; }

/* Conditions list: dense and scannable, deliberately not a card grid */
.cs-conditions{ list-style: none; padding: 0; margin: 0; max-width: 46rem; }
.cs-conditions li{
  position: relative;
  padding-inline-start: var(--space-6);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border);
  font-size: 0.95rem;
  line-height: 1.6;
}
.cs-conditions li:last-child{ border-block-end: none; }
.cs-conditions li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--space-3) + 0.62em);
  inline-size: 14px;
  block-size: 2px;
  background: var(--color-amber);
}

/* Capability tags linking back to Services */
.cs-tags{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.cs-tag{
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: none;
  background: var(--color-white);
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.cs-tag:hover, .cs-tag:focus-visible{
  border-color: var(--color-amber);
  color: var(--color-amber-text);
}
[dir="rtl"] .cs-tag{ font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif; }

/* The figures caveat. Visually distinct from body copy so it reads as a
   disclosure rather than as marketing prose. */
.cs-note{
  border-inline-start: 3px solid var(--color-amber);
  padding: var(--space-5) var(--space-6);
  background: var(--color-paper);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-slate);
  max-width: 46rem;
}
[dir="rtl"] .cs-note{ border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

/* Previous and next case study navigation */
.cs-nav{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.cs-nav > *{ min-width: 0; }
@media (min-width: 760px){ .cs-nav{ grid-template-columns: repeat(2, 1fr); } }
.cs-nav-card{
  display: block;
  padding: var(--space-6);
  border: 1px solid var(--color-navy-600);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.cs-nav-card:hover, .cs-nav-card:focus-visible{
  border-color: var(--color-amber);
  background: var(--color-navy-700);
}
.cs-nav-card .lbl{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-block-end: var(--space-2);
}
.cs-nav-card .ttl{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-white);
  line-height: 1.35;
}
[dir="rtl"] .cs-nav-card .lbl{
  font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.78rem;
}
[dir="rtl"] .cs-nav-card .ttl{ font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif; }

/* Case study cards on the projects index */
.cs-index-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 160ms var(--ease);
}
.cs-index-card:hover, .cs-index-card:focus-visible{ border-color: var(--color-amber); }
.cs-index-card .img{ aspect-ratio: 16 / 10; overflow: hidden; }
.cs-index-card .img img{
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.cs-index-card:hover .img img{ transform: scale(1.04); }
.cs-index-card .body{ padding: var(--space-5) var(--space-6) var(--space-6); }
.cs-index-card .meta{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-amber-text);
  margin-block-end: var(--space-2);
}
.cs-index-card h3{ margin-block-end: var(--space-2); font-size: 1.05rem; }
.cs-index-card p{ font-size: 0.9rem; margin: 0; }
[dir="rtl"] .cs-index-card .meta{
  font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.8rem;
}
[dir="rtl"] .cs-index-card h3,
[dir="rtl"] .cs-index-card p{ font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif; }

@media (prefers-reduced-motion: reduce){
  .cs-index-card:hover .img img{ transform: none !important; }
}

@media print{
  .cs-hero .cs-bg, .cs-nav, .cs-index-card .img{ display: none !important; }
  .cs-hero::after{ display: none !important; }
  .cs-hero{ padding-block: var(--space-6); }
  .cs-note, .cs-conditions li{ break-inside: avoid; }
}

/* ---------- Utilities ---------- */
.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mt-0{ margin-block-start: 0; }