/* ==========================================================================
   Madarek Consulting Engineers — MCE
   Redesign v1 · Design system
   Author: opencode
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cairo";
  src: url("../fonts/cairo-arabic.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  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+2013-2014, U+2018-201A, U+2026,
    U+2030-2034, U+2035-2043, U+2044-2045, U+2046-2047, U+2048-204D, U+204E,
    U+2050-2051, U+2052-2053, U+2054-2055, U+2056-2057, U+2058-2059, U+205A-205B,
    U+205C-205D, U+205E, U+2190-2199, U+25A0-25FF, U+2E41, U+FB50-FDFF,
    U+FE70-FEFF, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF,
    U+1EE00-1EEFF;
}
@font-face {
  font-family: "Cairo";
  src: url("../fonts/cairo-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — deep navy */
  --ink:          #060c17;
  --navy-900:     #0a1524;
  --navy-800:     #0e1e33;
  --navy-700:     #142a44;
  --navy-600:     #1c3a5c;
  --blue-500:     #2d6ca8;
  --blue-400:     #4d92cc;
  --blue-100:     #dbe9f4;

  /* Accents */
  --cyan:         #56c9e8;
  --cyan-soft:    #a5e3f4;
  --cyan-glow:    rgba(86, 201, 232, .18);
  --sand:         #d9a95c;

  /* Neutrals */
  --paper:        #f7f9fb;
  --paper-2:      #eef2f7;
  --white:        #ffffff;
  --logo-plate:   #ffffff;
  --line:         #dbe3ec;
  --line-soft:    #e8eef4;
  --text:         #0d1a2b;
  --text-2:       #48596e;
  --text-3:       #5f7088;
  --text-inv:     #eaf2f8;
  --text-inv-2:   #a9c0d4;

  /* Semantic */
  --bg:           var(--paper);
  --fg:           var(--text);
  --accent:       var(--blue-500);
  --accent-ink:   var(--cyan);

  /* Typography */
  --font-ar: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-en: "Cairo", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  /* The home hero headline carries the full brand line
     ("Madarek Consulting Engineers - from the idea to a carefully
     engineered reality"), so it is deliberately kept smaller than a
     one-liner display size. */
  --fs-display: clamp(1.95rem, 4.05vw, 3.35rem);
  --fs-h1:      clamp(2.1rem, 4.4vw, 3.6rem);
  --fs-h2:      clamp(1.7rem, 3.2vw, 2.7rem);
  --fs-h3:      clamp(1.15rem, 1.7vw, 1.5rem);
  --fs-body:    clamp(0.98rem, 1.05vw, 1.08rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.78rem;

  --lh-tight: 1.18;
  --lh-snug:  1.45;
  --lh-body:  1.85;

  /* Space */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;  --sp-7: 3rem;  --sp-8: 4rem;
  --sp-9: 6rem;  --sp-10: 8rem;

  --section-y: clamp(3.75rem, 8vw, 7.5rem);
  --gutter:    clamp(1.15rem, 4vw, 2.5rem);
  --maxw:      1280px;

  /* Surfaces */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  /* Brand surfaces — the navy blocks that stay navy in both themes */
  --surface-brand:   #0a1524;
  --surface-brand-2: #0e1e33;

  /* Header */
  --header-bg:     rgba(255, 255, 255, .92);
  --header-fg:     #0a1524;
  --header-sub:    #6b7c92;
  --header-shadow: 0 1px 24px rgba(10, 21, 36, .07);
  --on-hero-fg:    #fff;
  --on-hero-fg-2:  rgba(255, 255, 255, .62);

  --shadow-sm: 0 1px 2px rgba(10, 21, 36, .06), 0 2px 6px rgba(10, 21, 36, .05);
  --shadow:    0 4px 14px rgba(10, 21, 36, .07), 0 12px 32px rgba(10, 21, 36, .06);
  --shadow-lg: 0 10px 30px rgba(10, 21, 36, .10), 0 30px 70px rgba(10, 21, 36, .10);
  --shadow-dark: 0 20px 60px rgba(0, 0, 0, .45);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .45s;

  --header-h: 76px;
}

@media (max-width: 860px) { :root { --header-h: 66px; } }

/* --------------------------------------------------------------------------
   1b. Dark theme
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0a1424;
  --paper:       #0e1c30;
  --paper-2:     #14263f;
  --white:       #172c48;
  --line:        rgba(255, 255, 255, .12);
  --line-soft:   rgba(255, 255, 255, .07);
  --text:        #e9f1f8;
  --text-2:      #a8bcd1;
  --text-3:      #7e94ac;
  --text-inv:    #eaf2f8;
  --text-inv-2:  #a9c0d4;

  --blue-500:    #4d92cc;
  --blue-400:    #6aa8de;
  --blue-100:    rgba(86, 201, 232, .14);

  --surface-brand:   #050b16;
  --surface-brand-2: #091321;

  --header-bg:     rgba(9, 19, 33, .9);
  --header-fg:     #e9f1f8;
  --header-sub:    #8ba1b8;
  --header-shadow: 0 1px 24px rgba(0, 0, 0, .55);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow:    0 4px 14px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .38);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .5), 0 30px 70px rgba(0, 0, 0, .45);
}

/* Light theme gets the light scrollbar + form control styling */
:root {
  color-scheme: light;
  accent-color: var(--blue-500);
}


