/* ═══════════════════════════════════════════════════════════
   Geomedia 2 — main stylesheet
   Source: Figma frame 311:6 (1728 × 3878 px canvas)
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────── */
:root {
  /* Colors — extracted from Figma node fills */
  --geo-red:    #d9272d;   /* nav FR, hero heading, accents */
  --geo-black:  #000000;   /* body text, nav links           */
  --geo-white:  #ffffff;
  --geo-bg:     #f4f4f5;   /* page background                */
  --geo-muted:  #606c73;   /* logo grey, body copy           */
  --geo-border: #e0e0e0;

  /*
   * Horizontal gutter: 105px / 1728px ≈ 6.08 vw
   * clamped to 1.5 rem (mobile) → 6.5 rem (≥1728 px)
   */
  --geo-gutter: clamp(1.5rem, 6.08vw, 6.5rem);
}

/* ── Reset / base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--geo-bg);
  color: var(--geo-black);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

img   { max-width: 100%; height: auto; display: block; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; margin: 0; padding: 0; }

/* ── Site header ────────────────────────────────────────── */
.site-header {
  background: var(--geo-bg);
  position: relative;
  z-index: 100;
}

/* ── Primary nav ────────────────────────────────────────── */
.site-nav { width: 100%; }

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*
   * Figma: logo top y=36, nav links y=70.
   * Top pad ≈ 36 px; total header height ≈ 94 px.
   */
  padding-top: 2.25rem;     /* 36 px */
  padding-bottom: 1.5rem;   /* brings total to ≈ 94 px */
  padding-left: var(--geo-gutter);
  padding-right: var(--geo-gutter);
}

/* Logo */
.site-nav__logo          { display: flex; align-items: center; flex-shrink: 0; }
.site-nav__logo img      { height: 58px; width: auto; display: block; }

/* Link list */
.site-nav__links { display: flex; align-items: center; gap: 2rem; }

.site-nav__link {
  display: block;
  font-size: 1rem;       /* 16 px — Figma */
  font-weight: 400;      /* Regular */
  line-height: 1.5;      /* 24 px — Figma */
  color: var(--geo-black);
  padding: 0;
  transition: opacity 0.18s;
}
.site-nav__link:hover   { opacity: 0.6; }
.site-nav__link.is-active { font-weight: 600; }   /* SemiBold — Figma active state */

/* FR language link */
.site-nav__lang {
  color: var(--geo-red);
  font-weight: 700;   /* Bold — Figma */
}

.site-nav__link-plus {
  display: inline-block;
  vertical-align: top;
  margin-left: 2px;
  visibility: hidden;     /* reserves space on every link; no layout shift */
}
.site-nav__link.is-active .site-nav__link-plus {
  visibility: visible;
}

.site-nav__sep { display: none; }

/* Hamburger (hidden on desktop) */
.site-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  z-index: 200;
}
.site-nav__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--geo-black);
  transition: transform 0.25s, opacity 0.25s;
}
.site-nav__hamburger[aria-expanded="true"] .site-nav__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__hamburger[aria-expanded="true"] .site-nav__bar:nth-child(2) {
  opacity: 0;
}
.site-nav__hamburger[aria-expanded="true"] .site-nav__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.site-nav-drawer {
  display: none;
  background: var(--geo-bg);
  padding: 1.5rem var(--geo-gutter) 2rem;
  border-top: 1px solid var(--geo-border);
}
.site-nav-drawer.is-open { display: block; }
.site-nav-drawer li + li { margin-top: 0.75rem; }
.site-nav-drawer a {
  font-size: 1rem;
  font-weight: 400;
  color: var(--geo-black);
  transition: opacity 0.18s;
}
.site-nav-drawer a:hover { opacity: 0.6; }
.site-nav-drawer a.is-active { font-weight: 600; }

/* ── Hero section ───────────────────────────────────────── */
.hero {
  background: var(--geo-bg);
  overflow: hidden;
}

/*
 * Heading wrapper.
 * Figma: h1 x=276, canvas 1728 px → 276/1728 = 15.97% from left.
 * padding-left: clamp(4rem, 16vw, 17.25rem)
 *   At 375 px  → 4 rem  = 64 px
 *   At 1440 px → 16 vw  = 230 px  (proportionally correct)
 *   At 1728 px → 17.25 rem = 276 px ✓ (capped)
 */
.hero__heading-wrap {
  padding-top: clamp(2.5rem, 8.1vw, 8.5rem);   /* Figma: y=234, nav bottom≈94 → gap≈140 px */
  padding-bottom: clamp(1rem, 2vw, 2rem);
  padding-left: clamp(4rem, 16vw, 17.25rem);
  padding-right: var(--geo-gutter);
}

.hero__heading {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(2.5rem, 4.63vw, 5rem);   /* 80 px on 1728 px canvas */
  font-weight: 600;                           /* SemiBold — Figma */
  line-height: 1;                             /* 80 px / 80 px = 1 — Figma */
  color: var(--geo-red);
  letter-spacing: 0;
  margin: 0;
  max-width: 14ch;
}

/*
 * Accent line after "Growth." — inline red rule.
 * Appears on the same baseline as the last word of the heading.
 * Grows left-to-right 1 s after page load.
 */
@keyframes hero-line-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero__accent {
  display: inline-block;
  width: clamp(120px, 17.4vw, 300px);
  height: 4px;
  background: var(--geo-red);
  vertical-align: middle;
  margin-left: 0.75rem;
  transform-origin: left center;
  animation: hero-line-draw 1.1s ease-out 1s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero__accent,
  .services-hero__rule,
  .about-hero__rule,
  .contact-hero__rule,
  .policy-hero__rule { animation: none; }
}

/*
 * Carousel wrapper.
 * Figma: carousel x=191 (11.05%), extends to right edge (x+w=1728).
 * Left indent: clamp(2.5rem, 11.05vw, 11.9rem)
 *   At 1728 px → 11.9 rem ≈ 190 px ✓
 * No right padding — carousel bleeds to viewport edge.
 */
.hero__carousel-wrap {
  padding-left: clamp(2.5rem, 11.05vw, 11.9rem);
}

.hero__carousel {
  /* Figma: h=810 px on 1728 px canvas = 46.87 vw */
  height: clamp(280px, 46.87vw, 810px);
  /* Instant image swap — no slide or fade animation */
  --bs-carousel-transition-duration: 0s;
}
.hero__carousel .carousel-inner,
.hero__carousel .carousel-item { height: 100%; }
.hero__carousel .carousel-item { transition: none; }

.hero__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dot indicators */
.hero__dots { margin-bottom: 1rem; }

.hero__dots [data-bs-target] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: background 0.3s;
}
.hero__dots .active { background: var(--geo-white); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .site-nav__links    { display: none; }
  .site-nav__hamburger { display: flex; }

  /* Collapse heading indent on tablet/mobile */
  .hero__heading-wrap {
    padding-left: var(--geo-gutter);
  }
  /* Full-width carousel on small screens */
  .hero__carousel-wrap {
    padding-left: 0;
  }
}

