/* ==========================================================================
   RT Projects — Main Stylesheet
   v1.0.0
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  --bg: #FFFFFF;
  --bg-2: #F4F7FC;
  --surface: #FFFFFF;
  --surface-2: #EEF2F9;
  --surface-3: #E3EAF5;
  --border: #D4DCE8;
  --border-2: #BFC9D8;
  --border-3: #A4B3C8;
  --text: #0D1B2A;
  --text-2: #3A506B;
  --text-muted: #7B8FA6;
  --text-faint: #A8BDD4;
  --accent: #003087;
  --accent-dim: #1A4FA0;
  --accent-glow: rgba(0, 48, 135, 0.08);
  --warm: #0066CC;
  --pink: #C8102E;
  --max: 1280px;

  /* Dark surface used by the closing region (partners + CTA + footer) and by
     the image-backed heroes. --accent is too dark to read on it, so the dark
     surface carries its own accent and text scale. */
  --dark: #0F172A;
  --dark-2: #16203A;
  --dark-border: rgba(255, 255, 255, 0.14);
  --dark-text: #FFFFFF;
  --dark-text-2: rgba(255, 255, 255, 0.72);
  --dark-text-muted: rgba(255, 255, 255, 0.5);
  --dark-accent: #7FB0FF;
  --dark-accent-glow: rgba(127, 176, 255, 0.12);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* RTL — Hebrew uses Rubik */
body.is-rtl,
[dir="rtl"] body {
  font-family: 'Rubik', system-ui, sans-serif;
}

/* Subtle noise overlay for atmosphere */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.015;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* RTL — Flip arrow icons */
[dir="rtl"] .arrow-flip { transform: scaleX(-1); }

/* English/numeric content inside RTL pages */
.ltr,
.mono {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   3. ANIMATIONS
   ========================================================================== */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

@keyframes blink { 50% { opacity: 0; } }

@keyframes scroll {
  to { transform: translateX(-50%); }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes cellPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

@keyframes flameA {
  0%, 100% { opacity: 0.3; transform: scale(0.95); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* ==========================================================================
   5. NAV
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(0, 48, 135, 0.06);
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  /* Containing block for the mega panels — see .mega-nav .nav-item below. */
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  direction: ltr;
}

/* Boresight RT. The mark takes its colour from the link, so it inverts on a
   dark header without a second asset. */
.logo-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--accent);
  overflow: visible;
}
.logo-mark-rt {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.logo-word {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.032em;
  color: var(--text);
  white-space: nowrap;
}
[dir="rtl"] .logo-word { font-family: 'Rubik', sans-serif; font-weight: 700; }

/* Below this the four breaks in the ring close and it reads as a solid circle,
   so the footer and any small placement drop to the letterless companion. */
.footer .logo-mark { width: 30px; height: 30px; }
.footer .logo-word { font-size: 18px; }

/* On a phone the mark carries the identity on its own — it already contains the
   letters — and the bar needs the width for the search, the CTA and the menu.
   The name is clipped rather than removed so the link keeps its accessible
   name; a logo that reads as an unlabelled icon to a screen reader is a
   regression, not a tidy-up. */
@media (max-width: 640px) {
  .nav .logo-mark { width: 32px; height: 32px; }
  .nav .logo-word {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  flex-grow: 1;
  justify-content: center;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links .current-menu-item a { color: var(--accent); }

.mega-nav .nav-item { position: static; }
.mega-trigger i {
  font-size: 14px;
  transition: transform 0.2s;
}
.has-mega:hover .mega-trigger i,
.has-mega:focus-within .mega-trigger i { transform: rotate(180deg); }
.mega-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(860px, calc(100vw - 48px));
  padding-top: 14px;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 120;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
[dir="rtl"] .mega-panel {
  left: auto;
  right: 50%;
  transform: translateX(50%) translateY(8px);
}
/* Hover bridge.
   The panel is measured from the bottom of .nav-inner, which sits ~22px below
   the bottom of the trigger itself because of the bar's 18px padding. Without
   something spanning that strip the pointer leaves the trigger, loses :hover,
   and the panel closes before it can be reached. This is part of the panel, so
   crossing it keeps :hover alive on the item that owns it. */
.mega-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 32px;
}
.has-mega:hover .mega-panel,
.has-mega:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
[dir="rtl"] .has-mega:hover .mega-panel,
[dir="rtl"] .has-mega:focus-within .mega-panel {
  transform: translateX(50%) translateY(0);
}
.mega-panel-inner {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}
.mega-intro {
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
}
.mega-intro strong {
  display: block;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 10px;
}
.mega-intro p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 16px;
}
.mega-intro a {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}
.mega-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mega-link-grid-compact { align-content: start; }
.mega-link {
  display: block !important;
  padding: 14px 16px !important;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--bg);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.mega-link:hover {
  border-color: var(--accent-dim);
  background: var(--bg-2);
  transform: translateY(-1px);
}
.mega-link span {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 5px;
}
.mega-link small {
  display: block;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}

.nav-cta-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  font-size: 14.5px;
  border-radius: 8px;
  transition: all 0.2s;
}
.nav-cta:hover {
  background: var(--accent-dim);
  color: #fff;
  transform: translateY(-1px);
}
.nav-cta svg { width: 14px; height: 14px; }

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.menu-toggle svg { width: 20px; height: 20px; }

@media (max-width: 1020px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  padding: 20px 32px 40px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  /* The drawer is taller than a phone screen as soon as an accordion opens,
     and opening it locks scrolling on the body behind. Without this nothing
     on the page scrolls at all and the lower items are unreachable. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
[dir="rtl"] .mobile-menu { transform: translateX(-100%); }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu .close {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-inline-start: auto;
  margin-bottom: 12px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--text);
}
.mobile-menu ul { list-style: none; }
.mobile-menu li { border-bottom: 1px solid var(--border); }
.mobile-menu a {
  display: block;
  padding: 20px 0;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
}
.mobile-nav { margin: 0; padding: 0; }
.mobile-accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 22px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}
.mobile-accordion-trigger i {
  color: var(--text-muted);
  transition: transform 0.2s;
}
.mobile-accordion.open .mobile-accordion-trigger i { transform: rotate(180deg); }
.mobile-accordion-panel {
  display: none;
  padding: 0 0 14px;
}
.mobile-accordion.open .mobile-accordion-panel {
  display: grid;
  gap: 2px;
}
.mobile-menu .mobile-accordion-panel a {
  padding: 11px 0 11px 18px;
  font-size: 15px;
  color: var(--text-2);
  border-inline-start: 2px solid var(--border-2);
}
[dir="rtl"] .mobile-menu .mobile-accordion-panel a {
  padding: 11px 18px 11px 0;
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-primary { background: var(--accent); color: #ffffff; }
.btn-primary:hover {
  background: var(--accent-dim);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px var(--accent-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn svg { width: 16px; height: 16px; }

/* ==========================================================================
   SEARCH FORM
   ========================================================================== */
.rt-search-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.rt-search-input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.rt-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  background: #fff;
}

.rt-search-input::placeholder {
  color: var(--text-muted);
}

.rt-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.rt-search-submit:hover {
  background: var(--accent-dim);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px var(--accent-glow);
}

@media (max-width: 560px) {
  .rt-search-form { flex-direction: column; }
  .rt-search-submit { width: 100%; }
}

/* ==========================================================================
   404
   ========================================================================== */
.error-hero {
  padding: 110px 0 72px;
  border-bottom: 1px solid var(--border);
}

.error-content {
  padding: 72px 0;
}

.error-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 44px;
  align-items: start;
}

.error-search-card {
  padding: 28px;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  background: var(--surface);
}

.error-search-wrap {
  max-width: 520px;
}

.error-links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.error-link-card {
  display: block;
  min-height: 132px;
  padding: 22px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}

.error-link-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .error-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .error-search-wrap {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .error-hero {
    padding: 72px 0 48px;
  }

  .error-content {
    padding: 44px 0;
  }

  .error-search-card {
    padding: 22px;
    border-radius: 12px;
  }

  .error-links-grid {
    grid-template-columns: 1fr;
  }

  .error-link-card {
    min-height: auto;
  }
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: 80px 0 90px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at center top, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center top, black 0%, transparent 70%);
}

.hero-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(0,48,135,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-2);
  margin-bottom: 28px;
  direction: ltr;
}
.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

.hero-headline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(40px, 6.5vw, 80px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  max-width: 1100px;
}
[dir="rtl"] .hero-headline {
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
}

.hero-headline .accent {
  color: var(--accent);
  font-weight: 500;
  font-style: italic;
}

.hero-headline .underline {
  position: relative;
  display: inline-block;
}
.hero-headline .underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 10px;
  background: var(--accent);
  opacity: 0.25;
  z-index: -1;
}

.hero p.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 640px;
  margin-bottom: 36px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ==========================================================================
   HERO — FULL-BLEED MEDIA VARIANT

   Applied only when a background is set in Theme Options. The artwork is dark,
   so everything inside the hero flips to a light-on-dark treatment; without a
   background the section keeps its original light styling untouched.
   ========================================================================== */
.hero.has-bg {
  background: #050b18; /* Holds the frame before the media paints. */
  color: #ffffff;
  padding: 116px 0 124px;
  min-height: min(84vh, 780px);
  display: flex;
  align-items: center;
  border-bottom: none;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased above centre: the horizon and the craft sit in the upper half,
     so the empty foreground is what gets trimmed. */
  object-position: center 42%;
  display: block;
}

/* Darkens the copy side hardest and fades out toward the artwork, so the
   headline always clears contrast without flattening the whole image.
   Reversed under RTL, where the copy sits on the opposite side. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(5, 11, 24, 0.93) 0%,
      rgba(5, 11, 24, 0.86) 30%,
      rgba(5, 11, 24, 0.55) 62%,
      rgba(5, 11, 24, 0.34) 100%),
    linear-gradient(to bottom,
      rgba(5, 11, 24, 0.55) 0%,
      rgba(5, 11, 24, 0) 26%,
      rgba(5, 11, 24, 0) 68%,
      rgba(5, 11, 24, 0.6) 100%);
}
[dir="rtl"] .hero-scrim {
  background:
    linear-gradient(to left,
      rgba(5, 11, 24, 0.93) 0%,
      rgba(5, 11, 24, 0.86) 30%,
      rgba(5, 11, 24, 0.55) 62%,
      rgba(5, 11, 24, 0.34) 100%),
    linear-gradient(to bottom,
      rgba(5, 11, 24, 0.55) 0%,
      rgba(5, 11, 24, 0) 26%,
      rgba(5, 11, 24, 0) 68%,
      rgba(5, 11, 24, 0.6) 100%);
}

/* The decorative grid and glow were tuned for a white ground. */
.hero.has-bg .hero-grid {
  z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  opacity: 1;
}
.hero.has-bg .hero-glow { display: none; }

.hero.has-bg .container { width: 100%; }

