@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ================================================================
   styles.css — ArdhiLytics / Prime Geospatial website
   Cleaned 2026-10-09 from styles_9Jul.css (original kept in _archive/).

   1. SITE-WIDE: fonts, Quarto navbar, footer, base type
   2. DESIGN SYSTEM: eg- components (hero, sections, cards, pages)

   Rules of thumb that keep this file healthy:
   - New styles go in section 2, under an eg- class.
   - Avoid !important. Only 7 remain, each overriding Quarto/Bootstrap
     inline layout (navbar padding, footer order, full-bleed pages).
   - @import must stay the very first line, or browsers ignore it.
   ================================================================ */

/* ================================================================
   1. SITE-WIDE
   ================================================================ */

/* ---------- Navbar (Quarto) ---------- */
.navbar{
  background-color: rgba(14, 21, 18, 0.5);   /* semi-transparent dark */
  backdrop-filter: blur(10px);                /* frosted-glass effect */
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 2rem !important;              /* beats Bootstrap's container padding */
  padding-right: 2rem !important;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.3s ease;
}

.navbar .container,
.navbar .container-fluid{
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  justify-content: space-between;
}

.navbar-brand{
  display: flex;
  align-items: center;
  padding: 0;
}

.navbar-brand img{
  height: 64px;
  max-height: 64px;
  max-width: 100%;
  width: auto;
  margin-right: 15px;
  object-fit: contain;
  padding: 0 8px;
}

/* smaller logo on phones so it fits beside the menu button */
@media (max-width: 576px){
  .navbar-brand img{
    height: 40px;
    max-height: 44px;
    padding: 0;
  }
}

.navbar .navbar-nav .nav-link{
  font-family: 'Space Grotesk', sans-serif;
  color: #F8F9FA;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
}

.navbar-nav{
  margin-left: auto !important;               /* pushes links to the right */
}

@media (min-width: 992px){
  .navbar .navbar-nav{ gap: 2.25rem; }        /* breathing room between menu items */
}

.navbar-brand .navbar-title{
  display: none;
}

/* ---------- Base type ---------- */
html{
  scroll-behavior: smooth;
}

body{
  background-color: #F8F9FA;
  color: #2F3640;
  line-height: 1.6;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.2rem;
}

/* Fallback heading style. Sections inside .eg-page set their own
   heading colours, which now win normally (no !important needed). */
h1, h2, h3{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  color: #2A5A5C;
  margin-top: 1.5em;
}

/* ---------- Contact form inputs (contact.qmd) ---------- */
.custom-input{
  border-radius: 8px;
  border: 1px solid #C7C7C7;
  padding: 0.75rem;
  font-size: 1rem;
}

.custom-input:focus{
  border-color: #C68767;
  box-shadow: 0 0 0 0.2rem rgba(198,135,103,0.25);
}

/* ---------- Footer (Quarto page-footer in _quarto.yml) ---------- */
/* round social icons */
footer.footer .nav-footer-right a,
footer.footer .nav-footer-center a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #333333;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 6px;
  font-size: 1.1rem;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

footer.footer .nav-footer-right a:hover{
  background-color: #2A5A5C;
  transform: translateY(-2px);
}

/* stack: icons on top, copyright below */
footer.footer .nav-footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

footer.footer .nav-footer-right{ order: 1 !important; }
footer.footer .nav-footer-left{  order: 2 !important; }

/* ---------- Mobile safety net ---------- */
@media (max-width: 767px){
  body{ overflow-x: hidden; }                 /* no sideways scrolling */
  .column-page{
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
  }
}

/* ================================================================
   2. DESIGN SYSTEM (eg- components)
   Everything below is scoped under the .eg-page wrapper that every
   page opens with. Colour tokens are defined once on .eg-page.
   ================================================================ */

.eg-page{
  --eg-paper: #EEF0E6;
  --eg-paper-deep: #E2E4D4;
  --eg-ink: #1B211D;
  --eg-ink-soft: #4A5049;
  --eg-line: #C7C2A9;
  --eg-canopy: #2E4B32;
  --eg-ochre: #A97A3D;
  --eg-teal: #3D6B78;
  --eg-plum: #7A6584;
  --eg-rust: #A24E3B;
  --eg-slate: #4F6D8A;   /* layer 06 — data services */
  --eg-mint: #7AE38E;

  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--eg-ink);
  background: var(--eg-paper);
}

.eg-page,
.eg-page *{ box-sizing: border-box; }

.eg-page p{ margin-bottom: 1em; }

.eg-page p:last-child{ margin-bottom: 0; }

.eg-page h1,
.eg-page h2,
.eg-page h3{
  font-family:"Space Grotesk", sans-serif;
  font-weight:600;

  margin-top:0;
}

/* Let this page's full-bleed sections escape Quarto's default content
   container width — scoped with :has() so no other page is affected. */

#quarto-content:has(.eg-page),
main.content:has(.eg-page),
#quarto-document-content:has(.eg-page){
  padding:0 !important; margin:0 !important; max-width:none;
}

#quarto-content.page-columns:has(.eg-page){
  display:block; grid-template-columns:none;
}

.eg-wrap{ max-width:1520px; margin:0 auto; padding:0 32px; }

.eg-hero{
  position:relative; overflow:hidden;
  display:flex;
  flex-direction:column;
  /* Default (flex-start/flex-start) reproduces the original left-aligned,
     top-anchored block-flow look used on the services page — unaffected
     unless a positioning modifier class below is added. */
  justify-content: var(--eg-hero-justify, flex-start);
  align-items: var(--eg-hero-align, flex-start);
  padding: clamp(120px, 7vw, 160px) 0 clamp(36px, 5vw, 56px);
  border-bottom:1px solid var(--eg-line);
  background-color: var(--eg-paper-deep); /* fallback if the image fails to load */
  /* Tinted overlay + photo. Both are swappable per-page via CSS variables —
     set --eg-hero-img (and optionally --eg-hero-tint) as an inline style on
     the .eg-hero element to use a different photo per page, without needing
     a separate CSS rule or duplicating this component. */
  background-image:
    linear-gradient(var(--eg-hero-tint, rgba(238,240,230,0.50)), var(--eg-hero-tint, rgba(238,240,230,0.50))),
    var(--eg-hero-img, url("images/web/bannerNew.jpg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 80vh;   /* banner height: at least 80% of the screen */
}

.eg-hero > .eg-wrap{ position:relative; z-index:2; width:100%; }

.eg-hero::before{
  display:none; /* was the repeating-radial-gradient dot texture — replaced by the photo above */
}

.eg-hero::after{
  content:""; position:absolute; left:0; right:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--eg-canopy), transparent);
  opacity:0.5;
  animation: eg-scan 9s linear infinite;
}

@keyframes eg-scan{ 0%{ top:0%; } 100%{ top:100%; } }

@media(prefers-reduced-motion: reduce){
  .eg-hero::after{ animation:none; display:none; }
}

/* Horizontal: pick one */

.eg-hero-left{   --eg-hero-justify: flex-start; text-align:left; }

.eg-hero-center{ --eg-hero-justify: center;     text-align:center; }

.eg-hero-right{  --eg-hero-justify: flex-end;   text-align:right; }

/* Vertical: pick one */

.eg-hero-top{    --eg-hero-align: flex-start; }

.eg-hero-middle{ --eg-hero-align: center; }

.eg-hero-bottom{ --eg-hero-align: flex-end; }

/* ---------- HERO — base heading styles (used on every .eg-hero) ---------- */

.eg-hero h1{
  font-family:"Space Grotesk", sans-serif;
  font-size: clamp(3.0rem, 4.6vw, 3.8rem);
  font-weight: 700;
  max-width:none;
  margin-bottom:22px;
  text-decoration:none;
}

