/* ==========================================================================
   05 IT Solutions — Global Stylesheet
   Sections:
   01. Design Tokens
   02. Theme Variables
   03. Base / Reset
   04. Typography
   05. Layout
   06. Buttons
   07. Hero
   08. Company Highlights
   09. Featured Products
   10. Solutions
   11. Research & Innovation + Business Domains
   12. Why 05ITS
   13. Accessibility
   14. Header
   15. Main Navbar
   16. Logo
   17. Primary Navigation
   18. Mega Menu
   19. Theme Switcher
   20. Mobile Navigation
   21. Reduced Motion
   22. Case Studies / Selected Work
   23. Insights
   24. Final CTA
   25. Footer
   26. Back to Top
   27. Product Page Hero
   28. Product Navigation
   29. Product Overview (Umanar)
   30. Product Feature Showcase (Umanar)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Typography */
  --font-heading: "Sora", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-code: "IBM Plex Mono", monospace;

  --font-size-hero: 4rem;
  --font-size-h1: 3rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 2rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1.125rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;

  --line-height-heading: 1.2;
  --line-height-body: 1.7;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Spacing scale */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 6rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows (subtle, professional) */
  --shadow-sm: 0 1px 2px rgba(22, 27, 34, 0.05), 0 1px 4px rgba(22, 27, 34, 0.06);
  --shadow-md: 0 2px 8px rgba(22, 27, 34, 0.07), 0 4px 16px rgba(22, 27, 34, 0.06);
  --shadow-lg: 0 8px 24px rgba(22, 27, 34, 0.10), 0 16px 48px rgba(22, 27, 34, 0.08);

  /* Transitions */
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 360ms ease;

  /* Layout */
  --container-max-width: 1320px;
  --header-height: 88px;          /* main navigation bar — initial state */
  --header-height-scrolled: 70px; /* compact navbar once scrolled */
  --content-measure: 720px;

  /* Mobile drawer */
  --drawer-width: 320px;
  --drawer-max-width: 400px;
  --overlay-scrim: rgba(22, 27, 34, 0.55); /* neutral-900 scrim, both themes */

  /* Header logo — source image is 600x500. Large on load (65–80px target),
     shrinks via transform into the compact navbar on scroll. Values are
     read by main.js; the scroll transition animates scale only. */
  --logo-height-initial: 72px;
  --logo-height-scrolled: 46px;

  /* Mega menus */
  --mega-menu-width-lg: 800px;
  --mega-menu-width-md: 640px;

  /* Section rhythm */
  /* --section-spacing-desktop: 120px;
  --section-spacing-tablet: 80px;
  --section-spacing-mobile: 60px; */
  --section-spacing-desktop: 96px;
  --section-spacing-tablet: 64px;
  --section-spacing-mobile: 48px;
}

/* Primary scale */
:root {
  --primary-50: #EAF4FE;
  --primary-100: #D6EAFD;
  --primary-200: #AED5FA;
  --primary-300: #85C0F7;
  --primary-400: #5CABF4;
  --primary-500: #1976D2;
  --primary-600: #1565C0;
  --primary-700: #0F57A4;
  --primary-800: #0B3F78;
  --primary-900: #07284D;
}

/* Accent scale */
:root {
  --accent-50: #FFF3F3;
  --accent-100: #FFE0E0;
  --accent-200: #FFC3C3;
  --accent-300: #FF9999;
  --accent-400: #FF6666;
  --accent-500: #FF3333;
  --accent-600: #E52323;
  --accent-700: #C61717;
  --accent-800: #931010;
  --accent-900: #620A0A;
}

/* Neutral scale */
:root {
  --neutral-50: #FAFBFC;
  --neutral-100: #F4F6F8;
  --neutral-200: #E6E9ED;
  --neutral-300: #D2D8DF;
  --neutral-400: #A7B0BA;
  --neutral-500: #73808C;
  --neutral-600: #55606B;
  --neutral-700: #3D4650;
  --neutral-800: #242B33;
  --neutral-900: #161B22;
}

/* --------------------------------------------------------------------------
   02. Theme Variables
   -------------------------------------------------------------------------- */

/* Light theme (default) */
:root {
  --color-body: #FFFFFF;
  --color-section: #FAFBFC;
  --color-card: #FFFFFF;
  --color-footer: #161B22;
  --color-heading: #161B22;
  --color-text: #3D4650;
  --color-muted: #73808C;
  --color-border: #E6E9ED;

  /* Alternate ("tinted") section background + foreground set used by the
     AI-solutions alternate bands (Capabilities, AI in Practice, Why+FAQ).
     Light: the pinned primary-50 wash with deep neutral text and
     primary-700 accents for ≥4.5:1 contrast on #EAF4FE. The dark theme
     re-defines these in [data-theme="dark"] with a blued-slate panel and
     light text tokens, giving the bands a dark-theme equivalent instead
     of re-showing the light color. */
  --color-section-alt: var(--primary-50);
  --color-section-alt-heading: var(--neutral-900);
  --color-section-alt-text: var(--neutral-700);
  --color-section-alt-muted: var(--neutral-600);
  --color-section-alt-border: var(--neutral-200);
  --color-section-alt-accent: var(--primary-700);
  --color-section-alt-accent-hover: var(--primary-800);
  --color-section-alt-accent-dim: var(--primary-600);

  --color-header-bg: rgba(255, 255, 255, 0.85);
  --color-header-bg-scrolled: rgba(255, 255, 255, 0.95);
}

/* Dark theme */
[data-theme="dark"] {
  --color-body: #0F172A;
  --color-section: #161B22;
  --color-card: #1E293B;
  --color-footer: #020617;
  --color-heading: #F8FAFC;
  --color-text: #CBD5E1;
  --color-muted: #94A3B8;
  --color-border: #334155;

  /* Alternate section surface: a blued-slate panel (#213050, subtly
     lighter and blue-cooled against the neutral page background), with
     foregrounds mapped onto the theme text tokens and bright primary-300+
     accents so content keeps comfortable contrast on the panel. */
  --color-section-alt: #213050;
  --color-section-alt-heading: var(--color-heading);
  --color-section-alt-text: var(--color-text);
  --color-section-alt-muted: var(--color-muted);
  --color-section-alt-border: var(--color-border);
  --color-section-alt-accent: var(--primary-300);
  --color-section-alt-accent-hover: var(--primary-200);
  --color-section-alt-accent-dim: var(--primary-400);

  --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.40), 0 1px 4px rgba(2, 6, 23, 0.35);
  --shadow-md: 0 2px 8px rgba(2, 6, 23, 0.45), 0 4px 16px rgba(2, 6, 23, 0.40);
  --shadow-lg: 0 8px 24px rgba(2, 6, 23, 0.55), 0 16px 48px rgba(2, 6, 23, 0.45);

  --color-header-bg: rgba(15, 23, 42, 0.80);
  --color-header-bg-scrolled: rgba(15, 23, 42, 0.92);
}

/* --------------------------------------------------------------------------
   03. Base / Reset
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--color-body);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  transition: background-color var(--transition-base), color var(--transition-base);
}

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

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-600);
}

::selection {
  background-color: var(--primary-200);
  color: var(--primary-900);
}

[data-theme="dark"] ::selection {
  background-color: var(--primary-700);
  color: var(--primary-50);
}

/* --------------------------------------------------------------------------
   04. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}

h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h2); }
h3, .h3 { font-size: var(--font-size-h3); }
h4, .h4 { font-size: var(--font-size-h4); }
h5, .h5 { font-size: var(--font-size-h5); }
h6, .h6 { font-size: var(--font-size-h6); }

p {
  margin-bottom: var(--space-5);
}

small, .small {
  font-size: var(--font-size-small);
}

code, kbd, pre, samp {
  font-family: var(--font-code);
}

.text-muted,
.site-muted {
  color: var(--color-muted) !important;
}

/* Hero display size — reserved for the upcoming hero section */
.display-hero {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2.25rem, 3vw + 1.5rem, 4rem);
  line-height: 1.12;
}

/* Readable text block width for future content sections */
.content-measure {
  max-width: var(--content-measure);
}

/* --------------------------------------------------------------------------
   05. Layout
   -------------------------------------------------------------------------- */
.container,
.container-fluid {
  --bs-gutter-x: var(--space-5);
}

@media (min-width: 1400px) {
  .site-container {
    max-width: var(--container-max-width);
  }
}

.section {
  padding-top: var(--section-spacing-mobile);
  padding-bottom: var(--section-spacing-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--section-spacing-tablet);
    padding-bottom: var(--section-spacing-tablet);
  }
}

@media (min-width: 992px) {
  .section {
    padding-top: var(--section-spacing-desktop);
    padding-bottom: var(--section-spacing-desktop);
  }
}

.bg-section {
  background-color: var(--color-section);
}

main {
  display: block; /* IE/older Edge safety for semantic main */
}

/* Note: the header is position:fixed (section 08) so the scroll compaction
   never reflows the page; <main> reserves the initial navbar height via
   padding-top instead of relying on flow space. */

/* --------------------------------------------------------------------------
   06. Buttons
   Lean site-wide button pair built purely on design tokens (the previous
   CTA-only button system was removed with the header CTA). Deliberately
   NOT layered on Bootstrap's .btn so height/radius/stays stay controlled.
   -------------------------------------------------------------------------- */
.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.9375rem;
  line-height: 1.2;
  min-height: 2.75rem;
  padding: 0.8125rem 1.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.site-btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.site-btn--primary {
  background-color: var(--primary-500);
  border: 1px solid var(--primary-500);
  color: #FFFFFF;
}

.site-btn--primary:hover,
.site-btn--primary:focus-visible {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.site-btn--outline {
  background-color: transparent;
  border: 1px solid var(--primary-500);
  color: var(--primary-500);
}

.site-btn--outline:hover,
.site-btn--outline:focus-visible {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   07. Hero
   Opening statement: positioning copy left (7 cols) + abstract product-
   engineering ecosystem right (5 cols). The entire visual composition is
   decorative (aria-hidden) — meaning lives in the semantic copy.
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  overflow: hidden; /* decorative layers never create scrollbars */
  padding-top: clamp(var(--space-8), 9vw, 2.5rem);
  padding-bottom: clamp(var(--space-8), 9vw, 8.5rem);
}

/* Extremely subtle directional tint — subordinate to content, theme-aware */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(60% 55% at 78% 30%, rgba(25, 118, 210, 0.06), transparent 70%);
  pointer-events: none;
}

[data-theme="dark"] .hero-section::before {
  background-image:
    radial-gradient(60% 55% at 78% 30%, rgba(25, 118, 210, 0.10), transparent 70%);
}

.hero-section > .container {
  position: relative; /* keep content above the background layer */
}

/* Eyebrow — compact positioning label, never competes with the H1 */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .hero-eyebrow {
  color: var(--primary-300);
}

.hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

/* H1 — .display-hero supplies family/weight/responsive size;
   each sentence stacks as its own block and wraps naturally when narrow */
.hero-title {
  max-width: 700px;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.hero-title span {
  display: block;
  margin-bottom: 1.1rem;
}

/* Supporting copy — one quiet sentence under a dominant H1 */
.hero-lead {
  max-width: 540px;
  margin-top: var(--space-5);
  margin-bottom: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* CTA group — primary dominant, outline subordinate */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Capability tags — quiet informational labels, never interactive */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.hero-tags li {
  padding: 0.375rem 0.75rem;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-text);
}

/* ---- Hero visual: connected product ecosystem ------------------------- */

.hero-visual {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  margin-inline: auto;
}

/* Hairline engineering grid, radially faded toward the edges */
.hero-visual__grid {
  position: absolute;
  inset: -8%;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.38;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 32%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 46%, #000 32%, transparent 72%);
}

[data-theme="dark"] .hero-visual__grid {
  opacity: 0.22;
}

/* Connectors — dashed pathways from every node into the core */
.hero-visual__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-visual__links line {
  stroke: var(--primary-200);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  stroke-opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

[data-theme="dark"] .hero-visual__links line {
  stroke: var(--primary-700);
}

/* Satellites — icon chips with micro labels, percentage-positioned */
.hero-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hero-node--research { left: 20%; top: 17%; }
.hero-node--ai       { left: 81%; top: 15%; }
.hero-node--iot      { left: 87%; top: 53%; }
.hero-node--apps     { left: 73%; top: 85%; }
.hero-node--automation { left: 27%; top: 85%; }
.hero-node--saas     { left: 12%; top: 50%; }

.hero-node__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  font-size: 1.125rem;
  color: var(--primary-500);
}

[data-theme="dark"] .hero-node__chip {
  color: var(--primary-300);
}

.hero-node__label {
  font-size: 0.5625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Centerpiece — the product/system core */
.hero-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 128px;
  height: 128px;
  border-radius: var(--radius-xl);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

/* Static dashed halo ring around the core */
.hero-core::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px dashed var(--primary-200);
  border-radius: calc(var(--radius-xl) + 14px);
  pointer-events: none;
}

[data-theme="dark"] .hero-core::before {
  border-color: var(--primary-800);
}

.hero-core .bi {
  font-size: 2rem;
  color: var(--primary-500);
}

[data-theme="dark"] .hero-core .bi {
  color: var(--primary-300);
}

.hero-core__label {
  font-size: 0.5625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Single restrained accent: live-system status dot on the core */
.hero-core__dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--accent-500);
}

/* ---- Hero responsive ----------------------------------------------------*/

@media (max-width: 1199.98px) {
  .hero-visual {
    width: min(100%, 420px);
  }
}

@media (min-width: 992px) {
  .hero-visual {
    margin-top: -1rem; /* optical lift: aligns visual center with the copy block */
  }
}

@media (max-width: 767.98px) {
  .hero-lead {
    font-size: 1rem;
  }
}

@media (max-width: 575.98px) {
  .hero-actions .site-btn {
    width: 100%; /* stacked, touch-friendly, text never wraps */
  }

  .hero-visual {
    width: min(100%, 340px); /* scaled down so it never dominates */
  }
}

/* --------------------------------------------------------------------------
   08. Company Highlights
   Compact dark proof band between the Hero and the next page section.
   Intentionally dark in BOTH themes — it is the high-contrast beat of the
   homepage rhythm. One unified band: dominant 13+ numeral + three
   qualitative proof points, hairline dividers, CSS-only technical
   background (fine grid + one blue radial + one faint red accent).
   -------------------------------------------------------------------------- */
.company-highlights-section {
  /* Scoped band tokens (dark in both themes; not global tokens) */
  --hl-bg: #07284D;
  --hl-heading: #F8FAFC;
  --hl-text: #CBD5E1;
  --hl-accent: #3399FF;
  --hl-grid-line: rgba(248, 250, 252, 0.05);
  --hl-glow-blue: rgba(51, 153, 255, 0.16);
  --hl-glow-red: rgba(255, 51, 51, 0.07);
  --hl-divider: rgba(248, 250, 252, 0.14);

  position: relative;
  overflow: hidden;
  background-color: var(--hl-bg);
  color: var(--hl-text);
  padding-block: var(--space-7); /* 48px mobile; stepped up below */
}

[data-theme="dark"] .company-highlights-section {
  --hl-bg: #161B22;
  --hl-grid-line: rgba(148, 163, 184, 0.06);
  --hl-glow-blue: rgba(51, 153, 255, 0.13);
}

/* Structured background: fine engineering grid + soft radial lighting.
   ~5% prominence so content always reads first. Purely decorative. */
.company-highlights-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hl-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hl-grid-line) 1px, transparent 1px),
    radial-gradient(52% 70% at 18% 0%, var(--hl-glow-blue), transparent 70%),
    radial-gradient(38% 55% at 88% 100%, var(--hl-glow-red), transparent 65%);
  background-size: 44px 44px, 44px 44px, auto, auto;
  pointer-events: none;
}

.highlights-inner {
  position: relative; /* keep content above the background layer */
}

.company-highlights-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hl-accent);
}

.company-highlights-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  flex-shrink: 0;
}

.company-highlights-section .section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--hl-heading);
}

.company-highlights-section .highlights-band {
  row-gap: var(--space-6); /* separation when columns wrap on tablet/mobile */
  margin-top: clamp(var(--space-6), 3vw, var(--space-7));
}

/* Primary numerical highlight */
.highlight-number {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-extrabold);
  font-size: clamp(3.5rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--hl-heading);
}

.highlight-number__label {
  margin-top: var(--space-2);
  margin-bottom: 0;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hl-accent);
}

.highlight-desc {
  max-width: 30ch;
  margin-top: var(--space-3);
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--hl-text);
}

/* Qualitative proof points — typographic, no card chrome */
.highlight-cell__index {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  color: var(--hl-accent);
}

.highlight-cell__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--hl-heading);
}

.highlight-cell .highlight-desc {
  margin-top: var(--space-2);
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .company-highlights-section {
    padding-block: 3.25rem;
  }
}

@media (min-width: 1200px) {
  .company-highlights-section {
    padding-block: 3.5rem;
  }

  /* Desktop band rhythm: hairline vertical dividers between columns */
  .highlights-band > .col-lg-3 {
    border-left: 1px solid var(--hl-divider);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .highlights-band > .col-lg-3:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .highlights-band > .col-lg-3:last-child {
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   09. Featured Products
   Flagship presentation returning the page to a clean surface after the
   dark Highlights band: one dominant Umanar showcase panel (approved
   illustration left, story right) + a compact four-item product rail.
   -------------------------------------------------------------------------- */
.featured-products-section {
  background-color: var(--color-section);
  padding-block: var(--space-7); /* 48px mobile baseline; stepped below */
}

.featured-products-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .featured-products-section .section-eyebrow {
  color: var(--primary-300);
}

.featured-products-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

.featured-products-section .section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 2vw + 1.25rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.featured-products-section .section-intro {
  max-width: 600px;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Umanar showcase panel -------------------------------------------- */

.featured-showcase {
  margin-top: clamp(var(--space-6), 3vw, 40px);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.featured-product__media {
  margin: 0; /* figure reset */
}

.featured-product__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Dark theme: approved illustration needs a light surface to read well.
   Deliberate constant-light plate — never filter the source image. */
[data-theme="dark"] .featured-product__media {
  background-color: #F8FAFC;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.featured-product__name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 1.2vw + 1.45rem, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.featured-product__category {
  margin: 0 0 var(--space-4);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .featured-product__category {
  color: var(--primary-300);
}

.featured-product__desc {
  max-width: 46ch;
  margin-bottom: var(--space-5);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}

.featured-product__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-left: 0;
  margin-top: 0;
  list-style: none;
}

.featured-product__benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  color: var(--color-text);
}

.featured-product__benefits .bi {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--primary-500);
}

[data-theme="dark"] .featured-product__benefits .bi {
  color: var(--primary-300);
}

/* ---- Product rail ------------------------------------------------------- */

.featured-products-section .rail-label {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.product-item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.product-item:hover,
.product-item:focus-visible {
  transform: translateY(-4px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-sm);
}

.product-item:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.product-item__media {
  display: flex;
  align-items: center;
  height: 48px;
  margin-bottom: var(--space-3);
}

.product-item__media img {
  max-height: 48px;
  max-width: 64px;
  object-fit: contain;
}

.product-item__media .bi {
  font-size: 1.25rem;
  color: var(--primary-500);
}

[data-theme="dark"] .product-item__media .bi {
  color: var(--primary-300);
}

.product-item__name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.product-item__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.product-item__arrow {
  align-self: flex-end;
  margin-top: auto;
  font-size: 1.125rem;
  color: var(--primary-500);
  transition: transform var(--transition-fast);
}

[data-theme="dark"] .product-item__arrow {
  color: var(--primary-300);
}

.product-item:hover .product-item__arrow,
.product-item:focus-visible .product-item__arrow {
  transform: translateX(6px);
}

/* Mobile: compact horizontal layout — icon left, text stacked, arrow right */
@media (max-width: 767.98px) {
  .product-item {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    min-height: 72px;
  }

  .product-item__media {
    height: 40px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .product-item__media img {
    max-height: 40px;
    max-width: 52px;
  }

  .product-item__name {
    margin: 0;
  }

  .product-item__desc {
    margin-top: 2px;
  }

  .product-item__arrow {
    margin-top: 0;
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* View-all navigation tile — quieter than product cards, centered CTA */
.product-item--view-all {
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: transparent;
}

.product-item--view-all .product-item__arrow {
  align-self: center;
  margin: 0 0 var(--space-3);
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .featured-products-section {
    padding-block: 3.5rem; /* tablet 56px */
  }
}

@media (min-width: 1200px) {
  .featured-products-section {
    padding-block: 4.5rem; /* desktop 72px */
  }
}

/* --------------------------------------------------------------------------
   10. Solutions — horizontal scroll carousel
   -------------------------------------------------------------------------- */
.solutions-section {
  padding-block: 3rem; /* mobile 48px */
}

.solutions-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Header content occupies ~half the row width on large screens (kept
   capped so the heading does not sprawl across the page). */
.solutions-header__content {
  width: 50%;
  max-width: 640px;
}

.solutions-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .solutions-section .section-eyebrow {
  color: var(--primary-300);
}

.solutions-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

.solutions-arrows {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  padding-top: var(--space-2);
}

/* Mobile (< 768px): header content uses full width and the arrows move
   to their own row below the header content. Left arrow hugs the left,
   right arrow hugs the right, on the same row, with comfortable breathing
   room above. */
@media (max-width: 767.98px) {
  .solutions-header {
    display: block;
  }

  .solutions-header__content {
    width: 100%;
    max-width: none;
  }

  .solutions-arrows {
    justify-content: space-between;
    margin-top: var(--space-4); /* ~1rem gap below the header content */
    padding-top: 0;
  }

  .solutions-rail {
    margin-top: var(--space-5); /* ~1.5rem gap below the arrow row */
  }
}

.solutions-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--border-color);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  font-size: 1.125rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.solutions-arrow:hover {
  border-color: var(--primary-500);
  background: var(--primary-500);
  color: #fff;
}

.solutions-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: var(--border-color);
  background: transparent;
  color: var(--color-text);
}

[data-theme="dark"] .solutions-arrow {
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .solutions-arrow:hover {
  border-color: var(--primary-400);
  background: var(--primary-400);
  color: #fff;
}

.solutions-rail {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}

.solutions-rail::-webkit-scrollbar {
  display: none;
}

.solutions-card {
  flex: 0 0 300px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  scroll-snap-align: start;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.solutions-card:hover {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color: var(--color-text);
}

.solutions-card:active {
  transform: translateY(0);
}

.solutions-card__indicator {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-muted);
  transition: color var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}

.solutions-card:hover .solutions-card__indicator,
.solutions-card:focus-visible .solutions-card__indicator {
  color: var(--primary-500);
  transform: translate(3px, -3px);
}

[data-theme="dark"] .solutions-card:hover .solutions-card__indicator,
[data-theme="dark"] .solutions-card:focus-visible .solutions-card__indicator {
  color: var(--primary-300);
}

.solutions-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.375rem;
  flex-shrink: 0;
}

[data-theme="dark"] .solutions-card__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.solutions-card__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.solutions-card__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .solutions-section {
    padding-block: 3.5rem; /* tablet 56px */
  }
}

@media (min-width: 1200px) {
  .solutions-section {
    padding-block: 4.5rem; /* desktop 72px */
  }

  .solutions-card {
    flex: 0 0 320px;
    min-height: 240px;
    padding: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   11. Research & Innovation + Business Domains
   Research-dominant layout with compact Business Domains footer rail.
   Scoped under .research-domains-section.
   -------------------------------------------------------------------------- */
.research-domains-section {
  background-color: var(--color-section);
  padding-block: 3rem; /* mobile 48px */
}

/* Shared eyebrow — reuses the approved homepage pattern */
.research-domains-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .research-domains-section .section-eyebrow {
  color: var(--primary-300);
}

.research-domains-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

/* ======================== RESEARCH BLOCK ======================== */
.research-block {
  margin-bottom: var(--space-7);
}

.research-block__heading {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.research-block__desc {
  margin: 0 0 var(--space-7);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  max-width: 640px;
}

/* --- Research capabilities (3-col) --- */
.research-caps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .research-caps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.research-cap {
  display: flex;
  gap: var(--space-3);
}

.research-cap__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 1px;
}

[data-theme="dark"] .research-cap__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.research-cap__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.research-cap__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* Research CTA */
.research-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.9375rem;
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.research-cta:hover {
  color: var(--primary-600);
  gap: var(--space-3);
}

[data-theme="dark"] .research-cta {
  color: var(--primary-300);
}

[data-theme="dark"] .research-cta:hover {
  color: var(--primary-400);
}

.research-cta .bi {
  font-size: 0.875rem;
  transition: transform var(--transition-fast);
}

.research-cta:hover .bi {
  transform: translateX(3px);
}

/* ======================== BUSINESS DOMAINS FOOTER RAIL ======================== */
.domains-footer {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-6);
}

.domains-footer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.domains-footer__text {
  display: flex;
  flex-direction: column;
}

.domains-footer__subtitle {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Navigation arrows */
.domains-footer__arrows {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.domains-footer__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--border-color);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.domains-footer__arrow:hover {
  border-color: var(--primary-500);
  background: var(--primary-500);
  color: #fff;
}

.domains-footer__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: var(--border-color);
  background: transparent;
  color: var(--color-text);
}

[data-theme="dark"] .domains-footer__arrow {
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .domains-footer__arrow:hover {
  border-color: var(--primary-400);
  background: var(--primary-400);
  color: #fff;
}

/* Domain rail — horizontal scroll of tags */
.domains-rail {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}

.domains-rail::-webkit-scrollbar {
  display: none;
}

/* Domain tag */
.domain-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  scroll-snap-align: start;
}

.domain-tag:hover {
  border-color: var(--primary-500);
  color: var(--primary-500);
  background: var(--primary-50);
}

[data-theme="dark"] .domain-tag:hover {
  border-color: var(--primary-400);
  color: var(--primary-300);
  background: rgba(99, 179, 237, 0.08);
}

.domain-tag:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.domain-tag__icon {
  font-size: 0.9375rem;
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.domain-tag:hover .domain-tag__icon {
  color: var(--primary-500);
}

[data-theme="dark"] .domain-tag:hover .domain-tag__icon {
  color: var(--primary-300);
}

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .research-domains-section {
    padding-block: 3.5rem; /* tablet 56px */
  }

  /* .domains-footer {
    padding-top: var(--space-7);
  } */

  .domain-tag {
    padding: 10px 18px;
    font-size: 0.9rem;
  }
}

@media (min-width: 1200px) {
  .research-domains-section {
    padding-block: 5rem; /* desktop 80px */
  }

  /* .domains-footer {
    padding-top: var(--space-8);
  } */

  .domain-tag {
    padding: 10px 20px;
    font-size: 0.9375rem;
  }
}

/* --------------------------------------------------------------------------
   12. Why 05ITS
   Common intro above two-column editorial: compact numbered list (left) +
   orbital technology backbone illustration (right) with circuit trace
   background confined to the visual area. Scoped under .why-05its-section.
   -------------------------------------------------------------------------- */
.why-05its-section {
  background-color: var(--color-section);
  padding-block: 3.5rem;
  overflow: hidden;
}

/* ======================== COMMON INTRO ======================== */
.why-05its-intro-block {
  max-width: 760px;
  /* margin-bottom: var(--space-7); */
}

/* --- Eyebrow (shared pattern) --- */
.why-05its-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .why-05its-section .section-eyebrow {
  color: var(--primary-300);
}

.why-05its-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

/* --- Heading --- */
.why-05its-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

/* --- Intro paragraph --- */
.why-05its-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* ======================== TWO-COLUMN GRID ======================== */
.why-05its-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 768px) {
  .why-05its-section { padding-block: 4rem; }
  /* .why-05its-intro-block { margin-bottom: var(--space-8); } */
  .why-05its-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
    align-items: center;
  }
}

@media (min-width: 1200px) {
  .why-05its-section { padding-block: 5rem; }
  /* .why-05its-intro-block { margin-bottom: var(--space-9); } */
  .why-05its-grid { gap: var(--space-9); }
}

/* ======================== LEFT: COMPACT NUMBERED LIST ======================== */
.why-05its-list {
  display: flex;
  flex-direction: column;
}

.why-05its-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px 0;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: inherit;
  font: inherit;
  border-bottom: 1px solid var(--border-color);
  transition: opacity var(--transition-base);
}

.why-05its-item:first-child { padding-top: 0; }
.why-05its-item:last-child { border-bottom: none; padding-bottom: 0; }

/* --- Number --- */
.why-05its-number {
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  color: var(--color-muted);
  line-height: 1.5;
  min-width: 1.6em;
  padding-top: 1px;
  transition: color var(--transition-base);
}

.why-05its-item.is-active .why-05its-number { color: var(--primary-500); }
[data-theme="dark"] .why-05its-item.is-active .why-05its-number { color: var(--primary-300); }

/* --- Item content --- */
.why-05its-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.why-05its-item-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-heading);
  transition: color var(--transition-base);
}

.why-05its-item-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 400px;
  transition: color var(--transition-base);
}

/* --- Active item --- */
.why-05its-item.is-active .why-05its-item-title { color: var(--primary-500); }
.why-05its-item.is-active .why-05its-item-desc { color: var(--color-text); }
[data-theme="dark"] .why-05its-item.is-active .why-05its-item-title { color: var(--primary-300); }

/* --- Hover (non-active) --- */
.why-05its-item:not(.is-active):hover .why-05its-number { color: var(--primary-400); }
.why-05its-item:not(.is-active):hover .why-05its-item-title { color: var(--color-text); }

/* --- Focus-visible --- */
.why-05its-item:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ======================== CTA ======================== */
.why-05its-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.9375rem;
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.why-05its-cta:hover { color: var(--primary-600); gap: var(--space-3); }
[data-theme="dark"] .why-05its-cta { color: var(--primary-300); }
[data-theme="dark"] .why-05its-cta:hover { color: var(--primary-400); }
.why-05its-cta .bi { font-size: 0.875rem; transition: transform var(--transition-fast); }
.why-05its-cta:hover .bi { transform: translateX(3px); }

/* ======================== RIGHT: ORBITAL VISUAL ======================== */
.why-05its-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

@media (min-width: 768px) {
  .why-05its-visual { min-height: 420px; }
}

@media (min-width: 1200px) {
  .why-05its-visual { min-height: 500px; }
}

/* --- Technology circuit pattern (behind everything) --- */
.why-05its-tech-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.06;
}

[data-theme="dark"] .why-05its-tech-pattern {
  opacity: 0.1;
}

.why-05its-tech-pattern .trace {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 0.8;
  stroke-linecap: round;
}

[data-theme="dark"] .why-05its-tech-pattern .trace {
  stroke: var(--neutral-700);
}

.why-05its-tech-pattern .trace-node {
  fill: var(--color-border);
}

[data-theme="dark"] .why-05its-tech-pattern .trace-node {
  fill: var(--neutral-700);
}

/* --- SVG network (main illustration) --- */
.why-05its-network {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  height: auto;
}

@media (min-width: 768px) {
  .why-05its-network { max-width: 100%; }
}

/* --- Orbit ring --- */
.why-05its-network .orbit-ring {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 0.8;
  stroke-dasharray: 4 6;
  opacity: 0.3;
  transition: stroke var(--transition-base), opacity var(--transition-base);
}

[data-theme="dark"] .why-05its-network .orbit-ring {
  stroke: var(--neutral-700);
  opacity: 0.2;
}

/* ======================== CONNECTIONS — DEFAULT HIDDEN ======================== */
.why-05its-network .conn {
  fill: none;
  stroke: var(--primary-400);
  stroke-width: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.why-05its-network .conn-marker {
  fill: none;
  stroke: var(--primary-400);
  stroke-width: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.why-05its-network .flow-particle {
  fill: var(--primary-400);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.why-05its-network .endpoint {
  fill: var(--primary-400);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* ======================== CONNECTION STATE CLASSES ======================== */
.why-05its-section.is-research-active .conn[data-node="research"],
.why-05its-section.is-research-active .conn-marker[data-node="research"],
.why-05its-section.is-research-active .flow-particle[data-node="research"],
.why-05its-section.is-research-active .endpoint[data-node="research"] {
  opacity: 1;
}

.why-05its-section.is-product-active .conn[data-node="product"],
.why-05its-section.is-product-active .conn-marker[data-node="product"],
.why-05its-section.is-product-active .flow-particle[data-node="product"],
.why-05its-section.is-product-active .endpoint[data-node="product"] {
  opacity: 1;
}

.why-05its-section.is-engineering-active .conn[data-node="engineering"],
.why-05its-section.is-engineering-active .conn-marker[data-node="engineering"],
.why-05its-section.is-engineering-active .flow-particle[data-node="engineering"],
.why-05its-section.is-engineering-active .endpoint[data-node="engineering"] {
  opacity: 1;
}

/* All: reveal everything */
.why-05its-section.is-all-active .conn,
.why-05its-section.is-all-active .conn-marker,
.why-05its-section.is-all-active .flow-particle,
.why-05its-section.is-all-active .endpoint {
  opacity: 1;
}

/* Orbit emphasis when All is active */
.why-05its-section.is-all-active .orbit-ring {
  opacity: 0.5;
}

[data-theme="dark"] .why-05its-section.is-all-active .orbit-ring {
  opacity: 0.35;
}

/* Logo emphasis when All is active */
.why-05its-section.is-all-active .logo-mask {
  filter: drop-shadow(0 0 8px rgba(25, 118, 210, 0.15));
}

[data-theme="dark"] .why-05its-section.is-all-active .logo-mask {
  filter: drop-shadow(0 0 8px rgba(92, 171, 244, 0.2));
}

/* ======================== NODE STYLES ======================== */
.why-05its-network .node-ring {
  fill: var(--color-card);
  stroke: var(--color-border);
  stroke-width: 1;
  transition: fill var(--transition-base), stroke var(--transition-base),
              stroke-width var(--transition-base), filter var(--transition-base);
}

[data-theme="dark"] .why-05its-network .node-ring {
  fill: var(--color-card);
  stroke: var(--neutral-700);
}

.why-05its-network-node.is-active .node-ring {
  stroke: var(--primary-500);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(25, 118, 210, 0.2));
}

[data-theme="dark"] .why-05its-network-node.is-active .node-ring {
  stroke: var(--primary-400);
  filter: drop-shadow(0 0 8px rgba(92, 171, 244, 0.25));
}

/* --- Node icons --- */
.why-05its-network .node-icon {
  color: var(--color-muted);
  transition: color var(--transition-base);
}

.why-05its-network-node.is-active .node-icon {
  color: var(--primary-500);
}

[data-theme="dark"] .why-05its-network-node.is-active .node-icon {
  color: var(--primary-300);
}

/* --- Node labels --- */
.why-05its-network .node-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-medium);
  fill: var(--color-muted);
  text-anchor: middle;
  transition: fill var(--transition-base);
}

.why-05its-network-node.is-active .node-label {
  fill: var(--color-heading);
  font-weight: var(--weight-semibold);
}

/* --- Logo mask (solid, NO border) --- */
.why-05its-network .logo-mask {
  fill: #FFFFFF;
  transition: fill var(--transition-base), filter var(--transition-base);
}

[data-theme="dark"] .why-05its-network .logo-mask {
  fill: var(--color-section);
}

/* --------------------------------------------------------------------------
   13. Accessibility
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: 1100;
  padding: var(--space-2) var(--space-4);
  background-color: var(--primary-500);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
  color: #FFFFFF;
}

/* Visible focus states everywhere (never removed without replacement) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* --------------------------------------------------------------------------
     14. Header
   Fixed single-row shell (navbar only). On scroll the bar compacts and the
   logo shrinks — driven by GSAP in main.js; this section owns the static
   surface styling. Fixed positioning keeps the height change reflow-free.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: var(--color-header-bg);
  transition:
    background-color var(--transition-base),
    box-shadow var(--transition-base);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .site-header {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background-color: var(--color-header-bg);
  }
}

/* Reserve the header's initial footprint */
main {
  padding-top: var(--header-height);
}

/* --------------------------------------------------------------------------
     15. Main Navbar
   Single-row header: logo | navigation | theme switcher. Height gives the
   large logo breathing room (logo size has priority); it compacts on scroll.
   -------------------------------------------------------------------------- */
.site-navbar {
  height: var(--header-height);
  min-height: var(--header-height); /* never squeeze below the logo's needs */
  padding-top: 0;
  padding-bottom: 0;
}

/* Desktop navigation container (no longer a Bootstrap collapse).
   The centered .site-nav sits inside this flex wrapper; below 1200px the
   element becomes the fixed drawer styled in section 14. */
@media (min-width: 1200px) {
  .site-nav-collapse {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
  }
}

.site-navbar .container {
  height: 100%;
  display: flex;
  align-items: center;
}

/* Navbar-resident theme switcher: participates in normal flex flow at the
   right edge with guaranteed breathing room from the last menu item. */
.site-navbar .container > .site-theme-toggle {
  flex-shrink: 0;
  margin-left: var(--space-3);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: var(--space-6);
}

/* --------------------------------------------------------------------------
     16. Logo
   Initial state: large 72px artwork centered in the 88px navbar.
   Scrolled state: compact 46px logo inside the 70px bar (GSAP in main.js
   animates header height + logo scale; these rules define the end states).
   Theme-aware: exactly one artwork visible at a time, identical dimensions,
   so switching never shifts layout or header height.
   -------------------------------------------------------------------------- */
.site-brand__logo {
  height: var(--logo-height-initial);
  width: auto;
  display: block;
  object-fit: contain; /* never distort / crop / stretch the artwork */
}

.site-brand__logo--dark {
  display: none;
}

[data-theme="dark"] .site-brand__logo--light {
  display: none;
}

[data-theme="dark"] .site-brand__logo--dark {
  display: block;
}

.site-toggler {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--color-heading);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.site-toggler:hover {
  border-color: var(--primary-400);
  background-color: var(--primary-50);
}

[data-theme="dark"] .site-toggler:hover {
  background-color: rgba(25, 118, 210, 0.16);
}

.site-toggler:focus {
  box-shadow: none;
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Bootstrap's default SVG burger uses a black stroke — retint per theme */
.site-toggler .navbar-toggler-icon {
  width: 1.25em;
  height: 1.25em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2822, 27, 34, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme="dark"] .site-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28248, 250, 252, 0.90%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --------------------------------------------------------------------------
     17. Primary Navigation
   Selectors are scoped to .site-nav.navbar-nav so they out-rank
   Bootstrap's .navbar-expand-lg .navbar-nav .nav-link rules (0,3,0).
   -------------------------------------------------------------------------- */
.site-nav {
  column-gap: var(--space-3);
  /* With actions moved to the utility bar, center the nav between the
     logo and the container edge for a balanced main bar */
  margin-inline: auto;
}

.site-nav.navbar-nav .site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: transparent;
  border: 0;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.site-nav.navbar-nav button.site-nav__link {
  cursor: pointer;
}

.site-nav.navbar-nav .site-nav__link:hover {
  color: var(--primary-500);
  background-color: var(--primary-50);
}

[data-theme="dark"] .site-nav.navbar-nav .site-nav__link:hover {
  background-color: rgba(25, 118, 210, 0.14);
}

/* Subtle active indicator in brand primary — no heavy underline animation.
   Applied via .is-active + aria-current="page"; data-nav attributes on the
   list items make per-section activation trivial for future pages. */
.site-nav.navbar-nav .site-nav__link.is-active {
  color: var(--primary-500);
  font-weight: var(--weight-semibold);
}

.site-nav.navbar-nav .site-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 4px;
  height: 2px;
  background-color: var(--primary-500);
  border-radius: var(--radius-pill);
}

.site-nav.navbar-nav .site-nav__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Dropdown trigger caret */
.site-nav__caret {
  font-size: 0.6875rem;
  opacity: 0.65;
  transition: transform var(--transition-fast);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__caret {
  transform: rotate(180deg);
}

/* Submenu-open state on the PARENT item — synced to Bootstrap's
   show/hide events in main.js (.is-open on li.dropdown), so it reflects
   the real click/keyboard disclosure state and clears on every close
   path (same trigger, another trigger, outside click, Escape).
   Deliberately distinct from the permanent .is-active page indicator:
   blue text + subtle brand tint, no underline, no weight change. */
.site-nav.navbar-nav > li.dropdown.is-open > .site-nav__link {
  color: var(--primary-500);
  background-color: var(--primary-50);
}

[data-theme="dark"] .site-nav.navbar-nav > li.dropdown.is-open > .site-nav__link {
  background-color: rgba(25, 118, 210, 0.14);
}

/* --------------------------------------------------------------------------
     18. Mega Menu
   Compact structured panels — not a full-width enterprise mega menu.
   Desktop: Bootstrap disables Popper inside navbars and anchors menus via
   [data-bs-popper] to the nearest positioned ancestor, so each dropdown
   <li> is position:relative and its panel opens beneath it. Horizontal
   centering on the PARENT ITEM (then viewport clamping) is computed by
   positionMegaMenu() in main.js — no per-menu CSS offsets.
   Mobile (< 1200px): panels render static inside the drawer, styled as
   accordion submenus in section 14.
   -------------------------------------------------------------------------- */
.site-nav.navbar-nav > li.dropdown {
  position: relative;
}

.mega-menu {
  width: max-content;
  max-width: min(var(--mega-menu-width-md), calc(100vw - 2rem));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}

.mega-menu--wide {
  max-width: min(var(--mega-menu-width-lg), calc(100vw - 2rem));
}

.mega-menu__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Two-column item layout. Column division happens in the HTML so ordering
   is predictable and balanced (spec: divide approximately by count). */
.mega-menu__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-8);
  align-items: start;
}

/* Menu/group headings ("Featured Products", "Research & Innovation", …) */
.mega-menu__heading {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0;
}

.mega-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Every item is one flex row: fixed-size icon area on the LEFT, text stack
   on the RIGHT. align-items:center vertically centers the icon against the
   COMBINED title + description block — never title-only, never above it. */
.mega-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3); /* consistent icon ↔ text rhythm (0.75rem token) */
  padding: var(--space-2) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

/* Product entries keep their image-led layout: top-aligned artwork so
   multi-line keyword descriptions stay visually balanced. */
.mega-menu__item--product {
  align-items: flex-start;
}

/* Inline Bootstrap Icon area (Solutions / Research / Resources / Company):
   compact supporting glyph — centered in its own box, never dominant. */
.mega-menu__glyph {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  font-size: 1.0625rem; /* ~17px glyph within the 34px container */
  line-height: 1;
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

/* Icon follows the existing hover language: muted → brand primary,
   in sync with the title color change */
.mega-menu__item:hover .mega-menu__glyph,
.mega-menu__item:focus-visible .mega-menu__glyph {
  color: var(--primary-500);
}

.mega-menu__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.mega-menu__item-body {
  display: block;
  min-width: 0;
}

.mega-menu__item:hover,
.mega-menu__item:focus-visible {
  background-color: var(--primary-50);
}

[data-theme="dark"] .mega-menu__item:hover,
[data-theme="dark"] .mega-menu__item:focus-visible {
  background-color: rgba(25, 118, 210, 0.14);
}

/* Current-page item inside a mega menu. Research subpages set
   aria-current="page" on their own link; the tint + accent mirror the
   .site-nav__link active language without a bright border. */
.mega-menu__item[aria-current="page"] {
  background-color: var(--primary-50);
}

.mega-menu__item[aria-current="page"] .mega-menu__glyph,
.mega-menu__item[aria-current="page"] .mega-menu__item-title {
  color: var(--primary-500);
}

[data-theme="dark"] .mega-menu__item[aria-current="page"] {
  background-color: rgba(25, 118, 210, 0.14);
}

.mega-menu__item-title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-heading);
  transition: color var(--transition-fast);
}

.mega-menu__item:hover .mega-menu__item-title,
.mega-menu__item:focus-visible .mega-menu__item-title {
  color: var(--primary-500);
}

.mega-menu__item-desc {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted);
  margin-top: 1px;
}

/* Menu footer link ("View All Products →") — aligned to the RIGHT END of
   every mega menu panel (re-aligned to the left inside the mobile drawer) */
.mega-menu__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.mega-menu__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--primary-500);
}

.mega-menu__view-all:hover {
  color: var(--primary-600);
}

.mega-menu__view-all .bi-arrow-right {
  font-size: 0.875rem;
  transition: transform var(--transition-fast);
}

.mega-menu__view-all:hover .bi-arrow-right {
  transform: translateX(2px);
}

/* Drawer-only chrome is hidden on desktop; visible inside the < 1200px
   drawer (section 14). */
.drawer-head {
  display: none;
}

/* --------------------------------------------------------------------------
         19. Theme Switcher — small utility control, least prominent header item
   -------------------------------------------------------------------------- */
.site-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.site-theme-toggle:hover {
  color: var(--primary-500);
  border-color: var(--primary-400);
  background-color: var(--primary-50);
}

[data-theme="dark"] .site-theme-toggle:hover {
  background-color: rgba(25, 118, 210, 0.14);
}

.site-theme-toggle:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Both icons share one grid cell; only the contextually correct one is
   visible (moon in light = switch to dark, sun in dark = switch to light). */
.site-theme-toggle__icon {
  grid-area: 1 / 1;
  font-size: 0.9375rem;
  opacity: 0;
  transform: rotate(-45deg) scale(0.75);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.site-theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .site-theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(45deg) scale(0.75);
}

[data-theme="dark"] .site-theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* --------------------------------------------------------------------------
         20. Mobile Navigation (< 1200px) — right-side slide-in drawer
   The navigation container becomes a fixed drawer (translateX 100% → 0),
   with a semi-transparent overlay, body scroll lock and inline accordion
   submenus. The theme switcher stays in the navbar row beside the toggler.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  /* Single-row header on every viewport; below 1200px the nav becomes a
     right-side drawer and the controls cluster beside the toggler. */
  .site-navbar .container > .site-toggler {
    margin-left: auto; /* push toggler + theme switcher to the right edge */
  }

  /* Drawer panel */
  .site-nav-collapse {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1080; /* above header (1030) and overlay (1070) */
    height: 100vh;
    height: 100dvh;
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    background-color: var(--color-card);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--transition-slow),
      visibility 0s linear var(--transition-slow);
  }

  .site-nav-collapse.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--transition-slow);
  }

  /* Backdrop overlay */
  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background-color: var(--overlay-scrim);
    opacity: 0;
    transition: opacity var(--transition-base);
  }

  /* Invisible state must never intercept clicks */
  .nav-overlay:not(.is-open) {
    pointer-events: none;
  }

  .nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Background scroll lock while the drawer is open (applied to both html
     and body because overflow-x: clip on <html> prevents propagation) */
  html.nav-drawer-open,
  body.nav-drawer-open {
    overflow: hidden;
  }

  /* The drawer lives inside .site-header, whose z-index (1030) creates a
     stacking context that traps the drawer's own z-index (1080).  Bump the
     header above the overlay (1070) when the drawer is open so the drawer
     renders on top. */
  body.nav-drawer-open .site-header {
    z-index: 1080;
  }

  /* Drawer chrome */
  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .drawer-head__brand {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
  }

  .drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  width: 36px;
  height: 36px;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    transition:
      color var(--transition-fast),
      border-color var(--transition-fast),
      background-color var(--transition-fast);
  }

  .drawer-close:hover {
    color: var(--primary-500);
    border-color: var(--primary-400);
    background-color: var(--primary-50);
  }

  [data-theme="dark"] .drawer-close:hover {
    background-color: rgba(25, 118, 210, 0.14);
  }

  .drawer-close:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }

  /* Navigation list inside the drawer */
  .site-nav {
    margin-inline: 0;
    row-gap: var(--space-1);
  }

  /* Comfortable touch targets for links and dropdown toggles */
  .site-nav.navbar-nav .site-nav__link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
    padding: var(--space-3);
  }

  /* Keep the active indicator on the left edge instead of underneath */
  .site-nav.navbar-nav .site-nav__link.is-active::after {
    left: var(--space-3);
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
  }

  /* Submenu = accordion body */
  .site-nav .dropdown-menu {
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
    padding: 0 0 0 var(--space-4);
    border: 0;
    border-left: 2px solid var(--primary-200);
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
  }

  [data-theme="dark"] .site-nav .dropdown-menu {
    border-left-color: var(--primary-800);
  }

  /* Panels lose their desktop card look and stack in a single column */
  .mega-menu {
    width: 100%;
    max-width: none;
    padding: 0;
    box-shadow: none;
  }

  .mega-menu__columns {
    grid-template-columns: 1fr;
  }

  /* Footer links read as normal list endings inside the drawer */
  .mega-menu__footer {
    justify-content: flex-start;
    margin-top: var(--space-4);
  }
}

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

  .skip-link {
    transition: none;
  }

  .site-theme-toggle__icon {
    transform: none;
  }

  /* Logo shrink and header compaction apply instantly (main.js also skips
     the GSAP timeline); mega menus open immediately with no entrance
     animation because all transitions above are neutralized. The drawer
     appears/disappears without sliding; theme/logo/icon changes stay
     functional but never animate. */
  .site-brand__logo,
  .mega-menu__item,
  .mega-menu__glyph,
  .site-nav-collapse,
  .nav-overlay,
  .site-theme-toggle__icon,
  .mega-menu__view-all .bi-arrow-right {
    transition: none;
  }

  /* Showcase: skip transitions for reduced-motion users */
  .sc-rail,
  .sc-featured,
  .sc-tile {
    transition: none;
    scroll-behavior: auto;
  }

  /* Insights: skip hover transitions for reduced-motion users */
  .insights-featured,
  .insights-supporting__item,
  .insights-featured__link,
  .insights-supporting__arrow,
  .insights-view-all,
  .insights-view-all .bi {
    transition: none;
  }

  /* Final CTA: skip hover transitions for reduced-motion users */
  .final-cta__link,
  .final-cta__link .bi {
    transition: none;
  }

  /* Footer: skip hover transitions for reduced-motion users */
  .footer-nav__list a,
  .footer-contact__item a,
  .footer-social__link,
  .footer-bottom__legal a,
  .footer-nav__view-all .bi {
    transition: none;
  }
}

/* ==========================================================================
   22. Case Studies / Selected Work
   Client delivery proof section. Featured PhD Projects case study in a
   two-column layout; compact "Selected Clients & Work" grid below.
   Scoped entirely under .case-studies-section — no global selectors.
   ========================================================================== */

.case-studies-section {
  padding-block: var(--space-7);
  background-color: var(--color-body);
}

/* ---- Section header (eyebrow + heading + intro) ---- */

.case-studies-header {
  max-width: 660px;
}

.case-studies-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .case-studies-section .section-eyebrow {
  color: var(--primary-300);
}

.case-studies-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

.case-studies-section .section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.2rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.case-studies-section .section-intro {
  max-width: 600px;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Featured case study: two-column layout ---- */

.featured-case-study {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: clamp(var(--space-6), 3vw, 40px);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.featured-case-study:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .featured-case-study:hover {
  border-color: var(--primary-600);
}

/* Visual (image) */
.featured-case-study__visual {
  overflow: hidden;
  border-radius: var(--radius-lg);
  line-height: 0;
}

.featured-case-study__visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-slow);
}

.featured-case-study:hover .featured-case-study__visual img {
  transform: scale(1.02);
}

/* Dark theme: image needs a lighter surface */
[data-theme="dark"] .featured-case-study__visual {
  background-color: #F8FAFC;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

/* Content column */
.featured-case-study__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-case-study__label {
  margin: 0 0 var(--space-1);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.featured-case-study__client {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .featured-case-study__client {
  color: var(--primary-300);
}

.featured-case-study__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 1.2vw + 1.25rem, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.featured-case-study__desc {
  max-width: 48ch;
  margin-bottom: var(--space-5);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* Tags (compact pills) */
.featured-case-study__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-left: 0;
  list-style: none;
}

.featured-case-study__tags li {
  padding: 0.375rem 0.75rem;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.featured-case-study:hover .featured-case-study__tags li {
  border-color: var(--primary-200);
}

[data-theme="dark"] .featured-case-study:hover .featured-case-study__tags li {
  border-color: var(--primary-700);
}

/* CTA button (uses existing site-btn--primary) */
.featured-case-study__content .site-btn {
  align-self: flex-start;
}

/* ==========================================================================
   Selected Clients & Work — dark full-width showcase
   Two-zone layout: featured client (horizontal) + secondary rail (square).
   Rail uses native overflow-x scroll (same pattern as Business Domains).
   Always dark in both themes. Scoped under .sc-showcase.
   ========================================================================== */

.sc-showcase {
  /* Scoped dark tokens — always dark */
  --sc-bg: #07284D;
  --sc-heading: #F8FAFC;
  --sc-text: #CBD5E1;
  --sc-muted: #94A3B8;
  --sc-accent: #3399FF;
  --sc-border: rgba(248, 250, 252, 0.14);
  --sc-surface: rgba(248, 250, 252, 0.06);
  --sc-grid-line: rgba(248, 250, 252, 0.05);
  --sc-glow: rgba(51, 153, 255, 0.12);
  --sc-tile: 110px;
  --sc-gap: 14px;

  position: relative;
  overflow: hidden;
  margin-top: clamp(var(--space-5), 2.5vw, 32px);
  /* full-width breakout: negate container padding */
  margin-inline: calc(-1 * clamp(var(--space-5), 3vw, var(--space-7)));
  padding: clamp(var(--space-6), 3vw, 56px) clamp(var(--space-5), 3vw, var(--space-7));
  background-color: var(--sc-bg);
  color: var(--sc-text);
}

[data-theme="dark"] .sc-showcase {
  --sc-bg: #161B22;
  --sc-grid-line: rgba(148, 163, 184, 0.06);
  --sc-glow: rgba(51, 153, 255, 0.10);
}

/* Subtle engineering grid background */
.sc-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--sc-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sc-grid-line) 1px, transparent 1px),
    radial-gradient(52% 70% at 18% 0%, var(--sc-glow), transparent 70%);
  background-size: 44px 44px, 44px 44px, auto;
  pointer-events: none;
}

.sc-showcase > * {
  position: relative;
}

/* ---- Header with controls ---- */

.sc-showcase__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: clamp(var(--space-4), 2vw, 28px);
}

.sc-showcase__header-text {
  max-width: 480px;
}

.sc-showcase__heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sc-heading);
}

.sc-showcase__subtitle {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sc-muted);
}

/* ---- Arrow controls (top-right, like Business Domains footer) ---- */

.sc-showcase__controls {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  padding-top: 2px;
}

.sc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid var(--sc-border);
  border-radius: 50%;
  background: transparent;
  color: var(--sc-heading);
  font-size: 0.875rem;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
  flex-shrink: 0;
}

.sc-arrow:hover {
  border-color: var(--sc-accent);
  background: var(--sc-accent);
  color: #fff;
}

.sc-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: var(--sc-border);
  background: transparent;
  color: var(--sc-heading);
}

.sc-arrow:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}

/* ---- Rail layout: featured + secondary ---- */

.sc-showcase__rail {
  display: flex;
  align-items: stretch;
  gap: var(--sc-gap);
}

/* ---- Featured client (horizontal rectangle) ---- */

.sc-featured {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 340px;
  min-height: 120px;
  padding: var(--space-4) var(--space-5);
  background-color: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: opacity 0.35s ease;
}

.sc-featured__logo {
  flex: 0 0 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  background-color: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
}

.sc-featured__logo img {
  max-width: 68%;
  max-height: 68%;
  object-fit: contain;
}

.sc-featured__info {
  flex: 1;
  min-width: 0;
}

.sc-featured__name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--sc-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sc-featured__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-featured__tag {
  padding: 0.1875rem 0.5rem;
  background-color: rgba(248, 250, 252, 0.08);
  border: 1px solid var(--sc-border);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--sc-muted);
  white-space: nowrap;
}

/* ---- Secondary rail (square tiles, native scroll like Business Domains) ---- */

.sc-rail {
  flex: 1;
  display: flex;
  gap: var(--sc-gap);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  min-width: 0;
}

.sc-rail::-webkit-scrollbar {
  display: none;
}

.sc-tile {
  flex: 0 0 var(--sc-tile);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.sc-tile:hover {
  border-color: rgba(248, 250, 252, 0.25);
}

.sc-tile img {
  max-width: 62%;
  max-height: 62%;
  object-fit: contain;
}

/* ---- View All CTA ---- */

.sc-showcase__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: clamp(var(--space-4), 2vw, 28px);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  color: var(--sc-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sc-showcase__view-all:hover {
  color: #FFFFFF;
}

.sc-showcase__view-all .bi {
  font-size: 0.875rem;
  transition: transform var(--transition-fast);
}

.sc-showcase__view-all:hover .bi {
  transform: translateX(3px);
}

/* ---- Responsive: mobile (< 768px) ---- */

@media (max-width: 767.98px) {
  .sc-showcase__rail {
    flex-direction: column;
  }

  .sc-featured {
    width: 100%;
  }

  .sc-rail {
    overflow-x: auto;
  }
}

/* ---- Responsive: tablet (≥ 768px) ---- */

@media (min-width: 768px) {
  .case-studies-section {
    padding-block: var(--space-8);
  }

  .featured-case-study {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-7);
  }

  .sc-showcase {
    --sc-tile: 120px;
  }

  .sc-featured {
    width: 360px;
  }
}

/* ---- Responsive: desktop (≥ 1200px) ---- */

@media (min-width: 1200px) {
  .case-studies-section {
    padding-block: 100px;
  }

  .featured-case-study {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-8);
  }

  .sc-showcase {
    --sc-tile: 130px;
  }

  .sc-featured {
    width: 380px;
  }
}

/* ==========================================================================
   23. Insights
   Compact knowledge-sharing preview. Featured insight + 2 supporting items.
   Scoped under .insights-section — no global selectors.
   ========================================================================== */

.insights-section {
  padding-block: clamp(var(--space-6), 4vw, var(--space-7));
  background-color: var(--color-section);
}

/* ---- Section header ---- */

.insights-header {
  max-width: 560px;
}

.insights-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .insights-section .section-eyebrow {
  color: var(--primary-300);
}

.insights-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

.insights-section .section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 1.8vw + 1.1rem, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.insights-section .section-intro {
  max-width: 520px;
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

/* ---- Grid: featured | supporting ---- */

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: clamp(var(--space-5), 2.5vw, 36px);
}

/* ---- Featured insight ---- */

.insights-featured {
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.insights-featured:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .insights-featured:hover {
  border-color: var(--primary-600);
}

.insights-featured__category {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .insights-featured__category {
  color: var(--primary-300);
}

.insights-featured__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: clamp(1.125rem, 1.2vw + 0.85rem, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.insights-featured__desc {
  margin: 0 0 var(--space-4);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.insights-featured__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

[data-theme="dark"] .insights-featured__link {
  color: var(--primary-300);
}

.insights-featured__link:hover {
  color: var(--primary-700);
  gap: var(--space-3);
}

[data-theme="dark"] .insights-featured__link:hover {
  color: var(--primary-400);
}

.insights-featured__link .bi {
  font-size: 0.875rem;
  transition: transform var(--transition-fast);
}

.insights-featured__link:hover .bi {
  transform: translateX(2px);
}

.insights-featured__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Supporting insights ---- */

.insights-supporting {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.insights-supporting__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition-fast);
}

.insights-supporting__item:first-child {
  padding-top: 0;
}

.insights-supporting__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.insights-supporting__item:hover .insights-supporting__title {
  color: var(--primary-500);
}

[data-theme="dark"] .insights-supporting__item:hover .insights-supporting__title {
  color: var(--primary-300);
}

.insights-supporting__item:hover .insights-supporting__arrow {
  color: var(--primary-500);
  transform: translateX(2px);
}

[data-theme="dark"] .insights-supporting__item:hover .insights-supporting__arrow {
  color: var(--primary-300);
}

.insights-supporting__item:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.insights-supporting__content {
  flex: 1;
  min-width: 0;
}

.insights-supporting__category {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .insights-supporting__category {
  color: var(--primary-300);
}

.insights-supporting__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--color-heading);
  transition: color var(--transition-fast);
}

.insights-supporting__arrow {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--color-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* ---- View All CTA ---- */

.insights-view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: clamp(var(--space-4), 2vw, 28px);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

[data-theme="dark"] .insights-view-all {
  color: var(--primary-300);
}

.insights-view-all:hover {
  color: var(--primary-700);
  gap: var(--space-3);
}

[data-theme="dark"] .insights-view-all:hover {
  color: var(--primary-400);
}

.insights-view-all .bi {
  font-size: 0.875rem;
  transition: transform var(--transition-fast);
}

.insights-view-all:hover .bi {
  transform: translateX(2px);
}

.insights-view-all:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Responsive: tablet (≥ 768px) ---- */

@media (min-width: 768px) {
  .insights-grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: stretch;
  }

  .insights-supporting {
    justify-content: center;
    gap: 0;
  }

  .insights-supporting__item {
    flex: 1;
    align-items: center;
    padding: var(--space-5) 0;
  }

  .insights-supporting__item:first-child {
    padding-top: 0;
  }

  .insights-supporting__item:last-child {
    padding-bottom: 0;
  }
}

/* ---- Responsive: desktop (≥ 1200px) ---- */

@media (min-width: 1200px) {
  .insights-grid {
    grid-template-columns: 1.3fr 0.7fr;
  }
}

/* ==========================================================================
   24. Final CTA
   Compact conversion section before footer. Light brand-tinted background,
   centered content. Scoped under .final-cta.
   ========================================================================== */

.final-cta {
  --cta-bg: var(--primary-50);
  --cta-heading: var(--color-heading);
  --cta-text: var(--color-text);
  --cta-muted: var(--color-muted);
  --cta-accent: var(--primary-500);

  position: relative;
  background-color: var(--cta-bg);
  color: var(--cta-text);
  padding-block: clamp(40px, 3.5vw, 56px);
}

[data-theme="dark"] .final-cta {
  --cta-bg: #111D30;
  --cta-heading: #F1F5F9;
  --cta-text: #CBD5E1;
  --cta-muted: #94A3B8;
  --cta-accent: var(--primary-400);
}

.final-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

/* ---- Eyebrow ---- */

.final-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cta-accent);
}

.final-cta__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--cta-accent);
  flex-shrink: 0;
}

/* ---- Heading ---- */

.final-cta__heading {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 2vw + 0.9rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cta-heading);
  max-width: 540px;
}

/* ---- Description ---- */

.final-cta__desc {
  margin: 0 0 24px;
  font-size: clamp(0.875rem, 0.8vw + 0.55rem, 1rem);
  line-height: 1.65;
  color: var(--cta-muted);
  max-width: 520px;
}

/* ---- CTA actions ---- */

.final-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: center;
}

/* Primary CTA — reuses existing site-btn--primary */
.final-cta__btn {
  text-decoration: none;
}

/* Secondary CTA — lightweight text link */
.final-cta__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--cta-accent);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.final-cta__link:hover {
  color: var(--primary-700);
  gap: var(--space-3);
}

[data-theme="dark"] .final-cta__link:hover {
  color: var(--primary-300);
}

.final-cta__link .bi {
  font-size: 0.875rem;
  transition: transform var(--transition-fast);
}

.final-cta__link:hover .bi {
  transform: translateX(2px);
}

.final-cta__link:focus-visible {
  outline: 2px solid var(--cta-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Responsive: mobile (max 767px) ---- */

@media (max-width: 767.98px) {
  .final-cta {
    padding-block: clamp(36px, 4vw, 48px);
  }

  .final-cta__actions {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* ==========================================================================
   25. Footer
   Dark closing area. Scoped under .site-footer.
   ========================================================================== */

.site-footer {
  --ft-bg: var(--color-footer);
  --ft-heading: #F1F5F9;
  --ft-text: #CBD5E1;
  --ft-muted: #8B95A5;
  --ft-border: rgba(248, 250, 252, 0.08);
  --ft-accent: #3399FF;

  background-color: var(--ft-bg);
  color: var(--ft-text);
  padding-top: clamp(var(--space-6), 3.5vw, 56px);
  padding-bottom: clamp(var(--space-5), 2vw, 32px);
}

/* ---- Navigation grid ---- */

.footer-nav {
  display: grid;
  grid-template-columns:
    minmax(220px, 2fr)
    minmax(110px, 1fr)
    minmax(150px, 1.2fr)
    minmax(160px, 1.2fr)
    minmax(110px, 1fr)
    minmax(110px, 1fr);
  gap: clamp(var(--space-4), 2vw, 32px);
  padding-bottom: clamp(var(--space-5), 2.5vw, 40px);
  border-bottom: 1px solid var(--ft-border);
}

/* Brand column */
.footer-nav__brand {
  padding-right: var(--space-3);
}

.footer-logo {
  display: inline-block;
  margin-bottom: var(--space-5);
}

.footer-logo img {
  display: block;
  height: auto;
  width: 180px;
  max-width: 100%;
}

.footer-nav__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ft-muted);
  max-width: 300px;
}

/* Link columns */
.footer-nav__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ft-heading);
}

.footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav__list li {
  margin-bottom: 8px;
}

.footer-nav__list li:last-child {
  margin-bottom: 0;
}

.footer-nav__list a {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ft-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-nav__list a:hover {
  color: var(--ft-accent);
}

.footer-nav__list a:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.footer-nav__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-weight: var(--weight-semibold) !important;
  color: var(--ft-accent) !important;
}

.footer-nav__view-all .bi {
  font-size: 0.75rem;
  transition: transform var(--transition-fast);
}

.footer-nav__view-all:hover .bi {
  transform: translateX(2px);
}

/* ---- Contact row ---- */

.footer-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(var(--space-4), 2vw, 28px) 0;
  border-bottom: 1px solid var(--ft-border);
}

.footer-contact__address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) clamp(var(--space-4), 2vw, 32px);
  margin: 0;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ft-muted);
}

.footer-contact__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-contact__item .bi {
  font-size: 0.875rem;
  color: var(--ft-muted);
  flex-shrink: 0;
}

.footer-contact__item a {
  color: var(--ft-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-contact__item a:hover {
  color: var(--ft-accent);
}

.footer-contact__item a:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Social icons */
.footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--ft-muted);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.footer-social__link:hover {
  color: var(--ft-accent);
  background-color: rgba(51, 153, 255, 0.08);
}

.footer-social__link:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
}

/* ---- Bottom bar ---- */

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: clamp(var(--space-4), 2vw, 28px);
}

.footer-bottom__tagline {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--ft-muted);
}

.footer-bottom__legal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--ft-muted);
}

.footer-bottom__legal a {
  color: var(--ft-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-bottom__legal a:hover {
  color: var(--ft-accent);
}

.footer-bottom__legal a:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.footer-bottom__sep {
  opacity: 0.4;
  font-size: 0.5rem;
}

/* ---- Responsive: tablet (≤ 1199px) ---- */

@media (max-width: 1199.98px) {
  .footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-6);
  }

  .footer-nav__brand {
    grid-column: 1 / -1;
    padding-right: 0;
    max-width: 480px;
    padding-bottom: var(--space-2);
  }

  .footer-logo img {
    width: 160px;
  }
}

/* ---- Responsive: mobile (max 767px) ---- */

@media (max-width: 767.98px) {
  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .footer-logo img {
    width: 150px;
  }

  .footer-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .footer-contact__address {
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer-bottom__legal {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   26. Back to Top
   Quiet floating utility. Appears after meaningful scroll.
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;

  background-color: var(--color-card);
  color: var(--primary-500);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);

  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease,
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top .bi {
  font-size: 0.875rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

/* Hover */
.back-to-top:hover {
  background-color: var(--primary-50);
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

.back-to-top:hover .bi {
  transform: translateY(-1px);
}

/* Focus */
.back-to-top:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 3px;
}

/* Active press */
.back-to-top:active {
  transform: translateY(0) scale(0.96);
}

/* Dark theme */
[data-theme="dark"] .back-to-top {
  background-color: var(--color-card);
  border-color: var(--color-border);
  color: var(--primary-300);
}

[data-theme="dark"] .back-to-top:hover {
  background-color: var(--primary-900);
  border-color: var(--primary-700);
}

/* ---- Responsive: mobile ---- */

@media (max-width: 767.98px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 34px;
    height: 34px;
  }

  .back-to-top .bi {
    font-size: 0.8125rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.15s ease, visibility 0.15s ease;
    transform: none;
  }

  .back-to-top.is-visible {
    transform: none;
  }

  .back-to-top .bi {
    transition: none;
  }

  .back-to-top:hover .bi {
    transform: none;
  }
}

/* ==========================================================================
   27. Product Page Hero
   Reusable opening block for individual product pages (Umanar, Yaazh,
   WedOps, MDurai, Inai, ...). Two-column layout inside the standard
   container: product identity + proposition left (6 cols), product
   visual right (6 cols).

   Deliberately reuses existing site primitives instead of re-declaring
   them — .container.site-container, .hero-eyebrow, .hero-lead,
   .hero-actions, .hero-tags and .site-btn are shared with the homepage
   hero, so both heroes stay in one visual system. Only product-specific
   pieces (logo plate, H1, supporting links, media frame) live here.

   Product-specific values are supplied by the page markup, not by this
   stylesheet: logo, name, eyebrow, tagline, description, hero visual,
   capability list, CTAs.
   ========================================================================== */

.product-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(var(--space-6), 4vw, var(--space-8));
  padding-bottom: clamp(var(--space-7), 5vw, var(--space-9));
}

/* Extremely subtle directional tint — same language as the homepage hero,
   theme-aware, never competes with the content. */
.product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(58% 52% at 76% 32%, rgba(25, 118, 210, 0.06), transparent 70%);
  pointer-events: none;
}

[data-theme="dark"] .product-hero::before {
  background-image:
    radial-gradient(58% 52% at 76% 32%, rgba(25, 118, 210, 0.10), transparent 70%);
}

.product-hero > .container {
  position: relative; /* keep content above the background layer */
}

/* ---- Product identity --------------------------------------------------- */

/* Horizontal logo (600x200 source, transparent PNG sized for both themes).
   Sized well down from the source so the brand supports the H1 instead of
   competing with it; aspect ratio is kept by the intrinsic width/height
   attributes on the <img>. No background plate needed — the artwork is
   transparent and legible on both light and dark surfaces. */
.product-hero__logo {
  display: block;
  width: clamp(148px, 15vw, 188px);
  height: auto;
  margin-bottom: var(--space-5);
}

/* ---- H1 ----------------------------------------------------------------- */

/* Deliberately below .display-hero (4rem) — a product page opening should
   not create unnecessary page height. */
.product-hero__title {
  margin-bottom: var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2.2vw + 1.1rem, 3.125rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.product-hero__title span {
  display: block;
}

/* ---- Supporting navigation links ---------------------------------------- */

/* Quiet inline links under the CTA pair; forward-looking anchors for the
   Features and Pricing sections. */
.product-hero__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.product-hero__links li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
}

.product-hero__links li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
  flex-shrink: 0;
}

.product-hero__links a {
  font-weight: var(--weight-semibold);
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.product-hero__links a:hover {
  color: var(--primary-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-theme="dark"] .product-hero__links a {
  color: var(--primary-300);
}

[data-theme="dark"] .product-hero__links a:hover {
  color: var(--primary-200);
}

.product-hero__links a:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Product visual ----------------------------------------------------- */

.product-hero__media {
  margin: 0; /* figure reset */
}

.product-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Dark theme: the approved illustration needs a light surface to read well.
   Deliberate constant-light plate — never filter the source image. */
[data-theme="dark"] .product-hero__media {
  background-color: #F8FAFC;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

/* ---- Responsive: mobile ------------------------------------------------- */

@media (max-width: 991.98px) {
  .product-hero__title {
    font-size: clamp(1.75rem, 3.6vw + 0.9rem, 2.5rem);
  }
}

@media (max-width: 575.98px) {
  .product-hero {
    padding-top: var(--space-5);
    padding-bottom: var(--space-7);
  }

  /* Single column: copy first, then the product visual — the order comes
     from the Bootstrap column order in the markup, not from reordering. */
  .product-hero__logo {
    margin-bottom: var(--space-4);
  }

  /* Full-width CTAs give a comfortable touch target on phones. */
  .product-hero .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .product-hero .hero-tags {
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   28. Product Navigation
   Secondary page navigation for product pages — sits between the hero and
   the product sections, and becomes sticky directly below the global fixed
   header on scroll. Generic component: product-specific values (logo,
   items, CTA) come from the page markup, so future product pages only swap
   that block.

   Key architecture points:
   • Sticky top is NOT hardcoded — main.js measures the real global header
     height (GSAP compacts it 88px → 70px on scroll) and writes
     --product-nav-sticky-top via ResizeObserver. Default below only exists
     before JS applies the measured value.
   • z-index (1020) sits BELOW the global header (1030), the mobile drawer
     (1080) and its overlay (1070), so the product navigation can never
     cover the global mobile menu.
   • The "More" menu reuses Bootstrap's dropdown (same mechanism as the
     global mega menus): click / Escape / outside-click / arrow-key
     navigation / ARIA state are all provided.
   • Sticky visual state is a subtle separated surface (solid theme-aware
     header-style background + hairline shadow) so scrolled page content
     never bleeds through while the nav is pinned below the global header;
     un-stuck it reads as part of the product hero with a quiet hairline
     border and no surface.
   -------------------------------------------------------------------------- */

/* Product pages only: native anchor jumps (keyboard / hash navigation)
   land below the combined header + product-navigation stack. The offset is
   measured and written by main.js; the fallback covers first paint. Smooth
   scroll is overridden to instant under reduced motion by section 21. */
html.page-product {
  scroll-behavior: smooth;
  scroll-padding-top: var(--product-nav-scroll-offset, calc(var(--header-height) + 3.5rem));
}

.product-nav {
  /* Fallbacks until main.js measures the live values. */
  --product-nav-sticky-top: var(--header-height);
  --product-nav-height: 3.25rem;

  position: sticky;
  top: var(--product-nav-sticky-top);
  z-index: 1020; /* below global header (1030), drawer (1080), overlay (1070) */
  border-bottom: 1px solid var(--color-border);
  background-color: transparent;
  transition:
    background-color var(--transition-base),
    box-shadow var(--transition-base);
}

/* Sticky state: quietly separated from the content — translucent surface
   + hairline shadow, matching the global header's visual language. */
/* Opaque, theme-aware page surface — never translucent, so scrolled
   content can't bleed through while the bar is pinned. */
.product-nav.is-stuck {
  background-color: var(--color-body);
  box-shadow: var(--shadow-sm);
}

.product-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ---- Brand -------------------------------------------------------------- */

.product-nav__brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* Compact horizontal logo (600x200 source → 34px tall / ~102px wide).
   Never dominates the navigation; aspect ratio is kept by the intrinsic
   width/height attributes on the <img>. Transparent artwork works on both
   themes — no plate behind it. */
.product-nav__logo {
  display: block;
  height: 2.125rem;
  width: auto;
}

/* ---- Desktop single row (≥ 992px) -------------------------------------- */

/* The links row sits between the brand and the CTA as one of the three
   balanced bar parts. */
.product-nav__desktop {
  display: flex;
  align-items: center;
}

.product-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dropdown parent anchors Popper positioning for the "More" menu. */
.product-nav__item {
  position: relative;
}

.product-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: transparent;
  border: 0;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.product-nav__link:hover {
  color: var(--primary-500);
  background-color: var(--primary-50);
}

[data-theme="dark"] .product-nav__link:hover {
  background-color: rgba(25, 118, 210, 0.14);
}

/* Active section indicator — same language as the global primary nav:
   brand colour + slightly heavier weight + small underline. Never a pill. */
.product-nav__link.is-active {
  color: var(--primary-500);
  font-weight: var(--weight-semibold);
}

.product-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0;
  height: 2px;
  background-color: var(--primary-500);
  border-radius: var(--radius-pill);
}

[data-theme="dark"] .product-nav__link.is-active {
  color: var(--primary-300);
}

[data-theme="dark"] .product-nav__link.is-active::after {
  background-color: var(--primary-300);
}

.product-nav__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.product-nav__caret {
  font-size: 0.625rem;
  opacity: 0.65;
  transition: transform var(--transition-fast);
}

.product-nav__toggle[aria-expanded="true"] .product-nav__caret {
  transform: rotate(180deg);
}

/* ---- "More" dropdown menu ----------------------------------------------- */

.product-nav__menu {
  min-width: 15rem;
  padding: var(--space-2);
  margin-top: var(--space-2);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.product-nav__menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-nav__menu .dropdown-item {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);

  /* Keep Bootstrap's active treatment in our token language */
  --bs-dropdown-link-active-bg: var(--primary-50);
  --bs-dropdown-link-active-color: var(--primary-500);
  --bs-dropdown-link-hover-bg: var(--primary-50);
  --bs-dropdown-link-hover-color: var(--primary-500);
}

[data-theme="dark"] .product-nav__menu .dropdown-item {
  --bs-dropdown-link-active-bg: rgba(25, 118, 210, 0.14);
  --bs-dropdown-link-active-color: var(--primary-200);
  --bs-dropdown-link-hover-bg: rgba(25, 118, 210, 0.14);
  --bs-dropdown-link-hover-color: var(--primary-200);
}

.product-nav__menu .dropdown-item:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
}

/* Active section inside the "More" menu — same language as the desktop
   links (brand surface + colour + heavier weight, no underline in a
   dropdown) so the current sub-section is always locatable. */
.product-nav__menu .dropdown-item.is-active {
  background-color: var(--primary-50);
  color: var(--primary-500);
  font-weight: var(--weight-semibold);
}

[data-theme="dark"] .product-nav__menu .dropdown-item {
  --bs-dropdown-link-active-bg: rgba(25, 118, 210, 0.14);
  --bs-dropdown-link-active-color: var(--primary-200);
  --bs-dropdown-link-hover-bg: rgba(25, 118, 210, 0.14);
  --bs-dropdown-link-hover-color: var(--primary-200);
}

[data-theme="dark"] .product-nav__menu .dropdown-item.is-active {
  background-color: rgba(25, 118, 210, 0.14);
  color: var(--primary-200);
}

/* ---- CTA ---------------------------------------------------------------- */

.product-nav__cta {
  flex-shrink: 0;
}

/* ---- Mobile bar + panel (< 992px) --------------------------------------- */

.product-nav__mobile-toggle {
  display: none;
  margin-left: auto;
}

.product-nav__mobile-panel {
  display: none;
}

@media (max-width: 991.98px) {
  .product-nav__desktop,
  .product-nav__cta {
    display: none;
  }

  .product-nav__mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-4);
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition:
      color var(--transition-fast),
      border-color var(--transition-fast),
      background-color var(--transition-fast);
  }

  .product-nav__mobile-toggle:hover,
  .product-nav__mobile-toggle[aria-expanded="true"] {
    color: var(--primary-500);
    border-color: var(--primary-400);
    background-color: var(--primary-50);
  }

  [data-theme="dark"] .product-nav__mobile-toggle:hover,
  [data-theme="dark"] .product-nav__mobile-toggle[aria-expanded="true"] {
    background-color: rgba(25, 118, 210, 0.14);
  }

  .product-nav__mobile-toggle:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }

  /* Drop-down sheet pinned below the bar (the bar is position:sticky, so
     it forms the containing block). Grid-template-rows 0fr → 1fr gives a
     cheap auto-height expand that the reduced-motion rules neutralise. */
  .product-nav__mobile-panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    max-height: calc(100vh - var(--header-height) - var(--product-nav-height) - var(--space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-body);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transition:
      grid-template-rows var(--transition-base),
      opacity var(--transition-base),
      visibility 0s linear var(--transition-base);
  }

  .product-nav__mobile-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition:
      grid-template-rows var(--transition-base),
      opacity var(--transition-base),
      visibility 0s;
  }

  .product-nav__mobile-list {
    min-height: 0; /* required for the 0fr collapse trick */
    overflow: hidden;
    margin: 0;
    padding: var(--space-2) 0 var(--space-1);
    list-style: none;
  }

  .product-nav__mobile-list .product-nav__link {
    width: 100%;
    justify-content: space-between;
    min-height: 44px; /* comfortable touch target */
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
  }

  /* Active indicator slides to the left edge inside the flat mobile list —
     the same "rail" treatment the global drawer uses. */
  .product-nav__mobile-list .product-nav__link.is-active::after {
    left: var(--space-2);
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
  }

  .product-nav__mobile-cta {
    display: flex;
    justify-content: center;
    margin: var(--space-2) var(--space-4) var(--space-4);
  }
}

/* ---- Reduced motion ------------------------------------------------------
   The global reduced-motion rules neutralise every transition; these ensure
   the sticky-toggle surface and caret swap instantly too. */
@media (prefers-reduced-motion: reduce) {
  .product-nav,
  .product-nav__link,
  .product-nav__caret,
  .product-nav__mobile-toggle,
  .product-nav__mobile-panel {
    transition: none;
  }

  html.page-product {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   29. Product Overview (Umanar)
   The first product section below the sticky product navigation — answers
   "What is Umanar?" and signals the four core product areas (Billing,
   Inventory, GST, POS) as compact, non-link capability cards.

   Reuses the established homepage primitives (.section-eyebrow,
   .section-title, .section-intro) scoped to this section, and the site's
   card language (surface + hairline border + icon plate) from
   solutions-card / research-cap. No new framework, no new tokens.
   ========================================================================== */

.overview-section {
  background-color: var(--color-section);
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

/* ---- Intro (eyebrow → heading → description) ------------------------------ */

/* Same condensed eyebrow treatment the homepage sections use: small
   uppercase label with a leading dot, theme-aware primary colour. */
.overview-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.overview-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .overview-section .section-eyebrow {
  color: var(--primary-300);
}

.overview-section .section-title {
  margin: 0;
  max-width: 20ch; /* keep the two-line sentence compact */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.overview-section .section-intro {
  max-width: 640px;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Four core capabilities ----------------------------------------------- */

/* Lightweight grid: one column on phones (the required single-column
   order), 2×2 at tablet widths, 4 across on desktop. */
.overview-caps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: clamp(var(--space-6), 4vw, var(--space-8)) 0 0;
  padding: 0;
  list-style: none;
}

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

@media (min-width: 1200px) {
  .overview-caps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.overview-cap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Static blocks (not links): a gentle surface response only — no lift
   that would suggest clickability, no invented affordance. */
.overview-cap:hover {
  border-color: var(--primary-400);
  box-shadow: var(--shadow-sm);
}

.overview-cap__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.125rem;
  flex-shrink: 0;
}

[data-theme="dark"] .overview-cap__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.overview-cap__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.overview-cap__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* Reduced motion: entrance layers come from GSAP (which skips itself
   under reduced motion). Nothing here runs continuously, so only the
   micro-interaction is flattened. */
@media (prefers-reduced-motion: reduce) {
  .overview-cap {
    transition: none;
  }
}

/* ==========================================================================
   30. Product Feature Showcase (Umanar)
   Answers "What can I actually do with Umanar?" as a scroll-driven product
   showcase in editorial open rows (replaces an earlier text-graphic grid).

   Two coordinated desktop areas (≥992px):
     left  — a STICKY product visual, pinned below the header stack and
             centred in the full remaining viewport; the image shrinks to
             fit short screens and slides to whichever feature is active
             (the current image drifts out left while a fresh, preloaded
             layer enters from the right — only when the active feature's
             source actually differs from the one on screen)
     right — the five feature groups scroll naturally; the active group is
             lifted by a soft theme-aware background + faint shadow, never
             a border
   The feature crossing the middle viewport band becomes active.

   Feature copy is real HTML (SEO/AEO: all groups and points are readable
   without JavaScript). Category labels carry small Bootstrap-icon glyphs
   from the site's existing icon set. Each feature resolves its image from
   js/main.js's visualMap — its own real screenshot per feature, the single
   source that drives both the desktop sticky layer and the mobile inline
   images.

   Below 992px the sticky column is dropped, each feature carries its own
   inline image under its heading, and the same active-highlight treatment
   applies; no sticky image column on phones/tablets.
   ========================================================================== */

/* ---- Section surface + compact intro --------------------------------------- */

.pfeatures-section {
  background-color: var(--color-body);
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

/* Same condensed eyebrow treatment the homepage sections use: small
   uppercase label with a leading dot, theme-aware primary colour. */
.pfeatures-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.pfeatures-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .pfeatures-section .section-eyebrow {
  color: var(--primary-300);
}

.pfeatures-section .section-title {
  margin: 0;
  max-width: 22ch; /* keep the sentence compact; intro must not be tall */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.pfeatures-section .section-intro {
  max-width: 640px;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Stage: one column below 992px → two coordinated areas ----------------- */

.pfeatures-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
}

@media (min-width: 992px) {
  .pfeatures-stage {
    grid-template-columns: 1fr 1fr; /* approx 50% / 50% */
    column-gap: clamp(var(--space-6), 4vw, var(--space-8));
    align-items: start;
    /* The single geometry for the whole band. The available band height
       is the viewport minus the sticky header + product nav stack; the
       square frame is whatever fits below that, capped at 520px. The
       left frame and the right column's first-card offset (added below)
       both derive from --pfeatures-frame so the card aligns with the
       centred image at any viewport size. */
    --pfeatures-frame: min(520px, calc(100vh - var(--product-nav-scroll-offset, 140px) - (var(--space-6) * 2)));
  }
}

/* ---- Left: sticky product visual (desktop only) ---------------------------- */

.pfeatures-visual {
  display: none;
}

@media (min-width: 992px) {
  .pfeatures-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: sticky;
    /* Pin below the sticky global header + product navigation. The offset
       is set by initProductNav on <html>; the fallback keeps the frame
       clear of the two sticky bars should JS ever fail. The band is the
       FULL remaining viewport (no bias subtracted from the bottom), so a
       centred frame is visually centred in the usable vertical space with
       equal clearance above and below. */
    top: var(--product-nav-scroll-offset, 140px);
    height: calc(100vh - var(--product-nav-scroll-offset, 140px));
  }

  .pfeatures-visual__frame {
    /* Caps the width by the available band height as well, so the square
       image shrinks (and never clips at the bottom) on shorter laptop
       viewports while staying large on tall screens. The size comes from
       the shared --pfeatures-frame geometry so the right column can
       mirror it. position: relative anchors the absolutely-positioned
       image layers below. */
    position: relative;
    width: min(100%, var(--pfeatures-frame));
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0; /* figure reset */
    background: var(--color-section);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  /* Plain image: fills the frame without distortion (contain letterboxes
     any later non-square screenshot). Layers are absolutely positioned so
     the GSAP slide can stack a fresh image above the current one; nothing
     styles opacity here — GSAP drives the slide (or the source swaps
     instantly under reduced motion / without GSAP). */
  .pfeatures-visual__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }
}

/* ---- Inline card images (mobile/tablet < 992px) --------------------------- */

/* Same rendering rules as the sticky frame image. */
.pfeature-visual__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Sits directly under each card's heading; readable yet never dominates. */
.pfeature-visual--inline {
  width: 100%;
  max-width: 560px;
  margin: var(--space-4) 0 0;
  background: var(--color-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 992px) {
  .pfeature-visual--inline {
    display: none;
  }
}

/* ---- Right: scrolling feature content -------------------------------------- */

.pfeatures-scroll {
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  /* The sticky frame is vertically centred in the band, so it leaves
     (band − frame) / 2 of clear space above and below. Pushing the first
     card down by that same amount aligns its heading with the top edge of
     the image — the copy column reads in lockstep with the visual at any
     viewport size. */
  .pfeatures-scroll .pfeature:first-child {
    margin-top: calc((100vh - var(--product-nav-scroll-offset, 140px) - var(--pfeatures-frame)) / 2);
  }
}

/* Editorial rhythm — each feature is an open row, not a bordered card:
   no card surface, no border, no rounded outline. The active row is
   indicated only by a soft, theme-aware background tint; generous
   internal padding keeps breathing room while the sticky visual holds
   on the left. */
.pfeature {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-5), 3.5vw, var(--space-7));
  transition:
    background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.pfeature + .pfeature {
  margin-top: var(--space-5);
}

.pfeature__category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--transition-base);
}

/* Small line-style category icon: subtle, vertically aligned with the
   label, never decorative — a quiet glyph before the category name. */
.pfeature__category i {
  font-size: 1rem;
  line-height: 1;
  transition: color var(--transition-base);
}

.pfeature__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-muted);
  transition: color var(--transition-base);
}

.pfeature__desc {
  margin: var(--space-3) 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
  transition: color var(--transition-base);
}

/* Active emphasis: a very light neutral/cool tint in light mode
   (--primary-50) and a slightly lighter surface tone than the surrounding
   section in dark mode (--color-card), lifted with a faint card shadow.
   No border, no rail, no saturated blue — the row shape never changes.
   Heading/category/icon colour shifts keep the state readable without
   relying on colour alone. */
.pfeature.is-active {
  background-color: var(--primary-50);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .pfeature.is-active {
  background-color: var(--color-card);
}

.pfeature.is-active .pfeature__category {
  color: var(--primary-500);
}

[data-theme="dark"] .pfeature.is-active .pfeature__category {
  color: var(--primary-300);
}

/* Restrained icon emphasis on the active row only. */
.pfeature.is-active .pfeature__category i {
  color: var(--primary-600);
}

[data-theme="dark"] .pfeature.is-active .pfeature__category i {
  color: var(--primary-300);
}

.pfeature.is-active .pfeature__title {
  color: var(--color-heading);
}

.pfeature.is-active .pfeature__desc {
  color: var(--color-text);
}

/* Feature points — compact list with the site's quiet dot marker. */
.pfeature__list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.pfeature__list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
}

.pfeature__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.58em;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

/* ---- Reduced motion ---------------------------------------------------------
   Sticky behaviour stays (purely positional and usable). The image slide
   flattens to an instant change and card state no longer animates. */

@media (prefers-reduced-motion: reduce) {
  .pfeatures-visual__img,
  .pfeatures-visual__frame,
  .pfeature {
    transition: none;
  }

  .pfeature__category,
  .pfeature__title,
  .pfeature__desc {
    transition: none;
  }
}

/* ==========================================================================
   31. Product Benefits (Umanar) — compact step slide carousel
   Answers "Why does Umanar matter?" as the page's dark, high-contrast
   beat — the same band language as the homepage Company Highlights
   (intentionally dark in BOTH themes; not a new theme). A COMPACT intro
   (eyebrow → heading → description) leads into a multi-item carousel:
   3 cards visible on desktop, 2 on tablet, 1 on mobile (with a small
   peek at the next). ONE card advances per transition with a short eased
   GSAP slide, then the track stops completely — a discrete
   WAIT → SLIDE → STOP cycle (never a marquee, never continuous drift,
   and never scroll-driven). The track is built once per layout as
   [last × perView | originals | first × perView] (JS clones), so 05 → 01
   wraps back invisibly. JS measures the real rendered card width + gap
   for the step; card widths are driven by JS through the
   --pbenefit-basis/--pbenefit-gap custom properties (kept below only as
   static-rail fallbacks).

   Cards show icon + title on one row and the description below (no
   numerals). The leading card in the primary position carries
   .is-active (subtle emphasis, never a bright border).

   Interaction (JS in main.js): hovering the band pauses the auto timer;
   touch pauses during a gesture and resumes shortly after; a horizontal
   swipe advances one card. prefers-reduced-motion (or no JS/GSAP):
   nothing animates and the stage stays a plain swipeable overflow rail
   so all five benefits remain reachable.
   ========================================================================== */

/* ---- Dark band (reuses the Company Highlights visual language) ------------- */

.pbenefits-section {
  /* Scoped band tokens, dark in both themes (mirrors the Company
     Highlights band; not global tokens). */
  --hl-bg: #07284D;
  --hl-heading: #F8FAFC;
  --hl-text: #CBD5E1;
  --hl-accent: #3399FF;
  --hl-grid-line: rgba(248, 250, 252, 0.05);
  --hl-glow-blue: rgba(51, 153, 255, 0.16);
  --hl-glow-red: rgba(255, 51, 51, 0.07);
  --hl-divider: rgba(248, 250, 252, 0.14);
  --hl-panel: rgba(7, 40, 77, 0.42);
  --hl-panel-strong: rgba(7, 40, 77, 0.72);

  position: relative;
  overflow: hidden;
  background-color: var(--hl-bg);
  color: var(--hl-text);
  padding-block: clamp(var(--space-5), 3vw, var(--space-6));
}

[data-theme="dark"] .pbenefits-section {
  --hl-bg: #161B22;
  --hl-grid-line: rgba(148, 163, 184, 0.06);
  --hl-glow-blue: rgba(51, 153, 255, 0.13);
  --hl-panel: rgba(30, 41, 59, 0.5);
  --hl-panel-strong: rgba(30, 41, 59, 0.86);
}

/* Structured background: fine engineering grid + soft radial lighting,
   exactly like the Company Highlights band. Purely decorative and
   STATIC — the tracked slides are the only moving layer. */
.pbenefits-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hl-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hl-grid-line) 1px, transparent 1px),
    radial-gradient(52% 70% at 18% 0%, var(--hl-glow-blue), transparent 70%),
    radial-gradient(38% 55% at 88% 100%, var(--hl-glow-red), transparent 65%);
  background-size: 44px 44px, 44px 44px, auto, auto;
  pointer-events: none;
}

/* ---- Compact intro ---------------------------------------------------------- */

.pbenefits-intro {
  position: relative; /* above the grid layer */
}

.pbenefits-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hl-accent);
}

.pbenefits-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  flex-shrink: 0;
}

.pbenefits-section .section-title {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--hl-heading);
}

.pbenefits-section .section-intro {
  max-width: 640px;
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--hl-text);
}

/* ---- Stage ------------------------------------------------------------------ */

/* Base = touch-friendly horizontal rail (the site's existing rail
   pattern). This is the no-JS and prefers-reduced-motion fallback; when
   the carousel runs, JS adds .is-carousel to clip it instead. */
.pbenefits-stage {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  margin-top: clamp(var(--space-5), 2.5vw, var(--space-6));
}

.pbenefits-stage::-webkit-scrollbar {
  display: none;
}

/* The stage is a keyboard-reachable scrollable region in rail mode. */
.pbenefits-stage:focus-visible {
  outline: 2px solid var(--hl-accent);
  outline-offset: -2px;
}

/* Carousel mode: the stage is a window that clips the GSAP-driven track.
   The track genuinely rests between slides (overflow hidden means the
   browser never scrolls it); touch-action "pan-y" keeps vertical page
   scrolling native and prevents horizontal page dragging. */
.pbenefits-section.is-carousel .pbenefits-stage {
  overflow: hidden;
  scroll-snap-type: none;
  overscroll-behavior: none;
  touch-action: pan-y;
}

.pbenefits-track {
  position: relative; /* offsetParent for the JS step measurement */
  display: flex;
  gap: var(--pbenefit-gap, clamp(var(--space-3), 1.6vw, var(--space-5)));
  padding-left: clamp(var(--space-4), 4vw, var(--space-6));
  padding-right: clamp(var(--space-4), 4vw, var(--space-6));
}

.pbenefits-section.is-carousel .pbenefits-track {
  will-change: transform;
}

/* Each duplication of the sequence is wrapped in an inert, transparent
   group: display:contents makes its cards real flex siblings of the
   track, so the gap BETWEEN sets is identical to the gap inside a set —
   required for the invisible 05 → 01 wrap. Clones are aria-hidden and
   carry no element ids (stripped by initUmanarBenefits). */
.pbenefits-set {
  display: contents;
}

/* ---- Compact benefit card --------------------------------------------------- */

/* A compact premium product card, not an editorial panel: layered
   translucent surface, one soft border, restrained padding. The top row
   holds the icon next to the title, then the description below — the
   internal whitespace does the work, no giant viewport-height panels.
   Inactive cards stay visible at slightly reduced presence; the active
   card lifts with stronger surface + a faint halo (never a bright
   border). Width is driven by JS (--pbenefit-basis), so exactly
   3 / 2 / 1 cards fit with a small peek; the fallback flex basis below
   only serves the static rail. */
.pbenefit {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 var(--pbenefit-basis, min(82%, 320px));
  gap: clamp(var(--space-2), 1.2vw, var(--space-3));
  min-height: clamp(150px, 25vh, 185px);
  padding: clamp(var(--space-3), 1.6vw, var(--space-4));
  border: 1px solid var(--hl-divider);
  border-radius: var(--radius-lg);
  background: var(--hl-panel);
  box-shadow:
    inset 0 1px 0 rgba(248, 250, 252, 0.06),
    var(--shadow-md);
  opacity: 0.78;
  scroll-snap-align: start;
  -webkit-user-select: none;
  user-select: none;
  transition:
    opacity var(--transition-base),
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

@media (min-width: 768px) {
  .pbenefit {
    flex-basis: var(--pbenefit-basis, 46%);
  }
}

/* Active emphasis — quiet: full opacity, slightly stronger surface, a
   faint blue halo that reads as a glow, never as a border. */
.pbenefit.is-active {
  opacity: 1;
  background-color: var(--hl-panel-strong);
  border-color: rgba(248, 250, 252, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(248, 250, 252, 0.10),
    0 0 0 1px var(--hl-glow-blue),
    0 16px 40px rgba(2, 6, 23, 0.38);
}

/* ---- Card internals --------------------------------------------------------- */

/* Icon + title on one row; the caption sits below. */
.pbenefit__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

/* Quiet icon tile, same treatment the dark band uses — translucent
   primary fill, vertically aligned with the title's first line. */
.pbenefit__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(51, 153, 255, 0.14);
  color: var(--hl-accent);
  font-size: 1.375rem;
  line-height: 1;
  flex-shrink: 0;
}

.pbenefit__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--hl-heading);
}

.pbenefit__desc {
  margin: 0;
  max-width: 38ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--hl-text);
}

/* ---- Reduced motion ---------------------------------------------------------
   The action (initUmanarBenefits) skips itself and never adds
   .is-carousel, so the stage stays a plain swipeable rail with nothing
   auto-moving; only the quiet active emphasis is flattened. */
@media (prefers-reduced-motion: reduce) {
  .pbenefit {
    transition: none;
  }
}

/* ==========================================================================
   32. Product Industries (Umanar) — compact step slide carousel
   Answers "Who is Umanar for?" as a theme-aware light band that alternates
   cleanly with the dark Benefits band above and the dark footer below — a
   visual rhythm distinct from Features and Benefits. A COMPACT intro
   (eyebrow → heading → description) with circular prev/next controls
   beside it leads into a multi-item carousel: 3 cards visible on desktop,
   2 on tablet, 1 on mobile (with a small peek at the next). ONE card
   advances per transition with a short eased GSAP slide, then the track
   stops completely — a discrete WAIT → SLIDE → STOP cycle (never a
   marquee, never continuous drift, never scroll-driven). The track is
   built once per layout as [last × perView | originals | first × perView]
   (JS clones), so 06 → 01 wraps back invisibly. JS measures the real
   rendered card width + gap for the step; card widths are driven by JS
   through the --ind-basis/--ind-gap custom properties (kept below only as
   static-rail fallbacks).

   Cards show an icon on top, then the industry title and a short
   description (no numerals, no stat plates). The leading card carries a
   quiet .is-active lift.

   Interaction (JS in main.js): hovering the band pauses the auto timer;
   touch pauses during a gesture and resumes shortly after; arrows and a
   horizontal swipe advance exactly one card; the focused stage responds
   to Arrow keys. prefers-reduced-motion disables autoplay and makes
   transitions instant while keeping arrow navigation; without JS/GSAP the
   stage stays a plain swipeable overflow rail so all six industries
   remain reachable.
   ========================================================================== */

/* ---- Light theme-aware band ------------------------------------------------ */

.industries-section {
  position: relative;
  overflow: hidden;
  background-color: var(--color-section);
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

/* Subtle abstract accent, never competing with the cards: a faint radial
   tint in the corners of the section. Purely decorative and static. */
.industries-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 55% at 88% 0%, rgba(25, 118, 210, 0.07), transparent 70%),
    radial-gradient(28% 42% at 4% 100%, rgba(25, 118, 210, 0.04), transparent 65%);
  pointer-events: none;
}

[data-theme="dark"] .industries-section::before {
  background:
    radial-gradient(40% 55% at 88% 0%, rgba(133, 192, 247, 0.08), transparent 70%),
    radial-gradient(28% 42% at 4% 100%, rgba(133, 192, 247, 0.05), transparent 65%);
}

/* ---- Compact intro + controls ---------------------------------------------- */

.industries-intro {
  position: relative; /* above the accent layer */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.industries-intro__text {
  min-width: 0;
  flex: 1 1 auto;
}

/* Same condensed eyebrow treatment the homepage sections use: small
   uppercase label with a leading dot, theme-aware primary colour. */
.industries-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.industries-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .industries-section .section-eyebrow {
  color: var(--primary-300);
}

.industries-section .section-title {
  margin: 0;
  max-width: 22ch; /* keep the sentence compact; intro must not be tall */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.industries-section .section-intro {
  max-width: 640px;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* Circular prev/next controls, aligned with the heading block — the same
   compact arrow language as the homepage Selected Clients showcase.
   On narrow screens the intro wraps and the controls drop onto their own
   row, still tappable at comfortable size. */
.industries-controls {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
  align-self: flex-end;
  padding-bottom: 2px;
}

.industries-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-heading);
  font-size: 0.9375rem;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
  flex-shrink: 0;
}

.industries-arrow:hover {
  border-color: var(--primary-500);
  background-color: var(--primary-500);
  color: #fff;
}

[data-theme="dark"] .industries-arrow:hover {
  border-color: var(--primary-400);
  background-color: var(--primary-400);
  color: #0F172A;
}

.industries-arrow:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* ---- Stage ------------------------------------------------------------------ */

/* Base = touch-friendly horizontal rail (the site's existing rail
   pattern). This is the no-JS / no-GSAP fallback; when the carousel
   runs, JS adds .is-carousel to clip it instead. */
.industries-stage {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  margin-top: clamp(var(--space-6), 3.5vw, var(--space-7));
}

.industries-stage::-webkit-scrollbar {
  display: none;
}

/* The stage is a keyboard-reachable scrollable region in rail mode. */
.industries-stage:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
}

/* Carousel mode: the stage is a window that clips the GSAP-driven track.
   The track genuinely rests between slides (overflow hidden means the
   browser never scrolls it); touch-action "pan-y" keeps vertical page
   scrolling native and prevents horizontal page dragging. */
.industries-section.is-carousel .industries-stage {
  overflow: hidden;
  scroll-snap-type: none;
  overscroll-behavior: none;
  touch-action: pan-y;
}

.industries-track {
  position: relative; /* offsetParent for the JS step measurement */
  display: flex;
  gap: var(--ind-gap, clamp(var(--space-4), 1.8vw, var(--space-5)));
  padding-left: clamp(var(--space-4), 3vw, var(--space-5));
  padding-right: clamp(var(--space-4), 3vw, var(--space-5));
}

.industries-section.is-carousel .industries-track {
  will-change: transform;
}

/* Each duplication of the sequence is wrapped in an inert, transparent
   group: display:contents makes its cards real flex siblings of the
   track, so the gap BETWEEN sets is identical to the gap inside a set —
   required for the invisible 06 → 01 wrap. Clones are aria-hidden and
   carry no element ids (stripped by initUmanarIndustries). */
.industries-set {
  display: contents;
}

/* ---- Industry card ----------------------------------------------------------- */

/* Compact premium card on the light band: quiet surface + one hairline
   border + icon plate on top. Inactive cards keep a faint presence; the
   active card lifts with a stronger border tint + soft halo (never a
   heavy border). Width is driven by JS (--ind-basis), so exactly
   3 / 2 / 1 cards fit with a small peek; the fallback flex basis below
   only serves the static rail. */
.industry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 var(--ind-basis, min(84%, 340px));
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
  -webkit-user-select: none;
  user-select: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

@media (min-width: 768px) {
  .industry {
    flex-basis: var(--ind-basis, 46%);
  }
}

/* Gentle elevation on hover — any card, not only the active one. */
.industry:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Active emphasis — quiet: tinted hairline + a soft primary halo. */
.industry.is-active {
  border-color: var(--primary-300);
  box-shadow:
    0 0 0 3px rgba(25, 118, 210, 0.10),
    var(--shadow-md);
}

[data-theme="dark"] .industry.is-active {
  border-color: rgba(133, 192, 247, 0.45);
  box-shadow:
    0 0 0 3px rgba(133, 192, 247, 0.14),
    var(--shadow-md);
}

/* ---- Card internals --------------------------------------------------------- */

/* Same quiet icon plate the overview capability cards use. */
.industry__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.125rem;
  line-height: 1;
  flex-shrink: 0;
}

[data-theme="dark"] .industry__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.industry__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.industry__desc {
  margin: 0;
  max-width: 40ch;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* ---- Reduced motion ---------------------------------------------------------
   initUmanarIndustries disables autoplay and steps instantly under
   prefers-reduced-motion (arrows still navigate); only the tiny
   micro-interactions are flattened here. */
@media (prefers-reduced-motion: reduce) {
  .industry,
  .industries-arrow {
    transition: none;
  }

  .industry:hover {
    transform: none;
  }
}

/* ==========================================================================
   PRICING (Umanar product page)
   Three simple plans with a Monthly / Annual billing-period toggle.

   Trustworthy > promotional: real price hierarchy, a small MOST POPULAR
   pill on Business (never a price bump), hairlines to group features,
   and an explicit "exclusive of applicable GST" note. Each card ships
   BOTH price blocks (monthly and annual markup); initUmanarPricing()
   flips .is-annual on the section and the matching aria-hidden. CSS
   cross-fades the two blocks in place — the annual block keeps the
   yearly bill (₹X / year) as the primary price with only the exact
   saving underneath. Every card lists the same full feature set, with
   plan-specific limits/levels shown under the four variable rows.

   Reuses the site primitives (.section-eyebrow / .section-title /
   .section-intro / .site-btn) and design tokens only; responsive
   breakpoints match the rest of the site (992 / 768).
   ========================================================================== */

/* ---- Section surface + intro + toggle ------------------------------------- */

/* Alternates against the Industries band: default body surface in both
   themes, like the Features section. */
.pricing-section {
  background-color: var(--color-body);
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

/* Same condensed eyebrow treatment as the rest of the product page:
   small uppercase label with a leading dot, theme-aware primary colour. */
.pricing-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.pricing-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .pricing-section .section-eyebrow {
  color: var(--primary-300);
}

.pricing-section .section-title {
  margin: 0;
  max-width: 22ch; /* keep the sentence compact; intro must not be tall */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.pricing-section .section-intro {
  max-width: 640px;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* Intro row: copy grows on the left, the billing toggle sits on the
   right (aligned to the bottom of the heading block). The toggle wraps
   onto its own row on narrow screens, still comfortably tappable. */
.pricing-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pricing-intro__text {
  min-width: 0;
  flex: 1 1 auto;
}

/* ---- Billing-period toggle -------------------------------------------------- */

/* Segmented radio group styled with the site's pill language. Native
   radios (visually hidden but focusable, using the site's
   .visually-hidden-focusable utility) give free arrow-key navigation;
   the sliding highlight is a decorative track behind the labels. */
.pricing-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin: 0;
  min-width: 0;
  flex-shrink: 0;
}

.pricing-toggle__legend {
  /* visually hidden but announced to screen readers */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pricing-toggle__track {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 5.5rem;
  border-radius: var(--radius-pill);
  background-color: rgba(25, 118, 210, 0.12);
  transition: transform var(--transition-base);
  pointer-events: none;
}

[data-theme="dark"] .pricing-toggle__track {
  background-color: rgba(133, 192, 247, 0.16);
}

.pricing-section.is-annual .pricing-toggle__track {
  transform: translateX(100%);
}

.pricing-toggle__option {
  position: relative;
  display: inline-flex;
}

/* The radios are always clipped out of view (never revealed on focus,
   unlike .visually-hidden-focusable) so the segmented layout never
   shifts; the focus ring is drawn on the adjacent label via
   :focus-visible, and label clicks toggle the native radio. */
.pricing-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pricing-toggle__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  min-height: 2.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
  position: relative;
  z-index: 1;
}

.pricing-section.is-annual .pricing-toggle__label[for="pricing-billing-monthly"],
.pricing-section:not(.is-annual) .pricing-toggle__label[for="pricing-billing-annual"] {
  color: var(--color-muted);
}

.pricing-section.is-annual .pricing-toggle__label[for="pricing-billing-annual"],
.pricing-section:not(.is-annual) .pricing-toggle__label[for="pricing-billing-monthly"] {
  color: var(--primary-600);
}

[data-theme="dark"] .pricing-section.is-annual .pricing-toggle__label[for="pricing-billing-annual"],
[data-theme="dark"] .pricing-section:not(.is-annual) .pricing-toggle__label[for="pricing-billing-monthly"] {
  color: var(--primary-200);
}

.pricing-toggle__input:focus-visible + .pricing-toggle__label {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* ---- Plans grid -------------------------------------------------------------- */

/* Exactly three equal-width cards in one row. align-items stretch keeps
   every card the same height, so names, CTAs and feature lists align. */
.pplans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  align-items: stretch;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
  padding: 0;
  list-style: none;
}

.pplan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* The popular plan: a primary hairline + soft halo + the MOST POPULAR
   pill. No scale change, no price bump — it belongs to the same system. */
.pplan--popular {
  border-color: var(--primary-400);
  box-shadow:
    0 0 0 3px rgba(25, 118, 210, 0.10),
    var(--shadow-md);
}

[data-theme="dark"] .pplan--popular {
  border-color: rgba(133, 192, 247, 0.45);
  box-shadow:
    0 0 0 3px rgba(133, 192, 247, 0.14),
    var(--shadow-md);
}

/* Reserved flag row keeps plan names aligned across cards (only the
   popular card renders the pill; the others keep an empty spacer). */
.pplan__flag {
  margin: 0;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background-color: var(--primary-50);
  color: var(--primary-700);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pplan__flag--empty {
  padding: 0;
  background: transparent;
}

[data-theme="dark"] .pplan__flag {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.pplan__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.pplan__tagline {
  margin: 0;
  min-height: 3.2em; /* keep the price row aligned across cards */
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ---- Price ----------------------------------------------------------------- */

/* Both price blocks share one flow slot; the hidden block is absolutely
   parked at the top-left so the visible block fades in place with no
   layout jump. The visible block always owns the wrapper's height. */
.pplan__price {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pplan-price {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s linear var(--transition-base);
}

/* Inactive period block (cross-faded out, out of flow). */
.pricing-section.is-annual .pplan-price--monthly,
.pricing-section:not(.is-annual) .pplan-price--annual {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
}

.pplan-price__amount {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 1.6vw + 1rem, 2.125rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.pplan-price__period {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Annual mode shows the actual annual price and the saving only — no
   effective monthly figure. */

/* The saving is a quiet badge — the actual amount, never a slogan. */
.pplan-price__save {
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background-color: var(--primary-50);
  color: var(--primary-700);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-theme="dark"] .pplan-price__save {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

/* ---- CTA + features ---------------------------------------------------------- */

.pplan__cta {
  width: 100%;
  margin-top: var(--space-4);
}

/* The feature list is bottom-anchored (margin-top:auto) so cards of
   unequal feature counts still align their lists along the bottom. */
.pplan__list-title {
  margin: auto 0 0;
  padding-top: var(--space-4);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.pplan__features {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One clean row per feature with a hairline separator for fast
   scanning — the check icon reuses the site's Bootstrap icon set. */
.pplan__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-heading);
}

.pplan__feature + .pplan__feature {
  border-top: 1px solid var(--color-border);
}

.pplan__feature .bi {
  margin-top: 3px;
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--primary-500);
  flex-shrink: 0;
}

[data-theme="dark"] .pplan__feature .bi {
  color: var(--primary-300);
}

/* Feature rows that carry a plan-specific value (limits/levels) stack
   the value below the label, indented under it, so the three cards can
   be scanned vertically. Every card lists the full feature set. */
.pplan__feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pplan__feature-value {
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--primary-600);
}

[data-theme="dark"] .pplan__feature-value {
  color: var(--primary-200);
}

/* ---- GST + trust footnote ----------------------------------------------------- */

.pricing-note {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* ---- Responsive ----------------------------------------------------------------- */

/* Tablet: clean 2 + 1 — Starter and Professional side by side, Business
   full-width beneath (keeps the popular plan the visual anchor). */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pplans {
    grid-template-columns: repeat(2, 1fr);
  }

  .pplan:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
  }

  .pplan:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .pplan:nth-child(3) {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Mobile: one card per row, natural order, no horizontal overflow.
   The intro flex drops the toggle onto its own row below the copy. */
@media (max-width: 767.98px) {
  .pplans {
    grid-template-columns: 1fr;
  }
}

/* ---- Reduced motion ---------------------------------------------------------------
   The toggle still switches instantly; the price cross-fade and label
   colour transitions are flattened. */
@media (prefers-reduced-motion: reduce) {
  .pricing-toggle__track,
  .pricing-toggle__label,
  .pplan-price {
    transition: none;
  }
}

/* ==========================================================================
   DOCUMENTATION (Umanar product page)
   Three concise documentation pathways — Getting Started, User Guide,
   Product Reference — as quiet "navigation" cards that reassure visitors
   Umanar comes with structured guidance. Deliberately NOT a portal: the
   topic rows are compact labels (hairline-separated, no bullets) that
   say what the documentation covers.

   Sits between Pricing (white body) and the future Downloads section;
   a calm light band (--color-section) lets it read as an editorial
   rest-stop, distinct from the dark Benefits band and the carousel
   sections. Cards reuse the site's card language (surface + hairline +
   icon plate + shadow-sm) but stay compact: icon, title, one-line
   scope, topic list, bottom-anchored text-arrow CTA. A subtle hover
   elevation is the only motion (no carousel, no marquee).

   Carries the #documentation anchor (product navigation + scroll-spy).
   Reuses the site primitives (.section-eyebrow / .section-title /
   .section-intro) and design tokens only; responsive breakpoints match
   the rest of the site (992 / 768). No FAQ card — FAQs ship later as a
   separate section.
   ========================================================================== */

/* ---- Section surface + intro ----------------------------------------------- */

/* Light alternation against the white Pricing band above. */
.documentation-section {
  background-color: var(--color-section);
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

/* Same condensed eyebrow treatment as the rest of the product page:
   small uppercase label with a leading dot, theme-aware primary colour. */
.documentation-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.documentation-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .documentation-section .section-eyebrow {
  color: var(--primary-300);
}

.documentation-section .section-title {
  margin: 0;
  max-width: 26ch; /* keep the sentence compact; intro must not be tall */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.documentation-section .section-intro {
  max-width: 640px;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Three pathway cards --------------------------------------------------- */

/* Exactly three equal-width cards in one row. align-items stretch keeps
   every card the same height so descriptions, topic lists and CTAs align.
   Tablet widths (768–991.98px) keep the three-column row too — the card
   content is compact and stays readable there; only mobile collapses to
   one card per row. */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  align-items: stretch;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
  padding: 0;
  list-style: none;
}

.doc-card {
  min-width: 0; /* cards must never force horizontal overflow */
}

/* The card surface: subtle elevation + hairline, modest radius. Compact,
   editorial — closer in feel to a menu of pathways than a feature tile. */
.doc-card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* Subtle hover elevation — the card's only motion. */
.doc-card__body:hover {
  transform: translateY(-2px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .doc-card__body:hover {
  border-color: rgba(133, 192, 247, 0.4);
}

/* ---- Card content ---------------------------------------------------------- */

.doc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.375rem;
  flex-shrink: 0;
}

[data-theme="dark"] .doc-card__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.doc-card__title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.doc-card__desc {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* Compact topic list: hairline-separated rows, no bullets, no nesting.
   The CTA is bottom-anchored (margin-top:auto) so every card aligns. */
.doc-card__topics {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.doc-card__topics li {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
}

.doc-card__topics li + li {
  border-top: 1px solid var(--color-border);
}

/* Quiet text-arrow CTA pinned to the bottom edge of each card. */
.doc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-top: auto; /* equal-height cards → aligned CTA row */
  padding-top: var(--space-4);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--primary-600);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-base);
}

[data-theme="dark"] .doc-card__cta {
  color: var(--primary-300);
}

.doc-card__cta:hover,
.doc-card__cta:focus-visible {
  color: var(--primary-800);
}

[data-theme="dark"] .doc-card__cta:hover,
[data-theme="dark"] .doc-card__cta:focus-visible {
  color: var(--primary-200);
}

.doc-card__cta .bi {
  transition: transform var(--transition-base);
}

.doc-card__cta:hover .bi,
.doc-card__cta:focus-visible .bi {
  transform: translateX(3px);
}

/* ---- Responsive ------------------------------------------------------------ */

/* Mobile: one card per row, full available width, no horizontal
   overflow. CTAs remain large enough to tap. (Tablet keeps the three
   columns from the base rule — content stays readable there.) */
@media (max-width: 767.98px) {
  .doc-cards {
    grid-template-columns: 1fr;
  }
}

/* ---- Reduced motion --------------------------------------------------------------
   The JS entrance is skipped entirely; the small hover elevation and
   arrow nudge are flattened so nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .doc-card__body,
  .doc-card__cta,
  .doc-card__cta .bi {
    transition: none;
  }

  .doc-card__body:hover {
    transform: none;
  }
}

/* ==========================================================================
   DOWNLOADS (Umanar product page)
   Platform availability: three equal platforms available now — Windows,
   Android, Web — as minimal "download destination" cards, plus a muted
   secondary cluster for future platforms (Linux, macOS, iPhone).

   Sits between Documentation (light band above) and the future FAQs
   section; a plain body surface keeps the selector clean. Available
   cards reuse the site's card language (surface + hairline + icon
   plate) but stay flatter than Feature/Pricing tiles; the future items
   are dashed, muted pills that never read as download options.

   Reuses the site primitives (.section-eyebrow / .section-title /
   .section-intro) and design tokens only; responsive breakpoints match
   the rest of the site (992 / 768); icons are Bootstrap-icons already
   shipped by the site's icon font. Carries the #downloads anchor
   (product navigation + scroll-spy). No invented URLs, versions, file
   sizes, system requirements or store claims.
   ========================================================================== */

/* ---- Section surface + intro -------------------------------------------------- */

/* Alternates against the Documentation light band: default body surface,
   like the white Pricing band above Documentation. */
.downloads-section {
  background-color: var(--color-body);
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

/* Same condensed eyebrow treatment as the rest of the product page:
   small uppercase label with a leading dot, theme-aware primary colour. */
.downloads-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.downloads-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .downloads-section .section-eyebrow {
  color: var(--primary-300);
}

.downloads-section .section-title {
  margin: 0;
  max-width: 26ch; /* keep the sentence compact; intro must not be tall */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.downloads-section .section-intro {
  max-width: 640px;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Available platform cards -------------------------------------------------- */

/* Exactly three equal cards in one row. align-items stretch keeps every
   card the same height so names, descriptions and CTAs align. Tablet
   widths (768–991.98px) keep the three columns too — the content is
   compact and stays readable there; only mobile collapses to one card
   per row. */
.downloads-plats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  align-items: stretch;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
  padding: 0;
  list-style: none;
}

.downloads-plat {
  min-width: 0; /* cards must never force horizontal overflow */
}

/* Minimal download entry surface: hairline + subtle shadow, modest
   radius, compact padding — flatter and lighter than a pricing tile. */
.downloads-plat__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* Subtle hover elevation — the card's only motion. */
.downloads-plat__body:hover {
  transform: translateY(-2px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .downloads-plat__body:hover {
  border-color: rgba(133, 192, 247, 0.4);
}

/* ---- Card content -------------------------------------------------------------- */

/* Prominent but never oversized platform glyph. */
.downloads-plat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.625rem;
  flex-shrink: 0;
}

[data-theme="dark"] .downloads-plat__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.downloads-plat__name {
  margin: var(--space-4) 0 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.downloads-plat__desc {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* Quiet text-arrow CTA pinned to the bottom edge of each card. */
.downloads-plat__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-top: auto; /* equal-height cards → aligned CTA row */
  padding-top: var(--space-4);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--primary-600);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-base);
}

[data-theme="dark"] .downloads-plat__cta {
  color: var(--primary-300);
}

.downloads-plat__cta:hover,
.downloads-plat__cta:focus-visible {
  color: var(--primary-800);
}

[data-theme="dark"] .downloads-plat__cta:hover,
[data-theme="dark"] .downloads-plat__cta:focus-visible {
  color: var(--primary-200);
}

.downloads-plat__cta .bi {
  transition: transform var(--transition-base);
}

.downloads-plat__cta:hover .bi,
.downloads-plat__cta:focus-visible .bi {
  transform: translateX(3px);
}

/* ---- Future platforms (coming soon) -------------------------------------------- */

/* Quiet subsection separated by a hairline: muted dashed pills that
   carry no download affordance and never compete with the active cards. */
.downloads-soon {
  margin-top: clamp(var(--space-6), 3.5vw, var(--space-7));
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.downloads-soon__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.downloads-soon__label .bi {
  font-size: 1.0625rem;
  color: var(--color-muted);
}

.downloads-soon__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.downloads-soon__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.75rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.downloads-soon__item .bi {
  font-size: 1.0625rem;
  color: var(--color-muted);
}

/* The status label is the explicit "not yet available" signal. */
.downloads-soon__tag {
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---- Responsive ---------------------------------------------------------------- */

/* Mobile: one platform per row, full available width, no horizontal
   overflow. CTAs remain large enough to tap; the coming-soon pills wrap
   compactly. (Tablet keeps the three columns from the base rule —
   content stays readable there.) */
@media (max-width: 767.98px) {
  .downloads-plats {
    grid-template-columns: 1fr;
  }
}

/* ---- Reduced motion ----------------------------------------------------------------
   The JS entrance is skipped entirely; the small hover elevation and
   arrow nudge are flattened so nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .downloads-plat__body,
  .downloads-plat__cta,
  .downloads-plat__cta .bi {
    transition: none;
  }

  .downloads-plat__body:hover {
    transform: none;
  }
}

/* ==========================================================================
   FAQS (Umanar product page)
   Eight confirmed Q&As as a compact, single-open accordion. Each question
   is a full-width horizontal row (question left, plus/dash control right);
   only one answer stays open at a time, and all rows start collapsed to
   match the page's calm interaction style.

   The expand/collapse is CSS-only using the project's grid 0fr → 1fr
   convention (same technique as the mobile product navigation) — smooth,
   no GSAP, and safe under rapid open/close. A quiet GSAP entrance mirrors
   the other product sections (skipped under reduced-motion / no GSAP).

   Centered, width-bounded block so answers stay within a readable line
   length on large screens; single column on every breakpoint. Light,
   restrained treatment: hairline dividers only, no cards, no heavy
   shadows, no numbering.

   Reuses the site tokens (.section-eyebrow / .section-title, borders,
   spacing, Bootstrap-icons) scoped to this section. Carries the #faqs
   anchor (product navigation + scroll-spy) — the page's
   html.page-product scroll-padding keeps the heading clear of the sticky
   header/product-nav stack.
   ========================================================================== */

/* ---- Section surface + centered intro ---------------------------------------------- */

/* Alternates against the Downloads body surface: light band, themed. */
.faqs-section {
  background-color: var(--color-section);
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

/* The intro is centered so the whole block reads as one focused unit. */
.faqs-intro {
  text-align: center;
}

/* Same condensed eyebrow treatment as the rest of the product page:
   small uppercase label with a leading dot, theme-aware primary colour. */
.faqs-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.faqs-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .faqs-section .section-eyebrow {
  color: var(--primary-300);
}

.faqs-section .section-title {
  margin: 0 auto; /* centered, bounded */
  max-width: 24ch; /* keep the sentence compact */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

/* ---- Accordion list --------------------------------------------------------------- */

/* Bounded, centered column: answers stay readable without stretching
   across very large screens. Single column on every breakpoint. */
.faq-list {
  max-width: 800px;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) auto 0;
}

/* Hairline dividers between rows (and a quiet frame at both ends) —
   no cards, no heavy borders. */
.faq-item {
  border-top: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__heading {
  margin: 0;
}

/* The whole row is the trigger: comfortable height, full width,
   question left, plus/dash control right. Real <button>, visible focus
   via the site's global :focus-visible outline. */
.faq-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 56px; /* comfortable touch target */
  padding: var(--space-4) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--color-heading);
  font: inherit;
  border-radius: var(--radius-sm);
}

.faq-item__question {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.45;
  color: var(--color-heading);
  transition: color var(--transition-base);
}

.faq-item__toggle:hover .faq-item__question,
.faq-item__toggle:focus-visible .faq-item__question {
  color: var(--primary-600);
}

[data-theme="dark"] .faq-item__toggle:hover .faq-item__question,
[data-theme="dark"] .faq-item__toggle:focus-visible .faq-item__question {
  color: var(--primary-300);
}

/* ---- Plus / dash control ------------------------------------------------------------
   Both glyphs are stacked; the active one fades in with a subtle rotate
   (plus → dash on open). State is also announced via aria-expanded, so
   colour/icon alone are never the only cue. */
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.faq-item__icon .bi {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--primary-500);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.faq-item__icon .bi-dash {
  opacity: 0;
  transform: rotate(-90deg);
}

.faq-item.is-open .faq-item__icon .bi-plus {
  opacity: 0;
  transform: rotate(90deg);
}

.faq-item.is-open .faq-item__icon .bi-dash {
  opacity: 1;
  transform: rotate(0deg);
}

[data-theme="dark"] .faq-item__icon .bi {
  color: var(--primary-300);
}

/* ---- Answer ------------------------------------------------------------------------ */

/* Grid 0fr → 1fr collapse: the answer slides open smoothly in CSS, so
   rapid open/close can never stack conflicting JS animations. The inner
   wrapper owns min-height:0 + overflow, exactly like the mobile nav's
   accordion bodies. */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
}

.faq-item__answer-inner {
  min-height: 0; /* required for the 0fr collapse trick */
  overflow: hidden;
}

.faq-item__answer-inner p {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5) 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Reduced motion ----------------------------------------------------------------
   The CSS entrance is skipped in JS; row expansion and the icon swap are
   flattened so state changes are instant with no movement. */
@media (prefers-reduced-motion: reduce) {
  .faq-item__answer,
  .faq-item__icon .bi,
  .faq-item__question {
    transition: none;
  }
}

/* ==========================================================================
   UMANAR SUPPORT — SUPPORT OPTIONS (Umanar product page)

   A compact support section between the FAQs band and the planned
   Contact Sales section: three equal, quiet "where to go" cards —
   Documentation, Product Support, Sales Assistance. Each offers an
   icon plate, one-line description and a text-arrow CTA, mirroring the
   Documentation / Downloads card language but compact and light: no
   large artwork, no heavy borders, no strong shadows.

   Carries the #support anchor the product navigation points to (nav
   item + scroll-spy; the page's html.product-page scroll-padding keeps
   the heading clear of the sticky header/product-nav stack).

   Reuses the site tokens (.section-eyebrow / .section-title /
   .section-intro, borders, spacing, Bootstrap-icons) scoped to this
   section. Each card is a CTA-only link: focus and hover are single,
   keyboard-accessible targets with visible focus.

   Destination integrity: every CTA points to a genuine existing route —
   #documentation (same-page section), contact.html (the project's real
   "reach the Umanar team" page, also used by the Hero + Pricing CTAs;
   swap for a dedicated support route when one exists) and #contact-sales
   (existing page-wide anchor). No support portal, ticketing URL, email,
   phone or response-time promise is invented.
   ========================================================================== */

/* ---- Section surface + centered intro ---------------------------------------------- */

/* Alternates against the FAQs band: body surface. */
.support-section {
  background-color: var(--color-body);
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

/* The intro is centered so the block reads as one focused unit. */
.support-intro {
  text-align: center;
}

/* Same condensed eyebrow treatment as the rest of the product page:
   small uppercase label with a leading dot, theme-aware primary colour. */
.support-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.support-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .support-section .section-eyebrow {
  color: var(--primary-300);
}

.support-section .section-title {
  margin: 0 auto; /* centered, bounded */
  max-width: 24ch; /* keep the sentence compact */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.support-section .section-intro {
  max-width: 560px;
  margin: var(--space-4) auto 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- The three support options ------------------------------------------------------- */

/* Exactly three equal cards in one row. align-items stretch keeps every
   card the same height so descriptions and CTAs align. Tablet widths
   (768–991.98px) keep the three columns too — the content is compact and
   stays readable there; only mobile collapses to one card per row. */
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  align-items: stretch;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
  padding: 0;
  list-style: none;
}

.support-option {
  min-width: 0; /* cards must never force horizontal overflow */
}

/* Compact option surface: subtle elevation + hairline, modest radius.
   Lighter than a feature tile — closer to the Downloads platform
   entries. GSAP animates the wrapper (<li>), the hover lift lives on
   this inner body, so the entrance reveal and hover never conflict. */
.support-option__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* Subtle hover elevation — the card's only motion. */
.support-option__body:hover {
  transform: translateY(-2px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .support-option__body:hover {
  border-color: rgba(133, 192, 247, 0.4);
}

.support-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.375rem;
  flex-shrink: 0;
}

[data-theme="dark"] .support-option__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.support-option__title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.support-option__desc {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* Quiet text-arrow CTA pinned to the bottom edge of each card. */
.support-option__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-top: auto; /* equal-height cards → aligned CTA row */
  padding-top: var(--space-4);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--primary-600);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-base);
}

[data-theme="dark"] .support-option__cta {
  color: var(--primary-300);
}

.support-option__cta:hover,
.support-option__cta:focus-visible {
  color: var(--primary-800);
}

[data-theme="dark"] .support-option__cta:hover,
[data-theme="dark"] .support-option__cta:focus-visible {
  color: var(--primary-200);
}

.support-option__cta .bi {
  transition: transform var(--transition-base);
}

.support-option__cta:hover .bi,
.support-option__cta:focus-visible .bi {
  transform: translateX(3px);
}

/* ---- Responsive ------------------------------------------------------------ */

/* Mobile: one card per row, full available width, no horizontal
   overflow. CTAs remain large enough to tap. */
@media (max-width: 767.98px) {
  .support-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Reduced motion --------------------------------------------------------------
   The JS entrance is skipped entirely; the small hover elevation and
   arrow nudge are flattened so nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .support-option__body,
  .support-option__cta,
  .support-option__cta .bi {
    transition: none;
  }

  .support-option__body:hover {
    transform: none;
  }
}

/* ==========================================================================
   33. AI Solutions Overview (ai-solutions.html)
   Right column of #ai-overview: the three-stage approach (Identify ->
   Build -> Integrate) as compact editorial notable points, not cards.
   Each point: small primary number in a fixed left gutter, strong short
   title, one muted supporting line; a hairline vertical connector links
   the numbers to show the progression. Theme-aware (light/dark) and
   content stays readable without JS; main.js adds only a quiet stagger.
   ========================================================================== */

.ai-overview .ai-overview__timeline {
  --ai-point-gap: clamp(3rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--ai-point-gap);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: 0.25rem;
}

.ai-overview .ai-overview__point {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: clamp(0.875rem, 1.5vw, 1.25rem);
  align-items: start;
}

/* Hairline progression connector: runs from just under each number
   down through the gap to just above the next number. Hidden for the
   last point. */
.ai-overview .ai-overview__point:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 1.625rem;
  bottom: calc(4px - var(--ai-point-gap));
  width: 1px;
  background-color: var(--color-border);
  transition: background-color var(--transition-fast);
}

.ai-overview .ai-overview__num {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 1.75rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--primary-500);
  transition: color var(--transition-fast);
}

[data-theme="dark"] .ai-overview .ai-overview__num {
  color: var(--primary-300);
}

.ai-overview .ai-overview__point h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(0.9375rem, 0.35vw + 0.85rem, 1.0625rem);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-heading);
  transition: transform var(--transition-fast);
}

.ai-overview .ai-overview__point p {
  grid-column: 2;
  grid-row: 2;
  max-width: 44ch;
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* Restrained hover: the number firms up, the title nudges right, the
   connector deepens. Static content, so this is a surface cue only. */
@media (hover: hover) {
  .ai-overview .ai-overview__point:hover .ai-overview__num {
    color: var(--primary-700);
  }

  [data-theme="dark"] .ai-overview .ai-overview__point:hover .ai-overview__num {
    color: var(--primary-200);
  }

  .ai-overview .ai-overview__point:hover h3 {
    transform: translateX(3px);
  }

  .ai-overview .ai-overview__point:not(:last-child):hover::before {
    background-color: var(--primary-400);
  }
}

/* Reduced motion: no nudges, no colour transitions. */
@media (prefers-reduced-motion: reduce) {
  .ai-overview .ai-overview__num,
  .ai-overview .ai-overview__point h3,
  .ai-overview .ai-overview__point:not(:last-child)::before {
    transition: none;
  }

  .ai-overview .ai-overview__point:hover h3 {
    transform: none;
  }
}

/* ==========================================================================
   34. AI Solutions Capabilities (ai-solutions.html) — #ai-capabilities
   Full-width editorial grid of the seven AI capabilities. Deliberately
   distinct from the Hero (split) and the Overview (numbered two-column
   timeline): icon-led blocks separated by hairline rules, no card chrome.
   The featured "Custom AI Solutions" spans both columns. Reuses the site
   primitives (.section-eyebrow / .section-title / .section-intro), design
   tokens and Bootstrap Icons only; theme-aware (light/dark) and fully
   readable without JS (main.js adds only a quiet stagger).
   ========================================================================== */

.ai-capabilities {
  background-color: var(--color-section);
}

/* ---- Intro (eyebrow -> heading -> description) ------------------------- */
.ai-capabilities__header {
  max-width: 46rem;
}

.ai-capabilities .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.ai-capabilities .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .ai-capabilities .section-eyebrow {
  color: var(--primary-300);
}

.ai-capabilities .section-title {
  margin: 0;
  max-width: 22ch; /* keep the headline to a compact two lines */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.ai-capabilities .section-intro {
  max-width: 62ch;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Editorial grid --------------------------------------------------- */
/* One column on phones; two from tablet up with the featured capability
   spanning the full width. Hairline top rules (not cards) provide the
   restrained separation; the first row's rule doubles as the grid's top
   edge, so no border is drawn on the grid itself. */
.ai-capabilities__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: 0;
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
}

.ai-capabilities__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  padding: clamp(var(--space-5), 3vw, var(--space-6)) 0;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .ai-capabilities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-capabilities__item {
    padding: clamp(var(--space-5), 2.5vw, var(--space-6)) clamp(1.5rem, 3vw, 2.5rem);
  }

  /* The featured capability runs edge to edge across both columns. */
  .ai-capabilities__item--featured {
    grid-column: 1 / -1;
  }
}

/* ---- Item internals --------------------------------------------------- */
.ai-capabilities__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem; /* ~22px, matches the site's icon scale */
  line-height: 1;
  color: var(--primary-500);
  transition: color var(--transition-fast);
}

[data-theme="dark"] .ai-capabilities__icon {
  color: var(--primary-300);
}

.ai-capabilities__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  transition: color var(--transition-fast);
}

.ai-capabilities__description {
  max-width: 52ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
  overflow-wrap: break-word;
}

/* ---- Restrained hover: surface cue only, dimensions stay fixed -------- */
@media (hover: hover) {
  .ai-capabilities__item:hover .ai-capabilities__icon {
    color: var(--primary-700);
  }

  .ai-capabilities__item:hover .ai-capabilities__title {
    color: var(--primary-600);
  }

  [data-theme="dark"] .ai-capabilities__item:hover .ai-capabilities__icon {
    color: var(--primary-200);
  }

  [data-theme="dark"] .ai-capabilities__item:hover .ai-capabilities__title {
    color: var(--primary-300);
  }
}

/* ---- Reduced motion: no colour transitions ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ai-capabilities__icon,
  .ai-capabilities__title {
    transition: none;
  }
}

/* ---- "Read More" CTA: compact text link with a directional arrow ------ */
.ai-capabilities__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--space-1);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  color: var(--primary-500);
  transition: color var(--transition-fast);
}

.ai-capabilities__cta .bi {
  font-size: 0.9375em;
  transition: transform var(--transition-fast);
}

.ai-capabilities__cta:hover {
  color: var(--primary-600);
}

.ai-capabilities__cta:hover .bi {
  transform: translateX(3px);
}

.ai-capabilities__cta:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

[data-theme="dark"] .ai-capabilities__cta {
  color: var(--primary-300);
}

[data-theme="dark"] .ai-capabilities__cta:hover {
  color: var(--primary-200);
}

@media (prefers-reduced-motion: reduce) {
  .ai-capabilities__cta,
  .ai-capabilities__cta .bi {
    transition: none;
  }

  .ai-capabilities__cta:hover .bi {
    transform: none;
  }
}

/* ==========================================================================
   35. AI Capability Detail Dialog (ai-solutions.html) — #capability-modal
   One reusable native <dialog> populated from the capability data in
   js/main.js. Compact and centred; image LEFT / content RIGHT on desktop,
   stacked on mobile. Intentionally dark in BOTH themes, reusing the scoped
   dark tokens and grid/glow treatment of the homepage dark sections
   (.company-highlights-section, .sc-showcase) so it feels native to the site.
   ========================================================================== */

.cap-modal {
  /* Scoped dark band tokens — always dark, not global theme tokens. */
  --cap-bg: #07284D;
  --cap-heading: #F8FAFC;
  --cap-text: #CBD5E1;
  --cap-border: rgba(248, 250, 252, 0.14);
  --cap-surface: rgba(248, 250, 252, 0.06);
  --cap-grid-line: rgba(248, 250, 252, 0.05);
  --cap-glow: rgba(51, 153, 255, 0.14);

  width: min(720px, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--cap-text);
  border: 1px solid var(--cap-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  /* Restrained engineering grid + one soft accent glow, as on the homepage. */
  background-color: var(--cap-bg);
  background-image:
    linear-gradient(var(--cap-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cap-grid-line) 1px, transparent 1px),
    radial-gradient(60% 80% at 100% 0%, var(--cap-glow), transparent 70%);
  background-size: 44px 44px, 44px 44px, auto;
}

[data-theme="dark"] .cap-modal {
  --cap-bg: #161B22;
  --cap-grid-line: rgba(148, 163, 184, 0.06);
  --cap-glow: rgba(51, 153, 255, 0.10);
}

/* Restrained backdrop so the page reads behind the compact dialog. */
.cap-modal::backdrop {
  background-color: rgba(4, 12, 24, 0.62);
}

.cap-modal__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 1.75rem);
  max-height: inherit;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.cap-modal__close {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.25rem);
  right: clamp(1rem, 2.5vw, 1.25rem);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(248, 250, 252, 0.24);
  border-radius: var(--radius-pill);
  /* Small dark chip: legible over both the dark surface and the image. */
  background-color: rgba(7, 40, 77, 0.68);
  color: var(--cap-heading);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.cap-modal__close:hover {
  background-color: rgba(7, 40, 77, 0.95);
  border-color: rgba(248, 250, 252, 0.5);
}

.cap-modal__close:focus-visible {
  outline: 2px solid #3399FF;
  outline-offset: 2px;
}

.cap-modal__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background-color: var(--cap-surface);
}

.cap-modal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Neutral fallback shown if a temporary image fails to load. */
.cap-modal__img--fallback {
  object-fit: contain;
  padding: var(--space-6);
}

.cap-modal__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
}

.cap-modal__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cap-heading);
}

.cap-modal__desc {
  margin: 0 0 var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--cap-text);
}

.cap-modal__cta {
  align-self: flex-start;
}

/* Desktop / tablet: image LEFT (≈42%), content RIGHT (≈58%). Text is
   vertically centred against the image; the body scrolls only if a
   description genuinely exceeds the available height. */
@media (min-width: 768px) {
  .cap-modal__inner {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .cap-modal__media {
    align-self: start;
    aspect-ratio: 4 / 5;
  }

  .cap-modal__body {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cap-modal__close {
    transition: none;
  }
}

/* ==========================================================================
   36. AI Solutions Business Challenges (ai-solutions.html) — #ai-challenges
   Full-width dark band: a horizontal slider of the eight business challenges
   (native, dependency-free scroll-snap rail centred on the active card) plus
   a distinct closing "Our Approach" statement and one primary CTA.
   Intentionally dark in BOTH themes, reusing the scoped dark tokens and
   grid/glow treatment of the homepage dark sections. Not an info grid.
   ========================================================================== */

.ai-challenges {
  /* Scoped dark band tokens — always dark, not global theme tokens. */
  --ch-bg: #07284D;
  --ch-heading: #F8FAFC;
  --ch-text: #CBD5E1;
  --ch-muted: #94A3B8;
  --ch-accent: #3399FF;
  --ch-border: rgba(248, 250, 252, 0.14);
  --ch-surface: rgba(248, 250, 252, 0.05);
  --ch-grid-line: rgba(248, 250, 252, 0.05);
  --ch-glow: rgba(51, 153, 255, 0.14);
  --ch-card-w: min(84vw, 320px);
  --ch-gap: clamp(1rem, 2.5vw, 1.5rem);

  position: relative;
  overflow: hidden;
  background-color: var(--ch-bg);
  color: var(--ch-text);
}

/* Structured engineering grid + one soft accent glow, as on the homepage. */
.ai-challenges::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ch-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ch-grid-line) 1px, transparent 1px),
    radial-gradient(55% 60% at 100% 0%, var(--ch-glow), transparent 70%);
  background-size: 44px 44px, 44px 44px, auto;
  pointer-events: none;
}

.ai-challenges > * {
  position: relative;
}

[data-theme="dark"] .ai-challenges {
  --ch-bg: #161B22;
  --ch-grid-line: rgba(148, 163, 184, 0.06);
  --ch-glow: rgba(51, 153, 255, 0.10);
}

/* ---- Intro (eyebrow -> heading -> description) ------------------------- */
.ai-challenges__header {
  max-width: 48rem;
}

.ai-challenges .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ch-accent);
}

.ai-challenges .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  flex-shrink: 0;
}

.ai-challenges .section-title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ch-heading);
}

.ai-challenges__intro {
  max-width: 62ch;
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ch-text);
}

/* ---- Slider ----------------------------------------------------------- */
.ai-challenges__slider {
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
}

.ai-challenges__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  /* Hidden scrollbar: navigation is via the controls, keyboard and touch. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ai-challenges__viewport::-webkit-scrollbar {
  display: none;
}

.ai-challenges__viewport:focus-visible {
  outline: 2px solid var(--ch-accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.ai-challenges__track {
  display: flex;
  gap: var(--ch-gap);
  margin: 0;
  /* Centre-mode padding: lets the first and last card sit at the centre with
     neighbouring cards peeking either side, so all eight stops differ. */
  padding: 0 calc(50% - (var(--ch-card-w) / 2));
  list-style: none;
}

/* Carousel mode: once JS runs it adds .is-carousel and drives a transform
   instead of native scrolling. The viewport clips the track; touch-action
   "pan-y" keeps vertical page scrolling native and blocks horizontal
   dragging. The centre padding above is retained so the translated track
   still lands the active card dead-centre. Duration matches SLIDE_MS. */
.ai-challenges.is-carousel .ai-challenges__viewport {
  overflow: hidden;
  scroll-snap-type: none;
  overscroll-behavior: none;
  touch-action: pan-y;
}

.ai-challenges.is-carousel .ai-challenges__track {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Clones are inert copies (aria-hidden, no ids) that only fill the loop
   seam; they must not intercept pointer input. */
.ai-challenges__card--clone {
  pointer-events: none;
}

.ai-challenges__card {
  position: relative;
  flex: 0 0 auto;
  width: var(--ch-card-w);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--ch-border);
  border-radius: var(--radius-lg);
  background-color: var(--ch-surface);
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base);
}

/* Active emphasis: accent top bar + accent border + brighter surface.
   Communicates state through shape/border as well as colour. */
.ai-challenges__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-color: var(--ch-accent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.ai-challenges__card.is-active {
  border-color: rgba(51, 153, 255, 0.55);
  background-color: rgba(51, 153, 255, 0.10);
}

.ai-challenges__card.is-active::before {
  opacity: 1;
}

.ai-challenges__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background-color: rgba(51, 153, 255, 0.12);
  color: var(--ch-accent);
  font-size: 1.5rem;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.ai-challenges__card.is-active .ai-challenges__icon {
  background-color: var(--ch-accent);
  color: #FFFFFF;
}

.ai-challenges__card-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--ch-heading);
}

.ai-challenges__card-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ch-text);
}

/* ---- Controls --------------------------------------------------------- */
.ai-challenges__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

.ai-challenges__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--ch-border);
  border-radius: var(--radius-pill);
  background-color: var(--ch-surface);
  color: var(--ch-heading);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    opacity var(--transition-base);
}

.ai-challenges__arrow:hover:not(:disabled) {
  background-color: var(--ch-accent);
  border-color: var(--ch-accent);
  color: #FFFFFF;
}

.ai-challenges__arrow:focus-visible {
  outline: 2px solid var(--ch-accent);
  outline-offset: 3px;
}

.ai-challenges__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ai-challenges__count {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--ch-heading);
  font-variant-numeric: tabular-nums;
}

.ai-challenges__count-sep {
  color: var(--ch-muted);
}

/* ---- Closing statement ------------------------------------------------ */
.ai-challenges__closing {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: clamp(var(--space-8), 6vw, 5rem);
  padding-top: clamp(var(--space-6), 4vw, var(--space-8));
  border-top: 1px solid var(--ch-border);
}

.ai-challenges__closing-title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ch-heading);
}

.ai-challenges__closing-desc {
  max-width: 60ch;
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ch-text);
}

.ai-challenges__cta {
  align-self: flex-start;
}

/* ---- Responsive ------------------------------------------------------- */
@media (min-width: 576px) {
  .ai-challenges {
    --ch-card-w: min(58vw, 340px);
  }
}

@media (min-width: 992px) {
  .ai-challenges {
    --ch-card-w: 360px;
  }
}

@media (min-width: 992px) {
  .ai-challenges__closing {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(var(--space-6), 4vw, 4rem);
  }

  .ai-challenges__closing-text {
    max-width: 60ch;
  }

  .ai-challenges__cta {
    margin-top: 0;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-challenges__card,
  .ai-challenges__card::before,
  .ai-challenges__icon,
  .ai-challenges__arrow {
    transition: none;
  }

  .ai-challenges.is-carousel .ai-challenges__track {
    transition: none;
  }
}

/* ==========================================================================
   37. AI Solutions How We Work (ai-solutions.html) — #ai-process
   Editorial process strip that contrasts with the dark Business Challenges
   section above. Four stages form a connected horizontal process on wide
   screens and collapse to a vertical progression with a hairline rail on
   narrow screens. Stage number + line icon sit on the connector axis,
   titles in Sora, descriptions in muted Inter. The section is theme-aware:
   light mode sits on the neutral-50 surface, dark mode re-maps the --hw-*
   tokens onto the theme surface/text tokens (section 42, "Normal AI
   sections"); icons/numbers use the primary brand blue (brightened to
   primary-300 in dark). GSAP adds only a quiet once-only reveal (skipped
   under reduced motion or without JS). No interactive controls.
   ========================================================================== */

/* Neutral-scale palette (provides the LIGHT values). The dark theme re-maps
   these --hw-* tokens onto the theme surface/text tokens so the section
   acts as a normal theme-aware band (section 42, "Normal AI sections")
   instead of a forced light island. */
.ai-process {
  --hw-bg: var(--neutral-50);
  --hw-heading: var(--neutral-900);
  --hw-text: var(--neutral-600);
  --hw-muted: var(--neutral-500);
  --hw-border: var(--neutral-200);
  --hw-rail: var(--neutral-300);

  /* Stage geometry (same values across themes) */
  --step-icon-size: 2.5rem;   /* ring diameter */
  --step-mark-w: 3.9rem;      /* mobile gutter column (num + icon) */
  --step-mark-c: 2.6rem;      /* mobile connector: icon centre from stage left */
  --step-gap-v: clamp(1.75rem, 5vw, 2.5rem);
  --step-gap-h: clamp(1.5rem, 2.5vw, 2.5rem);

  background-color: var(--hw-bg);
  color: var(--hw-text);
}

/* ---- Intro (eyebrow -> heading -> description) ------------------------- */
.ai-process__header {
  max-width: 46rem;
}

.ai-process .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.ai-process .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-500);
  flex-shrink: 0;
}

.ai-process .section-title {
  margin: 0;
  max-width: 24ch; /* keep the headline to a compact two lines */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--hw-heading);
}

.ai-process__intro {
  max-width: 62ch;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--hw-text);
}

/* ---- Process list (vertical rail on narrow -> 4-up on wide) ------------ */

/* One column below 992px: each stage is a two-cell row (marker gutter +
   body), so the number and icon sit beside the stage content. The stage
   anchors the hairline connectors that run between the markers. */
.ai-process__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--step-gap-v);
  margin: clamp(var(--space-6), 4vw, var(--space-8)) 0 0;
  padding: 0;
  list-style: none;
}

.ai-process__stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--step-mark-w) minmax(0, 1fr);
  column-gap: clamp(0.875rem, 2vw, 1.25rem);
  align-items: start;
}

.ai-process__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ai-process__num {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--primary-500);
}

.ai-process__icon {
  position: relative; /* stacking above the connector overlaps */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--step-icon-size);
  height: var(--step-icon-size);
  border: 1px solid var(--hw-border);
  border-radius: var(--radius-pill);
  background-color: var(--hw-bg); /* masks the rail tucking under the ring */
  color: var(--primary-500);
  font-size: 1.0625rem;
  line-height: 1;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ai-process__body {
  min-width: 0; /* let long headings wrap inside the cell */
}

.ai-process__title {
  margin: 0.125rem 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--hw-heading);
}

.ai-process__desc {
  max-width: 44ch;
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hw-text);
}

/* Vertical connector: runs from the icon centre down through the stage,
   over the row gap and stops just short of the next marker. Anchored to
   the stage (not the icon) so it stays aligned regardless of how much
   body text a stage holds. */
.ai-process__stage:not(:last-child)::before {
  content: "";
  position: absolute;
  left: var(--step-mark-c);
  top: calc(var(--step-icon-size) / 2);
  bottom: calc(6px - var(--step-gap-v));
  width: 1px;
  background-color: var(--hw-rail);
}

/* ---- Desktop: four connected stages ------------------------------------ */
@media (min-width: 992px) {
  .ai-process__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--step-gap-h);
    row-gap: 0;
  }

  .ai-process__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ai-process__desc {
    margin-right: auto;
    margin-left: auto;
  }

  /* Replace the vertical connector with a horizontal one at ring height:
     from this ring's right edge (tucked 1px under it) across the column
     gap and up to the next ring's left edge. The rings sit above it
     (z-index 1) so the seam overlaps cleanly. */
  .ai-process__stage:not(:last-child)::before {
    display: none;
  }

  .ai-process__stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--step-icon-size) / 2);
    left: calc(50% + calc(var(--step-icon-size) / 2) - 1px);
    width: calc(100% + var(--step-gap-h) - var(--step-icon-size) + 2px);
    height: 1px;
    background-color: var(--hw-rail);
  }
}

/* ---- Restrained hover: surface cue only -------------------------------- */
@media (hover: hover) {
  .ai-process__stage:hover .ai-process__icon {
    color: var(--primary-700);
    border-color: var(--primary-300);
  }
}

/* ---- Reduced motion: no colour transitions ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ai-process__icon,
  .ai-process__stage:hover .ai-process__icon {
    transition: none;
  }
}

/* ==========================================================================
   38. AI Solutions AI in Practice (ai-solutions.html) — #ai-practice
   Light editorial showcase of four practical AI application areas. Follows
   the How We Work light-island treatment (neutral scale, brand-blue
   accents) so it contrasts with the dark Business Challenges section while
   staying distinct from the numbered four-stage process: here a number is
   a small overline above each title, and each item leads with a
   4:3 landscape image in a hairline-bordered frame (no card chrome).
   Theme-aware via the --color-section-alt tokens (section 42): pinned
   light-island palette in light mode, blued-slate panel in dark. GSAP adds
   only a quiet once-only reveal; broken images swap to a neutral inline-SVG
   placeholder via initAiPractice().
   ========================================================================== */

/* Match the How We Work light-island palette (neutral scale is valid in
   both themes), with a touch more inner padding for the media-led cards. */
.ai-practice {
  --hw-bg: var(--neutral-50);
  --hw-heading: var(--neutral-900);
  --hw-text: var(--neutral-600);
  --hw-muted: var(--neutral-500);
  --hw-border: var(--neutral-200);

  background-color: var(--hw-bg);
  color: var(--hw-text);
}

/* ---- Intro (eyebrow -> heading -> description) ------------------------- */
.ai-practice__header {
  max-width: 46rem;
}

.ai-practice .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.ai-practice .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-500);
  flex-shrink: 0;
}

.ai-practice .section-title {
  margin: 0;
  max-width: 22ch; /* keep the headline to a compact two lines */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--hw-heading);
}

.ai-practice__intro {
  max-width: 62ch;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--hw-text);
}

/* ---- Practice grid (1 / 2 / 4 columns) --------------------------------- */
.ai-practice__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 2rem);
  row-gap: clamp(2rem, 4vw, 3rem);
  margin: clamp(var(--space-6), 4vw, var(--space-8)) 0 0;
}

@media (min-width: 768px) {
  .ai-practice__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .ai-practice__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .ai-practice__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ai-practice__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- Media ------------------------------------------------------------- */
/* Consistent 4:3 landscape frame for every image. The frame reserves space
   (aspect-ratio) before the photo arrives, so no layout shift; a neutral
   background sits behind the photo and shows if it is missing. */
.ai-practice__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hw-border);
  border-radius: var(--radius-md);
  background-color: var(--neutral-100);
}

.ai-practice__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback surface used while script swaps in the inline-SVG placeholder. */
.ai-practice__media--empty {
  border-style: dashed;
}

/* ---- Item internals ---------------------------------------------------- */
.ai-practice__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--space-4);
}

.ai-practice__tag {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--primary-500);
}

.ai-practice__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--hw-heading);
}

.ai-practice__desc {
  max-width: 44ch;
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hw-text);
}

/* ==========================================================================
   39. AI Solutions Industries We Serve (ai-solutions.html) — #ai-industries
   Minimal, self-scrolling industry marquee. A hairline-edged band houses a
   CSS keyframed track: the eight industries render twice — two
   geometrically identical <ul> groups — and the track animates translateX
   to -50%, which is exactly one group's width, so the loop is seamless
   with no blank gaps. Duplicated group is aria-hidden, so names are
   announced once. Hover and keyboard focus pause the animation;
   prefers-reduced-motion replaces the moving strip with a static wrapped
   list (the mirror group is hidden). Pure CSS, no JS.
   ========================================================================== */

/* Neutral-scale palette providing the LIGHT values. The dark theme re-maps
   the --iw-* tokens onto the theme surface/text tokens so the section acts
   as a normal theme-aware band (section 42, "Normal AI sections"). */
.ai-industries {
  --iw-bg: var(--neutral-50);
  --iw-band: var(--neutral-100);
  --iw-border: var(--neutral-200);
  --iw-heading: var(--neutral-900);
  --iw-name: var(--neutral-800);
  --iw-item-gap: clamp(1.75rem, 3vw, 2.5rem);

  background-color: var(--iw-bg);
}

/* ---- Intro (eyebrow -> heading -> description) ------------------------- */
.ai-industries__header {
  max-width: 46rem;
}

.ai-industries .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.ai-industries .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-500);
  flex-shrink: 0;
}

.ai-industries .section-title {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--iw-heading);
}

.ai-industries__intro {
  max-width: 62ch;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--neutral-600);
}

/* ---- Marquee band ------------------------------------------------------ */
.ai-industries__marquee {
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
  padding: clamp(1rem, 1.6vw, 1.5rem) 0;
  border-top: 1px solid var(--iw-border);
  border-bottom: 1px solid var(--iw-border);
  background-color: var(--iw-band);
  overflow: hidden; /* clips the moving strip; no page overflow */
}

/* ---- Track & seamless loop --------------------------------------------- */
/* The track is the two full groups side by side (width: max-content).
   Each item carries its own trailing margin (--iw-item-gap), so every
   group's span is exactly 8 * (item + gap) — identical for both groups.
   translateX(-50%) therefore shifts by precisely one group's width, and
   the end-frame pixel-matches the start-frame. */
.ai-industries__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  animation: ai-industries-marquee 36s linear infinite;
  will-change: transform;
}

@keyframes ai-industries-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Keyboard users can focus the strip; visible outline keeps the target
   obvious and doubles as the pause interaction for focus. */
.ai-industries__track:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

/* ---- Groups & items ---------------------------------------------------- */
.ai-industries__group {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-industries__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--iw-item-gap);
  white-space: nowrap; /* each item stays one unit inside the moving strip */
}

.ai-industries__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem; /* matches the site's icon scale */
  line-height: 1;
  color: var(--primary-500);
}

.ai-industries__name {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--iw-name);
}

/* ---- Pause on pointer hover or keyboard focus -------------------------- */
.ai-industries__marquee:hover .ai-industries__track,
.ai-industries__marquee:focus-within .ai-industries__track {
  animation-play-state: paused;
}

/* ---- Reduced motion: static wrapped list ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ai-industries__track {
    animation: none;
    width: 100%;
  }

  .ai-industries__group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: clamp(0.75rem, 2vw, 1.25rem);
    width: 100%;
  }

  /* The mirror copy is never shown when motion is off. */
  .ai-industries__group[aria-hidden="true"] {
    display: none;
  }

  .ai-industries__item {
    white-space: normal;
    margin-right: clamp(0.75rem, 1.5vw, 1.25rem);
    text-align: left;
  }
}

/* ==========================================================================
   40. AI Solutions Why 05 IT Solutions + FAQ (ai-solutions.html) — #ai-why
   Final substantive block before the footer: a clean, light, two-column
   section. Why 05 IT Solutions (four compact icon-led rows, ~40%) sits
   left; Frequently Asked Questions (~60%) sits right — stacked Why-first
   below 992px. Reuses the site's existing .faq-item accordion component
   (hairline dividers, plus/dash control, CSS grid collapse) with the need
   for multiple answers open at once handled in initAiFaq(). Light-island
   neutral palette like sections 37–39, so it stays a light band in both
   themes; the FAQ text/border colours are re-pinned to that palette so
   answers read correctly under the dark-theme .faq-item rules.
   ========================================================================== */

/* ---- Section surface + light-island palette --------------------------- */
/* Neutral scale is valid in both themes; color/border/heading/text tokens
   are pinned to it so the section reads as a light band regardless of
   the active theme (matching How We Work / AI in Practice / Industries). */
.ai-why {
  --aiw-bg: var(--neutral-50);
  --aiw-heading: var(--neutral-900);
  --aiw-text: var(--neutral-600);
  --aiw-border: var(--neutral-200);

  background-color: var(--aiw-bg);
  color: var(--aiw-text);
}

/* ---- Eyebrow / heading / intro ---------------------------------------- */
/* Same condensed eyebrow and Sora title treatment as the other
   AI-solutions sections. */
.ai-why .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.ai-why .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-500);
  flex-shrink: 0;
}

.ai-why .section-title {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--aiw-heading);
}

.ai-why__intro {
  max-width: 56ch;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--aiw-text);
}

/* ---- Two-column layout (40 / 60) -------------------------------------- */
/* Single column by default (mobile / tablet); side by side from 992px.
   Columns stay top-aligned; the FAQ column gets the larger share so
   longer questions wrap comfortably. */
.ai-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(var(--space-8), 6vw, var(--space-10));
}

@media (min-width: 992px) {
  .ai-why__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    row-gap: 0;
    align-items: start;
  }
}

/* ---- Why 05 IT Solutions: compact icon-led rows ----------------------- */
/* Hairline top/bottom dividers frame the list; rows are a quiet icon +
   text layout — no cards, no plates, no individual CTAs. */
.ai-why__list {
  margin: clamp(var(--space-6), 4vw, var(--space-7)) 0 0;
  padding: 0;
  list-style: none;
}

.ai-why__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--aiw-border);
}

.ai-why__item:last-child {
  border-bottom: 1px solid var(--aiw-border);
}

.ai-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--primary-500);
}

.ai-why__body {
  min-width: 0;
}

.ai-why__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--aiw-heading);
}

.ai-why__desc {
  max-width: 48ch;
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--aiw-text);
}

/* ---- FAQ column -------------------------------------------------------- */
/* Reuses the site .faq-item accordion classes (grid 0fr→1fr collapse,
   plus/dash control). The wrapper is unbounded so rows span the wider
   right column; question/answer colours are re-pinned to the light-island
   palette so they stay readable in both themes. */
.ai-why__faq {
  min-width: 0;
}

.ai-faq-list {
  margin: clamp(var(--space-5), 3vw, var(--space-6)) 0 0;
}

.ai-why .faq-item {
  border-color: var(--aiw-border);
}

.ai-why .faq-item:last-child {
  border-bottom-color: var(--aiw-border);
}

.ai-why .faq-item__toggle,
.ai-why .faq-item__question {
  color: var(--aiw-heading);
}

.ai-why .faq-item__toggle:hover .faq-item__question,
.ai-why .faq-item__toggle:focus-visible .faq-item__question {
  color: var(--primary-600);
}

.ai-why .faq-item__icon .bi {
  color: var(--primary-500);
}

.ai-why .faq-item__answer-inner p {
  color: var(--aiw-text);
}

/* ==========================================================================
   41. AI Solutions Final CTA card (ai-solutions.html) — #final-cta
   Closing conversion block. Unlike the homepage .final-cta (a full-width
   light/dark band), this one is a centred DARK rounded card floating on
   the normal page background — the body surface stays visible around all
   four sides, and no full-width band is created. Reuses the established
   dark "company highlight" language (navy #07284D in the light theme,
   slate #161B22 in the dark theme, fine 44px grid + soft radial glow, no
   cards/shadows) together with the existing .final-cta typography, the
   site-btn CTA and the shared initFinalCta() reveal. The <section> itself
   is transparent and only supplies generous external spacing on every
   breakpoint, so the card is separated from the sections above it and
   from the dark footer below.
   ========================================================================== */

/* ---- Section surface: transparent + generous external spacing -------- */
/* The base .final-cta rules (full-width pale band) are reset to nothing;
   this override appears later in the cascade so it wins at every width. */
.final-cta--card {
  --cta-card-bg: #07284D;
  --cta-card-heading: #F8FAFC;
  --cta-card-text: #CBD5E1;
  --cta-card-accent: #3399FF;
  --cta-card-grid: rgba(248, 250, 252, 0.05);
  --cta-card-glow: rgba(51, 153, 255, 0.16);
  --cta-card-edge: rgba(248, 250, 252, 0.14);

  background-color: transparent;
  padding-block: clamp(var(--space-7), 5vw, var(--space-9));
}

[data-theme="dark"] .final-cta--card {
  --cta-card-bg: #161B22;
  --cta-card-grid: rgba(148, 163, 184, 0.06);
  --cta-card-glow: rgba(51, 153, 255, 0.12);
}

/* ---- The rounded card -------------------------------------------------- */
/* Dark surface held within the page content width (.container), rounded
   and hairline-edged so it reads as a contained invitation. overflow:hidden
   clips the decorative pattern to the rounded corners. */
.final-cta__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.25rem);
  border: 1px solid var(--cta-card-edge);
  border-radius: var(--radius-xl);
  background-color: var(--cta-card-bg);
  color: var(--cta-card-text);
}

/* Structured background: fine engineering grid + soft radial lighting,
   ~5% prominence so the content always reads first. Purely decorative. */
.final-cta__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--cta-card-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cta-card-grid) 1px, transparent 1px),
    radial-gradient(46% 62% at 50% 0%, var(--cta-card-glow), transparent 70%);
  background-size: 44px 44px, 44px 44px, auto;
  pointer-events: none;
}

/* ---- Keep typography above the pattern layer --------------------------- */
.final-cta__card > * {
  position: relative;
}

.final-cta--card .final-cta__eyebrow {
  color: var(--cta-card-accent);
}

.final-cta--card .final-cta__eyebrow::before {
  background-color: var(--cta-card-accent);
}

.final-cta--card .final-cta__heading {
  max-width: 640px;
  color: var(--cta-card-heading);
}

.final-cta--card .final-cta__desc {
  color: var(--cta-card-text);
}

/* ---- Supporting note below the CTA ------------------------------------- */
.final-cta__note {
  margin: clamp(1rem, 2vw, 1.25rem) 0 0;
  max-width: 46ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--cta-card-text);
}

/* ---- Responsive: mobile ------------------------------------------------- */
@media (max-width: 767.98px) {
  .final-cta--card {
    padding-block: clamp(2.5rem, 8vw, 3.5rem);
  }

  .final-cta__card {
    padding: clamp(2.25rem, 9vw, 3.25rem) clamp(1.25rem, 6vw, 2rem);
  }
}

/* ==========================================================================
   42. AI Solutions page refinement (ai-solutions.html)
   Post-build polish pass scoped to the AI page only:
     1. Consistent, tighter vertical cadence (~20%): the AI sections inherit
        their block padding from the shared .section rules (60/80/120px);
        re-declaring the per-breakpoint spacing custom properties on the
        section elements steps every AI band down to 48/64/96px without
        touching the global tokens used by other pages. The hero keeps its
        prominence but stops floating above the overview, and the various
        "intro -> content" gaps are trimmed to the space-5/space-6 scale.
     2. primary-50 alternate bands (Capabilities, AI in Practice, Why+FAQ)
        to break up consecutive light sections — now theme-aware through the
        semantic --color-section-alt tokens (section 02). Light mode keeps
        the pinned primary-50 wash with deep neutral text and primary-700
        accents (rendering is unchanged); dark mode swaps in a blued-slate
        panel (#213050) with the theme's light text tokens and primary-300
        accents. No gradients, no changes to the dark Challenges band, the
        rounded CTA or other pages.
     3. ai-process and ai-industries act as normal theme-aware sections
        instead of forced neutral-50 light islands: the dark theme re-maps
        their --hw-* / --iw-* surface + foreground tokens to --color-section
        and the theme text tokens, and brightens eyebrows/icons to
        primary-300. Light mode is unchanged.
   ========================================================================== */

/* ---- 1) Consistent section cadence (~20% reduction) --------------------- */
.section.ai-overview,
.section.ai-capabilities,
.section.ai-challenges,
.section.ai-process,
.section.ai-practice,
.section.ai-industries,
.section.ai-why {
  --section-spacing-mobile: 48px;   /* was 60px  */
  --section-spacing-tablet: 64px;   /* was 80px  */
  --section-spacing-desktop: 96px;  /* was 120px */
}

/* Hero: keep it visually prominent but remove the excess air below it
   (the shared .hero-section bottom padding could reach 8.5rem). */
.ai-hero.hero-section {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

/* ---- 2) primary-50 alternate bands (theme-aware) ------------------------
   Background sits on the section container only, driven by the semantic
   --color-section-alt token (+ --color-section-alt-* foregrounds) defined
   in section 02. Light keeps the pinned primary-50 wash + deep neutral /
   primary-700 accents for AA contrast; dark replaces it with a blued-slate
   panel using the theme's light text tokens and bright primary-300 accents.
   The base rules already brighten eyebrow/icon accents in dark; these
   rules ride the same semantic tokens instead of fighting them. */

/* --- AI Capabilities (#ai-capabilities) -------------------------------- */
.ai-capabilities {
  background-color: var(--color-section-alt);
}

.ai-capabilities .section-title,
.ai-capabilities .ai-capabilities__title,
.ai-capabilities .ai-capabilities__item:hover .ai-capabilities__title,
[data-theme="dark"] .ai-capabilities .ai-capabilities__item:hover .ai-capabilities__title {
  color: var(--color-section-alt-heading);
}

.ai-capabilities .section-intro,
.ai-capabilities .ai-capabilities__description {
  color: var(--color-section-alt-text);
}

.ai-capabilities .section-eyebrow,
[data-theme="dark"] .ai-capabilities .section-eyebrow {
  color: var(--color-section-alt-accent);
}

.ai-capabilities .section-eyebrow::before {
  background-color: var(--color-section-alt-accent-dim);
}

.ai-capabilities .ai-capabilities__item {
  border-color: var(--color-section-alt-border);
}

.ai-capabilities .ai-capabilities__icon,
[data-theme="dark"] .ai-capabilities .ai-capabilities__icon,
.ai-capabilities .ai-capabilities__item:hover .ai-capabilities__icon,
[data-theme="dark"] .ai-capabilities .ai-capabilities__item:hover .ai-capabilities__icon {
  color: var(--color-section-alt-accent);
}

.ai-capabilities .ai-capabilities__cta {
  color: var(--color-section-alt-accent);
}

.ai-capabilities .ai-capabilities__cta:hover {
  color: var(--color-section-alt-accent-hover);
}

/* --- AI in Practice (#ai-practice) -------------------------------------- */
.ai-practice {
  --hw-bg: var(--color-section-alt);
  --hw-heading: var(--color-section-alt-heading);
  --hw-text: var(--color-section-alt-text);
  --hw-muted: var(--color-section-alt-muted);
  --hw-border: var(--color-section-alt-border);
}

.ai-practice .section-eyebrow,
.ai-practice .ai-practice__tag {
  color: var(--color-section-alt-accent);
}

.ai-practice .section-eyebrow::before {
  background-color: var(--color-section-alt-accent-dim);
}

/* --- Why 05 IT Solutions + FAQ (#ai-why) -------------------------------- */
.ai-why {
  --aiw-bg: var(--color-section-alt);
  --aiw-heading: var(--color-section-alt-heading);
  --aiw-text: var(--color-section-alt-text);
  --aiw-border: var(--color-section-alt-border);
}

.ai-why .section-eyebrow,
.ai-why .ai-why__icon {
  color: var(--color-section-alt-accent);
}

.ai-why .section-eyebrow::before {
  background-color: var(--color-section-alt-accent-dim);
}

.ai-why .faq-item__toggle:hover .faq-item__question,
.ai-why .faq-item__toggle:focus-visible .faq-item__question,
.ai-why .faq-item__icon .bi {
  color: var(--color-section-alt-accent);
}

/* ---- 3) Intro -> content gaps (scoped, on the shared spacing scale) ----- */
.ai-overview .ai-overview__timeline {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.ai-capabilities__grid {
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

.ai-challenges__slider {
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

/* Tighten the slider -> closing message (was up to 5rem of air above). */
.ai-challenges__closing {
  gap: var(--space-4);
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
  padding-top: clamp(var(--space-4), 2vw, var(--space-5));
}

.ai-process__list {
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

.ai-practice__list {
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

.ai-industries__marquee {
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
  padding-block: clamp(0.75rem, 1.2vw, 1rem);
}

.ai-why__grid {
  row-gap: clamp(var(--space-6), 5vw, var(--space-8));
}

.ai-why__list {
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

.ai-why .ai-faq-list {
  margin-top: clamp(var(--space-4), 2vw, var(--space-5));
}

/* Closing CTA card: trim the outer air while keeping clear separation
   from the Why/FAQ band above and the dark footer below. */
.final-cta--card {
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}

@media (max-width: 767.98px) {
  .final-cta--card {
    padding-block: clamp(2.25rem, 6vw, 3rem);
  }
}

/* ---- 4) Normal AI sections: theme-aware surfaces ------------------------
   ai-process and ai-industries were originally pinned to the neutral-50
   "light island" palette, so they stayed near-white when the page went
   dark. Re-map their surface + foreground custom properties under the dark
   selector so they act like normal sections (--color-section surface,
   theme text tokens, bright primary-300 accents) — the same
   [data-theme="dark"] override pattern the base rules use everywhere.
   Light-mode values are untouched; the marquee band uses --color-card so
   it stays a subtle inset panel against the section surface. */

[data-theme="dark"] .ai-process {
  --hw-bg: var(--color-section);
  --hw-heading: var(--color-heading);
  --hw-text: var(--color-text);
  --hw-muted: var(--color-muted);
  --hw-border: var(--color-border);
  --hw-rail: var(--color-border);
}

[data-theme="dark"] .ai-process .section-eyebrow {
  color: var(--primary-300);
}

[data-theme="dark"] .ai-process .section-eyebrow::before {
  background-color: var(--primary-400);
}

[data-theme="dark"] .ai-process__num,
[data-theme="dark"] .ai-process .ai-process__icon {
  color: var(--primary-300);
}

@media (hover: hover) {
  [data-theme="dark"] .ai-process__stage:hover .ai-process__icon {
    color: var(--primary-200);
    border-color: var(--primary-400);
  }
}

[data-theme="dark"] .ai-industries {
  --iw-bg: var(--color-section);
  --iw-band: var(--color-card);
  --iw-border: var(--color-border);
  --iw-heading: var(--color-heading);
  --iw-name: var(--color-text);
}

[data-theme="dark"] .ai-industries .section-eyebrow {
  color: var(--primary-300);
}

[data-theme="dark"] .ai-industries .section-eyebrow::before {
  background-color: var(--primary-400);
}

[data-theme="dark"] .ai-industries__intro {
  color: var(--color-text);
}

[data-theme="dark"] .ai-industries__icon {
  color: var(--primary-300);
}

/* ==========================================================================
   43. Products catalogue (products.html)
   Catalogue hub for the software products built by 05 IT Solutions. It is
   the landing target for the shared mega menu / footer product links
   (products.html#umanar, #yaazh, ...), so each card doubles as an in-page
   anchor and reserves scroll space for the fixed header.

   Every surface is mapped onto the theme tokens (--color-card, --color-border,
   --color-section-alt, ...), so the grid renders correctly in both themes
   with no per-theme overrides. Shadows come only from the --shadow-* scale.
   ========================================================================== */

/* ---- Hero: single-column and tighter than the AI page hero ------------- */
.products-hero {
  padding-block: clamp(var(--space-7), 7vw, var(--space-9));
}

.products-hero .hero-lead {
  max-width: 60ch;
}

/* ---- Catalogue section & scoped section header ------------------------- */
.products-catalogue {
  padding-block: 0 calc(var(--space-9) + var(--space-5));
}

.products-catalogue__header {
  max-width: var(--content-measure);
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
}

.products-catalogue .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .products-catalogue .section-eyebrow {
  color: var(--primary-300);
}

.products-catalogue .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

.products-catalogue .section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 2vw + 1.25rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.products-catalogue .section-intro {
  max-width: 600px;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Product cards ----------------------------------------------------- */
/* Each article is both a Bootstrap grid column and the card surface. The
   id anchors (#umanar, #yaazh, ...) are the targets of the shared
   mega-menu/footer links, so the header-height offset keeps the heading of
   the jumped-to card clear of the fixed navbar. */
.product-card {
  display: flex;
  flex-direction: column;
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-fast);
  height: 100%;
}

@media (hover: hover) {
  .product-card:hover {
    border-color: var(--primary-400);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

/* ---- Media / logo strip ------------------------------------------------ */
/* Neutral, reusable logo area: a transparent surface so the original logo
   colours and transparency are preserved for any logo shape, aspect ratio
   or theme. No tint, gradient or per-product background. The thin divider
   only keeps the logo band and the card body visually separate. */
.product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 148px;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.product-card__media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 168px;
  max-height: 72px;
  object-fit: contain;
}

.product-card__media .product-card__logo--dark {
  display: none;
}

[data-theme="dark"] .product-card__media .product-card__logo--light {
  display: none;
}

[data-theme="dark"] .product-card__media .product-card__logo--dark {
  display: block;
}

.product-card__logogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: transparent;
  color: var(--color-section-alt-accent);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.75rem;
  line-height: 1;
}

/* ---- Card body --------------------------------------------------------- */
.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.4vw, 1.5rem);
}

.product-card__category {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.product-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-heading);
}

.product-card__desc {
  flex-grow: 1;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--color-section-alt-accent);
}

.product-card__link:hover,
.product-card__link:focus-visible {
  color: var(--color-section-alt-accent-hover);
}

@media (hover: hover) {
  .product-card__link i {
    transition: transform var(--transition-fast);
  }

  .product-card__link:hover i {
    transform: translateX(3px);
  }
}

/* ==========================================================================
   44. Solutions catalogue (solutions.html)

   Mirrors the products catalogue (§43): same single-column hero rhythm,
   scoped section header and card-grid conventions (identical surface tokens,
   border, radius, spacing and hover states). The icon area is a neutral,
   transparent chip strip instead of a media/logo row, and there is no
   category tag line on the cards. In-page ids (#ai-solutions,
   #product-engineering, ...) match the shared mega-menu/footer anchors.
   ========================================================================== */

/* ---- Hero: single-column and tighter than the AI page hero ------------- */
.solutions-hero {
  padding-block: clamp(var(--space-7), 7vw, var(--space-9));
}

.solutions-hero .hero-lead {
  max-width: 60ch;
}

/* ---- Catalogue section & scoped section header ------------------------- */
.solutions-catalogue {
  padding-block: 0 calc(var(--space-9) + var(--space-5));
}

.solutions-catalogue__header {
  max-width: var(--content-measure);
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
}

.solutions-catalogue .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .solutions-catalogue .section-eyebrow {
  color: var(--primary-300);
}

.solutions-catalogue .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

.solutions-catalogue .section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 2vw + 1.25rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.solutions-catalogue .section-intro {
  max-width: 600px;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Solution cards ----------------------------------------------------- */
/* Each article is both a Bootstrap grid column and the card surface. The
   id anchors (#ai-solutions, #product-engineering, ...) are the targets of
   the shared mega-menu/footer links, so the header-height offset keeps the
   heading of the jumped-to card clear of the fixed navbar. */
.solution-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-fast);
}

@media (hover: hover) {
  .solution-card:hover {
    border-color: var(--primary-400);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

/* ---- Icon area: neutral chip on a transparent surface ------------------- */
.solution-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 148px;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.solution-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: transparent;
  color: var(--color-section-alt-accent);
  font-size: 1.75rem;
  line-height: 1;
}

/* ---- Card body --------------------------------------------------------- */
.solution-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.4vw, 1.5rem);
}

.solution-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-heading);
}

.solution-card__desc {
  flex-grow: 1;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.solution-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--color-section-alt-accent);
}

.solution-card__link:hover,
.solution-card__link:focus-visible {
  color: var(--color-section-alt-accent-hover);
}

@media (hover: hover) {
  .solution-card__link i {
    transition: transform var(--transition-fast);
  }

  .solution-card__link:hover i {
    transform: translateX(3px);
  }
}

/* ==========================================================================
   45. Research & Innovation Lab (research.html)

   Landing page for the Research & Innovation Lab. Editorial and restrained:
   scoped section headers reusing .section-eyebrow/.section-title/
   .section-intro, compact pillar and areas rows, a numbered lifecycle
   overview, a minimal editorial team preview and the shared .final-cta
   closing surface. Every color comes from the theme tokens so the page
   renders correctly in both themes. No card-heavy decorations, no stock
   photography presented as the team or lab.
   ========================================================================== */

/* ---- Hero: editorial two-column, visual hidden below lg ----------------- */
.research-hero {
  padding-block: clamp(var(--space-7), 7vw, var(--space-9));
}

/* Scoped section header (same max-width rhythm as the catalogue pages) */
.research-header {
  max-width: var(--content-measure);
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
}

/* Shared section header typography (eyebrow -> title -> intro). Follows the
   products/solutions catalogue rhythm so the same trio reads consistently
   across every research section and every background treatment. */
.research-header .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.research-header .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-500);
  flex-shrink: 0;
}

[data-theme="dark"] .research-header .section-eyebrow {
  color: var(--primary-300);
}

.research-header .section-title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.research-header .section-intro {
  max-width: 56ch;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* ---- Abstract research diagram (pure decoration, aria-hidden) ----------- */
.research-hero-visual {
  position: relative;
  max-width: 340px;
  min-height: 300px;
  margin-left: auto;
}

.research-hero-visual__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.research-hero-visual__links line {
  stroke: var(--color-border);
  stroke-width: 1.5;
}

.research-hero-visual__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.research-hero-visual__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: var(--color-card);
  color: var(--primary-500);
  font-size: 1.4rem;
}

[data-theme="dark"] .research-hero-visual__chip {
  color: var(--primary-300);
}

.research-hero-visual__label {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

.research-hero-visual__node--investigate {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.research-hero-visual__node--experiment {
  bottom: 0;
  left: 0;
}

.research-hero-visual__node--apply {
  bottom: 0;
  right: 0;
}

.research-hero-visual__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: var(--color-section-alt);
  color: var(--color-section-alt-accent);
  font-size: 1.5rem;
}

.research-hero-visual__core-label {
  font-family: var(--font-code);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---- Purpose (editorial: the header is the whole section) --------------- */
/* Default .section rhythm is left intact for generous whitespace. */

/* ---- Research pillars ----------------------------------------------------- */
.research-pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.research-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-bottom: var(--space-3);
}

[data-theme="dark"] .research-pillar__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.research-pillar__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.research-pillar__desc {
  margin: 0;
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* ---- Research lifecycle (numbered overview) ------------------------------ */
.research-lifecycle__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.research-lifecycle__stage {
  position: relative;
  flex: 1 1 180px;
  min-width: 180px;
}

.research-lifecycle__step {
  margin: 0 0 var(--space-2);
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--primary-500);
}

.research-lifecycle__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.research-lifecycle__desc {
  margin: 0;
  max-width: 26ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* Decorative connector between stages on desktop. It is purely ornamental;
   the numbered sequence stays fully understandable without it. */
@media (min-width: 992px) {
  .research-lifecycle__stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.55rem;
    right: calc(-1 * var(--space-6) / 2);
    width: calc(var(--space-6) - 0.5rem);
    height: 1px;
    background: var(--color-border);
  }
}

/* ---- Research areas (dark feature section, continuous marquee) ------------ */
/* Band strip: hairline top/bottom edges frame the moving strip. The track
   is the two full groups side by side (width: max-content); every item
   carries its own trailing margin (--rs-area-gap), so both groups span
   exactly the same width and translateX(-50%) shifts by one group — the
   end-frame pixel-matches the start, so the loop is seamless. Pure CSS,
   no animation dependency. */
.research-areas__marquee {
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
  padding: clamp(1.25rem, 2vw, 1.75rem) 0;
  border-top: 1px solid var(--rs-border);
  border-bottom: 1px solid var(--rs-border);
  overflow: hidden;
}

.research-areas__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  animation: research-areas-marquee 30s linear infinite;
  will-change: transform;
}

@keyframes research-areas-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Keyboard users can focus the strip; a visible outline marks the target
   and doubles as the pause interaction (the marquee pauses on focus). */
.research-areas__track:focus-visible {
  outline: 2px solid var(--rs-accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.research-areas__group {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.research-areas__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: var(--rs-area-gap);
  white-space: nowrap;
}

.research-areas__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--rs-accent);
}

.research-areas__name {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--rs-heading);
}

/* ---- Pause while the pointer hovers or any descendant has focus ---------- */
.research-areas__marquee:hover .research-areas__track,
.research-areas__marquee:focus-within .research-areas__track {
  animation-play-state: paused;
}

/* ---- Reduced motion: static wrapped list -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .research-areas__track {
    animation: none;
    width: 100%;
  }

  .research-areas__group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: clamp(0.75rem, 2vw, 1.25rem);
    width: 100%;
  }

  /* The mirror copy is never shown when motion is off. */
  .research-areas__group[aria-hidden="true"] {
    display: none;
  }

  .research-areas__item {
    white-space: normal;
    margin-right: clamp(0.75rem, 1.5vw, 1.25rem);
    text-align: left;
  }
}

.research-areas__footer {
  margin-top: var(--space-5);
}

.research-areas__link,
.research-team__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.9375rem;
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.research-areas__link:hover,
.research-areas__link:focus-visible,
.research-team__link:hover,
.research-team__link:focus-visible {
  color: var(--primary-600);
  gap: var(--space-3);
}

/* ---- Research team preview (editorial, typography + icon only) ----------- */
.research-team__blurb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
}

.research-team__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.375rem;
}

[data-theme="dark"] .research-team__mark {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.research-team__note {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* ---- Primary-50 alternate bands ------------------------------------------ */
/* Purpose, Pillars and Team sit on the semantic --color-section-alt token:
   a pinned primary-50 wash in light mode, the blued-slate panel in dark —
   the exact convention the AI-solutions page uses for its alternate bands.
   Foregrounds remap to the matching --color-section-alt-* foregrounds so
   text, icons and hairlines stay readable on the tinted surface. */
.research-alternate {
  background-color: var(--color-section-alt);
  color: var(--color-section-alt-text);
}

.research-alternate .section-eyebrow {
  color: var(--color-section-alt-accent);
}

.research-alternate .section-eyebrow::before {
  background-color: var(--color-section-alt-accent-dim);
}

.research-alternate .section-title {
  color: var(--color-section-alt-heading);
}

.research-alternate .section-intro {
  color: var(--color-section-alt-text);
}

.research-alternate .research-pillar__title {
  color: var(--color-section-alt-heading);
}

.research-alternate .research-pillar__desc,
.research-alternate .research-team__note {
  color: var(--color-section-alt-text);
}

/* Icon chips keep a soft surface on the tinted band in both themes. */
.research-alternate .research-pillar__icon,
.research-alternate .research-team__mark {
  background-color: var(--color-section-alt-border);
  color: var(--color-section-alt-accent);
}

.research-alternate .research-team__blurb {
  border-color: var(--color-section-alt-border);
}

.research-alternate .research-team__link {
  color: var(--color-section-alt-accent);
}

.research-alternate .research-team__link:hover,
.research-alternate .research-team__link:focus-visible {
  color: var(--color-section-alt-accent-hover);
}

/* ---- Dark feature sections (Research Strengths + Research Areas) ---------- */
/* Same always-dark band language as the homepage Company Highlights and the
   AI Solutions Business Challenges band: navy in light theme, near-black in
   dark, hairline engineering grid plus one soft accent glow behind the
   content. Scoped band tokens only — no global values are touched. */
.research-dark {
  --rs-bg: #07284D;
  --rs-heading: #F8FAFC;
  --rs-text: #CBD5E1;
  --rs-accent: #3399FF;
  --rs-border: rgba(248, 250, 252, 0.14);
  --rs-chip: rgba(248, 250, 252, 0.06);
  --rs-grid-line: rgba(248, 250, 252, 0.05);
  --rs-glow: rgba(51, 153, 255, 0.14);
  --rs-area-gap: clamp(1.75rem, 3vw, 2.5rem);

  position: relative;
  overflow: hidden;
  background-color: var(--rs-bg);
  color: var(--rs-text);
}

[data-theme="dark"] .research-dark {
  --rs-bg: #161B22;
  --rs-grid-line: rgba(148, 163, 184, 0.06);
  --rs-glow: rgba(51, 153, 255, 0.10);
}

/* Structured engineering grid + one soft accent glow, as on the homepage. */
.research-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rs-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rs-grid-line) 1px, transparent 1px),
    radial-gradient(55% 60% at 100% 0%, var(--rs-glow), transparent 70%);
  background-size: 44px 44px, 44px 44px, auto;
  pointer-events: none;
}

.research-dark > * {
  position: relative;
}

.research-dark .section-eyebrow {
  color: var(--rs-accent);
}

.research-dark .section-eyebrow::before {
  background-color: currentColor;
}

.research-dark .section-title {
  color: var(--rs-heading);
}

.research-dark .section-intro {
  color: var(--rs-text);
}

.research-dark .research-areas__link {
  color: var(--rs-accent);
}

.research-dark .research-areas__link:hover,
.research-dark .research-areas__link:focus-visible {
  color: var(--primary-300);
}

/* ---- Research strengths (dark, four-up editorial grid) -------------------- */
.research-strengths__band {
  row-gap: var(--space-6);
  margin-top: clamp(var(--space-6), 3vw, var(--space-7));
}

.research-strength {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.research-strength__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--rs-chip);
  color: var(--rs-accent);
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-bottom: var(--space-3);
}

.research-strength__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--rs-heading);
}

.research-strength__desc {
  margin: 0;
  max-width: 30ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rs-text);
}

/* Desktop band rhythm: hairline vertical dividers between the columns,
   matching the homepage Company Highlights band. */
@media (min-width: 1200px) {
  .research-strengths__band > .col-lg-3 {
    border-left: 1px solid var(--rs-border);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .research-strengths__band > .col-lg-3:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .research-strengths__band > .col-lg-3:last-child {
    padding-right: 0;
  }
}

/* ---- Anchor targets must clear the fixed header -------------------------- */
#purpose,
#methodology,
#areas,
#strengths,
#team,
#collaboration {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ==========================================================================
   46. Research Team page (research-team.html)

   People-focused page for the Research & Innovation Lab. Reuses the shared
   primitives (.section, .container.site-container, .research-header, the
   .research-alternate primary-50 band and the .final-cta--card surface) so it
   reads as part of the same Research Lab / AI Solutions family. Only the
   page-specific pieces live here: the concise typography-led hero, the
   data-driven profile cards and the subtle team-growth indicator. Every colour
   comes from theme tokens, so both themes are covered without a separate
   theme system.
   ========================================================================== */

/* ---- Hero: typography-led, no stock or fabricated team photography ------- */
.rt-hero__inner {
  max-width: var(--content-measure);
}

/* ---- Profile cards (research leadership + senior scientists) ------------- */
/* Cards are written directly into research-team.html. Equal height in the grid;
   the same component serves every researcher. */
.rt-profiles {
  align-items: stretch;
}

/* Off-screen holder for the inline profile-link brand sprite defined at the top
   of research-team.html. Keeps the symbol definitions out of the layout. */
.rt-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.rt-profile {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
}

/* Portrait-first layout: Row 1 holds only the portrait, centered; Row 2 (below)
   holds the profile information. Every researcher shares the same portrait
   frame. */
.rt-profile__head {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-4);
}

.rt-profile__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Media. Portrait-first: a 4:5 frame with object-fit: cover so any supplied
   photograph fills it without stretching or distortion. The photos are the
   approved portraits in images/team/; the frame
   is identical for every researcher — leadership and scientists alike. The span
   is the monogram fallback used only when no photo is supplied. */
.rt-profile__photo,
.rt-profile__media {
  display: block;
  width: 100%;
  max-width: 212px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
}

.rt-profile__photo {
  object-fit: cover;
  object-position: center;
}

.rt-profile__media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-50);
  color: var(--primary-600);
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

[data-theme="dark"] .rt-profile__media {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

/* Identity (name + designation) is centered beneath the centered portrait;
   the biography and statistics stay left-aligned for readability. */
.rt-profile__name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.3125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--color-heading);
}

.rt-profile__designation {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--primary-600);
}

[data-theme="dark"] .rt-profile__designation {
  color: var(--primary-300);
}

.rt-profile__role {
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* Research statistics — replaces the old role-highlight tags. A compact,
   auto-fitting grid of figures: a large numeral over a small descriptive
   label. Only verified metrics are rendered (see main.js); when none are
   verified the whole area is omitted, so no placeholder or status message is
   shown. Uses theme variables, so it adapts to light and dark automatically. */
.rt-profile__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-border);
}

.rt-metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.rt-metric__value {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.rt-metric__label {
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

/* Professional links — all five types are always rendered. Pinned to the card
   bottom so equal-height cards line up. Temporary "#" links carry
   data-profile-placeholder and never navigate (see main.js). */
.rt-profile__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: auto 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.rt-profile__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 1.0625rem;
  text-decoration: none;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

/* ORCID, Google Scholar and ResearchGate use their official brand marks as
   inline SVG (the sprite is defined once in research-team.html). The icon
   inherits the link colour, so the mark is neutral at rest and reveals the
   official brand colour on hover/focus — matching the shared link interaction. */
.rt-profile__link .rt-profile__icon {
  display: block;
  width: 1.0625rem;
  height: 1.0625rem;
  fill: currentColor;
}

.rt-profile__link--orcid { --rt-profile-brand: #A6CE39; }
.rt-profile__link--googlescholar { --rt-profile-brand: #4285F4; }
.rt-profile__link--researchgate { --rt-profile-brand: #00CCBB; }

.rt-profile__link:hover {
  color: var(--primary-600);
  border-color: var(--primary-500);
}

.rt-profile__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  color: var(--primary-600);
  border-color: var(--primary-500);
}

/* Brand links reveal their official brand colour instead of the primary hover
   colour. Declared after the generic hover/focus rules so it wins the tie. */
.rt-profile__link--brand:hover,
.rt-profile__link--brand:focus-visible {
  color: var(--rt-profile-brand);
  border-color: var(--rt-profile-brand);
}

/* Temporary placeholder link: still focusable (so the focus state is visible)
   but non-navigating and non-jumping until a verified URL replaces "#". */
.rt-profile__link--placeholder {
  cursor: default;
}

/* Dark theme hover. Brand links keep their official brand colour (see above),
   so they are excluded from the primary-tinted dark hover. */
[data-theme="dark"] .rt-profile__link:not(.rt-profile__link--brand):hover,
[data-theme="dark"] .rt-profile__link:not(.rt-profile__link--brand):focus-visible {
  color: var(--primary-300);
  border-color: var(--primary-300);
}

/* Alternate (primary-50) band: keep the card surface, align the hairline. */
.research-alternate .rt-profile {
  border-color: var(--color-section-alt-border);
}

/* ---- Team-growth indicator (third desktop column of the scientists grid) -- */
/* A neutral, informational placeholder — deliberately lighter than a real
   profile card: dashed hairline, no surface fill and a muted icon so it never
   reads as a person or a missing profile. Hidden below the desktop breakpoint
   via the .d-none .d-xl-block utility on its column. */
.rt-growth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.rt-growth__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 1.125rem;
}

.rt-growth__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.rt-growth__desc {
  margin: 0;
  max-width: 30ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ---- Team-page anchor targets clear the fixed header --------------------- */
#leadership,
#scientists {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ==========================================================================
   47. Research Areas page (research-areas.html)

   Catalogue of the Research & Innovation Lab's areas of exploration. Reuses the
   shared primitives (.section, .container.site-container, .research-header, the
   .research-alternate primary-50 band, the .research-dark feature band and the
   .final-cta--card surface) so it reads as part of the same Research Lab / AI
   Solutions family. Only the page-specific pieces live here: the typography-led
   hero, the six area cards, the research-to-application stages and the
   cross-disciplinary feature band. Every colour comes from theme tokens, so both
   themes are covered without a separate theme system.
   ========================================================================== */

/* ---- Hero: typography-led, no stock photography -------------------------- */
.ra-hero__inner {
  max-width: var(--content-measure);
}

/* ---- Area cards (six-up catalogue written directly into the markup) ------ */
.ra-area {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
  overflow: hidden;
}

.ra-area__main {
  flex: 1 1 auto;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
}

.ra-area__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.25rem;
  flex-shrink: 0;
}

[data-theme="dark"] .ra-area__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.ra-area__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.ra-area__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.ra-area__questions {
  margin-top: var(--space-5);
}

.ra-area__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ra-area__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ra-area__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

.ra-area__list li + li {
  margin-top: var(--space-2);
}

.ra-area__list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
}

.ra-area__apps {
  padding: clamp(var(--space-4), 2vw, var(--space-5)) clamp(var(--space-5), 3vw, var(--space-6));
  border-top: 1px solid var(--color-border);
  background-color: var(--color-section);
}

.ra-area__apps .ra-area__label {
  color: var(--primary-600);
}

[data-theme="dark"] .ra-area__apps .ra-area__label {
  color: var(--primary-300);
}

.ra-area__apps-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* Alternate (primary-50) band: keep the card surface, align the hairline. */
.research-alternate .ra-area {
  border-color: var(--color-section-alt-border);
}

.research-alternate .ra-area__icon {
  background-color: var(--color-section-alt-border);
  color: var(--color-section-alt-accent);
}

.research-alternate .ra-area__title {
  color: var(--color-section-alt-heading);
}

.research-alternate .ra-area__desc,
.research-alternate .ra-area__list li {
  color: var(--color-section-alt-text);
}

.research-alternate .ra-area__apps {
  border-top-color: var(--color-section-alt-border);
  background-color: var(--color-section-alt);
}

.research-alternate .ra-area__apps-text {
  color: var(--color-section-alt-muted);
}

/* ---- From research to application (three stages) ------------------------- */
.ra-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.ra-stage__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.25rem;
  flex-shrink: 0;
}

[data-theme="dark"] .ra-stage__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.ra-stage__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.ra-stage__desc {
  margin: 0;
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* ---- Cross-disciplinary research (dark feature band) --------------------- */
/* Inherits the .research-dark band language (navy panel, engineering grid and
   accent glow). The three connection cards map onto the scoped --rs tokens
   exactly like the Research Strengths band. */
.ra-cross {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.ra-cross__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--rs-chip);
  color: var(--rs-accent);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.ra-cross__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--rs-heading);
}

.ra-cross__desc {
  margin: 0;
  max-width: 30ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rs-text);
}

/* Desktop band rhythm: hairline vertical dividers between the columns,
   matching the Research Strengths band. */
@media (min-width: 1200px) {
  .ra-cross-band .ra-cross-col {
    border-left: 1px solid var(--rs-border);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .ra-cross-band .ra-cross-col:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .ra-cross-band .ra-cross-col:last-child {
    padding-right: 0;
  }
}

/* ---- Page anchor targets must clear the fixed header ---------------------- */
#research-areas,
#approach,
#interdisciplinary {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ==========================================================================
   48. Research Team — Dual-Core research model (research-team.html)

   The two complementary capability cores introduced below the team profiles.
   Presented on the shared .research-alternate (primary-50) band, so the card
   surface and hairlines follow the band tokens exactly like the .ra-area and
   .research-pillar families. Every colour comes from theme tokens.
   ========================================================================== */

/* ---- Core cards (two-up, written directly into the markup) --------------- */
.rt-core {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
}

.rt-core__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.25rem;
  flex-shrink: 0;
}

[data-theme="dark"] .rt-core__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.rt-core__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--color-heading);
}

.rt-core__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.rt-core__label {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.rt-core__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt-core__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

.rt-core__list li + li {
  margin-top: var(--space-2);
}

.rt-core__list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
}

.rt-model__note {
  margin: clamp(var(--space-6), 3vw, var(--space-7)) 0 0;
  max-width: var(--content-measure);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

/* Alternate (primary-50) band: keep the card surface, align the hairlines. */
.research-alternate .rt-core {
  border-color: var(--color-section-alt-border);
}

.research-alternate .rt-core__icon {
  background-color: var(--color-section-alt-border);
  color: var(--color-section-alt-accent);
}

.research-alternate .rt-core__title {
  color: var(--color-section-alt-heading);
}

.research-alternate .rt-core__desc,
.research-alternate .rt-core__list li {
  color: var(--color-section-alt-text);
}

.research-alternate .rt-core__label,
.research-alternate .rt-model__note {
  color: var(--color-section-alt-muted);
}

/* ---- Team-page anchor target clears the fixed header --------------------- */
#dual-core {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ==========================================================================
   49. Research Methodology page (research-methodology.html)

   Explains how the lab approaches research: the principles that guide it, the
   stages it moves through, the methods it draws on, the feedback loop that
   refines it and the integrity standards it holds to. Reuses the shared
   primitives (.section, .container.site-container, .research-header, the
   .research-alternate primary-50 band, the .research-dark feature band, the
   .research-pillar and .research-strength cards and the .final-cta--card
   surface). Only the page-specific pieces live here. Every colour comes from
   theme tokens, so both themes are covered without a separate theme system.
   ========================================================================== */

/* ---- Hero: typography-led, no stock photography -------------------------- */
.rm-hero__inner {
  max-width: var(--content-measure);
}

/* ---- Research lifecycle (ordered, six stages with flow connectors) ------- */
.rm-lifecycle__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {
  .rm-lifecycle__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.rm-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
}

.rm-stage__step {
  margin: 0 0 var(--space-3);
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--primary-600);
}

[data-theme="dark"] .rm-stage__step {
  color: var(--primary-300);
}

.rm-stage__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.rm-stage__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.rm-stage__label {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.rm-stage__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-stage__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

.rm-stage__list li + li {
  margin-top: var(--space-2);
}

.rm-stage__list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
}

/* Decorative flow arrow between stages on the three-column desktop grid. The
   numbered sequence stays fully understandable without it. */
@media (min-width: 992px) {
  .rm-stage:not(:nth-child(3n))::after {
    content: "\2192";
    position: absolute;
    top: 1.9rem;
    right: calc(-1 * var(--space-6));
    width: var(--space-6);
    text-align: center;
    color: var(--color-border);
    font-size: 1rem;
    line-height: 1;
  }
}

/* ---- Methods & evaluation (dark feature band) ---------------------------- */
/* Reuses the .research-strength card component on the .research-dark band, so
   the cards map onto the scoped --rs tokens exactly like the strengths grid. */
.rm-methods__grid {
  row-gap: var(--space-6);
  margin-top: clamp(var(--space-6), 3vw, var(--space-7));
}

.rm-eval {
  margin-top: clamp(var(--space-6), 3vw, var(--space-7));
  padding-top: clamp(var(--space-5), 3vw, var(--space-6));
  border-top: 1px solid var(--rs-border);
}

.rm-eval__label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rs-accent);
}

.rm-eval__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-eval__list li {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--rs-border);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--rs-text);
}

/* ---- Feedback loop (alternate primary-50 band) --------------------------- */
.rm-loop__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {
  .rm-loop__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

.rm-loop__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.rm-loop__step-num {
  margin: 0 0 var(--space-2);
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-section-alt-accent);
}

.rm-loop__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-section-alt-heading);
}

.rm-loop__desc {
  margin: 0;
  max-width: 30ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-section-alt-text);
}

/* Decorative flow arrow between the four loop steps on desktop. */
@media (min-width: 992px) {
  .rm-loop__step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 0.55rem;
    right: calc(-1 * var(--space-6));
    width: var(--space-6);
    text-align: center;
    color: var(--color-section-alt-accent-dim);
    font-size: 0.9375rem;
    line-height: 1;
  }
}

.rm-loop__cycle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: clamp(var(--space-5), 3vw, var(--space-6)) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-section-alt-muted);
}

.rm-loop__cycle .bi {
  color: var(--color-section-alt-accent);
  font-size: 1.125rem;
}

.rm-loop__points {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: clamp(var(--space-6), 3vw, var(--space-7)) 0 0;
  padding: clamp(var(--space-6), 3vw, var(--space-7)) 0 0;
  border-top: 1px solid var(--color-section-alt-border);
  list-style: none;
}

@media (min-width: 768px) {
  .rm-loop__points {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.rm-loop__point {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rm-loop__point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-section-alt-border);
  color: var(--color-section-alt-accent);
  font-size: 1.125rem;
}

.rm-loop__point-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-section-alt-text);
}

.rm-loop__point-text strong {
  color: var(--color-section-alt-heading);
  font-weight: var(--weight-semibold);
}

/* ---- Research integrity (restrained editorial list, no cards) ------------ */
.rm-integrity__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.rm-integrity__item {
  padding: clamp(var(--space-5), 3vw, var(--space-6)) 0;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .rm-integrity__item {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: var(--space-2) var(--space-6);
    align-items: start;
  }
}

.rm-integrity__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.rm-integrity__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--primary-600);
  font-size: 1.0625rem;
}

[data-theme="dark"] .rm-integrity__icon {
  color: var(--primary-300);
}

.rm-integrity__desc {
  margin: var(--space-2) 0 0;
  max-width: var(--content-measure);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
}

@media (min-width: 768px) {
  /* On the two-column editorial layout the grid row-gap already separates the
     heading from the description, so the stacked-layout margin is dropped. */
  .rm-integrity__desc {
    margin-top: 0;
  }
}

/* ---- Page anchor targets must clear the fixed header --------------------- */
#principles,
#lifecycle,
#methods,
#feedback,
#integrity {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ==========================================================================
   50. Research Projects page (research-projects.html)

   Describes the developing research programme where no projects are listed
   yet. It answers the visitor's question ("why is there nothing here?") as an
   intentional stage rather than a missing-content error, and explains how
   future projects will be investigated and presented. Reuses the shared
   primitives (.section, .container.site-container, .research-header, the
   .research-alternate primary-50 band and the .final-cta--card surface). Only
   the page-specific pieces live here. Every colour comes from theme tokens, so
   both themes are covered without a separate theme system.
   ========================================================================== */

/* ---- Hero: typography-led, no stock photography -------------------------- */
.rp-hero__inner {
  max-width: var(--content-measure);
}

/* ---- Current research stage (editorial, no project card) ----------------- */
.rp-status__inner {
  max-width: var(--content-measure);
}

.rp-status__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-section-alt-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
  color: var(--color-section-alt-accent);
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* The supporting statement is set slightly apart from the paragraph above it
   by a hairline rule and a heading-weight line, so it reads as a key point. */
.rp-status__note {
  margin: 0;
  padding: var(--space-5) 0 0;
  max-width: var(--content-measure);
  border-top: 1px solid var(--color-section-alt-border);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-section-alt-heading);
}

/* ---- From research questions to findings (four connected stages) --------- */
.rp-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {
  .rp-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

.rp-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.rp-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-4);
}

.rp-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.25rem;
  flex-shrink: 0;
}

[data-theme="dark"] .rp-step__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.rp-step__num {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.rp-step__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.rp-step__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* Decorative flow arrow between stages on the four-column desktop grid. The
   numbered sequence stays fully understandable without it. */
@media (min-width: 992px) {
  .rp-step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 1.05rem;
    right: calc(-1 * var(--space-6));
    width: var(--space-6);
    text-align: center;
    color: var(--color-border);
    font-size: 1rem;
    line-height: 1;
  }
}

/* ---- Page anchor targets must clear the fixed header --------------------- */
#current-stage,
#shape {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ==========================================================================
   51. Academic & Industry Collaboration page (research-collaboration.html)

   Invites academic institutions, researchers, and industry partners to engage
   with the Research & Innovation Lab. The page is deliberately prospective:
   it describes who we hope to collaborate with, potential collaboration
   models, and guiding principles — without claiming existing partnerships,
   signed agreements or funded programmes. Reuses the shared primitives
   (.section, .container.site-container, .research-header, the
   .research-alternate primary-50 band, the .research-dark feature band and
   the .final-cta--card surface). Only the page-specific pieces live here, and
   every colour comes from theme tokens so both themes are covered.
   ========================================================================== */

/* ---- Hero: typography-led, no stock photography -------------------------- */
.rc-hero__inner {
  max-width: var(--content-measure);
}

/* ---- Who we hope to collaborate with (cards on the alternate band) ------- */
.rc-peer {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
}

.rc-peer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.25rem;
  flex-shrink: 0;
}

[data-theme="dark"] .rc-peer__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.rc-peer__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.rc-peer__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.rc-peer__label {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.rc-peer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc-peer__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

.rc-peer__list li + li {
  margin-top: var(--space-2);
}

.rc-peer__list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
}

/* Alternate (primary-50) band: keep the card surface, align the hairlines. */
.research-alternate .rc-peer {
  border-color: var(--color-section-alt-border);
}

.research-alternate .rc-peer__icon {
  background-color: var(--color-section-alt-border);
  color: var(--color-section-alt-accent);
}

.research-alternate .rc-peer__title {
  color: var(--color-section-alt-heading);
}

.research-alternate .rc-peer__desc,
.research-alternate .rc-peer__list li {
  color: var(--color-section-alt-text);
}

.research-alternate .rc-peer__label {
  color: var(--color-section-alt-muted);
}

/* ---- Potential collaboration models (four cards) ------------------------- */
.rc-model {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
}

.rc-model__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-4);
}

.rc-model__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.25rem;
  flex-shrink: 0;
}

[data-theme="dark"] .rc-model__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.rc-model__label {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.rc-model__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.rc-model__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* ---- Principles for collaboration (restrained editorial list, dark band) - */
/* Mapped onto the scoped --rs token set of the .research-dark band, exactly
   like Research Strengths and the cross-disciplinary cards. */
.rc-principles {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rs-border);
}

.rc-principle {
  padding: clamp(var(--space-5), 3vw, var(--space-6)) 0;
  border-bottom: 1px solid var(--rs-border);
}

@media (min-width: 768px) {
  .rc-principle {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 0 var(--space-6);
    align-items: start;
  }
}

.rc-principle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: var(--space-3);
  border: 1px solid var(--rs-border);
  border-radius: var(--radius-md);
  background-color: var(--rs-chip);
  color: var(--rs-accent);
  font-size: 1.0625rem;
  flex-shrink: 0;
}

.rc-principle__title {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--rs-heading);
}

.rc-principle__desc {
  margin: 0;
  max-width: var(--content-measure);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--rs-text);
}

/* ---- How a collaboration could begin (three connected steps) ------------- */
.rc-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {
  .rc-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.rc-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.rc-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-4);
}

.rc-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.25rem;
  flex-shrink: 0;
}

[data-theme="dark"] .rc-step__icon {
  background: rgba(99, 179, 237, 0.12);
  color: var(--primary-300);
}

.rc-step__num {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.rc-step__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--color-heading);
}

.rc-step__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* Decorative flow arrow between steps on the three-column desktop grid. The
   numbered sequence stays fully understandable without it. */
@media (min-width: 992px) {
  .rc-step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 1.05rem;
    right: calc(-1 * var(--space-6));
    width: var(--space-6);
    text-align: center;
    color: var(--color-border);
    font-size: 1rem;
    line-height: 1;
  }
}

/* Alternate (primary-50) band: align the step hairlines and icons. */
.research-alternate .rc-step__icon {
  background-color: var(--color-section-alt-border);
  color: var(--color-section-alt-accent);
}

.research-alternate .rc-step__title {
  color: var(--color-section-alt-heading);
}

.research-alternate .rc-step__desc {
  color: var(--color-section-alt-text);
}

.research-alternate .rc-step__num {
  color: var(--color-section-alt-muted);
}

@media (min-width: 992px) {
  .research-alternate .rc-step:not(:last-child)::after {
    color: var(--color-section-alt-border);
  }
}

/* ---- Page anchor targets must clear the fixed header --------------------- */
/* #principles is already covered by the shared rule in section 49 and
   #collaboration by the shared rule in section 45. */
#who,
#models,
#process {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ==========================================================================
   52. Blog & Insights (blog.html)

   Editorial listing driven entirely by js/blog-data.js + js/blog.js. The
   markup is a set of empty containers the renderer fills:
     #blog-featured-inner  — the single featured post
     #blog-grid            — the paginated regular listing
     #blog-results         — live result count
     #blog-empty           — no-results state
     #blog-pagination      — page controls

   Page rhythm: intro (base) → featured band (.blog-featured-section) →
   search (base) → articles band (.blog-articles-section). Every colour comes
   from theme tokens so both themes are covered. Article links are inert
   placeholders until real permalinks exist (see js/blog.js).
   ========================================================================== */

/* ---- Eyebrow (shared by intro + section headers) ------------------------- */
.blog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .blog-eyebrow {
  color: var(--primary-300);
}

.blog-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

/* ---- Page introduction --------------------------------------------------- */
.blog-intro {
  padding-block: clamp(var(--space-6), 5vw, var(--space-8)) clamp(var(--space-5), 3vw, var(--space-6));
}

.blog-intro__header {
  max-width: var(--content-measure);
}

.blog-intro__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 2.4vw + 1.2rem, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.blog-intro__lead {
  max-width: 640px;
  margin: var(--space-4) 0 0;
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-muted);
}

/* ---- Featured post ------------------------------------------------------- */
.blog-featured-section {
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
  background-color: var(--color-section);
}

.blog-featured {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.blog-featured:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .blog-featured:hover {
  border-color: var(--primary-600);
}

.blog-featured__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--color-section);
}

.blog-featured__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-featured:hover .blog-featured__media img {
  transform: scale(1.03);
}

.blog-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}

.blog-featured__eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.blog-featured__category {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .blog-featured__category {
  color: var(--primary-300);
}

.blog-featured__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.375rem, 1.4vw + 1rem, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.blog-featured__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-featured__link:hover {
  color: var(--primary-500);
}

[data-theme="dark"] .blog-featured__link:hover {
  color: var(--primary-300);
}

.blog-featured__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.blog-featured__desc {
  margin: 0 0 var(--space-5);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}

.blog-featured__author-bio {
  margin: var(--space-4) 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ---- Byline: author (portrait + name) then icon-only metadata ------------ */
/* Shared verbatim by the featured post and every regular card, so portrait
   size, spacing and alignment stay identical across both. */
.blog-byline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.blog-author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.blog-author__portrait {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: var(--color-section);
  object-fit: cover;
}

.blog-author__name {
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.blog-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Separator dot between the date and the reading duration. */
.blog-meta__item + .blog-meta__item::before {
  content: "\00b7";
  margin-right: 0.4rem;
  color: var(--color-border);
}

.blog-meta .bi {
  font-size: 0.9em;
  line-height: 1;
  color: var(--color-muted);
}

/* ---- Search -------------------------------------------------------------- */
.blog-search-section {
  padding-block: clamp(var(--space-5), 3vw, var(--space-6)) 0;
}

.blog-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 640px;
}

.blog-search__icon {
  position: absolute;
  left: var(--space-4);
  display: inline-flex;
  font-size: 1rem;
  color: var(--color-muted);
  pointer-events: none;
}

.blog-search__input {
  width: 100%;
  padding: 0.85rem 3.25rem 0.85rem calc(var(--space-4) + 1.5rem);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.blog-search__input::placeholder {
  color: var(--color-muted);
}

.blog-search__input:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

[data-theme="dark"] .blog-search__input:focus {
  box-shadow: 0 0 0 3px rgba(92, 171, 244, 0.22);
}

.blog-search__clear {
  position: absolute;
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.blog-search__clear:hover {
  background-color: var(--color-section);
  color: var(--color-text);
}

.blog-search__clear:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.blog-disclaimer {
  margin: var(--space-4) 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ---- Articles listing ---------------------------------------------------- */
.blog-articles-section {
  padding-block: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-7), 5vw, var(--space-9));
  background-color: var(--color-section);
}

.blog-results {
  margin: 0 0 var(--space-5);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-5), 2.5vw, var(--space-6));
}

.blog-card {
  display: grid;
  grid-template-columns: 1fr; /* stacked: image above content (narrow phones) */
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .blog-card:hover {
  border-color: var(--primary-600);
}

.blog-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--color-section);
}

.blog-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card__media img {
  transform: scale(1.04);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(var(--space-4), 2vw, var(--space-5));
}

.blog-card__category {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .blog-card__category {
  color: var(--primary-300);
}

.blog-card__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.blog-card__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-card:hover .blog-card__link {
  color: var(--primary-500);
}

[data-theme="dark"] .blog-card:hover .blog-card__link {
  color: var(--primary-300);
}

.blog-card__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.blog-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.blog-card--placeholder {
  border-style: dashed;
  opacity: 0.92;
}

.blog-card__media--placeholder {
  position: relative;
  background: linear-gradient(135deg, var(--color-section), rgba(25, 118, 210, 0.08));
}

.blog-card__badge {
  position: absolute;
  right: var(--space-3);
  top: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  background-color: rgba(15, 23, 42, 0.72);
  color: #FFF;
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-card__category--placeholder {
  color: var(--color-muted);
}

.blog-card__note {
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* Push the author + metadata to the foot of the card so every card in a row
   aligns its byline. */
.blog-card__body .blog-byline {
  margin-top: auto;
  padding-top: var(--space-4);
}

/* ---- Image fallback (broken source degrades to a quiet tone block) ------- */
.blog-img--failed {
  visibility: hidden;
}

.blog-img-wrap--failed {
  background-color: var(--color-section);
}

/* ---- Empty state --------------------------------------------------------- */
.blog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 5vw, var(--space-8)) var(--space-4);
  text-align: center;
}

.blog-empty__message {
  margin: 0;
  font-size: 1rem;
  color: var(--color-muted);
}

/* ---- Pagination ---------------------------------------------------------- */
.blog-pagination {
  padding-block: clamp(var(--space-5), 3vw, var(--space-6));
}

.blog-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-pagination__item {
  display: flex;
}

.blog-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.blog-pagination__link:hover:not(:disabled) {
  border-color: var(--primary-300);
  color: var(--primary-600);
}

[data-theme="dark"] .blog-pagination__link:hover:not(:disabled) {
  border-color: var(--primary-600);
  color: var(--primary-300);
}

.blog-pagination__link.is-current {
  color: #FFFFFF;
  background-color: var(--primary-500);
  border-color: var(--primary-500);
}

.blog-pagination__link:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.blog-pagination__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.blog-pagination__link--prev,
.blog-pagination__link--next {
  padding: 0 var(--space-4);
}

/* ---- Responsive ---------------------------------------------------------- */
/* Base (< 576px): single-column listing, cards stacked image-above-content to
   keep text readable on narrow screens. */

/* ≥ 576px: every regular card turns horizontal — image left, content right.
   The listing is still a single column, so each card gets the full row width. */
@media (min-width: 576px) {
  .blog-card {
    grid-template-columns: min(40%, 240px) minmax(0, 1fr);
  }

  .blog-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 200px;
  }
}

/* ≥ 992px: the regular listing becomes exactly TWO horizontal cards per row.
   The featured post stays full width, above and separate from this grid. */
@media (min-width: 992px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-featured {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .blog-featured__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 340px;
  }
}

/* ==========================================================================
   54. FAQ page (faq.html)

   A searchable, category-filtered question set driven by js/faq-data.js +
   js/faq.js. The markup is a set of empty containers the renderer fills:
     #faq-categories — category filter buttons (generated from the dataset)
     #faq-list       — the accordion of question items
     #faq-results    — live result count (role="status")
     #faq-empty      — no-matches state

   Reuses the shared .faq-item accordion component (section 24, Umanar) rather
   than redefining it. Only the FAQ-page presentation — a category label above
   each question and an optional "Related" link row — is added, scoped to
   .faq-page so the product-page accordion is untouched. The search field and
   filter pills follow the established .blog-search / .cs-filter patterns.

   Page rhythm: intro + search (body surface) → questions band
   (.faq-body, section surface) → shared .final-cta--card CTA. Every colour
   comes from theme tokens, so both themes are covered.
   ========================================================================== */

/* ---- Eyebrow ------------------------------------------------------------- */
.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .faq-eyebrow {
  color: var(--primary-300);
}

.faq-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

/* ---- Introduction + search ----------------------------------------------- */
.faq-intro {
  padding-block: clamp(var(--space-6), 5vw, var(--space-8)) clamp(var(--space-5), 3vw, var(--space-6));
}

.faq-intro__header {
  max-width: var(--content-measure);
}

.faq-intro__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 2.4vw + 1.2rem, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.faq-intro__lead {
  max-width: 660px;
  margin: var(--space-4) 0 0;
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-muted);
}

.faq-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 640px;
  margin-top: var(--space-5);
}

.faq-search__icon {
  position: absolute;
  left: var(--space-4);
  display: inline-flex;
  font-size: 1rem;
  color: var(--color-muted);
  pointer-events: none;
}

.faq-search__input {
  width: 100%;
  padding: 0.85rem 3.25rem 0.85rem calc(var(--space-4) + 1.5rem);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.faq-search__input::placeholder {
  color: var(--color-muted);
}

.faq-search__input:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

[data-theme="dark"] .faq-search__input:focus {
  box-shadow: 0 0 0 3px rgba(92, 171, 244, 0.22);
}

.faq-search__clear {
  position: absolute;
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.faq-search__clear:hover {
  background-color: var(--color-section);
  color: var(--color-text);
}

.faq-search__clear:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* ---- Questions band ------------------------------------------------------ */
.faq-body {
  background-color: var(--color-section);
}

/* ---- Category filter ----------------------------------------------------- */
.faq-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.faq-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.faq-cat:hover {
  border-color: var(--primary-300);
  color: var(--primary-600);
}

[data-theme="dark"] .faq-cat:hover {
  border-color: var(--primary-600);
  color: var(--primary-300);
}

.faq-cat.is-active {
  color: #FFFFFF;
  background-color: var(--primary-500);
  border-color: var(--primary-500);
}

.faq-cat.is-active:hover {
  color: #FFFFFF;
}

.faq-cat:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.faq-cat__count {
  padding: 0.15rem 0.4rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-muted);
  background-color: var(--color-section);
  border-radius: var(--radius-pill);
}

.faq-cat.is-active .faq-cat__count {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.22);
}

/* ---- Results count ------------------------------------------------------- */
.faq-results {
  margin: 0 0 var(--space-5);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* ---- Question list (page-scoped tuning of the shared accordion) -----------
   The shared .faq-list is centered at 800px; on this page the list is aligned
   left with the intro and filter bar and bounded to the content measure so the
   band reads as one column. */
.faq-page .faq-list {
  max-width: var(--content-measure);
  margin: 0;
}

/* Category label sits above the question inside the shared toggle row. */
.faq-page .faq-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.faq-page .faq-item__category {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .faq-page .faq-item__category {
  color: var(--primary-300);
}

/* ---- Answer links + related links ---------------------------------------- */
.faq-page .faq-item__answer-inner a {
  color: var(--primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-page .faq-item__answer-inner a:hover {
  color: var(--primary-500);
}

[data-theme="dark"] .faq-page .faq-item__answer-inner a {
  color: var(--primary-300);
}

.faq-page .faq-item__related {
  padding: 0 var(--space-5) var(--space-5) 0;
}

.faq-page .faq-item__related-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.faq-page .faq-item__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-page .faq-item__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--primary-600);
  text-decoration: none;
}

.faq-page .faq-item__link:hover {
  text-decoration: underline;
}

.faq-page .faq-item__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

[data-theme="dark"] .faq-page .faq-item__link {
  color: var(--primary-300);
}

/* ---- Empty state --------------------------------------------------------- */
.faq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 5vw, var(--space-8)) var(--space-4);
  font-size: 1rem;
  text-align: center;
  color: var(--color-muted);
}

/* The flex display above would otherwise defeat the [hidden] attribute the
   renderer toggles, so keep the no-matches panel genuinely hidden. */
.faq-empty[hidden] {
  display: none;
}

.faq-empty__message {
  margin: 0;
  font-size: 1rem;
  color: var(--color-muted);
}

/* ==========================================================================
   55. About page (about.html)

   Editorial company-story page reusing the shared design system: tokens, type
   scale, the .site-btn pair, the mega-menu header, footer and the final-cta
   reveal in js/main.js. Static HTML — no page-specific script.

   Sections:
     .ab-hero       — two-column identity hero (copy + the company logo)
     .ab-journey    — historical timeline (#journey, target of the hero CTA)
     .ab-products   — Beyond Projects (two-column editorial band)
     .ab-philosophy — Engineering with Intent (four numbered principles)
     .ab-experience — From Ideas to Working Solutions (capability areas)
     .ab-next       — The Next Chapter (restrained dark band)
     .final-cta     — shared light closing CTA band

   Every colour comes from theme tokens so both themes are covered; the hero
   logo swaps between its light and dark variants exactly like the header brand.
   Band rhythm: body → body → section → body → section → dark → light-CTA.
   ========================================================================== */

/* ---- Shared page primitives --------------------------------------------- */
.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.ab-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .ab-eyebrow {
  color: var(--primary-300);
}

[data-theme="dark"] .ab-eyebrow::before {
  background-color: var(--primary-300);
}

.ab-section-head {
  max-width: var(--content-measure);
}

.ab-section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.ab-section-lead {
  max-width: 62ch;
  margin: var(--space-4) 0 0;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-muted);
}

/* Anchor targets clear the fixed header (mirrors the product/research pages). */
.about-page section[id] {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ---- Hero ---------------------------------------------------------------- */
.ab-hero {
  padding-block: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-7), 5vw, var(--space-9));
}

.ab-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: center;
}

.ab-hero__intro {
  max-width: var(--content-measure);
}

.ab-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 2.6vw + 1.2rem, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.ab-hero__lead {
  max-width: 60ch;
  margin: var(--space-5) 0 0;
  font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.25rem);
  line-height: 1.65;
  color: var(--color-text);
}

.ab-hero__text {
  max-width: 60ch;
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

.ab-hero__actions {
  margin-top: var(--space-6);
}

/* Logo panel: a restrained brand-tinted surface that keeps the artwork's
   proportions (object-fit: contain) and swaps variants with the theme. */
.ab-hero__logo {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  background-color: var(--color-section-alt);
  border: 1px solid var(--color-section-alt-border);
  border-radius: var(--radius-xl);
}

.ab-hero__logo-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(140px, 18vw, 220px);
  object-fit: contain;
}

.ab-hero__logo-img--dark {
  display: none;
}

[data-theme="dark"] .ab-hero__logo-img--light {
  display: none;
}

[data-theme="dark"] .ab-hero__logo-img--dark {
  display: block;
}

/* ---- Journey timeline (compact) ------------------------------------------
   Mobile-first: a single column with the rail in the left padding. From 768px
   the item becomes a two-column grid — a narrow date column on the left and the
   milestone body on the right — with the rail centred in the column gap.
   All geometry derives from the custom properties on .ab-timeline so the whole
   rail shifts in one place per breakpoint. */
.ab-timeline {
  --tl-date-w: 7rem;                               /* date column (>=768px)   */
  --tl-rail-w: 1.25rem;                            /* rail lane               */
  --tl-content-gap: var(--space-4);                /* rail lane -> body       */
  --tl-rail-x: 0.65rem;                            /* rail centre (mobile)    */
  --tl-row-gap: var(--space-5);

  display: grid;
  gap: var(--tl-row-gap);
  margin: clamp(var(--space-6), 4vw, var(--space-8)) 0 0;
  padding: 0;
  list-style: none;
}

.ab-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-left: 1.9rem;                            /* rail lane (mobile)      */
}

/* Node (ring) on the rail, vertically centred on the first line. */
.ab-timeline__item::before {
  content: "";
  position: absolute;
  left: var(--tl-rail-x);
  top: 0.7rem;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: var(--radius-pill);
  background-color: var(--color-body);
  border: 2px solid var(--primary-500);
  z-index: 2;
}

[data-theme="dark"] .ab-timeline__item::before {
  background-color: var(--color-body);
  border-color: var(--primary-300);
}

/* Connector: from this node down through the row gap to the next node. */
.ab-timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: var(--tl-rail-x);
  top: calc(0.7rem + 8px);
  bottom: calc(-1 * (var(--tl-row-gap) + 0.7rem));
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--color-border);
  z-index: 1;
}

/* The 2015 customer-reach milestone gets a slightly stronger node. */
.ab-timeline__item--highlight::before {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
  transform: translate(-50%, -50%) scale(1.3);
}

[data-theme="dark"] .ab-timeline__item--highlight::before {
  background-color: var(--primary-300);
  border-color: var(--primary-300);
}

.ab-timeline__date {
  margin: 0 0 var(--space-1);
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-500);
}

[data-theme="dark"] .ab-timeline__date {
  color: var(--primary-300);
}

.ab-timeline__body {
  min-width: 0;
}

.ab-timeline__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.ab-timeline__desc {
  max-width: 62ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* ---- Journey thumbnails + hover preview ---------------------------------- */
.ab-timeline__media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.ab-timeline__media-label {
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  color: var(--color-muted);
}

.ab-timeline__thumb {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 88px;
  height: 58px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-card);
  cursor: zoom-in;
  overflow: visible;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ab-timeline__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-md) - 1px);
  /* Contain preserves each supplied asset's natural aspect ratio: logos are
     never cropped and screenshots keep their full interface. The card-coloured
     frame shows through the letterbox area. */
  object-fit: contain;
  transform-origin: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Logos keep their proportions, with a little inset so edges are not clipped. */
.ab-timeline__thumb--logo .ab-timeline__thumb-img {
  object-fit: contain;
  padding: 5px;
  background-color: var(--color-card);
}

/* The current identity swaps variants with the theme, matching the page hero. */
.ab-timeline__thumb-img--dark {
  display: none;
}

[data-theme="dark"] .ab-timeline__thumb-img--light {
  display: none;
}

[data-theme="dark"] .ab-timeline__thumb-img--dark {
  display: block;
}

.ab-timeline__thumb:hover,
.ab-timeline__thumb:focus-visible,
.ab-timeline__thumb.is-zoomed {
  z-index: 6;
  border-color: var(--primary-400);
}

/* Enlarge ~2.6x on hover / keyboard focus / tap-toggle (is-zoomed). Sits above
   neighbouring content via the raised z-index and never reflows the layout. */
.ab-timeline__thumb:hover .ab-timeline__thumb-img,
.ab-timeline__thumb:focus-visible .ab-timeline__thumb-img,
.ab-timeline__thumb.is-zoomed .ab-timeline__thumb-img {
  transform: scale(2.6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.ab-timeline__thumb:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* ---- Journey stat (2015 customer reach) ---------------------------------- */
.ab-timeline__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 34rem;
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-section-alt-border);
  border-radius: var(--radius-md);
  background-color: var(--color-section-alt);
}

.ab-timeline__stat-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-section-alt-accent);
}

.ab-timeline__stat-label {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-section-alt-text);
}

/* ---- Product evolution strip (Libra05 -> Yaazh) -------------------------- */
.ab-evolution {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-7) 0 0;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px solid var(--color-section-alt-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-section-alt);
}

.ab-evolution__intro {
  min-width: 0;
}

.ab-evolution__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-section-alt-accent);
}

.ab-evolution__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  color: var(--color-section-alt-heading);
}

.ab-evolution__desc {
  max-width: 64ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-section-alt-text);
}

.ab-evolution__stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.ab-evolution__stage {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-section-alt-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-card);
  color: var(--color-section-alt-heading);
  font-size: 0.875rem;
}

.ab-evolution__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-section-alt-accent);
  color: var(--color-body);
  font-size: 0.875rem;
}

.ab-evolution__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.ab-evolution__stage-name {
  font-weight: var(--weight-semibold);
}

.ab-evolution__stage-meta {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-section-alt-muted);
}

.ab-evolution__stage--link {
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.ab-evolution__stage--link:hover {
  border-color: var(--color-section-alt-accent);
  transform: translateY(-1px);
}

.ab-evolution__stage--link:focus-visible {
  outline: 2px solid var(--color-section-alt-accent);
  outline-offset: 2px;
}

.ab-evolution__arrow {
  color: var(--color-section-alt-accent);
  font-size: 1.125rem;
  line-height: 1;
}

/* ---- Journey timeline — desktop two-column grid -------------------------- */
@media (min-width: 768px) {
  .ab-timeline {
    --tl-rail-w: 1.5rem;
    --tl-rail-x: calc(var(--tl-date-w) + var(--tl-rail-w) / 2);
    --tl-row-gap: clamp(var(--space-6), 3.5vw, var(--space-7));
  }

  .ab-timeline__item {
    grid-template-columns: var(--tl-date-w) minmax(0, 1fr);
    column-gap: calc(var(--tl-rail-w) + var(--tl-content-gap));
    padding-left: 0;
  }

  .ab-timeline__date {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .ab-timeline__body {
    grid-column: 2;
    grid-row: 1;
  }

  .ab-evolution {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-timeline__thumb-img {
    transition: none;
  }
}

/* ---- Beyond Projects ----------------------------------------------------- */
.ab-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-5), 3vw, var(--space-7));
}

.ab-split__aside {
  max-width: 26rem;
}

.ab-split__body {
  max-width: 62ch;
}

.ab-split__body p {
  margin: 0 0 var(--space-4);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
}

.ab-points {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.ab-points li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.ab-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
}

.ab-cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--primary-600);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.ab-cta-link:hover {
  color: var(--primary-700);
  gap: var(--space-3);
}

.ab-cta-link .bi {
  transition: transform var(--transition-fast);
}

.ab-cta-link:hover .bi {
  transform: translateX(2px);
}

.ab-cta-link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

[data-theme="dark"] .ab-cta-link {
  color: var(--primary-300);
}

[data-theme="dark"] .ab-cta-link:hover {
  color: var(--primary-200);
}

/* ---- Engineering with Intent (principles) -------------------------------- */
.ab-principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-5), 3vw, var(--space-6));
  margin: clamp(var(--space-6), 4vw, var(--space-8)) 0 0;
  padding: 0;
  list-style: none;
}

.ab-principle {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border);
}

.ab-principle__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ab-principle__num {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--primary-500);
}

.ab-principle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-card);
  color: var(--primary-500);
  font-size: 1rem;
  line-height: 1;
}

.ab-principle__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.ab-principle__desc {
  max-width: 46ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

[data-theme="dark"] .ab-principle__num,
[data-theme="dark"] .ab-principle__icon {
  color: var(--primary-300);
}

/* ---- From Ideas to Working Solutions (capability areas) ------------------ */
.ab-areas {
  display: grid;
  grid-template-columns: 1fr;
  margin: clamp(var(--space-6), 4vw, var(--space-8)) 0 0;
  border-bottom: 1px solid var(--color-border);
}

.ab-area {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.ab-area__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.ab-area__desc {
  max-width: 62ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* ---- The Next Chapter (restrained dark band) ----------------------------- */
.ab-next {
  /* Scoped dark tokens (dark in BOTH themes; not global tokens). */
  --ab-next-bg: #07284D;
  --ab-next-heading: #F8FAFC;
  --ab-next-text: #CBD5E1;
  --ab-next-accent: #3399FF;
  --ab-next-grid: rgba(248, 250, 252, 0.05);
  --ab-next-glow: rgba(51, 153, 255, 0.16);

  position: relative;
  overflow: hidden;
  background-color: var(--ab-next-bg);
  color: var(--ab-next-text);
  padding-block: clamp(var(--space-7), 5vw, var(--space-9));
}

[data-theme="dark"] .ab-next {
  --ab-next-bg: #161B22;
  --ab-next-grid: rgba(148, 163, 184, 0.06);
  --ab-next-glow: rgba(51, 153, 255, 0.12);
}

/* Structured background: fine engineering grid + soft radial glow, ~5%
   prominence. Purely decorative. */
.ab-next::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ab-next-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ab-next-grid) 1px, transparent 1px),
    radial-gradient(46% 62% at 50% 0%, var(--ab-next-glow), transparent 70%);
  background-size: 44px 44px, 44px 44px, auto;
  pointer-events: none;
}

.ab-next__inner {
  position: relative; /* keep content above the background layer */
}

.ab-next__body {
  max-width: 48rem;
}

/* Scoped dark-band overrides (parent-qualified so they beat the themed
   .ab-eyebrow rules regardless of specificity). */
.ab-next .ab-eyebrow--on-dark {
  color: var(--ab-next-accent);
}

.ab-next .ab-eyebrow--on-dark::before {
  background-color: var(--ab-next-accent);
}

.ab-next .ab-section-title--on-dark {
  color: var(--ab-next-heading);
}

.ab-next__lead {
  max-width: 60ch;
  margin: var(--space-4) 0 0;
  font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.25rem);
  line-height: 1.65;
  color: var(--ab-next-heading);
}

.ab-next__text {
  max-width: 62ch;
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ab-next-text);
}

.ab-next__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--ab-next-accent);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.ab-next__link:hover {
  color: var(--primary-200);
  gap: var(--space-3);
}

.ab-next__link .bi {
  transition: transform var(--transition-fast);
}

.ab-next__link:hover .bi {
  transform: translateX(2px);
}

.ab-next__link:focus-visible {
  outline: 2px solid var(--ab-next-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Responsive: column layouts ------------------------------------------ */
@media (min-width: 768px) {
  .ab-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(var(--space-6), 4vw, var(--space-8));
  }
}

@media (min-width: 992px) {
  .ab-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(var(--space-7), 5vw, var(--space-9));
  }

  .ab-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(var(--space-7), 5vw, var(--space-9));
    align-items: start;
  }

  .ab-principles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   56. Certifications & Memberships (certifications.html)
   --------------------------------------------------------------------------
   Compact hero + two registration cards with PDF modal viewer.
   ========================================================================== */

/* ---- Shared page primitives (mirrors the about-page eyebrow pattern) ----- */
.cred-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.cred-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .cred-eyebrow {
  color: var(--primary-300);
}

[data-theme="dark"] .cred-eyebrow::before {
  background-color: var(--primary-300);
}

.cred-section-head {
  max-width: var(--content-measure);
}

.cred-section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.cred-section-lead {
  max-width: 62ch;
  margin: var(--space-4) 0 0;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-muted);
}

/* Anchor targets clear the fixed header. */
.cred-page section[id] {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ---- Hero ---------------------------------------------------------------- */
.cred-hero {
  padding-block: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-6), 4vw, var(--space-7));
}

.cred-hero__inner {
  max-width: 68ch;
}

.cred-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 3.4vw + 1.1rem, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.cred-hero__lead {
  margin: var(--space-5) 0 0;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.65;
  color: var(--color-text);
}

/* ---- Registration document cards ----------------------------------------- */
.cred-registrations__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  align-items: stretch;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
}

.cred-doc {
  min-width: 0; /* never force horizontal overflow */
}

.cred-doc__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.cred-doc__body:hover {
  transform: translateY(-2px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .cred-doc__body:hover {
  border-color: rgba(133, 192, 247, 0.4);
}

.cred-doc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.375rem;
  flex-shrink: 0;
}

[data-theme="dark"] .cred-doc__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.cred-doc__title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.cred-doc__issuer {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--primary-600);
}

[data-theme="dark"] .cred-doc__issuer {
  color: var(--primary-300);
}

/* Certificate number (placeholder until actual values supplied) */
.cred-doc__number {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.cred-doc__number-label {
  font-weight: var(--weight-medium);
}

.cred-doc__number-value {
  font-family: var(--font-code);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

/* Document action (View Certificate button) */
.cred-doc__action {
  margin-top: auto;
  padding-top: var(--space-4);
}

.cred-doc__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: #fff;
  background-color: var(--primary-500);
  border: 1px solid var(--primary-500);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.cred-doc__view-btn:hover,
.cred-doc__view-btn:focus-visible {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.cred-doc__view-btn .bi {
  font-size: 1rem;
  flex-shrink: 0;
}

.cred-doc__view-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Two-up document cards from the tablet breakpoint up. */
@media (min-width: 768px) {
  .cred-registrations__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- PDF Certificate Modal ----------------------------------------------- */
.cert-modal {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: min(95vw, 1440px);
  height: 90vh;
  height: 90dvh;
  max-width: min(95vw, 1440px);
  max-height: 90vh;
  max-height: 90dvh;
  min-width: min(95vw, 1100px);
  padding: 0;
  background-color: var(--color-card);
  color: var(--color-text);
}

.cert-modal::backdrop {
  background-color: rgba(22, 27, 34, 0.6);
  backdrop-filter: blur(2px);
  animation: cert-modal-backdrop-fade var(--transition-fast) ease;
}

@keyframes cert-modal-backdrop-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-theme="dark"] .cert-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

.cert-modal__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cert-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-card);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.cert-modal__close:hover,
.cert-modal__close:focus-visible {
  background-color: var(--primary-50);
  color: var(--primary-600);
  transform: scale(1.05);
}

[data-theme="dark"] .cert-modal__close:hover,
[data-theme="dark"] .cert-modal__close:focus-visible {
  background-color: rgba(133, 192, 247, 0.15);
  color: var(--primary-300);
}

.cert-modal__close .bi {
  font-size: 1.25rem;
}

.cert-modal__header {
  padding: var(--space-5) var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cert-modal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--color-heading);
}

.cert-modal__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.cert-modal__viewer {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background-color: var(--color-bg);
}

.cert-modal__viewer iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--color-bg);
}

.cert-modal__fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--color-muted);
  background-color: var(--color-bg);
}

.cert-modal__fallback[hidden] {
  display: none;
}

.cert-modal__fallback:not([hidden]) {
  display: flex;
}

.cert-modal__fallback .bi {
  font-size: 3rem;
  color: var(--primary-500);
}

[data-theme="dark"] .cert-modal__fallback .bi {
  color: var(--primary-300);
}

.cert-modal__fallback span {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 20ch;
}

@media (max-width: 575.98px) {
  .cert-modal {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    min-width: 100vw;
  }

  .cert-modal__close {
    top: var(--space-4);
    right: var(--space-4);
    width: 3rem;
    height: 3rem;
  }

  .cert-modal__header {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .cert-modal__title {
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cert-modal::backdrop {
    animation: none;
  }
  .cert-modal__close {
    transition: none;
  }
}

/* ==========================================================================
   57. Leadership (leadership.html)
   --------------------------------------------------------------------------
   Compact hero, three leadership profile cards, a restrained
   responsibility strip and the shared closing CTA band. Page-scoped .ld-
   prefix; reuses the shared tokens, the .final-cta band and the .site-btn
   component, and mirrors the about-page editorial primitives.

   The profile photographs are the approved portraits in images/team/ (1:1
   sources). They are shown in a consistent 4:5 frame with object-fit: cover
   and a slight upward bias so the faces stay well framed in the crop.

   Profile links: each slot is an anchor carrying a temporary "#" href and
   data-profile-placeholder, matching the pattern already used by
   research-team.html. The shared handler in js/main.js
   (initProfilePlaceholderLinks) keeps the placeholder from navigating or
   jumping the page to the top. To go live, replace the "#" href with the
   verified URL, add target="_blank" rel="noopener noreferrer" and remove
   data-profile-placeholder.
   Band rhythm: body → section → body → light-CTA.
   ========================================================================== */

/* ---- Shared page primitives (mirrors the about-page eyebrow pattern) ----- */
.ld-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.ld-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .ld-eyebrow {
  color: var(--primary-300);
}

[data-theme="dark"] .ld-eyebrow::before {
  background-color: var(--primary-300);
}

.ld-section-head {
  max-width: var(--content-measure);
}

.ld-section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.ld-section-lead {
  max-width: 62ch;
  margin: var(--space-4) 0 0;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-muted);
}

/* Anchor targets clear the fixed header. */
.leadership-page section[id] {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ---- Hero ---------------------------------------------------------------- */
.ld-hero {
  padding-block: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-6), 4vw, var(--space-7));
}

.ld-hero__inner {
  max-width: 68ch;
}

.ld-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 3.4vw + 1.1rem, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.ld-hero__lead {
  margin: var(--space-5) 0 0;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.65;
  color: var(--color-text);
}

/* ---- Leadership profile cards -------------------------------------------- */
.ld-profiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-5), 2.5vw, var(--space-6));
  align-items: stretch;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
}

.ld-profile {
  display: flex;
  flex-direction: column;
  min-width: 0; /* never force horizontal overflow */
  height: 100%;
  padding: clamp(var(--space-5), 2.5vw, var(--space-6));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.ld-profile:hover {
  transform: translateY(-2px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .ld-profile:hover {
  border-color: rgba(133, 192, 247, 0.4);
}

/* Portrait: one consistent frame for every leader. The supplied sources are
   square, so a 4:5 frame crops the width edges only; object-position is
   biased upward so the faces stay comfortably framed. */
.ld-profile__media {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-5);
}

.ld-profile__photo {
  display: block;
  width: 100%;
  max-width: 232px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
}

[data-theme="dark"] .ld-profile__photo {
  background-color: rgba(133, 192, 247, 0.12);
}

.ld-profile__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ld-profile__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.3125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.ld-profile__designation {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-600);
}

[data-theme="dark"] .ld-profile__designation {
  color: var(--primary-300);
}

.ld-profile__role {
  margin: var(--space-4) 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* Responsibility label: a quiet line above a hairline, not a badge. */
.ld-profile__responsibility {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--primary-600);
}

[data-theme="dark"] .ld-profile__responsibility {
  color: var(--primary-300);
}

/* Link from a leadership card to the individual profile page. The card keeps
   its existing layout; this is a quiet text action above the social links. */
.ld-profile__profile-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--primary-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ld-profile__profile-link .bi {
  font-size: 0.8125rem;
  transition: transform var(--transition-fast);
}

.ld-profile__profile-link:hover {
  color: var(--primary-700);
  text-decoration: underline;
}

.ld-profile__profile-link:hover .bi {
  transform: translateX(2px);
}

.ld-profile__profile-link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

[data-theme="dark"] .ld-profile__profile-link {
  color: var(--primary-300);
}

[data-theme="dark"] .ld-profile__profile-link:hover {
  color: var(--primary-200);
}

/* Professional links. Pinned to the card bottom so equal-height cards line
   up. Every slot is an anchor; a slot that still carries the temporary "#"
   href keeps the placeholder styling below until a real URL is supplied. */
.ld-profile__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.ld-profile__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 1.0625rem;
  text-decoration: none;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

/* ORCID, Google Scholar and Flipboard use their official brand marks as inline
   SVG (the sprite is defined once in leadership.html). The mark inherits the
   link colour, so it is neutral at rest and reveals the official brand colour
   on hover/focus — matching the shared link interaction. */
.ld-profile__link .ld-profile__icon {
  display: block;
  width: 1.0625rem;
  height: 1.0625rem;
  fill: currentColor;
}

.ld-profile__link--orcid { --ld-profile-brand: #A6CE39; }
.ld-profile__link--googlescholar { --ld-profile-brand: #4285F4; }
/* Flipboard's own mark colour (#F3F3F3) is designed for a dark background
   and would be invisible on the light card surface, so a legible neutral
   slate from the site palette is used for the hover/focus reveal instead. */
.ld-profile__link--flipboard { --ld-profile-brand: #64748B; }

.ld-profile__link:hover {
  color: var(--primary-600);
  border-color: var(--primary-500);
}

.ld-profile__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  color: var(--primary-600);
  border-color: var(--primary-500);
}

/* Brand links reveal their official brand colour instead of the primary
   hover colour. Declared after the generic hover/focus rules so it wins the
   tie. A temporary placeholder is excluded - it must never look like a
   working external profile. */
.ld-profile__link--brand:not(.ld-profile__link--placeholder):hover,
.ld-profile__link--brand:not(.ld-profile__link--placeholder):focus-visible {
  color: var(--ld-profile-brand);
  border-color: var(--ld-profile-brand);
}

[data-theme="dark"] .ld-profile__link:not(.ld-profile__link--brand):hover,
[data-theme="dark"] .ld-profile__link:not(.ld-profile__link--brand):focus-visible {
  color: var(--primary-300);
  border-color: var(--primary-300);
}

/* Unconfigured slot: a temporary "#" placeholder, so it is drawn as visibly
   inactive (muted mark, dashed edge, default cursor) and never adopts the
   primary or brand hover colours. It stays keyboard-reachable with a visible
   focus ring; initProfilePlaceholderLinks() in js/main.js stops it from
   navigating or jumping the page to the top. */
.ld-profile__link--placeholder {
  cursor: default;
  color: var(--color-muted);
  border-style: dashed;
}

.ld-profile__link--placeholder:hover,
.ld-profile__link--placeholder:focus-visible {
  color: var(--color-muted);
  border-color: var(--color-border);
}

[data-theme="dark"] .ld-profile__link--placeholder:hover,
[data-theme="dark"] .ld-profile__link--placeholder:focus-visible {
  color: var(--color-muted);
  border-color: var(--color-border);
}

/* Off-screen holder for the inline brand sprite defined at the top of
   leadership.html. Keeps the symbol definitions out of the layout. */
.ld-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Responsibility strip ------------------------------------------------- */
/* A restrained three-column strip describing the three roles above. It is a
   description of the same three positions — not an organisational chart. */
.ld-roles__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
  padding: 0;
  list-style: none;
}

.ld-role {
  min-width: 0;
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.ld-role__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.125rem;
  flex-shrink: 0;
}

[data-theme="dark"] .ld-role__mark {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.ld-role__title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-heading);
}

.ld-role__desc {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* Two-up from the tablet breakpoint, three-up on the desktop. */
@media (min-width: 768px) {
  .ld-profiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ld-roles__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .ld-profiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Individual leadership profile (ananda-siddhan.html)
   --------------------------------------------------------------------------
   Editorial profile page for the Founder & CEO. Builds on the shared tokens,
   the leadership eyebrow/section primitives (.ld-eyebrow, .ld-section-title,
   .ld-role cards), the about-page dark band (.ab-next) and timeline
   (.ab-timeline), the shared .hero-tags component, the .site-btn pair and
   the .final-cta band. No new colour values are introduced; every surface,
   border and text colour comes from the theme tokens.

   Sections:
     .as-hero       — two-column identity hero (copy + approved portrait)
     .as-profile    — editorial two-column professional profile
     .as-highlights — four compact positioning cards (.ld-role)
     .as-timeline   — supplied career milestones (.ab-timeline)
     .as-expertise  — four expertise groups with shared tag pills
     .as-focus      — dark "exploring what's next" band (.ab-next)
     .as-credentials— education and certification cards
     .as-leadership — company leadership copy + internal link list
     .as-connect    — verified contact/profile destinations
     .final-cta     — shared closing CTA band
   ========================================================================== */

/* Anchor targets clear the fixed header. */
.profile-page {
  /* Small-text neutral: the shared --color-muted (#73808C) sits just under
     4.5:1 on the light surfaces used here, so this page follows the careers
     page precedent and uses neutral-600 for muted copy. Dark mode keeps the
     bright shared token, which already clears AA. */
  --as-muted: var(--neutral-600);
}

[data-theme="dark"] .profile-page {
  --as-muted: var(--color-muted);
}

.profile-page section[id] {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ---- Hero ---------------------------------------------------------------- */
.as-hero {
  padding-block: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-7), 5vw, var(--space-9));
}

.as-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: center;
}

.as-hero__intro {
  max-width: 62ch;
}

.as-hero__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2.25rem, 3vw + 1.35rem, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-heading);
}

.as-hero__designation {
  margin: var(--space-3) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--primary-600);
}

[data-theme="dark"] .as-hero__designation {
  color: var(--primary-300);
}

.as-hero__descriptors {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--as-muted);
}

.as-hero__lead {
  max-width: 60ch;
  margin: var(--space-5) 0 0;
  font-size: clamp(1rem, 0.35vw + 0.96rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-text);
}

.as-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.as-hero__actions .site-btn {
  gap: var(--space-2);
}

/* Portrait: the approved images/team/ source in the same rounded rectangular
   treatment used by the leadership profile cards. */
.as-hero__media {
  width: 100%;
  max-width: 240px;
  margin: 0;
  justify-self: center;
}

.as-hero__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-section-alt);
  box-shadow: var(--shadow-md);
}

.as-hero__caption {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--as-muted);
}

@media (min-width: 992px) {
  .as-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .as-hero__media {
    max-width: 264px;
  }
}

/* ---- Professional profile ------------------------------------------------ */
.as-profile__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: start;
}

.as-profile__aside {
  max-width: var(--content-measure);
}

.as-profile__body {
  max-width: 66ch;
}

.as-profile__body p {
  margin: 0 0 var(--space-4);
  font-size: clamp(1rem, 0.25vw + 0.96rem, 1.0625rem);
  line-height: 1.75;
  color: var(--color-text);
}

.as-profile__body p:last-child {
  margin-bottom: 0;
}

/* Emphasis paragraph: one supplied sentence set apart, never a quotation. */
.as-profile__body .as-profile__emphasis {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--primary-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: var(--primary-50);
  color: var(--color-heading);
  font-weight: var(--weight-medium);
}

[data-theme="dark"] .as-profile__emphasis {
  border-left-color: var(--primary-300);
  background-color: rgba(133, 192, 247, 0.10);
}

@media (min-width: 992px) {
  .as-profile__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

/* ---- Professional highlights -------------------------------------------- */
.as-highlights {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .as-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .as-highlights {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- Career journey ------------------------------------------------------ */
.as-timeline {
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
}

.as-timeline__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #15803D;
}

[data-theme="dark"] .as-timeline__status {
  color: #4ADE80;
}

.as-timeline__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  flex-shrink: 0;
}

/* ---- Areas of expertise -------------------------------------------------- */
.as-expertise {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  margin-top: clamp(var(--space-6), 3.5vw, var(--space-7));
}

@media (min-width: 768px) {
  .as-expertise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.as-expertise__card {
  min-width: 0;
  padding: clamp(var(--space-5), 2.5vw, var(--space-6));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.as-expertise__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.as-expertise__num {
  font-family: var(--font-code);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--as-muted);
}

.as-expertise__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

/* The shared .hero-tags component is reused; only its leading margin is
   tightened inside a card. */
.as-expertise__tags {
  margin-top: 0;
  gap: 0.4rem;
}

.as-expertise__tags li {
  padding: 0.3125rem 0.5625rem;
  font-size: 0.75rem;
}

/* ---- Current technology interests (dark band) ---------------------------- */
.as-focus .ab-next__body {
  max-width: 60rem;
}

.as-focus__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(248, 250, 252, 0.14);
}

.as-focus__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(248, 250, 252, 0.14);
}

.as-focus__num {
  flex: 0 0 auto;
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  color: var(--ab-next-accent);
}

.as-focus__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.3vw + 0.96rem, 1.125rem);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--ab-next-heading);
}

.as-focus__note {
  max-width: 62ch;
  margin: var(--space-5) 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ab-next-text);
}

@media (min-width: 768px) {
  .as-focus__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}

/* ---- Education and certification ---------------------------------------- */
.as-credentials {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  margin-top: clamp(var(--space-6), 3.5vw, var(--space-7));
}

@media (min-width: 768px) {
  .as-credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.as-credential {
  min-width: 0;
  padding: clamp(var(--space-5), 2.5vw, var(--space-6));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.as-credential__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.25rem;
  line-height: 1;
}

[data-theme="dark"] .as-credential__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.as-credential__label {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--as-muted);
}

.as-credential__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 0.4vw + 1.05rem, 1.3125rem);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-heading);
}

.as-credential__issuer {
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  line-height: 1.6;
  color: var(--color-text);
}

.as-credential__meta {
  margin: var(--space-1) 0 0;
  font-family: var(--font-code);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--as-muted);
}

/* ---- Leadership at 05 IT Solutions -------------------------------------- */
.as-leadership {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: start;
}

.as-leadership__copy {
  max-width: 62ch;
}

.as-leadership__copy p {
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}

.as-leadership__copy p:first-of-type {
  margin-top: var(--space-5);
}

.as-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.as-links__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.as-links__item:hover {
  transform: translateY(-1px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .as-links__item:hover {
  border-color: rgba(133, 192, 247, 0.4);
}

.as-links__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1rem;
  line-height: 1;
}

[data-theme="dark"] .as-links__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.as-links__body {
  flex: 1 1 auto;
  min-width: 0;
}

.as-links__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-heading);
}

.as-links__desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--as-muted);
}

.as-links__arrow {
  flex: 0 0 auto;
  color: var(--as-muted);
  font-size: 0.875rem;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.as-links__item:hover .as-links__arrow,
.as-links__item:focus-visible .as-links__arrow {
  transform: translateX(2px);
  color: var(--primary-500);
}

@media (min-width: 992px) {
  .as-leadership {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

/* ---- Connect ------------------------------------------------------------- */
.as-connect {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-3), 2vw, var(--space-4));
  margin-top: clamp(var(--space-6), 3.5vw, var(--space-7));
}

@media (min-width: 768px) {
  .as-connect {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.as-connect__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.as-connect__item:hover {
  transform: translateY(-2px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .as-connect__item:hover {
  border-color: rgba(133, 192, 247, 0.4);
}

.as-connect__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.125rem;
  line-height: 1;
}

[data-theme="dark"] .as-connect__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.as-connect__icon--flipboard svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

.as-connect__body {
  flex: 1 1 auto;
  min-width: 0;
}

.as-connect__label {
  display: block;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--as-muted);
}

.as-connect__value {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-heading);
  overflow-wrap: anywhere;
}

.as-connect__arrow {
  flex: 0 0 auto;
  color: var(--as-muted);
  font-size: 0.875rem;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.as-connect__item:hover .as-connect__arrow,
.as-connect__item:focus-visible .as-connect__arrow {
  transform: translate(1px, -1px);
  color: var(--primary-500);
}

/* ==========================================================================
   58. Capabilities (capabilities.html)
   --------------------------------------------------------------------------
   Compact hero, six core capability cards, the dark "Platforms &
   Technologies" band with horizontally sliding logo tracks, a six-stage
   delivery sequence, a short product selection and the shared closing CTA.

   The technology band deliberately reuses the homepage Company Highlights
   treatment (deep blue in light mode, slate in dark mode, fine engineering
   grid, soft blue + red radial lighting, #3399FF accent) so it reads as a
   native part of the site rather than a borrowed widget.

   The logo tracks are pure CSS: each lane holds the category set twice - the
   second copy is aria-hidden - so a single translateX(-50%) keyframe loops
   seamlessly. No JavaScript is involved.
   ========================================================================== */

/* ---- Shared page primitives (mirrors the about-page eyebrow pattern) ----- */
.cap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.cap-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

[data-theme="dark"] .cap-eyebrow {
  color: var(--primary-300);
}

[data-theme="dark"] .cap-eyebrow::before {
  background-color: var(--primary-300);
}

.cap-section-head {
  max-width: var(--content-measure);
}

.cap-section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.cap-section-lead {
  max-width: 62ch;
  margin: var(--space-4) 0 0;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-muted);
}

/* Anchor targets clear the fixed header. */
.capabilities-page section[id] {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* ---- Hero ---------------------------------------------------------------- */
.cap-hero {
  padding-block: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-6), 4vw, var(--space-7));
}

.cap-hero__inner {
  max-width: 68ch;
}

.cap-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 3.4vw + 1.1rem, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.cap-hero__lead {
  margin: var(--space-5) 0 0;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.65;
  color: var(--color-text);
}

.cap-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

/* ---- Core capability cards ----------------------------------------------- */
.cap-core__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  align-items: stretch;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
}

.cap-card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* never force horizontal overflow */
  height: 100%;
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.cap-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .cap-card:hover {
  border-color: rgba(133, 192, 247, 0.4);
}

.cap-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.375rem;
  flex-shrink: 0;
}

[data-theme="dark"] .cap-card__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.cap-card__title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.cap-card__points {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.cap-card__points li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.cap-card__points li + li {
  margin-top: var(--space-2);
}

.cap-card__points li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
}

[data-theme="dark"] .cap-card__points li::before {
  background-color: var(--primary-300);
}

/* ---- Platforms & Technologies (dark band) --------------------------------- */
/* Modelled on the homepage Company Highlights section: the same deep blue
   band, engineering grid, radial lighting and brand accent. Dark in BOTH
   themes - this is the high-contrast beat of the page. */
.cap-tech-section {
  --cap-bg: #07284D;
  --cap-heading: #F8FAFC;
  --cap-text: #CBD5E1;
  --cap-muted: #94A3B8;
  --cap-accent: #3399FF;
  --cap-grid-line: rgba(248, 250, 252, 0.05);
  --cap-glow-blue: rgba(51, 153, 255, 0.16);
  --cap-glow-red: rgba(255, 51, 51, 0.07);
  --cap-divider: rgba(248, 250, 252, 0.12);
  --cap-tile: rgba(248, 250, 252, 0.06);
  --cap-tile-border: rgba(248, 250, 252, 0.14);

  position: relative;
  overflow: hidden; /* contains the sliding lanes - no page-level overflow */
  background-color: var(--cap-bg);
  color: var(--cap-text);
  padding-block: clamp(var(--space-7), 4vw, var(--space-8));
}

[data-theme="dark"] .cap-tech-section {
  --cap-bg: #161B22;
  --cap-grid-line: rgba(148, 163, 184, 0.06);
  --cap-glow-blue: rgba(51, 153, 255, 0.13);
}

/* Same decorative treatment as the homepage band (~5% prominence). */
.cap-tech-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--cap-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cap-grid-line) 1px, transparent 1px),
    radial-gradient(52% 70% at 18% 0%, var(--cap-glow-blue), transparent 70%),
    radial-gradient(38% 55% at 88% 100%, var(--cap-glow-red), transparent 65%);
  background-size: 44px 44px, 44px 44px, auto, auto;
  pointer-events: none;
}

.cap-tech-section > .container {
  position: relative; /* keep content above the background layer */
}

.cap-tech-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cap-accent);
}

.cap-tech-section__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  flex-shrink: 0;
}

.cap-tech-section__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cap-heading);
}

.cap-tech-section__lead {
  max-width: 62ch;
  margin: var(--space-3) 0 0;
  font-size: clamp(0.9375rem, 0.3vw + 0.9rem, 1.0625rem);
  line-height: 1.7;
  color: var(--cap-text);
}

/* ---- Off-screen holder for the inline brand sprite ------------------------- */
/* The sprite holds the technology <symbol> definitions. Without a size it
   would fall back to the 300x150 default of a replaced element and push the
   hero down, so it is taken out of the flow entirely. */
.cap-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- One continuous technology marquee ----------------------------------- */
/* A single horizontal row carries every technology. The category groups sit
   inside that row, separated by a thin vertical divider and a small category
   label, so the whole stack - items, labels and separators - travels
   together in one direction at one speed. */
.cap-marquee {
  margin-top: clamp(var(--space-6), 3vw, var(--space-7));
}

.cap-marquee__viewport {
  overflow: hidden;
  min-width: 0;
  /* Soften the entry/exit edges without a blur filter. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.cap-marquee__lane {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}

/* One pass of the full stack. The right padding is the seam spacing, so the
   gap between the last group of this set and the first group of the clone is
   identical to the spacing between any two groups. */
.cap-marquee__set {
  display: flex;
  align-items: center;
  gap: var(--cap-marquee-gap, 2.25rem);
  margin: 0;
  padding: 0 var(--cap-marquee-gap, 2.25rem) 0 0;
  list-style: none;
}

/* A category group: a small label followed by its technology items. The
   divider is a border on the group, so it travels with the content. */
/* A category group is a two-level block: the label row on top, the
   technology items row below. Both rows start at the group's own left edge,
   so a label always sits directly above the first item of its group and
   travels with it - no independent positioning, no separate animation.
   The divider is a border on the group, so it moves with the content. */
.cap-marquee__group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start; /* label and items share the group's left edge */
  gap: var(--cap-group-gap, 0.875rem);
  padding-left: var(--cap-marquee-gap, 2.25rem);
  border-left: 1px solid var(--cap-divider);
  flex-shrink: 0;
}

.cap-marquee__group-label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--cap-accent);
}

.cap-marquee__items {
  display: flex;
  align-items: center;
  gap: var(--cap-tech-gap, 0.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One compact logo + label item, flowing along the track. */
.cap-tech {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: 0.4375rem 0.8125rem;
  background-color: var(--cap-tile);
  border: 1px solid var(--cap-tile-border);
  border-radius: var(--radius-md);
}

.cap-tech__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  color: var(--cap-text);
}

.cap-tech__icon {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
}

/* Restrained text fallback for technologies with no available brand mark
   (Java, JavaFX, LM Studio) - a monogram tile in the same footprint as the
   SVG marks, never an unrelated logo. */
.cap-tech__mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--cap-accent);
  border: 1px solid var(--cap-tile-border);
  border-radius: var(--radius-sm);
}

.cap-tech__name {
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--cap-heading);
}

/* ---- Marquee motion ------------------------------------------------------- */
/* The lane holds the set twice, so shifting it by exactly -50% puts the
   second copy exactly where the first was: a seamless loop with no visible
   jump, gap or flicker. One direction, one speed, for the whole row. */
@keyframes cap-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.cap-marquee__lane {
  animation: cap-marquee-scroll var(--cap-marquee-speed, 48s) linear infinite;
}

/* ---- Delivery sequence ---------------------------------------------------- */
.cap-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: cap-step;
}

.cap-step {
  position: relative;
  min-width: 0;
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border);
}

.cap-step__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cap-step__num {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--primary-500);
}

.cap-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-card);
  color: var(--primary-500);
  font-size: 1rem;
  line-height: 1;
}

.cap-step__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.cap-step__desc {
  max-width: 46ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

[data-theme="dark"] .cap-step__num,
[data-theme="dark"] .cap-step__icon {
  color: var(--primary-300);
}

/* ---- Layout breakpoints ---------------------------------------------------- */
@media (min-width: 768px) {
  .cap-core__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cap-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Category label sits beside its track on wider screens. */
  .cap-track {
    grid-template-columns: 12.5rem minmax(0, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 992px) {
  .cap-core__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cap-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ---- Reduced motion -------------------------------------------------------- */
/* No continuous movement. The duplicate copy is dropped and the single row
   wraps into static, fully readable lines - so every technology stays
   visible and discoverable. */
@media (prefers-reduced-motion: reduce) {
  .cap-marquee__lane {
    animation: none;
    transform: none;
    width: auto;
  }

  .cap-marquee__set {
    flex-wrap: wrap;
  }

  .cap-marquee__set--clone {
    display: none;
  }

  .cap-marquee__viewport {
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
  }
}

/* ==========================================================================
   59. Careers (careers.html)
   --------------------------------------------------------------------------
   Editorial careers page reusing the site's shared section rhythm, theme
   tokens, button system and final CTA. The page deliberately publishes an
   honest empty openings state until verified vacancies exist. The application
   form is fully described and validated client-side; no success state is
   shown unless a configured endpoint accepts the submission.
   ========================================================================== */

/* ---- Shared page primitives ---------------------------------------------- */
/* Careers-scoped colour tokens. The shared --color-muted (#73808C) and
   --primary-500 (#1976D2) sit just under the 4.5:1 AA threshold on the
   white and #FAFBFC section surfaces used here, so this page uses a darker
   neutral-600 / primary-600 pair in the light theme and keeps the bright
   dark-theme tokens. The error colour is likewise darker than the shared
   --accent-600 so validation messages clear 4.5:1 on every surface. */
.careers-page {
  --cr-muted: var(--neutral-600);
  --cr-accent: var(--primary-600);
  --cr-error: #C81E1E;
}

[data-theme="dark"] .careers-page {
  --cr-muted: var(--color-muted);
  --cr-accent: var(--primary-300);
  --cr-error: var(--accent-300);
}

.careers-page .final-cta {
  --cta-muted: var(--cr-muted);
  --cta-accent: var(--cr-accent);
}

/* The shared outline button keeps primary-500 on the dark surface, which is
   below the AA threshold there. This page uses the brighter accent token
   so the hero action stays legible in the dark theme. */
[data-theme="dark"] .careers-page .site-btn--outline {
  border-color: var(--primary-300);
  color: var(--primary-300);
}

[data-theme="dark"] .careers-page .site-btn--outline:hover,
[data-theme="dark"] .careers-page .site-btn--outline:focus-visible {
  background-color: var(--primary-300);
  border-color: var(--primary-300);
  color: var(--color-body);
}

.cr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.cr-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-500);
  flex-shrink: 0;
}

[data-theme="dark"] .cr-eyebrow {
  color: var(--primary-300);
}

[data-theme="dark"] .cr-eyebrow::before {
  background-color: var(--primary-300);
}

.cr-section-head {
  max-width: var(--content-measure);
}

.cr-section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.cr-section-lead {
  max-width: 62ch;
  margin: var(--space-4) 0 0;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
  line-height: 1.7;
  color: var(--cr-muted);
}

/* Anchor targets clear the fixed header. */
.careers-page section[id] {
  scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5));
}

/* Screen-reader-only text. The openings section announces how many roles are
   listed without leaving an empty line on the page. */
.cr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Hero ---------------------------------------------------------------- */
.cr-hero {
  padding-block: clamp(var(--space-6), 4.5vw, var(--space-9)) clamp(var(--space-6), 4vw, var(--space-8));
}

.cr-hero__inner {
  max-width: 72ch;
}

.cr-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-extrabold);
  font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--color-heading);
}

.cr-hero__lead {
  margin: var(--space-5) 0 0;
  max-width: 62ch;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.65;
  color: var(--color-text);
}

.cr-hero__text {
  margin: var(--space-4) 0 0;
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cr-muted);
}

.cr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

/* ---- Why work with us ---------------------------------------------------- */
.cr-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  align-items: stretch;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
}

.cr-why-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cr-why-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.375rem;
  flex-shrink: 0;
}

[data-theme="dark"] .cr-why-card__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.cr-why-card__title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.cr-why-card__desc {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* ---- Current openings (published roles) ----------------------------------- */
.cr-vacancies {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  max-width: 1100px;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
}

/* The grid display above would otherwise defeat the [hidden] attribute the
   script sets when no role is published. */
.cr-vacancies[hidden] {
  display: none;
}

.cr-vacancy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.cr-vacancy:hover {
  transform: translateY(-2px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .cr-vacancy:hover {
  border-color: rgba(133, 192, 247, 0.4);
}

.cr-vacancy__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.cr-vacancy__title {
  flex: 1 1 15rem;
  min-width: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.cr-vacancy__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.cr-vacancy__state {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid #FECACA;
  border-radius: var(--radius-pill);
  background-color: #FEF3F2;
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #B42318;
}

[data-theme="dark"] .cr-vacancy__state {
  border-color: rgba(252, 165, 165, 0.4);
  background-color: rgba(180, 35, 24, 0.18);
  color: #FECACA;
}

.cr-vacancy__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-vacancy__meta-item {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
}

[data-theme="dark"] .cr-vacancy__meta-item {
  background-color: var(--color-body);
}

.cr-vacancy__meta-label {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-muted);
}

.cr-vacancy__meta-value {
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--color-text);
}



.cr-vacancy__summary {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
}

.cr-vacancy__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Both card actions share one compact size and split the row evenly, so the
   pair stays balanced when a title or summary wraps. */
.cr-vacancy__actions .site-btn {
  flex: 0 1 auto;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  min-height: 2.25rem;
}

/* ---- Current openings (honest empty state) -------------------------------- */
.cr-openings__panel {
  max-width: 880px;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cr-openings__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-muted);
}

.cr-openings__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

.cr-openings__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.cr-openings__desc {
  max-width: 60ch;
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
}

.cr-openings__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-5);
}

/* ---- Job details modal ---------------------------------------------------- */
/* One reusable native <dialog> (see careers.html). The header stays put, the
   body scrolls and the action row is pinned to the bottom. js/careers.js adds
   the scroll lock and focus return; showModal() supplies the focus trap,
   Escape handling and background inertness. */
.cr-modal {
  width: min(760px, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--color-text);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.cr-modal::backdrop {
  background-color: rgba(4, 12, 24, 0.62);
}

.cr-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.cr-modal__header {
  position: relative;
  flex-shrink: 0;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  padding-right: clamp(3.5rem, 6vw, 4.25rem);
  border-bottom: 1px solid var(--color-border);
}

.cr-modal__eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cr-accent);
}

.cr-modal__eyebrow:empty {
  display: none;
}

.cr-modal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 1.4vw + 1rem, 1.75rem);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.cr-modal__title:focus {
  outline: none;
}

.cr-modal__close {
  position: absolute;
  top: clamp(var(--space-4), 2.5vw, var(--space-5));
  right: clamp(var(--space-4), 2.5vw, var(--space-5));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-section);
  color: var(--color-heading);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.cr-modal__close:hover {
  border-color: var(--primary-300);
  background-color: var(--primary-50);
  color: var(--primary-700);
}

[data-theme="dark"] .cr-modal__close:hover {
  border-color: rgba(133, 192, 247, 0.4);
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.cr-modal__close:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.cr-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
}

.cr-modal__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.cr-modal__meta-item {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
}

[data-theme="dark"] .cr-modal__meta-item {
  background-color: var(--color-body);
}

.cr-modal__meta-label {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-muted);
}

.cr-modal__meta-value {
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--color-text);
}

.cr-modal__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #FEDF89;
  border-radius: var(--radius-md);
  background-color: #FFFAEB;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #B54708;
}

.cr-modal__note .bi {
  margin-top: 0.15em;
  flex-shrink: 0;
}

[data-theme="dark"] .cr-modal__note {
  border-color: rgba(253, 230, 138, 0.35);
  background-color: rgba(180, 83, 9, 0.18);
  color: #FDE68A;
}

.cr-modal__summary {
  margin: var(--space-4) 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* Optional fuller experience context, shown in the dialog only. */
.cr-modal__experience {
  margin: var(--space-3) 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--cr-muted);
}

.cr-modal__section {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.cr-modal__subtitle {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-heading);
}

.cr-modal__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.15rem;
}

.cr-modal__list li {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.cr-modal__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
}

.cr-modal__footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: var(--space-3);
  padding: var(--space-4) clamp(var(--space-5), 3vw, var(--space-6));
  border-top: 1px solid var(--color-border);
  background-color: var(--color-section);
}

.cr-modal__footer .site-btn--outline {
  border-color: var(--cr-accent);
  color: var(--cr-accent);
}

.cr-modal__footer .site-btn--outline:hover,
.cr-modal__footer .site-btn--outline:focus-visible {
  background-color: var(--cr-accent);
  border-color: var(--cr-accent);
  color: #FFFFFF;
}

/* ---- Online application --------------------------------------------------- */
.cr-apply__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: start;
}

.cr-apply__intro {
  min-width: 0;
}

.cr-apply__points {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.cr-apply__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.cr-apply__points li + li {
  margin-top: var(--space-3);
}

.cr-apply__points .bi {
  margin-top: 0.15em;
  font-size: 1rem;
  color: var(--cr-accent);
  flex-shrink: 0;
}

[data-theme="dark"] .cr-apply__points .bi {
  color: var(--primary-300);
}

.cr-apply__privacy {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--cr-muted);
}

/* The link sits inside a paragraph, so it is underlined as well as coloured
   to stay distinguishable without relying on colour alone. */
.cr-apply__privacy a {
  color: var(--cr-accent);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cr-apply__email {
  margin: var(--space-4) 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text);
}

.cr-apply__email a {
  color: var(--cr-accent);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cr-apply__email-note {
  color: var(--cr-muted);
}

/* ---- Form surface --------------------------------------------------------- */
.cr-form {
  min-width: 0;
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}



.cr-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.cr-form__field {
  min-width: 0;
}

.cr-form__field--full {
  grid-column: 1 / -1;
}

.cr-form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-heading);
}

.cr-form__required,
.cr-form__optional {
  font-weight: var(--weight-regular);
  color: var(--cr-muted);
}

.cr-form__input {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-body);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.cr-form__input::placeholder {
  color: var(--cr-muted);
  opacity: 1;
}

.cr-form__input:hover {
  border-color: var(--primary-300);
}

.cr-form__input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}

[data-theme="dark"] .cr-form__input:focus {
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px rgba(133, 192, 247, 0.18);
}

.cr-form__input.is-invalid,
.cr-form__input[aria-invalid="true"] {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(255, 51, 51, 0.12);
}

.cr-form__textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.cr-form__file {
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.cr-form__file:hover,
.cr-form__file:focus-within {
  border-color: var(--primary-400);
}

[data-theme="dark"] .cr-form__file {
  background-color: var(--color-body);
}

.cr-form__file-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
}

.cr-form__file-input::file-selector-button {
  margin-right: var(--space-3);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-card);
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.cr-form__file-input::file-selector-button:hover {
  border-color: var(--primary-400);
  background-color: var(--primary-50);
  color: var(--primary-700);
}

[data-theme="dark"] .cr-form__file-input::file-selector-button {
  background-color: var(--color-card);
  color: var(--color-heading);
}

[data-theme="dark"] .cr-form__file-input::file-selector-button:hover {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-100);
}

.cr-form__hint {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--cr-muted);
}

.cr-form__error {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--cr-error);
}

[data-theme="dark"] .cr-form__error {
  color: var(--cr-error);
}

.cr-form__consent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
}

/* The consent error is appended next to the checkbox, so it takes its own
   line inside the consent box. */
.cr-form__consent [data-field-error] {
  flex: 1 0 100%;
}

[data-theme="dark"] .cr-form__consent {
  background-color: var(--color-body);
}

.cr-form__checkbox {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--primary-500);
  cursor: pointer;
}

.cr-form__consent-label {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  cursor: pointer;
}

/* Spam protection. The CAPTCHA widget itself is injected by js/careers.js
   into .cr-form__captcha-widget. */
.cr-form__captcha {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
}

[data-theme="dark"] .cr-form__captcha {
  background-color: var(--color-body);
}

.cr-form__captcha-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-heading);
}

.cr-form__captcha-widget {
  min-height: 1px;
  margin-top: var(--space-3);
}

.cr-form__captcha-widget[hidden] {
  display: none;
}

.cr-form__challenge {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-3);
}

.cr-form__challenge-question {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

.cr-form__challenge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-2);
}

  .cr-form__challenge-input {
    flex: 1 1 10rem;
    min-width: 0;
    max-width: 16rem;
  }

  .cr-form__challenge-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cr-form__challenge-input {
    max-width: 100%;
  }

  .cr-form__challenge-refresh {
    align-self: flex-start;
  }

.cr-form__challenge-refresh {
  flex: 0 0 auto;
  padding: 0.55rem 0.9rem;
  font-size: 0.875rem;
}

.cr-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}

.cr-form__submit[disabled] {
  opacity: 0.65;
  cursor: wait;
}

.cr-form__submit-note {
  max-width: 44ch;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--cr-muted);
}

.cr-form__status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.6;
}

.cr-form__status:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.cr-form__status[data-state="error"] {
  border-color: #FDA29B;
  background-color: #FEF3F2;
  color: #B42318;
}

[data-theme="dark"] .cr-form__status[data-state="error"] {
  border-color: rgba(252, 165, 165, 0.4);
  background-color: rgba(180, 35, 24, 0.18);
  color: #FECACA;
}

.cr-form__status[data-state="success"] {
  border-color: #ABEFC6;
  background-color: #ECFDF3;
  color: #067647;
}

[data-theme="dark"] .cr-form__status[data-state="success"] {
  border-color: rgba(167, 243, 208, 0.4);
  background-color: rgba(6, 118, 71, 0.18);
  color: #A7F3D0;
}

.cr-form__status[data-state="pending"] {
  border-color: var(--primary-200);
  background-color: var(--primary-50);
  color: var(--primary-800);
}

[data-theme="dark"] .cr-form__status[data-state="pending"] {
  border-color: rgba(133, 192, 247, 0.35);
  background-color: rgba(25, 118, 210, 0.12);
  color: var(--primary-100);
}

/* ---- Email application ---------------------------------------------------- */
.cr-email__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  max-width: 880px;
  margin: clamp(var(--space-6), 3.5vw, var(--space-7)) 0 0;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cr-email__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.5rem;
  flex-shrink: 0;
}

[data-theme="dark"] .cr-email__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.cr-email__body {
  min-width: 0;
}

.cr-email__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.cr-email__desc {
  max-width: 62ch;
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
}

.cr-email__address {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--cr-accent);
  overflow-wrap: anywhere;
}

.cr-email__address:hover {
  color: var(--primary-600);
}

[data-theme="dark"] .cr-email__address {
  color: var(--primary-300);
}

[data-theme="dark"] .cr-email__address:hover {
  color: var(--primary-200);
}

.cr-email__address .bi {
  font-size: 1rem;
  flex-shrink: 0;
}

.cr-email__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 64ch;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--cr-muted);
}

.cr-email__note .bi {
  margin-top: 0.15em;
  flex-shrink: 0;
}

/* ---- Layout breakpoints --------------------------------------------------- */
@media (min-width: 768px) {
  .cr-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr-vacancy__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr-email__panel {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
}

@media (min-width: 992px) {
  .cr-vacancies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr-apply__layout {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }

  /* The intro stays in view while the long form scrolls beside it. */
  .cr-apply__intro {
    position: sticky;
    top: calc(var(--header-height-scrolled) + var(--space-5));
  }
}

@media (min-width: 1200px) {
  .cr-why__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .cr-hero {
    padding-block: clamp(var(--space-5), 7vw, var(--space-6)) var(--space-6);
  }

  .cr-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cr-hero__actions .site-btn {
    width: 100%;
  }

  .cr-openings__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .cr-form {
    padding: var(--space-4);
  }

  .cr-modal {
    width: calc(100vw - 1.5rem);
  }

  .cr-modal__meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .cr-modal__footer .site-btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-page section[id] {
  /* scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-5)); */
}

/* ---- Get in Touch cards -------------------------------------------------- */
.contact-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  margin-top: clamp(var(--space-6), 3.5vw, var(--space-7));
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  height: 100%;
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .contact-card:hover {
  border-color: rgba(133, 192, 247, 0.4);
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.375rem;
  flex-shrink: 0;
}

[data-theme="dark"] .contact-card__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.contact-card__label {
  margin: var(--space-4) 0 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cr-muted);
}

.contact-card__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.contact-card__address {
  margin: var(--space-3) 0 0;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
}

.contact-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--cr-accent);
  text-decoration: none;
}

.contact-card__link:hover {
  color: var(--primary-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-theme="dark"] .contact-card__link {
  color: var(--primary-300);
}

[data-theme="dark"] .contact-card__link:hover {
  color: var(--primary-200);
}

/* Phone chips */
.contact-chips,
.contact-pills {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.contact-chip {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

[data-theme="dark"] .contact-chip {
  background-color: var(--color-body);
}

.contact-chip:hover,
.contact-chip:focus-visible {
  border-color: var(--primary-300);
}

.contact-chip .bi {
  color: var(--cr-accent);
  font-size: 1rem;
  flex-shrink: 0;
}

[data-theme="dark"] .contact-chip .bi {
  color: var(--primary-300);
}

.contact-chip__meta {
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cr-muted);
  flex-shrink: 0;
}

.contact-chip__value {
  justify-self: end;
  text-align: right;
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-heading);
  overflow-wrap: anywhere;
}

/* Email pills */
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-section);
  color: var(--color-heading);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

[data-theme="dark"] .contact-pill {
  background-color: var(--color-body);
}

.contact-pill .bi {
  color: var(--cr-accent);
  font-size: 1rem;
  flex-shrink: 0;
}

[data-theme="dark"] .contact-pill .bi {
  color: var(--primary-300);
}

.contact-pill:hover,
.contact-pill:focus-visible {
  border-color: var(--primary-300);
  color: var(--primary-700);
}

[data-theme="dark"] .contact-pill:hover,
[data-theme="dark"] .contact-pill:focus-visible {
  color: var(--primary-200);
}

/* ---- Connect band -------------------------------------------------------- */
.contact-connect__lead {
  max-width: 720px;
  margin: var(--space-3) 0 0;
  color: var(--hl-text);
}

.contact-connect__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}

.contact-connect__social .site-btn--outline {
  border-color: rgba(248, 250, 252, 0.55);
  background-color: transparent;
  color: #fff;
}

.contact-connect__social .site-btn--outline:hover,
.contact-connect__social .site-btn--outline:focus-visible {
  border-color: #fff;
  background-color: #fff;
  color: #07284D;
}

/* ---- Enquiry form -------------------------------------------------------- */
.contact-form {
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

.contact-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.contact-form__fields-left,
.contact-form__fields-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form__fields-right .cr-form__field {
  /* flex: 1; */
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.contact-form__message-field .cr-form__textarea {
  flex: 1 1 auto;
  min-height: 14rem;
}

.contact-form__consent {
  margin-top: var(--space-5);
}

.contact-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.contact-form__challenge {
  min-width: 0;
}

.contact-form__challenge-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.contact-form__challenge-label {
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-heading);
}

.contact-form__challenge-input {
  width: 5.5rem;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  text-align: center;
}

.contact-form__refresh {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
}

[data-theme="dark"] .contact-page .contact-form__refresh {
  border-color: var(--primary-300);
  color: var(--primary-300);
}

[data-theme="dark"] .contact-page .contact-form__refresh:hover,
[data-theme="dark"] .contact-page .contact-form__refresh:focus-visible {
  border-color: var(--primary-300);
  background-color: var(--primary-300);
  color: var(--color-body);
}

.contact-form__challenge-error {
  margin-top: var(--space-2);
}

.contact-form__submit {
  padding: 0.6rem 1.25rem;
  font-size: 0.9375rem;
}

/* ---- Why 05 IT Solutions + map ------------------------------------------ */
.contact-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-5), 3vw, var(--space-7));
  align-items: stretch;
}

.contact-values {
  display: grid;
  gap: var(--space-4);
  margin: clamp(var(--space-5), 3vw, var(--space-6)) 0 0;
  padding: 0;
  list-style: none;
}

.contact-value {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.contact-value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.25rem;
  flex-shrink: 0;
}

[data-theme="dark"] .contact-value__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

.contact-value__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-heading);
}

.contact-value__desc {
  margin: var(--space-1) 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.contact-why__map-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact-why__map {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  background-color: var(--color-section);
}

.contact-why__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-why__map-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-card);
}

.contact-why__map-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.contact-why__map-label .bi {
  color: var(--cr-accent);
}

[data-theme="dark"] .contact-why__map-label .bi {
  color: var(--primary-300);
}

.contact-why__maplink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  color: var(--cr-accent);
  text-decoration: none;
}

.contact-why__maplink:hover {
  color: var(--primary-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-theme="dark"] .contact-why__maplink {
  color: var(--primary-300);
}

[data-theme="dark"] .contact-why__maplink:hover {
  color: var(--primary-200);
}

/* ---- Layout breakpoints -------------------------------------------------- */
@media (min-width: 768px) {
  .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-card:last-child {
    grid-column: 1 / -1;
  }

  .contact-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .contact-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact-card:last-child {
    grid-column: auto;
  }

  .contact-why__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}

@media (max-width: 575.98px) {
  .contact-form__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-form__submit {
    width: 100%;
  }

  .contact-chip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .contact-chip__value {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

/* ==========================================================================
   Product Engineering page — hero visual.
   The product architecture core and satellites reuse .hero-core / .hero-node;
   only placement and the product-themed icon set differ from AI Solutions.
   Every satellite class below must have a position rule: .hero-node is
   absolutely positioned, so an undefined class would otherwise stack several
   icons at the same origin and hide all but the top one.
   ========================================================================== */
.pe-hero.hero-section {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

.pe-hero .hero-core {
  width: 132px;
  height: 132px;
}

.pe-hero .hero-core .bi {
  font-size: 2.125rem;
}

.pe-hero .hero-node {
  gap: 5px;
}

.pe-hero .hero-node__chip {
  width: 44px;
  height: 44px;
  font-size: 1.125rem;
}

.pe-hero .hero-node__label {
  font-size: 0.5rem;
}

.pe-hero .hero-node--ux { left: 16%; top: 18%; }
.pe-hero .hero-node--app { left: 84%; top: 16%; }
.pe-hero .hero-node--data { left: 88%; top: 52%; }
.pe-hero .hero-node--integrations { left: 76%; top: 84%; }
.pe-hero .hero-node--users { left: 24%; top: 84%; }

/* ==========================================================================
   Product Engineering + Business Automation section overrides
   Scoped to .pe-process / .ba-process and .pe-practice / .ba-practice so AI
   Solutions - which reuses the same .ai-process__list / .ai-practice__list
   classes but with four items - keeps its existing four-column layout. Both
   newer solution pages use a five-stage process and three-card practice grid.
   ========================================================================== */

/* Our Process - five stages. At wide desktop all five sit in one row. From
   768px to 1199px the stages use a balanced three-plus-two arrangement on a
   six-column track: each stage spans two columns, the first row uses columns
   1-6, and the second row is centred by starting at columns 2 and 4. Below
   768px the shared single-column vertical rail remains in place. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--step-gap-h);
    row-gap: var(--step-gap-v);
  }

  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__stage {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__stage:nth-child(1) { grid-column: 1 / span 2; }
  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__stage:nth-child(2) { grid-column: 3 / span 2; }
  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__stage:nth-child(3) { grid-column: 5 / span 2; }
  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__stage:nth-child(4) { grid-column: 2 / span 2; }
  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__stage:nth-child(5) { grid-column: 4 / span 2; }

  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__desc {
    margin-right: auto;
    margin-left: auto;
  }

  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__stage:not(:last-child)::before {
    display: none;
  }

  /* Horizontal connectors between stages in the same row. Stage 3 ends the
     first row, so it has no line into the centred second row. */
  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--step-icon-size) / 2);
    left: calc(50% + calc(var(--step-icon-size) / 2) - 1px);
    width: calc(100% + var(--step-gap-h) - var(--step-icon-size) + 2px);
    height: 1px;
    background-color: var(--hw-rail);
  }

  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__stage:nth-child(3)::after {
    display: none;
  }
}

@media (min-width: 1200px) {
  :is(.pe-process, .ba-process, .iot-process, .ad-process) .ai-process__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Product Engineering / Business Automation / IoT Applications in Practice -
   exactly three cards spanning the full content width with no empty fourth
   position. From 768px up the three cards distribute evenly; on mobile they
   stack in a single column. */
@media (min-width: 768px) {
  :is(.pe-practice, .ba-practice, .iot-practice, .ad-practice) .ai-practice__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Contact page spacing refinements ----------------------------------- */
.contact-page .hero-section {
  padding-bottom: clamp(var(--space-6), 5vw, var(--space-7));
}

.contact-page #get-in-touch {
  padding-top: var(--space-5);
}

/* ==========================================================================
   Business Automation page (business-automation.html)
   A sibling of the AI Solutions and Product Engineering pages: the shared
   hero, overview, capabilities, challenges, process, practice, industries
   and Why/FAQ components are reused unchanged. Styles below cover only what
   is genuinely new — the workflow hero visual, the practice example lists,
   and the four compact sections (toolkit, deployment, AI-assisted
   automation, monitoring/maintenance). Everything is scoped to .ba-* and
   rides the existing theme tokens, so no other page is affected.
   ========================================================================== */

/* ---- Hero visual: workflow orchestration ------------------------------- */
.ba-hero.hero-section {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

.ba-hero .hero-core {
  width: 136px;
  height: 136px;
}

.ba-hero .hero-core .bi {
  font-size: 2.125rem;
}

.ba-hero .hero-node {
  gap: 5px;
}

.ba-hero .hero-node__chip {
  width: 44px;
  height: 44px;
  font-size: 1.125rem;
}

.ba-hero .hero-node__label {
  font-size: 0.5rem;
  white-space: nowrap;
}

.ba-hero .hero-node--apps { left: 14%; top: 18%; }
.ba-hero .hero-node--sources { left: 86%; top: 16%; }
.ba-hero .hero-node--alerts { left: 91%; top: 51%; }
.ba-hero .hero-node--reports { left: 74%; top: 84%; }
.ba-hero .hero-node--python { left: 26%; top: 84%; }
.ba-hero .hero-node--rules { left: 8%; top: 51%; }

.ba-hero__caption {
  max-width: 460px;
  margin: 0.75rem auto 0;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-muted);
}

/* ---- Shared compact-section header ------------------------------------- */
.section.ba-toolkit,
.section.ba-deploy,
.section.ba-ai,
.section.ba-maintenance {
  --section-spacing-mobile: 48px;
  --section-spacing-tablet: 64px;
  --section-spacing-desktop: 96px;
}

.ba-section__header {
  max-width: 46rem;
}

.ba-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
}

.ba-section .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-500);
  flex-shrink: 0;
}

.ba-section .section-title {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2vw + 1.1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.ba-section .section-intro {
  max-width: 62ch;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

[data-theme="dark"] .ba-section .section-eyebrow {
  color: var(--primary-300);
}

[data-theme="dark"] .ba-section .section-eyebrow::before {
  background-color: var(--primary-400);
}

/* ---- Toolkit: n8n + Python --------------------------------------------- */
.ba-toolkit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

.ba-toolkit__card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
}

.ba-toolkit__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ba-toolkit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--color-section-alt);
  color: var(--primary-600);
  font-size: 1.375rem;
  line-height: 1;
}

[data-theme="dark"] .ba-toolkit__icon {
  color: var(--primary-300);
}

.ba-toolkit__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.ba-toolkit__kicker {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ba-toolkit__desc {
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.ba-toolkit__label {
  margin: var(--space-4) 0 0;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ba-toolkit__list {
  display: grid;
  gap: 0.375rem;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.ba-toolkit__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text);
}

.ba-toolkit__list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-500);
}

[data-theme="dark"] .ba-toolkit__list li::before {
  background-color: var(--primary-300);
}

.ba-toolkit__bridge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-section-alt);
}

.ba-toolkit__bridge-icons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  color: var(--primary-600);
  font-size: 1.25rem;
  line-height: 1;
}

.ba-toolkit__bridge-icons .bi-plus-lg {
  font-size: 0.75rem;
}

[data-theme="dark"] .ba-toolkit__bridge-icons {
  color: var(--primary-300);
}

.ba-toolkit__bridge-text {
  flex: 1 1 20rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.ba-toolkit__bridge-text strong {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

/* ---- Deployment + maintenance: compact point lists -------------------- */
.ba-deploy,
.ba-maintenance {
  background-color: var(--color-section-alt);
}

.ba-deploy .section-title,
.ba-maintenance .section-title,
.ba-deploy .ba-points__title,
.ba-maintenance .ba-points__title {
  color: var(--color-section-alt-heading);
}

.ba-deploy .section-intro,
.ba-deploy .ba-points__desc,
.ba-maintenance .section-intro,
.ba-maintenance .ba-points__desc,
.ba-maintenance__note {
  color: var(--color-section-alt-text);
}

.ba-deploy .section-eyebrow,
.ba-maintenance .section-eyebrow {
  color: var(--color-section-alt-accent);
}

.ba-deploy .section-eyebrow::before,
.ba-maintenance .section-eyebrow::before {
  background-color: var(--color-section-alt-accent-dim);
}

.ba-deploy__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-5), 4vw, var(--space-7));
  align-items: start;
}

.ba-deploy__header .section-title {
  max-width: 22ch;
}

.ba-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ba-points__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: clamp(1rem, 2.5vw, 1.25rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-card);
}

.ba-points__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--color-section-alt-accent);
}

.ba-points__body {
  min-width: 0;
}

.ba-points__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.ba-points__desc {
  max-width: 52ch;
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.ba-maintenance .ba-points {
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

.ba-maintenance__note {
  margin: var(--space-4) 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ---- AI-assisted automation ------------------------------------------- */
.ba-ai__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

.ba-ai__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: clamp(1.5rem, 3vw, 1.75rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
}

.ba-ai__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--primary-500);
}

[data-theme="dark"] .ba-ai__icon {
  color: var(--primary-300);
}

.ba-ai__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.ba-ai__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.ba-ai__note {
  max-width: 70ch;
  margin: var(--space-4) 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.ba-ai__note a {
  font-weight: var(--weight-semibold);
  color: var(--primary-600);
  text-decoration: none;
}

.ba-ai__note a:hover,
.ba-ai__note a:focus-visible {
  text-decoration: underline;
}

[data-theme="dark"] .ba-ai__note a {
  color: var(--primary-300);
}

/* ---- Practice example lists ------------------------------------------- */
.ba-practice__examples,
.iot-practice__examples,
.ad-practice__examples {
  display: grid;
  gap: 0.375rem;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.ba-practice__examples li,
.iot-practice__examples li,
.ad-practice__examples li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--hw-text);
}

.ba-practice__examples li::before,
.iot-practice__examples li::before,
.ad-practice__examples li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-500);
}

[data-theme="dark"] .ba-practice__examples li::before,
[data-theme="dark"] .iot-practice__examples li::before,
[data-theme="dark"] .ad-practice__examples li::before {
  background-color: var(--primary-300);
}

/* ---- Responsive -------------------------------------------------------- */
@media (min-width: 768px) {
  .ba-toolkit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ba-points--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .ba-deploy__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  .ba-ai__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .ba-hero__caption {
    max-width: 20rem;
  }

  .ba-toolkit__bridge {
    align-items: flex-start;
  }
}

/* ==========================================================================
   IoT Applications page (iot-applications.html)
   A fourth sibling of the AI Solutions, Product Engineering and Business
   Automation pages. The shared hero, overview, capabilities, challenges,
   process, practice, industries and Why/FAQ components are reused unchanged.
   Styles below cover only what is genuinely new: the connected-ecosystem hero
   visual and the practice-card diagrams. Everything is scoped to .iot-* and
   uses the existing theme tokens, so no other page is affected.
   ========================================================================== */

/* ---- Hero visual: connected device ecosystem -------------------------- */
.iot-hero.hero-section {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

.iot-hero .hero-core {
  width: 132px;
  height: 132px;
}

.iot-hero .hero-core .bi {
  font-size: 2.125rem;
}

.iot-hero .hero-node {
  gap: 5px;
}

.iot-hero .hero-node__chip {
  width: 44px;
  height: 44px;
  font-size: 1.125rem;
}

.iot-hero .hero-node__label {
  font-size: 0.5rem;
  white-space: nowrap;
}

.iot-hero .hero-node--devices { left: 14%; top: 18%; }
.iot-hero .hero-node--sensors { left: 86%; top: 16%; }
.iot-hero .hero-node--gateway { left: 91%; top: 51%; }
.iot-hero .hero-node--data { left: 74%; top: 84%; }
.iot-hero .hero-node--dashboards { left: 26%; top: 84%; }
.iot-hero .hero-node--actions { left: 8%; top: 51%; }

.iot-hero__caption {
  max-width: 460px;
  margin: 0.75rem auto 0;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--neutral-600);
}

[data-theme="dark"] .iot-hero__caption {
  color: var(--color-muted);
}

/* ---- Practice diagrams: device -> data -> application ---------------- */
.iot-practice .ai-practice__media {
  background-color: var(--hw-bg);
}

.iot-practice__visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 1.25rem);
}

/* Faint engineering grid, faded toward the edges so the nodes stay legible. */
.iot-practice__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hw-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--hw-border) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 28%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 28%, transparent 78%);
  pointer-events: none;
}

.iot-practice__flow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 1.5vw, 0.75rem);
  width: 100%;
}

.iot-practice__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.iot-practice__node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.5rem, 5vw, 3rem);
  height: clamp(2.5rem, 5vw, 3rem);
  border: 1px solid var(--hw-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-card);
  box-shadow: var(--shadow-sm);
  color: var(--color-section-alt-accent);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1;
}

.iot-practice__node-label {
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--hw-muted);
}

.iot-practice__arrow {
  flex-shrink: 0;
  color: var(--hw-muted);
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.6;
}

@media (max-width: 575.98px) {
  .iot-hero__caption {
    max-width: 20rem;
  }

  .iot-practice__visual {
    padding-inline: 0.5rem;
  }

  .iot-practice__flow {
    gap: 0.25rem;
  }
}

/* ==========================================================================
   Application Development page (application-development.html)
   A fifth sibling of the AI Solutions, Product Engineering, Business
   Automation and IoT Applications pages. The shared hero, overview,
   capabilities, challenges, process, practice, industries and Why/FAQ
   components are reused unchanged. Styles below cover only what is genuinely
   new: the connected-application hero visual, the emphasised platform cards,
   and the practice-card device mockups. Everything is scoped to .ad-* and
   rides the existing theme tokens, so no other page is affected.
   ========================================================================== */

/* ---- Hero visual: connected application ecosystem ---------------------- */
.ad-hero.hero-section {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

.ad-hero .hero-core {
  width: 132px;
  height: 132px;
}

.ad-hero .hero-core .bi {
  font-size: 2.125rem;
}

.ad-hero .hero-node {
  gap: 5px;
}

.ad-hero .hero-node__chip {
  width: 44px;
  height: 44px;
  font-size: 1.125rem;
}

.ad-hero .hero-node__label {
  font-size: 0.5rem;
  white-space: nowrap;
}

.ad-hero .hero-node--web { left: 14%; top: 18%; }
.ad-hero .hero-node--mobile { left: 86%; top: 16%; }
.ad-hero .hero-node--desktop { left: 91%; top: 51%; }
.ad-hero .hero-node--backend { left: 74%; top: 84%; }
.ad-hero .hero-node--database { left: 26%; top: 84%; }
.ad-hero .hero-node--integrations { left: 8%; top: 51%; }

.ad-hero__caption {
  max-width: 460px;
  margin: 0.75rem auto 0;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--neutral-600);
}

[data-theme="dark"] .ad-hero__caption {
  color: var(--color-muted);
}

/* ---- Capabilities: 1 / 2 / 3 columns with the platform cards emphasised - */
.ad-capabilities__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 0;
  margin-top: clamp(var(--space-5), 3vw, var(--space-6));
}

@media (min-width: 768px) {
  .ad-capabilities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .ad-capabilities__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Web, mobile and desktop are the primary platforms, so their cards carry a
   heavier top rule, a filled icon plate and a slightly larger title. */
.ad-capabilities__item--platform {
  border-top-width: 2px;
  border-top-color: var(--primary-400);
}

[data-theme="dark"] .ad-capabilities__item--platform {
  border-top-color: var(--primary-600);
}

.ad-capabilities__item--platform .ai-capabilities__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-50);
  color: var(--primary-700);
}

[data-theme="dark"] .ad-capabilities__item--platform .ai-capabilities__icon {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-300);
}

.ad-capabilities__item--platform .ai-capabilities__title {
  font-size: clamp(1.125rem, 0.45vw + 1.04rem, 1.3125rem);
}

/* ---- Practice diagrams: browser, phone and desktop window -------------- */
.ad-practice .ai-practice__media {
  background-color: var(--hw-bg);
}

.ad-practice__visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.9rem, 3vw, 1.5rem);
}

/* Faint engineering grid, faded toward the edges so the mockups stay legible. */
.ad-practice__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hw-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--hw-border) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 78%);
  pointer-events: none;
}

.ad-practice__device {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hw-border);
  border-radius: var(--radius-md);
  background-color: var(--color-card);
  box-shadow: var(--shadow-sm);
}

/* Browser chrome and desktop title bar */
.ad-practice__device--browser {
  width: 84%;
}

.ad-practice__device--desktop {
  width: 86%;
}

.ad-practice__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hw-border);
  background-color: var(--hw-bg);
}

.ad-practice__bar > span:not(.ad-practice__url) {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--hw-border);
}

.ad-practice__url {
  flex: 1;
  height: 8px;
  margin-left: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--hw-border);
}

.ad-practice__screen {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: clamp(0.75rem, 2.5vw, 1.1rem);
}

/* Content skeleton used across all three mockups */
.ad-practice__line {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--hw-border);
}

.ad-practice__line--title {
  width: 56%;
  height: 9px;
  background-color: var(--primary-400);
  opacity: 0.6;
}

[data-theme="dark"] .ad-practice__line--title {
  background-color: var(--primary-300);
  opacity: 0.5;
}

.ad-practice__line--wide {
  width: 100%;
}

.ad-practice__line--mid {
  width: 72%;
}

.ad-practice__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.ad-practice__tiles span {
  display: block;
  height: 28px;
  border: 1px solid var(--hw-border);
  border-radius: var(--radius-sm);
  background-color: var(--hw-bg);
}

/* Phone */
.ad-practice__device--phone {
  height: 86%;
  aspect-ratio: 9 / 16;
  gap: 6px;
  padding: 12px 10px 10px;
  border-radius: 16px;
}

.ad-practice__notch {
  align-self: center;
  width: 30%;
  height: 4px;
  margin-bottom: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--hw-border);
}

.ad-practice__app-bar {
  display: block;
  flex-shrink: 0;
  height: 26px;
  border: 1px solid var(--hw-border);
  border-radius: var(--radius-sm);
  background-color: var(--hw-bg);
}

.ad-practice__device--phone .ad-practice__tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ad-practice__device--phone .ad-practice__tiles span {
  height: 30px;
}

.ad-practice__rows {
  display: grid;
  gap: 5px;
  margin-top: 2px;
}

.ad-practice__rows span {
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--hw-border);
}

.ad-practice__rows span:last-child {
  width: 70%;
}

/* Desktop window */
.ad-practice__window-body {
  display: flex;
  min-height: 96px;
}

.ad-practice__sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 24%;
  padding: 10px 8px;
  border-right: 1px solid var(--hw-border);
  background-color: var(--hw-bg);
}

.ad-practice__sidebar span {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--hw-border);
}

.ad-practice__pane {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 10px;
}

.ad-practice__device--desktop .ad-practice__tiles span {
  height: 34px;
}

/* ---- Practice example lists and offline note --------------------------- */
.ad-practice__note {
  margin: var(--space-3) 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-section-alt-accent-dim);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--hw-muted);
}

@media (max-width: 575.98px) {
  .ad-hero__caption {
    max-width: 20rem;
  }

  /* Pull the outer nodes in slightly so their label boxes stay inside the
     visual on narrow phones. */
  .ad-hero .hero-node--desktop { left: 87%; }
  .ad-hero .hero-node--integrations { left: 12%; }

  .ad-practice__visual {
    padding-inline: 0.75rem;
  }
}

/* ==========================================================================
   Legal / Privacy Policy
   Scoped to .legal-page. Editorial document layout: compact hero, tinted
   overview, sticky section navigation and a single continuous reading column.
   All surfaces use the shared theme tokens so light/dark need no duplication.
   ========================================================================== */

.legal-page {
  --legal-muted: var(--neutral-600);
  --legal-reading-width: 760px;
  --legal-toc-width: 250px;
  --legal-toc-top: calc(var(--header-height-scrolled) + 24px);
  --legal-anchor-offset: calc(var(--header-height-scrolled) + 76px);
}

[data-theme="dark"] .legal-page {
  --legal-muted: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.legal-hero {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.25rem, 4vw, 3rem);
  background-color: var(--color-section);
  border-bottom: 1px solid var(--color-border);
}

.legal-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background-color: var(--primary-500);
  opacity: 0.9;
}

.legal-hero__inner {
  max-width: 880px;
}

.legal-hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.legal-hero__eyebrow-row .hero-eyebrow {
  margin-bottom: 0;
}

.legal-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--primary-600);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  flex-shrink: 0;
}

[data-theme="dark"] .legal-hero__icon {
  color: var(--primary-300);
}

.legal-hero__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2.25rem, 4vw + 1rem, 3.25rem);
  letter-spacing: -0.02em;
}

.legal-hero__intro {
  max-width: 720px;
  margin: 0;
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: 1.7;
  color: var(--color-text);
}

/* Document metadata — quiet, tabular, wraps without overflow */
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.legal-meta__item {
  min-width: 0;
  margin: 0;
  padding: 0 var(--space-5);
  border-left: 1px solid var(--color-border);
}

.legal-meta__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.legal-meta dt {
  margin-bottom: 0.2rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-meta dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   Privacy overview
   -------------------------------------------------------------------------- */
.legal-overview {
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  background-color: var(--color-section-alt);
  border-bottom: 1px solid var(--color-section-alt-border);
}

.legal-overview__inner {
  max-width: 1100px;
}

.legal-overview .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-section-alt-accent);
}

.legal-overview .section-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--color-section-alt-accent-dim);
  flex-shrink: 0;
}

.legal-overview__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);
  color: var(--color-section-alt-heading);
}

.legal-overview__intro {
  max-width: 720px;
  margin: 0 0 var(--space-4);
  color: var(--color-section-alt-text);
}

.legal-overview__intro:last-of-type {
  margin-bottom: 0;
}

.legal-overview__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.legal-overview__point {
  min-width: 0;
  padding: 0 clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid var(--color-section-alt-border);
}

.legal-overview__point:first-child {
  padding-left: 0;
  border-left: 0;
}

.legal-overview__point:last-child {
  padding-right: 0;
}

.legal-overview__point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-3);
  color: var(--color-section-alt-accent);
  background-color: var(--color-card);
  border: 1px solid var(--color-section-alt-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}

.legal-overview__point-title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  color: var(--color-section-alt-heading);
}

.legal-overview__point-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-section-alt-muted);
}

/* --------------------------------------------------------------------------
   Document shell + two-column layout
   -------------------------------------------------------------------------- */
.legal-policy {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1200px) {
  .legal-layout {
    grid-template-columns: var(--legal-toc-width) minmax(0, var(--legal-reading-width));
    gap: clamp(2.5rem, 4vw, 4.5rem);
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */
.legal-toc {
  min-width: 0;
  margin: 0;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.legal-toc__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.875rem var(--space-4);
  cursor: pointer;
  list-style: none;
}

.legal-toc__summary::-webkit-details-marker {
  display: none;
}

.legal-toc__summary-label {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--legal-muted);
  white-space: nowrap;
}

.legal-toc__summary-current {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legal-toc__summary-caret {
  color: var(--legal-muted);
  font-size: 0.75rem;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.legal-toc[open] .legal-toc__summary-caret {
  transform: rotate(180deg);
}

.legal-toc__panel {
  padding: 0 var(--space-4) var(--space-4);
}

.legal-toc__label {
  margin: 0 0 var(--space-3);
  padding-top: var(--space-3);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--primary-600);
  border-top: 1px solid var(--color-border);
}

[data-theme="dark"] .legal-toc__label {
  color: var(--primary-300);
}

.legal-toc__list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--color-border);
}

.legal-toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-left: -1px;
  padding: 0.45rem 0 0.45rem 0.875rem;
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text);
  text-decoration: none;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.legal-toc__num {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  color: var(--legal-muted);
  flex-shrink: 0;
}

.legal-toc__link:hover {
  color: var(--primary-600);
  background-color: var(--color-section);
}

.legal-toc__link.is-active {
  border-left-color: var(--primary-500);
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

.legal-toc__link.is-active .legal-toc__num {
  color: var(--primary-600);
}

[data-theme="dark"] .legal-toc__link:hover,
[data-theme="dark"] .legal-toc__link.is-active .legal-toc__num {
  color: var(--primary-300);
}

[data-theme="dark"] .legal-toc__link.is-active {
  border-left-color: var(--primary-300);
}

@media (min-width: 1200px) {
  .legal-toc {
    position: sticky;
    top: var(--legal-toc-top);
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .legal-toc__summary {
    display: none;
  }

  .legal-toc__panel {
    padding: 0;
  }

  .legal-toc__label {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* Keep the links exposed before JS opens the <details> element. */
  .legal-toc:not([open]) .legal-toc__panel {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Reading progress
   -------------------------------------------------------------------------- */
.legal-progress {
  position: sticky;
  top: var(--header-height-scrolled);
  z-index: 4;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.75rem 0 0.65rem;
  background-color: var(--color-body);
}

.legal-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0.4rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-progress__track {
  height: 2px;
  overflow: hidden;
  background-color: var(--color-border);
  border-radius: var(--radius-pill);
}

.legal-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--primary-500);
  border-radius: inherit;
  transition: width 120ms linear;
}

[data-theme="dark"] .legal-progress__fill {
  background-color: var(--primary-400);
}

/* --------------------------------------------------------------------------
   Document typography
   -------------------------------------------------------------------------- */
.legal-doc {
  min-width: 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text);
}

.legal-doc p {
  margin: 0 0 1.15em;
}

.legal-doc p:last-child {
  margin-bottom: 0;
}

.legal-doc a {
  color: var(--primary-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.legal-doc a:hover {
  color: var(--primary-700);
}

[data-theme="dark"] .legal-doc a {
  color: var(--primary-300);
}

[data-theme="dark"] .legal-doc a:hover {
  color: var(--primary-200);
}

.legal-section {
  scroll-margin-top: var(--legal-anchor-offset);
}

.legal-section + .legal-section {
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--color-border);
}

.legal-section__head {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin-bottom: var(--space-5);
}

.legal-section__num {
  padding-top: 0.2em;
  font-family: var(--font-code);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--primary-600);
  flex-shrink: 0;
}

[data-theme="dark"] .legal-section__num {
  color: var(--primary-300);
}

.legal-section h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.4vw + 1.15rem, 1.875rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.legal-doc h3 {
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0.875rem;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.legal-doc h3:first-of-type {
  margin-top: var(--space-5);
}

.legal-doc h4 {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Lists — quiet custom markers, no heavy cards */
.legal-list {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.25em;
  padding: 0;
  list-style: none;
}

.legal-list li {
  position: relative;
  padding-left: 1.35rem;
}

.legal-list li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0.15rem;
  width: 6px;
  height: 6px;
  background-color: var(--primary-400);
  border-radius: var(--radius-pill);
}

[data-theme="dark"] .legal-list li::before {
  background-color: var(--primary-300);
}

.legal-list--check li::before {
  top: 0.45em;
  left: 0.1rem;
  width: 0.45rem;
  height: 0.8rem;
  background-color: transparent;
  border: solid var(--primary-600);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  transform: rotate(42deg);
}

[data-theme="dark"] .legal-list--check li::before {
  background-color: transparent;
  border-color: var(--primary-300);
}

.legal-lead-statement {
  margin: 0 0 1.15em;
  padding-left: 1rem;
  border-left: 3px solid var(--primary-500);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--color-heading);
}

[data-theme="dark"] .legal-lead-statement {
  border-left-color: var(--primary-300);
}

/* --------------------------------------------------------------------------
   2.1 Information categories — two-column editorial grid
   -------------------------------------------------------------------------- */
.legal-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.75rem;
  margin: 0.25rem 0 1.5rem;
}

.legal-category {
  min-width: 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--color-border);
}

.legal-category:last-child {
  grid-column: 1 / -1;
}

.legal-category__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 0.55rem;
  color: var(--primary-600);
  background-color: var(--color-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}

[data-theme="dark"] .legal-category__icon {
  color: var(--primary-300);
}

.legal-category p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Callout note */
.legal-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 1rem 1.125rem;
  background-color: var(--color-section);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--primary-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.legal-note__icon {
  padding-top: 0.15rem;
  color: var(--primary-600);
  font-size: 0.9375rem;
  flex-shrink: 0;
}

[data-theme="dark"] .legal-note__icon {
  color: var(--primary-300);
}

.legal-note p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   2.3 Cookies — three blocks, stacked on phones
   -------------------------------------------------------------------------- */
.legal-cookie-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  margin: 1rem 0 1.5rem;
}

.legal-cookie {
  min-width: 0;
  padding: 1rem;
  background-color: var(--color-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.legal-cookie__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 0.55rem;
  color: var(--primary-600);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

[data-theme="dark"] .legal-cookie__icon {
  color: var(--primary-300);
}

.legal-cookie p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--legal-muted);
}

/* --------------------------------------------------------------------------
   5. Sharing — separated editorial blocks
   -------------------------------------------------------------------------- */
.legal-share {
  margin: 1.75rem 0 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--color-border);
}

.legal-share h3 {
  margin-top: 0;
}

.legal-share > p:last-child {
  margin-bottom: 0;
}

.legal-share + .legal-share {
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   7. Retention — compact label/description rows
   -------------------------------------------------------------------------- */
.legal-retention {
  margin: 0.25rem 0 1.5rem;
  border-top: 1px solid var(--color-border);
}

.legal-retention__row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.legal-doc .legal-retention__label {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-heading);
}

.legal-retention__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   8. Privacy rights — restrained, distinct panel
   -------------------------------------------------------------------------- */
.legal-rights {
  margin: 0.25rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  color: var(--color-section-alt-text);
  background-color: var(--color-section-alt);
  border: 1px solid var(--color-section-alt-border);
  border-radius: var(--radius-md);
}

.legal-rights ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-rights li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.legal-rights li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0.1rem;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--color-section-alt-accent);
  border-bottom: 2px solid var(--color-section-alt-accent);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   12. Contact panel
   -------------------------------------------------------------------------- */
.legal-contact {
  margin: 0.5rem 0 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background-color: var(--color-section-alt);
  border: 1px solid var(--color-section-alt-border);
  border-radius: var(--radius-lg);
}

.legal-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
}

.legal-contact__name {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  color: var(--color-section-alt-heading);
}

.legal-contact__address {
  margin: 0;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-section-alt-text);
}

.legal-contact__details {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.legal-contact__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--color-section-alt-accent);
  background-color: var(--color-card);
  border: 1px solid var(--color-section-alt-border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  flex-shrink: 0;
}

.legal-contact__item-label {
  display: block;
  margin-bottom: 0.05rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-section-alt-muted);
}

.legal-contact__item a {
  font-weight: var(--weight-medium);
  color: var(--color-section-alt-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.legal-contact__item a:hover {
  color: var(--color-section-alt-accent-hover);
}

.legal-contact__note {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-section-alt-border);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-section-alt-muted);
}

/* Related page */
.legal-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.legal-related__label {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-related__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.legal-related__link .bi {
  font-size: 0.75rem;
  transition: transform var(--transition-fast);
}

.legal-related__link:hover .bi,
.legal-related__link:focus-visible .bi {
  transform: translateX(3px);
}

/* End-of-document back link */
.legal-doc__back {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.legal-doc__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--legal-muted) !important;
  text-decoration: none !important;
}

.legal-doc__back-link:hover {
  color: var(--primary-600) !important;
}

[data-theme="dark"] .legal-doc__back-link:hover {
  color: var(--primary-300) !important;
}

/* --------------------------------------------------------------------------
   Focus states
   -------------------------------------------------------------------------- */
.legal-page a:focus-visible,
.legal-page summary:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

[data-theme="dark"] .legal-page a:focus-visible,
[data-theme="dark"] .legal-page summary:focus-visible {
  outline-color: var(--primary-300);
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .legal-progress {
    position: relative;
    top: auto;
  }

  .legal-toc__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem 1rem;
    border-left: 0;
  }

  .legal-toc__link {
    margin-left: 0;
    padding-left: 0.75rem;
  }
}

@media (max-width: 767.98px) {
  .legal-overview__points {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .legal-overview__point,
  .legal-overview__point:first-child {
    padding: 0 0 0 1rem;
    border-left: 2px solid var(--color-section-alt-border);
  }

  .legal-overview__point:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .legal-overview__point:last-child {
    padding-right: 0;
  }

  .legal-cookie-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-retention__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }

  .legal-rights ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .legal-toc__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-section {
    scroll-margin-top: calc(var(--header-height-scrolled) + 24px);
  }
}

@media (max-width: 575.98px) {
  .legal-meta {
    flex-direction: column;
    gap: 0;
  }

  .legal-meta__item {
    padding: 0.65rem 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .legal-meta__item:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .legal-meta__item:last-child {
    padding-bottom: 0;
  }

  .legal-categories {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-category:last-child {
    grid-column: auto;
  }

  .legal-section__head {
    gap: 0.65rem;
  }

  .legal-rights {
    padding: 1rem 1.125rem;
  }

  .legal-share {
    padding-left: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Motion + print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .legal-progress__fill,
  .legal-toc__summary-caret,
  .legal-toc__link,
  .legal-related__link .bi {
    transition: none;
  }

  .legal-related__link:hover .bi,
  .legal-related__link:focus-visible .bi {
    transform: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .nav-overlay,
  .back-to-top,
  .legal-toc,
  .legal-progress,
  .legal-doc__back,
  .legal-related {
    display: none !important;
  }

  .legal-page {
    padding-top: 0;
  }

  .legal-hero,
  .legal-overview {
    background: transparent;
  }

  .legal-layout {
    display: block;
  }

  .legal-doc {
    max-width: none;
  }

  .legal-section + .legal-section {
    break-inside: auto;
  }
}

/* ==========================================================================
   Legal / Terms & Conditions — content-specific treatments
   Extends the shared .legal-* system above (same hero, TOC, progress bar and
   reading column). Components below exist only to give each clause group a
   clear, restrained visual shape; they use the shared theme tokens.
   ========================================================================== */

.legal-page {
  --legal-warning: var(--accent-700);
}

[data-theme="dark"] .legal-page {
  --legal-warning: var(--accent-400);
}

/* --------------------------------------------------------------------------
   02. Business areas — two-column editorial table
   -------------------------------------------------------------------------- */
.legal-areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.legal-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text);
}

.legal-area:nth-child(even) {
  padding: 0.7rem 0 0.7rem 1.25rem;
  border-left: 1px solid var(--color-border);
}

.legal-area__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--primary-600);
  background-color: var(--color-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  flex-shrink: 0;
}

[data-theme="dark"] .legal-area__icon {
  color: var(--primary-300);
}

/* --------------------------------------------------------------------------
   03. Prohibited actions — compact warning rows
   -------------------------------------------------------------------------- */
.legal-restrictions {
  display: grid;
  gap: 0;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.legal-restriction {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.legal-restriction__icon {
  padding-top: 0.22em;
  color: var(--legal-warning);
  font-size: 0.8125rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   05. Three-way distinction between information, scope and agreements
   -------------------------------------------------------------------------- */
.legal-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.legal-trio__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.9rem 1.15rem 0.95rem 0;
  border-bottom: 1px solid var(--color-border);
}

.legal-trio__item + .legal-trio__item {
  padding-left: 1.15rem;
  border-left: 1px solid var(--color-border);
}

.legal-trio__icon {
  color: var(--primary-600);
  font-size: 0.9375rem;
  line-height: 1;
}

[data-theme="dark"] .legal-trio__icon {
  color: var(--primary-300);
}

.legal-trio__label {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-trio__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   06. Business enquiries / career applications
   -------------------------------------------------------------------------- */
.legal-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 1.75rem 0 0.5rem;
  border-top: 1px solid var(--color-border);
}

.legal-split__item {
  min-width: 0;
  padding: 1.25rem 1.5rem 0 0;
}

.legal-split__item + .legal-split__item {
  padding: 1.25rem 0 0 1.5rem;
  border-left: 1px solid var(--color-border);
}

.legal-split__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 0.65rem;
  color: var(--primary-600);
  background-color: var(--color-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

[data-theme="dark"] .legal-split__icon {
  color: var(--primary-300);
}

.legal-doc .legal-split__title {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  line-height: 1.4;
}

.legal-split__item p {
  margin-bottom: 0.75em;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.legal-split__item p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   07. Intellectual property — permission and restriction panel
   -------------------------------------------------------------------------- */
.legal-list--cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
}

.legal-usage {
  margin: 1.5rem 0;
  background-color: var(--color-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.legal-usage__row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding: 1rem 1.15rem;
}

.legal-usage__row + .legal-usage__row {
  border-top: 1px solid var(--color-border);
}

.legal-usage__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--primary-600);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

.legal-usage__icon--restricted {
  color: var(--legal-warning);
}

[data-theme="dark"] .legal-usage__icon {
  color: var(--primary-300);
}

[data-theme="dark"] .legal-usage__icon--restricted {
  color: var(--legal-warning);
}

.legal-usage__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.legal-usage__label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

/* --------------------------------------------------------------------------
   09. Availability — compact cause labels
   -------------------------------------------------------------------------- */
.legal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.legal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text);
  background-color: var(--color-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.legal-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--primary-400);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

[data-theme="dark"] .legal-chip::before {
  background-color: var(--primary-300);
}

/* --------------------------------------------------------------------------
   10 & 11. Disclaimer and liability emphasis panels
   -------------------------------------------------------------------------- */
.legal-panel {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.4rem;
  background-color: var(--color-section);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--primary-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

[data-theme="dark"] .legal-panel {
  border-left-color: var(--primary-300);
}

.legal-panel p {
  margin-bottom: 0.9em;
  font-size: 1rem;
  line-height: 1.68;
}

.legal-panel ul {
  margin-bottom: 1em;
}

.legal-panel .legal-panel__lead {
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.55;
  color: var(--color-heading);
}

.legal-panel .legal-panel__foot {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--color-border);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   15. Governing law — compact legal facts panel
   -------------------------------------------------------------------------- */
.legal-facts {
  margin: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--color-border);
}

.legal-facts__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-border);
}

.legal-facts__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-facts__value {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   Related page — sentence style used at the end of the document
   -------------------------------------------------------------------------- */
.legal-related--stacked {
  display: block;
}

.legal-related__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--legal-muted);
}

.legal-related__text .legal-related__link {
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .legal-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-split__item,
  .legal-split__item + .legal-split__item {
    padding: 1.25rem 0 0;
    border-left: 0;
  }

  .legal-split__item + .legal-split__item {
    margin-top: 1.25rem;
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 767.98px) {
  .legal-areas {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-area,
  .legal-area:nth-child(even) {
    padding: 0.7rem 0;
    border-left: 0;
  }

  .legal-trio {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-trio__item,
  .legal-trio__item + .legal-trio__item {
    padding: 0.85rem 0;
    border-left: 0;
  }

  .legal-list--cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-facts__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

@media (max-width: 575.98px) {
  .legal-panel {
    padding: 1rem 1.05rem;
  }

  .legal-usage__row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.9rem 0.95rem;
  }

  .legal-usage__icon {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   INSIGHT ARTICLE PAGES
   Editorial reading layout: compact hero, 760px reading column, sticky
   contents rail, progress indicator and article-specific content blocks.
   Scoped under .article-page so the archive and other pages are untouched.
   ========================================================================== */

.article-page {
  --article-measure: 760px;
  --article-rail: 260px;
  background-color: var(--color-body);
}

/* ---- Reading progress ---------------------------------------------------- */
.article-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1040;
  height: 3px;
  background-color: transparent;
  pointer-events: none;
}

.article-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--primary-500);
  transition: width 80ms linear;
}

[data-theme="dark"] .article-progress__bar {
  background-color: var(--primary-300);
}

/* ---- Hero ---------------------------------------------------------------- */
.article-hero {
  padding-block: clamp(2.25rem, 4vw, 3.75rem) clamp(2rem, 3vw, 3rem);
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 88% 12%, rgba(25, 118, 210, 0.07), transparent 42%),
    linear-gradient(180deg, var(--color-section), var(--color-body));
}

[data-theme="dark"] .article-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(92, 171, 244, 0.10), transparent 42%),
    linear-gradient(180deg, var(--color-section), var(--color-body));
}

.article-breadcrumb {
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.article-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.article-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.article-breadcrumb li + li::before {
  content: "/";
  color: var(--color-border);
}

.article-breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
}

.article-breadcrumb a:hover {
  color: var(--primary-600);
}

[data-theme="dark"] .article-breadcrumb a:hover {
  color: var(--primary-300);
}

.article-breadcrumb a:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.article-breadcrumb [aria-current="page"] {
  color: var(--color-text);
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-hero__category {
  margin: 0 0 var(--space-3);
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-600);
}

[data-theme="dark"] .article-hero__category {
  color: var(--primary-300);
}

.article-hero__title {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2.05rem, 2.6vw + 1.1rem, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  text-wrap: balance;
}

.article-hero__intro {
  max-width: 720px;
  margin: var(--space-5) 0 0;
  font-size: clamp(1.05rem, 0.35vw + 1rem, 1.2rem);
  line-height: 1.75;
  color: var(--color-muted);
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.article-hero__figure {
  margin: var(--space-6) 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.article-hero__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.article-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.article-hero__meta-item .bi {
  color: var(--primary-600);
}

[data-theme="dark"] .article-hero__meta-item .bi {
  color: var(--primary-300);
}

/* ---- Two-column reading layout ------------------------------------------ */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--article-measure)) var(--article-rail);
  grid-template-areas: "doc aside";
  align-items: start;
  justify-content: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding-block: clamp(2.5rem, 4vw, 4rem) clamp(3rem, 5vw, 5rem);
}

.article-doc {
  grid-area: doc;
  min-width: 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text);
}

.article-aside {
  grid-area: aside;
  position: sticky;
  top: calc(var(--header-height-scrolled) + 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* ---- Contents ------------------------------------------------------------ */
.article-toc {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
}

.article-toc__summary {
  margin: 0;
  padding: 0 0 var(--space-3);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  list-style: none;
}

.article-toc__summary::-webkit-details-marker {
  display: none;
}

.article-toc__summary::after {
  content: "\F282";
  display: inline-block;
  margin-left: 0.45rem;
  font-family: "bootstrap-icons";
  font-size: 0.7rem;
  transition: transform var(--transition-fast);
}

.article-toc[open] > .article-toc__summary::after {
  transform: rotate(180deg);
}

.article-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-toc__link {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  gap: 0.35rem;
  padding: 0.42rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted);
  text-decoration: none;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.article-toc__link:hover {
  color: var(--primary-700);
  background-color: var(--color-section);
}

[data-theme="dark"] .article-toc__link:hover {
  color: var(--primary-200);
  background-color: rgba(92, 171, 244, 0.10);
}

.article-toc__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 1px;
}

.article-toc__link.is-active {
  color: var(--primary-700);
  background-color: var(--color-section);
}

[data-theme="dark"] .article-toc__link.is-active {
  color: var(--primary-200);
  background-color: rgba(92, 171, 244, 0.14);
}

.article-toc__num {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  line-height: 1.8;
  color: var(--color-muted);
}

.article-toc__link.is-active .article-toc__num {
  color: var(--primary-600);
}

[data-theme="dark"] .article-toc__link.is-active .article-toc__num {
  color: var(--primary-300);
}

/* ---- Aside promo --------------------------------------------------------- */
.article-aside__promo {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
}

.article-aside__eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.article-aside__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-heading);
}

.article-aside__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  color: var(--primary-600);
}

.article-aside__link .bi {
  transition: transform var(--transition-fast);
}

.article-aside__link:hover .bi {
  transform: translateX(3px);
}

[data-theme="dark"] .article-aside__link {
  color: var(--primary-300);
}

.article-aside__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Article typography -------------------------------------------------- */
.article-section {
  scroll-margin-top: calc(var(--header-height-scrolled) + 76px);
}

.article-section + .article-section {
  margin-top: clamp(2.25rem, 3.5vw, 3.25rem);
}

.article-doc h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 1vw + 1.15rem, 1.9rem);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  text-wrap: balance;
}

.article-doc h2:focus {
  outline: none;
}

.article-doc h3 {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.article-doc p {
  margin: 0 0 var(--space-5);
}

.article-doc strong {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

.article-doc a {
  color: var(--primary-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.article-doc a:hover {
  color: var(--primary-700);
}

[data-theme="dark"] .article-doc a {
  color: var(--primary-300);
}

[data-theme="dark"] .article-doc a:hover {
  color: var(--primary-200);
}

.article-doc ul,
.article-doc ol {
  margin: 0 0 var(--space-5);
  padding-left: 1.35rem;
}

.article-doc li {
  margin-bottom: 0.4rem;
}

.article-doc li::marker {
  color: var(--primary-500);
}

[data-theme="dark"] .article-doc li::marker {
  color: var(--primary-300);
}

/* ---- Callout ------------------------------------------------------------- */
.article-callout {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--primary-500);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
}

.article-callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background-color: rgba(25, 118, 210, 0.10);
  color: var(--primary-700);
  font-size: 1.05rem;
}

[data-theme="dark"] .article-callout {
  border-left-color: var(--primary-300);
}

[data-theme="dark"] .article-callout__icon {
  background-color: rgba(92, 171, 244, 0.14);
  color: var(--primary-200);
}

.article-callout p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
}

.article-doc blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border-left: 3px solid var(--primary-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: var(--color-section);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.35rem);
  line-height: 1.6;
  font-style: italic;
}

/* ---- Table --------------------------------------------------------------- */
.article-table-wrap {
  margin: var(--space-6) 0;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}

.article-table {
  width: 100%;
  min-width: 620px;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.6;
}

.article-table th,
.article-table td {
  padding: 0.8rem 0.95rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.article-table thead th {
  background-color: var(--color-section);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-heading);
}

.article-table tbody th {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  white-space: nowrap;
}

.article-table tbody tr:last-child th,
.article-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---- Code ---------------------------------------------------------------- */
.article-code-block {
  margin: var(--space-6) 0;
  border: 1px solid #1E293B;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #0F172A;
}

.article-code__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background-color: rgba(15, 23, 42, 0.72);
}

.article-code__label {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #CBD5E1;
}

.article-code__copy {
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: var(--radius-pill);
  background: transparent;
  color: #E2E8F0;
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.article-code__copy:hover {
  border-color: rgba(125, 211, 252, 0.6);
  color: #F8FAFC;
}

.article-code {
  margin: 0;
  padding: var(--space-5);
  overflow-x: auto;
  color: #E2E8F0;
  font-family: var(--font-code);
  font-size: 0.8125rem;
  line-height: 1.75;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}

.article-code code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

[data-theme="dark"] .article-code-block {
  border-color: #334155;
  background-color: #020617;
}

.article-figure {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
}

.article-chart {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.article-figure figcaption {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.article-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: var(--space-4) 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.article-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.article-chart-legend .bi {
  font-size: 0.7rem;
}

.article-categories {
  margin: var(--space-6) 0 var(--space-4);
}

.article-categories__label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.article-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.article-doc .article-category-list__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-section-alt-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-section-alt);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.article-doc .article-category-list__item:hover {
  border-color: var(--color-section-alt-accent);
  color: var(--color-section-alt-accent);
  background-color: var(--color-card);
}

.article-doc .article-category-list__item:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* ---- Diagram ------------------------------------------------------------- */
.article-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
}

.article-diagram__node {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-card);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  text-align: center;
  color: var(--color-heading);
}

.article-diagram__arrow {
  flex: 0 0 auto;
  color: var(--primary-600);
  font-size: 1rem;
}

[data-theme="dark"] .article-diagram__arrow {
  color: var(--primary-300);
}

/* ---- Checklist ----------------------------------------------------------- */
.article-checklist {
  margin: var(--space-5) 0;
  padding: 0 !important;
  list-style: none;
}

.article-checklist li {
  position: relative;
  margin-bottom: 0.65rem;
  padding-left: 1.75rem;
}

.article-checklist li::before {
  content: "\F26E";
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-family: "bootstrap-icons";
  font-size: 0.95rem;
  color: var(--primary-600);
}

[data-theme="dark"] .article-checklist li::before {
  color: var(--primary-300);
}

/* ---- Article footer ------------------------------------------------------ */
.article-footer {
  margin-top: clamp(2.75rem, 4vw, 4rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.article-share {
  display: block;
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
}

.article-share__label {
  margin: 0 0 0.25rem;
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-heading);
}

.article-share__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.article-share__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 1 1 80px;
  max-width: 120px;
  min-width: 72px;
  min-height: 58px;
  padding: 0.45rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-card);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.article-share__link .bi,
.article-share__flipboard-icon {
  font-size: 0.95rem;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
}

.article-share__link--linkedin .bi {
  color: #0a66c2;
}

.article-share__link--reddit .bi {
  color: #ff4500;
}

.article-share__link--flipboard .article-share__flipboard-icon {
  color: #e12828;
}

.article-doc .article-share__link {
  color: var(--color-text);
  text-decoration: none;
}

.article-doc .article-share__link:hover {
  border-color: var(--color-section-alt-accent);
  color: var(--color-section-alt-accent);
  background-color: var(--color-section-alt);
}

.article-share__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.article-share__status {
  min-height: 1.2em;
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.article-author {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-section);
}

.article-author__avatar {
  display: block;
  width: 80px;
  height: auto;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  object-fit: cover;
  object-position: center 30%;
}

.article-author__content {
  min-width: 0;
}

.article-author .ab-eyebrow {
  margin-bottom: 10px;
}

.article-doc .article-author__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.article-doc .article-author__role {
  margin: var(--space-1) 0 0;
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  color: var(--color-section-alt-accent);
}

.article-doc .article-author__bio {
  margin: var(--space-2) 0 var(--space-3);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text);
}

.article-author__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.article-author__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 30px;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-card);
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.article-author__social a:hover {
  border-color: var(--color-section-alt-accent);
  color: var(--color-section-alt-accent);
  background-color: var(--color-section-alt);
}

.article-author__social a:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.article-author__social .bi {
  font-size: 0.8rem;
}

.article-related {
  margin-top: var(--space-6);
}

.article-related__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.article-related__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.article-related__list li {
  margin: 0;
}

.article-related__link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
  color: var(--color-text) !important;
  text-decoration: none !important;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.article-related__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  min-height: 0;
}

.article-related__media img {
  transition: transform var(--transition-slow);
}

.article-related__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  line-height: 1.45;
}

.article-related__text {
  min-width: 0;
}

.article-related__link .bi {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--primary-600);
  transition: transform var(--transition-fast);
}

.article-related__link:hover .article-related__media img {
  transform: scale(1.04);
}

.article-related__link:hover {
  border-color: var(--primary-300);
  color: var(--primary-700) !important;
  background-color: var(--color-section);
}

.article-related__link:hover .bi {
  transform: translateX(3px);
}

[data-theme="dark"] .article-related__link:hover {
  border-color: var(--primary-600);
  color: var(--primary-200) !important;
}

[data-theme="dark"] .article-related__link .bi {
  color: var(--primary-300);
}

.article-related__link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-6);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--primary-600);
  text-decoration: none;
}

[data-theme="dark"] .article-back {
  color: var(--primary-300);
}

.article-back:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.article-back .bi {
  transition: transform var(--transition-fast);
}

.article-back:hover .bi {
  transform: translateX(-3px);
}

/* ---- Article CTA --------------------------------------------------------- */
.article-cta {
  margin-top: 0;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .article-layout {
    grid-template-columns: minmax(0, var(--article-measure));
    grid-template-areas:
      "aside"
      "doc";
    gap: var(--space-6);
    justify-content: center;
  }

  .article-aside {
    position: static;
  }

  .article-toc {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-card);
  }

  .article-toc__summary {
    padding-bottom: 0;
  }

  .article-toc__list {
    margin-top: var(--space-3);
  }

  .article-aside__promo {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .article-hero {
    padding-block: var(--space-6) var(--space-6);
  }

  .article-breadcrumb {
    margin-bottom: var(--space-5);
  }

  .article-hero__title {
    max-width: none;
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    line-height: 1.14;
  }

  .article-hero__intro {
    font-size: 1rem;
    line-height: 1.7;
  }

  .article-hero__meta {
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-5);
  }

  .article-doc {
    font-size: 1rem;
    line-height: 1.75;
  }

  .article-section {
    scroll-margin-top: calc(var(--header-height-scrolled) + 24px);
  }

  .article-callout {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: var(--space-4);
  }

  .article-callout__icon {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  .article-code {
    padding: var(--space-4);
    font-size: 0.75rem;
  }

  .article-related__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-author {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: var(--space-4);
  }

  .article-author__avatar {
    width: 56px;
    height: auto;
  }
}

@media (max-width: 575.98px) {
  .article-hero__meta-item {
    width: 100%;
  }

  .article-diagram {
    flex-direction: column;
    align-items: stretch;
  }

  .article-diagram__arrow {
    transform: rotate(90deg);
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-progress__bar,
  .article-toc__link,
  .article-category-list__item,
  .article-share__link,
  .article-author__social a,
  .article-related__link,
  .article-related__link .bi,
  .article-aside__link .bi,
  .article-back .bi {
    transition: none !important;
  }
}

@media print {
  @page {
    margin: 0.65in;
  }

  body {
    background: #fff;
    color: #111;
  }

  .article-progress,
  .article-aside,
  .article-share,
  .article-cta,
  #site-header,
  #site-footer,
  .back-to-top,
  .article-related,
  .article-back,
  .nav-overlay {
    display: none !important;
  }

  .article-layout {
    display: block;
  }

  .article-doc {
    font-size: 11pt;
    color: #222;
  }

  .article-hero__title,
  .article-doc h2,
  .article-doc h3,
  .article-author__name {
    color: #111;
  }

  .article-author {
    break-inside: avoid;
    background: #fff;
  }

  .article-doc img,
  .article-doc figure,
  .article-doc table,
  .article-author__avatar {
    max-width: 100%;
    break-inside: avoid;
  }

  .article-doc pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   SITEMAP PAGE (sitemap.html)
   Human-readable website directory: editorial intro, instant search, grouped
   category cards and an honest no-results state. Scoped under .sitemap-page.
   ========================================================================== */

.sitemap-page {
  background-color: var(--color-body);
}

/* ---- Eyebrow ------------------------------------------------------------- */
.sitemap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-600);
}

[data-theme="dark"] .sitemap-eyebrow {
  color: var(--primary-300);
}

.sitemap-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary-400);
  flex-shrink: 0;
}

/* ---- Introduction -------------------------------------------------------- */
.sitemap-intro {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 3.5vw, 3rem);
  background:
    radial-gradient(circle at 90% 8%, rgba(25, 118, 210, 0.08), transparent 46%),
    linear-gradient(180deg, var(--color-section), var(--color-body));
  border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .sitemap-intro {
  background:
    radial-gradient(circle at 90% 8%, rgba(92, 171, 244, 0.11), transparent 46%),
    linear-gradient(180deg, var(--color-section), var(--color-body));
}

.sitemap-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}

.sitemap-intro__title {
  max-width: 17ch;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2.15rem, 2.8vw + 1.2rem, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  text-wrap: balance;
}

.sitemap-intro__lead {
  max-width: 650px;
  margin: var(--space-5) 0 0;
  font-size: clamp(1rem, 0.35vw + 0.96rem, 1.15rem);
  line-height: 1.75;
  color: var(--color-muted);
}

.sitemap-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-card);
  box-shadow: var(--shadow-sm);
}

.sitemap-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.sitemap-summary__value {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 2vw + 1.2rem, 2.5rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.sitemap-summary__label {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-muted);
}

.sitemap-summary__note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ---- Search -------------------------------------------------------------- */
.sitemap-search-section {
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
  background-color: var(--color-section);
  border-bottom: 1px solid var(--color-border);
}

.sitemap-search {
  max-width: 820px;
  margin: 0 auto;
}

.sitemap-search__box {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0.35rem 0.35rem 1.05rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-card);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.sitemap-search__box:focus-within {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.12);
}

[data-theme="dark"] .sitemap-search__box:focus-within {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px rgba(92, 171, 244, 0.16);
}

.sitemap-search__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--primary-600);
}

[data-theme="dark"] .sitemap-search__icon {
  color: var(--primary-300);
}

.sitemap-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  -webkit-appearance: none;
  appearance: none;
}

.sitemap-search__input::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.sitemap-search__input::-webkit-search-cancel-button,
.sitemap-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.sitemap-search__clear {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-section);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.sitemap-search__clear[hidden] {
  display: none;
}

.sitemap-search__clear:hover {
  border-color: var(--primary-300);
  color: var(--primary-700);
  background-color: var(--color-card);
}

[data-theme="dark"] .sitemap-search__clear:hover {
  border-color: var(--primary-600);
  color: var(--primary-200);
}

.sitemap-search__clear:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.sitemap-search__status {
  min-height: 1.25rem;
  margin: 0.65rem 0 0;
  padding-left: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.sitemap-noscript {
  max-width: 820px;
  margin: var(--space-3) auto 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* ---- Directory grid ------------------------------------------------------ */
.sitemap-directory {
  padding-block: clamp(2.5rem, 4vw, 4rem) clamp(3rem, 5vw, 5rem);
}

.sitemap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  align-items: start;
}

.sitemap-category {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card);
  box-shadow: var(--shadow-sm);
}

.sitemap-category[hidden],
.sitemap-list li[hidden] {
  display: none;
}

.sitemap-category__header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-section);
}

.sitemap-category__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sitemap-category__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.sitemap-category__count {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-card);
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}

.sitemap-category__desc {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.sitemap-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap-list li + li {
  border-top: 1px solid var(--color-border);
}

.sitemap-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.8rem var(--space-5);
  color: var(--color-text);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.sitemap-link__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.sitemap-link__title {
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  line-height: 1.45;
}

.sitemap-link__meta {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-muted);
}

.sitemap-link__arrow {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--color-border);
  transition:
    transform var(--transition-fast),
    color var(--transition-fast);
}

.sitemap-link:hover {
  background-color: var(--color-section);
  color: var(--primary-700);
}

[data-theme="dark"] .sitemap-link:hover {
  color: var(--primary-200);
}

.sitemap-link:hover .sitemap-link__arrow {
  color: var(--primary-600);
  transform: translateX(3px);
}

[data-theme="dark"] .sitemap-link:hover .sitemap-link__arrow {
  color: var(--primary-300);
}

.sitemap-link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
}

.sitemap-link[aria-current="page"] {
  background-color: var(--color-section);
}

.sitemap-link[aria-current="page"] .sitemap-link__meta {
  color: var(--primary-600);
}

[data-theme="dark"] .sitemap-link[aria-current="page"] .sitemap-link__meta {
  color: var(--primary-300);
}

.sitemap-mark {
  padding: 0 0.06em;
  border-radius: 2px;
  background-color: rgba(25, 118, 210, 0.16);
  color: inherit;
}

[data-theme="dark"] .sitemap-mark {
  background-color: rgba(92, 171, 244, 0.26);
}

/* ---- No results ---------------------------------------------------------- */
.sitemap-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-5);
  padding: clamp(var(--space-6), 5vw, var(--space-8)) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-section);
  text-align: center;
}

.sitemap-empty[hidden] {
  display: none;
}

.sitemap-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-card);
  color: var(--primary-600);
  font-size: 1.15rem;
}

[data-theme="dark"] .sitemap-empty__icon {
  color: var(--primary-300);
}

.sitemap-empty__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.sitemap-empty__text {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ---- Help strip ---------------------------------------------------------- */
.sitemap-help {
  padding-block: clamp(2.5rem, 4vw, 4rem);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-section);
}

.sitemap-help__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
}

.sitemap-help__eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.sitemap-help__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1vw + 1.1rem, 1.75rem);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--color-heading);
}

.sitemap-help__text {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.sitemap-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  .sitemap-intro__grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .sitemap-intro__title {
    max-width: none;
  }

  .sitemap-summary {
    max-width: 420px;
  }
}

@media (min-width: 576px) {
  .sitemap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .sitemap-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .sitemap-intro {
    padding-block: var(--space-6);
  }

  .sitemap-intro__title {
    font-size: clamp(1.95rem, 7vw, 2.65rem);
    line-height: 1.12;
  }

  .sitemap-intro__lead {
    font-size: 1rem;
    line-height: 1.7;
  }

  .sitemap-search__box {
    padding-left: 0.85rem;
  }

  .sitemap-search__input {
    height: 44px;
    font-size: 0.9375rem;
  }

  .sitemap-category__header {
    padding: var(--space-4);
  }

  .sitemap-link {
    padding: 0.75rem var(--space-4);
  }

  .sitemap-help__inner {
    align-items: flex-start;
  }
}

@media (max-width: 575.98px) {
  .sitemap-summary {
    max-width: none;
    padding: var(--space-4);
  }

  .sitemap-search__clear {
    padding: 0 0.75rem;
    font-size: 0.75rem;
  }

  .sitemap-search__status {
    padding-left: 0.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sitemap-search__box,
  .sitemap-search__clear,
  .sitemap-link,
  .sitemap-link__arrow {
    transition: none !important;
  }

  .sitemap-link:hover .sitemap-link__arrow {
    transform: none;
  }
}

@media print {
  .sitemap-search-section,
  .sitemap-help,
  #site-header,
  #site-footer,
  .back-to-top {
    display: none !important;
  }

  .sitemap-intro {
    background: none;
  }

  .sitemap-grid {
    display: block;
  }

  .sitemap-category {
    margin-bottom: 12pt;
    break-inside: avoid;
  }

  .sitemap-link__arrow {
    display: none;
  }
}

/* ==========================================================================
   Academic leadership profile (vadivel-murugan.html)
   --------------------------------------------------------------------------
   Page-scoped helpers layered on the shared profile components. The hero,
   biography, highlights, expertise cards, credential cards, leadership links,
   connect tiles and closing CTA all reuse the existing design system.
   ========================================================================== */

/* Off-screen holder for the inline Google Scholar sprite. */
.vm-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.vm-scholar-icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

/* Academic qualifications: the Ph.D. card spans the row and carries the
   strongest weight; the remaining three sit as supporting credentials. */
.vm-credentials {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  margin-top: clamp(var(--space-6), 3.5vw, var(--space-7));
}

.vm-credential--primary {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .vm-credential--primary {
  border-color: rgba(133, 192, 247, 0.4);
}

.vm-credential--primary .as-credential__title {
  font-size: clamp(1.375rem, 0.6vw + 1.2rem, 1.75rem);
}

.vm-credential__badge {
  display: inline-flex;
  align-items: center;
  margin: var(--space-3) 0 0;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-pill);
  background-color: var(--primary-50);
  color: var(--primary-700);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}

[data-theme="dark"] .vm-credential__badge {
  background-color: rgba(133, 192, 247, 0.14);
  color: var(--primary-200);
}

@media (min-width: 768px) {
  .vm-credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vm-credential--primary {
    grid-column: 1 / -1;
  }
}

/* At the two-column step the last credential closes the row, so the M.S. card
   does not leave an empty cell beside it. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .vm-credentials .as-credential:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  .vm-credentials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Research interests: five full cards on the shared expertise-card surface. */
.vm-interests {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  margin-top: clamp(var(--space-6), 3.5vw, var(--space-7));
}

.vm-interest .as-expertise__title {
  margin-bottom: var(--space-2);
}

.vm-interest__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .vm-interests {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Five cards on a two-column grid: the fifth closes the last row instead of
     leaving an empty half-row. */
  .vm-interests .vm-interest:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  .vm-interests {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* Three cards on the first row (two tracks each), then the remaining two
     share the second row as wider cards — no empty cell. */
  .vm-interests .vm-interest {
    grid-column: span 2;
  }

  .vm-interests .vm-interest:nth-child(4),
  .vm-interests .vm-interest:nth-child(5) {
    grid-column: span 3;
  }
}

/* Scholarly contribution categories. */
.vm-contributions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-5));
  margin-top: clamp(var(--space-6), 3.5vw, var(--space-7));
}

@media (min-width: 768px) {
  .vm-contributions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .vm-contributions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Two verified profile destinations instead of the three-column connect grid. */
@media (min-width: 768px) {
  .vm-connect {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}