/* Whiskey Two Outfitters — custom build (heritage western luxury) */
:root {
  /* Palette derived from logo (brown ink on cream) */
  --ink:            #0d1a2e;
  --ink-2:          #25344c;
  --surface:        #f4f1e9;    /* cream paper */
  --surface-2:      #e6e2d6;    /* deeper cream / band */
  --surface-3:      #060c18;    /* deep espresso for dark bands */
  --accent-fill:    #16294a;    /* saddle brown — button bg */
  --accent-fill-2:  #0d1a2e;    /* saddle brown pressed */
  --accent-text:    #1d3a68;    /* body links — passes 4.5:1 on cream */
  --gold:           #cfa653;    /* wheat/brass accent */
  --gold-2:         #9d7833;    /* darker gold */
  --on-accent:      #f4f1e9;
  --border:         #d5cdb6;    /* hairline in gold family */
  --border-strong:  #a08b58;

  --ramp-100: #faf8f2;
  --ramp-200: #e6e2d6;
  --ramp-300: #cbc2a8;
  --ramp-400: #8d9bb3;
  --ramp-500: #3c5680;
  --ramp-600: #22375c;
  --ramp-700: #132242;
  --ramp-800: #0b1428;
  --ramp-900: #060c18;

  --hero-scrim: 0.38;
  --hero-pos: center 40%;
  --t: 260ms cubic-bezier(.2,.7,.2,1);
  --wrap: 1180px;

  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-serif:   "Cormorant Garamond", Georgia, serif;
  --f-sans:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-eyebrow: "Lato", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-sans) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--ink); }

/* Load fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(56px, 8vw, 112px) 0; position: relative; }
.section--alt { background: var(--surface-2); }
.section--dark { background: var(--surface-3) !important; color: var(--surface) !important; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--surface); }
.section--dark p { color: rgba(244,241,233,0.85); }
.section--tight { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }

/* Overlay motif (topographic contour hairlines) applied to dark bands */
.section--dark::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(
      circle at 20% 30%,
      rgba(244,241,233,0.045) 0 1px,
      transparent 1px 32px
    );
  opacity: 0.85;
}

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.005em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); }
h4 { font-size: 1.05rem; letter-spacing: 0.02em; }
p { margin: 0 0 1em; }
.lead { font-family: var(--f-serif); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.5; font-weight: 400; color: var(--ink-2); }
.eyebrow {
  font-family: var(--f-eyebrow);
  font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--accent-text); font-weight: 600;
  display: inline-block; padding-bottom: 8px; margin-bottom: 18px;
  position: relative;
}
.eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 1px; background: var(--gold); }
.section--dark .eyebrow { color: var(--gold); }
.section--dark .eyebrow::after { background: var(--gold); }
.script { font-family: var(--f-serif); font-style: italic; font-weight: 400; }

.rule { display: inline-block; width: 40px; height: 1px; background: var(--gold); vertical-align: middle; margin: 0 12px; }

/* Signature W² watermark used once */
.wm-w2 {
  position: absolute; right: -3%; bottom: -6%;
  font-family: var(--f-display); font-weight: 800; font-style: italic;
  font-size: clamp(280px, 42vw, 640px);
  line-height: 1; color: var(--ink);
  opacity: 0.05; pointer-events: none;
  z-index: 0; user-select: none;
}
.wm-w2 sup { font-size: 0.5em; vertical-align: super; }

