/* Stormetrix - site.css v1
   Palette: Chart #ECEFED / Ink #1E2A32 / Front #2C3E4F / Isobar #9FB0B5 / Signal #BF3B2B
   Type: Archivo (display, width axis) / Public Sans (body) / Chivo Mono (data) */

:root {
  --chart: #ECEFED;
  --card: #F4F6F5;
  --ink: #1E2A32;
  --front: #2C3E4F;
  --isobar: #9FB0B5;
  --signal: #BF3B2B;
  --signal-deep: #A02F22;
  --muted: #5C6B72;
  --line: rgba(30, 42, 50, 0.16);
  --line-soft: rgba(30, 42, 50, 0.09);
  --r: 4px;
  --measure: 62ch;
  --pad: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Public Sans", "Segoe UI", sans-serif;
  --font-mono: "Chivo Mono", "Consolas", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--chart);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::selection { background: var(--signal); color: #fff; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-deep); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

img, svg { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--pad); }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; }
h1 { font-size: clamp(42px, 7vw, 84px); }
h2 { font-size: clamp(28px, 4vw, 44px); }
h3 { font-size: 21px; letter-spacing: 0; }

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--signal); flex: none; }

.lead { font-size: clamp(17px, 2vw, 20px); color: var(--front); max-width: var(--measure); }

.mono { font-family: var(--font-mono); }

/* ---------- bulletin bar ---------- */

.bulletin {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  padding: 7px 0;
}
.bulletin .wrap { display: flex; justify-content: space-between; gap: 16px; }
.bulletin span + span { text-align: right; }

/* ---------- nav ---------- */

.nav { border-bottom: 1px solid var(--line); background: var(--chart); position: relative; z-index: 5; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }

.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.lockup .word {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: 0.09em;
  font-size: 17px;
}

.flag { width: 20px; height: 20px; flex: none; display: block; }

.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--front);
}
.nav-links a:hover { color: var(--signal); }

