/* ============================================================
 * FOUNDATION — reusable across OnSite + future GroupEd site
 * Sky-blue primary action. Navy dominant. Violet rare pop.
 * Brand-correct off-white canvas.
 * ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* SCROLLING — 13 Aug 2026.
   `scroll-behavior: smooth` used to be declared here. It is REMOVED, not moved:
   GSAP's ScrollTrigger is documented as incompatible with it, and this site pins
   and scrubs several sections. The symptom was an in-page link (the final CTA's
   "Ask a question" -> #contact) changing the URL but not moving the page, because
   a ScrollTrigger refresh landing mid-animation cancels the native smooth scroll.
   Intermittent, so easy to dismiss as a fluke. If smooth anchor scrolling is
   wanted back, do it in JS (GSAP's ScrollToPlugin) so the two cannot race.

   scroll-padding-top keeps anchor targets clear of the sticky nav (82px tall) —
   without it, #main / #contact land with their top 82px hidden behind it.
   styles/policy-page.css already did this; the rest of the site did not. */
html { scroll-padding-top: 100px; }
body {
  margin: 0;
  background: var(--ge-white); /* WHITE canvas — bands carry their own bg */
}
img, svg { display: block; max-width: 100%; height: auto; }

/* ============================================================
 * TOUCH BEHAVIOUR  (7 Aug 2026 — Web Interface Guidelines review)
 * Three one-liners that only show up on a real phone, which is why they were
 * missed: everything here was checked in a desktop browser at a phone width,
 * where none of them apply.
 * ============================================================ */

/* ⚠ REMOVES THE ~300ms TAP DELAY. Mobile browsers wait after a tap to see if a
   second one is coming (double-tap-to-zoom). `manipulation` says this element is
   not a zoom target, so the tap fires immediately. It is the single biggest
   reason a site feels sluggish on a phone while being fast on a desktop.
   ⚠ Deliberately NOT on `html` or `body` — that would disable double-tap zoom
   for the whole page, which is an accessibility feature. Scoped to the things
   you actually tap. */
a, button, [role="button"], [role="tab"], summary,
input[type="submit"], input[type="button"], label { touch-action: manipulation; }

/* Android paints a translucent grey box over anything tappable. Every control on
   this site already has its own hover/active state, so the default just muddies
   the brand colours for 200ms. Turned off explicitly rather than left to chance —
   the guideline is to SET it, not to leave it at the browser default. */
a, button, [role="button"], [role="tab"], summary { -webkit-tap-highlight-color: transparent; }

