/* ============================================================
   Sami AG Portfolio — v11
   Design language ported from nujum16.com
   Near-black ground · ice-blue accent · hairline rules ·
   wide-tracked light display type · loader + curtain page transition
   ============================================================ */

:root {
  /* ---- ground ---- */
  --bg: #030405;
  --bg-2: #070a0e;
  --panel: #080b10;

  /* ---- ink ramp ---- */
  --text: #e9edf3;
  --muted: rgba(233, 237, 243, 0.66);
  --muted-2: rgba(233, 237, 243, 0.40);
  --ink-4: rgba(233, 237, 243, 0.24);

  /* ---- accent ---- */
  --acc: #aecbf5;
  --accent: #aecbf5;
  --accent-2: #c9dcf8;
  --accent-deep: #7ea6dd;
  --accent-soft: rgba(174, 203, 245, 0.12);
  --accent-softer: rgba(174, 203, 245, 0.06);

  /* ---- hairlines ---- */
  --rule: rgba(174, 203, 245, 0.16);
  --line: rgba(174, 203, 245, 0.16);
  --border: rgba(174, 203, 245, 0.16);

  /* ---- surfaces ---- */
  --surface: rgba(174, 203, 245, 0.035);
  --surface-2: rgba(174, 203, 245, 0.07);
  --glass: rgba(3, 4, 5, 0.72);
  --sage: #aecbf5;
  --sage-soft: rgba(174, 203, 245, 0.10);
  --amber: #aecbf5;

  /* ---- glow ---- */
  --grad: linear-gradient(120deg, #e9edf3 0%, #aecbf5 100%);
  --glow: 0 0 30px rgba(174, 203, 245, 0.18);
  --shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.9);
  --box-shadow: var(--shadow);
  --indigo-2: #aecbf5;

  /* ---- rhythm ---- */
  --gx: clamp(20px, 5vw, 72px);
  --container: 82rem;
  --pad: clamp(4.5rem, 9vw, 9rem);
  --nav-h: 74px;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 2px;

  /* ---- type ---- */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", "SF Mono", "Roboto Mono", monospace;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast: 0.4s;
  --t-mid: 0.6s;
  --t-slow: 1.1s;
  --t-reveal: 1.2s;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-tap-highlight-color: transparent;
  padding-top: env(safe-area-inset-top, 0px);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60rem 42rem at 8% -12%, rgba(174, 203, 245, 0.10), transparent 62%),
    radial-gradient(52rem 38rem at 104% 4%, rgba(120, 160, 220, 0.07), transparent 60%),
    var(--bg);
}

::selection { background: var(--acc); color: #030405; }
:focus-visible { outline: 1px solid var(--acc); outline-offset: 4px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
[hidden] { display: none !important; }

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

/* ============================================================
   TYPE SCALE — light weight, wide tracking, uppercase
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* micro label — the workhorse of the system */
.micro, .section__eyebrow, .page-hero__kicker, .hero__kicker,
.stat__label, .contact-card__label, .footer__copy, .form-hint {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.7;
}

.container { width: min(100% - (var(--gx) * 2), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - (var(--gx) * 2), 54rem); margin-inline: auto; }

/* ============================================================
   LOADER — centred wordmark + hairline bar
   ============================================================ */

.pt-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
}
.pt-loader.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
/* landing from a curtain wipe — tighten the hand-off */
.pt-loader.is-quick { transition-duration: 0.35s; }
.pt-loader.is-quick .pt-loader__bar i,
.pt-loader.is-quick .pt-loader__pct { transition-duration: 0.1s; }
.pt-loader__wm {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--muted);
  padding-inline-start: 0.42em;
}
.pt-loader__bar {
  position: relative; width: 100vw; height: 2px;
  background: transparent;
}
/* a shooting star: a glowing head towing a fading tail,
   sweeping from the left edge of the page to the right edge as progress runs */
.pt-loader__bar i {
  position: absolute; top: 50%; left: 0;
  width: 140px; height: 2px;
  transform: translate(-100%, -50%);
  background: linear-gradient(90deg, transparent 0%, rgba(174, 203, 245, 0.25) 45%, var(--acc) 100%);
  border-radius: 999px;
  transition: transform 0.2s linear;
  will-change: transform;
}
.pt-loader__bar i::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px var(--acc), 0 0 26px 8px rgba(174, 203, 245, 0.45);
}
.pt-loader__pct {
  position: absolute; top: 100%; left: 0;
  transform: translate(-50%, 0.5em);
  transition: transform 0.2s linear;
  white-space: nowrap;
  will-change: transform;
  font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 500; font-variant-numeric: tabular-nums;
}

/* ============================================================
   CURTAIN — page transition
   ============================================================ */

.pt-curtain {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transform: scaleY(0);
  transform-origin: center;
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}
.pt-curtain.is-in {
  visibility: visible; pointer-events: all;
  transform: scaleY(1);
  transition: transform 0.62s var(--ease);
}
.pt-curtain.is-out {
  visibility: visible; pointer-events: none;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.7s var(--ease) 0.06s, visibility 0s linear 0.76s;
}
.pt-curtain__wm {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--ink-4);
  padding-inline-start: 0.42em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease) 0.24s, transform 0.5s var(--ease) 0.24s;
}
.pt-curtain.is-in .pt-curtain__wm { opacity: 1; transform: none; }
/* the hairline that snaps across the seam */
.pt-curtain__line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  transform: scaleX(0); opacity: 0;
}
.pt-curtain.is-in .pt-curtain__line {
  transform: scaleX(1); opacity: 0.9;
  transition: transform 0.5s var(--ease) 0.1s, opacity 0.4s linear 0.1s;
}
.pt-curtain.is-out .pt-curtain__line { opacity: 0; transition: opacity 0.2s linear; }

