/* ============================================================================
   GTA WEBSITE — SITE LAYER  (geospatialtec.com rebuild, v2)
   ----------------------------------------------------------------------------
   Site-level layout on top of the GTA design system. Load order:
     tokens.css -> system.css -> components.css -> site.css
   Consumes SEMANTIC tokens only (var(--gta-*)). No hard-coded color/type/space.
   Every page shares the header, footer, hero shell, section rhythm, and the
   card/grid/CTA patterns defined here so the site reads as one instrument.
   ============================================================================ */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
:target { scroll-margin-top: 96px; }

/* Skip link (accessibility) */
.site-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gta-accent-ink); color: #fff;
  font-family: var(--gta-font-mono); font-size: var(--gta-text-sm);
  padding: var(--gta-space-3) var(--gta-space-4); border-radius: var(--gta-radius-sm);
}
.site-skip:focus { left: var(--gta-space-4); top: var(--gta-space-4); }

/* Shared inner width wrapper (mirrors .gta-page) */
.wrap { max-width: var(--gta-maxw-page); margin-inline: auto; padding-inline: var(--gta-gutter); }

/* ===========================================================================
   HEADER / NAV  (sticky, blurred, full-bleed bar with inner wrap)
   =========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--gta-color-ground) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gta-color-line);
}
.site-nav {
  display: flex; align-items: center; gap: var(--gta-space-6);
  min-height: 64px; padding-block: var(--gta-space-3);
}
.site-brand { display: inline-flex; align-items: center; gap: var(--gta-space-3); text-decoration: none; flex: none; }
.site-brand:hover { text-decoration: none; }
.site-brand__name {
  font-family: var(--gta-font-mono); font-size: var(--gta-text-xs);
  text-transform: uppercase; letter-spacing: var(--gta-tracking-wide);
  color: var(--gta-color-ink-muted); line-height: 1.2; max-width: 16ch;
}
.site-nav__links { display: flex; align-items: center; gap: var(--gta-space-2); margin-left: auto; }
.site-nav__link {
  font-family: var(--gta-font-mono); font-size: var(--gta-text-sm);
  text-transform: uppercase; letter-spacing: var(--gta-tracking-wide);
  color: var(--gta-color-ink); text-decoration: none;
  padding: var(--gta-space-2) var(--gta-space-3); border-radius: var(--gta-radius-sm);
  border: 1px solid transparent; transition: color .15s, border-color .15s;
}
.site-nav__link:hover { color: var(--gta-accent-text); text-decoration: none; }
.site-nav__link[aria-current="page"] { color: var(--gta-accent-text); border-color: color-mix(in srgb, var(--gta-accent) 40%, var(--gta-color-line)); }
.site-nav__cta { margin-left: var(--gta-space-2); }

/* Mobile menu toggle (hidden on desktop) */
.site-nav__toggle {
  display: none; margin-left: auto;
  background: transparent; border: 1px solid var(--gta-color-line);
  border-radius: var(--gta-radius-sm); cursor: pointer;
  color: var(--gta-color-ink); padding: var(--gta-space-2) var(--gta-space-3);
  font-family: var(--gta-font-mono); font-size: var(--gta-text-xs);
  text-transform: uppercase; letter-spacing: var(--gta-tracking-wide);
}
.site-nav__toggle:hover { border-color: var(--gta-accent); color: var(--gta-accent-text); }

@media (max-width: 860px) {
  .site-nav__toggle { display: inline-flex; align-items: center; gap: var(--gta-space-2); }
  .site-nav__links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--gta-space-1);
    margin-left: 0; padding: var(--gta-space-4) var(--gta-gutter) var(--gta-space-6);
    background: var(--gta-color-ground); border-bottom: 1px solid var(--gta-color-line);
    box-shadow: var(--gta-shadow-pop);
  }
  .site-nav__links[hidden] { display: none; }
  .site-nav__link { padding: var(--gta-space-3); border: 1px solid var(--gta-color-line); }
  .site-nav__cta { margin-left: 0; }
  .site-nav__cta .gta-btn { width: 100%; justify-content: center; }
}