/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-ar);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5 {
  line-height: var(--lh-tight);
  font-weight: 800;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--cyan); color: var(--ink); }

.skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: 1rem;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--cyan);
  color: var(--ink);
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: inset-block-start .2s var(--ease);
}
.skip-link:focus { inset-block-start: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--paper { background: var(--paper); }
.section--paper2 { background: var(--paper-2); }
.section--dark {
  background: var(--surface-brand);
  color: var(--text-inv);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

/* Blueprint grid motif */
.section--dark::before,
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(86, 201, 232, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 201, 232, .07) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}
.section--dark > *, .hero > * { position: relative; z-index: 1; }

/* Section header */
.sec-head {
  display: grid;
  gap: 1.15rem;
  margin-block-end: clamp(2.25rem, 4.5vw, 3.75rem);
}
@media (min-width: 900px) {
  .sec-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    align-items: end;
    gap: 2.5rem;
  }
  /* The about intro has a tall paragraph column on the right - keep the
     eyebrow + title at the top of the row instead of hanging at the bottom. */
  .sec-head--split--top { align-items: start; }
}
.sec-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  font-weight: 600;
}
.section--dark .sec-head__eyebrow { color: var(--cyan); }
.sec-head__eyebrow::before {
  content: "";
  width: 2.25rem; height: 1px;
  background: currentColor;
  opacity: .55;
}
.sec-head__title { font-size: var(--fs-h2); }
/* Brand word highlighted inside body copy (e.g. the about intro). */
.brand-hl { color: var(--blue-500); }
[data-theme="dark"] .brand-hl { color: var(--cyan); }
.sec-head__lead {
  color: var(--text-2);
  max-width: 60ch;
  font-size: 1.06rem;
}
.section--dark .sec-head__lead { color: var(--text-inv-2); }

.sec-head__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  color: var(--text-3);
}
.section--dark .sec-head__num { color: var(--text-inv-2); }

/* --------------------------------------------------------------------------
   4. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  --btn-bd: var(--navy-800);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .85rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; }

.btn--primary {
  --btn-bg: var(--cyan);
  --btn-fg: var(--ink);
  --btn-bd: var(--cyan);
  box-shadow: 0 8px 26px var(--cyan-glow);
}
.btn--primary:hover { --btn-bg: #6fd6f1; --btn-bd: #6fd6f1; }

.btn--navy { --btn-bg: var(--navy-800); --btn-bd: var(--navy-800); }
.btn--navy:hover { --btn-bg: var(--navy-600); --btn-bd: var(--navy-600); }

/* Theme aware: --navy-800 is a fixed brand navy, so as a text colour it
   disappeared on the dark paper background. --text flips with the theme. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line);
}
.btn--ghost:hover { --btn-bd: var(--blue-500); --btn-fg: var(--blue-500); }

.btn--onDark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .3);
}
.btn--onDark:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-bd: rgba(255, 255, 255, .6); }

.btn--sm { min-height: 2.6rem; padding: .6rem 1.2rem; font-size: .85rem; }
.btn--block { width: 100%; }

/* Arrow link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--blue-500);
  padding-block-end: .3rem;
  border-block-end: 1px solid currentColor;
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.arrow-link svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.arrow-link:hover { gap: .9rem; }
.arrow-link:hover svg { transform: translateX(-3px); }
.section--dark .arrow-link { color: var(--cyan); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease), height .35s var(--ease);
  border-block-end: 1px solid transparent;
}
.header::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.header.is-stuck {
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: var(--header-shadow);
}
.header.is-stuck::after { opacity: .6; }

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  /* The brand is the only part of the header that may shrink: the nav,
     the tools and the CTA all keep their size, so when the row runs out of
     room (the English header is wider than the Arabic one) the brand text
     is the thing that gives way - never the button. */
  flex: 0 1 auto;
  min-width: 0;
}
.brand__mark {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: .18rem;
  box-shadow: 0 2px 10px rgba(10, 21, 36, .12);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; overflow: hidden; }
