/* =======================================================
   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:            #F4EFE6;         /* warm off-white */
  --bg-alt:        #ECE5D7;         /* sand */
  --bg-deep:       #0E2336;         /* navy */
  --bg-deep-2:     #13304A;         /* secondary navy */
  --ink:           #111B24;
  --ink-soft:      #3A4A56;
  --ink-muted:     #6B7A86;
  --line:          #D8CEBC;
  --line-dark:     rgba(255,255,255,.14);
  --accent:        #299B91;         /* copper */
  --accent-2:      #4FB8AD;         /* soft copper */
  --accent-ink:    #0B3A35;
  --white:         #FFFFFF;

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

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

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

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

/* ---------- RESET + BASE ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: "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; }

/* =======================================================
   PLAYITA FISHING CO. — LUXURY OVERRIDES (dark + champagne gold)
   Appended after Driftwater base. Keep MB widget defenses intact.
   ======================================================= */
:root {
  --bg:        #0C1117;
  --bg-alt:    #111926;
  --bg-deep:   #070B10;
  --bg-deep-2: #0E1826;
  --ink:       #EDE7DA;
  --ink-soft:  #C4BBA8;
  --ink-muted: #8F8877;
  --line:      rgba(201,161,92,.20);
  --line-dark: rgba(201,161,92,.16);
  --accent:    #34B0A4;
  --accent-2:  #5FC7BB;
  --accent-ink:#0C1117;
  --s-card:  0 14px 40px -18px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
  --s-hover: 0 26px 56px -18px rgba(0,0,0,.7), 0 3px 10px rgba(0,0,0,.35);
  --s-btn:   0 8px 22px -10px rgba(201,161,92,.55);
}
body { background: var(--bg) !important; color: var(--ink) !important; }
h1,h2,h3,h4 { color: var(--ink); }
.section--alt { background: var(--bg-alt) !important; }
.section--dark { background: var(--bg-deep) !important; }
.eyebrow { color: var(--accent-2); }
.eyebrow .num { color: var(--accent); }

