/* =========================================================
   Quality Tests Laboratory — Redesign
   Palette pulled from the existing site:
     #99001c  brand red (primary)
     #CC1939  brand red (bright)
     #0469b2  engineering blue (accent)
     #0F172A  ink (dark navy)
     #140609  near-black
     #3A3A3A  charcoal
     #FFD1BF  peach (soft accent)
     #FFFFFF  surface
   ========================================================= */

:root {
  --brand:        #5d0212;  /* QTL maroon, sampled from logo emblem */
  --brand-bright: #8a0a22;
  --brand-deep:   #3d0008;
  --accent:       #b8860b;  /* warm gold accent */
  --ink:          #1a0a0e;
  --ink-2:        #140609;
  --charcoal:     #3A3A3A;
  --peach:        #f3dcd9;  /* soft maroon-tinted accent */
  --bg:           #ffffff;
  --bg-tint:      #faf5f4;
  --bg-dark:      #1a0a0e;
  --line:         #ece6e5;
  --line-dark:    #2e1419;
  --muted:        #6b6360;

  --radius:  14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.04);
  --shadow:    0 10px 30px -10px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);
  --max:       1200px;

  --f-display: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-body:    'Cairo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ============================================================
   i18n — EN/AR language toggle + RTL
   ============================================================ */
html[lang="ar"] { direction: rtl; }
html[lang="en"] { direction: ltr; }

/* Show only the active language */
.lang-en, .lang-ar { display: inline; }
div.lang-en, div.lang-ar, address.lang-en, address.lang-ar, .lang-block { display: block; }
html[lang="ar"] .lang-en { display: none !important; }
html[lang="en"] .lang-ar { display: none !important; }
html[lang="ar"] .lang-ar.lang-block, html[lang="ar"] div.lang-ar { text-align: right; }

/* RTL flips for layouts */
html[lang="ar"] body { text-align: right; }
html[lang="ar"] .nav-toggle span { /* no flip needed */ }
html[lang="ar"] .btn-cta svg,
html[lang="ar"] .deck-tag,
html[lang="ar"] .inline-link::after,
html[lang="ar"] .footer ul a::before { transform: scaleX(-1); }
html[lang="ar"] .footer ul a:hover::before { transform: scaleX(-1) translate(0, -50%); }
html[lang="ar"] .crumbs { direction: ltr; }  /* keep breadcrumbs LTR */
html[lang="ar"] .stat-ribbon .stat,
html[lang="ar"] .value-pillar p,
html[lang="ar"] .value-pillar h3 { text-align: right; }
html[lang="ar"] .ttable, html[lang="ar"] .std-table { text-align: right; }
html[lang="ar"] .marquee-track,
html[lang="ar"] .mq-track { direction: ltr; }  /* keep marquees LTR */
html[lang="ar"] .hero-title em { padding: 0; }

/* Language toggle pill in nav */
.lang-toggle {
  display: inline-flex; align-items: center;
  gap: 4px;
  margin-left: .35em;
  padding: 4px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.lang-toggle button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-family: var(--f-body);
  padding: .35em .75em;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.lang-toggle button.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(93,2,18,.6);
}
.nav.scrolled .lang-toggle { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-bright); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ----------- Typography ----------- */
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink); margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
p  { margin: 0 0 1em; color: var(--charcoal); }
.lede { font-size: 1.08rem; color: var(--charcoal); max-width: 60ch; }
.accent { color: var(--brand); }
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  padding: .35em .7em;
  background: rgba(93, 2, 18, .08);
  border-radius: 999px;
  margin-bottom: 1em;
}
.eyebrow.light { color: var(--peach); background: rgba(243, 220, 217, .1); }