/* ============================================================
   SCROLL PROGRESS — 1px hairline across the very top
   ============================================================ */

.pt-prog {
  position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 1200;
  background: linear-gradient(90deg, var(--acc), #fff);
  transform: scaleX(0); transform-origin: left;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.pt-prog.is-live { opacity: 0.7; }

/* ============================================================
   NAVBAR — fixed, centred hairline links
   ============================================================ */

.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1100; min-height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}
.navbar.is-scrolled {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-color: var(--rule);
}
.navbar__inner {
  width: min(100% - (var(--gx) * 2), var(--container));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-top: env(safe-area-inset-top, 0px);
}
.navbar__brand {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 500; font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted-2);
  transition: color 0.4s var(--ease);
  white-space: nowrap;
}
.navbar__brand img { height: 30px; width: auto; }
.navbar__brand:hover { color: var(--text); text-shadow: 0 0 12px rgba(174, 203, 245, 0.55); }

.navbar__links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.navbar__link {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted-2);
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease);
}
.navbar__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--acc);
  transform: scaleX(0); transform-origin: center; opacity: 0.8;
  transition: transform 0.6s var(--ease);
}
.navbar__link:hover {
  color: var(--text);
  text-shadow: 0 0 12px rgba(174, 203, 245, 0.85), 0 0 28px rgba(174, 203, 245, 0.4);
}
.navbar__link:hover::after { transform: scaleX(1); }
.navbar__link.is-active { color: var(--text); }
.navbar__link.is-active::after { transform: scaleX(1); }

.navbar__toolbar { display: flex; align-items: center; gap: 0.6rem; }

.lang-toggle {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 0.95rem;
  background: transparent;
  border: 1px solid var(--rule); border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted-2); cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.lang-toggle:hover { color: var(--text); border-color: rgba(174, 203, 245, 0.5); background: var(--accent-softer); }

.navbar__burger {
  display: none; width: 38px; height: 34px;
  background: transparent;
  border: 1px solid var(--rule); border-radius: 999px;
  color: var(--muted); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.navbar__burger:hover { border-color: rgba(174, 203, 245, 0.5); color: var(--text); }
.navbar__burger span {
  display: block; width: 15px; height: 1px; background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.navbar__burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.navbar__burger.is-open span:nth-child(2) { opacity: 0; }
.navbar__burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.navbar__drawer {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  z-index: 1090;
  padding: 0 var(--gx) 1.6rem;
  background: var(--glass);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transform: translateY(-10px); opacity: 0; visibility: hidden;
  transition: transform 0.45s var(--ease), opacity 0.4s var(--ease), visibility 0.45s;
}
.navbar__drawer.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.navbar__drawer .drawer__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  transition: color 0.4s var(--ease);
}
.navbar__drawer .drawer__link:hover { color: var(--text); }
.navbar__drawer .drawer__link.is-active { color: var(--text); }
.navbar__drawer .drawer__link.is-active::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 18px; height: 1px; background: var(--acc);
}

/* ============================================================
   HERO — home
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 3rem) 0 4.5rem;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; filter: saturate(0.6) contrast(1.05); }
/* Three stacked scrims over the home hero video.
   Alphas are 78% of their ORIGINAL values (0.92/0.55, 0.94/0.6, 0.86/0.5) ->
   0.81/0.484, 0.827/0.528, 0.757/0.44. The video itself is unchanged at
   opacity 0.22; it is this scrim that was too heavy.
   Note the alpha scale and the visible brightness do NOT move together here:
   the composite is V*(1-a) + bg*a against a near-black background, so this
   22% alpha cut is what actually delivers the ~+35% the brief asked for
   (first pass 0.92->0.828 gave +30%, then a further 5% visible lift).
   The video's own opacity was raised 0.22 -> 0.35 afterwards, so the scrim
   values above and that opacity must be read together - changing one without
   the other will not give the brightness the numbers here suggest. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 4, 5, 0.81) 0%, rgba(3, 4, 5, 0.484) 34%, rgba(3, 4, 5, 0) 100%),
    linear-gradient(0deg, rgba(3, 4, 5, 0.827) 0%, rgba(3, 4, 5, 0.528) 40%, rgba(3, 4, 5, 0) 100%),
    linear-gradient(90deg, rgba(3, 4, 5, 0.757) 0%, rgba(3, 4, 5, 0.44) 40%, rgba(3, 4, 5, 0) 66%);
}
/* Fine square grid over the hero media — a faint resting grid whose cells
   light up (ice-blue accent) under the pointer. Painted on a canvas by
   main.js; purely decorative, so it never intercepts the pointer. */
