/* =======================================================
   TEMPLATE 3 — DRIFTWATER
   Contemporary editorial. Saltwater / coastal charter flavor.
   - Transparent sticky nav that solidifies on scroll
   - Numbered section markers (01 / 02 / 03) in serif
   - Asymmetric magazine-style grid on home
   - Navy + copper + warm off-white palette
   - Archivo (display sans) + Spectral (serif body) + IBM Plex Mono (accents)
   ======================================================= */

/* ---------- TOKENS ---------- */
:root {
  --bg:            #F4F1EA;         /* clean warm off-white */
  --bg-alt:        #E7E4DB;         /* light stone */
  --bg-deep:       #0A1B34;         /* deep patriotic navy */
  --bg-deep-2:     #0F274A;         /* secondary navy */
  --ink:           #10192B;
  --ink-soft:      #3C4759;
  --ink-muted:     #6B7684;
  --line:          #D5D0C4;
  --line-dark:     rgba(255,255,255,.16);
  --accent:        #C8102E;         /* flag red */
  --accent-2:      #E4C14D;         /* gold */
  --accent-ink:    #7A0C1E;         /* deep red */
  --white:         #FFFFFF;

  /* radius */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* shadows */
  --s-card:  0 14px 40px -18px rgba(14,35,54,.28), 0 2px 6px rgba(14,35,54,.06);
  --s-hover: 0 26px 56px -18px rgba(14,35,54,.38), 0 3px 10px rgba(14,35,54,.10);
  --s-deep:  0 40px 90px -30px rgba(14,35,54,.55);
  --s-btn:   0 8px 22px -10px rgba(200,16,46,.55);

  /* geometry */
  --nav-h: 84px;
  --container: 1240px;

  /* timing */
  --t: 260ms cubic-bezier(.2,.7,.2,1);
}

/* ---------- RESET + BASE ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: "Barlow", system-ui, -apple-system, sans-serif !important;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t); }
a:hover { color: var(--accent); }

.wrap {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}

/* Display / UI sans */
h1,h2,h3,h4,.ui,.eyebrow,.btn,.nav-main a,.footer-col h4 {
  font-family: "Oswald", "Barlow Condensed", system-ui, sans-serif;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); line-height: 1.04; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
/* MB widget injects a normalize `h1 { font-size: 2em }` rule that ties on
   specificity (0,0,1) and wins on source order. Pin hero h1 with higher
   specificity AND !important so the title doesn't collapse to ~34px. */
.hero h1 {
  font-size: clamp(2.4rem, 4.8vw, 4.2rem) !important;
  line-height: 1.04 !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 .5em !important;
}
h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.1;  margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; }
h3 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 .4em; font-weight: 600; }
h4 { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin: 0 0 .4em; }
p  { margin: 0 0 1em; color: var(--ink-soft); }

.display-serif {
  font-family: inherit;
  font-weight: 600;
  font-style: normal;
  color: var(--accent);
  letter-spacing: .01em;
}

/* Eyebrow = numbered + label (mono accent) */
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  font-weight: 500;
}
.eyebrow .num {
  font-family: "Spectral", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1;
}
.section--dark .eyebrow .num { color: var(--white); }
.section--dark .eyebrow { color: var(--accent-2); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-size: 14px;
  letter-spacing: .06em;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t);
  will-change: transform;
  line-height: 1;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--t); }
.btn:hover svg { transform: translateX(4px); }

.btn.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--s-btn); }
.btn.btn--primary:hover { background: #A50D26; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(200,16,46,.6); color:#fff; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; transform: translateY(-2px); color:#fff; }

.btn.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.btn--ghost:hover { background: var(--ink); color: #fff; }

.btn.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn.btn--ghost-light:hover { background: #fff; color: var(--ink); }

/* ---------- HEADER ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  z-index: 60;
  background: transparent;
  transition: background var(--t), box-shadow var(--t), backdrop-filter var(--t);
}
.site-header.is-scrolled,
body:not(.home) .site-header {
  background: rgba(244,239,230,.92);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

.nav-wrap {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 19px;
  color: var(--ink);
  text-transform: uppercase;
}
.home .site-header:not(.is-scrolled) .brand,
.home .site-header:not(.is-scrolled) .nav-main a,
.home .site-header:not(.is-scrolled) .nav-dropdown > button { color: #fff; }
.brand-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(184,112,58,.22);
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-main a {
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding: 8px 0;
}
.nav-main a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav-main a:hover::after,
.nav-main a.is-active::after { transform: scaleX(1); }

.nav-dropdown { position: relative; }
/* Invisible bridge across the gap between trigger and panel so the menu
   doesn't close on cursor traversal. */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -16px; right: -16px;
  height: 12px;
  pointer-events: auto;
  display: none;
}
.nav-dropdown:hover::after,
.nav-dropdown.open::after { display: block; }
.nav-dropdown > button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Match the Archivo nav links — no font: inherit, which would cascade Spectral from body. */
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.nav-dropdown > button::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -12px;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px;
  box-shadow: var(--s-card);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: all var(--t);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 12px;
  font-size: 12.5px;
  letter-spacing: .08em;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover { background: var(--bg-alt); color: var(--accent); }

/* Dark-header builds: white nav-link color cascades into the dropdown menu
   and makes its text invisible on its white background. Pin panel ink with
   higher-specificity rules. */
.site-header .nav-dropdown-menu a {
  color: var(--ink);
  background: transparent;
}
.site-header .nav-dropdown-menu a:hover {
  background: var(--bg-alt);
  color: var(--accent);
}

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .phone {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: .05em;
  color: inherit;
}
.home .site-header:not(.is-scrolled) .nav-cta .phone { color: #fff; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 0; background: transparent;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  margin-inline: auto;
  transition: transform var(--t), opacity var(--t);
}
.home .site-header:not(.is-scrolled) .nav-toggle span,
.home .site-header:not(.is-scrolled) .nav-toggle span::before,
.home .site-header:not(.is-scrolled) .nav-toggle span::after { background: #fff; }
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; left: 0; }
.nav-toggle span::after  { position: absolute; top:  7px; left: 0; }
.is-open .nav-toggle span { transform: rotate(45deg); }
.is-open .nav-toggle span::before { transform: translate(0,7px) rotate(-90deg); }
.is-open .nav-toggle span::after  { opacity: 0; }

@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-main,
  .nav-cta .btn {
    display: none;
  }
  .is-open .nav-main {
    display: flex;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: var(--bg);
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--s-card);
  }
  .is-open .nav-main a { color: var(--ink); }
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 8px 0 0 16px;
    background: transparent;
    display: none;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  color: #fff;
  min-height: 720px;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 60px) 0 80px;
  overflow: hidden;
  background-color: #0a1720;
}
.hero--home { min-height: 100vh; }
.hero--page { min-height: 440px; align-items: flex-end; padding-bottom: 60px; }

.hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.06);
  animation: heroZoom 18s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,23,32,.30) 0%, rgba(10,23,32,.55) 60%, rgba(10,23,32,.88) 100%);
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
  max-width: 1100px;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 36px; height: 1px;
  background: var(--accent-2);
}
.hero h1 {
  color: #fff;
  max-width: 16ch;
}
.hero h1 em {
  font-family: "Spectral", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
}
.hero__sub {
  font-size: 1.12rem;
  color: rgba(255,255,255,.82);
  max-width: 58ch;
  margin-bottom: 28px;
}
.hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__meta {
  position: absolute;
  right: 24px;
  bottom: 30px;
  z-index: 2;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  text-align: right;
  line-height: 1.9;
}
.hero__meta span { display: block; }
@media (max-width: 820px) {
  .hero__meta { display: none; }
  .hero { min-height: 640px; }
}

/* Breadcrumb on page heroes */
.breadcrumb {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 18px;
}
.breadcrumb a { color: rgba(255,255,255,.7); }
.breadcrumb a:hover { color: var(--accent-2); }
.breadcrumb span { margin: 0 10px; }

/* ---------- SECTIONS ---------- */
.section {
  padding: 110px 0;
  position: relative;
}
.section--tight { padding: 80px 0; }
.section--alt    { background: var(--bg-alt) !important; }
.section--dark   { background: var(--bg-deep) !important; color: rgba(255,255,255,.88); }
.section--dark p { color: rgba(255,255,255,.75); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: #fff; }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}
.section-head p { max-width: 48ch; margin: 0; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .section { padding: 80px 0; }
}

/* ---------- INTRO STATEMENT ---------- */
.intro-statement {
  max-width: 1040px;
}
.intro-statement h2 {
  font-family: "Spectral", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: -.005em;
  margin: 0;
}
.intro-statement h2 em {
  font-family: "Archivo", sans-serif;
  font-style: normal;
  font-weight: 800;
  color: var(--accent);
}
.intro-statement .byline {
  margin-top: 28px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- MAGAZINE GRID (home trips) ---------- */
.mag-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
}
.mag-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--s-card);
  transition: transform var(--t), box-shadow var(--t);
}
.mag-card:hover { transform: translateY(-4px); box-shadow: var(--s-hover); }
.mag-card__img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  transition: transform 700ms ease;
}
.mag-card:hover .mag-card__img { transform: scale(1.04); }
.mag-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 26px;
  color: #fff;
  background: linear-gradient(0deg, rgba(10,23,32,.92) 0%, rgba(10,23,32,.05) 100%);
}
.mag-card__body .num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--accent-2);
  text-transform: uppercase;
}
.mag-card__body h3 {
  color: #fff;
  margin: 8px 0 4px;
  font-size: 1.6rem;
  letter-spacing: -.01em;
}
.mag-card__body .meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* Asymmetric spans */
.mag-card.is-lg { grid-column: span 7; }
.mag-card.is-md { grid-column: span 5; }
.mag-card.is-sm { grid-column: span 4; }
.mag-card.is-wide { grid-column: span 8; }
@media (max-width: 900px) {
  .mag-card,
  .mag-card.is-lg,
  .mag-card.is-md,
  .mag-card.is-sm,
  .mag-card.is-wide { grid-column: span 12; }
}