.hero.has-bg .eyebrow {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero.has-bg .eyebrow .dot {
  background: #6BB6FF;
  box-shadow: 0 0 12px rgba(107, 182, 255, 0.9);
}

.hero.has-bg .hero-headline { color: #ffffff; }
/* The navy accent is invisible on this ground; this is its light-on-dark twin. */
.hero.has-bg .hero-headline .accent { color: #6BB6FF; }
.hero.has-bg .hero-headline .underline::after {
  background: #6BB6FF;
  opacity: 0.4;
}

.hero.has-bg p.lede { color: rgba(255, 255, 255, 0.8); }

/* Inverted CTAs — a navy fill would sink into the artwork. */
.hero.has-bg .btn-primary {
  background: #ffffff;
  color: var(--accent);
}
.hero.has-bg .btn-primary:hover {
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
.hero.has-bg .btn-ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero.has-bg .btn-ghost:hover {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

.hero.has-bg .hero-trust { border-top-color: rgba(255, 255, 255, 0.18); }
.hero.has-bg .hero-trust-num { color: #6BB6FF; }
.hero.has-bg .hero-trust-label { color: rgba(255, 255, 255, 0.62); }

@media (max-width: 900px) {
  .hero.has-bg {
    padding: 84px 0 92px;
    min-height: 0;
  }
  /* Narrow viewports crop the artwork horizontally, so centre on the craft
     rather than the frame. */
  .hero-bg-media { object-position: 56% 45%; }
  /* Copy now sits over the whole frame, so the side wash becomes a flat one. */
  .hero-scrim,
  [dir="rtl"] .hero-scrim {
    background:
      linear-gradient(to bottom,
        rgba(5, 11, 24, 0.86) 0%,
        rgba(5, 11, 24, 0.78) 55%,
        rgba(5, 11, 24, 0.88) 100%);
  }
}

/* Hero video reel */
.video-reel {
  position: relative;
  border: 1px solid var(--border-2);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16/7;
  background: var(--surface-2);
  margin-top: 56px;
  box-shadow: 0 20px 60px rgba(0, 48, 135, 0.12), 0 0 0 1px rgba(0, 48, 135, 0.06);
}

.reel-brand {
  position: absolute;
  top: 20px;
  inset-inline-start: 20px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  direction: ltr;
}
.reel-brand .reel-brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  display: grid;
  place-items: center;
  position: relative;
}
.reel-brand .reel-brand-mark::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 4.5px;
  background: var(--bg);
}
.reel-brand .reel-brand-mark span {
  position: relative;
  z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
}
.reel-brand .reel-brand-text {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.reel-brand .reel-brand-text small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.video-reel-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.video-thumb {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
}
.video-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 48, 135, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 48, 135, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.video-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
}

.video-thumb-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.video-thumb-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 320px;
}
[dir="rtl"] .video-thumb-title { font-family: 'Rubik', sans-serif; font-weight: 600; }

.video-thumb-title .mono-tag {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;
  direction: ltr;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--accent);
  display: grid;
  place-items: center;
  z-index: 3;
  cursor: pointer;
  transition: all 0.3s;
}
.play-button:hover {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.08);
}
.play-button svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
  fill: var(--accent);
  margin-left: 4px;
  transition: color 0.3s;
}
.play-button:hover svg { color: var(--bg); fill: var(--bg); }

.video-thumb-small {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
}
.video-thumb-small::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 102, 204, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 102, 204, 0.06) 1px, transparent 1px);
  background-size: 18px 18px;
}
.video-thumb-small.alt::before {
  background-image:
    linear-gradient(rgba(200, 16, 46, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 16, 46, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
}

.video-thumb-small-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
}
.video-thumb-small-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--warm);
  margin-bottom: 6px;
  direction: ltr;
}
.video-thumb-small.alt .video-thumb-small-tag { color: var(--pink); }
.video-thumb-small-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
}
[dir="rtl"] .video-thumb-small-title { font-family: 'Rubik', sans-serif; }

.video-thumb-small .play-mini {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-2);
  display: grid;
  place-items: center;
  z-index: 3;
  color: var(--text);
}
.video-thumb-small .play-mini svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  fill: currentColor;
}

@media (max-width: 760px) {
  .video-reel { aspect-ratio: 16/12; }
  .video-reel-bg { grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr; }
  .video-thumb { grid-column: 1 / -1; }
}

/* ==========================================================================
   8. PILLARS
   ========================================================================== */
.pillars { padding: 80px 0; border-bottom: 1px solid var(--border); }

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .pillars-grid { grid-template-columns: 1fr; } }

.pillar {
  position: relative;
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  transition: all 0.3s;
  cursor: pointer;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.pillar:hover {
  border-color: var(--accent-dim);
  transform: translateY(-4px);
  background: var(--surface-2);
}
.pillar:hover .pillar-arrow { color: var(--accent); transform: translateX(6px); }
[dir="rtl"] .pillar:hover .pillar-arrow { transform: translateX(-6px); }

.pillar-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  direction: ltr;
}

.pillar-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  color: var(--accent);
}
.pillar-icon svg { width: 22px; height: 22px; }

.pillar h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
[dir="rtl"] .pillar h3 { font-family: 'Rubik', sans-serif; font-weight: 700; }

.pillar h3 .sub {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 0.08em;
  direction: ltr;
}

.pillar p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
  flex-grow: 1;
}

.pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-2);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.pillar-arrow { color: var(--text-muted); transition: all 0.3s; }
.pillar-arrow svg { width: 16px; height: 16px; }

/* ==========================================================================
   9. ABOUT
   ========================================================================== */
.about {
  padding: 120px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}

.about::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
  transform: translateY(-50%);
  pointer-events: none;
}

.about-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .about-inner { grid-template-columns: 1fr; gap: 32px; } }

.about-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 16px;
  direction: ltr;
}

.about-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
}
[dir="rtl"] .about-title { font-family: 'Rubik', sans-serif; font-weight: 700; }

.about-subtitle {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  letter-spacing: -0.01em;
  display: inline-block;
  direction: ltr;
}

.about-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-2);
  margin-bottom: 24px;
}
.about-text strong { color: var(--text); font-weight: 600; }
.about-text .highlight { color: var(--accent); font-weight: 500; }

.about-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   10. MARQUEE
   ========================================================================== */
.marquee {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  width: max-content;
  direction: ltr;
}
.marquee-item {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.marquee-item::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ==========================================================================
   11. STATS
   ========================================================================== */
.stats { padding: 80px 0; border-bottom: 1px solid var(--border); }

.stats-grid { display: grid; grid-template-columns: repeat(var(--stats-count, 4), minmax(0, 1fr)); gap: 0; direction: ltr; }
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; } }

.stat {
  padding: 8px 32px;
  border-left: 1px solid var(--border);
  text-align: left;
}
.stat:first-child { border-left: none; padding-left: 0; }
@media (max-width: 760px) {
  .stat { border-left: none; padding-left: 0; padding-right: 16px; }
}

.stat-number {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.stat-number .suffix { font-size: 0.6em; color: var(--accent); }
.stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ==========================================================================
   12. SECTION HEADER
   ========================================================================== */
.section-header {
  margin-bottom: 60px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  flex-wrap: wrap;
}
.section-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  direction: ltr;
}
.section-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 720px;
}
[dir="rtl"] .section-title { font-family: 'Rubik', sans-serif; font-weight: 700; }
.section-title .accent { color: var(--accent); font-style: italic; font-weight: 500; }
.section-sub { color: var(--text-2); font-size: 16.5px; max-width: 380px; }

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumbs {
  margin-bottom: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
}
.breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumbs li + li::before {
  content: '/';
  color: var(--border);
}
.breadcrumbs a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { color: var(--accent); }

/* ==========================================================================
   13. PROJECTS
   ========================================================================== */
.projects { padding: 120px 0; border-bottom: 1px solid var(--border); }
.projects-list { display: flex; flex-direction: column; gap: 60px; }

.project {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  transition: all 0.3s;
}
.project:hover { border-color: var(--accent-dim); transform: translateY(-3px); }

@media (max-width: 900px) {
  .project { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
}

.project-meta-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
  direction: ltr;
}
.project-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
  padding: 4px 10px;
  background: var(--accent-glow);
  border-radius: 100px;
}
.project-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  color: var(--text-2);
}

.project h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 16px;
  direction: ltr;
}

.project p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 28px;
}

.project-stats {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px dashed var(--border-2);
  align-items: flex-start;
}
.project-stats > div {
  flex: 1 1 120px;
  min-width: 100px;
  padding-right: 24px;
}
.project-stat-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 2px;
  direction: ltr;
}
.project-stat-num small { font-size: 14px; }
.project-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--accent);
  padding: 10px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.project-link:hover { border-color: var(--accent); }
.project-link svg { width: 14px; height: 14px; }

.project-visual {
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border-2);
}

/* Visualizations: Satellite */
.viz-satellite { background: radial-gradient(ellipse at top, #1a2e4a 0%, #ffffff 70%); }
.viz-satellite::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.6) 0%, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.4) 0%, transparent 1px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,0.3) 0%, transparent 1px),
    radial-gradient(circle at 90% 60%, rgba(255,255,255,0.4) 0%, transparent 1px),
    radial-gradient(circle at 40% 40%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle at 70% 85%, rgba(255,255,255,0.3) 0%, transparent 1px),
    radial-gradient(circle at 15% 60%, rgba(255,255,255,0.4) 0%, transparent 1px);
}
.viz-satellite-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  border: 1px dashed rgba(134, 244, 196, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rotate 30s linear infinite;
}
.viz-satellite-orbit::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 16px var(--accent);
}
.viz-earth {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at 30% 30%, #4a90e2 0%, #1a3a6e 60%, #0a1f3d 100%);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(74, 144, 226, 0.4);
}
.viz-earth::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 40% 35%, rgba(120, 200, 100, 0.6) 0%, transparent 25%),
    radial-gradient(ellipse at 60% 65%, rgba(150, 200, 100, 0.5) 0%, transparent 22%),
    radial-gradient(ellipse at 30% 70%, rgba(100, 180, 80, 0.5) 0%, transparent 18%);
  border-radius: 50%;
}

/* Pet/Cancer Detection */
.viz-pet { background: linear-gradient(135deg, #1a1428 0%, #ffffff 100%); }
.viz-pet-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 121, 198, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 121, 198, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.viz-pet-cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  padding: 30px;
  gap: 8px;
}
.viz-cell {
  border-radius: 50%;
  background: rgba(134, 244, 196, 0.15);
  border: 1px solid rgba(134, 244, 196, 0.4);
  transition: all 0.3s;
}
.viz-cell.cancer {
  background: rgba(255, 121, 198, 0.3);
  border-color: var(--pink);
  box-shadow: 0 0 12px rgba(255, 121, 198, 0.5);
  animation: cellPulse 2.5s ease-in-out infinite;
}
.viz-pet-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-2);
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 8px 12px;
  backdrop-filter: blur(8px);
  direction: ltr;
}
.viz-pet-overlay .pink { color: var(--pink); }

