/* ==========================================================================
   BSI Sentry — Design System
   Infrastructure Intelligence Platform
   ========================================================================== */

:root{
  /* Core palette — dark industrial navy w/ the BSI logo's blue + green as
     the brand accents (swapped in for the old generic neon-cyan scheme).
     bg-0..bg-5 form a widened lightness ramp (rather than the near-identical
     steps this used to be) so alternating sections read as genuinely
     distinct zones, not just a 2% shade shift. */
  --bg-0: #060b14;
  --bg-1: #0b1220;
  --bg-2: #101c30;
  --bg-3: #16233c;
  --bg-4: #1c2c4a;
  --bg-5: #24365a;
  /* Cool off-white blue-gray — the alternate light section tone. Soft, not stark white,
     so it sits comfortably next to the navy sections rather than jarring
     against them. Two stops so the section itself can carry a soft
     gradient instead of a flat fill. */
  --bg-light: #eef3f8;
  --bg-light-2: #dce6f0;
  --panel: #0f1a2e;
  --panel-border: rgba(148,178,214,0.14);
  --panel-border-strong: rgba(148,178,214,0.28);

  /* Brand blue — matches the logo's wordmark blue exactly (#2694d9). This
     is the primary interactive/accent color: links, icons, buttons, focus
     states. Bright/dim are tints for hover and muted contexts. */
  --blue: #2694d9;
  --blue-bright: #4fb2ea;
  --blue-dim: #1c6fa3;
  /* Brand green — matches the logo's base-stripe green exactly (#8cc15b).
     Used sparingly as the secondary accent: affirmative checkmarks and the
     "live" status dot, so it reads as intentional rather than decorative. */
  --green: #8cc15b;
  --green-bright: #a8d47e;
  --green-dim: #6b9743;

  --amber: #f5a524;
  --amber-strong: #fb7a3c;
  --red-alert: #ef4444;

  --text-0: #f3f6fb;
  --text-1: #c3d0e3;
  --text-2: #8ea0bb;
  --text-3: #5b6c86;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-glow: 0 0 0 1px rgba(38,148,217,0.15), 0 20px 60px -20px rgba(0,0,0,0.7);
  --container: 1240px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family: inherit; }

