/* =========================================================
   STEMwise — Core Stylesheet (v2: bold / graphic / diagonal)
   ========================================================= */

:root {
  /* Brand color */
  --red: #B92025;
  --red-dark: #921A1E;
  --red-light: #D93A3F;
  --navy: #131B2E;
  --navy-2: #1B2540;
  --navy-soft: #2A344E;
  --charcoal: #2C2F36;

  /* Neutrals */
  --white: #FFFFFF;
  --gray-50: #E7E9ED;
  --gray-100: #ECEEF2;
  --gray-200: #DCDFE6;
  --ink: #16192B;
  --ink-soft: #565C6E;

  /* Type */
  --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2.125rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.25rem;

  /* Layout */
  --container: 1240px;
  --gap: 1.5rem;
  --radius: 5px;
  --radius-lg: 8px;
  --header-h: 92px;

  --shadow-sm: 0 1px 3px rgba(19, 27, 46, 0.10);
  --shadow-md: 0 10px 30px rgba(19, 27, 46, 0.16);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.14;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-3xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); font-weight: 800; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
h4 { font-size: var(--fs-md); font-weight: 700; }
p { margin: 0 0 1em; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }
button { font-family: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Display / all-caps headline treatment (used deliberately for hero + big statements) */
.h-display {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.text-accent { color: var(--red); }
.kilobots-logo-hero { height: 76px; width: auto; display: block; }

@media (max-width: 640px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.7rem; }
  :root { --fs-3xl: 2.1rem; --fs-2xl: 1.7rem; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Dot-grid texture (used behind diagonal panels + CTA bands) ---------- */
.dot-texture { position: relative; }
.dot-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.16;
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease), color 160ms var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; }

.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-dark); }

.btn-secondary { background: var(--navy); color: var(--white); }
.btn-secondary:hover { background: var(--navy-2); }

.btn-outline { background: transparent; border-color: var(--red); color: var(--red); }
.btn-outline:hover { background: var(--red); color: var(--white); }

.btn-outline-navy { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }

.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.6); color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--red); border-color: var(--white); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--navy);
}
.site-header .container {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: flex; align-items: center; gap: 24px; }
.brand-logo { height: 46px; width: auto; display: block; }
.nav-divider { width: 1px; height: 32px; background: var(--red); flex: none; }
.nav-list { display: flex; align-items: center; gap: 32px; }
.nav-list a {
  display: inline-block;
  padding: 10px 12px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  border-radius: var(--radius);
  position: relative;
  transition: color 150ms var(--ease);
}
.nav-list a:hover { color: var(--red-light); }
.nav-list a[aria-current="page"] { color: var(--white); }
.nav-list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  background: var(--red);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--white);
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 900px) {
  .nav-divider { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-list {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--navy);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 32px;
    gap: 2px;
    transform: translateX(100%);
    transition: transform 220ms var(--ease);
    overflow-y: auto;
  }
  .nav-list.is-open { transform: translateX(0); }
  .nav-list a { padding: 16px 8px; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
}

/* ---------- Hero (diagonal split, full-bleed to viewport edge) ---------- */
.hero {
  position: relative;
  background: var(--gray-50);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  height: 500px;
  position: relative;
  z-index: 1;
}
/* hero-copy's left edge lines up with the same 1240px container used
   everywhere else; its right edge stays fixed so the photo can bleed
   all the way to the true viewport edge with no padding stopping it.
   Content is vertically centered via flex so copy length can vary
   page to page without changing the section's overall height. */
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 24px 40px 24px max(24px, calc((100vw - 1240px) / 2));
  position: relative;
  z-index: 2;
}
.hero-copy .lead { font-size: var(--fs-md); max-width: 46ch; margin-bottom: 22px; }
.hero-copy h1 { margin-bottom: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero media: fills the fixed-height row exactly, top to bottom, on every
   page. The accent color sits on a backdrop layer directly behind the photo;
   both layers share the exact same clip-path slant, offset by a constant
   pixel amount, so the red sliver always lines up with the photo's edge. */
.hero-media {
  position: relative;
  height: 100%;
}
.hero-media-accent {
  position: absolute;
  inset: 0;
  background: var(--red);
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-media .photo-placeholder {
  position: absolute;
  inset: 0;
  min-height: 0;
  clip-path: polygon(calc(9% + 12px) 0, 100% 0, 100% 100%, 12px 100%);
  border-radius: 0;
}
.hero-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--gray-200) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(to right, black, transparent 70%);
          mask-image: linear-gradient(to right, black, transparent 70%);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; height: auto; }
  .hero-copy { padding: 32px 24px 28px; height: auto; }
  .hero-media { height: auto; aspect-ratio: 19 / 10; order: -1; }
  .hero-media-accent { display: none; }
  .hero-media .photo-placeholder { clip-path: none; }
}