/* ---------- FEATURE ROW (editorial icon + copy) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.feature {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.section--dark .feature { border-color: var(--line-dark); }
.feature .num-big {
  font-family: "Spectral", serif;
  font-style: italic;
  font-size: 54px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 18px;
  display: block;
}
.feature h3 { margin-bottom: 10px; }
.feature p { margin: 0; font-size: .97rem; }
@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- SPLIT (image + prose) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split--flip .split__img { order: 2; }
.split__img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-lg);
  box-shadow: var(--s-card);
}
.split__body h2 { margin-bottom: 18px; }
.split__pullquote {
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  font-family: "Spectral", serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.55;
}
.split__pullquote cite {
  display: block;
  margin-top: 14px;
  font-family: "IBM Plex Mono", monospace;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--flip .split__img { order: -1; }
}

/* ---------- GALLERY (masonry via CSS columns) ---------- */
/* Each tile keeps its natural aspect ratio so no white gaps between rows. */
.gallery-grid {
  column-count: 4;
  column-gap: 14px;
}
.gallery-grid .tile {
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  border-radius: var(--r-md);
  display: block;
  transition: transform var(--t);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.gallery-grid img.tile { object-fit: cover; }
.gallery-grid .tile:hover { transform: scale(1.02); }
@media (max-width: 1100px) { .gallery-grid { column-count: 3; } }
@media (max-width: 760px)  { .gallery-grid { column-count: 2; } }
@media (max-width: 480px)  { .gallery-grid { column-count: 1; } }

/* ---------- TRIPS (hub page) ---------- */
.trips-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.trip-row {
  display: grid;
  grid-template-columns: 120px 1fr 260px 180px;
  gap: 40px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t);
  position: relative;
}
.trip-row:hover { background: rgba(255,255,255,.4); }
.trip-row__num {
  font-family: "Spectral", serif;
  font-style: italic;
  font-size: 38px;
  color: var(--accent);
  line-height: 1;
}
.trip-row__title h3 { margin-bottom: 4px; }
.trip-row__title p { margin: 0; font-size: .95rem; }
.trip-row__meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.9;
}
.trip-row__meta strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}
.trip-row__cta { justify-self: end; }
@media (max-width: 900px) {
  .trip-row { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .trip-row__cta { justify-self: start; }
}

/* ---------- DETAIL (pricing, includes) ---------- */
.detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
}
.detail-grid h2 { margin-bottom: 20px; }
.detail-grid ul { padding-left: 0; list-style: none; margin: 0; }
.detail-grid ul li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.detail-grid ul li::before {
  content: "—";
  color: var(--accent);
  margin-right: 12px;
}
.price-card {
  background: var(--ink);
  color: #fff;
  padding: 36px;
  border-radius: var(--r-lg);
  box-shadow: var(--s-deep);
}
.price-card .price {
  font-family: "Spectral", serif;
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  color: var(--accent-2);
  margin: 8px 0 18px;
}
.price-card .price sup {
  font-size: 22px;
  vertical-align: top;
  margin-right: 10px;
  position: relative;
  top: 8px;
  display: inline-block;
  font-style: normal;
}
.price-card small {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.price-card p { color: rgba(255,255,255,.82); margin: 18px 0 24px; }
.price-card .btn { width: 100%; justify-content: center; }

/* Pricing rows — used inside .price-card for tabular per-package pricing
   and standalone for events / multi-tier pricing pages. */
.price-card .pricing-rows,
.pricing-rows {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.price-card .pricing-rows li,
.pricing-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.price-card .pricing-rows li:last-child,
.pricing-rows li:last-child { border-bottom: 0; }
.price-card .pricing-rows li > span,
.pricing-rows li > span {
  color: rgba(255,255,255,.78);
  font-size: .92rem;
}
.price-card .pricing-rows li > strong,
.pricing-rows li > strong {
  color: var(--accent-2);
  font-weight: 600;
  white-space: nowrap;
  font-family: "Archivo", "Inter", sans-serif;
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- REVIEWS / QUOTES STRIP ---------- */
.quotes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.quote {
  padding: 36px 32px;
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--s-card);
  position: relative;
}
.section--dark .quote { background: var(--bg-deep-2); color: rgba(255,255,255,.9); }
.quote::before {
  content: "\201C";
  font-family: "Spectral", serif;
  font-size: 110px;
  color: var(--accent);
  line-height: 1;
  position: absolute;
  top: 12px; left: 22px;
  opacity: .5;
}
.quote blockquote {
  font-family: "Spectral", serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  margin: 30px 0 18px;
  color: inherit;
}
.quote cite {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-style: normal;
  display: block;
}
.section--dark .quote cite { color: var(--accent-2); }
@media (max-width: 900px) {
  .quotes-row { grid-template-columns: 1fr; }
}

/* ---------- CTA BANNER ---------- */
.cta-banner {
  background: var(--bg-deep);
  color: #fff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(184,112,58,.28), transparent 60%),
    radial-gradient(50% 60% at 10% 100%, rgba(212,148,97,.14), transparent 70%);
}
.cta-banner__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
}
.cta-banner h2 {
  color: #fff;
  margin: 0;
  max-width: 18ch;
}
.cta-banner h2 em {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-style: italic;
}
.cta-banner__right {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
@media (max-width: 900px) {
  .cta-banner { padding: 70px 0; }
  .cta-banner__inner { grid-template-columns: 1fr; gap: 28px; }
  .cta-banner__right { justify-self: start; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 860px; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  transition: color var(--t);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: "Spectral", serif;
  font-size: 26px;
  color: var(--accent);
  transition: transform var(--t);
  line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--accent); }
.faq-item .faq-body {
  padding: 0 0 24px;
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 68ch;
}

/* ---------- FORM ---------- */
.form-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.form-wrap h2 { margin-bottom: 16px; }
.form-wrap ul { padding: 0; list-style: none; margin: 24px 0 0; }
.form-wrap ul li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--ink);
}
.form-wrap ul li strong {
  min-width: 90px;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .18em;
  font-weight: 600;
  padding-top: 3px;
}
.form-wrap ul li a { color: var(--ink); border-bottom: 1px solid transparent; }
.form-wrap ul li a:hover { color: var(--accent); border-color: var(--accent); }

.form {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--s-card);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-row.full { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font: inherit;
  color: var(--ink);
  transition: border var(--t), box-shadow var(--t), background var(--t);
  font-size: 15px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(184,112,58,.15);
}
.field textarea { min-height: 140px; resize: vertical; }

.mb-form-embed {
  background: var(--bg-alt);
  border: 1px dashed var(--accent);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-top: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
/* Placeholder shell — debug label only renders when explicitly opt-in
   via .is-placeholder. Real, populated form wrappers should use the
   .contact-form-shell class so the label cannot leak. */
.mb-form-embed.is-placeholder::before {
  content: "MALLARD BAY FORM EMBED";
  display: block;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 12px;
  font-family: "IBM Plex Mono", monospace;
}

/* Real form wrapper — same visual look as the placeholder shell, no debug label. */
.contact-form-shell {
  background: var(--bg-alt);
  border-radius: var(--r-md);
  padding: 28px 28px 20px;
}
@media (max-width: 900px) {
  .form-wrap { grid-template-columns: 1fr; gap: 40px; }
  .form-row  { grid-template-columns: 1fr; }
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--bg-deep);
  color: rgba(255,255,255,.78);
  padding: 80px 0 30px;
  font-size: 15px;
}
.site-footer .top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer h4 {
  color: #fff;
  font-size: 11px;
  letter-spacing: .25em;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--accent-2); }
