:root {
  /* Sampled from the Montana Invitational mark */
  --primary: #14294d;        /* deep navy blue */
  --primary-dark: #0b1a34;
  --accent: #eab02d;         /* gold: accents, icons, large display type only */
  --accent-deep: #c6901c;
  --accent-text: #7a5f1f;    /* darkened bronze, passes AA on white for small text */
  --bronze: #8c6e2a;         /* brand mid: secondary fills, borders */
  --gray: #60655f;
  --charcoal: #1f231d;
  --white: #ffffff;
  --off-white: #f5f6f7;
  --line: #e2e5e0;

  --radius: 8px;
  --max-width: 1120px;
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Oswald", "Poppins", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--charcoal);
  background: var(--off-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
}

h2 {
  font-size: clamp(2rem, 4vw, 2.85rem);
  color: var(--primary);
  margin-bottom: 0.5em;
}

h3 { font-size: 1.4rem; }
h4 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-text);
  margin: 0 0 0.6em;
}

.lede {
  font-size: 1.1rem;
  color: var(--gray);
  max-width: 68ch;
}

/* ---------- Scroll progress ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 100;
  transition: width 0.1s linear;
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.card-grid .reveal:nth-child(2),
.step-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.card-grid .reveal:nth-child(3) { transition-delay: 0.2s; }

.faq-list .reveal:nth-child(2) { transition-delay: 0.08s; }
.faq-list .reveal:nth-child(3) { transition-delay: 0.16s; }
.faq-list .reveal:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 246, 247, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}

/* Header hugs the viewport edges rather than the 1120px content column, so
   the mark sits top-left and the nav top-right. */
.site-header .wrap { max-width: none; padding: 0 48px; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.wordmark { display: flex; align-items: center; }

.wordmark img {
  height: 46px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal);
}

.site-nav a:hover { color: var(--accent-text); }

.site-nav a.nav-cta {
  color: var(--white);
  background: var(--primary);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 600;
}

.site-nav a.nav-cta:hover { background: var(--primary-dark); color: var(--white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}
.btn-primary:hover { background: #1e3a66; box-shadow: inset 6px 0 0 var(--accent); }

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }

.section .btn-ghost {
  border-color: var(--primary);
  color: var(--primary);
}
.section .btn-ghost:hover { background: var(--primary); color: var(--white); }

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ==========================================================================
   HERO SCROLL SEQUENCE
   Tall track + sticky pin, driven by one normalised progress value.
   Stage thresholds and tuning live in js/hero-sequence.js.
   ========================================================================== */

:root {
  /* Kept in sync with TRACK_VH / TRACK_VH_MOBILE in js/hero-sequence.js */
  --track-vh: 200;

  /* Seeded to what measure() computes — (1 - D_START) * (track - 100) — so the
     page content does not jump when JS takes over. Update alongside D_START. */
  --main-pull: 38;

  --header-h: 66px;
}

/* ---------- Loading screen ----------
   Only ever shown when JS is there to dismiss it. Fixed above everything,
   painted in the brand dark so there is no white flash before it appears. */

.site-loader { display: none; }

.js .site-loader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--primary-dark);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.js .site-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-mark {
  width: min(280px, 58vw);
  height: auto;
}

.loader-bar {
  width: min(320px, 62vw);
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.loader-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.loader-pct {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .js .site-loader { transition: none; }
  .loader-fill { transition: none; }
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 999;
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius);
  transition: top 0.18s ease;
}
.skip-link:focus { top: 16px; }

.hero-track {
  position: relative;
  height: calc(var(--track-vh) * 1vh);
}

.hero-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--primary-dark);
}

.hero-media {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}

.hero-media video,
.hero-media .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-poster { display: none; }

/* Poster-only mode: reduced motion, Save-Data / 2g-3g, or a small screen */
body.poster-only .hero-media video { display: none; }
body.poster-only .hero-poster { display: block; }
/* Gradient scrim, fades up under the type in stage B */
.hero-scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
  background:
    linear-gradient(to top, rgba(11,26,52,0.94) 0%, rgba(11,26,52,0.58) 45%, rgba(11,26,52,0) 80%),
    linear-gradient(to right, rgba(11,26,52,0.72) 0%, rgba(11,26,52,0) 58%);
}

