/* Fonts (Black Ops One + Inter) are loaded from each page <head> with preconnect. */

:root {
  --bg: #080809;
  --panel: #121214;
  --panel-2: #18181b;
  --line: #2a2a2e;
  --line-metal: #3d3d42;
  --text: #f2f0ea;
  --muted: #9a9890;
  --metal: #c5a46e;
  --metal-soft: #a89060;
  --steel: #aeb4b8;
  --steel-dim: #6e7378;
  --accent: #c5a46e;
  --accent-press: #a8884e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  padding-bottom: 84px;
}
a { color: inherit; }
.wrap { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8,8,9,.96);
  border-bottom: 1px solid var(--line-metal);
  box-shadow: 0 1px 0 rgba(197,164,110,.12);
  backdrop-filter: blur(10px);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img {
  width: 56px; height: 56px; object-fit: contain; border-radius: 8px;
  border: 1px solid var(--line-metal);
  box-shadow: 0 0 0 1px rgba(174,180,184,.15);
}
.brand .name {
  font-family: "Black Ops One", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 2.8vw, 22px);
  letter-spacing: .4px;
  color: var(--text);
  line-height: 1.15;
  background: linear-gradient(180deg, #f5f2ea 0%, #c5a46e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand .tag {
  font-size: 10px;
  color: var(--steel);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 2px;
}
.nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nav a {
  text-decoration: none; font-size: 13px; font-weight: 400;
  font-family: "Black Ops One", system-ui, sans-serif;
  letter-spacing: .3px;
  padding: 8px 12px; border-radius: 999px; color: #d4d2cc;
}
.nav a:hover, .nav a.active {
  background: var(--panel-2);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--line-metal);
}
.nav a.cta {
  background: linear-gradient(180deg, #d4b57a 0%, #a8884e 100%);
  color: #14110c;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 8px rgba(0,0,0,.35);
}
.nav a.cta:hover { filter: brightness(1.05); color: #0c0a08; }
.hero {
  padding: 52px 0 40px;
  background:
    linear-gradient(180deg, rgba(8,8,9,.55), rgba(8,8,9,.92)),
    radial-gradient(ellipse at 85% 0%, rgba(197,164,110,.14), transparent 42%),
    radial-gradient(ellipse at 10% 40%, rgba(174,180,184,.06), transparent 40%),
    #080809;
  border-bottom: 1px solid var(--line);
}
.kicker {
  color: var(--metal); font-size: 12px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 10px;
}
h1 {
  font-family: "Black Ops One", system-ui, sans-serif;
  font-size: clamp(28px, 5vw, 44px); line-height: 1.12; font-weight: 400;
  margin-bottom: 14px; max-width: 20ch;
  letter-spacing: .2px;
}
.sub { color: var(--muted); font-size: 16px; max-width: 62ch; margin-bottom: 22px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 800; font-size: 14px;
  padding: 13px 18px; border-radius: 999px; border: 1px solid transparent;
}
.btn-primary {
  background: linear-gradient(180deg, #d4b57a 0%, #a8884e 100%);
  border-color: #8f7342;
  color: #14110c;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 2px 10px rgba(0,0,0,.35);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary {
  background: transparent;
  border-color: var(--steel-dim);
  color: var(--steel);
}
.btn-secondary:hover {
  border-color: var(--steel);
  color: #fff;
}
.section { padding: 40px 0; border-bottom: 1px solid var(--line); }
.section h2 {
  font-family: "Black Ops One", system-ui, sans-serif;
  font-size: clamp(20px, 3vw, 26px); font-weight: 400;
  margin-bottom: 10px; letter-spacing: .2px;
}
.section p { color: var(--muted); margin-bottom: 14px; max-width: 70ch; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: linear-gradient(180deg, #161618 0%, #101012 100%);
  border: 1px solid var(--line-metal);
  border-radius: 14px; padding: 16px; text-decoration: none;
  box-shadow: 0 1px 0 rgba(197,164,110,.06) inset;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover {
  border-color: var(--metal-soft);
  transform: translateY(-1px);
}
.card strong {
  display: block; margin-bottom: 4px; color: #f5f3ed;
  font-family: "Black Ops One", system-ui, sans-serif;
  font-weight: 400; letter-spacing: .2px;
}
.card span { color: var(--muted); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block; text-decoration: none;
  border: 1px solid var(--line-metal);
  border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 700;
  color: var(--steel);
}
.chip:hover { border-color: var(--metal); color: var(--metal); }
.band {
  margin: 28px 0; padding: 22px; border-radius: 14px;
  background: linear-gradient(135deg, #141310 0%, #101012 60%);
  border: 1px solid #3a3428;
  box-shadow: 0 0 0 1px rgba(197,164,110,.05) inset;
}
.band strong { color: var(--metal); }
.list { color: var(--muted); padding-left: 18px; }
.list li { margin: 6px 0; }
.form label { display: block; font-size: 12px; font-weight: 700; margin: 12px 0 6px; color: #d8d5cc; }
.form input, .form select, .form textarea {
  width: 100%; max-width: 560px; background: #0e0e10;
  border: 1px solid var(--line-metal);
  border-radius: 10px; padding: 12px; color: #fff; font-size: 14px;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--metal-soft);
  box-shadow: 0 0 0 2px rgba(197,164,110,.18);
}
.form textarea { min-height: 90px; resize: vertical; }
.form button {
  margin-top: 16px; cursor: pointer;
  background: linear-gradient(180deg, #d4b57a 0%, #a8884e 100%);
  color: #14110c;
  border: 1px solid #8f7342; border-radius: 999px;
  padding: 14px 20px; font-weight: 800; font-size: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;
}
.form button:hover { filter: brightness(1.05); }
.footer { padding: 28px 0 20px; color: #6e6c66; font-size: 13px; }
.footer a { color: var(--steel); text-decoration: none; }
.footer a:hover { color: var(--metal); }
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
  padding: 10px 12px; background: rgba(8,8,9,.97);
  border-top: 1px solid var(--line-metal);
}
.sticky a {
  text-align: center; padding: 12px 8px; border-radius: 999px;
  font-weight: 800; font-size: 13px; text-decoration: none; color: #fff;
}
.sticky .call {
  border: 1px solid var(--steel-dim); background: #0c0c0e; color: var(--steel);
}
.sticky .quote {
  background: linear-gradient(180deg, #d4b57a 0%, #a8884e 100%);
  border: 1px solid #8f7342; color: #14110c;
}
.photo-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 8px;
}
.photo-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-metal);
  background: var(--panel);
  aspect-ratio: 4 / 3;
  box-shadow: 0 1px 0 rgba(197,164,110,.06) inset;
}
.photo-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.92) contrast(1.04);
}
.photo-card .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  font-size: 12px; font-weight: 700; color: #e8e4d8;
}
.photo-card.wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
@media (min-width: 720px) {
  .photo-card.featured { grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
}
.hero-split {
  display: grid; gap: 28px; align-items: center;
}
@media (min-width: 860px) {
  .hero-split { grid-template-columns: 1.1fr .9fr; }
}
.hero-shot {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-metal);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(197,164,110,.08);
  aspect-ratio: 4 / 3;
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote-aside {
  margin-top: 28px; max-width: 560px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-metal);
}
.quote-aside img { width: 100%; height: 200px; object-fit: cover; display: block; }
@media (min-width: 800px) {
  .sticky { display: none; }
}

/* ==========================================================================
   Homepage hero (Option One, Variant B): full-bleed keynote/LED-wall image,
   copy on the left (big face/G2AV lockup removed Oct 8), dark-to-clear L→R overlay
   (top-to-bottom on mobile). Header sits over the hero on the homepage.
   ========================================================================== */
.has-hero { --hh: 81px; }
.header.over {
  background: linear-gradient(180deg, rgba(8,8,9,.82) 0%, rgba(8,8,9,.55) 100%);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: none;
}
.hero-full {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--hh, 81px));
  min-height: max(620px, 92vh);
  display: flex;
  border-bottom: 1px solid var(--line);
  background: #050506;
}
.hero-full .bg, .hero-full .bg img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-full .scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-full .inner {
  position: relative; width: min(1100px, calc(100% - 32px)); margin: 0 auto;
  padding: calc(var(--hh, 81px) + 40px) 0 56px;
  display: flex; flex-direction: column;
}
.btn-ghost-white {
  background: rgba(8,8,9,.25); border-color: rgba(255,255,255,.55); color: #fff;
  backdrop-filter: blur(4px);
}
.btn-ghost-white:hover { border-color: #fff; background: rgba(8,8,9,.45); }

.hero-b .bg img { object-position: 60% 50%; }
.hero-b .scrim {
  background:
    linear-gradient(90deg, rgba(8,8,9,.72) 0%, rgba(8,8,9,.62) 30%, rgba(8,8,9,.25) 58%, rgba(8,8,9,0) 80%),
    linear-gradient(180deg, transparent 70%, rgba(8,8,9,.5) 100%);
}
.hero-b .inner { justify-content: center; align-items: flex-start; }
.hero-b .copy { max-width: 560px; }
.hero-b .kicker { margin: 0 0 10px; }
.hero-b h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.55); max-width: 18ch; }
.hero-b .sub { color: #d6d3cb; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.hero-b .trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.hero-b .trust span::before { content: "◆"; color: var(--metal); margin-right: 8px; font-size: 9px; vertical-align: 2px; }

@media (max-width: 720px) {
  .hero-full { min-height: max(560px, 86svh); }
  .hero-full .inner { padding-top: calc(var(--hh, 81px) + 28px); padding-bottom: 40px; }
  .hero-b .bg img { object-position: 64% 50%; }
  .hero-b .scrim {
    background: linear-gradient(180deg, rgba(8,8,9,.45) 0%, rgba(8,8,9,.55) 35%, rgba(8,8,9,.86) 100%);
  }
  .hero-b .inner { justify-content: flex-end; }
  .hero-b .sub { font-size: 15px; }
  .hero-b .trust { display: none; }
}

/* ==========================================================================
   Oct 8 2026 — bigger header bar (~2x: 81px -> 162px desktop) and
   homepage keynote/LED-wall background treatment reused on inner pages.
   ========================================================================== */
.header-inner { min-height: 161px; padding: 0; gap: 24px; }   /* +1px border = 162px */
.brand { gap: 18px; }
.brand img { width: 104px; height: 104px; border-radius: 14px; }
.brand .name { font-size: clamp(20px, 2.6vw, 34px); letter-spacing: .6px; }
.brand .tag { font-size: 13px; letter-spacing: 2px; margin-top: 6px; }
.nav { gap: 10px; }
.nav a { font-size: clamp(15px, 1.3vw, 18px); padding: 12px 20px; }
.nav a.cta { padding: 12px 24px; }
.has-hero { --hh: 162px; }

@media (max-width: 1080px) {
  .header-inner { min-height: 121px; gap: 16px; }
  .brand img { width: 80px; height: 80px; }
  .brand .tag { font-size: 11px; }
  .nav a { padding: 10px 14px; }
  .has-hero { --hh: 122px; }
}

/* Mobile/small tablet: two-row bar. Row 1 = brand + Quote CTA, row 2 = Services / Locations / About. */
@media (max-width: 900px) {
  .header-inner {
    min-height: 0; flex-wrap: wrap; justify-content: flex-start;
    gap: 8px 10px; padding: 12px 0 10px;
  }
  .header-inner > .nav { display: contents; }
  .brand { flex: 1 1 calc(100% - 130px); min-width: 0; gap: 12px; order: 0; }
  .brand img { width: 64px; height: 64px; border-radius: 10px; flex: none; }
  .brand .name { font-size: 18px; }
  .brand .tag { font-size: 10px; letter-spacing: 1.4px; margin-top: 3px; }
  .nav a { font-size: 15px; padding: 9px 10px; text-align: center; }
  .nav a.cta { order: 1; flex: none; padding: 11px 18px; }
  .nav a:not(.cta) { order: 2; flex: 1 0 30%; }
  .has-hero { --hh: 136px; }
}

/* Inner pages: ONE stage photo per page, held by the top banner (like the homepage
   hero holds it). v5: the old fixed whole-page backdrop copy was removed; the banner's
   photo extends a little below the banner and fades into the page background, so the
   stage never restarts further down the page. */
html { background: var(--bg); }
body:not(.has-hero) { position: relative; isolation: isolate; }
body:not(.has-hero) .hero {
  position: relative;
  padding: 72px 0 64px;
  border-bottom: 0;
  background: none;
}
body:not(.has-hero) .hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + var(--stage-tail, 220px)); z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,9,0) 0, rgba(8,8,9,0) calc(100% - var(--stage-tail, 220px) - 160px), rgba(8,8,9,.72) calc(100% - var(--stage-tail, 220px) + 40px), #080809 100%),
    linear-gradient(90deg, rgba(8,8,9,.86) 0%, rgba(8,8,9,.80) 35%, rgba(8,8,9,.52) 60%, rgba(8,8,9,.22) 85%, rgba(8,8,9,.15) 100%),
    url(/assets/hero/hero-keynote-ledwall-1680.jpg) 60% 50% / cover no-repeat;
  background:
    linear-gradient(180deg, rgba(8,8,9,0) 0, rgba(8,8,9,0) calc(100% - var(--stage-tail, 220px) - 160px), rgba(8,8,9,.72) calc(100% - var(--stage-tail, 220px) + 40px), #080809 100%),
    linear-gradient(90deg, rgba(8,8,9,.86) 0%, rgba(8,8,9,.80) 35%, rgba(8,8,9,.52) 60%, rgba(8,8,9,.22) 85%, rgba(8,8,9,.15) 100%),
    image-set(url(/assets/hero/hero-keynote-ledwall-1680.webp) type("image/webp"), url(/assets/hero/hero-keynote-ledwall-1680.jpg) type("image/jpeg")) 60% 50% / cover no-repeat;
}
body:not(.has-hero) .hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
body:not(.has-hero) .hero .sub { color: #d6d3cb; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
body:not(.has-hero) .section { background: transparent; }
@media (max-width: 720px) {
  body:not(.has-hero) .hero { padding: 48px 0 44px; }
  body:not(.has-hero) .hero::before {
    --stage-tail: 160px;
    background:
      linear-gradient(180deg, rgba(8,8,9,.55) 0%, rgba(8,8,9,.70) 40%, rgba(8,8,9,.86) calc(100% - 160px), #080809 100%),
      url(/assets/hero/hero-keynote-ledwall-900.webp) 64% 50% / cover no-repeat;
  }
}

/* ==========================================================================
   Oct 8 2026 (v2) — larger header title, face fills the logo frame,
   "Central Florida Crew" subline in Black Ops One. Header height unchanged.
   ========================================================================== */
.header .wrap { width: min(1280px, calc(100% - 48px)); }   /* room for the bigger title */
.brand img {
  object-fit: cover; padding: 0; overflow: hidden;
  background: #0b0b0d; display: block; flex: none;
}
.brand .name { font-size: clamp(22px, 3.25vw, 48px); white-space: nowrap; line-height: 1.05; }
.brand .tag {
  font-family: "Black Ops One", system-ui, sans-serif; font-weight: 400;
  font-size: clamp(13px, 1.4vw, 20px); letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--metal); margin-top: 8px; line-height: 1.1;
}
.nav { gap: 6px; }
.nav a { padding: 12px 16px; }
@media (max-width: 1080px) {
  .brand .tag { font-size: clamp(12px, 1.4vw, 15px); letter-spacing: 2px; margin-top: 6px; }
  .nav a { padding: 10px 12px; }
}
@media (max-width: 1000px) {
  /* same two-row layout as the <=900px block, now from 1000px */
  .header-inner {
    min-height: 0; flex-wrap: wrap; justify-content: flex-start;
    gap: 8px 10px; padding: 12px 0 10px;
  }
  .header-inner > .nav { display: contents; }
  .brand { flex: 1 1 calc(100% - 130px); min-width: 0; gap: 12px; order: 0; }
  .brand img { width: 64px; height: 64px; border-radius: 10px; }
  .nav a { font-size: 15px; padding: 9px 10px; text-align: center; }
  .nav a.cta { order: 1; flex: none; padding: 11px 18px; }
  .nav a:not(.cta) { order: 2; flex: 1 0 30%; }
  .brand .name { font-size: 26px; }
  .brand .tag { font-size: 13px; letter-spacing: 1.6px; margin-top: 5px; }
  .has-hero { --hh: 136px; }
}
@media (max-width: 600px) {
  .header .wrap { width: calc(100% - 32px); }
  .brand .name { font-size: 21px; white-space: normal; line-height: 1.08; }
  .brand .tag { font-size: 11px; letter-spacing: 1.2px; margin-top: 4px; }
}
@media (max-width: 380px) {
  .brand .name { font-size: 18px; }
  .brand .tag { font-size: 10px; letter-spacing: 1px; }
}
@media (max-width: 340px) {
  .brand { gap: 8px; }
  .brand img { width: 52px; height: 52px; }
  .nav a { font-size: 13px; padding: 8px 6px; }
  .nav a.cta { padding: 10px 14px; }
}

/* ==========================================================================
   Oct 8 2026 (v3) — header face logo without the square box: transparent
   cutout (assets/logo-face-cutout.*), same rendered height as before.
   ========================================================================== */
.brand .brand-mark { display: block; flex: none; line-height: 0; }
.brand img {
  border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0;
  object-fit: contain; width: auto; height: 104px;
}
@media (max-width: 1080px) { .brand img { width: auto; height: 80px; } }
@media (max-width: 1000px) { .brand img { width: auto; height: 64px; border-radius: 0; } }
@media (max-width: 340px)  { .brand img { width: auto; height: 52px; } }

/* ==========================================================================
   Oct 8 2026 (v4) — inner pages: see-through header over the stage-photo
   banner, same treatment as the homepage (.header.over + hero tucked under).
   Homepage rules untouched. No scroll JS on the homepage, so none here.
   ========================================================================== */
body:not(.has-hero) { --hh: 162px; }
@media (max-width: 1080px) { body:not(.has-hero) { --hh: 122px; } }
@media (max-width: 1000px) { body:not(.has-hero) { --hh: 136px; } }
body:not(.has-hero) .header {
  background: linear-gradient(180deg, rgba(8,8,9,.82) 0%, rgba(8,8,9,.55) 100%);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: none;
}
body:not(.has-hero) .hero {
  margin-top: calc(-1 * var(--hh, 162px));
  padding-top: calc(var(--hh, 162px) + 72px);
}
@media (max-width: 720px) {
  body:not(.has-hero) .hero { padding-top: calc(var(--hh, 136px) + 48px); }
}

/* Oct 14 2026 (v7) — Crew FAQ / Join the Team only (scoped to .faq / .crew sections). */
.faq h3, .crew h3 {
  font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: 17px;
  color: #f2f0ea; margin: 22px 0 6px; line-height: 1.35;
}
.faq h2:not(:first-child), .crew h2:not(:first-child) { margin-top: 34px; }
.faq h2 + p + h3 { margin-top: 12px; }
.faq address { font-style: normal; color: var(--muted); margin-bottom: 14px; line-height: 1.6; }
.faq address a, .faq p a:not(.btn), .faq .list a, .crew p a:not(.btn), .crew .list a { color: var(--metal); }
.faq ol.list, .crew ol.list { padding-left: 22px; }
.faq .list, .crew .list { margin-bottom: 14px; }
.crew .cards { margin-top: 6px; }

/* v10: content sections + small visual fixes */
.mt{margin-top:28px}
.lead{font-size:1.08rem;line-height:1.65;max-width:72ch}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:18px}
.two-col h3{margin:0 0 8px}
.steps{padding-left:1.3em;line-height:1.6;max-width:75ch}
.steps li{margin:0 0 10px}
.note{opacity:.85;font-size:.95rem;max-width:75ch}
.band-cta{text-align:center}
.band-cta .btn-row{justify-content:center;flex-wrap:wrap;gap:12px}
.notfound{text-align:center;padding:72px 0}
.notfound .code{font-size:clamp(4rem,14vw,8rem);line-height:1;margin:0}
img{max-width:100%;height:auto}
h1,h2,h3,p,li{overflow-wrap:anywhere}
.chips{flex-wrap:wrap}
@media (max-width:720px){.nav{flex-wrap:wrap;row-gap:6px}.two-col{gap:12px}body{padding-bottom:72px}}