.footer-brand {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  letter-spacing: .02em;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}
.footer-brand .brand-dot { box-shadow: 0 0 0 3px rgba(184,112,58,.35); }
.footer-col ul { padding: 0; list-style: none; margin: 0; }
.footer-col ul li { padding: 6px 0; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing: .04em; }
.socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.socials a {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
}
.socials a:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.socials svg { width: 15px; height: 15px; fill: currentColor; }

.site-footer .bottom {
  padding-top: 30px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 900px) {
  .site-footer .top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .site-footer .top { grid-template-columns: 1fr; }
}

/* ---------- REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- BOOKING WIDGET NOTE ---------- */
/*
  Buttons with class "btn-book" (and optional data-listing attr) open
  the Mallard Bay booking widget via js/main.js. Until the real
  widget script loads, the button href is a graceful fallback.
*/


/* =====================================================================
   Mallard Bay booking widget — defensive overrides
   ---------------------------------------------------------------------
   MB's widget script (loaded at end of body) does three things that will
   visually break this template unless we counter them:

   1) It injects a global Tailwind stylesheet that includes
      `.container { max-width: 640px … }`. Our template avoids this by
      using `.wrap` instead of `.container`.

   2) It sets `body { font-family: "Nunito Sans"; background: #fff; color: #303030 }`
      and other globals. The !important locks at the top of this file
      (on body + .section--alt + .section--dark + .btn.btn--*) defeat
      that.

   3) It WRAPS every decorated .btn-book in nested divs:
        <div class="mb-full-width">
          <div><div>
            <button style="background:none; border:0; padding:0">
              <a class="btn btn--primary btn-book">Book Now</a>
            </button>
          </div></div>
        </div>
      The `.mb-full-width` class expands to 100% — which blows out nav /
      hero / card layouts. The rules below force it to shrink-wrap around
      the inner <a> everywhere EXCEPT inside pricing / feature cards,
      where we want the button to span the card width and pin to the
      card's bottom edge.
   ===================================================================== */

/* Lock horizontal scroll (prevents the jittery side-swipe some mobile
   browsers let through when any child element overflows the viewport
   by a few pixels). */
html, body { overflow-x: hidden; max-width: 100%; }

.mb-full-width {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
}
.mb-full-width > *,
.mb-full-width > * > *,
.mb-full-width > * > * > * {
  display: inline-block !important;
  width: auto !important;
}
.mb-full-width button {
  display: inline-block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  width: auto !important;
}
.mb-full-width a.btn { display: inline-flex !important; }

/* Inside pricing / feature cards: wrapper expands to full width AND
   pins to the bottom of the card so side-by-side cards have aligned
   buttons regardless of copy length. */
.feature-card > .mb-full-width {
  display: block !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 18px;
}
.feature-card > .mb-full-width > *,
.feature-card > .mb-full-width > * > *,
.feature-card > .mb-full-width > * > * > * {
  display: block !important;
  width: 100% !important;
}
.feature-card > .mb-full-width a.btn {
  display: inline-flex !important;
  width: 100% !important;
  justify-content: center !important;
  padding: 14px 28px !important;
}


/* =====================================================================
   Universal mobile + dark-section polish
   ---------------------------------------------------------------------
   Added after the initial Big Water build surfaced these as latent bugs
   across all templates. Kept here as a single block so future edits can
   tweak thresholds in one place.
   ===================================================================== */

/* Force mobile card stacking even when inline styles try to override. */
@media (max-width: 720px) {
  .card-grid { grid-template-columns: 1fr !important; }
  .feature-row { grid-template-columns: 1fr !important; }
}