/* ---------- Background texture: circuit rings + grid ---------- */
.bg-rings{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.bg-rings::before, .bg-rings::after{
  content:""; position:absolute; border-radius:50%;
  border:1px solid rgba(38,148,217,0.14);
}
.bg-rings::before{ width:900px; height:900px; right:-320px; top:-380px; }
.bg-rings::after{ width:560px; height:560px; right:-120px; top:-140px; border-color: rgba(38,148,217,0.22); }

.bg-grid{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(148,178,214,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,178,214,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

.section{ position:relative; padding: 108px 0; }
.section.tight{ padding: 72px 0; }
.section.border-top{ border-top:1px solid var(--panel-border); }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 32px; position:relative; z-index:1; }

/* ---------- Light section theme ----------
   .section-light is a full palette flip, not a tint: background goes to an
   off-white/tan, and every component under it (headings, body text, cards,
   pills, borders, icons) re-themes automatically because they're all built
   on these custom properties. Sections are meant to strictly alternate
   .section / .section-light down the page. */
.section-light{
  background: linear-gradient(160deg, var(--bg-light), var(--bg-light-2));
  --text-0: #172233;
  --text-1: #3c4658;
  --text-2: #626c7c;
  --text-3: #8992a1;
  --panel: #ffffff;
  --panel-border: rgba(23,34,49,0.12);
  --panel-border-strong: rgba(23,34,49,0.24);
  --blue: #155f8a;
  --blue-bright: #0c6fa8;
  --blue-dim: #0a4a6e;
  --green: #5c8a37;
  --green-bright: #6f9f44;
  --green-dim: #4a7029;
  --amber: #a5620a;
  --amber-strong: #8a4508;
}
.section-light .card{ background: #ffffff; }
.section-light .card.dark{
  background: linear-gradient(160deg, #0b1524, #081120);
  --text-0: #f3f6fb; --text-1: #c3d0e3; --text-2: #8ea0bb;
}
.section-light .card.accent{
  background: rgba(12,111,137,0.07);
  border-color: rgba(12,111,137,0.3);
}
.section-light .compare-col.old{ background: rgba(23,34,49,0.04); }
.section-light .compare-col.new{
  background: linear-gradient(160deg, rgba(12,111,137,0.1), rgba(255,255,255,0.6));
  border-color: rgba(12,111,137,0.28);
}
.section-light .logo-chip{ background: rgba(23,34,49,0.04); }
/* Media captions always sit on a dark scrim over a photo, regardless of the
   section theme around them — keep their text light rather than letting it
   inherit the flipped (dark) text color and disappear. */
.section-light .media-caption{ color:#e6ecf5; }
.section-light .media-caption strong{ color:#ffffff; }
.section-light .form-field input,
.section-light .form-field select,
.section-light .form-field textarea{
  background: #ffffff; color: var(--text-0); border-color: var(--panel-border-strong);
}
/* Compare-list checkmarks are hardcoded to the dark theme's brand green via
   an inline stroke attribute; darken them for contrast on light sections. */
.section-light svg[stroke="#8cc15b"]{ stroke: var(--green); }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12.5px; font-weight:700; letter-spacing: 0.16em; text-transform:uppercase;
  color: var(--blue); margin-bottom: 16px;
}
.eyebrow::before{
  content:""; width:20px; height:1px; background: var(--blue);
}

.section-head{ max-width: 720px; margin-bottom: 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
h1, h2, h3, h4{ font-weight: 700; letter-spacing:-0.01em; color: var(--text-0); }
h1{ font-size: clamp(2.4rem, 5vw, 4.1rem); line-height:1.06; letter-spacing:-0.02em; }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height:1.15; }
h3{ font-size: 1.3rem; line-height:1.3; }
.lede{ font-size: 1.18rem; color: var(--text-1); line-height:1.65; }
.muted{ color: var(--text-2); }
/* Solid brand blue — this uses the theme-adaptive --blue (not a gradient),
   so it darkens on light sections the same way headings do automatically. */
.gradient-text{ color: var(--blue); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 26px; border-radius: 999px; font-weight:600; font-size:0.98rem;
  border:1px solid transparent; cursor:pointer; transition: all .18s ease; white-space:nowrap;
}
.btn-primary{
  background: var(--blue);
  color: #ffffff; box-shadow: 0 8px 20px -8px rgba(38,148,217,0.45);
}
.btn-primary:hover{ background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(38,148,217,0.55); }
.btn-ghost{
  background: rgba(255,255,255,0.02); color: var(--text-0);
  border-color: var(--panel-border-strong);
}
.btn-ghost:hover{ border-color: var(--blue); color: var(--blue-bright); background: rgba(38,148,217,0.06); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.btn-sm{ padding: 10px 18px; font-size:0.88rem; }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top:0; z-index: 100;
  border-bottom: 1px solid var(--panel-border);
  animation: navSlideDown 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
/* Ends on transform:none (not translateY(0)) — a non-none transform on .nav
   would make it a containing block for the mobile menu's position:fixed
   panel, the same bug backdrop-filter caused here before (see .nav::before
   below). Fine mid-animation since nothing opens the mobile menu that fast,
   but it must not linger once the animation settles. */
@keyframes navSlideDown{
  from{ transform: translateY(-100%); }
  to{ transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .nav{ animation: none; }
}
/* animation-fill-mode:both HOLDS the animation's effect indefinitely, which
   keeps .nav "animated" (and thus a transform containing block) forever, not
   just for the 0.7s the slide-down is visible — main.js removes the
   animation once it finishes so this class takes over as a fully static,
   non-transformed rest state. */
.nav.nav-settled{ animation: none; }
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: rgba(6,11,20,0.78); backdrop-filter: blur(16px) saturate(140%);
}
/* Single-row header: brand, primary nav, and CTA cluster all share one
   line — the nav sits between brand and CTA and takes whatever space
   is left, centering itself within it. */
.nav-inner{
  max-width: var(--container); margin:0 auto; padding: 14px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.brand svg{ height: 34px; width:auto; }
.brand-tag{ font-size:10.5px; font-weight:600; letter-spacing:0.2em; color:var(--text-2); text-transform:uppercase; padding-left:14px; border-left:1px solid var(--panel-border-strong); max-width:70px; line-height:1.3; }

.nav-links{
  display:flex; align-items:center; justify-content:center; gap: 2px; flex:1;
}
.nav-links a{
  padding: 8px 14px; font-size: 0.9rem; font-weight:500; color: var(--text-1);
  border-radius: 8px; transition: all .15s ease; white-space:nowrap;
}
.nav-links a:hover{ color: var(--text-0); background: rgba(255,255,255,0.04); }
.nav-links a.active{ color: var(--blue-bright); }

.nav-item{ position:relative; }
.nav-dropdown{
  position:absolute; top:100%; left:0; margin-top:10px; min-width:200px;
  background: linear-gradient(160deg, #101d33, #0c1526);
  border:1px solid rgba(38,148,217,0.3); border-radius:12px;
  padding:6px; box-shadow: 0 24px 50px -16px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.4);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition: all .15s ease; z-index:50;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dropdown a{ display:block; padding:10px 12px; border-radius:7px; font-size:0.88rem; white-space:nowrap; color:var(--text-1); }
.nav-dropdown a:hover{ background: rgba(38,148,217,0.1); color:var(--blue-bright); }

.nav-cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-toggle{ display:none; background:none; border:1px solid var(--panel-border-strong); border-radius:8px; padding:8px 10px; color:var(--text-0); }
.nav-mobile-login{ display:none; }

@media (max-width: 640px){
  .nav-inner{ padding: 14px 16px 12px; }
  .brand-tag{ display:none; }
  .nav-cta{ gap: 8px; }
  .nav-cta .btn-sm{ padding: 9px 14px; font-size: 0.82rem; }
}

@media (max-width: 1100px){
  .nav-links{
    position:fixed; top: 68px; right:0; bottom:0; left:0; background: var(--bg-0); flex-direction:column;
    align-items:stretch; justify-content:flex-start; padding: 18px; gap:4px; display:none; overflow-y:auto;
    border-top:1px solid var(--panel-border);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding: 14px 12px; font-size:1.02rem; border-bottom:1px solid var(--panel-border); border-radius:0; }
  .nav-toggle{ display:inline-flex; }
  .nav-client-login{ display:none; }
  .nav-mobile-login{
    display:block; padding:14px 12px; font-size:1.02rem; font-weight:600;
    color:var(--blue-bright); border-bottom:1px solid var(--panel-border);
  }

  /* No hover on touch — the dropdown just sits inline under Home, indented
     and dimmer to read as a sub-item rather than a peer nav link. */
  .nav-dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:none; box-shadow:none; margin:0; padding:0;
  }
  .nav-dropdown a{
    padding:12px 12px 12px 28px; font-size:0.92rem; color:var(--text-2);
    border-bottom:1px solid var(--panel-border); border-radius:0;
  }
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height: max(92vh, 800px); display:flex; flex-direction:column; align-items:stretch; justify-content:center; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; object-position: 15% 50%; }
/* Sonar-style pulse rings, anchored near the sensor cluster on the pipe.
   Hidden until the video ends (main.js adds .active on the 'ended' event)
   so it reads as the sensors "still listening" once the footage settles
   on its last frame, rather than competing with the video while it plays. */
.hero-pulse{
  position:absolute; left:65%; top:52%; width:0; height:0; z-index:1; pointer-events:none;
  opacity:0; transition: opacity .8s ease;
}
.hero-pulse.active{ opacity:1; }
.hero-pulse span{
  position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; border:1.5px solid var(--blue-bright);
  animation: heroPulseRing 2.8s ease-out infinite;
  animation-play-state: paused;
}
.hero-pulse.active span{ animation-play-state: running; }
.hero-pulse span:nth-child(2){ animation-delay: 0.9s; }
.hero-pulse span:nth-child(3){ animation-delay: 1.8s; }
@keyframes heroPulseRing{
  0%{ width:14px; height:14px; margin:-7px 0 0 -7px; opacity:0.85; border-width:2px; }
  100%{ width:200px; height:200px; margin:-100px 0 0 -100px; opacity:0; border-width:0.5px; }
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,11,20,0.1) 0%, rgba(6,11,20,0.05) 40%, rgba(6,11,20,0.55) 82%, var(--bg-0) 100%),
    linear-gradient(100deg, rgba(6,11,20,0.02) 0%, rgba(6,11,20,0.05) 46%, rgba(6,11,20,0.5) 66%, rgba(6,11,20,0.68) 100%);
}
/* Keeps the video's own "water detected" HUD callout (left-of-center, roughly
   12–43% width / 23–52% height) clear of the text panel and any darkening. */
/* Absolutely positioned (rather than centered via the outer .hero flexbox)
   so it can be centered specifically in the zone between the nav and the
   stats bar — centering it against the hero's full height instead visually
   biased the panel too low, since that full height includes the stats bar's
   own space at the bottom. */
.hero-content{
  position:absolute; z-index:2; top:88px; right:0; bottom:160px; left:0;
  max-width: var(--container); margin:0 auto; padding: 0 32px;
  width:100%; display:flex; align-items:center; justify-content:flex-start;
}
.hero-panel{
  width:100%; max-width: 460px;
  background: linear-gradient(160deg, rgba(7,13,24,0.7), rgba(7,13,24,0.5));
  border: 1px solid rgba(38,148,217,0.3);
  border-radius: 20px;
  padding: 38px 40px;
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(38,148,217,0.05);
  /* Held hidden until the hero video finishes playing (see main.js) — kept
     off screen at load so the video plays through unobstructed, then the
     panel fades and slides in from the left once it ends. */
  opacity:0; transform: translateX(-40px); pointer-events:none;
  transition: opacity 1.1s ease, transform 1.1s ease, max-width .5s ease, padding .5s ease;
}
.hero-panel.visible{ opacity:1; transform:none; pointer-events:auto; }
.hero-panel h1{ font-size: clamp(2.1rem, 3vw, 2.9rem); max-width:none; }
.hero-panel .hero-sub{ max-width:none; font-size:1.05rem; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 10px;
  border:1px solid rgba(38,148,217,0.35); border-radius:999px; background: rgba(38,148,217,0.1);
  font-size:0.82rem; font-weight:600; color: var(--blue-bright); margin-bottom:26px;
}
.pulse-dot{ width:7px; height:7px; border-radius:50%; background: var(--green-bright); box-shadow:0 0 0 0 rgba(140,193,91,0.6); animation: pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(140,193,91,0.55); }
  70%{ box-shadow: 0 0 0 10px rgba(140,193,91,0); }
  100%{ box-shadow: 0 0 0 0 rgba(140,193,91,0); }
}
.hero h1{ max-width: 850px; }
.hero-sub{ max-width: 620px; margin-top: 22px; font-size:1.2rem; color: var(--text-1); }
.hero .btn-row{ margin-top: 40px; }

.hero-stats{
  position:absolute; left:0; right:0; bottom:0; z-index:2; border-top: 1px solid var(--panel-border);
  background: linear-gradient(180deg, transparent, rgba(6,11,20,0.75));
  opacity:0; transform: translateY(8px); transition: opacity 1s ease, transform 1s ease;
}
.hero-stats.visible{ opacity:1; transform:none; }
.hero-stats .container{ display:grid; grid-template-columns: repeat(4,1fr); gap: 0; padding-top:28px; padding-bottom:28px; }
.hero-stat{ padding: 0 28px; border-left: 1px solid var(--panel-border); }
.hero-stat:first-child{ border-left:none; padding-left:0; }
.hero-stat .num{ font-size:1.9rem; font-weight:800; color:var(--text-0); font-family:var(--font-mono); letter-spacing:-0.02em; }
.hero-stat .num span{ color: var(--blue); }
.hero-stat .label{ font-size:0.82rem; color:var(--text-2); margin-top:4px; }

@media (max-width: 860px){
  .hero{ min-height: 0; }
  .hero-media video, .hero-media img{ object-position: 50% 50%; }
  /* The panel goes full-width and stacks over nearly the whole video at this
     size, so there's no clear patch of pipe left to anchor the pulse rings. */
  .hero-pulse{ display:none; }
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(6,11,20,0.35) 0%, rgba(6,11,20,0.4) 45%, rgba(6,11,20,0.75) 85%, var(--bg-0) 100%);
  }
  .hero-content{
    position:static; inset:auto; padding: 132px 20px 40px;
    align-items:stretch; justify-content:flex-start;
  }
  .hero-panel{
    max-width:none; padding: 14px 24px 28px;
  }
  .hero-panel h1{ font-size: clamp(2rem, 7vw, 2.6rem); }
  .hero-stats{ position:static; }
  .hero-stats .container{ grid-template-columns: repeat(2,1fr); gap: 20px 24px; }
  .hero-stat{ border-left:none; padding-left:0; }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ position:relative; padding: 150px 0 76px; overflow:hidden; border-bottom:1px solid var(--panel-border); background: var(--bg-1); }
.page-hero .container{ position:relative; z-index:1; }

/* Oversized vertically (-20%/-20%) so the JS scroll parallax in main.js can
   translate it without ever exposing an edge; the grid/rings overlays stay
   layered on top of it (DOM order, not z-index — see markup). */
.hero-bg-image{
  position:absolute; inset:-20% 0; z-index:0;
  background-size: cover; background-position: center 45%;
  will-change: transform;
}
/* Video variant — same oversized/parallax wrapper, but a <video> child
   fills it instead of a CSS background-image. */
.hero-bg-image.hero-bg-video video{
  width:100%; height:100%; object-fit:cover; object-position:center 45%;
}
.hero-bg-image::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(9,15,27,0.72) 0%, rgba(9,15,27,0.55) 45%, var(--bg-1) 100%),
    linear-gradient(90deg, rgba(6,11,20,0.75) 0%, rgba(6,11,20,0.15) 45%, rgba(6,11,20,0.55) 100%);
}
.page-hero h1{ max-width: 780px; }
.page-hero .lede{ max-width: 640px; margin-top:18px; }
.crumb{ font-size:0.82rem; color:var(--text-3); margin-bottom:18px; letter-spacing:0.02em; }

