/* ============================================================
   TSWATERPLANTS — Production stylesheet
   Architecture:
     1. Design tokens (colors, spacing, type, shadows, motion)
     2. Reset & base
     3. Container & section systems
     4. Typography
     5. Components (buttons, badges, cards, forms, marquee)
     6. Header & footer
     7. Sections (hero, sectors, about, metrics, sustainability,
                  projects, partners, cta, contact)
     8. Inner page templates (page head, page grid, page detail)
     9. Motion (reveal, lift, shimmer)
    10. Responsive overrides (mobile-first refinements)
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* ---- Brand palette (Phase 7: full LIGHT theme) ---- */
  /* Backgrounds run light → these "navy" tokens now hold light blue-greys
     so existing rules that reference them resolve to a light surface. */
  --navy-900: #eef3f8;   /* page base (lightest) */
  --navy-800: #e4ecf4;   /* alt surface */
  --navy-700: #d8e3ee;   /* deeper alt */
  --navy-600: #c7d6e6;   /* deepest light surface */
  --navy-500: #335089;   /* retained mid-blue for accents */

  /* Brand ink (dark text + dark UI surfaces where needed) */
  --ink-900: #0d1b33;
  --ink-800: #142540;
  --ink-700: #1d3354;
  --ink-600: #274168;

  --cyan-400: #0aa6c4;   /* darker cyan for contrast on light bg */
  --cyan-300: #1186a8;   /* link/heading accent, readable on light */
  --cyan-200: #6fe8ef;   /* bright accent for dark sections */
  --cyan-glow: rgba(10, 166, 196, .3);
  --ice:      #eef6fb;
  --silver:   #5d7188;

  /* Text now DARK on light surfaces */
  --text:     #1a2942;   /* primary body text */
  --text-dim: #46586f;   /* secondary text */
  --text-mute:#6b7d94;   /* muted/labels */
  --white:    #0d1b33;   /* "white" token now = dark ink (headings) */
  --on-dark:  #ffffff;   /* true white, for use on dark sections */

  /* Glass/surfaces now light cards with soft borders + shadows */
  --glass:    #ffffff;
  --glass-2:  #ffffff;
  --glass-brd:rgba(20, 50, 90, .12);
  --glass-brd-2:rgba(20, 50, 90, .2);
  --hairline: rgba(20, 50, 90, .1);

  /* ---- Spacing scale (4px base) ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---- Section padding (responsive) ---- */
  --section-y-mobile:  60px;
  --section-y-tablet:  90px;
  --section-y-desktop: 120px;

  /* ---- Containers ---- */
  --container-narrow: 880px;
  --container-base:   1240px;
  --container-wide:   1440px;
  --container-pad:    24px;

  /* ---- Type ---- */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', 'Inter', system-ui, sans-serif;

  /* Fluid type using clamp(min, preferred, max) */
  --fs-display: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --fs-h1:      clamp(2rem, 1.4rem + 3vw, 3.25rem);
  --fs-h2:      clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --fs-h4:      1.125rem;
  --fs-lead:    clamp(1rem, .95rem + .5vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-micro:   .75rem;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows (light theme: soft realistic elevation) ---- */
  --shadow-sm:  0 1px 2px rgba(20, 50, 90, .06);
  --shadow-md:  0 6px 18px rgba(20, 50, 90, .08);
  --shadow-lg:  0 18px 40px rgba(20, 50, 90, .12);
  --shadow-xl:  0 28px 70px rgba(20, 50, 90, .16);
  --shadow-glow:0 8px 30px rgba(10, 166, 196, .15);

  /* ---- Z-index plan (explicit, no magic numbers) ---- */
  --z-bg:      -1;
  --z-content:  1;
  --z-elevate:  5;
  --z-sticky:  10;
  --z-header:  20;
  --z-overlay: 50;
  --z-modal:  100;

  /* ---- Motion ---- */
  --ease-smooth: cubic-bezier(.22, .61, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --t-fast:    .15s;
  --t-base:    .25s;
  --t-slow:    .45s;
  --t-cinema:  .8s;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: #f4f8fc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ---- Site-wide ambient background (Phase 7: light theme) ---- */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(199, 214, 230, .55) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 20%, rgba(216, 227, 238, .5) 0%, transparent 50%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(228, 236, 244, .6) 0%, transparent 60%),
    linear-gradient(170deg, #f4f8fc 0%, #e9f0f7 55%, #f4f8fc 100%);
  animation: bgDrift 26s var(--ease-smooth) infinite alternate;
}
.site-bg::before {
  /* dotted grid texture (subtle on light) */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(39, 65, 104, .055) 1px, transparent 0);
  background-size: 38px 38px;
  opacity: .8;
}
.site-bg::after {
  /* Detailed pump assembly — confined to the LEFT gutter so it never sits
     under the main text column. Lower opacity for readability over scroll. */
  content: "";
  position: absolute;
  left: -90px;
  top: 50%;
  transform: translateY(-50%);
  width: 440px;
  height: 540px;
  background: url("/assets/images/pump-assembly.svg") no-repeat left center / contain;
  opacity: .33;
  animation: blueprintFloat 30s ease-in-out infinite alternate;
}
/* Second (simpler) blueprint, lower-right, subtle — kept from Phase 6 */
.site-bg .bp-right {
  position: absolute;
  right: -120px;
  bottom: -60px;
  width: 480px;
  height: 560px;
  background: url("/assets/images/blueprint.svg") no-repeat center / contain;
  opacity: .34;
  animation: blueprintFloat2 34s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
  100% { background-position: 4% 2%, -3% 3%, 2% -2%, 0% 0%; }
}
@keyframes blueprintFloat {
  0%   { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(calc(-50% - 24px)) rotate(.5deg); }
}
@keyframes blueprintFloat2 {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-22px) rotate(-.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .site-bg, .site-bg::after, .site-bg .bp-right { animation: none; }
}
/* On narrower desktops the text column shifts left toward the drawing —
   keep it in the gutter at slightly reduced size. */
@media (max-width: 1279px) {
  .site-bg::after { opacity: .3; width: 380px; left: -120px; }
  .site-bg .bp-right { opacity: .28; }
}
/* Tablet: keep both but anchor them low so they sit clear of the text. */
@media (max-width: 1023px) {
  .site-bg::after {
    display: block;
    top: auto; bottom: -30px; transform: none;
    width: 340px; height: 380px; left: -120px;
    opacity: .26;
    animation: none;
  }
  .site-bg .bp-right {
    display: block;
    width: 340px; height: 400px; right: -120px; bottom: -40px;
    opacity: .24;
    animation: none;
  }
}
/* Mobile: faint corner textures, clearly visible but never under body text. */
@media (max-width: 767px) {
  .site-bg::after {
    width: 240px; height: 280px; left: -90px; bottom: -20px;
    opacity: .22;
  }
  .site-bg .bp-right {
    width: 240px; height: 300px; right: -100px; bottom: -20px;
    opacity: .2;
  }
}

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

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ============================================================
   3. CONTAINER & SECTION SYSTEMS
   ============================================================ */
.container,
.container-narrow,
.container-wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container        { max-width: var(--container-base); }
.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

.section {
  position: relative;
  padding-block: var(--section-y-mobile);
  isolation: isolate;       /* contains z-index from leaking */
}
.section--alt   { background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.015) 100%); }
.section--dark  { background: #eef3f8; }
.section--bleed { padding-block: 0; }

@media (min-width: 768px) {
  .section { padding-block: var(--section-y-tablet); }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--section-y-desktop); }
}

