/* GeoSynergy Labs
   ---------------------------------------------------------------------------
   Same family as the Peregrine GeoServices site: the brand kit's palette, the
   same three typefaces, the same light/dark banding. Where Peregrine leads with
   Signal Ochre and field imagery, Labs leads with Mineral Blue and the
   four-stage pipeline, because this is the parent brand and the R&D engine
   rather than the company that goes out and does the work.

   Everything visual is set in section 1. Change a token there and it changes
   everywhere.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette. The first six are the brand kit's, unchanged. */
  --basalt:        #191C1D;
  --survey-white:  #F3F1EA;
  --mineral-blue:  #1769A8;
  --field-green:   #58A85D;
  --signal-ochre:  #E7A640;
  --iron-grey:     #777B78;

  /* Labs-specific. A blue-biased near-black, so the ground reads as instrument
     rather than earth, and a lifted blue that holds 4.5:1 on it. */
  --ink-deep:      #111519;
  --ink-panel:     #171C21;
  --mineral-lift:  #4FA3E3;

  /* Semantic roles, dark band (the default). */
  --color-bg:       var(--ink-deep);
  --color-panel:    var(--ink-panel);
  --color-ink:      var(--survey-white);
  --color-ink-soft: #A8ADB2;
  --color-line:     #262C33;
  --color-accent:   var(--mineral-lift);
  --color-live:     var(--field-green);
  /* Quiet labels. Iron Grey is the brand's, but at 12px on this ground it only
     reaches 4.27:1, so small text uses a lifted version of it instead. */
  --color-quiet:    #8E9399;

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;

  --track-mono: 0.12em;

  /* Space */
  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;

  --radius: 3px;
  --measure: 65ch;
}

/* Light band. Re-scopes the same role names rather than overriding each
   component, so contrast holds automatically inside it. */
.band--light {
  --color-bg:       var(--survey-white);
  --color-panel:    #EAE7DE;
  --color-ink:      var(--basalt);
  --color-ink-soft: #55595C;
  --color-line:     #D5D1C6;
  --color-accent:   var(--mineral-blue);
  --color-quiet:    #63676A;
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--ink-deep);
  color: var(--survey-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.25rem, 5.2vw, var(--text-5xl)); }
h2 { font-size: clamp(1.75rem, 3.6vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); }

p { margin: 0; }
a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

.skip-link {
  position: absolute; left: -9999px;
  background: var(--survey-white); color: var(--basalt);
  padding: .75rem 1rem; z-index: 100;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

.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
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 640px) { .container { padding-inline: var(--space-4); } }

.band {
  background: var(--color-bg);
  color: var(--color-ink);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-line);
}
@media (min-width: 1024px) { .band { padding-block: var(--space-7); } }

.stack   { display: grid; gap: var(--space-3); }
.stack-lg { display: grid; gap: var(--space-5); }

.lede {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}
/* Headings carry no margin of their own, so give the paragraph that follows one
   its own breathing room rather than setting it inline on every section. */
h2 + .lede, h2 + .prose, h1 + .lede { margin-top: var(--space-3); }
@media (min-width: 1024px) { .lede { font-size: var(--text-xl); } }

.prose { max-width: var(--measure); color: var(--color-ink-soft); }
.prose p + p { margin-top: var(--space-2); }

/* Small mono label. Carries a rule to its right so sections read as plates on
   an instrument rather than as headings in a document. */
.eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--color-line);
}

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink-deep) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  min-height: 68px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { width: auto; height: 26px; }
.brand__labs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--mineral-lift);
  padding-left: .6rem; margin-left: .6rem;
  border-left: 1px solid var(--color-line);
}

.site-nav ul { display: flex; gap: var(--space-4); }
.site-nav a {
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--survey-white); border-bottom-color: var(--mineral-lift); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* On a narrow screen the logo, the button and the menu toggle will not all fit,
   and the button is the one that loses. Contact is the last item in the menu
   instead, so nothing becomes unreachable. */
@media (max-width: 559px) {
  .header-actions .btn { display: none; }
}

/* The nav collapses only when JavaScript is running. Without it the list stays
   visible and no toggle is shown, so the site still navigates. */
.nav-toggle { display: none; }
.has-js .nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 38px;
  background: transparent; border: 1px solid var(--color-line);
  border-radius: var(--radius); cursor: pointer;
}
.has-js .nav-toggle span:not(.visually-hidden) {
  display: block; width: 17px; height: 1.5px; background: var(--survey-white);
  box-shadow: 0 -5px 0 var(--survey-white), 0 5px 0 var(--survey-white);
}

@media (max-width: 899px) {
  .has-js .site-nav {
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--ink-panel);
    border-bottom: 1px solid var(--color-line);
    display: none;
  }
  .has-js .site-nav.is-open { display: block; }
  .has-js .site-nav ul { flex-direction: column; gap: 0; padding: var(--space-2) var(--space-3); }
  .has-js .site-nav a { display: block; padding-block: .7rem; }
}
@media (min-width: 900px) { .has-js .nav-toggle { display: none; } }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; cursor: pointer;
  white-space: nowrap;
  padding: .7rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary {
  background: var(--mineral-lift); color: #0B1116; border-color: var(--mineral-lift);
}
.btn--primary:hover { background: #6FB6EA; border-color: #6FB6EA; }
.btn--ghost { border-color: var(--color-line); color: var(--color-ink); }
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn[disabled] { opacity: .6; cursor: progress; }

.band--light .btn--primary { background: var(--mineral-blue); border-color: var(--mineral-blue); color: #fff; }
.band--light .btn--primary:hover { background: #135A90; border-color: #135A90; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--space-6) var(--space-6); border-top: 0; }
@media (min-width: 1024px) { .hero { padding-block: var(--space-7) var(--space-6); } }

.hero__grid { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--space-6); }
}
.hero h1 { margin-bottom: var(--space-3); }
.hero .lede { margin-bottom: var(--space-4); }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  margin-top: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--color-quiet);
}
.hero__proof li { display: flex; align-items: center; gap: .5rem; }
.hero__proof li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--field-green); flex: none;
}