/* ===========================================================================
   SECTION RHYTHM + SHARED HEADINGS
   =========================================================================== */
.section { padding-block: var(--gta-space-20); }
.section--tight { padding-block: var(--gta-space-12); }
.section--deep { background: var(--gta-color-ground-deep); }
.section--surface { background: var(--gta-color-surface-2); }
.section__head { max-width: 64ch; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .gta-spectrum-rule { margin-inline: auto; }
.section__lead { margin-top: var(--gta-space-4); }

/* Fluid display headline used in heroes */
.fluid-display {
  font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head-max);
  text-transform: uppercase; letter-spacing: var(--gta-tracking-tight);
  line-height: var(--gta-lh-tight); color: var(--gta-color-ink);
  font-size: clamp(var(--gta-text-2xl), 7vw, var(--gta-text-display));
}
.fluid-h1 {
  font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head-max);
  text-transform: uppercase; letter-spacing: var(--gta-tracking-tight);
  line-height: var(--gta-lh-tight); color: var(--gta-color-ink);
  font-size: clamp(var(--gta-text-2xl), 5.5vw, var(--gta-text-3xl));
}

/* ===========================================================================
   HERO  (two-column: copy + instrument media panel)
   =========================================================================== */
.hero { position: relative; overflow: hidden; padding-block: var(--gta-space-20) var(--gta-space-16); }
.hero__grid {
  display: grid; gap: var(--gta-space-12); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 920px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero__copy { position: relative; z-index: 2; max-width: 60ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--gta-space-3); margin-top: var(--gta-space-8); }
.hero__support {
  margin-top: var(--gta-space-6); font-family: var(--gta-font-mono);
  font-size: var(--gta-text-xs); color: var(--gta-color-ink-subtle);
  letter-spacing: var(--gta-tracking-wide);
}

/* Instrument media panel — a framed dark viewport with a reticle + stat overlay */
.viewport {
  position: relative; border: 1px solid var(--gta-color-line);
  border-radius: var(--gta-radius-lg); overflow: hidden;
  background: var(--gta-charcoal-950); box-shadow: var(--gta-shadow-pop);
}
.viewport img { display: block; width: 100%; height: 100%; object-fit: cover; }
.viewport__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gta-space-3);
  padding: var(--gta-space-2) var(--gta-space-3);
  border-bottom: 1px solid var(--gta-color-line);
  font-family: var(--gta-font-mono); font-size: var(--gta-text-xs);
  color: var(--gta-color-ink-muted); letter-spacing: var(--gta-tracking-wide);
  background: var(--gta-color-surface);
}
.viewport__reticle { position: absolute; width: 56px; height: 56px; pointer-events: none; }
.viewport__stat { position: absolute; left: var(--gta-space-4); bottom: var(--gta-space-4); max-width: 280px; }
.viewport__caption {
  font-family: var(--gta-font-mono); font-size: var(--gta-text-xs);
  color: var(--gta-color-ink-subtle); margin-top: var(--gta-space-3);
  letter-spacing: var(--gta-tracking-wide);
}

/* ===========================================================================
   TRUST BAND  (data-source chips + heritage metrics)
   =========================================================================== */
.trust { border-block: 1px solid var(--gta-color-line); background: var(--gta-color-ground-deep); }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gta-space-4) var(--gta-space-6); padding-block: var(--gta-space-6); }
.trust__label { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); text-transform: uppercase; letter-spacing: var(--gta-tracking-eyebrow); color: var(--gta-color-ink-subtle); }
.trust__chips { display: flex; flex-wrap: wrap; gap: var(--gta-space-3); align-items: center; }

/* Metric row */
.metrics { display: grid; gap: var(--gta-space-6); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.metric { border-left: 2px solid color-mix(in srgb, var(--gta-accent) 60%, var(--gta-color-line)); padding-left: var(--gta-space-4); }
.metric__n { font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head); font-size: var(--gta-text-2xl); color: var(--gta-color-ink); line-height: 1.05; }
.metric__k { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); color: var(--gta-color-ink-muted); margin-top: var(--gta-space-2); }

