/* ============================================================
   MIDDLE CREEK OUTFITTERS — custom build
   Colorado high-country horseback hunting. Sunset-amber palette
   derived from the logo. Oswald display + Source Serif body.
   ============================================================ */

:root{
  --surface:#FBFAF7;
  --surface-2:#F2ECE2;
  --ink:#1A1208;
  --ink-soft:#4A3D2E;
  --cream:#F6EEDF;

  --accent-fill:#C0522F;     /* buttons, bars */
  --accent-text:#A8431C;     /* links / eyebrows on light (5.77:1) */
  --accent-2:#E3A45C;        /* amber — eyebrows on dark (8.58:1) */
  --on-accent:#FFFFFF;

  --ramp-900:#2A1206;
  --ramp-800:#3E1809;
  --ramp-700:#6E2A0E;
  --ramp-600:#94381A;
  --ramp-500:#C0522F;

  --line:rgba(168,67,28,.28);
  --line-cream:rgba(246,238,223,.20);

  --hero-scrim:.36;
  --hero-pos:50% 50%;

  --t:260ms cubic-bezier(.2,.7,.2,1);
  --s-card:0 14px 40px -18px rgba(30,18,8,.30), 0 2px 6px rgba(30,18,8,.07);
  --s-hover:0 26px 56px -18px rgba(30,18,8,.42), 0 3px 10px rgba(30,18,8,.12);

  --wrap:1180px;
  --ff-display:"Oswald", "Arial Narrow", sans-serif;
  --ff-serif:"Source Serif 4", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-serif) !important;
  color:var(--ink) !important;
  background:var(--surface) !important;
  font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--accent-text); text-decoration:none}
h1,h2,h3,h4,.display{
  font-family:var(--ff-display); font-weight:600;
  line-height:1.02; letter-spacing:.005em; text-transform:uppercase;
  margin:0;
}
p{margin:0 0 1em}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,44px)}
.wrap--narrow{max-width:760px}

