/* ==========================================================================
   PortNOC — site stylesheet
   Converted from the Claude Design artboards in the repository root.
   Palette, type scale, and spacing rhythm are taken verbatim from the design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Dark ground */
  --ink:            #0B1512;   /* page background */
  --ink-deep:       #081110;   /* footer */
  --panel:          #132220;   /* raised panel on dark */
  --panel-hi:       #1B2E29;   /* hover panel */

  /* Light ground */
  --paper:          #F3F6F4;
  --paper-mist:     #E8EFEB;
  --paper-pure:     #FFFFFF;

  /* Text */
  --text-on-dark:   #F3F6F4;
  --text-bright:    #FFFFFF;
  --text-muted:     #A6B3AC;   /* muted on dark */
  --text-on-light:  #101512;
  --text-quiet:     #53615A;   /* muted on light */

  /* Brand */
  --mint:           #49E8AB;
  --green:          #16A571;
  --green-deep:     #0E7047;   /* accent readable on light grounds */

  /* Signal */
  --amber:          #E5B85C;
  --red:            #E26767;

  /* Hairlines */
  --rule-dark:      rgba(73, 232, 171, 0.20);
  --rule-dark-soft: rgba(73, 232, 171, 0.14);
  --rule-dark-faint:rgba(73, 232, 171, 0.08);
  --rule-light:     rgba(16, 21, 18, 0.14);
  --rule-light-soft:rgba(16, 21, 18, 0.12);

  /* Type families */
  --font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --measure:      1520px;
  --measure-tight:1120px;
  --gutter:       clamp(20px, 4vw, 56px);
  --header-h:     76px;

  --lift: linear-gradient(135deg, var(--green) 0%, var(--mint) 100%);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Sticky header must not cover the target of an in-page anchor. */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--mint); text-decoration: none; }
a:hover { color: var(--green); }

img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); }
input, textarea, select, button { font: inherit; }

::selection { background: var(--green); color: var(--ink); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--mint);
  color: var(--ink);
  padding: 12px 18px;
  font: 500 13px var(--font-mono);
}
.skip-link:focus { left: 12px; top: 12px; color: var(--ink); }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap--tight { max-width: var(--measure-tight); }

/* Vertical rhythm. Three densities, matching the design's clamp values. */
.pad     { padding-top: clamp(80px, 9vw, 152px); padding-bottom: clamp(80px, 9vw, 152px); }
.pad--md { padding-top: clamp(64px, 7vw, 120px); padding-bottom: clamp(64px, 7vw, 120px); }
.pad--sm { padding-top: clamp(48px, 5vw, 80px);  padding-bottom: clamp(48px, 5vw, 80px); }

/* Section grounds */
.band--dark  { background: var(--ink);       color: var(--text-on-dark); }
.band--panel { background: var(--panel);     color: var(--text-on-dark); }
.band--light { background: var(--paper);     color: var(--text-on-light); }
.band--mist  { background: var(--paper-mist);color: var(--text-on-light); }

.band--rule-top    { border-top: 1px solid var(--rule-dark); }
.band--rule-bottom { border-bottom: 1px solid var(--rule-dark); }
.band--light.band--rule-top,
.band--mist.band--rule-top    { border-top-color: var(--rule-light-soft); }
.band--light.band--rule-bottom,
.band--mist.band--rule-bottom { border-bottom-color: var(--rule-light-soft); }

.cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 88px);
}
.cols--wide  { gap: clamp(40px, 6vw, 96px); }
.cols--end   { align-items: flex-end; }
.cols--center{ align-items: center; }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
}
/* Hairline grid: 1px gap over a rule-coloured backdrop reads as a divider. */
.grid-hair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--rule-light);
}
.grid-hair--dark {
  background: var(--rule-dark-soft);
  border: 1px solid var(--rule-dark-soft);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font: 600 12px var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.band--dark .eyebrow,
.band--panel .eyebrow { color: var(--mint); }

.eyebrow--mono {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.22em;
  margin-bottom: 26px;
}

.label {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.band--dark .label,
.band--panel .label { color: var(--text-muted); }

.h1 {
  margin: 0;
  font: 600 clamp(40px, 5.4vw, 76px)/1.02 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--text-bright);
  text-wrap: balance;
}
.h2 {
  margin: 0;
  font: 600 clamp(32px, 4.4vw, 62px)/1.03 var(--font-display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h2--sm { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.05; }
.h3 {
  margin: 0;
  font: 500 clamp(22px, 2vw, 28px)/1.15 var(--font-display);
  letter-spacing: -0.03em;
}
.band--dark .h2, .band--panel .h2,
.band--dark .h3, .band--panel .h3 { color: var(--text-bright); }

.lede {
  margin: 0;
  font: 300 clamp(17px, 1.45vw, 21px)/1.6 var(--font-body);
  color: var(--text-muted);
  text-wrap: pretty;
}
.band--light .lede, .band--mist .lede { color: var(--text-quiet); }

.prose {
  margin: 0 0 20px;
  max-width: 520px;
  font: 300 clamp(16px, 1.3vw, 18px)/1.7 var(--font-body);
  color: var(--text-quiet);
}
.band--dark .prose, .band--panel .prose { color: var(--text-muted); }
.prose:last-child { margin-bottom: 0; }

.statement {
  margin: 0;
  font: 400 clamp(21px, 2.4vw, 34px)/1.35 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.statement--lg { font-size: clamp(23px, 3vw, 42px); line-height: 1.28; color: var(--text-bright); }

.mono { font: 400 12px var(--font-mono); color: var(--text-quiet); }
.band--dark .mono, .band--panel .mono { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   5. Controls
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 19px 32px;
  border: none;
  border-radius: 2px;
  background: var(--lift);
  color: var(--ink);
  font: 500 16px var(--font-body);
  text-align: center;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); color: var(--ink); }
.btn--sm { padding: 16px 26px; font-size: 15px; }

.btn--ghost {
  background: none;
  border: 1px solid rgba(73, 232, 171, 0.28);
  color: var(--text-on-dark);
  font-weight: 400;
}
.btn--ghost:hover { border-color: var(--mint); color: var(--mint); filter: none; }

/* Underlined text link with a trailing arrow in the markup. */
.link-arrow {
  display: inline-block;
  font: 400 15px var(--font-body);
  color: var(--green-deep);
  border-bottom: 1px solid rgba(14, 112, 71, 0.4);
  padding-bottom: 3px;
}
.band--dark .link-arrow,
.band--panel .link-arrow {
  color: var(--text-on-dark);
  border-bottom-color: rgba(73, 232, 171, 0.4);
}
.band--dark .link-arrow:hover,
.band--panel .link-arrow:hover { color: var(--mint); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

/* --------------------------------------------------------------------------
   6. Small repeated pieces
   -------------------------------------------------------------------------- */

/* Bordered mono tag, e.g. TELEMETRY / DRIFT / CAPACITY */
.tag {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid rgba(16, 21, 18, 0.16);
  font: 400 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-quiet);
}
.band--dark .tag, .band--panel .tag {
  border-color: rgba(73, 232, 171, 0.18);
  color: var(--text-muted);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Status pill with a leading dot; colour set per instance. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid currentColor;
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip--flat::before { display: none; }
.chip--ok    { color: var(--mint); }
.chip--maint { color: var(--amber); }
.chip--deg   { color: var(--red); }
.chip--done  { color: var(--text-muted); }

/* Hairline-separated definition rows */
.spec {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-light);
}
.spec > li {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-light);
  font: 400 15px var(--font-body);
}
.spec > li:last-child { border-bottom: none; }
.band--dark .spec, .band--panel .spec { border-top-color: var(--rule-dark-soft); }
.band--dark .spec > li, .band--panel .spec > li {
  border-bottom-color: var(--rule-dark-soft);
  color: var(--text-on-dark);
}

/* Key/value rows, e.g. "Uptime  99.9%" */
.facts { display: grid; gap: 14px; }
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-light);
  font: 400 13px var(--font-mono);
  color: var(--text-quiet);
}
.facts > div:last-child { border-bottom: none; padding-bottom: 0; }
.facts b { font-weight: 500; color: var(--green-deep); }
.band--dark .facts > div, .band--panel .facts > div {
  border-bottom-color: var(--rule-dark);
  color: var(--text-muted);
}
.band--dark .facts b, .band--panel .facts b { color: var(--text-on-dark); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(11, 21, 18, 0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule-dark);
}
.site-header__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 56px);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-header__logo { flex: 0 0 auto; display: flex; align-items: center; }
.site-header__logo img { height: 46px; width: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a {
  padding: 10px 16px;
  font: 400 15px var(--font-body);
  color: var(--text-on-dark);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--mint); }