/* The hero runs wider than the 1120px content column and lines up with the
   header gutter, so the headline gets room instead of wrapping tightly. */
.hero-content .wrap {
  max-width: 1320px;
  padding-left: 48px;
  padding-right: 48px;
}

/* Hero copy: always in the DOM, only ever transformed */
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 11vh;
  will-change: transform, opacity;
  color: var(--white);
}

.hero-line { will-change: transform, opacity; }

/* Pre-paint state. Without this the hero copy paints fully opaque over an
   unscrimmed frame, then snaps to 0 the moment render() first runs — that was
   the flash on load. Gated on `.js` so a no-JS visitor still sees everything. */
.js .hero-line { opacity: 0; }

.hero-mark {
  width: min(300px, 62vw);
  margin-bottom: 26px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.25em;
  max-width: 22ch;
}

.hero-date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.1em;
}
.hero-date span { color: var(--accent); }

.hero-location,
.hero-venue {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.82);
  margin: 0;
}

.hero-divider {
  width: 88px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  margin: 22px 0 20px;
}

.hero-sub {
  font-size: 1.12rem;
  color: rgba(255,255,255,0.9);
  max-width: 62ch;
  margin: 0 0 1.9em;
}

/* Hero copy is opacity-animated, so a focused link inside it could be
   invisible. Force it visible. */
.hero-content a:focus-visible {
  opacity: 1 !important;
  transform: none !important;
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Stage A scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  will-change: opacity;
}
.scroll-cue span {
  display: block;
  width: 4px;
  height: 8px;
  margin: 6px auto 0;
  border-radius: 2px;
  background: var(--accent);
  animation: cue 1.8s ease infinite;
}
@keyframes cue {
  0%   { opacity: 0; transform: translateY(0); }
  35%  { opacity: 1; }
  70%  { opacity: 0; transform: translateY(12px); }
  100% { opacity: 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; opacity: 1; }
}

/* Page content rises over the hero during stage D. --main-pull is set from
   JS so the overlap begins exactly at D_START. */
#top {
  position: relative;
  z-index: 3;
  background: var(--off-white);
  margin-top: calc(var(--main-pull, 0) * -1vh);
  will-change: transform;
}

/* The side gradient reaches 58% across, which on a narrow viewport is nearly
   the whole width — the footage disappeared behind it. Vertical only below
   900px; the bottom fade still carries the type. */
@media (max-width: 900px) {
  .hero-scrim {
    background: linear-gradient(to top,
      rgba(11,26,52,0.92) 0%, rgba(11,26,52,0.5) 50%, rgba(11,26,52,0) 85%);
  }
}

@media (max-width: 767px) {
  :root { --track-vh: 150; --main-pull: 19; }
  .hero-content { padding-bottom: 8vh; }
  .hero-mark { width: min(190px, 48vw); margin-bottom: 12px; }
  .hero-title { font-size: clamp(1.85rem, 7.5vw, 2.6rem); }
  .hero-sub { font-size: 1rem; margin-bottom: 1.3em; }
  .hero-divider { margin: 14px 0 12px; }
}

/* ---------- About badges ---------- */

/* When the badges lead a section there is no headline above them, so the
   top rule and its spacing would hang in mid-air. */
/* ---------- Card links (arrow CTAs) ---------- */

.card-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-text);
}

a.card-link:hover { text-decoration: underline; }

.card-link.is-pending {
  color: var(--gray);
  font-weight: 500;
  font-style: italic;
}

/* ---------- Resources / Plan Your Trip ---------- */

.resource-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 2.25rem;
}

.resource {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
}

.resource h3 { color: var(--primary); font-size: 1.1rem; margin-bottom: 0.35em; }
.resource p { color: var(--gray); font-size: 0.9rem; }

/* ---------- Sections ---------- */

.section { padding: 78px 0; }