/* ===========================================================================
   PRODUCT CARDS  (home: the three-line showcase)
   Each card sets data-product to pick up its accent.
   =========================================================================== */
.product-cards { display: grid; gap: var(--gta-space-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: var(--gta-space-10); }
.product-card {
  display: flex; flex-direction: column; gap: var(--gta-space-4);
  background: var(--gta-color-surface); border: 1px solid var(--gta-color-line);
  border-top: 3px solid var(--gta-accent);
  border-radius: var(--gta-radius-lg); padding: var(--gta-space-8);
  text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--gta-shadow-pop); border-color: var(--gta-accent); text-decoration: none; }
.product-card__name {
  font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head);
  text-transform: uppercase; font-size: var(--gta-text-2xl); line-height: 1;
  color: var(--gta-color-ink); display: flex; align-items: center; gap: var(--gta-space-2);
}
.product-card__phi { height: 0.9em; width: auto; }
.product-card__role { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); color: var(--gta-accent-text); }
.product-card__tag { font-family: var(--gta-font-headline); font-weight: var(--gta-weight-semibold); text-transform: uppercase; font-size: var(--gta-text-lg); line-height: var(--gta-lh-snug); color: var(--gta-color-ink); }
.product-card__desc { color: var(--gta-color-ink-muted); font-size: var(--gta-text-sm); line-height: var(--gta-lh-relaxed); }
.product-card__foot { margin-top: auto; padding-top: var(--gta-space-4); border-top: 1px solid var(--gta-color-line); display: flex; align-items: center; justify-content: space-between; gap: var(--gta-space-3); }
.product-card__open { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); color: var(--gta-accent-text); }
.product-card:hover .product-card__open { text-decoration: underline; }

/* Pipeline strip ("pixels -> maps -> decisions") */
.pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gta-space-3); font-family: var(--gta-font-mono); font-size: var(--gta-text-sm); color: var(--gta-color-ink-muted); }
.pipeline b { color: var(--gta-color-ink); font-weight: var(--gta-weight-medium); }
.pipeline .arr { color: var(--gta-accent-text); }

/* ===========================================================================
   GENERIC GRIDS / FEATURE CARDS  (product pages)
   =========================================================================== */