/* RFSoC */
.viz-rfsoc { background: linear-gradient(135deg, #0e1a26 0%, #ffffff 100%); }
.viz-rfsoc-svg { position: absolute; inset: 24px; }

/* Battery */
.viz-battery {
  background: linear-gradient(135deg, #2a1a0a 0%, #ffffff 100%);
  display: grid;
  place-items: center;
}
.viz-battery::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 184, 107, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 184, 107, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.battery-svg { position: relative; z-index: 2; width: 60%; }
.battery-flame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.flame-arc {
  fill: none;
  stroke: var(--warm);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.7;
}
.flame-arc.a1 { animation: flameA 3s ease-in-out infinite; }
.flame-arc.a2 { animation: flameA 3s ease-in-out infinite 0.5s; }
.flame-arc.a3 { animation: flameA 3s ease-in-out infinite 1s; }

.viz-label {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.97);
  padding: 4px 10px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  z-index: 5;
  backdrop-filter: blur(8px);
  direction: ltr;
}
.viz-label.tl { top: 16px; left: 16px; color: var(--accent); }
.viz-label.tr { top: 16px; right: 16px; color: var(--warm); }
.viz-label.bl { bottom: 16px; left: 16px; color: var(--text-muted); }

/* ==========================================================================
   14. WHY JOIN
   ========================================================================== */
.why-join { padding: 120px 0; border-bottom: 1px solid var(--border); background: var(--bg-2); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }

.why-item {
  background: var(--bg);
  padding: 40px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.why-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.why-icon svg { width: 22px; height: 22px; }
.why-item h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
[dir="rtl"] .why-item h3 { font-family: 'Rubik', sans-serif; font-weight: 700; }
.why-item p { color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* ==========================================================================
   15. PROCESS
   ========================================================================== */
.process { padding: 120px 0; border-bottom: 1px solid var(--border); }

.process-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 800px) { .process-timeline { grid-template-columns: 1fr; gap: 16px; } }

.process-step {
  position: relative;
  padding: 32px 24px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  transition: all 0.3s;
}
.process-step:hover { border-color: var(--accent-dim); transform: translateY(-4px); }

.step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: 0.08em;
  direction: ltr;
}
.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--accent);
}
.step-icon svg { width: 20px; height: 20px; }
.step-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
[dir="rtl"] .step-title { font-family: 'Rubik', sans-serif; font-weight: 700; }
.step-desc { font-size: 14.5px; color: var(--text-2); line-height: 1.55; }

/* ==========================================================================
   16. TECH STACK
   ========================================================================== */
.tech-stack { padding: 120px 0; border-bottom: 1px solid var(--border); background: var(--bg-2); }

.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 800px) { .tech-grid { grid-template-columns: 1fr; } }

.tech-cat {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 14px;
}
.tech-cat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-2);
}
.tech-cat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-glow);
  display: grid;
  place-items: center;
  color: var(--accent);
}
.tech-cat-icon svg { width: 16px; height: 16px; }
.tech-cat-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
[dir="rtl"] .tech-cat-title { font-family: 'Rubik', sans-serif; font-weight: 700; }
.tech-list { display: flex; flex-wrap: wrap; gap: 8px; direction: ltr; }
.tech-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--text-2);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   17. TESTIMONIALS
   ========================================================================== */
.testimonials { padding: 120px 0; border-bottom: 1px solid var(--border); }

/* Infinite marquee (PRD 4.1). Two identical sets sit side by side, so
   translating the track by -50% lands on the copy and loops seamlessly. */
.testimonial-marquee {
  overflow: hidden;
  margin-inline: -4px;
  padding: 4px;
}
.testimonial-track {
  display: flex;
  width: max-content;
  animation: scroll var(--t-duration, 36s) linear infinite;
}
.testimonial-set { display: flex; gap: 24px; padding-inline-end: 24px; }

.testimonial-marquee:hover .testimonial-track,
.testimonial-marquee:focus-within .testimonial-track,
.testimonials.is-paused .testimonial-track { animation-play-state: paused; }

/* Cards sit at a fixed width here — a percentage would be measured against
   the doubled track, not the viewport, and halve every card. */
.testimonial-track .t-card { flex: 0 0 380px; }

/* The featured treatment — wider card, bigger type, oversized quote mark —
   was built for the three-card grid, where the first card anchored the row.
   A loop has no first card, so one outsized card among identical ones just
   reads as a mistake. The flag still decides running order; it no longer
   changes how the card looks. */
.testimonial-track .t-card.featured-t { flex-basis: 380px; }
.testimonial-track .t-card.featured-t .t-quote { font-size: 17px; }
.testimonial-track .t-card.featured-t { background: var(--surface); border-color: var(--border-2); }
.testimonial-track .t-card.featured-t::before { content: none; }

@media (max-width: 720px) {
  .testimonial-track .t-card,
  .testimonial-track .t-card.featured-t { flex-basis: 82vw; }
}

/* Pause control, in the section header opposite the title. */
.t-playpause[hidden] { display: none; }
.t-playpause {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  align-self: flex-end;
  transition: border-color 0.2s, color 0.2s;
}
.t-playpause:hover { border-color: var(--accent-dim); color: var(--accent); }
.t-playpause .t-icon-play { display: none; }
.t-playpause[aria-pressed="true"] .t-icon-pause { display: none; }
.t-playpause[aria-pressed="true"] .t-icon-play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .testimonial-track { animation: none; }
  .testimonial-marquee { overflow-x: auto; }
}

.t-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  padding: 36px;
  display: flex;
  flex-direction: column;
}
.t-card.featured-t {
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
  border-color: var(--accent-dim);
  position: relative;
  overflow: hidden;
}
.t-card.featured-t::before {
  content: '"';
  position: absolute;
  top: -40px;
  inset-inline-start: 20px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 220px;
  color: var(--accent);
  opacity: 0.1;
  line-height: 1;
}
.t-quote {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin-bottom: 28px;
  color: var(--text);
  position: relative;
  z-index: 2;
  flex-grow: 1;
}
[dir="rtl"] .t-quote { font-family: 'Rubik', sans-serif; line-height: 1.5; }
.t-card.featured-t .t-quote { font-size: 24px; }
.t-card .t-quote { font-size: 17px; }
.t-quote em { color: var(--accent); font-style: italic; }
.t-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border-2);
}
.t-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--warm));
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--bg);
  font-size: 14px;
  flex-shrink: 0;
}
.t-author-info { display: flex; flex-direction: column; }
.t-author-name { font-weight: 600; font-size: 14.5px; }
.t-author-role { font-size: 12.5px; color: var(--text-muted); }

/* ==========================================================================
   18. PARTNERS
   ========================================================================== */
.partners { padding: 80px 0; border-bottom: 1px solid var(--border); }

/* Closing variant, rendered from the footer on every page. It runs into the
   dark CTA below it. The colour change is the separation, so no rule is drawn
   at that seam — and on pages with no CTA the strip stands clear of the footer
   on its own padding. */
.partners.is-closing {
  padding: 64px 0 72px;
  border-top: 1px solid var(--border);
  border-bottom: none;
}
/* Pages with no closing CTA — contact, for one — end on the strip instead. */
.partners.is-closing + .footer { border-top: none; padding-top: 32px; }

@media (max-width: 780px) { .partners.is-closing { padding: 48px 0 56px; } }

.partners-title {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 40px;
  direction: ltr;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  align-items: center;
}
@media (max-width: 800px) { .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 0; } }

.partner-logo {
  display: grid;
  place-items: center;
  padding: 20px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--text-2);
  opacity: 0.65;
  transition: opacity 0.2s;
  border-inline-start: 1px solid var(--border);
  direction: ltr;
}
.partner-logo:first-child { border-inline-start: none; }
.partner-logo:hover { opacity: 1; color: var(--text); }
@media (max-width: 800px) { .partner-logo { border-inline-start: none; } }

/* Auto-scrolling partner bar (PRD 6.3): grayscale, pauses on hover.
   The track holds two identical sets, so translating it by -50% loops
   seamlessly. Duration comes from --marquee-duration, set per partner count. */
.partner-marquee {
  overflow: hidden;
  /* Fade the logos out at both edges instead of clipping them mid-glyph. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.partner-marquee-track {
  display: flex;
  width: max-content;
  direction: ltr;
  animation: scroll var(--marquee-duration, 90s) linear infinite;
}
.partner-marquee:hover .partner-marquee-track { animation-play-state: paused; }

.partner-marquee-set { display: flex; align-items: center; }

.partner-marquee .partner-logo {
  flex: 0 0 auto;
  width: 180px;
  height: 90px;
  padding: 0 28px;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.25s, opacity 0.25s;
}
.partner-marquee .partner-logo:first-child { border-inline-start: 1px solid var(--border); }
.partner-marquee .partner-logo:hover { filter: grayscale(0); opacity: 1; }
.partner-marquee .partner-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 800px) {
  .partner-marquee .partner-logo { width: 130px; height: 70px; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-marquee-track { animation: none; }
  .partner-marquee { overflow-x: auto; }
}

/* ==========================================================================
   19. FAQ
   ========================================================================== */
.faq { padding: 120px 0; border-bottom: 1px solid var(--border); background: var(--bg-2); }

.faq-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .faq-inner { grid-template-columns: 1fr; gap: 40px; } }

.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: start;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
}
[dir="rtl"] .faq-q { font-family: 'Rubik', sans-serif; }
.faq-q .plus {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.2s;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
}
.faq-item.open .faq-q .plus {
  transform: rotate(45deg);
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-a { max-height: 500px; }
.faq-a p {
  padding: 0 24px 24px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ==========================================================================
   20. CTA
   ========================================================================== */
.cta { padding: 120px 0; position: relative; overflow: hidden; }

/* Closing variant, rendered from the footer. It shares the dark surface with
   the footer below it, so the two read as one ending rather than two blocks. */
.cta.is-closing {
  padding: 72px 0 72px;
}
/* Same spacing whether or not the light partner strip sits above it. */
.partners.is-closing + .cta.is-closing { padding-top: 72px; }

.cta.is-closing .cta-card { padding: 0 24px; }
.cta.is-closing p { margin-bottom: 32px; }

.cta.is-closing + .footer {
  border-top: none;
  padding-top: 0;
}
/* The divider sits inside the container, so it lines up with the rules under
   the link columns and the offices row rather than bleeding edge to edge. */
.cta.is-closing + .footer .footer-main {
  border-top: 1px solid var(--dark-border);
  padding-top: 56px;
}

@media (max-width: 780px) {
  .cta.is-closing { padding: 56px 0 56px; }
  .cta.is-closing .cta-card { padding: 0 8px; }
}

/* Base card. The closing variant strips the surface back to nothing, but the
   centring, the stacking context and the glow all live here. */
.cta-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 24px;
  padding: 80px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 50%);
  pointer-events: none;
}
.cta-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  pointer-events: none;
}

.cta-content { position: relative; z-index: 2; }
.cta h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 20px;
}
[dir="rtl"] .cta h2 { font-family: 'Rubik', sans-serif; font-weight: 700; }
.cta h2 .accent { color: var(--accent); font-style: italic; font-weight: 500; }
.cta p {
  font-size: 18px;
  color: var(--text-2);
  max-width: 560px;
  margin: 0 auto 36px;
}
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 600px) { .cta-card { padding: 50px 24px; } }

