/* ==========================================================================
   VANGUARD CONSTRUCT — COMPONENT LAYER
   No raw colour, type or spacing values below this line. Tokens only.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--layout-header-height);
}

body {
  margin: 0;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  font-family: var(--font-family-stack);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

::selection {
  background-color: var(--color-text-accent);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------- Focus & a11y */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.section--dark :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.careers :where(a, button):focus-visible,
.site-header :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible,
.trust :where(a, button):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-text-secondary);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) * 2) var(--focus-ring-color);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-1);
  left: var(--space-1);
  z-index: var(--z-toast);
  transform: translateY(calc(-1 * (var(--space-5) + var(--space-4))));
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-text-accent);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  transition: transform var(--motion-duration-instant) var(--motion-ease-out);
}
.skip-link:focus { transform: translateY(0); }

.live-region {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin-bottom: var(--space-4);
}

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

.section { padding-block: var(--layout-section-y-lg); }
.section--sand { background-color: var(--color-surface-strong); color: var(--color-text-primary); }
.section--subtle { background-color: var(--color-surface-subtle); color: var(--color-text-primary); }
.section--dark { background-color: var(--color-surface-base); color: var(--color-text-secondary); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--layout-block);
  align-items: end;
  margin-bottom: var(--layout-block);
}
.section-head__aside { max-width: 46ch; }

@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
}

/* ------------------------------------------------------------ Typography */
.eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}
.eyebrow--on-dark { color: var(--color-text-accent); }

.display {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--color-text-primary);
}
.display--2xl { font-size: var(--font-size-2xl); }
.display--3xl { font-size: var(--font-size-3xl); }
.display--4xl { font-size: var(--font-size-4xl); }
.display--on-dark { color: var(--color-text-secondary); }

.prose {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text-muted-on-light);
  max-width: 62ch;
}
.prose + .prose { margin-top: var(--space-3); }
.prose--lead { font-size: var(--font-size-lg); line-height: var(--line-height-snug); color: var(--color-text-primary); }
.prose--on-dark { color: var(--color-text-muted-on-dark); }
.prose--on-dark.prose--lead { color: var(--color-text-secondary); }

.link-inline {
  color: var(--color-text-tertiary);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  transition: color var(--motion-duration-instant) var(--motion-ease-standard);
}
.link-inline:hover { color: var(--color-text-primary); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding-block: var(--space-1);
  transition: gap var(--motion-duration-instant) var(--motion-ease-out),
              color var(--motion-duration-instant) var(--motion-ease-standard);
}
.link-arrow svg { width: var(--space-3); height: var(--space-3); flex: none; }
.link-arrow:hover { gap: var(--space-2); }
.section--dark .link-arrow,
.capability .link-arrow { color: var(--color-text-accent); }

.caption {
  margin-top: var(--space-2);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted-on-light);
}
.caption__tag { color: var(--color-text-tertiary); margin-right: var(--space-1); }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-text-accent);
  border-radius: var(--radius-none);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-accent);
  background-color: var(--color-accent-wash);
}
.status-chip__dot {
  width: var(--space-1);
  height: var(--space-1);
  background-color: var(--color-text-accent);
  animation: pulse 1.6s var(--motion-ease-standard) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* -------------------------------------------------------------- Buttons */
.btn {
  --btn-bg: var(--color-text-primary);
  --btn-fg: var(--color-text-secondary);
  --btn-border: var(--color-text-primary);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  min-height: calc(var(--space-5) * 0.6); /* 48px — AA target size */
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-none);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    opacity var(--motion-duration-instant) var(--motion-ease-standard),
    transform var(--motion-duration-instant) var(--motion-ease-out),
    background-color var(--motion-duration-instant) var(--motion-ease-standard),
    color var(--motion-duration-instant) var(--motion-ease-standard),
    border-color var(--motion-duration-instant) var(--motion-ease-standard);
}
.btn__icon { width: var(--space-3); height: var(--space-3); flex: none; }
.btn__label-short { display: none; }