/* ---------- Site header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding: 18px 0; transition: padding var(--t), background var(--t), border-color var(--t), backdrop-filter var(--t);
  background: transparent; border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding: 10px 0;
  background: rgba(244,241,233,0.92);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__logo { display: block; height: 64px; width: auto; transition: height var(--t); filter: drop-shadow(0 2px 12px rgba(0,0,0,0.25)); }
.is-scrolled .brand__logo { height: 46px; filter: none; }
.brand__name { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--surface); letter-spacing: 0.01em; transition: color var(--t); display: none; }
.is-scrolled .brand__name { color: var(--ink); }

.nav-main { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-main a { position: relative; font-family: var(--f-sans); font-weight: 500; font-size: 0.95rem; color: var(--surface); letter-spacing: 0.02em; padding: 6px 0; }
.is-scrolled .nav-main a { color: var(--ink); }
.nav-main a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--gold); transition: right var(--t); }
.nav-main a:hover::after { right: 0; }

.nav-book { display: inline-flex; }

.nav-toggle {
  display: none; background: transparent; border: 0; cursor: pointer; padding: 8px;
  color: var(--surface);
}
.is-scrolled .nav-toggle { color: var(--ink); }

@media (max-width: 900px) {
  .nav-main, .nav-book { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header.nav-open .nav-main {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    position: absolute; top: 100%; left: 0; right: 0; padding: 20px 24px 28px;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .site-header.nav-open .nav-main a { color: var(--ink); font-size: 1.05rem; }
  .site-header.nav-open .nav-book { display: inline-flex; margin-top: 8px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 2px;
  font-family: var(--f-sans); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: all var(--t);
  line-height: 1;
}
.btn--primary { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.btn--primary:hover { background: var(--accent-fill-2); border-color: var(--accent-fill-2); color: var(--on-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,41,74,0.28); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink-2); }
.btn--ghost:hover { background: var(--ink); color: var(--surface); transform: translateY(-2px); }
.section--dark .btn--ghost { color: var(--surface); border-color: var(--gold); }
.section--dark .btn--ghost:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--surface); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(207,166,83,0.32); }
button.btn { line-height: 1; font-family: var(--f-sans) !important; }
button.mb_widget.btn--primary { background: var(--accent-fill) !important; color: var(--on-accent) !important; border-color: var(--accent-fill) !important; }
button.mb_widget.btn--primary:hover { background: var(--accent-fill-2) !important; border-color: var(--accent-fill-2) !important; }

.btn__arrow { display: inline-block; transition: transform var(--t); font-size: 1.1em; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero--photo {
  min-height: min(720px, 88vh);
  display: grid; align-items: end;
  color: var(--surface);
}
.hero--photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: var(--hero-pos, center);
  background-repeat: no-repeat;
  z-index: -2;
}
.hero--photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 55%, rgba(6,12,24,0) 0%, rgba(6,12,24,0.15) 55%, rgba(6,12,24,0.75) 100%),
    linear-gradient(180deg, rgba(6,12,24,0.35) 0%, rgba(6,12,24,0) 40%, rgba(6,12,24,0.7) 100%);
  z-index: -1;
  opacity: var(--hero-scrim, 1);
}
.hero--photo .hero__inner {
  padding: 180px 0 clamp(64px, 10vh, 128px);
  position: relative; z-index: 1;
}
/* Home hero sits over a bright sunset — deepen the lower scrim so the
   headline and sub read cleanly without darkening the sky up top. */
body[data-page="home"] .hero--photo::after {
  background:
    radial-gradient(ellipse 90% 75% at 42% 82%, rgba(6,12,24,0.55) 0%, rgba(6,12,24,0.22) 55%, rgba(6,12,24,0) 100%),
    linear-gradient(180deg, rgba(6,12,24,0.22) 0%, rgba(6,12,24,0.04) 26%, rgba(6,12,24,0.44) 64%, rgba(6,12,24,0.88) 100%) !important;
  opacity: 1 !important;
}
.hero .hero__eyebrow {
  font-family: var(--f-eyebrow); font-size: 0.8rem; letter-spacing: 0.35em;
  color: var(--gold); text-transform: uppercase; font-weight: 500;
  margin-bottom: 24px; display: inline-block;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 5.2rem) !important;
  color: var(--surface); max-width: 18ch;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
  margin-bottom: 20px;
}
.hero__sub {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.4; max-width: 42ch;
  color: rgba(244,241,233,0.94); margin-bottom: 32px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__cta .btn--ghost { color: var(--surface); border-color: rgba(244,241,233,0.7); }
.hero__cta .btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }

/* Hero block (color) for interior pages */
.hero--block {
  min-height: 320px;
  display: flex; align-items: center;
  padding-top: 128px;
  background:
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(207,166,83,0.18), transparent 60%),
    linear-gradient(158deg, var(--ramp-900) 0%, var(--ramp-700) 100%);
  color: var(--surface);
  position: relative; overflow: hidden;
}
.hero--block::before {
  content: "W²";
  font-family: var(--f-display); font-weight: 800; font-style: italic;
  font-size: clamp(260px, 40vw, 520px); line-height: 1;
  color: var(--gold); opacity: 0.08;
  position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  pointer-events: none; user-select: none;
}
.hero--block .hero__eyebrow { color: var(--gold); }
.hero--block h1 { color: var(--surface); font-size: clamp(2.2rem, 4.8vw, 3.6rem) !important; max-width: 20ch; text-shadow: none; }
.hero--block .hero__sub { color: rgba(244,241,233,0.85); text-shadow: none; max-width: 52ch; }
.hero--block .wrap { position: relative; z-index: 1; }
/* Tall home variant of the color hero */
.hero--block--tall { min-height: clamp(480px, 62vh, 640px); padding-top: 160px; padding-bottom: 96px; }
.hero--block--tall .hero__inner { padding: 0; }
.hero--block--tall h1 { font-size: clamp(2.6rem, 6.5vw, 5.2rem) !important; max-width: 18ch; margin-bottom: 22px; }
.hero--block--tall .hero__sub { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.4; max-width: 46ch; margin-bottom: 32px; }
.hero--block--tall .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* Ghost button on the dark color hero */
.hero--block .btn--ghost { color: var(--surface); border-color: rgba(244,241,233,0.7); }
.hero--block .btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }

/* ---------- Intro / Statement ---------- */
.intro-statement { max-width: 780px; margin: 0 auto; text-align: center; }
.intro-statement .eyebrow { display: block; text-align: center; margin-left: auto; margin-right: auto; }
.intro-statement .eyebrow::after { left: 50%; transform: translateX(-50%); }

.intro-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.intro-split img { border-radius: 3px; box-shadow: 0 20px 50px rgba(13,26,46,0.18); }
@media (max-width: 800px) { .intro-split { grid-template-columns: 1fr; } }

/* ---------- Feature package (offering high on home) ---------- */
.feature-package {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px);
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -20px rgba(13,26,46,0.15);
}
.feature-package__media { position: relative; }
.feature-package__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-package__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,12,24,0.35));
  pointer-events: none;
}
.feature-package__body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.feature-package .price {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2rem, 3vw, 2.8rem); color: var(--accent-text);
  margin: 8px 0 4px;
}
.feature-package .price sup { font-size: 0.5em; vertical-align: super; margin-right: 6px; position: relative; top: -6px; }
.feature-package .price small { font-family: var(--f-sans); font-size: 0.55em; font-weight: 500; color: var(--ink-2); margin-left: 4px; letter-spacing: 0.06em; text-transform: uppercase; }
.feature-package ul { list-style: none; padding: 0; margin: 20px 0 28px; }
.feature-package ul li {
  padding: 10px 0; border-bottom: 1px dashed var(--border);
  display: flex; align-items: baseline; gap: 12px;
}
.feature-package ul li::before { content: "✕"; color: var(--gold); font-size: 0.8em; }
.feature-package ul li:last-child { border-bottom: 0; }
@media (max-width: 900px) { .feature-package { grid-template-columns: 1fr; } .feature-package__media { min-height: 260px; } }

/* ---------- Card grid (used in About or Trips list) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.hunt-card {
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.hunt-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -18px rgba(13,26,46,0.22); }
.hunt-card__media { aspect-ratio: 4/3; overflow: hidden; }
.hunt-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.hunt-card:hover .hunt-card__media img { transform: scale(1.04); }
.hunt-card__body { padding: 20px 24px 24px; }
.hunt-card h3 { margin-bottom: 8px; }
.hunt-card p { font-size: 0.95rem; color: var(--ink-2); }
.section--alt .hunt-card h3 { color: var(--ink); }
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }

/* ---------- Values triad ---------- */
.values-triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.values-triad .val { text-align: left; }
.values-triad .val__num {
  font-family: var(--f-display); font-style: italic; font-weight: 600;
  font-size: 2rem; color: var(--gold); display: block; margin-bottom: 8px;
  border-top: 1px solid var(--border); padding-top: 20px;
}
.values-triad .val h3 { font-size: 1.35rem; margin-bottom: 10px; }
.values-triad .val p { color: var(--ink-2); font-size: 0.98rem; }
@media (max-width: 800px) { .values-triad { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Lodging split ---------- */
.lodging-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.lodging-split img { border-radius: 3px; }
.lodging-split .lodging__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.lodging-split .opt {
  padding: 16px 18px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.4);
}
.lodging-split .opt h4 { margin: 0 0 6px; color: var(--accent-text); font-family: var(--f-display); font-size: 1.15rem; }
.lodging-split .opt p { font-size: 0.9rem; color: var(--ink-2); margin: 0; }
@media (max-width: 800px) { .lodging-split { grid-template-columns: 1fr; } }

/* ---------- Photo full-bleed breath ---------- */
.photo-fullbleed {
  padding: 0; height: clamp(360px, 60vh, 560px);
  background-size: cover; background-position: center;
  position: relative;
}
.photo-fullbleed::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,12,24,0.15) 0%, rgba(6,12,24,0.55) 100%);
}
.photo-fullbleed .caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 24px 40px;
  color: var(--surface); z-index: 1; text-align: center;
}
.photo-fullbleed .caption .script { font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--gold); text-shadow: 0 2px 12px rgba(0,0,0,0.5); }