/* ----------- Buttons ----------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.4em;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--f-body);
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s;
}
.btn-sm { padding: .55em 1em; font-size: .85rem; }
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(93, 2, 18, .5);
}
.btn-primary:hover { background: var(--brand-bright); transform: translateY(-1px); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ----------- NAV (floating glass pill) ----------- */
.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 32px);
  max-width: 1400px;
  border-radius: 999px;
  background: rgba(10, 4, 6, .62);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 44px -12px rgba(0,0,0,.5);
  transition:
    top .4s cubic-bezier(.2,.8,.2,1),
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    color .35s ease,
    max-width .4s cubic-bezier(.2,.8,.2,1);
  color: #fff;
  animation: navDropIn .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes navDropIn {
  from { opacity: 0; transform: translate(-50%, -120%); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.nav.scrolled {
  top: 10px;
  max-width: 1300px;
  background: rgba(58, 58, 62, .82);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 14px 32px -12px rgba(0,0,0,.4);
  color: #fff;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
  padding: 6px 24px 6px 14px;
  transition: height .35s ease;
}
.nav.scrolled .nav-inner { height: 72px; }
.brand {
  position: relative;
  display: flex; align-items: center; gap: .65em;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}
.brand:hover { color: inherit; }
/* Single emblem — tints white over the dark hero, reveals maroon when scrolled */
/* Full wide logo — natural colors, no filters, no cropping */
.brand-emblem-img {
  display: block;
  height: 64px;
  width: auto;
  max-width: none;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), height .35s ease;
}
.brand:hover .brand-emblem-img { transform: scale(1.04); }
.nav.scrolled .brand-emblem-img { height: 52px; }
/* Hide legacy brand image if present */
.nav .brand-full { display: none; }
.brand-logo-light, .brand-logo-dark { display: none !important; } /* old dual-logo elements */
.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--brand);
  color: #fff;
  border-radius: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: .95rem;
  box-shadow: var(--shadow-sm);
}
.brand-text { font-family: var(--f-display); font-size: 1rem; }
.brand-full { height: 44px; width: auto; display: block; }
/* brand-emblem-mark uses inline SVG (animated) */
.brand-mark-svg {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.brand:hover .brand-mark-svg { transform: rotate(-12deg) scale(1.05); }
.brand-mark-svg .ring {
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.brand-mark-svg .glyph { fill: currentColor; }
.brand-wordmark { display: none; }
.brand-emblem { height: 44px; width: 44px; object-fit: contain; display: block; }
.brand-emblem-footer { height: 52px; width: 52px; object-fit: contain; display: block; }
.brand-stack { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.brand-name-ar { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.brand-footer .brand-name { color: #fff; }
.brand-footer .brand-name-ar { color: rgba(255,255,255,.6); }
.nav-links { display: flex; align-items: center; gap: .35em; }
.nav-links > a {
  position: relative;
  display: inline-flex; align-items: center;
  padding: .55em 1em;
  border-radius: 999px;
  color: inherit;
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .25s ease, background .25s ease;
  overflow: hidden;
}
.nav-links > a::before {
  content: "";
  position: absolute; inset: 0;
  background: currentColor;
  opacity: 0;
  border-radius: inherit;
  transform: scale(.9);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}
.nav-links > a:hover::before { opacity: .08; transform: scale(1); }
.nav-links > a.active { font-weight: 600; }
.nav-links > a.active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6px;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  opacity: .8;
  animation: navUnderline .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes navUnderline {
  from { width: 0; opacity: 0; }
  to   { width: 18px; opacity: .8; }
}

/* ── Nav dropdown submenus ─────────────────────────── */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item-head { display: inline-flex; align-items: center; }
.nav-sub-trigger { display: inline-flex; align-items: center; gap: .3em; color: inherit; text-decoration: none; }
.nav-caret { width: 14px; height: 14px; opacity: .7; transition: transform .25s ease; }
.nav-item:hover .nav-sub-trigger .nav-caret { transform: rotate(180deg); }
.nav-sub-toggle {
  display: none;            /* desktop: hover handles it */
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: 6px; border-radius: 8px;
}
.nav-sub-toggle .nav-caret { width: 18px; height: 18px; opacity: .85; }

.nav-sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 248px;
  background: #fff;
  border: 1px solid rgba(20,6,9,.08);
  border-radius: 16px;
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.45);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility .22s;
  z-index: 120;
}
/* hover bridge so the menu doesn't close in the gap */
.nav-sub::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sub a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.nav-sub a:hover { background: var(--bg-tint); color: var(--brand); }
html[lang="ar"] .nav-sub { left: auto; right: 0; }

/* CTA pill inside the floating nav */
.nav-links a.btn {
  margin-left: .5em;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: .55em 1.1em;
  font-size: .85rem;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
  box-shadow: none;
}
.nav-links a.btn:hover {
  background: #fff;
  color: var(--brand);
  border-color: #fff;
  transform: translateY(-1px);
}
.nav-links a.btn::before { display: none; }
.nav.scrolled .nav-links a.btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(93,2,18,.7);
}
.nav.scrolled .nav-links a.btn:hover {
  background: var(--brand-bright);
  border-color: var(--brand-bright);
  color: #fff;
}
.nav.scrolled .nav-toggle {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* Hamburger */
.nav-toggle {
  display: none;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  padding: 8px 9px;
  cursor: pointer;
  border-radius: 999px;
  width: 40px; height: 40px;
  transition: background .25s, border-color .25s;
}
.nav.scrolled .nav-toggle {
  background: rgba(20,6,9,.06);
  border-color: rgba(20,6,9,.12);
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  margin: 3px auto;
  border-radius: 2px;
  transition: transform .3s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Page-content offset: nav is fixed/floating, so push hero/content down */
body { padding-top: 0; }
.hero, .page-hero { padding-top: 110px !important; }

/* ----------- HERO (cinematic) ----------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  padding: 100px 0 110px;
  color: #fff;
  isolation: isolate;
}
.hero-backdrop { position: absolute; inset: 0; z-index: -2; }
.hero-photo {
  position: absolute; inset: -6%;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  will-change: transform, opacity;
}
.hero-photo.active {
  opacity: 1;
  animation: heroKenBurns 18s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.08) translate3d(0,0,0); }
  100% { transform: scale(1.16) translate3d(-2%, -1%, 0); }
}
.hero-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,6,9,.55) 0%, rgba(20,6,9,.35) 35%, rgba(20,6,9,.92) 100%),
    linear-gradient(90deg, rgba(20,6,9,.75) 0%, rgba(20,6,9,.25) 50%, rgba(20,6,9,.55) 100%);
}
.hero-grain {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%);
  opacity: .5;
}
.hero-glow {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: heroGlowFloat 14s ease-in-out infinite alternate;
}
.hero-glow-a {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(184,134,11,.55), transparent 70%);
  top: -120px; right: -80px;
}
.hero-glow-b {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(138,10,34,.65), transparent 70%);
  bottom: -180px; left: -120px;
  animation-delay: -7s;
}
@keyframes heroGlowFloat {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .9; }
  100% { transform: translate3d(40px, -30px, 0) scale(1.15); opacity: .6; }
}

.hero-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 70vh;
}

/* eyebrow on dark */
.eyebrow-dark {
  display: inline-flex; align-items: center; gap: .5em;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.65);
  animation: pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Hero typography */
.hero-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
  margin: .5em 0 .45em;
  max-width: 18ch;
}
.hero-title .line {
  display: block;
  overflow: hidden;
}
.hero-title .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: heroLineUp .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-title .line:nth-child(1) > span { animation-delay: .15s; }
.hero-title .line:nth-child(2) > span { animation-delay: .30s; }
.hero-title .line:nth-child(3) > span { animation-delay: .45s; }
.hero-title em {
  font-style: normal;
  background: linear-gradient(180deg, #fff 50%, rgba(184,134,11,.9) 50%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding: 0 .05em;
}
.hero-title .hl {
  position: relative;
  background: linear-gradient(90deg, #fff 0%, #f3dcd9 60%, var(--accent) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: heroShimmer 6s ease-in-out infinite alternate;
}
@keyframes heroShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
@keyframes heroLineUp {
  to { transform: translateY(0); }
}

.hero-lede {
  color: rgba(255,255,255,.78);
  max-width: 50ch;
  font-size: .98rem;
  opacity: 0;
  animation: heroFadeUp .9s ease forwards .6s;
}
.hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap; margin: 2em 0 2.6em;
  opacity: 0;
  animation: heroFadeUp .9s ease forwards .75s;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.btn-cta {
  background: var(--brand);
  box-shadow: 0 12px 28px -10px rgba(93,2,18,.7), 0 0 0 0 rgba(255,255,255,.0);
  position: relative;
  overflow: hidden;
}
.btn-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .7s ease;
}
.btn-cta:hover::before { transform: translateX(100%); }
.btn-ghost-dark {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* KPIs */
.hero-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  animation: heroFadeUp .9s ease forwards .9s;
  max-width: 620px;
}
.kpi-item { padding: 4px 10px; border-left: 1px solid rgba(255,255,255,.1); }
.kpi-item:first-child { border-left: 0; }
.kpi-item strong {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  display: block;
  line-height: 1;
}
.kpi-item span {
  display: block;
  margin-top: 6px;
  font-size: .76rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ----------- HERO DECK (interactive photo cards) ----------- */
.hero-deck {
  position: relative;
  height: 400px;
  perspective: 1400px;
  opacity: 0;
  animation: heroFadeUp 1s ease forwards .4s;
}
.deck-card {
  position: absolute;
  top: 0; left: 0;
  width: 78%;
  height: 78%;
  border: 0;
  border-radius: 22px;
  padding: 0;
  cursor: pointer;
  background: var(--bg) center/cover no-repeat;
  background-image: var(--bg);
  background-color: #2a1418;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .5s, filter .5s;
  transform-origin: center bottom;
  will-change: transform;
  text-align: left;
}
.deck-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 30%, rgba(20,6,9,.85) 100%);
  pointer-events: none;
}
.deck-card[data-card="0"] { transform: translate(0%,   0%) rotate(-5deg) scale(.92); z-index: 1; filter: brightness(.7) blur(1px); }
.deck-card[data-card="1"] { transform: translate(8%,   8%) rotate(-2deg) scale(.96); z-index: 2; filter: brightness(.8); }
.deck-card[data-card="2"] { transform: translate(16%, 16%) rotate(0deg)  scale(1);   z-index: 3; filter: brightness(1); }
.deck-card[data-card="3"] { transform: translate(24%, 24%) rotate(3deg)  scale(.94); z-index: 2; filter: brightness(.8) blur(.5px); }
.hero-deck.is-rotating .deck-card { transition-duration: .9s; }

.deck-card:hover  { transform: translate(16%, 14%) rotate(-1deg) scale(1.04); z-index: 10; filter: brightness(1.05) blur(0); }
.deck-card.active { z-index: 10 !important; filter: brightness(1.05) blur(0) !important; }

.deck-meta {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  display: flex; flex-direction: column; gap: 4px;
  color: #fff;
  z-index: 2;
}
.deck-tag {
  display: inline-block; width: max-content;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35em .7em;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 6px;
}
.deck-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
}
.deck-sub {
  color: rgba(255,255,255,.78);
  font-size: .85rem;
  letter-spacing: .01em;
}
.deck-status {
  position: absolute; right: 6px; bottom: -38px;
  display: flex; align-items: center; gap: .6em;
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  letter-spacing: .04em;
}
.deck-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 12px #22c55e, 0 0 0 4px rgba(34,197,94,.18);
  animation: pulseDot 1.8s ease-out infinite;
}

/* ----------- MARQUEE ----------- */
.hero-marquee {
  position: absolute;
  left: 0; right: 0; bottom: 56px;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 14px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  gap: 28px;
  white-space: nowrap;
  animation: marqueeScroll 38s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-family: var(--f-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.marquee-track span:nth-child(even) { color: var(--accent); opacity: .8; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* scroll indicator */
.hero-scroll {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  width: 22px; height: 36px;
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 12px;
  z-index: 3;
}
.hero-scroll span {
  position: absolute;
  left: 50%; top: 6px;
  width: 3px; height: 8px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDown 1.8s ease-in-out infinite;
}
@keyframes scrollDown {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* Floating ornaments (transparent PNG cutouts that drift across the hero) */
.hero-ornament {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.55));
  will-change: transform;
  opacity: 0;
  animation: ornamentIn 1.2s ease-out forwards;
}
@keyframes ornamentIn { to { opacity: .92; } }
.ornament-driller {
  width: 180px; height: auto;
  left: -50px; bottom: 80px;
  animation: ornamentIn 1.2s ease-out forwards, ornamentFloat 7s ease-in-out infinite alternate, ornamentTilt 9s ease-in-out infinite alternate;
  animation-delay: .6s, .6s, .6s;
  z-index: 2;
}
.ornament-truck {
  width: 220px; height: auto;
  right: 30%; top: 80px;
  opacity: 0;
  animation: ornamentIn 1.2s ease-out forwards, ornamentFloatRev 9s ease-in-out infinite alternate;
  animation-delay: 1s, 1s;
  z-index: 1;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)) brightness(.95);
}
@keyframes ornamentFloat {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(20px, -30px, 0); }
}
@keyframes ornamentFloatRev {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-30px, 20px, 0); }
}
@keyframes ornamentTilt {
  0%   { transform: translate3d(0, 0, 0)   rotate(-2deg); }
  100% { transform: translate3d(20px, -30px, 0) rotate(2deg); }
}