/* ==========================================================================
   21. FOOTER
   ========================================================================== */
.footer {
  background: var(--bg-2);
  padding: 72px 0 28px;
  border-top: 1px solid var(--border);
}

/* Every link in here gets a visible keyboard focus ring — the footer is the
   densest link cluster on the site and the easiest place to get lost in. */
.footer a:focus-visible,
.footer button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: 40px 32px;
  padding: 0 0 48px;
  border-bottom: 1px solid var(--border);
}
/* Two balanced pairs before the single column, so the brand block never ends up
   alone on a line with three-quarters of the row empty beside it. */
@media (max-width: 1080px) { .footer-main { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (max-width: 560px)  { .footer-main { grid-template-columns: 1fr; gap: 32px; } }

.footer-brand p {
  margin-top: 18px;
  color: var(--text-2);
  font-size: 14.5px;
  max-width: 320px;
  line-height: 1.6;
}

.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: all 0.2s;
}
.footer-social a:hover { color: var(--accent); border-color: var(--accent-dim); }
.footer-social svg { width: 16px; height: 16px; }

.footer-col-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 20px;
  direction: ltr;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { color: var(--text-2); font-size: 14.5px; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }

/* Contact rows carry a leading mark so the kind of channel is readable at a
   glance rather than by reading the value. The icons are decorative — the link
   text still says what each one is. */
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-contact i {
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
  flex-shrink: 0;
}
.footer-contact .footer-whatsapp-mark { color: #25D366; }
.footer-contact .ltr { direction: ltr; unicode-bidi: isolate; }

.offices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 700px) { .offices { grid-template-columns: 1fr; gap: 24px; } }

.office { display: flex; flex-direction: column; gap: 6px; }
.office-flag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 4px;
  direction: ltr;
}
.office-city {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
[dir="rtl"] .office-city { font-family: 'Rubik', sans-serif; font-weight: 700; }
.office-detail { font-size: 13.5px; color: var(--text-2); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 16px 28px;
}
.footer-bottom a { color: var(--text-2); }
.footer-bottom a:hover { color: var(--accent); }

.footer-bottom-left,
.footer-bottom-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* The certification is a claim, not a link — a quiet pill keeps it from reading
   as one while still giving it its own weight. */
.footer-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border: 1px solid var(--border-2);
  border-radius: 100px;
  color: var(--text-muted);
  direction: ltr;
}

.footer-sep { color: var(--border-3); }

.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-radius: 100px;
  color: var(--text-2);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-top i { font-size: 14px; line-height: 1; }
.footer-top:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-glow);
}

@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   SEARCH RESULTS
   ========================================================================== */

.search-refine {
  max-width: 560px;
  margin-top: 32px;
}

/* Results are mixed types with no shared imagery, so they read as a stack of
   rows rather than a card grid — the type chip carries the distinction. */
.search-results-list {
  display: grid;
  gap: 16px;
}

.search-result {
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--surface);
  padding: 26px 28px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-result:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 10px 30px var(--accent-glow);
}

.search-result-title {
  font-size: 23px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.search-result-title a {
  color: var(--text);
  text-decoration: none;
}
.search-result-title a:hover { color: var(--accent); }

.search-result-summary {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
  margin: 10px 0 0;
  max-width: 70ch;
}

.search-result-cta {
  margin-top: 20px;
  align-self: flex-start;
}

.search-empty {
  max-width: 760px;
  padding: 24px 0 8px;
}
.search-empty-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.search-empty-text {
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .search-result { padding: 22px 20px; }
  .search-result-title { font-size: 20px; }
  .search-empty-title { font-size: 25px; }
}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
/* ==========================================================================
   HOME — HERO TRUST BAR
   ========================================================================== */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  list-style: none;
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--border);
}
.hero-trust-item { display: flex; flex-direction: column; gap: 2px; }
.hero-trust-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 21px;
  font-weight: 600;
  color: var(--accent);
  direction: ltr;
}
.hero-trust-label {
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   HOME — SERVICES STRIP
   ========================================================================== */
.home-services { padding: 120px 0; border-bottom: 1px solid var(--border); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.svc-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px var(--accent-glow);
}
.svc-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 20px;
}
.svc-icon i { font-size: 21px; }
.svc-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
[dir="rtl"] .svc-name { font-family: 'Rubik', sans-serif; font-weight: 700; }
.svc-desc {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 22px;
  flex-grow: 1;
}
.svc-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}
.svc-card:hover .svc-more { gap: 11px; }
.svc-more svg { transition: transform 0.2s; }

.svc-footer { margin-top: 40px; display: flex; justify-content: center; }

/* ==========================================================================
   HOME — SOLUTIONS BY INDUSTRY (TABS)
   ========================================================================== */
.home-solutions { padding: 120px 0; border-bottom: 1px solid var(--border); background: var(--bg-2); }

.sol-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.sol-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
}
.sol-tab:hover { border-color: var(--accent-dim); color: var(--text); }
.sol-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sol-tab i { font-size: 16px; }

.sol-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: 32px;
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 16px;
}
.sol-panel[hidden] { display: none; }
@media (max-width: 880px) {
  .sol-panel { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
}

.sol-panel-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
[dir="rtl"] .sol-panel-title { font-family: 'Rubik', sans-serif; font-weight: 700; }
.sol-panel-lede {
  font-size: 16.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 26px;
}

.sol-panel-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 680px) { .sol-panel-pair { grid-template-columns: 1fr; } }

.sol-panel-block {
  padding: 20px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px dashed var(--border-2);
}
.sol-panel-block.is-response {
  background: var(--surface);
  border-style: solid;
  border-color: var(--accent-dim);
}
.sol-panel-block p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.sol-panel-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sol-panel-block.is-response .sol-panel-label { color: var(--accent); }

.sol-panel-side {
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  align-self: start;
}
.sol-panel-standards {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sol-panel-standards li {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  padding-inline-start: 14px;
  position: relative;
}
.sol-panel-standards li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ==========================================================================
   HOME — PRODUCTS STRIP
   ========================================================================== */
.home-products { padding: 120px 0; border-bottom: 1px solid var(--border); }

.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .prod-grid { grid-template-columns: 1fr; } }

.prod-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.prod-card:hover { border-color: var(--accent-dim); transform: translateY(-3px); }

.prod-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.prod-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  display: grid;
  place-items: center;
  color: var(--accent);
}
.prod-icon i { font-size: 19px; }
.prod-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 5px 10px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
}
.prod-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
[dir="rtl"] .prod-name { font-family: 'Rubik', sans-serif; font-weight: 700; }
.prod-desc {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 22px;
  flex-grow: 1;
}

.prod-custom {
  margin-top: 24px;
  padding: 32px;
  border-radius: 16px;
  background: var(--bg-dark, #0F172A);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.prod-custom h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: #fff;
}
[dir="rtl"] .prod-custom h3 { font-family: 'Rubik', sans-serif; font-weight: 700; }
.prod-custom p { margin: 0; font-size: 15px; color: #A8BDD4; }

/* ==========================================================================
   SECTION LABEL / BLOCK
   Used as a kicker above block headings on service, solution, product,
   contact, about, legal, and 404 templates.
   ========================================================================== */
.solution-block-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
[dir="rtl"] .solution-block-label { letter-spacing: 0.04em; }

.solution-block { scroll-margin-top: 100px; }

.solution-content > * + * { margin-top: 1em; }
.solution-content a { color: var(--accent); text-decoration: underline; }
.solution-content ul,
.solution-content ol { padding-inline-start: 22px; }

/* ==========================================================================
   LEGACY PAGE CONTENT

   Body copy for the pages kept at their original rt-projects.com paths. The
   old site had no design system, so this is the one place a long run of
   plain h2/h3/p/ul from that era gets a rhythm consistent with the rest.
   ========================================================================== */
.legacy-content { font-size: 17px; line-height: 1.8; color: var(--text-2); }

.legacy-content h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 30px;
  line-height: 1.25;
  color: var(--text);
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.legacy-content h3 {
  font-size: 19px;
  line-height: 1.35;
  color: var(--text);
  margin-top: 34px;
}

.legacy-content h2:first-child,
.legacy-content h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legacy-content ul { padding-inline-start: 20px; }
.legacy-content li + li { margin-top: 6px; }
.legacy-content li::marker { color: var(--text-faint); }

/* The old pages listed a technology per heading, which reads as a wall of
   rules at full width. Grouping them keeps the scan short on a wide screen. */
.legacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.legacy-grid > div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
}

.legacy-grid h3 { margin-top: 0; font-size: 16px; }
.legacy-grid p { margin-top: 8px; font-size: 15px; line-height: 1.65; }

/* Vendor block diagrams come as light artwork on white, so they need an edge
   of their own to sit on the page rather than float in it. */
.legacy-content figure {
  margin: 26px 0 0;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.legacy-content figure img { border-radius: 4px; margin-inline: auto; }
.legacy-content figure + p { margin-top: 16px; }

.legacy-content figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* The old site put a vendor logo above each technology card. Kept at its own
   size rather than stretched, so a 100px tile stays a 100px tile. */
.legacy-logo {
  width: 52px;
  height: auto;
  margin: 0 0 12px;
  border-radius: 6px;
}

/* Project tiles carried their own thumbnail, which is the card's subject
   rather than a mark beside it — so it spans the card and leads. */
.legacy-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 14px;
  background: var(--surface-3);
}

.legacy-grid-wide { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

.legacy-cat {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px !important;
}

@media (max-width: 620px) {
  .legacy-content { font-size: 16px; }
  .legacy-content h2 { font-size: 25px; margin-top: 44px; }
}

/* ==========================================================================
   CONTACT PAGE LAYOUT
   ========================================================================== */
.rt-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .rt-contact-layout { grid-template-columns: 1fr; gap: 32px; }
}

.rt-form-card {
  padding: 32px;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  background: var(--surface);
}
@media (max-width: 560px) { .rt-form-card { padding: 24px 20px; } }

.rt-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 680px) { .rt-form-grid { grid-template-columns: 1fr; } }
.rt-field-full { grid-column: 1 / -1; }

.rt-field { display: flex; flex-direction: column; gap: 8px; }
.rt-field label { font-size: 13px; font-weight: 600; }
.rt-req { color: var(--pink); }

.rt-field input,
.rt-field select,
.rt-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rt-field textarea { resize: vertical; line-height: 1.6; }
.rt-field input::placeholder,
.rt-field textarea::placeholder { color: var(--text-faint); }

.rt-field input:focus,
.rt-field select:focus,
.rt-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.rt-field input.has-error,
.rt-field textarea.has-error { border-color: var(--pink); }
.rt-field-error {
  font-size: 12.5px;
  color: var(--pink);
  min-height: 0;
}
.rt-field-error:empty { display: none; }

