/* ============================================================================
   Outfitter — Design Pack · Blackwater Ridge (hunting)
   ----------------------------------------------------------------------------
   The bespoke look + motion for the Blackwater hunting demo, lifted from the
   approved design (design/blackwater-hunting/home-hunting-blackwater-ridge.html)
   and keyed to the SAME class names so native Elementor elements tagged with
   them line up 1:1. Theme-enqueued (inc/design-pack.php), invisible inside the
   Elementor editor, never touched by the buyer.

   SCOPING: every rule is scoped under [data-pack="hunting"] so it cannot
   bleed into the other three demo skins even though it loads site-wide while
   the hunting skin is active. Page-component classes (.hero, .exp-card, …)
   simply match nothing on non-Blackwater pages.

   TOKEN BRIDGE: the design's internal palette aliases (--ember, --ink, --moss…)
   are mapped onto the theme's global colour slots below, so a Brand Settings
   accent / bone override repaints this pack too. Decorative-only shades that
   have no global slot stay as literals.

   ADAPTATIONS (editor-safe, free-Elementor): stat numbers use the native
   Counter widget (built-in count-up); the ticker clones whatever items
   the buyer leaves in .ticker-track; grain + embers are decorative theme
   overlays; prefers-reduced-motion disables motion; images carry a saturation
   knob var. See assets/js/design-pack-hunting.js for the behaviour.
   ============================================================================ */

/* 0. INTERNAL PALETTE ALIASES + KNOBS (mapped onto theme tokens) ------------ */
[data-pack="hunting"] {
  /* Aliases mapped onto SEMANTIC ROLE TOKENS (roles.css) so the pack repaints to
     the active skin. Over-image rules below use scrim roles directly (NOT these
     page/raised aliases, which flip dark under a light skin). */
  --bone: var(--r-page-ink);
  --bone-2: var(--r-raised-muted);
  --bone-dim: var(--r-page-muted);
  --ink: var(--r-page-bg);
  --soot: var(--r-raised-bg);
  --moss: var(--color-primary);
  --moss-2: var(--color-secondary);
  --moss-deep: var(--r-contrast-bg);    /* deliberate dark contrast band */
  --pine: #4a5a3a;
  --rust: var(--r-accent-hover);
  --ember: var(--r-accent);
  --blood: #7a2418;
  --gold: var(--r-star);
  --bark: #4a3a26;
  --stone: #6e6754;

  /* Brand-Settings-adjustable knobs (overridden via inline CSS vars). */
  --grain-opacity: .13;
  --img-saturation: .85;
}

/* Neutralise Elementor container default gap + padding EARLY, so every design
   class below (per-section padding, per-grid gap) overrides it at equal
   specificity by virtue of appearing later in this file. The Design Pack is
   enqueued after Elementor's frontend CSS, so these (0,2,0) rules also beat
   Elementor's own .e-con.e-flex (0,2,0) defaults. */
[data-pack="hunting"] .e-con { gap: 0; padding: 0; }

/* 1. PAGE GROUND + GRAIN ---------------------------------------------------- */
html[data-pack="hunting"] {
  overflow-x: hidden;
}

html[data-pack="hunting"] body {
  background:
    radial-gradient(ellipse at 20% 0%, var(--r-page-tint-a) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, var(--r-page-tint-b) 0%, transparent 50%),
    var(--ink);
  min-height: 100vh;
}

/* Fixed full-screen film grain, printed once from the theme (wp_body_open). */
[data-pack="hunting"] .grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity, .13);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 2. HEADER / NAV — moved to assets/css/header.css (the Header Builder owns all
   chrome). The hunting signature (dark header over the scrimmed hero, Cinzel
   ember-underline nav, ember-fill CTA pill, transparent-over-hero + scrolled
   blur) now lives there under html[data-pack="hunting"]. ---------------------- */

/* 3. HERO ------------------------------------------------------------------- */
[data-pack="hunting"] .hero {
  position: relative;
  height: 100vh;
  min-height: 780px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

[data-pack="hunting"] .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Photo is the container's native Background Image (buyer-swappable in the
     container Style tab). Elementor emits background-size/position; these are a
     safety net. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: dp-slowZoom 18s ease-out forwards;
  filter: saturate(var(--img-saturation, .85)) contrast(1.05);
}

@keyframes dp-slowZoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

[data-pack="hunting"] .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--r-scrim-hero),
    radial-gradient(ellipse at 50% 20%, transparent 0%, rgba(12, 13, 9, .4) 80%);
}

/* Atmospheric ember particles (JS injects .ember-dot into .embers). */
[data-pack="hunting"] .embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

[data-pack="hunting"] .ember-dot {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px var(--ember);
  opacity: 0;
  animation: dp-emberRise linear infinite;
}

@keyframes dp-emberRise {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
  10%  { opacity: .85; }
  100% { transform: translate(var(--dx), -100vh) scale(1); opacity: 0; }
}

[data-pack="hunting"] .hero-meta {
  position: absolute;
  top: 50%;
  left: 56px;
  z-index: 3;
  writing-mode: vertical-rl;
  transform-origin: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .4em;
  color: var(--r-scrim-muted);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateY(-50%) rotate(180deg);
}

[data-pack="hunting"] .hero-meta span {
  display: flex;
  align-items: center;
  gap: 14px;
}

[data-pack="hunting"] .hero-meta span::before {
  content: "";
  width: 1px;
  height: 20px;
  background: var(--r-scrim-muted);
}

[data-pack="hunting"] .hero-coords {
  position: absolute;
  top: 50%;
  right: 56px;
  z-index: 3;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .35em;
  color: var(--r-scrim-muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

[data-pack="hunting"] .hero-coords .pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--r-scrim-kicker);
  writing-mode: horizontal-tb;
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
}

[data-pack="hunting"] .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r-scrim-kicker);
  box-shadow: 0 0 0 0 var(--r-scrim-kicker);
  animation: dp-pulse 2s infinite;
}

@keyframes dp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 106, 44, .6); }
  70%  { box-shadow: 0 0 0 10px rgba(217, 106, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 106, 44, 0); }
}

[data-pack="hunting"] .hero-content {
  position: relative;
  z-index: 3;
  padding: 0 56px 90px;
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
}