/* Gallery: 2 columns on mobile (was cramped 4-col by default). */
@media (max-width: 720px) {
  .gallery-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Dark-section feature text — the base `.feature p` color token reads
   black against the dark background. Restore contrast. */
.section--dark .feature p,
.section--dark .feature-card p,
.section--dark .feature-card li,
.section--dark .feature h3,
.section--dark .feature h4 { color: rgba(255,255,255,.88); }
.section--dark .feature-card h3,
.section--dark .feature-card h4 { color: #fff; }

/* ===== RECURRING-FIX HARDENING (v4 2026-07-28) ===== */

/* 1. Kill hero zoom (crops faces) — neutralize the heroZoom scale animation,
      keep the background image + position. */
.hero__bg{animation:none!important;transform:none!important;}

/* 2. Logo-only header + footer brand (build.py emits .brand__logo /
      .footer-brand__logo when a logo is set; else the dot + text). */
.brand__logo{height:62px;width:auto;display:block;filter:drop-shadow(0 0 2px rgba(10,26,63,.85)) drop-shadow(0 1px 2px rgba(10,26,63,.5));}
.site-header:not(.is-scrolled) .brand__logo{height:72px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
.footer-brand__logo{height:48px;width:auto;display:block;}

/* 3. Header phone — never wrap; hide on mobile so the CTA row stays clean. */
.nav-cta .phone{white-space:nowrap;}
@media(max-width:820px){.nav-cta .phone,.nav-cta a[href^="tel:"]{display:none!important;}}

/* 4. Final CTA band — keep inner content at content width (never flush-left). */
.cta-banner__inner{max-width:var(--container);margin-inline:auto;}

/* 5. Contrast safety — hero overlay text over photos stays legible. */
.hero__eyebrow{text-shadow:0 1px 3px rgba(0,0,0,.45);}
.hero__sub,.hero h1{text-shadow:0 1px 4px rgba(0,0,0,.4);}

/* 6. Gallery — already justified masonry (column-count); pin full-size tiles
      so whole photos show, with consistent gaps. */
.gallery-grid img,.gallery-grid img.tile{width:100%;height:auto;display:block;object-fit:initial!important;}

/* 7. Gallery lightbox — styles paired with the vanilla-JS lightbox in main.js. */
.mb-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(8,10,9,.93);}
.mb-lightbox.is-open{display:flex;}
.mb-lightbox__img{max-width:90vw;max-height:90vh;width:auto;height:auto;display:block;border-radius:4px;box-shadow:0 12px 60px rgba(0,0,0,.6);}
.mb-lightbox__btn{position:absolute;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border:0;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;font-size:34px;line-height:1;cursor:pointer;transition:background .2s ease;}
.mb-lightbox__btn:hover{background:rgba(255,255,255,.22);}
.mb-lightbox__close{top:20px;right:24px;font-size:30px;}
.mb-lightbox__prev{left:24px;top:50%;transform:translateY(-50%);}
.mb-lightbox__next{right:24px;top:50%;transform:translateY(-50%);}
.gallery-strip img,.gallery-grid img,.gallery img{cursor:zoom-in;}
@media(max-width:600px){.mb-lightbox__btn{width:44px;height:44px;font-size:26px;}.mb-lightbox__prev{left:8px;}.mb-lightbox__next{right:8px;}.mb-lightbox__close{top:12px;right:12px;}}

/* 8. Pricing "$" superscript never overlaps the number. The template's own
      .price-card .price sup rule already spaces the "$"; this generic guard
      covers any plain .price sup without clobbering that intentional styling. */
.price sup{margin-right:2px;position:relative;}

/* 9. Nav dropdown hover bridge — keep the menu open across the trigger->menu gap. */
.nav-dropdown:hover::after{display:block;}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;pointer-events:auto;transform:translateY(0);}

/* 10. Booking-widget hero-text-shrink guard — pin hero h1 above MB normalize CSS. */
.hero h1{font-size:clamp(2.4rem,4.8vw,4.2rem)!important;line-height:1.04!important;}


/* =====================================================================
   1776 CHARTERS — brand customizations (over Driftwater base)
   Red / white / blue + navy + gold. Oswald display, Barlow body.
   ===================================================================== */

/* Uppercase, condensed page/hero titles */
h1 { text-transform: uppercase; letter-spacing: .01em; }
.hero h1 em { font-family: inherit !important; font-weight: 600 !important; font-style: normal !important; color: var(--accent-2) !important; }
.eyebrow { font-weight: 600; }
.cta-banner h2 em { color: var(--accent-2); font-style: normal; }

/* Patriotic hairline (navy / white / red) */
.flag-rule { display:flex; height:4px; width:118px; border-radius:2px; overflow:hidden; margin:0 0 20px; }
.flag-rule i { flex:1; }
.flag-rule i:nth-child(1){ background:var(--bg-deep); }
.flag-rule i:nth-child(2){ background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.flag-rule i:nth-child(3){ background:var(--accent); }
.section--dark .flag-rule i:nth-child(2){ background:#fff; box-shadow:none; }

/* Thin tricolor accent atop the header */
.site-header::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:5;
  background:linear-gradient(90deg,var(--bg-deep) 0 33%,#fff 33% 66%,var(--accent) 66% 100%); }

/* ---- The Arsenal: gun spec cards ---- */
.arsenal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:1024px){ .arsenal-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .arsenal-grid{ grid-template-columns:1fr; } }
.gun-card{ position:relative; display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--s-card); transition:transform var(--t),box-shadow var(--t); }
.gun-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); z-index:2; }
.gun-card:hover{ transform:translateY(-4px); box-shadow:var(--s-hover); }
.gun-card__img{ display:flex; align-items:center; justify-content:center; height:170px; padding:20px 24px;
  background:radial-gradient(circle at 50% 42%, #ffffff 0%, #eef0f4 100%); border-bottom:1px solid var(--line); }
.gun-card__img img{ max-height:128px; max-width:100%; width:auto; object-fit:contain;
  filter:drop-shadow(0 7px 11px rgba(16,25,43,.18)); }
.gun-card__body{ padding:20px 22px 24px; }
.gun-card .gun-type{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:8px; }
.gun-card h3{ font-size:1.5rem; margin:0 0 10px; letter-spacing:.02em; }
.gun-card p{ font-size:.95rem; color:var(--ink-soft); margin:0; }
.section--dark .gun-card{ background:var(--bg-deep-2); border-color:var(--line-dark); }
.section--dark .gun-card__img{ border-bottom-color:rgba(16,25,43,.10); }
.section--dark .gun-card h3{ color:#fff; }
.section--dark .gun-card p{ color:rgba(255,255,255,.82); }
.section--dark .gun-card .gun-type{ color:var(--accent-2); }

/* ---- Pricing package cards ---- */
.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:820px){ .pkg-grid{ grid-template-columns:1fr; } }
.pkg-card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-top:4px solid var(--accent); border-radius:var(--r-md); padding:30px 26px; box-shadow:var(--s-card); }
.pkg-card .pkg-price{ font-family:"Oswald",sans-serif; font-size:2.7rem; font-weight:700; color:var(--ink); line-height:1; margin:0 0 6px; }
.pkg-card .pkg-price sup{ font-size:1.2rem; top:-.7em; margin-right:2px; color:var(--accent); }
.pkg-card h3{ margin:0 0 16px; font-size:1.1rem; letter-spacing:.05em; }
.pkg-card ul{ list-style:none; padding:0; margin:0; }
.pkg-card li{ padding:8px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.96rem; }
.pkg-card li:last-child{ border-bottom:0; }
.pkg-card.is-feature{ background:var(--bg-deep); color:#fff; border-color:var(--bg-deep); }
.pkg-card.is-feature h3{ color:#fff; }
.pkg-card.is-feature .pkg-price{ color:#fff; }
.pkg-card.is-feature .pkg-price sup{ color:var(--accent-2); }
.pkg-card.is-feature li{ border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.85); }
.pkg-flag{ display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; background:var(--accent); color:#fff; padding:4px 10px; border-radius:var(--r-pill); margin-bottom:14px; }

/* ---- Trip option cards (image + overlay) ---- */
.trip-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:820px){ .trip-cards{ grid-template-columns:1fr; } }
.trip-opt{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:360px;
  display:flex; align-items:flex-end; color:#fff; box-shadow:var(--s-card); }
.trip-opt__bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; transition:transform var(--t); }
.trip-opt:hover .trip-opt__bg{ transform:scale(1.05); }
.trip-opt::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,27,52,.12),rgba(10,27,52,.92)); z-index:1; }
.trip-opt--wide{ min-height:440px; }
.trip-opt--wide .trip-opt__body{ max-width:640px; }
@media(max-width:600px){ .trip-opt--wide{ min-height:380px; } }
.trip-opt__body{ position:relative; z-index:2; padding:30px; }
.trip-opt__body .price-tag{ font-family:"IBM Plex Mono",monospace; color:var(--accent-2); letter-spacing:.1em; font-size:13px; margin-bottom:8px; }
.trip-opt__body h3{ color:#fff; font-size:1.8rem; margin:0 0 8px; letter-spacing:.02em; }
.trip-opt__body p{ color:rgba(255,255,255,.86); margin:0; font-size:.97rem; }

/* ---- Ammo table ---- */
.ammo-wrap{ overflow-x:auto; }
.ammo-table{ width:100%; border-collapse:collapse; font-size:.95rem; background:var(--white);
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--s-card); }
.ammo-table th,.ammo-table td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.ammo-table thead th{ background:var(--bg-deep); color:#fff; font-family:"Oswald",sans-serif; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem; }
.ammo-table tbody tr:nth-child(even){ background:var(--bg-alt); }
.ammo-table td.rd{ color:var(--accent); font-weight:700; }
.ammo-table .cal{ font-weight:600; color:var(--ink); }
.ammo-table .cal small{ display:block; font-weight:400; color:var(--ink-muted); font-size:.8rem; letter-spacing:.02em; }
@media(max-width:640px){ .ammo-table{ font-size:.84rem; } .ammo-table th,.ammo-table td{ padding:9px 11px; } }

/* ---- Spec strip ---- */
.spec-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--s-card); }
@media(max-width:640px){ .spec-strip{ grid-template-columns:repeat(2,1fr); } }
.spec{ background:var(--white); padding:24px 18px; text-align:center; }
.spec b{ display:block; font-family:"Oswald",sans-serif; font-size:1.8rem; color:var(--accent); line-height:1; }
.spec span{ display:block; margin-top:6px; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }

/* ---- Small print / notes / safety list ---- */
.note{ font-size:.9rem; color:var(--ink-muted); margin-top:16px; }
.section--dark .note{ color:rgba(255,255,255,.7); }
.safety-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.safety-list li{ position:relative; padding-left:30px; color:rgba(255,255,255,.9); font-size:1rem; }
.safety-list li::before{ content:""; position:absolute; left:0; top:.5em; width:12px; height:12px; border-radius:3px;
  background:var(--accent); box-shadow:0 0 0 3px rgba(200,16,46,.22); }

/* FAQ category labels */
.faq-cat{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:38px 0 16px; display:flex; align-items:center; gap:12px; }
.faq-cat::before{ content:""; width:26px; height:3px; background:var(--accent); border-radius:2px; }
.faq-list .faq-cat:first-child{ margin-top:0; }

/* Contact note callout */
.contact-note{ background:var(--white); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--r-sm); padding:14px 18px; font-size:.96rem; color:var(--ink-soft); box-shadow:var(--s-card); }
.contact-note strong{ color:var(--ink); }

/* Contact: MB form embed sits flush (it renders its own dark card) */
.contact-form-shell{ background:transparent; border:0; box-shadow:none; padding:0; min-height:0; }
.contact-form-shell iframe, .contact-form-shell > div{ border-radius:var(--r-lg); overflow:hidden; }

/* ---- Topographic overlay on light sections (GOA-style) ---- */
.section{ background-image:url(../images/topo.png); background-repeat:repeat; background-position:center top; background-size:560px auto; }
.section--alt{ background-color:var(--bg-alt) !important; background-image:url(../images/topo.png) !important; background-repeat:repeat !important; background-size:560px auto !important; }
/* keep dark sections and the final CTA band clean */
.section--dark{ background-image:none !important; }

/* client feedback 2026-08-21: the "How It Works" split now holds their reel
   instead of a still. The clip is shot vertical, so the slot keeps its 4/5
   frame and the video fills it. */
.split__img--video { position: relative; overflow: hidden; padding: 0; background: #000; }
.split__img--video video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* Home hero background video (media day drone reel) */
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
@media (prefers-reduced-motion: reduce){ .hero__video{ display:none; } }

/* ---------------------------------------------------------------
   HOME HERO — keep the drone clip's boat clear of the copy.
   The boat occupies roughly the left 8–56% of the frame for the
   whole loop, so on desktop the headline block is moved into a
   fixed column pinned to the right of the container.
   --------------------------------------------------------------- */
@media (min-width: 1000px) {
  .hero--home .hero__inner {
    max-width: var(--container);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(470px, 38vw));
    column-gap: 48px;
  }
  .hero--home .hero__inner > * { grid-column: 2; }
  .hero--home .hero h1,
  .hero--home h1 { max-width: none; }
  .hero--home .hero__sub { max-width: none; }
  /* boat sits mid-left, so the spec line moves out from under the copy */
  .hero--home .hero__meta { left: 24px; right: auto; text-align: left; }
  .hero--home .hero__eyebrow { letter-spacing: .18em; }
  /* a touch of extra scrim on the right so white type always reads */
  .hero--home::after {
    background:
      linear-gradient(180deg, rgba(10,23,32,.28) 0%, rgba(10,23,32,.50) 55%, rgba(10,23,32,.86) 100%),
      linear-gradient(90deg, rgba(10,23,32,0) 42%, rgba(10,23,32,.42) 100%);
  }
}
/* Phone / tablet: there is no horizontal room to move the copy, so the
   clip becomes its own band at the top and the headline sits beneath it
   on solid ground. Boat always visible, copy always readable. */
