/* ===============================================================
   GEOSPACE Marketing
   Design source: Figma, Marketing / GEOSPACE Homepage (310:146)

   One stylesheet, no preprocessor, no build step.
   =============================================================== */

/* ---------------------------------------------------------------
   Fonts

   Figtree is the body face; the wordmark is baked into the logo SVG.
   Both are self-hosted variable fonts (latin subset, OFL licensed)
   in assets/fonts/. One Figtree file covers weights 400 to 600.

   Google Fonts is deliberately not used. It puts a third-party
   request on the critical path and sends visitor IPs to Google,
   which our consent policy would then have to cover.
   --------------------------------------------------------------- */

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

/* ---------------------------------------------------------------
   Tokens
   --------------------------------------------------------------- */

:root {
  --ink: #0d0d0d;
  --ink-soft: #3f3f3f;
  --ink-muted: #6b6b6b;
  --surface: #ffffff;
  --surface-alt: #f9f9f8;
  --surface-dark: #0a0a0a;
  --hairline: #e6e6e4;
  --hairline-dark: rgba(255, 255, 255, 0.14);
  --card-border: #6b6b6b;
  --green: #20b019;
  --green-light: #7ce86f;
  --pill: #3aa6de;
  --on-dark: #ffffff;
  --on-dark-muted: #b8b8b8;

  --accent: linear-gradient(135deg, var(--green) 0%, #000000 100%);

  --shell: 1280px;          /* content width, gutters sit outside it */
  --gutter: 80px;
  --radius-card: 12px;

  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------
   Reset
   --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Always reserve space for the vertical scrollbar so centered content
     (nav, footer, .shell) doesn't shift left/right between short and long pages. */
  overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}

body {
  font-family: var(--font);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--on-dark);
  padding: 12px 20px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Homepage section rhythm, from the Figma frame (310:146). The What we do
   block sits 40px under the hero and runs 20px past its cards; Brands then
   opens with 60px, so cards to the BRANDS eyebrow reads as 80px. */
.section { padding: 40px 0 20px; }
.section--brands { padding: 60px 0 90px; }

.eyebrow {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.rule {
  width: 64px;
  height: 3px;
  border: 0;
  background: var(--accent);
}

/* ---------------------------------------------------------------
   Logo

   The GEOSPACE lockup (mark + wordmark) is a single SVG at
   /assets/img/logo.svg, 240x50. logo-mark.svg is the mark alone,
   used in the nav below 460px where the lockup no longer fits.
   --------------------------------------------------------------- */

.logo { display: block; flex: none; height: auto; }

.logo--nav { width: 240px; }

.logo--nav-mark { display: none; width: 40px; }

.logo--footer { width: 210px; }

/* Mark used elsewhere (e.g. brand cards). */
.mark { width: 50px; height: 50px; flex: none; }

.mark--brand { width: 64px; height: 64px; }

/* ---------------------------------------------------------------
   Nav
   --------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(12px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 44px var(--gutter);
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: opacity 0.15s ease;
}
.nav__brand:hover { opacity: 0.7; }

.nav__links { display: flex; align-items: center; gap: 40px; }

.nav__links a {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--green); }

.nav__icon { display: flex; }
.nav__icon svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------------------------------------------------------------
   Hero and page heads
   --------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  /* 488px tall at desktop: 180 above the title, 140 below the subhead. */
  padding: 180px 0 140px;
}

/* Mesh grid. A 28px lattice of 0.6px lines with a dot at each
   intersection, faded to white at the top and bottom edges and
   softened toward the centre. Pure CSS so it tiles at any width.
   Figma calls for this to react to the cursor; that is a later
   pass, this is the resting state. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--surface) 0, rgba(255, 255, 255, 0) 127px),
    linear-gradient(to top, var(--surface) 0, rgba(255, 255, 255, 0) 127px),
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle, rgba(13, 13, 13, 0.14) 0.6px, rgba(13, 13, 13, 0) 1.2px) 14px 14px / 28px 28px,
    linear-gradient(to right, rgba(13, 13, 13, 0.045) 0.6px, rgba(13, 13, 13, 0) 0.6px) 14px 0 / 28px 28px,
    linear-gradient(to bottom, rgba(13, 13, 13, 0.045) 0.6px, rgba(13, 13, 13, 0) 0.6px) 0 14px / 28px 28px;
}

.hero .shell { position: relative; z-index: 1; }

.hero__title {
  font-size: clamp(36px, 5.5vw, 66px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.024em;
  max-width: 18em;
}

.hero__sub {
  margin-top: 28px;
  font-size: 21px;
  line-height: 1.58;
  color: var(--ink-muted);
  max-width: 720px;
}

.hero__rule { margin-top: 44px; }

.page-head { padding: 120px 0 96px; }

.page-head__title {
  margin-top: 18px;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.page-head__sub {
  margin-top: 24px;
  font-size: 20px;
  line-height: 1.58;
  color: var(--ink-muted);
  max-width: 36em;
}

.note {
  margin-top: 32px;
  font-size: 17px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------
   Grids and what-we-do cards
   --------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 40px;
  margin-top: 56px;
}

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

.what-card {
  background: var(--surface-alt);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 28px;
}

.what-card__title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.what-card__body {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------
   Brands
   --------------------------------------------------------------- */

.brand-card {
  margin-top: 40px;
  background: var(--surface-dark);
  color: var(--on-dark);
  border-radius: var(--radius-card);
  padding: 52px;
}

.pill {
  display: inline-block;
  padding: 6px 13px;
  background: var(--pill);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.11em;
  color: #ffffff;
}

.brand-card__lockup {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

/* Wordmark is a vector, 244 by 37 at desktop. Width scales with the
   viewport between the two stops and height follows the viewBox. */
.brand-card__name {
  width: clamp(160px, 24vw, 244px);
  height: auto;
  flex: none;
}

.brand-card__body {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.58;
  color: var(--on-dark-muted);
  max-width: 620px;
}

.brand-card__link {
  display: inline-block;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.brand-card__link:hover { opacity: 0.7; }

/* ---------------------------------------------------------------
   Team (careers page)
   --------------------------------------------------------------- */

.team { padding: 100px 0 110px; }

.team__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding-bottom: 24px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.15s ease;
}
.team__link svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.team__link:hover { color: var(--green); }

.team__heading { margin-top: 34px; }

.team__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 34px;
}

.team-card {
  background: var(--surface);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 40px;
}

/* Stacked title and body pairs. Both cards use it: open positions (or the
   no-roles copy when there are none) and the values list. */
.team-list {
  margin-top: 24px;
  display: grid;
  gap: 40px;
  list-style: none;
}

.team-list__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.014em;
}