/* Variants */
.btn--primary  { --btn-bg: var(--color-text-primary);   --btn-fg: var(--color-text-secondary); --btn-border: var(--color-text-primary); }
.btn--accent   { --btn-bg: var(--color-text-accent);    --btn-fg: var(--color-text-primary);   --btn-border: var(--color-text-accent); }
.btn--tertiary { --btn-bg: var(--color-text-tertiary);  --btn-fg: var(--color-text-secondary); --btn-border: var(--color-text-tertiary); }
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-primary);
  --btn-border: var(--color-border-on-light);
}
.btn--ghost-dark {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-secondary);
  --btn-border: var(--color-border-on-dark);
}
.btn--compact { padding-inline: var(--space-3); min-height: calc(var(--space-5) * 0.55); }
.btn--wide { min-width: calc(var(--space-5) * 3); }

/* State: hover */
@media (hover: hover) {
  .btn:hover:not(:disabled):not([data-state="loading"]) {
    opacity: 0.9;
    transform: translateY(-1px);
  }
  .btn--secondary:hover:not(:disabled) { --btn-border: var(--color-text-tertiary); --btn-fg: var(--color-text-tertiary); opacity: 1; }
  .btn--ghost-dark:hover:not(:disabled) { --btn-border: var(--color-text-accent); --btn-fg: var(--color-text-accent); opacity: 1; }
}

/* State: active */
.btn:active:not(:disabled):not([data-state="loading"]) { transform: scale(0.98); opacity: 1; }
.btn--primary:active:not(:disabled) { --btn-bg: var(--color-text-tertiary); --btn-border: var(--color-text-tertiary); }
.btn--accent:active:not(:disabled) { --btn-bg: var(--color-text-secondary); --btn-border: var(--color-text-secondary); }

/* State: disabled */
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; transform: none; }

/* State: loading */
.btn__spinner { display: none; }
.btn[data-state="loading"] { cursor: progress; }
.btn[data-state="loading"] .btn__label,
.btn[data-state="loading"] .btn__icon { opacity: 0.25; }
.btn[data-state="loading"] .btn__spinner {
  display: block;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--space-3);
  height: var(--space-3);
  margin: calc(var(--space-1) * -1) 0 0 calc(var(--space-1) * -1);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* State: error */
.btn[data-state="error"] {
  --btn-border: var(--color-status-error);
  animation: shake var(--motion-duration-instant) var(--motion-ease-standard);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(var(--space-1) * -0.5)); }
  75% { transform: translateX(calc(var(--space-1) * 0.5)); }
}

/* ------------------------------------------------------ Header & navbar */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background-color: transparent;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
              border-color var(--motion-duration-fast) var(--motion-ease-standard);
  border-bottom: 1px solid transparent;
}
.site-header[data-elevated="true"] {
  background-color: var(--color-surface-glass);
  backdrop-filter: blur(var(--space-2));
  -webkit-backdrop-filter: blur(var(--space-2));
  border-bottom-color: var(--color-border-on-dark);
}

.site-header__inner {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
  min-height: var(--layout-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  letter-spacing: var(--letter-spacing-display);
  flex: none;
}
.brand__mark { width: var(--space-4); height: var(--space-4); color: var(--color-text-accent); }
.brand__mark svg { width: 100%; height: 100%; }
.brand__dot { color: var(--color-text-accent); }

.site-nav__eyebrow,
.site-nav__meta { display: none; }

.site-nav__list { display: flex; align-items: center; gap: var(--space-4); }

.site-nav__link {
  position: relative;
  display: block;
  padding-block: var(--space-2);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color var(--motion-duration-instant) var(--motion-ease-standard);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 2px;
  background-color: var(--color-text-tertiary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-duration-instant) var(--motion-ease-out);
}
.site-nav__link:hover { color: var(--color-text-accent); }
.site-nav__link[aria-current="true"] { color: var(--color-text-accent); }
.site-nav__link[aria-current="true"]::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }

.nav-toggle {
  display: none;
  width: calc(var(--space-5) * 0.55);
  height: calc(var(--space-5) * 0.55);
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--color-border-on-dark);
  border-radius: var(--radius-none);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: var(--space-3); }