/* Section header pattern (eyebrow + title + lead) */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 760px;
  margin-bottom: var(--s-12);
}
.section-head--center {
  text-align: center;
  margin-inline: auto;
}
.section-head--center .eyebrow { align-self: center; }

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
.h-display, h1.h-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--white);
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--white);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--white);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--white);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  background: rgba(47, 216, 228, .08);
  border: 1px solid rgba(47, 216, 228, .22);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-300);
  width: fit-content;
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 8px var(--cyan-glow);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 65ch;
}

.text-dim   { color: var(--text-dim); }
.text-mute  { color: var(--text-mute); }
.text-cyan  { color: var(--cyan-300); }
.text-center{ text-align: center; }

.grad {
  background: linear-gradient(135deg, #0aa6c4 0%, #1d3354 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  border: none;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-smooth),
              box-shadow var(--t-base) var(--ease-smooth),
              background var(--t-base) var(--ease-smooth),
              color var(--t-base) var(--ease-smooth);
  text-decoration: none;
  white-space: nowrap;
}
.btn--lg { padding: 16px 30px; font-size: 1.0625rem; }
.btn--sm { padding: 10px 18px; font-size: var(--fs-small); }

.btn-primary {
  background: linear-gradient(135deg, #0aa6c4 0%, #0c8fb0 100%);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(10, 166, 196, .28),
              inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(10, 166, 196, .4),
              inset 0 1px 0 rgba(255, 255, 255, .3);
              inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: #f2f6fb;
  color: var(--white);
  border: 1px solid var(--glass-brd-2);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: #e8eff6;
  border-color: var(--cyan-400);
  color: var(--cyan-300);
}

.btn-link {
  background: transparent;
  color: var(--cyan-300);
  padding: 0;
  font-weight: 600;
}
.btn-link:hover { color: var(--cyan-200); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ---- Card primitives ---- */
.card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  transition: transform var(--t-base) var(--ease-smooth),
              border-color var(--t-base) var(--ease-smooth),
              background var(--t-base) var(--ease-smooth),
              box-shadow var(--t-base) var(--ease-smooth);
}
.card--lift:hover {
  transform: translateY(-4px);
  border-color: var(--glass-brd-2);
  background: var(--glass-2);
  box-shadow: var(--shadow-lg);
}
.card--bordered { border: 1px solid var(--glass-brd-2); }
.card--padded   { padding: var(--s-10); }

/* ---- Forms ---- */
.field { margin-bottom: var(--s-5); }
.field label,
.form-label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  letter-spacing: .005em;
}
.field input,
.field textarea,
.field select,
input.input, textarea.input, select.input {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--cyan-400);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(47, 216, 228, .12);
}
.field .hint {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-micro);
  color: var(--text-mute);
}
.field .hint.err,
.field input.err, .field textarea.err, .field select.err {
  --c: rgba(255, 120, 120, .55);
}
.field input.err, .field textarea.err, .field select.err {
  border-color: var(--c);
  box-shadow: 0 0 0 3px rgba(255, 120, 120, .08);
}
.field .hint.err { color: #ffb0b0; }

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 640px) {
  .row2 { grid-template-columns: 1fr; }
}

