/* GLOBAL CAPP — generated bundle. Edit css/src/*.css and re-run: node build/build.mjs */

/* ==== tokens.css ==== */
/* ============================================================
   GLOBAL CAPP — Design tokens
   ------------------------------------------------------------
   The dark cinematic identity of the original design, formalised
   into a system. Nothing here is page-specific.

   Changes from the original tokens:
   - Type scale raised across the board. The previous body size
     bottomed out around 16px with a 1.05vw slope that barely moved;
     it now runs 16 → 19px with 1.7 line-height, which is what dark
     backgrounds need to stay readable.
   - Muted greys lightened so secondary text clears WCAG AA on the
     navy background instead of sitting just under it.
   - Surface scale extended so sections can alternate tone.
   ============================================================ */
:root {
  /* ---- Navy scale (backgrounds, surfaces, borders) ---- */
  --navy-950: #04070d;
  --navy-900: #060b14;
  --navy-850: #0a1220;
  --navy-800: #0e1728;
  --navy-750: #121d33;
  --navy-700: #16233a;
  --navy-600: #22334f;

  /* ---- Brand ---- */
  --blue: #2470e0;
  --blue-bright: #4a8cff;
  --blue-deep: #123a7a;
  --yellow: #f5b50a;
  --yellow-soft: #ffc21a;
  --yellow-dim: rgba(245, 181, 10, 0.14);

  /* ---- Neutrals ----
     gray-400 and gray-500 are the workhorses for secondary copy.
     Both clear 4.5:1 against --navy-900; the older #7d8a9d/#4a5568
     pair did not once it was used at 13–14px. */
  --white: #ffffff;
  --off-white: #f2f5f9;
  --gray-100: #e3e8ef;
  --gray-200: #cdd5e0;
  --gray-300: #b3bece;
  --gray-400: #97a4b6;
  --gray-500: #7d8b9f;
  --gray-600: #5d6b80;

  /* ---- Semantic ---- */
  --color-bg: var(--navy-900);
  --color-surface: var(--navy-850);
  --color-surface-2: var(--navy-800);
  --color-surface-3: var(--navy-750);
  --color-text: var(--off-white);
  --color-muted: var(--gray-300);
  --color-dim: var(--gray-400);
  --color-faint: var(--gray-500);
  --color-border: rgba(179, 190, 206, 0.13);
  --color-border-strong: rgba(179, 190, 206, 0.26);
  --color-accent: var(--yellow);
  --color-primary: var(--blue);
  --color-danger: #ff8080;
  --color-success: #4ad489;

  /* WhatsApp brand green. Deliberately outside the site palette — the whole
     point of this colour is that people recognise it instantly. */
  --whatsapp: #25d366;
  --whatsapp-dark: #1da851;

  /* ---- Typography ----
     Ranges follow the brief: hero 64–96 / h1 52–72 / h2 40–56 /
     h3 24–32 / body 16–19 on desktop, scaling down to
     hero 38–52 / h1 36–44 / h2 30–38 / body 15–17 on mobile. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.6rem, 1.4rem + 5.4vw, 5.75rem);   /* 41.6 → 92 */
  --fs-h1: clamp(2.3rem, 1.5rem + 3.4vw, 4.25rem);        /* 36.8 → 68 */
  --fs-h2: clamp(1.95rem, 1.35rem + 2.5vw, 3.35rem);      /* 31.2 → 53.6 */
  --fs-h3: clamp(1.35rem, 1.15rem + 0.85vw, 1.9rem);      /* 21.6 → 30.4 */
  --fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-body: clamp(1rem, 0.94rem + 0.24vw, 1.1875rem);    /* 16 → 19 */
  --fs-body-sm: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem);
  --fs-small: 0.9375rem;                                   /* 15 */
  --fs-meta: 0.8125rem;                                    /* 13 */
  --fs-micro: 0.75rem;                                     /* 12 — labels only */

  --lh-tight: 1.06;
  --lh-heading: 1.14;
  --lh-body: 1.7;
  --lh-snug: 1.55;

  --tracking-label: 0.2em;
  --tracking-btn: 0.09em;

  /* ---- Layout ---- */
  --container-max: 1320px;
  --container-wide: 1560px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 88px;
  --header-h-compact: 66px;

  /* ---- Spacing ---- */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: clamp(4rem, 7vw, 7rem);
  --space-2xl: clamp(5.5rem, 9.5vw, 9.5rem);

  /* ---- Shape & depth ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 16px rgba(2, 6, 14, 0.35);
  --shadow-lg: 0 24px 64px rgba(2, 6, 14, 0.55);
  --shadow-panel: 0 32px 80px rgba(2, 6, 14, 0.65);

  /* ---- Motion ---- */
  --transition-fast: 170ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 340ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 620ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-reveal: 720ms cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Z layers ---- */
  --z-float: 150;
  --z-bar: 160;
  --z-header: 200;
  --z-drawer: 250;
  --z-search: 300;
  --z-loader: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 1ms;
    --transition-base: 1ms;
    --transition-slow: 1ms;
    --transition-reveal: 1ms;
  }
}


/* ==== base.css ==== */
/* ============================================================
   GLOBAL CAPP — Reset, typography, layout primitives
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
/* Set by the preloader while the overlay is up. Applied from JS, so a page
   whose script never runs can never be left locked. */
html.is-loading, html.is-loading body { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
abbr[title] { text-decoration: none; color: var(--yellow); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--navy-800);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}
kbd {
  font-family: inherit;
  font-size: 0.8em;
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0.1em 0.4em;
  color: var(--color-muted);
}

::selection { background: var(--yellow); color: var(--navy-900); }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.018em;
  color: var(--white);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.022em; }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; }
.display { font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.025em; }

p { color: var(--color-muted); }
p + p { margin-top: 1.05em; }
strong { color: var(--white); font-weight: 600; }

/* ---------- Eyebrow label ----------
   Uppercase is reserved for labels and metadata — never body copy. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--yellow);
  flex: none;
}

.lede {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-muted);
  max-width: 58ch;
}
.meta {
  font-size: var(--fs-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-dim);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-xl); position: relative; }
.section--tight { padding-block: var(--space-lg); }
.section--loose { padding-block: var(--space-2xl); }

/* Alternating tone gives the page depth without extra borders (§62). */
.section--alt {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.section-head { max-width: 720px; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head h2 { margin-bottom: 1.1rem; }
.section-head .lede { margin-bottom: 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* Heading on the left, "view all" link on the right. */
.section-head--row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.section-head--row > div { max-width: 720px; }
.section-head--row h2,
.section-head--row .lede { max-width: 24ch; }
.section-head--row .lede { max-width: 58ch; }
.section-head-link { flex: none; margin-bottom: 0.35rem; }

.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* ---------- Prose ---------- */
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--fs-h2); margin-top: 1.8em; }
.prose h2:first-child, .prose > .eyebrow + h2 { margin-top: 0; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.6em; }
.prose p { font-size: var(--fs-body); line-height: var(--lh-body); }
.prose a:not(.btn):not(.link-arrow) {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):not(.link-arrow):hover { color: var(--yellow-soft); }
.prose .eyebrow { margin-bottom: 0; }
.prose-list { display: grid; gap: 0.6rem; }
.prose-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--color-muted);
  line-height: var(--lh-snug);
}
.prose-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--yellow);
}
.prose blockquote {
  border-left: 2px solid var(--yellow);
  padding: 0.35rem 0 0.35rem 1.5rem;
  margin-block: 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--off-white);
}
.prose--article > p:first-of-type {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  color: var(--gray-100);
}

/* ---------- Utilities ---------- */
.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;
}
[hidden] { display: none !important; }
.text-btn {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 500;
  padding: 0.8rem 1.35rem;
  background: var(--yellow);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 1rem; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}
.reveal.is-inview { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

.reveal-img { position: relative; overflow: hidden; }
.reveal-img img { transform: scale(1.07); transition: transform 1.1s var(--ease-out-expo); }
.reveal-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy-850);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.85s var(--ease-out-expo);
  z-index: 1;
  pointer-events: none;
}
.reveal-img.is-inview::after { transform: scaleX(0); }
.reveal-img.is-inview img { transform: scale(1); }

/* ---------- Page transition ----------
   A short fade on enter and on internal navigation. Deliberately
   fast: page changes should feel connected, not staged. */
.page-fade { animation: pageIn 380ms var(--ease-out-expo) both; }
body.is-leaving .page-fade { opacity: 0; transition: opacity 180ms ease; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-img img { opacity: 1; transform: none; transition: none; }
  .reveal-img::after { display: none; }
  .page-fade { animation: none; }
  body.is-leaving .page-fade { opacity: 1; }
}


/* ==== chrome.css ==== */
/* ============================================================
   GLOBAL CAPP — Site chrome
   Loader · header · mega nav · drawer · search · footer · floats
   ============================================================ */

/* ---------- Loader (homepage only) ----------
   The original mark-and-sweep loader, unchanged in design.

   Only the animation speeds were slowed: the sweep ran a full pass every
   1s, which read as hurried next to a 2s hold. At 1.8s the bar makes a
   little over one calm pass while the loader is up, and the wordmark
   breathes at a matching pace.

   Duration is owned by js/modules/loader.js, not by these animations.
   ------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: var(--navy-950);
  transition: opacity 480ms ease, visibility 480ms;   /* original fade timing */
  /* Failsafe: if the script never runs — a JS error, a blocked module —
     the overlay still clears rather than hiding the site permanently. */
  animation: loaderFailsafe 0s linear 8s forwards;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.loader-inner { text-align: center; }