/* --------------------------------------------------------------------------
   7. THE PIPELINE
   The four stages are a real sequence, so they are numbered and they connect.
   Horizontal on wide screens, vertical on narrow, with the connector rotating
   to match. The fourth stage is the one that produces the operating companies,
   so it carries the ochre that belongs to Peregrine.
   -------------------------------------------------------------------------- */
.pipeline { display: grid; gap: var(--space-3); }
@media (min-width: 900px) {
  .pipeline { grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
}

.stage {
  position: relative;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: grid; gap: .55rem; align-content: start;
}
.stage--launch { border-top-color: var(--signal-ochre); }
.stage--launch .stage__no { color: var(--signal-ochre); }

.stage__no {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-mono); color: var(--color-accent);
}
.stage h3 { font-size: var(--text-base); }
.stage p { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* Connector between stages. */
.stage:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1;
  background: var(--color-line);
}
@media (max-width: 899px) {
  .stage:not(:last-child)::after {
    left: 50%; bottom: calc(var(--space-3) * -1);
    width: 1px; height: var(--space-3);
  }
}
@media (min-width: 900px) {
  .stage:not(:last-child)::after {
    top: 50%; right: calc(var(--space-2) * -1);
    height: 1px; width: var(--space-2);
  }
}

/* Pipeline in its detailed form further down the page. */
.stage-detail {
  display: grid; gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-line);
}
@media (min-width: 900px) {
  .stage-detail { grid-template-columns: 5rem 1fr 1fr; gap: var(--space-4); align-items: start; }
}
.stage-detail__no {
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: var(--track-mono); color: var(--color-accent);
  padding-top: .25rem;
}
.stage-detail h3 { margin-bottom: .4rem; }
.stage-detail p { color: var(--color-ink-soft); }

/* --------------------------------------------------------------------------
   8. CARDS, LISTS, TABLES OF FACT
   -------------------------------------------------------------------------- */
.grid-2 { display: grid; gap: var(--space-3); }
.grid-3 { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: grid; gap: var(--space-2); align-content: start;
}
.card h3 { font-size: var(--text-lg); }
.card p { color: var(--color-ink-soft); font-size: var(--text-sm); }

.case__label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--color-quiet);
}
.case__outcome {
  border-left: 2px solid var(--field-green);
  padding-left: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
}

/* Capability list: two columns of ticked items. */
.capabilities { display: grid; gap: .7rem; }
@media (min-width: 768px) { .capabilities { grid-template-columns: repeat(2, 1fr); gap: .7rem var(--space-4); } }
.capabilities li {
  display: flex; gap: .7rem; align-items: baseline;
  color: var(--color-ink-soft);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--color-line);
}
.capabilities li::before {
  content: "+"; flex: none;
  font-family: var(--font-mono); color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   9. FIGURES
   -------------------------------------------------------------------------- */
.figure {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-panel);
}
.figure img { width: 100%; }
.figure figcaption {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  color: var(--color-quiet);
  border-top: 1px solid var(--color-line);
}

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--color-line); }
.faq details {
  border-bottom: 1px solid var(--color-line);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding-block: var(--space-3);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--font-mono); font-weight: 400;
  color: var(--color-accent); font-size: var(--text-xl);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--color-accent); }
.faq .answer { padding-bottom: var(--space-3); color: var(--color-ink-soft); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   11. FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: .45rem; }
.field label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--color-ink-soft);
}
.field .optional { text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: .8rem .9rem;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--iron-grey); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-accent); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #C4614B; }
.field .error { color: #E08B77; font-size: var(--text-sm); display: none; }
.field input:user-invalid ~ .error, .field textarea:user-invalid ~ .error { display: block; }

.form-note { font-size: var(--text-sm); color: var(--color-ink-soft); }

.form-status {
  display: none;
  border: 1px solid var(--field-green);
  border-left-width: 2px;
  padding: var(--space-3);
  border-radius: var(--radius);
}
.form-status.is-visible { display: block; }
.form-status--error { border-color: #C4614B; }

/* Bait for form-filling bots. Off-screen rather than display:none, because the
   scripts that matter skip anything hidden outright. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-deep);
  color: var(--survey-white);
  border-top: 1px solid #262C33;
  padding-block: var(--space-5);
}
.site-footer__grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer h3 {
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--color-quiet);
  margin-bottom: var(--space-2);
}
.site-footer ul { display: grid; gap: .5rem; }
.site-footer a { color: #A8ADB2; text-decoration: none; font-size: var(--text-sm); }
.site-footer a:hover { color: var(--survey-white); }
.site-footer__base {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  margin-top: var(--space-5); padding-top: var(--space-3);
  border-top: 1px solid #262C33;
  font-size: var(--text-xs); color: var(--color-quiet);
}
.mono { font-family: var(--font-mono); letter-spacing: var(--track-mono); }