.grid-2 { display: grid; gap: var(--gta-space-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { display: grid; gap: var(--gta-space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature {
  background: var(--gta-color-surface); border: 1px solid var(--gta-color-line);
  border-radius: var(--gta-radius-lg); padding: var(--gta-space-6);
  display: flex; flex-direction: column; gap: var(--gta-space-2);
}
.feature__k { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); color: var(--gta-accent-text); }
.feature__t { font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head); text-transform: uppercase; font-size: var(--gta-text-lg); color: var(--gta-color-ink); line-height: var(--gta-lh-snug); }
.feature__d { color: var(--gta-color-ink-muted); font-size: var(--gta-text-sm); line-height: var(--gta-lh-relaxed); }

/* Bulleted capability list with mono ticks */
.spec-list { display: grid; gap: var(--gta-space-3); }
.spec-list li { position: relative; padding-left: var(--gta-space-6); color: var(--gta-color-ink-muted); line-height: var(--gta-lh-relaxed); }
.spec-list li::before { content: "\203A"; position: absolute; left: 0; top: -1px; color: var(--gta-accent-text); font-family: var(--gta-font-mono); font-size: var(--gta-text-lg); }
.spec-list li strong { color: var(--gta-color-ink); font-weight: var(--gta-weight-semibold); }

/* ===========================================================================
   COMPARISON TABLE  (FLUXX vs ENVI)
   =========================================================================== */
.compare-wrap { overflow-x: auto; border: 1px solid var(--gta-color-line); border-radius: var(--gta-radius-lg); }
.compare { width: 100%; border-collapse: collapse; min-width: 520px; font-size: var(--gta-text-sm); }
.compare th, .compare td { padding: var(--gta-space-4); text-align: left; border-bottom: 1px solid var(--gta-color-line); vertical-align: top; }
.compare thead th { font-family: var(--gta-font-mono); text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); font-size: var(--gta-text-xs); color: var(--gta-color-ink-muted); background: var(--gta-color-surface); }
.compare thead th.is-ours { color: var(--gta-accent-text); }
.compare tbody th { font-family: var(--gta-font-body); font-weight: var(--gta-weight-semibold); color: var(--gta-color-ink); }
.compare td { color: var(--gta-color-ink-muted); }
.compare td.is-ours { color: var(--gta-color-ink); background: color-mix(in srgb, var(--gta-accent) 7%, transparent); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* ===========================================================================
   STEPS  (OreVision how-it-works)
   =========================================================================== */
.steps { display: grid; gap: var(--gta-space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.step { background: var(--gta-color-surface); border: 1px solid var(--gta-color-line); border-radius: var(--gta-radius-lg); padding: var(--gta-space-6); position: relative; }
.step__n { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); color: var(--gta-accent-text); letter-spacing: var(--gta-tracking-wide); }
.step__t { font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head); text-transform: uppercase; font-size: var(--gta-text-lg); color: var(--gta-color-ink); margin-top: var(--gta-space-2); line-height: var(--gta-lh-snug); }
.step__d { color: var(--gta-color-ink-muted); font-size: var(--gta-text-sm); line-height: var(--gta-lh-relaxed); margin-top: var(--gta-space-2); }

/* ===========================================================================
   PROOF GRID  (the credibility pivot) — uses .gta-proof-card from components.css
   =========================================================================== */
.proof-grid { display: grid; gap: var(--gta-space-6); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* Reserve proof-image box to prevent layout shift (CLS) as images load. */
.gta-proof-card__media img { aspect-ratio: 16 / 9; object-fit: cover; }

/* ===========================================================================
   CTA BAND
   =========================================================================== */
.cta-band { position: relative; overflow: hidden; border: 1px solid var(--gta-color-line); border-radius: var(--gta-radius-lg); padding: var(--gta-space-16) var(--gta-space-12); background: var(--gta-color-surface); text-align: center; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--gta-space-3); justify-content: center; margin-top: var(--gta-space-8); }

/* ===========================================================================
   FORM  (demo / contact)
   =========================================================================== */
.form { display: grid; gap: var(--gta-space-4); }
.form__row { display: grid; gap: var(--gta-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: var(--gta-space-2); }
.field label { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); color: var(--gta-color-ink-muted); }
.field .req { color: var(--gta-accent-text); }
.field input, .field select, .field textarea {
  background: var(--gta-color-ground); color: var(--gta-color-ink);
  border: 1px solid var(--gta-color-line); border-radius: var(--gta-radius-sm);
  padding: var(--gta-space-3) var(--gta-space-4); font-family: var(--gta-font-body); font-size: var(--gta-text-base);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gta-color-focus-ring); outline-offset: 1px; border-color: var(--gta-accent); }
.form__note { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); color: var(--gta-color-ink-subtle); line-height: var(--gta-lh-base); }
.form__status { font-family: var(--gta-font-mono); font-size: var(--gta-text-sm); color: var(--gta-color-ink-muted); line-height: var(--gta-lh-base); }
.form__status--ok { color: var(--gta-status-built); }

/* Contact aside cards */
.contact-card { background: var(--gta-color-surface); border: 1px solid var(--gta-color-line); border-radius: var(--gta-radius-lg); padding: var(--gta-space-6); }
.contact-card__k { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); color: var(--gta-color-ink-subtle); }
.contact-card__v { color: var(--gta-color-ink); margin-top: var(--gta-space-1); }

/* ===========================================================================
   RESOURCE CARDS  (resources hub)
   =========================================================================== */