.loader-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.28em;
  color: var(--white);
  animation: loaderPulse 1.9s ease-in-out infinite alternate;
}
.loader-mark span { color: var(--yellow); }
.loader-bar {
  width: 180px;
  height: 2px;
  margin: 1.4rem auto 0;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.loader-bar i {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--yellow);
  animation: loaderBar 1.8s var(--ease-out-expo) infinite;
}
@keyframes loaderBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(450%); }
}
@keyframes loaderPulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-mark, .loader-bar i { animation: none; }
  .loader { transition: opacity 200ms linear, visibility 200ms; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: height var(--transition-base), background var(--transition-base),
              border-color var(--transition-base), backdrop-filter var(--transition-base);
}
.site-header.is-compact,
.site-header.has-open-panel,
body:not(.page-home) .site-header {
  background: rgba(6, 11, 20, 0.9);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--color-border);
}
.site-header.is-compact { height: var(--header-h-compact); }

.header-inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

/* ---------- Brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  color: var(--white);
  line-height: 1;
  flex: none;
}
.brand-mark { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-word small {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--yellow);
  margin-top: 0.22em;
}

/* ---------- Primary nav ---------- */
.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; }
.nav-item { position: relative; display: flex; align-items: center; }

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 0.62rem;
  font-family: var(--font-display);
  font-size: 0.815rem;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--gray-300);
  transition: color var(--transition-fast);
  position: relative;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.62rem; right: 0.62rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
/* `.is-current` marks the whole section the visitor is inside, so Products
   stays lit on a product detail page. `aria-current="page"` is reserved for
   the exact page and is what a screen reader announces. */
.nav-link:hover,
.nav-item.is-current > .nav-link,
.nav-item--has-panel.is-open .nav-link { color: var(--white); }
.nav-link:hover::after,
.nav-item.is-current > .nav-link::after,
.nav-item--has-panel.is-open .nav-link::after { transform: scaleX(1); }
.nav-item.is-current > .nav-caret { color: var(--yellow); }

.nav-caret {
  display: grid;
  place-items: center;
  width: 22px; height: 32px;
  margin-left: -0.5rem;
  color: var(--gray-400);
  transition: color var(--transition-fast), transform var(--transition-base);
}
.nav-caret svg { width: 13px; height: 13px; stroke-width: 2.4; }
.nav-caret:hover { color: var(--white); }
.nav-caret[aria-expanded="true"] { transform: rotate(180deg); color: var(--yellow); }

/* ---------- Nav panels ----------
   Closed panels use visibility:hidden, which keeps them out of the
   tab order while still allowing a transition. */
.nav-panel {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  background: var(--navy-850);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-panel);
}
.nav-item.is-open > .nav-panel { opacity: 1; visibility: visible; transform: none; }

/* Simple dropdown, anchored to its item */
.nav-panel--drop {
  top: calc(100% + 2px);
  left: 0;
  min-width: 250px;
  border-radius: var(--radius-md);
  padding: 0.6rem;
}
.nav-drop-list a {
  display: block;
  padding: 0.62rem 0.85rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast), padding-left var(--transition-fast);
}
.nav-drop-list a:hover { color: var(--white); background: var(--navy-800); padding-left: 1.1rem; }

/* Full-width mega panel.
   The <li> goes position:static so the panel resolves against the fixed
   .site-header instead of the nav item — otherwise it centres on an item
   sitting far right and its leading columns fall off the viewport. */
.nav-item--mega { position: static; }
.nav-panel--mega {
  top: 100%;
  left: 0;
  right: 0;
  transform: translateY(-8px);
  border-inline: 0;
  border-top: 1px solid var(--color-border);
}
.nav-item.is-open > .nav-panel--mega { transform: none; }

.mega-inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 2.75rem var(--gutter) 2.5rem;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
}
.mega-inner--split { grid-template-columns: 1fr 280px; }
.mega-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.mega-cols--rich { grid-template-columns: repeat(2, 1fr); gap: 0.5rem 2rem; }

.mega-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}
.mega-cat svg { width: 13px; height: 13px; opacity: 0; transform: translateX(-4px); transition: all var(--transition-fast); }
.mega-cat:hover svg { opacity: 1; transform: none; }
.mega-cat--static { cursor: default; }

.mega-col ul a {
  display: block;
  padding: 0.42rem 0;
  color: var(--color-muted);
  font-size: var(--fs-small);
  line-height: 1.45;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.mega-col ul a:hover { color: var(--white); padding-left: 0.5rem; }

.mega-rich {
  display: flex;
  gap: 0.9rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.mega-rich:hover { background: var(--navy-800); }
.mega-rich-idx {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--yellow);
  padding-top: 0.2rem;
}
.mega-rich-body strong { display: block; font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.2rem; }
.mega-rich-body span { display: block; font-size: var(--fs-meta); color: var(--color-dim); line-height: 1.5; }

.mega-side { border-left: 1px solid var(--color-border); padding-left: 2rem; }
.mega-side ul { margin-bottom: 1.2rem; }
.mega-side ul a {
  display: block;
  padding: 0.4rem 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.mega-side ul a:hover { color: var(--white); padding-left: 0.4rem; }

.mega-feature {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-end;
}
.mega-feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.mega-feature:hover img { transform: scale(1.05); }
.mega-feature::after {
  content: "";
  position: absolute; inset: 0;
  /* Ramps early and hard: the label sits mid-image, and these photos can be
     bright sky at that point. */
  background: linear-gradient(180deg, rgba(6,11,20,0.2) 0%, rgba(6,11,20,0.74) 38%, rgba(6,11,20,0.97) 100%);
}
.mega-feature-body { position: relative; z-index: 1; padding: 1.4rem; }
.mega-feature-label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.4rem;
}
.mega-feature-body strong { display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.35rem; }
.mega-feature-text { display: block; font-size: var(--fs-meta); color: var(--gray-300); margin-bottom: 0.9rem; line-height: 1.5; }

/* ---------- Header actions ---------- */
.header-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.icon-btn {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--gray-300);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.header-cta { padding: 0.85rem 1.35rem; font-size: 0.78rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  color: var(--white);
}
.nav-toggle svg { width: 24px; height: 24px; }

/* ---------- Mobile drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 7, 13, 0.72);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 92vw);
  background: var(--navy-850);
  border-left: 1px solid var(--color-border);
  padding: 1rem 1.5rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
}
.drawer.is-open .drawer-panel { transform: none; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.5rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}
.drawer-search { padding-block: 1rem; border-bottom: 1px solid var(--color-border); }
.drawer-search-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--navy-800);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-dim);
  font-size: var(--fs-small);
}
.drawer-search-btn svg { width: 17px; height: 17px; }

.drawer-nav { padding-top: 0.5rem; }
.drawer-link {
  display: block;
  padding: 0.95rem 0.15rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--off-white);
  border-bottom: 1px solid var(--color-border);
}
.drawer-link.is-current { color: var(--yellow); }
.drawer-acc-head { display: flex; align-items: center; border-bottom: 1px solid var(--color-border); }
.drawer-link--split { flex: 1; border-bottom: 0; }
.drawer-acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 0.15rem;
  color: var(--color-muted);
  flex: none;
}
.drawer-acc-btn--sub {
  width: 100%;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-200);
  padding: 0.75rem 0.15rem;
  border-bottom: 1px solid var(--color-border);
}
.acc-ico {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: transform var(--transition-base), border-color var(--transition-fast), color var(--transition-fast);
}
.acc-ico svg { width: 13px; height: 13px; }
[aria-expanded="true"] > .acc-ico { transform: rotate(45deg); border-color: var(--yellow); color: var(--yellow); }

.drawer-acc-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base);
}
.drawer-sub a, .drawer-sub-link {
  display: block;
  padding: 0.62rem 0.15rem 0.62rem 1.1rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}
.drawer-sub-link { color: var(--yellow); font-weight: 600; }
.drawer-acc--nested { padding-left: 0.9rem; }
.drawer-acc--nested .drawer-sub a { padding-left: 1.1rem; font-size: 0.875rem; color: var(--color-dim); }

.drawer-cta { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.6rem; }
.drawer-cta .btn { width: 100%; justify-content: center; }

/* ---------- Search overlay ---------- */
.search-overlay { position: fixed; inset: 0; z-index: var(--z-search); }
.search-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 7, 13, 0.85);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.search-overlay.is-open .search-backdrop { opacity: 1; }
.search-panel {
  position: relative;
  width: min(760px, calc(100vw - 2rem));
  margin: clamp(3rem, 10vh, 7rem) auto 0;
  background: var(--navy-850);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transform: translateY(-14px) scale(0.985);
  transition: opacity var(--transition-base), transform var(--transition-base);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
}
.search-overlay.is-open .search-panel { opacity: 1; transform: none; }

.search-form {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.search-ico { color: var(--yellow); display: grid; place-items: center; }
.search-ico svg { width: 20px; height: 20px; }
.search-form input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--white);
}
.search-form input::placeholder { color: var(--gray-500); }
.search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-filters {
  display: flex;
  gap: 0.4rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.search-filters::-webkit-scrollbar { display: none; }
.search-filter {
  padding: 0.4rem 0.85rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-dim);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.search-filter:hover { color: var(--white); border-color: var(--color-border-strong); }
.search-filter.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); font-weight: 600; }

