/* =========================================================================
   GEO SOLUTIONS — ABOUT PAGE v4.1
   Generated: May 2026
   Pattern: Zenko Digital "About Us" — mission strip, philosophy 6-numbered grid,
   Beyond-Agency section, animated stats counter row, mini service cards
   ========================================================================= */

/* =========================================================================
   1. MISSION STRIP (top of page, above hero)
   ========================================================================= */

.mission-strip {
  padding: 140px 0 var(--space-16);
  text-align: center;
  position: relative;
  background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(130, 255, 140, 0.06), transparent 70%);
}

.mission-strip__text {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  max-width: 60ch;
  margin: 0 auto;
  font-weight: var(--weight-medium);
}

@media (max-width: 767px) {
  .mission-strip {
    padding-top: 110px;
  }
  .mission-strip__text {
    font-size: var(--text-h4);
  }
}

/* =========================================================================
   2. ABOUT HERO
   ========================================================================= */

.about-hero {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--divider-3xl);
}

.about-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
  margin: var(--space-6) 0 var(--space-8);
  max-width: 22ch;
}

.about-hero__body {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  max-width: 65ch;
  margin: 0;
}

/* =========================================================================
   3. PHILOSOPHY GRID — 6 numbered principles (Zenko-style)
   ========================================================================= */

.philosophy-section {
  padding: var(--divider-xxl) 0;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}

@media (max-width: 991px) {
  .philosophy-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .philosophy-grid { grid-template-columns: 1fr; }
}

.principle {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border-strong);
}

.principle__num {
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

.principle__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: var(--space-2) 0 0;
}

.principle__body {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin: 0;
}

/* =========================================================================
   4. BEYOND AGENCY SECTION
   ========================================================================= */

.beyond-agency {
  padding: var(--divider-xxl) 0;
}

.beyond-agency__title {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
  margin: var(--space-6) 0 var(--space-8);
  max-width: 24ch;
}

.beyond-agency__body {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin: 0;
}

/* =========================================================================
   5. STATS COUNTER ROW (Zenko signature element)
   ========================================================================= */

.stats-counter-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border-strong);
}

@media (max-width: 767px) {
  .stats-counter-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .stats-counter-row { grid-template-columns: 1fr; gap: var(--space-8); }
}

.stat-counter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stat-counter__value {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-mega);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
}

.stat-counter__value--accent { color: var(--color-accent); }

.stat-counter__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
}

/* =========================================================================
   6. MODULE TEASERS (4 mini cards at bottom of about, like Zenko)
   ========================================================================= */

.module-teasers {
  padding: var(--divider-xxl) 0;
}

.module-teasers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-12);
}

@media (max-width: 991px) { .module-teasers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .module-teasers__grid { grid-template-columns: 1fr; } }

.module-teaser {
  background-color: var(--color-bg-surface-1);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  min-height: 180px;
  transition: all var(--duration-medium) var(--ease-default);
}

.module-teaser:hover {
  background-color: var(--color-bg-surface-2);
  border-color: var(--color-accent);
}

.module-teaser__visual {
  width: 80px;
  height: 80px;
  display: block;
  margin-bottom: var(--space-4);
  background: none;
  position: relative;
  /* subtle settle into the card — keeps optical balance with body text */
  transform: translateZ(0);
  transition: transform var(--duration-medium) var(--ease-default),
              filter var(--duration-medium) var(--ease-default);
}

.module-teaser__visual picture,
.module-teaser__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* the source image already carries its own glow halo;
     we only let it brighten its own card surface, no extra wash */
  pointer-events: none;
}

.module-teaser:hover .module-teaser__visual {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.08);
}

@media (max-width: 767px) {
  .module-teaser__visual { width: 64px; height: 64px; }
}

.module-teaser__name {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.module-teaser__body {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin: 0;
}

/* =========================================================================
   7. ABOUT FINAL CTA
   ========================================================================= */

/* old text-only .about-cta replaced with full-bleed image banner v6.0
   see .about-cta-banner block at end of file */

/* =========================================================================
   END OF about.css v4.1
   ========================================================================= */


/* =========================================================================
   ABOUT BANNER — Altrum-style FULL-VIEWPORT hero with "About" overlay
   v5.0 — sits at top of page (before mission-strip)
   ────────────────────────────────────────────────────────────────────
   Layout:
     [Full-viewport image]         <- .about-banner (88vh)
       ↳ .about-banner__title  ←— huge "About" overlay, vertically centered
       ↳ .about-banner__plus-row ← 5 plus-marks evenly along bottom edge
     [Black thin meta bar]         <- .about-banner-meta
   Scroll behavior: image translateY parallax + slow scale-up (driven by JS)
   ========================================================================= */

.about-banner {
  position: relative;
  width: 100%;
  height: 88vh;
  min-height: 580px;
  max-height: 1000px;
  overflow: hidden;
  background: #000;
  /* full bleed: cancel any inherited container padding */
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .about-banner { height: 75vh; min-height: 480px; }
}

/* ── full-bleed image (oversized for parallax overshoot) ───────────────── */
.about-banner__media {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  display: block;
}

.about-banner__media picture,
.about-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
  transform-origin: center center;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform;
}

