/* =========================================================
   KILOBOTS — Core Stylesheet
   Sister site to STEMWISE. Same system, blue-dominant balance.
   ========================================================= */

:root {
  /* Brand color — same family as STEMWISE for sister-site cohesion,
     but blue carries far more visual weight here than on STEMWISE. */
  --red: #B92025;
  --red-dark: #921A1E;
  --red-light: #D93A3F;
  --navy: #131B2E;
  --navy-2: #1B2540;
  --navy-soft: #2A344E;
  --charcoal: #2C2F36;
  --steel: #58595C;
  --steel-light: #97999D;

  /* Neutrals — a light blue-gray instead of a neutral gray, so even the
     "light" sections carry a cool undertone that reads as part of the
     blue system rather than plain STEMWISE neutral gray. */
  --white: #FFFFFF;
  --gray-50: #E6EAF2;
  --gray-100: #EAEEF5;
  --gray-200: #D6DCE8;
  --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.25rem;
  --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;
}

/* ---------- Blueprint grid texture (fine graph-paper line grid — a second,
   distinct texture from the dot pattern above, used on dark sections to
   echo a technical-drawing feel without repeating the same motif) ---------- */
.texture-grid { position: relative; }
.texture-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.texture-grid > .container { position: relative; z-index: 1; }

/* ---------- Blueprint watermark (one of the recolored CAD drawings, used
   as a moody low-opacity background texture rather than a foreground photo
   — set --blueprint-watermark inline per-section to vary which drawing
   shows through) ---------- */
.texture-blueprint { position: relative; overflow: hidden; }
.texture-blueprint::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--blueprint-watermark, url("../images/kilobots-blueprint-underside.jpg"));
  background-size: cover;
  background-position: center;
  opacity: var(--blueprint-watermark-opacity, 0.14);
  pointer-events: none;
}
.texture-blueprint > .container { position: relative; z-index: 1; }

/* Side variant: the drawing sits off to one edge and fades into the
   background instead of washing the whole section — used where the
   graphic should read as an accent, not a backdrop. */
.texture-blueprint-side::after {
  background-position: right -8% center;
  background-size: 58% auto;
  -webkit-mask-image: linear-gradient(to left, black 0%, transparent 65%);
          mask-image: linear-gradient(to left, black 0%, transparent 65%);
}
@media (max-width: 760px) {
  .texture-blueprint-side::after { background-position: center 10%; background-size: 120% auto; opacity: 0.08; }
}

/* ---------- 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(--steel);
}
/* Any in-page anchor target (e.g. judging.html#engineering, resources.html#qa)
   should land below the sticky header instead of underneath it. */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.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; }
.nav-cta-group { display: flex; align-items: center; gap: 28px; }
.btn-header { padding: 11px 22px; }
@media (max-width: 600px) {
  .btn-header { padding: 9px 14px; font-size: 0.72rem; }
}
.brand-logo { height: 46px; width: auto; display: block; }
.brand-logo-icon { display: none; height: 34px; width: auto; }
/* Collapsed header (mobile/tablet, same breakpoint as the nav toggle):
   keep the full wordmark visible on all breakpoints. */
@media (max-width: 900px) {
  .brand-logo-full { display: block; height: 34px; }
  .brand-logo-icon { display: none; }
}
.nav-list { display: flex; align-items: center; gap: 32px; }
.nav-register-item { display: none; }
.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-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; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .nav-list a:hover { color: var(--red-light); }
  .nav-list a[aria-current="page"] { color: var(--white); }

  /* Register button pinned to the top of the opened mobile menu, replacing
     the header-bar Register button (hidden below) at this breakpoint. */
  .nav-register-item { display: block; padding: 4px 8px 18px; }
  .nav-register-item a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 26px;
    border: none;
    border-bottom: none;
    background: var(--red);
    color: var(--white);
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .nav-register-item a:hover { background: var(--red-dark); color: var(--white); }

  /* Hamburger moves to the far right of the header bar; the header-bar
     Register button is hidden in favor of the one inside the opened menu. */
  .nav-toggle { order: 3; }
  .nav-cta-group { order: 2; }
  .nav-cta-group > .btn-header { display: none; }
}

/* ---------- 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 any dark
   background — hero or a regular dark section. */
