/* ==========================================================================
   NAMIBIA ENGINEERING EXCELLENCE AWARDS
   style.css
   --------------------------------------------------------------------------
   Minimal by intent. The palette is unchanged — deep navy ground, benchmark
   brass for emphasis, oxidised patina as the quiet second accent — but the
   drawing-sheet apparatus (title blocks, revision codes, status stamps) has
   been removed from the public interface. Authority now comes from space,
   type and restraint rather than from decoration.

   01 Tokens · 02 Base · 03 Type · 04 Layout · 05 Buttons · 06 Nav
   07 Hero · 08 Cards · 09 Steps · 10 Partners · 11 Gallery · 12 Forms
   13 Footer · 14 Utilities
   ========================================================================== */

/* ------------------------------------------------------------ 01 TOKENS -- */
:root {
  --ink-900: #050d18;
  --ink-800: #0a1a2f;
  --ink-700: #10253d;

  --brass-400: #d9bc7a;
  --brass-500: #c8a253;
  --brass-600: #a8853c;

  --patina-400: #4fa69d;
  --patina-500: #2f7a72;
  --patina-600: #215b55;

  --paper-50: #f8f9fa;
  --paper-100: #eef1f3;
  --paper-200: #dfe4e8;
  --paper-300: #c9d1d8;

  --slate-600: #46586a;
  --slate-500: #647787;

  --bg: #ffffff;
  --bg-alt: var(--paper-100);
  --fg: var(--ink-800);
  --fg-muted: var(--slate-600);
  --rule: rgba(10, 26, 47, 0.12);
  --rule-strong: rgba(10, 26, 47, 0.26);

  --font-display: "Bodoni Moda", Didot, "Bodoni MT", Georgia, serif;
  --font-sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", SFMono-Regular, Consolas, monospace;

  --t-hero: clamp(2.6rem, 7vw, 5.75rem);
  --t-h1: clamp(2rem, 4.2vw, 3.25rem);
  --t-h2: clamp(1.55rem, 2.8vw, 2.25rem);
  --t-h3: clamp(1.08rem, 1.5vw, 1.25rem);
  --t-body: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --t-micro: 0.72rem;

  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --measure: 66ch;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------- 02 BASE -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* The masthead is sticky, so reserve its height for anchors and focus. */
:target, .field, h2, h3, section[id] { scroll-margin-top: 6rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
::selection { background: var(--brass-400); color: var(--ink-900); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink-800); color: var(--paper-50);
  padding: 0.85rem 1.4rem; font-family: var(--font-mono); font-size: 0.85rem;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--patina-500); outline-offset: 3px; }

/* -------------------------------------------------------------- 03 TYPE -- */
h1, h2, h3 {
  margin: 0 0 0.55em;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.04;
}

.t-hero { font-size: var(--t-hero); }
.t-h1 { font-size: var(--t-h1); }
.t-h2 { font-size: var(--t-h2); }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.55;
  color: var(--fg-muted);
}

/* Section label — a plain word, not a drawing reference. */
.label {
  display: block;
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-600);
}

.mono { font-family: var(--font-mono); font-size: 0.86rem; }
.muted { color: var(--fg-muted); }

/* ------------------------------------------------------------ 04 LAYOUT -- */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--ink { background: var(--ink-800); color: var(--paper-100); }
.section--ink .lede, .section--ink .muted { color: rgba(238, 241, 243, 0.74); }
.section--ink .label { color: var(--brass-400); }

.head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 56ch; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