.form-error {
  background: rgba(255, 80, 80, .08);
  border: 1px solid rgba(255, 120, 120, .35);
  color: #ffd0d0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  font-size: var(--fs-small);
}
.form-success {
  padding: 40px 28px;
  text-align: center;
  background: rgba(47, 216, 228, .05);
  border: 1px solid var(--glass-brd-2);
  border-radius: var(--r-xl);
}
.form-success svg { margin: 0 auto 16px; }
.form-success h3 { margin-bottom: 8px; }
.form-success p  { color: var(--text-dim); }

.form-note {
  display: block;
  margin-top: var(--s-3);
  color: var(--text-mute);
  font-size: var(--fs-micro);
}

/* ============================================================
   6. HEADER & FOOTER
   ============================================================ */

/* ---- Header ---- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding: var(--s-3) 0;
  transition: background var(--t-base) var(--ease-smooth),
              border-color var(--t-base) var(--ease-smooth),
              padding var(--t-base) var(--ease-smooth);
  border-bottom: 1px solid transparent;
  background: transparent;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--hairline);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo svg { width: 36px; height: 36px; }
.logo-text {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--white);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.nav-menu a {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-dim);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-menu a:hover,
.nav-menu a.active {
  color: var(--white);
  background: #f2f6fb;
}
/* In-menu quote CTA: only shown inside the mobile menu */
.nav-menu-cta { display: none; }

.nav-aside {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  background: #f2f6fb;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 4px;
}
.lang-switch a {
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-dim);
  transition: color var(--t-fast), background var(--t-fast);
}
.lang-switch a.on {
  background: #e8eff6;
  color: var(--white);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 8px;
  cursor: pointer;
  color: var(--white);
}

/* ---- Footer ---- */
.site-footer {
  background: #eaf1f8;
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-16) var(--s-8);
  margin-top: var(--s-20);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--s-10);
  margin-bottom: var(--s-12);
}
.foot-col h5 {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-300);
  margin-bottom: var(--s-4);
}
.foot-col a,
.foot-col p {
  display: block;
  color: var(--text-dim);
  font-size: var(--fs-small);
  margin-bottom: var(--s-2);
  transition: color var(--t-fast);
  line-height: 1.6;
}
.foot-col a:hover { color: var(--cyan-300); }
.foot-brand p {
  font-size: var(--fs-small);
  margin-top: var(--s-4);
  max-width: 32ch;
}
.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
  color: var(--text-mute);
  font-size: var(--fs-micro);
}

/* ============================================================
   7. SECTIONS
   ============================================================ */

/* ---- HERO ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: 140px 100px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(39, 65, 104, .5) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(51, 80, 137, .28) 0%, transparent 50%);
}
.hero::before {
  /* Subtle texture overlay — single, contained, no bleed */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(140, 200, 230, .045) 1px, transparent 0);
  background-size: 32px 32px;
  z-index: var(--z-bg);
  pointer-events: none;
  opacity: .6;
}
.hero::after {
  /* Single soft fade at the bottom into the page background */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(244, 248, 252, .6) 100%);
  pointer-events: none;
  z-index: var(--z-bg);
}
.hero-inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  max-width: 920px;
}
.hero h1 {
  font-size: var(--fs-display);
  margin: var(--s-2) 0 var(--s-4);
}
.hero-lead {
  font-size: var(--fs-lead);
  color: var(--text-dim);
  max-width: 60ch;
  line-height: 1.6;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--hairline);
}
.hero-stats .stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
}
.hero-stats .stat span {
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--text-mute);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-mute);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: var(--z-content);
}
.scroll-cue .line {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, var(--cyan-400), transparent);
  animation: scrollPulse 2.2s var(--ease-smooth) infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .3; transform: scaleY(.6); }
  50%      { opacity: 1;  transform: scaleY(1); }
}

