/* =========================================================
   TEMPLATE 1 — RIDGELINE
   Classic, refined outfitter layout. Logo-left + nav-right.
   Cream background, forest + rust accents, serif display.
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --bg: #F8F5EE;
  --bg-alt: #EFEAE0;
  --bg-dark: #1A241B;
  --bg-darker: #111811;
  --ink: #1A1F1C;
  --ink-soft: #2E342F;
  --muted: #6E6A60;
  --line: #D9D3C5;
  --accent: #B4532A;       /* rust */
  --accent-dark: #8E3E1C;
  --accent-2: #314032;     /* forest */
  --accent-2-soft: #4A5E4A;
  --white: #FFFFFF;

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --s-subtle: 0 2px 8px -2px rgba(26, 31, 28, 0.08);
  --s-card:   0 10px 30px -10px rgba(26, 31, 28, 0.22);
  --s-hover:  0 22px 48px -14px rgba(26, 31, 28, 0.35);
  --s-deep:   0 30px 60px -20px rgba(0, 0, 0, 0.45);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 520ms;

  --container: 1240px;
  --nav-h: 84px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; border-radius: var(--r-md); }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 500; }
/* MB widget injects a normalize `h1 { font-size: 2em }` rule that ties on
   specificity (0,0,1) and wins on source order. Pin hero h1 with higher
   specificity AND !important so the title doesn't collapse. */
.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem) !important;
  margin: 0 0 .4em !important;
  line-height: 1.12 !important;
}
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }
.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; }

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* ---------- Eyebrow accent (small caps) ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  white-space: nowrap;
  box-shadow: var(--s-card);
}
.btn.btn--primary { background: var(--accent); color: #fff; }
.btn.btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--s-hover); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; transform: translateY(-2px); box-shadow: var(--s-hover); color: #fff; }
.btn.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.btn.btn--ghost:hover { background: var(--ink); color: #fff; transform: translateY(-2px); box-shadow: var(--s-card); }
.btn.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); box-shadow: none; }
.btn.btn--ghost-light:hover { background: #fff; color: var(--ink); transform: translateY(-2px); box-shadow: var(--s-hover); }

/* ---------- Nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(248, 245, 238, 0.92);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid transparent;
  z-index: 50;
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--s-subtle); border-bottom-color: var(--line); }
.nav-wrap {
  max-width: var(--container);
  margin: 0 auto;
  height: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.brand__tag {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: -2px;
}
.nav-main { display: flex; align-items: center; gap: 4px; }
.nav-main a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink);
  border-radius: var(--r-sm);
}
.nav-main a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav-main a:hover { color: var(--accent-dark); }
.nav-main a:hover::after,
.nav-main a[aria-current="page"]::after { transform: scaleX(1); }
.nav-dropdown { position: relative; }
/* Invisible bridge across the 8px gap between trigger and panel so the
   menu doesn't close on cursor traversal. */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -16px; right: -16px;
  height: 12px;
  pointer-events: auto;
  display: none;
}
.nav-dropdown:hover::after,
.nav-dropdown.open::after { display: block; }
.nav-dropdown > button {
  background: none; border: 0; cursor: pointer;
  padding: 10px 14px;
  font: inherit; font-weight: 500; font-size: .95rem;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-dropdown > button::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-med) var(--ease);
}
.nav-dropdown:hover > button::after,
.nav-dropdown.open > button::after { transform: rotate(-135deg) translateY(2px); }
.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--s-hover);
  border: 1px solid var(--line);
  padding: 10px;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              visibility var(--t-med) var(--ease);
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown.open .nav-dropdown__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown__panel a {
  display: block; padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-weight: 500;
  font-size: .92rem;
}
.nav-dropdown__panel a::after { content: none; }
.nav-dropdown__panel a:hover { background: var(--bg-alt); color: var(--accent-dark); }

/* Dark-header builds: white nav-link color cascades into the dropdown panel
   and makes its text invisible on its white background. Pin panel ink with
   higher-specificity rules. */
.site-header .nav-dropdown__panel a {
  color: var(--ink);
  background: transparent;
}
.site-header .nav-dropdown__panel a:hover {
  background: var(--bg-alt);
  color: var(--accent-dark);
}
.site-header .nav-dropdown__panel a::after { content: none; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  background: none; border: 0;
  width: 44px; height: 44px;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}