.hero__gridfx {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__gridfx canvas {
  display: block; width: 100%; height: 100%;
  mix-blend-mode: screen;
}
.hero > .container { position: relative; z-index: 1; }

.hero__grid {
  display: grid; grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.hero__copy { max-width: 44rem; }

.hero__kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--acc);
  margin-bottom: 1.6rem;
}
.hero__kicker::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 3px rgba(174, 203, 245, 0.15);
}
.hero__title {
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.28;
  color: var(--text);
  margin: 0;
}
.hero__title .grad {
  color: var(--acc);
  text-shadow: 0 0 22px rgba(174, 203, 245, 0.35);
}
.hero__sub {
  margin-top: 1.6rem;
  font-size: clamp(0.95rem, 1.35vw, 1.08rem);
  font-weight: 300;
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.8;
}
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 2rem; }
.badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(3, 4, 5, 0.5);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.badge:hover { color: var(--text); border-color: rgba(174, 203, 245, 0.42); }

.hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }

.hero__stats {
  display: flex; flex-direction: column;
  padding-top: 1.2rem;
  gap: 1.4rem;
}
.stat { min-width: 0; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}
.stat__label { color: var(--muted-2); }

/* ============================================================
   BUTTONS / CTA
   ============================================================ */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 500; font-size: 10px;
  letter-spacing: 0.26em; text-transform: uppercase;
  padding: 1rem 1.9rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.35s var(--ease), background-color 0.4s var(--ease);
}
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--acc);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:hover { color: var(--bg); border-color: var(--acc); transform: translateY(-2px); }
.btn--primary {
  color: var(--bg);
  background: var(--acc);
  border-color: var(--acc);
  box-shadow: 0 0 30px -6px rgba(174, 203, 245, 0.45);
}
.btn--primary::after { background: #fff; }
.btn--primary:hover { color: var(--bg); box-shadow: 0 0 44px -4px rgba(174, 203, 245, 0.6); }
.btn--ghost { color: var(--muted); }
.btn--ghost:hover { color: var(--bg); }
.btn--lg { padding: 1.15rem 2.4rem; font-size: 10.5px; }
.btn--sm { padding: 0.8rem 1.4rem; font-size: 9.5px; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */

.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(4.5rem, 10vw, 8rem)) 0 clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38rem 22rem at 50% -6%, rgba(174, 203, 245, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(3, 4, 5, 0.88) 0%, rgba(3, 4, 5, 0) 100%);
}
.page-hero::after {
  content: "";
  position: absolute; left: 50%; bottom: 0; width: min(60rem, 90%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}
.page-hero__logo { display: inline-block; margin-bottom: 1.6rem; }
.page-hero__logo img { height: 34px; width: auto; margin-inline: auto; }
.page-hero__kicker { color: var(--acc); margin-bottom: 1rem; }
.page-hero__title {
  font-size: clamp(1.5rem, 3.6vw, 2.8rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.32;
  max-width: 24ch;
  /* start-aligned: every hero here is a left-aligned (RTL: right-aligned)
     block, and `margin: 0` is what pins the max-width box to that edge.
     Narrow screens re-centre - see the max-width: 40rem block. */
  margin: 0;
}
.page-hero__lead {
  color: var(--muted);
  margin: 1.4rem auto 0;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 300;
  max-width: 52ch;
}
.page-hero__divider {
  width: 64px; height: 1px; margin: 2.2rem auto 0;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
}

/* Single-column text heroes (services, experience, education, profiles).
   No second element to sit beside, but the kicker / title / lead / divider
   should still share one start edge and line up with the two-column heroes on
   about and recognition - same 60rem measure, same left edge. */
.page-hero--text {
  /* no logo in these heroes, so reclaim the vertical space it used to take */
  padding-top: calc(var(--nav-h) + clamp(2.2rem, 5.5vw, 4.4rem));
  /* logical, not `left` - the Arabic hero must hug the right edge */
  text-align: start;
}
.page-hero--text .page-hero__text {
  max-width: 60rem;
  margin-inline: auto;
}
/* auto margins would re-centre each line; pin them to the start edge instead */
.page-hero--text .page-hero__title,
.page-hero--text .page-hero__lead { margin-inline: 0; }
.page-hero--text .page-hero__kicker { margin-bottom: 0.9rem; }
.page-hero--text .page-hero__divider { margin-inline: 0; }

/* Education page only: the six certification badges sit beside the title.
   Same two-column body as the recognition hero, so the kicker, title and
   divider left-align to one edge and the badges occupy the second column.
   Badges are pre-squared light tiles, so a plain equal-width grid lines them
   up without any per-badge sizing - each is already 512x512. */
.page-hero--certs {
  padding-top: calc(var(--nav-h) + clamp(2.2rem, 5.5vw, 4.4rem));
  text-align: start;
}
.page-hero--certs .page-hero__body {
  display: grid;
  /* wider than the recognition column: four tiles per row need the room, or
     each one drops to ~93px and the badge text stops being readable */
  grid-template-columns: minmax(0, 1fr) clamp(260px, 38vw, 440px);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 60rem;
  margin-inline: auto;
}
.page-hero--certs .page-hero__kicker { margin-bottom: 0.9rem; }
.page-hero--certs .page-hero__divider { margin-inline: 0; }
/* Flex wrap, not grid: seven tiles don't divide evenly into any column count,
   and wrap + justify-content: center centres the short final row on its own.
   A grid would leave that row hard against the start edge with a gap after it.
   Each tile is a fixed fraction of the row so all seven stay identical, and
   the basis is what sets the two-row split at this column width. */
.page-hero__certs {
  --certs-gap: clamp(0.45rem, 1.1vw, 0.7rem);
  --certs-per-row: 4;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--certs-gap);
  max-width: 100%;
  min-width: 0;
}
.page-hero__cert {
  flex: 0 0 calc((100% - (var(--certs-per-row) - 1) * var(--certs-gap)) / var(--certs-per-row));
}
.page-hero__cert {
  position: relative;
  display: block;
  min-width: 0;
  /* the tile is already light artwork - a hairline keeps it from bleeding
     into the page without needing a heavy border */
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.page-hero__cert:last-child {
  grid-column: 2;
  justify-self: center;
  width: 100%;
}
/* Same structure as .page-hero__portrait::after - page colour painted over the
   artwork so each tile's edges soften into the background instead of reading
   as hard white squares. An overlay, not a mask, for the same reason: a mask
   would let the hero's ::before glow bleed through the faded edges.

   Stops sit between the portrait's and a light touch: strong enough to sink the
   light tiles into the page, but they stop short of the portrait's full
   page-colour edge, which crushed the badge text when it was tried here. */
.page-hero__cert::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(76% 76% at 50% 45%,
      transparent 0%,
      rgba(3, 4, 5, 0.22) 44%,
      rgba(3, 4, 5, 0.5) 70%,
      rgba(3, 4, 5, 0.72) 100%),
    linear-gradient(180deg, rgba(3, 4, 5, 0.2) 0%, transparent 32%, rgba(3, 4, 5, 0.24) 100%);
  opacity: 1;
  transition: opacity 0.9s var(--ease);
}
.page-hero__cert:hover::after { opacity: 0.25; }
.page-hero__cert img {
  display: block;
  width: 100%;
  height: auto;
  /* intrinsic 1:1; object-fit guards a tile that ever ships non-square */
  aspect-ratio: 1;
  object-fit: contain;
}

@media (hover: hover) {
  .page-hero__cert:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  }
}

