/* ============================================================
   GCS — Design System v4
   Brand: White/Light, GCS Green accent, Navy typography
   ============================================================ */

/* ---- CSS Custom Properties ---- */
:root {
  /* BRAND COLORS — canonical GCS brand standard v1.1 */
  --gcs-navy:        #00122B;
  --gcs-blue:        #335475;
  --gcs-green:       #68981C;
  --gcs-green-dk:    #4d720f;
  --gcs-green-lt:    #8ab83a;
  --gcs-slate:       #646465;

  /* SURFACE COLORS — light/white first */
  --surface-white:   #ffffff;
  --surface-light:   #f8f9fb;
  --surface-muted:   #f1f3f6;
  --surface-border:  #e4e7ec;
  --surface-border-lt: #f0f2f5;

  /* TYPOGRAPHY */
  --text-primary:    #00122B;   /* navy */
  --text-secondary:  #374151;
  --text-muted:      #6b7280;
  --text-subtle:     #9ca3af;
  --text-on-dark:    #f5f5f5;

  /* SEMANTIC */
  --color-primary:   #68981C;   /* GCS green — primary action */
  --color-primary-dk:#4d720f;
  --color-primary-lt:#8ab83a;
  --color-secondary: #00122B;   /* navy — supporting */
  --color-accent:    #68981C;
  --color-accent-light: #8ab83a;

  /* Legacy compat */
  --color-brand-navy:    #00122B;
  --color-brand-green:   #68981C;
  --color-brand-green-dk:#4d720f;
  --color-brand-slate:   #646465;
  --color-ink:           #00122B;
  --color-ink-60:        #374151;
  --color-ink-80:        #00122B;
  --color-text:          #00122B;
  --color-text-muted:    #6b7280;
  --color-text-subtle:   #9ca3af;
  --color-surface:       #ffffff;
  --color-surface-alt:   #f8f9fb;
  --color-surface-card:  #ffffff;
  --color-border:        #e4e7ec;
  --color-border-light:  #f0f2f5;
  --color-gold:          #68981C;
  --color-gold-light:    #8ab83a;
  --color-dark-bg:       #00122B;
  --color-dark-surface:  #0a2040;
  --color-dark-border:   rgba(255,255,255,0.12);
  --color-dark-text:     #f5f5f5;
  --color-dark-muted:    #9ca3af;
  --text-strong:         #00122B;
  --text-body:           #374151;
  --border-soft:         #e4e7ec;
  --brand-slate:         #646465;

  /* TYPOGRAPHY */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Sora', 'Inter', system-ui, sans-serif;

  /* SIZING */
  --container-max: 1280px;
  --container-pad: 1.5rem;
  --section-pad-y: 5rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;

  /* SHADOWS */
  --shadow-sm:  0 1px 3px rgba(15,31,61,0.06), 0 1px 2px rgba(15,31,61,0.04);
  --shadow-md:  0 4px 16px rgba(15,31,61,0.08), 0 2px 6px rgba(15,31,61,0.05);
  --shadow-lg:  0 10px 40px rgba(15,31,61,0.10), 0 4px 12px rgba(15,31,61,0.06);
  --shadow-xl:  0 20px 60px rgba(15,31,61,0.14);

  /* TRANSITIONS */
  --transition-fast: 150ms ease;
  --transition-mid:  250ms ease;
  --transition-slow: 400ms ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  background-color: var(--surface-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* optimizeLegibility enables consistent sub-pixel antialiasing for every glyph,
     including the first character of each block — critical for Sora→Inter transitions */
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--gcs-green); outline-offset: 3px; border-radius: 2px; }
/* Ensure paragraphs always inherit body font to prevent first-letter FOUT overlap */
p { font-family: var(--font-body); }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }

/* ---- Skip Link ---- */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  padding: 0.75rem 1.25rem; background: var(--gcs-navy); color: #fff;
  font-weight: 600; border-radius: var(--radius-md); z-index: 10000;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 1rem; }

/* ---- Container ---- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ============================================================
   NAVIGATION — White header, enterprise clean
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--surface-white);
  border-bottom: 1px solid var(--surface-border);
  box-shadow: 0 1px 8px rgba(15,31,61,0.06);
  transition: box-shadow var(--transition-mid);
}
.site-header.scrolled {
  box-shadow: 0 2px 16px rgba(15,31,61,0.10);
}
.nav {
  display: flex; align-items: center;
  justify-content: space-between;
  height: 4.5rem; gap: 1.5rem;
}
.nav__logo {
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
}
/* Logo: proper height, vertically centered, never overflows header */
.nav__logo-img {
  display: block;
  height: 56px;
  width: auto;
  max-width: 200px;
  flex-shrink: 0;
}
.nav__logo-img--sm { height: 44px; max-width: 160px; }
.nav__logo-plate { display: flex; align-items: center; }

.nav__links {
  display: flex; align-items: center; gap: 0;
}
.nav__link {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.nav__link:hover,
.nav__link.active,
.nav__link[aria-current="page"] {
  color: var(--gcs-green-dk);
  background: rgba(122,170,53,0.08);
}
.nav__link--sandbox {
  color: var(--gcs-green-dk);
  font-weight: 600;
  background: rgba(122,170,53,0.10);
  border: 1px solid rgba(122,170,53,0.25);
  margin-left: 0.25rem;
}
.nav__link--sandbox:hover {
  background: rgba(122,170,53,0.18);
  border-color: rgba(122,170,53,0.5);
}
.nav__link--cta {
  background: var(--gcs-green);
  color: #fff !important;
  border: none;
  font-weight: 600;
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
}
.nav__link--cta:hover {
  background: var(--gcs-green-dk);
}
/* Hamburger */
.nav__toggle {
  display: none; flex-direction: column; gap: 5px;
  padding: 0.5rem; border-radius: var(--radius-sm);
  transition: background var(--transition-fast); flex-shrink: 0;
}
.nav__toggle:hover { background: var(--surface-muted); }
.hamburger {
  display: block; width: 22px; height: 2px;
  background: var(--gcs-navy); border-radius: 2px;
  transition: transform var(--transition-mid), opacity var(--transition-mid);
}
.nav__toggle[aria-expanded="true"] .hamburger:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .hamburger:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .hamburger:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block: var(--section-pad-y); }

.section--light { background: var(--surface-white); }
.section--muted { background: var(--surface-light); }
.section--soft  { background: var(--surface-muted); }
.section--navy  {
  background: var(--gcs-navy);
  color: var(--text-on-dark);
}
/* Keep section--dark for minimal use as navy */
.section--dark {
  background: var(--gcs-navy);
  color: var(--text-on-dark);
}
.section--soft {
  background: var(--surface-muted);
}

/* ============================================================
   HERO — Tagline lines
   ============================================================ */