.eg-hero h2{
  font-family:"IBM Plex Sans", sans-serif;
  font-size: clamp(2.0rem, 4.6vw, 2.5rem);
  font-weight: 400;
  max-width:none;
  margin-bottom:22px;
  text-decoration:none;
  border-bottom: none;
  padding-bottom: 0;
}

/* ---------- HERO — dark tint variant (light text, for dark/moody photos) ----------
   NOTE: this block must stay AFTER the base .eg-hero h1/h2 rules above —
   both are equal specificity, so source order decides which color wins. */

.eg-hero-tint-dark{ --eg-hero-tint: transparent; }   /* no tint over the photo */

/* opt-in: put the dark tint back on one page (used on Services, whose photo is very bright) */
.eg-hero-tint-dark.eg-hero-tint-on{ --eg-hero-tint: rgba(14,21,18,0.55); }

/* opt-in: keep a long hero line to about three lines (used on Contact) */
.eg-hero-narrow h2{ max-width:40ch; }

/* sit hero text a little lower in the banner (all pages) */
.eg-hero-middle{ padding-top: clamp(160px, 26vh, 260px); }

/* opt-in: larger hero text (used on Services and Contact) */
.eg-hero-large h2{ font-size: clamp(2.3rem, 3.8vw, 3.2rem); line-height:1.2; }
.eg-hero-large .eg-lede{ font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height:1.55; max-width:68ch; }