/* card-link kept (used elsewhere) */
.card-link { font-weight: 600; color: var(--brand); }
.card-link:hover { color: var(--brand-bright); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }

/* ----------- TRUSTBAR ----------- */
.trustbar { background: var(--ink); color: #fff; }
.trustbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; gap: 24px; flex-wrap: wrap;
}
.trustbar span { color: #cbd5e1; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.trustbar ul { list-style: none; display: flex; gap: 30px; padding: 0; margin: 0; flex-wrap: wrap; }
.trustbar li { font-family: var(--f-display); font-weight: 600; color: #fff; opacity: .9; letter-spacing: .03em; }

/* ----------- SECTION ----------- */
.section { padding: 100px 0; }
.section-tint { background: var(--bg-tint); }
.section-dark { background: var(--bg-dark); color: #e2e8f0; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .lede, .section-dark p, .section-dark .light { color: #94a3b8; }
.section-dark .accent { color: var(--peach); }
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-head p { font-size: 1.05rem; }

/* ----------- GRID / CARDS ----------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
  position: relative;
  overflow: hidden;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(93, 2, 18,.3); }
.svc { padding: 0; overflow: hidden; }
.svc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #eef3f0 center/cover no-repeat;
}
.svc-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,31,26,.55) 100%);
}
.svc-body { padding: 22px 26px 26px; }
.svc-num {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--f-display);
  font-weight: 700;
  color: #fff;
  background: rgba(93, 2, 18,.92);
  padding: .35em .65em;
  border-radius: 8px;
  font-size: .78rem;
  letter-spacing: .08em;
  z-index: 1;
  backdrop-filter: blur(6px);
}
.svc h3 { margin-bottom: 10px; }
.svc p { margin-bottom: 18px; }

/* ============================================================
   TESTS — Lab Console: dark photo-led cards + standards chips
   ============================================================ */
.test-console {
  position: relative;
  background:
    radial-gradient(900px circle at 90% 0%, rgba(184,134,11,.10), transparent 60%),
    radial-gradient(900px circle at 0% 100%, rgba(93,2,18,.18), transparent 60%),
    linear-gradient(180deg, #120608 0%, #1a0a0e 100%);
  color: #e9d6d3;
  padding: 100px 0 0;
  overflow: hidden;
  isolation: isolate;
}
.test-console::before {
  /* dot pattern overlay */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
  pointer-events: none;
  z-index: -1;
}
.test-console .section-head h2 { color: #fff; }
.test-console .section-head p { color: rgba(255,255,255,.62); }
.test-console .section-head .accent { color: var(--peach); }
.test-console .eyebrow {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--peach);
}

/* Category card deck */
.test-deck {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.test-card {
  position: relative;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease, background .35s ease;
  isolation: isolate;
}
.test-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.06);
  border-color: rgba(184,134,11,.4);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.6);
}
.test-card .tc-media {
  position: relative;
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.test-card .tc-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,6,9,.2) 0%, rgba(20,6,9,.8) 100%);
}
.test-card .tc-icon {
  position: absolute; top: 14px; left: 14px;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  color: #fff;
  z-index: 2;
  transition: background .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.test-card:hover .tc-icon {
  background: var(--peach); color: var(--brand-deep);
  transform: rotate(-8deg) scale(1.08);
}
.test-card .tc-icon svg { width: 20px; height: 20px; }
.test-card .tc-count {
  position: absolute; top: 14px; right: 14px;
  z-index: 2;
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  padding: .35em .7em;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.test-card .tc-body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex; flex-direction: column;
}
.test-card h3 {
  font-family: var(--f-display);
  font-size: 1.18rem;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.test-card .tc-sub {
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  margin: 0 0 14px;
  line-height: 1.5;
}
.test-card .tc-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
}
.test-card .tc-chips span {
  font-family: var(--f-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35em .65em;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  transition: background .25s ease, color .25s ease;
}
.test-card:hover .tc-chips span:first-child {
  background: var(--peach); color: var(--brand-deep); border-color: var(--peach);
}

/* Bottom marquee inside console */
.test-marquee {
  margin: 56px 0 0;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.test-marquee .tm-track {
  display: inline-flex; gap: 32px;
  white-space: nowrap;
  animation: tmScroll 40s linear infinite;
}
.test-marquee .tm-track span {
  font-family: var(--f-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.test-marquee .tm-track span:nth-child(3n) { color: var(--peach); }
@keyframes tmScroll { from {transform:translateX(0)} to {transform:translateX(-50%)} }

/* Console footer strip */
.test-console-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0 36px;
  color: rgba(255,255,255,.5);
  font-size: .82rem;
  letter-spacing: .08em;
  flex-wrap: wrap; gap: 10px;
}
.test-console-foot a {
  color: var(--peach);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .4em;
}
.test-console-foot a::after { content: "→"; transition: transform .35s; }
.test-console-foot a:hover::after { transform: translateX(6px); }

/* ===== STANDALONE TESTS: Interactive accordion board ===== */
.test-board {
  display: grid;
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}
.test-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease, transform .3s ease;
}
.test-row.open { border-color: rgba(93,2,18,.3); box-shadow: 0 20px 40px -16px rgba(93,2,18,.18); }
.test-row-head {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 16px 22px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  position: relative;
  transition: background .25s ease;
}
.test-row-head:hover { background: var(--bg-tint); }
.test-row-img {
  width: 86px; height: 64px; border-radius: 10px;
  background-size: cover; background-position: center;
  background-color: #2a1418;
}
.test-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.test-row-body h3 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  margin: 0;
  color: var(--ink);
  letter-spacing: -.01em;
}
.test-row-body .meta {
  font-size: .85rem;
  color: var(--muted);
}
.test-row-body .meta strong { color: var(--brand); font-weight: 700; }
.test-row-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-tint);
  display: grid; place-items: center;
  transition: background .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.test-row-toggle svg { width: 18px; height: 18px; color: var(--ink); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.test-row.open .test-row-toggle { background: var(--brand); }
.test-row.open .test-row-toggle svg { color: #fff; transform: rotate(180deg); }
.test-row-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.2,.8,.2,1);
}
.test-row.open .test-row-content { max-height: 1400px; }
.test-row-content-inner {
  padding: 4px 22px 22px;
  border-top: 1px solid var(--line);
  margin-top: -2px;
}
.test-row-content-inner table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}
.test-row-content-inner th, .test-row-content-inner td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.test-row-content-inner thead th {
  background: var(--bg-tint);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.test-row-content-inner td:last-child {
  color: var(--brand);
  font-weight: 600;
  white-space: nowrap;
}
.test-row-content-inner tr:last-child td { border-bottom: 0; }
.test-row-content-inner tr:hover { background: var(--bg-tint); }

/* Filter / search bar above board */
.test-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto 28px;
  align-items: center;
}
.test-filter {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: .55em 1em;
  border-radius: 999px;
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.test-filter:hover { transform: translateY(-1px); border-color: var(--brand); }
.test-filter.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ----------- TABS ----------- */
.tabs { max-width: 920px; margin: 0 auto; }
.tabs-head {
  display: inline-flex;
  padding: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  margin: 0 auto 28px;
}
.tabs-head { display: flex; justify-content: center; }
.tabs > .tabs-head { display: inline-flex; }
.tabs { display: flex; flex-direction: column; align-items: center; }
.tab {
  background: transparent;
  border: 0;
  color: #cbd5e1;
  padding: .6em 1.2em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  font-family: var(--f-body);
  transition: background .2s, color .2s;
}
.tab:hover { color: #fff; }
.tab.active { background: var(--brand); color: #fff; box-shadow: 0 6px 16px -8px rgba(93, 2, 18,.6); }
.tab-panel { display: none; width: 100%; }
.tab-panel.active { display: block; }

.ttable {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ttable th, .ttable td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-dark);
  font-size: .95rem;
}
.ttable thead th {
  font-family: var(--f-display);
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.04);
  letter-spacing: .04em;
  font-size: .82rem;
  text-transform: uppercase;
}
.ttable tbody td { color: #e2e8f0; }
.ttable tbody td:last-child { color: var(--peach); font-weight: 500; white-space: nowrap; }
.ttable tbody tr:last-child td { border-bottom: 0; }
.ttable tbody tr:hover { background: rgba(255,255,255,.04); }

/* ============================================================
   ABOUT — Pillars, stat ribbon, Vision 2030 callout, photo mosaic
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }

/* Bold intro panel */
.about-intro h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); margin-bottom: .5em; }
.about-intro .lede { font-size: 1.08rem; max-width: 56ch; }

