/* ==========================================================================
   Morgenson Farm Hunting — Stylesheet
   ========================================================================== */

:root{
  --ink:            #120f0c;
  --ink-2:          #1b1611;
  --panel:          #1f1a15;
  --panel-2:        #241e17;
  --line:           rgba(230, 217, 196, 0.14);
  --line-strong:    rgba(230, 217, 196, 0.28);
  --cream:          #f3ecdf;
  --cream-dim:      #cabfa9;
  --stone:          #9a8f7c;
  --rust:           #7d2430;
  --rust-light:     #c15f6c;
  --rust-dim:       #4a1620;
  --gold:           #c7a172;
  --wetland:        #6f8a6a;

  /* Client-supplied brand browns (from swatch) */
  --choc-brown:     #623d1c;
  --dark-brown:     #8d703b;
  --light-brown:    #c09f75;
  --text-on-light:  #2e1f13;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Segoe UI', sans-serif;

  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
[id]{ scroll-margin-top: 104px; }
body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* Target/reticle cursor on every clickable link & button, in keeping with the hunt theme */
a, button, .btn, [role="button"], input[type="submit"], input[type="button"]{
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4KPGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFhMTEwOCIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxsaW5lIHgxPSIxNSIgeTE9IjEiIHgyPSIxNSIgeTI9IjkiIHN0cm9rZT0iIzFhMTEwOCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPGxpbmUgeDE9IjE1IiB5MT0iMjEiIHgyPSIxNSIgeTI9IjI5IiBzdHJva2U9IiMxYTExMDgiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxsaW5lIHgxPSIxIiB5MT0iMTUiIHgyPSI5IiB5Mj0iMTUiIHN0cm9rZT0iIzFhMTEwOCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPGxpbmUgeDE9IjIxIiB5MT0iMTUiIHgyPSIyOSIgeTI9IjE1IiBzdHJva2U9IiMxYTExMDgiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkMWEwNjYiIHN0cm9rZS13aWR0aD0iMS42Ii8+CjxsaW5lIHgxPSIxNSIgeTE9IjEiIHgyPSIxNSIgeTI9IjkiIHN0cm9rZT0iI2QxYTA2NiIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8bGluZSB4MT0iMTUiIHkxPSIyMSIgeDI9IjE1IiB5Mj0iMjkiIHN0cm9rZT0iI2QxYTA2NiIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8bGluZSB4MT0iMSIgeTE9IjE1IiB4Mj0iOSIgeTI9IjE1IiBzdHJva2U9IiNkMWEwNjYiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPGxpbmUgeDE9IjIxIiB5MT0iMTUiIHgyPSIyOSIgeTI9IjE1IiBzdHJva2U9IiNkMWEwNjYiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMS43IiBmaWxsPSIjZDFhMDY2Ii8+Cjwvc3ZnPg==") 15 15, pointer;
}
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); text-transform: uppercase; font-weight:600; letter-spacing: 0.03em; }
p{ margin:0; }
.container{ max-width: var(--container); margin:0 auto; padding:0 28px; }

::selection{ background: var(--rust); color:var(--ink); }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--ink); }
::-webkit-scrollbar-thumb{ background: var(--rust-dim); border-radius:10px; }