.section-alt {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------- Cards (divisions) ---------- */

.card-grid {
  display: grid;
  gap: 22px;
  margin-top: 2.25rem;
  grid-template-columns: 1fr;
}

.card-grid.two { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--off-white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 28px 26px;
}

.section-alt .card { background: var(--off-white); }

.card h3 { color: var(--primary); margin-bottom: 0.35em; }
.card p { color: var(--gray); font-size: 0.96rem; }
.card p:last-child { margin-bottom: 0; }

.card-note {
  font-size: 0.85rem;
  color: var(--gray);
  font-style: italic;
}

/* ---------- Icon badges ---------- */

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(234, 176, 45, 0.14);
  color: var(--accent-text);
  margin-bottom: 16px;
}

.icon-badge svg { width: 22px; height: 22px; }

/* ---------- Why 10s list ---------- */

.reason-list {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  max-width: 80ch;
}

.reason-list li {
  position: relative;
  padding-left: 40px;
  color: var(--gray);
  font-size: 1.02rem;
}

.reason-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}

.reason-list strong { color: var(--primary); font-weight: 600; }

/* ---------- Two-step path ---------- */

.step-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 2.25rem;
}

.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}

.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}

.step h3 { color: var(--primary); }
.step p { color: var(--gray); font-size: 0.96rem; margin-bottom: 0.9em; }

/* ---------- Photo band ---------- */

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

.photo-band img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.photo-figure { margin: 0 auto; }

.photo-figure figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--gray);
  text-align: center;
}

/* ---------- Statement ---------- */

/* ---------- Interest form ---------- */

/* Its own block: white against the off-white sections either side, and kept
   deliberately shallow — it is a heading, a control and a photo. */
.form-section {
  padding: 36px 0;
}

.form-section h2 { margin-bottom: 0.3em; }

.form-section .lede { font-size: 1rem; margin-bottom: 0; }

.interest-form-link {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.interest-form-link:hover { color: var(--primary); }

.eoi-form {
  margin-top: 2.25rem;
  max-width: 760px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 30px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
}

.field .optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--gray);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea { min-height: 96px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgba(234, 176, 45, 0.18);
}

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

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.form-note {
  font-size: 0.82rem;
  color: var(--gray);
  margin: 0;
}

.form-status {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  display: none;
}

.form-status.is-visible { display: block; }

.form-status.is-success {
  background: rgba(234, 176, 45, 0.12);
  border: 1px solid rgba(234, 176, 45, 0.45);
  color: var(--primary);
}

.form-status.is-error {
  background: rgba(150, 40, 20, 0.07);
  border: 1px solid rgba(150, 40, 20, 0.3);
  color: #7c2412;
}

/* Stands in for the form until FORM_ENDPOINT is set. It holds a single
   button, so no card chrome — the button is the whole message. */
.form-fallback {
  margin-top: 0;
  max-width: 760px;
}

.form-fallback p:last-child { margin-bottom: 0; }

/* Scoped away from .btn: a bare `.form-fallback a` rule outranks
   `.btn-primary { color: var(--white) }` and rendered the button label in
   dark green on forest green. */
.form-fallback a:not(.btn) { color: var(--accent-text); font-weight: 600; }
.form-fallback a:not(.btn):hover { text-decoration: underline; }

/* ---------- FAQ ---------- */

.faq-section { padding: 64px 0; }

.faq-list {
  max-width: 760px;
  margin: 1.75rem auto 0;
}

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--accent-text);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  color: var(--gray);
  font-size: 0.92rem;
  margin: 0 2px 16px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 0 0 0;
  border-top: 5px solid var(--accent);
}

.footer-event {
  padding-top: 44px;
  padding-bottom: 34px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-event-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  margin: 0 0 0.2em;
}

.footer-event-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-top: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-mark {
  width: 240px;
  margin-bottom: 20px;
}

.footer-brand p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 46ch;
  margin: 0;
}

.footer-brand a { color: var(--accent); }
.footer-brand a:hover { text-decoration: underline; }

.footer-col h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.8em;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer-col a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
}