.search-hint { padding: 0.9rem 1.25rem; font-size: var(--fs-meta); color: var(--color-faint); }
.search-results { overflow-y: auto; padding: 0 0.6rem 0.6rem; }
.search-result {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.search-result:hover, .search-result.is-active { background: var(--navy-800); }
.search-result-body { flex: 1; min-width: 0; }
.search-result-cat {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.2rem;
}
.search-result-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 0.15rem;
}
.search-result-desc {
  display: block;
  font-size: var(--fs-meta);
  color: var(--color-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-arrow { color: var(--gray-500); flex: none; }
.search-result-arrow svg { width: 16px; height: 16px; }
.search-result mark { background: var(--yellow-dim); color: var(--yellow); border-radius: 2px; }
.search-empty { padding: 2.5rem 1.25rem; text-align: center; color: var(--color-dim); font-size: var(--fs-small); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-950);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: var(--space-lg);
}
.footer-brand > p {
  color: var(--color-dim);
  font-size: var(--fs-small);
  margin-top: 1.1rem;
  max-width: 38ch;
  line-height: 1.65;
}
.footer-contact { margin-top: 1.6rem; display: grid; gap: 0.75rem; }
.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
  transition: color var(--transition-fast);
}
.footer-contact-row svg { width: 17px; height: 17px; color: var(--yellow); flex: none; }
/* The address runs to three lines, so align its icon to the first one. */
.footer-contact-row--address { align-items: flex-start; }
.footer-contact-row--address svg { margin-top: 0.28em; }
.footer-contact-row address { font-style: normal; line-height: 1.55; }
a.footer-contact-row:hover { color: var(--white); }

.social { display: flex; gap: 0.55rem; margin-top: 1.6rem; }
.social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-dim);
  transition: all var(--transition-fast);
}
.social svg { width: 17px; height: 17px; }
.social a:hover { color: var(--navy-900); background: var(--yellow); border-color: var(--yellow); }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
.footer-col-title {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1.05rem;
}
.footer-col ul a {
  display: block;
  padding: 0.32rem 0;
  color: var(--color-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.footer-col ul a:hover { color: var(--white); padding-left: 0.35rem; }

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding: 1.4rem 0 calc(1.4rem + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-meta);
  color: var(--color-faint);
}
/* Reserve the corner the fixed back-to-top button occupies, so the last
   legal link (Sitemap) is never sitting underneath it. */
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; padding-right: 3.75rem; }
.footer-bottom a { transition: color var(--transition-fast); }
.footer-bottom a:hover { color: var(--white); }

/* ---------- Floating actions ---------- */
.float-actions {
  position: fixed;
  right: 1.25rem;
  bottom: 6.25rem;
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.float-actions a {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--navy-800);
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--off-white);
  transition: all var(--transition-fast);
}
/* :not() keeps the yellow hover off WhatsApp at the source — safer than
   relying on a later override, which a reordered bundle could defeat. */
.float-actions a:not(.is-whatsapp):hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--navy-900);
  transform: translateY(-2px);
}
.float-actions svg { width: 19px; height: 19px; }

/* WhatsApp keeps its own brand colour rather than the site's dark chip, so
   it is recognised at a glance instead of read. */
.float-actions .is-whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: #fff;
  /* A soft green halo lifts it off the dark page without a hard shadow. */
  box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.12);
}
.float-actions .is-whatsapp:hover {
  /* Never yellow — the colour is the recognition. Hover only deepens it. */
  background: var(--whatsapp-dark);
  border-color: var(--whatsapp-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 9px rgba(37, 211, 102, 0.16);
}
.float-actions .is-whatsapp svg { width: 21px; height: 21px; }

.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--z-float);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--blue);
  border-radius: 50%;
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-base), transform var(--transition-base),
              visibility var(--transition-base), background var(--transition-fast);
}
.to-top svg { width: 18px; height: 18px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--blue-bright); }

.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(6, 11, 20, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.95rem 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 48px;
}
.mobile-bar a + a { border-left: 1px solid var(--color-border); }
.mobile-bar svg { width: 16px; height: 16px; flex: none; }
.mobile-bar .mb-accent { background: var(--yellow); color: var(--navy-900); }
/* Same brand green on mobile. Enquire stays yellow and stays the primary
   action — WhatsApp is recognisable, not louder. */
.mobile-bar .is-whatsapp { background: var(--whatsapp); color: #fff; }
.mobile-bar .is-whatsapp + a { border-left-color: transparent; }

/* ---------- Visitor counter ----------
   A sticky chip in the bottom-left corner: the one free corner on this
   layout. The quick-contact column and back-to-top own the bottom right,
   so nothing overlaps at any width.

   Pitched quiet on purpose — small text, muted colour, translucent ground.
   The green dot carries the only colour, which is what makes it readable
   at a glance without pulling attention off the page. */
.visitor-float {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: rgba(10, 18, 32, 0.82);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--fs-meta);
  line-height: 1;
  color: var(--color-dim);
  white-space: nowrap;
  pointer-events: none;   /* purely informational — never intercepts a click */
  animation: visitorIn 600ms var(--ease-out-expo) both;
}
@keyframes visitorIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.visitor-float b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gray-100);
  font-variant-numeric: tabular-nums;
}
.visitor-label { letter-spacing: 0.06em; }
.visitor-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--whatsapp);
  flex: none;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.14);
  animation: visitorPulse 2.6s ease-in-out infinite;
}
@keyframes visitorPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
/* The homepage hero is a composed full-screen panel — slide counter,
   progress bar and CTAs all claim the lower area. Rather than squeeze the
   chip into the gap between them, it steps aside while the hero is on
   screen and returns the moment you scroll past. Toggled by
   js/modules/visits.js. */
.visitor-float.is-tucked {
  /* `animation: none` is load-bearing: the entrance animation below uses
     fill-mode `both`, and an animated value beats a normal declaration in
     the cascade — so without this the opacity below is simply ignored. */
  animation: none;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.visitor-float { transition: opacity var(--transition-base), transform var(--transition-base); }

@media (prefers-reduced-motion: reduce) {
  .visitor-dot { animation: none; }
  .visitor-float { animation: none; }
}


/* ==== components.css ==== */
/* ============================================================
   GLOBAL CAPP — Components
   Buttons · links · cards · tables · gallery · FAQ · forms
   · filters · share · notices · breadcrumbs
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.7rem;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: var(--tracking-btn);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), transform var(--transition-fast);
}
.btn .btn-arrow { display: grid; place-items: center; transition: transform var(--transition-base); }
.btn .btn-arrow svg { width: 15px; height: 15px; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { transform: none; }

.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-bright); }
.btn--accent { background: var(--yellow); color: var(--navy-900); }
.btn--accent:hover { background: var(--yellow-soft); }
.btn--ghost { border-color: var(--color-border-strong); color: var(--white); }
.btn--ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.btn--dark { background: var(--navy-800); border-color: var(--color-border); color: var(--white); }
.btn--dark:hover { border-color: var(--color-border-strong); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- Arrow link ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--yellow);
  position: relative;
  padding-bottom: 4px;
  align-self: flex-start;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--transition-base); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { margin-bottom: 1.6rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 0.15rem; }
.breadcrumbs a, .breadcrumbs span {
  font-size: var(--fs-meta);
  letter-spacing: 0.03em;
  color: var(--color-dim);
}
.breadcrumbs a { transition: color var(--transition-fast); }
.breadcrumbs a:hover { color: var(--yellow); }
.breadcrumbs li[aria-current] span { color: var(--gray-200); }
.crumb-sep { display: grid; place-items: center; color: var(--gray-600); }
.crumb-sep svg { width: 13px; height: 13px; }

/* ---------- Card grid ---------- */
.card-grid { display: grid; gap: 1.25rem; }
.card-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.card-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.card-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.card-grid--certs { gap: 1rem; }

/* ---------- Card base ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base), background var(--transition-base);
}
a.card:hover { border-color: var(--color-border-strong); transform: translateY(-4px); }
.section--alt .card { background: var(--navy-900); }

.card-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy-800); }
.card-media--wide { aspect-ratio: 5 / 3; }
.card-media--tall { aspect-ratio: 4 / 5; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
a.card:hover .card-media img { transform: scale(1.05); }

.card-body { display: flex; flex-direction: column; padding: 1.4rem 1.5rem 1.6rem; flex: 1; }
.card-meta {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.5rem;
}
.card-index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--yellow);
  margin-bottom: 0.5rem;
}
.card-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.card-text {
  display: block;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 1.15rem;
}
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
}
.card-cta svg { width: 14px; height: 14px; transition: transform var(--transition-base); }
a.card:hover .card-cta svg { transform: translateX(4px); }

/* Category card — image-led, taller */
.card--category .card-body { padding: 1.5rem; }
.card--category .card-title { font-size: 1.32rem; }

/* Insight cards keep tighter media */
.card--insight-featured { flex-direction: row; }
.card--insight-featured .card-media { flex: 1 1 55%; aspect-ratio: auto; }
.card--insight-featured .card-body { flex: 1 1 45%; justify-content: center; padding: 2rem; }

/* Download card — horizontal */
.card--download {
  flex-direction: row;
  align-items: center;
  gap: 1.15rem;
  padding: 1.35rem 1.5rem;
}
.card--download:hover { border-color: var(--yellow); }
.dl-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--yellow);
}
.dl-ico svg { width: 20px; height: 20px; }
.dl-body { flex: 1; min-width: 0; }
.dl-body .card-title { font-size: 1.02rem; margin-bottom: 0.25rem; }
.dl-body .card-text { font-size: var(--fs-small); margin-bottom: 0.35rem; }
.dl-body .card-meta { margin-bottom: 0; color: var(--color-faint); letter-spacing: 0.09em; }
.dl-action { color: var(--gray-500); flex: none; transition: color var(--transition-fast), transform var(--transition-base); }
.dl-action svg { width: 18px; height: 18px; }
.card--download:hover .dl-action { color: var(--yellow); transform: translateX(3px); }
.card--download.is-pending .dl-ico { color: var(--gray-500); border-style: dashed; }
.dl-list { display: grid; gap: 0.9rem; }
.dl-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* Certification card */
.card--cert {
  align-items: center;
  text-align: center;
  padding: 1.9rem 1.4rem;
  background: transparent;
}
.card--cert.is-pending { border-style: dashed; }
.cert-ico { color: var(--yellow); margin-bottom: 1rem; }
.cert-ico svg { width: 30px; height: 30px; }
.card--cert.is-pending .cert-ico { color: var(--gray-500); }
.card--cert strong { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.3rem; }
.card--cert small { font-size: var(--fs-meta); letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-dim); }
.cert-status {
  margin-top: 0.85rem;
  font-size: var(--fs-micro);
  color: var(--color-faint);
  border-top: 1px solid var(--color-border);
  padding-top: 0.7rem;
  width: 100%;
}