/* ── soft shade gradient: darkens left side a touch for headline contrast ── */
.about-banner__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.20) 40%, rgba(0,0,0,0) 65%),
    linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

/* ── content block: title + mission, vertically centered, left-aligned ─── */
.about-banner__content {
  position: absolute;
  top: 50%;
  left: clamp(20px, 5vw, 80px);
  right: clamp(20px, 5vw, 80px);
  transform: translateY(-50%);
  z-index: 2;
  max-width: 1100px;
  pointer-events: none;
}

.about-banner__title {
  margin: 0 0 clamp(16px, 2.5vw, 36px) 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium, 500);
  font-size: clamp(96px, 18vw, 320px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  text-shadow: 0 4px 80px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 100ms,
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
}

.about-banner.is-visible .about-banner__title {
  opacity: 1;
  transform: translateY(0);
}

/* ── mission text under headline ──────────────────────────────────────── */
.about-banner__mission {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 380ms,
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 380ms;
}

.about-banner.is-visible .about-banner__mission {
  opacity: 1;
  transform: translateY(0);
}

/* ── green highlight on final mission sentence ────────────────────────── */
.about-banner__highlight {
  display: inline;
  background: var(--color-accent);
  color: #0A1A0E;
  padding: 0.15em 0.45em;
  font-weight: var(--weight-medium, 500);
  text-shadow: none;
  /* clean rendering when wrapping across lines */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* tiny inset so highlight aligns nicely with surrounding text */
  margin-left: -0.05em;
  /* keeps as one piece if possible */
  white-space: normal;
}

@media (max-width: 767px) {
  .about-banner__content { top: 46%; }
  .about-banner__mission { max-width: 100%; }
}

/* ── 5 plus-marks evenly distributed along bottom edge of banner ─────── */
.about-banner__plus-row {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}

.about-banner__plus-row span {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  user-select: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.about-banner.is-visible .about-banner__plus-row span:nth-child(1) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.about-banner.is-visible .about-banner__plus-row span:nth-child(2) { transition-delay: 380ms; opacity: 1; transform: translateY(0); }
.about-banner.is-visible .about-banner__plus-row span:nth-child(3) { transition-delay: 460ms; opacity: 1; transform: translateY(0); }
.about-banner.is-visible .about-banner__plus-row span:nth-child(4) { transition-delay: 540ms; opacity: 1; transform: translateY(0); }
.about-banner.is-visible .about-banner__plus-row span:nth-child(5) { transition-delay: 620ms; opacity: 1; transform: translateY(0); }

@media (max-width: 767px) {
  .about-banner__plus-row span { font-size: 14px; }
  .about-banner__plus-row     { bottom: 12px; }
}

/* =========================================================================
   ABOUT BANNER META — black thin bar beneath hero
   "+ About Geo Solutions"  |  ©Edition 01  |  ↗ arrow
   ========================================================================= */

.about-banner-meta {
  width: 100%;
  background: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-faint);
  padding: var(--space-5) 0;
}

.about-banner-meta__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .about-banner-meta__inner {
    padding: 0 var(--space-8);
  }
}

.about-banner-meta__left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

.about-banner-meta__plus {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.about-banner-meta__center {
  justify-self: center;
  color: var(--color-text-tertiary);
}

.about-banner-meta__right {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-secondary);
}

@media (max-width: 767px) {
  .about-banner-meta { padding: var(--space-4) 0; }
  .about-banner-meta__inner {
    font-size: 10px;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
  }
}

/* ── reduced-motion: disable all transforms + transitions ────────────── */
@media (prefers-reduced-motion: reduce) {
  .about-banner__media img {
    transform: none !important;
  }
  .about-banner__title,
  .about-banner__plus-row span {
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    transition: none !important;
  }
  .about-banner__plus-row span {
    transform: none !important;
  }
}


