/* =====================================================================
   Midwest UAS Test Site of Indiana — Phase 1 landing page
   Brand tokens sampled directly from the IEDC print piece.
   ===================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Anton-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Montserrat-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Core brand — sampled from the print PDF */
  --blue:        #254A9A;   /* IEDC primary blue */
  --blue-deep:   #16306B;
  --blue-night:  #0E2050;
  --blue-mid:    #1D6FC3;   /* hero gradient blue */
  --gold:        #FBC12C;   /* IEDC gold */
  --gold-deep:   #E3A70E;
  --mist:        #E0E7E9;   /* light blue-grey from the shield */

  --paper:       #FFFFFF;
  --paper-alt:   #F4F7FA;
  --ink:         #10203F;
  --ink-soft:    #33415C;
  --ink-muted:   #4A5A76;
  --line:        #D8E0EA;

  --wrap:        1200px;
  --gutter:      clamp(1.25rem, 4vw, 3rem);

  --radius:      4px;
  --radius-lg:   8px;

  --step:        clamp(3.5rem, 7vw, 6.5rem);   /* vertical section rhythm */

  --shadow-sm:   0 1px 2px rgba(16, 32, 63, .06), 0 2px 8px rgba(16, 32, 63, .06);
  --shadow-md:   0 4px 12px rgba(16, 32, 63, .08), 0 12px 32px rgba(16, 32, 63, .10);

  --ease:        cubic-bezier(.22, .61, .36, 1);

  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
  line-height: 1.68;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

/* Scroll-margin so sticky header never covers anchored headings */
[id] { scroll-margin-top: 6.5rem; }

/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--gold); color: var(--blue-night);
  font-weight: 700; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none; transition: transform .18s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.section-quotes :focus-visible,
.section-contact :focus-visible,
.site-header :focus-visible { outline-color: var(--gold); }

/* ---------- Type scale ---------- */
.h2, .h3, .hero-title, .hero-sub, .h4,
.stat-num, .form-title, .brand-line-1 {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
}

.h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
  line-height: 1.02;
  color: var(--blue);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.h2-light { color: var(--gold); }

.h3 {
  font-size: clamp(1.3rem, 1.15rem + .7vw, 1.7rem);
  line-height: 1.05;
  color: var(--blue);
  margin-bottom: 1.5rem;
}

/* Card and group titles read better in the body face at this size —
   heavy condensed caps get hard to scan below about 20px. */
.h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.005em;
  font-size: clamp(1.0625rem, 1rem + .28vw, 1.1875rem);
  color: var(--blue);
  line-height: 1.3;
  margin-bottom: .5rem;
}

