/* ============================================================
   MFL CONFLUENCE — Component Styles
   Lodge cards, river cards, badges, tags, etc.
   ============================================================ */

/* ============================================================
   LODGE CARDS — 2-column grid
   ============================================================ */
.mfl-lodges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line2);
  margin-top: 56px;
}
.mfl-lodge-card {
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.mfl-lodge-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}
.mfl-lodge-body {
  padding: 52px 48px;
  position: relative;
  overflow: hidden;
}
.mfl-lodge-card.mfl { background: var(--forest); }
.mfl-lodge-card.mfl:hover { background: var(--forest2); }
.mfl-lodge-card.sfl { background: var(--marine2); }
.mfl-lodge-card.sfl:hover { background: var(--marine3); }
/* BFL DISABLED
.mfl-lodge-card.bfl { background: var(--burgundy2); }
.mfl-lodge-card.bfl:hover { background: var(--burgundy3); }
*/

/* Top accent bar */
.mfl-lodge-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.mfl-lodge-card.mfl::before {
  background: linear-gradient(90deg, var(--gold), rgba(200,185,138,0.2));
}
.mfl-lodge-card.sfl::before {
  background: linear-gradient(90deg, var(--sage), rgba(92,138,110,0.2));
}
/* BFL DISABLED
.mfl-lodge-card.bfl::before {
  background: linear-gradient(90deg, var(--copper), rgba(200,122,106,0.2));
}
*/

/* Background watermark number */
.mfl-lodge-bg-num {
  font-family: var(--font-display);
  font-size: 120px;
  position: absolute;
  bottom: -10px; right: 32px;
  line-height: 1;
  font-weight: 700;
  color: rgba(232,224,208,0.03);
  user-select: none;
  pointer-events: none;
}

/* Lodge tag */
.mfl-lodge-tag {
  font-size:  12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}
.mfl-lodge-tag.mfl { color: var(--gold); }
.mfl-lodge-tag.sfl { color: var(--sage); }
/* .mfl-lodge-tag.bfl { color: var(--copper); }  BFL DISABLED */

/* Lodge name */
.mfl-lodge-name {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--cream);
  margin-bottom: 16px;
  line-height: 1.15;
}

/* Lodge description — uses --cream-dim so the token (2026-04-20 bump
   to 0.88) cascades here too. Previously hardcoded at 0.8 which read
   too muted against the lodge-card forest gradient. */
.mfl-lodge-desc {
  font-size: 18px;
  line-height: 1.75;
  color: var(--cream-dim);
  /* Weight 400 (Regular) rather than 300 (Light). Light-weight
     Source Sans 3 renders too thin against the forest gradients
     for comfortable reading. User reported "text goes muted when
     font finishes loading" — that's the fallback-to-custom-font
     weight swap. 400 closes the perceived-brightness gap. */
  font-weight: 400;
  margin-bottom: 28px;
}

/* Stats grid */
.mfl-lodge-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-bottom: 28px;
}
.mfl-stat {
  background: rgba(0,0,0,0.15);
  padding: 16px 0;
  text-align: center;
}
.mfl-stat-val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cream);
  display: block;
  margin-bottom: 4px;
}
.mfl-stat-label {
  /* Bumped 10px → 12px and alpha 0.35 → --cream-faint (0.72) for
     readability. Previously fading out of view on most viewports. */
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-faint);
  font-weight: 600;
}

/* River chips */
.mfl-lodge-rivers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.mfl-river-chip {
  /* Bumped 10px → 12px, alpha 0.4 → --cream-dim (0.96), and border
     0.1 → 0.22 so the chip reads as actual interactive-looking
     content rather than a whispered decoration. */
  font-size: 12px;
  padding: 6px 13px;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--cream-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Lodge link */
.mfl-lodge-link {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: gap 0.2s;
}
.mfl-lodge-link:hover { gap: 16px; }
.mfl-lodge-link.mfl { color: var(--gold); }
.mfl-lodge-link.sfl { color: var(--sage); }
/* .mfl-lodge-link.bfl { color: var(--copper); }  BFL DISABLED */

/* ============================================================
   RIVER CARDS — 4-column grid
   ============================================================ */
.mfl-rivers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
}
.mfl-river-card {
  padding: 36px 28px;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
  text-decoration: none;
  display: block;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.mfl-river-card:nth-child(4n) {
  border-right: none;
}
.mfl-river-card.in-forest { background: var(--forest); }
.mfl-river-card.in-forest:hover {
  background: var(--forest2);
  box-shadow: inset 0 0 0 1px rgba(200,185,138,0.12), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.mfl-river-card.in-marine { background: var(--marine2); }
.mfl-river-card.in-marine:hover {
  background: var(--marine3);
  box-shadow: inset 0 0 0 1px rgba(92,138,110,0.15), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
/* BFL DISABLED
.mfl-river-card.in-burgundy { background: var(--burgundy2); }
.mfl-river-card.in-burgundy:hover { background: var(--burgundy3); }
*/

/* River lodge badge */
.mfl-river-lodge-badge {
  font-size:  11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  margin-bottom: 20px;
  display: inline-block;
}
.mfl-river-lodge-badge + .mfl-river-lodge-badge {
  margin-left: 6px;
}
.mfl-river-lodge-badge.mfl {
  color: var(--gold);
  border: 1px solid rgba(200,185,138,0.25);
}
.mfl-river-lodge-badge.sfl {
  color: var(--sage);
  border: 1px solid rgba(92,138,110,0.25);
}
/* BFL DISABLED
.mfl-river-lodge-badge.bfl {
  color: var(--copper);
  border: 1px solid rgba(200,122,106,0.25);
}
*/

/* River name */
.mfl-river-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--cream);
  margin-bottom: 10px;
  line-height: 1.2;
  transition: color 0.3s;
}
.mfl-river-card:hover .mfl-river-name {
  color: var(--gold-lt);
}

/* River description */
.mfl-river-desc {
  /* Bumped 13px → 15px, weight 300 → 400, color cream-faint → cream-dim
     for readable body-copy treatment. Hover rule is now a no-op (same
     color both states) but kept for a future dim-on-default revisit. */
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream-dim);
  font-weight: 400;
  margin-bottom: 20px;
  transition: color 0.3s;
}
.mfl-river-card:hover .mfl-river-desc {
  color: var(--cream-dim);
}

/* Species tags */
.mfl-river-species {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mfl-species-tag {
  font-size:  11px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.05);
  color: var(--cream-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}
.mfl-river-card:hover .mfl-species-tag {
  background: rgba(200,185,138,0.10);
  color: var(--cream-faint);
}

/* ============================================================
   EXPERIENCE CARDS — 4-column grid (homepage)
   ============================================================ */
.mfl-experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-top: 56px;
}
.mfl-experience-card {
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
}
.mfl-experience-card.in-forest { background: var(--forest); }
.mfl-experience-card.in-forest:hover {
  background: var(--forest2);
  box-shadow: inset 0 0 0 1px rgba(200,185,138,0.12), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.mfl-experience-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.mfl-experience-card:hover .mfl-experience-name { color: var(--gold-lt); }
.mfl-experience-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--cream-dim);
  flex: 1;
  margin-bottom: 20px;
}
.mfl-experience-card:hover .mfl-experience-desc { color: var(--cream); }
.mfl-experience-link {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  transition: gap 0.3s, color 0.3s;
}
.mfl-experience-card:hover .mfl-experience-link { color: var(--gold-lt); }

/* ============================================================
   PLANNING CARDS — 4-column grid (homepage)
   ============================================================ */
.mfl-planning-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-top: 56px;
}
.mfl-planning-card {
  padding: 44px 36px;
  background: var(--hybrid2);
  display: flex;
  flex-direction: column;
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
}
.mfl-planning-card:hover {
  background: var(--hybrid3);
  box-shadow: inset 0 0 0 1px rgba(200,185,138,0.12), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.mfl-planning-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.mfl-planning-card:hover .mfl-planning-name { color: var(--gold-lt); }
.mfl-planning-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--cream-dim);
  flex: 1;
  margin-bottom: 20px;
}
.mfl-planning-card:hover .mfl-planning-desc { color: var(--cream); }
.mfl-planning-link {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  transition: gap 0.3s, color 0.3s;
}
.mfl-planning-card:hover .mfl-planning-link { color: var(--gold-lt); }