.hero-dark .btn-outline, .hero-graydark .btn-outline, .section-dark .btn-outline {
  border-color: rgba(255,255,255,0.7);
  color: var(--white);
}
.hero-dark .btn-outline:hover, .hero-graydark .btn-outline:hover, .section-dark .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);
}
.section-black .photo-placeholder.has-photo {
  background: #000;
}
.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: 40px 0; }
.section-tight { padding: 28px 0; }
.section-alt { background: var(--white); }
.section-dark { background: var(--navy); color: var(--white); }
/* Black section: same text-contrast behavior as .section-dark (all overrides
   above are shared), but a pure black backdrop instead of navy — used
   sparingly to break up long stretches of blue sections. */
.section-black { background: #0A0A0C; color: var(--white); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-black h2, .section-black h3, .section-black h4 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.78); }
.section-black p { color: rgba(255,255,255,0.78); }
/* Cards with their own light background (badge-card, plain .card) keep
   normal dark text even when nested inside a dark section — only the
   section's direct text (headings, intro paragraphs, borderless
   belief-cards) should flip to white. */
.section-dark .badge-card h3,
.section-black .badge-card h3,
.section-dark .card h2,
.section-black .card h2,
.section-dark .card h3,
.section-black .card h3,
.section-dark .card h4,
.section-black .card h4 {
  color: var(--navy);
}
.section-dark .badge-card p,
.section-black .badge-card p,
.section-dark .card p,
.section-black .card p {
  color: var(--ink-soft);
}

/* Charcoal section: a third dark tone (alongside navy + black) so long
   stretches of sections can alternate black / blue / dark-grey instead of
   repeating the same backdrop. Same text-contrast behavior as the other
   two dark sections. */
.section-graydark { background: var(--charcoal); color: var(--white); }
.section-graydark h2, .section-graydark h3, .section-graydark h4 { color: var(--white); }
.section-graydark p { color: rgba(255,255,255,0.78); }
.section-graydark .badge-card h3,
.section-graydark .card h2,
.section-graydark .card h3,
.section-graydark .card h4 { color: var(--navy); }
.section-graydark .badge-card p,
.section-graydark .card p { color: var(--ink-soft); }
.section-graydark .photo-placeholder.has-photo { background: var(--charcoal); }
.section-graydark .belief-card h4 { color: var(--white); }
.section-graydark .belief-card:nth-child(even) { border-top-color: rgba(255,255,255,0.55); }
.section-graydark .belief-card:nth-child(even) .belief-icon { background: var(--white); color: var(--navy); }
.section-graydark .skill-group:nth-child(even) { border-top-color: rgba(255,255,255,0.55); }
.section-graydark .form-group label { color: var(--white); }
.section-graydark .form-note { color: rgba(255,255,255,0.65); }
.section-graydark .btn-outline { border-color: rgba(255,255,255,0.7); color: var(--white); }
.section-graydark .btn-outline:hover { background: var(--white); color: var(--ink); }

.section-head { max-width: 62ch; margin-bottom: 22px; }
.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: 44px 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: 134px; margin: 0 0 14px; overflow: hidden; }
.badge-card .badge-media .photo-placeholder {
  position: absolute; inset: 0;
  min-height: 0;
  border-radius: 0;
}
.badge-card .badge-body { padding: 0 22px 22px; }
.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: 26px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 180ms var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); }
.card .photo-placeholder { margin: -26px -26px 18px; 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: 16px; }

/* Wraps an embedded third-party form (e.g. Cognito Forms) so it reads as a
   themed panel instead of a stray white box dropped on a dark section. A
   thin white frame, then a navy reveal, before the form's own dark theme. */
.form-embed-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 11px;
}
.form-embed-inner {
  background: var(--navy);
  border-radius: calc(var(--radius-lg) - 4px);
  padding: 24px;
}
.form-embed-card iframe { width: 100% !important; border: none; }
@media (max-width: 620px) {
  .form-embed-card { padding: 7px; }
  .form-embed-inner { padding: 16px; }
}

/* 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: 20px 26px 26px; 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); }
.section-dark .belief-card h4 { color: var(--white); }
.section-black .belief-card h4 { color: var(--white); }
.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); }
/* On a dark section, a navy border/icon on a navy background disappears —
   swap the "even" treatment to white so the alternating rhythm still reads. */