.split { display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ----------------------------------------------------------- 05 BUTTONS -- */
a { color: var(--patina-600); text-underline-offset: 0.18em; }
a:hover { color: var(--patina-500); }
.section--ink a { color: var(--brass-400); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1.55rem;
  border: 1px solid transparent; border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn--sm { padding: 0.55rem 1rem; font-size: var(--t-micro); }

.btn--primary { background: var(--brass-500); border-color: var(--brass-500); color: var(--ink-900); }
.btn--primary:hover { background: var(--brass-400); border-color: var(--brass-400); color: var(--ink-900); }

.btn--ghost { background: transparent; border-color: var(--rule-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--ink-800); background: rgba(10, 26, 47, 0.04); color: var(--fg); }

.hero .btn--ghost, .section--ink .btn--ghost {
  border-color: rgba(248, 249, 250, 0.42); color: var(--paper-50);
}
.hero .btn--ghost:hover, .section--ink .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1); border-color: var(--paper-50); color: #fff;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* --------------------------------------------------------------- 06 NAV -- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 26, 47, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(238, 241, 243, 0.12);
  color: var(--paper-100);
}
.masthead__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.25rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.brand__mark {
  flex: none;
  /* The map outline is a fine stroke, so the emblem needs height to register
     against the navy bar. 2.9rem is the largest that clears the 4.25rem bar. */
  width: auto; height: 2.9rem;
  object-fit: contain;
}
.brand__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 0.1rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: 0.5rem 0.7rem;
  font-size: 0.86rem; font-weight: 500; text-decoration: none;
  color: rgba(238, 241, 243, 0.82);
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav__link:hover { color: #fff; border-bottom-color: rgba(200, 162, 83, 0.55); }
.nav__link[aria-current="page"] { color: var(--brass-400); border-bottom-color: var(--brass-500); }
.nav__cta { margin-left: 0.85rem; }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.7rem; height: 2.7rem; padding: 0 0.6rem;
  background: none; border: 1px solid rgba(238, 241, 243, 0.3); border-radius: 2px; cursor: pointer;
}
.nav-toggle span { display: block; height: 1.5px; background: var(--paper-100); transition: transform 0.26s var(--ease), opacity 0.2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer { border-top: 1px solid rgba(238, 241, 243, 0.12); max-height: min(72vh, 32rem); overflow-y: auto; }
.nav-drawer[hidden] { display: none; }
.nav-drawer__list { list-style: none; margin: 0; padding: 0.5rem 0 1.25rem; }
.nav-drawer__list .nav__link { padding: 0.8rem 0; font-size: 1rem; border-bottom: 1px solid rgba(238, 241, 243, 0.08); }
.nav-drawer .btn { width: 100%; margin-top: 1.1rem; }

@media (min-width: 1020px) {
  .nav { display: flex; align-items: center; }
  .nav-toggle, .nav-drawer { display: none !important; }
}

/* -------------------------------------------------------------- 07 HERO -- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink-900); color: var(--paper-50);
}
.hero__terrain { position: absolute; inset: 0; opacity: 0.75; }
.hero__terrain svg { width: 100%; height: 100%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(100% 82% at 10% 36%, rgba(5, 13, 24, 0.9) 0%, rgba(5, 13, 24, 0.45) 45%, rgba(5, 13, 24, 0) 80%),
    linear-gradient(180deg, rgba(5, 13, 24, 0.42), rgba(5, 13, 24, 0) 40%, rgba(5, 13, 24, 0.66));
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 11vw, 8.5rem) clamp(3rem, 7vw, 5.5rem); }

.hero__title { margin: 0 0 1.25rem; font-size: var(--t-hero); max-width: 13ch; }
.hero__title em { font-style: italic; color: var(--brass-400); }

.hero__theme {
  max-width: 40ch;
  font-size: clamp(1.02rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: rgba(248, 249, 250, 0.85);
  margin-bottom: 2rem;
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  margin-bottom: 2.25rem;
  font-family: var(--font-mono); font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(248, 249, 250, 0.8);
}
.hero__meta b { color: var(--brass-400); font-weight: 500; }

/* Countdown — four quiet numerals, no boxes */
.count { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.75rem; }
.count__unit { min-width: 3.75rem; }
.count__num {
  display: block;
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1;
  color: var(--brass-400); font-variant-numeric: tabular-nums;
}
.count__label {
  display: block; margin-top: 0.45rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(248, 249, 250, 0.55);
}
.count__live { font-family: var(--font-mono); color: var(--brass-400); margin: 0; }
.count--dark .count__num { color: var(--ink-800); }
.count--dark .count__label { color: var(--slate-500); }

/* Interior page banner */
.page-head { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-800); color: var(--paper-50); }
.page-head__terrain { position: absolute; inset: 0; z-index: -1; opacity: 0.3; }
.page-head__inner { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.page-head h1 { margin: 0 0 0.75rem; font-size: var(--t-h1); }
.page-head .lede { color: rgba(248, 249, 250, 0.78); max-width: 54ch; }
.page-head .label { color: var(--brass-400); }

/* ------------------------------------------------------------- 08 CARDS -- */
.card {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: clamp(1.2rem, 2.2vw, 1.65rem);
  color: var(--fg);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.section--alt .card { background: #fff; }

.card__title { font-size: var(--t-h3); margin: 0 0 0.5rem; }
.card__body { color: var(--fg-muted); font-size: 0.95rem; margin: 0 0 0.9rem; }
.card__body:last-child { margin-bottom: 0; }
.card__date {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-600);
}

/* Compact definition block inside a card */
.mini { margin: 0.35rem 0 0; font-size: 0.9rem; }
.mini dt {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slate-500); margin-top: 0.9rem;
}
.mini dd { margin: 0.3rem 0 0; color: var(--fg-muted); }
.mini ul { margin: 0.3rem 0 0; padding-left: 1.05rem; }
.mini li { margin-bottom: 0.2rem; }

/* Tick list */
.ticks { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; color: var(--fg-muted); }
.ticks li { position: relative; padding-left: 1.3rem; margin-bottom: 0.45rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem; border-left: 1.5px solid var(--patina-500);
  border-bottom: 1.5px solid var(--patina-500); transform: rotate(-45deg) translateY(-2px);
}

.plain { margin: 0; padding-left: 1.1rem; color: var(--fg-muted); }
.plain li { margin-bottom: 0.35rem; }

/* Definition rows */
.deflist { margin: 0; display: grid; gap: 0; }
.deflist > div { display: grid; gap: 0.15rem 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.deflist > div:last-child { border-bottom: 0; }
@media (min-width: 680px) { .deflist > div { grid-template-columns: 12rem minmax(0, 1fr); } }
.deflist dt {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--slate-500); padding-top: 0.2rem;
}
.deflist dd { margin: 0; }

/* Leadership */
.person { padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.person__role {
  margin: 0 0 0.3rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-600);
}
.person__name { font-size: 1.05rem; margin: 0 0 0.3rem; }
.person__note { margin: 0; font-size: 0.92rem; color: var(--fg-muted); }

/* Sponsorship tier accent */
.tier__investment {
  margin: 0 0 0.8rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-600);
}
.tier { border-top: 2px solid var(--rule-strong); }
.tier[data-tier="founding"] { border-top-color: var(--brass-500); }
.tier[data-tier="platinum"] { border-top-color: var(--slate-500); }
.tier[data-tier="gold"] { border-top-color: var(--brass-600); }
.tier[data-tier="supporting"] { border-top-color: var(--patina-500); }