/* ---- SECTORS (services grid) ---- */
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
}
.sector-card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: transform var(--t-base) var(--ease-smooth),
              border-color var(--t-base) var(--ease-smooth),
              background var(--t-base) var(--ease-smooth),
              box-shadow var(--t-base) var(--ease-smooth);
  overflow: hidden;
}
.sector-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(47, 216, 228, 0) 0%,
    rgba(47, 216, 228, .04) 50%,
    rgba(47, 216, 228, 0) 100%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-smooth);
  pointer-events: none;
}
.sector-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-brd-2);
  box-shadow: var(--shadow-lg);
}
.sector-card:hover::before { opacity: 1; }

.sector-num {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--cyan-300);
  text-transform: uppercase;
}
.sector-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 216, 228, .08);
  border: 1px solid rgba(47, 216, 228, .18);
  color: var(--cyan-300);
}
.sector-icon svg { width: 28px; height: 28px; }
.sector-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 4px;
}
.sector-card p {
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.6;
  flex: 1;
}
.sector-card .card-link {
  position: absolute;
  inset: 0;
  z-index: var(--z-elevate);
  border-radius: inherit;
}
.sector-card .card-arrow {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--cyan-300);
  margin-top: var(--s-2);
  position: relative;
  z-index: var(--z-content);
}

/* ---- ABOUT (two-column with capabilities panel) ---- */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-12);
  align-items: start;
}
.about-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-top: var(--s-8);
}
.about-point {
  display: flex;
  gap: var(--s-4);
}
.about-point .k {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--cyan-300);
  flex-shrink: 0;
  line-height: 1;
}
.about-point h4 {
  font-size: var(--fs-h4);
  margin-bottom: 6px;
}
.about-point p {
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.capabilities {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #eef3f8 100%);
  border: 1px solid var(--glass-brd-2);
  border-radius: var(--r-2xl);
  padding: var(--s-10);
  overflow: hidden;
}
.capabilities::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 216, 228, .12) 0%, transparent 70%);
  top: -120px;
  right: -120px;
  pointer-events: none;
}
.capabilities h3 { margin-bottom: var(--s-3); }
.capabilities > p {
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.65;
  margin-bottom: var(--s-8);
}
.gauges { display: flex; flex-direction: column; gap: var(--s-5); }
.gauge label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.gauge label span {
  font-size: var(--fs-small);
  color: var(--text-dim);
}
.gauge label b {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--cyan-300);
}
.gauge .bar {
  height: 6px;
  background: #ffffff;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.gauge .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan-400), var(--cyan-200));
  border-radius: inherit;
  transition: width 1.4s var(--ease-out);
}

/* ---- METRICS / CREDIBILITY (animated counters) ---- */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--glass-brd-2);
  border-radius: var(--r-2xl);
  background: linear-gradient(160deg, #ffffff 0%, #f0f5fa 100%);
  overflow: hidden;
}
.metric-cell {
  padding: var(--s-10) var(--s-6);
  text-align: center;
  border-right: 1px solid var(--hairline);
  position: relative;
}
.metric-cell:last-child { border-right: none; }
.metric-cell b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.metric-cell b .unit {
  font-size: .6em;
  color: var(--cyan-300);
  margin-left: 2px;
}
.metric-cell h4 {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.metric-cell p {
  font-size: var(--fs-micro);
  color: var(--text-mute);
  line-height: 1.5;
}

/* ---- PROCESS STEPS ---- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.process-step {
  position: relative;
  padding: var(--s-8);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  transition: transform var(--t-base), border-color var(--t-base);
}
.process-step:hover {
  transform: translateY(-2px);
  border-color: var(--glass-brd-2);
}
.process-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0aa6c4 0%, #1d3354 100%);
  border: 1px solid var(--glass-brd-2);
  color: var(--cyan-300);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: var(--s-5);
}
.process-step h4 { margin-bottom: 8px; }
.process-step p { font-size: var(--fs-small); color: var(--text-dim); line-height: 1.6; }

/* ---- SUSTAINABILITY band ---- */
.sustainability {
  position: relative;
  background: linear-gradient(160deg, var(--ink-700) 0%, var(--ink-900) 100%);
  border-top: 1px solid var(--ink-600);
  border-bottom: 1px solid var(--ink-600);
  overflow: hidden;
}
.sustainability h2, .sustainability h4 { color: var(--on-dark); }
.sustainability .lead, .sustainability p { color: rgba(255,255,255,.78); }
.sustainability .eyebrow { background: rgba(111,232,239,.12); border-color: rgba(111,232,239,.3); color: var(--cyan-200); }
.sustainability .sus-metric { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.sustainability .sus-metric .val { color: var(--cyan-200); }
.sustainability::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 216, 228, .08) 0%, transparent 60%);
  top: -200px;
  right: -200px;
  pointer-events: none;
}
.sustainability > .container { padding-block: var(--section-y-mobile); }
@media (min-width: 768px)  { .sustainability > .container { padding-block: var(--section-y-tablet); } }
@media (min-width: 1024px) { .sustainability > .container { padding-block: var(--section-y-desktop); } }
.sus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
  position: relative;
  z-index: var(--z-content);
}
.sus-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.sus-metric {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-6);
  background: #ffffff;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), background var(--t-base);
}
.sus-metric:hover {
  border-color: var(--glass-brd-2);
  background: #f2f6fb;
}
.sus-metric .val {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--cyan-300);
  line-height: 1;
  flex-shrink: 0;
  min-width: 70px;
}
.sus-metric h4 { font-size: var(--fs-h4); margin-bottom: 4px; }
.sus-metric p { font-size: var(--fs-small); color: var(--text-dim); }