.section-dark .belief-card:nth-child(even) { border-top-color: rgba(255,255,255,0.55); }
.section-black .belief-card:nth-child(even) { border-top-color: rgba(255,255,255,0.55); }
.section-dark .belief-card:nth-child(even) .belief-icon { background: var(--white); color: var(--navy); }
.section-black .belief-card:nth-child(even) .belief-icon { background: var(--white); color: var(--navy); }

/* ---------- Process flow ---------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; }
.flow.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .flow.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flow.cols-3 { grid-template-columns: 1fr; } }
.stat-number { font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; color: var(--red); line-height: 1; margin-bottom: 10px; }
.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: 30px; height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 0.85rem;
}
.flow-connector svg { width: 15px; height: 15px; }
.flow-step:nth-child(even) .flow-connector { background: var(--white); color: var(--navy); }
.section-dark .flow-step, .section-black .flow-step { color: rgba(255,255,255,0.78); }
.section-dark .flow-step-head h4, .section-black .flow-step-head h4,
.section-graydark .flow-step-head h4 { color: var(--white); }
@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); }
.section-dark .skill-group:nth-child(even) { border-top-color: rgba(255,255,255,0.55); }
.section-black .skill-group:nth-child(even) { border-top-color: rgba(255,255,255,0.55); }
.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); }

/* Skill group as a link to the full Judging breakdown (homepage quick-overview
   cards that route through to judging.html#engineering / #marketing) */
a.skill-group-link { display: block; text-decoration: none; }
.skill-group-desc { color: rgba(255,255,255,0.75); font-size: var(--fs-sm); margin-bottom: 14px; }
.skill-group-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--red-light);
}
.skill-group-cta svg { width: 16px; height: 16px; transition: transform 160ms var(--ease); }
a.skill-group-link:hover .skill-group-cta svg { transform: translateX(4px); }
a.skill-group-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ---------- CTA band (red, dotted, paper-plane) ---------- */
.cta-band {
  position: relative;
  background: var(--red);
  color: var(--white);
  overflow: hidden;
  padding: 30px 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: #0A0A0C;
  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(--steel);
  color: rgba(255,255,255,0.75);
  position: relative;
  overflow: hidden;
  padding: 26px 0 14px;
  border-top: 3px solid var(--red);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 22px;
  position: relative;
  z-index: 1;
}
.footer-brand .brand-logo { height: 32px; margin-bottom: 10px; }
.footer-brand p { max-width: 30ch; color: rgba(255,255,255,0.7); }
.footer-stemwise-badge { display: flex; align-items: center; gap: 8px; margin-top: 12px; text-decoration: none; transition: opacity 150ms var(--ease); }
a.footer-stemwise-badge:hover { opacity: 0.8; }
.footer-stemwise-text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
}
.footer-stemwise-logo { height: 18px; width: auto; }
.footer-col h4 {
  color: var(--red-light);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.footer-col ul li { margin-bottom: 7px; }
.footer-col a { color: rgba(255,255,255,0.75); 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.75); }
.footer-contact svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--red-light); }
.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%;
  color: var(--white);
}
.footer-social a:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }
.footer-bottom {
  margin-top: 16px;
  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 14px;
  background: rgba(255,255,255,0.18);
}
/* Tucked in the bottom-right corner, clear of the side edge and sitting
   low enough that it never crosses into the copyright line above it. */
.footer-watermark {
  position: absolute;
  right: 32px;
  bottom: 18px;
  top: auto;
  width: 180px;
  max-width: 16%;
  opacity: 0.12;
  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 { display: none; }
}

/* ---------- 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); }
.section-dark .form-group label, .section-black .form-group label { color: var(--white); }
.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; }
.section-dark .form-note { color: rgba(255,255,255,0.65); }
.section-black .form-note { color: rgba(255,255,255,0.65); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
/* A form living inside a white card (e.g. the Resources Q&A submit form)
   keeps dark labels regardless of the dark section it's nested in. */
.qa-panel .form-group label { color: var(--navy); }
.qa-panel .form-note { color: var(--ink-soft); }

/* ---------- 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: 36px; 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);
}

/* =========================================================
   Interaction layer: hover states only — no ambient or
   scroll-triggered motion, by design.
   ========================================================= */

/* Card hover: a small, quiet lift — feedback on interaction, not ambient motion */
.badge-card, .card, .belief-card, .skill-group {
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.badge-card:hover, .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.belief-card:hover { transform: translateX(3px); }

.btn-primary { transition: background-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 220ms var(--ease); }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(185,32,37,0.30); }