.site-nav a[aria-current="page"] { color: var(--mint); border-bottom-color: var(--mint); }

.site-header__aside {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-header__note { font: 400 12px var(--font-mono); color: var(--text-muted); }
.site-header__note:empty { display: none; }
.site-header__portal {
  font: 400 13px var(--font-mono);
  color: var(--text-muted);
  padding: 10px 4px;
}
.site-header__portal:hover { color: var(--mint); }
.site-header__cta {
  padding: 13px 22px;
  background: var(--lift);
  color: var(--ink);
  font: 500 14px var(--font-body);
  border-radius: 2px;
}
.site-header__cta:hover { filter: brightness(1.08); color: var(--ink); }

.menu-toggle {
  display: none;
  margin-left: auto;
  flex-direction: column;
  gap: 5px;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(73, 232, 171, 0.18);
  border-radius: 2px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--text-on-dark);
}

/* Full-screen mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 24px clamp(20px, 6vw, 40px) 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.menu[hidden] { display: none; }
.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}
.menu__top img { height: 42px; width: auto; }
.menu__close {
  width: 48px; height: 48px;
  background: none;
  border: 1px solid rgba(73, 232, 171, 0.18);
  color: var(--text-on-dark);
  font-size: 20px;
  border-radius: 2px;
  cursor: pointer;
}
.menu__nav {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  border-top: 1px solid var(--rule-dark-soft);
}
.menu__nav a {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule-dark-soft);
  font: 500 30px var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-on-dark);
}
.menu__nav a[aria-current="page"] { color: var(--mint); }
.menu__foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
}
.menu__foot .btn { padding: 18px; }
.menu__foot .btn--ghost {
  border-color: rgba(73, 232, 171, 0.28);
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: 15px;
}

/* Body scroll lock while the menu is open */
body.menu-open { overflow: hidden; }

@media (max-width: 1000px) {
  .site-nav,
  .site-header__aside { display: none; }
  .menu-toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--rule-dark);
}
.site-footer__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 6vw, 88px) var(--gutter) 32px;
}
.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 5vw, 80px);
}
.site-footer__brand { flex: 1 1 300px; max-width: 380px; }
.site-footer__brand img { height: 30px; width: auto; margin-bottom: 22px; }
.site-footer__brand p {
  margin: 0 0 26px;
  font: 300 15px/1.7 var(--font-body);
  color: var(--text-muted);
}
.site-footer__contact {
  display: grid;
  gap: 8px;
  font: 400 12px var(--font-mono);
  color: var(--text-muted);
  font-style: normal;
}
.site-footer__contact a { color: var(--text-muted); }
.site-footer__contact a:hover { color: var(--mint); }