.eyebrow {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.eyebrow-gold  { color: var(--gold); }
/* Gold on a light background is ~1.75:1 and fails AA. Light sections use this. */
.eyebrow-blue  { color: var(--blue); }
.eyebrow-light { color: rgba(255, 255, 255, .92); }

.prose p + p { margin-top: 1.05rem; }
.prose strong { font-weight: 700; color: var(--blue-deep); }

.rule-top {
  padding-top: 2rem;
  border-top: 2px solid var(--gold);
  margin-top: var(--step);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--blue-night);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1.2; text-align: center; text-decoration: none;
  padding: 1rem 1.9rem; border: 2px solid transparent; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold  { background: var(--gold); color: var(--blue-night); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn-sm { padding: .8rem 1.5rem; font-size: .75rem; letter-spacing: .08em; }
.btn-block { width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--blue-deep);
  border-bottom: 3px solid var(--gold);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(14, 32, 80, .28); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.5rem;
}

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: #fff; }
.brand-mark { width: 42px; height: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
/* The wordmark is a name, not a sentence — letting it wrap turns it into
   three stacked fragments as the nav tightens. */
.brand-line-1, .brand-line-2 { white-space: nowrap; }
.brand-line-1 {
  font-size: 1.0625rem; letter-spacing: .02em; color: #fff;
}
.brand-line-2 {
  font-size: .625rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-top: .22rem;
}

.primary-nav { display: flex; align-items: center; gap: 2.25rem; }
.primary-nav > ul { display: flex; align-items: center; gap: 1.6rem; }
.primary-nav a {
  font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .88); text-decoration: none; padding: .4rem 0;
  white-space: nowrap;          /* a wrapped nav label reads as two links */
  border-bottom: 2px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.primary-nav a:hover { color: #fff; border-bottom-color: var(--gold); }
.primary-nav a.is-active { color: var(--gold); border-bottom-color: var(--gold); }
/* Higher specificity than `.primary-nav a`, which would otherwise repaint the
   gold CTA's label white and flatten its padding to the nav-link value —
   leaving the button with no horizontal padding at all. */
.primary-nav .nav-cta {
  color: var(--blue-night);
  border-bottom: none;
  padding: .8rem 1.5rem;
}
.primary-nav .nav-cta:hover { color: var(--blue-night); border-bottom-color: transparent; }

.nav-toggle {
  display: none; width: 2.75rem; height: 2.75rem; padding: 0;
  background: transparent; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius); cursor: pointer;
}
.nav-toggle-bars { display: block; width: 1.25rem; margin-inline: auto; }
.nav-toggle-bars span {
  display: block; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle-bars span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Nav breakpoint. With two links plus the CTA the row needs about 750px; below ~820px
   the labels collide, so the drawer takes over. Kept in sync with the matching
   matchMedia query in site.js — both must move together. */
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .primary-nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blue-deep);
    border-bottom: 3px solid var(--gold);
    padding: .5rem var(--gutter) 1.5rem;
    box-shadow: 0 18px 36px rgba(14, 32, 80, .32);
    display: none;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav > ul a {
    display: block; padding: .95rem 0; font-size: .95rem;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }
  .primary-nav > ul a:hover { border-bottom-color: var(--gold); }
  .nav-cta { margin-top: 1.15rem; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; isolation: isolate; background: var(--blue-deep); overflow: hidden; }

.hero-media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% center;   /* drone centred on narrow screens */
}
@media (min-width: 900px) {
  /* Shift the crop so the aircraft sits right of the headline column */
  .hero-media { object-position: 30% center; }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(14, 32, 80, .97) 0%,
      rgba(19, 45, 108, .93) 34%,
      rgba(27, 66, 143, .72) 58%,
      rgba(29, 111, 195, .38) 100%),
    linear-gradient(to top, rgba(14, 32, 80, .85) 0%, rgba(14, 32, 80, 0) 42%);
}

.hero-inner {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8rem) clamp(4.5rem, 9vw, 7.5rem);
  max-width: calc(var(--wrap) + var(--gutter) * 2);
}

.hero-title {
  font-size: clamp(2.75rem, 1.7rem + 4.2vw, 5rem);
  line-height: .92;
  color: var(--gold);
  margin-bottom: 1rem;
  text-shadow: 0 3px 22px rgba(6, 18, 46, .45);
}
.hero-sub {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  color: rgba(255, 255, 255, .95);
  max-width: 30ch;
  margin-bottom: 1.35rem;
  text-shadow: 0 2px 14px rgba(6, 18, 46, .4);
}
.hero-lead {
  max-width: 50ch;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1rem, .96rem + .25vw, 1.125rem);
  margin-bottom: 2.25rem;
  text-shadow: 0 1px 10px rgba(6, 18, 46, .45);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Gold brand band closing the hero. Purely decorative — height is set here
   because it carries no content to size it. */
.hero-stat {
  position: relative;
  height: clamp(18px, 2.4vw, 30px);
  background: var(--gold);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block: var(--step); }
.section-intro { background: var(--paper); }

