/* =======================================================
   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:            #000000;         /* true black page */
  --bg-alt:        #121212;         /* alt section */
  --bg-panel:      #1f1f1f;         /* raised panels / cards */
  --bg-deep:       #1f1f1f;         /* section--dark */
  --bg-deep-2:     #171717;
  --ink:           #F6F2EA;         /* warm off-white body text */
  --ink-soft:      rgba(246,242,234,.74);
  --ink-muted:     rgba(246,242,234,.52);
  --line:          rgba(246,242,234,.14);
  --line-dark:     rgba(246,242,234,.14);
  --accent:        #E5572E;         /* sunset orange (logo) */
  --accent-2:      #EDC536;         /* prairie gold (logo) */
  --accent-ink:    #2A0E05;
  --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 18px 48px -20px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.5);
  --s-hover: 0 32px 70px -20px rgba(0,0,0,.92), 0 0 0 1px rgba(229,87,46,.28);
  --s-deep:  0 40px 90px -30px rgba(0,0,0,.9);
  --s-btn:   0 10px 26px -10px rgba(229,87,46,.55);

  /* geometry */
  --nav-h: 84px;
  --topbar-h: 38px;
  --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: "Spectral", Georgia, 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: "Archivo", "Inter", system-ui, sans-serif;
  letter-spacing: -0.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: "Spectral", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
}

/* 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: #F26A3F; transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(229,87,46,.7); color:#fff; }

.btn--dark { background: var(--accent-2); color: #191100; }
.btn--dark:hover { background: #F7D65A; transform: translateY(-2px); color:#191100; }

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

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

/* ---------- HEADER ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 70;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .06em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar__tag { color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.topbar__phone { color: #fff; font-weight: 600; white-space: nowrap; }
.topbar__phone:hover { color: var(--accent-2); }
@media (max-width: 640px) {
  .topbar { justify-content: center; font-size: 12px; }
  .topbar__inner { justify-content: center; }
  .topbar__tag { display: none; }
}

.site-header {
  position: fixed;
  top: var(--topbar-h); 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;
}
.brand img {
  height: 60px;
  width: auto;
  display: block;
  transition: height var(--t);
}
.site-header.is-scrolled .brand img,
body:not(.home) .site-header .brand img { height: 52px; }
/* Cream drop-shadow so the badge reads over the photo hero when header is transparent */
.home .site-header:not(.is-scrolled) .brand img {
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
.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(154,123,46,.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: #171717;
  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: #232323; 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 .phone,
  .nav-cta .btn {
    display: none;
  }
  .is-open .nav-main {
    display: flex;
    position: fixed;
    top: calc(var(--nav-h) + var(--topbar-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--panel  { background: var(--bg-panel) !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(229,87,46,.07); }
.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: var(--bg-panel);
  border: 1px solid var(--line);
  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: #0D0D0D;
  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: #0A0A0A;
  box-shadow: 0 0 0 3px rgba(229,87,46,.18);
}
.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 img { height: 92px; width: auto; display: block; }
.footer-brand .brand-dot { box-shadow: 0 0 0 3px rgba(154,123,46,.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; }

/* ---------- IMAGE BAND (atmospheric break) ---------- */
.image-band {
  height: clamp(220px, 40vh, 460px);
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
}
@media (max-width: 900px) { .image-band { background-attachment: scroll; } }

/* ---------- TRIP BLOCKS (Trips page) ---------- */
.trip-block { scroll-margin-top: 100px; }
.trip-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.trip-block--flip .trip-block__media { order: 2; }
.trip-block__media {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-lg);
  box-shadow: var(--s-card);
}
.trip-block__body h2 { margin-bottom: 14px; }
.trip-block__body > p { margin-bottom: 14px; }
.trip-included, .trip-extra { margin-top: 22px; }
.trip-included h4, .trip-extra h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
ul.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
ul.ticks li {
  position: relative;
  padding-left: 26px;
  line-height: 1.5;
  color: var(--ink-soft);
}
ul.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.price-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 26px 0 12px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.price-strip__price .amt {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--ink);
}
.price-strip__price .unit {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.price-strip__meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin-left: auto;
}
.license-note {
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.license-note strong { color: var(--ink-soft); }
@media (max-width: 900px) {
  .trip-block__grid { grid-template-columns: 1fr; gap: 30px; }
  .trip-block--flip .trip-block__media { order: -1; }
  .trip-block__media { aspect-ratio: 4 / 3; }
  .price-strip__meta { margin-left: 0; width: 100%; }
}

/* ---------- CONTACT LIST ---------- */
ul.contact-list { padding: 0; list-style: none; margin: 24px 0 0; }
ul.contact-list li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--ink-soft);
}
ul.contact-list li strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}


/* =====================================================================
   SOUTH DAKOTA ACCESS — dark-base corrections + added components
   Mirror of allgoods-adventures.com, re-skinned dark-dominant.
   Palette: #000 / #1f1f1f / #E5572E (sunset orange) / #EDC536 (gold)
   ===================================================================== */

/* ---- Cards that used var(--ink) as a dark backdrop. --ink is now an
        off-white text token, so these would flash near-white. ---- */
.mag-card   { background: #101010; }
.price-card { background: var(--bg-panel); border: 1px solid var(--line); }

/* accent-ink (#2A0E05) is invisible on black */
.trip-included h4, .trip-extra h4 { color: var(--accent-2); }
.footer-brand .brand-dot { box-shadow: 0 0 0 3px rgba(229,87,46,.35); }

/* Section rhythm: alternate pure black / #121212 / #1f1f1f so a long
   dark page still has visible band separation. */
.section--panel { background: var(--bg-panel) !important; }
.section--panel .eyebrow .num { color: var(--accent-2); }

/* Hero scrim needs to be heavier on a black site or the hero reads as a
   bright rectangle floating in the page. */
.hero::after {
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.94) 100%) !important;
}
.hero__meta { border-top: 1px solid rgba(246,242,234,.18); }