/* ============================================================
   TESTIMONIAL SECTION
   ============================================================ */
.mfl-testimonial-section {
  padding: 80px 48px;
  text-align: center;
  background: var(--hybrid4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mfl-testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.5;
  color: var(--cream);
  font-style: italic;
  max-width: 720px;
  margin: 0 auto 20px;
}
.mfl-testimonial-attr {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-faint);
  font-weight: 600;
}

/* ============================================================
   ORVIS CREDENTIAL PILL
   The "Top 3 in the U.S. — 2024 Orvis Endorsed Lodge of the
   Year" credential, rendered by [mfl_orvis_credential]
   shortcode. Reads as a certification element, distinct from
   the gold action buttons. Renders both full + short text
   spans in the markup; CSS swaps visibility based on viewport.
   ============================================================ */
.mfl-orvis-credential {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8b98a;
  font-weight: 600;
  padding: 10px 18px;
  border: 1px solid rgba(200, 185, 138, 0.4);
  border-radius: 999px;
  background: rgba(200, 185, 138, 0.05);
  line-height: 1.3;
  max-width: 100%;
  text-align: center;
  white-space: normal;
}
.mfl-orvis-credential__full {
  display: inline;
}
.mfl-orvis-credential__short {
  display: none;
}

/* Mobile / narrow viewport — swap full → short text + tighten
   the pill so it sits comfortably on one line at smaller sizes. */
@media (max-width: 768px) {
  .mfl-orvis-credential {
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 8px 14px;
  }
  .mfl-orvis-credential__full {
    display: none;
  }
  .mfl-orvis-credential__short {
    display: inline;
  }
}

/* Hero-context wrapper — uniform vertical spacing when the
   credential sits between .mfl-hero-sub and .mfl-hero-actions. */
.mfl-hero-credential {
  margin-top: 18px;
  margin-bottom: 8px;
}

/* Lift the pill off the photo background with frosted dark glass —
   same pattern as .mfl-hero-actions .btn-ghost above. */
.mfl-hero-credential .mfl-orvis-credential {
  background: rgba(8, 15, 11, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(200, 185, 138, 0.65);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

/* Footer-context wrapper — small breathing room between the
   reviews badge above and the Outfitter Licenses block below. */
.mfl-footer-credential {
  margin: 12px 0;
}
.mfl-footer-credential .mfl-orvis-credential {
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 6px 12px;
}

/* ============================================================
   BOOKING CTA
   ============================================================ */
.mfl-booking-section {
  padding: 100px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mfl-booking-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(200,185,138,0.06) 0%, transparent 70%),
    linear-gradient(160deg, var(--hybrid) 0%, var(--hybrid2) 100%);
}
.mfl-booking-inner {
  position: relative;
  z-index: 2;
}
.mfl-booking-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  color: var(--cream);
  margin-bottom: 16px;
}
.mfl-booking-title em {
  color: var(--gold);
  font-style: italic;
}
.mfl-booking-sub {
  font-size: 16px;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
  max-width: 480px;
  margin: 0 auto 36px;
}
.mfl-booking-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.mfl-ornament {
  font-size: 20px;
  color: var(--gold-dk);
  letter-spacing: 0.4em;
  margin: 40px 0 20px;
  opacity: 0.5;
}

/* ============================================================
   AMENITIES COMPARISON — 3-column lodge split
   ============================================================ */
.mfl-amenities-split {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line2);
  margin-top: 56px;
}
.mfl-amenity-col {
  padding: 48px 40px;
  cursor: pointer;
  transition: background 0.25s;
}
.mfl-amenity-col.mfl { background: var(--forest); }
.mfl-amenity-col.mfl:hover { background: var(--forest2); }
.mfl-amenity-col.sfl { background: var(--marine2); }
.mfl-amenity-col.sfl:hover { background: var(--marine3); }
/* BFL DISABLED
.mfl-amenity-col.bfl { background: var(--burgundy2); }
.mfl-amenity-col.bfl:hover { background: var(--burgundy3); }
*/
.mfl-amenity-col-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--cream);
  margin-bottom: 8px;
}
.mfl-amenity-col-sub {
  font-size:  12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 28px;
}
.mfl-amenity-col.mfl .mfl-amenity-col-sub { color: var(--gold-dk); }
.mfl-amenity-col.sfl .mfl-amenity-col-sub { color: var(--sage); }
/* .mfl-amenity-col.bfl .mfl-amenity-col-sub { color: var(--copper); }  BFL DISABLED */
.mfl-amenity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mfl-amenity-list li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--cream-dim);
  font-weight: 400;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  padding-left: 16px;
  position: relative;
}
.mfl-amenity-list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 15px;
}
.mfl-amenity-col.mfl .mfl-amenity-list li::before { background: var(--gold-dk); }
.mfl-amenity-col.sfl .mfl-amenity-list li::before { background: var(--sage-dk); }
/* .mfl-amenity-col.bfl .mfl-amenity-list li::before { background: var(--copper-dk); }  BFL DISABLED */

/* ============================================================
   MOBILE MENU
   ============================================================ */
.mfl-mobile-menu {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13,18,24,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 99;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.mfl-mobile-menu.is-open {
  transform: translateX(0);
}
.mfl-mobile-menu-inner {
  padding: 32px 24px;
}
.mfl-mobile-nav-links {
  list-style: none;
  padding: 0;
}
.mfl-mobile-nav-links li {
  border-bottom: 1px solid var(--line);
}
.mfl-mobile-nav-links li.menu-item-has-children {
  position: relative;
}
.mfl-mobile-nav-links a {
  display: block;
  padding: 14px 0;
  font-size: 13px;
  line-height: 16px; /* explicit so the row height (44px) is deterministic — the chevron toggle relies on it lining up exactly */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.mfl-mobile-nav-links a:hover {
  color: var(--gold);
}
.mfl-mobile-nav-links li.menu-item-has-children > a {
  padding-right: 44px;
}
/* Accordion toggle — separate tap target from the item's own link, so
   parent pages (Fly Fishing, Accommodations, etc.) stay navigable while
   the chevron expands/collapses just that branch of the submenu. */
.mfl-submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px; /* matches the top-level row: 14px padding + 14px padding + 16px line-height */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mfl-submenu-toggle:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -2px;
}
.mfl-submenu-toggle span {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.3s;
}
.mfl-mobile-nav-links li.is-expanded > .mfl-submenu-toggle span {
  transform: rotate(-135deg);
}
.mfl-mobile-nav-links .sub-menu {
  list-style: none;
  padding: 0 0 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mfl-mobile-nav-links .sub-menu.is-open {
  max-height: 1000px;
}
.mfl-mobile-nav-links .sub-menu a {
  font-size: 11px;
  padding: 10px 0;
  line-height: 14px; /* explicit so nested rows (34px) match the nested chevron below */
  color: var(--cream-faint);
}
.mfl-mobile-nav-links .sub-menu .mfl-submenu-toggle {
  height: 34px; /* matches the nested row: 10px padding + 10px padding + 14px line-height */
}
.mfl-mobile-nav-secondary {
  margin-top: 8px;
}

/* ============================================================
   CONFLUENCE SECTION WRAPPER (for homepage sections)
   ============================================================ */
.mfl-confluence-section {
  padding: 100px 48px;
  position: relative;
  overflow: hidden;
}
.mfl-confluence-section .mfl-section-bg {
  /* Hybrid gradient for confluence-style sections (two-lodge, alternating-color pattern).
     This default replaces ~20+ inline-style duplicates across page templates. */
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 60% 30%, rgba(10,26,36,0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 40% 70%, rgba(92,138,110,0.07) 0%, transparent 50%),
    linear-gradient(160deg, var(--hybrid) 0%, var(--hybrid2) 50%, var(--hybrid3) 100%);
}
.mfl-confluence-section .mfl-section-texture {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(200,185,138,0.025) 0px, rgba(200,185,138,0.025) 1px,
      transparent 1px, transparent 48px),
    repeating-linear-gradient(-45deg,
      rgba(200,185,138,0.015) 0px, rgba(200,185,138,0.015) 1px,
      transparent 1px, transparent 48px);
  pointer-events: none;
}
.mfl-confluence-section .mfl-section-inner {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
}

/* ============================================================
   PROPERTY PAGE — Overview (prose + stats)
   ============================================================ */
.mfl-property-overview {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  margin-top: 48px;
  align-items: start;
}
.mfl-property-prose p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--cream-dim);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}
.mfl-property-prose p:last-child {
  margin-bottom: 0;
}
.mfl-property-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.mfl-property-stat {
  padding: 28px 24px;
  background: var(--forest2);
}
.mfl-property-stat-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 6px;
}
.mfl-property-stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cream-dim);
}