.hero__taglines {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0 1.5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 700; color: var(--gcs-navy);
  margin-bottom: 1.25rem;
}
.hero__taglines span {
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.hero__taglines span + span::before {
  content: '·'; color: var(--gcs-green); font-size: 1.2em;
}

/* ============================================================
   VALUE PROPS (Homepage)
   ============================================================ */
.value-props-grid {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;
}
.value-prop-item {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.45rem 1rem;
  background: var(--surface-white);
  border: 1px solid var(--surface-border);
  border-radius: 100px; font-size: 0.875rem; font-weight: 500;
  color: var(--text-primary); box-shadow: var(--shadow-sm);
}
.value-prop-icon { color: var(--gcs-green-dk); font-weight: 700; }

/* ============================================================
   NEXUS CONNECTIVITY GRAPHIC — Homepage
   ============================================================ */
.nexus-connect-section { }
.nexus-radial-wrapper {
  position: relative;
  width: 100%; max-width: 820px;
  margin: 0 auto 2rem;
  min-height: 600px;
}
.nexus-radial {
  position: relative;
  width: 100%;
  min-height: 600px;
}
/* SVG lines layer */
.nexus-radial__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
/* Center hub */
.nexus-hub-el {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  background: var(--gcs-navy);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 1.25rem 2rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(15,31,61,0.22);
  min-width: 130px;
  pointer-events: none;
}
.nexus-hub-el__gcs {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gcs-green-lt); margin-bottom: 0.125rem;
}
.nexus-hub-el__name {
  font-family: var(--font-heading); font-size: 1.375rem; font-weight: 800;
  color: #fff; letter-spacing: 0.02em;
}
.nexus-hub-el__sub {
  font-size: 0.6rem; color: rgba(255,255,255,0.6); letter-spacing: 0.08em;
  text-transform: uppercase; margin-top: 0.25rem;
}
/* Department node buttons */
.nexus-node-btn {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem; font-weight: 600;
  background: var(--surface-white);
  border: 1px solid var(--surface-border);
  border-radius: 100px;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  line-height: 1.4;
}
.nexus-node-btn:hover,
.nexus-node-btn.active {
  background: var(--gcs-navy);
  color: #fff;
  border-color: var(--gcs-navy);
  box-shadow: 0 4px 14px rgba(15,31,61,0.18);
}
.nexus-node-btn[data-group="leadership"] { border-color: var(--gcs-navy); }
.nexus-node-btn[data-group="finance"]    { border-color: var(--gcs-blue); }
.nexus-node-btn[data-group="people"]     { border-color: #3a6b8e; }
.nexus-node-btn[data-group="compliance"] { border-color: var(--gcs-green-dk); }
.nexus-node-btn[data-group="operations"] { border-color: var(--gcs-green); }
.nexus-node-btn[data-group="supply"]     { border-color: #4d720f; }
.nexus-node-btn[data-group="technical"]  { border-color: #4a7a3a; }
.nexus-node-btn[data-group="intelligence"] { border-color: #3a6a2e; }
.nexus-node-btn[data-group="projects"]   { border-color: var(--gcs-blue); }
/* Highlighted SVG lines */
.nexus-radial__svg line.highlight {
  stroke: var(--gcs-green) !important;
  stroke-opacity: 1 !important;
  stroke-width: 2 !important;
}

/* Fallback chip grid (shown when radial is too small) */
.nexus-dept-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  max-width: 860px; margin: 0 auto 2rem;
  display: none; /* hidden by default — shown if JS disabled or on small screens */
}
noscript .nexus-dept-grid { display: flex; }

/* Outcome row */
.nexus-outcome-row {
  text-align: center; margin-top: 2rem;
}
.nexus-outcome-center {
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.nexus-outcome-hub {
  display: inline-block;
  background: var(--gcs-navy); color: #fff;
  border-radius: var(--radius-xl); padding: 1rem 2.5rem;
  box-shadow: var(--shadow-lg);
}
.nexus-outcome-hub__gcs {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gcs-green-lt); margin-bottom: 0.125rem;
}
.nexus-outcome-hub__name {
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: #fff;
}
.nexus-outcome-hub__tag {
  font-size: 0.65rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.125rem;
}
.nexus-outcome-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem;
}

/* ============================================================
   INTERACTIVE on SOFT (light) background
   ============================================================ */
.section--soft .interactive__step-title {
  color: var(--text-primary);
}
.section--soft .selector-card {
  background: var(--surface-white);
  border-color: var(--surface-border);
  color: var(--text-primary);
}
.section--soft .selector-card:hover,
.section--soft .selector-card[aria-pressed="true"] {
  background: rgba(122,170,53,0.08);
  border-color: var(--gcs-green);
}
.section--soft .selector-card strong { color: var(--text-primary); }
.section--soft .selector-card span  { color: var(--text-muted); }
.section--soft .challenge-button {
  background: var(--surface-white);
  border-color: var(--surface-border);
  color: var(--text-primary);
}
.section--soft .challenge-button:hover,
.section--soft .challenge-button[aria-pressed="true"] {
  background: rgba(122,170,53,0.08);
  border-color: var(--gcs-green);
}
.section--soft .challenge-button strong { color: var(--text-primary); }
.section--soft .challenge-button span  { color: var(--text-muted); }
.section--soft .interactive__summary {
  background: var(--surface-white);
  border-color: var(--surface-border);
}
.section--soft .interactive__summary p { color: var(--text-secondary); }
.section--soft .section-title  { color: var(--text-primary); }
.section--soft .section-subtitle { color: var(--text-muted); }
.section--soft .section-note   { color: var(--text-subtle); }
.section--soft .section-label  { color: var(--gcs-green-dk); background: rgba(122,170,53,0.10); border-color: rgba(122,170,53,0.2); }
.section--soft .workflow-card  { background: var(--surface-white); }
.section--soft .workflow-card h3 { color: var(--text-primary); }
.section--soft .workflow-card p  { color: var(--text-muted); }

/* Nexus page process steps on muted */
.section--muted .process-step {
  background: var(--surface-white);
  border-color: var(--surface-border);
}
.section--muted .process-step .card__title { color: var(--text-primary); }
.section--muted .process-step p { color: var(--text-muted); }


.section--accent {
  background: linear-gradient(135deg, var(--gcs-navy) 0%, #1a3460 100%);
  color: var(--text-on-dark);
}
.section-header { margin-bottom: 3rem; }
.section-header--center { text-align: center; }
.section-label {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gcs-green-dk);
  background: rgba(122,170,53,0.10);
  padding: 0.25rem 0.75rem;
  border-radius: 100px; margin-bottom: 0.75rem;
  border: 1px solid rgba(122,170,53,0.2);
}
.section-label--light { color: var(--gcs-green-lt); background: rgba(138,184,58,0.15); border-color: rgba(138,184,58,0.25); }
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 2.25rem);
  font-weight: 700; color: var(--text-primary);
  line-height: 1.25; margin-bottom: 0.75rem;
  overflow-wrap: break-word; word-break: break-word; max-width: 100%;
}
.section--dark .section-title,
.section--navy .section-title { color: #fff; }
.section-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.5vw, 1rem); color: var(--text-muted);
  max-width: 600px; margin-inline: auto; line-height: 1.7;
}
.section--dark .section-subtitle,
.section--navy .section-subtitle { color: rgba(255,255,255,0.72); }
.section-note { font-size: 0.8rem; color: var(--text-subtle); }
.section-copy { font-family: var(--font-body); font-size: 1rem; color: var(--text-secondary); line-height: 1.75; }
.section--dark .section-copy,
.section--navy .section-copy { color: rgba(255,255,255,0.80); }
.eyebrow {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gcs-green-dk); margin-bottom: 0.5rem;
}
.gradient-text {
  background: linear-gradient(135deg, var(--gcs-green) 0%, var(--gcs-green-lt) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  /* isolation: isolate prevents background-clip bleed into adjacent elements */
  isolation: isolate;
  /* Ensure display block so inline rendering doesn't bleed into sibling text */
  display: inline-block;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.8125rem 1.75rem;
  font-size: 0.9375rem; font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition-mid);
  white-space: nowrap; text-decoration: none;
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--gcs-green); color: #fff; border-color: var(--gcs-green);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--gcs-green-dk); border-color: var(--gcs-green-dk);
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(122,170,53,0.30);
}
.btn--secondary {
  background: var(--gcs-navy); color: #fff; border-color: var(--gcs-navy);
}
.btn--secondary:hover {
  background: #1a2e50; border-color: #1a2e50;
  transform: translateY(-1px);
}
.btn--outline {
  background: transparent; color: var(--gcs-green-dk); border-color: var(--gcs-green);
}
.btn--outline:hover, .btn--outline:focus-visible {
  background: rgba(122,170,53,0.08);
  transform: translateY(-1px);
}
.btn--outline-white {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.5);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.8);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent; color: var(--gcs-navy);
  border-color: var(--surface-border);
}
.btn--ghost:hover {
  background: var(--surface-light); border-color: var(--surface-border);
}
.btn--gold {
  background: var(--gcs-green); color: #fff; border-color: var(--gcs-green);
}
.btn--gold:hover {
  background: var(--gcs-green-dk); border-color: var(--gcs-green-dk);
}
.btn--full { width: 100%; }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn--lg { padding: 1rem 2.25rem; font-size: 1.0625rem; }