.hero-dark { background: var(--navy); }
.hero-dark h1, .hero-dark h2, .hero-dark h3 { color: var(--white); }
.hero-dark p { color: rgba(255,255,255,0.78); }
.hero-dark .hero-bg-dots { background-image: radial-gradient(rgba(255,255,255,0.18) 1.5px, transparent 1.5px); }

.hero-graydark { background: var(--charcoal); }
.hero-graydark h1, .hero-graydark h2, .hero-graydark h3 { color: var(--white); }
.hero-graydark p { color: rgba(255,255,255,0.78); }
.hero-graydark .hero-bg-dots { background-image: radial-gradient(rgba(255,255,255,0.18) 1.5px, transparent 1.5px); }
.hero-graydark .eyebrow-tag { color: var(--red-light); }
.hero-graydark .badge { background: var(--red); }

/* Outline buttons need light borders/text to stay legible on either dark hero */
.hero-dark .btn-outline, .hero-graydark .btn-outline {
  border-color: rgba(255,255,255,0.7);
  color: var(--white);
}
.hero-dark .btn-outline:hover, .hero-graydark .btn-outline:hover {
  background: var(--white);
  color: var(--ink);
}

/* ---------- Photo placeholders (swap-ready) ---------- */
.photo-placeholder {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 60%, var(--navy) 100%);
  display: flex;
  align-items: flex-end;
  min-height: 200px;
}
.photo-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,0.5) 26px 28px);
}
.photo-placeholder .ph-label {
  position: relative;
  z-index: 1;
  margin: 16px;
  padding: 7px 12px;
  border-radius: var(--radius);
  background: rgba(19,27,46,0.6);
  color: var(--white);
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  font-weight: 500;
}
.photo-placeholder.has-photo { background: var(--gray-200); align-items: stretch; }
/* On dark sections, the has-photo fallback color needs to match the dark
   backdrop instead of the light default — otherwise any sub-pixel rounding
   gap at the image's edge reveals a light sliver against the dark section. */
.section-dark .photo-placeholder.has-photo,
.hero-dark .photo-placeholder.has-photo,
.hero-graydark .photo-placeholder.has-photo {
  background: var(--navy);
}
.photo-placeholder.has-photo::before { display: none; }
.photo-placeholder.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-placeholder.has-photo.face-top img { object-position: center 15%; }
.photo-placeholder.tone-red { background: linear-gradient(135deg, var(--red) 0%, #6E1417 100%); }
.photo-placeholder.tone-gray { background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 100%); }
.photo-placeholder.tone-gray .ph-label { background: rgba(19,27,46,0.65); }
.photo-placeholder.square { aspect-ratio: 1/1; }
.photo-placeholder.wide { aspect-ratio: 16/9; }
.photo-placeholder.portrait { aspect-ratio: 3/4; }

/* ---------- Sections ---------- */
.section { padding: 48px 0; }
.section-tight { padding: 28px 0; }
.section-alt { background: var(--gray-50); }
.section-dark { background: var(--navy); color: var(--white); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.78); }
.section-head { max-width: 62ch; margin-bottom: 28px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p.lead { font-size: var(--fs-md); }
.eyebrow-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--red);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

