/* =======================================================
   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 {
  /* ---- TEN HIGH OUTFITTERS — 60/30/10 ----
     60% dominant charcoal  #1F1F1F
     30% secondary white    #FFFFFF  (panels, borders, body text)
     10% accent orange      #F2581C  (CTAs, numerals, focus) */
  --bg:            #1F1F1F;         /* dominant charcoal */
  --bg-alt:        #262626;         /* lifted charcoal band */
  --bg-deep:       #141414;         /* deepest band */
  --bg-deep-2:     #2B2B2B;         /* card on deepest band */
  --panel:         #FFFFFF;         /* the 30% — white content panels */
  --panel-ink:     #1F1F1F;
  --ink:           #FFFFFF;
  --ink-soft:      rgba(255,255,255,.74);
  --ink-muted:     rgba(255,255,255,.52);
  --line:          rgba(255,255,255,.14);
  --line-dark:     rgba(255,255,255,.14);
  --accent:        #F2581C;         /* brand orange */
  --accent-2:      #FF7A45;         /* lifted orange — links/eyebrows on dark (AA on #1F1F1F) */
  --accent-ink:    #C33F09;         /* orange darkened for use on white */
  --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 44px -20px rgba(0,0,0,.62), 0 2px 6px rgba(0,0,0,.30);
  --s-hover: 0 30px 62px -20px rgba(0,0,0,.72), 0 4px 12px rgba(0,0,0,.36);
  --s-deep:  0 44px 96px -32px rgba(0,0,0,.78);
  --s-btn:   0 10px 26px -12px rgba(242,88,28,.65);

  /* geometry */
  --nav-h: 88px;
  --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: #A05E2C; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(184,112,58,.65); 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:52px;width:auto;display:block;}
.site-header:not(.is-scrolled) .brand__logo{height:64px;}
.footer-brand__logo{height:40px;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;}

/* =========================================================================
   TEN HIGH OUTFITTERS — DARK RE-SKIN  (charcoal #1F1F1F / white / #F2581C)
   Appended after the Driftwater base. Everything here exists because the
   base template assumes a LIGHT page background; do not "clean it up".
   ========================================================================= */

/* ---- 1. Header: charcoal instead of the base's warm-off-white wash ---- */
.site-header.is-scrolled,
body:not(.home) .site-header {
  background: rgba(20,20,20,.94);
  backdrop-filter: saturate(150%) blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,.10);
}
/* Transparent-over-hero state needs its own scrim or nav links smear into
   a bright sky. Killed once scrolled or when the mobile panel is open. */