@media (max-width: 575.98px) {
  .site-nav__inner {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

/* ── Introduction section ────────────────────────────────────
 * Figma: Home frame 311:6, section y 1430–1916 (486 px height)
 *
 * Confirmed node measurements (1728 px canvas):
 *   Label "Introduction" — 311:17 — Figtree Regular 16 px / lh 24 px / #000000
 *   "+" icon — 311:18 — VECTOR x=283 y=1549 w=16 h=16
 *   "Learn more" — 311:51 — Figtree SemiBold 18 px / lh 24 px / #000000
 *
 * Derived column geometry:
 *   Label col (incl. pre-label space): x=105→298 = 193 px (11.2 vw)
 *   Gap label→heading:                              87 px (5.03 vw)
 *   Heading col:                       x=385→941 = 556 px (32.2 vw)
 *   Body col:                          x=941→1623 = 682 px (fills rest)
 *   Section top/bottom padding:                   ≈ 119 px (6.9 vw)
 *   Gap "+" to label text:             1664-1549-16 = 99 px (5.73 vw)
 *   Heading size: ~60 px @ 1728 px — SemiBold — lh 1.12 — #d9272d
 * ─────────────────────────────────────────────────────────── */

.intro {
  background: var(--geo-bg);
}

.intro__inner {
  display: flex;
  align-items: flex-start;
  padding: clamp(3rem, 6.9vw, 7.25rem) var(--geo-gutter);
}

/*
 * Label column — 193 px wide. Right-aligned so rotated label sits at x=275.
 * Gap to heading: 703 − 298 = 405 px (23.44 vw at 1728 px).
 */
.intro__label-col {
  flex: 0 0 clamp(5rem, 11.2vw, 12.05rem);
  margin-left: clamp(0px, 5.79vw, 100px);
  margin-right: clamp(1.5rem, 17.65vw, 19.0625rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.25rem;
}

/* cross SVG above the rotated label text */
.intro__plus {
  display: block;
  flex-shrink: 0;
  margin-bottom: 0.75rem;
}

/* Rotated "Introduction" label — 16 px Figtree Regular, reads bottom-to-top */
.intro__label-text {
  display: block;
  font-size: 1rem;       /* 16 px — node 311:17 */
  font-weight: 400;      /* Regular */
  line-height: 1.5;      /* 24 px */
  color: var(--geo-black);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* Heading column — 235 px (13.6 vw at 1728 px) — Figma x=703, width=235 */
.intro__heading-col {
  flex: 0 0 clamp(160px, 13.6vw, 14.6875rem);
}

.intro__heading {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(2rem, 3.47vw, 3.75rem);   /* ≈ 60 px at 1728 px canvas */
  font-weight: 600;                            /* SemiBold */
  line-height: 1.12;
  color: var(--geo-red);
  letter-spacing: -0.01em;
  margin: 0;
}

/* Body column — fills remaining space; 21 px gap from heading right edge (x=938 → x=959) */
.intro__body-col {
  flex: 1;
  padding-top: 0.25rem;
  padding-left: clamp(0.5rem, 1.215vw, 1.3125rem);
}

.intro__body {
  font-size: 0.9375rem;   /* 15 px */
  line-height: 1.75;
  color: var(--geo-muted);
  margin: 0 0 1.25rem;
}
.intro__body:last-of-type { margin-bottom: 0; }
.intro__body:first-child,
.intro__body:nth-child(2) { width: 50%; }

/* "Learn more →" — 18 px SemiBold, #000000 — node 311:51 */
.intro__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  font-size: 1.125rem;   /* 18 px */
  font-weight: 600;      /* SemiBold */
  line-height: 1.5;
  color: var(--geo-black);
  margin-top: 1.5rem;
  transition: opacity 0.18s;
}
.intro__link-arrow { flex-shrink: 0; overflow: visible; }
.intro__link:hover { opacity: 0.6; }

/* Arrow grow — shaft extends right, arrowhead follows */
.intro__link-arrow line,
.site-footer__cta-arrow line {
  transform-origin: 0px 7px;
  transition: transform 0.25s ease;
}
.intro__link:hover .intro__link-arrow line,
.site-footer__cta:hover .site-footer__cta-arrow line {
  transform: scaleX(1.5);
}
.intro__link-arrow polyline,
.site-footer__cta-arrow polyline {
  transition: transform 0.25s ease;
}
.intro__link:hover .intro__link-arrow polyline,
.site-footer__cta:hover .site-footer__cta-arrow polyline {
  transform: translateX(10px);
}

/* ── Introduction: responsive ────────────────────────────── */
@media (max-width: 991.98px) {
  .intro__inner       { flex-wrap: wrap; }
  .intro__label-col   { display: none; }
  .intro__heading-col { flex: 0 0 100%; margin-bottom: 2.5rem; }
  .intro__body-col    { flex: 0 0 100%; padding-top: 0; }
  .intro__body:first-child,
  .intro__body:nth-child(2) { width: 100%; }
}

@media (max-width: 575.98px) {
  .intro__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .video { height: clamp(260px, 70vw, 400px); }
}

/* ── Video section ───────────────────────────────────────────
 * Figma: Home frame 311:6 · y 1916–2888 (972 px)
 * 972 / 1728 = 56.25 vw
 * Play button instance (311:58): 101 × 101 px — 101/1728 = 5.85 vw
 * ─────────────────────────────────────────────────────────── */
.video {
  position: relative;
  overflow: hidden;
  height: clamp(400px, 56.25vw, 972px);
  background: var(--geo-black);
}

.video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.video__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video__play {
  width: clamp(60px, 5.85vw, 101px);
  height: clamp(60px, 5.85vw, 101px);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s;
}
.video__play:hover         { opacity: 0.75; }
.video__play:focus-visible {
  outline: 2px solid var(--geo-white);
  outline-offset: 4px;
  border-radius: 50%;
}

.video__play-icon {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Outcomes section ────────────────────────────────────────
 * Figma: Home frame 311:6 · y 2888–3585 (697 px)
 *
 * Confirmed node measurements (1728 px canvas):
 *   Body copy (311:53):     x=279  w=331  18 px Regular  #000
 *   Outcomes list (311:55): x=703  w=698  30 px SemiBold lh=40 px  red+black
 *   Tagline (311:54):       x=703  w=631  18 px SemiBold #000
 *
 * Left indent: 279/1728 = 16.15 vw (matches hero heading x=276)
 * Column gap: (703−610) = 93 px → 5.38 vw
 * Top pad:    164 px → 9.49 vw
 * Bottom pad: 320 px → 18.52 vw
 * ─────────────────────────────────────────────────────────── */

.outcomes {
  background: var(--geo-bg);
}

.outcomes__inner {
  display: flex;
  align-items: flex-start;
  /*
   * padding-left aligns to x=279 on the 1728 px canvas,
   * matching the hero heading's left edge.
   */
  padding-top:    clamp(3rem, 9.49vw, 10.25rem);
  padding-bottom: clamp(2rem, 9.26vw, 10rem);
  padding-left:   clamp(4rem, 16.15vw, 17.44rem);
  padding-right:  var(--geo-gutter);
}

/* Left column — body copy, 331 px at 1728 px (19.15 vw) */
.outcomes__body-col {
  flex: 0 0 clamp(180px, 19.15vw, 20.69rem);
  margin-right: clamp(1.5rem, 5.38vw, 5.81rem);   /* 93 px gap */
}

.outcomes__body {
  font-size: 1.125rem;   /* 18 px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--geo-black);
  margin: 0;
}

/* Right column — outcome list + tagline */
.outcomes__list-col {
  flex: 1;
}

/* ul reset already in base; this only adds spacing */
.outcomes__list { margin-bottom: clamp(1rem, 1.5vw, 1.5rem); }

.outcomes__item {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(1.25rem, 1.74vw, 1.875rem);   /* 30 px at 1728 px */
  font-weight: 600;
  line-height: 1.333;                              /* 40/30 — Figma */
  color: var(--geo-black);
}

/* First word of each outcome item — red */
.outcomes__em { color: var(--geo-red); }

.outcomes__tagline {
  font-size: 1.125rem;   /* 18 px */
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: var(--geo-black);
  margin: 0;
}

/* ── Outcomes: responsive ────────────────────────────────── */
@media (max-width: 991.98px) {
  .outcomes__inner {
    flex-direction: column;
    padding-left: var(--geo-gutter);
  }
  .outcomes__body-col {
    flex: 0 0 auto;
    width: 100%;
    margin-right: 0;
    margin-bottom: 2rem;
  }
  .outcomes__list-col { width: 100%; }
}

@media (max-width: 575.98px) {
  .outcomes__inner {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
  }
}

/* ── Site footer ─────────────────────────────────────────────
 * Figma: Home frame 311:6 · y 3585–3878 (293 px)
 *
 * Confirmed node measurements (1728 px canvas):
 *   Logo group (311:21):  x=190  w=123  h=33
 *   Slogan (311:7):       x=880  16 px Italic 400  #000 opacity=0.5
 *   CTA (311:33):         x=880  16 px SemiBold 600  #000
 *   Arrow (311:34):       23×14 px right-pointing vector
 *   Nav (311:8):          x=1386 16 px Regular 400  #000 opacity=0.5
 *                         4 items × 44 px each (24 px lh + 20 px gap)
 *   Copyright (311:35):   14 px Regular 400  #000 opacity=0.3
 * ─────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--geo-bg);
}

.site-footer__inner {
  padding: clamp(2.5rem, 3.82vw, 4.125rem) var(--geo-gutter) clamp(1.5rem, 2.72vw, 2.94rem);
}

/* Three-column top row: logo | slogan+CTA | nav */
.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 2.14vw, 2.125rem);   /* gap to copyright row */
}

/* Logo */
.site-footer__logo-link { display: inline-block; }
.site-footer__logo      { height: 33px; width: auto; display: block; }
.site-footer__brand     { flex: 0 0 calc(50vw - var(--geo-gutter)); }

/* Centre column — slogan + CTA */
.site-footer__cta-col {
  flex: 1;
  padding: 0 clamp(1.5rem, 3vw, 3rem) 0 0;
}

.site-footer__slogan {
  font-style: italic;
  font-size: 1rem;      /* 16 px — Figma */
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.5);   /* #000 fill opacity=0.5 */
  max-width: 14.375rem;         /* 230 px — Figma w */
  margin: 0 0 0.5rem;
}

.site-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;        /* 9 px gap between text and arrow (956−947) */
  font-size: 1rem;       /* 16 px */
  font-weight: 600;
  line-height: 1.5;
  color: var(--geo-black);
  transition: opacity 0.18s;
}
.site-footer__cta:hover { opacity: 0.6; }

.site-footer__cta-arrow { flex-shrink: 0; overflow: visible; }

/* Right column — nav links */
.site-footer__nav a {
  display: block;
  font-size: 1rem;         /* 16 px */
  font-weight: 400;
  line-height: 1.5;        /* 24 px */
  color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.18s;
}
.site-footer__nav a:hover    { opacity: 0.8; }
.site-footer__nav li + li    { margin-top: 0.15625rem; }

/* Copyright row */
.site-footer__bottom {
  padding-top: clamp(1rem, 1.97vw, 2.125rem);   /* 34 px gap at 1728 px */
  padding-left: calc(50vw - var(--geo-gutter));
}

.site-footer__copy {
  font-size: 0.875rem;    /* 14 px */
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.3);   /* #000 fill opacity=0.3 */
  margin: 0;
}
.site-footer__copy a {
  color: inherit;
  transition: opacity 0.18s;
}
.site-footer__copy a:hover { opacity: 0.6; }