button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: var(--ge-blue, #1B367E); }
a:hover { color: var(--ge-navy, #0F1438); }

/* Opacity tokens — used throughout for on-dark surfaces */
:root {
  --white-95: rgba(255,255,255,0.95);
  --white-85: rgba(255,255,255,0.85);
  /* ⚠ 0.86, NOT 0.70 — 6 Aug 2026, accessibility audit (SC 1.4.3).
     At 0.70 this failed AA everywhere it was used on a mid-tone brand colour:
     measured 4.06:1 on OnSite's violet #614DBA, against the 4.5:1 body-text
     minimum, on five elements of the partners page alone. It is a shared token
     used by six rules across four stylesheets, so the fix belongs here rather
     than at each call site.
     0.86 gives 5.22:1 on that violet and more on anything darker — the worst
     case on the site's palette, checked. It still reads as secondary text; the
     jump is far less visible than the failure was.
     The token name is kept so nothing has to be renamed; if that bothers a
     future reader, rename it everywhere at once or not at all. */
  --white-70: rgba(255,255,255,0.86);
  --white-55: rgba(255,255,255,0.55);
  --white-35: rgba(255,255,255,0.35);
  --white-18: rgba(255,255,255,0.18);
  --white-10: rgba(255,255,255,0.10);
  --navy-shadow-sm: rgba(15,20,56,0.06);
  --navy-shadow-md: rgba(15,20,56,0.12);
}

/* ---------- LAYOUT PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 var(--sp-5);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--sp-8); }
}

.section {
  padding: var(--sp-16) 0;
}
@media (min-width: 768px) {
  .section { padding: var(--sp-24) 0; }
}

/* ---------- EYEBROW PILL — sized to its text ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start; /* Don't stretch when inside a flex-column parent */
  gap: 6px;
  padding: 4px 10px;
  background: var(--ge-navy);
  color: var(--ge-white);
  font-size: 10px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  line-height: 1.5;
}
.eyebrow--sky    { background: var(--ge-sky);      color: var(--ge-white); }
.eyebrow--violet { background: var(--ge-violet-4); color: var(--ge-white); }
.eyebrow--red    { background: var(--ge-red-3);    color: var(--ge-white); }
.eyebrow--ghost  {
  background: transparent;
  color: var(--ge-navy);
  border: 1px solid var(--ge-neutral-lt4);
  padding: 3px 10px;
}
.eyebrow--on-dark { background: var(--ge-white);    color: var(--ge-navy); }

/* ---------- CARDS — primary building block ---------- */
.card {
  background: var(--ge-white);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .card { padding: var(--sp-10); }
}
.card--dark   { background: var(--ge-navy);     color: var(--ge-white); }
.card--violet { background: var(--ge-violet-4); color: var(--ge-white); }
.card--sky    { background: var(--ge-sky);      color: var(--ge-white); }
.card--muted  { background: var(--ge-bg-light); }
.card--blue3  { background: var(--ge-blue-3);   color: var(--ge-navy); } /* very light sky tint */
.card--snug   { padding: var(--sp-6); }
@media (min-width: 768px) {
  .card--snug { padding: var(--sp-7); }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 12px 14px 12px 22px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* Primary = sky blue per brand */
/* ⚠ NAVY LABEL, NOT WHITE (5 Aug 2026, found in the site-wide sweep).
   White on --ge-sky #2FB7F1 measures 2.29:1 — below AA for body text (4.5) and
   below it even for large text (3). This is the PRIMARY button, so the least
   readable thing on the page was the thing you are meant to click. Navy on the
   same sky is 7.78:1 and the button stays just as bright.
   Reaches Founders Club, OnSite, Contact, Carbon Reduction Plan, the two
   campaign pages and the partner pages. The :hover state below goes to --ge-blue
   with white, which measures 8.6:1, so that one was always fine. */
.btn--primary { background: var(--ge-sky);  color: var(--ge-navy, #0F1438); }
.btn--primary:hover { background: var(--ge-blue); color: var(--ge-white); }
/* Dark primary — for use on light cards where we want navy weight */
.btn--dark { background: var(--ge-navy); color: var(--ge-white); }
.btn--dark:hover { background: var(--ge-blue); }
/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--ge-navy);
  border-color: var(--ge-neutral-lt4);
  padding: 12px 22px;
}
.btn--ghost:hover { border-color: var(--ge-navy); background: var(--ge-white); }
.btn--on-dark.btn--ghost {
  color: var(--ge-white);
  border-color: var(--white-35);
}
.btn--on-dark.btn--ghost:hover {
  border-color: var(--ge-white);
  background: var(--white-10);
}
.btn--large {
  padding: 14px 14px 14px 28px;
  font-size: var(--fs-body);
}
.btn--large.btn--ghost { padding: 14px 28px; }

.btn .btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ge-navy);
  color: var(--ge-white);
  transition: transform var(--dur-base) var(--ease-standard);
}
.btn--dark .btn__arrow { background: var(--ge-sky); }
.btn--primary:hover .btn__arrow,
.btn--dark:hover .btn__arrow { background: var(--ge-white); color: var(--ge-blue); }
.btn .btn__arrow svg { width: 12px; height: 12px; }
.btn:hover .btn__arrow { transform: translateX(2px); }

/* ---------- FORM FIELDS: keep autofill neutral grey (no browser pink/yellow) ---------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #F2F3F5 inset;
  box-shadow: 0 0 0 1000px #F2F3F5 inset;
  -webkit-text-fill-color: var(--ge-navy, #0F1438);
  caret-color: var(--ge-navy, #0F1438);
  transition: background-color 5000s ease-in-out 0s;
}

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition: background var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 0 var(--navy-shadow-sm);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-6);
  height: 84px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
/* Push nav links + CTA over to the right next to the brand. */
.nav__inner > nav[aria-label="Primary"] { margin-left: auto; }
@media (min-width: 768px) {
  .nav__inner { padding: 0 var(--sp-8); height: 92px; }
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}
.nav__brand img {
  height: 56px;
  width: auto;
}
@media (min-width: 768px) {
  .nav__brand img { height: 72px; }
}
.nav__brand-by {
  font-size: 13px;
  font-weight: var(--fw-light);
  color: var(--fg2);
  letter-spacing: 0.01em;
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--sp-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) {
  .nav__links { display: flex; }
}
.nav__link {
  color: var(--ge-navy);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  position: relative;
  padding: 6px 0;
  transition: color var(--dur-base) var(--ease-standard);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ge-sky);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-standard);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link:hover { color: var(--ge-blue); }