/* ---------- CTA band ---------- */
.cta-banner {
  padding: clamp(64px, 10vw, 128px) 0;
  background: linear-gradient(158deg, var(--ramp-900) 0%, var(--ramp-700) 100%);
  color: var(--surface); text-align: center; position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(244,241,233,0.05) 0 1px, transparent 1px 42px);
  opacity: 0.6;
}
.cta-banner .wrap { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--surface); font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 16px; }
.cta-banner p { max-width: 620px; margin: 0 auto 32px; color: rgba(244,241,233,0.85); font-size: 1.05rem; }
/* Ghost buttons sit on the dark CTA gradient — the default dark ink/border
   is invisible here, so give them a light outline that inverts on hover. */
.cta-banner .btn--ghost { color: var(--surface); border-color: rgba(244,241,233,0.7); }
.cta-banner .btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }

/* ---------- Pricing rows (for FAQ / included) ---------- */
.pricing-rows { list-style: none; padding: 0; margin: 0; }
.pricing-rows li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  gap: 24px;
}
.pricing-rows li:last-child { border-bottom: 0; }
.pricing-rows .label { font-family: var(--f-sans); font-weight: 500; }
.pricing-rows .val { font-family: var(--f-display); color: var(--accent-text); font-weight: 600; }

/* ---------- Guest info blocks ---------- */
.guestinfo-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.guestinfo-blocks .gi {
  padding: 28px 26px; background: var(--surface); border: 1px solid var(--border);
}
.guestinfo-blocks .gi h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--accent-text); }
.guestinfo-blocks .gi ul { padding-left: 18px; margin: 0; }
.guestinfo-blocks .gi li { padding: 5px 0; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 900px) { .guestinfo-blocks { grid-template-columns: 1fr; } }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--border); padding: 22px 0;
}
.faq details:first-of-type { border-top: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 24px;
  transition: color var(--t);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--f-display); font-size: 1.6rem; color: var(--gold);
  transition: transform var(--t); font-weight: 400;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent-text); }
.faq details p { margin-top: 14px; color: var(--ink-2); font-family: var(--f-serif); font-size: 1.05rem; }

/* ---------- Gallery masonry ---------- */
.gallery-grid { column-count: 3; column-gap: 16px; }
.gallery-grid a { display: block; break-inside: avoid; margin-bottom: 16px; overflow: hidden; cursor: zoom-in; position: relative; }
.gallery-grid img { width: 100%; height: auto; transition: transform 500ms var(--t), filter var(--t); }
.gallery-grid a:hover img { transform: scale(1.03); filter: brightness(1.05); }
@media (max-width: 900px) { .gallery-grid { column-count: 2; } }
@media (max-width: 560px) { .gallery-grid { column-count: 1; } }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(6,12,24,0.94);
  z-index: 100; display: none; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-height: 90vh; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.7); }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; background: transparent; border: 1px solid rgba(244,241,233,0.4); color: var(--surface);
  width: 48px; height: 48px; border-radius: 50%; font-family: var(--f-display); font-size: 1.5rem;
  cursor: pointer; transition: all var(--t); display: flex; align-items: center; justify-content: center;
}
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ---------- Contact cards ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-card {
  padding: 32px 28px; background: var(--surface); border: 1px solid var(--border);
  text-align: center;
}
.contact-card h3 { color: var(--accent-text); font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--f-sans); font-weight: 600; margin-bottom: 16px; }
.contact-card a, .contact-card p { font-family: var(--f-serif); font-size: 1.2rem; color: var(--ink); font-style: italic; margin: 0; }
@media (max-width: 800px) { .contact-cards { grid-template-columns: 1fr; } }