/* Experience page only: the three employer/brand marks sit beside the title,
   reusing the education hero's tile row and flex-wrap layout. These tiles are
   DARK, not light, which changes two things the education tiles do not need:

   - No ::after veil. That gradient paints page colour over the artwork; on a
     near-black tile it would only bury marks that are already light. So the
     tile is lifted OFF the page with a hairline inset ring rather than sunk
     into it with an overlay.
   - Hover brightens instead of uncovering. Same intent - the mark gains
     emphasis on hover - but achieved with filter rather than veil opacity.

   Tile colour is --bg-2, the site's existing raised-dark token, and the ring
   is --line, so nothing here introduces a new colour. */
.page-hero--exp { text-align: start; }
.page-hero--exp .page-hero__kicker { margin-bottom: 0.9rem; }
/* The base divider is `margin: 2.2rem auto 0`, which centres it - every other
   hero modifier overrides that to `margin-inline: 0` so the rule pins to the same
   start edge as the kicker and title. Without this the experience divider sat
   220px in from the text at desktop, because only the mobile re-centring rule
   existed here. Narrow screens re-centre it again in the 40rem block. */
.page-hero--exp .page-hero__divider { margin-inline: 0; }
.page-hero--exp .page-hero__body {
  display: grid;
  /* three tiles per row need less room than education's four */
  grid-template-columns: minmax(0, 1fr) clamp(240px, 34vw, 400px);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 60rem;
  margin-inline: auto;
}
.page-hero__exp {
  --exp-gap: clamp(0.5rem, 1.2vw, 0.75rem);
  --exp-per-row: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--exp-gap);
  max-width: 100%;
  min-width: 0;
}
.page-hero__exp-item {
  flex: 0 0 calc((100% - (var(--exp-per-row) - 1) * var(--exp-gap)) / var(--exp-per-row));
  position: relative;
  display: block;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.page-hero__exp-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  transition: filter 0.9s var(--ease);
}
.page-hero__exp-item:hover img { filter: brightness(1.18) saturate(1.05); }

@media (hover: hover) {
  .page-hero__exp-item:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 0 0 1px rgba(174, 203, 245, 0.28),
      0 10px 26px rgba(0, 0, 0, 0.55);
  }
}

/* Recognition page only: the three awarding bodies' wordmarks sit beside the
   title. Mirrors the about hero's two-column body so the kicker, title and
   divider all left-align to the same edge and the marks sit in the second
   column instead of being centred underneath. */
.page-hero--marks {
  /* the 365 Cloud mark is gone from this hero, so reclaim the vertical space
     it used to take - same treatment as the about hero */
  padding-top: calc(var(--nav-h) + clamp(2.2rem, 5.5vw, 4.4rem));
  /* logical, not `left` - the Arabic hero must hug the right edge */
  text-align: start;
}
.page-hero--marks .page-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 310px);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 60rem;
  margin-inline: auto;
}
.page-hero--marks .page-hero__kicker { margin-bottom: 0.9rem; }
/* the divider is a 64px accent, not a full rule: start it at the text edge
   like the about hero rather than re-centring it in the column */
.page-hero--marks .page-hero__divider { margin-inline: 0; }
.page-hero__marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3.2vw, 2.2rem);
  /* keep the wide lockup inside the column instead of forcing the grid wider */
  max-width: 100%;
  min-width: 0;
}
/* the bottom pair is a nested flex row, NOT a 2-col grid: the two cards differ
   in aspect (3.48:1 vs 2.23:1), so auto-sized grid columns would leave the pair
   visibly off-centre. Equal outer gaps centre them properly. */