[data-pack="hunting"] .eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--obk-accent-color, var(--r-scrim-kicker));
  margin-bottom: 28px;
  opacity: 0;
  animation: dp-fadeUp 1.1s ease .4s forwards;
}

[data-pack="hunting"] .eyebrow .ln {
  flex: 0 0 80px;
  height: 1px;
  background: var(--r-scrim-kicker);
}

[data-pack="hunting"] .eyebrow .yr {
  color: var(--r-scrim-muted);
}

[data-pack="hunting"] h1.hero-title,
[data-pack="hunting"] .hero-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(64px, 11.5vw, 188px);
  line-height: .88;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--r-scrim-ink);
  margin-bottom: 42px;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .6);
}

[data-pack="hunting"] .hero-title .l1,
[data-pack="hunting"] .hero-title .l2 {
  display: block;
  overflow: hidden;
}

html.dp-js[data-pack="hunting"] .hero-title .l1 span,
html.dp-js[data-pack="hunting"] .hero-title .l2 span {
  display: inline-block;
  transform: translateY(110%);
  animation: dp-lineUp 1.4s cubic-bezier(.2, .7, .1, 1) forwards;
}

html.dp-js[data-pack="hunting"] .hero-title .l1 span { animation-delay: .6s; }

[data-pack="hunting"] .hero-title .l2 span {
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: .01em;
}

html.dp-js[data-pack="hunting"] .hero-title .l2 span { animation-delay: .85s; }

[data-pack="hunting"] .hero-title .amp {
  color: var(--r-scrim-kicker);
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 300;
}

@keyframes dp-lineUp {
  to { transform: translateY(0); }
}

[data-pack="hunting"] .hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  opacity: 0;
  animation: dp-fadeUp 1.2s ease 1.2s forwards;
}

[data-pack="hunting"] .hero-lede {
  max-width: 430px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--obk-text-color, var(--r-scrim-muted));
  font-family: var(--obk-body-font, inherit);
  font-weight: 300;
}

[data-pack="hunting"] .hero-lede strong {
  color: var(--r-scrim-ink);
  font-weight: 500;
}

[data-pack="hunting"] .hero-actions {
  display: flex;
  gap: 18px;
  align-items: center;
}

/* Hero / banner buttons — design .btn / .btn-primary / .btn-ghost. These are
   the design's OWN button classes (distinct from the theme .btn--* set), used
   on the Blackwater page so the slide-fill motion survives. */
[data-pack="hunting"] .hero .btn,
[data-pack="hunting"] .cta-banner .btn,
[data-pack="hunting"] .hero-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--r-scrim-ink);
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, color .35s ease, border-color .35s ease;
  border-radius: 0;
}

[data-pack="hunting"] .hero-actions .btn-primary,
[data-pack="hunting"] .cta-banner .btn-primary {
  background: var(--r-accent);
  color: var(--r-on-accent);
}

[data-pack="hunting"] .hero-actions .btn-primary::before,
[data-pack="hunting"] .cta-banner .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--r-scrim-ink);
  transform: translateX(-101%);
  transition: transform .45s cubic-bezier(.7, 0, .2, 1);
  z-index: 0;
}

[data-pack="hunting"] .hero-actions .btn-primary span,
[data-pack="hunting"] .hero-actions .btn-primary svg,
[data-pack="hunting"] .cta-banner .btn-primary span,
[data-pack="hunting"] .cta-banner .btn-primary svg {
  position: relative;
  z-index: 1;
}

[data-pack="hunting"] .hero-actions .btn-primary:hover::before,
[data-pack="hunting"] .cta-banner .btn-primary:hover::before {
  transform: translateX(0);
}

[data-pack="hunting"] .hero-actions .btn-primary:hover,
[data-pack="hunting"] .cta-banner .btn-primary:hover {
  color: var(--r-on-accent);
}

[data-pack="hunting"] .hero-actions .btn-ghost,
[data-pack="hunting"] .cta-banner .btn-ghost {
  border: 1px solid rgba(232, 223, 201, .4);
  color: var(--r-scrim-ink);
}

[data-pack="hunting"] .hero-actions .btn-ghost:hover,
[data-pack="hunting"] .cta-banner .btn-ghost:hover {
  border-color: var(--r-scrim-ink);
  background: rgba(232, 223, 201, .06);
}

[data-pack="hunting"] .hero .btn svg,
[data-pack="hunting"] .cta-banner .btn svg {
  width: 14px;
  height: 14px;
  transition: transform .35s ease;
}

[data-pack="hunting"] .hero .btn:hover svg,
[data-pack="hunting"] .cta-banner .btn:hover svg {
  transform: translateX(5px);
}

@keyframes dp-fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-pack="hunting"] .scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--r-scrim-muted);
  opacity: 0;
  animation: dp-fadeUp 1s ease 2s forwards;
}

[data-pack="hunting"] .scroll-cue .ln {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--r-scrim-muted), transparent);
  position: relative;
  overflow: hidden;
}

[data-pack="hunting"] .scroll-cue .ln::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: var(--r-scrim-kicker);
  animation: dp-slide 2.4s ease-in-out infinite;
}

@keyframes dp-slide {
  0%   { top: -20px; }
  100% { top: 60px; }
}

/* 4. HORIZONTAL TICKER ------------------------------------------------------ */
[data-pack="hunting"] .ticker {
  background: var(--soot);
  border-top: 1px solid rgba(232, 223, 201, .08);
  border-bottom: 1px solid rgba(232, 223, 201, .08);
  overflow: hidden;
  padding: 24px 0;
  position: relative;
  z-index: 5;
}

[data-pack="hunting"] .ticker-track {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: dp-scroll 60s linear infinite;
}

[data-pack="hunting"] .ticker-item {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--obk-heading-font, var(--font-heading));
  font-size: 18px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--obk-heading-color, var(--bone-2));
  font-weight: 500;
  white-space: nowrap;
}

/* Decorative star separator — a CSS ::after so each ticker item stays plain,
   click-editable text. It's a flex child of .ticker-item, so the 18px gap sits
   between the word and the star (matching the approved design). */
[data-pack="hunting"] .ticker-item::after {
  content: "\2726";
  color: var(--obk-accent-color, var(--ember));
  font-size: 14px;
}

@keyframes dp-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 5. SECTION HEADS ---------------------------------------------------------- */
[data-pack="hunting"] .sec-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}