/* ==========================================================================
   Texture / decorative background
   ========================================================================== */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 2000;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.topo{
  position:absolute; inset:0; opacity:0.5; pointer-events:none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  font-weight: 500;
  padding: 16px 30px;
  border: 1px solid var(--rust);
  color: var(--cream);
  background: transparent;
  transition: all .35s ease;
  white-space: nowrap;
}
.btn svg{ width:16px; height:16px; flex-shrink:0; transition: transform .35s ease; }
.btn.btn-solid{
  background: var(--rust);
  border-color: var(--rust);
  color: #1a1108;
}
.btn.btn-solid:hover{ background: var(--rust-light); border-color: var(--rust-light); }
.btn:not(.btn-solid):hover{ background: rgba(125,36,48,0.12); }
.btn:hover svg{ transform: translateX(4px); }
.btn.btn-ghost-light{
  border-color: rgba(243,236,223,0.4);
}
.btn.btn-ghost-light:hover{ border-color: var(--cream); background: rgba(243,236,223,0.08); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 900;
  padding: 18px 0;
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(141, 112, 59, 0.92);
  backdrop-filter: blur(10px);
  padding: 12px 0;
  border-color: var(--line);
}
.site-header .btn.btn-solid{
  background: var(--choc-brown); border-color: var(--choc-brown); color: #ffffff;
}
.site-header .btn.btn-solid:hover{
  background: var(--light-brown); border-color: var(--light-brown); color: var(--text-on-light);
}
.site-header.is-scrolled .brand-mark{ height:52px; }
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
}
.brand{ display:flex; align-items:center; gap:16px; }
.brand-mark{
  height: 74px; width:auto;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: height .3s ease;
}
.brand-mark img{ height:100%; width:auto; object-fit:contain; }
.brand-mark.lg{ height:128px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.brand-text .t1{
  font-family: var(--font-display); font-size: 16px; letter-spacing:0.08em;
  color: var(--cream);
}
.brand-text .t2{
  font-family: var(--font-body); font-size: 10.5px; letter-spacing:0.24em;
  color: var(--rust-light); text-transform:uppercase; margin-top:3px;
}

.main-nav{ display:flex; align-items:center; gap: 40px; }
.main-nav ul{ display:flex; align-items:center; gap: 34px; }
.main-nav a{
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream-dim);
  position:relative; padding: 6px 0;
  display:inline-flex; align-items:center; gap:8px;
  transition: color .3s ease;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--rust); transition: width .3s ease;
}
.main-nav a:hover, .main-nav a.active{ color: var(--cream); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav .nav-icon{
  width:15px; height:15px; flex-shrink:0; opacity:0.7;
  transition: opacity .3s ease;
}
.main-nav a:hover .nav-icon, .main-nav a.active .nav-icon{ opacity:1; color: var(--rust-light); }
.main-nav a.btn .nav-icon{ display:none; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index: 1100;
}
.nav-toggle span{ width:26px; height:2px; background:var(--cream); transition: all .3s ease; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:flex-end;
  color: var(--cream);
  background-size: cover;
  background-position: center;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.3) 30%, rgba(12,10,8,0.35) 65%, rgba(10,8,6,0.55) 100%);
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  box-shadow: inset 0 0 160px rgba(0,0,0,0.75);
}
.hero-inner{
  position:relative; z-index:2; width:100%;
  padding-top: 200px; padding-bottom: 110px;
}
.hero-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family: var(--font-display); font-size: 13px; letter-spacing:0.32em;
  text-transform:uppercase; color: var(--choc-brown);
  margin-bottom: 26px;
}
.hero-eyebrow .rule{ width:46px; height:1px; background: var(--choc-brown); flex-shrink:0; }
.hero h1{
  font-size: clamp(38px, 6vw, 74px);
  line-height: 0.98;
  color: var(--cream);
  max-width: 16ch;
}
.hero h1 .h1-sub{
  display:inline-block;
  font-size: 0.56em;
  line-height: 1.15;
}
.hero h1 em{
  font-style:normal; color: var(--rust-light);
}
.hero h1 .hero-untamed{
  color: var(--light-brown);
}
.hero-sub{
  font-family: var(--font-body); font-style: normal; font-weight:400;
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--cream-dim);
  max-width: 620px;
  margin-top: 28px;
  line-height:1.5;
}
.hero-actions{ display:flex; gap:18px; margin-top: 44px; flex-wrap:wrap; }
.hero .btn.btn-solid{
  background: var(--dark-brown); border-color: var(--dark-brown); color: var(--cream);
}
.hero .btn.btn-solid:hover{
  background: var(--light-brown); border-color: var(--light-brown); color: var(--text-on-light);
}
.hero .btn.btn-ghost-light{
  background: var(--light-brown); border-color: var(--light-brown); color: var(--text-on-light);
}
.hero .btn.btn-ghost-light:hover{
  background: var(--dark-brown); border-color: var(--dark-brown); color: var(--cream);
}

.hero-crosshair{
  position:fixed; z-index:40;
  pointer-events:none;
  top: 104px; right: -18px;
  width:150px; height:150px;
  border-radius:50%;
  background: rgba(18,15,12,0.55);
  border: 1px solid rgba(224,201,166,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,.8,.32,1);
  transform: translate(var(--mx, 0px), var(--my, 0px));
  will-change: transform;
}
.hero-scroll{
  position:absolute; right: 28px; bottom: 40px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--cream-dim); font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  font-family: var(--font-display);
}
.hero-scroll .line{ width:1px; height:52px; background: linear-gradient(var(--rust-light), transparent); }

/* small page hero (used on inner pages) */
.page-hero{ min-height: 62vh; }
.page-hero .hero-inner{ padding-top: 190px; padding-bottom: 90px; }
.page-hero h1{ font-size: clamp(38px, 6vw, 74px); }
/* Hunting page hero: lighter fade + choc-brown heading accent — per client request */
.page-hero::before{
  background:
    linear-gradient(180deg, rgba(10,8,6,0.35) 0%, rgba(10,8,6,0.16) 30%, rgba(12,10,8,0.20) 65%, rgba(10,8,6,0.35) 100%);
}
.page-hero::after{
  box-shadow: inset 0 0 110px rgba(0,0,0,0.45);
}
.page-hero h1 em{ color: var(--light-brown); }
/* Hunting page hero heading ("Hunting Packages") — matches the same light-brown
   used on the contact page's hero heading via the shared rule above. */
#hunting-hero h1 em{ color: var(--light-brown); }

/* ==========================================================================
   Section framework
   ========================================================================== */