.grid-2 { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
.section-intro-copy { color: var(--ink-soft); font-size: clamp(1rem, .96rem + .3vw, 1.1875rem); }

/* Stat block (Why Indiana) */
.stat-block {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.25rem 1.4rem; margin-bottom: 2.25rem;
  background: var(--paper-alt);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.stat-num {
  font-size: clamp(2.75rem, 2.1rem + 2.4vw, 4rem); line-height: .78;
  color: var(--gold); flex: none;
  -webkit-text-stroke: 1px var(--gold-deep);
}
.stat-copy { display: flex; flex-direction: column; }
.stat-lead {
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: var(--blue); line-height: 1;
}
.stat-tail {
  font-size: .875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: .3rem; line-height: 1.4;
}

/* Feature list */
/* Repeated dividers stay quiet; gold is kept for section-level accents
   so it reads as emphasis rather than as the default rule colour. */
.feature-list li { padding-block: 1.35rem; border-top: 1px solid var(--line); }
.feature-list li:first-child { border-top: 2px solid var(--gold); }
.feature-list p { color: var(--ink-soft); }

/* Cards */
.card-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px)  { .card-grid-3, .card-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .card-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-top-color .22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-top-color: var(--gold); }
.card p { color: var(--ink-soft); font-size: .9375rem; }
.card-accent { border-top-color: var(--gold); }
.card-accent:hover { border-top-color: var(--blue); }

/* Image band */
.band {
  height: clamp(180px, 26vw, 320px);
  background-image: url('../img/hero-uav.jpg');
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  background-color: var(--blue-night);
}

.section-capabilities { background: var(--paper-alt); }

/* ============================================================
   QUOTES
   ============================================================ */
.section-quotes {
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(29, 111, 195, .55) 0%, rgba(29, 111, 195, 0) 62%),
    linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 62%, var(--blue-night) 100%);
  color: #fff;
}
.quote-grid { display: grid; gap: 1.5rem; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
@media (min-width: 900px) { .quote-grid { grid-template-columns: 1fr 1fr; } }

.quote-card {
  position: relative;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: 2.75rem 1.75rem 1.75rem;
  backdrop-filter: blur(2px);
}
.quote-card::before {
  content: "\201C";
  position: absolute; top: -.35rem; left: 1.4rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 5.5rem; line-height: 1; color: var(--gold);
}
.quote-card blockquote p {
  font-size: clamp(1rem, .96rem + .35vw, 1.1875rem);
  line-height: 1.6; color: rgba(255, 255, 255, .96);
}
.quote-card figcaption {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   ECOSYSTEM
   ============================================================ */
.eco-layout { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .eco-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.eco-map { background: var(--paper); border-radius: var(--radius); }
.eco-map img { margin-inline: auto; }

.eco-lists { display: grid; gap: 1.75rem; }
.eco-group { padding-top: 1.25rem; border-top: 2px solid var(--gold); }

.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

/* The pill lives on the anchor so the whole chip is a hit target. */
.tag-list a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
  padding: .45rem .8rem;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease);
}
.tag-list a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Outbound arrow. A mask keeps it decorative — assistive tech never
   announces it, unlike generated text content. */
.tag-list a::after {
  content: "";
  width: .62em; height: .62em; flex: none;
  background: currentColor;
  opacity: .5;
  -webkit-mask: var(--icon-external) center / contain no-repeat;
          mask: var(--icon-external) center / contain no-repeat;
}
.tag-list a:hover::after { opacity: .9; }

.tag-note {
  margin-top: .85rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============================================================
   CONTACT
   ============================================================ */
.section-contact {
  background:
    radial-gradient(110% 80% at 10% 0%, rgba(29, 111, 195, .5) 0%, rgba(29, 111, 195, 0) 60%),
    linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 58%, var(--blue-night) 100%);
  color: #fff;
}
.contact-layout { display: grid; gap: clamp(2.25rem, 4vw, 4rem); align-items: start; }
@media (min-width: 940px) { .contact-layout { grid-template-columns: 1fr 1fr; } }

.contact-copy { color: rgba(255, 255, 255, .92); max-width: 50ch; margin-bottom: 2rem; }

.poc { padding-top: 1.5rem; border-top: 2px solid var(--gold); }
.poc-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .4rem;
}
.poc-email a {
  font-size: 1.125rem; font-weight: 600;
  color: #fff; text-decoration-color: var(--gold); text-underline-offset: 4px;
}
.poc-email a:hover { color: var(--gold); }

/* Form */
.contact-form-wrap {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  backdrop-filter: blur(2px);
}
.form-title { font-size: 1.5rem; color: var(--gold); margin-bottom: 1.5rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .88); margin-bottom: .45rem;
}
.req { color: var(--gold); }