.nav__cta { display: none; }
@media (min-width: 1024px) { .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--ge-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ge-navy);
}
@media (min-width: 1024px) { .nav__toggle { display: none; } }
.nav__toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.nav__overlay {
  position: fixed;
  inset: 84px 0 0 0;
  background: var(--ge-white);
  z-index: 99;
  padding: var(--sp-8) var(--sp-5);
  display: none;
  flex-direction: column;
  gap: var(--sp-2);
  overflow-y: auto;
}
.nav__overlay.is-open { display: flex; }
.nav__overlay .nav__link {
  font-size: var(--fs-h3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}
.nav__overlay .btn { margin-top: var(--sp-6); align-self: flex-start; }
@media (min-width: 1024px) { .nav__overlay { display: none !important; } }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--ge-navy);
  color: var(--fg-on-dark);
  /* No top margin or radius — footer hard-cuts onto the final-cta navy band. */
  padding: var(--sp-16) 0 var(--sp-6);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
/* Stacked logos in footer — OnSite on top, GroupEd underneath.
 * Explicit align-items: flex-start so logos + divider + tagline all left-align. */
.footer__brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.footer__brand-onsite {
  height: 56px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .footer__brand-onsite { height: 72px; }
}
.footer__brand-grouped { height: 36px; width: auto; display: block; }
.footer__brand-divider {
  width: 32px;
  height: 1px;
  background: var(--white-18);
  border: 0;
  margin: 0;
}
.footer__tagline {
  color: var(--white-70);
  font-weight: var(--fw-light);
  max-width: 320px;
  margin: 0;
  line-height: 1.55;
}
.footer__col-title {
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--white-55);
  margin: 0 0 var(--sp-4);
  font-weight: var(--fw-regular);
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer__list a,
.footer__list span {
  color: var(--white-85);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  transition: color var(--dur-base) var(--ease-standard);
}
.footer__list a:hover { color: var(--ge-sky); }

.footer__divider {
  border: 0;
  border-top: 1px solid var(--white-10);
  margin: var(--sp-10) 0 var(--sp-5);
}
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--white-55);
}
@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.footer__bottom a { color: var(--white-70); }
.footer__bottom a:hover { color: var(--ge-sky); }
.footer__legal {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
}

/* ---------- UTILITIES ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 1000;
  background: var(--ge-navy);
  color: var(--ge-white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
}
.skip-link:focus {
  top: var(--sp-4);
  outline: 2px solid var(--ge-sky);
  outline-offset: 2px;
}

/* Highlighter — wraps a phrase in a heading.
 * Sky for normal use, violet for the single "we're different" moment. */
.hl {
  display: inline-block;
  background: var(--ge-blue-3);
  color: var(--ge-blue);
  padding: 0 12px;
  border-radius: var(--radius-md);
  line-height: 1.1;
}
.hl--violet { background: var(--ge-violet-2); color: var(--ge-violet-4); }
.hl--sky-solid { background: var(--ge-sky); color: var(--ge-white); }
.hl--white { background: var(--ge-white); color: var(--ge-navy); }

/* Any heading/title that wraps a highlight pill needs extra line-height: the
 * inline-block pill (line-height 1.18 + ~0.30em vertical padding ≈ 1.48em) is
 * taller than the text line, so on a wrapped heading it overlaps the line
 * above. `> .hl` scopes this to the pill's own parent (never ancestor
 * sections); `:not(:root)` lifts specificity (0,2,0) above the per-section
 * heading line-heights so it applies across every page. */
:has(> .hl):not(:root) {
  line-height: 1.55;
}