/* ---------- STAT BAND (95% opportunity / 40+ ranches / …) ---------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 40px 28px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -.03em;
  margin-bottom: 12px;
}
.stat__num em {
  font-family: "Spectral", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  color: var(--accent-2);
  font-size: .55em;
}
.stat__label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.5;
}
@media (max-width: 860px) {
  .stat-band { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .stat { padding: 30px 20px; }
}

/* ---------- BRANDS WE TRUST (text wordmarks) ---------- */
.brand-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 0;
}
.brand-mark {
  flex: 1 1 auto;
  min-width: 180px;
  text-align: center;
  padding: 14px 26px;
  border-right: 1px solid var(--line);
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--t);
  line-height: 1.35;
}
.brand-mark:last-child { border-right: 0; }
.brand-mark span {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-muted);
  margin-top: 6px;
}
a.brand-mark:hover { color: var(--accent-2); }
@media (max-width: 700px) {
  .brand-mark { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-mark:last-child { border-bottom: 0; }
}

/* ---------- PRICING TABLE (trip detail pages) ---------- */
.pricing-table { border-top: 1px solid var(--line); margin: 8px 0 0; }
.pricing-table__row {
  display: grid;
  grid-template-columns: 1fr 150px 170px;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.pricing-table__row h4 {
  margin: 0;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
  font-family: "Archivo", sans-serif;
}
.pricing-table__dur {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pricing-table__amt {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--accent-2);
  text-align: right;
  letter-spacing: -.02em;
}
@media (max-width: 700px) {
  .pricing-table__row { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .pricing-table__dur { grid-column: 1; }
  .pricing-table__amt { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
}

/* ---------- FAQ ACCORDION ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 48px 24px 0;
  position: relative;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  transition: color var(--t);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 40px 26px 0; color: var(--ink-soft); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- TEAM / VALUE CARDS ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.value {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px;
}
.value .num-big {
  font-family: "Spectral", Georgia, serif;
  font-style: italic;
  font-size: 40px;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 16px;
}
.value h3 { margin-bottom: 10px; }
.value p  { margin: 0; font-size: .97rem; }
@media (max-width: 900px) { .value-grid { grid-template-columns: 1fr; } }

.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.people--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.person {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
}
.person__role {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.person h3 { margin-bottom: 12px; }
.person p { margin: 0 0 14px; font-size: .97rem; }
.person a {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--accent-2);
}
@media (max-width: 980px) { .people--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .people, .people--three { grid-template-columns: minmax(0, 1fr); } }

/* ---------- GALLERY masonry (natural aspect ratios) ---------- */
.gallery-grid { column-count: 4; column-gap: 16px; }
.gallery-grid .tile {
  width: 100%;
  margin: 0 0 16px;
  border-radius: var(--r-md);
  overflow: hidden;
  display: block;
  background: #101010;
}

/* =====================================================================
   ANIMATED MOBILE MENU — full-screen overlay, morphing hamburger,
   staggered link reveal. Replaces the template's plain class toggle.
   ===================================================================== */
@media (max-width: 1024px) {

  /* hamburger -> X */
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    transition: transform 380ms cubic-bezier(.6,.05,.2,1),
                opacity 200ms linear,
                background 200ms linear;
  }
  .site-header.is-open .nav-toggle span { background: transparent !important; }
  .site-header.is-open .nav-toggle span::before {
    transform: translateY(7px) rotate(45deg);
    background: var(--accent) !important;
  }
  .site-header.is-open .nav-toggle span::after {
    transform: translateY(-7px) rotate(-45deg);
    background: var(--accent) !important;
  }

  /* full-screen panel */
  .nav-main {
    position: fixed;
    inset: 0;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: calc(var(--nav-h) + var(--topbar-h) + 20px) 32px 40px;
    background:
      radial-gradient(120% 80% at 85% 0%, rgba(229,87,46,.16) 0%, transparent 60%),
      #060606;
    overflow-y: auto;
    z-index: 90;
    /* closed state */
    clip-path: circle(0% at calc(100% - 44px) 44px);
    opacity: 0;
    pointer-events: none;
    transition: clip-path 620ms cubic-bezier(.76,0,.24,1),
                opacity 200ms linear;
  }
  .site-header.is-open .nav-main {
    clip-path: circle(150% at calc(100% - 44px) 44px);
    opacity: 1;
    pointer-events: auto;
  }

  /* staggered link reveal */
  .nav-main > a,
  .nav-main > .nav-dropdown {
    width: 100%;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.7,.2,1);
    border-bottom: 1px solid rgba(246,242,234,.10);
  }
  .site-header.is-open .nav-main > a,
  .site-header.is-open .nav-main > .nav-dropdown {
    opacity: 1;
    transform: none;
  }
  .site-header.is-open .nav-main > *:nth-child(1) { transition-delay: 180ms; }
  .site-header.is-open .nav-main > *:nth-child(2) { transition-delay: 240ms; }
  .site-header.is-open .nav-main > *:nth-child(3) { transition-delay: 300ms; }
  .site-header.is-open .nav-main > *:nth-child(4) { transition-delay: 360ms; }
  .site-header.is-open .nav-main > *:nth-child(5) { transition-delay: 420ms; }
  .site-header.is-open .nav-main > *:nth-child(6) { transition-delay: 480ms; }
  .site-header.is-open .nav-main > *:nth-child(7) { transition-delay: 540ms; }
  .site-header.is-open .nav-main > *:nth-child(8) { transition-delay: 600ms; }

  .nav-main > a,
  .nav-main .nav-dropdown > button {
    font-size: 1.45rem !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    padding: 17px 0 !important;
    width: 100%;
    justify-content: space-between;
    background: none;
    border: 0;
  }
  .nav-main > a::after { display: none; }
  .nav-main > a.is-active { color: var(--accent) !important; }

  /* dropdown groups become accordions inside the overlay */
  .nav-dropdown-menu {
    position: static !important;
    display: block;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 12px 2px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 460ms cubic-bezier(.2,.7,.2,1);
  }
  .nav-dropdown.open .nav-dropdown-menu { max-height: 720px; }
  .site-header .nav-dropdown-menu a {
    font-family: "Spectral", Georgia, serif !important;
    font-size: 1.02rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ink-soft) !important;
    padding: 11px 0 11px 18px !important;
    border-left: 1px solid rgba(246,242,234,.16);
    border-radius: 0;
  }
  .site-header .nav-dropdown-menu a:hover {
    background: transparent !important;
    color: var(--accent-2) !important;
    border-left-color: var(--accent-2);
  }
  .nav-dropdown > button::after { transition: transform 320ms cubic-bezier(.2,.7,.2,1); }
  .nav-dropdown.open > button::after { transform: rotate(-135deg) translateY(-2px); }
  .nav-dropdown::after { display: none !important; }

  /* keep the Book button reachable inside the overlay */
  .nav-main .m-book { margin-top: 30px; opacity: 0; transform: translateY(22px);
    transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.7,.2,1); }
  .site-header.is-open .nav-main .m-book { opacity: 1; transform: none; transition-delay: 660ms; }
  .nav-main .m-book .btn { width: 100%; justify-content: center; }
  .nav-main .m-phone {
    margin-top: 16px; opacity: 0;
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-muted) !important; border-bottom: 0 !important;
    transition: opacity 420ms ease;
  }
  .site-header.is-open .nav-main .m-phone { opacity: 1; transition-delay: 720ms; }

  body.nav-locked { overflow: hidden; }
}
@media (min-width: 1025px) {
  .nav-main .m-book, .nav-main .m-phone { display: none; }
}

