/* ============================================================
   PGISR Standalone Site — site.css
   Theme: Charcoal ink + desaturated teal — defense ISR
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  --bg:          #0c1017;
  --bg-2:        #111820;
  --bg-3:        #182232;
  --panel:       #141e2a;
  --panel-2:     #1a2634;
  --line:        rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.13);
  --ink:         #ffffff;
  --body:        #7d98a8;
  --muted:       #66798a;
  --accent:      #2a9688;
  --accent-2:    #1f7d71;
  --accent-soft: rgba(42,150,136,0.15);
  --accent-pale: rgba(42,150,136,0.10);
  --max:         1180px;
  --page-gutter: clamp(24px, 4vw, 64px);
  --font-display: "Familjen Grotesk", "Arial Narrow", sans-serif;
  --font-sans:   "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --header-h:    4.5rem;

  /* Footer — warm paper upper band, dark lower band. No teal. */
  --footer-paper:        #e9e6dc;
  --footer-bg:           #1a1a1c;
  --footer-ink:          #201f1d;
  --footer-body:         #5c5850;
  --footer-line:         rgba(32,31,29,0.14);
  --footer-dark-ink:     #efece4;
  --footer-dark-body:    #9c9790;
  --footer-dark-line:    rgba(239,236,228,0.12);
  --footer-copper:       #8f4f24;
  --footer-copper-bright:#713914;

  /* Map demo dark-zone accent — matches footer copper */
  --map-accent:          #c9773a;
  --map-accent-bright:   #e0904e;
  --map-accent-soft:     rgba(201,119,58,0.16);
  --map-accent-pale:     rgba(201,119,58,0.10);
  --map-label:           #f0c49a;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--body);
  color-scheme: dark;
  font-size: 17px;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}
body  {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
h3 { color: var(--ink); }
h1, h2, h3 { text-wrap: balance; }

/* ---- Layout ---- */
.shell {
  width: min(var(--max), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin: 0 auto;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.pgisr-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 1000;
  background: rgba(6,20,51,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 20px rgba(6,20,51,0.18);
}

.pgisr-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: min(100%, calc(var(--max) + var(--page-gutter) + var(--page-gutter)));
  margin: 0 auto;
  padding-inline: var(--page-gutter);
}

/* Brand */
.pgisr-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  gap: 0.55rem;
}
.pgisr-brand-logo {
  display: block;
  height: 38px;
  width: auto;
}

/* Desktop nav — visible above 900px */
.pgisr-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.pgisr-nav a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms;
}
.pgisr-nav a:hover,
.pgisr-nav a[aria-current="page"] { color: var(--accent); }

/* CTA button in nav */
.pgisr-nav-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 9999px;
  border: none;
  background: var(--accent);
  color: #fff !important;
  padding: 0.55rem 1.25rem;
  min-height: 40px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset;
  transition: background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.pgisr-nav-cta:hover {
  background: #0bb39d !important;
  border-color: transparent !important;
  transform: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset !important;
}

/* Hamburger — hidden above 900px */
.pgisr-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1001;
}
.pgisr-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  transform-origin: center;
}

/* Mobile nav panel */
.pgisr-mobile-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.32s;
  background:
    radial-gradient(ellipse 90% 55% at 10% -10%, rgba(42,150,136,0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(15,40,80,0.55), transparent 50%),
    linear-gradient(180deg, #101820 0%, #0c1017 100%);
}
.pgisr-mobile-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(42,150,136,0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 78%);
  mask-image: linear-gradient(180deg, black 0%, transparent 78%);
  pointer-events: none;
  opacity: 0.55;
}
.pgisr-mobile-nav.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.pgisr-mobile-nav:not(.open) .mobile-nav-links a,
.pgisr-mobile-nav:not(.open) .pgisr-nav-cta,
.pgisr-mobile-nav:not(.open) .mobile-nav-foot {
  animation: none !important;
  opacity: 0;
}
.mobile-nav-sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 1.35rem 1.35rem 1.75rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.mobile-nav-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(42,150,136,0.18);
  animation: mobile-nav-pulse 2.2s ease-in-out infinite;
}
@keyframes mobile-nav-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
}
.pgisr-mobile-nav .mobile-nav-links a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 0.15rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #eef3fb;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: color 160ms ease, padding-left 160ms ease, background 160ms ease;
  opacity: 0;
  transform: translateX(-14px);
}
.pgisr-mobile-nav.open.is-animating .mobile-nav-links a,
.pgisr-mobile-nav.open .mobile-nav-links a {
  animation: mobile-nav-link-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.pgisr-mobile-nav.open .mobile-nav-links a:nth-child(1) { animation-delay: 0.06s; }
.pgisr-mobile-nav.open .mobile-nav-links a:nth-child(2) { animation-delay: 0.12s; }
.pgisr-mobile-nav.open .mobile-nav-links a:nth-child(3) { animation-delay: 0.18s; }
.pgisr-mobile-nav.open .mobile-nav-links a:nth-child(4) { animation-delay: 0.24s; }
@keyframes mobile-nav-link-in {
  to { opacity: 1; transform: none; }
}
.mobile-nav-num {
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  min-width: 1.6rem;
}
.mobile-nav-label { flex: 1; }
.mobile-nav-arrow {
  font-size: 1rem;
  color: rgba(42,150,136,0.55);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.pgisr-mobile-nav .mobile-nav-links a:hover,
.pgisr-mobile-nav .mobile-nav-links a:focus-visible {
  color: #fff;
  padding-left: 0.35rem;
}
.pgisr-mobile-nav .mobile-nav-links a:hover .mobile-nav-arrow,
.pgisr-mobile-nav .mobile-nav-links a:focus-visible .mobile-nav-arrow {
  opacity: 1;
  transform: none;
}
.pgisr-mobile-nav .mobile-nav-links a[aria-current="page"] {
  color: #fff;
}
.pgisr-mobile-nav .mobile-nav-links a[aria-current="page"] .mobile-nav-arrow {
  opacity: 1;
  transform: none;
  color: var(--accent);
}
.pgisr-mobile-nav .pgisr-nav-cta {
  display: flex !important;
  margin-top: auto;
  margin-bottom: 0;
  justify-content: center;
  align-items: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 1rem 1.35rem;
  border-radius: 9999px;
  min-height: 52px;
  opacity: 0;
  transform: translateY(10px);
}
.pgisr-mobile-nav.open .pgisr-nav-cta {
  animation: mobile-nav-link-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}
.mobile-nav-foot {
  margin: 1.15rem 0 0;
  font-family: var(--font-mono), 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  opacity: 0;
}
.pgisr-mobile-nav.open .mobile-nav-foot {
  animation: mobile-nav-link-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.36s forwards;
}

html.mobile-nav-open,
body.mobile-nav-open {
  overflow: hidden;
}

/* Hamburger → X animation when open */
.pgisr-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.pgisr-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.pgisr-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Switch at 1100px — "Request a Demonstration" is too wide for 900px */
@media (max-width: 1100px) {
  .pgisr-nav { display: none !important; }
  .pgisr-mobile-toggle { display: flex !important; }
}
@media (min-width: 1101px) {
  .pgisr-mobile-nav {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pgisr-mobile-nav,
  .pgisr-mobile-toggle span,
  .pgisr-mobile-nav .mobile-nav-links a,
  .pgisr-mobile-nav .pgisr-nav-cta,
  .pgisr-mobile-nav .mobile-nav-foot,
  .mobile-nav-led,
  .mobile-nav-arrow {
    transition: none !important;
    animation: none !important;
  }
  .pgisr-mobile-nav.open .mobile-nav-links a,
  .pgisr-mobile-nav.open .pgisr-nav-cta,
  .pgisr-mobile-nav.open .mobile-nav-foot {
    opacity: 1;
    transform: none;
  }
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -999px;
  left: -999px;
  z-index: 200;
  background: #106e62;
  color: #fff;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
  border-radius: 4px;
}
.skip-link:focus { top: 1rem; left: 1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: clamp(600px, 85svh, 1000px);
  overflow: hidden;
  padding-top: var(--header-h);
  border-bottom: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 60% 70% at 90% 50%, rgba(42,150,136,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #141e2c 0%, #0c1017 55%),
    var(--bg);
}

/* Subtle teal glow circle — lighter in light mode */
.hero::after {
  content: "";
  position: absolute;
  right: -6rem;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(320px, 46vw, 660px);
  height: clamp(320px, 46vw, 660px);
  border-radius: 50%;
  border: 1px solid rgba(42,150,136,0.12);
  background: radial-gradient(circle, rgba(42,150,136,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.hero-watermark {
  display: none; /* superseded by the full-width headline */
}
.hero-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hero-body > .shell {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Full-width title row — the PGISR headline dominates */
.hero-title-row {
  border-bottom: 1px solid var(--line-strong);
  padding: 2rem 0 1.25rem;
}
.hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2.5rem 0 3rem;
  max-width: 560px;
}
.hero-visual { display: none; }
.hero-launch {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-bottom: clamp(2.75rem, 6vh, 4.5rem);
  min-height: min(82vh, 860px);
}
.hero-launch-copy {
  position: relative;
  z-index: 2;
  max-width: 32rem;
  padding: clamp(2.75rem, 6vh, 5rem) 0 1rem;
}
.hero-launch-copy .hero-product-name {
  margin: 0 0 1.4rem;
  font-size: clamp(5.5rem, 11vw, 9.5rem);
}
.hero-launch-copy .hero-positioning {
  margin-top: 0;
  max-width: 14ch;
}
.hero-launch-copy .subtitle {
  max-width: 34ch;
  color: rgba(188, 202, 212, 0.88);
}
.hero-product-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 2rem 0 0.75rem;
}
.hero-product-tab {
  appearance: none;
  margin: 0;
  min-width: 3.1rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(183,201,210,0.18);
  background: transparent;
  color: rgba(200, 214, 222, 0.62);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.hero-product-tab:hover {
  color: #e9eeec;
  border-color: rgba(183,201,210,0.42);
}
.hero-product-tab.is-selected,
.hero-product-tab[aria-selected="true"] {
  color: #f3f6f4;
  border-color: rgba(145, 164, 127, 0.7);
  background: rgba(145, 164, 127, 0.14);
}
.hero-product-tab:focus-visible {
  outline: 2px solid rgba(145, 164, 127, 0.9);
  outline-offset: 2px;
}
.hero-product-meta {
  margin: 0;
  color: rgba(155, 172, 184, 0.58);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-launch-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 56vh, 640px);
  isolation: isolate;
  overflow: hidden;
}
.hero-launch-setting {
  position: absolute;
  inset: 6% 0 4% 8%;
  z-index: 0;
  overflow: hidden;
  border-radius: 4px;
  opacity: 0.38;
  pointer-events: none;
}
.hero-launch-setting::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 42% 48%, transparent 20%, rgba(7,12,18,0.55) 72%, rgba(7,12,18,0.88) 100%),
    linear-gradient(90deg, rgba(7,12,18,0.7), transparent 35%);
  pointer-events: none;
}
.hero-launch-setting img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) saturate(0.7) brightness(0.72);
  transform: scale(1.12);
}
.hero-launch-mark {
  position: absolute;
  right: 4%;
  bottom: 6%;
  z-index: 3;
  color: rgba(255,255,255,0.18);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(0.7rem, 1.2vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
}
.hero-launch-shot {
  position: relative;
  z-index: 2;
  margin: 0;
  width: min(100%, 42rem);
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.hero-concept-tag {
  position: absolute;
  left: 2%;
  bottom: 6%;
  z-index: 3;
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(42,150,136,0.35);
  border-radius: 999px;
  background: rgba(233,230,220,0.82);
  backdrop-filter: blur(4px);
  color: #077466;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 980px) {
  .hero-concept-tag {
    font-size: 0.54rem;
    padding: 0.3rem 0.55rem;
    left: 4%;
    bottom: 8%;
  }
}
.hero-launch-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  filter: none;
  box-shadow: none;
  transform: scale(var(--hero-product-zoom, 1));
  transition: opacity 260ms ease, transform 260ms ease;
}
.hero-launch-stage[data-product="sr"] { --hero-product-zoom: 1; }
.hero-launch-stage[data-product="lr"] { --hero-product-zoom: 1; }
.hero-launch-stage[data-product="fn"] { --hero-product-zoom: 2; }
.hero-launch-stage.is-swapping .hero-launch-shot img {
  opacity: 0.45;
  transform: translateY(10px) scale(var(--hero-product-zoom, 1));
}
.hero-launch-stage.is-swapping .hero-launch-setting {
  opacity: 0.22;
  transition: opacity 260ms ease;
}
@media (max-width: 980px) {
  .hero-launch {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0.75rem;
  }
  .hero-launch-stage {
    order: -1;
    min-height: clamp(280px, 64vw, 480px);
  }
  .hero-launch-shot {
    width: min(94%, 32rem);
  }
  .hero-launch-setting {
    inset: 8% 4% 10%;
  }
  .hero-launch-mark {
    right: 8%;
    bottom: 8%;
  }
}
.hero-stats-bar {
  border-top: 1px solid var(--line-strong);
  background: var(--bg-2);
}
.hero-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-stat {
  padding: 1.1rem 1.4rem;
  border-right: 1px solid var(--line-strong);
}
.hero-stat:last-child { border-right: 0; }
.hero-stat strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.1rem,2vw,1.75rem);
  font-weight: 900;
  line-height: 1;
}
.hero-stat span {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   TYPOGRAPHY & SHARED COMPONENTS
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1 {
  max-width: 100%;
  margin: 1rem 0 0;
  font-size: clamp(2.4rem,4.4vw,4rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h2 { font-size: clamp(1.6rem,2.8vw,2.4rem); line-height: 1.15; margin: 0.5rem 0 1rem; color: var(--ink); letter-spacing: -0.01em; font-weight: 700; }

.subtitle {
  max-width: 520px;
  margin: 1.1rem 0 0;
  color: var(--body);
  font-size: clamp(0.95rem,1.8vw,1.15rem);
  line-height: 1.65;
}
.part-number {
  margin: 1rem 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2rem;
}
.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 9999px;
  padding: 0.7rem 1.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.button:hover { transform: none; }
.button-primary {
  border: none;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset;
}
.button-primary:hover {
  background: #0bb39d;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
}
.button-secondary {
  border: 1.5px solid rgba(255,255,255,0.22);
  color: var(--ink);
  background: rgba(255,255,255,0.015);
}
.button-secondary:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.045);
  color: var(--ink);
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6.5rem 0 1.5rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color 150ms; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { opacity: 0.4; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  padding: 5rem 0;
  border-bottom: 1px solid var(--line);
}
.section-alt { background: var(--bg-2); }

/* Sensor package layout */
.sensor-section-grid {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 0.8fr);
  gap: 54px;
  align-items: start;
}
.sensor-grid-card {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  overflow: hidden;
}
.sensor-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
.sensor-grid-head strong {
  color: var(--ink);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sensor-count {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-pale);
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
}
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}
.sensor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.25rem 0.75rem;
  background: var(--panel);
  text-align: center;
  transition: background 160ms;
}
.sensor-item:hover { background: var(--accent-pale); }
.sensor-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid rgba(0,207,192,0.18);
  flex-shrink: 0;
}
.sensor-icon svg {
  width: 16px; height: 16px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sensor-label {
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Specs & capabilities */
.datasheet-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 5rem;
  align-items: start;
}
.spec-table-bare {
  width: 100%;
  border-collapse: collapse;
}
.spec-table-bare tr { border-bottom: 1px solid var(--line); }
.spec-table-bare tr:first-child { border-top: 1px solid var(--line); }
.spec-name-bare {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.85rem 1.5rem 0.85rem 0;
  width: 44%;
  vertical-align: middle;
}
.spec-val-bare {
  color: var(--body);
  font-size: 0.875rem;
  padding: 0.85rem 0;
  vertical-align: middle;
}
.capability-list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.capability-list li {
  padding: 0.75rem 0 0.75rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--body);
  line-height: 1.5;
  position: relative;
}
.capability-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* Applications icon row */
.app-icon-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.app-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.5rem 0.75rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  transition: background 180ms;
  background: var(--panel);
}
.app-icon-item:hover { background: var(--accent-pale); }
.app-icon-item svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.app-icon-item span {
  font-size: 0.7rem;
  color: var(--body);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* ============================================================
   HOW IT WORKS — numbered steps
   ============================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.step-item {
  background: var(--panel);
  padding: 2.25rem 2rem;
  position: relative;
  transition: background 180ms;
}
.step-item:hover { background: var(--bg-3); }
.step-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.step-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.step-desc {
  font-size: 0.875rem;
  color: var(--body);
  line-height: 1.7;
  margin: 0;
}
.step-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--accent-soft);
  border: 1px solid rgba(0,207,192,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.step-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   HERO — equipment product style
   ============================================================ */
.hero-model-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.hero-product-name {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 24vw, 17rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
/* The "I" = Intelligence — rendered as a solid accent bar, not a thin italic glyph,
   so it reads as a deliberate logotype mark instead of leaving dead space either side */
.hero-product-name .title-i {
  color: transparent;
  position: relative;
  display: inline-block;
  width: 0.46em;
  cursor: default;
}
.hero-product-name .title-i::before {
  content: '';
  position: absolute;
  top: 0.04em;
  bottom: 0.08em;
  left: 18%;
  right: 18%;
  background: var(--accent);
  border-radius: 0.02em;
  transform: skewX(-10deg);
  box-shadow: 0 0 18px rgba(42,150,136, 0.55), 0 0 48px rgba(42,150,136, 0.22);
}
.hero-product-name .title-i::after {
  content: 'INTELLIGENCE';
  position: absolute;
  bottom: -0.14em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.062em;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.22em;
  color: var(--accent);
  opacity: 0.85;
  white-space: nowrap;
  pointer-events: none;
}
/* ---- Hero system parameters grid ---- */
.hero-params {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  margin: 1.75rem 0 2rem;
  max-width: 500px;
}
.hero-param {
  padding: 0.65rem 0.9rem;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  transition: background 160ms;
}
.hero-param:hover { background: rgba(42,150,136,0.05); }
.hero-param-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.53rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.22rem;
  opacity: 0.9;
}
.hero-param-val {
  display: block;
  font-size: 0.78rem;
  color: var(--body);
  font-weight: 500;
  line-height: 1.35;
}
/* ---- Hero plain text secondary link ---- */
.hero-text-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--body);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 160ms;
  position: relative;
}
.hero-text-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--accent);
  transition: right 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-text-link:hover { color: var(--accent); }
.hero-text-link:hover::after { right: 0; }
@media (max-width: 700px) {
  .hero-params { grid-template-columns: 1fr; max-width: 100%; }
  .hero-param { border-right: 1px solid var(--line-strong); }
}

/* ============================================================
   SYSTEM SPEC TABLE
   ============================================================ */