.page-hero__pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 3.4vw, 2.6rem);
  min-width: 0;
}
/* The marks now carry the same light-card treatment as the education badges,
   so each is a tile rather than bare artwork. The 1+2 arrangement is unchanged:
   ministry on its own line, microsoft and intel paired beneath. */
.page-hero__mark {
  /* Sized by height, not width. The three wordmarks have very different aspects
     (ministry 3.89:1, microsoft and intel 1.91:1), so driving width from the
     column made the ministry card taller than the pair below it at every width
     except 1440. A shared height keeps all three identical everywhere and lets
     each width fall out of its own aspect. */
  --mark-h: clamp(3.6rem, 4.85vw, 4.35rem);
  position: relative;
  display: block;
  min-width: 0;
  height: var(--mark-h);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
/* identical veil to .page-hero__cert::after, so both hero grids read the same */
.page-hero__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(76% 76% at 50% 45%,
      transparent 0%,
      rgba(3, 4, 5, 0.22) 44%,
      rgba(3, 4, 5, 0.5) 70%,
      rgba(3, 4, 5, 0.72) 100%),
    linear-gradient(180deg, rgba(3, 4, 5, 0.2) 0%, transparent 32%, rgba(3, 4, 5, 0.24) 100%);
  opacity: 1;
  transition: opacity 0.9s var(--ease);
}
.page-hero__mark img {
  display: block;
  /* the white card is baked into the file, so the image *is* the tile - sizing
     it by height sizes the card too */
  height: 100%;
  width: auto;
  max-width: 100%;
}
@media (hover: hover) {
  .page-hero__mark:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); }
  .page-hero__mark:hover::after { opacity: 0.25; }
}
/* widths now come from each image's own aspect, so no max-width is needed */
.page-hero__mark--wide { order: -1; }

/* about page only: frameless square portrait set to the right of the title.
   Scoped so the home page's .about-img keeps its own treatment. */
.page-hero--about {
  /* logical, not `left` — the Arabic hero must hug the right edge */
  text-align: start;
  /* no logo in this hero, so reclaim the vertical space it used to take */
  padding-top: calc(var(--nav-h) + clamp(2.2rem, 5.5vw, 4.4rem));
}
.page-hero--about .page-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(130px, 17vw, 210px);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 60rem;
  margin-inline: auto;
}
.page-hero--about .page-hero__kicker { margin-bottom: 0.9rem; }
.page-hero--about .page-hero__divider { margin-inline: 0; }
.page-hero__portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
}
/* Paint the page colour over the photo so it reads as transparent.
   An overlay rather than a mask on purpose: mask-image would let the hero's
   ::before glow bleed through the faded edges instead of going fully to page. */
.page-hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(74% 74% at 50% 44%,
      transparent 0%,
      rgba(3, 4, 5, 0.34) 44%,
      rgba(3, 4, 5, 0.78) 70%,
      var(--bg) 94%),
    linear-gradient(180deg, rgba(3, 4, 5, 0.22) 0%, transparent 30%, rgba(3, 4, 5, 0.3) 100%);
  opacity: 1;
  transition: opacity 0.9s var(--ease);
}
.page-hero__portrait:hover::after { opacity: 0.45; }
.page-hero__portrait img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* pulled toward the page's monochrome so the photo sits in the palette */
  filter: grayscale(0.6) contrast(1.02) brightness(0.92);
  transition: filter 0.8s var(--ease), transform 1.2s var(--ease);
}
.page-hero__portrait:hover img { filter: grayscale(0.15) contrast(1.04) brightness(1); transform: scale(1.02); }
@media (max-width: 40rem) {
  .page-hero--about { text-align: center; }
  .page-hero--about .page-hero__body { grid-template-columns: 1fr; }
  /* recentring needs the title's max-width box recentred too, otherwise the
     narrower 24ch box stays pinned to the start edge and the text sits off-centre */
  .page-hero--about .page-hero__title,
  .page-hero--about .page-hero__divider { margin-inline: auto; }
  .page-hero__portrait { width: min(100%, 190px); margin-inline: auto; }
  /* single-column text heroes: recentre on narrow screens, same as about */
  .page-hero--text { text-align: center; }
  .page-hero--text .page-hero__title,
  .page-hero--text .page-hero__lead { margin-inline: auto; }
  .page-hero--text .page-hero__divider { margin-inline: auto; }
  /* education hero: stack the badge grid under the title and re-centre */
  .page-hero--certs { text-align: center; }
  .page-hero--certs .page-hero__body { grid-template-columns: 1fr; }
  .page-hero--certs .page-hero__title,
  .page-hero--certs .page-hero__divider { margin-inline: auto; }
  /* 4-up no longer fits once the column is full-bleed at 390px - go 2-up so
     each tile stays legible instead of shrinking to ~85px. The row is then
     capped at half the column width, which halves every badge while keeping
     2-per-row and the 2+2+2+1 wrap; margin-inline:auto keeps it centred
     because the flex box is now narrower than its grid cell. */
  .page-hero__certs {
    --certs-per-row: 2;
    margin-top: 1.6rem;
    max-width: 50%;
    margin-inline: auto;
  }
  /* recognition hero: stack the marks under the title and re-centre, matching
     how the about hero collapses on narrow screens */
  .page-hero--marks { text-align: center; }
  .page-hero--marks .page-hero__body { grid-template-columns: 1fr; }
  .page-hero--marks .page-hero__title,
  .page-hero--marks .page-hero__divider { margin-inline: auto; }
  .page-hero__marks { margin-top: 1.6rem; }
  /* experience hero: stack the tiles under the title and re-centre, then go 2-up
     so each tile stays legible - BIT is a 5.4:1 wordmark and shrinks to an
     unreadable ~23px tall at 3-up across a 390px screen */
  .page-hero--exp { text-align: center; }
  .page-hero--exp .page-hero__body { grid-template-columns: 1fr; }
  .page-hero--exp .page-hero__title,
  .page-hero--exp .page-hero__divider { margin-inline: auto; }
  .page-hero__exp { --exp-per-row: 2; margin-top: 1.6rem; }
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section { position: relative; padding-block: var(--pad); }
.section--tint { background: rgba(174, 203, 245, 0.022); }
.section__head { max-width: 50rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section--center .section__head { margin-inline: auto; text-align: center; }
.section__eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--acc);
  margin-bottom: 1.1rem;
}
.section__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--acc); opacity: 0.7; }
.section--center .section__eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--acc); opacity: 0.7; }
.section__title {
  font-size: clamp(1.3rem, 2.7vw, 2.1rem);
  font-weight: 300;
  letter-spacing: 0.16em;
  line-height: 1.4;
  margin-bottom: 1rem;
}
.section__desc { color: var(--muted); font-size: 1rem; font-weight: 300; max-width: 58ch; }