/* ============================================================
   HERO — Homepage
   ============================================================ */
.hero--home {
  position: relative;
  background: linear-gradient(160deg, #f8fbf3 0%, #f5f8ff 50%, var(--surface-white) 100%);
  padding-top: 4.5rem; /* header height */
  overflow: hidden;
  min-height: 92vh;
  display: flex; align-items: center;
}
.hero__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(122,170,53,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,170,53,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero__content {
  position: relative; z-index: 2;
  padding-block: 4rem;
  max-width: 960px; margin-inline: auto;
  text-align: center;
}
.hero__eyebrow {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gcs-green-dk);
  background: rgba(122,170,53,0.10);
  padding: 0.3rem 0.875rem; border-radius: 100px; margin-bottom: 1.5rem;
  border: 1px solid rgba(122,170,53,0.22);
}
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800; line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  /* Prevent overflow on narrow viewports */
  overflow-wrap: break-word; word-break: break-word; max-width: 100%;
}
.hero__brand-line {
  display: block;
  color: var(--gcs-navy);
  font-size: 1.1em;
  letter-spacing: 0.02em;
}
.hero__subtitle {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.65; color: var(--text-muted);
  max-width: 640px; margin-inline: auto; margin-bottom: 0.5rem;
}
.hero__supporting {
  font-size: 1rem; color: var(--text-muted);
  max-width: 680px; margin-inline: auto; margin-top: 0.5rem; line-height: 1.7;
}
.hero__actions {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap; margin: 2rem 0;
}
.hero__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 1rem; max-width: 860px; margin-inline: auto;
}
.stat-card {
  background: var(--surface-white);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.stat-card strong {
  display: block; font-size: 0.875rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 0.25rem;
}
.stat-card span { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; }

/* ============================================================
   CONNECTIVITY GRAPHIC — Homepage
   ============================================================ */
.org-connect {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem; padding: 2rem 0;
}
.org-connect__ring {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  max-width: 860px;
}
.org-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.4rem 0.875rem;
  background: var(--surface-white);
  border: 1px solid var(--surface-border);
  border-radius: 100px; font-size: 0.8125rem; font-weight: 500;
  color: var(--text-primary); box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.org-chip:hover { border-color: var(--gcs-green); box-shadow: 0 2px 8px rgba(122,170,53,0.15); }
.org-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gcs-green); flex-shrink: 0; }
.org-connect__arrow {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--text-subtle); font-size: 0.8125rem; letter-spacing: 0.04em;
}
.org-connect__arrow::before {
  content: ''; display: block; width: 2px; height: 2.5rem;
  background: linear-gradient(to bottom, rgba(122,170,53,0.3), var(--gcs-green));
  border-radius: 1px;
}
.org-connect__nexus {
  background: var(--gcs-navy);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 1.5rem 3rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.org-connect__nexus-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gcs-green-lt); margin-bottom: 0.25rem;
}
.org-connect__nexus-name {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: 0.02em;
}
.org-connect__outcome {
  display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center;
}
.outcome-pill {
  padding: 0.5rem 1.25rem;
  background: rgba(122,170,53,0.10);
  border: 1px solid rgba(122,170,53,0.25);
  border-radius: 100px; font-size: 0.8125rem; font-weight: 600;
  color: var(--gcs-green-dk);
}

/* ============================================================
   PAGE HERO — Interior pages
   ============================================================ */
.page-hero {
  background: var(--surface-light);
  border-bottom: 1px solid var(--surface-border);
  padding: 5rem 0 3rem;
  margin-top: 4.5rem;
}
/* Suppress any inherited pseudo-element decorations that could overlap first-letter */
.page-hero::before { display: none !important; content: none !important; }
.page-hero::after  { display: none !important; content: none !important; }
.page-hero--dash {
  background: linear-gradient(135deg, var(--gcs-navy) 0%, #1a3460 100%);
  color: #fff;
}
/* Establish own stacking context to prevent rendering bleed from sibling elements */
.page-hero__inner { max-width: 760px; position: relative; isolation: isolate; }
.page-hero__eyebrow {
  /* Changed to block + fit-content: prevents inline-block continuation rendering
     artifacts that caused first-letter overlap on following paragraph elements */
  display: block; width: fit-content;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gcs-green-dk); margin-bottom: 0.75rem;
}
.page-hero--dash .page-hero__eyebrow { color: var(--gcs-green-lt); }
.page-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700; color: var(--text-primary);
  line-height: 1.2; margin-bottom: 0.875rem;
  overflow-wrap: break-word; word-break: break-word;
  max-width: 100%;
  /* Establish a paint boundary so the heading's Sora rasterization cannot
     bleed into the Inter paragraph that follows */
  contain: paint;
}
.page-hero--dash .page-hero__title { color: #fff; }
.page-hero__lead {
  /* Explicit font-family prevents FOUT-overlap where heading Sora bleeds into
     first character of the following paragraph rendered in Inter */
  font-family: var(--font-body);
  font-size: 1.0625rem; color: var(--text-muted); line-height: 1.7; max-width: 620px;
}
/* Lock first-letter to the element's own colour/font so Chrome's text-paint
   state from the preceding Sora heading cannot composite over character #1.
   -webkit-text-fill-color: currentColor cancels any inherited transparent fill. */
.page-hero__lead::first-letter {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.page-hero--dash .page-hero__lead { color: rgba(255,255,255,0.80); }
.page-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.breadcrumbs a { color: var(--gcs-green-dk); }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span { color: var(--text-subtle); }

/* ============================================================
   GRIDS & LAYOUTS
   ============================================================ */
.grid--4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.grid--3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.grid--2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.split        { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface-white);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: box-shadow var(--transition-mid), transform var(--transition-mid);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gcs-green-dk); margin-bottom: 0.5rem;
  display: block;
}
.card__title {
  font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 0.5rem;
  overflow-wrap: break-word; word-break: break-word;
}
.card__desc { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; }
.card__icon {
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800;
  color: var(--gcs-green); margin-bottom: 0.75rem;
}
.card__list { list-style: none; padding: 0; }
.card__list li {
  padding: 0.4rem 0; font-size: 0.9rem; color: var(--text-secondary);
  border-bottom: 1px solid var(--surface-border);
}
.card__list li:last-child { border-bottom: none; }
.link-tile { cursor: pointer; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.875rem; font-weight: 600; color: var(--gcs-green-dk);
  margin-top: 1rem;
  transition: gap var(--transition-fast);
}
.link-arrow:hover { gap: 0.5rem; }

/* Feature card */
.feature-card {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); padding: 1.75rem;
  transition: box-shadow var(--transition-mid), transform var(--transition-mid);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-card__icon {
  width: 2.5rem; height: 2.5rem; margin-bottom: 1rem;
  background: rgba(122,170,53,0.10); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--gcs-green-dk);
}
.feature-card__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
.feature-card__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }

/* Module card (Nexus modules) */
.module-card {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-mid);
}
.module-card:hover { border-color: var(--gcs-green); box-shadow: var(--shadow-sm); }
.module-card__meta {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gcs-green-dk); margin-bottom: 0.5rem; display: block;
}
.module-card h3 { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.375rem; }
.module-card p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; }
.modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }

/* Workflow card */
.workflow-card {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); padding: 1.5rem;
}
.workflow-card h3 { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.375rem; }
.workflow-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }
.workflow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }

/* KPI cards */
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.kpi-card {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  text-align: center;
}
.kpi-card__value {
  font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800;
  color: var(--text-primary); line-height: 1;
}
.kpi-card__label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.kpi-card__delta { font-size: 0.75rem; color: var(--gcs-green-dk); font-weight: 600; margin-top: 0.125rem; }
.kpi-card--alert .kpi-card__value { color: #b42318; }
.kpi-card--warn  .kpi-card__value { color: #b45309; }
.kpi-card--ok    .kpi-card__value { color: var(--gcs-green-dk); }

/* Value card */
.value-card {
  background: var(--surface-light); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  transition: box-shadow var(--transition-mid), transform var(--transition-mid);
}
.value-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.value-card__icon { color: var(--gcs-green); margin-bottom: 0.75rem; }
.value-card__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
.value-card__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }

/* ============================================================
   INDUSTRY & DEPARTMENT CHIPS
   ============================================================ */
.industry-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.industry-chip {
  padding: 0.35rem 0.875rem;
  background: rgba(122,170,53,0.08);
  border: 1px solid rgba(122,170,53,0.2);
  border-radius: 100px; font-size: 0.8rem; font-weight: 500;
  color: var(--gcs-green-dk);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 2rem; }
.chip {
  padding: 0.35rem 0.875rem;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px; font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.80);
}

/* ============================================================
   INTERACTIVE SELECTOR (Homepage + Dept/Industry selectors)
   ============================================================ */
.interactive { margin-top: 0; }
.interactive__steps { }
.interactive__panel { }
.interactive__step-title {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  color: #fff; margin-bottom: 1rem;
}
.interactive__summary {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem;
}
.interactive__summary p { color: rgba(255,255,255,0.85); font-size: 0.9375rem; line-height: 1.7; }

.selector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.selector-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg); padding: 1.25rem;
  text-align: left; cursor: pointer; transition: all var(--transition-fast);
  color: #fff;
}
.selector-card:hover, .selector-card[aria-pressed="true"] {
  background: rgba(122,170,53,0.15); border-color: var(--gcs-green);
}
.selector-card strong { display: block; font-size: 0.9375rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
.selector-card span { font-size: 0.8125rem; color: rgba(255,255,255,0.65); line-height: 1.5; }

.challenge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.challenge-button {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md); padding: 0.875rem; text-align: left; cursor: pointer;
  transition: all var(--transition-fast); color: #fff;
}
.challenge-button:hover, .challenge-button[aria-pressed="true"] {
  background: rgba(122,170,53,0.15); border-color: var(--gcs-green);
}
.challenge-button strong { display: block; font-size: 0.875rem; font-weight: 700; color: #fff; margin-bottom: 0.125rem; }
.challenge-button span { font-size: 0.75rem; color: rgba(255,255,255,0.60); line-height: 1.4; }

/* ============================================================
   TAB SELECTOR (Departments / Industries)
   ============================================================ */
.tab-nav {
  display: flex; flex-wrap: wrap; gap: 0.375rem;
  border-bottom: 2px solid var(--surface-border); padding-bottom: 0;
  margin-bottom: 2rem;
}
.tab-btn {
  padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500;
  color: var(--text-muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid transparent; border-bottom: none; cursor: pointer;
  transition: all var(--transition-fast); background: transparent;
  white-space: nowrap; margin-bottom: -2px;
}
.tab-btn:hover { color: var(--text-primary); background: var(--surface-light); }
.tab-btn.active {
  color: var(--gcs-navy); background: var(--surface-white);
  border-color: var(--surface-border); border-bottom-color: var(--surface-white);
  font-weight: 600;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Dept/Industry content panel */
.dept-panel {
  display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start;
}
.dept-sidebar {}
.dept-sidebar__title {
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 0.5rem;
}
.dept-sidebar__desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.25rem; }
.dept-sidebar__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
.dept-kpi {
  background: var(--surface-light); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); padding: 0.875rem; text-align: center;
}
.dept-kpi__val { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
.dept-kpi__lbl { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.dept-connects { font-size: 0.8125rem; color: var(--text-muted); }
.dept-connects strong { color: var(--text-primary); display: block; margin-bottom: 0.375rem; }
.dept-connects-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.connect-chip {
  padding: 0.2rem 0.625rem; background: rgba(15,31,61,0.06);
  border-radius: 100px; font-size: 0.75rem; color: var(--gcs-navy); font-weight: 500;
}
.dept-dashboard { }

/* Dashboard shell */
.dash-shell {
  background: var(--surface-light); border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md);
}
.dash-shell__topbar {
  background: var(--gcs-navy); color: #fff;
  padding: 0.75rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.8125rem;
}
.dash-shell__title { font-weight: 600; color: #fff; }
.dash-shell__badge {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gcs-green-lt); background: rgba(138,184,58,0.15);
  padding: 0.2rem 0.625rem; border-radius: 100px;
  border: 1px solid rgba(138,184,58,0.3);
}
.dash-shell__body { padding: 1.25rem; }
.dash-row { display: grid; gap: 0.75rem; margin-bottom: 0.75rem; }
.dash-row--4 { grid-template-columns: repeat(4, 1fr); }
.dash-row--3 { grid-template-columns: repeat(3, 1fr); }
.dash-row--2 { grid-template-columns: repeat(2, 1fr); }
.dash-row--2-1 { grid-template-columns: 2fr 1fr; }
.dash-kpi {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); padding: 1rem;
  border-top: 3px solid var(--dept-accent, var(--surface-border));
}
.dash-kpi__lbl { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.375rem; }
.dash-kpi__val { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.dash-kpi__delta { font-size: 0.7rem; font-weight: 600; margin-top: 0.25rem; }
.dash-kpi__delta--up   { color: var(--gcs-green-dk); }
.dash-kpi__delta--down { color: #b42318; }
.dash-kpi__delta--warn { color: #b45309; }
.dash-chart {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); padding: 1rem;
  min-height: 120px;
}
.dash-chart__title { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; }
.dash-chart__bars { display: flex; align-items: flex-end; gap: 0.375rem; height: 80px; }
.dash-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  background: var(--gcs-green); min-width: 8px;
  transition: background var(--transition-fast);
}
.dash-bar--navy { background: var(--gcs-navy); }
.dash-bar--slate { background: var(--gcs-slate); }
.dash-bar--lt { background: var(--gcs-green-lt); }
.dash-list {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); padding: 1rem;
}
.dash-list__title { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.625rem; }
.dash-list__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.375rem 0; font-size: 0.7875rem; color: var(--text-secondary);
  border-bottom: 1px solid var(--surface-border-lt);
}
.dash-list__row:last-child { border-bottom: none; }
.dash-badge {
  font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem;
  border-radius: 100px; text-transform: uppercase; letter-spacing: 0.06em;
}
.dash-badge--ok   { background: rgba(122,170,53,0.12); color: var(--gcs-green-dk); }
.dash-badge--warn { background: rgba(180,67,24,0.10); color: #b42318; }
.dash-badge--info { background: rgba(46,74,122,0.10); color: var(--gcs-blue); }
.dash-badge--pend { background: rgba(180,83,9,0.10); color: #b45309; }

/* Expandable drill-down rows */
.dash-expand-row {
  display: block; cursor: pointer;
  border-bottom: 1px solid var(--surface-border-lt);
  padding: 0.375rem 0;
}
.dash-expand-row:last-child { border-bottom: none; }
.dash-expand-row .dash-expand-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.7875rem; color: var(--text-secondary);
}
.dash-expand-row .dash-expand-header::after {
  content: '›'; font-size: 0.75rem; color: var(--gcs-green-dk);
  margin-left: 0.375rem; flex-shrink: 0; transition: transform 0.15s;
}
.dash-expand-row[aria-expanded="true"] .dash-expand-header::after {
  transform: rotate(90deg);
}
.dash-expand-row:hover .dash-expand-header { color: var(--gcs-navy); }
.dash-expand-row:focus { outline: 2px solid var(--gcs-green); outline-offset: 1px; border-radius: 2px; }
.dash-expand-detail {
  display: none; font-size: 0.75rem; color: var(--text-muted);
  background: var(--surface-light); padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--gcs-green); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: 0.375rem; line-height: 1.6;
}
.dash-expand-row[aria-expanded="true"] .dash-expand-detail { display: block; }