/* Contact form */
.contact-form-shell { max-width: 640px; margin: 40px auto 0; }
.contact-form-shell label { display: block; font-family: var(--f-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.contact-form-shell input, .contact-form-shell select, .contact-form-shell textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.6); font-family: var(--f-sans); font-size: 1rem; color: var(--ink);
  margin-bottom: 20px; transition: border-color var(--t); border-radius: 2px;
}
.contact-form-shell input:focus, .contact-form-shell select:focus, .contact-form-shell textarea:focus {
  outline: none; border-color: var(--gold); background: #fff;
}
.contact-form-shell textarea { resize: vertical; min-height: 140px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; }
/* Mallard Bay published-form embed — iframe expands async, reserve height */
.mb-form-live { margin-top: 28px; min-height: 480px; }
.mb-form-live iframe { width: 100% !important; border: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ramp-900); color: var(--surface); padding: 72px 0 32px;
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(207,166,83,0.05) 0 1px, transparent 1px 36px);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; position: relative; z-index: 1; }
.footer-grid img { height: 60px; width: auto; margin-bottom: 18px; }
.footer-grid p { color: rgba(244,241,233,0.75); font-size: 0.95rem; line-height: 1.6; }
.footer-grid h4 { color: var(--gold); font-family: var(--f-sans); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid ul li { padding: 6px 0; }
.footer-grid a { color: rgba(244,241,233,0.75); font-size: 0.95rem; }
.footer-grid a:hover { color: var(--gold); }
.footer-social { display: flex; gap: 12px; margin-top: 12px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid rgba(244,241,233,0.25); color: rgba(244,241,233,0.85); border-radius: 50%;
  transition: all var(--t);
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom { border-top: 1px solid rgba(207,166,83,0.2); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; color: rgba(244,241,233,0.55); font-size: 0.85rem; }
.footer-bottom a { color: rgba(244,241,233,0.55); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--t), transform 700ms var(--t); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Widget hardening — cascade guards */
.hero h1 { font-size: clamp(2.6rem, 6.5vw, 5.2rem) !important; }
.mb_widget[data-outfitter] { font-family: var(--f-sans) !important; }
[id^="mb-widget-"] script, [id^="mb-widget-"] style { display: none !important; }
.section--alt, .section--dark { background: var(--surface-2); }
.section--dark { background: var(--surface-3) !important; }
body { font-family: var(--f-sans) !important; color: var(--ink) !important; background: var(--surface) !important; }

/* Selection */
::selection { background: var(--gold); color: var(--ink); }

/* --- feedback 2026-08-21: header logo was unreadable once the header turned
   cream on scroll. The logo's turkey fan is cream (#f4f1e9-ish), the same value
   as the scrolled header background, so the fan vanished and the mark looked
   half-broken. Switching the scrolled header to the palette's deep espresso
   keeps the single logo file legible in both states and leaves the artwork
   untouched. --- */
.site-header.is-scrolled {
  background: rgba(10,20,32, 0.94);
  border-bottom-color: rgba(207,166,83, 0.34);
}
.is-scrolled .nav-main a,
.is-scrolled .nav-toggle,
.is-scrolled .brand__name { color: var(--surface); }
.is-scrolled .brand__logo { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); }
@media (max-width: 900px) {
  .site-header.nav-open .nav-main {
    background: rgba(10,20,32, 0.97);
    border-bottom-color: rgba(207,166,83, 0.34);
  }
  .site-header.nav-open .nav-main a { color: var(--surface); }
}

/* ===================================================================
   Client brand direction, 2026-08-21 — Navy + Gold.
   Colours sampled from the owner's own Trip Donation flyer; display type
   matched to whiskeysloughs.com, the reference site he named (Cormorant
   Garamond, heavy, uppercase, wide tracking + Lato for body copy).
   =================================================================== */
h1, h2, h3 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.06;
}
h4 { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
h1 { letter-spacing: 0.012em; }
.hero h1 { font-size: clamp(2.3rem, 5.6vw, 4.6rem) !important; max-width: 24ch; }
/* the italic serif accents keep their mixed case so they still read as a
   handwritten aside rather than more display type */
.script, .serif-italic, .hero__sub, .lead,
h1 .script, h2 .script, h1 em, h2 em { text-transform: none; letter-spacing: 0; }
.wm-w2, .hero--block::before { text-transform: none; }

/* gold hairline + diamond divider motif lifted from the flyer */
.rule-gold { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 40px auto; max-width: 420px; }
.rule-gold--diamond { position: relative; }
.rule-gold--diamond::after { content: "\25C6"; position: absolute; left: 50%; top: -0.62em; transform: translateX(-50%); color: var(--gold); font-size: 0.62rem; background: var(--surface); padding: 0 10px; }
.section--dark .rule-gold--diamond::after { background: var(--surface-3); }

/* ---------- Home hero: crossfading photo background ----------
   The owner asked for a scrolling photo background like 4barc.com. Slides
   crossfade with no zoom/pan so nothing gets cropped off the subject. */
.hero--slides { position: relative; }
.hero--slides .hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero--slides .hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
  background-position: var(--pos, center 45%);
  opacity: 0; transition: opacity 1600ms ease-in-out;
}
.hero--slides .hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero--slides .hero__slide { transition: none; }
}