/* Flush-right variant — pushes the hero copy to the right edge so more of
   the background photo's interesting detail (left-weighted, on the pages
   that use this) reads clearly instead of sitting under the text block.
   text-align handles inline content (crumb, eyebrow) automatically since
   they're inline-level; h1/.lede need margin-left:auto since a max-width
   block doesn't move on its own. The scrim's horizontal gradient flips too,
   so the shading still darkens under the text instead of the photo. */
.page-hero.align-right .container{ text-align:right; }
.page-hero.align-right h1,
.page-hero.align-right .lede{ margin-left:auto; margin-right:0; }
.page-hero.align-right .hero-bg-image::after{
  background:
    linear-gradient(180deg, rgba(9,15,27,0.72) 0%, rgba(9,15,27,0.55) 45%, var(--bg-1) 100%),
    linear-gradient(270deg, rgba(6,11,20,0.75) 0%, rgba(6,11,20,0.15) 45%, rgba(6,11,20,0.55) 100%);
}
@media (max-width: 760px){
  .page-hero.align-right .container{ text-align:left; }
  .page-hero.align-right h1,
  .page-hero.align-right .lede{ margin-left:0; }
  .page-hero.align-right .hero-bg-image::after{
    background:
      linear-gradient(180deg, rgba(9,15,27,0.72) 0%, rgba(9,15,27,0.55) 45%, var(--bg-1) 100%),
      linear-gradient(90deg, rgba(6,11,20,0.75) 0%, rgba(6,11,20,0.15) 45%, rgba(6,11,20,0.55) 100%);
  }
}
.crumb a:hover{ color:var(--blue); }

/* ---------- Cards / Grids ---------- */
.grid{ display:grid; gap: 22px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3{ grid-template-columns: repeat(2,1fr);} .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--panel);
  border: 1px solid var(--panel-border); border-radius: 3px;
  padding: 32px 30px 34px; position:relative; overflow:hidden;
  transition: border-color .25s ease, background .25s ease;
}
/* Survey-marker corner bracket + a trace that draws along the bottom on hover —
   reads as an inspection/scan target rather than a generic rounded tile. */
.card::before{
  content:""; position:absolute; top:-1px; left:-1px; width:22px; height:22px; pointer-events:none;
  border-top:2px solid var(--blue-bright); border-left:2px solid var(--blue-bright);
  transition: width .3s ease, height .3s ease;
}
.card::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; pointer-events:none;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transform: scaleX(0); transform-origin:left; transition: transform .4s ease;
}
.card:hover{ border-color: var(--panel-border-strong); }
.card:hover::before{ width:44px; height:44px; }
.card:hover::after{ transform: scaleX(1); }
.card .icon{
  display:block; width:auto; height:auto; background:none; border-radius:0;
  color: var(--blue-bright); margin-bottom:18px;
}
.card .icon svg{ width:28px; height:28px; stroke-width:1.5; }
.card h3{ margin-bottom:10px; }
.card p{ color: var(--text-2); font-size:0.96rem; }
.card.dark{ background: #0a1321; }
.card.accent{ border-color: rgba(38,148,217,0.35); background: rgba(38,148,217,0.07); }

/* ---------- Certification seal ---------- */
.card.cert{ text-align:center; }
.cert-badge{
  width:76px; height:76px; border-radius:50%; margin: 0 auto 22px; position:relative;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 32% 28%, rgba(38,148,217,0.22), rgba(38,148,217,0.04) 70%);
  border: 2px solid rgba(38,148,217,0.4);
}
.cert-badge::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border: 1px dashed rgba(38,148,217,0.3);
}
.cert-badge svg{ width:30px; height:30px; color: var(--blue-bright); }
.card.cert .pill{ margin-bottom:4px; }

.pill{
  display:inline-block; padding: 4px 11px; border-radius:999px; font-size:0.72rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; background: rgba(38,148,217,0.12); color: var(--blue-bright);
  border: 1px solid rgba(38,148,217,0.25);
}
.pill.amber{ background: rgba(245,165,36,0.12); color: var(--amber); border-color: rgba(245,165,36,0.3); }
.pill.muted{ background: rgba(148,178,214,0.08); color: var(--text-2); border-color: var(--panel-border); }
.pipeline-tag{
  display:inline-block; padding: 9px 16px; border-radius:999px; font-size:0.88rem; font-weight:600;
  background: rgba(255,255,255,0.04); color: var(--text-0); border: 1px solid var(--panel-border-strong);
}

/* ---------- Numbered steps ---------- */
.steps{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; }
@media (max-width:980px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns: 1fr; } }
.steps{ gap:0; }
.step{ background:none; border:0; border-radius:0; padding:34px 28px 8px 0; position:relative; }
/* A continuous signal trace across the top with a diamond node per layer. */
.step::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background: var(--panel-border-strong); }
.step::after{ content:""; position:absolute; top:-4px; left:0; width:9px; height:9px; background: var(--blue-bright); transform: rotate(45deg); }
.step .step-num{ font-family: var(--font-mono); color: var(--blue); font-size:0.85rem; font-weight:700; margin-bottom:14px; }
.step h4{ font-size:1.12rem; margin-bottom:10px; color:var(--text-0); }
.step p{ font-size:0.93rem; color:var(--text-2); }

/* ---------- Process flow (linear, arrow-connected — services.html workflow) ---------- */
.process-flow{ display:flex; align-items:stretch; gap:10px; }
.process-step{
  flex:1; background: var(--panel); border:1px solid var(--panel-border);
  border-radius: 3px; padding:28px 22px 26px; position:relative;
}
.process-step::before{
  content:""; position:absolute; top:-1px; left:-1px; width:22px; height:22px;
  border-top:2px solid var(--blue-bright); border-left:2px solid var(--blue-bright);
}
.process-step h4{ font-size:1rem; margin-bottom:8px; color:var(--text-0); }
.process-step p{ font-size:0.86rem; color:var(--text-2); }
.process-arrow{ display:flex; align-items:center; flex-shrink:0; color: var(--blue); opacity:0.7; }
.process-arrow svg{ width:20px; height:20px; }
@media (max-width:860px){
  .process-flow{ flex-direction:column; }
  .process-arrow{ justify-content:center; padding:0; align-self:center; }
  .process-arrow svg{ transform:rotate(90deg); }
}