.nav-cta { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-signal { background: var(--signal); color: #fff; }
.btn-signal:hover { background: var(--signal-deep); color: #fff; }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--chart); }
.btn-ghost.on-dark { border-color: rgba(236, 239, 237, 0.5); color: var(--chart); }
.btn-ghost.on-dark:hover { background: var(--chart); color: var(--ink); }

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .wrap { position: relative; z-index: 2; padding-block: clamp(84px, 12vw, 160px); }
.hero h1 { max-width: 12ch; margin: 18px 0 22px; }
.hero .lead { margin-bottom: 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.chartfield {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.chartfield svg { width: 100%; height: 100%; display: block; }

@keyframes drift-a {
  from { transform: translate(0, 0); }
  to { transform: translate(26px, -14px); }
}
@keyframes drift-b {
  from { transform: translate(0, 0); }
  to { transform: translate(-30px, 12px); }
}
@keyframes front-crawl {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -160; }
}
.sys-a { animation: drift-a 70s ease-in-out infinite alternate; }
.sys-b { animation: drift-b 90s ease-in-out infinite alternate; }
.frontline-dash { animation: front-crawl 60s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sys-a, .sys-b, .frontline-dash { animation: none; }
  .btn, .station { transition: none; }
  .station:hover { transform: none; }
}

/* ---------- sections ---------- */

.section { padding-block: clamp(64px, 9vw, 120px); }
.section-head { margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 { margin-top: 14px; max-width: 22ch; }
.section-head .lead { margin-top: 14px; }

/* ---------- stations ---------- */

.stations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.station {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.station:hover { border-color: var(--signal); transform: translateY(-2px); }

.station-fig { border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; }
.station-fig svg { display: block; width: 100%; height: 64px; }
.station-code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--signal);
  display: flex;
  align-items: center;
  gap: 8px;
}
.station-code::before { content: ""; width: 8px; height: 8px; background: var(--signal); flex: none; }
.station p { color: var(--front); font-size: 15.5px; flex: 1; }
.station-readout {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.station-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

/* ---------- subpage hero ---------- */

.page-hero { border-bottom: 1px solid var(--line); }
.page-hero .wrap { padding-block: clamp(56px, 8vw, 100px); }
.page-hero h1 { font-size: clamp(36px, 5.5vw, 64px); margin: 14px 0 18px; max-width: 18ch; }
.page-hero .lead { max-width: var(--measure); }

/* ---------- service detail blocks ---------- */

.svc { padding-block: clamp(48px, 7vw, 88px); }
.svc + .svc { border-top: 1px solid var(--line); }
.svc-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.svc-grid h2 { margin-top: 12px; }
.svc-grid > div > p { max-width: var(--measure); color: var(--front); margin-top: 16px; }

.checklist { list-style: none; display: grid; gap: 10px; }
.checklist li {
  padding-left: 20px;
  position: relative;
  color: var(--front);
  font-size: 15.5px;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--signal);
}
.checklist-head {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 12px;
}
.checklist-head:first-child { margin-top: 0; }

/* ---------- process ---------- */

.process { border-top: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.step { border-top: 2px solid var(--ink); padding-top: 18px; }
.step .num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--signal);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 10px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--front); font-size: 15px; }

/* ---------- deep band ---------- */

.band { background: var(--front); color: var(--chart); position: relative; overflow: hidden; }
.band .wrap { padding-block: clamp(72px, 10vw, 128px); position: relative; z-index: 2; }
.band-chart { position: absolute; inset: 0; pointer-events: none; }
.band-chart svg { width: 100%; height: 100%; display: block; }
.band .hold {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 5px;
  text-underline-offset: 10px;
}
.band h2 { max-width: 18ch; font-size: clamp(32px, 5vw, 56px); }
.band p { max-width: var(--measure); margin-top: 22px; color: rgba(236, 239, 237, 0.82); font-size: clamp(16px, 1.8vw, 18.5px); }
.band .kicker { color: rgba(236, 239, 237, 0.6); }
.band .btn-signal { border-color: transparent; }

/* ---------- about + contact ---------- */

.about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
.about-grid p { max-width: var(--measure); color: var(--front); }
.about-grid p + p { margin-top: 14px; }

.contact { border-top: 1px solid var(--line); text-align: left; }
.contact .lead { margin: 14px 0 30px; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.contact-email { font-family: var(--font-mono); font-size: 14px; }

/* ---------- footer ---------- */

.footer {
  background: var(--ink);
  color: rgba(236, 239, 237, 0.72);
  font-size: 14.5px;
  border-top: 2px solid var(--signal);
  position: relative;
  overflow: hidden;
  margin-top: auto;
}
.footer-chart { position: absolute; inset: 0; pointer-events: none; }
.footer-chart svg { width: 100%; height: 100%; display: block; }
.footer .wrap { position: relative; }
.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  padding-block: clamp(44px, 6vw, 72px);
}
.footer .lockup { color: var(--chart); }
.footer-brand p { margin-top: 16px; max-width: 36ch; }
.footer-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(236, 239, 237, 0.45);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer a { color: rgba(236, 239, 237, 0.72); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bar {
  border-top: 1px solid rgba(236, 239, 237, 0.14);
  padding-block: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.footer-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
/* Studio credit — anchored far right via margin-left:auto, so the copyright and
   the mono tag sit together on the left. The link is underlined because it sits
   mid-sentence: footer nav links read as links by position, this one cannot. */
.footer-made { font-size: 13px; }
/* Anchor right only while the bar is a single row; once it wraps, the auto
   margin would indent the credit against the stacked items above it. */
@media (min-width: 48rem) { .footer-made { margin-left: auto; } }
.footer-made a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(236, 239, 237, 0.35); }

/* ---------- legal pages ---------- */

.legal { padding-block: clamp(56px, 8vw, 96px); }
.legal h1 { font-size: clamp(36px, 5.5vw, 64px); margin: 14px 0 22px; max-width: 18ch; }
.legal h2 { font-size: 22px; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--front); }
.legal p, .legal ul { max-width: var(--measure); }
.legal p + p { margin-top: 14px; }
.legal ul { padding-left: 22px; margin-block: 12px; }

/* ---------- responsive ---------- */

@media (max-width: 920px) {
  .stations { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--chart);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 18px var(--pad) 22px;
    gap: 18px;
  }
  .nav.open .nav-links { display: flex; }
  .nav-toggle { display: inline-block; }
  .bulletin span:last-child { display: none; }
  /* The "Request a consultation" button is 243px and will not shrink, so at
     375px the bar needed 496px and pushed 165px of horizontal overflow across
     every page. The open menu already links to contact.html, the same
     destination, so the button is redundant here rather than load-bearing. */
  .nav-cta .btn { display: none; }
}

@media (max-width: 760px) {
  /* full-width text cannot dodge the chart; pull the chart back instead */
  .chartfield { opacity: 0.45; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
}