/* Bay Group of USA — public marketing site
   Brand system: official green #1B3F1E + lime #A5F859 + Inter.
   Deliberately SINGLE-THEME: a brand site presents one identity to every
   visitor, so this does not follow the viewer's light/dark preference.
   Every color is painted explicitly for that reason. */

:root{
  /* ---- brand green ramp ----
     #1B3F1E is the official Bay Group green and stays the ANCHOR: it is what
     every primary button, link and heading accent uses. The tones around it
     exist so depth can be built from our own green rather than from grey —
     each step has one job, noted below. */
  --green-950:#06180A;   /* deepest — map ocean, hero floor */
  --green-900:#0E2410;   /* nav band */
  --green-850:#112B14;   /* footer — a half-step off the nav, so the two bands read apart */
  --green-800:#14331A;   /* hero mid, map landmass */
  --green-700:#1B3F1E;   /* ◀ OFFICIAL BRAND. Primary buttons, links, headings */
  --green-600:#2C5A30;   /* hover state, eyebrow labels */
  --green-500:#3F7A45;   /* map land highlight */
  --green-400:#5C9C62;   /* dot fills, quiet marks on dark */
  --green-300:#86BE8C;   /* rules and dividers on dark */
  --green-100:#DCEBDD;   /* card borders on tint */
  --green-50:#EFF5EF;    /* third section ground, so bands alternate 3 ways not 2 */
  --lime:#A5F859;        /* accent — used sparingly, one job per page */

  --green:var(--green-700);   /* alias kept so existing rules stay readable */

  /* ---- neutrals, biased slightly green so they read as chosen ---- */
  --ink:#1A1D1A;
  --ink-70:#4A514A;
  --ink-45:#767C76;
  --rule:rgba(26,29,26,.14);
  --paper:#F7F8F6;
  --surface:#FFFFFF;
  --on-dark:rgba(255,255,255,.86);
  --on-dark-dim:rgba(255,255,255,.62);

  /* ---- type scale ---- */
  --step--1:0.875rem;
  --step-0:1.0625rem;
  --step-1:1.25rem;
  --step-2:1.75rem;
  --step-3:clamp(2rem,1.4rem + 2.6vw,3rem);
  --step-4:clamp(2.6rem,1.2rem + 5.6vw,5rem);

  --frame:1200px;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --radius:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px}
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--green-600);outline-offset:3px;border-radius:4px;
}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--frame);margin-inline:auto;padding-inline:var(--pad)}
.band{padding-block:clamp(3.5rem,7vw,6rem)}
.band--paper{background:var(--paper)}
.band--surface{background:var(--surface)}
.band--tint{background:var(--green-50)}
.prose{max-width:62ch}
.stack{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}