/* mobile */
@media (max-width: 1024px) {
  .nav-main { display: none; }
  .nav-toggle { display: inline-block; }
  .site-header.is-open .nav-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    padding: 20px 28px 32px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--s-hover);
  }
  .site-header.is-open .nav-main a { padding: 14px 10px; font-size: 1rem; }
  .nav-dropdown > button { padding: 14px 10px; width: 100%; justify-content: space-between; }
  .nav-dropdown__panel {
    position: static; box-shadow: none; border: 0; padding: 0 0 8px 14px;
    opacity: 1; visibility: visible; transform: none;
    display: none; background: transparent;
  }
  .nav-dropdown.open .nav-dropdown__panel { display: block; }
  .nav-cta .btn--ghost { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 82vh;
  padding: calc(var(--nav-h) + 80px) 0 100px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hero-img, linear-gradient(135deg, #2A3A2C, #1A241B));
  background-size: cover;
  background-position: center 30%;
  z-index: -2;
}
@keyframes slow-pan {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.08) translateY(-2%); }
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.15) 40%, rgba(10,14,11,.85) 100%);
  z-index: -1;
}
.hero__inner { max-width: 780px; }
.hero__eyebrow { color: #F3DCC7; font-weight: 600; }
.hero h1 { color: #fff; font-weight: 500; font-style: italic; font-family: var(--font-display); letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: #F3DCC7; }
.hero .lead { color: rgba(255,255,255,.88); max-width: 56ch; font-size: 1.15rem; margin-bottom: 34px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero--short { min-height: 48vh; padding: calc(var(--nav-h) + 40px) 0 70px; }
.hero--short h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-style: normal; }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: float 2.5s ease-in-out infinite;
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 28px;
  background: rgba(255,255,255,.7);
}
@keyframes float {
  0%,100% { transform: translate(-50%, 0); }
  50%     { transform: translate(-50%, 6px); }
}

/* ---------- Section scaffolding ---------- */
.section { padding: 110px 0; position: relative; }
.section--tight { padding: 80px 0; }
.section--alt { background: var(--bg-alt) !important; }
.section--dark { background: var(--bg-dark) !important; color: #E8E3D6; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: #F3DCC7; }
.section--dark .lead { color: rgba(255,255,255,.82); }

.section__head { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.section__head .eyebrow { display: inline-block; }

/* ---------- Two-column split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--s-card);
  transition: transform var(--t-slow) var(--ease);
}
.split__media img:hover { transform: translateY(-4px) scale(1.01); }
.split--reverse .split__media { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split__media { order: 0; }
}

/* ---------- Hunt cards grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .card-grid { grid-template-columns: 1fr; } }

.hunt-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--s-card);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  display: flex; flex-direction: column;
}
.hunt-card:hover { transform: translateY(-6px); box-shadow: var(--s-hover); }
.hunt-card__img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: 0;
}
.hunt-card__body { padding: 24px 26px 28px; }
.hunt-card h3 { margin-bottom: 10px; }
.hunt-card p { color: var(--muted); font-size: .96rem; margin-bottom: 18px; }
.hunt-card__meta {
  display: flex;
  gap: 18px;
  font-size: .82rem;
  color: var(--ink-soft);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}
.hunt-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hunt-card__meta span::before {
  content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; display: inline-block;
}
.hunt-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 600; font-size: .92rem;
  text-decoration: none;
  transition: gap var(--t-med) var(--ease);
}
.hunt-card__cta:hover { gap: 14px; color: var(--accent-dark); }
.hunt-card__cta::after {
  content: "→";
  transition: transform var(--t-med) var(--ease);
}
.hunt-card__cta:hover::after { transform: translateX(4px); }

/* ---------- Feature trio ---------- */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
@media (max-width: 820px) { .feature-row { grid-template-columns: 1fr; } }
.feature {
  text-align: left;
}
.feature__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  display: grid; place-items: center;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: var(--s-card);
}
.feature h3 { margin-bottom: 8px; }
.feature p  { color: var(--muted); margin: 0; }

/* ---------- Gallery strip ---------- */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-strip img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  border-radius: var(--r-md);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  box-shadow: var(--s-card);
}
.gallery-strip img:hover { transform: scale(1.03); box-shadow: var(--s-hover); }
@media (max-width: 900px) { .gallery-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Reviews row ---------- */
.review-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.review {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 30px 30px 28px;
  box-shadow: var(--s-card);
  border: 1px solid var(--line);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--s-hover); }
.review__stars {
  color: var(--accent); letter-spacing: 2px; font-size: .95rem; margin-bottom: 14px;
}
.review p { color: var(--ink-soft); font-style: italic; }
.review__who { font-weight: 600; color: var(--ink); margin-top: 16px; display: block; font-style: normal; }
.review__when { color: var(--muted); font-size: .85rem; }
@media (max-width: 900px) { .review-row { grid-template-columns: 1fr; } }

/* ---------- Brands strip ---------- */
.brands {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 56px; align-items: center;
  padding: 20px 0;
}
.brands span {
  font-family: var(--font-display);
  color: var(--muted);
  font-size: 1.4rem;
  opacity: .7;
  transition: opacity var(--t-med) var(--ease), color var(--t-med) var(--ease);
  letter-spacing: .02em;
}
.brands span:hover { opacity: 1; color: var(--ink); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 80px 28px;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--s-hover);
}
.cta-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(1000px 500px at 20% 20%, rgba(255,255,255,.08), transparent 70%);
}
.cta-banner h2 { color: #fff; position: relative; margin-bottom: 14px; }
.cta-banner p { color: rgba(255,255,255,.9); max-width: 56ch; margin: 0 auto 28px; position: relative; }
.cta-banner .btn { position: relative; }

/* ---------- Forms ---------- */
.form {
  display: grid; gap: 20px;
  max-width: 640px;
}
.form label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; letter-spacing: .02em; }
.form input, .form select, .form textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: #fff;
  font: inherit;
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(180, 83, 42, 0.15);
}
.form textarea { min-height: 140px; resize: vertical; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }

.mb-form-embed {
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  color: var(--muted);
  text-align: center;
  background: #fff;
}
.mb-form-embed strong { display: block; color: var(--ink); margin-bottom: 4px; font-family: var(--font-display); font-size: 1.1rem; }

/* ---------- Contact cards ---------- */
.contact-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 60px; }
.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  text-align: center;
  box-shadow: var(--s-card);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--s-hover); }
.contact-card__icon {
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.contact-card h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--ink); letter-spacing: .02em; }
.contact-card p { color: var(--muted); margin: 0; font-size: .95rem; }
.contact-card a { color: var(--ink); font-weight: 500; }
@media (max-width: 820px) { .contact-row { grid-template-columns: 1fr; } }

/* ---------- FAQ / AEO ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 16px; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 24px;
  box-shadow: var(--s-subtle);
  transition: box-shadow var(--t-med) var(--ease);
}
.faq details[open] { box-shadow: var(--s-card); }
.faq summary {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.6rem;
  color: var(--accent);
  transition: transform var(--t-med) var(--ease);
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 14px 0 0; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-darker);
  color: #D6D0BF;
  padding: 90px 0 28px;
}
.site-footer h4 {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; } }
.site-footer a { color: #D6D0BF; display: inline-block; padding: 4px 0; font-size: .96rem; }
.site-footer a:hover { color: var(--accent); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin: 4px 0; }
.footer-brand__tag { color: #908976; font-size: .95rem; max-width: 32ch; margin-top: 8px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; color: #D6D0BF; }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: grid; place-items: center;
  color: #D6D0BF;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.socials a:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); }
.socials a svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 22px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: #8C866F;
  font-size: .85rem;
}
.footer-legal a { color: #8C866F; }
.footer-legal a:hover { color: var(--accent); }

/* ---------- Page-title / breadcrumb helpers ---------- */
.breadcrumb {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 14px;
}
.breadcrumb a { color: rgba(255,255,255,.7); }
.breadcrumb a:hover { color: #fff; }

/* ---------- Price block ---------- */
.price-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--s-card);
}
.price-block > div { padding: 22px 26px; border-bottom: 1px solid var(--line); }
.price-block > div:nth-child(odd) { border-right: 1px solid var(--line); background: var(--bg-alt); font-weight: 600; font-family: var(--font-display); font-size: 1.05rem; }
.price-block > div:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 640px) { .price-block { grid-template-columns: 1fr; } .price-block > div:nth-child(odd) { border-right: 0; } }