.brand__name {
  font-weight: 900;
  font-size: 1.18rem;
  letter-spacing: .01em;
  color: var(--on-hero-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .35s var(--ease);
}
.brand__sub {
  font-size: .63rem;
  letter-spacing: .12em;
  color: var(--on-hero-fg-2);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .35s var(--ease);
}
.header.is-stuck .brand__name { color: var(--header-fg); }
.header.is-stuck .brand__sub { color: var(--header-sub); }

.nav { margin-inline-start: auto; flex: none; }
.nav__list { display: flex; align-items: center; gap: .35rem; }
.nav__link {
  position: relative;
  display: block;
  padding: .55rem .85rem;
  font-size: .93rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  border-radius: 8px;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: .2rem;
  inset-inline: .85rem;
  height: 1.5px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: inline-start; }
.nav__link[aria-current="page"] { color: #fff; }

.header.is-stuck .nav__link { color: var(--text-2); }
.header.is-stuck .nav__link:hover,
.header.is-stuck .nav__link[aria-current="page"] { color: var(--header-fg); }
.header.is-stuck .nav__link::after { background: var(--blue-500); }

.header__cta { margin-inline-start: .5rem; flex: none; }

/* Compact header.
   Between ~1000px and ~1280px the header row is wider than the screen:
   the English build carries more text (logo + "MCE" + the "Engineering
   Consultancy & Studies" tagline + "Request a consultation" + six English
   labels) and used to push the CTA button half out of the viewport. The
   Arabic build was over-wide too, but the nav box silently shrank and its
   last link collided with the theme button.
   Fix: tighten the row (gap + link padding) and let the brand text shrink
   as the last resort - the button and the nav keep their size. */
@media (max-width: 1280px) {
  .header__inner { gap: 1rem; }
  .nav__link { padding-inline: .6rem; }
  .nav__link::after { inset-inline: .6rem; }
}
@media (max-width: 1100px) {
  .header__inner { gap: .75rem; }
  .nav__link { padding-inline: .45rem; }
  .nav__link::after { inset-inline: .45rem; }
}
@media (max-width: 1150px) {
  /* Below this the English tagline no longer fits next to the full CTA:
     drop it (the logo + "MCE" still identify the brand, exactly like the
     mobile header does). */
  [lang="en"] .brand__sub { display: none; }
}

.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  margin-inline-start: auto;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  place-items: center;
  color: #fff;
}
.header.is-stuck .burger { border-color: var(--line); color: var(--header-fg); }
.burger span {
  display: block;
  width: 1.15rem; height: 1.5px;
  background: currentColor;
  position: relative;
  transition: background-color .2s var(--ease);
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.burger span::before { inset-block-start: -6px; }
.burger span::after { inset-block-start: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--surface-brand);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility .45s;
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer__link {
  padding: .85rem 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  border-block-end: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer__link span {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--cyan);
  letter-spacing: .1em;
}
.drawer__foot { margin-block-start: auto; padding-block-start: 2rem; display: grid; gap: .75rem; }
.drawer__meta { color: var(--text-inv-2); font-size: .9rem; }
.drawer__meta a { color: var(--cyan); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 860px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(45, 108, 168, .45), transparent 62%),
    radial-gradient(90% 70% at 10% 100%, rgba(86, 201, 232, .18), transparent 60%),
    linear-gradient(160deg, var(--surface-brand) 0%, var(--ink) 58%, #040a12 100%);
  color: var(--text-inv);
  overflow: hidden;
  padding-block: calc(var(--header-h) + 3rem) 4rem;
}
.hero__glow {
  position: absolute;
  width: 46rem; height: 46rem;
  inset-block-start: -22rem;
  inset-inline-end: -16rem;
  border-radius: 50%;
  border: 1px solid rgba(86, 201, 232, .16);
  pointer-events: none;
}
.hero__glow::after {
  content: "";
  position: absolute;
  inset: 6rem;
  border-radius: 50%;
  border: 1px solid rgba(86, 201, 232, .1);
}
.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
}
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-block-end: 1.5rem;
}
.hero__eyebrow::before {
  content: "";
  width: 2.5rem; height: 1px;
  background: var(--cyan);
}
.hero__title {
  font-size: var(--fs-display);
  line-height: 1.12;
  font-weight: 900;
  color: #fff;
  margin-block-end: 1.5rem;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hero__title .accent {
  display: block;
  color: var(--cyan);
  font-size: .58em;
  font-weight: 700;
  letter-spacing: .01em;
  margin-block-start: .55rem;
  line-height: 1.3;
  text-wrap: balance;
}
.hero__lead {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--text-inv-2);
  max-width: 46ch;
  margin-block-end: 2.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__panel {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  padding: 1.6rem;
  display: grid;
  gap: 1.15rem;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.hero__panel:hover {
  border-color: rgba(86, 201, 232, .45);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 18px 50px rgba(8, 24, 48, .5), 0 0 0 1px rgba(86, 201, 232, .16) inset;
  transform: translateY(-4px);
}
.hero__panel:focus-within {
  border-color: rgba(86, 201, 232, .55);
  box-shadow: 0 0 0 1px rgba(86, 201, 232, .22) inset;
}
.hero__panel-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
/* CEO card - replaces the old "by the numbers" panel in the home hero. */
.hero__ceo {
  justify-items: center;
  text-align: center;
  gap: .35rem;
  padding-block: 1.5rem 1.75rem;
}
.hero__ceo-photo {
  position: relative;
  margin: .9rem 0 .6rem;
  width: min(100%, 13.5rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.hero__panel:hover .hero__ceo-photo {
  border-color: rgba(86, 201, 232, .4);
  box-shadow: 0 12px 40px rgba(8, 24, 48, .45);
}
.hero__ceo-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.hero__ceo-badge {
  position: absolute;
  inset-block-end: .7rem;
  inset-inline-start: .7rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: var(--cyan);
  color: #04202e;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(6, 20, 36, .4);
  transition: box-shadow .25s var(--ease), filter .25s var(--ease);
}
.hero__panel:hover .hero__ceo-badge {
  box-shadow: 0 10px 28px rgba(6, 20, 36, .55);
  filter: brightness(1.02);
}
.hero__ceo-name {
  font-weight: 800;
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.3;
  transition: color .25s var(--ease), text-shadow .25s var(--ease);
}
.hero__panel:hover .hero__ceo-name {
  color: #fff;
  text-shadow: 0 0 0 transparent;
}
.hero__ceo-role {
  color: var(--cyan);
  font-size: .82rem;
  font-weight: 600;
  transition: filter .25s var(--ease);
}
.hero__panel:hover .hero__ceo-role {
  filter: brightness(1.08);
}
.hero__ceo-note {
  color: var(--text-inv-2);
  font-size: .86rem;
  line-height: 1.6;
  max-width: 30ch;
  margin-block-start: .35rem;
}
@media (max-width: 560px) {
  /* On phones the card turns into a compact row: portrait on the side,
     text next to it - so the hero does not grow too tall. */
  .hero__ceo {
    grid-template-columns: 6.75rem 1fr;
    grid-template-areas:
      "photo title"
      "photo name"
      "photo role"
      "photo note";
    justify-items: start;
    text-align: start;
    align-content: center;
    column-gap: 1rem;
    row-gap: .1rem;
    padding-block: 1.25rem;
  }
  .hero__panel-title { grid-area: title; }
  .hero__ceo-photo { grid-area: photo; width: 100%; margin: 0; align-self: start; }
  .hero__ceo-name { grid-area: name; }
  .hero__ceo-role { grid-area: role; }
  .hero__ceo-note { grid-area: note; max-width: none; margin-block-start: .3rem; }
  .hero__ceo-badge { inset-block-end: .5rem; inset-inline-start: .5rem; padding: .25rem .45rem; font-size: .6rem; }
}

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(100% 120% at 88% 0%, rgba(45, 108, 168, .42), transparent 60%),
    linear-gradient(150deg, var(--surface-brand), var(--ink));
  color: var(--text-inv);
  overflow: hidden;
}
.page-hero__grid { display: grid; gap: 1.25rem; }
@media (min-width: 960px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); align-items: end; gap: 3rem; }
}
.page-hero__title { font-size: var(--fs-h1); color: #fff; }
.page-hero__lead { color: var(--text-inv-2); max-width: 58ch; font-size: 1.06rem; }

/* ------------------------------------------------------------- 404 page */
.notfound__code {
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: .9;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3);
  margin-block-end: .35rem;
}
.notfound__hint { color: var(--text-inv-2); max-width: 46ch; }
.notfound__links {
  display: grid;
  gap: .6rem;
  align-content: start;
}
.notfound__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.notfound__link:hover {
  border-color: var(--cyan);
  background: rgba(86, 201, 232, .08);
  transform: translateX(-3px);
}
[dir="ltr"] .notfound__link:hover { transform: translateX(3px); }
.notfound__link .ico-arrow { width: 1.15rem; height: 1.15rem; flex: none; color: var(--cyan); }
.page-hero__meta {
  display: grid;
  gap: .8rem;
  padding: 1.35rem 1.5rem;
  border-inline-start: 2px solid var(--cyan);
  background: rgba(255, 255, 255, .04);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.page-hero__meta div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.page-hero__meta dt { color: var(--text-inv-2); }
.page-hero__meta dd { font-weight: 700; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text-inv-2);
  margin-block-end: 1.5rem;
}
.crumbs a { transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--cyan); }
.crumbs span[aria-hidden] { opacity: .45; }