/* .hero-bg-dots and hero photos are intentionally static now — no ambient
   drift. Motion is spent in one place: the hero-epic background below. */

/* Big repeating background text — an NHRL-style decorative backdrop, used
   sparingly behind a CTA band for graphic weight. Kept static (no scroll
   loop) so it reads as a bold texture rather than as motion. Text is
   outlined only (transparent fill) so it never competes with real content
   in front of it. */
.epic-band { position: relative; overflow: hidden; }
.epic-band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  white-space: nowrap;
}
.epic-band-bg span {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 5.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.14);
}
.epic-band > .container { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .epic-band-bg span { font-size: 3rem; }
}

/* ---------- Hero media-top: full-bleed video banner, text below it ------
   The video is the focal point and is shown at full strength — no scrim,
   no text overlaid on it, no ambient motion (static frame; only real
   change over time is the video itself playing). Headline copy sits in
   its own band directly underneath so it never competes with the footage. */
.hero-media-top { background: var(--navy); }
.hero-media-banner {
  position: relative;
  overflow: hidden;
  height: 62vh;
  min-height: 420px;
  max-height: 640px;
}
.hero-epic-fallback,
.hero-epic-video,
.hero-media-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-epic-fallback { z-index: 0; }
.hero-epic-video { z-index: 1; }
.hero-media-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 18%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(19,27,46,0) 0%, var(--navy) 100%);
  pointer-events: none;
}
.hero-text-band { padding: 44px 24px 52px; }
.hero-text-band .lead { max-width: 50ch; margin-bottom: 24px; }
.hero-text-band h1 { margin-bottom: 14px; margin-top: 10px; }
.hero-text-band h1, .hero-text-band h2, .hero-text-band h3 { color: var(--white); }
.hero-text-band p { color: rgba(255,255,255,0.82); }
@media (max-width: 640px) {
  .hero-media-banner { height: 46vh; min-height: 300px; }
  .hero-text-band { padding: 34px 24px 40px; }
}

/* ---------- Nav dropdown (Competition: Event Details / Judging / Highlights) */
.has-dropdown { position: relative; }
.dropdown-trigger { display: inline-flex !important; align-items: center; gap: 5px; }
.dropdown-caret { width: 11px; height: 11px; transition: transform 160ms var(--ease); }
.dropdown-menu {
  list-style: none;
  margin: 0;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  background: var(--navy-2);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
  z-index: 600;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.has-dropdown:hover .dropdown-caret,
.has-dropdown:focus-within .dropdown-caret,
.has-dropdown.is-open .dropdown-caret { transform: rotate(180deg); }
.dropdown-menu a {
  display: block !important;
  padding: 10px 14px !important;
  font-size: 0.82rem;
  border-radius: calc(var(--radius) - 2px);
  white-space: nowrap;
}
.dropdown-menu a:hover { background: rgba(255,255,255,0.08); }
@media (max-width: 900px) {
  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(255,255,255,0.04);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 220ms var(--ease);
    border-radius: var(--radius);
  }
  .has-dropdown.is-open .dropdown-menu { max-height: 260px; padding: 6px 0 10px 14px; }
  .dropdown-trigger { justify-content: space-between; width: 100%; }
}

/* ---------- Process wheel (homepage "What Is Kilobots?" cycle graphic) --- */
.process-wheel { position: relative; width: 100%; max-width: 600px; margin: 40px auto 0; aspect-ratio: 1 / 1; }
.process-wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel-ring { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 2; stroke-dasharray: 3 11; stroke-linecap: round; }
.wheel-arrow { fill: rgba(255,255,255,0.4); }
.wheel-node circle { stroke: var(--charcoal); stroke-width: 6; }
.wheel-node-red circle { fill: var(--red); }
.wheel-node-navy circle { fill: var(--white); }
.wheel-node text { font-family: var(--font-head); font-weight: 800; font-size: 26px; }
.wheel-node-red text { fill: var(--white); }
.wheel-node-navy text { fill: var(--navy); }
.wheel-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; width: 168px; pointer-events: none;
}
.wheel-center-label {
  font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 0.85rem; color: var(--white); line-height: 1.35;
}
.wheel-label { position: absolute; transform: translate(-50%, -50%); width: 152px; text-align: center; }
.wheel-label h4 { color: var(--white); font-size: 0.92rem; margin-bottom: 4px; }
.wheel-label p { color: rgba(255,255,255,0.7); font-size: 0.76rem; line-height: 1.4; margin-bottom: 0; }
.process-list { display: none; }
@media (max-width: 760px) {
  .process-wheel { display: none; }
  .process-list { display: grid; gap: 12px; margin-top: 8px; }
}