/* ---------- Animations on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-lg { margin-top: 60px; }
.mb-lg { margin-bottom: 60px; }
.divider {
  height: 1px; background: var(--line); margin: 0 auto; max-width: 100px;
}
.hr-fancy {
  display: flex; align-items: center; gap: 14px;
  color: var(--muted); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  max-width: 420px; margin: 0 auto 36px;
}
.hr-fancy::before, .hr-fancy::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}


/* =====================================================================
   Mallard Bay booking widget — defensive overrides
   ---------------------------------------------------------------------
   MB's widget script (loaded at end of body) does three things that will
   visually break this template unless we counter them:

   1) It injects a global Tailwind stylesheet that includes
      `.container { max-width: 640px … }`. Our template avoids this by
      using `.wrap` instead of `.container`.

   2) It sets `body { font-family: "Nunito Sans"; background: #fff; color: #303030 }`
      and other globals. The !important locks at the top of this file
      (on body + .section--alt + .section--dark + .btn.btn--*) defeat
      that.

   3) It WRAPS every decorated .btn-book in nested divs:
        <div class="mb-full-width">
          <div><div>
            <button style="background:none; border:0; padding:0">
              <a class="btn btn--primary btn-book">Book Now</a>
            </button>
          </div></div>
        </div>
      The `.mb-full-width` class expands to 100% — which blows out nav /
      hero / card layouts. The rules below force it to shrink-wrap around
      the inner <a> everywhere EXCEPT inside pricing / feature cards,
      where we want the button to span the card width and pin to the
      card's bottom edge.
   ===================================================================== */

/* Lock horizontal scroll (prevents the jittery side-swipe some mobile
   browsers let through when any child element overflows the viewport
   by a few pixels). */
html, body { overflow-x: hidden; max-width: 100%; }

.mb-full-width {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
}
.mb-full-width > *,
.mb-full-width > * > *,
.mb-full-width > * > * > * {
  display: inline-block !important;
  width: auto !important;
}
.mb-full-width button {
  display: inline-block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  width: auto !important;
}
.mb-full-width a.btn { display: inline-flex !important; }

/* Inside pricing / feature cards: wrapper expands to full width AND
   pins to the bottom of the card so side-by-side cards have aligned
   buttons regardless of copy length. */
.feature-card > .mb-full-width {
  display: block !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 18px;
}
.feature-card > .mb-full-width > *,
.feature-card > .mb-full-width > * > *,
.feature-card > .mb-full-width > * > * > * {
  display: block !important;
  width: 100% !important;
}
.feature-card > .mb-full-width a.btn {
  display: inline-flex !important;
  width: 100% !important;
  justify-content: center !important;
  padding: 14px 28px !important;
}


/* =====================================================================
   Universal mobile + dark-section polish
   ---------------------------------------------------------------------
   Added after the initial Big Water build surfaced these as latent bugs
   across all templates. Kept here as a single block so future edits can
   tweak thresholds in one place.
   ===================================================================== */

/* Force mobile card stacking even when inline styles try to override. */
@media (max-width: 720px) {
  .card-grid { grid-template-columns: 1fr !important; }
  .feature-row { grid-template-columns: 1fr !important; }
}