section{ position:relative; }
.section{ padding: 118px 0; }
.section.tight{ padding: 80px 0; }
.section-alt{ background: var(--ink-2); }
.section-panel{ background: var(--panel); }

.eyebrow{
  display:flex; align-items:center; gap:16px;
  font-family: var(--font-display); font-size:12.5px; letter-spacing:0.32em;
  text-transform:uppercase; color: var(--rust-light);
  margin-bottom: 22px;
}
.eyebrow .rule{ width:40px; height:1px; background: var(--rust-light); flex-shrink:0; }
.eyebrow.center{ justify-content:center; }

.section-head{ max-width: 720px; margin-bottom: 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-title{ font-size: clamp(30px, 4.4vw, 52px); line-height:1.05; color:var(--cream); }
.section-title .accent{ color: var(--rust-light); }
.section-lede{
  font-family: var(--font-body); font-size: 19px; font-weight:400; line-height:1.65; color: var(--cream-dim);
  margin-top: 20px; font-style: normal;
}

.pursuit-callout{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 2.6vw, 29px);
  line-height: 1.3;
  color: var(--cream);
  margin-top: 22px;
  max-width: 700px;
}
.pursuit-callout .accent-strong{ color: var(--rust-light); }

.no-vehicle-badge{
  display:inline-flex; align-items:center; gap:14px;
  margin-top: 20px; padding: 14px 28px 14px 20px;
  border:1px solid var(--rust-dim); background: var(--panel-2);
  font-family: var(--font-display); font-size:15px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--rust-light); font-weight:600;
}
.no-vehicle-badge svg{ width:28px; height:28px; flex-shrink:0; }
.section-head.center .no-vehicle-badge{ margin-left:auto; margin-right:auto; }
.body-text{ color: var(--cream-dim); font-size:16.5px; line-height:1.85; }
.body-text + .body-text{ margin-top:18px; }
.body-text strong{ color: var(--cream); font-weight:600; }

.divider{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin: 8px 0 0;
  color: var(--rust-dim);
}
.divider .rule{ height:1px; flex:1; max-width:120px; background: var(--line-strong); }

/* ==========================================================================
   Grids / Cards
   ========================================================================== */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }

.framed-photo{
  position:relative;
  border: 1px solid var(--line-strong);
  padding: 14px;
}
.framed-photo img{ width:100%; height:100%; object-fit:cover; }
.framed-photo .corner{
  position:absolute; width:26px; height:26px; border-color: var(--rust-light); border-style:solid; border-width:0;
}

/* Our Story section (home page): light-brown panel, dark-brown text, per client request */
#story{ background: var(--light-brown); }
#story .eyebrow{ color: var(--choc-brown); }
#story .eyebrow .rule{ background: var(--choc-brown); }
#story .section-title{ color: var(--dark-brown); }
#story .section-title .accent{ color: var(--choc-brown); }
#story .body-text{ color: var(--choc-brown); }
#story .body-text strong{ color: var(--choc-brown); }
#story .framed-photo .corner{ border-color: var(--dark-brown); }

/* Our Signature Game section (home page): light-brown panel, per client request.
   Trait card text/icons are also re-tinted here (they were light-on-dark for the old
   dark background) so they stay legible on the new light-brown panel. */
#signature{ background: var(--light-brown); }
#signature .eyebrow{ color: var(--choc-brown); }
#signature .eyebrow .rule{ background: var(--choc-brown); }
#signature .section-title{ color: var(--dark-brown); }
#signature .section-title .accent{ color: var(--choc-brown); }
#signature .body-text{ color: var(--choc-brown); }
#signature .framed-photo .corner{ border-color: var(--dark-brown); }
#signature .trait-ico{ color: var(--choc-brown); }
#signature .trait h4{ color: var(--choc-brown); }
#signature .trait p{ color: var(--choc-brown); }
.framed-photo .corner.tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.framed-photo .corner.br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
.framed-photo .cap{
  position:absolute; left:14px; bottom:14px; right:14px;
  display:flex; justify-content:space-between; align-items:flex-end;
  font-family: var(--font-display); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--cream); padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.75));
}

.feature-card{
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 40px 32px;
  transition: border-color .3s ease, transform .3s ease;
}
.feature-card:hover{ border-color: var(--rust-dim); transform: translateY(-4px); }
.feature-icon{
  display:inline-block;
  width:56px; height:56px; margin-bottom: 26px;
  color: var(--rust-light);
}
.feature-icon svg{ width:100%; height:100%; }
.feature-card h3{
  font-size: 18px; color: var(--cream); letter-spacing:0.04em; margin-bottom:14px;
}
.feature-card p{ color: var(--cream-dim); font-size:15px; line-height:1.75; }