/* =====================================================================
   MB WIDGET — two extra defenses beyond the template's block
   ===================================================================== */

/* 1) `.mb-full-width > *` (above) also matches the inline <script> the
      widget injects, turning it into an inline-block element that renders
      raw JS as visible page text. Caught on the Sara Mads build. */
.mb-full-width script,
.mb-full-width style,
.mb-full-width noscript { display: none !important; }

/* 2) Our Book buttons ARE the .mb_widget elements (build-time pattern),
      so `.mb-full-width button { background: transparent }` above would
      strip their fill. Restore it for our own button classes only. */
.mb-full-width button.btn.btn--primary,
button.btn.btn--primary.mb_widget {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  padding: 14px 24px !important;
  border-radius: var(--r-pill) !important;
}
.mb-full-width button.btn.btn--primary:hover,
button.btn.btn--primary.mb_widget:hover {
  background: #F26A3F !important;
  color: #fff !important;
}
.mb-full-width button.btn.btn--ghost-light,
button.btn.btn--ghost-light.mb_widget {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  padding: 14px 24px !important;
  border-radius: var(--r-pill) !important;
}
/* full-width variant inside price cards */
.price-card button.btn.btn--primary.mb_widget,
.price-card .mb-full-width button.btn.btn--primary {
  width: 100% !important;
  justify-content: center !important;
}
.price-card > .mb-full-width { display: block !important; width: 100% !important; }
.price-card > .mb-full-width > *,
.price-card > .mb-full-width > * > *,
.price-card > .mb-full-width > * > * > * { display: block !important; width: 100% !important; }