/* --------------------------------------------------------------------------
   7. Trust strip
   -------------------------------------------------------------------------- */
.trust {
  background: var(--surface-brand-2);
  color: var(--text-inv);
  border-block-end: 1px solid rgba(255, 255, 255, .08);
}
.trust__grid {
  display: grid;
  gap: 1rem;
  padding-block: 1.75rem;
}
@media (min-width: 640px) { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.trust__item { display: flex; align-items: flex-start; gap: .7rem; }
.trust__item svg { width: 1.15rem; height: 1.15rem; color: var(--cyan); flex: none; margin-block-start: .3rem; }
.trust__item p { font-size: .9rem; color: var(--text-inv-2); line-height: 1.6; }

/* --------------------------------------------------------------------------
   8. Pillars (Discover)
   -------------------------------------------------------------------------- */
.pillars { display: grid; gap: 1rem; }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.85rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 22rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.pillar::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--blue-500));
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform .4s var(--ease);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.pillar:hover::before { transform: scaleX(1); transform-origin: inline-start; }
.pillar__num {
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--line);
  letter-spacing: -.04em;
}
.pillar__icon {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--blue-100);
  color: var(--blue-500);
}
.pillar__icon svg { width: 1.5rem; height: 1.5rem; }
.pillar__title { font-size: 1.35rem; }
.pillar__desc { color: var(--text-2); font-size: .95rem; flex: 1; }
.pillar__link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--blue-500); font-size: .9rem; }
.pillar__link svg { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.pillar:hover .pillar__link svg { transform: translateX(-4px); }

/* --------------------------------------------------------------------------
   9. Services
   -------------------------------------------------------------------------- */
.svc-grid { display: grid; gap: .9rem; }
@media (min-width: 640px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.6rem 1.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.svc:hover { transform: translateY(-4px); border-color: var(--blue-400); box-shadow: var(--shadow); }
.svc__icon {
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--blue-500);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.svc:hover .svc__icon { background: var(--blue-500); color: #fff; }
.svc__icon svg { width: 1.4rem; height: 1.4rem; }
.svc__title { font-size: 1.08rem; font-weight: 800; color: var(--text); }
.section--dark .svc__title { color: var(--text) !important; }
.svc__desc { font-size: .9rem; color: var(--text-2); }
.svc__index {
  position: absolute;
  inset-block-start: 1.4rem;
  inset-inline-end: 1.4rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-3);
  letter-spacing: .1em;
}

/* Detailed service rows (services page) */
.svc-rows { display: grid; gap: 1rem; }
.svc-row {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-row:hover { border-color: var(--blue-400); box-shadow: var(--shadow); }
@media (min-width: 860px) {
  .svc-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); align-items: start; gap: 2.5rem; }
}
.svc-row__head { display: flex; align-items: flex-start; gap: 1rem; }
.svc-row__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--blue-500);
  padding-block-start: .45rem;
}
.svc-row__title { font-size: var(--fs-h3); margin-block-end: .6rem; }
.svc-row__desc { color: var(--text-2); font-size: .97rem; }
.svc-row__list { display: grid; gap: .55rem; }
.svc-row__list li {
  display: flex; gap: .65rem;
  font-size: .93rem; color: var(--text-2);
}
.svc-row__list svg { width: 1rem; height: 1rem; color: var(--blue-500); flex: none; margin-block-start: .45rem; }