/* ---------- Compare panel (before/after) ---------- */
.compare{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:stretch; }
@media (max-width:820px){ .compare{ grid-template-columns:1fr; } }
.compare-col{ border-radius: 3px; padding: 30px; border:1px solid var(--panel-border); }
.compare-col.old{ background: rgba(148,178,214,0.03); }
.compare-col.new{ background: linear-gradient(160deg, rgba(38,148,217,0.09), rgba(15,26,46,0.5)); border-color: rgba(38,148,217,0.3); }
.compare-label{ font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; margin-bottom:18px; color:var(--text-3); }
.compare-col.new .compare-label{ color: var(--blue-bright); }
.compare-list li{ display:flex; align-items:flex-start; gap:12px; padding: 11px 0; border-bottom:1px solid var(--panel-border); font-size:0.94rem; color:var(--text-1); }
.compare-list li:last-child{ border-bottom:none; }
.compare-list svg{ flex-shrink:0; margin-top:2px; }

/* ---------- Stat band ---------- */
.stat-band{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center; }
@media (max-width:860px){ .stat-band{ grid-template-columns:repeat(2,1fr); } }
.stat-band .stat .num{ font-family: var(--font-mono); font-size: clamp(1.9rem,3vw,2.7rem); font-weight:800; color: var(--text-0); }
.stat-band .stat .num span{ color:var(--blue); }
.stat-band .stat .label{ color:var(--text-2); font-size:0.9rem; margin-top:6px; }

/* ---------- Timeline (about/history) ---------- */
.timeline{ position:relative; padding-left: 34px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background: linear-gradient(var(--blue), transparent 92%); }
.tl-item{ position:relative; padding-bottom:44px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:""; position:absolute; left:-34px; top:4px; width:13px; height:13px; border-radius:50%; background: var(--bg-0); border:2px solid var(--blue); }
.tl-year{ font-family: var(--font-mono); color: var(--blue-bright); font-weight:700; font-size:0.95rem; margin-bottom:6px; }
.tl-item h4{ margin-bottom:6px; }
.tl-item p{ color: var(--text-2); font-size:0.95rem; max-width:560px; }

/* ---------- Role list (careers) ---------- */
.role-list{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }
.role-list li{ font-size:0.92rem; color:var(--text-1); padding-left:16px; position:relative; }
.role-list li::before{ content:"\2013"; position:absolute; left:0; color:var(--blue); }

/* ---------- Chart card (suspended-solids monitoring graph) ---------- */
.chart-card{
  background: linear-gradient(160deg, var(--panel), rgba(15,26,46,0.6));
  border:1px solid var(--panel-border); border-radius: var(--radius-lg); padding: 24px 24px 20px;
}
.chart-card-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.chart-legend{ display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--text-2); }
.chart-swatch{ width:10px; height:10px; border-radius:50%; background: var(--blue); flex-shrink:0; }
.chart-svg{ width:100%; height:auto; overflow:visible; }
.chart-grid{ stroke: var(--panel-border); stroke-width:1; }
.chart-axis{ stroke: var(--panel-border-strong); }
.chart-tick{ font-family: var(--font-mono); font-size:11px; fill: var(--text-3); }
.chart-threshold{ stroke: var(--amber); stroke-width:1.5; stroke-dasharray:5 4; }
.chart-threshold-label{ font-family: var(--font-mono); font-size:11px; fill: var(--amber-strong); }
.chart-area{ fill: var(--blue); opacity:0.12; }
.chart-line{ fill:none; stroke: var(--blue); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.chart-alert-dot{ fill: var(--amber); stroke: var(--panel); stroke-width:3; }
.chart-point-label{ font-size:11px; font-weight:600; fill: var(--amber-strong); }
.chart-caption{ font-size:0.82rem; color: var(--text-3); margin-top:14px; }
.section-light .chart-card{ background: #ffffff; }

/* ---------- Media frame ---------- */
.media-frame{
  border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--panel-border);
  position:relative; background: var(--bg-2);
}
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-caption{
  position:absolute; left:0; right:0; bottom:0; padding: 64px 22px 18px;
  background: linear-gradient(0deg,
    rgba(3,6,12,0.97) 0%, rgba(3,6,12,0.94) 38%, rgba(3,6,12,0.72) 66%, rgba(3,6,12,0.32) 86%, transparent 100%);
  font-size:0.88rem; line-height:1.45; color:#e6ecf5;
  text-shadow: 0 1px 3px rgba(0,0,0,0.75);
}
.media-caption strong{ color:#ffffff; }

/* ---------- Field photo frame (layered depth + badge treatment) ---------- */
.field-photo-frame{ position:relative; }
.field-photo-frame::before{
  content:""; position:absolute; inset:18px -18px -18px 18px; z-index:-1;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(245,165,36,0.16), rgba(245,165,36,0.03));
  border:1px solid rgba(245,165,36,0.35);
}
.field-photo-frame .media-frame{ box-shadow: 0 34px 70px -28px rgba(23,34,49,0.35); }
.field-photo-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding: 7px 13px; border-radius:999px; font-size:0.76rem; font-weight:700;
  letter-spacing:0.04em; color:#fff; background: rgba(4,8,15,0.55); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,0.18);
}
.field-photo-caption{ font-size:0.86rem; color: var(--text-2); margin-top:18px; max-width:440px; }
.field-photo-caption strong{ color: var(--text-0); }
.field-pullquote{
  border-left:3px solid var(--amber); padding:2px 0 2px 20px; margin-top:28px;
  font-size:1.1rem; font-weight:600; color: var(--text-0);
}

/* ---------- Logo strip ---------- */
.logo-strip{ display:flex; flex-wrap:wrap; gap: 14px; align-items:center; }
.logo-chip{
  padding: 10px 18px; border:1px solid var(--panel-border); border-radius:10px;
  font-size:0.85rem; font-weight:600; color: var(--text-2); background: rgba(255,255,255,0.02);
}

/* ---------- Quote / callout ---------- */
.callout{
  border-left: 3px solid var(--blue); padding: 4px 0 4px 24px; font-size:1.15rem; color: var(--text-0);
  font-weight:500; line-height:1.5;
}

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; gap:36px; } }
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
/* Gives one column more room than the other — only above the 900px point
   where .split still renders two columns, so it never fights the mobile
   single-column override above (which would otherwise lose to this rule's
   higher specificity if set inline instead). */
@media (min-width: 901px){ .split-media-wide{ grid-template-columns: 1.3fr 1fr; gap:48px; } }

/* ---------- Tables ---------- */
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--panel-border-strong); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--panel), rgba(15,26,46,0.65));
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
}
table{ width:100%; border-collapse:collapse; font-size:0.9rem; min-width:560px; }
th{
  text-align:left; padding:16px 20px; color: var(--blue-bright); font-weight:700; font-size:0.78rem;
  text-transform:uppercase; letter-spacing:0.07em;
  background: rgba(38,148,217,0.09); border-bottom:1px solid var(--panel-border-strong);
  white-space:nowrap;
}
td{ padding:16px 20px; border-bottom:1px solid var(--panel-border); color: var(--text-1); }
tr:last-child td{ border-bottom:none; }
tbody tr:nth-child(even) td{ background: rgba(255,255,255,0.025); }
tbody tr:hover td{ background: rgba(38,148,217,0.09); }
td:first-child{ color: var(--text-0); font-weight:600; }
.section-light .table-wrap{
  background: linear-gradient(160deg, #ffffff, rgba(205,220,235,0.5));
  box-shadow: 0 24px 50px -28px rgba(23,34,49,0.25);
}
.section-light th{ background: rgba(38,148,217,0.07); }
.section-light tbody tr:nth-child(even) td{ background: rgba(23,34,49,0.03); }
.section-light tbody tr:hover td{ background: rgba(38,148,217,0.06); }

/* Horizontal-scroll hint: nudges any overflowing table left then back once
   it scrolls into view, so touch users on mobile see it's swipeable rather
   than assuming the last column is cut off. See main.js. */
.table-wrap{ scroll-behavior:smooth; }

/* ---------- Footer ---------- */
footer{ background: var(--bg-1); border-top:1px solid var(--panel-border); padding: 64px 0 0; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-col h5{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ color:var(--text-2); font-size:0.92rem; }
.footer-col a:hover{ color: var(--blue-bright); }
.footer-about p{ color:var(--text-2); font-size:0.92rem; max-width:320px; margin-top:14px; }
.footer-usa-badge{ height:46px; width:auto; margin-top:20px; border-radius:6px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--panel-border); font-size:0.8rem; color:var(--text-3); flex-wrap:wrap; gap:12px; }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius: var(--radius-lg); padding: 64px; text-align:center;
  background: radial-gradient(120% 160% at 50% -20%, rgba(38,148,217,0.16), transparent 60%), linear-gradient(160deg, var(--bg-3), var(--bg-2));
  border: 1px solid rgba(38,148,217,0.25); position:relative; overflow:hidden;
}
.cta-band h2{ max-width:620px; margin:0 auto 16px; }
.cta-band p{ max-width:520px; margin:0 auto; color:var(--text-1); }
.cta-band .btn-row{ justify-content:center; margin-top:32px; }
/* Like .card.dark — cta-band always keeps its own dark, rich background
   regardless of section theme, so it needs to keep light text even when
   nested in a .section-light (which would otherwise darken --text-* for
   everything under it and make the copy unreadable on this dark card). */