.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  padding: 20px 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom p { margin: 0 0 0.4em; }
.footer-bottom p:last-child { margin-bottom: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .card-grid.two { grid-template-columns: 1fr; }
  .step-grid { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 640px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--off-white);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 16px;
  }

  .site-nav.open { display: flex; }

  .site-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .site-nav a:last-child { border-bottom: none; }

  .site-nav a.nav-cta {
    text-align: center;
    margin-top: 10px;
    padding: 12px 16px;
  }

  .wordmark img { height: 38px; }
  .site-header .wrap { padding: 0 20px; }

  .hero { padding: 56px 0 64px; }
  .hero-mark { margin-bottom: 24px; }
  .hero-divider { margin: 20px 0 18px; }


  .section { padding: 54px 0; }

  .field-row { grid-template-columns: 1fr; gap: 0; }

  .eoi-form { padding: 24px 20px; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; }
}

/* ---------- Entry fee ---------- */

/* ---------- The Basics: four-fact row under the hero ----------
   Summary only — one line per fact. Each card links down to the section that
   answers it in full, so this never becomes a second copy of the content. */

.basics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 2rem;
}

.basic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 22px;
  background: var(--off-white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.basic:hover,
.basic:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 41, 77, 0.12);
  border-color: var(--accent-text);
  border-left-color: var(--accent);
}

.basic-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.basic-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.1;
  color: var(--primary);
}

.basic-note {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .basics-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .basics-grid { grid-template-columns: 1fr; gap: 12px; }
  .basic { padding: 18px 18px; }
}

/* The venue photo now lives inside Plan Your Trip */
#resources .photo-figure { padding: 0; margin: 0 auto 2.25rem; max-width: 820px; }

/* ---------- Squad size ---------- */


/* ---------- Smaller section headline, for the compact blocks ---------- */

.section-title-sm {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 0.4em;
}

/* ---------- Divisions: kept deliberately slight ---------- */

.divisions-section { padding: 54px 0; }

.division-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 1.4rem;
}

.division {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.division h3 {
  font-size: 1.05rem;
  color: var(--primary);
  margin: 0 0 0.2em;
}

.division p { margin: 0; font-size: 0.9rem; color: var(--gray); }

/* The age band is the line a coach is actually looking for, so it leads. */
.division-band {
  font-weight: 600;
  color: var(--accent-text) !important;
  margin: 0 0 4px !important;
}

.division-note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gray);
}

/* ---------- Squad size and entry fee, side by side ----------
   Wider than the old single cards but much shorter, so the two numbers a
   coach is looking for sit on one line together. */

.essentials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 1.6rem;
}

.essential {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.essential-figure {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  line-height: 1;
  color: var(--primary);
  margin: 0 0 0.45em;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.essential-figure span {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
}

.essential-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gray);
}

/* ---------- Match photos ----------
   The venue shot after Divisions, and a two-up pair of landscapes closing the
   page. */

.photo-pair {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 24px 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.photo-pair figure { margin: 0; }

.photo-pair img {
  width: 100%;
  /* height:auto is required: the img width/height attributes otherwise count
     as a specified height and aspect-ratio never applies. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 720px) {
  .photo-pair { grid-template-columns: 1fr; gap: 12px; padding-bottom: 48px; }
}

/* ---------- Entry fee ---------- */

/* ---------- The Basics: four-fact row under the hero ----------
   Summary only — one line per fact. Each card links down to the section that
   answers it in full, so this never becomes a second copy of the content. */

.basics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 2rem;
}

.basic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 22px;
  background: var(--off-white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.basic:hover,
.basic:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 41, 77, 0.12);
  border-color: var(--accent-text);
  border-left-color: var(--accent);
}

.basic-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.basic-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.1;
  color: var(--primary);
}

.basic-note {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .basics-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .basics-grid { grid-template-columns: 1fr; gap: 12px; }
  .basic { padding: 18px 18px; }
}

/* The venue photo now lives inside Plan Your Trip */
#resources .photo-figure { padding: 0; margin: 0 auto 2.25rem; max-width: 820px; }

/* ---------- Squad size ---------- */


/* ---------- Smaller section headline, for the compact blocks ---------- */

.section-title-sm {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 0.4em;
}

/* ---------- Divisions: kept deliberately slight ---------- */

.divisions-section { padding: 54px 0; }

.division-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 1.4rem;
}