/* MB contact-form embed wrapper (live, not the placeholder stub) */
.contact-form-shell {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
}
.contact-form-shell input,
.contact-form-shell textarea,
.contact-form-shell select { color: #303030; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease, transform 800ms cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .nav-main, .nav-main > a, .nav-main > .nav-dropdown { transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Post-deploy visual corrections (round 1)
   ===================================================================== */

/* `.topbar { background: var(--ink) }` assumed ink was a DARK token. It is
   now off-white, so the bar rendered white with white text. */
.topbar {
  background: #141414 !important;
  border-bottom: 1px solid rgba(246,242,234,.10);
}
.topbar__tag  { color: var(--ink-muted) !important; }
.topbar__phone { color: var(--ink) !important; }
.topbar__phone:hover { color: var(--accent-2) !important; }

/* Buttons were wrapping their trailing arrow onto a second line inside the
   MB widget wrapper, making primary buttons taller than their siblings. */
.btn,
.mb-full-width button.btn,
button.btn.mb_widget {
  white-space: nowrap !important;
}
.hero__buttons .btn,
.cta-banner__right .btn { align-items: center; }

/* Logo badge — bump for presence, and keep the gold outline readable
   against a photographic hero. */
.brand img { height: 74px !important; }
.site-header.is-scrolled .brand img,
body:not(.home) .site-header .brand img { height: 60px !important; }
.footer-brand img { height: 104px !important; }
@media (max-width: 700px) {
  .brand img,
  .site-header.is-scrolled .brand img,
  body:not(.home) .site-header .brand img { height: 54px !important; }
}

/* =====================================================================
   Post-deploy visual corrections (round 2)
   ===================================================================== */

/* MB's script wraps our build-time button in <button><div class="css-…">,
   so the template's `.mb-full-width button { display: inline-block }`
   defense matched OUR button too and killed its flex layout — dropping the
   trailing arrow onto a second line. Restore inline-flex at higher
   specificity for our own button classes. */
.mb-full-width button.btn,
.mb-full-width button.btn.btn--primary,
.mb-full-width button.btn.btn--ghost-light,
button.btn.mb_widget,
button.btn.btn--primary.mb_widget,
button.btn.btn--ghost-light.mb_widget {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  line-height: 1 !important;
  height: auto !important;
}
.mb-full-width button.btn > svg,
button.btn.mb_widget > svg {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
}
/* MB's Emotion wrapper div between <button> and our button */
.mb-full-width button > div,
.mb-full-width button > div > div {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
}

/* Nav phone was wrapping to two lines and shoving the CTA off-baseline.
   The topbar already carries the number, so drop it below 1300px. */
.nav-cta .phone { white-space: nowrap !important; }
@media (max-width: 1300px) { .nav-cta .phone { display: none !important; } }

/* Nav row breathing room at mid widths so 8 items + CTA don't collide */
@media (max-width: 1440px) {
  .nav-main { gap: 20px; }
  .nav-main > a, .nav-dropdown > button { font-size: 12px !important; }
}

/* =====================================================================
   Post-deploy visual corrections (round 3)
   ===================================================================== */

/* The scrolled / inner-page header still carried Allgoods' cream glass
   (rgba(244,239,230,.92)), which rendered as a washed-out light bar over
   the dark site. Flip to smoked glass. */
.site-header.is-scrolled,
body:not(.home) .site-header {
  background: rgba(8,8,8,.88) !important;
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(246,242,234,.12);
}
/* nav ink on the smoked bar */
.site-header.is-scrolled .nav-main a,
.site-header.is-scrolled .nav-dropdown > button,
body:not(.home) .site-header .nav-main a,
body:not(.home) .site-header .nav-dropdown > button { color: var(--ink); }
.site-header.is-scrolled .nav-main a.is-active,
body:not(.home) .site-header .nav-main a.is-active { color: var(--accent); }
.site-header.is-scrolled .nav-cta .phone,
body:not(.home) .site-header .nav-cta .phone { color: var(--ink-soft); }
.site-header.is-scrolled .nav-toggle span,
.site-header.is-scrolled .nav-toggle span::before,
.site-header.is-scrolled .nav-toggle span::after,
body:not(.home) .site-header .nav-toggle span,
body:not(.home) .site-header .nav-toggle span::before,
body:not(.home) .site-header .nav-toggle span::after { background: var(--ink); }

/* dropdown panel sits on a dark bar now — hover wash was --bg-alt (#121212),
   nearly identical to the panel. Lift it. */
.site-header .nav-dropdown-menu {
  background: #161616 !important;
  border: 1px solid rgba(246,242,234,.14) !important;
}
.site-header .nav-dropdown-menu a:hover {
  background: #242424 !important;
  color: var(--accent-2) !important;
}

/* Tighten the gap under the intro statement (byline → stat band was ~150px) */
.intro-statement { margin-bottom: 0; }
.section--tight { padding-top: 40px; }

/* =====================================================================
   Post-deploy visual corrections (round 4) — CRITICAL
   ---------------------------------------------------------------------
   MB's widget injects an inline <script> as a SIBLING of the button
   inside its .mb-full-width wrapper. Several rules in this file set
   `display: block/inline-block !important` on ALL descendants of that
   wrapper (to make buttons span price cards), which also promoted the
   <script> to a rendered element — dumping raw minified JS onto the page
   directly under the pricing table.

   This block MUST stay last in the file: it wins on source order and
   re-hides every non-visual node anywhere in the MB wrapper chain.
   (Same class of bug as the Sara Mads build.)
   ===================================================================== */
script, style, noscript, template, link, meta, title { display: none !important; }

.mb-full-width script,
.mb-full-width style,
.mb-full-width noscript,
.mb-full-width template,
.mb-full-width > script,
.mb-full-width > * > script,
.mb-full-width > * > * > script,
.price-card script,
.price-card > .mb-full-width script,
.price-card > .mb-full-width > script,
.price-card > .mb-full-width > * > script,
.price-card > .mb-full-width > * > * > script,
.feature-card > .mb-full-width script,
.hero__buttons script,
.cta-banner__right script,
.nav-cta script,
.m-book script,
body script { display: none !important; }

/* =====================================================================
   Post-deploy visual corrections (round 5)
   ===================================================================== */

/* The round-3 dropdown-panel skin (#161616 + 1px border) is desktop-only.
   It was declared after the mobile block, so it overrode the overlay's
   `background: transparent; border: 0` and left a visible grey bar with a
   border under each collapsed accordion group. Scope it to desktop. */
@media (min-width: 1025px) {
  .site-header .nav-dropdown-menu {
    background: #161616 !important;
    border: 1px solid rgba(246,242,234,.14) !important;
  }
}
@media (max-width: 1024px) {
  .site-header .nav-dropdown-menu,
  .nav-dropdown-menu {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* Sit the overlay above the review feedback pill so it doesn't overlap
     nav labels during client review. */
  .nav-main { z-index: 2147483000 !important; }
  .site-header { z-index: 2147483001 !important; }
  .topbar { z-index: 2147483002 !important; }
}

/* =====================================================================
   FEEDBACK ROUND 1 — Braxton, 2026-07-28
   1. hunts/adventures grid → 2 rows x 5, image covers whole card
   2. nav phone removed (topbar keeps it)
   3. logo aspect ratio
   4. Brands We Trust centered + larger, blurb underneath
   5. CTA banner gold→orange gradient
   6/7. ONE typeface site-wide — no mixed fonts inside a heading
   8. heroes constrained to the page content width
   9. gallery filters + lightbox
   10. contact form background removed
   11. hunts table padding
   ===================================================================== */

/* ---------- 6/7. SINGLE TYPEFACE ---------- */
/* Was Archivo (display) + Spectral (serif body) + IBM Plex Mono (labels),
   with an italic-serif <em> inside headings. Unified to Archivo. */
body,
h1, h2, h3, h4, h5, h6,
p, li, a, span, div, td, th, label,
input, select, textarea, button,
.ui, .eyebrow, .btn, .nav-main a, .footer-col h4,
.display-serif, .intro-statement h2, .intro-statement .byline,
.eyebrow .num, .num, .num-big, .stat__num, .stat__num em,
.price-strip__price .amt, .price-strip__price .unit, .price-strip__meta,
.trip-row__num, .pricing-table__amt, .pricing-table__dur,
.mag-card__body .num, .mag-card__body .meta,
.value .num-big, .person__role, .topbar,
ul.contact-list li strong, .field label, .form-wrap ul li,
.site-footer .bottom, .footer-col ul li, .brand-mark, .brand-mark span,
.license-note, .faq summary, .hero__eyebrow, .hero__meta,
.trip-included h4, .trip-extra h4, .price-card small {
  font-family: "Archivo", "Inter", system-ui, -apple-system, sans-serif !important;
}
/* the italic-serif accent inside headings becomes the same face, colour-led */
h1 em, h2 em, h3 em,
em.display-serif, .display-serif,
.intro-statement h2 em, .hero h1 em, .cta-banner h2 em, .gal-head h2 em {
  font-family: "Archivo", "Inter", system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: var(--accent-2);
  letter-spacing: inherit;
}
/* serif-italic numerals also normalise */
.eyebrow .num, .trip-row__num, .value .num-big, .stat__num em {
  font-style: normal !important;
  font-weight: 800 !important;
}
.eyebrow .num { font-size: 15px; letter-spacing: .04em; }
.trip-row__num { font-size: 30px; letter-spacing: -.02em; }
.value .num-big { font-size: 30px; letter-spacing: -.02em; }
.intro-statement .byline { font-style: normal !important; }
body { font-size: 16.5px; line-height: 1.62; }
p { line-height: 1.66; }

/* ---------- 3. LOGO ASPECT RATIO ---------- */
/* Source badge is 514x394. Flex context plus MB's injected `img{max-width:100%}`
   was letting it distort — pin the ratio and let width follow height. */
.brand img,
.footer-brand img {
  height: 68px !important;
  width: auto !important;
  max-width: none !important;
  aspect-ratio: 514 / 394;
  object-fit: contain;
  flex: 0 0 auto;
}
.site-header.is-scrolled .brand img,
body:not(.home) .site-header .brand img { height: 58px !important; }
.footer-brand img { height: 96px !important; }
@media (max-width: 700px) {
  .brand img,
  .site-header.is-scrolled .brand img,
  body:not(.home) .site-header .brand img { height: 50px !important; }
}

/* ---------- 8. HEROES MATCH PAGE CONTENT WIDTH ---------- */
.hero__inner.wrap {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
  max-width: var(--container);
  padding-left: 0;
  padding-right: 0;
}
.hero__inner.wrap > * { max-width: 760px; }
.hero__meta {
  left: 0; right: 0;
  width: 100%;
  padding: 0;
  border-top: 1px solid rgba(246,242,234,.18);
}
.hero__meta-inner {
  display: flex;
  gap: 34px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 14px 0;
}
.hero__meta-inner span { display: inline-block; }
@media (max-width: 900px) { .hero__meta { display: none; } }

/* ---------- 1. HUNTS GRID — 5 across, full-bleed image ---------- */
.mag-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 18px !important;
}
.mag-card {
  grid-column: auto !important;
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat;
  box-shadow: var(--s-card);
  transition: transform var(--t), box-shadow var(--t);
  isolation: isolate;
}
.mag-card:hover { transform: translateY(-5px); box-shadow: var(--s-hover); }
.mag-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.16) 42%, rgba(0,0,0,.82) 78%, rgba(0,0,0,.94) 100%);
  transition: background var(--t);
}
.mag-card:hover .mag-card__scrim {
  background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(229,87,46,.20) 45%, rgba(0,0,0,.88) 80%, rgba(0,0,0,.96) 100%);
}
.mag-card__body {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0 !important;
  padding: 18px 16px 18px;
  z-index: 2;
}
.mag-card__body .num {
  font-size: 11px;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--accent-2);
  margin-bottom: 7px;
  display: block;
}
.mag-card__body h3 {
  font-size: 1.02rem !important;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
}
.mag-card__body .meta {
  font-size: 11.5px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.82);
  line-height: 1.35;
}
@media (max-width: 1180px) { .mag-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 940px)  { .mag-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 680px)  { .mag-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } }
@media (max-width: 400px)  { .mag-grid { grid-template-columns: 1fr !important; } }