.eyebrow{
  font-family:var(--ff-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.26em; font-size:.74rem; color:var(--accent-text);
  margin:0 0 14px; display:block;
}
.section--dark .eyebrow, .cta-banner .eyebrow, .hero .eyebrow{color:var(--accent-2)}

/* ---------- BUTTONS ----------
   Symmetric angled parallelogram, a full-height accent edge bar following the
   angled left border, and an angled left->right color sweep on hover. */
.btn{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.13em; font-size:.86rem; cursor:pointer;
  display:inline-flex; align-items:center;
  padding:17px 34px 16px; border:0; border-radius:0;
  transition:transform var(--t), box-shadow var(--t);
  position:relative; text-decoration:none; overflow:hidden;
  background:var(--accent-fill);
  clip-path:polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.btn__label{position:relative; z-index:3; display:inline-flex; align-items:center; gap:.6em; transition:color 400ms ease}
.btn svg{width:15px; height:15px; transition:transform var(--t)}
.btn:hover svg{transform:translateX(4px)}
/* angled left->right hover sweep (skew matches the button's edge angle) */
.btn::after{
  content:""; position:absolute; top:-10%; left:0; height:120%; width:130%;
  transform:translateX(-104%) skewX(-16deg); transform-origin:left center;
  transition:transform 460ms cubic-bezier(.45,.6,.15,1); z-index:2;
}
.btn:hover::after{transform:translateX(-8%) skewX(-16deg)}

/* PRIMARY — orange; full angled dark-brown edge bar; sweeps to dark brown on hover */
.btn.btn--primary{color:#fff; padding-left:32px}
.btn.btn--primary .btn__label{color:#fff}
.btn.btn--primary::before{
  content:""; position:absolute; inset:0; z-index:1; background:var(--ramp-900);
  clip-path:polygon(16px 0, 25px 0, 9px 100%, 0 100%);
}
.btn.btn--primary::after{background:var(--ramp-800)}
.btn.btn--primary:hover{transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(58,24,9,.55)}

/* SECONDARY on light — outlined (border follows the angled shape via inset shadow) */
.btn.btn--ghost{background:rgba(192,82,47,.06); color:var(--accent-text); box-shadow:inset 0 0 0 1.6px var(--accent-fill)}
.btn.btn--ghost .btn__label{color:var(--accent-text)}
.btn.btn--ghost::after{background:var(--accent-fill)}
.btn.btn--ghost:hover{transform:translateY(-2px)}
.btn.btn--ghost:hover .btn__label{color:#fff}

/* SECONDARY on dark heroes / CTA bands — cream outline, white text, sweeps to white */
.section--dark .btn--ghost, .hero .btn--ghost, .cta-banner .btn--ghost, .photoband .btn--ghost{
  background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1.6px rgba(246,238,223,.85);
}
.section--dark .btn--ghost .btn__label, .hero .btn--ghost .btn__label, .cta-banner .btn--ghost .btn__label, .photoband .btn--ghost .btn__label{color:#fff}
.section--dark .btn--ghost::after, .hero .btn--ghost::after, .cta-banner .btn--ghost::after, .photoband .btn--ghost::after{background:#fff}
.section--dark .btn--ghost:hover .btn__label, .hero .btn--ghost:hover .btn__label, .cta-banner .btn--ghost:hover .btn__label, .photoband .btn--ghost:hover .btn__label{color:var(--ramp-800)}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  transition:background var(--t), box-shadow var(--t), backdrop-filter var(--t);
}
.site-header.is-scrolled{
  background:rgba(251,250,247,.93);
  backdrop-filter:saturate(170%) blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.site-header__inner{
  max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,44px);
  height:96px; display:flex; align-items:center; justify-content:space-between;
  transition:height var(--t);
}
.site-header.is-scrolled .site-header__inner{height:74px}
.brand__logo{height:74px; width:auto; transition:height var(--t); filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.site-header.is-scrolled .brand__logo{height:54px; filter:none}

.nav-main{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0}
.nav-main > li{position:relative}
.nav-main a{
  font-family:var(--ff-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.12em; font-size:.85rem; color:var(--cream);
  position:relative; padding:6px 0; transition:color var(--t);
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.site-header.is-scrolled .nav-main a{color:var(--ink); text-shadow:none}
.nav-main a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--accent-fill); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t);
}
.nav-main a:hover::after, .nav-main a.is-active::after{transform:scaleX(1)}
.nav-main a:hover{color:var(--accent-2)}
.site-header.is-scrolled .nav-main a:hover{color:var(--accent-text)}

/* dropdown */
.nav-dropdown{
  position:absolute; top:100%; left:-16px; min-width:230px;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--s-card); padding:8px; list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.nav-main > li:hover .nav-dropdown{opacity:1; visibility:visible; transform:translateY(0)}
/* hover bridge across the trigger gap */
.nav-main > li.has-dropdown::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:16px;
}
.nav-dropdown a{
  display:block; color:var(--ink) !important; text-shadow:none !important;
  padding:9px 14px; font-size:.8rem; letter-spacing:.1em;
}
.nav-dropdown a::after{display:none}
.nav-dropdown a:hover{background:var(--surface-2); color:var(--accent-text) !important}
.nav-cta{margin-left:6px}

.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px; z-index:120}
.nav-toggle span{display:block; width:26px; height:2px; background:var(--cream); margin:5px 0; transition:all var(--t)}
.site-header.is-scrolled .nav-toggle span{background:var(--ink)}

/* ---------- HERO ---------- */
.hero{position:relative; display:flex; align-items:flex-end; overflow:hidden}
.hero--photo{min-height:clamp(560px,92vh,880px)}
.hero--photo::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--hero-img);
  background-size:cover; background-position:var(--hero-pos);
}
.hero--photo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 80% 70% at 50% 88%, rgba(20,10,4,.72) 0%, rgba(20,10,4,.10) 70%, rgba(20,10,4,0) 100%),
    linear-gradient(180deg, rgba(20,10,4,.34) 0%, rgba(20,10,4,.05) 38%, rgba(20,10,4,.14) 62%, rgba(20,10,4,.80) 100%);
}
.hero__inner{position:relative; z-index:2; padding:0 0 clamp(56px,9vh,104px); width:100%}
.hero .eyebrow{color:var(--accent-2)}
.hero h1{
  color:#fff !important; font-size:clamp(2.9rem,7.2vw,6rem) !important; font-weight:700;
  letter-spacing:.01em; text-shadow:0 3px 24px rgba(0,0,0,.5); max-width:14ch;
}
.hero__sub{
  color:var(--cream); font-size:clamp(1.05rem,2vw,1.35rem); max-width:44ch;
  margin:20px 0 30px; text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.hero__actions{display:flex; gap:16px; flex-wrap:wrap}
.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  color:var(--cream); font-family:var(--ff-display); font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase; opacity:.8;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero__scroll span{display:block; width:1px; height:34px; background:linear-gradient(var(--accent-2),transparent); animation:scrolldrop 2.2s ease-in-out infinite}
@keyframes scrolldrop{0%{opacity:0; transform:scaleY(.3)}40%{opacity:1}100%{opacity:0; transform:translateY(20px) scaleY(.3)}}

/* interior photo hero — bottom-aligned so the header logo never overlaps the text */
.hero--interior{min-height:clamp(460px,64vh,640px); align-items:flex-end}
.hero--interior .hero__inner{padding-top:130px; padding-bottom:clamp(44px,7vh,72px)}
.hero--interior h1{font-size:clamp(2.5rem,6vw,4.8rem) !important; max-width:20ch}
.hero--interior .hero__sub{margin-bottom:26px}

/* short color hero (fallback / utility pages) */
.hero--block{
  min-height:clamp(340px,44vh,440px); align-items:center;
  background:linear-gradient(158deg,var(--ramp-900) 0%, var(--ramp-800) 42%, var(--ramp-600) 100%);
  position:relative;
}
.hero--block::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-color:var(--accent-2);
  -webkit-mask-image:url("/images/overlays/terrain-ridge.svg"); mask-image:url("/images/overlays/terrain-ridge.svg");
  -webkit-mask-size:760px auto; mask-size:760px auto; -webkit-mask-repeat:repeat; mask-repeat:repeat;
  opacity:.09;
}
.hero--block::after{
  content:""; position:absolute; right:-8%; top:-30%; width:60%; height:150%;
  background:radial-gradient(ellipse at center, rgba(227,164,92,.28), transparent 62%);
  pointer-events:none;
}
.hero--block .hero__inner{padding:clamp(40px,7vh,72px) 0}
.hero--block .eyebrow{color:var(--accent-2)}
.hero--block h1{color:#fff !important; font-size:clamp(2.6rem,6.5vw,5rem) !important; max-width:20ch; text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero--block .hero__sub{color:var(--cream); text-shadow:none; opacity:.94}

/* ---------- SECTIONS ---------- */
.section{padding:clamp(64px,10vw,120px) 0; position:relative}
.section--tight{padding:clamp(46px,6vw,72px) 0}
.section--alt{background:var(--surface-2)}
.section--dark{background:var(--ink); color:var(--cream)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--cream)}
.section--dark p{color:rgba(246,238,223,.82)}
.section--photo{position:relative; color:var(--cream)}