/* Species / trait stats */
.trait-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; margin-top: 34px; }
.trait{ display:flex; gap:16px; align-items:flex-start; }
.trait-ico{ display:inline-block; width:34px; height:34px; flex-shrink:0; color: var(--rust-light); margin-top:2px; }
.trait-ico svg{ width:100%; height:100%; }
.trait h4{ font-family: var(--font-display); font-size:13px; letter-spacing:0.1em; color:var(--cream); margin-bottom:5px; }
.trait p{ font-size:14.5px; color: var(--cream-dim); line-height:1.6; }

/* ==========================================================================
   Stats strip
   ========================================================================== */
.stats-strip{
  display:grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat{
  padding: 44px 30px; text-align:center;
  border-right: 1px solid var(--line);
}
.stat:last-child{ border-right:none; }
.stat .num{
  font-family: var(--font-display); font-size: 42px; color: var(--rust-light); line-height:1;
}
.stat .lbl{
  margin-top:12px; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color: var(--cream-dim);
}

/* Stats strip: white background, choc-brown numbers, dark-brown labels — per client request */
#stats-strip{ background: #ffffff; border-top-color: rgba(98,61,28,0.18); border-bottom-color: rgba(98,61,28,0.18); }
#stats-strip .stat{ border-right-color: rgba(98,61,28,0.18); }
#stats-strip .stat .num{ color: var(--choc-brown); }
#stats-strip .stat .lbl{ color: var(--dark-brown); }

/* ==========================================================================
   Quote / statement block
   ========================================================================== */
.statement{
  position:relative;
  padding: 130px 0;
  background: var(--ink);
  overflow:hidden;
}
.statement-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0.28; filter: grayscale(35%);
}
.statement-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, var(--ink), rgba(18,15,12,0.75) 50%, var(--ink)); }
.statement-inner{ position:relative; z-index:2; max-width: 900px; margin:0 auto; padding: 0 28px; text-align:center; }
.statement p{
  font-family: var(--font-display); font-style: normal; font-weight:500;
  font-size: clamp(22px, 3.2vw, 36px); line-height:1.35; color: var(--cream);
}
.statement p .accent{ color: var(--rust-light); }
.statement-attr{
  margin-top:30px; font-family: var(--font-display); font-size:12px; letter-spacing:0.28em;
  text-transform:uppercase; color: var(--cream-dim);
}

.statement.solid-light{ background: #c2a06a; }
.statement.solid-light p{ color: #3a2a1c; }
.statement.solid-light p .accent{ color: #7d2430; }
.statement.solid-light .statement-attr{ color: #5c4726; }

/* Lechwe quote (home page): lighter-brown panel, white quote text in the
   original cursive/italic serif (scoped here only — the breeding-season
   statement below shares the same base .statement class and keeps its own
   font), two phrases picked out in chocolate brown, per client request. */
#lechwe-quote{ background: #d9bd8c; }
#lechwe-quote p{
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(24px, 3.6vw, 40px); line-height:1.4;
  color: #ffffff;
}
#lechwe-quote p .accent-choc{ color: var(--choc-brown); }

/* Our Philosophy section (home page): light-brown panel, choc-brown text
   (client asked for choc- rather than dark-brown here, it read too pale),
   dark-brown photo corners, black photo frame outline — per client request. */
#philosophy{ background: var(--light-brown); }
#philosophy .eyebrow{ color: var(--choc-brown); }
#philosophy .eyebrow .rule{ background: var(--choc-brown); }
#philosophy .section-title{ color: var(--dark-brown); }
#philosophy .section-title .accent{ color: var(--choc-brown); }
#philosophy .body-text{ color: var(--choc-brown); }
#philosophy .framed-photo{ border-color: #000000; }
#philosophy .framed-photo .corner{ border-color: var(--dark-brown); }

/* Breeding-season note (home page): warning icon moved in front of the text
   as a white framed badge (was centred above it), and the two lead-in
   phrases picked out in wine-red — per client request. */
#breeding-note .statement-inner{
  display:flex; align-items:flex-start; gap:22px; text-align:left; max-width:820px;
}
#breeding-note .statement-icon{
  display:flex; align-items:center; justify-content:center;
  width:78px; height:78px; flex-shrink:0; margin-top:4px;
  padding:14px; box-sizing:border-box;
  border: 1.5px solid #8b0000; border-radius:8px;
  color:#8b0000;
}
#breeding-note .statement-icon svg{ width:100%; height:100%; }
#breeding-note p{ margin:0; }
#breeding-note p strong.accent-wine{ color:#7d2430; }
@media (max-width:760px){
  #breeding-note .statement-inner{ flex-direction:column; align-items:center; text-align:center; }
}

/* Getaway CTA band (home page): light-brown panel, dark-brown eyebrow/heading,
   choc-brown "Discover The Hunt" button — per client request. The lede text
   and "Contact Us" ghost button were cream-on-dark before, so they're
   re-tinted to choc-brown here too, to stay legible on the new light bg. */
#getaway-cta{ background: var(--light-brown); }
#getaway-cta .eyebrow{ color: var(--choc-brown); }
#getaway-cta .eyebrow .rule{ background: var(--choc-brown); }
#getaway-cta h2{ color: var(--dark-brown); }
#getaway-cta h2 .accent-choc{ color: var(--choc-brown); }
#getaway-cta .section-lede{ color: var(--choc-brown); }
#getaway-cta .btn.btn-solid{ background: var(--choc-brown); border-color: var(--choc-brown); color:#ffffff; }
#getaway-cta .btn.btn-solid:hover{ background: var(--dark-brown); border-color: var(--dark-brown); color: var(--text-on-light); }
#getaway-cta .btn.btn-ghost-light{ border-color: var(--choc-brown); color: var(--choc-brown); }
#getaway-cta .btn.btn-ghost-light:hover{ border-color: var(--choc-brown); background: rgba(98,61,28,0.1); }

.statement-icon{ display:block; width:58px; height:58px; margin:0 auto 26px; color: #7d2430; }
.statement-icon svg{ width:100%; height:100%; }

/* ==========================================================================
   Package / pricing cards
   ========================================================================== */
.package-tabs{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 46px; }
.package-tab{
  font-family: var(--font-display); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  padding: 12px 22px; border:1px solid var(--line-strong); color: var(--cream-dim);
}
.package-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.package-card{
  background: var(--panel); border: 1px solid var(--line); position:relative;
  padding: 40px 34px 34px;
}
.package-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--rust), var(--gold));
}
.package-card .p-icon{ display:inline-block; width:44px; height:44px; color: var(--rust-light); margin-bottom:22px; }
.package-card .p-icon svg{ width:100%; height:100%; }
.package-card h3{ font-size:22px; color: var(--cream); margin-bottom:8px; }
.package-card .p-desc{ font-size:14px; color: var(--stone); margin-bottom:28px; line-height:1.6; }
.price-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 15px 0; border-top: 1px solid var(--line);
  font-family: var(--font-body);
}
.price-row:first-of-type{ border-top:none; }
.price-row .species{ font-size:15px; color: var(--cream-dim); }
.price-row .price{ font-family: var(--font-display); font-size:19px; color: var(--rust-light); letter-spacing:0.02em; }

