:root {
  --bg: #03080b;
  --panel: #071015;
  --panel-2: #0a1419;
  --text: #f3f4f4;
  --muted: #bcc2c5;
  --orange: #f57c00;
  --orange-2: #ff9100;
  --line: rgba(255,255,255,.12);
  --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell { width: min(var(--shell), calc(100% - 64px)); margin: 0 auto; }

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: 110px;
  display: flex;
  align-items: center;
  width: min(1260px, calc(100% - 52px));
  margin: 0 auto;
}
/* Horizontal logo lockup assembled from the exact supplied stacked artwork.
   Source: assets/pantera-logo-exact.png (1118x907)
     globe       x 254-839, y   1-625  (586 x 625)
     wordmark    x   1-1115, y 694-906 (1114 x 213)
   Nothing is redrawn - the two regions are cropped from the untouched source
   and placed side by side to match the approved mockup's horizontal lockup.
   Replace with an official horizontal asset when one is supplied. */
.brand,
.footer-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--logo-gap, 14px);
}
.brand { height: 100%; }

.brand-mark,
.brand-word {
  display: block;
  background-image: url('assets/pantera-logo-exact.png');
  background-repeat: no-repeat;
}
.brand-mark {
  --s: calc(var(--mark-h) / 625);
  height: var(--mark-h);
  width: calc(586 * var(--s));
  background-size: calc(1118 * var(--s)) calc(907 * var(--s));
  background-position: calc(-254 * var(--s)) calc(-1 * var(--s));
}
.brand-word {
  --s: calc(var(--word-h) / 213);
  height: var(--word-h);
  width: calc(1114 * var(--s));
  background-size: calc(1118 * var(--s)) calc(907 * var(--s));
  background-position: calc(-1 * var(--s)) calc(-694 * var(--s));
}