/* Photo mosaic with floating accent card */
.about-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 160px 160px;
  gap: 14px;
  perspective: 1200px;
}
.about-mosaic > .m {
  border-radius: 18px;
  background-color: #2a1418;
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 36px -16px rgba(0,0,0,.35);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  position: relative;
  overflow: hidden;
}
.about-mosaic > .m-1 {
  grid-column: 1; grid-row: 1 / span 2;
  transform: rotate(-1.5deg);
}
.about-mosaic > .m-2 { grid-column: 2; grid-row: 1; transform: rotate(1deg); }
.about-mosaic > .m-3 { grid-column: 2; grid-row: 2; transform: rotate(-1deg); }
.about-mosaic > .m:hover {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 24px 50px -16px rgba(93,2,18,.5);
  z-index: 2;
}
.about-mosaic .floating-badge {
  position: absolute;
  left: -22px; bottom: -22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -16px rgba(93,2,18,.3);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  z-index: 3;
}
.about-mosaic .floating-badge strong {
  font-family: var(--f-display);
  font-size: 1.7rem;
  color: var(--brand);
  display: block;
  line-height: 1;
}
.about-mosaic .floating-badge span {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
.about-mosaic .floating-badge .vline {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-bright));
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-family: var(--f-display);
  font-size: .85rem;
  letter-spacing: -.02em;
}

/* Animated stat ribbon */
.stat-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(93,2,18,.97), rgba(58,0,8,.97)),
    url('assets/hero-workers.webp') center/cover;
  box-shadow: 0 20px 50px -16px rgba(93,2,18,.35);
  position: relative;
  isolation: isolate;
}
.stat-ribbon::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(600px circle at 10% 10%, rgba(184,134,11,.2), transparent 60%),
    radial-gradient(600px circle at 90% 100%, rgba(184,134,11,.15), transparent 55%);
}
.stat-ribbon .stat {
  padding: 36px 28px;
  border-right: 1px solid rgba(255,255,255,.08);
  color: #fff;
  text-align: left;
  position: relative;
}
.stat-ribbon .stat:last-child { border-right: 0; }
.stat-ribbon .stat strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.4rem);
  display: block;
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 60%, var(--peach));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.stat-ribbon .stat span {
  display: block;
  margin-top: 12px;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  font-weight: 600;
}
.stat-ribbon .stat .accent-dot {
  position: absolute; top: 22px; right: 22px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--peach);
  box-shadow: 0 0 12px var(--peach);
}

/* Value pillars (5 cards) */
.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.value-pillar {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 22px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
  isolation: isolate;
}
.value-pillar::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(93,2,18,.06) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}
.value-pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -16px rgba(93,2,18,.25);
  border-color: rgba(93,2,18,.3);
}
.value-pillar:hover::before { opacity: 1; }
.value-pillar .vp-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-bright));
  display: grid; place-items: center;
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px -8px rgba(93,2,18,.5);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-radius .4s ease;
}
.value-pillar:hover .vp-icon { transform: rotate(-8deg) scale(1.08); border-radius: 50%; }
.value-pillar .vp-icon svg { width: 22px; height: 22px; }
.value-pillar h3 {
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 6px;
}
.value-pillar p {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.value-pillar .vp-num {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--brand);
  opacity: .4;
}