.note-box{
  margin-top: 50px; display:flex; gap:22px; align-items:flex-start;
  background: var(--panel-2); border:1px solid var(--line); padding: 28px 32px;
}
.note-box .n-icon{ display:inline-block; width:30px; height:30px; color: var(--rust-light); flex-shrink:0; margin-top:2px; }
.note-box .n-icon svg{ width:100%; height:100%; }
.note-box p{ font-size:14.5px; color: var(--cream-dim); line-height:1.75; }
.note-box strong{ color:var(--cream); }

/* ==========================================================================
   Camp amenities
   ========================================================================== */
.amenity-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.amenity{
  background: var(--ink); padding: 40px 38px; display:flex; gap:24px;
}
.amenity .a-icon{ display:inline-block; width:42px; height:42px; color: var(--rust-light); flex-shrink:0; }
.amenity .a-icon svg{ width:100%; height:100%; }
.amenity h3{ font-size:17px; color:var(--cream); letter-spacing:0.03em; margin-bottom:10px; }
.amenity p{ font-size:14.5px; color:var(--cream-dim); line-height:1.75; }
.amenity .a-price{
  display:inline-block; margin-top:12px; font-family:var(--font-display); font-size:13px;
  color: var(--rust-light); letter-spacing:0.08em;
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 8px; }
.gallery a{ position:relative; overflow:hidden; display:block; cursor: zoom-in; }
.gallery a::after{
  content:''; position:absolute; inset:0; background: rgba(18,15,12,0.15); transition: background .3s ease;
}
.gallery a:hover::after{ background: rgba(18,15,12,0); }
.gallery img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.gallery a:hover img{ transform: scale(1.08); }
.gallery .tall{ grid-row: span 2; }
.gallery .wide{ grid-column: span 2; }

/* Contact page #location section: light-brown background, choc/dark-brown text — per client request */
#location{ background: var(--light-brown); }
#location .eyebrow{ color: var(--choc-brown); }
#location .eyebrow .rule{ background: var(--choc-brown); }
#location .section-title{ color: var(--dark-brown); }
#location .section-title .accent{ color: var(--choc-brown); }
#location .contact-card{ border-color: rgba(98,61,28,0.2); }
#location .contact-card .c-icon{ color: var(--choc-brown); }
#location .contact-card h3{ color: var(--choc-brown); }
#location .contact-card .val{ color: var(--choc-brown); }
#location .contact-card a.val:hover{ color: var(--dark-brown); }
#location .map-frame{ background: rgba(192,159,117,0.15); border-color: rgba(98,61,28,0.25); }
#location .directions-box{ background: rgba(98,61,28,0.1); border-color: rgba(98,61,28,0.2); }
#location .directions-box .d-icon{ color: var(--choc-brown); }
#location .directions-box p{ color: var(--choc-brown); }
#location .directions-box a{ color: var(--dark-brown); }