.nav-toggle__bars i { display: block; height: 2px; background-color: currentColor; transition: transform var(--motion-duration-instant) var(--motion-ease-out), opacity var(--motion-duration-instant); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The header is a fixed, z-indexed stacking context and the drawer lives inside
   it, so the scrim must sit BELOW the header — not below --z-drawer, which is
   scoped to the header's own context and would leave the scrim on top. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background-color: var(--color-scrim-hero);
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}
.nav-scrim[data-open="true"] { opacity: 1; }

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }

  /* Keep the brand and the close toggle above the open drawer panel. */
  .brand,
  .site-header__actions { position: relative; z-index: calc(var(--z-drawer) + 1); }

  .site-nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--z-drawer);
    width: min(100%, calc(var(--space-5) * 5));
    padding: calc(var(--layout-header-height) + var(--space-4)) var(--space-4) var(--space-4);
    background-color: var(--color-surface-base);
    border-inline-start: 1px solid var(--color-border-on-dark);
    box-shadow: var(--shadow-drawer);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transform: translateX(100%);
    transition: transform var(--motion-duration-fast) var(--motion-ease-out);
    overflow-y: auto;
  }
  .site-nav[data-open="true"] { transform: translateX(0); }

  .site-nav__eyebrow {
    display: block;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-accent);
  }
  .site-nav__meta {
    display: block;
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-on-dark);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
    color: var(--color-text-muted-on-dark);
  }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border-on-dark);
    font-size: var(--font-size-lg);
    font-family: var(--font-family-primary);
    letter-spacing: var(--letter-spacing-display);
  }
  .site-nav__link::after { inset-inline: auto; width: var(--space-4); }
}

@media (max-width: 480px) {
  .btn__label-full { display: none; }
  .btn__label-short { display: inline; }
}

/* ----------------------------------------------------------------- Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--layout-header-height) + var(--space-5)) var(--layout-section-y);
  background-color: var(--color-surface-base);
  color: var(--color-text-secondary);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--color-surface-base) 4%, var(--color-scrim-hero) 55%, var(--color-scrim-media) 100%);
}
.hero__inner {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}
.hero__title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.hero__title-line { display: block; }
.hero__title-line:last-child { color: var(--color-text-accent); }
.hero__lede {
  max-width: 56ch;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted-on-dark);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.hero__scroll {
  position: absolute;
  bottom: var(--space-4);
  right: var(--layout-gutter);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-accent);
}
.hero__scroll svg {
  width: var(--space-2);
  height: var(--space-4);
  animation: nudge 2s var(--motion-ease-standard) infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--space-1)); }
}

@media (max-width: 768px) { .hero__scroll { display: none; } }

/* ---------------------------------------------------------------- Trust */
.trust {
  background-color: var(--color-surface-base);
  color: var(--color-text-secondary);
  border-block: 1px solid var(--color-border-on-dark);
  padding-block: var(--space-4);
}
.trust__eyebrow {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
  margin-bottom: var(--space-3);
}
.trust__list {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted-on-dark);
}
.trust__item svg { width: var(--space-3); height: var(--space-3); color: var(--color-text-accent); }

/* ---------------------------------------------------------------- About */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--layout-block);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-4); } }

.fact-list {
  margin-block: var(--space-4);
  border-top: 1px solid var(--color-border-on-light);
}
.fact-list__row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border-on-light);
}
.fact-list dt {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.fact-list dd { font-size: var(--font-size-sm); color: var(--color-text-primary); }
.fact-list--compact { margin-bottom: 0; }
@media (max-width: 560px) { .fact-list__row { grid-template-columns: 1fr; gap: var(--space-1); } }

.about__figure { margin-top: var(--layout-block); }
.about__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(0.15);
}

/* --------------------------------------------------------- Capabilities */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1024px) { .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .capability-grid { grid-template-columns: 1fr; } }

.capability {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-on-dark);
  transition: border-color var(--motion-duration-instant) var(--motion-ease-standard);
}
.capability:hover { border-top-color: var(--color-text-accent); }
.capability__index {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-accent);
}
.capability__media { overflow: hidden; aspect-ratio: 4 / 3; }
.capability__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}
.capability:hover .capability__media img { transform: scale(1.03); }
.capability__title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.capability__copy {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted-on-dark);
  flex: 1;
}