/* ============================================================
   SANDBOX
   ============================================================ */
.sandbox-header {
  background: var(--gcs-navy); color: #fff;
  padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem;
}
.sandbox-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gcs-green-lt); background: rgba(138,184,58,0.15);
  padding: 0.25rem 0.75rem; border-radius: 100px;
  border: 1px solid rgba(138,184,58,0.3);
}
.sandbox-org-select {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.sandbox-org-select label { font-size: 0.8125rem; color: rgba(255,255,255,0.80); white-space: nowrap; }
.sandbox-org-select select {
  padding: 0.4rem 0.75rem; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.10);
  color: #fff; font-size: 0.8125rem; cursor: pointer;
}
/* ============================================================
   NEXUS SANDBOX — DEPARTMENT NAVIGATION (single authoritative block)
   Per-department color identity via --dept-color on each button.
   ============================================================ */

/* Per-department color tokens */
#tab-executive   { --dept-color: #68981C; --dept-shadow: rgba(104,152,28,0.35); }
#tab-finance     { --dept-color: #2563EB; --dept-shadow: rgba(37,99,235,0.35); }
#tab-hr          { --dept-color: #0F766E; --dept-shadow: rgba(15,118,110,0.35); }
#tab-safety      { --dept-color: #EA580C; --dept-shadow: rgba(234,88,12,0.35); }
#tab-risk        { --dept-color: #B91C1C; --dept-shadow: rgba(185,28,28,0.35); }
#tab-facilities  { --dept-color: #3B82A0; --dept-shadow: rgba(59,130,160,0.35); }
#tab-fleet       { --dept-color: #7C3AED; --dept-shadow: rgba(124,58,237,0.35); }
#tab-projects    { --dept-color: #B7791F; --dept-shadow: rgba(183,121,31,0.35); }
#tab-procurement { --dept-color: #92400E; --dept-shadow: rgba(146,64,14,0.35); }
#tab-logistics   { --dept-color: #0891B2; --dept-shadow: rgba(8,145,178,0.35); }
#tab-reports     { --dept-color: #00122B; --dept-shadow: rgba(0,18,43,0.45); }

.sandbox-nav-wrap {
  position: relative;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sandbox-nav-wrap::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 3rem;
  background: linear-gradient(to right, transparent, rgba(15,31,61,0.85));
  pointer-events: none;
}
.sandbox-nav-wrap.no-overflow::after { display: none; }

.sandbox-nav {
  padding: 0.5rem 0.75rem;
  display: flex; gap: 0.375rem; overflow-x: auto; flex-wrap: nowrap; align-items: center;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.20) transparent;
  -ms-overflow-style: none;
}
.sandbox-nav::-webkit-scrollbar { height: 4px; }
.sandbox-nav::-webkit-scrollbar-track { background: transparent; }
.sandbox-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }

/* INACTIVE state — light bg, dept-colored border + text */
.sandbox-nav-btn {
  padding: 0.4rem 0.75rem; font-size: 0.775rem; font-weight: 600;
  color: var(--dept-color);
  background: rgba(255,255,255,0.92);
  border: 2px solid var(--dept-color);
  border-radius: 6px;
  white-space: nowrap; flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
  line-height: 1.3;
}
.sandbox-nav-btn:hover {
  background: rgba(255,255,255,1);
  box-shadow: 0 2px 6px var(--dept-shadow);
}

/* ACTIVE state — solid dept color, white text */
.sandbox-nav-btn.active,
.sandbox-nav-btn[aria-selected="true"] {
  background: var(--dept-color);
  color: #fff;
  border-color: var(--dept-color);
  box-shadow: 0 2px 10px var(--dept-shadow);
  font-weight: 700;
}

/* Focus ring uses dept color */
.sandbox-nav-btn:focus-visible {
  outline: 3px solid var(--dept-color); outline-offset: 2px; border-radius: 6px;
}
.sandbox-body { padding: 1.25rem; background: var(--surface-light); min-height: 480px; }
.sandbox-view { display: none; }
.sandbox-view.active { display: block; }
.sandbox-wrap {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg);
}

/* ============================================================
   MAP INTELLIGENCE
   ============================================================ */
.map-shell {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 0; height: 580px;
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg);
}
.map-sidebar {
  background: var(--surface-light); border-right: 1px solid var(--surface-border);
  padding: 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem;
}
.map-sidebar__title { font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; }
.map-layer {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--surface-border);
  cursor: pointer; font-size: 0.8125rem; color: var(--text-secondary);
}
.map-layer:last-child { border-bottom: none; }
.map-layer input[type="checkbox"] { accent-color: var(--gcs-green); }
.map-layer__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.map-detail {
  border-top: 1px solid var(--surface-border); padding-top: 1rem;
}
.map-detail__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
.map-detail-kpi {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm); padding: 0.625rem; text-align: center;
}
.map-detail-kpi__val { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.map-detail-kpi__lbl { font-size: 0.65rem; color: var(--text-muted); }
.map-canvas {
  position: relative; background: #e8edf2; overflow: hidden;
}
.map-canvas svg { width: 100%; height: 100%; }
/* SVG map styling */
.map-feature { cursor: pointer; transition: opacity var(--transition-fast); }
.map-feature:hover { opacity: 0.8; }
.map-facility-marker { fill: var(--gcs-navy); }
.map-fleet-marker { fill: var(--gcs-green); }
.map-project-marker { fill: var(--gcs-blue); }
.map-alert-marker { fill: #b42318; }
.map-road { stroke: #fff; stroke-width: 2; fill: none; }
.map-zone { fill-opacity: 0.15; stroke-width: 1.5; }

/* ============================================================
   PROCESS / STEPS
   ============================================================ */
.process-list { display: flex; flex-direction: column; gap: 1rem; }
.process-step {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-lg);
}
.process-step__number {
  width: 2rem; height: 2rem; min-width: 2rem;
  background: var(--gcs-green); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700;
}
.process-step .card__title { color: #fff; margin-bottom: 0.25rem; }
.process-step p { font-size: 0.875rem; color: rgba(255,255,255,0.75); }

/* Stat grid */
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--surface-light); border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl); padding: 3rem; text-align: center;
}
.cta-band .eyebrow { display: block; }
.cta-band h2 {
  font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700; color: var(--text-primary); margin-bottom: 0.75rem;
}
.cta-band p { font-size: 1rem; color: var(--text-muted); max-width: 560px; margin-inline: auto; line-height: 1.65; margin-bottom: 1.5rem; }
.cta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.section--dark .cta-band { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.section--dark .cta-band h2 { color: #fff; }
.section--dark .cta-band p { color: rgba(255,255,255,0.72); }

/* Domain / Capability grids */
.domain-grid     { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1rem; }
.capability-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1rem; }
.examples-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }

/* Industries grid */
.industries-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.industry-card {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  transition: box-shadow var(--transition-mid), border-color var(--transition-fast);
  cursor: pointer;
}
.industry-card:hover { box-shadow: var(--shadow-md); border-color: var(--gcs-green); }
.industry-card h3 { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.375rem; }
.industry-card p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; }

/* ============================================================
   FORMS
   ============================================================ */
.form-card {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl); padding: 2.5rem;
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.form-input,
.form-select,
.form-textarea {
  padding: 0.75rem 1rem; border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); font-size: 0.9375rem; font-family: var(--font-body);
  color: var(--text-primary); background: var(--surface-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--gcs-green);
  box-shadow: 0 0 0 3px rgba(122,170,53,0.15);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-span { grid-column: 1 / -1; }
.form-check { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; color: var(--text-muted); }
.form-check input { margin-top: 0.125rem; accent-color: var(--gcs-green); }
.checkbox-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
.form-error { min-height: 1.1em; font-size: 0.875rem; color: #b42318; }
.form-hint { color: var(--gcs-slate); font-size: 0.8125rem; }
.form-optional { color: var(--gcs-slate); font-size: 0.8125rem; }
.form-disclosure { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; }
.form-privacy-note { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--gcs-slate); }
.form-summary {
  white-space: pre-wrap; background: var(--surface-white);
  color: var(--text-primary); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); padding: 1rem; overflow-x: auto;
}
.form-result__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.contact-card__list, .contact-details { display: grid; gap: 0.85rem; }
.contact-card__row { display: grid; gap: 0.25rem; }
.demo-panel, .surface-panel, .contact-card {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl); padding: 2rem;
}
.callout {
  background: rgba(122,170,53,0.06); border: 1px solid rgba(122,170,53,0.2);
  border-radius: var(--radius-lg); padding: 1.25rem;
}
.callout--navy {
  background: rgba(15,31,61,0.05); border-color: rgba(15,31,61,0.12);
}

/* ============================================================
   ABOUT — FOUNDER CARD (kept but de-emphasized)
   ============================================================ */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-bottom: 4rem; }
.about__lead { font-size: 1.125rem; font-weight: 500; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.25rem; }
.about__story p { color: var(--text-muted); margin-bottom: 1rem; line-height: 1.75; }
.about__values { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.about__founder { border-top: 1px solid var(--surface-border); padding-top: 3rem; }
.founder-card {
  display: flex; align-items: flex-start; gap: 2rem;
  background: var(--surface-light); border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl); padding: 2.5rem;
  max-width: 820px; margin-inline: auto;
}
.founder-card__avatar {
  width: 5rem; height: 5rem; min-width: 5rem;
  background: linear-gradient(135deg, var(--gcs-navy), var(--gcs-green));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: #fff;
}
.founder-card__name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.founder-card__title { font-size: 0.875rem; font-weight: 600; color: var(--gcs-green-dk); margin-bottom: 0.875rem; letter-spacing: 0.02em; }
.founder-card__bio { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.7; }

/* ============================================================
   FOOTER — Simplified, bright white
   ============================================================ */
.site-footer {
  background: var(--surface-white);
  border-top: 1px solid var(--surface-border);
  padding-block: 2.5rem;
}
.footer__top { }
.footer__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem; margin-bottom: 2rem;
}
.footer__brand {
  display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.75rem;
}
.footer__company-name { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.footer__tagline { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.04em; }
.footer__subtext { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.65; max-width: 36rem; }
.footer__nav {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.125rem; align-items: center;
}
.footer__nav a {
  font-size: 0.8125rem; color: var(--text-muted); padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm); transition: color var(--transition-fast);
}
.footer__nav a:hover { color: var(--gcs-green-dk); }
.footer__nav-heading { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.625rem; }
.footer__nav-group { }
.footer__nav-group ul { list-style: none; }
.footer__nav-group ul li { margin-bottom: 0.375rem; }
.footer__nav-group a { font-size: 0.875rem; color: var(--text-muted); }
.footer__nav-group a:hover { color: var(--gcs-green-dk); }
.footer__nav--wide { }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.5rem; }
.footer__legal a { font-size: 0.8rem; color: var(--text-muted); }
.footer__legal a:hover { color: var(--gcs-green-dk); }
.footer__note { font-size: 0.75rem; color: var(--text-subtle); margin-top: 0.5rem; }
.footer__bottom {
  border-top: 1px solid var(--surface-border);
  padding-top: 1.25rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.8rem; color: var(--text-subtle);
}
.footer__copy { font-size: 0.8rem; color: var(--text-subtle); }
.footer__mission { font-size: 0.8rem; color: var(--text-subtle); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; top: calc(100% + 4px);
    left: var(--container-pad); right: var(--container-pad);
    display: none; flex-direction: column; align-items: stretch;
    padding: 1rem; background: var(--surface-white);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); z-index: 900;
  }
  .nav__links.open { display: flex; }
  .nav__link, .nav__link--cta, .nav__link--sandbox {
    width: 100%; text-align: left; margin-left: 0;
    border-radius: var(--radius-sm);
  }

  .selector-grid, .challenge-grid,
  .grid--4, .grid--3, .grid--2,
  .hero__metrics, .stat-grid, .kpi-strip,
  .split-layout, .split, .footer__grid,
  .form-grid, .checkbox-grid,
  .industries-grid, .modules-grid,
  .domain-grid, .capability-grid, .examples-grid {
    grid-template-columns: 1fr 1fr;
  }
  .map-shell { grid-template-columns: 200px 1fr; }
  .dept-panel { grid-template-columns: 1fr; }
  .dash-row--4 { grid-template-columns: repeat(2, 1fr); }
  .nexus-radial-wrapper { min-height: 500px; }
}

@media (max-width: 760px) {
  :root { --section-pad-y: 3rem; }

  .section, .page-section, .hero--home, .page-hero { padding-left: 0; padding-right: 0; }
  .page-hero { padding: 3rem 0 2rem; }

  .hero__metrics, .stat-grid,
  .selector-grid, .challenge-grid, .workflow-grid,
  .industries-grid, .modules-grid, .domain-grid,
  .capability-grid, .examples-grid,
  .grid--4, .grid--3, .grid--2,
  .kpi-strip, .split-layout, .split,
  .footer__grid, .form-grid, .checkbox-grid,
  .about__grid, .about__values,
  .dept-sidebar__kpis, .dept-panel,
  .map-detail__kpis, .dash-row--2-1 {
    grid-template-columns: 1fr;
  }
  .map-shell { grid-template-columns: 1fr; grid-template-rows: 220px 1fr; height: auto; }
  .map-canvas { min-height: 220px; }
  .dash-row--4 { grid-template-columns: 1fr 1fr; }
  .dash-row--3 { grid-template-columns: 1fr 1fr; }
  .dash-row--2 { grid-template-columns: 1fr; }
  .dash-row--2-1 { grid-template-columns: 1fr; }

  .footer__bottom, .hero__actions, .page-hero__actions, .cta-actions, .form-result__actions {
    flex-direction: column; align-items: stretch;
  }
  .hero__taglines { flex-direction: column; gap: 0.25rem; }
  .hero__taglines span + span::before { display: none; }
  .btn, .btn--primary, .btn--outline, .btn--ghost, .btn--gold, .btn--secondary, .btn--outline-white { width: 100%; }
  .nav__logo-img { height: 48px; max-width: 180px; }
  .nav__logo-img--sm { height: 44px; max-width: 160px; }

  .card, .feature-card, .module-card, .workflow-card, .contact-card,
  .form-card, .demo-panel, .surface-panel, .callout, .interactive__panel,
  .cta-band, .dash-shell, .sandbox-wrap { border-radius: 14px; }

  .founder-card { flex-direction: column; }
  .tab-nav { overflow-x: auto; flex-wrap: nowrap; }
  .form-card { padding: 1.5rem; }
  .form-card__lead, .page-hero__lead { text-align: left; }
  .form-group--full textarea, .form-group--full input { width: 100%; }
}