/* Portal card */
.card--portal { padding: 2rem 1.75rem; gap: 0; }
.portal-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--yellow);
  margin-bottom: 1.25rem;
}
.portal-ico svg { width: 21px; height: 21px; }
.card--portal .card-title { font-size: 1.2rem; }
.portal-state {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faint);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
  margin-bottom: 1.25rem;
}

/* Link cards (navigation hubs) */
.link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.link-grid--lg { grid-template-columns: repeat(3, 1fr); }
.link-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.section--alt .link-card { background: var(--navy-900); }
.link-card:hover { border-color: var(--yellow); transform: translateY(-3px); }
.link-card-ico {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--yellow);
  margin-bottom: 1.25rem;
}
.link-card-ico svg { width: 20px; height: 20px; }
.link-card-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--white); margin-bottom: 0.45rem; }
.link-card-text { font-size: var(--fs-body-sm); color: var(--color-muted); line-height: 1.6; }
.link-card-meta { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-faint); margin-top: 0.9rem; }
.link-card-arrow { margin-top: 1.1rem; color: var(--yellow); transition: transform var(--transition-base); }
.link-card-arrow svg { width: 17px; height: 17px; }
.link-card:hover .link-card-arrow { transform: translateX(4px); }

/* ---------- Check list ---------- */
.check-list { display: grid; gap: 0.75rem; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--color-muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
}
.check-ico {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  margin-top: 0.15em;
  color: var(--yellow);
}
.check-ico svg { width: 14px; height: 14px; stroke-width: 2.4; }
.check-list--lg li { font-size: var(--fs-body); }
.check-list--two { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2rem; }

/* ---------- Feature grid ---------- */
.feature-grid { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.feature-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.feature-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.feature-item {
  background: var(--color-bg);
  padding: 2rem 1.9rem 2.2rem;
  transition: background var(--transition-base);
}
.section--alt .feature-item { background: var(--color-surface); }
.feature-item:hover { background: var(--color-surface-2); }
.feature-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--yellow);
  margin-bottom: 1rem;
}
.feature-item h3 { font-size: 1.14rem; margin-bottom: 0.55rem; }
.feature-item p { font-size: var(--fs-body-sm); color: var(--color-muted); line-height: 1.6; }

/* ---------- Fact list ---------- */
.fact-list { border-top: 1px solid var(--color-border); }
.fact-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) 1.4fr;
  gap: 1rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
}
.fact-row dt {
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dim);
}
.fact-row dd { font-size: var(--fs-body-sm); color: var(--gray-100); }
.fact-list--compact .fact-row { padding: 0.75rem 0; grid-template-columns: 1fr 1fr; }

/* ---------- Pills ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pills li {
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--gray-200);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.pills li:hover { border-color: var(--yellow); color: var(--yellow); }

/* ---------- Notice ---------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1.15rem;
  margin-block: 1.5rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-muted);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.015);
}
.notice-dot {
  width: 8px; height: 8px;
  flex: none;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--yellow);
}
.notice--pending .notice-dot { background: var(--yellow); }
.notice--info .notice-dot { background: var(--blue-bright); }

/* ---------- Specification table ---------- */
.spec-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.spec-table { font-size: var(--fs-body-sm); }
.spec-table tr { border-bottom: 1px solid var(--color-border); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table tr:nth-child(odd) { background: rgba(255, 255, 255, 0.012); }
.spec-table th, .spec-table td { padding: 1rem 1.35rem; text-align: left; vertical-align: top; }
.spec-table th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--gray-200);
  width: 42%;
  border-right: 1px solid var(--color-border);
}
.spec-table td { color: var(--gray-100); }
.spec-table td.is-pending { color: var(--color-faint); font-style: italic; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 0.75rem; }
.gallery-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-800);
}
.gallery-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--transition-base), transform var(--transition-slow);
}
.gallery-stage img.is-active { opacity: 1; transform: none; }
.gallery-nav, .gallery-zoom {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: rgba(6, 11, 20, 0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--white);
  backdrop-filter: blur(6px);
  transition: background var(--transition-fast), color var(--transition-fast);
  opacity: 0;
}
.gallery-stage:hover .gallery-nav,
.gallery-stage:hover .gallery-zoom,
.gallery-nav:focus-visible, .gallery-zoom:focus-visible { opacity: 1; }
.gallery-nav:hover, .gallery-zoom:hover { background: var(--yellow); color: var(--navy-900); border-color: var(--yellow); }
.gallery-nav svg, .gallery-zoom svg { width: 18px; height: 18px; }
.gallery-prev { left: 0.85rem; top: 50%; transform: translateY(-50%); }
.gallery-next { right: 0.85rem; top: 50%; transform: translateY(-50%); }
.gallery-zoom { right: 0.85rem; bottom: 0.85rem; }

.gallery-thumbs { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
.gallery-thumb {
  flex: none;
  width: 104px;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0.5;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { opacity: 0.85; }
.gallery-thumb.is-active { opacity: 1; border-color: var(--yellow); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-search);
  display: grid;
  place-items: center;
  background: rgba(4, 7, 13, 0.94);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--radius-md); }
.lightbox-close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--white);
}
.lightbox-close:hover { background: var(--yellow); color: var(--navy-900); }
.lightbox-close svg { width: 20px; height: 20px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-q { margin: 0; font-size: inherit; }
.faq-q button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.35rem 0.25rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  font-weight: 600;
  color: var(--white);
  transition: color var(--transition-fast);
}
.faq-q button:hover { color: var(--yellow); }
.faq-ico {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--yellow);
  transition: transform var(--transition-base), background var(--transition-fast);
}
.faq-ico svg { width: 14px; height: 14px; }
[aria-expanded="true"] .faq-ico { transform: rotate(45deg); background: var(--yellow-dim); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height var(--transition-base); }
.faq-a-inner { padding: 0 0.25rem 1.5rem; max-width: 68ch; }
.faq-a-inner p { font-size: var(--fs-body-sm); line-height: var(--lh-body); }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1; }
.filter-ico { color: var(--yellow); display: grid; place-items: center; margin-right: 0.25rem; }
.filter-ico svg { width: 17px; height: 17px; }
.filter-chip {
  padding: 0.55rem 1.05rem;
  min-height: 40px;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-dim);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}
.filter-chip:hover { color: var(--white); border-color: var(--color-border-strong); }
.filter-chip.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); }
.filter-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  min-width: 240px;
  background: var(--navy-800);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.filter-search span { color: var(--gray-500); display: grid; place-items: center; }
.filter-search svg { width: 16px; height: 16px; }
.filter-search input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  padding: 0.7rem 0;
  font-size: var(--fs-small);
  color: var(--white);
  min-width: 0;
}
.filter-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.filter-count { width: 100%; font-size: var(--fs-meta); color: var(--color-faint); margin: 0; }
.filter-empty { text-align: center; padding: 3rem 1rem; color: var(--color-dim); }
.card.is-filtered-out { display: none; }

/* ---------- Share bar ---------- */
.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.share-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.share-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-meta);
  color: var(--color-faint);
}
.share-stat svg { width: 15px; height: 15px; }
.share-actions { display: flex; align-items: center; gap: 0.4rem; }
.share-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-dim);
  margin-right: 0.35rem;
}
.share-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-dim);
  transition: all var(--transition-fast);
}
.share-btn svg { width: 17px; height: 17px; }
.share-btn:hover { color: var(--navy-900); background: var(--yellow); border-color: var(--yellow); }
.share-btn.is-copied { color: var(--color-success); border-color: var(--color-success); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; grid-column: 1 / -1; }
.field--half { grid-column: span 1; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.field input, .field select, .field textarea {
  background: var(--navy-800);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: var(--fs-body-sm);
  color: var(--white);
  min-height: 48px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397a4b6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 15px;
  padding-right: 2.75rem;
}
.field select option { background: var(--navy-800); color: var(--white); }
.field input::placeholder, .field textarea::placeholder { color: var(--gray-600); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-bright);
  background: var(--navy-750);
}
.field input[type="file"] { padding: 0.65rem 1rem; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: 0.5rem 0.9rem;
  background: var(--navy-700);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: var(--fs-meta);
  cursor: pointer;
}
.field-help, .field-help-inline { font-size: var(--fs-micro); color: var(--color-faint); text-transform: none; letter-spacing: 0; }
.field-help-inline { font-weight: 400; margin-left: 0.5rem; }
.error-msg { font-size: var(--fs-meta); color: var(--color-danger); display: none; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--color-danger); }
.field.is-invalid .error-msg { display: block; }

/* Honeypot — visually and assistively hidden, but not display:none
   (some bots skip display:none fields). */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  display: none;
  padding: 0.9rem 1.15rem;
  margin-block: 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  line-height: 1.6;
  border: 1px solid var(--color-border-strong);
}
.form-status.is-shown { display: block; }
.form-status.is-error { border-color: var(--color-danger); color: var(--color-danger); background: rgba(255, 128, 128, 0.06); }
.form-status.is-success { border-color: var(--color-success); color: var(--color-success); background: rgba(74, 212, 137, 0.06); }
.form-status.is-info { border-color: var(--blue-bright); color: var(--gray-100); background: rgba(74, 140, 255, 0.07); }
.form-status code { background: rgba(255,255,255,0.05); }