/* =========================================================================
   ABOUT FINAL CTA BANNER — full-bleed image background with HUD overlays
   v6.0 — adapted from homepage final-cta-banner pattern
   ────────────────────────────────────────────────────────────────────
   Composition:
     - Image fills the section edge-to-edge (full viewport min-height)
     - Top + bottom fade gradients dissolve image edges into page bg
     - Center vignette darkens the middle for text contrast
     - HUD widgets pinned to 4 corners (mockup feel)
     - Eyebrow + title + CTA buttons centered, layered above image
     - Mobile (<600px): HUD hidden, banner shrinks to content height
   ========================================================================= */

.about-cta-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Background image layer ───────────────────────────────────────────── */
.about-cta-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.about-cta-banner__bg picture,
.about-cta-banner__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

/* Strong top + bottom fade + center vignette */
.about-cta-banner__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Top fade — heavy fade to page bg so banner edge dissolves */
    linear-gradient(to bottom,
      rgba(7, 7, 7, 1.0) 0%,
      rgba(7, 7, 7, 0.95) 8%,
      rgba(7, 7, 7, 0.7) 18%,
      rgba(7, 7, 7, 0.3) 28%,
      rgba(7, 7, 7, 0.0) 40%
    ),
    /* Bottom fade — image dissolves into footer */
    linear-gradient(to top,
      rgba(7, 7, 7, 1.0) 0%,
      rgba(7, 7, 7, 0.85) 5%,
      rgba(7, 7, 7, 0.4) 15%,
      rgba(7, 7, 7, 0.0) 30%
    ),
    /* Center vignette for text legibility */
    radial-gradient(ellipse 70% 60% at 50% 55%,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.15) 50%,
      rgba(0, 0, 0, 0.0) 80%
    );
  pointer-events: none;
}

/* ── Centered content above image ─────────────────────────────────────── */
.about-cta-banner .container {
  position: relative;
  z-index: 2;
  padding: 180px var(--section-pad-x) 180px;
}

.about-cta-banner__content {
  text-align: center;
}

.about-cta-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-10);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.about-cta-banner__cta-row {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .about-cta-banner__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── HUD CORNER OVERLAYS ──────────────────────────────────────────────── */

.about-cta-banner__hud {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* TOP LEFT: brand block + tagline + stat list */
.about-cta-banner__hud--top-left {
  top: var(--space-8);
  left: var(--space-8);
  max-width: 280px;
}

/* TOP RIGHT: discovery slot status widget */
.about-cta-banner__hud--top-right {
  top: var(--space-8);
  right: var(--space-8);
  max-width: 240px;
}

/* BOTTOM LEFT: operating layer label */
.about-cta-banner__hud--bottom-left {
  bottom: var(--space-8);
  left: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* BOTTOM RIGHT: "Engineered to compound." label */
.about-cta-banner__hud--bottom-right {
  bottom: var(--space-8);
  right: var(--space-8);
  text-align: right;
}

/* HUD typography pieces — reused from homepage tokens */
.about-cta-banner .hud-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.about-cta-banner .hud-brand__arrow {
  color: var(--color-accent);
  font-size: 12px;
}

.about-cta-banner .hud-brand__name {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  font-size: 13px;
}

.about-cta-banner .hud-brand__tagline {
  margin: 0 0 var(--space-6);
  color: var(--color-text-tertiary);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
}

.about-cta-banner .hud-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-cta-banner .hud-stats li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.about-cta-banner .hud-stats__label {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

.about-cta-banner .hud-stats li::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(130, 255, 140, 0.35), transparent);
  max-width: 60px;
}

.about-cta-banner .hud-status__head {
  margin-bottom: var(--space-2);
}

.about-cta-banner .hud-status__title {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

.about-cta-banner .hud-status__title strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.about-cta-banner .hud-status__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-cta-banner .hud-status__row {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

.about-cta-banner .hud-status__row strong {
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

.about-cta-banner .hud-corner__label {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

.about-cta-banner .hud-corner__sub {
  color: var(--color-accent);
  font-size: 10px;
  font-weight: var(--weight-medium);
}

/* ── Responsive adjustments ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .about-cta-banner .container {
    padding: 120px var(--section-pad-x) 120px;
  }
  .about-cta-banner__hud { font-size: 9px; }
  .about-cta-banner__hud--top-left  { max-width: 200px; }
  .about-cta-banner__hud--top-right { max-width: 180px; }
  .about-cta-banner .hud-brand__name { font-size: 11px; }
}

@media (max-width: 599px) {
  .about-cta-banner__hud { display: none; }
  .about-cta-banner .container {
    padding: 100px var(--section-pad-x) 100px;
  }
  .about-cta-banner { min-height: auto; }
}