.res-grid { display: grid; gap: var(--gta-space-5); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.res-card { display: flex; flex-direction: column; gap: var(--gta-space-2); background: var(--gta-color-surface); border: 1px solid var(--gta-color-line); border-radius: var(--gta-radius-lg); padding: var(--gta-space-6); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.res-card:hover { border-color: var(--gta-accent); transform: translateY(-3px); box-shadow: var(--gta-shadow-card); text-decoration: none; }
.res-card__type { font-family: var(--gta-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); color: var(--gta-accent-text); }
.res-card__t { font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head); text-transform: uppercase; font-size: var(--gta-text-lg); color: var(--gta-color-ink); line-height: var(--gta-lh-snug); }
.res-card__d { color: var(--gta-color-ink-muted); font-size: var(--gta-text-sm); line-height: var(--gta-lh-relaxed); }
.res-card__open { margin-top: auto; padding-top: var(--gta-space-3); font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); color: var(--gta-accent-text); }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.site-footer { border-top: 1px solid var(--gta-color-line); background: var(--gta-color-ground-deep); padding-block: var(--gta-space-16) var(--gta-space-10); }
.site-footer__grid { display: grid; gap: var(--gta-space-10); grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__brand { display: inline-flex; align-items: center; gap: var(--gta-space-3); }
.site-footer__tag { font-family: var(--gta-font-mono); font-size: var(--gta-text-sm); color: var(--gta-color-ink-muted); margin-top: var(--gta-space-4); max-width: 40ch; line-height: var(--gta-lh-relaxed); }
.site-footer__col h2 { font-family: var(--gta-font-mono); font-weight: var(--gta-weight-medium); font-size: var(--gta-text-xs); text-transform: uppercase; letter-spacing: var(--gta-tracking-eyebrow); color: var(--gta-color-ink-subtle); margin-bottom: var(--gta-space-4); }
.site-footer__col ul { display: grid; gap: var(--gta-space-3); }
.site-footer__col a { font-family: var(--gta-font-body); font-size: var(--gta-text-sm); color: var(--gta-color-ink-muted); text-decoration: none; }
.site-footer__col a:hover { color: var(--gta-accent-text); }
.site-footer__bar { display: flex; flex-wrap: wrap; gap: var(--gta-space-3); align-items: center; justify-content: space-between; margin-top: var(--gta-space-12); padding-top: var(--gta-space-6); border-top: 1px solid var(--gta-color-line); font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); color: var(--gta-color-ink-subtle); }

/* ===========================================================================
   UTILITIES
   =========================================================================== */
