/* =======================================================
   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:        #E55B2B;         /* sunset orange (nod to client #FF5733) */
  --accent-2:      #F08855;         /* soft sunset */
  --accent-ink:    #7A2A0F;
  --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: 122px;
  --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: #C84418; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(229,91,43,.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: 560px; align-items: flex-end; padding-bottom: 60px; }
@media (max-width: 720px) {
  .hero--page { min-height: 440px; }
}

.hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  /* Charter / fishing photos almost always have the subject above center
     (angler torso, boat, horizon). Bias the crop toward the upper half
     so we keep more of the action and less foreground water. */
  background-position: center 38%;
  z-index: 0;
  transform: scale(1.06);
  animation: heroZoom 18s ease-out forwards;
}
.hero--home .hero__bg { background-position: center 30%; }
@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; }


/* =====================================================================
   Species chips (per-build addition for Slap Yo Hook trips/home pages)
   ===================================================================== */
.chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-alt);
  color: var(--ink);
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  border: 1px solid var(--line);
  transition: background var(--t), color var(--t), transform var(--t);
}
.chip--accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.chip:hover {
  transform: translateY(-1px);
}
.section--dark .chip {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.section--dark .chip--accent {
  background: var(--accent);
  border-color: var(--accent);
}

/* Trips page bullet lists inside .split__body */
.split__body ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  border-top: 1px solid var(--line);
}
.split__body ul li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
}
.split__body ul li strong {
  color: var(--ink);
  font-weight: 600;
  margin-right: 6px;
}

/* Contact page right-column shell — wraps the live MB form embed.
   The .is-placeholder dashed-border debug label only shows on stub. */
.contact-form-shell {
  background: var(--bg-alt);
  border-radius: var(--r-md);
  padding: 28px 28px 32px;
  box-shadow: var(--s-card);
}
.contact-form-shell h3 {
  margin: 0 0 .75em;
}
.contact-form-shell iframe {
  width: 100% !important;
  border: 0 !important;
  display: block !important;
}


/* =====================================================================
   SLAP YO HOOK — round 1 feedback fixes (2026-05-06)
   - Use real client logo image in nav + footer (not text mark)
   - Force orange on MB-widget primary buttons (widget script overrode it)
   - Keep button text + arrow on one line
   - Match contact form shell bg to MB form's dark bg so they read as one unit
   ===================================================================== */

/* --- LOGO IMAGE in nav + footer --- */
.brand--logo { gap: 0; padding: 0; }
.brand-logo {
  display: block;
  height: 100px;         /* logo PNG is now tightly cropped — ~2.95:1 aspect */
  width: auto;
  max-width: 360px;      /* 100 * 2.95 ≈ 295px wide */
  object-fit: contain;
  transition: opacity var(--t);
}
@media (max-width: 900px) {
  .brand-logo { height: 76px; max-width: 280px; }
}
@media (max-width: 480px) {
  .brand-logo { height: 56px; max-width: 200px; }
}
/* Footer logo — bigger again because the footer can absorb it */
.footer-brand--logo { display: inline-block; padding: 0; margin-bottom: 18px; }
.footer-logo {
  display: block;
  height: 130px;
  width: auto;
  max-width: 460px;
  object-fit: contain;
}
@media (max-width: 720px) {
  .footer-logo { height: 92px; max-width: 320px; }
}

/* --- MOBILE HEADER: hide the phone number so the menu icon doesn't clip --- */
@media (max-width: 720px) {
  .nav-cta .phone { display: none !important; }
}

/* --- MB WIDGET BUTTONS: orange + nowrap, defended against MB script --- */
/* The MB widget script can render the button with its own default styling
   that strips our --accent background. These rules with !important and
   higher specificity (button.btn.mb_widget) override that for both:
     (a) our raw <button class="mb_widget btn btn--primary"> at first paint
     (b) any wrapper the script may inject around it
   Plus white-space:nowrap so "Book a Trip →" never stacks. */
button.btn.btn--primary,
button.btn.btn--primary.mb_widget,
.mb-full-width button.btn.btn--primary,
.mb-full-width > div > div > button.btn.btn--primary,
.mb-full-width > div > div > button.btn--primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  box-shadow: var(--s-btn) !important;
  white-space: nowrap !important;
  padding: 14px 26px !important;
  border-radius: var(--r-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: "Archivo", "Inter", system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
button.btn.btn--primary:hover,
button.btn.btn--primary.mb_widget:hover {
  background: #C84418 !important;
  color: #fff !important;
  border-color: #C84418 !important;
  transform: translateY(-2px);
}
/* Same for any anchor MB might rewrite the button into */
.mb-full-width a.btn.btn--primary {
  background: var(--accent) !important;
  color: #fff !important;
  white-space: nowrap !important;
  border-color: var(--accent) !important;
}
/* Hero button row: prevent the 2-up button group from squeezing each pill too tight */
.hero__buttons { flex-wrap: wrap; gap: 14px; }
.hero__buttons > .btn,
.hero__buttons > button.btn { flex: 0 0 auto; }

/* --- CONTACT PAGE: dark shell that matches the MB form's dark bg --- */
.contact-form-shell {
  background: #0F0F0F !important;
  border-radius: var(--r-md);
  padding: 0 !important;            /* let the form fill the shell edge-to-edge */
  box-shadow: var(--s-card);
  overflow: hidden;                  /* clips MB form's square corners to our radius */
}
.contact-form-shell h3 { display: none; }    /* belt-and-suspenders for any stray heading */
.contact-form-shell iframe {
  background: #0F0F0F !important;
}