/* ---------- type ---------- */
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.022em;font-weight:300;line-height:1.1}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3);line-height:1.14}
h3{font-size:var(--step-1);font-weight:500;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
.label{
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-600);margin:0;
}
.label--onDark{color:var(--lime)}
.lede{font-size:var(--step-1);line-height:1.55;color:var(--ink-70);font-weight:300}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.5rem;border-radius:var(--radius);border:1px solid transparent;
  font-size:var(--step-0);font-weight:500;line-height:1;text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-600)}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{background:#B6FF75}
.btn--ghost{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.32)}
.btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- nav ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;padding-top:1.25rem}
.nav__bar{
  display:flex;align-items:center;gap:1rem;
  background:rgba(14,36,16,.82);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:.5rem .5rem .5rem 1.25rem;
}
.nav__logo{display:flex;align-items:center;flex:0 0 auto}
.nav__logo img{height:26px;width:auto}
.nav__links{display:flex;align-items:center;gap:.15rem;margin-inline:auto;list-style:none;padding:0}
.nav__link{
  display:block;padding:.5rem .9rem;border-radius:999px;
  color:var(--on-dark);text-decoration:none;font-size:var(--step--1);
  transition:background-color .18s ease,color .18s ease;
}
.nav__link:hover{background:rgba(255,255,255,.1);color:#fff}
.nav__link[aria-current="page"]{background:#fff;color:var(--green-900);font-weight:500}
.nav__actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.nav__signin{
  color:var(--on-dark);text-decoration:none;font-size:var(--step--1);padding:.5rem .75rem;
}
.nav__signin:hover{color:#fff}
.nav__cta{
  background:rgba(255,255,255,.92);color:var(--ink);text-decoration:none;
  font-size:var(--step--1);font-weight:500;padding:.55rem 1.1rem;border-radius:999px;
}
.nav__cta:hover{background:#fff}
.nav__toggle{display:none}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 0%,var(--green-800) 0%,rgba(20,51,26,0) 62%),
    linear-gradient(178deg,var(--green-900) 0%,var(--green-950) 100%);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.hero::after{ /* vignette keeps type legible over the route field */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 30%,rgba(6,24,10,0) 0%,rgba(6,24,10,.42) 62%,rgba(6,24,10,.86) 100%),
    linear-gradient(180deg,rgba(6,24,10,.62) 0%,rgba(6,24,10,0) 26%);
}
.hero__inner{
  position:relative;display:flex;flex-direction:column;gap:1.5rem;
  padding-top:clamp(9rem,18vh,13rem);padding-bottom:clamp(5rem,10vh,8rem);
}
.hero--home .hero__inner{align-items:center;text-align:center}
.hero--home .hero__inner .lede{max-width:56ch}
.hero--page .hero__inner{
  align-items:flex-start;
  padding-top:clamp(8rem,15vh,11rem);padding-bottom:clamp(3rem,6vh,4.5rem);
}
.hero h1{color:#fff}
.hero .lede{color:var(--on-dark-dim)}

/* ---------- split section ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr}}
.figure{
  border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,var(--green-900) 0%,var(--green-950) 100%);
  aspect-ratio:3/2;position:relative;isolation:isolate;
}
.figure canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.figure__note{
  position:absolute;left:1rem;bottom:1rem;z-index:1;margin:0;
  color:var(--on-dark-dim);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- stats ---------- */
.stats{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat__n{
  font-size:clamp(2.75rem,1.6rem + 4vw,4.25rem);font-weight:200;line-height:1;
  letter-spacing:-.04em;color:var(--green-700);font-variant-numeric:tabular-nums;
}
.stat:nth-child(even) .stat__n{color:var(--green-500)}
.stat__k{margin-top:.6rem;color:var(--ink-70);font-size:var(--step--1)}

/* ---------- cards ---------- */
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column;gap:.75rem;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.card:hover{border-color:rgba(27,63,30,.4);box-shadow:0 10px 30px -18px rgba(14,36,16,.5);transform:translateY(-2px)}
.card p{color:var(--ink-70);font-size:var(--step--1);line-height:1.65}
.card__rule{width:34px;height:2px;background:var(--lime);border-radius:2px}

/* ---------- contact ---------- */
.contact{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media (min-width:900px){.contact{grid-template-columns:1.5fr 1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field > span{font-size:var(--step--1);font-weight:500;color:var(--ink)}
.req{color:var(--green-600)}
.field input,.field textarea{
  font:inherit;font-size:var(--step-0);color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:6px;
  padding:.7rem .85rem;width:100%;transition:border-color .18s ease,background-color .18s ease;
}
.field input:focus,.field textarea:focus{background:var(--surface);border-color:var(--green-600)}
.field textarea{resize:vertical;min-height:140px}
.fieldgrid{display:grid;gap:1rem}
@media (min-width:620px){.fieldgrid{grid-template-columns:1fr 1fr}}
.form{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.form > .fieldgrid,.form > .field{width:100%}
.rail{
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column;gap:1.4rem;
  align-self:start;
}
.rail dl{margin:0;display:flex;flex-direction:column;gap:1.1rem}
.rail dt{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.rail dd{margin:.3rem 0 0;font-size:var(--step-0);line-height:1.5}
.rail a{color:var(--green);text-decoration:none}
.rail a:hover{text-decoration:underline}

/* ---------- footer ---------- */
.footer{background:var(--green-850);color:var(--on-dark);padding-block:clamp(3rem,6vw,4.5rem)}
.footer a{color:var(--on-dark);text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.footer h4{
  margin:0 0 1rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime);
}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.footer p{color:var(--on-dark-dim);font-size:var(--step--1);line-height:1.65}
.footer__logo{height:34px;width:auto;margin-bottom:1.25rem}
.footer__base{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  color:var(--on-dark-dim);font-size:var(--step--1);
}
.social{flex-direction:row;gap:.75rem}
.social a{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);transition:background-color .18s ease;
}
.social a:hover{background:rgba(255,255,255,.12)}
.social svg{width:16px;height:16px;fill:currentColor}

/* ---------- mobile nav ---------- */
@media (max-width:860px){
  .nav__bar{border-radius:18px;padding:.65rem .75rem;flex-wrap:wrap}
  .nav__toggle{
    display:grid;place-items:center;margin-left:auto;width:38px;height:38px;
    background:transparent;border:1px solid rgba(255,255,255,.24);border-radius:10px;
    color:#fff;cursor:pointer;
  }
  .nav__toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .nav__links,.nav__actions{
    display:none;width:100%;flex-direction:column;align-items:stretch;gap:.25rem;margin:0;
  }
  .nav__bar[data-open="true"] .nav__links,
  .nav__bar[data-open="true"] .nav__actions{display:flex;padding-top:.5rem}
  .nav__bar[data-open="true"] .nav__actions{
    border-top:1px solid rgba(255,255,255,.12);margin-top:.5rem;padding-top:.75rem;
  }
  .nav__link,.nav__signin{text-align:left;border-radius:10px}
  .nav__cta{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .btn:hover,.card:hover{transform:none}
}

.band--tint .card{border-color:var(--green-100)}

/* ---------- world coverage map ---------- */
.band--map{
  background:
    radial-gradient(120% 90% at 50% 0%,var(--green-800) 0%,rgba(20,51,26,0) 60%),
    linear-gradient(180deg,var(--green-900) 0%,var(--green-950) 100%);
  color:#fff;
}
.band--map h2{color:#fff}
.band--map .lede{color:var(--on-dark-dim);max-width:56ch}
.map__head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.map{
  position:relative;width:100%;
  aspect-ratio:2.05 / 1;          /* Equal Earth's own extent ratio */
  min-height:220px;
}
.map canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stats--onDark{margin-top:clamp(2rem,5vw,3.25rem)}
.stats--onDark .stat__n{color:var(--lime)}
.stats--onDark .stat:nth-child(even) .stat__n{color:var(--green-300)}
.stats--onDark .stat:nth-child(3n) .stat__n{color:#fff}
.stats--onDark .stat__k{color:var(--on-dark-dim)}

/* Single-column text blocks. Without a measure a heading would run the full
   1200px frame; .prose already caps paragraphs at 62ch. */
.stack--measure{max-width:68ch}

/* .split and .figure are unused on the site right now — the figure boxes were
   removed 2026-08-29. Kept because re-enabling the operational map (see
   site/README.md) puts a .figure back. */