.form .btn { margin-top: 0.5rem; }
.form-note { font-size: var(--fs-meta); color: var(--color-faint); margin-top: 1rem; text-align: center; }
.form-note a { color: var(--yellow); text-decoration: underline; text-underline-offset: 2px; }

.form-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.section--alt .form-card { background: var(--navy-900); }
.form-card > h2 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.form-card > p { font-size: var(--fs-body-sm); margin-bottom: 1.75rem; }

/* ---------- Marquee ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--color-border);
  padding-block: 1.9rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  flex: none;
  gap: 3.5rem;
  padding-right: 3.5rem;
  align-items: center;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-600);
  white-space: nowrap;
  border: 1px dashed var(--color-border-strong);
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-sm);
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }


/* ==== sections.css ==== */
/* ============================================================
   GLOBAL CAPP — Sections
   Homepage hero · stats · showcase · why · capabilities ·
   process · solutions · CTA · page hero · split · related
   ============================================================ */

/* ---------- Homepage hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-950);
}
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide {
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms var(--ease-out-expo), visibility 900ms;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 8s linear;
}
.hero-slide.is-active img { transform: scale(1); }

/* Two-axis scrim: vertical for the copy block, diagonal for the
   left-hand text column. Keeps white type legible over any frame. */
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,7,13,0.6) 0%, rgba(4,7,13,0.12) 38%, rgba(4,7,13,0.92) 100%),
    linear-gradient(100deg, rgba(4,7,13,0.8) 0%, rgba(4,7,13,0.08) 62%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(7rem, 13vh, 10rem);
}
.hero-cat {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1.35rem;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--white);
  max-width: 15ch;
  margin-bottom: 1.4rem;
}
.hero-desc {
  display: block;
  max-width: 54ch;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--gray-100);
  margin-bottom: 2.2rem;
}

/* Line-mask reveal. Guarded by .js-anim so text is never invisible
   without JS or where transitions are unsupported. */
.hero-slide .mask { overflow: hidden; display: block; }
.hero-slide .rise { display: block; }
.hero.js-anim .hero-slide .rise {
  transform: translateY(110%);
  transition: transform 900ms var(--ease-out-expo);
}
.hero.js-anim .hero-slide.is-active .rise { transform: none; }
.hero.js-anim .hero-slide .rise[data-d="1"] { transition-delay: 110ms; }
.hero.js-anim .hero-slide .rise[data-d="2"] { transition-delay: 220ms; }
@media (prefers-reduced-motion: reduce) {
  .hero.js-anim .hero-slide .rise { transform: none; transition: none; }
  .hero-slide img { transition: none; transform: none; }
}

/* ---------- Slider UI (shared) ---------- */
.hero-ui {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  pointer-events: none;
  padding-bottom: 2.2rem;
}
.hero-ui-inner { display: flex; align-items: center; gap: 1.75rem; pointer-events: auto; }
.slider-count {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gray-300);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.slider-count b { color: var(--white); font-weight: 700; }
.slider-progress { flex: 1; height: 2px; background: rgba(255,255,255,0.18); position: relative; overflow: hidden; }
.slider-progress i {
  position: absolute; inset: 0;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
}
.slider-arrows { display: flex; gap: 0.5rem; }
.slider-arrow {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--white);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.slider-arrow svg { width: 18px; height: 18px; }
.slider-arrow:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); }

/* ---------- Stats ---------- */
.stats { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 2.6rem 2rem; border-left: 1px solid var(--color-border); }
.stat:first-child { border-left: 0; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-value em { font-style: normal; color: var(--yellow); }
.stat-label {
  margin-top: 0.7rem;
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-dim);
}

/* ---------- Split (copy + media) ---------- */
.split {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.split--reverse .split-copy { order: 2; }
.split--reverse .split-media { order: 1; }
.split--facts { align-items: start; }
.split-copy > h2 { margin-bottom: 1.25rem; }
.split-copy > p { margin-bottom: 1.05rem; }
.split-copy > .link-arrow { margin-top: 1.5rem; }
.split-copy > .check-list { margin-block: 1.5rem; }
.split-media { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split--intro .split-media { aspect-ratio: 3 / 2; }

.pullquote {
  margin: 2rem 0 0;
  padding: 0.25rem 0 0.25rem 1.4rem;
  border-left: 2px solid var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--off-white);
}

/* ---------- Product showcase (homepage) ---------- */
.showcase { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.showcase-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.showcase-rail {
  position: sticky;
  top: calc(var(--header-h-compact) + 1.5rem);
  min-width: 0;
}
.showcase-tab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 0.25rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-dim);
  transition: color var(--transition-base), padding-left var(--transition-base), border-color var(--transition-base);
}
.showcase-idx {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-600);
  transition: color var(--transition-base);
}
.showcase-name {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.showcase-arrow { opacity: 0; transform: translateX(-6px); color: var(--yellow); transition: all var(--transition-base); }
.showcase-arrow svg { width: 17px; height: 17px; }
.showcase-tab:hover { color: var(--off-white); }
.showcase-tab.is-active { color: var(--white); padding-left: 1rem; border-bottom-color: var(--yellow); }
.showcase-tab.is-active .showcase-idx { color: var(--yellow); }
.showcase-tab.is-active .showcase-arrow, .showcase-tab:hover .showcase-arrow { opacity: 1; transform: none; }

/* Three categories leave a tall gap beside a large image — this closes it
   with a summary and a route into the full catalogue. */
.showcase-rail-foot { margin-top: 2rem; }
.showcase-rail-foot p {
  font-size: var(--fs-body-sm);
  color: var(--color-dim);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  max-width: 38ch;
}

.showcase-stage { position: relative; min-width: 0; }
.showcase-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: var(--navy-800);
}
.showcase-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.showcase-media img.is-active { opacity: 1; transform: none; }

.showcase-info { margin-top: 1.9rem; max-width: 700px; }
.showcase-info[hidden] { display: none; }
.showcase-info h3 { font-size: var(--fs-h3); margin-bottom: 0.7rem; }
.showcase-info > p { font-size: var(--fs-body-sm); color: var(--color-muted); margin-bottom: 1.35rem; }
.showcase-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.15rem 1.5rem;
  margin-bottom: 1.6rem;
}
.showcase-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.showcase-links a svg { width: 14px; height: 14px; opacity: 0; transform: translateX(-4px); transition: all var(--transition-fast); color: var(--yellow); }
.showcase-links a:hover { color: var(--white); padding-left: 0.4rem; }
.showcase-links a:hover svg { opacity: 1; transform: none; }
.showcase-info.is-switching { opacity: 0; transform: translateY(10px); }
.showcase-info { transition: opacity var(--transition-base), transform var(--transition-base); }

/* ---------- Why grid ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.why-item {
  background: var(--color-bg);
  padding: 2.35rem 2rem 2.5rem;
  transition: background var(--transition-base);
}
.section--alt .why-item { background: var(--color-surface); }
.why-item:hover { background: var(--color-surface-2); }
.why-icon { width: 42px; height: 42px; color: var(--yellow); margin-bottom: 1.4rem; }
.why-icon svg { width: 100%; height: 100%; }
.why-item h3, .why-title { font-size: 1.16rem; margin-bottom: 0.6rem; }
.why-item p { font-size: var(--fs-body-sm); color: var(--color-muted); line-height: 1.62; }
.why-grid--full .why-item { padding: 2.75rem 2.25rem 3rem; }

/* ---------- Capability chips (homepage) ---------- */
.cap-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.cap-chip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  background: var(--navy-900);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.cap-chip:hover { border-color: var(--yellow); transform: translateY(-2px); }
.cap-chip-num {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--yellow);
}
.cap-chip-name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--gray-100); }

/* ---------- Capability list (capabilities page) ---------- */
.cap-list { border-top: 1px solid var(--color-border); }
.cap-item {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) 1.5fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
.cap-head { display: flex; align-items: baseline; gap: 1.1rem; }
.cap-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gray-600);
  transition: color var(--transition-base), -webkit-text-stroke-color var(--transition-base);
}
.cap-item:hover .cap-num { color: var(--yellow); -webkit-text-stroke-color: var(--yellow); }
.cap-head h3 { font-size: var(--fs-h3); }
.cap-body p { font-size: var(--fs-body); margin-bottom: 1.25rem; max-width: 60ch; }
.cap-body ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem 1.5rem; }
.cap-body li {
  position: relative;
  padding-left: 1.2rem;
  font-size: var(--fs-body-sm);
  color: var(--color-dim);
  line-height: 1.5;
}
.cap-body li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 0.5rem; height: 1px;
  background: var(--yellow);
}
.cap-two-col { max-width: 940px; }