[data-pack="hunting"] .sec-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--ember);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-pack="hunting"] .sec-num .nm {
  font-size: 80px;
  font-family: var(--font-heading);
  color: var(--bone);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

[data-pack="hunting"] .sec-num .lbl {
  color: var(--bone-dim);
  text-transform: uppercase;
}

[data-pack="hunting"] .sec-title {
  font-family: var(--font-heading);
  font-size: clamp(42px, 6vw, 86px);
  font-weight: 500;
  line-height: .95;
  color: var(--bone);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0;
}

[data-pack="hunting"] .sec-title em {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  color: var(--ember);
  text-transform: none;
  letter-spacing: 0;
}

/* 6. EXPEDITIONS GRID + CARDS ----------------------------------------------- */
[data-pack="hunting"] .expeditions {
  padding: 160px 56px 140px;
  max-width: 1500px;
  margin: 0 auto;
}

[data-pack="hunting"] .exp-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--ofl-gap, 32px);
}

/* Card photo = the container's NATIVE Background Image; editable text lives
   INSIDE in normal flex flow (no absolute overlay), so the editor can select
   it. flex-column + justify-end drops the body to the bottom like the design. */
[data-pack="hunting"] .exp-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--ofl-card-bg, var(--soot));
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  transition: transform .6s cubic-bezier(.2, .7, .1, 1);
}

/* Render the photo through ::before (background-image:inherit pulls the
   container's own bg) so the saturate/contrast filter + hover zoom hit the
   PHOTO only, never the in-flow text. */
[data-pack="hunting"] .exp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: saturate(var(--img-saturation, .85)) contrast(1.05);
  transition: transform 1.4s cubic-bezier(.2, .7, .1, 1);
}

[data-pack="hunting"] .exp-card:hover::before {
  transform: scale(1.07);
}

[data-pack="hunting"] .exp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--r-scrim);
  transition: background .6s ease;
}

[data-pack="hunting"] .exp-card:hover::after {
  background: var(--r-scrim);
}

[data-pack="hunting"] .exp-meta {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--r-scrim-muted);
}

[data-pack="hunting"] .exp-meta .tag {
  padding: 6px 12px;
  border: 1px solid rgba(232, 223, 201, .4);
  background: var(--r-scrim-tag);
  color: var(--r-scrim-ink);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

[data-pack="hunting"] .exp-meta .num {
  color: var(--r-scrim-muted);
}

[data-pack="hunting"] .exp-body {
  position: relative;
  z-index: 2;
  color: var(--r-scrim-ink);
  padding: 0 32px 32px;
}

[data-pack="hunting"] .exp-species {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ofl-accent-color, var(--r-scrim-kicker));
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-pack="hunting"] .exp-species::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--r-scrim-kicker);
}

[data-pack="hunting"] .exp-name {
  font-family: var(--ofl-heading-font, var(--font-heading));
  font-weight: var(--ofl-heading-weight, 600);
  font-size: var(--ofl-heading-size, 38px);
  line-height: .95;
  text-transform: uppercase;
  margin-bottom: 14px;
  letter-spacing: -.005em;
  color: var(--ofl-heading-color, var(--r-scrim-ink));
  transition: transform .6s cubic-bezier(.2, .7, .1, 1);
}

[data-pack="hunting"] .exp-card:hover .exp-name {
  transform: translateY(-4px);
}

[data-pack="hunting"] .exp-sub {
  font-family: var(--ofl-body-font, var(--font-body));
  font-style: italic;
  color: var(--ofl-text-color, var(--r-scrim-muted));
  font-size: 18px;
  margin-bottom: 24px;
  font-weight: 300;
}

[data-pack="hunting"] .exp-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 18px;
  border-top: 1px solid var(--ofl-border-color, rgba(232, 223, 201, .18));
}

[data-pack="hunting"] .exp-stats {
  display: flex;
  gap: 28px;
}

/* Each stat is now a .exp-stat container holding two heading widgets:
   .exp-stat-k (label) over .exp-stat-v (value). */
[data-pack="hunting"] .exp-stat-k {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ofl-text-color, var(--r-scrim-muted));
}

[data-pack="hunting"] .exp-stat-v {
  color: var(--r-scrim-ink);
  font-size: 14px;
  letter-spacing: .05em;
  margin-top: 6px;
  font-family: var(--font-heading);
  font-weight: 500;
}

[data-pack="hunting"] .exp-arrow {
  width: 48px;
  height: 48px;
  border: 1px solid var(--ofl-border-color, rgba(232, 223, 201, .4));
  border-radius: 50%;
  color: var(--r-scrim-ink);
  text-decoration: none;
  display: grid;
  place-items: center;
  transition: all .4s ease;
  flex-shrink: 0;
}

[data-pack="hunting"] .exp-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform .4s ease;
}

[data-pack="hunting"] .exp-card:hover .exp-arrow {
  background: var(--r-accent);
  border-color: var(--r-accent);
  color: var(--r-on-accent);
}

[data-pack="hunting"] .exp-card:hover .exp-arrow svg {
  transform: rotate(-45deg);
}

[data-pack="hunting"] .exp-card.feature { grid-column: span 7; min-height: 640px; }
[data-pack="hunting"] .exp-card.feature .exp-name { font-size: 56px; }
[data-pack="hunting"] .exp-card.standard { grid-column: span 5; min-height: 640px; }
[data-pack="hunting"] .exp-card.wide { grid-column: span 6; min-height: 480px; }

/* 6b. LISTINGS PLUGIN → exp-card look ---------------------------------------
   The Listings Grid widget (ofl-listings-grid) emits .card.ofl-card with the
   theme .card__* chrome. Remap those onto the dark expedition card so a buyer
   who drops the Listings widget into the Expeditions slot gets the same look,
   with its image/title/price/buttons overlaid like .exp-card. ----------------- */
[data-pack="hunting"] .ofl-grid {
  display: grid;
  gap: 32px;
}

[data-pack="hunting"] .ofl-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
[data-pack="hunting"] .ofl-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }

[data-pack="hunting"] .ofl-card.card {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: var(--soot);
  min-height: 520px;
  display: flex;
}

[data-pack="hunting"] .ofl-card .card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
  background: var(--moss-deep);
}

[data-pack="hunting"] .ofl-card .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(var(--img-saturation, .85)) contrast(1.05);
  transition: transform 1.4s cubic-bezier(.2, .7, .1, 1);
}