/* Honeypot — off-screen rather than display:none, which some bots detect */
.rt-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Cloudflare Turnstile. The widget is interaction-only, so it is an empty box
   most of the time — :empty keeps it from adding a gap when it renders nothing. */
.rt-turnstile {
  margin-top: 20px;
}
.rt-turnstile:empty {
  margin-top: 0;
}

.rt-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.rt-form-privacy {
  margin: 0;
  max-width: 320px;
  font-size: 13px;
  color: var(--text-muted);
}

.rt-form-submit { position: relative; }
.rt-form-submit[disabled] { opacity: 0.75; cursor: progress; }
.rt-form-submit .rt-spinner { display: none; }
.rt-form-submit.is-loading .rt-submit-arrow { display: none; }
.rt-form-submit.is-loading .rt-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rt-spin 0.7s linear infinite;
}
@keyframes rt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rt-form-submit.is-loading .rt-spinner { animation-duration: 2s; }
}

.rt-form-status {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.6;
  border-radius: 12px;
}
.rt-form-status:empty { display: none; }
.rt-form-status.is-success {
  padding: 18px 20px;
  color: #1B5E20;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.35);
}
.rt-form-status.is-error {
  padding: 18px 20px;
  color: var(--pink);
  background: rgba(200, 16, 46, 0.06);
  border: 1px solid rgba(200, 16, 46, 0.3);
}

.rt-map-section { padding: 0 0 80px; }

.rt-map-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.rt-map-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 10px 0 8px;
}
[dir="rtl"] .rt-map-title { font-family: 'Rubik', sans-serif; font-weight: 700; }

.rt-map-address {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15.5px;
  color: var(--text-2);
}
.rt-map-address i { color: var(--accent); font-size: 18px; }

.rt-map-embed {
  border: 1px solid var(--border-2);
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  background: var(--bg-2);
}
.rt-map-embed iframe { display: block; width: 100%; height: 420px; }
@media (max-width: 560px) { .rt-map-embed iframe { height: 320px; } }

/* ==========================================================================
   SOLUTION — CHALLENGE / RESPONSE
   ========================================================================== */
.sol-cr-section {
  padding: 80px 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.sol-cr-head { margin-bottom: 44px; }
.sol-cr-head .section-title { font-size: clamp(28px, 3vw, 40px); }

.sol-cr-rows { display: flex; flex-direction: column; gap: 20px; }

.sol-cr-row {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  gap: 18px;
  align-items: stretch;
}
/* Alternate the sides so the eye zig-zags down the page */
.sol-cr-row:nth-child(even) .sol-cr-challenge { order: 3; }
.sol-cr-row:nth-child(even) .sol-cr-link      { order: 2; }
.sol-cr-row:nth-child(even) .sol-cr-response  { order: 1; }
.sol-cr-row:nth-child(even) .sol-cr-link svg  { transform: scaleX(-1); }
[dir="rtl"] .sol-cr-link svg                  { transform: scaleX(-1); }
[dir="rtl"] .sol-cr-row:nth-child(even) .sol-cr-link svg { transform: none; }

.sol-cr-card {
  padding: 26px 24px;
  border-radius: 16px;
  border: 1px solid var(--border-2);
  background: var(--surface);
}
.sol-cr-challenge { background: var(--surface-2); border-style: dashed; }
.sol-cr-response  { border-color: var(--accent-dim); box-shadow: 0 6px 24px var(--accent-glow); }

.sol-cr-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.sol-cr-response .sol-cr-kicker { color: var(--accent); }
.sol-cr-kicker i { font-size: 15px; }

.sol-cr-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 10px;
}
[dir="rtl"] .sol-cr-title { font-family: 'Rubik', sans-serif; font-weight: 700; }
.sol-cr-text { font-size: 15px; color: var(--text-2); line-height: 1.65; margin: 0; }

.sol-cr-link {
  align-self: center;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px dashed var(--border-3);
  background: var(--surface);
  color: var(--accent);
}

@media (max-width: 880px) {
  .sol-cr-row { grid-template-columns: 1fr; gap: 12px; }
  .sol-cr-row > * { order: 0 !important; }
  .sol-cr-link { justify-self: center; width: 40px; height: 40px; }
  .sol-cr-link svg,
  .sol-cr-row:nth-child(even) .sol-cr-link svg,
  [dir="rtl"] .sol-cr-link svg { transform: rotate(90deg); }
}

/* ==========================================================================
   SOLUTION — COMPLIANCE & STANDARDS
   ========================================================================== */
.sol-standards {
  padding: 80px 0;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.sol-standards-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.sol-standards-head .section-sub { max-width: 340px; }

.sol-standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}
.sol-standard {
  display: flex;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.2s, transform 0.2s;
}
.sol-standard:hover { border-color: var(--accent-dim); transform: translateY(-2px); }

.sol-standard-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
}
.sol-standard-mark i { font-size: 19px; }

.sol-standard-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.sol-standard-authority {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  direction: ltr;
}
.sol-standard-desc { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 0; }

.sol-standards-note {
  margin-top: 28px;
  font-size: 14px;
  color: var(--text-muted);
}
.sol-standards-note a { color: var(--accent); font-weight: 600; }
.sol-standards-note a:hover { text-decoration: underline; }


/* ==========================================================================
   SERVICE DETAIL — hero + tech pills
   The rest of this template still styles inline; these live here because the
   hero has responsive and light-on-dark states an inline style cannot express.
   ========================================================================== */
.svc-hero { padding: 100px 0 60px; border-bottom: 1px solid var(--border); }

/* ---- Atmospheric background variant, when a Featured Image is set ---- */
.svc-hero.has-bg {
  position: relative;
  overflow: hidden;
  background: #050b18; /* Holds the frame before the image paints. */
  color: #ffffff;
  border-bottom: none;
  padding: 128px 0 96px;
}
.svc-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.svc-hero-bg-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}
/* Darkest where the copy sits, easing off toward the far edge, plus a top and
   bottom wash so the sticky header and the section seam both stay readable. */
.svc-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(5, 11, 24, 0.92) 0%,
      rgba(5, 11, 24, 0.82) 38%,
      rgba(5, 11, 24, 0.58) 72%,
      rgba(5, 11, 24, 0.42) 100%),
    linear-gradient(to bottom,
      rgba(5, 11, 24, 0.6) 0%,
      rgba(5, 11, 24, 0) 30%,
      rgba(5, 11, 24, 0) 66%,
      rgba(5, 11, 24, 0.66) 100%);
}
[dir="rtl"] .svc-hero-scrim {
  background:
    linear-gradient(to left,
      rgba(5, 11, 24, 0.92) 0%,
      rgba(5, 11, 24, 0.82) 38%,
      rgba(5, 11, 24, 0.58) 72%,
      rgba(5, 11, 24, 0.42) 100%),
    linear-gradient(to bottom,
      rgba(5, 11, 24, 0.6) 0%,
      rgba(5, 11, 24, 0) 30%,
      rgba(5, 11, 24, 0) 66%,
      rgba(5, 11, 24, 0.66) 100%);
}
.svc-hero.has-bg .container { position: relative; z-index: 2; }

/* Everything below re-tunes the existing hero furniture for a dark ground. */
.svc-hero.has-bg h1,
.svc-hero.has-bg .section-title { color: #ffffff; }
.svc-hero.has-bg p { color: rgba(255, 255, 255, 0.82); }
.svc-hero.has-bg .solution-content,
.svc-hero.has-bg .solution-content p { color: rgba(255, 255, 255, 0.78); }

.svc-hero.has-bg .breadcrumbs,
.svc-hero.has-bg .breadcrumbs a,
.svc-hero.has-bg .breadcrumbs span { color: rgba(255, 255, 255, 0.62); }
.svc-hero.has-bg .breadcrumbs a:hover { color: #ffffff; }

.svc-hero.has-bg .project-num,
.svc-hero.has-bg .project-tag {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* The "All Services" link is coloured inline in the template, so this has to
   out-specify that attribute rather than simply set a colour. */
/* The "All Services / Solutions / Products" link back to the hub. Matched by
   class now that three post types share this hero — an href-suffix selector
   only ever knew about services. */
.svc-hero.has-bg .hero-back { color: rgba(255, 255, 255, 0.7) !important; }
.svc-hero.has-bg .hero-back:hover { color: #ffffff !important; }

.svc-hero.has-bg .section-tag,
.svc-hero.has-bg .solution-block-label { color: rgba(255, 255, 255, 0.75); }

/* The project stat block was built for the light hero and never got a dark
   counterpart, so the value stayed brand navy and the label stayed muted grey
   on a photograph — the two least readable things on the page. Audited the
   whole hero rather than just these two; every other element already had one. */
.svc-hero.has-bg .project-stat-num { color: #FFFFFF; }
.svc-hero.has-bg .project-stat-lbl { color: rgba(255, 255, 255, 0.66); }
.svc-hero.has-bg .prod-cat {
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.28);
}

.svc-hero.has-bg .btn-ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
.svc-hero.has-bg .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 900px) {
  .svc-hero { padding: 60px 0 40px; }
  .svc-hero.has-bg { padding: 84px 0 64px; }
  /* Copy now spans the full frame, so the side wash flattens to a vertical one. */
  .svc-hero-scrim,
  [dir="rtl"] .svc-hero-scrim {
    background:
      linear-gradient(to bottom,
        rgba(5, 11, 24, 0.84) 0%,
        rgba(5, 11, 24, 0.76) 55%,
        rgba(5, 11, 24, 0.88) 100%);
  }
}

.svc-tech-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.svc-tech-pill {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.svc-tech-logo {
  width: auto;
  height: 16px;
  max-width: 48px;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   CASE STUDY FILTER BAR (PRD 4.6)
   ========================================================================== */
.cs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.cs-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border-2);
  border-radius: 100px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.cs-filter:hover { border-color: var(--accent-dim); color: var(--accent); }
.cs-filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.cs-filter-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 100px;
  background: var(--bg-2);
  color: var(--text-muted);
}
.cs-filter.is-active .cs-filter-count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

@media (max-width: 700px) {
  /* Too many pills to wrap comfortably on a phone; scroll them instead. */
  .cs-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Bleed to the screen edge. Must match .container's padding exactly, or
       the strip stops short and clips the last pill early. */
    margin-inline: -32px;
    padding-inline: 32px;
  }
  .cs-filters::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   TAXONOMY TERM ARCHIVE
   Technology / Industry / Product Category — results grouped by post type.
   ========================================================================== */
.tax-hero-meta {
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tax-hero-meta strong { color: var(--accent); font-weight: 500; }

.tax-group + .tax-group { margin-top: 64px; }

.tax-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.tax-group-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 100px;
  background: var(--bg-2);
  color: var(--text-muted);
}

/* The card title is an <h2> here rather than the <h3> the home strip uses, so
   the heading order stays legal under the term <h1>. Same look either way. */
.tax-group .prod-name { font-size: 19px; }

.tax-empty {
  text-align: center;
  padding: 80px 0;
  color: var(--text-muted);
}
.tax-empty p { font-size: 20px; margin-bottom: 24px; }
.tax-empty-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* "Filed under" term strip on single service / solution / product / case study. */
.term-links-section {
  padding: 32px 0 8px;
}
.term-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* ==========================================================================
   PROCESS TIMELINE
   Horizontal on desktop, vertical on mobile, from one ordered list.
   ========================================================================== */
.process {
  padding: 100px 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.process-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
}

.process-step {
  position: relative;
  padding-top: 52px;
}

.process-num {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
}

/* The rail between one step and the next. Drawn from the step itself so the
   last one simply has none, instead of a trailing line into empty space. */
.process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 17px;
  inset-inline-start: 48px;
  inset-inline-end: -28px;
  height: 2px;
  background: var(--border-2);
}

.process-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
[dir="rtl"] .process-title { font-family: 'Rubik', sans-serif; font-weight: 700; }

.process-desc {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .process { padding: 80px 0; }
  .process-track { grid-template-columns: 1fr; gap: 0; }
  .process-step { padding: 0 0 32px 56px; }
  .process-step:last-child { padding-bottom: 0; }
  .process-step:not(:last-child)::before {
    top: 44px;
    inset-inline-start: 17px;
    inset-inline-end: auto;
    bottom: 8px;
    width: 2px;
    height: auto;
  }
}

/* ==========================================================================
   RELATED CONTENT STRIP
   Used at the bottom of service, product, and case study pages.
   ========================================================================== */
.related-strip {
  padding: 64px 0;
  border-top: 1px solid var(--border);
}
.related-strip + .related-strip { border-top: 1px dashed var(--border-2); }

.related-strip-head { margin-bottom: 24px; }

.related-strip-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
[dir="rtl"] .related-strip-title { font-family: 'Rubik', sans-serif; font-weight: 700; }

/* Two cards in the three-column grid would leave a hole on the right. */
.prod-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .prod-grid-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   FLOATING WHATSAPP BUTTON
   ========================================================================== */
/* The accessibility widget owns the bottom-right corner, so the button stacks
   above it rather than under it. --rt-banner-h is set by main.js while the
   cookie banner is open, so the button rides above that too instead of hiding
   behind it. */
/* Sized and aligned to the Elementor accessibility widget stacked below it.
   The widget's own config carries a 10px offset, but with
   "enableExactPosition": false it never applies it and falls back to its
   default — so this offset is matched against the rendered button, not that
   number. Both values are single variables so the pair can be retuned. */
:root {
  --wa-float-bottom: 96px;
  --wa-float-size: 46px;
  --wa-float-end: 24px;
  /* Inset of the glyph inside the circle. The circles already matched; what
     read as "bigger" was the mark itself — the WhatsApp glyph filled half its
     circle where the accessibility person fills about 45% of its own. */
  --wa-float-inset: 13px;
}

.wa-float {
  position: fixed;
  bottom: calc(var(--wa-float-bottom) + var(--rt-banner-h, 0px));
  inset-inline-end: var(--wa-float-end);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-radius: 100px;
  text-decoration: none;
}

.wa-float-icon {
  width: var(--wa-float-size);
  height: var(--wa-float-size);
  padding: var(--wa-float-inset);
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.wa-float:hover .wa-float-icon,
.wa-float:focus-visible .wa-float-icon {
  transform: translateY(-2px);
}

/* Label rides alongside the button on hover; it is decorative, the accessible
   name lives on the link itself. */
.wa-float-tip {
  order: -1;
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--text);
  color: #ffffff;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
[dir="rtl"] .wa-float-tip { transform: translateX(-8px); }
.wa-float:hover .wa-float-tip,
.wa-float:focus-visible .wa-float-tip { opacity: 1; transform: translateX(0); }

@media (max-width: 640px) {
  :root { --wa-float-bottom: 84px; }
  .wa-float-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float-icon,
  .wa-float-tip { transition: none; }
}

/* ==========================================================================
   COOKIE CONSENT BANNER
   ========================================================================== */
.rt-consent-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--surface);
  border-top: 1px solid var(--border-2);
  box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.12);
}
.rt-consent-bar[hidden] { display: none; }