.site-footer nav { flex: 1 1 180px; }
.site-footer nav .label { margin-bottom: 20px; display: block; }
.site-footer nav ul {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.site-footer nav a {
  font: 400 14px var(--font-body);
  color: var(--text-on-dark);
}
.site-footer nav a:hover { color: var(--mint); }
.site-footer nav a.is-accent { color: var(--mint); }

.site-footer__base {
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 26px;
  border-top: 1px solid var(--rule-dark-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}
.site-footer__tag {
  font: 500 13px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--mint);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__legal a, .site-footer__legal span {
  font: 400 12px var(--font-mono);
  color: var(--text-muted);
}
.site-footer__legal a:hover { color: var(--mint); }

/* --------------------------------------------------------------------------
   9. Home page
   -------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; background: var(--ink); }
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 70% at 88% 30%, rgba(22, 165, 113, 0.2) 0%, rgba(11, 21, 18, 0) 70%);
}
.hero__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(64px, 8vw, 112px);
}
.hero__copy { flex: 1 1 460px; max-width: 720px; }
.hero__panel { flex: 1 1 380px; max-width: 520px; width: 100%; }
.hero .lede { margin-top: clamp(28px, 3.4vw, 44px); max-width: 520px; }
.hero .actions { margin-top: clamp(36px, 4.4vw, 56px); }

/* "Always on, Always Watching" rule with a glowing dot */
.pulse-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.pulse-line__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px var(--mint);
  flex: 0 0 auto;
}
.pulse-line__text {
  font: 600 clamp(13px, 1.1vw, 15px)/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
}
.pulse-line__rule { flex: 1 1 60px; height: 1px; background: rgba(73, 232, 171, 0.28); }

/* Managed-surface readout panel */
.readout {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
}
.readout__head, .readout__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font: 500 11px var(--font-mono);
  letter-spacing: 0.14em;
  background: rgba(27, 46, 41, 0.65);
}
.readout__head { border-bottom: 1px solid var(--rule-dark); color: var(--text-on-dark); }
.readout__foot {
  border-top: 1px solid var(--rule-dark);
  background: rgba(27, 46, 41, 0.55);
  padding: 14px 20px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.readout__head span:last-child { font-weight: 400; font-size: 10px; color: var(--text-muted); }
.readout__scan {
  position: absolute;
  left: 0; right: 0; top: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(73, 232, 171, 0.7), transparent);
  animation: pn-sweep 7s linear infinite;
}
.readout ul { margin: 0; padding: 8px 0; list-style: none; }
.readout li {
  display: grid;
  grid-template-columns: 1fr 68px 56px 12px;
  gap: 14px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--rule-dark-faint);
}
.readout li:last-child { border-bottom: none; }
.readout__name { font: 400 14px var(--font-body); color: var(--text-on-dark); }
.readout__meta { font: 400 11px var(--font-mono); color: var(--text-muted); }
.readout__bar { height: 3px; background: rgba(73, 232, 171, 0.2); overflow: hidden; }
.readout__bar i {
  display: block;
  height: 3px;
  background: var(--mint);
  transform-origin: left;
  animation: pn-bar 6s ease-in-out infinite;
}
.readout__dot {
  justify-self: end;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mint);
}
.readout__foot i {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  animation: pn-blink 3.2s ease-in-out infinite;
}

/* Service cards */
.svc-card {
  background: var(--paper-pure);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.svc-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 400 11px var(--font-mono);
  color: var(--text-quiet);
}
.svc-card__num { font-weight: 500; letter-spacing: 0.18em; color: var(--green-deep); }
.svc-card p { margin: 0; font: 300 15px/1.7 var(--font-body); color: var(--text-quiet); }
.svc-card ul {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font: 400 12px var(--font-mono);
  color: var(--text-quiet);
}
.svc-card__more {
  margin-top: auto;
  font: 500 14px var(--font-body);
  color: var(--green-deep);
}

/* Section header: title left, link right */
.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 72px);
  align-items: flex-end;
  margin-bottom: clamp(44px, 5vw, 72px);
}
.section-head > :first-child { flex: 1 1 420px; }
.section-head .link-arrow { flex: 0 0 auto; }

/* Full-bleed image band */
.image-band {
  position: relative;
  min-height: min(64vh, 560px);
  display: grid;
  align-items: end;
  background: var(--ink);
}
.image-band img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.image-band__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,21,18,0.9) 0%, rgba(11,21,18,0.32) 40%, rgba(11,21,18,0.93) 100%);
}
.image-band .wrap { position: relative; width: 100%; }