/* ------------------------------------------------------------- 09 STEPS -- */
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 0 1rem; padding: 1.05rem 0 1.05rem 0;
  border-bottom: 1px solid var(--rule);
}
.step__dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--slate-500); background: transparent;
  transform: translateY(-2px);
}
.step[data-state="done"] .step__dot { background: var(--patina-500); border-color: var(--patina-500); }
.step[data-state="next"] .step__dot { background: var(--brass-500); border-color: var(--brass-500); }
.step__title { font-weight: 500; }
.step__date { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.1em; color: var(--slate-500); text-align: right; }
@media (max-width: 560px) {
  .step { grid-template-columns: auto 1fr; }
  .step__date { grid-column: 2; text-align: left; margin-top: 0.2rem; }
}

/* ---------------------------------------------------------- 10 PARTNERS -- */
.partner-group { padding: 1.6rem 0; border-top: 1px solid var(--rule); }
.partner-group__name { font-size: var(--t-h3); margin: 0 0 0.3rem; }
.partner-group__blurb { margin: 0 0 1rem; font-size: 0.93rem; color: var(--fg-muted); }
.partner-group__open {
  margin: 0; font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-600);
}

.logo-wall { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.logo-wall__item { display: grid; place-items: center; padding: 1.25rem; border: 1px solid var(--rule); text-align: center; }
.logo-wall__name { font-weight: 500; }
.logo-wall__note { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--fg-muted); }