/* ---------------------------------------------------------------- Stats */
.stats {
  background-color: var(--color-text-primary);
  color: var(--color-text-secondary);
  padding-block: var(--layout-section-y);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 768px) { .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__value {
  display: flex;
  align-items: baseline;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.stat__prefix, .stat__suffix { color: var(--color-text-accent); }
.stat__label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted-on-dark);
}

/* ---------------------------------------------------- Comparison slider */
.compare { display: flex; flex-direction: column; gap: var(--space-2); }
.compare__frame {
  --compare-pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border-on-light);
  background-color: var(--color-surface-base);
  touch-action: pan-y;
  user-select: none;
}
.compare__img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--compare-pos)) 0 0);
}
.compare__divider {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--compare-pos);
  width: 2px;
  margin-inline-start: -1px;
  background-color: var(--color-text-secondary);
}
.compare__handle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--compare-pos);
  transform: translate(-50%, -50%);
  width: calc(var(--space-5) * 0.6);
  height: calc(var(--space-5) * 0.6);
  display: grid;
  place-items: center;
  background-color: var(--color-text-secondary);
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  border-radius: var(--radius-none);
  cursor: ew-resize;
  transition: background-color var(--motion-duration-instant) var(--motion-ease-standard),
              color var(--motion-duration-instant) var(--motion-ease-standard);
}
.compare__handle svg { width: var(--space-4); height: var(--space-4); }
.compare__handle:hover { background-color: var(--color-text-accent); }
.compare__handle:active { background-color: var(--color-text-tertiary); color: var(--color-text-secondary); }
.compare__tag {
  position: absolute;
  inset-block-start: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-scrim-hero);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
}
.compare__tag--left { inset-inline-start: var(--space-3); }
.compare__tag--right { inset-inline-end: var(--space-3); }
.compare__readout {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ------------------------------------------------------------- Projects */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: calc(var(--space-5) * 0.55);
  padding: var(--space-1) var(--space-3);
  background-color: transparent;
  border: 1px solid var(--color-border-on-dark);
  border-radius: var(--radius-none);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--motion-duration-instant) var(--motion-ease-standard),
              color var(--motion-duration-instant) var(--motion-ease-standard),
              border-color var(--motion-duration-instant) var(--motion-ease-standard);
}
.chip:hover { border-color: var(--color-text-accent); color: var(--color-text-accent); }
.chip__count { color: var(--color-text-accent); }
.chip.is-active {
  background-color: var(--color-text-accent);
  border-color: var(--color-text-accent);
  color: var(--color-text-primary);
}
.chip.is-active .chip__count { color: var(--color-text-primary); }

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1024px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .project-grid { grid-template-columns: 1fr; } }

.project-card[hidden] { display: none; }
.project-card > article {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-card);
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  transition: border-color var(--motion-duration-instant) var(--motion-ease-standard),
              transform var(--motion-duration-fast) var(--motion-ease-out);
}
.project-card > article:hover {
  border-color: var(--color-text-tertiary);
  transform: translateY(-2px);
}
.project-card:focus-within > article { border-color: var(--color-text-tertiary); }

.project-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.project-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}
.project-card > article:hover .project-card__media img { transform: scale(1.03); }

.badge {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}
.badge--sector { background-color: var(--color-text-tertiary); color: var(--color-text-secondary); }