/* ---------- Process track ---------- */
.process { background: var(--color-surface); border-block: 1px solid var(--color-border); overflow: hidden; }
.process-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.process-step {
  padding: 2rem 1.75rem 2.5rem;
  border-right: 1px solid var(--color-border);
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.process-step:last-child { border-right: 0; }
.process-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gray-600);
  margin-bottom: auto;
  transition: color var(--transition-base), -webkit-text-stroke-color var(--transition-base);
}
.process-step:hover .process-num { color: var(--yellow); -webkit-text-stroke-color: var(--yellow); }
.process-step h3 { font-size: 1.05rem; margin: 1.5rem 0 0.45rem; }
.process-step p { font-size: var(--fs-small); color: var(--color-dim); line-height: 1.55; }
.process-step::after {
  content: "";
  position: absolute;
  left: 1.75rem; bottom: 1.6rem;
  width: 2.2rem; height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.process-step:hover::after { transform: scaleX(1); }
.track-hint { display: none; margin-top: 0.9rem; font-size: var(--fs-meta); color: var(--color-faint); }

/* Stage list (manufacturing / quality) */
.stage-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.stage-list--two { grid-template-columns: repeat(3, 1fr); }
.stage-item {
  display: flex;
  gap: 1.25rem;
  padding: 2rem 1.85rem;
  background: var(--color-surface);
  transition: background var(--transition-base);
}
.section--alt .stage-item { background: var(--color-surface); }
.section:not(.section--alt) .stage-item { background: var(--color-bg); }
.stage-item:hover { background: var(--color-surface-2); }
.stage-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--yellow);
  flex: none;
}
.stage-item h3 { font-size: 1.08rem; margin-bottom: 0.4rem; }
.stage-item p { font-size: var(--fs-body-sm); color: var(--color-muted); line-height: 1.58; }

/* ---------- Solutions switcher ---------- */
.solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}
.solutions-list li { border-bottom: 1px solid var(--color-border); }
.solutions-list li:first-child { border-top: 1px solid var(--color-border); }
.solution-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem 0.25rem;
  color: var(--color-muted);
  transition: color var(--transition-base), padding-left var(--transition-base);
}
.solution-idx {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-600);
  transition: color var(--transition-base);
}
.solution-name {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 700;
}
.solution-arrow { opacity: 0; transform: translateX(-8px); color: var(--yellow); transition: all var(--transition-base); }
.solution-arrow svg { width: 19px; height: 19px; }
.solution-row:hover, .solution-row.is-active { color: var(--white); padding-left: 0.9rem; }
.solution-row:hover .solution-idx, .solution-row.is-active .solution-idx { color: var(--yellow); }
.solution-row:hover .solution-arrow, .solution-row.is-active .solution-arrow { opacity: 1; transform: none; }

.solutions-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 440px;
  background: var(--navy-800);
}
.solutions-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.solutions-media img.is-active { opacity: 1; transform: none; }
.solutions-media::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(4,7,13,0) 55%, rgba(4,7,13,0.8));
  pointer-events: none;
}
.solutions-caption {
  position: absolute;
  z-index: 3;
  left: 1.6rem; bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-100);
}

.industries-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.industries-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}
.industries-strip ul { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1; }
.industries-strip ul a {
  display: inline-block;
  font-size: var(--fs-meta);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.42rem 0.95rem;
  transition: all var(--transition-fast);
}
.industries-strip ul a:hover { color: var(--yellow); border-color: var(--yellow); }

/* ---------- Clients ---------- */
.clients { padding-block: var(--space-lg) 0; }
.clients-label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1.5rem;
}

/* ---------- Resources split (homepage) ---------- */
.res-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.res-links { display: grid; gap: 0.9rem; align-content: start; }
.res-card {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--navy-900);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.res-card:hover { border-color: var(--yellow); transform: translateY(-2px); }
.res-ico {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--yellow);
}
.res-ico svg { width: 19px; height: 19px; }
.res-card > span:nth-child(2) { flex: 1; }
.res-card strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.2rem; }
.res-card small { display: block; color: var(--color-dim); font-size: var(--fs-meta); line-height: 1.5; }
.res-arrow { color: var(--gray-500); flex: none; transition: transform var(--transition-base), color var(--transition-fast); }
.res-arrow svg { width: 17px; height: 17px; }
.res-card:hover .res-arrow { color: var(--yellow); transform: translateX(4px); }

.insight-feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.insight-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insight-feature::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(4,7,13,0.1) 30%, rgba(4,7,13,0.94));
}
.insight-feature-body { position: relative; z-index: 3; padding: 1.9rem; }
.insight-feature-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.28;
  margin-bottom: 1rem;
}

/* Featured article (insights index) */
.feature-post {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 45vw, 520px);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.feature-post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-post::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(4,7,13,0.15) 25%, rgba(4,7,13,0.95));
}
.feature-post-body { position: relative; z-index: 3; padding: clamp(1.5rem, 4vw, 3rem); max-width: 760px; }
.feature-post-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.5rem);
  line-height: 1.18;
  margin-bottom: 0.9rem;
}
.feature-post-excerpt { display: block; color: var(--gray-200); font-size: var(--fs-body-sm); max-width: 62ch; margin-bottom: 1.4rem; }

/* ---------- Inner page hero ----------
   Intentionally shorter than the homepage hero — the size shift is
   what signals "you are now inside the site". */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-950);
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(4,7,13,0.88) 0%, rgba(4,7,13,0.62) 45%, rgba(6,11,20,0.96) 100%),
    linear-gradient(95deg, rgba(4,7,13,0.85) 5%, rgba(4,7,13,0.25) 70%);
}
.page-hero-copy { max-width: 62ch; }
.page-hero h1 { margin-bottom: 1.15rem; }
.page-hero-lede {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem);
  line-height: 1.6;
  color: var(--gray-100);
  max-width: 58ch;
  margin-bottom: 2rem;
}
.page-hero-copy .hero-ctas { margin-top: 0.5rem; }
.page-hero--compact { padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero--bare {
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: 2.5rem;
  background: var(--navy-950);
  border-bottom: 1px solid var(--color-border);
}
.page-hero--bare::before { display: none; }

/* ---------- Closing CTA ---------- */
.cta-final {
  position: relative;
  padding: clamp(5rem, 11vw, 9rem) 0;
  overflow: hidden;
  isolation: isolate;
}
.cta-final > img {
  position: absolute;
  inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cta-final::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(4,7,13,0.94) 18%, rgba(4,7,13,0.5));
}
.cta-inner { max-width: 640px; }
.cta-final h2 { font-size: var(--fs-h1); margin-bottom: 1.25rem; }
.cta-final p { color: var(--gray-100); font-size: var(--fs-body); margin-bottom: 2.2rem; }

/* ---------- Category strengths strip ----------
   The reference's benefit-icon row, reinterpreted for the dark system:
   a hairline-divided technical band rather than a row of light cards. */
.strength-strip {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.strength-strip ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.strength-strip li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-left: 1px solid var(--color-border);
  padding-left: 1.5rem;
}
.strength-strip li:first-child { border-left: 0; padding-left: 0; }
.strength-num {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--yellow);
  flex: none;
}
.strength-text {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  color: var(--gray-100);
}

/* ---------- Showcase strengths (homepage) ---------- */
.showcase-strengths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.6rem;
}
.showcase-strengths li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--fs-small);
  color: var(--gray-200);
  line-height: 1.45;
}
.showcase-strengths li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid var(--yellow);
  transform: rotate(45deg);
}
.showcase-sub {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-faint);
  padding-bottom: 0.6rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Custom engineering / project scale ---------- */
.requirement { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.requirement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.requirement-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
}
.requirement-card:hover { border-color: var(--color-border-strong); }
.requirement-num {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--yellow);
  margin-bottom: 1rem;
}
.requirement-card h3 { font-size: var(--fs-h3); margin-bottom: 0.9rem; }
.requirement-card > p { font-size: var(--fs-body-sm); line-height: 1.65; }
.requirement-list {
  display: grid;
  gap: 0.55rem;
  margin: 1.5rem 0;
  padding: 1.35rem 0;
  border-block: 1px solid var(--color-border);
}
.requirement-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-body-sm);
  color: var(--gray-200);
}
.requirement-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6rem;
  height: 1px;
  background: var(--yellow);
}
.requirement-note {
  font-size: var(--fs-meta) !important;
  color: var(--color-faint) !important;
  margin-bottom: 1.6rem;
  max-width: 44ch;
}
.requirement-card .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Showcase product range ----------
   The reference shows each category's full range as a row of image cards.
   Reproduced here INSIDE the active category panel, so only one range is on
   screen at a time — 4, 6 or 9 cards, never the whole 19-product catalogue.

   A scroll-snap rail rather than a wrapping grid: the row keeps one constant
   height whatever the category count, and it is swipeable on touch. */
.showcase-range {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
  padding-bottom: 0.6rem;
  /* Fades the right edge so a partially visible card reads as "more here". */
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}
.showcase-range::-webkit-scrollbar { height: 4px; }
.showcase-range::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 2px; }
.showcase-range { min-width: 0; }
.showcase-range li {
  flex: none;
  width: clamp(150px, 44vw, 190px);
  scroll-snap-align: start;
}
.showcase-range a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.showcase-range a:hover { border-color: var(--yellow); transform: translateY(-3px); }
.range-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-800); }
.range-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.showcase-range a:hover .range-media img { transform: scale(1.06); }
.range-name {
  display: block;
  padding: 0.85rem 0.9rem 0.35rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  flex: 1;
}
.range-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.9rem 0.9rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}
.range-more svg { width: 13px; height: 13px; transition: transform var(--transition-base); }
.showcase-range a:hover .range-more svg { transform: translateX(3px); }
.range-hint { font-size: var(--fs-meta); color: var(--color-faint); margin-bottom: 1.4rem; }


/* ==== pages.css ==== */
/* ============================================================
   GLOBAL CAPP — Page-specific layouts
   Product & project detail · contact · quote · portal ·
   article · sitemap · legal · 404 · search page
   ============================================================ */

/* ---------- Product detail hero ---------- */
.product-hero {
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, var(--navy-950), var(--color-bg));
  border-bottom: 1px solid var(--color-border);
}
.product-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: 0.5rem;
}
.product-cat-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1.1rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.product-cat-link:hover { border-bottom-color: var(--yellow); }
.product-hero-copy h1 { margin-bottom: 1.1rem; }
.product-hero-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-800);
}
.product-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Detail body + aside ---------- */
.product-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.product-main { min-width: 0; }
.product-block { margin-top: clamp(2.75rem, 6vw, 4.5rem); scroll-margin-top: calc(var(--header-h) + 2rem); }
.product-block > h2 { margin-bottom: 1.35rem; }
.product-main > .prose { scroll-margin-top: calc(var(--header-h) + 2rem); }