/* Documents */
.docs { list-style: none; margin: 0; padding: 0; }
.doc {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding: 1.05rem 0; border-bottom: 1px solid var(--rule);
}
.doc__name { display: block; font-weight: 500; }
.doc__desc { display: block; font-size: 0.9rem; color: var(--fg-muted); }
.doc__soon {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-500);
}

/* ----------------------------------------------------------- 11 GALLERY -- */
.filters { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: 1.75rem; }
.chip {
  padding: 0.4rem 0.85rem; border: 1px solid var(--rule-strong); border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover { border-color: var(--ink-800); color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--ink-800); border-color: var(--ink-800); color: var(--paper-50); }

.tiles { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.tile {
  position: relative; display: block; padding: 0;
  border: 1px solid var(--rule); background: var(--bg);
  cursor: zoom-in; overflow: hidden; text-align: left;
}
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s var(--ease); }
.tile:hover img { transform: scale(1.03); }
.tile__cap {
  display: block; padding: 0.65rem 0.8rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-500);
}

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem); background: rgba(5, 13, 24, 0.95);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 56rem; width: 100%; }
.lightbox__figure img { width: 100%; border: 1px solid rgba(248, 249, 250, 0.2); }
.lightbox__caption {
  margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.85rem;
  color: rgba(248, 249, 250, 0.8);
}
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-items: center;
  width: 2.8rem; height: 2.8rem; font-size: 1.15rem; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(248, 249, 250, 0.3); color: var(--paper-50);
}
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.18); }

/* ------------------------------------------------------------- 12 FORMS -- */
.field { margin-bottom: 1.3rem; }
.field > label, .fieldset__legend {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--slate-600);
}
.field .req { color: var(--brass-600); }

.input, .select, .textarea {
  width: 100%; padding: 0.78rem 0.9rem;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  background: #fff; color: var(--fg); font: inherit; font-size: 0.97rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--patina-500); box-shadow: 0 0 0 3px rgba(47, 122, 114, 0.14); outline: none;
}
.textarea { min-height: 8rem; resize: vertical; }
.select {
  appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate-500) 50%),
                    linear-gradient(135deg, var(--slate-500) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px; background-repeat: no-repeat;
}