/* ============================================================
   PROPERTY PAGE — Feature Grid (3-column cards)
   ============================================================ */
.mfl-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-feature-card {
  padding: 40px 32px;
  background: var(--hybrid2);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
}
.mfl-feature-card:hover {
  background: var(--hybrid3);
  box-shadow: inset 0 0 0 1px rgba(200,185,138,0.12), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
/* ============================================================
   GOLD LINK UTILITY — Replaces dozens of inline color:var(--gold) styles
   in prose, feature cards, FAQ content, etc.
   Scoped to content contexts where gold links read as clean inline accents.
   ============================================================ */
.mfl-property-prose a:not(.btn-primary):not(.btn-ghost),
.mfl-feature-desc a:not(.btn-primary):not(.btn-ghost),
.mfl-feature-title a,
.mfl-faq-a a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,185,138,0.35);
  transition: border-color 0.2s, color 0.2s;
}
.mfl-property-prose a:hover,
.mfl-feature-desc a:hover,
.mfl-feature-title a:hover,
.mfl-faq-a a:hover {
  border-color: var(--gold);
  color: var(--gold-lt);
}

.mfl-feature-title {
  /* h3 as feature-card title — reset browser h3 defaults so visual parity with old div-based version */
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cream);
  margin: 0 0 16px;
  transition: color 0.3s;
}
.mfl-feature-card:hover .mfl-feature-title {
  color: var(--gold-lt);
}
.mfl-feature-card:hover .mfl-feature-title a {
  color: var(--gold-lt) !important;
}
.mfl-feature-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
  transition: color 0.3s;
}
.mfl-feature-card:hover .mfl-feature-desc {
  color: var(--cream);
}

/* ============================================================
   PROPERTY PAGE — Amenities List (2-column)
   ============================================================ */
.mfl-amenities-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 40px;
  background: var(--line);
  border: 1px solid var(--line);
}
.mfl-amenity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--cream-dim);
  font-weight: 400;
  padding: 20px 24px;
  background: var(--hybrid2);
  transition: background 0.3s, box-shadow 0.3s;
}
.mfl-amenity-item:hover {
  background: var(--hybrid3);
  box-shadow: inset 0 0 0 1px rgba(200,185,138,0.10);
}
.mfl-amenity-item:hover::before {
  color: var(--gold-lt);
}
.mfl-amenity-item::before {
  content: '\2726';
  color: var(--gold);
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: color 0.3s;
}
/* Forest section context — dining "Evenings" etc. */
.mfl-section .mfl-amenity-item {
  background: var(--forest2);
}
.mfl-section .mfl-amenity-item:hover {
  background: var(--forest3);
}
/* Nested inside booking-option containers (forest2 parent) */
.mfl-booking-option .mfl-amenities-list {
  margin-top: 20px;
  border: none;
}
.mfl-booking-option .mfl-amenity-item {
  background: var(--forest3);
}
.mfl-booking-option .mfl-amenity-item:hover {
  background: var(--forest4);
}
.mfl-booking-option:hover .mfl-amenity-item {
  background: var(--forest4);
}
.mfl-booking-option:hover .mfl-amenity-item:hover {
  background: rgba(34,61,42,0.85);
}

/* ============================================================
   GUIDE CARDS — Fly Fishing Team page
   ============================================================ */
.mfl-guides-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-guide-card {
  background: var(--forest2);
  overflow: hidden;
  transition: background 0.3s;
}
.mfl-guide-card:hover {
  background: var(--forest3);
}
.mfl-guide-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.mfl-guide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: grayscale(20%);
  transition: filter 0.3s, transform 0.4s;
}
.mfl-guide-card:hover .mfl-guide-photo img {
  filter: grayscale(0%);
  transform: scale(1.03);
}
.mfl-guide-info {
  padding: 28px 24px;
}
.mfl-guide-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.mfl-guide-title {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--cream-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.mfl-guide-bio-btn {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.mfl-guide-bio-btn:hover {
  background: var(--gold);
  color: var(--forest);
}

/* ============================================================
   BIO MODAL — Guide bio popup
   ============================================================ */
.mfl-bio-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,15,11,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.mfl-bio-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.mfl-bio-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 9999;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(92,138,110,0.08) 0%, transparent 60%),
    linear-gradient(160deg, var(--forest2) 0%, var(--forest3) 100%);
  border: 1px solid var(--line);
  max-width: 640px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 48px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
.mfl-bio-modal.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.mfl-bio-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--cream-dim);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  z-index: 1;
}
.mfl-bio-close:hover {
  color: var(--gold);
}
.mfl-bio-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.mfl-bio-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--line);
  flex-shrink: 0;
}
.mfl-bio-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.mfl-bio-title {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}
.mfl-bio-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cream-dim);
  font-weight: 400;
  margin-bottom: 16px;
}
.mfl-bio-text p:last-child {
  margin-bottom: 0;
}

/* Scrollbar styling for modal */
.mfl-bio-modal::-webkit-scrollbar {
  width: 6px;
}
.mfl-bio-modal::-webkit-scrollbar-track {
  background: transparent;
}
.mfl-bio-modal::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

/* ============================================================
   BOOKING OPTIONS — Book Now page lodge cards
   ============================================================ */
/* ============================================================
   BOOK-NOW ROUTER PATHS
   Three-card decision router on /book-now/. Each card = one intent
   path (direct book / inquiry / phone). Middle card is featured
   because inquiry is the most common high-ticket path.
   ============================================================ */
.mfl-router-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.mfl-router-path {
  background: var(--forest2);
  border: 1px solid var(--forest4);
  border-radius: 12px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.mfl-router-path:hover {
  background: var(--forest3);
  border-color: rgba(200,185,138,0.28);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.mfl-router-path--featured {
  background: linear-gradient(160deg, rgba(92,138,110,0.10) 0%, rgba(200,185,138,0.10) 100%);
  border-color: rgba(200,185,138,0.35);
}
.mfl-router-path-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.mfl-router-path-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 14px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.mfl-router-path-title em {
  color: var(--gold);
  font-style: italic;
}
.mfl-router-path-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cream-dim);
  margin: 0 0 20px;
}
.mfl-router-path-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex-grow: 1;
}
.mfl-router-path-bullets li {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--cream-faint);
  padding: 6px 0 6px 18px;
  position: relative;
  line-height: 1.45;
}
.mfl-router-path-bullets li::before {
  content: "◈";
  position: absolute;
  left: 0;
  color: var(--gold-dk);
  font-size: 0.7rem;
  top: 8px;
}
.mfl-router-path-cta {
  text-align: center;
  width: 100%;
  padding: 14px 20px;
  font-size: 0.82rem;
}
@media (max-width: 900px) {
  .mfl-router-paths {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mfl-router-path {
    padding: 28px 24px;
  }
}

.mfl-booking-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-booking-option {
  padding: 48px 40px;
  background: var(--forest2);
  display: flex;
  flex-direction: column;
  transition: background 0.3s, box-shadow 0.3s;
}
.mfl-booking-option:hover {
  background: var(--forest3);
  box-shadow: inset 0 0 0 1px rgba(200,185,138,0.10);
}
.mfl-booking-option-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 16px;
  transition: color 0.3s;
}
.mfl-booking-option:hover .mfl-booking-option-title {
  color: var(--gold-lt);
}
.mfl-booking-option-desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
  margin-bottom: 24px;
  flex: 1;
}
.mfl-booking-option-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.mfl-booking-option-details span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 14px;
  border: 1px solid var(--line);
  background: rgba(200,185,138,0.04);
}