.division {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.division h3 {
  font-size: 1.05rem;
  color: var(--primary);
  margin: 0 0 0.2em;
}

.division p { margin: 0; font-size: 0.9rem; color: var(--gray); }

/* The age band is the line a coach is actually looking for, so it leads. */
.division-band {
  font-weight: 600;
  color: var(--accent-text) !important;
  margin: 0 0 4px !important;
}

.division-note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gray);
}

/* ---------- Squad size and entry fee, side by side ----------
   Wider than the old single cards but much shorter, so the two numbers a
   coach is looking for sit on one line together. */

.essentials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 1.6rem;
}

.essential {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.essential-figure {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  line-height: 1;
  color: var(--primary);
  margin: 0 0 0.45em;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.essential-figure span {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
}

.essential-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gray);
}

@media (max-width: 860px) {
  .resource-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .division-row,
  .essentials-grid,
  .resource-grid { grid-template-columns: 1fr; }
}

/* The pin is 100svh, so on a short window the hero copy outgrows it and is
   clipped from the top — the mark goes first. Drop the mark there (the H1
   carries the name) and tighten the rest so everything fits. */
@media (max-height: 700px) {
  .hero-mark { display: none; }
  .hero-content { padding-bottom: 5vh; }
  .hero-title { font-size: clamp(1.6rem, 5vw, 2.3rem); margin-bottom: 0.18em; }
  .hero-date { font-size: clamp(1.15rem, 2.6vw, 1.7rem); }
  .hero-venue { font-size: 0.92rem; }
  .hero-sub { font-size: 0.95rem; margin-bottom: 1em; }
  .hero-divider { margin: 10px 0 9px; }
}

@media (max-height: 520px) {
  .hero-sub { display: none; }
}

/* ---------- Expression of interest: form with the photo alongside ---------- */

@media (max-width: 1180px) {
  .hero-content .wrap { max-width: none; }
}

/* ==========================================================================
   MONTANA INVITATIONAL — additions on top of the N10s component set.
   New sections (Confirmed Teams, partners), subpage hero, form embed and the
   disabled "Coming soon" control. Everything reuses the existing tokens.
   ========================================================================== */

/* ---------- Disabled / "Coming soon" control ----------
   For CTAs whose destination is not resolved yet: reads as a button, but is
   inert and clearly muted rather than a dead link. */
.btn-disabled {
  background: #e7e3da;
  color: var(--gray);
  box-shadow: inset 4px 0 0 var(--bronze);
  cursor: not-allowed;
  pointer-events: none;
}
.btn-disabled:hover { transform: none; }

/* ---------- Entry: action row under the stats ---------- */
.cost-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 1.9rem;
}
@media (max-width: 520px) {
  .cost-actions { flex-direction: column; align-items: stretch; }
  .cost-actions .btn { text-align: center; }
}

/* ---------- Confirmed / Who's Coming: team logo wall ----------
   Fixed-height logo box so captions line up across every row regardless of the
   logo's aspect ratio. 3 columns desktop, 2 mobile. */
.teams-sub {
  font-size: 1.05rem;
  color: var(--gray);
  margin-top: -0.2rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 2.25rem;
}

.team-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.team-tile:hover,
.team-tile:focus-within {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(20, 41, 77, 0.12);
}

/* The critical bit: the logo lives in a fixed-height flex box, so every
   caption sits on the same line regardless of the logo's proportions. */