/* Oct 21 2026 (v11) — header overlap fix. The title was white-space:nowrap at up to
   48px (3.25vw) inside a flex item that could shrink, so with the wider 6-link nav the
   text spilled out of .brand and ran under the nav links. Now: brand never shrinks
   below its text, title scales with the space left, and the nav wraps to its own row
   (right-aligned) instead of overlapping if the room ever runs out. */
@media (min-width: 1001px) {
  .header-inner { flex-wrap: wrap; row-gap: 10px; column-gap: 24px; }
  .brand { flex: 0 0 auto; min-width: 0; }
  .brand .name { font-size: clamp(22px, 2.3vw, 36px); }
  .nav { flex: 1 1 auto; justify-content: flex-end; }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  .nav { gap: 4px; }
  .nav a { padding: 10px 10px; font-size: 15px; }
  .nav a.cta { padding: 10px 16px; }
}
@media (max-width: 1000px) {
  .has-hero, body:not(.has-hero) { --hh: 186px; }
}
@media (max-width: 600px) {
  .has-hero, body:not(.has-hero) { --hh: 186px; }
}

/* Oct 21 2026 (v12) — Gary: much larger title, brand centered, nav centered below. */
@media (min-width: 1001px) {
  .header-inner { flex-direction: column; justify-content: center; align-items: center;
    flex-wrap: nowrap; min-height: 0; padding: 18px 0 14px; row-gap: 12px; }
  .brand { justify-content: center; gap: 22px; }
  .brand .name { font-size: clamp(48px, 5.4vw, 88px); line-height: 1; }
  .brand .tag { font-size: clamp(15px, 1.5vw, 22px); letter-spacing: 4px; margin-top: 10px; }
  .brand img { height: clamp(96px, 8.5vw, 130px); }
  .nav { flex: 0 0 auto; justify-content: center; }
}
@media (min-width: 1081px) { .has-hero, body:not(.has-hero) { --hh: calc(97px + clamp(96px, 8.5vw, 130px)); } }
@media (min-width: 1001px) and (max-width: 1080px) { .has-hero, body:not(.has-hero) { --hh: 184px; } }

/* Oct 21 2026 (v13) — desktop: nav left edge lines up with the title text (not the logo). */
@media (min-width: 1001px) {
  .header-inner { display: grid; grid-template-columns: auto; justify-content: center; justify-items: start; }
  .nav { justify-content: flex-start; padding-left: calc(clamp(96px, 8.5vw, 130px) * 158 / 296 + 22px); }
}

/* Oct 21 2026 (v14) — align the first nav label's text (not its pill) with the title text. */
@media (min-width: 1001px) {
  .nav { padding-left: calc(clamp(96px, 8.5vw, 130px) * 158 / 296 + 22px - 16px); }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  .nav { padding-left: calc(clamp(96px, 8.5vw, 130px) * 158 / 296 + 22px - 10px); }
}