/* ---- PROJECTS ---- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-6);
}
.project-card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-smooth),
              border-color var(--t-base) var(--ease-smooth),
              box-shadow var(--t-base) var(--ease-smooth);
  display: flex;
  flex-direction: column;
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-brd-2);
  box-shadow: var(--shadow-lg);
}
.project-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #d8e3ee 0%, #c7d6e6 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(47, 216, 228, .15) 0%, transparent 50%),
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent 20px,
      rgba(140, 200, 230, .03) 20px,
      rgba(140, 200, 230, .03) 21px);
}
.project-image .placeholder {
  position: relative;
  z-index: 1;
  color: var(--text-mute);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.project-body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.project-cat {
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 600;
}
.project-card h3 { font-size: var(--fs-h4); line-height: 1.35; }
.project-card p { color: var(--text-dim); font-size: var(--fs-small); line-height: 1.6; flex: 1; }
.project-meta {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  color: var(--text-mute);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.project-meta b { color: var(--text-dim); font-weight: 600; margin-right: 4px; }
.project-card .card-link { position: absolute; inset: 0; z-index: var(--z-elevate); }

/* ---- PARTNERS marquee + grid ---- */
.partners-strip {
  position: relative;
  margin-top: var(--s-10);
  padding-block: var(--s-8);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: #f7fafd;
  overflow: hidden;
}
.partners-strip::before,
.partners-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: var(--z-elevate);
  pointer-events: none;
}
.partners-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--navy-900) 0%, transparent 100%);
}
.partners-strip::after {
  right: 0;
  background: linear-gradient(270deg, var(--navy-900) 0%, transparent 100%);
}
.partners-track {
  display: flex;
  gap: var(--s-12);
  animation: marquee 40s linear infinite;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.partner-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-dim);
  text-transform: uppercase;
  opacity: .7;
  transition: opacity var(--t-base), color var(--t-base);
}
.partner-item:hover {
  opacity: 1;
  color: var(--white);
}

/* ---- CTA band ---- */
.cta-band {
  position: relative;
  background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-800) 60%, var(--ink-900) 100%);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-2xl);
  padding: var(--s-16) var(--s-10);
  text-align: center;
  overflow: hidden;
}
.cta-band h2 { color: var(--on-dark); }
.cta-band p { color: rgba(255,255,255,.8); }
.cta-band .eyebrow { background: rgba(111,232,239,.12); border-color: rgba(111,232,239,.3); color: var(--cyan-200); }
.cta-band::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 216, 228, .14) 0%, transparent 60%);
  top: -180px;
  right: -180px;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: var(--z-content); }
.cta-band h2 { margin-bottom: var(--s-3); }
.cta-band p {
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0 auto var(--s-6);
  font-size: var(--fs-lead);
}
.cta-band .btn-group { justify-content: center; }