/* Engagement models */
.model {
  border-top: 2px solid var(--green);
  padding-top: 28px;
}
.model__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  font: 400 11px var(--font-mono);
  color: var(--text-quiet);
}
.model__top b { font-weight: 500; letter-spacing: 0.16em; }
.model h3 { margin-bottom: 14px; }
.model p { margin: 0 0 24px; font: 300 16px/1.7 var(--font-body); color: var(--text-quiet); }
.bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.bullets li { display: flex; gap: 12px; font: 400 15px var(--font-body); }
.bullets li::before { content: "\00b7"; color: var(--green-deep); }

/* Operating cycle */
.cycle {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
}
.cycle > li {
  position: relative;
  border-top: 1px solid rgba(16, 21, 18, 0.2);
  padding-top: 32px;
}
.cycle > li::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mint);
}
.cycle .label { margin-bottom: 16px; color: var(--green-deep); display: block; }
.cycle h3 { margin-bottom: 14px; font-size: clamp(23px, 2.2vw, 30px); }
.cycle p { margin: 0 0 24px; font: 300 16px/1.7 var(--font-body); color: var(--text-quiet); }

/* Numbered list, e.g. "01 Direct access to the engineers" */
.numbered { margin: 0 0 36px; padding: 0; list-style: none; display: grid; gap: 16px; }
.numbered li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  font: 400 16px/1.5 var(--font-body);
}
.numbered li::before {
  content: attr(data-n);
  font: 400 12px var(--font-mono);
  color: var(--green-deep);
}
.band--dark .numbered li::before { color: var(--mint); }

.portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* FAQ — native disclosure, styled to the design */
.faq { border-top: 1px solid rgba(16, 21, 18, 0.16); }
.faq details { border-bottom: 1px solid rgba(16, 21, 18, 0.16); }
.faq summary {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(22px, 2.4vw, 30px) 0;
  font: 500 clamp(18px, 1.7vw, 23px)/1.35 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text-on-light);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font: 400 20px var(--font-mono);
  color: var(--green-deep);
  flex: 0 0 auto;
}
.faq details[open] summary::after { content: "\2013"; }
.faq p {
  margin: 0;
  padding: 0 0 clamp(26px, 3vw, 36px);
  max-width: 720px;
  font: 300 16px/1.75 var(--font-body);
  color: var(--text-quiet);
}

/* --------------------------------------------------------------------------
   10. Assessment form
   -------------------------------------------------------------------------- */

.cta { position: relative; overflow: hidden; background: var(--ink); }
.cta > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.cta__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(11,21,18,0.95) 0%, rgba(11,21,18,0.9) 52%, rgba(19,34,32,0.92) 100%);
}
.cta__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(44px, 5vw, 96px);
  align-items: flex-start;
}
.cta__copy { flex: 1 1 420px; max-width: 640px; }
.cta__copy .h2 { margin-bottom: 24px; font-size: clamp(34px, 4.8vw, 70px); letter-spacing: -0.045em; }
.cta__copy .lede { margin-bottom: 36px; max-width: 460px; }

.steps { display: grid; gap: 14px; max-width: 420px; }
.steps > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font: 400 14px/1.6 var(--font-body);
  color: var(--text-on-dark);
}
.steps b { font: 400 11px var(--font-mono); color: var(--mint); }

.form-card {
  flex: 1 1 380px;
  max-width: 520px;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--rule-dark);
  padding: clamp(28px, 3vw, 44px);
}
.form-card__label {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--mint);
  margin-bottom: 24px;
}
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field > label {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.field input,
.field textarea,
.field select {
  padding: 15px;
  background: var(--ink);
  border: 1px solid rgba(73, 232, 171, 0.22);
  color: var(--text-on-dark);
  font: 400 15px var(--font-body);
  border-radius: 2px;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--mint); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red); }

.field__error {
  font: 400 12px var(--font-mono);
  color: var(--red);
  min-height: 15px;
}

.field--check > label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 300 13px/1.55 var(--font-body);
  color: var(--text-muted);
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}
.field--check input {
  margin-top: 2px;
  width: 18px; height: 18px;
  accent-color: var(--green);
  flex: 0 0 auto;
  padding: 0;
}