.rt-consent-bar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 32px;
}

.rt-consent-bar-text strong { display: block; font-size: 15px; margin-bottom: 4px; }
.rt-consent-bar-text p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.6; }
.rt-consent-bar-text a { color: var(--accent); }

.rt-consent-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rt-consent-bar-actions .btn { font-size: 14px; padding: 10px 18px; }

.rt-consent-choices {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-2);
}
.rt-consent-choices[hidden] { display: none; }

.rt-consent-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  cursor: pointer;
}
.rt-consent-choice input { margin-top: 3px; flex-shrink: 0; }
.rt-consent-choice strong { display: block; }
.rt-consent-choice small { color: var(--text-muted); font-size: 13px; }
.rt-consent-choices .btn { justify-self: start; }

@media (max-width: 780px) {
  .rt-consent-bar-inner { grid-template-columns: 1fr; padding: 20px; }
  .rt-consent-bar { max-height: 85vh; overflow-y: auto; }
}

/* A button, because it opens the consent bar rather than navigating — but it
   sits in a row of legal links and has to read and behave like one. */
.footer-consent-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-consent-link:hover,
.footer-consent-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* ==========================================================================
   DATASHEET LEAD GATE MODAL
   ========================================================================== */
.ds-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 24px;
}
.ds-modal[hidden] { display: none; }

.ds-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 42, 0.55);
  backdrop-filter: blur(2px);
}

.ds-modal-card {
  position: relative;
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(13, 27, 42, 0.3);
}

.ds-modal-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.ds-modal-close:hover { color: var(--text); }

.ds-modal-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0 8px;
}
[dir="rtl"] .ds-modal-title { font-family: 'Rubik', sans-serif; font-weight: 700; }

.ds-modal-lede { font-size: 14.5px; color: var(--text-2); margin-bottom: 22px; }

.ds-modal-field { margin-bottom: 14px; }
.ds-modal-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.ds-modal-field label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ds-modal-field input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.ds-modal-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.ds-modal-submit { width: 100%; justify-content: center; margin-top: 6px; }

.ds-modal-status { min-height: 20px; margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }
.ds-modal-status.is-error { color: var(--pink); }

.ds-modal-done p { margin-bottom: 16px; font-size: 15px; }

/* ==========================================================================
   HEADER SEARCH TRIGGER + SEARCH OVERLAY
   ========================================================================== */
.nav-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-search svg { width: 16px; height: 16px; }
.nav-search:hover,
.nav-search:focus-visible {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-glow);
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 12vh 24px 24px;
}
.search-overlay[hidden] { display: none; }

.search-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 42, 0.6);
  backdrop-filter: blur(3px);
}

.search-overlay-panel {
  position: relative;
  width: min(680px, 100%);
  padding: 34px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  box-shadow: 0 26px 70px rgba(13, 27, 42, 0.32);
}

.search-overlay-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 16px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.search-overlay-close:hover { color: var(--text); }

.search-overlay-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0 20px;
}
[dir="rtl"] .search-overlay-title { font-family: 'Rubik', sans-serif; font-weight: 700; }

.search-overlay-hint { margin-top: 14px; font-size: 13.5px; color: var(--text-muted); }

/* The search mark closes the social row; a little air separates the two ideas. */
.footer-social-search { margin-inline-start: 6px; }

/* ==========================================================================
   COMMENTS
   ========================================================================== */
.rt-comments {
  max-width: 760px;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.rt-comments-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
[dir="rtl"] .rt-comments-title { font-family: 'Rubik', sans-serif; font-weight: 700; }

.rt-comment-list,
.rt-comment-list .children { list-style: none; padding: 0; }
.rt-comment-list .children { padding-inline-start: 28px; margin-top: 20px; }

.rt-comment-list li.comment { margin-bottom: 24px; }

.rt-comment-list .comment-body {
  padding: 20px 22px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
}
.rt-comment-list .comment-author { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.rt-comment-list .comment-author img { border-radius: 50%; }
.rt-comment-list .comment-metadata { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 12px; }
.rt-comment-list .comment-metadata a { color: inherit; }
.rt-comment-list p { font-size: 15px; color: var(--text-2); line-height: 1.7; margin-bottom: 10px; }
.rt-comment-list .reply a { font-size: 13px; color: var(--accent); }

.rt-comments-closed { color: var(--text-muted); font-size: 14px; margin: 24px 0; }

.rt-comment-form { margin-top: 12px; }
.rt-comment-notes { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.rt-comment-form label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; }
.rt-comment-form input[type="text"],
.rt-comment-form input[type="email"],
.rt-comment-form input[type="url"],
.rt-comment-form textarea {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 16px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.rt-comment-form input:focus,
.rt-comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.rt-comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; }
.rt-comment-form .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13.5px; margin: 0; }
.rt-comment-form .comment-form-cookies-consent input { width: auto; margin: 0; }

/* ==========================================================================
   CLOSING REGION — DARK
   Partner strip, closing CTA and footer share one dark surface. Everything in
   here is a colour override for that surface; layout stays as it is above.
   ========================================================================== */
/* The CTA and the footer share the dark surface. The partner strip stays on the
   light page: those logos are artwork on opaque white, so inverting them turned
   half the row into grey rectangles. Real logos need their real background. */
.cta.is-closing,
.footer {
  background: var(--dark);
  color: var(--dark-text-2);
}

/* Light strip meeting a dark section — the colour change is the separation, so
   neither side draws a rule at that seam. */
.partners.is-closing + .cta.is-closing,
.partners.is-closing + .footer { border-top: none; }

/* --- Closing CTA on dark --- */
/* No panel. A slightly lighter navy box on navy read as a seam rather than a
   card, so the copy sits on the section itself and the dark does the framing. */
.cta.is-closing .cta-card {
  background: transparent;
  border-color: transparent;
}
/* The glow gives the light card depth. On the dark surface it stops reading as
   light and starts reading as a second, paler panel behind the copy. */
.cta.is-closing .cta-card::before { display: none; }
.cta.is-closing .cta-card::after { display: none; }
.cta.is-closing h2 { color: var(--dark-text); }
.cta.is-closing h2 .accent { color: var(--dark-accent); }
.cta.is-closing p { color: var(--dark-text-2); }
.cta.is-closing .btn-ghost {
  color: var(--dark-text);
  border-color: var(--dark-border);
}
.cta.is-closing .btn-ghost:hover {
  color: var(--dark-text);
  border-color: var(--dark-accent);
  background: rgba(255, 255, 255, 0.06);
}

/* --- Footer on dark --- */
.footer { border-top: 1px solid var(--dark-border); }
.footer .logo { color: var(--dark-text); }
.footer-brand p { color: var(--dark-text-2); }

.footer-social a {
  border-color: var(--dark-border);
  color: var(--dark-text-2);
}
.footer-social a:hover {
  color: var(--dark-text);
  border-color: var(--dark-accent);
  background: rgba(255, 255, 255, 0.06);
}

.footer-main { border-bottom-color: var(--dark-border); }
.footer-col-title { color: var(--dark-text-muted); }
.footer-col a { color: var(--dark-text-2); }
.footer-col a:hover { color: var(--dark-accent); }
.footer-contact i { color: var(--dark-text-muted); }

.offices { border-bottom-color: var(--dark-border); }
.office-flag { color: var(--dark-accent); }
.office-city { color: var(--dark-text); }
.office-detail { color: var(--dark-text-2); }

.footer-bottom { color: var(--dark-text-muted); }
.footer-bottom a { color: var(--dark-text-2); }
.footer-bottom a:hover { color: var(--dark-accent); }
.footer-badge { border-color: var(--dark-border); color: var(--dark-text-muted); }
.footer-sep { color: rgba(255, 255, 255, 0.25); }

.footer-consent-link { color: var(--dark-text-2); }
.footer-consent-link:hover { color: var(--dark-accent); }

.footer-top { border-color: var(--dark-border); color: var(--dark-text-2); }
.footer-top:hover {
  color: var(--dark-text);
  border-color: var(--dark-accent);
  background: rgba(255, 255, 255, 0.06);
}

/* Focus rings need to be visible on the dark surface too. */
.footer a:focus-visible,
.footer button:focus-visible,
.cta.is-closing a:focus-visible {
  outline-color: var(--dark-accent);
}

/* ==========================================================================
   TAXONOMY INDEX CARDS
   One card per term: what it is, what it holds, and a way into both the tag
   archive and the vertical page written for it.
   ========================================================================== */
.tax-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

.tax-index-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.tax-index-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(13, 27, 42, 0.06);
}