[data-pack="hunting"] .ofl-card:hover .card__media img {
  transform: scale(1.07);
}

[data-pack="hunting"] .ofl-card .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--r-scrim);
}

[data-pack="hunting"] .ofl-card .tag.tag--solid {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  padding: 6px 12px;
  border: 1px solid rgba(232, 223, 201, .4);
  background: var(--r-scrim-tag);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--r-scrim-ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .25em;
}

[data-pack="hunting"] .ofl-card .card__body {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  width: 100%;
  padding: 32px;
  gap: 12px;
}

[data-pack="hunting"] .ofl-card .card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--r-scrim-ink);
}

[data-pack="hunting"] .ofl-card .card__title a { color: inherit; }

[data-pack="hunting"] .ofl-card .card__meta {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  font-weight: 300;
  color: var(--r-scrim-muted);
  opacity: 1;
}

[data-pack="hunting"] .ofl-card .card__price {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--r-scrim-kicker);
}

[data-pack="hunting"] .ofl-card .card__actions {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(232, 223, 201, .18);
}

/* 7. GIANT OUTLINE WORDMARK ------------------------------------------------- */
[data-pack="hunting"] .giant-mark {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(70px, 16vw, 260px);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px var(--r-wordmark-stroke);
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 60px 0 30px;
  user-select: none;
  pointer-events: none;
}

/* 8. TERRAIN / STATS -------------------------------------------------------- */
[data-pack="hunting"] .terrain {
  position: relative;
  padding: 160px 56px;
  background: var(--r-contrast-bg);
  overflow: hidden;
}

[data-pack="hunting"] .terrain-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .18;
  /* Native container Background Image (buyer-swappable in the Style tab). */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(.4) contrast(1.1);
}

[data-pack="hunting"] .terrain-inner {
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

[data-pack="hunting"] .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(232, 223, 201, .15);
  border-bottom: 1px solid rgba(232, 223, 201, .15);
  margin-top: 80px;
}

[data-pack="hunting"] .stat {
  padding: 48px 32px;
  border-right: 1px solid rgba(232, 223, 201, .15);
  position: relative;
  overflow: hidden;
  cursor: default;
}

[data-pack="hunting"] .stat:last-child { border-right: none; }

[data-pack="hunting"] .stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--r-accent);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.7, 0, .2, 1);
  z-index: 0;
}

[data-pack="hunting"] .stat:hover::before { transform: translateY(0); }

[data-pack="hunting"] .stat * {
  position: relative;
  z-index: 1;
  transition: color .3s ease;
}

[data-pack="hunting"] .stat:hover .stat-lbl,
[data-pack="hunting"] .stat:hover .stat-sub,
[data-pack="hunting"] .stat:hover .dp-counter .elementor-counter-number-wrapper,
[data-pack="hunting"] .stat:hover .dp-counter .elementor-counter-number-suffix {
  color: var(--r-on-accent);
}

/* Stat number is now the native Counter widget (built-in count-up). Style its
   number wrapper as the big Cinzel figure and its suffix as the ember unit. */
[data-pack="hunting"] .dp-counter .elementor-counter-number-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--obk-heading-font, var(--font-heading));
  font-weight: 500;
  font-size: 88px;
  color: var(--obk-heading-color, var(--r-contrast-ink));
  line-height: 1;
  letter-spacing: -.02em;
}

[data-pack="hunting"] .dp-counter .elementor-counter-number-suffix {
  font-size: 24px;
  color: var(--obk-accent-color, var(--r-contrast-kicker));
  margin-top: 8px;
  font-weight: 400;
  align-self: flex-start;
}

/* Counter title field is unused here (label is a separate .stat-lbl widget). */
[data-pack="hunting"] .dp-counter .elementor-counter-title { display: none; }

[data-pack="hunting"] .stat-lbl {
  font-family: var(--obk-heading-font, var(--font-heading));
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--obk-heading-color, var(--r-contrast-ink));
  margin-top: 18px;
  font-weight: 600;
}

[data-pack="hunting"] .stat-sub {
  font-family: var(--obk-body-font, var(--font-body));
  font-style: italic;
  font-size: 15px;
  color: var(--obk-text-color, var(--r-contrast-muted));
  margin-top: 8px;
  font-weight: 300;
}

/* 9. GUIDES ----------------------------------------------------------------- */
[data-pack="hunting"] .guides {
  padding: 160px 56px;
  max-width: 1500px;
  margin: 0 auto;
}

[data-pack="hunting"] .guide-grid {
  display: grid;
  grid-template-columns: repeat(var(--obk-team-cols, 3), 1fr);
  gap: 24px;
}

[data-pack="hunting"] .guide {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--soot);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 520px;
}

/* Photo/placeholder is a decorative fill layer; the guide text sits in normal
   flex flow on top so the editor can select it. */
[data-pack="hunting"] .guide-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

[data-pack="hunting"] .guide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.5) contrast(1.1) brightness(.85);
  transition: all 1s ease;
}

[data-pack="hunting"] .guide:hover .guide-img img {
  filter: saturate(.95) contrast(1.05) brightness(1);
  transform: scale(1.04);
}

[data-pack="hunting"] .guide-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--r-scrim);
}

/* "Add your team" placeholder when no guide photo is set. */
[data-pack="hunting"] .guide-img--placeholder {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(232, 223, 201, .04) 0 12px, transparent 12px 24px),
    var(--moss-deep);
}

[data-pack="hunting"] .guide-img--placeholder .ph-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--r-scrim-muted);
}

[data-pack="hunting"] .guide-info {
  position: relative;
  z-index: 2;
  padding: 0 28px 28px;
}

[data-pack="hunting"] .guide-no {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .3em;
  color: var(--obk-accent-color, var(--r-scrim-kicker));
  text-transform: uppercase;
  margin-bottom: 10px;
}

[data-pack="hunting"] .guide-name {
  font-family: var(--obk-heading-font, var(--font-heading));
  font-size: var(--obk-heading-size, 30px);
  font-weight: var(--obk-heading-weight, 600);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--obk-heading-color, var(--r-scrim-ink));
  line-height: .95;
}

[data-pack="hunting"] .guide-bio {
  font-family: var(--obk-body-font, var(--font-body));
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  color: var(--obk-text-color, var(--r-scrim-muted));
  font-size: 18px;
  margin-top: 6px;
  letter-spacing: 0;
}