.section--alt::before, .section--dark.has-topo::before, .cta-banner::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-color:var(--ink);
  -webkit-mask-image:url("/images/overlays/terrain-ridge.svg"); mask-image:url("/images/overlays/terrain-ridge.svg");
  -webkit-mask-size:760px auto; mask-size:760px auto; -webkit-mask-repeat:repeat; mask-repeat:repeat;
  opacity:.055;
}
.section--dark.has-topo::before{background-color:var(--accent-2); opacity:.07}
.section > .wrap{position:relative; z-index:1}

.section-head{max-width:640px; margin-bottom:clamp(34px,5vw,56px)}
.section-head--center{margin-left:auto; margin-right:auto; text-align:center}
.section-head h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.section-head h2 .accent{color:var(--accent-text)}
.section--dark .section-head h2 .accent{color:var(--accent-2)}
.section-head p{margin-top:16px; color:var(--ink-soft); font-size:1.08rem}
.section--dark .section-head p{color:rgba(246,238,223,.78)}

/* ---------- INTRO STATEMENT (type-only) ---------- */
.statement{padding:clamp(42px,5.5vw,76px) 0}
.statement p{
  font-family:var(--ff-serif); font-size:clamp(1.3rem,2.5vw,1.95rem); line-height:1.34;
  font-weight:400; color:var(--ink); max-width:32ch; margin:0;
}
.statement .lead-mark{color:var(--accent-text); font-weight:600}
.statement--center{text-align:center}
.statement--center p{max-width:28ch; margin:0 auto}

/* ---------- INTRO SPLIT ---------- */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,72px); align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%; height:100%; min-height:340px; object-fit:cover; border:1px solid var(--line)}
.split__media .tag{
  position:absolute; left:0; bottom:0; background:var(--accent-fill); color:#fff;
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; padding:9px 16px;
}
.split__body h2{font-size:clamp(1.9rem,4vw,3rem); margin-bottom:18px}
.split__body .list{list-style:none; padding:0; margin:20px 0 0}
.split__body .list li{padding:12px 0 12px 30px; position:relative; border-top:1px solid var(--line); font-size:1.02rem}
.split__body .list li::before{content:""; position:absolute; left:0; top:19px; width:14px; height:2px; background:var(--accent-fill)}