/* ============================================================
   ABOUT
   ============================================================ */

.about-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.about-media { position: relative; }
.about-img {
  position: relative;
  /* frameless, so the overlay can dissolve the photo into the page the same
     way the about hero portrait does */
  overflow: hidden;
}
/* same veil as .page-hero__portrait::after — percentage-based, so the
   proportional fade is identical at 545px and 190px */
.about-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* reaches the exact page colour at the edges so nothing hard ever shows */
  background: radial-gradient(86% 86% at 50% 45%,
      transparent 0%,
      rgba(3, 4, 5, 0.30) 48%,
      rgba(3, 4, 5, 0.72) 76%,
      var(--bg) 100%);
  opacity: 1;
  transition: opacity 0.9s var(--ease);
}
/* the dim veil is permanent — intentionally NOT eased away on hover */
.about-img img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  /* the width/height attributes reserve layout space but must not set the
     rendered height, or they override aspect-ratio and the crop is lost */
  height: auto;
  /* dimmed hard so the portrait dissolves into the near-black page */
  filter: grayscale(0.7) contrast(0.96) brightness(0.5);
  /* melt the photo into the page: no rectangle, no edges — the pixels
     themselves fade to nothing at every border, so the page shows through */
  -webkit-mask-image: radial-gradient(closest-side at 50% 45%, #000 62%, rgba(0, 0, 0, 0) 100%);
          mask-image: radial-gradient(closest-side at 50% 45%, #000 62%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition: filter 0.8s var(--ease), transform 1.2s var(--ease);
}
/* hover keeps the exact resting treatment: no brightening, no zoom, so the
   photo stays dimmed while the pointer is over it */
.about-img:hover img { filter: grayscale(0.7) contrast(0.96) brightness(0.5); transform: none; }
/* freely drifting, slowly rotating squares over the portrait (drawn by main.js) */
.about-img__fx {
  position: absolute; inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
}
.about-card {
  margin-top: 0.1rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--rule);
}
.about-card__label {
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 0.6rem;
}
.about-card__value { color: var(--muted); font-size: 0.92rem; font-weight: 300; }
.about-text p { color: var(--muted); margin-bottom: 1.2rem; font-size: 1rem; font-weight: 300; line-height: 1.8; }
.about-text p strong { color: var(--text); font-weight: 500; }
.about-text p:last-child { margin-bottom: 0; }

/* ============================================================
   SERVICES — hairline panels, no cards
   ============================================================ */

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.svc-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--bg);
  cursor: pointer;
  transition: background-color 0.5s var(--ease);
}
.svc-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(24rem 14rem at 50% 0%, rgba(174, 203, 245, 0.07), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.svc-card:hover, .svc-card.is-expanded { background: #06090d; }
.svc-card:hover::before, .svc-card.is-expanded::before { opacity: 1; }
.svc-card__icon {
  width: 46px; height: 46px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  color: var(--acc);
  margin-bottom: 1.6rem;
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.5s var(--ease);
}
.svc-card:hover .svc-card__icon, .svc-card.is-expanded .svc-card__icon {
  border-color: rgba(174, 203, 245, 0.5);
  box-shadow: 0 0 24px -6px rgba(174, 203, 245, 0.4);
}
.svc-card__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.svc-expand { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s var(--ease), opacity 0.5s var(--ease), margin 0.5s var(--ease); }
.svc-card.is-expanded .svc-expand { max-height: 260px; opacity: 1; margin-top: 1.1rem; }
.svc-expand p { color: var(--muted); font-size: 0.92rem; font-weight: 300; line-height: 1.8; }

/* ============================================================
   EXPERIENCE — hairline timeline + accordion
   ============================================================ */

.timeline { position: relative; max-width: 58rem; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(var(--acc), rgba(174, 203, 245, 0.12), transparent);
}
.tline__item { position: relative; padding-inline-start: 2.8rem; padding-bottom: 1.8rem; }
.tline__item:last-child { padding-bottom: 0; }
.tline__dot {
  position: absolute; left: 0; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--acc);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 0.5s var(--ease);
}
.tline__item:hover .tline__dot { box-shadow: 0 0 0 4px rgba(174, 203, 245, 0.12); }
.tline__head { margin-bottom: 0.5rem; }
.tline__role {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.tline__org {
  display: block; margin-top: 0.3rem;
  color: var(--acc);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
}

.accordion {
  margin-top: 1rem;
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.accordion__item + .accordion__item { border-top: 1px solid var(--rule); }
.accordion__item.is-open { background: rgba(174, 203, 245, 0.045); }
.accordion__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
  padding: 1.05rem 1.2rem;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  text-align: start;
  color: var(--muted);
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.accordion__trigger:hover { color: var(--text); background: var(--accent-softer); }
.accordion__icon {
  flex-shrink: 0; width: 0.85rem; height: 0.85rem;
  color: var(--acc);
  transition: transform 0.5s var(--ease);
}
.accordion__item.is-open .accordion__trigger { color: var(--text); }
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }
.accordion__body { max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease); }
.accordion__content {
  padding: 0.2rem 1.2rem 1.3rem;
  color: var(--muted); font-size: 0.92rem; font-weight: 300; line-height: 1.8;
}
.accordion__content p { margin-bottom: 0.6rem; padding-inline-start: 1.2rem; position: relative; }
.accordion__content p::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.85em;
  width: 0.5rem; height: 1px; background: var(--acc);
}
.accordion__content p:last-child { margin-bottom: 0; }