.field__hint { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--slate-500); }
.field__error { display: none; margin: 0.35rem 0 0; font-family: var(--font-mono); font-size: var(--t-micro); color: #a8341f; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: #a8341f; }
.field.is-invalid .field__error { display: block; }

.fieldset { border: 0; margin: 0 0 1.6rem; padding: 0; }
.fieldset__legend { padding: 0; }

.check { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.92rem; color: var(--fg-muted); margin-bottom: 0.6rem; }
.check input { margin-top: 0.28rem; width: 1rem; height: 1rem; accent-color: var(--patina-500); flex: none; }

.form-status {
  margin-top: 1.2rem; padding: 0.85rem 1.05rem;
  border: 1px solid var(--patina-500); border-left-width: 3px;
  background: rgba(47, 122, 114, 0.08); font-size: 0.92rem;
}
.form-status[hidden] { display: none; }
.form-status--error { border-color: #a8341f; background: rgba(168, 52, 31, 0.07); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ 13 FOOTER -- */
.site-footer { background: var(--ink-900); color: rgba(248, 249, 250, 0.74); padding-block: clamp(2.75rem, 6vw, 4rem) 1.75rem; }
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding-bottom: 2rem; border-bottom: 1px solid rgba(248, 249, 250, 0.14);
}
.footer-col h2 {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(248, 249, 250, 0.55); margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { color: rgba(248, 249, 250, 0.82); text-decoration: none; font-size: 0.92rem; }
.footer-col a:hover { color: var(--brass-400); text-decoration: underline; }
.footer-col p { font-size: 0.92rem; color: rgba(248, 249, 250, 0.65); }

.footer-base {
  display: flex; flex-wrap: wrap; gap: 0.7rem 2rem; justify-content: space-between;
  padding-top: 1.5rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(248, 249, 250, 0.5);
}

/* --------------------------------------------------------- 14 UTILITIES -- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: clamp(2.5rem, 5vw, 4rem); }
.center { text-align: center; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .masthead, .site-footer, .nav-drawer, .lightbox, .filters, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .page-head, .section--ink { background: #fff !important; color: #000 !important; }
  .card { border-color: #999; break-inside: avoid; }
}


/* Self-contained carousel mechanics.
   Bootstrap normally supplies these, but core layout must not depend on a CDN
   being reachable — on a slow or filtered connection the hero would otherwise
   collapse into five stacked images. Values match Bootstrap's own, and this
   file loads after it, so the two never fight. Bootstrap's JS still drives the
   slide changes when it is present; js/main.js takes over when it is not. */
.carousel { position: relative; }
.carousel-inner { position: relative; width: 100%; overflow: hidden; }
.carousel-item { position: absolute; inset: 0; display: none; }
.carousel-item.active { display: block; }

.carousel-fade .carousel-item { display: block; opacity: 0; visibility: hidden; }
.carousel-fade .carousel-item.active { opacity: 1; visibility: visible; }

.carousel-indicators {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: center; gap: 0.5rem;
  margin: 0; padding: 0; list-style: none;
}
.carousel-indicators [data-bs-target] { cursor: pointer; padding: 0; }

.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; }

/* ==========================================================================
   15 HERO CAROUSEL
   Bootstrap supplies the slide mechanics; these rules give it the NEEA
   treatment and keep the headline readable over every frame.
   ========================================================================== */
.hero__carousel {
  position: absolute; inset: 0;
  /* No z-index here on purpose: a stacking context would trap the controls
     behind the hero vignette. The overlay sits at z-index 1, content at 2,
     controls at 3. */
  pointer-events: none;
}
.hero__carousel .carousel-indicators,
.hero__controls { pointer-events: auto; }
.hero__carousel .carousel,
.hero__carousel .carousel-inner,
.hero__carousel .carousel-item { height: 100%; }
.hero__carousel .carousel-item { transition: opacity 1.1s var(--ease), visibility 1.1s var(--ease); }
.hero__carousel img { width: 100%; height: 100%; object-fit: cover; }

/* Slow drift across each slide — barely perceptible, stops on reduced motion */
.hero__carousel .carousel-item.active img { animation: heroDrift 14s ease-out forwards; }
@keyframes heroDrift {
  from { transform: scale(1.02); }
  to { transform: scale(1.09); }
}

/* Controls sit bottom-right, clear of the calls to action */
.hero__controls {
  position: absolute; right: var(--gutter); bottom: 1.5rem; z-index: 3;
  display: flex; align-items: center; gap: 0.5rem;
}
.hero__controls .carousel-control-prev,
.hero__controls .carousel-control-next {
  position: static; width: 2.6rem; height: 2.6rem; opacity: 1;
  display: grid; place-items: center;
  border: 1px solid rgba(248, 249, 250, 0.35);
  background: rgba(5, 13, 24, 0.5);
  color: var(--paper-50);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.hero__controls .carousel-control-prev:hover,
.hero__controls .carousel-control-next:hover,
.hero-pause:hover { background: rgba(200, 162, 83, 0.9); border-color: var(--brass-500); color: var(--ink-900); }
.hero__controls .carousel-control-prev:active,
.hero__controls .carousel-control-next:active { transform: scale(0.94); }
.hero__arrow { font-size: 1.2rem; line-height: 1; }

.hero-pause {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 1px solid rgba(248, 249, 250, 0.35);
  background: rgba(5, 13, 24, 0.5); color: var(--paper-50);
  font-size: 0.72rem; cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.hero__caption {
  position: absolute; left: var(--gutter); bottom: 1.85rem; z-index: 3;
  margin: 0;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(248, 249, 250, 0.72);
}
.hero__caption::before {
  content: ""; display: inline-block; width: 1.6rem; height: 1px;
  background: var(--brass-500); margin-right: 0.7rem; vertical-align: middle;
}

.hero__carousel .carousel-indicators {
  /* Sat below the hero at the default offset, which pushed it off screen. */
  bottom: 1.95rem; margin-bottom: 0; z-index: 3;
}
.hero__carousel .carousel-indicators [data-bs-target] {
  width: 1.6rem; height: 2px; border: 0; opacity: 0.4;
  background-color: var(--paper-50); transition: opacity 0.25s var(--ease), background-color 0.25s var(--ease);
}
.hero__carousel .carousel-indicators .active { opacity: 1; background-color: var(--brass-500); }

@media (max-width: 640px) {
  .hero__caption { display: none; }
  .hero__controls { bottom: 1rem; }
}

/* ==========================================================================
   16 SPONSORS
   ========================================================================== */
.sponsor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark body" "actions actions";
  gap: 1.1rem 1.25rem;
  align-items: start;
  padding: 1.4rem;
  background: #fff;
  border: 1px solid var(--rule);
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.sponsor:hover {
  border-color: var(--brass-500);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -26px rgba(5, 13, 24, 0.55);
}
@media (min-width: 720px) {
  .sponsor { grid-template-columns: auto minmax(0, 1fr) auto;
             grid-template-areas: "mark body actions"; align-items: center; }
}

.sponsor__mark {
  grid-area: mark;
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  border: 1px solid var(--rule);
  background: var(--paper-50);
}
.sponsor__mark img { max-width: 80%; max-height: 80%; object-fit: contain; }
.sponsor__initials {
  font-family: var(--font-display); font-size: 1.35rem;
  color: var(--slate-500); letter-spacing: 0.02em;
}

.sponsor__body { grid-area: body; }
.sponsor__tier {
  margin: 0 0 0.25rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-600);
}
.sponsor__name { font-size: 1.1rem; margin: 0 0 0.35rem; }
.sponsor__summary { margin: 0; font-size: 0.93rem; color: var(--fg-muted); }

.sponsor__actions {
  grid-area: actions;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
}
.sponsor__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--patina-600);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.sponsor__link:hover { color: var(--patina-500); border-bottom-color: currentColor; }

.tag-example {
  display: inline-block; margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  font-size: 0.62rem; letter-spacing: 0.1em; color: var(--slate-500);
}

.note {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.9rem 1.1rem; margin-bottom: 1.75rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--brass-500);
  background: rgba(200, 162, 83, 0.07);
  font-size: 0.9rem; color: var(--fg-muted);
}
.note[hidden] { display: none; }
.note p { margin: 0; max-width: none; }