/* ---------- 4. BRANDS WE TRUST ---------- */
.brands-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.brands-head h2 {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  margin: 0 0 14px;
  letter-spacing: -.02em;
}
.brands-head p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 1.02rem;
}
.brand-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brand-mark { padding: 22px 26px; }

/* ---------- 5. CTA BANNER — gold → orange gradient ---------- */
.cta-banner {
  background: linear-gradient(100deg, #EDC536 0%, #EFAE33 42%, #E5572E 100%) !important;
  color: #1A0E02 !important;
}
.cta-banner h2 { color: #1A0E02 !important; }
.cta-banner h2 em { color: #FFFFFF !important; font-weight: 800 !important; }
.cta-banner p { color: rgba(26,14,2,.78) !important; }
/* buttons must invert on the gradient */
.cta-banner .btn.btn--primary,
.cta-banner button.btn.btn--primary.mb_widget,
.cta-banner .mb-full-width button.btn.btn--primary {
  background: #0C0C0C !important;
  color: #fff !important;
  border-color: #0C0C0C !important;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.5) !important;
}
.cta-banner .btn.btn--primary:hover,
.cta-banner button.btn.btn--primary.mb_widget:hover {
  background: #262626 !important; color: #fff !important;
}
.cta-banner .btn.btn--ghost-light,
.cta-banner button.btn.btn--ghost-light.mb_widget {
  background: transparent !important;
  color: #1A0E02 !important;
  border: 1px solid rgba(26,14,2,.5) !important;
}
.cta-banner .btn.btn--ghost-light:hover {
  background: #1A0E02 !important; color: #EDC536 !important; border-color: #1A0E02 !important;
}

/* ---------- 10. CONTACT FORM — no panel background ---------- */
.contact-form-shell,
.form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.form-wrap { background: transparent !important; }
/* inputs still need definition without the panel behind them */
.field input, .field select, .field textarea {
  background: rgba(246,242,234,.05) !important;
  border: 1px solid rgba(246,242,234,.20) !important;
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: rgba(246,242,234,.08) !important;
  border-color: var(--accent) !important;
}

/* ---------- 11. HUNTS TABLE PADDING ---------- */
.trips-list--padded { border-top: 1px solid var(--line); }
.trips-list--padded .trip-row {
  padding: 34px 22px !important;
  gap: 34px;
  border-radius: var(--r-sm);
}
.trips-list--padded .trip-row:hover { background: rgba(229,87,46,.07); }
.trips-list--padded .trip-row__title h3 { margin-bottom: 7px; }
.trips-list--padded .trip-row__title p { line-height: 1.55; }
@media (max-width: 1000px) {
  .trips-list--padded .trip-row {
    grid-template-columns: 60px 1fr !important;
    gap: 8px 20px !important;
    padding: 26px 16px !important;
  }
  .trips-list--padded .trip-row__meta,
  .trips-list--padded .trip-row__price { grid-column: 2; }
}

/* ---------- 9. GALLERY — filters, clickable tiles, lightbox ---------- */
.gal-head { max-width: 820px; margin-bottom: 30px; }
.gal-head h2 { margin-bottom: 12px; }
.gal-head p { color: var(--ink-muted); margin: 0; }

.gal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.gal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t);
  line-height: 1;
  white-space: nowrap;
}
.gal-chip:hover { border-color: var(--accent); color: var(--ink); }
.gal-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(229,87,46,.6);
}
.gal-chip__n {
  font-size: 10.5px;
  font-weight: 700;
  opacity: .62;
  letter-spacing: .04em;
}
.gal-chip.is-active .gal-chip__n { opacity: .85; }