.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .8rem .9rem;
  background: #fff;
  border: 2px solid transparent; border-radius: var(--radius);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(251, 193, 44, .6); }
.field .error {
  margin-top: .4rem; font-size: .8125rem; font-weight: 600; color: #FFD97A;
}
.field.has-error input, .field.has-error textarea, .field.has-error select {
  border-color: #FF9A8B;
}

/* Honeypot: off-canvas rather than display:none, which more bots now skip. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-note {
  margin-top: 1rem; font-size: .875rem; min-height: 1.4em;
  color: rgba(255, 255, 255, .9);
}
.form-note.is-ok { color: var(--gold); font-weight: 600; }
.form-note.is-err { color: #FFD97A; font-weight: 600; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--paper); border-top: 4px solid var(--gold); padding-block: 2.75rem; }

.footer-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  padding-bottom: 2rem;
}
.footer-logo { display: inline-flex; align-items: center; text-decoration: none; }
.footer-logo img { height: clamp(34px, 4.5vw, 46px); width: auto; }

.footer-bar {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between; align-items: baseline;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.footer-brand {
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue);
}
.footer-meta { font-size: .875rem; color: var(--ink-muted); }
.footer-meta a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; }
.footer-meta a:hover { color: var(--gold-deep); }

/* ============================================================
   INTERIOR PAGES (membership registration, confirmation)
   ============================================================ */
.page-hero {
  position: relative;
  background:
    radial-gradient(110% 90% at 85% 10%, rgba(29, 111, 195, .5) 0%, rgba(29, 111, 195, 0) 62%),
    linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 60%, var(--blue-night) 100%);
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(3rem, 6vw, 4.75rem);
}
.page-hero-band { height: clamp(14px, 1.8vw, 22px); background: var(--gold); }
.page-hero .page-hero-band {
  position: absolute; left: 0; right: 0; bottom: 0;
}

.page-title {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2rem, 1.45rem + 2.2vw, 3.1rem);
  line-height: 1;
  color: var(--gold);
  margin-bottom: 1rem;
}
.page-lead {
  max-width: 58ch;
  color: rgba(255, 255, 255, .93);
  font-size: clamp(1rem, .96rem + .3vw, 1.125rem);
}

/* --- Registration layout --- */
.form-layout { display: grid; gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
@media (min-width: 900px) { .form-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* Light panel on purpose. The Salesforce markup is pasted in unmodified and may
   carry its own colours; dark text on a light card stays legible whatever it brings. */
.form-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}

.form-aside { padding-top: 1.25rem; border-top: 2px solid var(--gold); }
.form-aside p { color: var(--ink-soft); font-size: .9375rem; margin-top: .75rem; }
.aside-contact a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; }
.aside-contact a:hover { color: var(--gold-deep); }
.link-arrow {
  font-weight: 600; color: var(--blue); text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--gold-deep); }

/* ------------------------------------------------------------
   Salesforce Web-to-Lead wrapper
   ------------------------------------------------------------
   Web-to-Lead emits bare label/input/select/textarea separated by <br>,
   with no classes to hook. These rules style it by element so the pasted
   markup matches the site without being edited by hand — which matters,
   because Salesforce regenerates that HTML whenever the form changes.
   ------------------------------------------------------------ */
.sf-embed { margin-top: 1.5rem; }

.sf-embed label {
  display: block;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-deep); margin-bottom: .4rem;
}
.sf-embed input[type="text"],
.sf-embed input[type="email"],
.sf-embed input[type="tel"],
.sf-embed input[type="url"],
.sf-embed input[type="number"],
.sf-embed select,
.sf-embed textarea {
  width: 100%; max-width: 100%;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .75rem .9rem; margin-bottom: 1rem;
  background: #fff;
  border: 2px solid var(--line); border-radius: var(--radius);
  transition: border-color .16s var(--ease);
}
.sf-embed textarea { min-height: 6.5rem; resize: vertical; }
.sf-embed :is(input, select, textarea):hover { border-color: rgba(251, 193, 44, .8); }
.sf-embed :is(input, select, textarea):focus-visible { border-color: var(--blue); }