.form button[type="submit"] { width: 100%; }
.form button[disabled] { opacity: 0.65; cursor: progress; }

.form__status {
  min-height: 20px;
  font: 400 13px/1.5 var(--font-mono);
  color: var(--mint);
}
.form__status--error { color: var(--red); }
.form__note { font: 400 11px/1.6 var(--font-mono); color: var(--text-muted); }

/* Honeypot: off-screen, never focusable by keyboard, invisible to humans. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   11. Services page
   -------------------------------------------------------------------------- */

.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 88;
  border-top: 1px solid rgba(73, 232, 171, 0.12);
  border-bottom: 1px solid rgba(73, 232, 171, 0.12);
  background: rgba(19, 34, 32, 0.94);
  backdrop-filter: blur(16px);
}
.subnav__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 56px);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto;
  padding: 13px 14px;
  font: 400 12px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}
.subnav a:hover { color: var(--mint); }

/* Anchored sections must clear both the header and the sub-nav. */
.has-subnav { scroll-padding-top: calc(var(--header-h) + 44px + 12px); }

.index-card {
  background: var(--ink);
  padding: 22px;
  display: grid;
  gap: 8px;
  color: inherit;
}
.index-card:hover { background: var(--panel-hi); color: inherit; }
.index-card__num { font: 500 10px var(--font-mono); letter-spacing: 0.18em; color: var(--mint); }
.index-card__name {
  font: 500 17px var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text-bright);
}
.index-card__desc { font: 300 13px/1.5 var(--font-body); color: var(--text-muted); }

.svc-section__copy { flex: 1 1 380px; max-width: 620px; }
.svc-section__aside { flex: 1 1 320px; }
.svc-section__aside .label { display: block; margin-bottom: 18px; }
.svc-section__aside .spec { margin-bottom: 32px; }
.svc-section__aside .label + .tag-row { margin-top: -4px; }

/* Certification grid */
.certs {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
}
.certs li {
  background: var(--paper-mist);
  padding: 14px 16px;
  font: 500 13px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-on-light);
}

.region {
  background: var(--paper);
  padding: 24px;
}
.region__code { font: 500 10px var(--font-mono); letter-spacing: 0.18em; color: var(--green-deep); }
.region__city {
  margin-top: 10px;
  font: 500 19px var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text-on-light);
}
.region__desc { margin-top: 8px; font: 300 14px/1.6 var(--font-body); color: var(--text-quiet); }

.closer { position: relative; overflow: hidden; background: var(--ink); border-top: 1px solid var(--rule-dark); }
.closer__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 80% at 20% 25%, rgba(22, 165, 113, 0.18) 0%, rgba(11, 21, 18, 0) 70%);
}
.closer__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* --------------------------------------------------------------------------
   12. Status page
   -------------------------------------------------------------------------- */