.team-list__title a { transition: color 0.15s ease; }
.team-list__title a:hover { color: var(--green); }

.team-list__body {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------
   Legal pages (privacy, terms)

   Long-form prose, 760px measure, 17px on a 1.66 line height.
   --------------------------------------------------------------- */

.legal { padding: 0 0 110px; }

.legal-body { max-width: 760px; }

.legal-body h2 {
  margin-top: 44px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.014em;
}

.legal-body p, .legal-body li {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.66;
  color: var(--ink-muted);
}

.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin-top: 10px; }
.legal-body li::marker { color: var(--green); }
.legal-body strong { font-weight: 500; color: var(--ink); }

.legal-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--green); }


/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.footer {
  background: var(--surface);
  color: var(--ink);
  border-top: 3px solid var(--green);
  padding: 140px 0 80px;
}

.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.footer__brand { display: flex; align-items: center; gap: 16px; }


.footer__tagline { margin-top: 22px; font-size: 16px; color: var(--ink-muted); }

.footer__cols { display: flex; gap: 110px; }

.footer__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: var(--ink-muted);
}

.footer__list { margin-top: 12px; display: grid; gap: 12px; list-style: none; }

.footer__list a { font-size: 15px; color: var(--ink); }
.footer__list a:hover { color: var(--green); }

.footer__bottom {
  margin-top: 120px;
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
  color: var(--ink-muted);
}

.footer__bottom a:hover { color: var(--ink); }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --gutter: 40px; }
  .hero { padding: 140px 0 110px; }
  .footer__cols { gap: 56px; }
}

@media (max-width: 860px) {
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 32px 0 16px; }
  .section--brands { padding: 48px 0 72px; }
  .hero { padding: 104px 0 84px; }
  .hero__sub { font-size: 18px; }
  .eyebrow { font-size: 16px; }
  .page-head { padding: 80px 0 64px; }
  .page-head__sub { font-size: 18px; }
  .brand-card { padding: 36px 28px; }
  .team { padding: 72px 0 80px; }
  .team__cols { grid-template-columns: minmax(0, 1fr); }
  .team-card { padding: 32px 28px; }
  .footer { padding: 88px 0 48px; }
  .footer__top { flex-direction: column; gap: 48px; }
  .footer__cols { flex-wrap: wrap; gap: 40px 56px; }
  .footer__bottom { margin-top: 72px; padding-top: 32px; }
}

@media (max-width: 620px) {
  :root { --gutter: 22px; }
  .nav__inner { padding: 18px var(--gutter); gap: 16px; }
  .nav__brand { gap: 12px; }
  .logo--nav { width: 170px; }
  .logo--footer { width: 170px; }
  .nav__links { gap: 18px; }
  .nav__links a { font-size: 15px; white-space: nowrap; }
  .hero__title { letter-spacing: -0.02em; }
  .what-card { padding: 24px; }
  .brand-card { padding: 28px 22px; }
  .team-card { padding: 24px 20px; }
  .team-list__title { font-size: 20px; }
  .brand-card__lockup { gap: 14px; }
  .mark--brand { width: 48px; }
  .footer__cols { flex-direction: column; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 12px; }
}

/* Below this the lockup and three nav items cannot share a row.
   The mark alone carries the brand; its alt text still reads GEOSPACE. */
@media (max-width: 460px) {
  .logo--nav { display: none; }
  .logo--nav-mark { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------------------------------------------------------------
   Consent banner

   Injected by assets/js/analytics.js only while the visitor has not
   made a choice, so these classes never appear in the HTML files.
   The checker notes them as styled-but-unused, which is fine.
   --------------------------------------------------------------- */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 12px 22px;
  background: var(--surface);
  border-top: 1.5px solid var(--card-border);
  box-shadow: 0 -6px 24px rgba(13, 13, 13, 0.08);
}

.consent__text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.consent__link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent__link:hover { color: var(--green); }

.consent__actions { display: flex; gap: 10px; margin-left: auto; }

.consent__btn {
  padding: 7px 16px;
  background: var(--ink);
  color: var(--on-dark);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.consent__btn:hover { background: var(--green); border-color: var(--green); }

.consent__btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--card-border);
}
.consent__btn--quiet:hover { background: transparent; color: var(--green); border-color: var(--green); }

@media (max-width: 520px) {
  .consent__actions { margin-left: 0; width: 100%; }
  .consent__btn { flex: 1; }
}