.product-aside { display: grid; gap: 1rem; }
.aside-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.65rem;
}
.aside-card--sticky { position: sticky; top: calc(var(--header-h-compact) + 1.25rem); }
.aside-title {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1rem;
}
.aside-card > p { font-size: var(--fs-body-sm); margin-bottom: 1.25rem; line-height: 1.6; }
.aside-card .btn + .btn { margin-top: 0.6rem; }
.aside-card .fact-list { border-top: 0; }
.aside-card .fact-row:first-child { border-top: 1px solid var(--color-border); }

.aside-nav { display: grid; }
.aside-nav a {
  padding: 0.6rem 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.aside-nav a:last-child { border-bottom: 0; }
.aside-nav a:hover, .aside-nav a.is-current { color: var(--yellow); padding-left: 0.4rem; }

.aside-dl { display: grid; gap: 0.15rem; }
.aside-dl a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}
.aside-dl a:last-child { border-bottom: 0; }
.aside-dl svg { width: 17px; height: 17px; color: var(--yellow); flex: none; }
.aside-dl span { flex: 1; }
.aside-dl small { font-size: var(--fs-micro); color: var(--color-faint); }
.aside-dl a:hover { color: var(--white); }

.aside-cat { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.aside-cat img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--transition-slow); }
.aside-cat:hover img { transform: scale(1.05); }
.aside-cat span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.8rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--white);
}
.aside-cat svg { width: 15px; height: 15px; color: var(--yellow); transition: transform var(--transition-base); }
.aside-cat:hover svg { transform: translateX(4px); }

.tech-note {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--navy-900);
}
.section--alt .tech-note { background: var(--navy-900); }
.tech-note-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.tech-note-grid h3 { font-size: 1.05rem; margin-bottom: 1rem; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.contact-info > h2 { margin-bottom: 1rem; }
.contact-info > .lede { margin-bottom: 2.25rem; }
.contact-list { display: grid; gap: 1.35rem; border-top: 1px solid var(--color-border); padding-top: 1.75rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-ico {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--yellow);
}
.contact-ico svg { width: 18px; height: 18px; }
/* The WhatsApp row is tinted rather than filled — inside a list of contact
   methods a solid green block would shout over the others. */
.contact-list .contact-ico--whatsapp {
  color: var(--whatsapp);
  border-color: rgba(37, 211, 102, 0.4);
  background: rgba(37, 211, 102, 0.07);
}
.contact-list small {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-faint);
  margin-bottom: 0.25rem;
}
.contact-list a, .contact-list address, .contact-list span > span {
  font-size: var(--fs-body-sm);
  color: var(--gray-100);
  font-style: normal;
  line-height: 1.55;
}
.contact-list a { transition: color var(--transition-fast); }
.contact-list a:hover { color: var(--yellow); }
/* Two numbers sit inline, separated by a divider rather than stacking —
   they read as one contact line, which is how the client writes them. */
.contact-list .contact-sep { color: var(--gray-600); margin-inline: 0.5rem; }
.contact-quick { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.map-frame {
  /* width first: a min-height here would let the aspect-ratio derive a
     width wider than the viewport and scroll the whole page sideways. */
  width: 100%;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-800);
}
/* Dark-mode map: invert flips the light basemap to dark, and the hue
   rotation puts the colours back the right way round afterwards — without
   it, water comes out orange. Plain grayscale+invert (the previous rule)
   flattened the map into an unreadable grey slab. */
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(91%) hue-rotate(180deg) saturate(0.72) brightness(0.96) contrast(0.92);
}
.map-placeholder {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}
.map-ico { color: var(--yellow); }
.map-ico svg { width: 30px; height: 30px; }
.map-placeholder strong { font-family: var(--font-display); font-size: 1.05rem; }
.map-placeholder small { color: var(--color-dim); font-size: var(--fs-meta); max-width: 46ch; }

/* ---------- Request a quote ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) 340px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.quote-aside { display: grid; gap: 1rem; }
.form-card--wide .form-grid { grid-template-columns: repeat(2, 1fr); }
.step-list { display: grid; gap: 1rem; counter-reset: step; }
.step-list li {
  display: flex;
  gap: 0.9rem;
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
  line-height: 1.55;
}
.step-list span {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--yellow);
  flex: none;
  padding-top: 0.2em;
}

/* ---------- Portal ---------- */
.portal-notice {
  display: flex;
  gap: 1.35rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 2.5rem;
  border: 1px dashed var(--yellow);
  border-radius: var(--radius-md);
  background: rgba(245, 181, 10, 0.045);
}
.portal-notice-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border: 1px solid var(--yellow);
  border-radius: var(--radius-sm);
  color: var(--yellow);
}
.portal-notice-ico svg { width: 21px; height: 21px; }
.portal-notice strong { display: block; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.5rem; }
.portal-notice p { font-size: var(--fs-body-sm); line-height: 1.62; }
.portal-notice p + p { margin-top: 0.7rem; }
.portal-notice-dev { color: var(--color-faint); font-size: var(--fs-meta) !important; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* ---------- Article ---------- */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
}
.article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-meta);
  color: var(--color-dim);
}
.article-meta svg { width: 15px; height: 15px; color: var(--yellow); }
.prose--article { max-width: 72ch; }
.prose--article h2 { font-size: clamp(1.55rem, 1.3rem + 1.1vw, 2.1rem); }

/* ---------- Sitemap ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
.sitemap-col h2 {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.sitemap-col ul { display: grid; gap: 0.1rem; }
.sitemap-col a {
  display: block;
  padding: 0.42rem 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.sitemap-col a:hover { color: var(--white); padding-left: 0.4rem; }

/* ---------- Legal ---------- */
.prose--legal { max-width: 74ch; }
.prose--legal h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
  margin-top: 2.5em;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.prose--legal h2:first-of-type { margin-top: 1em; }
.legal-updated {
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-faint);
}

/* ---------- Search page ---------- */
.search-page-form {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  background: var(--navy-800);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
}
.search-page-form input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  padding: 0.85rem 0;
  font-size: var(--fs-body);
  color: var(--white);
  min-width: 0;
}
.search-page-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-results--page { padding: 0; max-height: none; }
.search-results--page .search-result {
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 1.15rem 0.75rem;
}

/* ---------- 404 ---------- */
.error-page {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
}
.error-page > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.error-page::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(4,7,13,0.96) 20%, rgba(4,7,13,0.6));
}
.error-inner { max-width: 640px; padding-block: 4rem; }
.error-code {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 800;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px var(--gray-600);
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
}
.error-inner h1 { margin-bottom: 1.15rem; }
.error-inner p { font-size: var(--fs-body); color: var(--gray-100); margin-bottom: 2rem; max-width: 48ch; }
.error-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-dim);
}
.error-links a { color: var(--yellow); border-bottom: 1px solid transparent; transition: border-color var(--transition-fast); }
.error-links a:hover { border-bottom-color: var(--yellow); }
.page-error .float-actions, .page-error .mobile-bar { display: none; }

/* ---------- Vision & mission ---------- */
.vm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.vm-card {
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.vm-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--yellow);
  margin-bottom: 1.5rem;
}
.vm-ico svg { width: 24px; height: 24px; }
.vm-card h2 { font-size: var(--fs-h3); margin-bottom: 0.9rem; }
.vm-card p { font-size: var(--fs-body); line-height: var(--lh-body); }

/* ---------- Category brochure CTA ---------- */
.brochure-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-left: 2px solid var(--yellow);
  border-radius: var(--radius-md);
}
.brochure-copy { display: flex; align-items: center; gap: 1.15rem; }
.brochure-ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--yellow);
}
.brochure-ico svg { width: 21px; height: 21px; }
.brochure-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}
.brochure-copy p { font-size: var(--fs-small); color: var(--color-dim); margin: 0; }

/* Lede inside a product detail block */
.block-lede {
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
  max-width: 60ch;
  margin-bottom: 1.35rem;
}
.pills--lg li { font-size: var(--fs-small); padding: 0.55rem 1.15rem; }


/* ==== responsive.css ==== */
/* ============================================================
   GLOBAL CAPP — Responsive
   Breakpoints: 1280 / 1080 / 900 / 720 / 560
   ------------------------------------------------------------
   Rule that governs everything below: no page may ever scroll
   horizontally. Wide content (tables, process tracks, thumbnails)
   scrolls inside its own container instead.
   ============================================================ */