.spec-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.hw-spec-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line-strong);
}
.hw-spec-table tr {
  border-bottom: 1px solid var(--line);
}
.hw-spec-name {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.85rem 1.25rem 0.85rem 0;
  width: 38%;
  vertical-align: top;
  white-space: nowrap;
}
.hw-spec-val {
  font-size: 0.88rem;
  color: var(--body);
  padding: 0.85rem 0;
  vertical-align: top;
  line-height: 1.5;
}

/* ============================================================
   DEPLOYMENT ENVIRONMENTS GRID
   ============================================================ */
.deploy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
}
.deploy-item {
  background: var(--panel);
  padding: 1.75rem 1.5rem;
  transition: background 160ms;
}
.deploy-item:hover { background: var(--bg-3); }
.deploy-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.deploy-desc {
  font-size: 0.8rem;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   PRODUCT CARDS (Flock-style sensor cards)
   ============================================================ */
.product-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.product-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.product-card {
  background: var(--panel);
  padding: 2rem 1.75rem;
  transition: background 180ms;
}
.product-card:hover { background: var(--bg-3); }
.product-card-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(0,207,192,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.product-card-icon svg {
  width: 20px; height: 20px;
  stroke: var(--accent);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product-card-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
}
.product-card-tag {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 1.1rem;
  letter-spacing: 0.01em;
}
.product-card-features {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.product-card-features li {
  font-size: 0.8rem;
  color: var(--body);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}
.product-card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}

/* ============================================================
   HERITAGE / TRUST SECTION
   ============================================================ */
.heritage-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  margin-bottom: 3.5rem;
}
.heritage-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.heritage-num {
  padding: 1.6rem 1.4rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.heritage-num strong {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.heritage-num span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.trust-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.trust-pillar {
  background: var(--panel);
  padding: 2rem 1.75rem;
}
.trust-pillar-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
.trust-pillar-desc {
  font-size: 0.875rem;
  color: var(--body);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   CREDENTIALS STRIP
   ============================================================ */
/* ---- Credentials ticker ---- */
.creds-strip {
  background: #020a18;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.creds-verify-note {
  margin: 0.55rem auto 0;
  padding: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.creds-ticker-label-col {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-right: 1px solid rgba(255,255,255,0.1);
  background: rgba(42,150,136,0.04);
  flex-shrink: 0;
  z-index: 2;
}
.creds-ticker-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  opacity: 0.8;
}
.creds-ticker-outer {
  flex: 1;
  overflow: hidden;
  /* Fade the marquee at both edges instead of hard-clipping words mid-
     character as items scroll in and out. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.creds-ticker-inner {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: ticker-run 35s linear infinite;
}
.creds-ticker-inner:hover { animation-play-state: paused; }
@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cred-tick-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 1.35rem 1.75rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
  transition: background 200ms;
  min-width: 130px;
}
.cred-tick-item:hover { background: rgba(42,150,136,0.04); }
.cred-tick-item--est .cred-tick-name { color: var(--accent); }
.cred-tick-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.cred-tick-desc {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
@media (prefers-reduced-motion: reduce) {
  .creds-ticker-inner { animation: none; }
}

/* ============================================================
   CTA BAND (new centered Flock-style)
   ============================================================ */
.cta-band {
  background: var(--bg-2);
  border-top: 1px solid var(--line-strong);
  padding: 5rem 0;
}
.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.cta-band-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0.6rem 0 1rem;
  color: var(--ink);
}
.cta-band-sub {
  font-size: 0.95rem;
  color: var(--body);
  line-height: 1.7;
  max-width: 480px;
  margin: 0;
}
.cta-band-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
}

/* ============================================================
   PAGE HERO (About / Contact)
   ============================================================ */
.page-hero {
  padding: calc(var(--header-h) + 3.5rem) 0 3.5rem;
  border-bottom: 1px solid var(--line-strong);
  background:
    radial-gradient(ellipse 55% 70% at 90% 50%, rgba(42,150,136,0.09) 0%, transparent 60%),
    linear-gradient(160deg, #141e2c 0%, #111820 70%),
    var(--bg-2);
}

/* ============================================================
   ABOUT PAGE HERO
   ============================================================ */
.about-hero {
  background:
    radial-gradient(ellipse 55% 80% at 100% 50%, rgba(42,150,136,0.08) 0%, transparent 65%),
    linear-gradient(160deg, #141e2c 0%, #0c1017 60%),
    var(--bg);
  border-bottom: 1px solid var(--line-strong);
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 4rem;
  overflow: hidden;
}
.about-hero .breadcrumb { display: none; }
.about-hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-strong);
}
.about-hero-text {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: end;
  max-width: none;
  padding: 2.75rem 0 3.25rem;
}
.about-hero-heading { min-width: 0; }
.about-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0.75rem 0 0;
  max-width: 16ch;
  text-wrap: balance;
}
.about-hero-body {
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  line-height: 1.75;
  color: var(--body);
  margin: 0 0 0.35rem;
  max-width: 48ch;
}
.about-hero-aside {
  padding-left: 0;
  border-left: none;
  justify-self: stretch;
  width: 100%;
  max-width: none;
}
.about-id-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(42,150,136,0.06), transparent 40%),
    rgba(8, 20, 40, 0.85);
  border: 1px solid rgba(42,150,136,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.about-id-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(42,150,136,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.35;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, black, transparent 85%);
  mask-image: linear-gradient(180deg, black, transparent 85%);
}
.about-id-panel-hdr {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
}
.about-id-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(42,150,136,0.18);
  flex-shrink: 0;
}
.about-id-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1;
}
.about-id-code {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.about-hero-dl {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
}
.about-hero-dl-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  min-height: 124px;
  padding: 1.15rem 1rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  border-bottom: 0;
  transition: background 160ms ease;
}
.about-hero-dl-row:last-of-type { border-right: 0; }
.about-hero-dl-row:hover {
  background: rgba(42,150,136,0.05);
}
.about-id-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.15rem;
}
.about-hero-dl-row dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.25rem;
}
.about-hero-dl-row dd {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}
.about-id-foot {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.7rem 1rem;
  border-top: 1px solid rgba(42,150,136,0.2);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(42,150,136,0.75);
  background: rgba(42,150,136,0.05);
}
@media (max-width: 860px) {
  .about-hero-text {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-block: 2.25rem;
  }
  .about-hero-aside {
    justify-self: stretch;
    max-width: none;
    padding-left: 0;
    border-left: none;
    border-top: none;
    padding-top: 0;
  }
  .about-hero-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-hero-dl-row { min-width: 0; }
  .about-hero-dl-row:nth-child(2) { border-right: 0; }
  .about-hero-dl-row:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.07); }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-cta-inner {
  max-width: 600px;
}
.about-cta-body {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: var(--body);
  line-height: 1.75;
  max-width: 52ch;
  margin: 0 0 2rem;
}
.origin-single-col {
  max-width: none;
}
.origin-statement {
  max-width: 860px;
}
.origin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.origin-grid .origin-statement { max-width: none; }
.origin-visual {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: #111c26;
}
.origin-visual img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .origin-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  /* Break out of .shell's inset so the image bleeds to the true viewport
     edges on mobile, instead of floating in a padded, capped-width box. */
  .origin-visual {
    max-width: none;
    width: calc(100% + var(--page-gutter) * 2);
    margin-inline: calc(var(--page-gutter) * -1);
  }
}
.origin-statement-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 550;
  letter-spacing: 0.01em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0.75rem 0 1.75rem;
  max-width: none;
  text-wrap: balance;
}
.origin-statement-headline > span {
  display: block;
}
@media (min-width: 901px) {
  .origin-statement-headline > span {
    white-space: nowrap;
  }
}
.origin-lede {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--body);
  margin: 0 0 1.75rem;
  max-width: 56ch;
}
.origin-pull {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 0 0 1.75rem;
  quotes: none;
}
.origin-body {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 1rem;
  max-width: 58ch;
}
.origin-body:last-child { margin-bottom: 0; }
.section.origin-section {
  position: relative;
  padding-block: 5rem;
  /* Trimmed — paired with .about-hero-v2's reduced bottom padding to close
     the gap above "The Origin" without touching this section's own
     internal spacing. Second small pass on top of the first ~30% cut. */
  padding-top: clamp(1.5rem, 3.5vw, 1.75rem);
  border-top: 0;
  border-bottom: 1px solid var(--line-strong);
  /* Carry a whisper of the cream field into the top of the dark story
     (same soft cream→ops transition used on the homepage) — no hard cut. */
  background:
    linear-gradient(180deg, rgba(233, 230, 220, 0.07), transparent 7rem),
    var(--bg-2);
}
.origin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: 3rem;
  align-items: center;
}
.origin-layout .origin-statement {
  max-width: none;
}
.origin-layout .ops-label {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.origin-layout .ops-label::after {
  content: '';
  flex: 1;
  height: 8px;
  background: repeating-linear-gradient(135deg, rgba(42,150,136,0.28) 0 1px, transparent 1px 5px);
}
.origin-layout .origin-statement-headline {
  max-width: 13ch;
  margin: 2rem 0 0;
  font-size: clamp(3rem, 4.8vw, 5.1rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.origin-story {
  border: none;
  background: none;
}
.origin-story > .origin-body {
  max-width: 40ch;
  margin: 0;
  padding: 0;
  color: var(--body);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.8;
}
.origin-path {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-strong);
}
.origin-path--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.origin-path--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.origin-footnote {
  margin: 1.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  max-width: 62ch;
}
.origin-path article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}
.origin-path article > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.origin-path h3 {
  margin: 0 0 0.3rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.origin-path p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .section.origin-section {
    padding-block: 4rem;
    background:
      linear-gradient(180deg, rgba(233, 230, 220, 0.07), transparent 6rem),
      var(--bg);
  }
  .origin-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .origin-layout .origin-statement-headline {
    max-width: 15ch;
  }
  .origin-path { grid-template-columns: 1fr 1fr; gap: 1.75rem; margin-top: 0; }
  .origin-grid + .origin-path { margin-top: 2.5rem; }
}
@media (max-width: 600px) {
  .section.origin-section { padding-block: 3.25rem; }
  .origin-layout .origin-statement-headline {
    margin-top: 1.4rem;
    font-size: clamp(2.8rem, 14vw, 4.4rem);
  }
  .origin-story > .origin-body { padding: 1.15rem; }
  .origin-path { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-hero-dl { grid-template-columns: 1fr; }
  .about-hero-dl-row,
  .about-hero-dl-row:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .about-hero-dl-row:last-child { border-bottom: 0; }
}
.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.feature-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: box-shadow 200ms, border-color 200ms;
}
.feature-card:hover {
  box-shadow: 0 4px 20px rgba(0,207,192,0.08);
  border-color: rgba(0,207,192,0.22);
}
.feature-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: var(--accent-soft);
  border: 1px solid rgba(0,207,192,0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.feature-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feature-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); margin: 0 0 0.3rem; }
.feature-desc  { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin: 0; }

.stat-band {
  background: var(--bg-3);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: 0;
}
.stat-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-band-item {
  padding: 1.6rem 1.4rem;
  border-right: 1px solid var(--line-strong);
}
.stat-band-item:last-child { border-right: 0; }
.stat-band-item strong {
  display: block;
  font-size: clamp(1.4rem,2.6vw,2.25rem);
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}
.stat-band-item span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero {
  min-height: 0;
  padding: calc(var(--header-h) + 4.5rem) 0 4.75rem;
}
.contact-hero .breadcrumb {
  padding-top: 0;
  margin-bottom: 3.75rem;
}
.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 5rem;
  align-items: end;
}
.contact-hero h1 {
  font-size: clamp(3.5rem, 6.25vw, 6.4rem);
  line-height: 0.94;
  margin: 0;
}
.contact-hero-copy {
  padding-bottom: 0.4rem;
}
.contact-hero-copy > p {
  max-width: 540px;
  margin: 0;
  color: var(--body);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  line-height: 1.7;
}
.contact-response-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.contact-response-line span {
  padding: 0.75rem 0.6rem;
  border-right: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-response-line span:first-child { padding-left: 0; color: var(--accent); }
.contact-response-line span:last-child { border-right: 0; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.contact-info-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.contact-info-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.contact-info-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.contact-info-val { font-size: 0.92rem; color: var(--body); margin: 0; line-height: 1.5; }
.contact-info-val a { color: var(--accent); }
.contact-info-val a:hover { text-decoration: underline; }

/* Contact side cards — Swiss: rules and type carry structure, no enclosing box. */
.contact-side-card {
  margin-top: 2.5rem;
  background: none;
  border: none;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: visible;
}
.contact-side-card .mv-value-hdr {
  padding: 1rem 0 0.85rem;
  border-bottom: 1px solid var(--line-strong);
  margin: 0;
}
.contact-side-card .mv-value-title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.contact-side-card-body {
  padding: 1.25rem 0 0;
}
.contact-response-stat {
  margin: 0 0 0.65rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 0.95;
}
.contact-response-stat span {
  display: block;
  margin-top: 0.45rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact-routing-rule {
  height: 1px;
  margin: 1.15rem 0;
  background: var(--line-strong);
}
.contact-routing-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-strong);
}
.contact-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.85rem;
}
.contact-data-table .cdt-label {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.28rem 0.75rem 0.28rem 0;
  white-space: nowrap;
  vertical-align: middle;
}
.contact-data-table .cdt-val {
  font-size: 0.88rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink);
  vertical-align: middle;
}
.contact-side-note {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.contact-side-link {
  color: var(--accent);
  font-weight: 600;
}
.contact-side-link:hover { text-decoration: underline; }
.contact-delivery-stat {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.contact-delivery-unit {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Form — Swiss: dropped the enclosing panel. */
.form-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.form-card-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 0.85rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.form-card-header span:last-child { color: var(--accent); }
.form-card form {
  padding: 1.75rem 0 1.5rem;
}
#contact-form,
#overview,
#deployment,
#applications,
#packaging,
#specs,
#pipeline,
#demo,
#faq {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
main > section[id],
footer[id] {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.form-honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.form-success {
  display: none;
  background: rgba(42,150,136,0.08);
  border: 1px solid rgba(42,150,136,0.35);
  border-radius: 12px;
  padding: 1.5rem 1.4rem;
  margin-bottom: 0;
}
.form-success.is-visible,
.form-success:not([hidden]) {
  display: block;
}
.form-success-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}
.form-success-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.form-success-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--body);
}
.form-success-body a {
  color: var(--accent);
  text-decoration: none;
}
.form-success-body a:hover {
  text-decoration: underline;
}
.form-error {
  margin: 0.85rem 0 0;
  padding: 0.8rem 0.9rem;
  border-left: 3px solid #b84c43;
  background: rgba(184,76,67,0.08);
  color: var(--body);
  font-size: 0.84rem;
  line-height: 1.55;
}
.form-error a {
  color: var(--accent);
}
.form-row { margin-bottom: 1.1rem; }
.form-row label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1.5px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 0.7rem 0.9rem;
  outline: none;
  transition: border-color 160ms, box-shadow 160ms;
  appearance: none;
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--muted); opacity: 1; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,207,192,0.12);
}
.form-row textarea { resize: vertical; min-height: 130px; }
.form-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c7080' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}
.form-row select option { background: var(--bg-2); color: var(--ink); }
.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
  border-radius: 0;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform 160ms;
  box-shadow: 0 2px 8px rgba(0,207,192,0.2);
}
.form-submit:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  box-shadow: 0 4px 18px rgba(0,207,192,0.28);
  transform: translateY(-1px);
}
.form-submit:disabled,
.form-submit:disabled:hover {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }

/* ============================================================
   FOOTER  (dark inverse)
   ============================================================ */
.pgisr-footer {
  position: relative;
  padding: 0;
  background: var(--footer-paper);
  color: var(--footer-body);
  overflow: hidden;
  border-top: 1px solid rgba(201,119,58,0.3);
}
.pgisr-footer-glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,119,58,0.4), transparent);
  pointer-events: none;
}
.pgisr-footer > .shell {
  position: relative;
  z-index: 1;
}
/* Lead row — statement CTA on the left, functional columns on the right */
.pgisr-footer-lead {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  padding: 4rem 0 3.25rem;
}
.pgisr-footer-cta-kicker {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--footer-copper);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pgisr-footer-cta-title {
  margin: 0;
  color: var(--footer-ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
.pgisr-footer-cta-sub {
  margin: 0.9rem 0 0;
  color: var(--footer-body);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 34ch;
}
/* Closing CTA raised to a real button — it was previously a text link,
   weaker than the header/hero CTA despite being the page's last chance to
   convert. Uses the site's actual primary copper (#c9773a), not the button
   system's generic olive fallback, to match the header/hero CTA. */
.pgisr-footer-cta-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.4rem;
  padding: 0.85rem 1.5rem;
  border-radius: 3px;
  background: #c9773a;
  color: #140a03;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 160ms ease;
}
.pgisr-footer-cta-inline:hover,
.pgisr-footer-cta-inline:focus-visible { background: #e0904e; }
.pgisr-footer-cta-inline span { transition: transform 160ms ease; }
.pgisr-footer-cta-inline:hover span,
.pgisr-footer-cta-inline:focus-visible span { transform: translateX(4px); }
.pgisr-footer-cols {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr 1fr;
  gap: 2rem;
}
.pgisr-footer-col-head {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--footer-ink);
  margin: 0 0 1.05rem;
}
.pgisr-footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 0.65rem;
  font-size: 0.85rem;
  color: var(--footer-body);
  line-height: 1.5;
}
.pgisr-footer-contact-row a {
  color: var(--footer-copper);
  text-decoration: none;
  transition: color 150ms;
}
.pgisr-footer-contact-row a:hover { color: var(--footer-copper-bright); }
.pgisr-footer-contact-row svg { flex-shrink: 0; margin-top: 2px; color: var(--footer-body); }
.pgisr-footer-nav-list { list-style: none; margin: 0; padding: 0; }
.pgisr-footer-nav-list li { margin-bottom: 0.55rem; }
.pgisr-footer-nav-list a {
  font-size: 0.88rem;
  color: var(--footer-body);
  text-decoration: none;
  transition: color 150ms, padding-left 150ms;
}
.pgisr-footer-nav-list a:hover {
  color: var(--footer-copper);
  padding-left: 0.2rem;
}
/* Giant outlined wordmark — the brand anchor for the footer */
/* Signature lockup — wordmark + expansion, legal links opposite */
.pgisr-footer-signature {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding: 2.5rem 0 1.3rem;
}
.pgisr-footer-mark {
  display: block;
  height: clamp(60px, 8vw, 84px);
  width: auto;
}
/* Baseline — meta on one quiet rule */
.pgisr-footer-baseline {
  border-top: 1px solid var(--footer-line);
  padding: 1.3rem 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.pgisr-footer-baseline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--footer-muted, #8a8d86);
}
.pgisr-footer-legal {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.pgisr-footer-legal a {
  font-size: 0.72rem;
  color: var(--footer-muted, #8a8d86);
  transition: color 150ms;
  text-decoration: none;
}
.pgisr-footer-legal a:hover,
.pgisr-footer-legal a[aria-current="page"] { color: var(--footer-copper); }
.pgisr-footer-pwi-credit { color: var(--footer-muted, #8a8d86); }
.pgisr-footer-pwi-credit a { color: var(--footer-copper); text-decoration: none; }
.pgisr-footer-pwi-credit a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .pgisr-footer-lead {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    padding: 3rem 0 2.5rem;
  }
}
@media (max-width: 640px) {
  .pgisr-footer-cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .pgisr-footer-nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0.3rem;
  }
  .pgisr-footer-nav-list li { margin-bottom: 0; }
  .pgisr-footer-baseline { flex-direction: column; align-items: flex-start; }
  .pgisr-footer-signature { align-items: flex-start; }
}

/* ── Legal document pages ───────────────────────────── */
.legal-title {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  margin-bottom: 1.25rem;
}
.legal-draft-notice {
  display: inline-block;
  max-width: 760px;
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: 4px;
  font-size: 0.86rem;
  line-height: 1.55;
}
.form-sensitive-warning {
  margin: 0.7rem 0 0;
  padding: 0.8rem 0.9rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-size: 0.82rem;
  line-height: 1.55;
}
.form-launch-notice {
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.9rem;
  color: var(--body);
  background: rgba(42, 150, 136, 0.08);
  border: 1px solid rgba(42, 150, 136, 0.3);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}
.legal-doc {
  max-width: 760px;
}
.legal-intro {
  font-size: 0.95rem;
  color: var(--body);
  line-height: 1.8;
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 0 6px 6px 0;
}
.legal-h2 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.legal-h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.5rem 0 0.5rem;
}
.legal-doc p {
  font-size: 0.9rem;
  color: var(--body);
  line-height: 1.8;
  margin: 0 0 1rem;
}
.legal-ul {
  margin: 0.5rem 0 1rem 1.25rem;
  padding: 0;
  list-style: none;
}
.legal-ul li {
  font-size: 0.9rem;
  color: var(--body);
  line-height: 1.75;
  padding: 0.2rem 0 0.2rem 1.1rem;
  position: relative;
}
.legal-ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.7;
}
.legal-address {
  font-size: 0.9rem;
  font-style: normal;
  color: var(--body);
  line-height: 1.9;
  margin: 0.5rem 0 0;
}
.legal-doc a {
  color: var(--accent);
  text-decoration: none;
}
.legal-doc a:hover {
  text-decoration: underline;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .sensor-section-grid,
  .datasheet-grid,
  .contact-grid,
  .spec-section-grid,
  .about-two-col,
  .heritage-layout { grid-template-columns: 1fr; gap: 3rem; }
  .steps-grid { grid-template-columns: 1fr; }
  .product-card-grid { grid-template-columns: 1fr 1fr; }
  .deploy-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .trust-pillars { grid-template-columns: 1fr 1fr; }
  .trust-pillar:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-band-grid { grid-template-columns: 1fr 1fr; }
  .stat-band-item:nth-child(2) { border-right: 0; }
  .stat-band-item:nth-child(1),
  .stat-band-item:nth-child(2) { border-bottom: 1px solid var(--line-strong); }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
  .cta-band-actions { width: 100%; }
  .contact-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact-hero h1 { max-width: 12ch; }
  .contact-hero-copy { max-width: 640px; }
  .contact-form-column { order: -1; }
}