/* ============================================================
   CONTACT CARDS — Book Now / Contact pages
   ============================================================ */
.mfl-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-contact-card {
  padding: 40px 32px;
  background: var(--forest2);
  text-align: center;
  /* Belt + suspenders for narrow viewports — without these, a long
     email like lincoln@montanaflyfishinglodge.com forces the card's
     min-content width past a 375px viewport. The .mfl-contact-card-value
     rule below also has overflow-wrap: anywhere; this min-width:0 is
     the flex/grid-item escape hatch that lets that wrapping kick in
     when the card is a grid child. */
  min-width: 0;
}
.mfl-contact-card-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 12px;
}
.mfl-contact-card-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  transition: color 0.2s;
  /* Long emails (lincoln@montanaflyfishinglodge.com is 35 chars) need
     to break across lines on narrow viewports rather than force the
     card past the viewport's right edge. anywhere is the modern
     non-blocking break; word-break is the older Safari fallback. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mfl-contact-card-value:hover {
  color: var(--gold-light);
}
.mfl-contact-card-note {
  font-size: 0.85rem;
  color: var(--cream-faint);
  font-weight: 400;
}

/* ============================================================
   FAQ — Card-based Q&A items
   ============================================================ */
.mfl-booking-faq,
.mfl-faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 48px;
}
.mfl-faq-item {
  padding: 32px 36px;
  background: var(--hybrid2);
  transition: background 0.3s, box-shadow 0.3s;
}
.mfl-faq-item:hover {
  background: var(--hybrid3);
  box-shadow: inset 0 0 0 1px rgba(200,185,138,0.10);
}
.mfl-faq-q {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  transition: color 0.3s;
}
.mfl-faq-item:hover .mfl-faq-q {
  color: var(--gold-lt);
}
.mfl-faq-a {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
  transition: color 0.3s;
}
.mfl-faq-item:hover .mfl-faq-a {
  color: var(--cream);
}
/* Forest section context */
.mfl-section .mfl-faq-item {
  background: var(--forest2);
}
.mfl-section .mfl-faq-item:hover {
  background: var(--forest3);
}
/* Nested inside booking-option containers */
.mfl-booking-option .mfl-faq-list {
  border: none;
  margin-top: 24px;
}
.mfl-booking-option .mfl-faq-item {
  background: var(--forest3);
}
.mfl-booking-option .mfl-faq-item:hover {
  background: var(--forest4);
}

/* ============================================================
   POLICY GRID — 2×2 cards for booking policies
   ============================================================ */
.mfl-policy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-policy-card {
  padding: 40px 36px;
  background: var(--forest2);
}
.mfl-policy-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}
.mfl-policy-detail {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--cream-dim);
  font-weight: 400;
}

/* ============================================================
   WATERS COLUMNS — 3-col link list for rivers/creeks
   ============================================================ */
.mfl-waters-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-waters-col {
  padding: 36px 32px;
  background: var(--forest2);
}
.mfl-waters-col-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}
.mfl-water-link {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--cream);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s;
}
.mfl-water-link:last-child {
  border-bottom: none;
}
a.mfl-water-link:hover {
  color: var(--gold);
}
.mfl-water-link.no-link {
  color: var(--cream-dim);
}

/* ============================================================
   SEASON GRID — 3-col seasonal fishing cards
   ============================================================ */
.mfl-season-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-season-card {
  padding: 40px 32px;
  background: var(--hybrid2);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}
.mfl-season-card:hover {
  background: var(--hybrid3);
  box-shadow: inset 0 0 0 1px rgba(200,185,138,0.12), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.mfl-section .mfl-season-card { background: var(--forest2); }
.mfl-section .mfl-season-card:hover { background: var(--forest3); }
.mfl-season-card:hover .mfl-season-title { color: var(--gold-lt); }
.mfl-season-card:hover .mfl-season-desc { color: var(--cream); }
.mfl-season-month {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.mfl-season-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 16px;
  transition: color 0.3s;
}
.mfl-season-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--cream-dim);
  font-weight: 400;
  transition: color 0.3s;
}

/* ============================================================
   TEAM GRID — Lodge Team page
   ============================================================ */
.mfl-team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-team-card {
  padding: 40px 36px;
  background: var(--forest2);
}
.mfl-team-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.mfl-team-role {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.mfl-team-bio {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--cream-dim);
  font-weight: 400;
}

/* Founder-page link on the owner cards (GEO Wave 2.3) */
.mfl-team-readmore {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mfl-team-readmore:hover {
  color: var(--gold-lt);
}

/* ============================================================
   GALLERY GRID — Guest Gallery page
   ============================================================ */
.mfl-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 48px;
  border: 1px solid var(--line);
}
.mfl-gallery-placeholder {
  padding: 60px 36px;
  background: var(--forest2);
  text-align: center;
  transition: background 0.3s;
}
.mfl-gallery-placeholder:hover {
  background: var(--forest3);
}
.mfl-gallery-placeholder-icon {
  color: var(--gold-dk);
  margin-bottom: 20px;
}
.mfl-gallery-placeholder-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 8px;
}
.mfl-gallery-placeholder-sub {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cream-dim);
  font-weight: 400;
  max-width: 280px;
  margin: 0 auto;
}

/* ============================================================
   FLOATING ORVIS BADGE — site-wide, bottom-left
   ============================================================ */