/* ---- CONTACT ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-10);
  align-items: start;
}
.contact-form {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  padding: var(--s-10);
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.info-card {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), background var(--t-base);
}
.info-card:hover {
  border-color: var(--glass-brd-2);
  background: var(--glass-2);
}
.info-card .ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 216, 228, .08);
  border: 1px solid rgba(47, 216, 228, .2);
  border-radius: var(--r-md);
  color: var(--cyan-300);
}
.info-card .ico svg { width: 20px; height: 20px; }
.info-card h4 {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.info-card p {
  font-size: var(--fs-body);
  color: var(--text);
  line-height: 1.5;
}
.info-card a { color: var(--text); transition: color var(--t-fast); }
.info-card a:hover { color: var(--cyan-300); }

.contact-hours {
  padding: var(--s-5);
  background: rgba(47, 216, 228, .04);
  border: 1px solid rgba(47, 216, 228, .15);
  border-radius: var(--r-lg);
  font-size: var(--fs-small);
  color: var(--text-dim);
}
.contact-hours strong { color: var(--cyan-300); display: block; margin-bottom: 6px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; }

/* ============================================================
   8. INNER PAGE TEMPLATES
   ============================================================ */
.page-head {
  position: relative;
  padding-block: 140px 70px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(39, 65, 104, .45) 0%, transparent 60%);
  overflow: hidden;
  isolation: isolate;
}
/* Optional background photo layer with on-brand blue tint overlay */
.page-head .ph-bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
}
.page-head .ph-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}
.page-head .ph-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,27,51,.72) 0%, rgba(20,37,64,.88) 100%),
    linear-gradient(120deg, rgba(39,65,104,.5) 0%, rgba(13,27,51,.3) 100%);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(140, 200, 230, .04) 1px, transparent 0);
  background-size: 32px 32px;
  z-index: var(--z-bg);
  opacity: .5;
}
.page-head--tall { padding-block: 180px 100px; }
.page-head__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 760px;
}
.page-head--center .page-head__inner {
  text-align: center;
  margin-inline: auto;
  align-items: center;
}
.page-head h1 { font-size: var(--fs-h1); }
.page-head .lead { max-width: 60ch; }

/* When a background photo is present, the tint overlay is dark → light text */
.page-head:has(.ph-bg) h1,
.page-head:has(.ph-bg) .eyebrow { color: var(--on-dark); }
.page-head:has(.ph-bg) .lead { color: rgba(255,255,255,.85); }
.page-head:has(.ph-bg) .eyebrow { background: rgba(111,232,239,.14); border-color: rgba(111,232,239,.32); }

.page-section {
  padding-block: var(--section-y-mobile);
}
@media (min-width: 768px)  { .page-section { padding-block: var(--section-y-tablet); } }
@media (min-width: 1024px) { .page-section { padding-block: var(--section-y-desktop); } }

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-5);
}
.page-card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.page-card:hover {
  transform: translateY(-3px);
  border-color: var(--glass-brd-2);
  background: var(--glass-2);
}
.page-card h3 { font-size: var(--fs-h3); }
.page-card p { color: var(--text-dim); font-size: var(--fs-small); line-height: 1.6; flex: 1; }
.page-card .tag {
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 600;
}
.page-card .meta {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  color: var(--text-mute);
  flex-wrap: wrap;
}
.page-card .arrow {
  font-size: var(--fs-small);
  color: var(--cyan-300);
  font-weight: 600;
  margin-top: auto;
}