/* --------------------------------------------------------------------------
   10. Works
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-end: 2rem;
}
.chip {
  padding: .5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--white);
  transition: all .25s var(--ease);
  display: inline-flex; align-items: center; gap: .45rem;
}
.chip:hover { border-color: var(--blue-400); color: var(--blue-500); }
.chip[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}
.chip b { font-family: var(--font-mono); font-size: .72rem; opacity: .85; font-weight: 500; }

.works-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.work-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.work-card[hidden] { display: none; }
.work-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
}
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.work-card:hover .work-card__media img { transform: scale(1.06); }
.work-card__tag {
  position: absolute;
  inset-block-start: .85rem;
  inset-inline-start: .85rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(10, 21, 36, .78);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.work-card__body {
  padding: 1.15rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.work-card__title { font-size: 1.06rem; font-weight: 800; line-height: 1.45; }
.work-card__meta {
  margin-block-start: auto;
  padding-block-start: .8rem;
  border-block-start: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .82rem; color: var(--text-3);
}
.work-card__cta { color: var(--blue-500); display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.work-card__cta svg { width: .95rem; height: .95rem; transition: transform .3s var(--ease); }
.work-card:hover .work-card__cta svg { transform: translateX(-3px); }

.work-empty {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-3);
}

/* Work detail */
.work-hero {
  position: relative;
  background: var(--surface-brand);
  color: var(--text-inv);
  overflow: hidden;
  padding-block: calc(var(--header-h) + 2.5rem) 3rem;
}
.work-hero__title { font-size: var(--fs-h1); color: #fff; max-width: 22ch; }
.work-hero__grid {
  display: grid;
  gap: 2rem;
  align-items: end;
  margin-block-start: 2rem;
}
@media (min-width: 900px) {
  .work-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
}
.work-spec {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  overflow: hidden;
}
.work-spec__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem;
  font-size: .88rem;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
}
.work-spec__row:first-child { border-block-start: 0; }
.work-spec__row dt { color: var(--text-inv-2); }
.work-spec__row dd { font-weight: 700; text-align: start; }

.gallery { display: grid; gap: 1rem; }
@media (min-width: 760px) { .gallery--2 { grid-template-columns: repeat(2, 1fr); } }
.gallery__btn {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
.gallery__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery__btn:hover img { transform: scale(1.05); }
.gallery__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 12, 23, .5), transparent 55%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.gallery__btn:hover::after { opacity: 1; }

.work-nav {
  display: grid;
  gap: 1rem;
  padding-block: 2rem;
  border-block-start: 1px solid var(--line);
}
@media (min-width: 760px) { .work-nav { grid-template-columns: 1fr 1fr; } }
.work-nav a {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.work-nav a:hover { border-color: var(--blue-400); transform: translateY(-3px); }
.work-nav small { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; color: var(--text-3); text-transform: uppercase; }
.work-nav strong { font-size: 1rem; }
.work-nav a:last-child { text-align: end; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 9, 17, .94);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__fig { max-width: min(100%, 68rem); width: 100%; }
.lightbox__fig img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--navy-900);
}
.lightbox__cap {
  margin-block-start: 1rem;
  display: flex; justify-content: space-between; gap: 1rem;
  color: var(--text-inv-2); font-size: .85rem;
}
.lightbox__close, .lightbox__nav {
  position: absolute;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  background: rgba(6, 12, 23, .5);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(86, 201, 232, .2); border-color: var(--cyan); }