/* masonry columns; tiles are buttons now */
.gallery-grid { column-count: 4; column-gap: 16px; }
.gallery-grid .tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: #101010;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  break-inside: avoid;
  transition: transform var(--t), box-shadow var(--t);
}
.gallery-grid .tile img { width: 100%; height: auto; display: block; transition: transform 600ms ease, opacity var(--t); }
.gallery-grid .tile:hover { box-shadow: var(--s-hover); }
.gallery-grid .tile:hover img { transform: scale(1.035); }
.gallery-grid .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery-grid .tile__cat {
  position: absolute;
  left: 10px; bottom: 10px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.66);
  backdrop-filter: blur(6px);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--t);
  pointer-events: none;
}
.gallery-grid .tile:hover .tile__cat,
.gallery-grid .tile:focus-visible .tile__cat { opacity: 1; transform: none; }
.gallery-grid .tile[hidden] { display: none !important; }
.gal-empty { color: var(--ink-muted); padding: 40px 0; }
@media (max-width: 1100px) { .gallery-grid { column-count: 3; } }
@media (max-width: 760px)  { .gallery-grid { column-count: 2; column-gap: 12px; } .gallery-grid .tile { margin-bottom: 12px; } }
@media (max-width: 430px)  { .gallery-grid { column-count: 1; } }

/* lightbox */
.lightbox {
  position: fixed; inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  background: rgba(4,4,4,.95);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 240ms ease;
}
.lightbox[hidden] { display: none !important; }
.lightbox.is-open { opacity: 1; }
.lightbox__figure {
  margin: 0;
  max-width: min(1180px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  transform: scale(.97);
  transition: transform 300ms cubic-bezier(.2,.7,.2,1);
}
.lightbox.is-open .lightbox__figure { transform: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
  background: #0d0d0d;
}
.lightbox__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  justify-content: center;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 780px;
}
.lightbox__cat {
  color: var(--accent-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.lightbox__count { color: var(--ink-muted); font-size: 11.5px; letter-spacing: .1em; }
.lightbox__close,
.lightbox__nav {
  background: rgba(246,242,234,.09);
  border: 1px solid rgba(246,242,234,.18);
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  flex: 0 0 auto;
  line-height: 1;
}
.lightbox__nav { width: 52px; height: 52px; font-size: 30px; padding-bottom: 4px; }
.lightbox__close {
  position: absolute; top: 22px; right: 24px;
  width: 44px; height: 44px; font-size: 26px; padding-bottom: 3px;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
body.lb-open { overflow: hidden; }
@media (max-width: 760px) {
  .lightbox { padding: 14px; gap: 0; }
  .lightbox__nav { position: absolute; bottom: 20px; width: 46px; height: 46px; }
  .lightbox__nav--prev { left: 22%; }
  .lightbox__nav--next { right: 22%; }
  .lightbox__img { max-height: 66vh; }
  .lightbox__cap { padding-bottom: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__figure { transition: none !important; }
}

/* =====================================================================
   FEEDBACK ROUND 1b — kill every remaining italic-serif holdover.
   The unification block set font-family but 12 rules also carried
   `font-style: italic` (Allgoods used italic Spectral as its accent
   voice). One typeface means upright everywhere.
   ===================================================================== */
.display-serif,
.eyebrow .num,
.hero h1 em,
.intro-statement h2,
.intro-statement h2 em,
.intro-statement .byline,
.feature .num-big,
.split__pullquote,
.trip-row__num,
.price-card .price,
.price-card .price sup,
.quote blockquote,
.cta-banner h2 em,
.stat__num,
.stat__num em,
.value .num-big,
.num, .num-big,
h1, h2, h3, h4, h1 em, h2 em, h3 em,
.gal-head h2, .gal-head h2 em,
.brands-head h2,
.lightbox__cap, .lightbox__cat {
  font-style: normal !important;
}
/* intro statement now reads as a large upright pull-statement */
.intro-statement h2 {
  font-weight: 500 !important;
  letter-spacing: -.018em;
  line-height: 1.22;
}
.intro-statement h2 em { font-weight: 700 !important; color: var(--accent-2); }
.intro-statement .byline {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* price figure + section numerals as upright numerics */
.price-card .price { font-weight: 800 !important; letter-spacing: -.03em; }
.feature .num-big { font-weight: 800 !important; letter-spacing: -.02em; }

/* =====================================================================
   FEEDBACK ROUND 1c — gallery layout
   CSS multi-column left a badly ragged bottom with 64 mixed-ratio tiles,
   and rebalanced unpredictably every time a filter changed the item set.
   Switched to a uniform grid: predictable under filtering, tidy edges,
   and the lightbox still shows every photo uncropped.
   ===================================================================== */
.gallery-grid {
  column-count: initial !important;
  column-gap: initial !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch;
}
.gallery-grid .tile {
  margin: 0 !important;
  aspect-ratio: 1 / 1;
  break-inside: auto;
  height: 100%;
}
.gallery-grid .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
@media (max-width: 1100px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)) !important; } }
@media (max-width: 760px)  { .gallery-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; } }
@media (max-width: 380px)  { .gallery-grid { grid-template-columns: 1fr !important; } }

/* lightbox shows the true, uncropped frame */
.lightbox__img { object-fit: contain; }

/* round 1c fix: `height:100%` on an aspect-ratio grid item can create a
   circular sizing dependency and collapse the <img>. Let aspect-ratio alone
   size the tile. Also give the browser a decode hint so 64 tiles don't
   stall the renderer. */
.gallery-grid .tile { height: auto !important; }
.gallery-grid .tile img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  object-fit: cover;
  background: #141414;
}