.page-detail { padding-block: var(--s-12) var(--section-y-mobile); }
.page-detail .back {
  display: inline-block;
  margin-bottom: var(--s-6);
  color: var(--text-mute);
  font-size: var(--fs-small);
  transition: color var(--t-fast);
}
.page-detail .back:hover { color: var(--cyan-300); }
.page-detail .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  color: var(--text-mute);
  font-size: var(--fs-small);
  margin-bottom: var(--s-4);
}
.page-detail .meta-row b { color: var(--text-dim); font-weight: 600; margin-right: 4px; }
.page-detail .body {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--text);
  max-width: 70ch;
  white-space: pre-line;
}
.page-detail .body p { margin-bottom: 1.2em; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.value-card {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.value-card h4 { margin-bottom: 6px; }
.value-card p { color: var(--text-dim); font-size: var(--fs-small); line-height: 1.6; }

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.cert-card {
  background: #ffffff;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-md);
  padding: var(--s-5);
  text-align: center;
}
.cert-card h4 { font-size: var(--fs-small); margin-bottom: 6px; }
.cert-card p { color: var(--text-dim); font-size: var(--fs-micro); line-height: 1.5; }

/* ============================================================
   9. MOTION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-cinema) var(--ease-out),
              transform var(--t-cinema) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1.is-visible { transition-delay: .08s; }
.reveal-delay-2.is-visible { transition-delay: .16s; }
.reveal-delay-3.is-visible { transition-delay: .24s; }
.reveal-delay-4.is-visible { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
  10. RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 1023px) {
  .about-grid,
  .sus-grid,
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-10); }

  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric-cell:nth-child(2) { border-right: none; }
  .metric-cell:nth-child(1), .metric-cell:nth-child(2) {
    border-bottom: 1px solid var(--hairline);
  }

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

  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root {
    --container-pad: 18px;
  }

  .nav-menu { display: none; }
  .nav-menu.open {
    display: flex;
    position: fixed;
    inset: 64px 0 0 0;
    flex-direction: column;
    background: rgba(244, 248, 252, .99);
    backdrop-filter: blur(16px);
    padding: var(--s-8) var(--s-6);
    gap: var(--s-2);
    z-index: var(--z-overlay);
    align-items: stretch;
    overflow-y: auto;
  }
  .nav-menu.open a {
    padding: var(--s-4);
    border-bottom: 1px solid var(--hairline);
    font-size: var(--fs-lead);
    color: var(--text);
  }
  .nav-menu.open .nav-menu-cta {
    display: block;
  }
  .nav-toggle { display: inline-flex; }

  /* Mobile header: solid light bar so dark logo/toggle are always legible */
  .site-header { padding: var(--s-2) 0; background: rgba(244, 248, 252, .96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
  .site-header.scrolled { background: rgba(244, 248, 252, .98); }
  .nav-wrap { gap: var(--s-3); }
  /* The top-bar "Request a Quote" is redundant on mobile — the menu and page CTAs cover it.
     Hide it so the lang switch + hamburger have room and never overflow. */
  .nav-aside > .btn-primary { display: none; }
  .nav-aside { gap: var(--s-2); }
  .lang-switch a { padding: 5px 8px; }
  .logo svg { width: 30px; height: 30px; }
  .logo-text { font-size: 1rem; }

  .hero {
    min-height: auto;
    padding-block: 110px var(--s-16);
  }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1; min-width: 0; }
  .scroll-cue { display: none; }

  .sectors-grid { grid-template-columns: 1fr; }
  .about-points { grid-template-columns: 1fr; }

  .metrics { grid-template-columns: 1fr; }
  .metric-cell { border-right: none; border-bottom: 1px solid var(--hairline); padding: var(--s-8) var(--s-5); }
  .metric-cell:last-child { border-bottom: none; }

  .process { grid-template-columns: 1fr; }
  .process-step { padding: var(--s-6); }

  .projects-grid { grid-template-columns: 1fr; }

  .foot-grid { grid-template-columns: 1fr; }
  .foot-base { flex-direction: column; align-items: flex-start; }

  .cta-band { padding: var(--s-10) var(--s-6); }
  .contact-form { padding: var(--s-6); }
  .capabilities { padding: var(--s-8); }
}

/* ============================================================
   FORM error highlighting (legacy helper kept for compat)
   ============================================================ */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

/* ============================================================
   PHASE 5 — Premium components
   ============================================================ */

/* ---- Video / media hero panel ---- */
.media-hero {
  position: relative;
  margin-top: var(--s-12);
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--glass-brd-2);
  background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-900) 100%);
  aspect-ratio: 21 / 9;
}
.media-hero video,
.media-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-hero .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  color: var(--text-mute);
}
.media-hero .placeholder svg { width: 54px; height: 54px; opacity: .5; }
.media-hero .placeholder span { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; }
.media-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4,18,43,.55) 100%);
  pointer-events: none;
}
.media-hero .play-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(47,216,228,.18);
  border: 1px solid var(--cyan-400);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-content);
  transition: transform var(--t-base) var(--ease-smooth), background var(--t-base);
}
.media-hero .play-badge:hover { transform: translate(-50%,-50%) scale(1.08); background: rgba(47,216,228,.28); }
.media-hero .play-badge svg { width: 26px; height: 26px; color: var(--cyan-200); margin-left: 4px; }

/* ---- KPI strip ---- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--glass-brd-2);
  background: linear-gradient(160deg, rgba(14,49,112,.4) 0%, rgba(6,26,58,.3) 100%);
}
.kpi-cell {
  padding: var(--s-10) var(--s-6);
  text-align: center;
  border-right: 1px solid var(--hairline);
}
.kpi-cell:last-child { border-right: none; }
.kpi-cell b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--s-2);
}
.kpi-cell b .unit { font-size: .55em; color: var(--cyan-300); margin-left: 3px; }
.kpi-cell span {
  font-size: var(--fs-small);
  color: var(--text-dim);
  letter-spacing: .02em;
}

/* ---- Why choose us ---- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
}
.why-card {
  position: relative;
  padding: var(--s-8);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  transition: transform var(--t-base) var(--ease-smooth), border-color var(--t-base), background var(--t-base);
}
.why-card:hover { transform: translateY(-4px); border-color: var(--glass-brd-2); background: var(--glass-2); }
.why-card .why-ico {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: rgba(47,216,228,.08);
  border: 1px solid rgba(47,216,228,.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-300);
  margin-bottom: var(--s-5);
}
.why-card .why-ico svg { width: 26px; height: 26px; }
.why-card h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.why-card p { color: var(--text-dim); font-size: var(--fs-small); line-height: 1.65; }

/* ---- Trusted by / logo wall ---- */
.trust-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.trust-logo {
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: border-color var(--t-base), background var(--t-base);
}
.trust-logo:hover { border-color: var(--glass-brd-2); background: rgba(255,255,255,.04); }
.trust-logo img { max-width: 100%; max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter var(--t-base), opacity var(--t-base); }
.trust-logo:hover img { filter: grayscale(0) brightness(1); opacity: 1; }
.trust-logo .placeholder { color: var(--text-mute); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: .04em; }