/* Gallery: 2 columns on mobile (was cramped 4-col by default). */
@media (max-width: 720px) {
  .gallery-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Dark-section feature text — the base `.feature p` color token reads
   black against the dark background. Restore contrast. */
.section--dark .feature p,
.section--dark .feature-card p,
.section--dark .feature-card li,
.section--dark .feature h3,
.section--dark .feature h4 { color: rgba(255,255,255,.88); }
.section--dark .feature-card h3,
.section--dark .feature-card h4 { color: #fff; }

/* =========================================================
   Per-build additions: Rockin' B Outdoors
   ========================================================= */

/* Logo image in brand lockup (replaces the generic monogram block) */
.brand__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  flex: 0 0 56px;
  padding: 4px;
}
.brand__logo--footer {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}
@media (max-width: 720px) {
  .brand__logo { width: 44px; height: 44px; flex-basis: 44px; padding: 3px; }
}

/* Gallery — masonry-style CSS columns so natural aspect ratios
   don't leave white gaps. */
.gallery-masonry { column-count: 2; column-gap: 14px; }
@media (min-width: 720px)  { .gallery-masonry { column-count: 3; column-gap: 16px; } }
@media (min-width: 1080px) { .gallery-masonry { column-count: 4; column-gap: 18px; } }
.gallery-masonry img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 14px;
  border-radius: var(--r-md);
  break-inside: avoid;
  box-shadow: var(--s-card);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.gallery-masonry img:hover { transform: translateY(-3px); box-shadow: var(--s-hover); }

/* FAQ accordion (faqs.html) */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  box-shadow: var(--s-subtle);
  transition: box-shadow var(--t-med) var(--ease);
}
.faq-item:hover { box-shadow: var(--s-card); }
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 12px 0 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.65; }

/* Contact form — live MB form wrapper (replaces the dashed placeholder
   when there's a real Mallard Bay form embedded). */
.contact-form-shell {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--s-card);
}
@media (min-width: 720px) {
  .contact-form-shell { padding: 36px; }
}
.contact-form-shell::before { content: none !important; }

/* =========================================================
   MB widget button hardening — the widget JS injects styles that
   strip our .btn padding/background/border/radius from any element
   carrying .mb_widget. These rules outrank the injection.
   ========================================================= */
button.mb_widget.btn,
button.mb_widget.btn.btn--primary,
button.mb_widget.btn.btn--dark,
a.mb_widget.btn,
a.mb_widget.btn.btn--primary,
a.mb_widget.btn.btn--dark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 26px !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  border: 1.5px solid transparent !important;
  white-space: nowrap !important;
  box-shadow: var(--s-card) !important;
  line-height: 1.2 !important;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease) !important;
}
button.mb_widget.btn--primary,
a.mb_widget.btn--primary {
  background: var(--accent) !important;
  color: #fff !important;
}
button.mb_widget.btn--primary:hover,
a.mb_widget.btn--primary:hover {
  background: var(--accent-dark) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--s-hover) !important;
}
button.mb_widget.btn--dark,
a.mb_widget.btn--dark {
  background: var(--ink) !important;
  color: #fff !important;
}
button.mb_widget.btn--dark:hover,
a.mb_widget.btn--dark:hover {
  background: #000 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   Dark-header treatment for Rockin' B (white logo on dark forest bg).
   Flips the cream header to forest green so the white wordmark logo
   reads. Cascade defenses for the dropdown panel and brand text are
   already present above — these rules layer the dark theme on top.
   ========================================================= */
.site-header {
  background: var(--bg-dark) !important;     /* deep forest #1A241B */
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: none !important;
}
.site-header.is-scrolled {
  box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Brand logo image — transparent sit-on-dark treatment, sized for
   readability of the wordmark at glance distance. Bump nav-h so the
   larger logo doesn't crowd nav links. */
.site-header { --nav-h: 96px; height: 96px; }
.site-header .brand__logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  flex-basis: 84px;
}
@media (max-width: 720px) {
  .site-header { --nav-h: 76px; height: 76px; }
  .site-header .brand__logo { width: 64px; height: 64px; flex-basis: 64px; }
}

/* Brand wordmark next to the logo — we keep the logo, hide the redundant
   wordmark text since the white logo already includes "Rockin' B Outdoors". */
.site-header .brand__name,
.site-header .brand__tag {
  display: none;
}

/* Nav links — white on dark */
.site-header .nav-main a {
  color: #fff;
}
.site-header .nav-main a:hover {
  color: var(--accent);   /* rust on hover */
}
.site-header .nav-main a::after {
  background: var(--accent);
}
.site-header .nav-dropdown > button {
  color: #fff;
}
.site-header .nav-dropdown > button:hover {
  color: var(--accent);
}
.site-header .nav-dropdown > button[aria-current="page"] {
  color: var(--accent);
}

/* Phone number ghost button — white outline on dark header */
.site-header .nav-cta a.btn.btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
}
.site-header .nav-cta a.btn.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: #fff;
}