/* "Let's Plan Your Hunt" (contact page, bottom section): matches the light
   "Beyond The Hunt" panel styling from the hunting page, per client request.
   Contact page normally runs the dark wine theme, so this section re-declares
   the same variables the hunting page's light theme uses, scoped here only. */
#contact-enquiry{
  --ink:         #f6efe1;
  --ink-2:       #efe3ca;
  --panel:       #ffffff;
  --panel-2:     #f4ead6;
  --cream:       #3a2a1c;
  --cream-dim:   #6b5842;
  --line:        rgba(58,42,28,0.14);
  --line-strong: rgba(58,42,28,0.28);
  --rust:        #6b3d22;
  --rust-light:  #935f36;
  --rust-dim:    #46280f;
  --gold:        #a97b45;
}
/* The WhatsApp button's default dark text (meant for the site's usual rust-red
   button) is hard to read on this section's brown button — swapped to cream. */
#contact-enquiry .btn.btn-solid{ color: var(--ink); }

/* Align the three buttons across cards regardless of paragraph length
   (the "Visit The Farm" card's longer text was pushing its button lower
   than the other two) — per client request. */
#contact-enquiry .feature-card{ display:flex; flex-direction:column; }
#contact-enquiry .cta-wrap{ margin-top:auto; padding-top:22px; }

/* Hunting CTA band: lighter fade, light-brown content box on photo,
   choc-brown button — per client request */
#book-hunt-cta::before{
  background: linear-gradient(180deg, rgba(10,8,6,0.42) 0%, rgba(10,8,6,0.32) 40%, rgba(10,8,6,0.52) 100%);
}
#book-hunt-cta::after{
  box-shadow: inset 0 0 100px rgba(0,0,0,0.42);
}
#book-hunt-cta .container{
  background: var(--light-brown);
  padding: 64px 52px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
#book-hunt-cta h2{ color: var(--dark-brown); }
#book-hunt-cta h2 .accent-choc{ color: var(--choc-brown); }
#book-hunt-cta .eyebrow{ color: var(--choc-brown); }
#book-hunt-cta .eyebrow .rule{ background: var(--choc-brown); }
#book-hunt-cta p.section-lede{ color: var(--choc-brown); }
#book-hunt-cta .btn.btn-solid{ background: var(--choc-brown); border-color: var(--choc-brown); color:#ffffff; }
#book-hunt-cta .btn.btn-solid:hover{ background: var(--dark-brown); border-color: var(--dark-brown); }

.lightbox{
  position:fixed; inset:0; z-index:3000; background: rgba(8,6,5,0.94);
  display:flex; align-items:center; justify-content:center; padding: 40px;
  opacity:0; visibility:hidden; transition: opacity .3s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height: 86vh; box-shadow: 0 20px 60px rgba(0,0,0,0.6); border: 1px solid var(--line-strong); transition: opacity .25s ease; touch-action: pan-y; user-select:none; -webkit-user-drag:none; }
.lightbox-close{
  position:absolute; top:28px; right:32px; width:44px; height:44px; border:1px solid var(--line-strong);
  background:none; color: var(--cream); font-size:22px; display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.lightbox-close:hover{ border-color: var(--rust-light); color: var(--rust-light); }
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border:1px solid var(--line-strong);
  background: rgba(18,15,12,0.45); color: var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition: all .3s ease; z-index:2;
}
.lightbox-arrow svg{ width:22px; height:22px; }
.lightbox-arrow.prev{ left:24px; }
.lightbox-arrow.next{ right:24px; }
.lightbox-arrow:hover{ border-color: var(--rust-light); color: var(--rust-light); background: rgba(0,0,0,0.25); }
.lightbox-counter{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  font-family: var(--font-display); font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color: var(--cream-dim); z-index:2;
}
.lightbox-counter .cur{ color: var(--rust-light); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; }
.contact-card{
  display:flex; gap:22px; padding: 30px 0; border-top: 1px solid var(--line);
}
.contact-card:last-child{ border-bottom: 1px solid var(--line); }
.contact-card .c-icon{ display:inline-block; width:38px; height:38px; color: var(--rust-light); flex-shrink:0; }
.contact-card .c-icon svg{ width:100%; height:100%; }
.contact-card h3{ font-size:14px; letter-spacing:0.14em; color: var(--stone); margin-bottom:8px; }
.contact-card .val{ font-family: var(--font-body); font-weight:500; font-size:19px; color: var(--cream); }
.contact-card a.val:hover{ color: var(--rust-light); }

.map-frame{ border: 1px solid var(--line-strong); padding:10px; background: var(--panel); }
.map-frame iframe{ width:100%; height: 460px; border:0; filter: grayscale(35%) contrast(1.05); }