.tax-index-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }

.tax-index-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  display: grid;
  place-items: center;
  color: var(--accent);
}
.tax-index-icon i { font-size: 22px; }

.tax-index-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
[dir="rtl"] .tax-index-name { font-family: 'Rubik', sans-serif; font-weight: 700; }
.tax-index-name a { color: inherit; text-decoration: none; }
.tax-index-name a:hover { color: var(--accent); }

.tax-index-breakdown {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
}
.tax-index-breakdown strong { color: var(--text-2); font-weight: 600; }

/* The work itself, named. A count alone is not a reason to click. */
.tax-index-preview {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  border-top: 1px dashed var(--border-2);
  padding-top: 16px;
  flex-grow: 1;
}
.tax-index-preview li { margin-bottom: 9px; }
.tax-index-preview li:last-child { margin-bottom: 0; }
.tax-index-preview a {
  display: block;
  font-size: 14.5px;
  color: var(--text-2);
  text-decoration: none;
  line-height: 1.5;
  padding-inline-start: 14px;
  position: relative;
}
.tax-index-preview a::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-3);
}
.tax-index-preview a:hover { color: var(--accent); }
.tax-index-preview a:hover::before { background: var(--accent); }

.tax-index-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: auto;
}
.tax-index-cta { font-size: 14px; padding: 9px 16px; }

@media (max-width: 640px) {
  .tax-index-grid { grid-template-columns: 1fr; }
  .tax-index-card { padding: 24px; }
}

/* An uploaded logo replaces the built-in RT mark. Height-constrained so a file
   of any dimensions sits correctly in the bar. */
.logo-img {
  height: 34px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
}
@media (max-width: 640px) { .logo-img { height: 28px; } }

/* No filter on the footer logo. The mark is red on transparent, which reads
   well on the dark surface — inverting it flattened every detail into a white
   block. A logo that genuinely needs a light variant should get its own file
   rather than a filter guessing at it. */

/* An industry tag that has an archive behind it is a link, and says so. */
a.industry-tag { text-decoration: none; transition: color 0.2s, border-color 0.2s, background 0.2s; }
a.industry-tag:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-glow); }

/* A technology pill that has an archive behind it is a link. */
a.tech-pill-link { text-decoration: none; transition: color 0.2s, border-color 0.2s, background 0.2s; }
a.tech-pill-link:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-glow); }

/* ==========================================================================
   COUNTER-UAS FLAGSHIP
   Runs directly under the hero, so it stays on the dark surface the hero
   already established and hands off to the light sections at the pillars.
   Two figures carry the section: a chevron kill chain and an architecture
   diagram, both drawn in CSS/SVG rather than shipped as flat images so they
   stay sharp, translatable and readable on a phone.
   ========================================================================== */
.cuas {
  position: relative;
  background: var(--dark);
  color: var(--dark-text);
  padding: 110px 0;
  overflow: hidden;
}
.cuas::before {
  content: '';
  position: absolute;
  inset-inline-start: -10%;
  top: -30%;
  width: 70%;
  height: 120%;
  background: radial-gradient(circle at center, var(--dark-accent-glow) 0%, transparent 65%);
  pointer-events: none;
}
.cuas > .container { position: relative; z-index: 1; }

.cuas-header { max-width: 760px; margin-bottom: 52px; }
.cuas-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-accent);
  margin-bottom: 16px;
  direction: ltr;
}
.cuas-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--dark-text);
}
[dir="rtl"] .cuas-title { font-family: 'Rubik', sans-serif; font-weight: 700; }
.cuas-title .accent { color: var(--dark-accent); font-style: italic; font-weight: 500; }
.cuas-lede {
  margin-top: 20px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--dark-text-2);
}

/* --------------------------------------------------------------------------
   Kill chain
   Chevrons rather than cards, because four cards read as four independent
   features and the whole argument of this section is that they are one chain.
   Colour escalates green -> amber -> slate -> red across the stages.
   -------------------------------------------------------------------------- */
.cuas-chain-frame { margin-bottom: 44px; }
.cuas-chain {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 0;
  padding: 0;
}
.cuas-step {
  --notch: 26px;
  position: relative;
  padding: 28px 46px 30px 60px;
  background: var(--dark-2);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% 50%,
    calc(100% - var(--notch)) 100%,
    0 100%,
    var(--notch) 50%
  );
  transition: background 0.25s;
}
.cuas-step:first-child {
  padding-inline-start: 34px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% 50%,
    calc(100% - var(--notch)) 100%,
    0 100%
  );
}
.cuas-step:hover { background: #1B2742; }

/* Mirrored chevrons for RTL — the chain has to point with the reading
   direction, not against it. */
[dir="rtl"] .cuas-step {
  clip-path: polygon(
    100% 0,
    var(--notch) 0,
    0 50%,
    var(--notch) 100%,
    100% 100%,
    calc(100% - var(--notch)) 50%
  );
}
[dir="rtl"] .cuas-step:first-child {
  clip-path: polygon(
    100% 0,
    var(--notch) 0,
    0 50%,
    var(--notch) 100%,
    100% 100%
  );
}

/* The stage colour reads as a bar along the top edge. It is clipped by the
   chevron with the card, which is what gives the angled leading edge. */
.cuas-step::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--step);
}

.cuas-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.cuas-step-icon {
  width: 30px;
  height: 30px;
  color: var(--step);
  flex-shrink: 0;
}
.cuas-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dark-text-muted);
  direction: ltr;
}
.cuas-step-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dark-text);
  margin-bottom: 6px;
  text-transform: uppercase;
}
[dir="rtl"] .cuas-step-title { font-family: 'Rubik', sans-serif; font-weight: 700; }
.cuas-step-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--step);
  margin-bottom: 14px;
  direction: ltr;
}
.cuas-step-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark-text-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Architecture diagram
   -------------------------------------------------------------------------- */
.cuas-arch {
  margin: 0 0 44px;
  border: 1px solid var(--dark-border);
  border-radius: 16px;
  background: var(--dark-2);
  overflow: hidden;
}
.cuas-arch-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
  padding: 18px 24px;
  border-bottom: 1px solid var(--dark-border);
}
/* A diagram this dense has a floor below which it stops being a diagram, so
   below that width it scrolls sideways inside its own frame instead of
   shrinking the labels into noise. The page itself never scrolls. */
.cuas-arch-scroll {
  overflow-x: auto;
  padding: 28px 24px;
  -webkit-overflow-scrolling: touch;
}
.cuas-arch-svg {
  display: block;
  width: 100%;
  min-width: 860px;
  height: auto;
  direction: ltr;
}