/* ---------- Meet the Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; max-width: 660px; margin: 0 auto; }
.team-card {
  background: var(--ramp-100); border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 30px 26px; text-align: center;
}
.team-card h3 { font-size: 1.12rem; margin: 0 0 6px; color: var(--ink); }
.team-card .role {
  font-family: var(--f-eyebrow); font-size: 0.72rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent-text); font-weight: 700;
}
.team-card .initials {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--gold);
  font-family: var(--f-display); font-weight: 700; font-size: 1.18rem; letter-spacing: 0.04em;
  border: 1px solid rgba(207,166,83,0.45);
}

/* hero eyebrow needs more punch now that it sits on live photography */
.hero--photo .hero__eyebrow {
  color: #e2be74;
  text-shadow: 0 1px 3px rgba(6,12,24,0.95), 0 2px 14px rgba(6,12,24,0.8);
}

/* photo heroes: cream eyebrow reads far better than gold over live sky */
.hero--photo .hero__eyebrow { color: #f4f1e9; text-shadow: 0 1px 3px rgba(6,12,24,0.95), 0 2px 16px rgba(6,12,24,0.85); }


/* --- feedback 2026-08-25: header logo legibility, take two -----------------
   The 2026-08-21 note had the diagnosis backwards. logo.png is dark-brown
   line art with cream fill -- artwork built for a LIGHT background. Composited
   on the navy bar the antlers and the fan's barring both go muddy, which is the
   "logo looks very odd" the owner reported in both scroll states. Fix: put the
   scrolled bar back on cream (where the mark is clean) and give the
   transparent-over-hero state a soft cream halo so the dark strokes separate
   from the photo instead of sinking into it. -------------------------------- */
.site-header.is-scrolled {
  background: rgba(244, 241, 233, 0.94);
  border-bottom-color: rgba(160, 139, 88, 0.38);
}
.is-scrolled .nav-main a,
.is-scrolled .nav-toggle,
.is-scrolled .brand__name { color: var(--ink); }
.is-scrolled .nav-main a:hover { color: var(--accent-text); }

/* top of page: header is transparent over the hero photo */
.brand__logo {
  filter: drop-shadow(0 0 9px rgba(244, 241, 233, 0.7))
          drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
  transition: height var(--t), filter var(--t);
}
/* on the cream bar it needs no lift at all */
.is-scrolled .brand__logo { filter: none; }

@media (max-width: 900px) {
  .site-header.nav-open .nav-main {
    background: var(--surface);
    border-bottom-color: var(--border);
  }
  .site-header.nav-open .nav-main a { color: var(--ink); }
}

/* pull quotes on the team page */
.pull-quote {
  margin: 26px 0 0; padding: 0 0 0 20px;
  border-left: 2px solid var(--gold);
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.5;
  color: var(--ink-2); text-transform: none; letter-spacing: 0;
}
.section--alt .pull-quote { color: var(--ink); }

/* mirrored variant of the two-up so the ranch sections alternate */
.lodging-split--rev > img { order: -1; }

/* a paragraph following a pull quote needs air; without it the quote and the
   next line read as one run-on block (seen on the team page, 2026-08-26) */
.pull-quote + p { margin-top: 22px; }

/* =======================================================
   CLIENT FEEDBACK 2026-08-27/28 — "remove the grainy photos" /
   "replace the grainy images with the quality images".
   Measured cause: the photos were not grainy, our boxes were cropping and
   then upscaling them. Before this block: hero slides lost 72% of the frame,
   the full-bleed bands 70% and 49%, the hunt cards 40% and 34%.
   Fix: every box now matches its photo's own aspect ratio, and sections
   resize around the photo instead of the photo being cut to fit.
   ======================================================= */

/* --- Hero: all three slides are 16:9. Let the hero BE 16:9. --- */
.hero--photo {
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
}
.hero--photo .hero__inner { padding-top: clamp(120px, 18vh, 180px); }

/* On a phone a 16:9 hero is only ~219px tall, which cannot hold the headline
   on top of it. Give the photo its own full band and put the copy underneath
   on solid ground, so the whole frame stays visible and nothing is cropped. */
@media (max-width: 820px) {
  .hero--photo {
    aspect-ratio: auto;
    min-height: 0 !important;
    display: block;
    background: var(--ramp-900, #0d1a2e);
    padding-top: calc(100vw * 9 / 16);
  }
  .hero--photo::before,
  .hero--photo::after {
    inset: 0 0 auto 0;
    height: calc(100vw * 9 / 16);
  }
  .hero--photo .hero__inner { padding: 26px 0 44px; }
  .hero--photo .hero__sub { max-width: none; }
}

/* --- Full-bleed photo bands: a fixed 360-560px strip cropped a portrait
       source to a sliver. Show the whole frame, let the band letterbox. --- */
.photo-fullbleed {
  background-size: contain !important;
  background-repeat: no-repeat;
  background-color: var(--ramp-900, #0d1a2e);
  height: clamp(420px, 64vh, 680px);
}

/* --- Hunt cards: a hard 4:3 window over portrait photos cut 40% away. --- */
.hunt-card__media { aspect-ratio: auto !important; overflow: visible; }
.hunt-card__media img {
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}
.hunt-card:hover .hunt-card__media img { transform: none; }

/* --- Slideshow hero: the photos live on .hero__slide, not on ::before, so
       the band fix has to target the slides themselves. --- */
@media (max-width: 820px) {
  .hero--slides .hero__slides {
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(100vw * 9 / 16);
  }
  .hero--slides .hero__slide { background-position: center !important; }
}

/* --- Feature package image: a fixed window cut 34% off a portrait photo. --- */
.feature-package__media { aspect-ratio: auto !important; overflow: visible; }
.feature-package__media img {
  width: 100%; height: auto !important;
  object-fit: contain !important; display: block;
}
@media (max-width: 900px) { .feature-package__media { min-height: 0 !important; } }

/* =======================================================
   CLIENT FEEDBACK 2026-08-31 — "the photo background is working on computer
   but no longer working on mobile."
   Cause: the 08-27/28 phone-band fix gave .hero--photo its own solid
   background (var(--ramp-900)) so the copy below the band had ground to sit
   on. But the slideshow layer .hero__slides sits at z-index:-2, and .hero is
   only position:relative, so it never opened a stacking context of its own -
   the negative layer dropped behind the hero's own background and the navy
   painted straight over the photos. Desktop never showed it because
   .hero--photo has no background there.
   Fix: stop relying on a negative z-index. The slides sit at layer 0, the
   scrim at 1, the copy at 2, all above the hero's background.
   ======================================================= */
.hero--slides { isolation: isolate; }
.hero--slides .hero__slides { z-index: 0; }
.hero--slides .hero__slide { z-index: 0; }
.hero--slides.hero--photo::after { z-index: 1; }
.hero--slides .wrap { position: relative; z-index: 2; }
.hero--slides .hero__inner { position: relative; z-index: 2; }

@media (max-width: 820px) {
  /* the navy is only meant to be the ground UNDER the photo band */
  .hero--slides.hero--photo { background: var(--ramp-900, #0d1a2e); }
  .hero--slides .hero__slides { z-index: 0; }
  .hero--slides.hero--photo::after { height: calc(100vw * 9 / 16); z-index: 1; }
}

/* --- CLIENT FEEDBACK 2026-08-31: "in the gallery tab can we add sections:
       Whitetail, Turkey, The Ranch, Waterfowl etc." The trophy room was one
       undivided masonry wall of 29 photos. It is now six labelled sections
       with a jump bar across the top. --- */
.gallery-nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--ramp-900, #0d1a2e);
  border-bottom: 1px solid rgba(207,166,83,0.28);
}
.gallery-nav ul {
  list-style: none; margin: 0; padding: 14px 0;
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  justify-content: center;
}
.gallery-nav a {
  font-family: var(--f-eyebrow); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(244,241,233,0.78);
  text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms;
}
.gallery-nav a:hover, .gallery-nav a:focus-visible {
  color: var(--gold, #cfa653); border-bottom-color: var(--gold, #cfa653);
}
.gallery-section { scroll-margin-top: 76px; padding-top: 56px; }
.gallery-section + .gallery-section { padding-top: 40px; }
.gallery-section__head { margin-bottom: 26px; max-width: 60ch; }
.gallery-section__head .eyebrow { color: var(--gold, #cfa653); display: block; margin-bottom: 8px; }
.gallery-section__head h2 { margin: 0 0 8px; }
.gallery-section__head p { margin: 0; opacity: 0.78; }
@media (max-width: 700px) {
  .gallery-nav ul { gap: 6px 16px; padding: 11px 0; }
  .gallery-nav a { font-size: 0.66rem; letter-spacing: 0.16em; }
  .gallery-section { padding-top: 40px; }
}

/* CLIENT FEEDBACK 2026-09-01 — Landowner Network section (about page).
   `.lodging__opts` used `1fr 1fr`, which is minmax(auto,1fr): a card whose
   longest word is wider forces uneven columns (measured 143px vs 194px at
   375px). minmax(0,1fr) makes the two cards equal again. Column COUNT is
   left alone on purpose - the two-up layout is what the owner approved. */
.lodging-split .lodging__opts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

/* =======================================================
   CLIENT FEEDBACK 2026-09-04 — "the home page section that highlights the hunt
   is SUPER tall compared to the image and all the blank grey space looks bad."
   Cause: the 08-27/28 portrait fix set .feature-package__media img to
   height:auto, but the media DIV is still a stretched grid cell, so it stays
   as tall as the (much taller) text column. .feature-package__media::after is
   inset:0 over that whole cell, so its gradient painted over the empty space
   below the photo — that is the grey band. /trips showed less of it only
   because its text column is shorter.
   Fix: let the media cell shrink to the image and centre it in the row. The
   ::after overlay then matches the photo exactly. Do NOT re-add a fixed
   height/aspect-ratio here — that is what cropped the portrait photo in the
   first place.
   ======================================================= */
.feature-package__media { align-self: center; }
@media (max-width: 900px) { .feature-package__media { align-self: stretch; } }

/* --- CLIENT FEEDBACK 2026-09-04, follow-ons found while measuring the fix.
   Both cause real sideways scroll on the live site, neither was introduced by
   the centring change above.
   (a) .wm-w2 is parked at right:-3% by design, but nothing clipped it, so the
       home and team pages scrolled 43px sideways at 1440 and 11px at 375.
       Clip it at its own section instead of putting overflow-x on <body>,
       which would break the sticky header.
   (b) /trips "What's Included" was an INLINE grid-template-columns:1fr 1fr
       with no phone collapse — the same minmax(auto,1fr) trap already fixed on
       .lodging__opts. The right column ran 22px off-screen at 375. --- */
.wm-host { overflow: hidden; }
.split-2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: flex-start;
}
@media (max-width: 760px) { .split-2 { grid-template-columns: minmax(0, 1fr); } }