.project-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  flex: 1;
}
.project-card__meta {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted-on-light);
}
.project-card__title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stretched::after { content: ""; position: absolute; inset: 0; }
.project-card__title a:hover { color: var(--color-text-tertiary); }
.project-card__copy { font-size: var(--font-size-sm); color: var(--color-text-muted-on-light); flex: 1; }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tag-list li {
  padding: 2px var(--space-1);
  border: 1px solid var(--color-border-on-light);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted-on-light);
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-hairline);
}
.metric-row dt {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted-on-light);
}
.metric-row dd {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

/* ---------------------------------------------------------- Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--layout-section-y);
  text-align: center;
  color: var(--color-text-secondary);
}
.empty-state[hidden] { display: none; }
.empty-state svg { width: var(--space-5); height: var(--space-5); color: var(--color-text-accent); }
.empty-state__message {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  max-width: 32ch;
}
.empty-state--light { color: var(--color-text-primary); }
.empty-state--light svg { color: var(--color-text-tertiary); }

/* ----------------------------------------------------------- Data table */
.table-tools {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (max-width: 768px) { .table-tools { grid-template-columns: 1fr; } }

.table-wrap {
  overflow-x: auto;
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-on-light);
}
.data-table { width: 100%; border-collapse: collapse; min-width: calc(var(--space-5) * 10); }
.data-table th, .data-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border-hairline);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.data-table thead th {
  background-color: var(--color-text-primary);
  color: var(--color-text-secondary);
  padding: 0;
}
.data-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

.th-sort {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  border: 0;
  color: inherit;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--motion-duration-instant) var(--motion-ease-standard);
}
.is-numeric .th-sort { justify-content: flex-end; }
.th-sort:hover { color: var(--color-text-accent); }
.th-sort__icon {
  width: var(--space-1);
  height: var(--space-1);
  border-inline: 4px solid transparent;
  border-bottom: 6px solid currentColor;
  opacity: 0.3;
  transition: transform var(--motion-duration-instant) var(--motion-ease-out), opacity var(--motion-duration-instant);
}
[aria-sort="ascending"] .th-sort__icon { opacity: 1; }
[aria-sort="descending"] .th-sort__icon { opacity: 1; transform: rotate(180deg); }

.data-table tbody tr:nth-child(even) { background-color: var(--color-surface-subtle); }
.data-table tbody tr:hover { background-color: var(--color-tertiary-wash); }
.data-table td:first-child {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.data-table .cell-name { font-weight: var(--font-weight-medium); white-space: normal; min-width: 18rem; }

.phase-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-1);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.phase-badge--complete { background-color: var(--color-status-success); }
.phase-badge--active { background-color: var(--color-status-warning); }
.phase-badge--tender { background-color: var(--color-text-tertiary); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.pagination[hidden] { display: none; }
.pagination__status {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted-on-light);
}
.pagination__controls { display: flex; gap: var(--space-1); }

/* ---------------------------------------------------------- Testimonials */
.testimonials { overflow: hidden; }
.testimonials__title { max-width: 22ch; margin-bottom: var(--layout-block); }

.marquee { overflow: hidden; margin-bottom: var(--space-4); }
.marquee__track { display: flex; width: max-content; animation: marquee 64s linear infinite; }
.marquee[data-paused="true"] .marquee__track { animation-play-state: paused; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; gap: var(--space-4); padding-inline-end: var(--space-4); }
@keyframes marquee { to { transform: translateX(-50%); } }

.quote {
  width: calc(var(--space-5) * 5);
  max-width: 80vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-on-dark);
}
.quote p {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
}
.quote footer { display: flex; flex-direction: column; }
.quote__name {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-accent);
}
.quote__org { font-size: var(--font-size-sm); color: var(--color-text-muted-on-dark); }

/* -------------------------------------------------------------- Careers */
.careers {
  position: relative;
  padding-block: var(--layout-section-y-lg);
  background-color: var(--color-surface-base);
  color: var(--color-text-secondary);
  isolation: isolate;
  overflow: hidden;
}
.careers__media { position: absolute; inset: 0; z-index: -2; }
.careers__media img { width: 100%; height: 100%; object-fit: cover; }
.careers::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, var(--color-surface-base) 20%, var(--color-scrim-hero) 70%, var(--color-scrim-media));
}
.careers__inner { display: flex; flex-direction: column; align-items: flex-start; }
.careers .display { max-width: 20ch; margin-bottom: var(--space-3); }
.careers__lede { max-width: 52ch; }
.careers__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.careers__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--layout-block);
}
.careers__thumbs li { display: flex; flex-direction: column; gap: var(--space-1); }
.careers__thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.careers__thumbs span {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-accent);
}
@media (max-width: 640px) { .careers__thumbs { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Contact */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--layout-block);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: var(--space-4); } }
.contact__lead .prose { margin-block: var(--space-3); }