.mfl-orvis-badge {
  position: fixed;
  left: 28px;
  bottom: 28px;
  width: 180px;
  height: 107px;
  z-index: 9998;
  display: block;
  perspective: 1200px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
  transition: transform 0.3s ease;
}
.mfl-orvis-badge:hover {
  transform: scale(1.06);
}
.mfl-orvis-badge-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: mfl-orvis-flip 6s infinite linear;
}
.mfl-orvis-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.mfl-orvis-face.back {
  transform: rotateY(180deg);
}
@keyframes mfl-orvis-flip {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
/* Pause animation on hover so user can read */
.mfl-orvis-badge:hover .mfl-orvis-badge-flipper {
  animation-play-state: paused;
}
@media (max-width: 768px) {
  .mfl-orvis-badge {
    width: 120px;
    height: 71px;
    left: 16px;
    bottom: 16px;
    /* Smooth hide-when-scrolled, mirroring the FAB convention in
       responsive.css. The badge is a trust signal; staying glued to
       the corner above form CTAs / package CTAs / footer content
       is a worse UX than letting it fade after the user scrolls
       past the hero. body.nav-scrolled is added by header scroll
       listener (assets/js/navigation.js) once the user scrolls past
       the navbar threshold. */
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  /* Shrink-instead-of-hide on mobile scroll — Lincoln 2026-05-09.
     Previous behavior fully faded the badge via opacity:0 +
     pointer-events:none. The credential is too valuable to hide
     entirely; shrinking to 60% keeps it visible + clickable
     through to Orvis without obscuring content. Anchored to the
     bottom-left corner so the shrink pulls toward the edge,
     not toward the middle of the viewport. */
  .nav-scrolled .mfl-orvis-badge {
    transform: scale(0.6);
    transform-origin: left bottom;
  }
  .nav-scrolled .mfl-orvis-badge:hover {
    transform: scale(0.66);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mfl-orvis-badge-flipper {
    animation: none;
  }
}
@media print {
  .mfl-orvis-badge { display: none; }
}

/* ============================================================
   RIVER HERO — photo background with dark overlay
   ============================================================
   Applied to .mfl-hero--subpage.mfl-hero--photo. The hero-bg div
   gets an inline background-image per template; the overlay is
   handled here via a pseudo-element so the photo remains visible
   but text stays legible on the dark forest brand palette.
*/
/* Ghost button in hero context — needs more contrast against photo backgrounds.
   The base .btn-ghost uses transparent bg + 20%-opacity cream border, which
   reads beautifully over flat dark sections but vanishes against busy photo
   hero backgrounds. Here we give it a frosted-glass backdrop + stronger border
   so the text stays legible without losing the secondary-CTA character. */
.mfl-hero-actions .btn-ghost {
  background: rgba(13,26,20,0.4);
  border-color: var(--cream-dim);
  color: var(--cream);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mfl-hero-actions .btn-ghost:hover {
  background: rgba(200,185,138,0.15);
  border-color: var(--gold);
  color: var(--cream);
}

/* Single canonical photo-hero overlay. Applied to any subpage hero so text
   stays legible on the dark-forest brand palette. Previously this overlay
   lived in TWO places (here + inline div in the mfl_river_hero_img helper),
   causing visible darkening on pages using .mfl-hero--photo. One source now. */
.mfl-hero--subpage .mfl-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,26,20,0.45) 0%,
    rgba(13,26,20,0.30) 40%,
    rgba(13,26,20,0.60) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.mfl-hero--photo {
  min-height: 420px;
}
.mfl-hero--photo .mfl-hero-texture {
  opacity: 0.4; /* subtle linen over photo, not competing */
}
/* Dark outline + glow on hero copy over a photo background. The gradient
   overlay above guarantees AVERAGE contrast holds, but a photo's luminance
   varies pixel-to-pixel: a bright cloud/sky/water highlight directly
   behind an individual glyph can still measure well under WCAG's 3:1
   large-text floor even where the region-average passes comfortably
   (2026-09-03 vet finding on the Patagonia sibling theme, uxui-platform-
   expert: worst-pixel sampling found contrast as low as 1.58:1 against
   --cream despite an average-based reading of 3.45-7.82:1 at the same
   widths, and the overlay gradient's own weakest point, 30% opacity at
   40% down, lands almost exactly where the H1 sits. This theme shares
   the identical overlay gradient math, so the same finding/fix applies
   here; a local repro against a real MFL hero photo (page-about-us.php's
   twilight photo) found that specific photo's own margin already safe,
   but confirmed the underlying fragility is real and photo-dependent).
   A FIRST attempt used only a soft blurred drop-shadow
   (0 1px 3px + 0 4px 20px) and was re-verified INSUFFICIENT on the
   Patagonia sibling: a blurred shadow's opacity falls off with distance
   from the glyph and sits mostly behind it rather than forming a solid
   ring at the edge, so it still measured as low as 2.14:1 (cream) and
   1.40:1 (gold) at some widths, still under the 3:1 floor.
   Fixed by adding a genuine solid outline: four zero-blur, high-opacity
   shadows offset in each cardinal direction form a true dark ring
   immediately touching every glyph edge, at essentially full opacity (no
   blur falloff to dilute it), which holds regardless of what's behind
   that pixel, so unlike raising the overlay's opacity it doesn't need
   re-tuning per photo. The original soft shadow/glow is kept underneath
   for depth so the outline doesn't read as a hard sticker edge. Applies
   to every .mfl-hero--photo hero, --subpage or not, since the
   .mfl-hero-sub frosted-chip background below is --subpage-only and
   never covers .mfl-hero-eyebrow/-h1 either way.
   A SECOND round of scrutiny (brand-console-guardian, real screenshots
   at desktop/mobile/6x macro zoom on the two brightest hero photos in
   the fleet) found this outline, at full 0.85 opacity and zero blur,
   reads fine at normal browsing scale but resolves at close inspection
   into a hard, continuous black ring around each glyph: more "decal/
   coloring-book" than the halo WCAG's own G18/G148 technique calls
   for, and out of step with this brand's documented "elevated,
   authentic Montana, not resort Montana" positioning. TWO successive
   attempts to soften it (0.6px blur/0.6 opacity, then 0.35px blur/0.72
   opacity) were each re-verified with the same worst-pixel methodology
   on the Patagonia sibling theme and each measurably eroded the safety
   margin instead of holding it: the first left the gold "Rates" em at
   a razor 3.30-3.33:1 on that theme's own Packages photo (only ~10%
   above the floor), and the second, meant to compensate, actually
   dropped below 3:1 outright at 2 widths (2.75-2.86:1) on the SAME
   photo/breakpoint pair, because less blur reaches less far under a
   thin stroke (a serif "t" crossbar, an italic "e") than the opacity
   increase could make up for. This isn't a fixed constant to tune
   once; it's photo- and glyph-shape-dependent, and a soft-shadow-only
   reformulation didn't converge on a value both safe AND visibly soft
   across the real photos this fix has to survive. Reverted to the
   full-strength values below (already independently re-verified at
   6.7-13.9:1 on this theme and 9.0-16.4:1 on the Patagonia sibling
   before any softening was attempted) rather than ship a self-measured
   accessibility regression for a subjective visual preference. The
   brand concern is real and disclosed, not silently dropped: softening
   this further safely would need a different lever than the outline's
   own opacity/blur, e.g. a stronger glow underneath (the two layers
   below already do that job, just not enough on their own) or moving
   the crop/photo choice off this specific bright patch, not a blind
   pixel-value cut. */
.mfl-hero--photo .mfl-hero-eyebrow,
.mfl-hero--photo .mfl-hero-h1,
.mfl-hero--photo .mfl-hero-sub {
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85),
     1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85),
     1px  1px 0 rgba(0,0,0,0.85),
     0     0  6px rgba(0,0,0,0.6),
     0     4px 20px rgba(0,0,0,0.45);
}

/* ============================================================
   PHOTO STRIP — horizontal scrollable river gallery
   ============================================================
   Sits between prose sections. Dark forest background, gold
   accents, cream captions. A single horizontal scroll row at all
   breakpoints (the container is keyboard-focusable; arrow keys
   scroll it once focused).
*/
.mfl-photo-strip {
  padding: 48px 0;
  background: var(--forest-deep, #080f0b);
  position: relative;
  overflow: hidden;
}
.mfl-photo-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,185,138,0.04) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 100%, rgba(92,138,110,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.mfl-photo-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.mfl-photo-strip-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.mfl-photo-strip-eyebrow {
  font-family: var(--font-body);
  font-size:  12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark, #9e8f5f);
}
.mfl-photo-strip-count {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  white-space: nowrap;
}
.mfl-photo-strip-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  color: var(--cream, #e8e0d0);
  margin-bottom: 24px;
}
.mfl-photo-strip-title em {
  font-style: italic;
  color: var(--gold, #c8b98a);
}
.mfl-photo-strip-scroll-wrap {
  position: relative;
}
/* Right/left edge fades hint that more photos are offscreen.
   Baseline (no JS needed): left fade hidden, right fade shown — a
   safe default since every strip scrolls left-to-right from a true
   start. JS (assets/js/photo-strip.js) then adds/removes is-scrolled
   and is-at-end as the user actually moves through the strip, so the
   fades track the real scroll position instead of a static guess. A
   strip that doesn't overflow at all gets is-at-end immediately on
   load and never shows a right fade either. */
.mfl-photo-strip-scroll-wrap::before,
.mfl-photo-strip-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 16px;
  width: 64px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}
.mfl-photo-strip-scroll-wrap::before {
  left: 0;
  background: linear-gradient(to left, transparent, var(--forest-deep, #080f0b));
}
.mfl-photo-strip-scroll-wrap::after {
  right: 0;
  background: linear-gradient(to right, transparent, var(--forest-deep, #080f0b));
  opacity: 1;
}
.mfl-photo-strip-scroll-wrap.is-scrolled::before {
  opacity: 1;
}
.mfl-photo-strip-scroll-wrap.is-at-end::after {
  opacity: 0;
}
.mfl-photo-strip-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,185,138,0.3) transparent;
}
.mfl-photo-strip-scroll:focus-visible {
  outline: 2px solid var(--gold, #c8b98a);
  outline-offset: 4px;
}
.mfl-photo-strip-scroll::-webkit-scrollbar {
  height: 4px;
}
.mfl-photo-strip-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.mfl-photo-strip-scroll::-webkit-scrollbar-thumb {
  background: rgba(200,185,138,0.3);
  border-radius: 2px;
}
.mfl-photo-card {
  flex: 0 0 auto;
  width: 320px;
  scroll-snap-align: start;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(200,185,138,0.12);
  background: var(--forest2, #142b1c);
  transition: border-color 0.3s;
}
.mfl-photo-card:hover {
  border-color: rgba(200,185,138,0.3);
}
.mfl-photo-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.mfl-photo-card-caption {
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
}
/* Desktop: larger cards */
@media (min-width: 768px) {
  .mfl-photo-card {
    width: 380px;
  }
  .mfl-photo-card img {
    height: 260px;
  }
}

/* ============================================================
   NATIVE FORMS — inquiry + contact forms on WordPress pages
   ============================================================
   These replace the old iframe embeds. Form inputs styled to match
   the dark forest brand palette. All form state is handled by
   vanilla JS that POSTs directly to the Lodge OS API — no iframe,
   no cross-domain cookie issues, gclid/UTM captured natively.
*/
.mfl-form-label {
  display: block;
  font-family: var(--font-body);
  font-size:  12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 4px;
}
.mfl-form-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--forest);
  border: 1px solid var(--forest4);
  border-radius: 4px;
  color: var(--cream);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  /* Tell the browser this input lives on a dark surface so its native
     UI (date-picker calendar icon, select arrows, autofill chip) renders
     with light foreground colors. Without this, the WebKit/Blink date-
     picker icon is dark-on-dark and effectively invisible — that was
     "you can't see the calendar date picker" on /contact-us/ at cutover. */
  color-scheme: dark;
}
.mfl-form-input:focus {
  border-color: var(--gold-dark);
}
.mfl-form-input::placeholder {
  color: var(--cream-faint);
}
.mfl-form-input option {
  background: var(--forest2);
  color: var(--cream);
}
/* Calendar picker icon contrast.
 *
 * GOTCHA: this used to apply `filter: invert(...)` to the picker
 * indicator, which produced a DARKER icon, not a lighter one. Why:
 * `.mfl-form-input` above already sets `color-scheme: dark`, which
 * tells the browser to render the native calendar icon for a dark
 * surface — Chrome/Safari/Edge produce a clean white icon. Layering
 * `filter: invert(1)` on top then re-inverted that white icon back
 * to black. Removing the filter entirely is the fix; the browser's
 * native dark-mode rendering is correct and crisp.
 *
 * Hover ramp uses a subtle gold tint (sepia + hue-rotate of the
 * already-light icon) to match the form's gold accent. No invert
 * here either — same reason. */
.mfl-form-input[type="date"]::-webkit-calendar-picker-indicator,
.mfl-form-input[type="time"]::-webkit-calendar-picker-indicator,
.mfl-form-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.mfl-form-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.mfl-form-input[type="time"]::-webkit-calendar-picker-indicator:hover,
.mfl-form-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: sepia(0.5) saturate(3) hue-rotate(15deg) brightness(1.15);
}

/* Visually-hidden text — read by screen readers, invisible on screen. */
.mfl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Field label + inline "i" info-toggle button, and the mini tooltip
   panel it reveals. Used on the required inquiry-form fields where
   guests are most likely to guess wrong (length of stay, arrival
   date, angler counts) — a click reveals a short explanation instead
   of guests abandoning the form or submitting a wrong default. */
.mfl-field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.mfl-field-label-row .mfl-form-label {
  margin-bottom: 0;
}
.mfl-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-dk);
  background: transparent;
  color: var(--gold-dk);
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mfl-info-btn:hover,
.mfl-info-btn:focus-visible,
.mfl-info-btn[aria-expanded="true"] {
  border-color: var(--gold);
  color: var(--gold);
}
.mfl-info-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.mfl-field-tooltip {
  background: var(--forest);
  border: 1px solid var(--forest4);
  border-left: 2px solid var(--gold-dk);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 6px 0 10px;
  color: var(--cream-dim);
  font-size: 12px;
  line-height: 1.6;
}

/* ============================================================
   SIBLING PAGE NAVIGATION
   Lateral nav buttons between related pages in the same group.
   ============================================================ */
.mfl-sibling-nav {
  position: relative;
  padding: 56px 0 64px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(92,138,110,0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--forest) 0%, var(--forest2) 100%);
}
.mfl-sibling-nav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.mfl-sibling-nav-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 24px;
}
.mfl-sibling-nav-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.mfl-sibling-nav-buttons .btn-ghost {
  padding: 10px 24px;
  font-size: 0.75rem;
}
@media (max-width: 600px) {
  .mfl-sibling-nav-buttons {
    gap: 8px;
  }
  .mfl-sibling-nav-buttons .btn-ghost {
    padding: 10px 16px;
    font-size: 0.7rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Packages page — Choose Your Package (rewritten 2026-04-22)
   Cards + Dual Lodge detail + Single-Lodge unified calc + Compare accordion
   ════════════════════════════════════════════════════════════════════ */

/* ─── Section shared ─────────────────────────────────────────────── */
.mfl-pkg-picker {
  padding-top: 48px;
  padding-bottom: 32px;
}
.mfl-pkg-picker-intro {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px !important;
  text-align: center;
}
.mfl-section-transition {
  height: 60px;
  position: relative;
}
.mfl-section-transition-rule {
  position: absolute;
  left: 50%;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(200,185,138,0.3) 50%, transparent);
}
.mfl-section-divider {
  max-width: 1000px;
  margin: 40px auto;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,185,138,0.2), transparent);
}