[data-pack="hunting"] .guide-yr {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--r-scrim-ink);
  background: var(--r-scrim-tag);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border: 1px solid rgba(232, 223, 201, .2);
}

/* 10. PLEDGE / MANIFESTO ---------------------------------------------------- */
[data-pack="hunting"] .pledge {
  padding: 180px 56px;
  background: var(--r-sunken-bg);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(232, 223, 201, .08);
  border-bottom: 1px solid rgba(232, 223, 201, .08);
}

[data-pack="hunting"] .pledge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(217, 106, 44, .08) 0%, transparent 60%);
}

[data-pack="hunting"] .pledge-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

[data-pack="hunting"] .pledge-mark {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .4em;
  font-size: 11px;
  color: var(--ember);
  text-transform: uppercase;
  margin-bottom: 50px;
}

[data-pack="hunting"] .pledge-mark::before,
[data-pack="hunting"] .pledge-mark::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  background: var(--ember);
  vertical-align: middle;
  margin: 0 24px;
}

[data-pack="hunting"] .pledge-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.25;
  color: var(--r-sunken-ink);
  letter-spacing: -.005em;
}

[data-pack="hunting"] .pledge-text .accent {
  font-style: normal;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ember);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85em;
}

[data-pack="hunting"] .pledge-sig {
  margin-top: 60px;
}

/* Signer name (discrete heading widget). */
[data-pack="hunting"] .pledge-sig-name {
  color: var(--r-sunken-ink);
  font-size: 24px;
  font-family: var(--font-body);
  font-style: italic;
  letter-spacing: .02em;
  text-transform: none;
  margin-bottom: 6px;
}

/* Role line (discrete text widget). */
[data-pack="hunting"] .pledge-sig-role {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--r-sunken-muted);
  text-transform: uppercase;
}

/* 10b. TESTIMONIALS WIDGET (Outfitter Blocks) ------------------------------
   Hunting skin for the .obk-* testimonial markup. The "single" style matches
   the Pledge look exactly; every overridable property reads an --obk-* var so
   the widget's Style tab can change it live (empty = the value below). */
[data-pack="hunting"] .obk-quote__mark {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .4em;
  font-size: 11px;
  color: var(--obk-accent-color, var(--ember));
  text-transform: uppercase;
  margin-bottom: 50px;
}

[data-pack="hunting"] .obk-tst--single .obk-quote__mark::before,
[data-pack="hunting"] .obk-tst--single .obk-quote__mark::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  background: var(--obk-accent-color, var(--ember));
  vertical-align: middle;
  margin: 0 24px;
}

[data-pack="hunting"] .obk-tst--single .obk-quote__text {
  font-family: var(--obk-body-font, var(--font-body));
  font-weight: 300;
  font-style: italic;
  font-size: var(--obk-heading-size, clamp(28px, 3.4vw, 52px));
  line-height: 1.25;
  color: var(--obk-heading-color, var(--r-sunken-ink));
  letter-spacing: -.005em;
}

[data-pack="hunting"] .obk-tst--single .obk-quote__cite {
  margin-top: 60px;
}

[data-pack="hunting"] .obk-quote__name {
  color: var(--obk-heading-color, var(--r-sunken-ink));
  font-size: 24px;
  font-family: var(--obk-body-font, var(--font-body));
  font-style: italic;
  letter-spacing: .02em;
}

[data-pack="hunting"] .obk-quote__role {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--obk-text-color, var(--r-sunken-muted));
  text-transform: uppercase;
  margin-top: 6px;
}

[data-pack="hunting"] .obk-quote__rating {
  color: var(--obk-highlight-color, var(--r-star));
}

/* Grid + carousel cards on the dark skin. */
[data-pack="hunting"] .obk-quote--card {
  background: var(--obk-bg, var(--r-raised-bg));
  border: 1px solid var(--obk-border-color, rgba(232, 223, 201, .14));
}

[data-pack="hunting"] .obk-quote--card .obk-quote__text {
  font-family: var(--obk-body-font, var(--font-body));
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.4;
  color: var(--obk-text-color, var(--r-raised-muted));
}

[data-pack="hunting"] .obk-quote--card .obk-quote__name {
  font-size: 16px;
  font-style: normal;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--obk-heading-color, var(--r-raised-ink));
}

/* 11. SEASONS --------------------------------------------------------------- */
[data-pack="hunting"] .seasons {
  padding: 160px 56px;
  max-width: 1500px;
  margin: 0 auto;
}

[data-pack="hunting"] .season-list {
  margin-top: 60px;
  border-top: 1px solid var(--r-line);
}

[data-pack="hunting"] .season-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.2fr 1fr 90px;
  gap: 40px;
  padding: 42px 24px;
  align-items: center;
  border-bottom: 1px solid var(--ofl-border-color, var(--r-line));
  transition: background .4s ease, padding .4s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

[data-pack="hunting"] .season-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(217, 106, 44, .08), transparent);
  transition: width .5s ease;
  z-index: 0;
}

[data-pack="hunting"] .season-row:hover::before { width: 100%; }

[data-pack="hunting"] .season-row > * {
  position: relative;
  z-index: 1;
}

[data-pack="hunting"] .season-row:hover { padding-left: 40px; }

[data-pack="hunting"] .season-row .num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--bone-dim);
  letter-spacing: .2em;
}

/* Season name + tagline are now discrete widgets in a .sname container. */
[data-pack="hunting"] .season-row .sname-t {
  font-family: var(--ofl-heading-font, var(--font-heading));
  font-weight: var(--ofl-heading-weight, 500);
  font-size: var(--ofl-heading-size, 34px);
  text-transform: uppercase;
  color: var(--ofl-heading-color, var(--bone));
  letter-spacing: -.01em;
  line-height: 1;
}

[data-pack="hunting"] .season-row .sname-d {
  font-family: var(--ofl-body-font, var(--font-body));
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  color: var(--ofl-text-color, var(--bone-2));
  font-size: 16px;
  margin-top: 6px;
  letter-spacing: 0;
}