.section-light .cta-band{
  --text-0: #f3f6fb; --text-1: #c3d0e3; --text-2: #8ea0bb;
  --blue: #2694d9; --blue-bright: #4fb2ea; --green: #8cc15b;
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Waveform decorative ---------- */
.waveform{ display:flex; align-items:flex-end; gap:3px; height:36px; }
.waveform span{ width:3px; background: var(--blue); border-radius:2px; opacity:0.55; animation: wf 1.4s ease-in-out infinite; }
@keyframes wf{ 0%,100%{ transform: scaleY(0.3);} 50%{ transform: scaleY(1);} }
.waveform-lg{ height:72px; gap:5px; }
.waveform-lg span{ width:5px; opacity:0.8; background: linear-gradient(180deg, var(--blue-bright), var(--blue)); }

/* ---------- Signal flow diagram (AI engine inputs/outputs) ---------- */
.signal-flow{
  display:grid; grid-template-columns: 1fr; gap:28px;
}
.signal-flow-engine{
  order:-1;
  text-align:center; padding: 40px 28px;
  border-radius: var(--radius-lg); position:relative; overflow:hidden;
  background: linear-gradient(160deg, rgba(38,148,217,0.14), rgba(15,26,46,0.8));
  border: 1px solid rgba(38,148,217,0.4);
  box-shadow: 0 0 0 1px rgba(38,148,217,0.08), 0 30px 70px -30px rgba(38,148,217,0.45);
  /* Always a dark card regardless of section theme — pin light text colors
     rather than inherit .section-light's dark ones, which would be
     illegible against this background. */
  --text-0: #f3f6fb; --text-1: #c3d0e3; --text-2: #8ea0bb;
}
.signal-flow-engine::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(60% 80% at 50% 0%, rgba(38,148,217,0.25), transparent 70%);
}
.signal-flow-engine > *{ position:relative; z-index:1; }
.signal-flow-engine h3{ font-size:1.3rem; margin-top:18px; }
.signal-flow-label{
  font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--blue-bright); margin-bottom:14px; text-align:center;
}
.signal-flow-chips{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.signal-chip{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:16px 14px; min-height:64px; border-radius: var(--radius-md);
  font-weight:600; font-size:0.86rem; color: var(--text-0);
  background: rgba(255,255,255,0.03); border:1px solid var(--panel-border-strong);
}
.section-light .signal-chip{ background:#fff; }
@media (min-width: 860px){
  .signal-flow{ grid-template-columns: 1fr 1.15fr 1fr; align-items:center; }
  .signal-flow-engine{ order:2; }
  .signal-flow-group:first-of-type{ order:1; }
  .signal-flow-group:last-of-type{ order:3; }
  .signal-flow-chips{ grid-template-columns: 1fr; }
  .signal-chip{ justify-content:flex-start; text-align:left; }
}

/* ---------- Contact form ---------- */
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:0.82rem; color:var(--text-2); margin-bottom:7px; font-weight:600; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 13px 16px; border-radius:10px; border:1px solid var(--panel-border-strong);
  background: var(--bg-1); color: var(--text-0); font-family:inherit; font-size:0.95rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color: var(--blue); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* ---------- CTA modal (Request a Consult / Talk to an Engineer) ---------- */
body.modal-open{ overflow:hidden; }
.modal-overlay{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
  background: rgba(4,8,15,0.7); backdrop-filter: blur(10px) saturate(140%);
  opacity:0; transition: opacity .22s ease;
}
.modal-overlay.open{ display:flex; }
.modal-overlay.show{ opacity:1; }
.modal-panel{
  width:100%; max-width:540px; max-height:88vh; overflow-y:auto; position:relative;
  background: linear-gradient(160deg, var(--panel), rgba(15,26,46,0.92));
  border:1px solid var(--panel-border-strong); border-radius: var(--radius-lg);
  padding:40px; box-shadow: 0 50px 120px -24px rgba(0,0,0,0.75);
  transform: translateY(18px) scale(0.98); transition: transform .25s ease;
}
.modal-overlay.show .modal-panel{ transform:none; }
.modal-close{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,0.04); border:1px solid var(--panel-border-strong); color:var(--text-1);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.modal-close:hover{ color:var(--blue-bright); border-color:var(--blue); background: rgba(38,148,217,0.08); }
.modal-title{ font-size:1.4rem; padding-right:36px; }
.modal-sub{ color:var(--text-2); font-size:0.92rem; margin-top:8px; margin-bottom:26px; }
.modal-full-link{ display:block; text-align:center; margin-top:18px; font-size:0.85rem; color:var(--text-3); }
.modal-full-link:hover{ color: var(--blue-bright); }
@media (max-width:560px){ .modal-panel{ padding:28px 22px; } }

.map-pin{ display:flex; gap:14px; padding:22px 0; border-bottom:1px solid var(--panel-border); }
.map-pin:last-child{ border-bottom:none; }
.map-pin .icon{ width:40px;height:40px;border-radius:10px;background:rgba(38,148,217,0.1);color:var(--blue-bright);display:flex;align-items:center;justify-content:center;flex-shrink:0; }

/* ---------- Video gallery ---------- */
.video-featured{ display:grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items:center; }
@media (max-width: 900px){ .video-featured{ grid-template-columns: 1fr; gap:28px; } }

.video-thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius: var(--radius-lg);
  background: var(--bg-2); cursor:pointer;
}
.video-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.video-thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 45%, rgba(4,8,15,0.78) 100%);
}
.video-card:hover .video-thumb img, .video-featured:hover .video-thumb img{ transform: scale(1.06); }

.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:64px; height:64px; border-radius:50%;
  background: var(--blue);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px -10px rgba(38,148,217,0.55);
  transition: transform .25s ease, box-shadow .25s ease, background .2s ease;
}
.video-play svg{ margin-left:3px; width:22px; height:22px; }
.video-card:hover .video-play, .video-featured:hover .video-play{
  background: var(--blue-bright); transform: translate(-50%,-50%) scale(1.1);
  box-shadow: 0 16px 34px -10px rgba(38,148,217,0.65);
}

.video-duration{
  position:absolute; right:12px; bottom:12px; z-index:2;
  background: rgba(4,8,15,0.85); color:#fff; font-family: var(--font-mono);
  font-size:0.74rem; font-weight:700; letter-spacing:0.02em;
  padding:4px 9px; border-radius:6px;
}

.video-featured .video-thumb{
  border: 1px solid rgba(38,148,217,0.3); box-shadow: var(--shadow-glow);
}
.video-featured .video-play{ width:88px; height:88px; }
.video-featured .video-play svg{ width:28px; height:28px; }

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

.video-card{
  border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--panel-border);
  background: var(--panel); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.video-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-glow); border-color: var(--panel-border-strong); }
.video-card .video-thumb{ border-radius:0; aspect-ratio:16/9; }
.video-card .video-meta{ padding: 20px 22px; }
.video-card h3{ font-size:1.02rem; margin-bottom:6px; }
.video-card .views{ font-size:0.82rem; color: var(--text-2); }

/* Modal video player — lazy iframe, injected on open, cleared on close so
   playback actually stops rather than continuing muted offscreen. */