/* =====================================================================
   FEEDBACK ROUND 1d — gallery tiles were rendering blank
   ---------------------------------------------------------------------
   An <img> as a DIRECT child of a <button> (with overflow:hidden +
   aspect-ratio) does not paint in Chrome — the box lays out at the right
   size, the bitmap decodes, canvas can read it, but nothing composites.
   Wrapping the img in a block-level <span class="tile__media"> fixes it.
   Verified: background-image on the button paints, <img> in a <div>
   paints, <img> in a <span> in the <button> paints. Keep the wrapper.
   ===================================================================== */
.gallery-grid .tile__media {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.gallery-grid .tile__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 35%;
  background: #141414;
  transition: transform 600ms ease;
}
.gallery-grid .tile:hover .tile__media img { transform: scale(1.05); }
.gallery-grid .tile { padding: 0; border: 0; }

/* =====================================================================
   FEEDBACK ROUND 2 — Braxton, 2026-07-28
   ===================================================================== */

/* --- hero stat strip removed (and the rule above it) --- */
.hero__meta, .hero__meta-inner { display: none !important; }

/* --- introduction stat figures: number AND symbol both white --- */
.stat__num,
.stat__num em { color: var(--ink) !important; }

/* =====================================================================
   MOBILE NAV — rebuilt. What was broken:
   `justify-content: center` on a scrollable fixed overlay is a classic
   flexbox trap: once the content is taller than the viewport, the
   centring pushes the first items ABOVE the scroll origin where they are
   unreachable and visually clipped. With 8 nav items at 1.45rem plus an
   expanded accordion (~830px of content) that happens on every phone.
   Fixes: start from the top, use dynamic viewport units so mobile
   browser chrome doesn't steal height, and shrink the type so the whole
   menu fits without scrolling on a normal handset.
   ===================================================================== */
@media (max-width: 1024px) {
  .nav-main {
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: 100dvh;
    max-height: 100dvh;
    padding: calc(var(--nav-h) + var(--topbar-h) + 8px) 26px 32px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    row-gap: 0 !important;
  }

  /* tighter type so 8 items + phone fit a 700px viewport without scrolling */
  .nav-main > a,
  .nav-main .nav-dropdown > button {
    font-size: 1.16rem !important;
    padding: 13px 2px !important;
    letter-spacing: 0 !important;
  }
  .nav-main > a,
  .nav-main > .nav-dropdown { border-bottom: 1px solid rgba(246,242,234,.09); }
  .nav-main > .nav-dropdown:last-of-type { border-bottom: 1px solid rgba(246,242,234,.09); }

  /* accordion children */
  .site-header .nav-dropdown-menu a {
    font-size: .95rem !important;
    padding: 9px 0 9px 16px !important;
  }
  .nav-dropdown.open .nav-dropdown-menu { max-height: 520px; }

  /* the 9th child is now the phone link (the Book button was removed) */
  .site-header.is-open .nav-main > *:nth-child(9) { transition-delay: 640ms; }

  .nav-main .m-phone {
    margin-top: 22px !important;
    padding: 0 2px !important;
    font-size: 12.5px !important;
    border-bottom: 0 !important;
  }
  /* the Book button is gone from the overlay — it stays in the sticky header */
  .nav-main .m-book { display: none !important; }

  /* keep the close (X) reachable above the panel */
  .site-header { z-index: 2147483001 !important; }
  .nav-toggle { position: relative; z-index: 2147483005 !important; }
}

/* =====================================================================
   FEEDBACK ROUND 2b — MOBILE NAV, actual root causes
   ---------------------------------------------------------------------
   Diagnosed on a real 390x844 viewport (loaded in a phone-sized iframe so
   the mobile media queries genuinely fire):

   1. THE HEADER "BOOK YOUR TRIP" BUTTON WAS VISIBLE ON MOBILE. The
      template hides it via `@media (max-width:1024px){ .nav-cta .btn
      {display:none} }`, but the MB-widget defence added earlier
      (`.mb-full-width button.btn {display:inline-flex !important}`) beat
      it. At 390px the 206px-wide button ran x=121→327, squashing the
      logo and shoving the hamburger to the screen edge. This is the
      "broken" look.
   2. The panel's `inset:0` was being overridden by a template longhand
      `top: calc(--nav-h + --topbar-h)`, so it opened BELOW the header —
      then the 130px padding-top meant to clear that header added a second
      gap, leaving ~130px of dead space above "Home".
   3. The review feedback pill (.mbfb-fab, z-index 2147483600) sits above
      the overlay and covered the "Adventures" / "Licensing" labels.
   ===================================================================== */