@media (max-width: 640px) { .section { padding: 52px 0; } }

/* ---------- Icon feature strip (4-up, under hero) ---------- */
.icon-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 40px 0;
}
.icon-strip-item { display: flex; gap: 14px; align-items: flex-start; }
.icon-strip-item + .icon-strip-item { border-left: 1px solid var(--gray-200); padding-left: 32px; }
.icon-strip-item .icon-circle {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--red);
  color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.icon-strip-item .icon-circle svg { width: 20px; height: 20px; }
.icon-strip-item .istrip-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.icon-strip-item p { font-size: var(--fs-sm); }
/* Alternate red/navy for visual rhythm across the four call-outs */
.icon-strip-item:nth-child(even) .icon-circle { border-color: var(--navy); color: var(--navy); }
.icon-strip-item:nth-child(even) .istrip-label { color: var(--navy); }

@media (max-width: 900px) {
  .icon-strip { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .icon-strip-item + .icon-strip-item { border-left: none; padding-left: 0; }
  .icon-strip-item:nth-child(2n) { border-left: 1px solid var(--gray-200); padding-left: 28px; }
}
@media (max-width: 560px) {
  .icon-strip { grid-template-columns: 1fr; }
  .icon-strip-item:nth-child(2n) { border-left: none; padding-left: 0; }
}

/* ---------- Badge cards (icon badge overlapping a split text/photo card) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: 1fr; }
}

.badge-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding-top: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms var(--ease);
}
.badge-card:hover { box-shadow: var(--shadow-md); }
.badge-card .badge-icon {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.badge-card .badge-icon svg { width: 22px; height: 22px; }

/* Standalone icon chip for plain .card usage (not dependent on .badge-card ancestor) */
.icon-chip {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  background: var(--navy);
  color: var(--white);
}
.icon-chip svg { width: 22px; height: 22px; }
.icon-chip.chip-red { background: var(--red); }
/* Alternate navy/red badges so the four cards don't read as identical */
.badge-card:nth-child(even) .badge-icon { background: var(--red); }
.badge-card .badge-media { position: relative; height: 150px; margin: 0 0 18px; overflow: hidden; }
.badge-card .badge-media .photo-placeholder {
  position: absolute; inset: 0;
  min-height: 0;
  border-radius: 0;
}
.badge-card .badge-body { padding: 0 24px 26px; }
.badge-card h3 { margin-bottom: 8px; font-size: var(--fs-md); }
.badge-card h3 .accent-line { display: block; color: var(--red); }
.badge-card p { margin-bottom: 18px; font-size: var(--fs-sm); }

/* Plain content cards (used on inner pages: beliefs, resource grid, etc.) */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 180ms var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); }
.card .photo-placeholder { margin: -30px -30px 20px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card h3 { margin-bottom: 10px; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card p { margin-bottom: 18px; }

/* Cards with a photo: negative-margin bleed doesn't reliably stretch to the
   true edge inside a flex column (the browser stretches to the content box,
   not the padded box), so photo cards instead drop the container's own
   padding and move it onto an inner .card-body wrapper. The photo itself
   then has nothing to bleed through and sits flush with all four edges. */
.card.card-photo { padding: 0; overflow: hidden; }
.card.card-photo .photo-placeholder { margin: 0; min-height: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card.card-photo .card-body { padding: 24px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.card.card-photo .card-body .btn { margin-top: auto; align-self: flex-start; }

.belief-card {
  padding: 24px 0 0;
  border-top: 3px solid var(--gray-200);
}
.belief-card h4 { color: var(--navy); }
.belief-card .belief-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.belief-card .belief-icon svg { width: 19px; height: 19px; }
/* Alternating two-part rhythm: solid red, solid navy, repeating.
   Always filled (never mixes filled vs outline) so the pattern stays
   consistent even when a section wraps to a second row. */
.belief-card:nth-child(odd) { border-top-color: var(--red); }
.belief-card:nth-child(odd) .belief-icon { background: var(--red); color: var(--white); }
.belief-card:nth-child(even) { border-top-color: var(--navy); }
.belief-card:nth-child(even) .belief-icon { background: var(--navy); color: var(--white); }

/* ---------- Process flow ---------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; }
.flow-step { position: relative; padding-right: 20px; }
.flow-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.flow-step-head h4 { margin-bottom: 0; }
.flow-connector {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gray-50);
  color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.flow-connector svg { width: 15px; height: 15px; }
@media (max-width: 800px) {
  .flow { grid-template-columns: 1fr; gap: 28px; }
  .flow-step { padding-right: 0; padding-left: 24px; border-left: 2px solid var(--gray-200); }
  .flow-connector { display: none; }
}

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery-grid .photo-placeholder { min-height: 130px; }
.gallery-grid .span-2 { grid-column: span 2; }
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .span-2 { grid-column: span 2; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .span-2 { grid-column: span 1; }
}

/* ---------- Details / info strip ---------- */
.info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.info-item .info-k { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--red); margin-bottom: 6px; }
.info-item .info-v { color: var(--navy); font-weight: 700; font-family: var(--font-head); }
@media (max-width: 800px) { .info-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .info-strip { grid-template-columns: 1fr; } }

/* ---------- Skills grid (chips, grouped into categories) ---------- */
.skill-group {
  border-top: 4px solid var(--gray-200);
  padding-top: 20px;
}
.skill-group:nth-child(odd) { border-top-color: var(--red); }
.skill-group:nth-child(even) { border-top-color: var(--navy); }
.skill-group-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--navy);
  margin-bottom: 16px;
}
.skill-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-chip {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--navy);
  background: var(--white);
}
.skill-group:nth-child(odd) .skill-chip { border-color: rgba(185,32,37,0.35); }
.skill-group:nth-child(even) .skill-chip { border-color: rgba(42,52,78,0.3); }