/* ─── Decision Cards (Picker) ───────────────────────────────────── */
.mfl-pkg-cards {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.mfl-pkg-card {
  background: var(--forest-3, #1a3523);
  border: 1px solid rgba(200,185,138,0.15);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.mfl-pkg-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-dk, #9e8f5f);
  box-shadow: 0 16px 32px rgba(0,0,0,0.3);
}
.mfl-pkg-card.signature {
  border-color: var(--gold-dk, #9e8f5f);
  background: linear-gradient(180deg, var(--forest-3, #1a3523) 0%, #1d3a27 100%);
}
.mfl-pkg-card.signature:hover { border-color: var(--gold, #c8b98a); }

.mfl-pkg-card-img {
  /* 150px (was 220px, 2026-05-01): the label sits at bottom:20px and
     uses ~60-70px of vertical space (kicker line + name line). The
     SIGNATURE badge sits at top:14px and is ~24px tall. 150px leaves
     a comfortable ~30px gap between badge and label while removing
     ~70px of empty gradient space Lincoln flagged. */
  height: 150px;
  position: relative;
  overflow: hidden;
}
.mfl-pkg-card-img.sfl {
  background:
    linear-gradient(180deg, rgba(13,26,20,0.1) 40%, rgba(13,26,20,0.92) 100%),
    linear-gradient(135deg, #2a3a24 0%, #1a3523 100%);
}
.mfl-pkg-card-img.mfl {
  background:
    linear-gradient(180deg, rgba(13,26,20,0.1) 40%, rgba(13,26,20,0.92) 100%),
    linear-gradient(135deg, #1e3a28 0%, #0d1a14 100%);
}
.mfl-pkg-card-img.dual {
  background:
    linear-gradient(180deg, rgba(13,26,20,0.1) 40%, rgba(13,26,20,0.92) 100%),
    linear-gradient(135deg, #264a34 0%, #2a3a24 50%, #1a3523 100%);
}
.mfl-signature-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--gold, #c8b98a);
  color: var(--forest-deep, #080f0b);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mfl-pkg-card-img-label {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
}
.mfl-pkg-card-img-label .kicker {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dk, #9e8f5f);
  margin-bottom: 6px;
}
.mfl-pkg-card.signature .mfl-pkg-card-img-label .kicker { color: var(--gold, #c8b98a); }
.mfl-pkg-card-img-label .name {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--cream, #e8e0d0);
  font-weight: 700;
  line-height: 1.2;
}
.mfl-pkg-card-img-label .name em { color: var(--gold, #c8b98a); font-style: italic; }

.mfl-pkg-card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mfl-pkg-card-desc {
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 20px;
  min-height: 76px;
}
.mfl-pkg-card-stats {
  margin-bottom: 20px;
  padding-top: 4px;
  border-top: 1px solid rgba(200,185,138,0.1);
}
.mfl-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(200,185,138,0.08);
  font-size: 0.85rem;
  gap: 12px;
}
.mfl-stat-row:last-child { border-bottom: none; }
.mfl-stat-label { color: var(--cream-dim, rgba(232,224,208,0.6)); flex-shrink: 0; }
.mfl-stat-value {
  color: var(--cream, #e8e0d0);
  font-weight: 600;
  text-align: right;
}
.mfl-stat-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--cream-faint, rgba(232,224,208,0.28));
  margin-top: 3px;
  font-style: italic;
  letter-spacing: 0.02em;
}
.mfl-pkg-card-price-block {
  padding: 16px 0 4px;
  border-top: 1px solid rgba(200,185,138,0.15);
  margin-bottom: 20px;
}
.mfl-pkg-card-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--gold, #c8b98a);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.mfl-pkg-card-price-sub {
  color: var(--cream-faint, rgba(232,224,208,0.28));
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}
.mfl-pkg-card-cta {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.mfl-pkg-card-btn { flex: 1; text-align: center; }
.mfl-pkg-card-btn-ghost { flex-shrink: 0; }

@media (max-width: 900px) {
  .mfl-pkg-cards { grid-template-columns: 1fr; gap: 20px; }
}

/* At narrow viewports the two CTAs in a package card (e.g. "See the
   Experience" + "Itinerary") don't both fit horizontally — the ghost
   button's flex-shrink:0 + 36px button padding pushes its text past
   the card's right edge ("Itinera…" clipped). Stack them vertically.
   Matches the established convention used by .mfl-hero-actions and
   .mfl-booking-actions at the same breakpoint. */
@media (max-width: 600px) {
  .mfl-pkg-card-cta {
    flex-direction: column;
    gap: 10px;
  }
  .mfl-pkg-card-btn-ghost {
    flex-shrink: 1;
    text-align: center;
  }
  .mfl-pkg-card-btn,
  .mfl-pkg-card-btn-ghost {
    width: 100%;
  }
}

/* ─── Detail sections ───────────────────────────────────────────── */
.mfl-detail-section {
  padding: 64px 24px;
  position: relative;
  z-index: 1;
  scroll-margin-top: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.mfl-detail-inner { max-width: 1200px; margin: 0 auto; }
.mfl-detail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(200,185,138,0.15);
}
.mfl-detail-header-text { flex: 1; min-width: 300px; }
.mfl-detail-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dk, #9e8f5f);
  margin-bottom: 6px;
}
.mfl-detail-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--cream, #e8e0d0);
  line-height: 1.15;
  margin: 0;
}
.mfl-detail-title em { color: var(--gold, #c8b98a); font-style: italic; }
.mfl-jump-to-top {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-faint, rgba(232,224,208,0.28));
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid rgba(200,185,138,0.15);
  border-radius: 2px;
  transition: all 0.2s;
}
.mfl-jump-to-top:hover {
  color: var(--gold, #c8b98a);
  border-color: var(--gold-dk, #9e8f5f);
}

/* ─── Dual Lodge detail ─────────────────────────────────────────── */
.mfl-dual-detail-header {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 48px;
}
.mfl-dual-detail-intro .mfl-ctrl-label { margin-top: 20px; display: block; }
.mfl-nights-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.mfl-nights-btn {
  padding: 12px 22px;
  background: rgba(232,224,208,0.06);
  border: 1px solid rgba(200,185,138,0.25);
  border-radius: 4px;
  color: var(--cream, #e8e0d0);
  font-family: 'Source Sans 3', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  text-align: left;
}
.mfl-nights-btn:hover {
  background: rgba(200,185,138,0.12);
  border-color: var(--gold-dk, #9e8f5f);
}
.mfl-nights-btn.active {
  background: var(--gold, #c8b98a);
  color: var(--forest-deep, #080f0b);
  border-color: var(--gold, #c8b98a);
  font-weight: 600;
}
.mfl-nights-btn .sub {
  display: block;
  font-size: 0.7rem;
  margin-top: 2px;
  opacity: 0.8;
}
.mfl-nights-btn .ext-tag {
  color: var(--gold, #c8b98a);
  font-style: normal;
  margin-left: 4px;
}
.mfl-nights-btn.active .ext-tag { color: var(--forest-deep, #080f0b); }
.mfl-package-lead {
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 16px;
}
.mfl-package-stats {
  color: var(--cream, #e8e0d0);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
  font-weight: 300;
}
.mfl-package-badge {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(200,185,138,0.12);
  color: var(--gold, #c8b98a);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid rgba(200,185,138,0.3);
  border-radius: 2px;
  margin-bottom: 16px;
}
.mfl-dual-price-block {
  background: linear-gradient(180deg, rgba(26,53,35,0.9) 0%, rgba(20,43,28,0.9) 100%);
  border: 1px solid rgba(200,185,138,0.3);
  border-radius: 4px;
  padding: 28px;
  text-align: center;
}
.mfl-dual-price-from {
  color: var(--gold-dk, #9e8f5f);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.mfl-dual-price-val {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: var(--gold, #c8b98a);
  font-weight: 700;
  line-height: 1;
}
.mfl-dual-price-per {
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.82rem;
  margin-top: 8px;
  margin-bottom: 20px;
}
.mfl-dual-cta { display: inline-block; width: 100%; }
.mfl-dual-footer-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 20px;
}

@media (max-width: 900px) {
  .mfl-dual-detail-header { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Lodge Switcher (Single-Lodge Stay) ────────────────────────── */
.mfl-lodge-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 36px;
  padding: 8px;
  background: rgba(20,43,28,0.5);
  border: 1px solid rgba(200,185,138,0.15);
  border-radius: 6px;
}
.mfl-lodge-btn {
  padding: 20px 24px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-family: 'Source Sans 3', sans-serif;
  cursor: pointer;
  transition: all 0.25s;
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}
.mfl-lodge-btn:hover:not(.active) {
  background: rgba(200,185,138,0.04);
  border-color: rgba(200,185,138,0.2);
  color: var(--cream, #e8e0d0);
}
.mfl-lodge-btn.active {
  background: linear-gradient(135deg, rgba(200,185,138,0.12), rgba(200,185,138,0.04));
  border-color: var(--gold-dk, #9e8f5f);
  color: var(--cream, #e8e0d0);
}
.mfl-lodge-btn-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all 0.25s;
}
.mfl-lodge-btn[data-lodge="mfl"] .mfl-lodge-btn-mark {
  background: linear-gradient(135deg, #1e3a28, #0d1a14);
  color: var(--gold-dk, #9e8f5f);
  border: 1px solid rgba(200,185,138,0.3);
}
.mfl-lodge-btn[data-lodge="sfl"] .mfl-lodge-btn-mark {
  background: linear-gradient(135deg, #2a3a24, #1a3523);
  color: var(--sage-light, #7aab8a);
  border: 1px solid rgba(122,171,138,0.3);
}
.mfl-lodge-btn.active .mfl-lodge-btn-mark {
  color: var(--gold, #c8b98a);
  border-color: var(--gold, #c8b98a);
}
.mfl-lodge-btn-text { flex: 1; }
.mfl-lodge-btn-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 3px;
  display: block;
  color: inherit;
}
.mfl-lodge-btn-name em { color: var(--gold, #c8b98a); font-style: italic; }
.mfl-lodge-btn-sub {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-faint, rgba(232,224,208,0.28));
  display: block;
}
.mfl-lodge-btn.active .mfl-lodge-btn-sub { color: var(--gold-dk, #9e8f5f); }
.mfl-lodge-btn-price {
  color: var(--gold, #c8b98a);
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Single-Lodge switcher — stack to 1 column at mobile. The default
   2-col grid + each button's content (40px circular mark + 18px gap +
   Playfair name + sub + nowrap price) needs ~330px per button to lay
   out cleanly; on a 375px viewport that splits into ~149px tracks and
   the contents overflow the right edge by ~12px (caught at 2026-05-01
   mobile audit). Stacking gives each button the full row width. */
@media (max-width: 600px) {
  .mfl-lodge-switcher {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mfl-lodge-btn {
    padding: 16px 18px;
    gap: 14px;
  }
}

.mfl-lodge-btn-checkmark {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold, #c8b98a);
  color: var(--forest-deep, #080f0b);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.mfl-lodge-btn.active .mfl-lodge-btn-checkmark { display: flex; }

@media (max-width: 700px) {
  .mfl-lodge-switcher { grid-template-columns: 1fr; }
}

/* ─── Compare accordion (Decision Help) ─────────────────────────── */
.mfl-decision-help {
  padding: 64px 24px 48px;
  position: relative;
  z-index: 1;
}
.mfl-decision-help .mfl-detail-inner { max-width: 1200px; }
.mfl-compare-wrapper { max-width: 1200px; margin: 0 auto; }
.mfl-compare-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: rgba(26,53,35,0.5);
  border: 1px solid rgba(200,185,138,0.2);
  border-radius: 4px;
  color: var(--cream, #e8e0d0);
  font-family: 'Source Sans 3', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.mfl-compare-toggle:hover {
  background: rgba(26,53,35,0.8);
  border-color: var(--gold-dk, #9e8f5f);
}
.mfl-compare-toggle-label {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mfl-compare-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: rgba(200,185,138,0.1);
  border: 1px solid rgba(200,185,138,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #c8b98a);
  font-size: 1rem;
}
.mfl-compare-text { text-align: left; }
.mfl-compare-primary {
  color: var(--cream, #e8e0d0);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mfl-compare-secondary {
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.78rem;
  margin-top: 2px;
}
.mfl-compare-chevron {
  color: var(--gold, #c8b98a);
  font-size: 0.85rem;
  transition: transform 0.3s;
}
.mfl-compare-toggle.open .mfl-compare-chevron { transform: rotate(180deg); }
.mfl-compare-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
}
.mfl-compare-panel.open { max-height: 2400px; }
.mfl-compare-table {
  margin-top: 24px;
  background: var(--forest-3, #1a3523);
  border: 1px solid rgba(200,185,138,0.15);
  border-radius: 4px;
  overflow: hidden;
}
.mfl-compare-row {
  display: grid;
  grid-template-columns: 200px 1fr 1.15fr 1fr;
  border-bottom: 1px solid rgba(200,185,138,0.08);
}
.mfl-compare-row.header {
  background: var(--forest-2, #142b1c);
  border-bottom: 1px solid rgba(200,185,138,0.2);
}
.mfl-compare-row:last-child { border-bottom: none; }
.mfl-compare-cell {
  padding: 14px 20px;
  font-size: 0.9rem;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  text-align: center;
}
.mfl-compare-cell:first-child {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dk, #9e8f5f);
  font-weight: 600;
  background: rgba(20,43,28,0.5);
}
.mfl-compare-row.header .mfl-compare-cell { padding: 22px 20px; }
.mfl-compare-cell.signature {
  background: linear-gradient(180deg, rgba(200,185,138,0.06), transparent);
  position: relative;
}
.mfl-compare-row.header .mfl-compare-cell.signature::before {
  content: "\25C6 SIGNATURE";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--gold, #c8b98a);
}
.mfl-compare-header-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--cream, #e8e0d0);
  margin-bottom: 3px;
}
.mfl-compare-header-title em {
  color: var(--gold, #c8b98a);
  font-style: italic;
}
.mfl-compare-header-sub {
  font-size: 0.72rem;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mfl-compare-cell .ck { color: var(--sage-light, #7aab8a); }
.mfl-compare-cell .dash { color: var(--cream-faint, rgba(232,224,208,0.28)); }
.mfl-compare-cell .hl { color: var(--gold, #c8b98a); font-weight: 600; }
.mfl-compare-footer {
  display: grid;
  grid-template-columns: 200px 1fr 1.15fr 1fr;
  padding: 20px 0;
}
.mfl-compare-footer-cell { padding: 8px 20px; text-align: center; }

@media (max-width: 900px) {
  .mfl-compare-row.header { display: none; }
  .mfl-compare-row { grid-template-columns: 1fr 1fr; }
  .mfl-compare-cell:first-child {
    grid-column: span 2;
    text-align: center;
    background: var(--forest-2, #142b1c);
  }
  .mfl-compare-footer { grid-template-columns: 1fr; gap: 10px; }
}

/* ─── Still Deciding helper strip ───────────────────────────────── */
.mfl-help-strip {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 28px 32px;
  background: rgba(26,53,35,0.4);
  border: 1px solid rgba(200,185,138,0.15);
  border-radius: 4px;
  text-align: center;
}
.mfl-help-strip-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dk, #9e8f5f);
  margin-bottom: 8px;
}
.mfl-help-strip p {
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.95rem;
  margin: 0 auto 16px;
  line-height: 1.6;
  max-width: 600px;
}

/* ─── Collapsible WP content section ────────────────────────────── */
.mfl-wp-content-collapse {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.mfl-wp-content-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  background: rgba(26,53,35,0.6);
  border: 1px solid rgba(200,185,138,0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  list-style: none;
  gap: 16px;
}
.mfl-wp-content-summary::-webkit-details-marker { display: none; }
.mfl-wp-content-summary::marker { content: ""; }
.mfl-wp-content-summary:hover {
  background: rgba(26,53,35,0.85);
  border-color: var(--gold-dk, #9e8f5f);
}
.mfl-wp-content-summary-label {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--cream, #e8e0d0);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mfl-wp-content-summary-hint {
  flex: 1;
  color: var(--cream-dim, rgba(232,224,208,0.6));
  font-size: 0.82rem;
  font-style: italic;
}
.mfl-wp-content-summary-chevron {
  color: var(--gold, #c8b98a);
  font-size: 1rem;
  transition: transform 0.3s;
}
.mfl-wp-content-collapse[open] .mfl-wp-content-summary-chevron {
  transform: rotate(180deg);
}
.mfl-wp-content-body {
  margin-top: 32px;
  padding: 0 24px;
}

@media (max-width: 700px) {
  .mfl-wp-content-summary { padding: 18px 20px; }
  .mfl-wp-content-summary-hint { display: none; }
}

/* ────────────────────────────────────────────────────────────────────
   Packages page — anchor & layout fixes (2026-04-23)

   1. `.mfl-timeline.cols-8` — Dual Lodge 7N timeline needs 8 columns.
      Without this the calculator.css `.mfl-timeline { grid-template-
      columns: repeat(6, 1fr) }` wins and the 7th/8th cards wrap to a
      second row. Mobile (≤900px) still stacks all cards vertically
      via the earlier responsive rule.

   2. Scroll landing fix for /packages/#mfl-pkg-calculator and the
      internal #mfl-dual-detail / #mfl-single-detail anchors — cross-
      page navigation was landing on the picker then the browser's
      scroll-anchoring was re-adjusting after images/fonts loaded,
      giving the impression of "jump, pause, scroll down." Explicit
      scroll-margin-top pins the anchor target, and overflow-anchor:
      none on the section disables post-layout re-adjustment.
   ──────────────────────────────────────────────────────────────── */
.mfl-timeline.cols-8 {
  grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 900px) {
  .mfl-timeline.cols-8 {
    grid-template-columns: 1fr;
  }
}

.mfl-packages-section {
  overflow-anchor: none;
}
#mfl-pkg-calculator {
  scroll-margin-top: 100px;
}
#mfl-dual-detail,
#mfl-single-detail {
  scroll-margin-top: 100px;
}

/* Compact section variant — used for the page-bottom Still Deciding
   block so it doesn't need the full 100px top/bottom padding of a
   regular content section. */
.mfl-section.mfl-section--compact {
  padding: 48px 24px;
  position: relative;
  z-index: 1;
}
.mfl-section.mfl-section--compact .mfl-help-strip {
  position: relative;
  z-index: 2;
}

/* Italic gold "Defined" in the All-Inclusive Defined accordion label —
   matches the brand pattern used in section titles like "Make the
   <em>Right Call</em>". */
.mfl-wp-content-summary-label em {
  color: var(--gold, #c8b98a);
  font-style: italic;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-left: 4px;
}