@media (max-width: 700px) {
  :root { --header-h: 3.75rem; }

  .shell { width: min(calc(100% - (var(--page-gutter) * 2)), var(--max)); }

  /* Header tighter on mobile */
  .pgisr-brand-logo { height: 32px; }

  /* Hero — no full-viewport height on mobile, content drives the height */
  .hero { min-height: 0; padding-bottom: 3rem; }
  .hero-body { flex: 0 0 auto; }
  .hero-body > .shell { flex: 0 0 auto; }
  .hero-text { flex: 0 0 auto; justify-content: flex-start; padding: 1.5rem 0 0; }
  h1, .hero-headline { font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1.02; }
  .breadcrumb { padding: 4.75rem 0 0.75rem; }
  .hero-title-row { padding: 1.25rem 0 0.85rem; }
  .hero-watermark { display: none; }
  .subtitle { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 1.75rem; }

  /* Stats bar — 2×2 */
  .hero-stat-row { grid-template-columns: 1fr 1fr; }
  .hero-stat:nth-child(2) { border-right: 0; }
  .hero-stat:nth-child(1),
  .hero-stat:nth-child(2) { border-bottom: 1px solid var(--line-strong); }

  /* Sections */
  .section { padding: 3rem 0; }
  .page-hero { padding: calc(var(--header-h) + 2.5rem) 0 2.5rem; }
  .contact-hero { padding: calc(var(--header-h) + 2rem) 0 2.75rem; }
  .contact-hero .breadcrumb { margin-bottom: 2.25rem; }
  .contact-hero-grid { gap: 1.5rem; }
  .contact-hero h1 {
    font-size: clamp(2.75rem, 13.5vw, 4rem);
    line-height: 0.96;
  }
  .contact-response-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.5rem;
  }
  .contact-response-line span {
    min-height: 42px;
    padding: 0.7rem 0.45rem;
    border-right: 1px solid var(--line-strong);
    border-bottom: 0;
    line-height: 1.4;
  }
  .contact-response-line span:first-child { padding-left: 0; }
  .contact-response-line span:last-child { border-right: 0; }

  /* Grids */
  .steps-grid { grid-template-columns: 1fr; }
  .product-card-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 3rem 0; }
  .cta-band-actions { flex-direction: column; width: 100%; }
  .product-section-head { flex-direction: column; align-items: flex-start; }
  .deploy-grid { grid-template-columns: 1fr; }
  .trust-pillars { grid-template-columns: 1fr; }
  /* PGISR title — fill more of the viewport width on mobile */
  .hero-product-name { font-size: clamp(4rem, 24vw, 8rem); letter-spacing: -0.01em; }
  .hw-spec-name { white-space: normal; }
  .creds-ticker-label-col { display: none; }
  .cred-tick-item { padding: 1rem 1.25rem; min-width: 110px; }

  /* Applications — 2 cols, but last lone item spans both */
  .app-icon-row {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    border-radius: 8px;
  }
  .app-icon-item { min-width: 0; max-width: 100%; padding: 1.25rem 0.5rem; }
  .app-icon-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Stat band */
  .stat-band-grid { grid-template-columns: 1fr 1fr; }

  /* Sensor grid — 2 cols instead of 3 on small screens */
  .sensor-grid { grid-template-columns: repeat(2, 1fr); }
  .sensor-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Form */
  .form-two-col { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 0; }
  .form-card-header {
    padding-inline: 1rem;
    flex-direction: column;
    gap: 0.25rem;
  }
  .form-card form { padding: 1.4rem 1rem 1.1rem; }

}

/* ============================================================
   CAMPUS DEPLOYMENT DIAGRAM
   ============================================================ */
/* ---- Full-screen diagram ---- */
.diagram-fullscreen {
  position: relative;
  min-height: 100vh;
  background: #0c1017;
  overflow: hidden;
  margin-top: 4rem;
}
.diagram-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
}
.diagram-map-wrap {
  position: absolute;
  inset: 0;
  background: #0c1017;
  overflow: hidden;
}
.diagram-scroll-hint { display: none; }
.diagram-map-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
}
#campus-map {
  --map-rot: 45deg;
  --map-view-scale: 0.82;
  transform: perspective(2200px) rotateX(54.7356deg) rotateZ(var(--map-rot)) scale(var(--map-view-scale));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 22px 20px rgba(0, 0, 0, 0.4));
  transition: transform 220ms ease;
}
.map-view-controls {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem;
  background: rgba(7, 18, 32, 0.72);
  border: 1px solid rgba(201, 119, 58, 0.22);
  border-radius: 3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.map-view-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(201, 119, 58, 0.18);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(176, 192, 206, 0.82);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.map-view-btn svg { display: block; opacity: 0.8; }
.map-view-btn--text {
  width: auto;
  padding: 0 0.6rem;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.map-view-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(140, 168, 196, 0.3);
  color: rgba(226, 234, 240, 0.95);
}
.map-view-btn:hover svg { opacity: 1; }
.map-view-btn:active { transform: scale(0.95); }
.map-view-btn:focus-visible {
  outline: 1px solid rgba(224, 144, 78, 0.5);
  outline-offset: 1px;
}
.map-view-sep {
  width: 1px;
  height: 18px;
  background: rgba(201, 119, 58, 0.18);
}
@media (max-width: 640px) {
  .map-view-controls { left: 0.5rem; top: 0.5rem; }
  .map-view-btn { width: 40px; height: 40px; }
}
/* Overlay heading */
.diagram-section-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 2.5rem 0 1.5rem;
}
.diagram-section-hdr-left { flex: 1; min-width: 0; }
.diagram-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0.4rem 0 0.6rem;
}
.diagram-section-sub {
  font-size: 0.82rem;
  color: var(--body);
  line-height: 1.7;
  margin: 0;
}
.diagram-panel {
  position: absolute;
  left: auto;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 330px;
  z-index: 10;
  background: rgba(10, 22, 42, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(42,150,136,0.06) inset;
}
.diagram-panel-data.panel-anim { animation: panel-slide-in 380ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes panel-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.diagram-panel-idle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}
.diagram-panel-idle svg {
  width: 32px;
  height: 32px;
  stroke: var(--muted);
}
.diagram-panel-data {
  display: none;
  flex-direction: column;
}
.diagram-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.diagram-panel-id {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.diagram-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0 0 0.5rem;
  transition: color 150ms;
}
.diagram-panel-close:hover { color: var(--ink); }
.diagram-panel-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.diagram-panel-loc {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.diagram-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.diagram-sensor-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-pale);
  border: 1px solid rgba(42,150,136,0.18);
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  white-space: nowrap;
}
.diagram-panel-desc {
  font-size: 0.82rem;
  color: var(--body);
  line-height: 1.75;
  margin: 0;
  flex: 1;
}
.sensor-node { cursor: pointer; outline: none; transition: opacity 300ms; }
.sensor-node:focus-visible .s-ring { stroke: #ffffff; stroke-width: 1.5; }
.sensor-node .s-label {
  fill: var(--map-label);
  font-weight: 600;
}
/* Base dot beneath the flat mark — a small state indicator, not a light
   source. */
.s-dot { fill: #c9773a; fill-opacity: 0.6; }
/* Monitored perimeter corridor — replaces the former per-node circular
   coverage discs (radar-style overlapping circles). A flat band along the
   surveyed boundary the buried run follows: one width, no falloff
   gradient, no animation. */
.detection-corridor {
  fill: none;
  stroke: rgba(201,119,58,0.07);
  stroke-width: 18;
  stroke-linejoin: round;
  stroke-linecap: butt;
}
@media (max-width: 700px) {
  .detection-corridor { stroke-width: 24; }
}
.s-ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1), fill 220ms, stroke-width 220ms;
}
/* Glow radii below are intentionally small (2-4px) rather than the earlier
   10-16px halos: enough to signal state at a glance without the node
   reading as an emitting/active light source. */