/* ---------- CTA band (red, dotted, paper-plane) ---------- */
.cta-band {
  position: relative;
  background: var(--red);
  color: var(--white);
  overflow: hidden;
  padding: 36px 0;
}
.cta-band .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-band-copy { display: flex; align-items: flex-start; gap: 18px; }
.cta-band-copy .cta-icon {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
}
.cta-band-copy .cta-icon svg { width: 22px; height: 22px; }
.cta-band h2 { color: var(--white); font-size: var(--fs-lg); margin-bottom: 4px; }
.cta-band p { color: rgba(255,255,255,0.9); margin-bottom: 0; }
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.35) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to left, black, transparent 55%);
          mask-image: linear-gradient(to left, black, transparent 55%);
}
@media (max-width: 700px) {
  .cta-band .container { flex-direction: column; align-items: flex-start; }
}

.cta-full {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: 44px 0;
  text-align: center;
  overflow: hidden;
}
.cta-full .container { position: relative; z-index: 1; }
.cta-full h2 { color: var(--white); }
.cta-full p.lead { color: rgba(255,255,255,0.78); max-width: 56ch; margin: 0 auto 28px; font-size: var(--fs-md); }
.cta-full-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  position: relative;
  overflow: hidden;
  padding: 44px 0 20px;
  border-top: 3px solid var(--red);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 36px;
  position: relative;
  z-index: 1;
}
.footer-brand .brand-logo { height: 40px; margin-bottom: 18px; }
.footer-brand p { max-width: 30ch; color: rgba(255,255,255,0.7); }
.footer-col h4 {
  color: var(--red);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,0.78); transition: color 150ms var(--ease); }