@media (max-width: 999px) {
  .hero--home {
    --band: max(56vh, 300px);
    display: block;
    min-height: 0;
    padding: calc(var(--band) + 30px) 0 48px;
    background: #0a1720;
  }
  .hero--home .hero__video,
  .hero--home .hero__bg {
    inset: 0 0 auto 0;
    height: var(--band);
    object-position: 30% 45%;
    background-position: 30% 45%;
  }
  .hero--home::after {
    inset: 0 0 auto 0;
    height: var(--band);
    background: linear-gradient(180deg, rgba(10,23,32,.34) 0%, rgba(10,23,32,.10) 42%, rgba(10,23,32,.72) 82%, #0a1720 100%);
  }
  .hero--home .hero__inner { position: relative; z-index: 2; }
  .hero--home .hero__meta { display: none; }
}
@media (max-width: 640px) {
  .hero--home { --band: max(42vh, 250px); padding-bottom: 40px; }
  .hero--home .hero__eyebrow { letter-spacing: .14em; margin-bottom: 16px; }
}

/* ---------------------------------------------------------------
   GUN REELS — vertical clips of each gun being fired, tap for sound.
   --------------------------------------------------------------- */
.gunreel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:1024px){ .gunreel-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .gunreel-grid{ grid-template-columns:1fr; max-width:330px; margin-inline:auto; } }

.gunreel{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  border-radius:var(--r-lg); background:#0a1720;
  box-shadow:var(--s-card); cursor:pointer;
  transition:transform var(--t), box-shadow var(--t);
}
.gunreel:hover{ transform:translateY(-4px); box-shadow:var(--s-hover); }
.gunreel:focus-visible{ outline:3px solid var(--accent-2); outline-offset:3px; }
.gunreel__video{ width:100%; height:100%; object-fit:cover; display:block; }
.gunreel__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,23,32,.10) 0%, rgba(10,23,32,0) 40%, rgba(10,23,32,.78) 100%);
  transition:opacity var(--t);
}
.gunreel__play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; transition:opacity var(--t); }
.gunreel__play span{
  width:64px; height:64px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
  transition:transform var(--t);
}
.gunreel__play svg{ width:26px; height:26px; margin-left:3px; }
.gunreel:hover .gunreel__play span{ transform:scale(1.08); }
.gunreel__label{
  position:absolute; left:16px; right:16px; bottom:14px;
  pointer-events:none; color:#fff; transition:opacity var(--t);
}
.gunreel__label b{ display:block; font-family:"Oswald",sans-serif; font-weight:600;
  font-size:1.25rem; letter-spacing:.02em; text-transform:uppercase; line-height:1.1; }
.gunreel__label i{ display:block; margin-top:3px; font-style:normal;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-2); }
.gunreel.is-playing .gunreel__play,
.gunreel.is-playing .gunreel__label,
.gunreel.is-playing .gunreel__scrim{ opacity:0; }

/* mag-grid black-gap fix — a narrow card sharing a row with a wide one gets
   stretched, leaving the dark card bg exposed under its 4/3 image. */
.mag-grid{ align-items:start; }
.mag-card{ aspect-ratio:4/3; }
.mag-card__img{ position:absolute; inset:0; aspect-ratio:auto; }

/* Request-a-Quote CTA — gold, so it reads first next to the red Book button
   and holds contrast on both the light sections and the dark bands. */
.btn.btn--quote{ background:var(--accent-2); color:var(--ink); border-color:var(--accent-2);
  box-shadow:0 8px 22px -10px rgba(228,193,77,.65); }
.btn.btn--quote:hover{ background:#F0D26A; border-color:#F0D26A; color:var(--ink);
  transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(228,193,77,.7); }

/* Phone: three hero CTAs would push the primary buttons under the fold —
   pair the two booking CTAs on one row and tighten the clip band. */
@media (max-width: 640px){
  .hero--home{ --band: max(32vh, 215px); padding-top: calc(var(--band) + 22px); }
  .hero--home h1{ font-size: clamp(2.05rem, 9vw, 2.6rem) !important; }
  .hero--home .hero__eyebrow{ margin-bottom: 12px; }
  .hero--home .hero__sub{ margin-bottom: 20px; }
  .hero--home .hero__buttons{ gap:10px; }
  .hero--home .hero__buttons .btn{
    flex:1 1 calc(50% - 5px); justify-content:center;
    padding:13px 12px; font-size:12px; letter-spacing:.04em;
  }
  .hero--home .hero__buttons .btn--ghost-light{ flex:1 1 100%; }
}

/* ---------------------------------------------------------------
   LEAD CAPTURE — sticky phone bar, inquiry bands, contact reorder.
   --------------------------------------------------------------- */

/* Anchored form target has to clear the fixed header. */
#quote{ scroll-margin-top: calc(var(--nav-h) + 24px); }

/* Contact: form column first, details second. */
.form-wrap--formfirst{ align-items:start; }

/* CTA banner supporting line */
.cta-banner__note{
  margin:14px 0 0; max-width:46ch;
  color:rgba(255,255,255,.78); font-size:1rem;
}