/* Window label + dates: discrete widgets in a .swhen container. */
[data-pack="hunting"] .season-row .swhen-k {
  color: var(--bone);
  font-weight: 500;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

[data-pack="hunting"] .season-row .swhen-v {
  font-family: var(--ofl-body-font, var(--font-body));
  font-size: 18px;
  color: var(--ofl-text-color, var(--bone-2));
  font-weight: 300;
}

/* Price + sub: discrete widgets in a .sprice container. */
[data-pack="hunting"] .season-row .sprice-v {
  font-family: var(--ofl-heading-font, var(--font-heading));
  font-weight: 500;
  font-size: 22px;
  color: var(--ofl-price-color, var(--r-price));
  letter-spacing: .02em;
}

[data-pack="hunting"] .season-row .sprice-s {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ofl-text-color, var(--bone-dim));
  margin-top: 4px;
  text-transform: uppercase;
  font-weight: 400;
}

[data-pack="hunting"] .season-row .sgo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(232, 223, 201, .3);
  display: grid;
  place-items: center;
  transition: all .4s ease;
  justify-self: end;
}

[data-pack="hunting"] .season-row:hover .sgo {
  background: var(--r-accent);
  border-color: var(--r-accent);
  color: var(--r-on-accent);
}

[data-pack="hunting"] .season-row .sgo svg {
  width: 14px;
  height: 14px;
  transition: transform .4s ease;
}

[data-pack="hunting"] .season-row:hover .sgo svg { transform: translateX(4px); }

/* 12. FIELD JOURNAL --------------------------------------------------------- */
[data-pack="hunting"] .journal {
  padding: 160px 56px;
  background: var(--obk-bg, var(--r-sunken-bg));
}

[data-pack="hunting"] .journal-inner {
  max-width: 1500px;
  margin: 0 auto;
}

[data-pack="hunting"] .journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--obk-gap, 32px);
  margin-top: 60px;
}

[data-pack="hunting"] .entry { cursor: pointer; }

[data-pack="hunting"] .entry-img {
  position: relative;
  overflow: hidden;
  height: 340px;
  margin-bottom: 24px;
}

[data-pack="hunting"] .entry-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .1, 1);
  filter: saturate(var(--img-saturation, .85));
}

[data-pack="hunting"] .entry:hover .entry-img img { transform: scale(1.06); }

[data-pack="hunting"] .entry-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--r-scrim);
}

[data-pack="hunting"] .entry-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--obk-accent-color, var(--r-scrim-kicker));
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--obk-accent-color, var(--r-scrim-kicker));
  background: var(--r-scrim-tag);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

[data-pack="hunting"] .entry-date {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--obk-text-color, var(--r-sunken-muted));
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

[data-pack="hunting"] .entry-title {
  font-family: var(--obk-heading-font, var(--font-heading));
  font-weight: var(--obk-heading-weight, 500);
  font-size: var(--obk-heading-size, 26px);
  color: var(--obk-heading-color, var(--r-sunken-ink));
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -.005em;
  margin-bottom: 14px;
  transition: color .3s;
}

[data-pack="hunting"] .entry:hover .entry-title { color: var(--obk-accent-color, var(--r-accent)); }

/* Journal title links inherit the (light) heading colour instead of the global
   link colour, which is a dark brand tone and would sit dark-on-dark here. */
[data-pack="hunting"] .entry-title a { color: inherit; text-decoration: none; }

[data-pack="hunting"] .entry-excerpt {
  font-family: var(--obk-body-font, var(--font-body));
  font-size: 17px;
  color: var(--obk-text-color, var(--r-sunken-muted));
  line-height: 1.55;
  font-weight: 300;
}

/* 13. CTA BANNER ------------------------------------------------------------ */
[data-pack="hunting"] .cta-banner {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
}

[data-pack="hunting"] .cta-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Native container Background Image (buyer-swappable in the Style tab). */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(.7) contrast(1.05) brightness(.5);
}

/* Overlay lives on the parent (not .cta-banner-bg) so the bg's brightness(.5)
   filter doesn't also darken the gradient. Sits above the bg (z0), below the
   content (.cta-banner-inner is z-index:1). */
[data-pack="hunting"] .cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--r-scrim-hero);
}

[data-pack="hunting"] .cta-banner-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  /* Equal breathing room above and below the band's content (the band was a fixed
     560px box that jammed the content against the journal above + footer below). */
  padding: 120px 56px;
  max-width: 1100px;
}

[data-pack="hunting"] .cta-banner h2 {
  font-family: var(--obk-heading-font, var(--font-heading));
  font-weight: 500;
  font-size: clamp(48px, 7vw, 108px);
  line-height: .95;
  color: var(--obk-heading-color, var(--r-scrim-ink));
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 32px;
}

[data-pack="hunting"] .cta-banner h2 em {
  font-family: var(--obk-body-font, var(--font-body));
  font-weight: 300;
  font-style: italic;
  color: var(--obk-accent-color, var(--r-scrim-kicker));
  text-transform: none;
  letter-spacing: 0;
}

[data-pack="hunting"] .cta-banner p {
  font-family: var(--obk-body-font, var(--font-body));
  font-style: italic;
  font-size: 22px;
  color: var(--obk-text-color, var(--r-scrim-muted));
  font-weight: 300;
  margin: 0 auto 42px;
  max-width: 680px;
}

/* 14. FOOTER — moved to assets/css/footer.css (Footer Builder owns chrome). The
   hunting signature (ink ground, ember hairline, Cinzel headings) lives there
   under html[data-pack="hunting"]. ------------------------------------------- */

/* 14b. OPTIONAL DECORATIVE TOGGLE HOOKS -------------------------------------
   The Design Pack already reads buyer-overridable CSS vars so a Brand Settings
   "Look & Feel" control can drive the look without code on the page:
     --color-accent      ← accent override (repaints CTAs / ember details)
     --color-text         ← "bone" override
     --grain-opacity      ← grain intensity (0–.4)
     --img-saturation     ← image saturation (0–1.4)
   …each set the radius.php way (wp_add_inline_style on html[data-variant]).
   These classes let that same control hide decorative sections WITHOUT the
   nav-removal/redirect side-effects of the section toggles. Inert until a
   body class is emitted (pending owner sign-off on the control surface). */
html[data-pack="hunting"] body.fx-off-embers .embers { display: none; }
html[data-pack="hunting"] body.fx-off-ticker .ticker { display: none; }
html[data-pack="hunting"] body.fx-off-journal .journal,
html[data-pack="hunting"] body.fx-off-journal .feature-journal { display: none; }

/* 15. REVEAL ON SCROLL ------------------------------------------------------ */
html.dp-js[data-pack="hunting"] .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}