.directions-box{
  margin-top: 26px; padding: 26px 30px; background: var(--panel-2); border:1px solid var(--line);
  display:flex; gap:18px; align-items:flex-start;
}
.directions-box .d-icon{ display:inline-block; width:28px; height:28px; color:var(--rust-light); flex-shrink:0; margin-top:2px; }
.directions-box .d-icon svg{ width:100%; height:100%; }
.directions-box p{ font-size:14.5px; color: var(--cream-dim); line-height:1.75; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  position:relative; padding: 100px 0; text-align:center; overflow:hidden;
  background: linear-gradient(180deg, var(--panel), var(--ink)) center/cover;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cta-band.has-photo{ background-size:cover; background-position:center; }
.cta-band.has-photo::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,8,6,0.72) 0%, rgba(10,8,6,0.6) 40%, rgba(10,8,6,0.85) 100%);
}
.cta-band.has-photo::after{
  content:''; position:absolute; inset:0;
  box-shadow: inset 0 0 140px rgba(0,0,0,0.7);
}
.cta-band.has-photo .container{ position:relative; z-index:2; }
.cta-band h2{ font-size: clamp(30px, 4.6vw, 52px); color: var(--cream); }
.cta-band p.section-lede{ margin: 20px auto 0; }
.cta-actions{ display:flex; gap:18px; justify-content:center; margin-top:42px; flex-wrap:wrap; }

.cta-band.with-map{ text-align:left; padding: 96px 0; }
.cta-map-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.cta-band.with-map h2{ font-size: clamp(28px, 3.6vw, 42px); }
.cta-band.with-map p.section-lede{ margin: 20px 0 0; }
.cta-band.with-map .cta-actions{ justify-content:flex-start; }
.cta-band.with-map .map-frame{ margin:0; }
.cta-band.with-map .map-frame iframe{ height: 340px; }
@media (max-width: 1000px){
  .cta-map-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--ink-2); border-top:1px solid var(--line); padding: 80px 0 30px; }
/* Footer "Hunting · Est. 2026" — white, per client request */
.site-footer .brand-text .t2{ color: var(--cream); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 60px; }
.footer-brand .brand{ margin-bottom:22px; flex-direction:column; align-items:flex-start; gap:14px; }
.footer-brand p{ color: var(--cream-dim); font-size:14.5px; line-height:1.8; max-width:320px; }
.footer-col h4{ font-size:12.5px; letter-spacing:0.18em; color: var(--rust-light); margin-bottom:22px; }
.footer-col ul{ display:flex; flex-direction:column; gap:14px; }
.footer-col a{ font-size:14.5px; color: var(--cream-dim); transition: color .3s ease; }
.footer-col a:hover{ color: var(--rust-light); }
.footer-bottom{
  padding-top: 30px; border-top: 1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  font-size:12.5px; color: var(--stone); letter-spacing:0.04em;
}
.footer-social{ display:flex; gap:14px; }
.footer-social a{
  width:38px; height:38px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  color: var(--cream-dim);
}
.footer-social a svg{ width:17px; height:17px; }
.footer-social a:hover{ border-color: var(--rust-light); color: var(--rust-light); }

.footer-bottom-left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.footer-bottom-left .sep{ color: var(--line-strong); }
.credit{ display:inline-flex; align-items:center; gap:6px; color: var(--stone); }
.credit-ico{ width:12px; height:12px; color: var(--rust-dim); flex-shrink:0; }
.credit a{
  color: var(--rust-light); text-decoration:none;
  border-bottom: 1px solid rgba(224,201,166,0.35); padding-bottom:1px;
  transition: color .3s ease, border-color .3s ease;
}
.credit a:hover{ color: var(--gold); border-color: var(--gold); }

/* ==========================================================================
   Reveal animation
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px){
  .grid-2{ grid-template-columns:1fr; gap:40px; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .package-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .amenity-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:50px; }
  .stats-strip{ grid-template-columns: 1fr 1fr; }
  .stat{ border-bottom:1px solid var(--line); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .gallery{ grid-template-columns: repeat(2,1fr); }
}

/* ==========================================================================
   Mobile tab bar — replaces the hamburger drawer entirely on small screens.
   Fixed to the bottom of the viewport, app-style, always reachable.
   ========================================================================== */
.mobile-tabbar{ display:none; }