/* ── Site footer: responsive ─────────────────────────────── */
@media (max-width: 991.98px) {
  .site-footer__top {
    flex-wrap: wrap;
    gap: 2rem;
  }
  .site-footer__brand  { flex: 0 0 100%; }
  .site-footer__cta-col {
    flex: 1;
    padding: 0;
    text-align: left;
  }
  .site-footer__slogan { margin-left: 0; }
  .site-footer__nav    { flex: 0 0 auto; }
  .site-footer__bottom { padding-left: 0; }
}

@media (max-width: 575.98px) {
  .site-footer__top {
    flex-direction: column;
    gap: 1.5rem;
  }
  .site-footer__nav { flex: 0 0 100%; }
  .site-footer__copy { font-size: 0.8125rem; }
}

/* ═══════════════════════════════════════════════════════════
   Services page
   Source: Figma frame 311:66 (1728 × 5401 px canvas)
   ═══════════════════════════════════════════════════════════ */

/* ── Services hero ──────────────────────────────────────── */
/* Overlay pattern: image bleeds left with right gradient fade.   */
/* Heading x=790 (45.72vw) starts above image top (y=471).        */
/* Intro x=1218 (70.49vw), w=294 — far-right narrow column.       */
.services-hero {
  position: relative;
  background: var(--geo-bg);
  min-height: clamp(360px, 63.25vw, 1093px);
  overflow: hidden;
}

.services-hero__image-wrap {
  position: absolute;
  left: 0;
  /* Image starts at y=471 in frame; nav ~93px → 378px below section top */
  top: clamp(60px, 15.45vw, 267px);
  width: clamp(280px, 64.24vw, 1110px);
  pointer-events: none;
}

/* Gradient fade: photo fades to page background on the right edge */
.services-hero__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 50%, var(--geo-bg) 88%);
}

.services-hero__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text positioned in the right portion, starting at x=790 (45.72vw) */
.services-hero__text {
  position: relative;
  z-index: 1;
  margin-left: clamp(180px, 45.72vw, 790px);
  padding-top: clamp(2.5rem, 8.1vw, 8.5rem);
  padding-right: clamp(1.5rem, 6.08vw, 6.5rem);
  padding-bottom: clamp(1.5rem, 5.57vw, 6rem);
}

/* 80px SemiBold red, line-height 1 (tight) */
.services-hero__heading {
  font-size: clamp(2rem, 4.63vw, 5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--geo-red);
  margin: 0 0 clamp(1.5rem, 5.9vw, 6.375rem);
  max-width: clamp(240px, 38.43vw, 664px);
}

/* Absolutely positioned: Top 558px, Left 1281px in Figma frame.
   Section starts at frame y≈93 → top=465px (26.91vw).
   Text container starts at x=790 → left=491px (28.42vw). */