.lightbox__close { inset-block-start: 1.25rem; inset-inline-end: 1.25rem; }
.lightbox__nav--prev { inset-inline-start: 1.25rem; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__nav--next { inset-inline-end: 1.25rem; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox svg { width: 1.3rem; height: 1.3rem; }

/* --------------------------------------------------------------------------
   11. Team / expertise
   -------------------------------------------------------------------------- */
.team-list { border-block-start: 1px solid var(--line); }
.team-row { border-block-end: 1px solid var(--line); }
.team-row__head {
  width: 100%;
  display: grid;
  grid-template-columns: 2.75rem 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 0;
  text-align: start;
  transition: color .25s var(--ease);
}
@media (min-width: 760px) {
  .team-row__head { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 16rem) auto; gap: 1rem; }
}
/* Keep photos visible on small screens; align names to a common column so
   long secondary roles don't push the block around. */
@media (max-width: 759px) {
  .team-row__head {
    grid-template-columns: 2.25rem 3rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .6rem;
    row-gap: .25rem;
  }
  .team-row__num { justify-self: center; font-size: .7rem; }
  .team-row__photo { display: block !important; width: 3rem; height: 3rem; }
  .team-row__head > span:nth-child(3) {
    grid-column: 3 / 4;
    min-width: 0;
    overflow: hidden;
  }
  .team-row__name { word-break: break-word; font-size: .98rem; }
  .team-row__role { word-break: break-word; font-size: .8rem; }
  .team-row__toggle { grid-column: 4 / 5; width: 1.9rem; height: 1.9rem; }
}
.team-row__num {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--text-3);
  letter-spacing: .1em;
}
.team-row__photo {
  width: 3.25rem; height: 3.25rem;
  border-radius: 10px;
  object-fit: cover;
  background: var(--paper-2);
}
.team-row__name { font-size: 1.05rem; font-weight: 800; }
.team-row__role { font-size: .87rem; color: var(--text-2); }
.team-row__toggle {
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--text-2);
  transition: transform .3s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  flex: none;
}
.team-row__toggle svg { width: 1rem; height: 1rem; }
.team-row[open] .team-row__toggle,
.team-row.is-open .team-row__toggle { transform: rotate(180deg); border-color: var(--cyan); color: var(--blue-500); }
.team-row__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.team-row.is-open .team-row__panel { grid-template-rows: 1fr; }
.team-row__panel > div { overflow: hidden; }
.team-row__bio {
  padding: 0 0 1.5rem;
  color: var(--text-2);
  font-size: .95rem;
  max-width: 72ch;
}
@media (min-width: 760px) { .team-row__bio { padding-inline-start: 4.5rem; } }
.team-row__bio p + p { margin-block-start: .85rem; }
.team-row__bio strong { color: var(--text); }

.group-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.75rem; }

/* Team cards (home preview) */
.team-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.team-card {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.team-card:hover { transform: translateY(-5px); border-color: rgba(86, 201, 232, .45); }
.team-card__img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; filter: saturate(.9); }
.team-card__body { padding: 1rem 1.1rem 1.2rem; }
.team-card__name { font-size: 1rem; font-weight: 800; color: #fff; }
.team-card__role { font-size: .8rem; color: var(--text-inv-2); margin-block-start: .25rem; }

/* --------------------------------------------------------------------------
   13. Clients marquee
   -------------------------------------------------------------------------- */
/* The track holds two identical copies of the logo list. A seamless loop
   therefore has to travel exactly one list + one gap, which is
   50% of the track width PLUS half of the flex gap (the gap that sits
   between the two copies is not part of the 50%). */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
.marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - .5rem)); }
}
/* The tile is a flex box on purpose: inside a grid item the row track is
   auto-sized, so a percentage max-height on the logo would resolve to
   "none" and every square logo would overflow (and get clipped) by the
   half. In a flex container the percentage resolves against the definite
   content box, so "max-height:100%" really caps the artwork. */