.tender-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-on-light);
}
@media (max-width: 560px) { .tender-form { grid-template-columns: 1fr; padding: var(--space-3); } }

.tender-form__legend {
  grid-column: 1 / -1;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted-on-light);
}
.tender-form__count { color: var(--color-text-tertiary); }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field--full { grid-column: 1 / -1; }
.field--inline { gap: var(--space-1); }

.field__label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.field__input {
  width: 100%;
  min-height: calc(var(--space-5) * 0.6);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius-none);
  color: var(--color-text-primary);
  font-family: var(--font-family-stack);
  font-size: var(--font-size-md);
  transition: border-color var(--motion-duration-instant) var(--motion-ease-standard),
              box-shadow var(--motion-duration-instant) var(--motion-ease-standard);
}
.field__input--area { min-height: calc(var(--space-5) * 1.6); resize: vertical; }
.field__input::placeholder { color: var(--color-text-muted-on-light); opacity: 0.7; }
.field__input:hover { border-color: var(--color-text-tertiary); }
.field__input:focus-visible {
  outline: none;
  border-color: var(--color-text-tertiary);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-text-tertiary);
}
.field__input:disabled { opacity: 0.4; cursor: not-allowed; background-color: var(--color-surface-subtle); }

.field__help { font-size: var(--font-size-xs); color: var(--color-text-muted-on-light); }
.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-status-error);
}
.field__error[hidden] { display: none; }
.field__error::before { content: "!"; display: grid; place-items: center; width: var(--space-3); height: var(--space-3); background-color: var(--color-status-error); color: var(--color-surface-card); flex: none; }

.field[data-invalid="true"] .field__input { border-width: 2px; border-color: var(--color-status-error); background-color: var(--color-error-wash); }

.tender-form__footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-hairline);
}
.tender-form__footer .field__help { flex-basis: 100%; }

.form-status {
  grid-column: 1 / -1;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}
.form-status:empty { display: none; }
.form-status[data-tone="error"] { color: var(--color-status-error); }
.form-status[data-tone="success"] { color: var(--color-status-success); }

/* --------------------------------------------------------------- Footer */
.site-footer {
  background-color: var(--color-surface-base);
  color: var(--color-text-secondary);
  padding-block: var(--layout-section-y);
  border-top: 1px solid var(--color-border-on-dark);
}
.site-footer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--layout-block);
  border-bottom: 1px solid var(--color-border-on-dark);
}
.site-footer__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  padding-block: var(--layout-block);
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

.footer-col__title {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin-bottom: var(--space-3);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-col a {
  display: inline-block;
  padding-block: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted-on-dark);
  transition: color var(--motion-duration-instant) var(--motion-ease-standard);
}
.footer-col a:hover { color: var(--color-text-accent); }
.footer-col__address {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted-on-dark);
}
.footer-col__address span {
  display: block;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-on-dark);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted-on-dark);
}
.site-footer__note { color: var(--color-text-accent); }

/* ---------------------------------------------------------------- Toast */
.toast {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-start: 50%;
  transform: translate(-50%, calc(var(--space-5) * 0.5));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(92vw, calc(var(--space-5) * 6));
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-text-primary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-text-accent);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
              transform var(--motion-duration-fast) var(--motion-ease-out);
}
.toast[hidden] { display: none; }
.toast[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); }
.toast__icon { width: var(--space-1); height: var(--space-1); background-color: var(--color-text-accent); flex: none; }

/* ------------------------------------------------------ Reveal on scroll */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--space-4));
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out),
              transform var(--motion-duration-fast) var(--motion-ease-out);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* --------------------------------------------------------- Print basics */
@media print {
  .site-header, .nav-scrim, .hero__scroll, .toast, .marquee__toggle { display: none !important; }
  body { background-color: var(--color-surface-card); color: var(--color-text-primary); }
}