.brand { --mark-h: 56px; --word-h: 33px; }
.footer-brand { --mark-h: 42px; --word-h: 25px; --logo-gap: 11px; }
.top-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.top-nav > a:not(.nav-cta) { color: #f0f0f0; opacity: .92; white-space: nowrap; transition: opacity .2s, color .2s; }
.top-nav > a:not(.nav-cta):hover { color: var(--orange-2); opacity: 1; }
.nav-cta,
.outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid var(--orange);
  color: var(--orange-2);
  padding: 12px 18px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .035em;
  transition: background .2s, color .2s, transform .2s;
}
.nav-cta:hover,
.outline-button:hover { background: var(--orange); color: #050607; transform: translateY(-1px); }
.menu-button { display: none; }

/* ── Language toggle ─────────────────────────────────────────────────── */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.lang-btn {
  background: transparent;
  border: none;
  padding: 4px 6px;
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .07em;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: color .18s;
  line-height: 1;
}
.lang-btn:hover { color: var(--orange-2); }
.lang-btn.active { color: var(--orange-2); }
.lang-divider { color: rgba(255,255,255,.2); font-size: 12px; line-height: 1; }

.hero {
  min-height: 600px;
  position: relative;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 70% 23%, rgba(143,153,159,.12), transparent 35%),
    linear-gradient(180deg, #03080b 0%, #020608 100%);
  overflow: hidden;
}
/* Two scrims over the photo, then the photo itself. `cover` keeps the source
   aspect ratio intact - the image is never stretched, only framed.
   - the 180deg scrim darkens the strip behind the header so the nav and the
     "Partner With Us" button stay legible over open sky
   - the 90deg scrim keeps the left side dark so the headline never has to
     compete with the helicopter behind it
   The 75% horizontal framing keeps both the helicopter and the second
   aircraft in shot; centring would crop the aircraft off the right edge. */
.hero-art {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 80%;
  background-image:
    linear-gradient(180deg, rgba(3,8,11,.66) 0, rgba(3,8,11,.28) 78px, rgba(3,8,11,0) 165px),
    linear-gradient(90deg, #03080b 0%, rgba(3,8,11,.98) 26%, rgba(3,8,11,.92) 38%, rgba(3,8,11,.55) 52%, rgba(3,8,11,.16) 72%, rgba(3,8,11,0) 100%),
    url('assets/hero-valley.jpg');
  background-size: auto, auto, cover;
  background-position: center top, center top, 75% center;
  filter: grayscale(1) contrast(1.05) brightness(.82);
}
.hero-inner { position: relative; z-index: 2; padding-top: 152px; }
.hero-copy { display: grid; grid-template-columns: 4px minmax(0, 660px); gap: 36px; align-items: stretch; }
.accent-rail { background: var(--orange); width: 2px; margin: 5px 0 0; }
.hero h1,
.section-heading h2,
.partner-card h3,
.process-step h3,
.focus-item h3,
.mv-card h2,
.cta-band h2 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.hero h1 {
  font-size: clamp(46px, 4.7vw, 64px);
  line-height: 1.04;
  font-weight: 600;
  margin: 0 0 18px;
}
.hero p { color: #d4d7d9; max-width: 485px; font-size: 16px; margin: 0 0 22px; }
.outline-button { padding: 10px 18px; font-size: 16px; }

.section { padding: 34px 0; }
.section-heading { margin-bottom: 26px; }
.section-heading.centered { text-align: center; }
.section-heading.compact { margin-bottom: 14px; }
.section-heading.left { margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: 27px; font-weight: 500; }
.section-heading p { color: var(--muted); margin: 2px 0 0; }
.heading-rule { display: inline-block; width: 42px; height: 2px; background: var(--orange); vertical-align: top; margin-top: 7px; }

.partners {
  background: radial-gradient(circle at 15% 35%, rgba(20,44,55,.17), transparent 24%), #040a0e;
  border-bottom: 1px solid var(--line);
}
.partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.partner-card {
  min-height: 318px;
  padding: 24px 24px 28px;
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(145deg, rgba(13,27,34,.72), rgba(3,9,12,.92));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color .2s, transform .2s, background .2s;
}
.partner-card:hover { transform: translateY(-3px); border-color: rgba(245,124,0,.45); background: linear-gradient(145deg, rgba(14,31,39,.88), rgba(3,9,12,.96)); }
.card-icon {
  width: 74px; height: 74px;
  padding: 18px;
  color: var(--orange-2);
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  margin-bottom: 18px;
}
.partner-card h3 { font-size: 21px; line-height: 1.28; margin: 0; font-weight: 500; }
.mini-rule { width: 31px; height: 2px; background: var(--orange); margin: 17px auto; }
.partner-card p { color: #d0d4d6; font-size: 14px; margin: 0; max-width: 235px; }

.how { background: #03080b; border-bottom: 1px solid var(--line); padding-top: 18px; padding-bottom: 30px; }

/* ── How We Work row ──────────────────────────────────────────────────── */
.process-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
/* Each step takes an equal share; min-width:0 prevents overflow */
.process-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}
.step-number {
  font-family: "Oswald", sans-serif;
  font-size: 36px;
  line-height: 1;
  color: var(--orange-2);
  font-weight: 300;
  flex-shrink: 0;
}
.process-step h3 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 18px;
  margin: 0 0 4px;
  font-weight: 500;
}
.process-step p { color: #c6cbcd; margin: 0; font-size: 13px; line-height: 1.5; }

/* Arrow sits between steps, vertically centred on the number line */
.process-arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 0 14px;
  margin-top: 6px; /* optically align with number cap-height */
  color: var(--orange-2);
  font-size: 22px;
  font-weight: 200;
  line-height: 1;
}

.focus {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #04090c;
}
/* The map is drawn live (see colombia-map.js) rather than loaded as a bitmap,
   so it is resolution-independent and stays sharp on any display. */
.focus-art {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62%;
}
.focus-map { position: absolute; inset: 0; }
.focus-map canvas,
.focus-map-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.focus-map-outline { fill: none; }
.focus-map-outline .map-glow {
  stroke: rgba(255,145,0,.28);
  stroke-width: 5;
  stroke-linejoin: round;
  filter: blur(4px);
}
.focus-map-outline .map-stroke {
  stroke: var(--orange-2);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.focus-map-label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: "Oswald", sans-serif;
  font-size: clamp(17px, 1.7vw, 24px);
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: #f0a14a;
  text-shadow: 0 0 18px rgba(3,8,11,.9), 0 0 6px rgba(3,8,11,.9);
  pointer-events: none;
}
/* Fades the map into the section so it reads as a backdrop, not a panel. */
.focus-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #04090c 0%, rgba(4,9,12,.72) 16%, rgba(4,9,12,.08) 46%, rgba(4,9,12,0) 70%);
  pointer-events: none;
}
.focus-inner { position: relative; z-index: 2; padding: 30px 0 26px; }
.focus-copy { width: 49%; max-width: 560px; }
.focus-list { display: grid; gap: 15px; }
.focus-item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; }
.focus-icon {
  width: 44px; height: 44px;
  padding: 10px;
  color: var(--orange-2);
  border: 1.5px solid var(--orange);
  border-radius: 50%;
}
.focus-item h3 { font-size: 20px; font-weight: 500; margin: 0 0 2px; }
.focus-item p { color: #cbd0d2; font-size: 13px; margin: 0; }

.mission-vision {
  background:
    radial-gradient(circle at 85% 50%, rgba(70,86,95,.11), transparent 26%),
    #04090c;
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; }
.mv-card { display: grid; grid-template-columns: 68px 1fr; gap: 20px; padding: 12px 44px 12px 16px; align-items: start; }
.mv-card + .mv-card { border-left: 1px solid var(--line); padding-left: 54px; }
.mv-icon {
  width: 68px; height: 68px;
  padding: 16px;
  color: var(--orange-2);
  border: 1.5px solid var(--orange);
  border-radius: 50%;
}
.mv-card h2 { font-size: 25px; margin: 0 0 6px; font-weight: 500; }
.mv-card p { margin: 0; color: #cbd0d2; max-width: 440px; font-size: 14px; }

.cta-band {
  position: relative;
  padding: 24px 0 26px;
  text-align: center;
  background:
    linear-gradient(rgba(3,8,11,.82), rgba(3,8,11,.92)),
    url('assets/hero-valley.jpg') center 78% / cover;
  border-bottom: 1px solid var(--line);
}
.cta-band h2 { font-size: 29px; font-weight: 400; margin: 0 0 12px; }
.outline-button.wide { min-width: 240px; }

.site-footer { padding: 16px 0; background: #020608; }
.footer-inner { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 30px; }
.site-footer p { color: #9ba3a7; margin: 0; text-align: center; font-size: 12px; }
.site-footer nav { display: flex; gap: 24px; font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: 12px; letter-spacing: .035em; }
.site-footer nav a { color: #d5d8da; }
.site-footer nav a:hover { color: var(--orange-2); }

@media (max-width: 1120px) {
  .site-header { width: calc(100% - 40px); }
  .top-nav { gap: 18px; font-size: 12px; }
  .nav-cta { padding: 10px 12px; }
  .partner-card h3 { font-size: 17px; letter-spacing: .02em; }
  .partner-card { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 900px) {
  .shell { width: min(100% - 34px, 720px); }
  .site-header { height: 88px; }
  .brand { --mark-h: 44px; --word-h: 26px; --logo-gap: 11px; }
  .menu-button {
    display: flex; margin-left: auto; background: transparent; border: 0; padding: 8px; flex-direction: column; gap: 5px; cursor: pointer;
  }
  .menu-button span { width: 26px; height: 1px; background: #fff; display: block; }
  .top-nav {
    display: none;
    position: absolute;
    top: 76px; right: 0;
    width: min(360px, calc(100vw - 40px));
    padding: 22px;
    background: rgba(3,8,11,.98);
    border: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    font-size: 14px;
  }
  .top-nav.open { display: flex; }
  .hero { min-height: 610px; }
  /* Narrow viewports crop a 16:9 photo hard, so frame on the helicopter and
     drop the photo back to a backdrop the headline can sit on. */
  .hero-art {
    width: 100%;
    opacity: .62;
    background-position: center top, center top, 66% center;
  }
  .hero-inner { padding-top: 135px; }
  .hero-copy { grid-template-columns: 3px minmax(0, 1fr); gap: 24px; }
  .hero h1 { font-size: clamp(52px, 11vw, 72px); }
  .hero p { max-width: 520px; }
  .partner-grid { grid-template-columns: 1fr 1fr; }
  /* Tablet: wrap to 2×2 grid */
  .process-row { flex-wrap: wrap; }
  .process-step { flex: 1 1 calc(50% - 32px); min-width: 220px; }
  /* Hide arrows that would sit between wrapped rows (arrows 2 & 3 become cross-row) */
  .process-arrow { display: none; }
  .focus-art { width: 100%; opacity: .5; }
  .focus-art::after { background: linear-gradient(180deg, rgba(4,9,12,.55), rgba(4,9,12,.75)); }
  .focus-copy { width: 100%; max-width: 620px; }
  .mv-grid { grid-template-columns: 1fr; }
  .mv-card + .mv-card { border-left: 0; border-top: 1px solid var(--line); padding-left: 16px; padding-top: 24px; margin-top: 12px; }
  .footer-inner { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .site-footer nav { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 28px, 520px); }
  .site-header { width: calc(100% - 24px); }
  .brand { --mark-h: 36px; --word-h: 21px; --logo-gap: 9px; }
  .footer-brand { --mark-h: 34px; --word-h: 20px; }
  .hero { min-height: 590px; }
  .hero-inner { padding-top: 125px; }
  .hero-art { opacity: .55; background-position: center top, center top, 66% center; }
  .hero h1 { font-size: 46px; }
  .hero p { font-size: 14px; }
  .partner-grid { grid-template-columns: 1fr; }
  .stat-tiles { grid-template-columns: 1fr; gap: 14px; }
  .stat-tile { padding: 22px 18px; }
  .stat-numeral { font-size: 28px; }
  .stat-explainer { font-size: 14px; }
  .partner-card { min-height: 0; padding: 26px 20px; }
  .section-heading h2 { font-size: 24px; }
  .process-step { grid-template-columns: 54px 1fr; }
  .focus { min-height: 0; }
  .focus-art { opacity: .34; }
  .focus-map-label { letter-spacing: .3em; text-indent: .3em; }
  .focus-copy { width: 100%; }
  .focus-item { grid-template-columns: 36px 1fr; gap: 13px; }
  .focus-icon { width: 36px; height: 36px; padding: 8px; }
  .focus-item h3 { font-size: 18px; }
  .mv-card { grid-template-columns: 48px 1fr; gap: 14px; padding-left: 0; padding-right: 0; }
  .mv-card + .mv-card { padding-left: 0; }
  .mv-icon { width: 48px; height: 48px; padding: 11px; }
  .cta-band h2 { font-size: 24px; }
  .outline-button.wide { min-width: 0; width: 100%; }
}