/* ---------- SPECIES / HUNT CARDS ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px}
.card-grid--3{grid-template-columns:repeat(3,1fr)}
.hunt-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  overflow:hidden; transition:transform var(--t), box-shadow var(--t);
  box-shadow:var(--s-card); min-height:420px;
}
.hunt-card:hover{transform:translateY(-4px); box-shadow:var(--s-hover)}
.hunt-card__media{position:relative; aspect-ratio:4/3; overflow:hidden}
.hunt-card__media img{width:100%; height:100%; object-fit:cover; transition:transform 700ms ease}
.hunt-card:hover .hunt-card__media img{transform:scale(1.05)}
.hunt-card__media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, rgba(20,10,4,.55))}
.hunt-card__num{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--ff-display); font-size:.74rem; letter-spacing:.2em; color:var(--cream);
  background:rgba(20,10,4,.5); padding:5px 10px; backdrop-filter:blur(2px);
}
.hunt-card__title{
  position:absolute; left:18px; bottom:14px; z-index:2; color:#fff !important;
  font-family:var(--ff-display); font-size:1.5rem; text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.hunt-card__body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.hunt-card__meta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.hunt-card__meta span{
  font-family:var(--ff-display); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line); padding:4px 9px;
}
.hunt-card__body p{font-size:.98rem; color:var(--ink-soft); margin:0 0 18px}
.hunt-card__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px}
.hunt-card__price{font-family:var(--ff-display); color:var(--ink); font-size:1.02rem; text-transform:uppercase; letter-spacing:.04em}
.hunt-card__price b{color:var(--accent-text); font-size:1.5rem}
.hunt-card__link{
  font-family:var(--ff-display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); display:inline-flex; align-items:center; gap:6px;
}
.hunt-card__link svg{width:14px; height:14px; transition:transform var(--t)}
.hunt-card:hover .hunt-card__link svg{transform:translateX(4px)}
.section--alt .hunt-card h3{color:var(--ink)}
.section--dark .hunt-card{background:var(--surface)}
.section--dark .hunt-card h3, .section--dark .hunt-card__body p{color:var(--ink-soft)}
.section--dark .hunt-card__title{color:#fff !important}

/* ---------- EDITORIAL ALTERNATING HUNT ROWS (signature layout) ---------- */
.hunt-row{display:grid; grid-template-columns:1.05fr 1fr; gap:0; align-items:stretch; margin-bottom:clamp(28px,4vw,52px); border:1px solid var(--line); background:var(--surface)}
.hunt-row:last-child{margin-bottom:0}
.hunt-row__media{position:relative; overflow:hidden; min-height:clamp(320px,42vw,460px)}
.hunt-row__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 800ms ease}
.hunt-row:hover .hunt-row__media img{transform:scale(1.05)}
.hunt-row__num{position:absolute; top:0; left:0; z-index:2; font-family:var(--ff-display); font-weight:700;
  font-size:clamp(3.4rem,7vw,6rem); line-height:1; color:#fff; opacity:.92; padding:14px 0 0 22px;
  text-shadow:0 3px 20px rgba(0,0,0,.55)}
.hunt-row__body{padding:clamp(30px,3.5vw,52px); display:flex; flex-direction:column; justify-content:center}
.hunt-row__body .eyebrow{margin-bottom:10px}
.hunt-row__body h3{font-size:clamp(1.9rem,3.4vw,2.9rem); margin-bottom:14px}
.hunt-row__body p{color:var(--ink-soft); margin:0 0 22px; font-size:1.04rem}
.hunt-row__meta{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:20px}
.hunt-row__meta span{font-family:var(--ff-display); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); padding:5px 10px}
.hunt-row__foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; border-top:1px solid var(--line); padding-top:20px}
.hunt-row__price{font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.05em; color:var(--ink); font-size:1rem}
.hunt-row__price b{color:var(--accent-text); font-size:1.7rem; display:block; letter-spacing:0}
.hunt-row--rev .hunt-row__media{order:2}
.hunt-row--rev .hunt-row__num{left:auto; right:22px; padding:14px 22px 0 0}