/* ---------- Standalone hero (no photo/video) — used on every secondary-
   page hero so the page opens on background, texture, and typography
   alone instead of a photo banner. Pairs with .hero-dark / .hero-graydark
   for the base color and .texture-grid / .texture-blueprint for the
   pattern; sized generously so it still reads as a full hero, not a
   thin title bar. */
.hero-standalone { padding: 108px 24px 92px; }
.hero-standalone .container { max-width: 760px; }
.hero-standalone .eyebrow-tag { display: inline-block; margin-bottom: 16px; }
.hero-standalone h1 { margin-bottom: 16px; }
.hero-standalone .lead { font-size: var(--fs-md); max-width: 54ch; margin-bottom: 0; }
@media (max-width: 640px) {
  .hero-standalone { padding: 72px 24px 60px; }
}

/* ---------- Resource category cards (Resources page) ---------------------
   Four clickable cards standing in for a plain link list, each with its
   own icon color and a short "what's inside" line. */
.resource-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .resource-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .resource-card-grid { grid-template-columns: 1fr; } }
.resource-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
  position: relative;
  overflow: hidden;
}
.resource-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.35); }
.resource-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red);
}
.resource-card-icon svg { width: 24px; height: 24px; color: var(--white); }
.resource-card:nth-child(2) .resource-card-icon,
.resource-card:nth-child(4) .resource-card-icon { background: var(--navy); }
.resource-card h3 { color: var(--white); font-size: 1.1rem; margin-bottom: 0; }
.resource-card p { color: rgba(255,255,255,0.72); font-size: var(--fs-sm); margin-bottom: 0; }
.resource-card-cta {
  margin-top: auto;
  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(--red-light);
}
.resource-card-cta svg { width: 14px; height: 14px; transition: transform 160ms var(--ease); }
.resource-card:hover .resource-card-cta svg { transform: translateX(4px); }
.resource-card.tone-a { background: var(--navy-2); border: 1.5px solid rgba(255,255,255,0.08); }
.resource-card.tone-b { background: #171B22; border: 1.5px solid rgba(255,255,255,0.08); }

/* ---------- Official Q&A section (Resources page) ------------------------ */
.qa-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-md, 0 20px 40px rgba(0,0,0,0.2));
}
.qa-item { padding: 18px 0; border-bottom: 1px solid var(--gray-200); }
.qa-item:last-child { border-bottom: none; padding-bottom: 0; }
.qa-item:first-child { padding-top: 0; }
.qa-q { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-head); font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.qa-q span.qa-tag { flex: none; background: var(--red); color: var(--white); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; margin-top: 2px; }
.qa-a { color: var(--ink-soft); padding-left: 60px; }
@media (max-width: 560px) { .qa-a { padding-left: 0; } .qa-panel { padding: 24px; } }

/* ---------- Volunteer role cards (Volunteering page) ---------------------- */
.role-card {
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border-top: 4px solid var(--red);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}
.role-card:nth-child(even) { border-top-color: var(--navy); }
.role-card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-50); color: var(--red); margin-bottom: 16px;
}
.role-card:nth-child(even) .role-card-icon { color: var(--navy); }
.role-card-icon svg { width: 22px; height: 22px; }
.role-card h3 { margin-bottom: 8px; color: var(--navy); }
.role-card p { color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Judging category breakdown (Judging page) --------------------- */
.judge-category { padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.judge-category:last-of-type { border-bottom: none; }
.judge-sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
@media (max-width: 900px) { .judge-sub-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .judge-sub-grid { grid-template-columns: 1fr; } }
.judge-sub-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.judge-sub-card h4 { color: var(--white); margin-bottom: 8px; }
.judge-sub-card p { color: rgba(255,255,255,0.7); font-size: var(--fs-sm); margin-bottom: 0; }
.judge-sub-card .judge-looking-for {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.15);
  font-size: 0.78rem; color: var(--red-light); font-weight: 600;
}