/* ---------- HOME HERO — big, colourful statement headline ---------- */
.eg-hero-statement h1{
  font-family:"Space Grotesk", sans-serif;
  font-size: clamp(2.8rem, 5.6vw, 5rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-0.01em;
  margin-bottom:26px;
  max-width:22ch;
}
.eg-hl{ display:block; }
.eg-hl-1{ color:#F3F5EE; }              /* paper white */
.eg-hl-2{ color:var(--eg-ochre-hl); }   /* bright ochre */
.eg-hl-3{ color:var(--eg-canopy-hl); }  /* bright canopy green */
.eg-hero-statement{ --eg-ochre-hl:#F0B24E; --eg-canopy-hl:#6FCF87; }

.eg-hero-statement .eg-lede{
  display:block;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem); line-height:1.6;
  max-width:52ch; color:#F3F5EE; margin-bottom:30px;
}
.eg-hero-statement .eg-btn{
  font-family:"Space Grotesk", sans-serif; font-weight:700; font-size:0.95rem;
  text-transform:uppercase; letter-spacing:0.04em; padding:15px 26px;
}
.eg-hero-statement .eg-btn-solid{ background:var(--eg-canopy-hl); border-color:var(--eg-canopy-hl); color:#0E1512; }
.eg-hero-statement .eg-btn-solid:hover{ background:#F3F5EE; border-color:#F3F5EE; color:#0E1512; }
.eg-hero-statement .eg-btn-outline{ border-width:2px; }

.eg-hero-tint-dark .eg-lede,
.eg-hero-tint-dark p,
.eg-hero-tint-dark .eg-eyebrow{ text-shadow:0 1px 2px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.75), 0 0 24px rgba(0,0,0,0.5); font-weight:500; }

.eg-hero-tint-dark .colored-text{ color:#B4F0C0; }

/* without a tint the hero eyebrow is white and slightly heavier so it reads on any photo */
.eg-hero-tint-dark .eg-eyebrow{ color:#FFFFFF; font-weight:600; font-size:0.85rem; }

.eg-hero-tint-dark .eg-eyebrow::before{ background:#FFFFFF; }

.eg-hero-tint-dark h1{
  color:#F3F5EE;
  text-decoration:none;
  text-shadow:0 2px 3px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.7), 0 0 28px rgba(0,0,0,0.5);
}

.eg-hero-tint-dark h2{
  color:#DCE3D9;
  text-decoration:none;
  text-shadow:0 2px 3px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.7), 0 0 28px rgba(0,0,0,0.5);
}

.eg-hero-tint-dark .eg-lede,
.eg-hero-tint-dark p{ color:#DCE3D9; }

.eg-hero-tint-dark .eg-btn-outline{ color:#F3F5EE; border-color:#F3F5EE; }

.eg-hero-tint-dark .eg-btn-outline:hover{ background:#F3F5EE; color:#0E1512; }

/* ---------- cascading / "staircase" lede paragraph (contact hero) ---------- */

.eg-eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.75rem; letter-spacing:0.12em; color:var(--eg-canopy);
  text-transform:uppercase; display:inline-flex; align-items:center; gap:10px;
  margin-bottom:12px;/* was 18px */
}

.eg-eyebrow::before{ content:""; width:22px; height:1px; background:var(--eg-canopy); display:inline-block; }

.colored-text{
  color: #8FD39D; /* Your chosen accent color */
}

.eg-lede{ max-width:120ch; color:var(--eg-ink-soft); font-size:1.5rem; margin-bottom:34px; }

.eg-hero-ctas{ margin-bottom:10px; }

/*was 56px  */

.eg-btn{
  font-family:"IBM Plex Mono", monospace; font-size:0.82rem;
  padding:13px 22px; text-decoration:none; letter-spacing:0.02em;
  border:1px solid var(--eg-ink); transition:all .2s;
  display:inline-block; margin:0 14px 12px 0; border-radius:0;
}

.eg-btn-solid{ background:var(--eg-ink); color:var(--eg-paper); }

.eg-btn-solid:hover{ background:var(--eg-canopy); border-color:var(--eg-canopy); color:var(--eg-paper); }

.eg-btn-outline{ background:transparent; color:var(--eg-ink); }

.eg-btn-outline:hover{ background:var(--eg-ink); color:var(--eg-paper); }

/* ---------- SECTION HEADERS ---------- */

.eg-section{ padding:20px 0; }

/*was 80*/

.eg-sec-head{ margin-bottom:44px; max-width:100ch; }

/*was 44,60*/

.eg-sec-head h2{
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom:14px;
  border-bottom: none;
  padding-bottom: 0;
}

.eg-sec-head p{ color:var(--eg-ink-soft); }

/* ---------- SERVICES / LAYER PANEL ---------- */

.eg-services{ background:var(--eg-paper-deep); border-bottom:1px solid var(--eg-line); }

.eg-layer-stack{ border-top:1px solid var(--eg-line); }

.eg-layer{
  border-bottom:1px solid var(--eg-line);
  padding:30px 0;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:0 24px;
}

.eg-layer:hover{ background:rgba(255,255,255,0.4); }

.eg-layer-marker > p{ margin:0 0 8px 0; }

.eg-layer-toggle{
  display:inline-block; width:20px; height:20px;
  border:2px solid var(--eg-ink); box-sizing:border-box;
  background-clip:content-box; padding:3px;
}

.eg-layer-toggle.eg-l1{ background-color:var(--eg-canopy); }

.eg-layer-toggle.eg-l2{ background-color:var(--eg-ochre); }

.eg-layer-toggle.eg-l3{ background-color:var(--eg-teal); }

.eg-layer-toggle.eg-l4{ background-color:var(--eg-plum); }

.eg-layer-toggle.eg-l5{ background-color:var(--eg-rust); }

.eg-layer-toggle.eg-l6{ background-color:var(--eg-slate); }

.eg-layer-index{ font-family:"IBM Plex Mono", monospace; font-size:0.7rem; color:var(--eg-ink-soft); }

.eg-layer-body{ display:grid; grid-template-columns:1fr; gap:14px; }

@media(min-width:760px){
  .eg-layer-body{ grid-template-columns: 1.4fr 1fr; }
}

.eg-layer-main h3{ font-size:1.25rem; margin-bottom:8px; }

.eg-layer-one-liner{ font-size:0.95rem; font-weight:500; display:block; margin-bottom:12px; }

.eg-layer-one-liner.eg-l1{ color:var(--eg-canopy); }

.eg-layer-one-liner.eg-l2{ color:var(--eg-ochre); }

.eg-layer-one-liner.eg-l3{ color:var(--eg-teal); }

.eg-layer-one-liner.eg-l4{ color:var(--eg-plum); }

.eg-layer-one-liner.eg-l5{ color:var(--eg-rust); }

.eg-layer-one-liner.eg-l6{ color:var(--eg-slate); }

.eg-layer-desc{ font-size:0.92rem; color:var(--eg-ink-soft); max-width:80ch; }

/*max-width:52ch*/

.eg-layer-meta{
  font-family:"IBM Plex Mono", monospace; font-size:0.75rem; color:var(--eg-ink-soft);
  margin-top:16px; padding-top:16px; border-top:1px dashed var(--eg-line);
}

/* Layer image: the grid row is as tall as the text column, and the
   photo fills exactly that box (cropped, never stretched). On phones,
   where image and text stack, it uses a fixed 16:10 frame instead. */
.eg-layer-image{
  position:relative;
  border:1px solid var(--eg-line);
  overflow:hidden;
  aspect-ratio:16/10;
}

@media(min-width:760px){
  .eg-layer-image{ aspect-ratio:auto; min-height:260px; }
}

/* Phones: one column. Layer number sits in a row above, then the text,
   with the photo at the bottom. */
@media(max-width:759px){
  .eg-layer{ grid-template-columns:1fr; gap:14px 0; }
  .eg-layer-marker{ display:flex; align-items:center; gap:10px; }
  .eg-layer-marker > p{ margin:0; }
}

.eg-layer-image img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

.eg-tag-label{ color:var(--eg-ink); font-weight:500; letter-spacing:0.03em; display:block; margin-bottom:8px; }

.eg-chip{
  display:inline-block; border:1px solid var(--eg-line); padding:4px 9px;
  font-size:0.7rem; background:var(--eg-paper); margin:0 6px 6px 0;
}

.eg-layer-coord{
  padding-top:10px; margin-top:10px; border-top:1px dashed var(--eg-line);
}

.eg-layer-coord a{
  display:block;
  color:var(--eg-canopy);
  background:var(--eg-paper-deep);
  text-decoration:none;
  padding:8px 10px;
  border:1px solid var(--eg-line);
  border-radius:6px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.eg-layer-coord a::after{
  content:" →";
}

.eg-layer-coord a:hover,
.eg-layer-coord a:focus-visible{
  background:#DCE3D9;
  border-color:var(--eg-canopy);
  box-shadow:0 2px 8px rgba(46,75,50,0.18);
  outline:none;
}

/* Add .eg-dark-panel to .eg-layer-stack only. Scoped entirely under
   .eg-dark-panel so the shared .eg-layer / .eg-layer-main h3 /
   .eg-layer-one-liner classes reused on the home page are untouched. */

.eg-dark-panel{
  --eg-layer-bg:
    linear-gradient(rgba(140,196,150,0.025) 1px, transparent 1px) 0 0/14px 14px,
    linear-gradient(90deg, rgba(140,196,150,0.025) 1px, transparent 1px) 0 0/14px 14px,
    linear-gradient(180deg, #0E1512 0%, #121B17 100%);
  --eg-canopy-b:#6FCF87;
  --eg-ochre-b:#E0A75E;
  --eg-teal-b:#6FB8C9;
  --eg-plum-b:#B79BC7;
  --eg-rust-b:#E08668;
  --eg-slate-b:#8FB3D9;

  position:relative;
  margin:6px 0 10px;
}

.eg-layer-stack.eg-dark-panel{ border-top:none; }




.eg-dark-panel .eg-layer{
  position:relative; overflow:hidden;
  background:var(--eg-layer-bg);
  border:1px solid #2B3830; border-radius:10px;
  padding:30px 32px;
  margin-bottom:18px;               /* the gap between layers */
}

.eg-dark-panel .eg-layer:last-child{ margin-bottom:0; }

@media(max-width:759px){
  .eg-dark-panel .eg-layer{ padding:22px 18px; margin-bottom:14px; }
}

.eg-dark-panel .eg-layer:hover{ background:linear-gradient(rgba(255,255,255,0.03),rgba(255,255,255,0.03)), var(--eg-layer-bg); }

.eg-dark-panel .eg-layer::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0; width:4px;
  background:transparent;
  transition:background .25s ease, box-shadow .25s ease;
}

.eg-dark-panel .eg-layer.eg-l1:hover::after{ background:var(--eg-canopy-b); box-shadow:0 0 18px 2px var(--eg-canopy-b); }

.eg-dark-panel .eg-layer.eg-l2:hover::after{ background:var(--eg-ochre-b); box-shadow:0 0 18px 2px var(--eg-ochre-b); }

.eg-dark-panel .eg-layer.eg-l3:hover::after{ background:var(--eg-teal-b); box-shadow:0 0 18px 2px var(--eg-teal-b); }

.eg-dark-panel .eg-layer.eg-l4:hover::after{ background:var(--eg-plum-b); box-shadow:0 0 18px 2px var(--eg-plum-b); }

.eg-dark-panel .eg-layer.eg-l5:hover::after{ background:var(--eg-rust-b); box-shadow:0 0 18px 2px var(--eg-rust-b); }

.eg-dark-panel .eg-layer.eg-l6:hover::after{ background:var(--eg-slate-b); box-shadow:0 0 18px 2px var(--eg-slate-b); }

.eg-dark-panel .eg-layer-marker > p{ color:#B7C2B6; }

.eg-dark-panel .eg-layer-toggle{ border-color:rgba(255,255,255,0.35); }

.eg-dark-panel .eg-layer-index{ color:#7C8A80; }

.eg-dark-panel .eg-layer-main h3{
  font-size:clamp(1.6rem, 2.8vw, 2rem);
  color:#F3F5EE;
  margin-bottom:10px;
}

.eg-dark-panel .eg-layer-one-liner{
  font-size:1.3rem;
  font-weight:500;
  margin-bottom:14px;
}

.eg-dark-panel .eg-layer-one-liner.eg-l1{ color:var(--eg-canopy-b); }

.eg-dark-panel .eg-layer-one-liner.eg-l2{ color:var(--eg-ochre-b); }

.eg-dark-panel .eg-layer-one-liner.eg-l3{ color:var(--eg-teal-b); }

.eg-dark-panel .eg-layer-one-liner.eg-l4{ color:var(--eg-plum-b); }

.eg-dark-panel .eg-layer-one-liner.eg-l5{ color:var(--eg-rust-b); }

.eg-dark-panel .eg-layer-one-liner.eg-l6{ color:var(--eg-slate-b); }

.eg-dark-panel .eg-layer-desc,
.eg-dark-panel .eg-layer-desc li{ color:#B7C2B6; }

.eg-dark-panel .eg-layer-meta{ color:#7C8A80; border-top-color:#2B3830; }

.eg-dark-panel .eg-tag-label{ color:#D3DBD1; }

.eg-dark-panel .eg-chip{ border-color:#2B3830; background:rgba(255,255,255,0.04); color:#B7C2B6; }

.eg-dark-panel .eg-layer-image{ border:none; }

.eg-dark-panel .eg-layer-coord{ border-top-color:#2B3830; }

.eg-dark-panel .eg-layer-coord a{
  background:rgba(255,255,255,0.02);
  border-color:#2B3830;
  border-radius:6px;
}

.eg-dark-panel .eg-layer-coord.eg-l1 a{ color:var(--eg-canopy-b); }

.eg-dark-panel .eg-layer-coord.eg-l1 a:hover,
.eg-dark-panel .eg-layer-coord.eg-l1 a:focus-visible{
  background:rgba(111,207,135,0.08); border-color:var(--eg-canopy-b);
  box-shadow:0 0 16px rgba(111,207,135,0.25); outline:none;
}

.eg-dark-panel .eg-layer-coord.eg-l2 a{ color:var(--eg-ochre-b); }

.eg-dark-panel .eg-layer-coord.eg-l2 a:hover,
.eg-dark-panel .eg-layer-coord.eg-l2 a:focus-visible{
  background:rgba(224,167,94,0.08); border-color:var(--eg-ochre-b);
  box-shadow:0 0 16px rgba(224,167,94,0.25); outline:none;
}

.eg-dark-panel .eg-layer-coord.eg-l3 a{ color:var(--eg-teal-b); }

.eg-dark-panel .eg-layer-coord.eg-l3 a:hover,
.eg-dark-panel .eg-layer-coord.eg-l3 a:focus-visible{
  background:rgba(111,184,201,0.08); border-color:var(--eg-teal-b);
  box-shadow:0 0 16px rgba(111,184,201,0.25); outline:none;
}

.eg-dark-panel .eg-layer-coord.eg-l4 a{ color:var(--eg-plum-b); }

.eg-dark-panel .eg-layer-coord.eg-l4 a:hover,
.eg-dark-panel .eg-layer-coord.eg-l4 a:focus-visible{
  background:rgba(183,155,199,0.08); border-color:var(--eg-plum-b);
  box-shadow:0 0 16px rgba(183,155,199,0.25); outline:none;
}

.eg-dark-panel .eg-layer-coord.eg-l5 a{ color:var(--eg-rust-b); }

.eg-dark-panel .eg-layer-coord.eg-l5 a:hover,
.eg-dark-panel .eg-layer-coord.eg-l5 a:focus-visible{
  background:rgba(224,134,104,0.08); border-color:var(--eg-rust-b);
  box-shadow:0 0 16px rgba(224,134,104,0.25); outline:none;
}

.eg-dark-panel .eg-layer-coord.eg-l6 a{ color:var(--eg-slate-b); }

.eg-dark-panel .eg-layer-coord.eg-l6 a:hover,
.eg-dark-panel .eg-layer-coord.eg-l6 a:focus-visible{
  background:rgba(143,179,217,0.08); border-color:var(--eg-slate-b);
  box-shadow:0 0 16px rgba(143,179,217,0.25); outline:none;
}

/* ---------- ILLUSTRATIVE CASE STUDY PAGE ---------- */

.eg-disclaimer{
  background:#FBF3E3;
  border:1px solid #E4C98A;
  color:#5C4B1F;
  padding:16px 20px;
  margin:26px 0 0;
  font-size:0.92rem;
  max-width:70ch;
}

.eg-sample-figure{
  border:1px solid var(--eg-line);
  background:linear-gradient(135deg,#cfd6c2 0%,#9aa68a 50%,#6f7d61 100%);
  min-height:260px;
  display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono", monospace; font-size:0.85rem; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
  margin-bottom:10px;
  text-align:center;
  padding:20px;
}

.eg-fig-caption{
  font-family:"IBM Plex Mono", monospace; font-size:0.75rem; color:var(--eg-ink-soft);
}

.eg-metrics-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:16px;
}

@media(min-width:600px){
  .eg-metrics-grid{ grid-template-columns:repeat(4,1fr); }
}

.eg-metric{
  border:1px solid var(--eg-line); padding:16px; text-align:center; background:var(--eg-paper-deep);
}

.eg-metric .eg-metric-val{
  font-family:"Space Grotesk", sans-serif; font-size:1.6rem; font-weight:700; color:var(--eg-canopy);
}

.eg-metric .eg-metric-lbl{
  font-family:"IBM Plex Mono", monospace; font-size:0.68rem; color:var(--eg-ink-soft);
  text-transform:uppercase; letter-spacing:0.04em; margin-top:4px;
}

.eg-sample-tag{
  font-family:"IBM Plex Mono", monospace; font-size:0.65rem; color:var(--eg-rust);
  display:block; margin-top:16px;
}

/* ---------- APPROACH ---------- */

.eg-approach-grid{ display:grid; grid-template-columns:1fr; gap:36px; border-top:1px solid var(--eg-line); padding-top:40px; }

@media(min-width:760px){
  .eg-approach-grid{ grid-template-columns:repeat(3,1fr); }
}

.eg-approach-item h3{ font-size:1.1rem; margin-bottom:10px; }

.eg-approach-item p{ color:var(--eg-ink-soft); font-size:0.92rem; }

/* Add the .eg-approach-cards modifier class to .eg-approach-grid to get
   the light gray card + black number badge + colored left-edge accent
   look, without changing the plain .eg-approach-grid used elsewhere. */

.eg-approach-cards{
  --eg-approach-accent: #A24E3B; /* left-edge accent color — swap to any brand color */
  border-top: none;
  padding-top: 0;
  gap: 28px;
}

.eg-approach-cards .eg-approach-item{
  background: var(--eg-paper-deep);
  border-left: 6px solid var(--eg-approach-accent);
  padding: 30px 30px 32px;
}

.eg-approach-cards .eg-approach-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}

.eg-approach-cards .eg-approach-badge{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  background:#111111;
  color:#ffffff;
  font-family:"Space Grotesk", sans-serif;
  font-weight:700;
  font-size:1.1rem;
  border-radius:4px;
}

.eg-approach-cards .eg-approach-head h3{
  margin:0;
  font-size:1.1rem;
  line-height:1.3;
  color: var(--eg-ink);
}

.eg-approach-cards .eg-approach-item p{
  color: var(--eg-ink-soft);
  font-size:0.95rem;
  line-height:1.6;
  margin:0;
}

/* ---------- SECTORS ---------- */

.eg-sectors{ background:var(--eg-paper-deep); border-top:1px solid var(--eg-line); border-bottom:1px solid var(--eg-line); }

.eg-sector-grid{
  display:grid; gap:16px; margin-top:8px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}

.eg-sector-card{
  background:#FFFFFF; border:1px solid var(--eg-line); border-radius:12px;
  border-top:4px solid var(--eg-sc); padding:24px 18px 22px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}

.eg-sector-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(27,33,29,0.12); }

.eg-sector-card p{ margin:0; }

.eg-sector-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--eg-sc); color:#FFFFFF; font-size:1.35rem;
  margin-bottom:14px;
}

.eg-sector-name{
  display:block; font-family:"Space Grotesk", sans-serif; font-weight:600;
  font-size:1rem; line-height:1.3; color:var(--eg-ink);
}

.eg-sc-1{ --eg-sc:var(--eg-canopy); }
.eg-sc-2{ --eg-sc:var(--eg-teal); }
.eg-sc-3{ --eg-sc:var(--eg-slate); }
.eg-sc-4{ --eg-sc:var(--eg-plum); }
.eg-sc-5{ --eg-sc:var(--eg-ochre); }

/* ---------- CONTACT ---------- */

.eg-contact{
  position: relative;
  background-color: #0E1512; /* fallback if the image fails to load */
  background-image:
    linear-gradient(rgba(14,21,18,0.2), rgba(14,21,18,0.2)),
    url("images/web/contactBG.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(56px, 7vw, 90px) 0;
}

.eg-contact-wrap{
  display:grid; grid-template-columns:1fr; gap:30px; align-items:end;
  max-width:1120px; margin:0 auto; padding:0 32px;
}

@media(min-width:760px){
  .eg-contact-wrap{ grid-template-columns:1.3fr 1fr; }
}

.eg-contact-left h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:16ch; color:#F3F5EE; text-decoration:none; }

.eg-contact-left p{ color:#D3DBD1; max-width:46ch; margin-top:16px; }

.eg-contact-box{ border:1px solid rgba(255,255,255,0.35); padding:28px; }

.eg-contact-box > p{ margin:0 0 6px 0; }

.eg-mono-label{ font-family:"IBM Plex Mono", monospace; font-size:0.78rem; color:#B7C2B6; display:block; }

.eg-email{ font-size:1.15rem; font-weight:500; display:block; margin-bottom:22px; word-break:break-all; text-decoration:none; color:var(--eg-ink); }

.eg-email-sub{ font-size:0.95rem; display:block; margin-bottom:22px; }

.eg-contact .eg-email{ color:#F3F5EE; }

.eg-contact .eg-email-sub{ color:#D3DBD1; }

/* ---------- FOOTER ---------- */

.eg-footer{ border-top:1px solid var(--eg-line); padding:26px 0; }

.eg-footer-inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  max-width:1120px; margin:0 auto; padding:0 32px;
  font-family:"IBM Plex Mono", monospace; font-size:0.75rem; color:var(--eg-ink-soft);
}

.eg-footer-inner > p{ margin:0; }

/* ================================================================
   EQUATOR GEOSPATIAL HOME PAGE — additional scoped styles
   ================================================================ */

.eg-intro-lede{ font-size:1.05rem; color:var(--eg-ink-soft); max-width:none; margin-bottom:20px; }

.eg-intro-lede h2{
  color:#F3F5EE;
  font-size:clamp(1.5rem, 3vw, 2.5rem);
  line-height:1.2;
  max-width:none;
  margin-bottom:0;
}

.eg-intro-lede p{
  font-size:1.05rem;
  line-height:1.2;
  max-width:none;
  margin-bottom:0;
}

.eg-teaser-grid{
  display:grid; grid-template-columns:1fr; gap:22px; margin-top:12px;
}

@media(min-width:560px){
  .eg-teaser-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(min-width:900px){
  .eg-teaser-grid{ grid-template-columns:repeat(3,1fr); }
}

/* six cards: 2 x 3 on tablets and up, so the grid is always even */

/* Card itself is dark; the section/page background it sits on is untouched. */

.eg-teaser-card{
  background:#12201A;
  border-radius:6px;
  overflow:hidden;
  padding:0;
  display:flex;
  flex-direction:column;
  box-shadow:0 10px 26px rgba(27,33,29,0.18);
  transition:transform .2s ease, box-shadow .2s ease;
}

.eg-teaser-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px rgba(0,0,0,0.28); }

/* tall, narrow photo at the top of the card */

.eg-teaser-photo{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  overflow:hidden;
}

/* Pandoc wraps a lone image in a <p> with no set height, so height:100% on
   the <img> alone has nothing to resolve against — some photos were only
   filling their natural (short) height, leaving a gap of card-color below
   them. Absolute-position the image against .eg-teaser-photo (which does
   have a real height, from aspect-ratio) so it always fills the frame. */

.eg-teaser-photo p{ margin:0; height:100%; }

.eg-teaser-photo img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

.eg-teaser-photo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:1;
}

/* colored circular icon badge, overlapping the seam between photo and card body */

.eg-teaser-icon{
  position:relative;
  z-index:2;
  width:44px; height:44px;
  margin:-22px auto 0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:3px solid #12201A;
  color:#F3F5EE;
  font-size:1.05rem;
}

.eg-teaser-body{
  padding:20px 20px 28px;
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
}

.eg-teaser-card h3{ color:#F3F5EE; font-size:1.05rem; margin:6px 0 12px; line-height:1.3; text-decoration:none; }

.eg-teaser-desc{ font-size:0.86rem; color:#B7C2B6; margin-bottom:22px; flex:1; }

.eg-teaser-link{
  align-self:center;
  display:inline-block;
  font-family:"IBM Plex Mono", monospace; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase;
  color:#8FD39D; text-decoration:none;
  border:1px solid #8FD39D; border-radius:2px;
  padding:8px 22px;
  transition:all .2s ease;
}

.eg-teaser-link:hover{ background:#8FD39D; color:#12201A; text-decoration:none; }

/* cycle the palette's five accent colors across the icon badge + photo underline */

.eg-teaser-card:nth-child(6n + 1) .eg-teaser-icon,
.eg-teaser-card:nth-child(6n + 1) .eg-teaser-photo::after{ background:var(--eg-canopy); }

.eg-teaser-card:nth-child(6n + 2) .eg-teaser-icon,
.eg-teaser-card:nth-child(6n + 2) .eg-teaser-photo::after{ background:var(--eg-ochre); }

.eg-teaser-card:nth-child(6n + 3) .eg-teaser-icon,
.eg-teaser-card:nth-child(6n + 3) .eg-teaser-photo::after{ background:var(--eg-teal); }

.eg-teaser-card:nth-child(6n + 4) .eg-teaser-icon,
.eg-teaser-card:nth-child(6n + 4) .eg-teaser-photo::after{ background:var(--eg-plum); }

.eg-teaser-card:nth-child(6n + 5) .eg-teaser-icon,
.eg-teaser-card:nth-child(6n + 5) .eg-teaser-photo::after{ background:var(--eg-rust); }

.eg-teaser-card:nth-child(6n + 6) .eg-teaser-icon,
.eg-teaser-card:nth-child(6n + 6) .eg-teaser-photo::after{ background:var(--eg-slate); }

/* ================================================================
   ABOUT PAGE — split photo hero, floating cards, collapsible text
   ================================================================ */

.eg-photo-caption{
  font-family:"IBM Plex Mono", monospace; font-size:0.7rem; color:var(--eg-ink-soft);
  margin-top:10px;
}

/* bridge floating cards ("raw computing" <-> "ground truth") */

.eg-bridge-grid{
  display:grid; grid-template-columns:1fr; gap:20px; align-items:center;
  margin: 22px 0 30px;
}

@media(min-width:700px){
  .eg-bridge-grid{ grid-template-columns: 1fr auto 1fr; gap:16px; }
}

.eg-bridge-card{
  border:1px solid var(--eg-line); background:var(--eg-paper); padding:22px;
  box-shadow:0 10px 24px rgba(27,33,29,0.06);
}

.eg-bridge-card:first-child{ transform:rotate(-1.2deg); }

.eg-bridge-card:last-child{ transform:rotate(1.2deg); }

.eg-bridge-label{
  font-family:"IBM Plex Mono", monospace; font-size:0.7rem; color:var(--eg-canopy);
  text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:8px;
}

.eg-bridge-card h3{ font-size:1.1rem; margin-bottom:8px; }

.eg-bridge-card p{ font-size:0.9rem; color:var(--eg-ink-soft); margin:0; }

.eg-bridge-arrow{
  display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono", monospace; font-size:1.4rem; color:var(--eg-ink-soft);
}

@media(max-width:699px){
  .eg-bridge-arrow{ transform:rotate(90deg); }
}

/* ================================================================
   ABOUT PAGE — impact pathway, core values, team grid
   ================================================================ */

.eg-values-grid{
  display:grid; grid-template-columns:1fr; gap:28px; margin-top:12px;
}

@media(min-width:640px){
  .eg-values-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(min-width:1000px){
  .eg-values-grid{ grid-template-columns:repeat(3,1fr); }
}

.eg-value-item h3{ font-size:1rem; margin-bottom:8px; }

.eg-value-item p{ font-size:0.88rem; color:var(--eg-ink-soft); }

/* ---------- WHO WE ARE — dark split section, static background image ---------- */

.eg-whoweare-dark{
  position: relative;
  background-color: #0E1512; /* fallback if the image fails to load */
  /* Dark gradient sits at 40% opacity (rgba alpha 0.4) so the photo
     underneath reads through at roughly 60% strength. Bump both alpha
     values up together to darken, or down together to lighten. */
  background-image:
    linear-gradient(90deg,
      rgba(14,21,18,0.60) 0%, rgba(14,21,18,0.60) 33%,
      rgba(14,21,18,0.90) 42%, rgba(14,21,18,0.90) 100%),
    url("images/web/nrkWht.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* keeps the image static while the section scrolls past it */
  border-top: 1px solid #2B3830;
  border-bottom: 1px solid #2B3830;
}

/* background-attachment:fixed is unreliable/laggy on iOS Safari & most
   mobile browsers, so fall back to a normal scrolling background there. */

@media (max-width: 767px){
  .eg-whoweare-dark{ background-attachment: scroll; }
}

.eg-who-grid{
  display:grid; grid-template-columns:1fr; gap:32px;
}

/* phones: title and text stack, so darken evenly */
@media(max-width:799px){
  .eg-whoweare-dark{
    background-image:
      linear-gradient(rgba(14,21,18,0.85), rgba(14,21,18,0.85)),
      url("images/web/nrkWht.jpg");
  }
}

@media(min-width:800px){
  .eg-who-grid{ grid-template-columns: 30% 1fr; gap:56px; align-items:center; }
}

.eg-who-title{ position:relative; }

.eg-who-title .eg-eyebrow{ color:#8FD39D; }

.eg-who-title .eg-eyebrow::before{ background:#8FD39D; }

.eg-who-title h2{
  color:#F3F5EE;
  font-size:clamp(2.2rem, 3vw, 2.6rem);
  line-height:1.2;
  max-width:none;
  margin-bottom:0;
  border-bottom: none;
  padding-bottom: 0;
}

.eg-who-desc .eg-intro-lede{ color:#B7C2B6; font-size:1.1rem; max-width:100ch; }

/* max-width:70ch*/

.eg-who-desc .eg-intro-lede h2{ margin-bottom:1rem; }

.eg-who-desc .eg-intro-lede p{ margin-bottom:1.1em; }

.eg-who-desc .eg-intro-lede p:last-child{ margin-bottom:0; }

.eg-who-desc .eg-hero-ctas{ margin-bottom:0; }

.eg-who-desc .eg-hero-ctas .eg-btn-outline{
  color:#F3F5EE; border-color:#5C6B60;
}

.eg-who-desc .eg-hero-ctas .eg-btn-outline:hover{
  background:#F3F5EE; color:#0E1512; border-color:#F3F5EE;
}

/* ---------- SOCIAL-ECOLOGICAL INTEGRATION — light card on dark section ---------- */

.eg-ses-dark{
  position: relative;
  background-color: #0E1512; /* fallback if the image fails to load */
  background-image: url("images/web/nrkGraze.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top:1px solid #2B3830;
  border-bottom:1px solid #2B3830;
  padding: 64px 0;
}

/* the pale card that pops against the background image */

.eg-ses-card{
  background: var(--eg-paper);
  border-radius: 16px;
  padding: 44px 48px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

@media(max-width:640px){
  .eg-ses-card{ padding: 32px 24px; }
}

/* heading block, styled to match the eyebrow/H2 pattern used elsewhere */

.eg-ses-card .eg-sec-head{ margin-bottom: 0; max-width: none; text-align:center; }

.eg-ses-tagline{
  display:block;
  text-align: center; /* This centers the text horizontally */
  font-family:"Space Grotesk", sans-serif;
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--eg-rust);
  margin-top: 10px;
}

/* intro copy: centred lede paragraphs */

.eg-ses-lede{
  max-width:78ch; margin:24px auto 32px; text-align:center;
}

.eg-ses-lede p{ color:var(--eg-ink-soft); font-size:1.05rem; margin-bottom:14px; }

.eg-ses-lede p:last-child{ margin-bottom:0; }

/* full-width diagram — never cropped, on any screen size */

.eg-ses-figure{
  max-width:760px; margin:0 auto 28px;
}

.eg-ses-figure img{ width:100%; height:auto; display:block; }

.eg-ses-dims-intro{
  display:block; text-align:center; color:var(--eg-ink-soft);
  font-family:"IBM Plex Mono", monospace; font-size:0.8rem;
  letter-spacing:0.04em; text-transform:uppercase; margin-bottom:18px;
}

/* three cards, colour-matched to the three bands in the diagram above */

.eg-ses-dims{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:30px; }

@media(min-width:760px){
  .eg-ses-dims{ grid-template-columns:repeat(3,1fr); gap:20px; }
}

.eg-ses-dim{
  background:#FFFFFF; border:1px solid var(--eg-line); border-radius:10px;
  border-top:6px solid var(--eg-ses-band); padding:20px 22px;
}

.eg-ses-dim h3{
  display:flex; align-items:center; gap:10px;
  font-size:1.15rem; color:var(--eg-ink); margin:0 0 8px;
}

.eg-ses-dim h3::before{
  content:""; width:12px; height:12px; border-radius:50%;
  background:var(--eg-ses-band); flex:none;
}

.eg-ses-dim p{ color:var(--eg-ink-soft); font-size:0.95rem; margin:0; }

.eg-ses-eco{    --eg-ses-band:#9BC172; }   /* green band in SES.png */
.eg-ses-people{ --eg-ses-band:#6BABCE; }   /* blue band */
.eg-ses-gov{    --eg-ses-band:#F2C766; }   /* yellow band */

/* CTA button, now sitting below the bullet list */

.eg-ses-cta{ margin-top:8px; text-align:center; }

.eg-ses-cta .eg-btn-solid{
  background: var(--eg-canopy); color:#F3F5EE; border-color: var(--eg-canopy);
}

.eg-ses-cta .eg-btn-solid:hover{
  background:#1B211D; border-color:#1B211D; color:#F3F5EE;
}

/* ---------- COMMUNITY IMPACT & PUBLIC SERVICE SECTION ---------- */

.eg-impact{ background:var(--eg-paper); }

.eg-impact-lede{ max-width:none; color:var(--eg-ink-soft); }

/*max-width:80ch*/

.eg-impact-grid{
  display:grid; grid-template-columns:1fr; gap:22px; margin-top:30px;
}

@media(min-width:700px){
  .eg-impact-grid{ grid-template-columns:repeat(3,1fr); }
}

.eg-impact-card{
  border:1px solid var(--eg-line);
  background:var(--eg-paper-deep);
  padding:26px;
}

.eg-impact-card .eg-num{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem;
  color:var(--eg-canopy);
  text-transform:uppercase;
  letter-spacing:0.08em;
  display:block;
  margin-bottom:10px;
}

.eg-impact-card h3{ font-size:1.1rem; margin-bottom:10px; line-height:1.3; }

.eg-impact-card p{ font-size:0.92rem; color:var(--eg-ink-soft); margin:0; }

/* ---------- FOUNDING HISTORY — split image / narrative ---------- */

.eg-history{ background:var(--eg-paper); }

.eg-history-grid{
  display:grid; grid-template-columns:1fr; gap:40px; align-items:center;
}

/* On mobile, show the title/text before the photo (source order is photo
   first, for the desktop left-photo/right-text layout). Above 800px this
   is reset since the 2-column grid places them side by side either way. */

.eg-history-text{ order:1; }

.eg-history-photo{ order:2; }

@media(min-width:800px){
  .eg-history-grid{ grid-template-columns: 0.9fr 1.1fr; gap:56px; }
  .eg-history-text{ order:initial; }
  .eg-history-photo{ order:initial; }
}

.eg-history-photo{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 20px 46px rgba(27,33,29,0.18);
}

.eg-history-photo img{
  width:100%; height:100%; min-height:360px; object-fit:cover; display:block;
}

.eg-history-photo::after{
  content:""; position:absolute; inset:0;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:18px;
  pointer-events:none;
}

.eg-history-text .eg-eyebrow{ margin-bottom:14px; }

.eg-history-text h2{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:20px; max-width:none; }

.eg-history-text p{ font-size:1.05rem; color:var(--eg-ink-soft); margin-bottom:16px; }

.eg-history-text p:last-child{ margin-bottom:0; }

/* ---------- POSITIONALITY — dark, text-heavy, with interactive map ---------- */

.eg-position{
  background: linear-gradient(180deg, #0E1512 0%, #121B17 100%);
  border-top:1px solid #2B3830;
  border-bottom:1px solid #2B3830;
}

.eg-position-grid{
  display:grid; grid-template-columns:1fr; gap:40px; align-items:start;
}

@media(min-width:800px){
  .eg-position-grid{ grid-template-columns: 1.1fr 0.9fr; gap:56px; }
}

.eg-position-text .eg-eyebrow{ margin-bottom:14px; color:#8FD39D; }

.eg-position-text .eg-eyebrow::before{ background:#8FD39D; }

.eg-position-text h2{ font-size:clamp(1.8rem,3vw,2.3rem); margin-bottom:20px; color:#F3F5EE; text-decoration:none; }

.eg-position-text p{ font-size:1.05rem; color:#D3DBD1; margin-bottom:18px; }

.eg-position-text p:last-child{ margin-bottom:0; }

/* Photo column stretches to the height of the text column; the photo
   fills it (cropped, not stretched). On phones it sits below the text
   in a 4:3 frame. */
.eg-position-grid{ align-items:stretch; }

.eg-position-photo{
  position:relative;
  border:1px solid #2B3830;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:4/3;
}

@media(min-width:800px){
  .eg-position-photo{ aspect-ratio:auto; min-height:320px; }
}

.eg-position-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* ---------- HOW WE WORK — colorful vertical timeline, on a photo background ---------- */

.eg-timeline{
  position: relative;
  background-color: var(--eg-paper-deep); /* fallback if the image fails to load */
  background-image:
    linear-gradient(rgba(238,240,230,0.1), rgba(238,240,230,0.1)),
    url("images/web/habitat.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.eg-timeline-track{
  position:relative;
  max-width:820px; margin:44px auto 0;
  padding-left:48px;
}

.eg-timeline-track::before{
  content:""; position:absolute; left:15px; top:6px; bottom:6px; width:2px;
  background: linear-gradient(180deg, var(--eg-canopy), var(--eg-ochre), var(--eg-teal), var(--eg-plum), var(--eg-rust));
}

.eg-timeline-step{ position:relative; padding-bottom:42px; }

.eg-timeline-step:last-child{ padding-bottom:0; }

.eg-timeline-dot{
  position:absolute; left:-48px; top:2px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:0.85rem;
  box-shadow:0 0 0 6px var(--eg-paper);
}

.eg-timeline-step.eg-tl-1 .eg-timeline-dot{ background:var(--eg-canopy); }

.eg-timeline-step.eg-tl-2 .eg-timeline-dot{ background:var(--eg-ochre); }

.eg-timeline-step.eg-tl-3 .eg-timeline-dot{ background:var(--eg-teal); }

.eg-timeline-step.eg-tl-4 .eg-timeline-dot{ background:var(--eg-plum); }

.eg-timeline-step.eg-tl-5 .eg-timeline-dot{ background:var(--eg-rust); }

.eg-timeline-step h3{ font-size:1.2rem; margin-bottom:8px; }

.eg-timeline-step.eg-tl-1 h3{ color:var(--eg-canopy); }

.eg-timeline-step.eg-tl-2 h3{ color:var(--eg-ochre); }

.eg-timeline-step.eg-tl-3 h3{ color:var(--eg-teal); }

.eg-timeline-step.eg-tl-4 h3{ color:var(--eg-plum); }

.eg-timeline-step.eg-tl-5 h3{ color:var(--eg-rust); }

.eg-timeline-step p{ color:var(--eg-ink-soft); margin:0; font-size:0.97rem; max-width:56ch; }

/* ---------- CORE VALUES — colorful icon-led list ---------- */

.eg-values{ background:var(--eg-paper-deep); border-top:1px solid var(--eg-line); border-bottom:1px solid var(--eg-line); }

.eg-values-list{ display:grid; grid-template-columns:1fr; gap:28px; margin-top:36px; }

@media(min-width:700px){
  .eg-values-list{ grid-template-columns:repeat(2,1fr); }
}

.eg-value-row{ display:flex; gap:18px; align-items:flex-start; }

.eg-value-icon{
  flex:0 0 auto; width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem;
}

.eg-value-row.eg-v-1 .eg-value-icon{ background:var(--eg-canopy); }

.eg-value-row.eg-v-2 .eg-value-icon{ background:var(--eg-ochre); }

.eg-value-row.eg-v-3 .eg-value-icon{ background:var(--eg-teal); }

.eg-value-row.eg-v-4 .eg-value-icon{ background:var(--eg-plum); }

.eg-value-row.eg-v-5 .eg-value-icon{ background:var(--eg-rust); }

.eg-value-copy h3{ font-size:1.12rem; margin-bottom:6px; }

.eg-value-copy p{ color:var(--eg-ink-soft); font-size:0.93rem; margin:0; }

/* ---------- FOUNDERS — dark cards ---------- */

.eg-founders{ background: linear-gradient(180deg, #0E1512 0%, #121B17 100%); }

.eg-founders .eg-sec-head .eg-eyebrow{ color:#8FD39D; }

.eg-founders .eg-sec-head .eg-eyebrow::before{ background:#8FD39D; }

.eg-founders .eg-sec-head h2{ color:#F3F5EE; }

.eg-founder-grid{ display:grid; grid-template-columns:1fr; gap:26px; margin-top:36px; }

@media(min-width:640px){
  .eg-founder-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(min-width:1000px){
  .eg-founder-grid{ grid-template-columns:repeat(3,1fr); }
}

.eg-founder-card{
  background:#16201B; border:1px solid #2B3830; border-radius:14px;
  overflow:hidden; text-align:center; padding-bottom:26px;
  display:flex; flex-direction:column;          /* keeps the links level across cards */
  transition: transform .2s ease, box-shadow .2s ease;
}

.eg-founder-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,0.35); }

.eg-founder-photo{ width:100%; aspect-ratio:4/3; overflow:hidden; background:#1E2A24; }

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

.eg-founder-card h3{ color:#F3F5EE; font-size:1.15rem; margin:20px 0 4px; }

.eg-founder-role{
  color:#8FD39D; font-family:"IBM Plex Mono",monospace; font-size:0.75rem;
  text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:12px;
}

.eg-founder-expertise{ color:#B7C2B6; font-size:0.88rem; padding:0 22px; margin-bottom:18px; display:block; }

.eg-founder-social,
.eg-founder-social p{ display:flex; justify-content:center; align-items:center; gap:32px; margin:0; }

.eg-founder-card > section{ display:flex; flex-direction:column; flex:1; }

.eg-founder-social{ margin-top:auto; }

.eg-founder-social a{ color:#8FD39D; font-size:1.15rem; transition:color .2s; }

.eg-founder-social a:hover{ color:#F3F5EE; }

/* ---------- INVITE — centered slogan/collaboration message ---------- */

.eg-invite{
  background: linear-gradient(180deg, #0E1512 0%, #121B17 100%);
  border-top:1px solid #2B3830;
  border-bottom:1px solid #2B3830;
}

.eg-invite-copy{ max-width:820px; margin:0 auto; text-align:center; }

.eg-invite-copy .eg-eyebrow{ justify-content:center; color:#8FD39D; }

.eg-invite-copy .eg-eyebrow::before{ background:#8FD39D; }

.eg-invite-copy h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:20px; color:#8FD39D; text-decoration:none;
  border-bottom: none;
  padding-bottom: 0;
}

.eg-invite-copy p{ font-size:1.15rem; color:#D3DBD1; line-height:1.6; }

/* ---------- CONTACT FORM ---------- */

.eg-contact-form{
  position: relative;
  background-color: #0E1512;
  background-image:
    linear-gradient(rgba(14,21,18,0.28), rgba(14,21,18,0.28)),   /* lighter tint so the photo shows */
    url("images/web/contactBG.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top:1px solid #2B3830;
  border-bottom:1px solid #2B3830;
}

.eg-contact-form .eg-sec-head .eg-eyebrow{ color:#8FD39D; }

.eg-contact-form .eg-sec-head .eg-eyebrow::before{ background:#8FD39D; }

.eg-contact-form .eg-sec-head h2{ color:#F3F5EE; text-decoration:none; }

.eg-contact-form .eg-sec-head p{ color:#D3DBD1; font-size:1.1rem; max-width:60ch; margin-top:10px; }

.eg-contact-form-grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:start; }

@media(min-width:860px){
  .eg-contact-form-grid{ grid-template-columns: 1.2fr 0.8fr; }
}

.eg-contact-form-info h2{ font-size:clamp(1.6rem,2.6vw,2rem); margin-bottom:22px; max-width:20ch; color:#F3F5EE; text-decoration:none; }

.eg-contact-form-info .eg-mono-label{ margin-top:18px; color:#B7C2B6; }

.eg-contact-form-info .eg-mono-label:first-of-type{ margin-top:0; }

.eg-contact-form-info .eg-email{ color:#F3F5EE; }

.eg-contact-form-info .eg-email-sub{ color:#D3DBD1; }

.eg-contact-form-card{
  background:#ffffff;
  border:1px solid var(--eg-line);
  border-radius:14px;
  padding: clamp(28px, 4vw, 40px);
  box-shadow:0 16px 40px rgba(27,33,29,0.08);
}

.eg-contact-form-card .form-label{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.75rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--eg-ink-soft);
  margin-bottom:6px;
  display:block;
}

.eg-contact-form-card .g-recaptcha{ margin:4px 0 22px; }  /* used when reCAPTCHA is switched back on */

.eg-contact-form-card .custom-input{
  width:100%;
}

.eg-contact-form-card .custom-input:focus{
  border-color:var(--eg-canopy);
  box-shadow:0 0 0 0.2rem rgba(46,75,50,0.15);
  outline:none;
}

.eg-contact-form-card .eg-form-row{ margin-bottom:20px; }

.eg-contact-form-card .eg-form-hint{
  font-size:0.78rem; color:var(--eg-ink-soft); font-weight:400; text-transform:none;
  letter-spacing:0; margin-left:4px;
}

.eg-contact-form-card .eg-btn-solid{
  width:100%;
  text-align:center;
  border:none;
  cursor:pointer;
  font-size:0.85rem;
}

/* ---------- STUDY-AREA MAP + LEGEND ---------- */

.eg-proj-map-section{ background:var(--eg-paper); }

.eg-proj-map-grid{
  display:grid; grid-template-columns:1fr; gap:40px; align-items:start;
}

@media(min-width:900px){
  .eg-proj-map-grid{ grid-template-columns: 1.1fr 0.9fr; gap:50px; }
}

/* On phones (single-column grid) show the text before the map — the
   markup order is map-then-text (needed for the desktop 2-col layout),
   so we flip the visual order back below the 900px breakpoint. */

@media(max-width:899px){
  .eg-proj-map{ order: 2; }
  .eg-proj-map-text{ order: 1; }
}

.eg-proj-map{
  border:1px solid var(--eg-line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(27,33,29,0.10);
}

.eg-proj-map .leaflet-container{ width:100%; height:460px; }

.eg-proj-map-text .eg-eyebrow{ margin-bottom:14px; }

.eg-proj-map-text h2{ font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:16px; }

.eg-proj-map-text p{ color:var(--eg-ink-soft); font-size:1rem; margin-bottom:22px; }

.eg-proj-legend{ display:flex; flex-direction:column; gap:16px; margin-top:6px; }

.eg-proj-legend-item{ display:flex; align-items:flex-start; gap:14px; }

.eg-proj-legend-copy strong{
  display:block; color:var(--eg-ink); font-family:"Space Grotesk",sans-serif;
  font-size:0.95rem; margin-bottom:2px;
}

/* ---------- CASE STUDIES — one unified section, grid fills however many cards exist ---------- */

.eg-proj-cases{
  background: linear-gradient(180deg, #0E1512 0%, #121B17 100%);
}

.eg-proj-cases .eg-sec-head .eg-eyebrow{ color:#8FD39D; }

.eg-proj-cases .eg-sec-head .eg-eyebrow::before{ background:#8FD39D; }

.eg-proj-cases .eg-sec-head h2{ color:#F3F5EE; }

.eg-proj-cases .eg-sec-head p{ color:#B7C2B6; }

/* auto-fit stretches cards to fill the row whether there are 2, 3, or 6 of
   them — no more lopsided rows when a section doesn't have enough cards
   to fill a fixed column count. */

.eg-proj-case-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:26px;
  margin-top:36px;
}

.eg-proj-case-card{
  background:#16201B;
  border:1px solid #2B3830;
  border-radius:14px;
  overflow:hidden;
  text-align:center;
  padding-bottom:26px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.eg-proj-case-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,0.35); }

.eg-proj-case-photo{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#1E2A24; }

.eg-proj-case-photo p{ margin:0; height:100%; }

.eg-proj-case-photo img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

.eg-proj-case-tag{
  display:inline-block;
  margin:18px 22px 0;
  padding:4px 12px;
  border:1px solid #8FD39D;
  border-radius:20px;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#8FD39D;
}

.eg-proj-case-card h3{ color:#F3F5EE; font-size:1.1rem; margin:14px 22px 8px; line-height:1.3; }

.eg-proj-case-desc{ color:#B7C2B6; font-size:0.9rem; padding:0 22px; margin-bottom:20px; display:block; }

.eg-proj-case-cta{ margin-top:4px; }

.eg-proj-case-cta .eg-btn-outline{ color:#8FD39D; border-color:#8FD39D; }

.eg-proj-case-cta .eg-btn-outline:hover{ background:#8FD39D; color:#0E1512; }


/* ---------- LAND-USE PAGE — scenario figure ---------- */
.eg-scenario-figure img{
  width:100%; height:auto; display:block;
  border:1px solid var(--eg-line);
}
.eg-scenario-figure .eg-photo-caption{ display:block; margin-top:14px; }

/* ---------- IMAGE CREDITS PAGE ---------- */
.eg-credits-list ul{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:14px; max-width:900px; }
.eg-credits-list li{
  background:#FFFFFF; border:1px solid var(--eg-line); border-radius:10px; padding:16px 20px;
  font-size:0.95rem; color:var(--eg-ink-soft);
}
.eg-credits-list li strong{ color:var(--eg-ink); display:block; margin-bottom:4px; font-family:"Space Grotesk", sans-serif; }
.eg-credits-list a{ color:var(--eg-teal); word-break:break-word; }
.eg-credits-page{ padding-top:150px; min-height:70vh; }

/* buttons in banners: no text shadow (keeps button labels crisp) */
.eg-hero-tint-dark .eg-btn{ text-shadow:none; }

/* text on the lighter contact-form photo keeps a soft shadow for legibility */
.eg-contact-form .eg-sec-head,
.eg-contact-form-info{ text-shadow:0 1px 3px rgba(0,0,0,0.6), 0 0 14px rgba(0,0,0,0.45); }