/* ---------- MANIFESTO BAND (signature) ---------- */
.manifesto{position:relative; overflow:hidden; min-height:clamp(460px,72vh,720px); display:flex; align-items:center}
.manifesto::before{content:""; position:absolute; inset:0; z-index:-2; background-image:var(--hero-img); background-size:cover; background-position:var(--hero-pos)}
.manifesto::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(15,8,3,.72) 0%, rgba(15,8,3,.45) 40%, rgba(15,8,3,.78) 100%)}
.manifesto__inner{position:relative; z-index:2; text-align:center; max-width:1000px; margin:0 auto; padding:clamp(60px,10vh,120px) 0}
.manifesto .eyebrow{color:var(--accent-2); display:block; margin-bottom:22px}
.manifesto__quote{font-family:var(--ff-display); text-transform:uppercase; color:#fff;
  font-size:clamp(2rem,5vw,4.2rem); line-height:1.06; letter-spacing:.01em; margin:0; text-shadow:0 3px 26px rgba(0,0,0,.5)}
.manifesto__quote .accent{color:var(--accent-2)}
.manifesto__by{margin-top:26px; font-family:var(--ff-display); letter-spacing:.2em; text-transform:uppercase; font-size:.82rem; color:var(--cream)}

/* ---------- FULL-BLEED PHOTO BREAK ---------- */
.photoband{position:relative; min-height:clamp(380px,58vh,620px); display:flex; align-items:center; overflow:hidden}
.photoband::before{content:""; position:absolute; inset:0; z-index:-2; background-image:var(--hero-img); background-size:cover; background-position:var(--hero-pos)}
.photoband::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(20,10,4,.78) 0%, rgba(20,10,4,.42) 46%, rgba(20,10,4,.12) 100%)}
.photoband__inner{position:relative; z-index:2; color:var(--cream); max-width:600px}
.photoband h2{color:#fff; font-size:clamp(2rem,4.6vw,3.4rem); margin-bottom:16px}
.photoband p{color:var(--cream); font-size:1.1rem; opacity:.92}

/* ---------- STATS BAND ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; text-align:center}
.stat__num{font-family:var(--ff-display); font-size:clamp(2.6rem,6vw,4.4rem); color:var(--accent-2); line-height:1}
.stat__label{display:block; margin-top:10px; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; color:rgba(246,238,223,.72)}

/* ---------- VALUES TRIAD ---------- */
.triad{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px)}
.triad__item{border-top:2px solid var(--accent-fill); padding-top:22px}
.triad__num{font-family:var(--ff-display); color:var(--accent-text); letter-spacing:.2em; font-size:.8rem}
.triad__item h3{font-size:1.5rem; margin:10px 0 12px}
.triad__item p{color:var(--ink-soft); font-size:1rem; margin:0}
.section--dark .triad__item p{color:rgba(246,238,223,.8)}

/* ---------- PRICING ROWS / TABLE ---------- */
.pricing-group{margin-bottom:38px}
.pricing-group__head{font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.14em; font-size:.9rem; color:var(--accent-text); padding-bottom:10px; border-bottom:2px solid var(--line); margin-bottom:4px}
.pricing-rows{list-style:none; margin:0; padding:0}
.pricing-rows li{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--line)}
.pricing-rows .pr-name{font-size:1.05rem; color:var(--ink)}
.pricing-rows .pr-dots{flex:1; border-bottom:1px dotted var(--line); transform:translateY(-4px); min-width:20px}
.pricing-rows .pr-price{font-family:var(--ff-display); font-size:1.3rem; color:var(--ink); white-space:nowrap}
.pricing-rows .pr-price sup{color:var(--accent-text); font-size:.7rem; margin-right:3px; position:relative; top:-.7em}
.pricing-note{margin-top:22px; font-size:.95rem; color:var(--ink-soft); font-style:italic}