.sf-embed input[type="checkbox"],
.sf-embed input[type="radio"] { margin-right: .5rem; accent-color: var(--blue); }

.sf-embed input[type="submit"],
.sf-embed button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: .875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 1rem 1.9rem; margin-top: .5rem;
  background: var(--gold); color: var(--blue-night);
  border: 2px solid var(--gold); border-radius: var(--radius); cursor: pointer;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.sf-embed :is(input[type="submit"], button[type="submit"]):hover {
  background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-2px);
}

.sf-placeholder {
  padding: 1.25rem 1.4rem;
  background: var(--paper-alt);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft); font-size: .9375rem;
}
.sf-placeholder a { color: var(--blue); font-weight: 600; }

/* Salesforce ships inline style attributes on its labels and section headings.
   Inline styles beat any normal rule, so these two need !important. The
   alternative is stripping attributes out of generated markup, which the next
   export would put straight back. */
.sf-embed label { font-weight: 700 !important; }

.sf-embed h2,
.sf-embed h2 span {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); line-height: 1.05;
  color: var(--blue) !important;
}
.sf-embed h2 { margin: 2.25rem 0 .25rem; padding-top: 1.5rem; border-top: 2px solid var(--gold); }
.sf-embed h2:first-of-type { margin-top: 1rem; }

/* The intro paragraph carries an inline font-size; scale it back to lead size. */
.sf-embed > form > p { font-size: 1rem !important; color: var(--ink-soft); margin-bottom: 1.5rem; }
.sf-embed > form > p strong { color: var(--ink); font-weight: 600; }

/* A fixed-width table ships around the hidden Community field. Keep it from
   forcing horizontal scroll if that row is ever un-hidden. */
.sf-embed table { width: 100% !important; max-width: 100%; }

/* Several fields are a bare text node followed by a control, with no element to
   hook, so the spacing has to come from the control itself. */
.sf-embed form { font-size: .9375rem; color: var(--ink-soft); }
.sf-embed br + input,
.sf-embed br + select { margin-top: .4rem; }

.g-recaptcha { margin: 1.75rem 0 .5rem; }

.sf-embed input[type="submit"] { width: 100%; opacity: 1; }

/* --- Confirmation page --- */
.confirm-section { background: var(--paper-alt); }
.confirm { max-width: 62ch; }

.confirm-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; margin-bottom: 1.5rem;
  color: var(--blue); background: var(--gold);
  border-radius: 50%;
}
.confirm-mark svg { width: 2.25rem; height: 2.25rem; }

.confirm .page-title { color: var(--blue); }
.confirm-lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--ink-soft); margin-bottom: 2.25rem;
}

.confirm-next { padding-top: 1.5rem; border-top: 2px solid var(--gold); }
.steps { display: grid; gap: 1rem; margin-top: 1.1rem; counter-reset: step; }
.steps li { display: flex; gap: .9rem; align-items: flex-start; color: var(--ink-soft); }
.step-n {
  flex: none; width: 1.75rem; height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Anton', sans-serif; font-size: .9375rem; line-height: 1;
  color: #fff; background: var(--blue); border-radius: 50%;
}

.confirm-contact { margin-top: 2rem; color: var(--ink-soft); }
.confirm-contact a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; }
.confirm-contact a:hover { color: var(--gold-deep); }

.confirm-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; }
.btn-outline {
  background: transparent; color: var(--blue); border-color: var(--blue);
}
.btn-outline:hover { background: var(--blue); color: #fff; }

/* ============================================================
   MOTION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
/* Never leave content hidden if JS fails to run */
.no-js .reveal { opacity: 1; transform: none; }

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

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header, .nav-toggle, .hero-actions, .contact-form-wrap, .skip-link { display: none !important; }
  .hero-media, .hero-scrim, .band { display: none !important; }
  .hero, .section-quotes, .section-contact { background: #fff !important; color: #000 !important; }
  .hero-title, .h2-light, .eyebrow-gold, .form-title { color: #254A9A !important; }
  .hero-sub, .hero-lead, .contact-copy, .quote-card blockquote p { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { font-size: 11pt; }
}