/* ============================================================
   TABS — hairline pills
   ============================================================ */

.tabs-group { max-width: 58rem; }
.tabs-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.2rem;
}
.tabs-nav__btn {
  padding: 0.7rem 1.3rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted-2);
  cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.tabs-nav__btn:hover { color: var(--text); border-color: rgba(174, 203, 245, 0.45); }
.tabs-nav__btn.is-active {
  color: var(--bg);
  background: var(--acc);
  border-color: var(--acc);
  box-shadow: 0 0 26px -8px rgba(174, 203, 245, 0.55);
}
.tab-pane { display: none; }
.tab-pane.is-active { display: block; animation: ptFadeUp 0.7s var(--ease-out) both; }
.tab-pane ul { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); background: var(--rule); border: 1px solid var(--rule); }
.tab-pane li {
  color: var(--muted);
  font-size: 0.88rem; font-weight: 300;
  line-height: 1.7;
  padding-block: 1.05rem;
  padding-inline: 1.2rem;
  background: var(--bg);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.tab-pane li:hover { background: #06090d; color: var(--text); }

/* grouped skills — category title + grid per group */
.skills-group { margin-bottom: 2.4rem; }
.skills-group:last-child { margin-bottom: 0; }
.skills-group__title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--acc);
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

/* ============================================================
   RECOGNITION
   ============================================================ */

.rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.rec-card {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--bg);
  transition: background-color 0.5s var(--ease);
}
.rec-card:hover { background: #06090d; }
.rec-card__icon {
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--acc);
  margin-bottom: 1.4rem;
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.rec-card:hover .rec-card__icon { border-color: rgba(174, 203, 245, 0.5); box-shadow: 0 0 22px -6px rgba(174, 203, 245, 0.4); }

.rec-card h4 {
  font-family: var(--font-display);
  font-size: 0.92rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 0.55rem;
  line-height: 1.5;
}
.rec-card p { color: var(--muted); font-size: 0.85rem; font-weight: 300; line-height: 1.75; }

/* ============================================================
   PROFILES / CONTACT CARDS
   ============================================================ */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.contact-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--bg);
  transition: background-color 0.5s var(--ease);
}
.contact-card:hover { background: #06090d; }
.contact-card__icon {
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  margin-bottom: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  color: var(--acc);
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.contact-card:hover .contact-card__icon { border-color: rgba(174, 203, 245, 0.5); box-shadow: 0 0 22px -6px rgba(174, 203, 245, 0.4); }
.contact-card__label { color: var(--muted-2); margin-bottom: 0.5rem; }
.contact-card__link {
  color: var(--text); font-size: 0.92rem; font-weight: 400;
  letter-spacing: 0.04em;
  word-break: break-word;
  transition: color 0.4s var(--ease);
}
.contact-card__link:hover { color: var(--acc); }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 3.5rem 0;
  background: rgba(174, 203, 245, 0.02);
}
.footer__inner {
  width: min(100% - (var(--gx) * 2), var(--container));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap;
}
.footer__brand { display: flex; align-items: center; gap: 0.8rem; }
.footer__brand img { height: 26px; width: auto; }
.footer__brand span {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted-2);
}
.footer__links { display: flex; gap: clamp(0.9rem, 2vw, 1.8rem); flex-wrap: wrap; }
.footer__links a {
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted-2);
  transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease);
}
.footer__links a:hover { color: var(--text); text-shadow: 0 0 12px rgba(174, 203, 245, 0.6); }
.footer__copy { color: var(--ink-4); }

/* ============================================================
   MOTION
   ============================================================ */

@keyframes ptFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* content sits behind the curtain until the page is revealed.
   gated on html.js so a script failure still renders the page. */
html.js .page-content { opacity: 0; }
html.js body.is-ready .page-content {
  opacity: 1;
  animation: ptFadeUp var(--t-reveal) var(--ease-out) 0.05s both;
}