/* Match the hidden rule's specificity (html type selector) so .in wins. */
html.dp-js[data-pack="hunting"] .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* 15b. ELEMENTOR EDITOR MODE ------------------------------------------------
   STANDING DESIGN-PACK RULE: editable content must never depend on
   opacity:0-until-JS or on scroll/entrance animations, or it is invisible
   (and so unselectable) inside the Elementor editor — the IntersectionObserver
   that adds `.reveal.in` never fires there. Inside the editor the preview
   <body> carries `.elementor-editor-active`, so we force every reveal/entrance
   layer to its FINAL, visible, static state and kill scroll/entrance motion.
   These rules ONLY match in the editor, so the front end is byte-for-byte
   unchanged. (Mirror this block in every demo's Design Pack.) */
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal.in,
body.elementor-editor-active .eyebrow,
body.elementor-editor-active .hero-row,
body.elementor-editor-active .scroll-cue,
body.elementor-editor-active .hero-l1 .elementor-heading-title,
body.elementor-editor-active .hero-l2 .elementor-heading-title {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Decorative motion (hero bg zoom, ticker marquee, ember particles) off in the
   editor so nothing drifts under the cursor while editing. */
body.elementor-editor-active .hero-bg,
body.elementor-editor-active .ticker-track {
  animation: none !important;
  transform: none !important;
}

body.elementor-editor-active .ember-dot { animation: none !important; }

/* 16. REDUCED MOTION + RESPONSIVE ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* base.css already neutralises animations globally; ensure content that
     starts hidden for motion is shown. */
  html.dp-js[data-pack="hunting"] .reveal,
  [data-pack="hunting"] .eyebrow,
  [data-pack="hunting"] .hero-row,
  [data-pack="hunting"] .scroll-cue {
    opacity: 1 !important;
    transform: none !important;
  }

  html.dp-js[data-pack="hunting"] .hero-title .l1 span,
  html.dp-js[data-pack="hunting"] .hero-title .l2 span {
    transform: none !important;
  }

  [data-pack="hunting"] .hero-bg { animation: none; transform: none; }
}

@media (max-width: 1100px) {
  /* (The hunting header bar-gap override lives in header.css:709 — the design
     packs defer all header styling to header.css.) */
  [data-pack="hunting"] .hero-content,
  [data-pack="hunting"] .expeditions,
  [data-pack="hunting"] .terrain,
  [data-pack="hunting"] .guides,
  [data-pack="hunting"] .pledge,
  [data-pack="hunting"] .seasons,
  [data-pack="hunting"] .journal,
  [data-pack="hunting"] .cta-banner-inner {
    padding-left: 28px;
    padding-right: 28px;
  }

  [data-pack="hunting"] .hero-meta,
  [data-pack="hunting"] .hero-coords { display: none; }

  [data-pack="hunting"] .exp-grid { grid-template-columns: 1fr; gap: 24px; }

  [data-pack="hunting"] .exp-card.feature,
  [data-pack="hunting"] .exp-card.standard,
  [data-pack="hunting"] .exp-card.wide { grid-column: span 1; }

  [data-pack="hunting"] .exp-card .img-wrap { min-height: 480px !important; }

  [data-pack="hunting"] .ofl-grid--cols-3,
  [data-pack="hunting"] .ofl-grid--cols-2 { grid-template-columns: 1fr; }

  [data-pack="hunting"] .stats-grid { grid-template-columns: repeat(2, 1fr); }
  [data-pack="hunting"] .stat:nth-child(2) { border-right: none; }
  [data-pack="hunting"] .stat:nth-child(1),
  [data-pack="hunting"] .stat:nth-child(2) { border-bottom: 1px solid rgba(232, 223, 201, .15); }

  [data-pack="hunting"] .guide-grid,
  [data-pack="hunting"] .journal-grid { grid-template-columns: 1fr; }

  [data-pack="hunting"] .season-row { grid-template-columns: 50px 1fr 60px; gap: 20px; }
  [data-pack="hunting"] .season-row .swhen,
  [data-pack="hunting"] .season-row .sprice { display: none; }

  [data-pack="hunting"] .sec-head { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================================
   18. ELEMENTOR V4 WIDGET BRIDGE
   Built natively in Elementor, the design classes (_css_classes) land on the
   OUTER .elementor-element wrapper, while the visible text/button/image is an
   inner element. These rules let a design class on the wrapper drive the inner
   element so the Elementor page renders pixel-identically to the raw design.
   Everything in sections 1-17 already targets real container divs or descendant
   img/svg; only the inner text/button/cover pieces need bridging here.
   ============================================================================ */

/* Headings — inner title inherits the wrapper's typography; drop default margin.
   font-size/family/weight set by the design class on the wrapper flow in via
   inherit through .elementor-widget-container. */
[data-pack="hunting"] .elementor-widget-heading .elementor-heading-title {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  margin: 0;
}

/* Text editor — inner inherits; trim trailing margin. */
[data-pack="hunting"] .elementor-widget-text-editor .elementor-widget-container {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

[data-pack="hunting"] .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Let widget wrappers shrink to content inside our flex rows. */
[data-pack="hunting"] .hero-actions > .elementor-widget,
[data-pack="hunting"] .ticker-track > .elementor-widget,
[data-pack="hunting"] .exp-stats > .elementor-widget,
[data-pack="hunting"] .exp-stats > .e-con { width: auto; }

/* Each split stat stacks label over value. */
[data-pack="hunting"] .exp-stat { flex-direction: column; --flex-direction: column; }

/* Buttons — paint Elementor's inner <a.elementor-button>. Tag the Button widget
   with .dp-btn plus .dp-btn-primary or .dp-btn-ghost. */
[data-pack="hunting"] .dp-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--r-scrim-ink);
  font-family: var(--font-heading);
  font-size: 11.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: color .35s ease, border-color .35s ease, transform .35s ease;
}

[data-pack="hunting"] .dp-btn-primary .elementor-button {
  background: var(--r-accent);
  color: var(--r-on-accent);
}

[data-pack="hunting"] .dp-btn-primary .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--r-scrim-ink);
  transform: translateX(-101%);
  transition: transform .45s cubic-bezier(.7, 0, .2, 1);
}