/* ============================================================
   DARK SECTION OVERRIDES — ensure content readable on navy bg
   ============================================================ */
.section--dark .interactive__panel,
.section--dark .interactive__panel p,
.section--dark .interactive__panel li,
.section--dark .workflow-card p,
.section--dark .interactive__panel .section-copy,
.section--dark .selector-card span,
.section--dark .challenge-button span { color: rgba(255,255,255,0.75); }
.section--dark .interactive__step-title,
.section--dark .workflow-card h3,
.section--dark .selector-card strong,
.section--dark .challenge-button strong { color: #fff; }
.section--dark .section-label { color: var(--gcs-green-lt); background: rgba(138,184,58,0.12); border-color: rgba(138,184,58,0.25); }
.section--dark .section-title { color: #fff; }
.section--dark .card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); }
.section--dark .card__title { color: #fff; }
.section--dark .card__eyebrow { color: var(--gcs-green-lt); }
.section--dark .card__desc { color: rgba(255,255,255,0.72); }

/* Accessible focus for dark sections */
.section--dark a:focus-visible, .section--navy a:focus-visible { outline-color: var(--gcs-green-lt); }

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

/* ============================================================
   VIDEO DEMO PLACEHOLDER — polished branded component
   ============================================================ */
.demo-video-block {
  position: relative; background: var(--gcs-navy); border-radius: var(--radius-xl);
  overflow: hidden; aspect-ratio: 16/9; width: 100%; max-width: 760px; margin: 0 auto;
  box-shadow: var(--shadow-xl); cursor: pointer;
  border: 1px solid rgba(255,255,255,0.10);
}
.demo-video-block::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 40% 40%, rgba(104,152,28,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.demo-video-block__grid {
  position: absolute; inset: 0; opacity: 0.06;
  background-image: repeating-linear-gradient(0deg,rgba(255,255,255,0.7) 0px,transparent 1px,transparent 40px),
    repeating-linear-gradient(90deg,rgba(255,255,255,0.7) 0px,transparent 1px,transparent 40px);
}
.demo-video-block__inner {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; padding: 2.5rem; text-align: center; gap: 1.25rem; z-index: 1;
}
.demo-video-block__play {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--gcs-green); display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s, background 0.18s; flex-shrink: 0;
  box-shadow: 0 0 0 8px rgba(104,152,28,0.22), 0 0 0 16px rgba(104,152,28,0.10);
}
.demo-video-block:hover .demo-video-block__play { background: var(--gcs-green-dk); transform: scale(1.08); }
.demo-video-block__play svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }
.demo-video-block__label {
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: #fff;
}
.demo-video-block__sublabel {
  font-size: 0.875rem; color: rgba(255,255,255,0.65); margin-top: -0.5rem;
}
.demo-video-block__badge {
  display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px;
  background: rgba(104,152,28,0.18); border: 1px solid rgba(104,152,28,0.35);
  color: var(--gcs-green-lt); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
}
.demo-video-block__coming {
  font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-top: 0.25rem;
}
.demo-video-block:focus-visible { outline: 3px solid var(--gcs-green-lt); outline-offset: 3px; }

/* Demo page grid */
.demos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem;
}
@media (max-width: 640px) { .demos-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HERO — DEMO / NEXUS CTA STYLE UPDATES
   ============================================================ */
.hero__demo-note {
  font-size: 0.8125rem; color: rgba(255,255,255,0.65); margin-top: 0.35rem; text-align: center;
}
.hero__demo-note strong { color: rgba(255,255,255,0.85); }
.hero__cta-stack { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }

/* ============================================================
   ORIENTATION MODAL
   ============================================================ */
.orient-overlay {
  position: fixed; inset: 0; background: rgba(0,18,43,0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; padding: 1rem;
  animation: orient-fade-in 0.2s ease;
}
.orient-overlay[hidden] { display: none; }
@keyframes orient-fade-in { from { opacity: 0; } to { opacity: 1; } }
.orient-modal {
  background: #fff; border-radius: var(--radius-xl);
  max-width: 540px; width: 100%; padding: 2.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  text-align: center; position: relative;
}
.orient-modal__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gcs-green); margin: 0 auto 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
.orient-modal__icon svg { width: 26px; height: 26px; fill: #fff; }
.orient-modal__eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gcs-green); margin-bottom: 0.5rem;
}
.orient-modal__title {
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700;
  color: var(--gcs-navy); margin-bottom: 0.75rem;
}
.orient-modal__body {
  font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5rem;
}
.orient-modal__badge {
  display: inline-block; padding: 0.3rem 0.9rem; border-radius: 999px;
  background: rgba(104,152,28,0.10); border: 1px solid rgba(104,152,28,0.25);
  color: var(--gcs-green-dk); font-size: 0.8125rem; font-weight: 600; margin-bottom: 1.25rem;
}
.orient-modal__actions { display: flex; flex-direction: column; gap: 0.75rem; }
.orient-modal__actions .btn { width: 100%; }
.orient-modal__dismiss {
  font-size: 0.8125rem; color: var(--text-muted); cursor: pointer;
  background: none; padding: 0.25rem; text-decoration: underline; text-underline-offset: 3px;
}
.orient-modal__dismiss:hover { color: var(--text-secondary); }

/* ============================================================
   SANDBOX DEPARTMENT NAV — enhanced to be obviously selectable
   ============================================================ */
.sandbox-dept-heading {
  padding: 0.875rem 1.25rem 0.5rem;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sandbox-dept-heading__label {
  display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.25rem;
}
.sandbox-dept-heading__title {
  font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.90);
}

/* Mobile: smaller pills, horizontal scroll */
@media (max-width: 640px) {
  .sandbox-nav-btn {
    border-radius: 999px;
    padding: 0.35rem 0.65rem; font-size: 0.72rem;
  }
}

/* ============================================================
   PLATFORM PAGE — simplified capability cards
   ============================================================ */
.platform-card {
  background: var(--surface-white); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.platform-card:hover { box-shadow: var(--shadow-md); border-color: var(--gcs-green-lt); }
.platform-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(104,152,28,0.15), rgba(104,152,28,0.05));
  border: 1px solid rgba(104,152,28,0.20);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.platform-card__icon svg { width: 24px; height: 24px; stroke: var(--gcs-green); fill: none; stroke-width: 1.75; }
