/* =======================================================
   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: #0c3346;
}
.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(9,58,78,.24) 0%, rgba(9,58,78,.46) 60%, rgba(8,44,60,.80) 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(8,44,60,.86) 0%, rgba(8,44,60,.04) 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; }


/* =======================================================
   RIPTIDE FISHING CHARTERS — BRAND OVERRIDES
   Playita layout system, Riptide palette:
   Gulf blue #128CB3 · flame orange #FF4500 · white #FFF
   ======================================================= */
:root {
  --bg:         #FFFFFF;
  --bg-alt:     #F1F8FB;
  --bg-deep:    #0C5A78;
  --bg-deep-2:  #1279A0;
  --ink:        #0D2B36;
  --ink-soft:   #3E5A65;
  --ink-muted:  #7A929B;
  --line:       rgba(18,140,179,.22);
  --line-dark:  rgba(255,255,255,.16);
  --accent:     #17A3CC;
  --accent-2:   #FF4500;
  --accent-deep:#0E86AD;
  --flame-deep: #D93A00;
  --accent-ink: #FFFFFF;
  --s-card:  0 14px 40px -20px rgba(7,63,82,.26), 0 2px 6px rgba(7,63,82,.06);
  --s-hover: 0 26px 56px -20px rgba(7,63,82,.34), 0 3px 10px rgba(7,63,82,.09);
  --s-deep:  0 40px 90px -34px rgba(7,63,82,.42);
  --s-btn:   0 10px 24px -12px rgba(255,69,0,.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; }
.section--dark, .section--dark p, .section--dark li { color: rgba(255,255,255,.86); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.eyebrow { color: var(--accent); }
.eyebrow .num { color: var(--ink); }
.section--dark .eyebrow { color: #7FD3EC; }
.section--dark .eyebrow .num { color: #fff; }

/* ---------- BUTTONS: flame primary, blue secondary ---------- */
.btn.btn--primary,
button.btn.btn--primary { background: var(--accent-2) !important; color: #fff !important; box-shadow: var(--s-btn); border-color: var(--accent-2); }
.btn.btn--primary:hover,
button.btn.btn--primary:hover { background: var(--flame-deep) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(255,69,0,.62); }
.btn.btn--ghost { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn.btn--ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.6); }
.btn.btn--ghost-light:hover { background: #fff !important; color: var(--bg-deep) !important; border-color: #fff; }
.btn--dark { background: var(--accent); color: #fff; }
.btn--dark:hover { background: var(--accent-deep); color: #fff; }
.btn--full { width: 100%; justify-content: center; }
/* MB widget wrapper flattens build-time button styling — hold the flame */
.mb-full-width button.btn.btn--primary,
.mb-full-width > div > div > button { background: var(--accent-2) !important; color: #fff !important; border-radius: var(--r-pill); font-weight: 700; }

/* ---------- HEADER: deep Gulf-blue glass on every page ---------- */
.site-header { background: rgba(7,63,82,.30) !important; backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,.08); }
.site-header.is-scrolled,
body:not(.home) .site-header { background: rgba(7,63,82,.96) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px -20px rgba(7,63,82,.7); border-bottom-color: rgba(18,140,179,.35); }
.nav-main a, .nav-dropdown > button,
.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; }
.nav-main a:hover, .nav-dropdown > button:hover { color: #9BE0F5; }
.nav-main a.is-active { color: #fff; }
.nav-cta .phone,
.home .site-header:not(.is-scrolled) .nav-cta .phone { color: rgba(255,255,255,.88); }
.nav-cta .phone:hover { color: #fff; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after,
.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; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand-logo { height: 54px; width: auto; object-fit: contain; border-radius: 0; max-width: 240px; }
.site-header.is-scrolled .brand-logo { height: 46px; }

/* Dropdown panel — white card, ink type */
.nav-dropdown-menu { background: #fff; border: 1px solid var(--line); box-shadow: var(--s-deep); }
.site-header .nav-dropdown-menu a { color: var(--ink) !important; background: transparent; }
.site-header .nav-dropdown-menu a:hover { background: var(--bg-alt); color: var(--accent) !important; }
.nav-dropdown-menu--fleet { width: 480px; padding: 16px; left: 50% !important; margin-left: -240px; transform: none !important; }
.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) !important; }
.dd-cols { display:grid; grid-template-columns:1fr; gap:4px; }
.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:.88rem; padding:8px 12px; border-radius:6px; white-space:normal; line-height:1.35; }
@media (max-width:560px){ .nav-dropdown-menu--fleet { width: auto; margin-left: 0; left: -12px !important; } }

/* ---------- HERO ---------- */
.hero { background-color: #073F52; }
.hero::after { background: linear-gradient(180deg, rgba(4,40,53,.42) 0%, rgba(4,40,53,.20) 38%, rgba(4,40,53,.90) 100%); }
.hero h1, .hero__eyebrow, .hero p { text-shadow: 0 2px 18px rgba(3,28,38,.55); }
.hero h1 em { color: #9BE0F5; }
.hero__eyebrow { color: #9BE0F5; }
.hero--page { min-height: 78vh !important; align-items: flex-end; padding-bottom: 68px; }
.hero--home { min-height: 100vh; }
.hero__inner { width: min(100% - 48px, var(--container)) !important; max-width: none !important; margin-inline: auto; }

/* ---------- 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.1rem,4vw,3.3rem); 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; }
.section--dark .stat-row { border-top-color: rgba(255,255,255,.2); }
.section--dark .stat-num, .section--dark .stat-num-text { color:#7FD3EC; }
.section--dark .stat-label { color: rgba(255,255,255,.62); }
@media (max-width:820px){ .stat-row { grid-template-columns:repeat(2,1fr); gap:22px; } }

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

.dest-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.dest-card { display:block; border-radius:var(--r-lg); overflow:hidden; background:#fff; 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); }

/* ---------- TRIP ROWS ---------- */
.trip-row { display:grid; grid-template-columns:220px 1fr auto; gap:28px; align-items:center; padding:22px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; margin-bottom:16px; box-shadow:var(--s-card); 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(18,140,179,.5); }
.trip-row__img { width:220px; height:145px; 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:56ch; }
.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:200px; } .trip-row__meta { text-align:left; } }

/* ---------- DETAIL / PRICING ---------- */
.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:#fff; 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; }
.price-card + .price-card { margin-top: 22px; }
.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); 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(18,140,179,.06); }
.species-strip p { margin:4px 0 0; color:var(--accent-deep); font-family:"Archivo",sans-serif; font-weight:600; letter-spacing:.02em; }
.species-strip .dd-label { margin-left:0; }

/* ---------- FAQ + CONTACT ---------- */
.faq-item { background:#fff; border:1px solid var(--line); margin-bottom:14px; border-radius:var(--r-md); box-shadow:var(--s-card); }
.faq-item summary { color:var(--ink); padding:22px 26px !important; }
.faq-item summary::marker, .faq-item summary::-webkit-details-marker { color: var(--accent); }
.faq-body, .faq-item p { color:var(--ink-soft); }
.faq-item .faq-body, .faq-item p { padding:0 26px 22px !important; margin:0; }
.section .faq-list { padding-top:10px; }
.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); }
.contact-form-shell { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--s-card); max-width:860px; }
.form-wrap { display:grid !important; grid-template-columns:1fr !important; gap:44px !important; }
.map-frame { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--s-card); margin-top:36px; line-height:0; }
.map-frame iframe { width:100%; height:380px; border:0; display:block; }

/* ---------- CTA BANNER ---------- */
.cta-banner { background: radial-gradient(900px 340px at 12% 0%, rgba(18,140,179,.55), transparent 62%), radial-gradient(700px 300px at 92% 100%, rgba(255,69,0,.22), transparent 58%), #073F52 !important; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cta-banner h2, .cta-banner h2 strong { color:#fff; }
.cta-banner h2 em { color:#9BE0F5; }
.cta-banner p { color: rgba(255,255,255,.82); }

/* ---------- FOOTER ---------- */
.site-footer { background:#062F3D !important; color: rgba(255,255,255,.78); }
.site-footer p, .site-footer li, .site-footer a { color: rgba(255,255,255,.76); }
.site-footer a:hover { color:#9BE0F5; }
.site-footer h4 { color:#fff; }
.footer-brand img, .footer-brand__logo { height:56px; width:auto; border-radius:0; }
.site-footer .socials svg { fill: rgba(255,255,255,.72); }
.site-footer .socials a:hover svg { fill:#9BE0F5; }
.site-footer .footer-bottom, .site-footer .footer-legal { border-top-color: rgba(255,255,255,.14) !important; color: rgba(255,255,255,.55); }

/* ---------- GALLERY ---------- */
.gallery-grid .tile { border:1px solid var(--line); }
.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(18,140,179,.45); 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); }
.gf-chip.is-active { background:var(--accent); border-color:var(--accent); color:#fff; }
.gallery-grid--filterable .tile { cursor:zoom-in; transition:opacity var(--t), transform var(--t); }
.gallery-grid--filterable .tile:hover { opacity:.88; }
.gallery-grid--filterable .tile.is-hidden { display:none; }
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(4,26,34,.95); 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,.7); 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:.85; }
.lb-close:hover { opacity:1; color:#9BE0F5; }

/* ---------- FLEET / MAG GRID (uniform full-bleed cards) ---------- */
.mag-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; grid-auto-rows:340px; gap:24px; }
.mag-grid--two { grid-template-columns:repeat(2,1fr) !important; grid-auto-rows:420px; }
.mag-card { position:relative !important; overflow:hidden; border-radius:var(--r-lg); grid-column:auto !important; grid-row:auto !important; min-height:0 !important; box-shadow:var(--s-card); }
.mag-card:hover { box-shadow:var(--s-hover); }
.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(4,32,42,0) 0%, rgba(4,32,42,.55) 35%, rgba(4,32,42,.94) 100%) !important; }
.mag-card__body h3 { color:#fff !important; margin:4px 0 6px; }
.mag-card__body .num { color:#9BE0F5; }
.mag-card__body .meta { color:rgba(255,255,255,.78); }
@media (max-width:1024px){ .mag-grid, .mag-grid--two { grid-template-columns:repeat(2,1fr) !important; grid-auto-rows:300px; } }
@media (max-width:640px) { .mag-grid, .mag-grid--two { grid-template-columns:1fr !important; grid-auto-rows:270px; } }

/* ---------- SPECIES CHIPS GRID ---------- */
.species-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.species-card { position:relative; border-radius:var(--r-md); overflow:hidden; height:200px; box-shadow:var(--s-card); }
.species-card__img { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 900ms cubic-bezier(.2,.7,.2,1); }
.species-card:hover .species-card__img { transform:scale(1.07); }
.species-card__label { position:absolute; inset:auto 0 0 0; z-index:2; padding:16px 18px; background:linear-gradient(180deg, rgba(4,32,42,0), rgba(4,32,42,.92)); font-family:"Archivo",sans-serif; font-weight:700; color:#fff; font-size:1.02rem; letter-spacing:.01em; }
@media (max-width:1024px){ .species-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px) { .species-grid { grid-template-columns:repeat(2,1fr); } .species-card { height:160px; } }

/* ---------- QUOTES / TESTIMONIALS ---------- */
.quote-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.quote-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 32px; box-shadow:var(--s-card); }
.section--dark .quote-card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
.quote-card__mark { font-family:"Spectral",Georgia,serif; font-style:italic; font-size:3rem; line-height:.6; color:var(--accent); display:block; margin-bottom:14px; }
.quote-card p { font-family:"Spectral",Georgia,serif; font-size:1.02rem; line-height:1.7; color:var(--ink-soft); margin:0 0 16px; }
.section--dark .quote-card p { color:rgba(255,255,255,.86); }
.quote-card cite { font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.section--dark .quote-card cite { color:#9BE0F5; }
@media (max-width:820px){ .quote-grid { grid-template-columns:1fr; } }

/* ---------- INFO BLOCKS (guest info) ---------- */
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.info-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 30px; box-shadow:var(--s-card); }
.info-card h3 { font-size:1.15rem; margin-bottom:12px; }
.info-card ul { margin:0; padding-left:20px; }
.info-card li { color:var(--ink-soft); margin-bottom:8px; font-size:.95rem; }
@media (max-width:900px){ .info-grid { grid-template-columns:1fr; } }

/* ---------- ANIMATED MOBILE MENU ---------- */
.mobile-menu { position:fixed; inset:0; z-index:98; background:linear-gradient(160deg,#073F52 0%, #0A5570 55%, #062F3D 100%); display:flex; flex-direction:column; justify-content:space-between; padding:110px 28px 40px; opacity:0; visibility:hidden; pointer-events:none; }
.mobile-menu::before { content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 85% 12%, rgba(255,69,0,.18), transparent 60%); pointer-events:none; }
.mobile-menu.is-open { pointer-events:auto; }
.mobile-menu__links { display:flex; flex-direction:column; gap:2px; overflow-y:auto; position:relative; z-index:2; }
.mobile-menu__links .mm-item { font-family:"Archivo",sans-serif; font-weight:700; font-size:1.5rem; color:#fff; padding:12px 0; border:none; background:none; text-align:left; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.16); cursor:pointer; width:100%; }
.mobile-menu__links .mm-item:hover { color:#9BE0F5; }
.mm-plus { color:var(--accent-2); 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:rgba(255,255,255,.78); padding:8px 0; }
.mm-sub a:hover { color:#9BE0F5; }
.mobile-menu__cta { display:flex; flex-direction:column; gap:16px; padding-top:24px; position:relative; z-index:2; }
.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,.72); }
.mobile-menu__cta .socials a:hover svg { fill:#9BE0F5; }
body.menu-open { overflow:hidden; }

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

/* ---------- BUTTON / WIDGET HARDENING ---------- */
.nav-wrap { width:min(100% - 40px, 1440px); }
.nav-main { gap:26px; }
.nav-main a, .nav-dropdown > button, .nav-cta .phone { white-space:nowrap; }
.btn { white-space:nowrap; }
.btn svg { flex:0 0 auto; }
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; }
@media (max-width:480px){ .hero__buttons .btn { width:100%; justify-content:center; } }
/* ---------- MISC ---------- */
.byline { font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:22px; }
.breadcrumb a { color:rgba(255,255,255,.8); }
.breadcrumb a:hover { color:#fff; }
.hero__meta span { color:rgba(255,255,255,.8); }
.info-card ul { list-style:none; padding-left:0; }
.info-card li { position:relative; padding-left:20px; }
.info-card li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.contact-list li:last-child { border-bottom:0; }
.price-note a { color:var(--accent); }
/* Booking button inside a paragraph shouldn't inherit serif italics */
p button.btn.mb_widget { font-family:"Archivo",sans-serif; margin-top:10px; }

/* ---------- DARK-BUILD LEAK FIXES ----------
   The Driftwater base styles the price card for a DARK build: white body
   text, white hairline borders, and a decorative em-dash on every <ul><li>
   inside .detail-grid. On this light build that made the pricing labels
   white-on-white and hid the row dividers. Re-assert at matching specificity. */
.price-card { color: var(--ink); }
.price-card .pricing-rows li > span,
.pricing-rows li > span { color: var(--ink-soft); }
.price-card .pricing-rows li,
.pricing-rows li { border-bottom: 1px solid var(--line); }
.price-card .pricing-rows li:last-child,
.pricing-rows li:last-child { border-bottom: 0; }
.price-card .pricing-rows li > strong,
.pricing-rows li > strong { color: var(--accent); }
/* `.detail-grid ul li::before { content:"—" }` also targets the pricing rows */
.detail-grid .pricing-rows li::before,
.pricing-rows li::before { content: none; margin-right: 0; }

/* ---------- HERO META ----------
   Was absolute bottom-right, where the Mallard Bay "Chat with Us" bubble
   (fixed, bottom-right) sits on top of it. Align it to the content column. */
.hero__meta { left: 0; right: 0; width: min(100% - 48px, var(--container)); margin-inline: auto; bottom: 26px; display: flex; flex-wrap: wrap; gap: 14px 34px; text-align: left; justify-content: flex-start; padding-right: 220px; }
@media (max-width: 900px) { .hero__meta { padding-right: 0; gap: 6px 20px; } }

/* "Year-Round" needs to hold one line next to the numeric stats */
.stat-num-text { font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.1; }

/* MB's form embed renders its own dark card — drop our white shell so it
   isn't ringed in white. */
.contact-form-shell { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* ---------- MOBILE MENU LAYERING FIX ----------
   .mobile-menu is z-index 98 and .site-header is z-index 60, so while the
   overlay is open it covers the header and the X (nav-toggle) can't be
   clicked. Lift the header above the overlay while open and let the overlay
   gradient show through it. */
body.menu-open .site-header,
.site-header.is-open { z-index: 120 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; }
/* .mobile-menu uses space-between, but its only direct child is
   .mobile-menu__inner — make the inner wrapper the flex column so the CTA
   block pins to the bottom of the overlay. */
.mobile-menu__inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; position: relative; z-index: 2; }
.mobile-menu__links { flex: 0 1 auto; }

/* =======================================================
   CLIENT FEEDBACK — ROUND 1 (2026-07-29)
   ======================================================= */

/* 1 + 2. Hero: every element white, and the <em> in the H1 uses the same
   typeface as the rest of the heading (was Spectral italic + pale blue). */
.hero__eyebrow,
.hero h1,
.hero h1 em,
.hero__sub,
.hero__meta,
.hero__meta span { color: #fff; }
.hero h1 em {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* 4. One typeface for every heading site-wide — kill the serif-italic
   accent treatment on h2s, the CTA band and .display-serif. */
h1, h2, h3, h4,
.display-serif,
h1 em, h2 em, h3 em, h4 em,
.cta-banner h2 em,
.section-head h2 em,
.split__body h2 em {
  font-family: "Archivo", "Inter", system-ui, sans-serif !important;
  font-style: normal !important;
}
.display-serif,
h2 em, h3 em, h4 em,
.cta-banner h2 em { font-weight: 700; letter-spacing: -.015em; }
.intro-statement h2,
.intro-statement h2 em {
  font-family: "Archivo", "Inter", system-ui, sans-serif !important;
  font-style: normal !important;
}
.intro-statement h2 { font-weight: 600; letter-spacing: -.015em; }

/* 5. Boat "On the Water": fixed 5-across grid, two rows of five. */
.boat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
/* Ratio lives on the wrapper — `aspect-ratio` on the <img> itself stops
   Chrome from painting it (laid out, decoded, but never composited). */
.boat-grid .ow-tile {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: transform var(--t), box-shadow var(--t);
}
.boat-grid .ow-tile:hover { transform: translateY(-2px); box-shadow: var(--s-card); }
.boat-grid .tile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.boat-grid .ow-tile:hover .tile { opacity: .9; }
@media (max-width: 1024px) { .boat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .boat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* 7. FAQ: `.faq-item summary` is flex + space-between, so an inline <em>
   inside the question became its own flex item and the words were pushed
   to opposite ends ("What is        not        included?"). The question is
   now wrapped in .faq-q so the summary has exactly one flex child. */
.faq-q { flex: 1 1 auto; min-width: 0; }
.faq-q em { font-style: italic; }

/* =======================================================
   MOBILE MENU — FIT WITHOUT SCROLLING (client feedback, 2026-07-29)
   The overlay was a fixed 110px/40px padded box with `overflow-y:auto` on
   the link list, so on shorter phones (and with the Our Boats accordion
   open) the menu scrolled. Everything is now sized off the viewport height
   with a JS fit pass (see fitMobileMenu in main.js) that steps the type and
   padding down until the content fits. Nothing scrolls.
   ======================================================= */
.mobile-menu {
  --mm-fs: 1.5rem;
  --mm-pad: 12px;
  height: 100dvh;             /* dvh so mobile browser chrome can't overflow it */
  min-height: 100vh;          /* fallback for engines without dvh */
  padding: calc(var(--nav-h) + 14px) 24px max(20px, env(safe-area-inset-bottom)) 24px;
  overflow: hidden;
}
@supports (height: 100dvh) { .mobile-menu { min-height: 0; } }
.mobile-menu__inner { height: 100%; min-height: 0; gap: 10px; }
.mobile-menu__links {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;           /* was auto — the fit pass guarantees it fits */
  justify-content: center;
  gap: 0;
}
.mobile-menu__links .mm-item {
  font-size: var(--mm-fs);
  padding: var(--mm-pad) 0;
  line-height: 1.15;
}
.mm-sub { padding: 2px 0 6px 14px; }
.mm-sub a { font-size: max(.86rem, calc(var(--mm-fs) * .62)); padding: calc(var(--mm-pad) * .42) 0; }
.mobile-menu__cta {
  flex: 0 0 auto;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.mobile-menu__cta .btn { padding: 13px 22px; }
.mm-phone { font-size: max(1rem, calc(var(--mm-fs) * .68)); }
.mobile-menu__cta .socials { gap: 16px; margin-top: 0; }  /* base `.socials{margin-top:20px}` overflowed the overlay */
.mobile-menu__cta .socials svg { width: 20px; height: 20px; }
/* Short viewports start tighter. These stay as a no-JS baseline, but the
   authoritative sizing is class-driven from fitMobileMenu() below — media
   queries key off the viewport, which is the wrong question: what matters is
   how much room is actually left inside the overlay. */
@media (max-height: 700px) { .mobile-menu { --mm-fs: 1.25rem; --mm-pad: 8px; } }
@media (max-height: 600px) { .mobile-menu { --mm-fs: 1.1rem;  --mm-pad: 6px; } }

/* .mm--short — measured: very little vertical room left. Collapse the CTA
   into one row and drop the social icons. */
.mobile-menu.mm--short { padding-top: calc(var(--nav-h) + 6px); }
.mobile-menu.mm--short .mobile-menu__inner { gap: 6px; }
.mobile-menu.mm--short .mobile-menu__cta {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 6px;
}
.mobile-menu.mm--short .mobile-menu__cta .btn { padding: 10px 18px; }
.mobile-menu.mm--short .mm-phone { white-space: nowrap; }
.mobile-menu.mm--short .mobile-menu__cta .socials { display: none; }

/* .mm--cols — measured: short but wide (landscape phone). Plenty of room
   across, so run the links in columns instead of shrinking the type away. */
.mobile-menu.mm--cols .mobile-menu__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 30px;
  align-content: center;
}
.mobile-menu.mm--cols .mobile-menu__links > * { min-width: 0; }
.mobile-menu.mm--cols .mm-sub {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 20px;
  padding: 0 0 4px 0;
}
.mobile-menu.mm--cols .mm-sub a { padding: 2px 0; }
@media (max-width: 560px) {
  .mobile-menu.mm--cols .mobile-menu__links { grid-template-columns: repeat(2, 1fr); column-gap: 18px; }
}
}

/* The review feedback pill (.mbfb-fab, z-index 2147483600) sits above the
   menu overlay and covers the link labels. Hide it while the menu is open.
   (Removed entirely at launch, but it shouldn't block review either.) */
body.menu-open .mbfb-fab { display: none !important; }

/* =======================================================
   CLIENT FEEDBACK 2026-08-26 — "this page / picture needs to be
   brighter, not so dark" (reported from a phone, homepage hero).
   The source photo is fine (mean luminance 114/255). What was dark was
   the scrim: the active .hero::after ramped to rgba(4,40,53,.90) at the
   bottom, and because the hero is bottom-aligned that near-black band is
   most of what a phone actually shows. Lifted the image slightly and
   pulled the scrim back to the minimum that still holds white type,
   compensating with a stronger text shadow instead of a darker wash.
   ======================================================= */
.hero__bg { filter: brightness(1.10) saturate(1.05) contrast(1.02); }
.hero::after {
  background: linear-gradient(180deg,
    rgba(4,40,53,.26) 0%,
    rgba(4,40,53,.05) 32%,
    rgba(4,40,53,.28) 62%,
    rgba(4,40,53,.66) 100%);
}
.hero h1, .hero__eyebrow, .hero p, .hero__meta span {
  text-shadow: 0 1px 2px rgba(3,28,38,.55), 0 2px 22px rgba(3,28,38,.65);
}
/* Phones show the bottom of the frame almost exclusively, so keep the
   readable band tight to the copy instead of washing the whole photo. */
@media (max-width: 820px) {
  .hero::after {
    background: linear-gradient(180deg,
      rgba(4,40,53,.30) 0%,
      rgba(4,40,53,.06) 26%,
      rgba(4,40,53,.34) 58%,
      rgba(4,40,53,.70) 100%);
  }
}


/* =======================================================
   CLIENT FEEDBACK 2026-08-27 — "the pictures seem zoomed in really close and
   so they look blurry ... the front page is still real dark" (reported from a
   phone). Two separate causes:
   1) .hero__bg carried transform:scale(1.06) + the heroZoom animation, which
      enlarged an already-upscaled source. Killed.
   2) A 16:9 photo inside a 100vh hero on a 390px phone shows only ~28% of the
      frame, so every wide group/boat shot rendered as a very tight crop of two
      torsos. On phones the media is now its own top band with the copy on
      solid ground below, so the whole photo is visible and the copy no longer
      needs a heavy dark wash to stay readable.
   ======================================================= */
.hero:not(.hero--home) .hero__bg { transform: none !important; animation: none !important; }
/* 2026-09-02: home is re-scoped below so its slow pan can come back on desktop. */
.hero--home .hero__bg { transform: none; animation: none; }

@media (max-width: 820px) {
  .hero {
    --band: max(46vh, 290px);
    display: block !important;
    min-height: 0 !important;
    padding: calc(var(--band) + 26px) 0 44px !important;
    background-color: #073F52;
  }
  .hero--home, .hero--page { min-height: 0 !important; }
  .hero__bg {
    inset: 0 0 auto 0 !important;
    height: var(--band);
    background-position: center 44%;
    filter: brightness(1.06) saturate(1.04);
  }
  .hero::after {
    inset: 0 0 auto 0 !important;
    height: var(--band);
    background: linear-gradient(180deg,
      rgba(7,63,82,.20) 0%,
      rgba(7,63,82,.04) 46%,
      rgba(7,63,82,.55) 86%,
      #073F52 100%) !important;
  }
  .hero__inner { position: relative; z-index: 2; }
  .hero h1, .hero__eyebrow, .hero p { text-shadow: none; }
  .hero__meta {
    position: static !important;
    margin: 24px auto 0 !important;
    bottom: auto !important;
    padding-right: 0 !important;
    width: min(100% - 48px, var(--container));
  }
  .hero__meta span { text-shadow: none; }
}
@media (max-width: 560px) { .hero { --band: max(40vh, 260px); } }

/* === NO-CROP PASS 2026-08-28 === */
/* Client: "you are zooming and cropping images ... the quality drops severely."
   Measured crop before this block: page heroes 45% of the frame cut off on a
   phone, species cards 24%, boat cards 13%. Fix is always the same - make the
   BOX match the photo's own aspect ratio so `cover` has nothing to crop, and
   let the section resize around the photo rather than the reverse.
   Sources: page heroes 1760x840 (21:10) - boats hero 1900x900 (~21:10);
            home hero 1760x990 (16:9); species 1000x750 (4:3);
            boat cards 1600x1100 (16:11). */

/* --- Phone hero band: height derived from the photo ratio, never a fixed vh.
       Overrides the earlier max(46vh,290px) / max(40vh,260px) bands. --- */
@media (max-width: 820px) {
  .hero        { --band: calc(100vw / 2.0952) !important; }  /* 21:10 */
  .hero--home  { --band: calc(100vw / 1.7778) !important; }  /* 16:9  */
}
@media (max-width: 560px) {
  .hero        { --band: calc(100vw / 2.0952) !important; }
  .hero--home  { --band: calc(100vw / 1.7778) !important; }
}

/* --- Desktop page hero: 78vh forced a tall crop out of a 21:10 photo. --- */
@media (min-width: 821px) {
  .hero--page {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 2.0952;
  }
  .hero--home { min-height: 0 !important; height: auto !important; aspect-ratio: 1.7778; }
}

/* --- Species cards: fixed 200px/160px height squashed a 4:3 photo. --- */
.species-card { height: auto !important; aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .species-card { height: auto !important; aspect-ratio: 4 / 3; } }

/* --- Boat cards: fixed grid rows cropped a 16:11 photo to 4:3 then to 342x270. --- */
.mag-grid--two { grid-auto-rows: auto !important; }
.mag-grid--two .mag-card { aspect-ratio: 16 / 11; }
.mag-grid--two .mag-card__img { aspect-ratio: auto !important; }

/* --- Boats-page thumbnails: 220x145 clipped the same 16:11 photo. --- */
.trip-row__img { height: auto !important; aspect-ratio: 16 / 11; }
@media (max-width: 960px) { .trip-row__img { height: auto !important; aspect-ratio: 16 / 11; } }

/* --- Gallery on phones: one full-width column upscaled the narrow portrait
       sources ~2.4x, which is the same quality loss by another route.
       Two columns keeps every tile at or near its native pixel size. --- */
@media (max-width: 480px) { .gallery-grid { column-count: 2 !important; } }
@media (max-width: 1024px) { .mag-grid--two { grid-auto-rows: auto !important; } }
@media (max-width: 640px)  { .mag-grid--two { grid-auto-rows: auto !important; } }

/* MB widget injects an inline <script> into its wrapper; the defensive
   `.mb-full-width > *` visibility rule renders it as raw JS text.
   This hide rule MUST remain the LAST block in this file. */

/* =======================================================
   CLIENT FEEDBACK 2026-08-31 — "all the pictures are chopped off and you
   can't see anything" (/rip-current), "the pictures cut off" (/faqs),
   "their heads are cut off" (/contact). Reported from a phone.

   The 2026-08-28 NO-CROP PASS was right that the BOX must match the photo,
   but it matched them the wrong way round: the image FILES had been baked
   down to fit the box. Template-matching every hero and boat tile against
   the originals in the Mallard Bay account showed the same hard band cut out
   of each one - full width, from 15% to 71% of the original height - which
   is precisely where people's heads sit. The CSS was innocent; the JPEGs
   were already decapitated, so no amount of positioning could recover them.

   All 20 boat tiles and three page heroes were regenerated from the
   full-resolution originals (mostly 4032x3024) with the crop window anchored
   to the topmost subject instead of a fixed offset. Tiles went 620x465 ->
   1000x750 in the process. The three rebuilt heroes are 16:9 rather than
   21:10, so the hero ratio is now a variable the page sets rather than a
   constant baked into this file.
   ======================================================= */
@media (max-width: 820px) {
  .hero        { --band: calc(100vw / var(--hero-ar, 2.0952)) !important; }
  .hero--home  { --band: calc(100vw / var(--hero-ar, 1.7778)) !important; }
}
@media (max-width: 560px) {
  .hero        { --band: calc(100vw / var(--hero-ar, 2.0952)) !important; }
  .hero--home  { --band: calc(100vw / var(--hero-ar, 1.7778)) !important; }
}
@media (min-width: 821px) {
  .hero--page { aspect-ratio: var(--hero-ar, 2.0952) !important; }
  .hero--home { aspect-ratio: var(--hero-ar, 1.7778) !important; }
}


/* --- CLIENT FEEDBACK 2026-08-31: "there's too much content it needs to be
       condensed" (/contact, phone). Nothing removed - the page was just a
       very long single stack on a phone: six full-width contact rows, then a
       380px map, then the form, then the banner. The short rows now pair up
       two-across, the address keeps its own full-width row, and the map is
       sized like a locator rather than a feature. --- */
@media (max-width: 820px) {
  .contact-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    margin-top: 18px;
  }
  /* .form-wrap ul li is a flex row with a 90px label; that cannot fit two
     across on a phone, so inside the grid the label stacks over the value. */
  .contact-list li {
    display: block !important;
    padding: 11px 0;
    min-width: 0;
  }
  .contact-list li strong {
    display: block !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 2px;
  }
  .contact-list li a, .contact-list li { overflow-wrap: anywhere; }
  /* the email and the meet-us address are the long ones - let them span,
     otherwise the address mid-wraps in a half-width cell */
  .contact-list li:nth-child(3),
  .contact-list li:nth-child(4) { grid-column: 1 / -1; }
  .contact-list li:nth-last-child(-n+2) { border-bottom: 0; }
  .map-frame { margin-top: 24px; }
  .map-frame iframe { height: 220px; }
  .form-wrap { gap: 30px !important; }
}


/* =======================================================
   CLIENT FEEDBACK 2026-08-31 (round 2) — "there is still negative margin
   behind the mobile header menu so it is cutting off the top of the photo
   and it looks really squeezed height wise."
   Correct on both counts. The phone band was 100vw / 2.0952, which is 186px
   on a 390px screen, and the 84px fixed header sat ON TOP of it, so barely
   100px of photo was actually visible. Two fixes:
     1) The band is now 4:3, so 292px on the same screen, and it starts BELOW
        the header instead of underneath it. The header gets its own solid
        strip and the whole photo is visible in one piece.
     2) A 4:3 box wants a 4:3 photo. Every hero now ships a companion -m file
        cut from the original camera frame (mostly 4032x3024, so 4:3 already
        and cropped by nothing at all). Phones load that one, desktop keeps
        the wide file.
   ======================================================= */
@media (max-width: 820px) {
  .hero,
  .hero--home,
  .hero--page      { --band: min(calc(100vw * 3 / 4), 560px) !important; }

  /* the photo starts under the header, not behind it */
  .hero            { padding-top: calc(var(--nav-h) + var(--band) + 24px) !important; }
  .hero__bg        { top: var(--nav-h) !important; height: var(--band) !important; }
  .hero::after     { top: var(--nav-h) !important; height: var(--band) !important; }

  /* phones get the 4:3 cut of the same scene */
  .hero__bg {
    background-image: var(--hero-m) !important;
    background-position: center !important;
    background-size: cover !important;
  }

  /* one continuous navy strip behind the header, no seam against the band */
  .site-header,
  .home .site-header,
  .home .site-header:not(.is-scrolled) {
    background: rgba(7,63,82,.96) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
}


/* --- The feedback pill is fixed at left:0; top:50%, which on a phone lands
       straight across the hero headline and eats the first character of
       every page title. It is our own review widget and it goes away at
       launch, but the client is reviewing on a phone right now, so on small
       screens it drops to the lower left, clear of the copy and clear of the
       chat bubble in the opposite corner. --- */
@media (max-width: 820px) {
  .mbfb-fab {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) rotate(180deg) !important;
    padding: 14px 2px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 1.2px !important;
    border-radius: 6px 0 0 6px !important;
    gap: 0 !important;
    opacity: .92;
  }
  /* the word is the affordance; the icon is what pushes it out of the gutter */
  .mbfb-fab svg { display: none !important; }
}


/* --- Same round of feedback: "all of the hero shots are scrunched up and
       DARK ... wants to lighten them up."
       The darkness was the scrim, not the photos. .hero::after ramps to solid
       #073F52 by the bottom of the band, which existed to hold white type
       over the image. Now that the copy sits on its own navy ground BELOW the
       band, that gradient is doing nothing except dimming the bottom half of
       every hero. Measured before removing it: rip-tide fell from 161 to 91
       top-to-bottom, about from 152 to 87. On phones the scrim comes off and
       the photo carries a small lift instead. --- */
@media (max-width: 820px) {
  .hero::after { display: none !important; }
  .hero__bg {
    filter: brightness(1.10) saturate(1.06) contrast(1.02) !important;
  }
}

/* =======================================================
   CLIENT FEEDBACK 2026-09-02 — three separate asks.

   1) "Boats page - content block is crowding the photos; boats are cut off.
       He wants the image area bigger: a lot of people want to see what
       they're booking, they wanna know what does that boat look like."
      The tile was a 220px box at 16/11 fed by a 4:3 photo, so it was both
      small and cropped top-and-bottom. The photo column is now ~44% of the
      row and the box is 4:3, which is exactly the source ratio, so nothing
      is cropped at any width. The two tiles also now carry a broadside
      portrait of each actual boat instead of a deck shot.

   2) "Homepage hero - the previous image had a longer/parallax motion effect
       he liked ... he wanted it brightened. It got swapped instead."
      The motion was the heroZoom pan, killed globally on 2026-08-27 because
      it enlarged an already-tight crop. It is back on the HOME hero on
      desktop only, slower and longer than the original (26s vs 18s). Phones
      keep it off: the phone band shows the whole 4:3 frame and any scale
      would start cropping it again. Which photo he wants back is still an
      open question, so the file is unchanged.

   3) Brightness is deliberately NOT touched again. It has been lifted three
      times (08-26, 08-27, 08-31) and the phone scrim is already gone with
      the photo at brightness 1.10. Measured at 375px, every hero band shows
      100% of its frame - nothing is being cropped by CSS any more. What is
      left is how the source photos are framed, which only his new
      current-season shots can fix.
   ======================================================= */

/* --- 1. boats page: the photo is the point --- */
.trip-row { grid-template-columns: minmax(0, 44%) minmax(0, 1fr) auto; gap: 30px; }
.trip-row__img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;   /* == the source ratio, so zero crop */
  background-size: cover;
  background-position: center;
}
@media (max-width: 960px) {
  .trip-row { grid-template-columns: 1fr; }
  .trip-row__img { width: 100% !important; aspect-ratio: 4 / 3 !important; }
}

/* --- 2. home hero: the motion he liked is GSAP's, in main.js: a 1.12 -> 1.0
       intro zoom plus a scrubbed scroll parallax. Both were dead because the
       08-27 rule zeroed transform on every .hero__bg with !important. That
       rule is now scoped to :not(.hero--home), so the home hero moves again.
       GSAP writes INLINE transforms, so the only way to keep phones out of it
       is an !important block here - and phones must stay out, because a 1.12
       scale on the 4:3 band is exactly the head-cropping we just measured
       away. Desktop moves, phones do not. --- */
@media (max-width: 820px) {
  .hero--home .hero__bg { transform: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--home .hero__bg { transform: none !important; animation: none !important; }
}
@media (min-width: 821px) {
  .hero--home .hero__bg { will-change: transform; }
}

/* =======================================================
   CLIENT FEEDBACK 2026-09-03 — "ensure 100% on mobile first, but on all
   views, that heads aren't cut off, images aren't overly cropped or zoomed,
   and on mobile they aren't just a small photo at the top of the screen."

   This block supersedes the hero geometry from 08-27, 08-28, 08-31 and
   09-02. Six rounds of patches had left the phone hero as a 4:3 strip about
   292px tall on a 390px screen, sitting above a hard edge and a flat navy
   block - which is precisely "a small photo at the top of the screen". The
   photo it loaded was also a wider, zoomed-OUT cut of the same scene than
   the desktop file, so the people in it were small and sat high. That is
   what "shifted up" meant.

   The rule now is: THE BOX ALWAYS MATCHES THE FILE. Every hero ships two
   files, and each breakpoint sets an aspect-ratio equal to the ratio of the
   file it loads, so background-size:cover has nothing to crop - at any
   width, on any device. Nothing is trimmed by CSS ever again.

     phones  (<=700px): -p file, ratio from --hero-ar-p (3/4 for people
                        pages, 4/3 for the boat pages where cropping to
                        portrait would cut the bow or the stern off)
     >=701px          : -w file at a true 16/9

   Every -p and -w file was re-cut from the largest source we have with
   OpenCV face detection gating the crop window: all detected faces inside,
   plus 0.65x of a head-height of clearance above the highest head, and on
   the portrait cuts the faces are held in the upper 42% so the copy never
   lands on anyone. Pages whose group is too wide to crop to portrait
   without losing someone (Plan Your Hunt, Trophy Room) take a different
   photo from the owner's own library on phones rather than a compromised
   crop of the same one.

   On phones the copy still sits below the photo - there is far too much of
   it to overlay a 520px image - but the photo's bottom edge now dissolves
   into the ground colour instead of ending on a hard line, so the hero
   reads as one tall unit rather than a picture with a text box under it.
   ======================================================= */

@media (max-width: 700px) {
  .hero {
    display: block !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 0 40px !important;
    background-color: #073F52;
  }
  .hero__bg {
    position: relative !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--hero-ar-p, 3 / 4) !important;
    margin-top: var(--nav-h) !important;
    background-image: var(--hero-p) !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: brightness(1.07) saturate(1.04) !important;
    transform: none !important;
    animation: none !important;
  }
  /* dissolve the bottom edge into the ground - kills the hard seam */
  .hero__bg::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 30%;
    background: linear-gradient(180deg,
      rgba(7,63,82,0) 0%, rgba(7,63,82,.30) 52%, rgba(7,63,82,.82) 84%, #073F52 100%);
    pointer-events: none;
  }
  .hero::after { display: none !important; }
  .hero__inner {
    position: relative !important;
    margin-top: -22px !important;
    padding-top: 0 !important;
    z-index: 2;
  }
  .hero__meta { display: none !important; }
}

/* tablets and up: the wide file, a true 16:9 box, copy overlaid as before.
   These override the old <=820px band rules in the 701-820 range. */
@media (min-width: 701px) {
  .hero {
    display: flex !important;
    padding: 0 0 60px !important;
    min-height: 0 !important;
  }
  .hero--home,
  .hero--page { aspect-ratio: 16 / 9 !important; align-items: flex-end; }
  .hero__bg {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin-top: 0 !important;
    /* the 08-31 rule still sets background-image:var(--hero-m)!important below
       820px, and --hero-m no longer exists, so 701-820px resolved to `none`.
       Name the wide file explicitly and at the same weight. */
    background-image: var(--hero-w) !important;
    background-size: cover !important;
    background-position: center center !important;
  }
  .hero__bg::after { display: none; }
  .hero::after {
    display: block !important;
    top: 0 !important;
    height: 100% !important;
    background: linear-gradient(180deg,
      rgba(4,40,53,.20) 0%, rgba(4,40,53,.04) 34%, rgba(4,40,53,.30) 64%, rgba(4,40,53,.72) 100%) !important;
  }
}

/* the motion he liked (GSAP, main.js) stays desktop-only: a 1.12 scale on a
   phone would start cropping the very frames we just made exact. */
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  .hero--home .hero__bg { transform: none !important; animation: none !important; }
}


.mb-full-width script { display:none !important; }