@media (max-width: 760px){
  /* Old hamburger drawer is fully retired on mobile — the .main-nav element
     still renders (for desktop) but is hidden here, not slid off-screen. */
  .main-nav{ display:none; }
  .nav-toggle{ display:none; }
  .nav-scrim{ display:none; }

  /* Header lockup on mobile — the wrap bug is fixed by .brand-text stacking
     (above), not by shrinking things, so this stays comfortable rather than
     cramped. Container padding (28px, from .container) still applies here. */
  .site-header{ padding: 18px 0; }
  .site-header .container{ gap:14px; }
  .brand{ gap:12px; }
  .brand-mark{ height:56px; }
  .site-header.is-scrolled .brand-mark{ height:46px; }
  .brand-text .t1{ font-size:15px; }
  .brand-text .t2{ font-size:9.5px; letter-spacing:0.16em; margin-top:2px; }

  body{ padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

  .mobile-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1200;
    background: rgba(141,112,59,0.97); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    gap: 4px;
  }
  .mobile-tabbar .tab-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding:6px 4px; color: var(--cream-dim);
    font-family: var(--font-display); font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
  }
  .mobile-tabbar .tab-item svg{ width:21px; height:21px; }
  .mobile-tabbar .tab-item.active{ color: var(--rust-light); }
  .mobile-tabbar .tab-item.tab-cta{ color: var(--rust-light); }

  .hero-inner{ padding-top: 150px; padding-bottom: 70px; }
  .hero-actions{ flex-direction:column; align-items:flex-start; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .trait-list{ grid-template-columns:1fr; }
  .stats-strip{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .gallery{ grid-template-columns: 1fr 1fr; grid-auto-rows:160px; }
  .amenity{ padding: 32px 26px; }
  .section{ padding: 80px 0; }
  .brand-mark.lg{ height:88px; }
  .hero-crosshair{ width:96px !important; height:96px !important; top:70px !important; right:12px !important; left:auto !important; bottom:auto !important; }
  .lightbox-arrow{ width:42px; height:42px; }
  .lightbox-arrow.prev{ left:8px; }
  .lightbox-arrow.next{ right:8px; }
  .lightbox-close{ top:16px; right:16px; }
}

@media (max-width: 480px){
  .grid-4{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Theme comparison variants — FOR CLIENT REVIEW ONLY, remove once she picks one
   Home = Dark Choc | Hunting = Light Beige | Contact = Red Wine (current default)
   ========================================================================== */

/* Dark Choc (Home): keeps the current dark base, swaps the accent to a warm
   choc-brown / gold instead of wine red, so it reads distinctly from Contact. */
body.theme-choc{
  --rust:        #a9713c;
  --rust-light:  #d1a066;
  --rust-dim:    #6b4423;
  --gold:        #e0c9a6;
}

/* Light Beige (Hunting): flips the page background/panels/text to a light
   beige-and-white palette with choc-brown as the accent. */
body.theme-beige{
  --ink:         #f6efe1;
  --ink-2:       #efe3ca;
  --panel:       #ffffff;
  --panel-2:     #f4ead6;
  --cream:       #3a2a1c;
  --cream-dim:   #6b5842;
  --line:        rgba(58,42,28,0.14);
  --line-strong: rgba(58,42,28,0.28);
  --rust:        #6b3d22;
  --rust-light:  #935f36;
  --rust-dim:    #46280f;
  --gold:        #a97b45;
}

/* Chrome pin: the header, hero (photo + dark scrim) and mobile tab bar always
   need light text over a dark backdrop to stay legible, on every page, so
   they keep today's default dark + wine-red look regardless of which content
   theme the rest of the page is demonstrating. */
body.theme-choc .site-header, body.theme-choc .hero, body.theme-choc .mobile-tabbar, body.theme-choc .lightbox, body.theme-choc .cta-band.has-photo, body.theme-choc .site-footer,
body.theme-beige .site-header, body.theme-beige .hero, body.theme-beige .mobile-tabbar, body.theme-beige .lightbox, body.theme-beige .cta-band.has-photo, body.theme-beige .site-footer{
  --ink:         #120f0c;
  --ink-2:       #1b1611;
  --panel:       #1f1a15;
  --panel-2:     #241e17;
  --cream:       #f3ecdf;
  --cream-dim:   #cabfa9;
  --line:        rgba(230,217,196,0.14);
  --line-strong: rgba(230,217,196,0.28);
  --rust:        #7d2430;
  --rust-light:  #c15f6c;
  --rust-dim:    #4a1620;
  --gold:        #c7a172;
}

/* Header / nav accent color: wine-red swapped for light brown, per client request.
   Placed after the chrome pin above so it wins on every page's header & mobile tab bar. */
body.theme-choc .site-header, body.theme-choc .mobile-tabbar,
body.theme-beige .site-header, body.theme-beige .mobile-tabbar,
body.theme-wine .site-header, body.theme-wine .mobile-tabbar{
  --rust:       var(--light-brown);
  --rust-light: var(--light-brown);
}

/* Footer (every page): choc-brown panel (dark enough to keep the existing
   white/cream nav & description text legible, per client request — "the
   white is fine as it is"), column headings in dark-brown, crest logo
   recoloured solid black. The site-footer is already in the chrome-pin
   block above so this look is identical regardless of page theme. */
.site-footer{ background: var(--choc-brown); }
.footer-col h4{ color: var(--dark-brown); }
.footer-brand .brand-mark img{ filter: brightness(0); }