.muted { color: var(--gta-color-ink-muted); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-4 { margin-top: var(--gta-space-4); }
.mt-6 { margin-top: var(--gta-space-6); }
.mt-8 { margin-top: var(--gta-space-8); }
.mt-10 { margin-top: var(--gta-space-10); }
.hide-sm { }
@media (max-width: 640px) { .hide-sm { display: none !important; } }

/* Respect reduced motion: neutralize transforms/transitions */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .product-card:hover, .res-card:hover { transform: none; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===========================================================================
   HOME HERO — GLOBE  ("Earth, under the instrument")
   Full-bleed night-Earth photo + left-aligned brand copy + a reticle locked on
   the globe. The image's left third is black, so copy reads cleanly; a scrim
   guarantees legibility and blends the top (header) and bottom (next section).
   =========================================================================== */
.hero-globe {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: min(88vh, 820px);
  border-bottom: 1px solid var(--gta-color-line);
  background: var(--gta-color-ground-deep);
}
.hero-globe__media { position: absolute; inset: 0; z-index: -2; }
.hero-globe__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero-globe::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--gta-color-ground) 0%, color-mix(in srgb, var(--gta-color-ground) 76%, transparent) 32%, transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--gta-color-ground) 60%, transparent) 0%, transparent 16%, transparent 74%, var(--gta-color-ground) 100%);
}
.hero-globe__inner { position: relative; width: 100%; padding-block: var(--gta-space-16); }
.hero-globe__copy { max-width: 54ch; }
.hero-globe__reticle {
  position: absolute; z-index: 0; width: 64px; height: 64px; top: 36%; right: 21%;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gta-color-signal-cyan) 55%, transparent));
  animation: gtaReticlePulse 3.6s ease-in-out infinite;
}
@keyframes gtaReticlePulse { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
.hero-globe__coord {
  position: absolute; z-index: 0; top: calc(36% + 72px); right: 12%;
  font-family: var(--gta-font-mono); font-size: var(--gta-text-xs);
  letter-spacing: var(--gta-tracking-wide); color: var(--gta-color-ink-muted);
}
@media (max-width: 820px) {
  .hero-globe { min-height: 80vh; }
  .hero-globe__media img { object-position: 60% center; }
  .hero-globe::after { background: linear-gradient(180deg, color-mix(in srgb, var(--gta-color-ground) 42%, transparent) 0%, color-mix(in srgb, var(--gta-color-ground) 34%, transparent) 34%, var(--gta-color-ground) 90%); }
  .hero-globe__reticle, .hero-globe__coord { display: none; }
}

/* ===========================================================================
   SCROLL REVEAL  — progressive, only active once site.js adds .js to <html>.
   Without JS (or with reduced motion) everything is fully visible.
   =========================================================================== */
.js .reveal {
  opacity: 0; transform: translate3d(var(--rx, 0), 20px, 0);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--rd, 0ms); will-change: opacity, transform;
}
.js .reveal--l { --rx: -30px; }
.js .reveal--r { --rx: 30px; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ===========================================================================
   KNOWLEDGE-GRAPH EMBED
   =========================================================================== */
.kg-embed {
  position: relative; border: 1px solid var(--gta-color-line);
  border-radius: var(--gta-radius-lg); overflow: hidden;
  background: var(--gta-color-ground-deep); box-shadow: var(--gta-shadow-pop);
}
.kg-embed__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gta-space-3);
  padding: var(--gta-space-2) var(--gta-space-4); border-bottom: 1px solid var(--gta-color-line);
  background: var(--gta-color-surface); font-family: var(--gta-font-mono);
  font-size: var(--gta-text-xs); letter-spacing: var(--gta-tracking-wide); color: var(--gta-color-ink-muted);
}
.kg-embed__frame { display: block; width: 100%; height: min(74vh, 720px); border: 0; background: var(--gta-color-ground-deep); }
@media (max-width: 760px) { .kg-embed__frame { height: 60vh; } }
.kg-embed__open { color: var(--gta-accent-text); text-decoration: none; }
.kg-embed__open:hover { text-decoration: underline; }

/* ===========================================================================
   RESEARCH / PUBLICATIONS
   =========================================================================== */
.pubs { display: grid; }
.pub { display: grid; grid-template-columns: 72px 1fr; gap: var(--gta-space-6); padding-block: var(--gta-space-6); border-top: 1px solid var(--gta-color-line); }
.pub:last-child { border-bottom: 1px solid var(--gta-color-line); }
.pub__year { font-family: var(--gta-font-mono); font-size: var(--gta-text-sm); color: var(--gta-accent-text); letter-spacing: var(--gta-tracking-wide); }
.pub__title { font-family: var(--gta-font-body); font-weight: var(--gta-weight-semibold); font-size: var(--gta-text-lg); color: var(--gta-color-ink); line-height: var(--gta-lh-snug); }
.pub__meta { font-family: var(--gta-font-body); font-size: var(--gta-text-sm); color: var(--gta-color-ink-muted); margin-top: var(--gta-space-2); line-height: var(--gta-lh-base); }
.pub__meta cite { font-style: italic; color: var(--gta-color-ink); }
.pub__link { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); color: var(--gta-accent-text); text-decoration: none; white-space: nowrap; }
.pub__link:hover { text-decoration: underline; }
@media (max-width: 560px) { .pub { grid-template-columns: 1fr; gap: var(--gta-space-1); padding-block: var(--gta-space-5); } }