@media (max-width: 1280px) {
  .nav-link { padding-inline: 0.45rem; font-size: 0.76rem; }
  .nav-link::after { left: 0.45rem; right: 0.45rem; }
  .nav-caret { width: 18px; margin-left: -0.35rem; }
  .header-cta { padding: 0.8rem 1rem; font-size: 0.74rem; }
  .header-inner { gap: 0.85rem; }
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
  .showcase-grid { grid-template-columns: 300px 1fr; }
  .mega-inner { grid-template-columns: 1fr 280px; gap: 2rem; }
  .card-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Below this the desktop nav is replaced by the drawer ---- */
@media (max-width: 1080px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: grid; }
  /* .main-nav carried the margin-left:auto that pushed everything after it
     to the right edge. With the nav hidden nothing did, so the search and
     menu buttons packed up against the wordmark in mid-header. The actions
     group takes the job over here rather than on .header-actions globally,
     which would split the free space with the nav on desktop. */
  .header-actions { margin-left: auto; }

  .product-body, .quote-grid { grid-template-columns: 1fr; }
  .aside-card--sticky { position: static; }
  .product-aside { grid-template-columns: repeat(2, 1fr); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: 0; border-top: 1px solid var(--color-border); }
  .stat:nth-child(-n + 2) { border-top: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--color-border); }

  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-rail {
    position: static;
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.75rem;
    padding-bottom: 0.5rem;
  }
  .showcase-rail::-webkit-scrollbar { display: none; }
  .showcase-tab {
    border-bottom: 0;
    padding: 0.7rem 1.1rem;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    flex: none;
  }
  .showcase-tab.is-active { padding-left: 1.1rem; border-color: var(--yellow); background: var(--yellow-dim); }
  .showcase-arrow { display: none; }
  .showcase-rail-foot { display: none; }

  .why-grid, .feature-grid[data-cols="3"], .stage-list, .stage-list--two,
  .cap-strip, .link-grid, .link-grid--lg, .sitemap-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
  .dl-row { grid-template-columns: 1fr; }
  .solutions-grid { grid-template-columns: 1fr; }
  .solutions-media { min-height: 320px; }
  .contact-grid { grid-template-columns: 1fr; }
  .res-split { grid-template-columns: 1fr; }
  .cap-item { grid-template-columns: 1fr; gap: 1.25rem; padding: 2rem 0; }
  .product-hero-inner { grid-template-columns: 1fr; }
  .product-hero-media { order: -1; aspect-ratio: 16 / 10; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  :root { --header-h: 74px; }

  .split, .two-col, .split--reverse { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--reverse .split-copy, .split--reverse .split-media { order: 0; }
  .split-media { order: -1; aspect-ratio: 16 / 10; }
  .split--facts .split-media { order: 0; }

  .card--insight-featured { flex-direction: column; }
  .card--insight-featured .card-media { aspect-ratio: 16 / 9; }
  .card--insight-featured .card-body { padding: 1.5rem; }

  .vm-grid { grid-template-columns: 1fr; }
  .tech-note-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .cap-body ul { grid-template-columns: 1fr; }
  .check-list--two { grid-template-columns: 1fr; }
  .showcase-links { grid-template-columns: 1fr; }

  /* Reveal the horizontal-scroll affordance on the process track */
  .track-hint { display: block; }
  .process-track { grid-auto-columns: minmax(220px, 62%); }

  /* Bottom action bar replaces the floating column */
  .float-actions { display: none; }
  .mobile-bar { display: grid; }
  .to-top { bottom: 4.75rem; right: 1rem; }
  .site-footer { padding-bottom: 3.75rem; }

  /* ---- Homepage hero ----
     Desktop anchors the copy to the bottom edge of a full-height frame,
     which works because the frame and the copy are close in size there.

     On a phone they are not, and because the slides are absolutely
     positioned the frame is always exactly 100svh — so every extra pixel
     of viewport height became empty band between the header and the copy:
     24px on a 740px-tall screen, 229px at 932px, 356px at 1024px.

     Mobile therefore anchors the copy to the TOP instead. The offset below
     the header is then the same small figure on every device, and the
     leftover height falls where it belongs — on the photograph, above the
     slider controls. Nothing else about the composition changes.

     Desktop keeps the slides absolutely stacked. Mobile stacks them in a
     single grid cell instead, which sizes the hero to its own tallest slide:
     the frame can no longer be shorter than the copy (a 320x568 screen was
     cutting the CTAs off entirely) and no longer stretches past it either.
     The floor stops at 52rem so a tall phone shows a little of the section
     below rather than a screenful of empty photograph. */
  .hero { align-items: stretch; min-height: min(100svh, 52rem); }
  .hero-slides { position: relative; display: grid; flex: 1; min-width: 0; }
  .hero-slide { position: relative; inset: auto; grid-area: 1 / 1; align-items: flex-start; }
  .hero-content {
    padding-top: calc(var(--header-h) + clamp(1.25rem, 3.5vh, 2.25rem));
    padding-bottom: clamp(8.5rem, 20vh, 10.5rem);
  }

  /* Clear the fixed mobile action bar so the slider controls stay tappable */
  .hero-ui { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .hero-ui-inner { gap: 1rem; }
  .slider-arrow { width: 44px; height: 44px; }

  .section-head--row { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .section-head-link { margin-bottom: 0; }
  .share-bar { flex-direction: column; align-items: flex-start; }
}

/* Once the viewport is taller than the hero's 52rem ceiling, the hero stops
   at its own bottom edge and the fixed action bar sits over the section
   below it — so the bar-clearing reserve above would only leave a dead strip
   under the slider controls. Give them back the desktop offset and let them
   sit on the frame's edge where they belong. */
@media (max-width: 900px) and (min-height: 53rem) {
  .hero-ui { padding-bottom: 2.2rem; }
}

@media (max-width: 720px) {
  /* Buttons are nowrap by design so labels never break mid-phrase on desktop.
     On a phone they are full-width and centred, so wrapping is correct — and
     it stops a long CTA label ("Discuss Your Requirement") setting a
     min-content width that pushes the whole page sideways. */
  .btn { white-space: normal; text-align: center; }

  .card-grid[data-cols="2"],
  .card-grid[data-cols="3"],
  .card-grid[data-cols="4"] { grid-template-columns: 1fr; }
  .why-grid, .feature-grid[data-cols="2"], .feature-grid[data-cols="3"],
  .stage-list, .stage-list--two, .cap-strip, .link-grid, .link-grid--lg,
  .sitemap-grid, .product-aside { grid-template-columns: 1fr; }
  .form-grid, .form-card--wide .form-grid { grid-template-columns: 1fr; }
  .field--half { grid-column: 1 / -1; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Specification tables restack into label/value rows so the page
     itself never scrolls sideways. */
  .spec-wrap { overflow-x: visible; border: 0; }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: 100%; }
  .spec-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 0.6rem;
    padding: 0.9rem 1.1rem;
    background: var(--navy-850);
  }
  .spec-table tr:nth-child(odd) { background: var(--navy-850); }
  .spec-table th {
    width: 100%;
    border-right: 0;
    padding: 0 0 0.3rem;
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dim);
  }
  .spec-table td { padding: 0; font-size: var(--fs-body-sm); }

  .search-panel { margin-top: 0; height: 100svh; max-height: none; width: 100vw; border-radius: 0; border: 0; }
  .search-overlay.is-open .search-panel { transform: none; }

  .hero-title { max-width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .page-hero-copy .hero-ctas .btn { width: 100%; }
  .cta-final .hero-ctas .btn { width: 100%; }

  .gallery-thumb { width: 84px; }
  /* Always visible on touch (there is no hover to reveal them), and moved
     off the right edge so they never sit under the fixed back-to-top and
     quick-contact buttons. */
  .gallery-nav, .gallery-zoom { opacity: 1; width: 40px; height: 40px; }
  .gallery-prev, .gallery-next { top: auto; bottom: 0.75rem; transform: none; }
  .gallery-prev { left: 0.75rem; }
  .gallery-next { right: auto; left: 4rem; }
  .gallery-zoom { bottom: auto; top: 0.75rem; right: 0.75rem; }

  .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .contact-quick .btn, .portal-actions .btn { width: 100%; }
  .map-frame { aspect-ratio: 4 / 3; }
  .article-meta { gap: 0.75rem 1.25rem; }
  .filter-bar { gap: 0.85rem; }
  .filter-search { width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-left: 0 !important; border-top: 1px solid var(--color-border); padding: 2rem 1.25rem; }
  .stat:first-child { border-top: 0; }

  .process-track { grid-auto-columns: 82%; }
  .card--download { flex-wrap: wrap; }
  .dl-action { display: none; }
  .share-actions { flex-wrap: wrap; }
  .breadcrumbs a, .breadcrumbs span { font-size: var(--fs-micro); }
  .drawer-panel { width: 100vw; }
  .mega-feature { display: none; }
}

/* ---- Large displays: widen the reading measure, not the type ---- */
@media (min-width: 1800px) {
  :root { --container-max: 1440px; --container-wide: 1680px; }
}

/* ---- Print ---- */
@media print {
  .site-header, .drawer, .search-overlay, .float-actions, .mobile-bar,
  .to-top, .loader, .cta-final, .hero-ui, .share-actions { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero::before, .page-hero-media { display: none; }
  h1, h2, h3, p, .card-title { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 1.5rem; }
}

/* ---------- Client-reference content blocks ---------- */
@media (max-width: 1080px) {
  .strength-strip ul { grid-template-columns: repeat(3, 1fr); }
  .strength-strip li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .requirement-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Stacked rows read better than a squeezed grid on a phone. */
  .strength-strip ul { grid-template-columns: 1fr; }
  .strength-strip li {
    border-left: 0;
    padding: 0.85rem 0;
    border-top: 1px solid var(--color-border);
  }
  .strength-strip li:first-child { border-top: 0; }
  .showcase-strengths { grid-template-columns: 1fr; }

  /* The label / pills / link row collapses into a ragged two-column mess on a
     phone. Stack it instead so the pills get the full width. */
  .industries-strip { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .industries-strip ul { width: 100%; flex: none; }
  .brochure-cta { flex-direction: column; align-items: flex-start; }
  .brochure-cta .btn { width: 100%; }
  .requirement-card .btn { width: 100%; }
}

/* ---------- Sticky visitor counter ---------- */
@media (max-width: 900px) {
  /* Clear the fixed mobile action bar. */
  .visitor-float { left: 1rem; bottom: 4.75rem; padding: 0.45rem 0.75rem; }
}

@media (max-width: 380px) {
  /* On the narrowest phones the word is the first thing to go — the dot and
     the number still read as a visitor count. */
  .visitor-float .visitor-label { display: none; }
}