.video-modal-panel{
  width:100%; max-width:960px; padding:0; overflow:hidden; background:#000;
  border:1px solid rgba(38,148,217,0.3); border-radius: var(--radius-lg);
}
.video-embed-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.video-embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-modal-panel .modal-close{ top:14px; right:14px; background: rgba(4,8,15,0.7); z-index:3; }

/* Utility */
.mt-8{ margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.text-center{ text-align:center; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }

/* ==========================================================================
   Color system v2 — breaks the all-blue look. Four accent hues (blue, green,
   amber, coral) cycle through cards / steps / stats / timeline nodes; each
   page gets one "page accent" (body[data-accent]) that tints its hero, its
   highlighted headline words and the rule under its hero. Dark and light
   sections also rotate their ambient tint so no two neighbours match.
   ========================================================================== */
:root{
  --coral:#f0705a; --teal:#2cc4b6; --violet:#9a8cf2;
  --pa-b:#4fb2ea; --pa-d:#0c6fa8;
}
.section-light{ --coral:#c2432a; --teal:#0e7f7a; --violet:#5f4fc9; }
body{ --pa: var(--pa-b); }
.section-light{ --pa: var(--pa-d); }
body[data-accent="blue"]{   --pa-b:#4fb2ea; --pa-d:#0c6fa8; }
body[data-accent="green"]{  --pa-b:#a8d47e; --pa-d:#4a7029; }
body[data-accent="amber"]{  --pa-b:#f5a524; --pa-d:#a5620a; }
body[data-accent="coral"]{  --pa-b:#f0705a; --pa-d:#c2432a; }
body[data-accent="teal"]{   --pa-b:#2cc4b6; --pa-d:#0e7f7a; }
body[data-accent="violet"]{ --pa-b:#9a8cf2; --pa-d:#5f4fc9; }

/* accent cycle */
.card, .step, .process-step, .stat, .tl-item{ --accent: var(--blue-bright); }
:is(.card,.step,.process-step,.stat,.tl-item):nth-child(4n+2){ --accent: var(--green-bright); }
:is(.card,.step,.process-step,.stat,.tl-item):nth-child(4n+3){ --accent: var(--amber); }
:is(.card,.step,.process-step,.stat,.tl-item):nth-child(4n+4){ --accent: var(--coral); }
.process-flow .process-step:nth-of-type(n){ --accent: var(--blue-bright); }
.process-flow .process-step:nth-of-type(4n+2){ --accent: var(--green-bright); }
.process-flow .process-step:nth-of-type(4n+3){ --accent: var(--amber); }
.process-flow .process-step:nth-of-type(4n+4){ --accent: var(--coral); }

/* cards: tinted corner glow, accent bracket/icon/trace, ghost watermark icon */
.card{
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 17%, transparent), transparent 58%),
    var(--panel);
}
.card.dark{ background-color:#0a1321; }
.card.accent{ background-color: rgba(38,148,217,0.07); }
.section-light .card{ background-color:#fff; }
.section-light .card.accent{ background-color: rgba(12,111,137,0.07); }
.card::before, .process-step::before{ border-top-color: var(--accent); border-left-color: var(--accent); }
.card::after{ background: linear-gradient(90deg, var(--accent), transparent); }
.card .icon{ color: var(--accent); }
.card .pill{
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.card:hover{ border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.card-ghost{
  position:absolute; right:-16px; bottom:-20px; width:132px; height:132px; pointer-events:none;
  color: var(--accent); opacity:0.085; transform: rotate(-10deg);
  transition: opacity .4s ease, transform .5s ease;
}
.card-ghost svg{ width:100%; height:100%; stroke-width:1; }
.card:hover .card-ghost{ opacity:0.17; transform: rotate(-3deg) scale(1.07); }

/* steps / stats / timeline pick up the cycle */
.step::after{ background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.step h4{ color: var(--text-0); }
.stat-band .stat .num span{ color: var(--accent); }
.tl-item::before{ border-color: var(--accent); }
.process-arrow{ color: var(--text-2); }

/* section ambience: dark sections get a rotating coloured glow, light sections a rotating tint */
section.section:not(.section-light)::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
}
section.section:not(.section-light):nth-of-type(3n+1)::before{ background: radial-gradient(ellipse 55% 60% at 100% 0%, rgba(140,193,91,0.12), transparent 70%); }
section.section:not(.section-light):nth-of-type(3n+2)::before{ background: radial-gradient(ellipse 55% 60% at 0% 100%, rgba(245,165,36,0.11), transparent 70%); }
section.section:not(.section-light):nth-of-type(3n)::before{ background: radial-gradient(ellipse 55% 60% at 100% 100%, rgba(240,112,90,0.10), transparent 70%); }
section.section-light:nth-of-type(3n+1){ --bg-light:#eef3f8; --bg-light-2:#dce6f0; }
section.section-light:nth-of-type(3n+2){ --bg-light:#eef6ee; --bg-light-2:#dbeadb; }
section.section-light:nth-of-type(3n){   --bg-light:#e9f5f6; --bg-light-2:#d3e9ec; }

/* signature colour-chip bar at the top-left of every section */
section.section::after{
  content:""; position:absolute; top:0; left:max(32px, calc(50% - 588px)); width:96px; height:4px; z-index:2; pointer-events:none;
  background: linear-gradient(90deg, #2694d9 0 25%, #8cc15b 25% 50%, #f5a524 50% 75%, #f0705a 75% 100%);
}

/* per-page accent: hero tint, highlighted words, rule under the hero */
.hero .gradient-text, .page-hero .gradient-text{ color: var(--pa); }
.section .gradient-text{ color: var(--hl, var(--blue)); }
section.section:nth-of-type(3n+1){ --hl: var(--green-bright); }
section.section:nth-of-type(3n+2){ --hl: var(--amber); }
section.section:nth-of-type(3n){   --hl: var(--coral); }
.page-hero{ border-bottom: 3px solid var(--pa-b); }
.page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pa-b) 20%, transparent), transparent 55%);
}
.eyebrow{ color: var(--pa); }

/* ---------- Heading typeface (all heads except the hero h1) ----------
   Garamond has a small x-height, so sizes are bumped up to match the optical
   size of the sans they replace. */
:root{ --font-head: "EB Garamond", Garamond, "Times New Roman", serif; }
h2, h3, h4{ font-family: var(--font-head); font-weight:700; letter-spacing:-0.005em; }
h2{ font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height:1.1; }
h3{ font-size: 1.6rem; line-height:1.2; }
h4{ font-size: 1.3rem; line-height:1.25; }
.step h4{ font-size:1.4rem; }
.process-step h4{ font-size:1.3rem; }
.card h3{ font-size:1.5rem; }
.cta-band h2{ font-size: clamp(2rem, 3.4vw, 2.8rem); }
.signal-flow-engine h3{ font-size:1.6rem; }
.video-card h3{ font-size:1.25rem; }

/* ---------- "Two futures" graphic (home: react vs. predict) ---------- */
.futures-svg{ width:100%; height:auto; display:block; overflow:visible; }
.f-axis{ font-family: var(--font-mono); font-size:13px; letter-spacing:0.14em; fill: var(--text-3); }
.f-small{ font-size:14px; fill: var(--text-2); }
.f-label{ font-size:17px; font-weight:700; fill: var(--text-0); }
.f-lane{ font-family: var(--font-mono); font-size:12px; letter-spacing:0.14em; fill: var(--text-3); }
.f-lane-green{ fill: var(--green-bright); }
.f-green{ fill: var(--green-bright); } .f-coral{ fill: var(--coral); } .f-amber{ fill: var(--amber); } .f-text{ fill: var(--text-1); }
.f-threshold{ stroke: var(--amber); stroke-width:1.5; stroke-dasharray:6 6; opacity:.8; }
.f-line{ fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; }
.f-shared{ stroke: var(--blue-bright); }
.f-bad{ stroke: var(--coral); }
.f-bad-after{ stroke: var(--coral); stroke-width:3; opacity:.75; }
.f-good{ stroke: var(--green-bright); stroke-width:5; }
.f-flag{ fill: var(--green-bright); } .f-flag-pole{ stroke: var(--green-bright); stroke-width:2; }
.f-node{ stroke-width:3; } .f-node-green{ fill: var(--bg-0); stroke: var(--green-bright); }
.f-pulse{ fill:none; stroke: var(--green-bright); stroke-width:2; transform-box: fill-box; transform-origin:center; animation: f-pulse 2.2s ease-out infinite; }
@keyframes f-pulse{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(3.2); opacity:0; } }
.f-guide{ stroke: var(--text-3); stroke-width:1; stroke-dasharray:3 4; }
.f-dim{ stroke: var(--text-1); stroke-width:1.6; fill:none; }
.f-burst-ring{ fill: rgba(240,112,90,0.16); stroke: var(--coral); stroke-width:2.5; }
.f-burst-x{ stroke: var(--coral); stroke-width:3; stroke-linecap:round; }
.f-diamonds path{ fill: var(--bg-0); stroke: var(--coral); stroke-width:2.2; }
.f-dots{ stroke: var(--green-bright); stroke-width:5; stroke-linecap:round; stroke-dasharray:0.1 10; }

/* entrance: lines draw left-to-right, markers fade in after */
.futures:not(.drawn) .f-line{ stroke-dashoffset:1; }
.futures.drawn .f-line{ transition: stroke-dashoffset 1.3s ease; }
.futures.drawn .f-shared{ transition-duration:1.1s; }
.futures.drawn .f-bad, .futures.drawn .f-good{ transition-delay:1.1s; }
.futures.drawn .f-bad-after{ transition-delay:2.3s; }
.f-fade{ transition: opacity .7s ease; }
.futures:not(.drawn) .f-fade{ opacity:0; }
.futures.drawn .f-d1{ transition-delay:1s; } .futures.drawn .f-d2{ transition-delay:1.9s; } .futures.drawn .f-d3{ transition-delay:2.3s; }
@media (prefers-reduced-motion: reduce){
  .futures .f-line, .futures .f-fade{ transition:none !important; }
  .f-pulse{ animation:none; }
}

.futures-notes{ display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:40px; }
.futures-note{ position:relative; padding-top:22px; border-top:1px solid var(--panel-border-strong); }
.futures-note::before{ content:""; position:absolute; top:-2px; left:0; width:56px; height:3px; background: var(--coral); }
.futures-note.new::before{ background: var(--green-bright); }
.futures-note.old .compare-label{ color: var(--coral); }
.futures-note.new .compare-label{ color: var(--green-bright); }
.futures-note.old .compare-list svg{ color: var(--coral); }
@media (max-width:700px){
  .futures-notes{ grid-template-columns:1fr; gap:32px; }
  .futures-svg .f-label, .futures-svg .f-small, .futures-svg .f-lane, .futures-svg .f-axis{ display:none; }
}

/* ---------- Hero intro panel: collapse / expand ---------- */
.hero-panel{ position:relative; }
.hero-panel-body{ display:grid; grid-template-rows:1fr; transition: grid-template-rows .5s ease, opacity .35s ease; }
.hero-panel-inner{ overflow:hidden; min-height:0; }
.hero-panel{ padding-top:16px; }
.hero-panel-toggle{
  position:relative; z-index:2; margin:0 0 16px auto;
  display:flex; align-items:center; gap:7px; height:32px; justify-content:center;
  padding:0 12px; border-radius:999px; cursor:pointer;
  color: var(--text-1); background: rgba(255,255,255,0.06); border:1px solid rgba(148,178,214,0.28);
  font: 600 0.78rem/1 var(--font); letter-spacing:0.04em;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.hero-panel-toggle:hover{ background: rgba(38,148,217,0.18); border-color: var(--blue); color:#fff; }
.hero-panel-toggle:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:2px; }
.hero-panel-toggle svg{ transition: transform .4s ease; flex-shrink:0; }
.hero-panel.collapsed{ max-width:190px; padding:10px; }
@media (max-width:860px){ .hero-panel.collapsed{ padding:10px; } }
.hero-panel.collapsed .hero-panel-body{ grid-template-rows:0fr; opacity:0; }
.hero-panel.collapsed .hero-panel-toggle{ margin:0; width:100%; height:40px; padding:0 14px; justify-content:space-between; }
.hero-panel.collapsed .hero-panel-toggle svg{ transform: rotate(180deg); }
@media (max-width:860px){ .hero-panel.collapsed{ max-width:190px; } }

/* Footer + contact phone/email links */
.footer-bottom a, .map-pin a{ color: inherit; text-decoration:none; border-bottom:1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.footer-bottom a:hover, .map-pin a:hover{ color: var(--blue-bright); border-bottom-color: var(--blue-bright); }
.footer-bottom a:focus-visible, .map-pin a:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:2px; }

/* ---------- Contact: live HQ map (Leaflet + HUD) ---------- */
.hq-map{
  --text-0:#f3f6fb; --text-1:#c3d0e3; --text-2:#8ea0bb; --blue-bright:#4fb2ea; --green-bright:#a8d47e;
  position:relative; height:560px; background:#050a14; overflow:hidden; border-radius:3px;
  border:1px solid rgba(79,178,234,0.4); box-shadow: 0 30px 70px -30px rgba(3,6,12,0.7);
}
#hq-map-canvas{ position:absolute !important; inset:0; width:100%; height:100%; background:#050a14; font-family: var(--font); }
#hq-map-canvas .leaflet-tile-pane{ filter: invert(1) grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.4) brightness(0.88) contrast(1.25); transition: filter .4s ease; }
.hq-map.is-sat #hq-map-canvas .leaflet-tile-pane{ filter: saturate(0.85) contrast(1.05) brightness(0.9); }
.hq-grid{
  position:absolute; inset:0; z-index:450; pointer-events:none;
  background-image: linear-gradient(rgba(79,178,234,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,178,234,0.07) 1px, transparent 1px);
  background-size:56px 56px;
}
.hq-sweep{
  position:absolute; left:0; right:0; top:0; height:120px; z-index:455; pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(79,178,234,0.12) 85%, rgba(79,178,234,0.5) 100%);
  border-bottom:1px solid rgba(79,178,234,0.7); transform: translateY(-120px); animation: hq-sweep 7s linear infinite;
}
@keyframes hq-sweep{ 0%{ transform:translateY(-120px); } 100%{ transform:translateY(680px); } }
.hq-vignette{ position:absolute; inset:0; z-index:460; pointer-events:none; box-shadow: inset 0 0 140px 20px rgba(3,6,12,0.9); }
.hq-map::before, .hq-map::after{ content:""; position:absolute; width:34px; height:34px; z-index:700; pointer-events:none; }
.hq-map::before{ top:8px; left:8px; border-top:2px solid var(--blue-bright); border-left:2px solid var(--blue-bright); }
.hq-map::after{ bottom:8px; right:8px; border-bottom:2px solid var(--blue-bright); border-right:2px solid var(--blue-bright); }

.hud{
  position:absolute; z-index:600; pointer-events:none; padding:12px 15px;
  background: rgba(5,10,20,0.78); border:1px solid rgba(79,178,234,0.32); backdrop-filter: blur(6px);
  color:var(--text-1); line-height:1.35;
}
.hud-tl{ top:22px; left:22px; max-width:300px; }
.hud-tr{ top:22px; right:70px; text-align:right; }
.hud-bl{ bottom:34px; left:22px; min-width:190px; }
.hud-br{ bottom:34px; right:22px; text-align:right; min-width:70px; }
.hud-label{ font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-2); }
.hud-title{ font-family:var(--font-head); font-size:1.15rem; font-weight:700; color:#fff; margin:2px 0; }
.hud-sub{ font-size:0.82rem; color:var(--text-1); }
.hud-mono{ font-family:var(--font-mono); font-size:0.82rem; color:var(--blue-bright); margin-top:3px; letter-spacing:0.04em; }
.hud-clock{ font-size:1rem; color:#fff; }
.hud-live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.2em; color:var(--green-bright); }
.hud-live i{ width:7px; height:7px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 0 0 rgba(168,212,126,0.7); animation: hq-live 1.8s ease-out infinite; }
@keyframes hq-live{ 0%{ box-shadow:0 0 0 0 rgba(168,212,126,0.7);} 100%{ box-shadow:0 0 0 9px rgba(168,212,126,0);} }

.hq-controls{ position:absolute; z-index:650; left:50%; bottom:34px; transform:translateX(-50%); display:flex; gap:6px; }
.hq-btn{
  font:600 0.72rem/1 var(--font-mono); letter-spacing:0.12em; text-transform:uppercase; cursor:pointer;
  padding:9px 13px; color:var(--text-1); background:rgba(5,10,20,0.82); border:1px solid rgba(79,178,234,0.35);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hq-btn:hover{ color:#fff; border-color:var(--blue-bright); }
.hq-btn.is-active{ background:rgba(38,148,217,0.3); color:#fff; border-color:var(--blue-bright); }
.hq-hint{ position:absolute; z-index:640; top:calc(100% - 26px); left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-2); pointer-events:none; transition:opacity .3s ease; white-space:nowrap; }
.hq-hint.is-hidden{ opacity:0; }

/* Leaflet controls + marker */
#hq-map-canvas .leaflet-control-zoom{ border:1px solid rgba(79,178,234,0.4); border-radius:0; box-shadow:none; }
#hq-map-canvas .leaflet-control-zoom a{ background:rgba(5,10,20,0.85); color:#fff; border-bottom:1px solid rgba(79,178,234,0.3); border-radius:0; }
#hq-map-canvas .leaflet-control-zoom a:hover{ background:rgba(38,148,217,0.35); }
#hq-map-canvas .leaflet-control-scale-line{ background:rgba(5,10,20,0.7); color:var(--text-1); border-color:var(--blue-bright); font-family:var(--font-mono); font-size:0.62rem; }
#hq-map-canvas .leaflet-control-attribution{ background:rgba(5,10,20,0.78); color:var(--text-2); font-size:0.62rem; }
#hq-map-canvas .leaflet-control-attribution a{ color:var(--blue-bright); }
.leaflet-container{ font-family:var(--font); }
.hq-marker{ background:none; border:0; }
.hq-marker .dot{ position:absolute; left:-8px; top:-8px; width:16px; height:16px; border-radius:50%; background:#4fb2ea; border:3px solid #fff; box-shadow:0 0 18px 4px rgba(79,178,234,0.9); }
.hq-marker .ring{ position:absolute; left:-12px; top:-12px; width:24px; height:24px; border-radius:50%; border:2px solid rgba(79,178,234,0.9); animation: hq-ring 3s ease-out infinite; }
.hq-marker .r2{ animation-delay:1s; } .hq-marker .r3{ animation-delay:2s; }
@keyframes hq-ring{ 0%{ transform:scale(0.6); opacity:0.95; } 100%{ transform:scale(7); opacity:0; } }
.leaflet-tooltip.hq-tip{
  background:rgba(5,10,20,0.9); border:1px solid var(--blue-bright); border-radius:0; color:#fff; box-shadow:none;
  font:700 0.74rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; padding:7px 10px;
}
.leaflet-tooltip.hq-tip::before{ border-right-color:var(--blue-bright); }
@media (prefers-reduced-motion: reduce){ .hq-sweep{ display:none; } .hq-marker .ring{ animation:none; opacity:0.5; transform:scale(2.5); } .hud-live i{ animation:none; } }
@media (max-width:760px){
  .hq-map{ height:520px; }
  .hud-tl{ top:12px; left:12px; right:60px; max-width:none; padding:10px 12px; }
  .hud-title{ font-size:1rem; }
  .hud-mono{ font-size:0.74rem; }
  .hud-tr{ display:none; }
  .hud-bl{ display:none; }
  .hud-br{ bottom:78px; right:12px; }
  .hq-controls{ bottom:16px; left:12px; right:12px; transform:none; justify-content:center; }
  .hq-hint{ display:none; }
}

/* Chart/diagram frames: show the whole image on white with the caption beneath, never overlapping the data. */
.media-frame.chart{ background:#fff; display:flex; flex-direction:column; aspect-ratio:auto; }
.media-frame.chart img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; background:#fff; flex:1 1 auto; }
.media-frame.chart .media-caption{ position:static; background:#0b1524; padding:16px 22px 18px; text-shadow:none; }

/* Manual play button for the home hero when the browser blocks autoplay */
.hero-play{
  position:absolute; z-index:4; right:32px; bottom:190px; display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:999px; cursor:pointer; color:#fff; font:600 0.9rem/1 var(--font);
  background: rgba(38,148,217,0.92); border:1px solid rgba(255,255,255,0.35); box-shadow:0 14px 30px -10px rgba(0,0,0,0.6);
}
.hero-play[hidden]{ display:none; }
.hero-play:hover{ background: var(--blue-bright); }
@media (max-width:860px){ .hero-play{ right:16px; bottom:16px; } }

/* "Website by Solnet" credit: its own centered line at the very bottom */
.footer-credit{ text-align:center; padding-top:20px; font-size:0.78rem; color:var(--text-3); }
.footer-credit a{ color: inherit; text-decoration:none; border-bottom:1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.footer-credit a:hover{ color: var(--blue-bright); border-bottom-color: var(--blue-bright); }
.footer-credit a:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:2px; }

/* Footer info: everything centered, one item per line */
.footer-bottom{ flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:6px; }
.footer-credit{ padding-top:14px; }

/* ---------- Footer base: contact details as their own distinct band ---------- */
.footer-base{ position:relative; margin-top:8px; background:#070e1b; border-top:1px solid rgba(79,178,234,0.22); }
.footer-base::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:3px;
  background: linear-gradient(90deg, #2694d9 0 25%, #8cc15b 25% 50%, #f5a524 50% 75%, #f0705a 75% 100%);
}
.footer-contact{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:40px 0 22px; max-width:980px; margin:0 auto; }
.fc-item{
  --accent: var(--blue-bright);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; padding:22px 16px 20px;
  background: rgba(255,255,255,0.025); border:1px solid rgba(148,178,214,0.16); border-radius:3px; position:relative;
  transition: border-color .25s ease, background .25s ease;
}
.fc-item:nth-child(2){ --accent: var(--green-bright); }
.fc-item:nth-child(3){ --accent: var(--amber); }
.fc-item::before{ content:""; position:absolute; top:-1px; left:-1px; width:18px; height:18px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
a.fc-item:hover{ border-color: var(--accent); background: rgba(255,255,255,0.05); }
.fc-icon{ width:24px; height:24px; color: var(--accent); }
.fc-label{ font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-3); }
.fc-value{ color:#fff; font-weight:600; font-size:0.98rem; line-height:1.4; }
.footer-copy{ text-align:center; font-size:0.8rem; color:var(--text-3); margin:0; padding:8px 0 28px; }
.footer-credit-bar{ background:#04080f; border-top:1px solid rgba(148,178,214,0.08); text-align:center; padding:13px 0; font-size:0.74rem; color:var(--text-3); }
.footer-credit-bar a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.footer-credit-bar a:hover{ color: var(--blue-bright); border-bottom-color: var(--blue-bright); }
.footer-credit-bar a:focus-visible, .fc-item:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:2px; }
@media (max-width:700px){ .footer-contact{ grid-template-columns:1fr; gap:12px; padding-top:32px; } }

/* Footer base, quieter pass: slim inline items instead of boxed cards */
.footer-base::before{ height:2px; opacity:0.55; }
.footer-contact{ grid-template-columns:repeat(3,auto); justify-content:center; gap:0; max-width:none; padding:24px 0 8px; }
.fc-item{
  flex-direction:row; align-items:center; justify-content:center; gap:10px; padding:4px 28px;
  background:none; border:0; border-radius:0; border-left:1px solid rgba(148,178,214,0.14);
}
.fc-item:first-child{ border-left:0; }
.fc-item::before{ display:none; }
a.fc-item:hover{ background:none; }
a.fc-item:hover .fc-value{ color:#fff; }
.fc-icon{ width:17px; height:17px; opacity:0.85; flex-shrink:0; }
.fc-label{ display:none; }
.fc-value{ color: var(--text-2); font-weight:500; font-size:0.86rem; line-height:1.3; transition: color .2s ease; }
.footer-copy{ font-size:0.76rem; padding:6px 0 20px; }
.footer-credit-bar{ padding:10px 0; font-size:0.7rem; }
@media (max-width:760px){
  .footer-contact{ grid-template-columns:1fr; gap:10px; padding-top:22px; }
  .fc-item{ border-left:0; padding:4px 0; }
}