@media (max-width: 1024px) {

  /* 1. header CTA stays off on mobile — beat the MB !important overrides */
  .site-header .nav-cta .btn,
  .site-header .nav-cta .mb-full-width,
  .site-header .nav-cta button.btn.mb_widget,
  .site-header .nav-cta .mb-full-width button.btn,
  .site-header .nav-cta .mb-full-width button.btn.btn--primary {
    display: none !important;
  }
  /* logo + hamburger only, pushed to opposite edges */
  .nav-wrap { justify-content: space-between !important; }
  .nav-cta { gap: 0 !important; }

  /* 2. panel opens directly under the header, no double gap */
  .nav-main {
    top: calc(var(--nav-h) + var(--topbar-h)) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 20px 26px 34px !important;
    clip-path: circle(0% at calc(100% - 34px) 10px);
  }
  .site-header.is-open .nav-main {
    clip-path: circle(155% at calc(100% - 34px) 10px);
  }

  /* header gets a solid ground while the menu is open so the logo and X
     aren't floating over the hero photo */
  .site-header.is-open { background: #060606 !important; }
  body.nav-locked .topbar { background: #060606 !important; }
  .site-header.is-open { backdrop-filter: none !important; box-shadow: none !important; }
  .site-header.is-open .brand img { position: relative; z-index: 2147483005; }

  /* 3. suppress the review feedback pill while the menu is open */
  body.nav-locked .mbfb-fab { display: none !important; }
}

/* 1.5px strokes are too fine for a touch target — thicken the bars/X */
@media (max-width: 1024px) {
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after { height: 2px !important; width: 24px !important; border-radius: 2px; }
}


/* ---------- CLIENT FEEDBACK 2026-09-02: Brands We Trust - real logos ---------- */
/* Logo-aware strip: a mark renders as an <img> when images/brands/{slug}.svg|webp|png
   exists, otherwise it falls back to the styled wordmark, so the strip never shows a
   broken image. Drop a new partner logo into images/brands/ and it appears. */
.brand-mark--logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark__logo {
  display: block;
  width: auto;
  height: 46px;
  max-width: 168px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .66;
  transition: filter var(--t), opacity var(--t);
}
a.brand-mark--logo:hover .brand-mark__logo,
a.brand-mark--logo:focus-visible .brand-mark__logo {
  filter: grayscale(0);
  opacity: 1;
}
@media (max-width: 700px) {
  .brand-mark__logo { height: 42px; max-width: 200px; }
}

/* =======================================================
   CLIENT FEEDBACK 2026-09-03 — "Add actual logos to this section
   rather than just text, ensure they are backlinked."

   All four marks are now real logos, each hosted locally and each
   still wrapped in its existing outbound link. The strip already had
   one square logo (Vortex) sized by a flat height:46px. Three more
   arrived at very different ratios — a 9:1 wordmark (Mallard Bay), a
   4.9:1 wordmark (King of the Mountain) and a ~1:1 badge (SD GF&P) —
   and a single height makes wide wordmarks read tiny next to the
   badges. So height is set per mark to even out OPTICAL weight, not
   pixel height. Grayscale/hover behaviour is inherited untouched.
   ======================================================= */
.brand-mark--logo { min-height: 74px; }
.brand-mark__logo {
  height: auto;
  max-height: 50px;
  max-width: min(196px, 100%);
}
.brand-mark__logo[src*="sd-game-fish-parks"] { max-height: 60px; }
.brand-mark__logo[src*="vortex-optics"]      { max-height: 50px; }
.brand-mark__logo[src*="king-of-the-mountain"] { max-height: 38px; max-width: min(208px, 100%); }
.brand-mark__logo[src*="mallard-bay"]          { max-height: 26px; max-width: min(210px, 100%); }

@media (max-width: 700px) {
  .brand-mark--logo { min-height: 0; }
  .brand-mark__logo { height: auto; max-height: 46px; max-width: min(210px, 100%); }
  .brand-mark__logo[src*="sd-game-fish-parks"] { max-height: 56px; }
  .brand-mark__logo[src*="king-of-the-mountain"] { max-height: 36px; }
  .brand-mark__logo[src*="mallard-bay"] { max-height: 25px; }
}

/* Even cells: flex-basis auto sized each mark to its logo's INTRINSIC width,
   so the four cells came out 287/421/296/236px and the hairline dividers
   landed at uneven intervals. A zero basis makes all four share the row
   equally. Desktop only — under 700px the marks still go full-width. */
@media (min-width: 701px) {
  .brand-strip .brand-mark { flex: 1 1 0; }
}


/* CLIENT FEEDBACK 2026-09-04 — "From the Field" photo rows were three ~115px tiles on a phone.
   Owner reviews the site on mobile and asked for these photos specifically, so they get room. */
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .photo-row { grid-template-columns: minmax(0, 1fr); } }

/* =======================================================
   CLIENT FEEDBACK 2026-09-07 — "Add TNS outfitting out of Buffalo,
   South Dakota / Add Sobos outfitters out of scenic South Dakota /
   Add South Dakota game fish and Parks" (Brands We Trust).

   SD Game, Fish & Parks was already on the strip from the 2026-09-03
   pass, so this one adds the two outfitter partners and takes the strip
   from 4 marks to 6. Both new logos were pulled from the partners' own
   sites as dark art on transparent. TNS is airy line art, so it takes
   MORE height; SOBO'S is a solid black state-outline badge, so it takes
   LESS — a flat height makes the badge bully the row optically.

   Six marks do not fit one desktop row at the inherited min-width:180px
   + 26px side padding (232px x 6 = 1392px > the wrap). So the strip is
   explicitly 3-up from 701-1199 and 6-up above 1200 with tighter side
   padding. The inherited `.brand-mark:last-child { border-right: 0 }`
   only clears the divider on the FINAL mark, which leaves a dangling
   hairline at the end of every wrapped row — cleared per row instead.
   ======================================================= */
.brand-mark__logo[src*="tns-outfitting"] { max-height: 58px; max-width: min(188px, 100%); }
.brand-mark__logo[src*="sobos"]          { max-height: 44px; max-width: min(152px, 100%); }

@media (min-width: 701px) and (max-width: 1199px) {
  .brand-strip .brand-mark { flex: 0 1 33.3333%; min-width: 0; }
  .brand-strip .brand-mark:nth-child(3n) { border-right: 0; }
}
@media (min-width: 1200px) {
  .brand-strip .brand-mark { flex: 1 1 0; min-width: 0; padding: 22px 16px; }
}
@media (max-width: 700px) {
  .brand-mark__logo[src*="tns-outfitting"] { max-height: 54px; }
  .brand-mark__logo[src*="sobos"]          { max-height: 42px; }
}