.status-hero__counts {
  flex: 0 1 420px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
.status-hero__counts > div { background: var(--panel); padding: 18px 20px; }
.status-hero__counts .label { display: block; letter-spacing: 0.16em; }
.status-hero__counts b {
  display: block;
  margin-top: 8px;
  font: 500 28px var(--font-display);
}
.count--ok    { color: var(--mint); }
.count--maint { color: var(--amber); }
.count--deg   { color: var(--red); }

.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.panel-head h2 {
  margin: 0;
  font: 600 clamp(24px, 2.6vw, 36px) var(--font-display);
  letter-spacing: -0.035em;
  color: var(--text-bright);
}
.panel-head h2.is-sm { font-size: clamp(19px, 1.8vw, 24px); font-weight: 500; letter-spacing: -0.03em; }
.panel-head__meta {
  font: 400 11px var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.agg {
  position: relative;
  border: 1px solid var(--rule-dark);
  background: var(--ink);
  padding: 20px 20px 12px;
}
.agg__stats { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 18px; }
.agg__stats .label { display: block; letter-spacing: 0.16em; }
.agg__stats b {
  display: block;
  margin-top: 6px;
  font: 500 clamp(26px, 3vw, 40px) var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-bright);
}
.agg__stats b span { font: 400 14px var(--font-mono); color: var(--text-muted); }
.agg svg { width: 100%; height: clamp(120px, 18vw, 200px); display: block; }
.agg__axis {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  font: 400 10px var(--font-mono);
  color: var(--text-quiet);
}

.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(20px, 2.2vw, 28px);
}
.site-card {
  border: 1px solid var(--rule-dark);
  background: var(--panel);
  display: flex;
  flex-direction: column;
}
.site-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--rule-dark-soft);
}
.site-card__city {
  font: 500 clamp(19px, 1.7vw, 23px) var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-bright);
}
.site-card__meta {
  margin-top: 6px;
  font: 400 11px var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.site-card__metrics {
  padding: 22px 24px;
  display: grid;
  gap: 20px;
  border-bottom: 1px solid var(--rule-dark-soft);
}
.metric {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 16px;
  align-items: center;
}
.metric .label { display: block; letter-spacing: 0.14em; }
.metric b {
  display: block;
  margin-top: 4px;
  font: 500 22px var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-bright);
}
.metric b span { font: 400 11px var(--font-mono); color: var(--text-muted); }
.metric svg { width: 100%; height: 34px; }
.site-card__foot { padding: 22px 24px; display: grid; gap: 16px; }
.site-card__kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}
.site-card__kv .label { display: block; font-weight: 400; letter-spacing: 0.14em; }
.site-card__kv b {
  display: block;
  margin-top: 5px;
  font: 500 16px var(--font-mono);
  color: var(--text-on-dark);
}
.site-card__kv b.is-accent { color: var(--mint); }
.site-card__foot .tag-row { padding-top: 4px; }
.site-card__foot .tag { padding: 6px 10px; font-size: 10px; letter-spacing: 0.1em; }

.dci { display: grid; gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
.dci__row {
  background: var(--ink);
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
}
.dci__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 clamp(17px, 1.5vw, 21px) var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-bright);
}
.dci__spec {
  margin-top: 8px;
  font: 400 11px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.member {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  font: 400 11px var(--font-mono);
  color: var(--text-muted);
}
.member b { font-weight: 400; color: var(--text-on-dark); }
.member + .meter { margin-bottom: 16px; }
.meter { height: 5px; background: rgba(73, 232, 171, 0.14); }
.meter i { display: block; height: 5px; background: linear-gradient(90deg, var(--green), var(--mint)); }
.dci__agg { display: grid; grid-template-columns: 1fr 130px; gap: 18px; align-items: center; }
.dci__agg .label { display: block; font-weight: 400; letter-spacing: 0.14em; }
.dci__agg b {
  display: block;
  margin-top: 5px;
  font: 500 22px var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-bright);
}
.dci__agg b span { font: 400 11px var(--font-mono); color: var(--text-muted); }
.dci__agg small {
  display: block;
  margin-top: 8px;
  font: 400 11px var(--font-mono);
  color: var(--text-muted);
}
.dci__agg svg { width: 100%; height: 40px; }

.components { border-top: 1px solid var(--rule-dark-soft); }
.components > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-dark-soft);
}
.components__name {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
  font: 400 15px var(--font-body);
  color: var(--text-on-dark);
}
.components__name::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.components__name.is-ok::before    { color: var(--mint); }
.components__name.is-maint::before { color: var(--amber); }
.components__detail { font: 400 12px var(--font-mono); color: var(--text-muted); }

.events { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.events > li {
  display: grid;
  grid-template-columns: minmax(0, 150px) 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: 24px 0;
  border-top: 1px solid var(--rule-dark-soft);
}
.events__when { font: 400 12px var(--font-mono); color: var(--text-muted); }
.events__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.events__site { font: 400 11px var(--font-mono); color: var(--text-muted); }
.events__title {
  font: 500 17px/1.35 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-bright);
}
.events p {
  margin: 8px 0 0;
  max-width: 620px;
  font: 300 15px/1.7 var(--font-body);
  color: var(--text-muted);
}