/* Mobile hamburger lines — make them white */
.site-header .nav-toggle span {
  background: #fff !important;
}

/* Footer logo — also use the white logo (footer is dark already), no
   pill background needed. */
.site-footer .brand__logo {
  background: transparent;
  border: none;
  padding: 0;
  width: 56px;
  height: 56px;
  flex-basis: 56px;
}
.site-footer .brand__name { display: none; }
.site-footer .brand__tag { display: none; }

/* =========================================================
   Caleb feedback round 1 (2026-05-06):
   - Dropdown panel text was reading white-on-white because the
     dark-header `.site-header .nav-main a { color: #fff }` rule
     above ties on specificity with the panel-ink rule and wins
     by source order. Pin the panel text dark with !important
     so it can never lose this race again.
   - Logo bumped header 84→104, footer 56→80 (with nav-h tracking).
   - Contact form shell flipped to dark to merge seamlessly with
     the embedded MB form's dark canvas.
   ========================================================= */

/* Trips dropdown panel — pin text dark on white panel even when the
   dark-header rule colors all .nav-main links white. */
.site-header .nav-dropdown__panel a {
  color: var(--ink) !important;
  background: transparent;
}
.site-header .nav-dropdown__panel a:hover {
  color: var(--accent-dark) !important;
  background: var(--bg-alt);
}
.site-header .nav-dropdown__panel a::after { content: none !important; }

/* Logo sizing — PNGs were cropped to remove transparent padding so the
   sizes below now reflect the actual visible art. Header height keeps
   ~12px of breathing room top/bottom so the logo isn't edge-to-edge. */
.site-header { --nav-h: 116px; height: 116px; }
.site-header .brand__logo {
  width: 92px;
  height: 92px;
  flex-basis: 92px;
}
@media (max-width: 720px) {
  .site-header { --nav-h: 84px; height: 84px; }
  .site-header .brand__logo { width: 64px; height: 64px; flex-basis: 64px; }
}

/* Footer logo — same proportional treatment */
.site-footer .brand__logo {
  width: 88px;
  height: 88px;
  flex-basis: 88px;
}

/* Contact form shell — match the embedded MB form's dark canvas so the
   form panel + outer card read as a single seamless surface. */
.contact-form-shell {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4) !important;
}

/* Brands We Trust — partner logos rendered as imgs, normalized via filter
   so multi-color brand marks (Garmin blue, Yamaha red, 6th Sense white)
   all read as a single dark silhouette on the cream section bg. */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 32px 28px;
  align-items: center;
  justify-items: center;
  margin-top: 28px;
}
@media (max-width: 1080px) {
  .brands-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (max-width: 720px) {
  .brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
}
@media (max-width: 480px) {
  .brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}
.brands-grid img {
  max-height: 68px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Override the base img border-radius so wide wordmarks don't get
     their corners clipped. */
  border-radius: 0 !important;
  filter: brightness(0) opacity(0.55);
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.brands-grid img:hover {
  filter: brightness(0) opacity(0.95);
  transform: translateY(-2px);
}
@media (max-width: 720px) {
  .brands-grid img { max-height: 52px; max-width: 120px; }
}

/* 6th Sense logo is a white-on-black badge — the brightness(0) filter
   blacks out the white text against its own background. Skip the filter
   on this one and just dim opacity so it sits comfortably with the rest. */
.brands-grid img[alt="6th Sense Fishing"] {
  filter: opacity(0.85) !important;
}
.brands-grid img[alt="6th Sense Fishing"]:hover {
  filter: opacity(1) !important;
}




/* Home hero slideshow */
.hero--slides .hero__slides{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero--slides .hero__slide{position:absolute;inset:0;background-size:cover;background-position:center 32%;opacity:0;animation:heroSlideFade 21s infinite}
.hero--slides .hero__slide:nth-child(1){animation-delay:0s}
.hero--slides .hero__slide:nth-child(2){animation-delay:7s}
.hero--slides .hero__slide:nth-child(3){animation-delay:14s}
@keyframes heroSlideFade{0%{opacity:0}4%{opacity:1}29%{opacity:1}33%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.hero--slides .hero__slide{animation:none}.hero--slides .hero__slide:nth-child(1){opacity:1}}