[data-pack="hunting"] .dp-btn-primary .elementor-button:hover::before { transform: translateX(0); }
[data-pack="hunting"] .dp-btn-primary .elementor-button:hover { color: var(--r-on-accent); }
[data-pack="hunting"] .dp-btn .elementor-button > * { position: relative; z-index: 1; }

[data-pack="hunting"] .dp-btn-ghost .elementor-button {
  border: 1px solid rgba(232, 223, 201, .4);
  color: var(--r-scrim-ink);
}

[data-pack="hunting"] .dp-btn-ghost .elementor-button:hover {
  border-color: var(--r-scrim-ink);
  background: rgba(232, 223, 201, .06);
}

[data-pack="hunting"] .dp-btn .elementor-button-icon svg,
[data-pack="hunting"] .dp-btn .elementor-button-icon i { transition: transform .35s ease; }
[data-pack="hunting"] .dp-btn .elementor-button:hover .elementor-button-icon svg,
[data-pack="hunting"] .dp-btn .elementor-button:hover .elementor-button-icon i { transform: translateX(5px); }

/* Cover image — an Image widget tagged .dp-cover fills its positioned parent
   (.img-wrap card photos, .entry-img journal photos) so the design's img rules
   hit the real img. The three true backgrounds (hero/terrain/CTA) instead use
   the container's native Background Image setting — see their sections above. */
[data-pack="hunting"] .dp-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

[data-pack="hunting"] .dp-cover .elementor-widget-container,
[data-pack="hunting"] .dp-cover .elementor-image,
[data-pack="hunting"] .dp-cover a { height: 100%; width: 100%; }

[data-pack="hunting"] .dp-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Circular arrow affordances. The placeholder Icon widget renders Elementor's FA
   arrow as an inline SVG that inherits the Kit "primary" colour (moss → invisible
   on the dark card), and it's a filled glyph, not the design's thin stroke arrow.
   Hide it and draw the design's EXACT stroke arrow via a mask on the native
   .exp-arrow / .sgo container so it inherits currentColor (bone, ember-ink on
   hover) and rotates/slides on hover like the design. */
[data-pack="hunting"] .exp-arrow .elementor-widget-icon,
[data-pack="hunting"] .sgo .elementor-widget-icon { display: none; }

[data-pack="hunting"] .exp-arrow::after,
[data-pack="hunting"] .sgo::after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center / contain no-repeat;
  transition: transform .4s ease;
}

[data-pack="hunting"] .exp-card:hover .exp-arrow::after { transform: rotate(-45deg); }
[data-pack="hunting"] .season-row:hover .sgo::after { transform: translateX(4px); }

/* The .exp-meta badge is still an absolute overlay — size it by its left/right
   offsets, not Elementor's default container width:100%. (.exp-body is now in
   normal flow and keeps the default full width.) */
[data-pack="hunting"] .exp-meta { width: auto; }

/* ============================================================================
   19. BLACKWATER ELEMENTOR PAGE ADAPTATIONS
   Page-build specifics for the native Elementor layout: neutralise container
   defaults, restore row direction where the design expects it, split the hero
   headline into two heading widgets, and rebuild a few multi-span design bits
   (eyebrow rule, pulse dot, stat superscript) via pseudo-elements.
   ============================================================================ */

/* Containers the design lays out as a row. Elementor drives container direction
   via `flex-direction: var(--flex-direction)` (default column), so override the
   variable, not just the property. */
[data-pack="hunting"] .hero-row,
[data-pack="hunting"] .hero-actions,
[data-pack="hunting"] .exp-meta,
[data-pack="hunting"] .exp-foot,
[data-pack="hunting"] .exp-stats,
[data-pack="hunting"] .ticker-track { flex-direction: row; --flex-direction: row; }

/* Elementor flex containers default to flex-wrap:wrap — keep these single-row. */
[data-pack="hunting"] .ticker-track,
[data-pack="hunting"] .exp-meta,
[data-pack="hunting"] .exp-foot,
[data-pack="hunting"] .exp-stats { flex-wrap: nowrap; }

/* NB: the `.e-con` gap/padding reset lives in section 0 (early) so the design's
   per-section gaps/paddings, which appear later in this file, win the tie. */

/* Hero headline — two heading widgets inside .hero-title (l1 Cinzel, l2 italic
   Cormorant), each its own line-reveal mask. */
[data-pack="hunting"] .hero-title { margin-bottom: 42px; }

[data-pack="hunting"] .hero-l1,
[data-pack="hunting"] .hero-l2 {
  display: block;
  overflow: hidden;
  margin: 0;
  font-family: var(--obk-heading-font, var(--font-heading));
  font-weight: 600;
  font-size: clamp(64px, 11.5vw, 188px);
  line-height: .88;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--obk-heading-color, var(--r-scrim-ink));
}

[data-pack="hunting"] .hero-l2 {
  font-family: var(--obk-body-font, var(--font-body));
  font-weight: 400;
  font-style: italic;
  letter-spacing: .01em;
  text-transform: none;
}

[data-pack="hunting"] .hero-l2 .elementor-heading-title::first-letter {
  color: var(--r-scrim-kicker);
  font-weight: 300;
}

html.dp-js[data-pack="hunting"] .hero-l1 .elementor-heading-title,
html.dp-js[data-pack="hunting"] .hero-l2 .elementor-heading-title {
  display: inline-block;
  transform: translateY(110%);
  animation: dp-lineUp 1.4s cubic-bezier(.2, .7, .1, 1) forwards;
}

html.dp-js[data-pack="hunting"] .hero-l1 .elementor-heading-title { animation-delay: .6s; }
html.dp-js[data-pack="hunting"] .hero-l2 .elementor-heading-title { animation-delay: .85s; }

/* Eyebrow leading rule (single heading widget). */
[data-pack="hunting"] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 80px;
  height: 1px;
  background: var(--r-scrim-kicker);
  vertical-align: middle;
  margin-right: 18px;
}

/* Hero-coords pulse dot (single text widget). */
[data-pack="hunting"] .hero-coords .pulse::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r-scrim-kicker);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 var(--r-scrim-kicker);
  animation: dp-pulse 2s infinite;
}


/* ===== SHARED PAGES (.outfitter-shared-page) — hunting: sharp, dark, ember.
   Matches design/hunting/pages/*.html; tokens already give Cinzel/Cormorant. == */
[data-pack="hunting"] .outfitter-shared-page { --sp-media-radius: 0px; }