/* Buttons — gold luxury */
.btn.btn--primary,
button.btn.btn--primary { background: var(--accent) !important; color: #0C1117 !important; box-shadow: var(--s-btn); border-color: var(--accent); }
.btn.btn--primary:hover,
button.btn.btn--primary:hover { background: var(--accent-2) !important; color: #0C1117 !important; transform: translateY(-2px); }
.btn.btn--ghost { color: var(--ink); border-color: rgba(201,161,92,.5); }
.btn.btn--ghost:hover { background: var(--accent); border-color: var(--accent); color: #0C1117; }
.btn--full { width: 100%; justify-content: center; }
/* MB widget wrapper flattens build-time button styling — hold the gold */
.mb-full-width button.btn.btn--primary,
.mb-full-width > div > div > button { background: var(--accent) !important; color: #0C1117 !important; border-radius: var(--r-pill); font-weight: 700; }

/* Header — always dark glass */
.site-header { background: rgba(7,11,16,.35); backdrop-filter: blur(6px); }
.site-header.is-scrolled { background: rgba(7,11,16,.92) !important; box-shadow: 0 10px 30px -18px rgba(0,0,0,.8); }
.nav-main a, .nav-dropdown > button { color: #fff; }
.nav-cta .phone { color: rgba(255,255,255,.85); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: #fff; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand-logo { height: 46px; width: auto; object-fit: contain; border-radius: 0; max-width: 240px; }
.brand-text { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.12rem; letter-spacing: .02em; line-height: 1.05; display: flex; flex-direction: column; }
.brand-text small { font-weight: 500; font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--accent-2); }

/* Dropdown panels — dark, gold ink (dark-header gotcha) */
.nav-dropdown-menu { background: #0E1826; border: 1px solid var(--line); box-shadow: var(--s-deep); }
.site-header .nav-dropdown-menu a { color: #EDE7DA !important; }
.site-header .nav-dropdown-menu a:hover { background: rgba(201,161,92,.12); color: var(--accent-2) !important; }
.nav-dropdown-menu--fleet { width: 560px; padding: 18px; left: 50%; transform: translateX(-50%); }
.nav-dropdown-menu--fleet .dd-all { display:block; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; padding:10px 12px; border-bottom:1px solid var(--line); margin-bottom:12px; color: var(--accent-2) !important; }
.dd-cols { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.dd-label { display:block; font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:6px 0 4px 12px; }
.dd-col a { display:block; font-size:.86rem; padding:7px 12px; border-radius:6px; }
@media (max-width:1200px){ .nav-dropdown-menu--fleet { width: 480px; } }

/* Hero */
.hero::after { background: linear-gradient(180deg, rgba(7,11,16,.5) 0%, rgba(7,11,16,.25) 40%, rgba(12,17,23,.96) 100%); }
.hero h1 em { color: var(--accent-2); }
.hero__eyebrow { color: var(--accent-2); }

/* Stats */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }
.stat-num, .stat-num-text { font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(2.2rem,4vw,3.4rem); color:var(--accent); display:block; line-height:1; }
.stat-label { font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted); display:block; margin-top:10px; }
@media (max-width:820px){ .stat-row { grid-template-columns:repeat(2,1fr); gap:22px; } }

/* Cards on dark */
.mag-card { background:#101823; }
.mag-card__body h3 { color:var(--ink); }
.center-cta { text-align:center; margin-top:44px; }

/* Destination cards */
.dest-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.dest-card { display:block; border-radius:var(--r-lg); overflow:hidden; background:#101823; border:1px solid var(--line); box-shadow:var(--s-card); transition:transform var(--t), box-shadow var(--t); }
.dest-card:hover { transform:translateY(-6px); box-shadow:var(--s-hover); }
.dest-card__img { height:300px; background-size:cover; background-position:center; transition:transform 900ms cubic-bezier(.2,.7,.2,1); }
.dest-card:hover .dest-card__img { transform:scale(1.05); }
.dest-card__body { padding:28px 30px 32px; }
.dest-card__body .num { font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.dest-card__body h3 { margin:0 0 10px; font-size:1.5rem; }
.dest-card__body p { color:var(--ink-soft); margin:0 0 18px; }
@media (max-width:900px){ .dest-grid { grid-template-columns:1fr; } .dest-card__img { height:220px; } }
.dest-prose { max-width:70ch; margin-bottom:40px; }
.dest-prose p { color:var(--ink-soft); }

/* Fleet rows */
.trip-row { display:grid; grid-template-columns:200px 1fr auto auto; gap:26px; align-items:center; padding:22px; border:1px solid var(--line); border-radius:var(--r-md); background:#101823; margin-bottom:16px; transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.trip-row:hover { transform:translateY(-3px); box-shadow:var(--s-hover); border-color:rgba(201,161,92,.45); }
.trip-row__img { width:200px; height:130px; border-radius:var(--r-sm); background-size:cover; background-position:center; }
.trip-row__title .num { font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.trip-row__title h3 { margin:0 0 6px; font-size:1.3rem; color:var(--ink); }
.trip-row__title p { margin:0; color:var(--ink-soft); font-size:.95rem; max-width:52ch; }
.trip-row__meta { font-size:.85rem; color:var(--ink-muted); text-align:right; line-height:1.7; }
.trip-row__meta strong { color:var(--ink); display:block; }
@media (max-width:960px){ .trip-row { grid-template-columns:1fr; gap:14px; } .trip-row__img { width:100%; height:190px; } .trip-row__meta { text-align:left; } }

/* Boat detail */
.detail-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:start; }
@media (max-width:960px){ .detail-grid { grid-template-columns:1fr; } }
.detail-grid p { color:var(--ink-soft); }
.price-card { background:#101823; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--s-card); position:sticky; top:110px; }
.price-card small { font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:14px; }
.price-card p { color:var(--ink-soft); font-size:.95rem; }
.pricing-rows { list-style:none; margin:0 0 18px; padding:0; }
.pricing-rows li { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--ink-soft); }
.pricing-rows li strong { color:var(--accent-2); font-family:"Archivo",sans-serif; font-size:1.05rem; white-space:nowrap; }
.price-note { font-size:.8rem !important; color:var(--ink-muted) !important; }
.species-strip { margin-top:28px; padding:18px 22px; border:1px solid var(--line); border-radius:var(--r-md); background:rgba(201,161,92,.05); }
.species-strip p { margin:4px 0 0; color:var(--accent-2); font-family:"Archivo",sans-serif; font-weight:600; letter-spacing:.02em; }
.species-strip .dd-label { margin-left:0; }

/* FAQ + contact on dark */
.faq-item { background:#101823; border:1px solid var(--line); }
.faq-item summary { color:var(--ink); }
.faq-body, .faq-item p { color:var(--ink-soft); }
.contact-list { list-style:none; padding:0; margin:24px 0 0; }
.contact-list li { padding:13px 0; border-bottom:1px solid var(--line); font-size:.98rem; color:var(--ink-soft); }
.contact-list li strong { display:block; font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:3px; }
.contact-list a { color:var(--ink); }
.contact-list a:hover { color:var(--accent-2); }
.contact-form-shell { background:#101823; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--s-card); }

/* CTA banner */
.cta-banner { background:linear-gradient(120deg, #0E1826 0%, #070B10 100%) !important; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cta-banner h2 em { color:var(--accent-2); }

/* Footer */
.site-footer { background:#070B10 !important; }
.footer-brand img { height:64px; width:auto; border-radius:10px; }
.site-footer .socials a:hover svg { fill:var(--accent-2); }

/* Gallery masonry on dark */
.gallery-grid .tile { border:1px solid rgba(201,161,92,.12); }

/* ---------- ANIMATED MOBILE MENU (GSAP overlay) ---------- */
.mobile-menu { position:fixed; inset:0; z-index:98; background:linear-gradient(160deg,#0A0F16 0%, #0E1826 100%); display:flex; flex-direction:column; justify-content:space-between; padding:110px 28px 40px; opacity:0; visibility:hidden; pointer-events:none; }
.mobile-menu.is-open { pointer-events:auto; }
.mobile-menu__links { display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.mobile-menu__links .mm-item { font-family:"Archivo",sans-serif; font-weight:700; font-size:1.5rem; color:#fff; padding:11px 0; border:none; background:none; text-align:left; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(201,161,92,.14); cursor:pointer; }
.mobile-menu__links .mm-item:hover { color:var(--accent-2); }
.mm-plus { color:var(--accent); font-weight:400; transition:transform var(--t); }
.mm-sub-toggle.open .mm-plus { transform:rotate(45deg); }
.mm-sub { display:none; flex-direction:column; padding:6px 0 10px 14px; }
.mm-sub.open { display:flex; }
.mm-sub a { font-size:1rem; color:var(--ink-soft); padding:8px 0; }
.mm-sub a:hover { color:var(--accent-2); }
.mobile-menu__cta { display:flex; flex-direction:column; gap:16px; padding-top:24px; }
.mm-phone { font-family:"Archivo",sans-serif; font-weight:600; color:#fff; font-size:1.1rem; text-align:center; }
.mobile-menu__cta .socials { display:flex; gap:18px; justify-content:center; }
.mobile-menu__cta .socials svg { width:22px; height:22px; fill:rgba(255,255,255,.7); }
body.menu-open { overflow:hidden; }

@media (max-width:1024px){
  .nav-cta .btn { display:none; }
  .nav-cta .phone { display:none; }
  .nav-main { display:none; }
}

/* Prevent label+arrow wrap inside pill buttons */
.btn { white-space: nowrap; }
.btn svg { flex: 0 0 auto; }
button.btn.mb_widget { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 480px){ .hero__buttons .btn { width: 100%; justify-content: center; } }

/* MB widget script re-styles its buttons late — force flex layout so the arrow never wraps */
button.btn.mb_widget { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; white-space: nowrap !important; }
button.btn.mb_widget svg { display: inline-block !important; }

/* =======================================================
   PLAYITA — ROUND 2 FEEDBACK FIXES
   ======================================================= */

/* Nav: wider bar, nothing wraps to two lines */
.nav-wrap { width: min(100% - 40px, 1460px); }
.nav-main { gap: 26px; }
.nav-main a, .nav-dropdown > button, .nav-cta .phone { white-space: nowrap; }
.brand-text { white-space: nowrap; }

/* Fleet grid: uniform 3 columns x 2 rows, image covers whole card */
.mag-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 340px; gap: 24px; }
.mag-card { position: relative !important; overflow: hidden; border-radius: var(--r-lg); grid-column: auto !important; grid-row: auto !important; min-height: 0 !important; }
.mag-card__img { position: absolute !important; inset: 0 !important; height: 100% !important; width: 100% !important; background-size: cover; background-position: center; transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
.mag-card:hover .mag-card__img { transform: scale(1.06); }
.mag-card__body { position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 24px !important; background: linear-gradient(180deg, rgba(7,11,16,0) 0%, rgba(7,11,16,.55) 35%, rgba(7,11,16,.92) 100%) !important; }
.mag-card__body h3 { color: #fff !important; margin: 4px 0 6px; }
.mag-card__body .num { color: var(--accent-2); }
.mag-card__body .meta { color: rgba(255,255,255,.75); }
@media (max-width: 1024px) { .mag-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 300px; } }
@media (max-width: 640px)  { .mag-grid { grid-template-columns: 1fr !important; grid-auto-rows: 260px; } }

/* CTA banner: swap gradient for a gold-glow night-water treatment */
.cta-banner { background: radial-gradient(900px 320px at 12% 0%, rgba(201,161,92,.22), transparent 60%), radial-gradient(700px 300px at 92% 100%, rgba(201,161,92,.12), transparent 55%), #0A121D !important; }

/* Ghost-light hover was white-on-cream — make text dark on white */
.btn.btn--ghost-light:hover { background: #fff !important; color: #0C1117 !important; border-color: #fff; }

/* Heroes: full viewport height, content width matches page container */
.hero--page { min-height: 100vh !important; align-items: flex-end; padding-bottom: 72px; }
.hero--home { min-height: 100vh; }
.hero__inner { width: min(100% - 48px, var(--container)) !important; max-width: none !important; margin-inline: auto; }

/* FAQ breathing room */
.faq-item { margin-bottom: 14px; border-radius: var(--r-md); }
.faq-item summary { padding: 22px 26px !important; }
.faq-item .faq-body, .faq-item p { padding: 0 26px 22px !important; margin: 0; }
.section .faq-list { padding-top: 10px; }

/* Contact: form stacks below the Reach Us block */
.form-wrap { display: grid !important; grid-template-columns: 1fr !important; gap: 44px !important; }
.contact-form-shell { max-width: 860px; }

/* Gallery filters */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 30px; }
.gf-chip { font-family: "Archivo", sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(201,161,92,.4); background: transparent; color: var(--ink-soft); cursor: pointer; transition: all var(--t); white-space: nowrap; }
.gf-chip:hover { border-color: var(--accent); color: var(--accent-2); }
.gf-chip.is-active { background: var(--accent); border-color: var(--accent); color: #0C1117; }
.gallery-grid--filterable .tile { cursor: zoom-in; transition: opacity var(--t), transform var(--t); }
.gallery-grid--filterable .tile:hover { opacity: .85; }
.gallery-grid--filterable .tile.is-hidden { display: none; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5,8,12,.94); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; box-shadow: 0 40px 120px rgba(0,0,0,.8); cursor: zoom-out; }
.lb-close { position: absolute; top: 18px; right: 26px; font-size: 2.4rem; line-height: 1; background: none; border: none; color: #fff; cursor: pointer; opacity: .8; }
.lb-close:hover { opacity: 1; color: var(--accent-2); }

/* =======================================================
   PLAYITA — ROUND 3: frosted nav, logo-only brand, fleet dropdown fix
   ======================================================= */

/* Frosted glass nav; dark blue once scrolled */
.site-header { background: rgba(16,26,42,.30) !important; backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid rgba(255,255,255,.07); }
.site-header.is-scrolled { background: rgba(12,29,53,.96) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(201,161,92,.16); }

/* Logo-only brand */
.brand-logo { height: 54px; width: auto; }

/* Fleet dropdown: reliable centering (no transform conflict) + no column overflow */
.nav-dropdown-menu--fleet { width: 640px; left: 50% !important; margin-left: -320px; transform: none !important; }
.nav-dropdown-menu--fleet .dd-cols { grid-template-columns: 1fr 1fr; }
.nav-dropdown-menu--fleet .dd-col a { white-space: normal; line-height: 1.35; }
@media (max-width: 1200px) { .nav-dropdown-menu--fleet { width: 560px; margin-left: -280px; } }

/* =======================================================
   REBEL FISHING ALLIANCE — LIGHT LUXURY RE-SKIN
   60 / 30 / 10 : white canvas / navy #003366 / orange #FF9800
   Appended after the Playita dark block. Every dark-surface rule
   from that block is re-stated here for a light canvas.
   ======================================================= */
:root {
  --bg:         #FFFFFF;
  --bg-alt:     #F4F7FA;
  --bg-deep:    #003366;
  --bg-deep-2:  #00284F;
  --ink:        #0E2338;
  --ink-soft:   #46586A;
  --ink-muted:  #7C8A98;
  --line:       #DFE6ED;
  --line-dark:  rgba(255,255,255,.16);
  --accent:     #FF9800;
  --accent-2:   #FFB244;
  --accent-ink: #00274D;
  --navy:       #003366;
  --navy-2:     #00284F;
  --s-card:  0 14px 40px -20px rgba(0,51,102,.26), 0 2px 6px rgba(0,51,102,.06);
  --s-hover: 0 26px 56px -20px rgba(0,51,102,.34), 0 3px 10px rgba(0,51,102,.10);
  --s-deep:  0 40px 90px -34px rgba(0,51,102,.42);
  --s-btn:   0 10px 24px -12px rgba(255,152,0,.75);
}

body { background: var(--bg) !important; color: var(--ink) !important; }
h1,h2,h3,h4 { color: var(--navy); }
p { color: var(--ink-soft); }

/* ---- Section surfaces ---- */
.section--alt  { background: var(--bg-alt) !important; }
.section--dark { background: var(--navy) !important; }
.section--dark h2, .section--dark h3, .section--dark h4, .section--dark p,
.section--dark li, .section--dark .lead { color: #fff !important; }
.section--dark p, .section--dark li { color: rgba(255,255,255,.84) !important; }
.section--dark .eyebrow { color: var(--accent-2) !important; }
.section--dark .feature-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.section--dark .feature-card h4 { color: #fff !important; }
.section--dark a { color: var(--accent-2); }

.eyebrow { color: var(--navy); }
.eyebrow .num { color: var(--accent); }

/* ---- Buttons: orange with navy ink (AA contrast) ---- */
.btn.btn--primary,
button.btn.btn--primary {
  background: var(--accent) !important; color: var(--accent-ink) !important;
  border-color: var(--accent); box-shadow: var(--s-btn); font-weight: 700;
}
.btn.btn--primary:hover,
button.btn.btn--primary:hover { background: var(--accent-2) !important; color: var(--accent-ink) !important; transform: translateY(-2px); }
.btn.btn--ghost { color: var(--navy); border-color: rgba(0,51,102,.34); }
.btn.btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
/* ghost buttons that sit on a photo or navy band */
.hero .btn.btn--ghost, .section--dark .btn.btn--ghost, .cta-banner .btn.btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero .btn.btn--ghost:hover, .section--dark .btn.btn--ghost:hover, .cta-banner .btn.btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn--full { width: 100%; justify-content: center; }
.mb-full-width button.btn.btn--primary,
.mb-full-width > div > div > button { background: var(--accent) !important; color: var(--accent-ink) !important; border-radius: var(--r-pill); font-weight: 700; }
/* template-wide: MB widget injects an inline <script> the flex rule would print */
.mb-full-width script { display: none !important; }

/* ---- Header: navy glass (logo art is white-on-transparent) ---- */
.site-header { background: rgba(0,40,79,.34) !important; backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,.10); }
.site-header.is-scrolled { background: rgba(0,51,102,.97) !important; border-bottom-color: rgba(255,152,0,.30); box-shadow: 0 10px 30px -20px rgba(0,51,102,.7); }
.nav-main a, .nav-dropdown > button { color: #fff; }
.nav-main a:hover, .nav-dropdown > button:hover { color: var(--accent-2); }
.nav-cta .phone { color: rgba(255,255,255,.88); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: #fff; }
.brand { color: #fff; }
.brand-logo { height: 52px; width: auto; object-fit: contain; max-width: 250px; }
.site-header.is-scrolled .brand-logo { height: 46px; }

/* Dropdown panel — white card, navy ink (dark-header cascade guard) */
.nav-dropdown-menu { background: #fff; border: 1px solid var(--line); box-shadow: var(--s-deep); }
.site-header .nav-dropdown-menu a { color: var(--navy) !important; }
.site-header .nav-dropdown-menu a:hover { background: rgba(255,152,0,.12); color: var(--accent-ink) !important; }
.nav-dropdown-menu--fleet .dd-all { color: var(--navy) !important; border-bottom-color: var(--line); }
.dd-label { color: var(--accent) !important; }

/* ---- Hero ---- */
.hero::after { background: linear-gradient(180deg, rgba(0,25,50,.62) 0%, rgba(0,25,50,.34) 42%, rgba(0,30,60,.72) 100%); }
.hero h1, .hero .hero__sub, .hero__eyebrow { color: #fff !important; }
.hero h1 { text-shadow: 0 3px 26px rgba(0,20,40,.5); }
.hero .hero__sub { text-shadow: 0 2px 14px rgba(0,20,40,.55); }
.hero h1 em, .hero__eyebrow { color: var(--accent-2) !important; }
.hero__meta { color: rgba(255,255,255,.9); }

/* YouTube video hero — poster sits ABOVE the iframe and fades out once
   playback has had time to start, so the hero is never a black box. */
.hero--video .hero__video { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; background:#00284F; }
.hero--video .hero__bg { z-index:1 !important; transition:opacity 900ms ease; }
.hero--video.is-playing .hero__bg { opacity:0; }
.hero--video .hero__video iframe {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; border:0;
}
@media (max-width: 820px){ .hero--video .hero__video { display:none; } }

/* ---- Cards / surfaces ---- */
.mag-card { background:#fff; border:1px solid var(--line); box-shadow: var(--s-card); }
.mag-card__body h3 { color: var(--navy); }
.dest-card { background:#fff; border:1px solid var(--line); }
.dest-card__body h3 { color: var(--navy); }
.dest-card__body .num { color: var(--accent); }
.dest-prose p { color: var(--ink-soft); }
.trip-row { background:#fff; border:1px solid var(--line); }
.trip-row:hover { border-color: rgba(255,152,0,.55); }
.trip-row__title h3 { color: var(--navy); }
.trip-row__title .num { color: var(--accent); }
.trip-row__meta { color: var(--ink-muted); }
.trip-row__meta strong { color: var(--navy); }

/* Stats */
.stat-row { border-top-color: var(--line); }
.stat-num, .stat-num-text { color: var(--accent); }
.stat-label { color: var(--ink-muted); }
.section--dark .stat-row { border-top-color: rgba(255,255,255,.22); }
.section--dark .stat-num, .section--dark .stat-num-text { color: var(--accent-2); }
.section--dark .stat-label { color: rgba(255,255,255,.7); }

/* Pricing */
.price-card { background:#fff; border:1px solid var(--line); box-shadow: var(--s-card); }
.price-card small { color: var(--accent); }
.pricing-rows li { border-bottom-color: var(--line); color: var(--ink-soft); }
.pricing-rows li strong { color: var(--navy); }
.price-note { color: var(--ink-muted) !important; }
.species-strip { background: rgba(0,51,102,.05); border-color: var(--line); }
.species-strip p { color: var(--navy); }

/* FAQ + contact */
.faq-item { background:#fff; border:1px solid var(--line); }
.faq-item summary { color: var(--navy); }
.faq-item[open] summary { color: var(--accent-ink); }
.faq-body, .faq-item p { color: var(--ink-soft); }
.contact-list li { border-bottom-color: var(--line); color: var(--ink-soft); }
.contact-list li strong { color: var(--accent); }
.contact-list a { color: var(--navy); }
.contact-list a:hover { color: var(--accent-ink); }
.contact-form-shell { background:#fff; border:1px solid var(--line); box-shadow: var(--s-card); }

/* CTA banner — navy band */
.cta-banner { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%) !important; border-top:0; border-bottom:0; }
.cta-banner h2, .cta-banner p { color:#fff !important; }
.cta-banner h2 em { color: var(--accent-2); }

/* Footer */
.site-footer { background: var(--navy-2) !important; color: rgba(255,255,255,.8); }
.site-footer h4 { color:#fff; }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: var(--accent-2); }
.site-footer .socials svg { fill: rgba(255,255,255,.78); }
.site-footer .socials a:hover svg { fill: var(--accent-2); }
.footer-brand img, .footer-brand__logo { height:56px; width:auto; border-radius:0; }
.site-footer .legal { color: rgba(255,255,255,.55); border-top-color: rgba(255,255,255,.14); }

/* Gallery */
.gallery-grid .tile { border:1px solid var(--line); }
.gf-chip { border-color: rgba(0,51,102,.28); color: var(--ink-soft); }
.gf-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.gf-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Brands we trust */
.brands-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:26px 34px; align-items:center; }
.brands-strip img { max-height:74px; width:auto; margin:0 auto; filter:none; opacity:.95; transition:transform var(--t), opacity var(--t); }
.brands-strip img:hover { transform:scale(1.06); opacity:1; }
@media (max-width:900px){ .brands-strip { grid-template-columns:repeat(3,1fr); gap:20px; } .brands-strip img { max-height:56px; } }

/* Mobile menu — navy */
.mobile-menu { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); }
.mobile-menu__links .mm-item { color:#fff; border-bottom-color: rgba(255,255,255,.16); }
.mobile-menu__links .mm-item:hover { color: var(--accent-2); }
.mm-plus { color: var(--accent); }
.mm-sub a { color: rgba(255,255,255,.78); }
.mm-sub a:hover { color: var(--accent-2); }
.mm-phone { color:#fff; }
.mobile-menu__cta .socials svg { fill: rgba(255,255,255,.8); }

/* Testimonials */
.quote-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 34px; box-shadow:var(--s-card); }
.quote-card p { color:var(--ink-soft); font-style:italic; }
.quote-card cite { display:block; margin-top:16px; font-style:normal; font-family:"Archivo",sans-serif; font-weight:700; color:var(--navy); font-size:.92rem; }
.quote-card .mark { font-family:"Spectral",serif; font-size:3rem; line-height:.6; color:var(--accent); display:block; margin-bottom:8px; }
.quote-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:900px){ .quote-grid { grid-template-columns:1fr; } }

/* Spec list (boat) */
.spec-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 30px; }
.spec-list li { padding:11px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.95rem; }
@media (max-width:760px){ .spec-list { grid-template-columns:1fr; } }

/* Template adds `.detail-grid ul li::before { content:"—" }`. Our spec lists are
   flex, so that dash lands left and pushes the label right. Re-assert list styling
   globally so spec lists read left-to-right and pricing rows stay label/price. */
.spec-list li { display: block !important; position: relative; padding-left: 22px !important; justify-content: flex-start; }
.spec-list li::before { content: "\2014" !important; position: absolute; left: 0; top: 12px; color: var(--accent); line-height: 1; }
.section--dark .spec-list li { color: rgba(255,255,255,.86) !important; border-bottom-color: rgba(255,255,255,.18); }
.section--dark .spec-list li::before { color: var(--accent-2); }
.pricing-rows li::before { content: none !important; }
.contact-list li::before { content: none !important; }

/* Live MB form embed — drop the dashed placeholder chrome the template ships */
.contact-form-shell .mb-form-embed { border: 0 !important; padding: 0 !important; background: none !important; }
.contact-form-shell .mb-form-embed::before { content: none !important; }

/* =======================================================
   RFA — FEEDBACK ROUND 1
   ======================================================= */

/* 1. One font for every heading. The template mixes Archivo with a Spectral
      italic accent (`.display-serif`); unify on Archivo, keep italic emphasis. */
h1, h2, h3, h4, h5, h6,
h1 em, h2 em, h3 em, h4 em,
.display-serif,
.hero h1 em,
.intro-statement h2,
.section-head h2,
.cta-banner h2, .cta-banner h2 em,
.faq-item summary,
.quote-card cite {
  font-family: "Archivo", "Inter", system-ui, sans-serif !important;
}
h1 em, h2 em, h3 em, h4 em, .display-serif, .hero h1 em { font-style: italic; }

/* 2. "Why Choose Us" — all four features on a single row */
.feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
@media (max-width: 1100px) { .feature-row { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 620px)  { .feature-row { grid-template-columns: 1fr; } }

/* 3. Centred section heads (testimonials, Brands We Trust) — blurb sits under
      the heading rather than in a right-hand column */
.section-head--center { display: block !important; text-align: center; max-width: 820px; margin: 0 auto 44px; }
.section-head--center > div { max-width: none; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center h2 { margin-bottom: 14px; }
.section-head--center p { margin: 0 auto; max-width: 64ch; }

/* 4. Footer social icons go white on hover */
.site-footer .socials a:hover svg { fill: #fff !important; }

/* 5. Bigger "Rates" heading on the trip price card */
.price-card small {
  font-family: "Archivo", sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  color: var(--navy) !important;
  margin-bottom: 18px !important;
}

/* 6. Trip-page gallery: 8 images, 4 per row (overrides the masonry columns) */
.gallery-grid--four {
  column-count: initial !important; columns: initial !important;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.gallery-grid--four .tile { break-inside: auto; margin: 0 !important; border-radius: var(--r-md); overflow: hidden; }
.gallery-grid--four .tile img { width: 100%; height: 230px; object-fit: cover; display: block; }
@media (max-width: 1000px) { .gallery-grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .gallery-grid--four .tile img { height: 180px; } }

/* 7. What's included / Not included side by side */
.incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; margin-top: 44px; }
.incl-grid h3 { margin: 0 0 14px; }
.spec-list--single { grid-template-columns: 1fr !important; }
@media (max-width: 860px) { .incl-grid { grid-template-columns: 1fr; gap: 30px; } }

/* 8. Hero video now runs on mobile too. The still poster still sits on top and
      only lifts once the YT API reports real playback, so a blocked autoplay
      degrades to the photo instead of a black box. */
@media (max-width: 820px) { .hero--video .hero__video { display: block; } }

/* GSAP's split-image parallax writes an inline `background-position`, so the
   left crop has to be !important to win. Keeps Capt. Tim's face in frame. */
.split__img--left { background-position: left center !important; }

/* =======================================================
   RFA — FEEDBACK ROUND 2
   ======================================================= */

/* What's Included keeps two columns of items and takes the wider share of the
   row; Not Included is short, so it stays a single column. */
.incl-grid { grid-template-columns: 1.55fr 1fr; }
.incl-col--in .spec-list { grid-template-columns: 1fr 1fr !important; }
.incl-col--out .spec-list { grid-template-columns: 1fr !important; }
@media (max-width: 1000px) {
  .incl-grid { grid-template-columns: 1fr; }
  .incl-col--in .spec-list { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 620px) { .incl-col--in .spec-list { grid-template-columns: 1fr !important; } }

/* Mobile menu: top-aligned and scrollable so every item is reachable
   (8 nav items + the Charters accordion overflowed a short phone screen). */
.mobile-menu {
  justify-content: flex-start !important;
  padding: 88px 24px 32px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu__inner { width: 100%; display: flex; flex-direction: column; }
.mobile-menu__links { overflow: visible !important; }
.mobile-menu__links .mm-item { font-size: 1.3rem !important; padding: 9px 0 !important; }
.mm-sub { padding: 4px 0 8px 14px !important; }
.mm-sub a { font-size: .95rem !important; padding: 7px 0 !important; }
.mobile-menu__cta { padding-top: 22px !important; padding-bottom: 8px; }
@media (max-height: 720px) {
  .mobile-menu { padding-top: 78px !important; }
  .mobile-menu__links .mm-item { font-size: 1.12rem !important; padding: 7px 0 !important; }
  .mobile-menu__cta { gap: 12px !important; padding-top: 16px !important; }
}

/* =======================================================
   RFA — FEEDBACK ROUND 3
   Included / Not-included now sits below the detail grid and spans the full
   content width, so it is no longer squeezed into the left-hand column.
   ======================================================= */
.incl-grid {
  grid-template-columns: 2fr 1fr;
  gap: 30px 60px;
  margin-top: 64px;
  padding-top: 46px;
  border-top: 1px solid var(--line);
}
.incl-col--in .spec-list { grid-template-columns: 1fr 1fr !important; }
.incl-col--out .spec-list { grid-template-columns: 1fr !important; }
@media (max-width: 1000px) {
  .incl-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 48px; padding-top: 36px; }
}
@media (max-width: 620px) { .incl-col--in .spec-list { grid-template-columns: 1fr !important; } }

/* =======================================================
   RFA — FEEDBACK ROUND 4
   Included / Not-included presented as cards, matching the price card.
   ======================================================= */
.incl-grid {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 56px;
  gap: 26px;
  align-items: start;
}
.incl-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 34px 26px;
  box-shadow: var(--s-card);
  transition: box-shadow var(--t), transform var(--t);
}
.incl-col:hover { box-shadow: var(--s-hover); }
.incl-col h3 { margin: 0 0 16px; font-size: 1.32rem; }
.incl-col .spec-list { gap: 0 30px; }
.incl-col .spec-list li { padding: 10px 0; }
/* drop the trailing rule on the last item of each column */
.incl-col--out .spec-list li:last-child { border-bottom: 0; }
.incl-col--in .spec-list li:last-child,
.incl-col--in .spec-list li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
@media (max-width: 1000px) {
  .incl-grid { margin-top: 44px; gap: 20px; }
  .incl-col { padding: 26px 24px 20px; }
}

/* =======================================================
   OPEN BLIND HUNTING & LEASING — DARK LUXURY RE-SKIN
   60 / 30 / 10 : black #080808 / olive #939D25 / yellow #F7D050
   Appended AFTER the RFA light block. That block re-stated every
   surface for a white canvas; this one re-states them for black.
   Nothing above this line is edited — all overrides live here.
   ======================================================= */
:root {
  --bg:         #080808;   /* 60% dominant */
  --bg-alt:     #10110B;   /* olive-tinted near-black */
  --bg-deep:    #050505;
  --bg-deep-2:  #0C0D07;
  --ink:        #F2F0E6;
  --ink-soft:   #C6C4B4;
  --ink-muted:  #8E8D7C;
  --line:       rgba(147,157,37,.30);   /* olive hairlines — the 30% */
  --line-dark:  rgba(147,157,37,.22);
  --accent:     #F7D050;   /* 10% — CTA yellow */
  --accent-2:   #FFE27A;
  --accent-ink: #0A0A05;   /* near-black ink ON yellow (white fails AA) */
  --olive:      #939D25;
  --olive-2:    #AAB43A;
  --olive-deep: #5E6518;
  --olive-wash: rgba(147,157,37,.09);
  --navy:       #080808;   /* neutralize RFA's navy token */
  --navy-2:     #050505;
  --s-card:  0 16px 44px -20px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.5);
  --s-hover: 0 28px 60px -20px rgba(0,0,0,.9), 0 4px 12px rgba(0,0,0,.6);
  --s-deep:  0 44px 100px -34px rgba(0,0,0,.95);
  --s-btn:   0 10px 26px -12px rgba(247,208,80,.55);
}

body { background: var(--bg) !important; color: var(--ink) !important; }
h1,h2,h3,h4,h5,h6 { color: var(--ink); }
p { color: var(--ink-soft); }
a:hover { color: var(--accent); }

/* ---- Section surfaces ---- */
.section--alt  { background: var(--bg-alt) !important; }
.section--dark { background: var(--bg-deep) !important; }
.section--alt, .section--dark { position: relative; }
/* hairline olive rule between stacked bands — reads as structure, not decoration */
.section--alt::before, .section--dark::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ink) !important; }
.section--dark p, .section--dark li, .section--dark .lead { color: var(--ink-soft) !important; }
.section--dark .eyebrow { color: var(--olive-2) !important; }
.section--dark .feature-card { background: var(--olive-wash); border-color: var(--line); }
.section--dark .feature-card h4, .section--dark .feature-card h3 { color: var(--ink) !important; }
.section--dark a { color: var(--accent); }

.eyebrow { color: var(--olive-2); }
.eyebrow .num { color: var(--accent); }

/* ---- Buttons: yellow with near-black ink ---- */
.btn.btn--primary,
button.btn.btn--primary {
  background: var(--accent) !important; color: var(--accent-ink) !important;
  border-color: var(--accent) !important; box-shadow: var(--s-btn); font-weight: 800;
  letter-spacing: .02em;
}
.btn.btn--primary:hover,
button.btn.btn--primary:hover {
  background: var(--accent-2) !important; color: var(--accent-ink) !important;
  border-color: var(--accent-2) !important; transform: translateY(-2px);
}
.btn.btn--primary svg, button.btn.btn--primary svg { stroke: var(--accent-ink); }
.btn.btn--ghost { color: var(--ink); border-color: rgba(147,157,37,.55); background: transparent; }
.btn.btn--ghost:hover { background: var(--olive); border-color: var(--olive); color: #0A0A05; }
.btn.btn--ghost:hover svg { stroke: #0A0A05; }
.hero .btn.btn--ghost, .section--dark .btn.btn--ghost, .cta-banner .btn.btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.55);
}
.hero .btn.btn--ghost:hover, .section--dark .btn.btn--ghost:hover, .cta-banner .btn.btn--ghost:hover {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.mb-full-width button.btn.btn--primary,
.mb-full-width > div > div > button {
  background: var(--accent) !important; color: var(--accent-ink) !important;
  border-radius: var(--r-pill); font-weight: 800;
}
/* MB widget injects an inline <script>; the .mb-full-width flex rule would print it */
.mb-full-width script { display: none !important; }
/* `.mb-full-width button { background: transparent }` from the widget-defence block
   flattens the booking button. Re-assert the fill LAST so it always wins. */
.mb-full-width button.btn { background: var(--accent) !important; padding: 14px 30px !important; }
.mb-full-width button.btn.btn--full { width: 100% !important; justify-content: center !important; }

/* ---- Header: black glass, olive hairline, yellow on scroll ---- */
.site-header {
  background: rgba(8,8,8,.42) !important;
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid rgba(147,157,37,.22);
}
.site-header.is-scrolled {
  background: rgba(8,8,8,.97) !important;
  border-bottom-color: rgba(247,208,80,.36);
  box-shadow: 0 12px 34px -22px rgba(0,0,0,.95);
}
.nav-main a, .nav-dropdown > button { color: #F2F0E6; }
.nav-main a:hover, .nav-dropdown > button:hover { color: var(--accent); }
.nav-main a.is-active, .nav-dropdown > button.is-active { color: var(--accent); }
.nav-cta .phone { color: rgba(242,240,230,.86); }
.nav-cta .phone:hover { color: var(--accent); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: #F2F0E6; }
.brand { color: #F2F0E6; }
.brand-logo { height: 58px; width: auto; object-fit: contain; max-width: 230px; }
.site-header.is-scrolled .brand-logo { height: 48px; }

/* Dropdown panel — dark card (guards against the white-nav-link cascade) */
.nav-dropdown-menu {
  background: #0D0E08; border: 1px solid var(--line); box-shadow: var(--s-deep);
}
.site-header .nav-dropdown-menu a { color: var(--ink) !important; }
.site-header .nav-dropdown-menu a:hover { background: rgba(247,208,80,.13); color: var(--accent) !important; }
.nav-dropdown-menu--fleet .dd-all { color: var(--accent) !important; border-bottom-color: var(--line); }
.dd-label { color: var(--olive-2) !important; }

/* ---- Hero: heavy scrim so pale-sky bird photos still carry white type ---- */
.hero::after {
  background:
    linear-gradient(180deg, rgba(4,4,4,.72) 0%, rgba(4,4,4,.42) 38%, rgba(4,4,4,.86) 100%),
    linear-gradient(90deg, rgba(4,4,4,.52) 0%, rgba(4,4,4,0) 62%);
}
.hero h1, .hero .hero__sub, .hero__eyebrow { color: #fff !important; }
.hero h1 { text-shadow: 0 4px 30px rgba(0,0,0,.72); }
.hero .hero__sub { text-shadow: 0 2px 18px rgba(0,0,0,.8); }
.hero h1 em { color: var(--accent) !important; }
.hero__eyebrow { color: var(--accent) !important; letter-spacing: .18em; }
.hero__meta { color: rgba(255,255,255,.9); border-top-color: rgba(255,255,255,.2); }
.hero__meta span { color: rgba(255,255,255,.9); }

/* ---- Cards / surfaces ---- */
.mag-card { background: #0D0E08; border: 1px solid var(--line); box-shadow: var(--s-card); }
.mag-card:hover { border-color: rgba(247,208,80,.5); }
.mag-card__body h3 { color: var(--ink); }
.mag-card__body .num, .mag-card__body .meta { color: var(--olive-2); }
.dest-card { background: #0D0E08; border: 1px solid var(--line); }
.dest-card__body h3 { color: var(--ink); }
.dest-card__body .num { color: var(--accent); }
.dest-prose p { color: var(--ink-soft); }
.intro-statement h2 { color: var(--ink); }
.intro-statement h2 em { color: var(--accent); }
.intro-statement .byline { color: var(--olive-2); }
.trip-row { background: #0D0E08; border: 1px solid var(--line); }
.trip-row:hover { border-color: rgba(247,208,80,.6); background: #101109; }
.trip-row__title h3 { color: var(--ink); }
.trip-row__title .num { color: var(--olive-2); }
.trip-row__title p { color: var(--ink-soft); }
.trip-row__meta { color: var(--ink-muted); }
.trip-row__meta strong { color: var(--accent); }
.feature h3, .feature h4 { color: var(--ink); }
.feature p { color: var(--ink-soft); }
.feature .num-big { color: rgba(147,157,37,.42); }

/* Stats */
.stat-row { border-top-color: var(--line); }
.stat-num, .stat-num-text { color: var(--accent); }
.stat-label { color: var(--ink-muted); }
.section--dark .stat-row { border-top-color: var(--line); }
.section--dark .stat-num, .section--dark .stat-num-text { color: var(--accent); }
.section--dark .stat-label { color: var(--ink-muted); }

/* Pricing */
.price-card { background: #0D0E08; border: 1px solid var(--line); box-shadow: var(--s-card); }
.price-card small { color: var(--accent) !important; }
.price-card .price, .price-card .price sup { color: var(--accent); }
.pricing-rows li { border-bottom-color: var(--line); color: var(--ink-soft); }
.pricing-rows li strong { color: var(--accent); }
.price-note { color: var(--ink-muted) !important; }
.species-strip { background: var(--olive-wash); border-color: var(--line); }
.species-strip p { color: var(--ink-soft); }
.species-strip .dd-label { color: var(--olive-2) !important; }

/* FAQ + contact */
.faq-item { background: #0D0E08; border: 1px solid var(--line); }
.faq-item summary { color: var(--ink); }
.faq-item summary::after { color: var(--accent); }
.faq-item[open] summary { color: var(--accent); }
.faq-item[open] { border-color: rgba(247,208,80,.4); }
.faq-body, .faq-item p { color: var(--ink-soft); }
.contact-list li { border-bottom-color: var(--line); color: var(--ink-soft); }
.contact-list li strong { color: var(--olive-2); }
.contact-list a { color: var(--ink); }
.contact-list a:hover { color: var(--accent); }
.contact-form-shell { background: #0D0E08; border: 1px solid var(--line); box-shadow: var(--s-card); }
.contact-form-shell h3 { color: var(--ink); }
/* live MB form embed sits inside a dark shell — force its own type readable */
.contact-form-shell .mb-form-embed { border: 0 !important; padding: 0 !important; background: none !important; }
.contact-form-shell .mb-form-embed::before { content: none !important; }

/* CTA banner — olive-to-black band with a yellow top rule */
.cta-banner {
  background: linear-gradient(115deg, #14160C 0%, #080808 62%) !important;
  border-top: 1px solid rgba(247,208,80,.42) !important; border-bottom: 0 !important;
}
.cta-banner h2 { color: var(--ink) !important; }
.cta-banner p { color: var(--ink-soft) !important; }
.cta-banner h2 em { color: var(--accent); }

/* Footer */
.site-footer { background: #050505 !important; color: var(--ink-soft); border-top: 1px solid var(--line); }
.site-footer h4 { color: var(--accent); letter-spacing: .12em; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent); }
.site-footer p { color: var(--ink-muted) !important; }
.site-footer .socials svg { fill: rgba(242,240,230,.7); }
.site-footer .socials a:hover svg { fill: var(--accent) !important; }
.footer-brand__logo, .footer-brand img { height: 84px; width: auto; border-radius: 0; }
.site-footer .legal, .site-footer .bottom { color: var(--ink-muted); border-top-color: var(--line); }

/* Gallery */
.gallery-grid .tile { border: 1px solid var(--line); background: #0D0E08; }
.gallery-grid .tile:hover { border-color: rgba(247,208,80,.55); }
.gf-chip { border-color: rgba(147,157,37,.45); color: var(--ink-soft); background: transparent; }
.gf-chip:hover { border-color: var(--accent); color: var(--accent); }
.gf-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.lightbox { background: rgba(4,4,4,.94); }
.lb-close { color: var(--accent); }

/* Spec lists — olive dash */
.spec-list li { color: var(--ink-soft); border-bottom-color: var(--line); }
.spec-list li::before { color: var(--accent) !important; }
.section--dark .spec-list li { color: var(--ink-soft) !important; border-bottom-color: var(--line); }
.section--dark .spec-list li::before { color: var(--accent) !important; }
.incl-col { background: #0D0E08 !important; border: 1px solid var(--line) !important; box-shadow: var(--s-card); }
.incl-col h3 { color: var(--ink); }

/* Testimonials (unused on this build, kept consistent) */
.quote-card { background: #0D0E08; border: 1px solid var(--line); }
.quote-card p { color: var(--ink-soft); }
.quote-card cite { color: var(--accent); }
.quote-card .mark { color: var(--olive); }

/* Split blocks */
.split__img { background-color: #0D0E08; }
.split__body h2 em { color: var(--accent); }

/* ---- Season table (Open Blind specific) ---- */
.season-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .95rem; }
.season-table caption { text-align: left; color: var(--ink-muted); font-size: .86rem; padding-bottom: 12px; }
.season-table th, .season-table td {
  text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.season-table thead th {
  font-family: "Archivo", sans-serif; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--olive-2); border-bottom-color: rgba(147,157,37,.5);
}
.season-table tbody th {
  font-family: "Archivo", sans-serif; font-weight: 700; color: var(--ink);
  width: 30%; background: var(--olive-wash);
}
.season-table td { color: var(--ink-soft); }
.season-table td strong { color: var(--accent); font-family: "Archivo", sans-serif; }
.season-table tbody tr:hover td, .season-table tbody tr:hover th { background: rgba(247,208,80,.05); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .season-table { font-size: .88rem; min-width: 620px; }
  .season-table th, .season-table td { padding: 12px 13px; }
}

/* ---- Rate strip on the leases index ---- */
.rate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 40px 0 8px; }
.rate-chip {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 20px;
  background: var(--olive-wash); text-align: center;
}
.rate-chip .rc-price {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 2.1rem;
  color: var(--accent); display: block; line-height: 1;
}
.rate-chip .rc-label {
  display: block; margin-top: 10px; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
}
@media (max-width: 900px) { .rate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rate-grid { grid-template-columns: 1fr; } }

/* ---- Callout panel (landowner / notice) ---- */
.callout {
  border: 1px solid rgba(247,208,80,.4); border-left: 4px solid var(--accent);
  background: linear-gradient(100deg, rgba(247,208,80,.08), rgba(147,157,37,.04));
  border-radius: var(--r-md); padding: 28px 32px; margin: 40px 0;
}
.callout h3 { margin: 0 0 10px; font-size: 1.24rem; color: var(--ink); }
.callout p { margin: 0 0 12px; color: var(--ink-soft); }
.callout p:last-child { margin-bottom: 0; }

/* ---- Numbered process steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 44px; }
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--line); }
.step .sn {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: .78rem; letter-spacing: .18em;
  color: var(--accent); display: block; margin-bottom: 12px;
}
.step h3 { margin: 0 0 8px; font-size: 1.14rem; color: var(--ink); }
.step p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---- Species pills ---- */
.species-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.species-pills span {
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 17px;
  font-size: .88rem; color: var(--ink-soft); background: var(--olive-wash);
  font-family: "Archivo", sans-serif; letter-spacing: .01em;
}

/* ---- Mobile menu: black with olive rules ---- */
.mobile-menu { background: linear-gradient(165deg, #0C0D07 0%, #050505 100%); }
.mobile-menu__links .mm-item { color: #F2F0E6; border-bottom-color: var(--line); }
.mobile-menu__links .mm-item:hover, .mobile-menu__links .mm-item:focus-visible { color: var(--accent); }
.mm-plus { color: var(--accent); }
.mm-sub { border-left: 1px solid var(--line); }
.mm-sub a { color: var(--ink-soft); }
.mm-sub a:hover { color: var(--accent); }
.mm-phone { color: var(--ink); }
.mm-phone:hover { color: var(--accent); }
.mobile-menu__cta .socials svg { fill: rgba(242,240,230,.75); }
.mobile-menu__cta .socials a:hover svg { fill: var(--accent) !important; }

/* Kill the RFA video-hero rules — this build has no video hero */
.hero--video .hero__video { display: none !important; }

/* Brands strip unused (client has none yet) */
.brands-strip { display: none; }

/* =======================================================
   OPEN BLIND — ANIMATED MOBILE MENU
   Circular clip-path reveal out of the hamburger, staggered
   item slide-in with a drawing olive underline, morphing
   hamburger→X. Degrades to a plain fade when GSAP is absent
   or prefers-reduced-motion is set.
   ======================================================= */

/* Hamburger: 3 bars that collapse into an X and rotate */
.nav-toggle { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0;
  transition: transform 420ms cubic-bezier(.22,1.2,.28,1); }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  width: 26px; height: 2px; border-radius: 2px; background: #F2F0E6;
  transition: transform 380ms cubic-bezier(.22,1.2,.28,1), opacity 200ms linear, width 380ms ease, background 200ms;
}
.is-open .nav-toggle { transform: rotate(180deg); }
.is-open .nav-toggle span { transform: rotate(45deg); background: var(--accent); width: 26px; }
.is-open .nav-toggle span::before { transform: translate(0,7px) rotate(-90deg); background: var(--accent); }
.is-open .nav-toggle span::after { opacity: 0; transform: translate(0,0) scaleX(.2); }
.nav-toggle:hover span, .nav-toggle:hover span::before, .nav-toggle:hover span::after { background: var(--accent); }

/* Panel: clipped circle that grows from the toggle corner */
.mobile-menu {
  --mm-clip: 0px;
  clip-path: circle(var(--mm-clip) at calc(100% - 44px) 46px);
  background:
    radial-gradient(120% 80% at 88% 4%, rgba(147,157,37,.16) 0%, transparent 58%),
    linear-gradient(165deg, #0C0D07 0%, #050505 100%) !important;
}
.mobile-menu.is-open { --mm-clip: 165vmax; }
/* faint logo watermark behind the links */
.mobile-menu__inner { position: relative; z-index: 1; }
.mobile-menu::after {
  content: ""; position: absolute; right: -16%; bottom: -6%; width: 78%; height: 62%;
  background: url("../img/logo.png") no-repeat right bottom / contain;
  opacity: .05; pointer-events: none; z-index: 0;
}

/* Items: each gets an olive rule that draws left→right */
.mobile-menu__links .mm-item {
  position: relative; border-bottom: 0 !important; overflow: visible;
  transition: color 220ms, padding-left 320ms cubic-bezier(.22,1.2,.28,1);
}
.mobile-menu__links .mm-item::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--line); transform: scaleX(0); transform-origin: left center;
  transition: transform 520ms cubic-bezier(.22,1,.28,1);
}
.mobile-menu.is-open .mobile-menu__links .mm-item::after { transform: scaleX(1); }
/* stagger the rule draw to trail the item reveal */
.mobile-menu.is-open .mm-item:nth-child(1)::after { transition-delay: 120ms; }
.mobile-menu.is-open .mm-item:nth-child(2)::after { transition-delay: 175ms; }
.mobile-menu.is-open .mm-item:nth-child(3)::after { transition-delay: 230ms; }
.mobile-menu.is-open .mm-item:nth-child(4)::after { transition-delay: 285ms; }
.mobile-menu.is-open .mm-item:nth-child(5)::after { transition-delay: 340ms; }
.mobile-menu.is-open .mm-item:nth-child(6)::after { transition-delay: 395ms; }
.mobile-menu.is-open .mm-item:nth-child(7)::after { transition-delay: 450ms; }
.mobile-menu.is-open .mm-item:nth-child(8)::after { transition-delay: 505ms; }
.mobile-menu__links .mm-item:hover { padding-left: 10px !important; }
/* yellow chevron marker slides in on hover */
.mobile-menu__links .mm-item::before {
  content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-50%) rotate(-45deg) scale(0); transition: transform 300ms cubic-bezier(.22,1.2,.28,1);
}
.mobile-menu__links .mm-item:hover::before { transform: translateY(-50%) rotate(-45deg) scale(1); }

/* Sub-accordion */
.mm-sub { max-height: 0; overflow: hidden; transition: max-height 420ms cubic-bezier(.3,1,.3,1); }
.mm-sub.open { max-height: 460px; }
.mm-sub-toggle .mm-plus { transition: transform 340ms cubic-bezier(.22,1.2,.28,1); display: inline-block; }
.mm-sub-toggle.open .mm-plus { transform: rotate(135deg); }

/* Lock the page behind the menu */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { clip-path: none !important; transition: opacity 200ms linear; }
  .mobile-menu__links .mm-item::after { transform: scaleX(1) !important; transition: none; }
  .nav-toggle, .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: none; }
}

/* =======================================================
   OPEN BLIND — LAYOUT CORRECTIONS
   Three fixes found on the first visual pass.
   ======================================================= */

/* 1. The logo is a detailed badge, not a wordmark. At the template's 52-58px
      it is unreadable, so the bar is taller and the mark is given real size. */
:root { --nav-h: 96px; }
.brand-logo { height: 74px !important; max-width: 250px; }
.site-header.is-scrolled .brand-logo { height: 62px !important; }
@media (max-width: 1024px) {
  :root { --nav-h: 84px; }
  .brand-logo { height: 62px !important; }
  .site-header.is-scrolled .brand-logo { height: 56px !important; }
}
@media (max-width: 560px) {
  .brand-logo, .site-header.is-scrolled .brand-logo { height: 52px !important; }
}

/* 2. Uppercase Archivo at 800 closes the gap between a K and a Y, so
      "Book Your Blind" reads as "BOOKYOUR BLIND". Open the word space. */
.btn, button.btn, .nav-main a, .gf-chip { word-spacing: .10em; }

/* 3. hero__meta sat bottom-RIGHT, where the Mallard Bay chat bubble mounts —
      the last two items were being covered. Move it to a single left-aligned
      row inside the content container, above the fold line. */
.hero__meta {
  position: absolute;
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: 30px;
  width: min(100% - 48px, var(--container));
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.18);
  text-align: left;
  line-height: 1.6;
  /* keep clear of the chat bubble's ~230px footprint */
  padding-right: 260px;
}
.hero__meta span { display: inline-flex; align-items: center; }
.hero__meta span:not(:last-child)::after {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); margin: 0 18px; opacity: .85;
}
@media (max-width: 1100px) { .hero__meta { padding-right: 0; } }
@media (max-width: 820px)  { .hero__meta { display: none; } }

/* 4. Four lease cards in a 3-up grid orphaned one on row two, and the
      eyebrow was illegible over pale-sky photos. Go 2-up with a taller
      tile, a heavier scrim, and a brighter eyebrow. */
.mag-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 400px !important; gap: 26px !important; }
@media (max-width: 760px) { .mag-grid { grid-template-columns: 1fr !important; grid-auto-rows: 300px !important; } }
.mag-card__body {
  padding: 26px 28px 24px !important;
  background: linear-gradient(180deg, rgba(4,4,4,0) 0%, rgba(4,4,4,.62) 38%, rgba(4,4,4,.96) 100%) !important;
}
.mag-card__body .num {
  color: var(--accent) !important; font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.mag-card__body h3 { text-shadow: 0 2px 14px rgba(0,0,0,.85); font-size: 1.48rem; }
.mag-card__body .meta { color: rgba(255,255,255,.86) !important; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
/* a thin olive top-light on the image keeps pale skies from washing to white */
.mag-card__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,4,4,.34) 0%, rgba(4,4,4,0) 45%);
}

/* 5. Contact page: the Playita block pins .form-wrap to one column. Two
      columns reads better here, and the contact-list label sits above its
      value so the rows aren't ragged. */
@media (min-width: 900px) {
  .form-wrap { grid-template-columns: 1fr 1fr !important; gap: 56px !important; align-items: start; }
}
.form-wrap ul li strong,
.contact-list li strong {
  display: block !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: .64rem !important; letter-spacing: .22em !important;
  text-transform: uppercase !important; color: var(--accent) !important;
  margin: 0 0 5px !important; min-width: 0 !important; width: auto !important;
}
.contact-list li { padding: 14px 0 !important; }

/* 6. BLOCKING BUG (inherited from the template): .mobile-menu is z-index 98
      while .site-header is 60, so once the menu opens the panel covers the
      hamburger and the X can never be tapped. Lift the header above the
      panel and keep it transparent while open so the panel reads through. */
.site-header { z-index: 120 !important; }
.mobile-menu { z-index: 110 !important; }
.site-header.is-open,
.site-header.is-open.is-scrolled {
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important; box-shadow: none !important;
}
/* the panel starts below the bar so the logo and X are never overlapped */
.mobile-menu { padding-top: calc(var(--nav-h) + 26px) !important; }
/* nav CTA button and phone are redundant while the menu is open */
.site-header.is-open .nav-cta .phone,
.site-header.is-open .nav-cta .mb_widget,
.site-header.is-open .nav-cta .mb-full-width { display: none !important; }

/* 7. The base template still carries a LEGACY mobile nav — `.is-open .nav-main`
      re-displays the desktop link row as a fixed panel under the bar. It
      predates the .mobile-menu overlay. On RFA it was invisible only because
      the header sat BELOW the overlay (which is also why the X was untappable
      there). Now that the header is lifted, kill the legacy panel outright so
      the overlay is the one and only mobile menu. */
@media (max-width: 1024px) {
  .site-header.is-open .nav-main,
  .is-open .nav-main { display: none !important; }
}

/* 8. Collapsed menu overflowed a 414x820 viewport by ~49px. Tighten so the
      closed state fits without scrolling; the expanded accordion still
      scrolls, which is correct. */
.mobile-menu { padding-top: calc(var(--nav-h) + 8px) !important; padding-bottom: 24px !important; }
.mobile-menu__links .mm-item { font-size: 1.22rem !important; padding: 7px 0 !important; }
.mobile-menu__cta { padding-top: 18px !important; gap: 13px !important; }
.mobile-menu__cta .socials { justify-content: flex-start !important; }
.mm-phone { font-size: 1.02rem; }

/* 9. The logo watermark pseudo-element was positioned right:-16%/bottom:-6%,
      which pushed .mobile-menu scrollHeight ~50px past the viewport and made
      the collapsed menu scroll for no reason. Keep it inside the box. */
.mobile-menu::after {
  inset: auto 0 0 24% !important;
  width: auto !important; height: 54% !important;
}

/* =======================================================
   OPEN BLIND — FEEDBACK ROUND 1
   ======================================================= */

/* 1. Lighten the heroes. The first pass darkened the photos at export AND
      laid a heavy scrim over them; both are pulled back. The overall wash
      drops from .72/.42/.86 to .40/.14/.52 so the photograph reads, while a
      diagonal ramp keeps real contrast under the copy (which sits
      bottom-left) so the white type is still legible. */
.hero::after {
  background:
    linear-gradient(180deg, rgba(4,4,4,.40) 0%, rgba(4,4,4,.14) 34%, rgba(4,4,4,.54) 100%),
    linear-gradient(105deg, rgba(4,4,4,.64) 0%, rgba(4,4,4,.30) 38%, rgba(4,4,4,0) 70%) !important;
}
.hero h1 { text-shadow: 0 3px 20px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.5); }
.hero .hero__sub { text-shadow: 0 2px 16px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.6); }
.hero__eyebrow { text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.hero__meta { text-shadow: 0 2px 12px rgba(0,0,0,.8); }

/* 2. What We Hunt — all eight species on ONE line, with the South Louisiana
      ground on its own row underneath. Each row gets a mono label. */
.hunt-block {
  display: flex; flex-direction: column; gap: 30px;
  margin-top: 44px; padding-top: 38px; border-top: 1px solid var(--line);
}
.hunt-row { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hunt-row__label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--olive-2);
}
/* one line, no wrap, on anything desktop-width */
.species-pills--single {
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: 8px; width: 100%;
}
.species-pills--single span {
  white-space: nowrap; flex: 0 0 auto;
  padding: 10px 15px; font-size: .86rem; letter-spacing: .01em;
}
.species-pills--ground span {
  background: rgba(147,157,37,.18);
  border-color: rgba(147,157,37,.5);
  color: var(--ink);
}
/* tighten before wrapping, then allow wrap on narrow screens */
@media (max-width: 1240px) {
  .species-pills--single { gap: 6px; }
  .species-pills--single span { padding: 9px 11px; font-size: .79rem; }
}
@media (max-width: 1040px) {
  .species-pills--single { flex-wrap: wrap; }
  .species-pills--single span { padding: 9px 15px; font-size: .86rem; }
}

/* 1b. Legibility pass after lightening. The overall wash stays light so the
       photograph reads, but the diagonal ramp under the copy is deepened
       (.64->.74 / .30->.40) and now runs to 74% so white type holds even on
       the palest heroes (whistling duck, season dates, contact). The right
       side of every frame is left untouched. */
.hero::after {
  background:
    linear-gradient(180deg, rgba(4,4,4,.38) 0%, rgba(4,4,4,.12) 34%, rgba(4,4,4,.54) 100%),
    linear-gradient(103deg, rgba(4,4,4,.74) 0%, rgba(4,4,4,.40) 40%, rgba(4,4,4,0) 74%) !important;
}

/* =======================================================
   STRAIGHT SHOOTER OUTFITTERS — LIGHT LUXURY RE-SKIN
   60 / 30 / 10 : #D2B48C tan + off-white / #4A3728 brown / #7A8A7B sage

   Mirrors the Open Blind layout system, inverted to a light canvas.
   Appended AFTER the Open Blind dark block, which re-stated every surface
   for black; this one re-states them for bone. Nothing above is edited.

   Contrast note: white on the brief's #7A8A7B is 3.65:1 and fails AA at
   button sizes, so CTA fills use --accent-btn #657563 (4.91:1 with white)
   and headline <em> on light uses --accent-deep #5C6B5C. #7A8A7B itself is
   kept exactly as specified for hairlines, pills, badges and markers.
   ======================================================= */
:root {
  --bg:          #FAF7F2;   /* 60% dominant — off-white */
  --bg-alt:      #EFE7DA;   /* 60% dominant — tan-tinted sand */
  --bg-deep:     #3C2C1F;   /* 30% — brown band */
  --bg-deep-2:   #2A1F16;
  --ink:         #2A1F16;
  --ink-soft:    #4A3728;   /* 30% — body copy */
  --ink-muted:   #7A6957;
  --line:        rgba(74,55,40,.20);    /* brown hairlines — the 30% */
  --line-dark:   rgba(210,180,140,.26);
  --accent:      #7A8A7B;   /* 10% — sage, exactly as briefed */
  --accent-2:    #B9C6B7;   /* light sage — <em> over photos / brown */
  --accent-deep: #5C6B5C;   /* sage that holds up as text on bone */
  --accent-btn:  #657563;   /* CTA fill, 4.91:1 with white */
  --accent-ink:  #FFFFFF;
  --tan:         #D2B48C;
  --tan-2:       #E3CDAE;
  --tan-wash:    rgba(210,180,140,.20);
  --sage-wash:   rgba(122,138,123,.11);
  /* remap the tokens the dark block introduced */
  --olive:       #7A8A7B;
  --olive-2:     #5C6B5C;
  --olive-deep:  #40503F;
  --olive-wash:  rgba(122,138,123,.10);
  --navy:        #3C2C1F;
  --navy-2:      #2A1F16;
  --s-card:  0 16px 40px -22px rgba(42,31,22,.30), 0 2px 6px rgba(42,31,22,.07);
  --s-hover: 0 28px 58px -22px rgba(42,31,22,.40), 0 4px 12px rgba(42,31,22,.10);
  --s-deep:  0 44px 96px -36px rgba(42,31,22,.45);
  --s-btn:   0 10px 26px -12px rgba(101,117,99,.55);
}

body { background: var(--bg) !important; color: var(--ink-soft) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--ink); }
p, li { color: var(--ink-soft); }
a { color: var(--ink); }
a:hover { color: var(--accent-deep); }

/* ---- Section surfaces ---- */
.section--alt  { background: var(--bg-alt) !important; }
.section--dark { background: var(--bg-deep) !important; }
.section--alt::before, .section--dark::before {
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.section--dark::before {
  background: linear-gradient(90deg, transparent, rgba(210,180,140,.34) 18%, rgba(210,180,140,.34) 82%, transparent);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #FAF7F2 !important; }
.section--dark p, .section--dark li, .section--dark .lead { color: rgba(245,240,232,.84) !important; }
.section--dark .eyebrow { color: var(--accent-2) !important; }
.section--dark .eyebrow .num { color: var(--tan) !important; }
.section--dark .feature-card { background: rgba(210,180,140,.10); border-color: rgba(210,180,140,.24); }
.section--dark .feature-card h4, .section--dark .feature-card h3 { color: #FAF7F2 !important; }
.section--dark a { color: var(--tan); }
.section--dark .num-big { color: rgba(210,180,140,.42) !important; }

.eyebrow { color: var(--accent-deep); }
.eyebrow .num { color: var(--accent); }

/* ---- Headline italics ---- */
.hero h1 em { color: var(--accent-2) !important; }
.intro-statement h2 em,
.split__body h2 em,
.section-head h2 em,
h2 em { color: var(--accent-deep); }
.section--dark h2 em, .cta-banner h2 em { color: var(--accent-2) !important; }

/* ---- Buttons: deep sage with white ink ---- */
.btn.btn--primary,
button.btn.btn--primary {
  background: var(--accent-btn) !important; color: #fff !important;
  border-color: var(--accent-btn) !important; box-shadow: var(--s-btn);
  font-weight: 700; letter-spacing: .02em;
}
.btn.btn--primary:hover,
button.btn.btn--primary:hover {
  background: var(--accent-deep) !important; color: #fff !important;
  border-color: var(--accent-deep) !important; transform: translateY(-2px);
}
.btn.btn--primary svg, button.btn.btn--primary svg { stroke: #fff; }
.btn.btn--ghost { color: var(--ink); border-color: rgba(74,55,40,.42); background: transparent; }
.btn.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #FAF7F2; }
.btn.btn--ghost:hover svg { stroke: #FAF7F2; }
.hero .btn.btn--ghost, .section--dark .btn.btn--ghost, .cta-banner .btn.btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.58);
}
.hero .btn.btn--ghost:hover, .section--dark .btn.btn--ghost:hover, .cta-banner .btn.btn--ghost:hover {
  background: var(--tan); border-color: var(--tan); color: #2A1F16;
}
.hero .btn.btn--ghost:hover svg, .section--dark .btn.btn--ghost:hover svg,
.cta-banner .btn.btn--ghost:hover svg { stroke: #2A1F16; }
.mb-full-width button.btn.btn--primary,
.mb-full-width > div > div > button,
.mb-full-width button.btn {
  background: var(--accent-btn) !important; color: #fff !important;
  border-radius: var(--r-pill); font-weight: 700;
}
.mb-full-width script { display: none !important; }

/* ---- Header: bone glass, brown ink, tan hairline ---- */
.site-header {
  background: rgba(250,247,242,.72) !important;
  backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: 1px solid rgba(74,55,40,.14);
}
.site-header.is-scrolled {
  background: rgba(250,247,242,.97) !important;
  border-bottom-color: rgba(122,138,123,.42);
  box-shadow: 0 12px 30px -24px rgba(42,31,22,.5);
}
.nav-main a, .nav-dropdown > button { color: var(--ink); }
.nav-main a:hover, .nav-dropdown > button:hover { color: var(--accent-deep); }
.nav-main a.is-active, .nav-dropdown > button.is-active { color: var(--accent-deep); }
.nav-cta .phone { color: var(--ink-soft); }
.nav-cta .phone:hover { color: var(--accent-deep); }

/* Dropdown panel: bone card, brown ink, sage labels */
.nav-dropdown-menu {
  background: #FFFDFA !important; border: 1px solid var(--line) !important;
  box-shadow: var(--s-hover) !important;
}
.nav-dropdown-menu a { color: var(--ink) !important; }
.nav-dropdown-menu a:hover { color: var(--accent-deep) !important; background: var(--sage-wash) !important; }
.nav-dropdown-menu .dd-all { color: var(--accent-deep) !important; border-bottom-color: var(--line) !important; }
.dd-label { color: var(--accent-deep) !important; }
.dd-cols { border-top-color: var(--line) !important; }

/* ---- Animated mobile menu, re-skinned light ---- */
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--ink); }
.is-open .nav-toggle span,
.is-open .nav-toggle span::before { background: var(--accent-deep); }
.nav-toggle:hover span, .nav-toggle:hover span::before, .nav-toggle:hover span::after { background: var(--accent-deep); }
.mobile-menu {
  background:
    radial-gradient(120% 80% at 88% 4%, rgba(210,180,140,.34) 0%, transparent 58%),
    linear-gradient(165deg, #FAF7F2 0%, #EFE7DA 100%) !important;
}
.mobile-menu::after { opacity: .10 !important; }
.mobile-menu__links .mm-item { color: var(--ink) !important; }
.mobile-menu__links .mm-item:hover { color: var(--accent-deep) !important; }
.mobile-menu__links .mm-item::after { background: var(--line); }
.mobile-menu__links .mm-item::before {
  border-right-color: var(--accent-deep); border-bottom-color: var(--accent-deep);
}
.mm-sub a { color: var(--ink-soft) !important; }
.mm-sub a:hover { color: var(--accent-deep) !important; }
.mm-phone { color: var(--ink-soft) !important; }
.mobile-menu__cta { border-top-color: var(--line) !important; }

/* ---- Hero: bright New Mexico skies need a firm ramp under white type ---- */
.hero::after {
  background:
    linear-gradient(180deg, rgba(30,20,12,.40) 0%, rgba(30,20,12,.14) 34%, rgba(30,20,12,.56) 100%),
    linear-gradient(103deg, rgba(24,16,10,.78) 0%, rgba(24,16,10,.44) 40%, rgba(24,16,10,0) 74%) !important;
}
.hero__eyebrow { color: var(--tan) !important; }
.hero__meta { border-top-color: rgba(255,255,255,.22); }
.hero__meta span::after { background: var(--tan) !important; }

/* ---- Cards, panels, list surfaces ---- */
.mag-card, .price-card, .incl-col, .feature-card, .step, .callout, .faq-item, .contact-form-shell {
  background: #FFFDFA;
  border-color: var(--line);
}
.mag-card__body {
  background: linear-gradient(180deg, rgba(28,19,12,0) 0%, rgba(28,19,12,.60) 38%, rgba(28,19,12,.95) 100%) !important;
}
.mag-card__body .num { color: var(--tan) !important; }
.mag-card__body h3 { color: #fff !important; }
.mag-card__img::after {
  background: linear-gradient(180deg, rgba(28,19,12,.30) 0%, rgba(28,19,12,0) 45%);
}
.price-card { background: #FFFDFA; border: 1px solid var(--line); box-shadow: var(--s-card); }
.price-card small { color: var(--accent-deep); }
.price-card strong { color: var(--ink); }
.pricing-rows li { border-bottom-color: var(--line); }
.price-note { color: var(--ink-muted); }
.spec-list li { border-bottom-color: var(--line); }
.spec-list li::before { color: var(--accent) !important; }
.incl-col h3 { color: var(--ink); }
.stat-num, .stat-num-text { color: var(--accent-deep); }
.stat-label { color: var(--ink-muted); }
.stat { border-color: var(--line); }
.num-big { color: rgba(122,138,123,.30); }
.sn { color: var(--accent-deep); }
.byline { color: var(--ink-muted); }
.species-pills span {
  background: var(--sage-wash); border: 1px solid rgba(122,138,123,.42); color: var(--ink);
}
.species-pills--ground span {
  background: var(--tan-wash); border-color: rgba(210,180,140,.62); color: var(--ink);
}
.hunt-row__label { color: var(--accent-deep); }
.hunt-block { border-top-color: var(--line); }
.species-strip { border-color: var(--line); background: var(--sage-wash); }
.species-strip .dd-label { color: var(--accent-deep) !important; }

/* FAQ accordion */
.faq-item { border: 1px solid var(--line); background: #FFFDFA; }
.faq-item summary { color: var(--ink); }
.faq-item summary:hover { color: var(--accent-deep); }
.faq-item[open] summary { color: var(--accent-deep); }
.faq-body p, .faq-body li { color: var(--ink-soft); }

/* Gallery filter chips */
.gf-chip { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.gf-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.gf-chip.is-active {
  background: var(--accent-btn) !important; border-color: var(--accent-btn) !important; color: #fff !important;
}
.tile { background: var(--bg-alt); }

/* Contact */
.contact-list li { border-bottom-color: var(--line); }
.contact-list li strong { color: var(--accent-deep) !important; }
.form-wrap ul li strong { color: var(--accent-deep) !important; }
.callout { background: var(--sage-wash); border-left: 3px solid var(--accent); }
.callout h3 { color: var(--ink); }
.contact-form-shell { background: #FFFDFA; border: 1px solid var(--line); box-shadow: var(--s-card); }
.contact-form-shell .mb-form-embed { border: 0; padding: 0; background: none; }

/* ---- Closing CTA band + footer: the brown 30% ---- */
.cta-banner {
  background: linear-gradient(120deg, #4A3728 0%, #2A1F16 100%) !important;
  border-top: 1px solid rgba(210,180,140,.22); border-bottom: 0;
}
.cta-banner h2 { color: #FAF7F2 !important; }
.site-footer { background: #2A1F16 !important; color: rgba(245,240,232,.80); }
.site-footer p, .site-footer li, .site-footer a { color: rgba(245,240,232,.78) !important; }
.site-footer a:hover { color: var(--tan) !important; }
.site-footer h4 { color: var(--tan) !important; }
.site-footer .top { border-bottom-color: rgba(210,180,140,.18); }
.site-footer .bottom { border-top-color: rgba(210,180,140,.18); color: rgba(245,240,232,.55); }
.site-footer .socials a { border-color: rgba(210,180,140,.34); color: rgba(245,240,232,.8); }
.site-footer .socials a:hover { background: var(--tan); border-color: var(--tan); }
.site-footer .socials a:hover svg { fill: #2A1F16; }

/* ---- Lodge room grid (this build only) ---- */
.room-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px; margin-top: 40px;
}
.room { background: #FFFDFA; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--s-card); transition: transform var(--t), box-shadow var(--t); }
.room:hover { transform: translateY(-4px); box-shadow: var(--s-hover); }
.room img { width: 100%; height: 220px; object-fit: cover; display: block; }
.room__body { padding: 20px 22px 24px; }
.room__body h3 { margin: 0 0 8px; font-size: 1.16rem; }
.room__body p { margin: 0; font-size: .94rem; color: var(--ink-muted); }

/* ---- Rate table (seasons / tags page) ---- */
.rate-table { width: 100%; border-collapse: collapse; margin-top: 34px;
  background: #FFFDFA; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.rate-table th, .rate-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.rate-table thead th {
  background: var(--bg-alt); font-family: "IBM Plex Mono", monospace;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep);
}
.rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table td strong { color: var(--ink); white-space: nowrap; }
.rate-table tbody tr:hover { background: var(--sage-wash); }
@media (max-width: 680px) {
  .rate-table, .rate-table tbody, .rate-table tr, .rate-table td { display: block; width: 100%; }
  .rate-table thead { display: none; }
  .rate-table tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .rate-table td { border-bottom: 0; padding: 6px 18px; }
  .rate-table td::before { content: attr(data-l); display: block;
    font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--accent-deep); margin-bottom: 3px; }
}

/* ---- Brands We Trust + socials suppressed: client has neither ---- */
.brands-strip, .socials { display: none !important; }
.site-footer .socials { display: none !important; }

/* =======================================================
   STRAIGHT SHOOTER — VISUAL PASS 1
   Fixes found screenshotting all 12 pages.
   ======================================================= */

/* 1. HEADER. The logo is dark-brown ink on transparent, so it needs a light
      bar — but a translucent bone bar over a dark hero photo went muddy grey
      and the base template's `.home .site-header:not(.is-scrolled)` rule
      (specificity 0,4,1) forces white nav links, which then sat on it.
      Resolution: on the home hero the bar is genuinely transparent with the
      LIGHT logo and white links; the moment it scrolls it becomes solid bone
      with the dark logo and brown links. Interior pages are bone throughout. */
body.home .site-header {
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
body.home .site-header.is-scrolled,
body:not(.home) .site-header {
  background: #FAF7F2 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(74,55,40,.16) !important;
}
body.home .site-header.is-scrolled { box-shadow: 0 12px 30px -24px rgba(42,31,22,.55); }
/* two-state brand mark */
.brand-logo--light { display: none; }
.brand-logo--dark  { display: block; }
body.home .site-header:not(.is-scrolled) .brand-logo--light { display: block; }
body.home .site-header:not(.is-scrolled) .brand-logo--dark  { display: none; }
/* white utility ink while the bar is transparent */
body.home .site-header:not(.is-scrolled) .nav-cta .phone { color: rgba(255,255,255,.9) !important; }
body.home .site-header:not(.is-scrolled) .nav-toggle span,
body.home .site-header:not(.is-scrolled) .nav-toggle span::before,
body.home .site-header:not(.is-scrolled) .nav-toggle span::after { background: #fff; }
/* …but never while the mobile panel is open — that panel is bone */
body.home .site-header.is-open .nav-toggle span,
body.home .site-header.is-open .nav-toggle span::before { background: var(--accent-deep) !important; }
body.home .site-header.is-open .brand-logo--light { display: none !important; }
body.home .site-header.is-open .brand-logo--dark  { display: block !important; }

/* 2. Card surfaces the dark block pinned to #0D0E08. `.incl-col` carries
      !important, so this whole group is re-stated with it. */
.incl-col, .mag-card, .price-card, .faq-item, .contact-form-shell,
.dest-card, .trip-row, .quote-card, .nav-dropdown-menu {
  background: #FFFDFA !important; border-color: var(--line) !important;
}
.trip-row:hover { background: var(--bg-alt) !important; border-color: var(--accent) !important; }
.gallery-grid .tile { background: var(--bg-alt); border-color: var(--line); }
.split__img { background-color: var(--bg-alt); }
.lightbox { background: rgba(30,20,12,.94); }

/* 3. Price emphasis. Sage on white is 3.4:1 — fine for a hairline, too weak
      for the number a hunter is scanning for. Label stays sage, figure goes ink. */
.price-card small { color: var(--accent-deep) !important; }
.price-card .price, .price-card .price sup { color: var(--ink); }
.pricing-rows li strong { color: var(--ink); font-weight: 700; }
.pricing-rows li { color: var(--ink-soft); }

/* 4. Dropdown: the dark block tinted hover with the old yellow. */
.site-header .nav-dropdown-menu a:hover {
  background: var(--sage-wash) !important; color: var(--accent-deep) !important;
}
.nav-dropdown-menu--fleet .dd-all { color: var(--accent-deep) !important; }

/* 5. Anything sitting on the brown 30% band inherits brown ink from the dark
      block's tokens and disappears. Re-state every one. */
.cta-banner p { color: rgba(245,240,232,.84) !important; }
.section--dark .spec-list li { color: rgba(245,240,232,.84) !important; }
.section--dark .spec-list li::before { color: var(--tan) !important; }
.section--dark .stat-num, .section--dark .stat-num-text { color: var(--tan) !important; }
.section--dark .stat-label { color: rgba(245,240,232,.62) !important; }
.section--dark .stat-row, .section--dark .stat { border-color: rgba(210,180,140,.22) !important; }
.section--dark .sn { color: var(--tan) !important; }
.section--dark .step { background: rgba(210,180,140,.07); border-color: rgba(210,180,140,.20); }
.section--dark .step h3 { color: #FAF7F2 !important; }
.section--dark .feature h3 { color: #FAF7F2 !important; }
.section--dark .btn.btn--ghost { color: #FAF7F2; border-color: rgba(245,240,232,.5); }

/* 6. Three hunts in the dark block's forced 2-up grid orphaned the third
      card on its own row. This build has exactly three. */
.mag-grid { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 380px !important; gap: 24px !important; }
@media (max-width: 1080px) { .mag-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 760px)  { .mag-grid { grid-template-columns: 1fr !important; grid-auto-rows: 300px !important; } }
.mag-card__body h3 { font-size: 1.34rem; }

/* 7. Six "why choose us" items in a 4-across row left two stranded. */
.feature-row--three { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 980px) { .feature-row--three { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 620px) { .feature-row--three { grid-template-columns: 1fr !important; } }

/* 8. Footer mark: the dark-ink logo vanished on the brown footer. */
.footer-brand__logo { height: 54px; width: auto; }

/* 9. `.price-card .pricing-rows li > strong` (0,3,2) out-specifies the plain
      `.pricing-rows li strong` selector and was painting the figure light sage. */
.price-card .pricing-rows li > strong,
.pricing-rows li > strong { color: var(--ink) !important; }

/* 10. Contrast audit pass. Sage #7A8A7B is correct for hairlines and pills but
       fails AA as text: the "01/02" section markers are 22px and not bold, so
       they need 4.5:1 and were sitting at 3.42 on bone / 2.98 on sand. The
       ghosted numerals on the brown band needed 3:1 for large text and sat at
       2.43. Both move within the same colour family. */
.eyebrow .num { color: var(--accent-deep); }
.section--dark .eyebrow .num { color: var(--tan) !important; }
.num-big { color: rgba(92,107,92,.42); }
.section--dark .num-big { color: rgba(210,180,140,.58) !important; }

/* 11. --ink-muted #7A6957 measured 4.29:1 on the sand band — just under AA for
       body-size helper text (price notes, stat labels, room captions). */
:root { --ink-muted: #6E5D4C; }

/* 12. `.feature .num-big` (0,2,0) kept the dark block's hardcoded olive on
       light sections — 1.48:1. Same specificity, deeper sage, AA-large clear. */
.feature .num-big { color: rgba(92,107,92,.76); }
.section--dark .feature .num-big { color: rgba(210,180,140,.58); }

/* 13. The Mallard Bay form renders inside an iframe with MB's own dark theme
       baked in — it can't be restyled from here. A dark panel inside a white
       card read like a picture frame, so the shell drops its own surface and
       the form becomes a deliberate dark block on the bone ground. */
.contact-form-shell {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important;
}
.contact-form-shell h3 { color: var(--ink); }
.contact-form-shell > p { color: var(--ink-soft); margin-bottom: 22px; }
.contact-form-shell .mb-form-embed { border-radius: var(--r-lg); overflow: hidden; }

/* =======================================================
   STRAIGHT SHOOTER — FEEDBACK ROUND 1
   ======================================================= */

/* 1. The base `.step` is a top-rule item with padding-top only — no side or
      bottom padding. Once the light re-skin gave it a tinted fill it read as a
      card with the text flush to its edges. Give it real card padding. */
.section--dark .step {
  padding: 26px 26px 28px !important;
  border-radius: var(--r-md);
  border-top-width: 2px;
  border-top-color: rgba(210,180,140,.42);
}
@media (max-width: 560px) { .section--dark .step { padding: 22px 22px 24px !important; } }

/* 2. About hero: the three sentences each get their own line. `.hero h1` is
      capped at ~748px, so "Personalized service." (778px) and "Country worth
      the trip." (848px) were wrapping to two lines each. Uncap the width, hold
      the <br> breaks with nowrap, and scale the type down so the longest line
      clears comfortably — including on phones. The !important is required
      because the booking-widget guard pins `.hero h1` with !important. */
body.about .hero h1 {
  /* Same 4.8vw ramp and 4.2rem cap as every other hero — the About headline
     should not be the smallest one on the site. The three lines come from the
     <br> tags in the markup (main.js now carries those through its word
     splitter), so no nowrap is needed: if a sentence ever outgrows the column
     it wraps gracefully instead of running off the right edge. Leading is
     pulled in from 1.04 to 1.0 so three short sentences read as one solid
     block rather than a stacked list. */
  max-width: none !important;
  font-size: clamp(1.7rem, 4.8vw, 4.2rem) !important;
  line-height: 1.0 !important;
  letter-spacing: -.028em !important;
  margin-bottom: .42em !important;
  text-wrap: balance;
}
/* The sage italic closing line carries the emphasis — a hair of optical
   breathing room under the two upright lines above it. */
body.about .hero h1 em { display: inline-block; margin-top: .06em; }
}