/* ---------- GALLERY ---------- */
.gallery-filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px}
.gallery-filters button{
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.12em; font-size:.76rem;
  padding:9px 18px; border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:all var(--t);
}
.gallery-filters button:hover{border-color:var(--accent-fill); color:var(--accent-text)}
.gallery-filters button.is-active{background:var(--accent-fill); color:#fff; border-color:var(--accent-fill)}
.gallery-grid{columns:3; column-gap:16px}
.gallery-grid figure{margin:0 0 16px; break-inside:avoid; position:relative; cursor:pointer; overflow:hidden; border:1px solid var(--line)}
.gallery-grid img{width:100%; transition:transform 600ms ease}
.gallery-grid figure:hover img{transform:scale(1.04)}
.gallery-grid figure::after{content:""; position:absolute; inset:0; background:rgba(20,10,4,0); transition:background var(--t)}
.gallery-grid figure:hover::after{background:rgba(20,10,4,.18)}

/* lightbox */
.lb{position:fixed; inset:0; z-index:2000; background:rgba(12,7,3,.94); display:none; align-items:center; justify-content:center}
.lb.is-open{display:flex}
.lb img{max-width:92vw; max-height:86vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb__btn{position:absolute; background:none; border:0; color:#fff; cursor:pointer; font-size:2.4rem; opacity:.8; transition:opacity var(--t); padding:14px}
.lb__btn:hover{opacity:1}
.lb__close{top:14px; right:22px; font-size:2rem}
.lb__prev{left:16px; top:50%; transform:translateY(-50%)}
.lb__next{right:16px; top:50%; transform:translateY(-50%)}
.lb__cap{position:absolute; bottom:22px; left:0; right:0; text-align:center; color:var(--cream); font-size:.9rem; padding:0 20px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.04em; font-size:1.12rem; color:var(--ink)}
.faq__q::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--accent-text); font-size:1.6rem; transition:transform var(--t)}
.faq__item.is-open .faq__q::after{content:"\2013"}
.faq__a{max-height:0; overflow:hidden; transition:max-height var(--t)}
.faq__a p{padding:0 0 24px; color:var(--ink-soft); margin:0}

/* ---------- GUEST INFO BLOCKS ---------- */
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px}
.info-block{border:1px solid var(--line); padding:28px; background:var(--surface)}
.info-block h3{font-size:1.3rem; margin-bottom:14px; color:var(--accent-text)}
.info-block ul{list-style:none; margin:0; padding:0}
.info-block li{padding:8px 0 8px 22px; position:relative; font-size:.98rem; color:var(--ink-soft)}
.info-block li::before{content:""; position:absolute; left:0; top:14px; width:11px; height:2px; background:var(--accent-fill)}

/* ---------- CONTACT ---------- */
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:56px}
.contact-card{border:1px solid var(--line); padding:30px; text-align:center; background:var(--surface); transition:transform var(--t), box-shadow var(--t)}
.contact-card:hover{transform:translateY(-4px); box-shadow:var(--s-card)}
.contact-card .ic{width:34px; height:34px; margin:0 auto 16px; color:var(--accent-fill)}
.contact-card h3{font-size:1.05rem; letter-spacing:.1em; margin-bottom:8px}
.contact-card a, .contact-card p{color:var(--ink-soft); font-family:var(--ff-serif); text-transform:none; font-size:1.02rem; margin:0}
.contact-card a:hover{color:var(--accent-text)}
.contact-form-shell{max-width:720px; margin:0 auto; border:1px solid var(--line); padding:clamp(26px,4vw,44px); background:var(--surface)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{margin-bottom:18px}
.field label{display:block; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; color:var(--ink-soft); margin-bottom:7px}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line); background:#fff; color:var(--ink);
  font-family:var(--ff-serif); font-size:1rem; border-radius:0;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent-fill)}
.hp{position:absolute; left:-9999px}
.mb-form{min-height:420px}
.mb-form iframe{width:100% !important; border:0}

/* ---------- CTA BANNER ---------- */
.cta-banner{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--ramp-900),var(--ramp-700) 55%, var(--ramp-500));
  color:#fff; padding:clamp(56px,8vw,96px) 0; text-align:center;
}
.cta-banner::after{content:""; position:absolute; right:-6%; bottom:-40%; width:55%; height:170%; background:radial-gradient(ellipse at center, rgba(227,164,92,.30), transparent 60%); pointer-events:none}
.cta-banner .wrap{position:relative; z-index:1}
.cta-banner h2{color:#fff; font-size:clamp(2rem,5vw,3.6rem); max-width:20ch; margin:0 auto 14px}
.cta-banner p{color:var(--cream); font-size:1.14rem; max-width:52ch; margin:0 auto 30px; opacity:.94}
.cta-banner .hero__actions{justify-content:center}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ramp-900); color:rgba(246,238,223,.72); padding:64px 0 28px}
.site-footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(246,238,223,.14)}
.site-footer__logo{height:96px; width:auto; margin-bottom:18px}
.site-footer p{font-size:.96rem; margin:0 0 8px}
.site-footer h4{font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; color:var(--accent-2); margin:0 0 16px}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:rgba(246,238,223,.72); font-size:.96rem; transition:color var(--t)}
.site-footer a:hover{color:var(--accent-2)}
.site-footer__bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:24px; font-size:.82rem; color:rgba(246,238,223,.5)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity 700ms ease, transform 700ms ease}
.reveal.is-in{opacity:1; transform:none}