/* Inquiry band */
.inquire{ position:relative; overflow:hidden; padding:96px 0; color:#fff; background:#0a1720; }
.inquire__bg{ position:absolute; inset:0; background-size:cover; }
.inquire::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,23,32,.95) 0%, rgba(10,23,32,.88) 48%, rgba(10,23,32,.52) 100%);
}
.inquire__inner{
  position:relative; z-index:2;
  width:min(100% - 48px, var(--container)); margin-inline:auto; max-width:1100px;
}
.inquire__eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent-2); margin:14px 0 18px;
}
.inquire h2{ color:#fff; margin:0 0 16px; max-width:20ch; }
.inquire h2 em{ font-family:"Spectral",Georgia,serif; font-weight:300; font-style:italic; color:var(--accent-2); }
.inquire p{ color:rgba(255,255,255,.84); font-size:1.08rem; max-width:60ch; margin:0 0 30px; }
.inquire__btns{ display:flex; flex-wrap:wrap; gap:14px; }
@media(max-width:640px){
  .inquire{ padding:64px 0; }
  .inquire h2{ max-width:none; }
  .inquire__btns .btn{ flex:1 1 100%; justify-content:center; }
}

/* Sticky phone action bar — Call · Text · Get Pricing */
.mobile-bar{ display:none; }
@media(max-width:768px){
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr 1.35fr;
    position:fixed; left:0; right:0; bottom:0; z-index:9000;
    background:var(--bg-deep);
    border-top:1px solid rgba(255,255,255,.14);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -10px 30px -14px rgba(0,0,0,.7);
  }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:7px;
    min-height:54px; padding:0 6px;
    font-family:"Oswald",sans-serif; font-weight:600; font-size:12.5px;
    letter-spacing:.07em; text-transform:uppercase; color:#fff;
    border-right:1px solid rgba(255,255,255,.12);
  }
  .mobile-bar a:last-child{ border-right:0; }
  .mobile-bar a:hover{ color:#fff; }
  .mobile-bar svg{ width:16px; height:16px; flex:none; }
  .mobile-bar__primary{ background:var(--accent-2); color:var(--ink)!important; }
  body{ padding-bottom:calc(54px + env(safe-area-inset-bottom)); }
  /* the bar covers the corner the widget likes to anchor to */
  .cta-banner{ padding-bottom:76px; }
}
@media(max-width:768px){
  /* page heroes are bottom-aligned, so extra padding lifts them off the bar */
  .hero--page{ padding-bottom:calc(60px + 54px); }
  /* three hero CTAs plus the sticky bar is one too many on a phone —
     the Arsenal is one tap away in the nav and has its own section below. */
  .hero--home .hero__buttons .btn--ghost-light{ display:none; }
  .hero--home .hero__buttons{ gap:10px; }
  .hero--home .hero__buttons .btn{ flex:1 1 calc(50% - 5px); justify-content:center; }
}

/* Mallard Bay's Vapi chat bubble is booted by booking-widget/index.js off the
   Book Now button's data-outfitter, which is Cypress Cove's id. Their assistant
   is enabled, so it renders on this site with THEIR business context and routes
   anything it captures to THEIR leads board. Grant's own outfitter has the chat
   disabled. Hide it here until the booking widget keys the assistant to the
   site's own outfitter. It also sat on top of the sticky action bar. */
vapi-widget{ display:none !important; }

/* ---------------------------------------------------------------
   MOBILE NAV PANEL — the open menu used the light page background
   while `.home .site-header:not(.is-scrolled) .nav-main a` kept the
   links white, so on the home page the options were invisible.
   Dark panel + white links, matching the sticky action bar.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-header.is-open .nav-main {
    background: var(--bg-deep);
    border-bottom: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 22px 48px -20px rgba(0,0,0,.7);
    padding: 14px 24px 22px;
    gap: 0;
  }
  /* out-specifies the home-page white-link rule in both directions */
  .site-header.is-open .nav-main a,
  .home .site-header.is-open:not(.is-scrolled) .nav-main a,
  .site-header.is-open .nav-dropdown > button { color: #fff; }

  .site-header.is-open .nav-main a {
    width: 100%;
    padding: 15px 2px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .site-header.is-open .nav-main a:last-child { border-bottom: 0; }
  .site-header.is-open .nav-main a.is-active,
  .home .site-header.is-open:not(.is-scrolled) .nav-main a.is-active { color: var(--accent-2); }
  .site-header.is-open .nav-main a::after { display: none; }
}

/* ---------------------------------------------------------------
   PROMO POPUP — 100 free rounds, first 10 bookings.
   TEMPORARY: delete this block, the markup on all 8 pages, and the
   promo section in js/main.js when the offer ends.
   --------------------------------------------------------------- */
.promo-pop{
  position:fixed; right:20px; bottom:20px; z-index:8000;
  width:min(330px, calc(100vw - 40px));
  background:var(--bg-deep); color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);
  padding:20px 22px 20px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.75);
  opacity:0; transform:translateY(14px);
  transition:opacity 320ms ease, transform 320ms cubic-bezier(.2,.7,.2,1);
}
.promo-pop.is-in{ opacity:1; transform:none; }
.promo-pop__close{
  position:absolute; top:8px; right:10px;
  background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.6); font-size:24px; line-height:1;
  padding:4px 6px; transition:color var(--t);
}
.promo-pop__close:hover{ color:#fff; }
.promo-pop__title{
  font-family:"Barlow",system-ui,sans-serif; font-weight:600;
  font-size:1.02rem; line-height:1.35; letter-spacing:0;
  color:#fff; margin:0 0 14px;
}
.promo-pop__title em{
  font-style:normal; font-weight:700; color:var(--accent-2);
}
.promo-pop__cta{ width:100%; justify-content:center; padding:12px 18px; font-size:13px; }
@media (prefers-reduced-motion: reduce){
  .promo-pop{ transition:none; transform:none; }
}
/* phones: slim one-row bar that clears the sticky action bar and
   covers as little of the hero CTAs as possible */
@media (max-width:768px){
  .promo-pop{
    right:10px; left:10px; width:auto;
    bottom:calc(54px + env(safe-area-inset-bottom) + 10px);
    padding:11px 30px 11px 14px;
    border-radius:var(--r-md);
    display:grid; grid-template-columns:1fr auto;
    align-items:center; column-gap:12px;
  }
  .promo-pop__title{ grid-column:1; grid-row:1; margin:0; font-size:.92rem; line-height:1.3; }
  .promo-pop__cta{ grid-column:2; grid-row:1; width:auto; padding:11px 14px; font-size:11px; }
  .promo-pop__cta svg{ display:none; }
  .promo-pop__close{ top:4px; right:6px; font-size:20px; }
}