.services-hero__rule {
  position: absolute;
  top: calc(clamp(80px, 20.49vw, 354px) - 10px);
  left: clamp(60px, 28.42vw, 491px);
  border: none;
  border-top: 4px solid var(--geo-red);
  opacity: 1;
  margin: 0;
  width: clamp(80px, 14.87vw, 257px);
  transform-origin: left center;
  animation: hero-line-draw 1.1s ease-out 1s both;
}

/* Intro at x=1218 — indented 428px from text column left (24.77vw) */
.services-hero__intro {
  font-size: clamp(0.9375rem, 1.39vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--geo-black);
  margin: 0;
  margin-left: clamp(40px, 24.77vw, 428px);
  max-width: clamp(160px, 17.01vw, 294px);
}

/* ── Service blocks ─────────────────────────────────────── */
/* Badge (num): 60px SemiBold red — large numerals, no circle    */
/* Label: 18px SemiBold black, horizontal, beside badge          */
/* img-col: 855px total = image (662-663px) + outer gutter (192px) */
/* Gutter: 190-192px ≈ 11vw on image's outer edge                */
.service-block {
  display: flex;
  align-items: stretch;
  background: var(--geo-bg);
}

.service-block__body-col {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: start;
  padding-top: clamp(1.5rem, 4.3vw, 4.625rem);
  padding-bottom: clamp(1.75rem, 5.11vw, 5.5rem);
}

/* Last service block gets half the bottom padding so only the footer gap shrinks */
.service-block:last-of-type .service-block__body-col {
  padding-bottom: clamp(0.875rem, 2.555vw, 2.75rem);
}

/* Content left (img-right): left-pad to x=190 (11vw from edge) */
.service-block--img-right .service-block__body-col {
  padding-left: clamp(1.5rem, 11vw, 11.875rem);
  padding-right: clamp(1rem, 3vw, 3.25rem);
}

/* Content right (img-left): minimal left gap, symmetric right gutter */
.service-block--img-left .service-block__body-col {
  padding-left: clamp(0.5rem, 1.16vw, 1.25rem);
  padding-right: clamp(1.5rem, 11vw, 11.875rem);
}

.service-block__meta {
  display: contents;
}

/* Large red number — 60px SemiBold, no circle */
.service-block__num {
  grid-column: 1;
  grid-row: 1 / 3;
  font-size: clamp(2rem, 3.47vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--geo-red);
}

.service-block__label {
  grid-column: 2;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--geo-black);
  margin-bottom: 0.35rem;
}

.service-block:nth-of-type(2) .service-block__heading { max-width: 90%; }

.service-block__heading {
  grid-column: 2;
  max-width: 50%;
  font-size: clamp(1.5rem, 2.31vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--geo-red);
  margin: 0 0 clamp(0.75rem, 1.39vw, 1.5rem);
}

.service-block__body {
  grid-column: 2;
  max-width: 50%;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--geo-black);
  margin: 0 0 clamp(1rem, 1.85vw, 2rem);
}

.service-block__content {
  grid-column: 2;
  max-width: 50%;
}

.service-block__content p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--geo-black);
  margin: 0 0 0.75rem;
}

.service-block__list {
  margin: 0 0 1rem;
  padding: 0;
}

.service-block__list li {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--geo-black);
  padding-left: 1.25rem;
  position: relative;
  margin-bottom: 0.25rem;
}

.service-block__list li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--geo-red);
  font-weight: 600;
}

/* img-col total = image + outer gutter (11vw) */
.service-block__img-col {
  flex: 0 0 clamp(200px, 49.48vw, 855px);
  overflow: hidden;
}

/* img-left: left gutter pushes image away from left edge */
.service-block--img-left .service-block__img-col {
  padding-left: clamp(1.5rem, 11vw, 11.875rem);
}

/* img-right: right gutter pushes image away from right edge */
.service-block--img-right .service-block__img-col {
  padding-right: clamp(1.5rem, 11vw, 11.875rem);
}