.cuas-node rect {
  fill: rgba(255, 255, 255, 0.04);
  stroke: var(--dark-border);
  stroke-width: 1;
}
.cuas-node text {
  fill: var(--dark-text);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-anchor: middle;
}
.cuas-node .cuas-node-lead { font-size: 18px; }
.cuas-node .cuas-node-sub {
  fill: var(--dark-text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.cuas-node-sensor rect { stroke: rgba(52, 211, 153, 0.5); }
.cuas-node-db rect     { stroke: rgba(147, 180, 216, 0.5); }
.cuas-node-op rect     { stroke: rgba(251, 191, 36, 0.5); }
.cuas-node-resp rect   { stroke: rgba(248, 113, 113, 0.5); }
.cuas-node-c2 rect {
  fill: rgba(127, 176, 255, 0.12);
  stroke: var(--dark-accent);
  stroke-width: 1.5;
}

.cuas-link {
  color: var(--dark-text-muted);
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
}
.cuas-link-return { color: rgba(248, 113, 113, 0.65); stroke-dasharray: 5 4; }
.cuas-link-label {
  fill: var(--dark-text-muted);
  stroke: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Foot
   -------------------------------------------------------------------------- */
.cuas-foot {
  padding-top: 32px;
  border-top: 1px solid var(--dark-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cuas-stack {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.cuas-stack-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dark-text-2);
  padding: 7px 13px;
  border: 1px solid var(--dark-border);
  border-radius: 999px;
  direction: ltr;
}

/* --accent is the deep navy of the light surfaces and disappears on this one,
   so the CTA carries the dark-surface accent instead. */
.cuas .btn-primary { background: var(--dark-accent); color: var(--dark); }
.cuas .btn-primary:hover {
  background: #A6C8FF;
  box-shadow: 0 10px 30px var(--dark-accent-glow);
}

/* The chevron needs a row to point along. Once the chain wraps, the notches
   are dropped and the stages become cards with a coloured leading edge. */
@media (max-width: 1100px) {
  .cuas-chain { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cuas-step,
  .cuas-step:first-child,
  [dir="rtl"] .cuas-step,
  [dir="rtl"] .cuas-step:first-child {
    clip-path: none;
    padding: 26px 24px;
    border: 1px solid var(--dark-border);
    border-radius: 14px;
  }
}
@media (max-width: 640px) {
  .cuas { padding: 80px 0; }
  .cuas-header { margin-bottom: 40px; }
  .cuas-chain { grid-template-columns: 1fr; }
  .cuas-arch-scroll { padding: 20px 14px; }
  .cuas-foot { flex-direction: column; align-items: stretch; }
  .cuas-cta { justify-content: center; }
}

/* ==========================================================================
   DIVISIONS STRIP
   Replaces the old pillar cards directly under the hero. Deliberately quieter
   than they were: it is orientation, not a sales block, so it stays on the
   page background with hairline separators instead of raised cards.
   ========================================================================== */
.company-intro {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.dept-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.dept {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.dept:hover {
  border-color: var(--accent-dim);
  background: var(--surface-2);
  transform: translateY(-4px);
}
.dept-link {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 10px;
  height: 100%;
  padding: 30px 26px 26px;
  color: inherit;
  text-decoration: none;
}
.dept:hover .dept-name { color: var(--accent); }
.dept-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
[dir="rtl"] .dept-name { font-family: 'Rubik', sans-serif; font-weight: 700; }
.dept-line {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.dept-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 6px;
  margin-top: 4px;
  min-height: 52px;
}
.dept-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 7px;
  direction: ltr;
  white-space: nowrap;
}
.dept-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.25s;
}
.dept-cta svg { width: 15px; height: 15px; transition: transform 0.25s; }
.dept:hover .dept-cta { color: var(--accent); }
.dept:hover .dept-cta svg { transform: translateX(5px); }
.dept-name { transition: color 0.25s; }

@media (max-width: 1000px) {
  .dept-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .company-intro { padding: 44px 0; }
  .dept-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Stacked, the tag rows no longer need to line up with a neighbour. */
  .dept-tags { min-height: 0; }
}

/* The kill-chain promise rides with the CTA rather than the headline, so the
   headline is free to name the system itself. */
.cuas-foot-action {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cuas-foot-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-text-2);
  direction: ltr;
}
@media (max-width: 620px) {
  .cuas-foot-action { width: 100%; }
  .cuas-foot-action .cuas-cta { width: 100%; justify-content: center; }
}

/* ==========================================================================
   SPACE PAGE
   ========================================================================== */
.space-hero { padding: 100px 0 64px; border-bottom: 1px solid var(--border); }
.space-hero-title { margin-top: 16px; max-width: 860px; }
.space-hero-sub { max-width: 680px; margin-top: 20px; }

.space-segments { padding: 80px 0; background: var(--bg-2); border-bottom: 1px solid var(--border); }

.space-arch {
  margin: 0;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  background: var(--bg);
  overflow: hidden;
}
.space-arch-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
/* Same floor as the Counter-UAS diagram: below this width it scrolls inside
   its own frame rather than shrinking the labels into noise. */
.space-arch-scroll {
  overflow-x: auto;
  padding: 28px 24px;
  -webkit-overflow-scrolling: touch;
}
.space-arch-svg {
  display: block;
  width: 100%;
  min-width: 860px;
  height: auto;
  direction: ltr;
}

.space-band-label {
  fill: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.space-node rect { fill: none; stroke: var(--border-2); stroke-width: 1; }
.space-node text {
  fill: var(--text);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-anchor: middle;
}
.space-node .space-node-sub {
  fill: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.space-node-block rect { fill: var(--surface-2); stroke: var(--border); }
.space-node-orbit rect  { stroke: var(--accent); stroke-dasharray: 6 5; }
.space-node-ground rect { stroke: var(--border-3); }

.space-link { stroke-width: 1.6; fill: none; }
.space-link path { stroke: currentColor; }
.space-link-up   { color: var(--accent); }
.space-link-down { color: var(--warm); }
.space-link-label {
  fill: currentColor;
  stroke: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.space-link-sub {
  fill: var(--text-muted);
  stroke: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.07em;
}
.space-orbit, .space-ground-line {
  fill: none;
  stroke: var(--border-2);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.space-caps { padding: 80px 0; }
.space-cap-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.space-cap {
  padding: 26px 24px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--bg);
}
.space-cap i { font-size: 26px; color: var(--accent); display: block; margin-bottom: 14px; }
.space-cap-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
[dir="rtl"] .space-cap-name { font-family: 'Rubik', sans-serif; font-weight: 700; }
.space-cap-desc { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 0; }

.space-body { padding: 0 0 80px; }
.space-body-inner { max-width: 760px; font-size: 17px; line-height: 1.85; color: var(--text-2); }

@media (max-width: 900px) { .space-cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .space-hero { padding: 64px 0 44px; }
  .space-segments, .space-caps { padding: 52px 0; }
  .space-cap-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SERVICES ARCHIVE — ADDITIONAL CAPABILITIES
   Deliberately quieter than the card grid above it: plain rows, no surface,
   no icon. The hierarchy is the message.
   ========================================================================== */
.svc-extra {
  padding: 64px 0 72px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.svc-extra-lede {
  margin: 6px 0 28px;
  color: var(--text-2);
  font-size: 16px;
  max-width: 560px;
}
.svc-extra-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
}
.svc-extra-list li { background: var(--bg-2); }
.svc-extra-list a {
  display: block;
  height: 100%;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s;
}
.svc-extra-list a:hover { background: var(--surface-2); }
.svc-extra-name {
  display: block;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text);
}
.svc-extra-list a:hover .svc-extra-name { color: var(--accent); }
.svc-extra-sub {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
@media (max-width: 860px) { .svc-extra-list { grid-template-columns: 1fr; } }

/* ==========================================================================
   MEGA MENU — GROUPED COLUMNS (Engineering)
   Cards with descriptions grew a row per service and ran off the bottom of a
   laptop screen at ten of them. A panel that closes on mouse-out cannot be
   scrolled, so anything clipped was simply unreachable. Named columns keep the
   height flat as the list grows.
   ========================================================================== */
.mega-panel-wide { width: min(1000px, calc(100vw - 48px)); }

.mega-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 20px;
}
.mega-group-title {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.mega-group-list { list-style: none; margin: 0; padding: 0; }
.mega-group-list a {
  display: block;
  padding: 7px 8px;
  margin-inline-start: -8px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.mega-group-list a:hover {
  background: var(--surface-2);
  color: var(--accent);
}

/* Safety net: however long the list gets, the panel can never grow past the
   viewport into a region the pointer cannot reach. */
.mega-panel-inner {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* ==========================================================================
   MANAGEMENT
   ========================================================================== */
.mgmt-hero { padding: 100px 0 60px; border-bottom: 1px solid var(--border); }
.mgmt-hero-title { margin-top: 16px; max-width: 760px; }
.mgmt-hero-sub { max-width: 620px; margin-top: 20px; }

.mgmt { padding: 72px 0; }
.mgmt-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.mgmt-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: border-color 0.3s, transform 0.3s;
}
.mgmt-card:hover { border-color: var(--accent-dim); transform: translateY(-3px); }

/* A fixed ratio so a portrait and a landscape crop still line up as a row. */
.mgmt-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  display: grid;
  place-items: center;
}
.mgmt-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgmt-initials {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 44px;
  font-weight: 600;
  color: var(--text-faint);
}

.mgmt-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
[dir="rtl"] .mgmt-name { font-family: 'Rubik', sans-serif; font-weight: 700; }
.mgmt-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin: 2px 0 0;
  direction: ltr;
}
.mgmt-bio { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.mgmt-link {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.mgmt-link:hover { color: var(--accent); }

.mgmt-body { padding: 0 0 72px; }
.mgmt-body-inner { max-width: 720px; font-size: 17px; line-height: 1.85; color: var(--text-2); }

@media (max-width: 620px) {
  .mgmt-hero { padding: 64px 0 44px; }
  .mgmt { padding: 48px 0; }
  .mgmt-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   NAV SUBMENU
   A plain dropdown for ordinary items with children (About > Management).
   Shares the mega panel's surface and shadow so the header has one dropdown
   language, not two.
   ========================================================================== */
.nav-sub {
  position: absolute;
  top: 100%;
  margin-top: 6px;
  min-width: 190px;
  list-style: none;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 120;
}
.mega-nav .nav-item.has-sub { position: relative; }
.has-sub:hover .nav-sub,
.has-sub:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* Same bridge problem as the mega panel: without this the pointer crosses a
   dead 6px strip on the way down and the menu closes under it. */
.nav-sub::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 24px;
}
.nav-sub a {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.nav-sub a:hover { background: var(--surface-2); color: var(--accent); }
.has-sub:hover > a > i,
.has-sub:focus-within > a > i { transform: rotate(180deg); }

/* ==========================================================================
   ABOUT — LEADERSHIP STRIP
   Names and roles only. The photographs live on the Management page; repeating
   them here would make this the team page and leave that one with nothing.
   ========================================================================== */
.about-leaders { padding: 80px 0; border-top: 1px solid var(--border); }
.about-leaders-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  align-self: end;
}
.about-leaders-all:hover { color: var(--accent-dim); }
.about-leader-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
}
.about-leader-list li {
  background: var(--bg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.about-leader-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
[dir="rtl"] .about-leader-name { font-family: 'Rubik', sans-serif; font-weight: 700; }
.about-leader-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--text-muted);
  direction: ltr;
}
@media (max-width: 620px) {
  .about-leaders { padding: 52px 0; }
  .about-leader-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DETAIL PAGE LAYOUTS
   These grids used to be inline style attributes on the templates, which no
   media query can override — so the solution, service and product pages stayed
   two columns on a phone and pushed their sidebar off the screen.
   ========================================================================== */
.detail-layout {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
}
.product-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 48px;
  align-items: center;
}
.spec-row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-2);
}

@media (max-width: 900px) {
  .detail-layout,
  .product-hero-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}
@media (max-width: 560px) {
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ==========================================================================
   PREV / NEXT NAVIGATION
   Was an inline flex row on three templates, so it could not be adjusted for
   a phone. Two full titles never fit on one 375px line — the pair is roughly
   360px before the gap — so below that width they stack and each takes the
   full row instead of sitting narrow and left-aligned with dead space beside
   them, which read as a bug rather than a choice.
   ========================================================================== */
.post-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.post-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* The arrow sits outside this span so the ellipsis never eats it. */
.post-nav-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-nav-arrow { flex-shrink: 0; }

@media (max-width: 620px) {
  .post-nav { flex-wrap: nowrap; gap: 10px; }
  /* Equal halves, and min-width:0 so a long title shortens instead of forcing
     the row to wrap — "Defense & Aerospace Technology Solutions" would break
     any layout that lets the button size itself to its text. */
  .post-nav-link {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 14px;
  }
  .post-nav-link:last-child { justify-content: flex-end; }
}

/* ==========================================================================
   DETAIL HERO TEXT
   The subtitle used to carry `color: var(--text-2)` as an inline style. On a
   page with a background image the stylesheet turns hero text white — but an
   inline colour beats that rule, so the lede rendered in dark slate over a
   dark photograph while the body paragraphs beneath it, which had no inline
   colour, came out white. That is why one line was unreadable and the rest
   were fine.
   ========================================================================== */
.detail-hero-sub {
  font-size: 20px;
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: 40px;
  color: var(--text-2);
}
.detail-hero-sub-wide { max-width: 620px; margin-bottom: 34px; }
.detail-hero-body {
  margin-bottom: 40px;
  max-width: 760px;
  line-height: 1.8;
  color: var(--text-2);
}
.detail-hero-body-tight { margin: 18px 0 0; }

/* Over an image, every one of these lifts to the same legible white. */
.svc-hero.has-bg .detail-hero-sub,
.svc-hero.has-bg .detail-hero-body,
.svc-hero.has-bg .detail-hero-body p {
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 620px) {
  .detail-hero-sub { font-size: 17.5px; margin-bottom: 28px; }
  .detail-hero-body { margin-bottom: 28px; }
}