/* staggered intro for direct children of the first section */
html.js body.is-ready .hero__copy > *,
html.js body.is-ready .page-hero > * {
  opacity: 0;
  animation: ptIntro var(--t-reveal) var(--ease-out) both;
}
@keyframes ptIntro {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.js body.is-ready .hero__copy > *:nth-child(1) { animation-delay: 0.10s; }
html.js body.is-ready .hero__copy > *:nth-child(2) { animation-delay: 0.22s; }
html.js body.is-ready .hero__copy > *:nth-child(3) { animation-delay: 0.34s; }
html.js body.is-ready .hero__copy > *:nth-child(4) { animation-delay: 0.46s; }
html.js body.is-ready .hero__copy > *:nth-child(5) { animation-delay: 0.58s; }
html.js body.is-ready .hero__stats { animation: ptIntro var(--t-reveal) var(--ease-out) 0.5s both; }

html.js body.is-ready .page-hero > *:nth-child(1) { animation-delay: 0.10s; }
html.js body.is-ready .page-hero > *:nth-child(2) { animation-delay: 0.22s; }
html.js body.is-ready .page-hero > *:nth-child(3) { animation-delay: 0.34s; }
html.js body.is-ready .page-hero > *:nth-child(4) { animation-delay: 0.46s; }
html.js body.is-ready .page-hero > *:nth-child(5) { animation-delay: 0.58s; }

@media (prefers-reduced-motion: reduce) {
  .page-content, .hero__copy > *, .hero__stats, .page-hero > * { opacity: 1 !important; animation: none !important; }
  .pt-loader { display: none !important; }
  .pt-curtain { display: none !important; }
}

/* no-JS safety: never trap the visitor behind the loader */
html:not(.js) .pt-loader,
html:not(.js) .pt-curtain,
html:not(.js) .pt-prog { display: none; }

/* scroll reveal */
html.js .reveal { opacity: 0; transform: translateY(18px); }
html.js .reveal.is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 68rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stats { flex-direction: row; flex-wrap: wrap; gap: 2rem 3.5rem; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .rec-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 380px; }
}

@media (max-width: 78rem) {
  /* first concession: drop the wordmark text, keep the mark */
  .navbar__brand span { display: none; }
}

@media (max-width: 66rem) {
  /* not enough room for seven hairline links — hand over to the drawer */
  .navbar__links { display: none; }
  .navbar__burger { display: flex; }
  .pt-prog { height: 1px; }
}

@media (max-width: 44rem) {
  .svc-grid { grid-template-columns: 1fr; }
  .rec-grid { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; text-align: center; }
  .footer__brand { justify-content: center; }
  .hero { padding-bottom: 3.5rem; }
  .hero__stats { gap: 1.6rem 2.4rem; }
  .tab-pane ul { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  .hero__actions .btn { width: 100%; }
}

/* ============================================================
   RTL — Arabic
   ============================================================ */

[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"], [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .hero__title, [dir="rtl"] .page-hero__title, [dir="rtl"] .section__title,
[dir="rtl"] .svc-card__title, [dir="rtl"] .tline__role, [dir="rtl"] .stat__label,
[dir="rtl"] .navbar__link, [dir="rtl"] .btn, [dir="rtl"] .lang-toggle,
[dir="rtl"] .footer__brand span, [dir="rtl"] .badge, [dir="rtl"] .tabs-nav__btn,
[dir="rtl"] .accordion__trigger, [dir="rtl"] .contact-card__label,
[dir="rtl"] .footer__links a, [dir="rtl"] .rec-card h4, [dir="rtl"] .about-card__label,
[dir="rtl"] .tline__org, [dir="rtl"] .page-hero__kicker, [dir="rtl"] .section__eyebrow,
[dir="rtl"] .drawer__link, [dir="rtl"] .hero__kicker {
  font-family: "Cairo", var(--font-body);
}
/* Arabic script reads better with looser tracking and no forced caps */
[dir="rtl"] .hero__title,
[dir="rtl"] .page-hero__title,
[dir="rtl"] .section__title,
[dir="rtl"] .svc-card__title,
[dir="rtl"] .rec-card h4,
[dir="rtl"] .hero__kicker,
[dir="rtl"] .page-hero__kicker,
[dir="rtl"] .section__eyebrow,
[dir="rtl"] .navbar__link,
[dir="rtl"] .drawer__link,
[dir="rtl"] .footer__links a,
[dir="rtl"] .badge,
[dir="rtl"] .lang-toggle,
[dir="rtl"] .tabs-nav__btn,
[dir="rtl"] .accordion__trigger,
[dir="rtl"] .footer__brand span,
[dir="rtl"] .stat__label,
[dir="rtl"] .contact-card__label,
[dir="rtl"] .about-card__label,
[dir="rtl"] .tline__org,
[dir="rtl"] .tline__role {
  text-transform: none;
  letter-spacing: 0.02em;
}
[dir="rtl"] .btn { letter-spacing: 0.06em; }
[dir="rtl"] .timeline::before { left: auto; right: 5px; }
[dir="rtl"] .tline__item { padding-inline-start: 2.8rem; padding-inline-end: 0; }
[dir="rtl"] .tline__dot { left: auto; right: 0; }
[dir="rtl"] .hero__title .grad { text-shadow: 0 0 22px rgba(174, 203, 245, 0.35); }