/* Service block 4: vertically center image and fade right edge */
.service-block--04 .service-block__img-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.service-block--04 .service-block__img-col::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  background: linear-gradient(to left, var(--geo-bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Service block 3: vertically center image and fade left edge */
.service-block--03 .service-block__img-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.service-block--03 .service-block__img-col::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  background: linear-gradient(to right, var(--geo-bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Service block 2: vertically center image and fade right edge */
.service-block--02 .service-block__img-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.service-block--02 .service-block__img-col::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  background: linear-gradient(to left, var(--geo-bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Service block 1: vertically center image and fade left edge */
.service-block--01 .service-block__img-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.service-block--01 .service-block__img-col::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  background: linear-gradient(to right, var(--geo-bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.service-block__img {
  width: 100%;
  height: clamp(350px, 36.22vw, 626px);
  object-fit: cover;
  display: block;
}

.service-block__img-wrap {
  position: relative;
  display: block;
}

.service-block__icon {
  position: absolute;
  pointer-events: none;
  height: auto;
  z-index: 1;
}

/* Figma positions: icon offset / image dimensions (662×626) */
/* monitor/mobile/docs shifted −1.86% horiz, +6.73% vert to center group over image */
.service-block__icon--monitor  { left: 35.1%; top: 25.2%; width: clamp(70px, 11.1vw, 195px); }
.service-block__icon--mobile   { left: 31.0%; top: 51.7%; width: clamp(35px, 5.1vw, 90px);   }
.service-block__icon--docs     { left: 51.7%; top: 51.7%; width: clamp(46px, 7.6vw, 131px);  }
.service-block__icon--chart    { left: 37.2%; top: 36.4%; width: clamp(60px, 9.84vw, 170px); }
.service-block__icon--plus      { left: 30.0%; top: 16.6%; width: clamp(30px, 4.92vw, 85px);  }
.service-block__icon--plus-sm   { left: 14.0%; top: 81.2%; width: clamp(20px, 3.01vw, 52px);  }
.service-block__icon--plus-med  { left: 47.9%; top: 68.1%; width: clamp(15px, 2.43vw, 42px); aspect-ratio: 42 / 41; }
.service-block__icon--plus-xs   { left: 71.6%; top: 27.8%; width: clamp(12px, 1.68vw, 29px); aspect-ratio: 29 / 28; }
.service-block__icon--plus-tiny { left: 23.1%; top: 39.8%; width: clamp(10px, 1.22vw, 21px); aspect-ratio: 1 / 1;   }

/* ── Services outcome ───────────────────────────────────── */
/* Figma: text col left (x=276), photo right (x=829, w=899)  */
.services-outcome {
  background: var(--geo-bg);
  padding-top: 3rem;
}

.services-outcome__inner {
  display: flex;
  align-items: stretch;
}

.services-outcome__text-col {
  flex: 1;
  background: rgba(217, 217, 217, 0.5);
  padding: clamp(2rem, 4.92vw, 5.3125rem) clamp(1.5rem, 6.08vw, 6.5rem) clamp(2rem, 14.58vw, 15.75rem) clamp(1.5rem, 15.97vw, 17.25rem);
}

.services-outcome__heading {
  font-size: clamp(1.5rem, 2.31vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--geo-red);
  margin: 0 0 clamp(1rem, 1.85vw, 2rem);
}

.services-outcome__intro {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--geo-black);
  margin: 0 0 1rem;
}

.services-outcome__list {
  margin: 0 0 clamp(1rem, 1.5vw, 1.5rem);
}

.services-outcome__item {
  font-size: clamp(1.125rem, 1.39vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--geo-black);
  margin-bottom: 0.375rem;
}

.services-outcome__em {
  color: var(--geo-red);
}

.services-outcome__tagline {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--geo-black);
  margin: 0;
}

.services-outcome__img-col {
  flex: 0 0 clamp(280px, 52.02vw, 899px);
  overflow: hidden;
  position: relative;
}

.services-outcome__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Services: responsive ───────────────────────────────── */
@media (max-width: 991.98px) {
  /* Hero: switch overlay to stacked (image top, text bottom) */
  .services-hero {
    min-height: auto;
    overflow: visible;
  }
  .services-hero__image-wrap {
    position: relative;
    top: auto;
    width: 100%;
    margin-bottom: 0;
  }
  .services-hero__image-wrap::after {
    background: linear-gradient(to bottom, transparent 60%, var(--geo-bg) 100%);
  }
  .services-hero__img {
    width: 100%;
    height: clamp(220px, 50vw, 420px);
    object-fit: cover;
  }
  .services-hero__text {
    margin-left: 0;
    padding: 2rem var(--geo-gutter) 3rem;
  }
  .services-hero__heading { max-width: 100%; margin-bottom: 1rem; }
  .services-hero__rule    { position: static; top: auto; left: auto; margin: 0 0 1.25rem; }
  .services-hero__intro   { margin-left: 0; max-width: 100%; }

  /* Service blocks: stack vertically, text first then image */
  .service-block {
    flex-direction: column;
  }
  /* img-left sections: body is second in DOM — swap to show first */
  .service-block--img-left .service-block__img-col  { order: 2; }
  .service-block--img-left .service-block__body-col { order: 1; }

  .service-block__body-col,
  .service-block--img-right .service-block__body-col,
  .service-block--img-left  .service-block__body-col {
    padding: 1.25rem var(--geo-gutter);
  }
  .service-block:last-of-type .service-block__body-col { padding-bottom: 0.625rem; }
  .service-block__img-col,
  .service-block--img-left  .service-block__img-col,
  .service-block--img-right .service-block__img-col {
    flex: 0 0 auto;
    padding: 0;
    width: 100%;
  }
  .service-block__img { height: clamp(220px, 50vw, 420px); }
  .service-block__icon { display: none; }
  .service-block__heading,
  .service-block__body,
  .service-block__content { max-width: 100%; }
  .service-block:nth-of-type(2) .service-block__heading { max-width: 100%; }

  .services-outcome__inner {
    flex-direction: column;
  }
  .services-outcome__text-col {
    padding: 2rem var(--geo-gutter);
  }
  .services-outcome__img-col {
    flex: 0 0 auto;
    width: 100%;
    height: clamp(220px, 50vw, 420px);
    position: relative;
  }
}

@media (max-width: 575.98px) {
  .services-hero__heading {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
  .service-block__heading,
  .services-outcome__heading {
    font-size: 1.5rem;
  }
  .service-block__num { font-size: 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   About page
   Source: Figma frame 311:190 (1728 × 3194 px canvas)
   ═══════════════════════════════════════════════════════════ */

/* ── About hero ─────────────────────────────────────────────
 * Heading 311:231: x=191 y=295 w=696 — SemiBold 80px #d9272d
 * Red rule 311:232: x=583 y=584 w=345 — 4px solid
 * Body text 311:235: x=191 y=675 w=322 — Regular 18px
 * Office photo 311:229: left=40.68% (x=703) top=21.82vw (y=377 from section)
 * Gradient 311:230: left=40% (x=691) — -60deg transparent→bg
 * ─────────────────────────────────────────────────────────── */
.about-hero {
  position: relative;
  background: var(--geo-bg);
  overflow: hidden;
  /*
   * Section height from nav bottom to Why Geomedia start:
   * (1315 − 93) / 1728 = 70.72 vw
   */
  min-height: clamp(380px, 67.59vw, 73rem);
}

.about-hero__img-wrap {
  position: absolute;
  left: 40.68%;
  right: 0;
  top: clamp(30px, 18.69vw, 20.1875rem);
  pointer-events: none;
}

.about-hero__img {
  width: 100%;
  height: clamp(300px, 43.58vw, 47.0625rem);   /* 753 px at 1728 px */
  object-fit: cover;
  display: block;
}

.about-hero__gradient {
  position: absolute;
  left: 40%;    /* x=691 / 1728 = 40.0% */
  width: 39.24%;  /* 678 px / 1728 */
  top: clamp(30px, 18.69vw, 20.1875rem);
  height: clamp(200px, 40.39vw, 43.625rem);   /* 698 px */
  background: linear-gradient(-60deg, rgba(244, 244, 244, 0) 20%, rgb(244, 244, 244) 99%);
  pointer-events: none;
  z-index: 1;
}

.about-hero__text {
  position: relative;
  z-index: 2;
  /* Content left edge: x=191 / 1728 = 11.07 vw */
  padding-left: clamp(1.5rem, 11.07vw, 11.9375rem);
  padding-right: var(--geo-gutter);
  padding-top: clamp(2.5rem, 8.1vw, 8.5rem);
  padding-bottom: clamp(3rem, 10vw, 10rem);
}

/*
 * 80 px SemiBold red heading, max-width 696 px.
 * Wraps to 4 lines at desktop: Technology / Enables Precision. / Experience / Defines It.
 */
.about-hero__heading {
  font-size: clamp(2.5rem, 4.63vw, 5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--geo-red);
  /* Gap to body text: 675 − 295 − 320 (4 × 80 px lines) = 60 px */
  margin: 0 0 clamp(1rem, 3.47vw, 3.75rem);
  max-width: clamp(200px, 40.28vw, 43.5rem);   /* 696 px */
}

/*
 * Absolutely positioned red rule after heading.
 * Frame absolute: x=583 y=584, width=345.
 * Section starts at frame y=93 → from section top: y=491 px.
 */
.about-hero__rule {
  position: absolute;
  border: none;
  border-top: 4px solid var(--geo-red);
  opacity: 1;
  margin: 0;
  top: calc(clamp(65px, 24.79vw, 26.75rem) - 2px);
  left: clamp(80px, 33.74vw, 36.4375rem);    /* 583 / 1728 */
  width: clamp(80px, 19.95vw, 21.5625rem);   /* 345 / 1728 */
  transform-origin: left center;
  animation: hero-line-draw 1.1s ease-out 1s both;
}

.about-hero__body {
  max-width: clamp(180px, 18.64vw, 20.125rem);   /* 322 px */
}

.about-hero__body p {
  font-size: 1.125rem;   /* 18 px */
  line-height: 1.333;    /* 24 px */
  color: var(--geo-black);
  margin: 0 0 1.5rem;
}

.about-hero__body p:last-child { margin-bottom: 0; }

/* ── Why Geomedia ───────────────────────────────────────────
 * Section: frame y 1315–1590 (height 275 px)
 * Label 311:291: x=786 (45.52%) — SemiBold 18px #000
 * Heading 311:290: x=786 y=1354 w=546 — SemiBold 40px #d9272d
 * Left area (0–786px) reserved for chart decoration (omitted)
 * ─────────────────────────────────────────────────────────── */
.about-why {
  background: var(--geo-bg);
  padding-top: clamp(2rem, 4.34vw, 4.6875rem);     /* ≈ 75 px visual gap */
  padding-bottom: clamp(1.25rem, 3.355vw, 3.625rem);
}

.about-why__inner {
  display: flex;
  align-items: flex-start;
  padding-left: var(--geo-gutter);
  padding-right: var(--geo-gutter);
}

/*
 * Left placeholder for the decorative data chart.
 * Width = label left (786px) − gutter (105px) = 681 px = 39.41 vw
 */
.about-why__chart-col {
  flex: 0 0 clamp(60px, 39.41vw, 42.5625rem);
}

/* ── Scatter chart overlay ──────────────────────────────────
 * .about-page is position:relative; the scatter is absolute
 * within it so crosses stay locked to canvas coordinates.
 *
 * Coordinate formula (Figma canvas 1728 × 3194 px):
 *   left = x_px / 1728 × 100  (% of viewport width)
 *   top  = y_px / 1728 × 100vw (vw so it scales with viewport)
 *
 * Nodes 311:240–271 (30 of 32; 311:243 and 311:251 omitted as
 * they reuse the same SVG path as 311:240 and 311:249).
 * ─────────────────────────────────────────────────────────── */
.about-page {
  position: relative;
}

.about-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

.chart-cross {
  position: absolute;
  width: clamp(14px, 1.5625vw, 1.6875rem);   /* 27 px at 1728 */
  height: auto;
  pointer-events: none;
}

/* top = (canvas_y_px − 94) / 1728 × 100vw − 3vw (visual nudge up) */
/* 311:240 */ .chart-cross--1  { left: 27.98%; top: 51.63vw; }
/* 311:241 */ .chart-cross--2  { left: 30.07%; top: 51.63vw; }
/* 311:242 */ .chart-cross--3  { left: 32.95%; top: 48.56vw; }
/* 311:244 */ .chart-cross--4  { left: 36.35%; top: 51.63vw; }
/* 311:245 */ .chart-cross--5  { left: 38.45%; top: 51.63vw; }
/* 311:246 */ .chart-cross--6  { left: 42.63%; top: 51.63vw; }
/* 311:247 */ .chart-cross--7  { left: 52.78%; top: 51.63vw; }
/* 311:248 */ .chart-cross--8  { left: 25.89%; top: 53.60vw; }
/* 311:249 */ .chart-cross--9  { left: 30.07%; top: 53.60vw; }
/* 311:250 */ .chart-cross--10 { left: 38.45%; top: 53.60vw; }
/* 311:252 */ .chart-cross--11 { left: 25.89%; top: 55.51vw; }
/* 311:253 */ .chart-cross--12 { left: 34.26%; top: 55.51vw; }
/* 311:254 */ .chart-cross--13 { left: 36.35%; top: 55.51vw; }
/* 311:255 */ .chart-cross--14 { left: 58.76%; top: 55.51vw; }
/* 311:256 */ .chart-cross--15 { left: 14.10%; top: 57.36vw; }
/* 311:257 */ .chart-cross--16 { left: 27.98%; top: 57.36vw; }
/* 311:258 */ .chart-cross--17 { left: 30.07%; top: 57.36vw; }
/* 311:259 */ .chart-cross--18 { left: 36.35%; top: 57.36vw; }
/* 311:260 */ .chart-cross--19 { left: 38.45%; top: 57.36vw; }
/* 311:261 */ .chart-cross--20 { left: 42.63%; top: 57.36vw; }
/* 311:262 */ .chart-cross--21 { left: 48.91%; top: 57.36vw; }
/* 311:264 */ .chart-cross--22 { left: 23.55%; top: 58.52vw; }
/* 311:265 */ .chart-cross--23 { left: 32.17%; top: 59.27vw; }
/* 311:266 */ .chart-cross--24 { left: 40.54%; top: 59.27vw; }
/* 311:268 */ .chart-cross--25 { left: 27.98%; top: 61.18vw; }
/* 311:270 */ .chart-cross--26 { left: 38.45%; top: 61.18vw; }
/* 311:271 */ .chart-cross--27 { left: 44.73%; top: 61.18vw; }
/* 311:263 */ .chart-cross--28 { left: 19.41%; top: 63.55vw; }
/* 311:267 */ .chart-cross--29 { left: 25.11%; top: 64.30vw; }
/* 311:269 */ .chart-cross--30 { left: 36.35%; top: 68.58vw; }

.about-why__text-col { flex: 1; }

.about-why__label {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.333;
  color: var(--geo-black);
  margin: 0 0 clamp(0.5rem, 1.27vw, 1.375rem);   /* 22 px */
}

/*
 * 40 px SemiBold red, max-width 546 px.
 * Wraps to 3 lines: "Most agencies optimize media." /
 * "Geomedia optimizes" / "retail performance."
 */
.about-why__heading {
  font-size: clamp(1.5rem, 2.31vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--geo-red);
  margin: 0;
  max-width: clamp(200px, 31.6vw, 34.125rem);   /* 546 px */
}

/* ── Our Team intro ─────────────────────────────────────────
 * Section: frame y 1590–1818 (height 228 px)
 * Label 311:236: x=451 — SemiBold 18px
 * Heading 311:237: x=448 — SemiBold 40px #d9272d
 * Body 311:239: x=789 w=527 — Regular 18px
 * ─────────────────────────────────────────────────────────── */
.about-team {
  background: var(--geo-bg);
}

.about-team__intro {
  padding-top: clamp(1rem, 2.545vw, 2.75rem);
  padding-bottom: clamp(2rem, 5.09vw, 5.5rem);
}

.about-team__intro-inner {
  display: flex;
  align-items: flex-start;
  /* Content left edge: x=448 / 1728 = 25.93 vw */
  padding-left: clamp(1.5rem, 25.93vw, 28rem);
  padding-right: var(--geo-gutter);
  gap: 0;
}

/*
 * Left column: label + heading.
 * Width = body text left (789) − label left (448) = 341 px = 19.73 vw
 */
.about-team__label-col {
  flex: 0 0 clamp(160px, 19.73vw, 21.3125rem);
  padding-right: 1.5rem;
}

.about-team__label {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.333;
  color: var(--geo-black);
  margin: 0 0 clamp(0.5rem, 0.93vw, 1rem);
}

.about-team__intro-heading {
  font-size: clamp(1.5rem, 2.31vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--geo-red);
  margin: 0;
}

/* Right column: body text, max-width 527 px = 30.5 vw */
.about-team__body-col { flex: 1; }

.about-team__body-col p {
  font-size: 1.125rem;
  line-height: 1.333;
  color: var(--geo-black);
  margin: 0;
  max-width: clamp(200px, 30.5vw, 32.9375rem);   /* 527 px */
}

/* ── Leadership Team ────────────────────────────────────────
 * Header: two 1px solid lines (y=1818, y=1881) sandwiching heading.
 * Lines: left=447px width=1090px (from 25.88% to 88.96% of canvas).
 * Grid: padding-left=447px; two equal cols; left photos at x=492 (44px into col).
 * ─────────────────────────────────────────────────────────── */
.about-team__leadership-header {
  margin-left: clamp(1.5rem, 25.88vw, 27.9375rem);    /* x=447 / 1728 */
  margin-right: clamp(1.5rem, 11.05vw, 11.9375rem);   /* right edge 1728−1537=191px */
  border-top: 1px solid var(--geo-black);
  border-bottom: 1px solid var(--geo-black);
  /*
   * Vertical padding: 11px above heading, 13px below.
   * 11 / 1728 = 0.64 vw ; 13 / 1728 = 0.75 vw
   */
  padding: clamp(0.5rem, 0.64vw, 0.6875rem) 0 clamp(0.5rem, 0.75vw, 0.8125rem);
}

.about-team__leadership-title {
  font-size: clamp(1.5rem, 2.31vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--geo-red);
  margin: 0;
}

/*
 * 2-column grid.
 * padding-left aligns left edge to x=447 on canvas.
 * Column gap ≈ 40px (visual gap between Steve name right and Ted "+" left).
 */
.about-team__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 2.31vw, 2.5rem);
  row-gap: clamp(2.5rem, 4.63vw, 5rem);
  padding-left: clamp(1.5rem, 25.88vw, 27.9375rem);
  padding-right: var(--geo-gutter);
  padding-top: clamp(2rem, 4.63vw, 5rem);
  padding-bottom: clamp(1.5rem, 4vw, 4.25rem);
}

/* ── Leader card ─────────────────────────────────── */

.leader-card__frame {
  position: relative;
  isolation: isolate;   /* stacking context: lets z-index: -1 on cross go behind photo */
  width: fit-content;   /* shrinks to photo width */
  overflow: visible;
}

/*
 * Photo: 330 × 280 px at 1728 px = 19.1 vw.
 * Object-fit cover in a fixed aspect-ratio container.
 */
.leader-card__photo {
  display: block;
  width: clamp(200px, 19.1vw, 20.625rem);   /* 330 px */
  height: auto;
  aspect-ratio: 330 / 280;
  object-fit: cover;
}

/*
 * Large red "+" corner mark.
 * Figma: 158 × 158 px, positioned 44px to the left of photo & 12px below photo top.
 * 158 / 1728 = 9.14 vw
 */
.leader-card__cross {
  position: absolute;
  z-index: -1;   /* negative z-index within isolated context → behind normal-flow photo */
  left: calc(-1 * clamp(32px, 2.55vw, 44px));
  top: clamp(5px, 0.7vw, 0.75rem);
  width: clamp(60px, 9.14vw, 9.875rem);
  height: auto;
  pointer-events: none;
}

/*
 * Large red name overlay. Starts at 64% of photo width from left,
 * 52% of photo height from top — overlapping photo's lower-right area.
 * 80 px SemiBold, line-height 70/80 = 0.875.
 */
.leader-card__name {
  position: absolute;
  left: 64%;
  top: 52%;
  font-size: clamp(2rem, 4.63vw, 5rem);
  font-weight: 600;
  line-height: 0.875;
  color: var(--geo-red);
  margin: 0;
  pointer-events: none;
}

/* Title / role text below photo */
.leader-card__role {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.333;
  color: var(--geo-black);
  margin: clamp(0.5rem, 0.93vw, 1rem) 0 0;
  display: flex;
  align-items: center;
  gap: 0.4375rem;   /* 7 px */
  /* align with name overlay (left: 64% of photo width) */
  padding-left: clamp(128px, 12.22vw, 13.2rem);
}

/* LinkedIn icon link after role text */
.leader-card__linkedin {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.18s;
}
.leader-card__linkedin:hover { opacity: 0.75; }
.leader-card__linkedin img   { display: block; }

@media (max-width: 1279.98px) {
  .about-hero__body { max-width: clamp(240px, 26vw, 20.125rem); }
}

/* ── About: responsive ──────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Hero: stack image above text */
  .about-hero {
    min-height: auto;
    overflow: visible;
  }
  .about-hero__img-wrap {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
  }
  .about-hero__img {
    width: 100%;
    height: clamp(220px, 50vw, 420px);
  }
  .about-hero__gradient { display: none; }
  .about-hero__text {
    padding-top: 2rem;
    padding-left: var(--geo-gutter);
  }
  .about-hero__heading {
    max-width: 100%;
    margin-bottom: 1rem;
  }
  .about-hero__rule { position: static; margin: 0 0 1.25rem; }
  .about-hero__body { max-width: 100%; }

  /* Why Geomedia: collapse chart col, hide scatter crosses, reset heading width */
  .about-why__chart-col { display: none; }
  .chart-cross { display: none; }
  .about-why__heading { max-width: 100%; }

  /* Our Team intro: stack columns */
  .about-team__intro-inner {
    flex-direction: column;
    padding-left: var(--geo-gutter);
  }
  .about-team__label-col {
    flex: 0 0 auto;
    width: 100%;
    padding-right: 0;
    margin-bottom: 1.5rem;
  }
  .about-team__body-col { width: 100%; }
  .about-team__body-col p { max-width: 100%; }

  /* Leadership Team: adjust margins */
  .about-team__leadership-header {
    margin-left: var(--geo-gutter);
    margin-right: var(--geo-gutter);
  }
  .about-team__grid {
    grid-template-columns: 1fr;
    padding-left: var(--geo-gutter);
  }
  .leader-card__name {
    font-size: clamp(1.5rem, 8vw, 3rem);
    left: 50%;
    top: 55%;
  }
  .leader-card__cross { left: -1rem; }
  .leader-card__role {
    /* align with name at left: 50% of photo min-width (200px) */
    padding-left: 100px;
  }
}

@media (max-width: 575.98px) {
  .about-hero__heading { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .about-why__heading,
  .about-team__intro-heading,
  .about-team__leadership-title { font-size: 1.5rem; }
  .about-why { padding-left: var(--geo-gutter); padding-right: var(--geo-gutter); }
}

/* ── Contact page ────────────────────────────────────────
 * Figma: 311:304 · Contact frame (1728 × ~1950 px)
 * ──────────────────────────────────────────────────────── */

/* ── Contact hero ──────────────────────────────────────── */
/* Heading 311:342: x=190 y=293 w=789 — SemiBold 80px lh=80px #d9272d */
/* Red rule 311:343: x=632 y=586 w=236 4px #d9272d — inline after "Contact us." */
.contact-hero {
  /* Figma heading x=190px (11.03% of 1728px) — deeper indent than standard gutter */
  padding: clamp(2.5rem, 8.1vw, 8.5rem) var(--geo-gutter) clamp(2.5rem, 10vw, 11rem) clamp(2rem, 11.03vw, 11.875rem);
}

.contact-hero__heading {
  font-size: clamp(2rem, 4.63vw, 5rem);   /* 80 px at 1728 px */
  font-weight: 600;
  line-height: 1;
  color: var(--geo-red);
  margin: 0;
  max-width: clamp(320px, 45.66vw, 52rem);  /* 789 px / 1728 */
}

.contact-hero__last-line {
  display: inline-flex;
  align-items: center;
  column-gap: clamp(0.75rem, 1.68vw, 1.8125rem);  /* ~29 px gap before rule */
  white-space: nowrap;
}

.contact-hero__rule {
  display: inline-block;
  flex-shrink: 0;
  width: clamp(80px, 13.66vw, 14.75rem);   /* 236 px at 1728 px */
  height: 4px;
  background: var(--geo-red);
  position: relative;
  top: 10px;
  transform-origin: left center;
  animation: hero-line-draw 1.1s ease-out 1s both;
}

/* ── Contact section ───────────────────────────────────── */
/* Photo 311:355:   left≈0  w=621  — bleeds to left page edge               */
/* Tagline 311:344: x=704   w=330  — SemiBold Italic 16px                   */
/* Address 311:345: x=1140          — SemiBold 16px; links underlined        */
/* Form:            x=704   w=744  — Name 41px, Email 41px, Message 179px   */
/* CTA 311:347:     x=702           — Bold 16px + arrow                      */
.contact-section {
  padding-right: var(--geo-gutter);
  padding-bottom: clamp(2rem, 6.25vw, 6.75rem);   /* ~108 px at 1728 px — half of original Figma gap to footer */
}

.contact-section__inner {
  display: flex;
  align-items: flex-start;
}

/* Photo column — no left gutter; bleeds to page edge */
.contact-section__photo-col {
  flex: 0 0 clamp(180px, 35.92vw, 38.875rem);  /* 621 px / 1728 */
}

.contact-section__photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Main content column */
.contact-section__main {
  flex: 1;
  min-width: 0;
  padding-left: clamp(1rem, 4.17vw, 4.5rem);    /* 72 px gap / 1728 */
}

/* Info row: tagline left, address right */
.contact-section__info-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 6.13vw, 6.5rem);            /* 106 px gap / 1728 */
  margin-bottom: clamp(2rem, 4.86vw, 5.25rem);    /* ~84 px at 1728 px — gap before form */
}

.contact-section__tagline-col {
  flex: 0 0 clamp(160px, 19.1vw, 20.625rem);     /* 330 px / 1728 */
}

.contact-section__tagline {
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

.contact-section__address-col { flex: 1; min-width: 0; }

.contact-section__address {
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5;
}

.contact-section__address strong { font-weight: 600; }

.contact-section__address a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-section__address a:hover { opacity: 0.6; }

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  max-width: clamp(400px, 43.06vw, 46.5rem);   /* 744 px at 1728 px — Figma form width */
}

.contact-form__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.contact-form__field { position: relative; margin-bottom: 0.625rem; }  /* ~10 px gap — Figma */
.contact-form__field:last-of-type { margin-bottom: 0; }

.contact-form__input,
.contact-form__textarea {
  display: block;
  width: 100%;
  background: #fff;
  border: none;
  font-family: inherit;
  font-size: 0.875rem;      /* 14 px — Figma placeholder text size */
  font-weight: 400;
  color: var(--geo-black);
  padding: 0.75rem;
  box-sizing: border-box;
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: 2px solid var(--geo-red);
  outline-offset: -2px;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: rgba(0, 0, 0, 0.5);   /* Figma: 14px Regular #000 opacity 0.5 */
}

.contact-form__input    { height: 2.5875rem; }    /* 41.4 px — Figma */
.contact-form__textarea { height: 11.25rem; resize: vertical; }  /* 180 px — Figma */

/* Submit button */
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  margin-top: 1rem;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--geo-black);
  cursor: pointer;
  transition: opacity 0.18s;
}
.contact-form__submit:hover { opacity: 0.6; }

.contact-form__arrow { flex-shrink: 0; overflow: visible; }

.contact-form__arrow line {
  transform-origin: 0px 7px;
  transition: transform 0.25s ease;
}
.contact-form__submit:hover .contact-form__arrow line { transform: scaleX(1.5); }

.contact-form__arrow polyline { transition: transform 0.25s ease; }
.contact-form__submit:hover .contact-form__arrow polyline { transform: translateX(10px); }

/* Status messages */
.contact-form__success {
  font-size: 1rem;
  font-weight: 600;
  color: var(--geo-black);
  margin-top: 1.5rem;
}
.contact-form__error {
  font-size: 0.875rem;
  color: var(--geo-red);
  margin: 0 0 1rem;
}

/* ── Contact responsive ────────────────────────────────── */
@media (max-width: 991.98px) {
  .contact-section__inner {
    flex-direction: column;
  }
  .contact-section__photo-col {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .contact-section__main {
    padding-left: var(--geo-gutter);
    padding-right: var(--geo-gutter);
    padding-top: 2.5rem;
  }
  .contact-section {
    padding-right: 0;
  }
  .contact-hero__last-line { white-space: normal; }
}

@media (max-width: 767.98px) {
  .contact-hero__rule    { display: none; }
}

@media (max-width: 575.98px) {
  .contact-hero__heading { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .contact-section__info-row { flex-direction: column; gap: 2rem; }
}

/* ── Scroll-triggered plus sparkle ────────────────────────── */

@keyframes plus-sparkle {
  0%, 100% { opacity: 0.15; transform: scale(0.82); }
  50%       { opacity: 1;    transform: scale(1.12); }
}

.about-scatter.is-sparkling .chart-cross {
  animation: plus-sparkle var(--sparkle-dur, 2s) ease-in-out infinite;
  animation-delay: var(--sparkle-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .about-scatter.is-sparkling .chart-cross {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   Policy pages (Privacy Policy, Terms, Site Map)
   ═══════════════════════════════════════════════════════════ */

.policy-hero {
  padding: clamp(2.5rem, 8.1vw, 8.5rem) var(--geo-gutter) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 11.07vw, 11.9375rem);
}

.policy-hero__heading {
  font-size: clamp(2rem, 4.63vw, 5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--geo-red);
  margin: 0;
}

.policy-hero__rule {
  display: inline-block;
  width: clamp(120px, 17.4vw, 300px);
  height: 4px;
  background: var(--geo-red);
  vertical-align: middle;
  margin-left: 0.75rem;
  transform-origin: left center;
  animation: hero-line-draw 1.1s ease-out 1s both;
}

.policy-body {
  padding-bottom: clamp(3rem, 8vw, 8rem);
}

.policy-body__inner {
  padding-left: clamp(2rem, 11.07vw, 11.9375rem);
  padding-right: var(--geo-gutter);
  max-width: 75%;
}

.policy-body__inner h2 {
  font-size: clamp(1.25rem, 1.85vw, 2rem);
  font-weight: 600;
  color: var(--geo-black);
  margin: 2rem 0 0.75rem;
}

.policy-body__inner p,
.policy-body__inner li {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--geo-black);
  margin: 0 0 0.75rem;
}

.policy-body__inner ul,
.policy-body__inner ol {
  padding-left: 1.5rem;
  margin: 0 0 0.75rem;
}

.policy-body__inner a {
  color: var(--geo-red);
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .policy-hero {
    padding-left: var(--geo-gutter);
    padding-right: var(--geo-gutter);
  }
  .policy-body__inner {
    padding-left: var(--geo-gutter);
    max-width: 100%;
  }
}