.platform-card__name {
  font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--gcs-navy);
}
.platform-card__tagline { font-size: 0.9375rem; color: var(--gcs-blue); font-weight: 500; }
.platform-card__desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; flex: 1; }
.platform-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;
}
@media (max-width: 600px) { .platform-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONSULTING PAGE — lifecycle visual
   ============================================================ */
.lifecycle-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--surface-border); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--surface-border);
}
.lifecycle-step {
  background: var(--surface-white); padding: 1.75rem 1.5rem; position: relative;
}
.lifecycle-step__num {
  font-size: 2rem; font-weight: 800; color: var(--gcs-green); opacity: 0.25;
  font-family: var(--font-heading); line-height: 1; margin-bottom: 0.5rem;
}
.lifecycle-step__name {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--gcs-navy);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem;
}
.lifecycle-step__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 780px) {
  .lifecycle-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .lifecycle-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   NAV LINK — Get Started (CTA style) in primary nav
   ============================================================ */
.nav__link--get-started {
  background: var(--gcs-green); color: #fff !important;
  padding: 0.4rem 1rem; border-radius: 999px; font-weight: 600;
  transition: background 0.15s;
}
.nav__link--get-started:hover { background: var(--gcs-green-dk); }
@media (max-width: 900px) {
  .nav__link--get-started { border-radius: 6px; padding: 0.5rem 1rem; }
}

/* ============================================================
   GUIDED DEMO MODAL
   ============================================================ */
.guided-demo-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10,18,10,0.82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.guided-demo-overlay.is-open {
  opacity: 1; pointer-events: auto;
}
.guided-demo-modal {
  background: #0f1c0a; color: #fff;
  border: 1px solid rgba(104,152,28,0.35);
  border-radius: 16px; width: 100%; max-width: 760px;
  max-height: 90vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65);
  position: relative;
}
.guided-demo-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1.5rem 1.5rem 0.75rem; gap: 1rem;
}
.guided-demo-modal__title {
  font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700;
  color: var(--gcs-green-lt); letter-spacing: 0.02em;
}
.guided-demo-modal__subtitle {
  font-size: 0.8125rem; color: rgba(255,255,255,0.55); margin-top: 0.2rem;
}
.guided-demo-modal__close {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7); border-radius: 50%; width: 2.25rem; height: 2.25rem;
  font-size: 1.125rem; line-height: 1; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, color 0.15s; display: flex; align-items: center; justify-content: center;
}
.guided-demo-modal__close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.guided-demo-modal__close:focus-visible { outline: 2px solid var(--gcs-green-lt); outline-offset: 2px; }
/* Progress bar */
.guided-demo-progress {
  padding: 0 1.5rem 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.guided-demo-progress__track {
  flex: 1; height: 4px; background: rgba(255,255,255,0.12); border-radius: 999px; overflow: hidden;
}
.guided-demo-progress__fill {
  height: 100%; background: var(--gcs-green); border-radius: 999px;
  transition: width 0.3s ease;
}
.guided-demo-progress__label {
  font-size: 0.75rem; color: rgba(255,255,255,0.45); white-space: nowrap;
}
/* Step dots */
.guided-demo-dots {
  display: flex; gap: 0.375rem; justify-content: center; padding: 0 1.5rem 0.5rem;
}
.guided-demo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.18); transition: background 0.2s;
}
.guided-demo-dot.is-active { background: var(--gcs-green); }
/* Step panel */
.guided-demo-step {
  display: none; padding: 0 1.5rem;
}
.guided-demo-step.is-active { display: block; }
.guided-demo-step__eyebrow {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gcs-green-lt);
  background: rgba(104,152,28,0.14); border: 1px solid rgba(104,152,28,0.25);
  display: inline-block; padding: 0.2rem 0.75rem; border-radius: 999px; margin-bottom: 0.75rem;
}
.guided-demo-step__heading {
  font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700;
  color: #fff; margin-bottom: 0.625rem; line-height: 1.25;
}
.guided-demo-step__caption {
  font-size: 0.9375rem; color: rgba(255,255,255,0.75); line-height: 1.65;
  margin-bottom: 1.25rem;
}
/* Step visual panel */
.guided-demo-visual {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px; padding: 1.25rem; margin-bottom: 1.25rem;
  min-height: 160px; display: flex; flex-direction: column; gap: 0.75rem;
}
.guided-demo-kpi-row {
  display: flex; flex-wrap: wrap; gap: 0.625rem;
}
.guided-demo-kpi {
  flex: 1; min-width: 120px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; padding: 0.75rem;
}
.guided-demo-kpi__lbl {
  font-size: 0.6875rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.07em;
}
.guided-demo-kpi__val {
  font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; color: #fff;
}
.guided-demo-kpi__delta {
  font-size: 0.75rem; color: var(--gcs-green-lt);
}
.guided-demo-item-row {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.guided-demo-item {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.04); border-radius: 6px; font-size: 0.875rem; color: rgba(255,255,255,0.8);
}
.guided-demo-item__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--gcs-green);
}
.guided-demo-item__dot--warn { background: #e8a020; }
.guided-demo-item__dot--red  { background: #d43c3c; }
.guided-demo-dept-pills {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem;
}
.guided-demo-dept-pill {
  padding: 0.3rem 0.875rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8);
}
.guided-demo-dept-pill.is-selected {
  background: var(--gcs-green); color: #fff; border-color: var(--gcs-green-dk);
  box-shadow: 0 2px 8px rgba(104,152,28,0.35);
}
.guided-demo-ask-bar {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; padding: 0.875rem 1rem; font-size: 0.9375rem; color: rgba(255,255,255,0.7);
  font-style: italic;
}
.guided-demo-answer {
  background: rgba(104,152,28,0.10); border: 1px solid rgba(104,152,28,0.25);
  border-radius: 8px; padding: 0.875rem 1rem; font-size: 0.875rem; color: rgba(255,255,255,0.85);
  line-height: 1.6;
}
.guided-demo-action-list {
  list-style: none; display: flex; flex-direction: column; gap: 0.5rem;
}
.guided-demo-action-list li {
  display: flex; align-items: center; gap: 0.625rem;
  font-size: 0.9rem; color: rgba(255,255,255,0.8);
}
.guided-demo-action-list li::before {
  content: '✓'; color: var(--gcs-green-lt); font-weight: 700; flex-shrink: 0;
}
/* Footer controls */
.guided-demo-modal__footer {
  padding: 1rem 1.5rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.07); margin-top: 0.5rem;
}
.guided-demo-modal__disclosure {
  font-size: 0.6875rem; color: rgba(255,255,255,0.35); flex: 1;
}
.guided-demo-nav {
  display: flex; gap: 0.5rem; align-items: center;
}
.guided-demo-nav-btn {
  padding: 0.5rem 1.125rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff;
}
.guided-demo-nav-btn:hover { background: rgba(255,255,255,0.15); }
.guided-demo-nav-btn:focus-visible { outline: 2px solid var(--gcs-green-lt); outline-offset: 2px; }
.guided-demo-nav-btn--primary {
  background: var(--gcs-green); border-color: var(--gcs-green-dk); color: #fff;
}
.guided-demo-nav-btn--primary:hover { background: var(--gcs-green-dk); }
.guided-demo-cta-row {
  display: none; width: 100%; padding: 0 1.5rem 1rem; text-align: center;
}
.guided-demo-cta-row.is-visible { display: block; }
.guided-demo-cta-row a {
  display: inline-block; background: var(--gcs-green); color: #fff;
  font-weight: 700; font-size: 1rem; padding: 0.875rem 2rem; border-radius: 8px;
  text-decoration: none; transition: background 0.15s;
}
.guided-demo-cta-row a:hover { background: var(--gcs-green-dk); }
@media (max-width: 600px) {
  .guided-demo-modal { max-height: 95vh; }
  .guided-demo-modal__header, .guided-demo-progress,
  .guided-demo-step, .guided-demo-modal__footer { padding-left: 1rem; padding-right: 1rem; }
  .guided-demo-dots { padding-left: 1rem; }
  .guided-demo-cta-row { padding-left: 1rem; padding-right: 1rem; }
  .guided-demo-step__heading { font-size: 1.125rem; }
  .guided-demo-kpi { min-width: 90px; }
}