/* Self-contained modal mechanics, for the same reason as the carousel above:
   the sponsor detail view must not depend on Bootstrap's CSS arriving. Values
   match Bootstrap's, and this file loads afterwards, so they do not conflict. */
.modal {
  position: fixed; inset: 0; z-index: 1055;
  display: none; overflow-x: hidden; overflow-y: auto;
  outline: 0;
}
.modal-dialog { position: relative; width: auto; max-width: 34rem; margin: 1.75rem auto; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
.modal-content {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: #fff; background-clip: padding-box;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--rule);
}
.modal-body { padding: 1.4rem; }
.modal-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem;
  padding: 1rem 1.4rem; border-top: 1px solid var(--rule);
}
.btn-close {
  width: 2rem; height: 2rem; flex: none; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  background: transparent; color: var(--fg-muted);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-close::before { content: "\00d7"; }
.btn-close:hover { background: var(--paper-100); color: var(--fg); }
.modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: #050d18; }
.modal-backdrop.show { opacity: 0.7; }

/* Modal — NEEA theming on top of the mechanics above */
.modal-content { border-radius: 2px; border: 1px solid var(--rule-strong); }
.modal-header, .modal-footer { border-color: var(--rule); }
.modal-title { font-family: var(--font-display); font-size: 1.35rem; }
.modal.is-fallback { background: rgba(5, 13, 24, 0.72); }

/* ==========================================================================
   17 STATS
   ========================================================================== */
.stats {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.stat__value {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1;
  color: var(--brass-400); font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block; margin-top: 0.55rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(238, 241, 243, 0.62);
}

/* ==========================================================================
   18 MOTION
   Entrance sequence on load, plus interaction feedback. Everything here is
   switched off by the reduced-motion block at the end of this file.
   ========================================================================== */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes wipeIn {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Hero elements arrive in sequence rather than all at once */
.hero__inner > * { animation: riseIn 0.75s var(--ease) both; }
.hero__inner > *:nth-child(1) { animation-delay: 0.05s; }
.hero__inner > *:nth-child(2) { animation-delay: 0.15s; }
.hero__inner > *:nth-child(3) { animation-delay: 0.27s; }
.hero__inner > *:nth-child(4) { animation-delay: 0.38s; }
.hero__inner > *:nth-child(5) { animation-delay: 0.48s; }
.hero__inner > *:nth-child(6) { animation-delay: 0.58s; }
.hero__title em { animation: wipeIn 0.9s var(--ease) 0.4s both; display: inline-block; }

/* Nav underline grows from the left instead of snapping on */
.nav__link { position: relative; border-bottom-color: transparent !important; }
.nav__link::after {
  content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0;
  height: 2px; background: var(--brass-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Buttons lift very slightly on hover */
.btn--primary, .btn--ghost { transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); }
.btn--primary:hover, .btn--ghost:hover { transform: translateY(-2px); }
.btn--primary:active, .btn--ghost:active { transform: translateY(0); }

/* Card hover already lifts; add a brass edge that draws in */
.card { position: relative; }
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--brass-500); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.card:hover::after { transform: scaleX(1); }

/* Milestone rows shift on hover to signal they are live records */
.step { transition: padding-left 0.22s var(--ease), background-color 0.22s var(--ease); }
.step:hover { padding-left: 0.6rem; background: rgba(200, 162, 83, 0.05); }

/* Countdown digits pulse as the seconds change */
.count__num { transition: opacity 0.25s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hero__inner > *,
  .hero__title em,
  .hero__carousel .carousel-item.active img { animation: none !important; }
  .hero__carousel .carousel-item { transition: none !important; }
  .btn--primary:hover, .btn--ghost:hover, .sponsor:hover { transform: none; }
  .card::after, .nav__link::after { transition: none; }
}

/* ==========================================================================
   19 LOGO
   Two supplied versions: white for dark grounds, full colour for light.
   Never swapped by CSS filters — each is used as delivered.
   ========================================================================== */
.brand { gap: 0.65rem; }
.brand__name { font-family: var(--font-display); letter-spacing: 0.06em; }

/* Footer lockup */
.footer__logo {
  width: clamp(9rem, 14vw, 11.5rem);
  height: auto;
  margin-bottom: 1.1rem;
}

/* Media centre: the two versions shown on the grounds they are meant for */
.logo-pair {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.logo-swatch {
  margin: 0; padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  text-align: center;
}
.logo-swatch img { width: min(100%, 15rem); height: auto; }
.logo-swatch figcaption {
  display: flex; flex-direction: column; gap: 0.4rem;
  font-size: 0.9rem; color: var(--fg-muted);
}
.logo-swatch strong { font-size: 0.95rem; color: var(--fg); }

.logo-swatch--dark { background: var(--ink-800); border-color: var(--ink-800); }
.logo-swatch--dark figcaption { color: rgba(238, 241, 243, 0.72); }
.logo-swatch--dark strong { color: var(--paper-50); }
.logo-swatch--dark .sponsor__link { color: var(--brass-400); }

.logo-swatch--light { background: #fff; }

@media print {
  /* The white lockup vanishes on paper, so fall back to the colour version. */
  .brand__mark { content: url("../images/logos/neea-emblem.png"); }
  .footer__logo { display: none; }
}