/* Vision 2030 dedicated callout */
.vision-callout {
  margin-top: 80px;
  padding: 56px 48px;
  border-radius: 24px;
  background:
    radial-gradient(800px circle at 90% 10%, rgba(184,134,11,.2), transparent 60%),
    radial-gradient(700px circle at 0% 100%, rgba(204,25,57,.18), transparent 55%),
    linear-gradient(135deg, #4d0212, #240008);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.vision-callout::before {
  content: "2030";
  position: absolute;
  right: -2vw; bottom: -3vw;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.05);
  z-index: -1;
  user-select: none;
}
.vision-callout h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: #fff;
  max-width: 28ch;
  margin: 0 0 .6em;
}
.vision-callout h2 .gold {
  background: linear-gradient(90deg, #fff 0%, var(--peach) 40%, #b8860b 70%, #fff 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: visionShine 6s ease-in-out infinite alternate;
}
@keyframes visionShine { 0%{background-position:0% 0} 100%{background-position:100% 0} }
.vision-callout p {
  color: rgba(255,255,255,.8);
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.65;
}
.vision-callout .v-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 22px;
}
.vision-callout .v-chips span {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45em .9em;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
}

/* "Find out more" inline link */
.inline-link {
  display: inline-flex; align-items: center; gap: .4em;
  color: var(--brand);
  font-weight: 600;
  margin-top: 1.4em;
  text-decoration: none;
  position: relative;
}
.inline-link::after {
  content: "→";
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.inline-link:hover::after { transform: translateX(6px); }

/* ----------- REQUEST / FORM ----------- */
.request-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.contact-line { display: flex; gap: .7em; align-items: center; margin: .65em 0; color: var(--charcoal); font-size: .98rem; }
.contact-line span { font-size: 1.1rem; }
.form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: grid; gap: 14px;
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label {
  display: grid; gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
}
.form input, .form select, .form textarea {
  font: inherit;
  font-weight: 400;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(93, 2, 18,.15);
}
.form .btn { justify-self: start; margin-top: 4px; }
.form-ok {
  color: #15803d; background: #ecfdf5; border: 1px solid #bbf7d0;
  padding: 12px 14px; border-radius: 10px; margin: 6px 0 0; font-size: .92rem;
}

/* ============================================================
   FOOTER — Cinematic maroon with floating orbs, marquee,
   animated links, interactive office cards
   ============================================================ */
.footer {
  position: relative;
  background:
    radial-gradient(900px circle at 90% 0%, rgba(184,134,11,.18), transparent 55%),
    radial-gradient(800px circle at 0% 100%, rgba(204,25,57,.16), transparent 60%),
    linear-gradient(180deg, #4d0212 0%, #3a0010 55%, #240008 100%);
  color: #e7d6d3;
  padding: 90px 0 26px;
  overflow: hidden;
  isolation: isolate;
}
/* Floating gradient orbs */
.footer::before, .footer::after {
  content: "";
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}
.footer::before {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(184,134,11,.5), transparent 70%);
  top: -120px; left: 8%;
  animation: ftrOrb1 14s ease-in-out infinite alternate;
}
.footer::after {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(184,134,11,.3), transparent 70%);
  bottom: -200px; right: 5%;
  animation: ftrOrb2 16s ease-in-out infinite alternate;
}
@keyframes ftrOrb1 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(60px,40px) scale(1.18)} }
@keyframes ftrOrb2 { 0%{transform:translate(0,0) scale(1.1)} 100%{transform:translate(-50px,-30px) scale(.95)} }

/* Subtle dot grid overlay */
.footer-grid-overlay {
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  opacity: .5;
}

/* Giant brand watermark */
.footer-watermark {
  position: absolute;
  right: -3vw; bottom: -8vw;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(8rem, 26vw, 24rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.04);
  z-index: -1;
  user-select: none;
  pointer-events: none;
}

/* CTA at top of footer */
.footer-cta {
  text-align: center;
  padding-bottom: 60px;
  margin-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: relative;
}
.footer-cta-eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--peach);
  padding: .35em .85em;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  margin-bottom: 1.4em;
}
.footer-cta h2 {
  color: #fff;
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  max-width: 18ch;
  margin-left: auto; margin-right: auto;
  line-height: 1.05;
}
.footer-cta h2 .shine {
  background: linear-gradient(90deg, #fff 0%, var(--peach) 40%, #b8860b 70%, #fff 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: ftrShine 5s ease-in-out infinite alternate;
}
@keyframes ftrShine { 0%{background-position:0% 0} 100%{background-position:100% 0} }
.footer-cta p { color: rgba(255,255,255,.7); max-width: 56ch; margin: 0 auto 2em; }
.footer-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.footer-cta .btn-primary {
  background: #fff;
  color: var(--brand-deep);
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.4);
  font-weight: 700;
  padding: 1em 1.6em;
}
.footer-cta .btn-primary:hover { background: var(--peach); color: var(--brand-deep); }
.footer-cta .btn-ghost-light {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  padding: 1em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s;
}
.footer-cta .btn-ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-1px); }