/* ---------- BOOKING WIDGET HARDENING ---------- */
button.mb_widget.btn--primary{
  background:var(--accent-fill) !important; color:var(--on-accent) !important;
  font-family:var(--ff-display) !important; padding-left:32px !important;
  clip-path:polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%) !important;
}
.hero--photo:not(.hero--interior) h1{font-size:clamp(2.9rem,7.2vw,6rem) !important}
.hero--interior h1{font-size:clamp(2.5rem,6vw,4.8rem) !important}
.hero--block h1{font-size:clamp(2.6rem,6.5vw,5rem) !important}
.section--alt, .section--dark, .cta-banner{background-color:var(--surface-2)}
.section--dark{background-color:var(--ink) !important}
.cta-banner{background-color:var(--ramp-800) !important}
[data-mb-widget-injected], .mb-injected-style{display:none !important}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .hunt-row{grid-template-columns:1fr}
  .hunt-row--rev .hunt-row__media{order:0}
  .hunt-row__media{min-height:300px}
  .hunt-row--rev .hunt-row__num{left:22px; right:auto; padding:14px 0 0 22px}
  .card-grid--3{grid-template-columns:repeat(2,1fr)}
  .triad{grid-template-columns:1fr; gap:26px}
  .contact-cards{grid-template-columns:1fr}
  .site-footer__top{grid-template-columns:1fr 1fr}
  .gallery-grid{columns:2}
  .stats{grid-template-columns:repeat(2,1fr); gap:26px}
}
@media (max-width:760px){
  body{font-size:17px}
  .nav-main{
    position:fixed; top:0; right:0; height:100vh; width:min(80vw,320px); z-index:110;
    background:var(--surface); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:100px 32px 40px; gap:6px; transform:translateX(100%); transition:transform var(--t);
    box-shadow:-10px 0 40px rgba(0,0,0,.2); overflow-y:auto;
  }
  .nav-main.is-open{transform:translateX(0)}
  .nav-main a, .site-header .nav-main a{color:var(--ink) !important; text-shadow:none !important; font-size:1.05rem; padding:12px 0}
  .nav-dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:2px solid var(--line); padding:0 0 8px 14px; min-width:0}
  .nav-main > li.has-dropdown::after{display:none}
  .nav-toggle{display:block}
  .form-row{grid-template-columns:1fr}
  .card-grid--3{grid-template-columns:1fr}
  .site-footer__top{grid-template-columns:1fr}
  .gallery-grid{columns:1}
  .contact-cards{grid-template-columns:1fr}
  .hero--photo{min-height:clamp(500px,80vh,700px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}

/* ==========================================================================
   CLIENT FEEDBACK — 2026-08-31
   "When you click the website link on your phone, the top main section is all
   the way to the left side of the screen. Can we center that part more?"
   Cause: .hero__inner used the `padding` SHORTHAND, which reset the horizontal
   padding inherited from .wrap to 0. On phones (below the --wrap max-width)
   that put the headline flush against the screen edge on every page.
   Fix: restore .wrap's horizontal gutter on .hero__inner (and .hero--block's
   override, which had the same shorthand problem), and center the hero copy on
   phones so it reads as deliberate rather than jammed left.
   ========================================================================== */
.hero__inner{padding-left:clamp(20px,5vw,44px); padding-right:clamp(20px,5vw,44px)}
.hero--block .hero__inner{padding-left:clamp(20px,5vw,44px); padding-right:clamp(20px,5vw,44px)}

@media (max-width:760px){
  .hero__inner{text-align:center}
  /* decorative scroll cue collided with the now-centered hero buttons */
  .hero__scroll{display:none}
  .hero__inner .hero__sub{margin-left:auto; margin-right:auto}
  .hero__actions{justify-content:center}
  .hero--interior h1, .hero--block h1, .hero--photo h1{max-width:none}
  .hero__inner .hero__sub{max-width:34ch}
}

/* --- CLIENT FEEDBACK 2026-08-31: new line-art logo ------------------------
   Owner supplied a black line-art badge on a solid white background. Shipping
   it as-is would paint a white box into the transparent header and the dark
   footer, so it is knocked out to transparent and served in two variants:
   cream over the transparent header + dark footer, ink once the header pins
   to its cream background. Favicon gets its own cream-backed square so it
   stays legible in both light and dark browser tab bars.
   -------------------------------------------------------------------------- */
/* superseded 2026-09-08 — see the two-variant fix at the end of this file */


/* --- CLIENT FEEDBACK 2026-09-08 -------------------------------------------
   "when i scroll down the logo in the top left changes to the old logo"
   "from android platform, it shrinks the logo and over laps."

   One root cause behind both. The 2026-08-31 pass swapped the pinned-header
   mark by putting `content:url('/images/logo.png')` on the <img>. A replaced
   element swapped that way carries NO intrinsic dimensions until the file it
   points at is already in the browser cache, and `.brand__logo` sizes itself
   `height:74px; width:auto` — so on a first visit the mark measures 0px wide
   the moment the header pins (measured live on /about at 1440px: 77px wide
   unpinned, 0px wide with .is-scrolled applied on a cold cache; 56px once
   logo.png had been fetched). That is the "logo changes" the owner sees, and
   an unsized replaced element next to the nav is what crowds the bar on a
   narrow Android viewport.

   Both colour variants now ship as real <img> elements toggled with display,
   so intrinsic sizing is never lost and both files are fetched with the page.
   The brand also gets a non-shrinking flex basis, and the mark steps down on
   small screens rather than pushing into the menu button. Verified on the
   live page with the fix injected: exactly one mark visible per state, the
   pinned mark keeps its 438x420 ratio (43.8x42 at 390px, 56x54 at 1440px),
   and the logo's right edge clears the menu button at 390px (76px vs 328px).
   -------------------------------------------------------------------------- */
.brand{display:flex; align-items:center; flex:0 0 auto}
.brand__logo--ink{display:none}
.site-header.is-scrolled .brand__logo--cream{display:none}
.site-header.is-scrolled .brand__logo--ink{display:block}

/* 2026-09-10 — owner reported a 2nd time that "when I scroll down the top left
   logo changes" (mobile, 377px). The mark is not swapping artwork: both files
   are the same lockup, cream for the transparent bar over the hero and ink for
   the pinned cream bar (verified live: pinned bg rgba(251,250,247,.93), ink
   mark legible at 42px). What reads as "changing" is the colour flip landing at
   the same instant as a size step-down. The pinned bar is 74px tall, so the
   unpinned mobile logo height already fits inside it — hold the mark at one
   height through the whole scroll so only the bar fills in behind it. Desktop
   still steps 74px -> 54px because a 74px mark cannot fit a 74px bar. */
@media (max-width: 640px){
  .site-header__inner{gap:12px}
  .site-header .brand__logo{height:56px}
  .site-header.is-scrolled .brand__logo{height:56px}
}
@media (max-width: 400px){
  .site-header .brand__logo{height:48px}
  .site-header.is-scrolled .brand__logo{height:48px}
}

/* Camp strip (Plan Your Hunt) */
.camp-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.camp-strip__item{display:block; position:relative; overflow:hidden; border-radius:10px; aspect-ratio:4/3; text-decoration:none}
.camp-strip__item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.camp-strip__item:hover img{transform:scale(1.05)}
@media (max-width:900px){.camp-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.camp-strip{grid-template-columns:1fr 1fr; gap:10px}}


/* --- CLIENT FEEDBACK 2026-09-15 -------------------------------------------
   "the logo keeps changing when i scroll down. please fix this"
   "when i scroll down on the website the top left logo changes to the old logo"
   (reports 3, 4 and 5 — both desktop.)

   Measured live at 1024px: as the header pinned, the mark changed THREE
   things at once — height 74px -> 54px, colour cream -> ink, and
   drop-shadow on -> off. The artwork is identical in both files, so what
   reads as "the old logo" is that simultaneous step-down plus colour flip.
   Mobile was already held to a single height on 2026-09-10; this does the
   same for desktop and holds the shadow too, so the only thing that still
   changes is the colour swap the cream-on-photo / ink-on-cream contrast
   requires. Scoped to min-width:641px so the 56px/48px mobile rules above
   are untouched.

   Removing the colour swap entirely means taking the pinned bar dark, which
   restyles the header on every page — that is a design decision open with
   Caleb and is deliberately NOT shipped here.
   -------------------------------------------------------------------------- */
@media (min-width:641px){
  .site-header .brand__logo{height:58px}
  .site-header.is-scrolled .brand__logo{height:58px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
}