.sensor-node:hover { filter: drop-shadow(0 0 3px rgba(201,119,58,0.5)); }
.sensor-node:hover .s-ring { fill-opacity: 1; transform: scale(1.3); }
.sensor-node.sensor-active { filter: drop-shadow(0 0 4px rgba(224,144,78,0.6)); }
.sensor-node.sensor-active .s-ring { fill: #e0904e; fill-opacity: 1; transform: scale(1.4); }
.sensor-node.sensor-active .s-dot { fill: #ffffff; fill-opacity: 1; }
/* Dim the rest of the network when one node is selected */
#campus-map.map-has-active .sensor-node:not(.sensor-active):not(.sensor-alert):not(.sensor-tracking):not(.sensor-advisory) { opacity: 0.38; }
/* Tracking state — target acquired, not yet at fence line */
.sensor-node.sensor-tracking { filter: drop-shadow(0 0 4px rgba(255,190,60,0.65)); }
.sensor-node.sensor-tracking .s-ring { fill: #ffbe3c; fill-opacity: 1; transform: scale(1.3); }
.sensor-node.sensor-tracking .s-dot  { fill: #ffbe3c; fill-opacity: 1; }
/* Ambient blip — a node briefly lights up alongside its idle ping */
.sensor-node.node-blip { filter: drop-shadow(0 0 3px rgba(224,144,78,0.55)); }
.sensor-node.node-blip .s-ring { fill: #e0904e; fill-opacity: 1; transform: scale(1.22); }
/* Advisory state — unverified movement */
.sensor-node.sensor-advisory { filter: drop-shadow(0 0 3px rgba(196,185,99,0.6)); }
.sensor-node.sensor-advisory .s-ring { fill: #c4b963; fill-opacity: 1; transform: scale(1.22); }
.sensor-node.sensor-advisory .s-dot  { fill: #c4b963; fill-opacity: 1; }
.diagram-buyer-pitch {
  margin: 0.85rem 0 0;
  max-width: 36rem;
  color: #d9e1e4;
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 500;
}
.diagram-legend {
  pointer-events: auto;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 2rem);
  background: rgba(6,15,32,0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.5rem 0.65rem;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.diagram-legend-hint {
  margin: 0 0.35rem 0 0.15rem;
  padding-right: 0.55rem;
  border-right: 1px solid rgba(155,172,184,0.2);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(217,225,228,0.72);
  white-space: nowrap;
}
.legend-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  line-height: 1.15;
}
.legend-title {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}
.legend-sub {
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.72;
  font-weight: 500;
}
.diagram-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
button.diagram-legend-item {
  appearance: none;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
button.diagram-legend-item:hover {
  color: #d9e1e4;
  background: rgba(255,255,255,0.04);
}
button.diagram-legend-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.diagram-legend-item.is-active {
  color: #e8eef1;
  border-color: rgba(155,172,184,0.28);
  background: rgba(255,255,255,0.06);
}
button.diagram-legend-item[data-alert-level="nominal"].is-active { color: #55c7b8; border-color: rgba(85,199,184,0.35); }
button.diagram-legend-item[data-alert-level="advisory"].is-active { color: #c4b963; border-color: rgba(196,185,99,0.4); }
button.diagram-legend-item[data-alert-level="elevated"].is-active { color: #ffbe3c; border-color: rgba(255,190,60,0.4); }
button.diagram-legend-item[data-alert-level="high"].is-active { color: #ff7676; border-color: rgba(255,93,93,0.4); }
.diagram-legend-item.legend-fence-item {
  padding: 0.35rem 0.7rem 0.35rem 0.35rem;
  border-left: 1px solid rgba(155,172,184,0.18);
  margin-left: 0.15rem;
  pointer-events: none;
}
.diagram-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.diagram-legend-fence {
  width: 26px;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.3) 0,
    rgba(255,255,255,0.3) 5px,
    transparent 5px,
    transparent 9px
  );
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .diagram-panel { width: 280px; padding: 1rem; }
  .diagram-legend { gap: 0.4rem; font-size: 0.64rem; border-radius: 14px; }
  .diagram-legend-hint { width: 100%; border-right: 0; padding: 0 0 0.2rem; margin: 0 0 0.15rem; text-align: center; }
  .legend-sub { display: none; }
  .diagram-buyer-pitch { font-size: 0.95rem; }
  .diagram-section-hdr { padding: 1.5rem 0 1rem; }
  .diagram-section-title { font-size: clamp(1.4rem, 4vw, 2rem); }
}
@media (max-width: 600px) {
  /* Stack: map on top, panel + legend below */
  .diagram-stage {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: unset;
  }
  /* Map: force a larger render by scrolling horizontally.
     SVG viewBox is 940×560 — at 390px width everything is 41% scale (illegible).
     Forcing 560px min-width raises scale to 57%, nodes become tappable. */
  .diagram-map-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    height: 320px;
    min-height: 320px;
    max-height: none;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    order: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(42,150,136,0.45) rgba(255,255,255,0.06);
  }
  .diagram-map-wrap::-webkit-scrollbar {
    height: 5px;
  }
  .diagram-map-wrap::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
  }
  .diagram-map-wrap::-webkit-scrollbar-thumb {
    background: rgba(42,150,136,0.45);
    border-radius: 999px;
  }
  .diagram-map-wrap svg {
    width: 560px;
    min-width: 560px;
    height: 320px;
  }
  /* Keep zone captions readable; node labels use .s-label fill */
  #campus-map .map-zone-label {
    fill-opacity: 0.72 !important;
  }
  #campus-map .sensor-node .s-label {
    fill-opacity: 1 !important;
  }
  /* Drop the decorative outside-context captions (some sideways-rotated)
     at narrow widths — they compete with the node labels and detection
     story for a small scroll viewport without adding to it. The context
     geometry (road, terrain) stays; only its text captions go. */
  #campus-map .external-context-label,
  #campus-map .external-context-note {
    display: none;
  }
  /* Edge fades + scroll hint */
  .diagram-map-wrap::before,
  .diagram-map-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 5px;
    width: 2.5rem;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .diagram-map-wrap::before {
    left: 0;
    background: linear-gradient(90deg, rgba(6,15,32,0.95), transparent);
  }
  .diagram-map-wrap::after {
    right: 0;
    background: linear-gradient(270deg, rgba(6,15,32,0.95), transparent);
  }
  .diagram-map-wrap.is-scrolled-start::before,
  .diagram-map-wrap.is-scrolled-end::after {
    opacity: 0;
  }
  .diagram-scroll-hint {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 3;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(42,150,136,0.4);
    background: rgba(6,15,32,0.92);
    color: #e8eef8;
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .diagram-scroll-hint-arrows {
    color: var(--accent);
  }
  .diagram-map-wrap.is-hint-dismissed .diagram-scroll-hint {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  /* Panel: sits below the map */
  .diagram-panel {
    position: relative;
    right: auto; top: auto;
    transform: none;
    width: 100%;
    border-radius: 0;
    min-height: auto;
    border: none;
    border-top: 1px solid var(--line-strong);
    padding: 1.25rem 1rem;
    order: 2;
    max-height: none;
  }
  /* Legend: below panel */
  .diagram-legend {
    position: relative;
    bottom: auto; left: auto;
    transform: none;
    z-index: auto;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-top: 1px solid var(--line);
    justify-content: center;
    padding: 0.75rem 1rem;
    order: 3;
  }
}

/* Hero action pair — compact product-site treatment */
.hero-actions {
  gap: 10px;
}

.hero-actions .button {
  min-height: 48px;
  border-radius: 10px;
  padding: 0.7rem 1.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.015em;
}

.hero-actions .button-primary {
  min-width: 218px;
}

.hero-actions .button-secondary {
  min-width: 132px;
}

@media (max-width: 700px) {
  .hero-actions .button-primary,
  .hero-actions .button-secondary {
    min-width: 0;
  }
}
/* ---- Mesh spokes ---- */
.mesh-spoke {
  fill: none;
  stroke: var(--map-accent);
  stroke-width: 0.8;
  stroke-dasharray: 5 9;
  opacity: 0.16;
  animation: mesh-flow 2.8s linear infinite;
  transition: opacity 300ms, stroke-width 300ms;
}
@keyframes mesh-flow { to { stroke-dashoffset: -28; } }
.mesh-spoke.spoke-active { opacity: 0.55; stroke-width: 1.4; }
.mesh-spoke.spoke-alert  { stroke: #ff4444; opacity: 0.7; stroke-width: 1.6; }

/* Gateway hub */
.hub-ring-outer { fill: rgba(201,119,58,0.05); stroke: rgba(201,119,58,0.22); stroke-width: 1; }
.hub-ring-inner { fill: rgba(201,119,58,0.16); stroke: rgba(201,119,58,0.55); stroke-width: 1.5; }
.hub-core { fill: var(--map-accent); filter: url(#nodeGlow); }
.hub-pulse { fill: none; stroke: var(--map-accent); stroke-width: 1; }

/* Data packets travelling node → gateway */
.mesh-packet {
  fill: var(--map-accent-bright);
  opacity: 0.6;
  filter: url(#nodeGlow);
  pointer-events: none;
}

/* Detection pings (JS-spawned expanding rings) */
.event-ping {
  fill: none;
  stroke: var(--map-accent);
  stroke-width: 1.5;
  pointer-events: none;
  animation: ping-out 1.5s cubic-bezier(0.16,1,0.3,1) forwards;
  transform-box: fill-box;
  transform-origin: center;
}
.event-ping-alert { stroke: #ff4444; stroke-width: 2; }
@keyframes ping-out {
  from { transform: scale(0.4); opacity: 0.9; }
  to   { transform: scale(6);   opacity: 0; }
}

/* Threat trail + contact / intrusion marker */
#threat-trail,
.threat-trail {
  stroke: rgba(255,68,68,0.55);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  pointer-events: none;
}
#threat-trail.contact-trail-advisory { stroke: rgba(196,185,99,0.65); }
#threat-trail.contact-trail-elevated { stroke: rgba(255,190,60,0.7); }
#threat-trail.contact-trail-high { stroke: rgba(255,68,68,0.7); }

/* Fading position marks along the approach — same device as the hero map's
   movement track. Flat, static (no pulse), increasing opacity toward the
   current position. */
.threat-trail-dot { fill: rgba(232,238,240,0.7); pointer-events: none; }
#threat-trail-dot-1 { opacity: 0.28; }
#threat-trail-dot-2 { opacity: 0.5; }
#threat-trail-dot-3 { opacity: 0.78; }

#threat-dot,
.contact-marker { pointer-events: none; }
.contact-marker .contact-core { fill: #ff4444; }
.contact-marker .contact-halo { stroke: #ff4444; }
.contact-marker .contact-glyph { color: #0a121c; }
.contact-marker .contact-label,
.contact-marker .contact-sublabel {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: #ff9a9a;
}
.contact-marker .contact-label { font-size: 9px; font-weight: 700; }
.contact-marker .contact-sublabel { font-size: 7px; fill: rgba(255,180,180,0.75); }

.contact-marker.contact-advisory .contact-core { fill: #c4b963; }
.contact-marker.contact-advisory .contact-halo { stroke: #c4b963; }
.contact-marker.contact-advisory .contact-label { fill: #e2d88a; }
.contact-marker.contact-advisory .contact-sublabel { fill: rgba(196,185,99,0.8); }

.contact-marker.contact-elevated .contact-core { fill: #ffbe3c; }
.contact-marker.contact-elevated .contact-halo { stroke: #ffbe3c; }
.contact-marker.contact-elevated .contact-label { fill: #ffd37a; }
.contact-marker.contact-elevated .contact-sublabel { fill: rgba(255,190,60,0.85); }

.contact-marker.contact-high .contact-core { fill: #ff4444; }
.contact-marker.contact-high .contact-halo { stroke: #ff4444; }


/* Map overlays: vignette only. The repeating-linear-gradient scanline
   texture (CRT/monitor-screen effect) was removed — it read as a display
   artifact rather than a survey instrument, working against physical
   credibility. The edge vignette is kept for legibility. */
.map-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(2,7,18,0.55) 100%);
}
.map-coords {
  position: absolute;
  bottom: 24px;
  left: 22px;
  z-index: 6;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(42,150,136,0.55);
  background: rgba(6,15,32,0.6);
  border: 1px solid rgba(42,150,136,0.16);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
}
.map-coords span { color: rgba(255,255,255,0.75); }

@media (prefers-reduced-motion: reduce) {
  #mesh-packets, .event-ping { display: none; }
}

/* Alert / threat node state. Amplitude and speed intentionally reduced from
   the earlier 10-26px/0.5s throb, which read as an alarm klaxon rather than
   an instrument flagging a confirmed event. */
.sensor-node.sensor-alert { animation: alert-glow 1.1s ease-in-out infinite alternate; }
@keyframes alert-glow {
  from { filter: drop-shadow(0 0 4px rgba(255,60,60,0.65)); }
  to   { filter: drop-shadow(0 0 9px rgba(255,60,60,0.9)); }
}
.sensor-node.sensor-alert .s-ring { fill: #ff4444; fill-opacity: 1; transform: scale(1.35); }
.sensor-node.sensor-alert .s-dot  { fill: #ff4444; fill-opacity: 1; }

/* Panel alert banner */
.diagram-panel-alert {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,60,60,0.12);
  border: 1px solid rgba(255,60,60,0.3);
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.75rem;
}
.diagram-panel-alert.show { display: flex; }
.panel-alert-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff4444; flex-shrink: 0;
  animation: alert-blink 0.5s ease-in-out infinite alternate;
}
@keyframes alert-blink { to { opacity: 0.15; } }
.panel-alert-text {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #ff6b6b;
}

/* Panel status row */
.diagram-panel-status { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.65rem; }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0;
  animation: status-breathe 2.2s ease-in-out infinite;
}
.status-dot.red { background: #ff4444; animation: alert-blink 0.5s ease-in-out infinite alternate; }
@keyframes status-breathe { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.status-text {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #4ade80;
}
.status-text.red { color: #ff6b6b; }
.status-dot.amber { background: #ffbe3c; box-shadow: 0 0 8px rgba(255,190,60,0.55); }
.status-dot.yellow { background: #c4b963; box-shadow: 0 0 8px rgba(196,185,99,0.5); }
.status-text.amber { color: #ffbe3c; }
.status-text.yellow { color: #c4b963; }


/* Panel stats grid */
.diagram-panel-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; margin-bottom: 1rem;
}
.pstat {
  background: rgba(0,0,0,0.28); padding: 0.55rem 0.65rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.pstat-label {
  font-family: var(--font-mono); font-size: 0.5rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.pstat-val {
  font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: 700; color: var(--ink); letter-spacing: 0.02em;
}
/* Battery bar */
.pstat-bar {
  display: block; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 0.15rem;
}
.pstat-bar-fill {
  display: block; height: 100%; border-radius: 2px;
  background: #2a9688; width: 0;
  transition: width 600ms cubic-bezier(0.22,1,0.36,1), background 300ms;
}
.pstat-bar-fill.batt-mid { background: #ffbe3c; }
.pstat-bar-fill.batt-low { background: #ff4444; }
/* 24h event sparkline */
.pstat-spark {
  display: flex; align-items: flex-end; gap: 2px;
  height: 14px; margin-top: 0.15rem;
}
.pstat-spark span {
  flex: 1; min-height: 1px; border-radius: 1px 1px 0 0;
  background: rgba(42,150,136,0.55);
  animation: spark-rise 500ms cubic-bezier(0.22,1,0.36,1) backwards;
}
.pstat-spark span:nth-child(odd)  { animation-delay: 80ms; }
.pstat-spark span:nth-child(even) { animation-delay: 160ms; }
.pstat-spark span:last-child { background: #2ee6c8; }
@keyframes spark-rise { from { transform: scaleY(0); transform-origin: bottom; } }

/* Diagram controls */
.diagram-controls {
  display: flex; gap: 0.75rem; margin-top: 1.2rem;
  pointer-events: auto; flex-wrap: wrap;
}
.diagram-ctrl-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(8,18,38,0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--body); cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
  white-space: normal;
  text-align: left;
  max-width: 16rem;
  line-height: 1.25;
}
.diagram-ctrl-btn:hover,
.diagram-ctrl-btn.active {
  background: rgba(42,150,136,0.13); border-color: rgba(42,150,136,0.45); color: var(--accent);
}
.sim-btn:hover, .sim-btn.running {
  background: rgba(255,60,60,0.12) !important;
  border-color: rgba(255,60,60,0.4) !important;
  color: #ff6b6b !important;
}

/* Hover tooltip */
.node-tooltip {
  position: fixed; pointer-events: none; z-index: 100;
  background: rgba(4,10,24,0.97);
  border: 1px solid rgba(42,150,136,0.35);
  border-radius: 8px; padding: 0.6rem 0.85rem;
  display: none; flex-direction: column; gap: 0.15rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  min-width: 150px;
}
.node-tooltip.visible { display: flex; }
.tooltip-id {
  font-family: var(--font-mono); font-size: 0.52rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.tooltip-name { font-size: 0.82rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.tooltip-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.3rem; }
.tooltip-tag {
  font-family: var(--font-mono); font-size: 0.5rem;
  color: var(--accent); background: var(--accent-pale);
  padding: 0.1rem 0.35rem; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .diagram-controls { margin-top: 0.75rem; }
  .diagram-ctrl-btn { padding: 0.35rem 0.65rem; font-size: 0.52rem; }
}
@media (max-width: 600px) {
  .diagram-controls { display: none; }
  .node-tooltip { display: none !important; }
  .map-coords { display: none; }
}

.pcb-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2.5rem 0; }
.pcb-card { background: #040c18; border: 1px solid var(--line-strong); border-radius: 10px; padding: 1.25rem 1.25rem 0.75rem; }
.pcb-card svg { width: 100%; height: auto; display: block; }
.pcb-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0.75rem 0 0; text-align: center; padding-bottom: 0.75rem; }
@media (max-width: 860px) { .pcb-showcase { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
}

/* ============================================================
   OPS / DASHBOARD REDESIGN
   ============================================================ */

/* System status bar */
.sys-status-bar {
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid var(--line);
  padding: 0.42rem 0;
}
.sys-status-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  overflow: hidden;
}
.sys-led-wrap { display: flex; align-items: center; gap: 0.4rem; }
.sys-led {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80; flex-shrink: 0;
  animation: status-breathe 2.2s ease-in-out infinite;
}
.sys-status-txt {
  font-family: var(--font-mono); font-size: 0.57rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.sys-hi { color: var(--accent); font-weight: 700; }
.sys-status-div { width: 1px; height: 10px; background: var(--line); flex-shrink: 0; }

/* Ops section header */
.ops-section-hdr {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.5rem;
}
.ops-label {
  display: block; font-family: var(--font-mono); font-size: 0.57rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem;
}
.ops-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}

/* Deployment table */
.deploy-table { border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.deploy-table-head {
  display: grid; grid-template-columns: 1.6fr 0.55fr 1.8fr 1.8fr;
  background: rgba(42,150,136,0.06); border-bottom: 1px solid var(--line-strong);
  padding: 0.65rem 1.25rem;
}
.deploy-table-head span {
  font-family: var(--font-mono); font-size: 0.53rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.deploy-table-row {
  display: grid; grid-template-columns: 1.6fr 0.55fr 1.8fr 1.8fr;
  padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--line);
  align-items: center; transition: background 150ms;
}
.deploy-table-row:last-child { border-bottom: none; }
.deploy-table-row:hover { background: rgba(42,150,136,0.04); }
.deploy-site { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.deploy-nodes { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; color: var(--accent); }
.deploy-modules { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.04em; color: var(--body); }
.deploy-mode { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }

/* Capabilities grid */
.caps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.25rem; }

/* Ops panel */
.ops-panel {
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
.ops-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.22); flex-shrink: 0;
}
.ops-panel-title {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.ops-panel-sub {
  font-family: var(--font-mono); font-size: 0.53rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.ops-panel-footer {
  padding: 0.55rem 1.25rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.53rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
  flex-shrink: 0;
}

/* Detection log */
.det-log { flex: 1; overflow: hidden; }
.det-row {
  display: grid; grid-template-columns: 82px 72px 1fr auto;
  gap: 0 0.85rem; padding: 0.58rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.04); align-items: center;
}
.det-row:last-child { border-bottom: none; }
.det-time { font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }
.det-node { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
.det-type { font-size: 0.75rem; color: var(--body); }
.det-status {
  font-family: var(--font-mono); font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.14rem 0.42rem; border-radius: 3px; white-space: nowrap;
}
.det-ok   { color: #4ade80; background: rgba(74,222,128,0.1); }
.det-clear { color: var(--muted); background: rgba(255,255,255,0.06); }

/* Node health */
.node-health-list { flex: 1; padding: 0.15rem 0; }
.nh-row {
  display: grid; grid-template-columns: 10px 76px 1fr 38px 90px;
  gap: 0 0.7rem; padding: 0.52rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.04); align-items: center;
}
.nh-row:last-child { border-bottom: none; }
.nh-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0;
  animation: status-breathe 2.2s ease-in-out infinite;
}
.nh-id { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }
.nh-batt-wrap { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.nh-batt-bar { height: 100%; background: #4ade80; border-radius: 2px; }
.nh-batt-low { background: #f59e0b; }
.nh-pct { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); text-align: right; }
.nh-mods { font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }

/* Manufacturer record */
.mfr-record {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0.8rem 1.25rem; display: flex; align-items: center;
  gap: 1.25rem; flex-wrap: wrap; background: rgba(0,0,0,0.12);
}
.mfr-label {
  font-family: var(--font-mono); font-size: 0.53rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); flex-shrink: 0;
}
.mfr-items {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.3rem 0.65rem; font-family: var(--font-mono);
  font-size: 0.64rem; color: rgba(255,255,255,0.42); letter-spacing: 0.04em;
}
.mfr-div { color: var(--line-strong); }

/* ============================================================
   ABOUT PAGE — PWI HERITAGE / MISSION / VISION
   ============================================================ */
.pwi-heritage-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  align-content: start;
}
.heritage-stat strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.heritage-stat span {
  font-size: 0.78rem;
  color: var(--body);
  line-height: 1.5;
}
.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.mv-card {
  border-radius: 12px;
  padding: 2.25rem 2rem;
  border: 1px solid var(--line-strong);
}
.mv-card-mission { background: rgba(42,150,136,0.06); border-color: rgba(42,150,136,0.3); }
.mv-card-vision  { background: var(--panel); }
.mv-card-body {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.75;
  color: var(--body);
  margin: 0.75rem 0 0;
}

/* Mission / Vision — editorial statement rows */
.mv-section-head {
  margin-bottom: 3rem;
}
.mv-section-head > .ops-label {
  display: block;
  margin-bottom: 1.5rem;
}
.mv-section-head-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 2rem 4rem;
  align-items: end;
}
.mv-section-head h2 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.25rem, 3.5vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.mv-section-head-copy p {
  margin: 0 0 0.35rem;
  max-width: 48ch;
  color: var(--body);
  font-size: 0.92rem;
  line-height: 1.75;
  text-wrap: pretty;
}
.mv-statement-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-top: 0;
  margin-bottom: clamp(3.5rem, 6vw, 5rem);
}
.mv-statement-row {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
}
.mv-statement-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.mv-statement-num {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.mv-statement-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mv-statement-text {
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}
.mv-values-intro {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.mv-values-label {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mv-values-intro p {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-align: right;
}
@media (max-width: 600px) {
  .mv-section-head { margin-bottom: 2rem; }
  .mv-section-head-copy { grid-template-columns: 1fr; gap: 1rem; }
  .mv-section-head h2 { font-size: clamp(2.1rem, 11vw, 3.1rem); }
  .mv-statement-list { grid-template-columns: 1fr; gap: 1.75rem; }
  .mv-statement-meta { flex-direction: row; align-items: center; gap: 0.75rem; }
  .mv-statement-num { font-size: 1.4rem; }
  .mv-values-intro { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .mv-values-intro p { text-align: left; }
}
.section.about-direction-section {
  padding-block: 5rem;
  background: var(--bg-2);
}
@media (min-width: 1600px) {
  .section.about-direction-section { padding-block: 5.5rem; }
}
@media (max-width: 900px) {
  .mv-section-head-copy { grid-template-columns: 1fr; gap: 1rem; }
  .origin-layout { gap: 2rem; }
  .section.about-direction-section { padding-block: 4rem; }
}
@media (max-width: 600px) {
  .section.about-direction-section { padding-block: 3.25rem; }
}
.mv-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 0;
}
.mv-value {
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mv-values-grid .mv-value-hdr {
  padding: 0;
  border-bottom: 0;
  background: none;
  gap: 0.55rem;
  /* Base .mv-value-hdr centers the number against the whole title block —
     invisible for one-line titles, but it floats the number away from the
     first line when a title wraps to two (e.g. "Capability / Over Equipment"). */
  align-items: flex-start;
}
.mv-values-grid .sector-hdr-sep { display: none; }
.mv-value-hdr {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.2);
}
.mv-value-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.mv-value-title {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-values-grid .mv-value-title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.mv-value-desc {
  font-size: 0.9rem;
  color: var(--body);
  line-height: 1.65;
  margin: 0;
  padding: 1rem 1rem 0.75rem;
  flex: 1;
}
.mv-values-grid .mv-value-desc {
  padding: 0;
}
.spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0 1rem 0.9rem;
}
.spec-tag {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.48rem;
  background: rgba(42,150,136,0.07);
  border: 1px solid rgba(42,150,136,0.2);
  border-radius: 0;
  color: var(--accent);
}

/* ── PGI INTRODUCTION ─ full-bleed band + signal-flow diagram ── */
.section.pgi-intro-section {
  padding-top: clamp(3rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse 60% 50% at 85% 8%, rgba(42,150,136,0.06), transparent),
    var(--bg-2);
}
/* Used as the How It Works page's top section: clear the fixed header. */
.page-hero.pgi-intro-section {
  padding-top: calc(var(--header-h) + clamp(3rem, 5vw, 4rem));
}
.pgi-intro-frame { position: relative; }
.pgi-intro-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  gap: 1.5rem 3.5rem;
  align-items: end;
}
.pgi-intro-head .ops-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
}
.pgi-intro-head .ops-label::after {
  content: '';
  flex: 1;
  height: 8px;
  background: repeating-linear-gradient(135deg, rgba(42,150,136,0.28) 0 1px, transparent 1px 5px);
}
.pgi-intro-section .ops-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0;
  max-width: 21ch;
}
.pgi-intro-lede { font-size: 0.92rem; color: var(--body); line-height: 1.75; margin: 0 0 0.3rem; max-width: 44ch; }
/* The architecture band reuses .pgi-intro-head for its label rule but has
   no lede in the second column, so at two-column widths its title spans the
   full row instead of wrapping to three ragged lines in a half-width column. */
@media (min-width: 861px) {
  .pgi-architecture-section .ops-title {
    grid-column: 1 / -1;
    text-wrap: balance;
  }
  /* Same situation for the intro h1: its lede was removed from the second
     column, so the title spans the full row rather than breaking its first
     line inside a half-width one. */
  .pgi-intro-head h1 { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .pgi-intro-head { grid-template-columns: 1fr; }
  .pgi-intro-section .ops-title { max-width: none; }
  .pgi-intro-lede { max-width: none; margin-top: 1.25rem; }
}

.pgi-intro-flow { margin-top: clamp(2.5rem, 4.5vw, 3.75rem); }
.pgi-intro-flow svg { display: block; width: 100%; height: auto; }
.pgiflow-stage {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  fill: var(--muted);
}
.pgiflow-box { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.12); }
.pgiflow-box--out { fill: rgba(42,150,136,0.1); stroke: rgba(42,150,136,0.45); }
.pgiflow-node { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; fill: #cdd8e2; }
.pgiflow-node--out { fill: var(--ink); }
.pgiflow-spoke { fill: none; stroke: rgba(42,150,136,0.35); stroke-width: 1; }
.pgiflow-packet { fill: var(--accent); }

/* Central PGI process — one dominant module, three connected stages */
.pgiflow-stage--core { fill: var(--accent); font-weight: 700; }
.pgiflow-module { fill: rgba(42,150,136,0.05); stroke: rgba(42,150,136,0.4); stroke-width: 1.25; }
.pgiflow-module-tick { fill: none; stroke: rgba(42,150,136,0.6); stroke-width: 1.25; }
.pgiflow-stage-box { fill: rgba(255,255,255,0.025); stroke: rgba(42,150,136,0.28); }
.pgiflow-stage-index { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1px; fill: var(--accent); }
.pgiflow-stage-title { font-family: var(--font-sans); font-size: 14px; font-weight: 700; fill: var(--ink); }
.pgiflow-stage-divider { stroke: rgba(255,255,255,0.1); stroke-width: 1; }
.pgiflow-stage-desc { font-family: var(--font-sans); font-size: 9.5px; fill: var(--muted); }
.pgiflow-stage-arrow { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Compact vertical flow — small screens only */
.pgi-intro-flow-mini { display: none; }

.pgi-intro-output {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  /* Generous separation so the mission reads as a closing statement
     rather than another component of the diagram above it. */
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
  padding-top: clamp(1.5rem, 2.6vw, 2.1rem);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.pgi-intro-output-arrow {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1.3;
  flex: 0 0 auto;
}
.pgi-intro-quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  max-width: 820px;
}
.pgi-intro-quote-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  /* The label now precedes the takeaway line, so the gap sits below it. */
  margin-bottom: 0.9rem;
}
@media (max-width: 720px) {
  .pgi-intro-flow { display: none; }
  .pgi-intro-flow-mini {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 2rem;
  }
  .pgiflow-mini-chip {
    font-size: 0.82rem;
    font-weight: 600;
    color: #cdd8e2;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    padding: 0.5rem 0.85rem;
  }
  .pgiflow-mini-chip--out {
    color: var(--ink);
    border-color: rgba(42,150,136,0.45);
    background: rgba(42,150,136,0.1);
  }
  .pgiflow-mini-arrow { color: var(--accent); font-size: 0.9rem; padding-left: 0.85rem; }

  /* The PGI process as one cohesive module with three connected stages */
  .pgiflow-mini-process {
    border: 1px solid rgba(42,150,136,0.4);
    background: rgba(42,150,136,0.05);
    padding: 0.9rem 0.95rem 0.3rem;
  }
  .pgiflow-mini-process-label {
    margin: 0 0 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .pgiflow-mini-stage {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    padding: 0.65rem 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .pgiflow-mini-stage:first-of-type { border-top: none; }
  .pgiflow-mini-stage-index {
    grid-row: 1 / 3;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
  }
  .pgiflow-mini-stage-title {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.9rem;
  }
  .pgiflow-mini-stage-desc {
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--body);
  }
}

/* PGI system map — capabilities converge into one intelligence engine. */
.pgi-system-map {
  --pgi-line: rgba(61, 184, 166, 0.34);
  display: grid;
  grid-template-columns: minmax(185px, 0.78fr) clamp(42px, 5vw, 68px) minmax(430px, 1.65fr) clamp(42px, 5vw, 68px) minmax(200px, 0.82fr);
  align-items: stretch;
  margin-top: clamp(1.85rem, 3.4vw, 3rem);
}
@media (min-width: 941px) {
  .pgi-system-column { margin-top: -0.55rem; }
}
.pgi-system-column {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.85rem;
  min-width: 0;
}
.pgi-system-column-head {
  min-height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pgi-system-kicker,
.pgi-engine-status,
.pgi-engine-mode,
.pgi-system-count,
.pgi-stage-topline,
.pgi-system-engine-foot {
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.pgi-system-kicker {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.pgi-system-column-head h3 {
  margin: 0;
  color: #dbe4eb;
  font-size: 0.88rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.pgi-system-count {
  color: rgba(255,255,255,0.25);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.pgi-system-list {
  display: grid;
  grid-template-rows: repeat(3, minmax(74px, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pgi-system-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(115deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
}
.pgi-system-list li::before {
  content: '';
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 2px;
  background: rgba(255,255,255,0.12);
}
.pgi-system-list strong,
.pgi-system-list small {
  display: block;
}
.pgi-system-list strong {
  color: #d6e0e8;
  font-size: clamp(0.72rem, 0.95vw, 0.82rem);
  font-weight: 650;
  line-height: 1.2;
}
.pgi-system-list small {
  margin-top: 0.28rem;
  color: var(--muted);
  font-size: clamp(0.66rem, 0.8vw, 0.74rem);
  line-height: 1.35;
}
.pgi-system-item-index,
.pgi-system-outcome-mark {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(205,216,226,0.56);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
}
.pgi-system-column--outcomes .pgi-system-column-head {
  border-bottom-color: rgba(61,184,166,0.25);
}
.pgi-system-column--outcomes .pgi-system-kicker,
.pgi-system-column--outcomes .pgi-system-count {
  color: var(--accent);
}
.pgi-system-column--outcomes .pgi-system-list li {
  border-color: rgba(61,184,166,0.34);
  background:
    linear-gradient(100deg, rgba(42,150,136,0.16), rgba(42,150,136,0.055)),
    rgba(9,19,24,0.5);
  box-shadow: inset 0 1px rgba(255,255,255,0.025), 0 12px 28px rgba(0,0,0,0.12);
}
.pgi-system-column--outcomes .pgi-system-list li::before {
  background: var(--accent);
}
.pgi-system-column--outcomes .pgi-system-list strong {
  color: var(--ink);
}
.pgi-system-outcome-mark {
  border-color: rgba(61,184,166,0.45);
  background: rgba(61,184,166,0.1);
  color: var(--accent);
  font-size: 0.85rem;
}

/* The side bridges make the many-to-one and one-to-many relationship explicit. */
.pgi-system-bridge {
  position: relative;
  min-width: 0;
  margin-top: 72px;
  overflow: hidden;
}
.pgi-system-bridge::before {
  content: '';
  position: absolute;
  top: 16.666%;
  bottom: 16.666%;
  width: 1px;
  background: var(--pgi-line);
}
.pgi-system-bridge::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  background: var(--pgi-line);
}
.pgi-system-bridge i {
  position: absolute;
  top: calc(16.666% - 1px);
  width: 50%;
  height: 1px;
  background: var(--pgi-line);
}
.pgi-system-bridge i:nth-child(2) { top: calc(50% - 1px); }
.pgi-system-bridge i:nth-child(3) { top: calc(83.333% - 1px); }
.pgi-system-bridge span {
  position: absolute;
  top: calc(50% - 3px);
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(61,184,166,0.09), 0 0 14px rgba(61,184,166,0.55);
}
.pgi-system-bridge--in::before { left: 50%; }
.pgi-system-bridge--in::after { left: 50%; right: 0; }
.pgi-system-bridge--in i { left: 0; }
.pgi-system-bridge--in span {
  left: calc(50% - 3px);
  animation: pgi-signal-in 2.8s ease-in-out infinite;
}
.pgi-system-bridge--out::before { right: 50%; }
.pgi-system-bridge--out::after { left: 0; right: 50%; }
.pgi-system-bridge--out i { right: 0; }
.pgi-system-bridge--out span {
  right: calc(50% - 3px);
  animation: pgi-signal-out 2.8s 1.1s ease-in-out infinite;
}
@keyframes pgi-signal-in {
  0%, 25% { transform: translateX(-14px); opacity: 0; }
  45%, 75% { opacity: 1; }
  100% { transform: translateX(24px); opacity: 0; }
}
@keyframes pgi-signal-out {
  0%, 25% { transform: translateX(-24px); opacity: 0; }
  45%, 75% { opacity: 1; }
  100% { transform: translateX(14px); opacity: 0; }
}

.pgi-system-engine {
  position: relative;
  min-width: 0;
  padding: 1.05rem;
  border: 1px solid rgba(61,184,166,0.55);
  background:
    linear-gradient(145deg, rgba(35,103,96,0.13), transparent 45%),
    rgba(9,22,27,0.92);
  box-shadow: inset 0 1px rgba(255,255,255,0.035), 0 20px 60px rgba(0,0,0,0.18);
}
.pgi-system-engine::before,
.pgi-system-engine::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.pgi-system-engine::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}
.pgi-system-engine::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
.pgi-system-engine-head {
  min-height: 57px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0.2rem 0.85rem;
  border-bottom: 1px solid rgba(61,184,166,0.22);
}
.pgi-engine-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.pgi-engine-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(61,184,166,0.1);
}
.pgi-system-engine-head h3 {
  margin: 0.38rem 0 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.pgi-engine-mode {
  margin-top: 0.1rem;
  padding: 0.34rem 0.45rem;
  border: 1px solid rgba(61,184,166,0.24);
  color: #79c9bd;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pgi-system-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0.9rem 0 0;
  list-style: none;
}
.pgi-system-stages li {
  position: relative;
  min-width: 0;
  min-height: 185px;
  padding: 0.8rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
}
.pgi-system-stages li:not(:last-child)::after {
  content: '›';
  position: absolute;
  top: calc(50% - 0.65rem);
  right: -0.68rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 0.65rem;
  height: 1.3rem;
  color: var(--accent);
  background: #0b171c;
  font-family: var(--font-mono);
  font-size: 1rem;
}
.pgi-stage-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--accent);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pgi-stage-topline i {
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(61,184,166,0.4);
}
.pgi-stage-glyph {
  display: block;
  width: 39px;
  height: 39px;
  margin: 1rem 0 0.8rem;
  overflow: visible;
  fill: none;
  stroke: rgba(185,204,214,0.52);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pgi-stage-glyph-accent {
  fill: var(--accent);
  stroke: var(--accent);
}
.pgi-system-stages h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.2;
}
.pgi-system-stages p {
  margin: 0.42rem 0 0;
  color: var(--muted);
  /* The old 0.62rem floor governed every viewport up to 1341px, so these
     descriptions rendered at ~9.9px on phones and tablets alike. The floor
     sets the readable minimum; the cap keeps a little growth on wide screens. */
  font-size: clamp(0.75rem, 0.74vw, 0.8rem);
  line-height: 1.45;
}
.pgi-system-engine-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  padding: 0.75rem 0.2rem 0.05rem;
  color: rgba(171,196,202,0.5);
  font-size: 0.48rem;
  letter-spacing: 0.11em;
}
.pgi-system-engine-foot span::before {
  content: '•';
  margin-right: 0.35rem;
  color: var(--accent);
}

@media (max-width: 1100px) {
  .pgi-system-map {
    grid-template-columns: minmax(170px, 0.75fr) 36px minmax(390px, 1.6fr) 36px minmax(185px, 0.8fr);
  }
  .pgi-system-list li { padding-inline: 0.7rem; }
  .pgi-system-stages li { padding: 0.7rem; }
}
@media (max-width: 940px) {
  .pgi-system-map { grid-template-columns: 1fr; }
  .pgi-system-bridge {
    width: 44px;
    height: 48px;
    min-height: 48px;
    margin: 0 auto;
    overflow: visible;
  }
  .pgi-system-bridge::before,
  .pgi-system-bridge::after,
  .pgi-system-bridge i { display: none; }
  .pgi-system-bridge span,
  .pgi-system-bridge--in span,
  .pgi-system-bridge--out span {
    inset: 0 auto auto 50%;
    width: 1px;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(var(--pgi-line), var(--accent));
    box-shadow: none;
    animation: none;
  }
  .pgi-system-bridge span::after {
    content: '';
    position: absolute;
    left: -3px;
    bottom: 0;
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    transform: rotate(45deg);
  }
  .pgi-system-list { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
  .pgi-system-column-head { min-height: 52px; }
  .pgi-system-column--sources .pgi-system-list li::before { inset: -1px -1px auto -1px; width: auto; height: 2px; }
  .pgi-system-column--outcomes .pgi-system-list li::before { inset: auto -1px -1px -1px; width: auto; height: 2px; }
}
@media (max-width: 640px) {
  .pgi-system-map { margin-top: 2.25rem; }
  .pgi-system-list { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(72px, auto)); }
  .pgi-system-engine { padding: 0.85rem; }
  .pgi-system-stages { grid-template-columns: 1fr; }
  .pgi-system-stages li {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.9rem;
    padding: 0.85rem;
  }
  .pgi-system-stages li:not(:last-child)::after {
    content: '⌄';
    top: auto;
    right: calc(50% - 0.65rem);
    bottom: -0.68rem;
    width: 1.3rem;
    height: 0.65rem;
  }
  .pgi-stage-topline { grid-column: 1 / -1; }
  .pgi-stage-glyph { grid-row: 2 / 4; margin: 0.8rem 0 0; }
  .pgi-system-stages h4 { align-self: end; margin-top: 0.7rem; }
  .pgi-system-stages p { align-self: start; }
  .pgi-system-engine-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pgi-system-bridge span { animation: none; }
}

/* ── CORE QUALITIES ─ stacked photo + copy rows, alternating sides ── */
.quality-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.quality-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.quality-row--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.quality-row--reverse .quality-row-media { order: 2; }
.quality-row--reverse .quality-row-copy { order: 1; }
.quality-row-media {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: #111c26;
}
.quality-row-media img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0.82) saturate(0.76) contrast(0.94) hue-rotate(-4deg);
  transform: scale(1.04);
  transform-origin: center;
}
.quality-row--contrast .quality-row-media img {
  filter: brightness(0.82) saturate(0.76) contrast(0.94) hue-rotate(-4deg);
}
.quality-row-media img[src*="tank-farm"] {
  filter: brightness(0.73) saturate(0.66) contrast(0.99) hue-rotate(-4deg);
}
.quality-row-media::after {
  content: none;
}
.quality-row-copy { min-width: 0; }
@media (max-width: 820px) {
  .quality-row,
  .quality-row--reverse {
    grid-template-columns: 1fr;
  }
  .quality-row--reverse .quality-row-media,
  .quality-row--reverse .quality-row-copy { order: initial; }
}
.quality-pane-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.quality-pane-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: quality-led 2.2s infinite;
}
@keyframes quality-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  .quality-pane-label::before { animation: none; }
}
.quality-pane-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1rem;
}
.quality-pane-desc { font-size: 1rem; color: var(--body); line-height: 1.8; margin: 0; max-width: 620px; }
.qualities-cta {
  margin: 1.75rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.qualities-cta a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(47, 156, 142, 0.35);
  transition: border-color 200ms ease;
}
.qualities-cta a:hover { border-bottom-color: var(--accent); }

/* ── CORE QUALITIES (legacy divided row — kept for reference) ── */
.qualities-head { max-width: none; margin-bottom: 2.75rem; }
.qualities-head .ops-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.qualities-head .ops-label::after {
  content: '';
  flex: 1;
  height: 8px;
  background: repeating-linear-gradient(135deg, rgba(42,150,136,0.28) 0 1px, transparent 1px 5px);
}
.qualities-head-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem 3.5rem;
}
.qualities-head-row .ops-title { flex: 1 1 420px; }
.qualities-head-row .leopard-lede { flex: 1 1 280px; max-width: 38ch; margin: 0.3rem 0 0; }
.qualities-grid.mv-values-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}
.qualities-grid .mv-value {
  flex: 1 1 220px;
  padding: 1.75rem 1.75rem 0 0;
  gap: 0.9rem;
  border-left: 1px solid var(--line-strong);
  padding-left: 1.75rem;
}
.qualities-grid .mv-value:first-child { border-left: 0; padding-left: 0; }
.qualities-grid .mv-value-hdr { padding: 0; border-bottom: 0; background: none; gap: 0.6rem; align-items: baseline; }
.qualities-grid .mv-value-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
@media (max-width: 700px) {
  .qualities-grid .mv-value { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-strong); padding-top: 1.5rem; }
  .qualities-grid .mv-value:first-child { border-top: 0; padding-top: 0; }
}

/* ── LEOPARD INTELLIGENCE SYSTEM ─ connected sequence flow ─────────── */
.leopard-head { max-width: 640px; margin-bottom: 2.75rem; }
.leopard-lede { font-size: 0.95rem; color: var(--body); line-height: 1.7; margin: 1rem 0 0; }
.leopard-flow { display: flex; flex-wrap: nowrap; align-items: stretch; margin-top: 1rem; }
.leopard-node { flex: 1 1 0; min-width: 0; position: relative; padding: 0 1.1rem; }
.leopard-node:first-child { padding-left: 0; }
.leopard-letter { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--accent); line-height: 1; }
.leopard-title { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 0.6rem 0 0.6rem; }
.leopard-desc { font-size: 0.76rem; color: var(--muted); line-height: 1.5; }
.leopard-track { position: absolute; top: 1.35rem; left: -1px; width: calc(100% + 2px); height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 15%, var(--line-strong) 85%, transparent); z-index: 0; }
.leopard-node:first-child .leopard-track { background: linear-gradient(90deg, var(--accent) 0%, var(--line-strong) 15%, var(--line-strong) 85%, transparent); }
.leopard-node::after { content: '\203A'; position: absolute; top: 0.65rem; right: -0.15rem; font-family: var(--font-display); font-size: 1.3rem; color: var(--muted); z-index: 1; }
.leopard-node:last-child::after { content: ''; }
.leopard-dot { position: absolute; top: 1.05rem; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); z-index: 1; }
/* Mobile — compact timeline: legend row of letters (tap to jump) +
   dense one-row-per-step list, so the whole cycle stays scannable
   without a long stack of large letters and full-height descriptions. */
.leopard-mini { display: none; }
@media (max-width: 900px) {
  .leopard-flow { display: none; }
  .leopard-mini {
    display: block;
    margin-top: 1.5rem;
  }
  .leopard-mini-legend {
    display: flex;
    gap: 0.4rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem;
    margin-bottom: 0.25rem;
  }
  .leopard-mini-chip {
    flex: 1 1 0;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--muted);
    padding: 0.5rem 0.15rem;
    border-radius: 3px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .leopard-mini-chip.is-active { color: var(--accent); background: rgba(42,150,136,0.1); }
  .leopard-mini-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
  }
  .leopard-mini-row:last-child { border-bottom: 0; }
  .leopard-mini-letter { font-family: var(--font-mono); font-weight: 800; font-size: 0.9rem; color: var(--accent); flex: 0 0 auto; width: 1rem; }
  .leopard-mini-title { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; flex: 0 0 auto; width: 4.2rem; }
  .leopard-mini-desc { font-size: 0.72rem; color: var(--muted); line-height: 1.45; }
}

/* ── POTENTIAL APPLICATIONS ─ prominent, development-stage positioning ── */
.section.industries-section {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg-2);
  padding-block: clamp(3.75rem, 4.5vw, 5rem);
}
.industries-head {
  display: grid;
  grid-template-columns: minmax(11rem, 0.35fr) minmax(0, 1.65fr);
  align-items: start;
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
  max-width: none;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.industries-head .ops-label {
  margin: 0;
  padding-top: 0.45rem;
  white-space: nowrap;
}
.industries-head .ops-title {
  max-width: 30ch;
  font-size: clamp(1.65rem, 2.8vw, 2.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.industries-tags {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.industry-tag {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 4.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(42, 150, 136, 0.3);
  background: rgba(42, 150, 136, 0.09);
  box-shadow: inset 0 2px 0 rgba(42, 150, 136, 0.32);
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
}
@media (max-width: 1020px) {
  .industries-head {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .industries-head .ops-label { padding-top: 0; }
}
@media (max-width: 900px) {
  .industries-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .industries-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .section.industries-section { padding-block: 3.5rem; }
  .industries-tags { grid-template-columns: 1fr; }
  .industry-tag { min-height: 4rem; }
}

/* Emphasized lede variant — a short, prominent statement rather than a
   long supporting paragraph. */
.origin-lede--lg {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  line-height: 1.6;
  color: var(--ink);
}

/* Compact card grid for a short, non-sequential list of items — e.g. areas
   of experience — as an alternative to .pipeline-steps, which visually
   implies an ordered/mandatory workflow. */
.helps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.helps-card {
  min-width: 0;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line-strong);
  background: rgba(42, 150, 136, 0.045);
}
.helps-card-num {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
.helps-card-title {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .helps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .helps-grid { grid-template-columns: 1fr; }
}

/* ── COMPANY STORY (PWI TO PGI) ──────────────────────── */
.story-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.story-teaser-body-col { max-width: 720px; }
.story-teaser-lede { font-size: 0.95rem; color: var(--body); line-height: 1.75; margin: 1rem 0 1.5rem; }
.story-teaser-timeline {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-strong);
  padding-left: 1.75rem;
}
.story-teaser-point { display: flex; flex-direction: column; gap: 0.4rem; }
.story-teaser-year {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.story-teaser-desc { font-size: 0.82rem; color: var(--body); line-height: 1.5; max-width: 26ch; }
.story-teaser-line {
  width: 1px;
  height: 2.5rem;
  margin: 1rem 0 1rem -1.75rem;
  padding-left: 1.75rem;
  background: linear-gradient(var(--line-strong), var(--accent));
}
@media (max-width: 900px) {
  .story-teaser-grid { grid-template-columns: 1fr; }
  .story-teaser-timeline { border-left: 0; padding-left: 0; margin-top: 1rem; flex-direction: row; gap: 2.5rem; }
  .story-teaser-line { width: 2.5rem; height: 1px; margin: 0.5rem 0; padding: 0; background: linear-gradient(90deg, var(--line-strong), var(--accent)); }
}

.about-proof-section {
  padding-block: 5.5rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 7px),
    var(--bg-2);
}
.about-proof-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 1.5rem 4rem;
  align-items: end;
  margin-bottom: 3rem;
}
.about-proof-head .ops-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.about-proof-head .ops-label::after {
  content: '';
  flex: 1;
  height: 8px;
  background: repeating-linear-gradient(135deg, rgba(42,150,136,0.28) 0 1px, transparent 1px 5px);
}
.about-proof-head h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2.4rem, 4.4vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.about-proof-head > p {
  margin: 0 0 0.35rem;
  max-width: 48ch;
  color: var(--body);
  font-size: 0.92rem;
  line-height: 1.75;
}
.about-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.about-proof-grid article {
  min-height: 230px;
  padding: 1.4rem;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(8,16,25,0.62);
}
.about-proof-num {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}
.about-proof-stat {
  display: block;
  margin-top: 2.4rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.4vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.about-proof-grid h3 {
  margin: 1.25rem 0 0.7rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.about-proof-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
}
@media (max-width: 860px) {
  .mission-vision-grid { grid-template-columns: 1fr; }
  .mv-values-grid { grid-template-columns: 1fr 1fr; }
  .pwi-heritage-nums { grid-template-columns: 1fr 1fr; }
  .about-proof-head { grid-template-columns: 1fr; }
  .about-proof-grid { grid-template-columns: 1fr; }
  .about-proof-grid article { min-height: 0; }
  .about-proof-stat { margin-top: 1.75rem; }
}
@media (max-width: 580px) {
  .mv-values-grid { grid-template-columns: 1fr; }
  .pwi-heritage-nums { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   MARKET SECTORS
   ============================================================ */
.sectors-section { background: var(--bg); }
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
/* Row 1: two wide cards */
.sector-card:nth-child(1),
.sector-card:nth-child(2) { grid-column: span 3; }
/* Row 2: three narrower cards */
.sector-card:nth-child(3),
.sector-card:nth-child(4),
.sector-card:nth-child(5) { grid-column: span 2; }
.sector-card {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.sector-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(42,150,136,0.35), 0 8px 32px rgba(42,150,136,0.10);
}

/* Numbered header bar — sui.io style */
.sector-card-hdr {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.sector-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.sector-hdr-sep {
  width: 1px;
  height: 11px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.sector-name {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer bar */
.sector-card-ftr {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.sector-desc {
  font-size: 0.82rem;
  color: var(--body);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 860px) {
  .sectors-grid { grid-template-columns: repeat(2, 1fr); }
  .sector-card:nth-child(n) { grid-column: span 1; }
}
@media (max-width: 480px) {
  .sectors-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   INTELLIGENCE PIPELINE
   ============================================================ */
.intel-pipeline-section { background: var(--bg-2); }
.intel-pipeline-hdr {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}
.intel-pipeline-sub {
  color: var(--body);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-top: 1rem;
}
.intel-pipeline {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  position: relative;
}
.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 140px;
  max-width: 180px;
  padding: 2rem 1rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  position: relative;
  transition: border-color 200ms, transform 200ms;
}
.pipeline-stage:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.pipeline-stage-final {
  border-color: rgba(42,150,136,0.45);
  background: rgba(42,150,136,0.06);
}
.pipeline-stage-final:hover {
  border-color: var(--accent);
}
.pipeline-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(42,150,136,0.12);
  border: 1px solid rgba(42,150,136,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.pipeline-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent);
}
.pipeline-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.pipeline-stage-final .pipeline-label { color: var(--accent); }
.pipeline-desc {
  font-size: 0.78rem;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}
.pipeline-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  color: rgba(42,150,136,0.4);
  align-self: center;
}
.pipeline-arrow svg { width: 32px; height: 16px; }

/* Responsive */
@media (max-width: 860px) {
  .deploy-table-head { display: none; }
  .deploy-table-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 1rem 1.25rem; }
  .deploy-mode { grid-column: 1 / -1; }
  .caps-grid { grid-template-columns: 1fr; }
  .mfr-record { flex-direction: column; align-items: flex-start; gap: 0.65rem; }
  .sys-status-row { gap: 0.5rem; }

  /* Pipeline — stack vertically */
  .intel-pipeline { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .pipeline-arrow { transform: rotate(90deg); width: 100%; justify-content: center; height: 24px; }
  .pipeline-stage { max-width: 100%; width: 100%; flex-direction: row; text-align: left; gap: 1rem; padding: 1.25rem; }
  .pipeline-stage > div { display: flex; flex-direction: column; justify-content: center; }
  .pipeline-icon { margin-bottom: 0; flex-shrink: 0; }
  .pipeline-label { margin-bottom: 0.25rem; }

  /* About — mission/vision/values */
  .mission-vision-grid { grid-template-columns: 1fr; }
  .mv-values-grid { grid-template-columns: 1fr 1fr; }
  .pwi-heritage-nums { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .deploy-table-row { grid-template-columns: 1fr; }
  .sys-status-div { display: none; }

  /* Hero actions — stack buttons, left-aligned, auto-width */
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Sectors — single column */
  .sectors-grid { grid-template-columns: 1fr; }

  /* Pipeline — tighten padding */
  .pipeline-stage { padding: 1rem; gap: 0.75rem; }
  .pipeline-icon { width: 36px; height: 36px; }
  .pipeline-icon svg { width: 16px; height: 16px; }

  /* About values — single column */
  .mv-values-grid { grid-template-columns: 1fr; }

  /* Diagram controls — hide on phone, too small */
  .diagram-controls { display: none; }

  /* CTA band */
  .cta-band-actions { flex-direction: column; width: 100%; }
  .cta-band-actions .button { width: 100%; text-align: center; justify-content: center; }

  /* Contact grid */
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Status bar — only show first two items */
  .sys-status-bar .sys-status-txt:nth-child(n+4) { display: none; }
}

/* ============================================================
   SECTOR CARD — ILLUSTRATION PANEL
   ============================================================ */
.sector-illustration {
  width: 100%;
  background: #040c18;
  overflow: hidden;
  position: relative;
  flex: 1;
}
.sector-illustration::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(42,150,136,0.07) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms;
}
.sector-card:hover .sector-illustration::after { opacity: 1; }
.sector-illustration svg { width: 100%; height: auto; display: block; }
.sector-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.sector-desc { font-size: 0.78rem; color: var(--muted); margin: 0; line-height: 1.55; }

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */

/* Nav link animated underline */
.pgisr-nav a:not(.pgisr-nav-cta) { position: relative; }
.pgisr-nav a:not(.pgisr-nav-cta)::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--accent);
  transition: right 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pgisr-nav a:not(.pgisr-nav-cta):hover::after,
.pgisr-nav a[aria-current="page"]::after { right: 0; }

/* Enhanced button hover — keep in sync with primary system */
.button-primary:hover {
  background: #0bb39d;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
}
.button-secondary:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.045);
  color: var(--ink);
  box-shadow: none;
}

/* Nav CTA shares primary button treatment */
.pgisr-nav-cta:hover {
  background: #0bb39d !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset !important;
}

/* Pipeline stage glow on hover */
.pipeline-stage:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(42,150,136,0.14);
}

/* Feature card enhanced glow */
.feature-card:hover {
  box-shadow: 0 4px 24px rgba(0,207,192,0.10), 0 0 0 1px rgba(0,207,192,0.22);
  border-color: rgba(0,207,192,0.28);
}

/* Form focus ring glow */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,207,192,0.12), 0 0 16px rgba(0,207,192,0.06);
}

/* ============================================================
   HERITAGE TIMELINE
   ============================================================ */
.heritage-timeline-section { background: var(--bg-2); }
.heritage-timeline-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.5rem 0 1rem;
}
.heritage-timeline-wrap::-webkit-scrollbar { display: none; }
.heritage-timeline-wrap svg { display: block; min-width: 640px; width: 100%; height: auto; }
@media (max-width: 700px) {
  .heritage-timeline-wrap svg { min-width: 580px; }
}

/* ============================================================
   FULL-BLEED STATEMENT BAND
   ============================================================ */
.statement-band {
  background: #05070a;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 5.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.statement-band::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 80vw);
  height: 260px;
  background: radial-gradient(ellipse, rgba(42,150,136,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.statement-band-inner { position: relative; z-index: 1; }
.statement-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
  opacity: 0.7;
}
.statement-fact {
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 1.25rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.statement-fact-hi {
  color: var(--ink);
  font-weight: 700;
}
.statement-footnote {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  margin: 0;
}
@media (max-width: 600px) {
  .statement-band { padding: 4rem 1.5rem; }
}

/* ============================================================
   HERO AMBIENT — dot grid + scan line
   ============================================================ */
.hero-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(42,150,136,0.11) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, black 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, black 0%, transparent 80%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}
/* ============================================================
   INTELLIGENCE FEED SECTION
   ============================================================ */
.intel-feed-section {
  background: var(--bg-2);
  margin-top: 4rem;
}
.intel-feed-layout {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 5rem;
  align-items: start;
}

/* Left column: numbered pipeline steps */
.pipeline-steps {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
}
.pipeline-step {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-strong);
}
.step-num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 3px;
  opacity: 0.7;
  min-width: 20px;
}
.step-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.2rem;
  letter-spacing: -0.01em;
}
.step-desc {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* Right column: live detection feed panel */
.intel-feed-panel {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.feed-panel-hdr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  padding: 0.75rem 1.25rem;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--line-strong);
}
.feed-panel-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.feed-live-badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.feed-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: status-breathe 2.2s ease-in-out infinite;
}
.feed-cols-hdr {
  display: grid;
  grid-template-columns: 68px 68px 1fr 80px 74px;
  gap: 0 0.5rem;
  padding: 0.5rem 1.25rem;
  background: rgba(42,150,136,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.feed-cols-hdr span {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(42,150,136,0.5);
  min-width: 0;
  overflow-wrap: break-word;
}
.feed-log-body {
  min-height: 170px;
}
.feed-row {
  display: grid;
  grid-template-columns: 68px 68px 1fr 80px 74px;
  gap: 0 0.5rem;
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: center;
}
.feed-row:last-child { border-bottom: none; }
.feed-row-new {
  background: rgba(42,150,136,0.06);
  animation: feed-row-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.feed-row-old { opacity: 0; }
.feed-row-sample { opacity: 0.5; font-style: italic; }
.feed-row-sample .feed-status { opacity: 0.7; }
.feed-row-idle { justify-items: center; }
.feed-idle-msg { grid-column: 1 / -1; color: var(--muted); font-size: 0.78rem; text-align: center; }
@keyframes feed-row-in {
  from { opacity: 0; transform: translateY(-6px); background: rgba(42,150,136,0.13); }
  to   { opacity: 1; transform: none; background: rgba(42,150,136,0.04); }
}
.feed-time  { font-family: var(--font-mono); font-size: 0.54rem; color: var(--muted); letter-spacing: 0.03em; }
.feed-node  { font-family: var(--font-mono); font-size: 0.57rem; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; }
.feed-type  { font-size: 0.74rem; color: var(--body); }
.feed-conf  { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; color: var(--body); }
.feed-status {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.14rem 0.38rem;
  border-radius: 3px;
  text-align: center;
}
.status-high { color: #ff7676; background: rgba(255,93,93,0.13); }
.status-elevated { color: #ffbe3c; background: rgba(255,190,60,0.13); }
.status-advisory { color: #c4b963; background: rgba(196,185,99,0.12); }
.status-nominal { color: #55c7b8; background: rgba(85,199,184,0.1); }
.feed-panel-footer {
  padding: 0.5rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.2);
  text-transform: uppercase;
  background: rgba(0,0,0,0.18);
}
@media (max-width: 980px) {
  .intel-feed-layout { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 700px) {
  /* Cap feed panel height on mobile so it doesn't scroll endlessly */
  .intel-feed-panel { max-height: 340px; }
  /* Sector illustrations — cap height on single-column layout */
  .sector-illustration { max-height: 200px; }
  .origin-statement-headline { font-size: clamp(2.1rem, 9vw, 3rem); }
  /* ops-title on mobile */
  .ops-title { font-size: clamp(2rem, 6vw, 3.5rem); }
}
@media (max-width: 600px) {
  .feed-cols-hdr { display: none; }
  .feed-row {
    grid-template-columns: 58px 58px 1fr 44px 50px;
    gap: 0 0.25rem;
    padding: 0.46rem 0.85rem;
  }
  .feed-time, .feed-node { font-size: 0.5rem; }
  .feed-type { font-size: 0.68rem; }
  .feed-conf, .feed-status { font-size: 0.48rem; }
}

/* ============================================================
   LARGE SCREEN (1600px+)
   ============================================================ */
@media (min-width: 1600px) {
  :root { --max: 1380px; }
  .section { padding: 7rem 0; }
  .hero-title-row { padding: 2.5rem 0 1.5rem; }
  .hero-text { padding: 3rem 0 4rem; max-width: 640px; }
}

/* ============================================================
   ULTRA-WIDE (2000px+)
   ============================================================ */
@media (min-width: 2000px) {
  :root { --max: 1480px; }
}

/* ============================================================
   HOMEPAGE POLISH — tighter, calmer presentation
   ============================================================ */
:root {
  --body: #91b6d1;
}

.hero {
  min-height: clamp(580px, 76svh, 820px);
  background:
    radial-gradient(ellipse 55% 62% at 88% 48%, rgba(42,150,136,0.075) 0%, transparent 64%),
    linear-gradient(160deg, #121c28 0%, #0c1017 58%),
    var(--bg);
}

.hero::after {
  opacity: 0.62;
}

.hero-title-row {
  padding: 1.4rem 0 1rem;
}

.hero-product-name {
  font-size: clamp(4.5rem, 18vw, 13rem);
  line-height: 0.88;
  max-width: 100%;
}

.hero-text {
  max-width: 535px;
  padding: 2rem 0 2.5rem;
}

.subtitle {
  max-width: 500px;
  line-height: 1.6;
}

.hero-actions {
  margin-top: 1.65rem;
}

.hero-dot-grid {
  opacity: 0.25;
}

.creds-ticker-label-col {
  min-width: 148px;
  justify-content: center;
  padding: 0 1.25rem;
}

.creds-ticker-label {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 0.64rem;
}

.cred-tick-item {
  padding: 1.05rem 1.6rem;
}

@media (max-width: 959px) {
  .hero {
    min-height: 0;
  }

  .hero-product-name {
    font-size: clamp(4.5rem, 20vw, 10rem);
  }

  .hero-text {
    max-width: 620px;
  }
}

@media (max-width: 700px) {
  .hero {
    padding-bottom: 2.25rem;
  }

  .hero-title-row {
    padding: 1rem 0 0.75rem;
  }

  .hero-product-name {
    font-size: clamp(3.8rem, 21vw, 7rem);
  }

  .hero-text {
    padding: 1.25rem 0 0;
  }

  .subtitle {
    font-size: 0.96rem;
    line-height: 1.58;
  }

  .button {
    min-height: 48px;
  }

  .creds-ticker-inner {
    animation-duration: 45s;
  }
}

/* Mobile usability pass */
@media (max-width: 700px) {
  .pgisr-mobile-nav .mobile-nav-sheet {
    padding: 1.15rem 1.15rem 1.4rem;
  }

  .pgisr-mobile-nav .mobile-nav-links a {
    font-size: 1.2rem;
    padding: 0.95rem 0.1rem;
  }

  .pgisr-mobile-nav .pgisr-nav-cta {
    min-height: 50px;
    margin-top: 1.5rem;
    padding: 0.85rem 1.1rem;
  }

  /* Give the identity and actions a deliberate phone-sized rhythm. */
  .hero-product-name {
    font-size: clamp(3.7rem, 18.5vw, 6.5rem);
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .button {
    width: 100%;
    max-width: none;
    padding-inline: 1rem;
  }

  /* Credentials become a user-controlled swipe row instead of a marquee. */
  .creds-ticker-outer {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
  }

  .creds-ticker-outer::-webkit-scrollbar {
    display: none;
  }

  .creds-ticker-inner {
    animation: none;
  }

  .cred-tick-item:nth-child(n+7) {
    display: none;
  }

  .cred-tick-item {
    min-width: 138px;
    padding: 0.85rem 1rem;
  }

  /* Keep the deployment story legible without making it dominate the page. */
  .diagram-section-hdr {
    padding: 1.25rem 0 0.85rem;
  }

  .diagram-section-sub {
    line-height: 1.55;
  }

  .diagram-map-wrap {
    height: 250px;
    min-height: 250px;
  }

  .diagram-map-wrap svg {
    width: 480px;
    min-width: 480px;
    height: 250px;
  }

  .diagram-panel {
    padding: 0.9rem 1rem;
  }

  .diagram-panel-idle,
  .diagram-legend {
    display: none;
  }

  /* Reduce scroll fatigue while retaining all five market stories. */
  .sectors-section.section {
    padding-block: 2.5rem;
  }

  .sectors-grid {
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .sector-illustration {
    max-height: 138px;
  }

  .sector-card-body {
    padding: 0.85rem 1rem 1rem;
  }

  .sector-card-ftr {
    padding: 0.65rem 1rem;
  }

  .sector-desc {
    font-size: 0.76rem;
    line-height: 1.5;
  }

  /* Compact the long footer without removing useful contact information. */
  .pgisr-footer-col-head {
    margin-bottom: 0.65rem;
  }

  .pgisr-footer-nav-list li {
    margin-bottom: 0.35rem;
  }
}

.template-data-disclosure {
  margin: 0;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid rgba(42,150,136,0.2);
  background: rgba(42,150,136,0.05);
  color: rgba(42,150,136,0.85);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   BUTTON INTERACTIONS — restrained, tactile, and consistent
   ============================================================ */
.button,
.pgisr-nav-cta,
.diagram-ctrl-btn {
  transform: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.button:hover,
.pgisr-nav-cta:hover {
  transform: none;
}

.button-primary {
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset;
}

.button-primary:hover {
  background: #0bb39d;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
}

.button-secondary:hover {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.24);
  color: var(--ink);
  box-shadow: none;
}

.pgisr-nav-cta:hover {
  background: #0bb39d !important;
  border-color: #0bb39d !important;
  box-shadow: none !important;
}

.button:active,
.pgisr-nav-cta:active,
.diagram-ctrl-btn:active {
  opacity: 0.78;
  transition-duration: 60ms;
}

.button:focus-visible,
.pgisr-nav-cta:focus-visible,
.diagram-ctrl-btn:focus-visible,
.pgisr-mobile-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.diagram-ctrl-btn:hover,
.diagram-ctrl-btn.active {
  background: rgba(42,150,136,0.07);
  border-color: rgba(42,150,136,0.32);
  color: #53d7c5;
}

.sim-btn:hover,
.sim-btn.running {
  background: rgba(255,80,80,0.07) !important;
  border-color: rgba(255,100,100,0.28) !important;
  color: #ff8585 !important;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .pgisr-nav-cta,
  .diagram-ctrl-btn {
    transition: none;
  }
}

/* ============================================================
   SECTOR SELECTOR + SCENARIO SCENES
   ============================================================ */
.scenario-scene {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.scenario-scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}
#campus-map.scene-swap .scenario-scene.is-active {
  animation: scene-crossfade 0.5s ease;
}
@keyframes scene-crossfade {
  from { opacity: 0.15; }
  to { opacity: 1; }
}

.sector-selector {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 1rem 1.5rem;
  align-items: start;
  padding-bottom: 1.25rem;
}
.sector-selector-meta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.sector-selector-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}
.capability-layer {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(42,150,136,0.22);
  background: rgba(42,150,136,0.06);
}
.capability-layer-kicker {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.capability-layer-label {
  display: inline-block;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  transform-origin: left center;
}
.capability-layer-label.is-swapping {
  animation: layer-swap 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes layer-swap {
  0% { opacity: 0; transform: translateY(6px) rotateX(18deg); }
  100% { opacity: 1; transform: none; }
}

.sector-select-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  outline: none;
}
.sector-select-track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.sector-select-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  text-align: left;
  padding: 0.85rem 0.9rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.1);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  font: inherit;
  min-height: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.sector-select-card:hover {
  border-color: rgba(42,150,136,0.35);
  background: rgba(42,150,136,0.05);
}
.sector-select-card.is-selected {
  border-color: rgba(42,150,136,0.55);
  background: rgba(42,150,136,0.09);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.sector-select-card .sector-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.sector-select-card .sector-name {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #e8eef8;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-transform: uppercase;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.sector-select-card .sector-desc {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
  white-space: normal;
  width: 100%;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sector-select-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sector-capabilities {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem 1rem;
}
.sector-capabilities li {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.78rem;
  color: var(--body);
  line-height: 1.45;
}
.sector-capabilities li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 5px;
  background: var(--accent);
}

.hero-dot-grid {
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pipeline staged activation */
.pipeline-step {
  opacity: 0.45;
  transform: translateX(-6px);
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.45s ease;
}
.pipeline-steps.pipeline-go .pipeline-step,
.pipeline-step.is-active {
  opacity: 1;
  transform: none;
}
.pipeline-step.is-active .step-num {
  color: var(--accent);
}

/* Feed drawer + selectable rows */
.feed-row {
  cursor: pointer;
}
.feed-row:hover,
.feed-row:focus-visible {
  background: rgba(42,150,136,0.06);
}
.feed-row.is-selected {
  background: rgba(42,150,136,0.1);
  outline: 1px solid rgba(42,150,136,0.28);
}
.feed-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.feed-detail-drawer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.9rem 1rem 1rem;
  background: rgba(0,0,0,0.22);
}
.feed-detail-drawer[hidden] {
  display: none !important;
}
.feed-detail-drawer.is-open {
  display: block;
  animation: drawer-in 0.28s ease;
}
@keyframes drawer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.feed-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}
.feed-drawer-kicker {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.feed-drawer-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--muted);
  width: 28px;
  height: 28px;
  cursor: pointer;
  line-height: 1;
}
.feed-drawer-close:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}
.feed-drawer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.feed-drawer-grid dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.15rem;
}
.feed-drawer-grid dd {
  margin: 0;
  font-size: 0.8rem;
  color: #e8eef8;
}
.feed-drawer-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--body);
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .sector-selector {
    grid-template-columns: 1fr;
  }
  .sector-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sector-select-track {
    display: flex;
    flex-direction: column;
    overflow: visible;
    scroll-snap-type: none;
    gap: 0.65rem;
    padding: 0;
  }
  .sector-select-card {
    flex: none;
    width: 100%;
    max-width: none;
    scroll-snap-align: unset;
    min-height: auto;
  }
  .sector-select-card.is-selected {
    transform: none;
  }
  .sector-capabilities {
    grid-template-columns: 1fr;
  }
  .feed-drawer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .scenario-scene,
  .sector-select-card,
  .capability-layer-label,
  .pipeline-step,
  .hero-dot-grid,
  .feed-detail-drawer.is-open,
  #campus-map.scene-swap .scenario-scene.is-active {
    transition: none !important;
    animation: none !important;
  }
  .pipeline-step {
    opacity: 1;
    transform: none;
  }
}

/* Readability floor for content-facing technical labels. Dense telemetry
   keeps its smaller scale, while navigational and explanatory type remains
   comfortably legible on desktop. */
.eyebrow,
.ops-label,
.about-id-kicker,
.about-id-code,
.about-hero-dl-row dt,
.about-id-foot,
.mv-statement-label,
.mv-value-title,
.spec-tag,
.sector-name,
.pipeline-label,
.capability-layer-kicker,
.feed-panel-title,
.feed-live-badge,
.feed-drawer-kicker,
.feed-drawer-grid dt,
.form-success-kicker,
.pgisr-footer-cta-kicker,
.pgisr-footer-slogan,
.pgisr-footer-meta span,
.pgisr-footer-col-head,
.pgisr-footer-signal-cell span,
.template-data-disclosure,
.contact-info-label,
.contact-data-table .cdt-label,
.form-row label {
  font-size: 0.72rem;
  line-height: 1.4;
}
.about-id-num,
.mv-value-num,
.sector-num,
.stat-band-item span {
  font-size: 0.7rem;
}
.origin-path p { font-size: 0.86rem; }
.about-proof-grid p { font-size: 0.9rem; }
.pgisr-footer-cta-inline { font-size: 0.72rem; }
.pgisr-footer-nav-list a,
.pgisr-footer-contact-row { font-size: 0.9rem; }

/* ============================================================
   MOBILE READINESS — touch sizing, readable telemetry, no clipping
   ============================================================ */
@media (max-width: 700px) {
  .pgisr-header-inner {
    padding-inline: 14px;
  }

  .pgisr-brand {
    min-height: 44px;
  }

  /* Small uppercase labels remain secondary without becoming illegible. */
  .eyebrow,
  .ops-label,
  .about-id-kicker,
  .about-id-code,
  .about-hero-dl-row dt,
  .about-id-foot,
  .mv-statement-label,
  .mv-value-title,
  .spec-tag,
  .sector-name,
  .pipeline-label,
  .capability-layer-kicker,
  .feed-panel-title,
  .feed-live-badge,
  .feed-drawer-kicker,
  .feed-drawer-grid dt,
  .form-success-kicker,
  .pgisr-footer-slogan,
  .pgisr-footer-meta span,
  .pgisr-footer-col-head,
  .template-data-disclosure {
    font-size: 0.7rem;
    line-height: 1.4;
  }

  .about-id-num,
  .mv-value-num,
  .sector-num,
  .stat-band-item span {
    font-size: 0.68rem;
  }

  /* Prevent iOS focus zoom and strengthen field-label contrast. */
  .form-row label {
    color: var(--body);
    font-size: 0.72rem;
    line-height: 1.45;
  }

  .form-row input,
  .form-row select,
  .form-row textarea {
    min-height: 48px;
    font-size: 1rem;
  }

  /* 48px is a single-line touch target, right for the inputs and the select
     but not for a free-text box: it clipped the placeholder mid-word. */
  .form-row textarea { min-height: 110px; }

  .contact-info-label,
  .contact-data-table .cdt-label {
    color: var(--body);
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .contact-side-note,
  .origin-body,
  .feature-desc {
    color: var(--body);
  }

  /* Navigation and contact actions need a reliable finger-sized hit area. */
  .breadcrumb a,
  .contact-info-val a,
  .pgisr-footer-contact-row a,
  .pgisr-footer-nav-list a,
  .pgisr-footer-legal a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  .pgisr-footer-nav-list li {
    margin-bottom: 0;
  }

  /* Center icons only for the single-line linked rows; keep the address pin
     aligned with the first line of its two-line address. */
  .pgisr-footer-contact-row:has(a) {
    align-items: center;
  }

  .pgisr-footer-contact-row:has(a) svg {
    margin-top: 0;
  }

  .pgisr-footer-legal {
    gap: 0.25rem 1.25rem;
  }

  /* Finish the footer touch pass: these standalone text links were still
     visually compact even though the primary navigation already met target. */
  .pgisr-footer-cta-inline,
  .pgisr-footer-pwi-credit a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  .pgisr-footer-nav-list a,
  .pgisr-footer-legal a {
    padding-block: 0.6rem;
    line-height: 1.4;
  }

  .pgisr-footer-logo {
    min-height: 44px;
  }

  /* Keep the decorative mark inside the viewport at every phone width. */
  .pgisr-footer-mark {
    max-width: 100%;
  }

  /* The event log was clipped by a fixed panel height on phones. */
  .intel-feed-panel {
    max-height: none;
  }

  .feed-log-body {
    min-height: 0;
  }

  .feed-row {
    min-height: 56px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "time node conf"
      "type type status";
    gap: 0.3rem 0.65rem;
    padding: 0.65rem 0.85rem;
  }

  .feed-time { grid-area: time; }
  .feed-node { grid-area: node; }
  .feed-type { grid-area: type; }
  .feed-conf { grid-area: conf; text-align: right; }
  .feed-status { grid-area: status; justify-self: end; }

  .feed-time,
  .feed-node,
  .feed-conf {
    font-size: 0.66rem;
  }

  .feed-type {
    min-width: 0;
    padding-right: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .feed-status {
    font-size: 0.7rem;
    min-width: 78px;
  }

  .feed-panel-footer {
    font-size: 0.66rem;
    line-height: 1.45;
  }

  .feed-drawer-close {
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   COMPACT MOBILE FOOTER — tighten vertical rhythm without losing
   any content or touch target sizing.
   ============================================================ */
.pgisr-footer-quicklinks-mobile { display: none; }

@media (max-width: 700px) {
  /* Note: no override of .pgisr-footer's own margin-top here — that
     gap belongs to the preceding section's padding and stays as-is. */

  .pgisr-footer-lead {
    padding: 1.25rem 0 0;
    gap: 1.1rem;
  }

  /* Tighten the CTA block itself — kicker/title/sub/link were each
     carrying desktop-scale spacing that mobile doesn't need. */
  .pgisr-footer-cta-kicker {
    margin-bottom: 0.4rem;
  }

  .pgisr-footer-cta-sub {
    margin-top: 0.4rem;
  }

  .pgisr-footer-cta-inline {
    margin-top: 0.6rem;
  }

  .pgisr-footer-cols {
    gap: 1.1rem;
  }

  .pgisr-footer-col-head {
    margin-bottom: 0.5rem;
  }

  /* Only email + phone remain in Contact on mobile; the address row
     is hidden below. */
  .pgisr-footer-contact-row {
    margin-bottom: 0.6rem;
  }

  .pgisr-footer-contact-row:last-of-type {
    margin-bottom: 0;
  }

  .pgisr-footer-address {
    display: none;
  }

  /* Navigate + Explore collapse into the single "Quick links" column
     defined for mobile — LinkedIn lives in that grid too — and the
     desktop columns are hidden here. */
  .pgisr-footer-nav-desktop {
    display: none;
  }

  .pgisr-footer-quicklinks-mobile {
    display: block;
  }

  .pgisr-footer-nav-list {
    row-gap: 0.3rem;
  }

  /* Signature + baseline read as one grouped block instead of two
     separately padded rows, and the mobile baseline keeps only a
     single concise copyright line. */
  .pgisr-footer-signature {
    gap: 0.6rem 1.5rem;
    padding: 1.1rem 0 0.6rem;
  }

  .pgisr-footer-baseline {
    padding: 0.6rem 0 0.75rem;
  }

  .pgisr-footer-loc {
    display: none;
  }

  /* Secondary footer links only need a comfortable tap size, not the
     44px primary-action minimum — this is what actually shortens the
     Quick links list. The PWI credit link is excluded: it's a citation
     inline in a sentence, not a standalone nav target, and a forced
     touch-height there inflated that line's leading. */
  .pgisr-footer-contact-row a,
  .pgisr-footer-nav-list a,
  .pgisr-footer-legal a,
  .pgisr-footer-cta-inline {
    min-height: 40px;
  }

  .pgisr-footer-nav-list a,
  .pgisr-footer-legal a {
    padding-block: 0.4rem;
  }

  /* Quick links reads as a single deliberate grid the moment it
     appears, rather than a tall single column that only becomes a
     grid below the unrelated 640px breakpoint. */
  .pgisr-footer-quicklinks-mobile .pgisr-footer-nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0.3rem;
  }

  .pgisr-footer-quicklinks-mobile .pgisr-footer-nav-list li {
    margin-bottom: 0;
  }

  /* Legal links sit as a quiet second line under the credit. Pulls in
     the gap created by their 40px touch target (padding invisible above
     their text) plus the baseline's box gap. */
  .pgisr-footer-legal {
    margin-top: -0.5rem;
  }
}

/* ============================================================
   HOMEPAGE ARCHITECTURE — editorial grid + technical modules
   ============================================================ */
.hero {
  min-height: clamp(680px, 86svh, 880px);
  border-bottom: 1px solid var(--line-strong);
}

.hero-body {
  isolation: isolate;
}

.hero-body::before {
  content: '';
  position: absolute;
  inset: 0 38% 0 auto;
  width: 1px;
  background: linear-gradient(180deg, transparent 4%, var(--line-strong) 16%, var(--line-strong) 88%, transparent);
  opacity: 0.7;
  pointer-events: none;
}

.hero-body > .shell {
  display: block;
  position: relative;
}

.hero-title-row,
.hero-text {
  width: min(58%, 680px);
  max-width: none;
}

.hero-title-row {
  padding: 2.15rem 0 1.25rem;
  border-bottom: 1px solid var(--line-strong);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero-kicker span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(42,150,136,0.75);
}

.hero-product-name {
  font-size: clamp(5.4rem, 13.6vw, 12.5rem);
  letter-spacing: -0.035em;
}

.hero-text {
  padding: 2rem 0 2.25rem;
}

.hero .hero-visual {
  display: none;
}


.hero .button {
  border-radius: 0;
}

.hero-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2.25rem 0 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}

.hero-spec-grid > div {
  min-width: 0;
  padding: 0.75rem 0.85rem;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.015);
}

.hero-spec-grid dt,
.hero-spec-grid dd {
  margin: 0;
}

.hero-spec-grid dt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-spec-grid dd {
  margin-top: 0.3rem;
  color: var(--body);
  font-size: 0.72rem;
}

.diagram-fullscreen {
  margin-top: 4.75rem;
  border-top: 1px solid var(--line-strong);
}

.diagram-section-hdr {
  position: relative;
  align-items: center;
  min-height: 168px;
  padding: 2.15rem 0;
  border-bottom: 1px solid var(--line-strong);
}

.diagram-section-hdr::before,
.diagram-section-hdr::after {
  content: '';
  position: absolute;
  top: -1px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--accent);
}

.diagram-section-hdr::before {
  left: 0;
  border-left: 1px solid var(--accent);
}

.diagram-section-hdr::after {
  right: 0;
  border-right: 1px solid var(--accent);
}

.diagram-section-hdr-left {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: end;
  flex: 1 1 760px;
}

.diagram-section-hdr-left .ops-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.diagram-section-hdr-left .ops-label::after {
  content: '';
  flex: 1;
  height: 8px;
  background: repeating-linear-gradient(135deg, rgba(42,150,136,0.28) 0 1px, transparent 1px 5px);
}

.diagram-section-title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.3rem, 4.5vw, 4.8rem);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.diagram-section-sub {
  max-width: 520px;
  padding-bottom: 0.35rem;
  font-size: 0.95rem;
}

.diagram-controls {
  align-self: flex-end;
}

.diagram-ctrl-btn,
.sector-select-card,
.capability-layer,
.diagram-panel,
.intel-feed-panel {
  border-radius: 0;
}

.sector-selector {
  gap: 0;
  padding: 0;
  border-left: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.sector-selector-meta {
  align-self: stretch;
  padding: 1.25rem;
  border-right: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.015);
}

.capability-layer {
  margin-top: auto;
}

.sector-select-track {
  gap: 0;
}

.sector-select-card {
  position: relative;
  min-height: 142px;
  padding: 1.15rem 1rem;
  border-width: 0 1px 0 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 7px);
  transform: none;
  box-shadow: none;
}

.sector-select-card.is-selected {
  transform: none;
  box-shadow: inset 0 3px 0 var(--accent);
  background: linear-gradient(180deg, rgba(42,150,136,0.12), rgba(42,150,136,0.035));
}

.sector-select-card::after {
  content: '+';
  position: absolute;
  right: 0.65rem;
  bottom: 0.5rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.sector-capabilities {
  gap: 0;
  border-top: 1px solid var(--line-strong);
}

.sector-capabilities li {
  min-height: 58px;
  padding: 0.85rem 1rem 0.85rem 1.8rem;
  border-right: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.012);
}

.sector-capabilities li::before {
  left: 0.9rem;
  top: 1.45rem;
}

.intel-feed-section {
  margin-top: 4.75rem;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 7px),
    var(--bg-2);
}

.intel-feed-section > .shell {
  padding-block: 4.25rem 3.5rem;
}

.intel-feed-layout {
  display: block;
}

.pipeline-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 3.5rem 5rem;
  align-items: start;
}

.intel-feed-copy {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  align-self: start;
}

.intel-feed-copy .ops-title {
  margin-top: 1.4rem;
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.pipeline-steps {
  gap: 0.8rem;
  border-top: 0;
}

.pipeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  min-height: 92px;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--line-strong);
  background: rgba(10,16,23,0.72);
}

.step-num {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0;
  border-right: 1px solid var(--line-strong);
  font-size: 0.72rem;
}

.step-title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.step-desc {
  max-width: 38rem;
}

.intel-feed-panel {
  margin-top: 3.25rem;
  background: rgba(8,14,21,0.82);
}

.feed-panel-hdr {
  min-height: 62px;
}

.pipeline-capabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2.75rem;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}

.pipeline-capabilities article {
  min-height: 158px;
  padding: 1.2rem;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.012);
}

.pipeline-capabilities span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.pipeline-capabilities h3 {
  margin: 2.5rem 0 0.65rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pipeline-capabilities p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

@media (min-width: 701px) {
  .diagram-stage {
    height: 88svh;
    min-height: 520px;
  }
}

@media (max-width: 1100px) {
  .hero-title-row,
  .hero-text {
    width: 57%;
  }

  .hero-product-name {
    font-size: clamp(5rem, 13vw, 9rem);
  }

  .sector-selector {
    grid-template-columns: 1fr;
  }

  .sector-selector-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
  }

  .capability-layer {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .pipeline-overview {
    gap: 3rem;
  }

  .diagram-section-hdr-left {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .hero-body::before {
    display: none;
  }

  .hero-title-row,
  .hero-text {
    width: 100%;
  }

  .diagram-section-hdr-left {
    grid-template-columns: 1fr;
  }

  .pipeline-overview {
    grid-template-columns: 1fr;
  }

  .intel-feed-copy {
    position: static;
  }

  .pipeline-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .hero {
    min-height: 0;
  }

  .hero-title-row {
    padding-top: 1.35rem;
  }

  .hero-kicker {
    margin-bottom: 0.85rem;
    font-size: 0.64rem;
  }

  .hero-product-name {
    font-size: clamp(3.8rem, 21vw, 7rem);
  }

  .hero-spec-grid {
    margin-top: 1.75rem;
  }

  .diagram-fullscreen,
  .intel-feed-section {
    margin-top: 3.5rem;
  }

  .diagram-section-hdr {
    min-height: 0;
    padding: 2rem 0;
  }

  .diagram-section-title {
    font-size: clamp(2.3rem, 12vw, 4rem);
  }

  .diagram-section-sub {
    font-size: 0.88rem;
  }

  .sector-selector-meta {
    display: flex;
  }

  .sector-select-track {
    grid-template-columns: 1fr;
  }

  .sector-select-card {
    min-height: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .sector-capabilities,
  .pipeline-capabilities {
    grid-template-columns: 1fr;
  }

  .sector-capabilities li,
  .pipeline-capabilities article {
    min-height: 0;
  }

  .intel-feed-section > .shell {
    padding-block: 3.5rem 3rem;
  }

  .intel-feed-copy .ops-title {
    font-size: clamp(2.8rem, 15vw, 4.5rem);
  }

  .pipeline-step {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 0;
    padding: 1rem;
  }

  .pipeline-capabilities h3 {
    margin-top: 1.75rem;
  }
}

/* ============================================================
   ABOUT PAGE — V2 REDESIGN
   ============================================================ */
.page-hero.about-hero-v2 {
  position: relative;
  padding-top: calc(var(--header-h) + 1.75rem);
  /* Trimmed so "The Origin" doesn't read as a separate, disconnected
     section below a dead-air gap. Second small pass on top of the first
     ~30% cut, paired with .origin-section's padding-top below. */
  padding-bottom: clamp(2rem, 5vw, 2.5rem);
}
/* The hero establishes experience; origin and process begin a distinct,
   quieter chapter below it. */
.about-origin-section .origin-grid {
  margin-top: 0;
}
.about-origin-section .origin-statement-headline {
  max-width: 18ch;
  font-size: clamp(2rem, 3vw, 3rem);
}
.about-origin-section .origin-path {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.about-hero-v2-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: 1.75rem 0 2.5rem;
}
@media (max-width: 900px) {
  .about-hero-v2-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.about-hero-v2-head {
  position: relative;
}
.about-hero-v2-title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0.9rem 0 1.4rem;
  max-width: 31ch;
  text-wrap: balance;
}
.about-hero-v2-lede {
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
  line-height: 1.75;
  color: var(--body);
  margin: 0;
  max-width: 62ch;
}

/* Identity card — bordered dossier tab beside the hero copy */
.about-id-card {
  position: relative;
  margin: 0;
  padding: 1.6rem 1.5rem;
  border: 0;
  background: linear-gradient(180deg, var(--accent-pale), transparent 100%);
}
.about-id-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.55;
}
.about-id-card-label {
  display: block;
  margin: 0 0 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.about-id-cell {
  position: relative;
  padding: 0.85rem 0;
  min-width: 0;
  border-top: 1px solid var(--line);
}
.about-id-cell:first-of-type {
  border-top: none;
  padding-top: 0;
}
.about-id-cell dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.about-id-cell dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (max-width: 900px) {
  .about-id-card { max-width: 420px; }
}

/* Heritage statement */
.section.heritage-section {
  overflow: hidden;
  padding-block: 3.25rem;
}
.heritage-statement {
  display: grid;
  grid-template-columns: minmax(10rem, 0.32fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  padding-top: clamp(1.25rem, 2vw, 2rem);
  border-top: 1px solid var(--line-strong);
}
.heritage-statement h2 {
  max-width: 34ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 3.25rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
@media (max-width: 700px) {
  .page-hero.about-hero-v2 {
    padding-top: calc(var(--header-h) + 1.25rem);
    padding-bottom: 2.5rem;
  }
  .about-hero-v2-grid {
    padding: 1.5rem 0 2rem;
  }
  .section.heritage-section {
    padding-block: 2.5rem;
  }
  .heritage-statement {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .heritage-statement h2 {
    max-width: 26ch;
    font-size: clamp(1.65rem, 7.2vw, 2.15rem);
    line-height: 1.12;
  }
}

/* Legacy timeline styles retained for archived timeline variants. */
.heritage-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 3rem 0 0;
  padding: 0;
}
.heritage-node {
  position: relative;
  padding-top: 1.6rem;
}
.heritage-node::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: calc(-1 * clamp(1.5rem, 3vw, 2.5rem));
  height: 1px;
  background: var(--line-strong);
}
.heritage-node:last-child::before { right: 0; }
.heritage-node::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--bg);
}
.heritage-node--now::after {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-pale), 0 0 12px rgba(42,150,136,0.5);
}
.heritage-year {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.heritage-node--now .heritage-year {
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid rgba(42,150,136,0.35);
  padding: 0.15rem 0.5rem;
}
.heritage-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.heritage-desc {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--body);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 880px) {
  .heritage-track {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 2.25rem;
  }
  .heritage-node {
    padding: 0 0 2rem 1.75rem;
  }
  .heritage-node::before {
    top: 2px;
    right: auto;
    left: 4px;
    width: 1px;
    height: 100%;
    background: var(--line-strong);
  }
  .heritage-node:last-child { padding-bottom: 0.25rem; }
  .heritage-node:last-child::before { display: none; }
  .heritage-node::after { top: 2px; }
  .heritage-desc { max-width: 52ch; }
}

/* Origin chain schematic — full-width row under the two columns */
.origin-chain-wrap {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
}
.origin-chain {
  display: block;
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin: 0 auto;
}

/* ============================================================
   HEADER V2 — full-height squared CTA flush right
   ============================================================ */
.pgisr-header { background: rgba(10,16,26,0.98); }
.pgisr-header-inner { padding-right: 0; }
.pgisr-nav { gap: clamp(1.5rem, 3.5vw, 3.25rem); height: 100%; }
.pgisr-nav a { color: rgba(255,255,255,0.82); }
.pgisr-nav a:hover,
.pgisr-nav a[aria-current="page"] { color: var(--accent); }
.pgisr-nav a.pgisr-nav-cta {
  align-self: stretch;
  height: auto;
  border-radius: 0;
  padding: 0 clamp(1.5rem, 3vw, 2.75rem);
  margin-left: clamp(0.5rem, 2vw, 1.5rem);
  background: var(--accent);
  color: #0c1017 !important;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
.pgisr-nav a.pgisr-nav-cta:hover { background: #33b3a2; color: #0c1017 !important; }


/* ============================================================
   REDUCED MOTION — halt continuous CSS animation (marquee etc.)
   SVG SMIL animations are paused via JS (svg.pauseAnimations()).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .creds-ticker-inner,
  .sys-led,
  .about-id-led,
  .mobile-nav-led {
    animation: none !important;
  }
}

/* Mobile nav CTA matches established orange primary CTA treatment */
.mobile-nav-sheet .pgisr-nav-cta {
  border-radius: 0;
  color: #140a03 !important;
}

/* ============================================================
   QUIET BAND — visual rest between dense demo sections (index)
   ============================================================ */
.quiet-band {
  padding-block: clamp(4.5rem, 9vw, 8rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.quiet-band .ops-label { margin-bottom: 1.5rem; }
.quiet-band-statement {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.quiet-band-note {
  margin: 1.5rem 0 0;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--body);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .quiet-band-note {
    white-space: normal;
    max-width: 36ch;
  }
}

/* ============================================================
   CONTACT FORM — optional mission-details group
   ============================================================ */
.form-optional {
  margin: 0.5rem 0 1rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
}
.form-optional summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body);
}
.form-optional summary::-webkit-details-marker { display: none; }
.form-optional summary::before {
  content: '+';
  color: var(--accent);
  font-size: 0.9rem;
  line-height: 1;
}
.form-optional[open] summary::before { content: '−'; }
.form-optional[open] summary { border-bottom: 1px solid var(--line); }
.form-optional-body { padding: 1rem 1rem 0.25rem; }

/* ============================================================
   PHOTO SLOTS — framed placeholders until real assets land
   ============================================================ */
.heritage-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 3.5rem;
}
.photo-slot { margin: 0; }
.photo-slot-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-strong);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 9px),
    var(--panel);
}
.photo-slot-frame::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(255,255,255,0.12);
  pointer-events: none;
}
.photo-slot-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.photo-slot-pending {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 700px) {
  .heritage-photos { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ — accordion in house style (contact page)
   ============================================================ */
.faq-list {
  max-width: 760px;
  border-top: 1px solid var(--line-strong);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 2rem 1.15rem 0;
  position: relative;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  flex-shrink: 0;
}
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1rem;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--accent); }
.faq-item > p {
  margin: 0;
  padding: 0 2rem 1.35rem 2.15rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--body);
  max-width: 62ch;
}

/* ============================================================
   404 — branded recovery page
   ============================================================ */
.error-page {
  min-height: calc(100vh - 74px);
  display: grid;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(5rem, 9vw, 8rem);
  background:
    radial-gradient(circle at 76% 56%, rgba(42, 150, 136, 0.14), transparent 28rem),
    linear-gradient(145deg, #06101f 0%, #0b1c35 100%);
  color: #fff;
}
.error-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
}
.error-page .shell { position: relative; z-index: 1; }
.error-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}
.error-code {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.07em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.42);
}
.error-title {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.error-copy {
  max-width: 34rem;
  margin: 1.5rem 0 2rem;
  color: rgba(255,255,255,0.67);
  font-size: 1.02rem;
  line-height: 1.75;
}
.error-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.error-signal {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.error-signal-ring {
  position: absolute;
  width: calc(26% + (var(--ring) * 16%));
  aspect-ratio: 1;
  border: 1px solid rgba(42, 150, 136, calc(0.62 - (var(--ring) * 0.1)));
  border-radius: 50%;
}
.error-signal-ring:nth-child(1) { --ring: 1; }
.error-signal-ring:nth-child(2) { --ring: 2; }
.error-signal-ring:nth-child(3) { --ring: 3; }
.error-signal-ring:nth-child(4) { --ring: 4; }
.error-signal-core {
  width: 0.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0.7rem rgba(42,150,136,0.12), 0 0 3rem rgba(42,150,136,0.65);
}
.error-signal-label {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .error-page { min-height: calc(100vh - 64px); }
  .error-grid { grid-template-columns: 1fr; }
  .error-signal { display: none; }
  .error-code { font-size: clamp(6rem, 34vw, 9rem); }
}

/* Preliminary engineering packaging studies */
.eng-studies-section {
  background: #0d141b;
  color: #f3f5f4;
  border-block: 1px solid rgba(183,201,210,0.12);
}
.eng-studies-section .ops-label { color: #91a47f; }
.eng-studies-section .ops-title { color: #f3f5f4; }
.eng-studies-lede {
  max-width: 44rem;
  margin: 0 0 1.75rem;
  color: #a2afb9;
  font-size: 0.95rem;
  line-height: 1.65;
}
/* Realistic concept product gallery */
.packaging-sector-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}
.packaging-sector-tab {
  appearance: none;
  margin: 0;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(183,201,210,0.22);
  background: transparent;
  color: #8a9aa6;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.packaging-sector-tab:hover {
  color: #d7e2e8;
  border-color: rgba(183,201,210,0.45);
}
.packaging-sector-tab.is-selected,
.packaging-sector-tab[aria-selected="true"] {
  color: #e9eeec;
  border-color: rgba(118, 134, 106, 0.7);
  background: rgba(118, 134, 106, 0.12);
}
@media (max-width: 760px) {
  .packaging-sector-tab {
    flex: 1 1 auto;
    text-align: center;
  }
}
.packaging-sector-tab:focus-visible {
  outline: 2px solid rgba(118, 134, 106, 0.85);
  outline-offset: 2px;
}
.node-board {
  transition: opacity 0.35s ease;
}
.node-board.is-swapping {
  animation: packaging-swap 0.45s ease;
}
@keyframes packaging-swap {
  0% { opacity: 0.72; }
  100% { opacity: 1; }
}
.real-concept-note {
  margin: 0 0 1.25rem;
  color: #8797a3;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 40rem;
}
/* Single sensor node — full-width diagram board + callout tile row */
.node-board {
  margin-top: 0.5rem;
  border: 1px solid rgba(183,201,210,0.18);
  background: #0b1218;
}
.node-board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid rgba(183,201,210,0.12);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.node-board-head strong { color: #e8edeb; font-weight: 500; }
.node-board-head span { color: #8797a3; }
.node-board-media {
  max-height: 32rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111c26;
}
.node-board-media img {
  display: block;
  max-height: 32rem;
  width: auto;
  max-width: 100%;
}
.node-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(183,201,210,0.12);
}
.node-tile {
  padding: 1.15rem 1.15rem 1.25rem;
  border-right: 1px solid rgba(183,201,210,0.12);
}
.node-tile:last-child { border-right: 0; }
.node-tile-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.node-tile strong {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8edeb;
  font-weight: 500;
  margin: 0.45rem 0 0.4rem;
}
.node-tile p {
  font-size: 0.85rem;
  color: #a2afb9;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 900px) {
  .node-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node-tile:nth-child(2) { border-right: 0; }
  .node-tile:nth-child(1), .node-tile:nth-child(2) {
    border-bottom: 1px solid rgba(183,201,210,0.12);
  }
}

/* ---- Footer credit on phones: two lines on the footer's left edge ----
   Desktop keeps the single middot-separated line with the legal links on
   the right. On a phone that line wrapped wherever the width fell. Two
   balanced lines, flush with the logo and columns above so the whole
   footer shares one edge, and the legal links on one row beneath:
     A division of PWI, Inc. · Wichita, Kansas
     © 1963–2026 PWI, Inc. · All rights reserved
   Markup: .pgisr-footer-credit-part / .pgisr-footer-credit-sep spans
   inside .pgisr-footer-pwi-credit (part, sep, part, sep, part, sep, part);
   the middle separator (4th child) becomes the line break. */
@media (max-width: 700px) {
  .pgisr-footer-baseline {
    justify-content: flex-start;
    gap: 0.4rem 0;
    padding-top: 1.4rem;
  }
  .pgisr-footer-baseline-meta,
  .pgisr-footer-pwi-credit {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  .pgisr-footer-pwi-credit {
    display: block;
    text-align: left;
    line-height: 1.7;
  }
  .pgisr-footer-credit-sep:nth-child(4) {
    display: block;
    height: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }
  .pgisr-footer-legal {
    width: 100%;
    justify-content: flex-start;
    gap: 0 1.75rem;
    margin-top: 0;
  }
  /* Contact and Explore rows on the same 40px pitch: the contact rows
     carried a 0.6rem margin on top of their 40px tap boxes while the
     Explore links had none, so the second row of each column drifted
     apart by a few px. */
  /* body.pgisr prefix: pgisr-system.css (loaded after this sheet) sets
     0.2rem on body.pgisr .pgisr-footer-contact-row at this width. */
  body.pgisr .pgisr-footer-col .pgisr-footer-contact-row {
    margin-bottom: 0;
  }
}