/* Main grid */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: relative;
}
.footer .brand-footer { display: flex; align-items: center; gap: .8em; margin-bottom: 18px; }
/* same wide lw.png logo as the nav — natural colors, no filter */
.brand-emblem-footer-img {
  height: 64px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.footer .brand-footer:hover .brand-emblem-footer-img { transform: scale(1.04); }
.footer .brand-name {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  display: block;
}
.footer .brand-name-ar {
  display: block;
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
}
.footer-tag {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 30ch;
  margin: 18px 0 22px;
}

/* Column headers */
.footer h4 {
  color: #fff;
  font-family: var(--f-display);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.3em;
  position: relative;
  padding-bottom: .8em;
}
.footer h4::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 26px; height: 2px;
  background: linear-gradient(90deg, var(--peach), #b8860b);
  border-radius: 2px;
}

/* Link lists with animated arrow */
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer ul a {
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  text-decoration: none;
  position: relative;
  display: inline-flex; align-items: center;
  padding-left: 0;
  transition: color .25s ease, padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.footer ul a::before {
  content: "→";
  position: absolute; left: 0; top: 50%;
  transform: translate(-12px, -50%);
  opacity: 0;
  color: var(--peach);
  font-size: .8em;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.footer ul a:hover { color: #fff; padding-left: 18px; }
.footer ul a:hover::before { transform: translate(0, -50%); opacity: 1; }

/* Office mini-cards */
.footer-offices { display: flex; flex-direction: column; gap: 10px; }
.footer-office {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
  cursor: default;
}
.footer-office:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(184,134,11,.4);
  transform: translateX(4px);
}
.footer-office strong {
  display: block;
  color: #fff;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--f-display);
}
.footer-office span {
  display: block;
  color: rgba(255,255,255,.6);
  font-size: .82rem;
  margin-top: 3px;
}

/* Contact lines (phone/email) */
.footer-contact-line {
  display: flex; align-items: center; gap: .65em;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  padding: 8px 0;
  text-decoration: none;
  transition: color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.footer-contact-line:hover { color: var(--peach); transform: translateX(4px); }
.footer-contact-line .ic {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  flex: 0 0 32px;
  transition: background .3s ease, border-color .3s ease;
}
.footer-contact-line:hover .ic { background: var(--peach); border-color: var(--peach); color: var(--brand-deep); }
.footer-contact-line .ic svg { width: 14px; height: 14px; }

/* Social icons */
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  text-decoration: none;
  font-size: 0;
  transition: background .3s ease, border-color .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
.socials a::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--peach), #b8860b);
  border-radius: inherit;
  transform: scale(0);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
.socials a:hover { transform: translateY(-3px) rotate(-6deg); border-color: var(--peach); }
.socials a:hover::before { transform: scale(1); }
.socials a svg { position: relative; z-index: 1; width: 16px; height: 16px; transition: color .25s; }
.socials a:hover svg { color: var(--brand-deep); }

/* Marquee strip above footer-bottom */
.footer-marquee {
  margin: 36px -24px 0;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.footer-marquee .mq-track {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  animation: ftrMarquee 32s linear infinite;
}
.footer-marquee .mq-track span {
  font-family: var(--f-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.footer-marquee .mq-track span:nth-child(odd) { color: var(--peach); }
@keyframes ftrMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Bottom strip */
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 0 0;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom .badges { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-bottom .badges span { color: rgba(255,255,255,.6); letter-spacing: .08em; font-weight: 600; font-size: .76rem; text-transform: uppercase; }

/* Scroll-to-top floating button */
.scroll-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(93,2,18,.6), 0 0 0 1px rgba(255,255,255,.1) inset;
  opacity: 0; pointer-events: none;
  transform: translateY(20px) scale(.9);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), background .3s ease;
  z-index: 40;
}
.scroll-top.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.scroll-top:hover { background: var(--brand-bright); transform: translateY(-4px); }
.scroll-top svg { width: 20px; height: 20px; }
/* (legacy footer styles removed — see top of footer block above) */

/* ============================================================
   Floating WhatsApp button (sitewide) — stacks above scroll-top
   ============================================================ */
.wa-fab {
  position: fixed;
  right: 24px; bottom: 84px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -8px rgba(37,211,102,.55), 0 0 0 1px rgba(255,255,255,.12) inset;
  z-index: 41;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  animation: waPulse 2.6s ease-in-out infinite;
}
.wa-fab:hover { transform: translateY(-4px) scale(1.05); color: #fff; box-shadow: 0 20px 40px -8px rgba(37,211,102,.7); }
.wa-fab svg { width: 30px; height: 30px; }
.wa-fab::after {
  content: attr(data-label);
  position: absolute; right: calc(100% + 12px);
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  font-size: .82rem; font-weight: 600;
  padding: .5em .85em;
  border-radius: 10px;
  opacity: 0; transform: translateX(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: var(--shadow);
}
.wa-fab:hover::after { opacity: 1; transform: translateX(0); }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 14px 30px -8px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.45); }
  50%      { box-shadow: 0 14px 30px -8px rgba(37,211,102,.55), 0 0 0 12px rgba(37,211,102,0); }
}
html[lang="ar"] .wa-fab { right: auto; left: 24px; }
html[lang="ar"] .wa-fab::after { right: auto; left: calc(100% + 12px); transform: translateX(-8px); }
html[lang="ar"] .wa-fab:hover::after { transform: translateX(0); }
html[lang="ar"] .scroll-top { right: auto; left: 24px; }

/* ============================================================
   Standards & Accreditation band
   ============================================================ */
.creds { background: var(--bg-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.creds-inner { padding: 40px 0; text-align: center; }
.creds-eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.creds-grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 14px;
}
.cred {
  display: flex; align-items: center; gap: .7em;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cred:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(93,2,18,.25); }
.cred-ico {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(93,2,18,.08);
  color: var(--brand);
}
.cred-ico svg { width: 19px; height: 19px; }
.cred.is-primary { border-color: rgba(93,2,18,.35); background: linear-gradient(180deg,#fff, #fbf4f4); }
.cred.is-primary .cred-ico { background: var(--brand); color: #fff; }
.cred-txt { text-align: left; line-height: 1.2; }
html[lang="ar"] .cred-txt { text-align: right; }
.cred-txt strong { display: block; font-family: var(--f-display); font-size: .95rem; color: var(--ink); }
.cred-txt span { font-size: .76rem; color: var(--muted); }

/* ============================================================
   Office map embeds (contact page)
   ============================================================ */
.office-map {
  margin-top: 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  line-height: 0;
}
.office-map iframe { width: 100%; height: 180px; border: 0; display: block; filter: grayscale(.15); }
.office-map iframe:hover { filter: none; }

/* Outline button (brand-edged) */
.btn-outline {
  background: transparent;
  color: var(--brand);
  border-color: rgba(93,2,18,.3);
}
.btn-outline:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-1px); }

/* Download Company Profile button accent */
.btn-download svg { width: 18px; height: 18px; }
.btn-download.btn-sm svg { width: 16px; height: 16px; }

/* ============================================================
   FAQ accordion (native <details>)
   ============================================================ */
.faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item[open] { border-color: rgba(93,2,18,.25); box-shadow: var(--shadow); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--f-display);
  font-size: 1.02rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--brand);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 24px 22px; }
.faq-a p { margin: 0; color: var(--muted); line-height: 1.7; font-size: .96rem; }
html[lang="ar"] .faq-item summary { text-align: right; }

/* ============================================================
   Skip-to-content link (accessibility)
   ============================================================ */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  background: var(--brand);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-family: var(--f-display);
  font-size: .95rem;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; }
html[lang="ar"] .skip-link { left: auto; right: 12px; }

/* ============================================================
   SERVICES — Interactive Bento Grid
   3D mouse-tilt + cursor-tracking glow + photo reveal
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 18px;
  perspective: 1400px;
}
/* Asymmetric placement for 7 services */
.bento .b-1 { grid-column: span 2; grid-row: span 2; }   /* hero card */
.bento .b-2 { grid-column: span 1; grid-row: span 1; }
.bento .b-3 { grid-column: span 1; grid-row: span 1; }
.bento .b-4 { grid-column: span 1; grid-row: span 1; }
.bento .b-5 { grid-column: span 1; grid-row: span 1; }
.bento .b-6 { grid-column: span 2; grid-row: span 1; }
.bento .b-7 { grid-column: span 2; grid-row: span 1; }

.bento-card {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  background-color: #1a0a0e;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 36px -16px rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.15);
  will-change: transform;
}
.bento-card::before {
  /* dim layer that brightens on hover (photo lives on the card itself) */
  content: "";
  position: absolute; inset: 0;
  background: rgba(20,6,9,.15);
  transition: opacity .4s ease;
  z-index: 0;
}
.bento-card::after {
  /* dark gradient + cursor-tracking spotlight */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(184,134,11,.28), transparent 50%),
    linear-gradient(180deg, rgba(20,6,9,.15) 0%, rgba(20,6,9,.55) 55%, rgba(10,4,6,.95) 100%);
  transition: background .25s ease;
  z-index: 1;
}
.bento-card:hover { box-shadow: 0 24px 60px -20px rgba(93,2,18,.5), 0 0 0 1px rgba(184,134,11,.25); background-size: 108% auto; }
.bento-card:hover::before { background: rgba(20,6,9,.05); }

.bento-card .bc-content {
  position: relative; z-index: 2;
  height: 100%;
  padding: 22px 24px 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.bento-card .bc-num {
  position: absolute; top: 18px; left: 22px;
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  padding: .4em .75em;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.bento-card:hover .bc-num {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}
.bento-card .bc-arrow {
  position: absolute; top: 18px; right: 22px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .3s ease, border-color .3s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  color: #fff;
}
.bento-card:hover .bc-arrow {
  background: #fff; color: var(--brand);
  border-color: #fff;
  transform: rotate(-45deg) scale(1.05);
}
.bento-card .bc-arrow svg { width: 18px; height: 18px; }

.bento-card h3 {
  color: #fff;
  font-family: var(--f-display);
  font-size: 1.4rem;
  margin: 0 0 8px;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.bento-card.b-1 h3 { font-size: 2rem; }
.bento-card p {
  color: rgba(255,255,255,.82);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0;
  max-width: 36ch;
  /* lines preview animate in */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .45s ease, opacity .35s ease, margin .3s ease;
}
.bento-card:hover p { max-height: 120px; opacity: 1; margin-top: 4px; }
.bento-card.b-1 p { max-height: none; opacity: .9; }

.bento-card .bc-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 12px;
  font-size: .72rem;
}
.bento-card .bc-tags span {
  padding: .3em .65em;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.88);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

/* Subtle inner glow ring on focus/hover */
.bento-card::before, .bento-card::after { border-radius: inherit; }

/* Reveal animation on scroll-in */
.bento-card { opacity: 0; transform: translateY(30px) perspective(1000px); }
.bento-card.in {
  opacity: 1;
  animation: bentoIn .8s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes bentoIn {
  to { opacity: 1; transform: translateY(0) perspective(1000px); }
}

/* Section ambient bg blob */
.services-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.services-bg::before {
  content: "";
  position: absolute; inset: -10%;
  background:
    radial-gradient(700px circle at 90% 10%, rgba(184,134,11,.08), transparent 55%),
    radial-gradient(800px circle at 10% 90%, rgba(93,2,18,.06), transparent 60%);
  z-index: -1;
}

/* ----------- INNER PAGE LAYOUT ----------- */
.page-hero {
  position: relative;
  padding: 140px 0 90px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line-dark);
}
.page-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
}
.page-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,6,9,.75) 0%, rgba(20,6,9,.45) 40%, rgba(20,6,9,.92) 100%),
    linear-gradient(90deg, rgba(20,6,9,.85) 0%, rgba(20,6,9,.45) 50%, rgba(20,6,9,.6) 100%);
}
.page-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  letter-spacing: -.02em;
  max-width: 22ch;
  line-height: 1.08;
}
.page-hero .lede {
  color: rgba(255,255,255,.82);
  max-width: 64ch;
  font-size: 1.1rem;
  margin-top: 1em;
}
.page-hero .eyebrow {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.crumbs { display: flex; gap: .5em; font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 1.2em; letter-spacing: .04em; }
.crumbs a { color: rgba(255,255,255,.75); }
.crumbs a:hover { color: #fff; }
.crumbs span { color: rgba(255,255,255,.35); }

.prose { max-width: 760px; margin: 0 auto; }
.prose p { font-size: 1.05rem; line-height: 1.7; color: var(--charcoal); }
.prose h2 { margin-top: 1.5em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.4em; color: var(--charcoal); line-height: 1.7; }
.prose ul li, .prose ol li { margin-bottom: .5em; }
.prose strong { color: var(--ink); }

.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.split-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.split-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

.callout {
  background: linear-gradient(180deg, var(--bg-tint), #fff);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 1.5em 0;
}
.callout strong { display: block; color: var(--brand); margin-bottom: 4px; font-family: var(--f-display); letter-spacing: .02em; }

.cta-band {
  background:
    linear-gradient(135deg, rgba(93,2,18,.95), rgba(58,1,9,.95)),
    url('../assets/hero-rig-facility.webp') center/cover;
  color: #fff;
  padding: 70px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.8); max-width: 60ch; margin: 0 auto 1.5em; }
.cta-band .btn-primary { background: #fff; color: var(--brand); }
.cta-band .btn-primary:hover { background: var(--peach); color: var(--brand-deep); }

/* Service / Tests landing grids */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #2a1418 center/cover no-repeat;
  text-decoration: none;
  color: #fff;
  display: block;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -16px rgba(93,2,18,.4); }
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(20,6,9,.92) 100%);
}
.tile-body {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.tile-num {
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--peach);
  text-transform: uppercase;
}
.tile h3 { color: #fff; font-size: 1.3rem; margin: 0; }
.tile p { color: rgba(255,255,255,.75); font-size: .85rem; margin: 4px 0 0; }
.tile-arrow {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.tile:hover .tile-arrow { background: var(--brand); transform: rotate(-45deg); }

/* Standards table on inner pages */
.std-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.std-table th, .std-table td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.std-table thead th {
  background: var(--bg-tint);
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .04em;
  font-size: .82rem;
  text-transform: uppercase;
}
.std-table tbody td:last-child { color: var(--brand); font-weight: 600; white-space: nowrap; }
.std-table tbody tr:last-child td { border-bottom: 0; }
.std-table tbody tr:hover { background: var(--bg-tint); }

/* Projects table */
.proj-table th:nth-child(4), .proj-table td:nth-child(4) { text-align: right; }

/* Office cards (contact page) */
.office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.office {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.office:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.office .city {
  font-family: var(--f-display);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.office h3 { font-size: 1.1rem; margin: 6px 0 12px; }
.office address {
  font-style: normal;
  color: var(--charcoal);
  font-size: .95rem;
  line-height: 1.6;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 14px;
}
.office .ar { color: var(--muted); font-size: .9rem; direction: rtl; text-align: right; }

/* ----------- RESPONSIVE ----------- */
@media (max-width: 1024px) {
  .hero { padding: 90px 0 130px; min-height: auto; }
  .hero-wrap { grid-template-columns: 1fr; gap: 48px; min-height: auto; }
  .hero-deck { height: 380px; max-width: 480px; margin: 0 auto; width: 100%; }
  .hero-kpis { grid-template-columns: repeat(4, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .office-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .about-grid, .request-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .section { padding: 70px 0; }
  .section-head { margin-bottom: 44px; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .bento .b-1 { grid-column: span 2; grid-row: span 2; }
  .bento .b-2, .bento .b-3, .bento .b-4, .bento .b-5 { grid-column: span 1; grid-row: span 1; }
  .bento .b-6, .bento .b-7 { grid-column: span 2; grid-row: span 1; }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .values-grid > :nth-child(4), .values-grid > :nth-child(5) { grid-column: span 1; }
  .stat-ribbon { grid-template-columns: repeat(2, 1fr); }
  .test-deck { grid-template-columns: repeat(2, 1fr); }
  .test-deck > :last-child:nth-child(odd) { grid-column: span 2; }
  .stat-ribbon .stat { border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
  .stat-ribbon .stat:nth-child(2n) { border-right: 0; }
  .stat-ribbon .stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 720px) {
  /* ── Navigation ─────────────────────────────────── */
  .nav-toggle { display: grid; place-items: center; }
  .nav { width: calc(100% - 20px); top: 12px; border-radius: 22px; }
  .nav.scrolled { width: calc(100% - 16px); top: 8px; }
  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    background: rgba(20, 6, 9, .88);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    box-shadow: 0 30px 50px -20px rgba(0,0,0,.45);
    transform: translateY(-10px) scale(.98);
    opacity: 0; pointer-events: none;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
    transform-origin: top right;
  }
  .nav.scrolled .nav-links {
    background: rgba(255,255,255,.96);
    color: var(--ink);
    border-color: rgba(20,6,9,.08);
  }
  .nav-links.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
  .nav-links > a {
    padding: 14px 16px;
    border-radius: 12px;
    color: inherit;
    font-size: 1rem;
    width: 100%;
  }
  .nav-links > a:hover { background: rgba(255,255,255,.06); }
  .nav.scrolled .nav-links > a:hover { background: rgba(20,6,9,.06); }
  .nav-links a.btn { margin: 8px 0 4px; justify-content: center; }

  /* ── Mobile dropdown submenus ─────────────────────── */
  .nav-item { display: block; width: 100%; }
  .nav-item-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .nav-sub-trigger { flex: 1; padding: 14px 16px; border-radius: 12px; font-size: 1rem; }
  .nav-sub-trigger .nav-caret { display: none; }
  .nav-sub-toggle { display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; }
  html[lang="ar"] .nav-sub-toggle { margin-right: 0; margin-left: 6px; }
  .nav-item:hover .nav-sub-trigger .nav-caret { transform: none; }
  .nav-sub {
    position: static;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 6px 10px;
    margin: 0 6px 4px;
    border-left: 2px solid rgba(255,255,255,.18);
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .32s cubic-bezier(.2,.8,.2,1);
  }
  html[lang="ar"] .nav-sub { border-left: 0; border-right: 2px solid rgba(255,255,255,.18); padding: 0 10px 6px 0; }
  .nav.scrolled .nav-sub { border-color: rgba(20,6,9,.12); }
  .nav-item.open .nav-sub { max-height: 520px; }
  .nav-item.open .nav-sub-toggle .nav-caret { transform: rotate(180deg); }
  .nav-sub a { color: inherit; opacity: .92; font-size: .95rem; padding: 11px 14px; }
  .nav-sub a:hover { background: rgba(255,255,255,.06); color: inherit; }
  .nav.scrolled .nav-sub a:hover { background: rgba(20,6,9,.06); color: var(--brand); }
  .brand-stack { display: none; }
  .brand-full { height: 36px; }
  .hero-ornament { display: none; }

  /* ── Spacing — tighter on small screens ──────────── */
  .container { padding: 0 16px; }
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 36px; }

  /* ── Home hero ───────────────────────────────────── */
  .hero { padding: 64px 0 110px; }
  .hero-title { font-size: clamp(2rem, 8.5vw, 2.8rem); }
  .hero-kpis { grid-template-columns: 1fr 1fr; }
  .kpi-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
  .kpi-item:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
  .hero-deck { height: 270px; }
  .deck-title { font-size: 1rem; }
  .deck-sub { font-size: .76rem; }
  .hero-marquee { bottom: 36px; padding: 10px 0; }

  /* ── Page hero (sub-pages) ───────────────────────── */
  .page-hero { padding: 90px 0 50px; }
  .page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .page-hero .lede { font-size: .97rem; margin-top: .7em; }

  /* ── Trust bar ───────────────────────────────────── */
  .trustbar-inner { padding: 12px 16px; gap: 12px; }
  .trustbar ul { gap: 14px; }

  /* ── Bento: 2-col compact ────────────────────────── */
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 148px; gap: 10px; }
  .bento .b-1 { grid-column: span 2; grid-row: span 1; }
  .bento .b-2, .bento .b-3,
  .bento .b-4, .bento .b-5 { grid-column: span 1; grid-row: span 1; }
  .bento .b-6, .bento .b-7 { grid-column: span 2; grid-row: span 1; }
  .bento-card .bc-content { padding: 14px; }
  .bento-card .bc-num { top: 12px; left: 12px; font-size: .65rem; padding: .3em .6em; }
  .bento-card .bc-arrow { top: 12px; right: 12px; width: 30px; height: 30px; }
  .bento-card .bc-arrow svg { width: 14px; height: 14px; }
  .bento-card h3 { font-size: .88rem; margin: 0 0 4px; }
  .bento-card.b-1 h3 { font-size: 1.05rem; }
  .bento-card p { font-size: .76rem; max-height: none; opacity: .85; margin-top: 4px; line-height: 1.4; }
  .bento-card .bc-tags { gap: 5px; margin-top: 6px; }
  .bento-card .bc-tags span { font-size: .62rem; padding: .28em .55em; }

  /* ── Test console deck: 2-col ────────────────────── */
  .test-deck { grid-template-columns: repeat(2, 1fr); }
  .test-deck > :last-child:nth-child(odd) { grid-column: span 1; }

  /* ── Generic grids: 2-col ────────────────────────── */
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .tile-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .office-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* ── Footer: 2-col (brand full-width, links 2×2) ─── */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-grid > :first-child { grid-column: span 2; }
  .footer-tag { max-width: none; }

  /* ── Form ────────────────────────────────────────── */
  .form .row { grid-template-columns: 1fr; }
  .form { padding: 20px; }

  /* ── About ───────────────────────────────────────── */
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 140px; }
  .about-mosaic > .m-1 { grid-column: span 2; grid-row: 1; }
  .about-mosaic > .m-2 { grid-column: 1; grid-row: 2; }
  .about-mosaic > .m-3 { grid-column: 2; grid-row: 2; }

  /* ── Values & stat ribbon ────────────────────────── */
  .values-grid { grid-template-columns: 1fr 1fr; }
  .stat-ribbon { grid-template-columns: 1fr 1fr; }
  .stat-ribbon .stat { padding: 18px 14px; }
  .stat-ribbon .stat strong { font-size: 2rem; }

  /* ── Vision callout ──────────────────────────────── */
  .vision-callout { padding: 32px 20px; }
  .vision-callout .v-chips { gap: 6px; margin-top: 14px; }
  .vision-callout .v-chips span { font-size: .7rem; padding: .38em .75em; }

  /* ── Tests accordion rows ────────────────────────── */
  .test-row-head { grid-template-columns: 56px 1fr 34px; gap: 12px; padding: 12px 14px; }
  .test-row-img { width: 56px; height: 44px; }
  .test-row-toggle { width: 34px; height: 34px; }
  .test-row-content-inner { padding: 4px 14px 16px; }
  .test-row-content-inner th, .test-row-content-inner td { padding: 9px 10px; font-size: .82rem; }
  .test-row-content-inner td:last-child { white-space: normal; }

  /* ── Tables: scroll on narrow screens ───────────── */
  .ttable-wrap, .std-table, .proj-table { font-size: .82rem; }
  .ttable th, .ttable td,
  .std-table th, .std-table td { padding: 12px 14px; }
  .proj-table th, .proj-table td { padding: 10px 12px; white-space: nowrap; }
  .proj-table th:nth-child(4), .proj-table td:nth-child(4) { white-space: normal; min-width: 120px; }
  /* wrap the proj-table in a scroll container in HTML; add overflow here as fallback */
  .proj-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── CTA bands ───────────────────────────────────── */
  .cta-band { padding: 50px 0; }
  .footer-cta { padding-bottom: 40px; margin-bottom: 32px; }
  .footer-cta h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .footer-cta-actions { flex-direction: column; gap: 12px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hero-glow, .marquee-track, .pulse, .deck-status .dot,
  .hero-title .line > span, .hero-lede, .hero-cta, .hero-kpis, .hero-deck,
  .hero-title .hl, .hero-scroll span { animation: none !important; }
  .hero-title .line > span { transform: none !important; }
  .hero-lede, .hero-cta, .hero-kpis, .hero-deck { opacity: 1 !important; }
}