/* ============================================================
   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 — 3-column grid (homepage)
   ============================================================ */
.mfl-planning-grid {
  display: grid;
  grid-template-columns: repeat(3, 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;
}

/* ============================================================
   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 a {
  display: block;
  padding: 14px 0;
  font-size: 13px;
  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 .sub-menu {
  list-style: none;
  padding: 0 0 0 20px;
}
.mfl-mobile-nav-links .sub-menu a {
  font-size: 11px;
  padding: 10px 0;
  color: var(--cream-faint);
}

/* ============================================================
   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;
}

/* ============================================================
   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;
  }
  .nav-scrolled .mfl-orvis-badge {
    opacity: 0;
    pointer-events: none;
  }
}
@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 */
}

/* ============================================================
   PHOTO STRIP — horizontal scrollable river gallery
   ============================================================
   Sits between prose sections. Dark forest background, gold
   accents, cream captions. Scrollable on mobile, wrapping 2-row
   grid on desktop.
*/
.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-eyebrow {
  font-family: var(--font-body);
  font-size:  12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark, #9e8f5f);
  margin-bottom: 8px;
}
.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 {
  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::-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);
}
/* Belt + suspenders for the calendar picker icon. color-scheme:dark
   above flips the icon for most browsers; older WebKit versions still
   need an explicit filter, and a tinted icon reads better against the
   forest-dark background than a flat-white default. */
.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 {
  filter: invert(0.85) sepia(0.2) saturate(0.6) hue-rotate(15deg);
  cursor: pointer;
  opacity: 0.85;
}
.mfl-form-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ============================================================
   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;
}