.notice { border-left: 2px solid var(--green); padding-left: 20px; }
.notice .label { display: block; color: var(--mint); margin-bottom: 10px; }
.notice p {
  margin: 0;
  max-width: 720px;
  font: 300 15px/1.75 var(--font-body);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */

@keyframes pn-sweep {
  0%   { transform: translateY(0);     opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(240px); opacity: 0; }
}
@keyframes pn-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes pn-bar   { 0%, 100% { transform: scaleX(0.55); } 50% { transform: scaleX(1); } }

/* Scroll reveal. Elements start visible; JS opts them in, so a reader with
   JS disabled never ends up with permanently invisible content. */
[data-reveal].is-armed {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .readout__scan,
  .readout__bar i,
  .readout__foot i { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .subnav, .menu, .skip-link, .cta, .site-footer__legal { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   15. Legal and policy pages
   -------------------------------------------------------------------------- */

.doc-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--rule-dark);
}
.doc-hero__inner {
  position: relative;
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(36px, 4vw, 56px);
}
.doc-hero h1 {
  margin: 0 0 18px;
  font: 600 clamp(34px, 4.6vw, 60px)/1.03 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--text-bright);
}
.doc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font: 400 12px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* The reading column. Narrower than the site grid: legal text is read in
   long runs, and a 1520px measure is unreadable for that. */
.legal {
  max-width: 760px;
  font: 300 16px/1.75 var(--font-body);
  color: var(--text-quiet);
}
.legal > * + * { margin-top: 18px; }

.legal h2 {
  margin: clamp(44px, 5vw, 64px) 0 4px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-light);
  font: 600 clamp(21px, 2vw, 27px)/1.25 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-on-light);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.legal h3 {
  margin: 30px 0 2px;
  font: 500 17px/1.4 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-on-light);
}

.legal a { color: var(--green-deep); border-bottom: 1px solid rgba(14, 112, 71, 0.35); }
.legal a:hover { color: var(--green); }

.legal ul, .legal ol { margin: 14px 0 0; padding-left: 22px; }
.legal li { margin-top: 8px; }
.legal li::marker { color: var(--green-deep); }

.legal strong { font-weight: 500; color: var(--text-on-light); }

/* Plain-language summary at the head of a section. */
.legal__lede {
  font: 400 clamp(17px, 1.5vw, 20px)/1.65 var(--font-body);
  color: var(--text-on-light);
  text-wrap: pretty;
}

/* What-we-collect style tables. Scrolls rather than breaking the layout. */
.legal__table-wrap { overflow-x: auto; margin-top: 18px; }
.legal table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
}
.legal th, .legal td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule-light);
}
.legal th {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-quiet);
  white-space: nowrap;
}
.legal td:first-child { color: var(--text-on-light); font-weight: 400; }

/* Contents list at the top of a long document. */
.legal__toc {
  margin: 0 0 clamp(36px, 4vw, 52px);
  padding: 22px 26px;
  background: var(--paper-mist);
  border-left: 2px solid var(--green);
}
.legal__toc .label { display: block; margin-bottom: 14px; }
.legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
}
.legal__toc li { margin: 0 0 8px; break-inside: avoid; }
.legal__toc a {
  font: 400 14px var(--font-body);
  color: var(--green-deep);
  border-bottom: none;
}
.legal__toc a:hover { border-bottom: 1px solid rgba(14, 112, 71, 0.4); }
@media (max-width: 560px) { .legal__toc ol { columns: 1; } }

/* Closing contact block. */
.legal__contact {
  margin-top: clamp(44px, 5vw, 64px);
  padding: 26px 28px;
  background: var(--paper-mist);
  border: 1px solid var(--rule-light);
}
.legal__contact .label { display: block; margin-bottom: 14px; }
.legal__contact address {
  font-style: normal;
  display: grid;
  gap: 6px;
  font: 400 15px/1.6 var(--font-body);
  color: var(--text-on-light);
}