.marquee__item {
  flex: none;
  width: 12rem; height: 6.75rem;
  display: flex; align-items: center; justify-content: center;
  padding: .7rem;
  background: var(--logo-plate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.marquee__item img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 1;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.marquee__item:hover { transform: translateY(-3px); border-color: var(--blue-400); box-shadow: var(--shadow-sm); }
.marquee__item:hover img { opacity: 1; transform: scale(1.04); }

/* On a phone the strip is narrow, so the tiles shrink a little: two logos
   still fit across the screen and each one stays readable. */
@media (max-width: 640px) {
  .marquee__item { width: 9.5rem; height: 5.25rem; padding: .6rem; }
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
                    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
}

/* --------------------------------------------------------------------------
   13b. Clients directory (clients page)
   -------------------------------------------------------------------------- */
.clients-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.client-card {
  display: grid;
  gap: .9rem;
  align-content: start;
  justify-items: center;
  text-align: center;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.client-card:hover { transform: translateY(-4px); border-color: var(--blue-400); box-shadow: var(--shadow); }
/* Flex, not grid: a grid item cannot resolve max-height:100% against an
   auto-sized row, which let tall logos overflow their plate. */
.client-card__logo {
  width: 100%; height: 8.5rem;
  display: flex; align-items: center; justify-content: center;
  padding: .85rem;
  background: var(--logo-plate);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.client-card__logo img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

/* Phones: one column of big logos rather than two cramped ones. */
@media (max-width: 640px) {
  .clients-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
  .client-card { padding: .85rem; }
  .client-card__logo { height: 7rem; padding: .7rem; }
}

/* --------------------------------------------------------------------------
   14. Values & method
   -------------------------------------------------------------------------- */
.values { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.value {
  padding: 1.6rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .035);
  display: grid;
  gap: .75rem;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.value:hover { border-color: rgba(86, 201, 232, .5); transform: translateY(-4px); background: rgba(255, 255, 255, .06); }
.value__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(86, 201, 232, .12);
  color: var(--cyan);
}
.value__icon svg { width: 1.35rem; height: 1.35rem; }
.value h3 { font-size: 1.1rem; color: #fff; }
.value p { font-size: .9rem; color: var(--text-inv-2); }

.method { display: grid; gap: 1rem; }
@media (min-width: 760px) { .method { grid-template-columns: repeat(4, 1fr); } }
.method__step {
  position: relative;
  padding: 1.6rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.method__step::after {
  content: "";
  position: absolute;
  inset-block-start: 2.35rem;
  inset-inline-start: -1rem;
  width: 1rem; height: 1px;
  background: var(--line);
}
.method__step:last-child::after { display: none; }
@media (max-width: 759px) { .method__step::after { display: none; } }
.method__num { font-family: var(--font-mono); font-size: .78rem; color: var(--blue-500); letter-spacing: .14em; }
.method__step h3 { font-size: 1.05rem; margin-block: .6rem .5rem; }
.method__step p { font-size: .9rem; color: var(--text-2); }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 12% 50%, rgba(86, 201, 232, .22), transparent 60%),
    linear-gradient(120deg, var(--surface-brand-2), var(--surface-brand));
  color: #fff;
}
.cta-band__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.4fr) auto; gap: 3rem; }
}
.cta-band h2 { font-size: var(--fs-h2); color: #fff; }
.cta-band p { color: var(--text-inv-2); max-width: 52ch; margin-block-start: .8rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field > label { font-size: .85rem; font-weight: 700; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(77, 146, 204, .16);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #d4674f; }
.field__hint { font-size: .78rem; color: var(--text-3); }
.form__status {
  padding: .85rem 1.05rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  display: none;
}
.form__status.is-visible { display: block; }
.form__status--ok { background: #e6f6ee; color: #17603f; border: 1px solid #b6e3cd; }
.form__status--err { background: #fdeeea; color: #96341d; border: 1px solid #f2c6bb; }

/* --------------------------------------------------------------------------
   17. Contact page
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 980px) {
  .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
}
.info-list { display: grid; gap: 1.25rem; }
.info-item { display: grid; gap: .25rem; }
.info-item dt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: center;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; font-family: var(--font-mono);
}
.info-item__icon {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--blue-100);
  color: var(--blue-500);
}
.info-item__icon svg { width: 1.25rem; height: 1.25rem; }
.info-item dd {
  font-weight: 700; font-size: 1.02rem; margin-block-start: .2rem;
  padding-inline-start: calc(2.6rem + .75rem);
}
.info-item dd a:hover { color: var(--blue-500); }
.info-item p { font-size: .9rem; color: var(--text-2); font-weight: 400; margin-block-start: .35rem; }

.map {
  margin-block-start: 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-actions {
  margin-block-start: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 2rem;
}

/* --------------------------------------------------------------------------
   17b. WhatsApp
   -------------------------------------------------------------------------- */
.btn--wa { --btn-bg: #25d366; --btn-fg: #06301a; --btn-bd: #25d366; }
.btn--wa:hover { --btn-bg: #1fbe59; --btn-bd: #1fbe59; }
.btn__ico { width: 1.15rem; height: 1.15rem; flex: none; }

.wa-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem .9rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
  margin-block-end: 2rem;
  background: rgba(37, 211, 102, .10);
  border: 1px solid rgba(37, 211, 102, .40);
  border-radius: var(--radius-lg);
}
.wa-card__icon {
  grid-row: span 2;
  width: 2.85rem; height: 2.85rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #06301a;
  flex: none;
}
.wa-card__icon svg { width: 1.55rem; height: 1.55rem; }
.wa-card__body strong { display: block; font-size: 1rem; line-height: 1.3; }
.wa-card__body p { margin: .2rem 0 0; font-size: .88rem; color: var(--text-2); }
.wa-card .btn { grid-column: 1 / -1; justify-self: start; margin-block-start: .55rem; }

.footer__wa { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: #25d366; }
.footer__wa:hover { color: #4ce784; }
.footer__wa svg { flex: none; }

.wa-float {
  position: fixed;
  inset-block-end: 1.35rem;
  inset-inline-end: 1.35rem;
  z-index: 90;
  width: 3.6rem; height: 3.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #06301a;
  box-shadow: 0 10px 28px rgba(37, 211, 102, .40), 0 2px 6px rgba(0, 0, 0, .22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(37, 211, 102, .55), 0 2px 6px rgba(0, 0, 0, .22); }
.wa-float svg { width: 1.95rem; height: 1.95rem; }
@media (max-width: 520px) {
  .wa-float { width: 3.2rem; height: 3.2rem; inset-block-end: 1rem; inset-inline-end: 1rem; }
  .wa-float svg { width: 1.7rem; height: 1.7rem; }
}

.panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--surface-brand);
  color: var(--text-inv-2);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .92rem;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; } }
.footer__brand { display: flex; flex-direction: column; gap: 1.1rem; max-width: 34ch; }
.footer__logo { display: flex; align-items: center; gap: .7rem; }
.footer__logo img { width: 2.6rem; height: 2.6rem; object-fit: contain; background: #fff; border-radius: 6px; padding: .18rem; }
.footer__logo strong { color: #fff; font-size: 1.1rem; }
.footer h3 {
  color: #fff;
  font-size: .8rem;
  font-family: var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-block-end: 1rem;
  font-weight: 600;
}
.footer__list { display: grid; gap: .6rem; }
.footer__list a { transition: color .2s var(--ease); }
.footer__list a:hover { color: var(--cyan); }
.footer__contact { display: grid; gap: .7rem; }
.footer__contact a:hover { color: var(--cyan); }
.footer__bottom {
  margin-block-start: 2.75rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   19. Reveal animation
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   20. Utilities
   -------------------------------------------------------------------------- */
.stack-sm > * + * { margin-block-start: .75rem; }
.stack > * + * { margin-block-start: 1.25rem; }
.stack-lg > * + * { margin-block-start: 2rem; }
.text-center { text-align: center; }
.mt-auto { margin-block-start: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--font-mono); }
.hide { display: none !important; }

/* --------------------------------------------------------------------------
   21. Theme toggle + language switch
   -------------------------------------------------------------------------- */
.header__tools {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: none;
}

.theme-toggle,
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 2.6rem;
  min-width: 2.6rem;
  padding-inline: .7rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  color: var(--on-hero-fg);
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  transition: color .3s var(--ease), border-color .3s var(--ease),
              background-color .3s var(--ease), transform .25s var(--ease);
}
.theme-toggle:hover,
.lang-switch:hover { transform: translateY(-2px); border-color: var(--cyan); color: var(--cyan); }
.header.is-stuck .theme-toggle,
.header.is-stuck .lang-switch { border-color: var(--line); color: var(--header-fg); }
.header.is-stuck .theme-toggle:hover,
.header.is-stuck .lang-switch:hover { border-color: var(--blue-400); color: var(--blue-500); }

.theme-toggle svg { width: 1.05rem; height: 1.05rem; }
.theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: block; }

.lang-switch { min-width: auto; }

/* Which label is visible depends on the width:
   > 1000px  -> the full word ("English" / "العربية")
   <= 1000px -> the short code ("EN" / "AR"), set in the header media query.
   These rules must stay in a min-width query: a bare rule here would win
   over the max-width block below (same specificity, later in the file) and
   leave the button empty on small screens. */
@media (min-width: 1001px) {
  .lang-switch__full { display: inline; }
  .lang-switch__short { display: none; }
}

/* --------------------------------------------------------------------------
   22. Header on small screens (<= 1000px)

   This block lives AFTER the base header rules on purpose: a media query
   adds no specificity, so a base rule declared later in the file would
   silently win over it (that is what left the language button empty and
   the small-screen sizes dead).
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav, .header__cta { display: none; }
  .burger { display: grid; }
  /* The header row must never grow wider than the screen, otherwise the
     burger is pushed out of view (body has overflow-x: hidden, so it
     simply disappears). Everything flexible shrinks instead. */
  .header__inner { gap: .75rem; }
  .burger { flex: none; }
  .brand { flex: 0 1 auto; min-width: 0; gap: .55rem; }
  .brand__mark { flex: none; width: 2.3rem; height: 2.3rem; }
  .brand__text { min-width: 0; overflow: hidden; }
  .brand__name { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__sub { display: none; }
  .header__tools { gap: .3rem; }
  .theme-toggle { min-width: 2.5rem; height: 2.5rem; padding-inline: .3rem; }
  /* "English" / "العربية" is too wide for a phone header: use the code. */
  .lang-switch { height: 2.5rem; min-width: 2.5rem; padding-inline: .45rem; font-size: .7rem; letter-spacing: .04em; }
  .lang-switch__full { display: none; }
  .lang-switch__short { display: inline; }
}

/* --------------------------------------------------------------------------
   23. Direction-aware details (RTL ⇄ LTR)
   -------------------------------------------------------------------------- */
[dir="ltr"] .ico-arrow { transform: scaleX(-1); }
[dir="ltr"] .btn:hover .ico-arrow { transform: scaleX(-1) translateX(3px); }
[dir="ltr"] .arrow-link:hover .ico-arrow { transform: scaleX(-1) translateX(3px); }
[dir="ltr"] .pillar:hover .pillar__link .ico-arrow { transform: scaleX(-1) translateX(4px); }
[dir="ltr"] .work-card:hover .work-card__cta .ico-arrow { transform: scaleX(-1) translateX(3px); }
[dir="ltr"] .lightbox__nav svg { transform: scaleX(-1); }

[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(50% + .5rem)); }
}

/* Latin copy reads better with a touch more tracking */
[dir="ltr"] body { letter-spacing: .002em; }
[dir="ltr"] .sec-head__eyebrow,
[dir="ltr"] .hero__eyebrow { letter-spacing: .2em; }