.team-logo {
  height: 140px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.team-name {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  text-align: center;
  line-height: 1.35;
}

.teams-more {
  margin: 2.25rem 0 0;
  font-size: 1rem;
  color: var(--gray);
}
.teams-more a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.teams-more a:hover { color: var(--primary); }

@media (max-width: 720px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .team-logo { height: 116px; }
  .team-tile { padding: 18px 12px; }
  .team-name { font-size: 0.72rem; letter-spacing: 0.02em; }
}
/* Only the very narrowest phones fall back to a single column. */
@media (max-width: 300px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ---------- Partners row (directly above the footer) ----------
   Same fixed-height tile treatment as the team wall. */
.partners {
  padding: 44px 0 52px;
  border-top: 1px solid var(--line);
}
.partners-label {
  text-align: center;
  margin-bottom: 1.6rem;
}
.partners-row {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.partner-tile {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.partner-tile img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* ---------- Subpage hero (referee.html, merch.html) ----------
   Stands in for the pinned video hero on the two small pages. */
.subhero {
  background:
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  padding: 104px 0 72px;
}
.subhero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.2em;
}
.subhero .hero-divider { margin: 22px 0 20px; }
.subhero-lead {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 60ch;
  margin: 0;
}

/* ---------- Embedded Google Form (referee page) ---------- */
.form-embed {
  max-width: 760px;
  margin: 2.25rem auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.form-embed iframe {
  width: 100%;
  border: 0;
  display: block;
}
.form-embed-fallback {
  max-width: 760px;
  margin: 14px auto 0;
  font-size: 0.9rem;
  color: var(--gray);
}
.form-embed-fallback a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-embed-fallback a:hover { color: var(--primary); }

/* ---------- Merch placeholder ---------- */
.merch-placeholder {
  text-align: center;
  padding: 20px 0 8px;
}
.merch-placeholder p { font-size: 1.15rem; color: var(--gray); }
.merch-placeholder a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Secondary contact line under a resource card (HBC phone / email). */
.resource-secondary {
  margin: 0.6em 0 0;
  font-size: 0.82rem;
  color: var(--gray);
}
.resource-secondary a { color: var(--accent-text); font-weight: 600; }
.resource-secondary a:hover { text-decoration: underline; }

/* ---------- Format: six info cards on the Basics grid ----------
   Same card component as The Basics, but three across (6 cards = 3x2) and the
   value type dialled down so longer facts read as body, not display. */
.format-grid { grid-template-columns: repeat(3, 1fr); }
.format-grid .basic-value {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.3;
}
@media (max-width: 900px) { .format-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .format-grid { grid-template-columns: 1fr; } }

/* ---------- Divisions: five cards ---------- */
.division-row--five { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .division-row--five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .division-row--five { grid-template-columns: 1fr; } }

/* ---------- Subpage detail cards (referee) ----------
   Basics card component, two across, value dialled down for longer facts. */
.detail-grid { grid-template-columns: repeat(2, 1fr); margin-top: 2.25rem; }
.detail-grid .basic-value {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.35;
}
@media (max-width: 520px) { .detail-grid { grid-template-columns: 1fr; } }

/* Dark chip for light/knockout team logos that would vanish on the white card. */
.team-logo.is-dark {
  background: var(--primary-dark);
  border-radius: var(--radius);
  padding: 16px;
}
@media (max-width: 720px) { .team-logo.is-dark { padding: 12px; } }

/* Dark partner tile — for the MIS mark, which is gold + white on transparent. */
.partner-tile.dark {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.division-row--six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .division-row--six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .division-row--six { grid-template-columns: 1fr; } }

/* ---------- Format: clean spec sheet (replaces the card grid) ----------
   A scannable two-column fact list with hairline rules — reads like a
   professional info sheet, not a wall of boxes. */
.spec-list {
  margin: 2.25rem 0 0;
  max-width: 880px;
}
.spec {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line);
}
.spec:first-child { border-top: 1px solid var(--line); }
.spec dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--primary);
}
.spec dd {
  margin: 0;
  color: var(--gray);
  font-size: 1rem;
  line-height: 1.55;
}
.spec dd strong { color: var(--charcoal); font-weight: 600; }

@media (max-width: 600px) {
  .spec { grid-template-columns: 1fr; gap: 4px; padding: 14px 2px; }
  .spec dt {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-text);
  }
}

/* ---------- Simplified footer: logo, event line, and the contact email ---------- */
.footer-simple {
  text-align: center;
  padding: 52px 24px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.footer-simple .footer-mark { width: 200px; margin: 0 0 20px; }
.footer-simple .footer-event-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  margin: 0 0 0.2em;
  max-width: 26ch;
}
.footer-simple .footer-event-sub { font-size: 0.92rem; color: rgba(255,255,255,0.6); margin: 0; }
.footer-email {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  letter-spacing: 0.01em;
  color: var(--accent);
}
.footer-email:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-bottom { text-align: center; }