.footer-col a:hover { color: var(--white); }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,0.78); }
.footer-contact svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--red); }
.footer-social { display: flex; gap: 12px; margin-top: 14px; }
.footer-social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50%;
}
.footer-social a:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.footer-bottom {
  margin-top: 32px;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.55);
  position: relative;
  z-index: 1;
  text-align: center;
}
.footer-bottom::before {
  content: "";
  display: block;
  width: 220px;
  height: 1px;
  margin: 0 auto 22px;
  background: rgba(255,255,255,0.12);
}
.footer-watermark {
  position: absolute;
  right: 48px;
  bottom: 24px;
  width: 220px;
  max-width: 20%;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-watermark { width: 130px; right: 20px; bottom: 16px; }
}

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); color: var(--navy); }
.form-group .req { color: var(--red); }
.form-group input, .form-group select, .form-group textarea {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 12px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(19,27,46,0.12);
}
.form-note { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 8px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(19,27,46,0.6);
  display: none; align-items: center; justify-content: center;
  padding: 20px; z-index: 1000;
}
.modal-overlay.is-open { display: flex; }
.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 460px; width: 100%;
  position: relative;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--red);
  animation: modal-in 200ms var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; cursor: pointer; color: var(--ink-soft); padding: 6px; }
.modal h3 { margin-bottom: 12px; }
.modal .btn { margin-top: 20px; }

/* ---------- Two column with media ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.speak-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.speak-photos .photo-placeholder { aspect-ratio: 3 / 4; min-height: 0; }
@media (max-width: 560px) {
  .speak-photos { grid-template-columns: 1fr; }
  .speak-photos .photo-placeholder { aspect-ratio: 4 / 3; }
}
.split.reverse .split-media { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse .split-media { order: -1; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.stat-line { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-xl); color: var(--navy); }
.divider { height: 1px; background: var(--gray-200); border: none; margin: 0; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--white); background: var(--red);
  padding: 6px 12px; border-radius: var(--radius);
}

/* ---------- Resource graphics (SVG icons with subtle hover motion) ---------- */
.resource-graphic {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resource-graphic svg { width: 56%; height: auto; max-width: 170px; overflow: visible; }

/* Robotics: antenna pulses, eyes blink */
.rb-antenna {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.4s var(--ease);
}
.card-photo:hover .rb-antenna { transform: scale(1.35); }
.rb-eyes {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s var(--ease);
}
.card-photo:hover .rb-eyes { transform: scaleY(0.15); }

/* 3D Printing: print head moves, new layer appears */
.tp-head { transition: transform 0.5s var(--ease); }
.card-photo:hover .tp-head { transform: translateY(16px); }
.tp-newlayer { transition: opacity 0.35s var(--ease) 0.3s; }
.card-photo:hover .tp-newlayer { opacity: 1; }

/* Space: planet and orbit ring rotate */
.sp-planet, .sp-ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.7s var(--ease);
}
.card-photo:hover .sp-planet { transform: rotate(18deg); }
.card-photo:hover .sp-ring { transform: rotate(-22deg); }

/* Agriculture: sprout grows */
.ag-sprout {
  transform-box: fill-box;
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
}
.card-photo:hover .ag-sprout { transform: scaleY(1.16); }

/* Manufacturing: arm lowers to the part, box slides down the line */
.mf-arm {
  transform-box: fill-box;
  transform-origin: top;
  transition: transform 0.5s var(--ease);
}
.card-photo:hover .mf-arm { transform: translateY(5px); }
.mf-box { transition: transform 0.5s var(--ease); }
.card-photo:hover .mf-box { transform: translateX(12px); }

/* Engineering: gears turn in opposite directions */
.eng-gear-big, .eng-gear-small {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.7s var(--ease);
}
.card-photo:hover .eng-gear-big { transform: rotate(32deg); }
.card-photo:hover .eng-gear-small { transform: rotate(-42deg); }

/* Facilitator photos: taller box so portrait selfies/photos aren't cropped tight */
.facilitator-photo { aspect-ratio: 3 / 4; }