/* ---- Sector card with image ---- */
.sector-card .sector-photo {
  position: relative;
  margin: calc(var(--s-8) * -1) calc(var(--s-8) * -1) 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #d8e3ee, #c7d6e6);
}
.sector-card .sector-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-smooth);
}
.sector-card:hover .sector-photo img { transform: scale(1.05); }
.sector-card .sector-illus {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(95, 230, 238, .25);
}
.sector-card .sector-illus svg { width: 80px; height: 80px; }

/* ---- Case study cards ---- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s-6);
}
.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-smooth), border-color var(--t-base), box-shadow var(--t-base);
}
.case-card:hover { transform: translateY(-4px); border-color: var(--glass-brd-2); box-shadow: var(--shadow-lg); }
.case-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #d8e3ee, #c7d6e6);
}
.case-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-smooth); }
.case-card:hover .case-image img { transform: scale(1.04); }
.case-image .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute); font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase;
}
.case-image .badge {
  position: absolute; left: var(--s-4); top: var(--s-4);
  padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(4,18,43,.7); backdrop-filter: blur(6px);
  border: 1px solid var(--glass-brd-2);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em;
  color: var(--cyan-200); text-transform: uppercase;
}
.case-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.case-body h3 { font-size: var(--fs-h3); line-height: 1.3; }
.case-stats {
  display: flex; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-4) 0;
  border-block: 1px solid var(--hairline);
  margin-block: var(--s-2);
}
.case-stats .cs { display: flex; flex-direction: column; gap: 2px; }
.case-stats .cs b { font-family: var(--font-display); color: var(--cyan-300); font-size: var(--fs-h4); }
.case-stats .cs span { font-size: var(--fs-micro); color: var(--text-mute); letter-spacing: .04em; text-transform: uppercase; }
.case-body p { color: var(--text-dim); font-size: var(--fs-small); line-height: 1.6; flex: 1; }
.case-card .card-link { position: absolute; inset: 0; z-index: var(--z-elevate); }

/* ---- Case-study detail blocks ---- */
.cs-blocks { display: grid; gap: var(--s-6); margin-top: var(--s-10); }
.cs-block {
  padding: var(--s-8);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  border-left: 3px solid var(--cyan-400);
}
.cs-block h3 { font-size: var(--fs-h4); margin-bottom: var(--s-3); color: var(--cyan-200); }
.cs-block p { color: var(--text-dim); line-height: 1.7; white-space: pre-line; }
.cs-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.cs-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--glass-brd); }

/* ---- Multi-CTA row ---- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-8);
}
.cta-tile {
  flex: 1 1 240px;
  max-width: 320px;
  padding: var(--s-8);
  text-align: center;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.cta-tile:hover { transform: translateY(-4px); border-color: var(--cyan-400); background: var(--glass-2); }
.cta-tile .ct-ico {
  width: 48px; height: 48px; margin: 0 auto var(--s-4);
  border-radius: var(--r-md);
  background: rgba(47,216,228,.1); border: 1px solid rgba(47,216,228,.22);
  display: flex; align-items: center; justify-content: center; color: var(--cyan-300);
}
.cta-tile .ct-ico svg { width: 24px; height: 24px; }
.cta-tile h4 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.cta-tile p { color: var(--text-dim); font-size: var(--fs-small); margin-bottom: var(--s-5); line-height: 1.55; }

/* ---- Responsive for Phase 5 components ---- */
@media (max-width: 1023px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi-cell:nth-child(2) { border-right: none; }
  .kpi-cell:nth-child(1), .kpi-cell:nth-child(2) { border-bottom: 1px solid var(--hairline); }
  .media-hero { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .kpi-cell { border-right: none; border-bottom: 1px solid var(--hairline); padding: var(--s-8) var(--s-5); }
  .kpi-cell:last-child { border-bottom: none; }
  .media-hero { aspect-ratio: 4 / 3; margin-top: var(--s-8); }
  .case-grid { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-tile { max-width: none; }
  /* Mobile density: tighten section rhythm */
  .section { padding-block: 48px; }
  .section-head { margin-bottom: var(--s-8); }
}