.home .site-header::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 190%;
  background: linear-gradient(180deg, rgba(15,15,15,.78) 0%, rgba(15,15,15,.34) 55%, transparent 100%);
  z-index: -1;
  transition: opacity var(--t);
}
.home .site-header.is-scrolled::before,
.home .site-header.is-open::before { opacity: 0; }
.site-header .brand,
.nav-main a,
.nav-dropdown > button,
.nav-cta .phone { color: #fff; }
.home .site-header:not(.is-scrolled) .nav-main a,
.home .site-header:not(.is-scrolled) .nav-dropdown > button { text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.nav-main a:hover,
.nav-dropdown:hover > button { color: var(--accent-2); }
.nav-main a.is-active { color: var(--accent-2); }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after { background: #fff; }

/* Logo lockup — the mark is white line-art, so it sits straight on charcoal */
.brand__logo { height: 54px; width: auto; display: block; transition: height var(--t); }
.home .site-header:not(.is-scrolled) .brand__logo { height: 64px; }
.footer-brand__logo { height: 62px; width: auto; display: block; }
@media (max-width: 1024px) { .brand__logo,
  .home .site-header:not(.is-scrolled) .brand__logo { height: 46px; } }

/* Dropdown panel stays a white card — part of the 30% */
.nav-dropdown-menu { background: #fff; border-color: rgba(0,0,0,.10); }
.site-header .nav-dropdown-menu a { color: #1F1F1F; }
.site-header .nav-dropdown-menu a:hover { background: #F4F1EE; color: var(--accent-ink); }

/* ---- 2. No hero zoom (v4 convention) + a warmer charcoal scrim ---- */
.hero__bg { animation: none !important; transform: none !important; }
.hero { background-color: #141414; }
.hero::after {
  background:
    linear-gradient(103deg, rgba(15,15,15,.82) 0%, rgba(15,15,15,.48) 44%, rgba(15,15,15,.12) 78%),
    linear-gradient(180deg, rgba(15,15,15,.34) 0%, rgba(15,15,15,.46) 58%, rgba(15,15,15,.90) 100%);
}
.hero__eyebrow, .hero__sub, .hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero--page { min-height: 480px; }

/* ---- 3. Body copy + section bands on charcoal ---- */
p { color: var(--ink-soft); }
.section--alt { background: var(--bg-alt) !important; }
.section--dark { background: var(--bg-deep) !important; }
.intro-statement h2 { color: #fff; }
.intro-statement h2 em { color: var(--accent-2); }
.intro-statement .byline { color: var(--accent-2); }
.eyebrow { color: var(--ink-muted); }
.eyebrow .num, .section--dark .eyebrow .num { color: var(--accent); }
h1 em, h2 em, h3 em { color: var(--accent-2); }
.cta-banner h2 em { color: #fff; }

/* ---- 4. Buttons ---- */
.btn.btn--primary { background: var(--accent); color: #fff; }
.btn.btn--primary:hover { background: #FF7034; color: #fff;
  box-shadow: 0 16px 34px -14px rgba(242,88,28,.72); }
.btn.btn--ghost { border-color: rgba(255,255,255,.42); color: #fff; }
.btn.btn--ghost:hover { background: #fff; color: #1F1F1F; }
.btn--dark { background: #fff; color: #1F1F1F; }
.btn--dark:hover { background: var(--accent); color: #fff; }

/* ---- 5. White panels — the 30%. Anything with .panel flips to light ---- */
.panel {
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: var(--r-lg);
  box-shadow: var(--s-card);
}
.panel h2, .panel h3, .panel h4 { color: var(--panel-ink); }
.panel p, .panel li { color: #45484B; }
.panel .eyebrow { color: #7A7F85; }
.panel a { color: var(--accent-ink); }

/* ---- 6. Cards ---- */
.mag-card { background: var(--bg-alt); border: 1px solid var(--line); }
.mag-card__body h3 { color: #fff; }
.mag-card__body .num { color: var(--accent); }
.mag-card__body .meta { color: var(--ink-muted); }
.section--alt .mag-card { background: #1F1F1F; }
.feature { border-color: var(--line) !important; }
.feature h3 { color: #fff; }
.feature .num-big { color: var(--accent); opacity: .95; }

/* ---- 7. Split ---- */
.split__body h2 { color: #fff; }
.split__pullquote { border-left-color: var(--accent); color: var(--ink-soft); }
.split__pullquote cite { color: var(--accent-2); }

/* ---- 8. Trip rows (hunts index) ---- */
.trip-row { border-color: var(--line); }
.trip-row:hover { background: rgba(255,255,255,.05); }
.trip-row__num { color: var(--accent); }
.trip-row__title h3 { color: #fff; }
.trip-row__meta strong { color: #fff; }

/* ---- 9. Price cards — white panel, orange figure ---- */
.price-card {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08);
  color: #1F1F1F;
  box-shadow: var(--s-card);
}
.price-card h3, .price-card h4 { color: #1F1F1F; }
.price-card .price { color: var(--accent-ink); display: flex; align-items: flex-start; }
.price-card .price sup { color: var(--accent-ink); }
.price-card small { color: #6B7075 !important; }
.price-card p { color: #45484B !important; }
.price-card .pricing-rows li { border-bottom-color: rgba(0,0,0,.09) !important; }
.price-card .pricing-rows li > span { color: #6B7075 !important; }
.price-card .pricing-rows li > strong { color: #1F1F1F !important; }
.price-note {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; letter-spacing: .06em; line-height: 1.7;
  color: #6B7075; margin: 14px 0 0; text-transform: uppercase;
}

/* ---- 10. Spec list (what's included / not included) ---- */
.spec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
@media (max-width: 780px) { .spec-cols { grid-template-columns: 1fr; gap: 28px; } }
.spec-list { list-style: none; padding: 0; margin: 0; }
.spec-list li {
  position: relative; padding: 11px 0 11px 30px;
  border-bottom: 1px solid var(--line);
  font-size: .97rem; color: var(--ink-soft);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list li::before {
  content: ""; position: absolute; left: 2px; top: 19px;
  width: 12px; height: 2px; background: var(--accent);
}
.spec-list--no li::before { background: rgba(255,255,255,.24); }
.panel .spec-list li { border-bottom-color: rgba(0,0,0,.09); color: #45484B; }

/* ---- 11. FAQ accordion — white panel ---- */
.faq-list { max-width: 900px; }
.faq-item { border-bottom-color: var(--line); }
.faq-item summary { color: #fff; }
.faq-item summary::after { color: var(--accent); }
.faq-item summary:hover { color: var(--accent-2); }
.faq-item .faq-body { color: var(--ink-soft); }
.panel .faq-item { border-bottom-color: rgba(0,0,0,.09); }
.panel .faq-item summary { color: #1F1F1F; }
.panel .faq-item .faq-body { color: #45484B; }

/* ---- 12. Quotes ---- */
.quote { background: var(--bg-alt); color: var(--ink-soft); }
.section--dark .quote { background: var(--bg-deep-2); }
.quote::before { color: var(--accent); }
.quote cite, .section--dark .quote cite { color: var(--accent-2); }

/* ---- 13. Contact cards ---- */
.contact-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 860px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  transition: transform var(--t), border-color var(--t);
}
.contact-card:hover { transform: translateY(-3px); border-color: rgba(242,88,28,.55); }
.contact-card .ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(242,88,28,.14); color: var(--accent);
  margin-bottom: 18px;
}
.contact-card .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.contact-card h3 { font-size: 1.05rem; color: #fff; margin-bottom: 6px; }
.contact-card a, .contact-card p {
  font-family: "IBM Plex Mono", monospace; font-size: 14px;
  letter-spacing: .02em; color: var(--ink-soft); margin: 0;
}
.contact-card a:hover { color: var(--accent-2); }

/* ---- 14. Forms + MB embeds ---- */
.field label { color: var(--ink-muted); }
.field input, .field select, .field textarea {
  background: #262626; border-color: var(--line); color: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242,88,28,.18);
}
.form { background: transparent; }
.contact-form-shell {
  background: #fff; border-radius: var(--r-lg); padding: 8px;
  box-shadow: var(--s-card); overflow: hidden;
}
.mb-form-embed { background: transparent; border: 0; }
/* MB's contact form renders as a dark iframe we can't restyle — give it room. */
.contact-form-shell iframe { width: 100% !important; border: 0; display: block; }

/* ---- 15. Footer ---- */
.site-footer { background: #141414; }
.site-footer .top { border-bottom-color: rgba(255,255,255,.10); }
.site-footer h4 { color: #fff; }
.socials a { border-color: rgba(255,255,255,.24); color: #fff; }
.socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- 16. Gallery masonry: real intrinsic sizing, no forced crop ---- */
.gallery-grid .tile { height: auto; cursor: zoom-in; border-radius: var(--r-md); }

/* ---- 17. Stat strip ---- */
.stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 860px) { .stat-strip { grid-template-columns: repeat(2,1fr); } }
.stat { border-left: 2px solid var(--accent); padding: 6px 0 6px 20px; }
.stat b {
  display: block; font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1; color: #fff;
}
.stat span {
  display: block; margin-top: 10px; font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted);
}

/* ---- 18. Species chip row ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink-soft);
}
.chips li.is-hot { border-color: var(--accent); color: var(--accent-2); }

/* =========================================================================
   ANIMATED MOBILE MENU — full-screen charcoal panel, staggered link reveal
   Replaces the base template's plain drop-down block.
   ========================================================================= */
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; z-index: 3; }

  .nav-main {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: calc(var(--nav-h) + 8px) 30px 32px;
    background: #171717;
    border-bottom: 0;
    box-shadow: none;
    overflow-y: auto;
    /* closed state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    clip-path: circle(0% at calc(100% - 44px) 44px);
    transition: clip-path 620ms cubic-bezier(.76,0,.24,1),
                opacity 240ms ease,
                visibility 0s linear 620ms;
  }
  .is-open .nav-main {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    clip-path: circle(150% at calc(100% - 44px) 44px);
    transition: clip-path 720ms cubic-bezier(.22,1,.36,1),
                opacity 200ms ease,
                visibility 0s linear 0s;
  }
  /* Orange wash that sweeps in behind the panel */
  .nav-main::before {
    content: "";
    position: absolute; inset: auto -20% -30% -20%;
    height: 62%;
    background: radial-gradient(60% 100% at 50% 100%, rgba(242,88,28,.20) 0%, transparent 72%);
    pointer-events: none;
  }

  /* 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(.22,1,.36,1);
  }
  .is-open .nav-main > a,
  .is-open .nav-main > .nav-dropdown { opacity: 1; transform: none; }
  .is-open .nav-main > *:nth-child(1) { transition-delay: 170ms; }
  .is-open .nav-main > *:nth-child(2) { transition-delay: 225ms; }
  .is-open .nav-main > *:nth-child(3) { transition-delay: 280ms; }
  .is-open .nav-main > *:nth-child(4) { transition-delay: 335ms; }
  .is-open .nav-main > *:nth-child(5) { transition-delay: 390ms; }
  .is-open .nav-main > *:nth-child(6) { transition-delay: 445ms; }
  .is-open .nav-main > *:nth-child(7) { transition-delay: 500ms; }

  .nav-main > a,
  .nav-dropdown > button {
    font-size: 1.32rem !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    font-weight: 600 !important;
    color: #fff !important;
    padding: 11px 0 !important;
    display: block;
    width: 100%;
    text-align: left;
  }
  .nav-main > a::after { display: none; }
  .nav-dropdown > button { justify-content: space-between; }
  .nav-dropdown > button::after { transition: transform var(--t); }
  .nav-dropdown.open > button { color: var(--accent-2) !important; }
  .nav-dropdown.open > button::after { transform: rotate(-135deg) translateY(-2px); }

  /* accordion sub-menu */
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 1px solid rgba(242,88,28,.45);
    border-radius: 0;
    background: transparent;
    padding: 2px 0 8px 16px;
    margin: 0 0 4px;
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 420ms cubic-bezier(.22,1,.36,1);
  }
  .nav-dropdown.open .nav-dropdown-menu { max-height: 620px; }
  .site-header .nav-dropdown-menu a {
    color: rgba(255,255,255,.78) !important;
    background: transparent !important;
    font-size: 1rem;
    letter-spacing: .01em;
    padding: 8px 0;
  }
  .site-header .nav-dropdown-menu a:hover { color: var(--accent-2) !important; }

  /* phone + book button live inside the panel on mobile */
  .nav-cta .btn { display: none; }
  .mm-foot {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.12);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 420ms ease, transform 520ms cubic-bezier(.22,1,.36,1);
  }
  .is-open .mm-foot { opacity: 1; transform: none; transition-delay: 545ms; }
  .mm-foot .btn { width: 100%; justify-content: center; }
  .mm-foot .mm-phone {
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px; letter-spacing: .06em; color: rgba(255,255,255,.72);
  }
  body.menu-open { overflow: hidden; }

  /* shorter handsets */
  @media (max-height: 700px) {
    .nav-main > a, .nav-dropdown > button { font-size: 1.15rem !important; padding: 8px 0 !important; }
    .site-header .nav-dropdown-menu a { font-size: .93rem; padding: 6px 0; }
    .mm-foot { margin-top: 20px; padding-top: 18px; }
  }
}
.mm-foot { display: none; }
@media (max-width: 1024px) { .mm-foot { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  .nav-main, .nav-main > a, .nav-main > .nav-dropdown, .mm-foot, .reveal {
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .nav-main { clip-path: none !important; }
}

/* ---- MB booking widget: it mounts a wrapper around our button on some
   builds. Keep the button looking like ours, and never let MB's injected
   inline <script> render as text. (template-wide bug, see memory) ---- */
.mb-full-width script { display: none !important; }
.mb-full-width button.btn.btn--primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
}
button.btn.mb_widget { font-family: "Archivo", "Inter", system-ui, sans-serif; cursor: pointer; }
.chips li a { color: inherit; display: block; }
.chips li:hover { border-color: rgba(242,88,28,.6); color: var(--accent-2); }
.btn.is-full { width: 100%; justify-content: center; }
.trip-row__cta .btn { pointer-events: none; }

/* =========================================================================
   TEN HIGH — FIX PASS 1
   ========================================================================= */

/* [A] Chromium composites opacity:0 descendants INTO the backdrop snapshot of
   an ancestor carrying backdrop-filter, so the closed dropdown panels paint
   as ghost rectangles over the hero on every non-home page. opacity alone is
   not enough — the panel must also leave the paint tree. */
.nav-dropdown-menu { visibility: hidden; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { visibility: visible; }

/* [B] `.detail-grid ul li::before` injects an em-dash + space-between into
   every list inside the hunt-detail grid, including .pricing-rows and
   .spec-list which draw their own markers. */
.detail-grid .pricing-rows li::before,
.detail-grid .spec-list li::before { content: none; }
.detail-grid .spec-list li {
  display: block;
  justify-content: flex-start;
  padding: 11px 0 11px 30px;
}
.detail-grid .spec-list li::after {
  content: ""; position: absolute; left: 2px; top: 19px;
  width: 12px; height: 2px; background: var(--accent);
}
.detail-grid .pricing-rows li { padding: 10px 0; }

/* [C] Multiple packages stack in one column instead of becoming grid items */
.price-col { display: flex; flex-direction: column; gap: 22px; align-self: start; }
.price-card { padding: 32px 30px; }
.price-card h3 { font-size: 1.15rem; letter-spacing: -.005em; }
.price-card .price { font-size: 52px; margin: 6px 0 14px; }
.price-card .price sup { font-size: 20px; top: 7px; margin-right: 8px; }
.price-card .btn { margin-top: 4px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; gap: 40px; } }

/* [D] Card meta lines are one short spec line, not a paragraph */
.mag-card__body .meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.mag-card__body { padding: 26px 24px 22px; }
.mag-card__body h3 { font-size: 1.5rem; }
.mag-card.is-sm .mag-card__body h3 { font-size: 1.25rem; }

/* [E] Contact-card body text shouldn't wrap mid-phrase */
.contact-card p { line-height: 1.75; }

/* =========================================================================
   TEN HIGH — FIX PASS 2 (mobile menu geometry)
   ========================================================================= */
@media (max-width: 1024px) {
  /* The base template pins the open panel at `top: var(--nav-h)` with higher
     specificity than our `.nav-main` rule, so the panel started 88px down and
     the hero showed through behind the logo. Pin it to the full viewport. */
  .is-open .nav-main { top: 0 !important; bottom: 0 !important; }

  /* Header needs its own solid plate while the panel is open, otherwise the
     logo + close button sit on a transparent strip over the hero. */
  .site-header.is-open,
  .home .site-header.is-open { background: #171717; backdrop-filter: none; box-shadow: none; }

  /* Content flows from the top and scrolls if it must — 9 species is a lot of
     links to fit on a 640px-tall handset. */
  .nav-main { justify-content: flex-start; padding: calc(var(--nav-h) + 14px) 30px 34px; }
  .nav-main > a,
  .nav-dropdown > button { font-size: 1.18rem !important; padding: 9px 0 !important; }
  .site-header .nav-dropdown-menu a { font-size: .95rem; padding: 6px 0; }
  .nav-dropdown-menu { padding: 2px 0 6px 16px; }
  .mm-foot { margin-top: 22px; padding-top: 20px; }

  @media (max-height: 780px) {
    .nav-main > a, .nav-dropdown > button { font-size: 1.08rem !important; padding: 7px 0 !important; }
    .site-header .nav-dropdown-menu a { font-size: .9rem; padding: 5px 0; }
  }
  @media (max-height: 640px) {
    .nav-main > a, .nav-dropdown > button { font-size: 1rem !important; padding: 5px 0 !important; }
    .mm-foot { margin-top: 14px; padding-top: 14px; }
  }
}

/* =========================================================================
   TEN HIGH — FIX PASS 3
   ========================================================================= */
@media (max-width: 1024px) {
  /* The decorative orange wash hung 30% below the panel, which inflated
     scrollHeight and made the closed menu report 253px of phantom scroll. */
  .nav-main::before { inset: auto 0 0 0; height: 42%; }

  /* With a dropdown expanded the list is 16 items deep — shrink the
     top-level links so the whole thing still fits on a normal handset. */
  .site-header.dd-open .nav-main > a,
  .site-header.dd-open .nav-dropdown > button { font-size: 1.02rem !important; padding: 6px 0 !important; }
  .site-header.dd-open .site-header .nav-dropdown-menu a,
  .site-header.dd-open .nav-dropdown-menu a { font-size: .89rem !important; padding: 4px 0 !important; }
  .site-header.dd-open .mm-foot { margin-top: 16px; padding-top: 14px; }
}

/* =========================================================================
   TEN HIGH — FIX PASS 4 (10 hunt links in a 16-item panel)
   ========================================================================= */
@media (max-width: 1024px) {
  :root { --nav-h: 72px; }
  .nav-main { padding: calc(var(--nav-h) + 16px) 26px 28px; }

  /* Two columns turns a 10-row species list into 5 rows — the single change
     that lets the fully-expanded panel fit a normal handset. */
  .nav-dropdown-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
  }
  .nav-dropdown.open .nav-dropdown-menu { max-height: 420px; }
  .site-header .nav-dropdown-menu a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* "All Guided Hunts" reads as a heading, so give it the full width */
  .nav-dropdown-menu a:first-child { grid-column: 1 / -1; color: #fff !important; }

  @media (max-height: 700px) {
    .site-header.dd-open .nav-main > a,
    .site-header.dd-open .nav-dropdown > button { font-size: .95rem !important; padding: 4px 0 !important; }
    .site-header.dd-open .nav-dropdown-menu a { font-size: .82rem !important; padding: 3px 0 !important; }
    .site-header.dd-open .mm-foot { margin-top: 12px; padding-top: 12px; }
    .site-header.dd-open .mm-foot .btn { padding: 12px 20px; }
  }
}

/* =========================================================================
   TEN HIGH — CONTRAST PASS (automated WCAG AA audit, see contrast.py)
   Brand orange #F2581C stays the accent everywhere it passes. Three spots
   needed a tuned value:
     1. White on #F2581C is 3.39:1 — fails AA for the 13px button label.
        The button fill drops to #D84019, the lightest orange that reaches
        4.5:1 against white. Visually the same orange; measurably compliant.
     2. #F2581C on the #262626 band is 4.46:1 — a hair under. Section
        numerals use --accent-2 (#FF7A45, 5.85:1) on dark surfaces.
     3. .price-note grey was tuned for white panels and was being reused on
        charcoal at 3.30:1.
   ========================================================================= */
:root { --accent-btn: #D84019; }

.btn.btn--primary,
button.btn.btn--primary,
.mb-full-width button.btn.btn--primary {
  background: var(--accent-btn) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px -12px rgba(216,64,25,.65);
}
.btn.btn--primary:hover,
button.btn.btn--primary:hover {
  background: #BF3612 !important;
  color: #fff !important;
  box-shadow: 0 16px 34px -14px rgba(216,64,25,.8);
}
.btn.btn--primary:focus-visible,
button.btn.btn--primary:focus-visible,
.btn:focus-visible, a:focus-visible, summary:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid #FF7A45;
  outline-offset: 3px;
}

/* Section numerals + eyebrow rules on every dark surface */
.eyebrow .num,
.section--alt .eyebrow .num,
.section--dark .eyebrow .num { color: var(--accent-2); }
/* ...but the white panels keep the deep orange, which reads 5.2:1 on #fff */
.panel .eyebrow .num, .price-card .eyebrow .num { color: var(--accent-ink); }

/* Muted notes: light grey on charcoal, dark grey on the white panels */
.price-note { color: #9AA0A6; }
.price-card .price-note,
.panel .price-note { color: #6B7075; }

/* Same reasoning for the small mono meta text on cards */
.mag-card__body .meta { color: rgba(255,255,255,.82); }
.stat span, .field label, .hero__meta, .breadcrumb, .breadcrumb a { color: rgba(255,255,255,.78); }

/* =========================================================================
   TEN HIGH — FIX PASS 5 (magazine grid)
   `.mag-card__img` has a fixed 4/3 aspect ratio, so a short card stretched by
   a taller grid-row neighbour left a dead charcoal band under its photo.
   Let the image fill whatever height the row hands the card.
   ========================================================================= */
.mag-card { display: flex; flex-direction: column; }
.mag-card__img { flex: 1 1 auto; aspect-ratio: auto; min-height: 260px; }
.mag-card.is-lg .mag-card__img,
.mag-card.is-wide .mag-card__img { min-height: 340px; }
.mag-card__body { background: linear-gradient(0deg, rgba(12,12,12,.94) 0%, rgba(12,12,12,.72) 46%, rgba(12,12,12,0) 100%); }
@media (max-width: 900px) { .mag-card__img { min-height: 240px !important; } }
/* Card eyebrow sits high in the scrim — pale photos (antelope, oryx) need help */
.mag-card__body .num { text-shadow: 0 1px 10px rgba(0,0,0,.85); }
.mag-card__body { padding-top: 46px; }

/* =========================================================================
   TEN HIGH — FEEDBACK ROUND 1
   ========================================================================= */

/* ---- [1] MOBILE MENU WAS BROKEN ON EVERY PAGE BUT HOME ------------------
   `backdrop-filter` on `.site-header` makes the header a CONTAINING BLOCK
   for its `position: fixed` descendant `.nav-main`, so the open mobile panel
   collapsed to the 72px header box. It only worked on the home page because
   that's the one place the header has no filter (transparent over the hero).
   Fix: the header itself carries NO filter — a ::before plate does. A filter
   on a pseudo-element does not create a containing block. Do not move this
   back onto .site-header.                                                  */
.site-header,
.site-header.is-scrolled,
body:not(.home) .site-header {
  background: transparent !important;
  backdrop-filter: none !important;
  transition: box-shadow var(--t);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20,20,20,.94);
  backdrop-filter: saturate(150%) blur(12px);
  opacity: 1;
  transition: opacity var(--t);
}
body:not(.home) .site-header { box-shadow: 0 1px 0 rgba(255,255,255,.10); }
/* Home: transparent over the hero, with a soft scrim so nav links stay legible */
.home .site-header::before {
  background: linear-gradient(180deg, rgba(15,15,15,.80) 0%, rgba(15,15,15,.34) 58%, transparent 100%);
  backdrop-filter: none;
  inset: 0 0 -90% 0;
}
.home .site-header.is-scrolled::before {
  background: rgba(20,20,20,.94);
  backdrop-filter: saturate(150%) blur(12px);
  inset: 0;
}
.home .site-header.is-scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.10); }
/* Menu open: solid plate on every page, no blur, no gradient */
.site-header.is-open::before,
.home .site-header.is-open::before {
  background: #171717 !important;
  backdrop-filter: none !important;
  inset: 0 !important;
}

/* ---- [2] DROPDOWN WAS WHITE TEXT ON A WHITE PANEL ----------------------
   `.home .site-header:not(.is-scrolled) .nav-main a { color:#fff }` (0,3,1)
   out-ranked the panel's own ink rule, so on the home page the menu was
   literally invisible. Rather than fight specificity with a white panel,
   the panel is now dark — same language as the mobile menu, and there is no
   state in which it can inherit a colour that disappears.                  */
.site-header .nav-main .nav-dropdown-menu,
.home .site-header:not(.is-scrolled) .nav-main .nav-dropdown-menu {
  background: #171717;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 24px 54px -18px rgba(0,0,0,.8);
  padding: 10px;
  min-width: 248px;
}
.site-header .nav-main .nav-dropdown-menu a,
.home .site-header:not(.is-scrolled) .nav-main .nav-dropdown-menu a,
.home .site-header .nav-main .nav-dropdown-menu a {
  color: rgba(255,255,255,.88) !important;
  background: transparent;
  font-size: 13px;
  letter-spacing: .06em;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  text-shadow: none !important;
}
.site-header .nav-main .nav-dropdown-menu a:hover,
.home .site-header:not(.is-scrolled) .nav-main .nav-dropdown-menu a:hover,
.home .site-header .nav-main .nav-dropdown-menu a:hover {
  color: #fff !important;
  background: rgba(242,88,28,.16);
}
/* First entry reads as the section heading */
.site-header .nav-main .nav-dropdown-menu a:first-child {
  color: #fff !important;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  margin-bottom: 6px;
  padding-bottom: 12px;
}

/* ---- [5][8] HERO CONTENT MATCHES PAGE CONTENT WIDTH --------------------
   .hero__inner was capped at 1100px inside a 1240px container, so hero copy
   sat narrower than every section below it. Match `.wrap` exactly.         */
.hero__inner {
  width: min(100% - 48px, var(--container));
  max-width: none;
}
.hero h1 { max-width: none; }
.hero__sub { max-width: 64ch; }
.hero__meta {
  right: max(24px, calc((100vw - var(--container)) / 2));
}
@media (max-width: 1336px) { .hero__meta { right: 24px; } }
/* Keep "long before opening day." unbroken on its own line */
.hero h1 .nb { white-space: nowrap; }
@media (max-width: 700px) { .hero h1 .nb { white-space: normal; } }

/* ---- [3] GUIDED HUNTS TABLE NEEDED BREATHING ROOM ---------------------- */
.trips-list { border-top: 0; }
.trip-row {
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  background: rgba(255,255,255,.02);
}
.trip-row:last-child { margin-bottom: 0; }
.trip-row:hover {
  background: rgba(255,255,255,.055);
  border-color: rgba(242,88,28,.5);
}
.trip-row__title h3 { margin-bottom: 6px; }
.trip-row__title p { line-height: 1.6; }
@media (max-width: 900px) {
  .trip-row { padding: 24px 22px; gap: 16px; }
}

/* ---- [6] CONTACT FORM: NO WHITE PLATE BEHIND THE MB EMBED -------------- */
.contact-form-shell {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

/* ---- [2b] HOME GUIDED HUNTS: 2 ROWS x 3 CARDS ------------------------- */
.mag-card.is-third { grid-column: span 4; }
.mag-card.is-third .mag-card__img { min-height: 300px; }
@media (max-width: 900px) { .mag-card.is-third { grid-column: span 12; } }
/* Species galleries hold 2-4 photos, so the 4-column masonry leaves them
   stranded in a narrow strip. Give the tight variant fewer, wider columns. */
.gallery-grid--tight { column-count: 3; }
@media (max-width: 900px) { .gallery-grid--tight { column-count: 2; } }
@media (max-width: 560px) { .gallery-grid--tight { column-count: 1; } }

/* ---- [2c] The dark-panel rules above are DESKTOP-ONLY -------------------
   `.site-header .nav-main .nav-dropdown-menu` (0,3,0) out-ranks the mobile
   accordion's own padding rule (0,1,0) and was leaking a 10px pad + 248px
   min-width into the phone menu, pushing it past the viewport. Re-assert the
   accordion styling at matching specificity below the breakpoint.          */
@media (max-width: 1024px) {
  .site-header .nav-main .nav-dropdown-menu,
  .home .site-header:not(.is-scrolled) .nav-main .nav-dropdown-menu {
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(242,88,28,.45);
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 6px 16px;
    min-width: 0;
  }
  .site-header .nav-main .nav-dropdown-menu a,
  .home .site-header .nav-main .nav-dropdown-menu a {
    padding: 6px 0;
    border-radius: 0;
    font-size: .95rem;
  }
  .site-header .nav-main .nav-dropdown-menu a:first-child {
    border-bottom: 0;
    margin-bottom: 2px;
    padding-bottom: 6px;
  }
  .site-header .nav-main .nav-dropdown-menu a:hover { background: transparent; }
  .site-header.dd-open .nav-main .nav-dropdown-menu a { font-size: .89rem !important; padding: 4px 0 !important; }
  @media (max-height: 700px) {
    .site-header.dd-open .nav-main .nav-dropdown-menu a { font-size: .82rem !important; padding: 3px 0 !important; }
  }
}
/* With the plate gone the embed's inherited 28px inset just narrows the form */
.contact-form-shell .mb-form-embed { padding: 0; margin-top: 0; }
.contact-form-shell iframe { width: 100% !important; border: 0; display: block; }

/* Subtle topographic texture on grey section backgrounds */
.section{ background-image:url('/img/topo.svg'); background-size:1200px auto; background-repeat:repeat; background-position:center top; }
.section--alt{ background-color:var(--bg-alt) !important; background-image:url('/img/topo.svg') !important; background-size:1200px auto !important; background-repeat:repeat !important; }